primocode 9.8.0 → 9.10.0

package/lib/estudio/remotion.js

@@ -97,6 +97,7 @@ import {
   AbsoluteFill, Img, Video, Audio, Sequence, useCurrentFrame,
   useVideoConfig, interpolate, staticFile, continueRender, delayRender,
 } from 'remotion';
+import { morfar, ehCor, misturarCor } from './morfar';
 
 /* ── SUAVIZAÇÃO ──────────────────────────────────────────────────────────
  * Cada curva é uma função de 0..1 em 0..1. "suave" é o padrão porque
@@ -133,7 +134,14 @@ function valorEm(trilha, t, padrao) {
     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);
+      const k = curva(bruto);
+      /* Texto no lugar do número: é COR ("#ff6a00") ou CAMINHO (o "d" de um
+         SVG). A cor mistura; o caminho se deforma (morfar.js): a bolinha
+         vira foguete sem corte. */
+      if (typeof a.v === 'string' || typeof b.v === 'string') {
+        return ehCor(a.v) && ehCor(b.v) ? misturarCor(a.v, b.v, k) : morfar(a.v, b.v, k);
+      }
+      return a.v + (b.v - a.v) * k;
     }
   }
   return padrao;
@@ -153,12 +161,17 @@ function transformDe(a, base) {
   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 + ')');
+  /* GIRA DEPOIS DE ENCOLHER. No CSS o último da lista age primeiro, então a
+     escala vai por último: o elemento encolhe e só então gira. Na ordem
+     inversa, uma janela de 1920 px girava no tamanho cheio e só depois
+     encolhia em X e Y — a profundidade não encolhe, e sobrava um risco de
+     1920 px atravessando a tela. */
   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)');
+  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 + ')');
   return partes.join(' ');
 }
 
@@ -222,7 +235,7 @@ function Elemento({ el, t, dados }) {
     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.raio != null || a.raio != null) estilo.borderRadius = medida(a.raio ?? el.raio);
   if (el.sombra) estilo.boxShadow = el.sombra;
   if (el.mascara) {
     estilo.WebkitMaskImage = el.mascara;
@@ -298,18 +311,68 @@ function Elemento({ el, t, dados }) {
 
     case 'forma': {
       const forma = el.forma || 'retangulo';
+      /* O TRAÇO: qualquer forma, desenhada por um caminho SVG na caixa
+         "vista" (0 0 100 100 por padrão). "caminho" e "cor" animam, e é
+         isso que deixa uma forma virar outra no mesmo plano. */
+      if (forma === 'traco') {
+        const g = el.fundo && typeof el.fundo === 'object' && el.fundo.tipo === 'gradiente' ? el.fundo : null;
+        const gid = 'g' + String(el.id || JSON.stringify(g || '')).replace(/[^a-z0-9]/gi, '').slice(0, 24);
+        const ang = ((g && g.angulo) ?? 180) * Math.PI / 180;
+        /* Volume: o degradê RADIAL com o centro fora do meio é a luz batendo de
+           um lado (a bola vira esfera), e a sombra segue o CONTORNO da forma
+           (drop-shadow), não a caixa dela. */
+        const paradas = g ? g.cores.map((c, i) => <stop key={i} offset={i / Math.max(1, g.cores.length - 1)} stopColor={c} />) : null;
+        const sombra = el.sombra ? 'drop-shadow(' + el.sombra + ')' : '';
+        return (
+          <div style={{ ...estilo, width: medida(el.largura, '200px'), height: medida(el.altura, '200px'),
+            filter: [estilo.filter, sombra].filter(Boolean).join(' ') || undefined, boxShadow: undefined }}>
+            <svg viewBox={el.vista || '0 0 100 100'} width="100%" height="100%" style={{ overflow: 'visible', display: 'block' }}>
+              {g && (
+                <defs>
+                  {g.radial
+                    ? <radialGradient id={gid} cx={(g.centro && g.centro[0]) ?? 0.35} cy={(g.centro && g.centro[1]) ?? 0.3} r={g.raio ?? 0.75}>{paradas}</radialGradient>
+                    : <linearGradient id={gid} x1={0.5 - Math.sin(ang) / 2} y1={0.5 + Math.cos(ang) / 2} x2={0.5 + Math.sin(ang) / 2} y2={0.5 - Math.cos(ang) / 2}>{paradas}</linearGradient>}
+                </defs>
+              )}
+              <path d={a.caminho ?? el.caminho} fill={el.vazado ? 'none' : (g ? 'url(#' + gid + ')' : (a.cor ?? el.cor ?? '#fff'))}
+                stroke={el.linha || undefined} strokeWidth={el.espessura || undefined} strokeLinejoin="round" strokeLinecap="round" />
+            </svg>
+          </div>
+        );
+      }
       return (
         <div style={{
           ...estilo,
           width: medida(el.largura, '200px'),
           height: forma === 'linha' ? medida(el.espessura, '4px') : medida(el.altura, '200px'),
-          ...(el.fundo && typeof el.fundo === 'object' ? fundoCSS(el.fundo) : { background: el.fundo || el.cor || '#fff' }),
+          ...(el.fundo && typeof el.fundo === 'object' ? fundoCSS(el.fundo) : { background: a.cor ?? el.fundo ?? el.cor ?? '#fff' }),
           borderRadius: forma === 'circulo' ? '50%' : medida(a.raio ?? el.raio, '0px'),
           border: el.contorno || undefined,
         }} />
       );
     }
 
+    /* O GRUPO: uma tela dentro da tela. Os filhos vivem no tempo e no espaço
+       dele; com "recorte" o que passa da borda some (a tela do celular). O
+       grupo anima como qualquer elemento: cresce, sai do celular, cobre tudo. */
+    case 'grupo':
+      return (
+        <div style={{
+          ...estilo,
+          width: medida(el.largura, '100%'), height: medida(el.altura, '100%'),
+          overflow: el.recorte ? 'hidden' : 'visible',
+          /* 3D: sem recorte, o grupo deixa os filhos no espaço da cena
+             (preserve-3d). Com recorte ele vira uma superfície plana, e a
+             "perspectiva" dele dá profundidade ao que está dentro. */
+          transformStyle: el.recorte ? undefined : 'preserve-3d',
+          perspective: el.perspectiva ? el.perspectiva + 'px' : undefined,
+          ...(el.fundo ? (typeof el.fundo === 'object' ? fundoCSS(el.fundo) : { background: el.fundo }) : {}),
+          border: el.contorno || undefined,
+        }}>
+          {(el.elementos || []).map((f, i) => <Elemento key={i} el={f} t={tLocal} dados={dados} />)}
+        </div>
+      );
+
     case 'imagem':
       return (
         <div style={{ ...estilo, overflow: 'hidden' }}>
@@ -445,10 +508,19 @@ export function Cena({ cena, dados, tFixo }) {
     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)' : '',
+    /* A CÂMERA 3D: ela gira em volta do mundo (rotacaoX/rotacaoY) e avança
+       nele (z). O que está mais perto anda mais que o que está longe — é a
+       profundidade de verdade, não um zoom. */
+    cam.z != null ? 'translateZ(' + cam.z + 'px)' : '',
+    cam.rotacaoX != null ? 'rotateX(' + cam.rotacaoX + 'deg)' : '',
+    cam.rotacaoY != null ? 'rotateY(' + cam.rotacaoY + 'deg)' : '',
   ].filter(Boolean).join(' ');
 
   return (
-    <AbsoluteFill style={{ ...fundoCSS(cena.fundo), overflow: 'hidden' }}>
+    /* A perspectiva mora AQUI, um nível acima do mundo: se ficasse no mesmo
+       elemento da câmera, girar a câmera sairia achatado. */
+    <AbsoluteFill style={{ ...fundoCSS(cena.fundo), overflow: 'hidden',
+      perspective: cena.perspectiva ? cena.perspectiva + 'px' : undefined }}>
       {cena.fundo && cena.fundo.tipo === 'imagem' && (
         <Img src={staticFile(cena.fundo.src)} style={{
           position: 'absolute', inset: 0, width: '100%', height: '100%',
@@ -464,9 +536,7 @@ export function Cena({ cena, dados, tFixo }) {
       <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,
+        // O mundo guarda o 3D dos filhos; a perspectiva vem do pai.
         transformStyle: cena.perspectiva ? 'preserve-3d' : undefined,
       }}>
         {(cena.elementos || []).map((el, i) => (
@@ -729,6 +799,7 @@ function montar({ pasta, titulo, plano, icones = {} }) {
     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, 'morfar.js'), require('./morfar.js').fonteEsm());
     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));

package/lib/estudio/sons-leves.js

@@ -0,0 +1,62 @@
+/**
+ * sons-leves.js — os efeitos do motion: leves, limpos, sintetizados.
+ *
+ *   "Animações suaves, leves e limpas, coloca música, narração e efeitos
+ *    sonoros." — Joel (28/09/2026)
+ *
+ * Os efeitos da edição (edicao.js SONS) são de corte de reels: whoosh cheio,
+ * estalo seco, impacto grave. Para o motion contínuo eles pesam. Estes são a
+ * versão leve: sopro em vez de whoosh, bolha em vez de estalo, um sino para o
+ * que nasce, um toque grave e macio para o que chega.
+ *
+ * Tudo sai do ffmpeg na hora (nada baixado, nada com licença de terceiros),
+ * uma vez por projeto.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const EFEITOS = {
+    // Sopro: ruído rosa filtrado, entra e sai devagar. É o ar da passagem.
+    sopro: ['-f', 'lavfi', '-i', 'anoisesrc=d=0.9:c=pink:a=0.5', '-af',
+        'highpass=f=300,lowpass=f=2600,afade=t=in:st=0:d=0.45:curve=qsin,afade=t=out:st=0.45:d=0.45:curve=qsin,volume=0.7'],
+    // Bolha: um seno curto que sobe, sem ataque seco.
+    bolha: ['-f', 'lavfi', '-i', "aevalsrc='0.6*sin(2*PI*(520+900*t)*t)*exp(-26*t)*(1-exp(-400*t))':s=44100:d=0.22"],
+    // Clique: o tique limpo de um trackpad.
+    clique: ['-f', 'lavfi', '-i', "aevalsrc='0.5*sin(2*PI*2400*t)*exp(-90*t)+0.15*(random(0)*2-1)*exp(-160*t)':s=44100:d=0.08"],
+    // Brilho: dois sinos em quinta, decaindo — o que nasce.
+    brilho: ['-f', 'lavfi', '-i', "aevalsrc='0.32*sin(2*PI*880*t)*exp(-3.2*t)+0.22*sin(2*PI*1320*t)*exp(-4*t)+0.12*sin(2*PI*1760*t)*exp(-5*t)':s=44100:d=1.4"],
+    // Subida: um seno que cresce devagar — anuncia a transformação.
+    subida: ['-f', 'lavfi', '-i', "aevalsrc='0.28*sin(2*PI*(180+260*t*t)*t)*(t/1.4)':s=44100:d=1.4", '-af', 'afade=t=out:st=1.2:d=0.2'],
+    // Toque grave e macio: o que chega e assenta.
+    toque: ['-f', 'lavfi', '-i', "aevalsrc='0.7*sin(2*PI*(110-50*t)*t)*exp(-7*t)':s=44100:d=0.6", '-af', 'lowpass=f=900'],
+};
+
+/**
+ * Gera os efeitos na pasta do projeto (midia/sfx-<nome>.mp3) e devolve
+ * { nome: caminho relativo }. O que já existe não é refeito; o que o ffmpeg
+ * não conseguiu gerar fica de fora (o vídeo sai sem aquele som, não quebra).
+ *
+ * `rodar(args)` é injetável: o padrão chama o ffmpeg por spawn síncrono.
+ */
+function preparar(pasta, { rodar = null } = {}) {
+    const exec = rodar || ((args) => {
+        try { require('child_process').execFileSync('ffmpeg', args, { stdio: 'ignore', timeout: 30000 }); return true; }
+        catch { return false; }
+    });
+    const sons = {};
+    for (const [nome, args] of Object.entries(EFEITOS)) {
+        const rel = `midia/sfx-${nome}.mp3`;
+        const cheio = path.join(pasta, rel);
+        if (!fs.existsSync(cheio)) {
+            fs.mkdirSync(path.dirname(cheio), { recursive: true });
+            if (!exec(['-y', '-loglevel', 'error', ...args, '-q:a', '3', cheio])) continue;
+        }
+        sons[nome] = rel;
+    }
+    return sons;
+}
+
+module.exports = { EFEITOS, preparar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "9.8.0",
+  "version": "9.10.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/entrada.test.js && node test/transparencia.test.js && node test/permissao.test.js && node test/compatibilidade.test.js && node test/skills.test.js && node test/skills-de-fora.test.js && node test/skills-novas.test.js && node test/comandos.test.js && node test/estudio.test.js && node test/voz.test.js && node test/voz-conversa.test.js && node test/modo.test.js && node test/pasta.test.js && node test/projeto.test.js && node test/nome-projeto.test.js && node test/api-propria.test.js && node test/claude-engine.test.js && node test/codex.test.js && node test/conferir.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/seta.test.js && node test/effort.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/autonomia.test.js && node test/desfazer.test.js && node test/desfazer-git.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/pipeline.test.js && node test/app.test.js && node test/app-janela.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/empurrao.test.js && node test/terminal-novo.test.js && node test/markdown.test.js && node test/coerencia.test.js && node test/contexto.test.js && node test/perigo.test.js && node test/rapidez.test.js && node test/mascotes.test.js && node test/comandos-extra.test.js && node test/offline.test.js && node test/edicao.test.js && node test/composicao.test.js && node test/acervo-site.test.js && node test/impacto.test.js && node test/cinema.test.js"
+    "test": "node test/tools.test.js && node test/ui.test.js && node test/entrada.test.js && node test/transparencia.test.js && node test/permissao.test.js && node test/compatibilidade.test.js && node test/skills.test.js && node test/skills-de-fora.test.js && node test/skills-novas.test.js && node test/comandos.test.js && node test/estudio.test.js && node test/voz.test.js && node test/voz-conversa.test.js && node test/modo.test.js && node test/pasta.test.js && node test/projeto.test.js && node test/nome-projeto.test.js && node test/api-propria.test.js && node test/claude-engine.test.js && node test/codex.test.js && node test/conferir.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/seta.test.js && node test/effort.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/autonomia.test.js && node test/desfazer.test.js && node test/desfazer-git.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/pipeline.test.js && node test/app.test.js && node test/app-janela.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/empurrao.test.js && node test/terminal-novo.test.js && node test/markdown.test.js && node test/coerencia.test.js && node test/contexto.test.js && node test/perigo.test.js && node test/rapidez.test.js && node test/mascotes.test.js && node test/comandos-extra.test.js && node test/offline.test.js && node test/edicao.test.js && node test/composicao.test.js && node test/acervo-site.test.js && node test/impacto.test.js && node test/cinema.test.js && node test/producao.test.js && node test/ende.test.js && node test/capa.test.js && node test/broll.test.js && node test/morfar.test.js && node test/motion.test.js && node test/motion-roteiro.test.js"
   },
   "engines": {
     "node": ">=18.17.0"

package/skills/motion-de-primeira/SKILL.md

@@ -42,6 +42,27 @@ a 4s. Fecho: 2s. Variar a duração é o que cria ritmo; repetir cria sono.
 **Silêncio visual.** Um quadro com uma frase e mais nada vale mais que um com
 seis elementos. Espaço vazio é composição, não desperdício.
 
+## Motion é contínuo, não uma tela por ideia
+
+Slide troca de tela. Motion é UM plano onde o mesmo objeto VIRA o próximo: a
+bolinha acende um fogo, se deforma em foguete, mergulha no celular e vira o
+ícone; o cursor gira e clica; o ícone salta e cobre a tela com o app dentro.
+
+Em vídeo de produto, anúncio e vinheta, escreva **uma cena de 8 a 15 s** no
+`estudio_plano`, não uma cena por frase:
+
+- **`forma: "traco"`**: forma livre por `caminho` (`d` de SVG, caixa 0 0 100
+  100, M/L/C/Q/Z). `caminho` e `cor` animam:
+  `"caminho": [{"t":1.6,"v":BOLA},{"t":2.5,"v":FOGUETE,"e":"elastico"}]`.
+- **`tipo: "grupo"`**: elementos que andam juntos, ou a tela dentro da tela
+  (`"recorte": true`). Filhos contam tempo e posição a partir do grupo.
+- **A troca é no mesmo lugar e instante**: o foguete some onde o ícone nasce; o
+  app nasce do tamanho e da COR do ícone.
+
+Espreme ao quicar e deixe a câmera andar até o fim.
+
+Vídeo por roteiro já sai assim (estilo padrão `motion`); escreva à mão só o que o roteiro não descreve.
+
 ## Cor e tipo
 
 Escolha a paleta a partir do ASSUNTO, e escreva os valores. Três a cinco