primocode 7.17.0 → 8.0.0

package/studio/web/js/editor.js

@@ -0,0 +1,1270 @@
+/* ==========================================================================
+   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;
+
+  /* ------------------------------------------------------------ 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") {
+      $("#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) + ")";
+      });
+
+      if (sel != null || (cena().elementos || []).length) {
+        var tit = el("div", "rotulo");
+        tit.style.cssText = "padding:12px 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);
+        });
+      }
+      return;
+    }
+
+    if (F.modelo === "documento") {
+      $("#painel-rotulo").textContent = "Blocos";
+      (doc.blocos || []).forEach(function (b, i) {
+        var c = el("div", "camada" + (i === sel ? " ativa" : ""),
+                   svgIcone(iconeDe(b)) + "<span>" + rotuloDe(b) + "</span>");
+        c.onclick = function () { sel = i; 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);
+    });
+  }
+
+  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 */
+    var els = Array.prototype.slice.call(cn.querySelectorAll(".el"));
+    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);
+    });
+
+    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", svgIcone("mais") + " Nova cena");
+      addC.onclick = function () {
+        mudar(function () {
+          doc.cenas.splice(iCena + 1, 0, { layout: F.layoutPadrao, elementos: [] });
+          iCena++; sel = null;
+        });
+      };
+      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"));
+      clipe.onclick = function () { iCena = i; sel = null; desenhar(); };
+      t.appendChild(clipe);
+    });
+    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";
+    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;
+  }
+
+  function selecao(valores, atual, aoMudar) {
+    var s = el("select", "campo");
+    valores.forEach(function (v) {
+      var o = el("option", "", String(v));
+      o.value = v;
+      if (String(v) === String(atual)) o.selected = true;
+      s.appendChild(o);
+    });
+    s.onchange = function () { aoMudar(s.value); };
+    return s;
+  }
+
+  function seletorCor(valor, aoMudar) {
+    var caixa = el("div");
+    caixa.style.cssText = "display:grid;gap:6px";
+    var p = el("div", "cores");
+    PALETA.forEach(function (c) {
+      var b = el("button");
+      b.style.background = c;
+      b.onclick = function () { aoMudar(c); };
+      p.appendChild(b);
+    });
+    caixa.appendChild(p);
+    caixa.appendChild(inp(valor, aoMudar));
+    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; }); })));
+      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 : "",
+        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("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 || "",
+        function (v) { mudar(function () { if (v) c.tom = v; else delete c.tom; }); })));
+
+      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; }); })));
+      }
+      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", 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); })));
+      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);
+      }
+    }
+  }
+
+  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 -------------------------------- */
+
+    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);
+    });
+    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 });
+    };
+    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; }); },
+      "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. 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);
+    }
+
+    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); });
+})();