@cimplify/sdk 0.39.1 → 0.40.0

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

@@ -0,0 +1,117 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Terms of Service — Currents Electronics",
+  description: "The rules of the road for ordering from Currents Electronics.",
+};
+
+export default function TermsPage() {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        Terms of service
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
+        Terms of Service
+      </h1>
+      <p className="text-sm text-muted-foreground not-prose mb-10">
+        Last updated: 1 May 2026
+      </p>
+
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        <h2 className="text-2xl font-semibold mt-0 -tracking-[0.02em]">
+          1. Who we are
+        </h2>
+        <p>
+          Currents Electronics (&quot;we&quot;, &quot;us&quot;) is a consumer
+          electronics retailer based at Atomic Junction, East Legon, Accra,
+          Ghana. By placing an order, you (&quot;you&quot;, &quot;customer&quot;)
+          agree to these terms.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          2. Authorised dealer status
+        </h2>
+        <p>
+          We are authorised dealers for the brands listed on our About page.
+          Every product is sourced direct from the manufacturer or a certified
+          distributor. Serial numbers can be verified on the brand&apos;s
+          official portal at any time.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          3. Pricing and payment
+        </h2>
+        <p>
+          Prices are in Ghana Cedis (GH₵) and include VAT where applicable.
+          Payment is due at checkout via Mobile Money, card, or instalments via
+          our partner bank. Cash on delivery is available for Accra orders only.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          4. Warranty
+        </h2>
+        <p>
+          Every product carries a two-year warranty: the standard manufacturer
+          warranty in year one, plus a Currents-backed extension in year two.
+          Coverage includes manufacturing defects and battery degradation below
+          80%. Accidental damage, liquid damage, and unauthorised modifications
+          are excluded.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          5. Returns
+        </h2>
+        <p>
+          Sealed products: 14 days, no questions asked. Opened products:
+          7 days, subject to a 10% restocking fee for non-defective items.
+          Activated SIM-bundled phones cannot be returned once the SIM is
+          registered. Custom orders and bulk corporate orders are
+          non-refundable except for defects.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          6. Trade-in
+        </h2>
+        <p>
+          Trade-in quotes are estimates only. Final value is determined after
+          inspection by our refurbishment partner. We reserve the right to
+          revise the quote, and you may decline the revised offer and receive
+          your device back at our cost.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          7. Liability
+        </h2>
+        <p>
+          To the maximum extent permitted by Ghanaian law, our liability for
+          any claim arising from this website or your order is limited to the
+          value of the order. We&apos;re not liable for indirect or
+          consequential losses, including data loss.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          8. Governing law
+        </h2>
+        <p>
+          These terms are governed by the laws of Ghana. Disputes will be
+          resolved in the courts of Greater Accra.
+        </p>
+
+        <h2 className="text-2xl font-semibold -tracking-[0.02em]">
+          9. Contact
+        </h2>
+        <p>
+          Questions? Email{" "}
+          <a
+            href="mailto:hello@currentselectronics.test"
+            className="text-primary font-semibold hover:underline"
+          >
+            hello@currentselectronics.test
+          </a>
+          .
+        </p>
+      </section>
+    </article>
+  );
+}

package/templates/storefront-retail/components/cart-pill.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+import { useCartCount } from "@/lib/cart";
+
+/**
+ * Cart pill — dynamic island. Reads the live cart count via the SDK and
+ * renders a link to `/cart`. Wrap in `<Suspense fallback={<CartPillSkeleton/>}>`
+ * so the cached header chrome streams without blocking on the cart fetch.
+ */
+export function CartPill() {
+  const { count } = useCartCount();
+  return (
+    <Link
+      href="/cart"
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105"
+    >
+      Cart · {count}
+    </Link>
+  );
+}
+
+export function CartPillSkeleton() {
+  return (
+    <span
+      aria-hidden
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground/80 text-background text-xs font-semibold tracking-wide"
+    >
+      Cart · …
+    </span>
+  );
+}

package/templates/storefront-retail/components/category-grid.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CategoryGrid as SdkCategoryGrid } from "@cimplify/sdk/react";
+import type { Category } from "@cimplify/sdk";
+
+/**
+ * Homepage category tiles — defers to the SDK's <CategoryGrid/> for layout
+ * and accessibility, and routes selections to /categories/:slug.
+ */
+export function CategoryGrid({ categories }: { categories?: Category[] }) {
+  const router = useRouter();
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-14">
+      <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">Browse the menu</h2>
+      <SdkCategoryGrid
+        categories={categories}
+        onSelect={(c) => router.push(`/categories/${c.slug}`)}
+        classNames={{
+          item: "flex flex-col gap-1 p-6 bg-card border border-border rounded-2xl cursor-pointer text-left transition-all hover:border-primary hover:-translate-y-0.5",
+          name: "font-serif text-lg font-semibold text-foreground",
+          description: "text-xs text-muted-foreground",
+          count: "text-xs text-muted-foreground mt-1",
+        }}
+      />
+    </section>
+  );
+}

package/templates/storefront-retail/components/collection-strip.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import type { Collection, Product } from "@cimplify/sdk";
+import { StoreProductCard } from "./store-product-card";
+
+interface CollectionStripProps {
+  collection: Collection;
+  products: Product[];
+  collectionHref?: string;
+}
+
+/**
+ * Horizontal strip of products under a collection title. Cards come from the
+ * SDK so every variant (Food, Bundle, Composite, Service, …) renders
+ * correctly; clicks open the shared URL-driven product modal.
+ */
+export function CollectionStrip({ collection, products, collectionHref }: CollectionStripProps) {
+  if (products.length === 0) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-8 pt-12">
+      <header className="grid grid-cols-[1fr_auto] items-end gap-4 mb-5">
+        <h2 className="font-serif text-[28px] font-semibold m-0">{collection.name}</h2>
+        {collectionHref && (
+          <Link
+            href={collectionHref}
+            className="text-[13px] font-semibold text-primary hover:underline"
+          >
+            See all →
+          </Link>
+        )}
+        {collection.description && (
+          <p className="col-span-full m-0 mt-1 text-sm text-muted-foreground">
+            {collection.description}
+          </p>
+        )}
+      </header>
+      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto snap-x snap-mandatory pb-2">
+        {products.slice(0, 8).map((p) => (
+          <div key={p.id} className="snap-start">
+            <StoreProductCard product={p} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-retail/components/footer.tsx

@@ -0,0 +1,188 @@
+import Link from "next/link";
+
+const SOCIALS: { label: string; href: string; svg: React.ReactNode }[] = [
+  {
+    label: "Instagram",
+    href: "https://instagram.com/currentselectronics",
+    svg: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className="w-5 h-5">
+        <rect x="3" y="3" width="18" height="18" rx="5" />
+        <circle cx="12" cy="12" r="4" />
+        <circle cx="17.5" cy="6.5" r="0.75" fill="currentColor" />
+      </svg>
+    ),
+  },
+  {
+    label: "X",
+    href: "https://x.com/currentselectronics",
+    svg: (
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+        <path d="M18 2h3l-7.5 8.6L22 22h-6.6l-5-6.5L4 22H1l8-9.2L1.4 2H8l4.6 6 5.4-6z" />
+      </svg>
+    ),
+  },
+  {
+    label: "YouTube",
+    href: "https://youtube.com/@currentselectronics",
+    svg: (
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+        <path d="M22.5 6.5a2.6 2.6 0 0 0-1.8-1.8C19 4.2 12 4.2 12 4.2s-7 0-8.7.5A2.6 2.6 0 0 0 1.5 6.5C1 8.2 1 12 1 12s0 3.8.5 5.5a2.6 2.6 0 0 0 1.8 1.8C5 19.8 12 19.8 12 19.8s7 0 8.7-.5a2.6 2.6 0 0 0 1.8-1.8c.5-1.7.5-5.5.5-5.5s0-3.8-.5-5.5zM10 15.5v-7l6 3.5-6 3.5z" />
+      </svg>
+    ),
+  },
+  {
+    label: "WhatsApp",
+    href: "https://wa.me/233244000000",
+    svg: (
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+        <path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.2-1.4A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.2-1.7 1.2-.5.1-1.1.1-1.7-.1-.4-.1-.9-.3-1.5-.6a8.4 8.4 0 0 1-3.7-3.4c-.7-1-1-1.8-1-2.5 0-.7.4-1.1.6-1.3.2-.2.4-.2.5-.2h.4c.1 0 .3 0 .4.3l.6 1.4c.1.2 0 .3 0 .4l-.3.4-.3.3c-.1.1-.2.2-.1.4.2.4.7 1.1 1.4 1.8.9.8 1.7 1.1 1.9 1.2.2.1.3.1.5-.1l.6-.7c.2-.2.3-.2.5-.1l1.4.7c.2.1.3.2.4.3.1.2.1.6 0 1z" />
+      </svg>
+    ),
+  },
+];
+
+const SITEMAP: { title: string; links: { label: string; href: string }[] }[] = [
+  {
+    title: "Shop",
+    links: [
+      { label: "All products", href: "/shop" },
+      { label: "Laptops", href: "/categories/laptops" },
+      { label: "Phones", href: "/categories/phones" },
+      { label: "Audio", href: "/categories/audio" },
+      { label: "Accessories", href: "/categories/accessories" },
+      { label: "Deals", href: "/categories/deals" },
+    ],
+  },
+  {
+    title: "Support",
+    links: [
+      { label: "Contact", href: "mailto:hello@currentselectronics.test" },
+      { label: "Warranty", href: "/faq#warranty--repairs" },
+      { label: "Returns", href: "/faq#payment--returns" },
+      { label: "Shipping", href: "/faq#ordering--delivery" },
+    ],
+  },
+  {
+    title: "Company",
+    links: [
+      { label: "About", href: "/about" },
+      { label: "Trade-in", href: "/about" },
+      { label: "Business sales", href: "mailto:business@currentselectronics.test" },
+      { label: "Careers", href: "/about" },
+    ],
+  },
+  {
+    title: "Legal",
+    links: [
+      { label: "Terms of Service", href: "/terms" },
+      { label: "Privacy Policy", href: "/privacy" },
+    ],
+  },
+];
+
+export async function Footer() {
+  "use cache";
+  const year = new Date().getFullYear();
+  return (
+    <footer className="mt-16 border-t border-border bg-foreground text-background/80 text-sm">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 pt-12 pb-8">
+        <div className="grid gap-10 md:grid-cols-[1.4fr_repeat(4,1fr)]">
+          <div>
+            <div className="flex items-center gap-2.5 mb-4">
+              <span className="grid place-items-center w-8 h-8 rounded-md bg-primary text-primary-foreground text-[13px] font-bold font-mono">
+                C
+              </span>
+              <span className="text-background text-lg font-bold -tracking-[0.025em]">
+                Currents Electronics
+              </span>
+            </div>
+            <p className="leading-relaxed mb-4 max-w-sm">
+              Authorised dealer for Apple, Samsung, Sony, Bose. Same-day
+              delivery in Accra; nationwide via partner courier. Two-year
+              warranty on every product.
+            </p>
+            <address className="not-italic space-y-1">
+              <p className="m-0">Atomic Junction, East Legon, Accra</p>
+              <p className="m-0">
+                <a href="tel:+233244000000" className="hover:text-background transition-colors">
+                  +233 244 000 000
+                </a>
+              </p>
+              <p className="m-0">
+                <a
+                  href="mailto:hello@currentselectronics.test"
+                  className="hover:text-background transition-colors"
+                >
+                  hello@currentselectronics.test
+                </a>
+              </p>
+              <p className="m-0 text-xs">Mon–Sat · 9am–8pm</p>
+            </address>
+            <div className="flex items-center gap-3 mt-5">
+              {SOCIALS.map((s) => (
+                <a
+                  key={s.label}
+                  href={s.href}
+                  aria-label={s.label}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center justify-center w-9 h-9 rounded-md border border-background/20 hover:bg-primary hover:border-primary transition-colors"
+                >
+                  {s.svg}
+                </a>
+              ))}
+            </div>
+          </div>
+          {SITEMAP.map((section) => (
+            <nav key={section.title} aria-labelledby={`footer-${section.title}`}>
+              <p
+                id={`footer-${section.title}`}
+                className="text-background font-mono mb-3 text-[11px] uppercase tracking-[0.12em]"
+              >
+                {section.title}
+              </p>
+              <ul className="space-y-2 m-0 p-0 list-none">
+                {section.links.map((link) => (
+                  <li key={link.label}>
+                    <Link
+                      href={link.href}
+                      className="hover:text-background transition-colors"
+                    >
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))}
+        </div>
+
+        <div className="mt-12 pt-6 border-t border-background/15 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs">
+          <p className="m-0">© {year} Currents Electronics. All rights reserved.</p>
+          <p className="m-0 inline-flex items-center gap-1.5">
+            <span className="opacity-70">Powered by</span>
+            <a
+              href="https://app.cimplify.io"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Cimplify"
+              className="inline-flex items-center gap-1 text-background hover:text-primary transition-colors"
+            >
+              <span className="font-semibold tracking-tight">Cimplify</span>
+              <svg
+                viewBox="0 0 12 12"
+                aria-hidden
+                className="w-3 h-3 opacity-70"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+              >
+                <path d="M3 9L9 3M9 3H4M9 3v5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/storefront-retail/components/header.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import { Suspense } from "react";
+import { NavLink } from "./nav-link";
+import { CartPill, CartPillSkeleton } from "./cart-pill";
+
+/**
+ * Server-rendered header chrome. Brand mark + nav layout streams from the
+ * cache; the active-link styling and live cart count are dynamic islands
+ * mounted in their own Suspense boundaries so the chrome never blocks.
+ */
+export function Header() {
+  return (
+    <header className="sticky top-0 z-30 flex items-center justify-between px-6 sm:px-8 py-3.5 border-b border-border bg-background/90 backdrop-blur-md">
+      <Link href="/" className="flex items-center gap-2.5 group">
+        <span className="grid place-items-center w-8 h-8 rounded-md bg-foreground text-background text-[13px] font-bold font-mono group-hover:bg-primary transition-colors">
+          C
+        </span>
+        <span className="text-[18px] font-bold -tracking-[0.025em]">Currents</span>
+        <span className="hidden sm:inline text-[10px] font-mono uppercase tracking-[0.16em] text-muted-foreground border border-border rounded px-1.5 py-0.5">
+          ELECTRONICS
+        </span>
+      </Link>
+      <nav className="flex items-center gap-5 sm:gap-6">
+        <Suspense fallback={<NavLinkFallback>Shop</NavLinkFallback>}>
+          <NavLink href="/shop">Shop</NavLink>
+        </Suspense>
+        <Suspense fallback={<NavLinkFallback>Deals</NavLinkFallback>}>
+          <NavLink href="/categories/deals">Deals</NavLink>
+        </Suspense>
+        <Suspense fallback={<NavLinkFallback>Support</NavLinkFallback>}>
+          <NavLink href="/faq">Support</NavLink>
+        </Suspense>
+        <Suspense fallback={<CartPillSkeleton />}>
+          <CartPill />
+        </Suspense>
+      </nav>
+    </header>
+  );
+}
+
+function NavLinkFallback({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="text-[13px] font-medium tracking-wide text-muted-foreground">
+      {children}
+    </span>
+  );
+}

package/templates/storefront-retail/components/hero.tsx

@@ -0,0 +1,28 @@
+interface HeroProps {
+  badge?: string;
+  title: string;
+  subtitle?: string;
+}
+
+export function Hero({ badge, title, subtitle }: HeroProps) {
+  return (
+    <section className="relative px-8 py-20 text-center overflow-hidden bg-gradient-to-br from-foreground via-foreground to-primary text-background">
+      <div className="absolute inset-0 opacity-[0.06] pointer-events-none [background-image:radial-gradient(circle_at_2px_2px,white_1px,transparent_0)] [background-size:32px_32px]" />
+      <div className="relative max-w-3xl mx-auto">
+        {badge && (
+          <span className="inline-block mb-5 px-3.5 py-1.5 rounded-full bg-primary/15 border border-primary/30 text-primary-foreground/90 text-[11px] font-semibold uppercase tracking-[0.16em] font-mono">
+            {badge}
+          </span>
+        )}
+        <h1 className="text-[clamp(2.5rem,6vw,4rem)] font-bold m-0 -tracking-[0.03em] leading-[1.05]">
+          {title}
+        </h1>
+        {subtitle && (
+          <p className="mx-auto mt-5 max-w-2xl text-base sm:text-lg text-background/80 leading-relaxed">
+            {subtitle}
+          </p>
+        )}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-retail/components/nav-link.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
+  const pathname = usePathname();
+  const active = pathname === href;
+  return (
+    <Link
+      href={href}
+      className={[
+        "text-[13px] font-medium tracking-wide transition-colors",
+        active ? "text-primary" : "text-muted-foreground hover:text-foreground",
+      ].join(" ")}
+    >
+      {children}
+    </Link>
+  );
+}

package/templates/storefront-retail/components/product-modal.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { ProductSheet, useProduct, useCart } from "@cimplify/sdk/react";
+
+/**
+ * URL-driven product modal. Reads `?product=<slug>` and renders the SDK's
+ * `<ProductSheet/>` — vertical layout with image-on-top, then header, then
+ * the variant/add-on/composite/bundle customizer. Closing the modal clears
+ * the search param. Deep-linkable and survives reloads.
+ */
+export function ProductModal() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const slug = searchParams?.get("product") ?? null;
+
+  const { product } = useProduct(slug ?? "", { enabled: Boolean(slug) });
+  const { addToCart } = useCart();
+
+  useEffect(() => {
+    if (!slug) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [slug]);
+
+  useEffect(() => {
+    if (!slug) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug]);
+
+  if (!slug) return null;
+
+  function close() {
+    const next = new URLSearchParams(searchParams?.toString() ?? "");
+    next.delete("product");
+    const qs = next.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      onClick={close}
+      className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center sm:p-6 bg-foreground/50 backdrop-blur-sm"
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="relative w-full sm:max-w-lg max-h-[92vh] overflow-auto bg-card sm:rounded-3xl rounded-t-3xl shadow-2xl"
+      >
+        <button
+          onClick={close}
+          aria-label="Close product details"
+          className="absolute top-4 right-4 z-10 w-9 h-9 rounded-full bg-card border border-border text-sm cursor-pointer transition-colors hover:bg-muted"
+        >
+          ✕
+        </button>
+        {product ? (
+          <ProductSheet
+            product={product}
+            onClose={close}
+            onAddToCart={async (p, qty, options) => {
+              await addToCart(p.id, qty, options);
+              close();
+              router.push("/cart");
+            }}
+            renderImage={({ src, alt, className }) => (
+              <Image
+                src={src}
+                alt={alt}
+                width={1200}
+                height={900}
+                className={className}
+                style={{ width: "100%", height: "auto", objectFit: "cover" }}
+                priority
+              />
+            )}
+            classNames={{
+              root: "p-6 sm:p-8 gap-4",
+              image: "rounded-2xl overflow-hidden -mx-6 sm:-mx-8 -mt-6 sm:-mt-8 mb-2",
+              header: "flex items-baseline justify-between gap-4",
+              name: "font-serif text-2xl font-semibold m-0",
+              price: "text-lg font-semibold text-primary",
+              description: "text-sm text-muted-foreground leading-relaxed",
+              customizer: "pt-2",
+            }}
+          />
+        ) : (
+          <div className="p-8 text-center text-muted-foreground">Loading…</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-retail/components/providers.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import { createCimplifyClient } from "@cimplify/sdk";
+import { CimplifyProvider } from "@cimplify/sdk/react";
+
+/**
+ * Boots the Cimplify SDK client once on the client-side and exposes it via
+ * <CimplifyProvider/>.
+ *
+ * Base-URL resolution:
+ *   1) If NEXT_PUBLIC_CIMPLIFY_API_URL is set, use it verbatim.
+ *   2) Otherwise use the current origin so requests flow through the
+ *      Next.js rewrite in `next.config.ts` to the mock at :8787 (no CORS).
+ *   3) Fall back to 127.0.0.1:8787 only during SSR, when there's no window.
+ */
+export function Providers({ children }: { children: ReactNode }) {
+  const client = useMemo(() => {
+    const baseUrl =
+      process.env.NEXT_PUBLIC_CIMPLIFY_API_URL?.trim() ||
+      (typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8787");
+    const publicKey = process.env.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY ?? "mock-dev";
+    return createCimplifyClient({
+      baseUrl,
+      publicKey,
+      suppressPublicKeyWarning: true,
+    });
+  }, []);
+
+  return <CimplifyProvider client={client}>{children}</CimplifyProvider>;
+}