@unbox-plus/cli 0.20.4

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

@@ -0,0 +1,177 @@
+"use client";
+
+// Seção de combos da home (abaixo dos reviews). Layout em 3 colunas inspirado na referência:
+// imagem + selo · nome/descrição/destaques/preço/CTA · lista "Este combo contém".
+//
+// EDITOR: o cabeçalho (chapéu, título, subtítulo) é copy da marca e vira caminho da seção que
+// renderiza esta lista (a seção "kits" da home). Os kits em si são DADO da loja (lib/enrichment/
+// combos.ts: nome, itens, preço, desconto): ficam fora dos primitivos (README do editor, §8) e
+// fora do gate por `data-editor-ignore`.
+import * as React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  Package, Fire, Sparkle, Star, ShieldCheck, Heart, Tag, Gift,
+  PiggyBank, ShoppingCartSimple, Spinner, CaretLeft, CaretRight,
+} from "@phosphor-icons/react/dist/ssr";
+import { useCart } from "@/components/cart/cart-provider";
+import { formatBRL } from "@/lib/format";
+import { Editable } from "@/lib/editable";
+import { ComboCardCompact } from "@/components/home/combo-card-compact";
+import type { ResolvedCombo, ComboHighlight } from "@/lib/enrichment/combos";
+
+const HIGHLIGHT_ICON: Record<ComboHighlight["icon"], React.ComponentType<any>> = {
+  box: Package, fire: Fire, sparkle: Sparkle, star: Star,
+  shield: ShieldCheck, heart: Heart, tag: Tag, gift: Gift,
+};
+
+export function CombosSection({ combos }: { combos: ResolvedCombo[] }) {
+  const { add, setOpen } = useCart();
+  const [busyId, setBusyId] = React.useState<string | null>(null);
+  const rowRef = React.useRef<HTMLDivElement | null>(null);
+
+  if (combos.length === 0) return null;
+
+  async function addCombo(combo: ResolvedCombo) {
+    setBusyId(combo.id);
+    try {
+      // Adiciona cada item com o preço já com desconto do combo (silencioso) e abre o carrinho ao fim.
+      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 {
+      setBusyId(null);
+    }
+  }
+
+  const scrollRow = (dir: number) => rowRef.current?.scrollBy({ left: dir * 720, behavior: "smooth" });
+
+  return (
+    <div className="mx-auto max-w-[1240px] px-4 pt-[42px] sm:px-6">
+      <div className="mb-[18px] flex items-end justify-between gap-3">
+        <div>
+          <Editable.Text as="div" path="chapeu" fallback="KITS DA LOJA" label="Chapéu acima do título" className="text-xs font-extrabold tracking-[1.5px] text-[var(--store-primary,#18181B)]" />
+          <Editable.Text as="h2" path="titulo" fallback="Monte seu kit com nossos combos" label="Título" className="font-display mt-1.5 text-[26px] font-extrabold" />
+          <Editable.Text as="p" path="subtitulo" fallback="Tudo combinado, com desconto e pronto pro carrinho." label="Subtítulo" className="mt-1 text-sm text-[var(--store-muted)]" />
+        </div>
+        {combos.length > 1 && (
+          <div className="hidden gap-2.5 sm:flex">
+            <button type="button" onClick={() => scrollRow(-1)} aria-label="Anterior" className="flex h-[42px] w-[42px] items-center justify-center rounded-full border-[1.5px] border-[var(--store-line-2)] bg-white hover:border-[var(--store-primary,#18181B)]"><CaretLeft weight="bold" className="text-[var(--store-ink-2)]" /></button>
+            <button type="button" onClick={() => scrollRow(1)} aria-label="Próximo" className="flex h-[42px] w-[42px] items-center justify-center rounded-full border-[1.5px] border-[var(--store-line-2)] bg-white hover:border-[var(--store-primary,#18181B)]"><CaretRight weight="bold" className="text-[var(--store-ink-2)]" /></button>
+          </div>
+        )}
+      </div>
+
+      {/* desktop: card grande em 3 colunas (dado da loja: fora do editor) */}
+      <div ref={rowRef} className="hidden snap-x gap-5 overflow-x-auto pb-3.5 [scrollbar-width:thin] md:flex" data-editor-ignore="">
+        {combos.map((c) => (
+          <ComboCard key={c.id} combo={c} busy={busyId === c.id} onAdd={() => addCombo(c)} />
+        ))}
+      </div>
+
+      {/* mobile: versão compacta em carrossel */}
+      <div className="flex snap-x gap-3.5 overflow-x-auto pb-3.5 [scrollbar-width:none] md:hidden" data-editor-ignore="">
+        {combos.map((c) => (
+          <ComboCardCompact key={c.id} combo={c} className="w-[230px] flex-none snap-start" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ComboCard({ combo, busy, onAdd }: { combo: ResolvedCombo; busy: boolean; onAdd: () => void }) {
+  const highlights: ComboHighlight[] = [
+    { icon: "box", label: `${combo.itemCount} itens` },
+    ...combo.highlights,
+  ];
+  const hero = combo.imageUrl || combo.items[0]?.imageUrl || null;
+
+  return (
+    <div className="flex w-[min(96vw,1000px)] flex-none snap-start overflow-hidden rounded-2xl border border-[var(--store-line)] bg-[var(--store-surface)] lg:w-[1000px]">
+      <div className="grid w-full grid-cols-1 lg:grid-cols-[0.9fr_1.1fr_1fr]">
+        {/* coluna 1: imagem ocupa toda a coluna + selo sobreposto */}
+        <div className="relative min-h-[260px] overflow-hidden border-b border-[var(--store-line)] bg-white lg:border-b-0 lg:border-r">
+          {combo.badge && (
+            <span className="absolute left-5 top-5 z-[2] rounded-full bg-[var(--store-cta-soft)] px-3 py-1 text-[11px] font-extrabold tracking-[0.4px] text-[var(--store-cta-fg)]">{combo.badge}</span>
+          )}
+          {hero ? (
+            <Image src={hero} alt={combo.name} fill sizes="(max-width:1024px) 100vw, 320px" className="object-cover" />
+          ) : (
+            <span className="flex h-full items-center justify-center text-sm text-[var(--store-faint)]">{combo.name}</span>
+          )}
+        </div>
+
+        {/* coluna 2: detalhes + CTA */}
+        <div className="flex flex-col justify-center border-b border-[var(--store-line)] p-6 sm:p-7 lg:border-b-0 lg:border-r">
+          <h3 className="font-display text-[26px] font-extrabold leading-[1.08] text-[var(--store-ink)]">{combo.name}</h3>
+          <p className="mt-2 max-w-[360px] text-[15px] leading-[1.5] text-[var(--store-ink-2)]">{combo.description}</p>
+
+          <div className="my-5 grid grid-cols-3 gap-2 border-y border-[var(--store-line)] py-4">
+            {highlights.map((h, i) => {
+              const Icon = HIGHLIGHT_ICON[h.icon];
+              return (
+                <div key={i} className="flex flex-col items-center gap-2 text-center">
+                  <Icon className="text-[28px] text-[var(--store-primary,#18181B)]" />
+                  <span className="text-[13px] font-semibold text-[var(--store-ink-2)]">{h.label}</span>
+                </div>
+              );
+            })}
+          </div>
+
+          {combo.save > 0 && (
+            <div className="flex flex-wrap items-center gap-2.5">
+              <span className="text-[15px] text-[var(--store-faint)] line-through">{formatBRL(combo.subtotal)}</span>
+              <span className="rounded-md bg-[var(--store-cta,#D97706)] px-2 py-0.5 text-[12px] font-extrabold text-[var(--store-cta-fg,#1C1207)]">{combo.discountPct}% OFF</span>
+            </div>
+          )}
+          <div className="font-display text-[34px] font-extrabold leading-[1.05] text-[var(--store-primary,#18181B)]">{formatBRL(combo.total)}</div>
+          {combo.save > 0 && (
+            <div className="mt-1 flex items-center gap-1.5 text-[14px] font-bold text-[var(--store-primary,#18181B)]"><PiggyBank weight="fill" />Economize {formatBRL(combo.save)}</div>
+          )}
+
+          <button
+            type="button"
+            onClick={onAdd}
+            disabled={busy}
+            className="font-display mt-5 flex h-[54px] w-full cursor-pointer items-center justify-center gap-2.5 rounded-xl bg-[var(--store-primary,#18181B)] text-[15px] font-bold tracking-[0.4px] text-white shadow-[var(--store-shadow-cta)] transition-colors hover:bg-[var(--store-primary-dark,#09090B)] disabled:opacity-60"
+          >
+            {busy ? <Spinner className="animate-spin text-lg" /> : <ShoppingCartSimple weight="bold" className="text-lg" />}
+            ADICIONAR AO CARRINHO
+          </button>
+        </div>
+
+        {/* coluna 3: itens do combo */}
+        <div className="flex flex-col gap-2.5 p-6 sm:p-7">
+          <div className="text-[15px] font-extrabold text-[var(--store-ink)]">Este combo contém:</div>
+          {combo.items.map((it) => (
+            <Link
+              key={it.variantId}
+              href={`/produto/${encodeURIComponent(it.slug)}`}
+              className="flex items-center gap-3.5 rounded-lg border border-[var(--store-line)] bg-white p-2.5 pl-3 no-underline transition-colors hover:border-[var(--store-primary,#18181B)]"
+            >
+              <span className="relative flex h-[68px] w-[68px] shrink-0 items-center justify-center">
+                {it.imageUrl ? <Image src={it.imageUrl} alt={it.name} fill sizes="68px" className="object-contain" /> : <Package className="text-[28px] text-[var(--store-faint)]" />}
+              </span>
+              <div className="min-w-0 flex-1">
+                <div className="truncate text-[14px] font-bold text-[var(--store-ink)]">{it.name}</div>
+                {it.weight && <div className="text-[12.5px] text-[var(--store-muted)]">{it.weight}</div>}
+              </div>
+              <span className="shrink-0 text-[14px] font-extrabold text-[var(--store-primary,#18181B)]">{it.qty}×</span>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// RECEITA DA HOME — a ordem, as variantes e as props das seções.
+// Escrita pelo create-unbox-store conforme o ESTILO escolhido no setup; editada
+// pelo agente de branding no briefing (é AQUI que o layout muda — não reescreva
+// o JSX das seções; catálogo de seções/variantes em agents/PADROES.md).
+// `npm run typecheck` acusa seção/variante inexistente.
+//
+// EDITOR DE LOJA: cada entrada vira uma seção editável com id, tipo e nome próprios. Os três saem de
+// IDENTIDADE_PADRAO (components/home/sections/registry.ts) quando a entrada não os declara: o hero
+// vira "banner", o combos-carousel vira "vitrine", e assim por diante. Declare `id` à mão só numa
+// seção REPETIDA na receita, ou num bloco com nome próprio (`{ section: "product-story", id:
+// "tradicional", label: "Tradicional" }`): o id é chave primária depois que a loja publica, e o
+// derivado das repetidas é posicional (`banner-2`), o que faz reordenar renomear.
+// ═══════════════════════════════════════════════════════════════════════════
+import type { HomeRecipe } from "@/components/home/sections/registry";
+
+export const homeRecipe: HomeRecipe = [
+  {
+    section: "hero",
+    variant: "imagem-full",
+    props: {
+      imageDesktop: "/brand/hero-desktop.svg",
+      imageMobile: "/brand/hero-mobile.svg",
+    },
+  },
+  { section: "trust-bar" },
+  { section: "attributes-marquee" },
+  { section: "category-pills" },
+  { section: "combos-carousel" },
+  { section: "savings" },
+  { section: "benefits" },
+  { section: "media-cards" },
+  { section: "reviews", variant: "grid" },
+  { section: "ritual" },
+  { section: "founder-story" },
+  { section: "kits" },
+  { section: "spec-table" },
+  { section: "video-wall" },
+  { section: "trust-strip" },
+  { section: "newsletter", variant: "bloco" },
+];

package/template/components/home/sections/attributes-marquee.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+// Marquee infinito de atributos da marca (artesanal, feito no Brasil, edição limitada...).
+// Portado de uma loja Unbox real em produção e genericizado: itens via receita
+// (props.items: [{ label, icon?, slashed? }]). Sem itens, não renderiza.
+// Ícones por nome (mapa abaixo) pra receita ser serializável.
+//
+// ── EDITOR ──────────────────────────────────────────────────────────────────
+// Cada palavra da faixa é um ITEM de lista (`Editable.Sections nested` + `Editable.Section item`):
+// o lojista troca o texto, troca o ícone, reordena, oculta e duplica, sem código novo.
+//
+// A faixa é a MESMA lista repetida 4 vezes na tela (é assim que o `translateX(-50%)` fecha o loop
+// sem emenda). Por isso só a PRIMEIRA sequência é a lista editável; as outras são ECO: leem o
+// documento direto (`orderSections` + `resolveValue`) e não registram caminho nenhum. Sem isso a
+// mesma palavra viraria 4 registros e 4 alvos de clique no painel, e as metades deixariam de bater.
+//
+// Os caminhos são RELATIVOS ao escopo do item: a seção entra na home e na landing de oferta, e um
+// caminho com o id da seção dentro faria as duas instâncias brigarem pela mesma caixa.
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { Leaf, Drop, Cube, Bread, Heart, Sparkle, ShieldCheck, Star } from "@phosphor-icons/react/dist/ssr";
+import { Editable, joinPath, orderSections, resolveValue, useEditableContext, type ImageValue } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+
+const ICONS: Record<string, PhosphorIcon> = {
+  leaf: Leaf, drop: Drop, cube: Cube, bread: Bread,
+  heart: Heart, sparkle: Sparkle, shield: ShieldCheck, star: Star,
+};
+
+type Attribute = { label: string; icon?: string; text?: string; slashed?: boolean };
+
+// ── Caminhos editáveis (relativos ao item) ──────────────────────────────────
+const CAMINHO_TEXTO = "texto";
+const CAMINHO_ICONE = "icone";
+const ROTULO_ICONE = "Ícone";
+const TAMANHO_ICONE = 18;
+
+/** id do item na lista editável: posicional, o padrão da foundation. */
+const idDoItem = (i: number) => `item-${i + 1}`;
+
+// As classes viram constante porque a linha editável e o eco dela precisam
+// renderizar EXATAMENTE o mesmo HTML: duas cópias do literal descolariam.
+const CLASSE_PILULA = "rounded-full bg-[var(--store-primary-soft,#F1F1F3)]/70 px-4 py-2 text-[13px] font-semibold text-[var(--store-primary,#18181B)]";
+const CLASSE_CIRCULO = "relative flex h-11 w-11 shrink-0 items-center justify-center rounded-full border-2 border-[var(--store-primary,#18181B)]/70 text-[var(--store-primary,#18181B)]";
+const CLASSE_RISCO = "pointer-events-none absolute left-[-2px] right-[-2px] top-1/2 h-[2px] -translate-y-1/2 rotate-45 bg-[var(--store-primary,#18181B)]/70";
+const CLASSE_SIGLA = "text-[9px] font-extrabold";
+const CLASSE_ICONE = "text-[18px]";
+
+/** Item da faixa já resolvido pelo documento (ordem, ocultas, cópias e valores do lojista). */
+type ItemPublicado = { id: string; base: Attribute; texto: string; icone: ImageValue };
+
+/**
+ * O ECO da lista: mesma ordem, mesmas ocultas, mesmas cópias e mesmos valores da primeira
+ * sequência, só que lido do documento, SEM registrar ponto editável. É o que mantém as
+ * metades do marquee do mesmo tamanho depois que o lojista mexe na lista.
+ */
+function useItensPublicados(items: Attribute[]): ItemPublicado[] {
+  const ctx = useEditableContext();
+  // `Editable.Sections nested` usa o escopo atual como container; o eco lê o mesmo lugar.
+  const escopo = ctx.scope.join(".");
+  const ids = items.map((_, i) => idDoItem(i));
+  const estado = ctx.doc.sections[escopo];
+  const { visible } = orderSections(ids, estado);
+  const copias = estado?.clones ?? {};
+  return visible.flatMap((id) => {
+    const base = items[ids.indexOf(copias[id] ?? id)];
+    if (!base) return [];
+    const prefixo = [escopo, id].filter(Boolean).join(".");
+    return [{
+      id,
+      base,
+      texto: resolveValue(ctx.doc, `${prefixo}.${CAMINHO_TEXTO}`, base.label),
+      icone: resolveValue<ImageValue>(ctx.doc, `${prefixo}.${CAMINHO_ICONE}`, { src: "", alt: ROTULO_ICONE }),
+    }];
+  });
+}
+
+/** O texto do item já publicado, SEM registrar um segundo ponto: quem registra é o rótulo. */
+function useTextoDoItem(fallback: string) {
+  const ctx = useEditableContext();
+  return resolveValue(ctx.doc, joinPath(ctx.scope, CAMINHO_TEXTO), fallback);
+}
+
+/** Sem ícone na receita, o círculo mostra as 3 primeiras letras: derivado, não é copy nova. */
+const sigla = (t: string) => t.slice(0, 3).toUpperCase();
+
+function CirculoDoIcone({ slashed, children }: { slashed?: boolean; children: React.ReactNode }) {
+  return (
+    <span className={CLASSE_CIRCULO}>
+      {children}
+      {slashed && <span className={CLASSE_RISCO} />}
+    </span>
+  );
+}
+
+/** Ícone da linha editável. A `className` do ícone vai para o primitivo (regra do `Editable.Icon`). */
+function IconeEditavel({ item }: { item: Attribute }) {
+  const Icon = item.icon ? ICONS[item.icon] : undefined;
+  const texto = useTextoDoItem(item.label);
+  if (!Icon) return <span className={CLASSE_SIGLA}>{sigla(item.text ?? texto)}</span>;
+  return (
+    <Editable.Icon path={CAMINHO_ICONE} label={ROTULO_ICONE} size={TAMANHO_ICONE} className={CLASSE_ICONE}>
+      <Icon weight="bold" />
+    </Editable.Icon>
+  );
+}
+
+/** Espelho do `Editable.Icon` para as cópias da faixa: mesmo `<span>`/`<img>`, sem registro. */
+function IconeEco({ item }: { item: ItemPublicado }) {
+  const Icon = item.base.icon ? ICONS[item.base.icon] : undefined;
+  if (!Icon) return <span className={CLASSE_SIGLA}>{sigla(item.base.text ?? item.texto)}</span>;
+  if (item.icone.src) {
+    // eslint-disable-next-line @next/next/no-img-element -- espelho do <img> que o Editable.Icon rende
+    return <img src={item.icone.src} alt={item.icone.alt ?? ROTULO_ICONE} width={TAMANHO_ICONE} height={TAMANHO_ICONE} className={CLASSE_ICONE} style={{ display: "inline-block", objectFit: "contain" }} />;
+  }
+  return (
+    <span className={CLASSE_ICONE} style={{ display: "inline-flex", lineHeight: 0 }}>
+      <Icon weight="bold" />
+    </span>
+  );
+}
+
+// Cada item carrega a própria margem à direita (em vez de gap no pai): a largura de um "set"
+// já inclui o espaço até o próximo e a duplicata encaixa exata com translateX(-50%).
+function BadgeRowEditavel({ items }: { items: Attribute[] }) {
+  return (
+    <Editable.Sections nested>
+      {items.map((a, i) => (
+        <Editable.Section key={idDoItem(i)} item id={idDoItem(i)} label={`Atributo ${i + 1}`}>
+          <span className="mr-6 flex shrink-0 items-center gap-3">
+            <CirculoDoIcone slashed={a.slashed}>
+              <IconeEditavel item={a} />
+            </CirculoDoIcone>
+            <Editable.Text path={CAMINHO_TEXTO} fallback={a.label} label="Texto do atributo" className={CLASSE_PILULA} />
+          </span>
+        </Editable.Section>
+      ))}
+    </Editable.Sections>
+  );
+}
+
+function BadgeRowEco({ itens }: { itens: ItemPublicado[] }) {
+  return (
+    <>
+      {itens.map((it) => (
+        <span key={it.id} className="mr-6 flex shrink-0 items-center gap-3">
+          <CirculoDoIcone slashed={it.base.slashed}>
+            <IconeEco item={it} />
+          </CirculoDoIcone>
+          <span className={CLASSE_PILULA}>{it.texto}</span>
+        </span>
+      ))}
+    </>
+  );
+}
+
+export function AttributesMarqueeSection({ sectionProps = {} }: SectionComponentProps) {
+  const items = ((sectionProps.items as Attribute[] | undefined) ?? []).filter((a) => a?.label);
+  const publicados = useItensPublicados(items);
+  if (items.length === 0) return null;
+  return (
+    // Dentro do container (--container-max), como as demais seções: uma faixa que sangrava
+    // de ponta a ponta enquanto hero e trust-bar ficam recuados lê como erro de layout.
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[18px] sm:px-6">
+      <div className="overflow-hidden rounded-2xl border border-[var(--store-primary,#18181B)]/10 bg-[var(--store-surface)] py-3">
+        {/* 4 cópias, não 2: com frases curtas, duas cópias dão ~700px por metade e a partir de
+            ~1400px de viewport abria um vão antes do loop fechar. A animação anda -50% (duas
+            cópias) em 44s — o dobro do tempo de antes, para a velocidade não mudar.
+            A 1ª é a lista editável; as outras três ecoam o documento. */}
+        <div className="flex w-max animate-marquee [animation-duration:44s]">
+          <div className="flex shrink-0 items-center"><BadgeRowEditavel items={items} /></div>
+          <div className="flex shrink-0 items-center" aria-hidden="true"><BadgeRowEco itens={publicados} /></div>
+          <div className="flex shrink-0 items-center" aria-hidden="true"><BadgeRowEco itens={publicados} /></div>
+          <div className="flex shrink-0 items-center" aria-hidden="true"><BadgeRowEco itens={publicados} /></div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/benefits.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+// Benefícios em grid 2+foto+2 (lista esquerda / imagem central / lista direita).
+// Portado de uma loja Unbox real em produção e genericizado. Conteúdo via receita; defaults
+// neutros SEM claims inventados (nada de estatística ou promessa de resultado fake).
+//
+// EDITOR: título, subtítulo e a foto do meio são caminhos da seção; cada coluna é uma LISTA
+// editável própria (`esquerda.beneficio-N` e `direita.beneficio-N`): o lojista troca texto,
+// reordena, oculta e duplica dentro da coluna. São duas listas, e não uma, porque cada coluna é um
+// `flex` diferente e uma lista só não renderiza em dois pais. Os caminhos são RELATIVOS à seção:
+// a mesma seção pode entrar na home e na landing sem que as duas disputem a mesma caixa.
+// A foto continua passando pelo `Foto` (otimizador do Next quando o host permite): o `Editable.Slot`
+// só lhe entrega o src/alt do lojista e os atributos de seleção.
+import { Editable, EditableScope } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+import { Foto } from "@/components/ui/foto";
+
+type Benefit = { title: string; text: string };
+
+const DEFAULT_LEFT: Benefit[] = [
+  { title: "Seleção com critério", text: "Cada item do catálogo passa por curadoria de verdade antes de entrar na loja." },
+  { title: "Qualidade que se percebe", text: "Materiais escolhidos pra durar e entregar o que prometem." },
+];
+const DEFAULT_RIGHT: Benefit[] = [
+  { title: "Entrega bem cuidada", text: "Embalagem pensada pra chegar inteiro, bonito e pronto pra usar." },
+  { title: "Suporte de gente", text: "Ficou com dúvida? A gente responde rápido e resolve junto." },
+];
+
+function Item({ b }: { b: Benefit }) {
+  return (
+    <div>
+      <Editable.Text as="div" path="titulo" fallback={b.title} label="Título do benefício" className="font-display text-[17px] font-bold text-[var(--store-primary,#18181B)]" />
+      <Editable.Text as="p" path="texto" fallback={b.text} label="Texto do benefício" multiline className="mt-1.5 text-[14px] leading-[1.55] text-[var(--store-muted)]" />
+    </div>
+  );
+}
+
+/** Uma coluna de benefícios: lista editável com escopo próprio (`esquerda` / `direita`). */
+function Coluna({ lado, nome, itens }: { lado: "esquerda" | "direita"; nome: string; itens: Benefit[] }) {
+  return (
+    <div className="flex flex-col gap-7">
+      <EditableScope path={lado}>
+        <Editable.Sections nested>
+          {itens.map((b, i) => (
+            <Editable.Section key={b.title} item id={`beneficio-${i + 1}`} label={`Benefício ${i + 1} (${nome})`}>
+              <Item b={b} />
+            </Editable.Section>
+          ))}
+        </Editable.Sections>
+      </EditableScope>
+    </div>
+  );
+}
+
+export function BenefitsSection({ sectionProps = {} }: SectionComponentProps) {
+  const {
+    title = "Por que escolher a gente",
+    subtitle = "O essencial, bem feito, do jeito que você espera.",
+    image = "/brand/ph/photo-a.svg",
+  } = sectionProps as Record<string, string>;
+  const left = (sectionProps.left as Benefit[] | undefined) ?? DEFAULT_LEFT;
+  const right = (sectionProps.right as Benefit[] | undefined) ?? DEFAULT_RIGHT;
+
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <div className="mx-auto max-w-[620px] text-center">
+        <Editable.Text as="h2" path="titulo" fallback={title} label="Título" className="font-display text-[28px] font-extrabold leading-[1.15]" />
+        <Editable.Text as="p" path="subtitulo" fallback={subtitle} label="Subtítulo" className="mt-2 text-[15px] text-[var(--store-muted)]" />
+      </div>
+      <div className="mt-9 grid items-center gap-8 md:grid-cols-[1fr_minmax(240px,340px)_1fr]">
+        <Coluna lado="esquerda" nome="coluna da esquerda" itens={left} />
+        {/* TODO: trocar por foto real do produto/marca (o agente de branding cuida disso). alt="" de propósito: é decorativa, quem fala é o texto. */}
+        <Editable.Slot path="imagem" type="image" fallback={{ src: image, alt: "" }} label="Foto do meio">
+          {(v, attrs, ref) => <Foto ref={ref} attrs={attrs} src={v.src} alt={v.alt ?? ""} width={680} height={680} sizes="340px" className="mx-auto w-full max-w-[340px] rounded-2xl object-cover" />}
+        </Editable.Slot>
+        <Coluna lado="direita" nome="coluna da direita" itens={right} />
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/bloco-html.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+// ═══════════════════════════════════════════════════════════════════════════
+// BLOCO DE HTML — a seção em que o LOJISTA cola um HTML pronto que veio de fora
+// (o selo de um fornecedor, uma tabela de medidas, um trecho que alguém mandou).
+//
+// SIMPLES DE PROPÓSITO: a seção não desenha nada. Ela é só o container (a mesma largura e o mesmo
+// respiro vertical das outras seções da home), e todo o conteúdo sai do primitivo. Título, subtítulo
+// ou fundo próprio aqui competiriam com o que o lojista colou e ele não teria como desligá-los.
+//
+// O QUE É PERIGOSO NÃO ENTRA, E QUEM DECIDE ISSO NÃO É ESTA SEÇÃO. `Editable.Html` (lib/editable/
+// primitives.tsx) roda a lista de recusa (`recusaDeHtml`) no cliente antes de injetar, e é a única das
+// três camadas que existe na PRÉVIA (ali o rascunho chega por postMessage sem passar por servidor
+// nenhum). As outras duas: o editor ao gravar (limpa e RELATA ao lojista o que tirou) e a loja ao ler o
+// publicado (lib/editable/server.ts, que faz uma regra nova valer para quem já publicou).
+//
+// ── POR QUE O CONTAINER É O PRÓPRIO PRIMITIVO, E NÃO UM <div> À VOLTA DELE ──
+// Bloco vazio em produção não renderiza NADA, nem invólucro (regra do primitivo). Se o padding
+// morasse num <div> à volta, esse <div> continuaria na página com `py-72px` e abriria uma faixa branca
+// no meio da home enquanto o lojista não colasse nada. Com as classes NO primitivo, some tudo junto.
+//
+// O <div className="w-full"> de fora existe por outro motivo: o fundo de seção do editor pinta o
+// PRIMEIRO FILHO do invólucro da seção (a regra `[data-unbox-sec-bg="1"]>*` em provider.tsx), e o
+// invólucro é `display: contents`. Sem esse filho de largura cheia, um fundo escolhido pelo lojista
+// pararia na largura do container em vez de atravessar a tela. Vazio ele sai como
+// `<div class="w-full"></div>`, altura 0 e padding 0: não é a faixa branca de que o parágrafo acima fala.
+//
+// O `sectionProps` fica de fora de propósito: um HTML cru escrito na RECEITA seria marcação à mão num
+// arquivo onde o certo é chamar um componente. Este bloco nasce para o lojista colar.
+// ═══════════════════════════════════════════════════════════════════════════
+import { EditableHtml } from "@/lib/editable";
+
+/**
+ * Não recebe props: o conteúdo é do documento, não da receita (ver o cabeçalho). A assinatura continua
+ * compatível com `SectionComponentProps`: o renderer passa `data`/`variant` e esta seção os ignora.
+ */
+export function BlocoHtmlSection() {
+  return (
+    <div className="w-full">
+      <EditableHtml
+        path="conteudo"
+        label="Bloco de HTML"
+        className="mx-auto max-w-[var(--container-max,1240px)] px-4 py-[var(--section-gap,52px)] sm:px-6"
+      />
+    </div>
+  );
+}