create-pmos 0.151.0 → 0.153.0

package/workspace/public/pm/c3-md.js

@@ -0,0 +1,395 @@
+/* pm/c3-md.js — markdown for the console3 document sheet (initiative c3-doc-sheet-rich): read it as rich text, edit it as rich
+ * text, and show a change as a rendered diff.
+ *
+ *   parseMd(md)            → blocks   the subset PMOS documents use: headings, paragraphs, quotes, bulleted, numbered and
+ *                                     checklist lists, tables, dividers and fenced code; inline bold, italic, code and links
+ *   toMd(blocks)           → md       the canonical markdown of blocks; toMd(parseMd(toMd(b))) === toMd(b)
+ *   canonMd(md)            → md       toMd(parseMd(md)): two texts that read the same compare equal
+ *   diffMd(before, after)  → md       `after`, with the words removed and added since `before` wrapped in markers that
+ *                                     toDom draws as <del> and <ins>; a line or sentence rewritten in most of its words is
+ *                                     shown whole, removed then added
+ *   toDom(blocks, doc?)    → Node[]   the blocks as elements (no innerHTML: every text is a text node); links are http(s),
+ *                                     mailto or relative only
+ *   fromDom(root)          → blocks   what the rich-text editor holds, read back as blocks
+ *
+ * parseMd, toMd, canonMd and diffMd are pure (Node-testable: c3-md.test.js); toDom and fromDom need a document.
+ */
+
+export const INS = '\uE000';
+export const INS_END = '\uE001';
+export const DEL = '\uE002';
+export const DEL_END = '\uE003';
+const MARK = /[\uE000-\uE003]/g;
+
+/* ── inline ── */
+
+/** Inline markdown → [{ t:'text', s } | { t:'b'|'i', c:[…] } | { t:'code', s } | { t:'a', href, c:[…] }]. */
+export function parseInline(src) {
+  const s = String(src == null ? '' : src);
+  const out = [];
+  let buf = '';
+  const flush = () => { if (buf) { out.push({ t: 'text', s: buf }); buf = ''; } };
+  let i = 0;
+  while (i < s.length) {
+    const c = s[i];
+    if (c === '\\' && i + 1 < s.length && /[\\`*_[\]()#|>-]/.test(s[i + 1])) { buf += s[i + 1]; i += 2; continue; }
+    if (c === '`') {
+      const j = s.indexOf('`', i + 1);
+      if (j > i) { flush(); out.push({ t: 'code', s: s.slice(i + 1, j) }); i = j + 1; continue; }
+    }
+    if (c === '[') {
+      const m = /^\[((?:[^\]\\]|\\.)+)\]\(([^)\s]+)\)/.exec(s.slice(i));
+      if (m) { flush(); out.push({ t: 'a', href: m[2], c: parseInline(m[1]) }); i += m[0].length; continue; }
+    }
+    if ((c === '*' || c === '_') && s[i + 1] === c) {
+      const j = s.indexOf(c + c, i + 2);
+      if (j > i + 2) { flush(); out.push({ t: 'b', c: parseInline(s.slice(i + 2, j)) }); i = j + 2; continue; }
+    }
+    if ((c === '*' || c === '_') && s[i + 1] !== c && s[i + 1] !== ' ' && (c === '*' || !/\w/.test(s[i - 1] || ''))) {
+      let j = i + 1;
+      while (j < s.length && !(s[j] === c && s[j + 1] !== c && s[j - 1] !== ' ' && s[j - 1] !== c)) j++;
+      if (j < s.length && j > i + 1 && (c === '*' || !/\w/.test(s[j + 1] || ''))) { flush(); out.push({ t: 'i', c: parseInline(s.slice(i + 1, j)) }); i = j + 1; continue; }
+    }
+    buf += c; i++;
+  }
+  flush();
+  return out;
+}
+
+// Text is escaped only where markdown would read it as syntax: a backslash before punctuation, `, *, [ and ], and an _ that
+// is not inside a word (snake_case stays as written).
+const escText = (s) => String(s).replace(/\\(?=[\\`*_[\]()#|>-])/g, '\\\\').replace(/[`*[\]]/g, '\\$&').replace(/(^|\W)_|_(?=\W|$)/g, (m) => m.replace('_', '\\_'));
+/** Inline nodes → markdown. `raw`: text as it is, unescaped (for a plain-text label). */
+export function inlineMd(nodes, raw) {
+  return (nodes || []).map((n) => {
+    if (n.t === 'text') return raw ? n.s : escText(n.s);
+    if (n.t === 'code') return raw ? n.s : '`' + n.s + '`';
+    const inner = inlineMd(n.c, raw);
+    if (raw || !inner.trim()) return inner;
+    const lead = inner.match(/^\s*/)[0]; const tail = inner.match(/\s*$/)[0]; const core = inner.trim();
+    if (n.t === 'b') return lead + '**' + core + '**' + tail;
+    if (n.t === 'i') return lead + '*' + core + '*' + tail;
+    if (n.t === 'a') return lead + '[' + core + '](' + n.href + ')' + tail;
+    return inner;
+  }).join('');
+}
+// a paragraph or list item whose text would start a heading, quote, list or rule is escaped at its start
+const lineSafe = (s) => s.replace(/^(#{1,6}\s|>|[-+]\s|\d+[.)]\s|-{3,}\s*$)/, '\\$1');
+
+/* ── blocks ── */
+
+const LIST = /^(\s*)([-*+]|\d+[.)])\s+/;
+const TASK = /^\[( |x|X)\]\s+/;
+const cells = (r) => {
+  const t = r.trim().replace(/^\|/, '').replace(/\|\s*$/, '');
+  const out = []; let cur = ''; for (let i = 0; i < t.length; i++) { if (t[i] === '\\' && t[i + 1] === '|') { cur += '|'; i++; } else if (t[i] === '|') { out.push(cur.trim()); cur = ''; } else cur += t[i]; }
+  out.push(cur.trim()); return out;
+};
+const isRule = (l) => /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/.test(l);
+const startsBlock = (l) => /^(#{1,6}\s|>|```|~~~|\s*(-{3,}|\*{3,}|_{3,})\s*$)/.test(l) || LIST.test(l) || /^\s*\|/.test(l);
+
+/** Markdown → blocks: { t:'h', level, c } · { t:'p', c } · { t:'quote', blocks } · { t:'list', ordered, items:[{ task, c }] } ·
+ *  { t:'table', head:[c], rows:[[c]] } · { t:'hr' } · { t:'code', lang, s }. Marker characters (diffMd) pass through as text. */
+export function parseMd(md) {
+  const L = String(md == null ? '' : md).replace(/\r\n?/g, '\n').split('\n');
+  const out = []; let i = 0;
+  const bare = (l) => l.replace(MARK, '');
+  while (i < L.length) {
+    const l = L[i]; const b = bare(l); let m;
+    if (!b.trim()) { i++; continue; }
+    if ((m = /^(```|~~~)\s*([\w-]*)/.exec(b))) {
+      const fence = m[1]; const body = []; i++;
+      while (i < L.length && !bare(L[i]).startsWith(fence)) body.push(L[i++]);
+      i++; out.push({ t: 'code', lang: m[2] || '', s: body.join('\n') }); continue;
+    }
+    if ((m = /^(#{1,6})\s+(.*?)\s*#*\s*$/.exec(l))) { out.push({ t: 'h', level: m[1].length, c: parseInline(m[2]) }); i++; continue; }
+    if (/^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(b)) { out.push({ t: 'hr' }); i++; continue; }
+    if (/^\s*>/.test(b)) {
+      const body = [];
+      while (i < L.length && /^\s*>/.test(bare(L[i]))) body.push(L[i++].replace(/^(\s*[\uE000-\uE003]*)\s*>\s?/, '$1'));
+      out.push({ t: 'quote', blocks: parseMd(body.join('\n')) }); continue;
+    }
+    if (/^\s*\|/.test(b) && i + 1 < L.length && isRule(bare(L[i + 1]))) {
+      const head = cells(l); i += 2; const rows = [];
+      while (i < L.length && /^\s*\|/.test(bare(L[i]))) rows.push(cells(L[i++]));
+      out.push({ t: 'table', head: head.map(parseInline), rows: rows.map((r) => head.map((_, k) => parseInline(r[k] || ''))) }); continue;
+    }
+    if (LIST.test(b)) {
+      const ordered = /^\s*\d/.test(b); const items = [];
+      while (i < L.length && LIST.test(bare(L[i])) && /^\s*\d/.test(bare(L[i])) === ordered) {
+        const lead = (/^[\uE000-\uE003]*/.exec(L[i]) || [''])[0];
+        let t = lead + L[i].slice(lead.length).replace(LIST, ''); i++;
+        while (i < L.length && /^\s{2,}\S/.test(L[i]) && !LIST.test(bare(L[i]))) t += ' ' + L[i++].trim();
+        const tk = TASK.exec(t.replace(MARK, ''));
+        if (tk) { const k = t.indexOf('['); t = t.slice(0, k) + t.slice(k).replace(TASK, ''); }
+        items.push({ task: tk ? tk[1] !== ' ' : null, c: parseInline(t) });
+      }
+      out.push({ t: 'list', ordered, items }); continue;
+    }
+    const body = [];
+    while (i < L.length && bare(L[i]).trim() && (!body.length || !startsBlock(bare(L[i])))) body.push(L[i++].trim());
+    out.push({ t: 'p', c: parseInline(body.join(' ')) });
+  }
+  return out;
+}
+
+/** Blocks → markdown, one blank line between blocks. */
+export function toMd(blocks) {
+  return (blocks || []).map((b) => {
+    if (b.t === 'h') return '#'.repeat(b.level || 2) + ' ' + inlineMd(b.c).trim();
+    if (b.t === 'p') return lineSafe(inlineMd(b.c).trim());
+    if (b.t === 'hr') return '---';
+    if (b.t === 'code') return '```' + (b.lang || '') + '\n' + b.s + '\n```';
+    if (b.t === 'quote') return toMd(b.blocks).split('\n').map((x) => (x ? '> ' + x : '>')).join('\n');
+    if (b.t === 'list') return b.items.map((it, k) => (b.ordered ? (k + 1) + '. ' : '- ') + (it.task == null ? '' : it.task ? '[x] ' : '[ ] ') + inlineMd(it.c).trim()).join('\n');
+    if (b.t === 'table') {
+      const cell = (c) => inlineMd(c).trim().replace(/\|/g, '\\|');
+      const w = Math.max(b.head.length, ...b.rows.map((r) => r.length));
+      const line = (r) => '| ' + Array.from({ length: w }, (_, k) => (r[k] ? cell(r[k]) : '')).join(' | ') + ' |';
+      return [line(b.head), '|' + Array.from({ length: w }, () => '---').join('|') + '|', ...b.rows.map(line)].join('\n');
+    }
+    return '';
+  }).filter((x) => x !== '').join('\n\n');
+}
+
+export const canonMd = (md) => toMd(parseMd(md));
+
+/* ── the rendered diff ── */
+
+function lcs(a, b) {
+  const n = a.length, m = b.length;
+  if (n * m > 400000) return [...a.map((x) => ['-', x]), ...b.map((x) => ['+', x])];
+  const T = Array.from({ length: n + 1 }, () => new Int32Array(m + 1));
+  for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) T[i][j] = a[i] === b[j] ? T[i + 1][j + 1] + 1 : Math.max(T[i + 1][j], T[i][j + 1]);
+  const ops = []; let i = 0, j = 0;
+  while (i < n && j < m) { if (a[i] === b[j]) { ops.push(['=', a[i]]); i++; j++; } else if (T[i + 1][j] >= T[i][j + 1]) ops.push(['-', a[i++]]); else ops.push(['+', b[j++]]); }
+  while (i < n) ops.push(['-', a[i++]]); while (j < m) ops.push(['+', b[j++]]);
+  return ops;
+}
+/** Runs of ops: [{ eq:true, items } | { eq:false, del:[…], add:[…] }]. */
+function runs(ops) {
+  const out = [];
+  for (const [op, x] of ops) {
+    const last = out[out.length - 1];
+    if (op === '=') { if (last && last.eq) last.items.push(x); else out.push({ eq: true, items: [x] }); }
+    else { if (!last || last.eq) out.push({ eq: false, del: [], add: [] }); out[out.length - 1][op === '-' ? 'del' : 'add'].push(x); }
+  }
+  return out;
+}
+const wrap = (s, a, z) => (s && s.trim() ? a + s + z : s);
+function words(a, b) {
+  const tok = (x) => x.match(/\s+|[^\s]+/g) || [];
+  const A = tok(a), B = tok(b); const ops = lcs(A, B);
+  const real = (x) => /\S/.test(x);
+  const same = ops.filter(([o, x]) => o === '=' && real(x)).length;
+  const tot = Math.max(A.filter(real).length, B.filter(real).length);
+  if (tot > 4 && same / tot < 0.6) return wrap(a, DEL, DEL_END) + ' ' + wrap(b, INS, INS_END);
+  return runs(ops).map((r) => (r.eq ? r.items.join('') : wrap(r.del.join(''), DEL, DEL_END) + (r.del.length && r.add.length ? ' ' : '') + wrap(r.add.join(''), INS, INS_END))).join('');
+}
+function sentences(a, b) {
+  const cut = (x) => x.split(/(?<=[.;!?])\s+/);
+  const A = cut(a), B = cut(b);
+  if (A.length < 2 && B.length < 2) return words(a, b);
+  return runs(lcs(A, B)).map((r) => {
+    if (r.eq) return r.items.join(' ');
+    const n = Math.min(r.del.length, r.add.length); const parts = [];
+    for (let k = 0; k < n; k++) parts.push(words(r.del[k], r.add[k]));
+    r.del.slice(n).forEach((x) => parts.push(wrap(x, DEL, DEL_END)));
+    r.add.slice(n).forEach((x) => parts.push(wrap(x, INS, INS_END)));
+    return parts.join(' ');
+  }).join(' ');
+}
+const PREFIX = /^(\s*(?:[-*+]|\d+[.)])\s+(?:\[[ xX]\]\s+)?|\s*>\s?|#{1,6}\s+)/;
+function wrapLine(l, a, z) {
+  if (!l.trim() || isRule(l)) return l;
+  if (/^\s*\|/.test(l)) return '| ' + cells(l).map((c) => wrap(c, a, z)).join(' | ') + ' |';
+  if (/^(```|~~~)/.test(l) || /^\s*(-{3,}|\*{3,})\s*$/.test(l)) return l;
+  const p = (PREFIX.exec(l) || [''])[0];
+  return p + wrap(l.slice(p.length), a, z);
+}
+function lineDiff(a, b) {
+  const pa = (PREFIX.exec(a) || [''])[0], pb = (PREFIX.exec(b) || [''])[0];
+  if (/^\s*\|/.test(a) && /^\s*\|/.test(b) && !isRule(a) && !isRule(b)) {
+    const ca = cells(a), cb = cells(b);
+    return '| ' + cb.map((c, k) => (ca[k] === c ? c : sentences(ca[k] || '', c))).join(' | ') + ' |';
+  }
+  if (pa === pb) return pb + sentences(a.slice(pa.length), b.slice(pb.length));
+  return null;
+}
+
+/** `after` with the change since `before` marked. `before` null: the whole of `after` is new. */
+export function diffMd(before, after) {
+  const B = String(after == null ? '' : after).split('\n');
+  if (before == null) return B.map((l) => wrapLine(l, INS, INS_END)).join('\n');
+  const A = String(before).split('\n');
+  const out = [];
+  for (const r of runs(lcs(A, B))) {
+    if (r.eq) { out.push(...r.items); continue; }
+    const n = Math.min(r.del.length, r.add.length);
+    const removed = []; const added = [];
+    for (let k = 0; k < n; k++) {
+      const d = lineDiff(r.del[k], r.add[k]);
+      if (d == null) { removed.push(wrapLine(r.del[k], DEL, DEL_END)); added.push(wrapLine(r.add[k], INS, INS_END)); } else added.push(d);
+    }
+    r.del.slice(n).forEach((l) => removed.push(wrapLine(l, DEL, DEL_END)));
+    r.add.slice(n).forEach((l) => added.push(wrapLine(l, INS, INS_END)));
+    // a removed table row or list item stays in its table or list: put it with the rows after it
+    out.push(...removed.filter((l) => l.trim()), ...added);
+  }
+  return out.join('\n');
+}
+
+/** Words added and removed between two texts: [added, removed]. */
+export function wordCounts(before, after) {
+  const A = String(before || '').match(/\S+/g) || [], B = String(after || '').match(/\S+/g) || [];
+  let add = 0, del = 0;
+  for (const [o] of lcs(A, B)) { if (o === '+') add++; else if (o === '-') del++; }
+  return [add, del];
+}
+
+/* ── DOM ── */
+
+/** A safe href: http(s), mailto, a fragment or a relative path; anything else (javascript:, data:) is dropped. */
+export function safeHref(h) {
+  const s = String(h || '').trim();
+  if (/^(https?:|mailto:)/i.test(s)) return s;
+  if (/^[a-z][\w+.-]*:/i.test(s)) return null;
+  return s;
+}
+
+/** Text with diff markers → nodes: the marked runs inside <ins> and <del>. `st` carries an open marker across inline nodes. */
+function textNodes(doc, s, st) {
+  const out = []; let buf = '';
+  const push = () => {
+    if (!buf) return;
+    const t = doc.createTextNode(buf); buf = '';
+    if (st.mode) { const w = doc.createElement(st.mode); w.appendChild(t); out.push(w); } else out.push(t);
+  };
+  for (const ch of String(s)) {
+    if (ch === INS || ch === DEL) { push(); st.mode = ch === INS ? 'ins' : 'del'; }
+    else if (ch === INS_END || ch === DEL_END) { push(); st.mode = null; }
+    else buf += ch;
+  }
+  push();
+  return out;
+}
+function inlineDom(doc, nodes, st) {
+  const out = [];
+  for (const n of nodes || []) {
+    if (n.t === 'text') { out.push(...textNodes(doc, n.s, st)); continue; }
+    if (n.t === 'code') { const c = doc.createElement('code'); c.append(...textNodes(doc, n.s, st)); out.push(c); continue; }
+    const tag = n.t === 'b' ? 'strong' : n.t === 'i' ? 'em' : 'a';
+    const e = doc.createElement(tag);
+    if (n.t === 'a') {
+      const h = safeHref(n.href);
+      if (h != null) { e.setAttribute('href', h); if (/^https?:/i.test(h)) { e.setAttribute('target', '_blank'); e.setAttribute('rel', 'noopener'); } }
+    }
+    e.append(...inlineDom(doc, n.c, st));
+    out.push(e);
+  }
+  return out;
+}
+
+/** Blocks → elements. `opts.editable` draws checklist boxes that can be ticked (the editor). */
+export function toDom(blocks, doc, opts = {}) {
+  const d = doc || document;
+  const mk = (tag, cls) => { const e = d.createElement(tag); if (cls) e.className = cls; return e; };
+  return (blocks || []).map((b) => {
+    const st = { mode: null };
+    if (b.t === 'h') { const e = mk('h' + Math.min(6, Math.max(1, b.level || 2))); e.append(...inlineDom(d, b.c, st)); return e; }
+    if (b.t === 'p') { const e = mk('p'); e.append(...inlineDom(d, b.c, st)); return e; }
+    if (b.t === 'hr') return mk('hr');
+    if (b.t === 'code') { const p = mk('pre'); if (b.lang) p.setAttribute('data-lang', b.lang); const c = mk('code'); c.append(...textNodes(d, b.s, st)); p.appendChild(c); return p; }
+    if (b.t === 'quote') { const q = mk('blockquote'); q.append(...toDom(b.blocks, d, opts)); return q; }
+    if (b.t === 'list') {
+      const l = mk(b.ordered ? 'ol' : 'ul', b.items.some((it) => it.task != null) ? 'tasks' : '');
+      for (const it of b.items) {
+        const li = mk('li');
+        if (it.task != null) {
+          li.className = 'task' + (it.task ? ' done' : '');
+          const box = mk('input'); box.type = 'checkbox'; box.checked = !!it.task; box.setAttribute('aria-label', 'Done');
+          if (opts.editable) box.setAttribute('contenteditable', 'false'); else box.disabled = true;
+          const sp = mk('span'); sp.append(...inlineDom(d, it.c, st));
+          li.append(box, sp);
+        } else li.append(...inlineDom(d, it.c, st));
+        l.appendChild(li);
+      }
+      return l;
+    }
+    if (b.t === 'table') {
+      const w = mk('div', 'tw'); const t = mk('table'); const th = mk('thead'); const tr = mk('tr');
+      for (const c of b.head) { const x = mk('th'); x.append(...inlineDom(d, c, st)); tr.appendChild(x); }
+      th.appendChild(tr); const tb = mk('tbody');
+      for (const r of b.rows) { const row = mk('tr'); for (const c of r) { const x = mk('td'); x.append(...inlineDom(d, c, st)); row.appendChild(x); } tb.appendChild(row); }
+      t.append(th, tb); w.appendChild(t); return w;
+    }
+    return d.createTextNode('');
+  });
+}
+
+/* reading the editor back */
+function inlineOf(n) {
+  const out = [];
+  const text = (s) => { if (!s) return; const last = out[out.length - 1]; if (last && last.t === 'text') last.s += s; else out.push({ t: 'text', s }); };
+  for (const c of Array.from(n.childNodes || [])) {
+    if (c.nodeType === 3) { text(c.textContent.replace(/\u00a0/g, ' ').replace(/\u200b/g, '').replace(/\s+/g, ' ')); continue; }
+    if (c.nodeType !== 1) continue;
+    const t = c.tagName;
+    if (t === 'BR') { text(' '); continue; }
+    if (t === 'INPUT' || t === 'UL' || t === 'OL') continue;
+    if (t === 'CODE') { out.push({ t: 'code', s: c.textContent.replace(/\u200b/g, '') }); continue; }
+    if (t === 'STRONG' || t === 'B') { out.push({ t: 'b', c: inlineOf(c) }); continue; }
+    if (t === 'EM' || t === 'I') { out.push({ t: 'i', c: inlineOf(c) }); continue; }
+    if (t === 'A') { out.push({ t: 'a', href: c.getAttribute('href') || '', c: inlineOf(c) }); continue; }
+    if (t === 'SPAN' && /font-weight:\s*(bold|[6-9]00)/.test(c.getAttribute('style') || '')) { out.push({ t: 'b', c: inlineOf(c) }); continue; }
+    if (t === 'SPAN' && /font-style:\s*italic/.test(c.getAttribute('style') || '')) { out.push({ t: 'i', c: inlineOf(c) }); continue; }
+    for (const x of inlineOf(c)) { if (x.t === 'text') text(x.s); else out.push(x); }
+  }
+  return out;
+}
+const trimInline = (c) => {
+  const a = c.slice();
+  while (a.length && a[0].t === 'text' && !a[0].s.trim()) a.shift();
+  while (a.length && a[a.length - 1].t === 'text' && !a[a.length - 1].s.trim()) a.pop();
+  if (a.length && a[0].t === 'text') a[0] = { ...a[0], s: a[0].s.replace(/^\s+/, '') };
+  if (a.length && a[a.length - 1].t === 'text') a[a.length - 1] = { ...a[a.length - 1], s: a[a.length - 1].s.replace(/\s+$/, '') };
+  return a;
+};
+const BLOCK = /^(P|DIV|H[1-6]|BLOCKQUOTE|UL|OL|TABLE|PRE|HR|SECTION)$/;
+/** The editor's children → blocks. Loose text and inline nodes between blocks become a paragraph. */
+export function fromDom(root) {
+  const out = []; let loose = null;
+  const endLoose = () => { if (loose) { const c = trimInline(inlineOf(loose)); if (c.length) out.push({ t: 'p', c }); loose = null; } };
+  for (const n of Array.from(root.childNodes || [])) {
+    if (n.nodeType === 1 && BLOCK.test(n.tagName)) { endLoose(); out.push(...blockOf(n)); continue; }
+    if (n.nodeType === 3 && !n.textContent.trim() && !loose) continue;
+    if (!loose) loose = (root.ownerDocument || document).createElement('p');
+    loose.appendChild(n.cloneNode(true));
+  }
+  endLoose();
+  return out;
+}
+function blockOf(n) {
+  const t = n.tagName;
+  if (/^H[1-6]$/.test(t)) return [{ t: 'h', level: +t[1], c: trimInline(inlineOf(n)) }];
+  if (t === 'HR') return [{ t: 'hr' }];
+  if (t === 'PRE') return [{ t: 'code', lang: n.getAttribute('data-lang') || '', s: n.textContent.replace(/\n$/, '') }];
+  if (t === 'BLOCKQUOTE') { const b = fromDom(n); return b.length ? [{ t: 'quote', blocks: b }] : []; }
+  if (t === 'UL' || t === 'OL') {
+    const items = Array.from(n.children).filter((li) => li.tagName === 'LI').map((li) => {
+      const box = li.querySelector(':scope > input[type=checkbox]');
+      return { task: box ? !!box.checked : null, c: trimInline(inlineOf(li)) };
+    });
+    const nested = Array.from(n.querySelectorAll(':scope > li > ul, :scope > li > ol')).flatMap(blockOf);
+    return [{ t: 'list', ordered: t === 'OL', items }, ...nested];
+  }
+  if (t === 'TABLE' || (t === 'DIV' && n.querySelector(':scope > table'))) {
+    const tb = t === 'TABLE' ? n : n.querySelector(':scope > table');
+    const rows = Array.from(tb.querySelectorAll('tr')).map((r) => Array.from(r.children).map((c) => trimInline(inlineOf(c))));
+    if (!rows.length) return [];
+    return [{ t: 'table', head: rows[0], rows: rows.slice(1) }];
+  }
+  if ((t === 'DIV' || t === 'SECTION') && Array.from(n.children).some((c) => BLOCK.test(c.tagName))) return fromDom(n);
+  const c = trimInline(inlineOf(n));
+  return c.length ? [{ t: 'p', c }] : [];
+}

package/workspace/public/pm/c3-notes.js

@@ -3,8 +3,11 @@
  * c3-calendar.js draws it when the Calendar | Notes switch is on Notes: notesView(ui) returns one persistent box, which this
  * file redraws on its own (a read, a choice, a stage, a search), so the grid's data call is not repeated.
  *
- *   the list   "By initiative" with a count and a search field, one group per initiative and "No initiative" last (dest-notes.js
- *              groupNotes). A row: the time or day, the length, recording or paused, "no meeting", and a dot for a conflict.
+ *   the list   "Notes" with a count and a search field, grouped by what a note is about: Portfolio first, then each board in the
+ *              portfolio's order, then "Not linked" (scopeGroups). A row: the time or day, the length, its initiative or a "board"
+ *              tag, recording or paused, "no meeting", and a dot for a conflict.
+ *   the head   the note's meeting, then what it is about (the Portfolio, a board, or an initiative on its board) with one picker
+ *              (aboutMenu: /api/boards and each board's Now and next initiatives), the mockup the PM approved on 2026-10-12.
  *   the note   the Calendar stage's layout (calendar-views.js stageNode, the mockup the PM approved on 2026-10-12): a head with
  *              Before, During and After, then the stage's cards.
  *     Before   the meeting context the note kept (meeting.context): agenda (an item heard is ticked), what it is for, to be ready,
@@ -20,13 +23,14 @@
  *   noteOfEvent(e)          the note linked to a calendar event, from the shared notes read (notes-links.js), or null
  */
 import { el } from './dom.js';
-import { button } from './primitives.js';
+import { button, menu } from './primitives.js';
+import { icon } from './icons.js';
 import { c3ic } from './pm-work-view.js';
 import { pmGet, pmPost } from './http.js';
 import { toast } from './c3-toast.js';
 import { onNotes, notesFor, refreshNotes } from './notes-links.js';
 import { agendaHeard, peopleOf } from './notes-context.js';
-import { groupNotes, partsOf, conflictsOf, whenShort } from './dest-notes.js';
+import { partsOf, conflictsOf, whenShort } from './dest-notes.js';
 import * as dock from './note-dock.js';
 import * as V from './view-notes.js';
 import { makeTask } from './notes-task.js';
@@ -35,6 +39,10 @@ import { screenStrip } from './notes-screen-view.js';
 const PHASES = [['before', 'clip', 'Before'], ['during', 'mic', 'During'], ['after', 'notes', 'After']];
 const startOf = (n) => (n.meeting && n.meeting.start) || n.recorded_from || n.created_at || n.updated_at;
 const iniName = (i) => (i ? i.title || i.id : null);
+const boardName = (b) => (b ? b.title || b.id : null);
+/* what a note is about, as the head's path: "Portfolio", "IDPF", or "IDPF › Partner API rate limits" */
+const pathOf = (n) => (n.initiative ? [boardName(n.board), iniName(n.initiative)].filter(Boolean) : n.board ? [boardName(n.board)] : n.portfolio ? ['Portfolio'] : []);
+const boardKey = (b) => (b.ws || '') + '/' + b.id;
 const mins = (ms) => (ms >= 60000 ? Math.round(ms / 60000) + ' min' : '');
 const lenOf = (n) => n.meeting_ms || Math.max(0, ...(n.transcript || []).map((x) => x.t || 0));
 const dayOf = (iso) => { const t = new Date(iso); return Number.isFinite(t.getTime()) ? t.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' }) : ''; };
@@ -81,6 +89,7 @@ export function notesView(ui) {
   const s = stateOf(ui.r);
   s.ui = ui;
   if (!s.unsub) s.unsub = onNotes(() => { if (s.box.isConnected) read(s); });
+  if (!s.boards) loadBoards(s);
   if (!s.rows || (s.open && (!s.note || s.note.id !== s.open))) read(s);
   draw(s);
   return s.box;
@@ -96,6 +105,13 @@ async function read(s) {
   draw(s);
 }
 
+/* the portfolio's boards, for the list's group order and the board names; a board the read misses keeps the note's own title */
+async function loadBoards(s) {
+  s.boards = [];
+  const r = await pmGet('/api/boards');
+  if (r && r.ok && Array.isArray(r.boards)) { s.boards = r.boards.filter((b) => b && b.id && !b.error); if (s.box.isConnected) draw(s); }
+}
+
 function choose(s, id) {
   if (s.open === id) return;
   s.open = id; s.note = null; s.phase = null; s.shots = []; s.rec = null;
@@ -118,7 +134,7 @@ function draw(s) {
 
 function listCard(s) {
   const qtext = s.q.trim().toLowerCase();
-  const shown = (s.rows || []).filter((r) => !qtext || String(r.title || '').toLowerCase().includes(qtext) || String(iniName(r.initiative) || '').toLowerCase().includes(qtext)
+  const shown = (s.rows || []).filter((r) => !qtext || String(r.title || '').toLowerCase().includes(qtext) || pathOf(r).some((x) => String(x).toLowerCase().includes(qtext))
     || (r.summary_lines || []).some((x) => String(x).toLowerCase().includes(qtext)));
   const search = el('input', { type: 'text', class: 'cal3-nsearch', placeholder: 'Search notes', 'aria-label': 'Search notes', value: s.q, 'data-cal3-notes': 'search' });
   search.addEventListener('input', () => { s.q = search.value; draw(s); });
@@ -126,13 +142,28 @@ function listCard(s) {
   if (!s.rows) body = fold('clock', 'Reading the notes', { role: 'status' });
   else if (!s.rows.length) body = fold('mic', s.err || 'No notes yet. Press Record at the top right to start one.', { 'data-cal3-notes': 'none' });
   else if (!shown.length) body = fold('search', 'No note matches “' + s.q.trim() + '”.', { 'data-cal3-notes': 'no-match' });
-  else body = groupNotes(shown).map((g) => el('div', { class: 'cal3-ctx', 'data-cal3-notes-group': g.label }, el('h4', null, g.label),
+  else body = scopeGroups(s, shown).map((g) => el('div', { class: 'cal3-ctx', 'data-cal3-notes-group': g.label }, el('h4', null, g.label),
     el('ul', { class: 'list', role: 'list' }, g.rows.map((r) => noteRow(s, r)))));
   return el('section', { class: 'card sect', 'data-cal3-notes': 'list', 'aria-label': 'Notes' },
-    el('div', { class: 'sh2' }, el('h2', null, c3ic('notes', 'sm'), 'By initiative ', el('span', { class: 'bdg g', 'data-cal3-notes': 'count' }, String(shown.length)))),
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('notes', 'sm'), 'Notes ', el('span', { class: 'bdg g', 'data-cal3-notes': 'count' }, String(shown.length)))),
     el('div', { class: 'cal3-nsearchw' }, search), body);
 }
 
+/* the list's groups: Portfolio, each board in the portfolio's order (a board it does not list goes after them by name), an
+ * initiative linked before boards were (no board on the note) under "Initiatives", then "Not linked" */
+function scopeGroups(s, rows) {
+  const order = new Map((s.boards || []).map((b, i) => [boardKey(b), i]));
+  const known = new Map((s.boards || []).map((b) => [boardKey(b), b.name || b.id]));
+  const g = new Map();
+  for (const r of rows) {
+    const k = r.portfolio ? '@portfolio' : r.board ? boardKey(r.board) : r.initiative ? '@initiative' : '';
+    if (!g.has(k)) g.set(k, { key: k, label: k === '@portfolio' ? 'Portfolio' : k === '@initiative' ? 'Initiatives' : !k ? 'Not linked' : known.get(k) || boardName(r.board), rows: [] });
+    g.get(k).rows.push(r);
+  }
+  const rank = (x) => (x.key === '@portfolio' ? [0, 0] : x.key === '@initiative' ? [3, 0] : !x.key ? [4, 0] : order.has(x.key) ? [1, order.get(x.key)] : [2, 0]);
+  return [...g.values()].sort((a, b) => { const p = rank(a); const q = rank(b); return p[0] - q[0] || p[1] - q[1] || a.label.localeCompare(b.label); });
+}
+
 function noteRow(s, r) {
   const mode = held(r.id) || (r.state === 'recording' || r.state === 'paused' ? r.state : null);
   const on = s.open === r.id;
@@ -142,7 +173,9 @@ function noteRow(s, r) {
     btn('cal3-nopen', { title: 'Open ' + (r.title || 'Untitled note'), 'aria-current': on ? 'true' : 'false' }, [
       el('span', { class: 'tt' }, r.title || 'Untitled note'),
       el('span', { class: 'chips' }, el('span', { class: 'dim mono cal3-xs' }, [mode ? 'now' : whenShort(startOf(r)), len].filter(Boolean).join(' · ')),
-        mode ? el('span', { class: 'tag', 'data-cal3-notes': 'live' }, mode === 'paused' ? 'paused' : 'recording') : null,
+        mode ? el('span', { class: 'tag', 'data-cal3-notes': 'live' }, mode === 'paused' ? 'paused' : 'recording')
+          : r.initiative ? el('span', { class: 'chip2', title: 'Initiative', 'data-cal3-notes': 'row-initiative' }, c3ic('init', 'sm'), iniName(r.initiative))
+            : r.board ? el('span', { class: 'tag', title: 'Linked to the board, not to one initiative', 'data-cal3-notes': 'row-board' }, 'board') : null,
         !linked(r) && !mode ? el('span', { class: 'tag', title: 'Not linked to a meeting', 'data-cal3-notes': 'no-meeting' }, 'no meeting') : null,
         r.conflicts ? el('span', { class: 'st warn', title: r.conflicts + (r.conflicts === 1 ? ' statement differs' : ' statements differ') + ' from a file' }, c3ic('alert', 'sm'), String(r.conflicts)) : null)],
     () => choose(s, r.id)),
@@ -172,7 +205,7 @@ function noteCol(s) {
   return el('div', { class: 'cal3-ncol', 'data-cal3-notes': 'note', 'data-cal3-note': n.id, 'data-cal3-stage': ph }, head, ...[].concat(body));
 }
 
-/* the note's meeting and initiative, each with its link: what it is linked to, then Link or Change (view-notes.js pickers) */
+/* the note's meeting (view-notes.js picker) and what it is about (aboutMenu), each with what it is linked to, then Link or Change */
 function links(s, n, ev) {
   const adhoc = n.meeting && n.meeting.kind === 'adhoc';
   const when = ev ? [dayOf(ev.start), hm(ev.start) + (ev.end ? ' to ' + hm(ev.end) : '')].filter(Boolean).join(' ') : '';
@@ -183,9 +216,60 @@ function links(s, n, ev) {
       !ev && !adhoc ? el('span', { class: 'tag' }, 'no meeting') : null,
       btn('chip2 lk', { 'data-cal3-notes': 'meeting-link', title: ev || adhoc ? 'Link the note to another meeting' : 'Link the note to a meeting on the calendar' }, ev || adhoc ? 'Change' : 'Link to a meeting', () => V.linkMeeting(vctx(s), n.id)),
       ev ? btn('chip2 lk', { 'data-cal3-notes': 'show-meeting', title: 'Show the meeting in the calendar' }, [c3ic('next', 'sm'), 'Show in the calendar'], () => showMeeting(s, ev)) : null),
-    el('span', { class: 'chips2' }, c3ic('init', 'sm'),
-      n.initiative ? el('span', { 'data-cal3-notes': 'initiative' }, el('b', null, iniName(n.initiative))) : el('span', { class: 'dim', 'data-cal3-notes': 'initiative' }, 'No initiative'),
-      btn('chip2 lk', { 'data-cal3-notes': 'initiative-link', title: n.initiative ? 'Link the note to another initiative' : 'Link the note to an initiative' }, n.initiative ? 'Change' : 'Link to an initiative', () => V.linkInitiative(vctx(s), n.id))));
+    aboutLine(s, n));
+}
+function aboutLine(s, n) {
+  const path = pathOf(n);
+  const b = btn('chip2 lk', { 'data-cal3-notes': 'about-link', title: 'Choose what the note is about: the Portfolio, a board or an initiative' }, path.length ? 'Change' : 'Choose what it is about', () => aboutMenu(s, n, b));
+  return el('span', { class: 'chips2' }, c3ic('init', 'sm'),
+    path.length ? el('span', { 'data-cal3-notes': 'about' }, el('b', null, path.join(' › '))) : el('span', { class: 'dim', 'data-cal3-notes': 'about' }, 'Not linked to the Portfolio, a board or an initiative'),
+    b);
+}
+
+/* each board with its Now and next initiatives (GET /api/boards/backlog), kept for a minute once the repository is read */
+async function boardsWithInitiatives(s) {
+  if (s.about && Date.now() - s.about.at < 60000) return s.about.boards;
+  const r = await pmGet('/api/boards');
+  if (!r || !r.ok || !Array.isArray(r.boards)) throw new Error((r && r.error) || 'the boards could not be read');
+  const boards = r.boards.filter((b) => b && b.id && !b.error);
+  let pending = !!r.pending;
+  await Promise.all(boards.map(async (b) => {
+    const x = await pmGet('/api/boards/backlog?ws=' + encodeURIComponent(b.ws || '') + '&board=' + encodeURIComponent(b.id) + '&limit=100');
+    if (!x || !x.ok || x.pending || b.pending) pending = true;
+    b.inis = x && x.ok && Array.isArray(x.rows) ? x.rows : [];
+  }));
+  // while the repository is still being read, the initiatives are not all known: the next open reads them again
+  s.about = pending ? null : { at: Date.now(), boards };
+  return boards;
+}
+
+/* What is this note about? One menu: Portfolio (every board), each board (the whole board) with its initiatives under it, and
+ * Not linked when the note has a link. Choosing one saves it (POST /api/notes/link) and the note moves into its group. */
+async function aboutMenu(s, n, anchor) {
+  let boards;
+  try { boards = await boardsWithInitiatives(s); } catch (e) { toast('The boards could not be read: ' + e.message); return; }
+  if (!anchor.isConnected) return;
+  const cur = n.initiative ? 'i:' + (n.initiative.ws || '') + '/' + n.initiative.id : n.board ? 'b:' + boardKey(n.board) : n.portfolio ? 'p' : '';
+  const save = async (body, said) => {
+    const r = await pmPost('/api/notes/link', { id: n.id, ...body });
+    if (!r || !r.ok) { toast('Not saved' + ((r && r.error) ? ': ' + r.error : '')); return; }
+    toast(said);
+    refreshNotes();
+    read(s);
+  };
+  const item = (k, label, detail, ic, on, sub) => ({ label, detail, role: 'menuitemradio', iconNode: sub ? el('span', { class: 'cal3-mind' }, icon(ic)) : icon(ic),
+    attrs: { 'data-cal3-about': k, 'aria-checked': String(cur === k) }, onSelect: on });
+  const items = [item('p', 'Portfolio', 'every board', 'chart-column', () => save({ portfolio: true }, 'About the Portfolio. The note moved into its group.'))];
+  for (const b of boards) {
+    const board = { id: b.id, ws: b.ws || null, title: b.name || b.id };
+    items.push(item('b:' + boardKey(b), board.title, 'the whole board', 'square-kanban', () => save({ board, initiative: null }, 'About ' + board.title + '. The note moved into its group.')));
+    for (const i of b.inis || []) {
+      items.push(item('i:' + (b.ws || '') + '/' + i.id, i.title || i.id, null, 'target',
+        () => save({ board, initiative: { id: i.id, ws: b.ws || null, title: i.title || i.id } }, 'About ' + (i.title || i.id) + ' on ' + board.title + '. The note moved into its group.'), true));
+    }
+  }
+  if (cur) items.push({ sep: true }, item('none', 'Not linked', 'remove the link', 'x', () => save({ portfolio: false, board: null, initiative: null }, 'Not linked to the Portfolio, a board or an initiative.')));
+  menu({ anchor, items, ariaLabel: 'What is this note about?' });
 }
 
 /* the replay of the note's kept audio: one <audio> per note, kept across redraws so playback goes on (as dest-notes.js does) */
@@ -207,7 +291,7 @@ function seek(s, ms) {
 const vctx = (s) => ({ state: {}, setState: () => { if (s.box.isConnected) { read(s); } } });
 const linkButtons = (s, n) => el('div', { class: 'chips2' },
   btn('chip2 lk', { 'data-cal3-notes': 'link-meeting' }, [c3ic('cal', 'sm'), 'Link to a meeting'], () => V.linkMeeting(vctx(s), n.id)),
-  btn('chip2 lk', { 'data-cal3-notes': 'link-initiative' }, [c3ic('init', 'sm'), 'Link to an initiative'], () => V.linkInitiative(vctx(s), n.id)));
+  btn('chip2 lk', { 'data-cal3-notes': 'link-about' }, [c3ic('init', 'sm'), 'Choose what it is about'], (e) => aboutMenu(s, n, e.currentTarget)));
 
 /* a row of the stage's prepared list: the icon, the label, what it holds */
 const prepRow = (icon, label, detail, done) => el('div', { class: 'chips2 cal3-prep', 'data-cal3-prep': label },