primocode 8.13.0 → 8.14.0

package/lib/claude-engine.js

@@ -290,15 +290,73 @@ function ultimaMensagem(messages) {
 /** Devolve a decisão pro onEvent — tool_call, ou assistant_message (com
  * degradação pra texto puro quando o bloco marcado não veio, em vez de
  * travar o turno em silêncio). */
-function emitirDecisao(textoLido, onEvent) {
+/* ─────────────────────────────────────────────── o que não deu para ler ──
+   O motor às vezes devolve algo que este lado não sabe processar: bloco com
+   sintaxe torta, ou uma ferramenta que não existe. O usuário via isso na
+   tela — "O motor Claude Code devolveu uma decisão que não consegui ler" —
+   e a tarefa parava.
+
+   Erro de forma não é assunto do usuário. Quem errou a forma foi o motor, e
+   quem sabe consertar é ele. Então o problema volta PARA ELE, dizendo
+   exatamente o que estava errado, e ele reescreve a ação. Só depois de
+   algumas tentativas seguidas é que alguém precisa saber.
+
+   `pedirCorrecao` é preenchido por quem chamou (o caminho headless ou o
+   ORCA), porque só eles sabem como falar com o motor de novo. */
+function diagnosticar(cru, nomesValidos) {
+    if (cru.includes(MARCA_INICIO) && !cru.includes(MARCA_FIM)) {
+        return 'você abriu ' + MARCA_INICIO + ' e nunca fechou com ' + MARCA_FIM + '.';
+    }
+    if (!cru.includes(MARCA_INICIO) && cru.includes(MARCA_FIM)) {
+        return 'apareceu ' + MARCA_FIM + ' sem o ' + MARCA_INICIO + ' antes.';
+    }
+    const dentro = /<<<PRIMOCODE>>>([\s\S]*?)<<<FIM>>>/.exec(cru);
+    if (dentro) {
+        try {
+            JSON.parse(dentro[1].trim());
+            return 'o JSON até é válido, mas não tem "tool_call" nem "assistant_message" na raiz.';
+        } catch (e) {
+            return 'o conteúdo entre as marcas não é JSON válido: ' + e.message
+                + '. Lembre de escapar quebra de linha como \\n dentro das strings.';
+        }
+    }
+    if (nomesValidos) return 'a ferramenta pedida não existe. As que existem: ' + nomesValidos + '.';
+    return 'não achei um bloco marcado na sua resposta.';
+}
+
+function textoDeCorrecao(cru, motivo) {
+    return 'A sua última resposta não pôde ser executada: ' + motivo
+        + '\n\nO que você mandou foi:\n---\n' + String(cru).slice(0, 1200) + '\n---\n\n'
+        + 'Reescreva AGORA a mesma intenção numa ação que o sistema reconheça. '
+        + 'Responda com exatamente UM bloco:\n'
+        + MARCA_INICIO + '\n{"tool_call":{"name":"<uma ferramenta do catálogo>","arguments":{...}}}\n' + MARCA_FIM
+        + '\nou, se era só texto para a pessoa, ' + MARCA_INICIO
+        + '\n{"assistant_message":"..."}\n' + MARCA_FIM
+        + '\nNada fora do bloco.';
+}
+
+const MAX_CORRECOES = 3;
+
+async function emitirDecisao(textoLido, onEvent, pedirCorrecao, tentativa, validos) {
+    tentativa = tentativa || 0;
     const decisao = extrairDecisao(textoLido);
     if (!decisao) {
         const cru = String(textoLido || '').trim();
         // Traz a marca do protocolo mas o bloco não dá para ler? O motor
-        // TENTOU chamar ferramenta e errou a sintaxe. Antes isso virava
-        // desistência na tela; agora vira o mesmo erro que o loop já sabe
-        // repetir ("Failed to call a function" dispara retry da rodada).
+        // TENTOU chamar ferramenta e errou a sintaxe. Em vez de mostrar isso
+        // ao usuário, devolvemos o problema ao motor com o diagnóstico e
+        // pedimos a mesma intenção escrita direito.
         if (cru.includes(MARCA_INICIO) || cru.includes(MARCA_FIM)) {
+            if (pedirCorrecao && tentativa < MAX_CORRECOES) {
+                const motivo = diagnosticar(cru);
+                try {
+                    const novo = await pedirCorrecao(textoDeCorrecao(cru, motivo));
+                    return await emitirDecisao(novo, onEvent, pedirCorrecao, tentativa + 1, validos);
+                } catch (e) {
+                    // A correção em si falhou (motor fora do ar, tempo
+                    // esgotado). Cai no caminho antigo, que o loop repete.
+                }
+            }
             onEvent({ erro: 'Failed to call a function: o motor Claude devolveu um bloco ilegível — repetindo a rodada.' });
             return;
         }
@@ -307,10 +365,27 @@ function emitirDecisao(textoLido, onEvent) {
         return;
     }
     if (decisao.tool_call) {
+        // Ferramenta que não existe é o outro jeito de o motor devolver algo
+        // que este lado não sabe processar. Antes viraria uma ação falhada
+        // com "ferramenta desconhecida" — ruído para o usuário por um erro
+        // que é do motor. Volta para ele, com a lista do que existe.
+        const nome = decisao.tool_call.name;
+        if (validos && validos.length && validos.indexOf(nome) === -1) {
+            if (pedirCorrecao && tentativa < MAX_CORRECOES) {
+                try {
+                    const novo = await pedirCorrecao(textoDeCorrecao(
+                        JSON.stringify(decisao),
+                        'a ferramenta "' + nome + '" não existe. As que existem: ' + validos.join(', ') + '.'));
+                    return await emitirDecisao(novo, onEvent, pedirCorrecao, tentativa + 1, validos);
+                } catch (e) { /* motor mudo: segue e deixa o loop tratar */ }
+            }
+            onEvent({ erro: 'Failed to call a function: ferramenta "' + nome + '" não existe — repetindo a rodada.' });
+            return;
+        }
         // lib/act.js usa tc.id pra parear a mensagem role:'tool' com este
         // tool_call (messages.push({ tool_call_id: tc.id, ... })) — sem id
         // aqui, esse pareamento quebra.
-        onEvent({ tool_call: { id: proximoId(), name: decisao.tool_call.name, arguments: decisao.tool_call.arguments || {} } });
+        onEvent({ tool_call: { id: proximoId(), name: nome, arguments: decisao.tool_call.arguments || {} } });
     }
     else if (decisao.assistant_message) {
         // O modelo pode confundir a forma com a do tool_call (que É um
@@ -359,7 +434,19 @@ async function requestActViaOrca(payload, onEvent) {
         // uma string única (`text`). Confirmado rodando de verdade (Task 9).
         const t = leitura.result.terminal || {};
         sessao.cursor = t.nextCursor != null ? String(t.nextCursor) : sessao.cursor;
-        emitirDecisao((t.tail || []).join('\n'), onEvent);
+        // No terminal a correção é só mais uma mensagem na MESMA sessão: o
+        // motor já tem o protocolo e a conversa toda em contexto, então
+        // basta dizer o que saiu errado.
+        const pedirCorrecao = (aviso) => {
+            rodarOrca(['terminal', 'send', '--terminal', sessao.handle, '--text', aviso, '--enter']);
+            esperarIdleOrca(sessao.handle, 120000);
+            const outra = JSON.parse(rodarOrca(['terminal', 'read', '--terminal', sessao.handle,
+                '--cursor', sessao.cursor, '--json']));
+            const t2 = outra.result.terminal || {};
+            sessao.cursor = t2.nextCursor != null ? String(t2.nextCursor) : sessao.cursor;
+            return (t2.tail || []).join('\n');
+        };
+        await emitirDecisao((t.tail || []).join('\n'), onEvent, pedirCorrecao, 0, nomesDasTools(payload));
     } catch (e) {
         // Handle obsoleto (terminal fechado, ORCA reiniciou) — documentado
         // pelo próprio `orca agent-context` como terminal_handle_stale. Zera
@@ -414,7 +501,26 @@ async function requestActViaHeadless(payload, onEvent) {
         '--dangerously-skip-permissions',
     ], { encoding: 'utf-8', timeout: 180000, input: prompt, maxBuffer: 32 * 1024 * 1024 });
     const r = JSON.parse(saida);
-    emitirDecisao(r.result || '', onEvent);
+    // A correção é uma segunda ida ao motor, com o mesmo protocolo e o
+    // diagnóstico do que saiu errado. Barata: o prompt é curto, e evita que
+    // um erro de sintaxe do motor vire erro na cara do usuário.
+    const pedirCorrecao = (aviso) => {
+        const s = execFileSync('claude', [
+            '-p', '--output-format', 'json', '--dangerously-skip-permissions',
+        ], {
+            encoding: 'utf-8', timeout: 120000, maxBuffer: 32 * 1024 * 1024,
+            input: corpoBootstrap + '\n\n' + aviso,
+        });
+        return JSON.parse(s).result || '';
+    };
+    await emitirDecisao(r.result || '', onEvent, pedirCorrecao, 0, nomesDasTools(payload));
+}
+
+/** Os nomes que o sistema realmente sabe executar, tirados do payload. */
+function nomesDasTools(payload) {
+    return ((payload && payload.tools) || [])
+        .map((t) => (t && t.function && t.function.name) || t.name)
+        .filter(Boolean);
 }
 
 /** Mesma forma de api.requestAct(server, payload, onEvent) — `server` não
@@ -440,4 +546,5 @@ module.exports = {
     SKILL_DIR, SKILL_PATH, garantirSkill,
     temClaudeCode, temOrca, orcaAlcancavel, escolherCaminho,
     garantirEngine, requestAct, emitirDecisao,
+    _emitirDecisao: emitirDecisao,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "8.13.0",
+  "version": "8.14.0",
   "description": "PrimoCode — agente de engenharia com IA e cursor próprio. Modelos grátis. 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": {

package/studio/ferramentas/01-modelos.md

@@ -137,8 +137,53 @@ Sem declarar nada, os elementos já entram em cascata na ordem em que aparecem.
 `meia-noite` `claro` `papel` `neon` `brasa` `floresta` `retro` `oceano` `doce` `mono`
 
 São esses dez, e só. Nome fora da lista é recusado: escuro é `meia-noite`, não
-`noite`. Cor de marca não vira tema — ela entra em `cor` nos elementos.
-Vale no documento ou por cena. Uma cena com tema diferente no meio cria respiro —
+`noite`. Vale no documento ou por cena.
+
+### Identidade — o que separa um vídeo genérico de um da marca
+
+Uma peça sem identidade sai igual a todas as outras. Três coisas resolvem, e
+custam uma linha cada:
+
+```json
+"marca": { "logo": "/midia/logo.png", "cor": "#ff5a36", "canto": "inferior-direita" }
+```
+
+`marca` vale no **documento**: o logo aparece em todas as cenas, no canto, e
+`cor` vira a cor de destaque de números, gráficos e detalhes. Ponha
+`"semMarca": true` na capa se ela já tiver o logo grande no meio.
+
+Se o usuário citar a empresa dele e não houver logo na galeria, **peça o
+arquivo** — `studio_midia` sem `arquivo` lista o que já existe. Não invente
+logo, e não deixe o vídeo sem nenhum quando ele é institucional.
+
+E varie de cena para cena:
+
+- **`fundo` diferente** ao longo do vídeo. Onze existem: `malha` `brilho`
+  `grade` `pontos` `suave` `vinheta` `aurora` `nevoa` `ondas` `raios`
+  `xadrez`. Dez cenas com o mesmo fundo é o que faz parecer template.
+- **`tom`** por cena muda a cor do destaque só ali — bom para separar
+  capítulos.
+- **`cor`** no elemento de texto, quando uma palavra precisa saltar.
+- **`tema` por cena**: uma citação em `papel` no meio de um deck escuro é
+  respiro. Uma vez, não cinco.
+
+### Objetos 3D
+
+Volume de verdade, com perspectiva — serve para produto, capa e abertura.
+
+```json
+{ "tipo": "objeto3d", "forma": "cubo", "tamanho": 320, "girar": 14,
+  "faces": ["Produto", "Dados", "IA", "Automação", "Nuvem", "Escala"] }
+```
+
+`forma`: `cubo` · `caixa` (achatada) · `cartao` (com espessura) · `prisma` ·
+`painel` (superfície flutuando). `faces` aceita texto **ou** URL de imagem —
+o logo nas seis faces de um cubo girando é abertura pronta. `girar` é a volta
+completa em segundos (`0` deixa parado no `angulo` dado), `inclinar` levanta
+ou baixa a câmera, `cores` pinta face a face.
+
+Aceita `chaves` como qualquer elemento: dá para o cubo atravessar a cena
+girando. Use **um** por cena — dois objetos girando disputam o olho. Uma cena com tema diferente no meio cria respiro —
 use uma vez, não cinco.
 
 ### Mídia do computador

package/studio/server.py

@@ -16,6 +16,7 @@ import mimetypes
 import os
 import re
 import sys
+import threading
 import time
 import unicodedata
 import uuid
@@ -299,6 +300,113 @@ def preparar_voz(doc):
             pass
 
 
+# ------------------------------------------------------- narração em arquivo --
+#
+# O usuário testou e disse: "as vozes tá a mesma merda". Estava certo, e a
+# causa era tempo, não motor. A narração era sintetizada NA HORA DE TOCAR:
+# quem apertava play antes de o Piper terminar de baixar ouvia o motor de
+# reserva — a voz robótica de sempre. Como o download leva minutos e o vídeo
+# fica pronto em segundos, era o que acontecia SEMPRE na primeira vez.
+#
+# Agora a narração vira ARQUIVO assim que o roteiro é gravado. O trabalho
+# roda no fundo, espera o motor bom ficar pronto (esperar é de graça: ninguém
+# está olhando) e grava um .wav por cena. O player já preferia
+# `cena.narracaoAudio` quando existe — passa a existir sempre.
+#
+# De quebra, conserta duas coisas que ninguém tinha ligado: o vídeo gravado
+# em MP4 carrega a voz boa, e tocar de novo não re-sintetiza nada.
+
+_narrando = set()
+_tranca_narracao = threading.Lock()
+
+
+def _assinatura_voz(texto, voz):
+    corpo = "%s|%s|%s|%s" % (texto, voz.get("voz") or "", voz.get("grave") or "",
+                             voz.get("velocidade") or "")
+    return hashlib.sha1(corpo.encode("utf-8")).hexdigest()[:10]
+
+
+def _gravar_narracao(arq_id):
+    """Sintetiza a narração de cada cena e guarda em midia/."""
+    try:
+        # Esperar o motor: são minutos, mas ninguém está esperando na frente
+        # da tela — e o resultado é a diferença entre voz de gente e voz de
+        # robô no vídeo que a pessoa vai apresentar.
+        for _ in range(120):
+            if voz_lib.pronta():
+                break
+            voz_lib.instalar()
+            time.sleep(5)
+        if not voz_lib.pronta():
+            return
+
+        a = ler(arq_id)
+        if not a:
+            return
+        doc = a.get("doc") or {}
+        voz = doc.get("voz") if isinstance(doc.get("voz"), dict) else {}
+        mudou = False
+
+        for i, c in enumerate(doc.get("cenas") or []):
+            if not isinstance(c, dict):
+                continue
+            texto = c.get("narracao")
+            if not isinstance(texto, str) or not texto.strip():
+                continue
+            assinatura = _assinatura_voz(texto, voz)
+            # Já gravada e com o mesmo texto e a mesma voz: nada a fazer.
+            if c.get("narracaoVoz") == assinatura and c.get("narracaoAudio"):
+                continue
+            # Gravação do próprio usuário nunca é sobrescrita — a voz dele
+            # vale mais que qualquer síntese.
+            if c.get("narracaoAudio") and not c.get("narracaoVoz"):
+                continue
+            try:
+                audio = voz_lib.sintetizar(
+                    texto, voz.get("voz"),
+                    grave=bool(voz.get("grave")),
+                    velocidade=float(voz.get("velocidade") or 1))
+            except Exception as e:
+                sys.stderr.write("[voz] cena %d falhou: %s\n" % (i + 1, e))
+                continue
+            if not audio:
+                continue
+            nome = "narr-%s-%d-%s.wav" % (arq_id[:28], i + 1, assinatura)
+            with open(os.path.join(MIDIA, nome), "wb") as fh:
+                fh.write(audio)
+            c["narracaoAudio"] = "/midia/" + nome
+            c["narracaoVoz"] = assinatura
+            mudou = True
+
+        if mudou:
+            # Relê antes de gravar: o agente pode ter mexido no documento
+            # enquanto a síntese rodava, e o trabalho dele vale mais.
+            atual = ler(arq_id)
+            if atual:
+                cenas = (atual.get("doc") or {}).get("cenas") or []
+                for i, c in enumerate(doc.get("cenas") or []):
+                    if i < len(cenas) and c.get("narracaoAudio") \
+                            and cenas[i].get("narracao") == c.get("narracao"):
+                        cenas[i]["narracaoAudio"] = c["narracaoAudio"]
+                        cenas[i]["narracaoVoz"] = c["narracaoVoz"]
+                gravar(atual)
+    except Exception as e:
+        sys.stderr.write("[voz] narração em arquivo falhou: %s\n" % e)
+    finally:
+        with _tranca_narracao:
+            _narrando.discard(arq_id)
+
+
+def narrar_em_arquivo(arq_id, doc):
+    if not _tem_narracao(doc):
+        return
+    with _tranca_narracao:
+        if arq_id in _narrando:
+            return
+        _narrando.add(arq_id)
+    threading.Thread(target=_gravar_narracao, args=(arq_id,), daemon=True).start()
+
+
 def mesclar(antigo, novo):
     """O documento novo por cima do antigo, chave a chave.
 
@@ -436,12 +544,14 @@ def criar(dados):
 
     preparar_voz(doc)
     arq_id = ferramenta + "-" + slugify(titulo) + "-" + uuid.uuid4().hex[:5]
-    return gravar({
+    salvo = gravar({
         "id": arq_id,
         "ferramenta": ferramenta,
         "titulo": titulo,
         "doc": doc or exemplo(ferramenta),
     })
+    narrar_em_arquivo(arq_id, salvo.get("doc") or {})
+    return salvo
 
 
 # Frases que só existem nos EXEMPLOS das specs. Documento que chega com uma
@@ -512,7 +622,8 @@ def validar_doc(modelo, doc):
     # quando o texto estava noutro campo. Era o "vídeo com música mas tudo
     # preto": documento válido na forma, invisível na tela.
     TIPOS_VALIDOS = {"texto", "lista", "cartoes", "numeros", "tabela", "codigo",
-                     "citacao", "forma", "imagem", "icone", "grafico", "no", "conector"}
+                     "citacao", "forma", "imagem", "icone", "grafico", "no", "conector",
+                     "objeto3d"}
 
     # Tema inventado tinha o mesmo destino silencioso do tipo inventado: o CSS
     # não casa com [data-tema="noite"], nenhuma cor é definida e a peça sai
@@ -1163,6 +1274,7 @@ class Handler(SimpleHTTPRequestHandler):
         if "doc" in dados:
             a["doc"] = novo
         salvo = gravar(a)
+        narrar_em_arquivo(a["id"], salvo.get("doc") or {})
         if versao:
             # O agente vê isto no resultado da tool: se ele estragou algo, o
             # caminho de volta está na resposta, não numa doc que ele não leu.

package/studio/web/js/render.js

@@ -47,8 +47,16 @@ function _porPalavra(html) {
 function aplicarFundo(no, fundo) {
   if (!fundo) return;
   if (typeof fundo === "string") {
-    if (/^(malha|brilho|grade|pontos|suave|vinheta)$/.test(fundo)) no.setAttribute("data-fundo", fundo);
-    else no.style.background = fundo;
+    // Os ONZE que o render.css define.
+    //
+    // A lista aqui tinha seis. Os outros cinco — aurora, raios, ondas,
+    // nevoa, xadrez — caíam no `else` e viravam `background: "aurora"`:
+    // CSS inválido, fundo NENHUM. E são justamente os que a spec recomenda
+    // para vídeo, então toda cena que pedia aurora ou raios saía chapada.
+    // Era metade do "os vídeos ficaram todos iguais".
+    if (/^(malha|brilho|grade|pontos|suave|vinheta|aurora|nevoa|ondas|raios|xadrez)$/.test(fundo)) {
+      no.setAttribute("data-fundo", fundo);
+    } else no.style.background = fundo;
     return;
   }
   if (fundo.tipo === "gradiente") {
@@ -148,7 +156,8 @@ function svgGrafico(e, l, a) {
 /* -------------------------------------------------------------- elementos */
 
 var TIPOS_CONHECIDOS = { texto: 1, lista: 1, cartoes: 1, numeros: 1, tabela: 1, codigo: 1,
-  citacao: 1, forma: 1, imagem: 1, icone: 1, grafico: 1, no: 1, conector: 1 };
+  citacao: 1, forma: 1, imagem: 1, icone: 1, grafico: 1, no: 1, conector: 1,
+  objeto3d: 1 };
 
 /* ── chaves de animação ──────────────────────────────────────────────────
    Transforma a lista de instantes de um elemento numa regra @keyframes de
@@ -212,6 +221,157 @@ function aplicarChaves(no, e, ctx) {
   no.style.animationIterationCount = e.repetir ? "infinite" : "1";
 }
 
+/* ── identidade da marca ─────────────────────────────────────────────────
+   "Ele não escolhe as cores dos textos, não escolhe tema, não escolhe uma
+   imagem de fundo, não coloca uma logo. Ficou horrível."
+
+   O logo era o mais gritante: não havia NENHUM jeito de pôr um. Dava para
+   subir a imagem e posicionar à mão, cena por cena — o que ninguém faz num
+   vídeo de dez cenas, e a IA nunca fazia.
+
+   `doc.marca` resolve de uma vez: o logo aparece em todas as cenas, no
+   canto, no tamanho certo, sem entrar no fluxo do layout. E `marca.cor`
+   define a cor de destaque do documento inteiro, que é o que dá identidade
+   aos números, às barras do gráfico e aos detalhes.
+
+       "marca": { "logo": "/midia/logo.png", "cor": "#ff5a36",
+                  "canto": "inferior-direita", "opacidade": 0.85 }
+
+   `cena.semMarca: true` tira de uma cena específica — a capa costuma querer
+   o logo grande no meio, não pequeno no canto. */
+var CANTOS = {
+  "superior-esquerda": "top:5.2%;left:5%",
+  "superior-direita": "top:5.2%;right:5%",
+  "inferior-esquerda": "bottom:5.2%;left:5%",
+  "inferior-direita": "bottom:5.2%;right:5%",
+};
+
+function aplicarMarca(no, cena, doc, H) {
+  var m = doc && doc.marca;
+  if (!m || typeof m !== "object") return;
+  // A cor da marca vira a cor de destaque de tudo, a menos que a cena diga
+  // outra — é ela que pinta número, barra de gráfico e detalhe.
+  if (m.cor && !cena.tom) no.style.setProperty("--c-tom", m.cor);
+  if (!m.logo || cena.semMarca) return;
+
+  var caixa = document.createElement("div");
+  caixa.className = "marca-dagua";
+  caixa.style.cssText = "position:absolute;z-index:6;pointer-events:none;"
+    + (CANTOS[m.canto] || CANTOS["inferior-direita"])
+    + ";opacity:" + (m.opacidade != null ? m.opacidade : 0.85);
+  var img = document.createElement("img");
+  img.src = m.logo;
+  img.alt = "";
+  // Altura proporcional à tela, resolvida em PIXELS: a caixa é absoluta e
+  // sem altura própria, e porcentagem dentro dela não resolveria — o logo
+  // sairia no tamanho original, gigante num caso e sumido no outro.
+  var alturaPx = Math.round((H || 1080) * ((m.altura || 4.6) / 100));
+  img.style.cssText = "height:" + alturaPx + "px;width:auto;display:block";
+  caixa.appendChild(img);
+  no.appendChild(caixa);
+}
+
+/* ── objetos 3D ──────────────────────────────────────────────────────────
+   "Quero que tu coloque a função ali no vídeo, na apresentação de slides,
+   pra fazer objeto 3D com animação, tudo assim, bem top."
+
+   Isto é 3D de verdade — perspectiva, faces, profundidade — feito com
+   transform 3D do próprio navegador. Sem WebGL e sem biblioteca: o Studio
+   não tem dependência nenhuma e não vai passar a ter por causa disto. O que
+   dá para fazer assim cobre o que um vídeo institucional pede: um cubo
+   girando com o logo nas faces, um cartão com espessura, uma pilha de
+   camadas em profundidade.
+
+       { "tipo": "objeto3d", "forma": "cubo", "tamanho": 320,
+         "faces": ["Produto", "Dados", "IA"], "girar": 14 }
+
+   `girar` é a volta completa em segundos; 0 deixa parado no ângulo dado.
+   `faces` aceita texto ou URL de imagem. E como o elemento é um nó normal,
+   as chaves de animação valem aqui também: dá para o cubo atravessar a cena
+   girando. */
+var FORMAS_3D = { cubo: 1, caixa: 1, cartao: 1, prisma: 1, painel: 1 };
+
+function _face3d(conteudo, transform, cor) {
+  var f = document.createElement("div");
+  f.className = "face3d";
+  f.style.transform = transform;
+  if (cor) f.style.background = cor;
+  if (/^(https?:|\/)/.test(String(conteudo || ""))) {
+    var im = document.createElement("img");
+    im.src = conteudo;
+    im.alt = "";
+    f.appendChild(im);
+  } else if (conteudo) {
+    f.textContent = conteudo;
+  }
+  return f;
+}
+
+function montar3d(no, e) {
+  var forma = FORMAS_3D[e.forma] ? e.forma : "cubo";
+  var t = +e.tamanho || 320;
+  // A caixa e o prisma são o cubo achatado num eixo: uma medida só muda a
+  // silhueta inteira, e o autor não precisa pensar em seis faces.
+  var prof = forma === "cartao" || forma === "painel" ? Math.max(6, Math.round(t * 0.045))
+    : (forma === "caixa" ? Math.round(t * 0.62) : t);
+  var faces = Array.isArray(e.faces) ? e.faces : [];
+  var cores = Array.isArray(e.cores) ? e.cores : [];
+
+  no.classList.add("obj3d", "f-" + forma);
+  no.style.width = _px(t);
+  no.style.height = _px(forma === "cartao" ? Math.round(t * 0.62) : t);
+  no.style.perspective = _px(e.perspectiva || t * 3.4);
+
+  var corpo = document.createElement("div");
+  corpo.className = "corpo3d";
+  corpo.style.width = _px(t);
+  corpo.style.height = _px(forma === "cartao" ? Math.round(t * 0.62) : t);
+
+  var meia = prof / 2;
+  var h = forma === "cartao" ? Math.round(t * 0.62) : t;
+  var lados = [
+    ["translateZ(" + meia + "px)", 0],
+    ["rotateY(180deg) translateZ(" + meia + "px)", 1],
+    ["rotateY(90deg) translateZ(" + (t / 2) + "px)", 2],
+    ["rotateY(-90deg) translateZ(" + (t / 2) + "px)", 3],
+    ["rotateX(90deg) translateZ(" + (h / 2) + "px)", 4],
+    ["rotateX(-90deg) translateZ(" + (h / 2) + "px)", 5],
+  ];
+  // Cartão e painel têm só frente e verso: as bordas viram espessura, e
+  // desenhar seis faces num objeto de 6px de profundidade só faria sujeira.
+  var quantas = (forma === "cartao" || forma === "painel") ? 2 : 6;
+  for (var i = 0; i < quantas; i++) {
+    var lado = lados[i];
+    var f = _face3d(faces[lado[1]] != null ? faces[lado[1]] : (faces[0] || ""),
+                    lado[0], cores[lado[1] % (cores.length || 1)]);
+    // As laterais são estreitas (a profundidade) e o topo/base são baixos.
+    //
+    // Só mudar a medida não bastava: a face é `inset: 0`, então encostava na
+    // borda esquerda em vez de ficar no meio — e a rotação, que gira em
+    // torno do centro, abria o objeto. O cubo saía com as faces soltas, sem
+    // fechar. Reposicionar a face no centro antes de girar fecha a caixa.
+    if (i >= 2 && i < 4) {
+      f.style.width = _px(prof);
+      f.style.left = _px(Math.round((t - prof) / 2));
+    }
+    if (i >= 4) {
+      f.style.height = _px(prof);
+      f.style.top = _px(Math.round((h - prof) / 2));
+    }
+    corpo.appendChild(f);
+  }
+
+  var giro = e.girar == null ? 14 : +e.girar;
+  var inclina = e.inclinar == null ? -14 : +e.inclinar;
+  if (giro > 0) {
+    corpo.style.animation = "giro3d " + giro + "s linear infinite";
+    corpo.style.setProperty("--inc", inclina + "deg");
+  } else {
+    corpo.style.transform = "rotateX(" + inclina + "deg) rotateY(" + (e.angulo || -28) + "deg)";
+  }
+  no.appendChild(corpo);
+}
+
 function renderElemento(e, ctx) {
   var no = document.createElement("div");
   var tipo = e.tipo || "texto";
@@ -451,6 +611,11 @@ function renderElemento(e, ctx) {
       break;
     }
 
+    case "objeto3d": {
+      montar3d(no, e);
+      break;
+    }
+
     case "no": {
       if (e.destaque) no.classList.add("destaque");
       if (e.formato === "circulo") no.classList.add("circulo");
@@ -642,6 +807,7 @@ function renderCena(cena, doc, op) {
   if (cena.tom) no.style.setProperty("--c-tom", cena.tom);
   if (cena.tom2) no.style.setProperty("--c-tom2", cena.tom2);
   aplicarFundo(no, cena.fundo);
+  aplicarMarca(no, cena, doc, H);
 
   var layout = cena.layout || (op.layoutPadrao || "titulo");
   var elementos = (cena.elementos || []).slice();

package/studio/web/render.css

@@ -582,3 +582,50 @@
   .cena .el { animation: none !important; opacity: 1 !important; }
   .folha-doc { padding: 0; width: auto; min-height: 0; }
 }
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Objetos 3D
+
+   Perspectiva de verdade, com transform 3D do navegador. Sem WebGL e sem
+   biblioteca — o Studio não tem dependência e não vai passar a ter por isto.
+   ═════════════════════════════════════════════════════════════════════════ */
+.el.obj3d { display: grid; place-items: center; }
+.corpo3d {
+  position: relative;
+  transform-style: preserve-3d;
+  transform: rotateX(-14deg) rotateY(-28deg);
+}
+.face3d {
+  /* Sem isto a borda e o padding SOMAM ao tamanho pedido: cada face fica
+     maior do que a medida usada no translateZ, e o cubo não fecha — as
+     faces ficam soltas, com fresta. O render.css é usado sozinho no HTML
+     exportado, então não dá para contar com o reset do core.css. */
+  box-sizing: border-box;
+  position: absolute; inset: 0;
+  display: grid; place-items: center;
+  background: var(--c-tom, #ff5a36);
+  color: #fff;
+  font: 700 clamp(14px, 2.2vw, 40px)/1.15 var(--f-display, inherit);
+  text-align: center;
+  padding: 6%;
+  border: 1px solid rgba(255, 255, 255, .16);
+  border-radius: 6px;
+  box-shadow: inset 0 0 90px rgba(0, 0, 0, .34);
+  backface-visibility: visible;
+  overflow: hidden;
+}
+.face3d img { width: 100%; height: 100%; object-fit: cover; display: block; }
+/* cada face pega uma luz diferente, senão o cubo vira uma mancha só */
+.face3d:nth-child(2) { filter: brightness(.78); }
+.face3d:nth-child(3) { filter: brightness(.88); }
+.face3d:nth-child(4) { filter: brightness(.7); }
+.face3d:nth-child(5) { filter: brightness(1.1); }
+.face3d:nth-child(6) { filter: brightness(.6); }
+
+@keyframes giro3d {
+  from { transform: rotateX(var(--inc, -14deg)) rotateY(0deg); }
+  to   { transform: rotateX(var(--inc, -14deg)) rotateY(360deg); }
+}
+
+/* painel: sem moldura, é uma superfície flutuando em profundidade */
+.el.obj3d.f-painel .face3d { border: 0; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }