@arroyavecommerce/theme-kinetic 0.2.0

package/src/blocks/testimonials.tsx

@@ -0,0 +1,104 @@
+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"
+
+/** Prueba social: tarjetas `{ cita, autor, rating? }`. `rating` es 1–5 estrellas. */
+
+export type Testimonial = {
+  cita: string
+  autor: string
+  rating?: number
+}
+
+export type TestimonialsProps = {
+  fondo: Fondo
+  titulo: string
+  items: Testimonial[]
+}
+
+const testimonialSchema: z.ZodType<Testimonial> = z.object({
+  cita: z.string().min(1),
+  autor: z.string().min(1),
+  rating: z.number().min(1).max(5).optional(),
+})
+
+const testimonialsSchema: z.ZodType<TestimonialsProps> = z.object({
+  fondo: z.enum(FONDOS),
+  titulo: z.string().min(1),
+  items: z.array(testimonialSchema),
+})
+
+const testimonialsDefaults: TestimonialsProps = {
+  fondo: "oscuro",
+  titulo: "Lo que dicen nuestros clientes",
+  items: [
+    { cita: "La calidad me sorprendió, la tela es hermosa y el envío llegó en dos días.", autor: "Camila R.", rating: 5 },
+    { cita: "Pedí mi talla usual y quedó perfecta. Volveré a comprar sin dudarlo.", autor: "Andrés M.", rating: 5 },
+    { cita: "Atención de otro nivel por WhatsApp, resolvieron un cambio en minutos.", autor: "Valentina G.", rating: 4 },
+  ],
+}
+
+/** Fila de estrellas accesible (rating 1–5). */
+function Estrellas({ rating, color }: { rating: number; color: string }) {
+  const valor = Math.max(1, Math.min(5, Math.round(rating)))
+  return (
+    <div className="flex gap-0.5" role="img" aria-label={`${valor} de 5 estrellas`} style={{ color }}>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <span key={i} aria-hidden style={{ opacity: i < valor ? 1 : 0.28 }}>
+          ★
+        </span>
+      ))}
+    </div>
+  )
+}
+
+function Tarjeta({ item, borde, colorSuave, acento }: {
+  item: Testimonial
+  borde: string
+  colorSuave: string
+  acento: string
+}) {
+  return (
+    <figure
+      className={`${CLASE_REVEAL} m-0 flex flex-col gap-4 p-6 [transition:transform_.3s_ease,box-shadow_.3s_ease] hover:-translate-y-1 hover:[box-shadow:var(--cms-sombra-md,0_10px_30px_-12px_rgba(0,0,0,.18))]`}
+      style={{ border: `var(--cms-grosor-borde) solid ${borde}`, borderRadius: "var(--cms-radio-md,12px)" }}
+    >
+      {typeof item.rating === "number" ? <Estrellas rating={item.rating} color={acento} /> : null}
+      <blockquote className="m-0 text-[15px] leading-relaxed" style={{ fontFamily: "var(--cms-fuente-texto)" }}>
+        “{item.cita}”
+      </blockquote>
+      <figcaption className="text-[12px] font-semibold uppercase tracking-[0.08em]" style={{ color: colorSuave }}>
+        {item.autor}
+      </figcaption>
+    </figure>
+  )
+}
+
+export const testimonialsBlock: BlockDefinition<TestimonialsProps, RenderContext> = {
+  label: "Testimonios",
+  schema: testimonialsSchema,
+  defaults: testimonialsDefaults,
+  Component: ({ props }) => {
+    const f = resolverFondo(props.fondo)
+    const cols = props.items.length >= 3 ? "lg:grid-cols-3" : "lg:grid-cols-2"
+    return (
+      <Seccion fondo={props.fondo} ariaLabel={props.titulo}>
+        <div className="mx-auto w-full max-w-6xl">
+          <TituloSeccion className="text-center">{props.titulo}</TituloSeccion>
+          <div className={`mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 ${cols}`}>
+            {props.items.map((item, i) => (
+              <Tarjeta
+                key={`${item.autor}-${i}`}
+                item={item}
+                borde={f.borde}
+                colorSuave={f.colorSuave}
+                acento={f.acento}
+              />
+            ))}
+          </div>
+        </div>
+      </Seccion>
+    )
+  },
+}

package/src/blocks/video.test.tsx

@@ -0,0 +1,159 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { videoBlock, analizarVideo, type VideoProps } from "./video"
+import { FONDOS } from "./_shared"
+import { mockCtx } from "../test/mock-ctx"
+
+function render(props: VideoProps) {
+  return renderToStaticMarkup(<videoBlock.Component props={props} ctx={mockCtx()} />)
+}
+
+/** `src` de la fuente resuelta (archivo o embed); "" si es vacío. */
+function srcDe(url: string): string {
+  const r = analizarVideo(url)
+  return r.tipo === "vacio" ? "" : r.src
+}
+
+const base = videoBlock.defaults
+
+describe("videoBlock", () => {
+  it("defaults pasan el schema", () => {
+    expect(videoBlock.schema.safeParse(videoBlock.defaults).success).toBe(true)
+  })
+
+  it.each(FONDOS)("renderiza sin crash con fondo %s", (fondo) => {
+    const props = { ...base, fondo }
+    expect(videoBlock.schema.safeParse(props).success).toBe(true)
+    const html = render(props)
+    expect(html).toContain("<section")
+  })
+
+  describe("analizarVideo", () => {
+    it("clasifica archivos directos por extensión (con y sin query)", () => {
+      expect(analizarVideo("https://cdn.tienda.com/clip.mp4")).toEqual({
+        tipo: "archivo",
+        src: "https://cdn.tienda.com/clip.mp4",
+        mime: "video/mp4",
+      })
+      expect(analizarVideo("https://cdn.tienda.com/clip.webm?v=2")).toEqual({
+        tipo: "archivo",
+        src: "https://cdn.tienda.com/clip.webm?v=2",
+        mime: "video/webm",
+      })
+    })
+
+    it("normaliza URLs de YouTube a /embed/", () => {
+      const esperado = "https://www.youtube.com/embed/dQw4w9WgXcQ"
+      expect(srcDe("https://www.youtube.com/watch?v=dQw4w9WgXcQ")).toBe(esperado)
+      expect(srcDe("https://youtu.be/dQw4w9WgXcQ")).toBe(esperado)
+      expect(srcDe("https://www.youtube.com/embed/dQw4w9WgXcQ")).toBe(esperado)
+      expect(srcDe("https://www.youtube.com/shorts/dQw4w9WgXcQ")).toBe(esperado)
+    })
+
+    it("normaliza URLs de Vimeo a player.vimeo.com/video/", () => {
+      const esperado = "https://player.vimeo.com/video/123456789"
+      expect(srcDe("https://vimeo.com/123456789")).toBe(esperado)
+      expect(srcDe("https://player.vimeo.com/video/123456789")).toBe(esperado)
+    })
+
+    it("URL vacía o no reconocida cae a vacio", () => {
+      expect(analizarVideo("").tipo).toBe("vacio")
+      expect(analizarVideo("   ").tipo).toBe("vacio")
+      expect(analizarVideo("https://example.com/pagina").tipo).toBe("vacio")
+    })
+  })
+
+  it("archivo MP4: emite <video controls> con <source> del mime correcto y sin <iframe>", () => {
+    const html = render({ ...base, videoUrl: "https://cdn.tienda.com/clip.mp4" })
+    expect(html).toContain("<video")
+    expect(html).toContain("controls")
+    expect(html).toContain('<source src="https://cdn.tienda.com/clip.mp4" type="video/mp4"')
+    expect(html).not.toContain("<iframe")
+  })
+
+  it("autoplay: agrega autoPlay/muted/loop; sin autoplay no los agrega", () => {
+    const con = render({ ...base, videoUrl: "https://cdn.tienda.com/clip.mp4", autoplay: true })
+    expect(con).toContain("autoPlay")
+    expect(con).toContain('muted=""')
+    expect(con).toContain('loop=""')
+
+    const sin = render({ ...base, videoUrl: "https://cdn.tienda.com/clip.mp4", autoplay: false })
+    expect(sin).not.toContain("autoPlay")
+    expect(sin).not.toContain('muted=""')
+    expect(sin).not.toContain('loop=""')
+  })
+
+  it("poster: se aplica como atributo del <video>", () => {
+    const html = render({
+      ...base,
+      videoUrl: "https://cdn.tienda.com/clip.mp4",
+      poster: "https://cdn.tienda.com/poster.jpg",
+    })
+    expect(html).toContain('poster="https://cdn.tienda.com/poster.jpg"')
+  })
+
+  it("YouTube: emite <iframe> a /embed/ con loading=lazy y sin <video>", () => {
+    const html = render({ ...base, videoUrl: "https://youtu.be/dQw4w9WgXcQ" })
+    expect(html).toContain("<iframe")
+    expect(html).toContain('src="https://www.youtube.com/embed/dQw4w9WgXcQ"')
+    expect(html).toContain('loading="lazy"')
+    expect(html).not.toContain("<video")
+  })
+
+  it("Vimeo: emite <iframe> al player", () => {
+    const html = render({ ...base, videoUrl: "https://vimeo.com/123456789" })
+    expect(html).toContain('src="https://player.vimeo.com/video/123456789"')
+  })
+
+  it("vacío sin poster: placeholder con ícono (role=img), sin <video> ni <iframe>", () => {
+    const html = render({ ...base, videoUrl: "", poster: "" })
+    expect(html).not.toContain("<video")
+    expect(html).not.toContain("<iframe")
+    expect(html).toContain('role="img"')
+    expect(html).toContain("<svg")
+  })
+
+  it("vacío con poster: muestra la portada vía ctx.Imagen (no <iframe>)", () => {
+    const html = render({ ...base, videoUrl: "", poster: "https://cdn.tienda.com/poster.jpg" })
+    expect(html).not.toContain("<iframe")
+    expect(html).toContain('src="https://cdn.tienda.com/poster.jpg"')
+  })
+
+  it("titulo/texto opcionales: se muestran si vienen, se omiten si no", () => {
+    const con = render({ ...base, titulo: "Mi título", texto: "Mi texto" })
+    expect(con).toContain("Mi título")
+    expect(con).toContain("Mi texto")
+    expect(con).toContain("<h2")
+    expect(con).not.toMatch(/<h1[ >]/)
+
+    const sin = render({ fondo: "claro", videoUrl: "" })
+    expect(sin).not.toContain("<h2")
+  })
+
+  it("enlace opcional: con enlace pinta CTA, sin enlace no", () => {
+    const con = render({ ...base, enlace: { texto: "Ver más", href: "/x" } })
+    expect(con).toContain("Ver más")
+    expect(con).toContain('href="/x"')
+
+    const sin = render({ fondo: "claro", videoUrl: "" })
+    expect(sin).not.toContain("<a")
+  })
+
+  it("emite motion respetando prefers-reduced-motion", () => {
+    const html = render(base)
+    expect(html).toContain("prefers-reduced-motion")
+    expect(html).toContain("cms-reveal")
+  })
+
+  it("es server-safe: sin \"use client\", sin hooks ni Date.now a nivel de módulo", () => {
+    const ruta = fileURLToPath(new URL("./video.tsx", import.meta.url))
+    const fuente = readFileSync(ruta, "utf-8")
+    expect(fuente).not.toMatch(/["']use client["']/)
+    expect(fuente).not.toMatch(/\bDate\.now\s*\(/)
+    expect(fuente).not.toMatch(/\buse(State|Effect|Ref|Memo|Reducer)\s*\(/)
+    // Media/enlace pasan por nativos server-safe o ctx.componentes: sin <a> directo.
+    expect(fuente).not.toMatch(/<a[\s>]/)
+  })
+})

package/src/blocks/video.tsx

@@ -0,0 +1,226 @@
+import { z } from "zod"
+import type { BlockDefinition } from "@arroyavecommerce/cms-core"
+import { linkSchema } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { CLASE_REVEAL, Seccion, TituloSeccion, resolverFondo, type Fondo, FONDOS } from "./_shared"
+
+/**
+ * Bloque de video editable. Soporta dos fuentes, detectadas por la URL:
+ *   - Archivo directo (`.mp4/.webm/.ogg/.ogv/.mov`) → `<video controls>` nativo,
+ *     con `muted+loop+autoPlay` si `autoplay` está activo (autoplay solo funciona
+ *     silenciado en los navegadores modernos).
+ *   - YouTube / Vimeo → `<iframe>` responsivo 16/9 con `loading="lazy"`.
+ * Si `videoUrl` viene vacío o no se reconoce, se muestra un placeholder de
+ * superficie con el `poster` (si hay) o un ícono de play.
+ *
+ * Este módulo es SERVER-SAFE: video/iframe son nativos y no hay hooks ni estado.
+ * NO lleva la directiva de cliente (rompería el consumo de sus exports en el
+ * servidor/RSC). Nunca usa un reloj ni nada no determinista a nivel de módulo.
+ */
+
+export type VideoProps = {
+  fondo: Fondo
+  titulo?: string
+  texto?: string
+  /** URL de un MP4/webm directo o de un embed de YouTube/Vimeo. */
+  videoUrl: string
+  /** Imagen de portada (URL). Se usa como `poster` del video y en el placeholder. */
+  poster?: string
+  /** Reproducción automática (silenciada, en bucle). Solo aplica a archivos directos. */
+  autoplay?: boolean
+  enlace?: { texto: string; href: string }
+}
+
+const videoSchema: z.ZodType<VideoProps> = z.object({
+  fondo: z.enum(FONDOS),
+  titulo: z.string().optional(),
+  texto: z.string().optional(),
+  videoUrl: z.string(),
+  poster: z.string().optional(),
+  autoplay: z.boolean().optional(),
+  enlace: linkSchema.optional(),
+})
+
+const videoDefaults: VideoProps = {
+  fondo: "claro",
+  titulo: "Nuestra historia en video",
+  texto: "Descubrí cómo nace cada prenda, del primer boceto a tu clóset.",
+  videoUrl: "",
+  poster: "",
+  autoplay: false,
+  enlace: { texto: "Ver el detrás de escena", href: "/catalogo" },
+}
+
+// ── Detección de fuente ────────────────────────────────────────────────────────
+
+const EXT_MIME: Record<string, string> = {
+  mp4: "video/mp4",
+  webm: "video/webm",
+  ogv: "video/ogg",
+  ogg: "video/ogg",
+  mov: "video/quicktime",
+}
+
+type VideoAnalisis =
+  | { tipo: "archivo"; src: string; mime: string }
+  | { tipo: "embed"; src: string }
+  | { tipo: "vacio" }
+
+/** Recorta querystring/hash para inspeccionar la extensión de un archivo. */
+function rutaSinQuery(url: string): string {
+  const i = url.search(/[?#]/)
+  return i === -1 ? url : url.slice(0, i)
+}
+
+/**
+ * Clasifica la URL en archivo directo / embed (YouTube/Vimeo) / vacío. Puro y
+ * determinista; toda URL no reconocida cae a `vacio` (muestra el placeholder).
+ */
+export function analizarVideo(url: string): VideoAnalisis {
+  const u = (url ?? "").trim()
+  if (!u) return { tipo: "vacio" }
+
+  const limpio = rutaSinQuery(u).toLowerCase()
+  const punto = limpio.lastIndexOf(".")
+  const ext = punto === -1 ? "" : limpio.slice(punto + 1)
+  if (ext && EXT_MIME[ext]) return { tipo: "archivo", src: u, mime: EXT_MIME[ext] }
+
+  const yt = u.match(/(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/|v\/)|youtu\.be\/)([\w-]{6,})/i)
+  if (yt) return { tipo: "embed", src: `https://www.youtube.com/embed/${yt[1]}` }
+
+  const vm = u.match(/vimeo\.com\/(?:video\/)?(\d+)/i)
+  if (vm) return { tipo: "embed", src: `https://player.vimeo.com/video/${vm[1]}` }
+
+  return { tipo: "vacio" }
+}
+
+// ── Piezas de render ───────────────────────────────────────────────────────────
+
+function IconoPlay({ color }: { color: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="44"
+      height="44"
+      fill="none"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M10 8.5l6 3.5-6 3.5z" fill={color} stroke="none" />
+    </svg>
+  )
+}
+
+function Placeholder({
+  poster,
+  ctx,
+  ariaLabel,
+  colorSuave,
+  borde,
+}: {
+  poster?: string
+  ctx: RenderContext
+  ariaLabel: string
+  colorSuave: string
+  borde: string
+}) {
+  const { Imagen } = ctx.componentes
+  if (poster) {
+    return <Imagen src={poster} alt={ariaLabel} className="absolute inset-0 h-full w-full object-cover" />
+  }
+  return (
+    <div
+      className="absolute inset-0 flex items-center justify-center"
+      role="img"
+      aria-label={ariaLabel}
+      style={{ background: "var(--cms-superficie,#fff)", border: `var(--cms-grosor-borde) solid ${borde}` }}
+    >
+      <IconoPlay color={colorSuave} />
+    </div>
+  )
+}
+
+export const videoBlock: BlockDefinition<VideoProps, RenderContext> = {
+  label: "Video",
+  schema: videoSchema,
+  defaults: videoDefaults,
+  Component: ({ props, ctx }) => {
+    const f = resolverFondo(props.fondo)
+    const { Enlace } = ctx.componentes
+    const analisis = analizarVideo(props.videoUrl)
+    const etiquetaMedia = props.titulo || "Video"
+    const poster = props.poster && props.poster.trim() ? props.poster.trim() : undefined
+    const auto = props.autoplay === true
+
+    return (
+      <Seccion fondo={props.fondo} ariaLabel={etiquetaMedia}>
+        <div className="mx-auto w-full max-w-5xl">
+          {props.titulo || props.texto ? (
+            <div className="mb-6 flex flex-col gap-3 text-center">
+              {props.titulo ? <TituloSeccion>{props.titulo}</TituloSeccion> : null}
+              {props.texto ? (
+                <p className="m-0 mx-auto max-w-2xl text-[15px] leading-relaxed" style={{ color: f.colorSuave }}>
+                  {props.texto}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
+
+          <div
+            className={`${CLASE_REVEAL} relative aspect-video w-full overflow-hidden`}
+            style={{ borderRadius: "var(--cms-radio)" }}
+          >
+            {analisis.tipo === "archivo" ? (
+              <video
+                className="absolute inset-0 h-full w-full bg-black object-cover"
+                controls
+                playsInline
+                poster={poster}
+                autoPlay={auto}
+                muted={auto}
+                loop={auto}
+                preload={auto ? "auto" : "metadata"}
+              >
+                <source src={analisis.src} type={analisis.mime} />
+              </video>
+            ) : analisis.tipo === "embed" ? (
+              <iframe
+                className="absolute inset-0 h-full w-full"
+                src={analisis.src}
+                title={etiquetaMedia}
+                loading="lazy"
+                referrerPolicy="strict-origin-when-cross-origin"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+              />
+            ) : (
+              <Placeholder
+                poster={poster}
+                ctx={ctx}
+                ariaLabel={etiquetaMedia}
+                colorSuave={f.colorSuave}
+                borde={f.borde}
+              />
+            )}
+          </div>
+
+          {props.enlace && props.enlace.texto ? (
+            <div className="mt-6 text-center">
+              <Enlace
+                href={props.enlace.href}
+                className="inline-block whitespace-nowrap px-[22px] py-[11px] text-center text-[11.5px] font-semibold uppercase tracking-[0.08em] [border:1.5px_solid_currentColor] [border-radius:var(--cms-radio)] [font-family:var(--cms-fuente-texto)]"
+              >
+                {props.enlace.texto}
+              </Enlace>
+            </div>
+          ) : null}
+        </div>
+      </Seccion>
+    )
+  },
+}