@unbox-plus/cli 0.20.4

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@unbox-plus/cli",
+  "version": "0.20.4",
+  "author": {
+    "name": "Unbox Development Team",
+    "email": "devs@unbox.com.br",
+    "url": "https://unbox.com.br"
+  },
+  "description": "Scaffold a new Unbox storefront (Next.js) from the official template",
+  "keywords": [
+    "unbox",
+    "storefront",
+    "ecommerce"
+  ],
+  "license": "SEE LICENSE IN LICENSE.md",
+  "type": "module",
+  "bin": {
+    "create-unbox-store": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "template",
+    "tools"
+  ],
+  "engines": {
+    "node": ">=20.11"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/unbox-plus/unbox-cli.git"
+  },
+  "bugs": {
+    "url": "https://github.com/unbox-plus/unbox-cli/issues"
+  },
+  "scripts": {
+    "check:neutro": "node tools/check-template-neutro.mjs",
+    "prepack": "node tools/check-template-neutro.mjs"
+  }
+}

package/src/colors.js

@@ -0,0 +1,100 @@
+// Matemática de cor mínima pra derivar a paleta da loja a partir de 2-3 cores escolhidas pelo
+// usuário (primária + CTA, opcionalmente chrome). Sem dependências externas.
+
+const HEX_RE = /^#?([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
+
+export function normalizeHex(input) {
+  const m = HEX_RE.exec(input.trim());
+  if (!m) return null;
+  let hex = m[1];
+  if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
+  return `#${hex.toUpperCase()}`;
+}
+
+function hexToRgb(hex) {
+  const n = parseInt(hex.slice(1), 16);
+  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+
+function rgbToHex({ r, g, b }) {
+  const c = (v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0");
+  return `#${c(r)}${c(g)}${c(b)}`.toUpperCase();
+}
+
+/** Mistura `hex` com `target` (preto/branco) por `amount` (0-1). amount=0.2 → 20% em direção ao target. */
+function mix(hex, target, amount) {
+  const a = hexToRgb(hex);
+  const b = hexToRgb(target);
+  return rgbToHex({
+    r: a.r + (b.r - a.r) * amount,
+    g: a.g + (b.g - a.g) * amount,
+    b: a.b + (b.b - a.b) * amount,
+  });
+}
+
+export const darken = (hex, amount = 0.15) => mix(hex, "#000000", amount);
+export const lighten = (hex, amount = 0.15) => mix(hex, "#ffffff", amount);
+
+/** Luminância relativa (WCAG simplificado) — decide se o texto sobre `hex` deve ser claro ou escuro. */
+function relativeLuminance(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  const lin = (v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/** Texto de contraste (preto ou branco) pra ficar legível sobre `bgHex`. */
+export function contrastText(bgHex) {
+  return relativeLuminance(bgHex) > 0.45 ? "#1A1B18" : "#FFFFFF";
+}
+
+/**
+ * Deriva os tokens de marca a partir de `primary` + `cta` (e opcionalmente `chromeBg`),
+ * mais o MODO de chrome do preset:
+ *  - "brand-dark" (default): chrome = primária escurecida (comportamento histórico)
+ *  - "ink-dark":            chrome = tinta do estilo escurecida (neutro, não "cor da marca")
+ *  - "light":               chrome claro (superfície do estilo, texto na tinta)
+ * Mesmo conjunto de variáveis do bloco "CONFIGURE" em app/globals.css.
+ */
+export function deriveBrandTokens({ primary, cta, chromeBg }, preset) {
+  const mode = preset?.chrome ?? "brand-dark";
+  const neutrals = preset?.neutrals ?? {};
+  const ink = neutrals["--store-ink"] ?? "#20211E";
+
+  let resolvedChromeBg, chromeText, chromeMuted;
+  if (chromeBg) {
+    resolvedChromeBg = chromeBg;
+    chromeText = contrastText(resolvedChromeBg);
+    chromeMuted = mix(resolvedChromeBg, chromeText, 0.55);
+  } else if (mode === "light") {
+    resolvedChromeBg = neutrals["--store-surface"] ?? "#FAF8F3";
+    chromeText = ink;
+    chromeMuted = neutrals["--store-muted"] ?? "#85816F";
+  } else if (mode === "ink-dark") {
+    resolvedChromeBg = darken(ink, 0.35);
+    chromeText = contrastText(resolvedChromeBg);
+    chromeMuted = mix(resolvedChromeBg, "#FFFFFF", 0.55);
+  } else {
+    resolvedChromeBg = darken(primary, 0.55);
+    chromeText = contrastText(resolvedChromeBg);
+    chromeMuted = mix(resolvedChromeBg, "#FFFFFF", 0.55);
+  }
+
+  return {
+    "--store-primary": primary,
+    "--store-primary-dark": darken(primary, 0.15),
+    "--store-primary-soft": lighten(primary, 0.88),
+    "--store-cta": cta,
+    "--store-cta-fg": contrastText(cta),
+    "--store-cta-dark": darken(cta, 0.15),
+    "--store-cta-soft": lighten(cta, 0.8),
+    "--store-chrome-bg": resolvedChromeBg,
+    "--store-chrome-text": chromeText,
+    "--store-chrome-muted": chromeMuted,
+    // divisores DENTRO do chrome (rodapé). Derivado do texto pra funcionar também em
+    // chrome claro — um branco fixo a 10% sumiria por completo lá.
+    "--store-chrome-line": mix(resolvedChromeBg, chromeText, 0.14),
+  };
+}

package/src/presets.js

@@ -0,0 +1,241 @@
+// Presets de ESTILO visual da loja: receita da home + tipografia + neutros + chrome +
+// radius + hero. O CLI sugere um (suggestPreset), o usuário confirma no select, e
+// applyPreset (theme.js) escreve tudo no projeto gerado. O agente de branding refina
+// depois no briefing (agents/PADROES.md documenta o repertório).
+//
+// Regras dos presets:
+//  - "essencial" é o default equilibrado (não mais "paridade com o visual histórico":
+//    header sem barra de busca e hero full-bleed, que é o que tira a cara de template).
+//  - Fontes: só famílias do Google Fonts com pesos 500-800 (o design usa font-extrabold).
+//  - Neutros: hex literais por preset (o CLI escreve nos tokens --store-* de globals.css).
+
+export const PRESETS = {
+  essencial: {
+    // dials do briefing (1-10) — variância de composição, intensidade de motion,
+    // densidade visual. O agente 15 ajusta conforme a marca; ver agents/PADROES.md.
+    dials: { variancia: 5, motion: 3, densidade: 6 },
+    label: "Essencial",
+    tagline: "layout completo e equilibrado, funciona pra qualquer loja",
+    fonts: {
+      sans: { fn: "Plus_Jakarta_Sans", weights: ["400", "500", "600", "700"] },
+      display: { fn: "Poppins", weights: ["500", "600", "700", "800"] },
+    },
+    neutrals: {
+      "--store-ink": "#18181B",
+      "--store-ink-2": "#3F3F46",
+      "--store-muted": "#71717A",
+      "--store-faint": "#A1A1AA",
+      "--store-bg": "#FAFAFA",
+      "--store-surface": "#FFFFFF",
+      "--store-surface-2": "#F4F4F5",
+      "--store-line": "#E4E4E7",
+      "--store-line-2": "#D4D4D8",
+      "--store-sale": "#DC2626",
+      "--store-sale-soft": "#FEE9E9",
+    },
+    chrome: "brand-dark",
+    chromeRecipe: { header: "equilibrado", footer: "colunas" },
+    radius: "0.875rem",
+    axes: {
+      "--section-gap": "52px", "--container-max": "1240px",
+      "--card-bg": "#ffffff", "--card-border": "1px solid var(--store-line)", "--card-shadow": "none",
+    },
+    // hero full-bleed: o banner em card arredondado é o maior "cara de template" que existe.
+    hero: "imagem-imersiva",
+    home: [
+      { section: "hero", variant: "imagem-imersiva", props: { imageDesktop: "/brand/hero-desktop.svg", imageMobile: "/brand/hero-mobile.svg", title: "Bem-vindo à nossa loja", subtitle: "Produtos escolhidos com cuidado, do nosso catálogo pra sua casa.", ctaLabel: "Ver destaques" } },
+      { section: "trust-bar" },
+      { section: "attributes-marquee" },
+      { section: "category-pills" },
+      { section: "combos-carousel" },
+      { section: "savings" },
+      { section: "benefits" },
+      { section: "media-cards" },
+      { section: "reviews", variant: "grid" },
+      { section: "ritual" },
+      { section: "founder-story" },
+      { section: "kits" },
+      { section: "spec-table" },
+      { section: "video-wall" },
+      { section: "trust-strip" },
+      { section: "newsletter", variant: "bloco" },
+    ],
+  },
+
+  promocional: {
+    // dials do briefing (1-10) — variância de composição, intensidade de motion,
+    // densidade visual. O agente 15 ajusta conforme a marca; ver agents/PADROES.md.
+    dials: { variancia: 6, motion: 4, densidade: 9 },
+    label: "Promocional",
+    tagline: "oferta em primeiro plano: kits, economia e urgência pra subir o ticket",
+    fonts: {
+      sans: { fn: "Barlow", weights: ["400", "500", "600", "700"] },
+      display: { fn: "Barlow_Condensed", weights: ["500", "600", "700", "800"] },
+    },
+    neutrals: {
+      "--store-ink": "#09090B",
+      "--store-ink-2": "#27272A",
+      "--store-muted": "#71717A",
+      "--store-faint": "#A1A1AA",
+      "--store-bg": "#FFFFFF",
+      "--store-surface": "#FAFAFA",
+      "--store-surface-2": "#F4F4F5",
+      "--store-line": "#E4E4E7",
+      "--store-line-2": "#D4D4D8",
+      "--store-sale": "#E11D48",
+      "--store-sale-soft": "#FFE4E9",
+    },
+    chrome: "brand-dark",
+    chromeRecipe: { header: "compacto", footer: "conversao" },
+    radius: "1.25rem",
+    axes: {
+      "--section-gap": "44px", "--container-max": "1240px",
+      "--card-bg": "#ffffff", "--card-border": "1px solid transparent", "--card-shadow": "0 8px 28px rgba(0,0,0,0.07)",
+    },
+    hero: "carousel",
+    home: [
+      { section: "hero", variant: "carousel", props: { banners: [
+        { imageDesktop: "/brand/hero-desktop.svg", imageMobile: "/brand/hero-mobile.svg", href: "#comprar" },
+        { imageDesktop: "/brand/hero-desktop.svg", imageMobile: "/brand/hero-mobile.svg", href: "#comprar" },
+        { imageDesktop: "/brand/hero-desktop.svg", imageMobile: "/brand/hero-mobile.svg" },
+      ] } },
+      { section: "attributes-marquee" },
+      { section: "purchase-hero" },
+      { section: "product-showcase", props: { ctaHref: "#comprar" } },
+      { section: "savings" },
+      { section: "combos-carousel" },
+      { section: "benefits" },
+      { section: "stats-grid" },
+      { section: "reviews-carousel" },
+      { section: "media-cards" },
+      { section: "comparison" },
+      { section: "kits" },
+      { section: "ritual", props: { ctaLabel: "Montar meu pedido" } },
+      { section: "social-row" },
+      { section: "trust-strip" },
+      { section: "newsletter", variant: "bloco" },
+    ],
+  },
+
+  editorial: {
+    // dials do briefing (1-10) — variância de composição, intensidade de motion,
+    // densidade visual. O agente 15 ajusta conforme a marca; ver agents/PADROES.md.
+    dials: { variancia: 7, motion: 5, densidade: 4 },
+    label: "Editorial",
+    tagline: "clima de clube e assinatura, com respiro e tipografia de revista",
+    fonts: {
+      sans: { fn: "Inter", weights: ["400", "500", "600", "700"] },
+      display: { fn: "Fraunces", weights: ["500", "600", "700", "800"] },
+    },
+    neutrals: {
+      "--store-ink": "#1C1917",
+      "--store-ink-2": "#44403C",
+      "--store-muted": "#78716C",
+      "--store-faint": "#A8A29E",
+      "--store-bg": "#FAFAF9",
+      "--store-surface": "#FFFFFF",
+      "--store-surface-2": "#F5F5F4",
+      "--store-line": "#E7E5E4",
+      "--store-line-2": "#D6D3D1",
+      "--store-sale": "#B91C1C",
+      "--store-sale-soft": "#FBE8E8",
+    },
+    chrome: "ink-dark",
+    chromeRecipe: { header: "centralizado", footer: "editorial" },
+    radius: "0.5rem",
+    axes: {
+      "--section-gap": "72px", "--container-max": "1080px",
+      "--card-bg": "var(--store-surface)", "--card-border": "1px solid transparent", "--card-shadow": "none",
+    },
+    hero: "split-editorial",
+    home: [
+      { section: "hero", variant: "split-editorial", props: { imageDesktop: "/brand/hero-desktop.svg", imageMobile: "/brand/hero-mobile.svg", title: "Feito com calma, entregue todo mês", subtitle: "Curadoria da nossa loja pra sua rotina. Conheça os destaques e, se fizer sentido, assine.", ctaLabel: "Ver destaques" } },
+      { section: "attributes-marquee" },
+      { section: "benefits" },
+      { section: "combos-carousel" },
+      { section: "founder-story" },
+      { section: "ritual" },
+      { section: "media-cards" },
+      { section: "reviews", variant: "faixa" },
+      { section: "quote-banner" },
+      { section: "kits" },
+      { section: "spec-table" },
+      { section: "social-row" },
+      { section: "newsletter", variant: "inline" },
+    ],
+  },
+
+  boutique: {
+    // dials do briefing (1-10) — variância de composição, intensidade de motion,
+    // densidade visual. O agente 15 ajusta conforme a marca; ver agents/PADROES.md.
+    dials: { variancia: 8, motion: 6, densidade: 2 },
+    label: "Boutique",
+    tagline: "minimal e premium: poucas seções, muito respiro, detalhes finos",
+    fonts: {
+      sans: { fn: "DM_Sans", weights: ["400", "500", "600", "700"] },
+      display: { fn: "Playfair_Display", weights: ["500", "600", "700", "800"] },
+    },
+    neutrals: {
+      "--store-ink": "#1A1A1F",
+      "--store-ink-2": "#3F3F49",
+      "--store-muted": "#71717D",
+      "--store-faint": "#A5A5B0",
+      "--store-bg": "#FBFBFC",
+      "--store-surface": "#FFFFFF",
+      "--store-surface-2": "#F4F4F6",
+      "--store-line": "#E8E8EC",
+      "--store-line-2": "#DCDCE2",
+      "--store-sale": "#A63D2F",
+      "--store-sale-soft": "#F6E7E3",
+    },
+    chrome: "ink-dark",
+    chromeRecipe: { header: "imersivo", footer: "minimal" },
+    radius: "0.25rem",
+    axes: {
+      "--section-gap": "88px", "--container-max": "1000px",
+      "--card-bg": "#ffffff", "--card-border": "1px solid var(--store-line-2)", "--card-shadow": "none",
+    },
+    // hero imersivo: é o par do header "imersivo" (a foto sobe por baixo dele e o header
+    // fica transparente). Sem foto boa da marca, troque na receita por "minimal-texto" —
+    // o header degrada pra sólido sozinho.
+    hero: "imagem-imersiva",
+    home: [
+      { section: "hero", variant: "imagem-imersiva", props: { title: "Peças escolhidas a dedo", subtitle: "Um catálogo enxuto, pensado pra durar. Conheça os destaques da casa.", ctaLabel: "Ver destaques" } },
+      { section: "combos-carousel" },
+      { section: "benefits" },
+      { section: "media-cards" },
+      { section: "quote-banner" },
+      { section: "reviews", variant: "faixa" },
+      { section: "founder-story" },
+      { section: "kits" },
+      { section: "spec-table" },
+      { section: "newsletter", variant: "inline" },
+    ],
+  },
+};
+
+export const PRESET_NAMES = Object.keys(PRESETS);
+
+// Heurística de sugestão: soma pontos por palavra-chave (sem acento, lowercase) no
+// objetivo/site/instagram. Empate: promocional > editorial > boutique. Zero: essencial.
+const KEYWORDS = {
+  promocional: ["ticket", "upsell", "kit", "combo", "oferta", "promoc", "desconto", "atacado", "black", "volume", "venda", "conversao", "barato"],
+  editorial: ["assinatura", "recorren", "clube", "curadoria", "conteudo", "comunidade", "blog", "receita", "ritual", "mensal"],
+  boutique: ["premium", "minimal", "luxo", "sofistic", "estetic", "design", "autoral", "exclusiv", "boutique", "atelie", "artesanal", "fino"],
+};
+
+function normalize(s) {
+  return (s ?? "").toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
+}
+
+/** Sugere um preset a partir do que o usuário contou no formulário. Nunca lança. */
+export function suggestPreset({ objetivo, site, instagram } = {}) {
+  const haystack = [objetivo, site, instagram].map(normalize).join(" ");
+  const scores = {};
+  for (const [preset, words] of Object.entries(KEYWORDS)) {
+    scores[preset] = words.reduce((acc, w) => acc + (haystack.includes(w) ? 1 : 0), 0);
+  }
+  const order = ["promocional", "editorial", "boutique"]; // desempate
+  const best = order.reduce((a, b) => (scores[b] > scores[a] ? b : a), "promocional");
+  return scores[best] > 0 ? best : "essencial";
+}

package/src/theme.js

@@ -0,0 +1,253 @@
+import fs from "node:fs";
+import path from "node:path";
+import { PRESETS } from "./presets.js";
+
+/**
+ * Substitui os valores dos tokens `--store-*` (e `--radius`) no bloco "CONFIGURE" de
+ * app/globals.css. Só troca o valor depois de `:`, nunca a chave nem o resto do arquivo.
+ * Aceita hex e valores rem (radius).
+ *
+ * A regex é ANCORADA no início da linha (`^\s*`) e proibida de atravessar quebra de linha
+ * (`[^;\n]`) por um motivo concreto: sem isso, uma MENÇÃO ao token dentro de um comentário
+ * (ex.: "o token --motion: 0 desliga tudo") casava primeiro, e o `[^;]+` engolia tudo até o
+ * `;` seguinte — várias linhas adiante, levando junto o fechamento do comentário e o
+ * `@import` do Tailwind. O CSS saía quebrado e só o build acusava, com erro que não apontava
+ * pra causa. Declaração de token vive sempre sozinha na linha; menção em prosa, não.
+ */
+export function applyBrandTokens(targetDir, tokens) {
+  const cssPath = path.join(targetDir, "app", "globals.css");
+  let css = fs.readFileSync(cssPath, "utf8");
+
+  for (const [name, value] of Object.entries(tokens)) {
+    const re = new RegExp(`^(\\s*${name}:\\s*)[^;\\n]+;`, "m");
+    if (!re.test(css)) {
+      throw new Error(`[create-unbox-store] token ${name} não encontrado em app/globals.css: a foundation pode ter mudado.`);
+    }
+    css = css.replace(re, `$1${value};`);
+  }
+
+  fs.writeFileSync(cssPath, css);
+}
+
+/**
+ * Reescreve o bloco UNBOX-FONTS de app/layout.tsx com o par tipográfico do preset.
+ * next/font exige declaração estática top-level — por isso replace de bloco marcado.
+ */
+export function applyFonts(targetDir, preset) {
+  const layoutPath = path.join(targetDir, "app", "layout.tsx");
+  let src = fs.readFileSync(layoutPath, "utf8");
+  const re = /\/\/ UNBOX-FONTS-BEGIN[\s\S]*?\/\/ UNBOX-FONTS-END/;
+  if (!re.test(src)) {
+    throw new Error("[create-unbox-store] markers UNBOX-FONTS não encontrados em app/layout.tsx: a foundation pode ter mudado.");
+  }
+  const { sans, display } = preset.fonts;
+  const families = [...new Set(["Geist_Mono", sans.fn, display.fn])].sort();
+  const block = [
+    "// UNBOX-FONTS-BEGIN (bloco reescrito pelo create-unbox-store conforme o estilo escolhido; não renomear os markers)",
+    `import { ${families.join(", ")} } from "next/font/google";`,
+    `const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });`,
+    `const sans = ${sans.fn}({ variable: "--font-sans", subsets: ["latin"], weight: [${sans.weights.map((w) => `"${w}"`).join(", ")}], display: "swap" });`,
+    `const displayFont = ${display.fn}({ variable: "--font-display", subsets: ["latin"], weight: [${display.weights.map((w) => `"${w}"`).join(", ")}], display: "swap" });`,
+    "// UNBOX-FONTS-END",
+  ].join("\n");
+  fs.writeFileSync(layoutPath, src.replace(re, block));
+}
+
+/** Escreve a receita da home (components/home/home-recipe.ts) conforme o preset. */
+/** Escreve components/chrome/chrome-recipe.ts — qual header e qual rodapé a loja usa.
+ *  Mesma mecânica do applyHomeRecipe: reescreve o arquivo inteiro e falha alto se ele sumiu. */
+export function applyChromeRecipe(targetDir, preset) {
+  const recipePath = path.join(targetDir, "components", "chrome", "chrome-recipe.ts");
+  if (!fs.existsSync(recipePath)) {
+    throw new Error("[create-unbox-store] components/chrome/chrome-recipe.ts não encontrado: a foundation pode ter mudado.");
+  }
+  const recipe = preset.chromeRecipe ?? { header: "classico", footer: "colunas" };
+  const content = `// ═══════════════════════════════════════════════════════════════════════════
+// RECEITA DO CHROME: qual header e qual rodapé esta loja usa.
+// Escrita pelo create-unbox-store conforme o ESTILO escolhido no setup; editada
+// pelo agente de branding no briefing (é AQUI que o chrome muda, não reescreva
+// o JSX de uma variante; catálogo em agents/PADROES.md).
+// \`npm run typecheck\` acusa header/rodapé inexistente.
+// ═══════════════════════════════════════════════════════════════════════════
+import type { ChromeRecipe } from "@/components/chrome/registry";
+
+export const chromeRecipe: ChromeRecipe = ${JSON.stringify(recipe, null, 2)};
+`;
+  fs.writeFileSync(recipePath, content);
+}
+
+export function applyHomeRecipe(targetDir, preset) {
+  const recipePath = path.join(targetDir, "components", "home", "home-recipe.ts");
+  if (!fs.existsSync(recipePath)) {
+    throw new Error("[create-unbox-store] components/home/home-recipe.ts não encontrado: a foundation pode ter mudado.");
+  }
+  const body = JSON.stringify(preset.home, null, 2);
+  const content = `// ═══════════════════════════════════════════════════════════════════════════
+// RECEITA DA HOME: a ordem, as variantes e as props das seções.
+// Escrita pelo create-unbox-store conforme o ESTILO escolhido no setup; editada
+// pelo agente de branding no briefing (é AQUI que o layout muda, não reescreva
+// o JSX das seções; catálogo de seções/variantes em agents/PADROES.md).
+// \`npm run typecheck\` acusa seção/variante inexistente.
+// ═══════════════════════════════════════════════════════════════════════════
+import type { HomeRecipe } from "@/components/home/sections/registry";
+
+export const homeRecipe: HomeRecipe = ${body};
+`;
+  fs.writeFileSync(recipePath, content);
+}
+
+// Cores DEFAULT usadas nos SVGs de hero placeholder — trocadas pelas da marca no scaffold.
+// Sentinelas NEUTRAS (= os valores default da paleta), únicas entre si: o template cru já
+// renderiza limpo e o recolorizador segue mapeando hex→token no scaffold.
+const HERO_SVG_COLOR_SLOTS = {
+  "#18181B": "--store-chrome-bg",
+  "#3F3F46": "--store-ink-2",
+  "#27272A": "--store-primary",
+  "#D97706": "--store-cta",
+  "#F1F1F3": "--store-primary-soft",
+  "#FCFCFD": "--store-surface",
+  "#F4F4F5": "--store-surface-2",
+};
+
+/** Recolore um SVG trocando as cores default pelos valores da marca. */
+function recolorSvg(svg, palette) {
+  for (const [hex, token] of Object.entries(HERO_SVG_COLOR_SLOTS)) {
+    const value = palette[token];
+    if (value) svg = svg.replaceAll(hex, value);
+  }
+  return svg;
+}
+
+/**
+ * Escolhe o par de heros placeholder do preset, recolore com a marca e grava como
+ * public/brand/hero-{desktop,mobile}.svg. Remove a pasta heros/ do projeto gerado.
+ * Também recolore TODOS os placeholders de mídia em public/brand/ph/ (fotos, posters,
+ * avatares usados pelas seções da biblioteca) — a loja nasce com a paleta da marca.
+ */
+export function applyHeroAssets(targetDir, presetName, tokens, neutrals) {
+  const herosDir = path.join(targetDir, "public", "brand", "heros");
+  const palette = { ...neutrals, ...tokens };
+  for (const kind of ["desktop", "mobile"]) {
+    const src = path.join(herosDir, `${presetName}-${kind}.svg`);
+    if (!fs.existsSync(src)) {
+      throw new Error(`[create-unbox-store] hero placeholder ${presetName}-${kind}.svg não encontrado: a foundation pode ter mudado.`);
+    }
+    const svg = recolorSvg(fs.readFileSync(src, "utf8"), palette);
+    fs.writeFileSync(path.join(targetDir, "public", "brand", `hero-${kind}.svg`), svg);
+  }
+  fs.rmSync(herosDir, { recursive: true, force: true });
+
+  const phDir = path.join(targetDir, "public", "brand", "ph");
+  if (fs.existsSync(phDir)) {
+    for (const f of fs.readdirSync(phDir)) {
+      if (!f.endsWith(".svg")) continue;
+      const p = path.join(phDir, f);
+      fs.writeFileSync(p, recolorSvg(fs.readFileSync(p, "utf8"), palette));
+    }
+  }
+}
+
+/** Aplica o preset inteiro: tokens (cores+neutros+radius), fontes, receita e heros. */
+export function applyPreset(targetDir, presetName, brandTokens) {
+  const preset = PRESETS[presetName];
+  if (!preset) throw new Error(`[create-unbox-store] estilo desconhecido: ${presetName}`);
+  // --motion vem do dial: 0 desliga as animações, 1 é o padrão, acima disso amplifica.
+  const motion = preset.dials?.motion != null ? (preset.dials.motion / 5).toFixed(2) : "1";
+  applyBrandTokens(targetDir, {
+    ...brandTokens, ...preset.neutrals, ...(preset.axes ?? {}),
+    "--radius": preset.radius, "--motion": motion,
+  });
+  applyFonts(targetDir, preset);
+  applyHomeRecipe(targetDir, preset);
+  applyChromeRecipe(targetDir, preset);
+  applyHeroAssets(targetDir, presetName, brandTokens, preset.neutrals);
+  // manifest.ts e opengraph-image.tsx: os DOIS lugares onde a cor precisa ser hex literal, porque
+  // nem o manifest do PWA nem o satori (ImageResponse) leem variavel de CSS. Sem reescrever aqui,
+  // a loja aplica a paleta da marca em tudo e mesmo assim instala no celular e compartilha no
+  // WhatsApp com a cor default da foundation.
+  const tokens = { ...preset.neutrals, ...brandTokens };
+  const chromeBg = tokens["--store-chrome-bg"];
+  const manifestPath = path.join(targetDir, "app", "manifest.ts");
+  if (chromeBg && fs.existsSync(manifestPath)) {
+    const content = fs.readFileSync(manifestPath, "utf8");
+    fs.writeFileSync(manifestPath, content.replace(/theme_color:\s*"[^"]*"/, `theme_color: "${chromeBg}"`));
+  }
+  const ogPath = path.join(targetDir, "app", "opengraph-image.tsx");
+  const ogBg = tokens["--store-primary"];
+  const ogFg = tokens["--store-chrome-text"] || "#FFFFFF";
+  if (ogBg && fs.existsSync(ogPath)) {
+    let og = fs.readFileSync(ogPath, "utf8");
+    og = og.replace(/const PRIMARY = "[^"]*";/, `const PRIMARY = "${ogBg}";`);
+    og = og.replace(/const PRIMARY_FG = "[^"]*";/, `const PRIMARY_FG = "${ogFg}";`);
+    fs.writeFileSync(ogPath, og);
+  }
+  if (preset.chrome === "light") {
+    fs.copyFileSync(
+      path.join(targetDir, "public", "brand", "logo.svg"),
+      path.join(targetDir, "public", "brand", "logo-chrome.svg"),
+    );
+    // Selo "Powered by Unbox": em rodapé CLARO a variante ativa é a com fundo preto
+    // (regra da Unbox). O default do template (transparente neon) serve os chromes escuros.
+    fs.copyFileSync(
+      path.join(targetDir, "public", "unbox", "powered-by-fundo-preto.png"),
+      path.join(targetDir, "public", "unbox", "powered-by.png"),
+    );
+  }
+}
+
+/** Troca o fallback "Minha Loja" pelo nome de exibição escolhido (header, footer e metadata). */
+export function applyStoreName(targetDir, displayName) {
+  if (!displayName) return;
+  // Literal de string TS: escapa barra e aspas. E TODA substituição usa função (não string)
+  // — com string, um nome com `$&` ou `$'` vira padrão de replace e corrompe o TSX.
+  const safe = displayName.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  const lit = () => `?? "${safe}"`;
+  const nome = () => safe;
+  const files = [
+    path.join(targetDir, "components", "site-header.tsx"),
+    path.join(targetDir, "components", "site-footer.tsx"),
+  ];
+  for (const f of files) {
+    if (!fs.existsSync(f)) continue;
+    const content = fs.readFileSync(f, "utf8");
+    fs.writeFileSync(f, content.replaceAll('?? "Minha Loja"', lit));
+  }
+  // metadata do app/layout.tsx (título da aba, template e OpenGraph siteName) e da PDP,
+  // que repete siteName no seu próprio openGraph — o App Router substitui o objeto
+  // openGraph inteiro do layout pai, não faz merge, então o campo precisa existir lá também.
+  for (const rel of [["app", "layout.tsx"], ["app", "(loja)", "produto", "[productSlug]", "page.tsx"], ["app", "(loja)", "page.tsx"], ["app", "opengraph-image.tsx"]]) {
+    const p = path.join(targetDir, ...rel);
+    if (!fs.existsSync(p)) continue;
+    fs.writeFileSync(p, fs.readFileSync(p, "utf8").replaceAll("Minha Loja", nome));
+  }
+  // app/manifest.ts (nome do PWA na tela inicial — some com o "Minha Loja"/"Loja" placeholder)
+  const manifestPath = path.join(targetDir, "app", "manifest.ts");
+  if (fs.existsSync(manifestPath)) {
+    const content = fs.readFileSync(manifestPath, "utf8");
+    fs.writeFileSync(manifestPath, content.replaceAll('?? "Minha Loja"', lit).replaceAll('?? "Loja"', lit));
+  }
+  // Porta de preview: o slug vira nome do cookie e título do negócio no Pipedrive
+  // ("<slug> - Nome do Lead"). Sem acento/espaço pra viver em nome de cookie.
+  const slug = displayName
+    .normalize("NFD").replace(/[̀-ͯ]/g, "")
+    .toLowerCase().replace(/[^a-z0-9]+/g, "").slice(0, 30) || "loja";
+  for (const rel of [["middleware.ts"], ["app", "api", "acesso", "route.ts"]]) {
+    const p = path.join(targetDir, ...rel);
+    if (!fs.existsSync(p)) continue;
+    const content = fs.readFileSync(p, "utf8");
+    fs.writeFileSync(p, content.replaceAll('"minhaloja"', `"${slug}"`));
+  }
+  // Editor da Unbox: o MESMO slug vira o STORE_SLUG de lib/editable/config.ts (a foundation traz o
+  // marcador __STORE_SLUG__; é por ele que a loja pede o conteúdo publicado ao editor). Tem de ser
+  // IGUAL ao `slug` da entrada da loja no shops.json do editor, que segue esta mesma derivação
+  // (minúsculas, sem acento, só letras e números). Marcador ausente é erro, não silêncio: uma loja
+  // com "__STORE_SLUG__" no ar pede o publicado de uma loja que não existe e nunca muda.
+  const configEditavel = path.join(targetDir, "lib", "editable", "config.ts");
+  if (fs.existsSync(configEditavel)) {
+    const content = fs.readFileSync(configEditavel, "utf8");
+    if (!content.includes("__STORE_SLUG__")) {
+      throw new Error("[create-unbox-store] marcador __STORE_SLUG__ não encontrado em lib/editable/config.ts: a foundation do editor pode ter mudado.");
+    }
+    fs.writeFileSync(configEditavel, content.replaceAll("__STORE_SLUG__", () => slug));
+  }
+}