nio-cat 0.1.0 → 0.2.0

package/web/board.js

@@ -0,0 +1,1180 @@
+/* Nio · Pissarra: llenç infinit per dibuixar diagrames, amb un xat que els crea. */
+(() => {
+'use strict';
+const KEY = 'nio.board.v1';
+const NS = 'http://www.w3.org/2000/svg';
+const GAP = 3;
+const HAND = '"Caveat", "Segoe Print", "Comic Sans MS", cursive';
+const CLEAN = '"Manrope", system-ui, sans-serif';
+const STROKES = [['#272224', 'Negre'], ['#e2382b', 'Vermell'], ['#2f7d4f', 'Verd'], ['#2b5bd8', 'Blau'], ['#e07b1f', 'Taronja'], ['#8a5cf6', 'Lila']];
+const FILLS = [['none', 'Sense fons'], ['#fffefd', 'Blanc'], ['#fde4df', 'Vermell clar'], ['#e1f0e6', 'Verd clar'], ['#e2e9fb', 'Blau clar'], ['#fbf1bf', 'Groc clar']];
+const NAMED = { negre: '#272224', vermell: '#e2382b', roig: '#e2382b', verd: '#2f7d4f', blau: '#2b5bd8', taronja: '#e07b1f', lila: '#8a5cf6', groc: '#c9a400', gris: '#69615c' };
+const NAMED_FILL = { blanc: '#fffefd', vermell: '#fde4df', roig: '#fde4df', verd: '#e1f0e6', blau: '#e2e9fb', groc: '#fbf1bf', taronja: '#fde7cf', lila: '#ece3fd', gris: '#ece9e3' };
+const SIZES = { s: 18, m: 24, l: 34 };
+const TOOLS = [
+  ['select', 'Selecciona', 'V', '1', '<path d="M5 3l6 17 2.2-6.8L20 11z"/>'],
+  ['hand', 'Mou el llenç', 'H', '', '<path d="M18 11V6.5a1.5 1.5 0 0 0-3 0V11M15 10V4.5a1.5 1.5 0 0 0-3 0V10M12 10V5.5a1.5 1.5 0 0 0-3 0V13l-1.6-1.7a1.6 1.6 0 0 0-2.4 2.1L9 18a6 6 0 0 0 4.6 2H15a5 5 0 0 0 5-5v-4.5a1.5 1.5 0 0 0-3 0"/>'],
+  ['rect', 'Rectangle', 'R', '2', '<rect x="4" y="6" width="16" height="12" rx="2"/>'],
+  ['ellipse', 'El·lipse', 'O', '3', '<ellipse cx="12" cy="12" rx="8.5" ry="6.5"/>'],
+  ['diamond', 'Rombe', 'D', '4', '<path d="M12 3.5l8.5 8.5-8.5 8.5L3.5 12z"/>'],
+  ['arrow', 'Fletxa', 'A', '5', '<path d="M5 19L19 5M10 5h9v9"/>'],
+  ['line', 'Línia', 'L', '6', '<path d="M5 19L19 5"/>'],
+  ['draw', 'Llapis', 'P', '7', '<path d="M4 20l1.2-4.4L16 4.8a2 2 0 0 1 2.9 0l.3.3a2 2 0 0 1 0 2.9L8.4 18.8z"/>'],
+  ['text', 'Text', 'T', '8', '<path d="M5 7V5h14v2M12 5v14M9 19h6"/>'],
+  ['eraser', 'Goma', 'E', '0', '<path d="M8 20h12M6.4 14.6l7.2-7.2a2 2 0 0 1 2.8 0l2.2 2.2a2 2 0 0 1 0 2.8L12 19H9.6z"/>']
+];
+const ICON = {
+  undo: '<path d="M9 14L4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 0 12h-3"/>',
+  redo: '<path d="M15 14l5-5-5-5"/><path d="M20 9H10a6 6 0 0 0 0 12h3"/>',
+  minus: '<path d="M6 12h12"/>', plus: '<path d="M12 6v12M6 12h12"/>',
+  fit: '<path d="M4 9V5h4M20 9V5h-4M4 15v4h4M20 15v4h-4"/>',
+  chat: '<path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z"/>',
+  menu: '<circle cx="5" cy="12" r="1.3"/><circle cx="12" cy="12" r="1.3"/><circle cx="19" cy="12" r="1.3"/>',
+  lock: '<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>',
+  style: '<circle cx="8" cy="9" r="1.4"/><circle cx="13" cy="7" r="1.4"/><circle cx="17" cy="11" r="1.4"/><path d="M12 21a9 9 0 1 1 9-9c0 2-1.5 3-3.5 3H16a2 2 0 0 0-1.4 3.4A1.6 1.6 0 0 1 12 21z"/>',
+  close: '<path d="M6 6l12 12M18 6L6 18"/>', send: '<path d="M5 12h14M13 6l6 6-6 6"/>',
+  trash: '<path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/>', copy: '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3"/>',
+  up: '<path d="M12 19V5M6 11l6-6 6 6"/>', down: '<path d="M12 5v14M6 13l6 6 6-6"/>'
+};
+const svgI = (p, cls = '') => `<svg class="ico ${cls}" viewBox="0 0 24 24" aria-hidden="true">${p}</svg>`;
+const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+const uid = () => Math.random().toString(36).slice(2, 10);
+const norm = s => String(s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/·/g, '').toLowerCase().trim();
+const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/* ---------- Estat ---------- */
+function fresh() {
+  return { v: 1, els: [], view: { x: 0, y: 0, z: 1 }, opts: { rough: true, font: 'hand', grid: true, chat: true },
+    style: { stroke: '#272224', fill: 'none', sw: 2, dash: false, fs: 'm' }, chat: [] };
+}
+function load() {
+  try { const s = JSON.parse(localStorage.getItem(KEY)); if (s && s.v === 1 && Array.isArray(s.els)) return Object.assign(fresh(), s); } catch (e) {}
+  return fresh();
+}
+let B = load();
+let saveT = 0;
+const save = () => { clearTimeout(saveT); saveT = setTimeout(() => { try { localStorage.setItem(KEY, JSON.stringify(B)); } catch (e) {} }, 250); };
+let hist = [], fut = [];
+function record() { hist.push(JSON.stringify(B.els)); if (hist.length > 120) hist.shift(); fut = []; }
+function undo() { if (!hist.length) return false; fut.push(JSON.stringify(B.els)); B.els = JSON.parse(hist.pop()); sel.clear(); full(); save(); return true; }
+function redo() { if (!fut.length) return false; hist.push(JSON.stringify(B.els)); B.els = JSON.parse(fut.pop()); sel.clear(); full(); save(); return true; }
+
+let R = null;                 // referències DOM quan està muntat
+let sel = new Set();
+let tool = 'select', lock = false, spaceDown = false;
+let clip = null;
+const byId = id => B.els.find(e => e.id === id);
+const isShape = el => el && (el.type === 'rect' || el.type === 'ellipse' || el.type === 'diamond');
+const isLinear = el => el && (el.type === 'arrow' || el.type === 'line');
+const fontOf = () => B.opts.font === 'hand' ? HAND : CLEAN;
+
+/* ---------- Mesura de text ---------- */
+const mctx = document.createElement('canvas').getContext('2d');
+function measure(text, fs) { mctx.font = `500 ${fs}px ${fontOf()}`; return mctx.measureText(text).width; }
+function wrap(text, fs, maxW) {
+  const out = [];
+  String(text || '').split('\n').forEach(par => {
+    if (!maxW) { out.push(par); return; }
+    let line = '';
+    par.split(/\s+/).forEach(w => {
+      const t = line ? line + ' ' + w : w;
+      if (measure(t, fs) > maxW && line) { out.push(line); line = w; } else line = t;
+    });
+    out.push(line);
+  });
+  return out;
+}
+const fsOf = el => SIZES[el.fs] || el.fsPx || SIZES.m;
+const textW = el => Math.max(30, el.type === 'rect' ? el.w - 28 : el.type === 'ellipse' ? el.w * .7 - 8 : el.w * .5 - 6);
+function fitText(el) {
+  const fs = fsOf(el), lines = String(el.text || '').split('\n');
+  el.w = Math.max(20, ...lines.map(l => measure(l, fs))) + 4;
+  el.h = lines.length * fs * 1.25;
+}
+
+/* ---------- Traç fet a mà ---------- */
+function rng(seed) { let s = (seed >>> 0) || 1; return () => { s ^= s << 13; s ^= s >>> 17; s ^= s << 5; return ((s >>> 0) % 100000) / 100000; }; }
+const f1 = n => Math.round(n * 10) / 10;
+function rline(x1, y1, x2, y2, r, amt) {
+  const len = Math.hypot(x2 - x1, y2 - y1), o = Math.min(amt, len * .05 + .4), j = () => (r() - .5) * 2 * o;
+  const mx = (x1 + x2) / 2 + j() * 1.4, my = (y1 + y2) / 2 + j() * 1.4;
+  return `M${f1(x1 + j())} ${f1(y1 + j())}Q${f1(mx)} ${f1(my)} ${f1(x2 + j())} ${f1(y2 + j())}`;
+}
+function rlineX(x1, y1, x2, y2, r, amt) {
+  const len = Math.hypot(x2 - x1, y2 - y1), o = Math.min(amt, len * .03 + .3), j = () => (r() - .5) * 2 * o;
+  return `M${f1(x1)} ${f1(y1)}Q${f1((x1 + x2) / 2 + j() * 1.4)} ${f1((y1 + y2) / 2 + j() * 1.4)} ${f1(x2)} ${f1(y2)}`;
+}
+function smooth(pts, closed) {
+  if (pts.length < 2) return '';
+  const p = closed ? [pts[pts.length - 1], ...pts, pts[0], pts[1]] : [pts[0], ...pts, pts[pts.length - 1]];
+  let d = `M${f1(p[1][0])} ${f1(p[1][1])}`;
+  for (let i = 1; i < p.length - 2; i++) {
+    const [x0, y0] = p[i - 1], [x1, y1] = p[i], [x2, y2] = p[i + 1], [x3, y3] = p[i + 2];
+    d += `C${f1(x1 + (x2 - x0) / 6)} ${f1(y1 + (y2 - y0) / 6)} ${f1(x2 - (x3 - x1) / 6)} ${f1(y2 - (y3 - y1) / 6)} ${f1(x2)} ${f1(y2)}`;
+  }
+  return d;
+}
+function polyPath(pts, r, bow) {
+  let d = `M${f1(pts[0][0])} ${f1(pts[0][1])}`;
+  for (let i = 0; i < pts.length; i++) {
+    const p = pts[i], q = pts[(i + 1) % pts.length], o = Math.min(bow, Math.hypot(q[0] - p[0], q[1] - p[1]) * .02 + .3);
+    d += `Q${f1((p[0] + q[0]) / 2 + (r() - .5) * 2 * o)} ${f1((p[1] + q[1]) / 2 + (r() - .5) * 2 * o)} ${f1(q[0])} ${f1(q[1])}`;
+  }
+  return d + 'Z';
+}
+function shapePaths(el) {
+  const { x, y, w, h } = el, rough = B.opts.rough, r = rng(el.seed), amt = .8 + el.sw * .3, bow = 1 + el.sw * .3;
+  const jit = (pts, k) => pts.map(p => [p[0] + (r() - .5) * 2 * amt * k, p[1] + (r() - .5) * 2 * amt * k]);
+  if (el.type === 'rect') {
+    const c = Math.min(8, w / 2, h / 2);
+    if (!rough) {
+      const clean = `M${x + c} ${y}H${x + w - c}Q${x + w} ${y} ${x + w} ${y + c}V${y + h - c}Q${x + w} ${y + h} ${x + w - c} ${y + h}H${x + c}Q${x} ${y + h} ${x} ${y + h - c}V${y + c}Q${x} ${y} ${x + c} ${y}Z`;
+      return { fill: clean, stroke: [clean] };
+    }
+    const pts = [[x, y], [x + w, y], [x + w, y + h], [x, y + h]], p0 = polyPath(jit(pts, .5), r, bow);
+    return { fill: p0, stroke: [p0, polyPath(jit(pts, 1.4), r, bow)] };
+  }
+  if (el.type === 'diamond') {
+    const pts = [[x + w / 2, y], [x + w, y + h / 2], [x + w / 2, y + h], [x, y + h / 2]];
+    const clean = `M${pts.map(p => p.join(' ')).join('L')}Z`;
+    if (!rough) return { fill: clean, stroke: [clean] };
+    const p0 = polyPath(jit(pts, .5), r, bow);
+    return { fill: p0, stroke: [p0, polyPath(jit(pts, 1.4), r, bow)] };
+  }
+  const cx = x + w / 2, cy = y + h / 2, rx = Math.max(1, w / 2), ry = Math.max(1, h / 2);
+  const clean = `M${cx - rx} ${cy}a${rx} ${ry} 0 1 0 ${rx * 2} 0a${rx} ${ry} 0 1 0 ${-rx * 2} 0Z`;
+  if (!rough) return { fill: clean, stroke: [clean] };
+  const ring = k => {
+    const n = 28, pts = [];
+    for (let i = 0; i < n; i++) { const a = (i / n) * Math.PI * 2, q = 1 + (r() - .5) * .02 * k; pts.push([cx + Math.cos(a) * rx * q, cy + Math.sin(a) * ry * q]); }
+    return smooth(pts, true) + 'Z';
+  };
+  const p0 = ring(1);
+  return { fill: p0, stroke: [p0, ring(2.4)] };
+}
+
+/* ---------- Geometria ---------- */
+const center = el => [el.x + el.w / 2, el.y + el.h / 2];
+function edgePoint(el, toward) {
+  const [cx, cy] = center(el); let dx = toward[0] - cx, dy = toward[1] - cy;
+  if (!dx && !dy) dy = 1;
+  const hw = el.w / 2 + GAP, hh = el.h / 2 + GAP;
+  let t;
+  if (el.type === 'ellipse') t = 1 / Math.sqrt((dx * dx) / (hw * hw) + (dy * dy) / (hh * hh));
+  else if (el.type === 'diamond') t = 1 / (Math.abs(dx) / hw + Math.abs(dy) / hh);
+  else t = Math.min(hw / Math.abs(dx || 1e-9), hh / Math.abs(dy || 1e-9));
+  return [cx + dx * t, cy + dy * t];
+}
+function ends(a) {
+  let p1 = [a.x + a.points[0][0], a.y + a.points[0][1]], p2 = [a.x + a.points[a.points.length - 1][0], a.y + a.points[a.points.length - 1][1]];
+  const s = a.start && byId(a.start), e = a.end && byId(a.end);
+  const t1 = e ? center(e) : p2, t2 = s ? center(s) : p1;
+  if (s) p1 = edgePoint(s, t1);
+  if (e) p2 = edgePoint(e, t2);
+  return [p1, p2];
+}
+function bbox(el) {
+  if (isLinear(el)) { const [a, b] = ends(el); return { x: Math.min(a[0], b[0]), y: Math.min(a[1], b[1]), w: Math.abs(b[0] - a[0]), h: Math.abs(b[1] - a[1]) }; }
+  if (el.type === 'draw') {
+    const xs = el.points.map(p => p[0] + el.x), ys = el.points.map(p => p[1] + el.y);
+    return { x: Math.min(...xs), y: Math.min(...ys), w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys) };
+  }
+  return { x: el.x, y: el.y, w: el.w, h: el.h };
+}
+function union(list) {
+  if (!list.length) return null;
+  let x1 = Infinity, y1 = Infinity, x2 = -Infinity, y2 = -Infinity;
+  list.forEach(el => { const b = bbox(el); x1 = Math.min(x1, b.x); y1 = Math.min(y1, b.y); x2 = Math.max(x2, b.x + b.w); y2 = Math.max(y2, b.y + b.h); });
+  return { x: x1, y: y1, w: x2 - x1, h: y2 - y1 };
+}
+
+/* ---------- Pintat ---------- */
+function labelSVG(text, cx, cy, fs, color, maxW, bg) {
+  if (!text) return '';
+  const lines = wrap(text, fs, maxW), lh = fs * 1.25, top = cy - (lines.length * lh) / 2 + lh * .78;
+  let out = '';
+  if (bg) {
+    const w = Math.max(...lines.map(l => measure(l, fs))) + 12, h = lines.length * lh + 4;
+    out += `<rect x="${f1(cx - w / 2)}" y="${f1(cy - h / 2)}" width="${f1(w)}" height="${f1(h)}" rx="6" fill="${bg}"/>`;
+  }
+  out += `<text x="${f1(cx)}" y="${f1(top)}" fill="${color}" font-size="${fs}" font-family='${fontOf()}' font-weight="500" text-anchor="middle">${lines.map((l, i) => `<tspan x="${f1(cx)}" dy="${i ? lh : 0}">${esc(l) || ' '}</tspan>`).join('')}</text>`;
+  return out;
+}
+function elSVG(el, exp) {
+  const dash = el.dash ? ` stroke-dasharray="${el.sw * 4} ${el.sw * 3}"` : '';
+  const st = `fill="none" stroke="${el.stroke}" stroke-width="${el.sw}" stroke-linecap="round" stroke-linejoin="round"${dash}`;
+  let s = '';
+  if (isShape(el)) {
+    const p = shapePaths(el);
+    if (el.fill && el.fill !== 'none') s += `<path d="${p.fill}" fill="${el.fill}"/>`;
+    s += p.stroke.map((d, i) => `<path d="${d}" ${st}${i ? ' opacity=".7"' : ''}/>`).join('');
+    if (el.text) s += labelSVG(el.text, el.x + el.w / 2, el.y + el.h / 2, fsOf(el), el.stroke, textW(el));
+    if (!exp) s += `<path class="hit" d="${p.fill}"/>`;
+  } else if (isLinear(el)) {
+    const [a, b] = ends(el), r = rng(el.seed), amt = 1 + el.sw * .4;
+    const body = B.opts.rough ? rlineX(a[0], a[1], b[0], b[1], r, amt) + rlineX(a[0], a[1], b[0], b[1], r, amt * .7) : `M${f1(a[0])} ${f1(a[1])}L${f1(b[0])} ${f1(b[1])}`;
+    let head = '';
+    if (el.type === 'arrow') {
+      const ang = Math.atan2(b[1] - a[1], b[0] - a[0]), L = Math.min(16 + el.sw * 2, Math.hypot(b[0] - a[0], b[1] - a[1]) * .5);
+      const h1 = [b[0] - L * Math.cos(ang - .45), b[1] - L * Math.sin(ang - .45)], h2 = [b[0] - L * Math.cos(ang + .45), b[1] - L * Math.sin(ang + .45)];
+      head = `M${f1(h1[0])} ${f1(h1[1])}L${f1(b[0])} ${f1(b[1])}L${f1(h2[0])} ${f1(h2[1])}`;
+    }
+    s += `<path d="${body}" ${st}/>`;
+    if (head) s += `<path d="${head}" fill="none" stroke="${el.stroke}" stroke-width="${el.sw}" stroke-linecap="round" stroke-linejoin="round"/>`;
+    if (el.text) s += labelSVG(el.text, (a[0] + b[0]) / 2, (a[1] + b[1]) / 2, fsOf(el) * .8, el.stroke, 220, exp ? '#f0ede7' : 'var(--bd-bg)');
+    if (!exp) s += `<path class="hit line" d="M${f1(a[0])} ${f1(a[1])}L${f1(b[0])} ${f1(b[1])}"/>`;
+  } else if (el.type === 'draw') {
+    const d = smooth(el.points.map(p => [p[0] + el.x, p[1] + el.y]), false) || `M${el.x} ${el.y}h.1`;
+    s += `<path d="${d}" fill="none" stroke="${el.stroke}" stroke-width="${el.sw * 1.4}" stroke-linecap="round" stroke-linejoin="round"/>`;
+    if (!exp) s += `<path class="hit line" d="${d}"/>`;
+  } else if (el.type === 'text') {
+    const fs = fsOf(el), lines = String(el.text || '').split('\n'), lh = fs * 1.25;
+    s += `<text x="${f1(el.x)}" y="${f1(el.y + fs * .98)}" fill="${el.stroke}" font-size="${fs}" font-family='${fontOf()}' font-weight="500">${lines.map((l, i) => `<tspan x="${f1(el.x)}" dy="${i ? lh : 0}">${esc(l) || ' '}</tspan>`).join('')}</text>`;
+    if (!exp) s += `<rect class="hit" x="${el.x}" y="${el.y}" width="${el.w}" height="${el.h}"/>`;
+  }
+  return s;
+}
+const nodes = new Map();
+function paint(el) {
+  if (!R) return;
+  let g = nodes.get(el.id);
+  if (!g) { g = document.createElementNS(NS, 'g'); g.dataset.id = el.id; nodes.set(el.id, g); }
+  g.innerHTML = elSVG(el);
+  g.classList.toggle('erasing', !!el._erase);
+  g.classList.toggle('editing', editing === el.id);
+}
+function full() {
+  if (!R) return;
+  const keep = new Set(B.els.map(e => e.id));
+  [...nodes.keys()].forEach(id => { if (!keep.has(id)) { nodes.get(id).remove(); nodes.delete(id); } });
+  B.els.forEach(paint);
+  B.els.forEach(el => R.els.appendChild(nodes.get(el.id)));
+  sel.forEach(id => { if (!keep.has(id)) sel.delete(id); });
+  drawSel(); applyView(); panel(); R.empty.hidden = B.els.length > 0;
+}
+function repaintRelated(ids) {
+  const set = new Set(ids);
+  B.els.forEach(el => { if (set.has(el.id) || (isLinear(el) && (set.has(el.start) || set.has(el.end)))) paint(el); });
+  drawSel();
+}
+
+/* ---------- Vista ---------- */
+function applyView() {
+  if (!R) return;
+  const { x, y, z } = B.view;
+  R.world.setAttribute('transform', `translate(${f1(x)} ${f1(y)}) scale(${z})`);
+  const g = 22 * z;
+  R.stage.style.backgroundSize = B.opts.grid ? `${g}px ${g}px` : '0 0';
+  R.stage.style.backgroundPosition = `${x % g}px ${y % g}px`;
+  R.stage.classList.toggle('nogrid', !B.opts.grid);
+  R.zoomPct.textContent = Math.round(z * 100) + '%';
+  if (editing) placeEditor();
+}
+const toWorld = (cx, cy) => { const r = R.svg.getBoundingClientRect(); return [(cx - r.left - B.view.x) / B.view.z, (cy - r.top - B.view.y) / B.view.z]; };
+function zoomAt(z, sx, sy) {
+  z = clamp(z, .1, 4);
+  const r = R.svg.getBoundingClientRect(), px = (sx ?? r.width / 2), py = (sy ?? r.height / 2);
+  const wx = (px - B.view.x) / B.view.z, wy = (py - B.view.y) / B.view.z;
+  B.view = { x: px - wx * z, y: py - wy * z, z };
+  applyView(); drawSel(); save();
+}
+let anim = 0;
+function animateView(to) {
+  cancelAnimationFrame(anim);
+  if (reduce) { B.view = to; applyView(); drawSel(); save(); return; }
+  const from = { ...B.view }, t0 = performance.now(), D = 380;
+  const step = t => {
+    const k = Math.min(1, (t - t0) / D), e = 1 - Math.pow(1 - k, 3);
+    B.view = { x: from.x + (to.x - from.x) * e, y: from.y + (to.y - from.y) * e, z: from.z + (to.z - from.z) * e };
+    applyView(); drawSel();
+    if (k < 1) anim = requestAnimationFrame(step); else save();
+  };
+  anim = requestAnimationFrame(step);
+}
+function fit(list) {
+  list = list && list.length ? list : B.els;
+  const r = R.svg.getBoundingClientRect();
+  if (!list.length) return animateView({ x: r.width / 2, y: r.height / 2, z: 1 });
+  const b = union(list), pad = Math.min(96, r.width * .1);
+  const z = clamp(Math.min((r.width - pad * 2) / Math.max(b.w, 1), (r.height - pad * 2) / Math.max(b.h, 1)), .15, 1.6);
+  animateView({ x: r.width / 2 - (b.x + b.w / 2) * z, y: r.height / 2 - (b.y + b.h / 2) * z, z });
+}
+
+/* ---------- Selecció ---------- */
+const HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+function drawSel() {
+  if (!R) return;
+  const z = B.view.z, list = [...sel].map(byId).filter(Boolean);
+  let s = '';
+  if (marquee) s += `<rect class="marq" x="${marquee.x}" y="${marquee.y}" width="${marquee.w}" height="${marquee.h}" stroke-width="${1 / z}"/>`;
+  if (list.length) {
+    const p = 6 / z;
+    if (list.length === 1 && isLinear(list[0])) {
+      const [a, b] = ends(list[0]), r = 6 / z;
+      s += `<circle class="hdl" data-ep="0" cx="${a[0]}" cy="${a[1]}" r="${r}" stroke-width="${1.5 / z}"/><circle class="hdl" data-ep="1" cx="${b[0]}" cy="${b[1]}" r="${r}" stroke-width="${1.5 / z}"/>`;
+    } else {
+      const b = union(list);
+      s += `<rect class="selbox" x="${b.x - p}" y="${b.y - p}" width="${b.w + p * 2}" height="${b.h + p * 2}" stroke-width="${1.2 / z}" stroke-dasharray="${4 / z} ${3 / z}"/>`;
+      if (list.length === 1 && list[0].type !== 'draw') {
+        const H = 9 / z, bx = b.x - p, by = b.y - p, bw = b.w + p * 2, bh = b.h + p * 2;
+        const pos = { nw: [bx, by], n: [bx + bw / 2, by], ne: [bx + bw, by], e: [bx + bw, by + bh / 2], se: [bx + bw, by + bh], s: [bx + bw / 2, by + bh], sw: [bx, by + bh], w: [bx, by + bh / 2] };
+        HANDLES.forEach(k => { if (list[0].type === 'text' && (k === 'n' || k === 's' || k === 'e' || k === 'w')) return; s += `<rect class="hdl" data-h="${k}" x="${pos[k][0] - H / 2}" y="${pos[k][1] - H / 2}" width="${H}" height="${H}" rx="${2 / z}" stroke-width="${1.5 / z}"/>`; });
+      }
+    }
+  }
+  if (bindHint) { const b = bbox(bindHint); s += `<rect class="bindhint" x="${b.x - 4}" y="${b.y - 4}" width="${b.w + 8}" height="${b.h + 8}" rx="${10}" stroke-width="${2 / z}"/>`; }
+  R.sel.innerHTML = s;
+  panel();
+}
+function select(ids) { sel = new Set(ids); drawSel(); }
+
+/* ---------- Creació ---------- */
+function mk(type, props = {}) {
+  const st = B.style;
+  return Object.assign({ id: uid(), type, x: 0, y: 0, w: 0, h: 0, stroke: st.stroke, fill: isShapeType(type) ? st.fill : 'none', sw: st.sw, dash: st.dash, fs: st.fs, text: '', seed: Math.floor(Math.random() * 2 ** 31) }, props);
+}
+const isShapeType = t => t === 'rect' || t === 'ellipse' || t === 'diamond';
+
+/* ---------- Edició de text ---------- */
+let editing = null;
+function edit(id) {
+  const el = byId(id); if (!el || !R) return;
+  editing = id; paint(el);
+  const ta = R.editor; ta.hidden = false; ta.value = el.text || '';
+  ta.dataset.mode = el.type === 'text' ? 'text' : 'center';
+  placeEditor();
+  requestAnimationFrame(() => { ta.focus(); ta.select(); });
+}
+function placeEditor() {
+  const el = byId(editing); if (!el) return;
+  const ta = R.editor, z = B.view.z, fs = fsOf(el) * (isLinear(el) ? .8 : 1);
+  ta.style.font = `500 ${fs * z}px ${fontOf()}`;
+  ta.style.color = el.stroke;
+  ta.style.lineHeight = 1.25;
+  let x, y, w;
+  if (el.type === 'text') { x = el.x; y = el.y; w = Math.max(el.w, 120); ta.style.textAlign = 'left'; }
+  else {
+    const b = isLinear(el) ? (() => { const [a, c] = ends(el); return { x: (a[0] + c[0]) / 2 - 110, y: (a[1] + c[1]) / 2, w: 220, h: 0 }; })() : bbox(el);
+    w = isLinear(el) ? 220 : Math.max(60, textW(el));
+    x = b.x + (b.w - w) / 2; y = b.y + b.h / 2; ta.style.textAlign = 'center';
+  }
+  ta.style.width = w * z + 'px';
+  ta.style.height = 'auto';
+  ta.style.height = Math.max(fs * 1.25 * z, ta.scrollHeight) + 'px';
+  const top = el.type === 'text' ? y * z + B.view.y : y * z + B.view.y - ta.offsetHeight / 2;
+  ta.style.transform = `translate(${x * z + B.view.x}px, ${top}px)`;
+}
+function endEdit() {
+  if (!editing) return;
+  const el = byId(editing), ta = R.editor, v = ta.value.replace(/\s+$/, '');
+  editing = null; ta.hidden = true;
+  if (!el) return;
+  if (el.text !== v) { if (!el._new) record(); el.text = v; }
+  delete el._new;
+  if (el.type === 'text') { if (!v) { B.els = B.els.filter(e => e !== el); sel.delete(el.id); } else fitText(el); }
+  else growToFit(el);
+  full(); save();
+}
+
+/* ---------- Interacció amb el punter ---------- */
+let drag = null, marquee = null, bindHint = null, lastTap = { t: 0, x: 0, y: 0 };
+const pointers = new Map();
+function shapeAt(cx, cy, except) {
+  for (const n of document.elementsFromPoint(cx, cy)) {
+    const g = n.closest && n.closest('[data-id]');
+    if (g && g.dataset.id !== except) { const el = byId(g.dataset.id); if (isShape(el) || el?.type === 'text') return el; }
+  }
+  return null;
+}
+function onDown(e) {
+  if (!R || (e.button !== 0 && e.button !== 1)) return;
+  const now = performance.now(), dbl = now - lastTap.t < 380 && Math.hypot(e.clientX - lastTap.x, e.clientY - lastTap.y) < 10;
+  lastTap = dbl ? { t: 0, x: 0, y: 0 } : { t: now, x: e.clientX, y: e.clientY };
+  if (dbl && (tool === 'select' || tool === 'text') && pointers.size === 0 && !spaceDown) { e.preventDefault(); onDbl(e); return; }
+  if (editing) { endEdit(); if (tool === 'select') return; }
+  R.svg.setPointerCapture(e.pointerId);
+  pointers.set(e.pointerId, [e.clientX, e.clientY]);
+  if (pointers.size === 2) { const [a, b] = [...pointers.values()]; drag = { mode: 'pinch', d0: Math.hypot(a[0] - b[0], a[1] - b[1]), z0: B.view.z, v0: { ...B.view }, m0: [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2] }; marquee = null; return; }
+  const [wx, wy] = toWorld(e.clientX, e.clientY);
+  const hitG = e.target.closest('[data-id]'), hit = hitG ? byId(hitG.dataset.id) : null;
+  const touch = e.pointerType === 'touch';
+  if (e.button === 1 || spaceDown || tool === 'hand') { drag = { mode: 'pan', sx: e.clientX, sy: e.clientY, v0: { ...B.view } }; R.stage.classList.add('panning'); return; }
+  if (tool === 'select') {
+    const hd = e.target.closest('[data-h]'), ep = e.target.closest('[data-ep]');
+    if (hd) { const el = byId([...sel][0]); drag = { mode: 'resize', k: hd.dataset.h, el, o: JSON.parse(JSON.stringify(el)), b0: bbox(el), rec: false }; return; }
+    if (ep) { const el = byId([...sel][0]); drag = { mode: 'ep', i: +ep.dataset.ep, el, rec: false }; return; }
+    if (hit) {
+      if (e.shiftKey) { sel.has(hit.id) ? sel.delete(hit.id) : sel.add(hit.id); drawSel(); }
+      else if (!sel.has(hit.id)) select([hit.id]);
+      if (e.altKey && sel.size) { record(); const copies = duplicate([...sel], 0); select(copies); }
+      drag = { mode: 'move', sx: wx, sy: wy, orig: snapshotSel(), rec: false, moved: false };
+      return;
+    }
+    if (touch) { drag = { mode: 'pan', sx: e.clientX, sy: e.clientY, v0: { ...B.view }, tapClear: true }; return; }
+    if (!e.shiftKey) select([]);
+    drag = { mode: 'marquee', sx: wx, sy: wy, base: new Set(sel) }; marquee = { x: wx, y: wy, w: 0, h: 0 };
+    return;
+  }
+  if (tool === 'eraser') { drag = { mode: 'erase' }; eraseAt(e.clientX, e.clientY); return; }
+  record();
+  if (tool === 'text') {
+    const el = mk('text', { x: wx, y: wy - fsOf(B.style) * .6, _new: true });
+    el.fill = 'none'; fitText(el); B.els.push(el); full(); select([el.id]); edit(el.id); if (!lock) setTool('select');
+    drag = null; return;
+  }
+  if (isShapeType(tool)) {
+    const el = mk(tool, { x: wx, y: wy }); B.els.push(el); paint(el); R.els.appendChild(nodes.get(el.id)); R.empty.hidden = true;
+    drag = { mode: 'create', el, sx: wx, sy: wy }; return;
+  }
+  if (tool === 'arrow' || tool === 'line') {
+    const s = tool === 'arrow' ? shapeAt(e.clientX, e.clientY) : null;
+    const el = mk(tool, { x: wx, y: wy, points: [[0, 0], [0, 0]], start: s ? s.id : null, end: null }); el.fill = 'none';
+    B.els.push(el); paint(el); R.els.appendChild(nodes.get(el.id)); R.empty.hidden = true;
+    drag = { mode: 'line', el }; return;
+  }
+  if (tool === 'draw') {
+    const el = mk('draw', { x: wx, y: wy, points: [[0, 0]] }); el.fill = 'none';
+    B.els.push(el); paint(el); R.els.appendChild(nodes.get(el.id)); R.empty.hidden = true;
+    drag = { mode: 'draw', el, last: [wx, wy] };
+  }
+}
+function snapshotSel() { const m = {}; sel.forEach(id => { const el = byId(id); if (el) m[id] = { x: el.x, y: el.y }; }); return m; }
+function onMove(e) {
+  if (!R) return;
+  if (pointers.has(e.pointerId)) pointers.set(e.pointerId, [e.clientX, e.clientY]);
+  if (!drag) {
+    if (tool === 'arrow' && e.pointerType === 'mouse') { const s = shapeAt(e.clientX, e.clientY); if (s !== bindHint) { bindHint = s; drawSel(); } }
+    return;
+  }
+  const [wx, wy] = toWorld(e.clientX, e.clientY);
+  switch (drag.mode) {
+    case 'pinch': {
+      if (pointers.size < 2) return;
+      const [a, b] = [...pointers.values()], d = Math.hypot(a[0] - b[0], a[1] - b[1]), m = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+      const r = R.svg.getBoundingClientRect(), z = clamp(drag.z0 * d / drag.d0, .1, 4);
+      const wx0 = (drag.m0[0] - r.left - drag.v0.x) / drag.v0.z, wy0 = (drag.m0[1] - r.top - drag.v0.y) / drag.v0.z;
+      B.view = { x: m[0] - r.left - wx0 * z, y: m[1] - r.top - wy0 * z, z }; applyView(); drawSel(); return;
+    }
+    case 'pan': B.view = { ...drag.v0, x: drag.v0.x + e.clientX - drag.sx, y: drag.v0.y + e.clientY - drag.sy }; if (Math.abs(e.clientX - drag.sx) + Math.abs(e.clientY - drag.sy) > 4) drag.tapClear = false; applyView(); drawSel(); return;
+    case 'marquee': {
+      marquee = { x: Math.min(drag.sx, wx), y: Math.min(drag.sy, wy), w: Math.abs(wx - drag.sx), h: Math.abs(wy - drag.sy) };
+      const ids = new Set(drag.base);
+      B.els.forEach(el => { const b = bbox(el); if (b.x >= marquee.x && b.y >= marquee.y && b.x + b.w <= marquee.x + marquee.w && b.y + b.h <= marquee.y + marquee.h) ids.add(el.id); });
+      sel = ids; drawSel(); return;
+    }
+    case 'move': {
+      let dx = wx - drag.sx, dy = wy - drag.sy;
+      if (!drag.moved && Math.hypot(dx, dy) * B.view.z < 3) return;
+      if (!drag.rec) { record(); drag.rec = true; }
+      drag.moved = true;
+      if (e.shiftKey) { if (Math.abs(dx) > Math.abs(dy)) dy = 0; else dx = 0; }
+      Object.entries(drag.orig).forEach(([id, o]) => {
+        const el = byId(id); if (!el) return;
+        if (isLinear(el)) { if ((el.start && !sel.has(el.start)) || (el.end && !sel.has(el.end))) { const [a, b] = ends(el); el.x = a[0]; el.y = a[1]; el.points = [[0, 0], [b[0] - a[0], b[1] - a[1]]]; el.start = el.end = null; drag.orig[id] = { x: el.x - dx, y: el.y - dy }; return; } }
+        el.x = o.x + dx; el.y = o.y + dy;
+      });
+      repaintRelated(Object.keys(drag.orig)); return;
+    }
+    case 'resize': {
+      if (!drag.rec) { record(); drag.rec = true; }
+      const { k, b0, o, el } = drag; let { x, y, w, h } = b0;
+      if (k.includes('e')) w = Math.max(8, wx - b0.x);
+      if (k.includes('s')) h = Math.max(8, wy - b0.y);
+      if (k.includes('w')) { w = Math.max(8, b0.x + b0.w - wx); x = b0.x + b0.w - w; }
+      if (k.includes('n')) { h = Math.max(8, b0.y + b0.h - wy); y = b0.y + b0.h - h; }
+      if ((e.shiftKey || el.type === 'text') && k.length === 2) { const s = Math.max(w / b0.w, h / b0.h); w = b0.w * s; h = b0.h * s; if (k.includes('w')) x = b0.x + b0.w - w; if (k.includes('n')) y = b0.y + b0.h - h; }
+      if (el.type === 'text') { el.fs = null; el.fsPx = Math.max(8, fsOf(o) * h / b0.h); el.x = x; el.y = y; fitText(el); }
+      else Object.assign(el, { x, y, w, h });
+      repaintRelated([el.id]); return;
+    }
+    case 'ep': {
+      if (!drag.rec) { record(); drag.rec = true; }
+      const el = drag.el, [a, b] = ends(el); let p = [wx, wy];
+      const s = el.type === 'arrow' ? shapeAt(e.clientX, e.clientY, el.id) : null;
+      bindHint = s;
+      if (drag.i === 0) { el.start = s ? s.id : null; const end = b; el.x = p[0]; el.y = p[1]; el.points = [[0, 0], [end[0] - p[0], end[1] - p[1]]]; }
+      else { el.end = s ? s.id : null; el.x = a[0]; el.y = a[1]; el.points = [[0, 0], [p[0] - a[0], p[1] - a[1]]]; }
+      paint(el); drawSel(); return;
+    }
+    case 'create': {
+      const el = drag.el; let w = wx - drag.sx, h = wy - drag.sy;
+      if (e.shiftKey) { const m = Math.max(Math.abs(w), Math.abs(h)); w = Math.sign(w || 1) * m; h = Math.sign(h || 1) * m; }
+      el.x = w < 0 ? drag.sx + w : drag.sx; el.y = h < 0 ? drag.sy + h : drag.sy; el.w = Math.abs(w); el.h = Math.abs(h);
+      paint(el); return;
+    }
+    case 'line': {
+      const el = drag.el; let dx = wx - el.x, dy = wy - el.y;
+      if (e.shiftKey) { const a = Math.round(Math.atan2(dy, dx) / (Math.PI / 12)) * (Math.PI / 12), L = Math.hypot(dx, dy); dx = Math.cos(a) * L; dy = Math.sin(a) * L; }
+      el.points = [[0, 0], [dx, dy]];
+      const s = el.type === 'arrow' ? shapeAt(e.clientX, e.clientY, el.id) : null;
+      el.end = s && s.id !== el.start ? s.id : null; bindHint = el.end ? s : null;
+      paint(el); drawSel(); return;
+    }
+    case 'draw': {
+      const el = drag.el; if (Math.hypot(wx - drag.last[0], wy - drag.last[1]) * B.view.z < 2) return;
+      drag.last = [wx, wy]; el.points.push([wx - el.x, wy - el.y]); paint(el); return;
+    }
+    case 'erase': eraseAt(e.clientX, e.clientY); return;
+  }
+}
+function eraseAt(cx, cy) {
+  const els = document.elementsFromPoint(cx, cy);
+  for (const n of els) { const g = n.closest && n.closest('[data-id]'); if (g) { const el = byId(g.dataset.id); if (el && !el._erase) { el._erase = true; paint(el); } } }
+}
+function onUp(e) {
+  pointers.delete(e.pointerId);
+  if (!drag || !R) return;
+  const d = drag; drag = null; R.stage.classList.remove('panning');
+  if (d.mode === 'pinch') { if (pointers.size === 1) { const [p] = [...pointers.values()]; drag = { mode: 'pan', sx: p[0], sy: p[1], v0: { ...B.view } }; } save(); return; }
+  if (d.mode === 'pan') { if (d.tapClear) select([]); save(); return; }
+  if (d.mode === 'marquee') { marquee = null; drawSel(); return; }
+  if (d.mode === 'move' && !d.moved) return;
+  if (d.mode === 'erase') { const gone = B.els.filter(el => el._erase); if (gone.length) { record(); B.els.forEach(el => delete el._erase); removeIds(gone.map(g => g.id)); } return; }
+  bindHint = null;
+  if (d.mode === 'create') {
+    const el = d.el;
+    if (el.w < 6 && el.h < 6) { el.w = el.type === 'ellipse' ? 140 : 160; el.h = el.type === 'diamond' ? 110 : 80; el.x -= el.w / 2; el.y -= el.h / 2; }
+    paint(el); select([el.id]); if (!lock) setTool('select');
+  } else if (d.mode === 'line') {
+    const el = d.el;
+    if (Math.hypot(...el.points[1]) < 6 && !el.end) { B.els = B.els.filter(x => x !== el); hist.pop(); full(); }
+    else { select([el.id]); if (!lock) setTool('select'); }
+  } else if (d.mode === 'draw') {
+    const el = d.el; if (el.points.length < 2) el.points.push([.5, .5]);
+    paint(el); if (!lock) setTool('select');
+  }
+  full(); save();
+}
+function onDbl(e) {
+  if (!R) return;
+  const g = e.target.closest('[data-id]'), el = g && byId(g.dataset.id);
+  if (el && el.type !== 'draw') { select([el.id]); edit(el.id); return; }
+  if (!el) {
+    const [wx, wy] = toWorld(e.clientX, e.clientY); record();
+    const t = mk('text', { x: wx, y: wy - fsOf(B.style) * .6, _new: true }); t.fill = 'none'; fitText(t); B.els.push(t); full(); select([t.id]); edit(t.id);
+  }
+}
+function onWheel(e) {
+  if (!R) return;
+  e.preventDefault();
+  const r = R.svg.getBoundingClientRect();
+  if (e.ctrlKey || e.metaKey) zoomAt(B.view.z * Math.exp(-e.deltaY * .0028), e.clientX - r.left, e.clientY - r.top);
+  else { B.view.x -= e.shiftKey && !e.deltaX ? e.deltaY : e.deltaX; B.view.y -= e.shiftKey && !e.deltaX ? 0 : e.deltaY; applyView(); drawSel(); save(); }
+}
+
+/* ---------- Accions ---------- */
+function removeIds(ids) {
+  const set = new Set(ids);
+  B.els.forEach(el => { if (isLinear(el) && (set.has(el.start) || set.has(el.end))) { const [a, b] = ends(el); el.x = a[0]; el.y = a[1]; el.points = [[0, 0], [b[0] - a[0], b[1] - a[1]]]; if (set.has(el.start)) el.start = null; if (set.has(el.end)) el.end = null; } });
+  B.els = B.els.filter(el => !set.has(el.id)); ids.forEach(id => sel.delete(id)); full(); save();
+}
+function materialize(el) { if (!isLinear(el)) return el; const [a, b] = ends(el); return { ...el, x: a[0], y: a[1], points: [[0, 0], [b[0] - a[0], b[1] - a[1]]] }; }
+function duplicate(ids, off = 24) {
+  const map = {}, out = [];
+  ids.forEach(id => { const el = byId(id); if (!el) return; const c = JSON.parse(JSON.stringify(materialize(el))); c.id = uid(); c.seed = Math.floor(Math.random() * 2 ** 31); c.x += off; c.y += off; map[id] = c.id; out.push(c); });
+  out.forEach(c => { if (isLinear(c)) { c.start = map[c.start] || null; c.end = map[c.end] || null; } });
+  B.els.push(...out); full(); save(); return out.map(c => c.id);
+}
+function paste() {
+  record();
+  const items = JSON.parse(clip), map = {};
+  const out = items.map(i => { const c = JSON.parse(JSON.stringify(i)); map[i.id] = c.id = uid(); c.seed = Math.floor(Math.random() * 2 ** 31); c.x += 30; c.y += 30; return c; });
+  out.forEach(c => { if (isLinear(c)) { c.start = map[c.start] || null; c.end = map[c.end] || null; } });
+  B.els.push(...out); full(); save(); select(out.map(c => c.id)); clip = JSON.stringify(out.map(materialize));
+}
+function setStyle(k, v) {
+  B.style[k] = v;
+  if (sel.size) { record(); sel.forEach(id => { const el = byId(id); if (!el) return; if (k === 'fill' && !isShape(el)) return; el[k] = v; if (k === 'fs') { el.fsPx = null; if (el.type === 'text') fitText(el); else growToFit(el); } }); full(); }
+  save(); panel();
+}
+function order(dir) {
+  if (!sel.size) return; record();
+  const picked = B.els.filter(e => sel.has(e.id)), rest = B.els.filter(e => !sel.has(e.id));
+  B.els = dir > 0 ? [...rest, ...picked] : [...picked, ...rest]; full(); save();
+}
+function setTool(t) {
+  tool = t; if (!R) return;
+  R.tools.querySelectorAll('[data-tool]').forEach(b => b.setAttribute('aria-pressed', b.dataset.tool === t));
+  R.stage.dataset.tool = t; bindHint = null; if (t !== 'select') { sel.clear(); drawSel(); } else panel();
+}
+function nudge(dx, dy) { if (!sel.size) return; record(); sel.forEach(id => { const el = byId(id); if (el) { el.x += dx; el.y += dy; } }); repaintRelated([...sel]); save(); }
+
+/* ---------- Exportació ---------- */
+function exportSVG(list) {
+  list = list && list.length ? list : B.els;
+  if (!list.length) return null;
+  const b = union(list), pad = 32, w = Math.ceil(b.w + pad * 2), h = Math.ceil(b.h + pad * 2);
+  const body = list.map(el => `<g>${elSVG(el, true)}</g>`).join('');
+  return { w, h, svg: `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="${f1(b.x - pad)} ${f1(b.y - pad)} ${w} ${h}"><rect x="${f1(b.x - pad)}" y="${f1(b.y - pad)}" width="${w}" height="${h}" fill="#f0ede7"/>${body}</svg>` };
+}
+function download(name, blob) { const u = URL.createObjectURL(blob), a = document.createElement('a'); a.href = u; a.download = name; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(u), 1500); }
+function exportAs(kind) {
+  const list = sel.size ? [...sel].map(byId) : B.els, stamp = new Date().toISOString().slice(0, 10);
+  if (kind === 'json') { download(`nio-pissarra-${stamp}.json`, new Blob([JSON.stringify({ v: 1, els: B.els }, null, 2)], { type: 'application/json' })); return true; }
+  const x = exportSVG(list); if (!x) return false;
+  if (kind === 'svg') { download(`nio-pissarra-${stamp}.svg`, new Blob([x.svg], { type: 'image/svg+xml' })); return true; }
+  const img = new Image(), url = URL.createObjectURL(new Blob([x.svg], { type: 'image/svg+xml' }));
+  img.onload = () => { const c = document.createElement('canvas'), s = 2; c.width = x.w * s; c.height = x.h * s; const g = c.getContext('2d'); g.scale(s, s); g.drawImage(img, 0, 0); URL.revokeObjectURL(url); c.toBlob(bl => download(`nio-pissarra-${stamp}.png`, bl), 'image/png'); };
+  img.src = url; return true;
+}
+function importJSON(file) {
+  file.text().then(t => { const d = JSON.parse(t); if (!d || !Array.isArray(d.els)) throw 0; record(); B.els = d.els; sel.clear(); full(); fit(); save(); say('He importat la pissarra.'); })
+    .catch(() => say('Aquest fitxer no és una pissarra de Nio.'));
+}
+
+/* ---------- Diagrames ---------- */
+function nodeSize(label, type, fsKey) {
+  const fs = SIZES[fsKey || B.style.fs] || 24, lines = wrap(label, fs, type === 'diamond' ? 150 : type === 'ellipse' ? 200 : 240);
+  const tw = Math.max(...lines.map(l => measure(l, fs)), 40), th = lines.length * fs * 1.25;
+  if (type === 'rect') return [Math.max(150, Math.ceil(tw + 56)), Math.max(72, Math.ceil(th + 40))];
+  if (type === 'ellipse') return [Math.max(160, Math.ceil((tw + 8) / .7 + 8)), Math.max(80, Math.ceil(th * 1.5 + 24))];
+  return [Math.max(190, Math.ceil((tw + 6) / .5 + 8)), Math.max(120, Math.ceil(th * 2 + 32))];
+}
+// Fa créixer la figura (des del centre) si el text no hi cap.
+function growToFit(el) {
+  if (!isShape(el) || !el.text) return;
+  const [w, h] = nodeSize(el.text, el.type, el.fs), [cx, cy] = center(el);
+  const nw = Math.max(el.w, w), nh = Math.max(el.h, h);
+  if (nw !== el.w || nh !== el.h) { el.w = nw; el.h = nh; el.x = cx - nw / 2; el.y = cy - nh / 2; }
+}
+function guessType(label) {
+  const n = norm(label);
+  if (/\?$/.test(label.trim())) return 'diamond';
+  if (/^(inici|comenc|fi|final|start|end|sortida)\b/.test(n)) return 'ellipse';
+  return 'rect';
+}
+function freeSpot() { const b = union(B.els); if (!b) { const r = R.svg.getBoundingClientRect(); return [(r.width / 2 - B.view.x) / B.view.z, (r.height / 2 - B.view.y) / B.view.z, true]; } return [b.x + b.w + 160, b.y + b.h / 2, false]; }
+function findEl(q) {
+  const n = norm(q).replace(/^(el|la|els|les|l'|l’)\s*/, '').replace(/^["'«“]|["'»”]$/g, '');
+  if (!n) return null;
+  const withText = B.els.filter(e => e.text);
+  return withText.find(e => norm(e.text) === n) || withText.find(e => norm(e.text).startsWith(n)) || withText.find(e => norm(e.text).includes(n)) || null;
+}
+function addNode(label, type, x, y, extra = {}) {
+  type = type || guessType(label);
+  const [w, h] = nodeSize(label, type, B.style.fs);
+  const el = mk(type, Object.assign({ x: x - w / 2, y: y - h / 2, w, h, text: label.trim() }, extra));
+  if (type === 'diamond' && el.fill === 'none') el.fill = '#fbf1bf';
+  B.els.push(el); return el;
+}
+function addEdge(a, b, label, type = 'arrow') {
+  const el = mk(type, { x: 0, y: 0, points: [[0, 0], [1, 1]], start: a.id, end: b.id, text: label || '' }); el.fill = 'none'; el.dash = false;
+  B.els.push(el); return el;
+}
+function layoutGraph(nodesList, edges, dir = 'h', origin) {
+  // nivells per camí més llarg des de les arrels (tolerant a cicles)
+  const ids = nodesList.map(n => n.id), indeg = Object.fromEntries(ids.map(i => [i, 0])), out = Object.fromEntries(ids.map(i => [i, []]));
+  edges.forEach(([a, b]) => { if (a in out && b in indeg) { out[a].push(b); indeg[b]++; } });
+  const level = Object.fromEntries(ids.map(i => [i, 0])), queue = ids.filter(i => !indeg[i]);
+  if (!queue.length && ids.length) queue.push(ids[0]);
+  const seen = new Set(), deg = { ...indeg };
+  while (queue.length) {
+    const i = queue.shift(); if (seen.has(i)) continue; seen.add(i);
+    out[i].forEach(j => { level[j] = Math.max(level[j], level[i] + 1); if (--deg[j] <= 0) queue.push(j); });
+  }
+  ids.forEach(i => { if (!seen.has(i)) level[i] = Math.max(level[i], 0); });
+  const cols = {}; ids.forEach(i => (cols[level[i]] = cols[level[i]] || []).push(i));
+  const nMap = Object.fromEntries(nodesList.map(n => [n.id, n]));
+  const gapMain = 110, gapCross = 56;
+  const levels = Object.keys(cols).map(Number).sort((a, b) => a - b);
+  const mainSize = l => Math.max(...cols[l].map(i => dir === 'h' ? nMap[i].w : nMap[i].h));
+  let cursor = origin[0];
+  if (dir === 'v') cursor = origin[1];
+  levels.forEach(l => {
+    const list = cols[l], ms = mainSize(l);
+    const cross = list.reduce((s, i) => s + (dir === 'h' ? nMap[i].h : nMap[i].w), 0) + gapCross * (list.length - 1);
+    let c = (dir === 'h' ? origin[1] : origin[0]) - cross / 2;
+    list.forEach(i => {
+      const n = nMap[i];
+      if (dir === 'h') { n.x = cursor + (ms - n.w) / 2; n.y = c; c += n.h + gapCross; }
+      else { n.y = cursor + (ms - n.h) / 2; n.x = c; c += n.w + gapCross; }
+    });
+    cursor += ms + gapMain;
+  });
+}
+function parseEdges(text) {
+  const edges = [], labels = [];
+  text.split(/\n|;/).map(s => s.trim()).filter(Boolean).forEach(line => {
+    let lbl = '';
+    const m = line.match(/^(.*?)\s*[:|]\s*([^:>→-][^>→]*)$/);
+    if (m && /->|→|=>/.test(m[1])) { line = m[1]; lbl = m[2].trim(); }
+    const parts = line.split(/\s*(?:-+>|→|=>)\s*/).map(s => s.replace(/^["'«]|["'»]$/g, '').trim()).filter(Boolean);
+    for (let i = 0; i < parts.length - 1; i++) { edges.push([parts[i], parts[i + 1], i === parts.length - 2 ? lbl : '']); }
+    if (parts.length === 1) labels.push(parts[0]);
+  });
+  return { edges, singles: labels };
+}
+function buildGraph(edgeList, singles = [], dir = 'h') {
+  const names = [], seen = new Map();
+  const add = n => { const k = norm(n); if (!seen.has(k)) { seen.set(k, n); names.push(n); } return k; };
+  edgeList.forEach(([a, b]) => { add(a); add(b); }); singles.forEach(add);
+  const [ox, oy, empty] = freeSpot();
+  const created = {}, list = [];
+  names.forEach(n => { const existing = findEl(n); const el = existing && isShape(existing) ? existing : addNode(n, null, 0, 0); created[norm(n)] = el; if (!existing) list.push(el); });
+  const edges = edgeList.map(([a, b, l]) => { const A = created[norm(a)], Bn = created[norm(b)]; addEdge(A, Bn, l); return [A.id, Bn.id]; });
+  if (list.length) {
+    const origin = empty ? [ox - 0, oy] : [ox, oy];
+    layoutGraph(list, edges, dir, origin);
+    if (empty) { const u = union(list); list.forEach(n => { if (dir === 'h') n.x -= u.w / 2; else n.y -= u.h / 2; }); }
+  }
+  return list;
+}
+function mindMap(center, items) {
+  const [ox, oy, empty] = freeSpot();
+  const cx = empty ? ox : ox + 260, cy = oy;
+  const c = addNode(center, 'ellipse', cx, cy, { fill: '#fbf1bf' });
+  const out = [c], n = items.length, R0 = 230 + n * 12;
+  items.forEach((it, i) => {
+    const a = -Math.PI / 2 + (i / n) * Math.PI * 2, el = addNode(it, 'rect', cx + Math.cos(a) * R0 * 1.25, cy + Math.sin(a) * R0 * .8);
+    addEdge(c, el, '', 'line'); out.push(el);
+  });
+  return out;
+}
+function orgChart(spec) {
+  const pairs = [];
+  spec.split(/;|\n/).map(s => s.trim()).filter(Boolean).forEach(part => {
+    const m = part.split(/\s*>\s*/); if (m.length < 2) return;
+    for (let i = 0; i < m.length - 1; i++) m[i + 1].split(/\s*,\s*|\s+i\s+/).filter(Boolean).forEach(ch => { const parent = m[i].split(/\s*,\s*/).pop(); pairs.push([parent, ch, '']); });
+  });
+  return pairs.length ? buildGraph(pairs, [], 'v') : [];
+}
+const TEMPLATES = {
+  agent: { say: 'Aquí tens com treballa un agent de Nio, de la dada a l’acció.', edges: [['Banc i ERP', 'Lectura', ''], ['Lectura', 'Regles', ''], ['Regles', 'Supera el llindar?', ''], ['Supera el llindar?', 'Aprovació humana', 'sí'], ['Supera el llindar?', 'Acció automàtica', 'no'], ['Aprovació humana', 'Registre', ''], ['Acció automàtica', 'Registre', '']] },
+  aprovacio: { say: 'Flux d’aprovació: el que supera el llindar passa per una persona.', edges: [['Inici', 'Tasca detectada', ''], ['Tasca detectada', 'Import > llindar?', ''], ['Import > llindar?', 'Demana aprovació', 'sí'], ['Import > llindar?', 'Executa', 'no'], ['Demana aprovació', 'Aprovada?', ''], ['Aprovada?', 'Executa', 'sí'], ['Aprovada?', 'Arxiva amb motiu', 'no'], ['Executa', 'Fi', ''], ['Arxiva amb motiu', 'Fi', '']] },
+  conciliacio: { say: 'Conciliació bancària, pas a pas.', edges: [['Extracte bancari', 'Creuar amb factures', ''], ['Factures ERP', 'Creuar amb factures', ''], ['Creuar amb factures', 'Quadra?', ''], ['Quadra?', 'Marcar conciliat', 'sí'], ['Quadra?', 'Excepció per revisar', 'no'], ['Excepció per revisar', 'Aprovació', '']] }
+};
+
+/* ---------- Xat ---------- */
+const SUGG = ['Flux: Comanda -> Validació -> Preparació -> Enviament', 'Mapa mental de Nio: agents, connexions, aprovacions, registre', 'Organigrama: Direcció > Finances, Operacions; Finances > Comptabilitat', 'Plantilla d’aprovació', 'Ajuda'];
+const HELP = `Puc dibuixar i editar per tu. Prova, per exemple:
+• <b>Flux: A -> B -> C</b> (una fletxa per línia, amb <b>: etiqueta</b> si vols)
+• <b>Mapa mental de X: a, b, c</b>
+• <b>Organigrama: Direcció > Finances, Operacions</b>
+• <b>Afegeix un rombe “Quadra?”</b> · <b>Connecta Banc amb ERP</b>
+• <b>Pinta Banc de verd</b> · <b>Reanomena Banc a Caixa</b>
+• <b>Esborra ERP</b> · <b>Ordena-ho</b> · <b>Centra</b> · <b>Desfés</b>
+• <b>Plantilla agent</b>, <b>Plantilla d’aprovació</b>, <b>Plantilla conciliació</b>
+• <b>Exporta PNG</b>, <b>SVG</b> o <b>JSON</b>`;
+function say(html, me) {
+  B.chat.push({ me: !!me, html, t: Date.now() }); if (B.chat.length > 200) B.chat.splice(0, B.chat.length - 200);
+  save(); drawChat();
+}
+function drawChat() {
+  if (!R) return;
+  const box = R.msgs;
+  box.innerHTML = (B.chat.length ? B.chat : [{ me: false, html: 'Hola, sóc en Nio. Explica’m què vols dibuixar i ho faig per tu. Escriu <b>ajuda</b> per veure exemples.' }])
+    .map(m => m.me ? `<div class="m me">${m.html}</div>` : `<div class="m nio">${window.NioBot ? NioBot.html('idle', 'mav') : ''}<div>${m.html}</div></div>`).join('');
+  box.scrollTop = box.scrollHeight;
+  window.NioBot?.refresh();
+}
+function colorWord(w) { const n = norm(w).replace(/s$/, ''); return NAMED[n] ? n : null; }
+function act(raw) {
+  const text = raw.trim(); if (!text) return;
+  if (B.opts.brain && B.opts.brain !== 'rules' && window.NioBrains?.list().some((b) => b.id === B.opts.brain)) return aiAct(text);
+  ruleAct(text);
+}
+function ruleAct(text) {
+  say(esc(text).replace(/\n/g, '<br>'), true);
+  const n = norm(text);
+  let reply = null, focus = null;
+  const done = (msg, els) => { reply = msg; focus = els; };
+  try {
+    if (/^(ajuda|help|que (pots|saps) fer|com funciona)/.test(n)) reply = HELP;
+    else if (/^(desfes|desfer|undo|torna enrere)/.test(n)) reply = undo() ? 'Fet, he desfet l’últim canvi.' : 'No hi ha res per desfer.';
+    else if (/^(refes|refer|redo)/.test(n)) reply = redo() ? 'Refet.' : 'No hi ha res per refer.';
+    else if (/(esborra|elimina|treu|neteja|buida)(-ho)?\s*(tot|la pissarra)?$/.test(n) && /(tot|neteja|buida|pissarra)/.test(n)) { if (B.els.length) { record(); B.els = []; sel.clear(); full(); reply = 'He netejat la pissarra. Si t’has equivocat, digues <b>desfés</b>.'; } else reply = 'La pissarra ja és buida.'; }
+    else if (/^(centra|ajusta|enquadra|mostra-ho tot|zoom)/.test(n)) { fit(); reply = 'Ho tens tot a la vista.'; }
+    else if (/^(ordena|organitza|disposa|reorganitza|auto)/.test(n)) {
+      const shapes = B.els.filter(isShape), edges = B.els.filter(e => isLinear(e) && e.start && e.end).map(e => [e.start, e.end]);
+      if (!shapes.length) reply = 'No hi ha cap forma per ordenar.';
+      else { record(); const b = union(shapes); layoutGraph(shapes, edges, /vertical|amunt|avall/.test(n) ? 'v' : 'h', [b.x, b.y + b.h / 2]); full(); done('He reorganitzat el diagrama.', shapes); }
+    }
+    else if (/^exporta/.test(n)) { const k = /svg/.test(n) ? 'svg' : /json/.test(n) ? 'json' : 'png'; reply = exportAs(k) ? `T’he descarregat la pissarra en ${k.toUpperCase()}.` : 'Encara no hi ha res per exportar.'; }
+    else if (/plantilla|com treballa un agent|flux d.?un agent/.test(n)) {
+      const k = /aprova/.test(n) ? 'aprovacio' : /concilia/.test(n) ? 'conciliacio' : 'agent';
+      record(); const t = TEMPLATES[k], list = buildGraph(t.edges, [], 'h'); done(t.say, list);
+    }
+    else if (/^(mapa mental|mapa conceptual|mindmap)/.test(n)) {
+      const body = text.replace(/^[^:]*?(de|sobre)\s+/i, '').replace(/^(mapa mental|mapa conceptual|mindmap)\s*/i, '');
+      const [c, rest] = body.includes(':') ? [body.slice(0, body.indexOf(':')), body.slice(body.indexOf(':') + 1)] : [body, ''];
+      const items = rest.split(/,|\n|;/).map(s => s.trim()).filter(Boolean);
+      if (!c.trim()) reply = 'Digues-me el tema i les branques: <b>Mapa mental de Nio: agents, aprovacions</b>.';
+      else { record(); done(`Mapa mental de «${esc(c.trim())}» amb ${items.length} branques.`, mindMap(c.trim(), items.length ? items : ['Idea 1', 'Idea 2', 'Idea 3'])); }
+    }
+    else if (/^organigrama/.test(n)) {
+      const spec = text.replace(/^organigrama\s*(de [^:]*)?:?\s*/i, '');
+      record(); const list = orgChart(spec);
+      if (list.length) done('Organigrama fet.', list); else { hist.pop(); reply = 'Fes servir <b>></b> per indicar qui depèn de qui: <b>Organigrama: Direcció > Finances, Operacions</b>.'; }
+    }
+    else if (/->|→|=>/.test(text)) {
+      const body = text.replace(/^\s*(flux|diagrama( de flux)?|proces|procés|graf)\s*(vertical)?\s*:?\s*/i, '');
+      const { edges, singles } = parseEdges(body);
+      if (edges.length) { record(); const list = buildGraph(edges, singles, /vertical/.test(n) ? 'v' : 'h'); done(list.length ? `Fet: ${list.length} ${list.length === 1 ? 'caixa' : 'caixes'} i ${edges.length} ${edges.length === 1 ? 'fletxa' : 'fletxes'}.` : `He afegit ${edges.length} ${edges.length === 1 ? 'connexió' : 'connexions'}.`, list.length ? list : null); }
+    }
+    else if (/^(flux|diagrama de flux|proces|passos)\b/.test(n)) {
+      const items = text.replace(/^[^:]*:\s*/, '').split(/,|\n|;/).map(s => s.trim()).filter(Boolean);
+      if (items.length > 1) { record(); const edges = items.slice(1).map((it, i) => [items[i], it, '']); done(`Flux de ${items.length} passos.`, buildGraph(edges, [], /vertical/.test(n) ? 'v' : 'h')); }
+    }
+    if (reply == null) {
+      let m;
+      if ((m = text.match(/^(?:afegeix|crea|posa|dibuixa|fes)\s+(?:un |una |uns |unes )?(rectangle|caixa|quadrat|cercle|el·lipse|elipse|ellipse|oval|rombe|diamant|decisió|decisio|text|nota)s?\s*(?:amb el text\s*|que digui\s*|de\s*)?(.*)$/i))) {
+        const kind = norm(m[1]), label = m[2].replace(/^["'«“]|["'»”]$/g, '').trim();
+        record();
+        const [x, y] = (() => { const r = R.svg.getBoundingClientRect(); return [(r.width / 2 - B.view.x) / B.view.z, (r.height / 2 - B.view.y) / B.view.z]; })();
+        let el;
+        if (/text|nota/.test(kind)) { el = mk('text', { x, y, text: label || 'Text' }); el.fill = 'none'; fitText(el); el.x -= el.w / 2; B.els.push(el); }
+        else el = addNode(label || ' ', /cercle|elipse|ellipse|oval/.test(kind) ? 'ellipse' : /rombe|diamant|decisio/.test(kind) ? 'diamond' : 'rect', x, y);
+        if (!label && el.type !== 'text') el.text = '';
+        done(label ? `He afegit «${esc(label)}».` : 'Afegit. Fes-hi doble clic per escriure-hi.', [el]);
+      }
+      else if ((m = text.match(/^(?:connecta|uneix|enllaça|enllaca|relaciona)\s+(.+?)\s+(?:amb|i|a|fins a)\s+(.+?)(?:\s*:\s*(.+))?$/i))) {
+        const a = findEl(m[1]), b = findEl(m[2]);
+        if (!a || !b) reply = `No trobo ${!a ? `«${esc(m[1])}»` : `«${esc(m[2])}»`} a la pissarra.`;
+        else { record(); addEdge(a, b, m[3] || ''); done(`He connectat «${esc(a.text)}» amb «${esc(b.text)}».`, null); }
+      }
+      else if ((m = text.match(/^(?:canvia|posa|pinta|acoloreix)\s+(?:el color de\s+|el fons de\s+)?(.+?)\s+(?:a|de|en)\s+(?:color\s+)?(\S+)$/i)) && colorWord(m[2])) {
+        const fillMode = /fons/.test(norm(text)), c = colorWord(m[2]);
+        const targets = /^(tot|totes|tots|la seleccio|seleccio|aixo)$/.test(norm(m[1])) ? (sel.size ? [...sel].map(byId) : B.els) : [findEl(m[1])].filter(Boolean);
+        if (!targets.length) reply = `No trobo «${esc(m[1])}».`;
+        else { record(); targets.forEach(el => { if (fillMode && isShape(el)) el.fill = NAMED_FILL[c] || el.fill; else { el.stroke = NAMED[c]; if (isShape(el) && el.fill !== 'none') el.fill = NAMED_FILL[c] || el.fill; } }); full(); done(`Fet, ${targets.length === 1 ? `«${esc(targets[0].text || 'l’element')}» ara és` : 'ara són'} de color ${c}.`, null); }
+      }
+      else if ((m = text.match(/^(?:reanomena|canvia el text de|canvia el nom de|anomena)\s+(.+?)\s+(?:a|per|com)\s+(.+)$/i))) {
+        const el = findEl(m[1]);
+        if (!el) reply = `No trobo «${esc(m[1])}».`;
+        else { record(); const old = el.text; el.text = m[2].replace(/^["'«“]|["'»”]$/g, '').trim(); if (el.type === 'text') fitText(el); else if (isShape(el)) { const [w, h] = nodeSize(el.text, el.type); const cx = el.x + el.w / 2, cy = el.y + el.h / 2; el.w = Math.max(el.w, w); el.h = Math.max(el.h, h); el.x = cx - el.w / 2; el.y = cy - el.h / 2; } full(); done(`«${esc(old)}» ara es diu «${esc(el.text)}».`, null); }
+      }
+      else if ((m = text.match(/^(?:esborra|elimina|treu|suprimeix)\s+(.+)$/i))) {
+        if (/^(la )?seleccio$/.test(norm(m[1]))) { if (sel.size) { record(); removeIds([...sel]); reply = 'He esborrat la selecció.'; } else reply = 'No hi ha res seleccionat.'; }
+        else { const el = findEl(m[1]); if (!el) reply = `No trobo «${esc(m[1])}».`; else { record(); removeIds([el.id]); reply = `He esborrat «${esc(el.text)}».`; } }
+      }
+      else if (/^(selecciona-ho tot|selecciona tot)/.test(n)) { select(B.els.map(e => e.id)); reply = 'Tot seleccionat.'; }
+      else if (/^(traç|traz|estil)\s*(a ma|ma|fet a ma)/.test(n) || /^(mode )?(a ma|esbos)/.test(n)) { B.opts.rough = true; B.opts.font = 'hand'; full(); reply = 'Ara dibuixo a mà.'; }
+      else if (/^(traç|estil)?\s*(net|pla|recte|polit)/.test(n)) { B.opts.rough = false; B.opts.font = 'clean'; full(); reply = 'Ara dibuixo amb traç net.'; }
+      else if (/^(hola|bon dia|bona tarda|bones)/.test(n)) reply = 'Hola! Què dibuixem? Pots demanar-me un flux, un mapa mental o un organigrama.';
+      else if (/,/.test(text) && text.split(',').length > 2 && !/\s(i|amb)\s/.test(n)) {
+        const items = text.split(',').map(s => s.trim()).filter(Boolean); record();
+        done(`L’he entès com un flux de ${items.length} passos.`, buildGraph(items.slice(1).map((it, i) => [items[i], it, '']), [], 'h'));
+      }
+    }
+  } catch (err) { console.error(err); reply = 'Ui, no m’ha sortit bé. Torna-ho a provar d’una altra manera.'; }
+  if (reply == null) reply = 'Encara no sé fer això. Prova amb <b>Flux: A -> B -> C</b>, <b>Mapa mental de X: a, b</b> o escriu <b>ajuda</b>.';
+  full(); save();
+  if (focus && focus.length) { select(focus.map(e => e.id)); fit(focus); }
+  R.chatBot && (R.chatBot.dataset.mood = 'work');
+  setTimeout(() => { say(reply); if (R && R.chatBot) R.chatBot.dataset.mood = 'happy'; setTimeout(() => { if (R && R.chatBot) R.chatBot.dataset.mood = 'idle'; }, 1400); }, reduce ? 0 : 280);
+}
+
+/* ---------- Xat amb un model (Ollama o al mòbil) ---------- */
+const SYSTEM = `Ets en Nio, l’assistent d’una pissarra de diagrames. Respon NOMÉS amb un objecte JSON vàlid, sense cap text fora, amb aquesta forma:
+{"reply": "frase curta en català per a l’usuari", "actions": [ ... ]}
+Accions possibles:
+{"op":"flow","edges":[["Origen","Destí","etiqueta opcional"]],"dir":"h"}  diagrama de flux; "dir" pot ser "h" (horitzontal) o "v" (vertical). Si un text acaba en "?", surt com a decisió.
+{"op":"mindmap","center":"Tema","items":["Branca","Branca"]}
+{"op":"org","pairs":[["Cap","Persona o equip que en depèn"]]}  organigrama de dalt a baix.
+{"op":"add","shape":"rect","text":"..."}  shape pot ser rect, ellipse, diamond o text.
+{"op":"connect","from":"text d’un element","to":"text d’un element","label":""}
+{"op":"color","target":"text d’un element","color":"verd"}  colors: negre, vermell, verd, blau, taronja, lila, groc, gris.
+{"op":"rename","target":"text d’un element","to":"text nou"}
+{"op":"delete","target":"text d’un element"}
+{"op":"clear"}
+{"op":"layout","dir":"h"}
+Fes servir textos curts (d’una a quatre paraules) i en català, si l’usuari no diu el contrari. Si només et fan una pregunta, respon amb "actions": [].`;
+function boardSummary() {
+  const shapes = B.els.filter((e) => (isShape(e) || e.type === 'text') && e.text).slice(0, 60);
+  const edges = B.els.filter((e) => isLinear(e) && e.start && e.end).slice(0, 60).map((e) => `${byId(e.start)?.text || '?'} -> ${byId(e.end)?.text || '?'}${e.text ? ` (${e.text})` : ''}`);
+  if (!shapes.length) return 'La pissarra és buida.';
+  return `Elements: ${shapes.map((e) => `«${e.text}»`).join(', ')}\nFletxes:\n${edges.join('\n') || '(cap)'}`;
+}
+function parsePlan(raw) {
+  const t = String(raw || ''), a = t.indexOf('{'), b = t.lastIndexOf('}');
+  if (a < 0 || b <= a) return null;
+  try { const p = JSON.parse(t.slice(a, b + 1)); return p && typeof p === 'object' ? { reply: String(p.reply || ''), actions: Array.isArray(p.actions) ? p.actions.slice(0, 30) : [] } : null; }
+  catch { return null; }
+}
+const str = (v, n = 80) => String(v ?? '').replace(/\s+/g, ' ').trim().slice(0, n);
+function applyPlan(actions) {
+  const made = [];
+  const [cx, cy] = (() => { const r = R.svg.getBoundingClientRect(); return [(r.width / 2 - B.view.x) / B.view.z, (r.height / 2 - B.view.y) / B.view.z]; })();
+  for (const a of actions) {
+    if (!a || typeof a !== 'object') continue;
+    const dir = a.dir === 'v' ? 'v' : 'h';
+    switch (a.op) {
+      case 'flow': {
+        const edges = (Array.isArray(a.edges) ? a.edges : []).slice(0, 60).filter((e) => Array.isArray(e) && e[0] && e[1]).map((e) => [str(e[0]), str(e[1]), str(e[2] || '', 40)]);
+        if (edges.length) made.push(...buildGraph(edges, [], dir));
+        break;
+      }
+      case 'mindmap': { const c = str(a.center); if (c) made.push(...mindMap(c, (Array.isArray(a.items) ? a.items : []).slice(0, 16).map((x) => str(x)).filter(Boolean))); break; }
+      case 'org': { const pairs = (Array.isArray(a.pairs) ? a.pairs : []).slice(0, 60).filter((e) => Array.isArray(e) && e[0] && e[1]).map((e) => [str(e[0]), str(e[1]), '']); if (pairs.length) made.push(...buildGraph(pairs, [], 'v')); break; }
+      case 'add': {
+        const text = str(a.text, 120);
+        if (a.shape === 'text') { const el = mk('text', { x: cx, y: cy, text: text || 'Text' }); el.fill = 'none'; fitText(el); el.x -= el.w / 2; B.els.push(el); made.push(el); }
+        else made.push(addNode(text || ' ', ['ellipse', 'diamond'].includes(a.shape) ? a.shape : 'rect', cx, cy + made.length * 20));
+        break;
+      }
+      case 'connect': { const f = findEl(str(a.from)), t = findEl(str(a.to)); if (f && t) addEdge(f, t, str(a.label || '', 40)); break; }
+      case 'color': { const el = findEl(str(a.target)), c = colorWord(str(a.color)); if (el && c) { el.stroke = NAMED[c]; if (isShape(el) && el.fill !== 'none') el.fill = NAMED_FILL[c] || el.fill; } break; }
+      case 'rename': { const el = findEl(str(a.target)); if (el && a.to) { el.text = str(a.to, 120); if (el.type === 'text') fitText(el); } break; }
+      case 'delete': { const el = findEl(str(a.target)); if (el) removeIds([el.id]); break; }
+      case 'clear': B.els = []; sel.clear(); break;
+      case 'layout': { const shapes = B.els.filter(isShape), edges = B.els.filter((e) => isLinear(e) && e.start && e.end).map((e) => [e.start, e.end]); if (shapes.length) { const bb = union(shapes); layoutGraph(shapes, edges, dir, [bb.x, bb.y + bb.h / 2]); made.push(...shapes); } break; }
+    }
+  }
+  return made;
+}
+let thinking = false;
+async function aiAct(text) {
+  if (thinking) return;
+  say(esc(text).replace(/\n/g, '<br>'), true);
+  thinking = true;
+  const wait = document.createElement('div');
+  wait.className = 'm nio thinking';
+  wait.innerHTML = `${window.NioBot ? NioBot.html('work', 'mav') : ''}<div>Pensant…</div>`;
+  R.msgs.appendChild(wait); R.msgs.scrollTop = R.msgs.scrollHeight; window.NioBot?.refresh();
+  if (R.chatBot) R.chatBot.dataset.mood = 'work';
+  let raw, err;
+  try { raw = await window.NioBrains.ask(B.opts.brain, [{ role: 'system', content: SYSTEM }, { role: 'user', content: `Pissarra actual:\n${boardSummary()}\n\nPetició de l’usuari: ${text}` }]); }
+  catch (e) { err = e; }
+  thinking = false; wait.remove();
+  if (!R) return;
+  if (R.chatBot) R.chatBot.dataset.mood = 'idle';
+  if (err) return say(`No he pogut parlar amb el model: ${esc(err.message)}. Pots tornar a <b>Ordres ràpides</b> al selector de dalt.`);
+  const plan = parsePlan(raw);
+  if (!plan) return say(`${esc(str(raw, 600)) || 'El model no ha respost res.'}<br><span class="dim">(No m’ha tornat cap acció per a la pissarra.)</span>`);
+  let made = [];
+  if (plan.actions.length) { record(); made = applyPlan(plan.actions); full(); save(); }
+  if (made.length) { select(made.map((e) => e.id)); fit(made); }
+  say(esc(plan.reply || (plan.actions.length ? 'Fet.' : 'D’acord.')));
+}
+function drawBrains() {
+  if (!R) return;
+  const sel_ = R.root.querySelector('#bdBrain'); if (!sel_) return;
+  const list = window.NioBrains?.list() || [{ id: 'rules', label: 'Ordres ràpides' }];
+  const cur = list.some((b) => b.id === B.opts.brain) ? B.opts.brain : 'rules'; // la preferència es manté encara que ara no hi sigui
+  sel_.innerHTML = list.map((b) => `<option value="${esc(b.id)}" ${b.id === cur ? 'selected' : ''}>${esc(b.label)}</option>`).join('');
+}
+
+/* ---------- Panell d'estil ---------- */
+function panel() {
+  if (!R) return;
+  const list = [...sel].map(byId).filter(Boolean);
+  const show = list.length > 0 || (tool !== 'select' && tool !== 'hand' && tool !== 'eraser');
+  R.style.hidden = !show;
+  R.stage.classList.toggle('has-style', show);
+  if (!show) return;
+  const cur = list[0] || B.style, anyShape = list.length ? list.some(isShape) : isShapeType(tool);
+  const hasText = list.length ? list.some(e => e.type !== 'draw') : tool !== 'draw';
+  const sw = v => `<button type="button" class="sw-c" data-st="stroke" data-v="${v[0]}" style="--c:${v[0]}" aria-label="${v[1]}" aria-pressed="${cur.stroke === v[0]}"></button>`;
+  const fl = v => `<button type="button" class="sw-c fill ${v[0] === 'none' ? 'none' : ''}" data-st="fill" data-v="${v[0]}" style="--c:${v[0] === 'none' ? 'transparent' : v[0]}" aria-label="${v[1]}" aria-pressed="${(cur.fill || 'none') === v[0]}"></button>`;
+  R.style.innerHTML = `
+    <div class="grp"><span>Traç</span><div class="row">${STROKES.map(sw).join('')}</div></div>
+    ${anyShape ? `<div class="grp"><span>Fons</span><div class="row">${FILLS.map(fl).join('')}</div></div>` : ''}
+    <div class="grp"><span>Gruix</span><div class="seg2">${[1, 2, 4].map(v => `<button type="button" data-st="sw" data-v="${v}" aria-pressed="${cur.sw === v}" aria-label="Gruix ${v}"><i style="height:${v + .5}px"></i></button>`).join('')}</div></div>
+    <div class="grp"><span>Línia</span><div class="seg2"><button type="button" data-st="dash" data-v="0" aria-pressed="${!cur.dash}">Contínua</button><button type="button" data-st="dash" data-v="1" aria-pressed="${!!cur.dash}">Discontínua</button></div></div>
+    ${hasText ? `<div class="grp"><span>Text</span><div class="seg2">${['s', 'm', 'l'].map(v => `<button type="button" data-st="fs" data-v="${v}" aria-pressed="${(cur.fs || '') === v}">${v.toUpperCase()}</button>`).join('')}</div></div>` : ''}
+    ${list.length ? `<div class="grp"><span>Accions</span><div class="row acts">
+      <button type="button" class="ib" data-bd="dup" title="Duplica (Ctrl+D)">${svgI(ICON.copy)}</button>
+      <button type="button" class="ib" data-bd="front" title="Porta al davant (Ctrl+])">${svgI(ICON.up)}</button>
+      <button type="button" class="ib" data-bd="back" title="Envia al fons (Ctrl+[)">${svgI(ICON.down)}</button>
+      <button type="button" class="ib danger" data-bd="del" title="Esborra (Supr)">${svgI(ICON.trash)}</button></div></div>` : ''}`;
+}
+
+/* ---------- Teclat ---------- */
+const typing = e => e.target.closest && e.target.closest('input, textarea, select, [contenteditable]');
+function onKey(e) {
+  if (!R || document.querySelector('dialog[open]')) return;
+  if (e.key === ' ' && !typing(e)) { if (!spaceDown) { spaceDown = true; R.stage.classList.add('space'); } e.preventDefault(); return; }
+  if (typing(e)) {
+    if (e.target === R.editor && (e.key === 'Escape' || (e.key === 'Enter' && (e.metaKey || e.ctrlKey)))) { e.preventDefault(); endEdit(); }
+    return;
+  }
+  const k = e.key.toLowerCase(), mod = e.metaKey || e.ctrlKey;
+  if (!R.root.isConnected) return;
+  if (mod && k === 'z') { e.preventDefault(); e.shiftKey ? redo() : undo(); return; }
+  if (mod && k === 'y') { e.preventDefault(); redo(); return; }
+  if (mod && k === 'a') { e.preventDefault(); setTool('select'); select(B.els.map(x => x.id)); return; }
+  if (mod && k === 'd') { e.preventDefault(); if (sel.size) { record(); select(duplicate([...sel])); } return; }
+  if (mod && k === 'c') { if (sel.size) { clip = JSON.stringify([...sel].map(byId).filter(Boolean).map(materialize)); e.preventDefault(); } return; }
+  if (mod && k === 'x') { if (sel.size) { clip = JSON.stringify([...sel].map(byId).filter(Boolean).map(materialize)); record(); removeIds([...sel]); e.preventDefault(); } return; }
+  if (mod && k === 'v') { if (clip) { e.preventDefault(); paste(); } return; }
+  if (mod && (k === '=' || k === '+')) { e.preventDefault(); zoomAt(B.view.z * 1.2); return; }
+  if (mod && k === '-') { e.preventDefault(); zoomAt(B.view.z / 1.2); return; }
+  if (mod && k === '0') { e.preventDefault(); zoomAt(1); return; }
+  if (mod && k === ']') { e.preventDefault(); order(1); return; }
+  if (mod && k === '[') { e.preventDefault(); order(-1); return; }
+  if (mod) return;
+  if (e.key === 'Escape') { if (R.help.hidden === false) { R.help.hidden = true; return; } select([]); setTool('select'); return; }
+  if (e.key === 'Delete' || e.key === 'Backspace') { if (sel.size) { e.preventDefault(); record(); removeIds([...sel]); } return; }
+  if (e.key === 'Enter' && sel.size === 1) { e.preventDefault(); edit([...sel][0]); return; }
+  if (e.key.startsWith('Arrow') && sel.size) { e.preventDefault(); const s = e.shiftKey ? 10 : 1; nudge(e.key === 'ArrowLeft' ? -s : e.key === 'ArrowRight' ? s : 0, e.key === 'ArrowUp' ? -s : e.key === 'ArrowDown' ? s : 0); return; }
+  if (e.key === '!' || (e.shiftKey && e.code === 'Digit1')) { e.preventDefault(); fit(); return; }
+  if (e.key === '?') { R.help.hidden = !R.help.hidden; return; }
+  if (e.key === '/') { e.preventDefault(); openChat(true); return; }
+  if (k === 'c') { openChat(!R.root.classList.contains('chat-open')); return; }
+  if (k === 'g') { B.opts.grid = !B.opts.grid; applyView(); save(); return; }
+  if (k === 'q') { lock = !lock; R.root.querySelector('[data-bd=lock]').setAttribute('aria-pressed', lock); return; }
+  const t = TOOLS.find(t => t[2].toLowerCase() === k || t[3] === e.key);
+  if (t) { e.preventDefault(); setTool(t[0]); }
+}
+function onKeyUp(e) { if (e.key === ' ') { spaceDown = false; R && R.stage.classList.remove('space'); } }
+
+function openChat(open, focus = true, persist = true) {
+  if (persist) { B.opts.chat = open; save(); }
+  if (!R) return;
+  const wasOpen = R.root.classList.contains('chat-open');
+  R.root.classList.toggle('chat-open', open);
+  R.chat.inert = !open;
+  const t = R.root.querySelector('[data-bd=chat]'); t.setAttribute('aria-pressed', open);
+  if (open && focus) setTimeout(() => R.input.focus(), reduce ? 0 : 280);
+  if (!open && wasOpen && R.chat.contains(document.activeElement)) t.focus({ preventScroll: true });
+}
+
+/* ---------- Muntatge ---------- */
+function template() {
+  return `
+  <div class="bd">
+    <div class="bd-stage" id="bdStage" data-tool="select">
+      <svg class="bd-svg" id="bdSvg" role="img" aria-label="Pissarra"><g id="bdWorld"><g id="bdEls"></g><g id="bdSel" class="bd-selg"></g></g></svg>
+      <textarea class="bd-edit" id="bdEdit" hidden spellcheck="false" aria-label="Edita el text"></textarea>
+      <div class="bd-empty" id="bdEmpty"><b>Pissarra en blanc</b><span>Dibuixa amb les eines de dalt o demana-ho a en Nio: «Flux: Banc -> ERP -> Aprovació».</span></div>
+
+      <div class="bd-bar bd-tools" id="bdTools" role="toolbar" aria-label="Eines">
+        ${TOOLS.map(t => `<button type="button" class="tb" data-tool="${t[0]}" aria-pressed="${t[0] === tool}" title="${t[1]} — ${t[2]}${t[3] ? ' o ' + t[3] : ''}">${svgI(t[4])}${t[3] ? `<small>${t[3]}</small>` : ''}</button>`).join('')}
+        <span class="sep"></span>
+        <button type="button" class="tb" data-bd="lock" aria-pressed="${lock}" title="Manté l’eina activa — Q">${svgI(ICON.lock)}</button>
+        <button type="button" class="tb only-m" data-bd="stylebtn" title="Estil">${svgI(ICON.style)}</button>
+      </div>
+
+      <div class="bd-style" id="bdStyle" hidden></div>
+
+      <div class="bd-bar bd-zoom">
+        <button type="button" class="ib" data-bd="undo" title="Desfés — Ctrl+Z">${svgI(ICON.undo)}</button>
+        <button type="button" class="ib" data-bd="redo" title="Refés — Ctrl+Shift+Z">${svgI(ICON.redo)}</button>
+        <span class="sep"></span>
+        <button type="button" class="ib" data-bd="zout" title="Allunya — Ctrl+−">${svgI(ICON.minus)}</button>
+        <button type="button" class="pct" data-bd="z100" title="Zoom al 100% — Ctrl+0" id="bdPct">100%</button>
+        <button type="button" class="ib" data-bd="zin" title="Apropa — Ctrl++">${svgI(ICON.plus)}</button>
+        <button type="button" class="ib" data-bd="fit" title="Mostra-ho tot — Shift+1">${svgI(ICON.fit)}</button>
+      </div>
+
+      <div class="bd-bar bd-right">
+        <div class="bd-menuwrap">
+          <button type="button" class="ib" data-bd="menu" aria-haspopup="menu" aria-expanded="false" title="Més opcions">${svgI(ICON.menu)}</button>
+          <div class="bd-menu" id="bdMenu" role="menu" hidden>
+            <button type="button" role="menuitem" data-bd="png">Exporta PNG</button>
+            <button type="button" role="menuitem" data-bd="svg">Exporta SVG</button>
+            <button type="button" role="menuitem" data-bd="json">Desa còpia (JSON)</button>
+            <label role="menuitem">Obre còpia<input type="file" accept="application/json" id="bdImport" hidden></label>
+            <hr>
+            <button type="button" role="menuitem" data-bd="rough">${B.opts.rough ? 'Traç net' : 'Traç a mà'}</button>
+            <button type="button" role="menuitem" data-bd="grid">${B.opts.grid ? 'Amaga la quadrícula' : 'Mostra la quadrícula'} <kbd>G</kbd></button>
+            <button type="button" role="menuitem" data-bd="help">Dreceres de teclat <kbd>?</kbd></button>
+            <hr>
+            <button type="button" role="menuitem" class="danger" data-bd="clear">Neteja la pissarra</button>
+          </div>
+        </div>
+        <button type="button" class="tb chat-t" data-bd="chat" aria-pressed="${B.opts.chat}" title="Xat amb en Nio — C">${window.NioBot ? NioBot.html('idle', 'tbbot') : svgI(ICON.chat)}<span>Nio</span></button>
+      </div>
+
+      <div class="bd-help" id="bdHelp" hidden>
+        <div class="bd-help-in" role="dialog" aria-label="Dreceres de teclat">
+          <header><h3>Dreceres</h3><button type="button" class="ib" data-bd="helpclose" aria-label="Tanca">${svgI(ICON.close)}</button></header>
+          <div class="cols">
+            <dl><dt>Eines</dt>${TOOLS.map(t => `<div><dd>${t[1]}</dd><kbd>${t[2]}</kbd>${t[3] ? `<kbd>${t[3]}</kbd>` : ''}</div>`).join('')}<div><dd>Manté l’eina</dd><kbd>Q</kbd></div></dl>
+            <dl><dt>Edició</dt>
+              <div><dd>Desfés / Refés</dd><kbd>Ctrl Z</kbd><kbd>Ctrl ⇧ Z</kbd></div>
+              <div><dd>Copia · Retalla · Enganxa</dd><kbd>Ctrl C</kbd><kbd>X</kbd><kbd>V</kbd></div>
+              <div><dd>Duplica</dd><kbd>Ctrl D</kbd></div>
+              <div><dd>Duplica arrossegant</dd><kbd>Alt</kbd></div>
+              <div><dd>Selecciona-ho tot</dd><kbd>Ctrl A</kbd></div>
+              <div><dd>Esborra</dd><kbd>Supr</kbd></div>
+              <div><dd>Edita el text</dd><kbd>Enter</kbd><kbd>Doble clic</kbd></div>
+              <div><dd>Mou 1 / 10 px</dd><kbd>Fletxes</kbd><kbd>⇧</kbd></div>
+              <div><dd>Davant / Fons</dd><kbd>Ctrl ]</kbd><kbd>Ctrl [</kbd></div>
+            </dl>
+            <dl><dt>Vista</dt>
+              <div><dd>Mou el llenç</dd><kbd>Espai</kbd><kbd>Roda</kbd></div>
+              <div><dd>Zoom</dd><kbd>Ctrl roda</kbd><kbd>Ctrl ±</kbd></div>
+              <div><dd>Zoom 100%</dd><kbd>Ctrl 0</kbd></div>
+              <div><dd>Mostra-ho tot</dd><kbd>⇧ 1</kbd></div>
+              <div><dd>Quadrícula</dd><kbd>G</kbd></div>
+              <div><dd>Obre el xat / Escriu-hi</dd><kbd>C</kbd><kbd>/</kbd></div>
+              <div><dd>Proporcions / 15°</dd><kbd>⇧ arrossegant</kbd></div>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <aside class="bd-chat" id="bdChat" aria-label="Xat amb en Nio">
+      <header><span class="who">${window.NioBot ? NioBot.html('idle', 'hbot') : ''}<span><b>Nio</b><small>Et dibuixa el que li demanis</small></span></span><button type="button" class="ib" data-bd="chat" aria-label="Tanca el xat">${svgI(ICON.close)}</button></header>
+      <label class="brain"><span>Amb</span><select id="bdBrain" aria-label="Què fa servir el xat"></select></label>
+      <div class="msgs" id="bdMsgs" aria-live="polite"></div>
+      <div class="chips" id="bdChips">${SUGG.map(s => `<button type="button" class="chip-s" data-sug="${esc(s)}">${esc(s)}</button>`).join('')}</div>
+      <form class="cin" id="bdForm"><textarea id="bdInput" rows="1" placeholder="Descriu el diagrama que vols…" aria-label="Missatge per a en Nio"></textarea><button type="submit" class="send" aria-label="Envia">${svgI(ICON.send)}</button></form>
+    </aside>
+  </div>`;
+}
+function onClick(e) {
+  const t = e.target.closest('[data-tool], [data-bd], [data-st], [data-sug]'); if (!t || !R) return;
+  if (t.dataset.tool) { setTool(t.dataset.tool); if (matchMedia('(max-width: 820px)').matches) R.root.classList.remove('style-open'); return; }
+  if (t.dataset.st) { const k = t.dataset.st, v = t.dataset.v; setStyle(k, k === 'sw' ? +v : k === 'dash' ? v === '1' : v); return; }
+  if (t.dataset.sug) { R.input.value = t.dataset.sug; R.input.dispatchEvent(new Event('input')); if (t.dataset.sug === 'Ajuda' || /^Plantilla/.test(t.dataset.sug)) send(); else R.input.focus(); return; }
+  const a = t.dataset.bd, menu = R.root.querySelector('#bdMenu');
+  if (a !== 'menu') { menu.hidden = true; R.root.querySelector('[data-bd=menu]').setAttribute('aria-expanded', 'false'); }
+  switch (a) {
+    case 'undo': undo(); break; case 'redo': redo(); break;
+    case 'zin': zoomAt(B.view.z * 1.2); break; case 'zout': zoomAt(B.view.z / 1.2); break; case 'z100': zoomAt(1); break;
+    case 'fit': fit(); break;
+    case 'lock': lock = !lock; t.setAttribute('aria-pressed', lock); break;
+    case 'stylebtn': R.root.classList.toggle('style-open'); break;
+    case 'chat': openChat(!R.root.classList.contains('chat-open')); break;
+    case 'menu': menu.hidden = !menu.hidden; t.setAttribute('aria-expanded', !menu.hidden); break;
+    case 'png': case 'svg': case 'json': if (!exportAs(a)) say('Encara no hi ha res per exportar.'); break;
+    case 'rough': B.opts.rough = !B.opts.rough; B.opts.font = B.opts.rough ? 'hand' : 'clean'; B.els.forEach(el => { if (el.type === 'text') fitText(el); }); t.textContent = B.opts.rough ? 'Traç net' : 'Traç a mà'; full(); save(); break;
+    case 'grid': B.opts.grid = !B.opts.grid; applyView(); save(); t.innerHTML = `${B.opts.grid ? 'Amaga la quadrícula' : 'Mostra la quadrícula'} <kbd>G</kbd>`; break;
+    case 'help': R.help.hidden = false; break; case 'helpclose': R.help.hidden = true; break;
+    case 'clear': if (B.els.length && confirm('Vols netejar la pissarra? Ho podràs desfer amb Ctrl+Z.')) { record(); B.els = []; sel.clear(); full(); save(); } break;
+    case 'dup': if (sel.size) { record(); select(duplicate([...sel])); } break;
+    case 'front': order(1); break; case 'back': order(-1); break;
+    case 'del': if (sel.size) { record(); removeIds([...sel]); } break;
+  }
+}
+function send() { const v = R.input.value; if (!v.trim()) return; R.input.value = ''; R.input.style.height = ''; act(v); }
+
+let cleanup = [];
+function on(t, ev, fn, opt) { t.addEventListener(ev, fn, opt); cleanup.push(() => t.removeEventListener(ev, fn, opt)); }
+function mount(root) {
+  if (!root) return;
+  if (R && R.root === root && root.isConnected) return;
+  unmount();
+  root.innerHTML = template();
+  R = { root, stage: root.querySelector('#bdStage'), svg: root.querySelector('#bdSvg'), world: root.querySelector('#bdWorld'), els: root.querySelector('#bdEls'), sel: root.querySelector('#bdSel'),
+    editor: root.querySelector('#bdEdit'), empty: root.querySelector('#bdEmpty'), tools: root.querySelector('#bdTools'), style: root.querySelector('#bdStyle'),
+    zoomPct: root.querySelector('#bdPct'), help: root.querySelector('#bdHelp'), msgs: root.querySelector('#bdMsgs'), input: root.querySelector('#bdInput'),
+    chatBot: root.querySelector('.bd-chat .hbot'), chat: root.querySelector('#bdChat') };
+  nodes.clear();
+  const first = !B.els.length && B.view.x === 0 && B.view.y === 0;
+  if (first) { const r = R.svg.getBoundingClientRect(); B.view = { x: r.width / 2, y: r.height / 2, z: 1 }; }
+  on(R.svg, 'pointerdown', onDown); on(window, 'pointermove', onMove); on(window, 'pointerup', onUp); on(window, 'pointercancel', onUp);
+  on(R.svg, 'wheel', onWheel, { passive: false });
+  on(window, 'keydown', onKey); on(window, 'keyup', onKeyUp);
+  on(root, 'click', onClick);
+  on(R.editor, 'input', placeEditor); on(R.editor, 'blur', () => setTimeout(endEdit, 0));
+  on(R.root.querySelector('#bdForm'), 'submit', e => { e.preventDefault(); send(); });
+  on(R.input, 'keydown', e => { if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) { e.preventDefault(); send(); } if (e.key === 'Escape') { e.stopPropagation(); openChat(false); } });
+  on(R.input, 'input', () => { R.input.style.height = ''; R.input.style.height = Math.min(140, R.input.scrollHeight) + 'px'; });
+  on(R.root.querySelector('#bdBrain'), 'change', (e) => { B.opts.brain = e.target.value; save(); say(B.opts.brain === 'rules' ? 'Faig servir les ordres ràpides. Escriu <b>ajuda</b> per veure-les.' : `Ara t’entendré amb <b>${esc(e.target.selectedOptions[0].textContent)}</b>. Demana’m el diagrama com vulguis.`); });
+  on(R.root.querySelector('#bdBrain'), 'focus', drawBrains);
+  on(R.root.querySelector('#bdImport'), 'change', e => { const f = e.target.files[0]; if (f) importJSON(f); e.target.value = ''; });
+  on(document, 'click', e => { if (R && !e.target.closest('.bd-menuwrap')) { const m = R.root.querySelector('#bdMenu'); if (m) m.hidden = true; } });
+  on(window, 'resize', () => { applyView(); drawSel(); });
+  if (document.fonts) document.fonts.load(`500 24px Caveat`).then(() => { if (R) { B.els.forEach(el => { if (el.type === 'text' && el.text) fitText(el); }); full(); } }).catch(() => {});
+  full(); drawChat(); drawBrains(); setTool(tool); openChat(B.opts.chat && !matchMedia('(max-width: 820px)').matches, false, false);
+  window.NioBot?.refresh();
+}
+function unmount() { cleanup.forEach(f => f()); cleanup = []; if (editing) endEdit(); R = null; nodes.clear(); drag = null; marquee = null; pointers.clear(); }
+
+window.NioBoard = { mount, unmount, act, refreshBrains: drawBrains, get count() { return B.els.length; } };
+})();