sagadeck 1.11.6 → 1.11.7

package/docs/ANDAMENTO.md

@@ -8,6 +8,79 @@ começar. Trabalho em curso vai para o GitHub (commit + push) a cada etapa, nunc
 
 ---
 
+## 1.11.7: navegação leve pela rede — 24/10/2026 (branch `claude/navegacao-leve`)
+
+**A máquina toda lenta era culpa da suíte de testes.** Medido no Windows dela: 19 processos `explorer.exe`, todos
+janelas "Temp - File Explorer", ~6 GB de memória e ~22 mil s de CPU cada (juntas, uns 3 núcleos ocupados o tempo todo,
+vigiando a Temp, onde os testes criam e apagam milhares de arquivos). Origem: o teste das identidades
+(`studio.test.js`) clica em Configurar, o servidor abria o Explorador de verdade com `/select,` no arquivo da pasta
+temporária do teste; a pasta era apagada e a janela recuava para a Temp e ficava. Uma janela por rodada da suíte,
+de 22/10 a 24/10. Corrigido: todo `explorer.exe` passa por `src/studio/reveal.js`, que não abre nada com
+`SAGADECK_TEST_ISOLATED` (test/isolate.js); guarda em `guards.test.js` (nenhum outro arquivo de `src/` chama
+`explorer.exe`). As 19 janelas foram fechadas (memória em uso: 20,3 GB → 15,7 GB; CPU em repouso < 1%).
+
+**Troca de slide no editor (perfil de CPU na palestra de 39 slides dela, Studio local): 430 ms → ~45 ms.**
+- `fitSlideText` ajustava o slide duas vezes por troca: na hora e de novo no `document.fonts.ready`, que já carregado
+  resolve na hora. Agora só repete se as fontes ainda estão chegando.
+- `putThumb` recolocava o mesmo HTML na miniatura do slide atual a cada troca e media tudo de novo
+  (`runThumbFits`, ~35 ms). Agora guarda o que cada miniatura mostra (`thumbShown`, WeakMap) e não refaz o igual.
+  Teste em `studio-navigation.test.js` (a miniatura não é refeita; falha sem a correção).
+- Medido e descartado: `content-visibility: auto` nas miniaturas não ajudou (a página tem ~4.300 elementos).
+
+Pedido: "ficou super lento pra navegar nos slides". No Studio local (127.0.0.1) a troca de slide leva 20–80 ms e a
+apresentação não perde quadro; o peso estava na rede, e pelo portal ninguém comprimia nada (nginx com `gzip on` mas sem
+`gzip_types` nem `gzip_proxied`). Medido no servidor e no deck de teste:
+- Cada troca de slide: `/api/render-slide` subia o deck inteiro e descia ~171 kB, dos quais 158 kB o CSS base (igual
+  em todo clique); `/api/variety` subia o deck inteiro de novo. Cada miniatura, um pedido com o deck inteiro.
+- Abrir o editor: ~5,4 MB; abrir de novo: ~1,3 MB (`katex.css` com as fontes embutidas, 924 kB, sem cabeçalho de
+  cache).
+
+Feito:
+- `src/studio/render-routes.js` (sai do `server.js`): `render-slide` devolve `baseHash`/`themeHash` e só manda o CSS
+  quando o hash informado é outro; `render-slides` desenha até 24 slides num pedido. No editor,
+  `public/render-client.js` guarda o CSS e devolve a resposta preenchida (o resto do `app.js` não muda);
+  `pumpThumbs` pede em lotes de 6. A variedade sobe só `purpose` e `layout`/`tone` de cada slide.
+- `src/studio/compress.js`: gzip para texto a partir de 1 kB quando o navegador aceita (nunca `x-ndjson` nem
+  `event-stream`, que chegam aos poucos); ETag nos arquivos da página fora de `/api/`, com 304 sem corpo e
+  `Cache-Control: no-cache` quando não há prazo próprio (versão nova chega na hora). Repassa o `drain` do gzip (sem
+  isso, arquivo servido por `pipe` travava: o teste pegou).
+- Resultado (deck de teste, bytes na rede): trocar 10 vezes, 1.708 kB → 24 kB; abrir, 5,4 MB → 2,1 MB; abrir de novo,
+  1,3 MB → 55 kB; apresentação, 257 kB → 64 kB (304 sem mudança).
+- Testes: `test/compress.test.js` (gzip, pequeno/sem aceite/HEAD/imagem, `pipe`, erro com diagnóstico, streams não
+  seguradas, ETag/304) e `test/studio-navigation.test.js` (no editor: CSS base uma vez, troca leve, miniaturas em lote,
+  variedade pequena, `app.js` em gzip, zero erros JS; falha com o editor antigo).
+- **O maior peso eram as fotos**: `imageSrc` (e o vídeo, `video-player.js`) embutiam o arquivo em base64 no HTML de
+  cada slide. Um slide de modelo com foto: `render-slide` de 5.652 kB, o lote de 6 miniaturas de 2.840 kB, a cada
+  clique. Isso também fazia o desenho do slide da tela chegar depois do lote de miniaturas, e o formulário ficava no
+  slide anterior (o teste "coleções" da CI pegou). Agora `fileSrc` (elements.js) usa `ctx.assetURL` quando há:
+  `render-routes.js` passa `_assetURL`, e a foto vira `api/deck-asset?v=<data+tamanho>&p=<caminho>` (o caminho por
+  último: o player reconhece o vídeo pela terminação), com `Cache-Control: immutable`. Mesmo slide: 5 kB. A
+  apresentação, as exportações e as fotos para a IA continuam embutindo (o HTML vale sozinho).
+- **Segurança (multiusuário)**: o render usava o `_dir` mandado pelo navegador para ler as imagens; dava para ler a
+  biblioteca de outra pessoa. Agora a pasta é a do deck aberto no servidor, e `/api/deck-asset` só entrega
+  imagem/vídeo dentro da biblioteca da pessoa, da pasta do deck e das pastas de modelos do sagadeck. Teste:
+  `studio-navigation.test.js` (foto por endereço que aparece, miniatura sem `data:`, 404 fora das pastas e para
+  arquivo que não é imagem, `_dir` do pedido ignorado; falha sem a correção).
+- Com as fotos descendo pelas mesmas conexões, apareceram duas corridas (a CI pegou): o fim da transformação dizia
+  "A transformação terminou" antes de recarregar o deck (agora diz depois, com as miniaturas novas na tela), e as
+  fotos das miniaturas fora da tela disputavam a conexão (agora `loading="lazy"` no `render-slides`). O teste do
+  "trocar imagem" (`editor-tools.test.js`) conferia que o `src` não tinha "a.png", e "nova.png" tem: passa a exigir o
+  caminho da nova.
+- Os testes da biblioteca (`library-ui.test.js`) estouram o tempo nesta máquina também na main (11 falhas, mesmo
+  código): carga da máquina, não regressão; na CI passam. A capa da vitrine (`gallery-cover`) leva ~15 s na primeira
+  vez (foto pelo Chrome) e segura o "rede parada" dos testes.
+- Sobra, se ainda pesar: ~70 pedidos ao abrir o editor (cada um uma ida e volta, mesmo com 304); juntar os scripts
+  num só reduziria a espera em conexão lenta.
+
+## Imagens da IA fora do repositório — 24/10/2026 (branch `claude/imagens-fora-do-repo`)
+
+Dois testes ao vivo pedem imagem sem pasta de deck, e `materializeImages` grava em `process.cwd()`: rodando a bateria
+do repositório, as fotos iam para `<repo>/imagens/`, e um `git add -A` levou 6 PNGs (~1,5 MB cada) e 2 imagens da web
+para os commits das versões 1.11.2 e 1.11.3 (o pacote do npm não leva `imagens/`, não foi afetado). Saíram do git;
+`/imagens/` foi para o `.gitignore`; `ai-live.test.js` roda num temporário (`process.chdir`). Guarda em
+`guards.test.js` (nada de `imagens/` no git, o `.gitignore` e o temporário da bateria). O histórico antigo continua com
+os arquivos (reescrever a main não compensa).
+
 ## 1.11.6: rodada de uso real — 23/10/2026 (branch `claude/parada-e-fotos`)
 
 Quatro pedidos reais no sagadeck-dev (conta de teste `verificacao`, tópico "Rodada de uso real"), pelo caminho da

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sagadeck",
-  "version": "1.11.6",
+  "version": "1.11.7",
   "description": "Gerador de apresentações: YAML -> HTML animado + PowerPoint editável, com temas e figuras geradas na hora.",
   "type": "module",
   "bin": {

package/src/build.js

@@ -351,7 +351,8 @@ export function renderSlide(raw, i = 0, spec = {}) {
   const deckTheme = resolveTheme(spec.theme, spec.palette, identityOf(spec));
   const s = { ...(spec.defaults || {}), ...raw };
   const theme = slideTheme(s, deckTheme, spec);
-  const ctx = { baseDir: spec._dir || process.cwd(), theme, spec, warnings: [], mapTiles: inferLayout(s) === "map" ? tilesForDeck(loadMapConfig(mapaFile())) : null };
+  // _assetURL (só o editor do Studio, render-routes.js): imagens e vídeos por endereço, não embutidos no HTML
+  const ctx = { baseDir: spec._dir || process.cwd(), theme, spec, warnings: [], assetURL: typeof spec._assetURL === "function" ? spec._assetURL : null, mapTiles: inferLayout(s) === "map" ? tilesForDeck(loadMapConfig(mapaFile())) : null };
   const layout = inferLayout(s);
   const fn = LAYOUTS[layout];
   if (!fn) throw new Error(`Slide ${i + 1}: layout "${layout}" não existe.`);

package/src/elements.js

@@ -213,7 +213,15 @@ export function imageSrc(p, ctx) {
     return null;
   }
   const ext = path.extname(f).slice(1).toLowerCase().replace("jpg", "jpeg").replace("svg", "svg+xml");
-  return `data:image/${ext};base64,${fs.readFileSync(f).toString("base64")}`;
+  return fileSrc(f, `image/${ext}`, ctx);
+}
+
+// Arquivo do deck dentro do HTML: embutido (data:), para o HTML exportado valer sozinho; no editor do Studio, o
+// endereço do arquivo (ctx.assetURL, render-routes.js), que o navegador baixa uma vez e guarda. Embutida, a mesma foto
+// descia em cada troca de slide e em cada miniatura (megabytes por clique pela internet).
+export function fileSrc(f, mime, ctx = {}) {
+  if (ctx.assetURL) return ctx.assetURL(f);
+  return `data:${mime};base64,${fs.readFileSync(f).toString("base64")}`;
 }
 
 const isFigure = (el) => el && (el.icon || el.picto || el.diagram || el.chart || el.ufmap || el.svg || el.image || el.qr || el.points);

package/src/studio/api-routes.js

@@ -4,7 +4,7 @@ import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
 import crypto from "node:crypto";
-import { spawn } from "node:child_process";
+import { reveal } from "./reveal.js";
 import YAML from "yaml";
 import { writeRecording, readRecordings, mimeOf } from "../api-client.js";
 
@@ -115,7 +115,7 @@ export async function apiRoutes({ req, res, pathname, url, W, apiEnv, rtSessions
     if (pathname === "/api/http/vars/folder") {
       const dir = path.dirname(apiEnv.file);
       fs.mkdirSync(dir, { recursive: true });
-      if (process.platform === "win32") spawn("explorer.exe", [dir], { detached: true, stdio: "ignore" }).unref();
+      reveal(dir); // nunca nos testes (reveal.js)
       return reply(200, { dir });
     }
     if (pathname === "/api/http/send") return reply(200, await apiEnv.send({ ...(body.request || {}), file: fileOf(body) }));

package/src/studio/compress.js

@@ -0,0 +1,88 @@
+// Respostas leves pela rede. No servidor, pelo portal, nada saía comprimido (o nginx só comprime o que ele mesmo gera)
+// e nada ficava no cache do navegador: cada troca de slide baixava ~170 kB, e cada abertura do editor ~1,3 MB de
+// novo (só o katex.css, com as fontes da matemática embutidas, tem 924 kB). Aqui, valendo em qualquer lugar (servidor,
+// rede do banco, máquina da pessoa) sem depender do proxy:
+// - gzip para texto (HTML, CSS, JS, JSON, SVG, XML) a partir de 1 kB, quando o navegador aceita; nunca o que chega aos
+//   poucos (respostas ao vivo da IA em x-ndjson, eventos em event-stream), que o gzip seguraria até juntar um bloco;
+// - ETag nos arquivos da página (fora de /api/) entregues de uma vez: na visita seguinte o navegador pergunta se mudou
+//   e recebe 304, sem corpo. Sem prazo de cache próprio, vai "no-cache" (sempre pergunta): versão nova do sagadeck
+//   chega na hora, sem código velho preso no navegador.
+import crypto from "node:crypto";
+import zlib from "node:zlib";
+
+const COMPRESSIBLE = /^(text\/(html|css|plain|javascript|xml)|application\/(json|javascript|xml)|image\/svg\+xml)\b/i;
+const STREAMING = /event-stream|ndjson/i;
+export const MIN_BYTES = 1024;
+
+export function installCompression(req, res, { min = MIN_BYTES } = {}) {
+  if (req.method === "HEAD") return;
+  const gzipOk = /\bgzip\b/i.test(String(req.headers["accept-encoding"] || ""));
+  const conditional = req.method === "GET" && !String(req.url || "").startsWith("/api/");
+  if (!gzipOk && !conditional) return;
+  const writeHead = res.writeHead, write = res.write, end = res.end;
+  let pending = null; // writeHead adiado: o primeiro pedaço decide se comprime (e, inteiro, se mudou)
+  let gz = null, decided = false, notModified = false;
+
+  const compressibleNow = () => {
+    const type = String(res.getHeader("content-type") || "");
+    return COMPRESSIBLE.test(type) && !STREAMING.test(type) && !res.getHeader("content-encoding") && ![204, 304].includes(res.statusCode);
+  };
+  // decide e manda os cabeçalhos de verdade; body: a resposta inteira (end de uma vez) ou null (vem aos pedaços)
+  const flush = (body) => {
+    if (decided) return;
+    decided = true;
+    const reason = pending?.reason;
+    pending = null;
+    if (conditional && body && res.statusCode === 200 && !res.getHeader("etag")) {
+      const etag = `"${crypto.createHash("sha1").update(body).digest("base64url").slice(0, 22)}"`;
+      res.setHeader("ETag", etag);
+      if (!res.getHeader("cache-control")) res.setHeader("Cache-Control", "no-cache");
+      if (String(req.headers["if-none-match"] || "").split(/\s*,\s*/).includes(etag)) {
+        notModified = true;
+        res.statusCode = 304;
+        for (const h of ["content-length", "content-type", "content-encoding"]) res.removeHeader(h);
+        return writeHead.call(res, 304);
+      }
+    }
+    if (gzipOk && compressibleNow() && (body == null || body.length >= min)) {
+      gz = zlib.createGzip({ level: 6 });
+      res.setHeader("Content-Encoding", "gzip");
+      res.removeHeader("Content-Length");
+      const vary = String(res.getHeader("vary") || "");
+      if (!/accept-encoding/i.test(vary)) res.setHeader("Vary", vary ? `${vary}, Accept-Encoding` : "Accept-Encoding");
+      gz.on("data", (c) => write.call(res, c));
+      gz.on("end", () => end.call(res));
+      // quem escreve com pipe (arquivo) para quando o write devolve false e espera o drain da resposta: é o gzip que drena
+      gz.on("drain", () => res.emit("drain"));
+    }
+    reason === undefined ? writeHead.call(res, res.statusCode) : writeHead.call(res, res.statusCode, reason);
+  };
+
+  res.writeHead = function (code, a, b) {
+    const reason = typeof a === "string" ? a : undefined;
+    const headers = typeof a === "string" ? b : a;
+    res.statusCode = code;
+    if (Array.isArray(headers)) for (let i = 0; i + 1 < headers.length; i += 2) res.setHeader(headers[i], headers[i + 1]);
+    else if (headers) for (const [k, v] of Object.entries(headers)) if (v !== undefined) res.setHeader(k, v);
+    if (decided) return reason === undefined ? writeHead.call(res, code) : writeHead.call(res, code, reason);
+    // o que chega aos poucos (ou não é texto nem arquivo da página) sai na hora, como antes
+    const type = String(res.getHeader("content-type") || "");
+    if (STREAMING.test(type) || (!compressibleNow() && !conditional)) { decided = true; return reason === undefined ? writeHead.call(res, code) : writeHead.call(res, code, reason); }
+    pending = { reason };
+    return res;
+  };
+  res.write = function (chunk, enc, cb) {
+    if (!decided) flush(null);
+    if (notModified) return true;
+    return gz ? gz.write(chunk, enc, cb) : write.call(res, chunk, enc, cb);
+  };
+  res.end = function (chunk, enc, cb) {
+    if (typeof chunk === "function") { cb = chunk; chunk = undefined; enc = undefined; } else if (typeof enc === "function") { cb = enc; enc = undefined; }
+    if (!decided) flush(chunk == null ? Buffer.alloc(0) : Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk, typeof enc === "string" ? enc : "utf8"));
+    if (notModified) return end.call(res, cb);
+    if (!gz) return end.call(res, chunk, enc, cb);
+    if (cb) res.once("finish", cb);
+    if (chunk != null) gz.end(chunk, enc); else gz.end();
+    return res;
+  };
+}

package/src/studio/public/app.js

@@ -418,12 +418,7 @@
       mainRenders++;
       let data;
       try {
-        const res = await fetch("api/render-slide", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ slide, index: idx, spec: state.deck }),
-        });
-        data = await res.json();
+        data = await window.SagaRender.slide({ slide, index: idx, spec: state.deck }); // sem rebaixar o CSS (render-client.js)
       } finally { mainRenders--; setTimeout(pumpThumbs); }
       if (seq !== renderSeq) return; // já pediram um render mais novo
 
@@ -1174,7 +1169,8 @@
     dom.storyArcDot.setAttribute("cy", currentPt.y);
 
     // variedade medida no servidor (src/ai/variety.js — a mesma régua da geração com IA)
-    fetch("api/variety", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ spec: state.deck }) })
+    // só o que a régua usa (layout, tom, propósito): subia o deck inteiro a cada troca de slide
+    fetch("api/variety", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ spec: { purpose: state.deck.purpose, slides: (state.deck.slides || []).map((s) => ({ layout: s.layout, tone: s.tone })) } }) })
       .then((r) => r.json()).then((v) => {
         const ok = v.ok;
         dom.arcStatusBadge.className = `arc-badge ${ok ? "ok" : "warn"}`;
@@ -1857,6 +1853,7 @@
   // Miniaturas = o próprio slide renderizado, em escala. Renderizadas sob demanda (quando aparecem
   // na lista), com cache por conteúdo; o slide aberto atualiza a sua a cada edição (putThumb).
   const thumbCache = new Map(); // chave (tema + índice + slide) -> html
+  const thumbShown = new WeakMap(); // tela da miniatura -> html que ela mostra (putThumb não refaz o mesmo)
   // tudo do deck que muda o desenho de um slide (tema, destaque, cabeçalho/rodapé e o que eles mostram)
   const deckLook = () => {
     const d = state.deck || {};
@@ -1901,6 +1898,7 @@
       const cached = thumbCache.get(thumbKey(idx, slide));
       if (cached) {
         screen.innerHTML = `<div class="thumb-render">${cached}</div>`;
+        thumbShown.set(screen, cached);
         queueThumbFit(screen); // em fatias: reconstruir a lista não ajusta as 200 de uma vez
       } else {
         const fb = document.createElement("div");
@@ -1991,20 +1989,16 @@
   }
 
   function pumpThumbs() {
-    while (!mainRenders && thumbActive < 3 && thumbQueue.length) {
-      const idx = thumbQueue.shift();
-      const slide = state.deck.slides[idx];
-      if (!slide) continue;
+    // em lotes de até 6, com o deck subindo uma vez por lote (render-client.js); o CSS que a página já tem não volta
+    while (!mainRenders && thumbActive < 2 && thumbQueue.length) {
+      const deck = state.deck, batch = [];
+      while (thumbQueue.length && batch.length < 6) { const idx = thumbQueue.shift(); if (deck.slides[idx]) batch.push(idx); }
+      if (!batch.length) continue;
       thumbActive++;
-      fetch("api/render-slide", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ slide, index: idx, spec: state.deck }),
-      })
-        .then((r) => r.json())
+      window.SagaRender.slides({ indices: batch, spec: deck })
         .then((data) => {
           ensureSlideStyles(data.baseCSS, data.themeCSS);
-          putThumb(idx, slide, data.html);
+          for (const r of data.slides) if (r.html != null && deck.slides[r.index]) putThumb(r.index, deck.slides[r.index], r.html);
         })
         .catch(() => {})
         .finally(() => { thumbActive--; pumpThumbs(); });
@@ -2036,6 +2030,9 @@
     thumbCache.set(thumbKey(idx, slide), html);
     const screen = dom.thumbnailsList.querySelector(`.thumb-card[data-idx="${idx}"] .thumb-screen`);
     if (!screen) return;
+    // mesmo HTML já na tela: nada a refazer (cada troca de slide recolocava a miniatura dele e media tudo de novo)
+    if (thumbShown.get(screen) === html) return;
+    thumbShown.set(screen, html);
     screen.innerHTML = `<div class="thumb-render">${html}</div>`;
     queueThumbFit(screen);
     // miniatura de diagrama também é desenhada, mas quando o navegador estiver livre: o desenho do Mermaid é pesado e
@@ -3066,7 +3063,8 @@
     };
     run();
     report();
-    document.fonts?.ready.then(() => { run(); report(); }); // a fonte do tema pode chegar depois e mudar as medidas
+    // a fonte do tema pode chegar depois e mudar as medidas; já carregada, medir de novo era o dobro do trabalho por troca
+    if (document.fonts && document.fonts.status !== "loaded") document.fonts.ready.then(() => { run(); report(); });
   }
 
   // ==========================================================================
@@ -3299,8 +3297,8 @@
       if (run) { work.update({ type: "progress", ...(run.progress || {}), phase: run.progress?.phase || "transform", mode: run.mode, text: run.progress?.text || "Transformando…" }); setTimeout(tick, 3000); return; }
       work.done();
       const job = st.jobs?.[0];
+      await loadDeck(); // o aviso vem com o deck novo já na tela (antes, aparecia e as miniaturas ainda eram as velhas)
       appendChatMessage("ai", job?.status === "parcial" ? "A transformação parou antes do fim; o que ficou pronto está guardado e pedir de novo continua de onde parou." : "A transformação terminou.");
-      await loadDeck();
     };
     tick();
   }

package/src/studio/public/index.html

@@ -862,6 +862,7 @@
   <button id="chat-fab" class="chat-fab hidden" type="button" title="Voltar para o chat" aria-label="Voltar para o chat"><i class="ic" data-ic="sparkles"></i><span class="chat-fab-dot" aria-hidden="true"></span></button>
 
   <script src="fit.js"></script>
+  <script src="render-client.js"></script>
   <script src="ui-icons.js"></script>
   <script src="update-notice.js"></script>
   <script src="ai-settings.js"></script>

package/src/studio/public/render-client.js

@@ -0,0 +1,33 @@
+// Pedidos de desenho do editor (o slide da tela e as miniaturas) sem baixar de novo o CSS que a página já tem.
+// O servidor (render-routes.js) devolve os hashes do CSS base e do CSS dos temas e só manda o texto quando o hash que
+// o editor informou é outro. Aqui o CSS fica guardado e volta preenchido na resposta: quem chama recebe baseCSS e
+// themeCSS como antes. Antes, cada troca de slide baixava ~170 kB (o CSS base inteiro), e cada miniatura era um pedido
+// com o deck inteiro: pela internet, navegar nos slides ficava lento.
+(function () {
+  "use strict";
+  const css = { base: null, theme: null, baseHash: null, themeHash: null };
+
+  function absorb(data) {
+    if (typeof data.baseCSS === "string") { css.base = data.baseCSS; css.baseHash = data.baseHash || null; }
+    if (typeof data.themeCSS === "string") { css.theme = data.themeCSS; css.themeHash = data.themeHash || null; }
+    return { ...data, baseCSS: css.base ?? "", themeCSS: css.theme ?? "" };
+  }
+  async function post(url, body) {
+    const res = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ...body, baseHash: css.base != null ? css.baseHash : undefined, themeHash: css.theme != null ? css.themeHash : undefined }),
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return absorb(await res.json());
+  }
+
+  window.SagaRender = {
+    // o slide da tela: { slide, index, spec } -> resposta do render-slide, com baseCSS/themeCSS preenchidos
+    slide: (body) => post("api/render-slide", body),
+    // miniaturas em lote: { indices, spec } -> { slides: [{ index, html }], baseCSS, themeCSS }
+    slides: (body) => post("api/render-slides", body),
+    // para os testes: o que está guardado
+    _cache: css,
+  };
+})();

package/src/studio/render-routes.js

@@ -0,0 +1,87 @@
+// O slide desenhado para o editor (/api/render-slide), as miniaturas em lote (/api/render-slides) e os arquivos do
+// deck que elas mostram (/api/deck-asset). Pela internet (servidor, portal), navegar nos slides ficava lento:
+// - o CSS base (~160 kB) e o dos temas, iguais em todo clique, desciam de novo a cada troca de slide. Agora o editor
+//   diz a versão que já tem (baseHash/themeHash) e só recebe o que mudou;
+// - cada miniatura era um pedido, com o deck inteiro;
+// - as fotos e os vídeos iam embutidos no HTML (base64): um slide com foto passava de 5 MB, em cada clique e em cada
+//   miniatura. Agora vão por endereço, com a data do arquivo no endereço: o navegador baixa uma vez e guarda.
+// A pasta das imagens é a que o servidor conhece (a do deck aberto), nunca a que vem no pedido: no multiusuário, um
+// `_dir` mandado pelo navegador lia arquivos da biblioteca de outra pessoa.
+import crypto from "node:crypto";
+import fs from "node:fs";
+import path from "node:path";
+import { renderSlide } from "../build.js";
+
+const hashes = new Map(); // texto do CSS -> hash (o CSS base é o mesmo enquanto o processo vive)
+function hashOf(css) {
+  let h = hashes.get(css);
+  if (!h) {
+    h = crypto.createHash("sha1").update(css).digest("hex").slice(0, 16);
+    if (hashes.size > 50) hashes.clear();
+    hashes.set(css, h);
+  }
+  return h;
+}
+
+// a resposta sem o CSS que o editor já tem; sempre com os hashes, para ele pedir sem o CSS da próxima vez
+export function withoutKnownCSS(rendered, { baseHash, themeHash } = {}) {
+  const { baseCSS = "", themeCSS = "", ...rest } = rendered;
+  const bh = hashOf(baseCSS), th = hashOf(themeCSS);
+  return { ...rest, baseHash: bh, themeHash: th, ...(baseHash === bh ? {} : { baseCSS }), ...(themeHash === th ? {} : { themeCSS }) };
+}
+
+export const MAX_BATCH = 24;
+const ASSET_TYPES = { png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", avif: "image/avif", svg: "image/svg+xml", mp4: "video/mp4", webm: "video/webm", ogg: "video/ogg" };
+
+// pastas de onde o editor pode mostrar arquivos: a biblioteca da pessoa, a pasta do deck aberto e as do sagadeck
+function assetRoots(W, extra) {
+  return [W.library?.root, W.spec?._dir, W.file && path.dirname(W.file), ...extra].filter(Boolean).map((d) => path.resolve(d));
+}
+const inside = (f, dir) => f === dir || f.startsWith(dir + path.sep);
+
+// endereço de um arquivo do deck (o caminho por último: o player reconhece o vídeo pela terminação)
+export function assetURL(file) {
+  const st = fs.statSync(file, { throwIfNoEntry: false });
+  return `api/deck-asset?v=${st ? Math.round(st.mtimeMs).toString(36) + st.size.toString(36) : 0}&p=${encodeURIComponent(path.resolve(file))}`;
+}
+
+// o deck como o servidor conhece: a pasta das imagens é a do deck aberto, e os arquivos vão por endereço
+function serverDeck(spec, W) {
+  const deck = { ...(spec || W.spec) };
+  if (W.spec) deck._dir = W.spec._dir; else delete deck._dir;
+  deck._assetURL = assetURL;
+  return deck;
+}
+
+export async function renderRoutes({ req, res, pathname, url, W, readJSON, roots = [] }) {
+  const json = (obj) => { res.writeHead(200, { "Content-Type": "application/json" }); res.end(JSON.stringify(obj)); return true; };
+  if (pathname === "/api/render-slide" && req.method === "POST") {
+    const { slide, index, spec, baseHash, themeHash } = await readJSON(req);
+    return json(withoutKnownCSS(renderSlide(slide, index ?? 0, serverDeck(spec, W)), { baseHash, themeHash }));
+  }
+  if (pathname === "/api/render-slides" && req.method === "POST") {
+    const { indices, spec, baseHash, themeHash } = await readJSON(req);
+    const deck = serverDeck(spec, W);
+    const slides = [];
+    let first = null;
+    for (const i of [].concat(indices || []).slice(0, MAX_BATCH)) {
+      const s = deck.slides?.[i];
+      if (!s) continue;
+      // foto de miniatura só desce quando a miniatura aparece (as de fora da tela disputavam a conexão com o resto)
+      try { const r = renderSlide(s, i, deck); first ||= r; slides.push({ index: i, html: r.html.replace(/<img (?![^>]*\bloading=)/g, '<img loading="lazy" decoding="async" ') }); } catch (e) { slides.push({ index: i, error: e.message }); }
+    }
+    const css = first ? withoutKnownCSS(first, { baseHash, themeHash }) : {};
+    return json({ baseHash: css.baseHash, themeHash: css.themeHash, baseCSS: css.baseCSS, themeCSS: css.themeCSS, slides });
+  }
+  if (pathname === "/api/deck-asset" && (req.method === "GET" || req.method === "HEAD")) {
+    const file = path.resolve(String(url.searchParams.get("p") || ""));
+    const type = ASSET_TYPES[path.extname(file).slice(1).toLowerCase()];
+    const st = type && assetRoots(W, roots).some((d) => inside(file, d)) ? fs.statSync(file, { throwIfNoEntry: false }) : null;
+    if (!st?.isFile()) { res.writeHead(404, { "Content-Type": "application/json" }); res.end(JSON.stringify({ error: "Arquivo não encontrado." })); return true; }
+    // a data e o tamanho estão no endereço (v=): mudou o arquivo, muda o endereço; o mesmo endereço nunca muda
+    res.writeHead(200, { "Content-Type": type, "Content-Length": st.size, "Cache-Control": "private, max-age=31536000, immutable" });
+    if (req.method === "HEAD") res.end(); else fs.createReadStream(file).pipe(res);
+    return true;
+  }
+  return false;
+}

package/src/studio/reveal.js

@@ -0,0 +1,12 @@
+// Abre a pasta (ou mostra o arquivo selecionado) no Explorador do Windows: "abrir a pasta" das variáveis, "Configurar"
+// das identidades. Nos testes (SAGADECK_TEST_ISOLATED, test/isolate.js), nunca: o teste das identidades clicava em
+// Configurar e abria uma janela de verdade na pasta temporária do teste; a pasta era apagada, a janela voltava para a
+// Temp e ficava aberta. Em dois dias eram 19 janelas, ~6 GB de memória e muita CPU vigiando a Temp (onde os testes
+// criam e apagam milhares de arquivos): a máquina toda ficava lenta. Todo explorer.exe do Studio passa por aqui.
+import { spawn } from "node:child_process";
+
+export function reveal(target, { select = false, platform = process.platform, env = process.env } = {}) {
+  if (platform !== "win32" || env.SAGADECK_TEST_ISOLATED === "1") return false;
+  spawn("explorer.exe", [select ? `/select,${target}` : target], { detached: true, stdio: "ignore" }).unref();
+  return true;
+}

package/src/studio/server.js

@@ -2,6 +2,9 @@ import { lookAt, readBody, readJSON } from "./request-helpers.js";
 import { workspaceResolver, scopePreviewHTML, staleTab } from "./workspaces.js";
 import { cancellable, respond } from "./ai-response.js";
 import {chatErrorResult,installErrorResponses} from './errors.js';
+import { installCompression } from "./compress.js";
+import { renderRoutes } from "./render-routes.js";
+import { reveal } from "./reveal.js";
 // sagadeck Studio · Servidor HTTP local para o editor visual PowerPoint + Chat Lateral IA
 import { slideCopyRoutes } from "./slide-copy-routes.js";
 import { publicScript } from "./public-files.js";
@@ -18,7 +21,6 @@ import crypto from "node:crypto";
 import os from "node:os";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { spawn } from "node:child_process";
 import YAML from "yaml";
 import { buildHTML, renderSlide, loadSpec, inferLayout, setFitDefaults } from "../build.js";
 import { loadPreferences, savePreferences, preferencesFile, PREF_SCHEMA } from "../preferences.js";
@@ -401,6 +403,7 @@ export function createStudioServer(deckPath = null, opts = {}) {
     res.setHeader("Content-Security-Policy", "frame-ancestors 'self'");
     res.setHeader("Cross-Origin-Resource-Policy", "same-origin");
 
+    installCompression(req, res); // gzip quando o navegador aceita (compress.js); por dentro do ajuste das respostas de erro
     installErrorResponses(res);
     const url = new URL(req.url, `http://${req.headers.host || "localhost"}`);
     const pathname = url.pathname;
@@ -591,7 +594,7 @@ export function createStudioServer(deckPath = null, opts = {}) {
         if (blocked) { res.writeHead(blocked.code, { "Content-Type": "application/json" }); res.end(JSON.stringify({ error: "Configurar identidades só no Studio desta máquina." })); return; }
         const { ensureIdentitiesFile } = await import("../identity.js");
         const file = ensureIdentitiesFile();
-        if (process.platform === "win32") spawn("explorer.exe", [`/select,${file}`], { detached: true, stdio: "ignore" }).unref();
+        reveal(file, { select: true }); // nunca nos testes (reveal.js)
         res.writeHead(200, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ file }));
         return;
@@ -793,14 +796,8 @@ export function createStudioServer(deckPath = null, opts = {}) {
         return;
       }
 
-      if (pathname === "/api/render-slide" && req.method === "POST") {
-        const { slide, index, spec } = await readJSON(req);
-        const deckSpec = spec || W.spec;
-        const rendered = renderSlide(slide, index ?? 0, deckSpec);
-        res.writeHead(200, { "Content-Type": "application/json" });
-        res.end(JSON.stringify(rendered));
-        return;
-      }
+      // o slide do editor e as miniaturas em lote, sem reenviar o CSS que o editor já tem (render-routes.js)
+      if (["/api/render-slide", "/api/render-slides", "/api/deck-asset"].includes(pathname) && await renderRoutes({ req, res, pathname, url, W, readJSON, roots: [MODEL_ASSETS_DIR, ...TEMPLATE_DIRS] })) return;
 
       if (pathname === "/api/icons" && req.method === "GET") {
         const q = url.searchParams.get("q") || "";

package/src/video-player.js

@@ -1,6 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { esc } from './markup.js';
+import { fileSrc } from './elements.js';
 import {iconSVG} from './figures/icons.js';
 
 export function youtubeId(value) {
@@ -20,14 +21,14 @@ export function videoPlayer(e, ctx = {}) {
     const file = path.resolve(ctx.baseDir || process.cwd(), url);
     if (fs.existsSync(file)) {
       const mime = /\.mp4$/i.test(file) ? 'video/mp4' : /\.webm$/i.test(file) ? 'video/webm' : 'video/ogg';
-      url = `data:${mime};base64,${fs.readFileSync(file).toString('base64')}`;
+      url = fileSrc(file, mime, ctx); // no editor, o endereço do arquivo (elements.js: fileSrc)
     } else { ctx.warnings?.push(`Vídeo não encontrado: ${url}`); return `<div class="fig-pending">${label}: arquivo não encontrado</div>`; }
   }
   if (/\.(mp4|webm|ogg)(?:\?|$)|^data:video\//i.test(url)) {
     let poster=e.poster;
     if(poster&&!/^(https?:|data:)/i.test(poster)){
       const file=path.resolve(ctx.baseDir||process.cwd(),poster);
-      if(fs.existsSync(file)){const ext=path.extname(file).slice(1).toLowerCase();poster=`data:image/${ext==='jpg'?'jpeg':ext};base64,${fs.readFileSync(file).toString('base64')}`;}
+      if(fs.existsSync(file)){const ext=path.extname(file).slice(1).toLowerCase();poster=fileSrc(file,`image/${ext==='jpg'?'jpeg':ext}`,ctx);}
       else ctx.warnings?.push(`Poster não encontrado: ${poster}`);
     }
     // loop silencioso (fundo vivo, detalhe animado): sem controles, repete sozinho