@arroyavecommerce/theme-kinetic 0.2.0

package/src/chrome/header.tsx

@@ -0,0 +1,592 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { z } from "zod"
+import type { ChromeConfig, ChromeVariantDef } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { AnnouncementBar, anuncioSchema, anuncioDefaults } from "./announcement-bar"
+import { DrawerMovil } from "./drawer-movil"
+import { MegaMenu, megaMenuSchema, megaMenuDefaults, type MegaMenuData } from "./mega-menu"
+import { MiniCart } from "./mini-cart"
+
+/**
+ * Header de la plantilla de moda — estética "Kinetic Street" (grotesca pesada,
+ * cobalto/coral, sombras y radios suaves). Todo se pinta con tokens `--cms-*`
+ * CON fallback, así el header se ve bien aunque el tema no publique el token.
+ *
+ * 100% editable/combinable desde el CMS: hay 4 variantes de LAYOUT
+ * (`inline`/`centrado`/`split`/`minimal`, cada una un `ChromeVariantDef`) y
+ * props COMBINABLES que aplican a cualquier layout y que el form-builder
+ * autogenera desde el schema Zod:
+ *   - `logo`     → texto o imagen, con tamaño configurable.
+ *   - `sticky`   → fijo / hide-on-scroll / shrink (`.describe("segmented")`).
+ *   - `acciones` → toggles buscar / cuenta / favoritos / carrito.
+ *   - `anuncio`  → schema re-usado de `announcement-bar` (anidado).
+ *   - `megaMenu` → panel en hover del nav (sin cambios respecto al original).
+ *
+ * El disparador de búsqueda navega a `/search?q=` (form GET nativo); la página
+ * de resultados la crea otro stream.
+ */
+
+type MenuItem = ChromeConfig["menu"]["items"][number]
+
+// ── Iconos SVG inline (sin dependencias; reemplazan los glifos ⌕ ☰ ◫) ────────
+
+type IconoProps = { size?: number; title?: string; className?: string }
+
+function SvgIcono({ title, size = 20, className, children }: IconoProps & { children: React.ReactNode }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      role="img"
+      aria-label={title}
+      aria-hidden={title ? undefined : true}
+      focusable="false"
+    >
+      {title ? <title>{title}</title> : null}
+      {children}
+    </svg>
+  )
+}
+
+const IconoBuscar = (p: IconoProps) => (
+  <SvgIcono {...p}>
+    <circle cx="11" cy="11" r="7" />
+    <path d="M21 21l-4.3-4.3" />
+  </SvgIcono>
+)
+const IconoMenu = (p: IconoProps) => (
+  <SvgIcono {...p}>
+    <path d="M3 6h18M3 12h18M3 18h18" />
+  </SvgIcono>
+)
+const IconoBolsa = (p: IconoProps) => (
+  <SvgIcono {...p}>
+    <path d="M6 8h12l-.8 12H6.8L6 8Z" />
+    <path d="M9 8V6a3 3 0 0 1 6 0v2" />
+  </SvgIcono>
+)
+const IconoCuenta = (p: IconoProps) => (
+  <SvgIcono {...p}>
+    <circle cx="12" cy="8" r="3.5" />
+    <path d="M5 20a7 7 0 0 1 14 0" />
+  </SvgIcono>
+)
+const IconoCorazon = (p: IconoProps) => (
+  <SvgIcono {...p}>
+    <path d="M12 20s-7-4.4-7-9.3A3.7 3.7 0 0 1 12 8a3.7 3.7 0 0 1 7 2.7C19 15.6 12 20 12 20Z" />
+  </SvgIcono>
+)
+const IconoCerrar = (p: IconoProps) => (
+  <SvgIcono {...p}>
+    <path d="M6 6l12 12M18 6L6 18" />
+  </SvgIcono>
+)
+
+// ── Schema (props combinables) ───────────────────────────────────────────────
+
+const logoSchema = z.object({
+  modo: z.enum(["texto", "imagen"]).describe("segmented"),
+  valor: z.string(),
+  /** Alto en px (imagen) o tamaño de fuente en px (texto). */
+  tamaño: z.number(),
+})
+
+const accionesSchema = z.object({
+  buscar: z.boolean(),
+  cuenta: z.boolean(),
+  favoritos: z.boolean(),
+  carrito: z.boolean(),
+})
+
+const schema = z.object({
+  logo: logoSchema,
+  sticky: z.enum(["fijo", "hide-on-scroll", "shrink"]).describe("segmented"),
+  acciones: accionesSchema,
+  anuncio: anuncioSchema,
+  megaMenu: megaMenuSchema,
+})
+export type HeaderProps = z.infer<typeof schema>
+type LogoConfig = HeaderProps["logo"]
+type AccionesConfig = HeaderProps["acciones"]
+type LayoutHeader = "inline" | "centrado" | "split" | "minimal"
+
+const defaults: HeaderProps = {
+  logo: { modo: "texto", valor: "MODA", tamaño: 24 },
+  sticky: "fijo",
+  acciones: { buscar: true, cuenta: true, favoritos: false, carrito: true },
+  anuncio: anuncioDefaults,
+  megaMenu: megaMenuDefaults,
+}
+
+const claseNav = "text-xs font-semibold uppercase tracking-[0.1em]"
+const claseAccion =
+  "inline-flex items-center justify-center leading-none transition-opacity hover:opacity-70"
+
+// ── Comportamiento sticky (fijo / hide-on-scroll / shrink) ───────────────────
+
+function useSticky(modo: HeaderProps["sticky"]) {
+  const [oculto, setOculto] = useState(false)
+  const [compacto, setCompacto] = useState(false)
+
+  useEffect(() => {
+    if (modo === "fijo") return
+    let ultimo = window.scrollY
+    const onScroll = () => {
+      const y = window.scrollY
+      if (modo === "hide-on-scroll") setOculto(y > 80 && y > ultimo)
+      if (modo === "shrink") setCompacto(y > 40)
+      ultimo = y
+    }
+    window.addEventListener("scroll", onScroll, { passive: true })
+    return () => window.removeEventListener("scroll", onScroll)
+  }, [modo])
+
+  return { oculto, compacto }
+}
+
+// ── Piezas compartidas ───────────────────────────────────────────────────────
+
+/** Logo real del chrome: imagen (via ctx.componentes.Imagen) o wordmark de texto. */
+function Marca({
+  logo,
+  ctx,
+  compacto,
+  className,
+}: {
+  logo: LogoConfig
+  ctx: RenderContext
+  compacto?: boolean
+  className?: string
+}) {
+  const { Imagen, Enlace } = ctx.componentes
+  const alto = Math.max(12, logo.tamaño - (compacto ? 4 : 0))
+  return (
+    <Enlace href="/" className={`inline-flex shrink-0 items-center ${className ?? ""}`}>
+      {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>
+  )
+}
+
+/**
+ * Bolsa con contador (badge via ctx.cartQuantities — back-compat). Abre el
+ * mini-cart drawer en vez de navegar a /cart; el contenido del drawer se
+ * alimenta de `ctx.carrito`.
+ */
+function BotonCarrito({ cantidad, onAbrir }: { cantidad: number; onAbrir: () => void }) {
+  return (
+    <button type="button" onClick={onAbrir} aria-label="Bolsa" className={`relative ${claseAccion}`}>
+      <IconoBolsa />
+      {cantidad > 0 ? (
+        <span
+          className="absolute -right-2 -top-2 inline-flex h-4 min-w-4 items-center justify-center px-1 text-[9px] font-bold leading-none"
+          style={{
+            borderRadius: "var(--cms-radio-full,999px)",
+            background: "var(--cms-acento,#3b2bff)",
+            color: "var(--cms-primario-texto,#fff)",
+          }}
+        >
+          {cantidad > 99 ? "99+" : cantidad}
+        </span>
+      ) : null}
+    </button>
+  )
+}
+
+/** Acciones del header (toggles): buscar / favoritos / cuenta / carrito. */
+function AccionesBar({
+  acciones,
+  ctx,
+  onBuscar,
+  onAbrirCarrito,
+  cartCount,
+  className,
+}: {
+  acciones: AccionesConfig
+  ctx: RenderContext
+  onBuscar: () => void
+  onAbrirCarrito: () => void
+  cartCount: number
+  className?: string
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <div className={`flex items-center gap-3.5 ${className ?? ""}`}>
+      {acciones.buscar ? (
+        <button type="button" onClick={onBuscar} aria-label="Buscar" className={claseAccion}>
+          <IconoBuscar />
+        </button>
+      ) : null}
+      {acciones.favoritos ? (
+        <Enlace href="/favoritos" className={claseAccion}>
+          <IconoCorazon title="Favoritos" />
+        </Enlace>
+      ) : null}
+      {acciones.cuenta ? (
+        <Enlace href="/account" className={claseAccion}>
+          <IconoCuenta title="Cuenta" />
+        </Enlace>
+      ) : null}
+      {acciones.carrito ? <BotonCarrito cantidad={cartCount} onAbrir={onAbrirCarrito} /> : null}
+    </div>
+  )
+}
+
+/** Nav horizontal de escritorio + MegaMenu en hover/focus (patrón `group`). */
+function NavDesktop({
+  items,
+  megaMenu,
+  ctx,
+  conMega = true,
+  className,
+}: {
+  items: MenuItem[]
+  megaMenu: MegaMenuData
+  ctx: RenderContext
+  conMega?: boolean
+  className?: string
+}) {
+  const { Enlace } = ctx.componentes
+  return (
+    <nav className={`group relative hidden items-center gap-6 md:flex ${className ?? ""}`}>
+      <div className="flex items-center gap-6">
+        {items.map((item, i) => (
+          <Enlace key={`${item.href}-${i}`} href={item.href} className={claseNav}>
+            {item.etiqueta}
+          </Enlace>
+        ))}
+      </div>
+      {conMega ? (
+        <div className="absolute left-0 top-full z-20 hidden w-max min-w-[420px] pt-3 group-hover:block group-focus-within:block">
+          <MegaMenu megaMenu={megaMenu} ctx={ctx} />
+        </div>
+      ) : null}
+    </nav>
+  )
+}
+
+/** Overlay de búsqueda: form GET nativo que navega a `/search?q=…`. */
+function BuscadorOverlay({ abierto, onCerrar }: { abierto: boolean; onCerrar: () => void }) {
+  if (!abierto) return null
+  return (
+    <div
+      className="fixed inset-0 z-50 flex flex-col px-5 py-5"
+      style={{ background: "var(--cms-fondo,#f1eee6)", color: "var(--cms-texto,#0c0c10)" }}
+    >
+      <div className="flex items-center justify-end">
+        <button type="button" onClick={onCerrar} aria-label="Cerrar búsqueda" className={claseAccion}>
+          <IconoCerrar size={24} />
+        </button>
+      </div>
+      <form className="mx-auto mt-8 w-full max-w-2xl" action="/search" method="get" role="search">
+        <input
+          type="search"
+          name="q"
+          placeholder="Buscar productos"
+          aria-label="Buscar productos"
+          autoFocus
+          className="w-full border-0 border-b bg-transparent py-3 text-lg outline-none"
+          style={{ borderBottomWidth: "var(--cms-grosor-borde,1px)", borderColor: "var(--cms-borde,#dbd6c9)" }}
+        />
+        <button type="submit" className="sr-only">
+          Buscar
+        </button>
+      </form>
+    </div>
+  )
+}
+
+/** Barra mobile común (inline/centrado/split): hamburguesa · logo · acciones. */
+function BarraMobile({
+  props,
+  ctx,
+  onAbrirMenu,
+  onBuscar,
+  onAbrirCarrito,
+  cartCount,
+  padY,
+}: {
+  props: HeaderProps
+  ctx: RenderContext
+  onAbrirMenu: () => void
+  onBuscar: () => void
+  onAbrirCarrito: () => void
+  cartCount: number
+  padY: string
+}) {
+  return (
+    <div className={`flex items-center justify-between px-4 md:hidden ${padY}`}>
+      <button type="button" onClick={onAbrirMenu} aria-label="Abrir menú" className={claseAccion}>
+        <IconoMenu />
+      </button>
+      <Marca logo={props.logo} ctx={ctx} />
+      <div className="flex items-center gap-3.5">
+        {props.acciones.buscar ? (
+          <button type="button" onClick={onBuscar} aria-label="Buscar" className={claseAccion}>
+            <IconoBuscar />
+          </button>
+        ) : null}
+        {props.acciones.carrito ? <BotonCarrito cantidad={cartCount} onAbrir={onAbrirCarrito} /> : null}
+      </div>
+    </div>
+  )
+}
+
+// ── Layouts de escritorio ────────────────────────────────────────────────────
+
+function DesktopInline({
+  props,
+  ctx,
+  menu,
+  acciones,
+  padY,
+}: {
+  props: HeaderProps
+  ctx: RenderContext
+  menu: MenuItem[]
+  acciones: React.ReactNode
+  padY: string
+}) {
+  return (
+    <div className={`hidden items-center justify-between gap-6 px-7 md:flex ${padY}`}>
+      <Marca logo={props.logo} ctx={ctx} />
+      <NavDesktop items={menu} megaMenu={props.megaMenu} ctx={ctx} className="flex-1 justify-center" />
+      {acciones}
+    </div>
+  )
+}
+
+function DesktopCentrado({
+  props,
+  ctx,
+  menu,
+  acciones,
+  padY,
+  onBuscar,
+}: {
+  props: HeaderProps
+  ctx: RenderContext
+  menu: MenuItem[]
+  acciones: React.ReactNode
+  padY: string
+  onBuscar: () => void
+}) {
+  return (
+    <div className="hidden flex-col md:flex">
+      <div className={`grid grid-cols-3 items-center px-7 ${padY}`}>
+        <div className="flex items-center">
+          {props.acciones.buscar ? (
+            <button type="button" onClick={onBuscar} aria-label="Buscar" className={claseAccion}>
+              <IconoBuscar />
+            </button>
+          ) : null}
+        </div>
+        <Marca logo={props.logo} ctx={ctx} className="mx-auto" />
+        <div className="flex justify-end">{acciones}</div>
+      </div>
+      <NavDesktop
+        items={menu}
+        megaMenu={props.megaMenu}
+        ctx={ctx}
+        className="justify-center px-7 py-3"
+      />
+    </div>
+  )
+}
+
+function DesktopSplit({
+  props,
+  ctx,
+  menu,
+  acciones,
+  padY,
+}: {
+  props: HeaderProps
+  ctx: RenderContext
+  menu: MenuItem[]
+  acciones: React.ReactNode
+  padY: string
+}) {
+  const mitad = Math.ceil(menu.length / 2)
+  const izquierda = menu.slice(0, mitad)
+  const derecha = menu.slice(mitad)
+  return (
+    <div className={`hidden grid-cols-[1fr_auto_1fr] items-center px-7 md:grid ${padY}`}>
+      <NavDesktop items={izquierda} megaMenu={props.megaMenu} ctx={ctx} className="justify-start" />
+      <Marca logo={props.logo} ctx={ctx} className="mx-auto" />
+      <div className="flex items-center justify-end gap-6">
+        <NavDesktop items={derecha} megaMenu={props.megaMenu} ctx={ctx} conMega={false} className="justify-end" />
+        {acciones}
+      </div>
+    </div>
+  )
+}
+
+/** Minimal: todo en drawer. Barra única (todas las medidas): menú · logo · acciones. */
+function BarraMinimal({
+  props,
+  ctx,
+  acciones,
+  padY,
+  onAbrirMenu,
+}: {
+  props: HeaderProps
+  ctx: RenderContext
+  acciones: React.ReactNode
+  padY: string
+  onAbrirMenu: () => void
+}) {
+  return (
+    <div className={`grid grid-cols-3 items-center px-4 md:px-7 ${padY}`}>
+      <div className="flex justify-start">
+        <button type="button" onClick={onAbrirMenu} aria-label="Abrir menú" className={claseAccion}>
+          <IconoMenu />
+        </button>
+      </div>
+      <Marca logo={props.logo} ctx={ctx} className="mx-auto" />
+      <div className="flex justify-end">{acciones}</div>
+    </div>
+  )
+}
+
+// ── Base ─────────────────────────────────────────────────────────────────────
+
+function HeaderBase({
+  props,
+  ctx,
+  menu,
+  layout,
+}: {
+  props: HeaderProps
+  ctx: RenderContext
+  menu: MenuItem[]
+  layout: LayoutHeader
+}) {
+  const [drawerAbierto, setDrawerAbierto] = useState(false)
+  const [busquedaAbierta, setBusquedaAbierta] = useState(false)
+  const [carritoAbierto, setCarritoAbierto] = useState(false)
+  const { oculto, compacto } = useSticky(props.sticky)
+
+  const cartCount = Object.values(ctx.cartQuantities ?? {}).reduce((suma, n) => suma + n, 0)
+  const abrirBusqueda = () => setBusquedaAbierta(true)
+  const abrirMenu = () => setDrawerAbierto(true)
+  const abrirCarrito = () => setCarritoAbierto(true)
+  const menuDrawer = menu.map((item) => ({ texto: item.etiqueta, href: item.href }))
+  const padY = compacto ? "py-2" : "py-4"
+
+  const acciones = (
+    <AccionesBar
+      acciones={props.acciones}
+      ctx={ctx}
+      onBuscar={abrirBusqueda}
+      onAbrirCarrito={abrirCarrito}
+      cartCount={cartCount}
+      className="justify-end"
+    />
+  )
+
+  return (
+    <>
+      <AnnouncementBar anuncio={props.anuncio} ctx={ctx} />
+      <header
+        className="sticky top-0 z-30 w-full transition-transform duration-300"
+        style={{
+          background: "var(--cms-fondo,#f1eee6)",
+          color: "var(--cms-texto,#0c0c10)",
+          borderBottom: "var(--cms-grosor-borde,1px) solid var(--cms-borde,#dbd6c9)",
+          boxShadow: compacto ? "var(--cms-sombra-md,0 10px 30px -12px rgba(0,0,0,.18))" : "none",
+          transform: oculto ? "translateY(-100%)" : "translateY(0)",
+        }}
+      >
+        {layout === "minimal" ? (
+          <BarraMinimal props={props} ctx={ctx} acciones={acciones} padY={padY} onAbrirMenu={abrirMenu} />
+        ) : (
+          <>
+            {layout === "inline" ? (
+              <DesktopInline props={props} ctx={ctx} menu={menu} acciones={acciones} padY={padY} />
+            ) : layout === "centrado" ? (
+              <DesktopCentrado
+                props={props}
+                ctx={ctx}
+                menu={menu}
+                acciones={acciones}
+                padY={padY}
+                onBuscar={abrirBusqueda}
+              />
+            ) : (
+              <DesktopSplit props={props} ctx={ctx} menu={menu} acciones={acciones} padY={padY} />
+            )}
+            <BarraMobile
+              props={props}
+              ctx={ctx}
+              onAbrirMenu={abrirMenu}
+              onBuscar={abrirBusqueda}
+              onAbrirCarrito={abrirCarrito}
+              cartCount={cartCount}
+              padY={padY}
+            />
+          </>
+        )}
+      </header>
+      <DrawerMovil
+        abierto={drawerAbierto}
+        onCerrar={() => setDrawerAbierto(false)}
+        logo={props.logo}
+        menu={menuDrawer}
+        secciones={props.megaMenu.columnas}
+        ctx={ctx}
+      />
+      <BuscadorOverlay abierto={busquedaAbierta} onCerrar={() => setBusquedaAbierta(false)} />
+      {props.acciones.carrito ? (
+        <MiniCart
+          abierto={carritoAbierto}
+          onCerrar={() => setCarritoAbierto(false)}
+          carrito={ctx.carrito}
+          ctx={ctx}
+        />
+      ) : null}
+    </>
+  )
+}
+
+// ── Variantes registrables ───────────────────────────────────────────────────
+
+function variante(label: string, layout: LayoutHeader): ChromeVariantDef<HeaderProps, RenderContext> {
+  return {
+    label,
+    schema,
+    defaults,
+    Component: ({ props, ctx, menu }) => <HeaderBase props={props} ctx={ctx} menu={menu} layout={layout} />,
+  }
+}
+
+export const headerInline = variante("Inline", "inline")
+export const headerCentrado = variante("Centrado", "centrado")
+export const headerSplit = variante("Split", "split")
+export const headerMinimal = variante("Minimal", "minimal")

package/src/chrome/index.ts

@@ -0,0 +1,26 @@
+import { defineChrome } from "@arroyavecommerce/cms-core"
+import type { RenderContext } from "../context"
+import { headerInline, headerCentrado, headerSplit, headerMinimal } from "./header"
+import { footerModa, footerMinimal, footerNewsletter } from "./footer"
+
+export const chromeRegistry = defineChrome<RenderContext>()({
+  headers: {
+    inline: headerInline,
+    centrado: headerCentrado,
+    split: headerSplit,
+    minimal: headerMinimal,
+  },
+  footers: { moda: footerModa, minimal: footerMinimal, newsletter: footerNewsletter },
+})
+
+export {
+  headerInline,
+  headerCentrado,
+  headerSplit,
+  headerMinimal,
+  footerModa,
+  footerMinimal,
+  footerNewsletter,
+}
+export type { HeaderProps } from "./header"
+export type { FooterProps, ModaProps, MinimalProps, NewsletterProps } from "./footer"