create-brainerce-store 1.50.1 → 1.51.0

package/templates/nextjs/base/src/core/lib/product-options.ts

@@ -0,0 +1,121 @@
+/**
+ * Pure product-option logic (zero markup) shared by `core/hooks/use-product-page`
+ * and the `ui/product` option components. Moved verbatim from
+ * `customization-fields.tsx` / `modifier-group-selector.tsx` so that core
+ * never depends on `ui/` — the UI components re-export these for
+ * backward compatibility.
+ */
+
+import type { ModifierGroup, ModifierSelection, ProductCustomizationField } from 'brainerce';
+
+export type CustomizationValues = Record<string, unknown>;
+
+export function validateCustomization(
+  fields: ProductCustomizationField[],
+  values: CustomizationValues
+): Record<string, string> {
+  const errors: Record<string, string> = {};
+  for (const field of fields) {
+    const value = values[field.key];
+    const empty =
+      value === undefined ||
+      value === null ||
+      value === '' ||
+      (Array.isArray(value) && value.length === 0);
+
+    if (field.required && empty) {
+      errors[field.key] = 'required';
+      continue;
+    }
+    if (empty) continue;
+
+    if (field.type === 'SELECT') {
+      const allowed = (field.enumValues ?? []).map((o) => o.value);
+      if (typeof value !== 'string' || !allowed.includes(value)) {
+        errors[field.key] = 'invalidOption';
+      }
+    }
+    if (field.type === 'MULTI_SELECT') {
+      const allowed = (field.enumValues ?? []).map((o) => o.value);
+      if (
+        !Array.isArray(value) ||
+        !(value as unknown[]).every((v) => typeof v === 'string' && allowed.includes(v as string))
+      ) {
+        errors[field.key] = 'invalidOption';
+      }
+    }
+  }
+  return errors;
+}
+
+/**
+ * Lightweight client-side validation that mirrors the server's checks. Use
+ * this to gate the add-to-cart button — but always treat the server's 400
+ * (`MODIFIER_VALIDATION_FAILED`) as the authoritative answer.
+ */
+export function validateSelections(
+  groups: ModifierGroup[],
+  selections: Record<string, string[]>
+): string | null {
+  for (const group of groups) {
+    if (group.max === 0) continue; // disabled-for-variant — skip
+    const picks = selections[group.id] ?? [];
+    if (group.required && picks.length === 0) {
+      return `${group.name} is required`;
+    }
+    if (picks.length < group.min) {
+      return `Pick at least ${group.min} from ${group.name}`;
+    }
+    if (group.max != null && picks.length > group.max) {
+      return `Pick at most ${group.max} from ${group.name}`;
+    }
+    if (group.selectionType === 'SINGLE' && picks.length > 1) {
+      return `Only one option allowed in ${group.name}`;
+    }
+  }
+  return null;
+}
+
+/**
+ * Adapter: convert the local Record<groupId, modifierIds> shape used by the
+ * selector component into the wire-format `ModifierSelection[]` array the SDK
+ * expects on `addToCart` / `updateCartItem`.
+ */
+export function toModifierSelections(
+  groups: ModifierGroup[],
+  selections: Record<string, string[]>
+): ModifierSelection[] {
+  const out: ModifierSelection[] = [];
+  for (const group of groups) {
+    if (group.max === 0) continue;
+    const picks = selections[group.id] ?? [];
+    if (picks.length === 0) continue;
+    out.push({ modifierGroupId: group.id, modifierIds: picks });
+  }
+  return out;
+}
+
+/**
+ * Build the initial selection map from the group's defaults — call once on
+ * first render for each group. Honors `defaultModifierIds` first (per-attach
+ * defaults), falling back to per-modifier `isDefault` flags. Sold-out
+ * modifiers are filtered out so the user doesn't start with an invalid pick.
+ */
+export function buildInitialSelections(groups: ModifierGroup[]): Record<string, string[]> {
+  const out: Record<string, string[]> = {};
+  for (const group of groups) {
+    if (group.max === 0) continue;
+    const fromDefaults = group.defaultModifierIds ?? [];
+    const fromIsDefault = group.modifiers
+      .filter((m) => m.isDefault && m.available)
+      .map((m) => m.id);
+    const merged =
+      fromDefaults.length > 0
+        ? fromDefaults.filter((id) => group.modifiers.some((m) => m.id === id && m.available))
+        : fromIsDefault;
+    // Cap by max for SINGLE groups — defaults can't violate selection rules.
+    const capped = group.selectionType === 'SINGLE' ? merged.slice(0, 1) : merged;
+    if (capped.length > 0) out[group.id] = capped;
+  }
+  return out;
+}

package/templates/nextjs/base/src/{lib → core/lib}/resolve-currency.ts

@@ -1,4 +1,4 @@
-import type { PublicStoreInfo } from '@/lib/store-info';
+import type { PublicStoreInfo } from '@/core/lib/store-info';
 
 /**
  * Server-side twin of `useCurrency()` — call from Server Components,

package/templates/nextjs/base/src/{lib → core/lib}/safe-redirect.ts

@@ -1,7 +1,7 @@
 // Re-export the platform-maintained payment URL allowlist from the SDK.
 //
 // Why a re-export and not a direct import everywhere: keeping a stable
-// `@/lib/safe-redirect` import path means future SDK API changes (e.g. an
+// `@/core/lib/safe-redirect` import path means future SDK API changes (e.g. an
 // `extraHosts` rename) only need editing here, and merchants don't have to
 // touch every component that does payment redirects. It also leaves a clear
 // place to plug in store-specific extras (custom self-hosted PSP) without

package/templates/nextjs/base/src/{lib → core/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/{lib → core/lib}/sanitize.ts.ejs

@@ -14,7 +14,7 @@
  */
 import DOMPurify from 'isomorphic-dompurify';
 
-const DEFAULT_CONFIG: DOMPurify.Config = {
+const DEFAULT_CONFIG = {
   // Allow iframes for embedded videos/maps the merchant may include.
   ADD_TAGS: ['iframe'],
   ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling', 'target', 'rel'],

package/templates/nextjs/base/src/{lib → core/lib}/use-currency.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useStoreInfo } from '@/providers/store-provider';
+import { useStoreInfo } from '@/core/providers/store-provider';
 
 /**
  * Single source of truth for "which currency code do I format prices with?"

package/templates/nextjs/base/src/{providers → core/providers}/store-provider.tsx.ejs

@@ -3,11 +3,11 @@
 import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
 import type { Cart, CustomerProfile } from 'brainerce';
 import { getCartTotals } from 'brainerce';
-import { getClient, initClient, setStoredCartId } from '@/lib/brainerce';
-import { pickPublicStoreInfo, type PublicStoreInfo } from '@/lib/store-info';
-import { checkAuthStatus, proxyLogout } from '@/lib/auth';
+import { getClient, initClient, setStoredCartId } from '@/core/lib/brainerce';
+import { pickPublicStoreInfo, type PublicStoreInfo } from '@/core/lib/store-info';
+import { checkAuthStatus, proxyLogout } from '@/core/lib/auth';
 <% if (i18nEnabled) { %>
-import { MessagesContext } from '@/lib/translations';
+import { MessagesContext } from '@/core/lib/translations';
 import { getMessages, defaultLocale } from '@/i18n';
 <% } %>
 

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 → ui}/cart/cart-bundle-offer.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { useCurrency } from '@/lib/use-currency';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface CartBundleOfferCardProps {
   offer: CartBundleOfferType;
@@ -33,7 +33,7 @@ export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBun
     if (adding) return;
     try {
       setAdding(true);
-      const { getClient } = await import('@/lib/brainerce');
+      const { getClient } = await import('@/core/lib/brainerce');
       const client = getClient();
       // No variant selections in the default template — products with
       // variants are best handled with a dedicated picker per offered item.

package/templates/nextjs/base/src/{components → ui}/cart/cart-item.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { useState } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { CartItem as CartItemType } from 'brainerce';
 import { getCartItemImage, formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { useCurrency } from '@/lib/use-currency';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { cn } from '@/lib/utils';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { cn } from '@/core/lib/utils';
 
 interface CartItemProps {
   item: CartItemType;

package/templates/nextjs/base/src/{components → ui}/cart/cart-nudges.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { CartNudge } from 'brainerce';
-import { cn } from '@/lib/utils';
+import { cn } from '@/core/lib/utils';
 
 interface CartNudgesProps {
   nudges: CartNudge[];

package/templates/nextjs/base/src/{components → ui}/cart/cart-summary.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { useCart } from '@/providers/store-provider';
-import { useCurrency } from '@/lib/use-currency';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { useCart } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
 
 interface CartSummaryProps {
   className?: string;

package/templates/nextjs/base/src/{components → ui}/cart/cart-upgrade-banner.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import Image from 'next/image';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
 import type { CartUpgradeSuggestion, CartItem as CartItemType } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useCurrency } from '@/lib/use-currency';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { getClient } from '@/core/lib/brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface CartUpgradeBannerProps {
   suggestion: CartUpgradeSuggestion;

package/templates/nextjs/base/src/ui/cart/cart-view.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useCartPage } from '@/core/hooks/use-cart-page';
+import { CartItem } from '@/ui/cart/cart-item';
+import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
+import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
+import { CartSummary } from '@/ui/cart/cart-summary';
+import { CouponInput } from '@/ui/cart/coupon-input';
+import { CartNudges } from '@/ui/cart/cart-nudges';
+import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
+import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
+import { CartRecommendationSection } from '@/ui/product/recommendation-section';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+
+export function CartView() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const { cart, cartLoading, refreshCart, itemCount, cartRecs, upgrades, bundles } = useCartPage();
+
+  if (cartLoading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  // Empty cart state
+  if (!cart || cart.items.length === 0) {
+    return (
+      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
+        <svg
+          className="text-muted-foreground 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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+          />
+        </svg>
+        <h1 className="text-foreground text-2xl font-bold">{t('emptyTitle')}</h1>
+        <p className="text-muted-foreground mt-2">{t('emptySubtitle')}</p>
+        <Link
+          href="/products"
+          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {tc('continueShopping')}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <h1 className="text-foreground mb-6 text-2xl font-bold">
+        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
+      </h1>
+
+      {/* Reservation countdown */}
+      {cart.reservation?.hasReservation && (
+        <ReservationCountdown reservation={cart.reservation} className="mb-6" />
+      )}
+
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        {/* Cart Items */}
+        <div className="lg:col-span-2">
+          {/* Nudges */}
+          {cart.nudges && cart.nudges.length > 0 && (
+            <CartNudges nudges={cart.nudges} className="mb-4" />
+          )}
+
+          {/* Cart items */}
+          <div>
+            {cart.items.map((item) => (
+              <div key={item.id}>
+                <CartItem item={item} onUpdate={refreshCart} />
+                {upgrades?.upgrades?.[item.productId] && (
+                  <CartUpgradeBanner
+                    suggestion={upgrades.upgrades[item.productId]}
+                    cartItem={item}
+                    onUpgrade={refreshCart}
+                    className="mb-2 ms-24"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Bundle offers */}
+          {bundles?.bundles && bundles.bundles.length > 0 && (
+            <div className="mt-6 space-y-3">
+              <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
+              {bundles.bundles.map((offer) => (
+                <CartBundleOfferCard
+                  key={offer.id}
+                  offer={offer}
+                  cartId={cart.id}
+                  onAdd={refreshCart}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Coupon input */}
+          <div className="border-border mt-6 border-t pt-4">
+            <CouponInput cart={cart} onUpdate={refreshCart} />
+          </div>
+        </div>
+
+        {/* Summary sidebar */}
+        <div className="lg:col-span-1">
+          <div className="bg-muted/50 border-border sticky top-24 rounded-lg border p-6">
+            <FreeShippingBar className="mb-4" />
+            <CartSummary />
+
+            <Link
+              href="/checkout"
+              className="bg-primary text-primary-foreground mt-6 inline-flex w-full items-center justify-center rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90"
+            >
+              {t('proceedToCheckout')}
+            </Link>
+
+            <Link
+              href="/products"
+              className="text-muted-foreground hover:text-foreground mt-3 inline-flex w-full items-center justify-center px-6 py-2 text-sm transition-colors"
+            >
+              {tc('continueShopping')}
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection
+          title={t('youMightAlsoNeed')}
+          items={cartRecs.recommendations}
+          className="mt-10"
+        />
+      )}
+    </div>
+  );
+}

package/templates/nextjs/base/src/{components → ui}/cart/coupon-input.tsx

@@ -2,10 +2,10 @@
 
 import { useState } from 'react';
 import type { Cart } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { cn } from '@/lib/utils';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { cn } from '@/core/lib/utils';
 
 interface CouponInputProps {
   cart: Cart;

package/templates/nextjs/base/src/{components → ui}/cart/free-shipping-bar.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { formatPrice } from 'brainerce';
-import { useStoreInfo, useCart } from '@/providers/store-provider';
-import { useCurrency } from '@/lib/use-currency';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useStoreInfo, useCart } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface FreeShippingBarProps {
   className?: string;

package/templates/nextjs/base/src/{components → ui}/cart/reservation-countdown.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import type { ReservationInfo } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface ReservationCountdownProps {
   reservation: ReservationInfo;

package/templates/nextjs/base/src/ui/home/discount-banner-strip.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import type { DiscountBanner } from 'brainerce';
+
+/** Store-wide discount banner strip shown at the very top of the homepage. */
+export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] }) {
+  if (banners.length === 0) return null;
+
+  return (
+    <div className="bg-primary text-primary-foreground">
+      <div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-center gap-4 overflow-x-auto text-sm font-medium">
+          {banners.map((banner) => (
+            <span key={banner.ruleId}>{banner.text}</span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/home/featured-products-section.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductGrid } from '@/ui/product/product-grid';
+
+/** Homepage featured-products grid with a "view all" link. */
+export function FeaturedProductsSection({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+      <div className="mb-8 flex items-center justify-between">
+        <h2 className="text-foreground text-2xl font-bold">{t('featuredProducts')}</h2>
+        <Link href="/products" className="text-primary text-sm font-medium hover:underline">
+          {tc('viewAll')}
+        </Link>
+      </div>
+      <ProductGrid products={products} />
+    </section>
+  );
+}

package/templates/nextjs/base/src/ui/home/hero-section.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+
+/** Homepage hero: welcome headline, subtitle, and shop-now CTA. */
+export function HeroSection({ storeName }: { storeName?: string | null }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section className="bg-muted">
+      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
+          {t('welcomeTo')} {storeName || tc('store')}
+        </h1>
+        <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
+          {t('heroSubtitle')}
+        </p>
+        <Link
+          href="/products"
+          className="bg-primary text-primary-foreground mt-8 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+        >
+          {tc('shopNow')}
+        </Link>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/base/src/ui/home/home-client.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { useHomeData } from '@/core/hooks/use-home-data';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { DiscountBannerStrip } from './discount-banner-strip';
+import { HeroSection } from './hero-section';
+import { FeaturedProductsSection } from './featured-products-section';
+
+export function HomeClient() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const { products, banners, loading } = useHomeData();
+
+  if (storeLoading || loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <DiscountBannerStrip banners={banners} />
+      <HeroSection storeName={storeInfo?.name} />
+      <FeaturedProductsSection products={products} />
+    </div>
+  );
+}

package/templates/nextjs/base/src/{components/content → ui/layout}/faq-section.tsx.ejs

@@ -20,8 +20,8 @@
 
 import * as React from 'react';
 import type { Content } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { sanitizeHtml } from '@/lib/sanitize';
+import { useTranslations } from '@/core/lib/translations';
+import { sanitizeHtml } from '@/core/lib/sanitize';
 
 interface FaqSectionProps {
   /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */

package/templates/nextjs/base/src/{components/content → ui/layout}/header-account.tsx

@@ -13,9 +13,9 @@
  * the cart icon's icon-only treatment; the icon + aria-label keep it accessible.
  */
 import * as React from 'react';
-import { Link } from '@/lib/navigation';
-import { useAuth } from '@/providers/store-provider';
-import { useTranslations } from '@/lib/translations';
+import { Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { useTranslations } from '@/core/lib/translations';
 
 const UserIcon = (props: React.SVGProps<SVGSVGElement>) => (
   <svg