sagadeck 1.2.0

package/src/studio/public/merge-decks.js

@@ -0,0 +1,155 @@
+// Junção a três do deck, para nada se perder quando a pessoa mexe enquanto a IA pensa.
+//   base = o deck quando o pedido foi para a IA · meu = o que a pessoa tem agora · ia = o que a IA devolveu
+// Regras: o que só a IA mudou entra; o que só a pessoa mudou fica; se os dois mudaram a MESMA coisa, vale a da
+// pessoa (e o conflito é avisado). Com uid (identidade persistente do slide), os slides são casados pela identidade e
+// a junção é campo a campo: a IA muda o título, a pessoa move uma imagem do mesmo slide, as duas coisas ficam; os
+// ajustes visuais (visualEdits) juntam objeto a objeto. Sem uid (deck antigo), casa pelo conteúdo, como antes.
+// Serve ao Studio (navegador) e ao servidor (Node): globalThis.SagadeckMerge.
+(function (root) {
+  const eq = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+  const isObj = (v) => v && typeof v === "object" && !Array.isArray(v);
+
+  // casamento monotônico (LCS) entre duas listas de slides iguais: devolve Map(índice em a -> índice em b)
+  function match(a, b) {
+    const n = a.length, m = b.length, ka = a.map((x) => JSON.stringify(x)), kb = b.map((x) => JSON.stringify(x));
+    const 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] = ka[i] === kb[j] ? L[i + 1][j + 1] + 1 : Math.max(L[i + 1][j], L[i][j + 1]);
+    const map = new Map();
+    for (let i = 0, j = 0; i < n && j < m;) {
+      if (ka[i] === kb[j]) { map.set(i, j); i++; j++; } else if (L[i + 1][j] >= L[i][j + 1]) i++; else j++;
+    }
+    return map;
+  }
+
+  // campo a campo; objetos de ajuste (visualEdits e cada objeto dentro) juntam por chave
+  const DEEP = new Set(["visualEdits"]);
+  function mergeFields(b, m, a, deep, conflict) {
+    const out = {};
+    for (const k of new Set([...Object.keys(b || {}), ...Object.keys(m || {}), ...Object.keys(a || {})])) {
+      const bv = b?.[k], mv = m?.[k], av = a?.[k];
+      let v;
+      if (eq(bv, mv)) v = av;
+      else if (eq(bv, av) || eq(mv, av)) v = mv;
+      else if (deep && isObj(bv) && isObj(mv) && isObj(av)) v = mergeFields(bv, mv, av, deep > 1 ? deep - 1 : 0, conflict);
+      else if (!deep && DEEP.has(k) && isObj(mv) && isObj(av)) v = mergeFields(isObj(bv) ? bv : {}, mv, av, 2, conflict);
+      else { v = mv; conflict(); }
+      if (v !== undefined) out[k] = v;
+    }
+    return out;
+  }
+
+  // um lado sem uid (deck recém-gerado, página que ainda não recarregou): o slide herda o uid do mesmo slide do
+  // outro lado (casado pelo conteúdo; listas do mesmo tamanho, pela posição). Sem isso, o uid parece uma mudança
+  // da pessoa e a mudança da IA se perde.
+  const strip = (s) => { if (!isObj(s) || !("uid" in s)) return s; const { uid, ...r } = s; return r; };
+  function adopt(target, source) {
+    if (!target.some((s) => isObj(s) && !s.uid) || !source.some((s) => s?.uid)) return target;
+    const map = match(target.map(strip), source.map(strip));
+    const used = new Set(target.map((s) => s?.uid).filter(Boolean));
+    const taken = new Set(map.values());
+    return target.map((s, i) => {
+      if (!isObj(s) || s.uid) return s;
+      const j = map.has(i) ? map.get(i) : target.length === source.length && !taken.has(i) ? i : -1;
+      const u = j >= 0 ? source[j]?.uid : null;
+      if (!u || used.has(u)) return s;
+      used.add(u);
+      return { ...s, uid: u };
+    });
+  }
+
+  function mergeByUid(bs, ms, as, conflicts) {
+    const B = new Map(bs.map((s, i) => [s.uid, { s, i }])), M = new Map(ms.map((s) => [s.uid, s])), A = new Map(as.filter((s) => s?.uid).map((s) => [s.uid, s]));
+    const merged = (uid) => {
+      const b = B.get(uid);
+      let hit = false;
+      const s = mergeFields(b.s, M.get(uid), A.get(uid), 0, () => { hit = true; });
+      if (hit) conflicts.push(b.i);
+      return s;
+    };
+    const inBoth = (u) => B.has(u);
+    const userOrder = ms.map((s) => s.uid).filter(inBoth), baseOrder = bs.map((s) => s.uid).filter((u) => M.has(u));
+    const userReordered = !eq(userOrder, baseOrder);
+    const out = [];
+    const placed = new Set();
+    const push = (s) => { out.push(s); if (s?.uid) placed.add(s.uid); };
+    if (!userReordered) {
+      // a ordem é a da IA (ela pode ter inserido, apagado e reordenado)
+      for (const s of as) {
+        if (!s?.uid || !B.has(s.uid)) { push(s); continue; }   // slide novo da IA
+        if (!M.has(s.uid)) continue;                            // a pessoa apagou
+        push(merged(s.uid));
+      }
+      // a IA apagou um slide que a pessoa mudou: fica o da pessoa (conflito), no lugar em que estava
+      bs.forEach((b, i) => {
+        if (A.has(b.uid) || !M.has(b.uid) || eq(b, M.get(b.uid))) return;
+        const prev = bs.slice(0, i).reverse().find((x) => placed.has(x.uid));
+        const at = prev ? out.findIndex((x) => x.uid === prev.uid) + 1 : 0;
+        out.splice(at, 0, M.get(b.uid)); placed.add(b.uid); conflicts.push(i);
+      });
+    } else {
+      // a pessoa reorganizou: vale a ordem dela, com o conteúdo junto campo a campo
+      for (const s of ms) {
+        if (!B.has(s.uid)) { push(s); continue; }                // slide novo da pessoa
+        if (!A.has(s.uid)) { if (!eq(B.get(s.uid).s, s)) { push(s); conflicts.push(B.get(s.uid).i); } continue; } // a IA apagou
+        push(merged(s.uid));
+      }
+      // slides novos da IA: depois do mesmo vizinho em que ela pôs
+      as.forEach((s, j) => {
+        if (s?.uid && B.has(s.uid)) return;
+        const prev = as.slice(0, j).reverse().find((x) => x?.uid && placed.has(x.uid));
+        const at = prev ? out.findIndex((x) => x.uid === prev.uid) + 1 : out.length;
+        out.splice(at, 0, s); if (s?.uid) placed.add(s.uid);
+      });
+    }
+    // slides novos da pessoa (quando a ordem é a da IA): depois do vizinho de antes
+    if (!userReordered) ms.forEach((s, j) => {
+      if (B.has(s.uid) || placed.has(s.uid)) return;
+      const prev = ms.slice(0, j).reverse().find((x) => placed.has(x.uid));
+      const at = prev ? out.findIndex((x) => x.uid === prev.uid) + 1 : 0;
+      out.splice(at, 0, s); placed.add(s.uid);
+    });
+    return out;
+  }
+
+  function mergeDecks(base, mine, ai) {
+    if (eq(base, mine)) return { deck: ai, conflicts: [], kept: false };
+    const deck = {};
+    const keys = new Set([...Object.keys(base || {}), ...Object.keys(mine || {}), ...Object.keys(ai || {})]);
+    keys.delete("slides");
+    for (const k of keys) {
+      const v = k.startsWith("_") || !eq(base[k], mine[k]) ? mine[k] : ai[k];
+      if (v !== undefined) deck[k] = v;
+    }
+    let bs = base.slides || [], ms = mine.slides || [], as = ai.slides || [];
+    bs = adopt(bs, ms); ms = adopt(ms, bs); bs = adopt(bs, as); as = adopt(as, bs);
+    const conflicts = [];
+    let kept = false;
+    const withUid = (list) => list.every((s) => s && typeof s.uid === "string" && s.uid);
+    if (eq(bs, ms)) deck.slides = as;                       // a pessoa não mexeu nos slides
+    else if (eq(bs, as)) deck.slides = ms;                  // a IA não mexeu nos slides
+    else if (withUid(bs) && withUid(ms)) deck.slides = mergeByUid(bs, ms, as, conflicts);
+    else if (ms.length === bs.length) {                     // a pessoa editou slides no lugar
+      if (as.length === bs.length) {
+        deck.slides = bs.map((b, i) => {
+          const userChanged = !eq(b, ms[i]), aiChanged = !eq(b, as[i]);
+          if (userChanged && aiChanged && !eq(ms[i], as[i])) conflicts.push(i);
+          return userChanged ? ms[i] : as[i];
+        });
+      } else {                                              // a IA inseriu/removeu: casa pelo conteúdo
+        const map = match(bs, as);
+        deck.slides = as.slice();
+        bs.forEach((b, i) => {
+          if (eq(b, ms[i])) return;
+          if (map.has(i)) deck.slides[map.get(i)] = ms[i];
+          else conflicts.push(i);                           // a IA mudou ou apagou um slide que a pessoa também mudou
+        });
+      }
+    } else {                                                // a pessoa reorganizou os slides enquanto isso: fica a dela
+      deck.slides = ms;
+      kept = true;
+    }
+    return { deck, conflicts, kept };
+  }
+
+  root.SagadeckMerge = { mergeDecks };
+})(typeof globalThis !== "undefined" ? globalThis : window);

package/src/studio/public/review-ui.js

@@ -0,0 +1,100 @@
+// Revisão das mudanças (review: { status, note, original, pair }): o selo na miniatura, a faixa no slide (Ver original,
+// Aceitar, Desfazer) e a lista Revisar › Mudanças. Saiu de app.js; o app passa o que ela usa (create(ctx)).
+(function () {
+  function create(ctx) {
+    const { state, showToast, renderThumbnails, renderCurrentSlide, trackDeck, hydrateIcons, plainTitle } = ctx;
+    // ------------------------------------------------------------------ revisão (review: { status, note, original })
+    const reviewImage = (slide) => {
+      const n = slide?.review?.original;
+      if (slide?.review?.image) return slide.review.image;
+      return n ? `original/slide-${String(n).padStart(2, "0")}.png` : null;
+    };
+    const reviewCount = () => (state.deck?.slides || []).filter((s) => s.review?.status).length;
+    // marca de revisão: novo, alterado, pendente (proposta ao lado do original), revisar (conferir o desenho)
+    const REVIEW_KIND = {
+      novo: { cls: "new", icon: "plus", tag: "novo", title: "Slide novo", reject: "Tira este slide" },
+      alterado: { cls: "changed", icon: "pencil", tag: "alterado", title: "Alterado", reject: "Volta este slide ao original" },
+      pendente: { cls: "pending", icon: "git-compare", tag: "pendente", title: "Proposta pendente", reject: "Tira a proposta (o original, logo antes, fica)", accept: "Fica a proposta; o original ao lado sai" },
+      revisar: { cls: "check", icon: "scan-eye", tag: "revisar", title: "Conferir o desenho", reject: "Volta este slide ao original" },
+    };
+    const reviewKind = (rv) => REVIEW_KIND[rv?.status] || REVIEW_KIND.alterado;
+    function syncReviewBadge() {
+      const b = document.getElementById("review-badge");
+      if (!b) return;
+      const n = reviewCount();
+      b.textContent = n; b.classList.toggle("clean", !n);
+    }
+    function renderReviewBar(slide, idx) {
+      const bar = document.getElementById("review-bar"), orig = document.getElementById("review-original");
+      syncReviewBadge();
+      if (!bar) return;
+      const rv = slide?.review;
+      orig.classList.add("hidden");
+      if (!rv?.status) { bar.classList.add("hidden"); bar.innerHTML = ""; return; }
+      const img = reviewImage(slide);
+      const k = reviewKind(rv);
+      bar.className = `review-bar rv-${k.cls}`;
+      bar.innerHTML = `<i class="ic" data-ic="${k.icon}"></i><b>${k.title}${rv.status !== "novo" && rv.original ? ` (${rv.status === "pendente" ? "para o" : "era o"} ${rv.original})` : ""}</b><span class="rb-note"></span>
+        ${img ? '<button type="button" class="btn btn-sm" data-rv="orig" title="Mostra o slide original por cima (clique de novo para voltar)"><i class="ic" data-ic="eye"></i> Ver original</button>' : ""}
+        <button type="button" class="btn btn-sm" data-rv="reject" title="${k.reject}"><i class="ic" data-ic="rotate-ccw"></i> Desfazer</button>
+        <button type="button" class="btn btn-primary btn-sm" data-rv="accept" title="${k.accept || "Fica assim; a marca sai"}"><i class="ic" data-ic="check"></i> Aceitar</button>`;
+      bar.querySelector(".rb-note").textContent = rv.note || "";
+      hydrateIcons(bar);
+      // a foto do original só carrega quando a pessoa pede (e pode não existir: importado sem PowerPoint)
+      bar.querySelector('[data-rv="orig"]')?.addEventListener("click", async (e) => {
+        const btn = e.currentTarget, im = orig.querySelector("img");
+        if (!orig.classList.contains("hidden")) { orig.classList.add("hidden"); btn.classList.remove("active"); return; }
+        const url = `api/project/file?path=${encodeURIComponent(img)}`;
+        if (im.dataset.src !== url) {
+          const ok = await fetch(url, { method: "HEAD" }).then((r) => r.ok).catch(() => false);
+          if (!ok) return showToast("Não há foto deste slide do original (a importação foi feita sem PowerPoint ou LibreOffice).");
+          im.src = url; im.dataset.src = url;
+        }
+        orig.classList.remove("hidden"); btn.classList.add("active");
+      });
+      bar.querySelector('[data-rv="accept"]').onclick = () => reviewAction("accept", idx);
+      bar.querySelector('[data-rv="reject"]').onclick = () => reviewAction("reject", idx);
+    }
+    async function reviewAction(action, idx) {
+      try {
+        const r = await fetch("api/review", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action, idx }) });
+        const j = await r.json();
+        if (!r.ok || j.error) throw new Error(j.error || `HTTP ${r.status}`);
+        state.deck = j.spec;
+        trackDeck(action === "accept" ? "Aceitar mudança" : action === "acceptAll" ? "Aceitar todas as mudanças" : "Desfazer mudança da revisão");
+        if (state.currentSlideIndex >= state.deck.slides.length) state.currentSlideIndex = state.deck.slides.length - 1;
+        renderThumbnails(); await renderCurrentSlide();
+        document.getElementById("review-dialog")?.dispatchEvent(new Event("refresh"));
+      } catch (e) { showToast(e.message); }
+    }
+    function openReviewList() {
+      let dlg = document.getElementById("review-dialog");
+      const fill = () => {
+        const list = (state.deck?.slides || []).map((s, i) => ({ s, i })).filter(({ s }) => s.review?.status);
+        dlg.innerHTML = `<header><b>Mudanças para validar</b><span class="rv-count">${list.length}</span><span class="grow"></span>${list.length ? '<button type="button" class="btn btn-sm" data-all>Aceitar todas</button>' : ""}<button type="button" class="btn btn-sm" data-close title="Fechar"><i class="ic" data-ic="x"></i></button></header>
+          <div class="rv-list">${list.length ? list.map(({ s, i }) => `<div class="rv-item" data-i="${i}"><span class="thumb-review rv-${reviewKind(s.review).cls}">${reviewKind(s.review).tag}</span><b class="rv-num">${i + 1}</b><span class="rv-text"><span class="rv-title"></span><span class="rv-note"></span></span><button type="button" class="btn btn-sm" data-go>Ver</button><button type="button" class="btn btn-sm" data-reject>Desfazer</button><button type="button" class="btn btn-primary btn-sm" data-accept>Aceitar</button></div>`).join("") : '<div class="rv-empty">Nada para validar: todas as mudanças foram aceitas.</div>'}</div>`;
+        dlg.querySelectorAll(".rv-item").forEach((row) => {
+          const i = +row.dataset.i, s = state.deck.slides[i];
+          row.querySelector(".rv-title").textContent = plainTitle(s, i);
+          row.querySelector(".rv-note").textContent = s.review.note || "";
+          row.querySelector("[data-go]").onclick = () => { state.currentSlideIndex = i; renderThumbnails(); renderCurrentSlide(); };
+          row.querySelector("[data-accept]").onclick = () => reviewAction("accept", i);
+          row.querySelector("[data-reject]").onclick = () => reviewAction("reject", i);
+        });
+        dlg.querySelector("[data-all]")?.addEventListener("click", () => reviewAction("acceptAll"));
+        dlg.querySelector("[data-close]").onclick = () => dlg.close();
+        hydrateIcons(dlg);
+      };
+      if (!dlg) {
+        dlg = document.createElement("dialog");
+        dlg.id = "review-dialog"; dlg.className = "review-dialog";
+        document.body.append(dlg);
+        dlg.addEventListener("refresh", () => fill());
+      }
+      fill();
+      if (!dlg.open) dlg.showModal();
+    }
+    return { reviewKind, renderReviewBar, openReviewList, syncReviewBadge };
+  }
+  window.SagaReview = { create };
+})();

package/src/studio/public/screenshot-editor.js

@@ -0,0 +1,140 @@
+// Edição visual sobre a imagem original. Só aplica alterações ao confirmar.
+(function () {
+  "use strict";
+  window.ScreenshotEditor = { open };
+  function open(slide = {}, file) {
+    return new Promise(resolve => {
+      const draft = JSON.parse(JSON.stringify(slide));
+      let spots = draft.hotspots || [], selected = spots.length ? 0 : -1, mode = "point", image = draft.image || "", drag, loading = false;
+      const previous = document.activeElement;
+      const dlg = document.createElement("dialog");
+      dlg.className = "shot-dialog";
+      dlg.setAttribute("aria-labelledby", "shot-title");
+      dlg.innerHTML = `<header><div><small>SCREENSHOT INTERATIVO</small><h2 id="shot-title">Mostre exatamente onde olhar.</h2></div><button data-close aria-label="Fechar"><i class="ic" data-ic="x"></i></button></header>
+        <div class="shot-tools"><button data-file>Escolher imagem</button><span class="shot-divider"></span><button data-mode="point" aria-pressed="true"><i class="ic" data-ic="crosshair"></i> Ponto</button><button data-mode="area" aria-pressed="false"><i class="ic" data-ic="square-dashed"></i> Área</button><span class="shot-hint">Clique para marcar. Arraste um ponto para reposicionar.</span></div>
+        <div class="shot-work"><div class="shot-stage"><div class="shot-empty"><b>Cole seu screenshot aqui</b><span>Ctrl+V, arraste ou escolha uma imagem</span><small>PNG, JPEG ou WebP · até 8 MB</small></div><div class="shot-image-wrap" hidden><img alt="Screenshot para marcar"><div class="shot-marks"></div></div></div>
+        <aside><label>Título da cena<input data-title placeholder="Ex.: Configure seu workflow" maxlength="160"></label><label>Legenda da imagem<input data-caption placeholder="Opcional" maxlength="300"></label><div class="shot-steps-head"><b>Passos da explicação</b><span data-count>0</span></div><div class="shot-list"></div><div class="shot-fields" hidden><label>Destaque<input data-label maxlength="120" placeholder="Ex.: Clique em Executar"></label><label>Explicação<textarea data-text rows="3" placeholder="O que a pessoa precisa saber?"></textarea></label><div class="shot-order"><button data-up aria-label="Mover passo para cima"><i class="ic" data-ic="arrow-up"></i></button><button data-down aria-label="Mover passo para baixo"><i class="ic" data-ic="arrow-down"></i></button><button data-delete>Remover passo</button></div></div><p class="shot-tip">Na aula, um destaque por vez. No PDF, todos numerados com suas explicações.</p></aside></div>
+        <footer><span class="shot-status" role="status"></span><button data-cancel>Cancelar</button><button data-apply class="shot-primary">Usar screenshot</button></footer><input data-input type="file" accept="image/png,image/jpeg,image/webp" hidden>`;
+      document.body.appendChild(dlg);
+      // ícones desenhados (pacote do Studio), nunca caractere unicode
+      dlg.querySelectorAll(".ic[data-ic]").forEach((el) => { const svg = (window.UI_ICONS || {})[el.dataset.ic]; if (svg) el.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${svg}</svg>`; });
+      const $ = s => dlg.querySelector(s);
+      const img = $("img"), wrap = $(".shot-image-wrap"), stage = $(".shot-stage"), marks = $(".shot-marks");
+      $("[data-title]").value = draft.title || "";
+      $("[data-caption]").value = draft.caption || "";
+      const status = text => { $(".shot-status").textContent = text; };
+      function finish(value) { observer.disconnect(); dlg.close(); dlg.remove(); previous?.focus(); resolve(value); }
+      $("[data-close]").onclick = $("[data-cancel]").onclick = () => finish(null);
+      dlg.addEventListener("cancel", e => { e.preventDefault(); finish(null); });
+      dlg.addEventListener("keydown", e => {
+        e.stopPropagation();
+        if (!["Delete", "Backspace"].includes(e.key) || e.isComposing || e.ctrlKey || e.metaKey || e.altKey) return;
+        if (e.target.closest("input, textarea, select, [contenteditable]")) return;
+        e.preventDefault();
+        removeSelected();
+      });
+      function fit() {
+        if (!img.naturalWidth) return;
+        const factor = Math.min((stage.clientWidth - 32) / img.naturalWidth, (stage.clientHeight - 32) / img.naturalHeight);
+        wrap.style.width = Math.max(1, img.naturalWidth * factor) + "px";
+        wrap.style.height = Math.max(1, img.naturalHeight * factor) + "px";
+      }
+      const observer = new ResizeObserver(fit); observer.observe(stage);
+      img.onload = () => { loading = false; wrap.hidden = false; $(".shot-empty").hidden = true; fit(); paint(); status("Imagem pronta. Marque os pontos importantes."); };
+      img.onerror = () => { loading = false; wrap.hidden = true; $(".shot-empty").hidden = false; status("Não foi possível abrir a imagem. Escolha o arquivo do screenshot."); };
+      async function read(file) {
+        if (!file) return;
+        if (!/^image\/(png|jpeg|webp)$/.test(file.type)) return status("Escolha uma imagem PNG, JPEG ou WebP.");
+        if (file.size > 8 * 1024 * 1024) return status("Essa imagem passa de 8 MB. Salve uma versão menor.");
+        if (image && spots.length && !window.confirm("Trocar a imagem remove os destaques atuais. Continuar?")) return;
+        loading = true;
+        status("Abrindo imagem…");
+        const reader = new FileReader();
+        reader.onerror = () => { loading = false; status("Não foi possível ler esse arquivo."); };
+        reader.onload = () => { image = reader.result; spots = []; selected = -1; img.src = image; };
+        reader.readAsDataURL(file);
+      }
+      $("[data-file]").onclick = () => $("[data-input]").click();
+      $("[data-input]").onchange = e => { read(e.target.files[0]); e.target.value = ""; };
+      dlg.addEventListener("paste", e => {
+        const item = [...(e.clipboardData?.items || [])].find(x => x.type.startsWith("image/"));
+        if (item) { e.preventDefault(); e.stopPropagation(); read(item.getAsFile()); }
+      });
+      dlg.addEventListener("dragover", e => { e.preventDefault(); });
+      dlg.addEventListener("drop", e => { e.preventDefault(); e.stopPropagation(); read(e.dataTransfer.files[0]); });
+      dlg.querySelectorAll("[data-mode]").forEach(b => b.onclick = () => {
+        mode = b.dataset.mode;
+        dlg.querySelectorAll("[data-mode]").forEach(x => x.setAttribute("aria-pressed", String(x === b)));
+        $(".shot-hint").textContent = mode === "point" ? "Clique para marcar. Arraste um ponto para reposicionar." : "Arraste para contornar a área importante.";
+      });
+      function paint() {
+        // redesenhar troca os botões dos destaques: quem estava com o foco continua com ele (senão, a imagem terminando
+        // de carregar no meio da edição "roubava" o foco e as setas do teclado paravam de mover o destaque)
+        const hadFocus = marks.contains(document.activeElement) ? +document.activeElement.dataset.index : -1;
+        marks.replaceChildren(); $(".shot-list").replaceChildren();
+        spots.forEach((p, i) => {
+          const mark = document.createElement("button"); mark.type = "button";
+          mark.className = `shot-mark ${p.kind === "point" ? "point" : "area"} ${selected === i ? "active" : ""}`;
+          mark.dataset.index = i; mark.textContent = i + 1; mark.setAttribute("aria-label", `Destaque ${i + 1}`);
+          Object.assign(mark.style, { left: `${p.x}%`, top: `${p.y}%`, width: p.kind === "point" ? "32px" : `${p.width}%`, height: p.kind === "point" ? "32px" : `${p.height}%` });
+          mark.onclick = e => { e.stopPropagation(); selected = i; paint(); marks.children[i]?.focus(); };
+          mark.onkeydown = e => {
+            const delta = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[e.key];
+            if (!delta) return;
+            e.preventDefault(); p.x = Math.max(0, Math.min(100 - (p.kind === "point" ? 0 : p.width), p.x + delta[0])); p.y = Math.max(0, Math.min(100 - (p.kind === "point" ? 0 : p.height), p.y + delta[1])); paint(); marks.children[i].focus();
+          };
+          marks.appendChild(mark);
+          const row = document.createElement("button"); row.type = "button"; row.className = "shot-step" + (selected === i ? " active" : ""); row.textContent = `${i + 1}. ${p.title || "Sem legenda"}`; row.onclick = () => { selected = i; paint(); }; $(".shot-list").appendChild(row);
+        });
+        $("[data-count]").textContent = spots.length;
+        const p = spots[selected]; $(".shot-fields").hidden = !p;
+        if (p) { $("[data-label]").value = p.title || ""; $("[data-text]").value = p.text || ""; }
+        $("[data-up]").disabled = selected <= 0; $("[data-down]").disabled = selected < 0 || selected >= spots.length - 1;
+        if (hadFocus >= 0) marks.children[hadFocus]?.focus();
+      }
+      function coords(e) { const r = wrap.getBoundingClientRect(); return { x: Math.max(0, Math.min(100, (e.clientX - r.left) / r.width * 100)), y: Math.max(0, Math.min(100, (e.clientY - r.top) / r.height * 100)) }; }
+      wrap.onpointerdown = e => {
+        if (e.button !== 0) return;
+        e.preventDefault(); const pos = coords(e), target = e.target.closest("[data-index]");
+        if (target) { selected = +target.dataset.index; drag = { start: pos, index: selected, original: { ...spots[selected] } }; }
+        else if (spots.length >= 8) return status("Até 8 destaques por cena. Para mais passos, use outra cena.");
+        else { drag = { start: pos, index: spots.length, fresh: true }; spots.push({ kind: mode, x: pos.x, y: pos.y, width: 4, height: 4, title: `Passo ${spots.length + 1}`, text: "" }); selected = spots.length - 1; }
+        wrap.setPointerCapture(e.pointerId); paint();
+      };
+      wrap.onpointermove = e => {
+        if (!drag) return;
+        const pos = coords(e), p = spots[drag.index];
+        if (drag.fresh && mode === "area") { p.x = Math.min(pos.x, drag.start.x); p.y = Math.min(pos.y, drag.start.y); p.width = Math.max(2, Math.abs(pos.x - drag.start.x)); p.height = Math.max(2, Math.abs(pos.y - drag.start.y)); }
+        else if (!drag.fresh) { p.x = Math.max(0, Math.min(100 - (p.kind === "point" ? 0 : p.width), drag.original.x + pos.x - drag.start.x)); p.y = Math.max(0, Math.min(100 - (p.kind === "point" ? 0 : p.height), drag.original.y + pos.y - drag.start.y)); }
+        paint();
+      };
+      wrap.onpointerup = e => { if (drag) { const p = spots[drag.index]; if (p.kind !== "point") { p.x = Math.min(p.x, 96); p.y = Math.min(p.y, 96); p.width = Math.max(4, Math.min(p.width, 100 - p.x)); p.height = Math.max(4, Math.min(p.height, 100 - p.y)); } drag = null; wrap.releasePointerCapture(e.pointerId); paint(); marks.children[selected]?.focus(); } };
+      wrap.onpointercancel = () => { drag = null; };
+      $("[data-label]").oninput = e => { if (spots[selected]) { spots[selected].title = e.target.value; $(".shot-list").children[selected].textContent = `${selected + 1}. ${e.target.value || "Sem legenda"}`; } };
+      $("[data-text]").oninput = e => { if (spots[selected]) spots[selected].text = e.target.value; };
+      function removeSelected() {
+        if (selected < 0 || selected >= spots.length || drag) return;
+        spots.splice(selected, 1); selected = Math.min(selected, spots.length - 1); paint();
+        (marks.children[selected] || $("[data-mode='point']")).focus();
+        status("Destaque removido. Clique em Usar screenshot para confirmar ou Cancelar para descartar.");
+      }
+      $("[data-delete]").onclick = removeSelected;
+      $("[data-delete]").title = "Excluir destaque selecionado (Delete ou Backspace)";
+      for (const [sel, delta] of [["[data-up]", -1], ["[data-down]", 1]]) $(sel).onclick = () => { const to = selected + delta; if (to < 0 || to >= spots.length) return; [spots[selected], spots[to]] = [spots[to], spots[selected]]; selected = to; paint(); };
+      // Reabrir para editar recarrega a imagem: clicar em "Usar screenshot" nesse meio-tempo espera ela terminar (antes
+      // recusava com "Escolha uma imagem válida" e a edição se perdia sem aviso claro)
+      const loaded = () => new Promise((done) => { const t = setInterval(() => { if (!loading) { clearInterval(t); done(); } }, 40); });
+      $("[data-apply]").onclick = async () => {
+        if (loading) {
+          const b = $("[data-apply]"); b.disabled = true; status("Terminando de carregar a imagem…");
+          await loaded(); b.disabled = false;
+        }
+        if (!img.naturalWidth || !image) return status("Escolha uma imagem válida primeiro.");
+        const result = { ...draft, layout: spots.length ? "spotlight" : "image", fit: "contain", title: $("[data-title]").value.trim(), caption: $("[data-caption]").value.trim(), image, hotspots: spots };
+        delete result.figure; finish(result);
+      };
+      dlg.showModal(); paint();
+      if (file) read(file); else if (image) { loading = true; img.src = image; }
+    });
+  }
+})();

package/src/studio/public/share-ui.js

@@ -0,0 +1,72 @@
+// Arquivo › Compartilhar link (só leitura): cria, copia e revoga links para ver a apresentação aberta
+// (src/studio/share-routes.js). Independente do app.js: só usa a API e a janela #modal-share do index.html.
+(function () {
+  const $ = (id) => document.getElementById(id);
+  const icon = (name) => `<i class="ic" data-ic="${name}"><svg viewBox="0 0 24 24" aria-hidden="true">${(window.UI_ICONS || {})[name] || ""}</svg></i>`;
+  const absolute = (rel) => new URL(rel, location.href.replace(/[?#].*$/, "").replace(/\/(editor|biblioteca)\/?$/, "/")).href;
+  let multiuser = false;
+
+  async function copy(text, btn) {
+    try { await navigator.clipboard.writeText(text); }
+    catch { // http na rede (sem área de transferência do navegador): seleciona para o Ctrl+C
+      const input = btn.closest("li")?.querySelector("input");
+      input?.select(); document.execCommand?.("copy");
+    }
+    btn.classList.add("done"); btn.title = "Copiado";
+    setTimeout(() => { btn.classList.remove("done"); btn.title = "Copiar o link"; }, 1600);
+  }
+
+  function render(links) {
+    const list = $("share-list");
+    list.innerHTML = "";
+    for (const l of links) {
+      const url = absolute(l.path);
+      const li = document.createElement("li");
+      li.className = "share-item";
+      li.dataset.token = l.token;
+      const who = !multiuser ? "Quem alcança este Studio" : l.publico ? "Qualquer pessoa com o link" : "Só quem entra no portal";
+      li.innerHTML = `<span class="share-kind" title="${who}${l.notas ? " · com as notas" : ""}">${icon(!multiuser || !l.publico ? "lock" : "globe")}</span>
+        <input class="form-control share-url" readonly value="${url.replace(/"/g, "&quot;")}" aria-label="Link">
+        <button class="icon-btn share-copy" title="Copiar o link" aria-label="Copiar o link">${icon("copy")}</button>
+        <a class="icon-btn share-open" href="${url.replace(/"/g, "&quot;")}" target="_blank" rel="noopener noreferrer" title="Abrir como a pessoa vai ver" aria-label="Abrir">${icon("eye")}</a>
+        <button class="icon-btn share-revoke" title="Revogar: o link para de funcionar na hora" aria-label="Revogar">${icon("trash-2")}</button>`;
+      li.querySelector(".share-copy").onclick = (e) => copy(url, e.currentTarget);
+      li.querySelector(".share-url").onfocus = (e) => e.target.select();
+      li.querySelector(".share-revoke").onclick = async () => {
+        const r = await (await fetch("api/share/revoke", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ token: l.token }) })).json();
+        render(r.links || []);
+      };
+      list.appendChild(li);
+    }
+  }
+
+  async function open() {
+    const r = await (await fetch("api/share")).json(); // antes de mostrar: sem piscar a escolha de quem vê
+    multiuser = !!r.multiuser;
+    $("share-who").hidden = !multiuser; // no Studio local não há portal: o link abre para quem alcança o Studio
+    $("share-create").disabled = !r.saved;
+    $("share-create").title = r.saved ? $("share-create").dataset.hint || "" : "Salve a apresentação na biblioteca antes de compartilhar";
+    render(r.links || []);
+    $("modal-share").classList.remove("hidden");
+  }
+
+  async function create() {
+    const publico = multiuser && document.querySelector('input[name="share-who"]:checked')?.value === "publico";
+    const res = await fetch("api/share", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ publico, notas: $("share-notas").checked }) });
+    const r = await res.json();
+    if (!res.ok) { $("share-create").title = r.error || ""; return; }
+    render(r.links || []);
+    const first = [...$("share-list").children].find((li) => li.dataset.token === r.link.token);
+    first?.querySelector(".share-url")?.select();
+  }
+
+  function init() {
+    if (!$("menu-share") || !$("modal-share")) return;
+    $("menu-share").addEventListener("click", (e) => { e.preventDefault(); open(); });
+    $("share-close").onclick = () => $("modal-share").classList.add("hidden");
+    $("modal-share").addEventListener("click", (e) => { if (e.target === e.currentTarget) e.currentTarget.classList.add("hidden"); });
+    document.addEventListener("keydown", (e) => { if (e.key === "Escape" && !$("modal-share").classList.contains("hidden")) $("modal-share").classList.add("hidden"); });
+    $("share-create").onclick = create;
+  }
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init); else init();
+})();

package/src/studio/public/slide-clipboard.js

@@ -0,0 +1,23 @@
+window.SagaSlideClipboard = function ({ state, showToast, trackDeck, syncDeckToServer, renderThumbnails, renderCurrentSlide }) {
+  async function copyCurrentSlide() {
+    try {
+      const r = await fetch('api/slides/copy', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ slide:state.deck.slides[state.currentSlideIndex], expectFile:state.file }) });
+      const data = await r.json(); if(!r.ok || data.error) throw Error(data.error || r.status);
+      localStorage.setItem('sagadeck-slide-clipboard', data.token);
+      await navigator.clipboard?.writeText('sagadeck-slide:'+data.token).catch(()=>{});
+      showToast('Slide copiado. Abra outra apresentação e clique em Colar.');
+    } catch(e) { showToast(e.message,6000); }
+  }
+  async function pasteCopiedSlide() {
+    try {
+      const { token } = await (await fetch('api/slides/clipboard')).json();
+      if(!token) throw Error('Copie um slide primeiro.');
+      const r = await fetch('api/slides/paste', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({token,expectFile:state.file}) });
+      const data = await r.json(); if(!r.ok || data.error) throw Error(data.error || r.status);
+      const at = state.currentSlideIndex+1; state.deck.slides.splice(at,0,data.slide); state.currentSlideIndex=at;
+      trackDeck('Slide colado'); await syncDeckToServer(); renderThumbnails(); await renderCurrentSlide();
+      showToast('Slide colado com seus arquivos.');
+    } catch(e) { showToast(e.message,6000); }
+  }
+  return { copyCurrentSlide, pasteCopiedSlide };
+};