@cimplify/sdk 0.40.0 → 0.41.0

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

@@ -10,6 +10,7 @@ import {
   type Product,
 } from "@cimplify/sdk/server";
 import { ListingClient } from "./listing-client";
+import { brand } from "@/lib/brand";
 
 interface CategoryData {
   category: Category;
@@ -42,7 +43,7 @@ export async function generateMetadata({
   const data = await getCategory(slug);
   if (!data) return {};
   return {
-    title: `${data.category.name} — Akua's Bakery`,
+    title: `${data.category.name} — ${brand.name}`,
     description: data.category.description ?? undefined,
   };
 }
@@ -70,48 +71,60 @@ async function CategoryContent({
 
   const { category, products } = data;
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
-      <header className="mb-8 text-center">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
-          Category
-        </p>
-        <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-2">
-          {category.name}
-        </h1>
-        {category.description && (
-          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">
-            {category.description}
+    <>
+      <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>
         )}
-        <p className="text-sm text-muted-foreground">
-          {products.length} item{products.length === 1 ? "" : "s"}
-        </p>
-      </header>
-      <ListingClient products={products} />
-      {products.length === 0 && (
-        <p className="text-center mt-8">
-          <Link href="/" className="text-primary font-semibold">
-            ← Back home
-          </Link>
-        </p>
-      )}
-    </section>
+      </section>
+    </>
   );
 }
 
 function CategorySkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
-      <header className="mb-8 text-center">
-        <div className="mx-auto h-3 w-20 bg-muted rounded mb-2 animate-pulse" />
-        <div className="mx-auto h-10 w-64 bg-muted rounded mb-2 animate-pulse" />
-        <div className="mx-auto h-4 w-80 bg-muted rounded animate-pulse" />
-      </header>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
-        ))}
-      </div>
-    </section>
+    <>
+      <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-retail/app/collections/[slug]/page.tsx

@@ -10,6 +10,7 @@ import {
   type Product,
 } from "@cimplify/sdk/server";
 import { ListingClient } from "./listing-client";
+import { brand } from "@/lib/brand";
 
 interface CollectionData {
   collection: Collection;
@@ -42,7 +43,7 @@ export async function generateMetadata({
   const data = await getCollection(slug);
   if (!data) return {};
   return {
-    title: `${data.collection.name} — Akua's Bakery`,
+    title: `${data.collection.name} — ${brand.name}`,
     description: data.collection.description ?? undefined,
   };
 }
@@ -70,48 +71,60 @@ async function CollectionContent({
 
   const { collection, products } = data;
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
-      <header className="mb-8 text-center">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
-          Collection
-        </p>
-        <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-2">
-          {collection.name}
-        </h1>
-        {collection.description && (
-          <p className="mx-auto mb-2 max-w-xl text-muted-foreground">
-            {collection.description}
+    <>
+      <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>
+            <span className="text-background/90">Collections</span>
+            <span>/</span>
+            <span className="text-background/90">{collection.name}</span>
+          </nav>
+          <h1 className="text-[clamp(2rem,4vw,3rem)] font-bold m-0 -tracking-[0.025em]">
+            {collection.name}
+          </h1>
+          {collection.description && (
+            <p className="mt-3 max-w-2xl text-base text-background/75">
+              {collection.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>
         )}
-        <p className="text-sm text-muted-foreground">
-          {products.length} item{products.length === 1 ? "" : "s"}
-        </p>
-      </header>
-      <ListingClient products={products} />
-      {products.length === 0 && (
-        <p className="text-center mt-8">
-          <Link href="/" className="text-primary font-semibold">
-            ← Back home
-          </Link>
-        </p>
-      )}
-    </section>
+      </section>
+    </>
   );
 }
 
 function CollectionSkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
-      <header className="mb-8 text-center">
-        <div className="mx-auto h-3 w-20 bg-muted rounded mb-2 animate-pulse" />
-        <div className="mx-auto h-10 w-64 bg-muted rounded mb-2 animate-pulse" />
-        <div className="mx-auto h-4 w-80 bg-muted rounded animate-pulse" />
-      </header>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div key={i} className="aspect-square bg-muted rounded-2xl animate-pulse" />
-        ))}
-      </div>
-    </section>
+    <>
+      <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-retail/app/error.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+
+/**
+ * Root error boundary. Next.js calls this whenever a thrown error escapes
+ * a Server Component without being caught by a closer `error.tsx`.
+ *
+ * Wire `reportError` (Sentry, Datadog, etc.) here so production failures
+ * surface — silently recovering hides real bugs.
+ */
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // TODO: replace with your error reporter
+    // eslint-disable-next-line no-console
+    console.error("Storefront error:", error);
+  }, [error]);
+
+  return (
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-3">
+        Something broke
+      </p>
+      <h1 className="text-[clamp(2rem,4vw,3rem)] font-bold mb-4 -tracking-[0.025em]">
+        That wasn&apos;t supposed to happen.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-8">
+        We&apos;ve been notified. Refresh the page, or head back home — most
+        of the time the second try just works.
+      </p>
+      {error.digest && (
+        <p className="text-xs font-mono text-muted-foreground mb-6">
+          Reference:{" "}
+          <code className="text-foreground">{error.digest}</code>
+        </p>
+      )}
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <button
+          type="button"
+          onClick={reset}
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+        >
+          Try again
+        </button>
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-border hover:bg-muted transition-colors text-sm font-medium"
+        >
+          Back home
+        </Link>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-retail/app/faq/page.tsx

@@ -1,106 +1,25 @@
 import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "Support — Currents Electronics",
-  description:
-    "Shipping, warranty, repairs, returns, payment — answers to the questions we hear most often.",
+  title: `Support — ${brand.name}`,
+  description: "Shipping, warranty, repairs, returns, payment — answers to the questions we hear most often.",
 };
 
-interface QA {
-  q: string;
-  a: string;
-}
-
-const SECTIONS: { title: string; items: QA[] }[] = [
-  {
-    title: "Ordering & delivery",
-    items: [
-      {
-        q: "How fast is shipping?",
-        a: "Free same-day delivery within Greater Accra for orders placed before 4pm. Outside Accra, we use a partner courier — usually 1–3 business days, with tracking sent by SMS.",
-      },
-      {
-        q: "Can I pick up in store?",
-        a: "Yes. Choose 'Pickup' at checkout and we'll have your order boxed at our Atomic Junction store within 30 minutes. Bring a photo ID matching the order name.",
-      },
-      {
-        q: "Do you ship internationally?",
-        a: "We ship across West Africa via DHL — rates and ETAs are calculated at checkout once you enter your destination.",
-      },
-      {
-        q: "How do I track my order?",
-        a: "You'll get an SMS and email with a tracking link within 30 minutes of dispatch. Same-day Accra orders include the rider's phone number.",
-      },
-    ],
-  },
-  {
-    title: "Warranty & repairs",
-    items: [
-      {
-        q: "What does the two-year warranty cover?",
-        a: "Manufacturing defects, electrical failures, and battery degradation below 80% within the first 24 months. Accidental damage, water damage, and software issues caused by user installs are excluded.",
-      },
-      {
-        q: "Where do I send a faulty device?",
-        a: "Drop it at our Atomic Junction store, or request a free pickup from your address by emailing support@currentselectronics.test. Loaner devices are available for warranty claims while we diagnose.",
-      },
-      {
-        q: "Can you fix devices bought elsewhere?",
-        a: "We offer paid repairs on Apple and Samsung devices regardless of where they were purchased. Expect a quote within 48 hours of inspection.",
-      },
-    ],
-  },
-  {
-    title: "Trade-in & financing",
-    items: [
-      {
-        q: "How does trade-in work?",
-        a: "Tell us the model and condition of your device, get an instant estimate, and ship it free or drop it at our store. Once we verify, we credit your account or pay out via Mobile Money — your choice.",
-      },
-      {
-        q: "Do you offer instalment payments?",
-        a: "Yes. Pay in 3 (interest-free) or 6/12 monthly instalments via our partner Fidelity Bank. Available at checkout for orders over GH₵2,000.",
-      },
-      {
-        q: "Are there bulk discounts for businesses?",
-        a: "Yes. Email business@currentselectronics.test with your shopping list and team size — most orders over 5 units qualify for a discount, plus free on-site setup.",
-      },
-    ],
-  },
-  {
-    title: "Payment & returns",
-    items: [
-      {
-        q: "What payment methods do you accept?",
-        a: "Mobile Money (MTN, Telecel, AirtelTigo), Visa/Mastercard, instalments via Fidelity Bank, and cash on delivery for Accra orders.",
-      },
-      {
-        q: "What's your return policy?",
-        a: "14 days, no questions asked, on any sealed product. For opened items, returns are accepted within 7 days subject to a 10% restocking fee. We can't accept returns on activated SIM-bundled phones once the SIM is registered.",
-      },
-      {
-        q: "Are products genuine?",
-        a: "Yes. We're an authorised dealer for every brand we stock. Every product ships with the manufacturer's serial number registered to your name — verify it on the brand's official portal anytime.",
-      },
-    ],
-  },
-];
-
 export default function FaqPage() {
+  const f = brand.faq;
   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">
-        Support
+        {f.eyebrow}
       </p>
       <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-10 -tracking-[0.025em]">
-        Questions, answered.
+        {f.title}
       </h1>
       <div className="space-y-12">
-        {SECTIONS.map((section) => (
+        {f.sections.map((section) => (
           <section key={section.title}>
-            <h2 className="text-2xl font-semibold mb-5 -tracking-[0.02em]">
-              {section.title}
-            </h2>
+            <h2 className="text-2xl font-semibold mb-5 -tracking-[0.02em]">{section.title}</h2>
             <dl className="space-y-6">
               {section.items.map((item) => (
                 <div key={item.q}>
@@ -113,12 +32,12 @@ export default function FaqPage() {
         ))}
       </div>
       <p className="mt-12 pt-8 border-t border-border text-sm text-muted-foreground">
-        Still stuck? Email{" "}
+        {f.contactPrompt}{" "}
         <a
-          href="mailto:support@currentselectronics.test"
+          href={`mailto:${f.contactEmail}`}
           className="text-primary font-semibold hover:underline"
         >
-          support@currentselectronics.test
+          {f.contactEmail}
         </a>{" "}
         and a real human will reply within 24 hours.
       </p>

package/templates/storefront-retail/app/layout.tsx

@@ -4,8 +4,7 @@ import "./globals.css";
 import { Providers } from "@/components/providers";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
-import { ProductModal } from "@/components/product-modal";
-import { Suspense } from "react";
+import { brand } from "@/lib/brand";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -19,10 +18,39 @@ const mono = JetBrains_Mono({
   display: "swap",
 });
 
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
 export const metadata: Metadata = {
-  title: "Currents Electronics",
-  description:
-    "The latest laptops, phones, audio, and accessories — curated, in-stock, shipped from Accra to Africa.",
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: brand.name,
+    template: `%s — ${brand.name}`,
+  },
+  description: brand.description,
+  openGraph: {
+    type: "website",
+    siteName: brand.name,
+    locale: brand.locale,
+  },
+  twitter: { card: "summary_large_image" },
+};
+
+const ORGANIZATION_LD = {
+  "@context": "https://schema.org",
+  "@type": brand.schemaType,
+  name: brand.name,
+  url: SITE_URL,
+  description: brand.description,
+  email: brand.contact.email,
+  telephone: brand.contact.phoneTel,
+  address: {
+    "@type": "PostalAddress",
+    streetAddress: brand.contact.streetAddress,
+    addressLocality: brand.contact.city,
+    addressCountry: brand.contact.countryCode,
+  },
+  sameAs: brand.socials.map((s) => s.href),
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -32,13 +60,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         suppressHydrationWarning
         className="min-h-screen flex flex-col bg-background text-foreground font-sans"
       >
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(ORGANIZATION_LD) }}
+        />
         <Providers>
           <Header />
           <main className="flex-1 pb-12 w-full">{children}</main>
           <Footer />
-          <Suspense fallback={null}>
-            <ProductModal />
-          </Suspense>
         </Providers>
       </body>
     </html>

package/templates/storefront-retail/app/llms.txt/route.ts

@@ -0,0 +1,94 @@
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { brand } from "@/lib/brand";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+async function buildLlmsTxt(): Promise<string> {
+  "use cache";
+  cacheTag(tags.products(), tags.categories(), tags.collections());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+
+  const products: Product[] = productsRes.ok ? productsRes.value.items : [];
+  const categories = categoriesRes.ok ? categoriesRes.value : [];
+  const collections = collectionsRes.ok ? collectionsRes.value : [];
+
+  const lines: string[] = [];
+  lines.push(`# ${brand.name}`);
+  lines.push("");
+  lines.push(`> ${brand.llms.summary}`);
+  lines.push("");
+  lines.push("## Browse");
+  lines.push(`- [Home](${SITE_URL}/)`);
+  lines.push(`- [Shop](${SITE_URL}/shop): Full catalogue with filter and sort.`);
+
+  if (categories.length > 0) {
+    lines.push("");
+    lines.push("## Categories");
+    for (const c of categories) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/categories/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+
+  if (collections.length > 0) {
+    lines.push("");
+    lines.push("## Collections");
+    for (const c of collections) {
+      lines.push(
+        `- [${c.name}](${SITE_URL}/collections/${c.slug})${c.description ? `: ${c.description}` : ""}`,
+      );
+    }
+  }
+
+  if (products.length > 0) {
+    lines.push("");
+    lines.push("## Products");
+    for (const p of products) {
+      const slug = p.slug ?? p.id;
+      const price = `${p.currency ?? brand.currency} ${p.default_price}`;
+      const desc = p.description ? ` — ${p.description.replace(/\s+/g, " ").slice(0, 200)}` : "";
+      lines.push(`- [${p.name}](${SITE_URL}/products/${slug}) (${price})${desc}`);
+    }
+  }
+
+  lines.push("");
+  lines.push("## Information");
+  lines.push(`- [About](${SITE_URL}/about)`);
+  lines.push(`- [Support / FAQ](${SITE_URL}/faq)`);
+  lines.push(`- [Terms of Service](${SITE_URL}/terms)`);
+  lines.push(`- [Privacy Policy](${SITE_URL}/privacy)`);
+  lines.push(`- [Sitemap (XML)](${SITE_URL}/sitemap.xml)`);
+  lines.push("");
+  lines.push("## Contact");
+  lines.push(`- Email: ${brand.contact.email}`);
+  lines.push(`- Phone: ${brand.contact.phone}`);
+  lines.push(`- Address: ${brand.contact.address}`);
+
+  return lines.join("\n") + "\n";
+}
+
+/**
+ * `/llms.txt` — machine-readable site index for LLMs (per llmstxt.org).
+ * Lets coding agents and chat assistants find products, categories, and
+ * support pages without scraping HTML. Plain Markdown so it streams cheaply
+ * into context windows.
+ */
+export async function GET(): Promise<Response> {
+  const body = await buildLlmsTxt();
+  return new Response(body, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+      "Cache-Control": "public, max-age=0, s-maxage=3600, stale-while-revalidate=86400",
+    },
+  });
+}

package/templates/storefront-retail/app/not-found.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Page not found — ${brand.name}`,
+  description: "We couldn't find that page.",
+};
+
+export default function NotFound() {
+  return (
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-3">
+        404
+      </p>
+      <h1 className="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-4 -tracking-[0.03em]">
+        Page not found.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-8">
+        The URL you followed might be old, a typo, or pointing at a product
+        that&apos;s no longer in stock. Try the menu or head back home.
+      </p>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Link
+          href="/shop"
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+        >
+          Browse the shop
+        </Link>
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-border hover:bg-muted transition-colors text-sm font-medium"
+        >
+          Back home
+        </Link>
+      </div>
+    </section>
+  );
+}