@cimplify/sdk 0.41.0 → 0.42.1

package/templates/storefront-fashion/app/lookbook/page.tsx

@@ -0,0 +1,132 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Lookbook — ${brand.name}`,
+  description: "Editorial photography from each Studio FRX drop.",
+};
+
+interface LookbookEntry {
+  drop: string;
+  title: string;
+  hero: string;
+  tiles: string[];
+  byline: string;
+  date: string;
+}
+
+// Each entry is a drop; tiles are the editorial shots. Replace the URLs
+// with your own asset bucket / CDN before going live.
+const ENTRIES: LookbookEntry[] = [
+  {
+    drop: "Drop 04",
+    title: "Built for now.",
+    date: "Spring 2026",
+    byline: "Photographed by Selasi Adjei in Jamestown, Accra.",
+    hero: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1800&h=1100&fit=crop&auto=format&q=85",
+    tiles: [
+      "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1485518882345-15568b007407?w=900&h=1200&fit=crop&auto=format&q=85",
+    ],
+  },
+  {
+    drop: "Drop 03",
+    title: "Heavyweight, hand-screened.",
+    date: "Winter 2025",
+    byline: "Shot at the Tema dye works.",
+    hero: "https://images.unsplash.com/photo-1467043153537-a4fba2cd39ef?w=1800&h=1100&fit=crop&auto=format&q=85",
+    tiles: [
+      "https://images.unsplash.com/photo-1576566588028-4147f3842f27?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1542838686-37da4a9fd1b3?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&h=1200&fit=crop&auto=format&q=85",
+    ],
+  },
+  {
+    drop: "Drop 02",
+    title: "From the studio floor.",
+    date: "Autumn 2025",
+    byline: "Studio days, Osu.",
+    hero: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=1800&h=1100&fit=crop&auto=format&q=85",
+    tiles: [
+      "https://images.unsplash.com/photo-1512436991641-6745cdb1723f?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&h=1200&fit=crop&auto=format&q=85",
+      "https://images.unsplash.com/photo-1490114538077-0a7f8cb49891?w=900&h=1200&fit=crop&auto=format&q=85",
+    ],
+  },
+];
+
+export default function LookbookPage() {
+  return (
+    <article>
+      <section className="border-b border-border">
+        <div className="max-w-7xl mx-auto px-6 sm:px-10 py-14">
+          <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-primary mb-3">
+            Lookbook
+          </p>
+          <h1 className="font-display text-[clamp(3rem,9vw,7rem)] uppercase mb-4 -tracking-[0.04em] leading-[0.92]">
+            The drops, in full.
+          </h1>
+          <p className="text-base text-muted-foreground max-w-2xl leading-relaxed">
+            Each drop is photographed in the room it's built in. Editorials below;
+            full collection in the shop.
+          </p>
+        </div>
+      </section>
+
+      {ENTRIES.map((entry, i) => (
+        <section key={entry.drop} className="border-b border-border">
+          <div className="max-w-7xl mx-auto px-6 sm:px-10 py-16">
+            <div className="flex items-end justify-between gap-6 mb-8">
+              <div>
+                <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-muted-foreground mb-2">
+                  {entry.drop} · {entry.date}
+                </p>
+                <h2 className="font-display text-[clamp(2rem,5vw,3.5rem)] uppercase m-0 -tracking-[0.04em] leading-[0.95]">
+                  {entry.title}
+                </h2>
+                <p className="text-sm text-muted-foreground mt-2">{entry.byline}</p>
+              </div>
+              <Link
+                href="/shop"
+                className="hidden sm:inline-flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-foreground hover:text-primary transition-colors whitespace-nowrap"
+              >
+                Shop {entry.drop} →
+              </Link>
+            </div>
+
+            <div className="relative w-full aspect-[16/9] rounded-2xl overflow-hidden bg-muted mb-3">
+              <Image
+                src={entry.hero}
+                alt={`${entry.drop} hero — ${entry.title}`}
+                fill
+                sizes="(min-width: 1280px) 1280px, 100vw"
+                className="object-cover"
+                priority={i === 0}
+              />
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+              {entry.tiles.map((src, ti) => (
+                <div
+                  key={src}
+                  className="relative aspect-[3/4] rounded-2xl overflow-hidden bg-muted"
+                >
+                  <Image
+                    src={src}
+                    alt={`${entry.drop} editorial ${ti + 1}`}
+                    fill
+                    sizes="(min-width: 768px) 33vw, 100vw"
+                    className="object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      ))}
+    </article>
+  );
+}

package/templates/storefront-fashion/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-fashion/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-fashion/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-fashion/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-fashion/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-fashion/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");
+}

package/templates/storefront-fashion/app/sitemap-page/page.tsx

@@ -0,0 +1,167 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Sitemap — ${brand.name}`,
+  description: "A human-readable index of every page on this site.",
+};
+
+interface SitemapData {
+  products: { slug: string; name: string }[];
+  categories: { slug: string; name: string }[];
+  collections: { slug: string; name: string }[];
+}
+
+async function getSitemap(): Promise<SitemapData> {
+  "use cache";
+  cacheTag(tags.products(), tags.categories(), tags.collections());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [pRes, cRes, colRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+  return {
+    products: (pRes.ok ? pRes.value.items : []).map((p: Product) => ({
+      slug: p.slug ?? p.id,
+      name: p.name,
+    })),
+    categories: (cRes.ok ? cRes.value : []).map((c) => ({ slug: c.slug, name: c.name })),
+    collections: (colRes.ok ? colRes.value : []).map((c) => ({ slug: c.slug, name: c.name })),
+  };
+}
+
+const STATIC_LINKS: { title: string; links: { href: string; label: string }[] }[] = [
+  {
+    title: "Browse",
+    links: [
+      { href: "/", label: "Home" },
+      { href: "/shop", label: "Shop" },
+      { href: "/search", label: "Search" },
+    ],
+  },
+  {
+    title: "Account",
+    links: [
+      { href: "/account", label: "Account" },
+      { href: "/account/orders", label: "Orders" },
+      { href: "/account/addresses", label: "Addresses" },
+      { href: "/account/settings", label: "Settings" },
+      { href: "/login", label: "Sign in" },
+      { href: "/signup", label: "Create account" },
+      { href: "/track-order", label: "Track an order" },
+      { href: "/cart", label: "Cart" },
+      { href: "/checkout", label: "Checkout" },
+    ],
+  },
+  {
+    title: "About",
+    links: [
+      { href: "/about", label: "About" },
+      { href: "/faq", label: "FAQ" },
+      { href: "/contact", label: "Contact" },
+    ],
+  },
+  {
+    title: "Policies",
+    links: [
+      { href: "/shipping", label: "Shipping" },
+      { href: "/returns", label: "Returns" },
+      { href: "/accessibility", label: "Accessibility" },
+      { href: "/terms", label: "Terms of Service" },
+      { href: "/privacy", label: "Privacy Policy" },
+    ],
+  },
+  {
+    title: "Machine-readable",
+    links: [
+      { href: "/sitemap.xml", label: "sitemap.xml (search engines)" },
+      { href: "/llms.txt", label: "llms.txt (LLM agents)" },
+      { href: "/robots.txt", label: "robots.txt" },
+      { href: "/opensearch.xml", label: "opensearch.xml (browser search)" },
+    ],
+  },
+];
+
+export default async function SitemapHtmlPage() {
+  const { products, categories, collections } = await getSitemap();
+
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-16">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Sitemap
+      </p>
+      <h1 className="text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-2 -tracking-[0.02em]">
+        Every page, in one place.
+      </h1>
+      <p className="text-muted-foreground mb-12">
+        For search engines, see <Link href="/sitemap.xml" className="text-primary hover:underline">/sitemap.xml</Link>.
+        For LLM agents, see <Link href="/llms.txt" className="text-primary hover:underline">/llms.txt</Link>.
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+        {STATIC_LINKS.map((s) => (
+          <Section key={s.title} title={s.title}>
+            {s.links.map((l) => (
+              <li key={l.href}>
+                <Link href={l.href} className="hover:text-primary transition-colors">
+                  {l.label}
+                </Link>
+              </li>
+            ))}
+          </Section>
+        ))}
+        {categories.length > 0 && (
+          <Section title="Categories">
+            {categories.map((c) => (
+              <li key={c.slug}>
+                <Link href={`/categories/${c.slug}`} className="hover:text-primary transition-colors">
+                  {c.name}
+                </Link>
+              </li>
+            ))}
+          </Section>
+        )}
+        {collections.length > 0 && (
+          <Section title="Collections">
+            {collections.map((c) => (
+              <li key={c.slug}>
+                <Link href={`/collections/${c.slug}`} className="hover:text-primary transition-colors">
+                  {c.name}
+                </Link>
+              </li>
+            ))}
+          </Section>
+        )}
+        {products.length > 0 && (
+          <Section title={`Products (${products.length})`}>
+            {products.map((p) => (
+              <li key={p.slug}>
+                <Link href={`/shop?product=${encodeURIComponent(p.slug)}`} className="hover:text-primary transition-colors">
+                  {p.name}
+                </Link>
+              </li>
+            ))}
+          </Section>
+        )}
+      </div>
+    </article>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <p className="font-semibold text-[12px] uppercase tracking-[0.12em] text-foreground mb-3">
+        {title}
+      </p>
+      <ul className="space-y-2 m-0 p-0 list-none text-sm text-muted-foreground">
+        {children}
+      </ul>
+    </div>
+  );
+}

package/templates/storefront-fashion/app/size-guide/page.tsx

@@ -0,0 +1,155 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Size Guide — ${brand.name}`,
+  description: "Chest, length, and shoulder measurements for every Studio FRX piece.",
+};
+
+interface SizeRow {
+  size: string;
+  chest: string;
+  length: string;
+  shoulder: string;
+}
+
+const TOPS_CHART: SizeRow[] = [
+  { size: "XS", chest: "104 cm / 41 in", length: "68 cm / 26.8 in", shoulder: "50 cm / 19.7 in" },
+  { size: "S", chest: "110 cm / 43.3 in", length: "70 cm / 27.5 in", shoulder: "52 cm / 20.5 in" },
+  { size: "M", chest: "116 cm / 45.7 in", length: "72 cm / 28.3 in", shoulder: "54 cm / 21.3 in" },
+  { size: "L", chest: "122 cm / 48 in", length: "74 cm / 29.1 in", shoulder: "56 cm / 22 in" },
+  { size: "XL", chest: "128 cm / 50.4 in", length: "76 cm / 29.9 in", shoulder: "58 cm / 22.8 in" },
+  { size: "2XL", chest: "134 cm / 52.7 in", length: "78 cm / 30.7 in", shoulder: "60 cm / 23.6 in" },
+  { size: "3XL", chest: "140 cm / 55.1 in", length: "80 cm / 31.5 in", shoulder: "62 cm / 24.4 in" },
+];
+
+const BOTTOMS_CHART: { size: string; waist: string; hip: string; inseam: string }[] = [
+  { size: "XS", waist: "72 cm / 28 in", hip: "92 cm / 36 in", inseam: "78 cm / 30.7 in" },
+  { size: "S", waist: "76 cm / 30 in", hip: "96 cm / 38 in", inseam: "78 cm / 30.7 in" },
+  { size: "M", waist: "82 cm / 32 in", hip: "102 cm / 40 in", inseam: "80 cm / 31.5 in" },
+  { size: "L", waist: "88 cm / 35 in", hip: "108 cm / 42.5 in", inseam: "80 cm / 31.5 in" },
+  { size: "XL", waist: "94 cm / 37 in", hip: "114 cm / 45 in", inseam: "82 cm / 32.3 in" },
+  { size: "2XL", waist: "102 cm / 40 in", hip: "122 cm / 48 in", inseam: "82 cm / 32.3 in" },
+];
+
+export default function SizeGuidePage() {
+  return (
+    <article className="max-w-4xl mx-auto px-6 sm:px-8 py-16">
+      <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-primary mb-2">
+        Size guide
+      </p>
+      <h1 className="font-display text-[clamp(2.5rem,7vw,5rem)] uppercase mb-4 -tracking-[0.04em] leading-[0.95]">
+        Find your fit.
+      </h1>
+      <p className="text-base text-muted-foreground leading-relaxed max-w-2xl mb-12">
+        Our pieces are cut for an oversized, dropped-shoulder fit. Order true to size for
+        the intended fit; size down for a regular cut. All measurements are flat-laid
+        garment measurements.
+      </p>
+
+      <section className="mb-14">
+        <h2 className="text-2xl font-bold mb-2 -tracking-[0.025em]">Tops & outerwear</h2>
+        <p className="text-sm text-muted-foreground mb-4">
+          Hoodies, tees, sweats, jackets. Chest measured pit-to-pit, doubled. Length
+          measured from highest shoulder seam to hem.
+        </p>
+        <SizeTable
+          headings={["Size", "Chest", "Length", "Shoulder"]}
+          rows={TOPS_CHART.map((r) => [r.size, r.chest, r.length, r.shoulder])}
+        />
+      </section>
+
+      <section className="mb-14">
+        <h2 className="text-2xl font-bold mb-2 -tracking-[0.025em]">Bottoms</h2>
+        <p className="text-sm text-muted-foreground mb-4">
+          Trousers, shorts, sweats. Waist measured flat across the top of the
+          waistband, doubled.
+        </p>
+        <SizeTable
+          headings={["Size", "Waist", "Hip", "Inseam"]}
+          rows={BOTTOMS_CHART.map((r) => [r.size, r.waist, r.hip, r.inseam])}
+        />
+      </section>
+
+      <section className="rounded-2xl bg-foreground text-background p-8">
+        <h2 className="text-xl font-bold mb-3 -tracking-[0.025em]">How to measure yourself</h2>
+        <ul className="space-y-3 text-background/85 leading-relaxed">
+          <li>
+            <strong className="text-background">Chest</strong> — Wrap a soft tape around
+            the fullest part of your chest, under the arms, keeping the tape level.
+          </li>
+          <li>
+            <strong className="text-background">Waist</strong> — Around the narrowest part
+            of your waist, just above the navel.
+          </li>
+          <li>
+            <strong className="text-background">Hip</strong> — Around the fullest part of
+            your hips, feet together.
+          </li>
+          <li>
+            <strong className="text-background">Inseam</strong> — From the very top of the
+            inside of your leg down to the floor (no shoes).
+          </li>
+        </ul>
+      </section>
+
+      <p className="mt-12 text-sm text-muted-foreground">
+        Still unsure?{" "}
+        <a
+          href={`mailto:${brand.faq.contactEmail}`}
+          className="text-primary font-semibold hover:underline"
+        >
+          Email us your usual size in another brand
+        </a>{" "}
+        and we'll recommend a fit.
+      </p>
+    </article>
+  );
+}
+
+function SizeTable({
+  headings,
+  rows,
+}: {
+  headings: string[];
+  rows: string[][];
+}) {
+  return (
+    <div className="overflow-x-auto rounded-2xl border border-border">
+      <table className="w-full text-sm">
+        <thead className="bg-muted">
+          <tr>
+            {headings.map((h) => (
+              <th
+                key={h}
+                className="text-left font-semibold uppercase tracking-wider text-[11px] text-muted-foreground px-4 py-3"
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r, i) => (
+            <tr
+              key={r[0]}
+              className={i % 2 === 0 ? "bg-background" : "bg-muted/30"}
+            >
+              {r.map((cell, j) => (
+                <td
+                  key={j}
+                  className={[
+                    "px-4 py-3 tabular-nums",
+                    j === 0 ? "font-semibold text-foreground" : "text-foreground/80",
+                  ].join(" ")}
+                >
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/templates/storefront-fashion/app/track-order/page.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { TrackOrderForm } from "./track-order-form";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Track an order — ${brand.name}`,
+  description: brand.trackOrder.body,
+};
+
+export default function TrackOrderPage() {
+  const t = brand.trackOrder;
+  return (
+    <article className="max-w-2xl mx-auto px-6 sm:px-8 py-16">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        {t.eyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,5vw,3rem)] font-semibold mb-4 -tracking-[0.02em]">
+        {t.title}
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-8">{t.body}</p>
+      <TrackOrderForm />
+    </article>
+  );
+}