create-brainerce-store 1.50.5 → 1.52.0

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

@@ -0,0 +1,99 @@
+{
+  "common": {
+    "close": "Close"
+  },
+  "nav": {
+    "cart": "Cart",
+    "home": "Home"
+  },
+  "home": {
+    "heroEyebrow": "New collection · Handcrafted",
+    "heroTitle": "Jewelry that tells your story",
+    "heroLead": "Delicate gold and silver designs, handcrafted with love — made to be with you through the small moments and the big ones.",
+    "heroCtaSecondary": "Browse categories",
+    "heroTrust": "Happy customers nationwide",
+    "benefit1Title": "Fast home delivery",
+    "benefit1Desc": "Express courier nationwide, gift-wrapped",
+    "benefit2Title": "Secure payment",
+    "benefit2Desc": "Encrypted checkout, highest standard",
+    "benefit3Title": "Quality materials",
+    "benefit3Desc": "Gold, 925 silver and genuine stones",
+    "benefit4Title": "Easy returns",
+    "benefit4Desc": "30 days to exchange or return, no questions",
+    "featuredEyebrow": "Our picks",
+    "featuredSubtitle": "The pieces our customers love most — hand-picked from the new collection.",
+    "categoriesEyebrow": "Categories",
+    "categoriesTitle": "Find the perfect piece",
+    "categoriesSubtitle": "From delicate rings to statement necklaces — each one speaks its own language.",
+    "catRings": "Rings",
+    "catNecklaces": "Necklaces",
+    "catEarrings": "Earrings",
+    "catBracelets": "Bracelets",
+    "catCta": "Shop the category",
+    "storyEyebrow": "Our studio",
+    "storyTitle": "Made by hand, worn by heart",
+    "storyP1": "Every piece begins as a small sketch on paper — and ends as delicate handwork in our studio. We choose every stone and every link with care, so the piece that reaches you is exactly as we imagined it.",
+    "storyP2": "We believe in jewelry that lasts: real materials, meticulous finish and full warranty on every piece. That is what love for the small details looks like.",
+    "storyCta": "Discover the collection",
+    "storyStat1Value": "Handmade",
+    "storyStat1Label": "Every piece is made in our studio",
+    "storyStat2Value": "925 Silver",
+    "storyStat2Label": "Genuine materials only",
+    "testimonialsEyebrow": "Customer stories",
+    "testimonialsTitle": "They already fell in love",
+    "testimonial1Quote": "The necklace arrived in gorgeous packaging and looks even better than the photos. I got compliments on day one.",
+    "testimonial1Name": "Noa L.",
+    "testimonial1Meta": "Tel Aviv",
+    "testimonial2Quote": "I bought earrings as a gift for my mom and she has not taken them off since. Amazing quality and truly personal service.",
+    "testimonial2Name": "Shira B.",
+    "testimonial2Meta": "Haifa",
+    "testimonial3Quote": "The ring fits perfectly, the work is delicate and precise. You can feel every detail was made with love. Highly recommend.",
+    "testimonial3Name": "Dana K.",
+    "testimonial3Meta": "Jerusalem",
+    "newsletterTitle": "Join our club",
+    "newsletterSubtitle": "Sign up to hear first about new collections, sales and member perks.",
+    "newsletterPlaceholder": "Your email address",
+    "newsletterCta": "Subscribe",
+    "newsletterSuccess": "You are in! We promise to send only beautiful things.",
+    "newsletterPrivacy": "No spam. Unsubscribe anytime."
+  },
+  "products": {
+    "listingSubtitle": "Our full collection — handmade, genuine materials and love for detail.",
+    "filtersLabel": "Filter",
+    "emptyTitle": "No results found",
+    "emptyBody": "Try clearing the filters or searching for something else.",
+    "clearFilters": "Clear filters"
+  },
+  "productDetail": {
+    "quantityLabel": "Quantity",
+    "shippingNote": "Fast home delivery · Easy 30-day returns",
+    "guaranteeNote": "Full warranty on every piece",
+    "pickOne": "Pick one",
+    "upTo": "Up to {max}",
+    "pickExactly": "Pick exactly {min}",
+    "atLeast": "At least {min}",
+    "pickRange": "{min}–{max}",
+    "soldOut": "Sold out",
+    "freeCounter": "{used} of {free} free"
+  },
+  "reviews": {
+    "beFirst": "No reviews for this product yet"
+  },
+  "cart": {
+    "itemsInCart": "Your items",
+    "secureCheckoutNote": "Secure, encrypted checkout",
+    "couponTitle": "Have a coupon code?",
+    "viewCart": "View cart",
+    "shippingAtCheckout": "Shipping calculated at checkout"
+  },
+  "footer": {
+    "tagline": "Handcrafted jewelry, designed with love in Israel.",
+    "followUs": "Follow us",
+    "quickLinksTitle": "Quick links",
+    "linkProducts": "All products",
+    "linkContact": "Contact",
+    "linkFaq": "FAQ",
+    "linkCart": "Shopping cart",
+    "securePayments": "Secure, encrypted payment"
+  }
+}

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

@@ -0,0 +1,99 @@
+{
+  "common": {
+    "close": "סגור"
+  },
+  "nav": {
+    "cart": "עגלה",
+    "home": "דף הבית"
+  },
+  "home": {
+    "heroEyebrow": "קולקציה חדשה · עבודת יד",
+    "heroTitle": "תכשיטים שמספרים את הסיפור שלך",
+    "heroLead": "עיצובים עדינים מזהב ומכסף, בעבודת יד ובאהבה — נוצרו ללוות אתכן ברגעים הקטנים והגדולים.",
+    "heroCtaSecondary": "לצפייה בקטגוריות",
+    "heroTrust": "לקוחות מרוצות ברחבי הארץ",
+    "benefit1Title": "משלוח מהיר עד הבית",
+    "benefit1Desc": "שליחות מהירה לכל הארץ באריזת מתנה",
+    "benefit2Title": "תשלום מאובטח",
+    "benefit2Desc": "סליקה מוצפנת בתקן המחמיר ביותר",
+    "benefit3Title": "חומרים איכותיים",
+    "benefit3Desc": "זהב, כסף 925 ואבני חן אמיתיות",
+    "benefit4Title": "החזרה קלה",
+    "benefit4Desc": "30 יום להחלפה או החזרה, בלי שאלות",
+    "featuredEyebrow": "הנבחרים שלנו",
+    "featuredSubtitle": "הפריטים שהלקוחות שלנו הכי אוהבות — נבחרו בקפידה מהקולקציה החדשה.",
+    "categoriesEyebrow": "קטגוריות",
+    "categoriesTitle": "מצאו את התכשיט המושלם",
+    "categoriesSubtitle": "מטבעות עדינות ועד שרשראות בולטות — לכל אחת יש את השפה שלה.",
+    "catRings": "טבעות",
+    "catNecklaces": "שרשראות",
+    "catEarrings": "עגילים",
+    "catBracelets": "צמידים",
+    "catCta": "לצפייה בקטגוריה",
+    "storyEyebrow": "הסטודיו שלנו",
+    "storyTitle": "נוצר ביד, נלבש בלב",
+    "storyP1": "כל תכשיט אצלנו מתחיל בסקיצה קטנה על נייר — ונגמר בעבודת יד עדינה בסטודיו. אנחנו בוחרים כל אבן וכל חוליה בקפידה, כדי שהתכשיט שיגיע אליכן יהיה בדיוק כמו שדמיינו אותו.",
+    "storyP2": "אנחנו מאמינים בתכשיטים שנשארים: חומרים אמיתיים, גימור מוקפד ואחריות מלאה על כל פריט. ככה נראית אהבה לפרטים הקטנים.",
+    "storyCta": "לגלות את הקולקציה",
+    "storyStat1Value": "עבודת יד",
+    "storyStat1Label": "כל פריט נוצר בסטודיו שלנו",
+    "storyStat2Value": "כסף 925",
+    "storyStat2Label": "חומרים אמיתיים בלבד",
+    "testimonialsEyebrow": "לקוחות מספרות",
+    "testimonialsTitle": "הן כבר התאהבו",
+    "testimonial1Quote": "השרשרת הגיעה באריזה מהממת ונראית אפילו יותר טוב מבתמונות. קיבלתי מחמאות כבר ביום הראשון.",
+    "testimonial1Name": "נועה ל.",
+    "testimonial1Meta": "תל אביב",
+    "testimonial2Quote": "קניתי עגילים במתנה לאמא שלי והיא לא מורידה אותם מאז. איכות מדהימה ושירות סופר אישי.",
+    "testimonial2Name": "שירה ב.",
+    "testimonial2Meta": "חיפה",
+    "testimonial3Quote": "הטבעת בדיוק במידה, העבודה עדינה ומוקפדת. מרגישים שכל פרט נעשה באהבה. ממליצה בחום.",
+    "testimonial3Name": "דנה כ.",
+    "testimonial3Meta": "ירושלים",
+    "newsletterTitle": "הצטרפו למועדון שלנו",
+    "newsletterSubtitle": "הרשמו וקבלו עדכון ראשונות על קולקציות חדשות, מבצעים והטבות לחברות מועדון.",
+    "newsletterPlaceholder": "כתובת האימייל שלך",
+    "newsletterCta": "הרשמה",
+    "newsletterSuccess": "נרשמת בהצלחה! מבטיחים לשלוח רק דברים יפים.",
+    "newsletterPrivacy": "בלי ספאם. אפשר להסיר את ההרשמה בכל רגע."
+  },
+  "products": {
+    "listingSubtitle": "הקולקציה המלאה שלנו — עבודת יד, חומרים אמיתיים ואהבה לפרטים.",
+    "filtersLabel": "סינון",
+    "emptyTitle": "לא מצאנו תוצאות",
+    "emptyBody": "נסו לנקות את הסינון או לחפש משהו אחר.",
+    "clearFilters": "ניקוי סינון"
+  },
+  "productDetail": {
+    "quantityLabel": "כמות",
+    "shippingNote": "משלוח מהיר עד הבית · החזרה קלה עד 30 יום",
+    "guaranteeNote": "אחריות מלאה על כל תכשיט",
+    "pickOne": "בחרו אחד",
+    "upTo": "עד {max}",
+    "pickExactly": "בחרו בדיוק {min}",
+    "atLeast": "לפחות {min}",
+    "pickRange": "{min}–{max}",
+    "soldOut": "אזל",
+    "freeCounter": "{used} מתוך {free} חינם"
+  },
+  "reviews": {
+    "beFirst": "עדיין אין ביקורות למוצר הזה"
+  },
+  "cart": {
+    "itemsInCart": "הפריטים שלך",
+    "secureCheckoutNote": "תשלום מאובטח ומוצפן",
+    "couponTitle": "יש לכם קוד קופון?",
+    "viewCart": "לצפייה בעגלה",
+    "shippingAtCheckout": "משלוח יחושב בקופה"
+  },
+  "footer": {
+    "tagline": "תכשיטים בעבודת יד, מעוצבים באהבה בישראל.",
+    "followUs": "עקבו אחרינו",
+    "quickLinksTitle": "ניווט מהיר",
+    "linkProducts": "כל המוצרים",
+    "linkContact": "צור קשר",
+    "linkFaq": "שאלות נפוצות",
+    "linkCart": "עגלת קניות",
+    "securePayments": "תשלום מאובטח ומוצפן"
+  }
+}

package/templates/nextjs/designs/atelier/ui/cart/cart-bundle-offer.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { IconBag } from '@/ui/shared/icons';
+
+interface CartBundleOfferCardProps {
+  offer: CartBundleOfferType;
+  cartId: string;
+  onAdd: () => void;
+  className?: string;
+}
+
+/**
+ * Bundle offer card on the cart page: offered products with original vs.
+ * discounted prices + add-bundle button; offers come from
+ * useCartPage().bundles.
+ */
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
+  const t = useTranslations('cart');
+  const currency = useCurrency();
+  const [adding, setAdding] = useState(false);
+
+  const offered = offer.offeredProducts;
+
+  const totalOriginal = parseFloat(offer.totalOriginalPrice);
+  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
+  const discountLabel =
+    offer.discountType === 'PERCENTAGE'
+      ? `${offer.discountValue}%`
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
+
+  async function handleAdd() {
+    if (adding) return;
+    try {
+      setAdding(true);
+      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.
+      await client.addBundleToCart(cartId, offer.id);
+      onAdd();
+    } catch (err) {
+      console.error('Failed to add bundle:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <article className={cn('card p-5', className)}>
+      <div className="flex flex-wrap items-center gap-2">
+        <h4 className="font-sans text-base font-semibold">{offer.name}</h4>
+        <span className="badge-primary">-{discountLabel}</span>
+      </div>
+      {offer.description && (
+        <p className="mt-1 text-sm text-muted-foreground">{offer.description}</p>
+      )}
+
+      <ul className="mt-4 space-y-2.5">
+        {offered.map((p) => {
+          const firstImage = p.images?.[0];
+          const imageUrl = firstImage?.url ?? null;
+          return (
+            <li key={p.id} className="flex items-center gap-3">
+              {/* `relative` + fixed box are layout-critical for next/image fill */}
+              <span className="relative block h-12 w-12 shrink-0 overflow-hidden rounded-lg border bg-secondary">
+                {imageUrl ? (
+                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
+                ) : null}
+              </span>
+              <span className="min-w-0 flex-1 text-sm font-medium text-foreground">{p.name}</span>
+              <s className="text-xs text-muted-foreground">
+                {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
+              </s>
+              <span className="text-sm font-semibold text-foreground">
+                {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="mt-4 flex flex-wrap items-center gap-3 border-t pt-4">
+        <span className="inline-flex items-baseline gap-2">
+          <s className="text-sm text-muted-foreground">
+            {formatPrice(totalOriginal, { currency }) as string}
+          </s>
+          <span className="text-lg font-bold text-foreground">
+            {formatPrice(totalDiscounted, { currency }) as string}
+          </span>
+        </span>
+        <button
+          type="button"
+          onClick={handleAdd}
+          disabled={adding}
+          className="btn-primary btn-sm ms-auto"
+        >
+          <IconBag size={16} />
+          {adding ? t('addingBundle') : t('addBundleItem')}
+        </button>
+      </div>
+    </article>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/cart-drawer.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+/**
+ * Mini-cart drawer — a slide-over sheet anchored to the header cart side
+ * (logical `end`, so it hugs the cart icon in both RTL and LTR).
+ *
+ * Opens via `openCartDrawer()` (fired after a successful add-to-cart);
+ * the header cart icon itself still navigates to /cart — the drawer never
+ * hijacks that. Closes on overlay click, Escape, the X, or any CTA.
+ *
+ * Stays mounted so the slide transition runs both ways; when closed it is
+ * `inert` + aria-hidden so nothing inside is focusable.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { Link } from '@/core/lib/navigation';
+import { formatPrice } from 'brainerce';
+import { useCart } from '@/core/providers/store-provider';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { CartItem } from '@/ui/cart/cart-item';
+import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
+import { cn } from '@/core/lib/utils';
+import { IconBag, IconX } from '@/ui/shared/icons';
+
+const OPEN_EVENT = 'cart-drawer:open';
+
+/** Ask the mounted drawer to slide open (no-op during SSR). */
+export function openCartDrawer() {
+  if (typeof window !== 'undefined') {
+    window.dispatchEvent(new Event(OPEN_EVENT));
+  }
+}
+
+export function CartDrawer() {
+  const [open, setOpen] = useState(false);
+  const { cart, itemCount, totals, refreshCart } = useCart();
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const currency = useCurrency();
+  const closeRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const onOpen = () => setOpen(true);
+    window.addEventListener(OPEN_EVENT, onOpen);
+    return () => window.removeEventListener(OPEN_EVENT, onOpen);
+  }, []);
+
+  // Open state side-effects: Escape to close, scroll lock, focus the X.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    closeRef.current?.focus();
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open]);
+
+  const close = () => setOpen(false);
+  const items = cart?.items ?? [];
+
+  return (
+    <div
+      aria-hidden={!open}
+      inert={!open}
+      className={cn('fixed inset-0 z-50', !open && 'pointer-events-none')}
+    >
+      {/* Overlay */}
+      <div
+        onClick={close}
+        aria-hidden="true"
+        className={cn(
+          'absolute inset-0 bg-foreground/35 backdrop-blur-[2px] transition-opacity duration-300 motion-reduce:transition-none',
+          open ? 'opacity-100' : 'opacity-0'
+        )}
+      />
+
+      {/* Panel — anchored at the logical end (same side as the cart icon) */}
+      <aside
+        role="dialog"
+        aria-modal="true"
+        aria-label={t('title')}
+        className={cn(
+          'absolute inset-y-0 end-0 flex w-full max-w-md flex-col bg-background shadow-2xl transition-transform duration-300 ease-out motion-reduce:transition-none sm:rounded-s-3xl sm:border-s',
+          open ? 'translate-x-0' : 'ltr:translate-x-full rtl:-translate-x-full'
+        )}
+      >
+        <header className="flex items-center gap-3 border-b px-5 py-4">
+          <h2 className="font-display text-xl font-semibold text-foreground">{t('title')}</h2>
+          {itemCount > 0 && (
+            <span className="flex h-6 min-w-6 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-bold text-primary-foreground">
+              {itemCount}
+            </span>
+          )}
+          <button
+            ref={closeRef}
+            type="button"
+            onClick={close}
+            aria-label={tc('close')}
+            className="ms-auto flex h-10 w-10 items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary"
+          >
+            <IconX size={20} />
+          </button>
+        </header>
+
+        {items.length === 0 ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
+            <span className="flex h-16 w-16 items-center justify-center rounded-full bg-secondary text-muted-foreground">
+              <IconBag size={24} />
+            </span>
+            <p className="font-display text-lg font-semibold text-foreground">{t('emptyTitle')}</p>
+            <p className="max-w-xs text-sm text-muted-foreground">{t('emptySubtitle')}</p>
+            <Link href="/products" onClick={close} className="btn-primary btn-sm mt-2">
+              {tc('continueShopping')}
+            </Link>
+          </div>
+        ) : (
+          <>
+            <div className="flex-1 overflow-y-auto px-5 py-4">
+              <FreeShippingBar className="mb-4" />
+              <ul className="divide-y">
+                {items.map((item) => (
+                  <li key={item.id} className="py-4 first:pt-0">
+                    <CartItem item={item} onUpdate={refreshCart} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <footer className="border-t bg-secondary/40 px-5 py-4">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">{tc('subtotal')}</span>
+                <strong className="text-base text-foreground">
+                  {formatPrice(totals.subtotal, { currency }) as string}
+                </strong>
+              </div>
+              {totals.discount > 0 && (
+                <div className="mt-1 flex items-center justify-between text-sm text-primary">
+                  <span>{tc('discount')}</span>
+                  <span>-{formatPrice(totals.discount, { currency }) as string}</span>
+                </div>
+              )}
+              <p className="mt-1 text-xs text-muted-foreground">{t('shippingAtCheckout')}</p>
+              <div className="mt-4 grid gap-2">
+                <Link href="/checkout" onClick={close} className="btn-primary w-full">
+                  {t('proceedToCheckout')}
+                </Link>
+                <Link href="/cart" onClick={close} className="btn-outline w-full">
+                  {t('viewCart')}
+                </Link>
+              </div>
+            </footer>
+          </>
+        )}
+      </aside>
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/cart-item.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartItem as CartItemType } from 'brainerce';
+import { getCartItemImage, formatPrice } from 'brainerce';
+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';
+import { IconMinus, IconPlus, IconTrash } from '@/ui/shared/icons';
+
+interface CartItemProps {
+  item: CartItemType;
+  onUpdate: () => void;
+  className?: string;
+}
+
+/**
+ * Single cart line: image, name, variant, unit price, quantity controls,
+ * remove, line total; the `item` prop comes from useCartPage().cart.
+ */
+export function CartItem({ item, onUpdate, className }: CartItemProps) {
+  const t = useTranslations('common');
+  const td = useTranslations('productDetail');
+  const currency = useCurrency();
+  const [updating, setUpdating] = useState(false);
+  const [removing, setRemoving] = useState(false);
+
+  const productName = item.product.name;
+  const imageUrl = getCartItemImage(item);
+  const variantName = item.variant?.name;
+  const unitPrice = parseFloat(item.unitPrice);
+  const lineTotal = unitPrice * item.quantity;
+
+  async function handleQuantityChange(newQuantity: number) {
+    if (newQuantity < 1 || updating) return;
+
+    try {
+      setUpdating(true);
+      const client = getClient();
+      await client.smartUpdateCartItem(item.productId, newQuantity, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to update quantity:', err);
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleRemove() {
+    if (removing) return;
+
+    try {
+      setRemoving(true);
+      const client = getClient();
+      await client.smartRemoveFromCart(item.productId, item.variantId || undefined);
+      onUpdate();
+    } catch (err) {
+      console.error('Failed to remove item:', err);
+    } finally {
+      setRemoving(false);
+    }
+  }
+
+  return (
+    <div className={cn('flex items-start gap-4', className)}>
+      {/* Image — `relative` + fixed box are layout-critical for next/image fill */}
+      <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-lg border bg-secondary sm:h-24 sm:w-24">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={productName} fill sizes="96px" className="object-cover" />
+        ) : (
+          <span className="sr-only">{productName}</span>
+        )}
+      </div>
+
+      {/* Details */}
+      <div className="min-w-0 flex-1">
+        <h3 className="font-sans text-[15px] font-semibold leading-snug text-foreground">
+          {productName}
+        </h3>
+
+        {/* Variant name */}
+        {variantName && <p className="mt-0.5 text-xs text-muted-foreground">{variantName}</p>}
+
+        {/* Unit price */}
+        <p className="mt-1 text-sm text-muted-foreground">
+          {formatPrice(unitPrice, { currency }) as string}
+        </p>
+
+        {/* Quantity controls + remove */}
+        <div className="mt-3 flex flex-wrap items-center gap-3">
+          <div
+            className="flex h-9 items-center rounded-full border"
+            role="group"
+            aria-label={td('quantityLabel')}
+          >
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={updating || item.quantity <= 1}
+              aria-label={td('decreaseQuantity')}
+              className="flex h-full w-9 items-center justify-center rounded-s-full transition-colors hover:bg-secondary disabled:opacity-40"
+            >
+              <IconMinus size={16} />
+            </button>
+            <span aria-live="polite" className="min-w-7 text-center text-sm font-semibold">
+              {updating ? <LoadingSpinner size="sm" /> : item.quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={updating}
+              aria-label={td('increaseQuantity')}
+              className="flex h-full w-9 items-center justify-center rounded-e-full transition-colors hover:bg-secondary disabled:opacity-40"
+            >
+              <IconPlus size={16} />
+            </button>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleRemove}
+            disabled={removing}
+            className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-destructive disabled:opacity-50"
+          >
+            <IconTrash size={16} />
+            {removing ? t('removing') : t('remove')}
+          </button>
+        </div>
+      </div>
+
+      {/* Line total */}
+      <span className="text-base font-semibold text-foreground">
+        {formatPrice(lineTotal, { currency }) as string}
+      </span>
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/cart-nudges.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import type { CartNudge } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+import { IconSparkle } from '@/ui/shared/icons';
+
+interface CartNudgesProps {
+  nudges: CartNudge[];
+  className?: string;
+}
+
+/**
+ * Discount-rule nudges on the cart page ("add X more for Y");
+ * texts come from useCartPage().cart.nudges.
+ */
+export function CartNudges({ nudges, className }: CartNudgesProps) {
+  if (nudges.length === 0) return null;
+
+  return (
+    <ul className={cn('space-y-2', className)} aria-label="Cart suggestions">
+      {nudges.map((nudge) => (
+        <li
+          key={nudge.ruleId}
+          className="flex items-center gap-2.5 rounded-lg bg-secondary px-3.5 py-2.5 text-sm font-medium text-foreground"
+        >
+          <span aria-hidden="true" className="shrink-0 text-primary">
+            <IconSparkle size={18} />
+          </span>
+          {nudge.text}
+        </li>
+      ))}
+    </ul>
+  );
+}