primocode 10.3.0 → 10.4.0

package/lib/estudio/margem.js

@@ -0,0 +1,235 @@
+/**
+ * margem.js — a área segura e o respiro: o que o vídeo NÃO deixa a IA fazer.
+ *
+ *   "quero que os motions tenham uma barra que limita a IA de colocar itens
+ *    perto das bordas ou deixar eles muito juntos" — Joel, 10/10, com os
+ *    quadros do claude-ai-motion: "pensam" encostado na borda esquerda, o
+ *    "claude.ai" cortado, o "{ }" comido na direita.
+ *
+ * Não é dica no prompt (o modelo esquece); é conta, antes do render:
+ *
+ *   área segura   nada visível a menos de 6% da largura e 7% da altura da
+ *                 borda (o "title safe" da TV). O que passa é empurrado para
+ *                 dentro; o texto largo demais ENCOLHE até caber.
+ *   respiro       dois elementos no ar ao mesmo tempo ficam a pelo menos 4%
+ *                 do lado curto um do outro; colados, o de baixo (o que veio
+ *                 depois na lista) desce, ou sobe se não couber.
+ *   fundo livre   o que é fundo — padrão, textura, partículas, a forma
+ *                 gigante, a imagem de ponta a ponta, o que vem marcado com
+ *                 fundo/decorativo/sangria — não entra na conta.
+ *
+ * A conta vale para a posição de REPOUSO (x, y somados ao último quadro-chave
+ * de anima.x/anima.y): a entrada que vem de fora da tela continua livre.
+ *
+ * Os estilos que desenham com câmera (o gerativo) não têm x, y no plano: o
+ * planner deles chama `limitesNaCamera`, que devolve a área segura no MUNDO
+ * já descontado o zoom, a deriva e a profundidade de cada batida.
+ *
+ * Puro: o plano entra, o plano guardado e a lista do que mudou saem.
+ */
+
+'use strict';
+
+/* As regras, em fração do quadro. Os testes leem daqui. */
+const MARGEM = { x: 0.06, y: 0.07, vao: 0.04 };
+
+const r1 = (n) => Math.round(n * 10) / 10;
+
+/** A área segura do quadro, em pixels. */
+function areaSegura(W, H, m = MARGEM) {
+    return { x0: Math.round(W * m.x), y0: Math.round(H * m.y), x1: Math.round(W * (1 - m.x)), y1: Math.round(H * (1 - m.y)) };
+}
+
+// ── o que é fundo ──────────────────────────────────────────────────────
+/* As peças do kit que são o QUADRO inteiro (textura, padrão, o gerativo que
+   tem a própria conta) ou enfeite de fundo. */
+const PECAS_FUNDO = new Set(['textura', 'padrao', 'particulas', 'papel', 'grade', 'orbe', 'cromo', 'esfera', 'estrela',
+    'gerativo', 'fluido', 'personagem', 'site']);
+
+const num = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : null);
+
+function ehFundo(el, W, H) {
+    if (!el || typeof el !== 'object') return true;
+    if (el.fundo === true || el.decorativo || el.sangria || el.livre) return true;
+    if (el.tipo === 'kit') return PECAS_FUNDO.has(el.peca) || num(el.x) == null || num(el.y) == null;
+    // A forma é desenho (o protagonista, a partícula, o cursor): quem decide onde ela vive é o estilo.
+    if (el.tipo === 'forma' || el.tipo === 'legenda' || el.tipo === 'componente') return true;
+    if (num(el.x) == null || num(el.y) == null) return true;
+    const w = medidaPx(el.largura, W), h = medidaPx(el.altura, H);
+    // A imagem (ou o grupo) de ponta a ponta é fundo: a borda dela É a borda do quadro.
+    if ((w != null && w >= W * 0.9) || (h != null && h >= H * 0.9)) return true;
+    const op = num(el.opacidade);
+    if (op != null && op <= 0.35) return true;
+    return false;
+}
+
+function medidaPx(v, total) {
+    if (typeof v === 'number') return v;
+    const m = String(v == null ? '' : v).match(/^(-?[\d.]+)%$/);
+    return m ? (Number(m[1]) / 100) * total : null;
+}
+
+// ── a caixa de cada elemento, em repouso ───────────────────────────────
+const ultimo = (ks) => (Array.isArray(ks) && ks.length ? Number(ks[ks.length - 1].v) || 0 : 0);
+
+/* A largura de um texto sem medir: 0,56 em por caractere é a média das fontes
+   do Estúdio (a mesma conta de composicao.caber). Erra para mais na fonte
+   estreita — que é o lado seguro. */
+const EM = 0.56;
+function textoDe(el) {
+    if (typeof el.texto === 'string') return el.texto;
+    if (Array.isArray(el.palavras)) return el.palavras.map((p) => (typeof p === 'string' ? p : p.texto || '')).join(' ');
+    if (Array.isArray(el.linhas)) return el.linhas.map((p) => (typeof p === 'string' ? p : p.texto || '')).join('\n');
+    return el.termo || el.titulo || '';
+}
+
+/** {x, y, w, h} do elemento parado no lugar dele — ou null quando não dá para saber. */
+function caixaDe(el, W, H) {
+    const tam = num(el.tamanho) || (el.tipo === 'texto' || el.tipo === 'kit' ? 64 : null);
+    let w = medidaPx(el.largura, W), h = medidaPx(el.altura, H);
+    const txt = textoDe(el);
+    if (txt && tam) {
+        const linhas = String(txt).split('\n');
+        const maior = Math.max(...linhas.map((l) => l.length));
+        const corrido = maior * tam * EM;
+        const larg = w != null ? Math.min(w, corrido) : corrido;
+        const quebras = w != null ? linhas.reduce((n, l) => n + Math.max(1, Math.ceil((l.length * tam * EM) / Math.max(1, w))), 0) : linhas.length;
+        w = w != null && corrido > w ? w : larg;
+        if (h == null) h = quebras * tam * (num(el.entrelinha) || 1.1);
+    }
+    if (el.tipo === 'icone' && w == null) w = h = num(el.tamanho) || 96;
+    if (w == null || h == null) return null;
+    const ancora = el.ancora || (el.tipo === 'kit' && (el.alinhamento === 'centro' || el.centro) ? 'centro-x' : 'canto');
+    // O texto centrado sem caixa cresce para os dois lados do x.
+    let x = el.x + ultimo(el.anima && el.anima.x), y = el.y + ultimo(el.anima && el.anima.y);
+    const esc = el.anima && el.anima.escala ? ultimo(el.anima.escala) || 1 : 1;
+    w *= esc; h *= esc;
+    if (ancora === 'centro' || ancora === 'centro-x') x -= w / 2;
+    if (ancora === 'centro' || ancora === 'centro-y') y -= h / 2;
+    return { x, y, w, h };
+}
+
+const noAr = (el, duracao) => [num(el.de) ?? 0, num(el.ate) ?? duracao];
+const cruzam = (a, b) => a[0] < b[1] && b[0] < a[1];
+
+/**
+ * Guarda UMA cena: encolhe, empurra para dentro e separa.
+ * @returns {string[]} o que mudou, em português, para as notas do projeto
+ */
+function guardarCena(cena, W, H, { indice = 0, m = MARGEM } = {}) {
+    const area = areaSegura(W, H, m);
+    const vao = Math.round(Math.min(W, H) * m.vao);
+    const lw = area.x1 - area.x0, lh = area.y1 - area.y0;
+    const mudou = [];
+    const vivos = [];
+    (cena.elementos || []).forEach((el, j) => {
+        if (ehFundo(el, W, H)) return;
+        let cx = caixaDe(el, W, H);
+        if (!cx) return;
+        const nome = `cena ${indice + 1}, ${el.tipo === 'kit' ? el.peca : el.tipo} ${j + 1}`;
+        // 1. Largo ou alto demais: o texto encolhe a fonte; a caixa encolhe a medida.
+        const k = Math.min(1, lw / cx.w, lh / cx.h);
+        if (k < 0.999) {
+            if (num(el.tamanho)) el.tamanho = Math.max(12, Math.floor(el.tamanho * k));
+            const wl = medidaPx(el.largura, W), hl = medidaPx(el.altura, H);
+            if (wl != null) el.largura = Math.floor(Math.min(wl, lw));
+            if (hl != null && !num(el.tamanho)) el.altura = Math.floor(hl * k);
+            if (wl != null && hl != null && !num(el.tamanho) && wl > lw) el.altura = Math.floor(hl * (lw / wl));
+            cx = caixaDe(el, W, H) || cx;
+            mudou.push(`${nome}: grande demais para a área segura — encolheu ${Math.round((1 - k) * 100)}%`);
+        }
+        // 2. Para dentro da área segura.
+        const dx = cx.x < area.x0 ? area.x0 - cx.x : cx.x + cx.w > area.x1 ? area.x1 - (cx.x + cx.w) : 0;
+        const dy = cx.y < area.y0 ? area.y0 - cx.y : cx.y + cx.h > area.y1 ? area.y1 - (cx.y + cx.h) : 0;
+        if (Math.abs(dx) >= 1 || Math.abs(dy) >= 1) {
+            el.x = r1(el.x + dx); el.y = r1(el.y + dy);
+            cx = { ...cx, x: cx.x + dx, y: cx.y + dy };
+            mudou.push(`${nome}: encostava na borda — entrou ${Math.round(Math.hypot(dx, dy))} px`);
+        }
+        vivos.push({ el, cx, nome, quando: noAr(el, Number(cena.duracao) || 0) });
+    });
+
+    // 3. O respiro: quem veio depois cede o lugar, de cima para baixo.
+    for (let i = 1; i < vivos.length; i++) {
+        const b = vivos[i];
+        for (let a = 0; a < i; a++) {
+            const A = vivos[a];
+            if (!cruzam(A.quando, b.quando)) continue;
+            const sx = Math.min(A.cx.x + A.cx.w, b.cx.x + b.cx.w) - Math.max(A.cx.x, b.cx.x) + vao;
+            const sy = Math.min(A.cx.y + A.cx.h, b.cx.y + b.cx.h) - Math.max(A.cx.y, b.cx.y) + vao;
+            if (sx <= 0 || sy <= 0) continue;
+            // Desce para baixo de A; sem lugar embaixo, sobe para cima dele; sem os dois, vai para o lado.
+            const desce = A.cx.y + A.cx.h + vao - b.cx.y, sobe = A.cx.y - vao - (b.cx.y + b.cx.h);
+            const dir = A.cx.x + A.cx.w + vao - b.cx.x, esq = A.cx.x - vao - (b.cx.x + b.cx.w);
+            const opcoes = [[0, desce], [0, sobe], [dir, 0], [esq, 0]]
+                .filter(([ox, oy]) => b.cx.x + ox >= area.x0 - 0.5 && b.cx.x + b.cx.w + ox <= area.x1 + 0.5 && b.cx.y + oy >= area.y0 - 0.5 && b.cx.y + b.cx.h + oy <= area.y1 + 0.5);
+            if (!opcoes.length) { mudou.push(`${b.nome}: colado em outro e sem lugar livre — ficou (revise a cena)`); continue; }
+            const [ox, oy] = opcoes.sort((p, q) => Math.hypot(...p) - Math.hypot(...q))[0];
+            b.el.x = r1(b.el.x + ox); b.el.y = r1(b.el.y + oy);
+            b.cx = { ...b.cx, x: b.cx.x + ox, y: b.cx.y + oy };
+            mudou.push(`${b.nome}: colado em outro — afastou ${Math.round(Math.hypot(ox, oy))} px`);
+        }
+    }
+    return mudou;
+}
+
+/** O plano inteiro. Muda o plano no lugar e devolve {plano, consertos}. */
+function guardarPlano(plano, op = {}) {
+    const W = (plano && plano.formato && plano.formato.largura) || 1920;
+    const H = (plano && plano.formato && plano.formato.altura) || 1080;
+    const consertos = [];
+    ((plano && plano.cenas) || []).forEach((c, i) => { consertos.push(...guardarCena(c, W, H, { ...op, indice: i })); });
+    return { plano, consertos };
+}
+
+// ── a área segura vista por uma câmera que se mexe ─────────────────────
+function camEm(ks, t) {
+    if (!ks.length) return { x: 0, y: 0, zoom: 1, rot: 0 };
+    if (t <= ks[0].t) return ks[0];
+    for (let i = 0; i < ks.length - 1; i++) {
+        const a = ks[i], b = ks[i + 1];
+        if (t >= a.t && t < b.t) {
+            if (b.e === 'degrau' || b.t - a.t < 0.001) return b;
+            const u = (t - a.t) / (b.t - a.t);
+            return { x: a.x + (b.x - a.x) * u, y: a.y + (b.y - a.y) * u, zoom: a.zoom + (b.zoom - a.zoom) * u, rot: a.rot + (b.rot - a.rot) * u };
+        }
+    }
+    return ks[ks.length - 1];
+}
+
+/**
+ * Onde, no MUNDO, um bloco pode ficar para que, na TELA, ele não saia da área
+ * segura enquanto está parado — com a câmera daquele trecho.
+ *
+ * A tela vê o mundo assim (kit/gerativo.jsx): centro + zoom × perspectiva ×
+ * (ponto − centro − câmera). Então o limite da tela, desfeito, é o limite do
+ * mundo. Somam-se a deriva de mão (0,6% × 0,5%), a respiração (0,8%), o giro
+ * da câmera e o rotateY do mundo (2% a mais de escala, de folga).
+ *
+ * @param {object} op
+ * @param {number} op.W, op.H     o quadro
+ * @param {Array}  op.camera      [{t, x, y, zoom, rot, e}]
+ * @param {number} op.de, op.ate  o trecho em que o bloco está PARADO
+ * @param {number} op.z           a profundidade do bloco (px para a lente)
+ * @param {number} op.D           a distância da perspectiva (px)
+ */
+function limitesNaCamera({ W, H, camera = [], de, ate, z = 0, D = Math.round(Math.max(W, H) * 0.85), m = MARGEM }) {
+    const mx = W * m.x, my = H * m.y;
+    const amostras = [de, ate, ...camera.filter((k) => k.t > de && k.t < ate).map((k) => k.t)];
+    const persp = D / Math.max(1, D - z);
+    let x0 = -Infinity, x1 = Infinity, y0 = -Infinity, y1 = Infinity;
+    for (const t of amostras) {
+        const c = camEm(camera, t);
+        const s = (c.zoom || 1) * 1.008 * persp * 1.02;
+        const giro = Math.abs(Math.sin(((c.rot || 0) * Math.PI) / 180));
+        // O giro tira do lugar o canto do bloco, não o do quadro: meia altura do bloco basta (¼ do quadro).
+        const folgaX = W * 0.006 + (H / 4) * giro, folgaY = H * 0.005 + (W / 4) * giro;
+        x0 = Math.max(x0, W / 2 + c.x - (W / 2 - mx) / s + folgaX);
+        x1 = Math.min(x1, W / 2 + c.x + (W / 2 - mx) / s - folgaX);
+        y0 = Math.max(y0, H / 2 + c.y - (H / 2 - my) / s + folgaY);
+        y1 = Math.min(y1, H / 2 + c.y + (H / 2 - my) / s - folgaY);
+    }
+    return { x0: r1(x0), x1: r1(x1), y0: r1(y0), y1: r1(y1) };
+}
+
+module.exports = { MARGEM, areaSegura, ehFundo, caixaDe, guardarCena, guardarPlano, limitesNaCamera, PECAS_FUNDO };

package/lib/estudio/personagem.js

@@ -0,0 +1,232 @@
+/**
+ * personagem.js — o vídeo GRAVADO em 3D: personagens que falam, com câmera de filme.
+ *
+ *   "uma animação em 3D do Claude falando com o usuário sobre por que ele gasta
+ *    token demais ... como se fosse gravado mesmo, só que tudo em 3D"
+ *    (Joel, 10/10)
+ *
+ * Até aqui o 3D do Estúdio era objeto girando numa batida (kit/tres.jsx). Aqui
+ * o vídeo inteiro é uma cena: um set (podcast, escritório, estúdio), um ou dois
+ * personagens modelados de geometria (gente ou robô), a boca que segue a voz
+ * letra por letra, piscada, sobrancelha, cabeça que vira para quem fala, gesto
+ * na palavra forte, e a câmera que corta como num programa gravado — plano
+ * aberto, ombro, close, detalhe — com o leve balanço de câmera na mão.
+ *
+ * Toda decisão (quem fala quando, que plano em cada trecho, a aparência de
+ * cada um, o destaque na tela) é tomada AQUI, no node, e testada; o
+ * kit/personagem.jsx só desenha o que a partitura manda.
+ *
+ * O contrato do roteiro (tudo opcional, além de partes[].texto):
+ *   parte.falante  = "claude"              (falantes.js: uma voz por falante)
+ *   parte.emocao   = feliz|serio|surpreso|pensativo|animado|curioso
+ *   parte.destaque = "70% menos tokens"    (o cartão que aparece na fala)
+ *   roteiro.personagens = { "claude": { tipo: "robo", cor: "#..." },
+ *                           "joel": { tipo: "pessoa", pele, cabelo, corCabelo, roupa } }
+ *   roteiro.cenario = podcast|escritorio|estudio|noite
+ */
+
+'use strict';
+
+const { volumesDaTrilha } = require('./ritmo.js');
+
+const FPS = 30;
+const r2 = (x) => Math.round(x * 100) / 100;
+
+// Nome que é de máquina vira robô, se o roteiro não disse o tipo.
+const EH_ROBO = /\b(ia|ai|assistente|rob[oô]|bot|claude|gpt|chatgpt|gemini|primo|primocode|copilot|agente|maquina|máquina|computador)\b/i;
+
+const PELES = ['#f2c9a6', '#e3b08a', '#c98d66', '#9a6342', '#6b4229'];
+const CABELOS = ['curto', 'cacheado', 'longo', 'topete', 'coque', 'careca'];
+const CORES_CABELO = ['#1d1612', '#3b2618', '#6b4423', '#b5895a', '#d8c39a', '#2b2b30'];
+const ROUPAS = ['#2f4cdd', '#1f8a5b', '#e0e0e6', '#d0452f', '#24262d', '#f1b434', '#7b5cff'];
+const ROBOS = ['#eef0f4', '#f4e9dc', '#dfe8f3', '#2a2d35'];
+
+/* Os sets. Cada um: parede, segunda parede (painéis), chão, acento (neon e
+   luz de recorte), a mesa e o que mais há no fundo. Joel gosta de verde e azul. */
+const CENARIOS = {
+    podcast: { parede: '#16202e', parede2: '#1d2a3c', chao: '#2a2522', acento: '#3ddc97', luz: '#ffd9a8', mesa: true, microfones: true, neon: 'NO AR' },
+    estudio: { parede: '#0f1d2a', parede2: '#132838', chao: '#1b1d22', acento: '#2fa4ff', luz: '#e6f1ff', mesa: true, microfones: false, neon: '' },
+    escritorio: { parede: '#d9d2c5', parede2: '#cbc2b2', chao: '#8b6a4a', acento: '#1f8a5b', luz: '#fff1dc', mesa: true, microfones: false, neon: '' },
+    noite: { parede: '#120f1f', parede2: '#1a1530', chao: '#141218', acento: '#7b5cff', luz: '#c8b8ff', mesa: true, microfones: true, neon: 'ON' },
+};
+
+/** Um número de 0 a 1 a partir de um texto: a mesma pessoa sai sempre igual. */
+function hashDe(txt) {
+    let h = 2166136261;
+    for (const c of String(txt)) { h ^= c.charCodeAt(0); h = Math.imul(h, 16777619); }
+    return (h >>> 0) / 4294967296;
+}
+const pegar = (lista, k) => lista[Math.floor(k * lista.length) % lista.length];
+
+function rng(semente) {
+    let s = (Number(semente) >>> 0) || 1;
+    return () => { s = (Math.imul(s ^ (s >>> 15), 2246822507) + 0x9e3779b9) >>> 0; return s / 4294967296; };
+}
+
+/** A aparência de quem fala: o que o roteiro disse vale; o resto sai do nome. */
+function aparencia(nome, pedido = {}) {
+    const k = (s) => hashDe(nome + ':' + s);
+    const tipo = pedido.tipo === 'robo' || pedido.tipo === 'pessoa' ? pedido.tipo : (EH_ROBO.test(nome) ? 'robo' : 'pessoa');
+    const rotulo = String(pedido.rotulo || pedido.nome || nome || '').trim().slice(0, 24);
+    if (tipo === 'robo') {
+        return { nome, rotulo, tipo, cor: pedido.cor || pegar(ROBOS, k('cor')), olhos: pedido.olhos || null };
+    }
+    return {
+        nome, rotulo, tipo,
+        pele: pedido.pele || pegar(PELES, k('pele')),
+        cabelo: CABELOS.includes(pedido.cabelo) ? pedido.cabelo : pegar(CABELOS, k('cabelo')),
+        corCabelo: pedido.corCabelo || pegar(CORES_CABELO, k('corCabelo')),
+        roupa: pedido.roupa || pegar(ROUPAS, k('roupa')),
+        oculos: pedido.oculos != null ? !!pedido.oculos : k('oculos') < 0.3,
+        barba: !!pedido.barba,   // só quando pedida: sorteada, ficava estranha em quem tem cabelo longo
+    };
+}
+
+const EMOCOES = ['neutro', 'feliz', 'serio', 'surpreso', 'pensativo', 'animado', 'curioso'];
+function emocaoDe(pt, texto) {
+    const e = String(pt.emocao || '').toLowerCase();
+    if (EMOCOES.includes(e)) return e;
+    if (/\?\s*$/.test(texto)) return 'curioso';
+    if (/!\s*$/.test(texto)) return 'animado';
+    return 'neutro';
+}
+
+/** O cartão da fala: o que o roteiro deu, ou o primeiro número que a fala diz. */
+function destaqueDe(pt, texto) {
+    if (typeof pt.destaque === 'string' && pt.destaque.trim()) return pt.destaque.trim().slice(0, 40);
+    if (pt.destaque === false) return null;
+    const m = /(R\$\s?\d[\d.,]*|\d+[\d.,]*\s?(%|x|mil|milh[õo]es|tokens?|vezes|segundos|minutos|horas))/i.exec(texto);
+    return m ? m[1].trim() : null;
+}
+
+const falaDe = (pt) => String(pt.texto || pt.fala || pt.narracao || pt.titulo || '').trim();
+
+/* Sem os tempos da voz, cada fala ganha o tempo de leitura (2,6 palavras/s)
+   e as palavras se repartem pelo tamanho. */
+function temposEstimados(partes) {
+    let t = 0.4;
+    return partes.map((pt) => {
+        const ws = falaDe(pt).split(/\s+/).filter(Boolean);
+        const dur = Math.max(1.2, ws.length / 2.6);
+        const letras = ws.reduce((n, w) => n + w.length, 0) || 1;
+        let a = t;
+        const palavras = ws.map((w) => { const d = (w.length / letras) * dur; const p = { texto: w, de: a, ate: a + d }; a += d; return p; });
+        const r = { de: t, ate: t + dur, palavras };
+        t += dur + 0.35;
+        return r;
+    });
+}
+
+/* OS PLANOS. A gramática de programa gravado: abre no aberto, corta no
+   começo de cada fala (um tico antes da voz), alterna ombro e close na troca
+   de quem fala, volta ao aberto de tempos em tempos, e fala longa ganha um
+   segundo ângulo no meio, numa fronteira de palavra. */
+function planosDe(falas, { dois, duracao, aleatorio }) {
+    const planos = [];
+    const MOV = ['entra', 'fixo', 'lateral', 'entra', 'sai'];
+    let ultimoTipo = null;
+    const por = (de, tipo, alvo) => {
+        if (planos.length && de - planos[planos.length - 1].de < 0.9) { // corte colado no anterior: troca o anterior
+            const p = planos[planos.length - 1]; p.tipo = tipo; p.alvo = alvo; return;
+        }
+        planos.push({ de: r2(Math.max(0, de)), tipo, alvo, mov: MOV[Math.floor(aleatorio() * MOV.length)], lado: aleatorio() < 0.5 ? -1 : 1 });
+        ultimoTipo = tipo;
+    };
+    por(0, dois ? 'aberto' : 'medio', 0);
+    falas.forEach((f, i) => {
+        const anterior = falas[i - 1];
+        const troca = !anterior || anterior.quem !== f.quem;
+        let tipo;
+        if (i === 0) tipo = dois ? 'aberto' : 'medio';
+        else if (i % 4 === 0) tipo = dois ? 'aberto' : 'largo';
+        else if (dois && troca) tipo = ultimoTipo === 'ombro' ? 'close' : 'ombro';
+        else tipo = ultimoTipo === 'close' ? 'medio' : 'close';
+        if (i > 0) por(f.de - 0.1, tipo, f.quem);
+        else if (planos[0].tipo !== tipo) planos[0].tipo = tipo;
+        // Fala longa: um segundo ângulo no meio, colado numa palavra.
+        if (f.ate - f.de > 5.5 && f.palavras.length > 6) {
+            const meio = (f.de + f.ate) / 2;
+            const w = f.palavras.reduce((b, x) => (Math.abs(x.de - meio) < Math.abs(b.de - meio) ? x : b), f.palavras[0]);
+            por(w.de - 0.05, tipo === 'close' ? 'detalhe' : 'close', f.quem);
+        }
+    });
+    for (let k = 0; k < planos.length; k++) planos[k].ate = r2(k + 1 < planos.length ? planos[k + 1].de : duracao);
+    return planos;
+}
+
+/** A partitura inteira: o que o kit/personagem.jsx desenha, quadro a quadro. */
+function partituraDe({ roteiro = {}, largura = 1920, altura = 1080, tempos = [] }) {
+    const partes = (roteiro.partes || []).filter((p) => p && typeof p === 'object' && falaDe(p));
+    const ts = tempos.length === partes.length ? tempos : temposEstimados(partes);
+    const semente = roteiro.semente != null ? roteiro.semente : Math.floor(hashDe(partes.map(falaDe).join('|')) * 1e9);
+    const aleatorio = rng(semente);
+
+    // O elenco, na ordem em que fala. Sem falante, um apresentador só.
+    const nomes = [];
+    for (const pt of partes) {
+        const f = typeof pt.falante === 'string' && pt.falante.trim() ? pt.falante.trim().toLowerCase() : 'apresentador';
+        if (!nomes.includes(f)) nomes.push(f);
+    }
+    const pedidos = roteiro.personagens && typeof roteiro.personagens === 'object' ? roteiro.personagens : {};
+    const pedidoDe = (n) => pedidos[n] || pedidos[Object.keys(pedidos).find((k) => k.toLowerCase() === n)] || {};
+    // No set cabem dois; o terceiro em diante divide o lugar (raro num diálogo).
+    const elenco = nomes.slice(0, 2).map((n, i) => ({ ...aparencia(n, pedidoDe(n)), lado: nomes.length > 1 ? (i === 0 ? -1 : 1) : 0 }));
+    const quemDe = (pt) => {
+        const f = typeof pt.falante === 'string' && pt.falante.trim() ? pt.falante.trim().toLowerCase() : 'apresentador';
+        return nomes.indexOf(f) % Math.max(1, elenco.length);
+    };
+
+    const falas = partes.map((pt, i) => {
+        const t = ts[i] || {};
+        const texto = falaDe(pt);
+        const palavras = (t.palavras && t.palavras.length ? t.palavras : temposEstimados([pt])[0].palavras.map((w) => ({ ...w, de: w.de - 0.4 + (t.de || 0), ate: w.ate - 0.4 + (t.de || 0) })))
+            .map((w) => ({ t: String(w.texto || w.word || ''), de: r2(w.de), ate: r2(w.ate) }));
+        return {
+            quem: quemDe(pt), de: r2(t.de != null ? t.de : (palavras[0] || {}).de || 0), ate: r2(t.ate != null ? t.ate : (palavras[palavras.length - 1] || {}).ate || 0),
+            texto, palavras, emocao: emocaoDe(pt, texto), destaque: destaqueDe(pt, texto),
+        };
+    });
+    const duracao = r2((falas.length ? falas[falas.length - 1].ate : 3) + 1.2);
+
+    const nomeCen = CENARIOS[String(roteiro.cenario || '').toLowerCase()] ? String(roteiro.cenario).toLowerCase()
+        : pegar(Object.keys(CENARIOS), aleatorio());
+    const cenario = { nome: nomeCen, ...CENARIOS[nomeCen] };
+    if (roteiro.acento && /^#[0-9a-f]{6}$/i.test(roteiro.acento)) cenario.acento = roteiro.acento;
+
+    const planos = planosDe(falas, { dois: elenco.length > 1, duracao, aleatorio });
+    return {
+        versao: 1, fps: FPS, largura, altura, duracao, semente, cenario, elenco, falas, planos,
+        legenda: roteiro.legenda !== false,
+        titulo: typeof roteiro.titulo === 'string' ? roteiro.titulo.slice(0, 60) : '',
+        filme: { grao: roteiro.grao !== false, vinheta: true },
+    };
+}
+
+function montarPersonagem({ roteiro, largura = 1920, altura = 1080, tempos = [], narracao = null, sons = {}, trilha = null }) {
+    const partes = ((roteiro && roteiro.partes) || []).filter((p) => p && typeof p === 'object');
+    if (!partes.length) return { ok: false, error: 'o roteiro veio sem partes.' };
+    const partitura = partituraDe({ roteiro: { ...roteiro, partes }, largura, altura, tempos });
+    if (!partitura.falas.length) return { ok: false, error: 'o roteiro veio sem fala: o personagem precisa de texto em cada parte.' };
+    const DUR = partitura.duracao;
+    const efeitos = [];
+    const som = (t, nome, volume) => { if (sons[nome]) efeitos.push({ t: r2(Math.max(0, t)), src: sons[nome], volume }); };
+    for (const f of partitura.falas) if (f.destaque) som(f.de + 0.3, 'pop', 0.16);
+    // A música bem baixa: é conversa, a voz manda.
+    const volumes = volumesDaTrilha(tempos.length === partes.length ? tempos : [], DUR, { alto: 0.32, baixo: 0.09 });
+    const plano = {
+        formato: { largura, altura, fps: FPS },
+        fundoGeral: partitura.cenario.parede,
+        cenas: [{ duracao: DUR, fundo: partitura.cenario.parede, elementos: [{ tipo: 'kit', peca: 'personagem', partitura, x: 0, y: 0, largura, altura }] }],
+        audio: {
+            ...(narracao ? { narracao } : {}),
+            ...(trilha ? { trilha: { src: trilha, volumes, loop: true } } : {}),
+            efeitos,
+        },
+    };
+    return {
+        ok: true, plano, partitura,
+        resumo: { cenas: 1, segundos: DUR, fps: FPS, cenario: partitura.cenario.nome, elenco: partitura.elenco.map((e) => `${e.rotulo} (${e.tipo})`), planos: partitura.planos.length, falas: partitura.falas.length },
+    };
+}
+
+module.exports = { montarPersonagem, partituraDe, planosDe, aparencia, destaqueDe, emocaoDe, CENARIOS, EH_ROBO, FPS };

package/lib/estudio/print-site.js

@@ -149,4 +149,193 @@ function elementoDoPrint(print, { quadroW = 1920, quadroH = 1080, t = 0 } = {})
     };
 }
 
-module.exports = { capturarSite, elementoDoPrint, normalizarUrl, TELAS, ALTURA_MAX };
+
+/* ── O ELEMENTO DO SITE, TIRADO PELO CÓDIGO ───────────────────────────────
+ *
+ *   "tirar uma coisa, recortar o fundo, deixar só um elemento do site, ou ele
+ *    extrair por código — ele lê o código do site, pega os elementos e põe
+ *    no vídeo" (Joel, 10/10)
+ *
+ * O print inteiro mostra a página; o vídeo muitas vezes quer UMA peça dela: o
+ * botão de assinar, o cartão de preço, a logo, o título. Aqui o navegador
+ * escondido lê o DOM e devolve as peças que dá para tirar (com o seletor de
+ * cada uma), e depois tira a escolhida SOZINHA, com o fundo transparente:
+ * tudo na página fica invisível menos ela (visibility, que não mexe no
+ * layout), e o print sai em PNG com alfa, no dobro da resolução. Junto vem o
+ * código dela (o HTML e o estilo calculado: fonte, cor, raio, sombra), para o
+ * modelo poder também REDESENHAR a peça como componente, se preferir. */
+
+// O seletor único de um elemento, curto e legível (id > classes > posição).
+const SELETOR_JS = `function __sel(el) {
+  if (el.id && /^[a-z][\\w-]*$/i.test(el.id) && document.querySelectorAll('#' + el.id).length === 1) return '#' + el.id;
+  const partes = []; let e = el;
+  while (e && e.nodeType === 1 && e !== document.body && partes.length < 7) {
+    let s = e.tagName.toLowerCase();
+    const cls = [...e.classList].filter((c) => /^[a-z][\\w-]{1,30}$/i.test(c)).slice(0, 2);
+    if (cls.length) s += '.' + cls.join('.');
+    const pai = e.parentElement;
+    if (pai) { const irm = [...pai.children].filter((x) => x.tagName === e.tagName); if (irm.length > 1) s += ':nth-of-type(' + (irm.indexOf(e) + 1) + ')'; }
+    partes.unshift(s);
+    try { if (document.querySelectorAll(partes.join(' > ')).length === 1) return partes.join(' > '); } catch (_) {}
+    e = pai;
+  }
+  return partes.join(' > ');
+}`;
+
+const LISTAR = `(() => {
+  ${SELETOR_JS}
+  const vis = (el) => { const r = el.getBoundingClientRect(); const cs = getComputedStyle(el);
+    return r.width > 20 && r.height > 12 && cs.visibility !== 'hidden' && cs.display !== 'none' && +cs.opacity > 0.05; };
+  const txt = (el) => String(el.innerText || el.getAttribute('alt') || el.getAttribute('aria-label') || '').replace(/\\s+/g, ' ').trim().slice(0, 70);
+  const out = [], vistos = new Set();
+  const por = (el, tipo) => {
+    if (!el || vistos.has(el) || !vis(el)) return;
+    vistos.add(el);
+    const r = el.getBoundingClientRect();
+    out.push({ tipo, seletor: __sel(el), texto: txt(el), largura: Math.round(r.width), altura: Math.round(r.height), y: Math.round(r.top + scrollY) });
+  };
+  const logo = document.querySelector('header img[alt*="logo" i], header [class*="logo" i], img[alt*="logo" i], [class*="logo" i] img, [class*="logo" i] svg, header svg, header img');
+  por(logo, 'logo');
+  por(document.querySelector('nav') || document.querySelector('header'), 'menu');
+  const h1 = document.querySelector('h1');
+  por(h1, 'titulo');
+  if (h1) { let e = h1.parentElement; while (e && e !== document.body && e.getBoundingClientRect().height < innerHeight * 0.45) e = e.parentElement; if (e && e !== document.body) por(e, 'hero'); }
+  const botoes = [...document.querySelectorAll('a, button, [role=button]')].filter((b) => {
+    const cs = getComputedStyle(b), r = b.getBoundingClientRect();
+    const temCor = cs.backgroundColor && !/rgba\\(0, 0, 0, 0\\)|transparent/.test(cs.backgroundColor);
+    return txt(b) && r.width >= 70 && r.height >= 28 && r.height < 120 && (temCor || parseFloat(cs.borderWidth) > 0) && r.top + scrollY < innerHeight * 3;
+  });
+  botoes.slice(0, 5).forEach((b) => por(b, 'botao'));
+  // Cartões: três ou mais irmãos com a mesma classe e tamanho de cartão.
+  const grupos = new Map();
+  for (const el of document.querySelectorAll('body *')) {
+    if (!el.className || typeof el.className !== 'string' || !el.parentElement) continue;
+    const k = el.parentElement.tagName + '|' + el.className;
+    const r = el.getBoundingClientRect();
+    if (r.width < 140 || r.width > 700 || r.height < 100 || r.height > 900) continue;
+    if (!grupos.has(k)) grupos.set(k, []);
+    grupos.get(k).push(el);
+  }
+  [...grupos.values()].filter((g) => g.length >= 3).slice(0, 4).forEach((g) => { por(g[0], 'cartao'); });
+  [...document.querySelectorAll('img')].filter((i) => (i.naturalWidth || 0) >= 300).slice(0, 4).forEach((i) => por(i, 'imagem'));
+  por(document.querySelector('form'), 'formulario');
+  por(document.querySelector('[class*="pric" i], [id*="pric" i], [class*="preco" i], [class*="plano" i]'), 'preco');
+  por(document.querySelector('footer'), 'rodape');
+  return JSON.stringify(out.slice(0, 25));
+})()`;
+
+/* Acha o alvo (pelo seletor ou pelo texto), isola e devolve a caixa e o código. */
+const ISOLAR = (seletor, texto, transparente) => `(async () => {
+  let alvo = null;
+  try { alvo = ${JSON.stringify(seletor || '')} ? document.querySelector(${JSON.stringify(seletor || '')}) : null; } catch (_) {}
+  const quer = ${JSON.stringify(String(texto || '').toLowerCase())};
+  if (!alvo && quer) {
+    const cand = [...document.querySelectorAll('a, button, h1, h2, h3, h4, p, li, span, div, section, article, img, figure')]
+      .filter((e) => { const t = String(e.innerText || e.getAttribute('alt') || '').toLowerCase(); const r = e.getBoundingClientRect(); return t.includes(quer) && r.width > 10 && r.height > 8; });
+    // O MENOR que contém o texto: o botão, e não a seção inteira em volta dele.
+    cand.sort((a, b) => { const ra = a.getBoundingClientRect(), rb = b.getBoundingClientRect(); return ra.width * ra.height - rb.width * rb.height; });
+    alvo = cand[0] || null;
+  }
+  if (!alvo) return JSON.stringify({ erro: 'não achei esse elemento na página' });
+  alvo.scrollIntoView({ block: 'center' });
+  await new Promise((r) => setTimeout(r, 500));
+  if (${transparente ? 'true' : 'false'}) {
+    alvo.setAttribute('data-primo-alvo', '1');
+    const st = document.createElement('style');
+    st.textContent = 'html, body { background: transparent !important; } body * { visibility: hidden !important; } '
+      + '[data-primo-alvo], [data-primo-alvo] * { visibility: visible !important; }';
+    document.head.appendChild(st);
+    await new Promise((r) => setTimeout(r, 150));
+  }
+  const r = alvo.getBoundingClientRect();
+  const cs = getComputedStyle(alvo);
+  const html = alvo.outerHTML.replace(/<script[\\s\\S]*?<\\/script>/gi, '').replace(/\\s+/g, ' ').slice(0, 3000);
+  return JSON.stringify({ x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height, html, texto: String(alvo.innerText || '').trim().slice(0, 200),
+    estilo: { fonte: cs.fontFamily, peso: cs.fontWeight, tamanho: cs.fontSize, cor: cs.color, fundo: cs.backgroundColor, raio: cs.borderRadius, sombra: cs.boxShadow !== 'none' ? cs.boxShadow : '', borda: cs.border } });
+})()`;
+
+async function abrir(navegador, alvo, metrica, op = {}) {
+    const aba = await navegador.abaEscondida('about:blank', { assentar: 0 });
+    const s = aba.sessao;
+    await s.send('Emulation.setDeviceMetricsOverride', metrica);
+    if (metrica.mobile) await s.send('Emulation.setTouchEmulationEnabled', { enabled: true }).catch(() => {});
+    await s.send('Page.navigate', { url: alvo });
+    const prazo = Date.now() + (op.prazo || 20000);
+    while (Date.now() < prazo) {
+        if (await valor(s, 'document.readyState') === 'complete') break;
+        await sleep(200);
+    }
+    await sleep(op.assentar == null ? 1500 : op.assentar);
+    return aba;
+}
+
+/**
+ * As peças que dá para tirar do site: logo, menu, título, hero, botões,
+ * cartões, imagens, formulário, preço, rodapé — cada uma com o seletor.
+ */
+async function elementosDoSite(url, op = {}) {
+    const alvo = normalizarUrl(url);
+    if (!alvo) return { ok: false, error: `"${url || ''}" não é o endereço de um site (http ou https).` };
+    const navegador = op.navegador || require('../browser.js');
+    let aba;
+    try {
+        aba = await abrir(navegador, alvo, TELAS[op.celular ? 'celular' : 'computador'], op);
+        let lista = [];
+        try { lista = JSON.parse(await valor(aba.sessao, LISTAR) || '[]'); } catch { /* vazio */ }
+        return { ok: true, url: alvo, elementos: lista,
+            proximo: 'estudio_midia acao:elemento com url e seletor (ou texto: "o que está escrito nele") tira a peça sozinha, com fundo transparente.' };
+    } catch (e) {
+        return { ok: false, error: `não consegui ler ${alvo}: ${e.message}` };
+    } finally {
+        if (aba) { try { await aba.fechar(); } catch { /* já fechou */ } }
+    }
+}
+
+/**
+ * Tira UM elemento do site, sozinho: PNG transparente no dobro da resolução,
+ * mais o código dele (html e estilo calculado).
+ *
+ * @param {object} op { pasta, seletor, texto, celular, transparente (padrão true), margem }
+ */
+async function capturarElemento(url, op = {}) {
+    const alvo = normalizarUrl(url);
+    if (!alvo) return { ok: false, error: `"${url || ''}" não é o endereço de um site (http ou https).` };
+    if (!op.pasta) return { ok: false, error: 'o elemento vai para a pasta do projeto — diga o projeto (id).' };
+    if (!op.seletor && !op.texto) return { ok: false, error: 'diga qual elemento: seletor (de acao:elementos) ou texto (o que está escrito nele).' };
+    const navegador = op.navegador || require('../browser.js');
+    const tela = op.celular ? 'celular' : 'computador';
+    const metrica = { ...TELAS[tela], deviceScaleFactor: 2 };
+    const transparente = op.transparente !== false;
+    let aba;
+    try {
+        aba = await abrir(navegador, alvo, metrica, op);
+        const s = aba.sessao;
+        let info = {};
+        try { info = JSON.parse(await valor(s, ISOLAR(op.seletor, op.texto, transparente), true) || '{}'); } catch { /* sem */ }
+        if (info.erro || !info.w) return { ok: false, error: info.erro || 'o elemento não tem tamanho na tela (escondido?)' };
+        if (transparente) await s.send('Emulation.setDefaultBackgroundColorOverride', { color: { r: 0, g: 0, b: 0, a: 0 } }).catch(() => {});
+        const m = op.margem == null ? 8 : Number(op.margem) || 0;
+        const clip = { x: Math.max(0, info.x - m), y: Math.max(0, info.y - m), width: info.w + 2 * m, height: Math.min(info.h + 2 * m, 4000), scale: 1 };
+        const r = await s.send('Page.captureScreenshot', { format: 'png', captureBeyondViewport: true, clip }, 60000);
+        if (!r || !r.data) return { ok: false, error: 'o navegador devolveu um print vazio.' };
+        const host = new URL(alvo).hostname.replace(/^www\./, '').replace(/[^a-z0-9.-]/gi, '-');
+        const nome = String(op.seletor || op.texto).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 30) || 'elemento';
+        const src = `midia/site/${host}-${nome}.png`;
+        const cheio = path.join(op.pasta, src);
+        fs.mkdirSync(path.dirname(cheio), { recursive: true });
+        fs.writeFileSync(cheio, Buffer.from(r.data, 'base64'));
+        const largura = Math.round(clip.width), altura = Math.round(clip.height);
+        return {
+            ok: true, src, url: alvo, largura, altura, proporcao: Math.round((altura / largura) * 1000) / 1000, transparente,
+            texto: info.texto, codigo: { html: info.html, estilo: info.estilo },
+            elemento: { tipo: 'imagem', src, ajuste: 'contain', x: 0, y: 0, largura, altura },
+            nota: 'O PNG tem o dobro da resolução: escale à vontade. O código (html e estilo) serve para redesenhar a peça como componente, se preferir animá-la por dentro.',
+        };
+    } catch (e) {
+        return { ok: false, error: `não consegui tirar o elemento de ${alvo}: ${e.message}` };
+    } finally {
+        if (aba) { try { await aba.fechar(); } catch { /* já fechou */ } }
+    }
+}
+
+module.exports = { capturarSite, elementoDoPrint, elementosDoSite, capturarElemento, normalizarUrl, TELAS, ALTURA_MAX, LISTAR, ISOLAR };