sagadeck 1.3.1 → 1.4.0

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

@@ -116,13 +116,20 @@ export function figureHTML(el, ctx, w, h) {
       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;
@@ -141,7 +148,7 @@ 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 "";
 }
@@ -374,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"];
@@ -447,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>` : ""}
@@ -476,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/import/crop.js

@@ -45,21 +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;
-          const 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
+          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; }
-          return { png: c.toDataURL("image/png"), ink };
+          // 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.png.split(",")[1], "base64")); list[k].ink = u.ink; 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);},
@@ -439,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/'));
@@ -536,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);
@@ -545,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)}
 

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) {