@unbox-plus/cli 0.20.4

package/template/components/chrome/announce-bar.tsx

@@ -0,0 +1,57 @@
+// Barra de anúncio (desktop) — fica ACIMA do header e rola pra fora.
+// Compartilhada por todas as variantes de header: o conteúdo é comercial (frete/brinde),
+// não estrutura de marca, e a regra de honestidade tem que valer igual em todas.
+//
+// Só renderiza quando há promessa REAL configurada em lib/store-config (defaults zerados =
+// a barra inteira some). A casca não a renderiza no modo "sobreposto" (header transparente).
+//
+// EDITOR: a faixa é uma seção do chrome (`chrome.faixa`, fixa) e cada aviso é um ITEM de lista
+// aninhada, com id de PAPEL (`frete`, `brinde`), não posicional: os dois só existem quando a
+// configuração comercial existe, e um id posicional mudaria de dono conforme o que está ligado.
+// O lojista troca o texto, reordena, oculta e duplica pelo painel ("+ Adicionar" copia o último
+// aviso visível: é assim que ele acrescenta um aviso próprio). O VALOR do frete (R$X) fica fora do
+// primitivo: é configuração da loja (lib/store-config), não copy (README do editor, §8). A cópia
+// do aviso no celular mora em components/chrome/header-bar-mobile.tsx, dentro do cabeçalho.
+import { Truck } from "@phosphor-icons/react/dist/ssr";
+import { FREE_SHIPPING_THRESHOLD, GIFT_TIERS } from "@/lib/store-config";
+// Exports NOMEADOS: server component (ver components/site-header.tsx).
+import { EditableIcon, EditableSection, EditableSections, EditableText } from "@/lib/editable";
+
+export function AnnounceBar() {
+  if (FREE_SHIPPING_THRESHOLD == null && GIFT_TIERS.length === 0) return null;
+
+  return (
+    <EditableSection id="faixa" kind="faixa-de-anuncio" container="chrome" fixed label="Faixa de anúncio do topo">
+      <div className="store-layout site-chrome hidden items-stretch bg-[var(--store-chrome-bg,#18181B)] text-[13px] font-semibold text-[var(--store-chrome-text,#ffffff)] md:flex">
+        <div className="flex flex-1 items-center justify-center gap-2 px-4 py-[9px]">
+          {/* a className era do ícone; vai para o invólucro do Icon (regra do `Editable.Icon`) */}
+          <EditableIcon path="icone" label="Ícone da faixa" size={16} className="text-base text-[var(--store-cta,#D97706)]">
+            <Truck weight="bold" />
+          </EditableIcon>
+          {/* o invólucro de cada item é display:contents: quem continua sendo filho do flex é o <span> do aviso */}
+          <EditableSections nested>
+            {FREE_SHIPPING_THRESHOLD != null && (
+              <EditableSection item id="frete" label="Aviso de frete grátis">
+                <span className="text-[var(--store-surface-2)]">
+                  <EditableText path="texto" fallback="Frete Grátis acima de" label="Texto do aviso de frete" />{" "}
+                  <span className="text-[var(--store-chrome-text,#ffffff)]">R${FREE_SHIPPING_THRESHOLD}</span>
+                </span>
+              </EditableSection>
+            )}
+            {GIFT_TIERS.length > 0 && (
+              <EditableSection item id="brinde" label="Aviso de brinde">
+                <EditableText
+                  path="texto"
+                  fallback={`${FREE_SHIPPING_THRESHOLD != null ? "· e ganhe" : "Ganhe"} brindes exclusivos`}
+                  label="Texto do aviso de brinde"
+                  className="text-[var(--store-chrome-muted)]"
+                />
+              </EditableSection>
+            )}
+          </EditableSections>
+        </div>
+        {/* TODO: adicionar badge de cupom/promoção da marca */}
+      </div>
+    </EditableSection>
+  );
+}

package/template/components/chrome/chrome-recipe.ts

@@ -0,0 +1,13 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// RECEITA DO CHROME — qual header e qual rodapé esta loja usa.
+// Escrita pelo create-unbox-store conforme o ESTILO escolhido no setup; editada
+// pelo agente de branding no briefing (é AQUI que o chrome muda — não reescreva
+// o JSX de uma variante; catálogo em agents/PADROES.md).
+// `npm run typecheck` acusa header/rodapé inexistente.
+// ═══════════════════════════════════════════════════════════════════════════
+import type { ChromeRecipe } from "@/components/chrome/registry";
+
+export const chromeRecipe: ChromeRecipe = {
+  header: "classico",
+  footer: "colunas",
+};

package/template/components/chrome/footers/captura-botao.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+// O BOTÃO da captura de e-mail do rodapé "conversão", isolado num componente de CLIENTE.
+//
+// POR QUE ELE EXISTE, e por que não pode voltar para dentro do conversao.tsx:
+// `EditableSlot` é client e recebe os filhos como FUNÇÃO (render-prop) para devolver o mesmo
+// elemento sem invólucro. O rodapé é Server Component, e função não atravessa a fronteira
+// servidor→cliente: o build quebra com "Functions cannot be passed directly to Client Components".
+// Como o rodapé vive no layout de `(loja)`, o erro derrubava o prerender de TODA página, não só do
+// rodapé — e só no estilo promocional, que é o único preset que usa este rodapé por padrão.
+import { EditableSlot } from "@/lib/editable";
+
+export function CapturaBotao({ label = "QUERO" }: { label?: string }) {
+  return (
+    <EditableSlot path="captura.botao" type="text" fallback={label} label="Texto do botão da captura">
+      {(v, attrs, ref) => (
+        <button
+          ref={ref as React.Ref<HTMLButtonElement>}
+          {...attrs}
+          type="submit"
+          className="font-display h-11 shrink-0 rounded-full bg-[var(--store-cta,#D97706)] px-6 text-[14px] font-extrabold tracking-[0.5px] text-[var(--store-cta-fg,#1C1207)] transition-opacity hover:opacity-90"
+        >
+          {v}
+        </button>
+      )}
+    </EditableSlot>
+  );
+}

package/template/components/chrome/footers/colunas.tsx

@@ -0,0 +1,110 @@
+// RODAPÉ "colunas" — trust strip + 4 colunas (marca, catálogo, ajuda, pagamento).
+// É o rodapé de loja completa: cobre navegação secundária e reforço de confiança.
+//
+// A barra inferior (© + selo Powered by Unbox) NÃO está aqui: ela é da casca
+// (components/site-footer.tsx), porque é contrato da plataforma e não pode variar.
+//
+// EDITOR: o escopo (`chrome.footer`) vem da casca. Os selos são uma LISTA editável (`selo-N`, com
+// ícone e texto: o lojista troca, reordena, oculta e duplica). Dois tipos de link nas colunas, pela
+// regra §8 do README do editor. LINK DE MARCA (tem `chave`): o rótulo é uma frase da marca e o
+// lojista o batiza ("Todos os produtos", "Kits & Combos"): rótulo e destino editáveis em
+// `<coluna>.<chave>`. LINK DE INTERFACE (sem `chave`): nomeia uma mecânica da loja ou uma página
+// legal ("Buscar", "Minha conta", "Termos"): fica no código. O título de cada coluna é editável.
+import Link from "next/link";
+import { Truck, ShieldCheck } from "@phosphor-icons/react/dist/ssr";
+import { PaymentChips } from "@/components/product/pdp/payment-chips";
+// Exports NOMEADOS: server component (ver components/site-footer.tsx).
+import { EditableIcon, EditableImg, EditableLink, EditableSection, EditableSections, EditableText } from "@/lib/editable";
+import type { ChromeVariantProps } from "../registry";
+
+// Âncoras de confiança: só o que a foundation PODE afirmar (SSL e o prazo do CDC). Prazo de
+// entrega, garantia e atendimento são promessas do lojista: entram pelo briefing, com lastro.
+const TRUST = [
+  { icon: ShieldCheck, text: "Compra segura (SSL)" },
+  { icon: Truck, text: "Troca em 7 dias · CDC" },
+];
+
+export function FooterColunas({ data }: ChromeVariantProps) {
+  const { shopName } = data;
+
+  return (
+    <>
+      {/* trust — lista editável: o invólucro do item é display:contents, então quem continua
+          sendo a célula do grid é o próprio <div> do selo */}
+      <div className="mx-auto grid max-w-[var(--container-max,1240px)] grid-cols-2 gap-x-6 border-b border-[var(--store-chrome-line,rgba(255,255,255,.1))] px-6 py-8 ">
+        <EditableSections nested>
+          {TRUST.map((t, i) => (
+            <EditableSection key={t.text} item id={`selo-${i + 1}`} label={`Selo de confiança ${i + 1}`}>
+              <div className="flex items-center gap-3.5 py-1.5">
+                {/* a className fica no ícone (é ela que dá o tamanho e a cor); o `size` é o
+                    tamanho da imagem que o lojista subir no lugar */}
+                <EditableIcon path="icone" label="Ícone do selo" size={28} className="text-[28px] text-[var(--store-cta,#D97706)]">
+                  <t.icon />
+                </EditableIcon>
+                <EditableText as="div" path="texto" fallback={t.text} label="Texto do selo" className="text-[13px] leading-snug text-[var(--store-chrome-muted)]" />
+              </div>
+            </EditableSection>
+          ))}
+        </EditableSections>
+      </div>
+
+      {/* colunas */}
+      <div className="mx-auto grid max-w-[var(--container-max,1240px)] gap-8 px-6 py-9 sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1fr]">
+        <div>
+          {/* logo-chrome.svg = versão do logo legível sobre o chrome (o CLI troca conforme o
+              estilo: chrome escuro usa o logo branco, chrome claro usa o logo normal).
+              <img> puro (EditableImg), não next/image: SVG de poucos KB em toda página. */}
+          <EditableImg path="logo" fallback={{ src: "/brand/logo-chrome.svg", alt: shopName }} label="Logo do rodapé" className="mb-3.5 h-16 w-auto" />
+          {/* TODO: tagline da marca (EditableText path="frase", como a loja piloto) */}
+        </div>
+        <FooterCol path="coluna-catalogo" title="Catálogo" links={[
+          { chave: "todos", label: "Todos os produtos", href: "/produtos" },
+          { label: "Buscar", href: "/busca" },
+          { chave: "combos", label: "Kits & Combos", href: "/produtos" },
+          { chave: "ofertas", label: "Ofertas", href: "/produtos" },
+        ]} />
+        <FooterCol path="coluna-ajuda" title="Ajuda" links={[
+          { label: "Acompanhar pedido", href: "/conta/entrar" },
+          { label: "Trocas e devoluções", href: "/devolucoes" },
+          { label: "Termos", href: "/termos" },
+          { label: "Minha conta", href: "/conta" },
+        ]} />
+        <div>
+          <EditableText as="div" path="pagamento.titulo" fallback="Pague com" label="Título das formas de pagamento" className="font-display mb-3 text-sm font-bold" />
+          {/* As bandeiras são selo de terceiro (interface de pagamento), não imagem da marca: não viram
+              primitivo. O `data-editor-ignore` mora no próprio componente (payment-chips.tsx). */}
+          <PaymentChips />
+        </div>
+      </div>
+    </>
+  );
+}
+
+type LinkDoRodape = {
+  /** caminho do link no editor (`<coluna>.<chave>`); sem ele o link é de interface e fica no código */
+  chave?: string;
+  label: string;
+  href: string;
+};
+
+const CLASSE_LINK = "no-underline hover:text-[var(--store-chrome-text,#ffffff)]";
+
+/** `path` = prefixo dos caminhos no editor; o título da coluna e os links de marca (com `chave`) são editáveis. */
+function FooterCol({ path, title, links }: { path: string; title: string; links: LinkDoRodape[] }) {
+  return (
+    <div>
+      <EditableText as="div" path={`${path}.titulo`} fallback={title} label={`Título da coluna: ${title}`} className="font-display mb-3 text-sm font-bold" />
+      <div className="flex flex-col gap-2.5 text-[13px] text-[var(--store-chrome-muted)]">
+        {links.map((l) =>
+          l.chave ? (
+            <EditableLink key={l.label} path={`${path}.${l.chave}`} fallback={{ href: l.href, label: l.label }} label={`Link: ${l.label}`} className={CLASSE_LINK}>
+              {l.label}
+            </EditableLink>
+          ) : (
+            <Link key={l.label} href={l.href} className={CLASSE_LINK} data-editor-ignore="">{l.label}</Link>
+          ),
+        )}
+      </div>
+    </div>
+  );
+}

package/template/components/chrome/footers/conversao.tsx

@@ -0,0 +1,90 @@
+// RODAPÉ "conversão" — captura de e-mail em destaque no topo, links enxutos e meios de
+// pagamento com peso. O rodapé como última chance de conversão, não como mapa do site.
+//
+// Quando usar: loja promocional/campanha, onde a lista de e-mail vale mais que a navegação.
+// Quando NÃO usar: catálogo grande que precisa de navegação secundária (veja "colunas").
+//
+// EDITOR: o escopo (`chrome.footer`) vem da casca. A captura tem título, texto e o texto do botão
+// editáveis (`captura.*`); campo e placeholder do formulário são INTERFACE e ficam fora (README
+// do editor, §8). Nas colunas, link de marca (com `chave`) é editável em `<coluna>.<chave>`; link
+// de interface fica no código. O título de cada coluna é editável.
+import Link from "next/link";
+import { PaymentChips } from "@/components/product/pdp/payment-chips";
+// Exports NOMEADOS: server component (ver components/site-footer.tsx).
+import { EditableImg, EditableLink, EditableText } from "@/lib/editable";
+import { CapturaBotao } from "./captura-botao";
+import { NEWSLETTER_ACTION } from "@/lib/newsletter";
+import type { ChromeVariantProps } from "../registry";
+
+export function FooterConversao({ data }: ChromeVariantProps) {
+  const { shopName } = data;
+
+  return (
+    <>
+      {/* Captura de e-mail: só existe com destino real (NEXT_PUBLIC_NEWSLETTER_ACTION). Sem ele,
+          a faixa inteira some — inclusive a borda, senão fica uma tira vazia no topo do rodapé. */}
+      {NEWSLETTER_ACTION && (
+        <div className="border-b border-[var(--store-chrome-line,rgba(255,255,255,.1))]">
+          <div className="mx-auto flex max-w-[var(--container-max,1240px)] flex-wrap items-center gap-6 px-6 py-10">
+            <div className="min-w-[260px] flex-1">
+              <EditableText as="div" path="captura.titulo" fallback="Receba as novidades antes" label="Título da captura de e-mail" className="font-display text-[24px] font-extrabold leading-[1.15] text-[var(--store-chrome-text,#ffffff)]" />
+              <EditableText as="p" path="captura.texto" fallback="Ofertas e lançamentos direto no seu e-mail." label="Texto da captura de e-mail" className="mt-1.5 text-[14px] text-[var(--store-chrome-muted)]" />
+            </div>
+            <form method="post" action={NEWSLETTER_ACTION} className="flex w-full max-w-[440px] items-center gap-1.5 rounded-full bg-white p-1.5">
+              <input type="email" name="email" required placeholder="Seu melhor e-mail" aria-label="Seu e-mail" className="h-11 min-w-0 flex-1 rounded-full bg-transparent px-4 text-sm text-[var(--store-ink)] outline-none" />
+              <CapturaBotao />
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* links + pagamento */}
+      <div className="mx-auto grid max-w-[var(--container-max,1240px)] gap-8 px-6 py-9 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_1.2fr]">
+        <FooterCol path="coluna-comprar" title="Comprar" links={[
+          { chave: "todos", label: "Todos os produtos", href: "/produtos" },
+          { chave: "ofertas", label: "Ofertas", href: "/produtos" },
+          { label: "Buscar", href: "/busca" },
+        ]} />
+        <FooterCol path="coluna-ajuda" title="Ajuda" links={[
+          { label: "Acompanhar pedido", href: "/conta/entrar" },
+          { label: "Trocas e devoluções", href: "/devolucoes" },
+          { label: "Termos", href: "/termos" },
+        ]} />
+        <div>
+          <EditableText as="div" path="pagamento.titulo" fallback="Pague com" label="Título das formas de pagamento" className="font-display mb-3 text-sm font-bold" />
+          <PaymentChips />
+          {/* <img> puro (EditableImg), não next/image: logo do chrome é SVG de poucos KB em toda página. */}
+          <EditableImg path="logo" fallback={{ src: "/brand/logo-chrome.svg", alt: shopName }} label="Logo do rodapé" className="mt-6 h-11 w-auto opacity-90" />
+        </div>
+      </div>
+    </>
+  );
+}
+
+type LinkDoRodape = {
+  /** caminho do link no editor (`<coluna>.<chave>`); sem ele o link é de interface e fica no código */
+  chave?: string;
+  label: string;
+  href: string;
+};
+
+const CLASSE_LINK = "no-underline hover:text-[var(--store-chrome-text,#ffffff)]";
+
+function FooterCol({ path, title, links }: { path: string; title: string; links: LinkDoRodape[] }) {
+  return (
+    <div>
+      <EditableText as="div" path={`${path}.titulo`} fallback={title} label={`Título da coluna: ${title}`} className="font-display mb-3 text-sm font-bold" />
+      <div className="flex flex-col gap-2.5 text-[13px] text-[var(--store-chrome-muted)]">
+        {links.map((l) =>
+          l.chave ? (
+            <EditableLink key={l.label} path={`${path}.${l.chave}`} fallback={{ href: l.href, label: l.label }} label={`Link: ${l.label}`} className={CLASSE_LINK}>
+              {l.label}
+            </EditableLink>
+          ) : (
+            <Link key={l.label} href={l.href} className={CLASSE_LINK} data-editor-ignore="">{l.label}</Link>
+          ),
+        )}
+      </div>
+    </div>
+  );
+}

package/template/components/chrome/footers/editorial.tsx

@@ -0,0 +1,98 @@
+// RODAPÉ "editorial" — um parágrafo de marca (manifesto curto) ocupando a coluna larga,
+// links em colunas discretas e redes sociais. Fecha a página com voz, não com selos.
+//
+// Quando usar: marca com história pra contar, clube/assinatura, tom de revista.
+// Quando NÃO usar: loja de conversão pura (veja "conversao").
+//
+// EDITOR: o escopo (`chrome.footer`) vem da casca. Logo e manifesto são caminhos da seção; as
+// redes são uma LISTA editável (`redes.rede-N`, só o nome: a foundation não sabe a URL de rede
+// nenhuma, e o briefing é quem a traz). Nas colunas, link de marca (com `chave`) é editável em
+// `<coluna>.<chave>`; link de interface fica no código. O título de cada coluna é editável.
+import Link from "next/link";
+import { PaymentChips } from "@/components/product/pdp/payment-chips";
+// Exports NOMEADOS: server component (ver components/site-footer.tsx).
+import { EditableImg, EditableLink, EditableScope, EditableSection, EditableSections, EditableText } from "@/lib/editable";
+import type { ChromeVariantProps } from "../registry";
+
+// TODO: trocar pelas redes REAIS da marca (do briefing/rodapé do site atual).
+const REDES = ["Instagram", "YouTube", "Newsletter"];
+
+export function FooterEditorial({ data }: ChromeVariantProps) {
+  const { shopName } = data;
+
+  return (
+    <div className="mx-auto grid max-w-[var(--container-max,1240px)] gap-10 px-6 py-12 lg:grid-cols-[1.6fr_1fr_1fr]">
+      <div className="max-w-[420px]">
+        {/* <img> puro (EditableImg), não next/image: logo do chrome é SVG de poucos KB em toda página. */}
+        <EditableImg path="logo" fallback={{ src: "/brand/logo-chrome.svg", alt: shopName }} label="Logo do rodapé" className="h-14 w-auto" />
+        {/* TODO: troque pelo manifesto REAL da marca (1 parágrafo, voz do briefing). */}
+        <EditableText
+          as="p"
+          path="manifesto"
+          fallback="Uma curadoria feita com calma, pensada pra durar. Cada item aqui passou por escolha, teste e uso real antes de chegar até você."
+          label="Manifesto da marca"
+          multiline
+          className="mt-5 text-[14px] leading-[1.65] text-[var(--store-chrome-muted)]"
+        />
+        <div className="mt-6 flex flex-wrap gap-4 text-[13px] text-[var(--store-chrome-muted)]">
+          {/* lista editável: o invólucro do item é display:contents, o <span> segue sendo o filho do flex */}
+          <EditableScope path="redes">
+            <EditableSections nested>
+              {REDES.map((r, i) => (
+                <EditableSection key={r} item id={`rede-${i + 1}`} label={`Rede ${i + 1}`}>
+                  <EditableText path="texto" fallback={r} label="Nome da rede" />
+                </EditableSection>
+              ))}
+            </EditableSections>
+          </EditableScope>
+        </div>
+      </div>
+
+      <FooterCol path="coluna-loja" title="Loja" links={[
+        { chave: "todos", label: "Todos os produtos", href: "/produtos" },
+        { label: "Buscar", href: "/busca" },
+        { label: "Minha conta", href: "/conta" },
+      ]} />
+
+      <div>
+        <FooterCol path="coluna-institucional" title="Institucional" links={[
+          { label: "Trocas e devoluções", href: "/devolucoes" },
+          { label: "Termos", href: "/termos" },
+          { label: "Privacidade", href: "/privacidade" },
+        ]} />
+        <div className="mt-7">
+          <EditableText as="div" path="pagamento.titulo" fallback="Pague com" label="Título das formas de pagamento" className="font-display mb-3 text-sm font-bold" />
+          <PaymentChips />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type LinkDoRodape = {
+  /** caminho do link no editor (`<coluna>.<chave>`); sem ele o link é de interface e fica no código */
+  chave?: string;
+  label: string;
+  href: string;
+};
+
+const CLASSE_LINK = "no-underline hover:text-[var(--store-chrome-text,#ffffff)]";
+
+function FooterCol({ path, title, links }: { path: string; title: string; links: LinkDoRodape[] }) {
+  return (
+    <div>
+      <EditableText as="div" path={`${path}.titulo`} fallback={title} label={`Título da coluna: ${title}`} className="font-display mb-3 text-[12px] font-bold uppercase tracking-[1.4px]" />
+      <div className="flex flex-col gap-2.5 text-[13px] text-[var(--store-chrome-muted)]">
+        {links.map((l) =>
+          l.chave ? (
+            <EditableLink key={l.label} path={`${path}.${l.chave}`} fallback={{ href: l.href, label: l.label }} label={`Link: ${l.label}`} className={CLASSE_LINK}>
+              {l.label}
+            </EditableLink>
+          ) : (
+            <Link key={l.label} href={l.href} className={CLASSE_LINK} data-editor-ignore="">{l.label}</Link>
+          ),
+        )}
+      </div>
+    </div>
+  );
+}

package/template/components/chrome/footers/minimal.tsx

@@ -0,0 +1,55 @@
+// RODAPÉ "minimal" — logo pequeno, uma linha de links e pagamento discreto. Muito ar.
+// O rodapé some da atenção: quem chegou até aqui já decidiu, e a marca não quer ruído.
+//
+// Quando usar: catálogo curto, estética premium/minimal, poucas páginas institucionais.
+// Quando NÃO usar: loja com muita navegação secundária ou muita informação legal (veja
+// "colunas"). Os links legais continuam aqui — some o peso visual, nunca o acesso.
+//
+// EDITOR: o escopo (`chrome.footer`) vem da casca. O logo é caminho da seção; na linha de links,
+// só "Todos os produtos" é link de MARCA (editável em `links.todos`); os outros nomeiam mecânica
+// da loja ou página legal e ficam no código (README do editor, §8).
+import Link from "next/link";
+import { PaymentChips } from "@/components/product/pdp/payment-chips";
+// Exports NOMEADOS: server component (ver components/site-footer.tsx).
+import { EditableImg, EditableLink } from "@/lib/editable";
+import type { ChromeVariantProps } from "../registry";
+
+const LINKS: { chave?: string; label: string; href: string }[] = [
+  { chave: "todos", label: "Todos os produtos", href: "/produtos" },
+  { label: "Minha conta", href: "/conta" },
+  { label: "Acompanhar pedido", href: "/conta/entrar" },
+  { label: "Trocas e devoluções", href: "/devolucoes" },
+  { label: "Termos", href: "/termos" },
+  { label: "Privacidade", href: "/privacidade" },
+];
+
+const CLASSE_LINK = "no-underline transition-colors hover:text-[var(--store-chrome-text,#ffffff)]";
+
+export function FooterMinimal({ data }: ChromeVariantProps) {
+  const { shopName } = data;
+
+  return (
+    <div className="mx-auto flex max-w-[var(--container-max,1240px)] flex-col items-center gap-7 px-6 py-14 text-center">
+      <Link href="/" aria-label={shopName} className="flex">
+        {/* <img> puro (EditableImg), não next/image: logo do chrome é SVG de poucos KB em toda página. */}
+        <EditableImg path="logo" fallback={{ src: "/brand/logo-chrome.svg", alt: shopName }} label="Logo do rodapé" className="h-12 w-auto" />
+      </Link>
+
+      <nav className="flex flex-wrap items-center justify-center gap-x-7 gap-y-3 text-[13px] text-[var(--store-chrome-muted)]" aria-label="Rodapé">
+        {LINKS.map((l) =>
+          l.chave ? (
+            <EditableLink key={l.label} path={`links.${l.chave}`} fallback={{ href: l.href, label: l.label }} label={`Link: ${l.label}`} className={CLASSE_LINK}>
+              {l.label}
+            </EditableLink>
+          ) : (
+            <Link key={l.label} href={l.href} className={CLASSE_LINK} data-editor-ignore="">{l.label}</Link>
+          ),
+        )}
+      </nav>
+
+      <div className="opacity-80">
+        <PaymentChips />
+      </div>
+    </div>
+  );
+}

package/template/components/chrome/header-bar-mobile.tsx

@@ -0,0 +1,64 @@
+// Barra do header no MOBILE — compartilhada pelas variantes de header.
+//
+// Por que compartilhada: no celular o espaço é o mesmo pra todo mundo (hambúrguer · logo ·
+// busca · carrinho) e a percepção de "loja diferente" vem do desktop e do conteúdo. Cada
+// variante que quiser um mobile próprio pode não usar este componente — mas o default evita
+// quadruplicar o trabalho e o risco de uma variante esquecer o acesso ao menu ou ao carrinho.
+//
+// EDITOR: o logo é o MESMO caminho do logo do desktop (`logo`, relativo à seção header): trocar
+// uma vez troca os dois. Busca, menu e carrinho são INTERFACE da loja, não copy: ficam fora dos
+// primitivos (README do editor, §8). O aviso de frete do celular é caminho próprio do cabeçalho
+// (`frete-celular`), separado do aviso da faixa do desktop: são duas seções diferentes, e o
+// painel mostra cada um com o nome do lugar onde aparece.
+import Link from "next/link";
+import { Truck, MagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
+import { FREE_SHIPPING_THRESHOLD } from "@/lib/store-config";
+import { CartButton } from "@/components/cart-button";
+import { MobileNav } from "@/components/mobile-nav";
+// Exports NOMEADOS: server component (ver components/site-header.tsx).
+import { EditableIcon, EditableImg, EditableText } from "@/lib/editable";
+import type { ChromeData } from "./registry";
+
+export function HeaderBarMobile({
+  data,
+  /** "solid" = sobre fundo claro (padrão). "over" = sobreposto a uma foto: cores de chrome,
+   *  logo legível sobre o chrome e SEM a faixa de frete (ela quebraria a altura fixa). */
+  tone = "solid",
+}: {
+  data: ChromeData;
+  tone?: "solid" | "over";
+}) {
+  const { shopName, categories } = data;
+  const over = tone === "over";
+
+  return (
+    <div className="md:hidden">
+      <div className="flex items-center justify-between px-4 py-3">
+        <MobileNav
+          categories={categories}
+          shopName={shopName}
+          triggerClassName={over ? "text-[var(--store-chrome-text,#ffffff)]" : "text-[var(--store-ink)] md:hidden"}
+        />
+        <Link href="/" aria-label={shopName} className="flex">
+          {/* <img> puro (EditableImg), não next/image: logo do chrome é SVG de poucos KB, e o next/image
+              marcaria lazy num elemento que aparece em toda página (o preload scanner perde o recurso) e
+              o reencode come o traço fino do lettering. */}
+          <EditableImg path="logo" fallback={{ src: over ? "/brand/logo-chrome.svg" : "/brand/logo.svg", alt: shopName }} label="Logo" className="h-10 w-auto" />
+        </Link>
+        <div className="flex items-center gap-4">
+          <Link href="/busca" aria-label="Buscar" className={`flex ${over ? "text-[var(--store-chrome-text,#ffffff)]" : "text-[var(--store-ink)]"}`}><MagnifyingGlass className="text-[24px]" /></Link>
+          <CartButton tone={over ? "chrome" : "ink"} />
+        </div>
+      </div>
+      {!over && FREE_SHIPPING_THRESHOLD != null && (
+        <div className="flex items-center justify-center gap-2 bg-[var(--store-chrome-bg,#18181B)] px-4 py-2.5 text-sm font-semibold text-[var(--store-chrome-text,#ffffff)]">
+          <EditableIcon path="frete-celular-icone" label="Ícone do aviso de frete (celular)" size={17} className="text-[17px] text-[var(--store-cta,#D97706)]">
+            <Truck weight="bold" />
+          </EditableIcon>
+          {/* o valor (R$X) é configuração da loja, não copy: fica fora do primitivo */}
+          <span><EditableText path="frete-celular" fallback="Frete Grátis acima de" label="Aviso de frete (celular)" /> <b>R${FREE_SHIPPING_THRESHOLD}</b></span>
+        </div>
+      )}
+    </div>
+  );
+}

package/template/components/chrome/headers/centralizado.tsx

@@ -0,0 +1,71 @@
+// HEADER "centralizado" — logo grande no centro, ações nas pontas e a navegação
+// centralizada abaixo. Simetria e ar: o logo vira o eixo da página, não um item de canto.
+//
+// Quando usar: marca editorial/de assinatura, catálogo curado, wordmark bonito.
+// Quando NÃO usar: catálogo grande onde a busca é o caminho principal (veja "classico").
+//
+// EDITOR: o escopo (`chrome.header`) vem da casca (components/site-header.tsx). O logo é o único
+// ponto de marca desta variante (`logo`, o mesmo caminho da barra do celular). Busca, conta e
+// carrinho são INTERFACE; as categorias são DADO do catálogo da Unbox: nada disso vira primitivo
+// (README do editor, §8), e a nav de categorias sai do gate por `data-editor-ignore`.
+import Link from "next/link";
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
+import { CartButton } from "@/components/cart-button";
+import { AccountNav } from "@/components/account-nav";
+import { EditableImg } from "@/lib/editable";
+import { HeaderBarMobile } from "../header-bar-mobile";
+import type { ChromeVariantProps } from "../registry";
+
+export function HeaderCentralizado({ data }: ChromeVariantProps) {
+  const { shopName, categories } = data;
+
+  return (
+    <>
+      <HeaderBarMobile data={data} />
+
+      {/* desktop — linha 1: ações · logo · ações */}
+      <div className="mx-auto hidden max-w-[var(--container-max,1240px)] grid-cols-[1fr_auto_1fr] items-center gap-6 px-6 py-5 md:grid">
+        <div className="flex items-center gap-4 justify-self-start">
+          <Link href="/busca" aria-label="Buscar" className="flex text-[var(--store-ink-2)] transition-colors hover:text-[var(--store-primary,#18181B)]">
+            <MagnifyingGlass weight="bold" className="text-[21px]" />
+          </Link>
+        </div>
+
+        <Link href="/" aria-label={shopName} className="flex justify-self-center">
+          {/* <img> puro (EditableImg), não next/image: logo do chrome é SVG de poucos KB, e o next/image
+              marcaria lazy num elemento que aparece em toda página (o preload scanner perde o recurso) e
+              o reencode come o traço fino do lettering. */}
+          <EditableImg path="logo" fallback={{ src: "/brand/logo.svg", alt: shopName }} label="Logo" className="h-[58px] w-auto" />
+        </Link>
+
+        <div className="flex items-center gap-5 justify-self-end">
+          <AccountNav />
+          <CartButton />
+        </div>
+      </div>
+
+      {/* desktop — linha 2: navegação centralizada (dado do catálogo: fora do editor) */}
+      <div className="hidden border-t border-[var(--store-surface-2)] md:block" data-editor-ignore="">
+        <nav className="mx-auto flex max-w-[var(--container-max,1240px)] items-center justify-center gap-8 overflow-x-auto px-6" aria-label="Categorias">
+          <NavLink href="/produtos" label="Todos" />
+          {categories.map((c) => (
+            <NavLink key={c.id} href={`/categoria/${encodeURIComponent(c.slug)}`} label={c.name} />
+          ))}
+        </nav>
+      </div>
+    </>
+  );
+}
+
+function NavLink({ href, label }: { href: string; label: string }) {
+  const isOffer = /oferta/i.test(label);
+  return (
+    <Link
+      href={href}
+      className="shrink-0 whitespace-nowrap py-3 text-[12.5px] font-semibold uppercase tracking-[1.2px] no-underline transition-colors hover:text-[var(--store-primary,#18181B)]"
+      style={{ color: isOffer ? "var(--store-sale)" : "var(--store-ink-2)" }}
+    >
+      {label}
+    </Link>
+  );
+}