create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/ui-canvas/cart/cart-bundle-offer.tsx

@@ -19,6 +19,8 @@ interface CartBundleOfferCardProps {
  * DESIGN ME — bundle offer card on the cart page: offered products with
  * original vs. discounted prices + add-bundle button; offers come from
  * useCartPage().bundles.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
   const t = useTranslations('cart');

package/templates/nextjs/ui-canvas/cart/cart-item.tsx

@@ -19,6 +19,8 @@ interface CartItemProps {
 /**
  * DESIGN ME — single cart line: image, name, variant, unit price, quantity
  * controls, remove, line total; the `item` prop comes from useCartPage().cart.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function CartItem({ item, onUpdate, className }: CartItemProps) {
   const t = useTranslations('common');

package/templates/nextjs/ui-canvas/cart/cart-nudges.tsx

@@ -11,6 +11,8 @@ interface CartNudgesProps {
 /**
  * DESIGN ME — discount-rule nudges on the cart page ("add X more for Y");
  * texts come from useCartPage().cart.nudges.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function CartNudges({ nudges, className }: CartNudgesProps) {
   if (nudges.length === 0) return null;

package/templates/nextjs/ui-canvas/cart/cart-summary.tsx

@@ -14,6 +14,8 @@ interface CartSummaryProps {
  * DESIGN ME — order summary (subtotal, rule/coupon discounts, shipping, tax
  * note, total); all figures come from useCart().totals and useCart().cart.
  * Keep every discount branch — merchants rely on the per-rule breakdown.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function CartSummary({ className }: CartSummaryProps) {
   const t = useTranslations('cart');

package/templates/nextjs/ui-canvas/cart/cart-upgrade-banner.tsx

@@ -20,6 +20,8 @@ interface CartUpgradeBannerProps {
  * DESIGN ME — per-line upgrade suggestion under a cart item ("upgrade to X
  * for +Y"); the suggestion comes from useCartPage().upgrades keyed by
  * productId. Keep the session-scoped dismiss and the swap logic.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function CartUpgradeBanner({
   suggestion,

package/templates/nextjs/ui-canvas/cart/cart-view.tsx

@@ -27,7 +27,7 @@ export function CartView() {
   if (!cart || cart.items.length === 0) {
     return (
       <section>
-        {/* DESIGN ME — empty-cart state: message + continue-shopping CTA; state comes from useCartPage() */}
+        {/* DESIGN ME — empty-cart state: message + continue-shopping CTA; state comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
         <h1>{t('emptyTitle')}</h1>
         <p>{t('emptySubtitle')}</p>
         <Link href="/products">{tc('continueShopping')}</Link>
@@ -37,7 +37,7 @@ export function CartView() {
 
   return (
     <section>
-      {/* DESIGN ME — cart page: items list, upgrade/bundle offers, coupon, summary sidebar, checkout CTA, cross-sells; everything comes from useCartPage() */}
+      {/* DESIGN ME — cart page: items list, upgrade/bundle offers, coupon, summary sidebar, checkout CTA, cross-sells; everything comes from useCartPage(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <h1>
         {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
       </h1>

package/templates/nextjs/ui-canvas/cart/coupon-input.tsx

@@ -20,6 +20,8 @@ interface CouponInputProps {
  * DESIGN ME — coupon apply/remove control used on the cart page AND the
  * checkout page (via `checkoutId`); the `cart` prop comes from useCartPage().
  * Keep the applied-coupon state and the error message.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInputProps) {
   const t = useTranslations('coupon');

package/templates/nextjs/ui-canvas/cart/free-shipping-bar.tsx

@@ -15,6 +15,8 @@ interface FreeShippingBarProps {
  * shipping"); threshold from useStoreInfo().upsell, subtotal from
  * useCart().totals. The semantic <progress> is a placeholder — build your own
  * meter.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function FreeShippingBar({ className }: FreeShippingBarProps) {
   // Hooks must be called unconditionally and in the same order on every

package/templates/nextjs/ui-canvas/cart/reservation-countdown.tsx

@@ -14,6 +14,8 @@ interface ReservationCountdownProps {
  * DESIGN ME — stock-reservation countdown on the cart/checkout pages; the
  * `reservation` prop comes from useCartPage().cart.reservation. Keep the
  * ticking logic and the expired/urgent states (exposed via data-state).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
   const t = useTranslations('reservation');

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

@@ -8,7 +8,7 @@ export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] })
 
   return (
     <div role="region" aria-label="Promotions">
-      {/* DESIGN ME — discount banner strip: active discount-rule texts; banners come from useHomeData() in the parent */}
+      {/* DESIGN ME — discount banner strip: active discount-rule texts; banners come from useHomeData() in the parent. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <ul className="flex items-center gap-4">
         {banners.map((banner) => (
           <li key={banner.ruleId}>{banner.text}</li>

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

@@ -12,7 +12,7 @@ export function FeaturedProductsSection({ products }: { products: Product[] }) {
 
   return (
     <section>
-      {/* DESIGN ME — homepage featured products: heading + view-all link + product grid; products come from useHomeData() in the parent */}
+      {/* DESIGN ME — homepage featured products: heading + view-all link + product grid; products come from useHomeData() in the parent. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <div className="flex items-center justify-between">
         <h2>{t('featuredProducts')}</h2>
         <Link href="/products">{tc('viewAll')}</Link>

package/templates/nextjs/ui-canvas/home/hero-section.tsx

@@ -10,7 +10,7 @@ export function HeroSection({ storeName }: { storeName?: string | null }) {
 
   return (
     <section>
-      {/* DESIGN ME — homepage hero: headline + subtitle + shop-now CTA; store name via useStoreInfo() in the parent, copy via the `home`/`common` translation namespaces */}
+      {/* DESIGN ME — homepage hero: headline + subtitle + shop-now CTA; store name via useStoreInfo() in the parent, copy via the `home`/`common` translation namespaces. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <h1>
         {t('welcomeTo')} {storeName || tc('store')}
       </h1>

package/templates/nextjs/ui-canvas/home/home-client.tsx

@@ -17,7 +17,7 @@ export function HomeClient() {
 
   return (
     <div>
-      {/* DESIGN ME — homepage composition: discount banners + hero + featured products; data via useHomeData() and useStoreInfo(). Add/remove/reorder sections freely. */}
+      {/* DESIGN ME — homepage composition: discount banners + hero + featured products; data via useHomeData() and useStoreInfo(). Add/remove/reorder sections freely. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <DiscountBannerStrip banners={banners} />
       <HeroSection storeName={storeInfo?.name} />
       <FeaturedProductsSection products={products} />

package/templates/nextjs/ui-canvas/layout/announcement-bar.tsx.ejs

@@ -73,7 +73,7 @@ export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
 
   return (
     <div role="region" aria-label="Site announcements">
-      {/* DESIGN ME — announcement bar(s) at the very top of every page; data.severity + message + optional CTA come from Content<'ANNOUNCEMENT'>[] pre-fetched in the layout */}
+      {/* DESIGN ME — announcement bar(s) at the very top of every page; data.severity + message + optional CTA come from Content<'ANNOUNCEMENT'>[] pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       {visible.map((announcement) => (
         <div key={announcement.id} data-severity={announcement.data.severity} className="flex items-center gap-3">
           <span>

package/templates/nextjs/ui-canvas/layout/faq-section.tsx.ejs

@@ -40,7 +40,7 @@ export function FaqSection({ faq }: FaqSectionProps) {
   if (!faq || items.length === 0) {
     return (
       <section>
-        {/* DESIGN ME — FAQ empty state: heading + contact CTA; fed by Content<'FAQ'> pre-fetched in the /faq route */}
+        {/* DESIGN ME — FAQ empty state: heading + contact CTA; fed by Content<'FAQ'> pre-fetched in the /faq route. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
         <h1>{heading}</h1>
         <p>
           <strong>{t('faqEmptyTitle')}</strong>
@@ -54,7 +54,7 @@ export function FaqSection({ faq }: FaqSectionProps) {
 
   return (
     <section>
-      {/* DESIGN ME — FAQ accordion: question/answer pairs from Content<'FAQ'> pre-fetched in the /faq route; answers are sanitized merchant HTML */}
+      {/* DESIGN ME — FAQ accordion: question/answer pairs from Content<'FAQ'> pre-fetched in the /faq route; answers are sanitized merchant HTML. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <h1>{heading}</h1>
       <ul>
         {items.map((item, idx) => (

package/templates/nextjs/ui-canvas/layout/header-account.tsx

@@ -24,7 +24,7 @@ export function HeaderAccount() {
 
   return (
     <Link href={href} aria-label={label}>
-      {/* DESIGN ME — header account link; auth state via useAuth(), label via the `nav` translation namespace */}
+      {/* DESIGN ME — header account link; auth state via useAuth(), label via the `nav` translation namespace. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       {label}
     </Link>
   );

package/templates/nextjs/ui-canvas/layout/language-switcher.tsx.ejs

@@ -35,6 +35,8 @@ const defaultLocale = '<%= defaultLocale %>';
  * DESIGN ME — locale switcher in the header; reads supported locales from
  * `@/i18n` and swaps the URL prefix. Keep the aria-label and the redirect
  * logic exactly as-is.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function LanguageSwitcher() {
   const pathname = usePathname();

package/templates/nextjs/ui-canvas/layout/rich-text-block.tsx.ejs

@@ -14,6 +14,8 @@
  * DESIGN ME — merchant-editable HTML block; fed by
  * `client.content.richText.get(key, locale)` pre-fetched in the route.
  * Style the injected HTML via the wrapper `className`.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 import * as React from 'react';
 import type { Content } from 'brainerce';

package/templates/nextjs/ui-canvas/layout/site-footer.tsx.ejs

@@ -33,7 +33,7 @@ export function SiteFooter({ footer, storeName }: SiteFooterProps) {
   if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
     return (
       <footer>
-        {/* DESIGN ME — footer (fallback branch): copyright only; Content<'FOOTER'> pre-fetched in the layout */}
+        {/* DESIGN ME — footer (fallback branch): copyright only; Content<'FOOTER'> pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
         <p>
           © {year} {brandLabel}. All rights reserved.
         </p>
@@ -43,7 +43,7 @@ export function SiteFooter({ footer, storeName }: SiteFooterProps) {
 
   return (
     <footer>
-      {/* DESIGN ME — footer: brand block, merchant link columns and social links (Content<'FOOTER'> pre-fetched in the layout), copyright bar */}
+      {/* DESIGN ME — footer: brand block, merchant link columns and social links (Content<'FOOTER'> pre-fetched in the layout), copyright bar. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <div>
         <a href="/">{brandLabel}</a>
         {social.length > 0 ? (

package/templates/nextjs/ui-canvas/layout/site-header.tsx.ejs

@@ -41,7 +41,7 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
   if (!header) {
     return (
       <header>
-        {/* DESIGN ME — site header (fallback branch, no merchant nav yet): brand link + account + cart; data comes pre-fetched from the layout via the Content API */}
+        {/* DESIGN ME — site header (fallback branch, no merchant nav yet): brand link + account + cart; data comes pre-fetched from the layout via the Content API. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
         <div className="flex items-center justify-between gap-4">
           <a href="/" aria-label={brandLabel}>
             {brandLabel}
@@ -62,7 +62,7 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
 
   return (
     <header>
-      {/* DESIGN ME — site header: merchant-configured logo/nav/CTA (Content<'HEADER'> pre-fetched in the layout) + account + cart links. Keep every link working. */}
+      {/* DESIGN ME — site header: merchant-configured logo/nav/CTA (Content<'HEADER'> pre-fetched in the layout) + account + cart links. Keep every link working. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <div className="flex items-center justify-between gap-4">
         <a href="/" className="flex items-center gap-2" aria-label={brandLabel}>
           {logo ? (

package/templates/nextjs/ui-canvas/product/customization-fields.tsx

@@ -24,6 +24,8 @@ interface CustomizationFieldsProps {
  * (engraving text, gift date, uploaded artwork, …). Field definitions,
  * values and validation errors come from useProductPage(); every input type
  * below must stay functional (including the image/gallery uploads).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function CustomizationFields({
   fields,

package/templates/nextjs/ui-canvas/product/discount-badge.tsx

@@ -9,6 +9,8 @@ interface DiscountBadgeProps {
 /**
  * DESIGN ME — discount-rule badge shown on product cards; text comes from
  * the product's `discount.badgeText` (merchant-configured rule).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function DiscountBadge({ discount, className }: DiscountBadgeProps) {
   if (!discount) return null;

package/templates/nextjs/ui-canvas/product/frequently-bought-together.tsx

@@ -56,6 +56,8 @@ function ProductThumb({
  * current product + selectable cross-sells + combined total + add-all button;
  * items come from useProductPage().recommendations.crossSells, the feature
  * gate from useStoreInfo().upsell.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function FrequentlyBoughtTogether({
   items,

package/templates/nextjs/ui-canvas/product/modifier-group-selector.tsx

@@ -19,6 +19,8 @@
  * The price-delta side: this component does NOT compute totals. The server
  * runs the free-allocation policy and returns the line's `unitPrice` /
  * `modifiers[]` / `modifiersTotal` snapshot — render those after add-to-cart.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 
 import type { Modifier, ModifierGroup } from 'brainerce';

package/templates/nextjs/ui-canvas/product/price-display.tsx

@@ -16,6 +16,8 @@ interface PriceDisplayProps {
  * DESIGN ME — price renderer used by cards, product page and recommendations;
  * computes sale state + discount % from props (currency via useCurrency()).
  * Never hardcode currency symbols — formatPrice handles them.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function PriceDisplay({
   price,

package/templates/nextjs/ui-canvas/product/product-card.tsx

@@ -130,7 +130,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
 
   return (
     <article className={cn(className)}>
-      {/* DESIGN ME — product card (grid/listing unit): image, badges, name, price, stock, add-to-cart; product data arrives as a prop from useHomeData()/useProductListing() */}
+      {/* DESIGN ME — product card (grid/listing unit): image, badges, name, price, stock, add-to-cart; product data arrives as a prop from useHomeData()/useProductListing(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <figure>
         <Link href={`/products/${slug}`}>
           {/* `relative` + `aspect-square` are layout-critical for next/image fill */}

package/templates/nextjs/ui-canvas/product/product-client-section.tsx

@@ -108,7 +108,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
 
   return (
     <article>
-      {/* DESIGN ME — product page (PDP): gallery, buy box (price/stock/variants/customization/modifiers/quantity/add-to-cart), description, specs, cross-sells; everything comes from useProductPage(initialProduct) */}
+      {/* DESIGN ME — product page (PDP): gallery, buy box (price/stock/variants/customization/modifiers/quantity/add-to-cart), description, specs, cross-sells; everything comes from useProductPage(initialProduct). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
         {/* Image Gallery */}
         <figure>

package/templates/nextjs/ui-canvas/product/product-grid.tsx

@@ -18,7 +18,7 @@ export function ProductGrid({ products, className }: ProductGridProps) {
 
   return (
     <div className={cn('grid grid-cols-2 gap-4 lg:grid-cols-4', className)}>
-      {/* DESIGN ME — product grid: lays out ProductCard units; products arrive as a prop from the listing/home hooks */}
+      {/* DESIGN ME — product grid: lays out ProductCard units; products arrive as a prop from the listing/home hooks. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       {products.map((product) => (
         <ProductCard key={product.id} product={product} />
       ))}

package/templates/nextjs/ui-canvas/product/product-listing.tsx

@@ -65,7 +65,7 @@ export function ProductListing() {
 
   return (
     <section>
-      {/* DESIGN ME — product listing page: header, category/brand/tag/custom-field filters, sort, product grid, load-more; everything comes from useProductListing() */}
+      {/* DESIGN ME — product listing page: header, category/brand/tag/custom-field filters, sort, product grid, load-more; everything comes from useProductListing(). Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <header>
         <h1>{searchQuery ? `${t('searchPrefix')} "${searchQuery}"` : t('allProducts')}</h1>
         {!loading && (

package/templates/nextjs/ui-canvas/product/recommendation-section.tsx

@@ -49,6 +49,8 @@ interface RecommendationSectionProps {
 /**
  * DESIGN ME — recommendation strip on the product page (upsells / related);
  * items come from useProductPage().recommendations, title is passed in.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
   if (items.length === 0) return null;
@@ -74,6 +76,8 @@ interface CartRecommendationSectionProps {
 /**
  * DESIGN ME — cross-sell strip on the cart page ("you might also need");
  * items come from useCartPage().cartRecs.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function CartRecommendationSection({
   title,

package/templates/nextjs/ui-canvas/product/review-form.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import { getClient } from '@/core/lib/brainerce';
 import { checkAuthStatus } from '@/core/lib/auth';
+import { useTranslations } from '@/core/lib/translations';
 import type { MyProductReview, ProductReview } from 'brainerce';
 
 interface ReviewFormProps {
@@ -26,9 +27,12 @@ type Stage =
  *
  * DESIGN ME — review submit/edit form; auth via checkAuthStatus(), eligibility
  * + existing review via getClient().getMyProductReview(productId).
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function ReviewForm({ productId }: ReviewFormProps) {
   const [stage, setStage] = useState<Stage>({ kind: 'loading' });
+  const t = useTranslations('reviews');
 
   useEffect(() => {
     let cancelled = false;
@@ -62,13 +66,13 @@ export function ReviewForm({ productId }: ReviewFormProps) {
   }, [productId]);
 
   if (stage.kind === 'loading') {
-    return <p role="status">Loading…</p>;
+    return <p role="status">{t('loading')}</p>;
   }
 
   if (stage.kind === 'signed_out') {
     return (
       <p>
-        <a href="/account/login">Sign in</a> to leave a review for this product.
+        <a href="/account/login">{t('signIn')}</a> {t('signInSuffix')}
       </p>
     );
   }
@@ -91,16 +95,17 @@ export function ReviewForm({ productId }: ReviewFormProps) {
 }
 
 function NotEligibleMessage({ reason }: { reason: MyProductReview['reason'] }) {
+  const t = useTranslations('reviews');
   let message: string;
   switch (reason) {
     case 'no_eligible_order':
-      message = 'Only customers who purchased this product can leave a review.';
+      message = t('onlyPurchasers');
       break;
     case 'reviews_disabled':
-      message = 'Reviews are not enabled for this store.';
+      message = t('reviewsDisabled');
       break;
     default:
-      message = 'You cannot review this product right now.';
+      message = t('cannotReview');
   }
   return <p>{message}</p>;
 }
@@ -119,10 +124,11 @@ function EditReviewBlock({
   onDeleted: () => void;
 }) {
   const [deleting, setDeleting] = useState(false);
+  const t = useTranslations('reviews');
   const [deleteError, setDeleteError] = useState<string | null>(null);
 
   async function handleDelete() {
-    if (!window.confirm('Delete your review for this product?')) return;
+    if (!window.confirm(t('confirmDelete'))) return;
     setDeleting(true);
     setDeleteError(null);
     try {
@@ -130,7 +136,7 @@ function EditReviewBlock({
       onDeleted();
       window.location.reload();
     } catch {
-      setDeleteError('Could not delete your review. Please try again.');
+      setDeleteError(t('deleteFailed'));
     } finally {
       setDeleting(false);
     }
@@ -145,9 +151,9 @@ function EditReviewBlock({
         initialBody={initial.body ?? ''}
       />
       <div className="flex items-center gap-2">
-        <p>Want to start over? You can delete your review.</p>
+        <p>{t('startOver')}</p>
         <button type="button" onClick={handleDelete} disabled={deleting}>
-          {deleting ? 'Deleting…' : 'Delete review'}
+          {deleting ? t('deleting') : t('deleteReview')}
         </button>
       </div>
       {deleteError && <p role="alert">{deleteError}</p>}
@@ -172,6 +178,7 @@ function ReviewEditor({
   initialBody: string;
 }) {
   const [rating, setRating] = useState(initialRating);
+  const t = useTranslations('reviews');
   const [body, setBody] = useState(initialBody);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -194,17 +201,13 @@ function ReviewEditor({
     } catch (err) {
       const status = (err as { status?: number })?.status;
       if (status === 409) {
-        setError("You've already submitted a review for this product.");
+        setError(t('alreadySubmitted'));
       } else if (status === 403) {
-        setError('Only customers who purchased this product can leave a review.');
+        setError(t('onlyPurchasers'));
       } else if (status === 429) {
-        setError('Too many submissions. Please try again in a few minutes.');
+        setError(t('tooMany'));
       } else {
-        setError(
-          mode === 'edit'
-            ? 'Could not update your review. Please try again.'
-            : 'Could not submit your review. Please try again.'
-        );
+        setError(mode === 'edit' ? t('updateFailed') : t('submitFailed'));
       }
     } finally {
       setSubmitting(false);
@@ -212,22 +215,16 @@ function ReviewEditor({
   }
 
   if (success) {
-    return (
-      <p role="status">
-        {mode === 'edit'
-          ? 'Thanks! Your review has been updated.'
-          : 'Thanks! Your review has been submitted.'}
-      </p>
-    );
+    return <p role="status">{mode === 'edit' ? t('thanksUpdated') : t('thanksSubmitted')}</p>;
   }
 
   return (
     <form onSubmit={handleSubmit}>
-      <h3>{mode === 'edit' ? 'Edit your review' : 'Write a review'}</h3>
+      <h3>{mode === 'edit' ? t('editYourReview') : t('writeReview')}</h3>
 
       <fieldset>
-        <legend>Your rating</legend>
-        <div className="inline-flex gap-1" role="radiogroup" aria-label="Star rating">
+        <legend>{t('yourRating')}</legend>
+        <div className="inline-flex gap-1" role="radiogroup" aria-label={t('starRating')}>
           {[1, 2, 3, 4, 5].map((n) => (
             <button
               key={n}
@@ -243,7 +240,7 @@ function ReviewEditor({
       </fieldset>
 
       <label className="block">
-        Your review <span>(optional)</span>
+        {t('yourReview')} <span>({t('optionalField')})</span>
         <textarea
           value={body}
           onChange={(event) => setBody(event.target.value)}
@@ -258,11 +255,11 @@ function ReviewEditor({
       <button type="submit" disabled={submitting}>
         {submitting
           ? mode === 'edit'
-            ? 'Saving…'
-            : 'Submitting…'
+            ? t('saving')
+            : t('submittingBtn')
           : mode === 'edit'
-            ? 'Save changes'
-            : 'Submit review'}
+            ? t('saveChanges')
+            : t('submitReview')}
       </button>
     </form>
   );

package/templates/nextjs/ui-canvas/product/{reviews-section.tsx → reviews-section.tsx.ejs}

@@ -1,10 +1,23 @@
 import type { ProductReview } from 'brainerce';
 import { getServerClient } from '@/core/lib/brainerce';
+<% if (i18nEnabled) { %>import { getMessages, defaultLocale } from '@/i18n';<% } else { %>import { defaultLocale, messages } from '@/i18n';<% } %>
 import { ReviewForm } from './review-form';
 
+// Server component — it renders before any client i18n context exists, so the
+// wrapper strings (title / empty state / verified badge) are read straight
+// from the `reviews` namespace in messages/, keyed by the store locale.
+type ReviewStrings = Record<string, string>;
+
+<% if (i18nEnabled) { %>async function getReviewStrings(locale: string): Promise<ReviewStrings> {
+  return ((await getMessages(locale)).reviews ?? {}) as ReviewStrings;
+}<% } else { %>async function getReviewStrings(_locale: string): Promise<ReviewStrings> {
+  return messages.reviews as ReviewStrings;
+}<% } %>
+
 interface ReviewsSectionProps {
   productId: string;
   initialReviews?: ProductReview[];
+  locale?: string;
   /** Where to send users back to after submit (defaults to the current product URL). */
   returnUrl?: string;
 }
@@ -16,7 +29,12 @@ interface ReviewsSectionProps {
  * the initial HTML payload (good for SEO; JSON-LD on the same page already
  * carries `aggregateRating` when reviewCount > 0).
  */
-export async function ReviewsSection({ productId, initialReviews }: ReviewsSectionProps) {
+export async function ReviewsSection({
+  productId,
+  initialReviews,
+  locale = defaultLocale,
+}: ReviewsSectionProps) {
+  const t = await getReviewStrings(locale);
   let reviews: ProductReview[] = initialReviews ?? [];
 
   if (!initialReviews) {
@@ -24,22 +42,22 @@ export async function ReviewsSection({ productId, initialReviews }: ReviewsSecti
       const result = await getServerClient().listProductReviews(productId, { page: 1, limit: 20 });
       reviews = result.data;
     } catch {
-      // Reviews disabled at store level or network error — render the form anyway.
+      // Review listing disabled at store level or network error — render the form anyway.
       reviews = [];
     }
   }
 
   return (
     <section aria-labelledby="reviews-heading">
-      {/* DESIGN ME — product reviews: server-fetched review list (SDK listProductReviews) + eligibility-aware submit form */}
-      <h2 id="reviews-heading">Reviews</h2>
+      {/* DESIGN ME — product reviews: server-fetched review list (SDK listProductReviews) + eligibility-aware submit form. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <h2 id="reviews-heading">{t.title}</h2>
 
       {reviews.length === 0 ? (
-        <p>No reviews yet — be the first to share your experience.</p>
+        <p>{t.noReviews}</p>
       ) : (
         <ul>
           {reviews.map((review) => (
-            <ReviewCard key={review.id} review={review} />
+            <ReviewCard key={review.id} review={review} verifiedLabel={t.verifiedPurchase} />
           ))}
         </ul>
       )}
@@ -49,14 +67,14 @@ export async function ReviewsSection({ productId, initialReviews }: ReviewsSecti
   );
 }
 
-function ReviewCard({ review }: { review: ProductReview }) {
+function ReviewCard({ review, verifiedLabel }: { review: ProductReview; verifiedLabel: string }) {
   return (
     <li>
       <article>
         <header className="flex flex-wrap items-center gap-2">
           <Stars rating={review.rating} />
           <span>{review.authorName}</span>
-          {review.verifiedPurchase && <span>Verified purchase</span>}
+          {review.verifiedPurchase && <span>{verifiedLabel}</span>}
           <time dateTime={review.createdAt}>{new Date(review.createdAt).toLocaleDateString()}</time>
         </header>
         {review.body && <p className="whitespace-pre-line break-words">{review.body}</p>}

package/templates/nextjs/ui-canvas/product/stock-badge.tsx

@@ -14,6 +14,8 @@ interface StockBadgeProps {
  * DESIGN ME — stock status badge (in stock / low stock / out of stock);
  * derives the label from the product/variant `inventory` prop. Keep the
  * label logic; add your own tones per state.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
   const t = useTranslations('productDetail');

package/templates/nextjs/ui-canvas/product/variant-selector.tsx

@@ -34,6 +34,8 @@ interface AttributeGroup {
  * (`displayType`, `swatchColor`, `swatchColor2`, `swatchImageUrl`) is
  * computed per value — the skeleton renders plain buttons, use the swatch
  * data to build color/image swatches in your design.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
  */
 export function VariantSelector({
   product,