@cimplify/cli 0.9.0 → 0.9.1

package/templates/storefront-restaurant/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-restaurant/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-retail/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-retail/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-retail/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-services/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-services/app/book/book-client.tsx

@@ -109,6 +109,7 @@ export function BookClient({ treatments }: { treatments: Product[] }) {
             schedulingMode={selectedTreatment.scheduling_mode}
             durationUnit={selectedTreatment.duration_unit}
             durationValue={selectedTreatment.duration_value}
+            contactPhone={brand.contact.phone}
           />
         ) : (
           <p className="text-sm text-muted-foreground">Pick a treatment to see availability.</p>