npm - @thorprovider/blocks - Versions diffs - 2.0.0 → 3.0.0 - Mend

@thorprovider/blocks 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (842) hide show

package/dist/blocks/e-commerce/product-overview/product-overview.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/blocks/e-commerce/product-overview/product-overview.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Camera, Check, Heart, Info, MessageSquare, Minus, Package, Plus, Share2, ShoppingCart, Star, Truck } from 'lucide-react'\nimport type { Image, Money, ProductOption, SelectedOption } from '@thorprovider/types'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent } from '../../../ui/card'\nimport { Separator } from '../../../ui/separator'\nimport { cn } from '../../../lib/utils'\nimport { PRODUCT_IMAGE_FALLBACK } from '../../../lib/contracts'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport { ReactionToggle } from '../../shared/reaction-toggle'\nimport { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '../../../ui/carousel'\nimport { ProductOverviewGallery } from './product-overview-gallery'\nimport { ProductOverviewLightboxTab } from './product-overview-lightbox-tab'\nimport { ProductOverviewReviewsTab, type ProductOverviewReview } from './product-overview-reviews-tab'\nimport {\n ProductOverviewTabs,\n ProductOverviewTabsContentFade,\n ProductOverviewTabsIndicator,\n ProductOverviewTabsList,\n ProductOverviewTabsTrigger,\n} from './product-overview-tabs'\n\n/**\n * Canonical product-detail projection.\n *\n * The block consumes the canonical `@thorprovider/types` shapes (`Money`,\n * `ProductOption`, `SelectedOption`, `Image`) so adapter output maps without a\n * second, drifting product type. The only deviation is `price`: the canon marks\n * it required, but a missing/unresolved backend price is a real, distinct state\n * that must disable purchase — so the projection allows `price` to be absent\n * and the block treats absence as \"unavailable\", never as zero.\n */\nexport interface ProductDetailVariant {\n id: string\n title: string\n sku?: string\n availableForSale: boolean\n selectedOptions: SelectedOption[]\n /** Canonical Money; omit/null when the backend has no resolved price. */\n price?: Money | null\n compareAtPrice?: Money\n image?: Image\n}\n\nexport interface ProductDetailProduct {\n id: string\n handle?: string\n title: string\n description?: string\n vendor?: string\n options: ProductOption[]\n variants: ProductDetailVariant[]\n images: Image[]\n featuredImage?: Image\n}\n\nexport interface ProductOverviewRating {\n value: number\n count: number\n}\n\n/**\n * The bounded presentation surface. `standard` is the straightforward detail\n * layout, `gallery` is image-forward, and `rich` adds tabbed overview/specs/\n * reviews/gallery. The value changes structure, never the data contract.\n */\nexport type ProductOverviewPresentation = 'standard' | 'gallery' | 'rich'\n\nexport interface ProductOverviewProps {\n product: ProductDetailProduct\n /** Bounded presentation option; defaults to `standard`. */\n presentation?: ProductOverviewPresentation\n /** Controlled selection: the backend variant id, or null/undefined when nothing is explicitly selected. */\n selectedVariantId?: string | null\n onSelectVariant?: (variantId: string) => void\n /** Controlled quantity for the add-to-cart action; defaults to 1 when omitted. */\n quantity?: number\n onQuantityChange?: (quantity: number) => void\n /** Add-to-cart identity is the selected backend variant id, with the requested quantity. */\n onAddToCart?: (variantId: string, quantity: number) => void\n isWishlisted?: boolean\n onToggleWishlist?: (variantId: string, isWishlisted: boolean) => void\n /** Optional share action (used by the `rich` presentation). */\n onShare?: () => void\n /** Rendered only when the backend supplies it. */\n rating?: ProductOverviewRating\n /** Rendered only when the backend supplies it. */\n deliveryEstimate?: string\n /** Rendered only when the backend supplies it. */\n shipping?: Money\n formatPrice?: (money: Money) => string\n /** `rich`-only optional data. Omitted sections render no chrome. */\n specifications?: Record<string, string>\n /** `rich`-only optional data. Omitted sections render no chrome. */\n features?: string[]\n /** `rich`-only optional data. Omitted sections render no chrome. */\n reviews?: ProductOverviewReview[]\n sizesLabel?: string\n variantLabel?: string\n reviewsLabel?: string\n addToCartLabel?: string\n outOfStockLabel?: string\n unavailablePriceLabel?: string\n selectVariantLabel?: string\n quantityLabel?: string\n deliveryEstimateLabel?: string\n shippingLabel?: string\n removeFromWishlistLabel?: string\n addToWishlistLabel?: string\n imageFallback?: string\n /** `gallery`/`rich` labels. */\n badgeLabel?: string\n availabilityLabel?: string\n skuLabel?: string\n overviewLabel?: string\n specsLabel?: string\n featuresLabel?: string\n specificationsLabel?: string\n galleryLabel?: string\n photosLabel?: string\n saveLabel?: string\n savedLabel?: string\n shareLabel?: string\n basedOnReviewsLabel?: string\n foundHelpfulLabel?: string\n ofCounterLabel?: string\n freeDeliveryLabel?: string\n}\n\nexport function variantLabelOf(variant: ProductDetailVariant): string {\n if (variant.title.trim() !== '') return variant.title\n return variant.selectedOptions.map(option => option.value).join(' / ')\n}\n\n/**\n * The add-to-cart payload contract: the explicitly selected backend variant id\n * and a positive quantity (defaults to 1). Returns `null` when no variant has\n * been selected — the block never substitutes the first variant.\n */\nexport function resolveAddToCartPayload(\n variant: ProductDetailVariant | null,\n quantity: number | undefined,\n): { variantId: string; quantity: number } | null {\n if (!variant) return null\n return {\n variantId: variant.id,\n quantity: typeof quantity === 'number' && quantity > 0 ? quantity : 1,\n }\n}\n\nexport function galleryImages(product: ProductDetailProduct, fallback: string): string[] {\n const images = product.images\n .map(image => image.url)\n .filter((url): url is string => typeof url === 'string' && url.trim() !== '')\n if (images.length > 0) return images\n const featured = product.featuredImage?.url\n if (typeof featured === 'string' && featured.trim() !== '') return [featured]\n return [fallback]\n}\n\ninterface ResolvedSelection {\n selectedVariant: ProductDetailVariant | null\n selectedPrice: Money | null | undefined\n selectedCompareAt: Money | undefined\n priceAvailable: boolean\n compareAtAvailable: boolean\n canPurchase: boolean\n quantityValue: number\n addPayload: { variantId: string; quantity: number } | null\n}\n\nexport default function ProductOverview({\n product,\n presentation = 'standard',\n selectedVariantId,\n onSelectVariant,\n quantity,\n onQuantityChange,\n onAddToCart,\n isWishlisted = false,\n onToggleWishlist,\n onShare,\n rating,\n deliveryEstimate,\n shipping,\n formatPrice,\n specifications,\n features,\n reviews,\n sizesLabel = 'Variantes',\n variantLabel = 'Variante',\n reviewsLabel = 'Reseñas',\n addToCartLabel = 'Agregar al carrito',\n outOfStockLabel = 'Agotado',\n unavailablePriceLabel = 'Precio no disponible',\n selectVariantLabel = 'Selecciona una variante',\n quantityLabel = 'Cantidad',\n deliveryEstimateLabel = 'Entrega estimada',\n shippingLabel = 'Envío',\n removeFromWishlistLabel = 'Quitar de favoritos',\n addToWishlistLabel = 'Agregar a favoritos',\n imageFallback = PRODUCT_IMAGE_FALLBACK,\n badgeLabel,\n availabilityLabel = 'Disponible',\n skuLabel = 'SKU',\n overviewLabel = 'Resumen',\n specsLabel = 'Especificaciones',\n featuresLabel = 'Características clave',\n specificationsLabel = 'Especificaciones técnicas',\n galleryLabel = 'Galería',\n photosLabel = 'fotos',\n saveLabel = 'Guardar',\n savedLabel = 'Guardado',\n shareLabel = 'Compartir',\n basedOnReviewsLabel = 'Basado en {count} reseñas',\n foundHelpfulLabel = '{count} personas encontraron esto útil',\n ofCounterLabel = '{current} de {total}',\n freeDeliveryLabel,\n}: ProductOverviewProps) {\n const [selectedImage, setSelectedImage] = useState(0)\n const [carouselApi, setCarouselApi] = useState<CarouselApi>()\n\n useEffect(() => {\n if (!carouselApi) return\n carouselApi.scrollTo(selectedImage)\n const handleSelect = () => setSelectedImage(carouselApi.selectedScrollSnap())\n carouselApi.on('select', handleSelect)\n return () => {\n carouselApi.off('select', handleSelect)\n }\n }, [carouselApi, selectedImage])\n\n const selectedVariant =\n selectedVariantId != null\n ? product.variants.find(variant => variant.id === selectedVariantId) ?? null\n : null\n\n const selectedPrice = selectedVariant?.price\n const selectedCompareAt = selectedVariant?.compareAtPrice\n const priceAvailable = isAvailableMoney(selectedPrice)\n const compareAtAvailable = isAvailableMoney(selectedCompareAt)\n const canPurchase = Boolean(selectedVariant?.availableForSale) && priceAvailable\n const quantityValue = quantity ?? 1\n const addPayload = resolveAddToCartPayload(selectedVariant, quantityValue)\n\n const images = galleryImages(product, imageFallback)\n const hasRealImages = images[0] !== imageFallback || product.featuredImage != null\n const activeImage = images[Math.min(selectedImage, images.length - 1)]\n\n const selection: ResolvedSelection = {\n selectedVariant,\n selectedPrice,\n selectedCompareAt,\n priceAvailable,\n compareAtAvailable,\n canPurchase,\n quantityValue,\n addPayload,\n }\n\n const handleAddToCart = () => {\n if (onAddToCart && addPayload) onAddToCart(addPayload.variantId, addPayload.quantity)\n }\n const handleToggleWishlist = () => {\n if (!selectedVariant || !onToggleWishlist) return\n onToggleWishlist(selectedVariant.id, !isWishlisted)\n }\n\n if (presentation === 'gallery') {\n return (\n <GalleryPresentation\n product={product}\n selection={selection}\n images={images}\n activeImage={activeImage}\n selectedImage={selectedImage}\n onSelectImage={setSelectedImage}\n setCarouselApi={setCarouselApi}\n onSelectVariant={onSelectVariant}\n onQuantityChange={onQuantityChange}\n onAddToCart={handleAddToCart}\n isWishlisted={isWishlisted}\n onToggleWishlist={onToggleWishlist ? handleToggleWishlist : undefined}\n rating={rating}\n formatPrice={formatPrice}\n labels={{\n reviewsLabel,\n addToCartLabel,\n outOfStockLabel,\n unavailablePriceLabel,\n selectVariantLabel,\n quantityLabel,\n removeFromWishlistLabel,\n addToWishlistLabel,\n freeDeliveryLabel,\n }}\n />\n )\n }\n\n if (presentation === 'rich') {\n return (\n <RichPresentation\n product={product}\n selection={selection}\n images={images}\n selectedImage={selectedImage}\n onSelectImage={setSelectedImage}\n onSelectVariant={onSelectVariant}\n onQuantityChange={onQuantityChange}\n onAddToCart={handleAddToCart}\n isWishlisted={isWishlisted}\n onToggleWishlist={onToggleWishlist ? handleToggleWishlist : undefined}\n onShare={onShare}\n rating={rating}\n formatPrice={formatPrice}\n specifications={specifications}\n features={features}\n reviews={reviews}\n labels={{\n reviewsLabel,\n addToCartLabel,\n outOfStockLabel,\n unavailablePriceLabel,\n selectVariantLabel,\n quantityLabel,\n removeFromWishlistLabel,\n addToWishlistLabel,\n badgeLabel,\n availabilityLabel,\n skuLabel,\n overviewLabel,\n specsLabel,\n featuresLabel,\n specificationsLabel,\n galleryLabel,\n photosLabel,\n saveLabel,\n savedLabel,\n shareLabel,\n basedOnReviewsLabel,\n foundHelpfulLabel,\n ofCounterLabel,\n }}\n />\n )\n }\n\n return (\n <StandardPresentation\n product={product}\n selection={selection}\n images={images}\n activeImage={activeImage}\n selectedImage={selectedImage}\n onSelectImage={setSelectedImage}\n onSelectVariant={onSelectVariant}\n onQuantityChange={onQuantityChange}\n onAddToCart={handleAddToCart}\n isWishlisted={isWishlisted}\n onToggleWishlist={onToggleWishlist ? handleToggleWishlist : undefined}\n rating={rating}\n deliveryEstimate={deliveryEstimate}\n shipping={shipping}\n formatPrice={formatPrice}\n hasRealImages={hasRealImages}\n labels={{\n sizesLabel,\n variantLabel,\n reviewsLabel,\n addToCartLabel,\n outOfStockLabel,\n unavailablePriceLabel,\n selectVariantLabel,\n quantityLabel,\n deliveryEstimateLabel,\n shippingLabel,\n removeFromWishlistLabel,\n addToWishlistLabel,\n }}\n />\n )\n}\n\ninterface SharedLabels {\n reviewsLabel: string\n addToCartLabel: string\n outOfStockLabel: string\n unavailablePriceLabel: string\n selectVariantLabel: string\n quantityLabel: string\n removeFromWishlistLabel: string\n addToWishlistLabel: string\n}\n\nfunction VariantSelector({\n product,\n selectedVariantId,\n onSelectVariant,\n sizesLabel,\n variantLabel,\n outOfStockLabel,\n}: {\n product: ProductDetailProduct\n selectedVariantId?: string | null\n onSelectVariant?: (variantId: string) => void\n sizesLabel: string\n variantLabel: string\n outOfStockLabel: string\n}) {\n if (product.variants.length === 0) return null\n return (\n <div className='flex flex-col gap-2'>\n <h3 className='font-bold'>{sizesLabel}</h3>\n <div className='flex flex-wrap gap-3'>\n {product.variants.map(variant => {\n const isSelected = variant.id === selectedVariantId\n return (\n <Button\n key={variant.id}\n variant={isSelected ? 'default' : 'outline'}\n onClick={onSelectVariant ? () => onSelectVariant(variant.id) : undefined}\n disabled={!variant.availableForSale}\n aria-pressed={isSelected}\n className='h-9 cursor-pointer rounded-full px-4'\n >\n {variantLabelOf(variant)}\n {!variant.availableForSale ? (\n <span className='text-muted-foreground ms-2 text-xs font-normal'>{outOfStockLabel}</span>\n ) : null}\n </Button>\n )\n })}\n </div>\n {variantLabel ? (\n <span className='sr-only'>{variantLabel}</span>\n ) : null}\n </div>\n )\n}\n\nfunction QuantityStepper({\n quantityValue,\n quantityLabel,\n onQuantityChange,\n}: {\n quantityValue: number\n quantityLabel: string\n onQuantityChange: (quantity: number) => void\n}) {\n return (\n <div className='flex flex-col gap-2'>\n <h3 className='font-bold'>{quantityLabel}</h3>\n <div className='border-border flex w-fit items-center rounded-md border'>\n <Button\n type='button'\n variant='ghost'\n size='icon'\n className='size-9 rounded-r-none'\n aria-label={`${quantityLabel} -1`}\n onClick={() => onQuantityChange(Math.max(1, quantityValue - 1))}\n disabled={quantityValue <= 1}\n >\n <Minus />\n </Button>\n <span className='w-10 text-center text-sm tabular-nums'>{quantityValue}</span>\n <Button\n type='button'\n variant='ghost'\n size='icon'\n className='size-9 rounded-l-none'\n aria-label={`${quantityLabel} +1`}\n onClick={() => onQuantityChange(quantityValue + 1)}\n >\n <Plus />\n </Button>\n </div>\n </div>\n )\n}\n\nfunction WishlistButton({\n isWishlisted,\n disabled,\n onToggleWishlist,\n removeFromWishlistLabel,\n addToWishlistLabel,\n className,\n}: {\n isWishlisted: boolean\n disabled: boolean\n onToggleWishlist?: () => void\n removeFromWishlistLabel: string\n addToWishlistLabel: string\n className?: string\n}) {\n // Purpose-gated: no wishlist handler means no wishlist affordance. A visible\n // button that does nothing is a dead control, so it is not rendered at all.\n if (!onToggleWishlist) return null\n return (\n <Button\n variant='outline'\n size='icon'\n className={cn('cursor-pointer', className)}\n disabled={disabled}\n onClick={onToggleWishlist}\n aria-pressed={isWishlisted}\n aria-label={isWishlisted ? removeFromWishlistLabel : addToWishlistLabel}\n >\n <ReactionToggle\n active={isWishlisted}\n icon={Heart}\n iconClassName='size-5'\n activeColorClassName='text-primary'\n />\n </Button>\n )\n}\n\nfunction StandardPresentation({\n product,\n selection,\n images,\n activeImage,\n selectedImage,\n onSelectImage,\n onSelectVariant,\n onQuantityChange,\n onAddToCart,\n isWishlisted,\n onToggleWishlist,\n rating,\n deliveryEstimate,\n shipping,\n formatPrice,\n hasRealImages,\n labels,\n}: {\n product: ProductDetailProduct\n selection: ResolvedSelection\n images: string[]\n activeImage: string\n selectedImage: number\n onSelectImage: (index: number) => void\n onSelectVariant?: (variantId: string) => void\n onQuantityChange?: (quantity: number) => void\n onAddToCart: () => void\n isWishlisted: boolean\n onToggleWishlist?: () => void\n rating?: ProductOverviewRating\n deliveryEstimate?: string\n shipping?: Money\n formatPrice?: (money: Money) => string\n hasRealImages: boolean\n labels: SharedLabels & {\n sizesLabel: string\n variantLabel: string\n deliveryEstimateLabel: string\n shippingLabel: string\n }\n}) {\n const { selectedVariant, selectedPrice, selectedCompareAt, priceAvailable, compareAtAvailable, canPurchase, quantityValue } =\n selection\n\n return (\n <div>\n <section className='@container mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n <div className='grid grid-cols-1 gap-6 py-4 lg:grid-cols-2 lg:gap-8 lg:py-6 xl:grid-cols-3 xl:gap-12 xl:py-12'>\n <div className='flex flex-col justify-between gap-6 lg:gap-8'>\n <div className='flex flex-col gap-2 lg:gap-4'>\n {product.vendor ? (\n <span className='text-sm font-semibold tracking-wide uppercase'>{product.vendor}</span>\n ) : null}\n <h2 className='text-xl font-bold tracking-tight text-balance lg:text-3xl'>{product.title}</h2>\n {product.description ? (\n <p className='text-muted-foreground text-balance'>{product.description}</p>\n ) : null}\n\n {selectedVariant ? (\n priceAvailable ? (\n <p className='text-2xl font-bold tracking-tight'>\n {formatMoney(selectedPrice, formatPrice)}\n {compareAtAvailable ? (\n <span className='text-muted-foreground ms-2 text-base font-normal line-through'>\n {formatMoney(selectedCompareAt, formatPrice)}\n </span>\n ) : null}\n </p>\n ) : (\n <p className='text-muted-foreground text-sm'>{labels.unavailablePriceLabel}</p>\n )\n ) : (\n <p className='text-muted-foreground text-sm'>{labels.selectVariantLabel}</p>\n )}\n </div>\n\n {hasRealImages ? (\n <div className='flex flex-wrap gap-4'>\n {images.map((url, index) => (\n <button\n key={`${product.id}:image:${index}`}\n type='button'\n onClick={() => onSelectImage(index)}\n aria-label={`${product.title} ${index + 1}`}\n aria-pressed={selectedImage === index}\n className={cn(\n 'ring-offset-background size-16 cursor-pointer overflow-hidden rounded-sm ring-offset-2 transition-all lg:size-18',\n selectedImage === index && 'ring-foreground ring-2',\n )}\n >\n <img src={url || undefined} alt='' className='size-full object-cover' />\n </button>\n ))}\n </div>\n ) : null}\n </div>\n\n <div className='row-span-2 row-start-1 lg:col-start-2'>\n <div className='bg-muted aspect-square w-full overflow-hidden rounded-lg'>\n <img src={activeImage || undefined} alt={product.title} className='h-90 w-full object-cover' />\n </div>\n </div>\n\n <div className='flex flex-col gap-6 lg:gap-10'>\n <VariantSelector\n product={product}\n selectedVariantId={selectedVariant?.id}\n onSelectVariant={onSelectVariant}\n sizesLabel={labels.sizesLabel}\n variantLabel={labels.variantLabel}\n outOfStockLabel={labels.outOfStockLabel}\n />\n\n {selectedVariant && selectedVariant.selectedOptions.length > 0 ? (\n <p className='text-muted-foreground text-sm'>\n {selectedVariant.selectedOptions\n .map((option: SelectedOption) => `${option.name}: ${option.value}`)\n .join(' · ')}\n </p>\n ) : null}\n\n {rating ? (\n <div className='flex flex-col gap-2'>\n <h3 className='font-bold'>{labels.reviewsLabel}</h3>\n <div className='flex items-center gap-2'>\n <div className='flex gap-1' aria-hidden='true'>\n {[0, 1, 2, 3, 4].map(index => (\n <Star\n key={index}\n className='text-foreground size-5'\n fill={index < rating.value ? 'currentColor' : 'none'}\n />\n ))}\n </div>\n <span className='text-muted-foreground text-sm tabular-nums'>\n {`${rating.value} (${rating.count})`}\n </span>\n </div>\n </div>\n ) : null}\n\n {onQuantityChange ? (\n <QuantityStepper\n quantityValue={quantityValue}\n quantityLabel={labels.quantityLabel}\n onQuantityChange={onQuantityChange}\n />\n ) : null}\n\n {deliveryEstimate || shipping ? (\n <dl className='text-muted-foreground flex flex-col gap-1 text-sm'>\n {deliveryEstimate ? (\n <div className='flex gap-2'>\n <dt>{labels.deliveryEstimateLabel}</dt>\n <dd className='text-foreground'>{deliveryEstimate}</dd>\n </div>\n ) : null}\n {isAvailableMoney(shipping) ? (\n <div className='flex gap-2'>\n <dt>{labels.shippingLabel}</dt>\n <dd className='text-foreground'>{formatMoney(shipping, formatPrice)}</dd>\n </div>\n ) : null}\n </dl>\n ) : null}\n\n <div className='flex gap-4'>\n <Button\n className='h-10 flex-1 cursor-pointer rounded-full px-8'\n size='lg'\n disabled={!canPurchase}\n onClick={onAddToCart}\n >\n {labels.addToCartLabel}\n </Button>\n <WishlistButton\n isWishlisted={isWishlisted}\n disabled={!selectedVariant}\n onToggleWishlist={onToggleWishlist}\n removeFromWishlistLabel={labels.removeFromWishlistLabel}\n addToWishlistLabel={labels.addToWishlistLabel}\n className='size-9 rounded-full'\n />\n </div>\n </div>\n </div>\n </section>\n </div>\n )\n}\n\nfunction GalleryPresentation({\n product,\n selection,\n images,\n activeImage,\n selectedImage,\n onSelectImage,\n setCarouselApi,\n onSelectVariant,\n onQuantityChange,\n onAddToCart,\n isWishlisted,\n onToggleWishlist,\n rating,\n formatPrice,\n labels,\n}: {\n product: ProductDetailProduct\n selection: ResolvedSelection\n images: string[]\n activeImage: string\n selectedImage: number\n onSelectImage: (index: number) => void\n setCarouselApi: (api: CarouselApi | undefined) => void\n onSelectVariant?: (variantId: string) => void\n onQuantityChange?: (quantity: number) => void\n onAddToCart: () => void\n isWishlisted: boolean\n onToggleWishlist?: () => void\n rating?: ProductOverviewRating\n formatPrice?: (money: Money) => string\n labels: SharedLabels & { freeDeliveryLabel?: string }\n}) {\n const { selectedVariant, selectedPrice, selectedCompareAt, priceAvailable, compareAtAvailable, canPurchase, quantityValue } =\n selection\n\n return (\n <section className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n <div className='grid grid-cols-1 gap-8 py-4 md:py-6 lg:grid-cols-2 lg:py-12'>\n <div className='flex flex-col gap-4'>\n <Carousel setApi={setCarouselApi} className='w-full'>\n <CarouselContent>\n {images.map((url, index) => (\n <CarouselItem key={`${product.id}:carousel:${index}`}>\n <div className='bg-muted flex h-130 w-full items-center justify-center overflow-hidden rounded-lg'>\n <img src={url || undefined} alt={`${product.title} ${index + 1}`} className='h-full w-full object-cover' />\n </div>\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n\n <div className='flex flex-wrap gap-4'>\n {images.map((url, index) => (\n <button\n type='button'\n key={`${product.id}:thumb:${index}`}\n onClick={() => onSelectImage(index)}\n aria-label={`Mostrar imagen ${index + 1} de ${product.title}`}\n aria-pressed={selectedImage === index}\n className='aspect-square size-16 cursor-pointer'\n >\n <img\n src={url || undefined}\n alt={`${product.title} ${index + 1}`}\n className={cn(\n 'size-full cursor-pointer rounded-md object-cover ring-offset-2 transition-all',\n selectedImage === index ? 'ring-foreground ring-2' : '',\n )}\n />\n </button>\n ))}\n </div>\n </div>\n\n <div className='flex flex-col gap-6'>\n <header className='flex flex-col gap-4'>\n <div className='flex items-center'>\n <Button variant='ghost' size='icon' className='bg-primary size-6 scale-75 cursor-pointer rounded-full'>\n <Check className='text-primary-foreground size-4' />\n </Button>\n {product.vendor ? <span className='ms-2 font-medium'>{product.vendor}</span> : null}\n {selectedVariant?.sku ? (\n <span className='text-muted-foreground ms-auto'>{selectedVariant.sku}</span>\n ) : null}\n </div>\n <h1 className='text-xl font-bold text-balance xl:text-3xl'>{product.title}</h1>\n\n {rating ? (\n <div className='flex items-center gap-2'>\n <div className='flex'>\n {[0, 1, 2, 3, 4].map(i => (\n <Star\n key={i}\n className={cn(\n 'size-5',\n i < rating.value ? 'fill-foreground text-foreground' : 'text-muted-foreground',\n )}\n />\n ))}\n </div>\n <span className='text-muted-foreground text-sm'>\n {rating.count} {labels.reviewsLabel}\n </span>\n </div>\n ) : null}\n </header>\n\n {selectedVariant ? (\n priceAvailable ? (\n <p className='text-4xl font-bold'>\n {formatMoney(selectedPrice, formatPrice)}\n {compareAtAvailable ? (\n <span className='text-muted-foreground ms-2 text-xl font-normal line-through'>\n {formatMoney(selectedCompareAt, formatPrice)}\n </span>\n ) : null}\n </p>\n ) : (\n <p className='text-muted-foreground text-sm'>{labels.unavailablePriceLabel}</p>\n )\n ) : (\n <p className='text-muted-foreground text-sm'>{labels.selectVariantLabel}</p>\n )}\n\n <VariantSelector\n product={product}\n selectedVariantId={selectedVariant?.id}\n onSelectVariant={onSelectVariant}\n sizesLabel={labels.selectVariantLabel}\n variantLabel=''\n outOfStockLabel={labels.outOfStockLabel}\n />\n\n {onQuantityChange ? (\n <QuantityStepper\n quantityValue={quantityValue}\n quantityLabel={labels.quantityLabel}\n onQuantityChange={onQuantityChange}\n />\n ) : null}\n\n <div className='flex gap-4'>\n <Button className='h-12 flex-1 cursor-pointer rounded-md' size='lg' disabled={!canPurchase} onClick={onAddToCart}>\n <ShoppingCart />\n {labels.addToCartLabel}\n </Button>\n <WishlistButton\n isWishlisted={isWishlisted}\n disabled={!selectedVariant}\n onToggleWishlist={onToggleWishlist}\n removeFromWishlistLabel={labels.removeFromWishlistLabel}\n addToWishlistLabel={labels.addToWishlistLabel}\n className='border-input size-12 rounded-md'\n />\n </div>\n\n {labels.freeDeliveryLabel ? (\n <div className='text-muted-foreground flex items-center justify-center gap-2 text-sm'>\n <Truck className='size-4' />\n <span>{labels.freeDeliveryLabel}</span>\n </div>\n ) : null}\n </div>\n </div>\n </section>\n )\n}\n\nfunction RichPresentation({\n product,\n selection,\n images,\n selectedImage,\n onSelectImage,\n onSelectVariant,\n onQuantityChange,\n onAddToCart,\n isWishlisted,\n onToggleWishlist,\n onShare,\n rating,\n formatPrice,\n specifications,\n features,\n reviews,\n labels,\n}: {\n product: ProductDetailProduct\n selection: ResolvedSelection\n images: string[]\n selectedImage: number\n onSelectImage: (index: number) => void\n onSelectVariant?: (variantId: string) => void\n onQuantityChange?: (quantity: number) => void\n onAddToCart: () => void\n isWishlisted: boolean\n onToggleWishlist?: () => void\n onShare?: () => void\n rating?: ProductOverviewRating\n formatPrice?: (money: Money) => string\n specifications?: Record<string, string>\n features?: string[]\n reviews?: ProductOverviewReview[]\n labels: SharedLabels & {\n badgeLabel?: string\n availabilityLabel: string\n skuLabel: string\n overviewLabel: string\n specsLabel: string\n featuresLabel: string\n specificationsLabel: string\n galleryLabel: string\n photosLabel: string\n saveLabel: string\n savedLabel: string\n shareLabel: string\n basedOnReviewsLabel: string\n foundHelpfulLabel: string\n ofCounterLabel: string\n }\n}) {\n const { selectedVariant, selectedPrice, selectedCompareAt, priceAvailable, compareAtAvailable, canPurchase, quantityValue } =\n selection\n\n const featureList = features && features.length > 0 ? features : undefined\n const specEntries = specifications ? Object.entries(specifications) : []\n const hasSpecs = specEntries.length > 0\n const hasReviews = Boolean(reviews && reviews.length > 0)\n const hasGallery = images.length > 1\n const hasTabs = Boolean(featureList) || hasSpecs || hasReviews || hasGallery\n const reviewCount = reviews?.length ?? 0\n\n // The initial tab is computed once and frozen: Base UI's uncontrolled Tabs warns if\n // `defaultValue` changes after mount, and this expression tracks the data-derived tab set\n // (which changes when optional props like `specifications` appear or disappear).\n const [defaultTab] = useState(() =>\n featureList ? 'overview' : hasSpecs ? 'specs' : hasReviews ? 'reviews' : 'gallery',\n )\n\n return (\n <section className='py-12'>\n <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n <div className='grid gap-12 lg:grid-cols-2'>\n <ProductOverviewGallery\n images={images}\n title={product.title}\n badgeLabel={labels.badgeLabel}\n selectedImage={selectedImage}\n onSelectImage={onSelectImage}\n photosLabel={labels.photosLabel}\n />\n\n <div className='flex flex-col gap-8'>\n <div>\n <h1 className='text-3xl leading-tight font-bold text-balance'>{product.title}</h1>\n <div className='mt-4 flex flex-wrap items-center gap-4'>\n {rating ? (\n <div className='flex items-center gap-2'>\n <div className='flex'>\n {[0, 1, 2, 3, 4].map(i => (\n <Star\n key={i}\n className={cn(\n 'size-4',\n i < rating.value ? 'fill-foreground text-foreground' : 'text-muted-foreground',\n )}\n />\n ))}\n </div>\n <span className='text-sm font-medium'>{rating.value}</span>\n </div>\n ) : null}\n {hasReviews ? (\n <span className='text-muted-foreground text-sm'>\n {reviewCount} {labels.reviewsLabel.toLowerCase()}\n </span>\n ) : null}\n {selectedVariant?.sku ? (\n <>\n <Separator orientation='vertical' className='h-4' />\n <span className='text-muted-foreground text-sm'>\n {labels.skuLabel}: {selectedVariant.sku}\n </span>\n </>\n ) : null}\n </div>\n </div>\n\n {selectedVariant ? (\n priceAvailable ? (\n <div className='flex items-baseline gap-3'>\n <span className='text-4xl font-bold'>{formatMoney(selectedPrice, formatPrice)}</span>\n {compareAtAvailable ? (\n <span className='text-muted-foreground text-xl line-through'>\n {formatMoney(selectedCompareAt, formatPrice)}\n </span>\n ) : null}\n </div>\n ) : (\n <p className='text-muted-foreground text-sm'>{labels.unavailablePriceLabel}</p>\n )\n ) : (\n <p className='text-muted-foreground text-sm'>{labels.selectVariantLabel}</p>\n )}\n\n {selectedVariant?.availableForSale ? (\n <div className='bg-success/10 inline-flex w-fit items-center gap-2 rounded-full px-3 py-1.5'>\n <div className='bg-success size-2 rounded-full' />\n <span className='text-success text-sm font-medium'>{labels.availabilityLabel}</span>\n </div>\n ) : null}\n\n {product.description ? <p className='text-muted-foreground leading-relaxed'>{product.description}</p> : null}\n\n <VariantSelector\n product={product}\n selectedVariantId={selectedVariant?.id}\n onSelectVariant={onSelectVariant}\n sizesLabel={labels.selectVariantLabel}\n variantLabel=''\n outOfStockLabel={labels.outOfStockLabel}\n />\n\n {onQuantityChange ? (\n <QuantityStepper\n quantityValue={quantityValue}\n quantityLabel={labels.quantityLabel}\n onQuantityChange={onQuantityChange}\n />\n ) : null}\n\n <div className='flex flex-col gap-4'>\n <Button size='lg' className='h-12 w-full cursor-pointer gap-2' disabled={!canPurchase} onClick={onAddToCart}>\n <ShoppingCart />\n {labels.addToCartLabel}\n </Button>\n <div className='flex gap-3'>\n <WishlistButton\n isWishlisted={isWishlisted}\n disabled={!selectedVariant}\n onToggleWishlist={onToggleWishlist}\n removeFromWishlistLabel={labels.removeFromWishlistLabel}\n addToWishlistLabel={labels.addToWishlistLabel}\n className='h-12 flex-1 gap-2 rounded-md'\n />\n {onShare ? (\n <Button\n variant='outline'\n size='lg'\n className='h-12 flex-1 cursor-pointer gap-2'\n onClick={onShare}\n >\n <Share2 />\n {labels.shareLabel}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n\n {hasTabs ? (\n <div className='mt-16'>\n <ProductOverviewTabs defaultValue={defaultTab} className='w-full'>\n <ProductOverviewTabsList className='bg-muted/50 relative grid !h-12 w-full grid-cols-4 rounded-xl p-1'>\n <ProductOverviewTabsIndicator />\n {featureList ? (\n <ProductOverviewTabsTrigger\n value='overview'\n className='z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent'\n >\n <Info className='size-4 shrink-0' />\n <span className='hidden sm:inline'>{labels.overviewLabel}</span>\n </ProductOverviewTabsTrigger>\n ) : null}\n {hasSpecs ? (\n <ProductOverviewTabsTrigger\n value='specs'\n className='z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent'\n >\n <Package className='size-4 shrink-0' />\n <span className='hidden sm:inline'>{labels.specsLabel}</span>\n </ProductOverviewTabsTrigger>\n ) : null}\n {hasReviews ? (\n <ProductOverviewTabsTrigger\n value='reviews'\n className='z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent'\n >\n <MessageSquare className='size-4 shrink-0' />\n <span className='hidden sm:inline'>\n {labels.reviewsLabel} ({reviewCount})\n </span>\n </ProductOverviewTabsTrigger>\n ) : null}\n {hasGallery ? (\n <ProductOverviewTabsTrigger\n value='gallery'\n className='z-10 h-10 gap-2 text-sm font-medium data-active:bg-transparent data-active:shadow-none dark:data-active:bg-transparent'\n >\n <Camera className='size-4 shrink-0' />\n <span className='hidden sm:inline'>{labels.galleryLabel}</span>\n </ProductOverviewTabsTrigger>\n ) : null}\n </ProductOverviewTabsList>\n {featureList ? (\n <ProductOverviewTabsContentFade value='overview' className='mt-8'>\n <Card className='border shadow-none'>\n <CardContent className='p-8 py-0'>\n <h3 className='mb-6 text-xl font-semibold text-balance'>{labels.featuresLabel}</h3>\n <div className='grid gap-4 sm:grid-cols-2'>\n {featureList.map(feature => (\n <div key={feature} className='group flex items-center gap-3'>\n <div className='bg-primary/20 size-2 rounded-full transition-colors' />\n <span className='text-sm'>{feature}</span>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n </ProductOverviewTabsContentFade>\n ) : null}\n {hasSpecs ? (\n <ProductOverviewTabsContentFade value='specs' className='mt-8'>\n <Card className='border shadow-none'>\n <CardContent className='p-8 py-0'>\n <h3 className='mb-6 text-xl font-semibold text-balance'>{labels.specificationsLabel}</h3>\n <div className='flex flex-col gap-4'>\n {specEntries.map(([key, value]) => (\n <div\n key={key}\n className='border-muted grid grid-cols-1 gap-2 border-b py-3 last:border-b-0 md:grid-cols-3 md:gap-4'\n >\n <span className='text-muted-foreground text-sm font-medium'>{key}</span>\n <span className='col-span-1 text-sm md:col-span-2'>{value}</span>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n </ProductOverviewTabsContentFade>\n ) : null}\n {hasReviews && reviews ? (\n <ProductOverviewTabsContentFade value='reviews' className='mt-8'>\n <ProductOverviewReviewsTab\n rating={rating?.value ?? 0}\n reviews={reviews}\n basedOnReviewsLabel={labels.basedOnReviewsLabel}\n foundHelpfulLabel={labels.foundHelpfulLabel}\n />\n </ProductOverviewTabsContentFade>\n ) : null}\n {hasGallery ? (\n <ProductOverviewTabsContentFade value='gallery' className='mt-8'>\n <ProductOverviewLightboxTab\n images={images}\n title={product.title}\n galleryLabel={labels.galleryLabel}\n ofCounterLabel={labels.ofCounterLabel}\n />\n </ProductOverviewTabsContentFade>\n ) : null}\n </ProductOverviewTabs>\n </div>\n ) : null}\n </div>\n </section>\n )\n}\n\nexport type { ProductOverviewReview }\nexport { ProductOverviewGallery, ProductOverviewLightboxTab, ProductOverviewReviewsTab }\n"],"mappings":";AAgRM,SAgtBY,UAhtBZ,KAoJM,YApJN;AA9QN,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,OAAO,OAAO,MAAM,eAAe,OAAO,SAAS,MAAM,QAAQ,cAAc,MAAM,aAAa;AAEnH,SAAS,cAAc;AACvB,SAAS,MAAM,mBAAmB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AACnB,SAAS,8BAA8B;AACvC,SAAS,aAAa,wBAAwB;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,UAAU,iBAAiB,oBAAsC;AAC1E,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAC3C,SAAS,iCAA6D;AACtE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA6GA,SAAS,eAAe,SAAuC;AACpE,MAAI,QAAQ,MAAM,KAAK,MAAM,GAAI,QAAO,QAAQ;AAChD,SAAO,QAAQ,gBAAgB,IAAI,YAAU,OAAO,KAAK,EAAE,KAAK,KAAK;AACvE;AAOO,SAAS,wBACd,SACA,UACgD;AAChD,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO;AAAA,IACL,WAAW,QAAQ;AAAA,IACnB,UAAU,OAAO,aAAa,YAAY,WAAW,IAAI,WAAW;AAAA,EACtE;AACF;AAEO,SAAS,cAAc,SAA+B,UAA4B;AACvF,QAAM,SAAS,QAAQ,OACpB,IAAI,WAAS,MAAM,GAAG,EACtB,OAAO,CAAC,QAAuB,OAAO,QAAQ,YAAY,IAAI,KAAK,MAAM,EAAE;AAC9E,MAAI,OAAO,SAAS,EAAG,QAAO;AAC9B,QAAM,WAAW,QAAQ,eAAe;AACxC,MAAI,OAAO,aAAa,YAAY,SAAS,KAAK,MAAM,GAAI,QAAO,CAAC,QAAQ;AAC5E,SAAO,CAAC,QAAQ;AAClB;AAae,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,eAAe;AAAA,EACf,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,wBAAwB;AAAA,EACxB,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB;AAAA,EACA,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB;AACF,GAAyB;AACvB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AACpD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB;AAE5D,YAAU,MAAM;AACd,QAAI,CAAC,YAAa;AAClB,gBAAY,SAAS,aAAa;AAClC,UAAM,eAAe,MAAM,iBAAiB,YAAY,mBAAmB,CAAC;AAC5E,gBAAY,GAAG,UAAU,YAAY;AACrC,WAAO,MAAM;AACX,kBAAY,IAAI,UAAU,YAAY;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,QAAM,kBACJ,qBAAqB,OACjB,QAAQ,SAAS,KAAK,aAAW,QAAQ,OAAO,iBAAiB,KAAK,OACtE;AAEN,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,iBAAiB,iBAAiB,aAAa;AACrD,QAAM,qBAAqB,iBAAiB,iBAAiB;AAC7D,QAAM,cAAc,QAAQ,iBAAiB,gBAAgB,KAAK;AAClE,QAAM,gBAAgB,YAAY;AAClC,QAAM,aAAa,wBAAwB,iBAAiB,aAAa;AAEzE,QAAM,SAAS,cAAc,SAAS,aAAa;AACnD,QAAM,gBAAgB,OAAO,CAAC,MAAM,iBAAiB,QAAQ,iBAAiB;AAC9E,QAAM,cAAc,OAAO,KAAK,IAAI,eAAe,OAAO,SAAS,CAAC,CAAC;AAErE,QAAM,YAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,eAAe,WAAY,aAAY,WAAW,WAAW,WAAW,QAAQ;AAAA,EACtF;AACA,QAAM,uBAAuB,MAAM;AACjC,QAAI,CAAC,mBAAmB,CAAC,iBAAkB;AAC3C,qBAAiB,gBAAgB,IAAI,CAAC,YAAY;AAAA,EACpD;AAEA,MAAI,iBAAiB,WAAW;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA,kBAAkB,mBAAmB,uBAAuB;AAAA,QAC5D;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,MAAI,iBAAiB,QAAQ;AAC3B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA,kBAAkB,mBAAmB,uBAAuB;AAAA,QAC5D;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,kBAAkB,mBAAmB,uBAAuB;AAAA,MAC5D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAaA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,MAAI,QAAQ,SAAS,WAAW,EAAG,QAAO;AAC1C,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,QAAG,WAAU,aAAa,sBAAW;AAAA,IACtC,oBAAC,SAAI,WAAU,wBACZ,kBAAQ,SAAS,IAAI,aAAW;AAC/B,YAAM,aAAa,QAAQ,OAAO;AAClC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,aAAa,YAAY;AAAA,UAClC,SAAS,kBAAkB,MAAM,gBAAgB,QAAQ,EAAE,IAAI;AAAA,UAC/D,UAAU,CAAC,QAAQ;AAAA,UACnB,gBAAc;AAAA,UACd,WAAU;AAAA,UAET;AAAA,2BAAe,OAAO;AAAA,YACtB,CAAC,QAAQ,mBACR,oBAAC,UAAK,WAAU,kDAAkD,2BAAgB,IAChF;AAAA;AAAA;AAAA,QAVC,QAAQ;AAAA,MAWf;AAAA,IAEJ,CAAC,GACH;AAAA,IACC,eACC,oBAAC,UAAK,WAAU,WAAW,wBAAa,IACtC;AAAA,KACN;AAEJ;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,QAAG,WAAU,aAAa,yBAAc;AAAA,IACzC,qBAAC,SAAI,WAAU,2DACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAY,GAAG,aAAa;AAAA,UAC5B,SAAS,MAAM,iBAAiB,KAAK,IAAI,GAAG,gBAAgB,CAAC,CAAC;AAAA,UAC9D,UAAU,iBAAiB;AAAA,UAE3B,8BAAC,SAAM;AAAA;AAAA,MACT;AAAA,MACA,oBAAC,UAAK,WAAU,yCAAyC,yBAAc;AAAA,MACvE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAY,GAAG,aAAa;AAAA,UAC5B,SAAS,MAAM,iBAAiB,gBAAgB,CAAC;AAAA,UAEjD,8BAAC,QAAK;AAAA;AAAA,MACR;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AAGD,MAAI,CAAC,iBAAkB,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACzC;AAAA,MACA,SAAS;AAAA,MACT,gBAAc;AAAA,MACd,cAAY,eAAe,0BAA0B;AAAA,MAErD;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,eAAc;AAAA,UACd,sBAAqB;AAAA;AAAA,MACvB;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAuBG;AACD,QAAM,EAAE,iBAAiB,eAAe,mBAAmB,gBAAgB,oBAAoB,aAAa,cAAc,IACxH;AAEF,SACE,oBAAC,SACC,8BAAC,aAAQ,WAAU,4DACjB,+BAAC,SAAI,WAAU,iGACb;AAAA,yBAAC,SAAI,WAAU,gDACb;AAAA,2BAAC,SAAI,WAAU,gCACZ;AAAA,gBAAQ,SACP,oBAAC,UAAK,WAAU,iDAAiD,kBAAQ,QAAO,IAC9E;AAAA,QACJ,oBAAC,QAAG,WAAU,6DAA6D,kBAAQ,OAAM;AAAA,QACxF,QAAQ,cACP,oBAAC,OAAE,WAAU,sCAAsC,kBAAQ,aAAY,IACrE;AAAA,QAEH,kBACC,iBACE,qBAAC,OAAE,WAAU,qCACV;AAAA,sBAAY,eAAe,WAAW;AAAA,UACtC,qBACC,oBAAC,UAAK,WAAU,iEACb,sBAAY,mBAAmB,WAAW,GAC7C,IACE;AAAA,WACN,IAEA,oBAAC,OAAE,WAAU,iCAAiC,iBAAO,uBAAsB,IAG7E,oBAAC,OAAE,WAAU,iCAAiC,iBAAO,oBAAmB;AAAA,SAE5E;AAAA,MAEC,gBACC,oBAAC,SAAI,WAAU,wBACZ,iBAAO,IAAI,CAAC,KAAK,UAChB;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,cAAc,KAAK;AAAA,UAClC,cAAY,GAAG,QAAQ,KAAK,IAAI,QAAQ,CAAC;AAAA,UACzC,gBAAc,kBAAkB;AAAA,UAChC,WAAW;AAAA,YACT;AAAA,YACA,kBAAkB,SAAS;AAAA,UAC7B;AAAA,UAEA,8BAAC,SAAI,KAAK,OAAO,QAAW,KAAI,IAAG,WAAU,0BAAyB;AAAA;AAAA,QAVjE,GAAG,QAAQ,EAAE,UAAU,KAAK;AAAA,MAWnC,CACD,GACH,IACE;AAAA,OACN;AAAA,IAEA,oBAAC,SAAI,WAAU,yCACb,8BAAC,SAAI,WAAU,4DACb,8BAAC,SAAI,KAAK,eAAe,QAAW,KAAK,QAAQ,OAAO,WAAU,4BAA2B,GAC/F,GACF;AAAA,IAEA,qBAAC,SAAI,WAAU,iCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,mBAAmB,iBAAiB;AAAA,UACpC;AAAA,UACA,YAAY,OAAO;AAAA,UACnB,cAAc,OAAO;AAAA,UACrB,iBAAiB,OAAO;AAAA;AAAA,MAC1B;AAAA,MAEC,mBAAmB,gBAAgB,gBAAgB,SAAS,IAC3D,oBAAC,OAAE,WAAU,iCACV,0BAAgB,gBACd,IAAI,CAAC,WAA2B,GAAG,OAAO,IAAI,KAAK,OAAO,KAAK,EAAE,EACjE,KAAK,QAAK,GACf,IACE;AAAA,MAEH,SACC,qBAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,QAAG,WAAU,aAAa,iBAAO,cAAa;AAAA,QAC/C,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,cAAa,eAAY,QACrC,WAAC,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,WACnB;AAAA,YAAC;AAAA;AAAA,cAEC,WAAU;AAAA,cACV,MAAM,QAAQ,OAAO,QAAQ,iBAAiB;AAAA;AAAA,YAFzC;AAAA,UAGP,CACD,GACH;AAAA,UACA,oBAAC,UAAK,WAAU,8CACb,aAAG,OAAO,KAAK,KAAK,OAAO,KAAK,KACnC;AAAA,WACF;AAAA,SACF,IACE;AAAA,MAEH,mBACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,eAAe,OAAO;AAAA,UACtB;AAAA;AAAA,MACF,IACE;AAAA,MAEH,oBAAoB,WACnB,qBAAC,QAAG,WAAU,qDACX;AAAA,2BACC,qBAAC,SAAI,WAAU,cACb;AAAA,8BAAC,QAAI,iBAAO,uBAAsB;AAAA,UAClC,oBAAC,QAAG,WAAU,mBAAmB,4BAAiB;AAAA,WACpD,IACE;AAAA,QACH,iBAAiB,QAAQ,IACxB,qBAAC,SAAI,WAAU,cACb;AAAA,8BAAC,QAAI,iBAAO,eAAc;AAAA,UAC1B,oBAAC,QAAG,WAAU,mBAAmB,sBAAY,UAAU,WAAW,GAAE;AAAA,WACtE,IACE;AAAA,SACN,IACE;AAAA,MAEJ,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YAER,iBAAO;AAAA;AAAA,QACV;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,UAAU,CAAC;AAAA,YACX;AAAA,YACA,yBAAyB,OAAO;AAAA,YAChC,oBAAoB,OAAO;AAAA,YAC3B,WAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA,OACF;AAAA,KACF,GACF,GACF;AAEJ;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAgBG;AACD,QAAM,EAAE,iBAAiB,eAAe,mBAAmB,gBAAgB,oBAAoB,aAAa,cAAc,IACxH;AAEF,SACE,oBAAC,aAAQ,WAAU,iDACjB,+BAAC,SAAI,WAAU,+DACb;AAAA,yBAAC,SAAI,WAAU,uBACb;AAAA,0BAAC,YAAS,QAAQ,gBAAgB,WAAU,UAC1C,8BAAC,mBACE,iBAAO,IAAI,CAAC,KAAK,UAChB,oBAAC,gBACC,8BAAC,SAAI,WAAU,qFACb,8BAAC,SAAI,KAAK,OAAO,QAAW,KAAK,GAAG,QAAQ,KAAK,IAAI,QAAQ,CAAC,IAAI,WAAU,8BAA6B,GAC3G,KAHiB,GAAG,QAAQ,EAAE,aAAa,KAAK,EAIlD,CACD,GACH,GACF;AAAA,MAEA,oBAAC,SAAI,WAAU,wBACZ,iBAAO,IAAI,CAAC,KAAK,UAChB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UAEL,SAAS,MAAM,cAAc,KAAK;AAAA,UAClC,cAAY,kBAAkB,QAAQ,CAAC,OAAO,QAAQ,KAAK;AAAA,UAC3D,gBAAc,kBAAkB;AAAA,UAChC,WAAU;AAAA,UAEV;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,OAAO;AAAA,cACZ,KAAK,GAAG,QAAQ,KAAK,IAAI,QAAQ,CAAC;AAAA,cAClC,WAAW;AAAA,gBACT;AAAA,gBACA,kBAAkB,QAAQ,2BAA2B;AAAA,cACvD;AAAA;AAAA,UACF;AAAA;AAAA,QAbK,GAAG,QAAQ,EAAE,UAAU,KAAK;AAAA,MAcnC,CACD,GACH;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,2BAAC,YAAO,WAAU,uBAChB;AAAA,6BAAC,SAAI,WAAU,qBACb;AAAA,8BAAC,UAAO,SAAQ,SAAQ,MAAK,QAAO,WAAU,0DAC5C,8BAAC,SAAM,WAAU,kCAAiC,GACpD;AAAA,UACC,QAAQ,SAAS,oBAAC,UAAK,WAAU,oBAAoB,kBAAQ,QAAO,IAAU;AAAA,UAC9E,iBAAiB,MAChB,oBAAC,UAAK,WAAU,iCAAiC,0BAAgB,KAAI,IACnE;AAAA,WACN;AAAA,QACA,oBAAC,QAAG,WAAU,8CAA8C,kBAAQ,OAAM;AAAA,QAEzE,SACC,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,QACZ,WAAC,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,OACnB;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,gBACT;AAAA,gBACA,IAAI,OAAO,QAAQ,oCAAoC;AAAA,cACzD;AAAA;AAAA,YAJK;AAAA,UAKP,CACD,GACH;AAAA,UACA,qBAAC,UAAK,WAAU,iCACb;AAAA,mBAAO;AAAA,YAAM;AAAA,YAAE,OAAO;AAAA,aACzB;AAAA,WACF,IACE;AAAA,SACN;AAAA,MAEC,kBACC,iBACE,qBAAC,OAAE,WAAU,sBACV;AAAA,oBAAY,eAAe,WAAW;AAAA,QACtC,qBACC,oBAAC,UAAK,WAAU,+DACb,sBAAY,mBAAmB,WAAW,GAC7C,IACE;AAAA,SACN,IAEA,oBAAC,OAAE,WAAU,iCAAiC,iBAAO,uBAAsB,IAG7E,oBAAC,OAAE,WAAU,iCAAiC,iBAAO,oBAAmB;AAAA,MAG1E;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,mBAAmB,iBAAiB;AAAA,UACpC;AAAA,UACA,YAAY,OAAO;AAAA,UACnB,cAAa;AAAA,UACb,iBAAiB,OAAO;AAAA;AAAA,MAC1B;AAAA,MAEC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,eAAe,OAAO;AAAA,UACtB;AAAA;AAAA,MACF,IACE;AAAA,MAEJ,qBAAC,SAAI,WAAU,cACb;AAAA,6BAAC,UAAO,WAAU,yCAAwC,MAAK,MAAK,UAAU,CAAC,aAAa,SAAS,aACnG;AAAA,8BAAC,gBAAa;AAAA,UACb,OAAO;AAAA,WACV;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,UAAU,CAAC;AAAA,YACX;AAAA,YACA,yBAAyB,OAAO;AAAA,YAChC,oBAAoB,OAAO;AAAA,YAC3B,WAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA,MAEC,OAAO,oBACN,qBAAC,SAAI,WAAU,wEACb;AAAA,4BAAC,SAAM,WAAU,UAAS;AAAA,QAC1B,oBAAC,UAAM,iBAAO,mBAAkB;AAAA,SAClC,IACE;AAAA,OACN;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAkCG;AACD,QAAM,EAAE,iBAAiB,eAAe,mBAAmB,gBAAgB,oBAAoB,aAAa,cAAc,IACxH;AAEF,QAAM,cAAc,YAAY,SAAS,SAAS,IAAI,WAAW;AACjE,QAAM,cAAc,iBAAiB,OAAO,QAAQ,cAAc,IAAI,CAAC;AACvE,QAAM,WAAW,YAAY,SAAS;AACtC,QAAM,aAAa,QAAQ,WAAW,QAAQ,SAAS,CAAC;AACxD,QAAM,aAAa,OAAO,SAAS;AACnC,QAAM,UAAU,QAAQ,WAAW,KAAK,YAAY,cAAc;AAClE,QAAM,cAAc,SAAS,UAAU;AAKvC,QAAM,CAAC,UAAU,IAAI;AAAA,IAAS,MAC5B,cAAc,aAAa,WAAW,UAAU,aAAa,YAAY;AAAA,EAC3E;AAEA,SACE,oBAAC,aAAQ,WAAU,SACjB,+BAAC,SAAI,WAAU,iDACb;AAAA,yBAAC,SAAI,WAAU,8BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO,QAAQ;AAAA,UACf,YAAY,OAAO;AAAA,UACnB;AAAA,UACA;AAAA,UACA,aAAa,OAAO;AAAA;AAAA,MACtB;AAAA,MAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,6BAAC,SACC;AAAA,8BAAC,QAAG,WAAU,iDAAiD,kBAAQ,OAAM;AAAA,UAC7E,qBAAC,SAAI,WAAU,0CACZ;AAAA,qBACC,qBAAC,SAAI,WAAU,2BACb;AAAA,kCAAC,SAAI,WAAU,QACZ,WAAC,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,OACnB;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAW;AAAA,oBACT;AAAA,oBACA,IAAI,OAAO,QAAQ,oCAAoC;AAAA,kBACzD;AAAA;AAAA,gBAJK;AAAA,cAKP,CACD,GACH;AAAA,cACA,oBAAC,UAAK,WAAU,uBAAuB,iBAAO,OAAM;AAAA,eACtD,IACE;AAAA,YACH,aACC,qBAAC,UAAK,WAAU,iCACb;AAAA;AAAA,cAAY;AAAA,cAAE,OAAO,aAAa,YAAY;AAAA,eACjD,IACE;AAAA,YACH,iBAAiB,MAChB,iCACE;AAAA,kCAAC,aAAU,aAAY,YAAW,WAAU,OAAM;AAAA,cAClD,qBAAC,UAAK,WAAU,iCACb;AAAA,uBAAO;AAAA,gBAAS;AAAA,gBAAG,gBAAgB;AAAA,iBACtC;AAAA,eACF,IACE;AAAA,aACN;AAAA,WACF;AAAA,QAEC,kBACC,iBACE,qBAAC,SAAI,WAAU,6BACb;AAAA,8BAAC,UAAK,WAAU,sBAAsB,sBAAY,eAAe,WAAW,GAAE;AAAA,UAC7E,qBACC,oBAAC,UAAK,WAAU,8CACb,sBAAY,mBAAmB,WAAW,GAC7C,IACE;AAAA,WACN,IAEA,oBAAC,OAAE,WAAU,iCAAiC,iBAAO,uBAAsB,IAG7E,oBAAC,OAAE,WAAU,iCAAiC,iBAAO,oBAAmB;AAAA,QAGzE,iBAAiB,mBAChB,qBAAC,SAAI,WAAU,+EACb;AAAA,8BAAC,SAAI,WAAU,kCAAiC;AAAA,UAChD,oBAAC,UAAK,WAAU,oCAAoC,iBAAO,mBAAkB;AAAA,WAC/E,IACE;AAAA,QAEH,QAAQ,cAAc,oBAAC,OAAE,WAAU,yCAAyC,kBAAQ,aAAY,IAAO;AAAA,QAExG;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,mBAAmB,iBAAiB;AAAA,YACpC;AAAA,YACA,YAAY,OAAO;AAAA,YACnB,cAAa;AAAA,YACb,iBAAiB,OAAO;AAAA;AAAA,QAC1B;AAAA,QAEC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,eAAe,OAAO;AAAA,YACtB;AAAA;AAAA,QACF,IACE;AAAA,QAEJ,qBAAC,SAAI,WAAU,uBACb;AAAA,+BAAC,UAAO,MAAK,MAAK,WAAU,oCAAmC,UAAU,CAAC,aAAa,SAAS,aAC9F;AAAA,gCAAC,gBAAa;AAAA,YACb,OAAO;AAAA,aACV;AAAA,UACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,UAAU,CAAC;AAAA,gBACX;AAAA,gBACA,yBAAyB,OAAO;AAAA,gBAChC,oBAAoB,OAAO;AAAA,gBAC3B,WAAU;AAAA;AAAA,YACZ;AAAA,YACC,UACC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS;AAAA,gBAET;AAAA,sCAAC,UAAO;AAAA,kBACP,OAAO;AAAA;AAAA;AAAA,YACV,IACE;AAAA,aACN;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,IAEC,UACC,oBAAC,SAAI,WAAU,SACb,+BAAC,uBAAoB,cAAc,YAAY,WAAU,UACvD;AAAA,2BAAC,2BAAwB,WAAU,qEACjC;AAAA,4BAAC,gCAA6B;AAAA,QAC7B,cACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,kCAAC,QAAK,WAAU,mBAAkB;AAAA,cAClC,oBAAC,UAAK,WAAU,oBAAoB,iBAAO,eAAc;AAAA;AAAA;AAAA,QAC3D,IACE;AAAA,QACH,WACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,kCAAC,WAAQ,WAAU,mBAAkB;AAAA,cACrC,oBAAC,UAAK,WAAU,oBAAoB,iBAAO,YAAW;AAAA;AAAA;AAAA,QACxD,IACE;AAAA,QACH,aACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,kCAAC,iBAAc,WAAU,mBAAkB;AAAA,cAC3C,qBAAC,UAAK,WAAU,oBACb;AAAA,uBAAO;AAAA,gBAAa;AAAA,gBAAG;AAAA,gBAAY;AAAA,iBACtC;AAAA;AAAA;AAAA,QACF,IACE;AAAA,QACH,aACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,kCAAC,UAAO,WAAU,mBAAkB;AAAA,cACpC,oBAAC,UAAK,WAAU,oBAAoB,iBAAO,cAAa;AAAA;AAAA;AAAA,QAC1D,IACE;AAAA,SACN;AAAA,MACC,cACC,oBAAC,kCAA+B,OAAM,YAAW,WAAU,QACzD,8BAAC,QAAK,WAAU,sBACd,+BAAC,eAAY,WAAU,YACrB;AAAA,4BAAC,QAAG,WAAU,2CAA2C,iBAAO,eAAc;AAAA,QAC9E,oBAAC,SAAI,WAAU,6BACZ,sBAAY,IAAI,aACf,qBAAC,SAAkB,WAAU,iCAC3B;AAAA,8BAAC,SAAI,WAAU,uDAAsD;AAAA,UACrE,oBAAC,UAAK,WAAU,WAAW,mBAAQ;AAAA,aAF3B,OAGV,CACD,GACH;AAAA,SACF,GACF,GACF,IACE;AAAA,MACH,WACC,oBAAC,kCAA+B,OAAM,SAAQ,WAAU,QACtD,8BAAC,QAAK,WAAU,sBACd,+BAAC,eAAY,WAAU,YACrB;AAAA,4BAAC,QAAG,WAAU,2CAA2C,iBAAO,qBAAoB;AAAA,QACpF,oBAAC,SAAI,WAAU,uBACZ,sBAAY,IAAI,CAAC,CAAC,KAAK,KAAK,MAC3B;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA,kCAAC,UAAK,WAAU,6CAA6C,eAAI;AAAA,cACjE,oBAAC,UAAK,WAAU,oCAAoC,iBAAM;AAAA;AAAA;AAAA,UAJrD;AAAA,QAKP,CACD,GACH;AAAA,SACF,GACF,GACF,IACE;AAAA,MACH,cAAc,UACb,oBAAC,kCAA+B,OAAM,WAAU,WAAU,QACxD;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ,QAAQ,SAAS;AAAA,UACzB;AAAA,UACA,qBAAqB,OAAO;AAAA,UAC5B,mBAAmB,OAAO;AAAA;AAAA,MAC5B,GACF,IACE;AAAA,MACH,aACC,oBAAC,kCAA+B,OAAM,WAAU,WAAU,QACxD;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO,QAAQ;AAAA,UACf,cAAc,OAAO;AAAA,UACrB,gBAAgB,OAAO;AAAA;AAAA,MACzB,GACF,IACE;AAAA,OACN,GACF,IACE;AAAA,KACN,GACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/product-overview/product-quick-view-card.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type { QuickViewProduct } from './product-quick-view';
+/**
+ * One product in the grid, and the thing a quick view is meant to keep you inside of.
+ *
+ * The whole card is the button. A card that carries a separate "Quick view" link has two targets
+ * for one intention, and on a touch screen the hover-revealed one is a target that never appears
+ * at all - so the control is drawn on hover and focus as an *affordance*, while the press area
+ * is the entire card at every input type.
+ */
+export declare function ProductQuickViewCard({ product, isActive, onOpen, }: {
+    product: QuickViewProduct;
+    /** Whether this is the product currently open in the quick view. */
+    isActive: boolean;
+    onOpen: () => void;
+}): import("react").JSX.Element;
+export default ProductQuickViewCard;
+//# sourceMappingURL=product-quick-view-card.d.ts.map

package/dist/blocks/e-commerce/product-overview/product-quick-view-card.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"product-quick-view-card.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/product-overview/product-quick-view-card.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAI5D;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE;IACD,OAAO,EAAE,gBAAgB,CAAA;IACzB,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,+BAuGA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/blocks/e-commerce/product-overview/product-quick-view-card.js ADDED Viewed

@@ -0,0 +1,123 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var product_quick_view_card_exports = {};
+__export(product_quick_view_card_exports, {
+  ProductQuickViewCard: () => ProductQuickViewCard,
+  default: () => product_quick_view_card_default
+});
+module.exports = __toCommonJS(product_quick_view_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_badge = require("../../../ui/badge.js");
+var import_card = require("../../../ui/card.js");
+var import_utils = require("../../../lib/utils.js");
+const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+function ProductQuickViewCard({
+  product,
+  isActive,
+  onOpen
+}) {
+  const swatches = product.variants.find((variant) => variant.options.some((option) => option.swatch))?.options ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_card.Card,
+    {
+      className: (0, import_utils.cn)(
+        "group/card relative gap-0 overflow-hidden py-0 transition-shadow",
+        // The mark that survives behind the dialog: when the reader closes it, the card they
+        // were looking at is the one still lit, so the grid tells them where they got to.
+        isActive ? "ring-primary ring-2" : "hover:shadow-lg"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-muted relative aspect-4/5 w-full overflow-hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: product.image || void 0,
+              alt: product.imageAlt,
+              className: "size-full object-cover transition-transform duration-500 ease-out group-hover/card:scale-[1.03]",
+              loading: "lazy",
+              decoding: "async"
+            }
+          ),
+          product.compareAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { className: "absolute top-3 left-3 rounded-full", children: `${Math.round((1 - product.price / product.compareAt) * 100)}% de descuento` }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: (0, import_utils.cn)(
+                "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center p-3",
+                "translate-y-2 opacity-0 transition-[opacity,transform] duration-200 ease-out",
+                "group-hover/card:translate-y-0 group-hover/card:opacity-100",
+                "group-has-focus-visible/card:translate-y-0 group-has-focus-visible/card:opacity-100"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "bg-background/90 text-foreground ring-border flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium ring-1 backdrop-blur", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Eye, { className: "size-4" }),
+                "Vista r\xE1pida"
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onOpen,
+            "aria-haspopup": "dialog",
+            className: "focus-visible:ring-ring/50 absolute inset-0 z-10 cursor-pointer rounded-xl outline-none focus-visible:ring-[3px]",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: `Vista r\xE1pida: ${product.name}` })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "flex flex-col gap-1 p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-base font-medium", children: product.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "shrink-0 text-base font-medium tabular-nums", children: money.format(product.price) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: product.tagline }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-muted-foreground flex items-center gap-1.5 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Star, { className: "size-3.5 fill-foreground text-foreground", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-foreground font-medium tabular-nums", children: product.rating }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tabular-nums", children: [
+                "(",
+                product.reviewCount,
+                ")"
+              ] })
+            ] }),
+            swatches.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex items-center gap-1", children: swatches.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ring-border size-3 rounded-full ring-1",
+                style: { backgroundColor: option.swatch }
+              },
+              option.value
+            )) }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var product_quick_view_card_default = ProductQuickViewCard;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProductQuickViewCard
+});
+//# sourceMappingURL=product-quick-view-card.js.map

package/dist/blocks/e-commerce/product-overview/product-quick-view-card.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/blocks/e-commerce/product-overview/product-quick-view-card.tsx"],"sourcesContent":["'use client'\n\nimport { Eye, Star } from 'lucide-react'\n\nimport { Badge } from '../../../ui/badge'\nimport { Card, CardContent } from '../../../ui/card'\nimport { cn } from '../../../lib/utils'\n\nimport type { QuickViewProduct } from './product-quick-view'\n\nconst money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })\n\n/**\n * One product in the grid, and the thing a quick view is meant to keep you inside of.\n *\n * The whole card is the button. A card that carries a separate \"Quick view\" link has two targets\n * for one intention, and on a touch screen the hover-revealed one is a target that never appears\n * at all - so the control is drawn on hover and focus as an *affordance*, while the press area\n * is the entire card at every input type.\n */\nexport function ProductQuickViewCard({\n product,\n isActive,\n onOpen,\n}: {\n product: QuickViewProduct\n /** Whether this is the product currently open in the quick view. */\n isActive: boolean\n onOpen: () => void\n}) {\n const swatches = product.variants.find(variant => variant.options.some(option => option.swatch))?.options ?? []\n\n return (\n <Card\n className={cn(\n 'group/card relative gap-0 overflow-hidden py-0 transition-shadow',\n // The mark that survives behind the dialog: when the reader closes it, the card they\n // were looking at is the one still lit, so the grid tells them where they got to.\n isActive ? 'ring-primary ring-2' : 'hover:shadow-lg'\n )}\n >\n <div className='bg-muted relative aspect-4/5 w-full overflow-hidden'>\n <img\n src={product.image || undefined}\n alt={product.imageAlt}\n className='size-full object-cover transition-transform duration-500 ease-out group-hover/card:scale-[1.03]'\n loading='lazy'\n decoding='async'\n />\n\n {product.compareAt ? (\n <Badge className='absolute top-3 left-3 rounded-full'>\n {`${Math.round((1 - product.price / product.compareAt) * 100)}% de descuento`}\n </Badge>\n ) : null}\n\n {/*\n Drawn on hover and focus, and never the thing that has to be hit. `pointer-events-none`\n keeps every press on the card's own trigger underneath, so there is exactly one target\n however the reader is pointing at it.\n */}\n <div\n aria-hidden='true'\n className={cn(\n 'pointer-events-none absolute inset-x-0 bottom-0 flex justify-center p-3',\n 'translate-y-2 opacity-0 transition-[opacity,transform] duration-200 ease-out',\n 'group-hover/card:translate-y-0 group-hover/card:opacity-100',\n 'group-has-focus-visible/card:translate-y-0 group-has-focus-visible/card:opacity-100'\n )}\n >\n <span className='bg-background/90 text-foreground ring-border flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium ring-1 backdrop-blur'>\n <Eye className='size-4' />\n Vista rápida\n </span>\n </div>\n </div>\n\n {/*\n The card's one interactive element, and it covers the card.\n\n A stretched link would leave only the title actually pressable: the picture sits over a\n pseudo-element and swallows every click on the image and on the Quick view pill. A real\n element in the DOM, on top, with an explicit z-index, is unambiguous at every input type.\n It is empty and carries an accessible name, so the price and rating underneath are not\n read as part of the button's label.\n */}\n <button\n type='button'\n onClick={onOpen}\n aria-haspopup='dialog'\n className='focus-visible:ring-ring/50 absolute inset-0 z-10 cursor-pointer rounded-xl outline-none focus-visible:ring-[3px]'\n >\n <span className='sr-only'>{`Vista rápida: ${product.name}`}</span>\n </button>\n\n <CardContent className='flex flex-col gap-1 p-4'>\n <div className='flex items-start justify-between gap-3'>\n <p className='text-base font-medium'>{product.name}</p>\n\n <p className='shrink-0 text-base font-medium tabular-nums'>{money.format(product.price)}</p>\n </div>\n\n <p className='text-muted-foreground text-sm'>{product.tagline}</p>\n\n <div className='mt-2 flex items-center justify-between gap-3'>\n <p className='text-muted-foreground flex items-center gap-1.5 text-xs'>\n {/* Foreground token per theming contract, never the only carrier of the rating. */}\n <Star className='size-3.5 fill-foreground text-foreground' aria-hidden='true' />\n <span className='text-foreground font-medium tabular-nums'>{product.rating}</span>\n <span className='tabular-nums'>({product.reviewCount})</span>\n </p>\n\n {swatches.length > 0 ? (\n <span className='flex items-center gap-1'>\n {/*\n Finish colours are product data, so they stay literal rather than tokenised, and\n they are decoration here - the same information is in words inside the panel.\n */}\n {swatches.map(option => (\n <span\n key={option.value}\n aria-hidden='true'\n className='ring-border size-3 rounded-full ring-1'\n style={{ backgroundColor: option.swatch }}\n />\n ))}\n </span>\n ) : null}\n </div>\n </CardContent>\n </Card>\n )\n}\n\nexport default ProductQuickViewCard"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CQ;AAxCR,0BAA0B;AAE1B,mBAAsB;AACtB,kBAAkC;AAClC,mBAAmB;AAInB,MAAM,QAAQ,IAAI,KAAK,aAAa,SAAS,EAAE,OAAO,YAAY,UAAU,OAAO,uBAAuB,EAAE,CAAC;AAUtG,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,WAAW,QAAQ,SAAS,KAAK,aAAW,QAAQ,QAAQ,KAAK,YAAU,OAAO,MAAM,CAAC,GAAG,WAAW,CAAC;AAE9G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA,WAAW,wBAAwB;AAAA,MACrC;AAAA,MAEA;AAAA,qDAAC,SAAI,WAAU,uDACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,QAAQ,SAAS;AAAA,cACtB,KAAK,QAAQ;AAAA,cACb,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,UAAS;AAAA;AAAA,UACX;AAAA,UAEC,QAAQ,YACP,4CAAC,sBAAM,WAAU,sCACd,aAAG,KAAK,OAAO,IAAI,QAAQ,QAAQ,QAAQ,aAAa,GAAG,CAAC,kBAC/D,IACE;AAAA,UAOJ;AAAA,YAAC;AAAA;AAAA,cACC,eAAY;AAAA,cACZ,eAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAEA,uDAAC,UAAK,WAAU,0IACd;AAAA,4DAAC,2BAAI,WAAU,UAAS;AAAA,gBAAE;AAAA,iBAE5B;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QAWA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,iBAAc;AAAA,YACd,WAAU;AAAA,YAEV,sDAAC,UAAK,WAAU,WAAW,8BAAiB,QAAQ,IAAI,IAAG;AAAA;AAAA,QAC7D;AAAA,QAEA,6CAAC,2BAAY,WAAU,2BACrB;AAAA,uDAAC,SAAI,WAAU,0CACb;AAAA,wDAAC,OAAE,WAAU,yBAAyB,kBAAQ,MAAK;AAAA,YAEnD,4CAAC,OAAE,WAAU,+CAA+C,gBAAM,OAAO,QAAQ,KAAK,GAAE;AAAA,aAC1F;AAAA,UAEA,4CAAC,OAAE,WAAU,iCAAiC,kBAAQ,SAAQ;AAAA,UAE9D,6CAAC,SAAI,WAAU,gDACb;AAAA,yDAAC,OAAE,WAAU,2DAEX;AAAA,0DAAC,4BAAK,WAAU,4CAA2C,eAAY,QAAO;AAAA,cAC9E,4CAAC,UAAK,WAAU,4CAA4C,kBAAQ,QAAO;AAAA,cAC3E,6CAAC,UAAK,WAAU,gBAAe;AAAA;AAAA,gBAAE,QAAQ;AAAA,gBAAY;AAAA,iBAAC;AAAA,eACxD;AAAA,YAEC,SAAS,SAAS,IACjB,4CAAC,UAAK,WAAU,2BAKb,mBAAS,IAAI,YACZ;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiB,OAAO,OAAO;AAAA;AAAA,cAHnC,OAAO;AAAA,YAId,CACD,GACH,IACE;AAAA,aACN;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,kCAAQ;","names":[]}

package/dist/blocks/e-commerce/product-overview/product-quick-view-card.mjs ADDED Viewed

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye, Star } from "lucide-react";
+import { Badge } from "../../../ui/badge.mjs";
+import { Card, CardContent } from "../../../ui/card.mjs";
+import { cn } from "../../../lib/utils.mjs";
+const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+function ProductQuickViewCard({
+  product,
+  isActive,
+  onOpen
+}) {
+  const swatches = product.variants.find((variant) => variant.options.some((option) => option.swatch))?.options ?? [];
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "group/card relative gap-0 overflow-hidden py-0 transition-shadow",
+        // The mark that survives behind the dialog: when the reader closes it, the card they
+        // were looking at is the one still lit, so the grid tells them where they got to.
+        isActive ? "ring-primary ring-2" : "hover:shadow-lg"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-muted relative aspect-4/5 w-full overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: product.image || void 0,
+              alt: product.imageAlt,
+              className: "size-full object-cover transition-transform duration-500 ease-out group-hover/card:scale-[1.03]",
+              loading: "lazy",
+              decoding: "async"
+            }
+          ),
+          product.compareAt ? /* @__PURE__ */ jsx(Badge, { className: "absolute top-3 left-3 rounded-full", children: `${Math.round((1 - product.price / product.compareAt) * 100)}% de descuento` }) : null,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "pointer-events-none absolute inset-x-0 bottom-0 flex justify-center p-3",
+                "translate-y-2 opacity-0 transition-[opacity,transform] duration-200 ease-out",
+                "group-hover/card:translate-y-0 group-hover/card:opacity-100",
+                "group-has-focus-visible/card:translate-y-0 group-has-focus-visible/card:opacity-100"
+              ),
+              children: /* @__PURE__ */ jsxs("span", { className: "bg-background/90 text-foreground ring-border flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium ring-1 backdrop-blur", children: [
+                /* @__PURE__ */ jsx(Eye, { className: "size-4" }),
+                "Vista r\xE1pida"
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onOpen,
+            "aria-haspopup": "dialog",
+            className: "focus-visible:ring-ring/50 absolute inset-0 z-10 cursor-pointer rounded-xl outline-none focus-visible:ring-[3px]",
+            children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: `Vista r\xE1pida: ${product.name}` })
+          }
+        ),
+        /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-1 p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-base font-medium", children: product.name }),
+            /* @__PURE__ */ jsx("p", { className: "shrink-0 text-base font-medium tabular-nums", children: money.format(product.price) })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: product.tagline }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground flex items-center gap-1.5 text-xs", children: [
+              /* @__PURE__ */ jsx(Star, { className: "size-3.5 fill-foreground text-foreground", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium tabular-nums", children: product.rating }),
+              /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+                "(",
+                product.reviewCount,
+                ")"
+              ] })
+            ] }),
+            swatches.length > 0 ? /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1", children: swatches.map((option) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ring-border size-3 rounded-full ring-1",
+                style: { backgroundColor: option.swatch }
+              },
+              option.value
+            )) }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var product_quick_view_card_default = ProductQuickViewCard;
+export {
+  ProductQuickViewCard,
+  product_quick_view_card_default as default
+};
+//# sourceMappingURL=product-quick-view-card.mjs.map

package/dist/blocks/e-commerce/product-overview/product-quick-view-card.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/blocks/e-commerce/product-overview/product-quick-view-card.tsx"],"sourcesContent":["'use client'\n\nimport { Eye, Star } from 'lucide-react'\n\nimport { Badge } from '../../../ui/badge'\nimport { Card, CardContent } from '../../../ui/card'\nimport { cn } from '../../../lib/utils'\n\nimport type { QuickViewProduct } from './product-quick-view'\n\nconst money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })\n\n/**\n * One product in the grid, and the thing a quick view is meant to keep you inside of.\n *\n * The whole card is the button. A card that carries a separate \"Quick view\" link has two targets\n * for one intention, and on a touch screen the hover-revealed one is a target that never appears\n * at all - so the control is drawn on hover and focus as an *affordance*, while the press area\n * is the entire card at every input type.\n */\nexport function ProductQuickViewCard({\n product,\n isActive,\n onOpen,\n}: {\n product: QuickViewProduct\n /** Whether this is the product currently open in the quick view. */\n isActive: boolean\n onOpen: () => void\n}) {\n const swatches = product.variants.find(variant => variant.options.some(option => option.swatch))?.options ?? []\n\n return (\n <Card\n className={cn(\n 'group/card relative gap-0 overflow-hidden py-0 transition-shadow',\n // The mark that survives behind the dialog: when the reader closes it, the card they\n // were looking at is the one still lit, so the grid tells them where they got to.\n isActive ? 'ring-primary ring-2' : 'hover:shadow-lg'\n )}\n >\n <div className='bg-muted relative aspect-4/5 w-full overflow-hidden'>\n <img\n src={product.image || undefined}\n alt={product.imageAlt}\n className='size-full object-cover transition-transform duration-500 ease-out group-hover/card:scale-[1.03]'\n loading='lazy'\n decoding='async'\n />\n\n {product.compareAt ? (\n <Badge className='absolute top-3 left-3 rounded-full'>\n {`${Math.round((1 - product.price / product.compareAt) * 100)}% de descuento`}\n </Badge>\n ) : null}\n\n {/*\n Drawn on hover and focus, and never the thing that has to be hit. `pointer-events-none`\n keeps every press on the card's own trigger underneath, so there is exactly one target\n however the reader is pointing at it.\n */}\n <div\n aria-hidden='true'\n className={cn(\n 'pointer-events-none absolute inset-x-0 bottom-0 flex justify-center p-3',\n 'translate-y-2 opacity-0 transition-[opacity,transform] duration-200 ease-out',\n 'group-hover/card:translate-y-0 group-hover/card:opacity-100',\n 'group-has-focus-visible/card:translate-y-0 group-has-focus-visible/card:opacity-100'\n )}\n >\n <span className='bg-background/90 text-foreground ring-border flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium ring-1 backdrop-blur'>\n <Eye className='size-4' />\n Vista rápida\n </span>\n </div>\n </div>\n\n {/*\n The card's one interactive element, and it covers the card.\n\n A stretched link would leave only the title actually pressable: the picture sits over a\n pseudo-element and swallows every click on the image and on the Quick view pill. A real\n element in the DOM, on top, with an explicit z-index, is unambiguous at every input type.\n It is empty and carries an accessible name, so the price and rating underneath are not\n read as part of the button's label.\n */}\n <button\n type='button'\n onClick={onOpen}\n aria-haspopup='dialog'\n className='focus-visible:ring-ring/50 absolute inset-0 z-10 cursor-pointer rounded-xl outline-none focus-visible:ring-[3px]'\n >\n <span className='sr-only'>{`Vista rápida: ${product.name}`}</span>\n </button>\n\n <CardContent className='flex flex-col gap-1 p-4'>\n <div className='flex items-start justify-between gap-3'>\n <p className='text-base font-medium'>{product.name}</p>\n\n <p className='shrink-0 text-base font-medium tabular-nums'>{money.format(product.price)}</p>\n </div>\n\n <p className='text-muted-foreground text-sm'>{product.tagline}</p>\n\n <div className='mt-2 flex items-center justify-between gap-3'>\n <p className='text-muted-foreground flex items-center gap-1.5 text-xs'>\n {/* Foreground token per theming contract, never the only carrier of the rating. */}\n <Star className='size-3.5 fill-foreground text-foreground' aria-hidden='true' />\n <span className='text-foreground font-medium tabular-nums'>{product.rating}</span>\n <span className='tabular-nums'>({product.reviewCount})</span>\n </p>\n\n {swatches.length > 0 ? (\n <span className='flex items-center gap-1'>\n {/*\n Finish colours are product data, so they stay literal rather than tokenised, and\n they are decoration here - the same information is in words inside the panel.\n */}\n {swatches.map(option => (\n <span\n key={option.value}\n aria-hidden='true'\n className='ring-border size-3 rounded-full ring-1'\n style={{ backgroundColor: option.swatch }}\n />\n ))}\n </span>\n ) : null}\n </div>\n </CardContent>\n </Card>\n )\n}\n\nexport default ProductQuickViewCard"],"mappings":";AA0CQ,cA4BE,YA5BF;AAxCR,SAAS,KAAK,YAAY;AAE1B,SAAS,aAAa;AACtB,SAAS,MAAM,mBAAmB;AAClC,SAAS,UAAU;AAInB,MAAM,QAAQ,IAAI,KAAK,aAAa,SAAS,EAAE,OAAO,YAAY,UAAU,OAAO,uBAAuB,EAAE,CAAC;AAUtG,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,WAAW,QAAQ,SAAS,KAAK,aAAW,QAAQ,QAAQ,KAAK,YAAU,OAAO,MAAM,CAAC,GAAG,WAAW,CAAC;AAE9G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA,WAAW,wBAAwB;AAAA,MACrC;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,uDACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,QAAQ,SAAS;AAAA,cACtB,KAAK,QAAQ;AAAA,cACb,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,UAAS;AAAA;AAAA,UACX;AAAA,UAEC,QAAQ,YACP,oBAAC,SAAM,WAAU,sCACd,aAAG,KAAK,OAAO,IAAI,QAAQ,QAAQ,QAAQ,aAAa,GAAG,CAAC,kBAC/D,IACE;AAAA,UAOJ;AAAA,YAAC;AAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAEA,+BAAC,UAAK,WAAU,0IACd;AAAA,oCAAC,OAAI,WAAU,UAAS;AAAA,gBAAE;AAAA,iBAE5B;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QAWA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,iBAAc;AAAA,YACd,WAAU;AAAA,YAEV,8BAAC,UAAK,WAAU,WAAW,8BAAiB,QAAQ,IAAI,IAAG;AAAA;AAAA,QAC7D;AAAA,QAEA,qBAAC,eAAY,WAAU,2BACrB;AAAA,+BAAC,SAAI,WAAU,0CACb;AAAA,gCAAC,OAAE,WAAU,yBAAyB,kBAAQ,MAAK;AAAA,YAEnD,oBAAC,OAAE,WAAU,+CAA+C,gBAAM,OAAO,QAAQ,KAAK,GAAE;AAAA,aAC1F;AAAA,UAEA,oBAAC,OAAE,WAAU,iCAAiC,kBAAQ,SAAQ;AAAA,UAE9D,qBAAC,SAAI,WAAU,gDACb;AAAA,iCAAC,OAAE,WAAU,2DAEX;AAAA,kCAAC,QAAK,WAAU,4CAA2C,eAAY,QAAO;AAAA,cAC9E,oBAAC,UAAK,WAAU,4CAA4C,kBAAQ,QAAO;AAAA,cAC3E,qBAAC,UAAK,WAAU,gBAAe;AAAA;AAAA,gBAAE,QAAQ;AAAA,gBAAY;AAAA,iBAAC;AAAA,eACxD;AAAA,YAEC,SAAS,SAAS,IACjB,oBAAC,UAAK,WAAU,2BAKb,mBAAS,IAAI,YACZ;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACV,OAAO,EAAE,iBAAiB,OAAO,OAAO;AAAA;AAAA,cAHnC,OAAO;AAAA,YAId,CACD,GACH,IACE;AAAA,aACN;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,kCAAQ;","names":[]}

package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import type { QuickViewProduct } from './product-quick-view';
+/**
+ * The panel a quick view opens, and the reason the pattern exists.
+ *
+ * A quick view is not a small product page. It is a promise that the reader will not lose the
+ * grid, so this one keeps the whole catalogue reachable from inside: the strip under the picture
+ * is the other products, not other angles of this one. Choosing from it re-dresses the panel
+ * around a new product, the grid behind marks where the reader has got to, and closing returns
+ * them to a grid they never actually left.
+ */
+export declare function ProductQuickViewDialog({ products, activeIndex, onActiveIndexChange, onClose, onAddToCart, }: {
+    products: QuickViewProduct[];
+    /** Which product is open, or `null` when the dialog is closed. */
+    activeIndex: number | null;
+    onActiveIndexChange: (index: number) => void;
+    onClose: () => void;
+    onAddToCart?: (product: QuickViewProduct, quantity: number, selection: Record<string, string>) => void;
+}): import("react").JSX.Element | null;
+export default ProductQuickViewDialog;
+//# sourceMappingURL=product-quick-view-dialog.d.ts.map

package/dist/blocks/e-commerce/product-overview/product-quick-view-dialog.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"product-quick-view-dialog.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/product-overview/product-quick-view-dialog.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAyB5D;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,OAAO,EACP,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,gBAAgB,EAAE,CAAA;IAC5B,kEAAkE;IAClE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,CACZ,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC9B,IAAI,CAAA;CACV,sCAgUA;AAED,eAAe,sBAAsB,CAAA"}