sagadeck 1.8.0 → 1.9.0

package/src/ai/ia-check.js

@@ -0,0 +1,127 @@
+// Diagnóstico da IA configurada, sem tela: cada recurso (texto, visão, imagem, pesquisa, vídeo) com uma chamada de
+// verdade ao provedor, todos ao mesmo tempo, cada resultado avisado assim que chega. Para quem configura e para agentes
+// (Copilot, Claude) saberem em segundos o que funciona, sem abrir o Studio. `sagadeck ia-check`, a ferramenta
+// sagadeck_ia_check do MCP e POST /api/ia/check usam esta mesma função.
+//
+// Vídeo: por padrão só confere a chave e o modelo no catálogo, sem custo; com videoReal: true gera um clipe curto de
+// verdade, baixa e confere que é um MP4 (é o único jeito de provar; nem todo provedor tem catálogo).
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import zlib from "node:zlib";
+import { chat, generateImage, llmConfig, llmConfigured } from "./llm.js";
+import { videoOperation, videoCatalog, videoSetup } from "./video-generation.js";
+
+export const CHECKS = { texto: "Texto", visao: "Visão", imagem: "Geração de imagem", pesquisa: "Pesquisa na web", video: "Geração de vídeo" };
+// prazo de cada um (s): um modelo travado não segura os outros
+const PRAZO = { texto: 30, visao: 45, imagem: 120, pesquisa: 60 };
+
+// ---- a imagem do teste de visão: duas faixas de cor, desenhada aqui mesmo (PNG mínimo, sem navegador)
+const CORES = { vermelho: [229, 57, 53], azul: [30, 99, 233], verde: [46, 158, 68], amarelo: [245, 197, 24] };
+const SINONIMOS = { vermelho: /vermelh|\bred\b/, azul: /\bazul|\bblue\b/, verde: /\bverde|\bgreen\b/, amarelo: /amarel|\byellow\b/ };
+export function twoColorPNG(left, right, w = 96, h = 48) {
+  const row = Buffer.alloc(1 + w * 3);
+  for (let x = 0; x < w; x++) row.set(CORES[x < w / 2 ? left : right], 1 + x * 3);
+  const chunk = (type, data) => {
+    const body = Buffer.concat([Buffer.from(type, "ascii"), data]);
+    const len = Buffer.alloc(4); len.writeUInt32BE(data.length);
+    const crc = Buffer.alloc(4); crc.writeUInt32BE(zlib.crc32(body));
+    return Buffer.concat([len, body, crc]);
+  };
+  const ihdr = Buffer.alloc(13); ihdr.writeUInt32BE(w, 0); ihdr.writeUInt32BE(h, 4); ihdr[8] = 8; ihdr[9] = 2;
+  return Buffer.concat([Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]), chunk("IHDR", ihdr),
+    chunk("IDAT", zlib.deflateSync(Buffer.concat(Array.from({ length: h }, () => row)))), chunk("IEND", Buffer.alloc(0))]);
+}
+// as duas cores: sorteadas (um palpite certo por acaso é improvável) ou fixas pelo seed (testes)
+export function colorsFor(seed) {
+  const nomes = Object.keys(CORES), i = seed == null ? Math.floor(Math.random() * 12) : Number(seed) % 12;
+  const a = Math.floor(i / 3), b = (a + 1 + (i % 3)) % 4;
+  return [nomes[a], nomes[b]];
+}
+const IMG_MAGIC = [["image/png", "89504e47"], ["image/jpeg", "ffd8ff"], ["image/webp", "52494646"], ["image/gif", "47494638"]];
+const today = (offsetH = -3) => new Date(Date.now() + offsetH * 3600_000).toISOString().slice(0, 10);
+const quick = (cfg, s) => ({ ...cfg, timeoutMs: s * 1000, firstTimeoutMs: s * 1000 });
+const ask = (cfg, model, content, s) => chat([{ role: "user", content }], { cfg: quick(cfg, s), model, think: false, temperature: 0, maxTokens: 80, allowTruncated: true, retries: 0 });
+const said = (t) => `respondeu "${String(t || "").trim().replace(/\s+/g, " ").slice(0, 80)}"`;
+
+const RUN = {
+  async texto({ cfg }) {
+    const r = await ask(cfg, cfg.textModel, "Responda só com a palavra: pronto", PRAZO.texto);
+    return /pronto/i.test(r.text) ? { status: "ok", modelo: cfg.textModel, detalhe: said(r.text) } : { status: "falhou", modelo: cfg.textModel, detalhe: `${said(r.text)} (esperado: pronto)` };
+  },
+  async visao({ cfg, seed }) {
+    const [esq, dir] = colorsFor(seed);
+    const url = `data:image/png;base64,${twoColorPNG(esq, dir).toString("base64")}`;
+    const r = await ask(cfg, cfg.visionModel, [{ type: "text", text: "A imagem tem duas faixas verticais de cor. Quais são as cores, da esquerda para a direita? Responda só as duas cores, em português, separadas por vírgula." }, { type: "image_url", image_url: { url } }], PRAZO.visao);
+    const modelo = r.visionRouted || cfg.visionModel;
+    if (r.imagesDropped) return { status: "falhou", modelo, detalhe: "o modelo não aceitou a imagem: respondeu sem vê-la. Escolha em Configurar IA um modelo de visão que aceite imagem." };
+    const t = String(r.text || "").toLowerCase(), m = (c) => t.search(SINONIMOS[c]);
+    const ok = m(esq) >= 0 && m(dir) >= 0 && m(esq) < m(dir);
+    return { status: ok ? "ok" : "falhou", modelo, detalhe: `${said(r.text)}${ok ? "" : ` (a imagem era ${esq}, ${dir})`}` };
+  },
+  async imagem({ cfg, outDir }) {
+    const img = await Promise.race([generateImage("a single red circle centered on a plain white background, flat, minimal", { cfg: quick(cfg, PRAZO.imagem) }),
+      new Promise((_, no) => setTimeout(() => no(new Error(`passou de ${PRAZO.imagem} s sem devolver a imagem`)), PRAZO.imagem * 1000).unref())]);
+    const hex = img.data.subarray(0, 4).toString("hex"), tipo = IMG_MAGIC.find(([, m]) => hex.startsWith(m))?.[0];
+    if (!tipo || img.data.length < 60) return { status: "falhou", modelo: cfg.imageModel, detalhe: `o que voltou não é uma imagem (${img.data.length} bytes)` };
+    const arquivo = path.join(outDir(), `imagem${tipo === "image/jpeg" ? ".jpg" : "." + tipo.split("/")[1]}`);
+    fs.writeFileSync(arquivo, img.data);
+    return { status: "ok", modelo: cfg.imageModel, detalhe: `${tipo}, ${Math.round(img.data.length / 1024)} KB`, arquivo };
+  },
+  async pesquisa({ cfg }) {
+    if (!cfg.searchModel) return { status: "nao_configurado", detalhe: "sem modelo de pesquisa (opcional: sem ele, a pesquisa usa os buscadores diretos)" };
+    const r = await ask(cfg, cfg.searchModel, "Pesquise na web: qual é a data de hoje no horário de Brasília? Responda só no formato AAAA-MM-DD.", PRAZO.pesquisa);
+    const d = String(r.text || "").match(/(\d{4})-(\d{2})-(\d{2})/)?.[0];
+    const dias = d ? Math.abs(Date.parse(d) - Date.parse(today())) / 86400_000 : Infinity;
+    return dias <= 1 ? { status: "ok", modelo: cfg.searchModel, detalhe: said(r.text) }
+      : { status: "falhou", modelo: cfg.searchModel, detalhe: `${said(r.text)}; hoje é ${today()} (não parece ter pesquisado)` };
+  },
+  // o mesmo caminho do produto (videoSetup): o modelo de vídeo do Configurar IA, com a chave e o adaptador de lá, ou as
+  // variáveis SAGADECK_VIDEO_KEY / OPENROUTER_API_KEY para quem já usava assim
+  async video({ cfg, env, fetcher, videoReal, videoTimeoutS, videoPollMs, outDir }) {
+    const setup = videoSetup({ env, cfg }), modelo = setup.model, de = ` (via ${setup.origem})`;
+    if (!setup.key && !setup.adaptador) return { status: "nao_configurado", modelo, detalhe: "ponha um modelo de vídeo em Configurar IA (usa a chave de lá) ou defina SAGADECK_VIDEO_KEY / OPENROUTER_API_KEY" };
+    const net = { setup, ...(fetcher !== fetch ? { fetcher } : {}) };
+    if (!videoReal) {
+      const cat = await videoCatalog(net);
+      if (!cat.ok) return { status: "sem_prova", modelo, detalhe: `${cat.motivo}; só o teste real prova: --video-real${de}` };
+      const meta = cat.models.find((m) => m.id === modelo || m.canonical_slug === modelo);
+      return meta ? { status: "sem_prova", modelo, detalhe: `o modelo está no catálogo, mas a chave e a geração só se provam gerando: --video-real (é cobrado)${de}` }
+        : { status: "falhou", modelo, detalhe: `o modelo não está no catálogo do provedor (${cat.models.length} modelos)` };
+    }
+    const cwd = outDir();
+    const sub = await videoOperation({ action: "submit", model: modelo, prompt: "a small red ball rolling slowly across a plain white table", duration: "min", resolution: "min", out: "video.mp4" }, { cwd, ...net });
+    const limite = Date.now() + videoTimeoutS * 1000;
+    let st = { status: sub.status };
+    while (!["completed", "failed", "error", "cancelled"].includes(st.status)) {
+      if (Date.now() > limite) return { status: "falhou", modelo, detalhe: `o clipe não ficou pronto em ${videoTimeoutS} s (job ${sub.id}, último estado: ${st.status || "?"})` };
+      await new Promise((r) => setTimeout(r, videoPollMs));
+      st = await videoOperation({ action: "status", id: sub.id }, { cwd, ...net });
+    }
+    if (st.status !== "completed") return { status: "falhou", modelo, detalhe: `o provedor encerrou com ${st.status}${st.error ? `: ${typeof st.error === "string" ? st.error : JSON.stringify(st.error)}` : ""}` };
+    const dl = await videoOperation({ action: "download", id: sub.id }, { cwd, ...net });
+    return { status: "ok", modelo, detalhe: `MP4 de ${Math.round(dl.bytes / 1024)} KB${dl.cost != null ? `, custou $${Number(dl.cost).toFixed(2)}` : ""}${de}`, arquivo: path.join(cwd, dl.video) };
+  },
+};
+
+const NEEDS_LLM = new Set(["texto", "visao", "imagem", "pesquisa"]);
+// only: lista de ids (padrão: todos); rapido: sem imagem e vídeo (os lentos e cobrados); videoReal: gera um clipe
+export async function iaCheck({ only, rapido = false, videoReal = false, videoTimeoutS = 600, videoPollMs = 5000, cfg = llmConfig(), env = process.env, fetcher = fetch, seed, outDir, onResult = () => {} } = {}) {
+  const ids = (only?.length ? only : Object.keys(CHECKS)).filter((id) => CHECKS[id] && !(rapido && (id === "imagem" || id === "video")));
+  let dir = outDir;
+  const out = () => (dir ||= fs.mkdtempSync(path.join(os.tmpdir(), "sagadeck-ia-check-")));
+  const t0 = Date.now();
+  const resultados = await Promise.all(ids.map(async (id) => {
+    const start = Date.now();
+    let r;
+    if (NEEDS_LLM.has(id) && !llmConfigured(cfg)) r = { status: "nao_configurado", detalhe: cfg.problem || "a IA não está configurada (Configurar IA, no Studio, ou ~/.sagadeck/ia.json)" };
+    else {
+      try { r = await RUN[id]({ cfg, env, fetcher, seed, videoReal, videoTimeoutS, videoPollMs, outDir: out }); }
+      catch (e) { r = { status: "falhou", detalhe: e?.message || String(e) }; }
+    }
+    const res = { id, nome: CHECKS[id], ms: Date.now() - start, ...r };
+    onResult(res);
+    return res;
+  }));
+  return { ok: resultados.every((r) => r.status !== "falhou"), ms: Date.now() - t0, provedor: cfg.url || cfg.adaptador || "", resultados };
+}

package/src/ai/ia-config.js

@@ -17,10 +17,10 @@ export const PROVIDERS = {
 // responde, o problema é o ambiente (rede, chave), não o modelo escolhido. Depois, cada um põe o modelo que quiser.
 export const RECOMMENDED = {
   provider: "openrouter",
-  models: { text: "deepseek/deepseek-v4.1-flash", vision: "deepseek/deepseek-v4.1-flash", image: "google/gemini-3.1-flash-image", search: "deepseek/deepseek-v4.1-flash:online" },
+  models: { text: "deepseek/deepseek-v4.1-flash", vision: "deepseek/deepseek-v4.1-flash", image: "google/gemini-3.1-flash-image", search: "deepseek/deepseek-v4.1-flash:online", video: "google/veo-3.1-lite" },
 };
 // os papéis que o sagadeck usa; cada um aponta para um modelo do provedor
-export const ROLES = ["text", "vision", "image", "search"];
+export const ROLES = ["text", "vision", "image", "search", "video"];
 
 export function iaFile(env = process.env, home = os.homedir()) {
   return env.SAGADECK_IA || path.join(home, ".sagadeck", "ia.json");

package/src/ai/llm.js

@@ -48,6 +48,8 @@ export function llmConfig(env = process.env) {
     visionModel: env.SAGADECK_VISION_MODEL || m.vision || m.text || "vision",
     // busca na web pelo modelo (no OpenRouter, um modelo ":online"); sem ele, a pesquisa usa os buscadores diretos
     searchModel: env.SAGADECK_SEARCH_MODEL || m.search || (fromEnv ? "search" : ""),
+    // vídeo (opcional): com ele, a geração de vídeo usa esta mesma camada (src/ai/video-generation.js, videoSetup)
+    videoModel: env.SAGADECK_VIDEO_MODEL || m.video || "",
     headers: ia?.headers || {},
     adaptador: ia?.adaptador || "",
     source: fromEnv ? "variável" : ia ? "arquivo" : "nenhuma",
@@ -61,7 +63,7 @@ export const llmConfigured = (cfg = llmConfig()) => !!(cfg.url || cfg.adaptador)
 
 // o papel (text, vision, image, search) vira o modelo configurado; outro nome passa como veio
 export function resolveModel(cfg, name) {
-  const roles = { text: cfg.textModel, vision: cfg.visionModel, image: cfg.imageModel, search: cfg.searchModel };
+  const roles = { text: cfg.textModel, vision: cfg.visionModel, image: cfg.imageModel, search: cfg.searchModel, video: cfg.videoModel };
   return roles[name] || name;
 }
 
@@ -74,6 +76,8 @@ function headers(cfg) {
 // Adaptador (opcional, da pessoa): um .mjs cujo default é (url, init) => Response. Serve para o que não é compatível
 // com a API da OpenAI (outro jeito de autenticar, outro endereço) sem mexer no sagadeck. Sem ele, o fetch normal.
 const adapters = new Map();
+// (exportado: a geração de vídeo manda pelo mesmo caminho, com o mesmo adaptador)
+export const providerFetch = (cfg, url, init) => send(cfg, url, init);
 async function send(cfg, url, init) {
   if (!cfg.adaptador) return fetch(url, init);
   if (!adapters.has(cfg.adaptador)) adapters.set(cfg.adaptador, import(pathToFileURL(path.resolve(cfg.adaptador)).href).then((mod) => mod.default));

package/src/ai/map-analysis-run.js

@@ -67,7 +67,7 @@ export async function runAnalysis(a, { P, cfg, onProgress = () => {} }) {
     const lines = readShapes(P, a.linha).filter((f) => /LineString/.test(f.geometry?.type || ""));
     if (!lines.length) throw new Error(`${a.linha} não tem linhas`);
     const arquivo = okFile(a.arquivo, ".geojson") ? a.arquivo : `${a.linha.replace(/\.[^.]+$/, "")}-faixa-${Math.round(metros)}m.geojson`;
-    Project.writeText(P, arquivo, fc(lines.map((f, k) => ({ type: "Feature", properties: { nome: `${nameOf(f.properties, k)} (faixa de ${fmtMetros(metros)})` }, geometry: lineBuffer(f.geometry, metros) }))));
+    Project.writeText(P, arquivo, fc(lines.map((f, k) => ({ type: "Feature", properties: { nome: `${nameOf(f.properties, k)} (faixa de ${fmtMetros(metros)})`, _faixa: true }, geometry: lineBuffer(f.geometry, metros) }))));
     let extra = "";
     if (a.pontos) {
       const pts = await readPoints(P, a.pontos);

package/src/ai/quality.js

@@ -51,7 +51,7 @@ export function auditText(spec, indices, { briefing = '', render = null } = {})
   // 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 (!s || !Number.isFinite(Number(s.titleSize)) || ONE_LINER.has(s.layout) || ['cover', 'section', 'end', '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

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";
@@ -24,6 +24,12 @@ 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");
@@ -59,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 = [];
@@ -81,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 || []) {
@@ -145,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}`); }
@@ -234,7 +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") ? `<style>${read("runtime/vendor/leaflet.css")}</style><script>${read("runtime/vendor/leaflet.js").replace(/<\/script/gi, "<\\/script")}</script><script>${read("runtime/map.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>` : ""}
@@ -258,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;
@@ -293,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>`;
@@ -302,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));
@@ -321,7 +353,7 @@ export function renderSlide(raw, i = 0, spec = {}) {
   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;