create-lacspace-app 1.6.0 → 1.8.0

package/dist/index.js

@@ -43,6 +43,12 @@ var pkgJson = (ctx) => JSON.stringify({
     "@lacspace/ui": "^1.0.0",
     "@lacspace/form": "^1.0.0",
     "@lacspace/validate": "^1.0.0",
+    // React Kit: dark/light theming (no-flash) + essential hooks + global
+    // state (announcement bar, mobile nav) + data fetching (live stats).
+    "@lacspace/theme": "^1.0.1",
+    "@lacspace/hooks": "^1.0.0",
+    "@lacspace/store": "^1.0.0",
+    "@lacspace/query": "^1.0.0",
     // The blog & docs templates render Markdown with @lacspace/markdown.
     ...ctx.template.key === "blog" || ctx.template.key === "docs" ? { "@lacspace/markdown": "^1.0.0" } : {}
   },
@@ -103,25 +109,57 @@ out
 `;
 var globalsCss = (ctx) => `@import "tailwindcss";
 
+/* Class-based dark mode \u2014 toggled by @lacspace/theme's <ThemeProvider>. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Semantic color tokens \u2192 Tailwind utilities (text-fg, text-muted, bg-surface,
+   border-hairline, \u2026). They resolve to the CSS vars below, which swap per theme. */
+@theme inline {
+  --color-fg: var(--fg);
+  --color-muted: var(--muted);
+  --color-faint: var(--faint);
+  --color-surface: var(--surface);
+  --color-panel: var(--panel);
+  --color-hairline: var(--hairline);
+}
+
 :root {
   --accent-from: ${ctx.template.accent[0]};
   --accent-to: ${ctx.template.accent[1]};
+  /* Light theme */
+  --bg: #ffffff;
+  --fg: #0a0a0f;
+  --muted: #3f3f46;
+  --faint: #71717a;
+  --surface: rgb(0 0 0 / 0.03);
+  --panel: rgb(0 0 0 / 0.06);
+  --hairline: rgb(0 0 0 / 0.10);
+}
+
+.dark {
+  /* Dark theme (default) */
   --bg: #0a0a0f;
-  --fg: #e5e7eb;
+  --fg: #f5f5f7;
+  --muted: rgb(255 255 255 / 0.62);
+  --faint: rgb(255 255 255 / 0.42);
+  --surface: rgb(255 255 255 / 0.04);
+  --panel: rgb(255 255 255 / 0.08);
+  --hairline: rgb(255 255 255 / 0.10);
 }
 
-* { border-color: rgb(255 255 255 / 0.08); }
+* { border-color: var(--hairline); }
 html { scroll-behavior: smooth; }
 body {
   background: var(--bg);
   color: var(--fg);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-::selection { background: var(--accent-to); color: #0a0a0f; }
+::selection { background: var(--accent-to); color: #fff; }
 ::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.12); border-radius: 8px; }
+::-webkit-scrollbar-thumb { background: var(--panel); border-radius: 8px; }
 :focus-visible { outline: 2px solid var(--accent-to); outline-offset: 2px; border-radius: 4px; }
 
 .gradient-text {
@@ -130,6 +168,12 @@ body {
 }
 .gradient-bg { background: linear-gradient(120deg, var(--accent-from), var(--accent-to)); }
 
+/* opaque theme background (for sticky chrome & chips) */
+.bg-app { background: var(--bg); }
+
+/* indeterminate progress bar (used by the "under development" pages) */
+@keyframes loadbar { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }
+
 /* soft entrance for content */
 @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
 main > section, main > * { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@@ -166,11 +210,23 @@ export const site = defineSite({
   ogImage: "/og", // \u2728 auto social-share images \u2014 see app/og/route.tsx
 });
 `;
-var layout = (ctx) => `import type { Metadata } from "next";
+var layout = (ctx) => {
+  const isDash = ctx.template.key === "dashboard";
+  const imports = isDash ? "" : `import { AnnouncementBar } from "@/components/announcement-bar";
+import { SiteHeader } from "@/components/site-header";
+import { SiteFooter } from "@/components/site-footer";
+`;
+  const open = isDash ? "" : `<AnnouncementBar />
+          <SiteHeader />
+          `;
+  const close = isDash ? "" : `
+          <SiteFooter />`;
+  return `import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { ThemeProvider } from "@lacspace/theme";
 import { site } from "@/lib/site";
 import { CommandMenu } from "@/components/command-menu";
-import "./globals.css";
+${imports}import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"], display: "swap" });
 
@@ -178,11 +234,14 @@ export const metadata: Metadata = site.meta({ title: ${JSON.stringify(ctx.templa
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={inter.className}>
+    <html lang="en" className={inter.className} suppressHydrationWarning>
       <body className="antialiased">
-        {/* \u2728 Press \u2318K / Ctrl-K anywhere \u2014 powered by @lacspace/ui */}
-        <CommandMenu />
-        {children}
+        {/* \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}
+        </ThemeProvider>
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(site.rootJsonLd()) }}
@@ -192,6 +251,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   );
 }
 `;
+};
 var ogRoute = (ctx) => `import { ImageResponse } from "next/og";
 import { ogCard } from "@lacspace/og";
 import { site } from "@/lib/site";
@@ -226,7 +286,7 @@ export default function NotFound() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center gap-6 px-6 text-center">
       <div className="text-8xl font-black gradient-text">404</div>
-      <p className="text-lg text-white/60">This page wandered off.</p>
+      <p className="text-lg text-muted">This page wandered off.</p>
       <Link href="/" className="gradient-bg rounded-full px-6 py-3 font-semibold text-black">Back home</Link>
     </main>
   );
@@ -262,6 +322,9 @@ boring-but-essential stuff already done. Here's what's in the box.
 - **\u2728 Dynamic OG images** \u2014 every page auto-generates a social-share card at \`/og\` (\`@lacspace/og\`, auto-fitting titles). Share a link and see.
 - **\u2728 A working contact form** \u2014 \`/contact\` is live, typed, validated and spam-protected (honeypot + timing) via \`@lacspace/form\` + \`@lacspace/validate\`. Just point it at your inbox.
 - **\u2728 A \u2318K command palette** \u2014 press \`\u2318K\` / \`Ctrl-K\` anywhere, powered by \`@lacspace/ui\`. Also try \`<Reveal>\`, \`<Counter>\`, \`<GradientText>\`, \`<TiltCard>\`, \`<Marquee>\`, \`<Typewriter>\`.
+- **\u2728 Dark / light / system theme** \u2014 a no-flash toggle in the header via \`@lacspace/theme\` + \`@lacspace/hooks\`. The whole template is theme-aware.
+- **\u2728 Multiple pages + auto header & footer** \u2014 the nav and a full footer are generated from one page map. Every link resolves to a real, branded page \u2014 pages you haven't filled in yet show a friendly **"under development"** screen instead of a 404. Add content in \`app/<route>/page.tsx\`.
+- **\u2728 Global state + data fetching** \u2014 a dismissible announcement bar and the mobile menu use \`@lacspace/store\` (with \`persist\`); the home page's live "By the numbers" strip fetches \`/api/stats\` with \`@lacspace/query\` (shared cache, revalidate-on-focus).
 - **\u2728 Per-page SEO** \u2014 see \`app/about\` & \`app/contact\`: one \`site.meta()\` call gives each route its own title, canonical & OG image.
 - **\u2728 An SEO CI gate** \u2014 \`.github/workflows/seo.yml\` audits every page on each push and fails below grade A, so SEO can never regress.
 - **Security headers** \u2014 HSTS, CSP, X-Frame-Options and more, via \`next.config.mjs\`.
@@ -339,21 +402,11 @@ Open [http://localhost:3000](http://localhost:3000). Edit \`app/page.tsx\` and \
 
 Built with [Lacspace](https://lacspace.com/packages).
 `;
-var NAV = (name, links) => `<header className="sticky top-0 z-40 backdrop-blur border-b border-white/10">
-        <nav className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
-          <span className="text-lg font-black gradient-text">${name}</span>
-          <div className="hidden gap-8 text-sm text-white/60 sm:flex">
-            ${links.map((l) => `<a href="#${l.toLowerCase()}" className="hover:text-white">${l}</a>`).join("\n            ")}
-          </div>
-        </nav>
-      </header>`;
-var FOOTER = (name) => `<footer className="border-t border-white/10 py-10 text-center text-sm text-white/40">
-        \xA9 {new Date().getFullYear()} ${name}. Built with{" "}
-        <a href="https://lacspace.com/packages" className="text-white/70 hover:text-white">Lacspace</a>.
-      </footer>`;
 function homePage(ctx) {
   const n = ctx.template.siteName;
+  if (ctx.template.key === "dashboard") return dashboardHome(ctx);
   const shell = (inner) => `import { site } from "@/lib/site";
+import { LiveStats } from "@/components/live-stats";
 
 // \u2728 Self-canonical home page \u2014 one line, full SEO (title, canonical, OG, Twitter).
 export const metadata = site.meta({ title: ${JSON.stringify(n)}, path: "/" });
@@ -362,40 +415,38 @@ export default function Home() {
   return (
     <main className="min-h-screen">
       ${inner}
+      ${builtWithSection(ctx)}
     </main>
   );
 }
 `;
   if (ctx.template.key === "personal") {
-    return shell(`${NAV(n, ["Work", "About", "Contact"])}
-      <section className="mx-auto max-w-3xl px-6 py-28 text-center">
-        <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-white/40">Portfolio</p>
+    return shell(`<section className="mx-auto max-w-3xl px-6 py-28 text-center">
+        <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-faint">Portfolio</p>
         <h1 className="text-5xl font-black leading-tight sm:text-7xl">Hi, I'm <span className="gradient-text">${n}</span>.</h1>
-        <p className="mx-auto mt-6 max-w-xl text-lg text-white/60">${ctx.template.siteDescription}</p>
+        <p className="mx-auto mt-6 max-w-xl text-lg text-muted">${ctx.template.siteDescription}</p>
         <div className="mt-10 flex justify-center gap-4">
           <a href="#work" className="gradient-bg rounded-full px-6 py-3 font-semibold text-black">View my work</a>
-          <a href="#contact" className="rounded-full border border-white/20 px-6 py-3 font-semibold hover:bg-white/5">Get in touch</a>
+          <a href="#contact" className="rounded-full border border-hairline px-6 py-3 font-semibold hover:bg-surface">Get in touch</a>
         </div>
       </section>
       <section id="work" className="mx-auto max-w-6xl px-6 py-16">
         <h2 className="mb-10 text-3xl font-bold">Selected work</h2>
         <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {[1, 2, 3, 4, 5, 6].map((i) => (
-            <div key={i} className="group rounded-2xl border border-white/10 bg-white/[0.02] p-6 transition hover:-translate-y-1 hover:border-white/20">
+            <div key={i} className="group rounded-2xl border border-hairline bg-surface p-6 transition hover:-translate-y-1 hover:border-hairline">
               <div className="mb-4 h-32 rounded-xl gradient-bg opacity-80" />
               <h3 className="font-semibold">Project {i}</h3>
-              <p className="mt-1 text-sm text-white/50">A short description of what you built and the impact it had.</p>
+              <p className="mt-1 text-sm text-muted">A short description of what you built and the impact it had.</p>
             </div>
           ))}
         </div>
-      </section>
-      ${FOOTER(n)}`);
+      </section>`);
   }
   if (ctx.template.key === "business") {
-    return shell(`${NAV(n, ["Services", "Work", "Contact"])}
-      <section className="mx-auto max-w-4xl px-6 py-28 text-center">
+    return shell(`<section className="mx-auto max-w-4xl px-6 py-28 text-center">
         <h1 className="text-5xl font-black leading-tight sm:text-6xl">We build products <span className="gradient-text">that grow businesses</span>.</h1>
-        <p className="mx-auto mt-6 max-w-2xl text-lg text-white/60">${ctx.template.siteDescription}</p>
+        <p className="mx-auto mt-6 max-w-2xl text-lg text-muted">${ctx.template.siteDescription}</p>
         <a href="#contact" className="mt-10 inline-block gradient-bg rounded-full px-8 py-3 font-semibold text-black">Start a project</a>
       </section>
       <section id="services" className="mx-auto max-w-6xl px-6 py-16">
@@ -406,25 +457,23 @@ export default function Home() {
             { t: "Design", d: "Brand and product design that people remember." },
             { t: "Engineering", d: "Fast, reliable software built to last." },
           ].map((s) => (
-            <div key={s.t} className="rounded-2xl border border-white/10 bg-white/[0.02] p-8">
+            <div key={s.t} className="rounded-2xl border border-hairline bg-surface p-8">
               <h3 className="text-xl font-bold gradient-text">{s.t}</h3>
-              <p className="mt-2 text-white/60">{s.d}</p>
+              <p className="mt-2 text-muted">{s.d}</p>
             </div>
           ))}
         </div>
       </section>
       <section id="contact" className="mx-auto max-w-3xl px-6 py-24 text-center">
         <h2 className="text-3xl font-bold">Let's work together</h2>
-        <p className="mt-3 text-white/60">Tell us about your project and we'll get back within a day.</p>
-        <a href="mailto:hello@example.com" className="mt-8 inline-block rounded-full border border-white/20 px-8 py-3 font-semibold hover:bg-white/5">hello@example.com</a>
-      </section>
-      ${FOOTER(n)}`);
+        <p className="mt-3 text-muted">Tell us about your project and we'll get back within a day.</p>
+        <a href="mailto:hello@example.com" className="mt-8 inline-block rounded-full border border-hairline px-8 py-3 font-semibold hover:bg-surface">hello@example.com</a>
+      </section>`);
   }
   if (ctx.template.key === "ecommerce") {
-    return shell(`${NAV(n, ["Shop", "About", "Cart"])}
-      <section className="mx-auto max-w-5xl px-6 py-24 text-center">
+    return shell(`<section className="mx-auto max-w-5xl px-6 py-24 text-center">
         <h1 className="text-5xl font-black leading-tight sm:text-6xl"><span className="gradient-text">${n}</span></h1>
-        <p className="mx-auto mt-6 max-w-xl text-lg text-white/60">${ctx.template.siteDescription}</p>
+        <p className="mx-auto mt-6 max-w-xl text-lg text-muted">${ctx.template.siteDescription}</p>
         <a href="#shop" className="mt-10 inline-block gradient-bg rounded-full px-8 py-3 font-semibold text-black">Shop the collection</a>
       </section>
       <section id="shop" className="mx-auto max-w-6xl px-6 py-16">
@@ -434,32 +483,30 @@ export default function Home() {
             { n: "Aurora Lamp", p: "$89" }, { n: "Terra Mug", p: "$24" },
             { n: "Linen Throw", p: "$65" }, { n: "Oak Stand", p: "$120" },
           ].map((prod) => (
-            <div key={prod.n} className="group rounded-2xl border border-white/10 bg-white/[0.02] p-4 transition hover:-translate-y-1">
+            <div key={prod.n} className="group rounded-2xl border border-hairline bg-surface p-4 transition hover:-translate-y-1">
               <div className="mb-4 aspect-square rounded-xl gradient-bg opacity-80" />
               <div className="flex items-center justify-between">
                 <h3 className="font-semibold">{prod.n}</h3>
-                <span className="text-white/60">{prod.p}</span>
+                <span className="text-muted">{prod.p}</span>
               </div>
-              <button className="mt-3 w-full rounded-lg border border-white/15 py-2 text-sm font-medium hover:bg-white/5">Add to cart</button>
+              <button className="mt-3 w-full rounded-lg border border-hairline py-2 text-sm font-medium hover:bg-surface">Add to cart</button>
             </div>
           ))}
         </div>
-      </section>
-      ${FOOTER(n)}`);
+      </section>`);
   }
   if (ctx.template.key === "blog") {
-    return shell(`${NAV(n, ["Latest", "Topics", "About"])}
-      <section className="mx-auto max-w-3xl px-6 py-24">
-        <p className="mb-3 text-sm font-semibold uppercase tracking-widest text-white/40">The Journal</p>
+    return shell(`<section className="mx-auto max-w-3xl px-6 py-24">
+        <p className="mb-3 text-sm font-semibold uppercase tracking-widest text-faint">The Journal</p>
         <h1 className="text-5xl font-black leading-tight sm:text-6xl gradient-text">${n}</h1>
-        <p className="mt-6 text-lg text-white/60">${ctx.template.siteDescription}</p>
+        <p className="mt-6 text-lg text-muted">${ctx.template.siteDescription}</p>
       </section>
       <section id="latest" className="mx-auto max-w-5xl px-6 pb-8">
-        <a href="#" className="group block rounded-3xl border border-white/10 bg-white/[0.02] p-8 transition hover:border-white/20">
+        <a href="#" className="group block rounded-3xl border border-hairline bg-surface p-8 transition hover:border-hairline">
           <div className="mb-6 h-56 rounded-2xl gradient-bg opacity-80" />
-          <span className="text-xs font-semibold uppercase tracking-wider text-white/40">Featured</span>
+          <span className="text-xs font-semibold uppercase tracking-wider text-faint">Featured</span>
           <h2 className="mt-2 text-3xl font-bold group-hover:opacity-90">The one thing every product needs before launch</h2>
-          <p className="mt-2 text-white/60">A short, punchy dek that pulls the reader into the piece and makes them want more.</p>
+          <p className="mt-2 text-muted">A short, punchy dek that pulls the reader into the piece and makes them want more.</p>
         </a>
       </section>
       <section className="mx-auto max-w-5xl px-6 py-12">
@@ -467,22 +514,20 @@ export default function Home() {
           {[1, 2, 3, 4].map((i) => (
             <a key={i} href="#" className="group">
               <div className="mb-4 h-40 rounded-xl gradient-bg opacity-70" />
-              <span className="text-xs uppercase tracking-wider text-white/40">Essay</span>
+              <span className="text-xs uppercase tracking-wider text-faint">Essay</span>
               <h3 className="mt-1 text-xl font-semibold group-hover:opacity-90">A thoughtful headline for post {i}</h3>
-              <p className="mt-1 text-sm text-white/50">Two lines of supporting copy to set the scene for the reader.</p>
+              <p className="mt-1 text-sm text-muted">Two lines of supporting copy to set the scene for the reader.</p>
             </a>
           ))}
         </div>
-      </section>
-      ${FOOTER(n)}`);
+      </section>`);
   }
   if (ctx.template.key === "docs") {
-    return shell(`${NAV(n, ["Guides", "API", "Examples"])}
-      <section className="mx-auto max-w-4xl px-6 py-28 text-center">
+    return shell(`<section className="mx-auto max-w-4xl px-6 py-28 text-center">
         <h1 className="text-5xl font-black leading-tight sm:text-6xl"><span className="gradient-text">${n}</span></h1>
-        <p className="mx-auto mt-6 max-w-2xl text-lg text-white/60">${ctx.template.siteDescription}</p>
-        <div className="mt-8 inline-flex items-center gap-3 rounded-lg border border-white/10 bg-black/40 px-4 py-3 font-mono text-sm text-white/80">
-          <span className="text-white/40">$</span> npm install @acme/sdk
+        <p className="mx-auto mt-6 max-w-2xl text-lg text-muted">${ctx.template.siteDescription}</p>
+        <div className="mt-8 inline-flex items-center gap-3 rounded-lg border border-hairline bg-panel px-4 py-3 font-mono text-sm text-muted">
+          <span className="text-faint">$</span> npm install @acme/sdk
         </div>
       </section>
       <section id="guides" className="mx-auto max-w-6xl px-6 py-12">
@@ -492,60 +537,19 @@ export default function Home() {
             { t: "Guides", d: "Task-focused walkthroughs for the common paths." },
             { t: "API reference", d: "Every endpoint, typed, with copy-paste examples." },
           ].map((c) => (
-            <a key={c.t} href="#" className="rounded-2xl border border-white/10 bg-white/[0.02] p-8 transition hover:border-white/20">
+            <a key={c.t} href="#" className="rounded-2xl border border-hairline bg-surface p-8 transition hover:border-hairline">
               <h3 className="text-xl font-bold gradient-text">{c.t}</h3>
-              <p className="mt-2 text-white/60">{c.d}</p>
+              <p className="mt-2 text-muted">{c.d}</p>
             </a>
           ))}
         </div>
-      </section>
-      ${FOOTER(n)}`);
-  }
-  if (ctx.template.key === "dashboard") {
-    return shell(`<div className="flex min-h-screen">
-        <aside className="hidden w-56 shrink-0 border-r border-white/10 p-6 md:block">
-          <div className="mb-8 text-lg font-black gradient-text">${n}</div>
-          <nav className="space-y-1 text-sm text-white/60">
-            {["Overview", "Analytics", "Customers", "Settings"].map((l) => (
-              <a key={l} href="#" className="block rounded-lg px-3 py-2 hover:bg-white/5 hover:text-white">{l}</a>
-            ))}
-          </nav>
-        </aside>
-        <main className="flex-1 p-6 md:p-10">
-          <h1 className="text-2xl font-bold">Overview</h1>
-          <p className="mt-1 text-white/50">${ctx.template.siteDescription}</p>
-          <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            {[
-              { l: "Revenue", v: "$48.2k", c: "+12%" }, { l: "Users", v: "12,480", c: "+3.4%" },
-              { l: "Orders", v: "1,204", c: "+8%" }, { l: "Churn", v: "1.2%", c: "-0.3%" },
-            ].map((s) => (
-              <div key={s.l} className="rounded-2xl border border-white/10 bg-white/[0.02] p-5">
-                <div className="text-sm text-white/50">{s.l}</div>
-                <div className="mt-1 text-2xl font-bold">{s.v}</div>
-                <div className="mt-1 text-xs text-emerald-400">{s.c}</div>
-              </div>
-            ))}
-          </div>
-          <div className="mt-6 rounded-2xl border border-white/10 bg-white/[0.02] p-6">
-            <div className="mb-4 font-semibold">Recent activity</div>
-            <div className="space-y-3">
-              {[1, 2, 3, 4].map((i) => (
-                <div key={i} className="flex items-center justify-between border-b border-white/5 pb-3 text-sm">
-                  <span className="text-white/70">Event #{i}</span>
-                  <span className="text-white/40">just now</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </main>
-      </div>`);
+      </section>`);
   }
   if (ctx.template.key === "restaurant") {
-    return shell(`${NAV(n, ["Menu", "Story", "Reserve"])}
-      <section className="mx-auto max-w-4xl px-6 py-28 text-center">
-        <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-white/40">Est. 2026</p>
+    return shell(`<section className="mx-auto max-w-4xl px-6 py-28 text-center">
+        <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-faint">Est. 2026</p>
         <h1 className="text-5xl font-black leading-tight sm:text-7xl gradient-text">${n}</h1>
-        <p className="mx-auto mt-6 max-w-xl text-lg text-white/60">${ctx.template.siteDescription}</p>
+        <p className="mx-auto mt-6 max-w-xl text-lg text-muted">${ctx.template.siteDescription}</p>
         <a href="#reserve" className="mt-10 inline-block gradient-bg rounded-full px-8 py-3 font-semibold text-black">Reserve a table</a>
       </section>
       <section id="menu" className="mx-auto max-w-4xl px-6 py-16">
@@ -555,10 +559,10 @@ export default function Home() {
             { n: "Charred leeks", p: "$14" }, { n: "Handmade tagliatelle", p: "$22" },
             { n: "Wood-fired trout", p: "$28" }, { n: "Olive oil cake", p: "$11" },
           ].map((d) => (
-            <div key={d.n} className="flex items-baseline justify-between gap-4 border-b border-white/10 pb-4">
+            <div key={d.n} className="flex items-baseline justify-between gap-4 border-b border-hairline pb-4">
               <div>
                 <h3 className="text-lg font-semibold">{d.n}</h3>
-                <p className="text-sm text-white/50">A short, mouth-watering description of the dish.</p>
+                <p className="text-sm text-muted">A short, mouth-watering description of the dish.</p>
               </div>
               <span className="shrink-0 gradient-text font-bold">{d.p}</span>
             </div>
@@ -567,19 +571,17 @@ export default function Home() {
       </section>
       <section id="reserve" className="mx-auto max-w-2xl px-6 py-24 text-center">
         <h2 className="text-3xl font-bold">Join us</h2>
-        <p className="mt-3 text-white/60">Open Wed\u2013Sun, 5pm till late. Walk-ins welcome; bookings recommended.</p>
-        <a href="tel:+10000000000" className="mt-8 inline-block rounded-full border border-white/20 px-8 py-3 font-semibold hover:bg-white/5">Call to book</a>
-      </section>
-      ${FOOTER(n)}`);
+        <p className="mt-3 text-muted">Open Wed\u2013Sun, 5pm till late. Walk-ins welcome; bookings recommended.</p>
+        <a href="tel:+10000000000" className="mt-8 inline-block rounded-full border border-hairline px-8 py-3 font-semibold hover:bg-surface">Call to book</a>
+      </section>`);
   }
-  return shell(`${NAV(n, ["Features", "Pricing", "Sign in"])}
-      <section className="mx-auto max-w-4xl px-6 py-28 text-center">
-        <p className="mb-4 inline-block rounded-full border border-white/15 px-4 py-1 text-xs font-semibold text-white/60">New \xB7 v1.0</p>
+  return shell(`<section className="mx-auto max-w-4xl px-6 py-28 text-center">
+        <p className="mb-4 inline-block rounded-full border border-hairline px-4 py-1 text-xs font-semibold text-muted">New \xB7 v1.0</p>
         <h1 className="text-5xl font-black leading-tight sm:text-6xl">Ship faster with <span className="gradient-text">${n}</span></h1>
-        <p className="mx-auto mt-6 max-w-2xl text-lg text-white/60">${ctx.template.siteDescription}</p>
+        <p className="mx-auto mt-6 max-w-2xl text-lg text-muted">${ctx.template.siteDescription}</p>
         <div className="mt-10 flex justify-center gap-4">
           <a href="#pricing" className="gradient-bg rounded-full px-8 py-3 font-semibold text-black">Start free</a>
-          <a href="#features" className="rounded-full border border-white/20 px-8 py-3 font-semibold hover:bg-white/5">See features</a>
+          <a href="#features" className="rounded-full border border-hairline px-8 py-3 font-semibold hover:bg-surface">See features</a>
         </div>
       </section>
       <section id="features" className="mx-auto max-w-6xl px-6 py-16">
@@ -589,21 +591,20 @@ export default function Home() {
             { t: "Secure", d: "Hardened headers and auth out of the box." },
             { t: "Scalable", d: "From your first user to your millionth." },
           ].map((f) => (
-            <div key={f.t} className="rounded-2xl border border-white/10 bg-white/[0.02] p-8">
+            <div key={f.t} className="rounded-2xl border border-hairline bg-surface p-8">
               <h3 className="text-xl font-bold gradient-text">{f.t}</h3>
-              <p className="mt-2 text-white/60">{f.d}</p>
+              <p className="mt-2 text-muted">{f.d}</p>
             </div>
           ))}
         </div>
       </section>
       <section id="pricing" className="mx-auto max-w-md px-6 py-24 text-center">
-        <div className="rounded-3xl border border-white/10 bg-white/[0.02] p-10">
+        <div className="rounded-3xl border border-hairline bg-surface p-10">
           <h2 className="text-3xl font-bold">Pro</h2>
-          <p className="mt-2 text-5xl font-black gradient-text">$29<span className="text-lg text-white/40">/mo</span></p>
+          <p className="mt-2 text-5xl font-black gradient-text">$29<span className="text-lg text-faint">/mo</span></p>
           <a href="#" className="mt-8 inline-block w-full gradient-bg rounded-full px-8 py-3 font-semibold text-black">Get started</a>
         </div>
-      </section>
-      ${FOOTER(n)}`);
+      </section>`);
 }
 var glyph = (ctx) => (ctx.template.siteName.trim()[0] ?? "A").toUpperCase();
 var iconTsx = (ctx) => `import { ImageResponse } from "next/og";
@@ -655,9 +656,9 @@ export const metadata: Metadata = site.meta({
 export default function AboutPage() {
   return (
     <main className="mx-auto max-w-3xl px-6 py-28">
-      <Link href="/" className="text-sm text-white/50 hover:text-white">\u2190 Back home</Link>
+      <Link href="/" className="text-sm text-muted hover:text-fg">\u2190 Back home</Link>
       <h1 className="mt-6 text-4xl font-black sm:text-5xl gradient-text">About</h1>
-      <p className="mt-6 text-lg leading-relaxed text-white/60">
+      <p className="mt-6 text-lg leading-relaxed text-muted">
         This page already has its own SEO \u2014 a unique title, canonical URL, Open Graph tags and a
         generated social image \u2014 from a single <code>site.meta()</code> call. Duplicate this file for
         any new route and it just works.
@@ -666,6 +667,41 @@ export default function AboutPage() {
   );
 }
 `;
+var themeToggle = () => `"use client";
+
+import { useTheme } from "@lacspace/theme";
+import { useIsMounted } from "@lacspace/hooks";
+
+/** A sun/moon button that flips between light and dark. */
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const isMounted = useIsMounted();
+  const dark = resolvedTheme === "dark";
+
+  return (
+    <button
+      type="button"
+      aria-label="Toggle theme"
+      onClick={() => setTheme(dark ? "light" : "dark")}
+      className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-hairline text-muted transition hover:text-fg"
+    >
+      {/* Render a neutral placeholder until mounted to avoid a hydration mismatch. */}
+      {!isMounted() ? (
+        <span className="block h-4 w-4" />
+      ) : dark ? (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+        </svg>
+      ) : (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      )}
+    </button>
+  );
+}
+`;
 var commandMenu = (ctx) => `"use client";
 import { useRouter } from "next/navigation";
 import { CommandPalette } from "@lacspace/ui";
@@ -721,8 +757,8 @@ import { useActionState } from "react";
 import { honeypotProps, timestampValue } from "@lacspace/form";
 import { submitContact, type ContactState } from "@/app/actions";
 
-const field = "w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 outline-none focus:border-white/30";
-const label = "mb-1 block text-sm text-white/60";
+const field = "w-full rounded-xl border border-hairline bg-surface px-4 py-3 outline-none focus:border-hairline";
+const label = "mb-1 block text-sm text-muted";
 const errCls = "mt-1 text-sm text-red-400";
 
 export function ContactForm() {
@@ -730,7 +766,7 @@ export function ContactForm() {
 
   if (state?.ok) {
     return (
-      <p className="rounded-2xl border border-white/10 bg-white/5 p-8 text-center text-lg">
+      <p className="rounded-2xl border border-hairline bg-surface p-8 text-center text-lg">
         Thanks \u2014 we&rsquo;ll be in touch! \u2705
       </p>
     );
@@ -786,7 +822,7 @@ export default function ContactPage() {
   return (
     <main className="mx-auto max-w-2xl px-6 py-24">
       <h1 className="text-4xl font-black gradient-text sm:text-5xl">Get in touch</h1>
-      <p className="mt-4 text-white/60">Have a question or a project in mind? Drop a message below.</p>
+      <p className="mt-4 text-muted">Have a question or a project in mind? Drop a message below.</p>
       <div className="mt-10">
         <ContactForm />
       </div>
@@ -885,7 +921,7 @@ export function DocsSidebar({ nav }: { nav: { group: string; items: DocMeta[] }[
     <nav className="flex flex-col gap-6 text-sm">
       {nav.map((group) => (
         <div key={group.group}>
-          <p className="mb-2 text-xs font-semibold uppercase tracking-widest text-white/40">{group.group}</p>
+          <p className="mb-2 text-xs font-semibold uppercase tracking-widest text-faint">{group.group}</p>
           <ul className="flex flex-col gap-1">
             {group.items.map((d) => {
               const href = \`/docs/\${d.slug}\`;
@@ -894,7 +930,7 @@ export function DocsSidebar({ nav }: { nav: { group: string; items: DocMeta[] }[
                 <li key={d.slug}>
                   <Link
                     href={href}
-                    className={\`block rounded-lg px-3 py-1.5 transition \${active ? "gradient-bg font-semibold text-black" : "text-white/70 hover:bg-white/5 hover:text-white"}\`}
+                    className={\`block rounded-lg px-3 py-1.5 transition \${active ? "gradient-bg font-semibold text-black" : "text-muted hover:bg-surface hover:text-fg"}\`}
                   >
                     {d.title}
                   </Link>
@@ -911,13 +947,17 @@ export function DocsSidebar({ nav }: { nav: { group: string; items: DocMeta[] }[
 var docsLayout = () => `import Link from "next/link";
 import { getDocNav } from "@/lib/docs";
 import { DocsSidebar } from "@/components/docs-sidebar";
+import { ThemeToggle } from "@/components/theme-toggle";
 
 export default function DocsLayout({ children }: { children: React.ReactNode }) {
   const nav = getDocNav();
   return (
     <div className="mx-auto grid max-w-6xl gap-10 px-6 py-16 md:grid-cols-[220px_1fr]">
       <aside className="md:sticky md:top-24 md:h-fit">
-        <Link href="/docs" className="mb-6 block text-lg font-black gradient-text">Docs</Link>
+        <div className="mb-6 flex items-center justify-between">
+          <Link href="/docs" className="block text-lg font-black gradient-text">Docs</Link>
+          <ThemeToggle />
+        </div>
         <DocsSidebar nav={nav} />
       </aside>
       <div className="min-w-0">{children}</div>
@@ -940,13 +980,13 @@ export default function DocsIndex() {
   return (
     <div>
       <h1 className="text-4xl font-black gradient-text">Documentation</h1>
-      <p className="mt-4 text-white/60">Everything you need to get started and go deep.</p>
+      <p className="mt-4 text-muted">Everything you need to get started and go deep.</p>
       <div className="mt-10 grid gap-4 sm:grid-cols-2">
         {docs.map((d) => (
-          <Link key={d.slug} href={\`/docs/\${d.slug}\`} className="rounded-2xl border border-white/10 bg-white/5 p-5 transition hover:border-white/25">
-            <span className="text-xs font-semibold uppercase tracking-widest text-white/40">{d.group}</span>
+          <Link key={d.slug} href={\`/docs/\${d.slug}\`} className="rounded-2xl border border-hairline bg-surface p-5 transition hover:border-hairline">
+            <span className="text-xs font-semibold uppercase tracking-widest text-faint">{d.group}</span>
             <h2 className="mt-1 text-lg font-bold">{d.title}</h2>
-            {d.description && <p className="mt-1 text-sm text-white/60">{d.description}</p>}
+            {d.description && <p className="mt-1 text-sm text-muted">{d.description}</p>}
           </Link>
         ))}
       </div>
@@ -978,17 +1018,17 @@ export default async function DocPage({ params }: { params: Promise<{ slug: stri
 
   return (
     <article>
-      <span className="text-xs font-semibold uppercase tracking-widest text-white/40">{doc.group}</span>
+      <span className="text-xs font-semibold uppercase tracking-widest text-faint">{doc.group}</span>
       <h1 className="mt-1 text-4xl font-black leading-tight">{doc.title}</h1>
-      {doc.description && <p className="mt-3 text-lg text-white/60">{doc.description}</p>}
+      {doc.description && <p className="mt-3 text-lg text-muted">{doc.description}</p>}
 
       {doc.toc.length > 2 && (
-        <div className="mt-8 rounded-xl border border-white/10 bg-white/5 p-4">
-          <p className="mb-2 text-xs font-semibold uppercase tracking-widest text-white/40">On this page</p>
+        <div className="mt-8 rounded-xl border border-hairline bg-surface p-4">
+          <p className="mb-2 text-xs font-semibold uppercase tracking-widest text-faint">On this page</p>
           <ul className="flex flex-col gap-1 text-sm">
             {doc.toc.map((h) => (
               <li key={h.id} style={{ paddingLeft: (h.level - 1) * 12 }}>
-                <a href={\`#\${h.id}\`} className="text-white/60 hover:text-white">{h.text}</a>
+                <a href={\`#\${h.id}\`} className="text-muted hover:text-fg">{h.text}</a>
               </li>
             ))}
           </ul>
@@ -997,9 +1037,9 @@ export default async function DocPage({ params }: { params: Promise<{ slug: stri
 
       <div className="prose mt-10" dangerouslySetInnerHTML={{ __html: doc.html }} />
 
-      <nav className="mt-14 flex justify-between gap-4 border-t border-white/10 pt-8 text-sm">
-        {prev ? <Link href={\`/docs/\${prev.slug}\`} className="text-white/70 hover:text-white">&larr; {prev.title}</Link> : <span />}
-        {next ? <Link href={\`/docs/\${next.slug}\`} className="text-right text-white/70 hover:text-white">{next.title} &rarr;</Link> : <span />}
+      <nav className="mt-14 flex justify-between gap-4 border-t border-hairline pt-8 text-sm">
+        {prev ? <Link href={\`/docs/\${prev.slug}\`} className="text-muted hover:text-fg">&larr; {prev.title}</Link> : <span />}
+        {next ? <Link href={\`/docs/\${next.slug}\`} className="text-right text-muted hover:text-fg">{next.title} &rarr;</Link> : <span />}
       </nav>
     </article>
   );
@@ -1208,17 +1248,17 @@ export default function Blog() {
   return (
     <main className="mx-auto max-w-3xl px-6 py-24">
       <h1 className="text-4xl font-black gradient-text sm:text-5xl">Blog</h1>
-      <p className="mt-4 text-white/60">Thoughts, notes and updates.</p>
+      <p className="mt-4 text-muted">Thoughts, notes and updates.</p>
       <div className="mt-12 flex flex-col gap-8">
         {posts.map((post) => (
-          <Link key={post.slug} href={\`/blog/\${post.slug}\`} className="group rounded-2xl border border-white/10 bg-white/5 p-6 transition hover:border-white/25">
-            {post.tag && <span className="text-xs font-semibold uppercase tracking-widest text-white/40">{post.tag}</span>}
+          <Link key={post.slug} href={\`/blog/\${post.slug}\`} className="group rounded-2xl border border-hairline bg-surface p-6 transition hover:border-hairline">
+            {post.tag && <span className="text-xs font-semibold uppercase tracking-widest text-faint">{post.tag}</span>}
             <h2 className="mt-1 text-2xl font-bold group-hover:gradient-text">{post.title}</h2>
-            <p className="mt-2 text-white/60">{post.excerpt}</p>
-            {post.date && <time className="mt-3 block text-sm text-white/40">{new Date(post.date).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })}</time>}
+            <p className="mt-2 text-muted">{post.excerpt}</p>
+            {post.date && <time className="mt-3 block text-sm text-faint">{new Date(post.date).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })}</time>}
           </Link>
         ))}
-        {posts.length === 0 && <p className="text-white/50">No posts yet \u2014 add a Markdown file in <code>content/posts/</code>.</p>}
+        {posts.length === 0 && <p className="text-muted">No posts yet \u2014 add a Markdown file in <code>content/posts/</code>.</p>}
       </div>
     </main>
   );
@@ -1265,10 +1305,10 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
 
   return (
     <main className="mx-auto max-w-2xl px-6 py-24">
-      <Link href="/blog" className="text-sm text-white/50 hover:text-white">&larr; All posts</Link>
+      <Link href="/blog" className="text-sm text-muted hover:text-fg">&larr; All posts</Link>
       <article className="mt-6">
         <h1 className="text-4xl font-black leading-tight sm:text-5xl">{post.title}</h1>
-        {post.date && <time className="mt-4 block text-sm text-white/40">{new Date(post.date).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })}</time>}
+        {post.date && <time className="mt-4 block text-sm text-faint">{new Date(post.date).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })}</time>}
         <div className="prose mt-10" dangerouslySetInnerHTML={{ __html: post.html }} />
       </article>
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
@@ -1376,10 +1416,27 @@ function buildFiles(ctx) {
     "app/actions.ts": actionsTs(),
     "components/command-menu.tsx": commandMenu(ctx),
     "components/contact-form.tsx": contactForm(),
+    "components/theme-toggle.tsx": themeToggle(),
+    // ✨ React Kit: global state (@lacspace/store) + data fetching (@lacspace/query).
+    "lib/store.ts": uiStore(),
+    "components/under-development.tsx": underDevelopmentComponent(),
+    "components/live-stats.tsx": liveStats(),
+    "app/api/stats/route.ts": statsRoute(),
     ".github/workflows/seo.yml": seoWorkflow(),
     ".env.example": envExample(),
     "WELCOME.md": welcomeMd(ctx)
   };
+  const isDash = ctx.template.key === "dashboard";
+  if (isDash) {
+    files["components/dashboard-shell.tsx"] = dashboardShell(ctx);
+  } else {
+    files["components/site-header.tsx"] = siteHeader(ctx);
+    files["components/site-footer.tsx"] = siteFooter(ctx);
+    files["components/announcement-bar.tsx"] = announcementBar();
+  }
+  for (const page of stubPages(ctx)) {
+    files[`app${page.path}/page.tsx`] = isDash ? dashboardStubPage(page) : underDevPage(page);
+  }
   if (isBlog) {
     files["lib/posts.ts"] = postsLib();
     files["app/blog/page.tsx"] = blogListPage(ctx);
@@ -1399,6 +1456,381 @@ function buildFiles(ctx) {
   }
   return files;
 }
+function pagesFor(ctx) {
+  const k = ctx.template.key;
+  if (k === "dashboard") {
+    return [
+      { path: "/analytics", label: "Analytics", nav: true, group: "Product" },
+      { path: "/customers", label: "Customers", nav: true, group: "Product" },
+      { path: "/billing", label: "Billing", nav: true, group: "Product" },
+      { path: "/settings", label: "Settings", nav: true, group: "Product" },
+      { path: "/help", label: "Help", group: "Resources" }
+    ];
+  }
+  const common = [
+    { path: "/about", label: "About", nav: true, group: "Company", real: true },
+    { path: "/contact", label: "Contact", nav: true, group: "Company", real: true },
+    { path: "/careers", label: "Careers", group: "Company" },
+    { path: "/privacy", label: "Privacy", group: "Resources" },
+    { path: "/terms", label: "Terms", group: "Resources" }
+  ];
+  const specific = {
+    personal: [
+      { path: "/work", label: "Work", nav: true, group: "Product" },
+      { path: "/blog", label: "Blog", nav: true, group: "Product" },
+      { path: "/uses", label: "Uses", group: "Resources" }
+    ],
+    business: [
+      { path: "/services", label: "Services", nav: true, group: "Product" },
+      { path: "/work", label: "Work", nav: true, group: "Product" },
+      { path: "/pricing", label: "Pricing", nav: true, group: "Product" },
+      { path: "/faq", label: "FAQ", group: "Resources" }
+    ],
+    ecommerce: [
+      { path: "/shop", label: "Shop", nav: true, group: "Product" },
+      { path: "/collections", label: "Collections", nav: true, group: "Product" },
+      { path: "/shipping", label: "Shipping", group: "Resources" },
+      { path: "/returns", label: "Returns", group: "Resources" }
+    ],
+    saas: [
+      { path: "/features", label: "Features", nav: true, group: "Product" },
+      { path: "/pricing", label: "Pricing", nav: true, group: "Product" },
+      { path: "/integrations", label: "Integrations", group: "Product" },
+      { path: "/changelog", label: "Changelog", group: "Resources" }
+    ],
+    blog: [
+      { path: "/blog", label: "Articles", nav: true, group: "Product", real: true },
+      { path: "/topics", label: "Topics", nav: true, group: "Product" },
+      { path: "/newsletter", label: "Newsletter", group: "Resources" }
+    ],
+    docs: [
+      { path: "/docs", label: "Docs", nav: true, group: "Product", real: true },
+      { path: "/guides", label: "Guides", nav: true, group: "Product" },
+      { path: "/api-reference", label: "API", nav: true, group: "Product" },
+      { path: "/changelog", label: "Changelog", group: "Resources" }
+    ],
+    restaurant: [
+      { path: "/menu", label: "Menu", nav: true, group: "Product" },
+      { path: "/reservations", label: "Reservations", nav: true, group: "Product" },
+      { path: "/gallery", label: "Gallery", nav: true, group: "Product" },
+      { path: "/events", label: "Private events", group: "Resources" }
+    ]
+  };
+  return [...specific[k] ?? [], ...common];
+}
+function stubPages(ctx) {
+  return pagesFor(ctx).filter((p) => !p.real);
+}
+var linkLiteral = (pages) => pages.map((l) => `{ href: ${JSON.stringify(l.path)}, label: ${JSON.stringify(l.label)} }`).join(", ");
+var siteHeader = (ctx) => `"use client";
+
+import Link from "next/link";
+import { useUI } from "@/lib/store";
+import { ThemeToggle } from "./theme-toggle";
+
+const LINKS = [${linkLiteral(pagesFor(ctx).filter((p) => p.nav))}];
+
+export function SiteHeader() {
+  const open = useUI((s) => s.navOpen);
+  const toggle = useUI((s) => s.toggleNav);
+  const setOpen = useUI((s) => s.setNavOpen);
+  return (
+    <header className="sticky top-0 z-40 border-b border-hairline bg-app/90 backdrop-blur">
+      <nav className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+        <Link href="/" className="text-lg font-black gradient-text">${ctx.template.siteName}</Link>
+        <div className="hidden items-center gap-8 md:flex">
+          {LINKS.map((l) => (
+            <Link key={l.href} href={l.href} className="text-sm text-muted transition hover:text-fg">{l.label}</Link>
+          ))}
+          <ThemeToggle />
+        </div>
+        <div className="flex items-center gap-2 md:hidden">
+          <ThemeToggle />
+          <button type="button" aria-label="Menu" onClick={toggle} className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-hairline text-muted transition hover:text-fg">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden><path d="M3 6h18M3 12h18M3 18h18" /></svg>
+          </button>
+        </div>
+      </nav>
+      {open ? (
+        <div className="border-t border-hairline md:hidden">
+          <div className="mx-auto flex max-w-6xl flex-col gap-1 px-6 py-3">
+            {LINKS.map((l) => (
+              <Link key={l.href} href={l.href} onClick={() => setOpen(false)} className="rounded-lg px-3 py-2 text-muted transition hover:bg-surface hover:text-fg">{l.label}</Link>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </header>
+  );
+}
+`;
+var siteFooter = (ctx) => {
+  const pages = pagesFor(ctx);
+  const groups = ["Product", "Company", "Resources"].map((title) => ({ title, items: pages.filter((p) => p.group === title) })).filter((g) => g.items.length > 0);
+  const groupsLiteral = groups.map((g) => `{ title: ${JSON.stringify(g.title)}, links: [${linkLiteral(g.items)}] }`).join(", ");
+  return `import Link from "next/link";
+
+const GROUPS = [${groupsLiteral}];
+
+export function SiteFooter() {
+  return (
+    <footer className="border-t border-hairline">
+      <div className="mx-auto max-w-6xl px-6 py-14">
+        <div className="grid gap-10 md:grid-cols-4">
+          <div>
+            <div className="text-lg font-black gradient-text">${ctx.template.siteName}</div>
+            <p className="mt-3 max-w-xs text-sm text-muted">${ctx.template.siteDescription}</p>
+          </div>
+          {GROUPS.map((g) => (
+            <div key={g.title}>
+              <div className="text-sm font-semibold">{g.title}</div>
+              <ul className="mt-3 space-y-2 text-sm text-muted">
+                {g.links.map((l) => (
+                  <li key={l.href}><Link href={l.href} className="transition hover:text-fg">{l.label}</Link></li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="mt-12 flex flex-col gap-3 border-t border-hairline pt-6 text-sm text-faint sm:flex-row sm:items-center sm:justify-between">
+          <span>\xA9 {new Date().getFullYear()} ${ctx.template.siteName}. All rights reserved.</span>
+          <span>Built with <a href="https://lacspace.com/packages" className="text-muted transition hover:text-fg">the Lacspace React Kit</a>.</span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+`;
+};
+var announcementBar = () => `"use client";
+
+import { useAnnouncement } from "@/lib/store";
+import { useIsMounted } from "@lacspace/hooks";
+
+export function AnnouncementBar() {
+  const dismissed = useAnnouncement((s) => s.dismissed);
+  const dismiss = useAnnouncement((s) => s.dismiss);
+  const mounted = useIsMounted();
+
+  // Persisted state is client-only \u2014 wait for mount to avoid a hydration flash.
+  if (!mounted() || dismissed) return null;
+
+  return (
+    <div className="relative gradient-bg px-10 py-2 text-center text-sm font-medium text-black">
+      \u2728 Built with the Lacspace React Kit \u2014{" "}
+      <a href="https://lacspace.com/packages" className="underline underline-offset-2">explore the packages</a>
+      <button type="button" aria-label="Dismiss" onClick={dismiss} className="absolute right-3 top-1/2 -translate-y-1/2 text-lg leading-none text-black/60 hover:text-black">\xD7</button>
+    </div>
+  );
+}
+`;
+var underDevelopmentComponent = () => `"use client";
+
+import Link from "next/link";
+
+/** A branded placeholder for pages that don't have content yet. */
+export function UnderDevelopment({ title = "This page", path }: { title?: string; path?: string }) {
+  return (
+    <div className="mx-auto flex min-h-[70vh] max-w-2xl flex-col items-center justify-center px-6 py-20 text-center">
+      <div className="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl gradient-bg text-3xl">\u{1F6A7}</div>
+      <p className="text-sm font-semibold uppercase tracking-widest text-muted">Under development</p>
+      <h1 className="mt-3 text-4xl font-bold tracking-tight"><span className="gradient-text">{title}</span> is coming soon</h1>
+      <p className="mt-4 max-w-md text-muted">We're putting the finishing touches on this page. Check back shortly \u2014 or head back home in the meantime.</p>
+      <div className="mt-8 h-1.5 w-full max-w-xs overflow-hidden rounded-full bg-surface">
+        <div className="h-full w-1/3 gradient-bg" style={{ animation: "loadbar 1.8s ease-in-out infinite" }} />
+      </div>
+      <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
+        <Link href="/" className="gradient-bg rounded-full px-6 py-3 font-semibold text-black">Back home</Link>
+        <Link href="/contact" className="rounded-full border border-hairline px-6 py-3 font-semibold transition hover:bg-surface">Get in touch</Link>
+      </div>
+      {path ? (
+        <p className="mt-8 text-xs text-faint">Add your content in <code className="rounded bg-surface px-1.5 py-0.5">app{path}/page.tsx</code>.</p>
+      ) : null}
+    </div>
+  );
+}
+`;
+var underDevPage = (page) => `import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { UnderDevelopment } from "@/components/under-development";
+
+export const metadata: Metadata = site.meta({ title: ${JSON.stringify(page.label)}, path: ${JSON.stringify(page.path)}, description: ${JSON.stringify(page.label + " \u2014 coming soon. We're building this page.")} });
+
+export default function Page() {
+  return (
+    <main className="min-h-screen">
+      <UnderDevelopment title={${JSON.stringify(page.label)}} path={${JSON.stringify(page.path)}} />
+    </main>
+  );
+}
+`;
+var dashboardStubPage = (page) => `import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { DashboardShell } from "@/components/dashboard-shell";
+import { UnderDevelopment } from "@/components/under-development";
+
+export const metadata: Metadata = site.meta({ title: ${JSON.stringify(page.label)}, path: ${JSON.stringify(page.path)}, description: ${JSON.stringify(page.label + " \u2014 coming soon.")} });
+
+export default function Page() {
+  return (
+    <DashboardShell title={${JSON.stringify(page.label)}}>
+      <UnderDevelopment title={${JSON.stringify(page.label)}} path={${JSON.stringify(page.path)}} />
+    </DashboardShell>
+  );
+}
+`;
+var uiStore = () => `import { create, persist } from "@lacspace/store";
+
+/** Ephemeral UI state \u2014 e.g. the mobile nav. Not persisted. */
+interface UIState {
+  navOpen: boolean;
+  setNavOpen: (open: boolean) => void;
+  toggleNav: () => void;
+}
+export const useUI = create<UIState>((set) => ({
+  navOpen: false,
+  setNavOpen: (navOpen) => set({ navOpen }),
+  toggleNav: () => set((s) => ({ navOpen: !s.navOpen })),
+}));
+
+/** Whether the announcement bar was dismissed \u2014 persisted to localStorage. */
+interface AnnouncementState {
+  dismissed: boolean;
+  dismiss: () => void;
+}
+export const useAnnouncement = create<AnnouncementState>(
+  persist(
+    (set) => ({
+      dismissed: false,
+      dismiss: () => set({ dismissed: true }),
+    }),
+    { name: "announcement" },
+  ),
+);
+`;
+var statsRoute = () => `import { NextResponse } from "next/server";
+
+// Demo endpoint powering <LiveStats/> (@lacspace/query). Swap in your real data.
+export const dynamic = "force-dynamic";
+
+export function GET() {
+  const jitter = (n: number) => n + Math.floor(Math.random() * n * 0.04);
+  return NextResponse.json({
+    users: jitter(12480),
+    uptime: 99.98,
+    requests: jitter(1_840_000),
+  });
+}
+`;
+var liveStats = () => `"use client";
+
+import { useQuery } from "@lacspace/query";
+
+interface Stats { users: number; uptime: number; requests: number; }
+
+export function LiveStats() {
+  // Shared cache, de-duped requests, and revalidation on window focus.
+  const { data, isLoading } = useQuery("stats", async () => {
+    const res = await fetch("/api/stats");
+    if (!res.ok) throw new Error("Failed to load stats");
+    return (await res.json()) as Stats;
+  });
+
+  const items = [
+    { label: "Active users", value: data ? data.users.toLocaleString() : "\u2014" },
+    { label: "Uptime", value: data ? data.uptime + "%" : "\u2014" },
+    { label: "Requests / mo", value: data ? new Intl.NumberFormat("en", { notation: "compact" }).format(data.requests) : "\u2014" },
+  ];
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-3">
+      {items.map((s) => (
+        <div key={s.label} className="rounded-2xl border border-hairline bg-app p-6 text-center">
+          <div className={"text-3xl font-bold tabular-nums " + (isLoading ? "animate-pulse text-muted" : "")}>{s.value}</div>
+          <div className="mt-1 text-sm text-muted">{s.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+`;
+var builtWithSection = (ctx) => {
+  const count = pagesFor(ctx).length + 1;
+  return `<section className="mx-auto max-w-6xl px-6 py-20">
+        <div className="rounded-3xl border border-hairline bg-surface p-8 sm:p-12">
+          <p className="text-sm font-semibold uppercase tracking-widest text-muted">Live \xB7 @lacspace/query</p>
+          <h2 className="mt-3 text-3xl font-bold">By the numbers</h2>
+          <p className="mt-2 max-w-xl text-muted">Fetched from an internal API route and revalidated on window focus \u2014 a tiny demo of the data layer wired into this starter.</p>
+          <div className="mt-8"><LiveStats /></div>
+          <div className="mt-12 border-t border-hairline pt-8">
+            <p className="text-sm font-semibold uppercase tracking-widest text-muted">Built with the Lacspace React Kit</p>
+            <div className="mt-4 flex flex-wrap gap-2">
+              {["@lacspace/theme", "@lacspace/hooks", "@lacspace/store", "@lacspace/query", "@lacspace/ui", "@lacspace/seo", "@lacspace/og", "@lacspace/form"].map((p) => (
+                <span key={p} className="rounded-full border border-hairline bg-app px-3 py-1 font-mono text-xs text-muted">{p}</span>
+              ))}
+            </div>
+            <p className="mt-5 max-w-2xl text-sm text-muted">Dark mode with no flash, a \u2318K palette, SEO + dynamic OG images, a validated contact form, and ${count}+ pages wired up \u2014 all scaffolded, all yours. <a href="https://lacspace.com/packages" className="text-fg underline underline-offset-4">Explore the packages \u2192</a></p>
+          </div>
+        </div>
+      </section>`;
+};
+var dashboardShell = (ctx) => {
+  const nav = [{ path: "/", label: "Overview" }, ...pagesFor(ctx).filter((p) => p.nav)];
+  return `import Link from "next/link";
+import type { ReactNode } from "react";
+import { ThemeToggle } from "./theme-toggle";
+
+const NAV = [${linkLiteral(nav)}];
+
+export function DashboardShell({ title, subtitle, children }: { title: string; subtitle?: string; children: ReactNode }) {
+  return (
+    <div className="flex min-h-screen">
+      <aside className="hidden w-56 shrink-0 border-r border-hairline p-6 md:block">
+        <div className="mb-8 flex items-center justify-between">
+          <Link href="/" className="text-lg font-black gradient-text">${ctx.template.siteName}</Link>
+          <ThemeToggle />
+        </div>
+        <nav className="space-y-1 text-sm text-muted">
+          {NAV.map((l) => (
+            <Link key={l.href} href={l.href} className="block rounded-lg px-3 py-2 transition hover:bg-surface hover:text-fg">{l.label}</Link>
+          ))}
+        </nav>
+      </aside>
+      <main className="flex-1 p-6 md:p-10">
+        <h1 className="text-2xl font-bold">{title}</h1>
+        {subtitle ? <p className="mt-1 text-muted">{subtitle}</p> : null}
+        <div className="mt-8">{children}</div>
+      </main>
+    </div>
+  );
+}
+`;
+};
+var dashboardHome = (ctx) => `import { site } from "@/lib/site";
+import { DashboardShell } from "@/components/dashboard-shell";
+import { LiveStats } from "@/components/live-stats";
+
+export const metadata = site.meta({ title: "Overview", path: "/" });
+
+export default function Home() {
+  return (
+    <DashboardShell title="Overview" subtitle=${JSON.stringify(ctx.template.siteDescription)}>
+      <LiveStats />
+      <div className="mt-6 rounded-2xl border border-hairline bg-surface p-6">
+        <div className="mb-4 font-semibold">Recent activity</div>
+        <div className="space-y-3">
+          {[1, 2, 3, 4].map((i) => (
+            <div key={i} className="flex items-center justify-between border-b border-hairline pb-3 text-sm">
+              <span className="text-muted">Event #{i}</span>
+              <span className="text-faint">just now</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </DashboardShell>
+  );
+}
+`;
 function parseArgs(list) {
   const a = { yes: false, install: true, git: true, pm: "npm", help: false };
   for (let i = 0; i < list.length; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lacspace-app",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Scaffold a beautiful, production-ready Next.js app from a Lacspace template — portfolio, business, e-commerce, SaaS, blog, docs, dashboard or restaurant — pre-wired with SEO, security headers, sitemap and robots. Like create-next-app, but you start gorgeous.",
   "type": "module",
   "bin": {