@unbox-plus/cli 0.20.4

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

@@ -0,0 +1,96 @@
+"use client";
+
+// "Como usar / o ritual": crossfade automático de fotos + checklist com ícones + CTA.
+// Portado de loja real em produção e genericizado. Conteúdo via receita; defaults neutros.
+//
+// EDITOR: selo, título e cada foto do crossfade são caminhos da seção (`foto-1`, `foto-2`…: a
+// quantidade de fotos é da receita, não é lista); os passos são uma LISTA editável
+// (`passos.passo-N`, com ícone e texto). No crossfade, as fotos que não estão na vez ficam
+// `pointer-events-none`: assim o clique do lojista no editor cai na foto que ele está vendo, e não
+// na última do empilhamento. O botão é um `Editable.Slot` de texto (o elemento já existe e não
+// pode ganhar invólucro dentro do fluxo do botão).
+import * as React from "react";
+import { CheckCircle } from "@phosphor-icons/react/dist/ssr";
+import { Editable, EditableScope } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+
+const DEFAULT_PHOTOS = ["/brand/ph/photo-a.svg", "/brand/ph/photo-b.svg", "/brand/ph/photo-c.svg"];
+const DEFAULT_ITEMS = [
+  "Escolha o que combina com a sua rotina",
+  "Receba em casa, do nosso cuidado pro seu",
+  "Use do seu jeito, no seu tempo",
+  "Volte quando quiser: recompra em 2 cliques",
+];
+
+export function RitualSection({ sectionProps = {} }: SectionComponentProps) {
+  const {
+    badge = "simples assim",
+    title = "Do pedido ao seu dia a dia",
+    ctaLabel = "Ver destaques",
+  } = sectionProps as Record<string, string>;
+  const photos = (sectionProps.photos as string[] | undefined) ?? DEFAULT_PHOTOS;
+  const items = (sectionProps.items as string[] | undefined) ?? DEFAULT_ITEMS;
+  const [idx, setIdx] = React.useState(0);
+
+  React.useEffect(() => {
+    if (photos.length < 2) return;
+    const t = setInterval(() => setIdx((i) => (i + 1) % photos.length), 3200);
+    return () => clearInterval(t);
+  }, [photos.length]);
+
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <div className="grid items-center gap-9 md:grid-cols-2">
+        <div className="relative aspect-[4/5] max-h-[520px] w-full overflow-hidden rounded-2xl">
+          {photos.map((p, i) => (
+            /* TODO: fotos reais de uso/rotina */
+            <Editable.Img
+              key={p + i}
+              path={`foto-${i + 1}`}
+              fallback={{ src: p, alt: "" }}
+              label={`Foto ${i + 1}`}
+              className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${i === idx ? "opacity-100" : "pointer-events-none opacity-0"}`}
+              loading="lazy"
+              decoding="async"
+            />
+          ))}
+        </div>
+        <div>
+          <Editable.Text path="selo" fallback={badge} label="Selo acima do título" className="rounded-full bg-[var(--store-primary-soft,#F1F1F3)] px-4 py-1.5 text-[12.5px] font-bold uppercase tracking-[0.6px] text-[var(--store-primary,#18181B)]" />
+          <Editable.Text as="h2" path="titulo" fallback={title} label="Título" className="font-display mt-4 text-[28px] font-extrabold leading-[1.15]" />
+          <ul className="mt-6 flex flex-col gap-4">
+            <EditableScope path="passos">
+              <Editable.Sections nested>
+                {items.map((t, i) => (
+                  <Editable.Section key={t} item id={`passo-${i + 1}`} label={`Passo ${i + 1}`}>
+                    <li className="flex items-start gap-3">
+                      {/* a className era do ícone; vai pro invólucro do Icon pra não descolar da linha */}
+                      <Editable.Icon path="icone" label="Ícone do passo" size={22} className="mt-0.5 shrink-0 text-[22px] text-[var(--store-primary,#18181B)]">
+                        <CheckCircle weight="fill" />
+                      </Editable.Icon>
+                      <Editable.Text path="texto" fallback={t} label="Texto do passo" className="text-[15px] leading-[1.5] text-[var(--store-ink-2)]" />
+                    </li>
+                  </Editable.Section>
+                ))}
+              </Editable.Sections>
+            </EditableScope>
+          </ul>
+          <Editable.Slot path="cta" type="text" fallback={ctaLabel} label="Botão">
+            {(v, attrs, ref, estilo) => (
+              <button
+                ref={ref}
+                type="button"
+                onClick={() => document.getElementById("destaques")?.scrollIntoView({ behavior: "smooth" })}
+                className="font-display mt-7 rounded-full bg-[var(--store-cta,#D97706)] px-7 py-3 text-[15px] font-extrabold text-[var(--store-cta-fg,#1C1207)] transition-colors hover:bg-[var(--store-cta-dark,#B45309)]"
+                style={estilo}
+                {...attrs}
+              >
+                {v}
+              </button>
+            )}
+          </Editable.Slot>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+"use client";
+
+// Card de ECONOMIA — comparativo "preço normal − combo = você economiza".
+// Só aparece quando o produto em destaque tem desconto real (preço antigo do catálogo).
+//
+// EDITOR: título, texto e os rótulos das colunas são copy (caminhos da seção). Preço, economia,
+// porcentagem e o nome do produto são DADO do catálogo: fora dos primitivos (README do editor,
+// §8); a célula com o nome do produto sai do gate por `data-editor-ignore`.
+import { Editable } from "@/lib/editable";
+import { formatBRL } from "@/lib/format";
+import type { SectionComponentProps } from "./registry";
+
+export function SavingsSection({ data }: SectionComponentProps) {
+  const { featured } = data;
+  const featSave = featured?.oldPrice != null ? featured.oldPrice - featured.price : null;
+  if (!featured || featSave == null || featSave <= 0) return null;
+
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-10 sm:px-6">
+      <div className="store-card rounded-xl p-7">
+        <div className="grid items-center gap-6 lg:grid-cols-[1.1fr_auto_auto_auto]">
+          <div>
+            <Editable.Text as="h2" path="titulo" fallback="Economia que faz diferença" label="Título" className="font-display text-[22px] font-extrabold" />
+            <Editable.Text as="p" path="texto" fallback="Compare e veja como compensa levar o nosso combo." label="Texto" className="mt-1.5 max-w-[280px] text-sm text-[var(--store-muted)]" />
+          </div>
+          <div className="text-center">
+            <Editable.Text as="div" path="rotulo-normal" fallback="Preço normal" label="Rótulo do preço normal" className="text-[12.5px] font-semibold leading-[1.3] text-[var(--store-muted)]" />
+            <div className="font-display mt-1.5 text-[22px] font-bold text-[var(--store-muted)] line-through">{featured.displayOld}</div>
+          </div>
+          <div className="flex items-center gap-6">
+            <span className="text-xl font-bold text-[var(--store-faint)]">−</span>
+            <div className="text-center">
+              <div className="text-[12.5px] font-semibold text-[var(--store-muted)]" data-editor-ignore="">No {featured.title}</div>
+              <div className="font-display mt-1.5 text-[22px] font-extrabold text-[var(--store-primary,#18181B)]">{featured.displayPrice}</div>
+            </div>
+            <span className="text-xl font-bold text-[var(--store-faint)]">=</span>
+          </div>
+          <div className="rounded-lg bg-[var(--store-cta,#D97706)] px-6 py-4 text-center lg:justify-self-end">
+            <Editable.Text as="div" path="rotulo-economia" fallback="Você economiza" label="Rótulo da economia" className="text-[12.5px] font-bold text-[var(--store-cta-fg,#1C1207)]" />
+            <div className="font-display mt-1 text-[26px] font-extrabold leading-[1.1] text-[var(--store-cta-fg,#1C1207)]">{formatBRL(featSave)}</div>
+            {featured.offPct != null && <div className="mt-0.5 text-xs font-extrabold text-[var(--store-cta-fg,#1C1207)]">{featured.offPct}% OFF</div>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/social-row.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+// Fileira de comunidade/creators: cards de foto com badge de @handle (portado de loja real em produção).
+// ⚠️ GENTE REAL: os defaults são placeholders neutros sem nome/seguidores. O agente troca
+// por pessoas reais (com autorização de uso de imagem) via receita — números de seguidores
+// só se forem verdadeiros.
+//
+// EDITOR: título e subtítulo são caminhos da seção; as pessoas são uma LISTA editável
+// (`pessoas.pessoa-N`, com foto, @ e, quando a receita traz, nome e detalhe). O invólucro do item é
+// display:contents, então quem continua sendo a célula do grid é o próprio card. A foto continua
+// passando pelo `Foto` (otimizador do Next): 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 Person = { image: string; handle?: string; name?: string; meta?: string };
+
+const DEFAULT_PEOPLE: Person[] = [
+  { image: "/brand/ph/poster-a.svg", handle: "@suamarca" },
+  { image: "/brand/ph/poster-b.svg", handle: "@suamarca" },
+  { image: "/brand/ph/poster-c.svg", handle: "@suamarca" },
+  { image: "/brand/ph/poster-a.svg", handle: "@suamarca" },
+];
+
+export function SocialRowSection({ sectionProps = {} }: SectionComponentProps) {
+  const {
+    title = "A comunidade da marca",
+    subtitle = "Quem cria e compartilha com a gente.",
+  } = sectionProps as Record<string, string>;
+  const people = (sectionProps.people as Person[] | undefined) ?? DEFAULT_PEOPLE;
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <div className="mb-[18px]">
+        <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-1 text-sm text-[var(--store-muted)]" />
+      </div>
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        <EditableScope path="pessoas">
+          <Editable.Sections nested>
+            {people.map((p, i) => (
+              <Editable.Section key={i} item id={`pessoa-${i + 1}`} label={`Pessoa ${i + 1}`}>
+                <div className="overflow-hidden store-card rounded-2xl">
+                  <div className="relative">
+                    {/* TODO: fotos reais, com autorização de uso */}
+                    <Editable.Slot path="imagem" type="image" fallback={{ src: p.image, alt: "" }} label="Foto">
+                      {(v, attrs, ref) => <Foto ref={ref} attrs={attrs} src={v.src} alt={v.alt ?? ""} width={600} height={750} sizes="(min-width: 1024px) 300px, 50vw" className="aspect-[4/5] w-full object-cover" />}
+                    </Editable.Slot>
+                    {p.handle && <Editable.Text path="arroba" fallback={p.handle} label="Perfil (@)" className="absolute bottom-2.5 left-2.5 rounded-full bg-black/60 px-3 py-1 text-[12px] font-semibold text-white" />}
+                  </div>
+                  {(p.name || p.meta) && (
+                    <div className="px-4 py-3">
+                      {p.name && <Editable.Text as="div" path="nome" fallback={p.name} label="Nome" className="text-[14px] font-bold text-[var(--store-ink)]" />}
+                      {p.meta && <Editable.Text as="div" path="detalhe" fallback={p.meta} label="Detalhe" className="text-[12px] text-[var(--store-muted)]" />}
+                    </div>
+                  )}
+                </div>
+              </Editable.Section>
+            ))}
+          </Editable.Sections>
+        </EditableScope>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/spec-table.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+// Faixa de especificações: texto+CTA / tabela de linhas / foto — com modal de tabela
+// completa. Serve pra ficha técnica, composição, medidas — e tabela nutricional, se for alimento.
+// Conteúdo SÓ via receita (props.rows): sem linhas, a seção não renderiza. "Origem: Brasil" e
+// "garantia" não são dados da foundation, são do produto.
+//
+// EDITOR: título, texto, botão e foto são caminhos da seção; as linhas da tabela são uma LISTA
+// editável (`linhas.linha-N`, com rótulo e valor). O divisor entre linhas é uma regra do CONTAINER
+// (`[&>*+*>div]:border-t`): o invólucro de cada item é display:contents e é ele o irmão no DOM, então
+// a regra "toda linha depois da primeira" continua certa depois que o lojista reordena ou oculta.
+// O modal é interface transitória (só existe aberto): as linhas dele LEEM o documento (mesma
+// ordem, mesmas ocultas, mesmos valores da lista) sem registrar um segundo ponto, como o eco da
+// faixa rolante. Se a receita passar `modalRows` separadas, elas são dado da receita e ficam literais.
+import * as React from "react";
+import { X } from "@phosphor-icons/react/dist/ssr";
+import { Editable, EditableScope, joinPath, orderSections, resolveValue, useEditableContext } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+
+type Row = { label: string; value: string };
+
+const ESCOPO_LINHAS = "linhas";
+const idDaLinha = (i: number) => `linha-${i + 1}`;
+const CLASSE_LINHA = "flex items-center justify-between gap-4 px-4 py-2.5 text-[13.5px]";
+const CLASSE_ROTULO = "font-semibold text-[var(--store-ink-2)]";
+const CLASSE_VALOR = "text-right text-[var(--store-muted)]";
+const CLASSE_DIVISOR = "[&>*+*>div]:border-t [&>*+*>div]:border-[var(--store-line)]";
+
+/**
+ * As linhas como o lojista as publicou (ordem, ocultas, cópias e valores), lidas do documento sem
+ * registrar ponto editável: é o que o modal mostra.
+ */
+function useLinhasPublicadas(rows: Row[]): Row[] {
+  const ctx = useEditableContext();
+  const escopo = joinPath(ctx.scope, ESCOPO_LINHAS);
+  const ids = rows.map((_, i) => idDaLinha(i));
+  const estado = ctx.doc.sections[escopo];
+  const { visible } = orderSections(ids, estado);
+  const copias = estado?.clones ?? {};
+  return visible.flatMap((id) => {
+    const base = rows[ids.indexOf(copias[id] ?? id)];
+    if (!base) return [];
+    return [{
+      label: resolveValue(ctx.doc, `${escopo}.${id}.rotulo`, base.label),
+      value: resolveValue(ctx.doc, `${escopo}.${id}.valor`, base.value),
+    }];
+  });
+}
+
+export function SpecTableSection({ sectionProps = {} }: SectionComponentProps) {
+  const {
+    title = "Ficha completa, sem letra miúda",
+    text = "",
+    ctaLabel = "Ver ficha completa",
+    image = "/brand/ph/photo-b.svg",
+    modalTitle = "Ficha completa",
+  } = sectionProps as Record<string, string>;
+  const rows = ((sectionProps.rows as Row[] | undefined) ?? []).filter((r) => r?.label && r?.value);
+  const modalRows = sectionProps.modalRows as Row[] | undefined;
+  const linhasPublicadas = useLinhasPublicadas(rows);
+  const linhasDoModal = modalRows ?? linhasPublicadas;
+  const [open, setOpen] = React.useState(false);
+  if (rows.length === 0) return null;
+
+  return (
+    <div className="mt-[52px] bg-[var(--store-surface-2)]">
+      <div className="mx-auto grid max-w-[var(--container-max,1240px)] items-center gap-8 px-4 py-12 sm:px-6 md:grid-cols-[1fr_1.1fr_0.9fr]">
+        <div>
+          <Editable.Text as="h2" path="titulo" fallback={title} label="Título" className="font-display text-[26px] font-extrabold leading-[1.2]" />
+          {text && <Editable.Text as="p" path="texto" fallback={text} label="Texto" multiline className="mt-2.5 text-[14.5px] leading-[1.55] text-[var(--store-muted)]" />}
+          <Editable.Slot path="cta" type="text" fallback={ctaLabel} label="Botão que abre a ficha">
+            {(v, attrs, ref, estilo) => (
+              <button ref={ref} type="button" onClick={() => setOpen(true)} className="font-display mt-5 rounded-full bg-[var(--store-primary,#18181B)] px-6 py-2.5 text-[14px] font-bold text-white transition-colors hover:bg-[var(--store-primary-dark,#09090B)]" style={estilo} {...attrs}>
+                {v}
+              </button>
+            )}
+          </Editable.Slot>
+        </div>
+        <div className={`rounded-2xl border border-[var(--store-line-2)] bg-white p-1.5 ${CLASSE_DIVISOR}`}>
+          <EditableScope path={ESCOPO_LINHAS}>
+            <Editable.Sections nested>
+              {rows.map((r, i) => (
+                <Editable.Section key={i} item id={idDaLinha(i)} label={`Linha ${i + 1}`}>
+                  <div className={CLASSE_LINHA}>
+                    <Editable.Text path="rotulo" fallback={r.label} label="Nome da linha" className={CLASSE_ROTULO} />
+                    <Editable.Text path="valor" fallback={r.value} label="Valor da linha" className={CLASSE_VALOR} />
+                  </div>
+                </Editable.Section>
+              ))}
+            </Editable.Sections>
+          </EditableScope>
+        </div>
+        {/* TODO: foto real do produto */}
+        <Editable.Img path="imagem" fallback={{ src: image, alt: "" }} label="Foto" className="hidden h-full max-h-[320px] w-full rounded-2xl object-cover md:block" loading="lazy" decoding="async" />
+      </div>
+
+      {open && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={() => setOpen(false)}>
+          <div className="max-h-[85vh] w-full max-w-[560px] overflow-y-auto rounded-2xl bg-white p-6" onClick={(e) => e.stopPropagation()}>
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="font-display text-[20px] font-extrabold">{modalTitle}</h3>
+              <button type="button" onClick={() => setOpen(false)} aria-label="Fechar" className="flex h-9 w-9 items-center justify-center rounded-full border border-[var(--store-line-2)] hover:bg-[var(--store-surface)]"><X weight="bold" /></button>
+            </div>
+            <div className="rounded-xl border border-[var(--store-line-2)]">
+              {linhasDoModal.map((r, i) => (
+                <div key={i} className={`${CLASSE_LINHA} ${i > 0 ? "border-t border-[var(--store-line)]" : ""}`}>
+                  <span className={CLASSE_ROTULO}>{r.label}</span>
+                  <span className={CLASSE_VALOR}>{r.value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { Star } from "@phosphor-icons/react/dist/ssr";
+
+/** Estrelas de avaliação. `n` ausente → não renderiza: nota que a loja não tem não aparece. */
+export function Stars({ n, className = "" }: { n?: number | null; className?: string }) {
+  if (n == null || Number.isNaN(n)) return null;
+  const k = Math.max(0, Math.min(5, Math.round(n)));
+  return (
+    <span className={`flex ${className}`} aria-label={`${k} de 5 estrelas`}>
+      {Array.from({ length: 5 }, (_, i) => <Star key={i} weight={i < k ? "fill" : "regular"} />)}
+    </span>
+  );
+}

package/template/components/home/sections/stats-grid.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+// Grid de destaques com imagem circular + texto (na loja de referência: estatísticas de eficácia).
+// ⚠️ NÚMERO SÓ COM DADO REAL: os defaults são qualitativos de propósito. Se a marca tiver
+// pesquisa/estatística de verdade, a receita passa `stats` com os valores reais e a fonte.
+//
+// EDITOR: o título é caminho da seção; os cards são uma LISTA editável (`destaques.destaque-N`) com
+// imagem, número (quando a receita traz), texto e fonte. Número e fonte só registram caminho quando
+// a receita os passa: não abrimos ponto de "número" numa seção que por regra não inventa número.
+// A imagem continua passando pelo `Foto` (otimizador do Next): 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 Stat = { value?: string; text: string; image?: string; source?: string };
+
+const DEFAULT_STATS: Stat[] = [
+  { text: "Clientes que voltam pra segunda compra", image: "/brand/ph/avatar-a.svg" },
+  { text: "Entrega acompanhada do pedido à porta", image: "/brand/ph/avatar-b.svg" },
+  { text: "Troca simples se algo não ficar certo", image: "/brand/ph/avatar-c.svg" },
+  { text: "Atendimento que responde de verdade", image: "/brand/ph/avatar-d.svg" },
+];
+
+export function StatsGridSection({ sectionProps = {} }: SectionComponentProps) {
+  const { title = "O que sustenta a nossa promessa" } = sectionProps as Record<string, string>;
+  const stats = (sectionProps.stats as Stat[] | undefined) ?? DEFAULT_STATS;
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <Editable.Text as="h2" path="titulo" fallback={title} label="Título" className="font-display mx-auto max-w-[560px] text-center text-[28px] font-extrabold leading-[1.15]" />
+      <div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+        {/* o invólucro do item é display:contents: quem continua sendo a célula do grid é o card */}
+        <EditableScope path="destaques">
+          <Editable.Sections nested>
+            {stats.map((s, i) => (
+              <Editable.Section key={i} item id={`destaque-${i + 1}`} label={`Destaque ${i + 1}`}>
+                <div className="flex flex-col items-center gap-4 store-card rounded-2xl px-5 py-7 text-center">
+                  {s.image && (
+                    <Editable.Slot path="imagem" type="image" fallback={{ src: s.image, alt: "" }} label="Imagem do destaque">
+                      {(v, attrs, ref) => <Foto ref={ref} attrs={attrs} src={v.src} alt={v.alt ?? ""} width={160} height={160} sizes="80px" className="h-20 w-20 rounded-full object-cover" />}
+                    </Editable.Slot>
+                  )}
+                  {s.value && <Editable.Text as="div" path="valor" fallback={s.value} label="Número do destaque" className="font-display text-[34px] font-extrabold leading-none text-[var(--store-primary,#18181B)]" />}
+                  <Editable.Text as="p" path="texto" fallback={s.text} label="Texto do destaque" multiline className="text-[14px] font-medium leading-[1.5] text-[var(--store-ink-2)]" />
+                  {s.source && <Editable.Text as="div" path="fonte" fallback={s.source} label="Fonte do número" className="text-[11px] text-[var(--store-faint)]" />}
+                </div>
+              </Editable.Section>
+            ))}
+          </Editable.Sections>
+        </EditableScope>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/trust-bar.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+// TRUST BAR clara — selos de confiança logo abaixo do hero. Os itens vêm da RECEITA
+// (props.items: [{ icon?, text }]); o selo de frete grátis entra sozinho quando a loja tem a
+// regra real (store-config). Sem itens e sem frete grátis, a seção não renderiza: "Entrega
+// rápida para todo o Brasil" e "Satisfação garantida" são promessas do lojista, não da foundation.
+//
+// EDITOR: os selos são uma LISTA editável (ícone e texto por item; o lojista reordena, oculta e
+// duplica). O selo de frete tem id de PAPEL (`frete`) porque só existe quando a configuração
+// existe; os da receita são posicionais (`selo-N`). O VALOR do frete (R$X) fica fora do primitivo:
+// é configuração da loja, não copy (README do editor, §8). O invólucro do item é display:contents,
+// então quem continua sendo a célula do grid é o próprio <div> do selo.
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { Truck, Lightning, LockSimple, SealCheck, Package, Heart, Clock, Shield, CreditCard, ChatCircle } from "@phosphor-icons/react/dist/ssr";
+import { Editable } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+
+export const TRUST_ICONS: Record<string, PhosphorIcon> = {
+  truck: Truck, lightning: Lightning, lock: LockSimple, seal: SealCheck, package: Package,
+  heart: Heart, clock: Clock, shield: Shield, card: CreditCard, chat: ChatCircle,
+};
+export type TrustItem = { icon?: string; text: string };
+
+type Selo = { id: string; label: string; icon: PhosphorIcon; text: string; /** o selo de frete: o valor vem da configuração e fica fora do texto editável */ frete?: boolean };
+
+export function TrustBarSection({ data, sectionProps = {} }: SectionComponentProps) {
+  const custom = (sectionProps.items as TrustItem[] | undefined) ?? [];
+  const items: Selo[] = [
+    ...(data.freeShipLabel ? [{ id: "frete", label: "Selo de frete grátis", icon: Truck, text: "Frete Grátis acima de", frete: true }] : []),
+    ...custom.filter((t) => t?.text).map((t, i) => ({ id: `selo-${i + 1}`, label: `Selo ${i + 1}`, icon: (t.icon && TRUST_ICONS[t.icon]) || SealCheck, text: t.text })),
+  ];
+  if (items.length === 0) return null;
+  const cols = items.length >= 4 ? "md:grid-cols-4" : items.length === 3 ? "md:grid-cols-3" : "md:grid-cols-2";
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[18px] sm:px-6">
+      <div className={`grid grid-cols-2 store-card rounded-2xl ${cols}`}>
+        <Editable.Sections nested>
+          {items.map((t, i) => (
+            <Editable.Section key={t.id} item id={t.id} label={t.label}>
+              <div className="flex items-center gap-3 px-[22px] py-[18px]" style={{ borderRight: i < items.length - 1 ? "1px solid var(--store-surface-2)" : "none" }}>
+                {/* a className era do ícone; vai para o invólucro do Icon para não descolar da linha */}
+                <Editable.Icon path="icone" label="Ícone do selo" size={25} className="shrink-0 text-[25px] text-[var(--store-primary,#18181B)]">
+                  <t.icon weight="fill" />
+                </Editable.Icon>
+                <div className="text-[13px] font-semibold leading-[1.35] text-[var(--store-ink-2)]">
+                  <Editable.Text path="texto" fallback={t.text} label="Texto do selo" />
+                  {t.frete ? <> {data.freeShipLabel}</> : null}
+                </div>
+              </div>
+            </Editable.Section>
+          ))}
+        </Editable.Sections>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/trust-strip.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+// TRUST STRIP escura — faixa de diferenciais sobre o chrome da marca. Itens SÓ via receita
+// (props.items: [{ icon?, text }], ícones em TRUST_ICONS). Sem itens, não renderiza.
+//
+// EDITOR: os diferenciais são uma LISTA editável (`item-N`, com ícone e texto). O invólucro do
+// item é display:contents, então quem continua sendo a célula do grid é o próprio <div>.
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { SealCheck } from "@phosphor-icons/react/dist/ssr";
+import { Editable } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+import { TRUST_ICONS, type TrustItem } from "./trust-bar";
+
+export function TrustStripSection({ sectionProps = {} }: SectionComponentProps) {
+  const items = ((sectionProps.items as TrustItem[] | undefined) ?? []).filter((t) => t?.text);
+  if (items.length === 0) return null;
+  const cols = items.length >= 4 ? "lg:grid-cols-4" : items.length === 3 ? "lg:grid-cols-3" : "lg:grid-cols-2";
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-10 sm:px-6">
+      <div className={`grid grid-cols-1 rounded-xl bg-[var(--store-chrome-bg,#18181B)] sm:grid-cols-2 ${cols}`}>
+        <Editable.Sections nested>
+          {items.map((t, i) => {
+            const Icon: PhosphorIcon = (t.icon && TRUST_ICONS[t.icon]) || SealCheck;
+            return (
+              <Editable.Section key={i} item id={`item-${i + 1}`} label={`Diferencial ${i + 1}`}>
+                <div className="flex items-center gap-3.5 px-[26px] py-6">
+                  {/* a className era do ícone; vai para o invólucro do Icon para não descolar da linha */}
+                  <Editable.Icon path="icone" label="Ícone do diferencial" size={30} className="shrink-0 text-[30px] text-[var(--store-cta,#D97706)]">
+                    <Icon weight="fill" />
+                  </Editable.Icon>
+                  <Editable.Text as="div" path="texto" fallback={t.text} label="Texto do diferencial" className="text-[13px] font-medium leading-[1.4] text-[var(--store-chrome-muted)]" />
+                </div>
+              </Editable.Section>
+            );
+          })}
+        </Editable.Sections>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/video-wall.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+// Parede de vídeo-depoimentos 9:16 com play inline (portado de loja real em produção).
+// ⚠️ SÓ VÍDEO REAL: itens via receita (props.items: [{ poster, videoUrl, label? }]). Sem itens
+// com videoUrl, a seção não renderiza — moldura vazia nunca vai ao ar.
+//
+// EDITOR: título e subtítulo são caminhos da seção; cada moldura é item de uma LISTA editável
+// (`videos.video-N`) com a capa trocável. O arquivo de vídeo em si continua vindo da receita: o
+// `<video>` só existe enquanto toca, e um ponto que aparece e some não é um ponto do painel.
+import * as React from "react";
+import { Play } from "@phosphor-icons/react/dist/ssr";
+import { Editable, EditableScope } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+
+type VideoItem = { poster: string; videoUrl?: string; label?: string };
+
+
+export function VideoWallSection({ sectionProps = {} }: SectionComponentProps) {
+  const {
+    title = "Quem usa, mostra",
+    subtitle = "Depoimentos em vídeo de quem já comprou.",
+  } = sectionProps as Record<string, string>;
+  const items = ((sectionProps.items as VideoItem[] | undefined) ?? []).filter((v) => v?.poster && v?.videoUrl);
+  const [playing, setPlaying] = React.useState<number | null>(null);
+  if (items.length === 0) return null;
+
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <div className="mb-[18px]">
+        <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-1 text-sm text-[var(--store-muted)]" />
+      </div>
+      <div className="grid grid-cols-3 gap-3 sm:grid-cols-6">
+        <EditableScope path="videos">
+          <Editable.Sections nested>
+            {items.map((v, i) => (
+              <Editable.Section key={i} item id={`video-${i + 1}`} label={`Vídeo ${i + 1}`}>
+                <div className="relative aspect-[9/16] overflow-hidden rounded-xl bg-[var(--store-surface-2)]">
+                  {playing === i && v.videoUrl ? (
+                    <video src={v.videoUrl} controls autoPlay playsInline className="h-full w-full object-cover" />
+                  ) : (
+                    <button type="button" onClick={() => v.videoUrl && setPlaying(i)} aria-label={v.label ?? "Assistir depoimento"} className="group h-full w-full cursor-pointer">
+                      <Editable.Img path="capa" fallback={{ src: v.poster, alt: "" }} label="Capa do vídeo" className="h-full w-full object-cover" loading="lazy" decoding="async" />
+                      {v.videoUrl && (
+                        <span className="absolute inset-0 flex items-center justify-center">
+                          <span className="flex h-11 w-11 items-center justify-center rounded-full bg-white/90 text-[var(--store-ink)] transition-transform group-hover:scale-110"><Play weight="fill" className="text-[18px]" /></span>
+                        </span>
+                      )}
+                    </button>
+                  )}
+                </div>
+              </Editable.Section>
+            ))}
+          </Editable.Sections>
+        </EditableScope>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,20 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// RECEITA DA LANDING DE OFERTA (/oferta) — as seções ABAIXO do hero de compra.
+// Mesma mecânica da home: registry + entradas editáveis pelo agente de branding
+// (catálogo de seções em agents/PADROES.md). O hero de compra (galeria + tiers)
+// é fixo da página; o que muda por marca é a pilha de convencimento abaixo dele.
+// ═══════════════════════════════════════════════════════════════════════════
+import type { HomeRecipe } from "@/components/home/sections/registry";
+
+export const landingRecipe: HomeRecipe = [
+  { section: "attributes-marquee" },
+  { section: "benefits" },
+  { section: "stats-grid" },
+  { section: "ritual" },
+  { section: "media-cards" },
+  { section: "spec-table" },
+  { section: "reviews-carousel" },
+  { section: "video-wall" },
+  { section: "comparison" },
+  { section: "quote-banner" },
+];

package/template/components/landing/oferta-sections.tsx

@@ -0,0 +1,40 @@
+// EDITOR: a pilha de seções da landing /oferta dentro do container PRÓPRIO dela ("oferta").
+//
+// São os mesmos componentes da home, com copy desta página de propósito (é uma campanha). Renderizadas
+// SOLTAS, como app/(loja)/oferta/page.tsx fazia, as seções aparecem na tela mas nada dentro delas é
+// editável: os caminhos cairiam na raiz do documento (foundation 11: a raiz não se grava), e o gate
+// reprova a página por `semContainer`. `withIds` dá a cada entrada da receita a mesma identidade
+// estável que a home usa (IDENTIDADE_PADRAO do registry).
+//
+// Uso na página (server component; este arquivo também é, por isso as exportações NOMEADAS):
+//
+//   <div className="store-layout full-bleed bg-white text-[var(--store-ink)]">
+//     <h1 className="sr-only">Oferta especial</h1>
+//     <OfertaSections data={data} />
+//     <div className="pb-14" />
+//   </div>
+//
+// A rota tem de estar em CONTAINERS_POR_ROTA (lib/rotas-editaveis.ts) como `"/oferta": ["oferta"]`:
+// é o que o editor lê para saber em que página cada seção aparece, e o que o gate confere.
+import { landingRecipe } from "@/components/landing/landing-recipe";
+import { SECTIONS, withIds, type HomeData } from "@/components/home/sections/registry";
+import { PurchaseHeroSection } from "@/components/home/sections/purchase-hero";
+import { EditableSection, EditableSections } from "@/lib/editable";
+
+export function OfertaSections({ data }: { data: HomeData }) {
+  return (
+    <EditableSections container="oferta">
+      <EditableSection id="compra" kind="produto-em-destaque" label="Bloco de compra">
+        <PurchaseHeroSection data={data} />
+      </EditableSection>
+      {withIds(landingRecipe).map((entry) => {
+        const Section = SECTIONS[entry.section];
+        return (
+          <EditableSection key={entry.id} id={entry.id} kind={entry.kind} label={entry.label}>
+            <Section data={data} variant={entry.variant} sectionProps={entry.props} />
+          </EditableSection>
+        );
+      })}
+    </EditableSections>
+  );
+}