primocode 8.12.0 → 8.14.0

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);
   }