create-lacspace-app 1.14.0 → 1.15.0

package/BENCHMARKS.md

@@ -0,0 +1,52 @@
+# Benchmarks
+
+A fair, reproducible head-to-head against `create-next-app`. We benchmark **scaffold time only** (the CLI writing files to disk) — dependency installation is excluded from both, because it's identical `npm install` work that depends on your network, not the tool.
+
+## Method
+
+- Both CLIs invoked **binary-direct** (`node .../dist/index.js`), not via `npx`/`npm create` (which add package-resolution overhead to both, unfairly and unequally).
+- **Scaffold-only**: `--skip-install`/`--no-install` and git disabled on both.
+- Median of **7 runs** on the same machine, back-to-back.
+- `create-next-app` given the closest-matching flags (TypeScript, Tailwind, App Router, import alias).
+
+## Reproduce it yourself
+
+```bash
+mkdir bench && cd bench
+npm i create-next-app@latest create-lacspace-app@latest
+
+CNA=node_modules/create-next-app/dist/index.js
+CLA=node_modules/create-lacspace-app/dist/index.js
+
+# create-lacspace-app — finished app, scaffold only
+for i in 1 2 3 4 5 6 7; do rm -rf cla$i; \
+  /usr/bin/time -p node "$CLA" cla$i --template saas --no-install --no-git -y >/dev/null 2>&1; done
+
+# create-next-app — blank app, scaffold only
+for i in 1 2 3 4 5 6 7; do rm -rf cna$i; \
+  /usr/bin/time -p node "$CNA" cna$i --ts --tailwind --app --no-eslint --no-src-dir \
+  --skip-install --disable-git --no-turbopack --import-alias "@/*" >/dev/null 2>&1; done
+
+# compare what you got
+echo "lacspace files: $(find cla1 -type f | wc -l)  pages: $(find cla1 -name page.tsx | wc -l)"
+echo "next     files: $(find cna1 -type f | wc -l)  pages: $(find cna1 -name page.tsx | wc -l)"
+```
+
+## Results (create-next-app 16.3.4 vs create-lacspace-app 1.14.0)
+
+| Metric | create-next-app | create-lacspace-app |
+| --- | --- | --- |
+| Scaffold time (median of 7) | **0.29s** | **0.15s** |
+| Files written | 18 | 70 |
+| `page.tsx` routes | 1 | 11 |
+| Components | 0 | 37 (incl. a 26-component UI kit) |
+| `sitemap.xml` / `robots.txt` / `/og` | ✗ | ✓ |
+| `lib/site.ts` SEO config / JSON-LD | ✗ | ✓ |
+| PWA manifest / styled 404 | ✗ | ✓ |
+| Templates available | 1 | 8 |
+
+## Honest caveats
+
+- **This is not a "10× faster framework" claim.** Both scaffolders finish in well under a second; the ~1.9× gap is real but small in absolute terms. `create-lacspace-app` is faster largely because it writes precomputed template strings with no interactive prompt round-trips.
+- The **meaningful** difference is *output*: `create-next-app` hands you a single blank page and no SEO; `create-lacspace-app` hands you a running, multi-page, SEO-complete app you can deploy immediately.
+- "Time to a deployable, SEO-ready site" — the metric that actually matters to a developer — is where the gap is large, because with `create-next-app` that work is still ahead of you.

package/README.md

@@ -2,76 +2,120 @@
 
 # create-lacspace-app
 
-**Scaffold a beautiful, production-ready Next.js app in one command — pick a template, start gorgeous.**
+**`create-next-app` gives you a blank page. This gives you a finished, SEO-complete app — in one command.**
 
 [![npm version](https://img.shields.io/npm/v/create-lacspace-app?color=%2316a34a&label=npm)](https://www.npmjs.com/package/create-lacspace-app)
+[![install size](https://img.shields.io/badge/scaffold-~0.15s-16a34a)](#-benchmarks-honest-and-reproducible)
 [![license](https://img.shields.io/npm/l/create-lacspace-app?color=green)](https://github.com/lacspace/npm-packages/blob/main/LICENSE)
 
 </div>
 
-> `create-next-app` gives you a blank page. This gives you a **finished-looking app** — a polished template, styled with Tailwind, already wired with the Lacspace libraries (SEO metadata + JSON-LD, security headers, sitemap & robots). Choose your kind of site and you're running in seconds.
-
-## Use it
-
 ```bash
 npm create lacspace-app@latest my-app
-# or
-npx create-lacspace-app my-app --template business
+# or pick a template up front
+npx create-lacspace-app my-app --template saas
 ```
 
-It asks for a project name and a template, scaffolds the project, installs dependencies and initialises git.
+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 polished, dark-themed, responsive site with **every page filled in**, an SEO stack wired end-to-end, and a **26-component UI kit** you can drop in anywhere.
 
-## Templates
+---
 
-| Key | What you get |
-| --- | --- |
-| **personal** | A sleek personal / developer portfolio with a projects grid |
-| **business** | A professional company / agency site with services + CTA |
-| **ecommerce** | A modern storefront home with a featured product grid |
-| **saas** | A high-converting SaaS landing page with features + pricing |
-| **blog** | An editorial blog / magazine home with a featured post + grid |
-| **docs** | A documentation landing with quick-start + feature cards |
-| **dashboard** | An admin app shell with a sidebar, stat cards and activity |
-| **restaurant** | A warm restaurant / cafe site with a menu and reservations |
+## ⚡ Benchmarks — honest and reproducible
+
+Same machine, both CLIs run **binary-direct, scaffold-only**, median of 7 runs:
+
+| | create-next-app **16.3.4** | create-lacspace-app **1.14** |
+| --- | --- | --- |
+| **Scaffold time** | 0.29s | **0.15s** ⚡ (~1.9× faster) |
+| **Files produced** | 18 | **70** |
+| **Pages** | 1 (blank) | **11** (finished, 5–6 sections each) |
+| **Prebuilt components** | 0 | **37** (incl. a 26-component UI kit) |
+| **Templates** | 1 | **8** |
+| SEO metadata + JSON-LD | ✗ | ✓ |
+| Dynamic OG images (`/og`) | ✗ | ✓ |
+| `sitemap.xml` + `robots.txt` | ✗ | ✓ |
+| Security headers (HSTS/CSP…) | ✗ | ✓ |
+| PWA manifest + styled 404 | ✗ | ✓ |
+| SEO regression CI gate | ✗ | ✓ |
+
+> It's faster *and* you get a finished app instead of a blank one. Don't take our word for it — **[reproduce it in 60 seconds](./BENCHMARKS.md)**.
+
+*(Numbers are scaffold-only. The honest headline isn't the milliseconds — both are sub-second — it's that one produces a blank page and the other produces a running, SEO-complete, multi-page app.)*
+
+---
+
+## 🎁 What you actually get
+
+Every generated app arrives **done**, not started:
 
-Every template is a real Next.js 15 App Router + Tailwind v4 project — dark, modern, responsive, with a gradient accent you can theme.
+- 🧩 **8 templates**, each a complete site — `personal`, `business`, `ecommerce`, `saas`, `blog`, `docs`, `dashboard`, `restaurant`.
+- 📄 **Every page is filled** — home, about, pricing, services, features, FAQ, careers, work/case-studies, collections, integrations, changelog, gallery, reservations, and more. Each is **5–6 real sections** (hero → feature split with illustration → stat band → feature grid → showcase → CTA), personalised with your project name. No "coming soon" stubs.
+- 🎨 **A 26-component UI kit** (`components/ui/`): `Section`, `Hero`, `FeatureCard`, `FeatureSplit`, `Bento`, `PricingTable`, `Testimonial`, `StatBand`, `Timeline`, `Steps`, `Tabs`, `Accordion`, `FAQ`, `Gallery`, `TeamGrid`, `LogoCloud`, `CTABand`, `Newsletter`, `AreaChart`, `Badge`, `Callout`, `Rating`, `Progress`, `Breadcrumbs`, `Avatar` … all theme-aware, dependency-free, server-first.
+- 🔎 **SEO, done for you** — one [`@lacspace/seo`](https://www.npmjs.com/package/@lacspace/seo) `defineSite()` config drives `<title>`, canonical, Open Graph, Twitter, and JSON-LD across every route.
+- ✨ **Dynamic OG images** at `/og` — a social-share card per page, no design tool.
+- 🛡️ **Security headers** (HSTS, CSP, X-Frame-Options…) via [`@lacspace/headers`](https://www.npmjs.com/package/@lacspace/headers).
+- 🗺️ **`sitemap.xml` + `robots.txt`** generated from your config.
+- 🌗 **Dark / light / system theme** with a no-flash script, global header + footer, ⌘K command palette, and a mobile menu — all prewired.
+- 🤖 **An SEO CI gate** (`.github/workflows/seo.yml`) that fails your build the moment SEO regresses.
 
-## A complete, polished project — not a blank page
+Edit `lib/site.ts` (your site config) and `app/page.tsx` — you're off.
 
-Every generated app arrives finished, with the boring-but-essential things done:
+---
+
+## 🧩 Grow your app anytime — `add`
+
+Unlike every other `create-*` tool, `create-lacspace-app` doesn't stop after day one. Drop **prebuilt, themed sections** into an existing app whenever you need them:
+
+```bash
+npx create-lacspace-app add pricing faq testimonials
+```
+
+That writes ready-to-use sections into `components/sections/` (and installs the UI kit automatically if it's missing — so it works in **any** Next.js app, not just ones we scaffolded). Then:
 
-- 🎨 **Beautiful home page** — Tailwind v4, the Inter font, dark theme + a gradient accent
-- 🔎 **SEO** — one [`@lacspace/seo`](https://www.npmjs.com/package/@lacspace/seo) `defineSite()` config drives your `<title>`, canonical, Open Graph, Twitter card and JSON-LD
-- ✨ **Dynamic OG images** — every page auto-generates a social-share card at `/og` (no design tool)
-- 🛡️ **Security headers** — HSTS, CSP, X-Frame-Options and more via [`@lacspace/headers`](https://www.npmjs.com/package/@lacspace/headers)
-- 🗺️ **robots.txt + sitemap.xml** — generated from your config with [`@lacspace/robots`](https://www.npmjs.com/package/@lacspace/robots) & [`@lacspace/sitemap`](https://www.npmjs.com/package/@lacspace/sitemap)
-- 🧩 **A styled 404, a PWA manifest, and `.env.example`** — the finishing touches most starters skip
-- 🎁 **A `WELCOME.md`** that walks you through everything and shows the bonus packages you can drop in
+```tsx
+import { PricingSection } from "@/components/sections/pricing";
+// …drop <PricingSection /> anywhere in your JSX.
+```
+
+**Available sections:** `hero` · `features` · `pricing` · `faq` · `testimonials` · `team` · `stats` · `timeline` · `gallery` · `logos` · `cta` · `bento`. Run `add` with no arguments to list them.
+
+## Templates
+
+| Key | What you get |
+| --- | --- |
+| **personal** | Developer/portfolio — projects, uses, work, about, blog |
+| **business** | Agency/company — services, work (case studies), pricing, team |
+| **ecommerce** | Storefront — shop, cart (working, persisted), collections |
+| **saas** | Landing — features, pricing, integrations, changelog |
+| **blog** | Real Markdown blog — posts, topics, newsletter |
+| **docs** | Docs site — guides, API reference, changelog, search |
+| **dashboard** | App shell — sidebar, stat cards, charts, settings, analytics |
+| **restaurant** | Menu, reservations, gallery, private events |
 
-Edit `lib/site.ts` and `app/page.tsx` and you're off.
+Every template is Next.js 15 App Router + React 19 + Tailwind v4 — dark, modern, responsive, with a themeable gradient accent.
 
 ## Options
 
 | Flag | Meaning |
 | --- | --- |
-| `-t, --template <key>` | `personal` \| `business` \| `ecommerce` \| `saas` |
-| `--pm <npm\|pnpm\|yarn\|bun>` | package manager (default npm) |
+| `-t, --template <key>` | `personal` · `business` · `ecommerce` · `saas` · `blog` · `docs` · `dashboard` · `restaurant` |
+| `--pm <npm\|pnpm\|yarn\|bun>` | package manager (default `npm`) |
 | `--no-install` | skip installing dependencies |
 | `--no-git` | skip git init |
 | `-y, --yes` | accept defaults (needs a project name) |
 
 ## Licensing
 
-Free under the **[Lacspace Free Licence](https://lacspace.com/licenses/lacspace-free-1.0)** — MIT-equivalent freedoms. Use it in personal and commercial projects at no cost; just keep the notice. The apps you generate are yours. See the **[Lacspace Licence Centre](https://lacspace.com/licenses)**.
+Free under the **[Lacspace Free Licence](https://lacspace.com/licenses/lacspace-free-1.0)** — MIT-equivalent freedoms. Use it in personal and commercial projects at no cost; the apps you generate are entirely yours.
 
 ---
 
 <div align="center">
 
-**Part of the Lacspace ecosystem — zero-dependency, isomorphic TypeScript packages.**
+**Part of the Lacspace ecosystem — 60+ zero-dependency, isomorphic TypeScript packages.**
 
-[All packages ↗](https://lacspace.com/packages) · [npm org ↗](https://www.npmjs.com/org/lacspace) · [Licence Centre ↗](https://lacspace.com/licenses) · [GitHub ↗](https://github.com/lacspace/npm-packages)
+[All packages ↗](https://lacspace.com/packages) · [Docs ↗](https://lacspace.com/docs) · [npm org ↗](https://www.npmjs.com/org/lacspace) · [GitHub ↗](https://github.com/lacspace/npm-packages)
 
 </div>
 
-<div align="center"><sub>Built with care by <a href="https://lacspace.com">Lacspace</a> · Lacspace Free Licence · <a href="https://github.com/lacspace/npm-packages">source</a></sub></div>
+<div align="center"><sub>Built with care by <a href="https://lacspace.com">Lacspace</a> · Lacspace Free Licence</sub></div>

package/dist/index.js

@@ -3462,6 +3462,7 @@ ${c("bold", "create-lacspace-app")} \u2014 scaffold a beautiful Next.js app, Lac
 ${c("bold", "Usage")}
   npm create lacspace-app@latest <name> [options]
   npx create-lacspace-app <name> --template <key>
+  npx create-lacspace-app add <section...>   ${c("dim", "# grow an existing app")}
 
 ${c("bold", "Templates")}
 ${TEMPLATES.map((t) => `  ${t.key.padEnd(10)} ${t.description}`).join("\n")}
@@ -3473,9 +3474,272 @@ ${c("bold", "Options")}
   --no-git               Skip git init
   -y, --yes              Accept defaults (needs <name>)
   -h, --help             Show this help
+
+${c("bold", "Add sections to an existing app")}
+  npx create-lacspace-app add pricing faq testimonials
+  ${c("dim", "Drops prebuilt, themed sections into components/sections/ (and the UI kit if missing).")}
 `;
+var SECTIONS = {
+  hero: `import Link from "next/link";
+import { Pill } from "@/components/ui";
+
+export function HeroSection() {
+  return (
+    <section className="mx-auto max-w-4xl px-6 py-28 text-center">
+      <Pill>New</Pill>
+      <h1 className="mt-5 text-5xl font-bold sm:text-6xl">Build something <span className="gradient-text">people love</span></h1>
+      <p className="mx-auto mt-5 max-w-xl text-lg text-muted">A confident headline and one sentence that sells the outcome \u2014 edit me.</p>
+      <div className="mt-8 flex flex-wrap justify-center gap-3">
+        <Link href="/contact" className="rounded-full gradient-bg px-7 py-3 font-semibold text-black transition hover:opacity-90">Get started</Link>
+        <Link href="/about" className="rounded-full border border-hairline px-7 py-3 font-semibold transition hover:bg-surface">Learn more</Link>
+      </div>
+    </section>
+  );
+}
+`,
+  features: `import { Section, FeatureCard } from "@/components/ui";
+
+const ITEMS = [
+  { icon: "\u26A1", title: "Fast", desc: "Server-rendered and instant by default." },
+  { icon: "\u{1F512}", title: "Secure", desc: "Sensible security headers out of the box." },
+  { icon: "\u{1F3A8}", title: "Beautiful", desc: "A polished, themeable design system." },
+  { icon: "\u{1F50E}", title: "SEO-ready", desc: "Metadata, JSON-LD and sitemaps wired." },
+  { icon: "\u{1F4F1}", title: "Responsive", desc: "Looks great on every screen." },
+  { icon: "\u{1F317}", title: "Dark mode", desc: "Light, dark and system \u2014 no flash." },
+];
+
+export function FeaturesSection() {
+  return (
+    <Section eyebrow="Features" title="Everything you need">
+      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {ITEMS.map((f) => <FeatureCard key={f.title} icon={f.icon} title={f.title} desc={f.desc} />)}
+      </div>
+    </Section>
+  );
+}
+`,
+  pricing: `import { Section, PricingTable } from "@/components/ui";
+
+export function PricingSection() {
+  return (
+    <Section eyebrow="Pricing" title="Simple, transparent pricing">
+      <PricingTable tiers={[
+        { name: "Starter", price: "$0", period: "mo", features: ["1 project", "Community support", "Basic analytics"] },
+        { name: "Pro", price: "$29", period: "mo", featured: true, features: ["Unlimited projects", "Priority support", "Advanced analytics", "Custom domain"] },
+        { name: "Scale", price: "Custom", features: ["SSO & SAML", "Dedicated support", "SLA & audit logs"] },
+      ]} />
+    </Section>
+  );
+}
+`,
+  faq: `import { Section, FAQ } from "@/components/ui";
+
+export function FaqSection() {
+  return (
+    <Section className="pt-0">
+      <FAQ title="Frequently asked" items={[
+        { q: "Is it production-ready?", a: "Yes \u2014 server-rendered, SEO-optimized and secure by default." },
+        { q: "Can I customize it?", a: "Completely. Colours, fonts and layout are token-driven." },
+        { q: "Does it support dark mode?", a: "Light, dark and system themes with a no-flash script." },
+        { q: "How do I deploy?", a: "One click to any Node host or Vercel." },
+      ]} />
+    </Section>
+  );
+}
+`,
+  testimonials: `import { Section, Testimonial } from "@/components/ui";
+
+const QUOTES = [
+  { quote: "The smoothest launch we've ever had.", author: "Sam Rivera", role: "Product Lead" },
+  { quote: "Fast, polished and easy to build on.", author: "Jordan Ellis", role: "Founder" },
+  { quote: "The attention to detail shows everywhere.", author: "Priya Nair", role: "Design Director" },
+];
+
+export function TestimonialsSection() {
+  return (
+    <Section eyebrow="Loved by teams" title="Don't just take our word for it">
+      <div className="grid gap-6 md:grid-cols-3">
+        {QUOTES.map((t) => <Testimonial key={t.author} quote={t.quote} author={t.author} role={t.role} />)}
+      </div>
+    </Section>
+  );
+}
+`,
+  team: `import { Section, TeamGrid } from "@/components/ui";
+
+export function TeamSection() {
+  return (
+    <Section eyebrow="The team" title="The people behind it">
+      <TeamGrid members={[
+        { name: "Alex Morgan", role: "Founder & CEO", bio: "Sets the vision and keeps us honest." },
+        { name: "Riya Sharma", role: "Head of Design", bio: "Makes every pixel earn its place." },
+        { name: "Chris Doyle", role: "Lead Engineer", bio: "Ships fast without breaking things." },
+      ]} />
+    </Section>
+  );
+}
+`,
+  stats: `import { Section, StatBand } from "@/components/ui";
+
+export function StatsSection() {
+  return (
+    <Section eyebrow="By the numbers" title="Built to perform">
+      <StatBand stats={[
+        { value: "10k+", label: "Monthly visitors" },
+        { value: "99.9%", label: "Uptime" },
+        { value: "4.9\u2605", label: "Average rating" },
+        { value: "<1s", label: "Load time" },
+      ]} />
+    </Section>
+  );
+}
+`,
+  timeline: `import { Section, Timeline } from "@/components/ui";
+
+export function TimelineSection() {
+  return (
+    <Section eyebrow="Our story" title="How we got here">
+      <div className="mx-auto max-w-2xl">
+        <Timeline items={[
+          { date: "Then", title: "The idea", desc: "It started with a simple frustration." },
+          { date: "Next", title: "First release", desc: "We shipped, and people showed up." },
+          { date: "Now", title: "Growing fast", desc: "Thousands of teams, and counting." },
+        ]} />
+      </div>
+    </Section>
+  );
+}
+`,
+  gallery: `import { Section, Gallery } from "@/components/ui";
+
+export function GallerySection() {
+  return (
+    <Section eyebrow="Gallery" title="A look inside">
+      <Gallery items={[
+        { emoji: "\u{1F5BC}\uFE0F", label: "One" }, { emoji: "\u{1F306}", label: "Two" }, { emoji: "\u{1F3A8}", label: "Three" },
+        { emoji: "\u{1F4F8}", label: "Four" }, { emoji: "\u2728", label: "Five" }, { emoji: "\u{1F31F}", label: "Six" },
+      ]} />
+    </Section>
+  );
+}
+`,
+  logos: `import { Section, LogoCloud } from "@/components/ui";
+
+export function LogosSection() {
+  return (
+    <Section className="pt-0">
+      <LogoCloud label="Trusted by teams at" names={["Northwind", "Globex", "Initech", "Umbrella", "Soylent", "Hooli"]} />
+    </Section>
+  );
+}
+`,
+  cta: `import { CTABand } from "@/components/ui";
+
+export function CtaSection() {
+  return <CTABand title="Ready to get started?" subtitle="Join thousands of teams building with us." ctaLabel="Get started" ctaHref="/contact" />;
+}
+`,
+  bento: `import { Section, Bento } from "@/components/ui";
+
+export function BentoSection() {
+  return (
+    <Section eyebrow="One platform" title="Everything, together">
+      <Bento items={[
+        { icon: "\u26A1", title: "Blazing fast", desc: "Instant page loads, everywhere.", className: "sm:col-span-2" },
+        { icon: "\u{1F512}", title: "Secure", desc: "Locked down by default." },
+        { icon: "\u{1F3A8}", title: "Themeable", desc: "Your brand, one token away." },
+        { icon: "\u{1F4CA}", title: "Insightful", desc: "Know what's working.", className: "sm:col-span-2" },
+      ]} />
+    </Section>
+  );
+}
+`
+};
+function ensureUiKit(root) {
+  const added = [];
+  for (const [rel, content] of Object.entries(uiKitFiles())) {
+    const full = join(root, rel);
+    if (!existsSync(full)) {
+      mkdirSync(dirname(full), { recursive: true });
+      writeFileSync(full, content);
+      added.push(rel);
+    }
+  }
+  return added;
+}
+var pascal = (s) => s.split(/[-_]/).map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("");
+function runAdd(rawNames) {
+  stdout.write(`
+${c("bold", c("magenta", "\u25C6 create-lacspace-app add"))} ${c("dim", "\u2014 drop prebuilt sections into your app")}
+
+`);
+  const root = cwd();
+  if (!existsSync(join(root, "package.json"))) {
+    stdout.write(c("red", "\u2717 No package.json here. Run this inside your Next.js project.\n\n"));
+    exit(1);
+    return;
+  }
+  const wanted = rawNames.filter((n) => !n.startsWith("-")).map((n) => n.toLowerCase());
+  if (wanted.length === 0 || rawNames.includes("--help") || rawNames.includes("-h")) {
+    stdout.write(`Usage: ${c("cyan", "npx create-lacspace-app add <section...>")}
+
+${c("bold", "Available sections")}
+`);
+    stdout.write("  " + Object.keys(SECTIONS).map((k) => c("cyan", k)).join("  ") + "\n");
+    stdout.write(`
+Example: ${c("cyan", "npx create-lacspace-app add pricing faq testimonials")}
+
+`);
+    return;
+  }
+  const unknown = wanted.filter((n) => !(n in SECTIONS));
+  if (unknown.length) stdout.write(c("yellow", `! Unknown: ${unknown.join(", ")} ${c("dim", "(run with no args to list)")}
+`));
+  const toAdd = wanted.filter((n) => n in SECTIONS);
+  if (toAdd.length === 0) {
+    exit(1);
+    return;
+  }
+  const kitAdded = ensureUiKit(root);
+  if (kitAdded.length) stdout.write(`  ${c("green", "\u2714")} Added the UI kit ${c("dim", "(" + kitAdded.length + " components)")}
+`);
+  const created = [];
+  for (const name of toAdd) {
+    const rel = `components/sections/${name}.tsx`;
+    const full = join(root, rel);
+    if (existsSync(full)) {
+      stdout.write(c("yellow", `  ~ ${rel} exists \u2014 skipped
+`));
+      continue;
+    }
+    mkdirSync(dirname(full), { recursive: true });
+    writeFileSync(full, SECTIONS[name]);
+    created.push(name);
+    stdout.write(`  ${c("green", "\u2714")} ${c("dim", "+ " + rel)}
+`);
+  }
+  if (created.length) {
+    stdout.write(`
+${c("bold", "Use them")} \u2014 import into any page:
+`);
+    for (const n of created) stdout.write(`  ${c("cyan", `import { ${pascal(n)}Section } from "@/components/sections/${n}";`)}
+`);
+    stdout.write(`
+  Then drop ${c("cyan", "<" + pascal(created[0]) + "Section />")} into your JSX.
+`);
+    stdout.write(`
+  ${c("dim", "Sections use the @lacspace UI kit + design tokens \u2014 best inside a create-lacspace-app project.")}
+
+`);
+  }
+}
 async function main() {
-  const args = parseArgs(argv.slice(2));
+  const raw = argv.slice(2);
+  if (raw[0] === "add") {
+    runAdd(raw.slice(1));
+    return;
+  }
+  const args = parseArgs(raw);
   if (args.help) {
     stdout.write(HELP + "\n");
     return;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "create-lacspace-app",
-  "version": "1.14.0",
+  "version": "1.15.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": {
     "create-lacspace-app": "dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "BENCHMARKS.md"
   ],
   "scripts": {
     "build": "tsup",