primocode 7.18.0 → 8.0.0

package/studio/web/js/exportar.js

@@ -0,0 +1,135 @@
+/* ==========================================================================
+   exportar.js — transforma uma cena renderizada em PNG ou JPG.
+
+   Exportar.imagem(cenaEl, {largura, altura, escala, formato, nome})
+
+   Caminho: clona a cena → embute as imagens como data URI → empacota num
+   <foreignObject> de SVG com o CSS junto → desenha em canvas → baixa.
+   Sem biblioteca externa.
+   ========================================================================== */
+
+var Exportar = (function () {
+  "use strict";
+
+  var cssCache = null;
+
+  function css() {
+    if (cssCache) return Promise.resolve(cssCache);
+    return Promise.all([
+      fetch("/core.css").then(function (r) { return r.text(); }),
+      fetch("/render.css").then(function (r) { return r.text(); }),
+    ]).then(function (partes) {
+      cssCache = partes.join("\n");
+      return cssCache;
+    });
+  }
+
+  function paraDataURI(url) {
+    if (!url || /^data:/.test(url)) return Promise.resolve(url);
+    return fetch(url)
+      .then(function (r) { return r.blob(); })
+      .then(function (b) {
+        return new Promise(function (ok, falha) {
+          var l = new FileReader();
+          l.onload = function () { ok(l.result); };
+          l.onerror = falha;
+          l.readAsDataURL(b);
+        });
+      })
+      .catch(function () { return url; });
+  }
+
+  /* Toda imagem precisa virar data URI: dentro de um SVG carregado como
+     imagem, referência externa não é buscada. */
+  function embutirImagens(raiz) {
+    var tarefas = [];
+
+    Array.prototype.forEach.call(raiz.querySelectorAll("img"), function (img) {
+      tarefas.push(paraDataURI(img.getAttribute("src")).then(function (d) {
+        img.setAttribute("src", d);
+      }));
+    });
+
+    Array.prototype.forEach.call(raiz.querySelectorAll("*"), function (no) {
+      var bg = no.style && no.style.backgroundImage;
+      if (!bg || bg.indexOf("url(") < 0) return;
+      var m = bg.match(/url\(["']?([^"')]+)["']?\)/);
+      if (!m || /^data:/.test(m[1])) return;
+      tarefas.push(paraDataURI(m[1]).then(function (d) {
+        no.style.backgroundImage = 'url("' + d + '")';
+      }));
+    });
+
+    return Promise.all(tarefas);
+  }
+
+  function imagem(cenaEl, op) {
+    op = op || {};
+    var L = op.largura || cenaEl.offsetWidth || 1920;
+    var A = op.altura || cenaEl.offsetHeight || 1080;
+    var escala = op.escala || 2;
+    var formato = op.formato === "jpg" ? "image/jpeg" : "image/png";
+
+    var clone = cenaEl.cloneNode(true);
+    clone.classList.remove("animar");
+    clone.style.transform = "none";
+    clone.style.position = "static";
+    clone.style.width = L + "px";
+    clone.style.height = A + "px";
+    // animação parada no estado final, senão sai tudo transparente
+    Array.prototype.forEach.call(clone.querySelectorAll("*"), function (n) {
+      n.style.animation = "none";
+      n.style.opacity = n.style.opacity === "0" ? "1" : n.style.opacity;
+    });
+
+    var caixa = document.createElement("div");
+    caixa.appendChild(clone);
+
+    return embutirImagens(caixa)
+      .then(css)
+      .then(function (folha) {
+        var html = new XMLSerializer().serializeToString(clone);
+        var svg =
+          '<svg xmlns="http://www.w3.org/2000/svg" width="' + L + '" height="' + A + '">' +
+          "<foreignObject width='100%' height='100%'>" +
+          '<div xmlns="http://www.w3.org/1999/xhtml">' +
+          "<style>" + folha.replace(/<\/style>/gi, "") + "</style>" +
+          html +
+          "</div></foreignObject></svg>";
+
+        return new Promise(function (ok, falha) {
+          var img = new Image();
+          img.onload = function () { ok(img); };
+          img.onerror = function () { falha(new Error("não consegui montar a imagem")); };
+          img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+        });
+      })
+      .then(function (img) {
+        var tela = document.createElement("canvas");
+        tela.width = L * escala;
+        tela.height = A * escala;
+        var c = tela.getContext("2d");
+        if (formato === "image/jpeg") {
+          c.fillStyle = "#ffffff";
+          c.fillRect(0, 0, tela.width, tela.height);
+        }
+        c.drawImage(img, 0, 0, tela.width, tela.height);
+        return new Promise(function (ok) {
+          tela.toBlob(function (b) { ok(b); }, formato, 0.94);
+        });
+      })
+      .then(function (blob) {
+        if (!blob) throw new Error("o navegador não gerou o arquivo");
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement("a");
+        a.href = url;
+        a.download = (op.nome || "arte").replace(/[^\w\-]+/g, "-").toLowerCase() +
+                     (formato === "image/jpeg" ? ".jpg" : ".png");
+        a.click();
+        setTimeout(function () { URL.revokeObjectURL(url); }, 4000);
+        return true;
+      });
+  }
+
+  return { imagem: imagem };
+})();

package/studio/web/js/ferramentas.js

@@ -0,0 +1,105 @@
+/* ==========================================================================
+   ferramentas.js — o que cada ferramenta oferece na interface.
+   ========================================================================== */
+
+var TEMAS = ["meia-noite", "claro", "papel", "neon", "brasa", "floresta"];
+
+var PALETA = ["#ff5a36", "#ffb03a", "#f4e04d", "#2fbf7f", "#1f8fe0", "#8b5cf6",
+              "#f472b6", "#ffffff", "#9aa4b2", "#111318"];
+
+var FERR = {
+  prisma: {
+    nome: "Prisma", papel: "Apresentações", cor: "#FF5A36", icone: "tela", modelo: "cena",
+    layouts: ["capa", "titulo", "secao", "duas-colunas", "tres-colunas", "citacao",
+              "numeros", "imagem-direita", "imagem-esquerda", "centro", "livre"],
+    layoutPadrao: "titulo",
+    trilho: [
+      { k: "titulo", i: "titulo", r: "Título", novo: { tipo: "texto", papel: "titulo", texto: "Novo título" } },
+      { k: "texto", i: "texto", r: "Texto", novo: { tipo: "texto", papel: "corpo", texto: "Um parágrafo de apoio." } },
+      { k: "lista", i: "lista", r: "Lista", novo: { tipo: "lista", itens: ["Primeiro ponto", "Segundo ponto"] } },
+      { k: "cartoes", i: "cartao", r: "Cartões", novo: { tipo: "cartoes", itens: ["Título | descrição", "Título | descrição"] } },
+      { k: "numeros", i: "numero", r: "Números", novo: { tipo: "numeros", itens: ["3x | crescimento", "42% | margem"] } },
+      { k: "tabela", i: "tabela", r: "Tabela", novo: { tipo: "tabela", linhas: [["Coluna", "Coluna"], ["dado", "dado"]] } },
+      { k: "citacao", i: "citacao", r: "Citação", novo: { tipo: "citacao", texto: "Uma frase que fica.", autor: "Autor" } },
+      { k: "grafico", i: "grafico", r: "Gráfico", novo: { tipo: "grafico", grafico: "barras", dados: [["A", 30], ["B", 55], ["C", 40]] } },
+      { k: "imagem", i: "imagem", r: "Imagem", novo: { tipo: "imagem", src: "", ajuste: "cobrir" } },
+      { k: "icone", i: "icone", r: "Ícone", novo: { tipo: "icone", nome: "raio", tamanho: 120 } },
+      { k: "codigo", i: "codigo", r: "Código", novo: { tipo: "codigo", texto: "npm install" } },
+      { k: "forma", i: "quadrado", r: "Forma", novo: { tipo: "forma", forma: "retangulo", x: 200, y: 200, l: 400, a: 220, raio: 20 } },
+    ],
+  },
+
+  tela: {
+    nome: "Tela", papel: "Design gráfico", cor: "#8B5CF6", icone: "lapis", modelo: "cena",
+    layouts: ["livre", "centro", "capa"], layoutPadrao: "livre",
+    tamanhos: [["Post 1080", 1080, 1080], ["Story 1080x1920", 1080, 1920],
+               ["Capa 1920x1080", 1920, 1080], ["Banner 1600x600", 1600, 600]],
+    trilho: [
+      { k: "texto", i: "texto", r: "Texto", novo: { tipo: "texto", texto: "Texto", x: 120, y: 120, l: 700, a: 140, tamanho: 88, peso: 700 } },
+      { k: "quadrado", i: "quadrado", r: "Retângulo", novo: { tipo: "forma", forma: "retangulo", x: 160, y: 160, l: 420, a: 300, raio: 24 } },
+      { k: "circulo", i: "circulo", r: "Círculo", novo: { tipo: "forma", forma: "circulo", x: 200, y: 200, l: 320, a: 320 } },
+      { k: "triangulo", i: "triangulo", r: "Triângulo", novo: { tipo: "forma", forma: "triangulo", x: 200, y: 200, l: 320, a: 300 } },
+      { k: "linha", i: "linha", r: "Linha", novo: { tipo: "forma", forma: "linha", x: 160, y: 400, l: 620, a: 6, espessura: 6 } },
+      { k: "seta", i: "seta", r: "Seta", novo: { tipo: "forma", forma: "seta", x: 200, y: 400, l: 460, a: 60 } },
+      { k: "imagem", i: "imagem", r: "Imagem", novo: { tipo: "imagem", src: "", x: 120, y: 120, l: 620, a: 460 } },
+      { k: "icone", i: "icone", r: "Ícone", novo: { tipo: "icone", nome: "estrela", x: 300, y: 300, tamanho: 160 } },
+      { k: "grafico", i: "grafico", r: "Gráfico", novo: { tipo: "grafico", grafico: "rosca", x: 160, y: 200, l: 620, a: 460, dados: [["A", 40], ["B", 30], ["C", 30]] } },
+    ],
+  },
+
+  corte: {
+    nome: "Corte", papel: "Vídeo", cor: "#E0397A", icone: "video", modelo: "cena",
+    layouts: ["capa", "centro", "titulo", "citacao", "numeros", "imagem-direita", "livre"],
+    layoutPadrao: "capa", tempo: true,
+    trilho: [
+      { k: "titulo", i: "titulo", r: "Título", novo: { tipo: "texto", papel: "titulo", texto: "Título da cena" } },
+      { k: "texto", i: "texto", r: "Texto", novo: { tipo: "texto", papel: "apoio", texto: "Legenda da cena" } },
+      { k: "lista", i: "lista", r: "Lista", novo: { tipo: "lista", itens: ["Um", "Dois"], revelar: true } },
+      { k: "numeros", i: "numero", r: "Números", novo: { tipo: "numeros", itens: ["100% | atenção"] } },
+      { k: "imagem", i: "imagem", r: "Imagem", novo: { tipo: "imagem", src: "", ajuste: "cobrir" } },
+      { k: "icone", i: "icone", r: "Ícone", novo: { tipo: "icone", nome: "foguete", tamanho: 200 } },
+      { k: "forma", i: "quadrado", r: "Forma", novo: { tipo: "forma", forma: "retangulo", x: 200, y: 200, l: 400, a: 220, raio: 20 } },
+    ],
+  },
+
+  traco: {
+    nome: "Traço", papel: "Diagramas", cor: "#D9A21B", icone: "conector", modelo: "cena",
+    layouts: ["livre"], layoutPadrao: "livre",
+    trilho: [
+      { k: "no", i: "no", r: "Nó", novo: { tipo: "no", texto: "Etapa", x: 300, y: 300, l: 340, a: 150 } },
+      { k: "no-destaque", i: "circulo", r: "Nó destacado", novo: { tipo: "no", texto: "Chave", destaque: true, x: 300, y: 500, l: 340, a: 150 } },
+      { k: "conector", i: "conector", r: "Conector", novo: { tipo: "conector", de: "", para: "" } },
+      { k: "texto", i: "texto", r: "Texto", novo: { tipo: "texto", texto: "Anotação", x: 200, y: 120, l: 500, a: 90, tamanho: 32 } },
+      { k: "forma", i: "quadrado", r: "Área", novo: { tipo: "forma", forma: "retangulo", x: 160, y: 160, l: 700, a: 500, raio: 26, preenchimento: "rgba(255,255,255,.04)", borda: { cor: "var(--c-linha)", largura: 2 } } },
+      { k: "icone", i: "icone", r: "Ícone", novo: { tipo: "icone", nome: "engrenagem", x: 300, y: 300, tamanho: 120 } },
+    ],
+  },
+
+  prosa: {
+    nome: "Prosa", papel: "Documentos", cor: "#2E9E6B", icone: "livro", modelo: "documento",
+    trilho: [
+      { k: "titulo", i: "titulo", r: "Título", novo: { tipo: "titulo", texto: "Título" } },
+      { k: "secao", i: "texto", r: "Seção", novo: { tipo: "secao", texto: "Nova seção" } },
+      { k: "subsecao", i: "texto", r: "Subseção", novo: { tipo: "subsecao", texto: "Subseção" } },
+      { k: "paragrafo", i: "texto", r: "Parágrafo", novo: { tipo: "paragrafo", texto: "Escreva aqui." } },
+      { k: "lista", i: "lista", r: "Lista", novo: { tipo: "lista", itens: ["Item um", "Item dois"] } },
+      { k: "numerada", i: "numero", r: "Numerada", novo: { tipo: "numerada", itens: ["Primeiro", "Segundo"] } },
+      { k: "citacao", i: "citacao", r: "Citação", novo: { tipo: "citacao", texto: "Trecho citado.", autor: "Fonte" } },
+      { k: "tabela", i: "tabela", r: "Tabela", novo: { tipo: "tabela", linhas: [["Coluna", "Coluna"], ["dado", "dado"]] } },
+      { k: "codigo", i: "codigo", r: "Código", novo: { tipo: "codigo", texto: "console.log('oi')" } },
+      { k: "destaque", i: "cartao", r: "Destaque", novo: { tipo: "destaque", titulo: "Atenção", texto: "Ponto importante." } },
+      { k: "imagem", i: "imagem", r: "Imagem", novo: { tipo: "imagem", src: "", legenda: "" } },
+      { k: "divisor", i: "linha", r: "Divisor", novo: { tipo: "divisor" } },
+    ],
+  },
+
+  grade: {
+    nome: "Grade", papel: "Planilhas", cor: "#1F8FE0", icone: "tabela", modelo: "planilha",
+    trilho: [
+      { k: "linha", i: "mais", r: "Nova linha" },
+      { k: "coluna", i: "tabela", r: "Nova coluna" },
+      { k: "total", i: "numero", r: "Linha de total" },
+      { k: "grafico", i: "grafico", r: "Gráfico" },
+    ],
+  },
+};

package/studio/web/js/icones.js

@@ -0,0 +1,91 @@
+/* ==========================================================================
+   icones.js — biblioteca de ícones em SVG, sem dependência externa.
+   Traço de 24x24, herda a cor do texto. Usada na interface e nos documentos.
+   ========================================================================== */
+
+var ICONES = {
+  /* interface */
+  cursor: "M4 3l7 17 2.5-6.5L20 11z",
+  texto: "M5 6V4h14v2M12 4v16M9 20h6",
+  titulo: "M5 5v14M13 5v14M5 12h8M17 9h3v10M17 9l3-2",
+  lista: "M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01",
+  quadrado: "M4 4h16v16H4z",
+  circulo: "M12 3a9 9 0 100 18 9 9 0 000-18z",
+  triangulo: "M12 4l9 16H3z",
+  linha: "M4 20L20 4",
+  seta: "M4 12h15M14 6l6 6-6 6",
+  imagem: "M3 5h18v14H3zM3 15l5-5 4 4 3-3 6 6",
+  icone: "M12 3l2.6 5.6 6.1.8-4.5 4.2 1.2 6.1L12 16.8 6.6 19.7l1.2-6.1L3.3 9.4l6.1-.8z",
+  grafico: "M4 20V10M10 20V4M16 20v-7M22 20H2",
+  cartao: "M3 5h8v6H3zM13 5h8v6h-8zM3 13h8v6H3zM13 13h8v6h-8z",
+  numero: "M6 20V8l-2 1M12 20V4M18 20v-6l-2 1",
+  tabela: "M3 5h18v14H3zM3 10h18M9 10v9M15 10v9",
+  codigo: "M9 7l-5 5 5 5M15 7l5 5-5 5",
+  citacao: "M8 6c-2.5 0-4 2-4 4.5S5.5 15 8 15c0 3-2 4-2 4 5 0 8-3.5 8-9 0-2.5-2-4-3-4zM19 6c-2 0-3 1.5-3 4 0 5.5 3 9 8 9 0 0-2-1-2-4 2.5 0 4-2 4-4.5S21.5 6 19 6z",
+  no: "M5 8h14v8H5zM12 3v5M12 16v5",
+  conector: "M6 6a3 3 0 100 6 3 3 0 000-6zM18 12a3 3 0 100 6 3 3 0 000-6zM8.5 10.5L15.5 14",
+  video: "M3 6h13v12H3zM16 10l5-3v10l-5-3",
+  lapis: "M4 20l4-1 11-11-3-3L5 16z",
+  cor: "M12 3a9 9 0 000 18c1 0 2-.8 2-1.8 0-1.5-1.4-1.7-1.4-3 0-1 .8-1.7 1.8-1.7H16a5 5 0 005-5c0-3.6-4-6.5-9-6.5z",
+  camada: "M12 3l9 5-9 5-9-5zM3 13l9 5 9-5",
+  mais: "M12 5v14M5 12h14",
+  menos: "M5 12h14",
+  lixeira: "M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13",
+  duplicar: "M8 8h12v12H8zM4 16V4h12",
+  subir: "M12 19V5M6 11l6-6 6 6",
+  descer: "M12 5v14M6 13l6 6 6-6",
+  play: "M7 4l13 8-13 8z",
+  pausa: "M8 5h3v14H8zM13 5h3v14h-3z",
+  olho: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7zM12 9a3 3 0 100 6 3 3 0 000-6z",
+  baixar: "M12 4v11M7 11l5 5 5-5M4 20h16",
+  tela: "M3 4h18v13H3zM8 21h8M12 17v4",
+  voltar: "M4 9h11a4 4 0 010 8h-6M4 9l4-4M4 9l4 4",
+  refazer: "M20 9H9a4 4 0 000 8h6M20 9l-4-4M20 9l-4 4",
+  fechar: "M6 6l12 12M18 6L6 18",
+  check: "M4 12l5 5L20 6",
+  livro: "M4 5h7a2 2 0 012 2v12a2 2 0 00-2-2H4zM20 5h-7a2 2 0 00-2 2v12a2 2 0 012-2h7z",
+  raio2: "M13 2L4 14h6l-1 8 9-12h-6z",
+
+  /* conteúdo — para o elemento "icone" */
+  raio: "M13 2L4 14h6l-1 8 9-12h-6z",
+  alvo: "M12 3a9 9 0 100 18 9 9 0 000-18zM12 8a4 4 0 100 8 4 4 0 000-8zM12 11.5a.5.5 0 100 1 .5.5 0 000-1z",
+  foguete: "M12 3c4 2 6 6 6 10l-3 3H9l-3-3c0-4 2-8 6-10zM9 16l-3 5 4-2M15 16l3 5-4-2M12 9a1.5 1.5 0 100 3 1.5 1.5 0 000-3z",
+  escudo: "M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z",
+  relogio: "M12 3a9 9 0 100 18 9 9 0 000-18zM12 7v5l3 2",
+  usuario: "M12 4a4 4 0 100 8 4 4 0 000-8zM4 21c0-4 3.5-6 8-6s8 2 8 6",
+  coracao: "M12 20S3 14 3 8.5A4.5 4.5 0 0112 6a4.5 4.5 0 019 2.5C21 14 12 20 12 20z",
+  estrela: "M12 3l2.6 5.6 6.1.8-4.5 4.2 1.2 6.1L12 16.8 6.6 19.7l1.2-6.1L3.3 9.4l6.1-.8z",
+  nuvem: "M7 18a4 4 0 010-8 5.5 5.5 0 0110.5 1.5A3.5 3.5 0 0117 18z",
+  engrenagem: "M12 9a3 3 0 100 6 3 3 0 000-6zM19 12l2-1.5-2-3.5-2.4.8a7 7 0 00-2-1.2L14 4h-4l-.6 2.6a7 7 0 00-2 1.2L5 7l-2 3.5L5 12l-2 1.5L5 17l2.4-.8a7 7 0 002 1.2L10 20h4l.6-2.6a7 7 0 002-1.2L19 17l2-3.5z",
+  lampada: "M9 18h6M10 21h4M12 3a6 6 0 00-4 10.5c.7.8 1 1.5 1 2.5h6c0-1 .3-1.7 1-2.5A6 6 0 0012 3z",
+  cadeado: "M5 11h14v10H5zM8 11V8a4 4 0 018 0v3",
+  casa: "M4 11l8-7 8 7v9h-5v-6h-6v6H4z",
+  email: "M3 6h18v12H3zM3 7l9 6 9-6",
+  telefone: "M6 3h4l2 5-2.5 1.5a12 12 0 005 5L16 12l5 2v4a2 2 0 01-2 2C11 20 4 13 4 5a2 2 0 012-2z",
+  camera: "M4 8h4l1.5-2h5L16 8h4v11H4zM12 10.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z",
+  fogo: "M12 3s5 4 5 9a5 5 0 01-10 0c0-2 1-3 1-3s.5 2 2 2c0-3 2-5 2-8z",
+  globo: "M12 3a9 9 0 100 18 9 9 0 000-18zM3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18",
+  chave: "M14 4a5 5 0 015 5 5 5 0 01-6.5 4.8L11 16H9v2H7v2H3v-4l7.2-7.2A5 5 0 0114 4zM16 8a1 1 0 100 2 1 1 0 000-2z",
+  presente: "M3 11h18v9H3zM3 7h18v4H3zM12 7v13M12 7C10 3 6 4 7 7M12 7c2-4 6-3 5 0",
+  sino: "M12 3a6 6 0 00-6 6c0 5-2 6-2 6h16s-2-1-2-6a6 6 0 00-6-6zM10 19a2 2 0 004 0",
+  mapa: "M9 4L3 6v14l6-2 6 2 6-2V4l-6 2zM9 4v14M15 6v14",
+  dinheiro: "M12 4v16M15.5 8c0-1.4-1.6-2.2-3.5-2.2S8.5 6.7 8.5 8.3 10.4 10.5 12 11s3.5 1 3.5 2.7-1.6 2.5-3.5 2.5-3.5-.9-3.5-2.4",
+  crescimento: "M4 18l5-5 3 3 8-8M15 8h5v5",
+  pessoas: "M9 5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM2 20c0-3.5 3-5 7-5s7 1.5 7 5M17 6a3 3 0 110 6M18 20c0-2.5-.8-4-2-4.6",
+  balao: "M4 5h16v11H9l-5 4z",
+  pasta: "M3 6h6l2 3h10v10H3z",
+  play2: "M12 3a9 9 0 100 18 9 9 0 000-18zM10 8.5l6 3.5-6 3.5z",
+};
+
+function svgIcone(nome, cls) {
+  var d = ICONES[nome] || ICONES.circulo;
+  return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" ' +
+         'stroke-linecap="round" stroke-linejoin="round"' + (cls ? ' class="' + cls + '"' : "") +
+         "><path d=\"" + d + '"/></svg>';
+}
+
+function nomesIcones() {
+  return Object.keys(ICONES);
+}
+
+if (typeof module !== "undefined" && module.exports) module.exports = { ICONES: ICONES, svgIcone: svgIcone };

package/studio/web/js/midia.js

@@ -0,0 +1,157 @@
+/* ==========================================================================
+   midia.js — biblioteca de arquivos do computador (imagem, áudio, vídeo).
+
+   Midia.escolher({ tipo: "imagem" | "audio" })  →  Promise<{url, nome, tipo}>
+   Aceita upload por botão ou arrastando o arquivo para dentro da janela.
+   ========================================================================== */
+
+var Midia = (function () {
+  "use strict";
+
+  var LIMITE_MB = 60;
+
+  function el(tag, cls, html) {
+    var n = document.createElement(tag);
+    if (cls) n.className = cls;
+    if (html != null) n.innerHTML = html;
+    return n;
+  }
+
+  function kb(bytes) {
+    return bytes > 1048576 ? (bytes / 1048576).toFixed(1) + " MB"
+                           : Math.max(1, Math.round(bytes / 1024)) + " KB";
+  }
+
+  function listar() {
+    return fetch("/api/midia").then(function (r) { return r.json(); });
+  }
+
+  /* Envia um File do computador para o servidor. */
+  function enviar(arquivo) {
+    if (arquivo.size > LIMITE_MB * 1048576) {
+      return Promise.reject(new Error("arquivo acima de " + LIMITE_MB + " MB"));
+    }
+    return new Promise(function (ok, falha) {
+      var leitor = new FileReader();
+      leitor.onerror = function () { falha(new Error("não consegui ler o arquivo")); };
+      leitor.onload = function () {
+        fetch("/api/midia", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ nome: arquivo.name, dados: leitor.result }),
+        }).then(function (r) { return r.json(); })
+          .then(function (m) { m.erro ? falha(new Error(m.erro)) : ok(m); })
+          .catch(falha);
+      };
+      leitor.readAsDataURL(arquivo);
+    });
+  }
+
+  function apagar(nome) {
+    return fetch("/api/midia/" + encodeURIComponent(nome), { method: "DELETE" });
+  }
+
+  /* ------------------------------------------------------------- modal -- */
+
+  function escolher(op) {
+    op = op || {};
+    var tipo = op.tipo || "imagem";
+
+    return new Promise(function (resolver) {
+      var folha = el("div", "folha midia on");
+      folha.innerHTML =
+        '<div class="caixa">' +
+        '<div class="midia-topo">' +
+        "<h3>" + (tipo === "audio" ? "Áudio do computador" : "Imagens") + "</h3>" +
+        '<div style="flex:1"></div>' +
+        '<button class="btn" data-x="fechar">Fechar</button>' +
+        '<button class="btn primo" data-x="subir">Escolher arquivo</button>' +
+        "</div>" +
+        '<div class="solta" data-x="solta">Arraste um arquivo aqui — ou clique em ' +
+        "<b>Escolher arquivo</b>. Até " + LIMITE_MB + " MB.</div>" +
+        '<div class="midia-grade" data-x="grade"></div>' +
+        "</div>";
+      document.body.appendChild(folha);
+
+      var entrada = el("input");
+      entrada.type = "file";
+      entrada.accept = tipo === "audio" ? "audio/*" : "image/*";
+      entrada.style.display = "none";
+      folha.appendChild(entrada);
+
+      var grade = folha.querySelector('[data-x="grade"]');
+      var solta = folha.querySelector('[data-x="solta"]');
+
+      function fechar(resultado) {
+        folha.remove();
+        document.removeEventListener("dragover", pegaArrasto);
+        document.removeEventListener("drop", pegaSolta);
+        resolver(resultado || null);
+      }
+
+      function desenhar() {
+        grade.innerHTML = '<div class="vazio-midia">carregando…</div>';
+        listar().then(function (lista) {
+          var itens = lista.filter(function (m) { return m.tipo === tipo; });
+          if (!itens.length) {
+            grade.innerHTML = '<div class="vazio-midia">Nada aqui ainda. ' +
+              (tipo === "audio" ? "Suba uma música que você já tem no computador."
+                                : "Suba uma imagem para começar.") + "</div>";
+            return;
+          }
+          grade.innerHTML = "";
+          itens.forEach(function (m) {
+            var c = el("div", "midia-item");
+            c.innerHTML = (tipo === "audio"
+              ? '<div class="mini-audio">' + svgIcone("play2") + "</div>"
+              : '<div class="mini-img" style="background-image:url(\'' + m.url + '\')"></div>') +
+              '<div class="mini-nome" title="' + m.nome + '">' + m.nome + "</div>" +
+              '<div class="mini-meta">' + kb(m.bytes) + "</div>" +
+              '<button class="mini-x" title="Apagar">×</button>';
+            c.onclick = function (ev) {
+              if (ev.target.classList.contains("mini-x")) {
+                ev.stopPropagation();
+                apagar(m.nome).then(desenhar);
+                return;
+              }
+              fechar(m);
+            };
+            grade.appendChild(c);
+          });
+        });
+      }
+
+      function subir(arquivo) {
+        if (!arquivo) return;
+        solta.textContent = "enviando " + arquivo.name + "…";
+        enviar(arquivo).then(function (m) {
+          solta.textContent = "pronto: " + m.nome;
+          if (op.direto) return fechar(m);
+          desenhar();
+        }).catch(function (e) {
+          solta.textContent = "erro: " + e.message;
+        });
+      }
+
+      folha.addEventListener("click", function (ev) {
+        var acao = (ev.target.dataset || {}).x;
+        if (acao === "fechar" || ev.target === folha) fechar(null);
+        if (acao === "subir" || acao === "solta") entrada.click();
+      });
+      entrada.onchange = function () { subir(entrada.files[0]); };
+
+      function pegaArrasto(ev) { ev.preventDefault(); solta.classList.add("ativo"); }
+      function pegaSolta(ev) {
+        ev.preventDefault();
+        solta.classList.remove("ativo");
+        subir(ev.dataTransfer.files[0]);
+      }
+      document.addEventListener("dragover", pegaArrasto);
+      document.addEventListener("drop", pegaSolta);
+
+      desenhar();
+    });
+  }
+
+  return { escolher: escolher, enviar: enviar, listar: listar, apagar: apagar };
+})();