@panphora/clayjs 1.15.2 → 1.17.0

package/src/page/features/media.js

@@ -0,0 +1,290 @@
+// The image and file blocks: their node views, the bookmark a pending upload draws
+// at a block boundary, and their CSS. Loaded the first time a document has or
+// takes one of these blocks.
+import { safeHref } from "../address.js";
+import { asStep } from "../blocksel.js";
+import { RETRY } from "../media.js";
+import { mediaViews } from "../media-views.js";
+
+export const MEDIA_CSS = `
+.page-editor .page-image { margin-inline: 0; }
+.page-image-frame { position: relative; margin: 0 auto; max-width: 100%; }
+.page-image-frame img { display: block; width: 100%; height: auto; border-radius: var(--page-image-radius, 6px); }
+.page-image[data-broken] .page-image-frame { min-height: 80px; background: var(--page-code-bg); border-radius: var(--page-image-radius, 6px); }
+.page-image-handle { position: absolute; top: 50%; inset-inline-end: 6px; width: 6px; height: 36px; margin-top: -18px; border-radius: 3px; background: var(--page-chrome-ink-moved); opacity: 0; cursor: ew-resize; touch-action: none; transition: opacity var(--page-fade); }
+.page-image:hover .page-image-handle, .page-image.is-selected .page-image-handle { opacity: 1; }
+.page-editor .page-image.page-block-selected { background: none; box-shadow: none; }
+.page-editor .page-image.page-block-selected .page-image-frame { box-shadow: 0 0 0 6px var(--page-block-selected, rgba(88, 120, 170, 0.12)); border-radius: var(--page-image-radius, 6px); }
+.page-image[data-align="left"] .page-image-frame { margin-left: 0; margin-right: auto; }
+.page-image[data-align="right"] .page-image-frame { margin-left: auto; margin-right: 0; }
+.page-image[data-align="left"] .page-image-caption { text-align: left; }
+.page-image[data-align="right"] .page-image-caption { text-align: right; }
+.page-image-align { position: absolute; top: 8px; inset-inline-end: 8px; display: none; gap: 1px; padding: 2px; background: var(--page-pop-bg); color: var(--page-pop-ink); border: 1px solid var(--page-pop-line); box-shadow: var(--page-pop-shadow); border-radius: 7px; }
+.page-image.is-selected .page-image-align, .page-image.page-block-selected .page-image-align { display: flex; }
+.page-image-align button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; }
+.page-image-align button:hover, .page-image-align button[aria-pressed="true"] { background: var(--page-pop-hover); }
+.page-image.is-selected .page-image-frame img { outline: 2px solid var(--page-selection); outline-offset: 2px; }
+.page-image-caption { margin-top: 6px; color: var(--page-ink-soft); font-size: 0.88em; text-align: center; outline: none; }
+.page-image-caption[data-empty]::before { content: attr(data-placeholder); color: var(--page-ink-faint); }
+.page-image:not(.is-selected) .page-image-caption[data-empty]:not(:focus) { display: none; }
+.page-file-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--page-rule); border-radius: 8px; color: var(--page-ink); text-decoration: none; }
+.page-file-icon { color: var(--page-link, var(--page-accent)); }
+.page-file-name { color: var(--page-link, var(--page-accent)); min-width: 0; overflow-wrap: anywhere; }
+.page-file-meta { margin-inline-start: auto; color: var(--page-ink-faint); font-size: 0.88em; }
+.page-upload { display: flex; align-items: center; gap: 10px; margin: var(--page-block-gap) 0; padding: 8px 12px; border: 1px dashed var(--page-rule); border-radius: 8px; color: var(--page-ink-soft); font-size: 0.88em; }
+.page-upload-preview { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; opacity: 0.6; }
+.page-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.page-upload-bar { flex: 1; height: 2px; border-radius: 1px; background: var(--page-rule); overflow: hidden; }
+.page-upload-bar > span { display: block; height: 100%; background: var(--page-progress, var(--page-ink-soft)); transition: width 200ms; }
+.page-upload[data-state="error"] .page-upload-msg, .page-upload[data-state="embed-choice"] .page-upload-msg { flex: 1; }
+.page-upload[data-state="error"] .page-upload-msg { color: var(--page-danger, #9E3B2F); }
+.page-upload-btn { border: 0; padding: 4px 8px; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.page-upload-btn:hover { background: var(--page-pop-hover); }`;
+
+function button(doc, act, label, id) {
+  const b = doc.createElement("button");
+  b.type = "button";
+  b.className = "page-upload-btn";
+  b.dataset.act = act;
+  b.dataset.upload = id;
+  b.textContent = label;
+  return b;
+}
+
+function bookmarkDOM(doc, it) {
+  const box = doc.createElement("div");
+  box.className = "page-upload";
+  box.dataset.state = it.state;
+  box.dataset.kind = it.kind;
+  box.contentEditable = "false";
+  box.setAttribute("role", it.state === "uploading" ? "status" : "alert");
+  if (it.preview) {
+    const img = doc.createElement("img");
+    img.className = "page-upload-preview";
+    img.src = it.preview;
+    img.alt = "";
+    box.append(img);
+  }
+  const name = doc.createElement("span");
+  name.className = "page-upload-name";
+  name.textContent = it.name;
+  box.append(name);
+  if (it.state === "uploading") {
+    const bar = doc.createElement("span");
+    bar.className = "page-upload-bar";
+    bar.setAttribute("role", "progressbar");
+    bar.setAttribute("aria-label", `Uploading ${it.name}`);
+    bar.setAttribute("aria-valuemin", "0");
+    bar.setAttribute("aria-valuemax", "100");
+    bar.setAttribute("aria-valuenow", String(it.percent));
+    const fill = doc.createElement("span");
+    fill.style.width = `${it.percent}%`;
+    bar.append(fill);
+    box.append(bar, button(doc, "cancel", "Cancel", it.id));
+    return box;
+  }
+  const msg = doc.createElement("span");
+  msg.className = "page-upload-msg";
+  msg.textContent = it.message;
+  box.append(msg);
+  if (it.state === "embed-choice") box.append(button(doc, "embed", "Keep this image inside the document", it.id));
+  if (RETRY.has(it.code)) box.append(button(doc, "retry", "Retry", it.id));
+  box.append(button(doc, "remove", "Remove", it.id));
+  return box;
+}
+
+const MIN_WIDTH = 48;
+
+const ALIGNS = [
+  ["left", "Align left", '<path d="M2.5 3.5h11M2.5 6.5h6M2.5 9.5h11M2.5 12.5h6"/>'],
+  ["center", "Centre", '<path d="M2.5 3.5h11M5 6.5h6M2.5 9.5h11M5 12.5h6"/>'],
+  ["right", "Align right", '<path d="M2.5 3.5h11M7.5 6.5h6M2.5 9.5h11M7.5 12.5h6"/>'],
+];
+
+export class ImageView {
+  constructor(node, view, getPos) {
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    const doc = view.dom.ownerDocument;
+    this.dom = doc.createElement("figure");
+    this.dom.className = "page-image";
+    this.dom.addEventListener("dragstart", (event) => { event.preventDefault(); event.stopPropagation(); });
+    this.dom.draggable = false;
+    this.frame = doc.createElement("div");
+    this.frame.className = "page-image-frame";
+    this.img = doc.createElement("img");
+    this.img.draggable = false;
+    this.img.addEventListener("error", () => this.dom.toggleAttribute("data-broken", true));
+    this.img.addEventListener("load", () => this.dom.removeAttribute("data-broken"));
+    this.handle = doc.createElement("span");
+    this.handle.className = "page-image-handle";
+    this.handle.setAttribute("aria-hidden", "true");
+    this.handle.addEventListener("pointerdown", (e) => this.resize(e));
+    this.alignBar = doc.createElement("div");
+    this.alignBar.className = "page-image-align";
+    this.alignBar.setAttribute("role", "toolbar");
+    this.alignBar.setAttribute("aria-label", "Image alignment");
+    for (const [value, label, path] of ALIGNS) {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.dataset.align = value;
+      b.setAttribute("aria-label", label);
+      b.title = label;
+      b.innerHTML = `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">${path}</svg>`;
+      this.alignBar.append(b);
+    }
+    this.alignBar.addEventListener("mousedown", (e) => e.preventDefault());
+    this.alignBar.addEventListener("click", (e) => {
+      const b = e.target.closest("[data-align]");
+      if (b) this.setAlign(b.dataset.align === "center" ? null : b.dataset.align);
+    });
+    this.frame.append(this.img, this.handle, this.alignBar);
+    this.caption = doc.createElement("figcaption");
+    this.caption.className = "page-image-caption";
+    this.caption.contentEditable = "plaintext-only";
+    this.caption.setAttribute("aria-label", "Caption");
+    this.caption.dataset.placeholder = "Add a caption";
+    this.caption.addEventListener("keydown", (e) => {
+      if (e.isComposing || this.view.composing) return;
+      if (e.key === "Enter") { e.preventDefault(); this.commitCaption(); this.view.focus(); }
+      if (e.key === "Escape") { e.preventDefault(); this.caption.textContent = this.node.attrs.caption; this.view.focus(); }
+    });
+    this.caption.addEventListener("blur", () => this.commitCaption());
+    this.caption.addEventListener("input", () => this.caption.toggleAttribute("data-empty", !this.caption.textContent));
+    this.dom.append(this.frame, this.caption);
+    this.render(node);
+  }
+
+  render(node) {
+    this.node = node;
+    this.dom.dataset.id = node.attrs.id ?? "";
+    if (this.img.getAttribute("src") !== node.attrs.src) this.img.src = node.attrs.src;
+    this.img.alt = node.attrs.alt || "";
+    this.frame.style.width = node.attrs.width ? `${node.attrs.width}px` : "";
+    if (node.attrs.align) this.dom.dataset.align = node.attrs.align;
+    else delete this.dom.dataset.align;
+    for (const b of this.alignBar.children) b.setAttribute("aria-pressed", String((node.attrs.align ?? "center") === b.dataset.align));
+    if (this.dom.ownerDocument.activeElement !== this.caption) this.caption.textContent = node.attrs.caption || "";
+    this.caption.toggleAttribute("data-empty", !node.attrs.caption);
+  }
+
+  update(node) {
+    if (node.type !== this.node.type) return false;
+    this.render(node);
+    return true;
+  }
+
+  setAlign(align) {
+    const pos = this.getPos();
+    if (pos == null || align === (this.node.attrs.align ?? null)) return;
+    this.view.dispatch(asStep(this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, align })));
+  }
+
+  commitCaption() {
+    const text = this.caption.textContent.replace(/\s+/g, " ").trim();
+    const pos = this.getPos();
+    if (pos == null || text === (this.node.attrs.caption || "")) return;
+    this.view.dispatch(asStep(this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, caption: text })));
+  }
+
+  resize(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const col = this.view.dom.getBoundingClientRect().width;
+    const start = this.frame.getBoundingClientRect().width;
+    const rtl = this.dom.ownerDocument.defaultView.getComputedStyle(this.dom).direction === "rtl";
+    const x0 = event.clientX;
+    const target = event.currentTarget;
+    target.setPointerCapture?.(event.pointerId);
+    let width = this.node.attrs.width;
+    const move = (e) => {
+      const dx = (e.clientX - x0) * (rtl ? -1 : 1);
+      width = Math.max(MIN_WIDTH, Math.min(Math.floor(col) || MIN_WIDTH, Math.round(start + dx)));
+      this.frame.style.width = `${width}px`;
+    };
+    const done = (commit) => {
+      target.removeEventListener("pointermove", move);
+      target.removeEventListener("pointerup", up);
+      target.removeEventListener("pointercancel", cancel);
+      const pos = this.getPos();
+      if (commit && pos != null && width !== this.node.attrs.width) this.view.dispatch(asStep(this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, width })));
+      else this.frame.style.width = this.node.attrs.width ? `${this.node.attrs.width}px` : "";
+    };
+    const up = () => done(true);
+    const cancel = () => done(false);
+    target.addEventListener("pointermove", move);
+    target.addEventListener("pointerup", up);
+    target.addEventListener("pointercancel", cancel);
+  }
+
+  selectNode() { this.dom.classList.add("is-selected"); }
+  deselectNode() { this.dom.classList.remove("is-selected"); }
+  stopEvent(event) { return this.caption.contains(event.target) || this.alignBar.contains(event.target) || event.target.classList?.contains("page-image-handle"); }
+  ignoreMutation() { return true; }
+}
+
+const sizeLabel = (bytes) => {
+  if (bytes == null) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+export class FileView {
+  constructor(node, view) {
+    this.node = node;
+    const doc = view.dom.ownerDocument;
+    this.dom = doc.createElement("div");
+    this.dom.className = "page-file";
+    this.dom.addEventListener("dragstart", (event) => { event.preventDefault(); event.stopPropagation(); });
+    this.link = doc.createElement("a");
+    this.link.className = "page-file-link";
+    this.link.target = "_blank";
+    this.link.rel = "noopener noreferrer";
+    this.icon = doc.createElement("span");
+    this.icon.className = "page-file-icon";
+    this.icon.textContent = "⎘";
+    this.name = doc.createElement("span");
+    this.name.className = "page-file-name";
+    this.meta = doc.createElement("span");
+    this.meta.className = "page-file-meta";
+    this.link.append(this.icon, this.name, this.meta);
+    this.dom.append(this.link);
+    this.render(node);
+  }
+
+  render(node) {
+    this.node = node;
+    this.dom.dataset.id = node.attrs.id ?? "";
+    const href = safeHref(node.attrs.src);
+    if (href) this.link.setAttribute("href", href);
+    else this.link.removeAttribute("href");
+    this.name.textContent = node.attrs.name || "file";
+    this.meta.textContent = sizeLabel(node.attrs.size);
+  }
+
+  update(node) {
+    if (node.type !== this.node.type) return false;
+    this.render(node);
+    return true;
+  }
+
+  selectNode() { this.dom.classList.add("is-selected"); }
+  deselectNode() { this.dom.classList.remove("is-selected"); }
+  stopEvent(event) { return this.link.contains(event.target); }
+  ignoreMutation() { return true; }
+}
+
+export function createFeature({ view = null } = {}) {
+  if (view) mediaViews.set(view, bookmarkDOM);
+  return {
+    id: "media",
+    nodeViews: {
+      image: (node, editorView, getPos) => new ImageView(node, editorView, getPos),
+      file: (node, editorView) => new FileView(node, editorView),
+    },
+    css: MEDIA_CSS,
+    dispose() { if (view && mediaViews.get(view) === bookmarkDOM) mediaViews.delete(view); },
+  };
+}

package/src/page/features/mentions.js

@@ -0,0 +1,188 @@
+// Person mentions: @ opens a picker of people, and choosing one writes that person's name
+// into the document as ordinary text with the `mention` mark over it. The label is the name
+// the command saw, so a later rename never rewrites somebody's prose, and the id is the
+// people registry's reference: nothing here notifies anyone, looks up an account or speaks
+// to the network. Loaded the first time somebody types @, and disposed with the exit.
+import { state } from "../../vendor/prosemirror.vendor.js";
+import { schema } from "../schema.js";
+import { asStep } from "../blocksel.js";
+import { composing } from "../markdown.js";
+import { createMentionPicker, filterPeople, peopleFrom } from "../mention-picker.js";
+import { runFormatted } from "../format-command.js";
+
+// clay.people's own id grammar (plugins/people.js): a mention keeps an id the registry made.
+const ID = /^[A-Za-z0-9_-]{8,64}$/;
+const TRIGGER = "@";
+const QUERY_MAX = 100;
+
+export function createFeature({ view = null } = {}) {
+  if (!view) return { run: () => ({ ok: false, code: "not-editing" }), dispose() {} };
+  const doc = view.dom.ownerDocument;
+  const registry = () => globalThis.clay?.people ?? null;
+  let session = null;
+
+  // The query the picker belongs to, read from the document again on every keystroke and
+  // again at the commit: a deleted @, a caret that left the block or a peer that replaced
+  // the text means the bookmark no longer holds, and the command refuses rather than
+  // handing the person whoever took that place.
+  function bookmark(s) {
+    const st = view.state;
+    if (!st.selection.empty) return null;
+    const head = st.selection.head;
+    if (head <= s.from || head - s.from > QUERY_MAX + 1 || head > st.doc.content.size) return null;
+    const $from = st.doc.resolve(s.from);
+    if (!$from.parent.isTextblock || $from.parent.type.spec.code) return null;
+    if (head > $from.end() || head < $from.start()) return null;
+    // The @ has to start a word: the beginning of a block, or after a space.
+    if ($from.parentOffset && !/\s/.test(st.doc.textBetween(s.from - 1, s.from, "", "\n"))) return null;
+    if (st.doc.textBetween(s.from, s.from + 1) !== TRIGGER) return null;
+    return { head, query: st.doc.textBetween(s.from + 1, head) };
+  }
+
+  // Where the list hangs, in the page's own placement variables. A view that cannot measure
+  // the caret (one outside a laid-out document) still gets its list, just not positioned.
+  function place(s) {
+    try {
+      const box = view.dom.parentElement?.getBoundingClientRect?.() ?? { left: 0, top: 0 };
+      const at = view.coordsAtPos(s.from);
+      return { x: Math.max(8, at.left - box.left), y: at.bottom + 6 - box.top };
+    } catch {
+      return null;
+    }
+  }
+
+  function anchor(s) {
+    const id = s.picker.activeId();
+    if (id) view.dom.setAttribute("aria-activedescendant", id);
+    else if (view.dom.getAttribute("aria-activedescendant")?.startsWith(s.picker.el.id)) view.dom.removeAttribute("aria-activedescendant");
+  }
+
+  function draw(s) {
+    s.picker.show(filterPeople(peopleFrom(s.saved, s.allowed), s.query), place(s));
+    anchor(s);
+  }
+
+  function close() {
+    const s = session;
+    if (!s) return;
+    session = null;
+    for (const [target, type, fn, options] of s.listen) target.removeEventListener(type, fn, options);
+    if (view.dom.getAttribute("aria-activedescendant")?.startsWith(`${s.picker.el.id}-`)) view.dom.removeAttribute("aria-activedescendant");
+    s.picker.destroy();
+  }
+
+  function refresh() {
+    const s = session;
+    if (!s || view.composing) return;
+    const at = bookmark(s);
+    if (!at) return close();
+    s.query = at.query;
+    draw(s);
+  }
+
+  async function choose(index) {
+    const s = session;
+    if (!s) return { ok: false, code: "not-editing" };
+    const person = s.picker.personAt(index);
+    const at = bookmark(s);
+    const usable = person && at && at.query === s.query && ID.test(String(person.id ?? "")) && String(person.name ?? "").trim();
+    if (!usable) {
+      close();
+      return { ok: false, code: person ? "stale-target" : "no-person" };
+    }
+    const label = String(person.name).trim();
+    close();
+    // The gate awaits, so the bookmark is read again here: a caret that moved, a query that
+    // changed or a block that went away means the target no longer holds and nothing is
+    // written.
+    return runFormatted(view, () => {
+      const now = bookmark(s);
+      if (!now || now.query !== s.query) return { ok: false, code: "stale-target" };
+      // One transaction: the revalidated query becomes the name and its mark, then one
+      // unmarked space so typing at the edge of a mention stays plain text.
+      const tr = view.state.tr.insertText(label, s.from, now.head);
+      tr.addMark(s.from, s.from + label.length, schema.marks.mention.create({ id: person.id }));
+      tr.insertText(" ", s.from + label.length);
+      tr.setSelection(state.TextSelection.create(tr.doc, s.from + label.length + 1));
+      view.dispatch(asStep(tr));
+      view.focus();
+      return { ok: true, id: person.id, label };
+    });
+  }
+
+  function key(event) {
+    const s = session;
+    if (!s || composing(event, view)) return;
+    const stop = () => { event.preventDefault(); event.stopPropagation(); };
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      stop();
+      s.picker.move(event.key === "ArrowDown" ? 1 : -1);
+      anchor(s);
+    } else if (event.key === "Enter") {
+      stop();
+      choose(s.picker.index());
+    } else if (event.key === "Escape" || event.key === "Tab") {
+      stop();
+      close();
+    }
+  }
+
+  // The host's list arrives after the picker is already up: the people the document names
+  // show first, and a failed or missing list leaves exactly those. Neither presence nor an
+  // account lookup is a source of candidates.
+  function roster(s) {
+    const available = registry()?.available;
+    if (!available) return;
+    Promise.resolve().then(() => available()).then((allowed) => {
+      if (session !== s) return;
+      s.allowed = Array.isArray(allowed) ? allowed : null;
+      draw(s);
+    }).catch(() => {});
+  }
+
+  function open(from) {
+    close();
+    const picker = createMentionPicker({ document: doc, onPick: (index) => choose(index) });
+    const s = { from, picker, query: "", allowed: null, saved: [], listen: [] };
+    try { s.saved = registry()?.list?.() ?? []; } catch { s.saved = []; }
+    session = s;
+    const listen = (target, type, fn, options) => {
+      target.addEventListener(type, fn, options);
+      s.listen.push([target, type, fn, options]);
+    };
+    listen(doc, "keydown", (event) => key(event), true);
+    listen(view.dom, "input", () => refresh());
+    listen(view.dom, "keyup", () => refresh());
+    listen(view.dom, "compositionend", () => refresh());
+    listen(doc, "mousedown", (event) => { if (!s.picker.el.contains(event.target)) close(); }, true);
+    (view.dom.parentElement ?? doc.body).appendChild(picker.el);
+    const at = bookmark(s);
+    if (!at) {
+      close();
+      return { ok: false, code: "stale-target" };
+    }
+    s.query = at.query;
+    draw(s);
+    roster(s);
+    return { ok: true, picker: true };
+  }
+
+  return {
+    // {from} is the @ the person typed; without one this is the Mention action, which types
+    // that @ at the caret and opens the same picker on it.
+    async run(args = {}) {
+      let from = Number.isInteger(args?.from) ? args.from : null;
+      if (from === null) {
+        const st = view.state;
+        const $from = st.selection.$from;
+        if (!st.selection.empty || !$from.parent.isTextblock || $from.parent.type.spec.code) return { ok: false, code: "stale-target" };
+        from = st.selection.from;
+        const tr = view.state.tr.insertText(TRIGGER);
+        tr.setSelection(state.TextSelection.create(tr.doc, from + 1));
+        view.dispatch(tr);
+      }
+      return open(from);
+    },
+    dispose() { close(); },
+  };
+}

package/src/page/features/registry.js

@@ -0,0 +1,28 @@
+// Which block types each optional feature serves, which node views its part
+// supplies, and how to load it. `module` is the part on the wire (the load meter
+// counts it), and `boot` lists what the page plugin fetches with it before the
+// editor takes input.
+// Literal imports, so the chunk build gives each feature its own files.
+export const FEATURES = {
+  table: { types: ["table"], views: ["table", "table_cell"], module: "page/features/table.js", load: () => import("./table.js") },
+  board: { types: ["board"], module: "page/features/board.js", load: () => import("./board.js") },
+  chart: { types: ["chart"], views: ["chart"], module: "page/features/chart.js", load: () => import("./chart.js") },
+  code: { types: ["code_block"], module: "page/features/code.js", load: () => import("./code.js") },
+  media: { types: ["image", "file"], module: "page/features/media.js", load: () => import("./media.js") },
+  tool: { types: ["tool"], module: "page/features/tool.js", boot: ["page/tools.js", "page/tool-data.js"], load: () => import("./tool.js") },
+};
+
+export const featureForType = (type) => Object.keys(FEATURES).find((id) => FEATURES[id].types.includes(type)) ?? null;
+
+// The optional commands: pickers, import and export, which a reader or a plain text
+// editor never needs. They are a table of their own, out of the block-type scan above, so
+// no document preloads one; the page editor fetches a command the first time somebody
+// asks for it. Each row is one literal import, so the build splits it into its own files
+// and the offline manifest carries them, and `module` is the part on the wire (the load
+// meter counts it). A row lands with the step that gives it a module: a literal import of
+// a file this tree does not have yet would stop the chunk build.
+export const COMMAND_FEATURES = {
+  mentions: { module: "page/features/mentions.js", load: () => import("./mentions.js") },
+  dates: { module: "page/features/dates.js", load: () => import("./dates.js") },
+  emoji: { module: "page/features/emoji.js", load: () => import("./emoji.js") },
+};