primocode 9.8.0-beta.16 → 9.8.0-beta.17

package/README.md

@@ -1,4 +1,4 @@
-# PrimoCode v9.8.0-beta.16
+# PrimoCode v9.8.0-beta.17
 
 Agente de engenharia brasileiro para o terminal, no estilo Claude Code.
 Cria arquivos de verdade, roda comandos, **controla o navegador e o desktop** —
@@ -9,7 +9,7 @@ OpenRouter, e cada apelido (`top`/`main`/`fast`) é uma **corrente**: se um mode
 está no limite de pedidos, o próximo atende. Você não vê o erro, e não paga nada.
 
 ```
- ▐▛███▜▌   Primo Code v9.8.0-beta.16
+ ▐▛███▜▌   Primo Code v9.8.0-beta.17
 ▝▜█████▛▘  Bem-vindo de volta, Joel
   ▘▘ ▝▝    ~/primocode  · /dir <pasta> muda
 ```

package/lib/estudio/assets.js

@@ -120,7 +120,41 @@ const COLECOES = [
  * O SVG vem com `currentColor` no traço para a cor ser decidida na cena — um
  * ícone com cor cravada no arquivo obriga a baixar de novo para mudar de cor.
  */
+/* ── EMOJI 3D ─────────────────────────────────────────────────────────
+ * "Os emojis, quero emojis da Apple." (25/09/2026) Os da Apple têm direito
+ * autoral e não podem ir num vídeo publicado; os Fluent 3D da Microsoft têm
+ * licença MIT e o mesmo visual brilhante e com volume. "fluent-3d:robot" é o
+ * PNG do repositório oficial (pelo jsDelivr), embutido como <img> — o resto
+ * do render trata igual a um ícone SVG. Sem o 3D, cai no emoji plano. */
+const cache3d = new Map();
+async function emoji3d(nome, { pasta = null } = {}) {
+    if (cache3d.has(nome)) return cache3d.get(nome);
+    const palavras = nome.split('-');
+    const pastas = [
+        palavras.join(' ').replace(/^./, (c) => c.toUpperCase()),
+        palavras.map((w) => w[0].toUpperCase() + w.slice(1)).join(' '),
+    ];
+    for (const pastaGit of pastas) {
+        const url = `https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@main/assets/${encodeURIComponent(pastaGit)}/3D/${palavras.join('_')}_3d.png`;
+        try {
+            const png = await pegar(url, { binario: true });
+            if (png && png.length > 1000 && png[0] === 0x89) {
+                if (pasta) guardar(path.join(pasta, 'midia', 'icones', `fluent-3d-${nome}.png`), png, { licenca: 'MIT (Microsoft Fluent UI Emoji)', origem: url });
+                const r = { ok: true, nome: 'fluent-3d:' + nome,
+                    svg: `<img src="data:image/png;base64,${png.toString('base64')}" style="width:100%;height:100%;object-fit:contain;display:block" />` };
+                cache3d.set(nome, r);
+                return r;
+            }
+        } catch { /* a próxima grafia */ }
+    }
+    const plano = await icone('fluent-emoji-flat:' + nome, { pasta });
+    const r = plano.ok ? { ...plano, nome: 'fluent-3d:' + nome } : plano;
+    cache3d.set(nome, r);
+    return r;
+}
+
 async function icone(nome, { pasta = null } = {}) {
+    if (/^fluent-3d:/i.test(String(nome))) return emoji3d(String(nome).split(':')[1], { pasta });
     const m = String(nome || '').match(/^([a-z0-9-]+):([a-z0-9-]+)$/i);
     if (!m) return { ok: false, error: 'o ícone é "coleção:nome", como "lucide:zap"' };
     const url = `https://api.iconify.design/${m[1]}/${m[2]}.svg?color=currentColor`;

package/lib/estudio/composicao.js

@@ -64,7 +64,8 @@ function paleta(marca = {}) {
 /* ── a letra que cabe ─────────────────────────────────────────────────────
  * Largura média do caractere em "em" por família. Não é exata — é o
  * bastante para escolher o maior tamanho que cabe em N linhas, com folga. */
-const LARGURA = { condensada: 0.43, display: 0.56, texto: 0.52, serifa: 0.5 };
+// Com folga: medido em 25/09, 0,52 deixava "Fundadores" quebrar no meio no card.
+const LARGURA = { condensada: 0.46, display: 0.6, texto: 0.58, serifa: 0.54 };
 const FAMILIA_TIPO = (f) => (/condensed|narrow|anton|oswald|bebas|teko|league gothic/i.test(f) ? 'condensada'
     : /serif|fraunces|playfair|garamond|lora|newsreader|spectral|baskerville|dm serif/i.test(f) ? 'serifa'
         : /black|bricolage|archivo|sora|grotesk|syne|unbounded/i.test(f) ? 'display' : 'texto');
@@ -183,7 +184,7 @@ function comporRoteiro({ roteiro, modo = 'video', largura = 1920, altura = 1080,
         const fotoFundo = fundos[i];
         if (fotoFundo && p.tipo !== 'imagem') {
             const ehV = fotoFundo.tipo === 'video';
-            els.push({ tipo: ehV ? 'video' : 'imagem', src: fotoFundo.src, ...(ehV ? { volume: 0 } : {}), x: 0, y: 0, largura: '100%', altura: '100%', ajuste: 'cover',
+            els.push({ tipo: ehV ? 'video' : 'imagem', src: fotoFundo.src, ...(ehV ? { volume: 0 } : {}), x: 0, y: 0, largura: '100%', altura: '100%', ajuste: 'cover', foco: 'center 28%',
                 anima: { escala: [{ t: 0, v: variante ? 1.14 : 1.02 }, { t: dur, v: variante ? 1.02 : 1.14, e: 'suave' }] } });
             els.push({ tipo: 'forma', forma: 'retangulo', x: 0, y: 0, largura: '100%', altura: '100%',
                 fundo: { tipo: 'gradiente', cores: [alfa(cor.fundo, 0.93), alfa(cor.fundo, 0.72), alfa(cor.fundo, 0.55)], angulo: 90 } });
@@ -192,7 +193,8 @@ function comporRoteiro({ roteiro, modo = 'video', largura = 1920, altura = 1080,
             const canto = [[W - R * 0.55, -R * 0.45], [-R * 0.45, H - R * 0.5], [W - R * 0.4, H - R * 0.55], [-R * 0.5, -R * 0.4]][i % 4];
             els.push({
                 tipo: 'forma', forma: 'circulo', largura: R, altura: R, x: Math.round(canto[0]), y: Math.round(canto[1]),
-                cor: p.tipo === 'numero' ? cor.sobreDestaque : cor.destaque, opacidade: p.tipo === 'numero' ? 0.12 : (cor.escuro ? 0.22 : 0.16),
+                // O brilho alterna entre o destaque e a cor de apoio: as duas cores da marca aparecem.
+                cor: p.tipo === 'numero' ? cor.sobreDestaque : (variante && marca.cores && marca.cores.apoio ? cor.apoio : cor.destaque), opacidade: p.tipo === 'numero' ? 0.12 : (cor.escuro ? 0.26 : 0.16),
                 anima: {
                     desfoque: [{ t: 0, v: Math.round(R * 0.22) }],
                     x: [{ t: 0, v: 0 }, { t: dur, v: variante ? 60 : -60, e: 'suave' }],
@@ -293,7 +295,7 @@ function comporRoteiro({ roteiro, modo = 'video', largura = 1920, altura = 1080,
                    vazia embaixo. */
                 const fT = p.titulo ? caber(p.titulo, { largura: W0, linhas: 2, max: H * 0.1, fonte: F.titulo }) : { tamanho: 0, linhas: 0 };
                 const hTit = fT.tamanho * 1.04 * fT.linhas;
-                const hCard0 = colunas > 1 ? (p.tipo === 'passos' ? H * 0.26 : H * 0.44) : H * 0.14;
+                const hCard0 = colunas > 1 ? (p.tipo === 'passos' ? H * 0.26 : H * 0.44) : H * (deitado ? 0.14 : 0.13);
                 const hItens = colunas > 1 ? hCard0 : n * hCard0 + (n - 1) * gap;
                 const bloco = hTit + (hTit ? H * 0.07 : 0) + hItens;
                 const yTit = Math.max(M, (H - bloco) / 2);
@@ -301,6 +303,23 @@ function comporRoteiro({ roteiro, modo = 'video', largura = 1920, altura = 1080,
                 const topo = yTit + hTit + (hTit ? H * 0.07 : 0);
                 const hCard = Math.min(hCard0, colunas > 1 ? H - topo - M : (H - topo - M - gap * (n - 1)) / n);
                 const dur0 = vid ? Math.max(1, (tp.ate || dur) - (tp.de || 0)) : 1;
+                /* Um tamanho de letra para TODOS os itens: o do mais apertado. Cada
+                   item com o seu tamanho deixava um card com a letra maior que os
+                   outros, e esse texto saía do card (medido em 25/09). */
+                const padG = Math.round(Math.min(wCard, hCard) * 0.14);
+                const tamIG = Math.round(Math.min(hCard * (colunas > 1 ? 0.28 : 0.5), H * 0.09));
+                const lwG = colunas > 1 ? wCard - 2 * padG : wCard - (tamIG + 3 * padG);
+                // No vertical a linha é estreita: 3 linhas por item, para a letra caber grande.
+                const linhasG = colunas > 1 ? 4 : (deitado ? 2 : 3);
+                const hTexto = colunas > 1 ? hCard - (padG * 1.8 + tamIG + padG) : hCard - padG;
+                const maxItem = deitado ? Math.min(H * 0.05, hCard * 0.3) : Math.min(W * 0.062, hCard * 0.26);
+                const fits = itens.map((it) => caber(it.texto, { largura: lwG, linhas: linhasG, max: maxItem, fonte: F.texto }));
+                let tamItens = Math.min(...fits.map((f) => f.tamanho));
+                // Só na lista o texto mora DENTRO do card: ali a altura também manda.
+                if (p.tipo === 'lista') {
+                    const linhasReais = Math.max(...itens.map((it) => caber(it.texto, { largura: lwG, linhas: linhasG, max: tamItens, min: tamItens, fonte: F.texto }).linhas));
+                    tamItens = Math.min(tamItens, Math.floor(hTexto / (1.2 * linhasReais)));
+                }
                 itens.forEach((it, k) => {
                     const cx = colunas > 1 ? M + k * (wCard + gap) : M;
                     const cy = colunas > 1 ? topo : topo + k * (hCard + gap);
@@ -327,7 +346,8 @@ function comporRoteiro({ roteiro, modo = 'video', largura = 1920, altura = 1080,
                     const tx = colunas > 1 ? cx + pad : cx + pad + tamI + pad;
                     const ty = colunas > 1 ? cy + pad + tamI + pad * 0.8 : cy + hCard / 2;
                     const lw = colunas > 1 ? wCard - 2 * pad : wCard - (tamI + 3 * pad);
-                    const fit = caber(it.texto, { largura: lw, linhas: colunas > 1 ? 4 : 2, max: Math.min(H * 0.05, hCard * 0.3), fonte: F.texto });
+                    const fit0 = caber(it.texto, { largura: lw, linhas: linhasG, max: tamItens, min: Math.min(18, tamItens), fonte: F.texto });
+                    const fit = { tamanho: Math.min(fit0.tamanho, tamItens), linhas: fit0.linhas };
                     els.push({
                         tipo: 'texto', texto: it.texto, fonte: F.texto, peso: 650, tamanho: fit.tamanho, cor: tinta, entrelinha: 1.2,
                         x: Math.round(tx), y: Math.round(colunas > 1 ? ty : ty - fit.tamanho * 1.2 * fit.linhas / 2), largura: Math.round(lw), anima: entra,
@@ -365,13 +385,19 @@ function comporRoteiro({ roteiro, modo = 'video', largura = 1920, altura = 1080,
                 const src = m && typeof m === 'object' ? m.src : m;
                 if (src) {
                     const ehVideo = m && typeof m === 'object' && m.tipo === 'video';
-                    els.push({ tipo: ehVideo ? 'video' : 'imagem', src, ...(ehVideo ? { volume: 0 } : {}), x: 0, y: 0, largura: '100%', altura: '100%', ajuste: 'cover', anima: { escala: [{ t: 0, v: 1.12 }, { t: dur, v: 1, e: 'suave' }] } });
+                    // O enquadramento puxa para cima: é onde ficam os rostos.
+                    els.push({ tipo: ehVideo ? 'video' : 'imagem', src, ...(ehVideo ? { volume: 0 } : {}), x: 0, y: 0, largura: '100%', altura: '100%', ajuste: 'cover', foco: 'center 28%', anima: { escala: [{ t: 0, v: 1.12 }, { t: dur, v: 1, e: 'suave' }] } });
                     els.push({ tipo: 'forma', forma: 'retangulo', x: 0, y: 0, largura: '100%', altura: '100%', fundo: { tipo: 'gradiente', cores: ['rgba(0,0,0,0)', 'rgba(0,0,0,0.25)', 'rgba(0,0,0,0.85)'], angulo: 180 } });
                 }
-                const larg = W0 * 0.8;
-                const fit = caber(p.titulo || '', { largura: larg, linhas: 2, max: H * 0.1, fonte: F.titulo });
+                const larg = W0 * (deitado ? 0.8 : 1);
+                const fit = caber(p.titulo || '', { largura: larg, linhas: 2, max: H * (deitado ? 0.1 : 0.06), fonte: F.titulo });
                 const hT = fit.tamanho * 1.04 * fit.linhas;
-                const yT = H - M - hT - (p.sub ? H * 0.08 : 0);
+                /* Vídeo da marca (depoimento, bastidor) costuma ter o nome da
+                   pessoa gravado embaixo: o título vai para o alto, com o véu
+                   de cima, para não escrever por cima dele. */
+                const noTopo = Boolean(m && typeof m === 'object' && m.tipo === 'video');
+                if (noTopo) els.push({ tipo: 'forma', forma: 'retangulo', x: 0, y: 0, largura: '100%', altura: '100%', fundo: { tipo: 'gradiente', cores: ['rgba(0,0,0,0.8)', 'rgba(0,0,0,0.2)', 'rgba(0,0,0,0)'], angulo: 180 } });
+                const yT = noTopo ? M * 1.2 : H - M - hT - (p.sub ? H * 0.08 : 0);
                 if (p.titulo) titulo(p.titulo, { y: yT, larg, max: fit.tamanho, cor: '#FFFFFF', de: 0.3 });
                 if (p.sub) linhaFina(p.sub, { y: yT + hT + H * 0.02, larg, c: 'rgba(255,255,255,0.8)', de: 0.7 });
                 break;

package/lib/estudio/edicao.js

@@ -116,7 +116,7 @@ function iconeDe(palavra) {
     if (!w || VAZIAS.has(w)) return null;
     for (const [raizes, nome] of ICONES) {
         for (const r of raizes) {
-            if (r.length <= 3 ? w === r : w.startsWith(r)) return 'fluent-emoji-flat:' + nome;
+            if (r.length <= 3 ? w === r : w.startsWith(r)) return 'fluent-3d:' + nome;
         }
     }
     return null;

package/lib/estudio/index.js

@@ -306,6 +306,8 @@ async function ferramentaPlano(args) {
             return { ok: false, error: 'o roteiro virou um plano com problemas (defeito do PrimoCode, não seu).', problemas: conferida.problemas.slice(0, 12) };
         }
         projeto.salvarPlano(args.id, r.plano, args.motivo || 'montado do roteiro');
+        // O roteiro fica guardado: ajustar uma frase é mandar o roteiro de novo, não reescrever tudo.
+        try { fs.writeFileSync(path.join(p.pasta, 'roteiro.json'), JSON.stringify(args.roteiro, null, 2)); } catch { /* segue */ }
         projeto.salvar(args.id, { duracao: conferida.duracao });
         return {
             ok: true, duracao: conferida.duracao, ...r.resumo, resumo: plano.resumo(r.plano),
@@ -959,6 +961,36 @@ async function ferramentaRender(args, ctx = {}) {
 
 // ── estudio_site ─────────────────────────────────────────────────────────
 
+/* A PALETA INTEIRA do site, não só a primeira cor. O fundo é o neutro
+   escuro que o site mais usa (#121218 na Paris Group); o destaque é a cor da
+   marca que mais aparece sobre ele (o laranja, não o azul escuro que some); o
+   apoio é a seguinte. A fonte serifada, quando existe, vai para citação. */
+function paletaDoSite(r) {
+    const hexRgb = (h) => { const n = parseInt(String(h).slice(1).padEnd(6, '0').slice(0, 6), 16); return [n >> 16, (n >> 8) & 255, n & 255]; };
+    const luz = (h) => { const [a, b, c] = hexRgb(h); return (0.299 * a + 0.587 * b + 0.114 * c) / 255; };
+    const sat = (h) => { const v = hexRgb(h); return (Math.max(...v) - Math.min(...v)) / 255; };
+    const neutras = ((r.cores && (r.cores.neutras || r.cores.fundo)) || []).map((x) => x.cor || x).filter((c) => /^#/.test(c));
+    const fundo = neutras.find((c) => luz(c) < 0.15 && luz(c) > 0.02) || neutras.find((c) => luz(c) < 0.2) || undefined;
+    const base = fundo || '#121218';
+    const marca = ((r.cores && r.cores.marca) || []).map((x) => x.cor).filter(Boolean);
+    const nota = (c) => sat(c) * 1.2 + Math.abs(luz(c) - luz(base));
+    const ordenadas = [...marca].sort((a, b) => nota(b) - nota(a));
+    const destaque = ordenadas[0];
+    // O apoio é OUTRA cor, de outro matiz: dois laranjas não fazem paleta.
+    const matiz = (h) => { const [a, b, c] = hexRgb(h).map((v) => v / 255); const mx = Math.max(a, b, c), mn = Math.min(a, b, c), d = mx - mn;
+        if (!d) return 0; const x = mx === a ? ((b - c) / d) % 6 : mx === b ? (c - a) / d + 2 : (a - b) / d + 4; return (x * 60 + 360) % 360; };
+    const longe = (a, b) => { const d = Math.abs(matiz(a) - matiz(b)); return Math.min(d, 360 - d) > 60; };
+    const apoio = ordenadas.find((c) => c !== destaque && longe(c, destaque) && sat(c) > 0.3) || ordenadas[1];
+    const fontes = ((r.fontes && r.fontes.declaradas) || []).map((x) => x.fonte).filter((f) => !/mono|menlo|courier|system|arial|helvetica/i.test(f));
+    return {
+        cores: { ...(fundo ? { fundo } : {}), ...(destaque ? { destaque } : {}), ...(apoio ? { apoio } : {}) },
+        fontes: {
+            ...(fontes[0] ? { titulo: fontes.find((f) => !/serif/i.test(f) || /sans/i.test(f)) || fontes[0], texto: fontes.find((f) => !/serif/i.test(f) || /sans/i.test(f)) || fontes[0] } : {}),
+            ...(fontes.find((f) => /serif/i.test(f) && !/sans/i.test(f)) ? { serifa: fontes.find((f) => /serif/i.test(f) && !/sans/i.test(f)) } : {}),
+        },
+    };
+}
+
 async function ferramentaSite(args) {
     let alvo = String(args.url || args.site || '').trim();
 
@@ -989,10 +1021,7 @@ async function ferramentaSite(args) {
     const html = r.html;
     delete r.html;                          // o HTML cru não vai para o modelo
     if (r.ok) {
-        const marcaLida = {
-            cores: { destaque: ((r.cores && r.cores.marca) || [])[0] ? r.cores.marca[0].cor : undefined },
-            fontes: { titulo: ((r.fontes && r.fontes.declaradas) || [])[0] ? r.fontes.declaradas[0].fonte : undefined },
-        };
+        const marcaLida = paletaDoSite(r);
         ultimoSite = { url: r.url, html, quando: Date.now(), marca: marcaLida };
     }
     if (r.ok && args.id && args.logo !== false) {

package/lib/estudio/remotion.js

@@ -323,7 +323,7 @@ function Elemento({ el, t, dados }) {
             startFrom={el.deOrigem ? Math.round(el.deOrigem * dados.fps) : undefined}
             endAt={el.ateOrigem ? Math.round(el.ateOrigem * dados.fps) : undefined}
             volume={el.volume ?? 0}
-            style={{ width: '100%', height: '100%', objectFit: el.ajuste || 'cover' }}
+            style={{ width: '100%', height: '100%', objectFit: el.ajuste || 'cover', objectPosition: el.foco || 'center' }}
           />
         </div>
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "9.8.0-beta.16",
+  "version": "9.8.0-beta.17",
   "description": "PrimoCode — agente de engenharia com IA e cursor próprio. Requer conta Conecta Primo AI (Premium ou Super). Cria arquivos, roda comandos, controla navegador e desktop: abre apps, clica em botões e ícones pelo nome, digita e usa atalhos.",
   "main": "bin/primocode.js",
   "bin": {