create-brainerce-store 1.51.0 → 1.52.1

package/templates/nextjs/designs/atelier/ui/shared/icons.tsx

@@ -0,0 +1,269 @@
+/**
+ * Inline icon set — minimal 24px-grid stroke icons (lucide-style).
+ * The project ships no icon dependency; every icon in the storefront comes
+ * from here so sizing (16/20/24) and stroke weight stay consistent.
+ * All icons are decorative by default (aria-hidden) — pair with sr-only text.
+ */
+import * as React from 'react';
+
+export type IconProps = {
+  size?: 16 | 18 | 20 | 24 | 28 | 32;
+  className?: string;
+  /** stroke width — 1.75 default matches the light, jewelry-grade look */
+  strokeWidth?: number;
+};
+
+function Base({
+  size = 20,
+  className,
+  strokeWidth = 1.75,
+  children,
+  fill = 'none',
+}: IconProps & { children: React.ReactNode; fill?: string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={fill}
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function IconBag(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M6 7h12l1.2 12.2a1.8 1.8 0 0 1-1.8 1.8H6.6a1.8 1.8 0 0 1-1.8-1.8L6 7Z" />
+      <path d="M9 10V6a3 3 0 0 1 6 0v4" />
+    </Base>
+  );
+}
+
+export function IconUser(p: IconProps) {
+  return (
+    <Base {...p}>
+      <circle cx="12" cy="8" r="3.5" />
+      <path d="M5 20c1.4-3 4-4.5 7-4.5s5.6 1.5 7 4.5" />
+    </Base>
+  );
+}
+
+export function IconMenu(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 7h16M4 12h16M4 17h16" />
+    </Base>
+  );
+}
+
+export function IconX(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M6 6l12 12M18 6L6 18" />
+    </Base>
+  );
+}
+
+export function IconPlus(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 5v14M5 12h14" />
+    </Base>
+  );
+}
+
+export function IconMinus(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M5 12h14" />
+    </Base>
+  );
+}
+
+export function IconTrash(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13a1.5 1.5 0 0 0 1.5 1.3h7A1.5 1.5 0 0 0 17 20l1-13M9 7V5a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 5v2" />
+    </Base>
+  );
+}
+
+export function IconCheck(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M5 12.5 10 17.5 19 7" />
+    </Base>
+  );
+}
+
+export function IconStar({ filled = true, ...p }: IconProps & { filled?: boolean }) {
+  return (
+    <Base {...p} fill={filled ? 'currentColor' : 'none'} strokeWidth={filled ? 0 : 1.5}>
+      <path d="M12 3.2 14.7 8.7 20.8 9.6 16.4 13.9 17.4 20 12 17.1 6.6 20 7.6 13.9 3.2 9.6 9.3 8.7 12 3.2Z" />
+    </Base>
+  );
+}
+
+export function IconTruck(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M3 6.5h11v10H3zM14 10h3.5l3 3v3.5h-3" />
+      <circle cx="7" cy="17.5" r="1.8" />
+      <circle cx="17" cy="17.5" r="1.8" />
+    </Base>
+  );
+}
+
+export function IconShield(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 3.5 19 6v5.5c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-2.5Z" />
+      <path d="m9 11.8 2.2 2.2L15.5 9.5" />
+    </Base>
+  );
+}
+
+export function IconGem(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M7 4h10l3.5 5L12 20.5 1.5 9 5 4Z M1.5 9h21M9.5 4 12 9l2.5-5M12 20.5 9.5 9M12 20.5 14.5 9" strokeWidth={1.4} />
+    </Base>
+  );
+}
+
+export function IconReturn(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 9h11a5 5 0 0 1 0 10H8" />
+      <path d="M8 5 4 9l4 4" />
+    </Base>
+  );
+}
+
+export function IconChevronDown(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="m6 9 6 6 6-6" />
+    </Base>
+  );
+}
+
+/** Points toward the inline-end (reading direction). Add className="rtl-flip". */
+export function IconArrowEnd(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 12h16M14 6l6 6-6 6" />
+    </Base>
+  );
+}
+
+export function IconSparkle(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 4c.7 3.6 2.4 5.3 6 6-3.6.7-5.3 2.4-6 6-.7-3.6-2.4-5.3-6-6 3.6-.7 5.3-2.4 6-6Z" />
+      <path d="M19 15.5c.3 1.5 1 2.2 2.5 2.5-1.5.3-2.2 1-2.5 2.5-.3-1.5-1-2.2-2.5-2.5 1.5-.3 2.2-1 2.5-2.5Z" strokeWidth={1.4} />
+    </Base>
+  );
+}
+
+export function IconQuote(p: IconProps) {
+  return (
+    <Base {...p} fill="currentColor" strokeWidth={0}>
+      <path d="M5 6.5A4.5 4.5 0 0 0 3 11v6.5h6.5V11H6a3 3 0 0 1 2.5-3V6.5H5Zm10 0A4.5 4.5 0 0 0 13 11v6.5h6.5V11H16a3 3 0 0 1 2.5-3V6.5H15Z" />
+    </Base>
+  );
+}
+
+export function IconMail(p: IconProps) {
+  return (
+    <Base {...p}>
+      <rect x="3" y="5.5" width="18" height="13" rx="2" />
+      <path d="m4 7.5 8 6 8-6" />
+    </Base>
+  );
+}
+
+export function IconClock(p: IconProps) {
+  return (
+    <Base {...p}>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 7.5V12l3 2" />
+    </Base>
+  );
+}
+
+export function IconTag(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="m3.5 12.5 8-8H20v8.5l-8 8a1.7 1.7 0 0 1-2.4 0l-6.1-6.1a1.7 1.7 0 0 1 0-2.4Z" />
+      <circle cx="15.5" cy="8.5" r="1.4" />
+    </Base>
+  );
+}
+
+export function IconDownload(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 4v11M7 10.5 12 15.5l5-5M5 19.5h14" />
+    </Base>
+  );
+}
+
+/** Social glyphs for the footer (filled, single-color). */
+export function IconSocial({ platform, ...p }: IconProps & { platform: string }) {
+  const key = platform.toLowerCase();
+  if (key.includes('instagram')) {
+    return (
+      <Base {...p} strokeWidth={1.6}>
+        <rect x="3.5" y="3.5" width="17" height="17" rx="4.5" />
+        <circle cx="12" cy="12" r="4" />
+        <circle cx="17.2" cy="6.8" r="0.6" fill="currentColor" stroke="none" />
+      </Base>
+    );
+  }
+  if (key.includes('facebook')) {
+    return (
+      <Base {...p} fill="currentColor" strokeWidth={0}>
+        <path d="M13.5 21v-7h2.4l.4-3h-2.8V9.1c0-.9.3-1.5 1.6-1.5h1.3V4.9c-.2 0-1-.1-1.9-.1-1.9 0-3.3 1.2-3.3 3.4V11H8.5v3h2.7v7h2.3Z" />
+      </Base>
+    );
+  }
+  if (key.includes('tiktok')) {
+    return (
+      <Base {...p} fill="currentColor" strokeWidth={0}>
+        <path d="M16.6 3c.3 2 1.5 3.3 3.4 3.6v2.8c-1.3 0-2.5-.4-3.4-1.1v5.9a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v2.9a2.7 2.7 0 1 0 1.9 2.6V3h2.8Z" />
+      </Base>
+    );
+  }
+  if (key.includes('whatsapp')) {
+    return (
+      <Base {...p} strokeWidth={1.6}>
+        <path d="M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1 0 12 3.5Z" />
+        <path d="M9 8.8c-.3 2.5 3.7 6.5 6.2 6.2l.6-1.5-2-1-.8.6c-.8-.4-1.7-1.3-2.1-2.1l.6-.8-1-2-1.5.6Z" strokeWidth={1.3} />
+      </Base>
+    );
+  }
+  if (key.includes('youtube')) {
+    return (
+      <Base {...p} strokeWidth={1.6}>
+        <rect x="2.5" y="6" width="19" height="12" rx="3" />
+        <path d="m10 9.5 5 2.5-5 2.5v-5Z" fill="currentColor" stroke="none" />
+      </Base>
+    );
+  }
+  // Fallback: globe
+  return (
+    <Base {...p} strokeWidth={1.6}>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M3.5 12h17M12 3.5c-4.7 4.7-4.7 12.3 0 17 4.7-4.7 4.7-12.3 0-17Z" />
+    </Base>
+  );
+}

package/templates/nextjs/designs/atelier/ui/shared/loading-spinner.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { IconGem } from '@/ui/shared/icons';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const RING_SIZE: Record<'sm' | 'md', string> = {
+  sm: 'h-4 w-4 border-2',
+  md: 'h-7 w-7 border-2',
+};
+
+/**
+ * Loading indicator. `sm`/`md` stay quiet ring spinners for buttons and
+ * inline waits; `lg` (the full-page state) is the Atelier "polishing" mark —
+ * a gem resting inside a ring band with a light orbiting around it, plus the
+ * visible loading line. Static under prefers-reduced-motion.
+ * Keeps `role="status"` and the sm/md/lg `size` contract.
+ */
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  const t = useTranslations('common');
+
+  if (size === 'lg') {
+    return (
+      <span
+        role="status"
+        data-size={size}
+        className={cn(
+          'flex min-h-[40vh] w-full flex-col items-center justify-center gap-4',
+          className
+        )}
+      >
+        <span aria-hidden="true" className="loader-orbit">
+          <span className="loader-orbit-dot" />
+          <IconGem size={20} className="text-primary/80" />
+        </span>
+        <span className="loader-text font-display text-sm italic text-muted-foreground">
+          {t('loading')}
+        </span>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      role="status"
+      data-size={size}
+      className={cn('inline-flex items-center justify-center', className)}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          'spin inline-block rounded-full border-primary/25 border-t-primary',
+          RING_SIZE[size]
+        )}
+      />
+      <span className="sr-only">{t('loading')}</span>
+    </span>
+  );
+}

package/templates/nextjs/designs/atelier/ui/shared/reveal.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+/**
+ * Scroll-reveal wrapper — adds `.is-visible` when the block enters the
+ * viewport. The animation itself lives in globals.css strictly inside a
+ * `prefers-reduced-motion: no-preference` guard, so with reduced motion the
+ * content is simply visible (the base .reveal-scroll styles are also inside
+ * the guard — no hidden content ever).
+ */
+import * as React from 'react';
+import { cn } from '@/core/lib/utils';
+
+export function Reveal({
+  children,
+  className,
+  /** transition-delay in ms for stagger */
+  delay = 0,
+  as: Tag = 'div',
+}: {
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+  as?: 'div' | 'section' | 'li' | 'span';
+}) {
+  const ref = React.useRef<HTMLElement | null>(null);
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (
+      typeof window === 'undefined' ||
+      !('IntersectionObserver' in window) ||
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ) {
+      setVisible(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            io.disconnect();
+            break;
+          }
+        }
+      },
+      { rootMargin: '0px 0px -10% 0px', threshold: 0.08 }
+    );
+    io.observe(el);
+    // Safety net: never leave content hidden if the observer misfires
+    // (embedded webviews, print, prerender snapshots).
+    const failSafe = window.setTimeout(() => setVisible(true), 2000);
+    return () => {
+      io.disconnect();
+      window.clearTimeout(failSafe);
+    };
+  }, []);
+
+  const Comp = Tag as React.ElementType;
+  return (
+    <Comp
+      ref={ref}
+      className={cn('reveal-scroll', visible && 'is-visible', className)}
+      style={delay ? { transitionDelay: `${delay}ms` } : undefined}
+    >
+      {children}
+    </Comp>
+  );
+}

package/templates/nextjs/designs/atelier/ui/shared/select-menu.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+/**
+ * Styled replacement for toolbar `<select>`s — same popover language as the
+ * header's language switcher (pill trigger, rotating chevron, rounded menu,
+ * check on the selected row) so every dropdown in the store speaks one
+ * dialect. Closes on outside click / Escape; arrows move focus in the list.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '@/core/lib/utils';
+import { IconCheck, IconChevronDown } from '@/ui/shared/icons';
+
+export interface SelectMenuOption {
+  value: string;
+  label: string;
+}
+
+interface SelectMenuProps {
+  value: string;
+  options: SelectMenuOption[];
+  onChange: (value: string) => void;
+  ariaLabel: string;
+  className?: string;
+}
+
+export function SelectMenu({ value, options, onChange, ariaLabel, className }: SelectMenuProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  // Focus the selected row when the menu opens so keyboard users land in place.
+  useEffect(() => {
+    if (!open) return;
+    const el =
+      listRef.current?.querySelector<HTMLButtonElement>('[aria-selected="true"]') ??
+      listRef.current?.querySelector('button');
+    el?.focus();
+  }, [open]);
+
+  const selected = options.find((o) => o.value === value);
+
+  function onListKeyDown(e: React.KeyboardEvent) {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
+    e.preventDefault();
+    const items = Array.from(listRef.current?.querySelectorAll('button') ?? []);
+    const idx = items.indexOf(document.activeElement as HTMLButtonElement);
+    const next = e.key === 'ArrowDown' ? Math.min(items.length - 1, idx + 1) : Math.max(0, idx - 1);
+    items[next]?.focus();
+  }
+
+  return (
+    <div ref={rootRef} className={cn('relative', className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        aria-label={ariaLabel}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        onClick={() => setOpen((v) => !v)}
+        className="inline-flex h-10 items-center gap-2 rounded-full border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-secondary/60"
+      >
+        {selected?.label ?? ariaLabel}
+        <IconChevronDown
+          size={16}
+          className={cn('shrink-0 text-foreground/60 transition-transform', open && 'rotate-180')}
+        />
+      </button>
+
+      {open && (
+        <ul
+          ref={listRef}
+          role="listbox"
+          aria-label={ariaLabel}
+          onKeyDown={onListKeyDown}
+          className="absolute start-0 top-full z-50 mt-2 max-h-72 min-w-full overflow-y-auto rounded-xl border border-border/60 bg-background py-1 shadow-lg"
+        >
+          {options.map((opt) => {
+            const isSelected = opt.value === value;
+            return (
+              <li key={opt.value}>
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={isSelected}
+                  onClick={() => {
+                    setOpen(false);
+                    triggerRef.current?.focus();
+                    if (!isSelected) onChange(opt.value);
+                  }}
+                  className={cn(
+                    'flex w-full items-center justify-between gap-3 whitespace-nowrap px-4 py-2 text-sm transition-colors hover:bg-secondary/70',
+                    isSelected ? 'font-semibold text-primary' : 'text-foreground/80'
+                  )}
+                >
+                  {opt.label}
+                  {isSelected && <IconCheck size={16} />}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

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} />