create-lacspace-app 2.14.0 → 2.14.1

package/README.md

@@ -20,6 +20,12 @@ 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.
 
+> **Fixed in v2.14.1 — login, and a hardened API.**
+> - **Email is normalised before it is queried.** Mongoose applies `lowercase`/`trim` when it *saves*, but not to query filters — so an account registered as `Bro@Gmail.com` was stored as `bro@gmail.com` and then could not be found at login. Full-stack projects generated before this should apply the one-line change in `backend/src/validation.ts`.
+> - **The API now sends the same class of security headers as the frontend** (`@lacspace/headers`: CSP, `X-Frame-Options: DENY`, `no-referrer`, nosniff, CORP), stops advertising `X-Powered-By: Express`, and caps JSON bodies at 256kb.
+> - **`npm run typecheck` covers both workspaces.** It only ran the backend, so it reported green over an unchecked frontend.
+> - **Every template ships a skip-to-content link** (WCAG 2.4.1) — hidden until focused, and focus really moves rather than only scrolling.
+
 > **New in v2.14 — the UI kit (18 add-ons).** The scaffold now comes with a real component layer, not just a page:
 > - **`ui`** — the **96-component `@lacspace/components` library** wired into your template: a working settings page (form validation, a confirm dialog that waits for its promise, toasts), a `<UIProvider>` for app-wide use, and a **theme bridge** that maps your template's accent, radius and font onto the kit's `--lac-*` variables — so the components match your brand and follow your existing dark-mode toggle out of the box. Frontend, any template.
 > - **`dataviz`** — a working `/insights` page from **`@lacspace/charts` + `@lacspace/table` + `@lacspace/date`**: stat cards, an SVG line chart, a date-range filter and a sortable, searchable, CSV-exportable table. No canvas, no D3, no grid licence. Frontend, any template.

package/dist/index.js

@@ -61,7 +61,8 @@ var pkgJson = (ctx) => JSON.stringify({
   name: ctx.name,
   version: "0.1.0",
   private: true,
-  scripts: { dev: "next dev", build: "next build", start: "next start", lint: "next lint" },
+  // `typecheck` so the full-stack root script can run it across both workspaces.
+  scripts: { dev: "next dev", build: "next build", start: "next start", lint: "next lint", typecheck: "tsc --noEmit" },
   dependencies: {
     next: "^15.1.0",
     react: "^19.0.0",
@@ -239,6 +240,27 @@ h1, .display { letter-spacing: -0.035em; line-height: 1.02; }
 ::-webkit-scrollbar-thumb:hover { background: var(--hairline); }
 :focus-visible { outline: 2px solid var(--accent-to); outline-offset: 2px; border-radius: 6px; }
 
+/* Skip link: off-screen until it is focused, then the first thing you see.
+   The wrapper it targets carries tabIndex={-1}, so focus actually moves there
+   instead of the browser only scrolling. */
+.skip-link {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  z-index: 100;
+  padding: 10px 16px;
+  border-radius: 10px;
+  background: var(--accent-to);
+  color: var(--on-accent);
+  font-weight: 600;
+  text-decoration: none;
+  transform: translateY(-160%);
+  transition: transform 0.18s ease;
+}
+.skip-link:focus { transform: translateY(0); }
+@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
+#main:focus { outline: none; }
+
 .gradient-text {
   background: linear-gradient(115deg, var(--accent-from), var(--accent-to));
   -webkit-background-clip: text; background-clip: text; color: transparent;
@@ -403,11 +425,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" className={\`\${inter.variable} \${inter.className}\`} suppressHydrationWarning>
       <body className="antialiased">
+        {/* Keyboard users land here first and can jump past the nav (WCAG 2.4.1). */}
+        <a href="#main" className="skip-link">Skip to content</a>
         {/* \u2728 Dark / light / system theming with a built-in no-flash script \u2014 @lacspace/theme */}
         <ThemeProvider defaultTheme="dark">
           {/* \u2728 Press \u2318K / Ctrl-K anywhere \u2014 powered by @lacspace/ui */}
           <CommandMenu />
-          ${open}{children}${close}
+          ${open}<div id="main" tabIndex={-1}>{children}</div>${close}
         </ThemeProvider>
         <script
           type="application/ld+json"
@@ -7440,7 +7464,9 @@ var rootPkgJson = (ctx) => JSON.stringify({
     start: 'concurrently -k -n api,web -c blue,magenta "npm:start:api" "npm:start:web"',
     "start:api": `npm run start --workspace ${scope(ctx)}/backend`,
     "start:web": `npm run start --workspace ${scope(ctx)}/frontend`,
-    typecheck: `npm run typecheck --workspace ${scope(ctx)}/backend`
+    // Both workspaces: a gate that silently skips the frontend is worse than
+    // no gate, because it reports green over unchecked code.
+    typecheck: `npm run typecheck --workspace ${scope(ctx)}/backend && npm run typecheck --workspace ${scope(ctx)}/frontend`
   },
   devDependencies: { concurrently: "^9.1.0" },
   engines: { node: ">=18" }
@@ -7825,6 +7851,7 @@ var backendPkgJson = (ctx) => {
       "@lacspace/rate-limit": "^1.2.0",
       "@lacspace/cache": "^1.1.0",
       "@lacspace/logger": "^1.0.0",
+      "@lacspace/headers": "^1.1.2",
       ...featureDeps,
       [`${scope(ctx)}/types`]: "*"
     },
@@ -8153,14 +8180,18 @@ var backendValidation = () => `import { v, type Infer } from "@lacspace/validate
 // how this works: Zod-like schemas (@lacspace/validate). .parse(body) throws a
 // ValidationError on bad input, which the error middleware turns into a clean 400
 // with per-field messages.
+// Email is normalised HERE, not only in the schema. Mongoose applies
+// \`lowercase\`/\`trim\` setters when it SAVES a document, but not to query
+// filters \u2014 so \`User.findOne({ email })\` with "Bro@Gmail.com" would miss the
+// stored "bro@gmail.com", and the account would be unreachable at login.
 export const RegisterInput = v.object({
   name: v.string().min(2).max(80),
-  email: v.string().email(),
+  email: v.string().email().trim().toLowerCase(),
   password: v.string().min(8).max(200),
 });
 
 export const LoginInput = v.object({
-  email: v.string().email(),
+  email: v.string().email().trim().toLowerCase(),
   password: v.string().min(1),
 });
 
@@ -8296,19 +8327,35 @@ export default router;
 `;
 var backendApp = (ctx) => `import express from "express";
 import cors from "cors";
+import { expressSecurityHeaders } from "@lacspace/headers";
 import { env } from "./env.js";
 import { requestLogger } from "./logger.js";
 import { errorHandler } from "./middleware/error.js";
 import { registerRoutes } from "./routes/index.js";
 
-// how this works: assembles the Express app \u2014 CORS for the frontend, JSON parsing,
-// structured request logging (@lacspace/logger), a health check, all route groups
-// (see routes/index.ts), then the error handler LAST.
+// how this works: assembles the Express app \u2014 security headers, CORS for the
+// frontend, JSON parsing, structured request logging (@lacspace/logger), a health
+// check, all route groups (see routes/index.ts), then the error handler LAST.
 export function createApp(): express.Express {
   const app = express();
 
+  // Express advertises itself in every response by default; there is no reason
+  // to tell the internet what the API is built on.
+  app.disable("x-powered-by");
+
+  // The same hardening the frontend gets, tuned for an API: deny framing, send
+  // no referrer, and a CSP that allows nothing \u2014 an API returns JSON, so there
+  // is no script, style or image for a browser to load from it.
+  app.use(expressSecurityHeaders({
+    frameOptions: "DENY",
+    referrerPolicy: "no-referrer",
+    crossOriginResourcePolicy: "same-site",
+    contentSecurityPolicy: { defaultSrc: ["'none'"], frameAncestors: ["'none'"] },
+  }));
+
   app.use(cors({ origin: env.CORS_ORIGIN.split(",").map((o) => o.trim()), credentials: true }));
-  app.use(express.json());
+  // A JSON API has no business accepting a megabyte of body by default.
+  app.use(express.json({ limit: "256kb" }));
   app.use(requestLogger); // one structured log line per request
 
   app.get("/health", (_req, res) => { res.json({ ok: true, service: "${ctx.name}-api" }); });

package/dist/lib.cjs

@@ -65,7 +65,8 @@ var pkgJson = (ctx) => JSON.stringify({
   name: ctx.name,
   version: "0.1.0",
   private: true,
-  scripts: { dev: "next dev", build: "next build", start: "next start", lint: "next lint" },
+  // `typecheck` so the full-stack root script can run it across both workspaces.
+  scripts: { dev: "next dev", build: "next build", start: "next start", lint: "next lint", typecheck: "tsc --noEmit" },
   dependencies: {
     next: "^15.1.0",
     react: "^19.0.0",
@@ -243,6 +244,27 @@ h1, .display { letter-spacing: -0.035em; line-height: 1.02; }
 ::-webkit-scrollbar-thumb:hover { background: var(--hairline); }
 :focus-visible { outline: 2px solid var(--accent-to); outline-offset: 2px; border-radius: 6px; }
 
+/* Skip link: off-screen until it is focused, then the first thing you see.
+   The wrapper it targets carries tabIndex={-1}, so focus actually moves there
+   instead of the browser only scrolling. */
+.skip-link {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  z-index: 100;
+  padding: 10px 16px;
+  border-radius: 10px;
+  background: var(--accent-to);
+  color: var(--on-accent);
+  font-weight: 600;
+  text-decoration: none;
+  transform: translateY(-160%);
+  transition: transform 0.18s ease;
+}
+.skip-link:focus { transform: translateY(0); }
+@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
+#main:focus { outline: none; }
+
 .gradient-text {
   background: linear-gradient(115deg, var(--accent-from), var(--accent-to));
   -webkit-background-clip: text; background-clip: text; color: transparent;
@@ -407,11 +429,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" className={\`\${inter.variable} \${inter.className}\`} suppressHydrationWarning>
       <body className="antialiased">
+        {/* Keyboard users land here first and can jump past the nav (WCAG 2.4.1). */}
+        <a href="#main" className="skip-link">Skip to content</a>
         {/* \u2728 Dark / light / system theming with a built-in no-flash script \u2014 @lacspace/theme */}
         <ThemeProvider defaultTheme="dark">
           {/* \u2728 Press \u2318K / Ctrl-K anywhere \u2014 powered by @lacspace/ui */}
           <CommandMenu />
-          ${open}{children}${close}
+          ${open}<div id="main" tabIndex={-1}>{children}</div>${close}
         </ThemeProvider>
         <script
           type="application/ld+json"
@@ -7444,7 +7468,9 @@ var rootPkgJson = (ctx) => JSON.stringify({
     start: 'concurrently -k -n api,web -c blue,magenta "npm:start:api" "npm:start:web"',
     "start:api": `npm run start --workspace ${scope(ctx)}/backend`,
     "start:web": `npm run start --workspace ${scope(ctx)}/frontend`,
-    typecheck: `npm run typecheck --workspace ${scope(ctx)}/backend`
+    // Both workspaces: a gate that silently skips the frontend is worse than
+    // no gate, because it reports green over unchecked code.
+    typecheck: `npm run typecheck --workspace ${scope(ctx)}/backend && npm run typecheck --workspace ${scope(ctx)}/frontend`
   },
   devDependencies: { concurrently: "^9.1.0" },
   engines: { node: ">=18" }
@@ -7829,6 +7855,7 @@ var backendPkgJson = (ctx) => {
       "@lacspace/rate-limit": "^1.2.0",
       "@lacspace/cache": "^1.1.0",
       "@lacspace/logger": "^1.0.0",
+      "@lacspace/headers": "^1.1.2",
       ...featureDeps,
       [`${scope(ctx)}/types`]: "*"
     },
@@ -8157,14 +8184,18 @@ var backendValidation = () => `import { v, type Infer } from "@lacspace/validate
 // how this works: Zod-like schemas (@lacspace/validate). .parse(body) throws a
 // ValidationError on bad input, which the error middleware turns into a clean 400
 // with per-field messages.
+// Email is normalised HERE, not only in the schema. Mongoose applies
+// \`lowercase\`/\`trim\` setters when it SAVES a document, but not to query
+// filters \u2014 so \`User.findOne({ email })\` with "Bro@Gmail.com" would miss the
+// stored "bro@gmail.com", and the account would be unreachable at login.
 export const RegisterInput = v.object({
   name: v.string().min(2).max(80),
-  email: v.string().email(),
+  email: v.string().email().trim().toLowerCase(),
   password: v.string().min(8).max(200),
 });
 
 export const LoginInput = v.object({
-  email: v.string().email(),
+  email: v.string().email().trim().toLowerCase(),
   password: v.string().min(1),
 });
 
@@ -8300,19 +8331,35 @@ export default router;
 `;
 var backendApp = (ctx) => `import express from "express";
 import cors from "cors";
+import { expressSecurityHeaders } from "@lacspace/headers";
 import { env } from "./env.js";
 import { requestLogger } from "./logger.js";
 import { errorHandler } from "./middleware/error.js";
 import { registerRoutes } from "./routes/index.js";
 
-// how this works: assembles the Express app \u2014 CORS for the frontend, JSON parsing,
-// structured request logging (@lacspace/logger), a health check, all route groups
-// (see routes/index.ts), then the error handler LAST.
+// how this works: assembles the Express app \u2014 security headers, CORS for the
+// frontend, JSON parsing, structured request logging (@lacspace/logger), a health
+// check, all route groups (see routes/index.ts), then the error handler LAST.
 export function createApp(): express.Express {
   const app = express();
 
+  // Express advertises itself in every response by default; there is no reason
+  // to tell the internet what the API is built on.
+  app.disable("x-powered-by");
+
+  // The same hardening the frontend gets, tuned for an API: deny framing, send
+  // no referrer, and a CSP that allows nothing \u2014 an API returns JSON, so there
+  // is no script, style or image for a browser to load from it.
+  app.use(expressSecurityHeaders({
+    frameOptions: "DENY",
+    referrerPolicy: "no-referrer",
+    crossOriginResourcePolicy: "same-site",
+    contentSecurityPolicy: { defaultSrc: ["'none'"], frameAncestors: ["'none'"] },
+  }));
+
   app.use(cors({ origin: env.CORS_ORIGIN.split(",").map((o) => o.trim()), credentials: true }));
-  app.use(express.json());
+  // A JSON API has no business accepting a megabyte of body by default.
+  app.use(express.json({ limit: "256kb" }));
   app.use(requestLogger); // one structured log line per request
 
   app.get("/health", (_req, res) => { res.json({ ok: true, service: "${ctx.name}-api" }); });

package/dist/lib.js

@@ -62,7 +62,8 @@ var pkgJson = (ctx) => JSON.stringify({
   name: ctx.name,
   version: "0.1.0",
   private: true,
-  scripts: { dev: "next dev", build: "next build", start: "next start", lint: "next lint" },
+  // `typecheck` so the full-stack root script can run it across both workspaces.
+  scripts: { dev: "next dev", build: "next build", start: "next start", lint: "next lint", typecheck: "tsc --noEmit" },
   dependencies: {
     next: "^15.1.0",
     react: "^19.0.0",
@@ -240,6 +241,27 @@ h1, .display { letter-spacing: -0.035em; line-height: 1.02; }
 ::-webkit-scrollbar-thumb:hover { background: var(--hairline); }
 :focus-visible { outline: 2px solid var(--accent-to); outline-offset: 2px; border-radius: 6px; }
 
+/* Skip link: off-screen until it is focused, then the first thing you see.
+   The wrapper it targets carries tabIndex={-1}, so focus actually moves there
+   instead of the browser only scrolling. */
+.skip-link {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  z-index: 100;
+  padding: 10px 16px;
+  border-radius: 10px;
+  background: var(--accent-to);
+  color: var(--on-accent);
+  font-weight: 600;
+  text-decoration: none;
+  transform: translateY(-160%);
+  transition: transform 0.18s ease;
+}
+.skip-link:focus { transform: translateY(0); }
+@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
+#main:focus { outline: none; }
+
 .gradient-text {
   background: linear-gradient(115deg, var(--accent-from), var(--accent-to));
   -webkit-background-clip: text; background-clip: text; color: transparent;
@@ -404,11 +426,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" className={\`\${inter.variable} \${inter.className}\`} suppressHydrationWarning>
       <body className="antialiased">
+        {/* Keyboard users land here first and can jump past the nav (WCAG 2.4.1). */}
+        <a href="#main" className="skip-link">Skip to content</a>
         {/* \u2728 Dark / light / system theming with a built-in no-flash script \u2014 @lacspace/theme */}
         <ThemeProvider defaultTheme="dark">
           {/* \u2728 Press \u2318K / Ctrl-K anywhere \u2014 powered by @lacspace/ui */}
           <CommandMenu />
-          ${open}{children}${close}
+          ${open}<div id="main" tabIndex={-1}>{children}</div>${close}
         </ThemeProvider>
         <script
           type="application/ld+json"
@@ -7441,7 +7465,9 @@ var rootPkgJson = (ctx) => JSON.stringify({
     start: 'concurrently -k -n api,web -c blue,magenta "npm:start:api" "npm:start:web"',
     "start:api": `npm run start --workspace ${scope(ctx)}/backend`,
     "start:web": `npm run start --workspace ${scope(ctx)}/frontend`,
-    typecheck: `npm run typecheck --workspace ${scope(ctx)}/backend`
+    // Both workspaces: a gate that silently skips the frontend is worse than
+    // no gate, because it reports green over unchecked code.
+    typecheck: `npm run typecheck --workspace ${scope(ctx)}/backend && npm run typecheck --workspace ${scope(ctx)}/frontend`
   },
   devDependencies: { concurrently: "^9.1.0" },
   engines: { node: ">=18" }
@@ -7826,6 +7852,7 @@ var backendPkgJson = (ctx) => {
       "@lacspace/rate-limit": "^1.2.0",
       "@lacspace/cache": "^1.1.0",
       "@lacspace/logger": "^1.0.0",
+      "@lacspace/headers": "^1.1.2",
       ...featureDeps,
       [`${scope(ctx)}/types`]: "*"
     },
@@ -8154,14 +8181,18 @@ var backendValidation = () => `import { v, type Infer } from "@lacspace/validate
 // how this works: Zod-like schemas (@lacspace/validate). .parse(body) throws a
 // ValidationError on bad input, which the error middleware turns into a clean 400
 // with per-field messages.
+// Email is normalised HERE, not only in the schema. Mongoose applies
+// \`lowercase\`/\`trim\` setters when it SAVES a document, but not to query
+// filters \u2014 so \`User.findOne({ email })\` with "Bro@Gmail.com" would miss the
+// stored "bro@gmail.com", and the account would be unreachable at login.
 export const RegisterInput = v.object({
   name: v.string().min(2).max(80),
-  email: v.string().email(),
+  email: v.string().email().trim().toLowerCase(),
   password: v.string().min(8).max(200),
 });
 
 export const LoginInput = v.object({
-  email: v.string().email(),
+  email: v.string().email().trim().toLowerCase(),
   password: v.string().min(1),
 });
 
@@ -8297,19 +8328,35 @@ export default router;
 `;
 var backendApp = (ctx) => `import express from "express";
 import cors from "cors";
+import { expressSecurityHeaders } from "@lacspace/headers";
 import { env } from "./env.js";
 import { requestLogger } from "./logger.js";
 import { errorHandler } from "./middleware/error.js";
 import { registerRoutes } from "./routes/index.js";
 
-// how this works: assembles the Express app \u2014 CORS for the frontend, JSON parsing,
-// structured request logging (@lacspace/logger), a health check, all route groups
-// (see routes/index.ts), then the error handler LAST.
+// how this works: assembles the Express app \u2014 security headers, CORS for the
+// frontend, JSON parsing, structured request logging (@lacspace/logger), a health
+// check, all route groups (see routes/index.ts), then the error handler LAST.
 export function createApp(): express.Express {
   const app = express();
 
+  // Express advertises itself in every response by default; there is no reason
+  // to tell the internet what the API is built on.
+  app.disable("x-powered-by");
+
+  // The same hardening the frontend gets, tuned for an API: deny framing, send
+  // no referrer, and a CSP that allows nothing \u2014 an API returns JSON, so there
+  // is no script, style or image for a browser to load from it.
+  app.use(expressSecurityHeaders({
+    frameOptions: "DENY",
+    referrerPolicy: "no-referrer",
+    crossOriginResourcePolicy: "same-site",
+    contentSecurityPolicy: { defaultSrc: ["'none'"], frameAncestors: ["'none'"] },
+  }));
+
   app.use(cors({ origin: env.CORS_ORIGIN.split(",").map((o) => o.trim()), credentials: true }));
-  app.use(express.json());
+  // A JSON API has no business accepting a megabyte of body by default.
+  app.use(express.json({ limit: "256kb" }));
   app.use(requestLogger); // one structured log line per request
 
   app.get("/health", (_req, res) => { res.json({ ok: true, service: "${ctx.name}-api" }); });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-lacspace-app",
-  "version": "2.14.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.",
+  "version": "2.14.1",
+  "description": "Scaffold a beautiful, production-ready Next.js app from a Lacspace template \u2014 portfolio, business, e-commerce, SaaS, blog, docs, dashboard, restaurant or marketplace \u2014 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": {
     "create-lacspace-app": "dist/index.js"