primocode 8.12.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.12.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": {
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "start": "node bin/primocode.js",
-    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js"
+    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js"
   },
   "engines": {
     "node": ">=18.17.0"

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/ferramentas/corte.md

@@ -185,6 +185,33 @@ Na cena, `transicao` define como ela **entra**:
 
 Vale o mesmo conselho das animações: varie. Tudo em `fade` parece slide, não vídeo.
 
+## Chaves de animação
+
+`anim` faz o elemento **entrar** e parar por ali. Para ele se mexer ao longo da
+cena — atravessar, crescer devagar, sumir no fim — use `chaves`: uma lista de
+instantes, com `t` de 0 (começo da cena) a 1 (fim).
+
+```json
+{ "tipo": "texto", "texto": "Atravessa a tela",
+  "chaves": [
+    { "t": 0,    "x": -400, "opacidade": 0 },
+    { "t": 0.25, "x": 0,    "opacidade": 1 },
+    { "t": 0.75, "x": 0,    "opacidade": 1 },
+    { "t": 1,    "x": 400,  "opacidade": 0 }
+  ] }
+```
+
+Campos de uma chave, todos opcionais: `x` e `y` (**deslocamento** em pixels a
+partir de onde o elemento está — não é posição absoluta), `escala` (1 = tamanho
+normal), `giro` (graus), `opacidade` (0 a 1) e `desfoque` (pixels).
+
+No elemento: `"repetir": true` roda sem parar, e `"suavizar": false` dá
+movimento constante em vez de acelerar e frear.
+
+Duas chaves já bastam. Quem tem `chaves` ignora `anim` — as duas disputariam o
+mesmo movimento, e a chave é mais específica. Use em **um ou dois** elementos
+por vídeo: tudo se mexendo ao mesmo tempo cansa e esconde a mensagem.
+
 ## Acabamento
 
 Textura por cima da cena inteira — é o que tira a cara de template:

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/core.css

@@ -381,9 +381,18 @@ input.titulo-arq:focus { outline: none; border-color: var(--primo); background:
 }
 .grupo { border-bottom: 1px solid var(--linha); padding: 14px; }
 .grupo > .rotulo { display: block; margin-bottom: 11px; }
-.linha-campo { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
+/* Rótulo em cima, controle embaixo.
+
+   A coluna do rótulo tinha 62px fixos. "Acabamento" não cabia e saía
+   cortado; "Cor do fundo" e "Tema da cena" quebravam em duas linhas e
+   desalinhavam a altura de tudo. Era metade da sensação de "estranho" no
+   painel. Empilhado, o nome cabe inteiro e o controle usa a largura toda. */
+.linha-campo { display: grid; gap: 4px; margin-bottom: 11px; }
 .linha-campo:last-child { margin-bottom: 0; }
-.linha-campo > span { font-size: 11.5px; color: var(--fraco2); }
+.linha-campo > span {
+  font-size: 10.5px; color: var(--fraco2);
+  letter-spacing: .04em; text-transform: uppercase;
+}
 .dois { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
 .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
 .opcoes { display: flex; gap: 4px; }
@@ -721,3 +730,125 @@ body:has(.transporte) .aviso { bottom: 80px; }
   .topo { gap: 6px; padding: 0 8px; }
   .marca em { display: none; }
 }
+
+/* ══════════════════════════════════════════════════════════════════════════
+   Reordenar, modelos e ações de camada
+   
+   Três coisas que faltavam e faziam o editor parecer travado: arrastar não
+   dava retorno nenhum, camada não tinha ação à mão, e "nova cena" abria uma
+   tela em branco. O visual aqui é de propósito discreto — a peça que a
+   pessoa está fazendo é que tem de chamar atenção, não a ferramenta.
+   ═════════════════════════════════════════════════════════════════════════ */
+
+/* enquanto arrasta: o item sai de cena, o alvo se anuncia */
+.arrastando { opacity: .35; }
+.camada.alvo-solta, .miniatura.alvo-solta, .clipe.alvo-solta {
+  outline: 2px solid var(--primo);
+  outline-offset: 1px;
+}
+.camada, .miniatura, .clipe { -webkit-user-drag: element; }
+.camada:active { cursor: grabbing; }
+
+/* ações que aparecem ao passar o mouse na camada */
+.camada { position: relative; }
+.camada-acoes {
+  display: none; gap: 1px; margin-left: auto; flex: 0 0 auto;
+}
+.camada:hover .camada-acoes, .camada.ativa .camada-acoes { display: flex; }
+.camada-acoes button {
+  background: none; border: 0; padding: 3px;
+  border-radius: 5px; cursor: pointer; color: var(--fraco2);
+  display: grid; place-items: center;
+}
+.camada-acoes button:hover { background: var(--sup3, rgba(255,255,255,.08)); color: var(--texto); }
+.camada-acoes button:disabled { opacity: .25; cursor: default; }
+.camada-acoes button:disabled:hover { background: none; color: var(--fraco2); }
+.camada-acoes svg { width: 12px; height: 12px; opacity: 1; }
+
+/* a transição marcada no próprio clipe da linha do tempo */
+.clipe .tr-marca {
+  position: absolute; left: 4px; top: 4px;
+  background: rgba(6, 6, 8, .72);
+  color: #cbd5e1;
+  font-size: 9.5px; letter-spacing: .02em;
+  padding: 2px 5px; border-radius: 4px;
+  pointer-events: none;
+  max-width: calc(100% - 8px);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* o "+" no fim da tira */
+.clipe-mais {
+  flex: 0 0 auto;
+  width: 40px; height: 62px;
+  border: 1px dashed var(--linha2);
+  border-radius: 8px;
+  background: none; color: var(--fraco2);
+  cursor: pointer;
+  display: grid; place-items: center;
+}
+.clipe-mais:hover { border-color: var(--primo); color: var(--primo); }
+.clipe-mais svg { width: 15px; height: 15px; }
+
+/* galeria de modelos */
+.folha .caixa.larga { width: min(1040px, 100%); }
+.folha .sub { color: var(--fraco); font-size: 12.5px; margin: -8px 0 18px; }
+.modelos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: 14px;
+}
+.modelo {
+  background: none; border: 0; padding: 0;
+  cursor: pointer; text-align: left;
+  display: grid; gap: 7px;
+}
+.modelo .caixa-mini {
+  position: relative; width: 100%; aspect-ratio: 16/9;
+  overflow: hidden; border-radius: 9px;
+  border: 1px solid var(--linha);
+  background: var(--sup2);
+  transition: border-color .12s, transform .12s;
+}
+.modelo .caixa-mini .cena { position: absolute; top: 0; left: 0; transform-origin: top left; }
+.modelo .caixa-mini.vazia { display: grid; place-items: center; border-style: dashed; }
+.modelo .caixa-mini.vazia svg { width: 22px; height: 22px; color: var(--fraco2); }
+.modelo:hover .caixa-mini { border-color: var(--primo); transform: translateY(-2px); }
+.modelo span { font-size: 12.5px; color: var(--fraco); }
+.modelo:hover span { color: var(--texto); }
+
+/* seletor de cor compacto: amostras numa faixa, hex ao lado */
+.cor-faixa { display: grid; grid-template-columns: 1fr 62px; gap: 6px; align-items: center; }
+.cor-faixa .cores { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
+.cor-faixa .cores::-webkit-scrollbar { height: 0; }
+.cor-faixa .cores button { width: 19px; height: 19px; flex: 0 0 auto; }
+.cor-faixa .cores button.ativa { outline: 2px solid var(--texto); outline-offset: 1px; }
+.cor-faixa .sem-cor {
+  background: repeating-linear-gradient(45deg, var(--sup2) 0 4px, var(--linha2) 4px 8px);
+}
+.campo.hex { font-size: 11px; padding-left: 6px; padding-right: 6px; }
+
+/* chaves de animação: a régua mostra QUANDO cada uma acontece */
+.regua-chaves { position: relative; height: 26px; margin: 2px 0 2px; }
+.trilho-chaves {
+  position: absolute; left: 5px; right: 5px; top: 11px; height: 3px;
+  background: var(--sup3); border-radius: 2px;
+}
+.trilho-chaves .pino {
+  position: absolute; top: 50%; width: 11px; height: 11px;
+  margin: -5.5px 0 0 -5.5px; padding: 0;
+  border-radius: 50%; border: 2px solid var(--fundo);
+  background: var(--fraco); cursor: pointer;
+}
+.trilho-chaves .pino:hover { background: var(--texto); }
+.trilho-chaves .pino.ativo { background: var(--primo); transform: scale(1.25); }
+.sub-regua { font-size: 10.5px; color: var(--fraco2); margin-bottom: 10px; }
+.opcoes button.ativo { border-color: var(--primo); color: var(--primo); background: var(--primo-suave); }
+.presets { display: grid; gap: 5px; margin-top: 9px; }
+.presets button {
+  height: 30px; padding: 0 10px; text-align: left;
+  border: 1px solid var(--linha); border-radius: 8px;
+  background: var(--sup2); color: var(--fraco);
+  font: 500 12px/1 var(--sans); cursor: pointer;
+}
+.presets button:hover { background: var(--sup3); color: var(--texto); border-color: var(--primo); }