sagadeck 1.2.0

package/src/studio/demo-decks.js

@@ -0,0 +1,98 @@
+import { portalDemo } from '../portal-scene.js';
+// Modelos de fábrica são código; as apresentações criadas ficam somente na biblioteca.
+import { COLLECTION_NAMES, COLLECTION_ASSETS, collectionDeck } from './template-collections.js';
+import { LAYOUT_SAMPLES } from './layout-samples.js';
+import { explorationDemo } from './exploration-demo.js';
+export function demoAssets(kind) { return kind === 'lavanda' || kind === 'novidades' ? ['lavanda-cover.jpg'] : COLLECTION_ASSETS[kind] || []; }
+// arquivos do projeto que o modelo traz (fora de imagens/): a planilha e as anotações da demo de novidades
+export function demoProjectFiles(kind) { return kind === 'novidades' ? ['contexto/vendas.csv', 'contexto/leia-me.md'] : []; }
+const item=(title,text,extra={})=>({title,text,...extra});
+const route='flowchart LR\n  A([Pedido]):::hi --> B{Dados válidos?}\n  B -->|sim| C[Executar tarefa]\n  B -.->|não| D[Informar erro]:::vazado\n  C ==> E[Guardar resultado]:::em';
+export const DEMO_NAMES={cinematica:"Demo — mundos que se transformam",explorar:'Demo — explore uma ideia',lavanda:'Estúdio lavanda',executivo:'Relatório executivo',workshop:'Workshop visual',compacto:'Demo — material de consulta',avancado:'Demo — recursos avançados',diagramas:'Demo — diagramas vivos',novidades:'Demo — novidades',hidraulica:'Aula de hidráulica',algoritmos:'Aula de algoritmos',...COLLECTION_NAMES};
+export function demoDeck(kind) {
+  if(kind==='cinematica')return portalDemo();
+  if(kind==='explorar')return explorationDemo();
+  if(Object.hasOwn(COLLECTION_NAMES,kind))return collectionDeck(kind);
+  if(!DEMO_NAMES[kind])throw Error('Modelo não encontrado.');
+  // cada demo com a sua cara (tema, tom e figura da capa): na vitrine, as capas não podem parecer a mesma
+  const LOOK={lavanda:['bauhaus','lavanda'],executivo:['prata','corporativo'],workshop:['sinal','lavanda'],compacto:['manual'],avancado:['terminal'],diagramas:['oceano'],novidades:['pop'],hidraulica:['oceano'],algoritmos:['noite']};
+  const [theme,palette]=LOOK[kind]||['editorial','lavanda'];
+  const common={title:DEMO_NAMES[kind],theme,...(palette?{palette}:{}),duration:15,maxWords:140};
+  const COVER_FIG={compacto:{icon:'book-open',size:300},avancado:{icon:'terminal',size:300},diagramas:{icon:'workflow',size:320},novidades:{icon:'sparkles',size:320},hidraulica:{icon:'waves',size:340},algoritmos:{icon:'chart-bar',size:320}};
+  const cover={layout:'cover',title:DEMO_NAMES[kind],subtitle:'Um modelo para adaptar ao seu conteúdo',kicker:'SAGADECK · MODELOS',tone:{compacto:'light',diagramas:'accent',novidades:'light',hidraulica:'light'}[kind]||'dark',...(COVER_FIG[kind]?{figure:COVER_FIG[kind]}:{})};
+  const end={layout:'end',title:'O próximo passo\ncomeça aqui.',subtitle:'Duplique este modelo na biblioteca e adapte os textos.'};
+  const items=[item('Descobrir','Comece pela pergunta certa.',{icon:'search'}),item('Experimentar','Teste uma hipótese com dados.',{icon:'flask-conical'}),item('Construir','Transforme o aprendizado em produto.',{icon:'blocks'}),item('Observar','Acompanhe o uso e os resultados.',{icon:'chart-column'}),item('Evoluir','Use o que aprendeu para melhorar.',{icon:'sparkles'})];
+  let slides;
+  if(kind==='lavanda')slides=[cover,{layout:'mosaic',title:'Cinco ideias, uma composição.',items},{layout:'ribbon',title:'Um caminho em três momentos.',items:items.slice(0,3),tone:'accent'},{layout:'quote',quote:'Uma boa apresentação deixa a ideia respirar.',by:'Princípio deste modelo',tone:'dark'},{layout:'mosaic',title:'A grade cresce com o conteúdo.',items:[...items,...items.slice(0,3)].map((x,i)=>({...x,title:`${i+1}. ${x.title}`}))},end];
+  if(kind==='executivo')slides=[{...cover,subtitle:'Decisões claras, números contextualizados.'},{layout:'mosaic',title:'O que precisa de uma decisão.',items:[item('Prioridade','Melhorar o atendimento nos canais digitais.',{value:'01'}),item('Investimento','Validar o piloto antes de expandir.',{value:'02'}),item('Próximo marco','Apresentar resultados em quatro semanas.',{value:'03'})]},{layout:'stats',title:'O piloto em números',stats:[{value:'24',label:'participantes'},{value:'4',label:'semanas'},{value:'3',label:'hipóteses'}],source:'Dados fictícios para demonstrar o modelo.'},{layout:'ribbon',title:'Plano de trabalho',items:items.slice(0,4)},{layout:'compare',title:'A decisão em perspectiva',left:{title:'Continuar como está',text:'Sem custo de mudança; os problemas atuais permanecem.'},right:{title:'Testar em pequena escala',text:'Aprendizado limitado, com critérios de sucesso definidos.',hl:true}},end];
+  if(kind==='workshop')slides=[{...cover,subtitle:'Aprender, experimentar, explicar.'},{layout:'question',question:'O que acontece depois do pedido?',options:['A resposta vem na hora','Recebemos um identificador','Depende do modo'],hint:'Escolha antes de avançar.'},{layout:'diagram',title:'Do pedido ao resultado',mermaid:route},{layout:'codewalk',title:'Uma chamada, três observações',language:'javascript',code:'const response = await fetch(url);\nif (!response.ok) throw new Error(response.status);\nconst dados = await response.json();\nconsole.log(dados);',steps:[{title:'Pedido',text:'A execução aguarda a resposta HTTP.',highlight:[1]},{title:'Validação',text:'Um erro HTTP interrompe o fluxo.',highlight:[2]},{title:'Resultado',text:'O JSON vira um objeto.',highlight:[3,4]}]},{layout:'dossier',title:'Para consultar depois',items:[item('URL','Identifica o recurso. Evite colocar segredos no endereço.'),item('Status','Indica o resultado HTTP. Um 200 não substitui validar o conteúdo.'),item('Corpo','Carrega os dados do pedido ou da resposta.'),item('Timeout','Limita quanto tempo a aplicação espera.')]},end];
+  if(kind==='compacto') {
+    const code=['import time','import requests','','def acompanhar(base, pedido, timeout=60):','    inicio = requests.post(','        f"{base}/tarefas", json=pedido, timeout=10','    )','    inicio.raise_for_status()','    tarefa = inicio.json()["id"]','    limite = time.monotonic() + timeout','','    while time.monotonic() < limite:','        resposta = requests.get(','            f"{base}/tarefas/{tarefa}", timeout=10','        )','        resposta.raise_for_status()','        dados = resposta.json()','        status = dados["status"]','','        if status == "finished":','            return dados["resultado"]','        if status == "failed":','            raise RuntimeError(dados["erro"])','','        time.sleep(1)','','    raise TimeoutError("A tarefa não terminou")'].join('\n');
+    slides=[{...cover,subtitle:'Código, payloads e instruções no mesmo material.'},{layout:'code',title:'No palco: explique a ideia.',language:'python',code:'resposta = iniciar(pedido)\nid = resposta["id"]\n\nwhile not terminou(id):\n    esperar(1)\n\nmostrar(resultado(id))',notes:'Versão conceitual para explicar ao público; não é código executável.'},{layout:'code',title:'Na consulta: o exemplo completo.',density:'dense',language:'python',code,source:'API fictícia. Ajuste as rotas e instale requests. 27 linhas sem ocultar o final.'},{layout:'dossier',title:'Como ler a resposta',items:[item('Identificador','Guarde o id devolvido ao iniciar. Ele é usado nas consultas seguintes.',{code:'{"id":"tarefa-42","status":"started"}'}),item('Enquanto executa','Consulte com um intervalo definido e limite total de espera.',{code:'{"id":"tarefa-42","status":"running"}'}),item('Ao finalizar','Valide o status antes de ler o resultado de cada etapa.',{code:'{"status":"finished",\n "resultado":[\n  {"etapa":"ocr","paginas":12},\n  {"etapa":"resumo","texto":"…"}\n ]}'}),item('Se falhar','Trate falha, timeout e resposta inválida separadamente. Não repita operações não idempotentes sem critério.',{code:'{"status":"failed",\n "erro":"arquivo ilegível"}'})]},{layout:'mosaic',title:'Oito detalhes em uma página.',items:['URL','Método','Headers','Corpo','Status','Timeout','Polling','Resposta'].map(title=>item(title,'Confira este campo na documentação do serviço antes de executar.')),source:'Demonstração de grade automática; edite, insira ou exclua um item.'},end];
+  }
+  if(kind==='diagramas')slides=[{...cover,subtitle:'Edite o código Mermaid no painel e veja o desenho mudar.'},{layout:'diagram',title:'Fluxo com decisão',mermaid:route,caption:'Abra Formatar → Código Mermaid. Troque um rótulo ou acrescente uma etapa.'},{layout:'diagram',title:'Uma conversa entre serviços',mermaid:'sequenceDiagram\n  participant App\n  participant API\n  participant Worker\n  App->>API: Iniciar tarefa\n  API->>Worker: Processar\n  API-->>App: id da tarefa\n  loop Até finalizar\n    App->>API: Consultar id\n    API-->>App: status\n  end\n  Worker-->>API: Resultado'},{layout:'diagram',title:'Estados de uma execução',mermaid:'stateDiagram-v2\n  [*] --> Criada\n  Criada --> Executando\n  Executando --> Finalizada\n  Executando --> Falhou\n  Falhou --> NovaTentativa\n  NovaTentativa --> Executando\n  Finalizada --> [*]'},{layout:'diagram',title:'O que entra no produto?',mermaid:'mindmap\n  root((Produto))\n    Pessoas\n      Necessidades\n      Experiência\n    Tecnologia\n      Serviços\n      Dados\n    Operação\n      Métricas\n      Melhoria'},end];
+  if(kind==='avancado')slides=[
+    {...cover,subtitle:'Quando a apresentação também precisa servir de consulta.'},
+    {layout:'code',title:'Exemplo completo: acompanhar uma tarefa',density:'dense',language:'python',code:'import time\n\nimport requests\n\ndef acompanhar(base, tarefa, timeout=60):\n    limite = time.monotonic() + timeout\n    while time.monotonic() < limite:\n        resposta = requests.get(\n            f"{base}/tarefas/{tarefa}",\n            timeout=10,\n        )\n        resposta.raise_for_status()\n        dados = resposta.json()\n        status = dados["status"]\n\n        if status == "finished":\n            return dados["resultado"]\n\n        if status == "failed":\n            raise RuntimeError(dados["erro"])\n\n        time.sleep(1)\n\n    raise TimeoutError("A tarefa não terminou")',source:'Exemplo demonstrativo completo. As linhas numeradas acompanham o código até o final.'},
+    {layout:'dossier',title:'Dados para acompanhar a tarefa',items:[item('Identificador','Guarde o id devolvido ao iniciar o processamento.',{code:'{"id":"tarefa-42","status":"started"}'}),item('Enquanto executa','Consulte o estado em intervalos definidos e com timeout.',{code:'{"id":"tarefa-42","status":"running"}'}),item('Resultado','Leia o conteúdo somente depois de confirmar o estado final.',{code:'{"status":"finished","resultado":{"paginas":12}}'}),item('Falha','Exiba a causa sem repetir operações não idempotentes.',{code:'{"status":"failed","erro":"arquivo ilegível"}'})]},
+    {layout:'mosaic',title:'Oito campos para revisar',items:['URL','Método','Headers','Corpo','Status','Timeout','Polling','Resposta'].map((title)=>item(title,'Confira este campo na documentação antes de executar.'))},
+    {layout:'statement',kicker:'AVISO · SEGURANÇA',text:'Não coloque tokens no código ou na apresentação.',add:{aviso:{tipo:'perigo',titulo:'Segredo exposto',texto:'Use Ambientes para guardar chaves na sua máquina. Elas não devem entrar no YAML do deck.'}}},
+    end,
+  ];
+  // um slide de cada recurso novo; a pasta do projeto já traz contexto/vendas.csv (aba Arquivos › planilha)
+  if(kind==='novidades'){
+    const vendas={labels:['jan','fev','mar','abr','mai','jun'],series:[{name:'Norte',values:[10.5,12,15,17,16,19]},{name:'Sul',values:[7,9,8,11,13,14]}]};
+    slides=[
+      {...cover,subtitle:'Carrossel, gráficos do Excel, fórmulas vivas, dinâmicas a dois e a pasta do projeto.',kicker:'SAGADECK · NOVIDADES'},
+      {layout:'dossier',title:'Onde está cada novidade',items:[
+        item('Pasta do projeto','Aba Arquivos, à esquerda: a pasta da apresentação, com contexto/ para anexos, prints e planilhas.',{icon:'folder-tree'}),
+        item('Planilha → gráfico','Abra contexto/vendas.csv: o Studio lê os tipos das colunas e sugere gráficos, com ou sem IA.',{icon:'table'}),
+        item('Colar do Excel','No gráfico de dados, Formatar › Dados: Ctrl+V de uma tabela preenche a planilha.',{icon:'clipboard-paste'}),
+        item('Fórmulas vivas','Fórmulas e funções: escreva a fórmula; cada letra vira um controle deslizante.',{icon:'sigma'}),
+        item('Dinâmicas a dois','Duelo de commits, dois terminais e turnos: um quadro por clique.',{icon:'users'}),
+        item('Carrossel e zoom','Carrossel em roda ou em anéis; o Foco guiado aproxima devagar de cada detalhe.',{icon:'sparkles'})]},
+      {...LAYOUT_SAMPLES.carousel,title:'Carrossel em roda'},
+      {...LAYOUT_SAMPLES.carousel,title:'Carrossel em anéis',style:'rings'},
+      {layout:'chart',title:'Vendas por região, direto da planilha',chart:{chart:'line',csv:'contexto/vendas.csv',...vendas,xLabel:'Mês',yLabel:'R$ milhões'},side:'Este gráfico lê **contexto/vendas.csv**. Mude um número lá (aba Arquivos) e ele acompanha.'},
+      {layout:'chart',title:'Colado do Excel: colunas agrupadas',chart:{chart:'column',...vendas,xLabel:'Mês'},side:'No Formatar, a planilha do gráfico aceita **Ctrl+V** de uma tabela do Excel: a primeira linha vira o nome das séries.'},
+      {...LAYOUT_SAMPLES.science},
+      {layout:'science',title:'Queda livre: medida × teoria',plot:{functions:[{fn:'h0 - g*x^2/2',name:'teoria'}],x:[0,2],params:{h0:{value:20,min:5,max:40,label:'altura'},g:{value:9.8,min:1,max:25,label:'gravidade'}},points:'t\tmedido\n0\t20\n0,5\t18,9\n1\t15,2\n1,5\t8,8\n1,9\t2,1',pointsName:'medido'}},
+      {...LAYOUT_SAMPLES.duel},
+      {...LAYOUT_SAMPLES.terminals,turns:[...LAYOUT_SAMPLES.terminals.turns]},
+      {...LAYOUT_SAMPLES.turns},
+      {layout:'spotlight',title:'Foco guiado com zoom lento',image:'imagens/lavanda-cover.jpg',zoom:true,hotspots:[{title:'A imagem inteira',text:'O primeiro passo mostra tudo.',x:0,y:0,width:100,height:100,zoom:false},{title:'Um detalhe',text:'A imagem aproxima devagar do ponto da vez.',x:30,y:25,width:30,height:35},{title:'Outro detalhe',text:'Cada foco pode ter o seu zoom.',x:60,y:55,width:25,height:30,zoom:2.4}]},
+      end,
+    ];
+  }
+  // aula de engenharia: equações, curva que se mexe, calculadora ao vivo, exercício resolvido passo a passo
+  if(kind==='hidraulica')slides=[
+    {...cover,kicker:'HIDRÁULICA · AULA 3',title:'Escoamento em tubos:\ndo laminar ao turbulento',subtitle:'Navier–Stokes, número de Reynolds e perda de carga, com contas e um exercício resolvido.'},
+    {layout:'dossier',title:'Três ideias para hoje',items:[item('Viscosidade','A resistência do fluido a escoar. Água a 20 °C: ν ≈ 1,0 × 10⁻⁶ m²/s.',{icon:'droplet'}),item('Número de Reynolds','Compara a inércia com a viscosidade: Re = VD/ν. Abaixo de ~2300 o escoamento é laminar.',{icon:'waves'}),item('Perda de carga','A energia que o atrito com a parede consome: h_f = f (L/D) V²/2g.',{icon:'trending-down'})]},
+    {layout:'science',title:'As equações de Navier–Stokes (incompressível)',equations:[{label:'Continuidade: o que entra sai',latex:'\\nabla \\cdot \\mathbf{u} = 0'},{label:'Quantidade de movimento',latex:'\\rho\\left(\\frac{\\partial \\mathbf{u}}{\\partial t} + \\mathbf{u}\\cdot\\nabla\\mathbf{u}\\right) = -\\nabla p + \\mu \\nabla^2 \\mathbf{u} + \\rho \\mathbf{g}'},{label:'Inércia ÷ viscosidade',latex:'Re = \\frac{\\rho V D}{\\mu} = \\frac{V D}{\\nu}'}],plot:false},
+    {layout:'science',title:'Laminar: o perfil de velocidade é uma parábola',equations:[{label:'Hagen–Poiseuille',latex:'u(r) = u_{max}\\left(1 - \\frac{r^2}{R^2}\\right)'},{label:'Velocidade média',latex:'V = \\frac{u_{max}}{2}'}],plot:{functions:[{fn:'umax*(1 - (x/R)^2)',name:'u(r)'}],x:[-0.05,0.05],params:{umax:{value:2,min:0.5,max:4,label:'u máx (m/s)'},R:{value:0.05,min:0.01,max:0.05,step:0.005,label:'raio (m)'}}}},
+    {layout:'calc',title:'Qual é o regime? Mexa na velocidade e no diâmetro',inputs:{V:{label:'Velocidade',latex:'V',value:1.5,min:0.01,max:4,step:0.01,unit:'m/s'},D:{label:'Diâmetro',latex:'D',value:0.05,min:0.005,max:0.3,step:0.005,unit:'m'},nu:{label:'Viscosidade cinemática (água, 20 °C)',latex:'\\nu = 1{,}004\\times10^{-6}\\ \\mathrm{m^2/s}',value:0.000001004,fixed:true},eps:{label:'Rugosidade (PVC)',latex:'\\varepsilon = 0{,}05\\ \\mathrm{mm}',value:0.00005,fixed:true}},
+      outputs:[{name:'Re',label:'Número de Reynolds',latex:'Re = \\frac{VD}{\\nu}',fn:'V*D/nu',decimals:0},{name:'regime',label:'Regime',of:'Re',cases:[{below:2300,text:'Laminar',color:'s3'},{below:4000,text:'Transição',color:'em'},{text:'Turbulento',color:'hi'}],scale:{min:100,max:1000000,log:true}},{name:'f',label:'Fator de atrito',latex:'f = \\frac{64}{Re}\\ \\text{ou Swamee–Jain}',of:'Re',cases:[{below:2300,fn:'64/Re'},{fn:'0.25/(log10(eps/(3.7*D) + 5.74/Re^0.9))^2'}],decimals:4}],note:'Abaixo de 2300 vale f = 64/Re; acima de 4000, Swamee–Jain (explícita, no lugar de Colebrook).'},
+    {layout:'solution',title:'Exercício: perda de carga num tubo de PVC',problem:'Água a 20 °C escoa a 1,5 m/s num tubo de PVC de 50 mm. Qual é o regime e quanto de carga se perde em 100 m?',givens:[{symbol:'V',value:'1,5',unit:'m/s',label:'velocidade'},{symbol:'D',value:'0,05',unit:'m',label:'diâmetro'},{symbol:'L',value:'100',unit:'m',label:'comprimento'},{latex:'\\nu = 1{,}004\\times10^{-6}\\ \\mathrm{m^2/s}',label:'viscosidade'},{latex:'\\varepsilon = 0{,}05\\ \\mathrm{mm}',label:'rugosidade'}],find:'Re,\\ f,\\ h_f',
+      steps:[{text:'Reynolds decide o regime',latex:'Re = \\frac{VD}{\\nu} = \\frac{1{,}5 \\cdot 0{,}05}{1{,}004\\times10^{-6}} \\approx 74\\,700'},{text:'Re > 4000: turbulento. A rugosidade relativa entra na conta',latex:'\\varepsilon/D = \\frac{0{,}05}{50} = 0{,}001'},{text:'Fator de atrito (Swamee–Jain)',latex:'f = \\frac{0{,}25}{\\left[\\log\\left(\\frac{\\varepsilon}{3{,}7D} + \\frac{5{,}74}{Re^{0{,}9}}\\right)\\right]^2} \\approx 0{,}0230'},{text:'Darcy–Weisbach',latex:'h_f = f\\,\\frac{L}{D}\\,\\frac{V^2}{2g} = 0{,}0230 \\cdot \\frac{100}{0{,}05} \\cdot \\frac{1{,}5^2}{2 \\cdot 9{,}81}'}],
+      answer:{latex:'h_f \\approx 5{,}3\\ \\mathrm{m}',text:'Turbulento; perde cerca de 5,3 m de coluna d’água em 100 m.'}},
+    {layout:'science',title:'Diagrama de Moody (versão explícita)',equations:[{label:'Laminar',latex:'f = 64/Re'},{label:'Turbulento (Swamee–Jain)',latex:'f = 0{,}25\\,/\\,[\\log(\\varepsilon/3{,}7D + 5{,}74/Re^{0{,}9})]^2'}],plot:{functions:[{fn:'64/x',name:'laminar: 64/Re'},{fn:'0.25/(log10(r/3.7 + 5.74/x^0.9))^2',name:'turbulento'}],x:[600,10000000],xlog:true,ylog:true,params:{r:{value:0.001,min:0.00001,max:0.05,step:0.00001,label:'ε/D'}},layout:{xaxis:{title:{text:'Re'}},yaxis:{title:{text:'f'}}}}},
+    {layout:'compare',title:'Laminar × turbulento',left:{label:'Laminar',title:'Camadas que deslizam',text:'Re < 2300: perfil parabólico; o atrito depende só de Re.',items:['f = 64/Re','perda ∝ V']},right:{label:'Turbulento',title:'Redemoinhos que misturam',text:'Re > 4000: perfil achatado; a rugosidade da parede pesa.',items:['f por Colebrook / Moody','perda ∝ V² (aprox.)'],hl:true}},
+    {layout:'question',question:'Água a 0,5 m/s num tubo de 4 mm: qual é o regime?',options:['Laminar','Transição','Turbulento'],hint:'Re = VD/ν ≈ 2000.'},
+    end,
+  ];
+  // aula de computação: o algoritmo rodando de verdade (barras, código e contadores) e a complexidade
+  if(kind==='algoritmos')slides=[
+    {...cover,kicker:'ALGORITMOS · AULA 5',title:'Ordenar e buscar:\nvendo o algoritmo pensar',subtitle:'Cada clique é um passo. O botão Tocar anda sozinho.'},
+    {layout:'algo',title:'Bubble sort: o maior sobe como bolha',algorithm:'bubble',array:[5,1,4,2,8,3]},
+    {layout:'algo',title:'Insertion sort: como organizar cartas na mão',algorithm:'insertion',array:[5,1,4,2,8,3]},
+    {layout:'algo',title:'Quicksort: escolhe um pivô e divide',algorithm:'quick',array:[7,2,9,4,3,8,1,6]},
+    {layout:'science',title:'Por que isso importa: n² × n log n',equations:[{label:'Bubble, insertion, selection',latex:'O(n^2)'},{label:'Merge sort, quicksort (médio)',latex:'O(n \\log n)'}],plot:{functions:[{fn:'x^2',name:'n²'},{fn:'x*log2(x)',name:'n log n'}],x:[1,64],layout:{xaxis:{title:{text:'n (tamanho do vetor)'}},yaxis:{title:{text:'operações'}}}}},
+    {layout:'algo',title:'Busca linear: olha um por um',algorithm:'linear',array:[2,5,8,12,16,23,38,56,72,91],target:23},
+    {layout:'algo',title:'Busca binária: descarta metade a cada passo',algorithm:'binary',array:[2,5,8,12,16,23,38,56,72,91],target:23},
+    {layout:'question',question:'Numa lista ordenada de 1 milhão de nomes, quantas comparações a busca binária faz no pior caso?',options:['Cerca de 20','Cerca de 1.000','Cerca de 500.000'],hint:'log₂(1.000.000) ≈ 20.'},
+    {layout:'codewalk',title:'A busca binária em Python',language:'python',code:'def busca_binaria(v, alvo):\n    ini, fim = 0, len(v) - 1\n    while ini <= fim:\n        meio = (ini + fim) // 2\n        if v[meio] == alvo:\n            return meio\n        if v[meio] < alvo:\n            ini = meio + 1\n        else:\n            fim = meio - 1\n    return -1',steps:[{title:'Os limites',text:'ini e fim marcam a faixa onde o alvo ainda pode estar.',highlight:[2]},{title:'O meio',text:'Divisão inteira: // descarta a parte fracionária.',highlight:[4]},{title:'Metade fora',text:'Cada volta descarta metade da faixa.',highlight:[7,8,9,10]},{title:'Não achou',text:'A faixa ficou vazia: devolve -1.',highlight:[11]}]},
+    end,
+  ];
+  if(kind==='lavanda')slides[0]={...cover,tone:'light',title:'Ideias que\nganham forma.',subtitle:'Estúdio lavanda · um modelo para explorar',figure:{image:'imagens/lavanda-cover.jpg',fit:'cover',radius:100}};
+  return {...common,slides};
+}

package/src/studio/direction-routes.js

@@ -0,0 +1,29 @@
+// Rotas das direções aprovadas (~/.sagadeck/direcoes.json; ver src/ai/directions.js).
+// GET lista; POST {name} fotografa a capa atual como receita reutilizável. Só no Studio local.
+import { loadDirections, saveDirection } from "../ai/directions.js";
+
+export async function directionRoutes({ req, res, pathname, W, readJSON, apiBlocked }) {
+  const send = (status, data) => { res.writeHead(status, { "Content-Type": "application/json" }); res.end(JSON.stringify(data)); };
+  if (pathname === "/api/directions" && req.method === "GET") {
+    const d = loadDirections();
+    send(200, { file: d.file, exists: d.exists, error: d.error, directions: Object.values(d.directions) });
+    return true;
+  }
+  if (pathname === "/api/directions" && req.method === "POST") {
+    const blocked = apiBlocked(req);
+    if (blocked) { send(blocked.code, { error: "Salvar direções só no Studio desta máquina." }); return true; }
+    if (!W?.spec) { send(400, { error: "Abra uma apresentação primeiro." }); return true; }
+    const body = await readJSON(req);
+    const cover = (W.spec.slides || []).find((s) => s && s.layout === "cover") || (W.spec.slides || [])[0] || {};
+    try {
+      const name = saveDirection(body.name, {
+        theme: W.spec.theme || null, palette: W.spec.palette || null,
+        tone: cover.tone || null, ambient: cover.ambient || null, transition: cover.transition || null,
+        notes: `capa "${String(cover.title || "").slice(0, 80)}"`,
+      });
+      send(200, { name });
+    } catch (e) { send(400, { error: e.message }); }
+    return true;
+  }
+  return false;
+}

package/src/studio/errors.js

@@ -0,0 +1,65 @@
+import crypto from 'node:crypto';
+
+const remembered=new WeakMap();
+const messages={
+  AI_TOKEN_LIMIT:'A IA atingiu o limite de tamanho da resposta. Tente um pedido menor; pode ser necessário ampliar o limite do modelo.',
+  AI_INVALID_OUTPUT:'A IA devolveu conteúdo inválido e não conseguiu corrigi-lo automaticamente. Tente novamente com um pedido mais específico.',
+  AI_PROVIDER_INTERRUPTED:'O provedor interrompeu a resposta da IA. As tentativas automáticas não resolveram; tente novamente em alguns instantes.',
+  TIMEOUT:'O serviço demorou além do tempo permitido. Tente novamente; o limite de espera pode precisar de ajuste.',
+  RATE_LIMIT:'O provedor limitou temporariamente os pedidos. Aguarde um pouco antes de tentar novamente.',
+  NO_CREDIT:'O provedor informou falta de créditos. O responsável pelo SagaDeck precisa verificar a conta.',
+  ACCESS_DENIED:'O serviço recusou o acesso. Sua sessão ou a configuração de acesso precisa ser verificada.',
+  SERVICE_UNAVAILABLE:'O serviço está indisponível ou falhou ao responder. Tente novamente em alguns instantes.',
+  CONNECTION_FAILED:'Não foi possível conectar ao serviço. Verifique a conexão e tente novamente.',
+  FILE_NOT_FOUND:'Um arquivo necessário não foi encontrado. Reabra a apresentação ou envie o arquivo novamente.',
+  STORAGE_FULL:'Não há espaço disponível para salvar o arquivo. O responsável precisa liberar espaço.',
+  FILE_PERMISSION:'O serviço não tem permissão para acessar ou salvar o arquivo.',
+  APP_UNKNOWN:'Não foi possível concluir a operação. A causa não foi determinada.',
+};
+
+export function errorDiagnostic(error,{status}={}) {
+  const e=error instanceof Error?error:new Error(String(error));
+  if(remembered.has(e))return remembered.get(e);
+  const causes=[];for(let c=e;c&&causes.length<8;c=c.cause)causes.push(c);
+  if(e.aborted||causes.some(c=>c.name==='AbortError'))return {error:'Operação interrompida.',diagnostic:{code:'CANCELLED'}};
+  const http=e.status||status;
+  let code=messages[e.code]?e.code:null;
+  if(!code)code=causes.some(c=>c.name==='TimeoutError'||['ETIMEDOUT','UND_ERR_HEADERS_TIMEOUT','UND_ERR_BODY_TIMEOUT'].includes(c.code))?'TIMEOUT'
+    :http===429?'RATE_LIMIT':http===402?'NO_CREDIT':[401,403].includes(http)?'ACCESS_DENIED'
+    :causes.some(c=>c.code==='ENOENT')?'FILE_NOT_FOUND':causes.some(c=>c.code==='ENOSPC')?'STORAGE_FULL'
+    :causes.some(c=>['EACCES','EPERM'].includes(c.code))?'FILE_PERMISSION'
+    :causes.some(c=>['ECONNREFUSED','ENOTFOUND','ECONNRESET','EAI_AGAIN'].includes(c.code))?'CONNECTION_FAILED'
+    :http===503||http===502||(e.name==='LLMError'&&http>=500)?'SERVICE_UNAVAILABLE':http===400?'INVALID_INPUT':http===404?'NOT_FOUND':'APP_UNKNOWN';
+  const id=crypto.randomUUID().slice(0,8);
+  const summary=code==='INVALID_INPUT'||code==='NOT_FOUND'||http===409?e.message:messages[code];
+  const result={error:`${summary} Código: ${code} · ${id}. Se persistir, contate o responsável pelo SagaDeck e informe esse código.`,diagnostic:{code,id}};
+  remembered.set(e,result);
+  // Sem chaves, prompts, documentos ou resposta bruta do provedor no diagnóstico.
+  console.error(`[SagaDeck ${id}] ${code}`,JSON.stringify({status:http,name:e.name,causeCode:e.cause?.code}));
+  return result;
+}
+
+export function installErrorResponses(res) {
+  let contentType='';
+  const writeHead=res.writeHead.bind(res);
+  res.writeHead=(status,...args)=>{
+    const headers=typeof args[0]==='string'?args[1]:args[0];
+    if(headers&&!Array.isArray(headers))contentType=String(Object.entries(headers).find(([key])=>key.toLowerCase()==='content-type')?.[1]||contentType);
+    return writeHead(status,...args);
+  };
+  const end=res.end.bind(res);
+  res.end=(data,...args)=>{
+    if(typeof data==='string'&&String(res.getHeader('Content-Type')||contentType).includes('application/json')) {
+      try {
+        const payload=JSON.parse(data);
+        if(payload?.error&&!payload.diagnostic&&!payload.kind) data=JSON.stringify({...payload,...errorDiagnostic(payload.error,{status:res.statusCode})});
+      } catch { /* respostas que não são JSON mantêm seu formato */ }
+    }
+    return end(data,...args);
+  };
+}
+
+export function chatErrorResult(error,spec,targetSlide) {
+  const diagnostic=errorDiagnostic(error);
+  return {reply:`A IA falhou e não mudei nada: ${diagnostic.error}`,diagnostic:diagnostic.diagnostic,spec,actions:[],targetSlide,mode:'error'};
+}

package/src/studio/exploration-demo.js

@@ -0,0 +1,17 @@
+// Um modelo geral, sem dados da pessoa ou dependência de rede.
+export function explorationDemo() {
+  const calc = { layout: 'calc', title: 'A espera cresce na mesma proporção?', illustrative: true,
+    prediction: 'O que acontece quando a demanda se aproxima da capacidade?',
+    explanation: 'A curva varia a demanda mantendo a capacidade escolhida. Compare os cenários.', sweep: 'demanda',
+    inputs: { demanda: { label: 'Demanda', value: 2, min: 1, max: 9, step: 1, unit: 'tarefas/s' }, capacidade: { label: 'Capacidade', value: 10, min: 10, max: 20, step: 1, unit: 'tarefas/s' } },
+    outputs: [{ name: 'espera', label: 'Tempo médio no sistema', fn: '1/(capacidade-demanda)', unit: 's', decimals: 3, scale: { min: 0, max: 1 } }],
+    scenarios: [{ label: 'Folga', values: { demanda: 2 }, explanation: 'Existe uma grande margem de capacidade.' }, { label: 'Perto do limite', values: { demanda: 9 }, explanation: 'A espera cresce muito ao se aproximar da capacidade.' }, { label: 'Mais capacidade', values: { demanda: 9, capacidade: 18 }, explanation: 'Compare com o cenário anterior sem mudar a demanda.' }],
+    consulta: 'Modelo ilustrativo M/M/1: chegadas de Poisson e tempos de serviço exponenciais, uma fila e um servidor, regime estacionário com demanda menor que capacidade. O tempo médio no sistema é 1/(capacidade-demanda). Não é uma previsão de um serviço real.' };
+  return { title: 'Explore uma ideia', theme: 'bauhaus', purpose: 'palestra', duration: 8, slides: [
+    { layout: 'cover', title: 'Uma pergunta.\nVários caminhos.', subtitle: 'Preveja, experimente e explique.', tone: 'light', figure: { icon: 'flask-conical', size: 320 } },
+    calc,
+    { layout: 'canvas', elements: [{ text: 'Uma solicitação', as: 'title', x: 150, y: 140, w: 1500 }, { text: 'Pedido', as: 'lead', card: true, continuity: 'pedido', x: 200, y: 470, w: 360, h: 150 }] },
+    { layout: 'canvas', elements: [{ text: 'Agora olhe por dentro', as: 'title', x: 150, y: 140, w: 1500 }, { text: 'Pedido', as: 'lead', card: true, continuity: 'pedido', x: 750, y: 350, w: 650, h: 260 }, { text: 'O objeto continua reconhecível enquanto a explicação se aprofunda.', as: 'body', x: 180, y: 760, w: 1500 }] },
+    { layout: 'statement', text: 'Não basta ver o resultado.\nExperimente o que o faz mudar.', tone: 'dark' },
+  ] };
+}

package/src/studio/exporting.js

@@ -0,0 +1,105 @@
+import { expandApiCollections } from '../api-collections.js';
+import {meetingSpec} from '../meeting.js';
+// Exportar a apresentação aberta ou da biblioteca: .sagadeck, PowerPoint, PDF, roteiro, material de estudo e "Baixar
+// tudo". PPTX/PDF/roteiro/estudo usam o Chrome invisível (os mesmos exportadores do CLI), numa pasta temporária.
+// (Saiu de server.js: o servidor só decide o que exportar e chama sendExport.)
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import JSZip from "jszip";
+import { buildHTML } from "../build.js";
+import { THEMES } from "../themes.js";
+import { loadPreferences } from "../preferences.js";
+import { packDeck, EXTENSION, MIME } from "../package.js";
+
+const slugify = (s) => String(s || "deck").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase()
+  .replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40) || "deck";
+
+export function sendHtml(res,spec,audience){
+ const out=buildHTML(spec,{audience});res.writeHead(200,{'Content-Type':'text/html; charset=utf-8','Content-Disposition':'attachment; filename="apresentacao.html"'});res.end(out.html);
+}
+
+// Gera e envia um arquivo da apresentação. PPTX/PDF/roteiro usam o Chrome invisível (os mesmos
+// exportadores de "sagadeck pptx | pdf | roteiro"), numa pasta temporária.
+export async function sendExport(res, kind, spec, name, { notes = true, inline = false, audience } = {}) {
+  spec=meetingSpec(spec,audience);
+  const cd = (file) => `attachment; filename="${slugify(file.replace(/\.\w+$/, ""))}${path.extname(file)}"; filename*=UTF-8''${encodeURIComponent(file)}`;
+  if (kind === "sagadeck") {
+    const { zip, missing } = await packDeck(spec, { baseDir: spec._dir || process.cwd(), name, generator: "sagadeck studio" });
+    res.writeHead(200, { "Content-Type": MIME, "Content-Disposition": cd(name + EXTENSION), "X-Sagadeck-Missing": encodeURIComponent(JSON.stringify(missing)) });
+    res.end(zip);
+    return;
+  }
+  const kinds = {
+    pptx: { file: `${name}.pptx`, mime: "application/vnd.openxmlformats-officedocument.presentationml.presentation" },
+    pdf: { file: `${name}.pdf`, mime: "application/pdf" },
+    roteiro: { file: `${name} - roteiro.pdf`, mime: "application/pdf" },
+    // a visão de estudo do mesmo deck: cada slide inteiro + o texto de consulta (sem as notas do apresentador)
+    estudo: { file: `${name} - material de estudo.pdf`, mime: "application/pdf" },
+    "estudo-html": { file: `${name} - material de estudo.html`, mime: "text/html; charset=utf-8" },
+    // "Baixar tudo": o que se leva para apresentar, num clique (PowerPoint com as notas, PDF e roteiro)
+    tudo: { file: `${name}.zip`, mime: "application/zip" },
+  };
+  const k = kinds[kind];
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), `sagadeck-${kind}-`));
+  try {
+    if (["pptx","pdf","tudo"].includes(kind)) spec=expandApiCollections(spec);
+    const r = buildHTML(spec);
+    const htmlFile = path.join(tmp, "deck.html");
+    fs.writeFileSync(htmlFile, r.html);
+    const errors = [];
+    const make = async (what) => {
+      const out = path.join(tmp, `saida-${what}`);
+      if (what === "pptx") {
+        const { exportPptx } = await import("../export/pptx.js");
+        errors.push(...(await exportPptx(htmlFile, out, { theme: r.theme, meta: { ...r.meta, slides: r.slidesMeta }, notes })).errors);
+      } else if (what === "pdf") {
+        const { pdf } = await import("../export/shots.js");
+        // Preferências › Exportação: tema escuro com par claro (manual-noite → manual) sai claro no PDF, bom para imprimir
+        const light = loadPreferences().exportacao.pdfClaro === true ? lightVariant(spec) : null;
+        let file = htmlFile;
+        if (light) { file = path.join(tmp, "deck-claro.html"); fs.writeFileSync(file, buildHTML(light).html); }
+        await pdf(file, out);
+      } else if (what === "estudo" || what === "estudo-html") {
+        const { shots } = await import("../export/shots.js");
+        const { estudoHTML, estudoPDF } = await import("../export/estudo.js");
+        const { files } = await shots(htmlFile, path.join(tmp, "fotos"), { scale: what === "estudo" ? 0.6 : 0.75, jpeg: true });
+        const html = estudoHTML({ title: r.meta.title, author: r.meta.author, date: spec.date, slidesMeta: r.slidesMeta, shotFiles: files });
+        if (what === "estudo-html") fs.writeFileSync(out, html); else await estudoPDF(html, out);
+      } else {
+        const { shots } = await import("../export/shots.js");
+        const { roteiroPDF } = await import("../export/roteiro.js");
+        const { files } = await shots(htmlFile, path.join(tmp, "miniaturas"), { scale: 0.5, jpeg: true });
+        await roteiroPDF({ slidesMeta: r.slidesMeta, shotFiles: files, outFile: out, title: r.meta.title, author: r.meta.author, duration: spec.duration });
+      }
+      return fs.readFileSync(out);
+    };
+    let body;
+    if (kind === "tudo") {
+      const zip = new JSZip();
+      for (const what of ["pptx", "pdf", "roteiro"]) zip.file(kinds[what].file, await make(what));
+      body = await zip.generateAsync({ type: "nodebuffer", compression: "DEFLATE" });
+    } else body = await make(kind);
+    res.writeHead(200, {
+      "Content-Type": k.mime, "Content-Disposition": inline ? "inline" : cd(k.file),
+      // só o que afeta o arquivo (falha ao exportar, arquivo não encontrado); o fiscal de conteúdo fica no Revisar
+      "X-Sagadeck-Warnings": encodeURIComponent(JSON.stringify([...(r.warnings || []).filter((w) => /não encontrado/.test(w)), ...errors].slice(0, 20))),
+    });
+    res.end(body);
+  } catch (e) {
+    console.error(`[Studio] exportação ${kind} falhou:`, e.message);
+    res.writeHead(500, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: e.message }));
+  } finally {
+    fs.rmSync(tmp, { recursive: true, force: true });
+  }
+}
+
+// O mesmo deck no tema claro do par (deck e slides com tema escuro que tem par claro); null se não há o que trocar
+export function lightVariant(spec) {
+  const swap = (name) => (THEMES[name]?.dark && THEMES[name].pair ? THEMES[name].pair : null);
+  const deckTo = swap(spec.theme);
+  const slides = (spec.slides || []).map((s) => (s.theme && swap(s.theme) ? { ...s, theme: swap(s.theme) } : s));
+  if (!deckTo && slides.every((s, i) => s === spec.slides[i])) return null;
+  return { ...spec, theme: deckTo || spec.theme, slides };
+}

package/src/studio/generation-report.js

@@ -0,0 +1,10 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+export function saveGenReport(dir, generation) {
+  const reportDir = path.join(dir, '.sagadeck');
+  fs.mkdirSync(reportDir, { recursive: true });
+  fs.writeFileSync(path.join(reportDir, 'avaliacao-geracao.json'), JSON.stringify({
+    createdAt: new Date().toISOString(), quality: generation.quality, variety: generation.variety,
+  }, null, 2), 'utf8');
+}

package/src/studio/instance.js

@@ -0,0 +1,48 @@
+// Uma instância local do Studio: porta padrão única (CLI, npm run dev e o pacote Python) e identificação por
+// /api/instance. Abrir o Studio de novo acha o que já está aberto (mesma biblioteca) e aponta para ele, em vez de
+// subir um segundo servidor que disputa os mesmos arquivos.
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { execFileSync } from "node:child_process";
+
+export const DEFAULT_PORT = 3517;
+// a versão: o package.json mais perto (no repositório, dois níveis acima; no motor empacotado do pip, ao lado)
+export const VERSION = (() => {
+  let dir = path.dirname(fileURLToPath(import.meta.url));
+  for (let k = 0; k < 4; k++, dir = path.dirname(dir)) {
+    try { const v = JSON.parse(fs.readFileSync(path.join(dir, "package.json"), "utf8")).version; if (v) return v; } catch {}
+  }
+  return "0.0.0";
+})();
+
+// carimbo do código rodando (para o "é antigão?" nunca mais): versão + commit curto + início.
+// fora de um clone git (pacote instalado), commit vira "empacotado".
+export function buildInfo({ exec = null } = {}) {
+  let commit = "empacotado";
+  try {
+    commit = String(execFileSync("git", ["rev-parse", "--short", "HEAD"], { cwd: path.dirname(fileURLToPath(import.meta.url)), stdio: ["ignore", "pipe", "ignore"], timeout: 5000 }).toString().trim() || "empacotado");
+  } catch { /* sem git por perto */ }
+  if (exec) commit = String(exec);
+  if (!/^[0-9a-f]{4,40}$/.test(commit)) commit = "empacotado";
+  return { version: VERSION, commit, started: new Date().toISOString(), pid: process.pid };
+}
+
+// quem está na porta: { app: "sagadeck-studio", version, pid, library, ... } | null (ninguém ou outra coisa)
+export async function probeInstance(port, host = "127.0.0.1") {  const h = host === "0.0.0.0" ? "127.0.0.1" : host;
+  try {
+    const r = await fetch(`http://${h.includes(":") ? `[${h}]` : h}:${port}/api/instance`, { signal: AbortSignal.timeout(1500) });
+    if (!r.ok) return null;
+    const j = await r.json();
+    return j?.app === "sagadeck-studio" ? j : null;
+  } catch { return null; }
+}
+
+// o que fazer com a instância achada: reusar (mesma biblioteca e versão) ou avisar
+export function instanceDecision(found, { library, version = VERSION }) {
+  if (!found) return { action: "start" };
+  const same = (a, b) => path.resolve(a || "").toLowerCase() === path.resolve(b || "").toLowerCase();
+  if (!same(found.library, library)) return { action: "conflict", why: `outra biblioteca (${found.library})` };
+  if (found.version !== version) return { action: "conflict", why: `outra versão (${found.version}; esta é ${version}): feche a aberta (processo ${found.pid}) e abra de novo` };
+  return { action: "reuse" };
+}

package/src/studio/layout-samples.js

@@ -0,0 +1,152 @@
+import { portalExample } from '../portal-scene.js';
+import { playgroundExample } from '../playground.js';
+// Conteúdo de exemplo de cada layout — usado na galeria de layouts do Studio (prévia no tema do deck).
+import { graphLabExample } from '../graph-lab.js';
+import { codeLabExample } from '../code-lab.js';
+export const LAYOUT_INFO = {
+  portal: ["Portal e transformação", "Entre em um elemento, transforme o cenário e revele texto integrado ao ambiente"],
+  playground: ["Experiência personalizada", "HTML, CSS e JavaScript interativos em um frame isolado"],
+  codelab: ['Código explorável', 'Alunos alteram código e entradas, executam offline e acompanham estruturas e variáveis passo a passo'],
+  graphlab: ['Rede explorável', 'Navegue pelos nós, teste rotas, altere custos, remova conexões e reorganize a rede ao vivo'],
+  mosaic: ["Grade adaptável", "De 1 a 12 itens: as colunas se ajustam à quantidade e ao tamanho do texto"],
+  ribbon: ["Cápsulas", "Etapas em painéis arredondados, com colunas automáticas"],
+  dossier: ["Página de consulta", "Material compacto com seções, código e notas na mesma página"],
+  decisionlab: ["Laboratório de decisões", "Compare automação e revisão humana com premissas ajustáveis ao vivo"],
+  solution: ["Exercício resolvido", "Enunciado e dados de um lado; cada clique revela o próximo passo da conta, até a resposta em destaque"],
+  calc: ["Calculadora ao vivo", "Mexa nas entradas e veja as fórmulas, as faixas (\"laminar\", \"turbulento\"…) e a régua mudarem na hora"],
+  algo: ["Algoritmo animado", "Qualquer algoritmo rodando de verdade (ordenação, busca em texto, grafo, árvore ou o seu código em Python): as estruturas desenhadas, a linha do código, as variáveis como num depurador e o botão Tocar"],
+  carousel: ["Carrossel", "Um item por clique com foto e texto: roda em semicírculo que gira, ou a foto em anéis que giram e travam"],
+  duel: ["Duelo de commits", "Duas pessoas no mesmo arquivo, um clique por jogada: o Git calcula push recusado, merge e conflito, e o grafo cresce"],
+  terminals: ["Dois terminais", "Comandos digitados lado a lado; com o roteiro do duelo, a saída do Git (e o git log --graph) sai calculada"],
+  turns: ["Turnos a dois", "Code review, cliente × servidor, debate ou role-play: uma fala por clique, alternando os lados"],
+  science: ["Fórmulas e funções", "Escreva a fórmula e ela vira curva; cada letra vira um controle deslizante. Aceita pontos colados do Excel e superfície 3D"],
+  infographic: ["Infográfico", "Arco, ramos, lados, trilhas ou metrô: de 2 a 8 itens coloridos em volta de um centro"],
+  diagram: ["Diagrama", "Fluxograma, sequência, estados, UML, jornada, mapa mental (Mermaid) nas cores do tema"],
+  scenography: ["Texto no cenário", "13 composições (palco, terminal, café, embarque, pregão, cinema, revista…), sem animação"],
+  cover: ["Capa", "Abertura com título, subtítulo e autor"],
+  section: ["Seção", "Abre um novo ato ou capítulo"],
+  statement: ["Frase de impacto", "Uma ideia em letras grandes"],
+  calendar: ["Calendário", "Datas num calendário: um cartão por mês com o mini calendário e os eventos marcados; o que não tem data vai em \"sem data\""],
+  poster: ["Pôster (infográfico)", "Uma página como figura de revista científica: ilustração principal e painéis com letra (a, b, c), desenho, texto curto e números"],
+  definition: ["Definição", "O termo em destaque, a origem da palavra em partes e a definição, com um ícone ilustrativo"],
+  headline: ["Manchete", "Uma frase enorme ocupando o slide"],
+  quote: ["Citação", "Uma fala com autor"],
+  onepage: ["One-page", "Tudo numa página: jornada com ícones, problema com números, solução e um painel (números, gráficos, mapa por UF)"],
+  status: ["Status semanal", "Feito, em andamento, bloqueios, riscos e próximos passos, com saúde, avanço e telas da semana"],
+  hub: ["Mapa de caminhos", "Opções clicáveis que levam cada uma à sua parte da apresentação (processo com vários caminhos)"],
+  number: ["Número grande", "Um número que conta até o valor"],
+  split: ["Texto e figura", "Texto de um lado, figura do outro"],
+  full: ["Página inteira", "Imagem ou figura ocupando tudo"],
+  cards: ["Cartões", "2 a 4 cartões com ícone"],
+  bento: ["Mosaico", "Blocos de tamanhos diferentes (bento)"],
+  stats: ["Indicadores", "KPIs com tendência"],
+  steps: ["Etapas", "Processo em passos conectados"],
+  funnel: ["Funil", "Etapas que afunilam"],
+  pyramid: ["Pirâmide", "Níveis do topo à base"],
+  list: ["Lista", "Itens numerados grandes"],
+  agenda: ["Agenda", "Seções com a atual destacada"],
+  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"],
+  compare: ["Comparação", "A × B lado a lado"],
+  matrix: ["Matriz 2×2", "Quatro quadrantes"],
+  question: ["Pergunta", "Pergunta para a plateia com timer"],
+  poll: ["Enquete", "Votação ao vivo"],
+  image: ["Imagem", "Imagem em tela cheia com legenda"],
+  code: ["Código", "Código com linhas destacadas"],
+  codewalk: ["Código guiado", "Explique uma linha por vez, com destaques e saída simulada"],
+  api: ["API ao vivo", "Requisição que executa na hora (tipo Postman): síncrono, polling ou streaming, com código curl/Python"],
+  spotlight: ["Foco guiado", "Conduza o olhar por detalhes de uma imagem ou diagrama"],
+  kinetic: ["Tipografia cinética", "Frases em sequência viram parte da cena com ritmo e estilos tipográficos que mudam"],
+  video: ["Vídeo", "Player YouTube online ou MP4 incorporado"],
+  blocks: ["Livre (blocos)", "Monte com blocos em linhas e colunas"],
+  canvas: ["Livre (posições)", "Posicione cada elemento à mão"],
+  references: ["Referências", "Fontes em duas colunas"],
+  end: ["Encerramento", "Obrigado e contatos"],
+};
+
+export const LAYOUT_SAMPLES = {
+  portal: portalExample,
+  playground: playgroundExample,
+  codelab: codeLabExample,
+  graphlab: graphLabExample,
+  mosaic: {layout:"mosaic",title:"Uma ideia, vários caminhos",items:[{title:"Descobrir",text:"Entenda o problema."},{title:"Experimentar",text:"Teste a hipótese."},{title:"Construir",text:"Transforme em produto."},{title:"Aprender",text:"Use o resultado para melhorar."},{title:"Compartilhar",text:"Mostre o que funcionou."}]},
+  ribbon: {layout:"ribbon",title:"Do primeiro passo ao resultado",items:[{title:"Explorar",text:"Encontre uma oportunidade."},{title:"Testar",text:"Experimente em pequena escala."},{title:"Evoluir",text:"Repita o que funciona."}]},
+  dossier: {layout:"dossier",title:"Referência rápida",items:[{title:"Requisição",text:"GET consulta o recurso.",code:"GET /exemplos/42"},{title:"Resposta",text:"Confira o status antes de usar o corpo.",code:'{"id":42,"status":"ok"}'}]},
+  decisionlab: {layout:"decisionlab", title:"A revisão melhora o resultado?", lab:{volume:10000,errorRate:2,reviewRate:100,catchRate:60,introducedRate:0.2,seconds:30}},
+  infographic: { layout: "infographic", shape: "arco", title: "Os ==desafios== do projeto", center: { title: "Desafios" }, items: [{ title: "Acesso", text: "Pedido pela Bridge" }, { title: "Dados", text: "Mockados no experimento" }, { title: "Segurança", text: "Chaves no Key Vault" }, { title: "Infra", text: "Namespace e firewall" }] },
+  diagram: { layout: "diagram", kicker: "Processo", title: "Da ideia à ==produção==", mermaid: "flowchart LR\n  A([:lightbulb: Ideia]):::hi --> B{Vale testar?}\n  B -->|sim| C[:flask-conical: Experimento]\n  B -.->|não| X[Arquivar]:::vazado\n  C ==> D[:rocket: Produção]:::em" },
+  solution: {layout:"solution", title:"Exercício: quanto rende em 3 anos?", problem:"R$ 1.000 aplicados a 1% ao mês, com juros compostos. Quanto há depois de 36 meses?", givens:[{symbol:"C", value:"1000", unit:"R\\$", label:"capital"}, {symbol:"i", value:"0,01", label:"taxa ao mês"}, {symbol:"n", value:"36", label:"meses"}], find:"M", steps:[{text:"Juros compostos", latex:"M = C\\,(1 + i)^n"}, {text:"Substitui os dados", latex:"M = 1000 \\cdot 1{,}01^{36}"}, {text:"Calcula a potência", latex:"1{,}01^{36} \\approx 1{,}4308"}], answer:{latex:"M \\approx R\\$\\,1.430{,}77", text:"Rende cerca de 43% em 3 anos."}},
+  calc: {layout:"calc", title:"Qual é o regime do escoamento?", inputs:{V:{label:"Velocidade", latex:"V", value:1.5, min:0.01, max:4, step:0.01, unit:"m/s"}, D:{label:"Diâmetro", latex:"D", value:0.05, min:0.005, max:0.3, step:0.005, unit:"m"}, nu:{label:"Viscosidade (água, 20 °C)", latex:"\\nu = 1{,}0\\times10^{-6}\\ \\mathrm{m^2/s}", value:0.000001, fixed:true}}, outputs:[{name:"Re", label:"Número de Reynolds", latex:"Re = \\frac{VD}{\\nu}", fn:"V*D/nu", decimals:0}, {name:"regime", label:"Regime", of:"Re", cases:[{below:2300, text:"Laminar", color:"s3"}, {below:4000, text:"Transição", color:"em"}, {text:"Turbulento", color:"hi"}], scale:{min:100, max:1000000, log:true}}]},
+  algo: {layout:"algo", title:"Bubble sort passo a passo", algorithm:"bubble", array:[5, 1, 4, 2, 8, 3]},
+  carousel: {layout:"carousel", title:"Cinco lugares, cinco lições", style:"arc", items:[{title:"Montanha", text:"Subir devagar é o jeito mais rápido de chegar.", label:"Capítulo 1"}, {title:"Mar", text:"Tudo o que é fundo começa raso."}, {title:"Cidade", text:"Muita gente, muita luz, pouco silêncio."}, {title:"Deserto", text:"Onde o pouco vira muito."}, {title:"Floresta", text:"Cada árvore conta uma história."}]},
+  duel: {layout:"duel", title:"Duelo de commits", file:"soma.js", base:"function soma(a, b) {\n  return a + b;\n}", people:["Ana","Beto"], bet:"Vai dar conflito?",
+    turns:[{who:1, edit:{2:"  return a + b + 0;"}, commit:"ajusta soma"}, {who:2, edit:{2:"  return b + a;"}, commit:"inverte a ordem"}, {who:1, push:true}, {who:2, push:true}, {who:2, pull:true},
+      {who:2, resolve:{2:"  return a + b;"}, commit:"resolve o conflito"}, {who:2, push:true}, {who:1, pull:true}]},
+  terminals: {layout:"terminals", title:"Dois terminais", file:"README.md", base:"# Projeto\nversão 1", people:["Ana","Beto"],
+    turns:[{who:1, edit:{2:"versão 2"}, commit:"sobe a versão"}, {who:1, push:true}, {who:2, pull:true}, {who:2, log:true}]},
+  turns: {layout:"turns", title:"Code review ao vivo", people:[{name:"Ana", role:"autora do PR"}, {name:"Beto", role:"revisor"}],
+    turns:[{who:1, text:"Abri o PR com a validação do Pix."}, {who:2, text:"Por que não usa o **schema** que já existe?", tag:"pergunta"}, {who:1, text:"Boa. Troquei e testei assim:", method:"POST", url:"/pix", status:201, code:'{ "valor": 10 }', language:"json"}, {who:2, text:"Aprovado.", tag:"aprovado"}]},
+  science: {layout:"science", title:"Mexa no a e no b", equations:[{label:"A função",latex:"f(x) = a\\sin(bx)"},{label:"A derivada",latex:"f'(x) = ab\\cos(bx)"}], plot:{functions:["a*sin(b*x)","a*b*cos(b*x)"], x:[-6.3,6.3], params:{a:{value:1.5,min:0,max:3,label:"amplitude"},b:{value:1,min:0.5,max:3,label:"frequência"}}}},
+  scenography: {layout:"scenography", scene:"stage", title:"ALÉM DO\nÓBVIO", kicker:"UMA NOVA PERSPECTIVA", subtitle:"Ideias que ocupam espaço.", tone:"dark", deco:"none"},
+  cover: { layout: "cover", kicker: "Evento 2026", title: "Título da ==apresentação==", subtitle: "Um subtítulo curto", author: "Seu nome", figure: { icon: "rocket", size: 320 } },
+  section: { layout: "section", number: 2, kicker: "Parte dois", title: "O problema" },
+  statement: { layout: "statement", kicker: "A ideia", text: "Uma frase que ==muda tudo==." },
+  calendar: { layout: "calendar", kicker: "Agenda", title: "Próximos lançamentos", events: [
+    { date: "2026-11-12", title: "Beta aberto", tag: "Produto", text: "Para os 500 primeiros" }, { date: "2026-11-28", title: "Evento de lançamento", tag: "Evento" },
+    { date: "2027-01-15", title: "Versão 2.0", tag: "Produto", text: "Com o app de celular" }], undated: [{ title: "Integração com o banco", text: "Em negociação" }] },
+  poster: { layout: "poster", kicker: "Receita", title: "Pão de fermentação natural", subtitle: "Do fermento ao forno em quatro etapas", flow: true,
+    panels: [
+      { title: "Fermento", icon: "wheat", text: "Farinha e água, alimentados por 5 dias", facts: [{ value: "1:1", label: "farinha e água" }] },
+      { title: "Massa", icon: "hand", text: "Misture e dobre a cada 30 min", facts: [{ value: "75%", label: "hidratação" }] },
+      { title: "Descanso", icon: "thermometer", text: "Na geladeira, a massa ganha sabor", facts: [{ value: "12 h", label: "a 4 °C" }] },
+      { title: "Forno", icon: "flame", text: "Panela tampada, depois sem tampa", facts: [{ value: "250 °C", label: "45 min" }] },
+    ], key: "Tempos para uma cozinha a 24 °C." },
+  definition: { layout: "definition", kicker: "O que é", term: "Hidrologia", origin: "do grego", parts: [{ word: "hydor", meaning: "água" }, { word: "logos", meaning: "ciência" }], text: "É a ciência que estuda ==a água sobre a Terra==: sua quantidade, distribuição e circulação, e sua relação com o meio ambiente e com os seres vivos.", icon: "droplet" },
+  headline: { layout: "headline", text: "78% ==desistem==", caption: "no segundo passo" },
+  quote: { layout: "quote", quote: "Dados vencem opiniões.", by: "Alguém sábio" },
+  onepage: { layout: "onepage", title: "Cadastro digital", journey: [{ icon: "user", title: "Cliente chega", text: "Fila de 40 min" }, { icon: "file-text", title: "Preenche papel" }, { icon: "check", title: "Conta aberta", text: "Até 5 dias" }], problem: { text: "Cadastro em papel atrasa a abertura de contas", numbers: [{ value: "5 dias", label: "para abrir uma conta" }] }, solution: { text: "Cadastro no tablet, com assinatura digital", items: ["Conta aberta no mesmo dia"] } },
+  status: { layout: "status", kicker: "Semana 39", title: "Portal do cliente", health: "risco", progress: 65, done: ["Tela de login", "Integração com o cadastro"], doing: ["Recuperação de senha"], blocked: [{ text: "Liberação de firewall", owner: "Infra", due: "30/09" }], upcoming: ["Homologar com o negócio"] },
+  hub: { layout: "hub", title: "Qual é o seu caso?", question: "Cada caminho tem o seu prazo", options: [{ icon: "flask-conical", title: "Experimento", meta: "30 dias", goto: "exp" }, { icon: "rocket", title: "Projeto", meta: "DEV, HOM e PROD", goto: "proj" }] },
+  number: { layout: "number", value: 42, suffix: "%", label: "mais rápido" },
+  split: { layout: "split", title: "Texto e figura", bullets: ["Primeiro ponto", "Segundo ponto"], figure: { icon: "lightbulb", size: 300 } },
+  full: { layout: "full", figure: { chart: "donut", value: 72, center: "72%" }, title: "Figura em página inteira", overlay: "left" },
+  cards: { layout: "cards", title: "Três pilares", items: [{ icon: "shield", title: "Seguro" }, { icon: "zap", title: "Rápido" }, { icon: "heart", title: "Simples" }] },
+  bento: { layout: "bento", title: "Em um olhar", tiles: [{ value: "8,4 mi", title: "Receita", hl: true }, { icon: "users", title: "NPS 91" }, { icon: "rocket", title: "3 lançamentos" }, { icon: "globe", title: "2 países" }, { icon: "check", title: "Zero falhas" }] },
+  stats: { layout: "stats", title: "Resultados", stats: [{ value: "+42%", label: "Receita" }, { value: "0,6%", label: "Churn" }, { value: "91", label: "NPS" }] },
+  steps: { layout: "steps", title: "Como funciona", steps: [{ title: "Coletar" }, { title: "Analisar" }, { title: "Agir" }] },
+  funnel: { layout: "funnel", title: "Funil", stages: [{ title: "Visitas", value: "120k" }, { title: "Cadastro", value: "18k" }, { title: "Pagantes", value: "900" }] },
+  pyramid: { layout: "pyramid", title: "Pirâmide", levels: [{ title: "Topo" }, { title: "Meio" }, { title: "Base" }] },
+  list: { layout: "list", title: "Lista", items: ["Primeiro item", "Segundo item", "Terceiro item"] },
+  agenda: { layout: "agenda", title: "Agenda", current: 2, items: [{ title: "Abertura" }, { title: "O problema" }, { title: "A solução" }] },
+  timeline: { layout: "timeline", title: "Linha do tempo", events: [{ when: "2019", title: "Início" }, { when: "2022", title: "Virada" }, { when: "2026", title: "Hoje" }] },
+  table: { layout: "table", title: "Vazões máximas anuais", head: ["Ano", "Vazão (m³/s)", "Ordem", "TR (anos)"], rows: [["1984", "2.218,0", "1", "9,0"], ["1985", "1.980,5", "2", "4,5"], ["1986", "1.712,3", "3", "3,0"], ["1987", "1.445,0", "4", "2,3"]], highlight: { row: 1 }, side: "A maior cheia do período tem ==TR de 9 anos==.", source: "Posto fluviométrico (exemplo)" },
+  chart: { layout: "chart", title: "Crescimento", chart: { chart: "column", data: [{ label: "A", value: 30 }, { label: "B", value: 55 }, { label: "C", value: 80 }] }, side: "Subiu ==2,6×==" },
+  compare: { layout: "compare", title: "Antes × depois", left: { label: "Antes", value: "3 dias" }, right: { label: "Depois", value: "2 h", hl: true } },
+  matrix: { layout: "matrix", title: "Matriz", x: ["Fácil", "Difícil"], y: ["Alto impacto", "Baixo impacto"], cells: [{ title: "Faça já", hl: true }, { title: "Planeje" }, { title: "Delegue" }, { title: "Evite" }] },
+  question: { layout: "question", question: "Qual você escolheria?", options: ["Opção A", "Opção B", "Opção C"], timer: 30 },
+  poll: { layout: "poll", question: "Vote agora", id: "exemplo", options: ["Sim", "Não", "Talvez"] },
+  image: { layout: "image", figure: { picto: "scene", name: "desk" }, title: "Imagem em tela cheia" },
+  code: { layout: "code", title: "Código", filename: "exemplo.py", language: "Python", code: "def ola():\n    return 'mundo'", highlight: [2] },
+  codewalk: { layout: "codewalk", kicker: "Laboratório · API", title: "Uma API em ==três movimentos==", filename: "primeira-api.js", language: "JavaScript",
+    code: "const resposta = await fetch('/api/aulas');\n\nconst aulas = await resposta.json();\n\nconst ativas = aulas.filter(aula => aula.ativa);\n\nconsole.log(ativas.length);",
+    steps: [{ title: "Faça a pergunta", text: "fetch envia o pedido. await dá tempo para a resposta chegar.", highlight: [1], output: "GET /api/aulas → 200 OK" },
+      { title: "Transforme a resposta", text: "O corpo JSON vira uma lista que o código consegue usar.", highlight: [3], output: "[{ id: 1, ativa: true },\n { id: 2, ativa: false }]" },
+      { title: "Escolha o que importa", text: "Só as aulas ativas passam pelo filtro. Qual será a saída?", highlight: [5, 7], output: "1" }] },
+  spotlight: { layout: "spotlight", kicker: "Olhar de quem programa", title: "O detalhe que ==muda tudo==", caption: "Inspeção de uma resposta HTTP · clique nos detalhes para explorar",
+    figure: { svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"><rect width="1000" height="600" fill="#101725"/><rect width="1000" height="70" fill="#1d273a"/><circle cx="30" cy="35" r="7" fill="#f09282"/><circle cx="55" cy="35" r="7" fill="#e5bd76"/><circle cx="80" cy="35" r="7" fill="#93c1a4"/><g font-family="monospace"><text x="125" y="44" font-size="22" fill="#a1adc4">API EXPLORER / aulas</text><rect x="40" y="110" width="920" height="84" rx="10" fill="#263348"/><text x="66" y="162" font-size="28" fill="#9ce3c3">GET</text><text x="145" y="162" font-size="28" fill="#e8edf5">/api/aulas</text><rect x="40" y="230" width="920" height="56" rx="8" fill="#142d2a"/><text x="65" y="267" font-size="24" fill="#9ce3c3">200 OK</text><text x="780" y="267" font-size="22" fill="#9ce3c3">42 ms</text><text x="55" y="341" font-size="25" fill="#c0cee9">{</text><text x="90" y="390" font-size="25" fill="#9fc3ff">"aulas": [</text><text x="125" y="439" font-size="25" fill="#e8edf5">{ "id": 1, "ativa": true }</text><text x="90" y="488" font-size="25" fill="#9fc3ff">]</text><text x="55" y="537" font-size="25" fill="#c0cee9">}</text></g></svg>' },
+    hotspots: [{ x: 4, y: 18, width: 92, height: 15, title: "O pedido", text: "O verbo GET consulta o recurso. A rota identifica a coleção de aulas." },
+      { x: 4, y: 38, width: 92, height: 10, title: "A confirmação", text: "200 OK confirma o sucesso. O tempo ajuda a investigar a experiência do usuário." },
+      { x: 5, y: 52, width: 78, height: 39, title: "Os dados", text: "A estrutura JSON é o contrato que o front-end precisa entender." }] },
+  kinetic: { layout: "kinetic", figure: { svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><linearGradient id="stage" x2="0" y2="1"><stop stop-color="#697a78"/><stop offset="1" stop-color="#26353a"/></linearGradient><linearGradient id="window" x2="0" y2="1"><stop stop-color="#e1cba1"/><stop offset="1" stop-color="#8d9990"/></linearGradient></defs><path fill="url(#stage)" d="M0 0h1920v1080H0z"/><path fill="#202b2e" d="M0 0h430v1080H0zM1490 0h430v1080h-430z"/><path fill="url(#window)" d="M500 90h910v660H500z"/><path fill="#d0b88e" opacity=".4" d="M500 560h910v190H500z"/><path fill="#293432" d="M0 850h1920v230H0z"/><path fill="#394342" d="M720 814h480v36H720z"/><path fill="#26302f" d="M836 555c28-120 205-154 266-14l76 263H760z"/><circle cx="960" cy="465" r="74" fill="#39403b"/></svg>' }, autoplay: true, interval: 1800,
+    beats: [{ text: "Uma ideia", style: "clean", position: "left", color: "white", size: "medium", tag: "GANHA FORMA" },
+      { text: "muda o olhar", style: "clean", position: "right", color: "gold", size: "medium" },
+      { text: "e abre caminhos", style: "clean", position: "left", color: "white", size: "medium" }] },
+  // genérico de propósito: troque método, URL e corpo pelos do seu serviço (os exemplos prontos ficam no deck "Exemplo: aula de APIs")
+  api: { layout: "api", kicker: "Ao vivo", title: "Minha ==chamada==", text: "Troque o método, a URL e o corpo pelos do seu serviço", request: { method: "POST", url: "{{base}}/echo", body: { mensagem: "Olá, API" } }, answer: "$.recebido.mensagem" },
+  video: { layout: "video", title: "Assista", url: "https://example.com", label: "Assistir" },
+  blocks: { layout: "blocks", title: "Blocos livres", content: [{ row: [{ lead: "Esquerda" }, { lead: "Direita" }] }] },
+  canvas: { layout: "canvas", elements: [{ h2: "Livre", x: 200, y: 200 }, { icon: "star", size: 200, x: 1200, y: 400 }] },
+  references: { layout: "references", title: "Fontes", items: ["Autor (2024). Título.", "Outro (2025). Estudo."] },
+  end: { layout: "end", title: "Obrigado.", subtitle: "Perguntas?", contacts: ["seu@email.com"] },
+};