primocode 8.42.2 → 9.0.0

package/studio/web/js/editor.js

@@ -1,1802 +0,0 @@
-/* ==========================================================================
-   editor.js — o estúdio manual. Uma pessoa mexe aqui no que a IA criou.
-   ========================================================================== */
-
-(function () {
-  "use strict";
-
-  var $ = function (s) { return document.querySelector(s); };
-  var partes = location.pathname.split("/");
-  var SLUG = partes[2], ID = partes[3];
-  var F = FERR[SLUG] || FERR.prisma;
-
-  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 = {
-    // A câmera da cena: o quadro que se move. Os valores são os mesmos que o
-    // render.js conhece (CAMERAS); aqui vão só os nomes que se leem.
-    camera: [["", "Parada"], ["aproximar", "Aproximar"], ["afastar", "Afastar"],
-      ["pan-direita", "Atravessar para a direita"], ["pan-esquerda", "Atravessar para a esquerda"],
-      ["subir", "Subir"], ["descer", "Descer"], ["empurrar", "Empurrão (zoom com giro)"],
-      ["balanco", "Balanço"]],
-    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"], ["brilho", "Brilho"], ["grade", "Grade"],
-      ["pontos", "Pontos"], ["suave", "Suave"], ["vinheta", "Vinheta"], ["aurora", "Aurora"],
-      ["nevoa", "Névoa"], ["ondas", "Ondas"], ["raios", "Raios"], ["xadrez", "Xadrez"]],
-    acabamento: [["", "Nenhum"], ["grao", "Granulado"], ["vinheta", "Vinheta"],
-      ["scanlines", "Linhas de TV"], ["luz", "Vazamento de luz"], ["brilho", "Brilho"],
-      ["moldura", "Moldura"]],
-    animacao: [["", "Nenhuma"], ["subir", "Subir"], ["surgir", "Surgir"],
-      ["esquerda", "Da esquerda"], ["direita", "Da direita"], ["zoom", "Aproximar"],
-      ["desfoque", "Sair do desfoque"], ["cair", "Cair"], ["girar", "Girar"],
-      ["saltar", "Saltar"], ["revelar", "Revelar"], ["cortina", "Cortina"],
-      ["elastico", "Elástico"], ["palavra", "Palavra por palavra"],
-      ["nenhuma", "Travada (sem entrada)"]],
-  };
-
-  /* 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", 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 */
-
-  function el(tag, cls, html) {
-    var n = document.createElement(tag);
-    if (cls) n.className = cls;
-    if (html != null) n.innerHTML = html;
-    return n;
-  }
-
-  function cena() { return (doc.cenas || [])[iCena] || { elementos: [] }; }
-  function itens() {
-    if (F.modelo === "cena") return cena().elementos || (cena().elementos = []);
-    if (F.modelo === "documento") return doc.blocos || (doc.blocos = []);
-    return [];
-  }
-  function aba() { return (doc.abas || [])[iAba] || { colunas: [], linhas: [] }; }
-
-  function instantaneo() {
-    historico.push(JSON.stringify(doc));
-    if (historico.length > 60) historico.shift();
-    futuro.length = 0;
-  }
-
-  function mudar(fn) {
-    instantaneo();
-    fn();
-    desenhar();
-    agendarSalvar();
-  }
-
-  function desfazer() {
-    if (!historico.length) return;
-    futuro.push(JSON.stringify(doc));
-    doc = JSON.parse(historico.pop());
-    ARQ.doc = doc;
-    sel = null;
-    desenhar();
-    agendarSalvar();
-  }
-
-  function refazer() {
-    if (!futuro.length) return;
-    historico.push(JSON.stringify(doc));
-    doc = JSON.parse(futuro.pop());
-    ARQ.doc = doc;
-    sel = null;
-    desenhar();
-    agendarSalvar();
-  }
-
-  /* ---------------------------------------------------------------- salvar */
-
-  function marcar(t, ok) {
-    var e = $("#estado");
-    e.textContent = t;
-    e.classList.toggle("ok", !!ok);
-  }
-
-  function salvar(saindo) {
-    if (!sujo) return;
-    sujo = false;
-    marcar("salvando…");
-    fetch("/api/arquivos/" + ID, {
-      method: "PUT",
-      keepalive: !!saindo,
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ titulo: $("#titulo").value, doc: doc }),
-    }).then(function () { if (!sujo) marcar("salvo", true); });
-  }
-
-  function agendarSalvar() {
-    sujo = true;
-    marcar("editando…");
-    clearTimeout(tSalvar);
-    tSalvar = setTimeout(function () { salvar(); }, 600);
-  }
-
-  /* ----------------------------------------------------------------- carga */
-
-  fetch("/api/arquivos/" + ID)
-    .then(function (r) { return r.json(); })
-    .then(function (a) {
-      if (a.erro) { document.body.innerHTML = "<p style='padding:40px'>Arquivo não encontrado.</p>"; return; }
-      ARQ = a;
-      doc = a.doc || {};
-      $("#titulo").value = a.titulo || "";
-      document.title = (a.titulo || "Editor") + " · " + F.nome;
-      $("#marca-ferr").textContent = F.nome;
-      $("#marca-ferr").style.color = F.cor;
-      montarTrilho();
-      montarTopo();
-      desenhar();
-      marcar("salvo", true);
-    });
-
-  /* ---------------------------------------------------------------- trilho */
-
-  function montarTrilho() {
-    var t = $("#trilho");
-    t.innerHTML = "";
-    (F.trilho || []).forEach(function (b) {
-      var btn = el("button", "", svgIcone(b.i));
-      btn.title = b.r;
-      btn.onclick = function () { inserir(b); };
-      t.appendChild(btn);
-    });
-    if (F.modelo !== "planilha") {
-      t.appendChild(el("div", "esp"));
-      var bm = el("button", "", svgIcone("pasta"));
-      bm.title = "Imagem do computador";
-      bm.onclick = inserirImagem;
-      t.appendChild(bm);
-      if (F.tempo) {
-        var bs = el("button", "", svgIcone("play2"));
-        bs.title = "Trilha sonora";
-        bs.onclick = function () { $("#folha-trilha").classList.add("on"); desenharTrilha(); };
-        t.appendChild(bs);
-      }
-    }
-
-    t.appendChild(el("div", "esp"));
-    var und = el("button", "", svgIcone("voltar")); und.title = "Desfazer (⌘Z)"; und.onclick = desfazer;
-    var red = el("button", "", svgIcone("refazer")); red.title = "Refazer"; red.onclick = refazer;
-    t.appendChild(und); t.appendChild(red);
-  }
-
-  /* insere uma imagem do computador na cena ou no bloco atual */
-  function inserirImagem() {
-    Midia.escolher({ tipo: "imagem" }).then(function (m) {
-      if (!m) return;
-      mudar(function () {
-        if (F.modelo === "documento") {
-          itens().push({ tipo: "imagem", src: m.url, legenda: "" });
-        } else if (cena().layout === "livre") {
-          itens().push({ tipo: "imagem", src: m.url, x: 120, y: 120, l: 720, a: 480 });
-        } else {
-          itens().push({ tipo: "imagem", src: m.url, ajuste: "cobrir" });
-        }
-        sel = itens().length - 1;
-      });
-    });
-  }
-
-  function inserir(b) {
-    if (SLUG === "grade") return inserirGrade(b.k);
-    mudar(function () {
-      var novo = JSON.parse(JSON.stringify(b.novo));
-      itens().push(novo);
-      sel = itens().length - 1;
-    });
-  }
-
-  function inserirGrade(k) {
-    mudar(function () {
-      var a = aba();
-      if (k === "linha") a.linhas.push(a.colunas.map(function () { return ""; }));
-      if (k === "coluna") {
-        a.colunas.push("Coluna " + (a.colunas.length + 1));
-        a.linhas.forEach(function (l) { l.push(""); });
-      }
-      if (k === "total") {
-        var n = a.linhas.length;
-        a.linhas.push(a.colunas.map(function (_, i) {
-          return i === 0 ? "Total" : "=SOMA(" + String.fromCharCode(65 + i) + "1:" +
-                 String.fromCharCode(65 + i) + n + ")";
-        }));
-      }
-      if (k === "grafico") {
-        a.grafico = a.grafico ? null : { tipo: "barras", rotulo: a.colunas[0], valor: a.colunas[1] };
-      }
-    });
-  }
-
-  /* ------------------------------------------------------------------ topo */
-
-  function montarTopo() {
-    var cx = $("#topo-extra");
-    cx.innerHTML = "";
-
-    if (F.modelo !== "planilha") {
-      var tema = el("select", "campo");
-      tema.style.width = "128px";
-      TEMAS.forEach(function (t) {
-        var o = el("option", "", t); o.value = t;
-        if ((doc.tema || "meia-noite") === t) o.selected = true;
-        tema.appendChild(o);
-      });
-      tema.onchange = function () { mudar(function () { doc.tema = tema.value; }); };
-      cx.appendChild(tema);
-    }
-
-    if (F.modelo === "cena" && (F.layouts || []).length > 1) {
-      var lay = el("select", "campo");
-      lay.id = "sel-layout";
-      lay.style.width = "148px";
-      F.layouts.forEach(function (l) {
-        var o = el("option", "", l); o.value = l;
-        lay.appendChild(o);
-      });
-      lay.onchange = function () { mudar(function () { cena().layout = lay.value; }); };
-      cx.appendChild(lay);
-    }
-  }
-
-  /* --------------------------------------------------------------- desenho */
-
-  function desenhar() {
-    desenharPainel();
-    desenharPalco();
-    desenharInspetor();
-    if (F.tempo) desenharTempo();
-    var lay = $("#sel-layout");
-    if (lay) lay.value = cena().layout || F.layoutPadrao;
-  }
-
-  /* painel esquerdo ------------------------------------------------------- */
-
-  function desenharPainel() {
-    var lista = $("#painel-lista");
-    lista.innerHTML = "";
-
-    if (F.modelo === "cena") {
-      // 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) + ")";
-        });
-      }
-
-      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:14px 4px 6px";
-        tit.textContent = "Camadas";
-        lista.appendChild(tit);
-      }
-      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";
-      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;
-    }
-
-    $("#painel-rotulo").textContent = "Abas";
-    (doc.abas || []).forEach(function (a, i) {
-      var c = el("div", "camada" + (i === iAba ? " ativa" : ""),
-                 svgIcone("tabela") + "<span>" + (a.nome || "Planilha") + "</span>");
-      c.onclick = function () { iAba = i; sel = null; desenhar(); };
-      lista.appendChild(c);
-    });
-  }
-
-  /* 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",
-             imagem: "imagem", icone: "icone", grafico: "grafico", no: "no",
-             conector: "conector", titulo: "titulo", secao: "texto", subsecao: "texto",
-             paragrafo: "texto", numerada: "numero", destaque: "cartao",
-             divisor: "linha" }[e.tipo] || "quadrado";
-  }
-
-  function rotuloDe(e) {
-    var t = e.texto || (e.itens && e.itens[0]) || (e.linhas && e.linhas[0] && e.linhas[0][0]) ||
-            e.nome || e.src || e.tipo;
-    t = String(t).replace(/\s+/g, " ").trim();
-    return (t.length > 22 ? t.slice(0, 22) + "…" : t) || e.tipo;
-  }
-
-  /* palco ---------------------------------------------------------------- */
-
-  function desenharPalco() {
-    var wrap = $("#palco-wrap");
-    wrap.innerHTML = "";
-
-    if (F.modelo === "planilha") return desenharPlanilha(wrap);
-    if (F.modelo === "documento") return desenharDocumento(wrap);
-
-    var W = doc.largura || 1920, H = doc.altura || 1080;
-    var disp = wrap.getBoundingClientRect();
-    escala = Math.min((disp.width - 52) / W, (disp.height - 52) / H, 1);
-
-    var quadro = el("div", "palco");
-    quadro.id = "quadro";
-    quadro.style.cssText = "width:" + W * escala + "px;height:" + H * escala + "px;position:relative";
-
-    var cn = renderCena(cena(), doc, {});
-    cn.style.transform = "scale(" + escala + ")";
-    cn.style.transformOrigin = "top left";
-    cn.style.position = "absolute";
-    quadro.appendChild(cn);
-    wrap.appendChild(quadro);
-
-    /* seleção e interação */
-    // Í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 = 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) {
-      if (!no) return;
-      no.style.cursor = "move";
-      no.addEventListener("mousedown", function (ev) {
-        ev.stopPropagation();
-        sel = i;
-        desenharPainel(); desenharInspetor(); marcarSelecao(quadro, no);
-        if (lista[i].x != null || lista[i].y != null) arrastar(ev, i, quadro);
-      });
-      no.addEventListener("dblclick", function (ev) {
-        ev.stopPropagation();
-        editarNoLugar(no, i);
-      });
-    });
-
-    quadro.addEventListener("mousedown", function () { sel = null; desenhar(); });
-    if (sel != null && mapa[sel]) marcarSelecao(quadro, mapa[sel]);
-
-    barraPalco(W, H);
-  }
-
-  function marcarSelecao(quadro, no) {
-    var antigos = quadro.querySelectorAll(".selecao,.alca");
-    Array.prototype.forEach.call(antigos, function (n) { n.remove(); });
-
-    var r = no.getBoundingClientRect(), q = quadro.getBoundingClientRect();
-    var x = r.left - q.left, y = r.top - q.top;
-
-    var caixa = el("div", "selecao");
-    caixa.style.cssText = "left:" + x + "px;top:" + y + "px;width:" + r.width + "px;height:" + r.height + "px";
-    quadro.appendChild(caixa);
-
-    var e2 = (cena().elementos || [])[sel];
-    if (!e2 || (e2.x == null && e2.y == null)) return;
-
-    [["nw", 0, 0], ["ne", 1, 0], ["sw", 0, 1], ["se", 1, 1]].forEach(function (h) {
-      var a = el("div", "alca " + h[0]);
-      a.style.left = (x + h[1] * r.width - 5) + "px";
-      a.style.top = (y + h[2] * r.height - 5) + "px";
-      a.addEventListener("mousedown", function (ev) {
-        ev.stopPropagation(); ev.preventDefault();
-        redimensionar(ev, sel, h[0], quadro);
-      });
-      quadro.appendChild(a);
-    });
-  }
-
-  function arrastar(ev, i, quadro) {
-    ev.preventDefault();
-    var e2 = (cena().elementos || [])[i];
-    var x0 = ev.clientX, y0 = ev.clientY;
-    var ix = e2.x || 0, iy = e2.y || 0;
-    var no = quadro.querySelectorAll(".el")[i];
-    instantaneo();
-
-    function mover(m) {
-      e2.x = Math.round(ix + (m.clientX - x0) / escala);
-      e2.y = Math.round(iy + (m.clientY - y0) / escala);
-      if (no) { no.style.left = e2.x + "px"; no.style.top = e2.y + "px"; }
-      marcarSelecao(quadro, no);
-    }
-    function soltar() {
-      document.removeEventListener("mousemove", mover);
-      document.removeEventListener("mouseup", soltar);
-      desenhar(); agendarSalvar();
-    }
-    document.addEventListener("mousemove", mover);
-    document.addEventListener("mouseup", soltar);
-  }
-
-  function redimensionar(ev, i, canto, quadro) {
-    var e2 = (cena().elementos || [])[i];
-    var x0 = ev.clientX, y0 = ev.clientY;
-    var ix = e2.x || 0, iy = e2.y || 0, il = e2.l || 200, ia = e2.a || 100;
-    instantaneo();
-
-    function mover(m) {
-      var dx = (m.clientX - x0) / escala, dy = (m.clientY - y0) / escala;
-      if (canto.indexOf("e") >= 0) e2.l = Math.max(24, Math.round(il + dx));
-      if (canto.indexOf("w") >= 0) { e2.l = Math.max(24, Math.round(il - dx)); e2.x = Math.round(ix + dx); }
-      if (canto.charAt(0) === "s") e2.a = Math.max(24, Math.round(ia + dy));
-      if (canto.charAt(0) === "n") { e2.a = Math.max(24, Math.round(ia - dy)); e2.y = Math.round(iy + dy); }
-      desenharPalco();
-    }
-    function soltar() {
-      document.removeEventListener("mousemove", mover);
-      document.removeEventListener("mouseup", soltar);
-      desenhar(); agendarSalvar();
-    }
-    document.addEventListener("mousemove", mover);
-    document.addEventListener("mouseup", soltar);
-  }
-
-  function editarNoLugar(no, i) {
-    var e2 = itens()[i];
-    if (!e2 || (e2.tipo !== "texto" && e2.tipo !== "no" && e2.tipo !== "paragrafo" &&
-                e2.tipo !== "titulo" && e2.tipo !== "secao" && e2.tipo !== "subsecao")) return;
-    no.contentEditable = "true";
-    no.style.outline = "2px solid var(--primo)";
-    no.focus();
-    document.execCommand && document.execCommand("selectAll", false, null);
-    no.addEventListener("blur", function () {
-      no.contentEditable = "false";
-      no.style.outline = "";
-      mudar(function () { e2.texto = no.innerText.trim(); });
-    }, { once: true });
-    no.addEventListener("keydown", function (ev) {
-      if (ev.key === "Escape" || (ev.key === "Enter" && !ev.shiftKey)) { ev.preventDefault(); no.blur(); }
-      ev.stopPropagation();
-    });
-  }
-
-  function barraPalco(W, H) {
-    var b = $("#palco-barra");
-    b.innerHTML = "";
-    b.appendChild(el("span", "", F.modelo === "cena"
-      ? W + " × " + H + " · " + Math.round(escala * 100) + "%"
-      : ""));
-    var esp = el("div"); esp.style.flex = "1"; b.appendChild(esp);
-
-    if (F.modelo === "cena") {
-      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 () {
-        mudar(function () {
-          doc.cenas.splice(iCena + 1, 0, JSON.parse(JSON.stringify(cena())));
-          iCena++;
-        });
-      };
-      var rem = el("button", "btn perigo", svgIcone("lixeira"));
-      rem.title = "Remover cena";
-      rem.onclick = function () {
-        if ((doc.cenas || []).length < 2) return;
-        mudar(function () { doc.cenas.splice(iCena, 1); iCena = Math.max(0, iCena - 1); sel = null; });
-      };
-      var png = el("button", "btn", svgIcone("imagem") + " PNG");
-      png.title = "Exportar esta cena como imagem";
-      png.onclick = function () {
-        var alvo = document.querySelector("#quadro .cena");
-        if (!alvo) return;
-        png.textContent = "gerando…";
-        Exportar.imagem(alvo, {
-          largura: doc.largura || 1920, altura: doc.altura || 1080,
-          escala: 2, nome: ($("#titulo").value || "arte") + "-" + (iCena + 1),
-        }).then(function () {
-          png.innerHTML = svgIcone("imagem") + " PNG";
-        }).catch(function (e) {
-          png.innerHTML = svgIcone("imagem") + " PNG";
-          alert("não consegui gerar o PNG: " + e.message);
-        });
-      };
-
-      b.appendChild(addC); b.appendChild(dup); b.appendChild(rem); b.appendChild(png);
-    }
-  }
-
-  /* documento ------------------------------------------------------------ */
-
-  function desenharDocumento(wrap) {
-    var quadro = el("div", "palco");
-    quadro.id = "quadro";
-    var folha = renderProsa(doc);
-    var disp = wrap.getBoundingClientRect();
-    escala = Math.min((disp.width - 52) / 794, 1);
-    folha.style.transform = "scale(" + escala + ")";
-    folha.style.transformOrigin = "top left";
-    quadro.style.cssText = "width:" + 794 * escala + "px;position:relative";
-    quadro.appendChild(folha);
-    wrap.appendChild(quadro);
-    wrap.style.alignContent = "start";
-
-    var filhos = Array.prototype.slice.call(folha.children);
-    var deslocamento = doc.capa ? 2 : 0;
-    (doc.blocos || []).forEach(function (b, i) {
-      var no = filhos[i + deslocamento];
-      if (!no) return;
-      no.style.cursor = "pointer";
-      if (i === sel) no.style.outline = "2px solid var(--primo)";
-      no.addEventListener("click", function (ev) { ev.stopPropagation(); sel = i; desenhar(); });
-      no.addEventListener("dblclick", function (ev) { ev.stopPropagation(); editarNoLugar(no, i); });
-    });
-
-    var texto = (doc.blocos || []).map(function (x) {
-      return [x.texto, (x.itens || []).join(" "), (x.linhas || []).join(" "), x.titulo]
-        .filter(Boolean).join(" ");
-    }).join(" ");
-    var palavras = texto.trim().split(/\s+/).filter(Boolean).length;
-    var minutos = Math.max(1, Math.round(palavras / 200));
-
-    var b2 = $("#palco-barra");
-    b2.innerHTML = "";
-    b2.appendChild(el("span", "", (doc.blocos || []).length + " blocos · " +
-      palavras.toLocaleString("pt-BR") + " palavras · ~" + minutos + " min de leitura · A4"));
-  }
-
-  /* planilha ------------------------------------------------------------- */
-
-  function desenharPlanilha(wrap) {
-    wrap.style.alignContent = "start";
-    var caixa = el("div");
-    caixa.style.cssText = "width:100%;max-width:1180px;overflow:auto;border:1px solid var(--linha);border-radius:12px";
-    var tabela = renderGrade(doc, { aba: iAba });
-    caixa.appendChild(tabela);
-    wrap.appendChild(caixa);
-
-    Array.prototype.forEach.call(tabela.querySelectorAll("td[data-l]"), function (td) {
-      td.contentEditable = "true";
-      td.addEventListener("focus", function () {
-        var l = +td.dataset.l, c = +td.dataset.c;
-        td.textContent = (aba().linhas[l] || [])[c] != null ? aba().linhas[l][c] : "";
-      });
-      td.addEventListener("blur", function () {
-        var l = +td.dataset.l, c = +td.dataset.c;
-        var v = td.textContent.trim();
-        var atual = aba().linhas[l][c];
-        if (String(atual) === v) { desenharPalco(); return; }
-        mudar(function () {
-          aba().linhas[l][c] = /^-?[\d.,]+$/.test(v) && v !== "" ? parseFloat(v.replace(",", ".")) : v;
-        });
-      });
-      td.addEventListener("keydown", function (ev) {
-        if (ev.key === "Enter") { ev.preventDefault(); td.blur(); }
-        ev.stopPropagation();
-      });
-    });
-
-    var b = $("#palco-barra");
-    b.innerHTML = "";
-    b.appendChild(el("span", "", aba().linhas.length + " linhas × " + aba().colunas.length + " colunas"));
-    var esp = el("div"); esp.style.flex = "1"; b.appendChild(esp);
-    var nova = el("button", "btn", svgIcone("mais") + " Aba");
-    nova.onclick = function () {
-      mudar(function () {
-        doc.abas.push({ nome: "Planilha " + (doc.abas.length + 1), colunas: ["Coluna A", "Coluna B"], linhas: [["", ""]] });
-        iAba = doc.abas.length - 1;
-      });
-    };
-    b.appendChild(nova);
-  }
-
-  /* linha do tempo (Corte) ------------------------------------------------ */
-
-  function desenharTempo() {
-    var t = $("#tempo");
-    t.style.display = "flex";
-    t.innerHTML = "";
-    var total = 0;
-    var W = doc.largura || 1920, H = doc.altura || 1080;
-    (doc.cenas || []).forEach(function (c, i) {
-      var dur = c.duracao || 4;
-      total += dur;
-      var larg = Math.max(70, dur * 26);
-      var clipe = el("div", "clipe" + (i === iCena ? " ativo" : ""));
-      clipe.style.width = larg + "px";
-      var caixa = el("div", "caixa");
-      var mini = renderCena(c, doc, {});
-      // cobre o clipe inteiro sem distorcer
-      mini.style.transform = "scale(" + Math.max(larg / W, 62 / H) + ")";
-      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 · arraste para reordenar";
-    t.appendChild(info);
-  }
-
-  /* trilha sonora (Corte) -------------------------------------------------- */
-
-  var previa = null;
-
-  function pararPrevia() {
-    if (previa) { previa.parar(); previa = null; }
-  }
-
-  function desenharTrilha() {
-    var caixa = $("#trilha-caixa");
-    var t = doc.trilha || {};
-    caixa.innerHTML = "";
-    caixa.appendChild(el("h3", "", "Trilha sonora"));
-
-    var nota = el("p", "", "Música gerada aqui mesmo, ou um arquivo seu. " +
-      "Não baixo faixa de YouTube nem Spotify — use áudio que você tem direito de usar.");
-    nota.style.cssText = "color:var(--fraco);font-size:12.5px;margin:0 0 18px;line-height:1.6";
-    caixa.appendChild(nota);
-
-    /* geradas */
-    caixa.appendChild(el("div", "rotulo", "Geradas pelo estúdio"));
-    var grade = el("div", "trilha-grade");
-    nomesEstilosTrilha().forEach(function (nome) {
-      var E = ESTILOS_TRILHA[nome];
-      var c = el("div", "trilha-item" + (t.tipo === "gerada" && t.estilo === nome ? " ativo" : ""));
-      c.innerHTML = "<b>" + E.rotulo + "</b><span>" + E.bpm + " BPM</span>" +
-                    '<button class="ouvir" title="Ouvir">' + svgIcone("play") + "</button>";
-      c.onclick = function (ev) {
-        if (ev.target.closest(".ouvir")) {
-          ev.stopPropagation();
-          pararPrevia();
-          previa = criarTrilha({ tipo: "gerada", estilo: nome, volume: 0.6 });
-          if (previa) { previa.tocar(); setTimeout(pararPrevia, 9000); }
-          return;
-        }
-        mudar(function () {
-          doc.trilha = { tipo: "gerada", estilo: nome, volume: t.volume != null ? t.volume : 0.7 };
-        });
-        desenharTrilha();
-      };
-      grade.appendChild(c);
-    });
-    caixa.appendChild(grade);
-
-    /* arquivo */
-    var r2 = el("div", "rotulo", "Do seu computador");
-    r2.style.marginTop = "22px";
-    caixa.appendChild(r2);
-
-    var linhaArq = el("div");
-    linhaArq.style.cssText = "display:flex;gap:9px;align-items:center;margin-top:10px;flex-wrap:wrap";
-    var bSub = el("button", "btn primo", "Escolher áudio");
-    bSub.onclick = function () {
-      Midia.escolher({ tipo: "audio" }).then(function (m) {
-        if (!m) return;
-        mudar(function () {
-          doc.trilha = { tipo: "arquivo", src: m.url, nome: m.nome,
-                         volume: t.volume != null ? t.volume : 0.7, inicio: 0 };
-        });
-        desenharTrilha();
-      });
-    };
-    linhaArq.appendChild(bSub);
-
-    var urlDireta = el("input", "campo");
-    urlDireta.placeholder = "…ou cole a URL de um arquivo de áudio";
-    urlDireta.style.cssText = "flex:1;min-width:200px";
-    urlDireta.value = t.tipo === "arquivo" && t.src && t.src.indexOf("/midia/") !== 0 ? t.src : "";
-    urlDireta.onchange = function () {
-      if (!urlDireta.value.trim()) return;
-      mudar(function () {
-        doc.trilha = { tipo: "arquivo", src: urlDireta.value.trim(), volume: 0.7, inicio: 0 };
-      });
-      desenharTrilha();
-    };
-    linhaArq.appendChild(urlDireta);
-    caixa.appendChild(linhaArq);
-
-    /* estado atual */
-    var atual = el("div");
-    atual.style.cssText = "margin-top:22px;padding-top:18px;border-top:1px solid var(--linha)";
-    if (!t.tipo) {
-      atual.innerHTML = '<span style="color:var(--fraco2);font-size:13px">Sem trilha por enquanto.</span>';
-    } else {
-      atual.innerHTML = '<div class="rotulo" style="margin-bottom:10px">Em uso</div>' +
-        '<div style="font-size:13.5px;margin-bottom:12px">' +
-        (t.tipo === "gerada" ? "Gerada · " + (ESTILOS_TRILHA[t.estilo] || {}).rotulo
-                             : "Arquivo · " + (t.nome || t.src)) + "</div>";
-
-      var vol = el("div", "linha-campo");
-      vol.appendChild(el("span", "", "Volume"));
-      var sl = el("input");
-      sl.type = "range"; sl.min = 0; sl.max = 100;
-      sl.value = Math.round((t.volume != null ? t.volume : 0.7) * 100);
-      sl.oninput = function () { doc.trilha.volume = sl.value / 100; agendarSalvar(); };
-      vol.appendChild(sl);
-      atual.appendChild(vol);
-
-      var acoes = el("div");
-      acoes.style.cssText = "display:flex;gap:9px;margin-top:14px";
-      var bAjustar = el("button", "btn", "Ajustar cenas ao áudio");
-      bAjustar.title = "Distribui a duração das cenas para preencher a faixa";
-      bAjustar.onclick = ajustarAoAudio;
-      var bTirar = el("button", "btn perigo", "Remover trilha");
-      bTirar.onclick = function () {
-        mudar(function () { delete doc.trilha; });
-        desenharTrilha();
-      };
-      acoes.appendChild(bAjustar);
-      acoes.appendChild(bTirar);
-      atual.appendChild(acoes);
-    }
-    caixa.appendChild(atual);
-
-    var rodape = el("div", "rodape");
-    var bFechar = el("button", "btn", "Fechar");
-    bFechar.onclick = function () { pararPrevia(); $("#folha-trilha").classList.remove("on"); };
-    rodape.appendChild(bFechar);
-    caixa.appendChild(rodape);
-  }
-
-  function ajustarAoAudio() {
-    var t = doc.trilha || {};
-    if (t.tipo === "gerada") {
-      return alert("A trilha gerada não tem fim — ela acompanha o vídeo. " +
-                   "Ajuste as durações das cenas como quiser.");
-    }
-    var som = new Audio(t.src);
-    som.addEventListener("loadedmetadata", function () {
-      var d = som.duration;
-      if (!isFinite(d) || !d) return alert("não consegui ler a duração do áudio");
-      var n = (doc.cenas || []).length || 1;
-      mudar(function () {
-        doc.cenas.forEach(function (c) { c.duracao = Math.round((d / n) * 10) / 10; });
-      });
-      desenharTrilha();
-    });
-    som.addEventListener("error", function () { alert("não consegui carregar o áudio"); });
-  }
-
-  /* inspetor -------------------------------------------------------------- */
-
-  function grupo(titulo) {
-    var g = el("div", "grupo");
-    g.appendChild(el("div", "rotulo", titulo));
-    return g;
-  }
-
-  function linha(rotulo, controle) {
-    var l = el("div", "linha-campo");
-    l.appendChild(el("span", "", rotulo));
-    l.appendChild(controle);
-    return l;
-  }
-
-  function inp(valor, aoMudar, tipo) {
-    var i = el("input", "campo");
-    i.type = tipo || "text";
-    i.value = valor == null ? "" : valor;
-    i.oninput = function () { aoMudar(i.type === "number" ? (i.value === "" ? null : +i.value) : i.value); };
-    return i;
-  }
-
-  function area(valor, aoMudar, linhas) {
-    var t = el("textarea", "campo");
-    t.rows = linhas || 4;
-    t.value = valor == null ? "" : valor;
-    t.oninput = function () { aoMudar(t.value); };
-    return t;
-  }
-
-  /* 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 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);
-    });
-    s.onchange = function () { aoMudar(s.value); };
-    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", "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);
-    var hex = inp(valor, aoMudar);
-    hex.placeholder = "#hex";
-    hex.className = "campo hex";
-    caixa.appendChild(hex);
-    return caixa;
-  }
-
-  function edita(campo, valor) {
-    var alvo = itens()[sel];
-    if (!alvo) return;
-    mudar(function () {
-      if (valor === "" || valor === null) delete alvo[campo];
-      else alvo[campo] = valor;
-    });
-  }
-
-  function desenharInspetor() {
-    var ins = $("#inspetor");
-    ins.innerHTML = "";
-
-    /* propriedades do arquivo */
-    var g0 = grupo(F.modelo === "cena" ? "Cena" : (F.modelo === "documento" ? "Documento" : "Planilha"));
-
-    if (F.modelo === "cena") {
-      var c = cena();
-      g0.appendChild(linha("Layout", selecao(F.layouts, c.layout || F.layoutPadrao,
-        function (v) { mudar(function () { c.layout = v; }); })));
-      // 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.
-      // A lista vem de OPC, não repetida aqui: era a duplicação que deixava
-      // o menu com "ruido" (que não existe) enquanto o CSS tinha "nevoa" e
-      // "xadrez" que ninguém alcançava.
-      var fundoAtual = typeof c.fundo === "string" && c.fundo.charAt(0) !== "#" ? c.fundo : "";
-      g0.appendChild(linha("Fundo", menu(OPC.fundo, fundoAtual, function (v) {
-        mudar(function () { if (v) c.fundo = v; else delete c.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");
-      bFoto.style.width = "100%";
-      bFoto.onclick = function () {
-        Midia.escolher({ tipo: "imagem" }).then(function (m) {
-          if (m) mudar(function () { c.fundo = { imagem: m.url, escurecer: 0.55 }; });
-        });
-      };
-      g0.appendChild(linha("Imagem", bFoto));
-
-      g0.appendChild(linha("Acabamento", menu(OPC.acabamento, c.acabamento || "",
-        function (v) { mudar(function () { if (v) c.acabamento = v; else delete c.acabamento; }); })));
-      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 (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; }); })));
-        /* A câmera só aparece onde há tempo (vídeo): num slide parado ela
-           não teria o que animar, e uma caixa que não faz nada é pior que
-           caixa nenhuma. Guardada como string — é o formato que a spec
-           documenta e o que o render.js aceita direto. */
-        g0.appendChild(linha("Câmera", menu(OPC.camera, typeof c.camera === "string" ? c.camera : "",
-          function (v) { mudar(function () { if (v) c.camera = v; else delete c.camera; }); })));
-      }
-      if (SLUG === "traco") {
-        g0.appendChild(linha("Arranjo", selecao(["", "horizontal", "vertical"], c.auto || "",
-          function (v) { mudar(function () { if (v) c.auto = v; else delete c.auto; }); })));
-      }
-      var dim = el("div", "dois");
-      dim.appendChild(inp(doc.largura || 1920, function (v) { mudar(function () { doc.largura = v; }); }, "number"));
-      dim.appendChild(inp(doc.altura || 1080, function (v) { mudar(function () { doc.altura = v; }); }, "number"));
-      g0.appendChild(linha("Tela", dim));
-      if (F.tamanhos) {
-        g0.appendChild(linha("Preset", selecao([""].concat(F.tamanhos.map(function (t) { return t[0]; })), "",
-          function (v) {
-            var t = F.tamanhos.filter(function (x) { return x[0] === v; })[0];
-            if (t) mudar(function () { doc.largura = t[1]; doc.altura = t[2]; });
-          })));
-      }
-    } else if (F.modelo === "planilha") {
-      g0.appendChild(linha("Nome", inp(aba().nome, function (v) { mudar(function () { aba().nome = v; }); })));
-      g0.appendChild(linha("Tema", selecao(TEMAS, doc.tema || "claro", function (v) { mudar(function () { doc.tema = v; }); })));
-    } else {
-      g0.appendChild(linha("Tema", selecao(TEMAS, doc.tema || "papel", function (v) { mudar(function () { doc.tema = v; }); })));
-    }
-    ins.appendChild(g0);
-
-    if (F.modelo === "planilha") { colunasInspetor(ins); return; }
-    if (F.modelo === "cena" && (SLUG === "corte" || SLUG === "prisma")) narracaoInspetor(ins);
-
-    var e = itens()[sel];
-    if (!e) {
-      ins.appendChild(el("div", "nada", "Clique em um elemento do palco<br>para editar as propriedades."));
-      return;
-    }
-
-    /* ações do elemento */
-    var ga = grupo(e.tipo);
-    var ac = el("div", "opcoes");
-    [["subir", "Subir", -1], ["descer", "Descer", 1]].forEach(function (a) {
-      var b = el("button", "", svgIcone(a[0]));
-      b.title = a[1];
-      b.onclick = function () {
-        var lista = itens(), j = sel + a[2];
-        if (j < 0 || j >= lista.length) return;
-        mudar(function () { var t = lista[sel]; lista[sel] = lista[j]; lista[j] = t; sel = j; });
-      };
-      ac.appendChild(b);
-    });
-    var bd = el("button", "", svgIcone("duplicar")); bd.title = "Duplicar";
-    bd.onclick = function () { mudar(function () { itens().splice(sel + 1, 0, JSON.parse(JSON.stringify(e))); sel++; }); };
-    var bx = el("button", "", svgIcone("lixeira")); bx.title = "Remover";
-    bx.onclick = function () { mudar(function () { itens().splice(sel, 1); sel = null; }); };
-    ac.appendChild(bd); ac.appendChild(bx);
-    ga.appendChild(ac);
-    ins.appendChild(ga);
-
-    camposDoTipo(ins, e);
-
-    /* posição, para elementos livres */
-    if (F.modelo === "cena") {
-      var gp = grupo("Posição");
-      var xy = el("div", "dois");
-      xy.appendChild(inp(e.x, function (v) { edita("x", v); }, "number"));
-      xy.appendChild(inp(e.y, function (v) { edita("y", v); }, "number"));
-      gp.appendChild(linha("X / Y", xy));
-      var la = el("div", "dois");
-      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 (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); })));
-      /* Profundidade: o quanto este elemento acompanha a câmera. 1 anda com o
-         quadro, acima vem à frente, abaixo fica ao fundo. Sem câmera na cena
-         não faz nada — e é por isso que mora aqui embaixo, e não em destaque. */
-      gp.appendChild(linha("Profundidade", inp(e.paralaxe != null ? e.paralaxe : 1,
-        function (v) { edita("paralaxe", v === 1 || v === "" ? "" : v); }, "number")));
-      if (e.tipo === "numeros") {
-        gp.appendChild(linha("Contar", selecao(["não", "sim"], e.contar ? "sim" : "não",
-          function (v) { edita("contar", v === "sim" ? true : ""); })));
-      }
-      ins.appendChild(gp);
-      if (e.x == null && e.y == null) {
-        var dica = el("div", "nada", "Este elemento segue o layout da cena.<br>Defina X e Y para posicionar à mão.");
-        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) {
-    var g = grupo("Conteúdo");
-
-    if (e.tipo === "texto" || e.tipo === "no" || ["titulo", "secao", "subsecao", "paragrafo", "apoio", "chapeu"].indexOf(e.tipo) >= 0) {
-      g.appendChild(linha("Texto", area(e.texto, function (v) { edita("texto", v); }, 3)));
-    }
-    if (e.tipo === "texto") {
-      g.appendChild(linha("Papel", selecao(["chapeu", "titulo", "subtitulo", "apoio", "corpo", "legenda"],
-        e.papel || "corpo", function (v) { edita("papel", v); })));
-      g.appendChild(linha("Tamanho", inp(e.tamanho, function (v) { edita("tamanho", v); }, "number")));
-      g.appendChild(linha("Peso", selecao(["", 300, 400, 500, 600, 700, 800], e.peso || "", function (v) { edita("peso", v ? +v : ""); })));
-      g.appendChild(linha("Alinhar", selecao(["", "left", "center", "right"], e.alinhar || "", function (v) { edita("alinhar", v); })));
-      g.appendChild(linha("Estilo", selecao(
-        ["", "gradiente", "contorno", "contorno-tom", "sombra", "brilho", "relevo", "marcador", "fita", "caixa"],
-        e.estilo || "", function (v) { edita("estilo", v); })));
-      g.appendChild(linha("Cor", seletorCor(e.cor, function (v) { edita("cor", v); })));
-      g.appendChild(linha("Maiúsc.", selecao(["não", "sim"], e.maiusculas ? "sim" : "não",
-        function (v) { edita("maiusculas", v === "sim" ? true : ""); })));
-    }
-    if (e.tipo === "lista" || e.tipo === "numerada") {
-      g.appendChild(linha("Itens", area((e.itens || []).join("\n"),
-        function (v) { edita("itens", v.split("\n").filter(function (x) { return x.trim(); })); }, 6)));
-    }
-    if (e.tipo === "cartoes" || e.tipo === "numeros") {
-      g.appendChild(linha("Itens", area((e.itens || []).map(function (i) {
-        return typeof i === "string" ? i : [i.titulo || i.valor, i.texto || i.rotulo].join(" | ");
-      }).join("\n"), function (v) { edita("itens", v.split("\n").filter(function (x) { return x.trim(); })); }, 6)));
-      g.appendChild(linha("Colunas", inp(e.colunas, function (v) { edita("colunas", v); }, "number")));
-    }
-    if (e.tipo === "tabela") {
-      g.appendChild(linha("Linhas", area((e.linhas || []).map(function (l) { return l.join(" | "); }).join("\n"),
-        function (v) {
-          edita("linhas", v.split("\n").filter(function (x) { return x.trim(); })
-            .map(function (l) { return l.split("|").map(function (c) { return c.trim(); }); }));
-        }, 7)));
-    }
-    if (e.tipo === "codigo") g.appendChild(linha("Código", area(e.texto, function (v) { edita("texto", v); }, 8)));
-    if (e.tipo === "citacao") {
-      g.appendChild(linha("Frase", area(e.texto, function (v) { edita("texto", v); }, 4)));
-      g.appendChild(linha("Autor", inp(e.autor, function (v) { edita("autor", v); })));
-    }
-    if (e.tipo === "destaque") {
-      g.appendChild(linha("Título", inp(e.titulo, function (v) { edita("titulo", v); })));
-      g.appendChild(linha("Texto", area(e.texto, function (v) { edita("texto", v); }, 3)));
-    }
-    if (e.tipo === "imagem") {
-      var bTrocar = el("button", "btn", svgIcone("pasta") + " Do computador");
-      bTrocar.style.width = "100%";
-      bTrocar.onclick = function () {
-        Midia.escolher({ tipo: "imagem" }).then(function (m) { if (m) edita("src", m.url); });
-      };
-      g.appendChild(linha("Arquivo", bTrocar));
-      g.appendChild(linha("URL", inp(e.src, function (v) { edita("src", v); })));
-      g.appendChild(linha("Ajuste", selecao(["cobrir", "conter"], e.ajuste || "cobrir", function (v) { edita("ajuste", v); })));
-      g.appendChild(linha("Filtro", selecao(["", "cinza", "sepia", "contraste", "desbotado"],
-        e.filtro || "", function (v) { edita("filtro", v); })));
-      g.appendChild(linha("Movimento", selecao(["", "aproximar", "afastar", "esquerda", "direita", "cima"],
-        e.movimento || "", function (v) { edita("movimento", v); })));
-      g.appendChild(linha("Raio", inp(e.raio, function (v) { edita("raio", v); }, "number")));
-      g.appendChild(linha("Legenda", inp(e.legenda, function (v) { edita("legenda", v); })));
-    }
-    if (e.tipo === "icone") {
-      g.appendChild(linha("Ícone", selecao(nomesIcones(), e.nome || "estrela", function (v) { edita("nome", v); })));
-      g.appendChild(linha("Tamanho", inp(e.tamanho || 90, function (v) { edita("tamanho", v); }, "number")));
-      g.appendChild(linha("Cor", seletorCor(e.cor, function (v) { edita("cor", v); })));
-    }
-    if (e.tipo === "forma") {
-      g.appendChild(linha("Forma", selecao(["retangulo", "circulo", "triangulo", "linha", "seta"],
-        e.forma || "retangulo", function (v) { edita("forma", v); })));
-      g.appendChild(linha("Cor", seletorCor(e.preenchimento, function (v) { edita("preenchimento", v); })));
-      g.appendChild(linha("Raio", inp(e.raio, function (v) { edita("raio", v); }, "number")));
-    }
-    if (e.tipo === "grafico") {
-      g.appendChild(linha("Tipo", selecao(["barras", "linha", "area", "pizza", "rosca"],
-        e.grafico || "barras", function (v) { edita("grafico", v); })));
-      g.appendChild(linha("Dados", area((e.dados || []).map(function (d) { return d[0] + " | " + d[1]; }).join("\n"),
-        function (v) {
-          edita("dados", v.split("\n").filter(function (x) { return x.trim(); }).map(function (l) {
-            var p = l.split("|");
-            return [(p[0] || "").trim(), parseFloat(p[1]) || 0];
-          }));
-        }, 6)));
-    }
-    if (e.tipo === "no") {
-      g.appendChild(linha("Id", inp(e.id, function (v) { edita("id", v); })));
-      g.appendChild(linha("Destaque", selecao(["não", "sim"], e.destaque ? "sim" : "não",
-        function (v) { edita("destaque", v === "sim" ? true : ""); })));
-      g.appendChild(linha("Formato", selecao(["", "circulo"], e.formato || "", function (v) { edita("formato", v); })));
-    }
-    if (e.tipo === "conector") {
-      var ids = (cena().elementos || []).filter(function (x) { return x.id; }).map(function (x) { return x.id; });
-      g.appendChild(linha("De", selecao([""].concat(ids), e.de || "", function (v) { edita("de", v); })));
-      g.appendChild(linha("Para", selecao([""].concat(ids), e.para || "", function (v) { edita("para", v); })));
-      g.appendChild(linha("Estilo", selecao(["curva", "reta", "cotovelo"], e.estilo || "curva", function (v) { edita("estilo", v); })));
-      g.appendChild(linha("Rótulo", inp(e.texto, function (v) { edita("texto", v); })));
-    }
-
-    if (g.children.length > 1) ins.appendChild(g);
-  }
-
-  function narracaoInspetor(ins) {
-    var c = cena();
-    var gn = grupo(SLUG === "corte" ? "Narração" : "Narração e notas");
-
-    /* --- 1. sua própria voz: sempre melhor que qualquer sintetizada ------ */
-
-    if (c.narracaoAudio) {
-      var usada = el("div");
-      usada.style.cssText = "display:flex;gap:6px;align-items:center;margin-bottom:10px";
-      var bTocar = el("button", "btn", svgIcone("play"));
-      bTocar.title = "Ouvir a gravação";
-      bTocar.onclick = function () { new Audio(c.narracaoAudio).play(); };
-      var rot = el("span", "", "voz gravada");
-      rot.style.cssText = "flex:1;font-size:12px;color:#4ade80";
-      var bX = el("button", "btn perigo", svgIcone("lixeira"));
-      bX.title = "Remover a gravação";
-      bX.onclick = function () { mudar(function () { delete c.narracaoAudio; }); };
-      usada.appendChild(bTocar); usada.appendChild(rot); usada.appendChild(bX);
-      gn.appendChild(usada);
-    } else if (Narracao.podeGravar()) {
-      var bGravar = el("button", "btn", svgIcone("play2") + " Gravar minha voz");
-      bGravar.style.cssText = "width:100%;margin-bottom:10px";
-      bGravar.onclick = function () {
-        if (Narracao.gravando()) {
-          Narracao.pararGravacao("narracao-" + ID + "-" + (iCena + 1)).then(function (m) {
-            mudar(function () { c.narracaoAudio = m.url; });
-          }).catch(function (e) { alert("erro ao salvar: " + e.message); });
-          return;
-        }
-        Narracao.gravar().then(function () {
-          bGravar.innerHTML = svgIcone("pausa") + " Parar e salvar";
-          bGravar.classList.add("primo");
-        }).catch(function (e) { alert("não consegui abrir o microfone: " + e.message); });
-      };
-      gn.appendChild(bGravar);
-    }
-
-    /* --- 2. texto para a voz sintetizada -------------------------------- */
-
-    gn.appendChild(linha("Falar", area(c.narracao, function (v) {
-      mudar(function () { if (v) c.narracao = v; else delete c.narracao; });
-    }, 3)));
-
-    var acoes = el("div", "opcoes");
-    var bOuvir = el("button", "", svgIcone("play"));
-    bOuvir.title = "Ouvir";
-    bOuvir.onclick = function () {
-      if (!Narracao.disponivel()) return alert("este navegador não tem síntese de voz");
-      Narracao.falar(c.narracao || "", doc.voz || {});
-    };
-    var bParar = el("button", "", svgIcone("pausa"));
-    bParar.title = "Parar";
-    bParar.onclick = function () { Narracao.parar(); };
-    acoes.appendChild(bOuvir);
-    acoes.appendChild(bParar);
-
-    if (F.tempo) {
-      var bMedir = el("button", "", svgIcone("relogio"));
-      bMedir.title = "Ajustar a duração desta cena à narração";
-      bMedir.onclick = function () {
-        if (!c.narracao) return;
-        bMedir.style.opacity = ".4";
-        Narracao.medir(c.narracao, doc.voz || {}).then(function (s) {
-          bMedir.style.opacity = "";
-          mudar(function () { c.duracao = Math.max(2, Math.round((s + 0.6) * 10) / 10); });
-        });
-      };
-      acoes.appendChild(bMedir);
-    }
-    gn.appendChild(acoes);
-
-    if (SLUG === "prisma") {
-      gn.appendChild(linha("Notas", area(c.notas, function (v) {
-        mudar(function () { if (v) c.notas = v; else delete c.notas; });
-      }, 3)));
-    }
-
-    /* --- 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 sel2 = el("select", "campo");
-    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, grave: voz.grave, velocidade: voz.velocidade });
-    };
-    gn.appendChild(linha("Voz", sel2));
-
-    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) {
-      var bTodas = el("button", "btn", "Ajustar todas as cenas");
-      bTodas.style.cssText = "width:100%;margin-top:8px";
-      bTodas.onclick = ajustarTudoNarracao;
-      gn.appendChild(bTodas);
-    }
-
-    /* --- 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);
-  }
-
-  /* mede cada narração e ajusta a duração da cena a ela, uma de cada vez */
-  function ajustarTudoNarracao() {
-    var lista = (doc.cenas || []).map(function (c, i) { return { c: c, i: i }; })
-      .filter(function (x) { return x.c.narracao; });
-    if (!lista.length) return alert("nenhuma cena tem narração ainda");
-
-    marcar("medindo narração…");
-    (function proxima(k) {
-      if (k >= lista.length) {
-        desenhar();
-        agendarSalvar();
-        return;
-      }
-      Narracao.medir(lista[k].c.narracao, doc.voz || {}).then(function (s) {
-        lista[k].c.duracao = Math.max(2, Math.round((s + 0.6) * 10) / 10);
-        marcar("medindo " + (k + 1) + "/" + lista.length + "…");
-        proxima(k + 1);
-      });
-    })(0);
-  }
-
-  function colunasInspetor(ins) {
-    var g = grupo("Colunas");
-    (aba().colunas || []).forEach(function (c, i) {
-      g.appendChild(linha(String.fromCharCode(65 + i), inp(c, function (v) {
-        mudar(function () { aba().colunas[i] = v; });
-      })));
-    });
-    ins.appendChild(g);
-
-    var gf = grupo("Formato por coluna");
-    (aba().colunas || []).forEach(function (c) {
-      gf.appendChild(linha(c.slice(0, 8), selecao(["", "texto", "inteiro", "decimal", "moeda", "percentual"],
-        (aba().formatos || {})[c] || "", function (v) {
-          mudar(function () {
-            aba().formatos = aba().formatos || {};
-            if (v) aba().formatos[c] = v; else delete aba().formatos[c];
-          });
-        })));
-    });
-    ins.appendChild(gf);
-
-    var gh = grupo("Fórmulas");
-    gh.appendChild(el("div", "nada",
-      "Escreva na célula:<br><code>=SOMA(B1:B9)</code><br><code>=MEDIA(C1:C4)</code><br><code>=B2*1.2</code>"));
-    ins.appendChild(gh);
-  }
-
-  /* ------------------------------------------------------------- ações topo */
-
-  $("#titulo").addEventListener("input", agendarSalvar);
-
-  $("#btn-codigo").onclick = function () {
-    $("#codigo-txt").value = JSON.stringify(doc, null, 2);
-    $("#folha").classList.add("on");
-  };
-  $("#codigo-aplicar").onclick = function () {
-    try {
-      var novo = JSON.parse($("#codigo-txt").value);
-      mudar(function () { doc = novo; ARQ.doc = doc; iCena = 0; sel = null; });
-      $("#folha").classList.remove("on");
-    } catch (err) {
-      alert("JSON inválido: " + err.message);
-    }
-  };
-  $("#codigo-fechar").onclick = function () { $("#folha").classList.remove("on"); };
-
-  $("#btn-ver").href = "/v/" + ID;
-  $("#btn-baixar").href = "/api/arquivos/" + ID + "/export";
-  $("#btn-pdf").onclick = function () { window.open("/v/" + ID + "#imprimir", "_blank"); };
-
-  document.addEventListener("keydown", function (ev) {
-    if (/input|textarea/i.test(ev.target.tagName) || ev.target.isContentEditable) return;
-    if ((ev.metaKey || ev.ctrlKey) && ev.key === "z") { ev.preventDefault(); ev.shiftKey ? refazer() : desfazer(); return; }
-    if (ev.key === "Delete" || ev.key === "Backspace") {
-      if (sel != null) { ev.preventDefault(); mudar(function () { itens().splice(sel, 1); sel = null; }); }
-    }
-    if (F.modelo === "cena") {
-      if (ev.key === "ArrowDown" && !sel) { iCena = Math.min((doc.cenas || []).length - 1, iCena + 1); desenhar(); }
-      if (ev.key === "ArrowUp" && !sel) { iCena = Math.max(0, iCena - 1); desenhar(); }
-    }
-  });
-
-  window.addEventListener("resize", function () { if (doc) desenharPalco(); });
-  window.addEventListener("beforeunload", function () { clearTimeout(tSalvar); salvar(true); });
-})();