primocode 10.3.0 → 10.4.0

package/lib/estudio/estilo.js

@@ -25,20 +25,25 @@
 
 const variedade = require('./variedade.js');
 
-const ESTILOS = ['hibrido', 'gerativo', 'motion', 'vox', 'marca', 'lancamento', 'impacto', 'cinema', 'composicao', 'fluido'];
+const ESTILOS = ['hibrido', 'gerativo', 'motion', 'vox', 'marca', 'lancamento', 'impacto', 'cinema', 'composicao', 'fluido', 'personagem'];
 // Nomes que o modelo usa para os mesmos estilos.
 /* "motion" agora é o GERATIVO ("não pode ter template", 29–30/09); o motion
    antigo segue pelo nome "classico" (e "limpo", o nome mais antigo dele). */
 const APELIDOS = { motion: 'gerativo', generativo: 'gerativo', kinetic: 'gerativo', cinetico: 'gerativo', 'cinético': 'gerativo',
     tipografico: 'gerativo', 'tipográfico': 'gerativo', animacao: 'gerativo', 'animação': 'gerativo',
     classico: 'motion', 'clássico': 'motion', 'motion-classico': 'motion', motion3d: 'motion',
-    absurdo: 'hibrido', misto: 'hibrido', mix: 'hibrido', 'híbrido': 'hibrido', limpo: 'motion', explainer: 'vox', editorial: 'vox', brand: 'marca', branding: 'marca', 'brand-reveal': 'marca', minimalista: 'fluido', minimal: 'fluido', clean: 'fluido', apple: 'fluido', launch: 'lancamento', 'lançamento': 'lancamento', produto: 'lancamento' };
+    absurdo: 'hibrido', misto: 'hibrido', mix: 'hibrido', 'híbrido': 'hibrido', limpo: 'motion', explainer: 'vox', editorial: 'vox', brand: 'marca', branding: 'marca', 'brand-reveal': 'marca', minimalista: 'fluido', minimal: 'fluido', clean: 'fluido', apple: 'fluido', launch: 'lancamento', 'lançamento': 'lancamento', produto: 'lancamento',
+    personagens: 'personagem', boneco: 'personagem', bonecos: 'personagem', conversa: 'personagem', dialogo: 'personagem', 'diálogo': 'personagem', podcast: 'personagem', gravado: 'personagem' };
 
 const PEDE_FLUIDO = /\bfluid[oa]\b|minimalista|\bminimal\b|\bclean\b|\bapple\b/i;
 const PEDE_MOTION = /\bmotion\b|anima[çc][ãa]o|animad[oa]/i;
 const PEDE_VOX = /\bvox\b|explica|explainer|document[aá]rio|editorial|hist[oó]ria d[aoe]s?\b/i;
 const PEDE_MARCA = /\bbrand|identidade visual|revela[çc][ãa]o d[ae] marca|\blogo(tipo|marca)?\b|vinheta de marca/i;
 const PEDE_LANCAMENTO = /lan[çc]amento|\blaunch|\bsaas\b|produto novo|apresenta(ndo|r|ção d[oe]) (o |a )?(app|produto|plataforma|ferramenta)/i;
+/* "Uma animação em 3D do Claude falando com o usuário... como se fosse gravado"
+   (10/10): personagem, boneco, avatar, conversa ou podcast em 3D vira o vídeo
+   GRAVADO em 3D (personagem.js). O 3D de produto continua no gerativo. */
+const PEDE_PERSONAGEM = /personage(m|ns)|\bbonec[oa]s?\b|\bavatar|mascote falando|\bpodcast\b|entrevista|(conversa|di[aá]logo|falando|explicando)[^.]{0,60}\b3\s?d\b|\b3\s?d\b[^.]{0,60}(conversa|di[aá]logo|falando|explicando|pessoa|gente)/i;
 const PEDE_IMPACTO = /an[uú]nci|reels?|divulg|promo|lan[çc]a|vend|campanha|convite|inscri/i;
 
 const normal = (e) => {
@@ -73,7 +78,9 @@ function escolherEstilo({ pedido = '', agente = null, roteiro = null, girar = fa
     const doRoteiro = normal(roteiro);
     /* Pedir MOTION (ou animação) é pedir o gerativo — antes do vox, da marca e
        do lançamento, que são leiaute fixo ("não pode ter template", 30/09). */
-    if (doRoteiro && !(doRoteiro !== 'gerativo' && doRoteiro !== 'fluido' && PEDE_MOTION.test(pedido))) return doRoteiro;
+    // O personagem também é animação: "animação 3D do Claude falando" não pode cair no gerativo.
+    if (doRoteiro && !(!['gerativo', 'fluido', 'personagem'].includes(doRoteiro) && PEDE_MOTION.test(pedido))) return doRoteiro;
+    if (PEDE_PERSONAGEM.test(pedido)) return 'personagem';
     // O fluido é um jeito de motion: "motion minimalista" é o fluido, não o gerativo.
     if (PEDE_FLUIDO.test(pedido)) return 'fluido';
     if (PEDE_MOTION.test(pedido)) return 'gerativo';
@@ -88,6 +95,6 @@ function escolherEstilo({ pedido = '', agente = null, roteiro = null, girar = fa
 }
 
 /** Os estilos que usam os efeitos leves e a trilha do ende.app (os de motion, não os de corte). */
-const LEVES = new Set(['gerativo', 'motion', 'vox', 'marca', 'lancamento', 'fluido']);
+const LEVES = new Set(['gerativo', 'motion', 'vox', 'marca', 'lancamento', 'fluido', 'personagem']);
 
-module.exports = { escolherEstilo, estiloDaVez, ESTILOS, LEVES, PEDE_MOTION, PEDE_FLUIDO, RODIZIO, RODIZIO_SEM_IMAGEM };
+module.exports = { escolherEstilo, estiloDaVez, ESTILOS, LEVES, PEDE_MOTION, PEDE_FLUIDO, RODIZIO, RODIZIO_SEM_IMAGEM, PEDE_PERSONAGEM };

package/lib/estudio/gerativo.js

@@ -42,6 +42,7 @@
 const { misturarCor, ehCor } = require('./morfar.js');
 const { volumesDaTrilha } = require('./ritmo.js');
 const { falaDe } = require('./composicao.js');
+const { limitesNaCamera, MARGEM } = require('./margem.js');
 
 const FPS = 30;
 const QUADRO = 1 / FPS;
@@ -1255,6 +1256,23 @@ function partituraDe({ roteiro, largura = 1920, altura = 1080, tempos = [], icon
         } else camera.push({ t: r3(b.ate), x: 0, y: 0, zoom: r3(z1 + 0.03), rot: 0, e: 'camera' });
     });
 
+    /* ── a área segura de cada batida (margem.js) ──────────────────────
+       O bloco parado não pode encostar na borda DA TELA — e a tela vê o
+       mundo pela câmera: com zoom 1,1 e a batida 110 px mais perto da lente,
+       a margem de 8,5% do mundo virava 3% na tela ("pensam" colado na borda,
+       10/10). Aqui o limite da tela vira limite do mundo, batida a batida; o
+       componente encaixa o bloco MEDIDO dentro dele. O ícone vive mais perto
+       da lente (translateZ 150), então tem o limite dele. */
+    const D = Math.round(Math.max(W, H) * 0.85);
+    batidas.forEach((b) => {
+        const assenta = Math.min(b.de + 0.55, (b.de + b.ate) / 2);
+        const fimCalmo = Math.max(assenta + 0.1, b.ate - 0.32);
+        const op = { W, H, camera, de: assenta, ate: fimCalmo, D };
+        b.seguro = limitesNaCamera({ ...op, z: 110 });
+        b.seguroIcone = limitesNaCamera({ ...op, z: 260 });
+        b.vao = Math.round(Math.min(W, H) * MARGEM.vao);
+    });
+
     // ── o produto em 3D: mora nas batidas que o hospedam ─────────────────
     const produtos = batidas.filter((b) => b.produto3d).map((b) => ({ ...b.produto3d, de: b.de, ate: b.ate, modelo: roteiro.modelo3d,
         cor: roteiro.cor3d || '#1b1c20', corAcento: P.acento, ...(roteiro.variacao3d || {}) }));

package/lib/estudio/index.js

@@ -47,6 +47,7 @@ const assets = require('./assets.js');
 const video = require('./video.js');
 const batida = require('./batida.js');
 const revisor = require('./revisor.js');
+const margem = require('./margem.js');
 const assinatura = require('./assinatura.js');
 const identidade = require('./identidade.js');
 const slides = require('./slides.js');
@@ -64,6 +65,7 @@ const vox = require('./vox.js');
 const kokoro = require('./kokoro.js');
 const lancamento = require('./lancamento.js');
 const glifos = require('./glifos.js');
+const personagem = require('./personagem.js');
 const { escolherEstilo, LEVES } = require('./estilo.js');
 const sonsLeves = require('./sons-leves.js');
 const ende = require('./ende.js');
@@ -277,7 +279,12 @@ function roteiroValido(r) {
     if (!Array.isArray(partes) || partes.length < 2) return null;
     const CINEMA = ['frase', 'montagem', 'numeros', 'escada', 'dia', 'depoimento', 'climax', 'final'];
     const NOVOS = ['logo', 'cores', 'produto'];   // vox.js e lancamento.js
-    if (!partes.every((pt) => pt && (composicao.TIPOS.includes(pt.tipo) || CINEMA.includes(pt.tipo) || NOVOS.includes(pt.tipo)))) return null;
+    /* A FALA do personagem (personagem.js) não tem tipo: é {falante, texto}. Sem
+       isto, o roteiro de diálogo caía no roteirista do servidor, que reescrevia
+       tudo com um apresentador só — e as duas vozes sumiam (10/10). */
+    const conversa = (x && !Array.isArray(x) && String(x.estilo || '').toLowerCase() === 'personagem') || partes.some((pt) => pt && typeof pt.falante === 'string' && pt.falante.trim());
+    const fala = (pt) => conversa && !pt.tipo && typeof (pt.texto || pt.fala) === 'string' && String(pt.texto || pt.fala).trim();
+    if (!partes.every((pt) => pt && (composicao.TIPOS.includes(pt.tipo) || CINEMA.includes(pt.tipo) || NOVOS.includes(pt.tipo) || fala(pt)))) return null;
     // Duas vozes: roteiro.vozes e parte.falante, limpos (falantes.js). Sem eles, nada muda.
     const obj = falantes.normalizar(Array.isArray(x) ? { partes } : x);
     return partes.some((pt) => CINEMA.includes(pt.tipo)) && !obj.estilo ? { ...obj, estilo: 'cinema' } : obj;
@@ -470,6 +477,17 @@ async function ferramentaMidia(args) {
         return r;
     }
 
+    /* O ELEMENTO do site, tirado pelo código (print-site.js): a lista das peças
+       (logo, botão, cartão, título…) e uma peça sozinha, com o fundo transparente. */
+    if (acao === 'elementos') return printSite.elementosDoSite(args.url || args.site || args.termo, { celular: !!args.celular });
+    if (acao === 'elemento') {
+        if (!p) return { ok: false, error: 'para tirar o elemento é preciso dizer em qual projeto (id).' };
+        const r = await printSite.capturarElemento(args.url || args.site, { pasta: p.pasta, seletor: args.seletor, texto: args.texto || args.termo,
+            celular: !!args.celular, transparente: args.transparente !== false, margem: args.margem });
+        if (r.ok) projeto.anotar(p.id, 'midia', `elemento de ${r.url} (${args.seletor || args.texto || args.termo}): ${r.src}`);
+        return r;
+    }
+
     // O catálogo de efeitos que a IA escreveu (efeitos.js): guardar, listar, reusar.
     if (acao === 'efeitos') return { ok: true, efeitos: efeitos.cardapio() };
     if (acao === 'guardar-efeito' || acao === 'usar-efeito') {
@@ -1113,7 +1131,7 @@ async function prepararRoteiro(p, args) {
     /* "O vídeo deve ter um 3D do fone" (30/09): pedido de 3D vira o gerativo
        com o produto modelado girando numa batida (kit/tres.jsx) — a menos que
        o agente tenha escolhido outro estilo pelo nome. */
-    if (/\b3\s?d\b|tridimensional/i.test(pedidoTxt) && (!args.estilo || estilo === 'gerativo' || estilo === 'lancamento')) {
+    if (/\b3\s?d\b|tridimensional/i.test(pedidoTxt) && estilo !== 'personagem' && (!args.estilo || estilo === 'gerativo' || estilo === 'lancamento')) {
         // O 3D mora numa batida do gerativo; o lançamento antigo, só pelo nome.
         if (!args.estilo && estilo !== 'lancamento') estilo = 'gerativo';
         if (!roteiro.modelo3d) roteiro.modelo3d = variacao3d.modeloDoPedido(pedidoTxt);
@@ -1485,6 +1503,9 @@ async function prepararRoteiro(p, args) {
                 // O fluido é o vídeo de produto: voz limpa e segura, e rápida ("mais rápido", 06/10).
                 : estilo === 'fluido' ? 'Leia em português do Brasil como narrador de vídeo de produto premium: seguro, próximo e RÁPIDO, '
                     + 'frases limpas e contínuas, quase sem pausa entre elas. Nunca arraste, nunca leia devagar; sem tom de anúncio.'
+                // O personagem CONVERSA: voz de gente falando com gente, não de locutor.
+                : estilo === 'personagem' ? 'Fale em português do Brasil como alguém conversando de verdade num podcast: natural, próximo, '
+                    + 'com as pausas e a entonação de quem está pensando junto. Sem voz de locutor, sem leitura.'
                 : estilo === 'impacto' ? 'Leia em português do Brasil como locutor de comercial agressivo e vendedor: energia alta, ritmo rápido, '
                 + 'voz encorpada, ênfase forte nas palavras de impacto, pausas curtas e secas entre as frases, sorrindo na voz.'
                 // "A narração tá lenta, deixa mais viva" (29/09): todo estilo fala com energia de reels.
@@ -1508,7 +1529,7 @@ async function prepararRoteiro(p, args) {
            áudio acelera 1,12× (1,3× ficou corrido demais, 29/09; atempo não muda o tom) e cada tempo de palavra
            acompanha; `roteiro.ritmoVoz` ajusta (1 desliga). */
         // O fluido corre mais ("mais rápido", 06/10): 1,22× por padrão.
-        const ritmo = Math.max(1, Math.min(1.5, Number(roteiro.ritmoVoz || args.ritmoVoz) || (estilo === 'fluido' ? 1.22 : 1.12)));
+        const ritmo = Math.max(1, Math.min(1.5, Number(roteiro.ritmoVoz || args.ritmoVoz) || (estilo === 'fluido' ? 1.22 : estilo === 'personagem' ? 1.06 : 1.12)));
         if (ritmo > 1.01) {
             const rap = mp3.replace(/\.mp3$/, '-r.mp3');
             const c = await video.rodar(video.ffmpeg(), ['-y', '-i', mp3, '-filter:a', `atempo=${ritmo.toFixed(3)}`, rap], { timeout: 120000 });
@@ -1697,6 +1718,11 @@ async function prepararRoteiro(p, args) {
         if (r.ok) conferirAssinatura(p, r, roteiro.assinatura || 'fluido');
         return r;
     }
+    if (estilo === 'personagem' && modo === 'video') {
+        const r = personagem.montarPersonagem({ roteiro, largura, altura, tempos, narracao, sons, trilha });
+        if (r.ok) projeto.anotar(p.id, 'plano', `estilo personagem: ${r.resumo.elenco.join(' e ')} no set ${r.resumo.cenario}, ${r.resumo.planos} planos, ${r.resumo.segundos}s`);
+        return r;
+    }
     if (estilo === 'motion' && modo === 'video') {
         const r = motion.montarMotion({ roteiro, largura, altura, tempos, narracao, sons, trilha, imagens });
         if (r.ok) projeto.anotar(p.id, 'plano', `estilo motion: ${r.resumo.segundos}s contínuos, ${r.resumo.partes} partes, ${r.resumo.fps} fps`);
@@ -1788,6 +1814,12 @@ async function ferramentaRender(args, ctx = {}) {
     if (revisao.consertos.length) projeto.anotar(args.id, 'revisao', revisao.consertos.join('; '));
     if (revisao.avisos.length) projeto.anotar(args.id, 'revisao', 'avisos: ' + revisao.avisos.join('; '));
 
+    /* A ÁREA SEGURA E O RESPIRO (margem.js): nada a menos de 6%/7% da borda,
+       nada colado em nada. É conta, não pedido: o elemento que o modelo pôs
+       encostado entra, o texto largo encolhe, o colado se afasta. */
+    const guarda = margem.guardarPlano(pl);
+    if (guarda.consertos.length) projeto.anotar(args.id, 'margem', guarda.consertos.slice(0, 12).join('; '));
+
     // Os ícones vêm ANTES do render: um render que busca ícone na internet
     // falha no meio, depois de vinte minutos.
     const { mapa, faltaram } = await assets.iconesDoPlano(pl, p.pasta);

package/lib/estudio/kit/gerativo.jsx

@@ -147,6 +147,38 @@ function useMedidas(P) {
   return medidas;
 }
 
+/* ── a área segura: o bloco MEDIDO cabe em b.seguro ──────────────────────
+   b.seguro vem do planner (margem.limitesNaCamera): é onde, no mundo, o
+   bloco pode ficar para não encostar na borda da tela com a câmera daquela
+   batida. Largo demais: encolhe tudo junto (fonte e posição) em volta do
+   centro; fora: anda para dentro. A barra do acento mora à esquerda do bloco
+   e o ponto final à direita: contam como parte dele. Partitura antiga (sem
+   b.seguro): como antes. */
+function encaixar(b, caixas) {
+  const seg = b.seguro;
+  const cs = Object.values(caixas);
+  if (!seg || !cs.length) return;
+  const sMax = Math.max(...cs.map((c) => c.s));
+  const temBarra = (b.acento || []).some((a) => a.forma === 'barra');
+  const x0 = Math.min(...cs.map((c) => c.x)), y0 = Math.min(...cs.map((c) => c.y));
+  const x1 = Math.max(...cs.map((c) => c.x + c.w)), y1 = Math.max(...cs.map((c) => c.y + c.h));
+  const deriva = b.vida === 'deriva' ? (x1 - x0) * 0.03 : 0;
+  const esq = (temBarra ? Math.max(18, (b.vao || 0) * 0.7, (y1 - y0) * 0.08) + 8 : 0) + sMax * 0.04 + deriva, dir = sMax * 0.22 + deriva;
+  const k = Math.min(1, (seg.x1 - seg.x0) / (x1 - x0 + esq + dir), (seg.y1 - seg.y0) / (y1 - y0));
+  const ox = (x0 + x1) / 2, oy = (y0 + y1) / 2;
+  const nx0 = ox + (x0 - ox) * k - esq * k, nx1 = ox + (x1 - ox) * k + dir * k;
+  const ny0 = oy + (y0 - oy) * k, ny1 = oy + (y1 - oy) * k;
+  const dx = nx0 < seg.x0 ? seg.x0 - nx0 : nx1 > seg.x1 ? seg.x1 - nx1 : 0;
+  const dy = ny0 < seg.y0 ? seg.y0 - ny0 : ny1 > seg.y1 ? seg.y1 - ny1 : 0;
+  if (k > 0.999 && !dx && !dy) return;
+  const X = (x) => ox + (x - ox) * k + dx, Y = (y) => oy + (y - oy) * k + dy;
+  for (const c of cs) {
+    c.x = X(c.x); c.y = Y(c.y); c.w *= k; c.h *= k; c.s *= k;
+    c.palavras = c.palavras.map((p) => ({ x: X(p.x), w: p.w * k }));
+    c.letras = c.letras.map((q) => ({ x: X(q.x), w: q.w * k }));
+  }
+}
+
 // ── o leiaute: da medida às caixas no mundo ─────────────────────────────
 function leiaute(P, med) {
   const W = P.largura, H = P.altura;
@@ -210,6 +242,7 @@ function leiaute(P, med) {
       const s = aspas.tamanho;
       caixas[aspas.id] = { x: cp.x - s * 0.04, y: cp.y - s * 0.62, w: s * 0.5, h: s, s, palavras: [{ x: cp.x, w: s * 0.5 }], letras: [{ x: cp.x, w: s * 0.5 }] };
     }
+    encaixar(b, caixas);
     // O bloco inteiro (para a barra e a moldura).
     const cs = Object.values(caixas);
     const bx = { x: Math.min(...cs.map((c) => c.x)), y: Math.min(...cs.map((c) => c.y)), x1: Math.max(...cs.map((c) => c.x + c.w)), y1: Math.max(...cs.map((c) => c.y + c.h)) };
@@ -260,8 +293,16 @@ function geometria(a, b, L, P) {
     return { pts, larg: Math.max(4 * base, cx.s * 0.03), alfa: 1, frente: true, cx: ccx, cy: ccy };
   }
   if (f === 'barra') {
-    const x = lay.bloco.x - Math.max(18 * base, (lay.bloco.y1 - lay.bloco.y) * 0.08);
-    for (let i = 0; i < N; i++) { const k = i / (N - 1); pts.push([x, lerp(lay.bloco.y + 4, lay.bloco.y1 - 4, k)]); }
+    // O vão da barra é o respiro do vídeo (margem.js): colada, ela riscava a primeira letra.
+    // A deriva da vida abre as letras até 3% da linha para fora: a barra recua junto.
+    const x0 = lay.bloco.x - Math.max(18 * base, (b.vao || 0) * 0.7, (lay.bloco.y1 - lay.bloco.y) * 0.08) - (b.vida === 'deriva' ? (lay.bloco.x1 - lay.bloco.x) * 0.03 : 0);
+    /* O texto mora na batida, que chega ~80 px mais perto da lente enquanto se
+       lê; o traço, não. Sem esta conta, o texto crescia por cima da barra (a
+       primeira letra riscada, 10/10): a barra vai para onde o texto É VISTO. */
+    const D = Math.round(Math.max(P.largura, P.altura) * 0.85), kz = D / (D - 80);
+    const X = (q) => P.largura / 2 + (q - P.largura / 2) * kz, Y = (q) => P.altura / 2 + (q - P.altura / 2) * kz;
+    const x = X(x0);
+    for (let i = 0; i < N; i++) { const k = i / (N - 1); pts.push([x, Y(lerp(lay.bloco.y + 4, lay.bloco.y1 - 4, k))]); }
     return { pts, larg: Math.max(8 * base, 10 * base), alfa: 1, frente: true, cx: x, cy: (lay.bloco.y + lay.bloco.y1) / 2 };
   }
   if (f === 'moldura') {
@@ -959,9 +1000,11 @@ export function Gerativo({ el, t, fps }) {
                 if (x.heroi.modo === 'campo') return null;   // desenhado atrás, antes do produto
                 const R = Math.min(W, H) * (W >= H ? 0.2 : 0.17);
                 let slot = null;
-                if (W - M - bl.x1 >= R * 2.3) slot = { cx: bl.x1 + (W - M - bl.x1) / 2, cy: (bl.y + bl.y1) / 2, R };
-                else if (bl.y - M * 1.4 >= R * 2.2) slot = { cx: W / 2, cy: M * 1.4 + (bl.y - M * 1.4) / 2, R };
-                else if (H - M * 1.4 - bl.y1 >= R * 2.2) slot = { cx: W / 2, cy: bl.y1 + (H - M * 1.4 - bl.y1) / 2, R };
+                // A área segura (margem.js), com o vão do bloco; partitura antiga: a margem do mundo.
+                const S = x.seguro || { x0: M, y0: M * 1.4, x1: W - M, y1: H - M * 1.4 }, V = x.vao || 0;
+                if (S.x1 - bl.x1 - V >= R * 2.3) slot = { cx: bl.x1 + V + (S.x1 - bl.x1 - V) / 2, cy: (bl.y + bl.y1) / 2, R };
+                else if (bl.y - V - S.y0 >= R * 2.2) slot = { cx: W / 2, cy: S.y0 + (bl.y - V - S.y0) / 2, R };
+                else if (S.y1 - bl.y1 - V >= R * 2.2) slot = { cx: W / 2, cy: bl.y1 + V + (S.y1 - bl.y1 - V) / 2, R };
                 // Sem vazio, não entra (09/10): o anel no meio do texto era enfeite que ninguém pediu.
                 else return null;
                 return <Heroi b={x} t={t} P={P} slot={slot} />;
@@ -972,16 +1015,21 @@ export function Gerativo({ el, t, fps }) {
                    (ic.lados, gerativo.js: direita, esquerda, acima, abaixo ou canto);
                    sem espaço lá, tenta o próximo; sem nenhum, não entra — nunca
                    por cima do texto. Partitura antiga (sem lados): direita ou acima. */
-                const ic = x.icone3d, tam = ic.tamanho, M = P.margem, bl = lay.bloco;
-                const xTopo = x.bloco.alinha === 'centro' ? (bl.x + bl.x1) / 2 - tam / 2 : bl.x - tam * 0.08;
-                const fora = (qx, qy) => qx + tam <= bl.x - 8 || qx >= bl.x1 + 8 || qy + tam <= bl.y - 8 || qy >= bl.y1 + 8;
+                const ic = x.icone3d, bl = lay.bloco;
+                /* A área segura do ícone (margem.js): ele vive mais perto da lente que o
+                   texto, então o limite dele é mais apertado; e fica a um vão (4% do lado
+                   curto) do bloco. Partitura antiga: a margem do mundo, como antes. */
+                const M = P.margem, S = x.seguroIcone || { x0: M, y0: M, x1: W - M, y1: H - M }, V = x.vao || 8;
+                const tam = Math.min(ic.tamanho, (S.x1 - S.x0) * 0.4, (S.y1 - S.y0) * 0.6);
+                const xTopo = Math.min(S.x1 - tam, Math.max(S.x0, x.bloco.alinha === 'centro' ? (bl.x + bl.x1) / 2 - tam / 2 : bl.x - tam * 0.08));
+                const fora = (qx, qy) => qx + tam <= bl.x - V || qx >= bl.x1 + V || qy + tam <= bl.y - V || qy >= bl.y1 + V;
                 const LUGAR = {
-                  'direita': () => (W - M - bl.x1 >= tam * 0.9 ? [Math.min(W - M - tam, bl.x1 + (W - M - bl.x1 - tam) / 2), (bl.y + bl.y1) / 2 - tam / 2] : null),
-                  'esquerda': () => (bl.x - M >= tam * 0.9 ? [Math.max(M * 0.6, M + (bl.x - M - tam) / 2), (bl.y + bl.y1) / 2 - tam / 2] : null),
-                  'acima': () => (bl.y - M * 1.2 >= tam * 0.85 ? [xTopo, Math.max(M, bl.y - tam - 0.02 * H)] : null),
-                  'abaixo': () => (H - M * 1.2 - bl.y1 >= tam * 0.85 ? [xTopo, Math.min(H - M - tam, bl.y1 + 0.02 * H)] : null),
+                  'direita': () => (S.x1 - bl.x1 - V >= tam ? [Math.min(S.x1 - tam, bl.x1 + V + (S.x1 - bl.x1 - V - tam) / 2), Math.min(S.y1 - tam, Math.max(S.y0, (bl.y + bl.y1) / 2 - tam / 2))] : null),
+                  'esquerda': () => (bl.x - V - S.x0 >= tam ? [Math.max(S.x0, S.x0 + (bl.x - V - S.x0 - tam) / 2), Math.min(S.y1 - tam, Math.max(S.y0, (bl.y + bl.y1) / 2 - tam / 2))] : null),
+                  'acima': () => (bl.y - V - S.y0 >= tam ? [xTopo, Math.max(S.y0, bl.y - V - tam)] : null),
+                  'abaixo': () => (S.y1 - bl.y1 - V >= tam ? [xTopo, Math.min(S.y1 - tam, bl.y1 + V)] : null),
                   // O canto livre mais longe do texto: o ícone pequeno, de assinatura.
-                  'canto': () => [[W - M - tam, M], [W - M - tam, H - M - tam], [M, M], [M, H - M - tam]].find(([qx, qy]) => fora(qx, qy)) || null,
+                  'canto': () => [[S.x1 - tam, S.y0], [S.x1 - tam, S.y1 - tam], [S.x0, S.y0], [S.x0, S.y1 - tam]].find(([qx, qy]) => fora(qx, qy)) || null,
                 };
                 const ordem = ic.lados || [ic.lado, 'acima'];
                 const achou = ordem.map((l) => LUGAR[l] && LUGAR[l]()).find(Boolean);
@@ -995,7 +1043,7 @@ export function Gerativo({ el, t, fps }) {
                     transform: 'translateZ(120px) scale(' + (0.6 + 0.4 * k).toFixed(4) + ') rotate(' + ((1 - k) * -8).toFixed(2) + 'deg)', transformOrigin: '50% 60%' }}
                     dangerouslySetInnerHTML={{ __html: ic.svg }} />;
                 }
-                return <div style={{ position: 'absolute', inset: 0, transform: 'translateZ(150px)' }}><Icone3D el={{ ...ic, x: Math.round(px), y: Math.round(py) }} t={t} /></div>;
+                return <div style={{ position: 'absolute', inset: 0, transform: 'translateZ(150px)' }}><Icone3D el={{ ...ic, tamanho: tam, x: Math.round(px), y: Math.round(py) }} t={t} /></div>;
               })()}
               {x.linhas.map((l, li) => {
                 const cx = lay.caixas[l.id];

package/lib/estudio/kit/index.jsx

@@ -9,6 +9,7 @@ import { Papel } from './base';
 import { TRES } from './tres';
 import { GERATIVO } from './gerativo';
 import { FLUIDO } from './fluido';
+import { PERSONAGEM } from './personagem';
 
-export const KIT = { ...VOX, ...MARCA, ...TRES, ...GERATIVO, ...FLUIDO, papel: Papel };
+export const KIT = { ...VOX, ...MARCA, ...TRES, ...GERATIVO, ...FLUIDO, ...PERSONAGEM, papel: Papel };
 export { Filtros, Acabamento, Hud, CURVAS_KIT, bolhaCaminho } from './base';