@thorprovider/blocks 0.1.2 → 1.0.0

package/src/blocks/e-commerce/product-overview/product-overview-gallery.tsx

@@ -0,0 +1,71 @@
+import { Camera } from 'lucide-react'
+import { Badge } from '../../../ui/badge'
+import { cn } from '../../../lib/utils'
+
+export interface ProductOverviewGalleryProps {
+  /** Resolved image URLs for the product (never empty strings; a fallback is allowed). */
+  images: string[]
+  /** Product title, used for alt text. */
+  title: string
+  /** Optional badge label; omitted when absent. */
+  badgeLabel?: string
+  selectedImage: number
+  onSelectImage: (index: number) => void
+  photosLabel?: string
+}
+
+/**
+ * Image-forward gallery used by the canonical ProductOverview `rich` presentation: a large
+ * primary image with an optional badge and a photo count, plus a thumbnail strip. Operates on
+ * already-resolved URLs so it carries no product-shape assumption (no `mainImages`/`galleryImages`
+ * split, no sector fields).
+ */
+export function ProductOverviewGallery({
+  images,
+  title,
+  badgeLabel,
+  selectedImage,
+  onSelectImage,
+  photosLabel = 'fotos',
+}: ProductOverviewGalleryProps) {
+  const activeImage = images[Math.min(selectedImage, images.length - 1)]
+
+  return (
+    <div>
+      <div className='bg-muted relative aspect-square overflow-hidden rounded-xl'>
+        <img src={activeImage || undefined} alt={title} className='size-full object-cover' />
+        {badgeLabel ? (
+          <Badge className='absolute top-4 left-4 px-2.5 py-0.5 font-semibold'>{badgeLabel}</Badge>
+        ) : null}
+        <div className='absolute right-4 bottom-4 rounded-full bg-black/60 px-3 py-1.5 text-sm text-white backdrop-blur-sm'>
+          <Camera className='mr-1 inline size-4' />
+          {images.length} {photosLabel}
+        </div>
+      </div>
+
+      {images.length > 1 ? (
+        <div className='mt-4 flex gap-3 overflow-x-auto pb-2'>
+          {images.map((image, index) => (
+            <button
+              type='button'
+              key={`${title}:gallery:${index}`}
+              onClick={() => onSelectImage(index)}
+              className={cn(
+                'relative aspect-square size-20 flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border-2 transition-all',
+                selectedImage === index
+                  ? 'border-primary ring-primary/20 shadow-md ring-2'
+                  : 'border-muted hover:border-muted-foreground/50',
+              )}
+              aria-label={`Mostrar imagen ${index + 1} de ${title}`}
+              aria-pressed={selectedImage === index}
+            >
+              <img src={image || undefined} alt={`${title} ${index + 1}`} className='size-full object-cover' />
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default ProductOverviewGallery

package/src/blocks/e-commerce/product-overview/{product-overview-5-lightbox-tab.tsx → product-overview-lightbox-tab.tsx}

@@ -7,80 +7,92 @@ import { Card, CardContent } from '../../../ui/card'
 import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from '../../../ui/dialog'
 import { cn } from '../../../lib/utils'
 
-import type { ProductOverview5Product } from './product-overview-5'
-
-export interface ProductOverview5LightboxTabProps {
-  product: ProductOverview5Product
+export interface ProductOverviewLightboxTabProps {
+  /** Resolved image URLs for the product. */
+  images: string[]
+  /** Product title, used for alt text. */
+  title: string
   galleryLabel?: string
   ofCounterLabel?: string
 }
 
-export function ProductOverview5LightboxTab({
-  product,
+/**
+ * Gallery panel for the `rich` presentation: a thumbnail grid that opens a lightbox with
+ * prev/next navigation. Operates on already-resolved URLs so it carries no sector assumption.
+ */
+export function ProductOverviewLightboxTab({
+  images,
+  title,
   galleryLabel = 'Galería',
   ofCounterLabel = '{current} de {total}',
-}: ProductOverview5LightboxTabProps) {
+}: ProductOverviewLightboxTabProps) {
   const [modalImageIndex, setModalImageIndex] = useState(0)
 
-  const nextImage = () => setModalImageIndex(prev => (prev + 1) % product.galleryImages.length)
-  const prevImage = () => setModalImageIndex(prev => (prev - 1 + product.galleryImages.length) % product.galleryImages.length)
+  const nextImage = () => setModalImageIndex(prev => (prev + 1) % images.length)
+  const prevImage = () => setModalImageIndex(prev => (prev - 1 + images.length) % images.length)
 
   return (
     <Card className='border shadow-none'>
       <CardContent className='p-8 py-0'>
         <h3 className='mb-6 text-xl font-semibold text-balance'>{galleryLabel}</h3>
         <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-3'>
-          {product.galleryImages.map((image, index) => (
-            <Dialog key={index}>
+          {images.map((image, index) => (
+            <Dialog key={`${title}:lightbox:${index}`}>
               <DialogTrigger asChild>
                 <button
                   type='button'
                   className='block aspect-square cursor-pointer overflow-hidden rounded-xl'
                   onClick={() => setModalImageIndex(index)}
+                  aria-label={`Abrir imagen ${index + 1} de ${title}`}
                 >
-                  <img src={image || undefined} alt={`${product.name} ${index + 1}`} className='size-full object-cover' />
+                  <img src={image || undefined} alt={`${title} ${index + 1}`} className='size-full object-cover' />
                 </button>
               </DialogTrigger>
               <DialogContent className='max-w-4xl border-0 bg-transparent p-0' showCloseButton={false}>
                 <DialogTitle className='sr-only'>Imagen de galería {modalImageIndex + 1}</DialogTitle>
                 <div className='relative'>
                   <img
-                    src={product.galleryImages[modalImageIndex] || undefined}
-                    alt={`${product.name} ${modalImageIndex + 1}`}
+                    src={images[modalImageIndex] || undefined}
+                    alt={`${title} ${modalImageIndex + 1}`}
                     className='max-h-[80vh] w-full object-contain'
                   />
                   <DialogClose className='absolute top-4 right-4 rounded-full bg-black/20 p-2 text-white transition-colors hover:bg-black/30'>
                     <X className='size-4' />
                   </DialogClose>
 
-                  {product.galleryImages.length > 1 && (
+                  {images.length > 1 ? (
                     <>
                       <Button
                         variant='ghost'
                         size='icon'
-                        className='size-9 absolute top-1/2 left-4 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
+                        className='absolute top-1/2 left-4 size-9 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
                         onClick={prevImage}
+                        aria-label='Imagen anterior'
                       >
                         <ChevronLeft className='size-4' />
                       </Button>
                       <Button
                         variant='ghost'
                         size='icon'
-                        className='size-9 absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
+                        className='absolute top-1/2 right-4 size-9 -translate-y-1/2 cursor-pointer rounded-full bg-black/20 text-white hover:bg-black/30'
                         onClick={nextImage}
+                        aria-label='Imagen siguiente'
                       >
                         <ChevronRight className='size-4' />
                       </Button>
                     </>
-                  )}
+                  ) : null}
 
                   <div className='absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2'>
-                    {product.galleryImages.map((_, idx) => (
+                    {images.map((_, idx) => (
                       <button
                         type='button'
-                        key={idx}
+                        key={`${title}:dot:${idx}`}
                         aria-label={`Mostrar imagen ${idx + 1}`}
-                        className={cn('size-2 rounded-full transition-colors', idx === modalImageIndex ? 'bg-white' : 'bg-white/50')}
+                        className={cn(
+                          'size-2 rounded-full transition-colors',
+                          idx === modalImageIndex ? 'bg-white' : 'bg-white/50',
+                        )}
                         onClick={() => setModalImageIndex(idx)}
                       />
                     ))}
@@ -89,7 +101,7 @@ export function ProductOverview5LightboxTab({
                   <div className='absolute right-4 bottom-4 rounded-full bg-black/20 px-3 py-1 text-sm text-white'>
                     {ofCounterLabel
                       .replace('{current}', String(modalImageIndex + 1))
-                      .replace('{total}', String(product.galleryImages.length))}
+                      .replace('{total}', String(images.length))}
                   </div>
                 </div>
               </DialogContent>
@@ -101,4 +113,4 @@ export function ProductOverview5LightboxTab({
   )
 }
 
-export default ProductOverview5LightboxTab
+export default ProductOverviewLightboxTab

package/src/blocks/e-commerce/product-overview/{product-overview-5-reviews-tab.tsx → product-overview-reviews-tab.tsx}

@@ -2,17 +2,33 @@ import { Star } from 'lucide-react'
 import { Card, CardContent } from '../../../ui/card'
 import { Progress } from '../../../ui/progress'
 
-import type { ProductOverview5Product } from './product-overview-5'
+/**
+ * Canonical review entry for the ProductOverview `rich` presentation. Reviews are supplied by the
+ * host (optional block data), never seeded by the block.
+ */
+export interface ProductOverviewReview {
+  id: number
+  author: string
+  rating: number
+  comment: string
+  date: string
+  helpful?: number
+}
 
-export interface ProductOverview5ReviewsTabProps {
-  product: ProductOverview5Product
+export interface ProductOverviewReviewsTabProps {
+  /** Aggregate rating (0–5); rendered only when the host supplies reviews. */
+  rating: number
+  reviews: ProductOverviewReview[]
   basedOnReviewsLabel?: string
   foundHelpfulLabel?: string
 }
 
 function renderStars(rating: number) {
   return Array.from({ length: 5 }, (_, i) => (
-    <Star key={i} className={`size-4 ${i < Math.floor(rating) ? 'fill-foreground text-foreground' : i < rating ? 'text-foreground' : ''}`} />
+    <Star
+      key={i}
+      className={`size-4 ${i < Math.floor(rating) ? 'fill-foreground text-foreground' : i < rating ? 'text-foreground' : ''}`}
+    />
   ))
 }
 
@@ -20,27 +36,32 @@ function formatDate(dateString: string) {
   return new Date(dateString).toLocaleDateString('es-ES', { year: 'numeric', month: 'short', day: 'numeric' })
 }
 
-export function ProductOverview5ReviewsTab({
-  product,
+/**
+ * Reviews panel for the `rich` presentation: an aggregate summary plus the review list. Rendered
+ * only when the host supplies reviews, so it never fabricates an empty review surface.
+ */
+export function ProductOverviewReviewsTab({
+  rating,
+  reviews,
   basedOnReviewsLabel = 'Basado en {count} reseñas',
   foundHelpfulLabel = '{count} personas encontraron esto útil',
-}: ProductOverview5ReviewsTabProps) {
+}: ProductOverviewReviewsTabProps) {
   return (
     <div className='flex flex-col gap-6'>
       <Card className='border shadow-none'>
         <CardContent className='p-8 py-0'>
           <div className='flex flex-col items-start gap-8 md:flex-row md:items-center'>
             <div className='text-center'>
-              <div className='text-4xl font-bold'>{product.rating}</div>
-              <div className='mt-2 flex justify-center'>{renderStars(product.rating)}</div>
+              <div className='text-4xl font-bold'>{rating}</div>
+              <div className='mt-2 flex justify-center'>{renderStars(rating)}</div>
               <div className='text-muted-foreground mt-2 text-sm'>
-                {basedOnReviewsLabel.replace('{count}', String(product.userReviews.length))}
+                {basedOnReviewsLabel.replace('{count}', String(reviews.length))}
               </div>
             </div>
             <div className='flex-1'>
               {[5, 4, 3, 2, 1].map(stars => {
-                const count = product.userReviews.filter(review => Math.floor(review.rating) === stars).length
-                const percentage = (count / product.userReviews.length) * 100
+                const count = reviews.filter(review => Math.floor(review.rating) === stars).length
+                const percentage = reviews.length > 0 ? (count / reviews.length) * 100 : 0
                 return (
                   <div key={stars} className='mb-3 flex items-center gap-3'>
                     <span className='w-8 text-sm font-medium'>{stars}★</span>
@@ -55,7 +76,7 @@ export function ProductOverview5ReviewsTab({
       </Card>
 
       <div className='flex flex-col gap-4'>
-        {product.userReviews.map(review => (
+        {reviews.map(review => (
           <Card key={review.id} className='border shadow-none'>
             <CardContent className='p-6 py-0'>
               <div className='mb-4 flex items-start justify-between'>
@@ -68,9 +89,11 @@ export function ProductOverview5ReviewsTab({
                 </div>
               </div>
               <p className='text-muted-foreground mb-3 text-sm leading-relaxed'>{review.comment}</p>
-              <div className='text-muted-foreground text-xs'>
-                {foundHelpfulLabel.replace('{count}', String(review.helpful))}
-              </div>
+              {typeof review.helpful === 'number' ? (
+                <div className='text-muted-foreground text-xs'>
+                  {foundHelpfulLabel.replace('{count}', String(review.helpful))}
+                </div>
+              ) : null}
             </CardContent>
           </Card>
         ))}
@@ -79,4 +102,4 @@ export function ProductOverview5ReviewsTab({
   )
 }
 
-export default ProductOverview5ReviewsTab
+export default ProductOverviewReviewsTab

package/src/blocks/e-commerce/product-overview/{product-overview-5-tabs.tsx → product-overview-tabs.tsx}

@@ -3,7 +3,8 @@ import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
 import { cn } from '../../../lib/utils'
 
 /**
- * The full tab set this block renders on.
+ * The full tab set the canonical ProductOverview renders on for its `rich`
+ * presentation.
  *
  * The block's classes target Base UI state attributes (`data-active:bg-transparent` on the
  * triggers), the indicator reads Base UI positioning CSS variables (`--active-tab-*`), and the
@@ -12,11 +13,11 @@ import { cn } from '../../../lib/utils'
  * `tabs` so the block installs standalone: the shadcn `tabs` component you get from the registry
  * has no indicator or fading panel.
  */
-export function ProductOverview5Tabs(props: TabsPrimitive.Root.Props) {
+export function ProductOverviewTabs(props: TabsPrimitive.Root.Props) {
   return <TabsPrimitive.Root data-slot='tabs' {...props} />
 }
 
-export function ProductOverview5TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+export function ProductOverviewTabsList({ className, ...props }: TabsPrimitive.List.Props) {
   return <TabsPrimitive.List data-slot='tabs-list' className={className} {...props} />
 }
 
@@ -24,7 +25,7 @@ export function ProductOverview5TabsList({ className, ...props }: TabsPrimitive.
  * Base UI's tab button carries no layout of its own, so the inline-flex centring that the
  * Radix-backed shadcn trigger used to supply is re-stated here.
  */
-export function ProductOverview5TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+export function ProductOverviewTabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
   return (
     <TabsPrimitive.Tab
       data-slot='tabs-trigger'
@@ -39,7 +40,7 @@ export function ProductOverview5TabsTrigger({ className, ...props }: TabsPrimiti
  * activation is a fresh mount - `animate-in` plays automatically without needing a transition-state
  * data attribute to gate it.
  */
-export function ProductOverview5TabsContentFade({ className, ...props }: TabsPrimitive.Panel.Props) {
+export function ProductOverviewTabsContentFade({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
     <TabsPrimitive.Panel
       className={cn('animate-in fade-in-0 duration-200 motion-reduce:animate-none', className)}
@@ -53,7 +54,7 @@ export function ProductOverview5TabsContentFade({ className, ...props }: TabsPri
  * with `data-active:bg-transparent` on the triggers so their own active background doesn't double
  * up with the pill.
  */
-export function ProductOverview5TabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {
+export function ProductOverviewTabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {
   return (
     <TabsPrimitive.Indicator
       data-slot='tabs-indicator'
@@ -66,4 +67,4 @@ export function ProductOverview5TabsIndicator({ className, ...props }: TabsPrimi
       {...props}
     />
   )
-}
+}

package/src/blocks/e-commerce/product-overview/product-overview.test.tsx

@@ -0,0 +1,283 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import ProductOverview, {
+  galleryImages,
+  resolveAddToCartPayload,
+  variantLabelOf,
+  type ProductDetailProduct,
+  type ProductOverviewProps,
+} from './product-overview'
+
+const formatPrice = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+const product: ProductDetailProduct = {
+  id: 'p1',
+  handle: 'taladro',
+  title: 'Taladro inalámbrico',
+  description: 'Un taladro',
+  vendor: 'Acme',
+  options: [{ id: 'o1', name: 'Color', values: ['Rojo', 'Azul'] }],
+  variants: [
+    {
+      id: 'v-red',
+      title: 'Rojo',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Rojo' }],
+      price: { amount: '10.00', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-blue',
+      title: 'Azul',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Azul' }],
+      price: { amount: '25.50', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-sold',
+      title: 'Verde',
+      availableForSale: false,
+      selectedOptions: [{ name: 'Color', value: 'Verde' }],
+      price: { amount: '9.00', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-noprice',
+      title: 'Gris',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Gris' }],
+      price: null,
+    },
+    {
+      id: 'v-free',
+      title: 'Blanco',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Blanco' }],
+      price: { amount: '0', currencyCode: 'USD' },
+    },
+  ],
+  images: [
+    { url: 'https://cdn.example/p1.jpg', altText: 'p1' },
+    { url: 'https://cdn.example/p2.jpg', altText: 'p2' },
+  ],
+}
+
+const singleImageProduct: ProductDetailProduct = {
+  ...product,
+  images: [{ url: 'https://cdn.example/p1.jpg', altText: 'p1' }],
+}
+
+const render = (props: ProductOverviewProps) => renderToStaticMarkup(<ProductOverview {...props} />)
+
+describe('ProductOverview — canonical render (task 2.1)', () => {
+  it('renders title, images, option/variant selection, and the selected price', () => {
+    const html = render({ product, selectedVariantId: 'v-blue', formatPrice, onAddToCart: () => {} })
+    expect(html).toContain('Taladro inalámbrico')
+    expect(html).toContain('https://cdn.example/p1.jpg')
+    expect(html).toContain('Variantes')
+    expect(html).toContain('Azul')
+    expect(html).toContain('USD 25.50')
+  })
+})
+
+describe('ProductOverview — bounded presentations (tasks 2.2, 2.3)', () => {
+  it('renders the gallery presentation from the same canonical props with a different DOM structure', () => {
+    const standardHtml = render({ product, selectedVariantId: 'v-blue', formatPrice, onAddToCart: () => {} })
+    const galleryHtml = render({
+      product,
+      presentation: 'gallery',
+      selectedVariantId: 'v-blue',
+      formatPrice,
+      onAddToCart: () => {},
+    })
+    expect(galleryHtml).not.toBe(standardHtml)
+    expect(standardHtml).toContain('@container')
+    expect(galleryHtml).not.toContain('@container')
+    expect(galleryHtml).toContain('Taladro inalámbrico')
+    expect(galleryHtml).toContain('USD 25.50')
+  })
+
+  it('omits absent rich sections without empty chrome', () => {
+    const html = render({ product: singleImageProduct, presentation: 'rich', formatPrice })
+    expect(html).not.toContain('Características clave')
+    expect(html).not.toContain('Especificaciones técnicas')
+    expect(html).not.toContain('Resumen')
+  })
+
+  it('renders the rich sections only when the optional data is supplied', () => {
+    const html = render({
+      product,
+      presentation: 'rich',
+      selectedVariantId: 'v-blue',
+      formatPrice,
+      features: ['Batería de larga duración', 'Maletín incluido'],
+      specifications: { Voltaje: '18V', Protección: 'IP54' },
+      reviews: [{ id: 1, author: 'Ana', rating: 5, comment: 'Excelente', date: '2026-01-01' }],
+      rating: { value: 4, count: 3 },
+    })
+    expect(html).toContain('Características clave')
+    expect(html).toContain('Batería de larga duración')
+    expect(html).toContain('Resumen')
+    expect(html).toContain('Especificaciones')
+    expect(html).toContain('Reseñas (1)')
+    expect(html).toContain('Galería')
+  })
+
+  it('renders the specifications section when it is the only rich data', () => {
+    const html = render({
+      product,
+      presentation: 'rich',
+      formatPrice,
+      specifications: { Voltaje: '18V', Protección: 'IP54' },
+    })
+    expect(html).toContain('Especificaciones técnicas')
+    expect(html).toContain('IP54')
+  })
+
+  it('renders the reviews section when it is the only rich data', () => {
+    const html = render({
+      product,
+      presentation: 'rich',
+      formatPrice,
+      reviews: [{ id: 1, author: 'Ana', rating: 5, comment: 'Excelente', date: '2026-01-01' }],
+    })
+    expect(html).toContain('Ana')
+    expect(html).toContain('Excelente')
+  })
+})
+
+describe('ProductOverview — controlled selection and add-to-cart identity (task 2.4)', () => {
+  it('does not default to the first variant and prompts for an explicit selection', () => {
+    const html = render({ product, formatPrice, onAddToCart: () => {} })
+    expect(html).toContain('Selecciona una variante')
+    expect(html).not.toContain('USD 10.00')
+  })
+
+  it('shows the selected non-default variant at its current price', () => {
+    const html = render({ product, selectedVariantId: 'v-blue', formatPrice, onAddToCart: () => {} })
+    expect(html).toContain('USD 25.50')
+    expect(html).not.toContain('USD 10.00')
+  })
+
+  it('reports a missing price as unavailable instead of zero', () => {
+    const html = render({ product, selectedVariantId: 'v-noprice', formatPrice })
+    expect(html).toContain('Precio no disponible')
+    expect(html).not.toContain('USD 0')
+  })
+
+  it('preserves a backend-resolved valid zero', () => {
+    const html = render({ product, selectedVariantId: 'v-free', formatPrice })
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('Precio no disponible')
+  })
+
+  it('enables purchase only for an available, priced, explicitly selected variant', () => {
+    const onlyAvailable: ProductDetailProduct = { ...product, variants: [product.variants[0]] }
+    const enabled = render({
+      product: onlyAvailable,
+      selectedVariantId: 'v-red',
+      formatPrice,
+      onAddToCart: () => {},
+    })
+    expect(enabled).not.toContain('disabled=""')
+
+    const noSelection = render({ product: onlyAvailable, formatPrice, onAddToCart: () => {} })
+    expect(noSelection).toContain('disabled=""')
+  })
+})
+
+describe('ProductOverview — sector-neutral (task 2.5)', () => {
+  it('renders a non-fashion product with no size/color system and derives currency from Money', () => {
+    const electronics: ProductDetailProduct = {
+      id: 'e1',
+      title: 'Laptop Pro 14',
+      description: 'Una laptop',
+      vendor: 'Nimbus',
+      options: [{ id: 'o1', name: 'Capacidad', values: ['256 GB', '512 GB'] }],
+      variants: [
+        {
+          id: 'e-256',
+          title: '256 GB',
+          availableForSale: true,
+          selectedOptions: [{ name: 'Capacidad', value: '256 GB' }],
+          price: { amount: '256.00', currencyCode: 'EUR' },
+        },
+      ],
+      images: [{ url: 'https://cdn.example/e1.jpg', altText: 'e1' }],
+    }
+
+    const html = render({ product: electronics, selectedVariantId: 'e-256', formatPrice })
+    expect(html).toContain('Laptop Pro 14')
+    expect(html).toContain('256 GB')
+    expect(html).toContain('EUR 256.00')
+    expect(html).not.toContain('$')
+    expect(html).not.toContain('Talla')
+  })
+})
+
+describe('ProductOverview — purpose-gated wishlist affordance', () => {
+  const presentations = ['standard', 'gallery', 'rich'] as const
+
+  it('renders the wishlist button only when a toggle handler is wired', () => {
+    for (const presentation of presentations) {
+      const wired = render({
+        product,
+        presentation,
+        selectedVariantId: 'v-blue',
+        formatPrice,
+        onToggleWishlist: () => {},
+      })
+      const unwired = render({ product, presentation, selectedVariantId: 'v-blue', formatPrice })
+
+      expect(wired).toContain('Agregar a favoritos')
+      expect(unwired).not.toContain('Agregar a favoritos')
+      expect(unwired).not.toContain('Quitar de favoritos')
+    }
+  })
+
+  it('reflects the controlled wishlist state in the button label', () => {
+    const html = render({
+      product,
+      selectedVariantId: 'v-blue',
+      formatPrice,
+      isWishlisted: true,
+      onToggleWishlist: () => {},
+    })
+    expect(html).toContain('Quitar de favoritos')
+    expect(html).not.toContain('Agregar a favoritos')
+  })
+})
+
+describe('resolveAddToCartPayload', () => {
+  const variant = product.variants[1]
+
+  it('returns null when no variant is selected (no first-variant shortcut)', () => {
+    expect(resolveAddToCartPayload(null, 2)).toBeNull()
+  })
+
+  it('uses the selected backend variant id and defaults the quantity to 1', () => {
+    expect(resolveAddToCartPayload(variant, undefined)).toEqual({ variantId: 'v-blue', quantity: 1 })
+  })
+
+  it('carries the requested quantity', () => {
+    expect(resolveAddToCartPayload(variant, 3)).toEqual({ variantId: 'v-blue', quantity: 3 })
+  })
+})
+
+describe('variant helpers', () => {
+  it('prefers the variant title', () => {
+    expect(variantLabelOf(product.variants[0])).toBe('Rojo')
+  })
+
+  it('falls back to option values when a variant has no title', () => {
+    expect(variantLabelOf({ ...product.variants[0], title: '' })).toBe('Rojo')
+  })
+
+  it('uses the product images when present and never a fabricated URL', () => {
+    const withImages: ProductDetailProduct = {
+      ...product,
+      images: [{ url: 'https://cdn.example/p1.jpg', altText: 'p1' }],
+    }
+    expect(galleryImages(withImages, 'FALLBACK')).toEqual(['https://cdn.example/p1.jpg'])
+    expect(galleryImages({ ...product, images: [] }, 'FALLBACK')).toEqual(['FALLBACK'])
+  })
+})