create-brainerce-store 1.59.0 → 1.62.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.59.0",
+      version: "1.62.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"
@@ -43,6 +43,7 @@ var require_package = __commonJS({
       ],
       scripts: {
         build: "tsup",
+        "type-check": "tsc --noEmit",
         dev: "tsup --watch",
         clean: "rimraf dist",
         release: "pnpm build && node ../../scripts/publish-workspace-package.js .",
@@ -182,7 +183,16 @@ var BRAINERCE_RUNTIME_DEPS = Object.freeze({
   // SetCheckoutCustomerDto — the scaffolded checkout form types depend on it.
   // 1.46 adds getAddressSuggestions/getAddressDetails — the scaffolded
   // checkout form's address-autocomplete typeahead calls these directly.
-  brainerce: "^1.46.0",
+  // 1.52 adds ShippingRate.speedTier — the scaffolded shipping step reads it to
+  // label live carrier rates, so an older SDK fails type-check at scaffold time
+  // — plus getBusinessHoursForDate(), which the scaffolded DATETIME checkout
+  // field uses to tell "day closed" from "field isn't slot-based".
+  // 1.53 strips lat/lng/formattedAddress from setShippingAddress/
+  // setBillingAddress bodies. The address endpoints reject ANY unknown
+  // property with a 400 that blocks checkout outright, and those three come
+  // straight off getAddressDetails() — so a scaffolded store on an older SDK
+  // is one `...address` spread away from a checkout nobody can complete.
+  brainerce: "^1.53.0",
   "isomorphic-dompurify": "^3.8.0"
 });
 

package/messages/en.json

@@ -189,6 +189,9 @@
     "noShippingOptions": "No shipping options available for this address.",
     "noShippingOptionsHint": "Please try a different address or contact support.",
     "estimatedDelivery": "Estimated delivery:",
+    "shippingTierCheapest": "Standard delivery",
+    "shippingTierBalanced": "Express delivery",
+    "shippingTierFastest": "Priority delivery",
     "pickupLocation": "Pickup Location",
     "selectPickupLocation": "Select pickup location",
     "pickupLocationRequired": "Please select a pickup location",
@@ -250,6 +253,8 @@
     "customFieldsDateClear": "Clear",
     "customFieldsDatePrevMonth": "Previous month",
     "customFieldsDateNextMonth": "Next month",
+    "customFieldsTimeLabel": "Time",
+    "customFieldsTimeClosed": "No delivery times are available on this date.",
     "changeOptions": "Change options",
     "surcharges": "Additional charges"
   },
@@ -340,6 +345,10 @@
     "goToRegister": "Go to Register",
     "authFailed": "Authentication failed",
     "authFailedDesc": "Missing authentication parameters. Please try again.",
+    "oauthErrorGeneric": "Sign-in could not be completed. Please try again.",
+    "oauthErrorCancelled": "Sign-in was cancelled.",
+    "oauthErrorExpired": "That sign-in attempt expired. Please try again.",
+    "oauthErrorVerifyEmailFirst": "This email address needs to be verified before you can sign in with a social account. Check your inbox for the verification email.",
     "backToLogin": "Back to Login",
     "completingSignIn": "Completing sign in...",
     "forgotPassword": "Forgot password?",
@@ -450,6 +459,14 @@
     "yourDownloads": "Your Downloads",
     "download": "Download"
   },
+  "orderStatus": {
+    "pageTitle": "Order Status",
+    "loading": "Loading your order...",
+    "errorTitle": "Order not found",
+    "notFound": "We couldn't find an order matching this link.",
+    "missingCheckoutInfo": "Missing order information.",
+    "returnHome": "Return Home"
+  },
   "reservation": {
     "expired": "Reservation expired. Items may no longer be available.",
     "hurry": "Hurry!",

package/messages/he.json

@@ -189,6 +189,9 @@
     "noShippingOptions": "אין אפשרויות משלוח זמינות לכתובת זו.",
     "noShippingOptionsHint": "נסו כתובת אחרת או פנו לתמיכה.",
     "estimatedDelivery": "זמן משלוח משוער:",
+    "shippingTierCheapest": "משלוח רגיל",
+    "shippingTierBalanced": "משלוח מהיר",
+    "shippingTierFastest": "משלוח אקספרס",
     "pickupLocation": "נקודת איסוף",
     "selectPickupLocation": "בחרו נקודת איסוף",
     "pickupLocationRequired": "יש לבחור נקודת איסוף",
@@ -250,6 +253,8 @@
     "customFieldsDateClear": "נקה",
     "customFieldsDatePrevMonth": "חודש קודם",
     "customFieldsDateNextMonth": "חודש הבא",
+    "customFieldsTimeLabel": "שעה",
+    "customFieldsTimeClosed": "אין שעות משלוח זמינות בתאריך הזה.",
     "changeOptions": "שנה אפשרויות",
     "surcharges": "תוספות"
   },
@@ -340,6 +345,10 @@
     "goToRegister": "מעבר להרשמה",
     "authFailed": "ההתחברות נכשלה",
     "authFailedDesc": "חסרים פרמטרי התחברות. אנא נסו שוב.",
+    "oauthErrorGeneric": "לא הצלחנו להשלים את ההתחברות. אנא נסו שוב.",
+    "oauthErrorCancelled": "ההתחברות בוטלה.",
+    "oauthErrorExpired": "ניסיון ההתחברות פג. אנא נסו שוב.",
+    "oauthErrorVerifyEmailFirst": "יש לאמת את כתובת המייל הזו לפני התחברות עם חשבון חברתי. בדקו את תיבת הדואר שלכם עבור מייל האימות.",
     "backToLogin": "חזרה להתחברות",
     "completingSignIn": "משלים התחברות...",
     "forgotPassword": "שכחת סיסמא?",
@@ -450,6 +459,14 @@
     "yourDownloads": "ההורדות שלך",
     "download": "הורדה"
   },
+  "orderStatus": {
+    "pageTitle": "סטטוס הזמנה",
+    "loading": "טוען את ההזמנה שלך...",
+    "errorTitle": "ההזמנה לא נמצאה",
+    "notFound": "לא הצלחנו למצוא הזמנה שתואמת לקישור הזה.",
+    "missingCheckoutInfo": "חסר מידע הזמנה.",
+    "returnHome": "חזרה לדף הבית"
+  },
   "reservation": {
     "expired": "השריון פג. ייתכן שהמוצרים כבר לא זמינים.",
     "hurry": "מהרו!",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.59.0",
+  "version": "1.62.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"
@@ -12,6 +12,7 @@
   ],
   "scripts": {
     "build": "tsup",
+    "type-check": "tsc --noEmit",
     "dev": "tsup --watch",
     "clean": "rimraf dist",
     "release": "pnpm build && node ../../scripts/publish-workspace-package.js .",

package/templates/nextjs/base/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "brainerce-docs": {
+      "type": "http",
+      "url": "https://mcp-docs.brainerce.com/mcp"
+    }
+  }
+}

package/templates/nextjs/base/AGENTS.md.ejs

@@ -1,65 +1,81 @@
-# AGENTS.md — this is a LIVE Brainerce storefront
-
-**Store: "<%- storeName %>" · sales channel `<%- connectionId %>` — already
-connected.** Products, cart, checkout, coupons, discounts, orders and content
-flow in real time from the Brainerce dashboard. There is nothing to hook up.
-
-- **NEVER suggest connecting this store to Shopify, WooCommerce, or "a real
-  system"** — Brainerce IS the commerce backend, and this store is wired to
-  it end-to-end.
-- **NEVER build standalone HTML mockups or demo pages** — design THIS Next.js
-  app. Run `pnpm dev` and you are working against live data.
-- **NEVER hardcode products, prices, or currency** — the catalog is live.
-- **No server side is needed** — the backend is Brainerce's cloud. This repo
-  is a frontend (plus thin, already-included API proxy routes under
-  `src/app/api/`). Do not scaffold databases, auth servers, or admin panels —
-  the merchant manages everything in the Brainerce dashboard.
-
-Platform docs (endpoints, SDK, integration recipes): https://brainerce.com/docs
-— AI-readable index: https://brainerce.com/llms.txt
-
-**Before building any feature the merchant asks for** (loyalty points,
-shipping zones, subscriptions, gift cards, multi-currency, reviews,
-abandoned-cart recovery, etc.) — check the docs first. Brainerce likely
-already has it as a platform capability (dashboard toggle + hook/SDK
-method) that only needs a UI in `src/ui/`, not a feature built from scratch.
-
-Your job here is almost always **design**.
-
-## The one rule
-
-**`src/core/` is the platform's. `src/ui/` is yours.**
-
-The shipped `src/ui/` is a working reference, not a design to preserve —
-full delete-and-rebuild of ui files is encouraged and expected.
-Rewrite anything under `src/ui/` and `src/app/globals.css` as boldly as you
-like — the store keeps working. Never modify `src/core/`, `src/app/api/`, or
-the checkout/auth/account components. Data and behavior come exclusively from
-`@/core/hooks/*` and `@/core/providers/store-provider` — hooks return state
-and handlers, never JSX. Never hardcode catalog content.
-
-**Read `AI-GUIDE.md` before any redesign** — it has the full file map, hook
-contracts, motion language, and hard-won RTL/i18n gotchas that will save you
-real debugging time.
-
-## Redesigning?
-
-Follow the process documented in AI-GUIDE.md: commit to one art direction,
-rewrite tokens first, then surfaces in order (header, home, card, product
-page, cart), then verify.
-
-## Verify before declaring done
-
-1. `pnpm exec tsc --noEmit` → 0 errors
-2. `pnpm dev` → drive the changed flow in a real browser (home → product →
-   add to cart → cart)
-3. Screenshot desktop (1440px) and mobile (390px)
-4. RTL stores: check anchoring and arrow directions
-
-## i18n
-
-Every user-facing string goes through `useTranslations()` with keys in **all**
-files under `messages/`. The shipped copy is example boutique content — a
-starting point meant to be rewritten in the store's real voice. Hebrew: no
-uppercase transforms, no wide letter-spacing on headings, logical CSS
-properties only (`ms-/me-`, `ps-/pe-`, `start-/end-`).
+# AGENTS.md — this is a LIVE Brainerce storefront
+
+**Store: "<%- storeName %>" · sales channel `<%- connectionId %>` — already
+connected.** Products, cart, checkout, coupons, discounts, orders and content
+flow in real time from the Brainerce dashboard. There is nothing to hook up.
+
+- **NEVER suggest connecting this store to Shopify, WooCommerce, or "a real
+  system"** — Brainerce IS the commerce backend, and this store is wired to
+  it end-to-end.
+- **NEVER build standalone HTML mockups or demo pages** — design THIS Next.js
+  app. Run `pnpm dev` and you are working against live data.
+- **NEVER hardcode products, prices, or currency** — the catalog is live.
+- **No server side is needed** — the backend is Brainerce's cloud. This repo
+  is a frontend (plus thin, already-included API proxy routes under
+  `src/app/api/`). Do not scaffold databases, auth servers, or admin panels —
+  the merchant manages everything in the Brainerce dashboard.
+
+Platform docs (endpoints, SDK, integration recipes): https://brainerce.com/docs
+— AI-readable index: https://brainerce.com/llms.txt
+
+## MCP servers
+
+- **`brainerce-docs`** — already connected via `.mcp.json`, no auth needed.
+  A live SDK/docs oracle: current SDK method shapes, type definitions, code
+  examples, and this store's actual capabilities/config. Prefer it over
+  guessing or relying on training data — it reflects what's actually toggled
+  on for `<%- connectionId %>` right now.
+- **Brainerce Admin MCP** — opt-in, not wired up by default. Lets an agent
+  directly manage this store's *live* data (products, orders, discounts,
+  shipping, …) instead of just reading docs. Only add it if the merchant
+  wants that: connect `https://api.brainerce.com/api/mcp` as a remote HTTP
+  MCP server (e.g. `claude mcp add --transport http brainerce-admin
+  https://api.brainerce.com/api/mcp`) — it opens a browser to log into the
+  Brainerce dashboard, pick this store, and grant scoped OAuth permissions.
+  Treat it like handing the agent write access to production commerce data.
+
+**Before building any feature the merchant asks for** (loyalty points,
+shipping zones, subscriptions, gift cards, multi-currency, reviews,
+abandoned-cart recovery, etc.) — check the docs first. Brainerce likely
+already has it as a platform capability (dashboard toggle + hook/SDK
+method) that only needs a UI in `src/ui/`, not a feature built from scratch.
+
+Your job here is almost always **design**.
+
+## The one rule
+
+**`src/core/` is the platform's. `src/ui/` is yours.**
+
+The shipped `src/ui/` is a working reference, not a design to preserve —
+full delete-and-rebuild of ui files is encouraged and expected.
+Rewrite anything under `src/ui/` and `src/app/globals.css` as boldly as you
+like — the store keeps working. Never modify `src/core/`, `src/app/api/`, or
+the checkout/auth/account components. Data and behavior come exclusively from
+`@/core/hooks/*` and `@/core/providers/store-provider` — hooks return state
+and handlers, never JSX. Never hardcode catalog content.
+
+**Read `AI-GUIDE.md` before any redesign** — it has the full file map, hook
+contracts, motion language, and hard-won RTL/i18n gotchas that will save you
+real debugging time.
+
+## Redesigning?
+
+Follow the process documented in AI-GUIDE.md: commit to one art direction,
+rewrite tokens first, then surfaces in order (header, home, card, product
+page, cart), then verify.
+
+## Verify before declaring done
+
+1. `pnpm exec tsc --noEmit` → 0 errors
+2. `pnpm dev` → drive the changed flow in a real browser (home → product →
+   add to cart → cart)
+3. Screenshot desktop (1440px) and mobile (390px)
+4. RTL stores: check anchoring and arrow directions
+
+## i18n
+
+Every user-facing string goes through `useTranslations()` with keys in **all**
+files under `messages/`. The shipped copy is example boutique content — a
+starting point meant to be rewritten in the store's real voice. Hebrew: no
+uppercase transforms, no wide letter-spacing on headings, logical CSS
+properties only (`ms-/me-`, `ps-/pe-`, `start-/end-`).

package/templates/nextjs/base/CLAUDE.md.ejs

@@ -1,76 +1,92 @@
-# CLAUDE.md — this is a LIVE Brainerce storefront
-
-**Store: "<%- storeName %>" · sales channel `<%- connectionId %>` — already
-connected.** Products, cart, checkout, coupons, discounts, orders and content
-flow in real time from the Brainerce dashboard. There is nothing to hook up.
-
-- **NEVER suggest connecting this store to Shopify, WooCommerce, or "a real
-  system"** — Brainerce IS the commerce backend, and this store is wired to
-  it end-to-end.
-- **NEVER build standalone HTML mockups or demo pages** — design THIS Next.js
-  app. Run `pnpm dev` and you are working against live data.
-- **NEVER hardcode products, prices, or currency** — the catalog is live.
-- **No server side is needed** — the backend is Brainerce's cloud. This repo
-  is a frontend (plus thin, already-included API proxy routes under
-  `src/app/api/`). Do not scaffold databases, auth servers, or admin panels —
-  the merchant manages everything in the Brainerce dashboard.
-
-Platform docs (endpoints, SDK, integration recipes): https://brainerce.com/docs
-— AI-readable index: https://brainerce.com/llms.txt
-
-**Before building any feature the merchant asks for** (loyalty points,
-shipping zones, subscriptions, gift cards, multi-currency, reviews,
-abandoned-cart recovery, etc.) — check the docs first. Brainerce likely
-already has it as a platform capability (dashboard toggle + hook/SDK
-method) that only needs a UI in `src/ui/`, not a feature built from scratch.
-
-Your job here is almost always **design**.
-
-## The one rule
-
-**`src/core/` is the platform's. `src/ui/` is yours.**
-
-The shipped `src/ui/` is a working reference, not a design to preserve —
-full delete-and-rebuild of ui files is encouraged and expected. (Stores
-scaffolded with `--canvas` ship `src/ui/` as bare unstyled skeletons —
-there is no reference look at all; the design is entirely yours to create.)
-Rewrite anything under `src/ui/` and `src/app/globals.css` as boldly as you
-like — the store keeps working. Never modify `src/core/`, `src/app/api/`, or
-the checkout/auth/account components. Data and behavior come exclusively from
-`@/core/hooks/*` and `@/core/providers/store-provider` — hooks return state
-and handlers, never JSX. Never hardcode catalog content.
-
-**Read `AI-GUIDE.md` before any redesign** — it has the full file map, hook
-contracts, motion language, and hard-won RTL/i18n gotchas that will save you
-real debugging time.
-
-## The dialect
-
-- `src/components/ui/` = official **shadcn/ui primitives** (Button, Card,
-  Badge, Input, Select, Accordion, Dialog, Sheet, Skeleton, …). Compose them;
-  extend looks via CVA **variants**, never repeated inline overrides.
-- Icons: **lucide-react only** — no inline `<svg>`, no emoji-as-icons.
-- Class merging: **`cn()`** from `@/core/lib/utils`.
-- Colors/radius come from the semantic HSL tokens in `globals.css`
-  (`--primary`, `--card`, `--ring`, `--radius`, …) — restyle via tokens.
-
-## Redesigning? Use the ready-made flow
-
-Run `/design <your art-direction brief>` — it walks the whole process:
-concept → implementation in `ui/` → verification.
-
-## Verify before declaring done
-
-1. `pnpm exec tsc --noEmit` → 0 errors
-2. `pnpm dev` → drive the changed flow in a real browser (home → product →
-   add to cart → cart)
-3. Screenshot desktop (1440px) and mobile (390px)
-4. RTL stores: check anchoring and arrow directions
-
-## i18n
-
-Every user-facing string goes through `useTranslations()` with keys in **all**
-files under `messages/`. The shipped copy is example boutique content — a
-starting point meant to be rewritten in the store's real voice. Hebrew: no
-uppercase transforms, no wide letter-spacing on headings, logical CSS
-properties only (`ms-/me-`, `ps-/pe-`, `start-/end-`).
+# CLAUDE.md — this is a LIVE Brainerce storefront
+
+**Store: "<%- storeName %>" · sales channel `<%- connectionId %>` — already
+connected.** Products, cart, checkout, coupons, discounts, orders and content
+flow in real time from the Brainerce dashboard. There is nothing to hook up.
+
+- **NEVER suggest connecting this store to Shopify, WooCommerce, or "a real
+  system"** — Brainerce IS the commerce backend, and this store is wired to
+  it end-to-end.
+- **NEVER build standalone HTML mockups or demo pages** — design THIS Next.js
+  app. Run `pnpm dev` and you are working against live data.
+- **NEVER hardcode products, prices, or currency** — the catalog is live.
+- **No server side is needed** — the backend is Brainerce's cloud. This repo
+  is a frontend (plus thin, already-included API proxy routes under
+  `src/app/api/`). Do not scaffold databases, auth servers, or admin panels —
+  the merchant manages everything in the Brainerce dashboard.
+
+Platform docs (endpoints, SDK, integration recipes): https://brainerce.com/docs
+— AI-readable index: https://brainerce.com/llms.txt
+
+## MCP servers
+
+- **`brainerce-docs`** — already connected via `.mcp.json`, no auth needed.
+  A live SDK/docs oracle: current SDK method shapes, type definitions, code
+  examples, and this store's actual capabilities/config. Prefer it over
+  guessing or relying on training data — it reflects what's actually toggled
+  on for `<%- connectionId %>` right now.
+- **Brainerce Admin MCP** — opt-in, not wired up by default. Lets an agent
+  directly manage this store's *live* data (products, orders, discounts,
+  shipping, …) instead of just reading docs. Only add it if the merchant
+  wants that: connect `https://api.brainerce.com/api/mcp` as a remote HTTP
+  MCP server (e.g. `claude mcp add --transport http brainerce-admin
+  https://api.brainerce.com/api/mcp`) — it opens a browser to log into the
+  Brainerce dashboard, pick this store, and grant scoped OAuth permissions.
+  Treat it like handing the agent write access to production commerce data.
+
+**Before building any feature the merchant asks for** (loyalty points,
+shipping zones, subscriptions, gift cards, multi-currency, reviews,
+abandoned-cart recovery, etc.) — check the docs first. Brainerce likely
+already has it as a platform capability (dashboard toggle + hook/SDK
+method) that only needs a UI in `src/ui/`, not a feature built from scratch.
+
+Your job here is almost always **design**.
+
+## The one rule
+
+**`src/core/` is the platform's. `src/ui/` is yours.**
+
+The shipped `src/ui/` is a working reference, not a design to preserve —
+full delete-and-rebuild of ui files is encouraged and expected. (Stores
+scaffolded with `--canvas` ship `src/ui/` as bare unstyled skeletons —
+there is no reference look at all; the design is entirely yours to create.)
+Rewrite anything under `src/ui/` and `src/app/globals.css` as boldly as you
+like — the store keeps working. Never modify `src/core/`, `src/app/api/`, or
+the checkout/auth/account components. Data and behavior come exclusively from
+`@/core/hooks/*` and `@/core/providers/store-provider` — hooks return state
+and handlers, never JSX. Never hardcode catalog content.
+
+**Read `AI-GUIDE.md` before any redesign** — it has the full file map, hook
+contracts, motion language, and hard-won RTL/i18n gotchas that will save you
+real debugging time.
+
+## The dialect
+
+- `src/components/ui/` = official **shadcn/ui primitives** (Button, Card,
+  Badge, Input, Select, Accordion, Dialog, Sheet, Skeleton, …). Compose them;
+  extend looks via CVA **variants**, never repeated inline overrides.
+- Icons: **lucide-react only** — no inline `<svg>`, no emoji-as-icons.
+- Class merging: **`cn()`** from `@/core/lib/utils`.
+- Colors/radius come from the semantic HSL tokens in `globals.css`
+  (`--primary`, `--card`, `--ring`, `--radius`, …) — restyle via tokens.
+
+## Redesigning? Use the ready-made flow
+
+Run `/design <your art-direction brief>` — it walks the whole process:
+concept → implementation in `ui/` → verification.
+
+## Verify before declaring done
+
+1. `pnpm exec tsc --noEmit` → 0 errors
+2. `pnpm dev` → drive the changed flow in a real browser (home → product →
+   add to cart → cart)
+3. Screenshot desktop (1440px) and mobile (390px)
+4. RTL stores: check anchoring and arrow directions
+
+## i18n
+
+Every user-facing string goes through `useTranslations()` with keys in **all**
+files under `messages/`. The shipped copy is example boutique content — a
+starting point meant to be rewritten in the store's real voice. Hebrew: no
+uppercase transforms, no wide letter-spacing on headings, logical CSS
+properties only (`ms-/me-`, `ps-/pe-`, `start-/end-`).

package/templates/nextjs/base/src/app/api/auth/oauth-callback/route.ts

@@ -13,8 +13,16 @@ function isSecure(): boolean {
   return process.env.NODE_ENV === 'production';
 }
 
-function errorRedirect(base: URL, message: string): NextResponse {
-  base.searchParams.set('oauth_error', message);
+/**
+ * Forward a failure to the client callback page as a stable snake_case code.
+ *
+ * The backend uses the RFC 6749 §4.1.2.1 shape (`oauth_error` = code,
+ * `error_description` = English developer detail), so codes are what the page
+ * switches on to pick localized copy. The description is deliberately NOT
+ * forwarded — it is not shopper-facing copy.
+ */
+function errorRedirect(base: URL, code: string): NextResponse {
+  base.searchParams.set('oauth_error', code);
   const response = NextResponse.redirect(base);
   response.headers.set('Referrer-Policy', 'no-referrer');
   return response;
@@ -41,7 +49,7 @@ export async function GET(request: NextRequest) {
   }
 
   if (oauthSuccess !== 'true' || !authCode) {
-    return errorRedirect(redirectUrl, 'Authentication failed');
+    return errorRedirect(redirectUrl, 'invalid_request');
   }
 
   // Exchange the one-time auth_code for the real JWT.
@@ -61,7 +69,7 @@ export async function GET(request: NextRequest) {
     token = data.token;
   } catch (err) {
     console.error('[oauth-callback] auth_code exchange failed:', err);
-    return errorRedirect(redirectUrl, 'Authentication failed');
+    return errorRedirect(redirectUrl, 'server_error');
   }
 
   redirectUrl.searchParams.set('oauth_success', 'true');

package/templates/nextjs/base/src/app/auth/callback/page.tsx

@@ -7,6 +7,21 @@ import { useAuth } from '@/core/providers/store-provider';
 import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 import { useTranslations } from '@/core/lib/translations';
 
+/**
+ * `oauth_error` is a stable snake_case code, not a message — the backend sends
+ * the RFC 6749 §4.1.2.1 pair (`oauth_error` + an English `error_description`
+ * meant for developers). Map codes to translated copy here; anything unknown,
+ * including provider-specific codes, falls through to the generic message.
+ */
+const OAUTH_ERROR_MESSAGE_KEYS: Record<string, string> = {
+  access_denied: 'oauthErrorCancelled',
+  invalid_request: 'oauthErrorExpired',
+  invalid_state: 'oauthErrorExpired',
+  state_already_used: 'oauthErrorExpired',
+  state_expired: 'oauthErrorExpired',
+  link_blocked_unverified_password_account: 'oauthErrorVerifyEmailFirst',
+};
+
 function OAuthCallbackContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -25,7 +40,7 @@ function OAuthCallbackContent() {
     processedRef.current = true;
 
     if (oauthError) {
-      setError(oauthError);
+      setError(t(OAUTH_ERROR_MESSAGE_KEYS[oauthError] ?? 'oauthErrorGeneric'));
       return;
     }
 

package/templates/nextjs/base/src/app/order-status/page.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { Suspense, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Link } from '@/core/lib/navigation';
+import type { Order } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { OrderHistory } from '@/components/account/order-history';
+import { useTranslations } from '@/core/lib/translations';
+
+// Read-only order lookup for links from transactional emails (order confirmation,
+// shipped, refunded, etc). Unlike /order-confirmation, this page never calls
+// handlePaymentSuccess() or touches cart state — it only fetches and displays,
+// so it's safe to revisit at any time without side effects on an unrelated
+// active cart. Works for guests too: the checkout id itself is the credential.
+function OrderStatusContent() {
+  const searchParams = useSearchParams();
+  const checkoutId = searchParams.get('checkout_id');
+
+  const t = useTranslations('orderStatus');
+  const tc = useTranslations('common');
+  const [order, setOrder] = useState<Order | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!checkoutId) {
+      setError(t('missingCheckoutInfo'));
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    async function loadOrder() {
+      try {
+        const client = getClient();
+        const result = await client.getOrderByCheckout(checkoutId!);
+        if (!cancelled) setOrder(result);
+      } catch (err) {
+        if (!cancelled) {
+          const message = err instanceof Error ? err.message : t('notFound');
+          setError(message);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadOrder();
+    return () => {
+      cancelled = true;
+    };
+  }, [checkoutId, t]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[60vh] flex-col items-center justify-center">
+        <LoadingSpinner size="lg" />
+        <p className="text-muted-foreground mt-4">{t('loading')}</p>
+      </div>
+    );
+  }
+
+  if (error || !order) {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <svg
+          className="text-destructive mx-auto mb-4 h-16 w-16"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+          />
+        </svg>
+        <h1 className="text-foreground text-2xl font-bold">{t('errorTitle')}</h1>
+        <p className="text-muted-foreground mt-2">{error || t('notFound')}</p>
+        <Link
+          href="/"
+          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {t('returnHome')}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-bold">{t('pageTitle')}</h1>
+      <OrderHistory orders={[order]} />
+      <div className="mt-8 flex items-center justify-center">
+        <Link
+          href="/products"
+          className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {tc('continueShopping')}
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default function OrderStatusPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <OrderStatusContent />
+    </Suspense>
+  );
+}

package/templates/nextjs/base/src/components/checkout/checkout-form.tsx

@@ -13,6 +13,18 @@ import { getClient } from '@/core/lib/brainerce';
 const ADDRESS_SEARCH_DEBOUNCE_MS = 300;
 const ADDRESS_SEARCH_MIN_CHARS = 3;
 
+// Editing any of these invalidates a previously picked suggestion: its
+// coordinates describe the address the shopper selected, not what is in the
+// inputs now. See `pickedPlace` below.
+const PLACE_INVALIDATING_FIELDS = new Set<string>([
+  'line1',
+  'line2',
+  'city',
+  'region',
+  'postalCode',
+  'country',
+]);
+
 interface CheckoutConsent {
   acceptsMarketing: boolean;
   saveDetails: boolean;
@@ -65,6 +77,16 @@ export function CheckoutForm({
   const [showAddressSuggestions, setShowAddressSuggestions] = useState(false);
   const [isSearchingAddress, setIsSearchingAddress] = useState(false);
   const [outsideDeliveryZone, setOutsideDeliveryZone] = useState(false);
+  // The suggestion the shopper actually picked, kept so it can ride along to
+  // `setShippingAddress`. That is what lets the server match map-drawn
+  // ("polygon") delivery zones against this address's exact coordinates
+  // instead of geocoding the typed text — skipping it is the most common
+  // cause of "the store says it doesn't deliver here, but it does". Null
+  // whenever the address was typed by hand or edited after picking.
+  const [pickedPlace, setPickedPlace] = useState<{
+    placeId: string;
+    sessionToken: string;
+  } | null>(null);
   const addressSessionToken = useRef(
     typeof crypto !== 'undefined' ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`
   );
@@ -108,10 +130,14 @@ export function CheckoutForm({
 
   async function handleSelectAddressSuggestion(suggestion: AddressSuggestion) {
     setShowAddressSuggestions(false);
+    // The token this resolution is billed under — hand the SAME one to
+    // `setShippingAddress` so a server-side cache miss re-resolves within this
+    // autocomplete session instead of opening a new (billed) one.
+    const resolvingSessionToken = addressSessionToken.current;
     try {
       const { address, inZone } = await getClient().getAddressDetails(
         suggestion.placeId,
-        addressSessionToken.current
+        resolvingSessionToken
       );
       setFormData((prev) => {
         const country = address.country || prev.country;
@@ -138,9 +164,15 @@ export function CheckoutForm({
         };
       });
       setOutsideDeliveryZone(!inZone);
+      // Note we deliberately do NOT copy address.lat/lng into the form: no
+      // address endpoint accepts coordinates (zone matching decides which rate
+      // is charged, so the server resolves them from the placeId itself).
+      // They're yours to use for a map pin and nothing else.
+      setPickedPlace({ placeId: suggestion.placeId, sessionToken: resolvingSessionToken });
     } catch {
       // Resolution failed — keep whatever the shopper had typed/selected as
       // the visible text; they can still fill in the rest manually.
+      setPickedPlace(null);
     } finally {
       // New session for the next address-entry attempt.
       addressSessionToken.current =
@@ -212,7 +244,17 @@ export function CheckoutForm({
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (validate()) {
-      onSubmit(formData, { acceptsMarketing, saveDetails: showSaveDetails && saveDetails });
+      onSubmit(
+        {
+          ...formData,
+          // Both undefined when the shopper typed the address by hand or
+          // edited it after picking a suggestion — the server then geocodes
+          // the text, which is the right behaviour once the two disagree.
+          placeId: pickedPlace?.placeId,
+          placeSessionToken: pickedPlace?.sessionToken,
+        },
+        { acceptsMarketing, saveDetails: showSaveDetails && saveDetails }
+      );
     }
   }
 
@@ -225,6 +267,12 @@ export function CheckoutForm({
       }
       return next;
     });
+    // Once any address field is edited, the picked suggestion no longer
+    // describes what is in the form — keeping its placeId would match delivery
+    // zones against the address the shopper originally selected.
+    if (PLACE_INVALIDATING_FIELDS.has(field)) {
+      setPickedPlace(null);
+    }
     if (errors[field]) {
       setErrors((prev) => {
         const next = { ...prev };

package/templates/nextjs/base/src/components/checkout/custom-fields-step.tsx

@@ -5,6 +5,7 @@ import type { CheckoutCustomFieldDefinition } from 'brainerce';
 import { useTranslations } from '@/core/lib/translations';
 import { cn } from '@/core/lib/utils';
 import { DatePicker } from '@/components/checkout/date-picker';
+import { DateTimePicker } from '@/components/checkout/datetime-picker';
 
 /** Inline, dependency-free — this file lives in the base template and must
  * not assume any design pack (e.g. Atelier's icon set) is present; canvas
@@ -173,8 +174,7 @@ export function CustomFieldsStep({
                   value={(value as string) ?? ''}
                   onChange={(v) => onChange(field.key, v)}
                   required={field.required}
-                  minDate={field.dateAvailability?.minDate ?? undefined}
-                  maxDate={field.dateAvailability?.maxDate ?? undefined}
+                  availability={field.dateAvailability}
                   placeholder={t('customFieldsDatePlaceholder')}
                   todayLabel={t('customFieldsDateToday')}
                   clearLabel={t('customFieldsDateClear')}
@@ -185,6 +185,28 @@ export function CustomFieldsStep({
               </div>
             );
 
+          case 'DATETIME':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <DateTimePicker
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(v) => onChange(field.key, v)}
+                  required={field.required}
+                  availability={field.dateAvailability}
+                  placeholder={t('customFieldsDatePlaceholder')}
+                  todayLabel={t('customFieldsDateToday')}
+                  clearLabel={t('customFieldsDateClear')}
+                  prevMonthLabel={t('customFieldsDatePrevMonth')}
+                  nextMonthLabel={t('customFieldsDateNextMonth')}
+                  timeLabel={t('customFieldsTimeLabel')}
+                  closedLabel={t('customFieldsTimeClosed')}
+                />
+                {helpEl}
+              </div>
+            );
+
           case 'IMAGE': {
             const isUploading = uploadingKeys.has(field.key);
             return (

package/templates/nextjs/base/src/components/checkout/date-picker.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
+import { isCalendarDateAllowed, type DateAvailabilityConstraints } from 'brainerce';
 import { cn } from '@/core/lib/utils';
 
 /**
@@ -13,17 +14,26 @@ import { cn } from '@/core/lib/utils';
  * canvas scaffolds wipe `src/ui` and ship no pack, but never touch
  * `src/components/`, so this must work without either.
  *
- * `minDate`/`maxDate` ("YYYY-MM-DD") disable individual out-of-range days.
- * Blocked weekdays/dates and DATETIME business-hours slots are out of scope —
- * `dateAvailability` isn't read here.
+ * Day availability is delegated wholesale to the SDK's `isCalendarDateAllowed`
+ * — min/max date, blocked weekdays AND blocked specific dates in one call, the
+ * exact predicate the server re-runs on submit. Reimplementing any part of it
+ * here is how a picker ends up offering a day the API then rejects with 400.
  */
 interface DatePickerProps {
   id?: string;
   value: string; // 'YYYY-MM-DD' or ''
   onChange: (value: string) => void;
   required?: boolean;
-  minDate?: string;
-  maxDate?: string;
+  /** The field's `dateAvailability`, passed straight through from the API. */
+  availability?: DateAvailabilityConstraints | null;
+  /**
+   * Extra per-day gate ANDed with `isCalendarDateAllowed`. DATETIME fields use
+   * it to grey out days that pass the calendar rules but have no business-hours
+   * window — those are closed all day, and offering them is what produces a
+   * "no business hours are configured for this day" 400 after the shopper has
+   * already committed to a date.
+   */
+  isDateSelectable?: (dateYYYYMMDD: string) => boolean;
   placeholder: string;
   todayLabel: string;
   clearLabel: string;
@@ -51,8 +61,8 @@ export function DatePicker({
   value,
   onChange,
   required,
-  minDate,
-  maxDate,
+  availability,
+  isDateSelectable,
   placeholder,
   todayLabel,
   clearLabel,
@@ -72,8 +82,6 @@ export function DatePicker({
   }, []);
 
   const selected = parseYMD(value);
-  const min = minDate ? parseYMD(minDate) : null;
-  const max = maxDate ? parseYMD(maxDate) : null;
   const today = new Date();
   const [view, setView] = useState(() => {
     const initial = selected ?? { y: today.getFullYear(), m: today.getMonth() };
@@ -100,13 +108,9 @@ export function DatePicker({
   }, [open]);
 
   function isDisabled(y: number, m: number, d: number): boolean {
-    if (min && (y < min.y || (y === min.y && (m < min.m || (m === min.m && d < min.d))))) {
-      return true;
-    }
-    if (max && (y > max.y || (y === max.y && (m > max.m || (m === max.m && d > max.d))))) {
-      return true;
-    }
-    return false;
+    const ymd = toYMD(y, m, d);
+    if (!isCalendarDateAllowed(ymd, availability)) return true;
+    return isDateSelectable ? !isDateSelectable(ymd) : false;
   }
 
   function selectDay(y: number, m: number, d: number) {

package/templates/nextjs/base/src/components/checkout/datetime-picker.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  computeAvailableSlots,
+  getBusinessHoursForDate,
+  type DateAvailabilityConstraints,
+} from 'brainerce';
+import { cn } from '@/core/lib/utils';
+import { DatePicker } from '@/components/checkout/date-picker';
+
+/**
+ * Date + time control for checkout `DATETIME` custom fields.
+ *
+ * **The value it emits is `"YYYY-MM-DDTHH:mm"` with no UTC offset**, which the
+ * API resolves in the *store's* timezone — the only frame a delivery slot has.
+ * Do not append an offset from the shopper's browser (a buyer travelling
+ * abroad would book a different hour than the one they tapped), and never
+ * concatenate a human slot label: `"2026-08-13" + "T13:00-14:00"` parses as a
+ * -14:00 UTC offset and silently books the following day.
+ *
+ * Which times exist comes from the SDK, not from a list hardcoded here:
+ * - `computeAvailableSlots` → discrete slot starts, when the field defines
+ *   `slotDurationMinutes`. The submitted time must equal one of them exactly.
+ * - `getBusinessHoursForDate` → the open/close window, when it doesn't. Slots
+ *   being empty does NOT mean the day is closed; that distinction is why this
+ *   component asks for the windows separately.
+ *
+ * Dependency-free from any design pack, same as `date-picker.tsx`.
+ */
+interface DateTimePickerProps {
+  id?: string;
+  /** 'YYYY-MM-DDTHH:mm' or ''. */
+  value: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+  availability?: DateAvailabilityConstraints | null;
+  placeholder: string;
+  todayLabel: string;
+  clearLabel: string;
+  prevMonthLabel: string;
+  nextMonthLabel: string;
+  timeLabel: string;
+  closedLabel: string;
+  className?: string;
+}
+
+function splitValue(value: string): { date: string; time: string } {
+  const [date = '', time = ''] = value.split('T');
+  return { date, time: time.slice(0, 5) };
+}
+
+export function DateTimePicker({
+  id,
+  value,
+  onChange,
+  required,
+  availability,
+  placeholder,
+  todayLabel,
+  clearLabel,
+  prevMonthLabel,
+  nextMonthLabel,
+  timeLabel,
+  closedLabel,
+  className,
+}: DateTimePickerProps) {
+  const submitted = splitValue(value);
+  // The date survives on its own while no time is picked yet. The field value
+  // stays empty until both halves exist, so a `required` field can't be
+  // satisfied by a half-filled answer.
+  const [date, setDate] = useState(submitted.date);
+
+  const slots = date ? computeAvailableSlots(availability, date) : [];
+  const windows = date ? getBusinessHoursForDate(availability, date) : [];
+  const openDay = (dateYYYYMMDD: string) =>
+    !availability?.businessHours?.length ||
+    getBusinessHoursForDate(availability, dateYYYYMMDD).length > 0;
+
+  const commit = (nextDate: string, nextTime: string) => {
+    setDate(nextDate);
+    onChange(nextDate && nextTime ? `${nextDate}T${nextTime}` : '');
+  };
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <DatePicker
+        id={id}
+        value={date}
+        onChange={(d) => commit(d, '')}
+        required={required}
+        availability={availability}
+        isDateSelectable={openDay}
+        placeholder={placeholder}
+        todayLabel={todayLabel}
+        clearLabel={clearLabel}
+        prevMonthLabel={prevMonthLabel}
+        nextMonthLabel={nextMonthLabel}
+      />
+
+      {date && slots.length > 0 && (
+        <div className="flex flex-wrap gap-1.5" role="group" aria-label={timeLabel}>
+          {slots.map((slot) => (
+            <button
+              key={slot}
+              type="button"
+              onClick={() => commit(date, slot)}
+              aria-pressed={submitted.time === slot}
+              className={cn(
+                'h-9 rounded-lg border px-3 text-sm tabular-nums transition-colors',
+                submitted.time === slot
+                  ? 'bg-primary text-primary-foreground border-primary font-semibold'
+                  : 'border-border hover:bg-secondary'
+              )}
+            >
+              {slot}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {date && slots.length === 0 && windows.length > 0 && (
+        <label className="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">{timeLabel}</span>
+          <input
+            type="time"
+            value={submitted.time}
+            required={required}
+            // The window is a half-open interval [open, close) server-side, so
+            // `max` here is the last minute the API will still accept.
+            min={windows[0].open}
+            max={windows[0].close}
+            onChange={(e) => commit(date, e.target.value)}
+            className="bg-background focus-visible:ring-primary h-11 rounded-lg border px-3 text-sm focus-visible:outline-none focus-visible:ring-2"
+          />
+        </label>
+      )}
+
+      {date && slots.length === 0 && windows.length === 0 && (
+        <p className="text-muted-foreground text-xs">{closedLabel}</p>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/checkout/shipping-step.tsx

@@ -14,6 +14,21 @@ interface ShippingStepProps {
   className?: string;
 }
 
+/**
+ * Live carrier rates arrive labelled with the carrier's own service identifier
+ * — `USPS PriorityMailInternational`, `USAExportPBA USAExportStandard` — which
+ * answers a question no shopper asked. They are choosing between how fast and
+ * how much, so we render `speedTier` in the store's own language instead.
+ *
+ * Manual zone rates carry no `speedTier`: the merchant named those deliberately,
+ * so those keep `rate.name` exactly as written.
+ */
+const TIER_KEYS = {
+  cheapest: 'shippingTierCheapest',
+  balanced: 'shippingTierBalanced',
+  fastest: 'shippingTierFastest',
+} as const;
+
 export function ShippingStep({
   rates,
   selectedRateId,
@@ -53,6 +68,7 @@ export function ShippingStep({
         const price = parseFloat(rate.price);
         const isFree = price === 0;
         const isSelected = selectedRateId === rate.id;
+        const label = rate.speedTier ? t(TIER_KEYS[rate.speedTier]) : rate.name;
 
         return (
           <button
@@ -80,7 +96,7 @@ export function ShippingStep({
 
             {/* Rate info */}
             <div className="min-w-0 flex-1">
-              <p className="text-foreground text-sm font-medium">{rate.name}</p>
+              <p className="text-foreground text-sm font-medium">{label}</p>
               {rate.description && (
                 <p className="text-muted-foreground mt-0.5 text-xs">{rate.description}</p>
               )}

package/templates/nextjs/designs/atelier/messages-patch/en.json

@@ -30,15 +30,15 @@
     "catEarrings": "Earrings",
     "catBracelets": "Bracelets",
     "catCta": "Shop the category",
-    "storyEyebrow": "Our studio",
+    "storyEyebrow": "Our story",
     "storyTitle": "Made with care, made to last",
-    "storyP1": "Every piece begins as a small sketch on paper — and ends as delicate handwork in our studio. We choose every material and every detail with care, so the piece that reaches you is exactly as we imagined it.",
-    "storyP2": "We believe in pieces that last: real materials, meticulous finish and full warranty on every piece. That is what love for the small details looks like.",
+    "storyP1": "Every product we carry is chosen with the same question in mind: would we want this ourselves? We check quality, sourcing and detail before anything reaches our shelves, so what arrives at your door is exactly what you expect.",
+    "storyP2": "We believe in products that last: solid materials, careful quality checks and full support behind every order. That is what care for the details looks like.",
     "storyCta": "Discover the collection",
-    "storyStat1Value": "Handmade",
-    "storyStat1Label": "Every piece is made in our studio",
-    "storyStat2Value": "Hand-finished",
-    "storyStat2Label": "Every piece checked before it ships",
+    "storyStat1Value": "Quality-checked",
+    "storyStat1Label": "Every product is checked before it's listed",
+    "storyStat2Value": "Fully guaranteed",
+    "storyStat2Label": "Every order backed by our support",
     "testimonialsEyebrow": "Customer stories",
     "testimonialsTitle": "They already fell in love",
     "testimonial1Quote": "It arrived in gorgeous packaging and looks even better than the photos. I got compliments on day one.",

package/templates/nextjs/designs/atelier/messages-patch/he.json

@@ -30,15 +30,15 @@
     "catEarrings": "עגילים",
     "catBracelets": "צמידים",
     "catCta": "לצפייה בקטגוריה",
-    "storyEyebrow": "הסטודיו שלנו",
-    "storyTitle": "נוצר ביד, נאהב בלב",
-    "storyP1": "כל פריט אצלנו מתחיל בסקיצה קטנה על נייר — ונגמר בעבודת יד עדינה בסטודיו. אנחנו בוחרים כל חומר וכל פרט בקפידה, כדי שהפריט שיגיע אליכן יהיה בדיוק כמו שדמיינו אותו.",
-    "storyP2": "אנחנו מאמינים בפריטים שנשארים: חומרים אמיתיים, גימור מוקפד ואחריות מלאה על כל פריט. ככה נראית אהבה לפרטים הקטנים.",
+    "storyEyebrow": "הסיפור שלנו",
+    "storyTitle": "מוקפד בכל פרט, מהתחלה ועד אליכם",
+    "storyP1": "כל מוצר אצלנו עובר את אותה שאלה: האם היינו רוצים אותו בעצמנו? אנחנו בודקים איכות, מקור וכל פרט לפני שמשהו עולה למדף שלנו, כדי שמה שמגיע אליכם יהיה בדיוק מה שציפיתם לו.",
+    "storyP2": "אנחנו מאמינים במוצרים שנשארים: חומרים איכותיים, בקרת איכות קפדנית ותמיכה מלאה מאחורי כל הזמנה. ככה נראית תשומת לב לפרטים הקטנים.",
     "storyCta": "לגלות את הקולקציה",
-    "storyStat1Value": "עבודת יד",
-    "storyStat1Label": "כל פריט נוצר בסטודיו שלנו",
-    "storyStat2Value": "גימור מוקפד",
-    "storyStat2Label": "כל פריט נבדק לפני המשלוח",
+    "storyStat1Value": "איכות נבדקת",
+    "storyStat1Label": "כל מוצר נבדק לפני שהוא עולה לאתר",
+    "storyStat2Value": "אחריות מלאה",
+    "storyStat2Label": "כל הזמנה מגובה בתמיכה שלנו",
     "testimonialsEyebrow": "לקוחות מספרות",
     "testimonialsTitle": "הן כבר התאהבו",
     "testimonial1Quote": "הפריט הגיע באריזה מהממת ונראה אפילו יותר טוב מבתמונות. קיבלתי מחמאות כבר ביום הראשון.",

package/templates/nextjs/designs/atelier/ui/home/editorial-band.tsx

@@ -1,9 +1,11 @@
 'use client';
 
 /**
- * Editorial "our studio" band — lifestyle photography (Pexels hotlinks,
+ * Editorial "our story" band — lifestyle photography (Pexels hotlinks,
  * HEAD-verified) + brand-story copy from translation keys. Purely template
- * marketing content; no catalog data is hardcoded here.
+ * marketing content; no catalog data is hardcoded here. Deliberately
+ * vertical-neutral (order fulfillment / packaging imagery, not a specific
+ * product category) since this pack scaffolds stores of any kind.
  */
 import { Link } from '@/core/lib/navigation';
 import { useTranslations } from '@/core/lib/translations';
@@ -11,9 +13,9 @@ import { IconArrowEnd } from '@/ui/shared/icons';
 
 // Verified free-stock imagery (images.pexels.com allows hotlinking).
 const IMG_MODEL =
-  'https://images.pexels.com/photos/1454171/pexels-photo-1454171.jpeg?auto=compress&cs=tinysrgb&w=1200';
+  'https://images.pexels.com/photos/7857523/pexels-photo-7857523.jpeg?auto=compress&cs=tinysrgb&w=1200';
 const IMG_DETAIL =
-  'https://images.pexels.com/photos/1191531/pexels-photo-1191531.jpeg?auto=compress&cs=tinysrgb&w=800';
+  'https://images.pexels.com/photos/6224252/pexels-photo-6224252.jpeg?auto=compress&cs=tinysrgb&w=800';
 
 export function EditorialBand() {
   const t = useTranslations('home');
@@ -23,8 +25,8 @@ export function EditorialBand() {
       <div className="container-page grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
         {/* Image pair */}
         <div className="grid grid-cols-12 gap-4">
-          <figure className="col-span-8 -rotate-2 overflow-hidden rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.35)]">
-            {/* eslint-disable-next-line @next/next/no-img-element -- editorial stock hotlink, host not in next remotePatterns */}
+          <figure className="border-background col-span-8 -rotate-2 overflow-hidden rounded-3xl border-4 shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.35)]">
+            {}
             <img
               src={IMG_MODEL}
               alt={t('storyTitle')}
@@ -32,8 +34,8 @@ export function EditorialBand() {
               className="aspect-[4/5] h-full w-full object-cover"
             />
           </figure>
-          <figure className="col-span-4 -mb-8 self-end rotate-3 overflow-hidden rounded-3xl border-4 border-background shadow-[0_24px_50px_-20px_hsl(var(--primary)/0.35)]">
-            {/* eslint-disable-next-line @next/next/no-img-element -- editorial stock hotlink, host not in next remotePatterns */}
+          <figure className="border-background col-span-4 -mb-8 rotate-3 self-end overflow-hidden rounded-3xl border-4 shadow-[0_24px_50px_-20px_hsl(var(--primary)/0.35)]">
+            {}
             <img
               src={IMG_DETAIL}
               alt={t('storyStat1Value')}
@@ -47,18 +49,18 @@ export function EditorialBand() {
         <div className="max-w-xl">
           <span className="eyebrow">{t('storyEyebrow')}</span>
           <h2 className="text-4xl sm:text-5xl">{t('storyTitle')}</h2>
-          <p className="mt-5 leading-8 text-muted-foreground">{t('storyP1')}</p>
-          <p className="mt-4 leading-8 text-muted-foreground">{t('storyP2')}</p>
+          <p className="text-muted-foreground mt-5 leading-8">{t('storyP1')}</p>
+          <p className="text-muted-foreground mt-4 leading-8">{t('storyP2')}</p>
 
           {/* Craft highlights */}
           <dl className="mt-8 grid grid-cols-2 gap-6 border-t pt-8">
             <div>
-              <dt className="font-display text-2xl text-foreground">{t('storyStat1Value')}</dt>
-              <dd className="mt-1 text-sm text-muted-foreground">{t('storyStat1Label')}</dd>
+              <dt className="font-display text-foreground text-2xl">{t('storyStat1Value')}</dt>
+              <dd className="text-muted-foreground mt-1 text-sm">{t('storyStat1Label')}</dd>
             </div>
             <div>
-              <dt className="font-display text-2xl text-foreground">{t('storyStat2Value')}</dt>
-              <dd className="mt-1 text-sm text-muted-foreground">{t('storyStat2Label')}</dd>
+              <dt className="font-display text-foreground text-2xl">{t('storyStat2Value')}</dt>
+              <dd className="text-muted-foreground mt-1 text-sm">{t('storyStat2Label')}</dd>
             </div>
           </dl>