@unbox-plus/cli 0.20.4

package/template/components/home/sections/catalogo.ts

@@ -0,0 +1,165 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// CATÁLOGO DE SEÇÕES QUE O LOJISTA PODE ADICIONAR ("+ Adicionar seção" do editor)
+//
+// Quem declara o que pode ser adicionado é a LOJA, nunca o editor. O editor não tem, e não pode ter,
+// lista própria: são 100 lojas, 100 catálogos. O que existe aqui não é um catálogo de EDITABILIDADE
+// (isso continua sendo as "4 latas" da foundation); é o catálogo de COMPONENTES desta loja, que já
+// mora em `registry.ts`, recortado na fatia que o lojista consegue usar sozinho.
+//
+// ── O CORTE: 8 dos 24 do registry ─────────────────────────────────────────────
+// Um tipo só entra se, instanciado SEM props da receita, ele:
+//   1. RENDERIZA algo (não cai em `return null` por lista vazia), e
+//   2. o que ele renderiza é EDITÁVEL: a copy nasce dentro de primitivo (`Editable.Text` &cia.).
+// A regra 1 é a que mais corta nesta foundation: por honestidade, várias seções só renderizam com dado
+// da receita (depoimentos reais, vídeo real, ficha do produto, atributos da marca, promessa de
+// newsletter com endereço de envio). Adicionar uma delas pelo "+" entregaria ao lojista uma seção que
+// não aparece em lugar nenhum. Pior que não oferecer.
+//
+// ── A EXCEÇÃO DA REGRA 1: o bloco de HTML ─────────────────────────────────────
+// "bloco-html" é a única entrada que, recém-adicionada, renderiza NADA na loja publicada, e isso é o
+// desenho, não o modo de falha que a regra 1 persegue. As seções cortadas somem porque falta DADO que
+// o lojista não tem como fornecer; esta nasce vazia porque o conteúdo dela é justamente o que ele vai
+// colar, e no editor (o único lugar onde ele acabou de clicar no "+") ela SEMPRE aparece, com o convite
+// para colar. Sumir da loja enquanto está vazia é o certo.
+//
+// ── PLACEHOLDER NA SEÇÃO CRIADA ───────────────────────────────────────────────
+// Benefícios, como funciona, cards de imagem e citação nascem com a arte de /brand/ph (o SVG que o
+// create-unbox-store recolore com a paleta da marca) e com a copy neutra do componente. É a mesma arte
+// e a mesma copy com que a home da foundation já nasce: o lojista clica na foto e sobe a dele. Se uma
+// loja decidir que o "+" não pode entregar placeholder, tire a entrada daqui; nada mais muda.
+//
+// ── `tipo` É CHAVE PRIMÁRIA (não renomeie) ────────────────────────────────────
+// A chave de cada entrada é o que vai para o documento (`sections.home.criadas: { id → tipo }`) e para
+// o id da seção (`novo-<tipo>-<n>`). Renomear um `tipo` depois que alguém publicou: as seções já
+// adicionadas apontam para um tipo que o catálogo não tem mais, `Editable.Sections` as filtra fora e
+// elas SOMEM DA TELA em silêncio (o painel continua listando, porque ele deriva do rascunho). Tratar
+// como id de seção da receita: nome em pt-br, escolhido uma vez, nunca mais mexido.
+//
+// ── `variant` sim, `props` não ────────────────────────────────────────────────
+// A seção criada nasce com os LITERAIS do componente: nada é escrito em `values`. Por isso este
+// arquivo não passa `sectionProps`: copy que morasse aqui viveria em dois lugares (receita e
+// catálogo) e divergiria, e é justamente a copy que o lojista vai trocar no primeiro clique.
+// `variant` é a exceção porque não é conteúdo, é QUAL composição o componente renderiza.
+//
+// ── FICARAM DE FORA (motivo curto, para quem for mexer depois) ────────────────
+//   attributes-marquee, trust-bar, trust-strip, spec-table, video-wall, reviews, reviews-carousel,
+//   comparison, founder-story, newsletter ..... `return null` sem dado da receita (regra 1). É
+//                   decisão de honestidade da foundation 0.19, e vale igual no "+".
+//   category-pills, combos-carousel, savings, kits, purchase-hero ..... dependem do catálogo/da
+//                   configuração comercial; somem ou esvaziam sem eles.
+//   social-row ..... renderiza com defaults, mas os defaults são gente placeholder ("@suamarca"), e a
+//                   regra da seção é GENTE REAL com autorização: não entra pelo "+".
+//   stats-grid ..... renderiza e é editável, mas é a seção de NÚMERO com dado real; no "+" ela nasceria
+//                   como quatro cards qualitativos e convidaria a inventar estatística.
+//
+// JSX não entra aqui porque o arquivo é `.ts` (o catálogo é declaração, não tela): a instância sai de
+// `React.createElement`.
+// ═══════════════════════════════════════════════════════════════════════════
+import * as React from "react";
+import type { CatalogoDeSecoes, SectionKind } from "@/lib/editable";
+import { SECTIONS, type HomeData, type SectionComponentProps, type SectionName } from "./registry";
+
+interface EntradaDoCatalogo {
+  /** chave do catálogo: vira `novo-<tipo>-<n>` e o valor de `criadas`. NÃO RENOMEAR (ver topo). */
+  tipo: string;
+  /** componente do registry que instancia este tipo */
+  section: SectionName;
+  /** composição do componente; omitida = a default dele */
+  variant?: string;
+  /** o nome que o lojista lê no "+", nunca o nome de código */
+  label: string;
+  /** uma frase dizendo o que a seção mostra (o v1 não tem imagem de prévia) */
+  descricao: string;
+  /** tipo no vocabulário fechado da foundation (`SECTION_KINDS`) */
+  kind: SectionKind;
+}
+
+const CATALOGO_DA_HOME: EntradaDoCatalogo[] = [
+  {
+    tipo: "banner",
+    section: "hero",
+    // "imagem-full" é a única variante do banner que não escreve texto na tela: nasce com a arte da
+    // foundation, e o lojista sobe a imagem dele (uma para computador, outra para celular).
+    variant: "imagem-full",
+    label: "Banner",
+    descricao: "Uma imagem larga, com versão para computador e para celular, que leva aos destaques da loja.",
+    kind: "banner",
+  },
+  {
+    // A VITRINE. Cada uma adicionada ganha id próprio (`novo-vitrine-de-produtos-1`, `-2`, …), e o
+    // caminho da escolha sai desse id (`home.<id>.vitrine`): DUAS vitrines na mesma página têm DUAS
+    // escolhas independentes, sem uma pisar na outra.
+    tipo: "vitrine-de-produtos",
+    section: "product-showcase",
+    label: "Vitrine de produtos",
+    descricao: "Uma grade de produtos que você escolhe (uma categoria inteira, uma lista sua ou uma busca), com foto, preço e botão de comprar em cada card.",
+    kind: "vitrine-de-produtos",
+  },
+  {
+    tipo: "beneficios",
+    section: "benefits",
+    label: "Benefícios",
+    descricao: "Título, duas colunas de benefícios com texto curto e uma foto no meio.",
+    kind: "beneficios",
+  },
+  {
+    tipo: "como-funciona",
+    section: "ritual",
+    label: "Como funciona",
+    descricao: "Fotos que se alternam de um lado e, do outro, um selo, um título, uma lista de passos e um botão.",
+    kind: "como-funciona",
+  },
+  {
+    tipo: "cards-de-imagem",
+    section: "media-cards",
+    label: "Cards de imagem",
+    descricao: "Título e uma fileira de cards com foto e legenda, que rolam para o lado.",
+    kind: "galeria",
+  },
+  {
+    tipo: "citacao",
+    section: "quote-banner",
+    label: "Citação",
+    descricao: "Faixa de cor da marca com uma foto e uma frase grande assinada por alguém da loja.",
+    kind: "sobre-a-marca",
+  },
+  {
+    // O BLOCO DE HTML: a única entrada que não desenha nada por conta própria (ver "A EXCEÇÃO DA
+    // REGRA 1" no topo). `kind: "outro"` é a escolha honesta: o vocabulário fechado da foundation não
+    // tem um tipo para "o que o lojista colar", e carimbar "beneficios" ou "sobre-a-marca" faria o
+    // painel afirmar um conteúdo que ninguém conferiu.
+    tipo: "bloco-html",
+    section: "bloco-html",
+    label: "Bloco de HTML",
+    // A frase diz o que NÃO entra porque a recusa acontece depois de colar: sem esse aviso aqui, o
+    // lojista descobre a regra levando um "não" com o texto já no campo.
+    descricao: "Para colar um código pronto que te passaram: um selo, uma tabela de medidas, um trecho de conteúdo. Código que roda (script) e formulário não entram.",
+    kind: "outro",
+  },
+];
+
+/**
+ * O catálogo pronto para `Editable.Sections catalogo={…}`.
+ *
+ * Recebe `data` porque é o que a home já buscou no servidor: `render` fecha por closure e as seções
+ * criadas enxergam o mesmo catálogo de produtos das que vêm do código. Pode ser chamado a cada render:
+ * `Editable.Sections` compara o catálogo por uma ASSINATURA de texto, não por referência, então um
+ * objeto novo por render não re-registra os tipos nem impede o manifesto de assentar.
+ */
+export function catalogoDaHome(data: HomeData): CatalogoDeSecoes {
+  return Object.fromEntries(
+    CATALOGO_DA_HOME.map((e) => {
+      // o componente do registry é um union de todas as seções; todas recebem `SectionComponentProps`
+      const Componente = SECTIONS[e.section] as React.ComponentType<SectionComponentProps>;
+      return [
+        e.tipo,
+        {
+          label: e.label,
+          descricao: e.descricao,
+          kind: e.kind,
+          render: () => React.createElement(Componente, { data, variant: e.variant }),
+        },
+      ];
+    }),
+  );
+}

package/template/components/home/sections/category-pills.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+// PILLS de categorias — chips com thumb, quebram em várias linhas pra exibir todas.
+//
+// EDITOR: nada aqui é copy da marca. Nome, ordem e imagem das categorias vêm do catálogo da Unbox
+// (o lojista muda no painel da plataforma), então a seção não abre ponto editável e sai do gate por
+// `data-editor-ignore` (README do editor, §8: produto do catálogo não vira primitivo). O que o
+// lojista edita nela é o lugar na página: ordem e ocultar, pela seção.
+import Link from "next/link";
+import Image from "next/image";
+import { collImageSrc } from "@/components/catalog/catalog-client";
+import type { SectionComponentProps } from "./registry";
+
+export function CategoryPillsSection({ data }: SectionComponentProps) {
+  if (data.categories.length === 0) return null;
+  return (
+    <div className="mx-auto max-w-[var(--container-max,1240px)] px-4 pt-[18px] sm:px-6">
+      <div className="flex flex-wrap gap-2.5" data-editor-ignore="">
+        {data.categories.map((c) => (
+          <Link
+            key={c.slug}
+            href={`/categoria/${encodeURIComponent(c.slug)}`}
+            className="flex flex-none items-center gap-[11px] rounded-full border-[1.5px] border-[var(--store-line)] bg-white py-[7px] pl-2 pr-5 no-underline transition-all hover:border-[var(--store-primary,#18181B)] hover:shadow-[var(--store-shadow-soft)]"
+          >
+            <Image src={collImageSrc(c.name)} alt="" width={44} height={44} className="h-11 w-11 flex-none object-contain" />
+            <span className="font-display whitespace-nowrap text-[14px] font-semibold not-italic text-[var(--store-ink)]">{c.name}</span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,141 @@
+"use client";
+
+// Carrossel de produtos em destaque (combos/ofertas) com add-to-cart funcional.
+// Âncora #destaques — alvo do CTA do hero.
+//
+// ── EDITOR: esta é a VITRINE DA HOME ────────────────────────────────────────
+// `Editable.Vitrine` deixa o LOJISTA escolher o que aparece aqui (uma categoria da Unbox, uma lista
+// de produtos ou uma busca). O documento guarda só a ESCOLHA; quem a transforma em produto com preço
+// e estoque é a LOJA, no servidor (lib/vitrine.ts), e os produtos chegam prontos em `data.vitrines`.
+//
+// O CAMINHO NÃO É CONSTANTE. `path={CAMPO_VITRINE}` é RELATIVO à seção: o primitivo o resolve para
+// `<container>.<id da seção>.vitrine` pelo escopo, e aqui `joinPath(ctx.scope, CAMPO_VITRINE)` deriva
+// EXATAMENTE a mesma string para achar os produtos já resolvidos. Escrever o caminho completo à mão
+// descola os dois lados no primeiro id renomeado, em silêncio.
+//
+// FALLBACK = o que o código mostra hoje (`data.combos`, a regra da página: kits, senão ofertas, senão
+// destaques). Enquanto o lojista não escolher, e também quando a escolha não resolve em nada (Unbox
+// fora, categoria esvaziada), esta seção renderiza o mesmo HTML de antes. Vitrine vazia lê como loja
+// quebrada.
+//
+// O produto resolvido pela escolha traz id, título, foto, preço e estoque, mas não a VARIANTE. O card
+// do catálogo já carregado (com variante, preço antigo e selo) é reaproveitado quando o produto está
+// nele; fora dele, o card nasce mínimo: liga à página do produto e não tem o "+" do carrinho (regra do
+// ProductGridCard: sem variantId, sem botão). Preço e nome continuam sendo dado do catálogo (§8).
+//
+// Na PRÉVIA os produtos vêm pelo 4º argumento do render-prop: o rascunho não passa pelo servidor da
+// loja, então o primitivo pergunta à própria loja (`POST /api/unbox/vitrine`) e entrega em `previa`.
+// `previa.produtos` GANHA de `data.vitrines`. Em produção `previa` é `undefined` e nada aqui muda.
+import * as React from "react";
+import Link from "next/link";
+import { CaretLeft, CaretRight, ArrowRight } from "@phosphor-icons/react/dist/ssr";
+import { useCart } from "@/components/cart/cart-provider";
+import type { CatalogProductItem } from "@/components/catalog/catalog-client";
+import { ProductGridCard } from "@/components/catalog/product-grid-card";
+import { CAMPO_VITRINE, Editable, joinPath, useEditableContext, type VitrineProdutoResolvido, type VitrineValue } from "@/lib/editable";
+import { formatBRL } from "@/lib/format";
+import type { SectionComponentProps } from "./registry";
+
+/** Quantos produtos a vitrine mostra quando a escolha do lojista não diz (o mesmo teto da página). */
+const TETO_PADRAO = 10;
+
+/** Produto resolvido pela escolha do lojista → item de card (ver o cabeçalho). */
+function itemDaVitrine(p: VitrineProdutoResolvido, catalogo: CatalogProductItem[]): CatalogProductItem {
+  const doCatalogo = catalogo.find((c) => c.productId === p.id || c.slug === p.slug);
+  if (doCatalogo) return doCatalogo;
+  return {
+    slug: p.slug,
+    title: p.titulo,
+    weight: "",
+    categories: [],
+    price: p.preco ?? 0,
+    // `preco: null` = produto sem variante com preço no painel; `formatBRL` devolve "—" (ausência honesta)
+    displayPrice: formatBRL(p.preco),
+    oldPrice: null,
+    displayOld: null,
+    offPct: null,
+    imageUrl: p.imagem,
+    productId: p.id,
+    variantId: null,
+    badge: null,
+    soldOut: p.esgotado,
+  };
+}
+
+export function CombosCarouselSection({ data }: SectionComponentProps) {
+  const { add } = useCart();
+  const [busyId, setBusyId] = React.useState<string | null>(null);
+  const rowRef = React.useRef<HTMLDivElement | null>(null);
+
+  // O MESMO caminho que o primitivo registra logo abaixo, derivado do escopo da seção.
+  const ctx = useEditableContext();
+  const doServidor = data.vitrines?.[joinPath(ctx.scope, CAMPO_VITRINE)] ?? null;
+  // A escolha que o CÓDIGO representa: os produtos desta seção hoje, na ordem em que aparecem.
+  // Vínculo pelo productId, não pelo slug: ver product-showcase.tsx. Slug muda no painel e o
+  // produto some da seção em silêncio; o id é estável.
+  const fallbackVitrine: VitrineValue = { modo: "produtos", produtos: data.combos.map((p) => p.productId || p.slug) };
+
+  // Sem catálogo nenhum a seção não tem o que mostrar. No modo edição ela CONTINUA na tela: sumindo
+  // dali, o lojista não conseguiria selecionar a vitrine para trocar a escolha.
+  if (data.combos.length === 0 && !doServidor?.length && !ctx.editing) return null;
+
+  async function quickAdd(p: CatalogProductItem) {
+    if (!p.productId || !p.variantId || p.soldOut) return;
+    setBusyId(p.variantId);
+    await add({ productId: p.productId, variantId: p.variantId, price: p.price, quantity: 1, thumbnail: p.imageUrl ?? undefined, title: p.title });
+    setBusyId(null);
+  }
+  const scrollRow = (dir: number) => rowRef.current?.scrollBy({ left: dir * 300, behavior: "smooth" });
+
+  return (
+    <div id="destaques" className="mx-auto max-w-[var(--container-max,1240px)] scroll-mt-24 px-4 pt-[42px] sm:px-6">
+      <div className="mb-[18px] flex items-end justify-between gap-3">
+        <div>
+          {/* o título de partida é o que a página derivou do catálogo ("Destaques", "Ofertas em destaque") */}
+          <Editable.Text as="h2" path="titulo" fallback={data.combosTitle} label="Título" className="font-display text-[26px] font-extrabold" />
+          <Editable.Text as="p" path="subtitulo" fallback="Produtos em destaque para você." label="Subtítulo" className="mt-1 text-sm text-[var(--store-muted)]" />
+        </div>
+        <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>
+      {/* O primitivo só REGISTRA o caminho e devolve os atributos de seleção; em produção ele não
+          põe nada no DOM: sem escolha do lojista, o HTML aqui é o mesmo de antes. */}
+      <Editable.Vitrine path={CAMPO_VITRINE} label="Produtos desta vitrine" fallback={fallbackVitrine}>
+        {(escolha, attrs, ref, previa) => {
+          // No modo PRODUTOS a lista É a resposta: mostra tantos quantos o lojista escolheu. Nos
+          // outros modos o limite decide o tamanho, com o teto da página como padrão.
+          const teto = escolha.modo === "produtos" ? escolha.produtos.length : (escolha.limite ?? TETO_PADRAO);
+          // a prévia (rascunho de agora) ganha do que o servidor resolveu (documento publicado)
+          const resolvidos = previa?.produtos ?? doServidor;
+          // LISTA VAZIA cai nos produtos do CÓDIGO, não numa fileira em branco: é o que a página
+          // publicada faz (`resolverVitrinesDoDocumento` deixa de fora o caminho que não resolveu em
+          // nada). Quem avisa o lojista é a tarja âmbar do primitivo, que só existe na prévia.
+          const itens = resolvidos && resolvidos.length ? resolvidos.slice(0, teto).map((p) => itemDaVitrine(p, data.combos)) : data.combos;
+          return (
+            // dois refs num elemento só: o do carrossel (setas) e o do editor (seleção)
+            <div ref={(el) => { rowRef.current = el; ref(el); }} {...attrs} className="flex gap-[18px] overflow-x-auto pb-3.5 [scrollbar-width:thin]">
+              {itens.map((c) => (
+                <div key={c.slug} className="w-[260px] flex-none">
+                  <ProductGridCard p={c} busy={busyId === c.variantId} onAdd={() => quickAdd(c)} />
+                </div>
+              ))}
+              {/* card final: ver todos os produtos (o destino é a mecânica do catálogo; as frases são copy) */}
+              <Link
+                href="/produtos"
+                className="group flex w-[260px] flex-none flex-col items-center justify-center gap-3.5 rounded-2xl border-[1.5px] border-dashed border-[var(--store-primary-soft)] bg-white/60 p-6 text-center no-underline transition-colors hover:border-[var(--store-primary,#18181B)] hover:bg-[var(--store-primary-soft,#F1F1F3)]"
+              >
+                <span className="flex h-14 w-14 items-center justify-center rounded-full bg-[var(--store-primary-soft,#F1F1F3)] text-[var(--store-primary,#18181B)] transition-colors group-hover:bg-[var(--store-primary,#18181B)] group-hover:text-white">
+                  <ArrowRight weight="bold" className="text-2xl" />
+                </span>
+                <Editable.Text path="ver-todos.titulo" fallback="Ver todos os produtos" label="Título do card de ver todos" className="font-display text-[17px] font-extrabold leading-[1.2] text-[var(--store-primary,#18181B)]" />
+                <Editable.Text path="ver-todos.texto" fallback="Explore o catálogo completo" label="Texto do card de ver todos" className="text-[13px] text-[var(--store-muted)]" />
+              </Link>
+            </div>
+          );
+        }}
+      </Editable.Vitrine>
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+"use client";
+
+// Comparativo "nós vs outros" — tabela ESTRUTURAL (a loja de referência usava imagem raster; aqui é
+// componente de verdade: acessível, responsivo e recolorível). Conteúdo via receita.
+// ⚠️ Compare ATRIBUTOS do seu produto, sem citar marcas concorrentes nem inventar dado.
+//
+// EDITOR: título e os dois cabeçalhos de coluna são caminhos da seção; as linhas são uma LISTA
+// editável (`linhas.linha-N`). Em cada linha o atributo é texto; cada célula é OU um ícone
+// (`nos-icone` / `outros-icone`, trocável por imagem) OU um texto (`nos` / `outros`), conforme a
+// receita traz booleano ou frase. São caminhos diferentes de propósito: trocar o TIPO de um caminho
+// descarta a edição do lojista. O divisor entre linhas é regra do container (`[&>*+*>div]`),
+// porque o invólucro do item é display:contents e é ele o irmão no DOM.
+import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
+import { Editable, EditableScope } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+
+type CompRow = { label: string; us: boolean | string; others: boolean | string };
+
+function Cell({ v, coluna }: { v: boolean | string; coluna: "nos" | "outros" }) {
+  const onde = coluna === "nos" ? "coluna da loja" : "coluna dos outros";
+  if (v === true) {
+    return (
+      <Editable.Icon path={`${coluna}-icone`} label={`Ícone de sim (${onde})`} size={22} className="mx-auto text-[22px] text-[var(--store-primary,#18181B)]">
+        <CheckCircle weight="fill" />
+      </Editable.Icon>
+    );
+  }
+  if (v === false) {
+    return (
+      <Editable.Icon path={`${coluna}-icone`} label={`Ícone de não (${onde})`} size={22} className="mx-auto text-[22px] text-[var(--store-faint)]">
+        <XCircle weight="fill" />
+      </Editable.Icon>
+    );
+  }
+  return <Editable.Text path={coluna} fallback={v} label={`Texto da célula (${onde})`} className="text-[13px] text-[var(--store-muted)]" />;
+}
+
+export function ComparisonSection({ sectionProps = {} }: SectionComponentProps) {
+  const {
+    title = "Compare e escolha bem",
+    usLabel = "Aqui",
+    othersLabel = "Por aí",
+  } = sectionProps as Record<string, string>;
+  const rows = ((sectionProps.rows as CompRow[] | undefined) ?? []).filter((r) => r?.label);
+  if (rows.length === 0) return null; // comparativo é afirmação sobre o produto: só com dado da marca
+  return (
+    <div className="mx-auto max-w-[880px] px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <Editable.Text as="h2" path="titulo" fallback={title} label="Título" className="font-display text-center text-[28px] font-extrabold leading-[1.15]" />
+      <div className="mt-7 overflow-hidden rounded-2xl border border-[var(--store-line-2)] bg-white">
+        <div className="grid grid-cols-[1.6fr_1fr_1fr] border-b border-[var(--store-line)] bg-[var(--store-surface)] text-center">
+          <div />
+          <Editable.Text as="div" path="nos" fallback={usLabel} label="Cabeçalho da coluna da loja" className="font-display py-3 text-[14px] font-extrabold text-[var(--store-primary,#18181B)]" />
+          <Editable.Text as="div" path="outros" fallback={othersLabel} label="Cabeçalho da coluna dos outros" className="font-display py-3 text-[14px] font-bold text-[var(--store-muted)]" />
+        </div>
+        <div className="[&>*+*>div]:border-t [&>*+*>div]:border-[var(--store-line)]">
+          <EditableScope path="linhas">
+            <Editable.Sections nested>
+              {rows.map((r, i) => (
+                <Editable.Section key={i} item id={`linha-${i + 1}`} label={`Linha ${i + 1}`}>
+                  <div className="grid grid-cols-[1.6fr_1fr_1fr] items-center text-center">
+                    <Editable.Text as="div" path="rotulo" fallback={r.label} label="Atributo comparado" className="px-4 py-3.5 text-left text-[14px] font-semibold text-[var(--store-ink-2)]" />
+                    <div className="py-3.5"><Cell v={r.us} coluna="nos" /></div>
+                    <div className="py-3.5"><Cell v={r.others} coluna="outros" /></div>
+                  </div>
+                </Editable.Section>
+              ))}
+            </Editable.Sections>
+          </EditableScope>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/components/home/sections/founder-story.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+// História da marca: card com foto de fundo e bloco de texto sobreposto + assinatura.
+// Portado de loja real em produção e genericizado. Âncora #nossa-historia (pode ser alvo do menu).
+//
+// EDITOR: foto, título, texto e assinatura são caminhos da seção. A assinatura só registra caminho
+// quando a receita a traz: não abrimos ponto de "assinatura" numa história que não é assinada.
+// 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 } from "@/lib/editable";
+import type { SectionComponentProps } from "./registry";
+import { Foto } from "@/components/ui/foto";
+
+export function FounderStorySection({ sectionProps = {} }: SectionComponentProps) {
+  const {
+    title = "Nossa história",
+    text = "",
+    signature = "",
+    image = "/brand/ph/photo-c.svg",
+  } = sectionProps as Record<string, string>;
+  // História é da marca: sem texto na receita, a seção não renderiza (nada de história genérica).
+  if (!text) return null;
+  return (
+    <div id="nossa-historia" className="reveal mx-auto max-w-[var(--container-max,1240px)] scroll-mt-24 px-4 pt-[var(--section-gap,52px)] sm:px-6">
+      <div className="relative overflow-hidden rounded-2xl">
+        {/* TODO: foto real de bastidor/fundador (desktop ~21:9) */}
+        <Editable.Slot path="imagem" type="image" fallback={{ src: image, alt: "" }} label="Foto de fundo">
+          {(v, attrs, ref) => <Foto ref={ref} attrs={attrs} src={v.src} alt={v.alt ?? ""} width={2480} height={840} sizes="(min-width: 1280px) 1240px, 100vw" className="h-[420px] w-full object-cover sm:h-[460px]" />}
+        </Editable.Slot>
+        <div className="absolute inset-0 flex items-end p-5 sm:items-center sm:p-10">
+          <div className="max-w-[480px] rounded-2xl bg-white/95 p-6 sm:p-8">
+            <Editable.Text as="h2" path="titulo" fallback={title} label="Título" className="font-display text-[24px] font-extrabold" />
+            <Editable.Text as="p" path="texto" fallback={text} label="Texto da história" multiline className="mt-3 text-[14.5px] leading-[1.6] text-[var(--store-ink-2)]" />
+            {signature && <Editable.Text as="div" path="assinatura" fallback={signature} label="Assinatura" className="font-display mt-4 text-[18px] font-bold italic text-[var(--store-primary,#18181B)]" />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}