@cimplify/cli 0.2.8 → 0.3.1

package/templates/storefront-pharmacy/AGENTS.md

@@ -0,0 +1,118 @@
+# AGENTS.md — Pharmacy storefront template
+
+If you are an AI agent (Claude, Cursor, Aider, devin, …) working on this storefront, **start here.**
+
+## TL;DR for rebranding
+
+1. **Edit `lib/brand.ts`** — every visible string lives here.
+2. **Edit `app/globals.css`** — `@theme { … }` block for palette + radius + font references.
+3. **Edit `.env.local`** — `NEXT_PUBLIC_CIMPLIFY_API_URL`, `NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY`, `NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID`, `NEXT_PUBLIC_SITE_URL`.
+
+## Aesthetic
+
+- **Inter + JetBrains Mono** — clean clinical sans, mono-spaced labels for trust.
+- **Soft white + calm teal accent** — medical without being sterile.
+- **Sharp corners**: `0.5rem` — modern community pharmacy.
+- **`Pharmacy`** is the Schema.org `@type` (set in `brand.schemaType`).
+
+## Page surface
+
+```
+app/
+  page.tsx                       Multi-section home — featured hero, trust bar, category tiles,
+                                  pharmacist-consult promo, "Just in stock" grid, brand strip,
+                                  collections, prescription-upload CTA, best sellers, newsletter
+  shop/page.tsx                  SDK <CataloguePage/> with custom hero
+  search/page.tsx                Search (SDK <SearchPage/>)
+  collections/[slug]/page.tsx    Collection landing
+  categories/[slug]/page.tsx     Category landing
+  products/[slug]/page.tsx       Full product detail page with prescription-upload fields
+                                  (auto-rendered from product.input_fields)
+
+  cart/page.tsx                  SDK <CartPage/>
+  checkout/page.tsx              SDK <CheckoutPage/>
+  orders/[id]/page.tsx           Post-checkout confirmation
+
+  account/page.tsx               <CimplifyAccount /> (iframe)
+  account/orders/page.tsx        <CimplifyAccount section="orders" />
+  account/addresses/page.tsx     <CimplifyAccount section="addresses" />
+  account/settings/page.tsx      <CimplifyAccount section="settings" />
+  login/page.tsx, signup/page.tsx  redirects → /account
+
+  contact/page.tsx               Pharmacist consult form
+  track-order/page.tsx           Guest lookup → /orders/[id]
+
+  about/page.tsx, faq/page.tsx   Brand pages
+  shipping/page.tsx, returns/page.tsx, accessibility/page.tsx  Standalone policies
+  terms/page.tsx, privacy/page.tsx
+
+  sitemap-page/page.tsx          HTML sitemap
+  sitemap.ts, robots.ts          XML sitemap, robots.txt
+  llms.txt/route.ts              LLM-friendly site index
+  opensearch.xml/route.ts        Browser search description
+  error.tsx, not-found.tsx       Global boundaries
+```
+
+## File ↔ brand-field map
+
+| File | Reads from `brand` |
+|---|---|
+| `app/layout.tsx` | identity, contact, socials, schemaType (Pharmacy JSON-LD) |
+| `app/page.tsx` | `brand.hero`, `brand.trustItems`, `brand.brandStrip`, `brand.promo`, `brand.tradeIn` (repurposed as prescription CTA), `brand.newsletter` |
+| `app/about/page.tsx` | `brand.about` |
+| `app/faq/page.tsx` | `brand.faq` |
+| `app/terms/page.tsx` | `brand.terms` |
+| `app/privacy/page.tsx` | `brand.privacy` |
+| `app/shipping/page.tsx` | `brand.shipping` (delivery + pickup + cold-chain copy) |
+| `app/returns/page.tsx` | `brand.returns` |
+| `app/accessibility/page.tsx` | `brand.accessibility` |
+| `app/contact/page.tsx` | `brand.contactPage`, `brand.contact` |
+| `app/track-order/page.tsx` | `brand.trackOrder` |
+| `app/account/*/page.tsx` | `brand.account` (Cimplify Link iframe owns the UI) |
+| `app/products/[slug]/page.tsx` | `brand.name`, `brand.currency` (Product JSON-LD: brand, offer, availability) |
+| `app/llms.txt/route.ts` | `brand.llms`, contact, currency |
+| `app/opensearch.xml/route.ts` | `brand.shortName`, `brand.name` |
+| `components/header.tsx` | `brand.shortName`, `brand.microTag`, `brand.header.nav` |
+| `components/footer.tsx` | `brand.footer`, `brand.contact`, `brand.socials` |
+| `components/promo-banner.tsx` | `brand.promo` (renders nothing if absent) |
+| `components/trade-in-cta.tsx` | `brand.tradeIn` (repurposed as prescription CTA; renders nothing if absent) |
+| `components/brand-marquee.tsx` | `brand.brandStrip` |
+| `components/trust-bar.tsx` | `brand.trustItems` |
+| `components/newsletter.tsx` | `brand.newsletter` |
+
+## Pharmacy-specific notes
+
+- **Prescription / consent / DOB inputs**: prescription-required products (e.g. `amoxicillin-rx`, `insulin-rx`, `vaccination-consent`) ship with `input_fields` on the catalogue payload. The SDK `<ProductPage/>` reads `product.input_fields` and auto-renders file upload, consent signature, age checkbox, and DOB inputs. The payload is forwarded with the cart line — your backend (or the mock) decides whether to accept the order before allowing checkout.
+- **`brand.tradeIn` is the prescription-upload CTA.** The `trade-in-cta.tsx` component is unchanged from the retail template — only the brand copy changed. If you'd rather use a dedicated component, eject it and rename.
+- **Schema.org `@type`** is `Pharmacy` — semantically meaningful for Google Business and JSON-LD parsers. If your business is broader (clinic + pharmacy), switch to `LocalBusiness`.
+- **Controlled substances** (Schedule II) usually require in-person collection. The mock doesn't enforce this — your backend or a Cimplify rule should reject those cart lines from delivery-method=ship orders.
+
+## Known TODOs
+
+- Contact form + newsletter signup currently fake their submit. Wire `client.support.sendMessage(...)` for contact and a real list provider for newsletter.
+- Trust-bar / brand-marquee imagery / wordmarks are placeholders — swap for the real partners you're authorised to display.
+
+## Mock seed
+
+Wired to `--seed pharmacy` (Wellspring Pharmacy). Edit `dev:mock` in `package.json` to preview another seed.
+
+## Customizing SDK components
+
+For anything beyond `lib/brand.ts` + `app/globals.css`, lean on the SDK's prebuilt components rather than reinvent. **Especially for product customization** (variants, add-ons, prescription inputs, services with scheduling) — the SDK already gets price math, axis matching, input-field rendering, and cart payload contracts right. Default to ejecting and restyling:
+
+```bash
+cimplify add cart-drawer
+cimplify add variant-selector
+cimplify add product-page
+```
+
+Then edit the local copy. **Don't change the cart payload shape** unless you're also touching the SDK mock + backend lens. Full ejection rules and the customizer contract are in the SDK-level [`AGENTS.md`](../../AGENTS.md) → "Don't reinvent product customization".
+
+## Quick start
+
+```bash
+bun install
+bun dev
+```
+
+Open <http://localhost:3000>.

package/templates/storefront-pharmacy/CLAUDE.md

@@ -0,0 +1,22 @@
+# CLAUDE.md
+
+This project was scaffolded from a Cimplify storefront template (`cimplify init`).
+
+## Read these first
+
+- **`AGENTS.md`** at the project root — the file ↔ `brand.X` field map for *this template's* industry, plus the architectural rules.
+- **`.claude/skills/cimplify-storefront/SKILL.md`** — the playbook for common tasks (rebrand, add a section, wire a Server Action, deploy, eject a component). Invoke it whenever you're asked to change content, palette, copy, or routing.
+
+## The two-line summary
+
+1. **Edit `lib/brand.ts`** for any visible string.
+2. **Edit `app/globals.css` `@theme` block** for any palette / radius / font change.
+
+That covers ~95% of what merchants ask for. For anything else, follow the `cimplify-storefront` skill.
+
+## Don't do
+
+- Hardcode strings in pages or components.
+- Disable `cacheComponents: true` in `next.config.ts`.
+- Use `unstable_cache` — Next 16's canonical primitive is `'use cache'`.
+- Run `bun test` (Bun's `vi` shim is incomplete) — use `bun run test:run`.

package/templates/storefront-pharmacy/README.md

@@ -0,0 +1,87 @@
+# __STOREFRONT_NAME__
+
+A Cimplify storefront scaffolded from the **pharmacy** template — Next.js 16 (App Router), React 19, Tailwind v4. Clinical white + calm teal palette, Inter + JetBrains Mono typography, trustworthy community-pharmacy aesthetic.
+
+## Run
+
+```bash
+bun install
+bun dev
+```
+
+Two things start in parallel:
+
+- `cimplify-mock --seed pharmacy` — the Cimplify mock API on `http://127.0.0.1:8787`, seeded with Wellspring Pharmacy.
+- `next dev` — this storefront on `http://localhost:3000`.
+
+Open the storefront in your browser. Edit `app/page.tsx` to start customising.
+
+## Structure
+
+```
+app/
+  layout.tsx              # root layout, fonts, providers, header/footer/modal
+  page.tsx                # home
+  shop/page.tsx           # full catalogue (SDK <CataloguePage/>)
+  collections/[slug]/     # collection landing
+  categories/[slug]/      # category landing
+  cart/page.tsx           # SDK <CartPage/>
+  checkout/page.tsx       # SDK <CheckoutPage/>
+  orders/[id]/page.tsx    # post-checkout thank-you
+  about, faq, terms, privacy
+  globals.css             # Tailwind import + theme tokens
+components/
+  providers.tsx           # CimplifyProvider client wrapper
+  header.tsx, footer.tsx, hero.tsx
+  store-product-card.tsx  # SDK <ProductCard/>
+  trade-in-cta.tsx        # repurposed as a prescription-upload CTA
+  collection-strip.tsx    # horizontal product strip
+  category-tiles.tsx      # SDK category grid
+lib/
+  brand.ts                # every visible string (pharmacy copy)
+  cart.ts                 # useCartCount() for the header pill
+```
+
+## Pharmacy-specific behaviour
+
+- Prescription-required products (insulin, amoxicillin, etc.) ship with `input_fields` on the catalogue payload — the SDK product page renders prescription upload + consent signature + DOB inputs automatically. Look at how `paracetamol`, `amoxicillin-rx`, and `baby-formula` differ in the mock seed.
+- `brand.tradeIn` is repurposed as the "Send us your script" CTA on the home page.
+- `Pharmacy` schema.org `@type` is set in `brand.schemaType` so JSON-LD on every page identifies the business correctly.
+
+## Switch the seed
+
+This template is wired to the `pharmacy` seed. To preview a different industry without re-scaffolding:
+
+```bash
+cimplify-mock --seed restaurant   # Mama's Kitchen
+cimplify-mock --seed services     # Serene Spa
+cimplify-mock --seed grocery      # FreshMart
+cimplify-mock --seed retail       # Currents Electronics
+```
+
+Update `NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID` in `.env.local` to match the seeded business.
+
+For a fresh scaffold with another design altogether:
+
+```bash
+cimplify init my-store --template bakery
+cimplify init my-store --template restaurant
+cimplify init my-store --template services
+cimplify init my-store --template grocery
+cimplify init my-store --template fashion
+cimplify init my-store --template retail
+```
+
+## Go live
+
+```diff
+# .env.local
+- NEXT_PUBLIC_CIMPLIFY_API_URL=http://127.0.0.1:8787
++ NEXT_PUBLIC_CIMPLIFY_API_URL=https://api.cimplify.io
+- NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY=mock-dev
++ NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY=<your tenant key>
+- NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID=bus_wellspring_pharmacy
++ NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID=<your business id>
+```
+
+Deploy with `cimplify deploy --prod` after linking the project. See [`cimplify` CLI docs](https://docs.cimplify.io/cli/deploy). `next.config.ts` already whitelists the SDK image hosts under `images.remotePatterns`.

package/templates/storefront-pharmacy/__tests__/brand.test.ts

@@ -0,0 +1,4 @@
+import { createBrandSuite } from "@cimplify/sdk/testing/suite";
+import { brand } from "../lib/brand";
+
+createBrandSuite({ brand });

package/templates/storefront-pharmacy/__tests__/cart-flow.test.ts

@@ -0,0 +1,4 @@
+import { createCartFlowSuite } from "@cimplify/sdk/testing/suite";
+import { brand } from "../lib/brand";
+
+createCartFlowSuite({ seed: brand.mock.seed, businessId: brand.mock.businessId });

package/templates/storefront-pharmacy/__tests__/contract.test.ts

@@ -0,0 +1,4 @@
+import { createContractSuite } from "@cimplify/sdk/testing/suite";
+import { brand } from "../lib/brand";
+
+createContractSuite({ seed: brand.mock.seed });

package/templates/storefront-pharmacy/app/.well-known/ucp/route.ts

@@ -0,0 +1,65 @@
+import { NextResponse } from "next/server";
+
+/**
+ * UCP (Universal Commerce Protocol) manifest discovery endpoint.
+ *
+ * Agents — Claude, ChatGPT, Gemini, MCP clients — probe
+ * `https://<your-domain>/.well-known/ucp` to learn what commerce
+ * capabilities your storefront supports. We forward the request to
+ * Cimplify, which returns the canonical manifest; the response body
+ * tells agents to make subsequent UCP calls directly to
+ * `api.cimplify.io/ucp/v1/<handle>/*` (no per-request proxy here).
+ *
+ * Edge-cached for an hour because capabilities change rarely.
+ */
+const UCP_API_BASE =
+  process.env.NEXT_PUBLIC_CIMPLIFY_API_URL || "https://api.cimplify.io";
+
+
+export async function GET() {
+  const businessHandle = process.env.NEXT_PUBLIC_CIMPLIFY_BUSINESS_HANDLE;
+
+  if (!businessHandle) {
+    return NextResponse.json(
+      {
+        error: "NEXT_PUBLIC_CIMPLIFY_BUSINESS_HANDLE not set",
+        remediation:
+          "Set NEXT_PUBLIC_CIMPLIFY_BUSINESS_HANDLE in .env.local (and your deployment env) to your business handle.",
+      },
+      { status: 500 },
+    );
+  }
+
+  try {
+    const response = await fetch(
+      `${UCP_API_BASE}/ucp/v1/${businessHandle}/manifest`,
+      {
+        headers: { "Content-Type": "application/json" },
+        next: { revalidate: 3600 },
+      },
+    );
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: `Upstream UCP manifest fetch failed: ${response.status}` },
+        { status: response.status },
+      );
+    }
+
+    const manifest = await response.json();
+    return NextResponse.json(manifest, {
+      headers: {
+        "Content-Type": "application/json",
+        "Cache-Control": "public, max-age=3600, s-maxage=3600",
+      },
+    });
+  } catch (error) {
+    return NextResponse.json(
+      {
+        error: "Failed to fetch UCP manifest",
+        detail: error instanceof Error ? error.message : String(error),
+      },
+      { status: 500 },
+    );
+  }
+}

package/templates/storefront-pharmacy/app/about/page.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `About — ${brand.name}`,
+  description: brand.description,
+};
+
+export default function AboutPage() {
+  const a = brand.about;
+  // Title supports a single \n for a hard line break.
+  const titleParts = a.title.split("\n");
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+        {a.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-6 -tracking-[0.025em] leading-tight">
+        {titleParts.map((line, i) => (
+          <span key={i}>
+            {line}
+            {i < titleParts.length - 1 && <br />}
+          </span>
+        ))}
+      </h1>
+      <div className="prose prose-lg max-w-none space-y-5 text-foreground/90 leading-relaxed">
+        {a.paragraphs.map((p, i) => (
+          <p key={i}>{p}</p>
+        ))}
+        {a.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-10 mb-3 -tracking-[0.02em]">
+              {s.heading}
+            </h2>
+            <p>{s.body}</p>
+          </div>
+        ))}
+      </div>
+    </article>
+  );
+}

package/templates/storefront-pharmacy/app/accessibility/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.accessibility.title} — ${brand.name}`,
+};
+
+export default function AccessibilityPage() {
+  return <PolicyPage policy={brand.accessibility} />;
+}

package/templates/storefront-pharmacy/app/account/addresses/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Addresses — ${brand.name}`,
+};
+
+export default function AddressesPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your addresses
+      </h1>
+      <AccountIframe section="addresses" />
+    </article>
+  );
+}

package/templates/storefront-pharmacy/app/account/orders/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Orders — ${brand.name}`,
+};
+
+export default function OrdersPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your orders
+      </h1>
+      <AccountIframe section="orders" />
+    </article>
+  );
+}

package/templates/storefront-pharmacy/app/account/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Account — ${brand.name}`,
+  description: brand.account.signupSubtitle,
+};
+
+export default function AccountPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        {brand.account.accountEyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        {brand.account.accountTitle}
+      </h1>
+      <AccountIframe />
+    </article>
+  );
+}

package/templates/storefront-pharmacy/app/account/settings/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Settings — ${brand.name}`,
+};
+
+export default function SettingsPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Settings
+      </h1>
+      <AccountIframe section="settings" />
+    </article>
+  );
+}

package/templates/storefront-pharmacy/app/cart/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CartPage as SdkCartPage } from "@cimplify/sdk/react";
+
+export default function CartPage() {
+  const router = useRouter();
+  return <SdkCartPage onCheckout={() => router.push("/checkout")} />;
+}

package/templates/storefront-pharmacy/app/categories/[slug]/listing-client.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ProductGrid } from "@cimplify/sdk/react";
+import type { Product } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/**
+ * Client island for the category listing. Receives server-fetched products
+ * as props (serializable) and owns the `renderCard` function.
+ */
+export function ListingClient({ products }: { products: Product[] }) {
+  return (
+    <ProductGrid
+      products={products}
+      emptyMessage="No products in this category yet."
+      renderCard={(p) => <StoreProductCard product={p} />}
+    />
+  );
+}

package/templates/storefront-pharmacy/app/categories/[slug]/page.tsx

@@ -0,0 +1,130 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { cacheTag, cacheLife } from "next/cache";
+import {
+  getServerClient,
+  tags,
+  type Category,
+  type Product,
+} from "@cimplify/sdk/server";
+import { ListingClient } from "./listing-client";
+import { brand } from "@/lib/brand";
+
+interface CategoryData {
+  category: Category;
+  products: Product[];
+}
+
+async function getCategory(slug: string): Promise<CategoryData | null> {
+  "use cache";
+  cacheTag(tags.categories());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const catRes = await client.catalogue.getCategoryBySlug(slug);
+  if (!catRes.ok) return null;
+
+  cacheTag(tags.category(catRes.value.id), tags.categoryProducts(catRes.value.id));
+  const r = await client.catalogue.getCategoryProducts(catRes.value.id);
+  const products = r.ok
+    ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
+    : [];
+  return { category: catRes.value, products };
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const data = await getCategory(slug);
+  if (!data) return {};
+  return {
+    title: `${data.category.name} — ${brand.name}`,
+    description: data.category.description ?? undefined,
+  };
+}
+
+export default async function CategoryPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  return (
+    <Suspense fallback={<CategorySkeleton />}>
+      <CategoryContent params={params} />
+    </Suspense>
+  );
+}
+
+async function CategoryContent({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const data = await getCategory(slug);
+  if (!data) notFound();
+
+  const { category, products } = data;
+  return (
+    <>
+      <section className="bg-foreground text-background relative overflow-hidden">
+        <div className="absolute inset-0 opacity-[0.04] pointer-events-none [background-image:radial-gradient(circle_at_2px_2px,white_1px,transparent_0)] [background-size:32px_32px]" />
+        <div className="relative max-w-7xl mx-auto px-6 sm:px-8 py-12 sm:py-14">
+          <nav className="text-[12px] font-mono text-background/60 mb-3 flex items-center gap-2">
+            <Link href="/" className="hover:text-background transition-colors">Home</Link>
+            <span>/</span>
+            <Link href="/shop" className="hover:text-background transition-colors">Shop</Link>
+            <span>/</span>
+            <span className="text-background/90">{category.name}</span>
+          </nav>
+          <h1 className="text-[clamp(2rem,4vw,3rem)] font-bold m-0 -tracking-[0.025em]">
+            {category.name}
+          </h1>
+          {category.description && (
+            <p className="mt-3 max-w-2xl text-base text-background/75">
+              {category.description}
+            </p>
+          )}
+          <p className="mt-4 text-[11px] font-mono uppercase tracking-[0.16em] text-background/60 tabular-nums">
+            {products.length} {products.length === 1 ? "product" : "products"}
+          </p>
+        </div>
+      </section>
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-10 sm:py-12">
+        <ListingClient products={products} />
+        {products.length === 0 && (
+          <p className="text-center mt-8">
+            <Link href="/shop" className="text-primary font-semibold hover:underline">
+              ← Browse all products
+            </Link>
+          </p>
+        )}
+      </section>
+    </>
+  );
+}
+
+function CategorySkeleton() {
+  return (
+    <>
+      <section className="bg-foreground py-12 sm:py-14">
+        <div className="max-w-7xl mx-auto px-6 sm:px-8">
+          <div className="h-3 w-32 bg-background/20 rounded mb-3 animate-pulse" />
+          <div className="h-12 w-72 bg-background/20 rounded animate-pulse" />
+        </div>
+      </section>
+      <section className="max-w-7xl mx-auto px-6 sm:px-8 py-10 sm:py-12">
+        <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>
+      </section>
+    </>
+  );
+}

package/templates/storefront-pharmacy/app/checkout/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CheckoutPage as SdkCheckoutPage } from "@cimplify/sdk/react";
+
+export default function CheckoutPage() {
+  const router = useRouter();
+  return (
+    <SdkCheckoutPage
+      onComplete={(result) => {
+        if (result.success && result.order) {
+          router.push(`/orders/${result.order.id}`);
+        }
+      }}
+    />
+  );
+}

package/templates/storefront-pharmacy/app/collections/[slug]/listing-client.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { ProductGrid } from "@cimplify/sdk/react";
+import type { Product } from "@cimplify/sdk";
+import { StoreProductCard } from "@/components/store-product-card";
+
+/**
+ * Client island for the collection listing. Receives server-fetched
+ * products as props (serializable) and owns the `renderCard` function
+ * (which can't cross the server/client boundary).
+ */
+export function ListingClient({ products }: { products: Product[] }) {
+  return (
+    <ProductGrid
+      products={products}
+      emptyMessage="No products in this collection yet."
+      renderCard={(p) => <StoreProductCard product={p} />}
+    />
+  );
+}