@arroyavecommerce/theme-kinetic 0.2.0

package/src/catalog/product-card.test.tsx

@@ -0,0 +1,221 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import type { HttpTypes } from "@medusajs/types"
+import {
+  TarjetaProducto,
+  porcentajeDescuento,
+  estaAgotado,
+  esNuevo,
+  quickAddRequiereSeleccion,
+} from "./product-card"
+import { mockCtx } from "../test/mock-ctx"
+
+const codigoFuente = readFileSync(fileURLToPath(new URL("./product-card.tsx", import.meta.url)), "utf-8")
+
+const producto = {
+  id: "prod_1",
+  title: "Sneaker Runner Blanco",
+  handle: "sneaker-runner-blanco",
+  thumbnail: null,
+  variants: [
+    {
+      id: "var_1",
+      title: "M",
+      calculated_price: { calculated_amount: 289900, currency_code: "cop" },
+      inventory_quantity: 5,
+      allow_backorder: false,
+    },
+  ],
+} as unknown as HttpTypes.StoreProduct
+
+describe("TarjetaProducto", () => {
+  it("renderiza el titulo del producto y un enlace a /products/:handle", () => {
+    const html = renderToStaticMarkup(
+      <TarjetaProducto product={producto} card="minimal" ctx={mockCtx()} />
+    )
+
+    expect(html).toContain(producto.title)
+    expect(html).toContain(`href="/products/${producto.handle}"`)
+  })
+
+  it('card "quick-add" muestra un boton de añadir', () => {
+    const html = renderToStaticMarkup(
+      <TarjetaProducto product={producto} card="quick-add" ctx={mockCtx()} />
+    )
+
+    expect(html).toContain("Añadir")
+  })
+
+  it("no emite <img> ni <a> directos: todo pasa por ctx.componentes", () => {
+    expect(codigoFuente).not.toMatch(/<img[\s>]/)
+    expect(codigoFuente).not.toMatch(/<a[\s>]/)
+  })
+})
+
+/** Producto con precio original > precio actual (descuento derivable del calculated_price). */
+const productoConDescuento = {
+  id: "prod_desc",
+  title: "Chaqueta Rebajada",
+  handle: "chaqueta-rebajada",
+  thumbnail: null,
+  variants: [
+    {
+      id: "var_d",
+      title: "M",
+      calculated_price: { calculated_amount: 200000, original_amount: 250000, currency_code: "cop" },
+      inventory_quantity: 5,
+      allow_backorder: false,
+    },
+  ],
+} as unknown as HttpTypes.StoreProduct
+
+const productoAgotado = {
+  id: "prod_ago",
+  title: "Gorra Sold Out",
+  handle: "gorra-sold-out",
+  thumbnail: null,
+  variants: [
+    { id: "va", title: "S", calculated_price: { calculated_amount: 50000, currency_code: "cop" }, inventory_quantity: 0, allow_backorder: false },
+    { id: "vb", title: "M", calculated_price: { calculated_amount: 50000, currency_code: "cop" }, inventory_quantity: 0, allow_backorder: false },
+  ],
+} as unknown as HttpTypes.StoreProduct
+
+const productoConDosImagenes = {
+  id: "prod_img",
+  title: "Vestido Doble Foto",
+  handle: "vestido-doble-foto",
+  thumbnail: "https://img.test/thumb.jpg",
+  images: [
+    { id: "img_1", url: "https://img.test/frente.jpg" },
+    { id: "img_2", url: "https://img.test/espalda.jpg" },
+  ],
+  variants: [
+    { id: "vx", title: "U", calculated_price: { calculated_amount: 99000, currency_code: "cop" }, inventory_quantity: 5, allow_backorder: false },
+  ],
+} as unknown as HttpTypes.StoreProduct
+
+const productoMultiTalla = {
+  id: "prod_multi",
+  title: "Buzo Tallas",
+  handle: "buzo-tallas",
+  thumbnail: null,
+  variants: [
+    { id: "t_s", title: "S", calculated_price: { calculated_amount: 120000, currency_code: "cop" }, inventory_quantity: 3, allow_backorder: false },
+    { id: "t_m", title: "M", calculated_price: { calculated_amount: 120000, currency_code: "cop" }, inventory_quantity: 3, allow_backorder: false },
+  ],
+} as unknown as HttpTypes.StoreProduct
+
+describe("badges de la tarjeta", () => {
+  it("porcentajeDescuento deriva -N% de original_amount vs calculated_amount", () => {
+    expect(porcentajeDescuento(productoConDescuento)).toBe(20)
+    expect(porcentajeDescuento(producto)).toBeNull() // sin original_amount
+  })
+
+  it("muestra el badge de descuento sobre la imagen", () => {
+    const html = renderToStaticMarkup(
+      <TarjetaProducto product={productoConDescuento} card="minimal" ctx={mockCtx()} />
+    )
+    expect(html).toContain("-20%")
+  })
+
+  it("oculta el badge de descuento cuando no hay precio original", () => {
+    const html = renderToStaticMarkup(<TarjetaProducto product={producto} card="minimal" ctx={mockCtx()} />)
+    expect(html).not.toContain("-20%")
+    expect(html).not.toContain("Agotado")
+  })
+
+  it("estaAgotado es true solo si todas las variantes estan sin stock", () => {
+    expect(estaAgotado(productoAgotado)).toBe(true)
+    expect(estaAgotado(producto)).toBe(false)
+  })
+
+  it("manage_inventory:false (stock no rastreado) NO cuenta como agotado", () => {
+    const sinRastreo = {
+      ...productoAgotado,
+      variants: (productoAgotado.variants ?? []).map((v) => ({
+        ...v,
+        manage_inventory: false,
+        inventory_quantity: undefined,
+      })),
+    } as typeof productoAgotado
+    expect(estaAgotado(sinRastreo)).toBe(false)
+  })
+
+  it("muestra el badge Agotado cuando todo el producto esta sin stock", () => {
+    const html = renderToStaticMarkup(<TarjetaProducto product={productoAgotado} card="minimal" ctx={mockCtx()} />)
+    expect(html).toContain("Agotado")
+  })
+
+  it("esNuevo respeta la ventana de dias sobre created_at", () => {
+    const ahora = Date.parse("2026-07-12T00:00:00Z")
+    const reciente = { created_at: "2026-07-10T00:00:00Z" } as unknown as HttpTypes.StoreProduct
+    const viejo = { created_at: "2026-01-01T00:00:00Z" } as unknown as HttpTypes.StoreProduct
+    const sinFecha = { created_at: null } as unknown as HttpTypes.StoreProduct
+    expect(esNuevo(reciente, ahora)).toBe(true)
+    expect(esNuevo(viejo, ahora)).toBe(false)
+    expect(esNuevo(sinFecha, ahora)).toBe(false)
+  })
+})
+
+describe("hover con segunda imagen", () => {
+  it("renderiza ambas imagenes cuando existe images[1] (swap en hover)", () => {
+    const html = renderToStaticMarkup(
+      <TarjetaProducto product={productoConDosImagenes} card="minimal" ctx={mockCtx()} />
+    )
+    expect(html).toContain("https://img.test/thumb.jpg")
+    expect(html).toContain("https://img.test/espalda.jpg")
+  })
+
+  it("respeta prefers-reduced-motion (motion-reduce:transition-none) y usa group-hover para el swap", () => {
+    const html = renderToStaticMarkup(
+      <TarjetaProducto product={productoConDosImagenes} card="minimal" ctx={mockCtx()} />
+    )
+    expect(html).toContain("group-hover:opacity-100")
+    expect(html).toContain("motion-reduce:transition-none")
+  })
+
+  it("sin segunda imagen no renderiza overlay (comportamiento actual)", () => {
+    const html = renderToStaticMarkup(<TarjetaProducto product={producto} card="minimal" ctx={mockCtx()} />)
+    expect(html).not.toContain("group-hover:opacity-100")
+  })
+})
+
+describe("vista lista", () => {
+  it('vista:"lista" renderiza fila horizontal (data-card=lista) con titulo, precio y enlace', () => {
+    const html = renderToStaticMarkup(
+      <TarjetaProducto product={producto} card="minimal" ctx={mockCtx()} vista="lista" />,
+    )
+    expect(html).toContain('data-card="lista"')
+    expect(html).toContain("flex-row")
+    expect(html).toContain(producto.title)
+    expect(html).toContain(`href="/products/${producto.handle}"`)
+  })
+
+  it('vista:"lista" con card "quick-add" mantiene el boton Añadir en la fila', () => {
+    const html = renderToStaticMarkup(
+      <TarjetaProducto product={producto} card="quick-add" ctx={mockCtx()} vista="lista" />,
+    )
+    expect(html).toContain("Añadir")
+  })
+
+  it('vista por defecto ("grilla") NO usa el marcador de fila', () => {
+    const html = renderToStaticMarkup(
+      <TarjetaProducto product={producto} card="minimal" ctx={mockCtx()} />,
+    )
+    expect(html).not.toContain('data-card="lista"')
+  })
+})
+
+describe("quick-add respeta tallas", () => {
+  it("requiere seleccion cuando hay multiples variantes", () => {
+    expect(quickAddRequiereSeleccion(productoMultiTalla)).toBe(true)
+    expect(quickAddRequiereSeleccion(producto)).toBe(false)
+  })
+
+  it("card quick-add con una sola variante sigue mostrando Añadir directo", () => {
+    const html = renderToStaticMarkup(<TarjetaProducto product={producto} card="quick-add" ctx={mockCtx()} />)
+    expect(html).toContain("Añadir")
+  })
+})

package/src/catalog/product-card.tsx

@@ -0,0 +1,411 @@
+"use client"
+
+import { useState, type MouseEvent } from "react"
+import type { HttpTypes } from "@medusajs/types"
+import type { RenderContext } from "../context"
+
+export type CardVariant = "minimal" | "quick-add" | "tallas" | "quick-view"
+
+/**
+ * Ejecuta la acción de "agregar al carrito" del contexto. Extraída como función
+ * pura para poder testearla sin simular eventos de click en el DOM.
+ */
+export function agregarProducto(ctx: RenderContext, variantId: string) {
+  return ctx.acciones.agregarAlCarrito(variantId)
+}
+
+function primeraVariante(product: HttpTypes.StoreProduct): HttpTypes.StoreProductVariant | undefined {
+  return product.variants?.[0]
+}
+
+function formatearPrecio(variant: HttpTypes.StoreProductVariant | undefined): string | null {
+  const monto = variant?.calculated_price?.calculated_amount
+  if (monto == null) return null
+  const moneda = variant?.calculated_price?.currency_code ?? "COP"
+  try {
+    return new Intl.NumberFormat("es-CO", {
+      style: "currency",
+      currency: moneda.toUpperCase(),
+      maximumFractionDigits: 0,
+    }).format(monto)
+  } catch {
+    return `$ ${monto}`
+  }
+}
+
+function tallaAgotada(variant: HttpTypes.StoreProductVariant): boolean {
+  // `manage_inventory: false` = Medusa no rastrea stock → siempre disponible.
+  if (variant.manage_inventory === false) return false
+  return (variant.inventory_quantity ?? 0) <= 0 && !variant.allow_backorder
+}
+
+/**
+ * Porcentaje de descuento de la card, derivado del `calculated_price` de la
+ * primera variante (`original_amount` vs `calculated_amount`) — el MISMO dato
+ * que alimenta el `compareAt`/`descuentoPct` del PDP, pero calculado aquí a
+ * nivel de tarjeta. Devuelve `null` si no hay precio original, si el original
+ * no supera al actual, o si los montos no son numéricos.
+ */
+export function porcentajeDescuento(product: HttpTypes.StoreProduct): number | null {
+  const cp = primeraVariante(product)?.calculated_price
+  const actual = cp?.calculated_amount
+  const original = cp?.original_amount
+  if (typeof actual !== "number" || typeof original !== "number") return null
+  if (original <= actual) return null
+  const pct = Math.round((1 - actual / original) * 100)
+  return pct > 0 ? pct : null
+}
+
+/** `true` si el producto tiene variantes y TODAS están sin stock (sin backorder). */
+export function estaAgotado(product: HttpTypes.StoreProduct): boolean {
+  const variantes = product.variants ?? []
+  if (variantes.length === 0) return false
+  return variantes.every((v) => tallaAgotada(v))
+}
+
+/**
+ * `true` si el producto se creó dentro de la ventana reciente (por defecto 14
+ * días). `created_at` SÍ existe en el tipo de card (`StoreProduct.created_at`),
+ * pero solo se puebla si el adapter/host lo pide en el query del listado; si el
+ * dato no viene, el badge "Nuevo" simplemente no se muestra (fail-safe). `ahora`
+ * es inyectable para tests deterministas.
+ */
+export function esNuevo(
+  product: HttpTypes.StoreProduct,
+  ahora: number = Date.now(),
+  ventanaDias = 14,
+): boolean {
+  const created = product.created_at
+  if (!created) return false
+  const t = Date.parse(created)
+  if (Number.isNaN(t)) return false
+  const edad = ahora - t
+  return edad >= 0 && edad <= ventanaDias * 24 * 60 * 60 * 1000
+}
+
+/**
+ * `true` si el botón `quick-add` debe abrir el selector (vista rápida) en vez de
+ * agregar a ciegas: ocurre cuando el producto tiene más de una variante/talla.
+ */
+export function quickAddRequiereSeleccion(product: HttpTypes.StoreProduct): boolean {
+  return (product.variants?.length ?? 0) > 1
+}
+
+/** Imagen del producto (thumbnail) con fallback a un panel de superficie cuando no hay src. */
+function ImagenProducto({
+  src,
+  alt,
+  ctx,
+  className = "aspect-[3/4] w-full object-cover [border-radius:var(--cms-radio)]",
+}: {
+  src: string | null | undefined
+  alt: string
+  ctx: RenderContext
+  className?: string
+}) {
+  if (!src) {
+    return (
+      <div
+        role="img"
+        aria-label={alt}
+        className={className}
+        style={{ background: "var(--cms-superficie)", borderRadius: "var(--cms-radio)" }}
+      />
+    )
+  }
+  const { Imagen } = ctx.componentes
+  return <Imagen src={src} alt={alt} className={className} />
+}
+
+function Badge({ children, bg, color }: { children: string; bg: string; color: string }) {
+  return (
+    <span
+      className="px-2 py-1 text-[10px] font-semibold uppercase leading-none tracking-[0.06em]"
+      style={{ background: bg, color, borderRadius: "var(--cms-radio)", fontFamily: "var(--cms-fuente-mono)" }}
+    >
+      {children}
+    </span>
+  )
+}
+
+/**
+ * Badges apilados en la esquina superior izquierda (no tapan el quick-add
+ * inferior ni el quick-view inferior-derecho). `pointer-events-none` para que
+ * el enlace de card que cubre toda la imagen siga siendo clickeable. Orden:
+ * descuento → nuevo → agotado.
+ */
+function BadgesProducto({ product }: { product: HttpTypes.StoreProduct }) {
+  const pct = porcentajeDescuento(product)
+  const nuevo = esNuevo(product)
+  const agotado = estaAgotado(product)
+  if (pct == null && !nuevo && !agotado) return null
+  return (
+    <div className="pointer-events-none absolute left-2.5 top-2.5 z-10 flex flex-col items-start gap-1.5">
+      {pct != null ? (
+        <Badge bg="var(--cms-acento-2, #ff3b2e)" color="var(--cms-primario-texto, #fff)">{`-${pct}%`}</Badge>
+      ) : null}
+      {nuevo ? <Badge bg="var(--cms-texto, #111)" color="var(--cms-fondo, #fff)">Nuevo</Badge> : null}
+      {agotado ? (
+        <Badge bg="var(--cms-superficie, #f4f4f4)" color="var(--cms-texto-suave, #666)">Agotado</Badge>
+      ) : null}
+    </div>
+  )
+}
+
+function Precio({ variant }: { variant: HttpTypes.StoreProductVariant | undefined }) {
+  const precio = formatearPrecio(variant)
+  if (!precio) return null
+  return (
+    <div
+      className="text-[12.5px] font-medium"
+      style={{ fontFamily: "var(--cms-fuente-mono)", color: "var(--cms-texto-suave)" }}
+    >
+      {precio}
+    </div>
+  )
+}
+
+function TituloProducto({ children }: { children: string }) {
+  return (
+    <div className="text-[13px] font-medium" style={{ fontFamily: "var(--cms-fuente-texto)" }}>
+      {children}
+    </div>
+  )
+}
+
+function ChipTalla({
+  variant,
+  onClick,
+  seleccionada,
+}: {
+  variant: HttpTypes.StoreProductVariant
+  onClick?: () => void
+  seleccionada?: boolean
+}) {
+  const agotada = tallaAgotada(variant)
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={agotada}
+      className="min-w-[34px] px-0 py-1.5 text-center text-[11px]"
+      style={{
+        border: `var(--cms-grosor-borde) solid ${seleccionada ? "var(--cms-texto)" : "var(--cms-borde)"}`,
+        borderRadius: "var(--cms-radio)",
+        fontWeight: seleccionada ? 600 : 400,
+        color: agotada ? "var(--cms-texto-suave)" : "var(--cms-texto)",
+        textDecoration: agotada ? "line-through" : "none",
+        background: "transparent",
+      }}
+    >
+      {variant.title}
+    </button>
+  )
+}
+
+function BotonAñadir({
+  onClick,
+  className,
+}: {
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
+  className?: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`w-full py-2.5 text-center text-[11.5px] font-semibold uppercase tracking-[0.08em] ${className ?? ""}`}
+      style={{
+        background: "var(--cms-primario)",
+        color: "var(--cms-primario-texto)",
+        borderRadius: "var(--cms-radio)",
+        fontFamily: "var(--cms-fuente-texto)",
+      }}
+    >
+      Añadir
+    </button>
+  )
+}
+
+function ModalVistaRapida({
+  product,
+  ctx,
+  onCerrar,
+}: {
+  product: HttpTypes.StoreProduct
+  ctx: RenderContext
+  onCerrar: () => void
+}) {
+  const variantes = product.variants ?? []
+  const [variantId, setVariantId] = useState<string | undefined>(variantes[0]?.id)
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={product.title}
+      className="fixed inset-0 z-50 flex items-center justify-center p-6"
+      style={{ background: "rgba(0,0,0,.5)" }}
+    >
+      <div
+        className="flex w-full max-w-md flex-col gap-4 p-6"
+        style={{ background: "var(--cms-fondo)", color: "var(--cms-texto)", borderRadius: "var(--cms-radio)" }}
+      >
+        <div className="flex items-start justify-between gap-4">
+          <TituloProducto>{product.title}</TituloProducto>
+          <button type="button" onClick={onCerrar} aria-label="Cerrar">
+            ×
+          </button>
+        </div>
+        <Precio variant={variantes.find((v) => v.id === variantId) ?? variantes[0]} />
+        <div className="flex flex-wrap gap-1.5">
+          {variantes.map((v) => (
+            <ChipTalla key={v.id} variant={v} seleccionada={v.id === variantId} onClick={() => setVariantId(v.id)} />
+          ))}
+        </div>
+        <BotonAñadir onClick={() => variantId && agregarProducto(ctx, variantId)} />
+      </div>
+    </div>
+  )
+}
+
+/** Vista de la tarjeta: "grilla" (columna, default) o "lista" (fila horizontal). */
+export type CardVista = "grilla" | "lista"
+
+export function TarjetaProducto({
+  product,
+  card,
+  ctx,
+  vista = "grilla",
+}: {
+  product: HttpTypes.StoreProduct
+  card: CardVariant
+  ctx: RenderContext
+  vista?: CardVista
+}) {
+  const [vistaRapidaAbierta, setVistaRapidaAbierta] = useState(false)
+  const variante = primeraVariante(product)
+  const imagen = product.thumbnail ?? variante?.thumbnail ?? null
+  const segundaImagen = product.images?.[1]?.url ?? null
+  const requiereSeleccion = quickAddRequiereSeleccion(product)
+  const { Enlace } = ctx.componentes
+
+  if (vista === "lista") {
+    return (
+      <div data-card="lista" className="flex flex-row items-center gap-4">
+        <div className="relative w-24 flex-none md:w-28">
+          <ImagenProducto src={imagen} alt={product.title} ctx={ctx} />
+          <Enlace href={`/products/${product.handle}`} className="absolute inset-0 z-[1]">
+            <span className="sr-only">{product.title}</span>
+          </Enlace>
+          <BadgesProducto product={product} />
+        </div>
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <Enlace href={`/products/${product.handle}`} className="[color:var(--cms-texto)]">
+            <TituloProducto>{product.title}</TituloProducto>
+          </Enlace>
+          <Precio variant={variante} />
+          {card === "tallas" ? (
+            <div className="flex flex-wrap gap-1.5">
+              {(product.variants ?? []).map((v) => (
+                <ChipTalla key={v.id} variant={v} />
+              ))}
+            </div>
+          ) : null}
+        </div>
+        {card === "quick-add" || card === "quick-view" ? (
+          <div className="flex-none">
+            {card === "quick-add" ? (
+              <div className="w-32">
+                <BotonAñadir
+                  onClick={() => {
+                    if (requiereSeleccion) setVistaRapidaAbierta(true)
+                    else if (variante) void agregarProducto(ctx, variante.id)
+                  }}
+                />
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setVistaRapidaAbierta(true)}
+                className="px-3.5 py-2 text-[11px] font-semibold uppercase tracking-[0.06em]"
+                style={{
+                  background: "var(--cms-superficie)",
+                  color: "var(--cms-texto)",
+                  border: "var(--cms-grosor-borde) solid var(--cms-borde)",
+                  borderRadius: "var(--cms-radio)",
+                  fontFamily: "var(--cms-fuente-texto)",
+                }}
+              >
+                Vista rápida
+              </button>
+            )}
+          </div>
+        ) : null}
+        {vistaRapidaAbierta ? (
+          <ModalVistaRapida product={product} ctx={ctx} onCerrar={() => setVistaRapidaAbierta(false)} />
+        ) : null}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="group relative overflow-hidden [border-radius:var(--cms-radio)]">
+        <ImagenProducto src={imagen} alt={product.title} ctx={ctx} />
+        {segundaImagen ? (
+          // Wrapper absolute: ImagenCms fuerza `position:relative` en su div, que
+          // gana sobre un `absolute` pasado por className → la 2ª imagen quedaría
+          // en flujo (abajo). El contenedor absolute la superpone correctamente.
+          <div className="pointer-events-none absolute inset-0 z-[1] opacity-0 transition-opacity duration-300 group-hover:opacity-100 motion-reduce:transition-none">
+            <ImagenProducto src={segundaImagen} alt={product.title} ctx={ctx} className="h-full w-full object-cover" />
+          </div>
+        ) : null}
+        <Enlace href={`/products/${product.handle}`} className="absolute inset-0 z-[2]">
+          <span className="sr-only">{product.title}</span>
+        </Enlace>
+        <BadgesProducto product={product} />
+        {card === "quick-add" ? (
+          <div className="absolute inset-x-2.5 bottom-2.5 z-10">
+            <BotonAñadir
+              onClick={() => {
+                if (requiereSeleccion) setVistaRapidaAbierta(true)
+                else if (variante) void agregarProducto(ctx, variante.id)
+              }}
+            />
+          </div>
+        ) : null}
+        {card === "quick-view" ? (
+          <button
+            type="button"
+            onClick={() => setVistaRapidaAbierta(true)}
+            className="absolute bottom-2.5 right-2.5 z-10 px-3.5 py-2 text-[11px] font-semibold uppercase tracking-[0.06em]"
+            style={{
+              background: "var(--cms-superficie)",
+              color: "var(--cms-texto)",
+              border: "var(--cms-grosor-borde) solid var(--cms-borde)",
+              borderRadius: "var(--cms-radio)",
+              fontFamily: "var(--cms-fuente-texto)",
+            }}
+          >
+            Vista rápida
+          </button>
+        ) : null}
+      </div>
+      <Enlace href={`/products/${product.handle}`} className="[color:var(--cms-texto)]">
+        <TituloProducto>{product.title}</TituloProducto>
+      </Enlace>
+      <Precio variant={variante} />
+      {card === "tallas" ? (
+        <div className="flex flex-wrap gap-1.5">
+          {(product.variants ?? []).map((v) => (
+            <ChipTalla key={v.id} variant={v} />
+          ))}
+        </div>
+      ) : null}
+      {vistaRapidaAbierta ? (
+        <ModalVistaRapida product={product} ctx={ctx} onCerrar={() => setVistaRapidaAbierta(false)} />
+      ) : null}
+    </div>
+  )
+}

package/src/catalog/registry.tsx

@@ -0,0 +1,16 @@
+import type { CatalogRegistry } from "@arroyavecommerce/cms-storefront"
+import type { RenderContext } from "../context"
+import { PlpLayout } from "./plp"
+import { PdpLayout } from "./pdp"
+import { resolverPlpConfig, resolverPdpConfig, plpSettings, pdpSettings } from "./config"
+
+/**
+ * Cablea PLP/PDP del template al contrato `Template.catalogo`: cada
+ * componente resuelve su propia config (`CmsPageConfig` -> `PlpConfig`/
+ * `PdpConfig`) internamente antes de delegar en `PlpLayout`/`PdpLayout`.
+ */
+export const catalogo: CatalogRegistry<RenderContext> = {
+  plp: ({ ctx, pageConfig }) => <PlpLayout ctx={ctx} config={resolverPlpConfig(pageConfig)} />,
+  pdp: ({ ctx, pageConfig }) => <PdpLayout ctx={ctx} config={resolverPdpConfig(pageConfig)} />,
+  pageConfigSettings: { plp: plpSettings, pdp: pdpSettings },
+}