create-brainerce-store 1.50.1 → 1.50.5

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.50.1",
+      version: "1.50.5",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.50.1",
+  "version": "1.50.5",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/next.config.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from 'next';
+import { OPTIMIZED_IMAGE_HOSTS } from './src/lib/image-hosts';
 
 // Build-time invariant — fail loud if NEXT_PUBLIC_STORE_CURRENCY is missing
 // for a production build. Next.js inlines NEXT_PUBLIC_* into the client
@@ -28,16 +29,23 @@ const nextConfig: NextConfig = {
   serverExternalPackages: ['isomorphic-dompurify'],
   images: {
     // The storefront is a consumer of the Brainerce API — it has to render
-    // whatever image URLs the API returns. In practice those URLs can be on
-    // cdn.brainerce.com OR on an upstream merchant host (WooCommerce, Shopify,
-    // self-hosted) depending on whether the product's image-import job has
-    // completed on the backend. Rather than hard-fail on unknown hosts, skip
-    // the server-side optimizer entirely and let the browser fetch each image
-    // directly from origin. No server-side fetching → no SSRF or DoS surface
-    // on this Next server. Trade-off: no webp/resize/lazy optimization, so
-    // LCP is marginally worse. Acceptable; the storefront is not the right
-    // layer to enforce a hostname policy.
-    unoptimized: true,
+    // whatever image URLs the API returns. In practice those URLs are
+    // usually on cdn.brainerce.com, but a product/variant can still carry a
+    // raw upstream-merchant URL (WooCommerce, Shopify, self-hosted) while
+    // its image-import job is pending or failed. Rather than allowlist every
+    // possible merchant host (or hard-fail on them), only cdn.brainerce.com
+    // goes through the server-side optimizer; components render product/blog
+    // images via `CdnImage` (src/components/shared/cdn-image.tsx), which
+    // detects any other host and renders it `unoptimized` — an unresized
+    // direct-from-origin fetch, same as this template's prior behavior —
+    // instead of next/image throwing on an unconfigured hostname. No
+    // server-side fetching of unknown hosts → no SSRF/DoS surface on this
+    // Next server.
+    remotePatterns: OPTIMIZED_IMAGE_HOSTS.map((hostname) => ({
+      protocol: 'https' as const,
+      hostname,
+      pathname: '/**',
+    })),
   },
   async headers() {
     return [

package/templates/nextjs/base/package.json.ejs

@@ -16,7 +16,8 @@
     "react-dom": "^19.0.0",
     "clsx": "^2.1.0",
     "tailwind-merge": "^2.2.0",
-    "isomorphic-dompurify": "<%= isomorphicDompurifyVersion %>"
+    "isomorphic-dompurify": "<%= isomorphicDompurifyVersion %>",
+    "sharp": "^0.35.3"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
@@ -31,5 +32,8 @@
   },
   "engines": {
     "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": ["sharp"]
   }
 }

package/templates/nextjs/base/src/app/blog/[slug]/page.tsx.ejs

@@ -12,7 +12,7 @@ import * as React from 'react';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import Link from 'next/link';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 
 import { getServerClient } from '@/lib/brainerce';
 import { sanitizeHtml } from '@/lib/sanitize';

package/templates/nextjs/base/src/app/blog/page.tsx.ejs

@@ -10,7 +10,7 @@
 import * as React from 'react';
 import type { Metadata } from 'next';
 import Link from 'next/link';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 
 import { getServerClient } from '@/lib/brainerce';
 

package/templates/nextjs/base/src/app/checkout/page.tsx

@@ -2,7 +2,7 @@
 
 import { Suspense, useEffect, useState, useCallback, useRef } from 'react';
 import { useSearchParams } from 'next/navigation';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import { Link } from '@/lib/navigation';
 import type {
   Checkout,

package/templates/nextjs/base/src/app/layout.tsx.ejs

@@ -91,11 +91,12 @@ export default async function RootLayout({
             merchant can toggle it per sales channel in the dashboard. */}
         <script
           defer
-          src={`${process.env.NEXT_PUBLIC_BRAINERCE_API_URL || 'https://api.brainerce.com'}/t.js`}
+          src={`${process.env.NEXT_PUBLIC_BRAINERCE_PIXEL_URL || 'https://api.brainerce.com'}/t.js`}
           data-channel={
             process.env.NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID || '<%= connectionId %>'
           }
           nonce={nonce}
+          suppressHydrationWarning
         />
       </head>
       <body className={font.className}>
@@ -197,11 +198,12 @@ export default async function RootLayout({
             merchant can toggle it per sales channel in the dashboard. */}
         <script
           defer
-          src={`${process.env.NEXT_PUBLIC_BRAINERCE_API_URL || 'https://api.brainerce.com'}/t.js`}
+          src={`${process.env.NEXT_PUBLIC_BRAINERCE_PIXEL_URL || 'https://api.brainerce.com'}/t.js`}
           data-channel={
             process.env.NEXT_PUBLIC_BRAINERCE_SALES_CHANNEL_ID || '<%= connectionId %>'
           }
           nonce={nonce}
+          suppressHydrationWarning
         />
       </head>
       <body className={font.className}>

package/templates/nextjs/base/src/app/products/[slug]/product-client-section.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState, useMemo } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type {
   Product,
   ProductVariant,

package/templates/nextjs/base/src/components/account/order-customizations.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type { OrderItem } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';

package/templates/nextjs/base/src/components/account/order-history.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type { Order, OrderStatus, OrderDownloadLink } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';

package/templates/nextjs/base/src/components/cart/cart-bundle-offer.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { useCurrency } from '@/lib/use-currency';

package/templates/nextjs/base/src/components/cart/cart-item.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type { CartItem as CartItemType } from 'brainerce';
 import { getCartItemImage, formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';

package/templates/nextjs/base/src/components/cart/cart-upgrade-banner.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type { CartUpgradeSuggestion, CartItem as CartItemType } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';

package/templates/nextjs/base/src/components/checkout/order-bump-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type { OrderBump, RecommendationVariant } from 'brainerce';
 import { formatPrice, getVariantOptions } from 'brainerce';
 import { useCurrency } from '@/lib/use-currency';

package/templates/nextjs/base/src/components/products/frequently-bought-together.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type { Product, ProductRecommendation } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { useCart, useStoreInfo } from '@/providers/store-provider';

package/templates/nextjs/base/src/components/products/modifier-group-selector.tsx

@@ -24,7 +24,6 @@
  */
 
 import type { Modifier, ModifierGroup, ModifierSelection } from 'brainerce';
-import { AllergenChips } from './allergen-chips';
 
 interface ModifierGroupSelectorProps {
   /**
@@ -121,9 +120,6 @@ export function ModifierGroupSelector({
                     Sold out
                   </span>
                 )}
-                {modifier.allergens && modifier.allergens.length > 0 && (
-                  <AllergenChips allergens={modifier.allergens} />
-                )}
               </label>
               {modifier.description && (
                 <p className="modifier-option__description">{modifier.description}</p>

package/templates/nextjs/base/src/components/products/product-card.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { Link, useRouter } from '@/lib/navigation';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type { Product } from 'brainerce';
 import { getProductPriceInfo, getVariantPrice, formatPrice } from 'brainerce';
 import { useTranslations } from '@/lib/translations';

package/templates/nextjs/base/src/components/products/recommendation-section.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { Link } from '@/lib/navigation';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/components/shared/cdn-image';
 import type { ProductRecommendation } from 'brainerce';
 import { PriceDisplay } from '@/components/shared/price-display';
 import { cn } from '@/lib/utils';

package/templates/nextjs/base/src/components/shared/cdn-image.tsx

@@ -0,0 +1,26 @@
+import Image, { type ImageProps } from 'next/image';
+import { OPTIMIZED_IMAGE_HOSTS } from '@/lib/image-hosts';
+
+const OPTIMIZED_HOSTS = new Set(OPTIMIZED_IMAGE_HOSTS);
+
+function isOptimizedHost(src: ImageProps['src']): boolean {
+  if (typeof src !== 'string') return true; // StaticImageData — always local
+  try {
+    return OPTIMIZED_HOSTS.has(new URL(src).hostname);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Drop-in `next/image` replacement for Brainerce-sourced images (product
+ * photos, blog covers). Uploaded images get re-hosted onto cdn.brainerce.com
+ * by the backend's async image-import pipeline, but a product/variant can
+ * still carry a raw upstream-merchant URL while mid-import, or if that job
+ * failed. next/image throws if `src`'s host isn't in `images.remotePatterns`,
+ * so any host outside our known CDN falls back to `unoptimized` — an
+ * unresized, direct-from-origin fetch — instead of crashing the page.
+ */
+export function CdnImage({ unoptimized, ...props }: ImageProps) {
+  return <Image {...props} unoptimized={unoptimized ?? !isOptimizedHost(props.src)} />;
+}

package/templates/nextjs/base/src/lib/image-hosts.ts

@@ -0,0 +1,7 @@
+/**
+ * Single source of truth for which hostnames Brainerce serves optimized
+ * (CDN-hosted, WebP) images from. Shared between `next.config.ts`
+ * (`images.remotePatterns`) and `CdnImage` (per-instance `unoptimized`
+ * fallback) so the two lists can't drift apart.
+ */
+export const OPTIMIZED_IMAGE_HOSTS = ['cdn.brainerce.com'];

package/templates/nextjs/base/src/lib/sanitize-html.ts

@@ -71,6 +71,9 @@ export function sanitizeProductHtml(html: string): string {
       'colgroup',
       'col',
       'iframe',
+      // Self-hosted product videos (uploaded via the dashboard media library).
+      'video',
+      'source',
     ],
     ALLOWED_ATTR: [
       'href',
@@ -87,6 +90,15 @@ export function sanitizeProductHtml(html: string): string {
       'allowfullscreen',
       'frameborder',
       'loading',
+      'title',
+      // <video> / <source> playback attributes.
+      'controls',
+      'poster',
+      'preload',
+      'muted',
+      'loop',
+      'playsinline',
+      'type',
     ],
     ALLOW_DATA_ATTR: false,
   });

package/templates/nextjs/base/src/middleware.ts.ejs

@@ -43,7 +43,7 @@ function buildCsp(nonce: string): string {
     "style-src 'self' 'unsafe-inline' https://cdn.meshulam.co.il",
     "img-src 'self' data: blob: https:",
     "font-src 'self' data:",
-    "frame-src 'self' https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://grow.security https://*.grow.security https://creditguard.co.il https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com https://secure.cardcom.solutions https://checkout.stripe.com https://www.paypal.com https://www.sandbox.paypal.com https://*.brainerce.com",
+    "frame-src 'self' https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://grow.security https://*.grow.security https://creditguard.co.il https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com https://secure.cardcom.solutions https://checkout.stripe.com https://www.paypal.com https://www.sandbox.paypal.com https://www.youtube.com https://www.youtube-nocookie.com https://player.vimeo.com https://*.brainerce.com",
     `connect-src 'self' ${brainerceApiOrigin()} https://api.brainerce.com https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://pay.google.com https://*.stripe.com https://*.creditguard.co.il`,
     "worker-src 'self' blob:",
     // 'self' (not 'none') so iframe-based payment providers (e.g. Cardcom)
@@ -171,7 +171,7 @@ function buildCsp(nonce: string): string {
     "style-src 'self' 'unsafe-inline' https://cdn.meshulam.co.il",
     "img-src 'self' data: blob: https:",
     "font-src 'self' data:",
-    "frame-src 'self' https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://grow.security https://*.grow.security https://creditguard.co.il https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com https://secure.cardcom.solutions https://checkout.stripe.com https://www.paypal.com https://www.sandbox.paypal.com https://*.brainerce.com",
+    "frame-src 'self' https://meshulam.co.il https://*.meshulam.co.il https://grow.link https://*.grow.link https://grow.security https://*.grow.security https://creditguard.co.il https://*.creditguard.co.il https://js.stripe.com https://hooks.stripe.com https://pay.google.com https://secure.cardcom.solutions https://checkout.stripe.com https://www.paypal.com https://www.sandbox.paypal.com https://www.youtube.com https://www.youtube-nocookie.com https://player.vimeo.com https://*.brainerce.com",
     `connect-src 'self' ${brainerceApiOrigin()} https://api.brainerce.com https://*.meshulam.co.il https://grow.link https://*.grow.link https://*.grow.security https://pay.google.com https://*.stripe.com https://*.creditguard.co.il`,
     "worker-src 'self' blob:",
     // 'self' (not 'none') so iframe-based payment providers (e.g. Cardcom)

package/templates/nextjs/base/src/components/products/allergen-chips.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-/**
- * <AllergenChips> — informational allergen markers for storefront PDPs.
- * Pure presentation; no interactivity. Pairs with `<ModifierGroupSelector>`
- * but works standalone next to a product as well.
- *
- * Allergens are descriptive only: the system surfaces them but does not
- * auto-block purchase. Customer-side allergen filtering is a deferred SDK
- * feature (PRD §16).
- *
- * Icon resolution (PRD §15 Q4): when `allergen.iconUrl` is set, use it.
- * Otherwise fall back to a built-in emoji keyed by `allergen.code` for the
- * 8 common allergens listed in PRD §5.7. Stores that want branded icons
- * upload via `iconUrl` per allergen; the rest get a sensible default
- * without any setup.
- */
-
-import type { Allergen } from 'brainerce';
-
-/**
- * Default emoji per canonical allergen code. The schema's @@unique on
- * `(accountId, storeId, code)` means a store may have at most one of each;
- * any code not in this map renders without an icon (the chip still shows
- * the localized name, so the customer is informed regardless).
- */
-const DEFAULT_EMOJI_BY_CODE: Record<string, string> = {
-  gluten: '🌾',
-  dairy: '🥛',
-  nuts: '🥜',
-  eggs: '🥚',
-  soy: '🫘',
-  fish: '🐟',
-  shellfish: '🦐',
-  sesame: '🌱',
-};
-
-interface AllergenChipsProps {
-  allergens: Allergen[];
-  /**
-   * When the storefront has more allergen icons than fit nicely, condense
-   * to "Contains: X, Y, +N more" instead of rendering every chip.
-   */
-  maxVisible?: number;
-}
-
-export function AllergenChips({ allergens, maxVisible = 6 }: AllergenChipsProps) {
-  if (!allergens || allergens.length === 0) return null;
-
-  const visible = allergens.slice(0, maxVisible);
-  const overflow = Math.max(0, allergens.length - visible.length);
-
-  return (
-    <span className="allergen-chips" role="list" aria-label="Contains">
-      {visible.map((allergen) => {
-        const fallbackEmoji = DEFAULT_EMOJI_BY_CODE[allergen.code];
-        return (
-          <span key={allergen.id} className="allergen-chip" role="listitem" title={allergen.name}>
-            {allergen.iconUrl ? (
-              <img
-                src={allergen.iconUrl}
-                alt=""
-                aria-hidden="true"
-                className="allergen-chip__icon"
-              />
-            ) : fallbackEmoji ? (
-              <span aria-hidden="true" className="allergen-chip__emoji">
-                {fallbackEmoji}
-              </span>
-            ) : null}
-            <span className="allergen-chip__name">{allergen.name}</span>
-          </span>
-        );
-      })}
-      {overflow > 0 && <span className="allergen-chip allergen-chip--more">+{overflow} more</span>}
-    </span>
-  );
-}