@unbox-plus/cli 0.20.4

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

@@ -0,0 +1,64 @@
+// HEADER "clássico" — logo à esquerda, busca no centro, ações à direita e a nav de
+// categorias numa faixa abaixo. É o header de loja de catálogo: prioriza encontrar produto.
+//
+// Quando usar: catálogo grande, muitas categorias, busca é o caminho principal.
+// Quando NÃO usar: marca com poucos SKUs que quer respiro (veja "imersivo"/"centralizado").
+//
+// 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 (nome e ordem vêm do painel):
+// 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 { BrandSearch } from "@/components/brand-search";
+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 HeaderClassico({ data }: ChromeVariantProps) {
+  const { shopName, categories } = data;
+
+  return (
+    <>
+      <HeaderBarMobile data={data} />
+
+      {/* desktop */}
+      <div className="mx-auto hidden max-w-[var(--container-max,1240px)] items-center gap-7 px-6 py-3.5 md:flex">
+        <Link href="/" aria-label={shopName} className="flex shrink-0">
+          {/* <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-[52px] w-auto" />
+        </Link>
+        <BrandSearch className="flex-1" />
+        <AccountNav />
+        <CartButton withLabel />
+      </div>
+
+      {/* nav de categorias (dado do catálogo: fora do editor) */}
+      <div className="hidden border-t border-[var(--store-surface-2)] md:block" data-editor-ignore="">
+        <div className="mx-auto flex max-w-[var(--container-max,1240px)] items-center gap-[26px] overflow-x-auto px-6">
+          <CatLink href="/produtos" label="Todos" />
+          {categories.map((c) => (
+            <CatLink key={c.id} href={`/categoria/${encodeURIComponent(c.slug)}`} label={c.name} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function CatLink({ href, label }: { href: string; label: string }) {
+  const isOffer = /oferta/i.test(label);
+  return (
+    <Link
+      href={href}
+      className="shrink-0 whitespace-nowrap border-b-[3px] border-transparent py-3 text-sm font-medium no-underline hover:border-[var(--store-primary,#18181B)] hover:text-[var(--store-primary,#18181B)]"
+      style={{ color: isOffer ? "var(--store-sale)" : "var(--store-ink-2)" }}
+    >
+      {label}
+    </Link>
+  );
+}

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

@@ -0,0 +1,66 @@
+// HEADER "compacto" — uma barra fina só: logo pequeno, categorias inline no MESMO eixo,
+// busca em ícone e ações à direita. Densidade alta, pouca altura: sobra tela pra oferta.
+//
+// Quando usar: loja promocional//oferta, campanha, quem quer o produto o quanto antes.
+// Quando NÃO usar: marca que precisa de respiro (veja "centralizado"/"imersivo").
+//
+// 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 HeaderCompacto({ data }: ChromeVariantProps) {
+  const { shopName, categories } = data;
+
+  return (
+    <>
+      <HeaderBarMobile data={data} />
+
+      {/* desktop — tudo numa linha */}
+      <div className="mx-auto hidden max-w-[var(--container-max,1240px)] items-center gap-5 px-6 py-2.5 md:flex">
+        <Link href="/" aria-label={shopName} className="flex shrink-0">
+          {/* <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-9 w-auto" />
+        </Link>
+
+        <nav className="flex min-w-0 flex-1 items-center gap-5 overflow-x-auto" aria-label="Categorias" data-editor-ignore="">
+          <NavLink href="/produtos" label="Todos" />
+          {/* barra fina: mostra as principais e deixa o resto no menu/catálogo */}
+          {categories.slice(0, 6).map((c) => (
+            <NavLink key={c.id} href={`/categoria/${encodeURIComponent(c.slug)}`} label={c.name} />
+          ))}
+        </nav>
+
+        <div className="flex shrink-0 items-center gap-4">
+          <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>
+          <AccountNav />
+          <CartButton withLabel />
+        </div>
+      </div>
+    </>
+  );
+}
+
+function NavLink({ href, label }: { href: string; label: string }) {
+  const isOffer = /oferta/i.test(label);
+  return (
+    <Link
+      href={href}
+      className="shrink-0 whitespace-nowrap text-[13.5px] font-semibold uppercase tracking-[0.4px] no-underline transition-colors hover:text-[var(--store-primary,#18181B)]"
+      style={{ color: isOffer ? "var(--store-sale)" : "var(--store-ink-2)" }}
+    >
+      {label}
+    </Link>
+  );
+}

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

@@ -0,0 +1,73 @@
+// HEADER "equilibrado" — uma barra só, em três pesos: categorias à ESQUERDA, logo ao
+// CENTRO e as três ações (busca, conta, carrinho) em ícone à DIREITA.
+//
+// É o meio-termo entre o "compacto" (tudo à esquerda, denso) e o "centralizado" (duas
+// linhas, editorial): mantém o logo como eixo da página sem gastar uma segunda faixa,
+// e as ações viram ícone puro pra não competir com a marca.
+//
+// Quando usar: catálogo curto/médio (2 a 6 categorias cabem na esquerda), marca que quer
+// o logo no centro mas sem o peso de duas linhas.
+// Quando NÃO usar: muitas categorias (elas empurram o logo pra fora do centro — aí use
+// "classico" ou "compacto").
+//
+// 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 HeaderEquilibrado({ data }: ChromeVariantProps) {
+  const { shopName, categories } = data;
+
+  return (
+    <>
+      <HeaderBarMobile data={data} />
+
+      {/* desktop — grid de 3 colunas iguais mantém o logo no centro ÓTICO da barra,
+          independente de quantas categorias existem à esquerda. */}
+      <div className="mx-auto hidden max-w-[var(--container-max,1240px)] grid-cols-[1fr_auto_1fr] items-center gap-6 px-6 py-3 md:grid">
+        <nav className="flex min-w-0 items-center gap-6 overflow-x-auto justify-self-start" aria-label="Categorias" data-editor-ignore="">
+          <NavLink href="/produtos" label="Todos" />
+          {/* barra de uma linha: as principais aqui, o resto no catálogo */}
+          {categories.slice(0, 4).map((c) => (
+            <NavLink key={c.id} href={`/categoria/${encodeURIComponent(c.slug)}`} label={c.name} />
+          ))}
+        </nav>
+
+        <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-[46px] w-auto" />
+        </Link>
+
+        <div className="flex items-center gap-5 justify-self-end">
+          <Link href="/busca" aria-label="Buscar" className="flex text-[var(--store-ink)] transition-colors hover:text-[var(--store-primary,#18181B)]">
+            <MagnifyingGlass className="text-[22px]" />
+          </Link>
+          <AccountNav iconOnly />
+          <CartButton />
+        </div>
+      </div>
+    </>
+  );
+}
+
+function NavLink({ href, label }: { href: string; label: string }) {
+  const isOffer = /oferta/i.test(label);
+  return (
+    <Link
+      href={href}
+      className="shrink-0 whitespace-nowrap text-[13px] font-semibold uppercase tracking-[0.6px] no-underline transition-colors hover:text-[var(--store-primary,#18181B)]"
+      style={{ color: isOffer ? "var(--store-sale)" : "var(--store-ink-2)" }}
+    >
+      {label}
+    </Link>
+  );
+}

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

@@ -0,0 +1,62 @@
+// HEADER "imersivo" — barra mínima de altura fixa: menu em drawer (também no desktop),
+// logo centralizado, carrinho e conta discretos. Muito respiro, nenhuma faixa de anúncio.
+//
+// O diferencial: quando a página abre com um hero de imagem full-bleed
+// (variante `imagem-imersiva` da seção hero), o header fica TRANSPARENTE sobre a foto e vira
+// sólido depois de ~80px de rolagem. Em catálogo, PDP, conta e busca ele é sólido desde o
+// topo — a regra vive em app/globals.css e depende de o hero marcar `.hero-imersivo`, então
+// a degradação é automática: sem foto, header sólido.
+//
+// Quando usar: marca com fotografia boa, catálogo curto, posicionamento premium.
+// Quando NÃO usar: catálogo grande (a navegação fica toda no drawer) ou loja sem foto real.
+//
+// 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: aqui as duas usam
+// logo-chrome.svg, o legível sobre a cor do chrome). Menu, busca, conta e carrinho são INTERFACE:
+// ficam fora dos primitivos (README do editor, §8).
+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 { MobileNav } from "@/components/mobile-nav";
+import { EditableImg } from "@/lib/editable";
+import { SolidOnScroll } from "../solid-on-scroll";
+import { HeaderBarMobile } from "../header-bar-mobile";
+import type { ChromeVariantProps } from "../registry";
+
+export function HeaderImersivo({ data }: ChromeVariantProps) {
+  const { shopName, categories } = data;
+
+  return (
+    // .chrome-bar + data-solid: a pintura (transparente ↔ sólido) é decidida no CSS.
+    <SolidOnScroll className="bg-[var(--store-chrome-bg,#18181B)] text-[var(--store-chrome-text,#ffffff)] transition-colors duration-200">
+      <HeaderBarMobile data={data} tone="over" />
+
+      {/* desktop — altura travada em --chrome-h: se crescer, o hero sobe errado */}
+      <div className="mx-auto hidden h-[var(--chrome-h,76px)] max-w-[var(--container-max,1240px)] grid-cols-[1fr_auto_1fr] items-center gap-6 px-6 md:grid">
+        <div className="justify-self-start">
+          <MobileNav
+            categories={categories}
+            shopName={shopName}
+            triggerClassName="text-[var(--store-chrome-text,#ffffff)]"
+          />
+        </div>
+
+        <Link href="/" aria-label={shopName} className="flex justify-self-center">
+          {/* logo-chrome.svg = o logo que o CLI garante legível sobre a cor de chrome — e o
+              estado transparente usa um véu NA COR do chrome, então vale nos dois estados.
+              <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" className="max-h-[calc(var(--chrome-h,76px)-28px)] w-auto" />
+        </Link>
+
+        <div className="flex items-center gap-5 justify-self-end">
+          <Link href="/busca" aria-label="Buscar" className="flex text-[var(--store-chrome-text,#ffffff)] opacity-90 transition-opacity hover:opacity-100">
+            <MagnifyingGlass weight="bold" className="text-[21px]" />
+          </Link>
+          <AccountNav tone="chrome" />
+          <CartButton tone="chrome" />
+        </div>
+      </div>
+    </SolidOnScroll>
+  );
+}

package/template/components/chrome/registry.ts

@@ -0,0 +1,70 @@
+// Registry do CHROME (header + rodapé) — o mapa nome→componente que a receita
+// (components/chrome/chrome-recipe.ts) referencia. Mesma mecânica do registry das seções
+// da home. Pra criar uma variante nova: arquivo em headers/ ou footers/ + entrada aqui +
+// documentar em agents/PADROES.md.
+//
+// ⚠️ Sem "use client": header e rodapé são SERVER components (a casca faz o fetch). As
+// variantes compõem as peças client que já existem (BrandSearch, CartButton, AccountNav...).
+//
+// ⚠️ A variante desenha só o MIOLO. O elemento raiz (<header>/<footer>), com as classes
+// obrigatórias `store-layout site-chrome`, é da casca (site-header.tsx/site-footer.tsx) —
+// é `.site-chrome` que faz o chrome sumir no checkout (app/globals.css). Assim uma variante
+// nova não tem como quebrar isso.
+import type { NavCategory } from "@/components/mobile-nav";
+import { HeaderClassico } from "./headers/classico";
+import { HeaderCompacto } from "./headers/compacto";
+import { HeaderCentralizado } from "./headers/centralizado";
+import { HeaderEquilibrado } from "./headers/equilibrado";
+import { HeaderImersivo } from "./headers/imersivo";
+import { FooterColunas } from "./footers/colunas";
+import { FooterConversao } from "./footers/conversao";
+import { FooterEditorial } from "./footers/editorial";
+import { FooterMinimal } from "./footers/minimal";
+
+/** Dados que a casca busca UMA vez e entrega à variante (evita fetch duplicado). */
+export interface ChromeData {
+  shopName: string;
+  categories: NavCategory[];
+}
+
+/** Props que toda variante de header/rodapé recebe da casca. */
+export interface ChromeVariantProps {
+  data: ChromeData;
+}
+
+export const HEADERS = {
+  classico: HeaderClassico,
+  compacto: HeaderCompacto,
+  centralizado: HeaderCentralizado,
+  equilibrado: HeaderEquilibrado,
+  imersivo: HeaderImersivo,
+} as const;
+
+export const FOOTERS = {
+  colunas: FooterColunas,
+  conversao: FooterConversao,
+  editorial: FooterEditorial,
+  minimal: FooterMinimal,
+} as const;
+
+export type HeaderName = keyof typeof HEADERS;
+export type FooterName = keyof typeof FOOTERS;
+
+/** Como a casca desenha o <header>:
+ *  - "solido": sticky e opaco desde o topo (o padrão).
+ *  - "sobreposto": transparente sobre um hero de imagem full-bleed, sólido ao rolar.
+ *  O Record obriga o TypeScript a cobrir toda variante nova. */
+export type HeaderShellMode = "solido" | "sobreposto";
+export const HEADER_SHELL: Record<HeaderName, HeaderShellMode> = {
+  classico: "solido",
+  compacto: "solido",
+  centralizado: "solido",
+  equilibrado: "solido",
+  imersivo: "sobreposto",
+};
+
+/** A receita do chrome: qual header e qual rodapé esta loja usa. */
+export interface ChromeRecipe {
+  header: HeaderName;
+  footer: FooterName;
+}

package/template/components/chrome/solid-on-scroll.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+// Casca de pintura do header SOBREPOSTO: transparente no topo, sólido depois de rolar.
+// É o ÚNICO arquivo client do chrome — as variantes seguem sendo server components e
+// entram aqui como `children` (o App Router renderiza o filho no servidor e serializa).
+//
+// Sem hydration mismatch: o estado inicial (`false`) é exatamente o que o SSR emitiu.
+// Nunca leia window.scrollY durante o render.
+//
+// A decisão de PINTURA fica toda no CSS (`.chrome-bar:not([data-solid])` em globals.css),
+// por isso aqui só marcamos o atributo — assim o estado de scroll e a regra de
+// transparência condicional (:has(.hero-imersivo)) convivem sem duplicar cor no JSX.
+import * as React from "react";
+
+export function SolidOnScroll({
+  children,
+  className = "",
+  threshold = 80,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  threshold?: number;
+}) {
+  const [solid, setSolid] = React.useState(false);
+
+  React.useEffect(() => {
+    const onScroll = () =>
+      setSolid((window.scrollY || document.documentElement.scrollTop || 0) > threshold);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    onScroll(); // corrige scroll restaurado (voltar/avançar, link com #hash)
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [threshold]);
+
+  return (
+    <div className={`chrome-bar ${className}`} data-solid={solid || undefined}>
+      {children}
+    </div>
+  );
+}

package/template/components/empty-state.tsx

@@ -0,0 +1,22 @@
+import { Package } from "@phosphor-icons/react/dist/ssr";
+
+export function EmptyState({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-[var(--store-line-2)] bg-[var(--store-surface)] px-6 py-16 text-center">
+      <span className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--store-primary-soft,#F1F1F3)] text-[var(--store-primary,#18181B)]">
+        <Package weight="duotone" className="text-[34px]" />
+      </span>
+      <h2 className="font-display text-[18px] font-extrabold text-[var(--store-ink)]">{title}</h2>
+      {description && <p className="mt-1.5 max-w-sm text-[14px] leading-[1.5] text-[var(--store-muted)]">{description}</p>}
+      {children && <div className="mt-5">{children}</div>}
+    </div>
+  );
+}

package/template/components/home/combo-card-compact.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+// Card de combo compacto — usado no mobile (home) e no catálogo. Autocontido (add-to-cart).
+import * as React from "react";
+import Image from "next/image";
+import { ShoppingCartSimple, Spinner, PiggyBank } from "@phosphor-icons/react/dist/ssr";
+import { useCart } from "@/components/cart/cart-provider";
+import { formatBRL } from "@/lib/format";
+import type { ResolvedCombo } from "@/lib/enrichment/combos";
+
+export function ComboCardCompact({ combo, className = "" }: { combo: ResolvedCombo; className?: string }) {
+  const { add, setOpen } = useCart();
+  const [busy, setBusy] = React.useState(false);
+  const hero = combo.imageUrl || combo.items[0]?.imageUrl || null;
+
+  async function addCombo() {
+    setBusy(true);
+    try {
+      for (const it of combo.items) {
+        await add(
+          { productId: it.productId, variantId: it.variantId, price: it.discountedPrice, quantity: it.qty, thumbnail: it.imageUrl ?? undefined, title: `${combo.name} · ${it.name}` },
+          { silent: true },
+        );
+      }
+      setOpen(true);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className={`flex flex-col overflow-hidden rounded-2xl border border-[var(--store-line)] bg-white ${className}`}>
+      <div className="relative aspect-[4/3] bg-[var(--store-surface)]">
+        {combo.badge && (
+          <span className="absolute left-2.5 top-2.5 z-[2] rounded-full bg-[var(--store-cta-soft)] px-2.5 py-0.5 text-[10px] font-extrabold tracking-[0.3px] text-[var(--store-cta-fg)]">{combo.badge}</span>
+        )}
+        {hero && <Image src={hero} alt={combo.name} fill sizes="240px" className="object-cover" />}
+      </div>
+
+      <div className="flex flex-1 flex-col p-3.5">
+        <h3 className="font-display text-[16px] font-extrabold leading-[1.12] text-[var(--store-ink)]">{combo.name}</h3>
+        <p className="mt-0.5 text-[12px] text-[var(--store-muted)]">{combo.itemCount} itens</p>
+
+        {combo.save > 0 && (
+          <div className="mt-2.5 flex items-center gap-2">
+            <span className="text-[12.5px] text-[var(--store-faint)] line-through">{formatBRL(combo.subtotal)}</span>
+            <span className="rounded bg-[var(--store-cta,#D97706)] px-1.5 py-0.5 text-[10px] font-extrabold text-[var(--store-cta-fg,#1C1207)]">{combo.discountPct}% OFF</span>
+          </div>
+        )}
+        <div className="font-display text-[22px] font-extrabold leading-[1.1] text-[var(--store-primary,#18181B)]">{formatBRL(combo.total)}</div>
+        {combo.save > 0 && (
+          <div className="mt-0.5 flex items-center gap-1 text-[12px] font-bold text-[var(--store-primary,#18181B)]"><PiggyBank weight="fill" />Economize {formatBRL(combo.save)}</div>
+        )}
+
+        <button
+          type="button"
+          onClick={addCombo}
+          disabled={busy}
+          className="font-display mt-3 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[var(--store-primary,#18181B)] text-[13.5px] font-bold text-white transition-colors hover:bg-[var(--store-primary-dark,#09090B)] disabled:opacity-60"
+        >
+          {busy ? <Spinner className="animate-spin text-base" /> : <ShoppingCartSimple weight="bold" className="text-base" />}
+          Adicionar
+        </button>
+      </div>
+    </div>
+  );
+}

package/template/components/home/combos-home.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+// Home = renderer da RECEITA (components/home/home-recipe.ts): mapeia cada entrada da
+// receita pro componente registrado em sections/registry.ts. Pra mudar o layout da home
+// (ordem, variantes, props), edite a RECEITA — não este arquivo nem o JSX das seções.
+import { homeRecipe } from "@/components/home/home-recipe";
+import { SECTIONS, withIds, type HomeData } from "@/components/home/sections/registry";
+import { catalogoDaHome } from "@/components/home/sections/catalogo";
+import { Editable } from "@/lib/editable";
+import type { CatalogProductItem, CatalogCategory } from "@/components/catalog/catalog-client";
+import type { ResolvedCombo } from "@/lib/enrichment/combos";
+// só o TIPO (lib/vitrine.ts é `server-only`; `import type` some na compilação)
+import type { VitrinesResolvidas } from "@/lib/vitrine";
+
+export function CombosHome({
+  combos,
+  featured,
+  bundles = [],
+  categories = [],
+  combosTitle,
+  freeShipLabel,
+  vitrines,
+  layoutEditavel = true,
+}: {
+  combos: CatalogProductItem[];
+  featured: CatalogProductItem | null;
+  bundles?: ResolvedCombo[];
+  categories?: CatalogCategory[];
+  combosTitle: string;
+  freeShipLabel: string | null;
+  /**
+   * Vitrines que o SERVIDOR já resolveu, por caminho. Omitido = nenhuma escolha do lojista valeu
+   * (ou a página nem leu o documento): toda vitrine mostra os produtos do código.
+   */
+  vitrines?: VitrinesResolvidas;
+  /** `false` em página que REAPROVEITA a receita: a copy editada vale, a ordem da home não manda ali. */
+  layoutEditavel?: boolean;
+}) {
+  const data: HomeData = { combos, featured, bundles, categories, combosTitle, freeShipLabel, vitrines };
+  return (
+    <div className="store-layout full-bleed bg-white text-[var(--store-ink)]">
+      {/* O título do hero é o h1 da home. Sem hero na receita, um h1 invisível com o nome da loja. */}
+      {!homeRecipe.some((e) => e.section === "hero") && <h1 className="sr-only">{process.env.NEXT_PUBLIC_SITE_NAME ?? "Loja"}</h1>}
+      {/* EDITOR: cada entrada da receita vira seção com id estável (withIds: o que a receita declara,
+          senão IDENTIDADE_PADRAO do registry); o container aplica a ordem e as ocultas que o lojista
+          publicou. Sem documento, renderiza a receita na ordem do código.
+          `catalogo` = os tipos que ESTA loja sabe instanciar quando o lojista clica em "adicionar
+          seção" (components/home/sections/catalogo.ts). É o único lugar onde essa lista existe: o
+          editor não tem catálogo próprio. Não precisa de guarda por `layoutEditavel`: o próprio
+          container ignora catálogo e seções criadas quando `layout` é false (uma página que reusa
+          este container só para reaproveitar componentes não pode ganhar seção nova). */}
+      <Editable.Sections container="home" layout={layoutEditavel} catalogo={catalogoDaHome(data)}>
+        {withIds(homeRecipe).map((entry) => {
+          const Section = SECTIONS[entry.section];
+          return (
+            <Editable.Section key={entry.id} id={entry.id} kind={entry.kind} label={entry.label}>
+              <Section data={data} variant={entry.variant} sectionProps={entry.props} />
+            </Editable.Section>
+          );
+        })}
+      </Editable.Sections>
+    </div>
+  );
+}