primocode 7.18.0 → 8.0.1

package/studio/web/js/render.js

@@ -0,0 +1,622 @@
+/* ==========================================================================
+   render.js — desenha uma CENA (Prisma, Tela, Corte, Traço).
+   Uma cena é uma tela de largura x altura com elementos dentro.
+   Dois modos: layout nomeado (o estúdio posiciona) ou "livre" (x/y/l/a).
+   ========================================================================== */
+
+var PAPEIS = {
+  chapeu:    { classe: "chapeu" },
+  titulo:    { tamanho: 84, peso: 660, altura: 1.06 },
+  subtitulo: { tamanho: 46, peso: 620, altura: 1.14 },
+  apoio:     { tamanho: 30, peso: 400, altura: 1.45, cor: "var(--c-fraco)" },
+  corpo:     { tamanho: 25, peso: 400, altura: 1.5, classe: "corpo" },
+  legenda:   { tamanho: 18, peso: 400, altura: 1.45, cor: "var(--c-fraco)", classe: "corpo" },
+};
+
+var LAYOUTS = ["capa", "titulo", "secao", "duas-colunas", "tres-colunas",
+               "citacao", "numeros", "imagem-direita", "imagem-esquerda",
+               "centro", "livre"];
+
+function _fugir(s) {
+  return String(s == null ? "" : s)
+    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function _rico(s) {
+  return _fugir(s)
+    .replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>")
+    .replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<i>$2</i>")
+    .replace(/`([^`]+)`/g, "<code>$1</code>");
+}
+
+function _px(v) { return (typeof v === "number" ? v + "px" : v); }
+
+/* Envolve cada palavra em um span, sem tocar nas tags que já existem. */
+function _porPalavra(html) {
+  var p = 0;
+  return html.split(/(<[^>]*>)/).map(function (parte) {
+    if (parte.charAt(0) === "<") return parte;          // tag: passa direto
+    return parte.replace(/(\S+)/g, function (w) {
+      return '<span class="pal" style="--p:' + (p++) + '">' + w + "</span>";
+    });
+  }).join("");
+}
+
+/* ------------------------------------------------------------------ fundo */
+
+function aplicarFundo(no, fundo) {
+  if (!fundo) return;
+  if (typeof fundo === "string") {
+    if (/^(malha|brilho|grade|pontos|suave|vinheta)$/.test(fundo)) no.setAttribute("data-fundo", fundo);
+    else no.style.background = fundo;
+    return;
+  }
+  if (fundo.tipo === "gradiente") {
+    no.style.background = "linear-gradient(" + (fundo.angulo != null ? fundo.angulo : 160) + "deg, " +
+      (fundo.de || "#111") + ", " + (fundo.para || "#333") + ")";
+  } else if (fundo.imagem) {
+    no.style.backgroundImage = "url('" + fundo.imagem + "')";
+    no.style.backgroundSize = "cover";
+    no.style.backgroundPosition = fundo.posicao || "center";
+    if (fundo.escurecer) {
+      var v = document.createElement("div");
+      v.className = "cobertura";
+      v.style.background = "rgba(4,6,10," + fundo.escurecer + ")";
+      no.appendChild(v);
+    }
+  }
+}
+
+/* --------------------------------------------------------------- gráficos */
+
+function svgGrafico(e, l, a) {
+  var dados = (e.dados || []).map(function (d) {
+    return Array.isArray(d) ? { r: d[0], v: +d[1] || 0 } : { r: d.rotulo, v: +d.valor || 0 };
+  });
+  if (!dados.length) return "";
+  var cores = e.cores || ["var(--c-tom)", "var(--c-tom2)", "#7c9cff", "#2fbf7f", "#f472b6", "#facc15"];
+  var max = Math.max.apply(null, dados.map(function (d) { return d.v; })) || 1;
+  var tipo = e.grafico || "barras";
+  var pad = { e: 8, d: 8, t: 14, b: 42 };
+  var iw = l - pad.e - pad.d, ih = a - pad.t - pad.b;
+  var p = ['<svg viewBox="0 0 ' + l + " " + a + '" width="' + l + '" height="' + a + '">'];
+
+  if (tipo === "pizza" || tipo === "rosca") {
+    var total = dados.reduce(function (s, d) { return s + d.v; }, 0) || 1;
+    var cx = l / 2, cy = a / 2 - 8, r = Math.min(l, a) / 2 - 34, ang = -Math.PI / 2;
+    dados.forEach(function (d, i) {
+      var fim = ang + (d.v / total) * Math.PI * 2;
+      var x1 = cx + r * Math.cos(ang), y1 = cy + r * Math.sin(ang);
+      var x2 = cx + r * Math.cos(fim), y2 = cy + r * Math.sin(fim);
+      p.push('<path d="M' + cx + " " + cy + " L" + x1 + " " + y1 +
+             " A" + r + " " + r + " 0 " + (fim - ang > Math.PI ? 1 : 0) + " 1 " + x2 + " " + y2 +
+             ' Z" fill="' + cores[i % cores.length] + '"/>');
+      ang = fim;
+    });
+    if (tipo === "rosca") p.push('<circle cx="' + cx + '" cy="' + cy + '" r="' + (r * 0.58) + '" fill="var(--c-fundo)"/>');
+  } else if (tipo === "linha" || tipo === "area") {
+    var passo = dados.length > 1 ? iw / (dados.length - 1) : 0;
+    var pts = dados.map(function (d, i) {
+      return [pad.e + i * passo, pad.t + ih - (d.v / max) * ih];
+    });
+    var caminho = pts.map(function (q, i) { return (i ? "L" : "M") + q[0] + " " + q[1]; }).join(" ");
+    if (tipo === "area") {
+      p.push('<path d="' + caminho + " L" + pts[pts.length - 1][0] + " " + (pad.t + ih) +
+             " L" + pts[0][0] + " " + (pad.t + ih) + ' Z" fill="' + cores[0] + '" opacity=".18"/>');
+    }
+    p.push('<path d="' + caminho + '" fill="none" stroke="' + cores[0] + '" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>');
+    pts.forEach(function (q) { p.push('<circle cx="' + q[0] + '" cy="' + q[1] + '" r="6" fill="' + cores[0] + '"/>'); });
+  } else {
+    var larg = iw / dados.length;
+    var barra = Math.min(larg * 0.68, 130);          // barra larga demais vira bloco
+    dados.forEach(function (d, i) {
+      var h = (d.v / max) * ih;
+      var x = pad.e + i * larg + (larg - barra) / 2;
+      p.push('<rect x="' + x + '" y="' + (pad.t + ih - h) + '" width="' + barra +
+             '" height="' + Math.max(h, 2) + '" rx="7" fill="' + cores[i % cores.length] + '"/>');
+    });
+  }
+
+  if (tipo !== "pizza" && tipo !== "rosca") {
+    var larg2 = iw / dados.length;
+    dados.forEach(function (d, i) {
+      p.push('<text x="' + (pad.e + i * larg2 + larg2 / 2) + '" y="' + (a - 16) +
+             '" text-anchor="middle" fill="var(--c-fraco)" font-size="17" font-family="inherit">' +
+             _fugir(d.r) + "</text>");
+    });
+  } else {
+    dados.forEach(function (d, i) {
+      p.push('<rect x="' + (16 + i * 132) + '" y="' + (a - 26) + '" width="12" height="12" rx="3" fill="' + cores[i % cores.length] + '"/>');
+      p.push('<text x="' + (34 + i * 132) + '" y="' + (a - 15) +
+             '" fill="var(--c-fraco)" font-size="16" font-family="inherit">' + _fugir(d.r) + "</text>");
+    });
+  }
+  p.push("</svg>");
+  return p.join("");
+}
+
+/* -------------------------------------------------------------- elementos */
+
+function renderElemento(e, ctx) {
+  var no = document.createElement("div");
+  var tipo = e.tipo || "texto";
+  no.className = "el " + tipo;
+  no.dataset.tipo = tipo;
+
+  /* posição — absoluta só quando o elemento traz coordenadas */
+  var absoluto = e.x != null || e.y != null;
+  if (absoluto) {
+    no.style.position = "absolute";
+    no.style.left = _px(e.x || 0);
+    no.style.top = _px(e.y || 0);
+    if (e.l != null) no.style.width = _px(e.l);
+    if (e.a != null) {
+      // em texto a altura é piso, não gaiola: assim nada é cortado nem colide
+      var elastico = tipo === "texto" || tipo === "lista" || tipo === "citacao" || tipo === "cartoes";
+      no.style[elastico ? "minHeight" : "height"] = _px(e.a);
+    }
+  } else {
+    no.style.position = "relative";
+  }
+  if (e.rotacao) no.style.transform = "rotate(" + e.rotacao + "deg)";
+  if (e.opacidade != null) no.style.opacity = e.opacidade;
+  if (e.sombra) no.style.boxShadow = e.sombra === true ? "0 30px 70px -25px rgba(0,0,0,.6)" : e.sombra;
+  if (e.z != null) no.style.zIndex = e.z;
+
+  /* animação */
+  var an = e.anim || ctx.animPadrao;
+  if (an && an !== "nenhuma") {
+    no.setAttribute("data-an", typeof an === "string" ? an : (an.entrada || "subir"));
+    no.style.setProperty("--atraso", (typeof an === "object" && an.atraso != null ? an.atraso : ctx.i * 0.09 + 0.1));
+  }
+
+  switch (tipo) {
+    case "texto": {
+      var papel = PAPEIS[e.papel] || PAPEIS.corpo;
+      no.classList.add("txt");
+      if (papel.classe) no.classList.add(papel.classe);
+      // tamanho explícito manda; sem ele, o padrão cresce no formato vertical
+      no.style.fontSize = _px(e.tamanho || Math.round((papel.tamanho || 25) * (ctx.escalaTipo || 1)));
+      if (e.peso || papel.peso) no.style.fontWeight = e.peso || papel.peso;
+      if (papel.altura) no.style.lineHeight = papel.altura;
+      no.style.color = e.cor || papel.cor || "";
+      if (e.alinhar) { no.style.textAlign = e.alinhar; no.style.alignItems = e.alinhar === "centro" ? "center" : (e.alinhar === "direita" ? "flex-end" : "flex-start"); }
+      if (e.fonte === "mono") no.style.fontFamily = "var(--f-mono)";
+      if (e.fonte === "display") no.style.fontFamily = "var(--f-display)";
+      if (e.maiusculas) no.style.textTransform = "uppercase";
+      if (e.espacamento != null) no.style.letterSpacing = e.espacamento + "em";
+      if (e.altura != null) no.style.lineHeight = e.altura;
+      if (e.estilo) no.setAttribute("data-estilo", e.estilo);
+
+      var corpoTexto = _rico(e.texto);
+
+      // marcador e fita precisam envolver cada linha para o fundo acompanhar
+      if (e.estilo === "marcador" || e.estilo === "fita") {
+        corpoTexto = corpoTexto.split("\n").map(function (l) {
+          return l.trim() ? '<span class="linha">' + l + "</span>" : "";
+        }).join("\n");
+      }
+
+      // palavra a palavra: cada palavra vira um span com atraso próprio
+      var animAtual = e.anim || ctx.animPadrao;
+      if (animAtual === "palavra") corpoTexto = _porPalavra(corpoTexto);
+
+      no.innerHTML = corpoTexto;
+      break;
+    }
+
+    case "lista": {
+      if (e.numerada) no.classList.add("numerada");
+      if (e.marcador) no.setAttribute("data-marcador", e.marcador);
+      (e.itens || []).forEach(function (it, k) {
+        var d = document.createElement("div");
+        d.className = "item";
+        if (e.tamanho) d.style.fontSize = _px(e.tamanho);
+        d.innerHTML = _rico(it);
+        if (e.revelar) {
+          d.setAttribute("data-an", "subir");
+          d.style.setProperty("--atraso", (e.atrasoBase != null ? e.atrasoBase : 0.2) + k * (e.intervalo || 0.14));
+        }
+        no.appendChild(d);
+      });
+      break;
+    }
+
+    case "cartoes": {
+      var n = (e.itens || []).length;
+      no.style.gridTemplateColumns = "repeat(" + Math.min(n || 1, e.colunas || (n > 4 ? 3 : n)) + ", 1fr)";
+      (e.itens || []).forEach(function (it) {
+        var c = document.createElement("div");
+        c.className = "cartao";
+        var t = typeof it === "string" ? it.split("|") : [it.titulo, it.texto];
+        c.innerHTML = "<b>" + _rico((t[0] || "").trim()) + "</b>" +
+                      (t[1] ? "<span>" + _rico(String(t[1]).trim()) + "</span>" : "");
+        no.appendChild(c);
+      });
+      break;
+    }
+
+    case "numeros": {
+      var m = (e.itens || []).length;
+      no.style.gridTemplateColumns = "repeat(" + Math.min(m || 1, e.colunas || m) + ", 1fr)";
+      if (e.tamanho) no.style.setProperty("--tam-num", _px(e.tamanho));
+      (e.itens || []).forEach(function (it) {
+        var c = document.createElement("div");
+        c.className = "num";
+        var t = typeof it === "string" ? it.split("|") : [it.valor, it.rotulo];
+        var valor = (t[0] || "").toString().trim();
+        var b = document.createElement("b");
+        b.textContent = valor;
+        // conta do zero até o número quando a cena entra (o player dispara)
+        if (e.contar) {
+          var alvo = parseFloat(valor.replace(/[^\d,.-]/g, "").replace(",", "."));
+          if (!isNaN(alvo)) {
+            b.setAttribute("data-contar", alvo);
+            b.setAttribute("data-molde", valor);
+          }
+        }
+        c.appendChild(b);
+        var s = document.createElement("span");
+        s.textContent = (t[1] || "").toString().trim();
+        c.appendChild(s);
+        no.appendChild(c);
+      });
+      break;
+    }
+
+    case "tabela": {
+      var linhas = e.linhas || [];
+      var h = "<table>";
+      linhas.forEach(function (l, i) {
+        h += "<tr>";
+        l.forEach(function (c) { h += i === 0 ? "<th>" + _fugir(c) + "</th>" : "<td>" + _rico(c) + "</td>"; });
+        h += "</tr>";
+      });
+      no.innerHTML = h + "</table>";
+      break;
+    }
+
+    case "codigo":
+      no.textContent = e.texto || "";
+      if (e.tamanho) no.style.fontSize = _px(e.tamanho);
+      break;
+
+    case "citacao":
+      no.innerHTML = '<div class="aspas">“' + _rico(e.texto) + '”</div>' +
+                     (e.autor ? '<div class="autor">' + _fugir(e.autor) + "</div>" : "");
+      break;
+
+    case "forma": {
+      var f = e.forma || "retangulo";
+      no.style.background = e.preenchimento || "var(--c-tom)";
+      if (e.borda) no.style.border = (e.borda.largura || 2) + "px solid " + (e.borda.cor || "var(--c-linha)");
+      if (f === "circulo") no.style.borderRadius = "999px";
+      else no.style.borderRadius = _px(e.raio != null ? e.raio : 0);
+      if (f === "triangulo") { no.style.clipPath = "polygon(50% 0,100% 100%,0 100%)"; }
+      if (f === "linha") { no.style.height = _px(e.espessura || 3); no.style.borderRadius = "999px"; }
+      if (f === "seta") {
+        no.style.background = "none";
+        no.innerHTML = '<svg viewBox="0 0 100 24" preserveAspectRatio="none" style="width:100%;height:100%">' +
+          '<path d="M0 12h88M78 4l10 8-10 8" fill="none" stroke="' + (e.preenchimento || "var(--c-tom)") +
+          '" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></svg>';
+      }
+      break;
+    }
+
+    case "imagem": {
+      var img = document.createElement("img");
+      img.src = e.src || "";
+      img.alt = e.alt || "";
+      img.style.objectFit = e.ajuste === "conter" ? "contain" : "cover";
+      if (e.posicao) img.style.objectPosition = e.posicao;
+      if (e.filtro) img.style.filter = e.filtro === "cinza" ? "grayscale(1)"
+        : e.filtro === "sepia" ? "sepia(.7)"
+        : e.filtro === "contraste" ? "contrast(1.35) saturate(1.15)"
+        : e.filtro === "desbotado" ? "saturate(.55) brightness(1.08)"
+        : e.filtro;
+      no.style.borderRadius = _px(e.raio != null ? e.raio : 18);
+      if (e.borda) no.style.border = (e.borda.largura || 2) + "px solid " + (e.borda.cor || "var(--c-linha)");
+      if (e.movimento) {
+        no.setAttribute("data-mov", e.movimento);
+        if (e.duracaoMov) img.style.animationDuration = e.duracaoMov + "s";
+      }
+      no.appendChild(img);
+      break;
+    }
+
+    case "icone": {
+      var t = e.tamanho || 90;
+      no.style.width = _px(e.l || t);
+      no.style.height = _px(e.a || t);
+      no.style.color = e.cor || "var(--c-tom)";
+      no.innerHTML = svgIcone(e.nome || "estrela");
+      var s = no.querySelector("svg");
+      if (s) s.setAttribute("stroke-width", e.traco || 1.5);
+      break;
+    }
+
+    case "grafico": {
+      var gl = e.l || 900, ga = e.a || 480;
+      if (!absoluto) { no.style.width = _px(gl); no.style.height = _px(ga); }
+      no.innerHTML = svgGrafico(e, gl, ga);
+      break;
+    }
+
+    case "no": {
+      if (e.destaque) no.classList.add("destaque");
+      if (e.formato === "circulo") no.classList.add("circulo");
+      if (e.cor) no.style.background = e.cor;
+      if (e.corTexto) no.style.color = e.corTexto;
+      if (e.tamanho) no.style.fontSize = _px(e.tamanho);
+      no.innerHTML = _rico(e.texto);
+      break;
+    }
+
+    default:
+      no.innerHTML = _rico(e.texto || "");
+  }
+
+  return no;
+}
+
+/* ------------------------------------------------------- posição automática */
+
+/* Dá x/y aos nós a partir dos conectores. O autor manda só o grafo. */
+function posicionarAuto(elementos, W, H, modo) {
+  var nos = elementos.filter(function (e) { return e.id && e.tipo !== "conector"; });
+  if (!nos.length) return;
+
+  var links = elementos.filter(function (e) { return e.tipo === "conector" && e.de && e.para; });
+  var porId = {};
+  nos.forEach(function (n) { porId[n.id] = n; });
+
+  var entra = {}, sai = {};
+  nos.forEach(function (n) { entra[n.id] = []; sai[n.id] = []; });
+  links.forEach(function (c) {
+    if (!porId[c.de] || !porId[c.para]) return;
+    sai[c.de].push(c.para);
+    entra[c.para].push(c.de);
+  });
+
+  /* nível = maior distância desde uma raiz, para a seta nunca voltar */
+  var nivel = {}, visto = {};
+  var fila = nos.filter(function (n) { return !entra[n.id].length; }).map(function (n) { return n.id; });
+  if (!fila.length) fila = [nos[0].id];
+  fila.forEach(function (id) { nivel[id] = 0; });
+
+  var guarda = 0;
+  while (fila.length && guarda++ < 4000) {
+    var id = fila.shift();
+    (sai[id] || []).forEach(function (destino) {
+      var novo = nivel[id] + 1;
+      if (nivel[destino] == null || novo > nivel[destino]) {
+        nivel[destino] = novo;
+        fila.push(destino);
+      }
+    });
+  }
+  nos.forEach(function (n) { if (nivel[n.id] == null) nivel[n.id] = 0; });
+
+  var colunas = {};
+  nos.forEach(function (n) {
+    (colunas[nivel[n.id]] = colunas[nivel[n.id]] || []).push(n);
+  });
+  var chaves = Object.keys(colunas).map(Number).sort(function (a, b) { return a - b; });
+
+  var vertical = modo === "vertical" || modo === "arvore";
+  var margem = Math.round(W * 0.07);
+
+  // tamanho padrão coerente com o espaço disponível
+  var maxPorColuna = Math.max.apply(null, chaves.map(function (k) { return colunas[k].length; }));
+  var lPadrao = vertical
+    ? Math.min(340, Math.floor((W - margem * 2 - (maxPorColuna - 1) * 60) / maxPorColuna))
+    : Math.min(340, Math.floor((W - margem * 2 - (chaves.length - 1) * 90) / Math.max(1, chaves.length)));
+  var aPadrao = vertical
+    ? Math.min(150, Math.floor((H - margem * 2 - (chaves.length - 1) * 70) / Math.max(1, chaves.length)))
+    : 150;
+  lPadrao = Math.max(150, lPadrao);
+  aPadrao = Math.max(90, aPadrao);
+
+  var passoEixo = vertical
+    ? (H - margem * 2 - aPadrao) / Math.max(1, chaves.length - 1)
+    : (W - margem * 2 - lPadrao) / Math.max(1, chaves.length - 1);
+
+  chaves.forEach(function (k, iCol) {
+    var grupo = colunas[k];
+    var vao = vertical ? W : H;
+    var tam = vertical ? lPadrao : aPadrao;
+    var espaco = (vao - margem * 2 - tam) / Math.max(1, grupo.length - 1);
+
+    grupo.forEach(function (n, i) {
+      if (n.l == null) n.l = lPadrao;
+      if (n.a == null) n.a = aPadrao;
+      var eixo = margem + (chaves.length > 1 ? passoEixo * iCol : (vao === W ? 0 : 0));
+      var cruz = grupo.length > 1 ? margem + espaco * i
+                                  : Math.round((vao - (vertical ? n.l : n.a)) / 2);
+      if (vertical) {
+        if (n.x == null) n.x = Math.round(cruz);
+        if (n.y == null) n.y = Math.round(margem + (chaves.length > 1 ? passoEixo * iCol : (H - n.a) / 2));
+      } else {
+        if (n.x == null) n.x = Math.round(margem + (chaves.length > 1 ? passoEixo * iCol : (W - n.l) / 2));
+        if (n.y == null) n.y = Math.round(cruz);
+      }
+    });
+  });
+}
+
+/* -------------------------------------------------------------- conectores */
+
+function desenharConectores(cena, elementos, W, H) {
+  var links = elementos.filter(function (e) { return e.tipo === "conector"; });
+  if (!links.length) return;
+
+  var caixas = {};
+  elementos.forEach(function (e) {
+    if (e.id) caixas[e.id] = { x: e.x || 0, y: e.y || 0, l: e.l || 200, a: e.a || 100 };
+  });
+
+  var ns = "http://www.w3.org/2000/svg";
+  var svg = document.createElementNS(ns, "svg");
+  svg.setAttribute("class", "conectores");
+  svg.setAttribute("viewBox", "0 0 " + W + " " + H);
+
+  var def = document.createElementNS(ns, "defs");
+  def.innerHTML = '<marker id="pta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">' +
+                  '<path d="M0 0 L10 5 L0 10 z" fill="var(--c-fraco)"/></marker>';
+  svg.appendChild(def);
+
+  links.forEach(function (c) {
+    var a = caixas[c.de], b = caixas[c.para];
+    if (!a || !b) return;
+    var ac = { x: a.x + a.l / 2, y: a.y + a.a / 2 }, bc = { x: b.x + b.l / 2, y: b.y + b.a / 2 };
+    var horizontal = Math.abs(bc.x - ac.x) >= Math.abs(bc.y - ac.y);
+    var p1 = horizontal
+      ? { x: bc.x > ac.x ? a.x + a.l : a.x, y: ac.y }
+      : { x: ac.x, y: bc.y > ac.y ? a.y + a.a : a.y };
+    var p2 = horizontal
+      ? { x: bc.x > ac.x ? b.x : b.x + b.l, y: bc.y }
+      : { x: bc.x, y: bc.y > ac.y ? b.y : b.y + b.a };
+
+    var d;
+    if (c.estilo === "reta") {
+      d = "M" + p1.x + " " + p1.y + " L" + p2.x + " " + p2.y;
+    } else if (c.estilo === "cotovelo") {
+      d = horizontal
+        ? "M" + p1.x + " " + p1.y + " H" + (p1.x + p2.x) / 2 + " V" + p2.y + " H" + p2.x
+        : "M" + p1.x + " " + p1.y + " V" + (p1.y + p2.y) / 2 + " H" + p2.x + " V" + p2.y;
+    } else {
+      d = horizontal
+        ? "M" + p1.x + " " + p1.y + " C" + (p1.x + p2.x) / 2 + " " + p1.y + " " + (p1.x + p2.x) / 2 + " " + p2.y + " " + p2.x + " " + p2.y
+        : "M" + p1.x + " " + p1.y + " C" + p1.x + " " + (p1.y + p2.y) / 2 + " " + p2.x + " " + (p1.y + p2.y) / 2 + " " + p2.x + " " + p2.y;
+    }
+
+    var path = document.createElementNS(ns, "path");
+    path.setAttribute("d", d);
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", c.cor || "var(--c-fraco)");
+    path.setAttribute("stroke-width", c.espessura || 3);
+    if (c.tracejado) path.setAttribute("stroke-dasharray", "10 8");
+    if (c.seta !== false) path.setAttribute("marker-end", "url(#pta)");
+    svg.appendChild(path);
+
+    if (c.texto) {
+      var tx = document.createElementNS(ns, "text");
+      tx.setAttribute("x", (p1.x + p2.x) / 2);
+      tx.setAttribute("y", (p1.y + p2.y) / 2 - 12);
+      tx.setAttribute("text-anchor", "middle");
+      tx.setAttribute("fill", "var(--c-fraco)");
+      tx.setAttribute("font-size", "22");
+      tx.textContent = c.texto;
+      svg.appendChild(tx);
+    }
+  });
+
+  cena.appendChild(svg);
+}
+
+/* ------------------------------------------------------------------ cena  */
+
+function renderCena(cena, doc, op) {
+  op = op || {};
+  cena = cena || {};
+  var W = doc.largura || 1920, H = doc.altura || 1080;
+
+  var no = document.createElement("div");
+  no.className = "cena" + (op.animar ? " animar" : "");
+  no.style.width = W + "px";
+  no.style.height = H + "px";
+  no.setAttribute("data-tema", cena.tema || doc.tema || "meia-noite");
+  if (cena.acabamento || doc.acabamento) no.setAttribute("data-acabamento", cena.acabamento || doc.acabamento);
+  if (op.animar && (cena.transicao || doc.transicao)) {
+    no.setAttribute("data-transicao", cena.transicao || doc.transicao);
+  }
+  if (cena.tom) no.style.setProperty("--c-tom", cena.tom);
+  if (cena.tom2) no.style.setProperty("--c-tom2", cena.tom2);
+  aplicarFundo(no, cena.fundo);
+
+  var layout = cena.layout || (op.layoutPadrao || "titulo");
+  var elementos = (cena.elementos || []).slice();
+  var margem = Math.round(W * 0.068);
+
+  var fluxo = document.createElement("div");
+  fluxo.className = "fluxo";
+  fluxo.setAttribute("data-layout", layout);
+  fluxo.style.padding = margem + "px " + Math.round(W * 0.075) + "px";
+  no.appendChild(fluxo);
+
+  // tela vertical pede tipografia maior: os padrões são calibrados em 1920x1080
+  var escalaTipo = H > W ? 1.35 : 1;
+  no.style.setProperty("--esc", escalaTipo);
+  var ctx = { i: 0, escalaTipo: escalaTipo, animPadrao: op.animar ? (cena.anim || "subir") : null };
+
+  if (layout === "livre") {
+    fluxo.style.padding = "0";
+    if (cena.auto) posicionarAuto(elementos, W, H, cena.auto);
+    elementos.forEach(function (e) {
+      if (e.tipo === "conector") return;
+      ctx.i++;
+      var el = renderElemento(e, ctx);
+      el.style.position = "absolute";
+      if (e.x == null) el.style.left = "0px";
+      if (e.y == null) el.style.top = "0px";
+      fluxo.appendChild(el);
+    });
+    desenharConectores(no, elementos, W, H);
+    return no;
+  }
+
+  /* layouts de fluxo — cabeçalho em cima, corpo distribuído */
+  var cabecalho = [], corpo = [], flutuantes = [], imagem = null;
+  elementos.forEach(function (e) {
+    if (e.tipo === "conector") return;
+    if (e.x != null || e.y != null) { flutuantes.push(e); return; }
+    if ((layout === "imagem-direita" || layout === "imagem-esquerda") && e.tipo === "imagem" && !imagem) { imagem = e; return; }
+    if (e.papel === "chapeu" || e.papel === "titulo") cabecalho.push(e);
+    else corpo.push(e);
+  });
+
+  function solta(lista, alvo) {
+    lista.forEach(function (e) { ctx.i++; alvo.appendChild(renderElemento(e, ctx)); });
+  }
+
+  if (layout === "imagem-direita" || layout === "imagem-esquerda") {
+    fluxo.style.padding = "0";
+    var lado = document.createElement("div");
+    lado.className = "lado-texto";
+    lado.style.padding = margem + "px " + Math.round(W * 0.055) + "px";
+    solta(cabecalho, lado); solta(corpo, lado);
+    var box = document.createElement("div");
+    box.className = "lado-imagem";
+    if (imagem) {
+      var im = renderElemento({ tipo: "imagem", src: imagem.src, ajuste: imagem.ajuste, raio: 0 }, ctx);
+      im.style.position = "absolute";
+      im.style.inset = "0";
+      box.appendChild(im);
+    }
+    if (layout === "imagem-esquerda") { fluxo.appendChild(box); fluxo.appendChild(lado); }
+    else { fluxo.appendChild(lado); fluxo.appendChild(box); }
+  } else if ((layout === "duas-colunas" || layout === "tres-colunas") && corpo.length > 1) {
+    solta(cabecalho, fluxo);
+    var cols = document.createElement("div");
+    cols.className = "colunas";
+    cols.style.gridTemplateColumns = "repeat(" + (layout === "duas-colunas" ? 2 : 3) + ", 1fr)";
+    solta(corpo, cols);
+    fluxo.appendChild(cols);
+  } else {
+    // um bloco só (cartoes, numeros…) já se distribui sozinho: não engaiolar
+    solta(cabecalho, fluxo);
+    solta(corpo, fluxo);
+  }
+
+  flutuantes.forEach(function (e) {
+    ctx.i++;
+    var el = renderElemento(e, ctx);
+    el.style.position = "absolute";
+    no.appendChild(el);
+  });
+
+  desenharConectores(no, elementos, W, H);
+  return no;
+}
+
+if (typeof module !== "undefined" && module.exports) module.exports = { renderCena: renderCena };