@unbox-plus/cli 0.20.4

package/template/components/product/pdp/pdp-view.tsx

@@ -0,0 +1,227 @@
+// A PÁGINA DE PRODUTO É UM MOLDE.
+//
+// Um valor para TODOS os produtos: o documento do lojista não tem dimensão de produto, de propósito.
+// Nome, preço, fotos, descrição, variantes, tamanhos, estoque, selos regulados e avaliações vêm do
+// catálogo da Unbox e do enriquecimento e NÃO viram primitivo: são DADO, e o gate os desconta por
+// `data-editor-ignore` (README do editor, §8). O que vira primitivo é o que o lojista mudaria SEM mudar
+// o produto: chapéu, links do caminho, selos de confiança, promessa de entrega, título e atributos de
+// qualidade, título e perguntas MODELO do FAQ, chapéu/título/link do catálogo, newsletter.
+//
+// Container PRÓPRIO (`produto`, declarado em lib/rotas-editaveis.ts): a faixa de confiança e a newsletter
+// daqui NÃO reaproveitam o `home`, porque "frete grátis acima de R$ 150" na home e na PDP são frases que
+// o lojista pode querer diferentes (a ordem é do container; a copy é do container). Ids de seção
+// descrevem o PAPEL do bloco e são chave de arquivo: não existe renomear.
+//
+// Esta view recebe TUDO por prop (nada de fetch aqui): é o que permite renderizá-la com um produto de
+// mentira num teste, já que a loja local não fala com o catálogo. Quem busca é page.tsx.
+//
+// Server component: exportações NOMEADAS (`EditableSection`...), nunca o objeto `Editable` (README §4).
+import { CaretRight } from "@phosphor-icons/react/dist/ssr";
+import { EditableLink, EditableSection, EditableSections, EditableText } from "@/lib/editable";
+import { PdpGallery } from "@/components/product/pdp/gallery";
+import {
+  BuyBox,
+  type PdpBenefit,
+  type PdpRelatedOption,
+  type PdpSizeOption,
+  type PdpSubscription,
+  type PdpVariant,
+} from "@/components/product/pdp/buy-box";
+import { ProductTabs, FaqList, type KV } from "@/components/product/pdp/interactive";
+import { TrustStrip, SecurityBar, ReviewsCard, QualidadeCard, QUALIDADE, type ReviewItem } from "@/components/product/pdp/sections";
+import { Newsletter } from "@/components/product/pdp/newsletter";
+import { CatalogGrid, CatalogCta, type CatalogItem } from "@/components/product/pdp/catalog-grid";
+import type { PerguntaResposta } from "@/components/product/pdp/faq-modelo";
+
+export interface PdpViewProps {
+  /** Dado do catálogo e do enriquecimento: nunca copy do molde. */
+  produto: {
+    id: string;
+    titulo: string;
+    imagens: string[];
+    videos: string[];
+    /** desconto REAL (compareAtPrice) para o selo da galeria; null = sem selo */
+    descontoPct: number | null;
+    descricaoCurta?: string | null;
+    esgotado: boolean;
+    minQty: number;
+    maxQty: number | null;
+  };
+  compra: {
+    variants: PdpVariant[];
+    benefits?: PdpBenefit[];
+    sizeOptions: PdpSizeOption[];
+    relatedTitle?: string;
+    relatedOptions: PdpRelatedOption[];
+    subscription: PdpSubscription | null;
+    /** nota e contagem REAIS (reviews do enriquecimento); sem elas o bloco de avaliação da buy box não aparece */
+    ratingAverage?: number;
+    ratingCount?: number;
+  };
+  detalhes: {
+    descHtml?: string | null;
+    infoHtml?: string | null;
+    specItems: KV[];
+    nutriItems: KV[];
+    nutriBase?: string | null;
+    usageSteps?: string[] | null;
+  };
+  /** null = sem avaliação real: o card não entra na página */
+  avaliacoes: { ratingCount: number; average: number; reviews: ReviewItem[] } | null;
+  /** FAQ do enriquecimento (por produto), dado do catálogo. As perguntas MODELO do molde entram sempre (faq-modelo.ts). */
+  faq?: readonly PerguntaResposta[];
+  catalogo: CatalogItem[];
+}
+
+export function PdpView({ produto, compra, detalhes, avaliacoes, faq, catalogo }: PdpViewProps) {
+  return (
+    <div className="full-bleed store-layout bg-white text-[var(--store-ink)]">
+      <div className="mx-auto max-w-[1240px] px-4 pb-2 sm:px-6">
+        <EditableSections container="produto">
+          {/* FIXA: a galeria e o bloco de compra SÃO a página; reordenar e ocultar valem para o resto. */}
+          <EditableSection id="compra" kind="produto-em-destaque" label="Bloco de compra" fixed>
+            {/* caminho de navegação: os dois links são copy de navegação da marca; o nome do produto é dado */}
+            <div className="flex items-center gap-2 pt-4 text-[13px] font-medium text-[var(--store-muted)]">
+              <EditableLink
+                path="trilha.inicio"
+                fallback={{ href: "/", label: "Início" }}
+                label="Caminho: link da página inicial"
+                className="no-underline hover:text-[var(--store-ink)]"
+              />
+              <CaretRight className="text-[11px]" />
+              <EditableLink
+                path="trilha.produtos"
+                fallback={{ href: "/produtos", label: "Produtos" }}
+                label="Caminho: link da lista de produtos"
+                className="no-underline hover:text-[var(--store-ink)]"
+              />
+              <CaretRight className="text-[11px]" />
+              <span data-editor-ignore className="font-semibold text-[var(--store-ink)] line-clamp-1">{produto.titulo}</span>
+            </div>
+
+            <div className="grid grid-cols-1 items-start gap-7 pt-4 lg:grid-cols-[1.05fr_0.95fr] lg:gap-12">
+              <PdpGallery images={produto.imagens} videos={produto.videos} title={produto.titulo} discountPct={produto.descontoPct} />
+              <BuyBox
+                ratingAverage={compra.ratingAverage}
+                ratingCount={compra.ratingCount}
+                productId={produto.id}
+                title={produto.titulo}
+                shortDescription={produto.descricaoCurta}
+                imageUrl={produto.imagens[0]}
+                variants={compra.variants}
+                benefits={compra.benefits}
+                sizeOptions={compra.sizeOptions}
+                relatedTitle={compra.relatedTitle}
+                relatedOptions={compra.relatedOptions}
+                subscription={compra.subscription}
+                minQty={produto.minQty}
+                maxQty={produto.maxQty}
+                isSoldOut={produto.esgotado}
+              />
+            </div>
+          </EditableSection>
+
+          {/* Abaixo do frame principal: confiança, conteúdo do produto, qualidade + FAQ, catálogo, newsletter. */}
+          <EditableSection id="confianca" kind="beneficios" label="Faixa de confiança">
+            <div className="mt-10"><TrustStrip /></div>
+          </EditableSection>
+
+          <EditableSection id="seguranca" kind="beneficios" label="Barra de compra segura e pagamento">
+            <div className="mt-5"><SecurityBar /></div>
+          </EditableSection>
+
+          {/* descrição, ficha, tabela nutricional e modo de uso: TUDO dado do produto; os rótulos das abas são interface */}
+          <EditableSection id="detalhes" kind="outro" label="Descrição e ficha do produto">
+            <div className="mt-12" data-editor-ignore>
+              <ProductTabs
+                descHtml={detalhes.descHtml}
+                infoHtml={detalhes.infoHtml}
+                specItems={detalhes.specItems}
+                nutriItems={detalhes.nutriItems}
+                nutriBase={detalhes.nutriBase}
+                usageSteps={detalhes.usageSteps}
+              />
+            </div>
+          </EditableSection>
+
+          {/* avaliações só entram quando existem de verdade */}
+          {avaliacoes && (
+            <EditableSection id="avaliacoes" kind="depoimentos" label="Avaliações">
+              <div id="avaliacoes" className="mt-12">
+                <ReviewsCard ratingCount={avaliacoes.ratingCount} average={avaliacoes.average} reviews={avaliacoes.reviews} />
+              </div>
+            </EditableSection>
+          )}
+
+          {/* qualidade + FAQ dividem UMA linha da grade. Os dois cartões são ITENS de uma lista aninhada: cada
+              um oculta e reordena por si, e cada um hospeda a própria lista (atributos de qualidade,
+              perguntas) num container só dele. A grade é auto-fit: com um cartão só (qualidade vazia ou
+              oculta pelo lojista) o FAQ ocupa a linha inteira em vez de deixar uma coluna vazia. */}
+          <EditableSection id="qualidade-faq" kind="perguntas-frequentes" label="Qualidade e perguntas frequentes">
+            <div className="mt-12 grid items-start gap-[22px] lg:grid-cols-[repeat(auto-fit,minmax(320px,1fr))]">
+              <EditableSections nested>
+                {/* o cartão de qualidade só existe com atributos declarados (sections.tsx, QUALIDADE) */}
+                {QUALIDADE.length > 0 && (
+                  <EditableSection item id="qualidade" label="Qualidade do produto">
+                    <QualidadeCard />
+                  </EditableSection>
+                )}
+                <EditableSection item id="faq" label="Perguntas frequentes">
+                  <div className="rounded-xl border border-[var(--store-line)] bg-white p-[28px]">
+                    <EditableText
+                      as="h2"
+                      path="titulo"
+                      fallback="Perguntas frequentes"
+                      label="Título das perguntas frequentes"
+                      className="font-display mb-[22px] text-[21px] font-extrabold italic leading-tight text-[var(--store-primary,#18181B)]"
+                    />
+                    <FaqList items={faq} />
+                  </div>
+                </EditableSection>
+              </EditableSections>
+            </div>
+          </EditableSection>
+
+          {/* catálogo: chapéu, título, frase e link são copy do molde; os produtos da grade são dado */}
+          {catalogo.length > 0 && (
+            <EditableSection id="catalogo" kind="vitrine-de-produtos" label="Mais produtos do catálogo">
+              <div className="mt-[52px]">
+                <div className="mb-1.5 flex items-end justify-between">
+                  <div>
+                    <EditableText
+                      as="div"
+                      path="chapeu"
+                      fallback="CATÁLOGO"
+                      label="Chapéu do catálogo"
+                      className="text-xs font-extrabold tracking-[1.5px] text-[var(--store-primary,#18181B)]"
+                    />
+                    <EditableText
+                      as="h2"
+                      path="titulo"
+                      fallback="Explore mais do catálogo"
+                      label="Título do catálogo"
+                      className="font-display mt-1.5 text-[26px] font-extrabold"
+                    />
+                  </div>
+                  <CatalogCta />
+                </div>
+                <EditableText
+                  as="p"
+                  path="texto"
+                  fallback="Clientes que viram este produto também levam:"
+                  label="Frase de apoio do catálogo"
+                  className="mb-[22px] mt-1 text-sm text-[var(--store-muted)]"
+                />
+                <CatalogGrid items={catalogo} />
+              </div>
+            </EditableSection>
+          )}
+
+          <EditableSection id="newsletter" kind="newsletter" label="Newsletter">
+            <div className="mt-12"><Newsletter /></div>
+          </EditableSection>
+        </EditableSections>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,144 @@
+"use client";
+
+// Seções de recomendação da PDP com PRODUTOS REAIS do catálogo e add-to-cart funcional.
+// Substitui os antigos Bundles/Combos com preços fictícios e botões sem ação.
+import * as React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { Plus, Spinner, ShoppingCartSimple, ArrowRight } from "@phosphor-icons/react/dist/ssr";
+import { useCart } from "@/components/cart/cart-provider";
+import { formatBRL } from "@/lib/format";
+import type { CatalogItem } from "@/components/product/pdp/catalog-grid";
+
+const canAdd = (p: CatalogItem) => !!p.productId && !!p.variantId && p.price != null;
+
+function useQuickAdd() {
+  const { add } = useCart();
+  const [busyId, setBusyId] = React.useState<string | null>(null);
+  const addOne = React.useCallback(async (p: CatalogItem) => {
+    if (!canAdd(p)) return;
+    setBusyId(p.variantId!);
+    await add({ productId: p.productId!, variantId: p.variantId!, price: p.price ?? 0, quantity: 1, thumbnail: p.imageUrl ?? undefined, title: p.title });
+    setBusyId(null);
+  }, [add]);
+  return { addOne, busyId };
+}
+
+function Thumb({ item, size = 84 }: { item: CatalogItem; size?: number }) {
+  return (
+    <span className="relative flex items-center justify-center overflow-hidden rounded-md border border-[var(--store-line)] bg-[var(--store-line)]" style={{ width: size, height: size }}>
+      {item.imageUrl ? (
+        <Image src={item.imageUrl} alt={item.title} fill sizes={`${size}px`} className="object-contain p-0.5" />
+      ) : (
+        <span className="text-[10px] text-[var(--store-faint)]">sem foto</span>
+      )}
+    </span>
+  );
+}
+
+/** "Compre junto" (real): N produtos reais + adicionar todos de uma vez. Sem desconto fabricado. */
+export function BuyTogether({ items }: { items: CatalogItem[] }) {
+  const products = items.filter(canAdd).slice(0, 3);
+  const { addOne } = useQuickAdd();
+  const [busyAll, setBusyAll] = React.useState(false);
+  if (products.length < 2) return null;
+  const sum = products.reduce((s, p) => s + (p.price ?? 0), 0);
+
+  async function addAll() {
+    setBusyAll(true);
+    for (const p of products) await addOne(p);
+    setBusyAll(false);
+  }
+
+  return (
+    <div className="rounded-xl border border-[var(--store-line)] bg-white p-[26px]">
+      <h2 className="font-display mb-5 text-[22px] font-extrabold text-[var(--store-primary,#18181B)]">Compre junto</h2>
+      <div className="flex flex-wrap items-start gap-2 max-sm:justify-center max-sm:gap-3.5">
+        {products.map((p, i) => (
+          <div key={p.slug} className="contents">
+            <div className="flex w-[100px] shrink-0 flex-col items-center gap-1.5">
+              <Link href={`/produto/${encodeURIComponent(p.slug)}`}><Thumb item={p} /></Link>
+              <Link href={`/produto/${encodeURIComponent(p.slug)}`} className="line-clamp-2 text-center text-xs font-bold leading-tight text-[var(--store-ink)] no-underline">{p.title}</Link>
+              <div className="text-[13px] font-extrabold text-[var(--store-ink)]">{p.displayPrice}</div>
+            </div>
+            {i < products.length - 1 && (
+              <span className="mt-9 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--store-primary,#18181B)] text-white"><Plus weight="bold" className="text-[15px]" /></span>
+            )}
+          </div>
+        ))}
+        <span className="mt-9 shrink-0 text-[22px] font-bold text-[var(--store-faint)]">=</span>
+        <div className="flex flex-1 flex-col items-center gap-1.5 pt-0.5 text-center">
+          <div className="text-[13px] text-[var(--store-muted)]">Os {products.length} por</div>
+          <div className="font-display text-[26px] font-extrabold leading-none text-[var(--store-ink)]">{formatBRL(sum)}</div>
+          <button type="button" onClick={addAll} disabled={busyAll}
+            className="font-display mt-1 flex cursor-pointer items-center gap-1.5 rounded-md bg-[var(--store-primary,#18181B)] px-5 py-3 text-[13px] font-bold leading-tight text-white transition-colors hover:bg-[var(--store-primary-dark,#09090B)] disabled:opacity-60">
+            {busyAll ? <Spinner className="animate-spin" /> : <ShoppingCartSimple weight="bold" />}Adicionar todos
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** "Frequentemente comprados juntos" (real): produtos reais com quick-add individual. */
+export function FrequentlyBought({ items }: { items: CatalogItem[] }) {
+  const products = items.filter(canAdd).slice(0, 3);
+  const { addOne, busyId } = useQuickAdd();
+  if (products.length === 0) return null;
+
+  return (
+    <div className="rounded-xl border border-[var(--store-line)] bg-white p-[26px]">
+      <h2 className="font-display mb-5 text-[22px] font-extrabold text-[var(--store-ink)]">Frequentemente comprados juntos</h2>
+      <div className="flex items-start gap-[18px]">
+        {products.map((p) => (
+          <div key={p.slug} className="flex flex-1 flex-col items-center gap-1.5">
+            <Link href={`/produto/${encodeURIComponent(p.slug)}`}><Thumb item={p} size={96} /></Link>
+            <Link href={`/produto/${encodeURIComponent(p.slug)}`} className="line-clamp-2 text-center text-xs font-bold leading-tight text-[var(--store-ink)] no-underline">{p.title}</Link>
+            <div className="text-[13px] font-extrabold text-[var(--store-ink)]">{p.displayPrice}</div>
+            <button type="button" onClick={() => addOne(p)} disabled={busyId === p.variantId} aria-label={`Adicionar ${p.title}`}
+              className="flex h-[34px] w-[34px] 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">
+              {busyId === p.variantId ? <Spinner className="animate-spin text-base" /> : <Plus weight="bold" className="text-base" />}
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Grade de "kits sugeridos" (real): produtos reais com quick-add. Sem % OFF fabricado. */
+export function SuggestedKits({ items }: { items: CatalogItem[] }) {
+  const products = items.filter(canAdd).slice(0, 3);
+  const { addOne, busyId } = useQuickAdd();
+  if (products.length === 0) return null;
+
+  return (
+    <>
+      <div className="mb-[18px] flex items-end justify-between">
+        <div>
+          <h2 className="font-display text-2xl font-extrabold">Leve também</h2>
+          <p className="mt-1 text-sm text-[var(--store-muted)]">Você também pode gostar.</p>
+        </div>
+        <Link href="/produtos" className="flex items-center gap-1.5 text-sm font-bold text-[var(--store-primary,#18181B)] no-underline max-sm:hidden">
+          Ver todos os produtos <ArrowRight weight="bold" />
+        </Link>
+      </div>
+      <div className="grid gap-[18px] sm:grid-cols-2 lg:grid-cols-3">
+        {products.map((p) => (
+          <div key={p.slug} className="flex flex-col rounded-2xl border border-[var(--store-line)] bg-white p-[18px]">
+            <Link href={`/produto/${encodeURIComponent(p.slug)}`} className="flex justify-center py-2">
+              <Thumb item={p} size={120} />
+            </Link>
+            <Link href={`/produto/${encodeURIComponent(p.slug)}`} className="mt-2 line-clamp-2 text-base font-bold text-[var(--store-ink)] no-underline">{p.title}</Link>
+            {p.weight && <div className="mt-0.5 text-[12.5px] text-[var(--store-muted)]">{p.weight}</div>}
+            <div className="font-display mt-2 text-[22px] font-extrabold text-[var(--store-primary,#18181B)]">{p.displayPrice}</div>
+            <button type="button" onClick={() => addOne(p)} disabled={busyId === p.variantId}
+              className="font-display mt-3.5 flex cursor-pointer items-center justify-center gap-1.5 rounded-md bg-[var(--store-primary,#18181B)] py-3 text-[13.5px] font-bold text-white transition-colors hover:bg-[var(--store-primary-dark,#09090B)] disabled:opacity-60">
+              {busyId === p.variantId ? <Spinner className="animate-spin" /> : <Plus weight="bold" />}Adicionar
+            </button>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,173 @@
+import { Truck, Lightning, LockSimple, SealCheck, Star } from "@phosphor-icons/react/dist/ssr";
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+// EDITOR: este arquivo é server component (sem "use client"): exportações NOMEADAS, nunca `Editable.*` (README §4).
+import { EditableIcon, EditableSection, EditableSections, EditableText } from "@/lib/editable";
+import { PaymentChips } from "@/components/product/pdp/payment-chips";
+import { FREE_SHIPPING_THRESHOLD } from "@/lib/store-config";
+
+// Os selos são uma LISTA editável (README do editor §3: `Sections nested` + `Section item`), com id por
+// PAPEL e não por posição: o selo de frete só existe com FREE_SHIPPING_THRESHOLD, e um id posicional
+// deslizaria (o texto que o lojista escreveu no selo 2 apareceria no selo 1) quando a regra mudasse.
+// Selo de frete grátis só entra quando há regra real configurada em lib/store-config.
+//
+// Só o que o template consegue afirmar: SSL é fato; o prazo é calculado pela cotação real; 7 dias é o
+// art. 49 do CDC, vale para toda loja online no Brasil. "Expressa em 1 a 2 dias" e "devolução em 30
+// dias" eram inventados, e o segundo contradizia a própria página /devolucoes da loja.
+const TRUST = [
+  ...(FREE_SHIPPING_THRESHOLD != null
+    ? [{ id: "frete", label: "Selo de frete grátis", icon: Truck, title: `Frete grátis acima de R$${FREE_SHIPPING_THRESHOLD}`, sub: "para todo o Brasil" }]
+    : []),
+  { id: "entrega", label: "Selo de entrega", icon: Lightning, title: "Entrega para todo o Brasil", sub: "prazo calculado no carrinho" },
+  { id: "seguranca", label: "Selo de compra segura", icon: LockSimple, title: "Compra 100% segura", sub: "criptografia SSL" },
+  { id: "arrependimento", label: "Selo de devolução", icon: SealCheck, title: "Troca em 7 dias", sub: "arrependimento garantido por lei (CDC)" },
+];
+
+export function TrustStrip() {
+  return (
+    <div className={`grid grid-cols-2 rounded-2xl border border-[var(--store-line)] bg-white ${TRUST.length === 4 ? "md:grid-cols-4" : "md:grid-cols-3"}`}>
+      <EditableSections nested>
+        {TRUST.map((t, i) => (
+          <EditableSection key={t.id} item id={t.id} label={t.label}>
+            {/* o invólucro da seção é display:contents: este div continua sendo o item da grade */}
+            <div className="flex items-center gap-3.5 px-[22px] py-5" style={{ borderRight: i < TRUST.length - 1 ? "1px solid var(--store-surface-2)" : "none" }}>
+              <EditableIcon path="icone" label="Ícone do selo" size={26} className="text-[26px] text-[var(--store-primary,#18181B)]">
+                <t.icon />
+              </EditableIcon>
+              <div>
+                <EditableText as="div" path="titulo" fallback={t.title} label="Título do selo" className="text-[13.5px] font-bold text-[var(--store-ink)]" />
+                <EditableText as="div" path="texto" fallback={t.sub} label="Texto do selo" className="mt-0.5 text-xs text-[var(--store-muted)]" />
+              </div>
+            </div>
+          </EditableSection>
+        ))}
+      </EditableSections>
+    </div>
+  );
+}
+
+export function SecurityBar() {
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-6 rounded-xl bg-[var(--store-chrome-bg)] px-8 py-[22px]">
+      <div className="flex items-center gap-[18px]">
+        <span className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full bg-[var(--store-primary,#18181B)]">
+          <EditableIcon path="icone" label="Ícone de compra segura" size={25} className="text-[25px] text-white">
+            <LockSimple weight="fill" />
+          </EditableIcon>
+        </span>
+        <div>
+          <EditableText as="div" path="titulo" fallback="Compra 100% Segura" label="Título" className="font-display text-lg font-bold text-white" />
+          <EditableText as="div" path="texto" fallback="Seus dados protegidos do início ao fim." label="Texto de apoio" className="mt-0.5 text-[13.5px] text-[var(--store-chrome-muted)]" />
+        </div>
+      </div>
+      <div className="flex items-center gap-[22px]">
+        <EditableText as="span" path="pagamento" fallback="Pague como preferir" label="Texto ao lado das bandeiras" className="font-display text-[15px] font-semibold text-white max-md:hidden" />
+        <span className="h-[34px] w-px bg-white/20 max-md:hidden" />
+        {/* bandeiras de pagamento: selo de terceiro, fora do editor (o próprio componente se marca) */}
+        <PaymentChips size="md" />
+      </div>
+    </div>
+  );
+}
+
+export interface ReviewItem { author: string; stars: number; comment: string; verified?: boolean }
+
+/**
+ * Avaliações do produto: SÓ com dado real. Sem reviews, não renderiza (o chamador também
+ * esconde o card). Não existe nota default, contagem default nem depoimento default: a
+ * foundation publicava "4,9 · 25.347 avaliações" e "Cliente A/B/C" com selo de verificação em
+ * loja recém-aberta, e isso foi ao ar. A distribuição por estrela é calculada das reviews.
+ *
+ * EDITOR: só o TÍTULO é copy do molde. Nota, contagem, barras e depoimentos são dado das avaliações e
+ * ficam fora (`data-editor-ignore`, README §8).
+ */
+export function ReviewsCard({ ratingCount, average, reviews }: {
+  ratingCount: number;
+  average: number;
+  reviews: ReviewItem[];
+}) {
+  if (!reviews.length || !ratingCount) return null;
+  const avg = average.toFixed(1).replace(".", ",");
+  const dist = [5, 4, 3, 2, 1].map((n) => {
+    const q = reviews.filter((r) => Math.round(r.stars) === n).length;
+    return { n: String(n), pct: `${Math.round((q / reviews.length) * 100)}%` };
+  });
+  const list = reviews.slice(0, 6).map((r) => ({ initial: (r.author.trim()[0] || "?").toUpperCase(), name: r.author, quip: r.comment, stars: r.stars, verified: r.verified }));
+  return (
+    <div className="rounded-xl border border-[var(--store-line)] bg-white p-7 p-[28px]">
+      <EditableText as="h2" path="titulo" fallback="Quem comprou, recomenda" label="Título das avaliações" className="font-display mb-[18px] text-[21px] font-extrabold italic leading-tight text-[var(--store-primary,#18181B)]" />
+      <div className="flex items-center gap-3.5" data-editor-ignore>
+        <span className="font-display text-[44px] font-extrabold leading-none text-[var(--store-ink)]">{avg}</span>
+        <span className="flex text-2xl text-[var(--store-cta-dark)]" aria-label={`${avg} de 5`}>{[1, 2, 3, 4, 5].map((i) => <Star key={i} weight={average >= i - 0.25 ? "fill" : "regular"} />)}</span>
+      </div>
+      <div className="mt-2.5 mb-[18px] text-[13px] text-[var(--store-muted)]" data-editor-ignore>Baseado em {ratingCount.toLocaleString("pt-BR")} {ratingCount === 1 ? "avaliação" : "avaliações"}</div>
+      <div className="flex flex-col gap-2.5" data-editor-ignore>
+        {dist.map((r) => (
+          <div key={r.n} className="flex items-center gap-2.5 text-[12.5px] text-[var(--store-muted)]">
+            <span className="w-2.5">{r.n}</span>
+            <Star weight="fill" className="text-[11px] text-[var(--store-cta-dark)]" />
+            <div className="h-[7px] flex-1 overflow-hidden rounded-full bg-[var(--store-surface-2)]"><div className="h-full rounded-full bg-[var(--store-cta-dark)]" style={{ width: r.pct }} /></div>
+            <span className="w-[34px] text-right">{r.pct}</span>
+          </div>
+        ))}
+      </div>
+      <div className="my-[22px] h-px bg-[var(--store-surface-2)]" />
+      <div className="flex flex-col gap-4" data-editor-ignore>
+        {list.map((rv, i) => (
+          <div key={i} className="flex items-start gap-2.5">
+            <div className="font-display flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-full bg-[var(--store-chrome-bg)] text-sm font-extrabold text-white">{rv.initial}</div>
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-1.5">
+                <span className="text-[13.5px] font-bold">{rv.name}</span>
+                <span className="flex text-[10px] text-[var(--store-cta-dark)]">{[1, 2, 3, 4, 5].map((i) => <Star key={i} weight={rv.stars >= i - 0.25 ? "fill" : "regular"} />)}</span>
+                {rv.verified && <span className="text-[11px] font-semibold text-[var(--store-primary,#18181B)]">· compra verificada</span>}
+              </div>
+              <div className="mt-0.5 text-[13px] leading-snug text-[var(--store-ink-2)]">{rv.quip}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * OS ATRIBUTOS DE QUALIDADE DO PRODUTO: o que a marca afirma sobre o que vende (feito à mão, produção em
+ * pequenos lotes, garantia). Nasce VAZIO de propósito: a foundation não sabe o que o produto tem, e um
+ * atributo plausível inventado aqui iria ao ar como afirmação da marca (foi assim na v0.15.6, e o cartão
+ * saiu). Quem preenche é o briefing, só com o que a marca sustenta. Sem itens, o cartão não renderiza e
+ * o FAQ ocupa a linha inteira.
+ *
+ * EDITOR: a PDP é um MOLDE (um valor para todos os produtos), e estes atributos são o que o lojista muda
+ * quando o catálogo cresce; por isso cada um é item de lista editável (ícone, título e texto), com o id
+ * posicional da foundation (`item-1`, `item-2`...). Apagar um item do meio NO CÓDIGO desliza os ids
+ * seguintes (README do editor, §6): prefira ocultar pelo painel.
+ */
+export const QUALIDADE: readonly { icon: PhosphorIcon; title: string; sub: string }[] = [];
+
+export function QualidadeCard() {
+  if (QUALIDADE.length === 0) return null;
+  return (
+    <div className="rounded-xl border border-[var(--store-line)] bg-white p-7 p-[28px]">
+      <EditableText as="h2" path="titulo" fallback="Qualidade que você sente" label="Título do bloco de qualidade" className="font-display mb-[22px] text-[21px] font-extrabold italic leading-tight text-[var(--store-primary,#18181B)]" />
+      <div className="flex flex-col gap-5">
+        <EditableSections nested>
+          {QUALIDADE.map((q, i) => (
+            <EditableSection key={q.title} item id={`item-${i + 1}`} label={`Atributo ${i + 1}`}>
+              <div className="flex items-start gap-3.5">
+                <span className="flex h-[54px] w-[54px] shrink-0 items-center justify-center rounded-xl bg-[var(--store-primary-soft,#F1F1F3)]">
+                  <EditableIcon path="icone" label="Ícone do atributo" size={26} className="text-[26px] text-[var(--store-primary,#18181B)]">
+                    <q.icon />
+                  </EditableIcon>
+                </span>
+                <div>
+                  <EditableText as="div" path="titulo" fallback={q.title} label="Título do atributo" className="text-[15px] font-bold text-[var(--store-ink)]" />
+                  <EditableText as="div" path="texto" fallback={q.sub} label="Texto do atributo" className="mt-0.5 text-[13.5px] leading-snug text-[var(--store-muted)]" />
+                </div>
+              </div>
+            </EditableSection>
+          ))}
+        </EditableSections>
+      </div>
+    </div>
+  );
+}

package/template/components/quantity-stepper.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Minus, Plus } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+// Stepper de quantidade respeitando min/max do produto (doc 02).
+export function QuantityStepper({
+  value,
+  onChange,
+  min = 1,
+  max,
+  disabled,
+  className,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  min?: number;
+  max?: number | null;
+  disabled?: boolean;
+  className?: string;
+}) {
+  const dec = () => onChange(Math.max(min, value - 1));
+  const inc = () => onChange(max ? Math.min(max, value + 1) : value + 1);
+  return (
+    <div className={cn("inline-flex items-center rounded-lg border", className)} role="group" aria-label="Quantidade">
+      <Button type="button" variant="ghost" size="icon-sm" onClick={dec} disabled={disabled || value <= min} aria-label="Diminuir">
+        <Minus />
+      </Button>
+      <span className="w-9 text-center text-sm tabular-nums" aria-live="polite">{value}</span>
+      <Button type="button" variant="ghost" size="icon-sm" onClick={inc} disabled={disabled || (max != null && value >= max)} aria-label="Aumentar">
+        <Plus />
+      </Button>
+    </div>
+  );
+}

package/template/components/search-box.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
+
+export function SearchBox({ defaultValue = "", className }: { defaultValue?: string; className?: string }) {
+  const router = useRouter();
+  const [q, setQ] = React.useState(defaultValue);
+  return (
+    <form
+      role="search"
+      className={className}
+      onSubmit={(e) => {
+        e.preventDefault();
+        const term = q.trim();
+        router.push(term ? `/busca?q=${encodeURIComponent(term)}` : "/produtos");
+      }}
+    >
+      <div className="flex items-center gap-2 rounded-xl border-[1.5px] border-[var(--store-line-2)] bg-white px-3.5 transition-colors focus-within:border-[var(--store-primary,#18181B)]">
+        <MagnifyingGlass weight="bold" className="shrink-0 text-[19px] text-[var(--store-muted)]" />
+        <input
+          type="search"
+          name="q"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          placeholder="Buscar produtos..."
+          aria-label="Buscar produtos"
+          className="h-12 min-w-0 flex-1 bg-transparent text-[15px] font-medium text-[var(--store-ink)] outline-none placeholder:text-[var(--store-faint)]"
+        />
+        <button type="submit" className="font-display shrink-0 cursor-pointer rounded-lg bg-[var(--store-primary,#18181B)] px-4 py-2 text-[13px] font-bold text-white transition-colors hover:bg-[var(--store-primary-dark,#09090B)]">
+          Buscar
+        </button>
+      </div>
+    </form>
+  );
+}