nio-cat 0.9.6 → 0.9.9

package/web/app/notes.js

@@ -0,0 +1,747 @@
+// nio · Notes. Com Google Keep, però a l'ordinador: targetes, llistes, colors, etiquetes, veu (Whisper local)
+// i un assistent que resumeix i ordena amb un model local, Claude Code o Codex.
+// Es carrega des d'app.js, que li passa el que necessita (ctx).
+
+const I = {
+  pin: '<path d="M9 4h6l-1 6 3 3v1H7v-1l3-3z"/><path d="M12 14v6"/>',
+  archive: '<rect x="3.5" y="4.5" width="17" height="4" rx="1"/><path d="M5 8.5V19h14V8.5M10 12.5h4"/>',
+  trash: '<path d="M5 7h14M10 7V4.5h4V7M7 7l1 13h8l1-13M10.5 11v5.5M13.5 11v5.5"/>',
+  restore: '<path d="M4 12a8 8 0 1 0 2.5-5.8L4 8.5"/><path d="M4 4v4.5h4.5"/>',
+  list: '<path d="M9 6.5h11M9 12h11M9 17.5h11"/><path d="M3.8 6.5l1 1 1.8-2M3.8 12l1 1 1.8-2M3.8 17.5l1 1 1.8-2"/>',
+  text: '<path d="M5 6h14M5 11h14M5 16h9"/>',
+  mic: '<rect x="9" y="3.5" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3"/>',
+  stop: '<rect x="7" y="7" width="10" height="10" rx="2"/>',
+  palette: '<path d="M12 3.5a8.5 8.5 0 1 0 0 17c1.4 0 2-.9 1.6-2-.4-1.2.3-2.3 1.600-2.300H17a3.500 3.500 0 0 0 3.500-3.500C20.500 7 16.800 3.500 12 3.500z"/><circle cx="8" cy="11" r="1"/><circle cx="11" cy="7.500" r="1"/><circle cx="15.500" cy="8.500" r="1"/>',
+  tag: '<path d="M4 4h7.500l8.500 8.500-7.500 7.500L4 11.500z"/><circle cx="8.500" cy="8.500" r="1.200"/>',
+  spark: '<path d="M12 3.500l1.800 5.200 5.200 1.800-5.200 1.800L12 17.500l-1.800-5.200L5 10.500l5.200-1.800zM18.500 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/>',
+  close: '<path d="M6 6l12 12M18 6L6 18"/>',
+  back: '<path d="m10 5-7 7 7 7M3 12h18"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  search: '<circle cx="11" cy="11" r="6.500"/><path d="M16 16l4 4"/>',
+  grid: '<rect x="4" y="4" width="7" height="7" rx="1.500"/><rect x="13" y="4" width="7" height="7" rx="1.500"/><rect x="4" y="13" width="7" height="7" rx="1.500"/><rect x="13" y="13" width="7" height="7" rx="1.500"/>',
+  rows: '<rect x="4" y="5" width="16" height="5" rx="1.500"/><rect x="4" y="14" width="16" height="5" rx="1.500"/>',
+  play: '<path d="M8 5.500l10 6.500-10 6.500z"/>',
+  pause: '<path d="M8 5.500v13M16 5.500v13"/>',
+  phone: '<rect x="7" y="3" width="10" height="18" rx="2.500"/><path d="M11 18h2"/>',
+  check: '<path d="M5 12.500l4.500 4.500L19 7.500"/>',
+  more: '<circle cx="6" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/>',
+};
+const COLORS = [['', 'Sense color'], ['lemon', 'Llimona'], ['peach', 'Préssec'], ['moss', 'Molsa'], ['sky', 'Cel'], ['lilac', 'Lila'], ['rose', 'Rosa'], ['sand', 'Sorra']];
+const ACTIONS = [
+  ['summary', 'Resumeix', 'Punts clau de la nota'],
+  ['clean', 'Neteja la transcripció', 'Puntuació, paràgrafs, sense «eh»'],
+  ['organize', 'Organitza', 'Títol, ordre i etiquetes'],
+  ['tasks', 'Extreu tasques', 'Les accions pendents, en llista'],
+  ['title', 'Posa-hi un títol', 'Una frase curta'],
+];
+const svg = (d) => `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true">${d}</svg>`;
+const uid = () => Math.random().toString(36).slice(2, 10);
+const fmtDur = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
+const LSget = (k, d) => { try { return JSON.parse(localStorage.getItem(k)) ?? d; } catch { return d; } };
+const LSset = (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)); } catch { /* sense desar */ } };
+const grow = (ta) => { ta.style.height = 'auto'; ta.style.height = `${ta.scrollHeight}px`; };
+const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+export function createNotes(ctx) {
+  const { api, esc, toast } = ctx;
+  const $ = (s, e = document) => e.querySelector(s);
+  let root = null, notes = new Map(), loaded = false, loading = false, engines = null;
+  let view = 'notes', q = '', layout = LSget('nio.notes.layout', 'grid');
+  let ed = null, aborter = null;
+  const historyNotes = new Map();
+  const pendingSaves = new Set();
+  let loadError = '';
+  const machineKey = () => ctx.machine()?.id || ctx.machine()?.url;
+  let notesMachine = machineKey();
+  addEventListener('beforeunload', (event) => {
+    if (!pendingSaves.size && !ed?.rec) return;
+    event.preventDefault(); event.returnValue = '';
+  });
+
+  // ---------------------------------------------------------------- dades
+  const all = () => [...notes.values()];
+  const empty = (n) => !n.title.trim() && !n.text.trim() && !(n.items || []).some((i) => i.text.trim()) && !n.audio.length;
+  const labelsOf = () => [...new Set(all().filter((n) => !n.trashed).flatMap((n) => n.labels))].sort((a, b) => a.localeCompare(b, 'ca'));
+  const haystack = (n) => `${n.title}\n${n.text}\n${(n.items || []).map((i) => i.text).join('\n')}\n${n.labels.join(' ')}`.toLowerCase();
+  function visible() {
+    const term = q.trim().toLowerCase();
+    return all().filter((n) => {
+      if (view === 'trash') { if (!n.trashed) return false; }
+      else if (n.trashed) return false;
+      else if (view === 'archive') { if (!n.archived) return false; }
+      else if (view.startsWith('l:')) { if (!n.labels.includes(view.slice(2))) return false; }
+      else if (n.archived && !term) return false;
+      return !term || haystack(n).includes(term);
+    }).sort((a, b) => (b.pinned - a.pinned) || b.updated - a.updated);
+  }
+  async function load() {
+    if (loading) return; loading = true;
+    const requestedMachine = machineKey();
+    loadError = '';
+    try {
+      const r = await api('/api/notes');
+      if (requestedMachine !== machineKey()) { loading = false; if (root) load(); return; }
+      notes = new Map(r.notes.map((n) => [n.id, n])); loaded = true;
+      for (const entry of pendingSaves) if (entry.id && entry.machineKey === machineKey()) notes.set(entry.id, entry.n);
+      if (ed?.id) notes.set(ed.id, ed.n);
+    }
+    catch (e) {
+      if (requestedMachine !== machineKey()) { loading = false; if (root) load(); return; }
+      loadError = e.message;
+    }
+    loading = false; drawAll();
+  }
+  const upsert = (n) => { const old = notes.get(n.id); notes.set(n.id, n); return old; };
+
+  // ---------------------------------------------------------------- pàgina
+  function mount(el) {
+    root = el; aborter?.abort(); aborter = new AbortController();
+    if (notesMachine !== machineKey()) { notesMachine = machineKey(); notes.clear(); loaded = false; engines = null; q = ''; view = 'notes'; }
+    if (history.state?.nioNote) { const { nioNote, ...rest } = history.state; history.replaceState(rest, '', location.href); }
+    root.innerHTML = `<div class="nt">
+      <div class="nt-top">
+        <div class="nt-title"><h1>Notes</h1><p>Escriu, grava i deixa que un model ho ordeni. Es desa a l’ordinador.</p></div>
+        ${ctx.isPhone() ? '' : `<div class="nt-tools"><button class="btn" type="button" data-nt="phone">${svg(I.phone)}<span>Mòbil com a micròfon</span></button></div>`}
+      </div>
+      <div class="nt-bar">
+        <label class="nt-search">${svg(I.search)}<input type="search" id="ntQ" placeholder="Busca a les notes" autocomplete="off" aria-label="Busca a les notes"></label>
+        <button class="icon-btn" type="button" data-nt="layout" aria-label="Canvia la vista" id="ntLayout"></button>
+      </div>
+      <div class="nt-new" id="ntNew"><button class="nt-write" type="button" data-nt="new">${svg(I.plus)}<span>Escriu una nota…</span></button>
+        <span class="nt-new-b"><button type="button" data-nt="newlist" aria-label="Nova llista" title="Nova llista">${svg(I.list)}</button><button type="button" data-nt="newmic" aria-label="Grava una nota" title="Grava una nota">${svg(I.mic)}</button></span></div>
+      <nav class="nt-filters" id="ntFilters" aria-label="Filtres"></nav>
+      <div id="ntPending" aria-live="polite"></div>
+      <p class="nt-results" id="ntResults" aria-live="polite"></p>
+      <div id="ntGrid" class="nt-body"></div>
+    </div>`;
+    const sig = { signal: aborter.signal };
+    $('#ntQ', root).value = q;
+    $('#ntQ', root).addEventListener('input', (e) => { q = e.target.value; drawGrid(); }, sig);
+    root.addEventListener('click', onClick, sig);
+    bindSwipe($('#ntGrid', root), sig);
+    root.addEventListener('keydown', (e) => { if ((e.key === 'Enter' || e.key === ' ') && e.target.matches?.('.nt-card')) { e.preventDefault(); e.target.click(); } }, sig);
+    addEventListener('popstate', () => {
+      if (ed && !history.state?.nioNote) closeEditor(false, true);
+      else if (!ed && history.state?.nioNote && location.hash.startsWith('#/notes')) {
+        const entry = history.state.nioNote;
+        openEditor(historyNotes.get(entry.key) || entry.id, null, { fromHistory: true, historyKey: entry.key });
+      }
+    }, sig);
+    drawAll();
+    load().then(schedule);
+    if (/[?&]mic=1/.test(location.hash)) {
+      history.replaceState(history.state, '', location.hash.replace(/([?&])mic=1(&?)/, (_, sep, next) => next ? sep : ''));
+      toast('Per gravar una nota, prem el botó del micròfon.');
+    }
+  }
+  function unmount() { aborter?.abort(); clearTimeout(set.t); clearTimeout(pollT); closeEditor(true); root = null; }
+  const drawAll = () => { if (!root) return; drawLayout(); drawFilters(); drawGrid(); };
+  function drawLayout() { const b = $('#ntLayout', root); if (b) b.innerHTML = svg(layout === 'grid' ? I.rows : I.grid); root.querySelector('.nt').dataset.layout = layout; }
+  function drawFilters() {
+    if (!root) return;
+    const labs = labelsOf(), nTrash = all().filter((n) => n.trashed).length;
+    const chip = (v, label, extra = '') => `<button type="button" class="nt-chip" data-nt="view" data-v="${esc(v)}" ${view === v ? 'aria-current="true"' : ''}>${extra}${esc(label)}</button>`;
+    $('#ntFilters', root).innerHTML = `<div class="nt-filter-views">${chip('notes', 'Notes')}${chip('archive', 'Arxivades', svg(I.archive))}${chip('trash', nTrash ? `Paperera · ${nTrash}` : 'Paperera', svg(I.trash))}</div>${labs.length ? `<div class="nt-filter-labels"><span>Etiquetes</span>${labs.map((l) => chip(`l:${l}`, l, svg(I.tag))).join('')}</div>` : ''}`;
+  }
+  function cardHtml(n) {
+    const items = n.items || [];
+    const open = items.filter((i) => !i.done), doneN = items.length - open.length;
+    const shown = [...open, ...items.filter((i) => i.done)].slice(0, 8);
+    const pend = n.audio.filter((a) => a.state === 'transcribing').length, err = n.audio.some((a) => a.state === 'error');
+    return `<article class="nt-card" data-id="${n.id}" data-color="${n.color}" tabindex="0" aria-label="${esc(n.title || 'Nota sense títol')}">
+      ${view === 'trash' ? '' : `<button class="nt-pin ${n.pinned ? 'on' : ''}" type="button" data-nt="pin" aria-label="${n.pinned ? 'Deixa de fixar' : 'Fixa la nota'}" aria-pressed="${n.pinned}">${svg(I.pin)}</button>`}
+      ${n.title ? `<h3>${esc(n.title)}</h3>` : ''}
+      ${n.text.trim() ? `<div class="nt-txt">${esc(n.text.trim())}</div>` : ''}
+      ${items.length ? `<div class="nt-its">${shown.map((i) => `<div class="nt-it ${i.done ? 'done' : ''}"><input type="checkbox" data-nt="tick" data-i="${i.id}" ${i.done ? 'checked' : ''} aria-label="Fet"><span>${esc(i.text)}</span></div>`).join('')}${items.length > 8 ? `<span class="nt-more">+ ${items.length - 8} més</span>` : ''}${doneN && items.length <= 8 ? '' : ''}</div>` : ''}
+      ${!n.title && !n.text.trim() && !items.length ? `<div class="nt-txt muted">${n.audio.length ? 'Nota de veu' : 'Nota buida'}</div>` : ''}
+      ${n.audio.length ? `<div class="nt-badge ${err ? 'err' : ''}">${svg(I.mic)}<span>${pend ? 'Transcrivint…' : err ? 'No s’ha pogut transcriure' : `${n.audio.length} ${n.audio.length === 1 ? 'àudio' : 'àudios'}`}</span></div>` : ''}
+      ${n.labels.length ? `<div class="nt-labels">${n.labels.map((l) => `<span class="nt-label">${esc(l)}</span>`).join('')}</div>` : ''}
+      <div class="nt-acts">${view === 'trash'
+        ? `<button type="button" data-nt="restore" title="Recupera">${svg(I.restore)}</button><button type="button" data-nt="forever" title="Esborra del tot">${svg(I.trash)}</button>`
+        : `<button type="button" data-nt="archive" title="${n.archived ? 'Desarxiva' : 'Arxiva'}">${svg(I.archive)}</button><button type="button" data-nt="trash" title="Paperera">${svg(I.trash)}</button>`}</div>
+    </article>`;
+  }
+  function drawGrid() {
+    if (!root) return;
+    if (swipe?.card) { swipe.redraw = true; return; } // no es toca la llista amb una targeta sota el dit
+    const g = $('#ntGrid', root); if (!g) return;
+    $('#ntPending', root).innerHTML = [...pendingSaves].some((entry) => entry.error && entry.machineKey === machineKey()) ? '<div class="nt-warning"><span>Hi ha canvis pendents de desar. Mantén aquesta pàgina oberta.</span><button class="btn sm" type="button" data-nt="retry-save">Torna a desar</button></div>' : '';
+    if (loadError) { g.innerHTML = `<div class="nt-empty" role="alert"><p>${esc(loadError)}</p><button class="btn" type="button" data-nt="reload">Torna-ho a provar</button></div>`; return; }
+    if (!loaded) { g.innerHTML = '<div class="nt-grid"><i class="nt-skel"></i><i class="nt-skel tall"></i><i class="nt-skel"></i></div>'; return; }
+    const list = visible();
+    $('#ntResults', root).textContent = `${list.length} ${list.length === 1 ? 'nota' : 'notes'}${q ? ` per a «${q}»` : ''}`;
+    if (!list.length) {
+      g.innerHTML = `<p class="nt-empty">${q ? 'Cap nota coincideix amb la cerca.' : view === 'trash' ? 'La paperera és buida. Les notes s’hi esborren soles als 30 dies.' : view === 'archive' ? 'No hi ha notes arxivades.' : view.startsWith('l:') ? 'Cap nota amb aquesta etiqueta.' : 'Encara no hi ha cap nota. Escriu-ne una o grava-la amb la veu.'}</p>`;
+      return;
+    }
+    const sec = (title, arr) => arr.length ? `${title ? `<h2 class="nt-sec">${title}</h2>` : ''}<div class="nt-grid">${arr.map(cardHtml).join('')}</div>` : '';
+    const pinned = view === 'notes' || view.startsWith('l:') ? list.filter((n) => n.pinned) : [];
+    const rest = pinned.length ? list.filter((n) => !n.pinned) : list;
+    g.innerHTML = view === 'trash' ? `<div class="nt-trash-bar"><span>Esborrades soles als 30 dies.</span><button class="btn ghost" type="button" data-nt="empty-trash">Buida la paperera</button></div>${sec('', list)}` : sec(pinned.length ? 'Fixades' : '', pinned) + sec(pinned.length ? 'Altres' : '', rest);
+  }
+
+  // ---------------------------------------------------------------- clics de la pàgina
+  async function onClick(e) {
+    if (Date.now() - swipedAt < 400) { e.preventDefault(); e.stopPropagation(); return; }
+    const t = e.target.closest('[data-nt]'), card = e.target.closest('.nt-card');
+    const act = t?.dataset.nt, n = card ? notes.get(card.dataset.id) : null;
+    if (act === 'reload') return load();
+    if (act === 'retry-save') {
+      t.disabled = true;
+      await Promise.all([...pendingSaves].filter((entry) => entry.machineKey === machineKey()).map((entry) => flush(entry)));
+      drawGrid(); return;
+    }
+    if (act === 'view') { view = t.dataset.v; drawFilters(); drawGrid(); return; }
+    if (act === 'layout') { layout = layout === 'grid' ? 'list' : 'grid'; LSset('nio.notes.layout', layout); drawLayout(); return; }
+    if (act === 'phone') return phoneSheet();
+    if (act === 'new') return openEditor(null, $('#ntNew', root));
+    if (act === 'newlist') { e.stopPropagation(); return openEditor(null, $('#ntNew', root), { list: true }); }
+    if (act === 'newmic') { e.stopPropagation(); return openEditor(null, $('#ntNew', root), { mic: true }); }
+    if (act === 'empty-trash') { if (!confirm('S’esborraran per sempre totes les notes de la paperera.')) return; for (const x of all().filter((m) => m.trashed)) api(`/api/notes/${x.id}?forever=1`, { method: 'DELETE' }).catch(() => {}); return; }
+    if (n && act) {
+      e.stopPropagation();
+      if (act === 'tick') { const items = n.items.map((i) => (i.id === t.dataset.i ? { ...i, done: t.checked } : i)); return patch(n, { items }); }
+      if (act === 'pin') return patch(n, { pinned: !n.pinned });
+      if (act === 'archive') return leave(card, () => patch(n, { archived: !n.archived, pinned: false }), n.archived ? 'Desarxivada' : 'Arxivada', () => patch(n, { archived: n.archived, pinned: n.pinned }));
+      if (act === 'trash') return leave(card, () => patch(n, { trashed: true }), 'Anat a la paperera', () => patch(n, { trashed: false }));
+      if (act === 'restore') return patch(n, { trashed: false });
+      if (act === 'forever') { if (confirm('Aquesta nota s’esborrarà per sempre.')) api(`/api/notes/${n.id}?forever=1`, { method: 'DELETE' }).catch((er) => toast(er.message)); return; }
+    }
+    if (card && n) return openEditor(n.id, card);
+  }
+  // Lliscar una targeta cap a qualsevol costat l'arxiva (o la desarxiva a «Arxivades»), com a Keep.
+  // Segueix el dit 1:1; si passa d'un terç de l'amplada o es llença ràpid, marxa; si no, torna al lloc.
+  let swipe = null, swipedAt = 0;
+  function bindSwipe(grid, sig) {
+    const reset = (card) => { card.style.transition = ''; card.style.transform = ''; card.style.opacity = ''; card.classList.remove('swiping'); };
+    grid.addEventListener('pointerdown', (e) => {
+      const card = e.target.closest('.nt-card');
+      if (!card || e.pointerType === 'mouse' || !e.isPrimary || view === 'trash' || swipe) return;
+      swipe = { card, id: card.dataset.id, x0: e.clientX, y0: e.clientY, dx: 0, lock: null, pid: e.pointerId, pts: [[e.timeStamp, e.clientX]] };
+    }, sig);
+    grid.addEventListener('pointermove', (e) => {
+      const g = swipe; if (!g || e.pointerId !== g.pid) return;
+      const dx = e.clientX - g.x0, dy = e.clientY - g.y0;
+      if (!g.lock) {
+        if (Math.abs(dx) < 8 && Math.abs(dy) < 8) return;
+        if (Math.abs(dx) > Math.abs(dy) * 1.2) { g.lock = 'x'; g.card.setPointerCapture?.(e.pointerId); g.card.classList.add('swiping'); g.card.style.transition = 'none'; g.w = g.card.offsetWidth; }
+        else { swipe = null; return; }
+      }
+      g.dx = dx; g.pts.push([e.timeStamp, e.clientX]); if (g.pts.length > 5) g.pts.shift();
+      g.card.style.transform = `translateX(${dx}px) rotate(${dx / g.w * 3}deg)`;
+      g.card.style.opacity = String(Math.max(0.15, 1 - Math.abs(dx) / (g.w * 1.1)));
+    }, sig);
+    const end = (e) => {
+      const g = swipe; if (!g || e.pointerId !== g.pid) return;
+      swipe = null;
+      if (g.lock !== 'x') return;
+      swipedAt = Date.now();
+      const [t0, x0] = g.pts[0], [t1, x1] = g.pts[g.pts.length - 1], v = (x1 - x0) / Math.max(1, t1 - t0);
+      const n = notes.get(g.id), dir = Math.sign(Math.abs(v) > 0.45 ? v : g.dx);
+      const go = n && e.type === 'pointerup' && (Math.abs(g.dx) > g.w * 0.33 || (Math.abs(v) > 0.45 && Math.sign(v) === Math.sign(g.dx) && Math.abs(g.dx) > 24));
+      if (!go) {
+        g.card.style.transition = 'transform .32s cubic-bezier(.22,1,.36,1), opacity .2s';
+        g.card.style.transform = ''; g.card.style.opacity = '';
+        setTimeout(() => { reset(g.card); if (g.redraw) drawGrid(); }, 330);
+        return;
+      }
+      navigator.vibrate?.(8);
+      const was = { archived: n.archived, pinned: n.pinned };
+      const fly = reduce ? 0 : 200;
+      g.card.style.transition = `transform ${fly}ms cubic-bezier(.4,0,1,1), opacity ${fly}ms`;
+      g.card.style.transform = `translateX(${dir * (g.w + 60)}px) rotate(${dir * 6}deg)`; g.card.style.opacity = '0';
+      setTimeout(() => {
+        patch(n, { archived: !was.archived, pinned: false });
+        toastUndo(was.archived ? 'Desarxivada' : 'Arxivada', () => patch(n, was));
+      }, fly);
+    };
+    grid.addEventListener('pointerup', end, sig);
+    grid.addEventListener('pointercancel', end, sig);
+  }
+  // La targeta s'esvaeix abans de marxar de la llista; el toast permet desfer-ho.
+  function leave(card, fn, msg, undo) {
+    if (!reduce) { card.style.transition = 'opacity .16s, transform .16s'; card.style.opacity = '0'; card.style.transform = 'scale(.96)'; }
+    setTimeout(() => { fn(); toastUndo(msg, undo); }, reduce ? 0 : 150);
+  }
+  function toastUndo(msg, undo) {
+    toast(msg, 4200);
+    const t = document.querySelector('#toasts')?.lastElementChild; if (!t || !undo) return;
+    const b = document.createElement('button'); b.type = 'button'; b.className = 'nt-undo'; b.textContent = 'Desfés';
+    b.addEventListener('pointerdown', (ev) => ev.stopPropagation()); // el toast captura el punter per poder-lo arrossegar
+    b.onclick = (ev) => { ev.stopPropagation(); undo(); t.remove(); };
+    t.append(' ', b);
+  }
+  let inflight = 0;
+  async function patch(n, fields) {
+    Object.assign(n, fields); notes.set(n.id, n); drawAll();
+    inflight++;
+    try { upsert(await api(`/api/notes/${n.id}`, { method: 'PATCH', body: fields })); } catch (e) { toast(e.message, 4200); load(); } finally { inflight--; }
+  }
+
+  // ---------------------------------------------------------------- esdeveniments en directe (del flux d'nio)
+  function onEvent(msg) {
+    if (msg.type === 'note-gone') { notes.delete(msg.id); if (ed?.id === msg.id) closeEditor(true); drawAll(); return; }
+    const n = msg.note, old = upsert(n); void old;
+    if (ed && ed.id === n.id) {
+      // Del servidor només entra el que no estem editant ara mateix: l'àudio, la transcripció i els canvis d'altres dispositius.
+      const keep = new Set([...Object.keys(ed.dirty), ...Object.keys(ed.savingFields)]);
+      const mine = ed.n; for (const k of Object.keys(n)) if (!keep.has(k)) mine[k] = n[k];
+      ed.n = mine; notes.set(n.id, mine); syncEditor();
+    }
+    if (root) { drawFilters(); drawGrid(); }
+    if (n.audio?.some((a) => a.state === 'transcribing')) schedule();
+  }
+  const reload = () => { if (root || loaded) load(); };
+
+  // Per si el flux en directe s'ha perdut (mòbil en segon pla, túnel que talla): es consulta l'ordinador
+  // cada poc mentre hi ha àudio transcrivint-se i, si no, de tant en tant. Només s'aplica el que ha canviat.
+  let pollT = 0, polling = false;
+  const busy = () => all().some((n) => n.audio.some((a) => a.state === 'transcribing')) || !!ed?.uploading;
+  async function refresh() {
+    if (polling || inflight || loading || !loaded || ctx.isDemo?.()) return; polling = true;
+    const mk = machineKey();
+    try {
+      const r = await api('/api/notes');
+      if (mk !== machineKey()) return;
+      const seen = new Set();
+      for (const n of r.notes) {
+        seen.add(n.id); const old = notes.get(n.id);
+        if (!old || old.updated !== n.updated || JSON.stringify(old.audio) !== JSON.stringify(n.audio)) onEvent({ type: 'note', note: n });
+      }
+      for (const id of [...notes.keys()]) if (!seen.has(id) && !(ed?.id === id && pendingSaves.has(ed))) onEvent({ type: 'note-gone', id });
+    } catch { /* ja es tornarà a provar */ } finally { polling = false; }
+  }
+  function schedule() {
+    clearTimeout(pollT);
+    if (!root && !ed) return;
+    pollT = setTimeout(async () => { if (!document.hidden) await refresh(); schedule(); }, busy() ? 1500 : 10000);
+  }
+  document.addEventListener('visibilitychange', () => { if (!document.hidden && (root || ed)) { refresh(); schedule(); } });
+  addEventListener('online', () => { if (root || ed) refresh(); });
+
+  // ---------------------------------------------------------------- editor
+  function openEditor(id, src, opts = {}) {
+    if (ed) return;
+    const n = id ? notes.get(id) : { id: null, title: '', text: '', items: opts.list ? [] : null, color: '', pinned: false, archived: false, trashed: 0, labels: [], audio: [] };
+    if (!n) return;
+    ed = { id, n: structuredClone(n), machineKey: machineKey(), historyKey: opts.historyKey || uid(), dirty: {}, savingFields: {}, timer: 0, chain: Promise.resolve(true), rec: null, ai: null, src, pop: null };
+    if (!opts.fromHistory) history.pushState({ ...history.state, nioNote: { id, key: ed.historyKey } }, '', location.href);
+    const ov = document.createElement('div');
+    ov.className = 'nt-ov'; ov.innerHTML = `<div class="nt-ed" role="dialog" aria-modal="true" aria-label="Edita la nota" data-color="${n.color}"></div>`;
+    document.body.append(ov); ed.ov = ov; ed.card = ov.firstElementChild;
+    buildEditor();
+    ov.addEventListener('mousedown', (e) => { if (e.target === ov) closeEditor(); });
+    ov.addEventListener('keydown', (e) => {
+      if (!ed) return;
+      if (e.key === 'Escape') { if (ed.pop) closePop(); else closeEditor(); }
+      else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) closeEditor();
+      else if (e.key === 'Tab') {
+        const controls = [...ov.querySelectorAll('button, input, textarea, select, [tabindex="0"]')].filter((el) => !el.disabled && el.getClientRects().length);
+        const first = controls[0], last = controls.at(-1);
+        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last?.focus(); }
+        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first?.focus(); }
+      }
+    });
+    $('[data-e="done"]', ed.card).focus({ preventScroll: true });
+    animateOpen(ed.card, src);
+    if (!n.title && !n.text && !n.items?.length && !opts.mic && !ctx.isPhone()) setTimeout(() => ed && $('.nt-ed-title', ed.card)?.focus(), 60);
+    if (opts.list) addItem(null);
+    if (opts.mic) toggleRec();
+  }
+  function animateOpen(card, src) {
+    if (reduce) return;
+    const phone = matchMedia('(max-width: 700px)').matches;
+    if (phone || !src?.isConnected) { card.animate([{ transform: 'translateY(40px)', opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 260, easing: 'cubic-bezier(.22,1,.36,1)' }); return; }
+    const a = src.getBoundingClientRect(), b = card.getBoundingClientRect();
+    const dx = a.left - b.left, dy = a.top - b.top, sx = a.width / b.width, sy = Math.max(.2, a.height / b.height);
+    card.style.transformOrigin = '0 0';
+    card.animate([{ transform: `translate(${dx}px,${dy}px) scale(${sx},${sy})`, opacity: .6 }, { transform: 'none', opacity: 1 }], { duration: 300, easing: 'cubic-bezier(.22,1,.36,1)' });
+    ed.ov.animate([{ background: 'rgba(39,34,36,0)' }, { background: 'rgba(39,34,36,.32)' }], { duration: 300, easing: 'ease-out' });
+  }
+  async function closeEditor(instant, fromHistory = false) {
+    const e = ed; if (!e) return;
+    if (!instant && !fromHistory && history.state?.nioNote) { history.back(); return; }
+    if (instant && history.state?.nioNote) { const { nioNote, ...rest } = history.state; history.replaceState(rest, '', location.href); }
+    if (!instant) {
+      if (e.closing) return;
+      e.closing = true;
+      const saved = await flush(e);
+      e.closing = false;
+      if (ed !== e) return;
+      if (!saved) {
+        if (fromHistory && root && location.hash.startsWith('#/notes')) history.pushState({ ...history.state, nioNote: { id: e.id, key: e.historyKey } }, '', location.href);
+        return;
+      }
+    }
+    ed = null; clearTimeout(e.timer); e.rec?.cancel?.(); e.audioEl?.pause();
+    const done = () => e.ov.remove();
+    if (instant || reduce) done(); else {
+      const src = e.id && root ? root.querySelector(`.nt-card[data-id="${e.id}"]`) : null, phone = matchMedia('(max-width: 700px)').matches;
+      let kf = [{ transform: 'none', opacity: 1 }, { transform: 'translateY(30px)', opacity: 0 }];
+      if (!phone && src) { const a = src.getBoundingClientRect(), b = e.card.getBoundingClientRect(); kf = [{ transform: 'none', opacity: 1 }, { transform: `translate(${a.left - b.left}px,${a.top - b.top}px) scale(${a.width / b.width},${Math.max(.2, a.height / b.height)})`, opacity: .4 }]; }
+      e.card.style.transformOrigin = '0 0';
+      e.card.animate(kf, { duration: 220, easing: 'cubic-bezier(.4,0,.2,1)', fill: 'forwards' });
+      e.ov.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 220, fill: 'forwards' }).onfinish = done;
+    }
+    await flush(e);
+    if (e.id && empty(e.n)) { notes.delete(e.id); api(`/api/notes/${e.id}?forever=1`, { method: 'DELETE' }).catch(() => {}); }
+    if (root) drawAll();
+    if (root) (e.src?.isConnected ? e.src.querySelector('button') || e.src : root.querySelector('[data-nt="new"]'))?.focus({ preventScroll: true });
+  }
+
+  // Desat: s'envia només el que ha canviat, en cua, mig segon després de l'última tecla.
+  function set(fields) {
+    Object.assign(ed.n, fields); Object.assign(ed.dirty, fields);
+    pendingSaves.add(ed); saveStatus(ed, 'Canvis pendents…');
+    ed.card.dataset.color = ed.n.color;
+    clearTimeout(ed.timer); ed.timer = setTimeout(flush, 450);
+    if (ed.id) notes.set(ed.id, ed.n);
+    if (root) { clearTimeout(set.t); set.t = setTimeout(() => { drawFilters(); drawGrid(); }, 200); }
+  }
+  function flush(e = ed, force = false) {
+    if (!e) return Promise.resolve(true);
+    clearTimeout(e.timer);
+    e.chain = e.chain.then(async () => {
+      if (e.machineKey !== machineKey()) {
+        if ((!e.id && empty(e.n)) || (e.id && !Object.keys(e.dirty).length && !e.error)) return true;
+        e.error = true; pendingSaves.add(e); return false;
+      }
+      const fields = e.dirty; e.dirty = {}; e.savingFields = fields;
+      if (e.id && !Object.keys(fields).length) return !e.error;
+      saveStatus(e, 'Desant…');
+      try {
+        if (!e.id) {
+          if (!force && empty(e.n)) { pendingSaves.delete(e); e.savingFields = {}; saveStatus(e, 'Nota buida'); return true; }
+          const { audio, id, ...body } = e.n; void audio; void id;
+          const r = await api('/api/notes', { method: 'POST', body }); e.id = r.id; Object.assign(e.n, { id: r.id, audio: r.audio, created: r.created, updated: r.updated }); notes.set(r.id, e.n);
+          historyNotes.set(e.historyKey, r.id);
+          if (ed === e && history.state?.nioNote) history.replaceState({ ...history.state, nioNote: { id: r.id, key: e.historyKey } }, '', location.href);
+        } else if (Object.keys(fields).length) { const r = await api(`/api/notes/${e.id}`, { method: 'PATCH', body: fields }); e.n.updated = r.updated; }
+        e.error = false; e.savingFields = {};
+        if (!Object.keys(e.dirty).length) pendingSaves.delete(e);
+        saveStatus(e, Object.keys(e.dirty).length ? 'Canvis pendents…' : 'Desat');
+        return true;
+      } catch (er) {
+        e.dirty = { ...fields, ...e.dirty }; e.savingFields = {}; e.error = true; pendingSaves.add(e);
+        saveStatus(e, 'No s’ha pogut desar', true);
+        toast(`No s’ha pogut desar: ${er.message}`, 4500);
+        return false;
+      }
+    });
+    return e.chain;
+  }
+  function saveStatus(entry, text, error = false) {
+    const status = entry.card?.querySelector('#edSaveStatus'), retry = entry.card?.querySelector('[data-e="retry-save"]');
+    if (status) { status.textContent = text; status.classList.toggle('err', error); }
+    if (retry) retry.hidden = !error;
+  }
+  const ensureId = async () => { if (!ed.id) await flush(ed, true); return ed.id; };
+
+  function buildEditor() {
+    const n = ed.n, c = ed.card;
+    c.innerHTML = `
+      <div class="nt-ed-nav"><button class="nt-ib nt-back" type="button" data-e="done">${svg(I.back)}<span>Notes</span></button><div class="nt-save"><span id="edSaveStatus" role="status">Es desa automàticament</span><button type="button" class="nt-ib" data-e="retry-save" hidden>Torna a desar</button></div></div>
+      <div class="nt-ed-head"><input class="nt-ed-title" type="text" placeholder="Títol" value="${esc(n.title)}" aria-label="Títol" maxlength="200" autocomplete="off">
+        <button class="nt-ib ${n.pinned ? 'on' : ''}" type="button" data-e="pin" aria-label="Fixa la nota" aria-pressed="${n.pinned}">${svg(I.pin)}</button></div>
+      <div class="nt-ed-body" id="edBody"></div>
+      <div class="nt-audio" id="edAudio"></div>
+      <div class="nt-labels nt-ed-labels" id="edLabels"></div>
+      <div class="nt-ai" id="edAi" hidden></div>
+      <div class="nt-rec" id="edRec" hidden></div>
+      <div class="nt-more-scrim" id="edScrim" hidden></div>
+      <div class="nt-more-sheet" id="edMore" role="dialog" aria-label="Més opcions" hidden>
+        <div class="nt-more-grab" aria-hidden="true"></div>
+        <button type="button" data-e="archive">${n.archived ? 'Desarxiva' : 'Arxiva'}</button>
+        <button type="button" data-e="trash" class="danger">Envia a la paperera</button>
+        <button type="button" data-e="more-close" class="muted">Tanca</button>
+      </div>
+      <div class="nt-ed-foot" id="edFoot">
+        <div class="nt-tb"><div class="nt-edit-tools">
+          <button class="nt-ib" type="button" data-e="mic" aria-label="Grava amb el micròfon" title="Grava (Whisper, a l’ordinador)">${svg(I.mic)}</button>
+          <button class="nt-ib" type="button" data-e="mode" id="edMode" title="Llista o text"></button>
+          <button class="nt-ib" type="button" data-e="color" aria-label="Color" title="Color">${svg(I.palette)}</button>
+          <button class="nt-ib" type="button" data-e="label" aria-label="Etiquetes" title="Etiquetes">${svg(I.tag)}</button>
+          <button class="nt-ib nt-ai-b" type="button" data-e="ai" aria-label="Assistent" title="Resumeix i organitza amb un model">${svg(I.spark)}<span>Assistent</span></button>
+          <button class="nt-ib nt-more-btn" type="button" data-e="more" aria-label="Més">${svg(I.more)}</button>
+          </div><div class="nt-note-tools">
+          <button class="nt-ib" type="button" data-e="archive" aria-label="Arxiva" title="Arxiva">${svg(I.archive)}</button>
+          <button class="nt-ib" type="button" data-e="trash" aria-label="Paperera" title="Paperera">${svg(I.trash)}</button>
+          <button class="btn ink nt-done" type="button" data-e="done">Fet</button></div>
+        </div>
+      </div>`;
+    const title = $('.nt-ed-title', c);
+    title.addEventListener('input', () => set({ title: title.value }));
+    title.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); ($('.nt-ed-text', c) || $('.nt-item input[type=text]', c))?.focus(); } });
+    c.addEventListener('click', onEditorClick);
+    drawBody(); drawAudio(); drawLabels(); drawMode();
+    bindMoreDrag($('#edMore', c), $('#edScrim', c));
+  }
+  // El panell «Més» segueix el dit cap avall i es tanca si baixa prou o es llença; si no, torna a pujar.
+  let moreDraggedAt = 0;
+  function bindMoreDrag(sheet, scrim) {
+    let g = null;
+    sheet.addEventListener('pointerdown', (e) => { if (e.pointerType === 'mouse') return; g = { y0: e.clientY, dy: 0, pid: e.pointerId, pts: [[e.timeStamp, e.clientY]], moved: false }; }, { passive: true });
+    sheet.addEventListener('pointermove', (e) => {
+      if (!g || e.pointerId !== g.pid) return;
+      const dy = e.clientY - g.y0;
+      if (!g.moved) { if (Math.abs(dy) < 6) return; g.moved = true; sheet.setPointerCapture?.(e.pointerId); sheet.style.transition = 'none'; scrim.style.transition = 'none'; }
+      g.dy = dy > 0 ? dy : dy / 4; // cap amunt, amb resistència
+      g.pts.push([e.timeStamp, e.clientY]); if (g.pts.length > 5) g.pts.shift();
+      sheet.style.transform = `translateY(${g.dy}px)`;
+      scrim.style.opacity = String(Math.max(0, 1 - Math.max(0, g.dy) / sheet.offsetHeight));
+    });
+    const end = (e) => {
+      if (!g || e.pointerId !== g.pid) return;
+      const d = g; g = null; if (!d.moved) return;
+      moreDraggedAt = Date.now();
+      const [t0, y0] = d.pts[0], [t1, y1] = d.pts[d.pts.length - 1], v = (y1 - y0) / Math.max(1, t1 - t0);
+      if (d.dy > sheet.offsetHeight * 0.3 || (v > 0.4 && d.dy > 12)) closeMore(true);
+      else { sheet.style.transition = ''; scrim.style.transition = ''; sheet.style.transform = ''; scrim.style.opacity = ''; }
+    };
+    sheet.addEventListener('pointerup', end); sheet.addEventListener('pointercancel', end);
+  }
+  function drawMode() { const b = $('#edMode', ed.card); if (b) { b.innerHTML = svg(ed.n.items ? I.text : I.list); b.setAttribute('aria-label', ed.n.items ? 'Passa a text' : 'Passa a llista'); } }
+  function drawBody() {
+    const n = ed.n, box = $('#edBody', ed.card);
+    if (!n.items) {
+      box.innerHTML = '<textarea class="nt-ed-text" placeholder="Escriu una nota…" aria-label="Text de la nota" rows="3"></textarea>';
+      const ta = $('textarea', box); ta.value = n.text; grow(ta);
+      ta.addEventListener('input', () => { grow(ta); set({ text: ta.value }); });
+      return;
+    }
+    const open = n.items.filter((i) => !i.done), done = n.items.filter((i) => i.done);
+    const row = (i) => `<div class="nt-item ${i.done ? 'done' : ''}" data-i="${i.id}"><input type="checkbox" data-e="tick" ${i.done ? 'checked' : ''} aria-label="Fet"><input type="text" value="${esc(i.text)}" placeholder="Element" aria-label="Element" maxlength="500"><button type="button" class="nt-x" data-e="rm" aria-label="Treu l’element">${svg(I.close)}</button></div>`;
+    box.innerHTML = `${n.text.trim() ? '<textarea class="nt-ed-text nt-desc" rows="2" aria-label="Text de la nota"></textarea>' : ''}<div id="edItems">${open.map(row).join('')}</div><button class="nt-add" type="button" data-e="add">${svg(I.plus)}<span>Afegeix un element</span></button>${done.length ? `<div class="nt-donehd">${done.length} ${done.length === 1 ? 'fet' : 'fets'}</div><div>${done.map(row).join('')}</div>` : ''}`;
+    const d = $('.nt-desc', box); if (d) { d.value = n.text; grow(d); d.addEventListener('input', () => { grow(d); set({ text: d.value }); }); }
+    $$all('.nt-item input[type=text]', box).forEach((inp) => {
+      const id = inp.closest('.nt-item').dataset.i;
+      inp.addEventListener('input', () => set({ items: ed.n.items.map((x) => (x.id === id ? { ...x, text: inp.value } : x)) }));
+      inp.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); addItem(id); }
+        else if (e.key === 'Backspace' && !inp.value) { e.preventDefault(); const prev = inp.closest('.nt-item').previousElementSibling; removeItem(id); prev?.querySelector('input[type=text]')?.focus(); }
+      });
+    });
+  }
+  const $$all = (s, e) => [...e.querySelectorAll(s)];
+  function addItem(afterId) {
+    const it = { id: uid(), text: '', done: false }, arr = [...ed.n.items], i = afterId ? arr.findIndex((x) => x.id === afterId) : arr.length - 1;
+    arr.splice(i + 1, 0, it); set({ items: arr }); drawBody(); $(`.nt-item[data-i="${it.id}"] input[type=text]`, ed.card)?.focus();
+  }
+  function removeItem(id) { set({ items: ed.n.items.filter((x) => x.id !== id) }); drawBody(); }
+  function drawLabels() { const box = $('#edLabels', ed.card); box.innerHTML = ed.n.labels.map((l) => `<span class="nt-label">${esc(l)}<button type="button" data-e="unlabel" data-l="${esc(l)}" aria-label="Treu l’etiqueta ${esc(l)}">${svg(I.close)}</button></span>`).join(''); box.hidden = !ed.n.labels.length; }
+  // L'àudio acabat de pujar també surt a la llista (targeta «Transcrivint…»), sense esperar el flux.
+  function upsertAudio(note) { const cur = notes.get(note.id); if (cur && cur !== ed?.n) cur.audio = note.audio; if (root) drawGrid(); }
+  function drawAudio() {
+    const box = $('#edAudio', ed.card), list = ed.n.audio;
+    box.hidden = !list.length && !ed.uploading;
+    box.innerHTML = (ed.uploading ? '<div class="nt-au" data-st="transcribing"><span class="nt-au-s"><i class="nt-spin"></i>Enviant l’àudio a l’ordinador…</span></div>' : '') + list.map((a) => `<div class="nt-au" data-a="${a.id}" data-st="${a.state}">
+      <button type="button" class="nt-ib sm" data-e="play" aria-label="Escolta">${svg(I.play)}</button>
+      <span class="nt-au-d">${a.dur ? fmtDur(a.dur) : 'Àudio'}</span>
+      <span class="nt-au-s">${a.state === 'transcribing' ? '<i class="nt-spin"></i>Transcrivint amb Whisper…' : a.state === 'ok' ? `${svg(I.check)}Transcripció afegida` : `${esc(a.error || 'No s’ha pogut transcriure')}`}</span>
+      ${a.state === 'error' ? (/Whisper|veu/i.test(a.error) && !ctx.voiceOn() ? '<button type="button" class="btn sm" data-e="voice">Activa Whisper</button>' : '<button type="button" class="btn ghost sm" data-e="retry">Torna-ho a provar</button>') : ''}</div>`).join('');
+  }
+  // Canvis que arriben de fora (transcripció acabada, un altre dispositiu).
+  function syncEditor() {
+    const n = ed.n, c = ed.card;
+    drawAudio(); drawLabels(); drawMode(); c.dataset.color = n.color;
+    // El text que arriba (transcripció, un altre dispositiu) entra encara que el camp tingui el cursor,
+    // sempre que ara mateix no s'hi estigui escrivint; el cursor es queda on era.
+    const mine = (k) => k in ed.dirty || k in ed.savingFields;
+    const put = (el, v) => { const at = el.selectionStart, end = el.selectionEnd, foc = document.activeElement === el; el.value = v; if (foc) try { el.setSelectionRange(at, end); } catch { /* res */ } };
+    const ta = $('.nt-ed-text', c); if (ta && !mine('text') && ta.value !== n.text) { put(ta, n.text); grow(ta); }
+    const ti = $('.nt-ed-title', c); if (!mine('title') && ti.value !== n.title) put(ti, n.title);
+    if (n.items && !mine('items') && !c.contains(document.activeElement?.closest?.('.nt-item'))) drawBody();
+    if (!n.items && !ta) drawBody();
+    $('[data-e="pin"]', c).classList.toggle('on', n.pinned);
+  }
+
+  async function onEditorClick(ev) {
+    const b = ev.target.closest('[data-e]'), c = ed?.card; if (!b || !ed) { if (ed?.pop && !ev.target.closest('.nt-pop')) closePop(); if (ed && !ev.target.closest('.nt-more-sheet')) closeMore(true); return; }
+    const a = b.dataset.e;
+    if (ev.target.closest('.nt-more-sheet') && Date.now() - moreDraggedAt < 350) return; // era un arrossegament, no un toc
+    if (a === 'more-close') return closeMore(true);
+    if (a !== 'more' && !ev.target.closest('.nt-more-sheet')) closeMore(true);
+    if (a === 'retry-save') { b.disabled = true; await flush(ed); b.disabled = false; return; }
+    if (!['color', 'label', 'ai', 'aiengine'].includes(a) && !ev.target.closest('.nt-pop')) closePop();
+    if (a === 'done') return closeEditor();
+    if (a === 'pin') { set({ pinned: !ed.n.pinned }); b.classList.toggle('on', ed.n.pinned); b.setAttribute('aria-pressed', ed.n.pinned); return; }
+    if (a === 'archive') { set({ archived: !ed.n.archived, pinned: false }); toast(ed.n.archived ? 'Arxivada' : 'Desarxivada'); return closeEditor(); }
+    if (a === 'trash') { set({ trashed: true }); toast('Anat a la paperera'); return closeEditor(); }
+    if (a === 'mode') {
+      const n = ed.n;
+      if (n.items) set({ text: [n.text, ...n.items.map((i) => i.text)].filter((s) => s.trim()).join('\n'), items: null });
+      else { const lines = n.text.split('\n').map((s) => s.replace(/^\s*(?:[-*•]|\[[ x]\])\s*/i, '').trim()).filter(Boolean); set({ items: lines.map((t) => ({ id: uid(), text: t, done: false })), text: '' }); if (!lines.length) addItem(null); }
+      drawMode(); drawBody(); return;
+    }
+    if (a === 'tick') { const id = b.closest('.nt-item').dataset.i; set({ items: ed.n.items.map((x) => (x.id === id ? { ...x, done: b.checked } : x)) }); drawBody(); return; }
+    if (a === 'rm') return removeItem(b.closest('.nt-item').dataset.i);
+    if (a === 'add') return addItem(null);
+    if (a === 'unlabel') { set({ labels: ed.n.labels.filter((l) => l !== b.dataset.l) }); drawLabels(); return; }
+    if (a === 'color') return popColor(b);
+    if (a === 'label') return popLabel(b);
+    if (a === 'ai') return popAi(b);
+    if (a === 'more') return openMore();
+    if (a === 'mic') return toggleRec();
+    if (a === 'play') return play(b.closest('.nt-au').dataset.a, b);
+    if (a === 'voice') return ctx.voiceSheet();
+    if (a === 'retry') { try { await api(`/api/notes/${ed.id}/audio/${b.closest('.nt-au').dataset.a}/retry`, { method: 'POST' }); } catch (e) { toast(e.message, 4500); } return; }
+    void c;
+  }
+
+  // ---------------------------------------------------------------- finestretes (color, etiquetes, assistent)
+  function openMore() {
+    if (!ed) return; closePop();
+    const s = $('#edMore', ed.card), sc = $('#edScrim', ed.card);
+    // Puja amb una transició (no una animació CSS) perquè el dit el pugui agafar mentre encara puja.
+    s.hidden = sc.hidden = false;
+    if (!reduce) { s.style.transition = sc.style.transition = 'none'; s.style.transform = 'translateY(100%)'; sc.style.opacity = '0'; void s.offsetHeight; }
+    s.style.transition = sc.style.transition = s.style.transform = sc.style.opacity = '';
+    $('button', s)?.focus({ preventScroll: true });
+  }
+  function closeMore(animated) {
+    const s = ed?.card?.querySelector('#edMore'), sc = ed?.card?.querySelector('#edScrim');
+    if (!s || s.hidden) return;
+    const hide = () => { s.hidden = sc.hidden = true; s.style.transition = sc.style.transition = s.style.transform = sc.style.opacity = ''; };
+    if (!animated || reduce) return hide();
+    s.style.transition = 'transform .22s cubic-bezier(.4,0,1,1)'; sc.style.transition = 'opacity .22s';
+    s.style.transform = 'translateY(105%)'; sc.style.opacity = '0';
+    setTimeout(hide, 220);
+  }
+  function closePop() { ed?.pop?.remove(); if (ed) ed.pop = null; }
+  function pop(anchor, html) {
+    closePop();
+    const p = document.createElement('div'); p.className = 'nt-pop'; p.innerHTML = html;
+    ed.card.append(p); ed.pop = p;
+    const a = anchor.getBoundingClientRect(), r = ed.card.getBoundingClientRect(), w = p.offsetWidth;
+    p.style.maxHeight = `${Math.max(80, a.top - Math.max(r.top, window.visualViewport?.offsetTop || 0) - 16)}px`;
+    p.style.left = `${Math.max(8, Math.min(a.left - r.left, r.width - w - 8))}px`; p.style.bottom = `${r.bottom - a.top + 8}px`;
+    return p;
+  }
+  function popColor(b) {
+    const p = pop(b, `<div class="nt-colors">${COLORS.map(([k, l]) => `<button type="button" class="nt-dot" data-color="${k}" aria-label="${l}" title="${l}" ${ed.n.color === k ? 'aria-pressed="true"' : ''}></button>`).join('')}</div>`);
+    p.addEventListener('click', (e) => { const d = e.target.closest('.nt-dot'); if (d) { set({ color: d.dataset.color }); closePop(); } });
+  }
+  function popLabel(b) {
+    const mine = new Set(ed.n.labels), labs = labelsOf().filter((l) => !mine.has(l));
+    const p = pop(b, `<form class="nt-lf"><input type="text" placeholder="Nova etiqueta" maxlength="30" aria-label="Nova etiqueta" autocomplete="off"><button class="btn ink sm" type="submit">Afegeix</button></form>${labs.length ? `<div class="nt-lsug">${labs.map((l) => `<button type="button" class="nt-chip" data-l="${esc(l)}">${esc(l)}</button>`).join('')}</div>` : ''}`);
+    const add = (l) => { l = l.trim().toLowerCase(); if (!l || ed.n.labels.includes(l) || ed.n.labels.length >= 12) return; set({ labels: [...ed.n.labels, l] }); drawLabels(); closePop(); };
+    $('form', p).onsubmit = (e) => { e.preventDefault(); add($('input', p).value); };
+    p.addEventListener('click', (e) => { const c = e.target.closest('[data-l]'); if (c) add(c.dataset.l); });
+    setTimeout(() => $('input', p).focus(), 30);
+  }
+
+  // ---------------------------------------------------------------- veu: grava aquí, transcriu l'ordinador
+  async function toggleRec() {
+    if (!ed) return;
+    if (ed.rec) return ed.rec.stop();
+    if (ctx.isDemo()) return toast('A la demo no hi ha micròfon. Amb nio instal·lat, transcrius amb Whisper, gratis.', 4500);
+    if (!ctx.voiceOn()) { toast('Cal activar Whisper per transcriure (gratis, a l’ordinador).', 3500); return ctx.voiceSheet(); }
+    if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) return toast('Aquest navegador no pot gravar àudio.');
+    let stream; try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); } catch { return toast('No tinc permís per al micròfon. Activa’l als ajustos del navegador.', 4500); }
+    if (!ed) { stream.getTracks().forEach((t) => t.stop()); return; }
+    const rec = new MediaRecorder(stream), chunks = [], t0 = Date.now(); let send = true;
+    const box = $('#edRec', ed.card), foot = $('#edFoot', ed.card);
+    const tick = () => { const s = $('.nt-rec-t', box); if (s) s.textContent = fmtDur((Date.now() - t0) / 1000); };
+    box.hidden = false; foot.hidden = true;
+    box.innerHTML = `<span class="nt-rec-dot"></span><span class="nt-rec-t">0:00</span><span class="nt-rec-l">Gravant…</span><button class="btn ghost sm" type="button" data-r="cancel">Cancel·la</button><button class="btn ink sm" type="button" data-r="stop">${svg(I.stop)}Atura i transcriu</button>`;
+    const timer = setInterval(tick, 500);
+    box.onclick = (e) => { const r = e.target.closest('[data-r]')?.dataset.r; if (r === 'cancel') { send = false; rec.stop(); } else if (r === 'stop') rec.stop(); };
+    const cleanup = () => { clearInterval(timer); stream.getTracks().forEach((t) => t.stop()); if (ed) { ed.rec = null; box.hidden = true; foot.hidden = false; } };
+    rec.ondataavailable = (e) => { if (e.data.size) chunks.push(e.data); };
+    rec.onstop = async () => {
+      const dur = (Date.now() - t0) / 1000; cleanup();
+      if (!send) return;
+      const blob = new Blob(chunks, { type: rec.mimeType || 'audio/webm' });
+      if (!ed) return;
+      try {
+        if (blob.size < 1500) throw new Error('No he sentit res. Prova-ho una altra vegada.');
+        ed.uploading = true; drawAudio();
+        const id = await ensureId(); if (!id) throw new Error('No s’ha pogut crear la nota');
+        const res = await ctx.nodeAudio(`/api/notes/${id}/audio?dur=${Math.round(dur)}`, { headers: { 'content-type': blob.type || 'audio/webm' }, body: blob });
+        const note = await res.json(); if (ed) { ed.uploading = false; ed.n.audio = note.audio; upsertAudio(note); drawAudio(); schedule(); }
+      } catch (e) { if (ed) { ed.uploading = false; drawAudio(); } toast(e.message, 4500); }
+    };
+    ed.rec = { stop: () => rec.stop(), cancel: () => { send = false; try { rec.stop(); } catch { cleanup(); } } };
+    rec.start(1000);
+  }
+  async function play(aid, btn) {
+    if (ed.audioEl && ed.audioId === aid) { const a = ed.audioEl; if (a.paused) { a.play(); btn.innerHTML = svg(I.pause); } else { a.pause(); btn.innerHTML = svg(I.play); } return; }
+    ed.audioEl?.pause(); $$all('.nt-au [data-e=play]', ed.card).forEach((x) => { x.innerHTML = svg(I.play); });
+    try {
+      const m = ctx.machine(), r = await fetch(`${m.url}/api/notes/${ed.id}/audio/${aid}`, { headers: { Authorization: `Bearer ${m.token}` } });
+      if (!r.ok) throw new Error('No he pogut baixar l’àudio');
+      const url = URL.createObjectURL(await r.blob()), a = new Audio(url);
+      a.onended = () => { btn.innerHTML = svg(I.play); ed.audioId = null; URL.revokeObjectURL(url); };
+      ed.audioEl = a; ed.audioId = aid; await a.play(); btn.innerHTML = svg(I.pause);
+    } catch (e) { toast(e.message, 4000); }
+  }
+
+  // ---------------------------------------------------------------- assistent: resumeix i organitza amb un model
+  async function loadEngines() { if (!engines) { try { engines = (await api('/api/notes/engines')).engines; } catch { engines = []; } } return engines; }
+  async function popAi(b) {
+    const p = pop(b, '<p class="muted small nt-pad">Mirant quins models hi ha…</p>');
+    const list = await loadEngines(); if (ed?.pop !== p) return;
+    if (!list.length) { p.innerHTML = '<p class="small nt-pad">No hi ha cap model en aquest ordinador.<br>Instal·la <b>Ollama</b> i un model (<span class="mono">ollama pull qwen3:4b</span>) o <b>Claude Code</b>.</p>'; return; }
+    // Per defecte: el model local més petit de 3 mil milions de paràmetres o més; si no, Claude ràpid; si no, el primer.
+    const auto = (list.find((e) => e.local && e.id.startsWith('ollama:') && e.params >= 3) || list.find((e) => e.id === 'claude:haiku') || list[0]).id;
+    const saved0 = LSget('nio.notes.engine', ''), saved = list.some((e) => e.id === saved0) ? saved0 : auto, groups = [...new Set(list.map((e) => e.group))];
+    const hasText = !!ed.n.text.trim() || !!ed.n.items?.length;
+    p.innerHTML = `<label class="nt-pad small"><span class="muted">Model</span><select id="aiEng" class="nt-sel">${groups.map((g) => `<optgroup label="${esc(g)}">${list.filter((e) => e.group === g).map((e) => `<option value="${esc(e.id)}" ${e.id === saved ? 'selected' : ''}>${esc(e.label)}</option>`).join('')}</optgroup>`).join('')}</select></label>
+      <div class="nt-acts-list">${ACTIONS.map(([k, l, d]) => `<button type="button" data-ai="${k}" ${hasText ? '' : 'disabled'}><b>${l}</b><span>${d}</span></button>`).join('')}</div>
+      <form class="nt-lf" id="aiForm"><input type="text" placeholder="O demana-li qualsevol cosa…" maxlength="300" aria-label="Instrucció pròpia" ${hasText ? '' : 'disabled'}><button class="btn ink sm" type="submit" ${hasText ? '' : 'disabled'}>Envia</button></form>
+      <p class="nt-note small muted" id="aiNote"></p>`;
+    const eng = $('#aiEng', p), note = $('#aiNote', p);
+    const upd = () => { const e = list.find((x) => x.id === eng.value); note.textContent = e?.local ? 'Es queda a l’ordinador: cap dada surt de casa.' : 'Aquest text s’envia al servei del model (Anthropic, OpenAI o núvol d’Ollama).'; };
+    eng.onchange = () => { LSset('nio.notes.engine', eng.value); upd(); }; upd();
+    p.addEventListener('click', (e) => { const x = e.target.closest('[data-ai]'); if (x && !x.disabled) runAi(x.dataset.ai, eng.value); });
+    $('#aiForm', p).onsubmit = (e) => { e.preventDefault(); const v = $('input', p).value.trim(); if (v) runAi('custom', eng.value, v); };
+  }
+  async function runAi(action, engine, prompt) {
+    closePop();
+    const e = ed; await flush(); if (!ed || ed !== e) return; if (!e.id) return;
+    const box = $('#edAi', e.card); box.hidden = false;
+    box.innerHTML = `<div class="nt-ai-run"><i class="nt-spin"></i><span>Treballant amb ${esc(engine.replace(/^ollama:/, ''))}…</span></div>`;
+    try {
+      const r = await api('/api/notes/ai', { method: 'POST', body: { id: e.id, action, engine, prompt } });
+      if (ed !== e) return;
+      showAiResult(box, r);
+    } catch (er) { if (ed === e) box.innerHTML = `<div class="nt-ai-err"><span>${esc(er.message)}</span><button class="btn ghost sm" type="button" data-x>Tanca</button></div>`; box.onclick = (ev) => { if (ev.target.closest('[data-x]')) box.hidden = true; }; }
+  }
+  function showAiResult(box, r) {
+    const { action, result: x } = r, n = ed.n;
+    const body = action === 'tasks' ? (x.items.length ? `<ul>${x.items.map((i) => `<li>${esc(i)}</li>`).join('')}</ul>` : '<p class="muted">No he trobat cap tasca.</p>')
+      : action === 'title' ? `<p><b>${esc(x.title)}</b></p>`
+      : action === 'organize' ? `<p><b>${esc(x.title)}</b></p><pre>${esc(x.text)}</pre>${x.labels.length ? `<p>${x.labels.map((l) => `<span class="nt-label">${esc(l)}</span>`).join('')}</p>` : ''}`
+      : `<pre>${esc(x.text)}</pre>`;
+    const label = { summary: 'Resum', clean: 'Transcripció neta', organize: 'Nota organitzada', tasks: 'Tasques', title: 'Títol', custom: 'Resposta' }[action];
+    const can = action === 'tasks' ? x.items.length : action === 'title' ? x.title : true;
+    box.innerHTML = `<div class="nt-ai-h"><span>${svg(I.spark)}${label}</span><small>${esc(r.engine.replace(/^ollama:/, ''))}${r.local ? ' · local' : ''}</small></div><div class="nt-ai-b">${body}</div>
+      <div class="row nt-ai-f"><button class="btn ghost sm" type="button" data-x>Descarta</button>${action === 'summary' || action === 'custom' ? '<button class="btn sm" type="button" data-ap="add">Afegeix al final</button>' : ''}<button class="btn ink sm" type="button" data-ap="apply" ${can ? '' : 'disabled'}>${action === 'summary' ? 'Afegeix a dalt' : 'Aplica'}</button></div>`;
+    box.onclick = (ev) => {
+      if (ev.target.closest('[data-x]')) { box.hidden = true; return; }
+      const ap = ev.target.closest('[data-ap]')?.dataset.ap; if (!ap) return;
+      const snap = { title: n.title, text: n.text, items: n.items ? n.items.map((i) => ({ ...i })) : null, labels: [...n.labels] };
+      if (action === 'summary') set({ text: ap === 'add' ? `${n.text.trimEnd()}\n\nResum\n${x.text}` : `Resum\n${x.text}\n\n${n.text}`.trimEnd() });
+      else if (action === 'custom') set({ text: ap === 'add' ? `${n.text.trimEnd()}\n\n${x.text}` : `${x.text}\n\n${n.text}`.trimEnd() });
+      else if (action === 'clean') set({ text: x.text });
+      else if (action === 'title') set({ title: x.title });
+      else if (action === 'tasks') set({ items: [...(n.items || []), ...x.items.map((t) => ({ id: uid(), text: t, done: false }))] });
+      else if (action === 'organize') set({ title: x.title, text: x.text, labels: [...new Set([...n.labels, ...x.labels])].slice(0, 12) });
+      const t = ed.card.querySelector('.nt-ed-title'); if (t) t.value = n.title;
+      drawBody(); drawLabels(); drawMode();
+      box.innerHTML = '<div class="nt-ai-run"><span>Aplicat.</span><button class="btn ghost sm" type="button" data-undo>Desfés</button></div>';
+      box.onclick = (e2) => { if (e2.target.closest('[data-undo]')) { set(snap); if (t) t.value = n.title; drawBody(); drawLabels(); drawMode(); box.hidden = true; } };
+    };
+  }
+
+  // ---------------------------------------------------------------- el mòbil com a micròfon
+  function phoneSheet() {
+    ctx.openSheet(`<h2>El mòbil, com a micròfon</h2>
+      <div class="stack"><p class="small">Obre nio al mòbil, entra a <b>Notes</b> i prem el micròfon. L’àudio va a aquest ordinador i el transcriu Whisper, gratis i sense sortir de casa. La nota surt aquí a l’instant.</p>
+      <ol class="small nt-steps"><li>Connecta el mòbil (un cop).</li><li>Obre <b>Notes</b> i prem <b>${svg(I.mic)}</b>.</li><li>Parla. Prem «Atura i transcriu».</li></ol>
+      <div class="row sheet-foot"><button class="btn ghost" type="button" data-close>Tanca</button><button class="btn ink" type="button" data-qr>${svg(I.phone)}Connecta el mòbil</button></div></div>`,
+      (sh) => { sh.querySelector('[data-close]').onclick = ctx.closeSheet; sh.querySelector('[data-qr]').onclick = () => { ctx.closeSheet(); setTimeout(ctx.mobileQrSheet, 220); }; });
+  }
+
+  return { mount, unmount, onEvent, reload, get open() { return !!ed; } };
+}