create-lacspace-app 2.11.0 → 2.12.0

package/README.md

@@ -20,6 +20,10 @@ 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.

package/dist/index.js

@@ -2402,6 +2402,38 @@ var FEATURES = [
       "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";
@@ -6920,6 +6952,69 @@ router.post("/send", asyncHandler(async (req, res) => {
   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}`;

package/dist/lib.cjs

@@ -2406,6 +2406,38 @@ var FEATURES = [
       "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";
@@ -6924,6 +6956,69 @@ router.post("/send", asyncHandler(async (req, res) => {
   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}`;

package/dist/lib.js

@@ -2403,6 +2403,38 @@ var FEATURES = [
       "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";
@@ -6921,6 +6953,69 @@ router.post("/send", asyncHandler(async (req, res) => {
   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}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lacspace-app",
-  "version": "2.11.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": {