create-lacspace-app 1.14.1 → 1.16.0

package/README.md

@@ -62,6 +62,23 @@ Edit `lib/site.ts` (your site config) and `app/page.tsx` — you're off.
 
 ---
 
+## 🧩 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:
+
+```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 |
@@ -82,11 +99,24 @@ Every template is Next.js 15 App Router + React 19 + Tailwind v4 — dark, moder
 | Flag | Meaning |
 | --- | --- |
 | `-t, --template <key>` | `personal` · `business` · `ecommerce` · `saas` · `blog` · `docs` · `dashboard` · `restaurant` |
+| `--theme <name\|hex>` | accent gradient — a preset, a `"#hex"`, or `"from,to"` (see below) |
 | `--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) |
 
+### 🎨 Themes
+
+Recolour the whole app — gradient, OG images, favicon and PWA theme colour — at scaffold time with `--theme`:
+
+```bash
+npx create-lacspace-app my-app --template saas --theme lacspace   # a named preset
+npx create-lacspace-app my-app --theme "#ff6a00"                   # one colour → auto gradient
+npx create-lacspace-app my-app --theme "#0bb9d9,#7c3aed"           # an exact from → to pair
+```
+
+**Presets:** `lacspace` · `violet` · `indigo` · `blue` · `cyan` · `sky` · `teal` · `emerald` · `green` · `lime` · `amber` · `orange` · `red` · `rose` · `pink` · `fuchsia` · `purple` · `slate` · `sunset` · `ocean` · `forest` · `aurora` · `gold`. Give a single hex and the CLI derives a matching second stop for you.
+
 ## 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; the apps you generate are entirely yours.

package/dist/index.js

@@ -35,11 +35,11 @@ var pkgJson = (ctx) => JSON.stringify({
     next: "^15.1.0",
     react: "^19.0.0",
     "react-dom": "^19.0.0",
-    "@lacspace/seo": "^1.6.2",
+    "@lacspace/seo": "^1.7.0",
     "@lacspace/headers": "^1.1.2",
-    "@lacspace/robots": "^1.2.1",
-    "@lacspace/sitemap": "^1.1.1",
-    "@lacspace/og": "^1.0.1",
+    "@lacspace/robots": "^1.3.0",
+    "@lacspace/sitemap": "^1.2.0",
+    "@lacspace/og": "^1.1.0",
     "@lacspace/ui": "^1.0.1",
     "@lacspace/form": "^1.0.1",
     "@lacspace/validate": "^1.0.1",
@@ -3450,32 +3450,381 @@ function parseArgs(list) {
     else if (arg === "--no-install") a.install = false;
     else if (arg === "--no-git") a.git = false;
     else if (arg === "--pm") a.pm = next();
+    else if (arg === "--theme" || arg === "--accent") a.theme = next();
     else if (arg === "-h" || arg === "--help") a.help = true;
     else if (arg.startsWith("--template=")) a.template = arg.slice(11);
+    else if (arg.startsWith("--theme=")) a.theme = arg.slice(8);
+    else if (arg.startsWith("--accent=")) a.theme = arg.slice(9);
     else if (!arg.startsWith("-") && !a.name) a.name = arg;
   }
   return a;
 }
+var THEMES = {
+  lacspace: ["#0bb9d9", "#7c3aed"],
+  violet: ["#7c3aed", "#ec4899"],
+  indigo: ["#6366f1", "#a855f7"],
+  blue: ["#2563eb", "#06b6d4"],
+  cyan: ["#0891b2", "#22d3ee"],
+  sky: ["#0ea5e9", "#38bdf8"],
+  teal: ["#0d9488", "#22c55e"],
+  emerald: ["#10b981", "#14b8a6"],
+  green: ["#16a34a", "#4ade80"],
+  lime: ["#65a30d", "#a3e635"],
+  amber: ["#f59e0b", "#f97316"],
+  orange: ["#ea580c", "#f59e0b"],
+  red: ["#dc2626", "#f97316"],
+  rose: ["#e11d48", "#fb7185"],
+  pink: ["#db2777", "#f472b6"],
+  fuchsia: ["#c026d3", "#f0abfc"],
+  purple: ["#9333ea", "#d946ef"],
+  slate: ["#475569", "#94a3b8"],
+  sunset: ["#f97316", "#db2777"],
+  ocean: ["#0ea5e9", "#6366f1"],
+  forest: ["#16a34a", "#65a30d"],
+  aurora: ["#22d3ee", "#a855f7"],
+  gold: ["#d97706", "#facc15"]
+};
+var normHex = (h) => {
+  let s = h.trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(s)) s = s.split("").map((ch) => ch + ch).join("");
+  return /^[0-9a-fA-F]{6}$/.test(s) ? "#" + s.toLowerCase() : null;
+};
+var hexToRgb = (h) => {
+  const n = parseInt(h.slice(1), 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+var rgbToHex = (r, g, b) => "#" + [r, g, b].map((x) => Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, "0")).join("");
+var rgbToHsl = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    h /= 6;
+  }
+  return [h * 360, s, l];
+};
+var hslToRgb = (h, s, l) => {
+  h = (h % 360 + 360) % 360 / 360;
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
+  const hue = (t) => {
+    t = (t + 1) % 1;
+    return t < 1 / 6 ? p + (q - p) * 6 * t : t < 1 / 2 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p;
+  };
+  return [hue(h + 1 / 3) * 255, hue(h) * 255, hue(h - 1 / 3) * 255];
+};
+var hexPair = (hex) => {
+  const [h, s, l] = rgbToHsl(...hexToRgb(hex));
+  const [r2, g2, b2] = hslToRgb(h + 28, Math.min(1, s + 0.05), Math.min(0.72, l + 0.1));
+  return [hex, rgbToHex(r2, g2, b2)];
+};
+function resolveAccent(theme) {
+  if (!theme) return null;
+  const key = theme.toLowerCase().trim();
+  if (THEMES[key]) return THEMES[key];
+  if (key.includes(",")) {
+    const [a, b] = key.split(",").map((p) => normHex(p));
+    if (a && b) return [a, b];
+    if (a) return hexPair(a);
+    return null;
+  }
+  const one = normHex(key);
+  return one ? hexPair(one) : null;
+}
 var HELP = `
 ${c("bold", "create-lacspace-app")} \u2014 scaffold a beautiful Next.js app, Lacspace-wired
 
 ${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")}
 
 ${c("bold", "Options")}
   -t, --template <key>   Template (${TEMPLATES.map((t) => t.key).join(" | ")})
+  --theme <name|hex>     Accent: a preset, a "#hex", or "from,to" (e.g. --theme lacspace)
   --pm <npm|pnpm|yarn|bun>  Package manager (default npm)
   --no-install           Skip installing dependencies
   --no-git               Skip git init
   -y, --yes              Accept defaults (needs <name>)
   -h, --help             Show this help
+
+${c("bold", "Themes")} ${c("dim", "(--theme)")}
+  ${Object.keys(THEMES).join(" \xB7 ")}
+  ${c("dim", 'or a custom colour: --theme "#ff6a00"  \xB7  --theme "#0bb9d9,#7c3aed"')}
+
+${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;
@@ -3506,7 +3855,15 @@ ${c("green", "?")} Template ${c("dim", "(1)")}: `)).trim() || "1";
     }
   }
   name = name ?? "my-app";
-  const template = TEMPLATES.find((t) => t.key === templateKey) ?? TEMPLATES[0];
+  const base = TEMPLATES.find((t) => t.key === templateKey) ?? TEMPLATES[0];
+  const accent = resolveAccent(args.theme);
+  if (args.theme && !accent) {
+    stdout.write(c("yellow", `  ! Unknown theme "${args.theme}" \u2014 using the ${base.key} default. Try a preset (${Object.keys(THEMES).slice(0, 6).join(", ")}\u2026) or a hex like "#ff6a00".
+`));
+  }
+  const template = accent ? { ...base, accent } : base;
+  if (accent) stdout.write(`  ${c("dim", "theme")} ${c("bold", args.theme)} ${c("dim", `\u2192 ${accent[0]} \u2192 ${accent[1]}`)}
+`);
   const dir = resolve(cwd(), name);
   const projectName = basename(dir).toLowerCase().replace(/[^a-z0-9-_]/g, "-");
   if (existsSync(dir) && readdirSync(dir).length > 0) {

package/package.json

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