create-pmos 0.151.0 → 0.152.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/console3.css

@@ -1907,6 +1907,171 @@
 .c3 .kp.k-foreground{--c:var(--foreground)}
 .c3 .kp.k-muted-foreground{--c:var(--muted-foreground)}
 .c3 .psess{display:inline-flex;gap:6px;align-items:center}
+
+/* ── The document sheet (initiative c3-doc-sheet-rich): rendered markdown, the rich-text editor, proposals, the edit log.
+ * Person = --acc, agent = --agent, current = --good. The layout and the look follow the approved mockup. */
+.c3 .ds{display:grid;gap:var(--sp-3);min-width:0}
+.c3 .ds-top{position:sticky;top:calc(-1 * var(--sp-4));z-index:4;background:var(--card);padding:var(--sp-3) 0 var(--sp-2);margin-top:calc(-1 * var(--sp-3));display:grid;gap:var(--sp-2);border-bottom:1px solid var(--border);min-width:0}
+.c3 .ds-top .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
+.c3 .ds-top .seg button{white-space:nowrap}
+.c3 .ds-top .seg .bdg.w{background:var(--warning);color:var(--background)}
+.c3 .ds-top .seg .bdg.p{background:var(--agent);color:var(--background)}
+.c3 .ds-meta{flex-wrap:wrap;gap:4px 12px}
+.c3 .ds-meta .chip2 b{color:var(--foreground);font-weight:500}
+.c3 .ds-good{color:var(--good)}
+.c3 .ds-warn{color:var(--warning)}
+.c3 .ds-bad{color:var(--destructive)}
+.c3 .ds-ag{color:var(--agent)}
+.c3 .ds-pe{color:var(--acc)}
+.c3 .ds-note{font-size:var(--fs-2);color:var(--muted-foreground);margin:0}
+.c3 .ds-mono{font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
+
+.c3 .ds-stale{border:1px solid color-mix(in oklab,var(--warning) 45%,transparent);background:color-mix(in oklab,var(--warning) 8%,transparent);border-radius:8px;padding:var(--sp-3);display:grid;gap:6px}
+.c3 .ds-stale .t{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--warning)}
+.c3 .ds-stale p{margin:0;font-size:var(--fs-3)}
+.c3 .ds-stale ul{margin:0;padding-left:18px;font:var(--fs-2) var(--mono);color:var(--muted-foreground);overflow-wrap:anywhere}
+.c3 .ds-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+.c3 .ds-btn{border:1px solid var(--border);background:var(--background);color:var(--foreground);border-radius:6px;padding:5px 12px;font:500 var(--fs-2) var(--mono);display:inline-flex;gap:6px;align-items:center;min-height:30px}
+.c3 .ds-btn.pri{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
+.c3 .ds-btn.ag{color:var(--agent);border-color:color-mix(in oklab,var(--agent) 45%,transparent)}
+.c3 .ds-btn:disabled{opacity:.45;cursor:not-allowed}
+@media (hover:hover){.c3 .ds-btn:hover{border-color:var(--ring)}.c3 .ds-by:hover{color:var(--foreground)}.c3 .ds-tb button:hover{background:var(--background);color:var(--foreground)}}
+@media (pointer:coarse){.c3 .ds-btn{min-height:44px}.c3 .ds-tb button{width:44px;height:44px}}
+
+.c3 .ds-rbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
+.c3 .ds-sel{font:var(--fs-2) var(--mono);color:var(--foreground);background:var(--background);border:1px solid var(--border);border-radius:6px;padding:4px 8px;max-width:100%}
+.c3 .ds-tg{display:inline-flex;gap:6px;align-items:center;font:var(--fs-2) var(--mono);color:var(--muted-foreground);cursor:pointer}
+.c3 .ds-tg input{accent-color:var(--acc)}
+.c3 .ds-legend{display:flex;gap:12px;flex-wrap:wrap;font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .ds-legend i{display:inline-block;width:10px;height:10px;border-radius:6px;vertical-align:-1px;margin-right:4px}
+.c3 .ds-legend i.h{background:var(--acc)}
+.c3 .ds-legend i.a{background:var(--agent)}
+
+.c3 .ds-props{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;font-size:var(--fs-2);padding:var(--sp-3);border:1px solid var(--border);border-radius:8px;background:color-mix(in oklab,var(--muted) 50%,transparent);margin:0}
+.c3 .ds-props dt{font-family:var(--mono);color:var(--muted-foreground)}
+.c3 .ds-props dd{margin:0;min-width:0;overflow-wrap:anywhere}
+.c3 .ds-props input{font:inherit;font-size:var(--fs-2);color:var(--foreground);background:var(--background);border:1px solid var(--border);border-radius:6px;padding:3px 6px;width:100%}
+.c3 .ds-props .sub{grid-column:1/-1;flex-wrap:wrap;font:var(--fs-1) var(--mono);color:var(--muted-foreground);display:flex;gap:6px;align-items:center}
+
+.c3 .ds-md{font:var(--fs-4)/1.65 var(--sans);color:var(--foreground);max-width:72ch;min-width:0;overflow-wrap:anywhere}
+.c3 .ds-md>*:first-child{margin-top:0}
+.c3 .ds-md h1{font:600 var(--fs-5)/1.3 var(--sans);margin:4px 0 12px}
+.c3 .ds-md h2{font:600 var(--fs-5)/1.35 var(--sans);margin:0}
+.c3 .ds-md h3,.c3 .ds-md h4,.c3 .ds-md h5,.c3 .ds-md h6{font:600 var(--fs-4)/1.4 var(--sans);margin:16px 0 4px}
+.c3 .ds-md p{margin:8px 0}
+.c3 .ds-md a{color:var(--acc);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--acc) 40%,transparent);text-underline-offset:3px}
+.c3 .ds-md code{font:var(--fs-3) var(--mono);background:var(--muted);padding:1px 5px;border-radius:6px}
+.c3 .ds-md strong{font-weight:600}
+.c3 .ds-md blockquote{margin:10px 0;padding:10px 14px;background:var(--muted);border-radius:8px;font-size:var(--fs-3);line-height:1.6}
+.c3 .ds-md blockquote p{margin:6px 0}
+.c3 .ds-md ul,.c3 .ds-md ol{margin:8px 0;padding-left:22px}
+.c3 .ds-md li{margin:3px 0}
+.c3 .ds-md li.task{list-style:none;margin-left:-20px;display:flex;gap:8px;align-items:baseline}
+.c3 .ds-md li.task input{accent-color:var(--acc);margin:0;transform:translateY(2px)}
+.c3 .ds-md li.task.done>span{color:var(--muted-foreground)}
+.c3 .ds-md hr{border:0;border-top:1px solid var(--border);margin:16px 0}
+.c3 .ds-md .tw{overflow-x:auto;margin:10px 0;border:1px solid var(--border);border-radius:8px}
+.c3 .ds-md table{border-collapse:collapse;width:100%;font-size:var(--fs-3);font-variant-numeric:tabular-nums}
+.c3 .ds-md th{font:500 var(--fs-1) var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground);text-align:left;background:var(--muted)}
+.c3 .ds-md th,.c3 .ds-md td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:top}
+.c3 .ds-md tr:last-child td{border-bottom:0}
+.c3 .ds-md pre{font:var(--fs-3)/1.5 var(--mono);background:var(--muted);padding:10px 12px;border-radius:8px;overflow-x:auto;white-space:pre-wrap}
+.c3 .ds-md ins{background:color-mix(in oklab,var(--good) 20%,transparent);text-decoration:none;border-radius:6px;padding:0 1px}
+.c3 .ds-md del{background:color-mix(in oklab,var(--destructive) 14%,transparent);color:var(--muted-foreground);border-radius:6px;padding:0 1px}
+
+.c3 .ds-sec{position:relative;padding:var(--sp-2) 0 var(--sp-2) 14px;border-left:3px solid transparent;margin-left:-17px;border-radius:0;scroll-margin-top:120px;min-width:0}
+.c3 .ds-sec+.ds-sec{margin-top:var(--sp-1)}
+.c3 .ds-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
+.c3 .ds-sec-h h2,.c3 .ds-sec-h h3{font:600 var(--fs-5)/1.35 var(--sans);margin:0}
+.c3 .ds-sec-h h3{font-size:var(--fs-4)}
+.c3 .ds-by{display:inline-flex;gap:5px;align-items:center;font:var(--fs-1) var(--mono);color:var(--muted-foreground);border:0;background:transparent;padding:2px 0;white-space:nowrap}
+.c3 .ds-by .ds-dot{width:16px;height:16px;border-radius:50%;display:inline-grid;place-items:center;font:600 var(--fs-1) var(--mono);color:var(--background);background:var(--acc)}
+.c3 .ds-by .ds-dot.a{background:var(--agent)}
+.c3 .ds-by .ds-dot .ic{width:10px;height:10px;stroke-width:2.4}
+.c3 .ds.who .ds-sec.h{border-left-color:var(--acc);background:color-mix(in oklab,var(--acc) 5%,transparent)}
+.c3 .ds.who .ds-sec.a{border-left-color:var(--agent);background:color-mix(in oklab,var(--agent) 6%,transparent)}
+.c3 .ds-sec.flash{animation:dsflash 1.6s ease-out}
+@keyframes dsflash{from{background:color-mix(in oklab,var(--acc) 18%,transparent)}to{background:transparent}}
+@media (prefers-reduced-motion:reduce){.c3 .ds-sec.flash{animation:none}}
+.c3 .ds-pin{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;border:1px dashed color-mix(in oklab,var(--agent) 55%,transparent);border-radius:8px;padding:6px 10px;margin:6px 0;font:var(--fs-2) var(--mono);color:var(--agent);background:color-mix(in oklab,var(--agent) 5%,transparent)}
+.c3 .ds-pin>span{display:inline-flex;gap:6px;align-items:center}
+.c3 .ds-sec.prev .ds-body{border:1px solid color-mix(in oklab,var(--agent) 35%,transparent);border-radius:8px;padding:2px 12px}
+
+.c3 .ds-tb{display:flex;gap:2px;align-items:center;flex-wrap:wrap;border:1px solid var(--border);background:var(--muted);border-radius:8px;padding:2px;max-width:100%}
+.c3 .ds-tb button{width:30px;height:30px;border-radius:6px;display:inline-grid;place-items:center;color:var(--muted-foreground);border:0;background:transparent;flex:none;padding:0}
+.c3 .ds-tb button[aria-pressed="true"]{background:var(--background);color:var(--foreground);box-shadow:0 0 0 1px var(--border)}
+.c3 .ds-tb select{font:var(--fs-2) var(--mono);background:var(--background);color:var(--foreground);border:1px solid var(--border);border-radius:6px;height:30px;padding:0 6px;flex:none}
+.c3 .ds-tb .sep{width:1px;height:20px;background:var(--border);margin:0 4px;flex:none}
+.c3 .ds-tb .sp{flex:1 0 8px}
+.c3 .ds-tb .seg{flex:none}
+.c3 .ds-tb .seg button{width:auto;padding:3px 8px;white-space:nowrap;display:flex}
+.c3 .ds-ed{outline:none;border:1px solid var(--border);border-radius:8px;padding:14px 18px 14px 26px;min-height:320px;background:var(--background);max-width:none}
+.c3 .ds-ed:focus{border-color:var(--ring);box-shadow:0 0 0 3px var(--accw)}
+.c3 .ds-ed h2{margin-top:22px;position:relative}
+.c3 .ds-ed h2:first-child{margin-top:4px}
+.c3 .ds-ed h2.chg::before{content:"";position:absolute;left:-17px;top:4px;bottom:4px;width:4px;border-radius:6px;background:var(--acc)}
+.c3 .ds-ed h2.chg::after{content:"Edited";font:500 var(--fs-1) var(--mono);color:var(--acc);margin-left:10px;vertical-align:middle}
+.c3 .ds-ed h2.clash::after{content:"Edited · also in a proposal";color:var(--warning)}
+.c3 .ds-src{width:100%;min-height:420px;font:var(--fs-3)/1.6 var(--mono);border:1px solid var(--border);border-radius:8px;padding:12px 14px;background:var(--background);color:var(--foreground);resize:vertical}
+.c3 .ds-save{position:sticky;bottom:calc(-1 * var(--sp-4));z-index:3;background:var(--card);border-top:1px solid var(--border);padding:var(--sp-3) 0 var(--sp-4);margin-bottom:calc(-1 * var(--sp-4));display:grid;gap:8px}
+.c3 .ds-save input{width:100%;font:inherit;font-size:var(--fs-3);padding:8px 10px;border:1px solid var(--ring);border-radius:6px;background:var(--background);color:var(--foreground)}
+.c3 .ds-save input.bad{border-color:var(--destructive)}
+.c3 .ds-save .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
+.c3 .ds-save .sum{font:var(--fs-2) var(--mono);color:var(--muted-foreground);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
+.c3 .ds-pop{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px;border:1px solid var(--ring);border-radius:8px;background:var(--card)}
+.c3 .ds-pop input{flex:1 1 200px;font:var(--fs-2) var(--mono);padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--background);color:var(--foreground)}
+
+.c3 .ds-ask{display:grid;gap:8px;padding:var(--sp-3);border:1px solid var(--border);border-radius:8px}
+.c3 .ds-ask textarea{width:100%;min-height:64px;font:inherit;font-size:var(--fs-3);padding:8px 10px;border:1px solid var(--ring);border-radius:6px;background:var(--background);color:var(--foreground);resize:vertical}
+.c3 .ds-h{margin:6px 0 0;font:500 var(--fs-2) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;display:flex;gap:8px;align-items:center}
+.c3 .ds-prop{border:1px solid var(--border);border-radius:8px;display:grid;overflow:hidden;min-width:0}
+.c3 .ds-prop>.hd{padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;border-bottom:1px solid var(--border)}
+.c3 .ds-prop .ti{font-weight:600;font-size:var(--fs-3);overflow-wrap:anywhere}
+.c3 .ds-prop .sub{font:var(--fs-1) var(--mono);color:var(--muted-foreground);display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
+.c3 .ds-prop .pb{padding:12px 14px;display:grid;gap:10px;min-width:0}
+.c3 .ds-chg{border:1px solid var(--border);border-radius:8px;overflow:hidden;min-width:0}
+.c3 .ds-chg>header{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:6px 10px;background:var(--muted);font:var(--fs-2) var(--mono)}
+.c3 .ds-chg>header label{display:inline-flex;gap:8px;align-items:center;cursor:pointer;color:var(--foreground)}
+.c3 .ds-chg>header input{accent-color:var(--acc)}
+.c3 .ds-chg .ds-md{padding:4px 12px;font-size:var(--fs-3)}
+.c3 .ds-chg.off .ds-md{opacity:.45}
+.c3 .ds-why{font-size:var(--fs-3);margin:0;display:flex;gap:6px;align-items:baseline}
+.c3 .ds-closed{display:grid;gap:6px}
+
+.c3 .ds-log{list-style:none;margin:0;padding:0;display:grid}
+.c3 .ds-log>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;position:relative;padding-bottom:14px}
+.c3 .ds-log>li::before{content:"";position:absolute;left:13.5px;top:30px;bottom:0;width:1px;background:var(--border)}
+.c3 .ds-log>li:last-child::before{display:none}
+.c3 .ds-log>li.flash{background:color-mix(in oklab,var(--acc) 10%,transparent);border-radius:8px}
+.c3 .ds-av{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;font:600 var(--fs-1) var(--mono);border:1px solid var(--border);background:var(--background);color:var(--muted-foreground)}
+.c3 .ds-av.h{background:var(--acc);border-color:var(--acc);color:var(--background)}
+.c3 .ds-av.a{background:var(--agent);border-color:var(--agent);color:var(--background)}
+.c3 .ds-av.w{color:var(--warning);border-color:color-mix(in oklab,var(--warning) 50%,transparent)}
+.c3 .ds-le{display:grid;gap:4px;min-width:0}
+.c3 .ds-le .l1{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:baseline;justify-content:space-between}
+.c3 .ds-le .l1 b{font-size:var(--fs-3);overflow-wrap:anywhere}
+.c3 .ds-le .when{font:var(--fs-1) var(--mono);color:var(--muted-foreground);white-space:nowrap}
+.c3 .ds-le .who{font:var(--fs-2) var(--mono);color:var(--muted-foreground);display:flex;gap:4px 10px;flex-wrap:wrap;overflow-wrap:anywhere}
+.c3 .ds-le .why{font-size:var(--fs-3);margin:0;overflow-wrap:anywhere}
+.c3 .ds-le .why.none{color:var(--warning);font:var(--fs-2) var(--mono)}
+.c3 .ds-le .tags{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
+.c3 .ds-le .tag.add{color:var(--good)}
+.c3 .ds-le .tag.del{color:var(--destructive)}
+.c3 .ds-cmp{border:1px solid var(--border);border-radius:8px;padding:4px 12px;margin-top:4px;min-width:0}
+.c3 .ds-cmp .ds-md{font-size:var(--fs-3)}
+.c3 .ds-cmp h4{margin:8px 0 0;font:500 var(--fs-1) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em}
+.c3 .ds-whyadd{display:flex;gap:6px;flex-wrap:wrap}
+.c3 .ds-whyadd input{flex:1 1 220px;min-width:0;font:var(--fs-2) var(--mono);padding:5px 8px;border:1px solid var(--warning);border-radius:6px;background:var(--background);color:var(--foreground)}
+
+@media (max-width:640px){
+  .c3 .ds-sec{margin-left:-12px;padding-left:9px}
+  .c3 .ds-ed{padding:12px 12px 12px 18px}
+  .c3 .ds-by{white-space:normal;text-align:left}
+  .c3 .ds-top .seg button:not([aria-pressed="true"]) .lbl{display:none}
+  .c3 .ds-tb{flex-wrap:nowrap;overflow-x:auto}
+}
+.c3 .ds input[type=checkbox]{width:auto;min-height:0;padding:0;margin:0;flex:none;border-radius:0}
+
 /* the card before a meeting (initiative c3-meeting-card) */
 .c3 .cal3-ctx .cal3-p{margin:0;font-size:var(--fs-2);line-height:1.5;color:var(--foreground)}
 .c3 .cal3-ctx.cal3-gist{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--muted)}

package/workspace/public/pm/pm-work-view.js

@@ -42,7 +42,7 @@ import { VIEWS, REVIEW_DAYS, workPlace, arrives, buildWork, addIso, daysBetween,
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 /* The mockup's icon sprite (console3.html lines 970 to 1026, ids renamed c3i-*, plus the c3 layer's edit and trash). */
-const SPRITE = '<symbol id="c3i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></symbol><symbol id="c3i-star" viewBox="0 0 24 24"><path d="M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.5 6.6 19.5l1.2-6L3.3 9.3l6.1-.7z"/></symbol><symbol id="c3i-moon" viewBox="0 0 24 24"><path d="M20 14a8 8 0 11-10-10 6 6 0 0010 10z"/></symbol><symbol id="c3i-cal" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M8 3v4M16 3v4"/></symbol><symbol id="c3i-inbox" viewBox="0 0 24 24"><path d="M4 13l2-8h12l2 8M4 13v6h16v-6M4 13h5l1 2h4l1-2h5"/></symbol><symbol id="c3i-todo" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 12l3 3 5-6"/></symbol><symbol id="c3i-init" viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5"/></symbol><symbol id="c3i-report" viewBox="0 0 24 24"><path d="M5 20V10M12 20V4M19 20v-7"/></symbol><symbol id="c3i-notes" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5"/></symbol><symbol id="c3i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></symbol><symbol id="c3i-doc" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6zM14 3v5h5"/></symbol><symbol id="c3i-sheet" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 10h16M4 15h16M10 4v16"/></symbol><symbol id="c3i-img" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 16l-5-5-9 9"/></symbol><symbol id="c3i-pdf" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6zM14 3v5h5M9 15h6M9 18h4"/></symbol><symbol id="c3i-term" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></symbol><symbol id="c3i-branch" viewBox="0 0 24 24"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="9" r="2"/><path d="M6 7v10M18 11c0 4-6 3-12 6"/></symbol><symbol id="c3i-repo" viewBox="0 0 24 24"><path d="M5 4h11a3 3 0 013 3v13H8a3 3 0 01-3-3zM5 17a3 3 0 013-3h11"/></symbol><symbol id="c3i-flag" viewBox="0 0 24 24"><path d="M6 21V4M6 5h11l-2 4 2 4H6"/></symbol><symbol id="c3i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol><symbol id="c3i-alert" viewBox="0 0 24 24"><path d="M12 3l10 18H2zM12 10v5M12 18v.5"/></symbol><symbol id="c3i-check" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10"/></symbol><symbol id="c3i-x" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol><symbol id="c3i-eye" viewBox="0 0 24 24"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></symbol><symbol id="c3i-undo" viewBox="0 0 24 24"><path d="M4 12a8 8 0 108-8M4 4v6h6"/></symbol><symbol id="c3i-out" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol><symbol id="c3i-shield" viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></symbol><symbol id="c3i-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></symbol><symbol id="c3i-clip" viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="17" rx="2"/><path d="M9 4h6v3H9zM9 12h6M9 16h4"/></symbol><symbol id="c3i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></symbol><symbol id="c3i-phone" viewBox="0 0 24 24"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></symbol><symbol id="c3i-cloud" viewBox="0 0 24 24"><path d="M7 18a4 4 0 010-8 5 5 0 019.6-1A4.5 4.5 0 0117 18z"/></symbol><symbol id="c3i-bolt" viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></symbol><symbol id="c3i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol><symbol id="c3i-scale" viewBox="0 0 24 24"><path d="M12 3v18M5 7h14M5 7l-3 7a3 3 0 006 0zM19 7l-3 7a3 3 0 006 0z"/></symbol><symbol id="c3i-reply" viewBox="0 0 24 24"><path d="M9 7L4 12l5 5M4 12h10a6 6 0 016 6"/></symbol><symbol id="c3i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.5"/></symbol><symbol id="c3i-wait" viewBox="0 0 24 24"><path d="M7 3h10M7 21h10M8 3c0 5 8 5 8 9s-8 4-8 9"/></symbol><symbol id="c3i-up" viewBox="0 0 24 24"><path d="M7 11v9H4v-9zM7 11l4-8c2 0 3 1 3 3v3h5a2 2 0 012 2l-1 6a2 2 0 01-2 2H7"/></symbol><symbol id="c3i-cols" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16M15 4v16"/></symbol><symbol id="c3i-fold" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16"/></symbol><symbol id="c3i-spark" viewBox="0 0 24 24"><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/></symbol><symbol id="c3i-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></symbol><symbol id="c3i-filter" viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4z"/></symbol><symbol id="c3i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></symbol><symbol id="c3i-lock" viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></symbol><symbol id="c3i-play" viewBox="0 0 24 24"><path d="M7 4l13 8-13 8z"/></symbol><symbol id="c3i-stop" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="1"/></symbol><symbol id="i-pause" viewBox="0 0 24 24"><path d="M8 5v14M16 5v14"/></symbol><symbol id="c3i-prev" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></symbol><symbol id="c3i-next" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></symbol><symbol id="c3i-tree" viewBox="0 0 24 24"><path d="M5 4h7v4H5zM13 10h7v4h-7zM13 17h7v4h-7zM8 8v11h5M8 12h5"/></symbol><symbol id="c3i-org" viewBox="0 0 24 24"><path d="M9 3h6v5H9zM3 16h6v5H3zM15 16h6v5h-6zM12 8v4M6 16v-4h12v4"/></symbol><symbol id="c3i-drop" viewBox="0 0 24 24"><path d="M12 3c4 5 6 8 6 11a6 6 0 01-12 0c0-3 2-6 6-11z"/></symbol><symbol id="c3i-more" viewBox="0 0 24 24"><path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="3"/></symbol><symbol id="c3i-zin" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5M8 11h6M11 8v6"/></symbol><symbol id="c3i-zout" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5M8 11h6"/></symbol><symbol id="c3i-bell" viewBox="0 0 24 24"><path d="M6 17v-6a6 6 0 0112 0v6l2 2H4zM10 21h4"/></symbol><symbol id="c3i-vol" viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9zM16.5 8.5a5 5 0 010 7M19 6a8.5 8.5 0 010 12"/></symbol><symbol id="c3i-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol><symbol id="c3i-edit" viewBox="0 0 24 24"><path d="M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4"/></symbol><symbol id="c3i-trash" viewBox="0 0 24 24"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></symbol>';
+const SPRITE = '<symbol id="c3i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></symbol><symbol id="c3i-star" viewBox="0 0 24 24"><path d="M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.5 6.6 19.5l1.2-6L3.3 9.3l6.1-.7z"/></symbol><symbol id="c3i-moon" viewBox="0 0 24 24"><path d="M20 14a8 8 0 11-10-10 6 6 0 0010 10z"/></symbol><symbol id="c3i-cal" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M8 3v4M16 3v4"/></symbol><symbol id="c3i-inbox" viewBox="0 0 24 24"><path d="M4 13l2-8h12l2 8M4 13v6h16v-6M4 13h5l1 2h4l1-2h5"/></symbol><symbol id="c3i-todo" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 12l3 3 5-6"/></symbol><symbol id="c3i-init" viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5"/></symbol><symbol id="c3i-report" viewBox="0 0 24 24"><path d="M5 20V10M12 20V4M19 20v-7"/></symbol><symbol id="c3i-notes" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6zM14 3v5h5M9 13h7M9 17h5"/></symbol><symbol id="c3i-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></symbol><symbol id="c3i-doc" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6zM14 3v5h5"/></symbol><symbol id="c3i-sheet" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 10h16M4 15h16M10 4v16"/></symbol><symbol id="c3i-img" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 16l-5-5-9 9"/></symbol><symbol id="c3i-pdf" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6zM14 3v5h5M9 15h6M9 18h4"/></symbol><symbol id="c3i-term" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></symbol><symbol id="c3i-branch" viewBox="0 0 24 24"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="9" r="2"/><path d="M6 7v10M18 11c0 4-6 3-12 6"/></symbol><symbol id="c3i-repo" viewBox="0 0 24 24"><path d="M5 4h11a3 3 0 013 3v13H8a3 3 0 01-3-3zM5 17a3 3 0 013-3h11"/></symbol><symbol id="c3i-flag" viewBox="0 0 24 24"><path d="M6 21V4M6 5h11l-2 4 2 4H6"/></symbol><symbol id="c3i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol><symbol id="c3i-alert" viewBox="0 0 24 24"><path d="M12 3l10 18H2zM12 10v5M12 18v.5"/></symbol><symbol id="c3i-check" viewBox="0 0 24 24"><path d="M5 12l5 5 9-10"/></symbol><symbol id="c3i-x" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol><symbol id="c3i-eye" viewBox="0 0 24 24"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></symbol><symbol id="c3i-undo" viewBox="0 0 24 24"><path d="M4 12a8 8 0 108-8M4 4v6h6"/></symbol><symbol id="c3i-out" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol><symbol id="c3i-shield" viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></symbol><symbol id="c3i-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></symbol><symbol id="c3i-clip" viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="17" rx="2"/><path d="M9 4h6v3H9zM9 12h6M9 16h4"/></symbol><symbol id="c3i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></symbol><symbol id="c3i-phone" viewBox="0 0 24 24"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></symbol><symbol id="c3i-cloud" viewBox="0 0 24 24"><path d="M7 18a4 4 0 010-8 5 5 0 019.6-1A4.5 4.5 0 0117 18z"/></symbol><symbol id="c3i-bolt" viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></symbol><symbol id="c3i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol><symbol id="c3i-scale" viewBox="0 0 24 24"><path d="M12 3v18M5 7h14M5 7l-3 7a3 3 0 006 0zM19 7l-3 7a3 3 0 006 0z"/></symbol><symbol id="c3i-reply" viewBox="0 0 24 24"><path d="M9 7L4 12l5 5M4 12h10a6 6 0 016 6"/></symbol><symbol id="c3i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.5"/></symbol><symbol id="c3i-wait" viewBox="0 0 24 24"><path d="M7 3h10M7 21h10M8 3c0 5 8 5 8 9s-8 4-8 9"/></symbol><symbol id="c3i-up" viewBox="0 0 24 24"><path d="M7 11v9H4v-9zM7 11l4-8c2 0 3 1 3 3v3h5a2 2 0 012 2l-1 6a2 2 0 01-2 2H7"/></symbol><symbol id="c3i-cols" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16M15 4v16"/></symbol><symbol id="c3i-fold" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16"/></symbol><symbol id="c3i-spark" viewBox="0 0 24 24"><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/></symbol><symbol id="c3i-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></symbol><symbol id="c3i-filter" viewBox="0 0 24 24"><path d="M3 5h18l-7 8v6l-4-2v-4z"/></symbol><symbol id="c3i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></symbol><symbol id="c3i-lock" viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></symbol><symbol id="c3i-play" viewBox="0 0 24 24"><path d="M7 4l13 8-13 8z"/></symbol><symbol id="c3i-stop" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="1"/></symbol><symbol id="i-pause" viewBox="0 0 24 24"><path d="M8 5v14M16 5v14"/></symbol><symbol id="c3i-prev" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></symbol><symbol id="c3i-next" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></symbol><symbol id="c3i-tree" viewBox="0 0 24 24"><path d="M5 4h7v4H5zM13 10h7v4h-7zM13 17h7v4h-7zM8 8v11h5M8 12h5"/></symbol><symbol id="c3i-org" viewBox="0 0 24 24"><path d="M9 3h6v5H9zM3 16h6v5H3zM15 16h6v5h-6zM12 8v4M6 16v-4h12v4"/></symbol><symbol id="c3i-drop" viewBox="0 0 24 24"><path d="M12 3c4 5 6 8 6 11a6 6 0 01-12 0c0-3 2-6 6-11z"/></symbol><symbol id="c3i-more" viewBox="0 0 24 24"><path d="M5 12h.01M12 12h.01M19 12h.01" stroke-width="3"/></symbol><symbol id="c3i-zin" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5M8 11h6M11 8v6"/></symbol><symbol id="c3i-zout" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5M8 11h6"/></symbol><symbol id="c3i-bell" viewBox="0 0 24 24"><path d="M6 17v-6a6 6 0 0112 0v6l2 2H4zM10 21h4"/></symbol><symbol id="c3i-vol" viewBox="0 0 24 24"><path d="M4 9v6h4l5 4V5L8 9zM16.5 8.5a5 5 0 010 7M19 6a8.5 8.5 0 010 12"/></symbol><symbol id="c3i-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol><symbol id="c3i-edit" viewBox="0 0 24 24"><path d="M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4"/></symbol><symbol id="c3i-trash" viewBox="0 0 24 24"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></symbol><symbol id="c3i-bold" viewBox="0 0 24 24"><path d="M7 4h6a4 4 0 010 8H7zM7 12h7a4 4 0 010 8H7z"/></symbol><symbol id="c3i-italic" viewBox="0 0 24 24"><path d="M10 4h8M6 20h8M14 4l-4 16"/></symbol><symbol id="c3i-code" viewBox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></symbol><symbol id="c3i-link" viewBox="0 0 24 24"><path d="M10 14a4 4 0 006 0l3-3a4 4 0 00-6-6l-1 1M14 10a4 4 0 00-6 0l-3 3a4 4 0 006 6l1-1"/></symbol><symbol id="c3i-ul" viewBox="0 0 24 24"><path d="M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01" /></symbol><symbol id="c3i-ol" viewBox="0 0 24 24"><path d="M10 6h10M10 12h10M10 18h10M4 4h1v4M4 8h2M4 14.5c0-1 2-1 2 0s-2 2-2 3.5h2"/></symbol><symbol id="c3i-task" viewBox="0 0 24 24"><rect x="3" y="4" width="6" height="6" rx="1"/><path d="M4.5 7l1 1 2-2M12 7h9M3 14h6v6H3zM12 17h9"/></symbol><symbol id="c3i-quote" viewBox="0 0 24 24"><path d="M4 6h16M8 12h12M8 18h12M4 11v8"/></symbol><symbol id="c3i-table" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M3 15h18M10 4v16"/></symbol><symbol id="c3i-hr" viewBox="0 0 24 24"><path d="M3 12h18M7 6h10M7 18h10"/></symbol><symbol id="c3i-redo" viewBox="0 0 24 24"><path d="M20 12a8 8 0 11-8-8M20 4v6h-6"/></symbol><symbol id="c3i-git" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M3 12h6M15 12h6"/></symbol><symbol id="c3i-md" viewBox="0 0 24 24"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M6 15V9l3 3 3-3v6M16 9v6M14 13l2 2 2-2"/></symbol><symbol id="c3i-copy" viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 00-1-1H5a1 1 0 00-1 1v10a1 1 0 001 1h3"/></symbol>';
 
 /** Link console3.css once, from this module's own folder (the same way primitives.js links components.css). */
 export function ensureC3Css() {