synabun 2.0.0-beta → 2.0.5

package/neural-interface/public/shared/editor/editor-lint.js

@@ -0,0 +1,229 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Code editor: problems in the file
+// ═══════════════════════════════════════════
+//
+// A JSON file that does not parse gets the place of the error underlined, a
+// mark in the gutter and the parser's message (on hover, and with F8). The
+// check is CodeMirror's lint (@codemirror/lint, a chunk of the vendored bundle
+// fetched with the first JSON file) run with the JSON language's own linter.
+// Files that are JSON with comments by convention (tsconfig.json, .vscode/…)
+// are checked with comments and trailing commas allowed; files that are not
+// one JSON value (JSON Lines, JSON5) are not checked.
+// Takes the vendored bundle as an argument: no imports. The helpers at the top
+// need no page: `node --test` loads them as they are.
+
+/** The check runs this long after the last edit. */
+export const LINT_DELAY_MS = 400;
+
+// JSON with comments, by the name tools gave the file.
+const JSONC_NAMES = /^(tsconfig|jsconfig)(\..+)?\.json$|^(\.?devcontainer|\.eslintrc|\.babelrc|deno|turbo|\.luarc|api-extractor|typedoc)\.json$|^(\.babelrc|\.eslintrc|\.prettierrc|\.stylelintrc|\.swcrc|bun\.lock)$/;
+
+/**
+ * Which check a file gets.
+ * @param {string} path the file's path or name
+ * @param {string} languageName the language it is shown in, as the status bar names it
+ * @returns {'json' | 'jsonc' | null} `json`: strict; `jsonc`: comments and trailing commas are allowed; null: none
+ */
+export function lintKind(path, languageName) {
+  if (languageName !== 'JSON') return null;
+  const full = String(path ?? '').replace(/\\/g, '/');
+  const name = full.slice(full.lastIndexOf('/') + 1).toLowerCase();
+  const ext = name.lastIndexOf('.') > 0 ? name.slice(name.lastIndexOf('.') + 1) : '';
+  if (ext === 'jsonl' || ext === 'ndjson' || ext === 'json5') return null;   // several values, or another syntax
+  if (ext === 'jsonc' || ext === 'code-workspace' || /\/\.vscode\/[^/]+$/.test(full) || JSONC_NAMES.test(name)) return 'jsonc';
+  return 'json';
+}
+
+/**
+ * `text` with its comments and trailing commas turned into spaces, every other character where it was: what is
+ * left is JSON when the text was JSON with comments, and an error in it is at the same place in the text.
+ */
+export function blankJsonComments(text) {
+  const s = String(text ?? '');
+  const n = s.length;
+  const out = new Uint16Array(n);
+  let comma = -1;   // a comma that nothing but blanks and comments has followed yet
+  let i = 0;
+  while (i < n) {
+    const c = s.charCodeAt(i);
+    if (c === 34) {   // a string: copied as it is, to its closing quote or the end of its line
+      out[i++] = c;
+      while (i < n) {
+        const d = s.charCodeAt(i);
+        out[i++] = d;
+        if (d === 92 && i < n) out[i] = s.charCodeAt(i++);
+        else if (d === 34 || d === 10) break;
+      }
+      comma = -1;
+      continue;
+    }
+    if (c === 47 && s.charCodeAt(i + 1) === 47) {
+      while (i < n && s.charCodeAt(i) !== 10) out[i++] = 32;
+      continue;
+    }
+    if (c === 47 && s.charCodeAt(i + 1) === 42) {
+      const end = s.indexOf('*/', i + 2);
+      const stop = end === -1 ? n : end + 2;
+      for (; i < stop; i++) out[i] = s.charCodeAt(i) === 10 ? 10 : 32;
+      continue;
+    }
+    out[i] = c;
+    if (c === 44) comma = i;
+    else if (c === 125 || c === 93) { if (comma >= 0) out[comma] = 32; comma = -1; }
+    else if (c !== 32 && c !== 9 && c !== 10 && c !== 13) comma = -1;
+    i++;
+  }
+  let result = '';
+  for (let at = 0; at < n; at += 8192) result += String.fromCharCode.apply(null, out.subarray(at, Math.min(n, at + 8192)));
+  return result;
+}
+
+/**
+ * Where a parser's message says the error is, as an offset into the text. Null when the message names no place
+ * (some engines' do not).
+ */
+export function parseErrorOffset(message, text) {
+  const words = String(message ?? '');
+  const s = String(text ?? '');
+  let m = /\bat position (\d+)/.exec(words);
+  if (m) return Math.min(Number(m[1]), s.length);
+  m = /\bat line (\d+) column (\d+)/.exec(words);
+  if (m) {
+    let at = 0;
+    for (let line = 1; line < Number(m[1]); line++) {
+      const next = s.indexOf('\n', at);
+      if (next === -1) return s.length;
+      at = next + 1;
+    }
+    return Math.min(at + Math.max(0, Number(m[2]) - 1), s.length);
+  }
+  if (/end of (JSON )?(input|data)/i.test(words)) return s.length;
+  return null;
+}
+
+const isWordChar = (c) => (c >= 48 && c <= 57) || (c >= 65 && c <= 90) || (c >= 97 && c <= 122) || c === 95 || c === 36 || c === 45 || c === 43 || c === 46 || c > 127;
+const isBlank = (c) => c === 32 || c === 9 || c === 10 || c === 13;
+
+/**
+ * The stretch of text to underline for an error at `offset`: the word there, or the one character; at a blank
+ * or past the end, the last thing before it. Never empty unless the text is, and never across a line break.
+ * @returns {{ from: number, to: number }}
+ */
+export function problemSpan(text, offset) {
+  const s = String(text ?? '');
+  if (!s.length) return { from: 0, to: 0 };
+  let at = Math.max(0, Math.min(Number(offset) || 0, s.length - 1));
+  while (at > 0 && isBlank(s.charCodeAt(at))) at--;
+  if (isBlank(s.charCodeAt(at))) return { from: at, to: at + 1 === s.length || s.charCodeAt(at) === 10 ? at : at + 1 };
+  if (!isWordChar(s.charCodeAt(at))) return { from: at, to: at + 1 };
+  let from = at; let to = at + 1;
+  while (from > 0 && isWordChar(s.charCodeAt(from - 1))) from--;
+  while (to < s.length && isWordChar(s.charCodeAt(to))) to++;
+  return { from, to };
+}
+
+/**
+ * The problems of a JSON text.
+ * @param {string} text
+ * @param {{ relaxed?: boolean }} [o] `relaxed`: comments and trailing commas are not problems
+ * @returns {{ from: number, to: number, message: string, placed: boolean }[]} none, or the first one the parser
+ *   met; `placed` is false when the parser's message named no place (`from` and `to` are then 0)
+ */
+export function jsonProblems(text, { relaxed = false } = {}) {
+  const s = String(text ?? '');
+  if (!s.trim()) return [];   // an empty file is not a broken one
+  let checked = s;
+  try { JSON.parse(s); return []; } catch (strict) {
+    let error = strict;
+    if (relaxed) {
+      checked = blankJsonComments(s);
+      try { JSON.parse(checked); return []; } catch (inner) { error = inner; }
+    }
+    if (!(error instanceof SyntaxError)) throw error;
+    const offset = parseErrorOffset(error.message, checked);
+    if (offset === null) return [{ from: 0, to: 0, message: error.message, placed: false }];
+    return [{ ...problemSpan(s, offset), message: error.message, placed: true }];
+  }
+}
+
+/**
+ * @param {object} cm the vendored CodeMirror bundle (editor-loader.js)
+ */
+export function editorLint(cm) {
+  let lint = null;          // @codemirror/lint, once loaded
+  let strictLinter = null;  // the JSON language's own linter
+  let loading = null;
+  const built = new Map();  // kind → its extension, the same one for every document
+
+  function load() {
+    if (!loading) {
+      loading = Promise.all([cm.loadLint(), typeof cm.loadJsonLinter === 'function' ? cm.loadJsonLinter() : null]).then(([module, jsonLinter]) => {
+        lint = module;
+        strictLinter = typeof jsonLinter === 'function' ? jsonLinter() : null;
+      });
+      loading.catch(() => { loading = null; });
+    }
+    return loading;
+  }
+
+  // A problem the parser's message did not place is put at the first node the editor's own parser could not read.
+  function firstErrorNode(state) {
+    let at = -1;
+    cm.syntaxTree(state).iterate({ enter: (node) => { if (at < 0 && node.type.isError) at = node.from; return at < 0; } });
+    return at;
+  }
+
+  function source(kind) {
+    return (view) => {
+      const text = view.state.doc.toString();
+      let found;
+      if (kind === 'json' && strictLinter) {
+        // The JSON language's own linter says whether the file parses and with which message; where the
+        // underline goes is worked out here, so it is a stretch of text instead of a point.
+        found = text.trim() ? strictLinter(view).map((d) => {
+          const offset = parseErrorOffset(d.message, text);
+          return offset === null ? { from: 0, to: 0, message: d.message, placed: false } : { ...problemSpan(text, offset), message: d.message, placed: true };
+        }) : [];
+      } else {
+        found = jsonProblems(text, { relaxed: kind === 'jsonc' });
+      }
+      return found.map((problem) => {
+        let { from, to } = problem;
+        if (!problem.placed) {
+          const at = firstErrorNode(view.state);
+          ({ from, to } = problemSpan(text, at < 0 ? 0 : at));
+        }
+        return { from, to, severity: 'error', message: problem.message };
+      });
+    };
+  }
+
+  function build(kind) {
+    if (!built.has(kind)) built.set(kind, [lint.linter(source(kind), { delay: LINT_DELAY_MS }), lint.lintGutter()]);
+    return built.get(kind);
+  }
+
+  return {
+    /** The extension that checks a document of this kind, when the lint chunk is already there; else null. */
+    ready: (kind) => (lint && kind ? build(kind) : null),
+
+    /** The same, fetching the chunk first. Resolves to null for no kind; rejects when the chunk cannot be loaded. */
+    async extension(kind) {
+      if (!kind) return null;
+      await load();
+      return build(kind);
+    },
+
+    /** Go to the next / the previous problem. False when there is none (or nothing is checked). */
+    next: (view) => (lint ? lint.nextDiagnostic(view) : false),
+    previous: (view) => (lint ? lint.previousDiagnostic(view) : false),
+
+    /** How many problems a state shows. */
+    count: (state) => (lint ? lint.diagnosticCount(state) : 0),
+
+    /** Call `use(from, to)` for each problem of a state (the minimap draws them). */
+    each(state, use) {
+      if (lint) lint.forEachDiagnostic(state, (_diagnostic, from, to) => use(from, to));
+    },
+  };
+}

package/neural-interface/public/shared/editor/editor-loader.js

@@ -0,0 +1,51 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Code editor: loading CodeMirror
+// ═══════════════════════════════════════════
+//
+// CodeMirror is vendored (public/vendor/codemirror/, built by
+// scripts/build-vendor.mjs): nothing comes from a CDN. The manifest names the
+// entry file of the current build; it is imported once per page, the first
+// time a file is opened. A failed load is reported to the caller, which shows
+// it with a Retry; the next call tries again.
+
+export const CODEMIRROR_BASE = '/vendor/codemirror/';
+const ENTRY_NAME = /^codemirror-[A-Za-z0-9._-]+\.min\.js$/;
+
+let _loading = null;
+let _attempt = 0;
+
+/**
+ * The vendored CodeMirror bundle.
+ * @param {{ fetchImpl?: typeof fetch, importModule?: (url: string) => Promise<object> }} [o] for tests
+ * @returns {Promise<{ cm: object, manifest: { version: string, entry: string, packages: object } }>}
+ *   Rejects with an Error when the manifest or the bundle cannot be loaded.
+ */
+export function loadCodeMirror({ fetchImpl = (...args) => fetch(...args), importModule = (url) => import(url) } = {}) {
+  if (_loading) return _loading;
+  const attempt = ++_attempt;
+  const loading = (async () => {
+    const res = await fetchImpl(`${CODEMIRROR_BASE}manifest.json`, { cache: 'no-cache' });
+    if (!res.ok) throw new Error(`CodeMirror manifest: HTTP ${res.status}`);
+    const manifest = await res.json();
+    if (typeof manifest?.entry !== 'string' || !ENTRY_NAME.test(manifest.entry)) {
+      throw new Error('CodeMirror manifest names no entry file');
+    }
+    // A module that failed to load can stay failed under its address for the rest of the page:
+    // a retry asks for it under another one.
+    const retry = attempt > 1 ? `?retry=${attempt}` : '';
+    const cm = await importModule(`${CODEMIRROR_BASE}${manifest.entry}${retry}`);
+    if (typeof cm?.EditorView !== 'function' || typeof cm?.EditorState !== 'function') {
+      throw new Error('CodeMirror bundle is incomplete');
+    }
+    return { cm, manifest };
+  })();
+  _loading = loading;
+  loading.catch(() => { if (_loading === loading) _loading = null; });
+  return loading;
+}
+
+/** Forget a load (tests). */
+export function resetCodeMirrorLoader() {
+  _loading = null;
+  _attempt = 0;
+}

package/neural-interface/public/shared/editor/editor-markdown.js

@@ -0,0 +1,90 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Code editor: Markdown preview
+// ═══════════════════════════════════════════
+//
+// Markdown → the HTML the editor's Preview shows. The text is a file from disk,
+// so it is untrusted: every character that means something in HTML is escaped
+// before any tag is written, and the only attribute that carries a value from
+// the text, a link's href, is limited to http:, https:, mailto: and relative
+// targets. No DOM and no imports: loaded by `node --test` as it is.
+
+const ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+
+/** `text` with & < > " ' as HTML entities: safe as element content and inside a quoted attribute. */
+export function escapeHtml(text) {
+  return String(text ?? '').replace(/[&<>"']/g, (c) => ESCAPES[c]);
+}
+
+// What a browser drops or ignores when it reads a URL's scheme: C0 controls, spaces of every kind, and the
+// invisible format characters. Without them "java\tscript:" is seen for what it is.
+const URL_NOISE = /[\u0000-\u0020\u007F-\u00A0\u1680\u2000-\u200F\u2028-\u202F\u205F-\u2064\u3000\uFEFF]/g;
+const ALLOWED_SCHEMES = new Set(['http', 'https', 'mailto']);
+
+/**
+ * A link target that is safe to open, or null. Relative targets (a path, `#anchor`, `?query`, `//host/path`)
+ * pass; a target with a scheme passes only for http, https and mailto.
+ * @param {string} target as written in the Markdown, or already HTML-escaped (escaping adds no scheme)
+ */
+export function safeLinkTarget(target) {
+  const raw = String(target ?? '').trim();
+  if (!raw) return null;
+  const scheme = /^([a-zA-Z][a-zA-Z0-9+.-]*):/.exec(raw.replace(URL_NOISE, ''));
+  if (scheme && !ALLOWED_SCHEMES.has(scheme[1].toLowerCase())) return null;
+  return raw;
+}
+
+const HOLD = '\u0000';
+
+/**
+ * Render Markdown for the Preview pane: headings, emphasis, inline and fenced code, links, block quotes,
+ * tables, lists and paragraphs. Front matter is left out. Raw HTML in the text is shown as text.
+ * @returns {string} HTML
+ */
+export function renderMarkdown(markdown) {
+  let text = String(markdown ?? '').replace(/\r\n?/g, '\n').split(HOLD).join('');
+  text = text.replace(/^---\n[\s\S]*?\n---\n?/, '');
+  text = escapeHtml(text);
+
+  // Code and links are set aside while the rest is formatted, so nothing inside them is read as Markdown and
+  // nothing is formatted into an attribute.
+  const held = [];
+  const hold = (html) => `${HOLD}${held.push(html) - 1}${HOLD}`;
+  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => hold(`<pre><code class="lang-${lang}">${code.trimEnd()}</code></pre>`));
+  text = text.replace(/`([^`\n]+)`/g, (_, code) => hold(`<code>${code}</code>`));
+  text = text.replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (whole, label, target) => {
+    if (target.includes(HOLD)) return whole;
+    const href = safeLinkTarget(target);
+    return href === null ? label : `${hold(`<a href="${href}" target="_blank" rel="noopener noreferrer">`)}${label}${hold('</a>')}`;
+  });
+
+  text = text.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>');
+  text = text.replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>');
+  text = text.replace(/^####\s+(.+)$/gm, '<h4>$1</h4>');
+  text = text.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
+  text = text.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
+  text = text.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
+  text = text.replace(/^---+$/gm, '<hr>');
+  text = text.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
+  text = text.replace(/~~(.+?)~~/g, '<del>$1</del>');
+  text = text.replace(/^&gt;\s?(.*)$/gm, '<blockquote>$1</blockquote>');
+  text = text.replace(/<\/blockquote>\n<blockquote>/g, '\n');
+  text = text.replace(/^(\|.+\|)\n(\|[-| :]+\|)\n((?:\|.+\|\n?)+)/gm, (_, header, _sep, body) => {
+    const ths = header.split('|').filter((c) => c.trim()).map((c) => `<th>${c.trim()}</th>`).join('');
+    const rows = body.trim().split('\n').map((row) => {
+      const tds = row.split('|').filter((c) => c.trim()).map((c) => `<td>${c.trim()}</td>`).join('');
+      return `<tr>${tds}</tr>`;
+    }).join('');
+    return `<table><thead><tr>${ths}</tr></thead><tbody>${rows}</tbody></table>`;
+  });
+  text = text.replace(/^[-*]\s+(.+)$/gm, '<li>$1</li>');
+  text = text.replace(/((?:<li>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
+  text = text.replace(/^\d+\.\s+(.+)$/gm, '<oli>$1</oli>');
+  text = text.replace(/((?:<oli>.*<\/oli>\n?)+)/g, (match) => `<ol>${match.replace(/<\/?oli>/g, (tag) => tag.replace('oli', 'li'))}</ol>`);
+  // A line that does not start with a tag (or with code or a link, which are held) becomes a paragraph.
+  text = text.replace(/^(?![<\u0000])(.+)$/gm, '<p>$1</p>');
+  text = text.replace(/<p>\s*<\/p>/g, '');
+
+  return text.replace(new RegExp(`${HOLD}(\\d+)${HOLD}`, 'g'), (_, i) => held[Number(i)]);
+}

package/neural-interface/public/shared/editor/editor-menu.js

@@ -0,0 +1,233 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Code editor: menus
+// ═══════════════════════════════════════════
+//
+// The one popup of the editor panel: a tab's menu, the status bar's lists
+// (language, indentation, line ending), the View menu, the command palette and
+// go-to-file. A list of actions, optionally under a search field; arrows,
+// Home / End, Enter and Escape work it, and its keys never reach the app's
+// shortcuts. They are taken at the window, before anything in the page sees
+// them: other parts of the app listen for keys at the document in the capture
+// phase (the whiteboard takes Escape there whenever the keyboard is not in a
+// text field), and a listener on the menu itself would come after those.
+// One is open at a time; closed with the keyboard, it gives the keyboard back
+// to where it was. Its look is `.fe-editor-menu` in styles.css (the menu
+// treatment of DESIGN.md).
+// No imports: the caller hands in the words.
+
+let _current = null;
+const KEY_EVENTS = ['keydown', 'keyup', 'keypress'];
+
+/** Close the open menu, if there is one. */
+export function closeEditorMenu() {
+  _current?.close();
+}
+
+/**
+ * @typedef {object} EditorMenuItem
+ * @property {string} [id]
+ * @property {string} [label]
+ * @property {string} [hint] muted words after the label
+ * @property {boolean} [checked] the one in force (shown with a check)
+ * @property {boolean} [toggle] `checked` is a switch of its own, not one choice among the others
+ * @property {boolean} [disabled]
+ * @property {boolean} [separator] a line between groups; takes no other field
+ */
+
+/**
+ * Open a menu.
+ * @param {object} o
+ * @param {HTMLElement} o.host the element it is added to (the editor panel: its variables and its focus ring apply)
+ * @param {HTMLElement} [o.anchor] the control it belongs to: it opens against it and gives the keyboard back to it
+ * @param {{ x: number, y: number }} [o.at] or a point of the page (a right click): the keyboard then goes back to
+ *   whatever had it when the menu opened
+ * @param {string} o.label its accessible name
+ * @param {EditorMenuItem[]} o.items
+ * @param {{ label: string, placeholder: string, empty: string | (() => string), filter: (query: string) => EditorMenuItem[] }} [o.search]
+ *   a field above the list: `filter` gives the items for what was typed; `empty` is said when there are none
+ * @param {string} [o.className] a class of its own, next to `fe-editor-menu` (the palette is wider)
+ * @param {string} [o.activeId] the item the keyboard starts on (else the checked one, else the first)
+ * @param {(id: string) => void} o.onSelect
+ * @param {() => void} [o.onClose]
+ * @returns {{ close: (o?: { refocus?: boolean }) => void, setItems: (items: EditorMenuItem[]) => void, element: HTMLElement }}
+ *   `setItems`: show other items in the open menu (a search whose answer arrived)
+ */
+export function openEditorMenu({ host, anchor = null, at = null, label, items, search = null, className = '', activeId = null, onSelect, onClose = () => {} }) {
+  closeEditorMenu();
+
+  const menu = document.createElement('div');
+  menu.className = className ? `fe-editor-menu ${className}` : 'fe-editor-menu';
+  menu.setAttribute('role', search ? 'dialog' : 'menu');
+  menu.setAttribute('aria-label', label);
+  menu.tabIndex = -1;
+  const list = document.createElement('div');
+  list.className = 'fe-editor-menu-list';
+  list.id = 'fe-editor-menu-list';
+  list.setAttribute('role', search ? 'listbox' : 'none');
+  let input = null;
+  if (search) {
+    input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'fe-editor-menu-search';
+    input.placeholder = search.placeholder;
+    input.spellcheck = false;
+    input.autocomplete = 'off';
+    input.setAttribute('role', 'combobox');
+    input.setAttribute('aria-label', search.label);
+    input.setAttribute('aria-expanded', 'true');
+    input.setAttribute('aria-controls', list.id);
+    input.setAttribute('aria-autocomplete', 'list');
+    menu.append(input);
+  }
+  menu.append(list);
+
+  let shown = [];       // the items that can be chosen, in order
+  let activeAt = -1;
+  let open = true;
+  // What had the keyboard when the menu opened: where it goes back to, for a menu that belongs to no control.
+  const opener = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
+
+  function setActive(index, { scroll = true } = {}) {
+    activeAt = shown.length ? Math.max(0, Math.min(shown.length - 1, index)) : -1;
+    shown.forEach((entry, i) => entry.node.classList.toggle('active', i === activeAt));
+    const node = shown[activeAt]?.node || null;
+    (input || menu).setAttribute('aria-activedescendant', node ? node.id : '');
+    if (node && scroll) node.scrollIntoView({ block: 'nearest' });
+  }
+
+  function render(entries) {
+    list.textContent = '';
+    shown = [];
+    let seq = 0;
+    for (const item of entries) {
+      if (item.separator) {
+        const line = document.createElement('div');
+        line.className = 'fe-editor-menu-sep';
+        line.setAttribute('role', 'separator');
+        list.append(line);
+        continue;
+      }
+      const node = document.createElement('div');
+      node.className = 'fe-editor-menu-item';
+      node.id = `fe-editor-menu-item-${seq++}`;
+      node.dataset.id = item.id;
+      node.setAttribute('role', search ? 'option' : (item.checked === undefined ? 'menuitem' : (item.toggle ? 'menuitemcheckbox' : 'menuitemradio')));
+      if (item.checked !== undefined) node.setAttribute(search ? 'aria-selected' : 'aria-checked', String(!!item.checked));
+      if (item.disabled) node.setAttribute('aria-disabled', 'true');
+      const check = document.createElement('span');
+      check.className = 'fe-editor-menu-check';
+      check.setAttribute('aria-hidden', 'true');
+      if (item.checked) check.textContent = '✓';
+      const text = document.createElement('span');
+      text.className = 'fe-editor-menu-label';
+      text.textContent = item.label;
+      node.append(check, text);
+      if (item.hint) {
+        const hint = document.createElement('span');
+        hint.className = 'fe-editor-menu-hint';
+        hint.textContent = item.hint;
+        node.append(hint);
+      }
+      list.append(node);
+      if (!item.disabled) shown.push({ item, node });
+    }
+    if (!shown.length && search) {
+      const none = document.createElement('div');
+      none.className = 'fe-editor-menu-empty';
+      none.textContent = typeof search.empty === 'function' ? search.empty() : search.empty;
+      list.append(none);
+    }
+    const wanted = activeId === null ? -1 : shown.findIndex((entry) => entry.item.id === activeId);
+    const checked = shown.findIndex((entry) => entry.item.checked && !entry.item.toggle);
+    setActive(wanted >= 0 ? wanted : (checked >= 0 ? checked : 0));
+  }
+
+  function close({ refocus = false } = {}) {
+    if (!open) return;
+    open = false;
+    if (_current === handle) _current = null;
+    document.removeEventListener('mousedown', onOutside, true);
+    window.removeEventListener('resize', onResize);
+    for (const type of KEY_EVENTS) window.removeEventListener(type, onKey, true);
+    menu.remove();
+    anchor?.setAttribute('aria-expanded', 'false');
+    if (refocus) {
+      const back = anchor || (opener?.isConnected ? opener : null);
+      back?.focus();
+    }
+    onClose();
+  }
+
+  function choose(entry) {
+    if (!entry) return;
+    close({ refocus: true });
+    onSelect(entry.item.id);
+  }
+
+  const onOutside = (event) => { if (!menu.contains(event.target)) close(); };
+  const onResize = () => close();
+
+  menu.addEventListener('click', (event) => {
+    const node = event.target.closest?.('.fe-editor-menu-item');
+    if (node) choose(shown.find((entry) => entry.node === node));
+  });
+  menu.addEventListener('mousemove', (event) => {
+    const node = event.target.closest?.('.fe-editor-menu-item');
+    const index = node ? shown.findIndex((entry) => entry.node === node) : -1;
+    if (index >= 0 && index !== activeAt) setActive(index, { scroll: false });
+  });
+  // The keys pressed in the menu are its own. Taken at the window in the capture phase, so that they are the
+  // menu's before a listener at the document can take them for a shortcut of its own, and go no further: what a
+  // key types into the search field is not held back by that.
+  function onKey(event) {
+    if (!open || !menu.contains(event.target)) return;
+    event.stopPropagation();
+    if (event.type !== 'keydown') return;
+    switch (event.key) {
+      case 'ArrowDown': event.preventDefault(); setActive(activeAt + 1 >= shown.length ? 0 : activeAt + 1); break;
+      case 'ArrowUp': event.preventDefault(); setActive(activeAt - 1 < 0 ? shown.length - 1 : activeAt - 1); break;
+      case 'Home': if (!input) { event.preventDefault(); setActive(0); } break;
+      case 'End': if (!input) { event.preventDefault(); setActive(shown.length - 1); } break;
+      case 'PageDown': event.preventDefault(); setActive(activeAt + 8); break;
+      case 'PageUp': event.preventDefault(); setActive(activeAt - 8); break;
+      case 'Enter': if (!event.isComposing) { event.preventDefault(); choose(shown[activeAt]); } break;
+      case ' ': if (!input) { event.preventDefault(); choose(shown[activeAt]); } break;
+      case 'Escape': event.preventDefault(); close({ refocus: true }); break;
+      case 'Tab': event.preventDefault(); close({ refocus: true }); break;
+      default:
+    }
+  }
+  if (input) input.addEventListener('input', () => render(search.filter(input.value)));
+
+  render(search ? search.filter('') : items);
+  host.append(menu);
+
+  // Against the anchor (above it when there is no room below), or at the point; always inside the host.
+  const frame = host.getBoundingClientRect();
+  const size = menu.getBoundingClientRect();
+  const gap = 6;
+  let left; let top;
+  if (anchor) {
+    const box = anchor.getBoundingClientRect();
+    left = box.left;
+    top = box.bottom + gap + size.height <= frame.bottom ? box.bottom + gap : box.top - gap - size.height;
+  } else {
+    left = at?.x ?? frame.left;
+    top = at?.y ?? frame.top;
+  }
+  left = Math.max(frame.left + 8, Math.min(left, frame.right - size.width - 8));
+  top = Math.max(frame.top + 8, Math.min(top, frame.bottom - size.height - 8));
+  menu.style.left = `${Math.round(left - frame.left)}px`;
+  menu.style.top = `${Math.round(top - frame.top)}px`;
+
+  anchor?.setAttribute('aria-expanded', 'true');
+  document.addEventListener('mousedown', onOutside, true);
+  window.addEventListener('resize', onResize);
+  for (const type of KEY_EVENTS) window.addEventListener(type, onKey, true);
+  (input || menu).focus();
+  setActive(activeAt);
+
+  const handle = { close, setItems: (entries) => { if (open) render(entries); }, element: menu };
+  _current = handle;
+  return handle;
+}