@cimplify/cli 0.9.0 → 0.10.0

package/dist/{dev-OLW755ID.mjs → dev-CCL7H3HC.mjs}

@@ -14,6 +14,22 @@ var PACKAGE_JSON = "package.json";
 var ENV_LOCAL_FILE = ".env.local";
 var PUBLIC_API_URL_KEY = "NEXT_PUBLIC_CIMPLIFY_API_URL";
 var SCRIPT_DEV = "dev";
+var PREVIEW_ORIGIN_ENV = "CIMPLIFY_PREVIEW_ORIGIN";
+async function applyPreviewOrigin(cwd, origin) {
+  const { ensurePreviewOrigin } = await import('./preview-config-CHDYYWUY.mjs');
+  try {
+    const result = await ensurePreviewOrigin(cwd, origin);
+    if (result.status === "unrecognized") {
+      info(
+        dim(
+          `(preview: could not resolve ${result.file} config shape; hot-reload may be limited)`
+        )
+      );
+    }
+  } catch (err) {
+    info(dim(`(preview: dev-origin setup skipped: ${err.message})`));
+  }
+}
 var PM_BUN = "bun";
 var PM_PNPM = "pnpm";
 var PM_YARN = "yarn";
@@ -115,6 +131,8 @@ async function run(argv) {
       `No "${SCRIPT_DEV}" script in package.json. Add one (e.g. "next dev") and re-run.`
     );
   }
+  const previewOrigin = process.env[PREVIEW_ORIGIN_ENV];
+  if (previewOrigin) await applyPreviewOrigin(cwd, previewOrigin);
   const pm = await detectPackageManager(cwd);
   info(dim(`(running: ${pm} run ${SCRIPT_DEV})`));
   const child = spawn(pm, ["run", SCRIPT_DEV], { cwd, stdio: "inherit" });

package/dist/dispatcher.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
-import { package_default } from './chunk-VHXZ4SGF.mjs';
-import { TEMPLATES } from './chunk-DE4MI2UK.mjs';
+import { package_default } from './chunk-3J3CCUMJ.mjs';
+import { TEMPLATES } from './chunk-WBNI7PWA.mjs';
 
 // src/dispatcher.ts
 var VERSION = package_default.version ?? "unknown";
@@ -142,18 +142,18 @@ var COMMANDS = {
   domains: () => import('./domains-H3K2WW55.mjs'),
   logs: () => import('./logs-2ECJQ3MU.mjs'),
   status: () => import('./status-IA7PJ4TV.mjs'),
-  dev: () => import('./dev-OLW755ID.mjs'),
+  dev: () => import('./dev-CCL7H3HC.mjs'),
   mock: () => import('./mock-TSUKCLWU.mjs'),
-  introspect: () => import('./introspect-5BX4KGO4.mjs'),
+  introspect: () => import('./introspect-HVCWTX7S.mjs'),
   inspect: () => import('./inspect-CGYX4DDF.mjs'),
-  doctor: () => import('./doctor-2OIPFMDS.mjs'),
-  explain: () => import('./explain-JBPAC2ZB.mjs'),
+  doctor: () => import('./doctor-FMQAVFSR.mjs'),
+  explain: () => import('./explain-U65RAIPX.mjs'),
   assets: () => import('./assets-4D7VXRUE.mjs'),
   repo: () => import('./repo-WSUAHXWO.mjs'),
-  list: () => import('./list-5WLNIKFF.mjs'),
-  add: () => import('./add-HCVYD33F.mjs'),
-  update: () => import('./update-6EVYEGKD.mjs'),
-  upgrade: () => import('./update-6EVYEGKD.mjs'),
+  list: () => import('./list-FCBWJ5DY.mjs'),
+  add: () => import('./add-ZRSE2STJ.mjs'),
+  update: () => import('./update-FT2KGKCY.mjs'),
+  upgrade: () => import('./update-FT2KGKCY.mjs'),
   "auth-step-up": () => import('./auth-step-up-NOSM4PUR.mjs')
 };
 var COMMAND_PREFIXES = {

package/dist/{doctor-2OIPFMDS.mjs → doctor-FMQAVFSR.mjs}

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-import { gatherIntrospection } from './chunk-WNZ6N634.mjs';
+import { gatherIntrospection } from './chunk-7CWMGKWE.mjs';
 import './chunk-K5464A3L.mjs';
 import './chunk-DBZ3UOQ2.mjs';
-import './chunk-VHXZ4SGF.mjs';
+import './chunk-3J3CCUMJ.mjs';
 import { parseArgs, flagBool } from './chunk-C4M3DXKC.mjs';
 import { SDK_ENV_API_URL, DEFAULT_API_BASE_URL, ApiClient, ENV_API_BASE_URL } from './chunk-F4S5KETY.mjs';
 import { readAuthOrNull } from './chunk-UBAI443T.mjs';

package/dist/{explain-JBPAC2ZB.mjs → explain-U65RAIPX.mjs}

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

package/dist/{introspect-5BX4KGO4.mjs → introspect-HVCWTX7S.mjs}

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-export { run as default, extractMockSeed, gatherIntrospection, renderIntrospection } from './chunk-WNZ6N634.mjs';
+export { run as default, extractMockSeed, gatherIntrospection, renderIntrospection } from './chunk-7CWMGKWE.mjs';
 import './chunk-K5464A3L.mjs';
 import './chunk-DBZ3UOQ2.mjs';
-import './chunk-VHXZ4SGF.mjs';
+import './chunk-3J3CCUMJ.mjs';
 import './chunk-C4M3DXKC.mjs';
 import './chunk-UBAI443T.mjs';
 import './chunk-E2T2SBP5.mjs';

package/dist/{list-5WLNIKFF.mjs → list-FCBWJ5DY.mjs}

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

package/dist/preview-config-CHDYYWUY.mjs

@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+import { promises } from 'fs';
+import path from 'path';
+import { parse } from '@babel/parser';
+import _traverse from '@babel/traverse';
+import _generate from '@babel/generator';
+import * as t from '@babel/types';
+
+var traverse = _traverse.default ?? _traverse;
+var generate = _generate.default ?? _generate;
+var PROPERTY = "allowedDevOrigins";
+var CONFIG_FILENAMES = [
+  "next.config.ts",
+  "next.config.mts",
+  "next.config.cts",
+  "next.config.js",
+  "next.config.mjs",
+  "next.config.cjs"
+];
+function unwrapTs(node) {
+  let current = node;
+  while (t.isTSAsExpression(current) || t.isTSSatisfiesExpression(current)) {
+    current = current.expression;
+  }
+  return current;
+}
+function returnedObject(body) {
+  for (const statement of body.body) {
+    if (t.isReturnStatement(statement) && statement.argument) {
+      const value = unwrapTs(statement.argument);
+      if (t.isObjectExpression(value)) return value;
+    }
+  }
+  return null;
+}
+function resolveConfigObject(node, scope) {
+  const value = unwrapTs(node);
+  if (t.isObjectExpression(value)) return value;
+  if (t.isIdentifier(value)) {
+    const binding = scope.getBinding(value.name);
+    const init = binding?.path.isVariableDeclarator() ? binding.path.node.init : null;
+    return init ? resolveConfigObject(init, scope) : null;
+  }
+  if (t.isCallExpression(value)) {
+    for (const arg of value.arguments) {
+      if (t.isObjectExpression(arg)) return arg;
+    }
+    return null;
+  }
+  if (t.isArrowFunctionExpression(value) || t.isFunctionExpression(value) || t.isFunctionDeclaration(value)) {
+    if (t.isBlockStatement(value.body)) return returnedObject(value.body);
+    return resolveConfigObject(value.body, scope);
+  }
+  return null;
+}
+function findConfigObject(ast) {
+  let found = null;
+  traverse(ast, {
+    ExportDefaultDeclaration(path2) {
+      found ??= resolveConfigObject(path2.node.declaration, path2.scope);
+    },
+    AssignmentExpression(path2) {
+      const { left, right } = path2.node;
+      const isModuleExports = t.isMemberExpression(left) && t.isIdentifier(left.object, { name: "module" }) && t.isIdentifier(left.property, { name: "exports" });
+      if (isModuleExports) found ??= resolveConfigObject(right, path2.scope);
+    }
+  });
+  return found;
+}
+function upsertOrigin(config, origin) {
+  const existing = config.properties.find(
+    (prop) => t.isObjectProperty(prop) && t.isIdentifier(prop.key, { name: PROPERTY })
+  );
+  if (existing) {
+    if (!t.isArrayExpression(existing.value)) return false;
+    const already = existing.value.elements.some(
+      (el) => t.isStringLiteral(el) && el.value === origin
+    );
+    if (already) return false;
+    existing.value.elements.push(t.stringLiteral(origin));
+    return true;
+  }
+  config.properties.unshift(
+    t.objectProperty(t.identifier(PROPERTY), t.arrayExpression([t.stringLiteral(origin)]))
+  );
+  return true;
+}
+function injectAllowedDevOrigins(source, origin) {
+  const ast = parse(source, {
+    sourceType: "module",
+    plugins: ["typescript"]
+  });
+  const config = findConfigObject(ast);
+  if (!config) return { code: source, changed: false, resolved: false };
+  if (!upsertOrigin(config, origin)) return { code: source, changed: false, resolved: true };
+  return {
+    code: generate(ast, { retainLines: true }, source).code,
+    changed: true,
+    resolved: true
+  };
+}
+async function ensurePreviewOrigin(cwd, origin) {
+  for (const filename of CONFIG_FILENAMES) {
+    const file = path.join(cwd, filename);
+    let source;
+    try {
+      source = await promises.readFile(file, "utf8");
+    } catch (err) {
+      if (err.code === "ENOENT") continue;
+      throw err;
+    }
+    const { code, changed, resolved } = injectAllowedDevOrigins(source, origin);
+    if (!resolved) return { status: "unrecognized", file: filename };
+    if (changed) await promises.writeFile(file, code, "utf8");
+    return { status: changed ? "injected" : "already-present", file: filename };
+  }
+  return { status: "no-config" };
+}
+
+export { ensurePreviewOrigin, injectAllowedDevOrigins };

package/dist/{update-6EVYEGKD.mjs → update-FT2KGKCY.mjs}

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { package_default } from './chunk-VHXZ4SGF.mjs';
+import { package_default } from './chunk-3J3CCUMJ.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.9.0",
+  "version": "0.10.0",
   "description": "Cimplify CLI — deploy, manage env vars, link projects, and scaffold storefronts",
   "keywords": [
     "cimplify",
@@ -38,6 +38,8 @@
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.1070.0",
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0",
     "@types/node": "^25.9.3",
     "@typescript/native-preview": "^7.0.0-dev.20260616.1",
     "tsup": "^8.5.1",
@@ -45,6 +47,10 @@
     "vitest": "^4.1.9"
   },
   "dependencies": {
-    "@cimplify/sdk": "^0.95.0"
+    "@babel/generator": "^8.0.0",
+    "@babel/parser": "^8.0.4",
+    "@babel/traverse": "^8.0.4",
+    "@babel/types": "^8.0.4",
+    "@cimplify/sdk": "^0.96.0"
   }
 }

package/templates/storefront-auto/CLAUDE.md

@@ -21,3 +21,42 @@ That covers ~95% of what merchants ask for. For anything else, follow the `cimpl
 - Add `'use cache'`, `cacheTag`, or `cacheLife` anywhere. Use the SDK's `cacheOptions` instead.
 - Use `unstable_cache` — it's gone in Next 16. Use SDK `cacheOptions` or `fetch.next.{revalidate,tags}`.
 - Run `bun test` (Bun's `vi` shim is incomplete) — use `bun run test:run`.
+
+## Design bans
+
+Not style preferences — these are the tells of a generated site. Grep for them before calling any piece of work done.
+
+- **No scroll-down indicators.** No "scroll" label, chevron, arrow, mouse glyph, or bouncing hint under a hero.
+- **No ornament glyphs** — ◆ ◇ ✦ ✧ ❖ as dividers, bullets, or separators. No `01 / 02 / 03` section numbering.
+- No purple/blue gradient washes, glassmorphism-by-default cards, floating badge pills, or emoji in UI copy.
+- No boxed text-button clusters in the navbar — use icons (search, account, cart with count).
+- No border radius unless the brief asks for softness; prefer hairline borders.
+
+Reserve glass for surfaces that earn it (navbar, flyouts, overlays) and execute it properly: deep `backdrop-filter` blur **with saturation**, a specular top edge, a soft falling shadow. Never a flat translucent white card.
+
+Ask of each screen: does this read as "template with new colours"? If so, it isn't done.
+
+## Known traps
+
+- **`backdrop-filter` creates a containing block.** A navbar carrying it becomes the containing block for `position: fixed` children, so a fixed mobile drawer gets clamped to the navbar's box and renders transparent. Portal overlays and drawers to `<body>`.
+- **Google Fonts fetches fail at build time in some environments.** Self-host font files in `app/fonts/` rather than depending on a network fetch mid-build.
+- **Never show a slot the booking engine will reject.** Source the availability grid from the strict bookable endpoint, not the general calendar. If a service verifies unavailable or returns zero slots, render a call-the-shop fallback with the real phone number — never an empty grid.
+- **Route media through `lib/media.ts`.** No hardcoded asset URLs in components. Transcode phone video (usually HEVC, unplayable in most browsers) to H.264, and size images down before shipping them.
+
+## Verification loop
+
+Continuously, not once at the end:
+
+```
+build → start on PORT 3100 → screenshot at 1440px and 390px → fix → repeat
+```
+
+- Verify on **port 3100**. Dev holds 3000, and a stray verification server there blocks restarts. Kill your own.
+- Read the **full** build output, unfiltered — a hidden page-generation failure ships as "Could not find a production build".
+- Actually look at the screenshots. "It compiled" is not "it looks right".
+- Screenshot interactive states too: nav open, search flyout, chat open, booking flow, mobile menu.
+- Test once per round with reduced motion emulated.
+
+## Escalate rather than loop
+
+Stop and ask for: the live API key, go-live approval (`--prod`), anything irreversible (deleting CDN assets, domain changes), and dashboard-side changes you cannot make from code — typically staff-to-service assignment when a service returns zero availability while its API fields look identical to a working one. Present the evidence, then carry on with everything else.

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import Link from "next/link";
 import { brand } from "@/lib/brand";
 
@@ -11,6 +12,9 @@ import { brand } from "@/lib/brand";
  */
 export function MobileNav() {
   const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
 
   useEffect(() => {
     if (!open) return;
@@ -53,61 +57,67 @@ export function MobileNav() {
         </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>
+      {/* Portalled: the header carries `backdrop-filter`, which makes it the
+          containing block for `position: fixed`, clamping this drawer to the
+          header's box. */}
+      {open && mounted
+        ? createPortal(
+            <div className="fixed inset-0 z-50 sm:hidden">
               <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"
+                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"
               >
-                <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}
+                <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)}
-                    className="block px-3 py-3 rounded-md text-base font-medium text-foreground hover:bg-muted transition-colors"
+                    aria-label="Close menu"
+                    className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
                   >
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        </div>
-      ) : null}
+                    <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>,
+            document.body,
+          )
+        : null}
     </>
   );
 }

package/templates/storefront-auto/package.json

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

package/templates/storefront-bakery/CLAUDE.md

@@ -21,3 +21,42 @@ That covers ~95% of what merchants ask for. For anything else, follow the `cimpl
 - Add `'use cache'`, `cacheTag`, or `cacheLife` anywhere. Use the SDK's `cacheOptions` instead.
 - Use `unstable_cache` — it's gone in Next 16. Use SDK `cacheOptions` or `fetch.next.{revalidate,tags}`.
 - Run `bun test` (Bun's `vi` shim is incomplete) — use `bun run test:run`.
+
+## Design bans
+
+Not style preferences — these are the tells of a generated site. Grep for them before calling any piece of work done.
+
+- **No scroll-down indicators.** No "scroll" label, chevron, arrow, mouse glyph, or bouncing hint under a hero.
+- **No ornament glyphs** — ◆ ◇ ✦ ✧ ❖ as dividers, bullets, or separators. No `01 / 02 / 03` section numbering.
+- No purple/blue gradient washes, glassmorphism-by-default cards, floating badge pills, or emoji in UI copy.
+- No boxed text-button clusters in the navbar — use icons (search, account, cart with count).
+- No border radius unless the brief asks for softness; prefer hairline borders.
+
+Reserve glass for surfaces that earn it (navbar, flyouts, overlays) and execute it properly: deep `backdrop-filter` blur **with saturation**, a specular top edge, a soft falling shadow. Never a flat translucent white card.
+
+Ask of each screen: does this read as "template with new colours"? If so, it isn't done.
+
+## Known traps
+
+- **`backdrop-filter` creates a containing block.** A navbar carrying it becomes the containing block for `position: fixed` children, so a fixed mobile drawer gets clamped to the navbar's box and renders transparent. Portal overlays and drawers to `<body>`.
+- **Google Fonts fetches fail at build time in some environments.** Self-host font files in `app/fonts/` rather than depending on a network fetch mid-build.
+- **Never show a slot the booking engine will reject.** Source the availability grid from the strict bookable endpoint, not the general calendar. If a service verifies unavailable or returns zero slots, render a call-the-shop fallback with the real phone number — never an empty grid.
+- **Route media through `lib/media.ts`.** No hardcoded asset URLs in components. Transcode phone video (usually HEVC, unplayable in most browsers) to H.264, and size images down before shipping them.
+
+## Verification loop
+
+Continuously, not once at the end:
+
+```
+build → start on PORT 3100 → screenshot at 1440px and 390px → fix → repeat
+```
+
+- Verify on **port 3100**. Dev holds 3000, and a stray verification server there blocks restarts. Kill your own.
+- Read the **full** build output, unfiltered — a hidden page-generation failure ships as "Could not find a production build".
+- Actually look at the screenshots. "It compiled" is not "it looks right".
+- Screenshot interactive states too: nav open, search flyout, chat open, booking flow, mobile menu.
+- Test once per round with reduced motion emulated.
+
+## Escalate rather than loop
+
+Stop and ask for: the live API key, go-live approval (`--prod`), anything irreversible (deleting CDN assets, domain changes), and dashboard-side changes you cannot make from code — typically staff-to-service assignment when a service returns zero availability while its API fields look identical to a working one. Present the evidence, then carry on with everything else.

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import Link from "next/link";
 import { brand } from "@/lib/brand";
 
@@ -11,6 +12,9 @@ import { brand } from "@/lib/brand";
  */
 export function MobileNav() {
   const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
 
   useEffect(() => {
     if (!open) return;
@@ -53,61 +57,67 @@ export function MobileNav() {
         </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>
+      {/* Portalled: the header carries `backdrop-filter`, which makes it the
+          containing block for `position: fixed`, clamping this drawer to the
+          header's box. */}
+      {open && mounted
+        ? createPortal(
+            <div className="fixed inset-0 z-50 sm:hidden">
               <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"
+                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"
               >
-                <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}
+                <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)}
-                    className="block px-3 py-3 rounded-md text-base font-medium text-foreground hover:bg-muted transition-colors"
+                    aria-label="Close menu"
+                    className="grid place-items-center w-11 h-11 -mr-2 rounded-md text-foreground hover:bg-muted transition-colors"
                   >
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        </div>
-      ) : null}
+                    <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>,
+            document.body,
+          )
+        : null}
     </>
   );
 }

package/templates/storefront-bakery/package.json

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