sagadeck 1.8.0 → 1.9.0

package/src/studio/public/app.js

@@ -35,7 +35,7 @@
   const LAYOUT_NAMES = [
     "cover", "section", "statement", "definition", "poster", "calendar", "headline", "quote", "number", "split", "full",
     "cards", "bento", "mosaic", "ribbon", "stats", "steps", "funnel", "pyramid", "list", "agenda", "timeline", "hub", "status", "onepage",
-    "chart", "table", "map", "compare", "matrix", "decisionlab", "diagram", "infographic", "question", "poll", "image", "code", "codewalk", "spotlight", "scenography", "portal", "science", "kinetic", "video", "carousel", "duel", "terminals", "turns", "solution", "calc", "algo", "graphlab", "codelab", "playground",
+    "chart", "table", "map", "compare", "matrix", "decisionlab", "diagram", "infographic", "question", "poll", "image", "code", "codewalk", "spotlight", "portal", "science", "video", "carousel", "duel", "terminals", "turns", "solution", "calc", "algo", "graphlab", "codelab", "playground",
     "blocks", "dossier", "canvas", "references", "end",
   ];
 
@@ -45,7 +45,7 @@
     split: "Texto e figura", cards: "Cartões", stats: "Indicadores", steps: "Etapas", list: "Lista",
     timeline: "Linha do tempo", chart: "Gráfico de dados", table: "Tabela", map: "Mapa", compare: "Comparação", matrix: "Matriz 2×2",
     question: "Pergunta", poll: "Enquete", image: "Imagem", code: "Código", video: "Vídeo",
-    diagram: "Diagrama", infographic: "Infográfico", mosaic: "Grade adaptável", ribbon: "Cápsulas", dossier: "Página de consulta", decisionlab: "Laboratório de decisões", science: "Fórmulas e funções", scenography: "Texto no cenário", codewalk: "Código guiado", spotlight: "Foco guiado", kinetic: "Tipografia cinética",
+    diagram: "Diagrama", infographic: "Infográfico", mosaic: "Grade adaptável", ribbon: "Cápsulas", dossier: "Página de consulta", decisionlab: "Laboratório de decisões", science: "Fórmulas e funções", codewalk: "Código guiado", spotlight: "Foco guiado",
     duel: "Duelo de commits", terminals: "Dois terminais", turns: "Turnos a dois", carousel: "Carrossel", solution: "Exercício resolvido", calc: "Calculadora ao vivo", algo: "Algoritmo animado",
     graphlab: "Rede explorável", codelab: "Código explorável", playground: "Experiência personalizada", portal: "Portal e transformação",
     blocks: "Livre (blocos)", canvas: "Livre (posições)", end: "Encerramento", references: "Referências",
@@ -429,7 +429,7 @@
       dom.renderedSlideContainer.innerHTML = data.html;
       window.SagaScience?.mount(dom.renderedSlideContainer);
       window.SagaMap?.mount(dom.renderedSlideContainer); // só aqui (prévia grande); miniaturas e galeria ficam na prévia em SVG
-      window.SagaMapData?.attach(dom.renderedSlideContainer, slide, () => { syncDeckToServer(); renderCurrentSlide(); }, { toast: showToast, hydrate: hydrateIcons });
+      window.SagaMapData?.attach(dom.renderedSlideContainer, slide, () => { syncDeckToServer(); renderCurrentSlide(); }, { toast: showToast, hydrate: hydrateIcons, materialized: previewMaterialized });
       window.SagaCalc?.mount(dom.renderedSlideContainer); // calculadora ao vivo: os controles funcionam no editor também
       window.SagaDiagrams?.mount(dom.renderedSlideContainer).then(() => reportDiagram(dom.renderedSlideContainer));
       window.SagaDecisionLab?.mount(dom.renderedSlideContainer);
@@ -2053,7 +2053,7 @@
     ["processo", "Processos e diagramas", ["steps", "timeline", "funnel", "pyramid", "diagram", "infographic", "hub"]],
     ["gestao", "Gestão e status", ["status", "onepage", "decisionlab"]],
     ["codigo", "Código e API", ["code", "codewalk", "api"]],
-    ["visual", "Imagem e movimento", ["image", "full", "carousel", "spotlight", "video", "scenography", "portal", "kinetic"]],
+    ["visual", "Imagem e movimento", ["image", "full", "carousel", "spotlight", "video", "portal"]],
     ["plateia", "Plateia", ["question", "poll"]],
     ["dinamicas", "Dinâmicas a dois", ["duel", "terminals", "turns"]],
     ["aula", "Aula: exercícios e algoritmos", ["solution", "calc", "algo", "graphlab", "codelab", "playground"]],
@@ -2329,38 +2329,13 @@
 
   // Ao trocar de layout, o conteúdo em lista (cartões, etapas, eventos, níveis…) vai junto
   const LIST_KEY = { cards: "items", bento: "tiles", stats: "stats", steps: "steps", funnel: "stages", pyramid: "levels", list: "items",
-    agenda: "items", timeline: "events", matrix: "cells", question: "options", poll: "options", split: "bullets", statement: "lines", references: "items", end: "contacts", kinetic: "beats" };
+    agenda: "items", timeline: "events", matrix: "cells", question: "options", poll: "options", split: "bullets", statement: "lines", references: "items", end: "contacts" };
   const SOURCE_KEYS = ["items", "tiles", "stats", "kpis", "steps", "process", "flow", "stages", "levels", "events", "cells", "options", "bullets", "lines", "contacts"];
-  function kineticPhrases(value) {
-    const words = String(value || "").match(/==[^=]+==|\*\*.*?\*\*|\*[^*]+\*|~~.*?~~|`[^`]+`|\[[^\]]+\]\([^)]+\)|\S+/g) || [];
-    const connectors = new Set(["a", "as", "de", "do", "da", "dos", "das", "e", "em", "no", "na", "nos", "nas", "para", "por", "com", "o", "os"]);
-    const phrases = [];
-    while (words.length) {
-      let take = Math.ceil(words.length / Math.ceil(words.length / 4));
-      const last = words[take - 1]?.replace(/^[^A-Za-zÀ-ÿ]+|[^A-Za-zÀ-ÿ]+$/g, "").toLowerCase();
-      if (take > 1 && connectors.has(last)) take--;
-      phrases.push(words.splice(0, take).join(" "));
-    }
-    return phrases;
-  }
   function carryContent(slide, to) {
     const target = LIST_KEY[to];
     if (!target) return;
     const activeKey = LIST_KEY[slide.layout];
     if (activeKey === target && Array.isArray(slide[target]) && slide[target].length) return;
-    if (to === "kinetic") {
-      const source = SOURCE_KEYS.find((key) => Array.isArray(slide[key]) && slide[key].length);
-      if (source) {
-        slide.beats = slide[source].map((item) => {
-          if (typeof item !== "object" || item == null) return { text: String(item ?? "") };
-          return { text: item.title ?? item.label ?? item.text ?? item.name ?? "", ...(item.text && item.title ? { tag: item.text } : {}) };
-        });
-      } else {
-        const phrases = [...kineticPhrases(slide.title || slide.text), ...kineticPhrases(slide.subtitle)];
-        if (phrases.length) slide.beats = phrases.map((text, i) => ({ text, ...(i === 0 && slide.kicker ? { tag: slide.kicker } : {}) }));
-      }
-      return;
-    }
     const srcKey = [activeKey, ...SOURCE_KEYS].find((k) => k && Array.isArray(slide[k]) && slide[k].length);
     if (!srcKey) return;
     const entries = slide[srcKey].map((x) => {
@@ -2391,7 +2366,7 @@
     }
     if (layoutName === "quote") slide.quote = primary;
     if (["question", "poll"].includes(layoutName)) slide.question = primary;
-    if (LIST_KEY[layoutName] && !slide[LIST_KEY[layoutName]]?.length && !["kinetic", "statement"].includes(layoutName)) {
+    if (LIST_KEY[layoutName] && !slide[LIST_KEY[layoutName]]?.length && layoutName !== "statement") {
       const content = [slide.subtitle, slide.body, primary].find(v => typeof v === "string" && v.trim());
       if (content) slide[LIST_KEY[layoutName]] = content.split(/\n+/).filter(Boolean).map(text => ["list", "split", "question", "poll", "references", "end"].includes(layoutName) ? text : {title:text});
     }
@@ -2452,6 +2427,23 @@
         } catch (e) { showToast(`Não deu para atualizar: ${e.message}`); }
       },
       hydrate: hydrateIcons,
+      splitCalendar: async () => {
+        const at = state.currentSlideIndex, slide = state.deck.slides[at];
+        const { calendarMonth, calendarMonths } = window.SagaCalendarMonths;
+        const MESES = ["janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"];
+        const months = calendarMonths(slide);
+        if (months.length < 2) return;
+        const { uid, events, undated, month, week, ...base } = slide;
+        const slides = months.map((m, k) => ({ ...base, ...(k === 0 && uid ? { uid } : {}), view: "mes", month: m,
+          kicker: base.kicker || `${MESES[+m.slice(5) - 1]} ${m.slice(0, 4)}`,
+          events: events.filter((e) => calendarMonth(e?.date) === m),
+          ...(k === 0 && (undated?.length || events.some((e) => !calendarMonth(e?.date))) ? { undated: [...(undated || []), ...events.filter((e) => !calendarMonth(e?.date)).map(({ title, text }) => ({ title, ...(text ? { text } : {}) }))] } : {}) }));
+        state.deck.slides.splice(at, 1, ...slides);
+        await syncDeckToServer();
+        renderThumbnails();
+        await renderCurrentSlide();
+        showToast(`Um slide por mês: ${slides.length} slides, na visão de mês.`, 4000);
+      },
       pickIcon: (cb) => openIconPicker(null, cb),
       layoutLabel,
       generateImage: (element, btn) => {
@@ -2609,7 +2601,9 @@
   }
 
   async function startPresentation({ pen = false } = {}) {
-    await syncDeckToServer(); // a prévia é montada a partir do deck do servidor
+    // a apresentação é montada a partir do deck do servidor. Modelo em prévia: o servidor já tem o mesmo deck (qualquer
+    // mudança teria criado a cópia e saído da prévia), e enviar de novo contaria como mudança: apresentar não grava nada
+    if (!state.preview) await syncDeckToServer();
     const start = state.currentSlideIndex + 1;
     dom.presModal.classList.remove("hidden");
     dom.presFrame.src = scopedURL(`preview?t=${Date.now()}#${start}`);
@@ -2848,7 +2842,7 @@
   // outra aba/aparelho abriu outra apresentação neste Studio: nada desta foi gravado (o servidor recusou)
   function staleTab(msg) { updateSaveStatus("error"); showToast(msg, 20000, { label: "Recarregar", fn: () => location.reload() }); }
 
-  async function syncDeckToServer() {
+  async function syncDeckToServer({ throwOnError = false } = {}) {
     trackDeck("Edição");
     updateSaveStatus("saving");
     try {
@@ -2858,7 +2852,7 @@
         body: JSON.stringify({ spec: state.deck, expectFile: state.file }),
       });
       const data = await res.json().catch(() => ({}));
-      if (data.stale) return staleTab(data.error);
+      if (data.stale) { staleTab(data.error); if (throwOnError) throw new Error(data.error); return; }
       if ("file" in data) state.file = data.file;
       if (data.materialized) previewMaterialized(data.materialized);
       // o servidor dá identidade a slide novo (uid) e leva o ajuste visual junto quando um texto muda: o Studio adota
@@ -2872,9 +2866,11 @@
       if (adopted && !state.applyingHistory) deckHistory.rebase(state.deck);
       updateSaveStatus(res.ok ? "saved" : "error");
       if (res.ok) window.SagaProject?.deckChanged();
+      else if (throwOnError) throw new Error(data.error || 'Não foi possível salvar as mudanças antes de exportar.');
     } catch (err) {
       console.warn("Erro ao sincronizar com servidor:", err);
       updateSaveStatus("error");
+      if (throwOnError) throw err;
     }
   }
 
@@ -3635,9 +3631,8 @@ ${ta.value}`;
 
   const isMobile = () => window.matchMedia("(max-width: 900px)").matches;
 
-  // Painel lateral: Formatar, Assistente ou Variáveis
-  // abas do painel lateral: Formatar (conteúdo), Propriedades (inspetor), Assistente, Variáveis
-  const PANE_TABS = ["props", "inspect", "chat", "vars"];
+  // Formatar, Propriedades e Variáveis ficam agrupados; o Assistente tem acesso fixo separado, por último.
+  const PANE_TABS = ["props", "inspect", "vars", "chat"];
   const paneEls = (w) => ({ btn: document.getElementById(`tab-btn-${w}`), panel: document.getElementById(`tab-panel-${w}`) });
   const currentPane = () => PANE_TABS.find((w) => paneEls(w).panel?.classList.contains("active")) || "props";
   // menu de botão direito genérico (itens: { label, ic, fn, danger, disabled } ou { sep: true })
@@ -3665,7 +3660,7 @@ ${ta.value}`;
     const fab = document.getElementById("chat-fab");
     if (!fab) return;
     const visible = isMobile() ? dom.inspectorSidebar.classList.contains("mobile-open") : !dom.inspectorSidebar.classList.contains("collapsed");
-    fab.classList.toggle("hidden", visible && currentPane() === "chat");
+    fab.classList.toggle("hidden", visible); // com o painel aberto, o botão Assistente já está sempre à vista
     const badge = document.getElementById("chat-badge");
     if (visible && currentPane() === "chat" && badge?.classList.contains("show")) badge.classList.remove("show"); // só se precisar: o observador do selo chama esta função
     fab.classList.toggle("has-news", !!document.getElementById("chat-badge")?.classList.contains("show"));
@@ -4314,29 +4309,24 @@ ${ta.value}`;
       return { res, name };
     }
 
-    // PowerPoint / PDF / roteiro: levam alguns segundos (o Chrome invisível desenha cada slide)
+    // PowerPoint / PDF / roteiro: acompanham a fila do servidor, sem prender a página no download.
     const EXPORTS = {
-      pptx: { label: "o PowerPoint", done: "PowerPoint editável, com animações e notas." },
-      pdf: { label: "o PDF", done: "PDF com um slide por página." },
-      roteiro: { label: "o roteiro", done: "roteiro com miniaturas, notas e tempos." },
-      estudo: { label: "o material de estudo", done: "material de estudo: cada slide inteiro e o texto de consulta." },
-      "estudo-html": { label: "o material de estudo", done: "material de estudo num HTML só." },
-      tudo: { label: "o PowerPoint, o PDF e o roteiro", done: "um .zip com o PowerPoint (com notas), o PDF e o roteiro." },
+      pptx: "o PowerPoint", pdf: "o PDF", roteiro: "o roteiro", estudo: "o material de estudo",
+      "estudo-html": "o material de estudo", tudo: "o PowerPoint, o PDF e o roteiro",
     };
     document.querySelectorAll("[data-export]").forEach((btn) => {
       btn.onclick = async (e) => {
         e.preventDefault();
         if (btn.disabled) return;
         const kind = btn.dataset.export, clean = btn.dataset.notas === "0";
-        const x = clean ? { label: "o PowerPoint sem as notas", done: "PowerPoint sem as notas do apresentador, pronto para mandar." } : EXPORTS[kind];
+        const label = clean ? "o PowerPoint sem as notas" : EXPORTS[kind];
         btn.disabled = true;
-        showToast(`Gerando ${x.label} (${state.deck.slides.length} slides)… pode levar alguns segundos.`, 60000);
         try {
-          const { res, name } = await downloadFrom(`api/export/${kind}${clean ? "?notas=0" : ""}`, `apresentacao.${{ pptx: "pptx", tudo: "zip", "estudo-html": "html" }[kind] || "pdf"}`);
-          const warns = JSON.parse(decodeURIComponent(res.headers.get("X-Sagadeck-Warnings") || "%5B%5D"));
-          showToast(warns.length ? `"${name}" baixado, com ${warns.length} aviso(s): ${warns.slice(0, 2).join("; ")}` : `"${name}" baixado: ${x.done}`, warns.length ? 9000 : 4000);
+          await window.SagadeckExports.start({ kind, notes: !clean, title: state.deck.title }, { beforeStart: async () => {
+            if (!state.preview) await syncDeckToServer({ throwOnError: true });
+          } });
         } catch (err) {
-          showToast(`Não deu para gerar ${x.label}: ${err.message}`, 8000);
+          showToast(`Não deu para gerar ${label}: ${err.message}`, 8000);
         } finally {
           btn.disabled = false;
         }

package/src/studio/public/export-status.js

@@ -0,0 +1,154 @@
+// A mesma fila acompanha exportações no editor e na biblioteca, inclusive ao voltar à página.
+(function () {
+  'use strict';
+  const labels = { pptx: 'PowerPoint', pdf: 'PDF', roteiro: 'Roteiro', estudo: 'Material de estudo', 'estudo-html': 'Material de estudo', tudo: 'PowerPoint, PDF e roteiro', sagadeck: 'Apresentação' };
+  const jobs = new Map(), rows = new Map(), automatic = new Set(), dismissed = new Set();
+  let panel, list, heading, toggle, hint, minimized = false, busy = false;
+  const elapsed = ms => { const s = Math.max(0, Math.floor(ms / 1000)); return s < 60 ? `${s} s` : `${Math.floor(s / 60)} min ${s % 60} s`; };
+  async function json(url, options) {
+    let res;
+    try { res = await fetch(url, { ...options, signal: AbortSignal.timeout(15000) }); }
+    catch (e) {
+      if (['TimeoutError', 'AbortError'].includes(e.name)) throw new Error('O Studio não respondeu a tempo. Se a geração começou, ela aparecerá nesta lista quando a conexão voltar.');
+      throw new Error('Não foi possível conectar ao Studio. Confira a conexão e tente novamente.');
+    }
+    let body; try { body = await res.json(); } catch { throw new Error('O servidor não respondeu como esperado. Tente novamente.'); }
+    if (!res.ok) throw new Error(body.error || `Não foi possível concluir o pedido (${res.status}).`);
+    return body;
+  }
+  function mount() {
+    if (panel) return;
+    const style = document.createElement('style');
+    style.textContent = `
+      #export-status{position:fixed;right:22px;bottom:22px;z-index:40;width:min(390px,calc(100vw - 32px));background:var(--chrome,#fff);color:var(--text,#242424);border:1px solid var(--ui-line,#ddd);border-radius:12px;box-shadow:var(--shadow-3,0 8px 32px #0002);font:13px/1.5 system-ui,sans-serif}
+      body:not(.lib) #export-status[data-minimized=true]{top:64px;bottom:auto}
+      #export-status[hidden],#export-status [hidden]{display:none!important}
+      #export-status header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:12px}
+      #export-status button{font:inherit;cursor:pointer;border:1px solid var(--ui-line,#ddd);border-radius:6px;padding:4px 9px;background:transparent;color:inherit}
+      #export-status button:focus-visible{outline:2px solid var(--brand,#0f6cbd);outline-offset:2px}
+      #export-status button:disabled{opacity:.6;cursor:wait}
+      #export-status .export-list{max-height:330px;overflow:auto;padding:0 14px}
+      #export-status article{padding:12px 0;border-top:1px solid var(--ui-line,#ddd)}
+      #export-status .export-name{display:block;overflow-wrap:anywhere}
+      #export-status p{margin:4px 0}
+      #export-status progress{display:block;width:100%;height:8px;margin:8px 0;accent-color:var(--brand,#0f6cbd)}
+      #export-status .export-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
+      #export-status .export-download{background:var(--brand-fill,#0f6cbd);color:var(--on-brand,#fff);border-color:var(--brand-fill,#0f6cbd)}
+      #export-status .export-error{color:var(--err,#b42318)}
+      #export-status small{opacity:.8}
+      #export-status .export-hint{padding:8px 14px 12px;font-size:11px;margin:0}
+      #export-status details{margin-top:6px;overflow-wrap:anywhere}
+    `;
+    document.head.append(style);
+    panel = document.createElement('section'); panel.id = 'export-status'; panel.setAttribute('aria-label', 'Exportações');
+    panel.innerHTML = '<header><strong>Exportações</strong><button type="button" aria-expanded="true">Recolher</button></header><div class="export-list"></div><p class="export-hint">Você pode continuar trabalhando e baixar depois pela biblioteca. Arquivos disponíveis por até 24 h, enquanto o Studio estiver ligado (10 mais recentes).</p>';
+    document.body.append(panel);
+    heading = panel.querySelector('strong'); list = panel.querySelector('.export-list'); toggle = panel.querySelector('header button'); hint = panel.querySelector('.export-hint');
+    toggle.onclick = () => { minimized = !minimized; render(); };
+  }
+  function message(j) {
+    if (j.status === 'failed') return (j.id.startsWith('starting-') ? 'Não deu para iniciar: ' : 'Falhou: ') + j.error;
+    if (j.status === 'ready') return 'Pronto para baixar';
+    if (j.status === 'expired') return 'Arquivo não disponível. Gere novamente.';
+    const p = j.progress || {};
+    const prefix = p.format ? (labels[p.format] || '') + ': ' : '';
+    if (p.phase === 'slides') return prefix + `Preparando slide ${p.slide || p.completed + 1} de ${p.total}`;
+    if (p.phase === 'packing') return prefix + 'Concluindo o arquivo';
+    if (p.phase === 'opening') return prefix + 'Abrindo a apresentação para exportar';
+    if (j.status === 'queued') return 'Na fila para gerar';
+    return 'Preparando a exportação';
+  }
+  async function download(id) {
+    const row = rows.get(id); if (!row || row.downloading) return;
+    row.downloading = true; row.button.disabled = true; row.note.textContent = 'Recebendo o arquivo para baixar';
+    try {
+      const res = await fetch(`api/export/jobs/${id}/download`);
+      if (!res.ok) { let error; try { error = (await res.json()).error; } catch {} throw new Error(error || 'Não foi possível receber o arquivo.'); }
+      const blob = await res.blob();
+      const cd = res.headers.get('Content-Disposition') || '';
+      const name = decodeURIComponent((cd.match(/filename\*=UTF-8''([^;]+)/) || [])[1] || jobs.get(id).name);
+      const a = document.createElement('a'); const url = URL.createObjectURL(blob);
+      a.href = url; a.download = name; document.body.append(a); a.click(); a.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 10000);
+      row.note.textContent = 'Download enviado ao navegador. Você pode baixar novamente.';
+    } catch (e) { row.note.textContent = 'Não deu para baixar: ' + e.message; }
+    finally { row.downloading = false; row.button.disabled = false; }
+  }
+  function render() {
+    const shown = [...jobs.values()].filter(j => !dismissed.has(j.id));
+    if (!shown.length && !panel) return;
+    mount(); panel.hidden = !shown.length;
+    panel.dataset.minimized = String(minimized);
+    const running = shown.filter(j => ['queued', 'running', 'starting'].includes(j.status)).length;
+    heading.textContent = running ? `Exportações (${running} em andamento)` : 'Exportações';
+    list.hidden = hint.hidden = minimized; toggle.textContent = minimized ? 'Expandir' : 'Recolher'; toggle.setAttribute('aria-expanded', String(!minimized));
+    for (const j of shown) {
+      let row = rows.get(j.id);
+      if (!row) {
+        const el = document.createElement('article'); el.dataset.exportJob = j.id;
+        el.innerHTML = '<strong class="export-name"></strong><p class="export-message" role="status" aria-live="polite"></p><progress aria-label="Preparação dos slides e conclusão do arquivo"></progress><small class="export-time"></small><details hidden><summary>Avisos da exportação</summary><p></p></details><div class="export-actions"><button class="export-download" type="button">Baixar arquivo</button><button class="export-dismiss" type="button">Ocultar</button></div><p class="export-note"></p>';
+        row = { el, name: el.querySelector('strong'), status: el.querySelector('.export-message'), bar: el.querySelector('progress'), time: el.querySelector('small'), warnings: el.querySelector('details'), button: el.querySelector('.export-download'), dismiss: el.querySelector('.export-dismiss'), note: el.querySelector('.export-note') };
+        row.button.onclick = () => download(j.id);
+        row.dismiss.onclick = () => { dismissed.add(j.id); render(); };
+        list.append(el); rows.set(j.id, row);
+      }
+      row.el.hidden = false; row.name.textContent = `${labels[j.kind] || 'Arquivo'} — ${j.title || j.name || 'Apresentação'}`;
+      const text = message(j); if (row.status.textContent !== text) row.status.textContent = text;
+      row.status.classList.toggle('export-error', ['failed', 'expired'].includes(j.status));
+      row.time.textContent = `${j.finishedAt ? 'Duração' : 'Tempo decorrido'}: ${elapsed((j.finishedAt || Date.now()) - j.createdAt)}`;
+      row.button.hidden = j.status !== 'ready'; row.dismiss.hidden = ['queued', 'running', 'starting'].includes(j.status);
+      row.bar.hidden = ['failed', 'expired'].includes(j.status);
+      const p = j.progress || {};
+      if (j.status === 'ready' || p.phase === 'slides' || p.phase === 'packing') {
+        row.bar.max = Math.max(1, (p.total || 0) + 1); row.bar.value = j.status === 'ready' ? row.bar.max : p.completed || 0;
+      } else row.bar.removeAttribute('value');
+      row.warnings.hidden = !j.warnings?.length; row.warnings.querySelector('p').textContent = (j.warnings || []).join('; ');
+      if (j.status === 'ready' && automatic.delete(j.id)) download(j.id);
+    }
+    for (const [id, row] of rows) {
+      if (!jobs.has(id)) { row.el.remove(); rows.delete(id); }
+      else if (dismissed.has(id)) row.el.hidden = true;
+    }
+  }
+  async function refresh() {
+    if (busy) return;
+    busy = true;
+    const known = new Set(jobs.keys()); // uma resposta atrasada não apaga a geração iniciada depois do pedido
+    try {
+      const { jobs: latest } = await json('api/export/jobs');
+      const ids = new Set(latest.map(j => j.id));
+      for (const j of jobs.values()) if (known.has(j.id) && !ids.has(j.id) && !j.id.startsWith('starting-')) {
+        j.status = 'expired'; automatic.delete(j.id);
+      }
+      for (const j of latest) jobs.set(j.id, j);
+      if (panel) panel.removeAttribute('data-disconnected');
+      for (const row of rows.values()) if (row.note.dataset.connection) { row.note.textContent = ''; delete row.note.dataset.connection; }
+      render();
+    } catch {
+      if (jobs.size) {
+        mount(); panel.dataset.disconnected = 'true';
+        for (const [id, row] of rows) if (['queued', 'running'].includes(jobs.get(id)?.status)) {
+          row.note.dataset.connection = 'true'; row.note.textContent = 'Sem conexão com o Studio. A geração pode continuar no servidor; o acompanhamento volta quando a conexão retornar.';
+        }
+      }
+    } finally { busy = false; }
+  }
+  window.SagadeckExports = {
+    async start(options, { beforeStart } = {}) {
+      const id = 'starting-' + crypto.randomUUID();
+      jobs.set(id, { id, kind: options.kind, title: options.title || 'Apresentação', status: 'starting', createdAt: Date.now() }); minimized = false; render();
+      try {
+        await beforeStart?.();
+        const { job } = await json('api/export/jobs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(options) });
+        jobs.delete(id); jobs.set(job.id, job); dismissed.delete(job.id); automatic.add(job.id); render(); refresh();
+        return job;
+      } catch (e) {
+        const j = jobs.get(id); j.status = 'failed'; j.error = e.message; j.finishedAt = Date.now(); render(); throw e;
+      }
+    },
+  };
+  // Espaço suficiente entre pedidos para que a página descanse; relógio não depende da resposta de rede.
+  setInterval(() => { if (jobs.size) render(); }, 1000);
+  setInterval(refresh, 1500);
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', refresh, { once: true }); else refresh();
+})();

package/src/studio/public/index.html

@@ -183,7 +183,7 @@
       </div>
       <div class="rgroup" data-adv>
         <div class="rgroup-body">
-          <button id="btn-api-slide" class="rbtn rbtn-lg" title="Slide que executa uma requisição de verdade (tipo Postman), com o código curl e Python ao lado. Exemplos prontos: biblioteca, Nova, Exemplo: aula de APIs"><i class="ic" data-ic="plug-zap"></i><span>Slide de API</span></button>
+          <button id="btn-api-slide" class="rbtn rbtn-lg" title="Slide que executa uma requisição de verdade (tipo Postman), com o código curl e Python ao lado. Exemplos prontos: Demos oficiais, APIs com curl"><i class="ic" data-ic="plug-zap"></i><span>Slide de API</span></button>
           <button id="btn-api-envs" class="rbtn rbtn-lg" title="Endereços, tokens e segredos dos slides de API (ficam na sua máquina, nunca no deck)"><i class="ic" data-ic="server-cog"></i><span>Ambientes</span></button>
           <button id="btn-api-vars-studio" class="rbtn rbtn-lg" title="Abrir o painel de variáveis do deck"><i class="ic" data-ic="braces"></i><span>Variáveis</span></button>
         </div>
@@ -456,18 +456,19 @@
 
     <aside id="inspector-sidebar" class="task-pane" aria-label="Painel lateral">
       <div class="pane-header">
-        <div class="segmented" role="tablist">
-          <!-- como no VS Code: a aba aberta mostra o nome; as outras, só o ícone (o nome fica na dica) -->
-          <button id="tab-btn-props" class="seg active" role="tab" title="Formatar: o conteúdo do slide"><i class="ic" data-ic="pencil"></i><span class="seg-label">Formatar</span></button>
-          <button id="tab-btn-inspect" class="seg" role="tab" title="Propriedades do objeto selecionado, do slide e da apresentação"><i class="ic" data-ic="sliders-horizontal"></i><span class="seg-label">Propriedades</span></button>
-          <button id="tab-btn-chat" class="seg" role="tab" title="Assistente de IA"><i class="ic" data-ic="sparkles"></i><span class="seg-label">Assistente</span><span id="chat-badge" class="chat-badge-dot"></span></button>
-          <button id="tab-btn-vars" class="seg" role="tab" title="Variáveis do ambiente"><i class="ic" data-ic="braces"></i><span class="seg-label">Variáveis</span></button>
+        <div class="pane-tabs" role="tablist" aria-label="Painéis de edição e Assistente">
+          <div class="segmented" id="property-tabs">
+            <button id="tab-btn-props" class="seg" role="tab" aria-selected="false" aria-label="Formatar" title="Formatar: o conteúdo do slide"><i class="ic" data-ic="pencil"></i><span class="seg-label">Formatar</span></button>
+            <button id="tab-btn-inspect" class="seg" role="tab" aria-selected="false" aria-label="Propriedades" title="Propriedades do objeto selecionado, do slide e da apresentação"><i class="ic" data-ic="sliders-horizontal"></i><span class="seg-label">Propriedades</span></button>
+            <button id="tab-btn-vars" class="seg" role="tab" aria-selected="false" aria-label="Variáveis" title="Variáveis do ambiente"><i class="ic" data-ic="braces"></i><span class="seg-label">Variáveis</span></button>
+          </div>
+          <button id="tab-btn-chat" class="seg active" role="tab" aria-selected="true" title="Assistente de IA"><i class="ic" data-ic="sparkles"></i><span class="seg-label">Assistente</span><span id="chat-badge" class="chat-badge-dot"></span></button>
         </div>
         <button id="btn-close-pane" class="icon-btn" title="Fechar painel"><i class="ic" data-ic="x"></i></button>
       </div>
 
       <div id="tab-panel-inspect" class="tab-panel inspector-panel" role="tabpanel" aria-labelledby="tab-btn-inspect"><div id="inspector-body" class="ip-body"></div></div>
-      <div id="tab-panel-props" class="tab-panel active">
+      <div id="tab-panel-props" class="tab-panel" role="tabpanel" aria-labelledby="tab-btn-props">
         <div id="auto-banner" class="auto-banner" hidden></div>
         <div id="slide-fields-form" class="fields-form"></div>
         <div class="pane-section">
@@ -476,7 +477,7 @@
         </div>
       </div>
 
-      <div id="tab-panel-chat" class="tab-panel">
+      <div id="tab-panel-chat" class="tab-panel active" role="tabpanel" aria-labelledby="tab-btn-chat">
         <div class="chat-options">
           <button id="btn-brainstorm-apply" class="btn btn-primary btn-sm hidden" type="button" title="Autoriza a IA a aplicar o que vocês combinaram na conversa">Pode fazer</button>
         </div>
@@ -813,7 +814,7 @@
       </div>
       <div class="modal-dialog-body">
         <label class="field-label" for="ai-deck-briefing">Sobre o que é, para quem e com que objetivo?</label>
-        <textarea id="ai-deck-briefing" class="form-control" rows="5" placeholder="ex.: Palestra de 20 minutos para gerentes de agência sobre usar IA com segurança no atendimento. Comece com um caso real, mostre 3 cuidados e feche com um checklist.&#10;(imagens: peça no texto — 'com fotos', 'você decide onde ilustrar'… sem pedir, não gera)"></textarea>
+        <textarea id="ai-deck-briefing" class="form-control" rows="5" placeholder="ex.: Palestra de 20 minutos para líderes de equipe sobre usar IA com segurança no dia a dia. Comece com um caso real, mostre 3 cuidados e feche com um checklist.&#10;(imagens: peça no texto — 'com fotos', 'você decide onde ilustrar'… sem pedir, não gera)"></textarea>
         <details id="ai-deck-advanced">
           <summary>Opções avançadas (minutos, estilo, arquivos…)</summary>
           <div class="form-row">
@@ -861,6 +862,7 @@
   <script src="formula.js"></script>
   <script src="calc.js"></script>
   <script src="science.js"></script>
+  <script src="map-background.js"></script>
   <script src="map.js"></script>
   <script src="diagram.js"></script>
   <script src="decision-lab.js"></script>
@@ -882,6 +884,7 @@
   <script src="provenance.js"></script>
   <script src="header-footer.js"></script>
   <script src="preferences-ui.js"></script>
+  <script src="export-status.js"></script>
   <script src="app.js"></script>
 </body>
 </html>

package/src/studio/public/library.css

@@ -12,7 +12,8 @@ a { color: inherit; }
 :focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
 .ic { display: inline-flex; width: 18px; height: 18px; flex: none; vertical-align: middle; }
 .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
-body.lib { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-template-rows: 84px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--canvas-bg); font-size: 14px; }
+/* a faixa "Configure a IA" tem a linha dela (largura toda; some quando escondida); lateral e conteúdo vêm depois */
+body.lib { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-template-rows: 84px auto minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--canvas-bg); font-size: 14px; }
 .skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 12px; background: var(--chrome); border-radius: 8px; }
 .skip-link:focus { top: 15px; }
 .lib-brand { display: flex; align-items: center; gap: 11px; padding: 0 24px; border-right: 1px solid var(--ui-line); text-decoration: none; font-size: 23px; font-weight: 720; letter-spacing: -.8px; }
@@ -28,7 +29,7 @@ body.lib { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-temp
 .lib-search { display: flex; align-items: center; gap: 9px; width: 228px; height: 37px; color: var(--text-3); padding: 0 11px; background: transparent; border: 1px solid var(--ui-line); border-radius: 8px; }
 .lib-search input { background: none; color: var(--text); border: 0; outline: 0; width: 100%; min-width: 0; font-size: 11px; }
 .lib-search kbd { border: 1px solid var(--ui-line); border-radius: 3px; font-size: 10px; padding: 0 4px; }
-.ai-banner { display: flex; align-items: center; gap: 12px; margin: 10px 24px 0; padding: 10px 14px; border-radius: 10px; background: #fef3c7; color: #78350f; border: 1px solid #f59e0b; font-size: 13px; }
+.ai-banner { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 12px; margin: 10px 24px 0; padding: 10px 14px; border-radius: 10px; background: #fef3c7; color: #78350f; border: 1px solid #f59e0b; font-size: 13px; }
 .ai-banner[hidden] { display: none; }
 .ai-banner span { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* o motivo pode trazer um caminho longo */
 .ai-banner button { flex: none; }
@@ -45,6 +46,7 @@ body.lib { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-temp
 .lib-user { display: flex; align-items: center; gap: 8px; font-size: 12px; }
 .lib-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--selected); color: var(--brand); text-transform: uppercase; font-weight: 700; }
 .lib-body { display: contents; }
+.lib-side, .lib-main { grid-row: 3; }
 .lib-side { min-height: 0; display: flex; flex-direction: column; padding: 14px 14px 18px; border-right: 1px solid var(--ui-line); overflow-y: auto; }
 #side { display: flex; flex-direction: column; gap: 5px; flex: 1; min-height: 360px; }
 .nav { display: flex; align-items: center; gap: 10px; min-height: 40px; flex: none; padding: 0 13px; border-radius: 8px; color: var(--text-2); width: 100%; text-align: left; background: none; border: 0; font-size: 12px; }
@@ -231,7 +233,7 @@ body.lib { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-temp
 @media (min-width: 1680px) { .lib-main { padding: 40px 65px 70px; } .hero { padding-bottom: 48px; } .hero-stage { min-height: 320px; } .mini-dark { width: 335px; height: 207px; } .mini-dark b { font-size: 45px; } .mini-beige { left: 8%; } .mini-pop { right: 10%; } }
 @media (max-width: 1200px) { body.lib { grid-template-columns: 190px minmax(0, 1fr); } .lib-top { padding: 0 24px; gap: 9px; } .lib-brand { padding: 0 20px; } .lib-main { padding: 30px 28px 60px; } .breadcrumb { display: none; } .hero { gap: 20px; } .hero-stage { transform: scale(.87); transform-origin: center right; margin-left: -40px; } .hero h1 { font-size: 44px; } .section-head h2 { font-size: 18px; } .experience-art { padding: 18px; } .experiences-grid { gap: 17px; } }
 @media (max-width: 940px) { .hero { grid-template-columns: 1fr; padding-bottom: 30px; } .hero h1 { font-size: 45px; max-width: 480px; } .hero-stage { display: none; } .hero p { max-width: 420px; } .experiences-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .experience-art { padding: 20px; } .empty.compact { flex-wrap: wrap; } }
-@media (max-width: 700px) { body.lib { grid-template-columns: 1fr; grid-template-rows: 70px minmax(0, 1fr); } .lib-brand { position: absolute; left: 8px; height: 70px; padding: 0 10px; border: 0; font-size: 20px; } .lib-brand small { font-size: 6px; } .lib-logo { width: 27px; } .lib-top { padding: 0 15px 0 168px; gap: 7px; } .lib-top .spacer { display: none; } .lib-search { width: 100%; min-width: 0; padding: 0 8px; border: 0; } .lib-search kbd, #btn-new .lbl, .lib-user .uname, #btn-theme { display: none; } #btn-new { padding: 0; min-width: 35px; min-height: 35px; } .lib-body { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; } .lib-side { padding: 8px 13px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ui-line); flex-direction: row; } #side { flex-direction: row; align-items: center; min-height: 0; flex: none; gap: 4px; } .nav { min-height: 33px; width: auto; white-space: nowrap; font-size: 11px; gap: 7px; padding: 0 11px; } .nav .ic { width: 15px; height: 15px; } .nav .count { display: none; } .side-title { margin: 0 3px; font-size: 0; } .side-title button { width: 25px; height: 30px; } .lib-side .grow, .studio-note, .where, .ai-settings { display: none; } .side-foot { padding: 0; border: 0; } .lib-main { padding: 27px 22px 45px; } .hero { padding-top: 0; } .hero h1 { font-size: 41px; letter-spacing: -1.8px; } .hero p { font-size: 12px; margin: 16px 0 21px; } .eyebrow { font-size: 8px; margin-bottom: 17px; } .hero-actions { gap: 15px; } .section-head { gap: 10px; align-items: flex-start; } .section-head h2 { font-size: 17px; max-width: 230px; } .section-head .text-button { font-size: 10px; } .experiences-section { padding-top: 24px; } .experience-filters { gap: 2px; margin-bottom: 17px; } .experience-filter { padding: 7px 9px; font-size: 9px; } .experiences-grid { gap: 17px 12px; } .experience-art { padding: 13px; } .experience-art b { margin-top: 13px; } .experience-art small { letter-spacing: .8px; } .experience-meta { padding-top: 9px; } .experience-meta strong { font-size: 10px; } .experience-meta .experience-sub { font-size: 8px; line-height: 1.4; } .experience-meta .arrow { display: none; } .pop-star { font-size: 53px; } .pop-mark { border-width: 18px; } .code-cursor { width: 4px; height: 9px; left: 14px; bottom: 16px; } .code-lines { display: none; } .executive-bars { right: 11px; bottom: 13px; } .experience-art b { font-size: 10cqw; } .catalog-heading h1 { font-size: 30px; } .catalog-heading p { font-size: 12px; } .head h1 { font-size: 23px; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } .empty.compact { padding: 18px; gap: 12px; } .empty.compact .actions { justify-content: flex-start; } .empty.compact .empty-copy { min-width: 170px; } .over { padding: 6px; gap: 4px; opacity: 1; } .over .pill { font-size: 8px; padding: 0 6px; min-height: 25px; } .pill .ic { width: 10px; height: 10px; } .meta .info { font-size: 9px; } .meta .name { font-size: 11px; } .chip { font-size: 9px; } .ldlg { padding: 22px; } .ldlg .row .lib-btn { font-size: 11px; } }
+@media (max-width: 700px) { body.lib { grid-template-columns: 1fr; grid-template-rows: 70px auto auto minmax(0, 1fr); } .lib-main { grid-row: 4; } .lib-brand { position: absolute; left: 8px; height: 70px; padding: 0 10px; border: 0; font-size: 20px; } .lib-brand small { font-size: 6px; } .lib-logo { width: 27px; } .lib-top { padding: 0 15px 0 168px; gap: 7px; } .lib-top .spacer { display: none; } .lib-search { width: 100%; min-width: 0; padding: 0 8px; border: 0; } .lib-search kbd, #btn-new .lbl, .lib-user .uname, #btn-theme { display: none; } #btn-new { padding: 0; min-width: 35px; min-height: 35px; } .lib-body { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; } .lib-side { padding: 8px 13px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ui-line); flex-direction: row; } #side { flex-direction: row; align-items: center; min-height: 0; flex: none; gap: 4px; } .nav { min-height: 33px; width: auto; white-space: nowrap; font-size: 11px; gap: 7px; padding: 0 11px; } .nav .ic { width: 15px; height: 15px; } .nav .count { display: none; } .side-title { margin: 0 3px; font-size: 0; } .side-title button { width: 25px; height: 30px; } .lib-side .grow, .studio-note, .where, .ai-settings { display: none; } .side-foot { padding: 0; border: 0; } .lib-main { padding: 27px 22px 45px; } .hero { padding-top: 0; } .hero h1 { font-size: 41px; letter-spacing: -1.8px; } .hero p { font-size: 12px; margin: 16px 0 21px; } .eyebrow { font-size: 8px; margin-bottom: 17px; } .hero-actions { gap: 15px; } .section-head { gap: 10px; align-items: flex-start; } .section-head h2 { font-size: 17px; max-width: 230px; } .section-head .text-button { font-size: 10px; } .experiences-section { padding-top: 24px; } .experience-filters { gap: 2px; margin-bottom: 17px; } .experience-filter { padding: 7px 9px; font-size: 9px; } .experiences-grid { gap: 17px 12px; } .experience-art { padding: 13px; } .experience-art b { margin-top: 13px; } .experience-art small { letter-spacing: .8px; } .experience-meta { padding-top: 9px; } .experience-meta strong { font-size: 10px; } .experience-meta .experience-sub { font-size: 8px; line-height: 1.4; } .experience-meta .arrow { display: none; } .pop-star { font-size: 53px; } .pop-mark { border-width: 18px; } .code-cursor { width: 4px; height: 9px; left: 14px; bottom: 16px; } .code-lines { display: none; } .executive-bars { right: 11px; bottom: 13px; } .experience-art b { font-size: 10cqw; } .catalog-heading h1 { font-size: 30px; } .catalog-heading p { font-size: 12px; } .head h1 { font-size: 23px; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } .empty.compact { padding: 18px; gap: 12px; } .empty.compact .actions { justify-content: flex-start; } .empty.compact .empty-copy { min-width: 170px; } .over { padding: 6px; gap: 4px; opacity: 1; } .over .pill { font-size: 8px; padding: 0 6px; min-height: 25px; } .pill .ic { width: 10px; height: 10px; } .meta .info { font-size: 9px; } .meta .name { font-size: 11px; } .chip { font-size: 9px; } .ldlg { padding: 22px; } .ldlg .row .lib-btn { font-size: 11px; } }
 @media (max-width: 390px) { .lib-search input { font-size: 10px; } .lib-main { padding-left: 17px; padding-right: 17px; } .hero h1 { font-size: 36px; } .lib-brand { font-size: 18px; gap: 6px; } .lib-top { padding-left: 149px; } .hero-actions { gap: 12px; } .hero-actions .lib-btn { font-size: 11px; } .section-head p { line-height: 1.6; } }
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
 .lmenu.tall { max-width: 340px; } /* menu Nova: descrições quebram em vez de alargar o menu */
@@ -278,3 +280,10 @@ body.lib { display: grid; grid-template-columns: 218px minmax(0, 1fr); grid-temp
 .dlg-ask-opts { display: flex; flex-wrap: wrap; gap: 6px; }
 .dlg-ask-free { display: flex; gap: 6px; }
 .dlg-ask-free input { flex: 1; }
+/* demos oficiais (só leitura): selo com cadeado, descrição numa linha, a pasta da lateral */
+.card-oficial .thumb img { width: 100%; height: 100%; object-fit: cover; }
+.chip-oficial { font-weight: 600; color: var(--accent, #5b4bdb); gap: 3px; }
+.chip-oficial .ic, .head h1 .ic { width: 1em; height: 1em; }
+.card-oficial .meta .info { min-width: 0; }
+.card-oficial .meta .info .desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.grid-oficial { margin-top: 18px; }

package/src/studio/public/library.html

@@ -55,6 +55,7 @@
   <script src="update-notice.js"></script>
   <script src="ai-settings.js"></script>
   <script src="map-settings.js"></script>
+  <script src="export-status.js"></script>
   <script src="library.js"></script>
 </body>
 </html>