@cimplify/cli 0.6.8 → 0.6.10

package/dist/{chunk-KPEMFKKN.mjs → chunk-ZTKQOLAC.mjs}

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { gitDetectRoot, gitCurrentBranch, gitCurrentSha, gitStatusPorcelain } from './chunk-K5464A3L.mjs';
 import { parseEnvFile } from './chunk-DBZ3UOQ2.mjs';
-import { package_default } from './chunk-AS2SIMRN.mjs';
+import { package_default } from './chunk-5L6LJE6I.mjs';
 import { parseArgs } from './chunk-C4M3DXKC.mjs';
 import { readAuthOrNull, readProjectLinkOrNull, readProjectState } from './chunk-UBAI443T.mjs';
 import { bold, dim, yellow, green, info, result, red } from './chunk-E2T2SBP5.mjs';

package/dist/dispatcher.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
-import { TEMPLATES } from './chunk-EALN6SAN.mjs';
-import { package_default } from './chunk-AS2SIMRN.mjs';
+import { TEMPLATES } from './chunk-EKJ6T66O.mjs';
+import { package_default } from './chunk-5L6LJE6I.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-3EMAYETR.mjs'),
-  doctor: () => import('./doctor-Y6XJWZVX.mjs'),
-  explain: () => import('./explain-WDIQSCUY.mjs'),
+  introspect: () => import('./introspect-HYJ6VI3U.mjs'),
+  doctor: () => import('./doctor-SSSYBYCL.mjs'),
+  explain: () => import('./explain-VG7XUP62.mjs'),
   assets: () => import('./assets-EBEMMENZ.mjs'),
   repo: () => import('./repo-WOBWKEAO.mjs'),
-  list: () => import('./list-KO2QX42Q.mjs'),
-  add: () => import('./add-U4S5DBPN.mjs'),
-  update: () => import('./update-J6ZDMCOB.mjs'),
-  upgrade: () => import('./update-J6ZDMCOB.mjs'),
+  list: () => import('./list-NQP4SU5K.mjs'),
+  add: () => import('./add-GDHA7MKM.mjs'),
+  update: () => import('./update-HHRCPKSU.mjs'),
+  upgrade: () => import('./update-HHRCPKSU.mjs'),
   "auth-step-up": () => import('./auth-step-up-BIUYQJP6.mjs')
 };
 var COMMAND_PREFIXES = {

package/dist/{doctor-Y6XJWZVX.mjs → doctor-SSSYBYCL.mjs}

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-import { gatherIntrospection } from './chunk-KPEMFKKN.mjs';
+import { gatherIntrospection } from './chunk-ZTKQOLAC.mjs';
 import './chunk-K5464A3L.mjs';
 import './chunk-DBZ3UOQ2.mjs';
-import './chunk-AS2SIMRN.mjs';
+import './chunk-5L6LJE6I.mjs';
 import { parseArgs, flagBool } from './chunk-C4M3DXKC.mjs';
 import { ApiClient } from './chunk-MAOO6ZZ5.mjs';
 import { readAuthOrNull } from './chunk-UBAI443T.mjs';

package/dist/{explain-WDIQSCUY.mjs → explain-VG7XUP62.mjs}

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

package/dist/{introspect-3EMAYETR.mjs → introspect-HYJ6VI3U.mjs}

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-export { run as default, extractMockSeed, gatherIntrospection, renderIntrospection } from './chunk-KPEMFKKN.mjs';
+export { run as default, extractMockSeed, gatherIntrospection, renderIntrospection } from './chunk-ZTKQOLAC.mjs';
 import './chunk-K5464A3L.mjs';
 import './chunk-DBZ3UOQ2.mjs';
-import './chunk-AS2SIMRN.mjs';
+import './chunk-5L6LJE6I.mjs';
 import './chunk-C4M3DXKC.mjs';
 import './chunk-UBAI443T.mjs';
 import './chunk-E2T2SBP5.mjs';

package/dist/{list-KO2QX42Q.mjs → list-NQP4SU5K.mjs}

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { REGISTRY_INDEX } from './chunk-EALN6SAN.mjs';
+import { REGISTRY_INDEX } from './chunk-EKJ6T66O.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-J6ZDMCOB.mjs → update-HHRCPKSU.mjs}

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { package_default } from './chunk-AS2SIMRN.mjs';
+import { package_default } from './chunk-5L6LJE6I.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.8",
+  "version": "0.6.10",
   "description": "Cimplify CLI — deploy, manage env vars, link projects, and scaffold storefronts",
   "keywords": [
     "cimplify",

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

@@ -53,7 +53,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </Suspense>
         <Providers>
           <Header />
-          <main className="flex-1 pb-12 w-full">{children}</main>
+          <main className="flex-1 pb-12 w-full">
+            <Suspense fallback={null}>{children}</Suspense>
+          </main>
           <Footer />
           <Suspense fallback={null}>
             <ProductModal />

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

@@ -0,0 +1,104 @@
+"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 { addItem } = 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 addItem(p, qty, options);
+              close();
+            }}
+            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-auto/lib/site-url.ts

@@ -1,29 +1,6 @@
-import { headers } from "next/headers";
+import { SITE_URL } from "./site.config";
 
-/**
- * Canonical absolute URL for this storefront, derived at request time.
- *
- * Resolution order:
- *   1. `NEXT_PUBLIC_SITE_URL` — set when you need a fixed canonical
- *      (multiple domains, www-vs-apex preference, etc.).
- *   2. The request `Host` header — works automatically on every deploy,
- *      including preview URLs and custom domains.
- *   3. `https://example.com` — only ever returned during prerender of
- *      a page that has no live request (rare in App Router).
- */
+/** Canonical absolute URL for this storefront. */
 export async function getSiteUrl(): Promise<string> {
-  const explicit = process.env.NEXT_PUBLIC_SITE_URL?.trim();
-  if (explicit) return explicit;
-
-  try {
-    const h = await headers();
-    const host = h.get("host");
-    if (host) {
-      const isLocal = host.startsWith("localhost") || host.startsWith("127.");
-      return `${isLocal ? "http" : "https"}://${host}`;
-    }
-  } catch {
-    // `headers()` is unavailable in some build contexts — fall through.
-  }
-  return "https://example.com";
+  return SITE_URL;
 }

package/templates/storefront-auto/lib/site.config.ts

@@ -0,0 +1,7 @@
+/**
+ * Canonical absolute URL. The platform overwrites this at build time with the
+ * storefront's primary domain; the default only applies to local builds. It's
+ * per-deploy config, not per-request, so it stays a static constant — keeping
+ * the root layout prerenderable under `cacheComponents`.
+ */
+export const SITE_URL = "https://example.com";

package/templates/storefront-auto/next.config.ts

@@ -24,6 +24,13 @@ const nextConfig: NextConfig = {
   // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
   // dynamic Suspense boundaries fill in when ready.
   cacheComponents: true,
+  async redirects() {
+    // Config-level so cacheComponents needn't prerender a redirect()-only page.
+    return [
+      { source: "/login", destination: "/account", permanent: false },
+      { source: "/signup", destination: "/account", permanent: false },
+    ];
+  },
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${STOREFRONT_URL}/api/v1/:path*` },

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

@@ -53,7 +53,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </Suspense>
         <Providers>
           <Header />
-          <main className="flex-1 pb-12 w-full">{children}</main>
+          <main className="flex-1 pb-12 w-full">
+            <Suspense fallback={null}>{children}</Suspense>
+          </main>
           <Footer />
           <Suspense fallback={null}>
             <ProductModal />

package/templates/storefront-bakery/lib/site-url.ts

@@ -1,29 +1,6 @@
-import { headers } from "next/headers";
+import { SITE_URL } from "./site.config";
 
-/**
- * Canonical absolute URL for this storefront, derived at request time.
- *
- * Resolution order:
- *   1. `NEXT_PUBLIC_SITE_URL` — set when you need a fixed canonical
- *      (multiple domains, www-vs-apex preference, etc.).
- *   2. The request `Host` header — works automatically on every deploy,
- *      including preview URLs and custom domains.
- *   3. `https://example.com` — only ever returned during prerender of
- *      a page that has no live request (rare in App Router).
- */
+/** Canonical absolute URL for this storefront. */
 export async function getSiteUrl(): Promise<string> {
-  const explicit = process.env.NEXT_PUBLIC_SITE_URL?.trim();
-  if (explicit) return explicit;
-
-  try {
-    const h = await headers();
-    const host = h.get("host");
-    if (host) {
-      const isLocal = host.startsWith("localhost") || host.startsWith("127.");
-      return `${isLocal ? "http" : "https"}://${host}`;
-    }
-  } catch {
-    // `headers()` is unavailable in some build contexts — fall through.
-  }
-  return "https://example.com";
+  return SITE_URL;
 }

package/templates/storefront-bakery/lib/site.config.ts

@@ -0,0 +1,7 @@
+/**
+ * Canonical absolute URL. The platform overwrites this at build time with the
+ * storefront's primary domain; the default only applies to local builds. It's
+ * per-deploy config, not per-request, so it stays a static constant — keeping
+ * the root layout prerenderable under `cacheComponents`.
+ */
+export const SITE_URL = "https://example.com";

package/templates/storefront-bakery/next.config.ts

@@ -24,6 +24,13 @@ const nextConfig: NextConfig = {
   // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
   // dynamic Suspense boundaries fill in when ready.
   cacheComponents: true,
+  async redirects() {
+    // Config-level so cacheComponents needn't prerender a redirect()-only page.
+    return [
+      { source: "/login", destination: "/account", permanent: false },
+      { source: "/signup", destination: "/account", permanent: false },
+    ];
+  },
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${STOREFRONT_URL}/api/v1/:path*` },

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

@@ -54,7 +54,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </Suspense>
         <Providers>
           <Header />
-          <main className="flex-1 pb-12 w-full">{children}</main>
+          <main className="flex-1 pb-12 w-full">
+            <Suspense fallback={null}>{children}</Suspense>
+          </main>
           <Footer />
           <Suspense fallback={null}>
             <ProductModal />

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

@@ -0,0 +1,104 @@
+"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 { addItem } = 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 addItem(p, qty, options);
+              close();
+            }}
+            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-fashion/lib/site-url.ts

@@ -1,29 +1,6 @@
-import { headers } from "next/headers";
+import { SITE_URL } from "./site.config";
 
-/**
- * Canonical absolute URL for this storefront, derived at request time.
- *
- * Resolution order:
- *   1. `NEXT_PUBLIC_SITE_URL` — set when you need a fixed canonical
- *      (multiple domains, www-vs-apex preference, etc.).
- *   2. The request `Host` header — works automatically on every deploy,
- *      including preview URLs and custom domains.
- *   3. `https://example.com` — only ever returned during prerender of
- *      a page that has no live request (rare in App Router).
- */
+/** Canonical absolute URL for this storefront. */
 export async function getSiteUrl(): Promise<string> {
-  const explicit = process.env.NEXT_PUBLIC_SITE_URL?.trim();
-  if (explicit) return explicit;
-
-  try {
-    const h = await headers();
-    const host = h.get("host");
-    if (host) {
-      const isLocal = host.startsWith("localhost") || host.startsWith("127.");
-      return `${isLocal ? "http" : "https"}://${host}`;
-    }
-  } catch {
-    // `headers()` is unavailable in some build contexts — fall through.
-  }
-  return "https://example.com";
+  return SITE_URL;
 }

package/templates/storefront-fashion/lib/site.config.ts

@@ -0,0 +1,7 @@
+/**
+ * Canonical absolute URL. The platform overwrites this at build time with the
+ * storefront's primary domain; the default only applies to local builds. It's
+ * per-deploy config, not per-request, so it stays a static constant — keeping
+ * the root layout prerenderable under `cacheComponents`.
+ */
+export const SITE_URL = "https://example.com";

package/templates/storefront-fashion/next.config.ts

@@ -24,6 +24,13 @@ const nextConfig: NextConfig = {
   // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
   // dynamic Suspense boundaries fill in when ready.
   cacheComponents: true,
+  async redirects() {
+    // Config-level so cacheComponents needn't prerender a redirect()-only page.
+    return [
+      { source: "/login", destination: "/account", permanent: false },
+      { source: "/signup", destination: "/account", permanent: false },
+    ];
+  },
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${STOREFRONT_URL}/api/v1/:path*` },

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

@@ -47,7 +47,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </Suspense>
         <Providers>
           <Header />
-          <main className="flex-1 pb-12 w-full">{children}</main>
+          <main className="flex-1 pb-12 w-full">
+            <Suspense fallback={null}>{children}</Suspense>
+          </main>
           <Footer />
           <Suspense fallback={null}>
             <ProductModal />

package/templates/storefront-grocery/lib/site-url.ts

@@ -1,29 +1,6 @@
-import { headers } from "next/headers";
+import { SITE_URL } from "./site.config";
 
-/**
- * Canonical absolute URL for this storefront, derived at request time.
- *
- * Resolution order:
- *   1. `NEXT_PUBLIC_SITE_URL` — set when you need a fixed canonical
- *      (multiple domains, www-vs-apex preference, etc.).
- *   2. The request `Host` header — works automatically on every deploy,
- *      including preview URLs and custom domains.
- *   3. `https://example.com` — only ever returned during prerender of
- *      a page that has no live request (rare in App Router).
- */
+/** Canonical absolute URL for this storefront. */
 export async function getSiteUrl(): Promise<string> {
-  const explicit = process.env.NEXT_PUBLIC_SITE_URL?.trim();
-  if (explicit) return explicit;
-
-  try {
-    const h = await headers();
-    const host = h.get("host");
-    if (host) {
-      const isLocal = host.startsWith("localhost") || host.startsWith("127.");
-      return `${isLocal ? "http" : "https"}://${host}`;
-    }
-  } catch {
-    // `headers()` is unavailable in some build contexts — fall through.
-  }
-  return "https://example.com";
+  return SITE_URL;
 }

package/templates/storefront-grocery/lib/site.config.ts

@@ -0,0 +1,7 @@
+/**
+ * Canonical absolute URL. The platform overwrites this at build time with the
+ * storefront's primary domain; the default only applies to local builds. It's
+ * per-deploy config, not per-request, so it stays a static constant — keeping
+ * the root layout prerenderable under `cacheComponents`.
+ */
+export const SITE_URL = "https://example.com";

package/templates/storefront-grocery/next.config.ts

@@ -24,6 +24,13 @@ const nextConfig: NextConfig = {
   // `cacheTag` / `cacheLife` for SSR caching. Cached chrome streams first,
   // dynamic Suspense boundaries fill in when ready.
   cacheComponents: true,
+  async redirects() {
+    // Config-level so cacheComponents needn't prerender a redirect()-only page.
+    return [
+      { source: "/login", destination: "/account", permanent: false },
+      { source: "/signup", destination: "/account", permanent: false },
+    ];
+  },
   async rewrites() {
     return [
       { source: "/api/v1/:path*", destination: `${STOREFRONT_URL}/api/v1/:path*` },

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

@@ -53,7 +53,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         </Suspense>
         <Providers>
           <Header />
-          <main className="flex-1 pb-12 w-full">{children}</main>
+          <main className="flex-1 pb-12 w-full">
+            <Suspense fallback={null}>{children}</Suspense>
+          </main>
           <Footer />
           <Suspense fallback={null}>
             <ProductModal />