@unbox-plus/cli 0.20.4

package/template/lib/unbox/webhooks.ts

@@ -0,0 +1,66 @@
+// webhooks.ts — verificação de webhooks da Unbox (HMAC-SHA256 do corpo cru com o secret).
+// Spec oficial: header X-Unbox-Signature = HMAC-SHA256(rawBody, secret) em hex.
+
+import crypto from "node:crypto";
+
+export type UnboxWebhookEventType = "PING" | "ORDER_CREATED" | "ORDER_STATUS_UPDATE";
+
+export interface UnboxWebhookEnvelope<T = any> {
+  _id: string;            // id único DESTA chamada (use para idempotência)
+  type: UnboxWebhookEventType;
+  data: T;
+  createdAt: string;      // ISO 8601
+}
+
+export interface UnboxOrderWebhookData {
+  orderId: string;
+  shopSlug: string;
+  shopDomain?: string;
+  orderStatus: string;    // OrderStatusEnum
+  paymentStatus: string;  // PaymentStatusEnum
+  paymentType: "pix" | "credit" | "boleto";
+  paymentTransactionId: string;
+  paymentSummary: {
+    itemsSubtotal: number; discountTotal: number;
+    providerShippingCost: number; finalShippingCost: number; orderTotal: number;
+  };
+  discounts?: Array<{ code?: string; label?: string; description?: string; method: string; type: string }>;
+  orderCreatedAt: string;
+  orderUpdatedAt: string;
+  utmParameters?: { campaignName: string; source: string; marketingMedium: string; targetContent?: string; searchTerms?: string };
+}
+
+/**
+ * Verifica a assinatura `X-Unbox-Signature` de um webhook.
+ * @param rawBody  corpo CRU do request (string exata — NÃO re-serialize o JSON antes).
+ * @param signature valor do header `x-unbox-signature`.
+ * @param secret   secret (ou LISTA de secrets) retornado(s) no subscribeToWebhook. Cada assinatura
+ *                 de webhook tem o seu próprio secret (ex.: ORDER_CREATED e ORDER_STATUS_UPDATE
+ *                 geram secrets diferentes) — passe todos para validar qualquer evento.
+ * @returns true se a assinatura confere com ALGUM dos secrets (comparação em tempo constante).
+ */
+export function verifyUnboxWebhook(rawBody: string, signature: string, secret: string | string[]): boolean {
+  if (!signature) return false;
+  const secrets = (Array.isArray(secret) ? secret : [secret]).filter(Boolean);
+  if (!secrets.length) return false;
+  const sig = Buffer.from(signature);
+  return secrets.some((s) => {
+    const expected = crypto.createHmac("sha256", s).update(rawBody, "utf-8").digest("hex");
+    if (signature.length !== expected.length) return false;
+    return crypto.timingSafeEqual(sig, Buffer.from(expected));
+  });
+}
+
+/**
+ * Helper completo p/ Route Handler: valida a assinatura e devolve o evento tipado.
+ * Lança se a assinatura for inválida. Trate `PING` (handshake) e deduplique por `evt._id`.
+ *
+ *   const evt = await parseUnboxWebhook(req, process.env.UNBOX_WEBHOOK_SECRET!);
+ *   if (evt.type === "PING") return new Response("ok");
+ */
+export async function parseUnboxWebhook(req: Request, secret: string | string[]): Promise<UnboxWebhookEnvelope> {
+  const raw = await req.text();
+  const sig = req.headers.get("x-unbox-signature") ?? "";
+  if (!verifyUnboxWebhook(raw, sig, secret)) throw new Error("UNBOX_WEBHOOK_INVALID_SIGNATURE");
+  return JSON.parse(raw) as UnboxWebhookEnvelope;
+}

package/template/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/template/lib/vitrine.ts

@@ -0,0 +1,242 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// VITRINE — de ESCOLHA do lojista para PRODUTOS de verdade.
+//
+// O editor guarda só a ESCOLHA (`VitrineValue`: uma categoria da Unbox, uma
+// lista de produtos ou uma busca). Quem transforma isso em produto com preço e
+// estoque é a LOJA, aqui, no servidor, com o mesmo cliente da Unbox que a home
+// e a PDP já usam. O editor nunca vê credencial nem catálogo — ele só pergunta
+// o que existe pelo endpoint de leitura (app/api/unbox/catalogo/route.ts).
+//
+// ⚠️ A LOJA NÃO PODE CAIR POR CAUSA DISSO. Toda falha (Unbox fora, id que não
+// existe mais, categoria vazia) devolve lista vazia; quem chama volta para o
+// que o CÓDIGO mostra — a mesma regra de `getPublishedContent`.
+//
+// (A honestidade do 502 vale para a ROTA do seletor, não para cá: lá o editor
+// precisa distinguir "categoria vazia" de "não consegui ler"; aqui, na página
+// do cliente, a única saída aceitável é continuar mostrando os produtos do
+// código.)
+// ═══════════════════════════════════════════════════════════════════════════
+import "server-only";
+import { unstable_cache } from "next/cache";
+import { getCatalog, getProductBySlug } from "./queries";
+import { withStoreClient } from "./unbox/store";
+import { resolveProductPrice } from "./format";
+import { CAMPO_VITRINE, VITRINE_MAX, vitrineValida, type ContentDocument, type VitrineValue } from "./editable/document";
+
+/**
+ * O que a loja mostra de um produto numa vitrine — e, campo por campo, o que o
+ * endpoint de leitura devolve ao seletor do editor.
+ *
+ * É de propósito o MÍNIMO: nada de cadastro interno, nada de credencial. Preço
+ * pode vir `null` (produto sem variante com preço no painel); quem renderiza
+ * mostra "—" em vez de inventar zero.
+ */
+export interface VitrineProduto {
+  /** `productId` da Unbox — é o que o addToCart e `getProductById` usam. */
+  id: string;
+  titulo: string;
+  slug: string;
+  imagem: string | null;
+  preco: number | null;
+  esgotado: boolean;
+}
+
+/** Quantos produtos uma vitrine traz quando o lojista não disse. */
+export const VITRINE_LIMITE_PADRAO = 12;
+
+/**
+ * O ÚLTIMO segmento do caminho de toda vitrine desta loja.
+ *
+ * O caminho completo é `<container>.<id da seção>.<este campo>` — e ele NÃO é
+ * escrito à mão em lugar nenhum: no cliente, `Editable.Vitrine path={CAMPO_VITRINE}`
+ * o monta a partir do escopo da seção (`joinPath(ctx.scope, CAMPO_VITRINE)`); no
+ * servidor, `resolverVitrinesDoDocumento` o DESCOBRE varrendo o documento. É a
+ * mesma string derivada dos dois lados, e é por isso que renomear o id de uma
+ * seção — ou o lojista adicionar uma vitrine nova, com id sorteado em tempo de
+ * execução (`novo-<tipo>-<n>`) — não descola loja e painel.
+ *
+ * A CONSTANTE mora na FOUNDATION (lib/editable/document.ts) e é só reexportada aqui. Este arquivo é
+ * `server-only`: um componente de cliente não consegue importá-lo, e enquanto o literal vivia aqui
+ * cada seção repetia `const CAMPO = "vitrine"` com um comentário pedindo para trocar os dois juntos.
+ * Uma string, um lugar.
+ */
+export { CAMPO_VITRINE };
+
+/**
+ * Teto de vitrines resolvidas por página. Cada uma pode custar uma consulta ao
+ * catálogo; um documento adulterado com centenas de caminhos `.vitrine` viraria
+ * uma enxurrada de chamadas à Unbox no render da home.
+ */
+const VITRINES_POR_PAGINA_MAX = 12;
+
+/** Limite pedido, preso entre 1 e `VITRINE_MAX` (o teto da foundation). */
+export function limiteDaVitrine(limite?: number | null): number {
+  const n = Number.isInteger(limite) ? (limite as number) : VITRINE_LIMITE_PADRAO;
+  return Math.max(1, Math.min(VITRINE_MAX, n));
+}
+
+/** Node do catálogo (ou item de PDP) → produto de vitrine. `null` quando não dá para identificar. */
+export function produtoDaVitrine(node: any): VitrineProduto | null {
+  const p = node?.product ?? node;
+  if (!p?.slug) return null;
+  return {
+    id: String(p.productId ?? p._id ?? p.slug),
+    titulo: p.title ?? "",
+    slug: p.slug,
+    imagem: p.imageUrls?.[0] ?? null,
+    preco: resolveProductPrice(p).price,
+    esgotado: !!p.isSoldOut,
+  };
+}
+
+function mapear(nodes: any[] | undefined, limite: number): VitrineProduto[] {
+  const out: VitrineProduto[] = [];
+  for (const n of nodes ?? []) {
+    const p = produtoDaVitrine(n);
+    if (p) out.push(p);
+    if (out.length >= limite) break;
+  }
+  return out;
+}
+
+/**
+ * Um produto pelo `productId`. Cacheado como o resto do catálogo (público e
+ * estável), e só é chamado para os ids que a página de catálogo já lida não
+ * cobriu — no caso normal, nenhum.
+ */
+const porId = (id: string) =>
+  unstable_cache(
+    () => withStoreClient((c) => c.getProductById(id)),
+    ["unbox-vitrine-produto", id],
+    { revalidate: 300, tags: ["catalog"] },
+  )();
+
+/**
+ * Resolve a escolha do lojista em produtos.
+ *
+ * `produtos` preserva a ORDEM em que ele escolheu — é a única informação que a
+ * lista carrega e que o catálogo não sabe repor.
+ *
+ * `estrito` é para quem PRECISA saber que a Unbox falhou: a rota da prévia
+ * (app/api/unbox/vitrine/route.ts), que responde 502 em vez de 200 com lista
+ * vazia. Sem ele — o padrão, usado pela página do cliente — uma falha vira
+ * lista vazia e a seção volta aos produtos do código.
+ *
+ * ⚠️ A diferença é UMA linha: a página do catálogo no modo "produtos", a única
+ * consulta que este arquivo engolia. Nos modos "categoria" e "busca" o
+ * `getCatalog` já sobe o erro, e quem chama é que decide o que fazer com ele.
+ * A busca de UM produto continua tolerante nos dois modos: id que não volta
+ * costuma ser produto apagado do painel, não Unbox fora do ar, e derrubar a
+ * vitrine inteira por causa de um item some com os outros quatro.
+ */
+export async function resolverVitrine(escolha: VitrineValue, opts?: { estrito?: boolean }): Promise<VitrineProduto[]> {
+  const limite = limiteDaVitrine(escolha.limite);
+
+  if (escolha.modo === "categoria") {
+    const c = await getCatalog({ first: limite, tagIds: [escolha.tagId] });
+    return mapear(c?.nodes, limite);
+  }
+
+  if (escolha.modo === "busca") {
+    const c = await getCatalog({ first: limite, searchText: escolha.texto });
+    return mapear(c?.nodes, limite);
+  }
+
+  // ── modo "produtos" ──────────────────────────────────────────────────────
+  // Primeiro a página de catálogo que a home JÁ busca (mesmos `opts`, mesma
+  // chave de cache → nenhuma chamada nova). Só o que sobrar vira consulta
+  // individual, no máximo VITRINE_MAX delas.
+  // No modo PRODUTOS o lojista escolheu a lista a dedo: ela é a resposta, e um `limite` gravado antes
+  // não pode encolhê-la (ele nem tem onde mexer nesse número). O teto da foundation continua valendo.
+  // Repetido entra uma vez só: a mesma vitrine mostrando o mesmo produto duas vezes é defeito, não escolha.
+  const semRepetir = [...new Set(escolha.produtos)];
+  const pedidos = semRepetir.slice(0, VITRINE_MAX);
+  const pagina = opts?.estrito ? await getCatalog({ first: 100 }) : await getCatalog({ first: 100 }).catch(() => null);
+  const achados = new Map<string, VitrineProduto>();
+  const indexar = (node: any) => {
+    const p = node?.product ?? node;
+    const item = produtoDaVitrine(node);
+    if (!item) return;
+    // o lojista pode ter guardado productId, _id ou slug — os três apontam para cá
+    for (const chave of [p.productId, p._id, p.slug]) if (chave) achados.set(String(chave), item);
+  };
+  for (const n of pagina?.nodes ?? []) indexar(n);
+
+  const faltando = pedidos.filter((id) => !achados.has(id));
+  if (faltando.length) {
+    const extras = await Promise.all(
+      faltando.map(async (id) => {
+        // id pode ser productId ou slug; tenta os dois caminhos que a loja já tem
+        const porProduto = await porId(id).catch(() => null);
+        return porProduto ?? (await getProductBySlug(id).catch(() => null));
+      }),
+    );
+    for (const e of extras) if (e) indexar(e);
+  }
+
+  // Item pedido que não resolveu SOME da vitrine. Isso é o certo na tela (produto que saiu do
+  // catálogo não deve aparecer), mas some sem sinal nenhum, e a causa mais comum é vínculo por
+  // slug depois de o slug mudar no painel. Registrar dá o "por quê" a quem for olhar o log.
+  const perdidos = pedidos.filter((id) => !achados.has(id));
+  if (perdidos.length) {
+    console.warn(`[unbox] vitrine: ${perdidos.length} vínculo(s) não resolveram e sumiram da seção: ${perdidos.join(", ")}`);
+  }
+  return pedidos.map((id) => achados.get(id)).filter((p): p is VitrineProduto => !!p);
+}
+
+/** Produtos já resolvidos, indexados pelo CAMINHO da vitrine — é assim que a seção acha os seus. */
+export type VitrinesResolvidas = Record<string, VitrineProduto[]>;
+
+/**
+ * Os caminhos de vitrine que ESTE documento tem dentro de um container.
+ *
+ * ⚠️ Este é o ponto que uma loja piloto errou e o scaffold não repete: lá o
+ * caminho era uma CONSTANTE escrita à mão (`"home.vitrine-principal.vitrine"`)
+ * enquanto o primitivo o deriva do id da seção — renomear o id descola os dois
+ * EM SILÊNCIO (a loja lê uma caixa, o painel escreve em outra, e ninguém vê erro
+ * nenhum). Aqui não existe constante de caminho: quem manda é o documento. E
+ * tem de ser assim, porque a vitrine é um tipo ADICIONÁVEL — o id nasce em
+ * tempo de execução (`novo-vitrine-de-produtos-2`) quando o lojista clica no
+ * "+", e nenhuma constante do repositório poderia conhecê-lo de antemão.
+ *
+ * Cada seção tem o SEU caminho, então duas vitrines na mesma página têm duas
+ * escolhas independentes.
+ */
+export function caminhosDeVitrine(doc: ContentDocument | null | undefined, container = "home"): string[] {
+  const prefixo = `${container}.`;
+  const sufixo = `.${CAMPO_VITRINE}`;
+  return Object.entries(doc?.values ?? {})
+    .filter(([caminho, valor]) => caminho.startsWith(prefixo) && caminho.endsWith(sufixo) && vitrineValida(valor))
+    .map(([caminho]) => caminho)
+    .sort()
+    .slice(0, VITRINES_POR_PAGINA_MAX);
+}
+
+/**
+ * Resolve TODAS as vitrines que o lojista configurou num container, de uma vez,
+ * para a página entregar às seções já prontas.
+ *
+ * Sem documento, sem escolha, ou com a Unbox fora, devolve `{}` — e cada seção
+ * cai no que o CÓDIGO mostra. Vitrine vazia lê como loja quebrada; os produtos
+ * do código são a rede de segurança.
+ */
+export async function resolverVitrinesDoDocumento(
+  doc: ContentDocument | null | undefined,
+  container = "home",
+): Promise<VitrinesResolvidas> {
+  const caminhos = caminhosDeVitrine(doc, container);
+  if (!caminhos.length) return {};
+  const pares = await Promise.all(
+    caminhos.map(async (caminho) => {
+      const escolha = doc!.values[caminho] as VitrineValue;
+      const produtos = await resolverVitrine(escolha).catch((err) => {
+        console.warn("[vitrine] não consegui resolver", caminho, err instanceof Error ? err.message : err);
+        return [] as VitrineProduto[];
+      });
+      return [caminho, produtos] as const;
+    }),
+  );
+  // caminho que não resolveu em NADA fica de fora: a seção some do mapa e volta
+  // para os produtos do código, em vez de renderizar uma grade vazia
+  return Object.fromEntries(pares.filter(([, produtos]) => produtos.length > 0));
+}

package/template/lib/webhook-store.ts

@@ -0,0 +1,22 @@
+// Idempotência de webhook em memória (doc 07): deduplica por event._id e mantém uma fila
+// simples de processamento. Responder 200 rápido (<30s) e processar fora do hot path.
+//
+// PROD: trocar o Set/array por uma tabela no DB (dedup durável) + fila real (QStash, SQS…).
+import "server-only";
+
+const seen = new Set<string>();
+// limita o tamanho do Set para não vazar memória em runtime longo
+const MAX = 5000;
+
+/** Retorna true se o evento é novo (deve ser processado); false se já foi visto. */
+export function markIfNew(eventId: string): boolean {
+  if (!eventId) return true;
+  if (seen.has(eventId)) return false;
+  seen.add(eventId);
+  if (seen.size > MAX) {
+    // descarta os mais antigos (FIFO aproximado)
+    const it = seen.values();
+    for (let i = 0; i < 1000; i++) seen.delete(it.next().value as string);
+  }
+  return true;
+}

package/template/middleware.ts

@@ -0,0 +1,178 @@
+// PORTA DE PREVIEW — trava a loja atrás da tela /acesso enquanto ela não é pública.
+//
+// ⚠️ ISTO NÃO É SEGURANÇA. É um aviso de "ainda não está pronto": quem preenche o
+// formulário entra, e o cookie vale 30 dias.
+//
+// A porta se ESCOPA PELO DOMÍNIO sozinha: só existe nos hosts de preview
+// (*.vercel.app, *.myunbox.com.br e o que PREVIEW_HOSTS acrescentar). Em domínio
+// PRÓPRIO da marca — o lançamento de verdade — e no localhost do dev, ela some sem
+// precisar mexer em env. Overrides: PREVIEW_DISABLED=1 desliga em qualquer lugar;
+// PREVIEW_FORCE=1 liga em qualquer lugar (ex.: testar a porta no localhost).
+//
+// Time interno não preenche formulário: qualquer URL da loja com ?chave=<senha>
+// (a PREVIEW_PASSWORD, padrão "unbox") grava o cookie e segue limpo. Ex.:
+//   https://loja.vercel.app/?chave=unbox
+//
+// O cookie guarda o SHA-256 da chave, nunca a chave em si.
+import { NextResponse, type NextRequest } from "next/server";
+import { verifyEditorToken } from "@/lib/editable/verify";
+
+const LOJA = "minhaloja"; // o CLI troca pelo slug da loja no scaffold
+
+export const COOKIE = `${LOJA}_preview`;
+
+/** Chave que assina o cookie. Sobrescreva com PREVIEW_PASSWORD na Vercel.
+ *  Trocar a chave invalida os acessos já concedidos. */
+export function senhaDoPreview() {
+  return process.env.PREVIEW_PASSWORD || "unbox";
+}
+
+/** SHA-256 em hex via Web Crypto (o middleware roda no edge; sem node:crypto). */
+export async function tokenDaSenha(valor: string) {
+  const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(valor));
+  return Array.from(new Uint8Array(buf)).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+/** Host de PREVIEW = porta ligada. Domínio próprio da marca/localhost = loja aberta. */
+function hostDePreview(hostHeader: string): boolean {
+  const h = hostHeader.split(":")[0].toLowerCase();
+  const sufixos = [".vercel.app", ".myunbox.com.br"];
+  for (const extra of (process.env.PREVIEW_HOSTS ?? "").split(",")) {
+    const s = extra.trim().toLowerCase();
+    if (s) sufixos.push(s.startsWith(".") ? s : `.${s}`);
+  }
+  return sufixos.some((s) => h.endsWith(s));
+}
+
+// ═══ CONTRATO DA URL DO CHECKOUT — não remova, o build bloqueia sem isto ═══
+// A URL do checkout SEMPRE carrega ?id=&token= do carrinho. É o que permite o CRM montar o
+// e-mail de carrinho abandonado a partir da URL navegada (pixel/GTM capturam a URL, não o
+// cookie) e o link colar o carrinho em outro aparelho. Sem os params, a recuperação de
+// carrinho simplesmente não existe pra quem só enxerga a navegação.
+//
+// POR QUE AQUI, e não só no app/(loja)/checkout/page.tsx (que também tem a guarda):
+// o middleware roda em TODA requisição — navegação do servidor, navegação client-side do
+// App Router, link direto, refresh, retorno de gateway — e independe de o componente da
+// página existir ou de alguém ter lembrado de chamar o helper certo. A regra já se perdeu
+// uma vez porque vivia só na aplicação: bastava um caminho novo pro checkout, ou uma
+// refatoração da página, pra ela sumir sem nenhum sinal.
+//
+// Roda ANTES de qualquer coisa da porta de preview, porque vale em todo host — inclusive
+// no domínio próprio da marca, onde o resto deste arquivo não faz nada.
+const COOKIE_CARRINHO = "unbox_cart";
+const COOKIE_FREQ = "unbox_recur_freq";
+
+function urlDoCheckoutComPonteiro(req: NextRequest): NextResponse | null {
+  if (req.nextUrl.pathname !== "/checkout") return null;
+  const q = req.nextUrl.searchParams;
+  if (q.get("id") && q.get("token")) return null; // já está completa
+
+  const bruto = req.cookies.get(COOKIE_CARRINHO)?.value;
+  if (!bruto) return null; // sem carrinho não há o que recuperar
+  let ref: { cartId?: string; cartToken?: string };
+  try { ref = JSON.parse(bruto); } catch { return null; }
+  if (!ref.cartId || !ref.cartToken) return null;
+
+  const url = req.nextUrl.clone();
+  url.searchParams.set("id", ref.cartId);
+  url.searchParams.set("token", ref.cartToken);
+  const freq = req.cookies.get(COOKIE_FREQ)?.value;
+  if (freq && !url.searchParams.get("freq")) url.searchParams.set("freq", freq);
+  if (!url.searchParams.get("step")) url.searchParams.set("step", "1");
+  return NextResponse.redirect(url);
+}
+
+export async function middleware(req: NextRequest) {
+  const comPonteiro = urlDoCheckoutComPonteiro(req);
+  if (comPonteiro) return comPonteiro;
+
+  if (process.env.PREVIEW_DISABLED === "1") return NextResponse.next();
+  if (process.env.PREVIEW_FORCE !== "1" && !hostDePreview(req.headers.get("host") ?? "")) {
+    return NextResponse.next();
+  }
+
+  const { pathname } = req.nextUrl;
+
+  // Enquanto a porta estiver de pé, NADA pode ir pra cache compartilhado: a resposta
+  // depende do cookie. Sem isso a CDN serve o redirect pra quem já entrou (ou a loja
+  // pra quem não entrou) — é o sintoma de "preenchi e não foi".
+  const semCache = (res: NextResponse) => {
+    res.headers.set("Cache-Control", "private, no-store, must-revalidate");
+    res.headers.set("X-Robots-Tag", "noindex, nofollow");
+    return res;
+  };
+
+  // A própria porta e o endpoint do lead passam (senão vira loop de redirect),
+  // mas COM noindex: tela de acesso não aparece em buscador.
+  if (pathname === "/acesso" || pathname === "/api/acesso") return semCache(NextResponse.next());
+
+  // Rotas chamadas por SERVIDOR ficam de fora — máquina não preenche formulário.
+  // (Cada uma já tem sua própria proteção: HMAC no webhook, secret ou JWT do editor no revalidate.)
+  // /api/revalidate: quem chama é também o EDITOR da Unbox (servidor), com JWT próprio; atrás da
+  // porta ele levava 307 para /acesso e a revalidação nunca acontecia.
+  // /api/unbox/catalogo: é o SELETOR de vitrine do editor pedindo categorias e produtos, servidor a
+  // servidor, com o mesmo JWT (purpose "catalogo"). Atrás da porta o lojista veria um seletor vazio.
+  // A rota valida o token por conta própria e é só leitura.
+  // /api/unbox/paginas: é a loja dizendo quais páginas ela tem, informação que o sitemap já publica.
+  // Quem pergunta é o editor (servidor, para o seletor de página e a revalidação) e o gate de
+  // cobertura, nenhum dos dois com cookie da porta. A rota é pública por contrato e só lê.
+  // (/api/unbox/vitrine NÃO entra aqui: quem a chama é a própria página da loja, dentro do iframe do
+  // editor, e ela já carrega o cookie que o token de prévia grava logo abaixo.)
+  if (
+    pathname === "/api/webhooks/unbox" ||
+    pathname === "/api/revalidate" ||
+    pathname === "/api/unbox/catalogo" ||
+    pathname === "/api/unbox/paginas"
+  ) return NextResponse.next();
+
+  // PRÉVIA DO EDITOR DA UNBOX: a loja abre dentro do iframe do editor com um token assinado por ele
+  // (ES256; a loja só busca a chave pública no JWKS do editor, não guarda segredo nenhum). Token
+  // válido passa pela porta e recebe o cookie dela, para a navegação interna da prévia também passar.
+  // `sameSite: "none"` + `secure` de propósito: dentro de um iframe de OUTRA origem, cookie `lax`
+  // não viaja, e cada clique na prévia cairia de novo na porta. Sem EDITOR_URL, nunca valida.
+  const tokenDoEditor = req.nextUrl.searchParams.get("unbox_editor_token");
+  if (tokenDoEditor && (await verifyEditorToken(tokenDoEditor, "preview"))) {
+    const res = semCache(NextResponse.next());
+    res.cookies.set(COOKIE, await tokenDaSenha(senhaDoPreview()), { path: "/", httpOnly: true, sameSite: "none", secure: true, maxAge: 60 * 60 * 8 });
+    return res;
+  }
+
+  // CHAVE DO TIME: ?chave=<senha> em qualquer URL grava o cookie e redireciona pra
+  // mesma página sem o parâmetro (a chave não fica no histórico/URL compartilhada).
+  // É o atalho interno; lead de verdade continua entrando pelo formulário.
+  const chave = req.nextUrl.searchParams.get("chave");
+  if (chave && chave === senhaDoPreview()) {
+    const url = req.nextUrl.clone();
+    url.searchParams.delete("chave");
+    const res = NextResponse.redirect(url);
+    res.cookies.set(COOKIE, await tokenDaSenha(senhaDoPreview()), {
+      httpOnly: true,
+      sameSite: "lax",
+      secure: process.env.NODE_ENV === "production",
+      path: "/",
+      maxAge: 60 * 60 * 24 * 30,
+    });
+    return semCache(res);
+  }
+
+  const esperado = await tokenDaSenha(senhaDoPreview());
+  if (req.cookies.get(COOKIE)?.value === esperado) {
+    return semCache(NextResponse.next());
+  }
+
+  const url = req.nextUrl.clone();
+  url.pathname = "/acesso";
+  // Limpa a query antes de montar a da porta: o destino inteiro (com sua própria query) vai
+  // no "de", e herdar os params da página de origem só duplicaria dado na URL da porta — no
+  // caso do checkout, duplicaria o token do carrinho, que não tem o que fazer aqui.
+  url.search = "";
+  // Guarda pra onde a pessoa queria ir, pra devolver depois de entrar.
+  url.searchParams.set("de", pathname + req.nextUrl.search);
+  return semCache(NextResponse.redirect(url));
+}
+
+export const config = {
+  // Deixa passar o que a PRÓPRIA tela de acesso precisa pra renderizar: assets do
+  // Next, /brand (logo), /unbox (selo) e os ícones da aba.
+  matcher: ["/((?!_next/static|_next/image|brand/|unbox/|favicon.ico|icon.svg|apple-icon.svg|manifest.webmanifest).*)"],
+};

package/template/next.config.ts

@@ -0,0 +1,63 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // A loja declara as próprias páginas varrendo `app/(loja)/` (lib/rotas-editaveis.ts). Em produção
+  // a função só recebe os arquivos que o Next rastreia, e um `page.tsx` que ninguém importa não é
+  // rastreado: sem esta linha a varredura acha zero e /api/unbox/paginas responde a falha em vez da
+  // lista. `UNBOX_ROTAS_EDITAVEIS` continua sendo a saída se algum dia isto deixar de valer.
+  outputFileTracingIncludes: {
+    "/api/unbox/paginas": ["./app/**/page.tsx", "./app/**/page.ts", "./app/**/page.jsx", "./app/**/page.js"],
+  },
+  images: {
+    remotePatterns: [
+      { protocol: "https", hostname: "unbox-customer-images-production.s3.amazonaws.com" },
+      { protocol: "https", hostname: "**.s3.amazonaws.com" },
+      { protocol: "https", hostname: "**.unbox.com.br" },
+      // imagens que o lojista sobe pelo editor da Unbox (Vercel Blob) e o próprio editor
+      { protocol: "https", hostname: "**.public.blob.vercel-storage.com" },
+      { protocol: "https", hostname: "**.myunbox.com.br" },
+    ],
+  },
+  // URLs antigas (/p/, /c/) → novas (/produto/, /categoria/), preservando SEO/links.
+  //
+  // statusCode: 301, não permanent: true. `permanent: true` emite 308, e 308 preserva o
+  // método HTTP — tecnicamente mais correto e passa PageRank igual. Mas os critérios de
+  // aceitação dos briefings pedem "301 slug a slug" ao pé da letra, e auditoria que lê o
+  // status literal já reprovou duas lojas por isso. Um redirect de GET não ganha nada com
+  // 308: não vale discutir com o auditor.
+  async redirects() {
+    return [
+      { source: "/p/:slug", destination: "/produto/:slug", statusCode: 301 },
+      { source: "/c/:slug", destination: "/categoria/:slug", statusCode: 301 },
+    ];
+  },
+  async headers() {
+    const securityHeaders = [
+      { key: "X-Content-Type-Options", value: "nosniff" },
+      // Quem pode enquadrar a loja: ela mesma e o EDITOR da Unbox (o CMS visual abre a loja num
+      // iframe). X-Frame-Options não aceita origem externa; CSP frame-ancestors aceita e tem
+      // precedência. Sem NEXT_PUBLIC_EDITOR_ORIGIN vale só 'self', que é o mesmo que SAMEORIGIN.
+      { key: "Content-Security-Policy", value: `frame-ancestors 'self' ${process.env.NEXT_PUBLIC_EDITOR_ORIGIN ?? ""}`.trim() },
+      { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
+      { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+      // HSTS: força HTTPS por 1 ano; Vercel já faz isso mas deixar explícito é boa prática.
+      { key: "Strict-Transport-Security", value: "max-age=31536000; includeSubDomains" },
+    ];
+    return [
+      { source: "/:path*", headers: securityHeaders },
+      // doc 09/10: não vazar cartToken/PII via header Referer em carrinho/checkout
+      { source: "/carrinho/:path*", headers: [{ key: "Referrer-Policy", value: "no-referrer" }] },
+      { source: "/checkout/:path*", headers: [{ key: "Referrer-Policy", value: "no-referrer" }] },
+      { source: "/conta/:path*", headers: [{ key: "Referrer-Policy", value: "no-referrer" }] },
+      // Assets da marca: sem isto o Next serve `max-age=0, must-revalidate` e o navegador
+      // revalida a pasta inteira a cada visita (uma loja media 25 MB em /brand).
+      // 30 dias e SEM `immutable`, de propósito: estes arquivos são trocados à mão, mantendo o
+      // mesmo nome (diferente de /_next/static, cujo nome muda a cada build). Com `immutable`,
+      // trocar uma foto deixaria a antiga presa no navegador de quem já visitou.
+      { source: "/brand/:path*", headers: [{ key: "Cache-Control", value: "public, max-age=2592000" }] },
+      { source: "/unbox/:path*", headers: [{ key: "Cache-Control", value: "public, max-age=2592000" }] },
+    ];
+  },
+};
+
+export default nextConfig;

package/template/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "storefront",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "prebuild": "node scripts/check-unbox-brand.mjs && node scripts/medir-sistema.mjs",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit",
+    "unbox:test": "tsx scripts/test-live.ts",
+    "unbox:dump": "tsx scripts/dump-catalog.ts",
+    "unbox:honestidade": "node scripts/check-honestidade.mjs",
+    "unbox:receita": "node scripts/check-recipe.mjs",
+    "unbox:webhook:subscribe": "tsx scripts/subscribe-webhook.ts",
+    "unbox:order:pix": "tsx scripts/place-order-pix.ts",
+    "unbox:abandoned": "tsx scripts/abandoned-cart.ts",
+    "unbox:qa": "node scripts/qa-screenshots.mjs",
+    "unbox:sistema": "python3 scripts/sistema.py .",
+    "unbox:vocabulario": "python3 scripts/vocabulario.py .",
+    "unbox:medir": "node scripts/medir-sistema.mjs",
+    "unbox:placeholder": "node scripts/check-placeholder.mjs",
+    "unbox:editavel": "node scripts/check-editable.mjs --url ${UNBOX_URL:-http://localhost:3000}"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@phosphor-icons/react": "^2.1.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "jose": "^6.2.12",
+    "next": "15.5.19",
+    "qrcode": "^1.5.4",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "sanitize-html": "^2.17.5",
+    "shadcn": "^4.11.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@next/env": "15.5.19",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/sanitize-html": "^2.16.1",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.19",
+    "playwright-core": "^1.63.0",
+    "tailwindcss": "^4",
+    "tsx": "^4.22.4",
+    "typescript": "^5"
+  }
+}

package/template/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;