@arroyavecommerce/theme-kinetic 0.2.0

package/src/blocks/lookbook.tsx

@@ -0,0 +1,117 @@
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { CLASE_REVEAL, Seccion, TituloSeccion, resolverFondo, type Fondo, FONDOS } from "./_shared"
+
+/**
+ * Lookbook: galería editorial de moda. Mosaico de imágenes (2–4 columnas según
+ * cantidad) con título e enlace opcionales por pieza. El primer item se destaca
+ * (ocupa 2 columnas en pantallas grandes) para dar ritmo editorial. Las imágenes
+ * pasan por `ctx.componentes.Imagen`, que ya pinta un placeholder accesible
+ * cuando la URL viene vacía. El bloque de storytelling de moda de la home.
+ */
+
+export type LookbookItem = {
+  imagenUrl: string
+  titulo?: string
+  href?: string
+}
+
+export type LookbookProps = {
+  fondo: Fondo
+  titulo?: string
+  items: LookbookItem[]
+}
+
+const lookbookItemSchema: z.ZodType<LookbookItem> = z.object({
+  imagenUrl: z.string(),
+  titulo: z.string().optional(),
+  href: z.string().optional(),
+})
+
+const lookbookSchema: z.ZodType<LookbookProps> = z.object({
+  fondo: z.enum(FONDOS),
+  titulo: z.string().optional(),
+  items: z.array(lookbookItemSchema),
+})
+
+const lookbookDefaults: LookbookProps = {
+  fondo: "claro",
+  titulo: "El lookbook",
+  items: [
+    { imagenUrl: "", titulo: "Uniforme urbano", href: "/collections/urbano" },
+    { imagenUrl: "", titulo: "Básicos esenciales", href: "/collections/basicos" },
+    { imagenUrl: "", titulo: "Drop de temporada", href: "/collections/temporada" },
+    { imagenUrl: "", titulo: "Accesorios", href: "/collections/accesorios" },
+  ],
+}
+
+/** Un mosaico: imagen (con placeholder si vacía) + título opcional en overlay. */
+function Mosaico({
+  item,
+  ctx,
+  destacado,
+}: {
+  item: LookbookItem
+  ctx: RenderContext
+  destacado?: boolean
+}) {
+  const { Imagen, Enlace } = ctx.componentes
+  const contenido = (
+    <figure
+      className={`${CLASE_REVEAL} group relative m-0 h-full w-full overflow-hidden`}
+      style={{ borderRadius: "var(--cms-radio-md,12px)" }}
+    >
+      <Imagen
+        src={item.imagenUrl}
+        alt={item.titulo ?? ""}
+        className={`${destacado ? "aspect-[4/5] md:aspect-auto md:h-full" : "aspect-[3/4]"} w-full object-cover [transition:transform_.5s_ease] group-hover:scale-[1.04]`}
+      />
+      {item.titulo ? (
+        <figcaption
+          className="absolute inset-x-0 bottom-0 flex items-end px-4 pb-4 pt-14 text-white"
+          style={{ background: "linear-gradient(transparent, rgba(0,0,0,.62))" }}
+        >
+          <span
+            className="text-[13px] font-semibold uppercase tracking-[0.1em]"
+            style={{ fontFamily: "var(--cms-fuente-texto)" }}
+          >
+            {item.titulo}
+          </span>
+        </figcaption>
+      ) : null}
+    </figure>
+  )
+
+  const claseCelda = destacado ? "md:col-span-2 md:row-span-2" : ""
+  if (item.href) {
+    return (
+      <Enlace href={item.href} className={`block ${claseCelda}`}>
+        {contenido}
+      </Enlace>
+    )
+  }
+  return <div className={claseCelda}>{contenido}</div>
+}
+
+export const lookbookBlock: BlockDefinition<LookbookProps, RenderContext> = {
+  label: "Lookbook",
+  schema: lookbookSchema,
+  defaults: lookbookDefaults,
+  Component: ({ props, ctx }) => {
+    // 2 columnas base; 3 o 4 según cantidad para el mosaico editorial.
+    const cols = props.items.length >= 4 ? "lg:grid-cols-4" : props.items.length === 3 ? "lg:grid-cols-3" : "lg:grid-cols-2"
+    return (
+      <Seccion fondo={props.fondo} ariaLabel={props.titulo || "Lookbook"}>
+        <div className="mx-auto w-full max-w-6xl">
+          {props.titulo ? <TituloSeccion className="mb-8">{props.titulo}</TituloSeccion> : null}
+          <div className={`grid auto-rows-[1fr] grid-cols-2 gap-3 md:gap-4 ${cols}`}>
+            {props.items.map((item, i) => (
+              <Mosaico key={i} item={item} ctx={ctx} destacado={i === 0 && props.items.length >= 3} />
+            ))}
+          </div>
+        </div>
+      </Seccion>
+    )
+  },
+}

package/src/blocks/marquee.test.tsx

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { marqueeBlock, COLORES_MARQUEE, VELOCIDADES } from "./marquee"
+import { mockCtx } from "../test/mock-ctx"
+
+describe("marqueeBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(marqueeBlock.schema.safeParse(marqueeBlock.defaults).success).toBe(true)
+  })
+
+  it.each(COLORES_MARQUEE)("renderiza sin crash con color %s", (color) => {
+    const props = { ...marqueeBlock.defaults, color }
+    expect(marqueeBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(<marqueeBlock.Component props={props} ctx={mockCtx()} />)
+    for (const mensaje of marqueeBlock.defaults.mensajes) {
+      expect(html).toContain(mensaje.texto)
+    }
+  })
+
+  it.each(VELOCIDADES)("aplica una duracion por velocidad %s", (velocidad) => {
+    const props = { ...marqueeBlock.defaults, velocidad }
+    const html = renderToStaticMarkup(<marqueeBlock.Component props={props} ctx={mockCtx()} />)
+    // La duracion vive en el keyframe track (16s/28s/42s).
+    expect(html).toMatch(/animation:[^;]*\d+s linear infinite/)
+  })
+
+  it("duplica la tira (mensajes salen 2 veces) para el loop sin costuras", () => {
+    const props = { ...marqueeBlock.defaults, mensajes: [{ texto: "SOLO" }] }
+    const html = renderToStaticMarkup(<marqueeBlock.Component props={props} ctx={mockCtx()} />)
+    expect((html.match(/SOLO/g) ?? []).length).toBe(2)
+  })
+
+  it("respeta prefers-reduced-motion (animation:none)", () => {
+    const html = renderToStaticMarkup(
+      <marqueeBlock.Component props={marqueeBlock.defaults} ctx={mockCtx()} />
+    )
+    expect(html).toContain("prefers-reduced-motion: reduce")
+    expect(html).toContain("animation:none")
+  })
+
+  it("con mensajes vacios cae a los mensajes por defecto", () => {
+    const props = { ...marqueeBlock.defaults, mensajes: [] }
+    expect(marqueeBlock.schema.safeParse(props).success).toBe(true)
+    const html = renderToStaticMarkup(<marqueeBlock.Component props={props} ctx={mockCtx()} />)
+    expect(html).toContain(marqueeBlock.defaults.mensajes[0].texto)
+  })
+
+  it("no usa <h1>", () => {
+    const html = renderToStaticMarkup(
+      <marqueeBlock.Component props={marqueeBlock.defaults} ctx={mockCtx()} />
+    )
+    expect(html).not.toMatch(/<h1[ >]/)
+  })
+})

package/src/blocks/marquee.tsx

@@ -0,0 +1,114 @@
+import { useId } from "react"
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+
+/**
+ * Banda de texto en movimiento (scroll infinito CSS). El color de la banda es
+ * su propia superficie (acento / tinta / degradado), por eso NO usa el enum
+ * genérico `fondo`: la banda ES el color. Respeta `prefers-reduced-motion`
+ * (queda estática y centrada cuando el usuario pide menos movimiento).
+ */
+
+export const VELOCIDADES = ["lenta", "media", "rapida"] as const
+export type Velocidad = (typeof VELOCIDADES)[number]
+
+export const COLORES_MARQUEE = ["acento", "tinta", "degradado"] as const
+export type ColorMarquee = (typeof COLORES_MARQUEE)[number]
+
+export type MarqueeMensaje = { texto: string }
+
+export type MarqueeProps = {
+  mensajes: MarqueeMensaje[]
+  velocidad: Velocidad
+  color: ColorMarquee
+}
+
+const marqueeSchema: z.ZodType<MarqueeProps> = z.object({
+  mensajes: z.array(z.object({ texto: z.string().min(1) })),
+  velocidad: z.enum(VELOCIDADES),
+  color: z.enum(COLORES_MARQUEE),
+})
+
+const marqueeDefaults: MarqueeProps = {
+  mensajes: [
+    { texto: "Envío gratis desde $150.000" },
+    { texto: "Cambios y devoluciones en 30 días" },
+    { texto: "Paga con PSE, tarjeta o efectivo" },
+    { texto: "Nuevos drops cada semana" },
+  ],
+  velocidad: "media",
+  color: "acento",
+}
+
+const DURACION: Record<Velocidad, string> = {
+  lenta: "42s",
+  media: "28s",
+  rapida: "16s",
+}
+
+function estiloBanda(color: ColorMarquee): { background: string; color: string } {
+  switch (color) {
+    case "tinta":
+      return { background: "var(--cms-texto,#151515)", color: "var(--cms-fondo,#fafaf8)" }
+    case "degradado":
+      return {
+        background: "var(--cms-degradado,linear-gradient(120deg,#3b2bff,#ff3b2e))",
+        color: "var(--cms-primario-texto,#ffffff)",
+      }
+    case "acento":
+    default:
+      return { background: "var(--cms-acento,#3b2bff)", color: "var(--cms-primario-texto,#ffffff)" }
+  }
+}
+
+export const marqueeBlock: BlockDefinition<MarqueeProps, RenderContext> = {
+  label: "Banda en movimiento",
+  schema: marqueeSchema,
+  defaults: marqueeDefaults,
+  Component: ({ props }) => {
+    const banda = estiloBanda(props.color)
+    const rawId = useId()
+    // `useId` genera `:r0:`; los dos puntos no son válidos en un nombre de animación.
+    const anim = `cms-mq-${rawId.replace(/:/g, "")}`
+    const mensajes = props.mensajes.length ? props.mensajes : marqueeDefaults.mensajes
+
+    // Una "tira" con todos los mensajes; se duplica para un loop sin costuras.
+    const Tira = ({ ariaHidden }: { ariaHidden?: boolean }) => (
+      <div className="flex shrink-0 items-center" aria-hidden={ariaHidden}>
+        {mensajes.map((mensaje, i) => (
+          <span key={i} className="flex items-center whitespace-nowrap">
+            <span
+              className="px-6 text-[13px] font-semibold uppercase tracking-[0.1em]"
+              style={{ fontFamily: "var(--cms-fuente-texto)" }}
+            >
+              {mensaje.texto}
+            </span>
+            <span aria-hidden className="opacity-60">
+              ✦
+            </span>
+          </span>
+        ))}
+      </div>
+    )
+
+    const css =
+      `@keyframes ${anim}{from{transform:translateX(0)}to{transform:translateX(-50%)}}` +
+      `.${anim}-track{display:flex;width:max-content;animation:${anim} ${DURACION[props.velocidad]} linear infinite}` +
+      `@media (prefers-reduced-motion: reduce){.${anim}-track{animation:none;justify-content:center;width:100%}}`
+
+    return (
+      <section
+        aria-label="Anuncios de la tienda"
+        className="w-full overflow-hidden py-3"
+        style={{ ...banda, borderRadius: "var(--cms-radio)" }}
+      >
+        <style dangerouslySetInnerHTML={{ __html: css }} />
+        <div className={`${anim}-track`}>
+          <Tira />
+          <Tira ariaHidden />
+        </div>
+      </section>
+    )
+  },
+}

package/src/blocks/newsletter.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { newsletterBlock } from "./newsletter"
+import { mockCtx } from "../test/mock-ctx"
+
+const fondos = ["fondo", "acento"] as const
+
+describe("newsletterBlock", () => {
+  it.each(fondos)("renderiza sin crash con fondo %s", (fondo) => {
+    const props = { ...newsletterBlock.defaults, fondo }
+    expect(newsletterBlock.schema.safeParse(props).success).toBe(true)
+
+    const html = renderToStaticMarkup(<newsletterBlock.Component props={props} ctx={mockCtx()} />)
+
+    expect(html).toContain(newsletterBlock.defaults.titulo)
+    expect(html).toContain(newsletterBlock.defaults.texto)
+    expect(html).toContain(newsletterBlock.defaults.textoBoton)
+    expect(html).toContain(newsletterBlock.defaults.notaLegal)
+    expect(html).toContain(`placeholder="${newsletterBlock.defaults.placeholder}"`)
+  })
+
+  it("titulo es un <h2> (no <h1>) y el input tiene <label> asociado", () => {
+    const html = renderToStaticMarkup(
+      <newsletterBlock.Component props={newsletterBlock.defaults} ctx={mockCtx()} />
+    )
+
+    expect(html).toContain("<h2")
+    expect(html).not.toContain("<h1")
+    expect(html).toContain("<label")
+    expect(html).toContain('type="email"')
+
+    const labelMatch = html.match(/<label[^>]*for="([^"]+)"/)
+    expect(labelMatch).not.toBeNull()
+    const inputMatch = html.match(/<input[^>]*id="([^"]+)"/)
+    expect(inputMatch).not.toBeNull()
+    expect(labelMatch?.[1]).toBe(inputMatch?.[1])
+  })
+
+  it("no usa <img> ni <a> directos: pasa siempre por ctx.componentes", () => {
+    const html = renderToStaticMarkup(
+      <newsletterBlock.Component props={newsletterBlock.defaults} ctx={mockCtx()} />
+    )
+
+    expect(html).not.toContain("<img ")
+    expect(html).not.toContain("<a ")
+  })
+
+  it("el <form> es presentacional: sin action ni onSubmit que rompa sin backend", () => {
+    const html = renderToStaticMarkup(
+      <newsletterBlock.Component props={newsletterBlock.defaults} ctx={mockCtx()} />
+    )
+
+    expect(html).toContain("<form")
+    expect(html).not.toContain('action="')
+  })
+
+  it("defaults pasan el schema", () => {
+    expect(newsletterBlock.schema.safeParse(newsletterBlock.defaults).success).toBe(true)
+  })
+})

package/src/blocks/newsletter.tsx

@@ -0,0 +1,105 @@
+import { useId } from "react"
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+
+export type NewsletterProps = {
+  fondo: "fondo" | "acento"
+  titulo: string
+  texto: string
+  placeholder: string
+  textoBoton: string
+  notaLegal: string
+}
+
+const newsletterSchema: z.ZodType<NewsletterProps> = z.object({
+  fondo: z.enum(["fondo", "acento"]),
+  titulo: z.string().min(1),
+  texto: z.string(),
+  placeholder: z.string(),
+  textoBoton: z.string().min(1),
+  notaLegal: z.string(),
+})
+
+const newsletterDefaults: NewsletterProps = {
+  fondo: "fondo",
+  titulo: "Entérate primero de cada drop",
+  texto: "10% de descuento en tu primera compra al suscribirte.",
+  placeholder: "Tu correo",
+  textoBoton: "Suscribirme",
+  notaLegal: "Al suscribirte aceptás recibir novedades por correo. Podés darte de baja cuando quieras.",
+}
+
+export const newsletterBlock: BlockDefinition<NewsletterProps, RenderContext> = {
+  label: "Newsletter",
+  schema: newsletterSchema,
+  defaults: newsletterDefaults,
+  Component: ({ props }) => {
+    const sobreAcento = props.fondo === "acento"
+    const emailId = useId()
+    return (
+      <section
+        className="w-full px-5 py-10 text-center md:px-8 md:py-14 lg:py-16"
+        style={{
+          background: sobreAcento ? "var(--cms-acento)" : "var(--cms-fondo)",
+          color: sobreAcento ? "var(--cms-primario-texto)" : "var(--cms-texto)",
+          borderRadius: "var(--cms-radio)",
+        }}
+      >
+        <h2
+          className="m-0 text-2xl leading-tight md:text-[28px]"
+          style={{
+            fontFamily: "var(--cms-fuente-titulo)",
+            fontWeight: "var(--cms-titulo-peso)",
+            textTransform: "var(--cms-titulo-transform)",
+            letterSpacing: "var(--cms-titulo-espaciado)",
+          }}
+        >
+          {props.titulo}
+        </h2>
+        <p
+          className="mx-auto mt-2.5 max-w-md text-[13px]"
+          style={{ color: sobreAcento ? "var(--cms-primario-texto)" : "var(--cms-texto-suave)", opacity: sobreAcento ? 0.85 : 1 }}
+        >
+          {props.texto}
+        </p>
+        <form className="mx-auto mt-5 flex w-full max-w-sm flex-col items-stretch gap-2.5 md:max-w-none md:flex-row md:flex-wrap md:items-center md:justify-center">
+          <label htmlFor={emailId} className="sr-only">
+            {props.placeholder}
+          </label>
+          <input
+            id={emailId}
+            type="email"
+            name="email"
+            placeholder={props.placeholder}
+            className="h-11 w-full px-4 text-[13px] md:w-80"
+            style={{
+              border: "var(--cms-grosor-borde) solid var(--cms-borde)",
+              borderRadius: "var(--cms-radio)",
+              background: "var(--cms-superficie)",
+              color: "var(--cms-texto)",
+            }}
+          />
+          <button
+            type="submit"
+            className="inline-block h-11 w-full px-6 text-xs font-semibold uppercase tracking-[0.08em] md:w-auto"
+            style={{
+              background: "var(--cms-primario)",
+              color: "var(--cms-primario-texto)",
+              borderRadius: "var(--cms-radio)",
+              fontFamily: "var(--cms-fuente-texto)",
+            }}
+          >
+            {props.textoBoton}
+          </button>
+        </form>
+        <p
+          className="mx-auto mt-3 max-w-md text-[11px]"
+          style={{ color: sobreAcento ? "var(--cms-primario-texto)" : "var(--cms-texto-suave)", opacity: sobreAcento ? 0.7 : 1 }}
+        >
+          {props.notaLegal}
+        </p>
+      </section>
+    )
+  },
+}

package/src/blocks/product-grid.test.tsx

@@ -0,0 +1,160 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it, vi } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import type { HttpTypes } from "@medusajs/types"
+import { productGridBlock, agregarProducto } from "./product-grid"
+import { mockCtx } from "../test/mock-ctx"
+
+const codigoFuente = readFileSync(fileURLToPath(new URL("./product-grid.tsx", import.meta.url)), "utf-8")
+
+const productos = [
+  {
+    id: "prod_1",
+    title: "Sneaker Runner Blanco",
+    handle: "sneaker-runner-blanco",
+    collection_id: "col_1",
+    thumbnail: null,
+    variants: [
+      {
+        id: "var_1",
+        title: "M",
+        calculated_price: { calculated_amount: 289900, currency_code: "cop" },
+        inventory_quantity: 5,
+        allow_backorder: false,
+      },
+      {
+        id: "var_2",
+        title: "L",
+        calculated_price: { calculated_amount: 289900, currency_code: "cop" },
+        inventory_quantity: 0,
+        allow_backorder: false,
+      },
+    ],
+  },
+  {
+    id: "prod_2",
+    title: "Hoodie Heavy Negro",
+    handle: "hoodie-heavy-negro",
+    collection_id: "col_2",
+    thumbnail: null,
+    variants: [
+      {
+        id: "var_3",
+        title: "M",
+        calculated_price: { calculated_amount: 179900, currency_code: "cop" },
+        inventory_quantity: 5,
+        allow_backorder: false,
+      },
+    ],
+  },
+] as unknown as HttpTypes.StoreProduct[]
+
+describe("productGridBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(productGridBlock.schema.safeParse(productGridBlock.defaults).success).toBe(true)
+  })
+
+  it("renderiza el titulo de seccion y una tarjeta por producto de ctx.products", () => {
+    const html = renderToStaticMarkup(
+      <productGridBlock.Component props={productGridBlock.defaults} ctx={mockCtx({ products: productos })} />
+    )
+
+    expect(html).toContain(productGridBlock.defaults.titulo)
+    for (const producto of productos) {
+      expect(html).toContain(`href="/products/${producto.handle}"`)
+      expect(html).toContain(producto.title)
+    }
+  })
+
+  it.each(["minimal", "quick-add", "tallas", "quick-view"] as const)(
+    "renderiza sin crash con card: %s",
+    (card) => {
+      const props = { ...productGridBlock.defaults, card }
+      expect(productGridBlock.schema.safeParse(props).success).toBe(true)
+
+      const html = renderToStaticMarkup(
+        <productGridBlock.Component props={props} ctx={mockCtx({ products: productos })} />
+      )
+
+      expect(html).toContain(productos[0]!.title)
+    }
+  )
+
+  it('card "quick-add" muestra un boton para agregar', () => {
+    const props = { ...productGridBlock.defaults, card: "quick-add" as const }
+    const html = renderToStaticMarkup(
+      <productGridBlock.Component props={props} ctx={mockCtx({ products: productos })} />
+    )
+
+    expect(html).toContain("Añadir")
+  })
+
+  it('card "tallas" tacha las tallas agotadas', () => {
+    const props = { ...productGridBlock.defaults, card: "tallas" as const }
+    const html = renderToStaticMarkup(
+      <productGridBlock.Component props={props} ctx={mockCtx({ products: productos })} />
+    )
+
+    expect(html).toContain("line-through")
+  })
+
+  it('card "quick-view" muestra un boton de vista rapida', () => {
+    const props = { ...productGridBlock.defaults, card: "quick-view" as const }
+    const html = renderToStaticMarkup(
+      <productGridBlock.Component props={props} ctx={mockCtx({ products: productos })} />
+    )
+
+    expect(html).toContain("Vista rápida")
+  })
+
+  it("coleccionId filtra ctx.products por collection_id", () => {
+    const props = { ...productGridBlock.defaults, coleccionId: "col_1" }
+    const html = renderToStaticMarkup(
+      <productGridBlock.Component props={props} ctx={mockCtx({ products: productos })} />
+    )
+
+    expect(html).toContain("Sneaker Runner Blanco")
+    expect(html).not.toContain("Hoodie Heavy Negro")
+  })
+
+  it("coleccionId vacío no filtra: aparecen todos los productos", () => {
+    const props = { ...productGridBlock.defaults, coleccionId: "" }
+    const html = renderToStaticMarkup(
+      <productGridBlock.Component props={props} ctx={mockCtx({ products: productos })} />
+    )
+
+    expect(html).toContain("Sneaker Runner Blanco")
+    expect(html).toContain("Hoodie Heavy Negro")
+  })
+
+  it("con thumbnail/variant sin imagen usa un fallback en vez de <img src=\"\">", () => {
+    const html = renderToStaticMarkup(
+      <productGridBlock.Component props={productGridBlock.defaults} ctx={mockCtx({ products: productos })} />
+    )
+
+    expect(html).not.toContain('src=""')
+  })
+
+  it("no emite <img> ni <a> directos: todo pasa por ctx.componentes", () => {
+    expect(codigoFuente).not.toMatch(/<img[\s>]/)
+    expect(codigoFuente).not.toMatch(/<a[\s>]/)
+  })
+})
+
+describe("agregarProducto", () => {
+  it("llama ctx.acciones.agregarAlCarrito con el variantId", async () => {
+    const spy = vi.fn(async () => ({ ok: true }))
+    const ctx = mockCtx({ acciones: { agregarAlCarrito: spy } })
+
+    await agregarProducto(ctx, "var_1")
+
+    expect(spy).toHaveBeenCalledWith("var_1")
+  })
+
+  it("devuelve la promesa de agregarAlCarrito", async () => {
+    const ctx = mockCtx({ acciones: { agregarAlCarrito: vi.fn(async () => ({ ok: true })) } })
+
+    await expect(agregarProducto(ctx, "var_1")).resolves.toEqual({ ok: true })
+  })
+})

package/src/blocks/product-grid.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { TarjetaProducto } from "../catalog/product-card"
+
+export { agregarProducto } from "../catalog/product-card"
+
+export type ProductGridProps = {
+  titulo: string
+  coleccionId: string
+  columnas: 3 | 4
+  card: "minimal" | "quick-add" | "tallas" | "quick-view"
+}
+
+const productGridSchema: z.ZodType<ProductGridProps> = z.object({
+  titulo: z.string().min(1),
+  coleccionId: z.string(),
+  columnas: z.union([z.literal(3), z.literal(4)]),
+  card: z.enum(["minimal", "quick-add", "tallas", "quick-view"]),
+})
+
+const productGridDefaults: ProductGridProps = {
+  titulo: "Novedades",
+  coleccionId: "",
+  columnas: 4,
+  card: "quick-add",
+}
+
+export const productGridBlock: BlockDefinition<ProductGridProps, RenderContext> = {
+  label: "Grilla de productos",
+  schema: productGridSchema,
+  defaults: productGridDefaults,
+  Component: ({ props, ctx }) => {
+    const productos = props.coleccionId
+      ? ctx.products.filter((product) => product.collection_id === props.coleccionId)
+      : ctx.products
+
+    return (
+      <div
+        style={{
+          background: "var(--cms-fondo)",
+          color: "var(--cms-texto)",
+          border: "var(--cms-grosor-borde) solid var(--cms-borde)",
+          borderRadius: "var(--cms-radio)",
+        }}
+        className="w-full p-7"
+      >
+        <div className="flex items-baseline justify-between">
+          <h2
+            className="m-0"
+            style={{
+              fontFamily: "var(--cms-fuente-titulo)",
+              fontWeight: "var(--cms-titulo-peso)",
+              textTransform: "var(--cms-titulo-transform)",
+              letterSpacing: "var(--cms-titulo-espaciado)",
+              fontSize: "26px",
+            }}
+          >
+            {props.titulo}
+          </h2>
+        </div>
+        <div
+          className={`mt-5 grid w-full grid-cols-2 gap-5 ${
+            props.columnas === 3 ? "md:grid-cols-3" : "md:grid-cols-4"
+          }`}
+        >
+          {productos.map((product) => (
+            <TarjetaProducto key={product.id} product={product} card={props.card} ctx={ctx} />
+          ))}
+        </div>
+      </div>
+    )
+  },
+}