primocode 8.12.0 → 8.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "8.12.0",
+  "version": "8.13.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/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/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); }

package/studio/web/js/editor.js

@@ -13,6 +13,220 @@
   var ARQ = null, doc = null;
   var iCena = 0, iAba = 0, sel = null;          // sel = índice do elemento/bloco
   var escala = 1, historico = [], futuro = [], tSalvar = null, sujo = false;
+  var chaveSel = 0;                             // chave de animação em edição
+
+  /* ------------------------------------------------------------- vocabulário
+     Os menus mostravam o valor cru do documento: "grao", "kb-aproxima", e uma
+     opção vazia no topo que não dizia nada. Quem abria o editor via três
+     caixas em branco e não tinha como adivinhar o que havia dentro. Cada
+     opção agora é [valor, nome em português], e o vazio virou uma frase.
+
+     Os valores NÃO mudam — são os mesmos que o render.css entende. O que
+     muda é só o que a pessoa lê. */
+  var OPC = {
+    transicao: [["", "Nenhuma (corte seco)"], ["fade", "Suave"], ["deslizar", "Deslizar para o lado"],
+      ["subir", "Subir"], ["zoom", "Aproximar"], ["limpar", "Varrer"],
+      ["persiana", "Persiana"], ["flash", "Flash"]],
+    fundo: [["", "Sem fundo"], ["malha", "Malha"], ["aurora", "Aurora"], ["raios", "Raios"],
+      ["brilho", "Brilho"], ["ondas", "Ondas"], ["grade", "Grade"], ["pontos", "Pontos"],
+      ["vinheta", "Vinheta"], ["ruido", "Ruído"]],
+    acabamento: [["", "Nenhum"], ["grao", "Granulado"], ["vinheta", "Vinheta"],
+      ["scanlines", "Linhas de TV"], ["luz", "Vazamento de luz"], ["brilho", "Brilho"],
+      ["moldura", "Moldura"]],
+    animacao: [["", "Nenhuma"], ["subir", "Subir"], ["surgir", "Surgir"], ["esq", "Da esquerda"],
+      ["dir", "Da direita"], ["zoom", "Aproximar"], ["desfoque", "Sair do desfoque"],
+      ["cair", "Cair"], ["girar", "Girar"], ["saltar", "Saltar"], ["revelar", "Revelar"],
+      ["cortina", "Cortina"], ["elastico", "Elástico"]],
+    kenburns: [["", "Parado"], ["aproxima", "Aproximar"], ["afasta", "Afastar"],
+      ["esquerda", "Correr para a esquerda"], ["direita", "Correr para a direita"],
+      ["cima", "Subir devagar"]],
+  };
+
+  /* Menu com nome legível. Aceita "valor" ou ["valor", "Nome"]. */
+  function menu(opcoes, atual, aoMudar) {
+    var s = el("select", "campo");
+    opcoes.forEach(function (o) {
+      var valor = Array.isArray(o) ? o[0] : o;
+      var nome = Array.isArray(o) ? o[1] : String(o);
+      var op = el("option", "", nome);
+      op.value = valor;
+      if (String(valor) === String(atual == null ? "" : atual)) op.selected = true;
+      s.appendChild(op);
+    });
+    s.onchange = function () { aoMudar(s.value); };
+    return s;
+  }
+
+  /* ---------------------------------------------------------------- arrastar
+     Reordenar não existia. As camadas e as cenas só respondiam a clique, e
+     quem tentava arrastar — que é o gesto óbvio — não acontecia nada. Este
+     é o mesmo comportamento para as duas listas: pega, mostra onde vai cair,
+     solta, reordena e salva. */
+  function arrastavel(no, indice, mover) {
+    no.draggable = true;
+    no.addEventListener("dragstart", function (ev) {
+      ev.dataTransfer.effectAllowed = "move";
+      ev.dataTransfer.setData("text/plain", String(indice));
+      no.classList.add("arrastando");
+    });
+    no.addEventListener("dragend", function () {
+      no.classList.remove("arrastando");
+      Array.prototype.forEach.call(document.querySelectorAll(".alvo-solta"),
+        function (n) { n.classList.remove("alvo-solta"); });
+    });
+    no.addEventListener("dragover", function (ev) {
+      ev.preventDefault();
+      ev.dataTransfer.dropEffect = "move";
+      no.classList.add("alvo-solta");
+    });
+    no.addEventListener("dragleave", function () { no.classList.remove("alvo-solta"); });
+    no.addEventListener("drop", function (ev) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      no.classList.remove("alvo-solta");
+      var de = parseInt(ev.dataTransfer.getData("text/plain"), 10);
+      if (isNaN(de) || de === indice) return;
+      mover(de, indice);
+    });
+  }
+
+  /* Tira o item de uma posição e põe na outra, na mesma lista. */
+  function reordenar(lista, de, para) {
+    var item = lista.splice(de, 1)[0];
+    lista.splice(para, 0, item);
+  }
+
+  function nomeDaOpcao(opcoes, valor) {
+    for (var i = 0; i < opcoes.length; i++) {
+      if (String(opcoes[i][0]) === String(valor)) return opcoes[i][1];
+    }
+    return String(valor);
+  }
+
+  /* ----------------------------------------------------------------- modelos
+     Cena pronta, com texto de exemplo, para pôr e trocar as palavras.
+
+     "Nova cena" dava uma cena VAZIA, e cena vazia é a tela em branco: quem
+     abre não sabe por onde começar e o resultado sai desalinhado do resto.
+     Estes modelos são os mesmos arranjos que a spec ensina à IA — a pessoa
+     agora alcança os mesmos, com um clique. */
+  var MODELOS = [
+    { id: "capa", nome: "Abertura", para: ["corte", "prisma", "tela"],
+      cena: { layout: "capa", duracao: 4, fundo: "malha", transicao: "fade", elementos: [
+        { tipo: "texto", papel: "chapeu", texto: "NOME DA EMPRESA", an: "surgir" },
+        { tipo: "texto", papel: "titulo", texto: "O título que abre", an: "subir" },
+        { tipo: "texto", papel: "apoio", texto: "Uma frase que explica do que se trata.", an: "subir" }] } },
+    { id: "titulo-lista", nome: "Título e tópicos", para: ["corte", "prisma"],
+      cena: { layout: "titulo", duracao: 6, transicao: "deslizar", elementos: [
+        { tipo: "texto", papel: "titulo", texto: "Uma ideia por cena" },
+        { tipo: "lista", itens: ["Primeiro ponto", "Segundo ponto", "Terceiro ponto"],
+          revelar: true, intervalo: 0.9 }] } },
+    { id: "numeros", nome: "Números que impressionam", para: ["corte", "prisma", "tela"],
+      cena: { layout: "centro", duracao: 5, fundo: "brilho", transicao: "zoom", elementos: [
+        { tipo: "numeros", itens: [
+          { valor: "3x", rotulo: "mais rápido" },
+          { valor: "40%", rotulo: "menos custo" },
+          { valor: "24h", rotulo: "no ar" }], an: "saltar" }] } },
+    { id: "citacao", nome: "Citação", para: ["corte", "prisma", "tela"],
+      cena: { layout: "citacao", duracao: 5, tema: "papel", transicao: "limpar", elementos: [
+        { tipo: "citacao", texto: "A frase que alguém disse e vale repetir.",
+          autor: "Quem disse", an: "desfoque" }] } },
+    { id: "cartoes", nome: "Três cartões", para: ["corte", "prisma"],
+      cena: { layout: "titulo", duracao: 6, transicao: "subir", elementos: [
+        { tipo: "texto", papel: "titulo", texto: "O que fazemos" },
+        { tipo: "cartoes", itens: [
+          { titulo: "Primeiro", texto: "Uma linha explicando." },
+          { titulo: "Segundo", texto: "Uma linha explicando." },
+          { titulo: "Terceiro", texto: "Uma linha explicando." }], revelar: true }] } },
+    { id: "secao", nome: "Divisor de seção", para: ["corte", "prisma"],
+      cena: { layout: "secao", duracao: 2.5, fundo: "aurora", transicao: "flash", elementos: [
+        { tipo: "texto", papel: "titulo", texto: "Parte dois", an: "zoom" }] } },
+    { id: "foto", nome: "Foto com frase", para: ["corte", "prisma", "tela"],
+      cena: { layout: "capa", duracao: 5, acabamento: "vinheta", transicao: "fade",
+        fundo: "vinheta", kenburns: "aproxima", elementos: [
+          { tipo: "texto", papel: "titulo", texto: "A frase por cima da imagem", an: "subir" }] } },
+    { id: "grafico", nome: "Gráfico", para: ["corte", "prisma"],
+      cena: { layout: "titulo", duracao: 6, elementos: [
+        { tipo: "texto", papel: "titulo", texto: "Como evoluiu" },
+        { tipo: "grafico", grafico: "barras",
+          dados: [["Jan", 30], ["Fev", 52], ["Mar", 71], ["Abr", 96]] }] } },
+    { id: "fecho", nome: "Fecho / chamada", para: ["corte", "prisma", "tela"],
+      cena: { layout: "centro", duracao: 4, fundo: "raios", transicao: "zoom", elementos: [
+        { tipo: "texto", papel: "titulo", texto: "Vamos conversar", an: "zoom" },
+        { tipo: "texto", papel: "apoio", texto: "seu@email.com", an: "surgir" }] } },
+  ];
+
+  function modelosDaFerramenta() {
+    return MODELOS.filter(function (m) { return m.para.indexOf(SLUG) !== -1; });
+  }
+
+  /* A galeria: cada modelo desenhado de verdade, com o renderizador do
+     produto. Miniatura falsa mentiria sobre o resultado. */
+  function abrirModelos() {
+    var fundo = el("div", "folha on");
+    var caixa = el("div", "caixa larga");
+    caixa.appendChild(el("h3", "", "Escolha um começo"));
+    caixa.appendChild(el("p", "sub",
+      "Cada um entra como cena nova, com texto de exemplo para você trocar."));
+
+    var grade = el("div", "modelos");
+    var W = doc.largura || 1920, H = doc.altura || 1080;
+    var pendentes = [];
+
+    // Primeiro a cena em branco: quem quer começar do zero não deve ter de
+    // procurar.
+    var vazio = el("button", "modelo");
+    var cxV = el("div", "caixa-mini vazia", svgIcone("mais"));
+    vazio.appendChild(cxV);
+    vazio.appendChild(el("span", "", "Cena em branco"));
+    vazio.onclick = function () { fechar(); novaCena(null); };
+    grade.appendChild(vazio);
+
+    modelosDaFerramenta().forEach(function (m) {
+      var b = el("button", "modelo");
+      var cx = el("div", "caixa-mini");
+      var mini = renderCena(m.cena, doc, {});
+      cx.appendChild(mini);
+      b.appendChild(cx);
+      b.appendChild(el("span", "", m.nome));
+      b.onclick = function () { fechar(); novaCena(m); };
+      grade.appendChild(b);
+      pendentes.push([cx, mini]);
+    });
+    caixa.appendChild(grade);
+
+    var rodape = el("div", "rodape");
+    var bFechar = el("button", "btn", "Fechar");
+    bFechar.onclick = fechar;
+    rodape.appendChild(bFechar);
+    caixa.appendChild(rodape);
+    fundo.appendChild(caixa);
+    document.body.appendChild(fundo);
+
+    // A escala só dá para calcular depois que o nó está no documento e tem
+    // largura de verdade.
+    pendentes.forEach(function (p) {
+      var larg = p[0].clientWidth || 220;
+      p[0].style.height = Math.round(larg * H / W) + "px";
+      p[1].style.transform = "scale(" + (larg / W) + ")";
+    });
+
+    function fechar() { fundo.remove(); document.removeEventListener("keydown", esc); }
+    function esc(ev) { if (ev.key === "Escape") fechar(); }
+    document.addEventListener("keydown", esc);
+    fundo.onclick = function (ev) { if (ev.target === fundo) fechar(); };
+  }
+
+  function novaCena(modelo) {
+    var base = modelo && modelo.cena
+      ? JSON.parse(JSON.stringify(modelo.cena))
+      : { layout: F.layoutPadrao, duracao: 4, elementos: [] };
+    if (!F.tempo) delete base.duracao;
+    mudar(function () {
+      doc.cenas.splice(iCena + 1, 0, base);
+      iCena++; sel = null;
+    });
+  }
 
   /* ------------------------------------------------------------ utilidades */
 
@@ -236,48 +450,80 @@
     lista.innerHTML = "";
 
     if (F.modelo === "cena") {
-      $("#painel-rotulo").textContent = SLUG === "corte" ? "Cenas" : (SLUG === "prisma" ? "Slides" : "Pranchas");
-      var W = doc.largura || 1920, H = doc.altura || 1080;
-      var minis = [];
-      (doc.cenas || []).forEach(function (c, i) {
-        var m = el("div", "miniatura" + (i === iCena ? " ativa" : ""));
-        var caixa = el("div", "caixa");
-        var mini = renderCena(c, doc, {});
-        caixa.appendChild(mini);
-        m.appendChild(caixa);
-        m.appendChild(el("div", "num", String(i + 1)));
-        m.onclick = function () { iCena = i; sel = null; desenhar(); };
-        lista.appendChild(m);
-        minis.push([caixa, mini]);
-      });
-      // a escala vem da largura real da caixa, que depende do painel
-      minis.forEach(function (par) {
-        var larg = par[0].clientWidth || 160;
-        par[0].style.height = Math.round(larg * H / W) + "px";
-        par[1].style.transform = "scale(" + (larg / W) + ")";
-      });
+      // No Corte as cenas já vivem na tira do rodapé. Repetir a mesma lista
+      // aqui era o pior tipo de duplicação: duas coisas iguais, lado a lado,
+      // sem dizer qual manda. Aqui ficam só as camadas — que é o que faltava
+      // ter espaço.
+      var soCamadas = !!F.tempo;
+      if (!soCamadas) {
+        $("#painel-rotulo").textContent = SLUG === "prisma" ? "Slides" : "Pranchas";
+        var W = doc.largura || 1920, H = doc.altura || 1080;
+        var minis = [];
+        (doc.cenas || []).forEach(function (c, i) {
+          var m = el("div", "miniatura" + (i === iCena ? " ativa" : ""));
+          var caixa = el("div", "caixa");
+          var mini = renderCena(c, doc, {});
+          caixa.appendChild(mini);
+          m.appendChild(caixa);
+          m.appendChild(el("div", "num", String(i + 1)));
+          m.onclick = function () { iCena = i; sel = null; desenhar(); };
+          arrastavel(m, i, function (de, para) {
+            mudar(function () { reordenar(doc.cenas, de, para); });
+            iCena = para; sel = null; desenhar();
+          });
+          lista.appendChild(m);
+          minis.push([caixa, mini]);
+        });
+        // a escala vem da largura real da caixa, que depende do painel
+        minis.forEach(function (par) {
+          var larg = par[0].clientWidth || 160;
+          par[0].style.height = Math.round(larg * H / W) + "px";
+          par[1].style.transform = "scale(" + (larg / W) + ")";
+        });
+      }
 
-      if (sel != null || (cena().elementos || []).length) {
+      var els = cena().elementos || [];
+      $("#painel-rotulo").textContent = soCamadas ? "Camadas da cena" : $("#painel-rotulo").textContent;
+      if (!soCamadas && els.length) {
         var tit = el("div", "rotulo");
-        tit.style.cssText = "padding:12px 4px 6px";
+        tit.style.cssText = "padding:14px 4px 6px";
         tit.textContent = "Camadas";
         lista.appendChild(tit);
-        (cena().elementos || []).forEach(function (e2, i) {
-          var c = el("div", "camada" + (i === sel ? " ativa" : ""),
-                     svgIcone(iconeDe(e2)) + "<span>" + rotuloDe(e2) + "</span>");
-          c.onclick = function () { sel = i; desenhar(); };
-          lista.appendChild(c);
-        });
       }
+      if (!els.length) {
+        lista.appendChild(el("div", "nada", soCamadas
+          ? "Cena vazia. Use a barra da esquerda para pôr texto, lista, número ou imagem."
+          : "Nada nesta prancha ainda."));
+      }
+      // De cima para baixo na lista = da frente para trás na tela, que é como
+      // todo editor de camada se comporta. O documento guarda o contrário.
+      els.slice().reverse().forEach(function (e2, ordem) {
+        var i = els.length - 1 - ordem;
+        var c = el("div", "camada" + (i === sel ? " ativa" : ""),
+                   svgIcone(iconeDe(e2)) + "<span>" + rotuloDe(e2) + "</span>");
+        c.appendChild(botoesDaCamada(els, i));
+        c.onclick = function () { sel = i; desenhar(); };
+        arrastavel(c, i, function (de, para) {
+          mudar(function () { reordenar(els, de, para); });
+          sel = para; desenhar();
+        });
+        lista.appendChild(c);
+      });
       return;
     }
 
     if (F.modelo === "documento") {
       $("#painel-rotulo").textContent = "Blocos";
-      (doc.blocos || []).forEach(function (b, i) {
+      var blocos = doc.blocos || [];
+      blocos.forEach(function (b, i) {
         var c = el("div", "camada" + (i === sel ? " ativa" : ""),
                    svgIcone(iconeDe(b)) + "<span>" + rotuloDe(b) + "</span>");
+        c.appendChild(botoesDaCamada(blocos, i));
         c.onclick = function () { sel = i; desenhar(); };
+        arrastavel(c, i, function (de, para) {
+          mudar(function () { reordenar(blocos, de, para); });
+          sel = para; desenhar();
+        });
         lista.appendChild(c);
       });
       return;
@@ -292,6 +538,41 @@
     });
   }
 
+  /* Subir, descer, duplicar e apagar direto na camada.
+
+     Arrastar é o gesto natural, mas não é o único: num item pequeno o
+     arrasto erra o alvo, e teclado não arrasta. Os botões fazem o mesmo
+     trabalho sem depender de pontaria. */
+  function botoesDaCamada(lista, i) {
+    var caixa = el("div", "camada-acoes");
+    function bt(icone, titulo, fn) {
+      var b = el("button", "", svgIcone(icone));
+      b.title = titulo;
+      b.onclick = function (ev) { ev.stopPropagation(); fn(); };
+      caixa.appendChild(b);
+      return b;
+    }
+    bt("subir", "Trazer para a frente", function () {
+      if (i >= lista.length - 1) return;
+      mudar(function () { reordenar(lista, i, i + 1); });
+      sel = i + 1; desenhar();
+    }).disabled = i >= lista.length - 1;
+    bt("descer", "Mandar para trás", function () {
+      if (i <= 0) return;
+      mudar(function () { reordenar(lista, i, i - 1); });
+      sel = i - 1; desenhar();
+    }).disabled = i <= 0;
+    bt("duplicar", "Duplicar", function () {
+      mudar(function () { lista.splice(i + 1, 0, JSON.parse(JSON.stringify(lista[i]))); });
+      sel = i + 1; desenhar();
+    });
+    bt("lixeira", "Apagar", function () {
+      mudar(function () { lista.splice(i, 1); });
+      sel = null; desenhar();
+    });
+    return caixa;
+  }
+
   function iconeDe(e) {
     return { texto: "texto", lista: "lista", cartoes: "cartao", numeros: "numero",
              tabela: "tabela", codigo: "codigo", citacao: "citacao", forma: "quadrado",
@@ -333,13 +614,20 @@
     wrap.appendChild(quadro);
 
     /* seleção e interação */
-    var els = Array.prototype.slice.call(cn.querySelectorAll(".el"));
+    // Índice do documento -> nó na tela, pelo carimbo que o renderizador
+    // deixa em data-i.
+    //
+    // Antes isto era deduzido pela ordem: o k-ésimo nó era o k-ésimo
+    // elemento. A dedução quebra em todo layout de fluxo, porque eles
+    // desenham o cabeçalho (chapéu e título) antes do corpo — a ordem na
+    // tela não é a do documento. Quem clicava num texto via o editor
+    // selecionar outro, e editava o errado. Foi medido: nas três camadas da
+    // cena de teste, as três apontavam para o elemento vizinho.
     var lista = cena().elementos || [];
-    var mapa = [];                                   // nó -> índice no documento
-    var k = 0;
-    lista.forEach(function (e) {
-      if (e.tipo === "conector") { mapa.push(null); return; }
-      mapa.push(els[k++] || null);
+    var mapa = lista.map(function () { return null; });
+    Array.prototype.forEach.call(cn.querySelectorAll(".el[data-i]"), function (no) {
+      var i = +no.dataset.i;
+      if (i >= 0 && i < mapa.length && !mapa[i]) mapa[i] = no;
     });
 
     mapa.forEach(function (no, i) {
@@ -463,13 +751,8 @@
     var esp = el("div"); esp.style.flex = "1"; b.appendChild(esp);
 
     if (F.modelo === "cena") {
-      var addC = el("button", "btn", svgIcone("mais") + " Nova cena");
-      addC.onclick = function () {
-        mudar(function () {
-          doc.cenas.splice(iCena + 1, 0, { layout: F.layoutPadrao, elementos: [] });
-          iCena++; sel = null;
-        });
-      };
+      var addC = el("button", "btn primo", svgIcone("mais") + " Nova cena");
+      addC.onclick = abrirModelos;
       var dup = el("button", "btn", svgIcone("duplicar"));
       dup.title = "Duplicar cena";
       dup.onclick = function () {
@@ -610,12 +893,28 @@
       caixa.appendChild(mini);
       clipe.appendChild(caixa);
       clipe.appendChild(el("div", "dur", dur + "s"));
+      // A transição aparece NA tira, entre um clipe e outro, que é onde ela
+      // acontece. Escondida num menu do inspetor, ninguém achava.
+      if (c.transicao && c.transicao !== "corte") {
+        clipe.appendChild(el("div", "tr-marca", nomeDaOpcao(OPC.transicao, c.transicao)));
+      }
       clipe.onclick = function () { iCena = i; sel = null; desenhar(); };
+      clipe.ondblclick = function () { Player && Player.tocar && Player.tocar(); };
+      arrastavel(clipe, i, function (de, para) {
+        mudar(function () { reordenar(doc.cenas, de, para); });
+        iCena = para; sel = null; desenhar();
+      });
       t.appendChild(clipe);
     });
+
+    var mais = el("button", "clipe-mais", svgIcone("mais"));
+    mais.title = "Nova cena";
+    mais.onclick = abrirModelos;
+    t.appendChild(mais);
+
     var info = el("div");
     info.style.cssText = "margin-left:12px;font-size:12px;color:var(--fraco2);white-space:nowrap";
-    info.textContent = "total " + total.toFixed(1) + "s";
+    info.textContent = "total " + total.toFixed(1) + "s · arraste para reordenar";
     t.appendChild(info);
   }
 
@@ -790,10 +1089,44 @@
     return t;
   }
 
-  function selecao(valores, atual, aoMudar) {
+  /* O menu escreve em português.
+
+     Antes ele mostrava o valor cru do documento — "grao", "kb-aproxima",
+     "left" — e uma opção vazia no topo, sem texto nenhum. Três caixas em
+     branco no inspetor, e nada dizendo o que havia dentro delas.
+
+     O dicionário traduz na hora de mostrar; o valor gravado continua o
+     mesmo, porque é ele que o render.css entende. `vazio` é o texto da
+     opção "", que muda com o contexto: em Fundo é "Sem fundo", em
+     Acabamento é "Nenhum". */
+  var NOMES = {
+    malha: "Malha", brilho: "Brilho", grade: "Grade", pontos: "Pontos", suave: "Suave",
+    vinheta: "Vinheta", aurora: "Aurora", raios: "Raios", ondas: "Ondas", ruido: "Ruído",
+    grao: "Granulado", scanlines: "Linhas de TV", luz: "Vazamento de luz", moldura: "Moldura",
+    horizontal: "Na horizontal", vertical: "Na vertical",
+    chapeu: "Chapéu", titulo: "Título", subtitulo: "Subtítulo", apoio: "Apoio",
+    corpo: "Corpo", legenda: "Legenda",
+    left: "À esquerda", center: "Ao centro", right: "À direita",
+    cobrir: "Preencher", conter: "Caber inteira",
+    cinza: "Preto e branco", sepia: "Sépia", contraste: "Contraste", desbotado: "Desbotado",
+    aproximar: "Aproximar", afastar: "Afastar", esquerda: "Para a esquerda",
+    direita: "Para a direita", cima: "Para cima",
+    retangulo: "Retângulo", circulo: "Círculo", triangulo: "Triângulo",
+    linha: "Linha", seta: "Seta",
+    barras: "Barras", area: "Área", pizza: "Pizza", rosca: "Rosca",
+    curva: "Curva", reta: "Reta", cotovelo: "Cotovelo",
+    texto: "Texto", inteiro: "Número inteiro", decimal: "Decimal",
+    moeda: "Dinheiro", percentual: "Porcentagem",
+    "não": "Não", sim: "Sim",
+    300: "Fino", 400: "Normal", 500: "Médio", 600: "Semi-negrito",
+    700: "Negrito", 800: "Extra-negrito",
+  };
+
+  function selecao(valores, atual, aoMudar, vazio) {
     var s = el("select", "campo");
     valores.forEach(function (v) {
-      var o = el("option", "", String(v));
+      var rotulo = v === "" ? (vazio || "Automático") : (NOMES[v] || String(v));
+      var o = el("option", "", rotulo);
       o.value = v;
       if (String(v) === String(atual)) o.selected = true;
       s.appendChild(o);
@@ -802,18 +1135,32 @@
     return s;
   }
 
+  /* As amostras e o campo hex na MESMA faixa.
+
+     Empilhados, cada cor ocupava três linhas do painel; com dois seletores
+     de cor na mesma tela, sobrava painel só para eles. Agora as amostras
+     rolam numa faixa e o hex fica ao lado — e a amostra escolhida aparece
+     marcada, coisa que antes não dava para saber. */
   function seletorCor(valor, aoMudar) {
-    var caixa = el("div");
-    caixa.style.cssText = "display:grid;gap:6px";
+    var caixa = el("div", "cor-faixa");
     var p = el("div", "cores");
+    var limpar = el("button", "sem-cor");
+    limpar.title = "Sem cor";
+    limpar.onclick = function () { aoMudar(""); };
+    p.appendChild(limpar);
     PALETA.forEach(function (c) {
       var b = el("button");
       b.style.background = c;
+      if (String(valor).toLowerCase() === String(c).toLowerCase()) b.classList.add("ativa");
+      b.title = c;
       b.onclick = function () { aoMudar(c); };
       p.appendChild(b);
     });
     caixa.appendChild(p);
-    caixa.appendChild(inp(valor, aoMudar));
+    var hex = inp(valor, aoMudar);
+    hex.placeholder = "#hex";
+    hex.className = "campo hex";
+    caixa.appendChild(hex);
     return caixa;
   }
 
@@ -837,13 +1184,21 @@
       var c = cena();
       g0.appendChild(linha("Layout", selecao(F.layouts, c.layout || F.layoutPadrao,
         function (v) { mudar(function () { c.layout = v; }); })));
-      g0.appendChild(linha("Fundo", selecao(["", "malha", "brilho", "grade", "pontos", "suave", "vinheta"],
-        typeof c.fundo === "string" ? c.fundo : "", function (v) { mudar(function () { if (v) c.fundo = v; else delete c.fundo; }); })));
-      g0.appendChild(linha("Fundo (extra)", selecao(
-        ["", "aurora", "raios", "ondas", "nevoa", "xadrez"],
-        ["aurora", "raios", "ondas", "nevoa", "xadrez"].indexOf(c.fundo) >= 0 ? c.fundo : "",
-        function (v) { mudar(function () { if (v) c.fundo = v; }); })));
-      g0.appendChild(linha("Cor fundo", inp(typeof c.fundo === "string" && c.fundo.charAt(0) === "#" ? c.fundo : "",
+      // UM controle para o fundo, não três.
+      //
+      // Havia "Fundo", "Fundo (extra)" e "Cor fundo", lado a lado, e os três
+      // gravavam na MESMA propriedade: escolher num apagava o outro, e dois
+      // deles apareciam vazios porque só um podia estar preenchido por vez.
+      // Era a parte mais confusa do inspetor. Agora é uma lista só, com tudo
+      // que existe, e a cor entra por baixo quando é cor que se quer.
+      var padroes = ["", "malha", "brilho", "grade", "pontos", "suave", "vinheta",
+        "aurora", "raios", "ondas", "nevoa", "xadrez"];
+      var fundoAtual = typeof c.fundo === "string" && c.fundo.charAt(0) !== "#" ? c.fundo : "";
+      g0.appendChild(linha("Fundo", selecao(padroes, fundoAtual, function (v) {
+        mudar(function () { if (v) c.fundo = v; else delete c.fundo; });
+      }, "Sem fundo")));
+      g0.appendChild(linha("Cor do fundo", seletorCor(
+        typeof c.fundo === "string" && c.fundo.charAt(0) === "#" ? c.fundo : "",
         function (v) { mudar(function () { if (v) c.fundo = v; else delete c.fundo; }); })));
 
       var bFoto = el("button", "btn", svgIcone("imagem") + " Foto de fundo");
@@ -855,16 +1210,17 @@
       };
       g0.appendChild(linha("Imagem", bFoto));
 
-      g0.appendChild(linha("Acabam.", selecao(["", "grao", "vinheta", "scanlines", "luz", "brilho", "moldura"],
-        c.acabamento || "", function (v) { mudar(function () { if (v) c.acabamento = v; else delete c.acabamento; }); })));
-      g0.appendChild(linha("Destaque", seletorCor(c.tom || "",
+      g0.appendChild(linha("Acabamento", selecao(["", "grao", "vinheta", "scanlines", "luz", "brilho", "moldura"],
+        c.acabamento || "", function (v) { mudar(function () { if (v) c.acabamento = v; else delete c.acabamento; }); }, "Nenhum")));
+      g0.appendChild(linha("Cor de destaque", seletorCor(c.tom || "",
         function (v) { mudar(function () { if (v) c.tom = v; else delete c.tom; }); })));
+      g0.appendChild(linha("Tema da cena", selecao([""].concat(TEMAS), c.tema || "",
+        function (v) { mudar(function () { if (v) c.tema = v; else delete c.tema; }); }, "Igual ao documento")));
 
       if (F.tempo) {
-        g0.appendChild(linha("Duração", inp(c.duracao || 4, function (v) { mudar(function () { c.duracao = v || 4; }); }, "number")));
-        g0.appendChild(linha("Transição", selecao(
-          ["", "corte", "fade", "deslizar", "subir", "zoom", "limpar", "persiana", "flash"],
-          c.transicao || "", function (v) { mudar(function () { if (v) c.transicao = v; else delete c.transicao; }); })));
+        g0.appendChild(linha("Duração (s)", inp(c.duracao || 4, function (v) { mudar(function () { c.duracao = v || 4; }); }, "number")));
+        g0.appendChild(linha("Como entra", menu(OPC.transicao, c.transicao || "",
+          function (v) { mudar(function () { if (v) c.transicao = v; else delete c.transicao; }); })));
       }
       if (SLUG === "traco") {
         g0.appendChild(linha("Arranjo", selecao(["", "horizontal", "vertical"], c.auto || "",
@@ -932,12 +1288,10 @@
       la.appendChild(inp(e.l, function (v) { edita("l", v); }, "number"));
       la.appendChild(inp(e.a, function (v) { edita("a", v); }, "number"));
       gp.appendChild(linha("L / A", la));
-      gp.appendChild(linha("Girar", inp(e.rotacao || 0, function (v) { edita("rotacao", v); }, "number")));
-      gp.appendChild(linha("Opacid.", inp(e.opacidade != null ? e.opacidade : 1, function (v) { edita("opacidade", v); }, "number")));
-      gp.appendChild(linha("Entrada", selecao(
-        ["", "subir", "surgir", "esquerda", "direita", "zoom", "desfoque", "cair",
-         "girar", "saltar", "revelar", "cortina", "elastico", "palavra", "nenhuma"],
-        e.anim || "", function (v) { edita("anim", v); })));
+      gp.appendChild(linha("Girar (graus)", inp(e.rotacao || 0, function (v) { edita("rotacao", v); }, "number")));
+      gp.appendChild(linha("Opacidade", inp(e.opacidade != null ? e.opacidade : 1, function (v) { edita("opacidade", v); }, "number")));
+      gp.appendChild(linha("Como entra", menu(OPC.animacao, e.anim || "",
+        function (v) { edita("anim", v); })));
       if (e.tipo === "numeros") {
         gp.appendChild(linha("Contar", selecao(["não", "sim"], e.contar ? "sim" : "não",
           function (v) { edita("contar", v === "sim" ? true : ""); })));
@@ -948,7 +1302,133 @@
         dica.style.padding = "10px 16px";
         ins.appendChild(dica);
       }
+      if (F.tempo) chavesInspetor(ins, e);
+    }
+  }
+
+  /* ─────────────────────────────────────────────────────────── chaves ─────
+     Antes um elemento só sabia ENTRAR: escolhia-se um efeito e acabava ali.
+     Nada percorria a cena, crescia devagar nem sumia no fim.
+
+     Uma chave é um instante: onde o elemento está aos 0%, aos 50%, aos
+     100% da cena. Duas ou mais viram animação de verdade. A régua embaixo
+     mostra as chaves na linha do tempo da cena — não é enfeite, é o único
+     jeito de ver que existem três chaves e que a do meio está adiantada. */
+  var PRESETS_CHAVE = [
+    { nome: "Atravessar", chaves: [{ t: 0, x: -220, opacidade: 0 }, { t: 0.18, x: 0, opacidade: 1 },
+      { t: 0.82, x: 0, opacidade: 1 }, { t: 1, x: 220, opacidade: 0 }] },
+    { nome: "Crescer devagar", chaves: [{ t: 0, escala: 1 }, { t: 1, escala: 1.18 }] },
+    { nome: "Aparecer e sumir", chaves: [{ t: 0, opacidade: 0 }, { t: 0.15, opacidade: 1 },
+      { t: 0.85, opacidade: 1 }, { t: 1, opacidade: 0 }] },
+    { nome: "Flutuar", chaves: [{ t: 0, y: 0 }, { t: 0.5, y: -22 }, { t: 1, y: 0 }] },
+    { nome: "Sair do desfoque", chaves: [{ t: 0, desfoque: 18, opacidade: 0, escala: 1.06 },
+      { t: 0.35, desfoque: 0, opacidade: 1, escala: 1 }, { t: 1, desfoque: 0, opacidade: 1, escala: 1 }] },
+  ];
+
+  function chavesInspetor(ins, e) {
+    var g = grupo("Animação por chaves");
+    var chaves = e.chaves || [];
+
+    if (!chaves.length) {
+      g.appendChild(el("div", "nada",
+        "Sem chaves: o elemento fica parado depois de entrar."));
+      var pr = el("div", "presets");
+      PRESETS_CHAVE.forEach(function (p) {
+        var b = el("button", "", p.nome);
+        b.onclick = function () {
+          edita("chaves", JSON.parse(JSON.stringify(p.chaves)));
+        };
+        pr.appendChild(b);
+      });
+      g.appendChild(pr);
+      ins.appendChild(g);
+      return;
+    }
+
+    // A régua: cada chave é um pino na duração da cena.
+    var regua = el("div", "regua-chaves");
+    var trilho = el("div", "trilho-chaves");
+    regua.appendChild(trilho);
+    chaves.forEach(function (k, i) {
+      var pino = el("button", "pino" + (i === chaveSel ? " ativo" : ""));
+      pino.style.left = (Math.max(0, Math.min(1, k.t || 0)) * 100) + "%";
+      pino.title = ((k.t || 0) * (cena().duracao || 4)).toFixed(1) + "s";
+      pino.onclick = function () { chaveSel = i; desenharInspetor(); };
+      trilho.appendChild(pino);
+    });
+    g.appendChild(regua);
+    g.appendChild(el("div", "sub-regua",
+      "0s" + " · " + (cena().duracao || 4) + "s no fim"));
+
+    if (chaveSel >= chaves.length) chaveSel = chaves.length - 1;
+    var k = chaves[chaveSel] || chaves[0];
+
+    var nav = el("div", "opcoes");
+    chaves.forEach(function (kk, i) {
+      var b = el("button", i === chaveSel ? "ativo" : "", String(i + 1));
+      b.onclick = function () { chaveSel = i; desenharInspetor(); };
+      nav.appendChild(b);
+    });
+    var bMais = el("button", "", svgIcone("mais"));
+    bMais.title = "Nova chave no fim";
+    bMais.onclick = function () {
+      mudar(function () {
+        var ultima = chaves[chaves.length - 1] || {};
+        var nova = JSON.parse(JSON.stringify(ultima));
+        nova.t = Math.min(1, (ultima.t || 0) + 0.25);
+        chaves.push(nova);
+        chaves.sort(function (a, b2) { return (a.t || 0) - (b2.t || 0); });
+      });
+      chaveSel = chaves.length - 1;
+      desenharInspetor();
+    };
+    nav.appendChild(bMais);
+    g.appendChild(nav);
+
+    function campoChave(rotulo, campo, padrao, passo) {
+      var i = inp(k[campo] != null ? k[campo] : padrao, function (v) {
+        mudar(function () {
+          if (v == null || v === "") delete k[campo];
+          else k[campo] = v;
+        });
+      }, "number");
+      if (passo) i.step = passo;
+      g.appendChild(linha(rotulo, i));
     }
+
+    var tSeg = inp(+((k.t || 0) * (cena().duracao || 4)).toFixed(2), function (v) {
+      mudar(function () {
+        k.t = Math.max(0, Math.min(1, (v || 0) / (cena().duracao || 4)));
+        chaves.sort(function (a, b2) { return (a.t || 0) - (b2.t || 0); });
+      });
+    }, "number");
+    tSeg.step = "0.1";
+    g.appendChild(linha("Momento (s)", tSeg));
+
+    campoChave("Deslocar X", "x", 0);
+    campoChave("Deslocar Y", "y", 0);
+    campoChave("Escala", "escala", 1, "0.05");
+    campoChave("Girar (graus)", "giro", 0);
+    campoChave("Opacidade", "opacidade", 1, "0.1");
+    campoChave("Desfoque (px)", "desfoque", 0);
+
+    var acoes = el("div", "opcoes");
+    var bRep = el("button", e.repetir ? "ativo" : "", svgIcone("refazer"));
+    bRep.title = "Repetir sem parar";
+    bRep.onclick = function () { edita("repetir", e.repetir ? "" : true); };
+    var bLin = el("button", e.suavizar === false ? "ativo" : "", svgIcone("linha"));
+    bLin.title = "Movimento constante (sem suavizar)";
+    bLin.onclick = function () { edita("suavizar", e.suavizar === false ? "" : false); };
+    var bDel = el("button", "", svgIcone("lixeira"));
+    bDel.title = "Apagar esta chave";
+    bDel.onclick = function () {
+      mudar(function () { chaves.splice(chaveSel, 1); if (!chaves.length) delete e.chaves; });
+      chaveSel = 0; desenharInspetor();
+    };
+    acoes.appendChild(bRep); acoes.appendChild(bLin); acoes.appendChild(bDel);
+    g.appendChild(acoes);
+
+    ins.appendChild(g);
   }
 
   function camposDoTipo(ins, e) {
@@ -1130,27 +1610,45 @@
 
     /* --- 3. escolha da voz, já ranqueada -------------------------------- */
 
+    // As vozes vêm do servidor, que é quem sintetiza. Cada uma traz a
+    // frequência MEDIDA — quem quer voz de locução escolhe pelo número, não
+    // pelo palpite.
     var voz = doc.voz || {};
-    var boas = Narracao.vozes();
     var sel2 = el("select", "campo");
-    var opAuto = el("option", "", "melhor disponível");
-    opAuto.value = "";
-    sel2.appendChild(opAuto);
-    boas.forEach(function (v) {
-      var o = el("option", "", Narracao.limpo(v.name) + " · " + v.lang);
-      o.value = v.name;
-      if (v.name === voz.voz) o.selected = true;
-      sel2.appendChild(o);
-    });
+    function encherVozes(lista) {
+      sel2.innerHTML = "";
+      var opAuto = el("option", "", "Padrão (a mais grave)");
+      opAuto.value = "";
+      sel2.appendChild(opAuto);
+      lista.forEach(function (v) {
+        var o = el("option", "", v.nome + " · " + v.tom
+          + (v.hz ? " · " + v.hz + " Hz" : "")
+          + (v.instalada ? "" : " · baixa ao usar"));
+        o.value = v.id;
+        if (v.id === voz.voz) o.selected = true;
+        sel2.appendChild(o);
+      });
+    }
+    encherVozes(VozNeural.vozes());
+    VozNeural.status().then(function () { encherVozes(VozNeural.vozes()); });
     sel2.onchange = function () {
       mudar(function () { doc.voz = doc.voz || {}; doc.voz.voz = sel2.value; });
       Narracao.falar("Assim que esta voz vai narrar o seu vídeo.",
-                     { voz: sel2.value, velocidade: voz.velocidade });
+                     { voz: sel2.value, grave: voz.grave, velocidade: voz.velocidade });
     };
     gn.appendChild(linha("Voz", sel2));
 
-    gn.appendChild(linha("Velocid.", inp(voz.velocidade != null ? voz.velocidade : 0.96,
-      function (v) { mudar(function () { doc.voz = doc.voz || {}; doc.voz.velocidade = v || 0.96; }); },
+    var bGrave = el("button", "btn" + (voz.grave ? " primo" : ""),
+                    (voz.grave ? "✓ " : "") + "Registro grave, de cinema");
+    bGrave.style.cssText = "width:100%;margin:2px 0 8px";
+    bGrave.title = "Abaixa o tom uns 10% sem mudar a duração";
+    bGrave.onclick = function () {
+      mudar(function () { doc.voz = doc.voz || {}; doc.voz.grave = !voz.grave; });
+    };
+    gn.appendChild(bGrave);
+
+    gn.appendChild(linha("Velocidade", inp(voz.velocidade != null ? voz.velocidade : 1,
+      function (v) { mudar(function () { doc.voz = doc.voz || {}; doc.voz.velocidade = v || 1; }); },
       "number")));
 
     if (F.tempo) {
@@ -1160,24 +1658,41 @@
       gn.appendChild(bTodas);
     }
 
-    /* --- 4. diagnóstico honesto ----------------------------------------- */
-
-    var d = Narracao.diagnostico();
-    if (!Narracao.disponivel()) {
-      gn.appendChild(el("div", "nada", "Este navegador não tem síntese de voz."));
-    } else if (!d.premium) {
-      var dica = el("div", "dica-voz");
-      dica.innerHTML =
-        "<b>As vozes do sistema estão no modo compacto.</b>" +
-        "<p>Só há " + d.boasEmPortugues + " voz útil em português aqui. As vozes " +
-        "aprimoradas soam muito melhor e são download gratuito da Apple:</p>" +
-        "<p class='caminho'>Ajustes do Sistema → Acessibilidade → Conteúdo Falado → " +
-        "Voz do sistema → Gerenciar vozes → Português (Brasil) → baixe as marcadas " +
-        "como <b>Premium</b> ou <b>Aprimorada</b></p>" +
-        "<p>Depois recarregue esta página. Para qualidade de locução de verdade, " +
-        "grave a sua voz no botão acima.</p>";
-      gn.appendChild(dica);
-    }
+    /* --- 4. o estado real do motor -------------------------------------- */
+
+    // Isto aqui mandava o usuário em "Ajustes do Sistema → Acessibilidade →
+    // ... baixe as vozes da Apple". Era verdade quando a narração dependia
+    // do TTS do sistema. Hoje a síntese é neural e roda no servidor, então o
+    // texto virou instrução para o lugar errado — e num Windows, para um
+    // lugar que nem existe. O que fica é o estado de verdade do motor.
+    var aviso = el("div", "dica-voz");
+    aviso.style.display = "none";
+    gn.appendChild(aviso);
+    VozNeural.status(true).then(function (s) {
+      var p = s.piper || {};
+      if (p.pronta) return;
+      aviso.style.display = "";
+      if (p.baixando && p.baixando.ativo) {
+        aviso.innerHTML = "<b>Preparando a voz neural…</b><p>" + p.baixando.etapa
+          + " · " + p.baixando.pct + "%. Enquanto isso a narração sai por uma voz "
+          + "mais simples; o vídeo não fica mudo.</p>";
+        setTimeout(function () { if (document.body.contains(aviso)) desenharInspetor(); }, 3000);
+      } else if (!p.suportado) {
+        aviso.innerHTML = "<b>Sem voz neural para este sistema.</b>"
+          + "<p>A narração sai pela voz de reserva. Gravar a sua própria voz, no botão "
+          + "acima, continua sendo o melhor resultado.</p>";
+      } else {
+        aviso.innerHTML = "<b>A voz neural ainda não foi baixada.</b>"
+          + "<p>São ~90 MB, uma vez só, e depois funciona sem internet.</p>";
+        var bJa = el("button", "btn primo", "Baixar agora");
+        bJa.style.cssText = "width:100%;margin-top:8px";
+        bJa.onclick = function () {
+          bJa.textContent = "baixando…";
+          VozNeural.instalar(voz.voz).then(function () { desenharInspetor(); });
+        };
+        aviso.appendChild(bJa);
+      }
+    });
 
     ins.appendChild(gn);
   }

package/studio/web/js/ferramentas.js

@@ -2,7 +2,10 @@
    ferramentas.js — o que cada ferramenta oferece na interface.
    ========================================================================== */
 
-var TEMAS = ["meia-noite", "claro", "papel", "neon", "brasa", "floresta"];
+// Os dez que o render.css define. A lista tinha seis: quatro temas existiam
+// no CSS, a IA podia usá-los, e o editor não os oferecia a ninguém.
+var TEMAS = ["meia-noite", "claro", "papel", "neon", "brasa", "floresta",
+  "retro", "oceano", "doce", "mono"];
 
 var PALETA = ["#ff5a36", "#ffb03a", "#f4e04d", "#2fbf7f", "#1f8fe0", "#8b5cf6",
               "#f472b6", "#ffffff", "#9aa4b2", "#111318"];

package/studio/web/js/render.js

@@ -70,13 +70,23 @@ function aplicarFundo(no, fundo) {
 /* --------------------------------------------------------------- gráficos */
 
 function svgGrafico(e, l, a) {
-  var dados = (e.dados || []).map(function (d) {
+  /* Os dados podem chegar como "dados" ou como "itens", e o tipo como
+     "grafico", "estilo" ou "tipo".
+
+     O nome certo é `dados` + `grafico`, e é o que a spec ensina. Mas quem
+     escreve um gráfico — a IA ou uma pessoa — chuta `itens`, porque é o
+     campo de TODOS os outros elementos da mesma spec (lista, cartoes,
+     numeros usam `itens`). Com o nome trocado esta função devolvia string
+     vazia: o gráfico simplesmente não existia na tela, sem erro nenhum.
+     Aceitar as duas grafias custa uma linha e evita a falha muda. */
+  var bruto = e.dados || e.itens || [];
+  var dados = bruto.map(function (d) {
     return Array.isArray(d) ? { r: d[0], v: +d[1] || 0 } : { r: d.rotulo, v: +d.valor || 0 };
   });
   if (!dados.length) return "";
   var cores = e.cores || ["var(--c-tom)", "var(--c-tom2)", "#7c9cff", "#2fbf7f", "#f472b6", "#facc15"];
   var max = Math.max.apply(null, dados.map(function (d) { return d.v; })) || 1;
-  var tipo = e.grafico || "barras";
+  var tipo = e.grafico || e.estilo || e.tipoGrafico || "barras";
   var pad = { e: 8, d: 8, t: 14, b: 42 };
   var iw = l - pad.e - pad.d, ih = a - pad.t - pad.b;
   var p = ['<svg viewBox="0 0 ' + l + " " + a + '" width="' + l + '" height="' + a + '">'];
@@ -140,9 +150,79 @@ function svgGrafico(e, l, a) {
 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 };
 
+/* ── chaves de animação ──────────────────────────────────────────────────
+   Transforma a lista de instantes de um elemento numa regra @keyframes de
+   verdade e prende ela no elemento.
+
+   Os nomes precisam ser únicos por página: o mesmo documento aparece várias
+   vezes ao mesmo tempo (palco, miniaturas do painel, clipes da tira), e
+   dois @keyframes de mesmo nome com conteúdo diferente se atropelariam —
+   a última regra injetada venceria em TODAS as cópias. */
+var _nChave = 0;
+
+function _numero(v, padrao) {
+  return typeof v === "number" && isFinite(v) ? v : padrao;
+}
+
+function aplicarChaves(no, e, ctx) {
+  var chaves = e.chaves.slice().sort(function (a, b) {
+    return _numero(a.t, 0) - _numero(b.t, 0);
+  });
+
+  var nome = "ch" + (++_nChave);
+  var passos = chaves.map(function (k) {
+    var pct = Math.max(0, Math.min(1, _numero(k.t, 0))) * 100;
+    var mov = [];
+    // x e y de uma chave são DESLOCAMENTO a partir de onde o elemento está.
+    // Assim a chave continua valendo se a pessoa arrastar o elemento no
+    // palco depois — o contrário obrigaria a refazer todas as chaves.
+    var dx = _numero(k.x, 0), dy = _numero(k.y, 0);
+    if (dx || dy) mov.push("translate(" + dx + "px," + dy + "px)");
+    var esc = _numero(k.escala, 1);
+    if (esc !== 1) mov.push("scale(" + esc + ")");
+    var giro = _numero(k.giro, 0);
+    if (giro) mov.push("rotate(" + giro + "deg)");
+
+    var linhas = ["transform:" + (mov.length ? mov.join(" ") : "none")];
+    var op = _numero(k.opacidade, 1);
+    linhas.push("opacity:" + op);
+    if (typeof k.desfoque === "number" && k.desfoque > 0) {
+      linhas.push("filter:blur(" + k.desfoque + "px)");
+    }
+    return pct.toFixed(3) + "%{" + linhas.join(";") + "}";
+  }).join("");
+
+  // A regra vai na RAIZ da cena, não dentro do elemento.
+  //
+  // Presa no próprio elemento ela era apagada segundos depois: quem desenha
+  // o conteúdo (texto, lista, número) escreve o innerHTML e leva junto tudo
+  // que estivesse ali. O elemento continuava com `animation-name: ch1`
+  // apontando para uma regra que não existia mais — a animação simplesmente
+  // não acontecia, sem erro nenhum no console. A cena só recebe filhos, e
+  // por isso a regra sobrevive lá.
+  var folha = document.createElement("style");
+  folha.textContent = "@keyframes " + nome + "{" + passos + "}";
+  (ctx.raiz || no).appendChild(folha);
+
+  var dur = _numero(ctx.duracao, 4);
+  no.style.animationName = nome;
+  no.style.animationDuration = dur + "s";
+  no.style.animationTimingFunction = e.suavizar === false ? "linear" : "cubic-bezier(.4,0,.2,1)";
+  no.style.animationFillMode = "both";
+  no.style.animationIterationCount = e.repetir ? "infinite" : "1";
+}
+
 function renderElemento(e, ctx) {
   var no = document.createElement("div");
   var tipo = e.tipo || "texto";
+  /* Qual elemento do documento é este nó.
+
+     O editor precisava saber, e antes deduzia pela ordem dos nós na tela.
+     A dedução estava errada: os layouts de fluxo separam cabeçalho de corpo
+     e desenham o cabeçalho primeiro, então a ordem na tela NÃO é a ordem do
+     documento. O efeito era clicar num texto e o editor selecionar outro —
+     e mexer no elemento errado. O índice vem carimbado daqui. */
+  if (ctx && ctx.ordem && ctx.ordem.has(e)) no.dataset.i = ctx.ordem.get(e);
   /* Tipo inventado ("titulo", "subtitulo"...) caía num default sem estilo:
      texto de 16px num canvas de 1920 — invisível — ou div vazio quando o
      conteúdo estava noutro campo. O servidor novo recusa; documentos velhos
@@ -178,11 +258,27 @@ function renderElemento(e, ctx) {
 
   /* animação */
   var an = e.anim || ctx.animPadrao;
-  if (an && an !== "nenhuma") {
+  if (an && an !== "nenhuma" && !(e.chaves && e.chaves.length > 1)) {
     no.setAttribute("data-an", typeof an === "string" ? an : (an.entrada || "subir"));
     no.style.setProperty("--atraso", (typeof an === "object" && an.atraso != null ? an.atraso : ctx.i * 0.09 + 0.1));
   }
 
+  /* ── chaves de animação ────────────────────────────────────────────────
+     Antes um elemento só sabia ENTRAR: escolhia-se um efeito de entrada e
+     acabava ali. Não dava para fazer nada percorrer a cena, crescer devagar
+     ou sumir no fim — que é o que separa animação de slide com efeito.
+
+     Uma chave é um instante: `{t: 0.5, x: 200, escala: 1.2}` diz onde o
+     elemento está na metade da cena. Duas ou mais viram uma animação CSS de
+     verdade, gerada aqui, com a duração da cena. O navegador interpola;
+     nós só descrevemos os pontos.
+
+     Quem tem chaves não recebe animação de entrada: as duas brigariam pelo
+     mesmo transform, e a chave é a mais específica das duas. */
+  if (ctx.animar && e.chaves && e.chaves.length > 1) {
+    aplicarChaves(no, e, ctx);
+  }
+
   switch (tipo) {
     case "texto": {
       var papel = PAPEIS[e.papel] || PAPEIS.corpo;
@@ -560,7 +656,21 @@ function renderCena(cena, doc, op) {
   // tela vertical pede tipografia maior: os padrões são calibrados em 1920x1080
   var escalaTipo = H > W ? 1.35 : 1;
   no.style.setProperty("--esc", escalaTipo);
-  var ctx = { i: 0, escalaTipo: escalaTipo, animPadrao: op.animar ? (cena.anim || "subir") : null };
+  var ctx = {
+    i: 0, escalaTipo: escalaTipo,
+    animPadrao: op.animar ? (cena.anim || "subir") : null,
+    // as chaves precisam saber quanto dura a cena para virar segundos
+    animar: !!op.animar,
+    duracao: cena.duracao || 4,
+    raiz: no,
+    // objeto do elemento -> posição dele em cena.elementos, tirada ANTES de
+    // qualquer separação por layout
+    ordem: (function () {
+      var m = new Map();
+      (cena.elementos || []).forEach(function (e, i) { m.set(e, i); });
+      return m;
+    })(),
+  };
 
   if (layout === "livre") {
     fluxo.style.padding = "0";