@unbox-plus/cli 0.20.4

package/template/components/product/pdp/catalog-grid.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { Plus, Heart, Spinner, ArrowRight } from "@phosphor-icons/react/dist/ssr";
+import { useCart } from "@/components/cart/cart-provider";
+// EDITOR: módulo de cliente ("use client"): aqui o namespace `Editable.*` é a forma de uso (README §4).
+import { Editable } from "@/lib/editable";
+
+export interface CatalogItem {
+  slug: string;
+  title: string;
+  displayPrice: string;
+  imageUrl?: string | null;
+  weight?: string | null;
+  productId?: string;
+  variantId?: string | null;
+  price?: number | null;
+  badge?: { label: string; bg: string; fg: string } | null;
+}
+
+/**
+ * Link "Ver todos os produtos" do bloco de catálogo da PDP. É `Slot` de tipo link (e não `Link`
+ * editável) porque o rótulo divide o elemento com o ícone: no `Editable.Link`, editar o rótulo
+ * apagaria a seta. Vive aqui, num módulo de cliente, porque o render-prop não atravessa a fronteira
+ * de servidor da view (pdp-view.tsx).
+ */
+export function CatalogCta() {
+  return (
+    <Editable.Slot path="cta" type="link" fallback={{ href: "/produtos", label: "Ver todos os produtos" }} label="Link para o catálogo completo">
+      {(v, attrs, ref, estilo) => (
+        <Link
+          ref={ref}
+          href={v.href}
+          {...attrs}
+          style={estilo}
+          className="flex items-center gap-1.5 text-sm font-bold text-[var(--store-primary,#18181B)] no-underline max-sm:hidden"
+        >
+          {v.label ?? "Ver todos os produtos"}{" "}
+          <Editable.Icon path="cta-icone" label="Ícone do link" size={14}>
+            <ArrowRight weight="bold" />
+          </Editable.Icon>
+        </Link>
+      )}
+    </Editable.Slot>
+  );
+}
+
+// EDITOR: os produtos da grade são dado do catálogo, não copy do molde: fora do editor (README §8).
+export function CatalogGrid({ items }: { items: CatalogItem[] }) {
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5" data-editor-ignore>
+      {items.map((p) => (
+        <Card key={p.slug} item={p} />
+      ))}
+    </div>
+  );
+}
+
+function Card({ item }: { item: CatalogItem }) {
+  const { add } = useCart();
+  const [busy, setBusy] = React.useState(false);
+  const canQuickAdd = !!item.productId && !!item.variantId && item.price != null;
+
+  async function quickAdd() {
+    if (!canQuickAdd) return;
+    setBusy(true);
+    await add({
+      productId: item.productId!,
+      variantId: item.variantId!,
+      price: item.price ?? 0,
+      quantity: 1,
+      thumbnail: item.imageUrl ?? undefined,
+      title: item.title,
+    });
+    setBusy(false);
+  }
+
+  return (
+    <div className="relative flex flex-col rounded-2xl border border-[var(--store-line)] bg-white p-3.5">
+      {item.badge && (
+        <span className="absolute left-3.5 top-3.5 z-[1] rounded-md px-2.5 py-1 text-[10px] font-extrabold tracking-[0.3px]" style={{ background: item.badge.bg, color: item.badge.fg }}>
+          {item.badge.label}
+        </span>
+      )}
+      <button type="button" aria-label="Favoritar" className="absolute right-3.5 top-3.5 z-[1] flex h-8 w-8 items-center justify-center rounded-full border border-[var(--store-line)] bg-white">
+        <Heart className="text-[15px] text-[var(--store-faint)]" />
+      </button>
+
+      <Link href={`/produto/${encodeURIComponent(item.slug)}`} className="flex h-[150px] items-center justify-center">
+        {item.imageUrl ? (
+          <span className="relative block h-full w-full">
+            <Image src={item.imageUrl} alt={item.title} fill sizes="180px" className="object-contain p-0.5" />
+          </span>
+        ) : (
+          <span className="text-[var(--store-faint)]">sem imagem</span>
+        )}
+      </Link>
+
+      <Link href={`/produto/${encodeURIComponent(item.slug)}`} className="text-sm font-bold leading-tight text-[var(--store-ink)] no-underline line-clamp-2">{item.title}</Link>
+      {item.weight && <div className="mt-0.5 text-xs text-[var(--store-muted)]">{item.weight}</div>}
+      <div className="mt-2.5 flex items-center justify-between">
+        <div className="font-display text-[17px] font-extrabold text-[var(--store-ink)]">{item.displayPrice}</div>
+        {canQuickAdd && (
+          <button type="button" onClick={quickAdd} disabled={busy} aria-label="Adicionar ao carrinho" className="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--store-primary,#18181B)] text-white shadow-[var(--store-shadow-cta-sm)] transition-colors hover:bg-[var(--store-primary-dark,#09090B)] disabled:opacity-60">
+            {busy ? <Spinner className="animate-spin text-lg" /> : <Plus weight="bold" className="text-lg" />}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/components/product/pdp/faq-modelo.ts

@@ -0,0 +1,86 @@
+// AS PERGUNTAS MODELO DO FAQ DA PÁGINA DE PRODUTO, e o eco delas para o dado estruturado.
+//
+// Módulo SEM "use client" de propósito: a lista (components/product/pdp/interactive.tsx, cliente) e a
+// página (app/(loja)/produto/[productSlug]/page.tsx, servidor) leem a MESMA constante. Um server
+// component que importasse a constante de um módulo de cliente receberia uma referência, não a lista.
+//
+// Só perguntas com resposta que o template CONSEGUE afirmar: o prazo de arrependimento do CDC (lei, vale
+// para toda loja online no Brasil) e a regra de frete grátis SE configurada em lib/store-config.ts.
+// Prazo de entrega e validade não entram: eram inventados. As perguntas do PRODUTO vêm do enriquecimento
+// (lib/enrichment/products.json) e são dado do catálogo, não copy do molde.
+//
+// EDITOR: estas são as perguntas MODELO do molde, uma LISTA editável (reordenar, ocultar, duplicar), com
+// id por PAPEL: a de frete só existe com regra real de frete grátis, e um id posicional deslizaria (a
+// resposta que o lojista escreveu na pergunta 2 apareceria na 1) quando a regra mudasse. Ids e caminhos
+// são chave de arquivo (README do editor, §6): não existe renomear.
+import { FREE_SHIPPING_THRESHOLD } from "@/lib/store-config";
+import { orderSections, resolveValue, type ContentDocument } from "@/lib/editable/document";
+
+export interface PerguntaResposta {
+  question: string;
+  answer: string;
+}
+export interface PerguntaModelo extends PerguntaResposta {
+  id: string;
+  label: string;
+}
+
+export const FAQ_MODELO: readonly PerguntaModelo[] = [
+  ...(FREE_SHIPPING_THRESHOLD != null
+    ? [{ id: "frete", label: "Pergunta sobre frete", question: "Tem frete grátis?", answer: `Sim, para compras a partir de R$ ${FREE_SHIPPING_THRESHOLD}. Abaixo disso o frete é calculado pelo CEP no carrinho.` }]
+    : []),
+  {
+    id: "devolucao",
+    label: "Pergunta sobre devolução",
+    question: "Posso desistir da compra?",
+    answer: "Sim. Você tem 7 dias corridos a partir do recebimento para desistir, com reembolso integral, conforme o art. 49 do Código de Defesa do Consumidor. Os detalhes estão na página de trocas e devoluções.",
+  },
+];
+
+/** caminhos de cada pergunta, RELATIVOS ao item (`produto.qualidade-faq.faq.devolucao.pergunta`) */
+export const CAMINHO_PERGUNTA = "pergunta";
+export const CAMINHO_RESPOSTA = "resposta";
+
+// Onde a lista mora no documento: container da PDP, seção, cartão do FAQ, pergunta. São os mesmos ids que
+// pdp-view.tsx e a FaqList escrevem; mudar um lado sem o outro descola o dado estruturado da tela.
+export const CONTAINER_DA_PDP = "produto";
+export const SECAO_QUALIDADE_FAQ = "qualidade-faq";
+export const CARTAO_FAQ = "faq";
+
+/**
+ * O FAQ COMO ELE ESTÁ NA TELA, lido do documento publicado, para o FAQPage (JSON-LD) da página.
+ *
+ * A regra da página é uma só: o dado estruturado nasce da MESMA lista que o accordion renderiza. Se o
+ * bloco some da tela, some do JSON-LD; pergunta que a loja não responde não vira schema. Com o editor, a
+ * lista que o accordion renderiza depende do publicado: a seção pode estar oculta, o cartão do FAQ pode
+ * estar oculto ou duplicado, e cada pergunta modelo pode ter sido reordenada, ocultada, duplicada ou
+ * reescrita. Este eco lê tudo isso do documento do mesmo jeito que os primitivos leem (ordem e ocultas
+ * por `orderSections`, valor por `resolveValue`), sem registrar ponto editável nenhum: é a mesma técnica
+ * da faixa corrida da home. Sem documento (loja nunca publicou, editor fora), o que vale é o código.
+ *
+ * As perguntas do enriquecimento entram antes das modelo, na ordem em que a FaqList as mostra.
+ */
+export function faqNaTela(doc: ContentDocument | null | undefined, doEnriquecimento: readonly PerguntaResposta[]): PerguntaResposta[] {
+  const secoes = doc?.sections ?? {};
+  const lista: PerguntaResposta[] = [];
+  // a seção e as cópias dela que estão visíveis, na ordem do container `produto`
+  for (const secao of orderSections([SECAO_QUALIDADE_FAQ], secoes[CONTAINER_DA_PDP]).visible) {
+    const escopoDaSecao = `${CONTAINER_DA_PDP}.${secao}`;
+    // o cartão do FAQ e as cópias dele, dentro da seção
+    for (const cartao of orderSections([CARTAO_FAQ], secoes[escopoDaSecao]).visible) {
+      const escopoDoCartao = `${escopoDaSecao}.${cartao}`;
+      const estado = secoes[escopoDoCartao];
+      lista.push(...doEnriquecimento);
+      for (const id of orderSections(FAQ_MODELO.map((f) => f.id), estado).visible) {
+        // uma cópia lê o texto no próprio escopo e cai no modelo da origem quando o lojista não o mudou
+        const base = FAQ_MODELO.find((f) => f.id === (estado?.clones?.[id] ?? id));
+        if (!base) continue;
+        lista.push({
+          question: resolveValue(doc, `${escopoDoCartao}.${id}.${CAMINHO_PERGUNTA}`, base.question),
+          answer: resolveValue(doc, `${escopoDoCartao}.${id}.${CAMINHO_RESPOSTA}`, base.answer),
+        });
+      }
+    }
+  }
+  return lista;
+}

package/template/components/product/pdp/gallery.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+import { Heart, PlayCircle } from "@phosphor-icons/react/dist/ssr";
+
+export function PdpGallery({
+  images,
+  videos,
+  title,
+  discountPct,
+}: {
+  images: string[];
+  videos?: string[];
+  title: string;
+  discountPct?: number | null;
+}) {
+  const imgs = images.length ? images : [];
+  const [active, setActive] = React.useState(0);
+  const [wish, setWish] = React.useState(false);
+  const hasVideo = (videos?.length ?? 0) > 0;
+  const current = imgs[active];
+
+  // EDITOR: fotos e vídeo são do produto (catálogo da Unbox), não copy do molde: a galeria inteira
+  // fica fora do editor (`data-editor-ignore`, README §8).
+  return (
+    <div className="grid grid-cols-[74px_1fr] gap-4 max-md:flex max-md:flex-col-reverse lg:sticky lg:top-[150px]" data-editor-ignore>
+      {/* thumbnails */}
+      <div className="flex flex-col gap-3 max-md:flex-row max-md:overflow-x-auto">
+        {imgs.slice(0, 4).map((src, i) => (
+          <button
+            key={src + i}
+            type="button"
+            onClick={() => setActive(i)}
+            aria-label={`Imagem ${i + 1}`}
+            className="relative h-[74px] w-[74px] shrink-0 overflow-hidden rounded-xl bg-[var(--store-line)]"
+            style={{ border: i === active ? "2px solid var(--store-primary,#18181B)" : "1px solid var(--store-line)" }}
+          >
+            <Image src={src} alt="" fill sizes="74px" className="object-cover" />
+          </button>
+        ))}
+        {hasVideo && (
+          <a
+            href={videos![0]}
+            target="_blank"
+            rel="noreferrer"
+            className="flex h-[74px] w-[74px] shrink-0 flex-col items-center justify-center gap-0.5 rounded-xl border border-[var(--store-line)] bg-[var(--store-chrome-bg)] text-white"
+          >
+            <PlayCircle className="text-[22px] text-[var(--store-cta,#D97706)]" />
+            <span className="text-[9px] font-bold">Vídeo</span>
+          </a>
+        )}
+      </div>
+
+      {/* main image */}
+      <div className="relative h-[360px] overflow-hidden rounded-xl border border-[var(--store-line)] bg-[var(--store-line)] sm:h-[560px]">
+        <div className="absolute left-4 top-4 z-[2] flex flex-col items-start gap-2">
+          {/* Sem selo "MAIS VENDIDO" fixo: aparecia em todo produto de toda loja, sem dado de venda.
+              O selo de desconto abaixo fica porque vem do compareAtPrice real. */}
+          {discountPct ? (
+            <span className="rounded-md bg-[var(--store-sale)] px-[11px] py-[5px] text-[11px] font-extrabold tracking-[0.4px] text-white">-{discountPct}% OFF</span>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          onClick={() => setWish((w) => !w)}
+          aria-label="Favoritar"
+          className="absolute right-4 top-4 z-[2] flex h-[42px] w-[42px] items-center justify-center rounded-full border border-[var(--store-line)] bg-white"
+        >
+          <Heart weight={wish ? "fill" : "regular"} className="text-[20px]" style={{ color: wish ? "var(--store-sale)" : "var(--store-muted)" }} />
+        </button>
+        {current ? (
+          <Image src={current} alt={title} fill priority sizes="(max-width:1024px) 100vw, 50vw" className="object-cover" />
+        ) : (
+          <div className="flex h-full items-center justify-center text-[var(--store-muted)]">sem imagem</div>
+        )}
+        {imgs.length > 1 && (
+          <div className="absolute bottom-3.5 left-1/2 flex -translate-x-1/2 gap-1.5">
+            {imgs.slice(0, 4).map((_, i) => (
+              <span key={i} className="h-2 w-2 rounded-full" style={{ background: i === active ? "var(--store-primary,#18181B)" : "var(--store-line-2)" }} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/components/product/pdp/interactive.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+// Abas da PDP, "modo de uso" e FAQ. REGRA DESTE ARQUIVO: nada aqui tem conteúdo default de PRODUTO.
+// Cada bloco só renderiza com dado real vindo do enriquecimento (lib/enrichment/products.json)
+// ou da Unbox; a única copy do molde é a das perguntas MODELO do FAQ (faq-modelo.ts), que o
+// template consegue afirmar e o lojista edita. A versão anterior trazia passos de uso de um produto de alimentação cravados no
+// código, uma aba nutricional que aparecia com traços em loja de qualquer ramo, e um FAQ inventado
+// (validade de 24 meses, devolução em 30 dias). Tudo isso vazou para lojas entregues.
+// Um campo vazio declarado é melhor que um campo plausível inventado.
+import * as React from "react";
+import { CaretDown } from "@phosphor-icons/react/dist/ssr";
+// EDITOR: módulo de cliente ("use client"): aqui o namespace `Editable.*` é a forma de uso (README §4).
+import { Editable } from "@/lib/editable";
+import { FAQ_MODELO, CAMINHO_PERGUNTA, CAMINHO_RESPOSTA, type PerguntaResposta } from "@/components/product/pdp/faq-modelo";
+
+export interface KV { k: string; v: string }
+
+export function ProductTabs({
+  descHtml,
+  infoHtml,
+  specItems,
+  nutriItems,
+  nutriBase,
+  usageSteps,
+}: {
+  descHtml?: string | null;
+  infoHtml?: string | null;
+  /** Ficha técnica (composição, medidas, origem...). Vazio = a aba não existe. */
+  specItems: KV[];
+  /** Tabela nutricional — só para alimento/suplemento com dado real. Vazio = a aba não existe. */
+  nutriItems: KV[];
+  /** Base da tabela nutricional, ex.: "100 g" ou "porção de 30 g". */
+  nutriBase?: string | null;
+  /** Passos de uso do produto, do enriquecimento. Vazio = o bloco não existe. */
+  usageSteps?: string[] | null;
+}) {
+  // As abas existem em função do dado, não o contrário.
+  const tabs: { label: string; render: () => React.ReactNode }[] = [
+    {
+      label: "Descrição",
+      render: () => (
+        <div className={`grid gap-10 ${usageSteps?.length ? "lg:grid-cols-[1.4fr_1fr]" : ""}`}>
+          <div className="text-[15px] leading-[1.75] text-[var(--store-ink-2)]">
+            {descHtml ? (
+              <div className="richtext" dangerouslySetInnerHTML={{ __html: descHtml }} />
+            ) : (
+              <p className="m-0 text-[var(--store-muted)]">
+                Descrição completa ainda não cadastrada. Preencha <code>lib/enrichment/products.json</code> ou a descrição do produto no painel Unbox.
+              </p>
+            )}
+          </div>
+          {usageSteps && usageSteps.length > 0 && (
+            <div className="rounded-lg border border-[var(--store-line)] bg-[var(--store-surface)] p-5">
+              <div className="font-display mb-3.5 text-sm font-bold">Modo de uso</div>
+              <div className="flex flex-col gap-3.5">
+                {usageSteps.map((s, i) => (
+                  <div key={i} className="flex items-start gap-3">
+                    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--store-primary-soft,#F1F1F3)] text-[13px] font-extrabold text-[var(--store-primary,#18181B)]">{i + 1}</div>
+                    <div className="text-[13.5px] leading-[1.5] text-[var(--store-ink-2)]">{s}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      ),
+    },
+  ];
+
+  if (specItems.length > 0 || infoHtml) {
+    tabs.push({
+      label: "Características",
+      render: () => (
+        <div className="grid max-w-[720px] gap-x-10 gap-y-3 sm:grid-cols-2">
+          {specItems.map((sp) => (
+            <div key={sp.k} className="flex justify-between gap-6 border-b border-[var(--store-surface-2)] py-3 text-sm">
+              <span className="shrink-0 text-[var(--store-muted)]">{sp.k}</span>
+              <span className="text-right font-bold text-[var(--store-ink)]">{sp.v}</span>
+            </div>
+          ))}
+          {infoHtml && <div className="richtext sm:col-span-2" dangerouslySetInnerHTML={{ __html: infoHtml }} />}
+        </div>
+      ),
+    });
+  }
+
+  if (nutriItems.length > 0) {
+    tabs.push({
+      label: "Informação nutricional",
+      render: () => (
+        <div className="max-w-[520px] overflow-hidden rounded-lg border border-[var(--store-line)]">
+          <div className="font-display bg-[var(--store-chrome-bg,#18181B)] px-[18px] py-[13px] text-sm font-bold text-white">
+            Informação nutricional{nutriBase ? ` · ${nutriBase}` : ""}
+          </div>
+          {nutriItems.map((nu) => (
+            <div key={nu.k} className="flex justify-between gap-6 border-b border-[var(--store-surface-2)] px-[18px] py-3 text-sm">
+              <span className="shrink-0 text-[var(--store-ink-2)]">{nu.k}</span>
+              <span className="text-right font-bold">{nu.v}</span>
+            </div>
+          ))}
+        </div>
+      ),
+    });
+  }
+
+  const [tab, setTab] = React.useState(0);
+  const atual = tabs[Math.min(tab, tabs.length - 1)];
+
+  return (
+    <div>
+      {tabs.length > 1 && (
+        <div className="flex gap-1 border-b-[1.5px] border-[var(--store-line)]">
+          {tabs.map((t, i) => (
+            <button
+              key={t.label}
+              type="button"
+              onClick={() => setTab(i)}
+              className="font-display relative cursor-pointer border-none bg-transparent px-3 py-3.5 text-[13px] font-bold sm:px-5 sm:text-[15px]"
+              style={{ color: tab === i ? "var(--store-primary,#18181B)" : "var(--store-muted)" }}
+            >
+              {t.label}
+              {tab === i && <span className="absolute inset-x-0 -bottom-[1.5px] h-[3px] rounded bg-[var(--store-primary,#18181B)]" />}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="px-0.5 py-6.5 pt-6">{atual.render()}</div>
+    </div>
+  );
+}
+
+const CLASSE_RESPOSTA = "px-4 pb-[15px] text-[13.5px] leading-[1.6] text-[var(--store-ink-2)]";
+
+function FaqItem({ open, onToggle, pergunta, resposta }: {
+  open: boolean;
+  onToggle: () => void;
+  pergunta: React.ReactNode;
+  /** já com `hidden` quando fechada: a resposta fica no HTML para o painel listar todas sem abrir cada uma */
+  resposta: React.ReactNode;
+}) {
+  return (
+    <div className="overflow-hidden rounded-xl border border-[var(--store-line)] bg-white">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full cursor-pointer items-center justify-between gap-3 border-none bg-transparent px-4 py-[15px] text-left text-sm font-semibold text-[var(--store-ink)]"
+      >
+        {pergunta}
+        <CaretDown weight="bold" className="shrink-0 text-[15px] text-[var(--store-primary,#18181B)] transition-transform" style={{ transform: open ? "rotate(180deg)" : "rotate(0)" }} />
+      </button>
+      {resposta}
+    </div>
+  );
+}
+
+/**
+ * FAQ do produto: as perguntas do ENRIQUECIMENTO (por produto) e as perguntas MODELO do molde
+ * (faq-modelo.ts). Sem nenhuma das duas, não renderiza nada.
+ *
+ * EDITOR: a PDP é um MOLDE, um valor para todos os produtos. As perguntas do enriquecimento são dado
+ * do catálogo e ficam fora do editor (`data-editor-ignore`, README §8). As perguntas modelo são copy
+ * e formam uma LISTA editável (reordenar, ocultar, duplicar, reescrever), com id por PAPEL. O título
+ * do cartão fica em quem renderiza esta lista (pdp-view.tsx). O FAQPage da página é lido do MESMO
+ * lugar (`faqNaTela`, faq-modelo.ts): o que muda aqui muda lá.
+ */
+export function FaqList({ items }: { items?: readonly PerguntaResposta[] | null }) {
+  const doEnriquecimento = items ?? [];
+  const [open, setOpen] = React.useState<string | null>(doEnriquecimento.length ? "0" : (FAQ_MODELO[0]?.id ?? null));
+  const toggle = (chave: string) => setOpen((atual) => (atual === chave ? null : chave));
+  if (doEnriquecimento.length === 0 && FAQ_MODELO.length === 0) return null;
+  return (
+    <div className="flex flex-col gap-3">
+      {doEnriquecimento.length > 0 && (
+        <div className="flex flex-col gap-3" data-editor-ignore>
+          {doEnriquecimento.map((x, i) => (
+            <FaqItem
+              key={i}
+              open={open === String(i)}
+              onToggle={() => toggle(String(i))}
+              pergunta={x.question}
+              resposta={<div className={CLASSE_RESPOSTA} hidden={open !== String(i)}>{x.answer}</div>}
+            />
+          ))}
+        </div>
+      )}
+      <Editable.Sections nested>
+        {FAQ_MODELO.map((f) => (
+          <Editable.Section key={f.id} item id={f.id} label={f.label}>
+            <FaqItem
+              open={open === f.id}
+              onToggle={() => toggle(f.id)}
+              pergunta={<Editable.Text path={CAMINHO_PERGUNTA} fallback={f.question} label="Pergunta" />}
+              resposta={<Editable.Text as="div" path={CAMINHO_RESPOSTA} fallback={f.answer} label="Resposta" className={CLASSE_RESPOSTA} hidden={open !== f.id} />}
+            />
+          </Editable.Section>
+        ))}
+      </Editable.Sections>
+    </div>
+  );
+}

package/template/components/product/pdp/newsletter.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import * as React from "react";
+import { CheckCircle } from "@phosphor-icons/react/dist/ssr";
+// EDITOR: módulo de cliente ("use client"): aqui o namespace `Editable.*` é a forma de uso (README §4).
+import { Editable } from "@/lib/editable";
+
+// EDITOR: o título vem em três caixas (uma por trecho da composição, como a home faz com o título por
+// linha), porque o destaque sublinhado e a quebra são tipografia que o primitivo não deve engolir num
+// `multiline` só. Campo, placeholder e a mensagem de confirmação são interface do formulário e ficam
+// fora (README do editor, §8); o texto do botão é copy e vai por `Slot`, porque o <button> é filho
+// direto de um flex e precisa continuar sendo o MESMO elemento, com type="submit".
+export function Newsletter() {
+  const [email, setEmail] = React.useState("");
+  const [done, setDone] = React.useState(false);
+
+  function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!/.+@.+\..+/.test(email)) return;
+    setDone(true);
+  }
+
+  return (
+    <div className="relative flex min-h-[120px] items-center gap-7 overflow-hidden rounded-xl bg-[var(--store-cta,#D97706)] py-6 pl-10 max-md:flex-col max-md:items-stretch max-md:gap-4 max-md:p-6">
+      <div className="shrink-0">
+        {/* TODO: personalize a oferta de boas-vindas da newsletter */}
+        <div className="font-display text-[23px] font-extrabold leading-tight text-[var(--store-cta-fg,#1C1207)]">
+          <Editable.Text path="titulo.1" fallback="Cadastre-se e receba" label="Título (parte 1)" />{" "}
+          <Editable.Text path="titulo.2" fallback="ofertas exclusivas" label="Título (destaque sublinhado)" className="underline decoration-2 underline-offset-2" />
+          <br />
+          <Editable.Text path="titulo.3" fallback="e novidades da loja!" label="Título (parte 3)" />
+        </div>
+      </div>
+      {done ? (
+        <div className="flex flex-1 items-center gap-2 rounded-full bg-white px-6 py-3.5 text-[15px] font-bold text-[var(--store-primary,#18181B)] max-md:justify-center md:max-w-[480px]">
+          <CheckCircle weight="fill" className="text-xl" /> Pronto! Seu cupom chega no e-mail.
+        </div>
+      ) : (
+        <form onSubmit={submit} className="flex flex-1 items-center rounded-full bg-white p-1.5 md:max-w-[480px]">
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Seu melhor e-mail"
+            className="h-11 min-w-0 flex-1 border-none bg-transparent px-5 text-[15px] text-[var(--store-ink)] outline-none"
+          />
+          <Editable.Slot path="botao" type="text" fallback="EU QUERO!" label="Texto do botão">
+            {(v, attrs, ref, estilo) => (
+              <button
+                ref={ref}
+                {...attrs}
+                type="submit"
+                className="font-display h-11 shrink-0 cursor-pointer whitespace-nowrap border-none bg-transparent px-[22px] text-[15px] font-extrabold tracking-[0.5px] text-[var(--store-ink)]"
+                style={estilo}
+              >
+                {v}
+              </button>
+            )}
+          </Editable.Slot>
+        </form>
+      )}
+    </div>
+  );
+}

package/template/components/product/pdp/payment-chips.tsx

@@ -0,0 +1,22 @@
+const METHODS = [
+  { label: "Visa",             src: "/brand/pay-visa.webp" },
+  { label: "Mastercard",       src: "/brand/pay-mastercard.webp" },
+  { label: "Elo",              src: "/brand/pay-elo.webp" },
+  { label: "American Express", src: "/brand/pay-amex.webp" },
+  { label: "Pix",              src: "/brand/pay-pix.webp" },
+];
+
+export function PaymentChips({ size = "sm" }: { size?: "sm" | "md" }) {
+  const h = size === "md" ? "h-[34px]" : "h-[28px]";
+  // EDITOR: bandeiras de pagamento são selo de terceiro (quais meios a loja aceita é mecânica da
+  // Unbox), não copy da marca: fora do editor (`data-editor-ignore`, README §8). O atributo mora
+  // aqui, e não em cada rodapé, porque o componente também entra na página de produto e no checkout.
+  return (
+    <div className="flex flex-wrap items-center gap-2" data-editor-ignore="">
+      {METHODS.map((m) => (
+        // eslint-disable-next-line @next/next/no-img-element -- bandeiras de ~1 KB: passar 1 KB pelo otimizador não economiza nada. O que importa aqui é o loading=lazy, porque o React 19 preloada <img> eager renderizado no servidor e estas ficam no rodapé.
+        <img key={m.label} src={m.src} alt={m.label} loading="lazy" decoding="async" className={`${h} w-auto rounded`} />
+      ))}
+    </div>
+  );
+}