plotagents 0.5.0 → 0.7.0

package/src/index.js

@@ -3,7 +3,7 @@
 //   import { plot } from 'plotagents';
 //   const svg = plot({ data, x: 'region', y: 'ventas', title: 'Biobío lidera las ventas' });
 //
-import { getTheme, themeFor, themes, palettes, ramps, colorMap, fontSpec, FONT_CSS } from './theme.js';
+import { getTheme, themeFor, themes, palettes, ramps, colorMap, fontSpec, deepMerge, registerTheme, isColor, FONT_CSS } from './theme.js';
 import { withContext } from './context.js';
 import { validatePalette } from './palette.js';
 import { bar } from './charts/bar.js';
@@ -20,8 +20,11 @@ import { network } from './charts/network.js';
 import { chord } from './charts/chord.js';
 import { pyramid } from './charts/pyramid.js';
 import { flowchart } from './charts/flowchart.js';
+import { gantt } from './charts/gantt.js';
+import { wordcloud, countWords } from './charts/wordcloud.js';
 import { choropleth, symbolMap } from './charts/choropleth.js';
-import { registerGeo, getGeo, registeredGeo } from './geo/registry.js';
+import { pointmap, embedTiles, TILE_PROVIDERS } from './charts/pointmap.js';
+import { registerGeo, getGeo, registeredGeo, toFeatureCollection } from './geo/registry.js';
 // Mapas incluidos (Chile por regiones, estados de EE. UU. y países del mundo): listos sin importar nada más.
 // El bundle del navegador los separa en dist/plotagents-geo.js.
 import './geo/chile.js';
@@ -35,11 +38,13 @@ import { facet } from './facet.js';
 import { parseDate } from './format.js';
 import { inferType, TYPES, ALIASES, normalizeType } from './infer.js';
 import { lint, _setProbe } from './lint.js';
-import { schema, toolDefinition } from './schema.js';
+import { schema, toolDefinition, dashboardSchema } from './schema.js';
 import { attach, attachSource } from './interact.js';
-import { render, _bind } from './runtime.js';
+import { render, _bind, loadGeo } from './runtime.js';
+import { dashboard, renderDashboard, planDashboard, lintDashboard, safeDashboard, mountDashboard, packRows, balancedRows, _bindDashboard } from './dashboard.js';
 import { makeFormat, formatNumber, formatCompact } from './format.js';
 import { esc } from './svg.js';
+import { resolveColorScale, colorScaleNames, interpolate as interpolateColor, COLORMAPS, QUALITATIVE } from './colorscales.js';
 
 const RENDERERS = {
   bar: (s, t) => bar(s, t),
@@ -72,8 +77,11 @@ const RENDERERS = {
   chord: (s, t) => chord(s, t),
   pyramid: (s, t) => pyramid(s, t),
   flowchart: (s, t) => flowchart(s, t),
+  gantt: (s, t) => gantt(s, t),
+  wordcloud: (s, t) => wordcloud(s, t),
   choropleth: (s, t) => choropleth(s, t),
   symbolmap: (s, t) => symbolMap(s, t),
+  pointmap: (s, t) => pointmap(s, t),
 };
 
 
@@ -82,6 +90,8 @@ const RENDERERS = {
 export function resolve(spec = {}) {
   if (!spec || typeof spec !== 'object') throw new PlotError('El spec debe ser un objeto.', 'plot({ data: [...], x: "campo", y: "campo" })');
   const s = withDefaults(spec);
+  // refLines / annotations: un objeto suelto vale como lista de uno.
+  for (const k of ['refLines', 'annotations']) if (s[k] != null && !Array.isArray(s[k]) && typeof s[k] === 'object') s[k] = [s[k]];
   if (s.color && !s.series && typeof s.color === 'string' && !s.color.startsWith('#')) s.series = s.color;
   let type = s.type && s.type !== 'auto' ? String(s.type).toLowerCase() : null;
   if (type) {
@@ -90,11 +100,21 @@ export function resolve(spec = {}) {
     for (const [k, v] of Object.entries(extra)) if (s[k] === undefined) s[k] = v;
   }
   if (!type) {
-    const data = s.items ? [] : ensureData(s);
+    const data = s.items || (!s.data && (typeof s.text === 'string' || Array.isArray(s.text))) ? [] : ensureData(s);
     type = inferType(s, data);
   }
   if (!RENDERERS[type]) throw new PlotError(`Tipo de gráfico "${s.type}" no soportado.`, `Usa uno de: ${TYPES.join(', ')} o "auto".`);
   s.type = type;
+  // Colormap divergente (RdBu, coolwarm…): centrada en 0 si los datos lo cruzan; si no, en el medio.
+  const cs = resolveColorScale(s.colorScale ?? s.cmap ?? s.colormap);
+  if (cs && cs.kind === 'diverging' && s.midpoint === undefined && s.diverging === undefined) {
+    const vf = typeof s.colorScale === 'object' && s.colorScale.mid !== undefined ? null : s.value;
+    if (typeof s.colorScale === 'object' && s.colorScale?.mid !== undefined) s.midpoint = +s.colorScale.mid;
+    else if (vf && Array.isArray(s.data) && s.data.length && typeof s.data[0] === 'object') {
+      const vs = s.data.map((r) => num(r[vf])).filter(Number.isFinite);
+      if (vs.length) { let lo = Infinity, hi = -Infinity; for (const v of vs) { if (v < lo) lo = v; if (v > hi) hi = v; } s.midpoint = lo < 0 && hi > 0 ? 0 : (lo + hi) / 2; }
+    } else s.diverging = true;
+  }
   return s;
 }
 
@@ -105,6 +125,7 @@ export function resolve(spec = {}) {
 export function plot(spec) {
   let s = resolve(spec);
   s = applyTime(s);
+  s = applyExclude(s);
   const theme = themeFor(s);
   const textScale = Math.max(0.5, Math.min(4, +(s.textScale ?? s.fontScale ?? s.labelScale ?? 1) || 1));
   return withContext({ textScale }, () => {
@@ -131,7 +152,12 @@ export function configure(options) {
 
 function withDefaults(spec) {
   const s = { ...DEFAULTS, ...spec };
-  if (DEFAULTS.theme && typeof DEFAULTS.theme === 'object' && spec.theme && typeof spec.theme === 'object') s.theme = { ...DEFAULTS.theme, ...spec.theme };
+  // Colores fijados por entidad: solo colores CSS válidos (viajan a atributos y al tooltip).
+  if (s.colors && typeof s.colors === 'object') s.colors = Object.fromEntries(Object.entries(s.colors).filter(([, c]) => isColor(c)));
+  // Tema global + tema del spec: el del spec se fusiona en profundidad sobre el global.
+  if (DEFAULTS.theme && spec.theme && typeof spec.theme === 'object' && spec.theme.extends === undefined) {
+    s.theme = typeof DEFAULTS.theme === 'string' ? { ...spec.theme, extends: DEFAULTS.theme } : deepMerge(DEFAULTS.theme, spec.theme);
+  }
   // `font`: atajo de theme.font (familia + URL para cargarla).
   const f = fontSpec(s.font);
   if (f) {
@@ -173,6 +199,37 @@ function applyTime(s) {
   return { ...s, data, colors: stableColors(s, all), subtitle: s.subtitle ? `${s.subtitle} · ${label}` : label, _time: { field: s.time, value: cur, values: vals }, _prev };
 }
 
+/** Campo que define las entradas de la leyenda (series, primer nivel, grupo…). */
+function legendField(s) {
+  if (Array.isArray(s.path) && s.path.length) return s.path[0];
+  return s.series ?? s.hue ?? s.group ?? (['donut', 'pie'].includes(s.type) ? s.label ?? s.x : null) ?? (s.type === 'treemap' || s.type === 'sunburst' ? s.label ?? s.x : null);
+}
+
+/**
+ * `exclude: ["Maule"]` (o shift + clic en la leyenda): quita esas entradas y
+ * recalcula ejes, participaciones y layout con lo que queda. Los colores no
+ * se mueven y las entradas excluidas siguen en la leyenda, apagadas.
+ */
+function applyExclude(s) {
+  const ex = s.exclude == null || s.exclude === false ? [] : [].concat(s.exclude).map(String);
+  if (!ex.length) return s;
+  // Tabla ancha: y: ["ingresos", "costos"] → se excluyen columnas.
+  if (Array.isArray(s.y) && !s.series && !s.hue) {
+    const keep = s.y.filter((k) => !ex.includes(String(k)));
+    if (!keep.length || keep.length === s.y.length) return s;
+    const cmap = colorMap(s.y, themeFor(s), s.colors);
+    return { ...s, y: keep, colors: { ...Object.fromEntries(cmap), ...(s.colors || {}) }, _excluded: s.y.filter((k) => ex.includes(String(k))) };
+  }
+  const f = legendField(s);
+  if (!f || s.items) return s;
+  const all = ensureData(s);
+  if (!all.length || !(f in all[0])) return s;
+  const keep = all.filter((r) => !ex.includes(String(r[f])));
+  if (!keep.length || keep.length === all.length) return s;
+  const present = new Set(all.map((r) => String(r[f])));
+  return { ...s, data: keep, colors: { ...stableColors(s, all), ...(s.colors || {}) }, _excluded: ex.filter((v) => present.has(v)) };
+}
+
 /**
  * Colores fijos por entidad a lo largo de TODOS los periodos: al mover el
  * slider, "Minería" sigue siendo índigo aunque cambie su tamaño o su orden.
@@ -200,7 +257,8 @@ export function safePlot(spec) {
   const report = lint(spec || {});
   try {
     const svg = plot(spec);
-    return { ok: true, svg, type: report.type, description: describeSvg(svg), errors: [], warnings: report.warnings, suggestions: report.suggestions };
+    // Se dibujó (con valores de respaldo), pero los errores de lint igual se devuelven: ok = sin errores.
+    return { ok: report.errors.length === 0, svg, type: report.type, description: describeSvg(svg), errors: report.errors, warnings: report.warnings, suggestions: report.suggestions };
   } catch (e) {
     const errors = report.errors.length ? report.errors : [{ code: 'render', message: e.message.split('\n')[0], fix: e.hint }];
     return { ok: false, svg: null, type: report.type, description: '', errors, warnings: report.warnings, suggestions: report.suggestions };
@@ -224,9 +282,11 @@ function describeSvg(svg) {
  */
 export function toHTML(specs, { title = 'Gráficos', lang = 'es', columns = 1 } = {}) {
   const list = Array.isArray(specs) ? specs : [specs];
-  const dark = list.every((s) => themeFor(s).mode === 'dark');
-  const bg = dark ? '#0B0F2B' : '#FCFBF9';
-  const needsGeo = list.some((s) => { try { return ['choropleth', 'symbolmap'].includes(resolve(s).type); } catch { return false; } });
+  const themesOf = list.map((s) => themeFor(withDefaults(s)));
+  const dark = themesOf.every((t) => t.mode === 'dark');
+  // Fondo de la página = fondo del tema (también uno global de configure()).
+  const bg = themesOf.every((t) => t.surface === themesOf[0].surface) ? themesOf[0].surface : dark ? '#0B0F2B' : '#FCFBF9';
+  const needsGeo = list.some((s) => { try { return ['choropleth', 'symbolmap', 'pointmap'].includes(resolve(s).type); } catch { return false; } });
   const bundle = bundleSource() && (needsGeo ? bundleSource() + '\n' + (bundleSource('plotagents-geo.js') || '') : bundleSource());
   const safeJSON = (o) => JSON.stringify(o).replace(/</g, '\\u003c');
   const charts = list.map((s, i) => `<figure class="pa" id="pa-${i}">${plot(s)}</figure>` + (bundle ? `<script type="application/json" id="pa-spec-${i}">${safeJSON(s)}</script>` : '')).join('\n');
@@ -263,9 +323,14 @@ export function bundleSource(file = 'plotagents.js') {
 }
 
 _bind(plot, resolve);
+_bindDashboard({ plot, resolve, lint, bundleSource, resolveDefaults: withDefaults });
 _setProbe((s) => plot(s));
 export { render };
 
-export { RENDERERS, ALIASES, registerGeo, getGeo, registeredGeo };
+export { countWords, dashboardSchema };
+export { resolveColorScale, colorScaleNames, interpolateColor, COLORMAPS, QUALITATIVE };
+export { dashboard, renderDashboard, planDashboard, lintDashboard, safeDashboard, mountDashboard, packRows, balancedRows };
+export { RENDERERS, ALIASES, registerGeo, getGeo, registeredGeo, toFeatureCollection, loadGeo };
+export { registerTheme, withDefaults as resolveDefaults, embedTiles, TILE_PROVIDERS };
 export { lint, schema, toolDefinition, themes, palettes, ramps, validatePalette, getTheme, themeFor, attach, PlotError, TYPES, squarify, makeFormat, formatNumber, formatCompact };
 export default plot;

package/src/infer.js

@@ -1,7 +1,7 @@
 // Elige el tipo de gráfico cuando el agente no lo indica (type: "auto").
 import { fieldsOf, fieldKind } from './data.js';
 
-export const TYPES = ['bar', 'column', 'count', 'line', 'area', 'scatter', 'bubble', 'treemap', 'sunburst', 'donut', 'pie', 'heatmap', 'sankey', 'kpi', 'hist', 'kde', 'ecdf', 'regplot', 'residplot', 'jointplot', 'box', 'violin', 'strip', 'swarm', 'point', 'radar', 'network', 'chord', 'pyramid', 'flowchart', 'choropleth', 'symbolmap'];
+export const TYPES = ['bar', 'column', 'count', 'line', 'area', 'scatter', 'bubble', 'treemap', 'sunburst', 'donut', 'pie', 'heatmap', 'sankey', 'kpi', 'hist', 'kde', 'ecdf', 'regplot', 'residplot', 'jointplot', 'box', 'violin', 'strip', 'swarm', 'point', 'radar', 'network', 'chord', 'pyramid', 'flowchart', 'gantt', 'wordcloud', 'choropleth', 'symbolmap', 'pointmap'];
 
 // Nombres de seaborn, d3plus y otros: el agente puede usar el que conozca.
 export const ALIASES = {
@@ -9,10 +9,13 @@ export const ALIASES = {
   scatterplot: 'scatter', histplot: 'hist', histogram: 'hist', kdeplot: 'kde', density: 'kde', ecdfplot: 'ecdf',
   lmplot: 'regplot', reg: 'regplot', regression: 'regplot', joint: 'jointplot', boxplot: 'box', violinplot: 'violin',
   stripplot: 'strip', swarmplot: 'swarm', beeswarm: 'swarm', pointplot: 'point', spider: 'radar', doughnut: 'donut',
+  pointmap: 'pointmap', dotmap: 'pointmap', 'dot-map': 'pointmap', tilemap: 'pointmap', basemap: 'pointmap', 'mapa-puntos': 'pointmap', 'mapa-de-puntos': 'pointmap', latlon: 'pointmap',
   graph: 'network', force: 'network', red: 'network', 'chord-diagram': 'chord', cuerdas: 'chord',
   populationpyramid: 'pyramid', population: 'pyramid', piramide: 'pyramid', 'pirámide': 'pyramid',
   flow: 'flowchart', diagram: 'flowchart', process: 'flowchart', diagrama: 'flowchart',
   map: 'choropleth', mapa: 'choropleth', choroplethmap: 'choropleth', symbol: 'symbolmap', bubblemap: 'symbolmap', 'mapa-simbolos': 'symbolmap',
+  words: 'wordcloud', 'word-cloud': 'wordcloud', wordclouds: 'wordcloud', tagcloud: 'wordcloud', 'tag-cloud': 'wordcloud', nube: 'wordcloud', 'nube-de-palabras': 'wordcloud', cloud: 'wordcloud',
+  timeline: 'gantt', roadmap: 'gantt', schedule: 'gantt', cronograma: 'gantt', 'carta-gantt': 'gantt', ganttchart: 'gantt', 'gantt-chart': 'gantt', planning: 'gantt',
   tree: 'treemap', stat: 'kpi', stats: 'kpi', number: 'kpi', heat: 'heatmap', flow: 'sankey',
 };
 
@@ -27,6 +30,10 @@ export function normalizeType(t) {
 export function inferType(spec, data = []) {
   if (spec.items) return 'kpi';
   if (spec.geo) return 'choropleth';
+  if (spec.lat || spec.lon || spec.tiles !== undefined) return 'pointmap';
+  { const f = fieldsOf(data); if (f.some((k) => /^(lat|latitude|latitud)$/i.test(k)) && f.some((k) => /^(lon|lng|long|longitude|longitud)$/i.test(k))) return 'pointmap'; }
+  if ((typeof spec.text === 'string' && !(data[0] && spec.text in data[0])) || (Array.isArray(spec.text) && spec.text.length && typeof spec.text[0] === 'string') || spec.textField) return 'wordcloud';
+  if (spec.start !== undefined && (spec.end !== undefined || spec.duration !== undefined) && typeof spec.start === 'string') return 'gantt';
   if (spec.nodes && spec.nodes.some?.((n) => n && n.type)) return 'flowchart';
   if (spec.nodes) return 'network';
   if (spec.matrix) return 'chord';
@@ -36,6 +43,8 @@ export function inferType(spec, data = []) {
   const fields = fieldsOf(data);
   if ((fields.includes('source') && fields.includes('target')) || (fields.includes('from') && fields.includes('to'))) return 'sankey';
   const kinds = Object.fromEntries(fields.map((f) => [f, fieldKind(data, f)]));
+  // Dos fechas por fila (inicio y fin) y un nombre: un cronograma.
+  if (fields.filter((f) => kinds[f] === 'date').length >= 2 && fields.some((f) => kinds[f] === 'category') && !spec.y && !spec.series) return 'gantt';
   const x = spec.x ?? fields[0];
   const xk = kinds[x];
   if (xk === 'date' || xk === 'year') return 'line';

package/src/interact.js

@@ -12,12 +12,18 @@ export function attach(root) {
   const dark = svg.getAttribute('data-pa-mode') === 'dark';
   const tipEl = document.createElement('div');
   tipEl.setAttribute('role', 'tooltip');
+  tipEl.id = 'pa-tip-' + Math.random().toString(36).slice(2, 8);
+  // Tooltip como tarjeta: fondo del tema (o `theme.tooltip`), cabecera del color de la marca.
+  const custom = (svg.getAttribute('data-pa-tip') || '').split(',');
+  const tipBg = custom[0] || (dark ? '#151A3D' : '#FFFFFF');
+  const tipInk = custom[1] || (dark ? '#F2F3FA' : '#141A3F');
   tipEl.style.cssText = [
     'position:absolute', 'pointer-events:none', 'z-index:10', 'opacity:0', 'transition:opacity .12s',
     'padding:8px 10px', 'border-radius:8px', 'font:12.5px/1.45 ' + (svg.getAttribute('font-family') || 'system-ui'),
-    'white-space:nowrap', 'max-width:280px',
-    dark ? 'background:#F2F3FA;color:#141A3F' : 'background:#141A3F;color:#FCFBF9',
-    'box-shadow:0 6px 24px rgba(11,15,43,.18)',
+    'width:max-content', 'max-width:280px', 'overflow:hidden', 'overflow-wrap:anywhere', 'font-variant-numeric:tabular-nums',
+    `background:${tipBg};color:${tipInk}`,
+    dark ? 'border:1px solid rgba(242,243,250,.14)' : 'border:1px solid rgba(20,26,63,.10)',
+    'box-shadow:0 8px 28px rgba(11,15,43,' + (dark ? '.45' : '.16') + ')',
   ].join(';');
   root.appendChild(tipEl);
   const NS = 'http://www.w3.org/2000/svg';
@@ -27,25 +33,77 @@ export function attach(root) {
   let on = null;
   let pinned = null;
 
-  const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[c]);
-  const show = (html, ev) => {
+  const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+  // Colores que llegan desde atributos de datos: solo hex o rgb() (nada que rompa el HTML).
+  const col = (c) => (/^(#[0-9a-f]{3,8}|rgba?\([\d\s.,%]+\))$/i.test(String(c || '').trim()) ? String(c).trim() : '#888888');
+  // Posición: junto a la marca (no al cursor), nunca sobre el título ni la
+  // bajada, y dentro del gráfico. Prueba arriba, derecha, izquierda y abajo
+  // (en barras horizontales, derecha primero) y conserva el lado anterior
+  // mientras siga sirviendo, para que no salte.
+  let lastSide = null;
+  const headerBottom = (r) => {
+    const t = +svg.getAttribute('data-pa-top');
+    const m = svg.getScreenCTM && svg.getScreenCTM();
+    return t && m ? t * m.d + m.f - r.top : 0;
+  };
+  const show = (html, ev, anchor, order) => {
     tipEl.innerHTML = html;
     tipEl.style.opacity = '1';
     const r = root.getBoundingClientRect();
-    let x = ev.clientX - r.left + 14, y = ev.clientY - r.top + 14;
-    const w = tipEl.offsetWidth, h = tipEl.offsetHeight;
-    if (x + w > r.width) x = ev.clientX - r.left - w - 14;
-    if (y + h > r.height) y = Math.max(0, ev.clientY - r.top - h - 14);
+    const w = tipEl.offsetWidth, h = tipEl.offsetHeight, G = 10, M = 4;
+    const cx = ev.clientX - r.left, cy = ev.clientY - r.top;
+    let a = null;
+    if (anchor && anchor.l !== undefined) a = anchor;
+    else if (anchor && anchor.getBoundingClientRect) {
+      const b = anchor.getBoundingClientRect(), sb = svg.getBoundingClientRect();
+      // Marcas grandes (celdas de treemap, regiones, sectores): mejor el puntero.
+      if (b.width > 0 && b.width * b.height < 0.2 * sb.width * sb.height) a = { l: b.left - r.left, r: b.right - r.left, t: b.top - r.top, b: b.bottom - r.top };
+    }
+    if (!a) a = { l: cx - 8, r: cx + 8, t: cy - 8, b: cy + 8 };
+    const minY = Math.min(Math.max(M, headerBottom(r) + M), Math.max(M, r.height - h - M));
+    const maxY = Math.max(minY, r.height - h - M), maxX = Math.max(M, r.width - w - M);
+    const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+    const hx = clamp(cx, a.l, a.r) - w / 2, vy = clamp(cy, a.t, a.b) - h / 2;
+    const C = {
+      top: [clamp(hx, M, maxX), a.t - G - h, 'y'],
+      bottom: [clamp(hx, M, maxX), a.b + G, 'y'],
+      right: [a.r + G, clamp(vy, minY, maxY), 'x'],
+      left: [a.l - G - w, clamp(vy, minY, maxY), 'x'],
+    };
+    const ok = ([x, y]) => x >= M - 0.5 && x <= maxX + 0.5 && y >= minY - 0.5 && y <= maxY + 0.5;
+    const sides = order || (a.r - a.l > a.b - a.t && a.r - a.l > 40 ? ['right', 'top', 'left', 'bottom'] : ['top', 'right', 'left', 'bottom']);
+    const pick = [lastSide, ...sides].find((sd) => sd && C[sd] && ok(C[sd]));
+    let x, y;
+    if (pick) { [x, y] = C[pick]; lastSide = pick; }
+    else { x = clamp(cx + 14, M, maxX); y = clamp(cy + 14, minY, maxY); lastSide = null; }
     tipEl.style.left = x + 'px';
     tipEl.style.top = y + 'px';
   };
   const type = svg.getAttribute('data-pa-type') || '';
-  const isMap = type === 'choropleth' || type === 'symbolmap';
+  const isMap = type === 'choropleth' || type === 'symbolmap' || type === 'pointmap';
   const zoomG = svg.querySelector('.pa-zoom');
   const mapOverlay = document.createElementNS(NS, 'g');
   mapOverlay.setAttribute('pointer-events', 'none');
   if (zoomG) zoomG.appendChild(mapOverlay);
+  // Red: al pasar sobre un nodo se encienden sus vecinos y sus aristas (como
+  // emphasis.focus: 'adjacency' de ECharts); el resto se apaga.
+  let extraOn = [];
+  const adjacency = (node) => {
+    extraOn.forEach((n) => n.classList.remove('pa-on'));
+    extraOn = [];
+    const id = node && node.getAttribute && node.getAttribute('data-node');
+    const net = id !== null && id !== undefined && node.closest && node.closest('.pa-net');
+    if (!net) return;
+    const near = new Set([id]);
+    for (const e of net.querySelectorAll('.pa-links [data-s]')) {
+      const a = e.getAttribute('data-s'), b = e.getAttribute('data-t');
+      if (a === id || b === id) { near.add(a); near.add(b); e.classList.add('pa-on'); extraOn.push(e); }
+    }
+    for (const c of net.querySelectorAll('.pa-nodes [data-node]')) if (near.has(c.getAttribute('data-node')) && c !== node) { c.classList.add('pa-on'); extraOn.push(c); }
+  };
   const hide = () => {
+    extraOn.forEach((n) => n.classList.remove('pa-on'));
+    extraOn = [];
     tipEl.style.opacity = '0';
     if (on) on.classList.remove('pa-on');
     on = null;
@@ -53,19 +111,27 @@ export function attach(root) {
     mapOverlay.innerHTML = '';
     if (!pinned) svg.classList.remove('pa-focus');
   };
-  // El título del tooltip hereda el color de la categoría, aclarado u
-  // oscurecido hasta leerse bien sobre el fondo del tooltip; el resto, neutro.
-  const tipBg = dark ? '#F2F3FA' : '#141A3F';
-  const rgb = (h) => { h = String(h).replace('#', ''); if (h.length === 3) h = h.split('').map((c) => c + c).join(''); const n = parseInt(h, 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; };
+  // Cabecera del tooltip con el color de la marca de fondo y texto blanco u
+  // oscuro según el contraste (≥ 4,5:1; si ninguno llega, se ajusta el fondo).
+  const rgb = (h) => { h = String(h).replace('#', ''); if (h.length === 3) h = h.split('').map((c) => c + c).join(''); const n = parseInt(h.slice(0, 6), 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; };
   const lum = (c) => { const [r, g, b] = rgb(c).map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; };
   const ratio = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((m, n) => n - m); return (x + 0.05) / (y + 0.05); };
   const hex = (a) => '#' + a.map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0')).join('');
-  const onTip = (c) => {
-    if (!/^#[0-9a-f]{3,6}$/i.test(c || '')) return null;
-    const to = dark ? [20, 26, 63] : [255, 255, 255];
-    const A = rgb(c);
-    for (let t = 0; t <= 1.001; t += 0.05) { const m = hex(A.map((v, i) => v + (to[i] - v) * t)); if (ratio(m, tipBg) >= 4.5) return m; }
-    return null;
+  const toHex = (c) => {
+    c = String(c || '').trim();
+    if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(c)) return c;
+    const m = /^rgba?\((\d+)[,\s]+(\d+)[,\s]+(\d+)/i.exec(c);
+    return m ? hex([+m[1], +m[2], +m[3]]) : null;
+  };
+  const headerInk = (c) => {
+    let bg = toHex(c);
+    if (!bg) return null;
+    const DARK = '#141A3F', LIGHT = '#FFFFFF';
+    const fg = ratio(LIGHT, bg) >= ratio(DARK, bg) ? LIGHT : DARK;
+    const to = fg === LIGHT ? [0, 0, 0] : [255, 255, 255];
+    const A = rgb(bg);
+    for (let t = 0.05; ratio(fg, bg) < 4.5 && t <= 1.001; t += 0.05) bg = hex(A.map((v, i) => v + (to[i] - v) * t));
+    return { bg, fg };
   };
   const markColor = (node) => {
     if (!node) return null;
@@ -83,10 +149,17 @@ export function attach(root) {
     return null;
   };
   const linesHtml = (txt, color) => {
-    const c = onTip(color);
-    return String(txt).split('\n').map((l, i) => (i === 0
-      ? `<div style="font-weight:600${c ? ';color:' + c : ''}">${c ? `<span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:${color};margin-right:6px;vertical-align:1px"></span>` : ''}${esc(l)}</div>`
-      : `<div style="opacity:.86">${esc(l)}</div>`)).join('');
+    const hd = headerInk(color);
+    return String(txt).split('\n').map((l, i) => {
+      if (i === 0) return hd
+        ? `<div style="margin:-8px -10px 6px;padding:6px 10px;background:${hd.bg};color:${hd.fg};font-weight:600">${esc(l)}</div>`
+        : `<div style="font-weight:600;margin-bottom:2px">${esc(l)}</div>`;
+      // "Etiqueta: valor" → etiqueta a la izquierda y valor en negrita a la derecha.
+      const m = /^(.{1,40}?):\s+(.+)$/.exec(l);
+      return m
+        ? `<div style="display:flex;gap:12px;justify-content:space-between"><span style="opacity:.78">${esc(m[1])}</span><b style="font-weight:600">${esc(m[2])}</b></div>`
+        : `<div style="opacity:.86">${esc(l)}</div>`;
+    }).join('');
   };
 
   const toSvg = (ev) => {
@@ -105,10 +178,12 @@ export function attach(root) {
       for (const d of data) if (Math.abs(d.x - p.x) < Math.abs(best.x - p.x)) best = d;
       const y0 = +t.getAttribute('data-y0'), y1 = +t.getAttribute('data-y1');
       overlay.innerHTML =
-        `<line x1="${best.x}" x2="${best.x}" y1="${y0}" y2="${y1}" stroke="${dark ? '#8A90B4' : '#7C819C'}" stroke-width="1"/>` +
-        best.v.map((v) => `<circle cx="${best.x}" cy="${v[2]}" r="4.5" fill="${v[1]}" stroke="${dark ? '#0B0F2B' : '#FCFBF9'}" stroke-width="2"/>`).join('');
-      const rows = [...best.v].sort((a, b) => a[2] - b[2]).map((v) => `<div style="display:flex;gap:8px;align-items:center"><span style="width:8px;height:8px;border-radius:50%;background:${v[1]}"></span><span style="opacity:.86;flex:1">${esc(v[0])}</span><b style="font-weight:600;margin-left:12px">${esc(v[3])}</b></div>`).join('');
-      show(`<div style="font-weight:600;margin-bottom:2px">${esc(best.t)}</div>${rows}`, ev);
+        `<line x1="${+best.x}" x2="${+best.x}" y1="${y0}" y2="${y1}" stroke="${dark ? '#8A90B4' : '#7C819C'}" stroke-width="1"/>` +
+        best.v.map((v) => `<circle cx="${+best.x}" cy="${+v[2]}" r="4.5" fill="${col(v[1])}" stroke="${dark ? '#0B0F2B' : '#FCFBF9'}" stroke-width="2"/>`).join('');
+      const rows = [...best.v].sort((a, b) => a[2] - b[2]).map((v) => `<div style="display:flex;gap:8px;align-items:center"><span style="width:8px;height:8px;border-radius:50%;background:${col(v[1])}"></span><span style="opacity:.86;flex:1">${esc(v[0])}</span><b style="font-weight:600;margin-left:12px">${esc(v[3])}</b></div>`).join('');
+      const m = svg.getScreenCTM(), rr = root.getBoundingClientRect();
+      const lx = m ? best.x * m.a + m.e - rr.left : ev.clientX - rr.left, ly = ev.clientY - rr.top;
+      show(`<div style="font-weight:600;margin-bottom:4px">${esc(best.t)}</div>${rows}`, ev, { l: lx - 6, r: lx + 6, t: ly - 4, b: ly + 4 }, ['right', 'left', 'top', 'bottom']);
       return;
     }
     if (t && t.classList && t.classList.contains('pa-near')) {
@@ -118,8 +193,8 @@ export function attach(root) {
       let best = null, bd = 196;
       for (const q of pts) { const d = (q[0] - p.x) ** 2 + (q[1] - p.y) ** 2; if (d < bd) { bd = d; best = q; } }
       if (!best) { hide(); return; }
-      overlay.innerHTML = `<circle cx="${best[0]}" cy="${best[1]}" r="6" fill="${best[3]}" stroke="${dark ? '#0B0F2B' : '#FCFBF9'}" stroke-width="2"/>`;
-      if (best[2]) show(linesHtml(best[2], best[3]), ev); else tipEl.style.opacity = '0';
+      overlay.innerHTML = `<circle cx="${+best[0]}" cy="${+best[1]}" r="6" fill="${col(best[3])}" stroke="${dark ? '#0B0F2B' : '#FCFBF9'}" stroke-width="2"/>`;
+      if (best[2]) { const m = svg.getScreenCTM(), rr = root.getBoundingClientRect(); const px = best[0] * m.a + m.e - rr.left, py = best[1] * m.d + m.f - rr.top; show(linesHtml(best[2], best[3]), ev, { l: px - 6, r: px + 6, t: py - 6, b: py + 6 }); } else tipEl.style.opacity = '0';
       return;
     }
     const tg = t && t.closest ? t.closest('[data-tip]') : null;
@@ -131,13 +206,55 @@ export function attach(root) {
       if (isMap) {
         // Mapas: sin atenuar el resto; un contorno marcado sobre la región (o su círculo).
         mapOverlay.innerHTML = '';
-        if (on && on.tagName === 'path') mapOverlay.innerHTML = `<path d="${on.getAttribute('d')}" fill="none" stroke="${dark ? '#F2F3FA' : '#141A3F'}" stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>`;
+        if (on && on.tagName === 'path') mapOverlay.innerHTML = `<path d="${esc(on.getAttribute('d'))}" fill="none" stroke="${dark ? '#F2F3FA' : '#141A3F'}" stroke-width="2" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>`;
         else if (on && on.tagName === 'circle') mapOverlay.innerHTML = `<circle cx="${on.getAttribute('cx')}" cy="${on.getAttribute('cy')}" r="${on.getAttribute('r')}" fill="none" stroke="${dark ? '#F2F3FA' : '#141A3F'}" stroke-width="2" vector-effect="non-scaling-stroke"/>`;
-      } else if (on) { on.classList.add('pa-on'); svg.classList.add('pa-focus'); } else svg.classList.remove('pa-focus');
+      } else if (on) { on.classList.add('pa-on'); svg.classList.add('pa-focus'); adjacency(on); } else svg.classList.remove('pa-focus');
     }
-    show(linesHtml(tg.getAttribute('data-tip'), markColor(mark || tg)), ev);
+    show(linesHtml(tg.getAttribute('data-tip'), markColor(mark || tg)), ev, mark || tg);
   });
-  svg.addEventListener('pointerleave', hide);
+  // Táctil: un toque muestra el tooltip y lo deja abierto hasta otro toque fuera.
+  let touchTip = false;
+  svg.addEventListener('pointerdown', (ev) => {
+    if (ev.pointerType !== 'touch') return;
+    const tg = ev.target && ev.target.closest ? ev.target.closest('[data-tip]') : null;
+    if (!tg) { touchTip = false; hide(); return; }
+    touchTip = true;
+    const mark = tg.classList.contains('pa-m') ? tg : null;
+    show(linesHtml(tg.getAttribute('data-tip'), markColor(mark || tg)), ev, mark || tg);
+  });
+  svg.addEventListener('pointerleave', (ev) => { if (ev.pointerType === 'touch' && touchTip) return; hide(); });
+
+  // Teclado: Tab entra al gráfico; flechas recorren las marcas con datos,
+  // Home/End van al extremo y Esc cierra. El tooltip se ancla a la marca.
+  const lang = svg.getAttribute('data-pa-lang') === 'en';
+  svg.setAttribute('role', 'graphics-document');
+  svg.setAttribute('aria-roledescription', lang ? 'chart' : 'gráfico');
+  if (!svg.hasAttribute('tabindex')) svg.setAttribute('tabindex', '0');
+  const live = document.createElement('div');
+  live.setAttribute('aria-live', 'polite');
+  live.style.cssText = 'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap';
+  root.appendChild(live);
+  let kIdx = -1;
+  const kMarks = () => [...svg.querySelectorAll('.pa-body [data-tip]')].filter((n) => !n.parentElement.closest('[data-tip]') && n.getAttribute('data-tip'));
+  svg.addEventListener('keydown', (ev) => {
+    if (ev.target !== svg) return;
+    if (ev.key === 'Escape') { kIdx = -1; hide(); return; }
+    const d = ev.key === 'ArrowRight' || ev.key === 'ArrowDown' ? 1 : ev.key === 'ArrowLeft' || ev.key === 'ArrowUp' ? -1 : ev.key === 'Home' ? -1e9 : ev.key === 'End' ? 1e9 : 0;
+    if (!d) return;
+    const ms = kMarks();
+    if (!ms.length) return;
+    ev.preventDefault();
+    kIdx = Math.max(0, Math.min(ms.length - 1, kIdx < 0 ? (d > 0 ? 0 : ms.length - 1) : kIdx + d));
+    const tg = ms[kIdx];
+    const b = tg.getBoundingClientRect();
+    const mark = tg.classList.contains('pa-m') ? tg : tg.querySelector('.pa-m');
+    if (on) on.classList.remove('pa-on');
+    on = mark;
+    if (!isMap && on) { on.classList.add('pa-on'); svg.classList.add('pa-focus'); }
+    show(linesHtml(tg.getAttribute('data-tip'), markColor(mark || tg)), { clientX: b.left + b.width / 2, clientY: b.top + b.height / 2 }, tg);
+    live.textContent = tg.getAttribute('data-tip').replace(/\n/g, '. ');
+  });
+  svg.addEventListener('blur', () => { kIdx = -1; hide(); });
 
   // Leyenda conectada: pasar sobre una clave destaca sus marcas (mismo color);
   // un clic la deja fija, otro clic la suelta.
@@ -173,9 +290,13 @@ export function attach(root) {
     k.setAttribute('role', 'button');
     k.addEventListener('pointerenter', () => { if (!pinned) focusColor(k.getAttribute('data-color')); });
     k.addEventListener('pointerleave', () => { if (!pinned) focusColor(null); });
-    const toggle = () => { pinned = pinned === k ? null : k; focusColor(pinned ? k.getAttribute('data-color') : null); };
+    const toggle = (e) => {
+      // render() puede tomar el clic (zoom en treemap, shift + clic = excluir).
+      if (root.__paLegend && root.__paLegend(k, e || {})) return;
+      pinned = pinned === k ? null : k; focusColor(pinned ? k.getAttribute('data-color') : null);
+    };
     k.addEventListener('click', toggle);
-    k.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } });
+    k.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(e); } });
   }
 
   if (zoomG) mapZoom(root, svg, zoomG, { dark, hide });