@cimplify/cli 0.2.0

package/templates/storefront-restaurant/app/opensearch.xml/route.ts

@@ -0,0 +1,37 @@
+import { brand } from "@/lib/brand";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+/**
+ * OpenSearch description document — lets browsers add this site to the
+ * address bar's search engine list. When users press Tab after typing the
+ * domain, they get an inline search box that hits /search?q=...
+ */
+export async function GET(): Promise<Response> {
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+  <ShortName>${escapeXml(brand.shortName)}</ShortName>
+  <Description>Search ${escapeXml(brand.name)}</Description>
+  <InputEncoding>UTF-8</InputEncoding>
+  <Url type="text/html" method="get" template="${SITE_URL}/search?q={searchTerms}" />
+  <Url type="application/opensearchdescription+xml" rel="self" template="${SITE_URL}/opensearch.xml" />
+  <moz:SearchForm>${SITE_URL}/search</moz:SearchForm>
+</OpenSearchDescription>
+`;
+  return new Response(xml, {
+    headers: {
+      "Content-Type": "application/opensearchdescription+xml; charset=utf-8",
+      "Cache-Control": "public, max-age=86400",
+    },
+  });
+}
+
+function escapeXml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}

package/templates/storefront-restaurant/app/orders/[id]/page.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+export default async function OrderPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  return (
+    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+      <h1 className="font-serif text-3xl mt-0 mb-3">Thanks — your order is confirmed</h1>
+      <p className="text-muted-foreground">
+        Order <code className="font-mono text-foreground">{id}</code>
+      </p>
+      <p className="mt-6">
+        <Link
+          href="/"
+          className="inline-block px-6 py-3 rounded-full bg-primary text-primary-foreground font-semibold text-sm transition-colors hover:bg-primary/90"
+        >
+          Continue shopping
+        </Link>
+      </p>
+    </section>
+  );
+}

package/templates/storefront-restaurant/app/page.tsx

@@ -0,0 +1,97 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { Hero } from "@/components/hero";
+import { CollectionStrip } from "@/components/collection-strip";
+import { CategoryGrid } from "@/components/category-grid";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `${brand.name} — ${brand.hero.title}`,
+  description: brand.description,
+};
+
+async function getHomeData() {
+  "use cache";
+  cacheTag(tags.collections(), tags.categories(), tags.products());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [colRes, catRes] = await Promise.all([
+    client.catalogue.getCollections(),
+    client.catalogue.getCategories(),
+  ]);
+  const collections = colRes.ok ? colRes.value : [];
+  const categories = catRes.ok ? catRes.value : [];
+
+  const collectionsWithProducts = await Promise.all(
+    collections.map(async (col) => {
+      const r = await client.catalogue.getCollectionProducts(col.id);
+      const items = r.ok
+        ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+        : [];
+      return { collection: col, products: items };
+    }),
+  );
+
+  return {
+    collections: collectionsWithProducts.filter((x) => x.products.length > 0),
+    categories,
+  };
+}
+
+export default async function HomePage() {
+  const { collections, categories } = await getHomeData();
+
+  return (
+    <>
+      <Hero
+        badge={brand.hero.badge}
+        title={brand.hero.title}
+        subtitle={brand.hero.subtitle}
+      />
+      {collections.map(({ collection, products }) => (
+        <Suspense
+          key={collection.id}
+          fallback={<StripSkeleton title={collection.name} />}
+        >
+          <CollectionStrip
+            collection={collection}
+            products={products}
+            collectionHref={`/collections/${collection.slug}`}
+          />
+        </Suspense>
+      ))}
+      <Suspense fallback={<CategoryGridSkeleton />}>
+        <CategoryGrid categories={categories} />
+      </Suspense>
+    </>
+  );
+}
+
+function StripSkeleton({ title }: { title: string }) {
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-12">
+      <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">{title}</h2>
+      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto pb-2">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function CategoryGridSkeleton() {
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-14">
+      <div className="h-8 w-48 bg-muted rounded mb-5 animate-pulse" />
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-32 bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-restaurant/app/privacy/page.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Privacy Policy — ${brand.name}`,
+  description: `How ${brand.name} collects, uses, and protects your personal data.`,
+};
+
+export default function PrivacyPage() {
+  const p = brand.privacy;
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {p.eyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {p.title}
+      </h1>
+      <p className="text-sm text-muted-foreground not-prose mb-10">
+        Last updated: {p.lastUpdated}
+      </p>
+
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {p.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="font-serif text-2xl font-semibold mt-0">{s.heading}</h2>
+            {typeof s.body === "string" ? (
+              <p>{s.body}</p>
+            ) : (
+              <>
+                <p>{s.body.intro}</p>
+                <ul className="list-disc pl-6 space-y-2">
+                  {s.body.bullets.map((b) => (
+                    <li key={b}>{b}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        ))}
+      </section>
+    </article>
+  );
+}

package/templates/storefront-restaurant/app/reservations/page.tsx

@@ -0,0 +1,66 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { ReservationsClient } from "./reservations-client";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Reserve a table — ${brand.name}`,
+  description: "Pick a date, time, and party size. We'll hold your table.",
+};
+
+async function getSeatingOptions(): Promise<Product[]> {
+  "use cache";
+  cacheTag(tags.products());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const r = await client.catalogue.getProducts({ limit: 50 });
+  if (!r.ok) return [];
+  // Reservation options live as service products in the catalogue (e.g.
+  // "Two-top", "Four-top", "Long table"). Filter to type=service.
+  return r.value.items.filter((p) => p.type === "service");
+}
+
+export default async function ReservationsPage() {
+  const options = await getSeatingOptions();
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-14">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Reservations
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,5vw,3rem)] font-semibold mb-3 -tracking-[0.02em]">
+        Hold a table.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-10 max-w-xl">
+        Bookings open 21 days in advance. SMS confirmation within a minute. Free
+        cancellation up to 4 hours before.
+      </p>
+
+      <Suspense fallback={<ReservationsSkeleton />}>
+        <ReservationsClient options={options} />
+      </Suspense>
+    </article>
+  );
+}
+
+function ReservationsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.4fr] gap-8">
+      <div className="space-y-2">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="h-16 bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+      <div className="rounded-2xl border border-border bg-card p-8">
+        <div className="h-5 w-40 bg-muted rounded mb-4 animate-pulse" />
+        <div className="grid grid-cols-3 gap-2">
+          {Array.from({ length: 9 }).map((_, i) => (
+            <div key={i} className="h-10 bg-muted rounded animate-pulse" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-restaurant/app/reservations/reservations-client.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import type { Product } from "@cimplify/sdk";
+import { useCart } from "@cimplify/sdk/react";
+
+const PARTY_SIZES = [2, 3, 4, 5, 6, 8, 10, 12];
+
+/**
+ * Reservation flow. Reservations are modelled as service-type products in
+ * the catalogue (e.g. "Two-top", "Four-top", "Long table"). The user picks
+ * a seating option, date, time, and party size; we add to cart with the
+ * reservation details as item notes; checkout finalises the booking.
+ */
+export function ReservationsClient({ options }: { options: Product[] }) {
+  const router = useRouter();
+  const { addItem } = useCart();
+  const [selectedOption, setSelectedOption] = useState<Product | undefined>(options[0]);
+  const [selectedDate, setSelectedDate] = useState<Date>(() => new Date());
+  const [selectedSlotKey, setSelectedSlotKey] = useState<string | null>(null);
+  const [partySize, setPartySize] = useState<number>(2);
+  const [notes, setNotes] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const dates = useMemo(() => {
+    const now = new Date();
+    return Array.from({ length: 14 }).map((_, i) => {
+      const d = new Date(now);
+      d.setDate(now.getDate() + i);
+      d.setHours(0, 0, 0, 0);
+      return d;
+    });
+  }, []);
+
+  // Restaurant slots: lunch 12–14:30, dinner 18–21:30, every 30 min.
+  const slots = useMemo(() => {
+    const out: { date: Date; label: string; service: "Lunch" | "Dinner" }[] = [];
+    for (let h = 12; h <= 14; h++) {
+      for (const m of [0, 30]) {
+        const d = new Date(selectedDate);
+        d.setHours(h, m, 0, 0);
+        out.push({ date: d, label: `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`, service: "Lunch" });
+      }
+    }
+    for (let h = 18; h <= 21; h++) {
+      for (const m of [0, 30]) {
+        const d = new Date(selectedDate);
+        d.setHours(h, m, 0, 0);
+        out.push({ date: d, label: `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`, service: "Dinner" });
+      }
+    }
+    return out;
+  }, [selectedDate]);
+
+  async function confirm() {
+    if (!selectedOption || !selectedSlotKey) return;
+    setSubmitting(true);
+    try {
+      const when = new Date(selectedSlotKey).toLocaleString();
+      const note = `Party of ${partySize} · ${when}${notes ? ` · ${notes}` : ""}`;
+      await addItem(selectedOption, 1, { notes: note });
+      router.push("/checkout");
+    } catch {
+      setSubmitting(false);
+    }
+  }
+
+  if (options.length === 0) {
+    return (
+      <p className="text-muted-foreground">
+        No bookable seating options yet. Add Service-type products to your catalogue
+        (e.g. "Two-top", "Four-top", "Long table for 12") to enable reservations.
+      </p>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.4fr] gap-8">
+      <div className="space-y-6">
+        <div>
+          <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-3">
+            Seating
+          </p>
+          <div className="space-y-2">
+            {options.map((o) => {
+              const active = selectedOption?.id === o.id;
+              return (
+                <button
+                  key={o.id}
+                  type="button"
+                  onClick={() => setSelectedOption(o)}
+                  className={[
+                    "w-full text-left rounded-2xl border p-4 transition-colors",
+                    active
+                      ? "border-primary bg-primary/5"
+                      : "border-border bg-card hover:border-foreground/30",
+                  ].join(" ")}
+                >
+                  <p className="font-semibold text-sm m-0">{o.name}</p>
+                  {o.description && (
+                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{o.description}</p>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div>
+          <label
+            htmlFor="party"
+            className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground block mb-3"
+          >
+            Party size
+          </label>
+          <div className="grid grid-cols-4 gap-1.5">
+            {PARTY_SIZES.map((p) => {
+              const active = partySize === p;
+              return (
+                <button
+                  key={p}
+                  type="button"
+                  onClick={() => setPartySize(p)}
+                  className={[
+                    "py-2 rounded-md text-sm font-semibold transition-colors",
+                    active
+                      ? "bg-foreground text-background"
+                      : "bg-background border border-border hover:border-foreground",
+                  ].join(" ")}
+                >
+                  {p}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div>
+          <label
+            htmlFor="notes"
+            className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground block mb-3"
+          >
+            Notes (optional)
+          </label>
+          <textarea
+            id="notes"
+            rows={3}
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            placeholder="Allergies, occasion, accessibility…"
+            className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm resize-y"
+          />
+        </div>
+      </div>
+
+      <div className="rounded-2xl border border-border bg-card p-6">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-3">
+          Date
+        </p>
+        <div className="grid grid-cols-7 gap-1.5 mb-6">
+          {dates.map((d) => {
+            const active = d.toDateString() === selectedDate.toDateString();
+            return (
+              <button
+                key={d.toISOString()}
+                type="button"
+                onClick={() => {
+                  setSelectedDate(d);
+                  setSelectedSlotKey(null);
+                }}
+                className={[
+                  "flex flex-col items-center justify-center py-2 rounded-md transition-colors",
+                  active
+                    ? "bg-foreground text-background"
+                    : "bg-background hover:bg-muted text-foreground",
+                ].join(" ")}
+              >
+                <span className="text-[10px] uppercase tracking-wider opacity-60">
+                  {d.toLocaleString(undefined, { weekday: "short" })}
+                </span>
+                <span className="text-base font-semibold tabular-nums">{d.getDate()}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        {(["Lunch", "Dinner"] as const).map((service) => (
+          <div key={service} className="mb-5 last:mb-0">
+            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-2">
+              {service}
+            </p>
+            <div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
+              {slots
+                .filter((s) => s.service === service)
+                .map((s) => {
+                  const key = s.date.toISOString();
+                  const active = selectedSlotKey === key;
+                  return (
+                    <button
+                      key={key}
+                      type="button"
+                      onClick={() => setSelectedSlotKey(key)}
+                      className={[
+                        "py-2 rounded-md text-sm tabular-nums transition-colors",
+                        active
+                          ? "bg-primary text-primary-foreground"
+                          : "bg-background border border-border hover:border-primary",
+                      ].join(" ")}
+                    >
+                      {s.label}
+                    </button>
+                  );
+                })}
+            </div>
+          </div>
+        ))}
+
+        <button
+          type="button"
+          onClick={confirm}
+          disabled={!selectedOption || !selectedSlotKey || submitting}
+          className="w-full mt-4 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {submitting
+            ? "Confirming…"
+            : selectedSlotKey
+              ? `Reserve for ${partySize} on ${new Date(selectedSlotKey).toLocaleDateString()} at ${new Date(selectedSlotKey).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}`
+              : "Pick a slot to reserve"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-restaurant/app/returns/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.returns.title} — ${brand.name}`,
+};
+
+export default function ReturnsPage() {
+  return <PolicyPage policy={brand.returns} />;
+}

package/templates/storefront-restaurant/app/robots.ts

@@ -0,0 +1,18 @@
+import type { MetadataRoute } from "next";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: ["/cart", "/checkout", "/orders/", "/api/"],
+      },
+    ],
+    sitemap: `${SITE_URL}/sitemap.xml`,
+    host: SITE_URL,
+  };
+}

package/templates/storefront-restaurant/app/search/page.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { SearchClient } from "./search-client";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Search — ${brand.name}`,
+  description: `Search ${brand.name} — products, collections, categories.`,
+};
+
+export default function SearchPage() {
+  return (
+    <article className="max-w-7xl mx-auto px-6 sm:px-8 py-10">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Search
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Find anything.
+      </h1>
+      <Suspense fallback={<SearchSkeleton />}>
+        <SearchClient />
+      </Suspense>
+    </article>
+  );
+}
+
+function SearchSkeleton() {
+  return (
+    <div>
+      <div className="h-12 w-full max-w-xl bg-muted rounded animate-pulse mb-8" />
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div key={i} className="aspect-[4/3] bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-restaurant/app/search/search-client.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SearchPage } from "@cimplify/sdk/react";
+
+export function SearchClient() {
+  return <SearchPage />;
+}

package/templates/storefront-restaurant/app/shipping/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.shipping.title} — ${brand.name}`,
+  description: brand.shipping.sections[0]?.body
+    ? typeof brand.shipping.sections[0].body === "string"
+      ? brand.shipping.sections[0].body
+      : brand.shipping.sections[0].body.intro
+    : undefined,
+};
+
+export default function ShippingPage() {
+  return <PolicyPage policy={brand.shipping} />;
+}

package/templates/storefront-restaurant/app/shop/page.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags } from "@cimplify/sdk/server";
+import { ShopClient } from "./shop-client";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Shop — ${brand.name}`,
+  description: brand.description,
+};
+
+async function getShopData() {
+  "use cache";
+  cacheTag(tags.products(), tags.categories());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [p, c] = await Promise.all([
+    client.catalogue.getProducts({ limit: 50 }),
+    client.catalogue.getCategories(),
+  ]);
+  return {
+    products: p.ok ? p.value.items : [],
+    categories: c.ok ? c.value : [],
+  };
+}
+
+export default async function ShopPage() {
+  const { products, categories } = await getShopData();
+  return <ShopClient products={products} categories={categories} />;
+}

package/templates/storefront-restaurant/app/shop/shop-client.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { CataloguePage } from "@cimplify/sdk/react";
+import type { Category, Product } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/**
+ * Client island for the shop page. Server-side fetches all products and
+ * categories (cached via `'use cache'` in `app/shop/page.tsx`), then hands
+ * them to `<CataloguePage>` which owns the interactive filter / sort state.
+ */
+export function ShopClient({
+  products,
+  categories,
+}: {
+  products: Product[];
+  categories: Category[];
+}) {
+  return (
+    <CataloguePage
+      title="The Menu"
+      products={products}
+      categories={categories}
+      renderCard={(p) => <StoreProductCard product={p} />}
+    />
+  );
+}

package/templates/storefront-restaurant/app/signup/page.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Create an account — ${brand.name}`,
+  description: brand.account.signupSubtitle,
+};
+
+/**
+ * Cimplify Link handles sign-up inside the `<CimplifyAccount>` iframe.
+ * We bounce /signup to /account; the iframe shows the create-account UI
+ * for visitors with no session.
+ */
+export default function SignupPage(): never {
+  redirect("/account");
+}