sagadeck 1.7.1 → 1.8.0

package/src/studio/layout-samples.js

@@ -48,6 +48,7 @@ export const LAYOUT_INFO = {
   timeline: ["Linha do tempo", "Eventos em sequência"],
   chart: ["Gráfico de dados", "Barras, colunas, linhas, rosca: cole a tabela do Excel ou digite os valores"],
   table: ["Tabela", "Tabela de verdade nas cores do tema: cole do Excel, destaque linha e total"],
+  map: ["Mapa", "Pontos, linhas e áreas sobre o mapa ao vivo: da planilha do projeto, de GeoJSON/GPX/KML ou valores por estado; cor por categoria, cartão ao clicar, uma camada por clique"],
   compare: ["Comparação", "A × B lado a lado"],
   matrix: ["Matriz 2×2", "Quatro quadrantes"],
   question: ["Pergunta", "Pergunta para a plateia com timer"],
@@ -65,7 +66,77 @@ export const LAYOUT_INFO = {
   end: ["Encerramento", "Obrigado e contatos"],
 };
 
+// Como pedir cada layout à IA, em português comum: aparece no "Conheça o SagaDeck" (src/studio/tour.js), para quem vê
+// o recurso saber a frase que o gera. Exemplos de áreas variadas, nunca de um setor só.
+export const LAYOUT_ASK = {
+  portal: "Abra a palestra entrando numa porta que transforma o cenário e revela o tema",
+  playground: "Faça um slide interativo em que a plateia mexe num controle e vê a cor do céu mudar",
+  codelab: "Monte um exercício de código em que os alunos alteram a entrada e executam passo a passo",
+  graphlab: "Mostre a rede de metrô da cidade e deixe testar a rota mais curta tirando uma estação",
+  mosaic: "Liste as seis frentes do projeto num mosaico que se ajusta sozinho",
+  ribbon: "Mostre as três fases da obra em cápsulas, uma ao lado da outra",
+  dossier: "Faça uma página de consulta com os comandos e as respostas da API, para guardar",
+  decisionlab: "Compare revisão humana e automação com premissas que eu possa ajustar ao vivo",
+  solution: "Resolva passo a passo quanto rende uma aplicação de R$ 1.000 a 1% ao mês em três anos",
+  calc: "Faça uma calculadora do consumo de energia de uma casa, com faixas de baixo, médio e alto",
+  algo: "Mostre a busca binária rodando de verdade, com o código e as variáveis",
+  carousel: "Apresente cinco destinos de viagem, um por clique, com foto e uma frase",
+  duel: "Simule duas pessoas editando o mesmo arquivo no Git até dar conflito",
+  terminals: "Mostre dois terminais lado a lado: um faz push e o outro puxa a mudança",
+  turns: "Encene um diálogo entre cliente e atendente, uma fala por clique",
+  science: "Mostre a parábola y = ax² + bx + c com controles para a, b e c",
+  infographic: "Faça um infográfico com os cinco pilares da sustentabilidade em volta de um centro",
+  diagram: "Desenhe o fluxo de atendimento de um pedido, da chegada à entrega",
+  scenography: "Abra com a frase \"Além do óbvio\" num cenário de palco",
+  cover: "Faça a capa da palestra sobre energia solar, com o meu nome e a data",
+  section: "Abra a segunda parte, sobre os resultados",
+  statement: "Uma frase de impacto: a água mais barata é a que não se desperdiça",
+  calendar: "Mostre num calendário as datas das oficinas do semestre",
+  poster: "Faça um pôster de uma página explicando como funciona uma placa solar",
+  definition: "Defina \"sustentabilidade\", com a origem da palavra",
+  headline: "Uma manchete enorme: 40% da água tratada se perde no caminho",
+  quote: "Ponha a citação de Paulo Freire sobre ensinar, com o autor",
+  onepage: "Resuma o projeto numa página: jornada, problema com números, solução e painel",
+  status: "Faça o status da semana: feito, em andamento, bloqueios e próximos passos",
+  hub: "Monte um menu em que a plateia escolhe o caminho: iniciante, intermediário ou avançado",
+  number: "Mostre o número 1,2 milhão de visitantes, contando até ele",
+  split: "Explique o ciclo da água com o texto de um lado e uma ilustração do outro",
+  full: "Uma foto de floresta ocupando o slide inteiro",
+  cards: "Três cartões com os benefícios do programa, cada um com ícone",
+  bento: "Monte um mosaico de blocos com os destaques do ano",
+  stats: "Mostre quatro indicadores do trimestre com a tendência de cada um",
+  steps: "Mostre em etapas como instalar um sensor de umidade",
+  funnel: "Faça o funil de inscrições: visitantes, cadastros, inscritos e concluintes",
+  pyramid: "Monte a pirâmide de prioridades, do essencial ao desejável",
+  list: "Liste os cinco cuidados antes de uma viagem longa",
+  agenda: "Faça a agenda do evento com a parte atual destacada",
+  timeline: "Faça a linha do tempo da história do cinema brasileiro",
+  chart: "Faça um gráfico de linhas com a temperatura média de cada mês",
+  table: "Monte a tabela comparando três planos, com o total destacado",
+  map: "Mostre no mapa as estações de medição da planilha, coloridas pelo status, com um cartão ao clicar",
+  compare: "Compare transporte público e carro próprio lado a lado",
+  matrix: "Monte uma matriz 2x2 de esforço e impacto com as ideias do time",
+  question: "Faça uma pergunta para a plateia com cronômetro de 30 segundos",
+  poll: "Faça uma enquete ao vivo: qual tema vocês querem aprofundar?",
+  image: "Ponha esta foto em tela cheia com uma legenda curta",
+  code: "Mostre este código Python com as linhas da conexão destacadas",
+  codewalk: "Explique este código uma linha por vez, com a saída simulada",
+  api: "Faça uma chamada de API ao vivo que consulta o clima e mostra a resposta",
+  spotlight: "Conduza o olhar pelas partes desta planta baixa, uma por vez",
+  kinetic: "Faça a abertura com frases curtas aparecendo em ritmo, estilo tipografia cinética",
+  video: "Ponha este vídeo do YouTube no slide",
+  blocks: "Monte livremente um slide com título, dois textos e uma imagem em colunas",
+  canvas: "Posicione o logotipo, o título e a foto onde eu indicar",
+  references: "Liste as referências bibliográficas no fim",
+  end: "Feche com um obrigado e os meus contatos",
+};
+
 export const LAYOUT_SAMPLES = {
+  map: { layout: "map", kicker: "Monitoramento", title: "Estações de ==qualidade do ar==", basemap: "claro", layers: [
+    { name: "Estações", color: "status", label: "nome", points: [
+      { nome: "Centro", lat: -23.5489, lon: -46.6388, status: "Boa", pm25: 12 }, { nome: "Pinheiros", lat: -23.5614, lon: -46.7020, status: "Moderada", pm25: 24 },
+      { nome: "Ibirapuera", lat: -23.5874, lon: -46.6576, status: "Boa", pm25: 9 }, { nome: "Mooca", lat: -23.5596, lon: -46.5996, status: "Ruim", pm25: 41 },
+      { nome: "Santana", lat: -23.5027, lon: -46.6252, status: "Moderada", pm25: 27 }], colors: { Ruim: "alert" } }] },
   portal: portalExample,
   playground: playgroundExample,
   codelab: codeLabExample,

package/src/studio/project.js

@@ -20,7 +20,7 @@ const toNum = (v) => rawNum(String(v ?? "").trim().replace(/^R\$\s*/i, "").repla
 export const META = ".sagadeck";
 export const CONTEXT = "contexto";
 const TEXT_EXT = new Set(["md", "markdown", "txt", "csv", "tsv", "json", "yaml", "yml", "css", "js", "mjs", "cjs", "jsx", "ts", "tsx", "html", "htm", "svg", "xml",
-  "py", "r", "m", "sql", "sh", "bash", "bat", "ps1", "ini", "toml", "cfg", "java", "c", "h", "cpp", "cs", "go", "rs", "tex", "bib", "log"]);
+  "py", "r", "m", "sql", "sh", "bash", "bat", "ps1", "ini", "toml", "cfg", "java", "c", "h", "cpp", "cs", "go", "rs", "tex", "bib", "log", "geojson", "gpx", "kml"]); // geo: as camadas do mapa (map.js) se editam aqui
 const SHEET_EXT = new Set(["csv", "tsv", "xlsx"]);
 const IMAGE_EXT = new Set(["png", "jpg", "jpeg", "gif", "webp", "svg"]);
 const extOf = (f) => (String(f).match(/\.([a-z0-9]+)$/i)?.[1] || "").toLowerCase();

package/src/studio/public/ai-settings.js

@@ -13,8 +13,10 @@ window.SagaAISettings = (() => {
   const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
   let dialog, info, onSaved = () => {};
 
+  // o estilo da caixa serve também ao Configurar mapa (map-settings.js)
+  const ensureStyle = () => { if (!document.getElementById("ai-cfg-style")) { const st = document.createElement("style"); st.id = "ai-cfg-style"; st.textContent = css; document.head.append(st); } };
   function build() {
-    if (!document.getElementById("ai-cfg-style")) { const st = document.createElement("style"); st.id = "ai-cfg-style"; st.textContent = css; document.head.append(st); }
+    ensureStyle();
     dialog = document.createElement("dialog");
     dialog.className = "ai-cfg";
     dialog.id = "ai-settings-dialog";
@@ -85,6 +87,7 @@ window.SagaAISettings = (() => {
   }
 
   return {
+    ensureStyle,
     async open(saved) {
       onSaved = typeof saved === "function" ? saved : () => {};
       if (!dialog) build();

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", "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", "scenography", "portal", "science", "kinetic", "video", "carousel", "duel", "terminals", "turns", "solution", "calc", "algo", "graphlab", "codelab", "playground",
     "blocks", "dossier", "canvas", "references", "end",
   ];
 
@@ -43,7 +43,7 @@
   const LAYOUT_LABELS = {
     cover: "Capa", section: "Seção", statement: "Frase de impacto", definition: "Definição", poster: "Pôster (infográfico)", calendar: "Calendário", quote: "Citação", number: "Número grande",
     split: "Texto e figura", cards: "Cartões", stats: "Indicadores", steps: "Etapas", list: "Lista",
-    timeline: "Linha do tempo", chart: "Gráfico de dados", table: "Tabela", compare: "Comparação", matrix: "Matriz 2×2",
+    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",
     duel: "Duelo de commits", terminals: "Dois terminais", turns: "Turnos a dois", carousel: "Carrossel", solution: "Exercício resolvido", calc: "Calculadora ao vivo", algo: "Algoritmo animado",
@@ -394,6 +394,7 @@
     const idx = state.currentSlideIndex;
     const slide = state.deck.slides[idx];
     if (!slide) return;
+    window.SagaProject?.slideChanged?.(slide);
     if (dom.tabPanelVars.classList.contains("active")) renderStudioSavedVars();
 
     renderReviewBar(slide, idx);
@@ -424,8 +425,11 @@
 
       // Renderizar HTML no palco
       window.SagaScience?.dispose(dom.renderedSlideContainer);
+      window.SagaMap?.dispose(dom.renderedSlideContainer, { keepView: true });
       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.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);
@@ -2045,7 +2049,7 @@
   const SLIDE_GROUPS = [
     ["estrutura", "Abertura e estrutura", ["cover", "section", "agenda", "end", "references"]],
     ["texto", "Texto e ideias", ["statement", "definition", "poster", "calendar", "headline", "quote", "list", "cards", "split", "mosaic", "ribbon", "bento", "dossier"]],
-    ["dados", "Números e gráficos", ["number", "stats", "chart", "table", "science", "compare", "matrix"]],
+    ["dados", "Números e gráficos", ["number", "stats", "chart", "table", "map", "science", "compare", "matrix"]],
     ["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"]],

package/src/studio/public/explorer.js

@@ -15,6 +15,7 @@
   let treeData = null;
   const openTabs = []; // { path, kind, name, dirty, text, sheet }
   let active = "__deck__";
+  let slideLayout = "";
   const expanded = new Set(["contexto"]);
   const $ = (s, r = document) => r.querySelector(s);
   const esc = (s) => String(s ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
@@ -225,7 +226,8 @@
   function bindTabs() {
     $("#doc-tabs").addEventListener("click", (ev) => {
       const c = ev.target.closest("[data-close]"); if (c) { ev.stopPropagation(); closeTab(c.dataset.close); return; }
-      const t = ev.target.closest("[data-doc]"); if (t) activate(t.dataset.doc);
+      // A aba ativa já tem a grade e a seleção da pessoa: reler por clique perderia ambas na resposta tardia.
+      const t = ev.target.closest("[data-doc]"); if (t && t.dataset.doc !== active) activate(t.dataset.doc);
     });
     $("#doc-tabs").addEventListener("auxclick", (ev) => { const t = ev.target.closest("[data-doc]"); if (ev.button === 1 && t && t.dataset.doc !== "__deck__") closeTab(t.dataset.doc); });
   }
@@ -241,16 +243,26 @@
     if (!openTabs.some((t) => t.path === p)) openTabs.push({ path: p, kind, name: p.split("/").pop() });
     await activate(p);
   }
+  // Com um mapa, a planilha e os pontos precisam estar à vista e receber cliques ao mesmo tempo.
+  function syncLayout() {
+    const t = openTabs.find((x) => x.path === active);
+    const mapSheet = t?.kind === "sheet" && slideLayout === "map";
+    const side = t?.kind === "deck" || mapSheet;
+    const editor = $("#canvas-stage-wrapper");
+    editor.classList.toggle("doc-side", active !== "__deck__" && side);
+    editor.classList.toggle("doc-full", active !== "__deck__" && !side);
+    if (t?.kind === "sheet") $("#doc-view .sh-body")?.classList.toggle("no-suggest", t.hideSuggest ?? mapSheet);
+  }
+  function slideChanged(slide) { slideLayout = slide?.layout || ""; syncLayout(); ctx?.relayout(); }
   async function activate(p) {
     active = p;
     renderTabs();
     $("#project-tree")?.querySelectorAll(".ex-file").forEach((r) => r.classList.toggle("active", r.dataset.path === p));
-    const editor = $("#canvas-stage-wrapper"), view = $("#doc-view");
-    editor.classList.remove("doc-side", "doc-full");
+    const view = $("#doc-view");
+    syncLayout();
     if (p === "__deck__") { view.innerHTML = ""; view.classList.add("hidden"); ctx.relayout(); return; }
     const t = openTabs.find((x) => x.path === p);
     view.classList.remove("hidden");
-    editor.classList.add(t.kind === "deck" ? "doc-side" : "doc-full");
     try {
       if (t.kind === "deck") await showDeckText(view, t);
       else if (t.kind === "md" || t.kind === "text" || (t.kind === "sheet" && t.asText)) await showText(view, t);
@@ -349,13 +361,14 @@
     const sepInfo = data.delimiter ? ` · separado por ${DELIM[data.delimiter] || data.delimiter}` : "";
     const asText = /\.(csv|tsv)$/i.test(t.name) ? `<button type="button" class="btn btn-small" data-as-text title="Ver o arquivo como texto"><i class="ic" data-ic="file-code"></i> Texto</button>` : "";
     view.innerHTML = `<div class="dv-head"><i class="ic" data-ic="file-spreadsheet"></i><b>${esc(t.name)}</b><span class="dv-status" id="dv-status">${sheet.total} linhas · ${cols.length} colunas${sepInfo}${editable ? "" : " · só leitura"}</span>${asText}<button type="button" class="btn btn-small" data-toggle-suggest title="Gráficos que fazem sentido com estes dados"><i class="ic" data-ic="chart-column"></i> Gráficos</button></div>${tabs}
-      <div class="sh-body${t.hideSuggest ? " no-suggest" : ""}"><div class="sh-grid-wrap" id="sh-grid"></div>
+      <div class="sh-body${(t.hideSuggest ?? (slideLayout === "map")) ? " no-suggest" : ""}"><div class="sh-grid-wrap" id="sh-grid"></div>
       <aside class="sh-suggest"><div class="sh-suggest-head"><b>Gráficos que fazem sentido</b><button type="button" class="btn btn-small" data-ai-suggest title="A IA confere o tipo das colunas e sugere gráficos, títulos e nomes dos eixos"><i class="ic" data-ic="sparkles"></i> Sugerir com IA</button></div><div class="sh-cards" id="sh-cards"><div class="ex-empty">Olhando as colunas…</div></div></aside></div>`;
     const types = [];
     for (const c of cols) types[c.index] = { type: c.type, label: TYPE_LABEL[c.type] || c.type };
     let timer = 0;
-    window.SagaViewers.sheetGrid(view.querySelector("#sh-grid"), {
+    const grid = window.SagaViewers.sheetGrid(view.querySelector("#sh-grid"), {
       rows: sheet.rows, editable, hasHeader: sheet.hasHeader, types,
+      onSelect: (r) => window.SagaMapData?.selectRow(t.path, r + 1),
       onChange: (rows) => {
         const st = $("#dv-status"); st.textContent = "gravando…"; t.dirty = true; renderTabs();
         clearTimeout(timer);
@@ -365,9 +378,11 @@
         }, 500);
       },
     });
+    // planilha com posição ou endereço: "Pôr no mapa" e "Achar coordenadas" (map-data.js)
+    window.SagaMapData?.sheetTools(view, { t, rows: sheet.rows, grid, api, ctx, reload: async (p) => { if (p && p !== t.path) return; t.text = undefined; await activate(t.path); } });
     view.querySelectorAll("[data-sheet]").forEach((b) => b.onclick = () => { t.sheet = b.dataset.sheet; activate(t.path); });
     view.querySelector("[data-as-text]")?.addEventListener("click", () => { t.asText = true; t.text = undefined; activate(t.path); });
-    view.querySelector("[data-toggle-suggest]").onclick = () => { t.hideSuggest = !t.hideSuggest; view.querySelector(".sh-body").classList.toggle("no-suggest", t.hideSuggest); };
+    view.querySelector("[data-toggle-suggest]").onclick = () => { t.hideSuggest = !view.querySelector(".sh-body").classList.contains("no-suggest"); view.querySelector(".sh-body").classList.toggle("no-suggest", t.hideSuggest); };
     view.querySelector("[data-ai-suggest]").onclick = (ev) => loadSuggestions(t, true, ev.currentTarget);
     ctx.hydrate(view);
     loadSuggestions(t, false);
@@ -439,5 +454,5 @@
   // o deck mudou por outro caminho (formulário, IA, arrastar): a aba do texto da apresentação acompanha
   function deckChanged() { openTabs.find((t) => t.kind === "deck")?.refresh?.(); }
   const wantsPaste = () => !$("#project-explorer").classList.contains("hidden") || active !== "__deck__";
-  window.SagaProject = { setup, refreshTree, openFile, deckChanged, savePastedImage, uploadFile, wantsPaste, activeTab: () => active };
+  window.SagaProject = { setup, refreshTree, openFile, deckChanged, slideChanged, savePastedImage, uploadFile, wantsPaste, activeTab: () => active };
 })();

package/src/studio/public/index.html

@@ -849,6 +849,9 @@
   <script src="ai-settings.js"></script>
   <script src="api-envs-form.js"></script>
   <script src="calc-fields.js"></script>
+  <script src="map-fields.js"></script>
+  <script src="map-settings.js"></script>
+  <script src="map-data.js"></script>
   <script src="art-preview.js"></script>
   <script src="api-collections.js"></script>
   <script src="developer-fields.js"></script>
@@ -858,6 +861,7 @@
   <script src="formula.js"></script>
   <script src="calc.js"></script>
   <script src="science.js"></script>
+  <script src="map.js"></script>
   <script src="diagram.js"></script>
   <script src="decision-lab.js"></script>
   <script src="visual-editor.js"></script>

package/src/studio/public/library.html

@@ -33,6 +33,7 @@
     <aside class="lib-side">
       <nav id="side" aria-label="Biblioteca"></nav>
       <button type="button" class="lib-btn ghost ai-settings" id="btn-ai" hidden title="Provedores, chaves e modelos de IA"><i class="ic" data-ic="sliders-horizontal"></i><span class="lbl">Configurar IA</span></button>
+      <button type="button" class="lib-btn ghost ai-settings" id="btn-map" hidden title="Serviços do mapa: fundo, endereços e rotas (opcional)"><i class="ic" data-ic="map"></i><span class="lbl">Configurar mapa</span></button>
     </aside>
     <main class="lib-main" id="main" tabindex="-1" aria-live="polite"><div class="initial-loading"><span class="loading-orbit"></span>Preparando seu estúdio…</div></main>
   </div>
@@ -53,6 +54,7 @@
   <script src="ui-icons.js"></script>
   <script src="update-notice.js"></script>
   <script src="ai-settings.js"></script>
+  <script src="map-settings.js"></script>
   <script src="library.js"></script>
 </body>
 </html>

package/src/studio/public/library.js

@@ -62,11 +62,12 @@
   // e, enquanto a IA não estiver configurada, a faixa "Configure a IA" (some ao salvar)
   const aiSaved = () => { $("#ai-banner").hidden = true; };
   api("api/ia").then(({ editable, configured, problem }) => {
-    $("#btn-ai").hidden = !editable; $("#ai-banner").hidden = !editable || configured;
+    $("#btn-ai").hidden = !editable; $("#btn-map").hidden = !editable; $("#ai-banner").hidden = !editable || configured;
     if (problem) $("#ai-banner span").textContent = `A IA não está configurada. ${problem}`; // o arquivo existe mas não serve
     hydrate($("#ai-banner"));
   }).catch(() => {});
   $("#btn-ai").onclick = () => window.SagaAISettings.open(aiSaved);
+  $("#btn-map").onclick = () => window.SagaMapSettings.open(); // opcional: o mapa funciona sem configurar nada
   $("#ai-banner-btn").onclick = () => window.SagaAISettings.open(aiSaved);
   const openEditor = (id, present) => { location.href = `editor?deck=${encodeURIComponent(id)}${present ? "&present=1" : ""}`; };
 
@@ -76,6 +77,7 @@
     $("#side").innerHTML = `
       <button class="nav ${view === "recentes" ? "active" : ""}" data-view="recentes">${ic("clock")}<span class="name">Recentes</span></button>
       <button class="nav ${view === "todas" ? "active" : ""}" data-view="todas">${ic("layout-grid")}<span class="name">Todas</span><span class="count">${data.decks.length || ""}</span></button>
+      <button class="nav nav-tour" data-tour title="Tudo o que dá para fazer, um slide por recurso (abre em prévia)">${ic("compass")}<span class="name">Conheça o SagaDeck</span></button>
       <div class="side-title">TÓPICOS<button title="Novo tópico" id="new-topic" aria-label="Novo tópico">${ic("plus")}</button></div>
       ${data.topics.map((t) => `<button class="nav ${view === t.id ? "active" : ""}" data-view="${esc(t.id)}" data-topic="${esc(t.id)}"><span class="dot" style="background:${esc(t.color)}"></span><span class="name">${esc(t.name)}</span><span class="count">${t.count || ""}</span></button>`).join("")}
       ${loose ? `<button class="nav ${view === "" ? "active" : ""}" data-view="" title="Arquivos .yaml deixados direto na pasta da biblioteca"><span class="dot" style="background:${NO_TOPIC.color}"></span><span class="name">${NO_TOPIC.name}</span><span class="count">${loose}</span></button>` : ""}
@@ -86,6 +88,8 @@
     hydrate($("#side"));
     $("#side").querySelectorAll("[data-view]").forEach((b) => b.onclick = () => { view = b.dataset.view; store.set("libView", view); render(); });
     $("#new-topic").onclick = () => topicDialog();
+    // a apresentação de recursos (src/studio/tour.js) abre como os modelos da vitrine: em prévia, sem criar arquivo
+    $("#side [data-tour]").onclick = () => { location.href = "editor?model=conheca&topic=Modelos"; };
     $("#side").querySelectorAll("[data-topic]").forEach((b) => {
       b.ondragover = (e) => { if (e.dataTransfer.types.includes("application/x-sagadeck-deck")) { e.preventDefault(); b.classList.add("drop"); } };
       b.ondragleave = () => b.classList.remove("drop");
@@ -277,6 +281,7 @@
     ["visual", "model-lavanda", "Estúdio lavanda", "Mosaicos, cápsulas e composições editoriais", ["#EFE9FB", "#5B3FA8", "#D8C8F5"]],
     ["visual", "model-executivo", "Relatório executivo", "Resumo, indicadores e plano de trabalho", ["#0F1115", "#E4B660", "#EDEBE6"]],
     ["visual", "model-workshop", "Workshop visual", "Perguntas, código guiado e consulta", ["#FFF7E6", "#1A1A1A", "#E8590C"]],
+    ["recurso", "model-conheca", "Conheça o SagaDeck", "Um slide por recurso, com a frase para pedir cada um à IA", ["#F2F0EA", "#1A1A1A", "#F2B33D"]],
     ["recurso", "model-explorar", "Explore uma ideia", "Prever, comparar cenários, curvas conectadas e acompanhar o mesmo objeto entre cenas", ["#F4F1EA", "#1B1F3B", "#E8590C"]],
     ["recurso", "model-novidades", "Novidades", "Carrossel, gráfico do Excel e da planilha do projeto, fórmulas vivas, duelo de commits, terminais e zoom", ["#F4F1EA", "#1B1F3B", "#E8590C"]],
     ["recurso", "model-hidraulica", "Aula de hidráulica", "Navier–Stokes, curva que se mexe, calculadora de Reynolds ao vivo e exercício resolvido passo a passo", ["#EAF4F8", "#0B5C7A", "#1B998B"]],

package/src/studio/public/map-data.js

@@ -0,0 +1,154 @@
+// Planilha × mapa no Studio (aba Arquivos, planilha aberta): "Pôr no mapa" cria o slide de mapa a partir dela,
+// "Achar coordenadas" preenche latitude e longitude pelo endereço (pergunta antes de mandar os endereços para o
+// serviço de fora; mostra o progresso; o que não achou fica listado), e a seleção anda junto: clicar num ponto do
+// mapa seleciona a linha da planilha aberta, e selecionar a linha abre o cartão do ponto.
+window.SagaMapData = (() => {
+  const norm = (s) => String(s ?? "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "");
+  const LAT = ["lat", "latitude"], LON = ["lon", "lng", "long", "longitude"], COORD = ["coordenadas", "coordenada", "coords", "latlon", "latlong", "posicao", "localizacao"];
+  const ADDR = ["endereco", "address", "logradouro", "rua", "enderecocompleto"], NAME = ["nome", "name", "titulo", "local", "estacao", "unidade", "ponto", "descricao"];
+  const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  const find = (head, names) => head.findIndex((h) => names.includes(norm(h)));
+
+  // o que a planilha tem: posição, endereço, uma coluna boa para cor (2 a 8 categorias) e uma para o nome
+  function guess(rows) {
+    const head = (rows[0] || []).map((h) => String(h).trim()), body = rows.slice(1).filter((r) => r.some((c) => String(c).trim()));
+    const lat = find(head, LAT), lon = find(head, LON), coord = find(head, COORD), addr = find(head, ADDR);
+    const pos = new Set([lat, lon, coord, addr]);
+    const distinct = (i) => new Set(body.map((r) => String(r[i] ?? "").trim()).filter(Boolean)).size;
+    const isNum = (i) => body.length && body.every((r) => !String(r[i] ?? "").trim() || /^[-+]?\d+([.,]\d+)?$/.test(String(r[i]).trim()));
+    // o nome primeiro (coluna "nome"… ou a de texto com valores quase todos diferentes); a cor vai para uma coluna
+    // de categorias de verdade: valores que se repetem, de 2 a 8
+    let label = find(head, NAME);
+    if (label < 0) label = head.findIndex((h, i) => !pos.has(i) && !isNum(i) && distinct(i) > Math.min(8, body.length / 2));
+    const color = head.findIndex((h, i) => !pos.has(i) && i !== label && !isNum(i) && distinct(i) >= 2 && distinct(i) <= 8 && distinct(i) < body.length);
+    const withPos = lat >= 0 && lon >= 0 ? body.filter((r) => String(r[lat] ?? "").trim() && String(r[lon] ?? "").trim()).length : coord >= 0 ? body.filter((r) => String(r[coord] ?? "").trim()).length : 0;
+    return { head, lat, lon, coord, addr, color, label, total: body.length, withPos };
+  }
+
+  function dialog(html) {
+    const d = document.createElement("dialog");
+    d.className = "md-dialog";
+    d.innerHTML = html;
+    document.body.append(d);
+    d.addEventListener("close", () => d.remove());
+    d.showModal();
+    return d;
+  }
+
+  async function geocode(t, g, { api, ctx, status, reload }) {
+    const call = (extra) => fetch("api/mapa/geocode", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ path: t.path, ...extra }) });
+    const plano = await call({ planejar: true });
+    if (!plano.ok) { const e = await plano.json().catch(() => ({})); ctx.toast(e.error || `Não deu (HTTP ${plano.status}).`, 6000); return; }
+    const p = await plano.json();
+    let confirmo = false;
+    if (p.precisaConfirmar) {
+      const d = dialog(`<h3>Achar as coordenadas pelo endereço</h3>
+        <p>Vou enviar <b>${p.enviar} endereço${p.enviar === 1 ? "" : "s"}</b> desta planilha (coluna <b>${esc(p.coluna)}</b>) ao serviço <b>${esc(p.servico)}</b> para achar latitude e longitude. Os endereços saem desta máquina.</p>
+        <p>Leva cerca de ${p.segundos <= 1 ? "1 segundo" : p.segundos < 90 ? `${p.segundos} segundos` : `${Math.ceil(p.segundos / 60)} minutos`}, no ritmo que o serviço aceita.${p.cache ? ` ${p.cache} já estavam guardados e não serão enviados de novo.` : ""}</p>
+        <div class="md-row"><button type="button" class="btn" data-no>Cancelar</button><button type="button" class="btn btn-primary" data-yes>Enviar e achar</button></div>`);
+      const ok = await new Promise((r) => { d.querySelector("[data-yes]").onclick = () => { d.close(); r(true); }; d.querySelector("[data-no]").onclick = () => { d.close(); r(false); }; });
+      if (!ok) return;
+      confirmo = true;
+    }
+    const res = await call({ confirmo });
+    if (!res.ok) { const e = await res.json().catch(() => ({})); ctx.toast(e.error || `Não deu (HTTP ${res.status}).`, 6000); return; }
+    // progresso linha a linha (ndjson)
+    const reader = res.body.getReader(), dec = new TextDecoder();
+    let buf = "", end = null;
+    for (;;) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buf += dec.decode(value, { stream: true });
+      let i;
+      while ((i = buf.indexOf("\n")) >= 0) {
+        const line = buf.slice(0, i); buf = buf.slice(i + 1);
+        if (!line.trim()) continue;
+        const ev = JSON.parse(line);
+        if (ev.type === "plano") status.textContent = `procurando ${ev.total} endereço${ev.total === 1 ? "" : "s"}…`;
+        if (ev.type === "progresso") status.textContent = `${ev.feitos} de ${ev.total} · ${ev.ok} achado${ev.ok === 1 ? "" : "s"}`;
+        if (ev.type === "fim") end = ev;
+      }
+    }
+    if (!end) return;
+    const msg = end.bloqueado ? `O serviço parou de responder: ${end.bloqueado}. Não tentei de novo; o que já tinha achado foi gravado.` : `${end.ok} achado${end.ok === 1 ? "" : "s"}${end.falhas.length ? `, ${end.falhas.length} sem resultado` : ""}.`;
+    if (end.falhas.length || end.bloqueado) {
+      const d = dialog(`<h3>Coordenadas pelo endereço</h3><p>${esc(msg)}</p>${end.falhas.length ? `<p>Sem resultado (corrija o endereço e tente de novo):</p><ul class="md-list">${end.falhas.slice(0, 50).map((f) => `<li>linha ${f.linha}: ${esc(f.endereco)}</li>`).join("")}</ul>` : ""}<div class="md-row"><button type="button" class="btn btn-primary" data-ok>Fechar</button></div>`);
+      d.querySelector("[data-ok]").onclick = () => d.close();
+    } else ctx.toast(msg, 5000);
+    if (end.path !== t.path) ctx.toast(`Gravei as coordenadas em ${end.path} (o xlsx não se edita aqui).`, 6000);
+    reload(end.path);
+  }
+
+  // botões na cabeça da planilha aberta (explorer.js chama ao mostrar uma planilha)
+  function sheetTools(view, { t, rows, grid, api, ctx, reload }) {
+    const g = guess(rows);
+    current = { path: t.path, grid, g };
+    if (g.lat < 0 && g.coord < 0 && g.addr < 0) return;
+    const head = view.querySelector(".dv-head");
+    const bar = document.createElement("span");
+    bar.className = "md-tools";
+    const canMap = (g.lat >= 0 && g.lon >= 0) || g.coord >= 0;
+    bar.innerHTML = `${canMap ? `<button type="button" class="btn btn-small" data-to-map title="Cria um slide de mapa com os pontos desta planilha"><i class="ic" data-ic="map-pin"></i> Pôr no mapa</button>` : ""}${g.addr >= 0 && g.withPos < g.total ? `<button type="button" class="btn btn-small" data-geocode title="Preenche latitude e longitude pelo endereço"><i class="ic" data-ic="search"></i> Achar coordenadas</button>` : ""}<span class="md-status f-label"></span>`;
+    head.append(bar);
+    ctx.hydrate?.(bar);
+    const status = bar.querySelector(".md-status");
+    bar.querySelector("[data-to-map]")?.addEventListener("click", async () => {
+      const name = t.name.replace(/\.[a-z0-9]+$/i, "");
+      // o mapa lê CSV: uma planilha .xlsx ganha um CSV ao lado (o original fica como está)
+      let points = t.path;
+      if (!/\.(csv|tsv)$/i.test(t.path)) {
+        points = t.path.replace(/\.[^.]+$/, "") + ".csv";
+        try { await api("api/project/sheet-write", { path: points, rows }); } catch (e) { ctx.toast(`Não consegui gravar ${points}: ${e.message}`, 6000); return; }
+      }
+      const layer = { name, points, ...(g.color >= 0 ? { color: g.head[g.color] } : {}), ...(g.label >= 0 ? { label: g.head[g.label] } : {}) };
+      ctx.insertSlide({ layout: "map", title: name, layers: [layer] });
+      ctx.toast(points === t.path ? "Mapa inserido depois do slide atual, ligado à planilha (mudou a planilha, o mapa acompanha)." : `Mapa inserido, ligado a ${points} (o mapa lê CSV; gravei a cópia ao lado da planilha).`, 6000);
+    });
+    const geoBtn = bar.querySelector("[data-geocode]");
+    geoBtn?.addEventListener("click", async () => {
+      geoBtn.disabled = true;
+      try { await geocode(t, g, { api, ctx, status, reload }); } finally { geoBtn.disabled = false; }
+    });
+  }
+
+  // seleção ligada: ponto clicado no mapa -> linha da planilha aberta (se for a mesma planilha)
+  let current = null;
+  document.addEventListener("sagamap:ponto", (e) => {
+    const { path, linha } = e.detail || {};
+    if (!current || !linha || path !== current.path) return;
+    current.grid?.select(linha - 1, 0);
+  });
+  // linha selecionada na planilha -> cartão do ponto no mapa da prévia
+  const selectRow = (path, linha) => document.dispatchEvent(new CustomEvent("sagamap:linha", { detail: { path, linha } }));
+
+  // botão "Editar no mapa" na prévia grande; o editor (map-editor.js) só carrega no primeiro clique
+  let editorLoad;
+  const loadEditor = () => (window.SagaMapEditor ? Promise.resolve() : (editorLoad ||= new Promise((res, rej) => {
+    const s = document.createElement("script"); s.src = "map-editor.js"; s.onload = res;
+    s.onerror = () => { editorLoad = null; s.remove(); rej(new Error("Não foi possível carregar o editor do mapa.")); };
+    document.head.append(s);
+  })));
+  function attach(container, slide, commit, ctx) {
+    const E = window.SagaMapEditor;
+    if (slide?.layout !== "map") { if (E?.active()) E.stop(); document.querySelectorAll("#canvas-viewport > .me-open").forEach((b) => b.remove()); return; }
+    const box = container.querySelector(".map-box");
+    if (!box) return;
+    // o botão e a barra ficam fora do slide escalado (a prévia do Studio fica a ~40%): no #canvas-viewport
+    const host = document.getElementById("canvas-viewport") || box;
+    host.querySelectorAll(":scope > .me-open").forEach((b) => b.remove());
+    const btn = document.createElement("button");
+    btn.type = "button"; btn.className = "me-open"; btn.innerHTML = '<i class="ic" data-ic="pencil"></i> Editar no mapa';
+    for (const ev of ["pointerdown", "mousedown", "click", "dblclick"]) btn.addEventListener(ev, (e) => e.stopPropagation());
+    btn.onclick = async () => {
+      try { await loadEditor(); btn.hidden = true; window.SagaMapEditor.start(box, slide, commit, ctx); }
+      catch (e) { ctx.toast(e.message, 5000); }
+    };
+    host.append(btn);
+    ctx.hydrate?.(btn);
+    // o slide redesenhou com o editor aberto (gravou algo): volta no mesmo modo
+    if (E?.active()) { if (E.key() === (slide.uid || slide.title)) { btn.hidden = true; E.resume(box, slide, commit, ctx); } else E.stop(); }
+  }
+  const editorStopped = () => { const b = document.querySelector("#canvas-viewport > .me-open"); if (b) b.hidden = false; };
+
+  return { guess, sheetTools, selectRow, attach, editorStopped };
+})();