primocode 8.37.0 → 8.38.0

package/lib/ui.js

@@ -243,28 +243,45 @@ function welcomeBox(version, contexto, opts = {}) {
     return out.join('\n');
 }
 
+/* As frases que giram enquanto o Primo trabalha. Trocam sozinhas a cada
+   poucos segundos, em ordem, e NENHUMA fala de limite, cota, modelo ou espera
+   — de propósito: a mesma lista cobre o pensamento comum e a janela do minuto
+   que estourou. Quem olha não distingue um do outro, e é isso que o dono
+   pediu ("nunca mostrar limitações tipo limite do minuto, tudo deve ocorrer
+   ocultamente"). */
+const PENSANDO = ['Primo Code pensando', 'organizando as ideias', 'juntando as peças', 'revendo o caminho', 'pensando no próximo passo'];
+
 class Spinner {
     constructor(text='pensando') {
-        this.text = text;
+        this.textos = Array.isArray(text) ? text : [text];
+        this.text = this.textos[0];
         this.frames = ['⠋','⠙','⠹','⠸','⠼','⠴','⠦','⠧','⠇','⠏'];
-        this.i = 0; this.timer = null;
+        this.i = 0; this.timer = null; this.desde = 0; this.largura = 0;
     }
     start() {
         // Fora de um terminal (pipe, CI) a animação só sujaria a saída.
         if (!process.stdout.isTTY) return this;
+        this.desde = Date.now();
         this.timer = setInterval(() => {
-            process.stdout.write(`\r  ${c.muted(this.frames[this.i])} ${c.muted(this.text)}`);
+            // Com mais de uma frase, troca a cada 4s. A frase nova pode ser mais
+            // curta que a anterior: o resto da linha velha ficaria na tela, então
+            // a linha é sempre preenchida até a maior largura já escrita.
+            if (this.textos.length > 1) this.text = this.textos[Math.floor((Date.now() - this.desde) / 4000) % this.textos.length];
+            const cru = `  ${this.frames[this.i]} ${this.text}`;
+            const falta = Math.max(0, this.largura - cru.length);
+            this.largura = Math.max(this.largura, cru.length);
+            process.stdout.write(`\r  ${c.muted(this.frames[this.i])} ${c.muted(this.text)}${' '.repeat(falta)}`);
             this.i = (this.i+1) % this.frames.length;
         }, 80);
         return this;
     }
     stop() {
-        if (this.timer) { clearInterval(this.timer); this.timer = null; process.stdout.write(`\r${' '.repeat(80)}\r`); }
+        if (this.timer) { clearInterval(this.timer); this.timer = null; process.stdout.write(`\r${' '.repeat(Math.max(80, this.largura + 4))}\r`); }
     }
 }
 
-function actionHeader(name, args) {
-    const nice = {
+// O rótulo de cada tool na tela — o que a pessoa lê no lugar do nome interno.
+const ROTULOS = {
         read_file:'Read', write_file:'Write', edit_file:'Edit', multi_edit:'MultiEdit',
         list_dir:'List', glob:'Glob', grep:'Grep', run_shell:'Bash',
         run_in_new_terminal:'Terminal', open_in_browser:'Open', spawn_agent:'Agent',
@@ -281,14 +298,32 @@ function actionHeader(name, args) {
         studio_versoes:'Estúdio·histórico',
         desktop_windows:'Desktop·janelas', desktop_focus:'Desktop·foco',
         desktop_elements:'Desktop·elementos', desktop_click_element:'Desktop·click',
-    };
-    const label = nice[name] || name;
-    const argStr = args ? (args.consulta || args.path || args.pattern || args.command || args.target || args.url || args.selector || args.text || args.app || args.window || args.name || args.ferramenta || args.titulo || args.description || (args.todos ? `${args.todos.length} tarefas` : '') || (args.x != null ? `${args.x},${args.y}` : '') || args.key || JSON.stringify(args).slice(0,60)) : '';
-    return `  ${c.dim('⎿')} ${c.brand(label)}${argStr ? ' '+c.muted(argStr) : ''}`;
+    studio_midia:'Estúdio·mídia', studio_analisar:'Estúdio·analisar', construir_app:'Construir',
+    remember_general:'Lembrar',
+};
+
+/* A linha da AÇÃO: `●` na cor da marca e o rótulo em negrito. O resultado
+   dela vem embaixo, com `⎿`, um degrau para dentro (ver lib/fala.js). Antes
+   cabeçalho e resultado usavam o mesmo `⎿` no mesmo nível, e dez tools
+   seguidas eram uma coluna de ganchos sem dizer o que era ação e o que era
+   saída. O argumento vem numa linha só e cortado: um comando de três linhas
+   no cabeçalho empurra o resultado para fora da vista. */
+function actionHeader(name, args) {
+    const label = ROTULOS[name] || name;
+    let argStr = args ? (args.consulta || args.path || args.pattern || args.command || args.target || args.url || args.selector || args.text || args.app || args.window || args.name || args.ferramenta || args.titulo || args.description || (args.todos ? `${args.todos.length} tarefas` : '') || (args.x != null ? `${args.x},${args.y}` : '') || args.key || args.arquivo || args.id || JSON.stringify(args).slice(0,60)) : '';
+    argStr = String(argStr || '').replace(/\s+/g, ' ').trim();
+    if (argStr.length > 96) argStr = argStr.slice(0, 95) + '…';
+    return `  ${c.brand('●')} ${c.bold(label)}${argStr ? '  '+c.muted(argStr) : ''}`;
 }
 
 // Transforma erro cru (JSON do provedor, código HTTP, erro de rede) numa frase
 // humana. O usuário nunca deveria ver um paredão de JSON.
+//
+// Sem emoji na frente, de propósito: um 💳 ou um 🔧 no começo da linha é a
+// tela gritando "ERRO" antes de a pessoa ler a frase — e o que chega aqui é
+// o que ela PRECISA fazer (crédito, chave, rede), dito com calma por
+// lib/fala.js. O que é passageiro (minuto, 429, 5xx) nem chega: o agente e o
+// chat esperam e repetem sem contar a ninguém.
 function friendlyError(raw) {
     const s = String(raw && raw.message ? raw.message : raw || '').trim();
     const low = s.toLowerCase();
@@ -308,7 +343,7 @@ function friendlyError(raw) {
     // é porque nem o mínimo cabe.
     if (/can only afford|requires more credits|\b402\b/i.test(low)) {
         const q = s.match(/afford\s+(\d+)/i);
-        return '💳 A conta do OpenRouter não tem crédito para uma resposta deste tamanho'
+        return 'A conta do OpenRouter não tem crédito para uma resposta deste tamanho'
             + (q ? ` (dá para ${q[1]} tokens)` : '')
             + '. Adicione crédito em openrouter.ai/settings/credits, ou use /model fast'
             + ' para pedidos menores.';
@@ -318,7 +353,7 @@ function friendlyError(raw) {
     // apelidos padrão já são grátis, então quem cai aqui forçou um modelo pago.
     if (/prompt tokens limit exceeded/i.test(low)) {
         const n = s.match(/exceeded:\s*(\d+)\s*>\s*(\d+)/i);
-        return '🆓 Este modelo é pago e a conta não tem crédito, então o provedor corta o pedido'
+        return 'Este modelo é pago e a conta não tem crédito, então o provedor corta o pedido'
             + (n ? ` em ${n[2]} tokens (o seu tem ${n[1]})` : '')
             + '. Use /model main — os modelos padrão são grátis e não têm esse corte.';
     }
@@ -329,8 +364,8 @@ function friendlyError(raw) {
         || /conversa passou do teto/i.test(low);
     if (porTamanho) {
         const nums = s.match(/Limit\s+(\d+),\s*Requested\s+(\d+)/i);
-        if (/conversa passou do teto/i.test(low)) return `📏 ${inner.replace(/\s+/g, ' ').trim()}`;
-        return '📏 Este pedido é maior que o teto do plano'
+        if (/conversa passou do teto/i.test(low)) return `${inner.replace(/\s+/g, ' ').trim()}`;
+        return 'Este pedido é maior que o teto do plano'
             + (nums ? ` (${nums[2]} tokens contra um limite de ${nums[1]} por minuto)` : '')
             + '. Esperar não resolve: use /clear para encurtar a conversa, ou divida o pedido em partes menores.';
     }
@@ -343,7 +378,7 @@ function friendlyError(raw) {
         const bruto = (s.match(/try again in ([0-9hms.]+)/i) || [])[1];
         const quando = bruto && bruto.replace(/\.+$/, '').replace(/\.\d+s$/, 's');
         const uso = s.match(/Limit\s+(\d+),\s*Used\s+(\d+)/i);
-        return '📅 A cota de tokens do dia acabou'
+        return 'A cota de tokens do dia acabou'
             + (uso ? ` (${uso[2]} de ${uso[1]} tokens)` : '')
             + (quando ? `, libera em ${quando}` : '')
             + '. Enquanto isso o /mode chat gasta bem menos por pergunta.';
@@ -358,12 +393,12 @@ function friendlyError(raw) {
         // texto genérico faria o usuário achar que não havia nada a fazer.
         const semChave = s.match(/provedor de reserva \(([^)]+)\) está sem chave/i);
         if (semChave) {
-            return `📅 A cota diária de grátis do OpenRouter acabou (são 50 por dia na conta sem crédito),`
+            return `A cota diária de grátis do OpenRouter acabou (são 50 por dia na conta sem crédito),`
                 + ` e o provedor de reserva (${semChave[1]}) está sem chave no servidor — não houve para onde cair.`
                 + ` Configure a chave dele no Render, ou adicione 10 dólares de crédito no OpenRouter`
                 + ` para subir de 50 para 1.000 pedidos por dia (esse crédito não é gasto pelos modelos grátis).`;
         }
-        return '📅 A cota diária de grátis acabou nos DOIS provedores (OpenRouter e Groq).'
+        return 'A cota diária de grátis acabou nos DOIS provedores (OpenRouter e Groq).'
             + ' Se chegou até aqui, o servidor já tentou os dez modelos da corrente.'
             + ' Trocar de modelo não resolve: o limite é da conta, não do modelo.'
             + ' Adicionar 10 dólares de crédito no OpenRouter sobe de 50 para 1.000 pedidos'
@@ -371,18 +406,18 @@ function friendlyError(raw) {
             + ' Sem isso, libera amanhã.';
     }
     if (/rate.?limit|too many requests|\b429\b/i.test(low)) {
-        return '⏳ Muitos pedidos em pouco tempo. Espere alguns instantes e tente de novo.';
+        return 'Muitos pedidos em pouco tempo. Espere alguns instantes e tente de novo.';
     }
     // "token" solto não serve de pista: a mensagem de TPM tem a palavra e não
     // tem nada a ver com autenticação. Exige o código ou a frase inteira.
     if (/\b401\b|unauthorized|forbidden|token (inv[aá]lido|ausente|expirado)|invalid token|missing token/i.test(low)) {
-        return '🔒 Este servidor pede um token. Configure PRIMOCODE_TOKEN ou "token" em ~/.primocode/config.json.';
+        return 'Este servidor pede um token. Configure PRIMOCODE_TOKEN ou "token" em ~/.primocode/config.json.';
     }
     if (/econnrefused|enotfound|etimedout|timeout|socket hang up|network|getaddrinfo|econnreset/i.test(low)) {
-        return '📡 Não consegui falar com o servidor. Verifique sua conexão e tente de novo.';
+        return 'Não consegui falar com o servidor. Verifique sua conexão e tente de novo.';
     }
     if (/\b5\d\d\b|internal server|bad gateway|service unavailable|gateway timeout/i.test(low)) {
-        return '🔧 O servidor está fora do ar no momento. Tente de novo em instantes.';
+        return 'O servidor está fora do ar no momento. Tente de novo em instantes.';
     }
     // Sobrou algo específico: mostra só a mensagem interna, sem o JSON gigante.
     const clean = inner.replace(/\s+/g, ' ').trim();
@@ -390,4 +425,4 @@ function friendlyError(raw) {
 }
 
 
-module.exports = { c, mascot, welcomeBox, Spinner, actionHeader, friendlyError, visibleWidth, stripAnsi, truncate, padRight };
+module.exports = { c, mascot, welcomeBox, Spinner, PENSANDO, actionHeader, friendlyError, visibleWidth, stripAnsi, truncate, padRight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "8.37.0",
+  "version": "8.38.0",
   "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": {
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "start": "node bin/primocode.js",
-    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js && node test/fala-repetida.test.js && node test/trilha.test.js && node test/anuncio.test.js && node test/pipeline.test.js && node test/app.test.js && node test/elementos.test.js && node test/remotion.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/codex.test.js && node test/chaves.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js"
+    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js && node test/fala-repetida.test.js && node test/trilha.test.js && node test/anuncio.test.js && node test/pipeline.test.js && node test/app.test.js && node test/elementos.test.js && node test/remotion.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/codex.test.js && node test/chaves.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/pareamento.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/icone.test.js && node test/exportar.test.js"
   },
   "engines": {
     "node": ">=18.17.0"

package/studio/ferramentas/01-modelos.md

@@ -85,8 +85,10 @@ um elemento flutuando por cima do layout.
 // IMAGEM
 { "tipo":"imagem", "src":"https://…", "ajuste":"cobrir", "raio":18 }
 
-// ÍCONE — nomes em /api/ferramentas/tela
+// ÍCONE — nomes em /api/ferramentas/tela; ou DESENHE o seu: "caminho" é o
+// path SVG numa caixa 24×24 (string ou lista de strings), no traço da casa
 { "tipo":"icone", "nome":"raio", "tamanho":120, "cor":"#ffb03a" }
+{ "tipo":"icone", "caminho":"M3 6h18l-2 10H5zM8 20h.01M16 20h.01", "tamanho":96 }
 
 // FORMA
 { "tipo":"forma", "forma":"retangulo", "x":200,"y":200,"l":400,"a":220,

package/studio/ferramentas/corte.md

@@ -332,12 +332,20 @@ depoimento é o que dá confiança, e nenhum desenho substitui.
 ```json
 { "tipo": "icone", "nome": "raio", "tamanho": 120 }
 { "tipo": "icone", "nome": "crescimento", "tamanho": 90, "cor": "#22d3ee", "traco": 2 }
+{ "tipo": "icone", "caminho": "M4 7h16M4 12h10M4 17h7", "tamanho": 100 }
+{ "tipo": "icone", "caminho": ["M12 3a9 9 0 100 18 9 9 0 000-18z", "M9 12l2 2 4-4"], "preenchido": false }
 ```
 
 O jeito mais barato de uma cena deixar de ser um slide. Um ícone grande acima
 do título, ou um por item de uma lista de três, e a mesma frase passa a ter
 imagem.
 
+**O ícone que a lista não tem, você DESENHA** — `caminho` é o path SVG numa
+caixa de 24×24 (uma string, ou uma lista com um traço por peça). Ele sai no
+mesmo traço dos ícones prontos, na cor do tema, então o seu não destoa. Um
+carrinho de compras, uma xícara, o símbolo do produto do cliente: três ou
+quatro comandos `M`/`L`/`A`/`C` resolvem. Nunca emoji no lugar de ícone.
+
 Os nomes que existem (traço, no tom do tema):
 
 `raio` `alvo` `foguete` `escudo` `relogio` `usuario` `pessoas` `coracao`

package/studio/ferramentas/prisma.md

@@ -87,6 +87,14 @@ Entre 8 e 14 cenas para 10 minutos. Uma ideia por cena.
 
 ## Detalhes que valem
 
+- **A cena compõe sozinha.** Com título e conteúdo, o título ancora no alto e o
+  conteúdo ocupa o corpo, em escala de projetor; o rodapé com o nome do deck e
+  "03 / 08" entra sozinho (menos na capa e nas seções). Não simule isso com
+  `livre`.
+- **Varie o layout entre as cenas**: `numeros` para o dado que decide,
+  `imagem-direita` com foto ou `dispositivo` quando há produto, `cartoes` em
+  `tres-colunas` para as opções, `citacao` para a voz de fora, `tabela` para
+  comparar. Cinco cenas `titulo` + `lista` seguidas é o deck que ninguém lembra.
 - **`tema` por cena** sobrepõe o do deck. Uma citação em `papel` no meio de um deck
   `meia-noite` cria respiro — use uma vez, não cinco.
 - **`revelar: true`** na lista faz os itens aparecerem um a um.

package/studio/server.py

@@ -881,7 +881,8 @@ def revisar_monotonia(doc, ferramenta):
         avisos.append(
             "o vídeo é só texto e imagem: nenhum elemento de apoio em %d cenas. "
             'Um "icone" ao lado do argumento (raio, alvo, foguete, escudo, relogio, '
-            "lampada, cadeado, crescimento, pessoas, dinheiro, globo, fogo…), um "
+            "lampada, cadeado, crescimento, pessoas, dinheiro, globo, fogo… ou um "
+            'DESENHADO por você, com "caminho": path SVG numa caixa 24x24), um '
             '"selo" de estado, um "numeros" com "contar": true — é isto que faz a '
             "tela parecer produzida em vez de um slide com legenda." % len(cenas))
 

package/studio/web/js/icones.js

@@ -88,4 +88,33 @@ function nomesIcones() {
   return Object.keys(ICONES);
 }
 
-if (typeof module !== "undefined" && module.exports) module.exports = { ICONES: ICONES, svgIcone: svgIcone };
+/* O ícone que a IA DESENHA, quando o que ela precisa não está na lista.
+ *
+ *   "A IA irá desenvolver ícones."
+ *
+ * `caminho` é o path SVG numa caixa de 24×24 — uma string, ou uma lista de
+ * strings (um traço por peça). Sai no MESMO traço dos ícones da casa (1.7,
+ * cantos redondos, cor do texto), para o desenhado não destoar do pronto.
+ *
+ * Só entram os caracteres de path: letra de comando, número, espaço,
+ * vírgula. Nada mais — isto vira innerHTML numa página nossa, e o documento
+ * foi escrito por um modelo. Path inválido cai no círculo, que é o mesmo
+ * destino de um nome que não existe: o erro fica visível e inofensivo. */
+// Começa em M/m: todo path de verdade abre com um moveto, e "42" sozinho
+// não é desenho nenhum.
+var CAMINHO_OK = /^[Mm][MmZzLlHhVvCcSsQqTtAa0-9\s,.\-+eE]*$/;
+
+function svgCaminho(caminho, op) {
+  op = op || {};
+  var lista = Array.isArray(caminho) ? caminho : [caminho];
+  var ds = lista.map(function (d) { return String(d == null ? "" : d).trim(); })
+    .filter(function (d) { return d && d.length <= 4000 && CAMINHO_OK.test(d); });
+  if (!ds.length) return svgIcone("circulo", op.cls);
+  var fill = op.preenchido ? "currentColor" : "none";
+  return '<svg viewBox="0 0 24 24" fill="' + fill + '" stroke="currentColor" stroke-width="' +
+         (Number(op.traco) > 0 ? Number(op.traco) : 1.7) + '" stroke-linecap="round" stroke-linejoin="round"' +
+         (op.cls ? ' class="' + op.cls + '"' : "") + ">" +
+         ds.map(function (d) { return '<path d="' + d + '"/>'; }).join("") + "</svg>";
+}
+
+if (typeof module !== "undefined" && module.exports) module.exports = { ICONES: ICONES, svgIcone: svgIcone, svgCaminho: svgCaminho, CAMINHO_OK: CAMINHO_OK };

package/studio/web/js/player.js

@@ -12,6 +12,11 @@
   var arq = null, doc = {}, cenas = [], atual = 0;
   var tocando = false, quadro = null, t0 = 0, decorrido = 0;
   var trilha = null, gravador = null, pedacos = [];
+  /* Resolve quando o arquivo está MONTADO no palco. É por ela que a exportação
+     escondida (studio_exportar) sabe quando pode começar — antes disto não há
+     cena para fotografar, e um export que começa cedo sai preto. */
+  var carregadoOk = null;
+  var carregado = new Promise(function (ok) { carregadoOk = ok; });
   var ehVideo = false, transporte = null;
 
   /* ------------------------------------------------------------- avisos -- */
@@ -81,8 +86,14 @@
     if (a.ferramenta === "grade") return montarGrade();
 
     cenas = doc.cenas || [];
+    // O rodapé (nome do deck, "03 / 08") é coisa de APRESENTAÇÃO: o vídeo e
+    // a arte não têm. Ver o rodapé em render.js.
+    var rodape = a.ferramenta === "prisma" ? { titulo: a.titulo, total: cenas.length } : null;
     cenas.forEach(function (c, i) {
-      var no = renderCena(c, doc, { animar: true });
+      var no = renderCena(c, doc, {
+        animar: true,
+        rodape: rodape ? { titulo: rodape.titulo, indice: i + 1, total: rodape.total } : null,
+      });
       no.style.position = "absolute";
       no.style.inset = "0";
       no.style.display = i === 0 ? "block" : "none";
@@ -93,6 +104,7 @@
 
     ajustar();
     ir(0);
+    if (carregadoOk) { carregadoOk(a); carregadoOk = null; }
 
     if (location.hash === "#imprimir") return setTimeout(imprimirTudo, 350);
 
@@ -259,7 +271,17 @@
          que vem depois no arquivo — invadir é justamente a pausa que se
          queria cortar. */
       if (alvo >= t.ate) { if (!v.paused) v.pause(); return; }
-      if (Math.abs(v.currentTime - alvo) > DERIVA) {
+      /* Uma busca por vez, e com respiro. Numa máquina lenta (ou na
+         exportação escondida, que rasteriza a cena a cada quadro no mesmo
+         fio), o <video> fica atrás do relógio por mais de DERIVA em TODO
+         quadro: puxá-lo de volta a cada rAF é uma busca em cima da outra, e
+         um vídeo que só busca nunca tem quadro pronto — readyState fica em 1,
+         o export não desenha o clipe e o arquivo sai com o chão da cena no
+         lugar da gravação. Medido quadro a quadro no diagnóstico. */
+      if (v.seeking) return;
+      var agora = performance.now();
+      if (Math.abs(v.currentTime - alvo) > DERIVA && (!v._ultimaBusca || agora - v._ultimaBusca > 600)) {
+        v._ultimaBusca = agora;
         try { v.currentTime = alvo; } catch (e) {}
       }
       if (tocando && v.paused) tocarClipe(v);
@@ -679,19 +701,17 @@ function gravaMp4() { return /mp4/.test(escolherFormato()); }
    * o mesmo grafo de sempre — trilha, narração e efeitos, já mixados com o
    * ducking — então o arquivo sai idêntico ao que se ouve aqui.
    */
-  function iniciarGravacao() {
-    var b = document.getElementById("tp-gravar");
-    if (!b || b.dataset.exportando) return;
+  /* Monta o arquivo com o PLAYER como fonte, sem baixar. É o que o botão usa
+     por baixo e o que a exportação escondida (studio_exportar) chama por
+     fora — um caminho só, para o arquivo sair igual nos dois.
+
+     O player é a fonte: ele sabe encadear cenas, narrar no tempo certo e
+     tocar os efeitos. O exportador só pergunta o que está na tela. */
+  function gerarArquivo(op) {
+    op = op || {};
     if (typeof VideoExport === "undefined" || !VideoExport.disponivel()) {
-      return aviso("este navegador não sabe gerar vídeo", 3200);
+      return Promise.reject(new Error("este navegador não sabe gerar vídeo"));
     }
-
-    b.dataset.exportando = "1";
-    b.classList.add("gravando");
-    aviso("montando o vídeo — não feche esta aba", 3000);
-
-    // O player é a fonte: ele sabe encadear cenas, narrar no tempo certo e
-    // tocar os efeitos. O exportador só pergunta o que está na tela.
     var fonte = {
       duracao: total(),
       // A gravação do usuário precisa estar decodificada antes do primeiro
@@ -701,13 +721,32 @@ function gravaMp4() { return /mp4/.test(escolherFormato()); }
       parar: function () { pausar(); },
       no: function () { return palco.children[atual] || null; },
     };
-
-    VideoExport.baixar(arq, {
-      nome: arq.titulo,
+    // O AudioContext nasce suspenso sem gesto; a exportação escondida chega
+    // com um gesto emprestado, e este resume é o que o gasta.
+    if (trilha && trilha.ctx && trilha.ctx.state === "suspended") { try { trilha.ctx.resume(); } catch (e) {} }
+    return VideoExport.gerar(arq, {
       fonte: fonte,
+      fps: op.fps,
       fluxoAudio: trilha && trilha.fluxo,
+      aoAndar: op.aoAndar,
+    });
+  }
+
+  function iniciarGravacao() {
+    var b = document.getElementById("tp-gravar");
+    if (!b || b.dataset.exportando) return;
+    if (typeof VideoExport === "undefined" || !VideoExport.disponivel()) {
+      return aviso("este navegador não sabe gerar vídeo", 3200);
+    }
+
+    b.dataset.exportando = "1";
+    b.classList.add("gravando");
+    aviso("montando o vídeo — não feche esta aba", 3000);
+
+    gerarArquivo({
       aoAndar: function (f) { b.textContent = Math.round(f * 100) + "%"; },
     }).then(function (r) {
+      VideoExport.salvar(r, arq.titulo);
       aviso(r.mp4 ? "vídeo salvo em .mp4" : "salvo em .webm (este navegador não faz mp4)", 3400);
     }).catch(function (e) {
       aviso("não consegui gerar: " + e.message, 4200);
@@ -829,5 +868,8 @@ function gravaMp4() { return /mp4/.test(escolherFormato()); }
     ir: function (n) { ir(n - 1); }, proxima: proxima, anterior: anterior,
     tocar: tocar, parar: pausar, buscar: buscar, gravar: alternarGravacao,
     get cena() { return atual + 1; }, get total() { return cenas.length; },
+    // Para a exportação escondida: espera o arquivo montado, troca o que
+    // precisar (um clipe convertido) e gera pelo mesmo caminho do botão.
+    carregado: carregado, remontar: montar, exportar: gerarArquivo,
   };
 })();

package/studio/web/js/render.js

@@ -1182,7 +1182,11 @@ function renderElemento(e, ctx) {
       no.style.width = _px(e.l || t);
       no.style.height = _px(e.a || t);
       no.style.color = e.cor || "var(--c-tom)";
-      no.innerHTML = svgIcone(e.nome || "estrela");
+      // `caminho`: o ícone desenhado pelo modelo (path SVG 24×24) — ver
+      // icones.js. Sem ele, um da lista pelo nome.
+      no.innerHTML = e.caminho
+        ? svgCaminho(e.caminho, { preenchido: !!e.preenchido, traco: e.traco })
+        : svgIcone(e.nome || "estrela");
       var s = no.querySelector("svg");
       if (s) s.setAttribute("stroke-width", e.traco || 1.5);
       break;
@@ -1570,10 +1574,12 @@ function renderCena(cena, doc, op) {
     cols.style.gridTemplateColumns = "repeat(" + (layout === "duas-colunas" ? 2 : 3) + ", 1fr)";
     solta(corpo, cols);
     fluxo.appendChild(cols);
+    comporCabecaCorpo(fluxo, layout, cabecalho.length, 1);
   } else {
     // um bloco só (cartoes, numeros…) já se distribui sozinho: não engaiolar
     solta(cabecalho, fluxo);
     solta(corpo, fluxo);
+    comporCabecaCorpo(fluxo, layout, cabecalho.length, corpo.length);
   }
 
   flutuantes.forEach(function (e) {
@@ -1583,8 +1589,54 @@ function renderCena(cena, doc, op) {
     no.appendChild(el);
   });
 
+  /* O RODAPÉ DA APRESENTAÇÃO: nome do deck à esquerda, "03 / 08" à direita.
+     É o que ancora a composição no quadro — sem ele, uma cena de título e
+     lista é um bloco flutuando no meio do preto, e todo deck parece o mesmo
+     deck. Quem manda é quem chama (o player, quando a peça é prisma): o
+     vídeo não tem rodapé, e a capa e as seções também não — são as cenas
+     que se sustentam sozinhas. */
+  if (op.rodape && layout !== "capa" && layout !== "secao") {
+    var rodape = document.createElement("div");
+    rodape.className = "rodape";
+    rodape.style.left = Math.round(W * 0.075) + "px";
+    rodape.style.right = Math.round(W * 0.075) + "px";
+    rodape.style.bottom = Math.round(H * 0.048) + "px";
+    var esq = document.createElement("span");
+    esq.textContent = op.rodape.titulo || "";
+    var dir = document.createElement("span");
+    if (op.rodape.indice && op.rodape.total) {
+      dir.textContent = String(op.rodape.indice).padStart(2, "0") + " / " + String(op.rodape.total).padStart(2, "0");
+    }
+    rodape.appendChild(esq);
+    rodape.appendChild(dir);
+    no.appendChild(rodape);
+  }
+
   desenharConectores(no, elementos, W, H);
   return no;
 }
 
+/* A COMPOSIÇÃO DE SLIDE: cabeça em cima, corpo no meio do que sobra.
+
+   Tudo centrado verticalmente — que era o padrão para todo layout — deixa um
+   título com três linhas de lista ocupando 30% do quadro, com 350px de nada
+   em cima e 350px embaixo: a cara de "slide genérico" que o dono apontou. A
+   composição de quem faz deck de verdade ancora o título no alto e dá o resto
+   do quadro ao conteúdo, que se centra ali.
+
+   Só quando há as duas metades (cabeça E corpo) e o layout não é o dos que se
+   sustentam centrados (capa, centro, citação, seção): uma cena de vídeo com um
+   título sozinho continua no meio, onde um título sozinho fica bem. O corpo é
+   marcado no primeiro e no último filho (`margin: auto` no CSS), e o DOM
+   continua chapado — nada de embrulho novo em volta dos elementos. */
+function comporCabecaCorpo(fluxo, layout, nCabeca, nCorpo) {
+  if (!nCabeca || !nCorpo) return;
+  if (layout === "capa" || layout === "centro" || layout === "citacao" || layout === "secao") return;
+  var filhos = fluxo.children;
+  if (filhos.length <= nCabeca) return;
+  fluxo.setAttribute("data-composicao", "cabeca-corpo");
+  filhos[nCabeca].classList.add("corpo-inicio");
+  filhos[filhos.length - 1].classList.add("corpo-fim");
+}
+
 if (typeof module !== "undefined" && module.exports) module.exports = { renderCena: renderCena };

package/studio/web/js/video.js

@@ -347,6 +347,23 @@ var VideoExport = (function () {
       return new Promise(function (pronto) {
         var t0 = performance.now();
         var primeiro = true;
+        /* A camada de cima de uma cena com clipe (título, legenda, marca),
+           já rasterizada. Enquanto nada nela anima, só o quadro do vídeo
+           muda — e rasterizar o SVG inteiro trinta vezes por segundo era o
+           que engasgava a máquina: o decodificador do <video> ficava sem
+           CPU, o clipe atrasava, o player o puxava de volta e a busca não
+           terminava nunca (medido: seeking=true e readyState=1 do 0,7s ao
+           fim, arquivo com o chão da cena no lugar da gravação). Com a
+           camada guardada, cada quadro é dois drawImage. */
+        var camada = null;
+
+        function pintarComClipe(no, img) {
+          // chão do tema → gravação do usuário → cena sem fundo
+          ctx2d.fillStyle = corDeChao(no);
+          ctx2d.fillRect(0, 0, L, A);
+          desenharClipes(ctx2d, no, L, A);
+          ctx2d.drawImage(img, 0, 0, L, A);
+        }
 
         function volta() {
           if (cancelado) return pronto();
@@ -365,16 +382,20 @@ var VideoExport = (function () {
           primeiro = false;
 
           var comVideo = temClipe(no);
+          if (comVideo && camada && camada.no === no && !aindaAnima(no)) {
+            pintarComClipe(no, camada.img);
+            return setTimeout(volta, 1000 / FPS);
+          }
+
           Exportar.retrato(no, L, A, folhaCss, false, comVideo ? semFundo : null)
             .then(function (img) {
             if (cancelado) return pronto();
             if (comVideo) {
-              // chão do tema → gravação do usuário → cena sem fundo
-              ctx2d.fillStyle = corDeChao(no);
-              ctx2d.fillRect(0, 0, L, A);
-              desenharClipes(ctx2d, no, L, A);
+              camada = aindaAnima(no) ? null : { no: no, img: img };
+              pintarComClipe(no, img);
+            } else {
+              ctx2d.drawImage(img, 0, 0, L, A);
             }
-            ctx2d.drawImage(img, 0, 0, L, A);
             volta();
           }).catch(function () {
             // Um quadro que não rasterizou não derruba o vídeo: segue, e o
@@ -412,25 +433,30 @@ var VideoExport = (function () {
     return promessa;
   }
 
+  /* Entrega ao usuário o arquivo que `gerar` montou. Separado de `baixar`
+     porque a exportação ESCONDIDA (studio_exportar) gera pelo mesmo caminho e
+     não baixa: manda o blob de volta ao estúdio. Um só `gerar` para os dois. */
+  function salvar(r, nome) {
+    var url = URL.createObjectURL(r.blob);
+    var a = document.createElement("a");
+    a.href = url;
+    a.download = (nome || "video")
+      .replace(/[^\w\-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase() + r.formato;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(function () { URL.revokeObjectURL(url); }, 8000);
+    return r;
+  }
+
   /* Gera e entrega o arquivo. É isto que o botão chama. */
   function baixar(arq, op) {
     op = op || {};
-    return gerar(arq, op).then(function (r) {
-      var url = URL.createObjectURL(r.blob);
-      var a = document.createElement("a");
-      a.href = url;
-      a.download = (op.nome || arq.titulo || "video")
-        .replace(/[^\w\-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase() + r.formato;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      setTimeout(function () { URL.revokeObjectURL(url); }, 8000);
-      return r;
-    });
+    return gerar(arq, op).then(function (r) { return salvar(r, op.nome || arq.titulo); });
   }
 
   return {
-    disponivel: disponivel, formato: formato, gerar: gerar, baixar: baixar,
+    disponivel: disponivel, formato: formato, gerar: gerar, baixar: baixar, salvar: salvar,
     FORMATOS: FORMATOS, _aindaAnima: aindaAnima,
   };
 })();