@unbox-plus/cli 0.20.4

package/template/app/api/unbox/catalogo/route.ts

@@ -0,0 +1,136 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// LEITURA DO CATÁLOGO PARA O SELETOR DE VITRINE DO EDITOR.
+//
+// Por que existe: quando o lojista escolhe "quais produtos esta vitrine mostra",
+// o editor precisa listar as categorias e os produtos da loja. Ele NÃO fala com
+// a Unbox e NÃO guarda credencial — quem tem o cliente da Unbox é a loja. Então
+// o editor pergunta aqui, com o mesmo token assinado que ele já usa em
+// /api/revalidate (ES256, chave pública no JWKS dele), agora com purpose
+// "catalogo".
+//
+// SOMENTE LEITURA, e só os campos que o seletor mostra. Nada de credencial,
+// nada de cadastro interno, nada de escrita.
+//
+// Se a Unbox falhar, isto responde 502 — NUNCA 200 com lista vazia. Lista vazia
+// é uma resposta legítima ("essa categoria não tem produto") e o editor
+// precisa saber diferenciar as duas coisas para não oferecer uma vitrine que na
+// verdade ninguém conseguiu ler.
+//
+// ── CONTRATO (o outro lado é lib/catalogo.ts do editor) ────────────────────
+//   GET ?tipo=categorias                → { categorias: [{ id, nome, slug }] }
+//   GET ?tipo=produtos                  → { produtos:   [{ id, titulo, slug, imagem, preco, esgotado }] }
+//   GET ?busca=<texto> | ?tagId=<id>    → idem, filtrado
+//   GET ?ids=<id,id,id>                 → idem, só ESSES, na ordem pedida (quem já está na vitrine)
+//   `limite` (1..60, padrão 30) é o tamanho da LISTA do seletor, não o teto da vitrine.
+//   `imagem: string|null`, `preco: number|null` (a loja formata; o editor também) —
+//   null é ausência honesta, nunca zero nem foto genérica. `id` é o que o editor grava
+//   na escolha, e o que `resolverVitrine` usa para achar o produto de volta.
+// ═══════════════════════════════════════════════════════════════════════════
+import { ok, fail } from "@/lib/api";
+import { verifyEditorToken } from "@/lib/editable/verify";
+import { getCatalog, getTopTags } from "@/lib/queries";
+import { VITRINE_MAX } from "@/lib/editable/document";
+import { produtoDaVitrine, resolverVitrine, type VitrineProduto } from "@/lib/vitrine";
+
+// A resposta depende do token do request; nada de cache compartilhado.
+export const dynamic = "force-dynamic";
+
+const SEM_CACHE = { headers: { "Cache-Control": "private, no-store" } };
+
+/** Texto de busca / id de categoria: curtos, como no resto da foundation. */
+const MAX_TEXTO = 120;
+
+// Quantos itens o SELETOR lista de uma vez. NÃO é `VITRINE_MAX` (o teto de quantos
+// produtos uma vitrine mostra): são duas coisas diferentes, e usar o teto da vitrine
+// aqui cortava a lista de escolha em 24 mesmo quando o editor pedia 30. Os mesmos
+// números vivem em lib/catalogo.ts do editor (LISTA_MAX / LISTA_PADRAO).
+const LISTA_MAX = 60;
+const LISTA_PADRAO = 30;
+
+function limiteDaLista(bruto: number): number {
+  return Number.isFinite(bruto) && bruto >= 1 ? Math.min(LISTA_MAX, Math.floor(bruto)) : LISTA_PADRAO;
+}
+
+export async function GET(req: Request) {
+  const token = req.headers.get("x-editor-token");
+  const autorizado = token ? await verifyEditorToken(token, "catalogo") : null;
+  if (!autorizado) return fail("Não autorizado.", 401);
+
+  const params = new URL(req.url).searchParams;
+  const tipo = params.get("tipo")?.trim() ?? "";
+  const busca = params.get("busca")?.trim() ?? "";
+  const tagId = params.get("tagId")?.trim() ?? "";
+  const limite = limiteDaLista(Number(params.get("limite")));
+  // Ids de uma escolha de vitrine. O charset é o de `vitrineValida` — mais largo que o do
+  // tagId porque o id da Unbox pode ser OPACO (base64, com `/` e `=`) —, e o teto é
+  // `VITRINE_MAX` porque é o que cabe numa escolha. Id fora do formato é descartado em
+  // silêncio: ele não poderia estar gravado numa vitrine de todo jeito.
+  const ids = (params.get("ids") ?? "")
+    .split(",")
+    .map((x) => x.trim())
+    .filter((x) => /^[\w:.@+/=-]{1,200}$/.test(x))
+    .slice(0, VITRINE_MAX);
+
+  if (busca.length > MAX_TEXTO || tagId.length > MAX_TEXTO) {
+    return fail("Busca ou categoria longa demais.", 400);
+  }
+
+  try {
+    // ── Categorias ────────────────────────────────────────────────────────
+    // `getTopTags` é o nome que a foundation dá ao fetcher de tags (ele chama
+    // `client.getTags()` por dentro, cacheado por 10 min). `quantidade` fica de
+    // fora de propósito: a query de tags da Unbox não devolve contagem de
+    // produtos, e número de produto não se estima.
+    if (tipo === "categorias") {
+      const tags = await getTopTags();
+      const categorias = (tags ?? [])
+        .filter((t: any) => t?.isVisible !== false)
+        .sort((a: any, b: any) => (a?.position ?? 0) - (b?.position ?? 0))
+        .map((t: any) => ({ id: String(t._id ?? ""), nome: t.displayTitle || t.name || "", slug: t.slug ?? "" }))
+        .filter((c: { id: string; nome: string }) => c.id && c.nome)
+        .slice(0, limite);
+      return ok({ categorias }, SEM_CACHE);
+    }
+
+    // ── Produtos por ID: quem são os que a vitrine JÁ escolheu ───────────
+    // A escolha guarda só o id (e o CÓDIGO da loja guarda o SLUG no fallback da vitrine).
+    // Sem este caminho, a lista de escolhidos no painel mostrava o id CRU para todo produto
+    // que não estivesse na página de resultados aberta na hora — o lojista lia o slug ao
+    // lado do nome do produto, na mesma lista, sem nunca ter escrito slug nenhum.
+    //
+    // Quem responde é `resolverVitrine`, a MESMA função da vitrine publicada: mesma ordem e a
+    // mesma tolerância a id que é productId, `_id` ou slug. `limite: ids.length` porque sem
+    // limite ela assume o padrão da vitrine (12) e cortaria a lista do painel. Em modo
+    // ESTRITO: aqui uma resposta que não veio (rede, prazo, 5xx) não pode virar "esses produtos
+    // sumiram da loja" — o painel marca o ausente em vermelho, e o lojista tiraria da vitrine
+    // produto que existe.
+    if (ids.length) {
+      const produtos = await resolverVitrine({ modo: "produtos", produtos: ids, limite: ids.length }, { estrito: true });
+      return ok({ produtos }, SEM_CACHE);
+    }
+
+    // ── Produtos: os primeiros da loja, uma busca ou uma categoria ────────
+    // SEM `busca` e SEM `tagId` o seletor está ABRINDO a aba de produtos: ele espera
+    // os primeiros do catálogo, que é como o lojista acha o que quer sem saber o nome
+    // exato. Recusar isso com 400 deixava a aba de produtos vazia na abertura, com uma
+    // mensagem de falha, e só funcionando depois de digitar.
+    if (tipo === "produtos" || busca || tagId) {
+      const catalogo = await getCatalog(
+        busca ? { first: limite, searchText: busca } : tagId ? { first: limite, tagIds: [tagId] } : { first: limite },
+      );
+      const produtos: VitrineProduto[] = [];
+      for (const node of catalogo?.nodes ?? []) {
+        const p = produtoDaVitrine(node);
+        if (p) produtos.push(p);
+        if (produtos.length >= limite) break;
+      }
+      return ok({ produtos }, SEM_CACHE);
+    }
+
+    return fail("Diga o que buscar: ?tipo=categorias, ?tipo=produtos, ?busca=<texto> ou ?tagId=<id>.", 400);
+  } catch (err) {
+    // A mensagem crua pode carregar detalhe do gateway; fica no log do servidor.
+    console.warn("[vitrine] catálogo indisponível", err instanceof Error ? err.message : err);
+    return fail("Não consegui ler o catálogo da Unbox agora.", 502);
+  }
+}

package/template/app/api/unbox/paginas/route.ts

@@ -0,0 +1,167 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// A LOJA DIZ QUAIS PÁGINAS ELA TEM.
+//
+// Por que existe: a lista de páginas que o editor abre estava no `shops.json` DELE — digitada à mão,
+// com slug de produto cravado, e ignorada inteira quando `SHOPS_JSON` existia no ambiente. Quem sabe
+// quais páginas existem é a loja, e ela sabe sem ninguém digitar nada: a regra é a de
+// lib/rotas-editaveis.ts (página de `app/(loja)/` que o `DISALLOW` do robots não bloqueia).
+//
+// ── CONTRATO (o outro lado é lib/paginas-da-loja.ts do editor) ─────────────
+//   GET /api/unbox/paginas          (PÚBLICO, sem token)
+//   200 → { paginas: [ { rota, caminho, label, dinamica, soChrome?, containers? } , … ] }
+//         rota      caminho da ROTA como o Next a escreve ("/produto/[productSlug]"). É a forma que
+//                   `revalidatePath(rota, "page")` entende, e é UMA por rota — nunca uma por produto.
+//         caminho   caminho CONCRETO para a prévia abrir ("/produto/<slug de um produto real>").
+//                   Igual a `rota` nas páginas estáticas. `null` = a rota existe e precisa ser
+//                   re-renderizada, mas hoje não há exemplo para abrir (catálogo vazio ou fora do ar).
+//         label     nome que o lojista lê no seletor de página.
+//         dinamica  a rota tem segmento `[…]`: um `caminho` é um exemplo, não a página inteira.
+//         soChrome  OPCIONAL, e só aparece quando `true`: a página é, por regra (README do editor, §8), só
+//                   cabeçalho e rodapé editáveis, porque o corpo dela é texto legal, rótulo de formulário/UI
+//                   ou mecânica de compra, e isso não vira primitivo. A lista é `SO_CHROME` em
+//                   lib/rotas-editaveis.ts, com o motivo de cada rota. O gate não aplica a régua de 80% nela
+//                   (o resto do gate vale), e o editor sabe que a lista de seções dela é só o chrome.
+//         containers OPCIONAL: os containers que esta ROTA renderiza, fora o `chrome` (que é do site inteiro).
+//                   É a tabela `CONTAINERS_POR_ROTA` de lib/rotas-editaveis.ts, com o motivo de cada rota. `[]` é
+//                   declaração ("só o chrome"); o campo AUSENTE é rota fora da tabela (a loja não declarou; o gate
+//                   reprova). O editor usa para avisar "isto também aparece em «Categoria»" antes de alguém abrir
+//                   /categoria, e para a publicação alcançar a página certa já na primeira sessão. O gate confere:
+//                   o que o manifesto da página mostrou (fora o chrome) tem de ser exatamente isto.
+//   500 → { error: "<motivo verdadeiro>" }  — a loja não conseguiu descobrir as próprias páginas. Inclui a
+//         descoberta que falhou NO MEIO (uma subpasta de app/(loja) ilegível): a lista é recusada inteira, com o
+//         caminho que não abriu, em vez de sair parcial com 200 e sumir com a página do seletor e do gate.
+//
+//   PÚBLICO de propósito: é a mesma informação que `sitemap.xml` já publica, e o gate de cobertura
+//   (`scripts/check-editable.mjs`) precisa dela sem ter token de editor nenhum em mãos.
+//
+// ⚠️ LISTA VAZIA NUNCA VIRA 200. Uma loja sem páginas não existe; lista vazia é falha da descoberta,
+// e responder 200 com `[]` faria o editor (e o gate) concluírem "não há nada para editar/medir".
+// ═══════════════════════════════════════════════════════════════════════════
+import { ok, fail } from "@/lib/api";
+import { containersDaRota, rotasEditaveis, soChrome } from "@/lib/rotas-editaveis";
+import { getCatalog, getTopTags } from "@/lib/queries";
+
+// DINÂMICA de propósito. Com `revalidate` (rota estática com ISR) o Next só devolve a resposta depois
+// que todo trabalho de cache pendente termina, e a busca do exemplo que estourou o prazo continuava
+// pendente por trás do `Promise.race`: a rota levava 56 s para responder uma lista que estava pronta
+// em 3 s (medido em dev, sem credenciais). A lista de rotas custa um `readdirSync`; o exemplo tem
+// guarda própria em memória (abaixo). Nada aqui precisa do cache de rota.
+export const dynamic = "force-dynamic";
+
+/**
+ * O nome que o lojista lê. Derivar do segmento dá "Devolucoes" sem cedilha — então o que é COPY
+ * fica declarado aqui, que é a loja, e o resto cai na derivação. Rota nova com acento ou nome
+ * composto entra aqui; sem entrada, o rótulo é o último segmento com a inicial maiúscula.
+ */
+const ROTULOS: Record<string, string> = {
+  "/": "Página inicial",
+  "/produtos": "Produtos",
+  "/sobre": "Sobre",
+  "/busca": "Busca",
+  "/oferta": "Oferta",
+  "/devolucoes": "Trocas e devoluções",
+  "/privacidade": "Privacidade",
+  "/termos": "Termos de uso",
+  "/produto/[productSlug]": "Produto",
+  "/categoria/[tagSlug]": "Categoria",
+};
+
+function rotulo(rota: string): string {
+  const declarado = ROTULOS[rota];
+  if (declarado) return declarado;
+  // último segmento que não é dinâmico ("/produto/[slug]" → "produto"); nada disso → a rota crua
+  const segmentos = rota.split("/").filter(Boolean);
+  const util = [...segmentos].reverse().find((s) => !s.startsWith("["));
+  if (!util) return rota;
+  const palavra = util.replace(/-/g, " ");
+  return palavra.charAt(0).toUpperCase() + palavra.slice(1);
+}
+
+/**
+ * O EXEMPLO CONCRETO de cada rota dinâmica: um slug de verdade, para a prévia abrir e o gate medir.
+ * Vive aqui porque é conhecimento da loja (quem tem o cliente da Unbox é ela, nunca o editor).
+ * Falha de catálogo devolve `null` — a rota continua na lista, sem exemplo, e isso é dito.
+ *
+ * COM PRAZO, e a LISTA NUNCA ESPERA POR ELE. O primeiro desenho varria o catálogo inteiro
+ * (`loadAllCatalogItems`, 100 por página) para achar UM slug, e sem credenciais da Unbox esperava os
+ * 15 s de timeout do cliente, duas vezes: a rota levava 30 s, o editor (que espera 5 s) caía no
+ * `shops.json` sempre, e o gate esperava meio minuto para descobrir que não havia exemplo. Agora é
+ * uma consulta curta (`first: 8`, cacheada como o resto do catálogo), no máximo `PRAZO_EXEMPLO_MS`
+ * por rota; o que não respondeu a tempo sai como `caminho: null` NESTA resposta, e a busca que ficou
+ * pendente corrige a guarda quando terminar. Guarda em memória porque em dev o `revalidate` da rota
+ * não cacheia nada, e ninguém precisa pagar o catálogo a cada login no editor.
+ */
+const PRAZO_EXEMPLO_MS = 3_000;
+const TTL_EXEMPLO_MS = 5 * 60_000;
+const TTL_SEM_EXEMPLO_MS = 60_000;
+const EXEMPLOS: Record<string, () => Promise<string | null>> = {
+  "/produto/[productSlug]": async () => {
+    const pagina = await getCatalog({ first: 8, offset: 0 });
+    const p = ((pagina as any)?.nodes ?? []).map((n: any) => n?.product ?? n).find((p: any) => p && p.isVisible !== false && p.slug);
+    return p ? `/produto/${encodeURIComponent(p.slug)}` : null;
+  },
+  "/categoria/[tagSlug]": async () => {
+    const tags = (await getTopTags()) as any[];
+    const t = tags.find((t) => t && t.isVisible !== false && t.slug);
+    return t ? `/categoria/${encodeURIComponent(t.slug)}` : null;
+  },
+};
+const exemplosGuardados = new Map<string, { ate: number; caminho: string | null }>();
+
+async function exemploDe(rota: string): Promise<string | null> {
+  const guardado = exemplosGuardados.get(rota);
+  if (guardado && guardado.ate > Date.now()) return guardado.caminho;
+  const buscar = EXEMPLOS[rota];
+  if (!buscar) return null;
+  const pendente = buscar().then(
+    (caminho) => {
+      exemplosGuardados.set(rota, { ate: Date.now() + TTL_EXEMPLO_MS, caminho });
+      return caminho;
+    },
+    (err: unknown) => {
+      console.warn("[paginas] não consegui um exemplo para", rota, err instanceof Error ? err.message : err);
+      exemplosGuardados.set(rota, { ate: Date.now() + TTL_SEM_EXEMPLO_MS, caminho: null });
+      return null;
+    },
+  );
+  const prazo = new Promise<"prazo">((r) => setTimeout(() => r("prazo"), PRAZO_EXEMPLO_MS));
+  const resultado = await Promise.race([pendente, prazo]);
+  if (resultado !== "prazo") return resultado;
+  console.warn(`[paginas] o catálogo não respondeu em ${PRAZO_EXEMPLO_MS} ms para ${rota}; esta resposta sai sem exemplo`);
+  // "sem exemplo" fica guardado por pouco tempo, para os próximos pedidos não esperarem de novo; a
+  // busca pendente sobrescreve a guarda assim que terminar
+  exemplosGuardados.set(rota, { ate: Date.now() + TTL_SEM_EXEMPLO_MS, caminho: null });
+  return null;
+}
+
+export async function GET() {
+  let rotas: string[];
+  try {
+    rotas = rotasEditaveis();
+  } catch (e) {
+    // A descoberta falhou (raiz ausente sem lista no ambiente, subpasta ilegível, nenhum page.tsx): a resposta é
+    // recusar a lista INTEIRA, com o motivo. Uma lista parcial com 200 faria a página sumir do seletor e o gate
+    // deixar de medi-la sem dizer NÃO RODOU.
+    const motivo = e instanceof Error ? e.message : String(e);
+    console.error(`[paginas] descoberta recusada: ${motivo}`);
+    return fail(`A loja não conseguiu descobrir as próprias páginas: ${motivo}.`, 500);
+  }
+  const paginas = await Promise.all(
+    rotas.map(async (rota) => {
+      const dinamica = rota.includes("[");
+      const caminho = dinamica ? await exemploDe(rota) : rota;
+      const containers = containersDaRota(rota);
+      // `soChrome` só quando é verdade, e `containers` só quando a tabela declara: quem lê a lista não precisa
+      // saber dos campos para continuar certo, e o campo ausente é informação ("a loja não declarou")
+      return { rota, caminho, label: rotulo(rota), dinamica, ...(soChrome(rota) ? { soChrome: true } : {}), ...(containers ? { containers: [...containers] } : {}) };
+    }),
+  );
+  // a home primeiro (é onde a prévia abre), depois as estáticas, depois as dinâmicas
+  paginas.sort((a, b) => {
+    if (a.rota === "/") return -1;
+    if (b.rota === "/") return 1;
+    if (a.dinamica !== b.dinamica) return a.dinamica ? 1 : -1;
+    return a.rota.localeCompare(b.rota);
+  });
+  return ok({ paginas });
+}

package/template/app/api/unbox/vitrine/route.ts

@@ -0,0 +1,84 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// A ESCOLHA DA VITRINE VIRA PRODUTOS **NA PRÉVIA**, ANTES DE PUBLICAR.
+//
+// Por que existe: em produção quem resolve a vitrine é a página, no servidor,
+// a partir do documento PUBLICADO (`resolverVitrinesDoDocumento`). Na prévia
+// não tem como ser assim — o RASCUNHO nunca passou por este servidor: ele vive
+// no editor e chega ao iframe por postMessage, no navegador. Sem esta rota, o
+// lojista escolhia cinco produtos, punha limite 3, clicava em aplicar, e a tela
+// não mudava; numa loja que ainda não publicou, não mudava nunca. Publicar às
+// cegas é o oposto do que a prévia serve para resolver.
+//
+// Então o primitivo `Editable.Vitrine`, em modo edição, manda a ESCOLHA para cá
+// e recebe os produtos de volta. A credencial da Unbox continua onde sempre
+// esteve: nesta loja. O editor não fala com a Unbox — nem por esta rota, que ele
+// não chama: quem chama é a própria página da loja, dentro do iframe dele.
+//
+// Irmã de app/api/unbox/catalogo/route.ts (o SELETOR: "o que existe na loja").
+// Esta responde outra pergunta: "esta escolha, hoje, mostra o quê?".
+//
+// ── CONTRATO (o outro lado é `Editable.Vitrine`, em lib/editable/primitives.tsx) ──
+//   POST  x-editor-token: <JWT ES256 do editor, purpose "preview">
+//         body { escolha: VitrineValue }
+//   200 → { produtos: [{ id, titulo, slug, imagem, preco, esgotado }] }  (≤ escolha.limite)
+//   400 → escolha malformada     401 → sem token válido     502 → Unbox não respondeu
+//
+// SOMENTE LEITURA. Nada aqui grava nada, e o documento não é tocado: quem guarda
+// a escolha é o editor, e ela só chega à loja de verdade quando o lojista publica.
+//
+// ⚠️ 502 NUNCA vira 200 com lista vazia. Lista vazia é resposta legítima ("essa
+// categoria não tem produto hoje") e o lojista precisa poder distinguir as duas
+// coisas — senão ele publica uma seção em branco achando que escolheu errado.
+// É por isso que `resolverVitrine` é chamada em modo `estrito` aqui, e não na
+// página do cliente, onde a única saída aceitável é cair nos produtos do código.
+// ═══════════════════════════════════════════════════════════════════════════
+import { ok, fail } from "@/lib/api";
+import { verifyEditorToken } from "@/lib/editable/verify";
+import { vitrineValida } from "@/lib/editable/document";
+import { resolverVitrine } from "@/lib/vitrine";
+
+// A resposta depende do token do request e do rascunho de quem pediu: nada de cache compartilhado.
+export const dynamic = "force-dynamic";
+
+const SEM_CACHE = { headers: { "Cache-Control": "private, no-store" } };
+
+/**
+ * Teto do corpo, lido ANTES do JSON.parse. Uma escolha de vitrine é minúscula
+ * (24 ids no pior caso); qualquer coisa maior que isto não é escolha de vitrine.
+ */
+const CORPO_MAX = 8 * 1024;
+
+export async function POST(req: Request) {
+  // Mesmo portão do seletor de catálogo — só o purpose muda. "preview" é o token com que o editor
+  // ABRIU este iframe: ele já está no navegador do lojista, e é o único que a página tem em mãos.
+  // Ele vale 15 minutos; quando vence, esta rota responde 401 e o primitivo pede outro ao editor.
+  const token = req.headers.get("x-editor-token");
+  const autorizado = token ? await verifyEditorToken(token, "preview") : null;
+  if (!autorizado) return fail("Não autorizado.", 401);
+
+  const bruto = await req.text().catch(() => "");
+  if (bruto.length > CORPO_MAX) return fail("Escolha de vitrine grande demais.", 413);
+  let corpo: unknown;
+  try {
+    corpo = JSON.parse(bruto);
+  } catch {
+    return fail("Não entendi a escolha da vitrine.", 400);
+  }
+
+  // A MESMA validação que o documento usa para aceitar o valor. Se não passa aqui, não passaria lá:
+  // resolver uma escolha que o editor não conseguiria gravar mostraria ao lojista uma prévia de uma
+  // vitrine que ele nunca vai conseguir publicar.
+  const escolha = (corpo as { escolha?: unknown } | null)?.escolha;
+  if (!vitrineValida(escolha)) return fail("Escolha de vitrine inválida (modo, categoria/produtos/busca, limite).", 400);
+
+  try {
+    // `limite` é aplicado DENTRO de `resolverVitrine` (`limiteDaVitrine`), o mesmo caminho da
+    // página publicada — é o que faz "coloquei 3" limitar na prévia igual limitaria no ar.
+    const produtos = await resolverVitrine(escolha, { estrito: true });
+    return ok({ produtos }, SEM_CACHE);
+  } catch (err) {
+    // A mensagem crua pode carregar detalhe do gateway; fica no log do servidor.
+    console.warn("[vitrine] não consegui resolver a escolha da prévia", err instanceof Error ? err.message : err);
+    return fail("Não consegui buscar os produtos na Unbox agora.", 502);
+  }
+}

package/template/app/api/webhooks/unbox/route.ts

@@ -0,0 +1,97 @@
+// Receptor de webhooks da Unbox (doc 07/11):
+//  - lê o corpo CRU (req.text()) — NUNCA req.json() antes da verificação
+//  - valida HMAC-SHA256 (X-Unbox-Signature) com timingSafeEqual → 401 se inválido
+//  - PING → 200 imediato (handshake)
+//  - idempotência por event._id
+//  - responde 200 rápido; processamento pesado deve ir para fila (aqui: inline + revalidação)
+import { parseUnboxWebhook } from "@/lib/unbox/webhooks";
+import { serverEnv } from "@/lib/config";
+import { markIfNew } from "@/lib/webhook-store";
+import { dispatchCrm } from "@/lib/crm";
+import { revalidatePath } from "next/cache";
+import { withStoreClient } from "@/lib/unbox/store";
+import { sendCapi, sha256, capiConfigured } from "@/lib/capi";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(req: Request) {
+  // Cada assinatura de webhook tem o seu secret (ORDER_CREATED e ORDER_STATUS_UPDATE diferem).
+  // UNBOX_WEBHOOK_SECRET aceita uma LISTA separada por vírgula.
+  const secrets = serverEnv.webhookSecret.split(",").map((s) => s.trim()).filter(Boolean);
+  if (!secrets.length) {
+    // sem secret configurado não há como validar — recusa (configure via npm run unbox:webhook:subscribe)
+    return new Response("webhook secret not configured", { status: 503 });
+  }
+
+  let evt;
+  try {
+    evt = await parseUnboxWebhook(req, secrets);
+  } catch {
+    return new Response("invalid signature", { status: 401 });
+  }
+
+  if (evt.type === "PING") return new Response("ok");
+
+  // idempotência
+  if (!markIfNew(evt._id)) return new Response("duplicate ignored");
+
+  try {
+    const data = evt.data as any;
+    if (evt.type === "ORDER_CREATED") {
+      await dispatchCrm({ type: "order_created", orderId: data.orderId, referenceId: data.orderId, payload: data });
+    }
+    if (evt.type === "ORDER_STATUS_UPDATE") {
+      // Pix pago: paymentStatus PAID + orderStatus PROCESSING (não existe orderStatus PAID)
+      if (data.paymentStatus === "PAID") {
+        await dispatchCrm({ type: "order_paid", orderId: data.orderId, referenceId: data.orderId, payload: data });
+        // Compra confirmada FORA do navegador (Pix/boleto pagos depois de fechar a página):
+        // manda o Purchase pra Meta por CAPI, server-to-server, com o MESMO event_id que o
+        // browser usaria ("purchase-<ref>"). Se a pessoa ainda estava na página e o browser
+        // também disparou, o Meta deduplica. Pix gerado e abandonado NUNCA chega aqui —
+        // é o webhook de pagamento, não de criação do pedido.
+        await purchaseParaMeta(data).catch((e) => console.error("[webhook] capi purchase", e));
+      }
+      // revalida páginas de catálogo (estoque pode ter mudado)
+      revalidatePath("/");
+      revalidatePath("/produtos");
+    }
+  } catch (e) {
+    // não derruba o 200 — webhook deve ser idempotente e tolerante; loga para investigação
+    console.error("[webhook] erro ao processar", e);
+  }
+
+  return new Response("ok");
+}
+
+/**
+ * Purchase server-side na Meta. Busca o pedido com credenciais da LOJA (o webhook não traz itens
+ * nem e-mail) e envia hasheado. Sem META_PIXEL_ID/META_CAPI_TOKEN é no-op.
+ */
+async function purchaseParaMeta(data: any) {
+  if (!capiConfigured() || !data?.orderId) return;
+  const order = await withStoreClient((c) => c.getOrder(data.orderId)).catch(() => null);
+  if (!order) return;
+
+  const nodes: any[] = (order.fulfillmentGroups ?? []).flatMap((g: any) => g?.items?.nodes ?? []);
+  const addr = (order.fulfillmentGroups ?? []).map((g: any) => g?.data?.shippingAddress).find(Boolean);
+  const partes = String(addr?.fullName ?? "").trim().split(/\s+/).filter(Boolean);
+  const semAcento = (s?: string) => (s ?? "").normalize("NFD").replace(/[̀-ͯ]/g, "");
+  const value = Number(data.paymentSummary?.orderTotal ?? order.summary?.total?.amount ?? 0);
+
+  await sendCapi({
+    eventId: `purchase-${order.referenceId}`,
+    eventName: "Purchase",
+    value,
+    currency: "BRL",
+    orderId: order.referenceId,
+    actionSource: "system_generated",
+    contents: nodes.map((n) => ({ id: n.productConfiguration?.productId ?? n._id, quantity: n.quantity ?? 1, item_price: n.price?.amount })),
+    userData: {
+      em: sha256(order.email),
+      fn: sha256(semAcento(partes[0])),
+      ln: sha256(semAcento(partes.slice(1).join(" "))),
+      zp: sha256(String(addr?.postal ?? "").replace(/\D/g, "")),
+      external_id: sha256(order.email),
+    },
+  });
+}

package/template/app/apple-icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width="180" height="180">
+  <!-- unbox-placeholder: troque este ícone pelo da marca (fundo OPACO, iOS não aplica transparência) -->
+  <rect width="180" height="180" fill="#FFFFFF"/>
+  <rect x="30" y="30" width="120" height="120" rx="26" fill="#D4D4D8"/>
+</svg>

package/template/app/error.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+export default function Error({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-24 text-center">
+      <h1 className="text-xl font-semibold">Algo deu errado</h1>
+      <p className="mt-1 max-w-sm text-sm text-muted-foreground">
+        Tivemos um problema ao carregar esta página. Tente novamente em instantes.
+      </p>
+      <Button className="mt-6" onClick={() => reset()}>Tentar novamente</Button>
+    </div>
+  );
+}