@cimplify/cli 0.6.2 → 0.6.4

package/dist/dispatcher.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
-import { TEMPLATES } from './chunk-PPU3YTG7.mjs';
-import { package_default } from './chunk-XYEZPYCO.mjs';
+import { TEMPLATES } from './chunk-TFEUFCEH.mjs';
+import { package_default } from './chunk-MGP2FUAK.mjs';
 
 // src/dispatcher.ts
 var VERSION = package_default.version ?? "unknown";
@@ -137,15 +137,15 @@ var COMMANDS = {
   logs: () => import('./logs-YNN2PQ24.mjs'),
   status: () => import('./status-JSYXM5RT.mjs'),
   dev: () => import('./dev-ONW2S77K.mjs'),
-  introspect: () => import('./introspect-5ELLE23M.mjs'),
-  doctor: () => import('./doctor-26CFG2CR.mjs'),
-  explain: () => import('./explain-AIMUFEME.mjs'),
+  introspect: () => import('./introspect-DL2HE7DG.mjs'),
+  doctor: () => import('./doctor-ZGW3VZOG.mjs'),
+  explain: () => import('./explain-4ITTI4FM.mjs'),
   assets: () => import('./assets-EBEMMENZ.mjs'),
   repo: () => import('./repo-WOBWKEAO.mjs'),
-  list: () => import('./list-74VZJRQE.mjs'),
-  add: () => import('./add-2DGJIRBT.mjs'),
-  update: () => import('./update-5E646EVY.mjs'),
-  upgrade: () => import('./update-5E646EVY.mjs'),
+  list: () => import('./list-WNNKVK7V.mjs'),
+  add: () => import('./add-NWGER62A.mjs'),
+  update: () => import('./update-EPRLX6FL.mjs'),
+  upgrade: () => import('./update-EPRLX6FL.mjs'),
   "auth-step-up": () => import('./auth-step-up-BIUYQJP6.mjs')
 };
 var COMMAND_PREFIXES = {

package/dist/{doctor-26CFG2CR.mjs → doctor-ZGW3VZOG.mjs}

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-import { gatherIntrospection } from './chunk-SAESFNUJ.mjs';
+import { gatherIntrospection } from './chunk-76TJ56KE.mjs';
 import './chunk-K5464A3L.mjs';
 import './chunk-DBZ3UOQ2.mjs';
-import './chunk-XYEZPYCO.mjs';
+import './chunk-MGP2FUAK.mjs';
 import { parseArgs, flagBool } from './chunk-C4M3DXKC.mjs';
 import { ApiClient } from './chunk-MAOO6ZZ5.mjs';
 import { readAuthOrNull } from './chunk-UBAI443T.mjs';

package/dist/{explain-AIMUFEME.mjs → explain-4ITTI4FM.mjs}

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { package_default } from './chunk-XYEZPYCO.mjs';
+import { package_default } from './chunk-MGP2FUAK.mjs';
 import { parseArgs } from './chunk-C4M3DXKC.mjs';
 import { bold, dim, info, result, CliError, CLI_ERROR_CODE } from './chunk-E2T2SBP5.mjs';
 

package/dist/{introspect-5ELLE23M.mjs → introspect-DL2HE7DG.mjs}

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-export { run as default, extractMockSeed, gatherIntrospection, renderIntrospection } from './chunk-SAESFNUJ.mjs';
+export { run as default, extractMockSeed, gatherIntrospection, renderIntrospection } from './chunk-76TJ56KE.mjs';
 import './chunk-K5464A3L.mjs';
 import './chunk-DBZ3UOQ2.mjs';
-import './chunk-XYEZPYCO.mjs';
+import './chunk-MGP2FUAK.mjs';
 import './chunk-C4M3DXKC.mjs';
 import './chunk-UBAI443T.mjs';
 import './chunk-E2T2SBP5.mjs';

package/dist/{list-74VZJRQE.mjs → list-WNNKVK7V.mjs}

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { REGISTRY_INDEX } from './chunk-PPU3YTG7.mjs';
+import { REGISTRY_INDEX } from './chunk-TFEUFCEH.mjs';
 import { parseArgs, flagBool } from './chunk-C4M3DXKC.mjs';
 import { CliError, CLI_ERROR_CODE, info, bold, dim, green, result } from './chunk-E2T2SBP5.mjs';
 

package/dist/{update-5E646EVY.mjs → update-EPRLX6FL.mjs}

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { package_default } from './chunk-XYEZPYCO.mjs';
+import { package_default } from './chunk-MGP2FUAK.mjs';
 import { promptYesNo } from './chunk-ITAFAORS.mjs';
 import { parseArgs, flagBool, flagString } from './chunk-C4M3DXKC.mjs';
 import { success, bold, info, dim, result, failure, CliError, CLI_ERROR_CODE, step, isJsonMode } from './chunk-E2T2SBP5.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/cli",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Cimplify CLI — deploy, manage env vars, link projects, and scaffold storefronts",
   "keywords": [
     "cimplify",

package/templates/storefront-auto/app/about/page.tsx

@@ -11,7 +11,7 @@ export default function AboutPage() {
   // Title supports a single \n for a hard line break.
   const titleParts = a.title.split("\n");
   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-mono uppercase tracking-[0.16em] text-primary mb-2">
         {a.eyebrow}
       </p>

package/templates/storefront-auto/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-mono uppercase tracking-[0.16em] text-primary mb-2">
         {f.eyebrow}
       </p>

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

@@ -4,7 +4,10 @@ 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 { 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";
 
@@ -25,55 +28,36 @@ 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} ${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(ld) }}
-        />
+        <Suspense fallback={null}>
+          <OrganizationJsonLd />
+        </Suspense>
         <Providers>
           <Header />
           <main className="flex-1 pb-12 w-full">{children}</main>
           <Footer />
+          <Suspense fallback={null}>
+            <ProductModal />
+          </Suspense>
           <CartDrawer />
         </Providers>
       </body>

package/templates/storefront-auto/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="text-3xl mt-0 mb-3 font-bold -tracking-[0.025em]">
         Order confirmed.
       </h1>

package/templates/storefront-auto/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-mono uppercase tracking-[0.16em] text-primary mb-2 not-prose">
         {p.eyebrow}
       </p>

package/templates/storefront-auto/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-mono uppercase tracking-[0.16em] text-primary mb-2 not-prose">
         {t.eyebrow}
       </p>

package/templates/storefront-auto/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-auto/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-auto/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-auto/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";
 
 /**
@@ -22,16 +23,21 @@ export function Header() {
           {brand.microTag}
         </span>
       </Link>
-      <nav className="flex items-center gap-5 sm: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-5 sm: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-auto/components/hero.tsx

@@ -6,7 +6,7 @@ interface HeroProps {
 
 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">
+    <section className="relative px-6 sm: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 && (

package/templates/storefront-auto/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-auto/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-auto/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-auto/components/section-heading.tsx

@@ -9,7 +9,7 @@ interface SectionHeadingProps {
 
 export function SectionHeading({ eyebrow, title, description, link }: SectionHeadingProps) {
   return (
-    <div className="flex items-end justify-between gap-6 mb-8">
+    <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3 sm:gap-6 mb-6 sm:mb-8">
       <div className="max-w-2xl">
         <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
           {eyebrow}
@@ -24,7 +24,7 @@ export function SectionHeading({ eyebrow, title, description, link }: SectionHea
       {link && (
         <Link
           href={link.href}
-          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap hidden sm:inline-flex items-center gap-1"
+          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap inline-flex items-center gap-1 self-start sm:self-auto"
         >
           {link.label}
           <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>

package/templates/storefront-auto/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"

package/templates/storefront-bakery/app/about/page.tsx

@@ -10,7 +10,7 @@ export default function AboutPage() {
   const a = brand.about;
   const titleParts = a.title.split("\n");
   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">
         {a.eyebrow}
       </p>

package/templates/storefront-bakery/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-bakery/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-bakery/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-bakery/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-bakery/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";
@@ -40,38 +41,16 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-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} ${playfair.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-bakery/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-bakery/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>