sagadeck 1.2.0

package/src/dynamics/git-sim.js

@@ -0,0 +1,200 @@
+// Simulador de Git para as dinâmicas ao vivo (duel, terminals): duas pessoas, um remoto (origin/main), um arquivo.
+// Quem escreve o slide só diz o que cada um FAZ (edita, commita, dá push, pull, resolve); o simulador calcula o
+// resto: diff, push rejeitado, fast-forward, merge automático, conflito (merge a três por linha) e o grafo.
+//
+//   base: "texto do arquivo"   people: [Ana, Beto]
+//   turns: [{ who: 1, edit: {2: "nova linha 2", 5: null}, commit: "mensagem" }, { who: 1, push: true },
+//           { who: 2, pull: true }, { who: 2, resolve: "ours" | "theirs" | "both" | {2: "linha"}, commit: "…" },
+//           { who: 1, log: true }, { who: 2, say: "texto livre" }]
+
+// linhas novas de b em relação a a (diff por subsequência comum mais longa: inserir uma linha não marca as de baixo)
+function added(a, b) {
+  const n = a.length, m = b.length, L = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) L[i][j] = a[i] === b[j] ? L[i + 1][j + 1] + 1 : Math.max(L[i + 1][j], L[i][j + 1]);
+  const out = [];
+  let i = 0, j = 0;
+  while (j < m) {
+    if (i < n && a[i] === b[j]) { i++; j++; }
+    else if (i < n && L[i + 1][j] >= L[i][j + 1]) i++;
+    else { out.push(j + 1); j++; }
+  }
+  return out;
+}
+const short = (n) => ((n * 2654435761) >>> 0).toString(16).padStart(8, "0").slice(0, 7); // hash estável e curto
+const lines = (t) => String(t ?? "").replace(/\r/g, "").replace(/\n$/, "").split("\n");
+
+export function simulateGit(spec = {}) {
+  const people = [0, 1].map((i) => {
+    const p = (spec.people || [])[i];
+    return String((typeof p === "object" ? p?.name : p) || (i ? "Pessoa B" : "Pessoa A"));
+  });
+  const commits = [];
+  const mk = (msg, author, parents, file, lane) => {
+    const c = { id: short(commits.length + 7), n: commits.length, msg: String(msg), author, parents, file: [...file], lane };
+    commits.push(c);
+    return c;
+  };
+  const root = mk(spec.initial || "primeiro commit", -1, [], lines(spec.base), "main");
+  const remote = { head: root };
+  const P = people.map((name, i) => ({ i, name, file: [...root.file], head: root, changed: new Set(), conflict: null, ahead: 0 }));
+  const ancestors = (c) => { const s = new Set(); const st = [c]; while (st.length) { const x = st.pop(); if (s.has(x)) continue; s.add(x); x.parents.forEach((q) => st.push(q)); } return s; };
+  const isAnc = (a, b) => ancestors(b).has(a); // a é ancestral de b (ou igual)
+  const base3 = (a, b) => { const A = ancestors(a); let best = null; for (const x of ancestors(b)) if (A.has(x) && (!best || x.n > best.n)) best = x; return best || root; };
+
+  // merge a três por linha (as edições do slide trocam, apagam ou acrescentam linhas: o alinhamento é pelo número)
+  function merge3(base, ours, theirs) {
+    const n = Math.max(base.length, ours.length, theirs.length);
+    const out = [], conflicts = [];
+    for (let i = 0; i < n; i++) {
+      const b = base[i], o = ours[i], t = theirs[i];
+      if (o === t) out.push({ v: o, i });
+      else if (o === b) out.push({ v: t, i, from: "theirs" });
+      else if (t === b) out.push({ v: o, i, from: "ours" });
+      else { out.push({ conflict: true, o, t, i }); conflicts.push(i + 1); }
+    }
+    return { out, conflicts };
+  }
+  const flat = (m) => m.out.flatMap((x) => (x.conflict ? [] : x.v === undefined || x.v === null ? [] : [x.v]));
+
+  const frames = [];
+  let touched = [[], []]; // linhas que mudaram neste turno, por pessoa (edição, pull, resolução)
+  const shown = (p) => (p.conflict ? p.conflict.view : p.file);
+  const state = (extra) => ({
+    people: P.map((p, i) => ({ name: p.name, file: p.conflict ? p.conflict.view : [...p.file], changed: [...(touched[i] || [])], conflict: p.conflict ? p.conflict.lines : [],
+      head: p.head.id, status: p.conflict ? "conflito" : p.changed.size ? "mudou sem commit" : aheadOf(p) ? `${aheadOf(p)} ${aheadOf(p) > 1 ? "commits" : "commit"} à frente` : behindOf(p) ? "desatualizado" : "em dia" })),
+    remote: remote.head.id,
+    heads: P.map((p) => p.head.id),
+    commits: commits.map((c) => ({ id: c.id, msg: c.msg, author: c.author, parents: c.parents.map((q) => q.id), lane: c.lane })),
+    ...extra,
+  });
+  const aheadOf = (p) => [...ancestors(p.head)].filter((c) => !ancestors(remote.head).has(c)).length;
+  const behindOf = (p) => [...ancestors(remote.head)].filter((c) => !ancestors(p.head).has(c)).length;
+  frames.push(state({ who: -1, cmd: "", out: "", text: `Os dois clonaram o repositório: ${spec.file || "arquivo"} igual para todo mundo.`, event: "start" }));
+
+  for (const [k, t] of (spec.turns || []).entries()) {
+    const who = Math.min(1, Math.max(0, (Number(t.who) || 1) - 1)), p = P[who];
+    const before = P.map((q) => [...shown(q)]);
+    let cmd = "", out = "", text = "", event = ""; // out = o que o terminal mostra; text = a explicação para a plateia
+    const edits = (map) => {
+      for (const [key, val] of Object.entries(map || {})) {
+        const i = Number(key) - 1;
+        if (!Number.isInteger(i) || i < 0) throw new Error(`turno ${k + 1}: linha "${key}" inválida (use o número da linha)`);
+        while (p.file.length <= i) p.file.push("");
+        if (val === null) p.file[i] = null; else p.file[i] = String(val);
+        p.changed.add(i + 1);
+      }
+      const kept = [];
+      p.file.forEach((l, i) => { if (l !== null) kept.push(l); });
+      if (kept.length !== p.file.length) { p.changed = new Set([...p.changed].filter((n) => n <= kept.length)); p.file = kept; }
+    };
+    if (t.edit) {
+      if (p.conflict) throw new Error(`turno ${k + 1}: ${p.name} está com conflito; use resolve: antes de editar`);
+      edits(t.edit);
+      const ls = [...p.changed].sort((a, b) => a - b);
+      text = `${p.name} mudou a ${ls.length > 1 ? "s linhas" : "linha"} ${ls.join(", ")}.`; event = "edit";
+    }
+    if (t.resolve != null) {
+      if (!p.conflict) throw new Error(`turno ${k + 1}: ${p.name} não tem conflito para resolver`);
+      const m = p.conflict.merge, r = t.resolve;
+      const merged = m.out.flatMap((x) => {
+        if (!x.conflict) return x.v == null ? [] : [x.v];
+        if (r === "ours") return x.o == null ? [] : [x.o];
+        if (r === "theirs") return x.t == null ? [] : [x.t];
+        if (r === "both") return [x.o, x.t].filter((v) => v != null);
+        const v = typeof r === "object" ? r[x.i + 1] : undefined;
+        if (v === undefined) throw new Error(`turno ${k + 1}: faltou resolver a linha ${x.i + 1} (resolve: {${x.i + 1}: "…"})`);
+        return v === null ? [] : [String(v)];
+      });
+      p.file = merged; p.changed = new Set(p.conflict.lines);
+      const theirs = p.conflict.theirs;
+      p.conflict = null; p.pendingMerge = theirs;
+      cmd = `git add ${spec.file || "arquivo"}`; text = `${p.name} resolveu o conflito: tirou os marcadores e ficou com a versão final.`; event = "resolve";
+    }
+    if (t.commit) {
+      if (p.conflict) throw new Error(`turno ${k + 1}: ${p.name} ainda está com conflito`);
+      const parents = p.pendingMerge ? [p.head, p.pendingMerge] : [p.head];
+      const c = mk(t.commit, who, parents, p.file, who === 0 ? "a" : "b");
+      p.head = c; p.pendingMerge = null; p.changed = new Set();
+      cmd = cmd ? `${cmd} && git commit -m "${t.commit}"` : `git commit -am "${t.commit}"`;
+      out = `[main ${c.id}] ${t.commit}\n 1 file changed`; event = parents.length > 1 ? "merge-commit" : "commit";
+      if (!text) text = parents.length > 1 ? `${p.name} fechou o merge com um commit que tem dois pais.` : `${p.name} guardou a mudança num commit, só na máquina dele(a).`;
+    }
+    if (t.push) {
+      cmd = "git push";
+      if (p.conflict || p.changed.size) { out = "Everything up-to-date"; text = "Nada foi enviado: a mudança ainda não virou commit."; event = "noop"; }
+      else if (isAnc(remote.head, p.head) && remote.head !== p.head) { out = `To origin\n   ${remote.head.id}..${p.head.id}  main -> main`; remote.head = p.head; text = `O remoto agora tem o que ${p.name} fez.`; event = "push"; }
+      else if (remote.head === p.head) { out = "Everything up-to-date"; event = "noop"; }
+      else { out = "! [rejected]  main -> main (fetch first)\nerror: failed to push some refs to 'origin'"; text = `Recusado: o remoto tem commits que ${p.name} não tem. Primeiro pull.`; event = "rejected"; }
+    }
+    if (t.pull) {
+      cmd = "git pull";
+      if (p.changed.size) throw new Error(`turno ${k + 1}: ${p.name} tem mudanças sem commit; faça commit antes do pull`);
+      if (isAnc(remote.head, p.head)) { out = "Already up to date."; event = "noop"; }
+      else if (isAnc(p.head, remote.head)) { out = `Updating ${p.head.id}..${remote.head.id}\nFast-forward`; text = `${p.name} só estava atrás: o Git avançou o ponteiro, sem merge.`; p.head = remote.head; p.file = [...remote.head.file]; event = "ff"; }
+      else {
+        const b = base3(p.head, remote.head), m = merge3(b.file, p.head.file, remote.head.file);
+        if (!m.conflicts.length) {
+          p.file = flat(m);
+          const c = mk(`Merge de origin/main`, who, [p.head, remote.head], p.file, who === 0 ? "a" : "b");
+          p.head = c; event = "merge"; out = `Auto-merging ${spec.file || "arquivo"}\nMerge made by the 'ort' strategy.`; text = "As mudanças não se tocam: o Git juntou sozinho, num commit de merge.";
+        } else {
+          const view = [], clines = [];
+          m.out.forEach((x) => {
+            if (!x.conflict) { if (x.v != null) view.push(x.v); return; }
+            clines.push(view.length + 1); view.push(`<<<<<<< ${p.name} (seu)`);
+            if (x.o != null) { clines.push(view.length + 1); view.push(x.o); }
+            clines.push(view.length + 1); view.push("=======");
+            if (x.t != null) { clines.push(view.length + 1); view.push(x.t); }
+            clines.push(view.length + 1); view.push(">>>>>>> origin/main");
+          });
+          p.conflict = { merge: m, view, lines: clines, theirs: remote.head };
+          out = `Auto-merging ${spec.file || "arquivo"}\nCONFLICT (content): Merge conflict in ${spec.file || "arquivo"}\nAutomatic merge failed; fix conflicts and then commit the result.`;
+          text = `Os dois mudaram a linha ${m.conflicts.join(", ")}: o Git não escolhe por você.`; event = "conflict";
+        }
+      }
+    }
+    if (t.log) { cmd = "git log --graph --oneline --all"; out = logGraph(commits, P, remote); event = event || "log"; }
+    if (t.say) text = String(t.say);
+    touched = P.map((q, i) => added(before[i], shown(q)));
+    frames.push(state({ who, cmd, out, text, event, note: t.note ? String(t.note) : "" }));
+  }
+  return { people, frames, file: spec.file || "arquivo" };
+}
+
+// saída de "git log --graph --oneline --all" do estado atual (do mais novo para o mais velho)
+export function logGraph(commits, P, remote) {
+  const tags = (c) => {
+    const t = [];
+    P.forEach((p) => { if (p.head === c) t.push(`${p.name}/HEAD`); });
+    if (remote.head === c) t.push("origin/main");
+    return t.length ? ` (${t.join(", ")})` : "";
+  };
+  return [...commits].reverse().map((c) => `${c.parents.length > 1 ? "*   " : c.lane === "b" ? "| * " : "* "}${c.id} ${c.msg}${tags(c)}`).join("\n");
+}
+
+// grafo em SVG: três trilhas (pessoa A em cima, main no meio, pessoa B embaixo), um nó por commit
+export function graphSVG(frame, people, { h = 240 } = {}) {
+  const lanes = { a: 58, main: h / 2, b: h - 58 };
+  const cs = frame.commits, gap = 170, w = Math.max(560, 120 + gap * Math.max(1, cs.length - 1)); // o grafo cresce com os commits
+  const pos = new Map(cs.map((c, i) => [c.id, { x: 60 + i * gap, y: lanes[c.lane] ?? lanes.main, c }]));
+  // commit que já está no remoto sobe para a trilha main
+  const onRemote = new Set(); const st = [frame.remote];
+  while (st.length) { const id = st.pop(); if (onRemote.has(id)) continue; onRemote.add(id); cs.find((c) => c.id === id)?.parents.forEach((q) => st.push(q)); }
+  for (const [id, p] of pos) if (onRemote.has(id)) p.y = lanes.main;
+  let g = `<text x="0" y="${lanes.a + 7}" class="gg-lane f-label">${people[0]}</text><text x="0" y="${lanes.main + 7}" class="gg-lane f-label">main</text><text x="0" y="${lanes.b + 7}" class="gg-lane f-label">${people[1]}</text>`;
+  g = g.replace(/<text x="0"/g, '<text x="-6" text-anchor="end"');
+  cs.forEach((c) => c.parents.forEach((q) => {
+    const a = pos.get(q), b = pos.get(c.id);
+    g += a.y === b.y ? `<line x1="${a.x}" y1="${a.y}" x2="${b.x}" y2="${b.y}" class="gg-edge"/>`
+      : `<path d="M${a.x} ${a.y} C${a.x + gap * 0.55} ${a.y} ${b.x - gap * 0.55} ${b.y} ${b.x} ${b.y}" class="gg-edge" fill="none"/>`;
+  }));
+  const last = cs.at(-1)?.id;
+  cs.forEach((c) => {
+    const p = pos.get(c.id), who = c.author < 0 ? "gg-root" : c.author === 0 ? "gg-a" : "gg-b";
+    g += `<g class="gg-node ${who}${c.id === last ? " gg-new" : ""}${c.parents.length > 1 ? " gg-merge" : ""}"><circle cx="${p.x}" cy="${p.y}" r="${c.parents.length > 1 ? 15 : 13}"/><text x="${p.x}" y="${p.y > h / 2 ? p.y + 40 : p.y - 24}" text-anchor="middle" class="gg-msg f-body">${esc(c.msg.length > 16 ? c.msg.slice(0, 15) + "…" : c.msg)}</text></g>`;
+  });
+  const rp = pos.get(frame.remote);
+  if (rp) g += `<g class="gg-tag"><rect x="${rp.x - 64}" y="${rp.y + 20}" width="128" height="30" rx="15"/><text x="${rp.x}" y="${rp.y + 41}" text-anchor="middle" class="f-label">origin/main</text></g>`;
+  return `<svg class="git-graph" viewBox="-110 0 ${w + 190} ${h}" preserveAspectRatio="xMinYMid meet" aria-label="Grafo de commits">${g}</svg>`;
+}
+const esc = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");

package/src/dynamics/layouts.js

@@ -0,0 +1,112 @@
+// Dinâmicas ao vivo entre duas pessoas. Cada clique da apresentação é um quadro (o mesmo mecanismo do Código
+// guiado: data-lesson + data-lesson-panel), então funciona com o controle remoto, o modo apresentador e o PDF
+// (que mostra o último quadro).
+//   duel      — Duelo de commits: dois editores, o comando da vez e o grafo crescendo (simulador em git-sim.js)
+//   terminals — dois terminais lado a lado com o comando sendo digitado (roteiro livre ou o mesmo do duelo)
+//   turns     — turnos genéricos: code review, cliente × servidor, debate, role-play, pair programming
+import { md, esc } from "../markup.js";
+import { poll } from "../elements.js";
+import { highlightCode as hlRaw } from "../code-highlight.js";
+import { resolveCodeLanguage } from "../code-language.js";
+import { simulateGit, graphSVG } from "./git-sim.js";
+
+const langOf = (file, lang) => resolveCodeLanguage(lang, file);
+// coloração das linguagens que o motor conhece; as outras saem só escapadas
+const plainLines = (src) => src.split("\n").map(esc);
+const highlightCode = (src, language) => { try { return language ? hlRaw(src, language) : plainLines(src); } catch { return plainLines(src); } };
+const initial = (name) => esc(String(name || "?").trim().charAt(0).toUpperCase() || "?");
+const personOf = (p, i) => (typeof p === "object" && p ? { name: String(p.name || `Pessoa ${i + 1}`), role: p.role ? String(p.role) : "" } : { name: String(p || (i ? "Pessoa B" : "Pessoa A")), role: "" });
+const panel = (i, inner, cls = "") => `<section class="lesson-panel dyn-frame ${cls}${i === 0 ? " active" : ""}" data-lesson-panel="${i}">${inner}</section>`;
+const counter = (i, n) => `<div class="dyn-count f-label">${String(i + 1).padStart(2, "0")} / ${String(n).padStart(2, "0")}</div>`;
+
+function codeLines(file, { changed = [], conflict = [] } = {}, language) {
+  const hl = highlightCode(file.join("\n"), language);
+  const ch = new Set(changed), cf = new Set(conflict);
+  return `<ol class="dyn-code dyn-mono">${file.map((l, i) => {
+    const marker = /^(<<<<<<<|=======|>>>>>>>)/.test(l);
+    const cls = [cf.has(i + 1) ? (marker ? "cf cf-mark" : "cf") : "", ch.has(i + 1) && !cf.has(i + 1) ? "chg" : ""].filter(Boolean).join(" ");
+    return `<li${cls ? ` class="${cls}"` : ""}><span class="ln">${i + 1}</span><span class="lc">${marker ? esc(l) : hl[i] || " "}</span></li>`;
+  }).join("")}</ol>`;
+}
+
+// ---------------------------------------------------------------------------------------------------- duel
+export function duelHTML(s, ctx, head) {
+  let sim;
+  try { sim = simulateGit(s); }
+  catch (e) { ctx?.warnings?.push(`duelo de commits: ${e.message}`); return `<div class="L-duel">${head(s)}<div class="dyn-error f-body">Roteiro do duelo com erro: ${esc(e.message)}</div></div>`; }
+  const language = langOf(s.file, s.language);
+  const frames = sim.frames.map((f) => ({ f }));
+  // aposta: uma enquete antes do primeiro pull que decide (conflito ou merge); o quadro seguinte revela
+  if (s.bet) {
+    const at = frames.findIndex(({ f }) => ["conflict", "merge", "ff"].includes(f.event));
+    if (at > 0) {
+      frames[at].reveal = frames[at].f.event === "conflict" ? "Deu conflito!" : "Sem conflito: o Git juntou sozinho.";
+      frames.splice(at, 0, { bet: true, f: frames[at - 1].f });
+    }
+  }
+  const n = frames.length;
+  const editor = (p, i, f) => `<div class="dyn-ed who-${i ? "b" : "a"}${f.who === i ? " turn" : ""}${p.status === "conflito" ? " has-conflict" : ""}">
+      <div class="dyn-ed-top"><span class="dyn-av">${initial(p.name)}</span><b class="f-heading">${esc(p.name)}</b><span class="dyn-file dyn-mono">${esc(sim.file)}</span><span class="dyn-status f-label st-${p.status.replace(/\W+/g, "-")}">${esc(p.status)}</span></div>
+      ${codeLines(p.file, p, language)}</div>`;
+  const body = frames.map(({ f, bet, reveal }, i) => {
+    if (bet) {
+      const q = typeof s.bet === "string" ? s.bet : "Vai dar conflito?";
+      const pollEl = poll({ poll: `${s.id || "duelo"}-aposta`, options: s.betOptions || ["Vai dar conflito", "O Git resolve sozinho"], hint: "Votem antes do pull" }, ctx);
+      return panel(i, `${counter(i, n)}<div class="dyn-bet"><div class="dyn-bet-q t f-display">${md(q)}</div>${pollEl}</div>`, "dyn-bet-frame");
+    }
+    const who = f.who >= 0 ? sim.people[f.who] : "";
+    const term = `<div class="dyn-term">${f.cmd ? `<div class="dyn-cmd dyn-mono"><span class="dyn-prompt">${esc(who || "$")} $</span> ${esc(f.cmd)}</div>` : ""}${f.out ? `<pre class="dyn-out dyn-mono ev-${f.event}">${esc(f.out)}</pre>` : ""}${f.text ? `<p class="dyn-say t f-body">${md(f.text)}</p>` : ""}</div>`;
+    return panel(i, `${counter(i, n)}<div class="dyn-row">${f.people.map((p, k) => editor(p, k, f)).join("")}</div>
+      <div class="dyn-bottom">${term}<div class="dyn-graph">${graphSVG(f, sim.people)}</div></div>
+      ${reveal ? `<div class="dyn-reveal t f-display ${f.event === "conflict" ? "bad" : "good"}">${esc(reveal)}</div>` : ""}${f.note ? `<div class="dyn-note t f-body">${md(f.note)}</div>` : ""}`, `ev-${f.event}`);
+  }).join("");
+  return `<div class="L-duel dyn" data-lesson="duel" data-lesson-count="${n}">${head(s)}<div class="dyn-frames">${body}</div></div>`;
+}
+
+// ---------------------------------------------------------------------------------------------- terminals
+export function terminalsHTML(s, ctx, head) {
+  let people, steps;
+  if (s.base != null && Array.isArray(s.turns)) { // mesmo roteiro do duelo: os comandos e a saída vêm do simulador
+    try {
+      const sim = simulateGit(s);
+      people = sim.people.map((name) => ({ name }));
+      steps = sim.frames.slice(1).filter((f) => f.cmd).map((f) => ({ who: f.who + 1, cmd: f.cmd, out: f.out, event: f.event }));
+    } catch (e) { ctx?.warnings?.push(`terminais: ${e.message}`); return `<div class="L-terminals">${head(s)}<div class="dyn-error f-body">Roteiro com erro: ${esc(e.message)}</div></div>`; }
+  } else {
+    people = [0, 1].map((i) => personOf((s.panes || s.people || [])[i], i));
+    steps = (s.steps || []).map((x) => (typeof x === "string" ? { who: 1, cmd: x } : x || {}));
+  }
+  const n = Math.max(1, steps.length);
+  const MAX = s.keep || 6; // comandos visíveis por terminal (os mais velhos saem por cima)
+  const body = Array.from({ length: n }, (_, i) => {
+    const pane = (p, k) => {
+      const mine = steps.slice(0, i + 1).map((x, j) => ({ ...x, j })).filter((x) => (Number(x.who) || 1) - 1 === k).slice(-MAX);
+      const rows = mine.map((x) => {
+        const last = x.j === i;
+        const cmd = String(x.cmd ?? "");
+        return `<div class="tm-entry${last ? " tm-new" : ""}"><div class="tm-line"><span class="tm-ps">${esc(p.name.toLowerCase().replace(/\s+/g, ""))}@${esc(s.host || "dev")} $</span> <span class="tm-cmd"${last ? ` style="--n:${Math.max(1, cmd.length)}"` : ""}>${esc(cmd)}</span></div>${x.out ? `<pre class="tm-out${x.event ? ` ev-${esc(x.event)}` : ""}">${esc(x.out)}</pre>` : ""}</div>`;
+      }).join("");
+      return `<div class="tm-pane who-${k ? "b" : "a"}${(Number(steps[i]?.who) || 1) - 1 === k ? " turn" : ""}"><div class="tm-bar"><i></i><i></i><i></i><b class="f-label">${esc(p.name)}${p.role ? ` · ${esc(p.role)}` : ""}</b></div><div class="tm-body dyn-mono">${rows || '<div class="tm-line tm-idle"><span class="tm-ps">$</span> <span class="tm-caret"></span></div>'}</div></div>`;
+    };
+    return panel(i, `${counter(i, n)}<div class="tm-row">${people.map(pane).join("")}</div>${steps[i]?.note ? `<div class="dyn-note t f-body">${md(steps[i].note)}</div>` : ""}`);
+  }).join("");
+  return `<div class="L-terminals dyn" data-lesson="terminals" data-lesson-count="${n}">${head(s)}<div class="dyn-frames">${body}</div></div>`;
+}
+
+// -------------------------------------------------------------------------------------------------- turns
+export function turnsHTML(s, ctx, head) {
+  const people = [0, 1].map((i) => personOf((s.people || [])[i], i));
+  const turns = (s.turns || []).map((x) => (typeof x === "string" ? { who: 1, text: x } : x || {}));
+  const n = Math.max(1, turns.length);
+  const MAX = s.keep || 4; // falas visíveis ao mesmo tempo (as mais velhas sobem e somem)
+  const bubble = (t, j, last) => {
+    const k = Math.min(1, Math.max(0, (Number(t.who) || 1) - 1));
+    const p = people[k];
+    const req = t.method || t.url ? `<div class="tn-req dyn-mono"><b>${esc(String(t.method || "GET").toUpperCase())}</b> ${esc(t.url || "")}${t.status ? ` <span class="tn-status s${String(t.status).charAt(0)}">${esc(t.status)}</span>` : ""}</div>` : "";
+    const code = t.code ? `<pre class="tn-code dyn-mono">${highlightCode(String(t.code), resolveCodeLanguage(t.language, "")).join("\n")}</pre>` : "";
+    return `<div class="tn-turn who-${k ? "b" : "a"}${last ? " tn-new" : ""}"><span class="dyn-av">${initial(p.name)}</span><div class="tn-bubble">${t.tag ? `<span class="tn-tag f-label">${esc(t.tag)}</span>` : ""}${req}${t.text ? `<div class="tn-text t f-body">${md(t.text)}</div>` : ""}${code}</div></div>`;
+  };
+  const top = `<div class="tn-cast">${people.map((p, k) => `<div class="tn-who who-${k ? "b" : "a"}"><span class="dyn-av">${initial(p.name)}</span><div><b class="f-heading">${esc(p.name)}</b>${p.role ? `<small class="f-label">${esc(p.role)}</small>` : ""}</div></div>`).join('<span class="tn-vs f-label">×</span>')}</div>`;
+  const body = Array.from({ length: n }, (_, i) => panel(i, `<div class="tn-feed">${turns.slice(Math.max(0, i + 1 - MAX), i + 1).map((t, j, arr) => bubble(t, j, j === arr.length - 1)).join("")}</div>`)).join("");
+  return `<div class="L-turns dyn" data-lesson="turns" data-lesson-count="${n}">${head(s)}${top}<div class="dyn-frames">${body}</div></div>`;
+}