sagadeck 1.7.1 → 1.9.0

package/src/ai/video-generation.js

@@ -1,28 +1,65 @@
 import { mediaPrompt } from './art-direction.js';
+import { llmConfig, providerFetch } from './llm.js';
 // Operações curtas e retomáveis: o chat não fica preso esperando o render do provedor.
 import fs from 'node:fs';
 import path from 'node:path';
 import crypto from 'node:crypto';
 
 const BASE='https://openrouter.ai/api/v1';
+export const DEFAULT_VIDEO_MODEL='google/veo-3.1-lite';
+
+// De onde o vídeo sai. Com um modelo de vídeo em Configurar IA (papel "video"), pela mesma camada da IA: o endereço, a
+// chave, os cabeçalhos e o adaptador de lá, como texto e imagem. Sem ele, como sempre foi: OpenRouter, com
+// SAGADECK_VIDEO_KEY ou OPENROUTER_API_KEY. SAGADECK_VIDEO_URL e SAGADECK_VIDEO_MODEL trocam endereço e modelo.
+export function videoSetup({env=process.env,cfg=llmConfig(env)}={}){
+ const viaConfig=!!cfg.videoModel&&!!(cfg.url||cfg.adaptador);
+ return {
+  base:String(env.SAGADECK_VIDEO_URL||(viaConfig?cfg.url:BASE)).replace(/\/+$/,''),
+  key:env.SAGADECK_VIDEO_KEY||(viaConfig?cfg.key:'')||env.OPENROUTER_API_KEY||'',
+  model:env.SAGADECK_VIDEO_MODEL||cfg.videoModel||DEFAULT_VIDEO_MODEL,
+  headers:viaConfig?cfg.headers||{}:{},adaptador:viaConfig?cfg.adaptador||'':'',
+  origem:viaConfig?'configuração da IA':'variáveis de ambiente',
+ };
+}
+// a conexão de cada operação: setup explícito, ou {key, fetcher} (compatível com quem já chamava assim, no OpenRouter)
+function conn({setup,key,fetcher}={}){
+ const s=setup||(key!==undefined?{base:BASE,key,model:DEFAULT_VIDEO_MODEL,headers:{},adaptador:''}:videoSetup());
+ const call=fetcher||(s.adaptador?(url,init)=>providerFetch({adaptador:s.adaptador},url,init):fetch);
+ const auth=s.key?{Authorization:`Bearer ${s.key}`}:{};
+ return {...s,base:String(s.base||BASE).replace(/\/+$/,''),call,auth:{...(s.headers||{}),...auth}};
+}
+// o catálogo de modelos de vídeo, quando o provedor tem um (nem todo tem): { ok, models } ou { ok: false, motivo }
+export async function videoCatalog(opts={}){
+ const c=conn(opts);
+ try{
+  const r=await c.call(`${c.base}/videos/models`,{method:'GET',headers:c.auth,signal:AbortSignal.timeout(15000)});
+  if(r.status===401||r.status===403)return{ok:false,motivo:`a chave foi recusada (HTTP ${r.status})`};
+  if(!r.ok)return{ok:false,motivo:`o provedor não tem catálogo de vídeo (HTTP ${r.status})`};
+  const data=(await r.json()).data;
+  return Array.isArray(data)?{ok:true,models:data}:{ok:false,motivo:'o provedor não devolveu um catálogo de vídeo'};
+ }catch(e){return{ok:false,motivo:`o catálogo não respondeu (${e.message})`};}
+}
 export function parseVideoArgs(args){
  const result={};for(let i=0;i<args.length;i++){
   const m=args[i].match(/^--([^=]+)(?:=(.*))?$/);if(!m)throw new Error(`Argumento inesperado: ${args[i]}`);
   result[m[1]]=m[2]??(args[i+1]&&!args[i+1].startsWith('--')?args[++i]:true);
  }return result;
 }
-export function videoApiURL(value){
-  const url=new URL(String(value).startsWith('/api/v1/')?value:String(value).replace(/^\//,''),BASE+'/');
-  if(url.origin!=='https://openrouter.ai'||!url.pathname.startsWith('/api/v1/videos'))throw new Error('Polling precisa usar a API de vídeo do OpenRouter.');
+// endereço de uma operação de vídeo: relativo à base configurada, ou absoluto mas no MESMO servidor e caminho (a
+// chave nunca vai para outro lugar, mesmo que a resposta do provedor mande consultar outro endereço)
+export function videoApiURL(value,base=BASE){
+  const b=new URL(String(base).replace(/\/+$/,'')+'/'),v=String(value);
+  const url=/^https?:/i.test(v)?new URL(v):v.startsWith(b.pathname)?new URL(v,b.origin):new URL(v.replace(/^\//,''),b);
+  if(url.origin!==b.origin||!url.pathname.startsWith(b.pathname+'videos'))throw new Error(`O acompanhamento do vídeo precisa usar o mesmo endereço de vídeo configurado (${b.host}): a chave não vai para outro servidor.`);
   return url.href;
 }
 // quanto custa ANTES de gerar (para mostrar na aprovação): catálogo é de graça; null se não der para estimar
-export async function estimateVideoCost({model,duration,resolution},{key=process.env.SAGADECK_VIDEO_KEY||process.env.OPENROUTER_API_KEY,fetcher=fetch}={}){
+export async function estimateVideoCost({model,duration,resolution},opts={}){
   try{
-   if(!key)return null;
-   const r=await fetcher(`${BASE}/videos/models`,{headers:{Authorization:`Bearer ${key}`},signal:AbortSignal.timeout(15000)});
-   if(!r.ok)return null;
-   const meta=(await r.json()).data?.find((m)=>m.id===model||m.canonical_slug===model);
+   const c=conn(opts);
+   if(!c.key&&!c.adaptador)return null;
+   const cat=await videoCatalog(opts);if(!cat.ok)return null;
+   const meta=cat.models.find((m)=>m.id===(model||c.model)||m.canonical_slug===(model||c.model));
    const skus=meta?.pricing_skus||meta?.pricing||null;
    const perSec=Number(skus?.[/1080|1k|2k|4k/i.test(String(resolution||''))?'per-video-second-1080p':'per-video-second']);
    if(!Number.isFinite(perSec)||perSec<0)return null;
@@ -35,22 +72,28 @@ function within(dir,name){
  if(!rel||rel.startsWith('..')||path.isAbsolute(rel))throw new Error('Salve o vídeo dentro da pasta da apresentação.');
  return target;
 }
-export async function videoOperation(request,{cwd,key=process.env.SAGADECK_VIDEO_KEY||process.env.OPENROUTER_API_KEY,fetcher=fetch}={}){
+export async function videoOperation(request,{cwd,...opts}={}){
  if(request.action==='frame'){const {videoFrame}=await import('./video-frames.js');return videoFrame(request,{cwd});}
- if(!key)throw new Error('Configure SAGADECK_VIDEO_KEY ou OPENROUTER_API_KEY para a API de vídeo. O modelo de texto não gera vídeo.');
+ const c=conn(opts);
+ if(!c.key&&!c.adaptador)throw new Error('Configure o vídeo: um modelo de vídeo em Configurar IA, ou SAGADECK_VIDEO_KEY / OPENROUTER_API_KEY. O modelo de texto não gera vídeo.');
  const api=async(value,body)=>{
-  const r=await fetcher(videoApiURL(value),{method:body?'POST':'GET',headers:{Authorization:`Bearer ${key}`,'Content-Type':'application/json'},...(body?{body:JSON.stringify(body)}:{}),signal:AbortSignal.timeout(30000)});
+  const r=await c.call(videoApiURL(value,c.base),{method:body?'POST':'GET',headers:{...c.auth,'Content-Type':'application/json'},...(body?{body:JSON.stringify(body)}:{}),signal:AbortSignal.timeout(30000)});
   if(!r.ok)throw new Error(`API de vídeo retornou HTTP ${r.status}.`);return r.json();
  };
  const action=request.action||'plan';
  if(['plan','submit'].includes(action)){
-  const model=request.model||'google/veo-3.1-lite',catalog=await api('/videos/models');
-  const meta=catalog.data?.find(m=>m.id===model||m.canonical_slug===model);if(!meta)throw new Error(`Modelo de vídeo indisponível: ${model}`);
-  const body={model,prompt:String(request.prompt||''),duration:Number(request.duration||4),resolution:request.resolution||'720p',aspect_ratio:request.aspect||'16:9',generate_audio:false};
+  // o catálogo valida modelo, duração e resolução quando existe; sem ele (nem todo provedor tem), o pedido vai como
+  // veio e quem recusa é a API. duration/resolution "min": o clipe mais curto e leve que o modelo aceita (teste)
+  const model=request.model||c.model,cat=await videoCatalog(opts);
+  const meta=cat.ok?cat.models.find(m=>m.id===model||m.canonical_slug===model):null;if(cat.ok&&!meta)throw new Error(`Modelo de vídeo indisponível: ${model}`);
+  const px=(r)=>Number(String(r).match(/\d+/)?.[0]||0)*(/k/i.test(String(r))?1000:1);
+  const duration=request.duration==='min'?Math.min(...(meta?.supported_durations?.map(Number).filter(Number.isFinite)||[4])):Number(request.duration||4);
+  const resolution=request.resolution==='min'?([...(meta?.supported_resolutions||[])].sort((a,b)=>px(a)-px(b))[0]||'720p'):request.resolution||'720p';
+  const body={model,prompt:String(request.prompt||''),duration,resolution,aspect_ratio:request.aspect||'16:9',generate_audio:false};
   if(!body.prompt.trim())throw new Error('Descreva o clipe antes de gerar.');
   body.prompt=mediaPrompt(body.prompt); // plan mostra exatamente o prompt que submit enviará.
   if(!Number.isInteger(body.duration)||body.duration<1)throw new Error('Duração precisa ser um número inteiro positivo.');
-  for(const [field,list] of [['duration',meta.supported_durations],['resolution',meta.supported_resolutions],['aspect_ratio',meta.supported_aspect_ratios]])if(list?.length&&!list.map(String).includes(String(body[field])))throw new Error(`${field} não suportado por ${model}.`);
+  for(const [field,list] of [['duration',meta?.supported_durations],['resolution',meta?.supported_resolutions],['aspect_ratio',meta?.supported_aspect_ratios]])if(list?.length&&!list.map(String).includes(String(body[field])))throw new Error(`${field} não suportado por ${model}.`);
   if(request.seed!=null){body.seed=Number(request.seed);if(!Number.isInteger(body.seed)||body.seed<0)throw new Error('seed precisa ser inteiro não negativo.');}
   const frames=[];
   for(const [field,type] of [['firstFrame','first_frame'],['lastFrame','last_frame']])if(request[field]){
@@ -62,13 +105,13 @@ export async function videoOperation(request,{cwd,key=process.env.SAGADECK_VIDEO
   }
   if(frames.length)body.frame_images=frames;
   const summary={...body,...(frames.length?{frame_images:frames.map(f=>({frame_type:f.frame_type,local:true}))}:{})};
-  if(action==='plan')return{action,costIncurred:false,request:summary,pricing:meta.pricing_skus||meta.pricing||null};
+  if(action==='plan')return{action,costIncurred:false,request:summary,pricing:meta?.pricing_skus||meta?.pricing||null};
   if(!cwd)throw new Error('Abra uma apresentação salva antes de gerar vídeo.');
   const output=within(cwd,request.out||`videos/clip-${crypto.randomUUID()}.mp4`);if(fs.existsSync(output))throw new Error('O arquivo de saída já existe; escolha outro nome.');
   const job=await api('/videos',body);
   if(!/^[\w-]+$/.test(job.id||''))throw new Error('A API não devolveu um identificador de job válido.');
   const folder=path.join(cwd,'.sagadeck','videos');fs.mkdirSync(folder,{recursive:true});
-  const record={id:job.id,polling_url:videoApiURL(job.polling_url||`/videos/${job.id}`),output:path.relative(cwd,output).split(path.sep).join("/"),request:summary,createdAt:new Date().toISOString()};
+  const record={id:job.id,polling_url:videoApiURL(job.polling_url||`/videos/${job.id}`,c.base),output:path.relative(cwd,output).split(path.sep).join("/"),request:summary,createdAt:new Date().toISOString()};
   fs.writeFileSync(path.join(folder,job.id+'.json'),JSON.stringify(record,null,2),{flag:'wx'});
   return{id:job.id,status:job.status,output:record.output,nextAction:'status'};
  }
@@ -78,9 +121,10 @@ export async function videoOperation(request,{cwd,key=process.env.SAGADECK_VIDEO
  const job=await api(record.polling_url);
  if(action==='status'||job.status!=='completed')return{id:record.id,status:job.status,error:job.error||null,cost:job.usage?.cost??null};
  const output=within(cwd,record.output);if(fs.existsSync(output))return{id:record.id,status:'downloaded',video:record.output,cached:true};
- const url=new URL(job.unsigned_urls?.[0]||`${BASE}/videos/${record.id}/content?index=0`);
- if(url.protocol!=='https:')throw new Error('Download do vídeo exige HTTPS.');
- const r=await fetcher(url.href,{headers:url.origin==='https://openrouter.ai'?{Authorization:`Bearer ${key}`}:{},signal:AbortSignal.timeout(30000)});
+ const url=new URL(job.unsigned_urls?.[0]||`${c.base}/videos/${record.id}/content?index=0`);
+ if(url.protocol!=='https:'&&url.origin!==new URL(c.base).origin)throw new Error('Download do vídeo exige HTTPS.');
+ // a chave só vai junto se o download é no próprio provedor (o link assinado de um CDN não precisa dela)
+ const r=await c.call(url.href,{headers:url.origin===new URL(c.base).origin?c.auth:{},signal:AbortSignal.timeout(30000)});
  if(!r.ok)throw new Error(`Download retornou HTTP ${r.status}.`);
  const mime=r.headers.get('content-type')||'';if(!/^video\/|application\/octet-stream/i.test(mime))throw new Error('O provedor não retornou um arquivo de vídeo.');
  const chunks=[];let bytes=0;for await(const chunk of r.body){bytes+=chunk.length;if(bytes>100*1024*1024)throw new Error('Vídeo excede 100 MB.');chunks.push(chunk);}
@@ -92,7 +136,8 @@ export async function videoOperation(request,{cwd,key=process.env.SAGADECK_VIDEO
 // vigia os jobs do deck: confere andamento (grátis), baixa sozinho o que terminou.
 // para o ticker do Studio avisar "clipe pronto" sem a pessoa ficar olhando.
 const lastCheck = new Map(); // polling_url -> { at, status }
-export async function pollVideoJobs(cwd,{key=process.env.SAGADECK_VIDEO_KEY||process.env.OPENROUTER_API_KEY,fetcher=fetch,cooldownMs=60000}={}){
+export async function pollVideoJobs(cwd,{cooldownMs=60000,...opts}={}){
+  const c=conn(opts),can=!!(c.key||c.adaptador);
   const dir=path.join(path.resolve(cwd),'.sagadeck','videos');
   let files=[];
   try{files=fs.readdirSync(dir).filter((f)=>f.endsWith('.json'));}catch{return[];}
@@ -104,16 +149,16 @@ export async function pollVideoJobs(cwd,{key=process.env.SAGADECK_VIDEO_KEY||pro
    const cached=lastCheck.get(record.polling_url);
    let status=record.status||'unknown';
    if(cached&&Date.now()-cached.at<cooldownMs) status=cached.status;
-   else if(!done&&key){
+   else if(!done&&can){
     try{
-     const r=await fetcher(record.polling_url,{headers:{Authorization:`Bearer ${key}`},signal:AbortSignal.timeout(15000)});
+     const r=await c.call(videoApiURL(record.polling_url,c.base),{headers:c.auth,signal:AbortSignal.timeout(15000)});
      if(r.ok){const job=await r.json();status=job.status||status;lastCheck.set(record.polling_url,{at:Date.now(),status});}
     }catch{/* sem rede: mantém o último */}
    }
    let video=record.output&&fs.existsSync(path.join(path.resolve(cwd),record.output))?record.output:null;
-   if(status==='completed'&&!video&&key){
+   if(status==='completed'&&!video&&can){
     try{
-     const dl=await videoOperation({action:'download',id:record.id},{cwd,key,fetcher});
+     const dl=await videoOperation({action:'download',id:record.id},{cwd,...opts});
      video=dl.video;status='downloaded';
      record.downloadedAt=new Date().toISOString();record.status='completed';
      try{fs.writeFileSync(path.join(dir,f),JSON.stringify(record,null,2));}catch{}

package/src/build.js

@@ -8,9 +8,9 @@ import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import YAML from "yaml";
-import { resolveTheme, themeCSS, scopedThemeCSS } from "./themes.js";
+import { resolveTheme, themeCSS, scopedThemeCSS, THEMES } from "./themes.js";
 import { identityFor, identitiesFile } from "./identity.js";
-import { LAYOUTS, SCENES, fullAsFigure } from "./layouts.js";
+import { LAYOUTS, fullAsFigure } from "./layouts.js";
 import { setDeckLocale } from "./locale.js";
 import { applyVisualEdits } from "./visual-edits.js";
 import { el, imageSrc } from "./elements.js";
@@ -20,9 +20,16 @@ import { normalizeSpec } from "./fiscal/normalize.js";
 import { readRecordings } from "./api-client.js";
 import { explorationStates } from './exploration.js';
 import { calcModel } from './lessons.js';
+import { loadMapConfig, mapaFile, tilesForDeck } from "./map-config.js";
 
 const HERE = path.dirname(fileURLToPath(import.meta.url));
 const read = (p) => fs.readFileSync(path.join(HERE, p), "utf8");
+let mapBackgroundAssets;
+const embeddedMapBackground = (spec, tiles) => {
+  if (!spec.slides.some((s) => s.layout === "map" && tiles?.[s.basemap || spec.defaults?.basemap]?.tipo === "vetorial")) return "";
+  mapBackgroundAssets ||= JSON.stringify(Object.fromEntries(Object.entries({ js: "maplibre-gl.js", css: "maplibre-gl.css", worker: "maplibre-worker.js", adapter: "maplibre-leaflet.js" }).map(([key, file]) => [key, fs.readFileSync(path.join(HERE, "runtime/vendor", file)).toString("base64")])));
+  return `<script type="application/json" id="map-background-assets">${mapBackgroundAssets}</script>`;
+};
 
 export function loadSpec(file) {
   const src = fs.readFileSync(file, "utf8");
@@ -58,7 +65,7 @@ export function inferLayout(s) {
 }
 
 const DEFAULT_TONE = { section: "accent", cover: "light", end: "dark" };
-const NO_FOOTER = new Set(["cover", "section", "end", "image", "canvas", "full", "headline", "kinetic", "scenography"]);
+const NO_FOOTER = new Set(["cover", "section", "end", "image", "canvas", "full", "headline"]);
 
 export function wordCount(s) {
   const txt = [];
@@ -80,7 +87,11 @@ export function wordCount(s) {
 // identidade do deck (fontes da empresa, do arquivo local; ver src/identity.js)
 const identityOf = (spec) => (spec.identity ? identityFor(spec.identity) : null);
 const slideTheme = (s, deckTheme, spec) => (s.theme || s.palette ? resolveTheme(s.theme || spec.theme, s.palette ?? spec.palette, identityOf(spec)) : deckTheme);
-const skinCSS = (name) => { try { return read(`runtime/skins/${name}.css`); } catch { return ""; } };
+// tema irmão (skin: "musgo" no wine): usa a pele do outro, com o seletor trocado para o nome dele
+const skinCSS = (name) => {
+  const base = THEMES[name]?.skin;
+  try { return base ? read(`runtime/skins/${base}.css`).replaceAll(`.th-${base}`, `.th-${name}`) : read(`runtime/skins/${name}.css`); } catch { return ""; }
+};
 export function deckThemeCSS(spec, deckTheme) {
   const looks = new Map(), names = new Set([deckTheme.name]);
   for (const raw of spec.slides || []) {
@@ -132,7 +143,9 @@ export function buildHTML(rawSpec, opts = {}) {
   const theme = resolveTheme(spec.theme, spec.palette, identityOf(spec));
   const warnings = [];
   if (spec.identity && !theme.identity) warnings.push(`identidade "${spec.identity}" não está em ${identitiesFile()} nesta máquina: a apresentação saiu com as fontes do tema`);
-  const ctx = { baseDir: spec._dir || process.cwd(), theme, spec, warnings };
+  // serviços do mapa desta máquina (só o fundo vai para o HTML; nunca chave de rotas/endereços): src/map-config.js
+  const mapTiles = (spec.slides || []).some((x) => x?.layout === "map") ? tilesForDeck(loadMapConfig(mapaFile())) : null;
+  const ctx = { baseDir: spec._dir || process.cwd(), theme, spec, warnings, mapTiles };
   const id = spec.id || slug(spec.title);
   const slidesMeta = [];
   let html = "";
@@ -142,7 +155,7 @@ export function buildHTML(rawSpec, opts = {}) {
     const layout = inferLayout(s);
     const fn = LAYOUTS[layout];
     if (!fn) throw new Error(`Slide ${i + 1}: layout "${layout}" não existe. Use: ${Object.keys(LAYOUTS).join(", ")}`);
-    const tone = s.tone || (layout === "scenography" && SCENES[s.scene || "stage"]?.tone) || DEFAULT_TONE[layout] || spec.tone || "light";
+    const tone = s.tone || DEFAULT_TONE[layout] || spec.tone || "light";
     let inner;
     const th = slideTheme(s, theme, spec), sctx = th === theme ? ctx : { ...ctx, theme: th };
     try { inner = fn(s, sctx); } catch (e) { throw new Error(`Slide ${i + 1} (${layout}${s.title ? `: ${plain(s.title).slice(0, 40)}` : ""}): ${e.message}`); }
@@ -231,6 +244,7 @@ ${spec.slides.some((s) => s.layout === "diagram") ? `<script>${read("runtime/ven
 ${spec.slides.some(s => s.layout === "science") ? `<script>${read("runtime/vendor/plotly.min.js").replace(/<\/script/gi,"<\\/script")}</script><script>${read("runtime/formula.js")}</script><script>${read("runtime/science.js")}</script>` : ""}
 ${spec.slides.some(s => s.layout === "calc") ? `${spec.slides.some(s => s.layout === "science") ? "" : `<script>${read("runtime/formula.js")}</script>`}<script>${read("runtime/calc.js")}</script>` : ""}
 ${spec.slides.some(s=>s.layout==="portal") ? `<script>${read("runtime/portal-scene.js")}</script>` : ""}
+${spec.slides.some((s) => s.layout === "map") ? `${embeddedMapBackground(spec, mapTiles)}<style>${read("runtime/vendor/leaflet.css")}</style><script>${read("runtime/vendor/leaflet.js").replace(/<\/script/gi, "<\\/script")}</script><script>${read("runtime/map-background.js")}</script><script>${read("runtime/map.js")}</script>` : ""}
 ${JSON.stringify(spec.slides || []).includes('"points"') ? `<script>${read("runtime/points.js")}</script>` : ""}
 ${spec.slides.some(s=>s.layout==="playground") ? `<script>${read("runtime/playground.js")}</script>` : ""}
 ${hasApi ? `${apiScripts}\n<script>${read("runtime/api-ui.js")}</script><script>${read("runtime/api-collection-ui.js")}</script>` : ""}
@@ -254,21 +268,41 @@ export function setFitDefaults(d = {}) {
 export const fitDefaults = () => ({ ...FIT_DEFAULTS });
 
 // eco ambiente: camada viva discreta atrás do conteúdo (só no HTML; PPTX/PDF usam o quadro parado)
-const AMBIENT = ["pontos", "grade"];
-function ambientOf(s, i, ctx) {
-  if (s.ambient == null || s.ambient === "") return "";
+// (rede: nós à deriva ligados por proximidade, num canvas animado pelo runtime; o tema pode pô-la sozinha na capa,
+// coverAmbient, e ambient: false tira)
+const AMBIENT = ["pontos", "grade", "rede"];
+function ambientOf(s, i, ctx, theme, layout) {
+  if (s.ambient === false) return "";
+  if (s.ambient == null || s.ambient === "") return layout === "cover" && theme?.coverAmbient ? theme.coverAmbient : "";
   if (!AMBIENT.includes(s.ambient)) { ctx.warnings?.push(`slide ${i + 1}: ambiente "${s.ambient}" desconhecido (vale: ${AMBIENT.join(", ")})`); return ""; }
   return s.ambient;
 }
+// faixa que corre na capa: `ticker: [..]` no slide, ou automática nos temas com ticker (musgo), com os títulos das
+// seções (sem seções suficientes, os dos slides). `ticker: false` desliga. Só no HTML; parada sem movimento/exportação.
+function tickerOf(s, spec, theme, layout) {
+  if (s.ticker === false || layout !== "cover") return null;
+  const clean = (list) => [...new Set(list.map((x) => plain(String(x ?? "")).trim()).filter(Boolean))].slice(0, 16);
+  if (Array.isArray(s.ticker)) return clean(s.ticker);
+  if (!theme.ticker && s.ticker !== true) return null;
+  const others = (spec.slides || []).filter((x) => x && typeof x === "object");
+  let items = clean(others.filter((x) => inferLayout(x) === "section").map((x) => x.title || x.kicker));
+  if (items.length < 3) items = clean(others.filter((x) => !isCoverLayout(inferLayout(x))).map((x) => x.title || x.kicker));
+  return items.length ? items : null;
+}
+function tickerHTML(items) {
+  const run = items.map((t) => `<span class="tk-it t f-mono">${esc(t)}</span><span class="tk-sep"></span>`).join("");
+  const dur = Math.max(24, Math.round(items.join("").length * 0.22));
+  return `<div class="ticker" aria-hidden="true"><div class="tk-track" style="--tk-dur:${dur}s">${run}${run}</div></div>`;
+}
 // <section> de um slide: tom, textura, estilo do destaque, fundo, área, cabeçalho e rodapé.
 // Única montagem para o Studio (renderSlide) e para a apresentação/exportação (buildHTML).
 function slideShell({ s, i, spec, theme, ctx, layout, tone, inner: innerIn, current = false }) {
   let inner = innerIn;
-  const ambient = ambientOf(s, i, ctx);
+  const ambient = ambientOf(s, i, ctx, theme, layout);
   const deco = s.deco ?? theme.deco;
   const style = (s.bg ? `--bg:#${String(s.bg).replace("#", "")};` : "") + (s.fg ? `--fg:#${String(s.fg).replace("#", "")};` : "");
   const bars = s.footer !== false && (s.footer === true || !NO_FOOTER.has(layout));
-  const area = layout === "canvas" || layout === "full" || layout === "kinetic" || layout === "scenography" ? "free" : "safe";
+  const area = layout === "canvas" || layout === "full" ? "free" : "safe";
   const motionAccent = area === 'safe' && s.motionAccent && typeof s.motionAccent === 'object';
   // estilo do ==destaque== (marca-texto | sublinhado | cor | negrito | nenhum), no deck ou por slide
   const markStyle = s.markStyle || spec.markStyle;
@@ -289,7 +323,7 @@ function slideShell({ s, i, spec, theme, ctx, layout, tone, inner: innerIn, curr
     if (hd) { bandTitle = `<div class="master-title">${hd[0].replace(/<[a-z0-9]+ [^>]*class="[^"]*\bttl\b[^"]*"[^>]*/, (tag) => `${tag}${/\sdata-fit[\s=>]|\sdata-fit$/.test(tag) ? "" : " data-fit"} data-fit-self`)}</div>`; inner = inner.replace(hd[0], ""); }
   }
   let html = `<section class="slide${current ? " current" : ""}${withMaster ? ` has-master${isCoverLayout(layout) ? " master-cover" : ""}${band ? " master-band" : ""}` : ""} th-${theme.name} lk-${theme.key} tone-${tone} ${deco && deco !== "none" ? "deco-" + deco : ""} ${markStyle && markStyle !== "marca-texto" ? "ms-" + markStyle : ""} L-${layout}-slide${["compact", "dense"].includes(s.density) ? " density-" + s.density : ""}" data-idx="${i}"${s.uid ? ` data-uid="${esc(String(s.uid))}"` : ""} data-layout="${layout}" data-tr="${s.transition || "fade"}"${ambient ? ` data-ambient="${ambient}"` : ""}${nav}${fitAttrs}${!Array.isArray(s.steps) && Number.isFinite(Number(s.steps)) && Number(s.steps) > 0 ? ` data-steps="${Number(s.steps)}"` : ""}${style ? ` style="${style}"` : ""}>`;
-  if (ambient) html += `<div class="ambient" aria-hidden="true"></div>`;
+  if (ambient) html += `<div class="ambient" aria-hidden="true">${ambient === "rede" ? "<canvas></canvas>" : ""}</div>`;
   if (s.background) html += `<div class="bgfig" style="${s.backgroundStyle || ""}">${el(s.background, ctx, 1920, slideSize(spec).h)}</div>`;
   // mestre do deck (logos, faixas, número da página: src/master.js), atrás do conteúdo
   if (withMaster) html += `<div class="master" aria-hidden="true">${masterElements(spec, layout, i).map((e) => el(e, ctx)).join("")}</div>`;
@@ -298,7 +332,9 @@ function slideShell({ s, i, spec, theme, ctx, layout, tone, inner: innerIn, curr
   if (bars && s.header !== false) html += barHTML("header", spec, i, total);
   if (bandTitle) html += applyVisualEdits(bandTitle, s.visualEdits, { src: (p) => imageSrc(p, ctx) || p });
   html += `<div class="${area}${motionAccent ? ' with-motion-accent' : ''}">${applyVisualEdits(inner, s.visualEdits, { src: (p) => imageSrc(p, ctx) || p })}</div>`;
-  if (motionAccent) {const fg=s.fg||theme.tones[tone]?.fg||'ink';html += `<div class="motion-accent" aria-hidden="true">${el({motion:{background:'transparent',foreground:theme.colors[fg]||fg,...s.motionAccent}},ctx,320,90)}</div>`;}
+  const ticker = tickerOf(s, spec, theme, layout);
+  if (ticker) html += tickerHTML(ticker);
+  if (motionAccent) {const fg=s.fg||theme.tones[tone]?.fg||'ink';html +=`<div class="motion-accent" aria-hidden="true">${el({motion:{background:'transparent',foreground:theme.colors[fg]||fg,...s.motionAccent}},ctx,320,90)}</div>`;}
   if (bars) html += barHTML("footer", spec, i, total);
   if (s.back != null && s.back !== "") {
     const alvo = (spec.slides || []).find((x) => x && String(x.id) === String(s.back));
@@ -313,11 +349,11 @@ 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: [] };
+  const ctx = { baseDir: spec._dir || process.cwd(), theme, spec, warnings: [], 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.`);
-  const tone = s.tone || (layout === "scenography" && SCENES[s.scene || "stage"]?.tone) || DEFAULT_TONE[layout] || spec.tone || "light";
+  const tone = s.tone || DEFAULT_TONE[layout] || spec.tone || "light";
   const inner = fn(s, ctx);
   const deco = s.deco ?? theme.deco;
   const html = slideShell({ s, i, spec, theme, ctx, layout, tone, inner, current: true });

package/src/elements.js

@@ -9,7 +9,7 @@ import katex from "katex";
 import { formatNumber, decimalSeparator } from "./locale.js";
 import fs from "node:fs";
 import path from "node:path";
-import { md, esc } from "./markup.js";
+import { md, esc, plain } from "./markup.js";
 import { iconSVG } from "./figures/icons.js";
 import { picto } from "./figures/pictos.js";
 import { diagram } from "./figures/diagrams.js";
@@ -258,6 +258,7 @@ export function el(e, ctx, w, h) {
   if (e.poll) return poll(e, ctx);
   if (e.list) return list(e);
   if (e.cards) return cards(e, ctx);
+  if (e.pop) return popEl(e);
   if (e.stats || e.kpis) return stats(e, ctx);
   if (e.steps || e.process || e.flow) return steps(e, ctx);
   if (e.progress != null) return progress(e);
@@ -478,6 +479,7 @@ export function cards(e, ctx) {
     if (c.check === true || c.status === "pro") extraWidgets += `<div class="check-pill pro">${iconSVG("check", { size: 26, stroke: 2.4 })} ${c.checkText ? md(c.checkText) : "Recomendado"}</div>`;
     if (c.check === false || c.status === "con") extraWidgets += `<div class="check-pill con">${iconSVG("x", { size: 26, stroke: 2.4 })} ${c.checkText ? md(c.checkText) : "Evitar"}</div>`;
 
+    if (c.flip != null && c.flip !== "") return flipCard(c, step, top, badgeHtml, extraWidgets);
     return `<div${attrs({ ...c, step, card: c.hl ? "hi" : true }, "cd")}>
       <div style="display:flex;justify-content:space-between;align-items:center;width:100%;">
         ${top}
@@ -493,6 +495,42 @@ export function cards(e, ctx) {
   return `<div${attrs(e, "cards", `grid-template-columns:repeat(${cols},1fr);`)}>${body}</div>`;
 }
 
+// Cartão que vira (flip: no cartão): clicar gira e mostra o verso (flipTitle + flip; "back" já é o Voltar da navegação). Frente e verso ficam no
+// mesmo lugar da grade; o mais alto dita a altura. Na exportação e no PPTX vale a frente.
+function flipCard(c, step, top, badgeHtml, extraWidgets) {
+  const face = `card${c.hl ? " card-hi" : ""} flip-face`;
+  const back = typeof c.flip === "object" ? c.flip : { text: c.flip };
+  return `<div${attrs({ ...c, step, card: false }, "cd flip")} data-flip tabindex="0" role="button" aria-pressed="false" aria-label="${esc(plain(String(c.title || "Cartão")))}: virar">
+    <div class="flip-in">
+      <div class="${face} flip-front">
+        <div style="display:flex;justify-content:space-between;align-items:center;width:100%;">${top}${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>` : ""}
+        ${extraWidgets}
+        ${c.foot ? `<div class="cd-foot t f-label">${md(c.foot)}</div>` : ""}
+        <span class="flip-hint" aria-hidden="true">${iconSVG("rotate-ccw", { size: 28, stroke: 2.2 })}</span>
+      </div>
+      <div class="${face} flip-back" aria-hidden="true">
+        ${back.title || c.flipTitle ? `<div class="cd-title t f-heading">${md(back.title || c.flipTitle)}</div>` : ""}
+        <div class="cd-text t f-body">${md(String(back.text ?? ""))}</div>
+        <span class="flip-hint" aria-hidden="true">${iconSVG("rotate-ccw", { size: 28, stroke: 2.2 })}</span>
+      </div>
+    </div>
+  </div>`;
+}
+
+// Botão + com balão (pop): clicar abre um balãozinho com título e texto e escurece o resto do slide; clicar de novo,
+// fora dele ou trocar de slide fecha. side: above (padrão) | below | left | right. Na exportação, fechado.
+export function popHTML(more, side = "above") {
+  const m = typeof more === "object" && more ? more : { text: more };
+  const sd = ["above", "below", "left", "right"].includes(m.side || side) ? m.side || side : "above";
+  return `<span class="pop pop-${sd}" data-pop><button type="button" class="pop-btn" aria-expanded="false" aria-label="${esc(plain(String(m.title || "Ver mais")))}">${iconSVG("plus", { size: 30, stroke: 2.6 })}</button><span class="pop-card" role="note">${m.title ? `<span class="pop-title t f-heading">${md(String(m.title))}</span>` : ""}<span class="pop-text t f-body">${md(String(m.text ?? ""))}</span></span></span>`;
+}
+function popEl(e) {
+  const m = typeof e.pop === "object" ? e.pop : { text: e.pop, title: e.title, side: e.side };
+  return `<span${attrs(e, "pop-el")}>${popHTML(m)}</span>`;
+}
+
 export function stats(e, ctx) {
   const items = e.stats || e.kpis || [];
   const cols = e.cols || Math.min(items.length, 4) || 3;

package/src/export/browser.js

@@ -1,5 +1,7 @@
 // Abre o deck num Chrome/Edge headless (usa o navegador já instalado; nada é baixado).
 import fs from "node:fs";
+import http from "node:http";
+import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { chromium } from "playwright-core";
 
@@ -20,14 +22,34 @@ export function findBrowser() {
   return p;
 }
 
+// Deck com mapa abre por um endereço local (http://127.0.0.1), não como arquivo: o servidor de tiles do OpenStreetMap
+// pede que o navegador diga de onde vem o pedido, e página aberta do disco não diz. Só lê a pasta do deck.
+async function serveDir(dir) {
+  const server = http.createServer((req, res) => {
+    const rel = decodeURIComponent(new URL(req.url, "http://x").pathname).replace(/^\/+/, "");
+    const file = path.resolve(dir, rel);
+    if (req.method !== "GET" || !file.startsWith(path.resolve(dir)) || !fs.existsSync(file) || !fs.statSync(file).isFile()) { res.writeHead(404); return res.end(); }
+    res.writeHead(200, { "Content-Type": file.endsWith(".html") ? "text/html; charset=utf-8" : "application/octet-stream" });
+    fs.createReadStream(file).pipe(res);
+  });
+  await new Promise((r) => server.listen(0, "127.0.0.1", r));
+  return server;
+}
+
+// a exportação, depois de ir a um slide, espera o mapa dele (tiles carregados ou desistência; no máximo 8 s)
+export const settleSlide = (page) => page.evaluate(() => window.SagaMap?.settled?.() ?? null);
+
 export async function openDeck(htmlFile, { scale = 1 } = {}) {
   const browser = await chromium.launch({ executablePath: findBrowser() });
+  const hasMap = fs.readFileSync(htmlFile, "utf8").includes('class="map-box');
+  const server = hasMap ? await serveDir(path.dirname(htmlFile)) : null;
+  if (server) { const close = browser.close.bind(browser); browser.close = async () => { await close(); server.close(); }; }
   try {
   const page = await browser.newPage({ viewport: { width: 1920, height: 1080 }, deviceScaleFactor: scale });
   const errors = [];
   page.on("pageerror", (e) => errors.push(e.message));
   page.on("console", (m) => { if (m.type() === "error") errors.push(m.text()); });
-  await page.goto(pathToFileURL(htmlFile).href + "?export=1");
+  await page.goto((server ? `http://127.0.0.1:${server.address().port}/${encodeURIComponent(path.basename(htmlFile))}` : pathToFileURL(htmlFile).href) + "?export=1");
   await page.waitForFunction(() => window.sagadeck && window.sagadeck.cur >= 0 && document.fonts.status === "loaded");
   // a janela com o tamanho do slide (deck.aspect: 4:3 → 1920 × 1440): foto, PDF e PPTX sem faixa nem corte
   const size = await page.evaluate(() => window.sagadeck.size || { w: 1920, h: 1080 });

package/src/export/pptx.js

@@ -9,7 +9,7 @@
 import fs from "node:fs";
 import PptxGenJS from "pptxgenjs";
 import JSZip from "jszip";
-import { openDeck } from "./browser.js";
+import { openDeck, settleSlide } from "./browser.js";
 import { pptxFontMap, macFallbackFace } from "../themes.js";
 import { notesPlain } from "../markup.js";
 
@@ -48,6 +48,8 @@ function collectInPage([idx, nativeCharts]) {
   const isLeaf = (e) => {
     const d = getComputedStyle(e).display;
     if ((d.includes("flex") || d.includes("grid")) && e.children.length) return false;
+    // Na régua da calculadora, cada faixa e cada rótulo têm caixas próprias: agrupar perderia posições e fundos.
+    if (e.classList.contains("calc-track") || e.classList.contains("calc-band")) return false;
     let has = false;
     for (const c of e.childNodes) {
       if (c.nodeType === 3) { if (c.textContent.trim()) has = true; }
@@ -168,7 +170,7 @@ function collectInPage([idx, nativeCharts]) {
       return;
     }
     // coisas que viram imagem
-    if (tag.toLowerCase() === "svg" || tag === "IMG" || tag === "CANVAS" || tag === "VIDEO" ||
+    if (tag.toLowerCase() === "svg" || tag === "IMG" || tag === "CANVAS" || tag === "VIDEO" || (tag === "INPUT" && e.type === "range") ||
         e.classList.contains("katex") || (isLeaf(e) && e.querySelector(".katex")) || e.classList.contains("widget") || e.classList.contains("timer") || e.classList.contains("code") || e.classList.contains("raster") || transformed(cs)) {
       const vr = visualRect(e);
       e.setAttribute("data-pid", String(++pid));
@@ -327,7 +329,7 @@ function materializePseudos() {
 }
 
 // notes: false tira as notas do apresentador (mandar a apresentação para alguém sem a "cola")
-export async function exportPptx(htmlFile, outFile, { theme, meta, nativeCharts = false, notes = true, fontFallback, log = () => {} } = {}) {
+export async function exportPptx(htmlFile, outFile, { theme, meta, nativeCharts = false, notes = true, fontFallback, log = () => {}, onProgress = () => {} } = {}) {
   const notesOpt = notes !== false;
   const { browser, page, errors } = await openDeck(htmlFile, { scale: 2 });
   try {
@@ -351,8 +353,10 @@ export async function exportPptx(htmlFile, outFile, { theme, meta, nativeCharts
   const animBySlide = [];
 
   for (let i = 0; i < n; i++) {
+    onProgress({ phase: 'slides', completed: i, total: n, slide: i + 1 });
     const S = await page.evaluate((j) => window.sagadeck.steps(j), i);
     await page.evaluate(([j, k]) => window.sagadeck.goto(j, k, true), [i, S]);
+    await settleSlide(page);
     await page.waitForTimeout(40);
     const data = await page.evaluate(collectInPage, [i, nativeCharts]);
     const slide = pres.addSlide();
@@ -431,8 +435,10 @@ export async function exportPptx(htmlFile, outFile, { theme, meta, nativeCharts
     if (notes && withNotes) slide.addNotes(notesPlain(notes));
     animBySlide.push({ anims, tr: data.tr });
     log(`  slide ${i + 1}/${n}: ${data.items.length} objetos`);
+    onProgress({ phase: 'slides', completed: i + 1, total: n, slide: i + 1 });
   }
   // pós-processamento: animações + transições
+  onProgress({ phase: 'packing', completed: n, total: n });
   const buf = await pres.write({ outputType: "nodebuffer" });
   const zip = await JSZip.loadAsync(buf);
   for (let i = 0; i < animBySlide.length; i++) {

package/src/export/shots.js

@@ -1,10 +1,10 @@
 // PNG de cada slide, folha de contato, PDF e verificação automática de qualidade.
 import fs from "node:fs";
 import path from "node:path";
-import { openDeck, waitForResources } from "./browser.js";
+import { openDeck, waitForResources, settleSlide } from "./browser.js";
 
 // Estado final de cada slide (todos os cliques revelados)
-export async function shots(htmlFile, outDir, { steps = false, scale = 1, only, jpeg = false } = {}) {
+export async function shots(htmlFile, outDir, { steps = false, scale = 1, only, jpeg = false, onProgress = () => {} } = {}) {
   fs.mkdirSync(outDir, { recursive: true });
   for (const f of fs.readdirSync(outDir)) if (/^slide-\d+.*\.(png|jpg)$|^folha-\d+\.png$/.test(f)) fs.unlinkSync(path.join(outDir, f));
   const { browser, page, errors } = await openDeck(htmlFile, { scale });
@@ -13,15 +13,18 @@ export async function shots(htmlFile, outDir, { steps = false, scale = 1, only,
   const files = [];
   for (let i = 0; i < n; i++) {
     if (only && !only.includes(i + 1)) continue;
+    onProgress({ phase: 'slides', completed: i, total: n, slide: i + 1 });
     const S = await page.evaluate((j) => window.sagadeck.steps(j), i);
     const list = steps ? Array.from({ length: S + 1 }, (_, k) => k) : [S];
     for (const k of list) {
       await page.evaluate(([j, kk]) => window.sagadeck.goto(j, kk), [i, k]);
+      await settleSlide(page);
       await page.waitForTimeout(60);
       const f = path.join(outDir, `slide-${String(i + 1).padStart(2, "0")}${steps ? `-${k}` : ""}.${jpeg ? "jpg" : "png"}`);
       await page.screenshot(jpeg ? { path: f, type: "jpeg", quality: 82 } : { path: f });
       files.push(f);
     }
+    onProgress({ phase: 'slides', completed: i + 1, total: n, slide: i + 1 });
   }
   return { files, errors };
   } finally { await browser.close(); }
@@ -48,18 +51,22 @@ export async function contactSheet(files, outDir, { perSheet = 12, cols = 3 } =
   } finally { await browser.close(); }
 }
 
-export async function pdf(htmlFile, outFile) {
+export async function pdf(htmlFile, outFile, { onProgress = () => {} } = {}) {
   const { browser, page } = await openDeck(htmlFile, { scale: 1 });
   try {
   const n = await page.evaluate(() => window.sagadeck.n);
   const imgs = [], links = [];
   for (let i = 0; i < n; i++) {
+    onProgress({ phase: 'slides', completed: i, total: n, slide: i + 1 });
     const S = await page.evaluate((j) => window.sagadeck.steps(j), i);
     await page.evaluate(([j, k]) => window.sagadeck.goto(j, k), [i, S]);
+    await settleSlide(page);
     await page.waitForTimeout(50);
     imgs.push((await page.screenshot({ type: "jpeg", quality: 92 })).toString("base64"));
     links.push(await page.evaluate(gotoRects, i));
+    onProgress({ phase: 'slides', completed: i + 1, total: n, slide: i + 1 });
   }
+  onProgress({ phase: 'packing', completed: n, total: n });
   // cada página é a foto do slide; por cima, áreas clicáveis nos itens com goto (o PDF pula para a página do destino)
   const hit = (l) => `<a href="#p${l.to}" style="position:absolute;left:${l.x}px;top:${l.y}px;width:${l.w}px;height:${l.h}px"></a>`;
   const { w: W, h: H } = await page.evaluate(() => window.sagadeck.size || { w: 1920, h: 1080 }); // deck.aspect

package/src/fiscal/normalize.js

@@ -52,6 +52,25 @@ export function normalizeSpec(rawSpec) {  if (!rawSpec || typeof rawSpec !== "ob
   spec.slides = spec.slides.map((s) => {
     if (!s || typeof s !== "object") return { layout: "statement", text: String(s) };
 
+    // Tipografia cinética saiu (Narumi: "se ele não consegue ser melhor, remova completamente"): o deck que a usava
+    // vira uma frase em destaque com as mesmas frases, uma por clique; a cena de fundo não tinha onde ficar
+    if (s.layout === "kinetic") {
+      const beats = (Array.isArray(s.beats) ? s.beats : []).map((b) => (typeof b === "string" ? b : b?.text)).filter((t) => typeof t === "string" && t.trim());
+      const phrases = beats.length ? beats : [s.title || s.text, s.subtitle].filter((t) => typeof t === "string" && t.trim());
+      const { beats: _b, autoplay: _a, interval: _i, figure: _f, layout: _l, title: _t, subtitle: _s, text: _x, ...rest } = s;
+      s = phrases.length > 1 ? { ...rest, layout: "statement", lines: phrases, build: true } : { ...rest, layout: "statement", text: phrases[0] || "" };
+    }
+
+    // Texto no cenário saiu (Narumi: "ele é muito limitado e dá para fazer coisas melhores pedindo pra IA desenhar"):
+    // com imagem, vira imagem de página inteira com o título por cima; sem imagem, frase em destaque
+    if (s.layout === "scenography") {
+      const { scene: _sc, foreground: _fg, imageOpacity: _op, titleSize: _ts, subtitle, caption, title, image, kicker, ...rest } = s;
+      const detail = [subtitle, caption].filter((v) => v != null && String(v).trim()).map(String).join("\n\n");
+      s = image
+        ? { ...rest, layout: "full", image, ...(kicker ? { kicker } : {}), ...(title ? { title } : {}), ...(detail ? { caption: detail } : {}), overlay: "left" }
+        : { ...rest, layout: "statement", ...(kicker ? { kicker } : {}), text: String(title || "").replace(/\n/g, " ").trim(), ...(detail ? { by: detail } : {}) };
+    }
+
     // Termos em português para campos básicos
     if (s.titulo && !s.title) { s.title = s.titulo; delete s.titulo; }
     if (s.subtitulo && !s.subtitle) { s.subtitle = s.subtitulo; delete s.subtitulo; }