sagadeck 1.2.0

package/src/figures/diagrams.js

@@ -0,0 +1,117 @@
+// Diagramas gerados em SVG.
+//   { diagram: loop, nodes: [dados, modelo, decisão, ação], actor: in|on|out|none, at: 3 }
+//   { diagram: spectrum, stops: [HITL, HOTL, HOOTL], at: 1, left: "humano decide", right: "máquina decide" }
+//   { diagram: flow, steps: [a, b, c], highlight: 1 }
+//   { diagram: venn, a: "…", b: "…", both: "…" }
+import { esc } from "../markup.js";
+import { humanBody } from "./pictos.js";
+
+const wrap = (box, inner, cls = "") =>
+  `<svg class="pic dia ${cls}" viewBox="${box.join(" ")}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">${inner}</svg>`;
+
+function arrowDefs(id) {
+  return `<defs><marker id="${id}" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z" style="fill:var(--fg)"/></marker></defs>`;
+}
+
+let uid = 0;
+
+export function loop(o = {}) {
+  const nodes = o.nodes || ["dados", "modelo", "decisão", "ação"];
+  const n = nodes.length, cx = 300, cy = 300, r = 190;
+  const id = `ar${++uid}`;
+  const ang = (i) => (-90 + (360 / n) * i) * Math.PI / 180;
+  const pt = (a, rr = r) => [cx + rr * Math.cos(a), cy + rr * Math.sin(a)];
+  let g = arrowDefs(id);
+  const actor = o.actor || "none";
+  const at = o.at ?? n - 1; // posição do humano quando "in": entre o nó at e at+1
+  for (let i = 0; i < n; i++) {
+    const a1 = ang(i) + 0.2, a2 = ang(i + 1) - 0.2;
+    const [x1, y1] = pt(a1), [x2, y2] = pt(a2);
+    if (actor === "in" && i === at) {
+      const mid = (ang(i) + ang(i + 1)) / 2;
+      const [mx1, my1] = pt(mid - 0.2), [mx2, my2] = pt(mid + 0.2);
+      g += `<path d="M${x1} ${y1} A${r} ${r} 0 0 1 ${mx1} ${my1}" fill="none" style="stroke:var(--fg)" stroke-width="10" stroke-linecap="round"/>`;
+      g += `<path d="M${mx2} ${my2} A${r} ${r} 0 0 1 ${x2} ${y2}" fill="none" style="stroke:var(--fg)" stroke-width="10" stroke-linecap="round" marker-end="url(#${id})"/>`;
+    } else {
+      g += `<path d="M${x1} ${y1} A${r} ${r} 0 0 1 ${x2} ${y2}" fill="none" style="stroke:var(--fg)" stroke-width="10" stroke-linecap="round" marker-end="url(#${id})"/>`;
+    }
+  }
+  nodes.forEach((label, i) => {
+    const a = ang(i);
+    const [x, y] = pt(a);
+    g += `<circle cx="${x}" cy="${y}" r="17" style="fill:var(--fg)"/>`;
+    const [lx, ly] = pt(a, r + 58);
+    const anchor = Math.abs(Math.cos(a)) < 0.3 ? "middle" : Math.cos(a) > 0 ? "start" : "end";
+    const dx = anchor === "start" ? -26 : anchor === "end" ? 26 : 0;
+    g += `<text x="${lx + dx}" y="${ly + 10}" text-anchor="${anchor}" class="f-label" font-size="${o.labelSize || 30}" style="fill:var(--fg)">${esc(label)}</text>`;
+  });
+  const person = (x, y, s, faded) =>
+    `<g opacity="${faded ? 0.38 : 1}"><circle cx="${x}" cy="${y}" r="${60 * s}" style="fill:var(--hi)"/><g transform="translate(${x - 60 * s * 0.62} ${y - 60 * s * 0.86}) scale(${s * 0.62})" style="--pc:var(--on-hi);--po:var(--on-hi)">${humanBody(faded ? "sleep" : o.actorPose || "stand")}</g></g>`;
+  let box = [0, 0, 600, 600];
+  if (actor === "in") {
+    const mid = (ang(at) + ang(at + 1)) / 2;
+    const [x, y] = pt(mid);
+    g += person(x, y, 1);
+  } else if (actor === "on") {
+    g += `<line x1="${cx}" y1="${cy - r - 40}" x2="${cx}" y2="${-40}" style="stroke:var(--fg)" stroke-width="6" stroke-dasharray="14 12"/>`;
+    g += person(cx, -110, 1);
+    box = [0, -200, 600, 800];
+  } else if (actor === "out") {
+    g += `<g opacity=".4"><circle cx="720" cy="40" r="64" style="fill:var(--hi)"/><g transform="translate(662 6) scale(0.64)" style="--pc:var(--on-hi);--po:var(--on-hi)">${humanBody("sleep")}</g></g>`;
+    box = [0, -60, 820, 680];
+  }
+  return wrap(box, g, "loop");
+}
+
+export function spectrum(o = {}) {
+  const stops = o.stops || ["HITL", "HOTL", "HOOTL"];
+  const W = 1200, y = 90, x0 = 60, x1 = W - 60;
+  const n = stops.length;
+  const X = (i) => x0 + ((x1 - x0) * i) / (n - 1);
+  let g = `<line x1="${x0}" y1="${y}" x2="${x1}" y2="${y}" style="stroke:var(--line)" stroke-width="14" stroke-linecap="round"/>`;
+  stops.forEach((s, i) => {
+    g += `<circle cx="${X(i)}" cy="${y}" r="16" style="fill:var(--fg)"/>`;
+    g += `<text x="${X(i)}" y="${y + 70}" text-anchor="middle" class="f-heading" font-size="44" style="fill:var(--fg)">${esc(s)}</text>`;
+  });
+  if (o.left) g += `<text x="${x0}" y="${y - 44}" class="f-label" font-size="24" style="fill:var(--muted)">${esc(o.left)}</text>`;
+  if (o.right) g += `<text x="${x1}" y="${y - 44}" text-anchor="end" class="f-label" font-size="24" style="fill:var(--muted)">${esc(o.right)}</text>`;
+  if (o.at != null) {
+    const x = typeof o.at === "number" && o.at <= 1 && !Number.isInteger(o.at) ? x0 + (x1 - x0) * o.at : X(o.at);
+    g += `<circle class="marker" cx="${x}" cy="${y}" r="34" style="fill:var(--hi);stroke:var(--fg)" stroke-width="6"/>`;
+  }
+  return wrap([0, 0, W, 190], g, "spectrum");
+}
+
+export function flow(o = {}) {
+  const steps = o.steps || [];
+  const n = steps.length, bw = 300, gap = 90, bh = 150;
+  const W = n * bw + (n - 1) * gap;
+  const id = `ar${++uid}`;
+  let g = arrowDefs(id);
+  steps.forEach((s, i) => {
+    const x = i * (bw + gap);
+    const hl = o.highlight === i;
+    g += `<rect x="${x}" y="0" width="${bw}" height="${bh}" rx="18" style="fill:var(${hl ? "--hi" : "--surface"});stroke:var(--fg)" stroke-width="${hl ? 0 : 4}"/>`;
+    g += `<foreignObject x="${x + 16}" y="10" width="${bw - 32}" height="${bh - 20}"><div xmlns="http://www.w3.org/1999/xhtml" class="f-heading" style="height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:36px;color:var(${hl ? "--on-hi" : "--fg"})">${esc(s)}</div></foreignObject>`;
+    if (i < n - 1) g += `<line x1="${x + bw + 12}" y1="${bh / 2}" x2="${x + bw + gap - 20}" y2="${bh / 2}" style="stroke:var(--fg)" stroke-width="8" marker-end="url(#${id})"/>`;
+  });
+  return wrap([-4, -4, W + 8, bh + 8], g, "flow");
+}
+
+export function venn(o = {}) {
+  let g = `<circle cx="300" cy="260" r="220" style="fill:var(--hi)" opacity=".85"/>
+<circle cx="560" cy="260" r="220" style="fill:var(--fg)" opacity=".85"/>`;
+  g += `<text x="220" y="270" text-anchor="middle" class="f-heading" font-size="40" style="fill:var(--on-hi)">${esc(o.a || "")}</text>`;
+  g += `<text x="650" y="270" text-anchor="middle" class="f-heading" font-size="40" style="fill:var(--bg)">${esc(o.b || "")}</text>`;
+  if (o.both) g += `<text x="430" y="270" text-anchor="middle" class="f-label" font-size="26" style="fill:var(--bg)">${esc(o.both)}</text>`;
+  return wrap([60, 20, 740, 480], g, "venn");
+}
+
+export function diagram(o) {
+  const k = o.diagram;
+  if (k === "loop" || k === "cycle") return loop(o);
+  if (k === "spectrum") return spectrum(o);
+  if (k === "flow") return flow(o);
+  if (k === "venn") return venn(o);
+  throw new Error(`diagrama "${k}" desconhecido (loop | cycle | spectrum | flow | venn)`);
+}

package/src/figures/icons.js

@@ -0,0 +1,166 @@
+// Ícones: 2.100+ do Lucide (MIT), embutidos só os que o deck usa.
+// Uso no YAML:  { icon: gavel }   { icon: car, size: 120, color: hi }
+import fs from "node:fs";
+import path from "node:path";
+import { createRequire } from "node:module";
+
+import { fileURLToPath } from "node:url";
+
+const require = createRequire(import.meta.url);
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+let DIR;
+function dir() {
+  if (!DIR) {
+    // versão empacotada (pip) traz os ícones ao lado do motor; em desenvolvimento vêm do node_modules ou do engine
+    const candidates = [
+      path.join(HERE, "icons"),
+      path.join(HERE, "..", "..", "python", "sagadeck", "engine", "icons"),
+      path.join(HERE, "..", "python", "sagadeck", "engine", "icons")
+    ];
+    const found = candidates.find((p) => fs.existsSync(p));
+    if (found) {
+      DIR = found;
+    } else {
+      DIR = path.join(path.dirname(require.resolve("lucide-static/package.json")), "icons");
+    }
+  }
+  return DIR;
+}
+
+export function iconExists(name) {
+  return fs.existsSync(path.join(dir(), `${name}.svg`));
+}
+
+export function listIcons(filter) {
+  const all = fs.readdirSync(dir()).filter((f) => f.endsWith(".svg")).map((f) => f.slice(0, -4));
+  return filter ? all.filter((n) => n.includes(filter)) : all;
+}
+
+// Tabela determinística de sinônimos e termos em português para modelos de IA
+const ICON_SYNONYMS = {
+  money: "banknote", dinheiro: "banknote", cash: "banknote", moeda: "coins", moedas: "coins",
+  dollar: "dollar-sign", real: "banknote", preco: "tag", preço: "tag", custo: "wallet",
+  ai: "sparkles", ia: "sparkles", "artificial-intelligence": "brain-circuit",
+  brain: "brain", cerebro: "brain", cérebro: "brain",
+  lamp: "lightbulb", lampada: "lightbulb", lâmpada: "lightbulb", idea: "lightbulb", ideia: "lightbulb",
+  speedometer: "gauge", velocidade: "gauge", rapido: "zap", rápido: "zap", speed: "gauge",
+  "rocket-ship": "rocket", foguete: "rocket", lancamento: "rocket", lançamento: "rocket", startup: "rocket",
+  people: "users", pessoas: "users", team: "users", time: "users", equipe: "users",
+  usuarios: "users", usuários: "users", person: "user", pessoa: "user", cliente: "user",
+  security: "shield-check", seguranca: "shield-check", segurança: "shield-check", protecao: "shield", proteção: "shield",
+  lock: "lock", cadeado: "lock", chave: "key", key: "key",
+  growth: "trending-up", crescimento: "trending-up", subida: "trending-up", lucro: "trending-up",
+  drop: "trending-down", queda: "trending-down", perda: "trending-down",
+  chart: "bar-chart-2", grafico: "bar-chart-3", gráfico: "bar-chart-3", barras: "bar-chart-2",
+  pie: "pie-chart", pizza: "pie-chart", rosca: "circle",
+  check: "check-circle-2", sucesso: "check-circle-2", aprovado: "check-check", ok: "check",
+  danger: "alert-triangle", perigo: "alert-triangle", alerta: "alert-triangle", aviso: "alert-circle",
+  error: "x-circle", falha: "x-circle", erro: "alert-triangle", cancelar: "x",
+  target: "target", alvo: "target", meta: "target", objetivo: "target",
+  star: "star", estrela: "star", favorito: "star",
+  heart: "heart", coracao: "heart", coração: "heart", amor: "heart", curtir: "heart",
+  trophy: "trophy", trofeu: "trophy", troféu: "trophy", premio: "award", prêmio: "award",
+  award: "award", medalha: "award", medal: "award",
+  zap: "zap", raio: "zap", energia: "zap", eletrico: "zap", elétrico: "zap",
+  cpu: "cpu", processador: "cpu", chip: "cpu", hardware: "cpu",
+  cloud: "cloud", nuvem: "cloud", servidor: "server", server: "server",
+  database: "database", banco: "database", dados: "database", data: "database",
+  code: "code-2", codigo: "code-2", código: "code-2", software: "code-2", dev: "code-2",
+  mobile: "smartphone", celular: "smartphone", telefone: "phone", phone: "phone",
+  laptop: "laptop", computador: "laptop", notebook: "laptop", pc: "monitor",
+  globe: "globe", mundo: "globe", global: "globe", terra: "globe", web: "globe", internet: "globe",
+  search: "search", busca: "search", pesquisa: "search", lupa: "search",
+  calendar: "calendar", calendario: "calendar", calendário: "calendar", agenda: "calendar", data_hora: "clock",
+  clock: "clock", tempo: "clock", relogio: "clock", relógio: "clock", hora: "clock",
+  message: "message-square", mensagem: "message-square", chat: "message-circle", conversa: "messages-square",
+  mail: "mail", email: "mail", correio: "mail",
+  eye: "eye", olho: "eye", visao: "eye", visão: "eye",
+  file: "file-text", arquivo: "file-text", documento: "file-text",
+  folder: "folder", pasta: "folder",
+  coffee: "coffee", cafe: "coffee", café: "coffee", pausa: "coffee",
+  tool: "wrench", ferramenta: "wrench", ferramentas: "wrench",
+  setting: "settings", settings: "settings", config: "settings", configuracao: "settings", configuração: "settings",
+  sparkle: "sparkles", sparkles: "sparkles", brilho: "sparkles", magica: "sparkles", mágica: "sparkles",
+  presentation: "presentation", slide: "presentation", palestra: "presentation",
+  book: "book-open", livro: "book-open", leitura: "book-open", educacao: "graduation-cap", educação: "graduation-cap",
+  music: "music", som: "volume-2", audio: "volume-2", áudio: "volume-2", microfone: "mic", mic: "mic",
+  video: "video", camera: "camera", câmera: "camera", filme: "film",
+  gift: "gift", presente: "gift",
+  car: "car-front", carro: "car-front", veiculo: "car-front", veículo: "car-front",
+  plane: "plane", aviao: "plane", avião: "plane", viagem: "plane",
+  map: "map", mapa: "map", local: "map-pin", pin: "map-pin", gps: "map-pin",
+};
+
+function levenshtein(a, b) {
+  const m = a.length, n = b.length;
+  const d = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+  for (let i = 0; i <= m; i++) d[i][0] = i;
+  for (let j = 0; j <= n; j++) d[0][j] = j;
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost);
+    }
+  }
+  return d[m][n];
+}
+
+const warnedIcons = new Set();
+
+export function resolveIconName(rawName) {
+  if (!rawName) return "sparkles";
+  const clean = String(rawName).toLowerCase().trim().replace(/_/g, "-");
+
+  // 1. Exato
+  if (iconExists(clean)) return clean;
+
+  // 2. Sinônimo / Tradução em português
+  if (ICON_SYNONYMS[clean] && iconExists(ICON_SYNONYMS[clean])) {
+    return ICON_SYNONYMS[clean];
+  }
+
+  // 3. Prefixos ou sufixos comuns (ex: icon-name, name-icon)
+  const stripped = clean.replace(/^(icon-|ico-)/, "").replace(/(-icon|-ico)$/, "");
+  if (iconExists(stripped)) return stripped;
+  if (ICON_SYNONYMS[stripped] && iconExists(ICON_SYNONYMS[stripped])) {
+    return ICON_SYNONYMS[stripped];
+  }
+
+  // 4. Distância de Levenshtein (encontra erro de digitação como 'shiled' -> 'shield')
+  const all = listIcons();
+  let bestMatch = null;
+  let minDistance = 3; // tolerância máxima de 2 caracteres trocados
+
+  for (const ic of all) {
+    if (Math.abs(ic.length - clean.length) > 2) continue;
+    const dist = levenshtein(clean, ic);
+    if (dist < minDistance) {
+      minDistance = dist;
+      bestMatch = ic;
+      if (dist === 1) break;
+    }
+  }
+
+  if (bestMatch) return bestMatch;
+
+  // 5. Fallback gracioso para evitar crash do build — mas avisa, senão o erro passa despercebido
+  if (!warnedIcons.has(clean)) {
+    warnedIcons.add(clean);
+    console.warn(`⚠ ícone "${rawName}" não existe; usei "sparkles". Procure o nome certo com: sagadeck icons <palavra>`);
+  }
+  return "sparkles";
+}
+
+// Retorna <svg> com stroke = currentColor, para herdar a cor do tom do slide.
+export function iconSVG(name, { size = 96, stroke = 1.75, cls = "" } = {}) {
+  const resolved = resolveIconName(name);
+  const file = path.join(dir(), `${resolved}.svg`);
+
+  let svg = fs.readFileSync(file, "utf8").replace(/<!--[\s\S]*?-->/g, "").trim();
+  svg = svg
+    .replace(/\swidth="\d+"/, ` width="${size}"`)
+    .replace(/\sheight="\d+"/, ` height="${size}"`)
+    .replace(/stroke-width="[\d.]+"/, `stroke-width="${stroke}"`)
+    .replace(/class="[^"]*"/, `class="ico ${cls}"`);
+  return svg;
+}

package/src/figures/material-pictos.js

@@ -0,0 +1,20 @@
+// GERADO por scripts/vendor-pictos.mjs — não edite à mão.
+// Glifos: Material Symbols sharp (fill), @material-symbols/svg-400 0.47.5
+// Copyright Google LLC · Licença Apache-2.0 (https://www.apache.org/licenses/LICENSE-2.0)
+// Espaço de cada glifo: viewBox "0 -960 960 960".
+export const MATERIAL_GLYPHS = {
+  "man": "M420-80v-280h-80v-313h280v313h-80v280H420Zm60.08-654q-30.08 0-51.58-21.42t-21.5-51.5q0-30.08 21.42-51.58t51.5-21.5q30.08 0 51.58 21.42t21.5 51.5q0 30.08-21.42 51.58t-51.5 21.5Z",
+  "directions_walk": "m278-40 116-586-101 43v133h-61v-173l192-81q14-6 29.5-7.5T484-710q17 3 29.5 11t20.5 20l42 66q31 48 77.5 75.5T753-510v60q-70-2-123.5-30.5T533-568l-38 152 92 83v293h-60v-240l-108-98-79 338h-62Zm210.5-735.5Q467-797 467-827t21.5-51.5Q510-900 540-900t51.5 21.5Q613-857 613-827t-21.5 51.5Q570-754 540-754t-51.5-21.5Z",
+  "directions_run": "M535-40v-239l-108-99-42 188-265-55 11-56 199 40 73-369-100 47v134h-60v-175l164-69q32-14 45.5-17.5T480-714q20 0 35.5 8.5T542-680l42 67q26 42 71 73t105 31v60q-67 0-119.5-31T543-573l-39 158 91 84v291h-60Zm-46.5-735.5Q467-797 467-827t21.5-51.5Q510-900 540-900t51.5 21.5Q613-857 613-827t-21.5 51.5Q570-754 540-754t-51.5-21.5Z",
+  "airline_seat_recline_normal": "M240-171v-521h60v461h320v60H240Zm198-547q-34 0-57.5-23.5T357-799q0-34 23.5-57.5T438-880q34 0 57.5 23.5T519-799q0 34-23.5 57.5T438-718ZM660-80v-191H340v-302q0-40.74 28.39-68.87Q396.77-670 437.89-670q41.11 0 69.61 28.13T536-573v202h184v291h-60Z",
+  "airline_seat_recline_extra": "M300-740q-29 0-49-20t-20-49q0-29 20-50t49-21q29 0 50 21t21 50q0 29-21 49t-50 20Zm-80 560L115-705h63l87 465h292v60H220ZM797-80 679-285H303l-57-303q-9-46 23-81.5t80-35.5q35 0 60 22.5t32 56.5l46 240h202l161 276-53 30Z",
+  "follow_the_signs": "M388-754q-30 0-51.5-21.5T315-827q0-30 21.5-51.5T388-900q30 0 51.5 21.5T461-827q0 30-21.5 51.5T388-754ZM126-40l117-589-103 46v133H80v-173l192-81q30-13 62-6.5t48 31.5l42 66q30 48 75.5 75.5T601-510v60q-66 0-119.5-30.5T384-572l-41 156 92 83v293h-60v-240l-108-98-79 338h-62Zm554 0v-565H530v-275h350v275H730v565h-50Zm43-610 92-92-92-92-36 36 31 31H587v50h131l-31 31 36 36Z",
+  "emoji_people": "M368-80v-538q-95-20-152.5-85.5T158-856h60q0 78 60.5 131T426-672h100q38 0 56 6.5t46 30.5l184 172-43 43-185-174v514h-60v-255h-96v255h-60Zm56.5-675.5Q403-777 403-807t21.5-51.5Q446-880 476-880t51.5 21.5Q549-837 549-807t-21.5 51.5Q506-734 476-734t-51.5-21.5Z",
+  "accessibility": "M428.5-755.42q-21.5-21.42-21.5-51.5t21.42-51.58q21.42-21.5 51.5-21.5t51.58 21.42q21.5 21.42 21.5 51.5t-21.42 51.58q-21.42 21.5-51.5 21.5t-51.58-21.42ZM372-80v-533H120v-60h720v60H588v533h-60v-260h-96v260h-60Z",
+  "accessibility_new": "M428.5-755.5Q407-777 407-807t21.5-51.5Q450-880 480-880t51.5 21.5Q553-837 553-807t-21.5 51.5Q510-734 480-734t-51.5-21.5ZM373-80v-533q-68-5-131.5-14T120-650l15-60q85 20 169 28.5t176 8.5q92 0 176-8.5T825-710l15 60q-58 14-121.5 23T587-613v533h-60v-260h-94v260h-60Z",
+  "hotel": "M40-200v-585h60v394h353v-309h467v500h-60v-131H100v131H40Zm154.5-279.5Q164-510 164-555t30.5-75.5Q225-661 270-661t75.5 30.5Q376-600 376-555t-30.5 75.5Q315-449 270-449t-75.5-30.5Zm108-43Q316-536 316-555t-13.5-32.5Q289-601 270-601t-32.5 13.5Q224-574 224-555t13.5 32.5Q251-509 270-509t32.5-13.5Zm-65 0Q224-536 224-555t13.5-32.5Q251-601 270-601t32.5 13.5Q316-574 316-555t-13.5 32.5Q289-509 270-509t-32.5-13.5Z",
+  "call": "M780-120q-108 0-225-56.5T336-335Q233-437 176.5-554T120-780v-60h215l40 189-117 119q28 45 57.5 83.5T377-378q36 36 77 67.5t88 57.5l117-121 181 39v215h-60Z",
+  "visibility": "M600.5-379.5Q650-429 650-500t-49.5-120.5Q551-670 480-670t-120.5 49.5Q310-571 310-500t49.5 120.5Q409-330 480-330t120.5-49.5Zm-200-41Q368-453 368-500t32.5-79.5Q433-612 480-612t79.5 32.5Q592-547 592-500t-32.5 79.5Q527-388 480-388t-79.5-32.5ZM216-283Q98-366 40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83q-146 0-264-83Z",
+  "question_mark": "M431-330q1-72 16.5-105t58.5-72q42-38 64.5-70.5T593-647q0-45-30-75t-84-30q-52 0-80 29.5T358-661l-84-37q22-59 74.5-100.5T479-840q100 0 154 55.5T687-651q0 48-20.5 87T601-482q-49 47-59 72t-11 80H431Zm48 250q-29 0-49.5-20.5T409-150q0-29 20.5-49.5T479-220q29 0 49.5 20.5T549-150q0 29-20.5 49.5T479-80Z",
+  "approval": "M160-80v-320h640v320H160Zm60-160h520v-100H220v100Zm260-160L281-680q0-83 58.21-141.5T480-880q82.58 0 140.79 58.5Q679-763 679-680L480-400Z"
+};

package/src/figures/pictos.js

@@ -0,0 +1,255 @@
+// Pictogramas (estilo sinalização), gerados na hora em SVG. A pessoa (`human`, e dentro de crowd/scene)
+// usa glifos do Material Symbols (Apache-2.0) — veja material-pictos.js e scripts/vendor-pictos.mjs.
+// Cores seguem o tom do slide via variáveis CSS:
+//   --pc  cor da figura (padrão: --fg)      --po  cor dos objetos (padrão: --fg)
+//   classes: pc (fill figura), pcs (stroke figura), po/pos (objetos), ph (fill --hi),
+//            pe (fill --em), pm (fill --muted), pb (fill --bg), pl (fill --line)
+//
+// YAML:
+//   { picto: human, pose: walk }                     poses: veja POSES
+//   { picto: human, pose: phone, sign: circle }      placa atrás: circle|square|triangle
+//   { picto: machine }
+//   { picto: scene, name: car-top, driver: machine, passenger: human, back: sleep }
+//   { picto: scene, name: console, screen: "START" }
+//   { picto: crowd, count: 20, highlight: 3 }
+
+import { MATERIAL_GLYPHS } from "./material-pictos.js";
+
+// Poses de { picto: human }: cada uma é um glifo de pessoa do Material Symbols (material-pictos.js),
+// às vezes com um objeto do mesmo estilo (prop) — o set não tem pessoa falando ao celular, olhando,
+// pensando ou carimbando. prop: [glifo, x, y, lado] no espaço do glifo (viewBox 0 -960 960 960).
+// box: quadro da pose (padrão 120 x 160; "sleep" é deitado).
+export const POSES = {
+  stand: { glyph: "man" },
+  walk: { glyph: "directions_walk" },
+  run: { glyph: "directions_run" },
+  sit: { glyph: "airline_seat_recline_normal" },
+  drive: { glyph: "airline_seat_recline_extra" },
+  phone: { glyph: "man", prop: ["call", 590, -930, 230] },
+  watch: { glyph: "man", prop: ["visibility", 600, -1000, 270] },
+  point: { glyph: "follow_the_signs" },
+  raise: { glyph: "emoji_people" },
+  shrug: { glyph: "accessibility" },
+  think: { glyph: "man", prop: ["question_mark", 590, -1010, 260] },
+  stamp: { glyph: "emoji_people", prop: ["approval", 50, -975, 210] },
+  cheer: { glyph: "accessibility_new" },
+  sleep: { glyph: "hotel", box: [0, 0, 180, 110] },
+};
+
+// Nomes alternativos (português e sinônimos) -> pose. Comparação sem acento, com hífens.
+const POSE_ALIASES = {
+  "em-pe": "stand", parado: "stand", "de-pe": "stand", standing: "stand",
+  andando: "walk", caminhando: "walk", walking: "walk",
+  correndo: "run", running: "run",
+  sentado: "sit", sentada: "sit", sitting: "sit", seated: "sit",
+  dirigindo: "drive", driving: "drive", motorista: "drive",
+  telefone: "phone", celular: "phone", ligando: "phone", "no-telefone": "phone", "no-celular": "phone", call: "phone",
+  olhando: "watch", observando: "watch", assistindo: "watch", vigiando: "watch", looking: "watch",
+  apontando: "point", pointing: "point",
+  "mao-levantada": "raise", "levantando-a-mao": "raise", acenando: "raise", wave: "raise", waving: "raise",
+  "dando-de-ombros": "shrug", "de-ombros": "shrug", "bracos-abertos": "shrug",
+  pensando: "think", duvida: "think", thinking: "think",
+  carimbando: "stamp", aprovando: "stamp", carimbo: "stamp",
+  comemorando: "cheer", celebrando: "cheer", vibrando: "cheer", celebrate: "cheer",
+  dormindo: "sleep", deitado: "sleep", sleeping: "sleep",
+};
+const warnedPoses = new Set();
+
+// Nome de pose como veio do YAML -> pose conhecida. Desconhecida vira "stand", com aviso (uma vez por nome).
+export function resolvePose(name) {
+  if (!name) return "stand";
+  if (POSES[name]) return name;
+  const key = String(name).normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/[\s_]+/g, "-");
+  if (POSES[key]) return key;
+  if (POSE_ALIASES[key]) return POSE_ALIASES[key];
+  if (!warnedPoses.has(name)) {
+    warnedPoses.add(name);
+    console.warn(`⚠ pose "${name}" não existe; usei "stand". Poses: ${Object.keys(POSES).join(", ")} (ou em português: sentado, andando, pensando…)`);
+  }
+  return "stand";
+}
+
+// Quadrado onde o glifo é desenhado, centralizado no quadro da pose.
+export function glyphSquare(poseName = "stand") {
+  const P = POSES[resolvePose(poseName)];
+  const [x, y, w, h] = P.box || [0, -8, 120, 168];
+  const side = Math.max(w, h) * (P.box ? 1 : 0.95);
+  return [x + (w - side) / 2, y + (h - side) / 2, side, side];
+}
+
+export function humanBody(poseName = "stand") {
+  const P = POSES[resolvePose(poseName)];
+  const [x, y, w, h] = glyphSquare(poseName);
+  let inner = `<path class="pc" d="${MATERIAL_GLYPHS[P.glyph]}"/>`;
+  if (P.prop) {
+    const [name, px, py, side] = P.prop;
+    inner += `<svg x="${px}" y="${py}" width="${side}" height="${side}" viewBox="0 -960 960 960" overflow="visible"><path class="po" d="${MATERIAL_GLYPHS[name]}"/></svg>`;
+  }
+  return `<svg x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${w.toFixed(1)}" height="${h.toFixed(1)}" viewBox="0 -960 960 960" overflow="visible">${inner}</svg>`;
+}
+
+function signPlate(kind, box) {
+  const [x, y, w, h] = box;
+  const cx = x + w / 2, cy = y + h / 2, r = Math.max(w, h) * 0.62;
+  if (kind === "circle") return `<circle class="ph" cx="${cx}" cy="${cy}" r="${r}"/>`;
+  if (kind === "square") return `<rect class="ph" x="${cx - r}" y="${cy - r}" width="${2 * r}" height="${2 * r}" rx="${r * 0.18}"/>`;
+  if (kind === "triangle") {
+    const R = r * 1.3;
+    return `<path class="ph" d="M${cx} ${cy - R * 0.95} L${cx + R} ${cy + R * 0.78} L${cx - R} ${cy + R * 0.78} Z" stroke-linejoin="round" stroke-width="${R * 0.12}" style="stroke:var(--hi)"/><path d="M${cx} ${cy - R * 0.72} L${cx + R * 0.8} ${cy + R * 0.64} L${cx - R * 0.8} ${cy + R * 0.64} Z" fill="none" style="stroke:var(--pc)" stroke-width="${R * 0.07}" stroke-linejoin="round"/>`;
+  }
+  return "";
+}
+
+export function machineBody() {
+  return `<line class="pos" x1="60" y1="30" x2="60" y2="12" stroke-width="7" stroke-linecap="round"/>
+<circle class="po" cx="60" cy="10" r="7"/>
+<rect class="po" x="14" y="30" width="92" height="92" rx="22"/>
+<circle class="pb" cx="60" cy="76" r="25"/>
+<circle class="ph" cx="60" cy="76" r="11"/>
+<rect class="po" x="30" y="128" width="60" height="14" rx="7"/>`;
+}
+
+function wrap(inner, box, { w, h, cls = "", style = "" } = {}) {
+  const [x, y, bw, bh] = box;
+  return `<svg class="pic ${cls}" viewBox="${x} ${y} ${bw} ${bh}" ${w ? `width="${w}"` : ""} ${h ? `height="${h}"` : ""} style="${style}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">${inner}</svg>`;
+}
+
+export function colorStyle(o = {}) {
+  const role = (v, d) => {
+    if (!v) return `var(--${d})`;
+    if (/^[0-9a-f]{6}$/i.test(v)) return `#${v}`;
+    if (v.startsWith("#")) return v;
+    return `var(--${v})`;
+  };
+  return `--pc:${role(o.color, "fg")};--po:${role(o.object, "fg")};`;
+}
+
+export function human(o = {}) {
+  const box = glyphSquare(o.pose);
+  let inner = "";
+  if (o.sign) {
+    inner += signPlate(o.sign, box);
+    return wrap(inner + humanBody(o.pose), plateBox(o.sign, box), { style: colorStyle({ color: o.color || "on-hi", object: o.object || "on-hi" }) });
+  }
+  return wrap(humanBody(o.pose), box, { style: colorStyle(o) });
+}
+
+// caixa que contém a placa inteira (círculo/quadrado/triângulo)
+function plateBox(kind, box) {
+  const [x, y, w, h] = box;
+  const cx = x + w / 2, cy = y + h / 2, r = Math.max(w, h) * 0.62;
+  const R = kind === "triangle" ? r * 1.3 * 1.08 : r * 1.02;
+  const top = kind === "triangle" ? cy - R * 0.95 : cy - R, bottom = kind === "triangle" ? cy + R * 0.8 : cy + R;
+  return [cx - R, top, 2 * R, bottom - top];
+}
+
+export function machine(o = {}) {
+  let inner = "";
+  const box = [0, 0, 120, 150];
+  if (o.sign) inner += signPlate(o.sign, box);
+  return wrap(inner + machineBody(), o.sign ? plateBox(o.sign, box) : box, { style: colorStyle(o.sign ? { color: "on-hi", object: o.object || "on-hi" } : o) });
+}
+
+// Vários bonequinhos em grade; `highlight` primeiros ficam na cor --hi (ou --em).
+export function crowd(o = {}) {
+  const n = o.count || 20, cols = o.cols || Math.min(n, 10), hl = o.highlight || 0;
+  const rows = Math.ceil(n / cols), cw = 70, chh = 110;
+  let inner = "";
+  for (let i = 0; i < n; i++) {
+    const x = (i % cols) * cw, y = Math.floor(i / cols) * chh;
+    const on = i < hl;
+    inner += `<g transform="translate(${x} ${y}) scale(0.55)" class="${on ? "crowd-on" : "crowd-off"}" style="--pc:${on ? `var(--${o.hiColor || "hi"})` : "var(--muted)"}">${humanBody(o.pose || "stand")}</g>`;
+  }
+  return wrap(inner, [-4, -8, cols * cw, rows * chh], { style: colorStyle(o) });
+}
+
+// ---------- cenas ----------
+const SCENES = {
+  // Mesa de controle com monitor (ex.: Petrov). screen: texto que aparece na tela.
+  console(o) {
+    const scr = o.screen ?? "";
+    return [[0, 0, 420, 280], `
+      <rect class="po" x="0" y="196" width="420" height="12" rx="4"/>
+      <rect class="po" x="30" y="208" width="12" height="70"/><rect class="po" x="378" y="208" width="12" height="70"/>
+      <rect class="po" x="196" y="30" width="200" height="140" rx="10"/>
+      <rect class="${o.alarm ? "blink" : "pb"}" ${o.alarm ? 'style="fill:var(--c-alert)"' : ""} x="208" y="42" width="176" height="116" rx="4"/>
+      ${scr ? `<text x="296" y="${108 + (o.screenSize || 30) / 3}" text-anchor="middle" class="f-display" font-size="${o.screenSize || 30}" style="letter-spacing:.06em;fill:${o.alarm ? "#fff" : "var(--pc)"}">${scr}</text>` : ""}
+      <rect class="po" x="286" y="170" width="20" height="28"/>
+      <g transform="translate(40 52) scale(1)">${humanBody("sit")}</g>`];
+  },
+  // Pessoa em uma mesa com papéis (analista)
+  desk(o) {
+    return [[0, 0, 300, 260], `
+      <rect class="po" x="110" y="150" width="190" height="12" rx="4"/>
+      <rect class="po" x="130" y="162" width="10" height="92"/><rect class="po" x="270" y="162" width="10" height="92"/>
+      <rect class="pm" x="${o.laptop === false ? 190 : 170}" y="118" width="80" height="30" rx="3" transform="skewX(-12)"/>
+      ${o.papers ? `<rect class="pl" x="236" y="128" width="46" height="22" rx="2"/><rect class="pl" x="240" y="120" width="46" height="22" rx="2"/>` : ""}
+      <g transform="translate(40 18)">${humanBody("sit")}</g>`];
+  },
+  // Carro visto de cima. driver/passenger: human|human-watch|human-phone|machine|none ; back: sleep|human|none ; button: true
+  "car-top"(o) {
+    const seat = (x, y, w, h) => `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="16" style="fill:var(--line)" opacity=".7"/>`;
+    const headTop = (cx, cy) => `<ellipse cx="${cx}" cy="${cy + 16}" rx="36" ry="17" style="fill:var(--fg)"/><circle cx="${cx}" cy="${cy}" r="23" style="fill:var(--hi);stroke:var(--fg)" stroke-width="5"/>`;
+    const machineTop = (cx, cy) => `<rect class="po" x="${cx - 32}" y="${cy - 32}" width="64" height="64" rx="15"/><circle class="pb" cx="${cx}" cy="${cy}" r="15"/><circle class="ph" cx="${cx}" cy="${cy}" r="6.5"/>`;
+    const arms = (cx, cy) => `<path d="M${cx - 28} ${cy + 6} L${cx - 22} ${cy - 56} M${cx + 28} ${cy + 6} L${cx + 22} ${cy - 56}" style="stroke:var(--fg)" stroke-width="10" stroke-linecap="round"/>`;
+    const occ = (who, cx, cy, isDriver) => {
+      if (who === "human") return (isDriver ? arms(cx, cy) : "") + headTop(cx, cy);
+      if (who === "human-watch") return `<path d="M${cx + 24} ${cy + 4} L${cx + 4} ${cy - 76}" style="stroke:var(--fg)" stroke-width="10" stroke-linecap="round"/>` + headTop(cx, cy);
+      if (who === "human-phone") return headTop(cx, cy) + `<rect x="${cx - 11}" y="${cy + 30}" width="22" height="30" rx="5" style="fill:var(--fg)"/>`;
+      if (who === "machine") return (isDriver ? arms(cx, cy) : "") + machineTop(cx, cy);
+      return "";
+    };
+    const back = o.back === "sleep"
+      ? `<ellipse cx="172" cy="352" rx="62" ry="19" style="fill:var(--fg)"/><circle cx="96" cy="350" r="23" style="fill:var(--hi);stroke:var(--fg)" stroke-width="5"/><text x="196" y="318" class="f-display" style="fill:var(--fg)" font-size="38">Z</text><text x="226" y="296" class="f-display" style="fill:var(--fg)" font-size="26">z</text>`
+      : o.back === "human" ? headTop(150, 345) : "";
+    return [[0, 0, 300, 470], `
+      <rect x="26" y="8" width="248" height="454" rx="84" style="fill:var(--surface);stroke:var(--fg)" stroke-width="9"/>
+      <path d="M64 100 Q150 76 236 100 L220 136 Q150 122 80 136 Z" style="fill:var(--fg)" opacity=".28"/>
+      ${seat(64, 196, 82, 84)}${seat(154, 196, 82, 84)}${seat(64, 306, 172, 96)}
+      <rect x="68" y="146" width="74" height="16" rx="8" style="fill:var(--fg)"/>
+      ${o.button ? `<circle cx="196" cy="146" r="17" style="fill:var(--c-alert, var(--em))"/>` : ""}
+      ${occ(o.driver, 105, 236, true)}${occ(o.passenger, 195, 236, false)}${back}`];
+  },
+  // Juiz atrás da bancada com martelo
+  judge(o) {
+    return [[0, 0, 320, 260], `
+      <g transform="translate(100 6)">${humanBody("sit")}</g>
+      <rect class="po" x="40" y="118" width="240" height="140" rx="6"/>
+      <rect class="pb" x="60" y="140" width="200" height="8" rx="4" opacity=".25"/>
+      <g transform="rotate(-30 236 96)"><rect class="po" x="222" y="70" width="34" height="22" rx="4"/><rect class="po" x="236" y="90" width="7" height="40" rx="3"/></g>`];
+  },
+  // Elevador com pessoa e botão
+  elevator(o) {
+    return [[0, 0, 300, 300], `
+      <rect x="20" y="10" width="200" height="280" rx="8" fill="none" style="stroke:var(--fg)" stroke-width="10"/>
+      <line x1="120" y1="16" x2="120" y2="284" style="stroke:var(--line)" stroke-width="4"/>
+      <g transform="translate(62 104) scale(1.05)">${humanBody("stand")}</g>
+      <rect x="236" y="96" width="50" height="120" rx="10" style="fill:var(--surface);stroke:var(--fg)" stroke-width="5"/>
+      <circle cx="261" cy="126" r="11" style="fill:var(--muted)"/><circle cx="261" cy="156" r="11" style="fill:var(--muted)"/>
+      <circle cx="261" cy="190" r="15" class="${o.button === false ? "pm" : "pe"}"/>`];
+  },
+  // Duas pessoas, lado a lado, cada uma numa mesa (comparação de julgamentos)
+  pair(o) {
+    return [[0, 0, 560, 260], `
+      <g transform="translate(0 0)">${SCENES.desk({ papers: true })[1]}</g>
+      <g transform="translate(270 0)">${SCENES.desk({ papers: true })[1]}</g>`];
+  },
+};
+
+export function scene(o = {}) {
+  const fn = SCENES[o.name];
+  if (!fn) throw new Error(`Cena "${o.name}" não existe. Disponíveis: ${Object.keys(SCENES).join(", ")}`);
+  const [box, inner] = fn(o);
+  return wrap(inner, box, { style: colorStyle(o) });
+}
+
+export function picto(o) {
+  const k = o.picto;
+  if (k === "human") return human(o);
+  if (k === "machine" || k === "robot") return machine(o);
+  if (k === "crowd") return crowd(o);
+  if (k === "scene") return scene(o);
+  throw new Error(`picto "${k}" desconhecido (use human | machine | crowd | scene)`);
+}
+
+export const SCENE_NAMES = Object.keys(SCENES);