primocode 8.42.2 → 9.1.0

package/lib/estudio/remotion.js

@@ -0,0 +1,644 @@
+/**
+ * remotion.js — o plano vira um projeto Remotion de verdade.
+ *
+ *   "Toda a renderização e composição deve ser integrada ao Remotion."
+ *
+ * ── O QUE ISTO SUBSTITUI ─────────────────────────────────────────────────
+ * O Studio antigo desenhava as cenas num navegador, com um `render.js` de
+ * 1.642 linhas e um `render.css` de 1.239, e "exportava" gravando a tela
+ * enquanto a animação tocava. Três consequências vividas:
+ *
+ *   · o vídeo saía diferente em cada máquina, porque dependia da carga do
+ *     computador e de a aba estar em foco;
+ *   · vídeo longo engasgava no meio da gravação;
+ *   · e o que dava para fazer era o que dava para fazer em CSS.
+ *
+ * Remotion é quadro a quadro, determinístico: o mesmo plano dá o mesmo
+ * arquivo em qualquer máquina, e o que dá para fazer é o que dá para fazer em
+ * React — 3D, máscara, canal alfa, ProRes, render paralelo.
+ *
+ * ── POR QUE O PROJETO NASCE NA PASTA DO USUÁRIO ──────────────────────────
+ * Remotion é React + um Chromium próprio + ffmpeg: perto de meio giga. Pôr
+ * isso no `dependencies` do PrimoCode faria o `npm i -g primocode` baixar meio
+ * giga para todo mundo, inclusive para quem nunca vai fazer um vídeo.
+ *
+ * E não precisa: Remotion é um projeto, não uma biblioteca de linha de
+ * comando. Então cada vídeo é um projeto de verdade, na pasta dele, que abre
+ * no `remotion studio`, entra no git e pode ser editado à mão depois. O
+ * PrimoCode continua com zero dependência.
+ *
+ * ── O INTERPRETADOR NÃO É UM TEMPLATE ────────────────────────────────────
+ * O `Cena.jsx` que este arquivo escreve sabe desenhar texto, forma, imagem,
+ * vídeo, ícone e legenda, e sabe animar qualquer propriedade por
+ * quadro-chave. Ele não sabe o que é uma "capa", uma "abertura" ou um "slide
+ * de números" — não existe nenhuma aparência embutida nele.
+ *
+ * É a diferença entre tinta e quadro pintado. E quando nem a tinta alcança
+ * (uma malha 3D, um morfismo), a cena aponta um `componente`: um arquivo
+ * React escrito pela própria IA, montado como qualquer outra cena.
+ *
+ * ── LICENÇA ──────────────────────────────────────────────────────────────
+ * Remotion é grátis para pessoa física e empresa pequena; empresa acima de
+ * três pessoas precisa de licença paga. Isso vale para o projeto que nasce na
+ * pasta do usuário, e o aviso vai no README gerado — descobrir isso depois de
+ * montar o fluxo de trabalho em cima dele seria péssimo.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const { spawn } = require('child_process');
+
+const VERSAO_REMOTION = '4.0.522';
+
+function escrever(destino, conteudo) {
+    fs.mkdirSync(path.dirname(destino), { recursive: true });
+    fs.writeFileSync(destino, conteudo, 'utf-8');
+}
+
+// ── os arquivos do projeto ───────────────────────────────────────────────
+
+function pkgJson(nome) {
+    return JSON.stringify({
+        name: nome.replace(/[^a-z0-9-]/gi, '-').toLowerCase() || 'video',
+        version: '1.0.0',
+        private: true,
+        scripts: {
+            studio: 'remotion studio',
+            render: 'remotion render Video saida/video.mp4',
+        },
+        dependencies: {
+            '@remotion/cli': VERSAO_REMOTION,
+            '@remotion/media-utils': VERSAO_REMOTION,
+            remotion: VERSAO_REMOTION,
+            react: '19.0.0',
+            'react-dom': '19.0.0',
+        },
+    }, null, 2) + '\n';
+}
+
+const REMOTION_CONFIG = `import { Config } from '@remotion/cli/config';
+
+// Qualidade antes de tamanho: o arquivo sai maior e sem a sujeira de
+// compressão que aparece em fundo de cor chapada e em texto fino — que é
+// justamente o que mais existe num vídeo de motion.
+Config.setVideoImageFormat('jpeg');
+Config.setJpegQuality(95);
+Config.setCodec('h264');
+Config.setCrf(16);
+Config.setChromiumOpenGlRenderer('angle');
+`;
+
+/* O interpretador. Ele é escrito como texto e copiado para o projeto porque é
+   lá que ele roda: o Remotion monta a pasta do usuário, não a nossa. */
+const CENA_JSX = String.raw`import React from 'react';
+import {
+  AbsoluteFill, Img, Video, Audio, Sequence, useCurrentFrame,
+  useVideoConfig, interpolate, staticFile, continueRender, delayRender,
+} from 'remotion';
+
+/* ── SUAVIZAÇÃO ──────────────────────────────────────────────────────────
+ * Cada curva é uma função de 0..1 em 0..1. "suave" é o padrão porque
+ * movimento linear é o que mais denuncia animação feita por máquina: nada no
+ * mundo físico começa e para na mesma velocidade. */
+const CURVAS = {
+  linear: (t) => t,
+  suave: (t) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2),
+  entrada: (t) => t * t * t,
+  saida: (t) => 1 - Math.pow(1 - t, 3),
+  elastico: (t) => (t === 0 || t === 1 ? t
+    : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1),
+  salto: (t) => {
+    const n = 7.5625, d = 2.75;
+    if (t < 1 / d) return n * t * t;
+    if (t < 2 / d) return n * (t -= 1.5 / d) * t + 0.75;
+    if (t < 2.5 / d) return n * (t -= 2.25 / d) * t + 0.9375;
+    return n * (t -= 2.625 / d) * t + 0.984375;
+  },
+};
+
+/* O valor de uma propriedade animada no segundo "t".
+ *
+ * Antes do primeiro quadro-chave vale o primeiro; depois do último vale o
+ * último. Sem isso, um elemento com animação que começa em 0.5s aparece
+ * indefinido no primeiro meio segundo — e some da tela sem motivo visível. */
+function valorEm(trilha, t, padrao) {
+  if (!Array.isArray(trilha) || trilha.length === 0) return padrao;
+  if (t <= trilha[0].t) return trilha[0].v;
+  const ultimo = trilha[trilha.length - 1];
+  if (t >= ultimo.t) return ultimo.v;
+  for (let i = 0; i < trilha.length - 1; i++) {
+    const a = trilha[i], b = trilha[i + 1];
+    if (t >= a.t && t <= b.t) {
+      const bruto = b.t === a.t ? 1 : (t - a.t) / (b.t - a.t);
+      const curva = CURVAS[b.e || a.e || 'suave'] || CURVAS.suave;
+      return a.v + (b.v - a.v) * curva(bruto);
+    }
+  }
+  return padrao;
+}
+
+function animado(anima, t) {
+  const v = {};
+  for (const [prop, trilha] of Object.entries(anima || {})) v[prop] = valorEm(trilha, t, undefined);
+  return v;
+}
+
+const medida = (v, padrao) => (v == null ? padrao : (typeof v === 'number' ? v + 'px' : String(v)));
+
+function transformDe(a, base) {
+  const partes = [];
+  const x = a.x ?? base.x, y = a.y ?? base.y, z = a.z;
+  if (x != null || y != null || z != null) {
+    partes.push('translate3d(' + (x || 0) + 'px,' + (y || 0) + 'px,' + (z || 0) + 'px)');
+  }
+  if (a.escala != null) partes.push('scale(' + a.escala + ')');
+  if (a.escalaX != null) partes.push('scaleX(' + a.escalaX + ')');
+  if (a.escalaY != null) partes.push('scaleY(' + a.escalaY + ')');
+  if (a.rotacao != null) partes.push('rotate(' + a.rotacao + 'deg)');
+  if (a.rotacaoX != null) partes.push('rotateX(' + a.rotacaoX + 'deg)');
+  if (a.rotacaoY != null) partes.push('rotateY(' + a.rotacaoY + 'deg)');
+  return partes.join(' ');
+}
+
+function filtroDe(a) {
+  const f = [];
+  if (a.desfoque) f.push('blur(' + a.desfoque + 'px)');
+  if (a.brilho != null) f.push('brightness(' + a.brilho + ')');
+  if (a.saturacao != null) f.push('saturate(' + a.saturacao + ')');
+  return f.join(' ');
+}
+
+function fundoCSS(fundo) {
+  if (!fundo) return {};
+  if (typeof fundo === 'string') return { backgroundColor: fundo };
+  if (fundo.tipo === 'cor') return { backgroundColor: fundo.valor };
+  if (fundo.tipo === 'gradiente') {
+    const ang = fundo.angulo == null ? 180 : fundo.angulo;
+    const tipo = fundo.radial ? 'radial-gradient(circle at ' + (fundo.centro || '50% 50%') + ', '
+      : 'linear-gradient(' + ang + 'deg, ';
+    return { backgroundImage: tipo + fundo.cores.join(', ') + ')' };
+  }
+  return {};
+}
+
+/* Posição: "x"/"y" são o CANTO por padrão, e o centro quando a âncora pede.
+ * A âncora existe porque centralizar à mão exige saber a largura do texto, e
+ * a largura do texto só se sabe depois de ele ser desenhado. */
+function posicao(el) {
+  const base = { position: 'absolute', left: medida(el.x, '0px'), top: medida(el.y, '0px') };
+  if (el.largura != null) base.width = medida(el.largura);
+  if (el.altura != null) base.height = medida(el.altura);
+  const a = el.ancora || 'canto';
+  if (a === 'centro') base.transform = 'translate(-50%, -50%)';
+  else if (a === 'centro-x') base.transform = 'translateX(-50%)';
+  else if (a === 'centro-y') base.transform = 'translateY(-50%)';
+  return base;
+}
+
+function Elemento({ el, t, dados }) {
+  // "de"/"ate" recortam o elemento no tempo da cena.
+  if (el.de != null && t < el.de) return null;
+  if (el.ate != null && t > el.ate) return null;
+
+  const tLocal = t - (el.de || 0);
+  const a = animado(el.anima, tLocal);
+  const base = posicao(el);
+  const move = transformDe(a, {});
+  const estilo = {
+    ...base,
+    opacity: a.opacidade ?? el.opacidade ?? 1,
+    transform: [base.transform, move].filter(Boolean).join(' '),
+    filter: filtroDe(a) || undefined,
+    mixBlendMode: el.mistura || undefined,
+  };
+
+  if (el.vidro) {
+    // Vidro fosco: desfoque do que está ATRÁS, com um véu por cima. Os dois
+    // juntos — só o desfoque some sobre fundo chapado, só o véu vira retângulo.
+    estilo.backdropFilter = 'blur(' + (el.vidro.desfoque ?? 18) + 'px) saturate(' + (el.vidro.saturacao ?? 1.4) + ')';
+    estilo.backgroundColor = el.vidro.cor || 'rgba(255,255,255,0.12)';
+    estilo.border = el.vidro.borda || '1px solid rgba(255,255,255,0.22)';
+  }
+  if (el.raio != null) estilo.borderRadius = medida(a.raio ?? el.raio);
+  if (el.sombra) estilo.boxShadow = el.sombra;
+  if (el.mascara) {
+    estilo.WebkitMaskImage = el.mascara;
+    estilo.maskImage = el.mascara;
+    estilo.WebkitMaskSize = 'contain';
+    estilo.maskSize = 'contain';
+    estilo.WebkitMaskRepeat = 'no-repeat';
+    estilo.maskRepeat = 'no-repeat';
+  }
+
+  switch (el.tipo) {
+    case 'texto':
+      return (
+        <div style={{
+          ...estilo,
+          fontFamily: el.fonte ? '"' + el.fonte + '", system-ui, sans-serif' : 'system-ui, sans-serif',
+          fontSize: medida(el.tamanho, '64px'),
+          fontWeight: el.peso || 700,
+          color: el.cor || '#fff',
+          lineHeight: el.entrelinha || 1.05,
+          letterSpacing: (a.espacamento ?? el.espacamento ?? 0) + 'px',
+          textAlign: el.alinhamento || 'left',
+          textTransform: el.caixa || undefined,
+          whiteSpace: 'pre-wrap',
+          background: el.gradienteTexto || undefined,
+          WebkitBackgroundClip: el.gradienteTexto ? 'text' : undefined,
+          WebkitTextFillColor: el.gradienteTexto ? 'transparent' : undefined,
+        }}>{el.texto}</div>
+      );
+
+    case 'forma': {
+      const forma = el.forma || 'retangulo';
+      return (
+        <div style={{
+          ...estilo,
+          width: medida(el.largura, '200px'),
+          height: forma === 'linha' ? medida(el.espessura, '4px') : medida(el.altura, '200px'),
+          background: el.fundo || el.cor || '#fff',
+          borderRadius: forma === 'circulo' ? '50%' : medida(a.raio ?? el.raio, '0px'),
+          border: el.contorno || undefined,
+        }} />
+      );
+    }
+
+    case 'imagem':
+      return (
+        <div style={{ ...estilo, overflow: 'hidden' }}>
+          <Img src={staticFile(el.src)} style={{
+            width: '100%', height: '100%',
+            objectFit: el.ajuste === 'preencher' ? 'fill' : (el.ajuste || 'cover'),
+            objectPosition: el.foco || 'center',
+          }} />
+        </div>
+      );
+
+    case 'video':
+      return (
+        <div style={{ ...estilo, overflow: 'hidden' }}>
+          <Video
+            src={staticFile(el.src)}
+            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' }}
+          />
+        </div>
+      );
+
+    case 'icone':
+      // 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' }}
+             dangerouslySetInnerHTML={{ __html: dados.icones[el.nome] || '' }} />
+      );
+
+    case 'legenda': {
+      const fala = (el.fala || []).find((f) => t >= f.de && t <= f.ate);
+      if (!fala) return null;
+      const e = el.estilo || {};
+      return (
+        <div style={{
+          ...estilo,
+          fontFamily: e.fonte ? '"' + e.fonte + '", system-ui, sans-serif' : 'system-ui, sans-serif',
+          fontSize: medida(e.tamanho, '52px'),
+          fontWeight: e.peso || 800,
+          color: e.cor || '#fff',
+          textAlign: 'center',
+          textShadow: e.sombra || '0 4px 18px rgba(0,0,0,.55)',
+          WebkitTextStroke: e.contorno || undefined,
+          background: e.fundo || undefined,
+          padding: e.fundo ? '10px 22px' : undefined,
+          borderRadius: e.fundo ? medida(e.raio, '14px') : undefined,
+          textTransform: e.caixa || undefined,
+        }}>{fala.texto}</div>
+      );
+    }
+
+    default:
+      return null;
+  }
+}
+
+export function Cena({ cena, dados }) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const t = frame / fps;
+
+  const cam = animado(cena.camera, t);
+  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)' : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <AbsoluteFill style={{ ...fundoCSS(cena.fundo), overflow: 'hidden' }}>
+      {cena.fundo && cena.fundo.tipo === 'imagem' && (
+        <Img src={staticFile(cena.fundo.src)} style={{
+          position: 'absolute', inset: 0, width: '100%', height: '100%',
+          objectFit: cena.fundo.ajuste || 'cover',
+        }} />
+      )}
+      {cena.fundo && cena.fundo.tipo === 'video' && (
+        <Video src={staticFile(cena.fundo.src)} volume={0} style={{
+          position: 'absolute', inset: 0, width: '100%', height: '100%',
+          objectFit: cena.fundo.ajuste || 'cover',
+        }} />
+      )}
+      <AbsoluteFill style={{
+        transform: camTransform || undefined,
+        transformOrigin: cena.cameraOrigem || 'center center',
+        // A perspectiva é o que transforma rotateX/rotateY em 3D de verdade;
+        // sem ela, girar em X só achata o elemento.
+        perspective: cena.perspectiva ? cena.perspectiva + 'px' : undefined,
+        transformStyle: cena.perspectiva ? 'preserve-3d' : undefined,
+      }}>
+        {(cena.elementos || []).map((el, i) => (
+          <Elemento key={i} el={el} t={t} dados={dados} />
+        ))}
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+}
+";`;
+
+const RAIZ_JSX = String.raw`import React from 'react';
+import { AbsoluteFill, Audio, Sequence, staticFile, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';
+import { Cena } from './Cena';
+import plano from './plano.json';
+import icones from './icones.json';
+
+/* A transição vive em quem SAI e em quem ENTRA ao mesmo tempo: as duas cenas
+ * ficam no ar durante o cruzamento. Fazer só a que entra aparecer por cima dá
+ * o "piscar" de fundo que denuncia corte mal feito. */
+function Transicao({ tipo, progresso, children }) {
+  const p = progresso;
+  let estilo = {};
+  if (tipo === 'esmaecer') estilo = { opacity: p };
+  else if (tipo === 'deslizar') estilo = { transform: 'translateX(' + (1 - p) * 100 + '%)' };
+  else if (tipo === 'zoom') estilo = { transform: 'scale(' + (0.86 + 0.14 * p) + ')', opacity: p };
+  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) + ')' };
+  return <AbsoluteFill style={estilo}>{children}</AbsoluteFill>;
+}
+
+export const Video = () => {
+  const { fps } = useVideoConfig();
+  const frame = useCurrentFrame();
+  const dados = { fps, icones };
+
+  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 de = inicio;
+    inicio += dur - cruz;
+    return { cena, de, dur, tipo, cruz, i };
+  });
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: plano.fundoGeral || '#000' }}>
+      {pedacos.map(({ cena, de, dur, tipo, cruz, i }) => {
+        const local = frame - de;
+        const progresso = cruz > 0 && local < cruz && i > 0
+          ? interpolate(local, [0, cruz], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' })
+          : 1;
+        return (
+          <Sequence key={i} from={de} durationInFrames={dur} name={'cena ' + (i + 1)}>
+            <Transicao tipo={i === 0 ? 'corte' : tipo} progresso={progresso}>
+              <Cena cena={cena} dados={dados} />
+            </Transicao>
+          </Sequence>
+        );
+      })}
+
+      {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}
+        />
+      )}
+      {(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} />
+        </Sequence>
+      ))}
+    </AbsoluteFill>
+  );
+};
+";`;
+
+function rootJsx(plano) {
+    const f = plano.formato || {};
+    return `import React from 'react';
+import { Composition } from 'remotion';
+import { Video } from './Video';
+import plano from './plano.json';
+import './fontes.css';
+
+const fps = ${Number(f.fps) || 30};
+const quadros = Math.max(1, Math.round(
+  plano.cenas.reduce((n, c) => n + c.duracao, 0) * fps
+  - plano.cenas.slice(1).reduce((n, c) => n + Math.round(((c.transicao && c.transicao.duracao) || 0) * fps), 0)
+));
+
+export const RemotionRoot = () => (
+  <Composition
+    id="Video"
+    component={Video}
+    durationInFrames={quadros}
+    fps={fps}
+    width={${Number(f.largura) || 1920}}
+    height={${Number(f.altura) || 1080}}
+  />
+);
+`;
+}
+
+const INDEX_JS = `import { registerRoot } from 'remotion';
+import { RemotionRoot } from './Root';
+registerRoot(RemotionRoot);
+`;
+
+function readme(titulo, plano) {
+    const f = plano.formato || {};
+    return `# ${titulo}
+
+Projeto Remotion gerado pelo PrimoCode Studio.
+
+- ${(plano.cenas || []).length} cenas · ${f.largura || 1920}×${f.altura || 1080} · ${f.fps || 30}fps
+
+## Rodar
+
+\`\`\`bash
+npm install          # uma vez, alguns minutos
+npm run studio       # abre para ver e mexer
+npm run render       # gera saida/video.mp4
+\`\`\`
+
+## Como ele é montado
+
+\`plano.json\` descreve as cenas; \`src/Cena.jsx\` as interpreta. Não há
+template nem tema: cada propriedade do vídeo está no plano.
+
+Cena que nenhuma primitiva alcança usa \`{"tipo":"componente","src":"..."}\`,
+apontando um arquivo React desta mesma pasta.
+
+## Licença do Remotion
+
+Remotion é gratuito para uso individual e empresa pequena. **Empresa com mais
+de três pessoas precisa de licença paga** (remotion.dev/license). Isso vale
+para este projeto, não para o PrimoCode.
+`;
+}
+
+/**
+ * Escreve o projeto Remotion dentro da pasta do projeto do Studio.
+ *
+ * @param {object} op
+ * @param {string} op.pasta    a pasta do projeto (~/.primocode/studio/projetos/<id>)
+ * @param {string} op.titulo
+ * @param {object} op.plano
+ * @param {object} op.icones   { "lucide:zap": "<svg…>" } já baixados
+ */
+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);
+    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));
+    escrever(path.join(src, 'Video.jsx'), RAIZ_JSX);
+    escrever(path.join(src, 'Cena.jsx'), CENA_JSX);
+    escrever(path.join(src, 'plano.json'), JSON.stringify(plano, null, 2));
+    escrever(path.join(src, 'icones.json'), JSON.stringify(icones, null, 2));
+    escrever(path.join(src, 'fontes.css'), fontesCSS(plano));
+
+    /* O Remotion serve `public/` pelo `staticFile()`. As mídias moram em
+       `midia/` e `entrada/` na pasta do projeto, então um link simbólico
+       evita duplicar arquivo de vídeo de centenas de megabytes. Onde o
+       sistema não deixa criar link (Windows sem permissão), copia. */
+    const publico = path.join(raiz, 'public');
+    fs.mkdirSync(publico, { recursive: true });
+    for (const sub of ['midia', 'entrada']) {
+        const de = path.join(pasta, sub);
+        const para = path.join(publico, sub);
+        if (!fs.existsSync(de)) continue;
+        if (fs.existsSync(para)) continue;
+        try { fs.symlinkSync(de, para, 'junction'); }
+        catch { try { fs.cpSync(de, para, { recursive: true }); } catch { /* segue */ } }
+    }
+
+    return { ok: true, raiz, publico };
+}
+
+/* As fontes vêm do Google Fonts, declaradas por @import. O projeto gerado é
+   do usuário e roda com rede disponível no `npm install`; o Chromium do
+   Remotion baixa a fonte no primeiro quadro e o Remotion espera por ela. */
+function fontesCSS(plano) {
+    const usadas = new Set();
+    for (const cena of plano.cenas || []) {
+        for (const el of cena.elementos || []) {
+            if (el.fonte) usadas.add(el.fonte);
+            if (el.estilo && el.estilo.fonte) usadas.add(el.estilo.fonte);
+        }
+    }
+    if (!usadas.size) return '/* nenhuma fonte externa neste vídeo */\n';
+    const familias = [...usadas]
+        .map((f) => 'family=' + encodeURIComponent(f).replace(/%20/g, '+') + ':wght@300;400;500;600;700;800;900')
+        .join('&');
+    return `@import url('https://fonts.googleapis.com/css2?${familias}&display=block');\n`;
+}
+
+/**
+ * Renderiza. Devolve o caminho do arquivo.
+ *
+ * `npm install` roda uma vez por projeto e demora minutos — é o preço do
+ * Remotion, e está dito no README. Daí em diante, só o render.
+ */
+/**
+ * Cita um argumento para a linha de comando do cmd.exe.
+ *
+ * Só serve ao Windows, e só porque o `shell: true` é obrigatório ali (o Node
+ * recusa spawnar npm.cmd/npx.cmd sem ele desde a correção do CVE-2024-27980).
+ * Quem não tem espaço nem metacaractere passa intacto: citar tudo deixaria a
+ * linha ilegível no log sem ganhar nada.
+ */
+function citarWin(a) {
+    const t = String(a);
+    if (!/[\s&|<>^"()]/.test(t)) return t;
+    return '"' + t.replace(/"/g, '""') + '"';
+}
+
+function renderizar({ raiz, saida, minutos = 30, aoFalar = () => {} }) {
+    return new Promise((resolve) => {
+        const temNodeModules = fs.existsSync(path.join(raiz, 'node_modules'));
+        const passos = temNodeModules ? [] : [['npm', ['install', '--no-audit', '--no-fund']]];
+        passos.push(['npx', ['remotion', 'render', 'Video', saida, '--log=warn']]);
+
+        const correr = (i) => {
+            if (i >= passos.length) return resolve({ ok: true, arquivo: saida });
+            const [cmd, args] = passos[i];
+            aoFalar(i === 0 && !temNodeModules
+                ? 'instalando o Remotion nesta pasta (uma vez só, alguns minutos)'
+                : 'renderizando quadro a quadro');
+            /* NO WINDOWS O `shell: true` NÃO CITA NADA.
+               Ele monta a linha do cmd.exe concatenando os argumentos crus, e
+               o `saida` é um caminho de arquivo que quase sempre tem espaço
+               (C:\Users\Joel Silva\primocode\...\saida\video.mp4). Sem
+               aspas, aquilo vira dois argumentos e o render falha — ou, pior,
+               escreve num lugar que ninguém pediu.
+               O `shell: true` não dá para tirar: desde a correção do
+               CVE-2024-27980 o Node recusa spawnar npm.cmd/npx.cmd sem shell.
+               Então as aspas entram na mão, só onde o shell existe. */
+            const citados = process.platform === 'win32' ? args.map(citarWin) : args;
+            const p = spawn(cmd, citados, { cwd: raiz, shell: process.platform === 'win32' });
+            let erro = '';
+            p.stderr.on('data', (d) => { erro += d.toString().slice(0, 2000); });
+            p.stdout.on('data', (d) => {
+                const linha = d.toString().trim().split('\n').pop();
+                if (/\d+%|Rendered|Encoding/i.test(linha)) aoFalar(linha.slice(0, 80));
+            });
+            const relogio = setTimeout(() => { try { p.kill(); } catch {} }, minutos * 60000);
+            p.on('close', (code) => {
+                clearTimeout(relogio);
+                if (code !== 0) {
+                    return resolve({ ok: false, error: `${cmd} saiu com ${code}: ${erro.slice(-600).trim()}` });
+                }
+                correr(i + 1);
+            });
+            p.on('error', (e) => {
+                clearTimeout(relogio);
+                /* "spawn npx ENOENT" não diz nada a quem instalou pelo ícone.
+                   Aplicativo aberto pela interface gráfica não herda o PATH do
+                   terminal: o node vem por caminho absoluto (lib/instalar-app.js),
+                   mas o npm e o npx não estão em lugar nenhum que ele enxergue. */
+                if (e.code === 'ENOENT') {
+                    return resolve({ ok: false,
+                        error: `não achei o "${cmd}" nesta máquina — o Remotion precisa dele para renderizar.`,
+                        comoResolver: 'instale o Node.js completo em nodejs.org (o npm vem junto). '
+                            + 'Se ele já está instalado e isto apareceu com o PrimoCode aberto pelo ícone, '
+                            + 'abra pelo terminal: o aplicativo não herda o PATH.' });
+                }
+                resolve({ ok: false, error: e.message });
+            });
+        };
+        correr(0);
+    });
+}
+
+module.exports = { montar, renderizar, fontesCSS, VERSAO_REMOTION, CENA_JSX };