@cimplify/sdk 0.44.34 → 0.45.0

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

@@ -1,130 +0,0 @@
-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 Collection,
-  type Product,
-} from "@cimplify/sdk/server";
-import { ListingClient } from "./listing-client";
-import { brand } from "@/lib/brand";
-
-interface CollectionData {
-  collection: Collection;
-  products: Product[];
-}
-
-async function getCollection(slug: string): Promise<CollectionData | null> {
-  "use cache";
-  cacheTag(tags.collections());
-  cacheLife("hours");
-
-  const client = getServerClient();
-  const colRes = await client.catalogue.getCollectionBySlug(slug);
-  if (!colRes.ok) return null;
-
-  cacheTag(tags.collection(colRes.value.id), tags.collectionProducts(colRes.value.id));
-  const r = await client.catalogue.getCollectionProducts(colRes.value.id);
-  const products = r.ok
-    ? ((r.value as { items?: Product[] }).items ?? (r.value as Product[]))
-    : [];
-  return { collection: colRes.value, products };
-}
-
-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}): Promise<Metadata> {
-  const { slug } = await params;
-  const data = await getCollection(slug);
-  if (!data) return {};
-  return {
-    title: `${data.collection.name} — ${brand.name}`,
-    description: data.collection.description ?? undefined,
-  };
-}
-
-export default async function CollectionPage({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
-  return (
-    <Suspense fallback={<CollectionSkeleton />}>
-      <CollectionContent params={params} />
-    </Suspense>
-  );
-}
-
-async function CollectionContent({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
-  const { slug } = await params;
-  const data = await getCollection(slug);
-  if (!data) notFound();
-
-  const { collection, 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>
-            <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>
-        )}
-      </section>
-    </>
-  );
-}
-
-function CollectionSkeleton() {
-  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-retail/app/contact/contact-form.tsx

@@ -1,109 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-/**
- * Local-only contact form. On submit, fakes a successful response so the
- * template ships a usable interaction. Wire to a real handler (Server
- * Action posting to your CRM, support inbox, or Cimplify Support API)
- * before going to production.
- */
-export function ContactForm({ reasons }: { reasons: string[] }) {
-  const [submitted, setSubmitted] = useState(false);
-  const [reason, setReason] = useState(reasons[0] ?? "");
-
-  if (submitted) {
-    return (
-      <div className="rounded-2xl border border-border bg-card p-8">
-        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
-          ✓ Sent
-        </p>
-        <h2 className="font-serif text-2xl font-semibold mb-2">Thanks — we'll be in touch.</h2>
-        <p className="text-muted-foreground">
-          We respond within one business day. Check your spam folder if you don't see a
-          reply by tomorrow.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        setSubmitted(true);
-      }}
-      className="space-y-5"
-    >
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <Field label="Your name" name="name" required />
-        <Field label="Email" name="email" type="email" required />
-      </div>
-      <div>
-        <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5">
-          What's it about?
-        </label>
-        <select
-          name="reason"
-          value={reason}
-          onChange={(e) => setReason(e.target.value)}
-          className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
-        >
-          {reasons.map((r) => (
-            <option key={r} value={r}>
-              {r}
-            </option>
-          ))}
-        </select>
-      </div>
-      <Field label="Order number (optional)" name="order" />
-      <div>
-        <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5">
-          Message
-        </label>
-        <textarea
-          name="message"
-          required
-          rows={6}
-          className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm resize-y"
-        />
-      </div>
-      <button
-        type="submit"
-        className="inline-flex items-center justify-center px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
-      >
-        Send message
-      </button>
-    </form>
-  );
-}
-
-function Field({
-  label,
-  name,
-  type = "text",
-  required,
-}: {
-  label: string;
-  name: string;
-  type?: string;
-  required?: boolean;
-}) {
-  return (
-    <div>
-      <label
-        htmlFor={name}
-        className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
-      >
-        {label}
-      </label>
-      <input
-        id={name}
-        name={name}
-        type={type}
-        required={required}
-        className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
-      />
-    </div>
-  );
-}

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

@@ -1,54 +0,0 @@
-import type { Metadata } from "next";
-import { ContactForm } from "./contact-form";
-import { brand } from "@/lib/brand";
-
-export const metadata: Metadata = {
-  title: `Contact — ${brand.name}`,
-  description: brand.contactPage.body,
-};
-
-export default function ContactPage() {
-  const c = brand.contactPage;
-  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">
-        {c.eyebrow}
-      </p>
-      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-4 -tracking-[0.02em]">
-        {c.title}
-      </h1>
-      <p className="text-lg text-muted-foreground max-w-2xl mb-12 leading-relaxed">{c.body}</p>
-
-      <div className="grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-10 items-start">
-        <ContactForm reasons={c.reasons} />
-        <aside className="space-y-5 lg:pl-10 lg:border-l border-border">
-          <div>
-            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-3">
-              Direct lines
-            </p>
-            <ul className="space-y-3 list-none p-0 m-0">
-              {c.directLines.map((line) => (
-                <li key={line.label}>
-                  <p className="text-xs text-muted-foreground m-0">{line.label}</p>
-                  <a
-                    href={line.href}
-                    className="text-foreground hover:text-primary transition-colors"
-                  >
-                    {line.value}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div>
-            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-3">
-              Visit
-            </p>
-            <p className="text-foreground m-0">{brand.contact.address}</p>
-            <p className="text-xs text-muted-foreground mt-1">{brand.contact.hours}</p>
-          </div>
-        </aside>
-      </div>
-    </article>
-  );
-}

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

@@ -1,61 +0,0 @@
-"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,46 +0,0 @@
-import type { Metadata } from "next";
-import { brand } from "@/lib/brand";
-
-export const metadata: Metadata = {
-  title: `Support — ${brand.name}`,
-  description: "Shipping, warranty, repairs, returns, payment — answers to the questions we hear most often.",
-};
-
-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">
-        {f.eyebrow}
-      </p>
-      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-10 -tracking-[0.025em]">
-        {f.title}
-      </h1>
-      <div className="space-y-12">
-        {f.sections.map((section) => (
-          <section key={section.title}>
-            <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}>
-                  <dt className="font-semibold text-foreground mb-1.5">{item.q}</dt>
-                  <dd className="text-muted-foreground leading-relaxed">{item.a}</dd>
-                </div>
-              ))}
-            </dl>
-          </section>
-        ))}
-      </div>
-      <p className="mt-12 pt-8 border-t border-border text-sm text-muted-foreground">
-        {f.contactPrompt}{" "}
-        <a
-          href={`mailto:${f.contactEmail}`}
-          className="text-primary font-semibold hover:underline"
-        >
-          {f.contactEmail}
-        </a>{" "}
-        and a real human will reply within 24 hours.
-      </p>
-    </article>
-  );
-}

package/templates/storefront-retail/app/globals.css

@@ -1,47 +0,0 @@
-@import "tailwindcss";
-
-/* Scan the SDK's bundled JS so utility classes used inside its components
-   land in the compiled stylesheet alongside our own. */
-@source "../node_modules/@cimplify/sdk/dist";
-
-/* Currents Electronics palette — cool navy chrome, electric blue accent.
-   Modern retail aesthetic; tweak these tokens to retheme everything. */
-@theme {
-  --color-background: oklch(0.99 0.005 240);
-  --color-foreground: oklch(0.2 0.03 250);
-  --color-card: oklch(1 0 0);
-  --color-card-foreground: oklch(0.2 0.03 250);
-  --color-popover: oklch(1 0 0);
-  --color-popover-foreground: oklch(0.2 0.03 250);
-  --color-primary: oklch(0.55 0.22 255);
-  --color-primary-foreground: oklch(0.99 0 0);
-  --color-secondary: oklch(0.95 0.02 250);
-  --color-secondary-foreground: oklch(0.25 0.05 250);
-  --color-muted: oklch(0.96 0.01 250);
-  --color-muted-foreground: oklch(0.5 0.03 250);
-  --color-accent: oklch(0.92 0.07 240);
-  --color-accent-foreground: oklch(0.25 0.1 250);
-  --color-destructive: oklch(0.58 0.24 27);
-  --color-destructive-foreground: oklch(0.99 0 0);
-  --color-border: oklch(0.92 0.01 250);
-  --color-input: oklch(0.94 0.01 250);
-  --color-ring: oklch(0.55 0.22 255);
-  --radius: 0.5rem;
-}
-
-@layer base {
-  html, body {
-    margin: 0;
-    padding: 0;
-    background: var(--color-background);
-    color: var(--color-foreground);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  a { color: inherit; text-decoration: none; }
-  h1, h2, h3, h4 {
-    font-family: var(--font-sans);
-    letter-spacing: -0.02em;
-    font-weight: 600;
-  }
-}

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

@@ -1,77 +0,0 @@
-import type { Metadata } from "next";
-import { Inter, JetBrains_Mono } from "next/font/google";
-import "./globals.css";
-import { Providers } from "@/components/providers";
-import { Header } from "@/components/header";
-import { Footer } from "@/components/footer";
-import { CartDrawer } from "@/components/cart-drawer";
-import { brand } from "@/lib/brand";
-
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-  display: "swap",
-});
-
-const mono = JetBrains_Mono({
-  subsets: ["latin"],
-  variable: "--font-mono",
-  display: "swap",
-});
-
-const SITE_URL =
-  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
-
-export const metadata: Metadata = {
-  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 }) {
-  return (
-    <html lang="en" suppressHydrationWarning className={`${inter.variable} ${mono.variable}`}>
-      <body
-        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 />
-          <CartDrawer />
-        </Providers>
-      </body>
-    </html>
-  );
-}

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

@@ -1,94 +0,0 @@
-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 = `${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/login/page.tsx

@@ -1,17 +0,0 @@
-import type { Metadata } from "next";
-import { redirect } from "next/navigation";
-import { brand } from "@/lib/brand";
-
-export const metadata: Metadata = {
-  title: `Sign in — ${brand.name}`,
-  description: brand.account.loginSubtitle,
-};
-
-/**
- * Cimplify Link (the iframe in `<CimplifyAccount>`) handles sign-in
- * automatically when no session exists. We just bounce /login to /account
- * so consumers landing here get the right UI without a duplicate form.
- */
-export default function LoginPage(): never {
-  redirect("/account");
-}

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

@@ -1,39 +0,0 @@
-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>
-  );
-}