@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -1,71 +0,0 @@
-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-lightbox-tab.tsx

@@ -1,116 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ChevronLeft, ChevronRight, X } from 'lucide-react'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from '../../../ui/dialog'
-import { cn } from '../../../lib/utils'
-
-export interface ProductOverviewLightboxTabProps {
-  /** Resolved image URLs for the product. */
-  images: string[]
-  /** Product title, used for alt text. */
-  title: string
-  galleryLabel?: string
-  ofCounterLabel?: string
-}
-
-/**
- * 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}',
-}: ProductOverviewLightboxTabProps) {
-  const [modalImageIndex, setModalImageIndex] = useState(0)
-
-  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'>
-          {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={`${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={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>
-
-                  {images.length > 1 ? (
-                    <>
-                      <Button
-                        variant='ghost'
-                        size='icon'
-                        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='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'>
-                    {images.map((_, idx) => (
-                      <button
-                        type='button'
-                        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',
-                        )}
-                        onClick={() => setModalImageIndex(idx)}
-                      />
-                    ))}
-                  </div>
-
-                  <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(images.length))}
-                  </div>
-                </div>
-              </DialogContent>
-            </Dialog>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default ProductOverviewLightboxTab

package/src/blocks/e-commerce/product-overview/product-overview-reviews-tab.tsx

@@ -1,105 +0,0 @@
-import { Star } from 'lucide-react'
-import { Card, CardContent } from '../../../ui/card'
-import { Progress } from '../../../ui/progress'
-
-/**
- * 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 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' : ''}`}
-    />
-  ))
-}
-
-function formatDate(dateString: string) {
-  return new Date(dateString).toLocaleDateString('es-ES', { year: 'numeric', month: 'short', day: 'numeric' })
-}
-
-/**
- * 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',
-}: 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'>{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(reviews.length))}
-              </div>
-            </div>
-            <div className='flex-1'>
-              {[5, 4, 3, 2, 1].map(stars => {
-                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>
-                    <Progress value={percentage} className='h-2 flex-1 rounded-full' />
-                    <span className='text-muted-foreground w-8 text-sm'>{count}</span>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <div className='flex flex-col gap-4'>
-        {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'>
-                <div>
-                  <div className='text-sm font-medium'>{review.author}</div>
-                  <div className='mt-2 flex items-center gap-2'>
-                    <div className='flex'>{renderStars(review.rating)}</div>
-                    <span className='text-muted-foreground text-sm'>{formatDate(review.date)}</span>
-                  </div>
-                </div>
-              </div>
-              <p className='text-muted-foreground mb-3 text-sm leading-relaxed'>{review.comment}</p>
-              {typeof review.helpful === 'number' ? (
-                <div className='text-muted-foreground text-xs'>
-                  {foundHelpfulLabel.replace('{count}', String(review.helpful))}
-                </div>
-              ) : null}
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default ProductOverviewReviewsTab

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

@@ -1,70 +0,0 @@
-import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
-
-import { cn } from '../../../lib/utils'
-
-/**
- * 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
- * content fade relies on Base UI unmounting the inactive panel - so the whole tabs area runs on
- * Base UI rather than the Radix-backed shadcn `tabs`. It lives here rather than in the shared ui
- * `tabs` so the block installs standalone: the shadcn `tabs` component you get from the registry
- * has no indicator or fading panel.
- */
-export function ProductOverviewTabs(props: TabsPrimitive.Root.Props) {
-  return <TabsPrimitive.Root data-slot='tabs' {...props} />
-}
-
-export function ProductOverviewTabsList({ className, ...props }: TabsPrimitive.List.Props) {
-  return <TabsPrimitive.List data-slot='tabs-list' className={className} {...props} />
-}
-
-/**
- * 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 ProductOverviewTabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
-  return (
-    <TabsPrimitive.Tab
-      data-slot='tabs-trigger'
-      className={cn('relative inline-flex items-center justify-center whitespace-nowrap', className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * Panel with a fade-in on every switch. Base UI unmounts the inactive panel by default, so each
- * activation is a fresh mount - `animate-in` plays automatically without needing a transition-state
- * data attribute to gate it.
- */
-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)}
-      {...props}
-    />
-  )
-}
-
-/**
- * Sliding pill that tracks the active trigger. Render as the first child of TabsList, and pair
- * with `data-active:bg-transparent` on the triggers so their own active background doesn't double
- * up with the pill.
- */
-export function ProductOverviewTabsIndicator({ className, ...props }: TabsPrimitive.Indicator.Props) {
-  return (
-    <TabsPrimitive.Indicator
-      data-slot='tabs-indicator'
-      className={cn(
-        'absolute z-0 rounded-md bg-background shadow-sm transition-[left,top,width,height] duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)] dark:bg-input/30',
-        'left-(--active-tab-left) top-(--active-tab-top) h-(--active-tab-height) w-(--active-tab-width)',
-        'motion-reduce:transition-none',
-        className
-      )}
-      {...props}
-    />
-  )
-}

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

@@ -1,283 +0,0 @@
-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'])
-  })
-})