create-lacspace-app 2.10.0 → 2.12.0

package/README.md

@@ -20,6 +20,15 @@ npx create-lacspace-app my-app --template saas --fullstack
 
 You choose the *kind* of site you're building. It writes a **real Next.js 15 + React 19 + Tailwind v4 app** — not a hello-world, but a genuinely **polished, modern site**: a fluid `clamp()` type scale, tight display headings, a refined light **and** dark palette, glass chrome, soft layered shadows, a smooth logo marquee, animated counters, scroll reveals and a shimmering primary CTA — every page filled in, an SEO stack wired end-to-end, and a **26-component UI kit** you can drop in anywhere.
 
+> **New in v2.12 — real-time & privacy (16 add-ons).** Two more keyless, no-vendor add-ons:
+> - **`realtime`** — live server→browser updates over **Server-Sent Events** (`@lacspace/sse`): a channel hub + a `/live` stream + a React `useSSE` feed. No WebSocket server. Full-stack.
+> - **`consent`** — **GDPR-friendly cookie consent** (`@lacspace/consent`): a drop-in `<ConsentBanner/>`, per-category choices, cookie persistence and `whenConsent()` script-gating. Frontend.
+>
+> **New in v2.11 — the Web Engagement Kit (14 add-ons).** Three keyless, no-vendor add-ons on brand-new `@lacspace` packages:
+> - **`push`** — real **browser push notifications** (`@lacspace/web-push`): keyless VAPID, no Firebase/FCM. Generates a service worker, a subscribe button, and a backend that stores subscriptions and sends. Full-stack.
+> - **`captcha`** — a **privacy-friendly proof-of-work CAPTCHA** (`@lacspace/captcha`): no Google/Cloudflare, no keys, no tracking. A drop-in widget + a backend verify route. Full-stack.
+> - **`notify`** — **in-app toast notifications** (`@lacspace/notify`): a `<Toaster/>` plus success/error/promise toasts, accessible and zero-config. Frontend, any template.
+>
 > **New in v2.10 — three more add-ons (11 total).**
 > - **`uploads`** — authenticated file uploads stored in MongoDB, served via **signed, expiring URLs** (`@lacspace/signed-url`) — no S3 required.
 > - **`i18n`** — multi-language UI: a tiny dependency-free `t()` translator + a language switcher, with English + Nepali locales and an `i18n:check` lint script.

package/dist/index.js

@@ -2342,6 +2342,98 @@ var FEATURES = [
       "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"
+  },
+  {
+    key: "consent",
+    label: "Cookie consent",
+    description: "GDPR-friendly cookie consent (@lacspace/consent) \u2014 a drop-in <ConsentBanner/>, per-category choices, cookie persistence and whenConsent() script-gating. Frontend, any template.",
+    deps: { "@lacspace/consent": "^1.0.0" },
+    files: () => ({ "components/consent.tsx": consentComponent() }),
+    nextSteps: [
+      "Render <ConsentBanner/> once in app/layout.tsx: import { ConsentBanner } from '@/components/consent'.",
+      "Gate analytics/marketing scripts: whenConsent(consent, 'analytics', () => { /* load tag */ }).",
+      "The choice is stored in a cookie \u2014 gate server-side too with parseConsentCookie()."
+    ],
+    learn: "https://developer.lacspace.com/packages/consent"
+  },
+  {
+    key: "realtime",
+    label: "Real-time (SSE)",
+    description: "Live server-to-browser updates over Server-Sent Events (@lacspace/sse) \u2014 a channel hub + a /live stream + a React useSSE feed. No WebSocket server. Full-stack.",
+    requiresBackend: true,
+    deps: { "@lacspace/sse": "^1.0.0" },
+    files: () => ({ "app/live/page.tsx": realtimeLivePage() }),
+    backend: () => ({
+      deps: { "@lacspace/sse": "^1.0.0" },
+      files: { "src/routes/live.ts": realtimeRoutesBackend() },
+      routes: [{ path: "/live", handler: "liveRoutes", auth: false, importLine: 'import liveRoutes from "./live.js";' }]
+    }),
+    nextSteps: [
+      "Open http://localhost:3000/live in two tabs; click 'Broadcast' in one \u2014 the other updates instantly.",
+      "Push from anywhere on the server: hub.broadcast({ event: 'message', data }) in src/routes/live.ts.",
+      "SSE auto-reconnects and needs no WebSocket server \u2014 great for notifications and live feeds."
+    ],
+    learn: "https://developer.lacspace.com/packages/sse"
   }
 ];
 var aiChatRoute = (_ctx) => `import { resolveConfig } from "@lacspace/providers";
@@ -6611,6 +6703,320 @@ export default function UploadsPage() {
   );
 }
 `;
+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 consentComponent = () => `"use client";
+// how this works: re-export the consent UI + API from one component. Render
+// <ConsentBanner/> once in app/layout.tsx; gate scripts with whenConsent().
+export { ConsentBanner, useConsent } from "@lacspace/consent/react";
+export { consent, whenConsent } from "@lacspace/consent";
+`;
+var realtimeLivePage = () => `"use client";
+import { useState } from "react";
+import { useSSE } from "@lacspace/sse/react";
+
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+export default function LivePage() {
+  const [log, setLog] = useState<string[]>([]);
+  const { status } = useSSE(API + "/live", {
+    onEvent: { message: (m) => setLog((prev) => [String((m as { text?: string }).text ?? ""), ...prev].slice(0, 50)) },
+  });
+
+  async function broadcast() {
+    await fetch(API + "/live/broadcast", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: "Hello at " + new Date().toLocaleTimeString() }),
+    });
+  }
+
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Live feed</h1>
+      <p className="mt-1 text-muted">Server-Sent Events \u2014 status: {status}.</p>
+      <button className="mt-4 rounded-xl border border-hairline px-4 py-2" onClick={broadcast}>Broadcast a message</button>
+      <ul className="mt-6 space-y-2">
+        {log.map((line, i) => (<li key={i} className="rounded-xl border border-hairline p-3">{line}</li>))}
+      </ul>
+    </main>
+  );
+}
+`;
+var realtimeRoutesBackend = () => `import express from "express";
+import { SSEHub, sseHandler } from "@lacspace/sse";
+import { asyncHandler } from "../http.js";
+
+// how this works: one shared hub holds every open SSE connection. GET /live opens
+// a stream; POST /live/broadcast pushes a "message" event to everyone connected.
+// Push from anywhere in your app by importing this hub and calling hub.broadcast().
+const router = express.Router();
+const hub = new SSEHub();
+hub.startHeartbeat();
+
+router.get("/", (_req, res) => {
+  const client = sseHandler(res, { onClose: () => hub.remove(client) });
+  hub.add(client);
+  client.send({ event: "message", data: { text: "Connected to the live feed." } });
+});
+
+router.post("/broadcast", asyncHandler(async (req, res) => {
+  const text = typeof req.body?.text === "string" ? req.body.text : "ping";
+  const sent = hub.broadcast({ event: "message", data: { text } });
+  res.json({ sent });
+}));
+
+export default router;
+`;
 var scope = (ctx) => `@${ctx.name}`;
 var typesPkgJson = (ctx) => JSON.stringify({
   name: `${scope(ctx)}/types`,

package/dist/lib.cjs

@@ -2346,6 +2346,98 @@ var FEATURES = [
       "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"
+  },
+  {
+    key: "consent",
+    label: "Cookie consent",
+    description: "GDPR-friendly cookie consent (@lacspace/consent) \u2014 a drop-in <ConsentBanner/>, per-category choices, cookie persistence and whenConsent() script-gating. Frontend, any template.",
+    deps: { "@lacspace/consent": "^1.0.0" },
+    files: () => ({ "components/consent.tsx": consentComponent() }),
+    nextSteps: [
+      "Render <ConsentBanner/> once in app/layout.tsx: import { ConsentBanner } from '@/components/consent'.",
+      "Gate analytics/marketing scripts: whenConsent(consent, 'analytics', () => { /* load tag */ }).",
+      "The choice is stored in a cookie \u2014 gate server-side too with parseConsentCookie()."
+    ],
+    learn: "https://developer.lacspace.com/packages/consent"
+  },
+  {
+    key: "realtime",
+    label: "Real-time (SSE)",
+    description: "Live server-to-browser updates over Server-Sent Events (@lacspace/sse) \u2014 a channel hub + a /live stream + a React useSSE feed. No WebSocket server. Full-stack.",
+    requiresBackend: true,
+    deps: { "@lacspace/sse": "^1.0.0" },
+    files: () => ({ "app/live/page.tsx": realtimeLivePage() }),
+    backend: () => ({
+      deps: { "@lacspace/sse": "^1.0.0" },
+      files: { "src/routes/live.ts": realtimeRoutesBackend() },
+      routes: [{ path: "/live", handler: "liveRoutes", auth: false, importLine: 'import liveRoutes from "./live.js";' }]
+    }),
+    nextSteps: [
+      "Open http://localhost:3000/live in two tabs; click 'Broadcast' in one \u2014 the other updates instantly.",
+      "Push from anywhere on the server: hub.broadcast({ event: 'message', data }) in src/routes/live.ts.",
+      "SSE auto-reconnects and needs no WebSocket server \u2014 great for notifications and live feeds."
+    ],
+    learn: "https://developer.lacspace.com/packages/sse"
   }
 ];
 var aiChatRoute = (_ctx) => `import { resolveConfig } from "@lacspace/providers";
@@ -6615,6 +6707,320 @@ export default function UploadsPage() {
   );
 }
 `;
+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 consentComponent = () => `"use client";
+// how this works: re-export the consent UI + API from one component. Render
+// <ConsentBanner/> once in app/layout.tsx; gate scripts with whenConsent().
+export { ConsentBanner, useConsent } from "@lacspace/consent/react";
+export { consent, whenConsent } from "@lacspace/consent";
+`;
+var realtimeLivePage = () => `"use client";
+import { useState } from "react";
+import { useSSE } from "@lacspace/sse/react";
+
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+export default function LivePage() {
+  const [log, setLog] = useState<string[]>([]);
+  const { status } = useSSE(API + "/live", {
+    onEvent: { message: (m) => setLog((prev) => [String((m as { text?: string }).text ?? ""), ...prev].slice(0, 50)) },
+  });
+
+  async function broadcast() {
+    await fetch(API + "/live/broadcast", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: "Hello at " + new Date().toLocaleTimeString() }),
+    });
+  }
+
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Live feed</h1>
+      <p className="mt-1 text-muted">Server-Sent Events \u2014 status: {status}.</p>
+      <button className="mt-4 rounded-xl border border-hairline px-4 py-2" onClick={broadcast}>Broadcast a message</button>
+      <ul className="mt-6 space-y-2">
+        {log.map((line, i) => (<li key={i} className="rounded-xl border border-hairline p-3">{line}</li>))}
+      </ul>
+    </main>
+  );
+}
+`;
+var realtimeRoutesBackend = () => `import express from "express";
+import { SSEHub, sseHandler } from "@lacspace/sse";
+import { asyncHandler } from "../http.js";
+
+// how this works: one shared hub holds every open SSE connection. GET /live opens
+// a stream; POST /live/broadcast pushes a "message" event to everyone connected.
+// Push from anywhere in your app by importing this hub and calling hub.broadcast().
+const router = express.Router();
+const hub = new SSEHub();
+hub.startHeartbeat();
+
+router.get("/", (_req, res) => {
+  const client = sseHandler(res, { onClose: () => hub.remove(client) });
+  hub.add(client);
+  client.send({ event: "message", data: { text: "Connected to the live feed." } });
+});
+
+router.post("/broadcast", asyncHandler(async (req, res) => {
+  const text = typeof req.body?.text === "string" ? req.body.text : "ping";
+  const sent = hub.broadcast({ event: "message", data: { text } });
+  res.json({ sent });
+}));
+
+export default router;
+`;
 var scope = (ctx) => `@${ctx.name}`;
 var typesPkgJson = (ctx) => JSON.stringify({
   name: `${scope(ctx)}/types`,

package/dist/lib.js

@@ -2343,6 +2343,98 @@ var FEATURES = [
       "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"
+  },
+  {
+    key: "consent",
+    label: "Cookie consent",
+    description: "GDPR-friendly cookie consent (@lacspace/consent) \u2014 a drop-in <ConsentBanner/>, per-category choices, cookie persistence and whenConsent() script-gating. Frontend, any template.",
+    deps: { "@lacspace/consent": "^1.0.0" },
+    files: () => ({ "components/consent.tsx": consentComponent() }),
+    nextSteps: [
+      "Render <ConsentBanner/> once in app/layout.tsx: import { ConsentBanner } from '@/components/consent'.",
+      "Gate analytics/marketing scripts: whenConsent(consent, 'analytics', () => { /* load tag */ }).",
+      "The choice is stored in a cookie \u2014 gate server-side too with parseConsentCookie()."
+    ],
+    learn: "https://developer.lacspace.com/packages/consent"
+  },
+  {
+    key: "realtime",
+    label: "Real-time (SSE)",
+    description: "Live server-to-browser updates over Server-Sent Events (@lacspace/sse) \u2014 a channel hub + a /live stream + a React useSSE feed. No WebSocket server. Full-stack.",
+    requiresBackend: true,
+    deps: { "@lacspace/sse": "^1.0.0" },
+    files: () => ({ "app/live/page.tsx": realtimeLivePage() }),
+    backend: () => ({
+      deps: { "@lacspace/sse": "^1.0.0" },
+      files: { "src/routes/live.ts": realtimeRoutesBackend() },
+      routes: [{ path: "/live", handler: "liveRoutes", auth: false, importLine: 'import liveRoutes from "./live.js";' }]
+    }),
+    nextSteps: [
+      "Open http://localhost:3000/live in two tabs; click 'Broadcast' in one \u2014 the other updates instantly.",
+      "Push from anywhere on the server: hub.broadcast({ event: 'message', data }) in src/routes/live.ts.",
+      "SSE auto-reconnects and needs no WebSocket server \u2014 great for notifications and live feeds."
+    ],
+    learn: "https://developer.lacspace.com/packages/sse"
   }
 ];
 var aiChatRoute = (_ctx) => `import { resolveConfig } from "@lacspace/providers";
@@ -6612,6 +6704,320 @@ export default function UploadsPage() {
   );
 }
 `;
+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 consentComponent = () => `"use client";
+// how this works: re-export the consent UI + API from one component. Render
+// <ConsentBanner/> once in app/layout.tsx; gate scripts with whenConsent().
+export { ConsentBanner, useConsent } from "@lacspace/consent/react";
+export { consent, whenConsent } from "@lacspace/consent";
+`;
+var realtimeLivePage = () => `"use client";
+import { useState } from "react";
+import { useSSE } from "@lacspace/sse/react";
+
+const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+export default function LivePage() {
+  const [log, setLog] = useState<string[]>([]);
+  const { status } = useSSE(API + "/live", {
+    onEvent: { message: (m) => setLog((prev) => [String((m as { text?: string }).text ?? ""), ...prev].slice(0, 50)) },
+  });
+
+  async function broadcast() {
+    await fetch(API + "/live/broadcast", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: "Hello at " + new Date().toLocaleTimeString() }),
+    });
+  }
+
+  return (
+    <main className="mx-auto max-w-lg px-6 py-16">
+      <h1 className="text-2xl font-bold">Live feed</h1>
+      <p className="mt-1 text-muted">Server-Sent Events \u2014 status: {status}.</p>
+      <button className="mt-4 rounded-xl border border-hairline px-4 py-2" onClick={broadcast}>Broadcast a message</button>
+      <ul className="mt-6 space-y-2">
+        {log.map((line, i) => (<li key={i} className="rounded-xl border border-hairline p-3">{line}</li>))}
+      </ul>
+    </main>
+  );
+}
+`;
+var realtimeRoutesBackend = () => `import express from "express";
+import { SSEHub, sseHandler } from "@lacspace/sse";
+import { asyncHandler } from "../http.js";
+
+// how this works: one shared hub holds every open SSE connection. GET /live opens
+// a stream; POST /live/broadcast pushes a "message" event to everyone connected.
+// Push from anywhere in your app by importing this hub and calling hub.broadcast().
+const router = express.Router();
+const hub = new SSEHub();
+hub.startHeartbeat();
+
+router.get("/", (_req, res) => {
+  const client = sseHandler(res, { onClose: () => hub.remove(client) });
+  hub.add(client);
+  client.send({ event: "message", data: { text: "Connected to the live feed." } });
+});
+
+router.post("/broadcast", asyncHandler(async (req, res) => {
+  const text = typeof req.body?.text === "string" ? req.body.text : "ping";
+  const sent = hub.broadcast({ event: "message", data: { text } });
+  res.json({ sent });
+}));
+
+export default router;
+`;
 var scope = (ctx) => `@${ctx.name}`;
 var typesPkgJson = (ctx) => JSON.stringify({
   name: `${scope(ctx)}/types`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lacspace-app",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Scaffold a beautiful, production-ready Next.js app from a Lacspace template — portfolio, business, e-commerce, SaaS, blog, docs, dashboard, restaurant or marketplace — pre-wired with SEO, security headers, sitemap and robots. Use it as a CLI (like create-next-app, but you start gorgeous) or import it as a library to generate projects programmatically.",
   "type": "module",
   "bin": {