sagadeck 1.3.0 → 1.4.0

package/src/ai/llm.js

@@ -132,6 +132,13 @@ async function chatUnmetered(messages, opts = {}) {
 const noThinkField = new Set();
 async function chatOnce(messages, opts = {}) {
   const cfg = opts.cfg || llmConfig();
+  // modelo que entrou em laço pensando (o limite da 1ª palavra estourou sem texto nenhum): uma tentativa a mais, sem
+  // raciocínio; a mesma tarefa sem pensar sai em segundos. Sem isso a conferência de cobertura e a correção visual
+  // se perdiam depois de 10 min de espera.
+  if (opts.think !== false && !opts.noLoopRetry) {
+    try { return await chatOnce(messages, { ...opts, noLoopRetry: true }); }
+    catch (e) { if (e.code !== "AI_THINKING_LOOP" || opts.signal?.aborted) throw e; opts.onRetry?.({ attempt: 2, maxAttempts: 2, code: e.code }); return chatOnce(messages, { ...opts, think: false, noLoopRetry: true }); }
+  }
   if (opts.think === false && !noThinkField.has(cfg.url)) {
     try { return await chatOnceRaw(messages, { ...opts, cfg, reasoningOff: true }); }
     catch (e) { if (e.status !== 400 || !/reasoning/i.test(e.message)) throw e; noThinkField.add(cfg.url); }
@@ -192,12 +199,18 @@ async function chatStream(body, onDelta, cfg, signal) {
   let timer;
   const arm = (ms) => { clearTimeout(timer); timer = setTimeout(() => idle.abort(Object.assign(new Error("tempo esgotado"), { name: "TimeoutError" })), ms); };
   arm(cfg.firstTimeoutMs ?? cfg.timeoutMs);
+  // Até a 1ª palavra de TEXTO o limite é o firstTimeoutMs, mesmo com o relay mandando "estou vivo" (e o raciocínio)
+  // a cada poucos segundos: o modelo que entra em laço pensando zerava o relógio para sempre e a tarefa ficava
+  // parada horas em "Pensando…". Quem chamou trata o erro (a correção visual preserva o deck que já existe).
+  const firstMs = cfg.firstTimeoutMs ?? cfg.timeoutMs;
+  let firstTimer = setTimeout(() => idle.abort(Object.assign(new Error("sem texto"), { name: "TimeoutError", noText: true })), firstMs);
+  const wrote = () => { clearTimeout(firstTimer); firstTimer = null; };
   const sig = signal ? AbortSignal.any([signal, idle.signal]) : idle.signal;
-  try { return await readStream(body, onDelta, cfg, signal, sig, () => arm(cfg.timeoutMs)); }
-  finally { clearTimeout(timer); }
+  try { return await readStream(body, onDelta, cfg, signal, sig, () => arm(cfg.timeoutMs), wrote, () => idle.signal.reason?.noText ? firstMs : 0); }
+  finally { clearTimeout(timer); if (firstTimer) clearTimeout(firstTimer); }
 }
 
-async function readStream(body, onDelta, cfg, signal, sig, alive) {
+async function readStream(body, onDelta, cfg, signal, sig, alive, wrote = () => {}, noTextFor = () => 0) {
   let res;
   try {
     res = await fetch(`${cfg.url}/chat/completions`, {
@@ -249,6 +262,7 @@ async function readStream(body, onDelta, cfg, signal, sig, alive) {
         if (ev.error) throw new LLMError(`LLM falhou no meio da resposta: ${ev.error.message || JSON.stringify(ev.error)}`,{status:Number(ev.error.status||ev.error.code)||undefined,code:/upstream.*terminated.*stream|provider_unavailable/i.test(ev.error.message||'')?'AI_PROVIDER_INTERRUPTED':undefined});
         const piece = ev.choices?.[0]?.delta?.content;
         if (piece) {
+          wrote();
           text += piece;
           onDelta(piece, text);
         }
@@ -260,8 +274,8 @@ async function readStream(body, onDelta, cfg, signal, sig, alive) {
   } catch (e) {
     if (e instanceof LLMError) throw e;
     if (signal?.aborted) throw new LLMError("Parado a pedido.", { cause: e, aborted: true });
-    const why = e.name === "TimeoutError" ? `nada chegou em ${cfg.timeoutMs / 1000} s` : e.message;
-    throw new LLMError(`A resposta do LLM foi interrompida (${why}).`, { cause: e });
+    const why = noTextFor() ? `${noTextFor() / 1000} s pensando sem escrever nada` : e.name === "TimeoutError" ? `nada chegou em ${cfg.timeoutMs / 1000} s` : e.message;
+    throw new LLMError(`A resposta do LLM foi interrompida (${why}).`, { cause: e, ...(noTextFor() ? { code: "AI_THINKING_LOOP" } : {}) });
   }
   return { text, images: [], usage, model, finishReason };
 }

package/src/ai/quality.js

@@ -4,9 +4,41 @@ import { chat } from './llm.js';
 import { auditExploration } from '../exploration.js';
 import { varietyReport } from './variety.js';
 
+// Slide de uma frase só: statement, headline e quote (o "slide com uma frase gigante" das reclamações).
+const ONE_LINER = new Set(['statement', 'headline', 'quote']);
+const words = s => String(s || '').replace(/\$[^$]*\$/g, 'x').replace(/[=*_`^~#>\[\]()]/g, ' ').split(/\s+/).filter(Boolean).length;
+const oneLinerText = s => s.text || s.quote || (Array.isArray(s.lines) ? s.lines.map(l => (typeof l === 'string' ? l : l?.text || '')).join(' ') : '') || s.title || '';
+
+// Conferência de texto sem visão (determinística, roda sempre): frase longa em layout de impacto vira tela de uma
+// frase gigante; uma apresentação feita de frases soltas não explica nada. Os achados voltam para a correção da IA.
+export function auditText(spec, indices) {
+  const issues = [];
+  const slides = spec.slides || [];
+  for (const index of indices) {
+    const s = slides[index]; if (!s || !ONE_LINER.has(s.layout)) continue;
+    const n = words(oneLinerText(s));
+    const limit = s.layout === 'quote' ? 40 : 16;
+    if (n > limit) issues.push({ slide: index + 1, text: `Slide de frase única (${s.layout}) com ${n} palavras: vira uma frase gigante na tela. Encurte para a ideia central (até ~12 palavras) ou troque por um layout de conteúdo (split, list, cards, compare) que explique com evidência.` });
+  }
+  // título encolhido à mão (titleSize pequeno) para "dar espaço à figura": o deck fica com cada slide num tamanho de
+  // título; o layout da figura já reserva a área. Vale para os layouts com cabeçalho comum (não capa/seção/manchete).
+  for (const index of indices) {
+    const s = slides[index];
+    if (!s || !Number.isFinite(Number(s.titleSize)) || ONE_LINER.has(s.layout) || ['cover', 'section', 'end', 'kinetic', 'scenography', 'full'].includes(s.layout)) continue;
+    if (Number(s.titleSize) < 60) issues.push({ slide: index + 1, text: `Título com titleSize ${s.titleSize}, bem menor que o dos outros slides: a hierarquia do deck fica desigual. Tire o titleSize (o layout já dá a área da figura); se o título não couber, encurte o texto.` });
+  }
+  // muitas telas de frase solta: a partir da terceira (ou de 15% do deck), cada uma precisa justificar o lugar
+  const singles = slides.map((s, i) => (ONE_LINER.has(s.layout) ? i : -1)).filter(i => i >= 0);
+  const allowed = Math.max(2, Math.round(slides.length * 0.15));
+  for (const index of singles.slice(allowed)) if (indices.includes(index) && !issues.some(x => x.slide === index + 1))
+    issues.push({ slide: index + 1, text: `Há ${singles.length} slides de frase única (statement/headline/quote) no deck; o máximo é ${allowed}. Transforme este em conteúdo (o que, por que, evidência do material) ou junte a frase ao slide vizinho.` });
+  return issues;
+}
+
 export async function reviewExperience(spec, indices, { snapshot, complete = chat, onProgress, signal, briefing = '' } = {}) {
   const issues = [], unchecked = [], failures = [];
   const selected = [...new Set(indices)].filter(index => spec.slides[index]);
+  issues.push(...auditText(spec, selected));
   for (const [position, index] of selected.entries()) {
     signal?.throwIfAborted();
     const slide = spec.slides[index];

package/src/build.js

@@ -10,7 +10,7 @@ import { fileURLToPath } from "node:url";
 import YAML from "yaml";
 import { resolveTheme, themeCSS, scopedThemeCSS } from "./themes.js";
 import { identityFor, identitiesFile } from "./identity.js";
-import { LAYOUTS, SCENES } from "./layouts.js";
+import { LAYOUTS, SCENES, fullAsFigure } from "./layouts.js";
 import { applyVisualEdits } from "./visual-edits.js";
 import { el, imageSrc } from "./elements.js";
 import { iconSVG } from "./figures/icons.js";
@@ -38,6 +38,7 @@ const drawIcon = (name, size = 20) => iconSVG(name, { size, stroke: 2 }).replace
 const slug = (s) => String(s || "deck").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40) || "deck";
 
 export function inferLayout(s) {
+  if (fullAsFigure(s)) return "image"; // figura do documento em full: sem véu e sem sangrar (src/layouts.js)
   if (s.layout) return s.layout;
   if (s.elements) return "canvas";
   if (s.stats || s.kpis) return "stats";

package/src/elements.js

@@ -23,7 +23,13 @@ export const SIZES = { hero: 210, number: 250, title: 128, h2: 92, h3: 56, quote
 const FACE = { hero: "display", number: "display", title: "display", h2: "display", h3: "heading", quote: "quote", lead: "body", body: "body", small: "body", label: "label", mono: "mono", tiny: "label" };
 
 const px = (v) => (v == null ? null : typeof v === "number" ? `${v}px` : String(v));
-const colorVal = (c) => (!c ? null : /^#?[0-9a-f]{6}$/i.test(c) ? `#${String(c).replace("#", "")}` : `var(--${c})`);
+const colorVal = (c) => {
+  if (!c) return null;
+  if (/^#?[0-9a-f]{6}$/i.test(c)) return `#${String(c).replace("#", "")}`;
+  // paleta do tema é namespaced (--c-c1…): nome pelado ("c2") viraria var indefinida = preto
+  if (/^c[1-9]\d*$/.test(c) || /^(accent|alert|ink|paper)$/.test(c)) return `var(--c-${c})`;
+  return `var(--${c})`;
+};
 // cor de texto: "hi" (cor de destaque) vira a versão legível sobre o fundo (--hi-ink, src/themes.js)
 const textColorVal = (c) => (c === "hi" ? "var(--hi-ink,var(--hi))" : colorVal(c));
 
@@ -104,16 +110,26 @@ export function figureHTML(el, ctx, w, h) {
     if (!src) return `<div${attrs(el, "fig fig-pending fig-missing")} role="img" aria-label="Imagem não encontrada: ${esc(el.image)}"><div class="fp-in"><span class="fp-tag f-label">imagem não encontrada</span><span class="fp-text f-body">${esc(el.image)}</span></div></div>`;
     const flip = el.flipH || el.flipV ? `transform:scale(${el.flipH ? -1 : 1},${el.flipV ? -1 : 1});` : "";
     // recorte (crop: l/t/r/b em fração do lado, como o srcRect do PowerPoint): a imagem cresce e a caixa corta
+    // A janela é expandida (nunca encolhida) até a proporção da caixa: posicionar por % com
+    // proporções diferentes ESTICA a imagem (print de página retrato espremido na caixa paisagem).
     if (el.crop) {
-      const c = { l: +el.crop.l || 0, t: +el.crop.t || 0, r: +el.crop.r || 0, b: +el.crop.b || 0 };
+      const grown = matchCropAspect(el.crop, imageSize(el.image, ctx), w, h);
+      const c = { l: +grown.l || 0, t: +grown.t || 0, r: +grown.r || 0, b: +grown.b || 0 };
       const fw = Math.max(0.01, 1 - c.l - c.r), fh = Math.max(0.01, 1 - c.t - c.b);
-      return `<div${attrs(el, "fig fig-img fig-crop")}><img src="${src}" alt="${esc(el.alt || "")}" style="left:${(-c.l / fw) * 100}%;top:${(-c.t / fh) * 100}%;width:${100 / fw}%;height:${100 / fh}%;${flip}"></div>`;
+      // data-crop: a apresentação mede a caixa de verdade e, se a proporção não bater com a da região (caixa sem
+      // tamanho aqui, janela que não pôde crescer), encaixa a região inteira sem esticar (src/runtime/fit.js: fitCrops)
+      return `<div${attrs(el, "fig fig-img fig-crop")}><img src="${src}" alt="${esc(el.alt || "")}" data-crop="${[c.l, c.t, c.r, c.b].map((v) => +v.toFixed(5)).join(",")}" style="left:${(-c.l / fw) * 100}%;top:${(-c.t / fh) * 100}%;width:${100 / fw}%;height:${100 / fh}%;${flip}"></div>`;
     }
     // sem fit escolhido: preenche (cover), mas quando a proporção da imagem é muito diferente da caixa (fórmula, esquema
     // largo numa coluna alta; gráfico com eixo e legenda na borda) cortar perderia informação: passou de 1,25× (corte de
     // mais de 20%), cabe inteira (contain). Sem o tamanho da caixa aqui (figura do split, do layout), a mesma conta é feita
     // na apresentação, com a caixa medida (data-autofit; src/runtime/fit.js: fitImages)
     let fit = el.fit;
+    // figura recortada do documento (mapa, gráfico, tabela do paper) é evidência: nunca deforma nem perde borda.
+    // fill/stretch achatavam o mapa na caixa do slide, e o cover automático (até 20% de corte) comia eixo, legenda e
+    // escala; vira contain (inteira, na proporção do original)
+    const docImage = /contexto\/visuais\//.test(String(el.image || "").replace(/\\/g, "/"));
+    if (docImage && (!fit || /^(fill|stretch|none|cover)$/i.test(String(fit)))) fit = "contain";
     if (!fit) {
       const sz = w && h ? imageSize(el.image, ctx) : null;
       const box = w && h ? w / h : 0, img = sz && sz.h ? sz.w / sz.h : 0;
@@ -132,11 +148,37 @@ export function figureHTML(el, ctx, w, h) {
         if (pct) { box = { ...el }; delete box.w; }
       }
     }
-    return `<div${attrs(box, "fig fig-img", flow)}><img src="${src}" alt="${esc(el.alt || "")}"${el.fit ? "" : " data-autofit"} style="object-fit:${fit};${el.radius ? `border-radius:${el.radius}px;` : ""}${flip}"></div>`;
+    return `<div${attrs(box, "fig fig-img", flow)}><img src="${src}" alt="${esc(el.alt || "")}"${el.fit || docImage ? "" : " data-autofit"} style="object-fit:${fit};${el.radius ? `border-radius:${el.radius}px;` : ""}${flip}"></div>`;
   }
   return "";
 }
 
+// Expande a janela de recorte {l,t,r,b} (fração) até a proporção boxW/boxH, sem nunca
+// encolher o pedido: cresce para os lados vizinhos (respeitando 0..1). Sem w/h da caixa
+// ou sem tamanho do arquivo, devolve como veio.
+export function matchCropAspect(crop, img, boxW, boxH) {
+  const out = { l: +crop?.l || 0, t: +crop?.t || 0, r: +crop?.r || 0, b: +crop?.b || 0 };
+  if (!img?.w || !img?.h || !boxW || !boxH) return out;
+  const fw = 1 - out.l - out.r, fh = 1 - out.t - out.b;
+  if (fw <= 0 || fh <= 0) return out;
+  const boxAspect = boxW / boxH, regionAspect = (fw * img.w) / (fh * img.h);
+  if (Math.abs(regionAspect - boxAspect) / boxAspect < 0.03) return out;
+  if (regionAspect > boxAspect) {
+    // região mais larga que a caixa: cresce em cima/embaixo
+    let need = (fw * img.w) / (boxAspect * img.h) - fh;
+    const takeTop = Math.min(out.t, need);
+    out.t -= takeTop; need -= takeTop;
+    out.b = Math.max(0, out.b - need);
+  } else {
+    // região mais alta que a caixa: cresce nas laterais
+    let need = ((fh * img.h) * boxAspect) / img.w - fw;
+    const takeLeft = Math.min(out.l, need);
+    out.l -= takeLeft; need -= takeLeft;
+    out.r = Math.max(0, out.r - need);
+  }
+  return out;
+}
+
 // largura × altura do arquivo de imagem (cabeçalho de PNG, JPEG, GIF, WebP) ou null
 export function imageSize(p, ctx) {
   try {
@@ -339,8 +381,31 @@ export function importedTable(e) {
   return `<div${attrs(e, "tbx-table")}><table style="border-collapse:collapse;table-layout:fixed;width:100%"><colgroup>${cols}</colgroup>${rows}</table></div>`;
 }
 
+// O contador reescreve o texto no navegador (textContent): marcação de expoente/índice no prefixo/sufixo ("km^2^",
+// "CO~2~") vira o algarismo sobrescrito/subscrito do Unicode, que sobrevive ao textContent (saía "km^2^" cru).
+const SUP = { 0: "⁰", 1: "¹", 2: "²", 3: "³", 4: "⁴", 5: "⁵", 6: "⁶", 7: "⁷", 8: "⁸", 9: "⁹", "-": "⁻", "+": "⁺" };
+const SUB = { 0: "₀", 1: "₁", 2: "₂", 3: "₃", 4: "₄", 5: "₅", 6: "₆", 7: "₇", 8: "₈", 9: "₉", "-": "₋", "+": "₊" };
+export const unicodeScripts = (t) => String(t ?? "").replace(/\^([-+]?\d+)\^/g, (_, d) => [...d].map((c) => SUP[c]).join("")).replace(/~([-+]?\d+)~/g, (_, d) => [...d].map((c) => SUB[c]).join(""));
+// Valor do contador escrito como texto ("37,67%", "1.403", "R$ 2,5 mi", "1521 km^2^"): Number() dava NaN e o slide
+// mostrava "NaN". Separa o que vem antes/depois (prefixo/sufixo) e lê o número no formato brasileiro (milhar com
+// ponto, decimal com vírgula); as casas decimais escritas valem. Sem número nenhum, o texto aparece como está.
+export function parseCounterValue(raw) {
+  if (typeof raw === "number") return { value: raw };
+  const m = /^(\D*?)(-?\d[\d.,]*)(.*)$/s.exec(String(raw ?? "").trim());
+  if (!m) return null;
+  let num = m[2].replace(/[.,]$/, ""), dec = 0;
+  if (num.includes(",")) { dec = num.split(",").pop().length; num = num.replace(/\./g, "").replace(",", "."); }
+  else if (/^-?\d{1,3}(\.\d{3})+$/.test(num)) num = num.replace(/\./g, "");
+  else if (num.includes(".")) dec = num.split(".").pop().length;
+  const value = Number(num);
+  return Number.isFinite(value) ? { value, prefix: m[1], suffix: m[3] + (m[2].length > num.length && /[.,]$/.test(m[2]) ? m[2].slice(-1) : ""), dec } : null;
+}
+
 export function counter(e) {
-  const v = Number(e.counter);
+  const parsed = parseCounterValue(e.counter);
+  if (!parsed) return `<div${attrs(e, `t f-display r-number pl`, `font-size:${e.size || SIZES[e.as || "number"]}px;`)}${e.fit ? " data-fit" : ""}>${md(String(e.counter ?? ""))}</div>`;
+  e = { ...e, prefix: unicodeScripts(`${e.prefix ?? ""}${parsed.prefix ?? ""}`), suffix: unicodeScripts(`${parsed.suffix ?? ""}${e.suffix ?? ""}`), decimals: e.decimals ?? (typeof e.counter === "number" ? undefined : parsed.dec) };
+  const v = parsed.value;
   const dec = e.decimals ?? (v % 1 ? 1 : 0);
   const shown = v.toLocaleString("pt-BR", { minimumFractionDigits: dec, maximumFractionDigits: dec });
   const size = e.size || SIZES[e.as || "number"];
@@ -412,7 +477,7 @@ export function cards(e, ctx) {
         ${badgeHtml}
       </div>
       ${c.title ? `<div class="cd-title t f-heading">${md(c.title)}</div>` : ""}
-      ${c.text ? `<div class="cd-text t f-body">${md(c.text)}</div>` : ""}
+      ${c.text ? `<div class="cd-text t f-body${/^\s*\$\$?[^$]+\$\$?\s*$/.test(String(c.text)) ? " cd-math" : ""}">${md(c.text)}</div>` : ""}
       ${extraWidgets}
       ${c.foot ? `<div class="cd-foot t f-label">${md(c.foot)}</div>` : ""}
       ${c.goto != null && c.goto !== "" ? `<span class="goto-mark" aria-hidden="true">${iconSVG("arrow-up-right", { size: 30, stroke: 2 })}</span>` : ""}
@@ -441,7 +506,7 @@ export function stats(e, ctx) {
         ${iconHtml}
         ${trendHtml}
       </div>
-      <div class="st-val t f-display" style="${valColor}">${esc(String(st.value ?? st.stat ?? ""))}</div>
+      <div class="st-val t f-display" style="${valColor}">${md(String(st.value ?? st.stat ?? ""))}</div>
       ${st.label ? `<div class="st-lab t f-heading">${md(st.label)}</div>` : ""}
       ${st.text ? `<div class="st-sub t f-body">${md(st.text)}</div>` : ""}
     </div>`;

package/src/figures/charts.js

@@ -15,7 +15,13 @@ import { esc } from "../markup.js";
 import { iconSVG } from "./icons.js";
 import { humanBody } from "./pictos.js";
 
-const cvar = (c, d) => (!c ? `var(--${d})` : /^#?[0-9a-f]{6}$/i.test(c) ? `#${String(c).replace("#", "")}` : `var(--${c})`);
+const cvar = (c, d) => {
+  if (!c) return `var(--${d})`;
+  if (/^#?[0-9a-f]{6}$/i.test(c)) return `#${String(c).replace("#", "")}`;
+  // paleta do tema é namespaced (--c-c1…): nome pelado ("c3") viraria var indefinida = preto
+  if (/^c[1-9]\d*$/.test(c) || /^(accent|alert|ink|paper)$/.test(c)) return `var(--c-${c})`;
+  return `var(--${c})`;
+};
 const fmt = (v, o) => {
   if (v == null || isNaN(v)) return "";
   const d = o.decimals ?? (Math.abs(v) < 10 && v % 1 ? 1 : 0);

package/src/fiscal/normalize.js

@@ -14,8 +14,19 @@ const COLOR_MAP = {
   branco: "FFFFFF",
 };
 
-export function normalizeSpec(rawSpec) {
-  if (!rawSpec || typeof rawSpec !== "object") return rawSpec;
+// Vírgula em valor de fluxo (`text: 3,5 peixes…` dentro de [{...}]) que o YAML partiu em
+// {text: 3, "5 peixes…": null}: junta de volta. Chave nula começando com dígito nunca é intencional.
+function fixCommaSplit(o) {
+  if (!o || typeof o !== "object" || Array.isArray(o)) return;
+  for (const k of Object.keys(o)) {
+    if (o[k] === null && /^\d/.test(k)) {
+      const target = ["text", "title", "label", "when"].find((f) => typeof o[f] === "number" || typeof o[f] === "string");
+      if (target) { o[target] = `${o[target]},${k}`; delete o[k]; }
+    }
+  }
+}
+
+export function normalizeSpec(rawSpec) {  if (!rawSpec || typeof rawSpec !== "object") return rawSpec;
   const spec = JSON.parse(JSON.stringify(rawSpec));
 
   // 1. Normalização no nível da raiz
@@ -100,6 +111,12 @@ export function normalizeSpec(rawSpec) {
       });
     }
 
+    // Vírgula em valor de fluxo YAML (`text: 3,5 peixes…` dentro de [{...}]) quebra em
+    // {text: 3, "5 peixes…": null}: junta de volta antes que vire dado truncado no slide.
+    for (const f of ["events", "steps", "items"]) {
+      if (Array.isArray(s[f])) s[f].forEach(fixCommaSplit);
+    }
+
     // Cores comuns em português
     if (s.color && COLOR_MAP[s.color.toLowerCase()]) {
       s.color = COLOR_MAP[s.color.toLowerCase()];

package/src/import/crop.js

@@ -45,14 +45,40 @@ export async function cropRegions(jobs) {
       const outs = await page.evaluate(async ([data, list]) => {
         const img = new Image(); img.src = data; await img.decode();
         return list.map((j) => {
-          const x = Math.max(0, Math.floor(j.x)), y = Math.max(0, Math.floor(j.y));
-          const w = Math.max(1, Math.min(img.width - x, Math.ceil(j.w))), h = Math.max(1, Math.min(img.height - y, Math.ceil(j.h)));
-          const c = document.createElement("canvas"); c.width = w; c.height = h;
-          c.getContext("2d").drawImage(img, x, y, w, h, 0, 0, w, h);
-          return c.toDataURL("image/png");
+          let x = Math.max(0, Math.floor(j.x)), y = Math.max(0, Math.floor(j.y));
+          let w = Math.max(1, Math.min(img.width - x, Math.ceil(j.w))), h = Math.max(1, Math.min(img.height - y, Math.ceil(j.h)));
+          let c = document.createElement("canvas"); c.width = w; c.height = h;
+          let g = c.getContext("2d", { willReadFrequently: true }); g.drawImage(img, x, y, w, h, 0, 0, w, h);
+          // densidade de tinta (fração de pixels não-papel): recorte quase em branco = caixa errada (medida antes de aparar)
+          let ink = 0;
+          try {
+            const d = g.getImageData(0, 0, w, h).data;
+            for (let i = 0; i < d.length; i += 16) { if ((d[i] + d[i + 1] + d[i + 2]) / 3 < 235) ink++; }
+            ink /= d.length / 16;
+          } catch { ink = 1; }
+          // trim: apara a margem de papel em volta (linha/coluna inteira branca), com um respiro de 6 px.
+          // Só papel puro sai: céu claro numa foto ou fundo cinza de gráfico não é branco puro em toda a linha.
+          if (j.trim && w > 24 && h > 24) {
+            const d = g.getImageData(0, 0, w, h).data;
+            const paper = (i) => d[i] >= 246 && d[i + 1] >= 246 && d[i + 2] >= 246;
+            const rowBlank = (r) => { for (let q = 0; q < w; q++) if (!paper((r * w + q) * 4)) return false; return true; };
+            const colBlank = (q, t0, t1) => { for (let r = t0; r <= t1; r++) if (!paper((r * w + q) * 4)) return false; return true; };
+            let t = 0, b = h - 1, l = 0, r = w - 1;
+            while (t < b && rowBlank(t)) t++;
+            while (b > t && rowBlank(b)) b--;
+            while (l < r && colBlank(l, t, b)) l++;
+            while (r > l && colBlank(r, t, b)) r--;
+            const pad = 6, nl = Math.max(0, l - pad), nt = Math.max(0, t - pad), nw = Math.min(w, r + pad + 1) - nl, nh = Math.min(h, b + pad + 1) - nt;
+            if (r > l && b > t && (nw < w || nh < h)) {
+              const c2 = document.createElement("canvas"); c2.width = nw; c2.height = nh;
+              const g2 = c2.getContext("2d", { willReadFrequently: true }); g2.drawImage(c, nl, nt, nw, nh, 0, 0, nw, nh);
+              c = c2; g = g2; w = nw; h = nh;
+            }
+          }
+          return { png: c.toDataURL("image/png"), ink, size: { w, h } };
         });
-      }, [data, list.map(({ x, y, w, h }) => ({ x, y, w, h }))]);
-      outs.forEach((u, k) => { fs.writeFileSync(list[k].dst, Buffer.from(u.split(",")[1], "base64")); done.push(list[k].dst); });
+      }, [data, list.map(({ x, y, w, h, trim }) => ({ x, y, w, h, trim }))]);
+      outs.forEach((u, k) => { fs.writeFileSync(list[k].dst, Buffer.from(u.png.split(",")[1], "base64")); list[k].ink = u.ink; list[k].size = u.size; done.push(list[k].dst); });
     }
   } finally { await browser.close(); }
   return done;

package/src/layouts.js

@@ -97,6 +97,20 @@ function chartsSideBySide(content) {
   return out;
 }
 
+// `full` com figura do documento (mapa, gráfico, tabela recortada do paper) ou figura inteira (fit: contain) e texto:
+// o véu por cima cobria a legenda do mapa e os eixos, e a figura sangrava cortando a borda. Evidência não leva texto
+// por cima nem sangra: vira a composição do layout image (título no alto, figura inteira, legenda embaixo). Para
+// figura do documento até overlay: none com título vale assim (senão título e legenda sumiam do slide).
+export function fullAsFigure(s) {
+  if (s?.layout !== "full") return false;
+  const f = s.figure ?? (s.image ? { image: s.image } : null);
+  const fig = typeof f === "string" ? { image: f } : f;
+  if (!fig || typeof fig !== "object" || !fig.image || fig.image_prompt || fig.video) return false;
+  if (!(s.title || s.caption || s.kicker)) return false;
+  const doc = /contexto\/visuais\//.test(String(fig.image).replace(/\\/g, "/"));
+  return doc || ((fig.fit || s.fit) === "contain" && s.overlay !== "none");
+}
+
 export const LAYOUTS = {
   portal(s,ctx){return portalHTML(s,ctx,head)+src(s)+add(s,ctx);},
   playground(s,ctx){return playgroundHTML(s,ctx,head)+src(s)+add(s,ctx);},
@@ -124,9 +138,11 @@ export const LAYOUTS = {
   },
 
   statement(s, ctx) {
-    // o tamanho pelo comprimento: frase curta é manchete; parágrafo inteiro em letra de título ocupava a tela toda
-    const words = String(s.text || (s.lines || []).map((l) => (typeof l === "string" ? l : l?.text || "")).join(" ")).split(/\s+/).filter(Boolean).length;
-    const role = s.as || (words > 45 ? "lead" : words > 22 ? "h2" : "title");
+    // o tamanho pelo comprimento EM CARACTERES: contar palavras falhava com palavra longa
+    // e frase de 100+ caracteres em destaque grande ocupava a tela (headline é para frase curta).
+    // `as` explícito vence.
+    const chars = String(s.text || (s.lines || []).map((l) => (typeof l === "string" ? l : l?.text || "")).join(" ")).length;
+    const role = s.as || (chars > 100 ? "lead" : chars > 60 ? "h2" : "title");
     const lines = s.lines
       ? s.lines.map((l, i) => {
           const o = typeof l === "string" ? { text: l } : l;
@@ -437,6 +453,7 @@ export const LAYOUTS = {
   },
 
   image(s, ctx) {
+    if (typeof s.figure === "string") s = { ...s, figure: { image: s.figure } }; // full com figure: caminho (fullAsFigure)
     // figura inteira à vista (fit: contain: gráfico, tabela, esquema): a legenda vai embaixo, sem cobrir; foto (cover)
     // segue sangrando, com o cartão por cima
     const contain = (s.figure?.fit || s.fit) === "contain" || (!s.fit&&!s.figure?.fit&&String(s.figure?.image||s.image||'').replace(/\\/g,'/').includes('contexto/visuais/'));
@@ -534,6 +551,7 @@ export const LAYOUTS = {
     const f = s.figure ?? (s.image || s.image_prompt ? { image: s.image, image_prompt: s.image_prompt } : null);
     const fig = f == null ? "" : typeof f === "object" ? { fit: s.fit || "cover", ...f } : { image: f, fit: s.fit || "cover" };
     const hasText = s.title || s.caption || s.kicker;
+    if (fullAsFigure(s)) return LAYOUTS.image({ ...s, figure: { ...fig, fit: "contain" }, fit: undefined }, ctx);
     const pos = s.overlay || (hasText ? "bottom" : "none");
     // figura desenhada (gráfico, ícone, diagrama) com texto à esquerda: vai para a direita em vez de ficar por baixo do texto
     const drawn = fig && !(fig.image || fig.image_prompt || fig.video);
@@ -543,7 +561,11 @@ export const LAYOUTS = {
 
   // Manchete: uma frase enorme que ocupa o slide (encolhe para caber)
   headline(s, ctx) {
-    return `<div class="L-headline">${kicker(s)}${text(s.text || s.title, s.as || "hero", { class: "hl-text e", style: "--d:1;", fit: true, size: s.size || 300 })}
+    // manchete é para frase curta; frase longa em "hero" de 300 px virava o slide de uma frase gigante (objetivo
+    // inteiro do paper na tela). Como no statement, o tamanho segue o comprimento; `as`/`size` explícitos vencem.
+    const chars = String(s.text || s.title || "").replace(/[=*_`^~]/g, "").length;
+    const role = s.as || (chars > 100 ? "h2" : chars > 60 ? "title" : "hero");
+    return `<div class="L-headline">${kicker(s)}${text(s.text || s.title, role, { class: "hl-text e", style: "--d:1;", fit: true, size: s.size || (role === "hero" ? 300 : undefined) })}
       ${s.caption ? text(s.caption, "lead", { class: "hl-cap muted e", style: "--d:2;" }) : ""}</div>${src(s)}${add(s, ctx)}`;
   },
 

package/src/runtime/base.css

@@ -247,6 +247,9 @@ code.f-mono{font-size:.86em;background:color-mix(in srgb,var(--fg) 9%,transparen
 .cd-num{font-size:110px;line-height:.9}
 .cd-title{font-size:52px}
 .cd-text{font-size:33px;color:var(--muted)}
+/* cartão cujo texto é só uma fórmula: a fórmula é o conteúdo, não nota de rodapé (no tamanho do texto ela sumia) */
+.cd-text.cd-math{font-size:52px;color:var(--fg);margin:.15em 0}
+.card-hi .cd-text.cd-math{color:var(--on-hi)}
 .card-hi .cd-text{color:var(--on-hi)}
 .cd-foot{margin-top:auto;font-size:20px;color:var(--muted)}
 
@@ -439,16 +442,16 @@ code.f-mono{font-size:.86em;background:color-mix(in srgb,var(--fg) 9%,transparen
 .av-perigo .av-icon{color:var(--alert)}
 .av-perigo .av-title{text-transform:uppercase;letter-spacing:.04em}
 
-.tl{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:40px;flex:1;align-content:center}
+.tl{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:40px;flex:1;align-content:center;min-height:520px}
 .tl-line{position:absolute;left:0;right:0;top:50%;height:6px;background:var(--line);border-radius:3px;display:none}
-.tl-ev{position:relative;display:flex;flex-direction:column;gap:16px;padding-top:62px}
+.tl-ev{position:relative;display:flex;flex-direction:column;gap:20px;padding-top:62px;min-width:0}
 .tl-dot{position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;background:var(--bg);border:8px solid var(--fg)}
 .tl-ev::before{content:"";position:absolute;left:44px;right:-40px;top:19px;height:6px;background:var(--line)}
 .tl-ev:last-child::before{display:none}
 .tl-ev.hl .tl-dot{background:var(--hi)}
-.tl-when{font-size:96px;line-height:.9}
+.tl-when{font-size:calc(max(54px, 96px - max(0px, (var(--n, 3) - 3) * 13px)));line-height:.95;overflow-wrap:anywhere}
 .tl-ev.hl .tl-when{color:var(--em)}
-.tl-title{font-size:42px}
+.tl-title{font-size:42px;overflow-wrap:anywhere}
 .tl-text{font-size:30px;color:var(--muted)}
 .tl-tag{font-size:20px;color:var(--em)}
 .tl-after{margin-top:auto}

package/src/runtime/fit.js

@@ -225,6 +225,24 @@
     });
   }
 
+  // Recorte (crop): a região vira a caixa por porcentagem, o que só é proporcional quando a caixa tem a proporção da
+  // região. Medida a caixa de verdade, se não bater (mais de 3%), a região inteira é encaixada no centro (como
+  // contain), em vez de esticar a figura na largura ou na altura.
+  function fitCrops(root) {
+    root.querySelectorAll(".fig-crop img[data-crop]").forEach((img) => {
+      if (!img.naturalWidth) { if (!img.dataset.cropWait) { img.dataset.cropWait = "1"; img.addEventListener("load", () => fitCrops(img.parentElement || img), { once: true }); } return; }
+      const box = img.parentElement, W = box.clientWidth, H = box.clientHeight;
+      if (!W || !H) return;
+      const [l, t, r, b] = img.dataset.crop.split(",").map(Number);
+      const fw = Math.max(0.01, 1 - l - r), fh = Math.max(0.01, 1 - t - b);
+      const region = (fw * img.naturalWidth) / (fh * img.naturalHeight);
+      if (Math.abs(region - W / H) / (W / H) < 0.03) return;
+      const rw = region > W / H ? W : H * region, rh = rw / region; // a região inteira, sem esticar
+      const iw = rw / fw, ih = rh / fh;
+      Object.assign(img.style, { width: `${iw}px`, height: `${ih}px`, left: `${(W - rw) / 2 - l * iw}px`, top: `${(H - rh) / 2 - t * ih}px` });
+    });
+  }
+
   // Passos do exercício resolvido (solution): a coluna é alinhada pelo fim (o passo novo embaixo) e o que sobra vaza por
   // cima, apagando. Antes de cortar, encolhe (até 60%) para os passos caberem inteiros. Quadro escondido não mede: o
   // runtime chama de novo a cada clique.
@@ -257,6 +275,7 @@
   function fitAllIn(root) {
     fitStages(root);
     fitImages(root);
+    fitCrops(root);
     fitSteps(root);
     fitChartText(root);
     fitCode(root);
@@ -264,5 +283,5 @@
     fitText(root);
   }
 
-  g.SagadeckFit = { fitText: fitAllIn, fitChartText, fitCode, fitWide, fitImages, fitSteps, fitStages, shrink };
+  g.SagadeckFit = { fitText: fitAllIn, fitChartText, fitCode, fitWide, fitImages, fitCrops, fitSteps, fitStages, shrink };
 })(typeof window !== "undefined" ? window : globalThis);

package/src/studio/ai-chat-route.js

@@ -6,7 +6,7 @@ import path from "node:path";
 import crypto from "node:crypto";
 import { loadSpec } from "../build.js";
 import { writeRecording } from "../api-client.js";
-import { editDeck } from "../ai/deck-ai.js";
+import { editDeck, coverDocumentVisuals, checkNumbers } from "../ai/deck-ai.js";
 import { reviewExperience } from "../ai/quality.js";
 import { maybeResearch } from "../research/chat-research.js";
 import { chatErrorResult } from "./errors.js";
@@ -96,6 +96,25 @@ export async function aiChatRoutes({ req, res, pathname, url, W, readJSON, stale
           styles: taskWorkspace.file && !isBundledTemplate(taskWorkspace.file) ? { list: taskWorkspace.library.listStyles(), current: taskWorkspace.spec?.style?.name || null } : null,
         });
         signal.throwIfAborted();
+        // documento anexado NESTA mensagem e a resposta montou/reescreveu a maior parte do deck (criar a apresentação
+        // do paper pelo chat): a mesma conferência de cobertura da geração. Pedido pontual ("use a figura 3 no slide
+        // 5") não dispara: mexe em poucos slides.
+        const attachedDocs = (Array.isArray(body.attachments) ? body.attachments : []).some((a) => a && typeof a === "object" && a.type === "doc");
+        if (attachedDocs && !result.talk && !result.transform && !result.style && !result.variants && result.spec?.slides) {
+          const rewritten = Array.isArray(result.changed) ? result.changed.length : 0;
+          if (rewritten >= Math.max(5, result.spec.slides.length / 2)) {
+            const covered = await coverDocumentVisuals(result.spec, { materials, briefing: prompt, say: (s) => emit({ phase: "step", text: s }),
+              edit: (o) => editDeck({ signal, images: true, imageOptions: imageOptions(taskWorkspace, withBase(taskWorkspace, spec)), onProgress: emit, materials, drawCheck: diagramCheck, ...o }) });
+            signal.throwIfAborted();
+            if (covered.spec !== result.spec) { result.spec = covered.spec; result.actions = [...(result.actions || []), ...covered.actions]; }
+            if (covered.coverage?.missing.length) result.actions = [...(result.actions || []), `Sem slide (figuras/tabelas do material): ${covered.coverage.missing.join("; ")}`];
+            const checked = await checkNumbers(result.spec, { materials, say: (s) => emit({ phase: "step", text: s }),
+              edit: (o) => editDeck({ signal, images: true, imageOptions: imageOptions(taskWorkspace, withBase(taskWorkspace, spec)), onProgress: emit, materials, drawCheck: diagramCheck, ...o }) });
+            signal.throwIfAborted();
+            if (checked.spec !== result.spec) { result.spec = checked.spec; result.actions = [...(result.actions || []), ...checked.actions]; }
+            if (checked.facts?.unsupported.length) result.actions = [...(result.actions || []), `Números sem base no material: ${checked.facts.unsupported.map((b) => `${b.number} (slide ${b.slide})`).join(", ")}`];
+          }
+        }
         if (linkActions.length) result.actions = [...linkActions, ...(result.actions || [])];
         // a IA decidiu transformar a apresentação inteira (transform:): o trabalho em etapas, com o andamento aqui
         if (result.transform) {

package/src/studio/snapshot.js

@@ -39,6 +39,9 @@ export async function slideSnapshots(spec, index, { mode = "final", maxFrames =
     await page.emulateMedia({ reducedMotion: 'reduce' });
     await page.goto(`${pathToFileURL(file).href}#${index + 1}`, { waitUntil: "load" });
     await page.addStyleTag({ content: '#hud,#laser,.draw-fab,.draw-toolbar,#draw-canvas{display:none!important}' });
+    // Fotos para conferência (e exportação estática): animações de gráfico concluídas, senão o instantâneo
+    // pega linhas no meio do traço e a revisão acusa "linhas faltando" que o usuário nunca veria.
+    await page.addStyleTag({ content: '.chart .draw,.chart .fade-in,.chart .pop,.chart .gx,.chart .gy,.chart .arc{animation:none!important;opacity:1!important;transform:none!important}.chart .draw{stroke-dashoffset:0!important}' });
     await page.waitForFunction(() => window.sagadeck && typeof window.sagadeck.goto === "function", null, { timeout: 10000 });
     await page.evaluate(() => window.SagaScienceReady);
     await page.evaluate(() => window.SagaDiagramsReady);