sagadeck 1.4.0 → 1.6.0

package/src/studio/public/chat.js

@@ -451,9 +451,79 @@ window.SagaChat = function ({ state, dom, escHtml, hydrateIcons, showToast, open
     dom.chatMessages.scrollTop = dom.chatMessages.scrollHeight;
     return msgDiv;
   }
+  // Leitura crítica do material anexado (botão do chat): o servidor lê o documento como um revisor da área e devolve
+  // inconsistências, achados escondidos, perguntas prováveis e slides que representam mal o material, cada item com
+  // trecho conferido. Nada muda nos slides; vira uma mensagem da conversa com opções para aplicar.
+  async function runCritique() {
+    if (chatJob) return;
+    appendChatMessage("user", "Leitura crítica do material");
+    const job = chatJob = { file: state.file, id: crypto.randomUUID(), controller: new AbortController() };
+    job.stop = () => job.controller.abort();
+    const work = createProgressBubble("Lendo o material com olho crítico…");
+    try {
+      const data = await streamAI("api/ai/critique", { spec: state.deck, requestId: job.id }, (ev) => work.update(ev), job.controller.signal);
+      state.chatHistory.push({ role: "user", text: "Leitura crítica do material" });
+      state.chatHistory.push({ role: "assistant", text: data.reply + (data.options?.length ? `\n(opções: ${data.options.join(" | ")})` : ""), talk: true });
+      await saveChatHistory();
+      work.done();
+      // com os pontos estruturados, a bolha traz o resumo e cada ponto vira um cartão (o texto inteiro fica no histórico)
+      const msg = appendChatMessage("ai", data.critique?.itens?.length ? data.critique.summary : data.reply, data.actions || []);
+      msg.classList.add("bs");
+      if (data.critique?.itens?.length) renderCritiqueItems(msg, data.critique);
+      const tag = document.createElement("div");
+      tag.className = "bs-tag";
+      tag.innerHTML = '<i class="ic" data-ic="scan-search"></i> Leitura crítica — nada mudou nos slides'; hydrateIcons(tag);
+      msg.querySelector(".ai-content").prepend(tag);
+      renderChatOptions(msg, data.options);
+      updateBrainstormApply();
+    } catch (e) {
+      work.done();
+      appendChatMessage("ai", `A leitura crítica não saiu: ${e.message}`);
+    } finally { chatJob = null; }
+  }
+  // Cada ponto da leitura crítica como cartão: o slide a que ele se liga (clique leva até lá), Aplicar (pede à IA só
+  // aquele ponto, mirando aquele slide; a autoria decide se vai ao slide ou às notes) e Ignorar (gravado: o ponto deixa
+  // de acompanhar os pedidos).
+  const CRIT_LABEL = { destaque: "Achado", inconsistencia: "Inconsistência", slide: "Slide a rever", pergunta: "Pergunta provável", limitacao: "Limitação", forte: "Ponto forte" };
+  function goToSlide(n) {
+    if (!(n >= 1 && n <= state.deck.slides.length)) return;
+    state.currentSlideIndex = n - 1;
+    renderThumbnails(); renderCurrentSlide();
+  }
+  async function markCritique(id, status) {
+    try { await fetch("api/ai/critique/item", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id, status }) }); } catch { /* fica só na tela */ }
+  }
+  function renderCritiqueItems(msg, critique) {
+    const list = document.createElement("div");
+    list.className = "crit-list";
+    for (const it of critique.itens) {
+      const card = document.createElement("div");
+      card.className = `crit-item crit-${it.tipo}`;
+      card.dataset.id = it.id;
+      card.innerHTML = `<div class="crit-head"><span class="crit-kind"></span>${it.slide ? `<button type="button" class="crit-slide" title="Ir ao slide ${it.slide}">Slide ${it.slide}</button>` : ""}</div><b class="crit-title"></b><div class="crit-text"></div>${it.trecho ? '<blockquote class="crit-quote"></blockquote>' : ""}<div class="crit-actions"><button type="button" class="bs-option crit-apply"><i class="ic" data-ic="check"></i> Aplicar${it.slide ? ` no slide ${it.slide}` : ""}</button><button type="button" class="bs-option crit-ignore"><i class="ic" data-ic="x"></i> Ignorar</button></div>`;
+      card.querySelector(".crit-kind").textContent = CRIT_LABEL[it.tipo] || it.tipo;
+      card.querySelector(".crit-title").textContent = it.titulo;
+      card.querySelector(".crit-text").textContent = `${it.texto}${it.onde ? ` (${it.onde})` : ""}`;
+      if (it.trecho) card.querySelector(".crit-quote").textContent = `"${it.trecho}"`;
+      const done = (label) => { card.classList.add("crit-done"); card.querySelector(".crit-actions").innerHTML = `<span class="crit-status">${label}</span>`; };
+      card.querySelector(".crit-slide")?.addEventListener("click", () => goToSlide(it.slide));
+      card.querySelector(".crit-apply").onclick = () => {
+        if (chatJob) { showToast("Espere a IA terminar o pedido atual.", 3000); return; }
+        goToSlide(it.slide);
+        done(it.slide ? `Aplicado no slide ${it.slide}` : "Aplicado");
+        markCritique(it.id, "aplicado");
+        dom.chatInput.value = `Aplique este ponto da leitura crítica${it.slide ? ` no slide ${it.slide}` : ", no slide em que ele se encaixa"}: ${it.titulo}. ${it.texto}${it.trecho ? ` (trecho do material: "${it.trecho}")` : ""}. Siga a autoria da apresentação: achado do material pode ir para o slide; crítica, inconsistência e pergunta vão para as notes ("Prepare-se: …"), salvo se a apresentação for livre.`;
+        handleChatSubmit();
+      };
+      card.querySelector(".crit-ignore").onclick = () => { done("Ignorado"); markCritique(it.id, "ignorado"); };
+      list.append(card);
+    }
+    hydrateIcons(list);
+    msg.querySelector(".ai-content").append(list);
+  }
   // Bolha de progresso do chat e de outros fluxos (transformação usa a mesma).
   const createProgressBubble = window.SagaChatProgress({ dom, appendChatMessage, hydrateIcons, getChatJob });
-  const api = { getChatJob, handleChatSubmit, loadChatHistory, saveChatHistory, appendChatMessage,
+  const api = { getChatJob, handleChatSubmit, runCritique, loadChatHistory, saveChatHistory, appendChatMessage,
     createProgressBubble, commandEvent, updateBrainstormApply, renderVariants, applyBrainstorm,
     renderChatOptions, clearChatAttachments, renderChatAttachments, addChatImage, addChatDoc,
     addChatFile, autoGrowChat, commandCard };

package/src/studio/public/header-footer.js

@@ -0,0 +1,140 @@
+// Cabeçalho e rodapé do deck: modelos prontos, campos com variáveis ({autor}, {data:…}, {n}) e prévia do slide atual.
+// Saiu do app.js pela trava de tamanho dos monolitos; o comportamento é o mesmo.
+// Fábrica no molde de slide-select.js: recebe o estado e os ajudantes, devolve a API.
+window.SagaHeaderFooter = function ({ state, fitRendered, syncDeckToServer, renderCurrentSlide, renderThumbnails, showToast }) {
+  const HF_PRESETS = [
+    { id: "padrao", name: "Padrão", desc: "Título e número", footer: null, header: null },
+    { id: "autor", name: "Autor e evento", desc: "Autor · evento e 3 / 20", footer: { left: "{autor} · {evento}", right: "{n} / {total}" }, header: null },
+    { id: "evento", name: "Evento e data", desc: "Evento, data e número", footer: { left: "{evento}", center: "{data:DD MMM AAAA}", right: "{pagina}" }, header: null },
+    { id: "corp", name: "Corporativo", desc: "Área e Confidencial em cima; título, data e página embaixo",
+      header: { left: "{depto}", right: "Confidencial" }, footer: { left: "{titulo}", center: "{data:MM/AAAA}", right: "{n} / {total}" } },
+    { id: "numero", name: "Só o número", desc: "Número discreto no canto", footer: { right: "{n}" }, header: null },
+    { id: "nenhum", name: "Nenhum", desc: "Slides limpos", footer: false, header: null },
+  ];
+  const HF_TOKENS = [["{titulo}", "Título"], ["{autor}", "Autor"], ["{evento}", "Evento"], ["{depto}", "Departamento"], ["{data:DD/MM/AAAA}", "Data"],
+    ["{data:DD MMM AAAA}", "Data por extenso"], ["{pagina}", "Página (01)"], ["{n}", "Página (1)"], ["{total}", "Total"]];
+  const HF_SLOTS = ["header.left", "header.center", "header.right", "footer.left", "footer.center", "footer.right"];
+  const hfModal = () => document.getElementById("modal-hf");
+  let hfLastInput = null;
+  let hfTimer = null;
+
+  // footer/header do deck -> valores dos 6 campos (o padrão sem footer = título + número)
+  function hfSlotsFrom(v, kind, deck) {
+    if (v === false) return { left: "", center: "", right: "" };
+    if (v == null) return kind === "footer" ? { left: "{titulo}", center: "", right: "{pagina}" } : { left: "", center: "", right: "" };
+    if (typeof v === "string") return { left: v, center: "", right: "{pagina}" };
+    return { left: v.left || "", center: v.center || "", right: v.right || "" };
+  }
+
+  function hfFill(deckLike) {
+    const m = hfModal();
+    for (const k of ["author", "event", "department", "date"]) m.querySelector(`[data-deck="${k}"]`).value = deckLike[k] || "";
+    for (const kind of ["header", "footer"]) {
+      const v = hfSlotsFrom(deckLike[kind], kind, deckLike);
+      for (const pos of ["left", "center", "right"]) m.querySelector(`[data-slot="${kind}.${pos}"]`).value = v[pos];
+    }
+  }
+
+  // o que os campos do modal significam como deck (footer/header "limpos": null = padrão, false = nenhum)
+  function hfRead() {
+    const m = hfModal();
+    const out = {};
+    for (const k of ["author", "event", "department", "date"]) out[k] = m.querySelector(`[data-deck="${k}"]`).value.trim();
+    for (const kind of ["header", "footer"]) {
+      const v = Object.fromEntries(["left", "center", "right"].map((p) => [p, m.querySelector(`[data-slot="${kind}.${p}"]`).value.trim()]));
+      const empty = !v.left && !v.center && !v.right;
+      if (kind === "footer" && v.left === "{titulo}" && !v.center && v.right === "{pagina}") out.footer = null;
+      else if (empty) out[kind] = kind === "footer" ? false : null;
+      else out[kind] = Object.fromEntries(Object.entries(v).filter(([, x]) => x));
+    }
+    return out;
+  }
+
+  function hfApplyTo(deck, vals) {
+    for (const [k, v] of Object.entries(vals)) {
+      if (v == null || v === "") delete deck[k];
+      else deck[k] = v;
+    }
+    return deck;
+  }
+
+  function openHeaderFooter() {
+    const m = hfModal();
+    const presets = m.querySelector(".hf-presets");
+    if (!presets.childElementCount) {
+      for (const p of HF_PRESETS) {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "hf-preset";
+        b.dataset.preset = p.id;
+        b.innerHTML = `<b></b><span></span>`;
+        b.querySelector("b").textContent = p.name;
+        b.querySelector("span").textContent = p.desc;
+        b.onclick = () => {
+          const cur = hfRead();
+          hfFill({ ...cur, footer: p.footer, header: p.header });
+          presets.querySelectorAll(".hf-preset").forEach((x) => x.classList.toggle("active", x === b));
+          hfPreview();
+        };
+        presets.append(b);
+      }
+      const chips = m.querySelector(".hf-tokens");
+      for (const [tok, label] of HF_TOKENS) {
+        const c = document.createElement("button");
+        c.type = "button";
+        c.className = "hf-token";
+        c.dataset.token = tok;
+        c.textContent = label;
+        c.title = tok;
+        c.onmousedown = (e) => e.preventDefault(); // não rouba o foco do campo
+        c.onclick = () => {
+          const inp = hfLastInput || m.querySelector('[data-slot="footer.left"]');
+          const a = inp.selectionStart ?? inp.value.length, z = inp.selectionEnd ?? a;
+          inp.value = inp.value.slice(0, a) + tok + inp.value.slice(z);
+          inp.focus();
+          inp.setSelectionRange(a + tok.length, a + tok.length);
+          hfPreview();
+        };
+        chips.append(c);
+      }
+      m.querySelectorAll("input").forEach((inp) => {
+        inp.addEventListener("focus", () => { if (inp.dataset.slot) hfLastInput = inp; });
+        inp.addEventListener("input", () => { clearTimeout(hfTimer); hfTimer = setTimeout(hfPreview, 250); });
+      });
+    }
+    hfFill(state.deck);
+    m.classList.remove("hidden");
+    hfPreview();
+  }
+
+  function closeHeaderFooter() {
+    hfModal().classList.add("hidden");
+  }
+
+  async function hfPreview() {
+    const stage = hfModal().querySelector(".hf-stage");
+    const spec = hfApplyTo(JSON.parse(JSON.stringify(state.deck)), hfRead());
+    // na prévia, um slide que mostra rodapé (a capa não mostra)
+    let i = state.currentSlideIndex;
+    const NO_BARS = ["cover", "section", "end", "image", "canvas", "full", "headline"];
+    if (NO_BARS.includes(spec.slides[i]?.layout)) i = Math.max(0, spec.slides.findIndex((s) => !NO_BARS.includes(s.layout)));
+    try {
+      const r = await (await fetch("api/render-slide", { method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ slide: spec.slides[i], index: i, spec }) })).json();
+      stage.innerHTML = `<div class="thumb-render">${r.html}</div>`;
+      requestAnimationFrame(() => fitRendered(stage));
+      stage.style.setProperty("--thumb-scale", String(stage.clientWidth / 1920));
+    } catch {}
+  }
+
+  function applyHeaderFooter() {
+    hfApplyTo(state.deck, hfRead());
+    closeHeaderFooter();
+    syncDeckToServer();
+    renderCurrentSlide();
+    renderThumbnails();
+    showToast("Cabeçalho e rodapé aplicados em todos os slides", 2200);
+  }
+
+  return { openHeaderFooter, closeHeaderFooter, applyHeaderFooter };
+};

package/src/studio/public/index.html

@@ -500,6 +500,7 @@
           <div id="chat-attachments" class="chat-attachments" hidden></div>
           <div class="chat-compose">
             <textarea id="chat-input" class="chat-field" rows="1" placeholder="Pergunte, peça uma mudança, anexe um arquivo ou cole um link…" autocomplete="off"></textarea>
+            <button type="button" id="chat-critique" class="icon-btn" title="Leitura crítica do material anexado: inconsistências, achados escondidos, perguntas prováveis da banca (nada muda nos slides)"><i class="ic" data-ic="scan-search"></i></button>
             <button type="button" id="chat-attach" class="icon-btn" title="Anexar imagem ou documento (pdf, docx, xlsx, pptx, txt)"><i class="ic" data-ic="image-plus"></i></button>
             <button type="submit" id="chat-send" class="icon-btn icon-btn-primary" title="Enviar (Enter)"><i class="ic" data-ic="send"></i></button>
           </div>
@@ -840,6 +841,8 @@
 
   <script src="fit.js"></script>
   <script src="ui-icons.js"></script>
+  <script src="update-notice.js"></script>
+  <script src="ai-settings.js"></script>
   <script src="calc-fields.js"></script>
   <script src="art-preview.js"></script>
   <script src="api-collections.js"></script>
@@ -867,6 +870,9 @@
   <script src="workspace.js"></script>
   <script src="studio-awareness.js"></script>
   <script src="chat.js"></script>
+  <script src="provenance.js"></script>
+  <script src="header-footer.js"></script>
+  <script src="preferences-ui.js"></script>
   <script src="app.js"></script>
 </body>
 </html>

package/src/studio/public/library.html

@@ -31,7 +31,7 @@
   <div class="lib-body">
     <aside class="lib-side">
       <nav id="side" aria-label="Biblioteca"></nav>
-      <a class="lib-btn ghost ai-settings" id="btn-ai" hidden target="_blank" rel="noopener" title="Provedores, chaves e modelos de IA"><i class="ic" data-ic="sliders-horizontal"></i><span class="lbl">modelrelay</span></a>
+      <button type="button" class="lib-btn ghost ai-settings" id="btn-ai" hidden title="Provedores, chaves e modelos de IA"><i class="ic" data-ic="sliders-horizontal"></i><span class="lbl">Configurar IA</span></button>
     </aside>
     <main class="lib-main" id="main" tabindex="-1" aria-live="polite"><div class="initial-loading"><span class="loading-orbit"></span>Preparando seu estúdio…</div></main>
   </div>
@@ -50,6 +50,8 @@
   <div class="ldlg-back" id="dlg"><div class="ldlg" role="dialog" aria-modal="true" aria-labelledby="dialog-heading"></div></div>
   <div class="ltoast" id="toast" role="status"></div>
   <script src="ui-icons.js"></script>
+  <script src="update-notice.js"></script>
+  <script src="ai-settings.js"></script>
   <script src="library.js"></script>
 </body>
 </html>

package/src/studio/public/library.js

@@ -58,8 +58,9 @@
     if (view !== "recentes" && view !== "todas" && view !== "lixeira" && !topicOf(view)) view = "recentes";
     render();
   }
-  // botão IA: a tela de configuração do modelrelay local, quando existe
-  api("api/ai/setup").then(({ url }) => { if (url) { $("#btn-ai").href = url; $("#btn-ai").hidden = false; } }).catch(() => {});
+  // botão IA: provedor, chave e modelos desta máquina (ai-settings.js); no multiusuário quem configura é quem administra
+  api("api/ia").then(({ editable }) => { $("#btn-ai").hidden = !editable; }).catch(() => {});
+  $("#btn-ai").onclick = () => window.SagaAISettings.open();
   const openEditor = (id, present) => { location.href = `editor?deck=${encodeURIComponent(id)}${present ? "&present=1" : ""}`; };
 
   // ---------------------------------------------------------------- barra lateral
@@ -111,7 +112,7 @@
     const match = (d) => !q || d.title.toLowerCase().includes(q);
     const main = $("#main");
     if (view === "lixeira") {
-      main.innerHTML = `<div class="head"><div><h1>Lixeira</h1><div class="sub">Fica aqui por 30 dias; depois é apagado de vez.</div></div>${data.trash.length ? `<button class="lib-btn ghost danger" data-empty-trash>${ic("trash-2")}Esvaziar lixeira</button>` : ""}</div>` +
+      main.innerHTML = `<div class="head"><div><h1>Lixeira</h1><div class="sub">Fica aqui por ${data.trashDays === 1 ? "um dia" : `${data.trashDays || 30} dias`}; depois é apagado de vez (o prazo se muda em Preferências).</div></div>${data.trash.length ? `<button class="lib-btn ghost danger" data-empty-trash>${ic("trash-2")}Esvaziar lixeira</button>` : ""}</div>` +
         (data.trash.length ? data.trash.map((t) => `<div class="trash-row"><div class="t"><b>${esc(t.title)}</b><div class="sub">Era de ${esc(t.topic || NO_TOPIC.name)} · ${t.slides || 0} slides · excluída ${ago(t.deleted)}</div></div>
           <button class="lib-btn ghost" data-restore="${esc(t.id)}">${ic("rotate-ccw")}Restaurar</button><button class="lib-btn ghost danger" data-purge="${esc(t.id)}">Excluir de vez</button></div>`).join("")
           : `<div class="empty"><div class="big">${ic("trash-2")}</div><h2>Lixeira vazia</h2></div>`);
@@ -211,7 +212,7 @@
       if (a === "open" || a === "present") return openEditor(id, a === "present");
       if (a === "rename") return nameDialog("Renomear apresentação", d.title, (title) => act(() => api("api/library/decks/rename", { id, title }), "Renomeada"));
       if (a === "dup") return act(() => api("api/library/decks/duplicate", { id }), "Cópia criada");
-      if (a === "trash") return act(() => api("api/library/decks/trash", { id }), "Na lixeira — dá para restaurar por 30 dias");
+      if (a === "trash") return act(() => api("api/library/decks/trash", { id }), `Na lixeira — dá para restaurar por ${data.trashDays === 1 ? "um dia" : `${data.trashDays || 30} dias`}`);
     });
     m.querySelectorAll("[data-move]").forEach((b) => b.onclick = () => { closeMenus(); act(() => api("api/library/decks/move", { id, topic: b.dataset.move }), `Movida para ${topicOf(b.dataset.move).name}`); });
     m.querySelectorAll("[data-dl]").forEach((b) => b.onclick = () => {
@@ -435,7 +436,8 @@
               const line = buf.slice(0, nl); buf = buf.slice(nl + 1);
               if (!line.trim()) continue;
               const ev = JSON.parse(line);
-              if (ev.type === "progress" && ev.text) status.textContent = ev.text;
+              // a etapa (ou as etapas que correm juntas) e o tempo: a geração com documento leva minutos
+              if (ev.type === "progress" && ev.text) status.textContent = `${ev.text}${ev.elapsed ? ` · ${Math.round(ev.elapsed / 1000)}s` : ""}`;
               if (ev.type === "result") result = ev.data;
               if (ev.type === "error") throw new Error(ev.error || "falhou");
             }

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

@@ -0,0 +1,86 @@
+// Preferências (tela única, com busca): as desta máquina ficam em ~/.sagadeck/preferencias.json (servidor); as do
+// editor, neste navegador. Cada linha diz o que faz; gravar é automático.
+// Saiu do app.js pela trava de tamanho dos monolitos; o comportamento é o mesmo.
+window.SagaPrefs = function ({ dom, store, escHtml, escAttr, fold, setAppTheme, renderCurrentSlide, renderThumbnails }) {
+  const PREFS_UI = [
+    { id: "texto", title: "Texto e código", items: [
+      { k: "texto.minCodePt", type: "num", unit: "pt", min: 6, max: 24, label: "Tamanho mínimo do código ao encolher", hint: "Código que não cabe encolhe até aqui (10 pt ≈ 20 px no slide). Se nem assim couber, ele rola na apresentação e o fiscal avisa." },
+      { k: "texto.minTextPt", type: "num", unit: "pt", min: 6, max: 30, label: "Tamanho mínimo do texto ao encolher", hint: "Títulos e textos que se ajustam para caber não ficam menores que isto." },
+      { k: "texto.wrapCode", type: "bool", label: "Quebrar linhas longas de código", hint: "Em vez de encolher o bloco todo por causa de uma linha comprida." },
+    ] },
+    { id: "ia", title: "Inteligência artificial", items: [
+      { k: "ia.pesquisa", type: "bool", label: "Pesquisar na web quando precisar", hint: "Ranking, lançamentos, preços, um artigo científico: a IA pesquisa, lê as fontes confiáveis e cita cada uma. Desligado (ou sem internet), ela usa só o que sabe e avisa." },
+      { k: "ia.perguntar", type: "bool", label: "Perguntar quando o pedido não disser para que serve o material", hint: "Ex.: um workshop sem dizer se o pessoal vai guardar o material. Desligado, a IA decide sozinha." },
+      { k: "ia.imagens", type: "bool", label: "Gerar imagens quando o pedido pedir", hint: "Desligado: só ícones, gráficos e diagramas do sagadeck (sem custo de imagem)." },
+      { k: "ia.autor", type: "text", label: "Seu nome", hint: "Vai na capa e no rodapé das apresentações novas (no lugar de \"Seu Nome\")." },
+      { k: "ia.idioma", type: "select", options: [["auto", "O do pedido"], ["português do Brasil", "Português (Brasil)"], ["inglês", "Inglês"], ["espanhol", "Espanhol"]], label: "Idioma do conteúdo gerado" },
+    ] },
+    { id: "biblioteca", title: "Biblioteca", items: [
+      { k: "biblioteca.lixeiraDias", type: "select", options: [["1", "1 dia"], ["7", "7 dias"], ["30", "30 dias"], ["90", "90 dias"]], label: "Quanto tempo a lixeira guarda", hint: "Apresentação excluída fica restaurável por esse tempo; depois é apagada de vez." },
+    ] },
+    { id: "exportacao", title: "Exportação", items: [
+      { k: "exportacao.pdfClaro", type: "bool", label: "PDF na versão clara do tema", hint: "Tema escuro com par claro (ex.: Manual noite) sai claro no PDF, melhor para imprimir." },
+    ] },
+    { id: "editor", title: "Editor (este navegador)", local: true, items: [
+      { k: "editor.theme", type: "select", options: [["system", "Automática (do sistema)"], ["light", "Clara"], ["dark", "Escura"]], label: "Tema da interface", hint: "Só a interface do Studio; o slide mantém o tema dele.",
+        get: () => store.get("appTheme", "system"), set: (v) => setAppTheme(v) },
+      { k: "editor.guides", type: "bool", label: "Mostrar as guias da área segura", hint: "O retângulo pontilhado onde o conteúdo cabe sem cortar.",
+        get: () => dom.chkGuides.checked, set: (v) => { dom.chkGuides.checked = v; dom.chkGuides.dispatchEvent(new Event("change", { bubbles: true })); } },
+      { k: "editor.inspect", type: "bool", label: "Marcar no slide os avisos do fiscal", hint: "Caixas em volta do texto fora da margem, código que não coube, sobreposição.",
+        get: () => dom.chkInspectOverlay.checked, set: (v) => { dom.chkInspectOverlay.checked = v; dom.chkInspectOverlay.dispatchEvent(new Event("change", { bubbles: true })); } },
+    ] },
+  ];
+  let prefsData = null, prefsTimer = null;
+  const prefGet = (key) => { const [sec, k] = key.split("."); return prefsData?.[sec]?.[k]; };
+  async function openPrefs() {
+    const modal = document.getElementById("modal-prefs");
+    modal.classList.remove("hidden");
+    try {
+      const r = await fetch("api/preferences"); const j = await r.json();
+      prefsData = j.prefs; document.getElementById("prefs-file").textContent = j.file || "";
+    } catch { prefsData = {}; }
+    renderPrefs();
+    const q = document.getElementById("prefs-search"); q.value = ""; q.focus();
+  }
+  function renderPrefs() {
+    const nav = document.getElementById("prefs-nav"), list = document.getElementById("prefs-list");
+    nav.innerHTML = PREFS_UI.map((sec) => `<button type="button" data-prefs-sec="${sec.id}">${escHtml(sec.title)}</button>`).join("");
+    list.innerHTML = PREFS_UI.map((sec) => `<section class="prefs-sec" data-prefs-sec="${sec.id}"><h4>${escHtml(sec.title)}</h4>${sec.items.map((it) => {
+      const v = it.get ? it.get() : prefGet(it.k);
+      const ctl = it.type === "bool" ? `<input type="checkbox" data-pref="${it.k}"${v ? " checked" : ""} aria-label="${escAttr(it.label)}">`
+        : it.type === "select" ? `<select class="form-control" data-pref="${it.k}" aria-label="${escAttr(it.label)}">${it.options.map(([ov, ol]) => `<option value="${ov}"${String(v) === ov ? " selected" : ""}>${escHtml(ol)}</option>`).join("")}</select>`
+        : it.type === "num" ? `<span class="pref-num"><input type="number" class="form-control" data-pref="${it.k}" value="${escAttr(v ?? "")}" min="${it.min}" max="${it.max}" step="1" aria-label="${escAttr(it.label)}"><span>${it.unit || ""}</span></span>`
+        : `<input type="text" class="form-control" data-pref="${it.k}" value="${escAttr(v ?? "")}" aria-label="${escAttr(it.label)}">`;
+      return `<div class="pref-row" data-search="${escAttr(fold(`${sec.title} ${it.label} ${it.hint || ""}`))}"><div class="pref-label"><b>${escHtml(it.label)}</b>${it.hint ? `<small>${escHtml(it.hint)}</small>` : ""}</div><div class="pref-ctl">${ctl}</div></div>`;
+    }).join("")}</section>`).join("");
+    nav.querySelectorAll("[data-prefs-sec]").forEach((b) => b.onclick = () => list.querySelector(`section[data-prefs-sec="${b.dataset.prefsSec}"]`)?.scrollIntoView({ block: "start" }));
+    list.querySelectorAll("[data-pref]").forEach((el) => el.addEventListener("change", () => changePref(el)));
+  }
+  function changePref(el) {
+    const key = el.dataset.pref, it = PREFS_UI.flatMap((s) => s.items).find((x) => x.k === key);
+    const value = el.type === "checkbox" ? el.checked : it.type === "num" ? Number(el.value) : el.value;
+    const status = document.getElementById("prefs-status");
+    if (it.set) { it.set(value); status.textContent = "Salvo neste navegador"; return; }
+    const [sec, k] = key.split(".");
+    (prefsData[sec] ||= {})[k] = value;
+    clearTimeout(prefsTimer);
+    status.textContent = "Salvando…";
+    prefsTimer = setTimeout(async () => {
+      try {
+        const r = await fetch("api/preferences", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prefs: { [sec]: prefsData[sec] } }) });
+        const j = await r.json(); if (!r.ok) throw new Error(j.error || r.status);
+        prefsData = j.prefs;
+        const shown = document.querySelector(`#prefs-list [data-pref="${key}"]`); if (shown && shown.type === "number") shown.value = prefGet(key); // voltou para a faixa aceita
+        status.textContent = "Salvo";
+        renderCurrentSlide(); renderThumbnails(); // os mínimos do ajuste para caber mudam o desenho
+      } catch (e) { status.textContent = "Não salvou: " + e.message; }
+    }, 250);
+  }
+  function filterPrefs() {
+    const q = fold(document.getElementById("prefs-search").value.trim());
+    document.querySelectorAll("#prefs-list .pref-row").forEach((r) => { r.hidden = !!q && !r.dataset.search.includes(q); });
+    document.querySelectorAll("#prefs-list .prefs-sec").forEach((sec) => { sec.hidden = !sec.querySelector(".pref-row:not([hidden])"); });
+  }
+
+  return { openPrefs, filterPrefs };
+};

package/src/studio/public/provenance.js

@@ -0,0 +1,13 @@
+// Selo de origem do conteúdo na miniatura (deck feito de um material anexado). "material" é o normal e não leva selo;
+// o que o sagadeck incluiu (provenance: proprio) ou calculou do material (derivado) aparece, para a pessoa saber o
+// que não é do paper. Saiu do app.js pela trava de tamanho dos monolitos.
+window.SagaProvenance = function (slide, hydrateIcons) {
+  if (slide?.provenance !== "proprio" && slide?.provenance !== "derivado") return null;
+  const own = slide.provenance === "proprio";
+  const pv = document.createElement("span");
+  pv.className = `thumb-prov prov-${slide.provenance}`;
+  pv.innerHTML = `<i class="ic" data-ic="${own ? "sparkles" : "chart-column"}"></i><span>${own ? "sagadeck" : "derivado"}</span>`;
+  hydrateIcons(pv);
+  pv.title = `${own ? "Incluído pelo sagadeck: não está no material" : "Feito pelo sagadeck a partir dos números do material"}${slide.provenanceNote ? ` — ${slide.provenanceNote}` : ""}`;
+  return pv;
+};

package/src/studio/public/style.css

@@ -812,6 +812,18 @@ textarea.form-control.napkin-input { min-height: 220px; resize: vertical; font-f
 .bs-option:disabled { opacity: .5; }
 .ai-msg.bs .ai-avatar { background: #8b5cf6; }
 .bs-tag { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
+/* leitura crítica: um cartão por ponto, ligado ao slide, com Aplicar e Ignorar */
+.crit-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
+.crit-item { border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
+.crit-item.crit-done { opacity: .6; }
+.crit-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.crit-kind { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
+.crit-slide { font-size: 11px; border: 0; background: var(--selected); color: var(--brand); border-radius: 999px; padding: 1px 8px; cursor: pointer; }
+.crit-text { font-size: 13px; }
+.crit-quote { margin: 2px 0 0; padding-left: 8px; border-left: 2px solid var(--brand); font-size: 12px; color: var(--text-3); }
+.crit-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
+.crit-actions .ic { width: 12px; height: 12px; }
+.crit-status { font-size: 12px; color: var(--text-3); }
 #btn-brainstorm-apply { margin-left: auto; }
 
 /* versões de um slide para escolher */
@@ -1227,6 +1239,11 @@ textarea.form-control.napkin-input { min-height: 220px; resize: vertical; font-f
 .thumb-review.rv-changed { background: #bc4b09; }
 .thumb-review.rv-pending { background: #8764b8; }
 .thumb-review.rv-check { background: #0063b1; }
+/* origem do conteúdo: o que o sagadeck incluiu (sagadeck) ou calculou do material (derivado) */
+.thumb-prov { position: absolute; right: 8px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 6px; border-radius: 9px; font-size: 10.5px; font-weight: 600; color: #fff; box-shadow: var(--shadow-1); }
+.thumb-prov .ic, .thumb-prov .ic svg { width: 11px; height: 11px; }
+.thumb-prov.prov-proprio { background: #8764b8; }
+.thumb-prov.prov-derivado { background: #4f6bed; }
 .review-bar { position: absolute; left: 12px; right: 12px; top: 40px; z-index: 6; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 6px 4px 12px; border-radius: 8px; background: var(--chrome); border: 1px solid var(--ui-line); border-left: 4px solid #bc4b09; box-shadow: var(--shadow-2); font-size: 12px; }
 .review-bar.rv-new { border-left-color: #107c10; }
 .review-bar.rv-pending { border-left-color: #8764b8; }