sagadeck 1.8.0 → 1.10.0

package/src/studio/layout-samples.js

@@ -22,11 +22,10 @@ export const LAYOUT_INFO = {
   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\""],
+  calendar: ["Calendário", "Datas num calendário: um cartão por mês, um mês grande de parede, a semana com horários ou a agenda em lista; com muitos eventos, um slide por mês"],
   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"],
@@ -58,7 +57,6 @@ export const LAYOUT_INFO = {
   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"],
@@ -87,7 +85,6 @@ export const LAYOUT_ASK = {
   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",
@@ -123,7 +120,6 @@ export const LAYOUT_ASK = {
   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",
@@ -145,8 +141,8 @@ export const LAYOUT_SAMPLES = {
   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" },
+  infographic: { layout: "infographic", shape: "arco", title: "Os ==desafios== da viagem", center: { title: "Desafios" }, items: [{ title: "Roteiro", text: "Três cidades em dez dias" }, { title: "Orçamento", text: "Hospedagem pesa mais" }, { title: "Documentos", text: "Passaporte e visto" }, { title: "Clima", text: "Chuva na segunda semana" }] },
+  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: Protótipo]\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]},
@@ -157,15 +153,14 @@ export const LAYOUT_SAMPLES = {
   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"}]},
+    turns:[{who:1, text:"Abri o PR com a validação das inscrições."}, {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:"/inscricoes", status:201, code:'{ "nome": "Ana" }', 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" }] },
+    { date: "2027-01-15", title: "Versão 2.0", tag: "Produto", text: "Com o app de celular" }], undated: [{ title: "Loja em outra cidade", 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" }] },
@@ -176,9 +171,9 @@ export const LAYOUT_SAMPLES = {
   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" }] },
+  onepage: { layout: "onepage", title: "Agendamento online", journey: [{ icon: "user", title: "Paciente liga", text: "Espera de 15 min" }, { icon: "file-text", title: "Preenche a ficha" }, { icon: "check", title: "Consulta marcada", text: "Até 5 dias" }], problem: { text: "Marcar por telefone atrasa as consultas", numbers: [{ value: "5 dias", label: "para marcar uma consulta" }] }, solution: { text: "Agendamento pelo celular, com confirmação automática", items: ["Consulta marcada 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: "Aprovação do texto de privacidade", owner: "Jurídico", due: "30/09" }], upcoming: ["Teste com 20 usuários"] },
+  hub: { layout: "hub", title: "Qual é o seu caso?", question: "Cada caminho tem o seu ritmo", options: [{ icon: "user", title: "Primeira vez", meta: "4 passos", goto: "inicio" }, { icon: "rocket", title: "Já uso", meta: "Atalhos", goto: "atalhos" }] },
   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" },
@@ -209,11 +204,7 @@ export const LAYOUT_SAMPLES = {
     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")
+  // genérico de propósito: troque método, URL e corpo pelos do seu serviço (os exemplos prontos ficam na demo "APIs com curl" e no `sagadeck ensaio-api`)
   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" }] }] },

package/src/studio/library-routes.js

@@ -9,6 +9,7 @@ import { writeDeckFile } from "../deck-file.js";
 import { createExperienceDeck } from "../experiences.js";
 import { demoDeck } from "./demo-decks.js";
 import { DEMO_FILES } from "../api-demo.js";
+import { developerStarter } from "./developer-starters.js";
 
 export async function libraryRoutes({ req, res, pathname, url, W, opts, readJSON, readBody, slideSnapshots, sendExport, galleryKey, galleryEntry, materializePreview, copyModelAssets, generateIntoLibrary, llmAvailable, llmConfig, respond, templateFile, TEMPLATE_DIRS }) {
   const L = W.library;
@@ -74,6 +75,12 @@ export async function libraryRoutes({ req, res, pathname, url, W, opts, readJSON
       case "/api/library/topics/update": return ok({ id: L.updateTopic(b.id, b) });
       case "/api/library/topics/delete": L.deleteTopic(b.id); return ok();
       case "/api/library/decks": {
+        if (b.starter) {
+          const spec = developerStarter(b.starter, { title: b.title });
+          if (b.theme) spec.theme = b.theme;
+          buildHTML(spec);
+          return ok({ id: L.createDeck(b.topic || "", spec) });
+        }
         // nova: em branco (uma capa) — "com IA" usa /api/library/decks/ai
         const title = String(b.title || "Nova apresentação").trim();
         const id = L.createDeck(b.topic || "", { title, theme: b.theme || "bauhaus", duration: 10,
@@ -103,15 +110,6 @@ export async function libraryRoutes({ req, res, pathname, url, W, opts, readJSON
         if (!made) throw new Error("Não há um modelo em prévia aberto.");
         return ok(made);
       }
-      case "/api/library/decks/example-cenario": {
-        // demonstração do Texto no cenário: o YAML e as imagens de exemplo (fundo e recorte transparente)
-        const dir0 = TEMPLATE_DIRS.map((d) => path.join(d, "cenario")).find((d) => fs.existsSync(d));
-        if (!dir0) throw new Error("o exemplo não veio no pacote (templates/cenario)");
-        const tpl = fs.readdirSync(dir0).find((f) => f.endsWith(".yaml"));
-        const id = L.createDeck(b.topic || "", YAML.parse(fs.readFileSync(path.join(dir0, tpl), "utf8")));
-        fs.cpSync(path.join(dir0, "imagens"), path.join(path.dirname(L.resolveId(id)), "imagens"), { recursive: true, force: false });
-        return ok({ id });
-      }
       case "/api/library/decks/example": {
         // exemplo de slides api (aula de APIs de IA): roda no ambiente embutido "ensaio", sem configurar nada
         const tpl = templateFile("ensaio-api.yaml");

package/src/studio/project.js

@@ -226,6 +226,7 @@ export function writeSheet(P, rel, rows) {
   if (!Array.isArray(rows) || rows.some((r) => !Array.isArray(r))) throw new Error("Planilha inválida.");
   const old = fs.existsSync(abs) ? parseCSV(fs.readFileSync(abs, "utf8"), ext === "tsv" ? "\t" : undefined) : { delimiter: ext === "tsv" ? "\t" : ",", eol: "\n" };
   const tmp = abs + ".tmp";
+  fs.mkdirSync(path.dirname(abs), { recursive: true }); // planilha nova numa pasta que ainda não existe (contexto/)
   const clean = rows.map((r) => r.map((c) => String(c ?? "")));
   while (clean.length > 1 && clean.at(-1).every((c) => c === "")) clean.pop(); // linha vazia no fim (o cursor passou dela) não vai para o arquivo
   fs.writeFileSync(tmp, toCSV(clean, old));

package/src/studio/public/about.js

@@ -0,0 +1,68 @@
+// "Sobre o SagaDeck" (Ajuda › Sobre, no editor; botão Sobre, na biblioteca): a versão que está rodando e o essencial
+// para dar suporte (commit, Node, desde quando, a biblioteca, se a IA está configurada), com Copiar informações.
+window.SagaAbout = (() => {
+  // as cores vêm das variáveis que o editor e a biblioteca definem nos dois temas (claro e escuro); fundo e texto
+  // sempre do mesmo par, senão o tema escuro dá texto claro sobre fundo branco
+  const css = `.about-dlg{margin:auto;max-width:min(520px,calc(100vw - 32px));width:100%;border:1px solid var(--ui-line,#c9ced6);border-radius:12px;padding:20px 22px;background:var(--chrome,#fff);color:var(--text,#1d2433);font:14px/1.45 system-ui,sans-serif;box-shadow:0 20px 60px #0004}
+.about-dlg::backdrop{background:rgba(0,0,0,.45)}.about-dlg h2{margin:0;font-size:20px;color:var(--text,#1d2433)}.about-dlg .ver{margin:2px 0 14px;font-size:15px;color:var(--text-2,#555)}
+.about-dlg .ver b{color:var(--text,#1d2433);font-size:22px}.about-dlg dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px}
+.about-dlg dt{color:var(--text-2,#555)}.about-dlg dd{margin:0;overflow-wrap:anywhere;color:var(--text,#1d2433)}.about-dlg code{font:12px ui-monospace,Consolas,monospace;color:inherit}
+.about-dlg .links{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 6px}.about-dlg .links a{color:var(--brand,#5b4bdb)}
+.about-dlg .row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}.about-dlg button{padding:7px 14px;border-radius:8px;border:1px solid var(--ui-line,#c9ced6);background:transparent;color:var(--text,#1d2433);cursor:pointer;font:inherit}
+.about-dlg button.primary{background:var(--brand-fill,#5b4bdb);border-color:var(--brand-fill,#5b4bdb);color:#fff}.about-dlg [data-copied]{color:var(--text-2,#555);align-self:center;margin-right:auto}`;
+  const REPO = "https://github.com/naruminho/sagadeck";
+  const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  let dialog;
+
+  function build() {
+    if (!document.getElementById("about-style")) { const st = document.createElement("style"); st.id = "about-style"; st.textContent = css; document.head.append(st); }
+    dialog = document.createElement("dialog");
+    dialog.className = "about-dlg";
+    dialog.id = "about-dialog";
+    dialog.setAttribute("aria-labelledby", "about-title");
+    document.body.append(dialog);
+  }
+
+  // o que o servidor diz de si (versão, commit, Node, desde quando) e se a IA está configurada
+  async function facts() {
+    const get = async (u) => { try { const r = await fetch(u, { cache: "no-store" }); return r.ok ? r.json() : {}; } catch { return {}; } };
+    const [inst, ia] = await Promise.all([get("api/instance"), get("api/ia")]);
+    return { ...inst, ia: ia.configured == null ? null : !!ia.configured };
+  }
+  const text = (f) => [`SagaDeck ${f.version || "?"} (commit ${f.commit || "?"})`, `Node ${f.node || "?"} · ${f.platform || "?"}`,
+    f.started ? `No ar desde ${new Date(f.started).toLocaleString("pt-BR")} (processo ${f.pid || "?"})` : "",
+    f.multiuser ? "Servidor multiusuário" : f.library ? `Biblioteca: ${f.library}` : "",
+    f.ia == null ? "" : `IA: ${f.ia ? "configurada" : "não configurada"}`].filter(Boolean).join("\n");
+
+  async function open() {
+    if (!dialog) build();
+    dialog.innerHTML = `<h2 id="about-title">Sobre o SagaDeck</h2><p class="ver">Carregando…</p><div class="row"><button type="button" data-close>Fechar</button></div>`;
+    dialog.querySelector("[data-close]").onclick = () => dialog.close();
+    if (!dialog.open) dialog.showModal();
+    const f = await facts();
+    const row = (k, v) => (v ? `<dt>${k}</dt><dd>${v}</dd>` : "");
+    dialog.innerHTML = `<h2 id="about-title">Sobre o SagaDeck</h2>
+      <p class="ver">Versão <b data-version>${esc(f.version || "?")}</b></p>
+      <dl>
+        ${row("Commit", f.commit ? `<code>${esc(f.commit)}</code>` : "")}
+        ${row("Node", f.node ? `${esc(f.node)} · ${esc(f.platform || "")}` : "")}
+        ${row("No ar desde", f.started ? esc(new Date(f.started).toLocaleString("pt-BR")) : "")}
+        ${row("Biblioteca", !f.multiuser && f.library ? `<code>${esc(f.library)}</code>` : f.multiuser ? "neste servidor (multiusuário)" : "")}
+        ${row("IA", f.ia == null ? "" : f.ia ? "configurada (para testar cada recurso: <code>sagadeck ia-check</code>)" : "não configurada")}
+      </dl>
+      <div class="links">
+        <a href="${REPO}/blob/main/CHANGELOG.md" target="_blank" rel="noopener">O que mudou em cada versão</a>
+        <a href="${REPO}" target="_blank" rel="noopener">Código e problemas</a>
+        <a href="https://www.npmjs.com/package/sagadeck" target="_blank" rel="noopener">Pacote no npm</a>
+      </div>
+      <div class="row"><span data-copied hidden>Copiado.</span><button type="button" data-copy>Copiar informações</button><button type="button" class="primary" data-close>Fechar</button></div>`;
+    dialog.querySelector("[data-close]").onclick = () => dialog.close();
+    dialog.querySelector("[data-copy]").onclick = async () => {
+      try { await navigator.clipboard.writeText(text(f)); dialog.querySelector("[data-copied]").hidden = false; }
+      catch { dialog.querySelector("[data-copied]").textContent = "Não deu para copiar."; dialog.querySelector("[data-copied]").hidden = false; }
+    };
+  }
+  // qualquer botão ou link com data-about abre (Ajuda › Sobre no editor, o botão da biblioteca)
+  document.addEventListener("click", (e) => { const b = e.target.closest?.("[data-about]"); if (b) { e.preventDefault(); open(); } });
+  return { open };
+})();

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

@@ -8,8 +8,8 @@ window.SagaAISettings = (() => {
 .ai-cfg .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}.ai-cfg button{padding:7px 14px;border-radius:8px;border:1px solid var(--border,#c9ced6);background:transparent;color:inherit;cursor:pointer;font:inherit}
 .ai-cfg .rec{background:var(--selected,#eef);border-radius:8px;padding:8px 10px;margin:6px 0 4px}.ai-cfg .rec button{margin-top:6px;display:block}
 .ai-cfg button.primary{background:var(--brand,#5b4bdb);border-color:var(--brand,#5b4bdb);color:#fff}.ai-cfg [data-status]{margin-top:10px;min-height:1.4em}.ai-cfg [data-status].ok{color:#15803d}.ai-cfg [data-status].err{color:#b91c1c}`;
-  const LABEL = { text: "Modelo de texto", vision: "Modelo que vê imagens", image: "Modelo de imagem", search: "Modelo de busca na web" };
-  const HINT = { text: "obrigatório", vision: "opcional; vazio = o de texto", image: "opcional; para gerar ilustrações", search: "opcional; no OpenRouter, um modelo :online" };
+  const LABEL = { text: "Modelo de texto", vision: "Modelo que vê imagens", image: "Modelo de imagem", search: "Modelo de busca na web", video: "Modelo de vídeo" };
+  const HINT = { text: "obrigatório", vision: "opcional; vazio = o de texto", image: "opcional; para gerar ilustrações", search: "opcional; no OpenRouter, um modelo :online", video: "opcional; para gerar clipes (cobrado por segundo)" };
   const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
   let dialog, info, onSaved = () => {};
 

package/src/studio/public/app.js

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

package/src/studio/public/chat.js

@@ -2,7 +2,7 @@
 // Saiu do app.js pela trava de tamanho dos monolitos; o comportamento é o mesmo.
 // Fábrica no molde de slide-select.js: recebe o estado e os ajudantes, devolve a API.
 window.SagaChat = function ({ state, dom, escHtml, hydrateIcons, showToast, openPane, currentPane,
-  streamAI, syncDeckToServer, renderThumbnails, renderCurrentSlide, trackDeck, fitRendered, refreshAIStatus }) {
+  streamAI, syncDeckToServer, renderThumbnails, renderCurrentSlide, trackDeck, fitRendered, refreshAIStatus, previewMaterialized }) {
   let chatJob = null;
   const getChatJob = () => chatJob;
   // ==========================================================================
@@ -159,6 +159,10 @@ window.SagaChat = function ({ state, dom, escHtml, hydrateIcons, showToast, open
       }, (ev) => { if (!commandEvent(ev)) work.update(ev); }, job.controller.signal);
       if (state.file !== job.file) { work.done(); showToast("O pedido terminou na apresentação em que começou; a apresentação atual foi preservada.", 6000); return; }
       if (!data.spec) throw new Error(data.error || "resposta sem deck");
+      if (data.materialized) {
+        state.file = data.materialized.file;
+        previewMaterialized(data.materialized);
+      }
       // conversa salva antes de dispensar o indicador: quem espera o fim da resposta já encontra o arquivo gravado
       const finishWork = async () => { await saveChatHistory(); work.done(); };
       if (data.variants) {

package/src/studio/public/developer-authoring.css

@@ -0,0 +1,12 @@
+/* Conteúdo técnico em um só lugar: fonte à esquerda, resultado à direita. */
+.dev-author-dialog{margin:auto;width:min(1110px,96vw);max-width:96vw;height:min(810px,94dvh);max-height:94dvh;padding:0;border:1px solid var(--ui-line);border-radius:18px;background:var(--chrome);color:var(--text);box-shadow:0 24px 90px #0005;font:13px var(--font-sans)}
+.dev-author-dialog[open]{display:flex;flex-direction:column}.dev-author-dialog::backdrop{background:#101521aa;backdrop-filter:blur(4px)}
+.dev-author-dialog header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid var(--ui-line)}.dev-author-dialog header small{color:var(--brand);font-size:10px;font-weight:700;letter-spacing:.13em}.dev-author-dialog h2{margin:5px 0;font-size:25px;letter-spacing:-.035em}.dev-author-dialog header p{margin:5px 0 0;color:var(--text-2)}
+.dev-author-dialog button{padding:9px 12px;border:1px solid var(--ui-line-strong);border-radius:8px;background:var(--chrome);color:var(--text);font:inherit;cursor:pointer}.dev-author-dialog button:hover{background:var(--hover)}.dev-author-dialog button:disabled{opacity:.45;cursor:default}.dev-author-dialog button:focus-visible,.dev-author-dialog input:focus-visible,.dev-author-dialog select:focus-visible,.dev-author-dialog textarea:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
+.dev-author-work{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0;flex:1}.dev-author-source{display:flex;flex-direction:column;min-height:0;padding:22px 24px;gap:10px}.dev-author-dialog label{display:block;color:var(--text-2);font-size:12px}.dev-author-dialog input:not([type=radio]),.dev-author-dialog textarea,.dev-author-dialog select{display:block;width:100%;margin-top:6px;padding:9px 10px;border:1px solid var(--ui-line-strong);border-radius:7px;background:var(--chrome);color:var(--text);font:13px var(--font-sans)}
+.dev-author-dialog #dev-source{flex:1;min-height:150px;margin-top:0;resize:none;white-space:pre;tab-size:2;font:13px/1.65 var(--font-mono,monospace);background:var(--canvas-bg)}.dev-author-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dev-author-meta>label:first-child{grid-column:1/-1}.dev-author-dialog small{font-size:10px}.dev-author-dialog aside{padding:22px;overflow-y:auto;border-left:1px solid var(--ui-line)}.dev-author-dialog fieldset{border:0;padding:0;margin:0 0 22px}.dev-author-dialog legend{font-size:12px;font-weight:700;color:var(--text);margin-bottom:12px}
+.dev-author-modes label{display:flex;align-items:flex-start;gap:9px;padding:12px;margin-bottom:8px;border:1px solid var(--ui-line);border-radius:9px;cursor:pointer}.dev-author-modes label:has(input:checked){background:var(--selected);border-color:var(--brand)}.dev-author-modes input{margin-top:3px;accent-color:var(--brand)}.dev-author-modes b{display:block;color:var(--text);font-size:13px}.dev-author-modes small{display:block;line-height:1.5;margin-top:4px;color:var(--text-2)}
+.dev-author-dialog h3{font-size:13px;margin-bottom:9px}.dev-author-dialog .dev-author-tip{font-size:11px;line-height:1.5;color:var(--text-2);margin:0 0 10px}.dev-author-range{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dev-author-dialog [data-guide]>label{margin:10px 0}.dev-author-dialog [data-step-text]{resize:vertical;max-height:150px}.dev-author-dialog [data-add-step]{width:100%;margin:4px 0 12px}.dev-author-steps{display:grid;gap:6px}.dev-author-step{display:flex;gap:4px}.dev-author-step button:first-child{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.dev-author-step button.active{border-color:var(--brand);color:var(--brand)}.dev-author-step button:last-child{font-size:10px;padding:7px}
+.dev-author-dialog [data-request]{max-height:210px;overflow:auto;border:1px solid var(--ui-line);padding:12px;border-radius:8px;background:var(--canvas-bg);font:11px/1.6 var(--font-mono,monospace);white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:12px}.dev-author-secrets{padding:12px;border:1px solid var(--brand);border-radius:8px;color:var(--text);background:var(--selected);line-height:1.6;font-size:11px;overflow-wrap:anywhere}.dev-author-dialog [hidden]{display:none!important}
+.dev-author-dialog footer{display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:14px 24px;border-top:1px solid var(--ui-line)}.dev-author-dialog [data-status]{flex:1;font-size:11px;line-height:1.5;color:var(--text-2)}.dev-author-dialog .dev-author-primary{background:var(--brand);color:#fff;border-color:var(--brand)}.dev-author-dialog .dev-author-primary:hover{filter:brightness(1.08)}
+@media(max-width:760px){.dev-author-dialog{height:94dvh}.dev-author-work{display:flex;flex-direction:column;overflow-y:auto}.dev-author-source{min-height:390px;flex-shrink:0;padding:16px}.dev-author-dialog aside{border-left:0;border-top:1px solid var(--ui-line);overflow:visible;padding:16px}.dev-author-dialog header{padding:15px 16px}.dev-author-dialog h2{font-size:21px}.dev-author-dialog footer{padding:12px 16px;flex-wrap:wrap}.dev-author-dialog [data-status]{flex-basis:100%}}