primocode 9.8.0-beta.2 → 9.8.0-beta.21

package/lib/estudio/plano.js

@@ -51,7 +51,7 @@ const path = require('path');
 const TIPOS = new Set(['texto', 'forma', 'imagem', 'video', 'icone', 'legenda', 'componente']);
 const FORMAS = new Set(['retangulo', 'circulo', 'linha', 'poligono', 'traco']);
 const AJUSTES = new Set(['cover', 'contain', 'preencher']);
-const TRANSICOES = new Set(['corte', 'esmaecer', 'deslizar', 'zoom', 'giro', 'mascara', 'morph']);
+const TRANSICOES = new Set(['corte', 'esmaecer', 'deslizar', 'zoom', 'giro', 'mascara', 'morph', 'chicote', 'soco', 'flash']);
 
 /* As propriedades que a animação por quadro-chave alcança. Cada uma é um
    número no tempo; a curva entre dois quadros é a suavização declarada.
@@ -165,7 +165,10 @@ function conferirElemento(caminho, el, pasta, problemas, duracao) {
         }
     }
     conferirCor(`${caminho}.cor`, el.cor, problemas);
-    conferirCor(`${caminho}.fundo`, el.fundo, problemas);
+    // O fundo do elemento é cor, ou o mesmo objeto do fundo da cena (um
+    // gradiente sobre a foto, por exemplo).
+    if (el.fundo && typeof el.fundo === 'object') conferirFundo(`${caminho}.fundo`, el.fundo, pasta, problemas);
+    else conferirCor(`${caminho}.fundo`, el.fundo, problemas);
     conferirAnima(`${caminho}.anima`, el.anima, problemas);
 
     // `de` e `ate` recortam o elemento no tempo DA CENA. Um elemento que

package/lib/estudio/remotion.js

@@ -212,6 +212,7 @@ function Elemento({ el, t, dados }) {
     transform: [base.transform, move].filter(Boolean).join(' '),
     filter: filtroDe(a) || undefined,
     mixBlendMode: el.mistura || undefined,
+    transformOrigin: el.origem || undefined,
   };
 
   if (el.vidro) {
@@ -233,7 +234,39 @@ function Elemento({ el, t, dados }) {
   }
 
   switch (el.tipo) {
-    case 'texto':
+    case 'texto': {
+      /* O NÚMERO QUE CONTA: "contar": {ate: 9, dur: 1.2} faz o texto subir
+         de 0 até o valor, com a curva de saída. Casas decimais e o que vem
+         antes/depois do número (R$, %, mil) ficam como estão. */
+      let conteudo = el.texto;
+      if (el.contar) {
+        const alvo = Number(el.contar.ate) || 0;
+        const dur = el.contar.dur || 1.2;
+        const k = CURVAS.saida(Math.min(1, Math.max(0, tLocal / dur)));
+        const casas = el.contar.casas || 0;
+        const v = (alvo * k).toLocaleString('pt-BR', { minimumFractionDigits: casas, maximumFractionDigits: casas });
+        conteudo = (el.contar.antes || '') + v + (el.contar.depois || '');
+      }
+      /* O TEXTO QUE SE REVELA: "revelar": [t0, t1, …] é o instante (no tempo
+         do elemento) em que cada palavra entra — o da narração. A palavra
+         sobe e aparece; as que ainda não foram ditas esperam invisíveis, e o
+         bloco não muda de tamanho quando elas entram. */
+      if (Array.isArray(el.revelar) && typeof el.texto === 'string') {
+        const palavras = el.texto.split(' ');
+        conteudo = palavras.map((w, i) => {
+          const t0 = el.revelar[Math.min(i, el.revelar.length - 1)] ?? 0;
+          const k = Math.min(1, Math.max(0, (tLocal - t0) / 0.28));
+          const e = CURVAS.saida(k);
+          // O espaço fica FORA do span: é ali que a linha pode quebrar.
+          return (
+            <React.Fragment key={i}>
+              <span style={{ display: 'inline-block', opacity: e, transform: 'translateY(' + (1 - e) * 0.35 + 'em)',
+                color: el.destaques && el.destaques.includes(i) ? (el.corDestaque || el.cor) : undefined }}>{w}</span>
+              {i < palavras.length - 1 ? ' ' : null}
+            </React.Fragment>
+          );
+        });
+      }
       return (
         <div style={{
           ...estilo,
@@ -249,8 +282,19 @@ function Elemento({ el, t, dados }) {
           background: el.gradienteTexto || undefined,
           WebkitBackgroundClip: el.gradienteTexto ? 'text' : undefined,
           WebkitTextFillColor: el.gradienteTexto ? 'transparent' : undefined,
-        }}>{el.texto}</div>
+          fontStyle: el.italico ? 'italic' : undefined,
+          WebkitTextStroke: el.contorno || undefined,
+          // O GLITCH: o texto se parte em vermelho e ciano por um instante.
+          textShadow: el.glitch && tLocal < (el.glitch.dur || 0.35)
+            ? (() => { const f = Math.round(t * 30); const d = (Math.sin(f * 7.1) * 0.5 + 0.5) * (el.glitch.forca || 10) * (1 - tLocal / (el.glitch.dur || 0.35));
+                return d.toFixed(1) + 'px 0 #ff2d55, ' + (-d).toFixed(1) + 'px 0 #00e5ff'; })()
+            : (el.sombraTexto || undefined),
+          textDecoration: el.riscado ? 'line-through' : undefined,
+          textDecorationThickness: el.riscado ? '0.08em' : undefined,
+          wordBreak: 'normal', overflowWrap: 'break-word',
+        }}>{conteudo}</div>
       );
+    }
 
     case 'forma': {
       const forma = el.forma || 'retangulo';
@@ -259,7 +303,7 @@ function Elemento({ el, t, dados }) {
           ...estilo,
           width: medida(el.largura, '200px'),
           height: forma === 'linha' ? medida(el.espessura, '4px') : medida(el.altura, '200px'),
-          background: el.fundo || el.cor || '#fff',
+          ...(el.fundo && typeof el.fundo === 'object' ? fundoCSS(el.fundo) : { background: el.fundo || el.cor || '#fff' }),
           borderRadius: forma === 'circulo' ? '50%' : medida(a.raio ?? el.raio, '0px'),
           border: el.contorno || undefined,
         }} />
@@ -285,7 +329,7 @@ function Elemento({ el, t, dados }) {
             startFrom={el.deOrigem ? Math.round(el.deOrigem * dados.fps) : undefined}
             endAt={el.ateOrigem ? Math.round(el.ateOrigem * dados.fps) : undefined}
             volume={el.volume ?? 0}
-            style={{ width: '100%', height: '100%', objectFit: el.ajuste || 'cover' }}
+            style={{ width: '100%', height: '100%', objectFit: el.ajuste || 'cover', objectPosition: el.foco || 'center' }}
           />
         </div>
       );
@@ -294,7 +338,7 @@ function Elemento({ el, t, dados }) {
       // O SVG foi baixado para a pasta do projeto (estudio/assets.js): render
       // que busca ícone na internet falha no meio, depois de tudo pronto.
       return (
-        <div style={{ ...estilo, width: medida(el.tamanho, '96px'), height: medida(el.tamanho, '96px'), color: el.cor || '#fff' }}
+        <div style={{ ...estilo, width: medida(el.tamanho, '96px'), height: medida(el.tamanho, '96px'), fontSize: medida(el.tamanho, '96px'), lineHeight: 0, color: el.cor || '#fff' }}
              dangerouslySetInnerHTML={{ __html: dados.icones[el.nome] || '' }} />
       );
 
@@ -302,6 +346,55 @@ function Elemento({ el, t, dados }) {
       const fala = (el.fala || []).find((f) => t >= f.de && t <= f.ate);
       if (!fala) return null;
       const e = el.estilo || {};
+      /* LEGENDA DE VIDEOMAKER: com o tempo de cada palavra, elas entram uma a
+         uma, no instante em que são ditas, com um salto curto. A que está
+         sendo dita ganha a cor de destaque; a palavra forte (a ideia da
+         frase) ganha a cor dela e fica maior. Sem "palavras", a frase entra
+         inteira, como antes. */
+      if (Array.isArray(fala.palavras) && fala.palavras.length) {
+        const destaque = e.destaque || '#FFD400';
+        const forte = e.corForte || '#00E0A4';
+        const soUma = e.modo === 'palavra';
+        const visiveis = soUma
+          ? fala.palavras.filter((p, i, l) => t >= p.de && (i === l.length - 1 || t < l[i + 1].de)).slice(-1)
+          : fala.palavras.filter((p) => t >= p.de - 0.02);
+        return (
+          <div style={{
+            ...estilo,
+            display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'baseline',
+            gap: '0 0.34em', maxWidth: medida(e.largura, '86%'),
+            fontFamily: e.fonte ? '"' + e.fonte + '", system-ui, sans-serif' : 'system-ui, sans-serif',
+            fontSize: medida(e.tamanho, '64px'),
+            fontWeight: e.peso || 900,
+            textTransform: e.caixa || undefined,
+            lineHeight: 1.1,
+          }}>
+            {visiveis.map((p, i) => {
+              const idade = t - p.de;
+              const entra = Math.min(1, Math.max(0, idade / 0.14));
+              const salto = entra < 1 ? 0.7 + 0.42 * CURVAS.saida(entra) : 1.12 - 0.12 * Math.min(1, (idade - 0.14) / 0.12);
+              const falando = t >= p.de && t <= p.ate + 0.05;
+              const cor = p.forte ? forte : (falando ? destaque : (e.cor || '#fff'));
+              return (
+                <span key={i} style={{
+                  display: 'inline-block',
+                  // A palavra forte é MAIOR na fonte, não na escala: escala não
+                  // abre espaço, e ela cresceria por cima da vizinha.
+                  fontSize: p.forte ? '1.22em' : undefined,
+                  transform: 'scale(' + salto + ') translateY(' + (1 - entra) * 18 + 'px)',
+                  opacity: entra,
+                  color: cor,
+                  textShadow: e.sombra || '0 6px 22px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.35)',
+                  WebkitTextStroke: e.contorno || '2px rgba(0,0,0,.55)',
+                  paintOrder: 'stroke fill',
+                  background: falando && e.fundoAtivo ? e.fundoAtivo : undefined,
+                  borderRadius: '0.18em', padding: falando && e.fundoAtivo ? '0 0.12em' : undefined,
+                }}>{p.texto}{p.emoji ? ' ' + p.emoji : ''}</span>
+              );
+            })}
+          </div>
+        );
+      }
       return (
         <div style={{
           ...estilo,
@@ -325,16 +418,33 @@ function Elemento({ el, t, dados }) {
   }
 }
 
-export function Cena({ cena, dados }) {
+export function Cena({ cena, dados, tFixo }) {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
-  const t = frame / fps;
+  // A página parada é a cena num instante só: tFixo manda no tempo.
+  const t = tFixo != null ? tFixo : frame / fps;
 
   const cam = animado(cena.camera, t);
+  /* O IMPACTO: tremor (a câmera treme e assenta), soco (o zoom que bate e
+     volta) e flash (o branco que estoura e some). O tremor é pseudoaleatório
+     pelo QUADRO, então o mesmo render sai sempre igual. */
+  const acaso = (n) => { const x = Math.sin(n * 12.9898 + 78.233) * 43758.5453; return x - Math.floor(x); };
+  let tx = 0, ty = 0, tr = 0, soco = 1;
+  for (const w of cena.tremor || []) {
+    if (t < w.de || t > w.ate) continue;
+    const k = (w.forca || 14) * (1 - (t - w.de) / Math.max(0.01, w.ate - w.de));
+    tx += (acaso(frame) - 0.5) * 2 * k; ty += (acaso(frame + 91) - 0.5) * 2 * k; tr += (acaso(frame + 37) - 0.5) * k * 0.08;
+  }
+  for (const s0 of cena.socos || []) {
+    if (t >= s0.t) soco *= 1 + (s0.forca || 0.18) * Math.exp(-14 * (t - s0.t));
+  }
+  let flash = 0;
+  for (const f of cena.flashes || []) if (t >= f && t < f + 0.25) flash = Math.max(flash, Math.exp(-18 * (t - f)));
   const camTransform = [
     cam.x != null || cam.y != null ? 'translate(' + (-(cam.x || 0)) + 'px,' + (-(cam.y || 0)) + 'px)' : '',
-    cam.zoom != null ? 'scale(' + cam.zoom + ')' : '',
-    cam.rotacao != null ? 'rotate(' + cam.rotacao + 'deg)' : '',
+    tx || ty ? 'translate(' + tx + 'px,' + ty + 'px)' : '',
+    cam.zoom != null || soco !== 1 ? 'scale(' + ((cam.zoom ?? 1) * soco) + ')' : '',
+    cam.rotacao != null || tr ? 'rotate(' + ((cam.rotacao || 0) + tr) + 'deg)' : '',
   ].filter(Boolean).join(' ');
 
   return (
@@ -363,10 +473,11 @@ export function Cena({ cena, dados }) {
           <Elemento key={i} el={el} t={t} dados={dados} />
         ))}
       </AbsoluteFill>
+      {flash > 0.01 && <AbsoluteFill style={{ backgroundColor: cena.corFlash || '#fff', opacity: flash * 0.85 }} />}
     </AbsoluteFill>
   );
 }
-";`;
+`;
 
 const RAIZ_JSX = String.raw`import React from 'react';
 import { AbsoluteFill, Audio, Sequence, staticFile, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';
@@ -386,22 +497,52 @@ function Transicao({ tipo, progresso, children }) {
   else if (tipo === 'giro') estilo = { transform: 'rotateY(' + (1 - p) * 35 + 'deg) scale(' + (0.9 + 0.1 * p) + ')', opacity: p };
   else if (tipo === 'mascara') estilo = { clipPath: 'circle(' + (p * 75) + '% at 50% 50%)' };
   else if (tipo === 'morph') estilo = { opacity: p, filter: 'blur(' + (1 - p) * 14 + 'px)', transform: 'scale(' + (1.06 - 0.06 * p) + ')' };
+  // O CHICOTE: a cena chega rasgando de lado, borrada de velocidade.
+  else if (tipo === 'chicote') estilo = { transform: 'translateX(' + (1 - p) * 70 + '%) skewX(' + (1 - p) * -12 + 'deg)', filter: 'blur(' + (1 - p) * 40 + 'px)' };
+  // O SOCO: a cena entra grande e bate no lugar.
+  else if (tipo === 'soco') estilo = { transform: 'scale(' + (1.35 - 0.35 * p) + ')', opacity: Math.min(1, p * 3) };
+  else if (tipo === 'flash') estilo = { opacity: Math.min(1, p * 2), filter: 'brightness(' + (1 + (1 - p) * 3) + ')' };
   return <AbsoluteFill style={estilo}>{children}</AbsoluteFill>;
 }
 
+/* AS PÁGINAS: um quadro por cena, cada uma congelada no meio dela. Os
+ * slides saem num render só — antes era um "remotion still" por página, e
+ * cada um empacotava o projeto inteiro de novo (onze páginas, onze
+ * empacotamentos: é a demora de 25 minutos medida em 25/09). */
+export const Paginas = () => {
+  const { fps } = useVideoConfig();
+  const frame = useCurrentFrame();
+  const cena = plano.cenas[Math.min(frame, plano.cenas.length - 1)];
+  return (
+    <AbsoluteFill style={{ backgroundColor: plano.fundoGeral || '#000' }}>
+      <Cena cena={cena} dados={{ fps, icones }} tFixo={cena.duracao / 2} />
+    </AbsoluteFill>
+  );
+};
+
 export const Video = () => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
   const dados = { fps, icones };
 
+  /* O cruzamento é da cena que ENTRA: ela começa "cruz" quadros antes de a
+     anterior acabar, e as duas ficam no ar juntas. Contar pela que sai deixava
+     a que entra começando sobre o preto (medido em 25/09: o "soco" abria com
+     um quadro preto). */
+  const cruzDe = (cena, i) => {
+    if (!cena || i === 0) return 0;
+    const t = cena.transicao || {};
+    const tipo = t.tipo || t || 'corte';
+    return tipo === 'corte' ? 0 : Math.round((t.duracao ?? 0.4) * fps);
+  };
   let inicio = 0;
   const pedacos = plano.cenas.map((cena, i) => {
     const dur = Math.max(1, Math.round(cena.duracao * fps));
     const t = cena.transicao || {};
     const tipo = t.tipo || t || 'corte';
-    const cruz = tipo === 'corte' ? 0 : Math.round((t.duracao ?? 0.4) * fps);
+    const cruz = cruzDe(cena, i);
     const de = inicio;
-    inicio += dur - cruz;
+    inicio += dur - cruzDe(plano.cenas[i + 1], i + 1);
     return { cena, de, dur, tipo, cruz, i };
   });
 
@@ -421,15 +562,56 @@ export const Video = () => {
         );
       })}
 
+      {/* O ACABAMENTO: granulação de filme, vinheta e a luz da marca passando.
+          É o que tira a cara de apresentação e dá a cara de peça de 2026. */}
+      {plano.acabamento && plano.acabamento.luz && (
+        <AbsoluteFill style={{ pointerEvents: 'none', mixBlendMode: 'screen', opacity: plano.acabamento.luzForca ?? 0.22,
+          background: 'radial-gradient(circle at ' + (50 + 40 * Math.sin(frame / 38)) + '% ' + (30 + 25 * Math.cos(frame / 51)) + '%, '
+            + plano.acabamento.luz[0] + ' 0%, transparent 45%), radial-gradient(circle at ' + (50 - 40 * Math.sin(frame / 44)) + '% '
+            + (75 - 20 * Math.sin(frame / 33)) + '%, ' + (plano.acabamento.luz[1] || plano.acabamento.luz[0]) + ' 0%, transparent 40%)' }} />
+      )}
+      {plano.acabamento && plano.acabamento.grade && (
+        <AbsoluteFill style={{ pointerEvents: 'none', opacity: plano.acabamento.grade,
+          backgroundImage: 'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
+          backgroundSize: (plano.acabamento.passoGrade || 120) + 'px ' + (plano.acabamento.passoGrade || 120) + 'px',
+          backgroundPosition: (frame * 0.2) + 'px ' + (frame * 0.1) + 'px' }} />
+      )}
+      {plano.acabamento && plano.acabamento.vinheta && (
+        <AbsoluteFill style={{ pointerEvents: 'none', background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,' + plano.acabamento.vinheta + ') 100%)' }} />
+      )}
+      {plano.acabamento && plano.acabamento.grao && (
+        <AbsoluteFill style={{ pointerEvents: 'none', opacity: plano.acabamento.grao, mixBlendMode: 'overlay' }}>
+          <svg width="100%" height="100%">
+            <filter id="grao"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed={frame % 60} /></filter>
+            <rect width="100%" height="100%" filter="url(#grao)" />
+          </svg>
+        </AbsoluteFill>
+      )}
+
       {plano.audio && plano.audio.narracao && (
         <Audio src={staticFile(plano.audio.narracao)} volume={plano.audio.volumeNarracao ?? 1} />
       )}
       {plano.audio && plano.audio.trilha && (
         <Audio
           src={staticFile(plano.audio.trilha.src || plano.audio.trilha)}
-          volume={plano.audio.trilha.volume ?? 0.18}
+          /* O volume da música pode mudar no tempo ("volumes": [{t, v}]): começa
+             mínima, cresce, abaixa no depoimento e some antes do clímax. */
+          volume={Array.isArray(plano.audio.trilha.volumes)
+            ? (f) => { const tt = f / fps, vs = plano.audio.trilha.volumes;
+                if (tt <= vs[0].t) return vs[0].v;
+                for (let k = 0; k < vs.length - 1; k++) if (tt >= vs[k].t && tt <= vs[k + 1].t) return vs[k].v + (vs[k + 1].v - vs[k].v) * ((tt - vs[k].t) / Math.max(0.001, vs[k + 1].t - vs[k].t));
+                return vs[vs.length - 1].v; }
+            : (plano.audio.trilha.volume ?? 0.18)}
+          loop={plano.audio.trilha.loop !== false}
         />
       )}
+      {/* Os TRECHOS: pedaços de áudio no tempo certo — a narração partida entre
+          os depoimentos, o som de ambiente de uma cena. */}
+      {(plano.audio && plano.audio.trechos ? plano.audio.trechos : []).map((a, k) => (
+        <Sequence key={'tr' + k} from={Math.round((a.t || 0) * fps)} durationInFrames={Math.max(1, Math.round(((a.ate ?? 999) - (a.de || 0)) * fps))}>
+          <Audio src={staticFile(a.src)} startFrom={Math.round((a.de || 0) * fps)} volume={a.volume ?? 1} />
+        </Sequence>
+      ))}
       {(plano.audio && plano.audio.efeitos ? plano.audio.efeitos : []).map((e, i) => (
         <Sequence key={'sfx' + i} from={Math.round((e.t || 0) * fps)}>
           <Audio src={staticFile(e.src)} volume={e.volume ?? 0.7} />
@@ -438,13 +620,13 @@ export const Video = () => {
     </AbsoluteFill>
   );
 };
-";`;
+`;
 
 function rootJsx(plano) {
     const f = plano.formato || {};
     return `import React from 'react';
 import { Composition } from 'remotion';
-import { Video } from './Video';
+import { Video, Paginas } from './Video';
 import plano from './plano.json';
 import './fontes.css';
 
@@ -455,14 +637,24 @@ const quadros = Math.max(1, Math.round(
 ));
 
 export const RemotionRoot = () => (
-  <Composition
-    id="Video"
-    component={Video}
-    durationInFrames={quadros}
-    fps={fps}
-    width={${Number(f.largura) || 1920}}
-    height={${Number(f.altura) || 1080}}
-  />
+  <>
+    <Composition
+      id="Video"
+      component={Video}
+      durationInFrames={quadros}
+      fps={fps}
+      width={${Number(f.largura) || 1920}}
+      height={${Number(f.altura) || 1080}}
+    />
+    <Composition
+      id="Paginas"
+      component={Paginas}
+      durationInFrames={plano.cenas.length}
+      fps={fps}
+      width={${Number(f.largura) || 1920}}
+      height={${Number(f.altura) || 1080}}
+    />
+  </>
 );
 `;
 }
@@ -513,12 +705,25 @@ para este projeto, não para o PrimoCode.
  * @param {object} op.plano
  * @param {object} op.icones   { "lucide:zap": "<svg…>" } já baixados
  */
+const TSCONFIG = JSON.stringify({
+    compilerOptions: {
+        target: 'ES2018', module: 'commonjs', jsx: 'react-jsx', strict: false, noEmit: true,
+        lib: ['es2015', 'dom'], esModuleInterop: true, skipLibCheck: true, forceConsistentCasingInFileNames: true,
+    },
+    exclude: ['remotion.config.ts'],
+}, null, 2) + '\n';
+
 function montar({ pasta, titulo, plano, icones = {} }) {
     const raiz = path.join(pasta, 'remotion');
     const src = path.join(raiz, 'src');
 
     escrever(path.join(raiz, 'package.json'), pkgJson(titulo || 'video'));
     escrever(path.join(raiz, 'remotion.config.ts'), REMOTION_CONFIG);
+    /* O remotion.config.ts é TypeScript, e o Remotion 4 recusa renderizar sem
+       um tsconfig.json na raiz ("Could not find a tsconfig.json"). Medido em
+       25/09: o vídeo que saiu bom só saiu porque o modelo criou este arquivo à
+       mão depois do erro — um modelo grátis travaria ali. */
+    escrever(path.join(raiz, 'tsconfig.json'), TSCONFIG);
     escrever(path.join(raiz, 'README.md'), readme(titulo || 'Vídeo', plano));
     escrever(path.join(src, 'index.js'), INDEX_JS);
     escrever(path.join(src, 'Root.jsx'), rootJsx(plano));

package/lib/estudio/slides.js

@@ -48,41 +48,45 @@ const { spawn } = require('child_process');
 function renderizarPaginas({ raiz, destino, plano, aoFalar = () => {} }) {
     return new Promise((resolve) => {
         fs.mkdirSync(destino, { recursive: true });
-        const fps = Number((plano.formato || {}).fps) || 30;
-
-        // Onde começa cada cena, em quadros — a mesma conta do Video.jsx.
-        const inicios = [];
-        let cursor = 0;
-        for (const cena of plano.cenas || []) {
-            const dur = Math.max(1, Math.round(cena.duracao * fps));
-            const t = cena.transicao || {};
-            const cruz = (t.tipo || t) === 'corte' ? 0 : Math.round((t.duracao ?? 0.4) * fps);
-            inicios.push({ de: cursor, dur });
-            cursor += dur - cruz;
-        }
+        for (const f of fs.readdirSync(destino)) if (/\.(jpe?g|png)$/i.test(f)) fs.rmSync(path.join(destino, f));
+        const n = (plano.cenas || []).length;
+        const shell = process.platform === 'win32';
+        const cita = (a) => (shell && /\s/.test(a) ? `"${a}"` : a);
+
+        /* Projeto novo não tem o Remotion instalado: o caminho de slides
+           rodava o npx direto e morria em "could not determine executable". */
+        const passos = fs.existsSync(path.join(raiz, 'node_modules')) ? [] : [['npm', ['install', '--no-audit', '--no-fund']]];
+        // Todas as páginas num render só: a composição "Paginas" tem um quadro por cena.
+        /* O Remotion recusa pasta de sequência com ponto no caminho ("cannot
+           have an extension") — e ~/.primocode tem. A sequência sai numa pasta
+           temporária sem ponto e as páginas são movidas depois. */
+        const tmp = fs.mkdtempSync(path.join(require('os').tmpdir(), 'primo-paginas-'));
+        passos.push(['npx', ['remotion', 'render', 'Paginas', tmp, '--sequence',
+            '--image-format=jpeg', '--jpeg-quality=95', '--log=warn']]);
 
-        const paginas = [];
         const correr = (i) => {
-            if (i >= inicios.length) return resolve({ ok: true, paginas });
-            const { de, dur } = inicios[i];
-            const quadro = de + Math.floor(dur / 2);
-            const arquivo = path.join(destino, `pagina-${String(i + 1).padStart(3, '0')}.jpeg`);
-            aoFalar(`página ${i + 1} de ${inicios.length}`);
-
-            const p = spawn('npx', [
-                'remotion', 'still', 'Video', arquivo,
-                '--frame=' + quadro, '--image-format=jpeg', '--quality=95', '--log=warn',
-            ], { cwd: raiz, shell: process.platform === 'win32' });
-
+            if (i >= passos.length) {
+                // Pelo NÚMERO: em ordem alfabética, element-10 vem antes de element-2.
+                const num = (f) => Number((f.match(/(\d+)\.jpe?g$/i) || [])[1] || 0);
+                const saidas = fs.readdirSync(tmp).filter((f) => /\.jpe?g$/i.test(f)).sort((a, b) => num(a) - num(b));
+                const paginas = saidas.map((f, k) => {
+                    const final = path.join(destino, `pagina-${String(k + 1).padStart(3, '0')}.jpeg`);
+                    fs.copyFileSync(path.join(tmp, f), final);
+                    return final;
+                });
+                try { fs.rmSync(tmp, { recursive: true, force: true }); } catch { /* fica no temporário */ }
+                if (paginas.length !== n) return resolve({ ok: false, error: `saíram ${paginas.length} páginas de ${n}.` });
+                return resolve({ ok: true, paginas });
+            }
+            const [cmd, args] = passos[i];
+            aoFalar(cmd === 'npm' ? 'instalando o Remotion nesta pasta (uma vez só)' : `desenhando ${n} páginas`);
+            const p = spawn(cmd, args.map(cita), { cwd: raiz, shell });
             let erro = '';
-            p.stderr.on('data', (d) => { erro += d.toString().slice(0, 1000); });
-            const relogio = setTimeout(() => { try { p.kill(); } catch {} }, 5 * 60000);
+            p.stderr.on('data', (d) => { erro += d.toString().slice(0, 2000); });
+            const relogio = setTimeout(() => { try { p.kill(); } catch {} }, 15 * 60000);
             p.on('close', (code) => {
                 clearTimeout(relogio);
-                if (code !== 0) {
-                    return resolve({ ok: false, error: `a página ${i + 1} falhou: ${erro.slice(-400).trim()}` });
-                }
-                paginas.push(arquivo);
+                if (code !== 0) return resolve({ ok: false, error: `${cmd} saiu com ${code}: ${erro.slice(-400).trim()}` });
                 correr(i + 1);
             });
             p.on('error', (e) => { clearTimeout(relogio); resolve({ ok: false, error: e.message }); });

package/lib/fala.js

@@ -37,9 +37,95 @@
 
 'use strict';
 
+const { EventEmitter } = require('events');
 const { c, actionHeader, friendlyError } = require('./ui');
 const markdown = require('./markdown.js');
 
+/* ── O CANAL ESTRUTURADO ─────────────────────────────────────────────────
+ * A janela do app (lib/app.js) mostra a conversa como CHAT: a fala do Primo
+ * em texto e cada ação dele numa linha cinza ("Leu index.html", "Rodou npm
+ * test ✓"). Adivinhar isso relendo a saída colorida do terminal seria frágil
+ * — um rótulo que muda aqui quebraria a janela calado. Então a MESMA função
+ * que desenha no terminal também avisa, por este canal, o que desenhou.
+ *
+ * Sem ouvinte (terminal puro), `avisar` não faz nada: nenhum custo para quem
+ * não abriu a janela. */
+const eventos = new EventEmitter();
+eventos.setMaxListeners(20);
+function avisar(tipo, dados) {
+    if (!eventos.listenerCount('evento')) return;
+    try { eventos.emit('evento', Object.assign({ tipo }, dados || {})); } catch { /* a janela nunca derruba o agente */ }
+}
+
+/* O que a linha de ação da janela diz, por ferramenta. Verbo no passado
+   porque a linha fica na conversa depois que a ação acabou — "Lendo" viraria
+   mentira um segundo depois. O ícone é uma família, não um desenho por tool:
+   a página tem dez ícones, não setenta. */
+const VERBOS = {
+    read_file: ['Leu', 'ler'], write_file: ['Escreveu', 'escrever'], edit_file: ['Editou', 'editar'],
+    multi_edit: ['Editou', 'editar'], list_dir: ['Listou', 'buscar'], glob: ['Procurou', 'buscar'],
+    grep: ['Buscou', 'buscar'], run_shell: ['Rodou', 'rodar'], run_in_new_terminal: ['Abriu um terminal com', 'rodar'],
+    open_in_browser: ['Abriu', 'web'], spawn_agent: ['Chamou um agente', 'agente'], write_todos: ['Planejou', 'plano'],
+    finish: ['Concluiu', 'plano'], pesquisar_referencia: ['Pesquisou', 'web'], remember_general: ['Guardou na memória', 'plano'],
+    planejar_producao: ['Planejou a produção', 'agente'], construir_app: ['Construiu', 'agente'],
+};
+
+/** Verbo, alvo e ícone de uma ação — só o que cabe numa linha, nunca o
+ *  conteúdo inteiro de um write_file. */
+function resumoDaAcao(name, args) {
+    const a = args || {};
+    let [verbo, icone] = VERBOS[name] || [];
+    if (!verbo) {
+        if (/^browser_/.test(name)) { verbo = 'Navegador · ' + name.slice(8); icone = 'web'; }
+        else if (/^desktop_/.test(name)) { verbo = 'Computador · ' + name.slice(8).replace(/_/g, ' '); icone = 'computador'; }
+        else if (/^estudio_/.test(name)) { verbo = 'Estúdio · ' + name.slice(8); icone = 'agente'; }
+        else { verbo = name; icone = 'outro'; }
+    }
+    let alvo = a.path || a.command || a.pattern || a.consulta || a.url || a.target || a.app || a.selector
+        || a.titulo || a.description || a.arquivo || (a.todos ? `${a.todos.length} tarefas` : '') || '';
+    if (typeof alvo !== 'string') alvo = '';
+    alvo = alvo.replace(/\s+/g, ' ').trim();
+    if (alvo.length > 120) alvo = alvo.slice(0, 119) + '…';
+    return { nome: name, verbo, alvo, icone };
+}
+
+/** O resultado de uma ação, resumido para a linha da janela: ok ou não, o
+ *  "+12 −3" das edições e até 40 linhas de detalhe para quem expandir. */
+function resumoDoResultado(name, r) {
+    if (!r || typeof r !== 'object') return { nome: name, ok: true };
+    if (r.ok === false) {
+        return { nome: name, ok: false, resumo: String(r.error || `exit ${r.code ?? 'erro'}`).replace(/\s+/g, ' ').trim().slice(0, 300) };
+    }
+    const fora = { nome: name, ok: true };
+    if (typeof r._antes === 'string' && typeof r._depois === 'string') {
+        try {
+            const diff = require('./diff.js');
+            const n = r._antes.split('\n').length + r._depois.split('\n').length;
+            if (n <= diff.MAX_LINHAS_ARQUIVO * 2) {
+                const ops = diff.operacoes(r._antes, r._depois);
+                Object.assign(fora, diff.contar(ops));
+                fora.detalhe = ops.filter((o) => o.tipo !== ' ').slice(0, 40).map((o) => o.tipo + ' ' + o.texto).join('\n');
+            }
+        } catch { /* sem diff: a linha sai sem os números */ }
+    }
+    if (name === 'write_file') fora.criado = !!r.created;
+    if (name === 'run_shell' || name === 'run_in_new_terminal') {
+        const saida = String(r.stdout || '').trim() + (r.stderr ? '\n' + String(r.stderr).trim() : '');
+        fora.detalhe = saida.split('\n').slice(-40).join('\n').trim();
+        fora.codigo = r.code ?? 0;
+    }
+    const plural = (n, um, varios) => `${n} ${n === 1 ? um : varios}`;
+    if (name === 'read_file') fora.resumo = plural(r.linhas || 0, 'linha', 'linhas');
+    if (name === 'grep') fora.resumo = plural(r.total || 0, 'ocorrência', 'ocorrências');
+    if (name === 'glob') fora.resumo = plural(r.total || 0, 'arquivo', 'arquivos');
+    if (name === 'list_dir' && r.tree) fora.detalhe = String(r.tree).split('\n').slice(0, 40).join('\n');
+    if (name === 'write_todos' && Array.isArray(r.todos)) {
+        fora.detalhe = r.todos.map((t) => (t.status === 'completed' ? '✓ ' : '○ ') + t.content).join('\n');
+        fora.resumo = `${r.feitos}/${r.total}`;
+    }
+    return fora;
+}
+
 /* Até este tamanho, o texto que o modelo escreve antes de chamar uma tool é
    guardado e sai de uma vez, como pensamento. Passou disso sem tool à vista,
    é resposta — e volta a correr na tela conforme chega. Uma frase de
@@ -58,6 +144,7 @@ function pensamento(texto, profundidade) {
     if (!ls.length || !ls[0]) return '';
     const p = ident(profundidade);
     const saida = ls.map((l, i) => `${p}  ${i === 0 ? c.dim('✦') : ' '} ${c.muted(l)}`).join('\n');
+    avisar('pensamento', { texto: ls.join('\n'), prof: profundidade || 0 });
     console.log(saida);
     return saida;
 }
@@ -65,6 +152,7 @@ function pensamento(texto, profundidade) {
 /** A ação (tool) que ele decidiu fazer. */
 function acao(name, args, profundidade) {
     const saida = ident(profundidade) + actionHeader(name, args);
+    avisar('acao', Object.assign(resumoDaAcao(name, args), { prof: profundidade || 0 }));
     console.log(saida);
     return saida;
 }
@@ -102,6 +190,7 @@ function resposta(texto) {
     const largura = Math.max(40, (process.stdout.columns || 80) - 4);
     const linhasMd = markdown.renderizar(texto, largura);
     const saida = '\n' + linhasMd.map((l, i) => (i === 0 ? `${c.brand('●')} ${l}` : `  ${l}`)).join('\n');
+    avisar('resposta', { texto: String(texto) });
     console.log(saida);
     return saida;
 }
@@ -111,6 +200,7 @@ function resposta(texto) {
 function aviso(texto) {
     if (!String(texto || '').trim()) return '';
     const saida = '\n' + formatar(texto, c.warn('●'));
+    avisar('aviso', { texto: String(texto) });
     console.log(saida);
     return saida;
 }
@@ -154,9 +244,11 @@ function fluxo() {
         escrever(delta) {
             const t = String(delta || '');
             if (!t) return;
+            avisar('pedaco', { texto: t });
             sair(desenho.pedaco(t));
         },
         fechar() {
+            avisar('fim', {});
             sair(desenho.fim());
             if (escreveu) process.stdout.write('\n');
         },
@@ -174,6 +266,7 @@ function paralelo(quantos, profundidade) {
 /** Um agente delegado começando: "◆ Agente·frontend  a folha de estilo". */
 function agente(rotulo, descricao, profundidade) {
     const saida = `${ident(profundidade)}  ${c.brand('◆')} ${c.bold(rotulo || 'Agente')}${descricao ? '  ' + c.muted(descricao) : ''}`;
+    avisar('acao', { nome: 'agente', verbo: rotulo || 'Agente', alvo: String(descricao || '').slice(0, 120), icone: 'agente', prof: profundidade || 0 });
     console.log(saida);
     return saida;
 }
@@ -182,8 +275,9 @@ function agente(rotulo, descricao, profundidade) {
 function agenteVoltou(resumo, profundidade) {
     const texto = String(resumo || 'sem resultado').replace(/\s+/g, ' ').trim();
     const saida = resultado(profundidade) + c.muted(texto.length > 140 ? texto.slice(0, 139) + '…' : texto);
+    avisar('resultado', { nome: 'agente', ok: true, detalhe: texto.slice(0, 2000) });
     console.log(saida);
     return saida;
 }
 
-module.exports = { LIMIAR_PENSAMENTO, pensamento, acao, resultado, recuo, resposta, aviso, problema, frase, fluxo, paralelo, agente, agenteVoltou };
+module.exports = { eventos, avisar, resumoDaAcao, resumoDoResultado, LIMIAR_PENSAMENTO, pensamento, acao, resultado, recuo, resposta, aviso, problema, frase, fluxo, paralelo, agente, agenteVoltou };