create-pmos 0.67.0 → 0.68.0

package/workspace/public/pm/doc-editor.js

@@ -0,0 +1,473 @@
+/* pm/doc-editor.js — a markdown document, read and edited in the same place (workspace-tabs-declutter).
+ *
+ * The PM, 2026-10-06: "the document view is neither interactive nor modern, and editing an MD file is difficult. I
+ * should be able to edit, but the layout still mirrors the view." So a document the PM can edit is not shown in one
+ * mode and edited in another. It is one surface: each block (a heading, a paragraph, a list, a quote, a code fence, a
+ * table) is drawn as it reads, and a click turns THAT block into its own markdown, where it stands, with the caret where
+ * the click landed. Esc, or a click outside, draws it again.
+ *
+ * ── The text is never re-written by the editor ──────────────────────────────────────────────────────────────────────
+ * The file is split into blocks at blank lines (never inside a code fence), and every separator, the frontmatter and
+ * the leading and trailing whitespace are kept as they were. So an untouched file composes back byte for byte, and an
+ * edit to one block changes only that block's lines: the diff the PM reads in Changes is the edit and nothing else.
+ * The buffer is the same `docEdits` buffer the Markdown toggle edits, and save is tab-doc.js's one save path.
+ *
+ * ── Why the node outlives the render ────────────────────────────────────────────────────────────────────────────────
+ * Every keystroke is a state change and a state change repaints the panel. The editor is one node per tab, keyed on
+ * the text it last drew; a repaint whose text is the text this editor itself just wrote hands back the same node, so
+ * the textarea being typed in keeps its caret. A text that changed from outside (revert, a save that stamped the file,
+ * the Markdown toggle) rebuilds it.
+ */
+
+import { el, setChildren } from './dom.js';
+import { mdRender } from './markdown.js';
+import { iconButton, button, menu, SEL } from './primitives.js';
+import { icon } from './icons.js';
+
+/* ── the block model ─────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const FENCE = /^\s{0,3}(```|~~~)/;
+
+/** text → { head, fm, blocks, seps, tail }. compose(parse(t)) === t for every t. */
+export function parse(text) {
+  const src = String(text == null ? '' : text);
+  let head = '';
+  let fm = null;
+  let body = src;
+  const m = /^---\n([\s\S]*?\n)?---(?:\n|$)/.exec(src);
+  if (m) { fm = (m[1] || '').replace(/\n$/, ''); head = m[0]; body = src.slice(m[0].length); }
+  const lines = body.split('\n');
+  const blocks = [];
+  const seps = [];
+  let cur = null;
+  let blank = [];
+  let lead = null;
+  let fence = false;
+  for (const l of lines) {
+    if (!fence && !l.trim()) {
+      if (cur) { blocks.push(cur.join('\n')); cur = null; }
+      blank.push(l);
+      continue;
+    }
+    if (!cur) {
+      if (blocks.length) seps.push('\n' + blank.map((b) => b + '\n').join(''));
+      else { lead = blank.map((b) => b + '\n').join(''); seps.push(''); }
+      blank = [];
+      cur = [];
+    }
+    cur.push(l);
+    if (FENCE.test(l)) fence = !fence;
+  }
+  if (cur) blocks.push(cur.join('\n'));
+  // A body ends in a newline when its last line is empty: the blank lines after the last block are the tail.
+  const tail = blocks.length ? (blank.length ? '\n' + blank.slice(0, -1).map((b) => b + '\n').join('') : '') : '';
+  return { head, fm, lead: lead == null ? (blocks.length ? '' : body) : lead, blocks, seps, tail };
+}
+
+/** The model back to text. An emptied block is left out, and its separator with it. */
+export function compose(d) {
+  let out = d.head + d.lead;
+  let first = true;
+  d.blocks.forEach((b, i) => {
+    if (!b.trim()) return;
+    out += (first ? '' : (d.seps[i] || '\n\n')) + b;
+    first = false;
+  });
+  return out + (d.blocks.some((b) => b.trim()) ? (d.tail || '') : '');
+}
+
+/** What a block is, by its first line: it chooses the font the block is edited in and how it is drawn. */
+export function kindOf(src) {
+  const s = String(src || '');
+  if (FENCE.test(s)) return 'code';
+  const h = /^(#{1,6})\s/.exec(s);
+  if (h) return 'h' + h[1].length;
+  if (/^\s{0,3}>/.test(s)) return 'quote';
+  const lines = s.split('\n');
+  if (s && lines.every((l) => /^\s*[-*+] \[[ xX]\] /.test(l) || (/^\s{2,}\S/.test(l)))) return 'check';
+  if (/^\s*([-*+]|\d+[.)]) /.test(s)) return 'list';
+  if (lines.length > 1 && /^\s*\|?\s*:?-{3,}/.test(lines[1]) && s.includes('|')) return 'table';
+  return 'p';
+}
+
+/* Where a click in the drawn text lands in the markdown: the drawn characters, each mapped to its offset in the source.
+ * Markup the drawing hides (a heading's #, a list's marker, ** and `, a link's address) maps to nothing. */
+export function plainMap(src, k) {
+  const keep = [];
+  if (k === 'code' || k === 'table') return keep;
+  let i = 0;
+  let start = true;
+  while (i < src.length) {
+    if (start) {
+      const m = /^(\s*(#{1,6} |>\s?|[-*+] \[[ xX]\] |[-*+] |\d+[.)] ))/.exec(src.slice(i));
+      start = false;
+      if (m) { i += m[0].length; continue; }
+    }
+    const c = src[i];
+    if (c === '\n') { if (k === 'p' || k === 'quote') keep.push(i); i++; start = true; continue; }
+    if (src.startsWith('**', i) || src.startsWith('__', i)) { i += 2; continue; }
+    if (c === '*' || c === '`' || c === '_') { i++; continue; }
+    if (c === '[') {
+      const m = /^\[([^\]]*)\]\(([^)]*)\)/.exec(src.slice(i));
+      if (m) { for (let j = 1; j <= m[1].length; j++) keep.push(i + j); i += m[0].length; continue; }
+    }
+    keep.push(i);
+    i++;
+  }
+  return keep;
+}
+
+function offsetAt(node, x, y) {
+  const d = node.ownerDocument;
+  let at = null;
+  let off = 0;
+  if (d.caretPositionFromPoint) { const p = d.caretPositionFromPoint(x, y); if (p) { at = p.offsetNode; off = p.offset; } }
+  else if (d.caretRangeFromPoint) { const r = d.caretRangeFromPoint(x, y); if (r) { at = r.startContainer; off = r.startOffset; } }
+  if (!at || !node.contains(at)) return null;
+  const r = d.createRange();
+  r.selectNodeContents(node);
+  r.setEnd(at, off);
+  return r.toString().length;
+}
+
+/* ── one editor per tab ──────────────────────────────────────────────────────────────────────────────────────────── */
+
+const eds = new Map();     // tab id -> editor record
+
+const SLASH = [
+  { id: 'p', label: 'Text', icon: 'type', md: '' },
+  { id: 'h2', label: 'Heading', icon: 'heading', md: '## ' },
+  { id: 'h3', label: 'Subheading', icon: 'heading', md: '### ' },
+  { id: 'list', label: 'Bullet list', icon: 'list', md: '- ' },
+  { id: 'check', label: 'Checklist', icon: 'list-checks', md: '- [ ] ' },
+  { id: 'quote', label: 'Quote', icon: 'text-quote', md: '> ' },
+  { id: 'code', label: 'Code', icon: 'code', md: '```\n\n```' },
+];
+
+/**
+ * The editing surface for one tab. `o` = { text, ctx (links), onChange(text), onSave(), narrow }.
+ * Returns the same node while the text is the text this editor last drew or wrote.
+ */
+export function editorNode(tab, o) {
+  wirePress();
+  let ed = eds.get(tab.id);
+  if (!ed) {
+    ed = { tab, node: el('div', { class: 'fr-ed__main', 'data-ed': 'main' }), key: null, d: null, editing: null, caret: 0, o };
+    eds.set(tab.id, ed);
+  }
+  ed.o = o;
+  if (ed.key === o.text && ed.d) return ed.node;
+  ed.key = o.text;
+  ed.d = parse(o.text);
+  if (ed.editing != null && ed.editing >= ed.d.blocks.length) ed.editing = null;
+  draw(ed);
+  return ed.node;
+}
+
+export function disposeEditor(id) { eds.delete(id); }
+
+/** Whether this tab's editor is mid-edit (the panel then leaves its scroll and focus alone). */
+export const isEditing = (id) => { const ed = eds.get(id); return !!(ed && ed.editing != null); };
+
+function write(ed) {
+  const text = compose(ed.d);
+  ed.key = text;
+  ed.o.onChange(text);
+}
+
+function draw(ed) {
+  const d = ed.d;
+  const kids = [];
+  const fmBox = propsBox(ed);
+  if (fmBox) kids.push(fmBox);
+  d.blocks.forEach((src, i) => { kids.push(i === ed.editing ? editingBlock(ed, i) : shownBlock(ed, i)); });
+  kids.push(el('div', { class: 'fr-ed__end' },
+    button({ label: 'add a block', variant: 'ghost', size: 'sm', icon: 'plus', attrs: { 'data-ed': 'append' },
+      onClick: () => { d.blocks.push(''); d.seps.push('\n\n'); begin(ed, d.blocks.length - 1, 0); } }),
+    el('p', { class: 'fr-ed__hint', 'data-ed': 'hint' },
+      'Click any text to edit it. Type / on an empty line for a heading, a list or a checklist. Ctrl or ⌘ S saves.')));
+  setChildren(ed.node, kids);
+  if (ed.editing != null) {
+    const ta = ed.node.querySelector('[data-ed="src"]');
+    if (ta) { size(ta); ta.focus({ preventScroll: true }); const c = Math.min(ed.caret, ta.value.length); ta.setSelectionRange(c, c); keepInView(ta); }
+  }
+}
+
+function keepInView(ta) {
+  const r = ta.getBoundingClientRect();
+  const sc = ta.closest('[data-ed="scroll"]');
+  if (!sc) return;
+  const s = sc.getBoundingClientRect();
+  if (r.bottom > s.bottom - 24) sc.scrollTop += r.bottom - s.bottom + 48;
+  else if (r.top < s.top + 24) sc.scrollTop -= s.top - r.top + 48;
+}
+
+const size = (ta) => { ta.style.setProperty('--fr-ed-h', '0px'); ta.style.setProperty('--fr-ed-h', ta.scrollHeight + 'px'); };
+
+/* ── the frontmatter: a properties box ───────────────────────────────────────────────────────────────────────────── */
+
+function propsBox(ed) {
+  const d = ed.d;
+  if (d.fm == null) return null;
+  const lines = d.fm.split('\n');
+  const rows = [];
+  lines.forEach((l, n) => {
+    const m = /^([A-Za-z0-9_.-]+):(\s?)(.*)$/.exec(l);
+    if (!m) return;
+    const nested = lines[n + 1] != null && /^\s+\S/.test(lines[n + 1]);
+    const editable = !nested && !/^[|>]/.test(m[3]) && !/^[[{]/.test(m[3]);
+    const quoted = /^"(.*)"$/.exec(m[3]);
+    const shown = quoted ? quoted[1].replace(/\\"/g, '"') : m[3];
+    rows.push(el('label', { class: 'fr-ed__prop-k', for: 'fr-ed-' + ed.tab.id + '-' + m[1] }, m[1]));
+    rows.push(editable
+      ? el('input', {
+        class: 'fr-ed__prop-v', id: 'fr-ed-' + ed.tab.id + '-' + m[1], value: shown, spellcheck: 'false', 'data-ed-prop': m[1],
+        onInput: (e) => {
+          const v = e.target.value;
+          const now = d.fm.split('\n');
+          now[n] = m[1] + ':' + (m[2] || ' ') + (quoted ? JSON.stringify(v) : v);
+          d.fm = now.join('\n');
+          d.head = '---\n' + d.fm + '\n---\n';
+          write(ed);
+        },
+        onKeyDown: (e) => saveKey(ed, e),
+      })
+      : el('span', { class: 'fr-ed__prop-v fr-ed__prop-v--ro', title: 'A value over several lines: edit it in Markdown.' }, m[3] || '…'));
+  });
+  if (!rows.length) return null;
+  return el('details', { class: 'fr-ed__props', open: true, 'data-ed': 'props' },
+    el('summary', { class: 'fr-ed__props-sum' }, icon('chevron-right'), el('span', null, 'Properties'), el('span', { class: 'fr-ed__props-n' }, String(rows.length / 2))),
+    el('div', { class: 'fr-ed__props-grid' }, rows));
+}
+
+/* ── a block, drawn ──────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function shownBlock(ed, i) {
+  const src = ed.d.blocks[i];
+  const k = kindOf(src);
+  let body;
+  if (k === 'check') {
+    body = el('ul', { class: 'fr-ed__checks' }, src.split('\n').map((l, li) => {
+      const c = /^(\s*)[-*+] \[([ xX])\] (.*)$/.exec(l);
+      if (!c) return el('li', { class: 'fr-ed__check fr-ed__check--more' }, l.trim());
+      const done = c[2] !== ' ';
+      const r = mdRender(c[3], ed.o.ctx);
+      return el('li', { class: 'fr-ed__check', 'data-done': done ? 'yes' : 'no' },
+        el('input', { type: 'checkbox', class: 'fr-ed__box', checked: done, 'aria-label': (done ? 'Done: ' : 'To do: ') + c[3], 'data-ed': 'check',
+          onChange: () => {
+            const ls = ed.d.blocks[i].split('\n');
+            ls[li] = ls[li].replace(/\[([ xX])\]/, done ? '[ ]' : '[x]');
+            ed.d.blocks[i] = ls.join('\n');
+            write(ed);
+            draw(ed);
+          } }),
+        el('span', { class: 'fr-ed__check-t' }, r.title ? r.title : r.blocks.map((b) => [...b.childNodes]).flat()));
+    }));
+  } else {
+    const r = mdRender(src, ed.o.ctx);
+    body = el('div', { class: 'fr-ed__md' }, r.title ? el('h1', { class: 'fr-ed__h1' }, r.title) : null, r.blocks);
+  }
+  const preview = src.replace(/^[#>\-*+\s\d.)[\]xX]+/, '').slice(0, 60);
+  return el('div', {
+    class: 'fr-ed__blk', 'data-i': String(i), 'data-k': k, tabindex: '0', 'data-ed': 'blk',
+    'aria-label': 'Edit: ' + (preview || 'empty block'),
+    onKeyDown: (e) => { if (e.target === e.currentTarget && (e.key === 'Enter' || e.key === 'F2')) { e.preventDefault(); begin(ed, i, src.length); } },
+  },
+  iconButton({ icon: 'plus', ariaLabel: 'Add a block below', size: 'sm', attrs: { class: 'fr-ed__add', 'data-ed': 'add' },
+    onClick: () => { ed.d.blocks.splice(i + 1, 0, ''); ed.d.seps.splice(i + 1, 0, '\n\n'); begin(ed, i + 1, 0); } }),
+  body);
+}
+
+/* A press on a drawn block starts editing it. Read on the document, not the block: a block is text, not a button (it
+ * is reached by Tab and opened with Enter), and the press must be taken before it moves the focus, or the block being
+ * edited would close and redraw under the pointer. */
+let pressWired = false;
+function wirePress() {
+  if (pressWired) return;
+  pressWired = true;
+  document.addEventListener('mousedown', (e) => {
+    const t = e.target;
+    if (!(t instanceof Element)) return;
+    // The format buttons and the / menu keep the focus where the text is.
+    if (t.closest('.fr-ed__tools') || (t.closest(SEL.menu) && [...eds.values()].some((x) => x.editing != null))) { e.preventDefault(); return; }
+    const blk = t.closest('.fr-ed__blk');
+    if (!blk || blk.classList.contains('fr-ed__blk--on') || t.closest('a, input, button')) return;
+    const ed = [...eds.values()].find((x) => x.node.contains(blk));
+    if (!ed || e.button !== 0) return;
+    e.preventDefault();
+    const i = Number(blk.getAttribute('data-i'));
+    const src = ed.d.blocks[i] || '';
+    const at = offsetAt(blk.querySelector('.fr-ed__md, .fr-ed__checks') || blk, e.clientX, e.clientY);
+    const map = plainMap(src, kindOf(src));
+    begin(ed, i, at == null || at >= map.length ? src.length : map[at]);
+  });
+}
+
+function begin(ed, i, caret) {
+  const d = ed.d;
+  // Leaving an empty block drops it.
+  if (ed.editing != null && ed.editing !== i && !String(d.blocks[ed.editing] || '').trim() && d.blocks.length > 1) {
+    d.blocks.splice(ed.editing, 1); d.seps.splice(ed.editing, 1);
+    if (ed.editing < i) i--;
+  }
+  ed.editing = i;
+  ed.caret = caret;
+  draw(ed);
+}
+
+function finish(ed, refocus) {
+  const i = ed.editing;
+  if (i == null) return;
+  ed.editing = null;
+  const before = compose(ed.d);
+  if (!String(ed.d.blocks[i] || '').trim() && ed.d.blocks.length > 1) { ed.d.blocks.splice(i, 1); ed.d.seps.splice(i, 1); }
+  if (compose(ed.d) !== before || compose(ed.d) !== ed.key) write(ed);
+  draw(ed);
+  if (refocus) { const b = ed.node.querySelector('.fr-ed__blk[data-i="' + Math.min(i, ed.d.blocks.length - 1) + '"]'); if (b) b.focus({ preventScroll: true }); }
+}
+
+/* ── a block, edited ─────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function editingBlock(ed, i) {
+  wirePress();
+  const src = ed.d.blocks[i];
+  const k = kindOf(src);
+  const ta = el('textarea', {
+    class: 'fr-ed__src fr-ed__src--' + k, rows: '1', spellcheck: 'true', 'data-ed': 'src',
+    'aria-label': 'This block, as markdown', placeholder: 'Type / for a heading, a list or a checklist',
+    onInput: (e) => onType(ed, i, e.target),
+    onKeyDown: (e) => onKey(ed, i, e),
+    onBlur: () => setTimeout(() => {
+      if (ed.editing !== i) return;
+      const a = ta.ownerDocument.activeElement;
+      if (a === ta || (a && (a.closest('.fr-ed__tools') || a.closest(SEL.menu)))) return;
+      if (!ta.ownerDocument.hasFocus()) return;
+      finish(ed, false);
+    }, 0),
+  });
+  ta.value = src;
+  const tool = (name, label, kind) => iconButton({ icon: name, ariaLabel: label, size: 'sm', attrs: { 'data-ed-fmt': kind },
+    onClick: () => wrap(ta, kind) });
+  return el('div', { class: 'fr-ed__blk fr-ed__blk--on', 'data-i': String(i), 'data-k': k },
+    el('div', { class: 'fr-ed__tools', role: 'toolbar', 'aria-label': 'Format' },
+      tool('bold', 'Bold (Ctrl or ⌘ B)', 'b'), tool('italic', 'Italic (Ctrl or ⌘ I)', 'i'),
+      tool('code', 'Code (Ctrl or ⌘ E)', 'c'), tool('link', 'Link (Ctrl or ⌘ K)', 'l'),
+      el('span', { class: 'fr-ed__tools-hint' }, 'Esc to finish')),
+    ta);
+}
+
+function onType(ed, i, ta) {
+  ed.d.blocks[i] = ta.value;
+  ed.caret = ta.selectionStart;
+  const k = kindOf(ta.value);
+  ta.className = 'fr-ed__src fr-ed__src--' + k;
+  if (ta.parentNode) ta.parentNode.setAttribute('data-k', k);
+  size(ta);
+  write(ed);
+  if (ta.value === '/') {
+    menu({ anchor: ta, ariaLabel: 'Turn this block into', items: SLASH.map((s) => ({
+      label: s.label, icon: s.icon, attrs: { 'data-ed-slash': s.id },
+      onSelect: () => {
+        ed.d.blocks[i] = s.md;
+        write(ed);
+        ed.editing = i;
+        ed.caret = s.id === 'code' ? 4 : s.md.length;
+        draw(ed);
+      },
+    })) });
+  }
+}
+
+function saveKey(ed, e) {
+  if ((e.metaKey || e.ctrlKey) && (e.key === 's' || e.key === 'S')) { e.preventDefault(); ed.o.onSave(); return true; }
+  return false;
+}
+
+function onKey(ed, i, e) {
+  const ta = e.target;
+  const d = ed.d;
+  const v = ta.value;
+  const s = ta.selectionStart;
+  const end = ta.selectionEnd;
+  const k = kindOf(v);
+  const mod = e.metaKey || e.ctrlKey;
+  const go = (j, caret) => { e.preventDefault(); write(ed); ed.editing = j; ed.caret = caret; draw(ed); };
+  if (saveKey(ed, e)) return;
+  if (mod && !e.shiftKey && !e.altKey && /^[bike]$/i.test(e.key)) { e.preventDefault(); wrap(ta, { b: 'b', i: 'i', e: 'c', k: 'l' }[e.key.toLowerCase()]); return; }
+  if (e.key === 'Escape') { e.preventDefault(); finish(ed, true); return; }
+  if (e.key === 'Enter' && !e.shiftKey && !mod && k !== 'code' && k !== 'table') {
+    if (k === 'list' || k === 'check') {
+      const ls = v.lastIndexOf('\n', s - 1) + 1;
+      const nl = v.indexOf('\n', s);
+      const le = nl === -1 ? v.length : nl;
+      const line = v.slice(ls, le);
+      const mk = /^(\s*)([-*+]|\d+[.)]) (\[[ xX]\] )?/.exec(line);
+      if (mk && line.trim() === line.slice(0, mk[0].length).trim()) {
+        // An empty item ends the list: the lines after it become a new block.
+        const before = v.slice(0, ls).replace(/\n$/, '');
+        const after = v.slice(le).replace(/^\n/, '');
+        d.blocks[i] = before;
+        d.blocks.splice(i + 1, 0, '', ...(after ? [after] : []));
+        d.seps.splice(i + 1, 0, '\n\n', ...(after ? ['\n\n'] : []));
+        return go(i + 1, 0);
+      }
+      e.preventDefault();
+      const n = mk && /^\d+/.test(mk[2]) ? (parseInt(mk[2], 10) + 1) + mk[2].slice(-1) : (mk ? mk[2] : '-');
+      ta.setRangeText('\n' + (mk ? mk[1] : '') + n + ' ' + (mk && mk[3] ? '[ ] ' : ''), s, end, 'end');
+      onType(ed, i, ta);
+      return;
+    }
+    d.blocks[i] = v.slice(0, s);
+    d.blocks.splice(i + 1, 0, v.slice(end));
+    d.seps.splice(i + 1, 0, '\n\n');
+    return go(i + 1, 0);
+  }
+  if (e.key === 'Backspace' && s === 0 && end === 0 && i > 0) {
+    const prev = d.blocks[i - 1];
+    const pk = kindOf(prev);
+    if (!v) { d.blocks.splice(i, 1); d.seps.splice(i, 1); return go(i - 1, prev.length); }
+    if (pk !== 'code' && k !== 'code' && pk !== 'table' && k !== 'table') {
+      const joined = (pk === k && (k === 'list' || k === 'check')) ? '\n' + v : v.replace(/^(#{1,6} |>\s?)/, '');
+      d.blocks[i - 1] = prev + joined;
+      d.blocks.splice(i, 1); d.seps.splice(i, 1);
+      return go(i - 1, prev.length);
+    }
+  }
+  if (e.key === 'ArrowUp' && s === end && !v.slice(0, s).includes('\n') && i > 0) return go(i - 1, d.blocks[i - 1].length);
+  if (e.key === 'ArrowDown' && s === end && !v.slice(end).includes('\n') && i < d.blocks.length - 1) return go(i + 1, 0);
+}
+
+/** Wrap the selection in a mark (or, with nothing selected, insert one around a placeholder word). */
+function wrap(ta, kind) {
+  const s = ta.selectionStart;
+  const e = ta.selectionEnd;
+  const v = ta.value;
+  const sel = v.slice(s, e) || (kind === 'l' ? 'link text' : 'text');
+  const [a, b] = kind === 'b' ? ['**', '**'] : kind === 'i' ? ['*', '*'] : kind === 'c' ? ['`', '`'] : ['[', '](https://)'];
+  ta.setRangeText(a + sel + b, s, e, 'end');
+  if (kind === 'l') ta.setSelectionRange(s + a.length + sel.length + 2, s + a.length + sel.length + 10);
+  else ta.setSelectionRange(s + a.length, s + a.length + sel.length);
+  ta.dispatchEvent(new Event('input', { bubbles: true }));
+  ta.focus();
+}
+
+/** The headings of the document this tab's editor holds, for the outline: [{ i, level, text }]. */
+export function headsOf(id) {
+  const ed = eds.get(id);
+  if (!ed || !ed.d) return [];
+  const out = [];
+  ed.d.blocks.forEach((b, i) => {
+    const m = /^(#{1,3})\s+(.+)$/.exec(b.split('\n')[0]);
+    if (m) out.push({ i, level: m[1].length, text: m[2].replace(/[*_`]/g, '').trim() });
+  });
+  return out;
+}
+
+/** Bring one block to the top of the pane and give it the focus, as the outline's press does. */
+export function goToBlock(id, i) {
+  const ed = eds.get(id);
+  const b = ed && ed.node.querySelector('.fr-ed__blk[data-i="' + i + '"]');
+  if (!b) return;
+  b.scrollIntoView({ block: 'start', behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+  b.focus({ preventScroll: true });
+}

package/workspace/public/pm/doc-rail.js

@@ -0,0 +1,161 @@
+/* pm/doc-rail.js — beside a document: its outline, and its Connections (workspace-tabs-declutter).
+ *
+ * Connections is the document graph the PM asked for in the tab. It draws only STATED ties, the ones `pmos kg
+ * neighbors` prints (lib/kg.js): a link, a frontmatter path, the initiative, the anchor, a decision id. It adds the
+ * file's copies from the Docs store and the findings the last consistency check wrote against the file. Nothing is
+ * guessed from wording: a file that talks about the same thing without a tie is not on the graph. It replaces the
+ * Alignment drawer, whose ties (the consistency record) are the findings shown here.
+ *
+ * The graph is a picture of the list below it. The list is the control: every tie is a row that opens the file, so
+ * the graph itself is hidden from assistive technology and a click on a square is the same press as its row.
+ */
+
+import { el, setChildren } from './dom.js';
+import { tabs, row } from './primitives.js';
+import { setState } from './state.js';
+import { copiesOf, wordsOf, openCopy } from './doc-remote.js';
+
+const SVG = 'http://www.w3.org/2000/svg';
+const graphs = new Map();     // ws|path -> { state, data, at }
+const rails = new Map();      // tab id -> { node, key }
+const modes = new Map();      // tab id -> 'outline' | 'graph'
+
+const VIA = { link: 'Link', frontmatter: 'Frontmatter', initiative: 'Initiative', anchor: 'Anchor', cites: 'Decision',
+  supersedes: 'Supersedes', amended_by: 'Amended by' };
+
+function readGraph(ws, rel) {
+  const k = ws + '|' + rel;
+  const cur = graphs.get(k);
+  if (cur && (cur.state === 'loading' || Date.now() - cur.at < 60000)) return cur;
+  const next = { state: cur && cur.data ? 'ok' : 'loading', data: cur ? cur.data : null, at: Date.now() };
+  graphs.set(k, next);
+  fetch('/api/doc/graph?ws=' + encodeURIComponent(ws) + '&path=' + encodeURIComponent(rel))
+    .then((r) => r.json())
+    .then((d) => { graphs.set(k, d && d.ok ? { state: 'ok', data: d, at: Date.now() } : { state: 'error', error: (d && d.error) || 'refused', at: Date.now() }); setState({}); },
+      (e) => { graphs.set(k, { state: 'error', error: (e && e.message) || 'could not reach the workspace server', at: Date.now() }); setState({}); });
+  return next;
+}
+
+/** Read the graph again after a save: a new link is a new tie. */
+export function refreshGraph(ws, rel) { graphs.delete(ws + '|' + rel); }
+
+export function disposeRail(id) { rails.delete(id); modes.delete(id); }
+
+/**
+ * The rail for one tab. `o` = { ws, rel, heads: [{ i, level, text }], findings: [{ status, sentence, rel? }],
+ * onGoto(i), onOpen(rel) }. Returns the same node while what it shows has not changed.
+ */
+export function railNode(tab, o) {
+  const g = readGraph(o.ws, o.rel);
+  const copies = copiesOf(o.ws, o.rel);
+  const ties = g.state === 'ok' && g.data ? g.data.ties || [] : [];
+  const flagged = new Set(o.findings.map((f) => f.rel).filter(Boolean));
+  const mode = modes.get(tab.id) || (o.heads.length > 1 ? 'outline' : 'graph');
+  const key = JSON.stringify([mode, o.heads, g.state, ties, copies.map((c) => [c.kind, wordsOf(c, o.ws, o.rel).text]), o.findings]);
+  let r = rails.get(tab.id);
+  if (!r) { r = { node: el('aside', { class: 'fr-rail', 'data-rail': '' }), key: null }; rails.set(tab.id, r); }
+  if (r.key === key) return r.node;
+  r.key = key;
+  const n = ties.length + copies.length;
+  const kids = [tabs({
+    variant: 'segmented', ariaLabel: 'Beside the document', value: mode, full: true,
+    items: [{ id: 'outline', label: 'Outline' }, { id: 'graph', label: n ? 'Connections ' + n : 'Connections' }],
+    onChange: (m) => { modes.set(tab.id, m); setState({}); },
+    attrs: { class: 'fr-rail__tabs', 'data-rail': 'tabs' },
+  })];
+  if (mode === 'outline') {
+    kids.push(o.heads.length
+      ? el('nav', { class: 'fr-rail__outline', 'aria-label': 'Outline', 'data-rail': 'outline' },
+        o.heads.map((h) => row({ title: h.text, compact: true, onOpen: () => o.onGoto(h.i), openLabel: 'Go to ' + h.text,
+          attrs: { class: 'fr-rail__head', 'data-level': String(h.level), 'data-rail': 'head' } })))
+      : el('p', { class: 'fr-rail__note' }, 'No headings yet. A line that starts with # or ## is a heading.'));
+  } else if (g.state === 'loading' && !g.data) {
+    kids.push(el('p', { class: 'fr-rail__note', 'data-rail': 'status' }, 'Reading the ties of this file…'));
+  } else if (g.state === 'error') {
+    kids.push(el('p', { class: 'fr-rail__note fr-rail__note--bad', 'data-rail': 'status' }, 'The ties could not be read: ' + g.error + '. Nothing is shown.'));
+  } else {
+    const items = [
+      ...ties.map((t) => ({ kind: 'file', t, flag: flagged.has(t.path) })),
+      ...copies.map((c) => ({ kind: 'copy', c })),
+    ];
+    if (items.length) kids.push(graphSvg(items, (it) => (it.kind === 'copy' ? openCopy(o.ws, o.rel) : o.onOpen(it.t.path))));
+    kids.push(el('p', { class: 'fr-rail__note', 'data-rail': 'rule' }, items.length
+      ? 'Only stated ties: a link, a frontmatter path, an initiative, an anchor or a decision id.'
+      : (g.data && g.data.tracked === false
+        ? 'This file is not tracked by git yet, so no tie is known. Commit it to see its ties.'
+        : 'No file is tied to this one. A link, a frontmatter path or a decision id makes a tie.')));
+    if (items.length) {
+      kids.push(el('div', { class: 'fr-rail__ties', 'data-rail': 'ties' }, items.map((it, k) => (it.kind === 'copy'
+        ? row({ title: it.c.title || it.c.target, meta: [it.c.label || 'Copy', wordsOf(it.c, o.ws, o.rel).text], compact: true,
+          onOpen: () => openCopy(o.ws, o.rel), openLabel: 'The ' + (it.c.label || 'copy') + ' copy of this file',
+          attrs: { class: 'fr-rail__tie', 'data-k': String(k), 'data-rail': 'copy' } })
+        : row({ title: it.t.title || it.t.path, compact: true,
+          meta: [VIA[it.t.via] || it.t.via, it.t.direction === 'in' ? 'points here' : 'this file points to it', it.t.basis === 'mention' ? 'mentioned' : null].filter(Boolean),
+          onOpen: () => o.onOpen(it.t.path), openLabel: 'Open ' + it.t.path,
+          attrs: { class: 'fr-rail__tie' + (it.flag ? ' fr-rail__tie--flag' : ''), 'data-k': String(k), 'data-rail': 'tie', 'data-path': it.t.path, title: it.t.path } })))));
+    }
+    if (o.findings.length) {
+      kids.push(el('div', { class: 'fr-rail__label' }, 'Findings'));
+      kids.push(el('ul', { class: 'fr-rail__findings', 'data-rail': 'findings' }, o.findings.map((f) =>
+        el('li', { class: 'fr-rail__finding', 'data-status': f.status }, el('span', { class: 'fr-rail__finding-s' }, f.status), f.sentence))));
+    }
+  }
+  setChildren(r.node, kids);
+  return r.node;
+}
+
+/* The picture: this file in the middle, each tie on a ring around it. A copy is drawn in the copy's tone, a tie a
+ * finding names in the warning tone, a tie made by a mention (a decision id in prose) as a dashed line. */
+function graphSvg(items, open) {
+  const W = 280;
+  const H = 220;
+  const cx = W / 2;
+  const cy = H / 2 - 6;
+  const R = Math.min(86, 40 + items.length * 6);
+  const s = (tag, attrs, ...kids) => {
+    const n = document.createElementNS(SVG, tag);
+    for (const a in attrs) if (attrs[a] != null) n.setAttribute(a, String(attrs[a]));
+    kids.forEach((c) => { if (c) n.appendChild(typeof c === 'string' ? document.createTextNode(c) : c); });
+    return n;
+  };
+  const shown = items.slice(0, 14);
+  const pos = shown.map((_, k) => { const a = -Math.PI / 2 + (2 * Math.PI * k) / shown.length; return [cx + R * Math.cos(a), cy + R * Math.sin(a)]; });
+  const label = (it) => {
+    const p = it.kind === 'copy' ? (it.c.label || 'Copy') : String(it.t.path).split('/').pop().replace(/\.md$/, '');
+    return p.length > 20 ? p.slice(0, 19) + '…' : p;
+  };
+  const svg = s('svg', { class: 'fr-rail__graph', viewBox: '0 0 ' + W + ' ' + H, 'aria-hidden': 'true', 'data-rail': 'graph' },
+    ...shown.map((it, k) => s('line', { x1: cx, y1: cy, x2: pos[k][0], y2: pos[k][1], 'data-k': k,
+      class: 'fr-rail__edge' + (it.kind === 'copy' ? ' fr-rail__edge--copy' : '') + (it.flag ? ' fr-rail__edge--flag' : '') + (it.t && it.t.basis === 'mention' ? ' fr-rail__edge--mention' : '') })),
+    s('rect', { x: cx - 9, y: cy - 9, width: 18, height: 18, class: 'fr-rail__me' }),
+    ...shown.map((it, k) => {
+      const [x, y] = pos[k];
+      const below = y >= cy - 1;
+      return s('g', { class: 'fr-rail__node' + (it.kind === 'copy' ? ' fr-rail__node--copy' : '') + (it.flag ? ' fr-rail__node--flag' : ''), 'data-k': k },
+        s('rect', { x: x - 6, y: y - 6, width: 12, height: 12 }),
+        s('text', { x, y: below ? y + 20 : y - 11, 'text-anchor': 'middle' }, label(it)));
+    }));
+  svg.__open = (k) => { const it = shown[k]; if (it) open(it); };
+  wireGraph();
+  return svg;
+}
+
+/* One listener on the document for every graph: a press on a square opens what its row opens, and pointing at a
+ * square or a row lights both. */
+let wired = false;
+function wireGraph() {
+  if (wired) return;
+  wired = true;
+  document.addEventListener('click', (e) => {
+    const g = e.target instanceof Element ? e.target.closest('.fr-rail__node') : null;
+    const svg = g && g.closest('.fr-rail__graph');
+    if (svg && svg.__open) svg.__open(Number(g.getAttribute('data-k')));
+  });
+  document.addEventListener('mouseover', (e) => {
+    const t = e.target instanceof Element ? e.target.closest('.fr-rail__node, .fr-rail__tie') : null;
+    const rail = (t || (e.target instanceof Element ? e.target : null))?.closest?.('.fr-rail');
+    if (!rail) return;
+    const k = t ? t.getAttribute('data-k') : null;
+    rail.querySelectorAll('[data-k]').forEach((n) => n.classList.toggle('fr-rail--lit', k != null && n.getAttribute('data-k') === k));
+  });
+}