@cimplify/cli 0.6.2 → 0.6.4

package/templates/storefront-services/app/book/book-client.tsx

@@ -1,26 +1,19 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
 import type { Product } from "@cimplify/sdk";
-import { useCart } from "@cimplify/sdk/react";
-
-interface Slot {
-  date: Date;
-  label: string;
-}
+import type { AvailableSlot } from "@cimplify/sdk";
+import { useCart, DateSlotPicker } from "@cimplify/sdk/react";
 
 /**
- * Real booking flow:
- *   1. Pick a treatment (left rail)
- *   2. Pick a date (chips, today + next 13 days)
- *   3. Pick a slot (15-minute grid, 10am–7pm)
- *   4. Add to cart with the chosen slot as a cart-item note;
+ * Booking flow:
+ *   1. Pick a treatment (left rail) — drives the SDK availability fetch.
+ *   2. SDK <DateSlotPicker> handles date + slot selection, fetching real
+ *      availability via `useServiceAvailability` against the configured
+ *      backend (mock in dev, Cimplify scheduling API in prod).
+ *   3. Add to cart with the chosen slot as a cart-item note;
  *      Cimplify Checkout finalises the booking.
- *
- * The slot grid is generated client-side as a placeholder. In production,
- * call `useAvailableSlots({ serviceId, date })` from `@cimplify/sdk/react`
- * to fetch real availability from the Cimplify scheduling API.
  */
 export function BookClient({ treatments }: { treatments: Product[] }) {
   const router = useRouter();
@@ -28,41 +21,22 @@ export function BookClient({ treatments }: { treatments: Product[] }) {
   const [selectedTreatment, setSelectedTreatment] = useState<Product | undefined>(
     treatments[0],
   );
-  const [selectedDate, setSelectedDate] = useState<Date>(() => new Date());
-  const [selectedSlotKey, setSelectedSlotKey] = useState<string | null>(null);
+  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
-  const dates = useMemo(() => {
-    const now = new Date();
-    return Array.from({ length: 14 }).map((_, i) => {
-      const d = new Date(now);
-      d.setDate(now.getDate() + i);
-      d.setHours(0, 0, 0, 0);
-      return d;
-    });
-  }, []);
-
-  const slots = useMemo<Slot[]>(() => {
-    const out: Slot[] = [];
-    for (let h = 10; h <= 19; h++) {
-      for (const m of [0, 30]) {
-        const d = new Date(selectedDate);
-        d.setHours(h, m, 0, 0);
-        const label = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
-        out.push({ date: d, label });
-      }
-    }
-    return out;
-  }, [selectedDate]);
-
-  const slotKey = (s: Slot) => s.date.toISOString();
-
   async function confirm() {
-    if (!selectedTreatment || !selectedSlotKey) return;
+    if (!selectedTreatment || !selectedSlot) return;
     setSubmitting(true);
     try {
+      const slotLabel = new Date(selectedSlot.start_time).toLocaleString(undefined, {
+        weekday: "short",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
       await addItem(selectedTreatment, 1, {
-        notes: `Booked for ${new Date(selectedSlotKey).toLocaleString()}`,
+        specialInstructions: `Booked for ${slotLabel}`,
       });
       router.push("/checkout");
     } catch {
@@ -92,7 +66,10 @@ export function BookClient({ treatments }: { treatments: Product[] }) {
               <button
                 key={t.id}
                 type="button"
-                onClick={() => setSelectedTreatment(t)}
+                onClick={() => {
+                  setSelectedTreatment(t);
+                  setSelectedSlot(null);
+                }}
                 className={[
                   "w-full text-left rounded-2xl border p-4 transition-colors",
                   active
@@ -120,73 +97,32 @@ export function BookClient({ treatments }: { treatments: Product[] }) {
         </div>
       </div>
 
-      {/* Date + slots */}
-      <div className="rounded-2xl border border-border bg-card p-6">
-        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-3">
-          Date
-        </p>
-        <div className="grid grid-cols-7 gap-1.5 mb-6">
-          {dates.map((d) => {
-            const active = d.toDateString() === selectedDate.toDateString();
-            return (
-              <button
-                key={d.toISOString()}
-                type="button"
-                onClick={() => {
-                  setSelectedDate(d);
-                  setSelectedSlotKey(null);
-                }}
-                className={[
-                  "flex flex-col items-center justify-center py-2 rounded-md transition-colors",
-                  active
-                    ? "bg-foreground text-background"
-                    : "bg-background hover:bg-muted text-foreground",
-                ].join(" ")}
-              >
-                <span className="text-[10px] uppercase tracking-wider opacity-60">
-                  {d.toLocaleString(undefined, { weekday: "short" })}
-                </span>
-                <span className="text-base font-semibold tabular-nums">{d.getDate()}</span>
-              </button>
-            );
-          })}
-        </div>
-
-        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-3">
-          Slot
-        </p>
-        <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
-          {slots.map((s) => {
-            const key = slotKey(s);
-            const active = selectedSlotKey === key;
-            return (
-              <button
-                key={key}
-                type="button"
-                onClick={() => setSelectedSlotKey(key)}
-                className={[
-                  "py-2 rounded-md text-sm tabular-nums transition-colors",
-                  active
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-background border border-border hover:border-primary",
-                ].join(" ")}
-              >
-                {s.label}
-              </button>
-            );
-          })}
-        </div>
+      {/* Date + slots — SDK <DateSlotPicker> fetches real availability */}
+      <div className="rounded-2xl border border-border bg-card p-4 sm:p-6">
+        {selectedTreatment ? (
+          <DateSlotPicker
+            serviceId={selectedTreatment.id}
+            selectedSlot={selectedSlot}
+            onSlotSelect={(slot) => setSelectedSlot(slot)}
+            daysToShow={selectedTreatment.scheduling_mode === "multi_day" ? 14 : 7}
+            schedulingMode={selectedTreatment.scheduling_mode}
+            durationUnit={selectedTreatment.duration_unit}
+            durationValue={selectedTreatment.duration_value}
+          />
+        ) : (
+          <p className="text-sm text-muted-foreground">Pick a treatment to see availability.</p>
+        )}
 
         <button
           type="button"
           onClick={confirm}
-          disabled={!selectedTreatment || !selectedSlotKey || submitting}
+          disabled={!selectedTreatment || !selectedSlot || submitting}
           className="w-full mt-6 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {submitting
             ? "Confirming…"
-            : selectedSlotKey
-              ? `Book ${selectedTreatment?.name} at ${new Date(selectedSlotKey).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}`
+            : selectedSlot
+              ? `Book ${selectedTreatment?.name} at ${new Date(selectedSlot.start_time).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}`
               : "Pick a slot to book"}
         </button>
       </div>

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

@@ -71,7 +71,7 @@ async function CategoryContent({
 
   const { category, products } = data;
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm: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
@@ -102,7 +102,7 @@ async function CategoryContent({
 
 function CategorySkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm: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" />

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

@@ -71,7 +71,7 @@ async function CollectionContent({
 
   const { collection, products } = data;
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm: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
@@ -102,7 +102,7 @@ async function CollectionContent({
 
 function CollectionSkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm: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" />

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

@@ -24,7 +24,7 @@ export default function GlobalError({
   }, [error]);
 
   return (
-    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-3">
         Something broke
       </p>

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

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default function FaqPage() {
   const f = brand.faq;
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
         {f.eyebrow}
       </p>

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

@@ -6,6 +6,7 @@ import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
 import { ProductModal } from "@/components/product-modal";
 import { CartDrawer } from "@/components/cart-drawer";
+import { OrganizationJsonLd } from "@/components/json-ld";
 import { Suspense } from "react";
 import { brand } from "@/lib/brand";
 import { getSiteUrl } from "@/lib/site-url";
@@ -27,51 +28,29 @@ export async function generateMetadata(): Promise<Metadata> {
   return {
     metadataBase: new URL(siteUrl),
     title: {
-    default: brand.name,
-    template: `%s — ${brand.name}`,
+      default: brand.name,
+      template: `%s — ${brand.name}`,
     },
     description: brand.description,
     openGraph: {
-    type: "website",
-    siteName: brand.name,
-    locale: brand.locale,
+      type: "website",
+      siteName: brand.name,
+      locale: brand.locale,
     },
     twitter: { card: "summary_large_image" },
   };
 }
 
-async function organizationLd() {
-  const siteUrl = await getSiteUrl();
-  return {
-    "@context": "https://schema.org",
-    "@type": brand.schemaType,
-    name: brand.name,
-    url: siteUrl,
-    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 async function RootLayout({ children }: { children: React.ReactNode }) {
-  const ld = await organizationLd();
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning className={`${inter.variable} ${fraunces.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(ld) }}
-        />
+        <Suspense fallback={null}>
+          <OrganizationJsonLd />
+        </Suspense>
         <Providers>
           <Header />
           <main className="flex-1 pb-12 w-full">{children}</main>

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

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-3">
         404
       </p>

package/templates/storefront-services/app/orders/[id]/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 export default async function OrderPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   return (
-    <section className="max-w-2xl mx-auto px-8 py-20 text-center">
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
       <h1 className="font-serif text-3xl mt-0 mb-3">Thanks — your order is confirmed</h1>
       <p className="text-muted-foreground">
         Order <code className="font-mono text-foreground">{id}</code>

package/templates/storefront-services/app/page.tsx

@@ -72,7 +72,7 @@ export default async function HomePage() {
 
 function StripSkeleton({ title }: { title: string }) {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-12">
       <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">{title}</h2>
       <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto pb-2">
         {Array.from({ length: 5 }).map((_, i) => (
@@ -85,7 +85,7 @@ function StripSkeleton({ title }: { title: string }) {
 
 function CategoryGridSkeleton() {
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-14">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-14">
       <div className="h-8 w-48 bg-muted rounded mb-5 animate-pulse" />
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {Array.from({ length: 6 }).map((_, i) => (

package/templates/storefront-services/app/privacy/page.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default function PrivacyPage() {
   const p = brand.privacy;
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16 prose prose-lg max-w-none">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
         {p.eyebrow}
       </p>

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

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default function TermsPage() {
   const t = brand.terms;
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16 prose prose-lg max-w-none">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
         {t.eyebrow}
       </p>

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

@@ -17,7 +17,7 @@ export function CartPill() {
       type="button"
       onClick={open}
       aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
-      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 cursor-pointer"
+      className="inline-flex items-center gap-1.5 px-4 py-2.5 sm:py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
     >
       Cart · {count}
     </button>
@@ -28,7 +28,7 @@ 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"
+      className="inline-flex items-center gap-1.5 px-4 py-2.5 sm:py-2 rounded-full bg-foreground/80 text-background text-xs font-semibold tracking-wide"
     >
       Cart · …
     </span>

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

@@ -11,7 +11,7 @@ import type { Category } from "@cimplify/sdk";
 export function CategoryGrid({ categories }: { categories?: Category[] }) {
   const router = useRouter();
   return (
-    <section className="max-w-7xl mx-auto px-8 pt-14">
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 pt-14">
       <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">Browse the menu</h2>
       <SdkCategoryGrid
         categories={categories}

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

@@ -16,7 +16,7 @@ interface CollectionStripProps {
 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">
+    <section className="max-w-7xl mx-auto px-6 sm: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 && (

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

@@ -51,7 +51,7 @@ export async function Footer() {
   "use cache";
   const year = new Date().getFullYear();
   return (
-    <footer className="mt-12 px-8 py-10 text-xs text-muted-foreground border-t border-border bg-card">
+    <footer className="mt-12 px-6 sm:px-8 py-10 text-xs text-muted-foreground border-t border-border bg-card">
       <div className="max-w-7xl mx-auto">
         <div className="grid gap-10 md:grid-cols-[1.4fr_repeat(4,1fr)]">
           <div>

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

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Suspense } from "react";
 import { NavLink } from "./nav-link";
 import { CartPill, CartPillSkeleton } from "./cart-pill";
+import { MobileNav } from "./mobile-nav";
 import { brand } from "@/lib/brand";
 
 /**
@@ -11,25 +12,30 @@ import { brand } from "@/lib/brand";
  */
 export function Header() {
   return (
-    <header className="sticky top-0 z-30 flex items-center justify-between px-8 py-4 border-b border-border bg-background/90 backdrop-blur-md">
+    <header className="sticky top-0 z-30 flex items-center justify-between px-6 sm:px-8 py-4 border-b border-border bg-background/90 backdrop-blur-md">
       <Link href="/" className="flex items-baseline gap-2">
         <span className="font-serif text-[22px] font-semibold -tracking-[0.02em]">
           {brand.shortName}
         </span>
-        <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
+        <span className="hidden sm:inline text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
           {brand.microTag}
         </span>
       </Link>
-      <nav className="flex items-center gap-6">
-        {brand.header.nav.map((link) => (
-          <Suspense key={link.href} fallback={<NavLinkFallback>{link.label}</NavLinkFallback>}>
-            <NavLink href={link.href}>{link.label}</NavLink>
-          </Suspense>
-        ))}
+      <div className="flex items-center gap-3 sm:gap-6">
+        <nav className="hidden sm:flex items-center gap-6">
+          {brand.header.nav.map((link) => (
+            <Suspense key={link.href} fallback={<NavLinkFallback>{link.label}</NavLinkFallback>}>
+              <NavLink href={link.href}>{link.label}</NavLink>
+            </Suspense>
+          ))}
+        </nav>
         <Suspense fallback={<CartPillSkeleton />}>
           <CartPill />
         </Suspense>
-      </nav>
+        <div className="sm:hidden">
+          <MobileNav />
+        </div>
+      </div>
     </header>
   );
 }

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

@@ -6,7 +6,7 @@ interface HeroProps {
 
 export function Hero({ badge, title, subtitle }: HeroProps) {
   return (
-    <section className="px-8 py-16 text-center bg-gradient-to-b from-accent to-background">
+    <section className="px-6 sm:px-8 py-16 text-center bg-gradient-to-b from-accent to-background">
       {badge && (
         <span className="inline-block mb-4 px-3.5 py-1.5 rounded-full bg-card border border-accent text-accent-foreground text-[11px] font-semibold uppercase tracking-[0.12em]">
           {badge}

package/templates/storefront-services/components/json-ld.tsx

@@ -0,0 +1,34 @@
+import { brand } from "@/lib/brand";
+import { getSiteUrl } from "@/lib/site-url";
+
+/**
+ * Streams the organization JSON-LD script tag in async so it doesn't block
+ * the rest of the layout shell. `getSiteUrl` reads request headers, and
+ * any await on dynamic data inside `RootLayout` makes Next 16 mark the
+ * whole route as blocking.
+ */
+export async function OrganizationJsonLd(): Promise<React.ReactElement> {
+  const siteUrl = await getSiteUrl();
+  const ld = {
+    "@context": "https://schema.org",
+    "@type": brand.schemaType,
+    name: brand.name,
+    url: siteUrl,
+    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),
+  };
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }}
+    />
+  );
+}

package/templates/storefront-services/components/mobile-nav.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+/**
+ * Hamburger button + slide-in drawer for narrow viewports. Header hides
+ * its inline nav links below `sm` and renders this in their place; the
+ * cart pill stays in the header chrome.
+ */
+export function MobileNav() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label="Open menu"
+        aria-expanded={open}
+        aria-controls="mobile-nav-drawer"
+        className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
+      >
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </button>
+
+      {open ? (
+        <div className="fixed inset-0 z-50 sm:hidden">
+          <button
+            type="button"
+            onClick={() => setOpen(false)}
+            aria-label="Close menu"
+            className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+          />
+          <nav
+            id="mobile-nav-drawer"
+            aria-label="Mobile navigation"
+            className="absolute inset-y-0 right-0 w-[85%] max-w-sm flex flex-col bg-background border-l border-border shadow-2xl"
+          >
+            <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                Menu
+              </span>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                aria-label="Close menu"
+                className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+            <ul className="flex flex-col gap-1 px-3 py-4">
+              {brand.header.nav.map((link) => (
+                <li key={link.href}>
+                  <Link
+                    href={link.href}
+                    onClick={() => setOpen(false)}
+                    className="block px-3 py-3 rounded-md text-base font-medium text-foreground hover:bg-muted transition-colors"
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      ) : null}
+    </>
+  );
+}

package/templates/storefront-services/components/policy-page.tsx

@@ -13,7 +13,7 @@ interface PolicyShape {
  */
 export function PolicyPage({ policy }: { policy: PolicyShape }) {
   return (
-    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+    <article className="max-w-3xl mx-auto px-6 sm:px-8 py-16 prose prose-lg max-w-none">
       <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
         {policy.eyebrow}
       </p>

package/templates/storefront-services/package.json

@@ -17,7 +17,7 @@
     "check": "bun run typecheck && bun run test:run"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.47.0",
+    "@cimplify/sdk": "^0.48.0",
     "next": "^16.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"