npm - @cimplify/cli - Versions diffs - 0.2.7 → 0.3.0 - Mend

@cimplify/cli 0.2.7 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (229) hide show

package/templates/storefront-auto/.claude/skills/cimplify-storefront/SKILL.md ADDED Viewed

@@ -0,0 +1,145 @@
+---
+name: cimplify-storefront
+description: Build, customize, rebrand, or deploy a Cimplify-scaffolded storefront. Triggers when the user asks to create a storefront, rebrand a Cimplify template, change the palette, add a page, deploy to Cimplify, or works in a project containing `lib/brand.ts` and `next.config.ts` with `cacheComponents`.
+---
+# Cimplify Storefront skill
+You're working on a project scaffolded from `cimplify init`. The architecture is opinionated and the rebrand surface is intentionally small. Read `AGENTS.md` at the project root for the file ↔ brand-field map for *this template's* industry; this skill gives you the playbook that's the same across all six.
+## The contract — never break
+1. **`lib/brand.ts` is the only place for content edits.** Every visible string reads from this file. If a string isn't in `brand`, *add a field* to the `Brand` interface — don't hardcode it in a page or component.
+2. **`app/globals.css` `@theme { … }`** holds palette + radius + font references. To re-skin the entire site, edit only this block.
+3. **Server Components are cached** via `'use cache'` + `cacheTag(tags.X())` + `cacheLife("hours")`. Don't downgrade them to `"use client"` to avoid an issue — fix the issue.
+4. **Client islands** (anything reading `useSearchParams`, `usePathname`, `useRouter`, `useState`) live behind `<Suspense>`.
+5. **`cacheComponents: true`** in `next.config.ts` is non-negotiable. Don't turn it off.
+6. **`bun run test:run` (vitest)** is the canonical test runner. `bun test` will show false failures because Bun's `vi` shim is incomplete.
+7. **Cart, checkout, orders stay client.** They're session-bound. Don't try to SSR them.
+## The brand-field schema (in `lib/brand.ts`)
+```
+identity:        name, shortName, microTag, description, schemaType, currency, locale
+contact:         address, streetAddress, city, countryCode, phone, phoneTel, email, privacyEmail, hours
+socials:         [{ label, href, icon }]   // icon ∈ instagram|x|tiktok|facebook|youtube|linkedin|whatsapp
+header:          { nav: [{ label, href }] }
+hero:            { badge, title, subtitle, primaryCtaLabel, secondaryCtaLabel?, secondaryCtaHref? }
+optional:        trustItems[]?, brandStrip?, promo?, tradeIn?     // render conditionally
+newsletter:      { eyebrow, title, body, placeholder, submitLabel, successLabel }
+about:           { eyebrow, title, paragraphs[], sections[{ heading, body }] }
+faq:             { eyebrow, title, sections[{ title, items[{ q, a }] }], contactPrompt, contactEmail }
+terms,
+privacy,
+shipping,
+returns,
+accessibility:   { eyebrow, title, lastUpdated, sections[{ heading, body | { intro, bullets[] } }] }
+account:         eyebrows + titles for /account, /login, /signup
+contactPage:     { eyebrow, title, body, reasons[], directLines[{ label, value, href }] }
+trackOrder:      { eyebrow, title, body }
+footer:          { blurb, sitemap[{ title, links[] }], poweredBy? }
+llms:            { summary }                           // opens /llms.txt
+mock:            { seed, businessId }
+```
+## Playbook — common tasks
+### Rebrand a storefront for a new merchant
+1. Edit `lib/brand.ts`. Replace every field with the merchant's content. Use the brief / context the user gave you.
+2. Edit `app/globals.css` `@theme { … }`. Change `--color-primary`, `--color-background`, `--color-foreground`, optionally `--radius`. Use OKLCH; if the brand only gave hex, convert.
+3. (Optional) Swap fonts in `app/layout.tsx` — `next/font/google` import + the variable wired into the `<html>` className.
+4. Set `.env.local`: `NEXT_PUBLIC_CIMPLIFY_API_URL`, `NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY`, `NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID`, `NEXT_PUBLIC_SITE_URL`.
+Don't touch any other file. If the rebrand needs content not in the schema, add the field to `Brand` first, populate it, then read it from the page.
+### Add a new section / component
+1. Build it as a Server Component in `components/` (or a client island in `*-client.tsx` if interactive).
+2. Read merchant copy from `brand`. Add new fields to the `Brand` interface if needed.
+3. Wrap interactive bits in `<Suspense fallback={…}>` so the cached chrome streams.
+4. Compose into the page.
+### Wire a Server Action that mutates data
+```ts
+"use server";
+import { getServerClient, revalidateProducts } from "@cimplify/sdk/server";
+export async function createProduct(input: ProductInput) {
+  await getServerClient().catalogue.createProduct(input);
+  revalidateProducts();
+}
+```
+After every mutation, call the matching `revalidate*` helper from `@cimplify/sdk/server`: `revalidateProducts`, `revalidateProduct(id)`, `revalidateCategories`, `revalidateCategory(id)`, `revalidateCollections`, `revalidateCollection(id)`, `revalidateBusiness`.
+### Add a Server Component data fetch
+```ts
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags } from "@cimplify/sdk/server";
+async function getX() {
+  "use cache";
+  cacheTag(tags.products());
+  cacheLife("hours");
+  const r = await getServerClient().catalogue.getProducts({ limit: 24 });
+  if (!r.ok) throw new Error(r.error.message);
+  return r.value.items;
+}
+```
+### Eject an SDK component for deeper customization
+Try `classNames`, `renderImage`, `renderLink`, slot props first. If those run out:
+```bash
+cimplify list
+cimplify add product-card --dir src/components/cimplify
+```
+Once ejected, the file is yours. Hooks/types still come from `@cimplify/sdk`.
+### Deploy
+```bash
+cimplify login
+cimplify projects create my-store
+cimplify link <project-id>
+cimplify env push
+cimplify deploy --prod
+cimplify logs --follow
+cimplify domains add my-store.com
+```
+## Pitfalls — explicit ❌ list
+- ❌ Hardcoding any visible string in a page or component. Always `brand.X`.
+- ❌ Disabling `cacheComponents: true` to silence a warning. Fix the warning by wrapping the dynamic call in `<Suspense>`.
+- ❌ Using `unstable_cache` — Next 16's canonical primitive is `'use cache'` + `cacheTag` + `cacheLife`.
+- ❌ Bypassing `getServerClient()` and calling `createCimplifyClient` directly in a Server Component — loses per-request memoization.
+- ❌ Mutating data without calling the matching `revalidate*` helper.
+- ❌ Adding an `app/error.tsx` handler that calls `reset()` without logging — silently swallowed errors hide bugs.
+- ❌ Running `bun test` and reporting failures. Use `bun run test:run` (vitest).
+- ❌ Editing the per-template `AGENTS.md` to remove notes about TODOs (contact form, newsletter fake submits) — they're real.
+## Where things live
+| Need | Look here |
+|---|---|
+| Which page reads which `brand.X` field | `AGENTS.md` at project root |
+| Architectural rules | `AGENTS.md` at project root + this skill |
+| Running locally | `bun dev` (boots mock + Next together) |
+| Switching mock seed | edit `dev:mock` in `package.json` and `NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID` in `.env.local` |
+| Full SDK reference | `docs/sdk/storefronts.md` in the Cimplify repo |
+## What to do when the user asks something out-of-scope
+If the user asks for something the template doesn't support out of the box:
+1. **Check first** — is there an SDK component or hook that does it? `@cimplify/sdk/react` has 50+ components, 30+ hooks. Search `node_modules/@cimplify/sdk/dist/react.d.mts` if needed.
+2. **Compose from existing parts** before authoring new ones.
+3. **If genuinely missing** — build the new component, hoist its strings into `brand.ts`, document in `AGENTS.md`.
+Don't introduce competing patterns (a new caching strategy, a new auth flow, a new theming system). The template's opinions are intentional.

package/templates/storefront-auto/.cursor/rules/cimplify-storefront.mdc ADDED Viewed

@@ -0,0 +1,25 @@
+---
+description: Cimplify storefront — architectural rules and rebrand contract for a project scaffolded from `cimplify init`. Triggers when files like lib/brand.ts, app/globals.css, components/header.tsx, or .cimplify/project.json are in the workspace.
+globs: ["lib/brand.ts", "app/**", "components/**", ".env.local", "next.config.ts"]
+alwaysApply: true
+---
+# Cimplify storefront
+This project was scaffolded from a Cimplify template. Read `AGENTS.md` at the project root for the file ↔ `brand.X` field map and `.claude/skills/cimplify-storefront/SKILL.md` for the full playbook.
+## The contract
+1. **`lib/brand.ts`** — every visible string. If something isn't there, add a field to the `Brand` interface; don't hardcode.
+2. **`app/globals.css` `@theme` block** — palette, radius, font references.
+3. **Server Components are cached** via `'use cache'` + `cacheTag(tags.X())` + `cacheLife("hours")`. Don't downgrade to client to silence a warning.
+4. **Client islands** behind `<Suspense>`.
+5. **`cacheComponents: true`** in `next.config.ts` is non-negotiable.
+6. Use **`bun run test:run`** (vitest), not `bun test`.
+## Don't
+- Hardcode visible strings in pages/components.
+- Use `unstable_cache` (Next 16 uses `'use cache'`).
+- Bypass `getServerClient()` (loses per-request memoization).
+- Mutate without calling the matching `revalidate*` helper from `@cimplify/sdk/server`.

package/templates/storefront-auto/.env.example ADDED Viewed

@@ -0,0 +1,22 @@
+# Cimplify API base URL.
+# Dev: leave empty so the SDK uses the current origin (localhost:3000),
+# which Next.js rewrites to the mock at 127.0.0.1:8787 (see next.config.ts).
+# Production: set to your Cimplify host (e.g. https://api.cimplify.io).
+NEXT_PUBLIC_CIMPLIFY_API_URL=
+# Tenant public key. The mock accepts any value.
+NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY=mock-dev
+# Business id used by the mock seed (auto: Driveline Auto Parts).
+NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID=bus_driveline_auto
+# Canonical public site URL — used by sitemap.xml, robots.txt, llms.txt,
+# and OpenGraph metadata. Set this on production deploys; `cimplify env push`
+# wires it into your linked project.
+NEXT_PUBLIC_SITE_URL=https://example.com
+# Business handle (human-readable slug, e.g. "akua-bakery"). Used by the
+# UCP manifest endpoint at /.well-known/ucp so AI agents (Claude / ChatGPT /
+# Gemini) can discover this storefront's commerce capabilities. Set this
+# on production deploys; leave empty in dev unless you're testing UCP.
+NEXT_PUBLIC_CIMPLIFY_BUSINESS_HANDLE=

package/templates/storefront-auto/AGENTS.md ADDED Viewed

@@ -0,0 +1,95 @@
+# AGENTS.md — Auto-parts storefront template
+If you are an AI agent working on this storefront, **start here.**
+## TL;DR for rebranding
+1. **Edit `lib/brand.ts`** — every visible string, plus the `fitments` make/model/year tree.
+2. **Edit `app/globals.css`** — `@theme { … }` block for palette + radius + font references.
+3. **Edit `.env.local`** — `NEXT_PUBLIC_CIMPLIFY_*` env vars.
+## Aesthetic
+- **Inter + JetBrains Mono** — clean modern sans, mono-spaced labels for spec-feel.
+- **Carbon-black foreground + sport-red accent.**
+- **Sharp corners**: `0.5rem` — workshop-modern.
+- **`AutoPartsStore`** is the Schema.org `@type` (set in `brand.schemaType`).
+## Page surface
+```
+app/
+  page.tsx                       AutoHero + FitmentFinder + TrustBar + Most ordered
+                                  grid + ServiceBrief + Newsletter
+  shop/page.tsx                  SDK <CataloguePage/>. Reads `?fits=<tag>` to
+                                  filter by fitment tag.
+  search/page.tsx                Search
+  collections/[slug]/page.tsx    Collection landing
+  categories/[slug]/page.tsx     Category landing
+  products/[slug]/page.tsx       Full product detail page (Product JSON-LD)
+  cart/page.tsx, checkout/page.tsx, orders/[id]/page.tsx  SDK
+  account/* + login/signup
+  contact/, track-order/, about, faq, terms, privacy, shipping, returns,
+  accessibility/, sitemap-page/  Brand-driven content pages
+```
+## File ↔ brand-field map
+| File | Reads from `brand` |
+|---|---|
+| `app/layout.tsx` | identity, contact, socials, schemaType (AutoPartsStore JSON-LD) |
+| `app/page.tsx` | `brand.hero`, `brand.fitments`, `brand.serviceBrief`, `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` |
+| `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/products/[slug]/page.tsx` | `brand.name`, `brand.currency` |
+| `app/llms.txt/route.ts` | `brand.llms`, contact, currency |
+| `components/auto-hero.tsx` | `brand.hero`, hard-coded trust-chip labels |
+| `components/fitment-finder.tsx` | `brand.fitments` (makes/models/years tree) |
+| `components/service-brief.tsx` | `brand.serviceBrief` (3 cards) |
+| `components/header.tsx`, `components/footer.tsx` | `brand.shortName`, `brand.header.nav`, `brand.footer`, `brand.contact`, `brand.socials` |
+| `components/trust-bar.tsx` | `brand.trustItems` |
+| `components/newsletter.tsx` | `brand.newsletter` |
+## Auto-specific notes
+- **Fitment is tag-based, not a custom_attribute.** Each product carries `tags: ["fits:toyota", "fits:toyota:corolla"]` etc. or `["fits:universal"]`. The shop page reads `?fits=<tag>` and filters by tag prefix match. Universal-fit products bypass the filter.
+- **Adding a vehicle**: edit `brand.fitments.makes` in `lib/brand.ts`. Add `{ slug, name, models: [...] }`. Slug becomes the URL fragment.
+- **Adding a part with new fitment**: tag the product `fits:<make>` and (optionally) `fits:<make>:<model>`. No schema change needed.
+- **Partner-workshop fitting**: the mock doesn't model this; the storefront copy describes it. To wire it, eject the cart drawer and add a "Add fitting (GH₵80)" toggle that adds a service line.
+## Known TODOs
+- Contact form + newsletter signup currently fake their submit. Wire to a real provider.
+- The fitment finder uses `useRouter().push` to a query-string URL; the catalogue page-side filter is left as an exercise for the merchant (read the `fits` param and pass it as a SDK `getProducts({ tags: [...] })` filter).
+## Mock seed
+Wired to `--seed auto` (Driveline Auto Parts). 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, fitment-tag filtering, services with scheduling) — the SDK already gets price math, axis matching, tag filtering, 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-auto/CLAUDE.md ADDED Viewed

@@ -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-auto/README.md ADDED Viewed

@@ -0,0 +1,48 @@
+# __STOREFRONT_NAME__
+A Cimplify storefront scaffolded from the **auto** template — Next.js 16 (App Router), React 19, Tailwind v4. Carbon-black + sport-red palette, Inter + JetBrains Mono typography, workshop-modern aesthetic.
+## Run
+```bash
+bun install
+bun dev
+```
+Two things start in parallel:
+- `cimplify-mock --seed auto` — the Cimplify mock API on `http://127.0.0.1:8787`, seeded with Driveline Auto Parts.
+- `next dev` — this storefront on `http://localhost:3000`.
+Open the storefront in your browser. Edit `app/page.tsx` to start customising.
+## Auto-specific behaviour
+- **Fitment finder** (`components/fitment-finder.tsx`): Make → Model → Year selector on the home page. Submitting pushes `?fits=fits:<make>:<model>` onto `/shop`; the shop page filters the catalogue by matching `tags` on `MockProduct`. Products tagged `fits:universal` always appear.
+- Vehicle data lives in `brand.fitments` (lib/brand.ts) — add a make/model/year by editing that array.
+- `Bosch`, `Mobil 1`, `Castrol`, `NGK`, `Brembo`, `Bridgestone` brand strip — swap to your own authorised brands.
+- `AutoPartsStore` schema.org `@type` is set in `brand.schemaType` so JSON-LD on every page identifies the business correctly.
+## Switch the seed
+```bash
+cimplify-mock --seed pharmacy    # Wellspring Pharmacy
+cimplify-mock --seed restaurant  # Mama's Kitchen
+cimplify-mock --seed retail      # Currents Electronics
+```
+Update `NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID` in `.env.local` to match the seeded business.
+## 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_driveline_auto
++ 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-auto/__tests__/brand.test.ts ADDED Viewed

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

package/templates/storefront-auto/__tests__/cart-flow.test.ts ADDED Viewed

@@ -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-auto/__tests__/contract.test.ts ADDED Viewed

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

package/templates/storefront-auto/app/.well-known/ucp/route.ts ADDED Viewed

@@ -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-auto/app/about/page.tsx ADDED Viewed

@@ -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-auto/app/accessibility/page.tsx ADDED Viewed

@@ -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-auto/app/account/addresses/page.tsx ADDED Viewed

@@ -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-auto/app/account/orders/page.tsx ADDED Viewed

@@ -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-auto/app/account/page.tsx ADDED Viewed

@@ -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-auto/app/account/settings/page.tsx ADDED Viewed

@@ -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-auto/app/cart/page.tsx ADDED Viewed

@@ -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-auto/app/categories/[slug]/listing-client.tsx ADDED Viewed

@@ -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} />}
+    />
+  );
+}