@arroyavecommerce/theme-kinetic 0.2.0

package/src/chrome/announcement-bar.tsx

@@ -0,0 +1,173 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { z } from "zod"
+import type { RenderContext } from "../context"
+
+/**
+ * Barra de anuncios de la plantilla de moda — estética "Kinetic Street".
+ * 100% editable/combinable desde el CMS: su schema Zod (con la convención
+ * `.describe("segmented")` del form-builder) vive acá y el header lo re-usa
+ * anidado en `HeaderProps.anuncio`, así el ChromeEditor autogenera los
+ * controles sin acoplar el header a la forma del anuncio.
+ *
+ * Todo se pinta con tokens `--cms-*` CON fallback: la barra se ve bien aunque
+ * el tema no publique el token.
+ *
+ * Variantes (`variante`):
+ *   - `estatica`   → todos los mensajes en fila, centrados.
+ *   - `rotativa`   → un mensaje a la vez; rota cada `velocidad` ms.
+ *   - `marquesina` → scroll infinito CSS (respeta `prefers-reduced-motion`).
+ */
+
+export const anuncioMensajeSchema = z.object({
+  texto: z.string().min(1),
+  href: z.string().optional(),
+})
+export type AnuncioMensaje = z.infer<typeof anuncioMensajeSchema>
+
+export const anuncioSchema = z.object({
+  activo: z.boolean(),
+  variante: z.enum(["estatica", "rotativa", "marquesina"]).describe("segmented"),
+  mensajes: z.array(anuncioMensajeSchema),
+  color: z.enum(["acento", "degradado", "tinta", "fondo"]).describe("segmented"),
+  /** Rotativa: ms entre mensajes. Marquesina: ms del recorrido completo. */
+  velocidad: z.number(),
+  dismissible: z.boolean(),
+})
+export type Anuncio = z.infer<typeof anuncioSchema>
+
+export const anuncioDefaults: Anuncio = {
+  activo: true,
+  variante: "rotativa",
+  mensajes: [
+    { texto: "Envío gratis desde $150.000" },
+    { texto: "Paga con PSE, tarjeta o efectivo" },
+    { texto: "Cambios fáciles en 30 días" },
+  ],
+  color: "acento",
+  velocidad: 4000,
+  dismissible: false,
+}
+
+const COLORES: Record<Anuncio["color"], { fondo: string; texto: string }> = {
+  acento: { fondo: "var(--cms-acento,#3b2bff)", texto: "var(--cms-primario-texto,#fff)" },
+  degradado: {
+    fondo: "var(--cms-degradado,linear-gradient(120deg,#3b2bff,#ff3b2e))",
+    texto: "var(--cms-primario-texto,#fff)",
+  },
+  tinta: { fondo: "var(--cms-texto,#0c0c10)", texto: "var(--cms-fondo,#f1eee6)" },
+  fondo: { fondo: "var(--cms-fondo,#f1eee6)", texto: "var(--cms-texto,#0c0c10)" },
+}
+
+const claseMensaje = "font-mono text-[10px] font-medium uppercase tracking-[0.12em] whitespace-nowrap"
+
+/** Enlace no acepta `style`: el texto plano y el enlazado comparten las mismas clases. */
+function Mensaje({ mensaje, ctx, className }: { mensaje: AnuncioMensaje; ctx: RenderContext; className?: string }) {
+  if (mensaje.href) {
+    const { Enlace } = ctx.componentes
+    return (
+      <Enlace href={mensaje.href} className={className}>
+        {mensaje.texto}
+      </Enlace>
+    )
+  }
+  return <span className={className}>{mensaje.texto}</span>
+}
+
+/** X de cierre para `dismissible` (SVG inline, sin dependencias). */
+function BotonCerrar({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Cerrar anuncio"
+      className="absolute right-2.5 top-1/2 inline-flex -translate-y-1/2 items-center justify-center opacity-80 transition-opacity hover:opacity-100"
+    >
+      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+        <path d="M6 6l12 12M18 6L6 18" />
+      </svg>
+    </button>
+  )
+}
+
+/** Marquesina: scroll infinito CSS. El track se duplica para un loop sin cortes. */
+function Marquesina({
+  mensajes,
+  ctx,
+  duracionS,
+}: {
+  mensajes: AnuncioMensaje[]
+  ctx: RenderContext
+  duracionS: number
+}) {
+  const secuencia = [...mensajes, ...mensajes]
+  return (
+    <div className="cms-marq relative overflow-hidden">
+      <style
+        dangerouslySetInnerHTML={{
+          __html:
+            "@keyframes cms-marq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}" +
+            ".cms-marq-track{animation:cms-marq-scroll var(--cms-marq-dur,20s) linear infinite}" +
+            "@media (prefers-reduced-motion: reduce){.cms-marq-track{animation:none}}",
+        }}
+      />
+      <div
+        className={`cms-marq-track flex w-max items-center gap-10 ${claseMensaje}`}
+        style={{ "--cms-marq-dur": `${duracionS}s` } as React.CSSProperties}
+      >
+        {secuencia.map((mensaje, i) => (
+          <Mensaje key={`${mensaje.texto}-${i}`} mensaje={mensaje} ctx={ctx} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function AnnouncementBar({ anuncio, ctx }: { anuncio: Anuncio; ctx: RenderContext }) {
+  const [indice, setIndice] = useState(0)
+  const [cerrado, setCerrado] = useState(false)
+  const total = anuncio.mensajes.length
+  const esRotativa = anuncio.variante === "rotativa"
+  const velocidad = anuncio.velocidad > 0 ? anuncio.velocidad : 4000
+
+  useEffect(() => {
+    if (!anuncio.activo || !esRotativa || total <= 1) return
+    const id = setInterval(() => setIndice((actual) => (actual + 1) % total), velocidad)
+    return () => clearInterval(id)
+  }, [anuncio.activo, esRotativa, total, velocidad])
+
+  if (!anuncio.activo || total === 0 || cerrado) return null
+
+  const { fondo, texto } = COLORES[anuncio.color]
+  const paddingDerecha = anuncio.dismissible ? "pr-9" : ""
+
+  let contenido: React.ReactNode
+  if (anuncio.variante === "marquesina") {
+    // Recorrido completo (recorre el largo del track duplicado) en `velocidad` ms.
+    const duracionS = Math.max(6, (velocidad / 1000) * Math.max(total, 1))
+    contenido = <Marquesina mensajes={anuncio.mensajes} ctx={ctx} duracionS={duracionS} />
+  } else if (esRotativa) {
+    const mensajeActual = anuncio.mensajes[indice % total]
+    contenido = (
+      <div className={`flex items-center justify-center text-center ${claseMensaje}`}>
+        <Mensaje mensaje={mensajeActual} ctx={ctx} />
+      </div>
+    )
+  } else {
+    contenido = (
+      <div className={`flex flex-wrap items-center justify-center gap-x-6 gap-y-1 text-center ${claseMensaje}`}>
+        {anuncio.mensajes.map((mensaje, i) => (
+          <Mensaje key={`${mensaje.texto}-${i}`} mensaje={mensaje} ctx={ctx} />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`relative w-full px-4 py-2 ${paddingDerecha}`} style={{ background: fondo, color: texto }}>
+      {contenido}
+      {anuncio.dismissible ? <BotonCerrar onClick={() => setCerrado(true)} /> : null}
+    </div>
+  )
+}

package/src/chrome/drawer-movil.test.tsx

@@ -0,0 +1,113 @@
+import { readFileSync } from "node:fs"
+import { fileURLToPath } from "node:url"
+import { describe, expect, it } from "vitest"
+import { renderToStaticMarkup } from "react-dom/server"
+import { DrawerMovil, type DrawerMovilLogo } from "./drawer-movil"
+import { mockCtx } from "../test/mock-ctx"
+
+const logoTexto: DrawerMovilLogo = { modo: "texto", valor: "KINETIC", tamaño: 22 }
+
+const menu = [
+  { texto: "Novedades", href: "/novedades" },
+  { texto: "Sale", href: "/sale" },
+]
+
+const secciones = [
+  {
+    titulo: "Ropa",
+    enlaces: [
+      { texto: "Camisetas", href: "/ropa/camisetas" },
+      { texto: "Hoodies y buzos", href: "/ropa/hoodies" },
+    ],
+  },
+  {
+    titulo: "Zapatos",
+    enlaces: [{ texto: "Tenis", href: "/zapatos/tenis" }],
+  },
+]
+
+const render = (props: Partial<Parameters<typeof DrawerMovil>[0]> = {}) =>
+  renderToStaticMarkup(
+    <DrawerMovil
+      abierto={true}
+      onCerrar={() => {}}
+      logo={logoTexto}
+      menu={menu}
+      secciones={secciones}
+      ctx={mockCtx()}
+      {...props}
+    />,
+  )
+
+describe("DrawerMovil", () => {
+  it("abierto:false no renderiza nada", () => {
+    expect(render({ abierto: false })).toBe("")
+  })
+
+  it("es un diálogo modal con scrim y botón de cerrar accesible", () => {
+    const html = render()
+    expect(html).toContain('role="dialog"')
+    expect(html).toContain('aria-modal="true"')
+    expect(html).toContain("bg-black/50")
+    expect(html).toContain('aria-label="Cerrar menú"')
+  })
+
+  it("logo real modo texto pinta el wordmark (no el placeholder 'LOGO')", () => {
+    const html = render({ logo: { modo: "texto", valor: "KINETIC", tamaño: 22 } })
+    expect(html).toContain("KINETIC")
+    expect(html).not.toContain(">LOGO<")
+  })
+
+  it("logo real modo imagen resuelve via ctx.componentes.Imagen", () => {
+    const html = render({
+      logo: { modo: "imagen", valor: "https://ejemplo.com/logo.png", tamaño: 28 },
+    })
+    expect(html).toContain('src="https://ejemplo.com/logo.png"')
+  })
+
+  it("nunca emite el placeholder 'LOGO' hardcodeado en la fuente", () => {
+    const rutaFuente = fileURLToPath(new URL("./drawer-movil.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+    expect(fuente).not.toContain(">LOGO<")
+    expect(fuente).not.toMatch(/["']LOGO["']/)
+  })
+
+  it("pinta el nav: enlaces del menú y títulos de secciones", () => {
+    const html = render()
+    for (const item of menu) {
+      expect(html).toContain(item.texto)
+      expect(html).toContain(`href="${item.href}"`)
+    }
+    for (const seccion of secciones) {
+      expect(html).toContain(seccion.titulo)
+    }
+  })
+
+  it("invitado: muestra Iniciar sesión con enlace real de cuenta", () => {
+    const html = render()
+    expect(html).toContain("Iniciar sesión")
+    expect(html).toContain('href="/account"')
+    expect(html).toContain("Crea tu cuenta")
+  })
+
+  it("registrado: muestra saludo y enlaces reales de cuenta", () => {
+    const html = render({ ctx: mockCtx({ sesion: { autenticado: true, nombre: "Camila" } }) })
+    expect(html).toContain("Hola, Camila")
+    expect(html).toContain("Mis pedidos")
+    expect(html).toContain('href="/account/orders"')
+    expect(html).toContain("Cerrar sesión")
+  })
+
+  it("aplica la clase de animación de entrada (cms-drawer-panel) y respeta reduced-motion", () => {
+    const html = render()
+    expect(html).toContain("cms-drawer-panel")
+    expect(html).toContain("prefers-reduced-motion")
+  })
+
+  it("no emite <a> ni <img> directos: todo pasa por ctx.componentes", () => {
+    const rutaFuente = fileURLToPath(new URL("./drawer-movil.tsx", import.meta.url))
+    const fuente = readFileSync(rutaFuente, "utf-8")
+    expect(fuente).not.toMatch(/<a[\s>]/)
+    expect(fuente).not.toMatch(/<img[\s>]/)
+  })
+})

package/src/chrome/drawer-movil.tsx

@@ -0,0 +1,342 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import type { RenderContext } from "../context"
+
+/**
+ * Drawer de navegación mobile — estética "Kinetic Street" (superficie, radio y
+ * sombra suaves, tokens `--cms-*` CON fallback). Lo abre el header (variante
+ * `minimal` y las barras mobile de inline/centrado/split).
+ *
+ * A11y básica: `role="dialog"` + `aria-modal`, cierre con Esc y con click en el
+ * scrim, foco inicial en el botón de cerrar y foco atrapado (Tab cicla dentro
+ * del panel). El body queda con scroll bloqueado mientras está abierto. La
+ * animación de entrada (slide + fade) respeta `prefers-reduced-motion`.
+ *
+ * `logo` es el logo REAL del chrome (texto o imagen), no un placeholder: se
+ * pinta con `ctx.componentes.Imagen` o como wordmark. Los enlaces de sesión y
+ * de cuenta usan `ctx.sesion` y las mismas rutas que el header (`/account`,
+ * `/favoritos`).
+ */
+
+export type DrawerMovilItem = { texto: string; href: string }
+export type DrawerMovilSeccion = { titulo: string; enlaces: DrawerMovilItem[] }
+/** Logo del chrome; estructuralmente compatible con `HeaderProps["logo"]`. */
+export type DrawerMovilLogo = { modo: "texto" | "imagen"; valor: string; tamaño?: number }
+
+const claseBorde = "[border-bottom:var(--cms-grosor-borde,1px)_solid_var(--cms-borde,#dbd6c9)]"
+
+const RUTAS = {
+  login: "/account",
+  registro: "/account",
+  pedidos: "/account/orders",
+  favoritos: "/favoritos",
+  cuenta: "/account",
+  logout: "/account/logout",
+  rastrear: "/ayuda/rastrear-pedido",
+  ayuda: "/ayuda/contacto",
+}
+
+const SELECTOR_FOCO =
+  'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])'
+
+// ── Estilos de entrada (respeta prefers-reduced-motion) ──────────────────────
+
+function EstiloDrawer() {
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html:
+          "@keyframes cms-drawer-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}" +
+          "@keyframes cms-scrim-in{from{opacity:0}to{opacity:1}}" +
+          ".cms-drawer-panel{animation:cms-drawer-in .28s cubic-bezier(.22,1,.36,1)}" +
+          ".cms-drawer-scrim{animation:cms-scrim-in .28s ease-out}" +
+          "@media (prefers-reduced-motion: reduce){.cms-drawer-panel,.cms-drawer-scrim{animation:none}}",
+      }}
+    />
+  )
+}
+
+// ── Logo real ────────────────────────────────────────────────────────────────
+
+function LogoDrawer({ logo, ctx }: { logo: DrawerMovilLogo; ctx: RenderContext }) {
+  const { Imagen, Enlace } = ctx.componentes
+  const alto = Math.max(12, logo.tamaño ?? 22)
+  return (
+    <Enlace href="/" className="inline-flex shrink-0 items-center">
+      {logo.modo === "imagen" && logo.valor ? (
+        <span className="inline-block" style={{ height: `${alto}px` }}>
+          <Imagen src={logo.valor} alt="Logo" className="h-full w-auto object-contain" />
+        </span>
+      ) : (
+        <span
+          className="leading-none"
+          style={{
+            fontSize: `${alto}px`,
+            fontFamily: "var(--cms-fuente-titulo)",
+            fontWeight: "var(--cms-titulo-peso,900)",
+            textTransform: "var(--cms-titulo-transform,uppercase)",
+            letterSpacing: "var(--cms-titulo-espaciado,-0.04em)",
+            color: "var(--cms-texto,#0c0c10)",
+          }}
+        >
+          {logo.valor || "Tienda"}
+        </span>
+      )}
+    </Enlace>
+  )
+}
+
+// ── Nav ────────────────────────────────────────────────────────────────────────
+
+function ItemMenu({ item, ctx }: { item: DrawerMovilItem; ctx: RenderContext }) {
+  const { Enlace } = ctx.componentes
+  return (
+    <Enlace
+      href={item.href}
+      className={`flex items-center justify-between py-[15px] text-[15px] font-semibold ${claseBorde}`}
+    >
+      {item.texto}
+    </Enlace>
+  )
+}
+
+function Acordeon({
+  seccion,
+  abierta,
+  onToggle,
+  ctx,
+}: {
+  seccion: DrawerMovilSeccion
+  abierta: boolean
+  onToggle: () => void
+  ctx: RenderContext
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div className={claseBorde}>
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={abierta}
+        className="flex w-full items-center justify-between bg-transparent py-[15px] text-[15px] font-semibold"
+        style={{ color: "var(--cms-texto,#0c0c10)" }}
+      >
+        {seccion.titulo}
+        <span className={`transition-transform ${abierta ? "rotate-90" : ""}`} aria-hidden>
+          ›
+        </span>
+      </button>
+      {abierta ? (
+        <div
+          className="flex flex-col gap-2.5 pb-4 pl-3 text-sm"
+          style={{ color: "var(--cms-texto-suave,#6b675e)" }}
+        >
+          {seccion.enlaces.map((enlace) => (
+            <Enlace key={enlace.href} href={enlace.href} className="block transition-opacity hover:opacity-70">
+              {enlace.texto}
+            </Enlace>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+// ── Sesión (enlaces reales) ──────────────────────────────────────────────────
+
+function BloqueInvitado({ ctx }: { ctx: RenderContext }) {
+  const { Enlace } = ctx.componentes
+  return (
+    <>
+      <Enlace
+        href={RUTAS.login}
+        className="block w-full py-3.5 text-center text-xs font-semibold uppercase tracking-[0.06em] [background:var(--cms-primario,#3b2bff)] [color:var(--cms-primario-texto,#fff)] [border-radius:var(--cms-radio-md,14px)] [font-family:var(--cms-fuente-texto)]"
+      >
+        Iniciar sesión
+      </Enlace>
+      <div className="mt-2.5 text-center text-[12.5px]">
+        ¿Nuevo aquí?{" "}
+        <Enlace href={RUTAS.registro} className="font-semibold underline">
+          Crea tu cuenta
+        </Enlace>
+      </div>
+      <div
+        className="mt-4 flex justify-center gap-[18px] text-[11.5px]"
+        style={{ color: "var(--cms-texto-suave,#6b675e)" }}
+      >
+        <Enlace href={RUTAS.rastrear} className="hover:opacity-70">
+          Rastrear pedido
+        </Enlace>
+        <Enlace href={RUTAS.ayuda} className="hover:opacity-70">
+          Ayuda
+        </Enlace>
+      </div>
+    </>
+  )
+}
+
+function BloqueRegistrado({ nombre, ctx }: { nombre?: string; ctx: RenderContext }) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div className="flex flex-col gap-3 text-sm">
+      <div className="text-sm font-semibold">Hola, {nombre}</div>
+      <div className="flex flex-col gap-3">
+        <Enlace href={RUTAS.pedidos} className="hover:opacity-70">
+          Mis pedidos
+        </Enlace>
+        <Enlace href={RUTAS.favoritos} className="hover:opacity-70">
+          Favoritos
+        </Enlace>
+        <Enlace href={RUTAS.cuenta} className="hover:opacity-70">
+          Mi cuenta
+        </Enlace>
+        <Enlace href={RUTAS.logout} className="hover:opacity-70" >
+          <span style={{ color: "var(--cms-texto-suave,#6b675e)" }}>Cerrar sesión</span>
+        </Enlace>
+      </div>
+    </div>
+  )
+}
+
+// ── Icono de cierre ──────────────────────────────────────────────────────────
+
+function IconoCerrar() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M6 6l12 12M18 6L6 18" />
+    </svg>
+  )
+}
+
+// ── Drawer ─────────────────────────────────────────────────────────────────────
+
+export function DrawerMovil({
+  abierto,
+  onCerrar,
+  logo,
+  menu,
+  secciones,
+  ctx,
+}: {
+  abierto: boolean
+  onCerrar: () => void
+  logo: DrawerMovilLogo
+  menu: DrawerMovilItem[]
+  secciones: DrawerMovilSeccion[]
+  ctx: RenderContext
+}) {
+  const [seccionAbierta, setSeccionAbierta] = useState<string | null>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const cerrarRef = useRef<HTMLButtonElement>(null)
+
+  // Esc para cerrar + foco atrapado (Tab cicla) + scroll del body bloqueado.
+  useEffect(() => {
+    if (!abierto) return
+    cerrarRef.current?.focus()
+
+    const previo = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onCerrar()
+        return
+      }
+      if (e.key !== "Tab") return
+      const panel = panelRef.current
+      if (!panel) return
+      const focusables = Array.from(panel.querySelectorAll<HTMLElement>(SELECTOR_FOCO)).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement,
+      )
+      if (focusables.length === 0) return
+      const primero = focusables[0]
+      const ultimo = focusables[focusables.length - 1]
+      if (e.shiftKey && document.activeElement === primero) {
+        e.preventDefault()
+        ultimo.focus()
+      } else if (!e.shiftKey && document.activeElement === ultimo) {
+        e.preventDefault()
+        primero.focus()
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown)
+    return () => {
+      document.removeEventListener("keydown", onKeyDown)
+      document.body.style.overflow = previo
+    }
+  }, [abierto, onCerrar])
+
+  if (!abierto) return null
+
+  return (
+    <>
+      <EstiloDrawer />
+      <div className="cms-drawer-scrim fixed inset-0 z-40 bg-black/50" onClick={onCerrar} aria-hidden />
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Menú"
+        className="cms-drawer-panel fixed left-0 top-0 z-50 flex h-full w-[90%] max-w-[390px] flex-col"
+        style={{
+          background: "var(--cms-superficie,#fff)",
+          color: "var(--cms-texto,#0c0c10)",
+          boxShadow: "var(--cms-sombra-lg,0 30px 70px -28px rgba(12,12,16,.4))",
+        }}
+      >
+        <div className={`flex items-center justify-between px-4 py-4 ${claseBorde}`}>
+          <LogoDrawer logo={logo} ctx={ctx} />
+          <button
+            ref={cerrarRef}
+            type="button"
+            onClick={onCerrar}
+            aria-label="Cerrar menú"
+            className="inline-flex items-center justify-center leading-none transition-opacity hover:opacity-70"
+          >
+            <IconoCerrar />
+          </button>
+        </div>
+
+        <nav aria-label="Menú principal" className="flex flex-1 flex-col overflow-y-auto px-4">
+          {menu.map((item, i) => (
+            <ItemMenu key={`${item.href}-${i}`} item={item} ctx={ctx} />
+          ))}
+          {secciones.map((seccion) => (
+            <Acordeon
+              key={seccion.titulo}
+              seccion={seccion}
+              abierta={seccionAbierta === seccion.titulo}
+              onToggle={() =>
+                setSeccionAbierta((actual) => (actual === seccion.titulo ? null : seccion.titulo))
+              }
+              ctx={ctx}
+            />
+          ))}
+        </nav>
+
+        <div
+          className="mt-auto px-4 py-4"
+          style={{ borderTop: "var(--cms-grosor-borde,1px) solid var(--cms-borde,#dbd6c9)" }}
+        >
+          {ctx.sesion?.autenticado ? (
+            <BloqueRegistrado nombre={ctx.sesion.nombre} ctx={ctx} />
+          ) : (
+            <BloqueInvitado ctx={ctx} />
+          )}
+        </div>
+      </div>
+    </>
+  )
+}