@panphora/clayjs 1.15.2 → 1.16.0

package/src/page/awareness.js

@@ -0,0 +1,230 @@
+// Other people's carets on the page.
+//
+// A peer publishes where its selection sits (Document 10 Step 6): `presence`
+// carries a page target, and this module draws it where that text is in *this*
+// tab's document, through the binding's mapping. Nothing here is saved: the
+// decorations are ProseMirror's, the labels are runtime elements, and the only
+// thing this file sends is a target the presence store already coalesces.
+//
+// It loads on its own, after presence is available in an editor, so a reader and
+// an editor that nobody shares with never fetch it.
+import { state, view as pmView } from "../vendor/prosemirror.vendor.js";
+import { encodeSelection, decodeSelection } from "./ybind/awareness.js";
+import { presence as presenceStore } from "../sync/presence-store.js";
+import { PRESENCE_VERSION } from "../sync/presence-target.js";
+import { hostMeta } from "../core/host-meta.js";
+import { styleWithLegacyId } from "../lib/style.js";
+
+const { Plugin, PluginKey } = state;
+const { Decoration, DecorationSet } = pmView;
+
+export const awarenessKey = new PluginKey("page-awareness");
+
+const STYLE_ID = "page-awareness-style";
+const STYLE_CSS = `
+.page-remote-selection { background-color: color-mix(in srgb, var(--page-remote-color, currentColor) 22%, transparent); }
+.page-remote-caret { position: relative; display: inline-block; width: 0; height: 1.1em; vertical-align: text-bottom; }
+.page-remote-caret::before { content: ""; position: absolute; inset-inline-start: -1px; top: 0; bottom: 0; width: 2px; background: var(--page-remote-color, currentColor); }
+.page-remote-name { position: absolute; inset-inline-start: -1px; bottom: 100%; padding: 1px 4px; border-radius: 4px; background: var(--page-remote-color, currentColor); color: #fff; font-size: 10px; line-height: 1.4; white-space: nowrap; pointer-events: none; }
+.page-remote-cell { outline: 2px solid var(--page-remote-color, currentColor); outline-offset: -2px; }
+.page-remote-block { box-shadow: inset 2px 0 0 var(--page-remote-color, currentColor); }
+`;
+
+// A fixed palette, chosen for contrast against both page themes. A peer's id
+// picks the colour; a peer never supplies one.
+const PALETTE = ["#2F5E9E", "#8A3B6E", "#3E6A28", "#8A5A1E", "#5E4596", "#1F5A8A"];
+export const colorOf = (id) => {
+  const text = typeof id === "string" ? id : "";
+  let hash = 0;
+  for (let i = 0; i < text.length; i++) hash = (hash * 31 + text.charCodeAt(i)) >>> 0;
+  return PALETTE[hash % PALETTE.length];
+};
+
+const caretElement = (doc, name, color) => {
+  const bar = doc.createElement("span");
+  bar.className = "page-remote-caret";
+  bar.setAttribute("aria-hidden", "true");
+  bar.style.setProperty("--page-remote-color", color);
+  const tag = doc.createElement("span");
+  tag.className = "page-remote-name";
+  tag.textContent = name;
+  bar.appendChild(tag);
+  return bar;
+};
+
+const labelOf = (person) => (typeof person.name === "string" && person.name.trim() ? person.name.trim() : "Someone");
+
+/**
+ * The decorations one snapshot produces in one document.
+ *
+ * `decode` returns null for anything this tab cannot place — a hidden copy, a
+ * deleted block, a peer's relative position from another document, bytes that do
+ * not decode — and a null is a caret that simply is not drawn.
+ */
+export function decorationsFor({ binding, doc, snapshot, epoch }) {
+  const generation = binding.awareness.generation();
+  const context = { ...binding.awareness.map(), doc };
+  const decorations = [];
+  for (const person of snapshot.people ?? []) {
+    if (person.you) continue;
+    const color = colorOf(person.id);
+    const name = labelOf(person);
+    for (const session of person.sessions ?? []) {
+      if (session.you) continue;
+      const target = session.editing;
+      if (!target || target.kind !== "page" || target.v !== PRESENCE_VERSION) continue;
+      if (target.epoch !== epoch || target.generation !== generation) continue;
+      const spot = decodeSelection(context, target.selection);
+      if (!spot) continue;
+      if (spot.kind === "text") {
+        if (spot.to > spot.from) decorations.push(Decoration.inline(spot.from, spot.to, { class: "page-remote-selection", style: `--page-remote-color:${color}` }));
+        decorations.push(Decoration.widget(spot.to, (view) => caretElement(view.dom.ownerDocument, name, color), { side: 1, key: `caret:${person.id}:${session.id}` }));
+      } else if (spot.kind === "cell") {
+        decorations.push(Decoration.node(spot.from, spot.to, { class: "page-remote-cell", style: `--page-remote-color:${color}` }));
+        decorations.push(Decoration.widget(spot.from + 1, (view) => caretElement(view.dom.ownerDocument, name, color), { side: -1, key: `cell:${person.id}:${session.id}` }));
+      } else if (spot.kind === "blocks") {
+        const [first] = spot.ranges;
+        for (const range of spot.ranges) decorations.push(Decoration.node(range.from, range.to, { class: "page-remote-block", style: `--page-remote-color:${color}` }));
+        decorations.push(Decoration.widget(first.from + 1, (view) => caretElement(view.dom.ownerDocument, name, color), { side: -1, key: `blocks:${person.id}:${session.id}` }));
+      }
+    }
+  }
+  return decorations.length ? DecorationSet.create(doc, decorations) : DecorationSet.empty;
+}
+
+/**
+ * Watch a mounted editor: publish this tab's selection while it is focused and
+ * draw every permitted peer's, one animation frame after anything changed.
+ *
+ * Returns the handle the page's teardown releases. In a reader, or on a host
+ * without page awareness, nothing is installed and nothing is sent.
+ */
+export function createPageAwareness({ binding, view, store = presenceStore, epoch, composing = null, frame = (fn) => requestAnimationFrame(fn), cancel = (handle) => cancelAnimationFrame(handle) }) {
+  if (!binding?.awareness || !view || typeof epoch !== "string" || !epoch) return null;
+  styleWithLegacyId(STYLE_ID, STYLE_CSS, STYLE_ID, ["editor-ui"]);
+  const doc = view.dom.ownerDocument;
+  let disposed = false;
+  let focused = true;
+  let pending = null;
+  const isComposing = () => (composing ? composing() === true : view.composing === true);
+
+  const supported = () => store.getSnapshot().pageAwareness !== false;
+
+  const publish = (state = view.state) => {
+    if (disposed) return;
+    if (!supported() || !focused || isComposing()) {
+      store.setTarget(null);
+      return;
+    }
+    const selection = encodeSelection({ ...binding.awareness.map(), doc: state.doc }, state.selection);
+    if (!selection) {
+      store.setTarget(null);
+      return;
+    }
+    store.setTarget({ kind: "page", v: PRESENCE_VERSION, epoch, generation: binding.awareness.generation(), selection });
+  };
+
+  const rebuild = (next) => {
+    // During composition the peer's decorations stay where they were: replacing
+    // them mid-word would draw over text the person is still forming.
+    if (isComposing()) return awarenessKey.getState(view.state);
+    return decorationsFor({ binding, doc: next.doc, snapshot: store.getSnapshot(), epoch });
+  };
+
+  const plugin = new Plugin({
+    key: awarenessKey,
+    state: {
+      init: (_config, st) => decorationsFor({ binding, doc: st.doc, snapshot: store.getSnapshot(), epoch }),
+      apply: (tr, value, _old, next) => {
+        // Every transaction a person makes publishes, including one that only moved
+        // the caret: the page's dispatch hands the view a state, not a prop update.
+        if (tr.docChanged || tr.selectionSet) publish(next);
+        return tr.docChanged || tr.getMeta(awarenessKey) ? rebuild(next) : value;
+      },
+    },
+    props: {
+      decorations(st) {
+        return awarenessKey.getState(st) ?? DecorationSet.empty;
+      },
+    },
+  });
+
+  const refresh = () => {
+    if (disposed || view.isDestroyed) return;
+    view.dispatch(view.state.tr.setMeta(awarenessKey, true));
+  };
+
+  const schedule = () => {
+    if (disposed || pending !== null || view.isDestroyed) return;
+    pending = frame(() => {
+      pending = null;
+      refresh();
+    });
+  };
+
+  const unsubscribe = store.subscribe((snapshot) => {
+    if (snapshot.pageAwareness === false) store.setTarget(null);
+    schedule();
+  });
+
+  const onFocus = () => { focused = true; publish(); schedule(); };
+  const onBlur = () => { focused = false; store.setTarget(null); };
+  const onHide = () => { store.setTarget(null); };
+  const onCompositionEnd = () => { publish(); schedule(); };
+
+  view.dom.addEventListener("focus", onFocus);
+  view.dom.addEventListener("blur", onBlur);
+  view.dom.addEventListener("compositionend", onCompositionEnd);
+  doc.addEventListener("pagehide", onHide);
+  view.updateState(view.state.reconfigure({ plugins: [...view.state.plugins, plugin] }));
+  publish();
+  schedule();
+
+  return {
+    epoch,
+    refresh,
+    plugin,
+    get decorations() {
+      return awarenessKey.getState(view.state) ?? DecorationSet.empty;
+    },
+    get target() {
+      return store.target ?? null;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      if (pending !== null) { cancel(pending); pending = null; }
+      unsubscribe();
+      view.dom.removeEventListener("focus", onFocus);
+      view.dom.removeEventListener("blur", onBlur);
+      view.dom.removeEventListener("compositionend", onCompositionEnd);
+      doc.removeEventListener("pagehide", onHide);
+      store.setTarget(null);
+      store.releaseTarget();
+      if (!view.isDestroyed) {
+        const plugins = view.state.plugins.filter((candidate) => candidate !== plugin);
+        view.updateState(view.state.reconfigure({ plugins }));
+      }
+    },
+  };
+}
+
+/**
+ * Install page awareness on a mounted editor, if this host offers it: the
+ * document scope the host announced is what a target's epoch names, so peers on
+ * the same document agree without the tab guessing its identity.
+ */
+export async function installPageAwareness({ binding, view, store = presenceStore, meta = null } = {}) {
+  if (!binding?.awareness || !view) return null;
+  const answer = meta ?? (await hostMeta());
+  const extensions = Array.isArray(answer?.extensions) ? answer.extensions : [];
+  store.setCapabilities({
+    supported: extensions.includes("presence"),
+    recordAwareness: extensions.includes("record-awareness-v1"),
+    pageAwareness: extensions.includes("page-awareness-v1"),
+  });
+  if (!extensions.includes("page-awareness-v1")) return null;
+  const epoch = answer.document?.awareness?.scope;
+  if (typeof epoch !== "string" || !epoch) return null;
+  return createPageAwareness({ binding, view, store, epoch });
+}

package/src/page/blocks.js

@@ -6,6 +6,9 @@ import { model, state, view as pmView, commands, history } from "../vendor/prose
 import { schema } from "./schema.js";
 import { REMOTE, newId } from "./model.js";
 import { safeHref, safeSrc } from "./link.js";
+import { flatten, runsOf, unflatten, unitsOf } from "./inline.js";
+import { OPAQUE_MARK, opaqueMark } from "./format-codec.js";
+import { DEFAULTS, MARKS, OPAQUE, envelopeAttrs, envelopeRecord, marksAttrs, marksEntries } from "./projection.js";
 
 const alignOf = (a) => (a === "left" || a === "right" ? a : null);
 
@@ -340,9 +343,12 @@ export function indentBlocks(st, dispatch) {
       const tr = st.tr;
       let end = b;
       for (let k = a; k <= end; k++) end = Math.max(end, ents[k].subEnd);
+      let deep = a - 1;
       for (let k = a; k <= end && sameRun(ents[k], first); k++) {
         tr.setNodeMarkup(ents[k].at, null, { ...ents[k].node.attrs, indent: ents[k].node.attrs.indent + 1 });
+        deep = k;
       }
+      tr.setMeta(MOVE, moveIntent(ents, a, deep, ents[a].at, (e) => (e.i >= a && e.i <= deep ? { indent: e.node.attrs.indent + 1 } : null)));
       dispatch(tr);
     }
     return true;
@@ -352,10 +358,15 @@ export function indentBlocks(st, dispatch) {
   if (dispatch) {
     const { hi } = siblingSpan(ents, a, b);
     const tr = st.tr, from = parentOf(first.node), to = ents[s].node.attrs.id;
+    const adopted = [];
     for (let k = a; k <= hi; k++) {
-      if (parentOf(ents[k].node) === from) tr.setNodeMarkup(ents[k].at, null, { ...ents[k].node.attrs, parent: to });
+      if (parentOf(ents[k].node) !== from) continue;
+      tr.setNodeMarkup(ents[k].at, null, { ...ents[k].node.attrs, parent: to });
+      adopted.push(ents[k].node.attrs.id);
     }
     if (!ents[s].node.attrs.open) tr.setNodeMarkup(ents[s].at, null, { ...ents[s].node.attrs, open: true });
+    const intent = moveIntent(ents, a, hi, ents[a].at, (e) => (e.i >= a && e.i <= hi && parentOf(e.node) === from ? { parent: to } : null));
+    tr.setMeta(MOVE, { ...intent, ids: adopted, attrs: ents[s].node.attrs.open ? intent.attrs : { ...intent.attrs, [to]: { open: true } } });
     dispatch(tr);
   }
   return true;
@@ -369,16 +380,22 @@ export function outdentBlocks(st, dispatch) {
   const first = ents[a];
   if (isList(first.node) && first.node.attrs.indent > 0) {
     if (dispatch) {
+      const { lo, hi } = siblingSpan(ents, a, b);
       const tr = st.tr;
+      const lowered = new Set();
       for (let k = a; k <= b;) {
         const e = ents[k];
         if (isList(e.node) && e.node.attrs.indent > 0) {
           for (let m = k; m <= e.subEnd; m++) {
-            if (isList(ents[m].node)) tr.setNodeMarkup(ents[m].at, null, { ...ents[m].node.attrs, indent: ents[m].node.attrs.indent - 1 });
+            if (isList(ents[m].node)) {
+              tr.setNodeMarkup(ents[m].at, null, { ...ents[m].node.attrs, indent: ents[m].node.attrs.indent - 1 });
+              lowered.add(m);
+            }
           }
         }
         k = e.subEnd + 1;
       }
+      tr.setMeta(MOVE, moveIntent(ents, lo, hi, ents[lo].at, (e) => (lowered.has(e.i) ? { indent: e.node.attrs.indent - 1 } : null)));
       dispatch(tr);
     }
     return true;
@@ -395,6 +412,7 @@ export function outdentBlocks(st, dispatch) {
     if (hi === end) {
       const tr = st.tr;
       for (let k = lo; k <= hi; k++) { const c = attrs(ents[k]); if (c) tr.setNodeMarkup(ents[k].at, null, { ...ents[k].node.attrs, ...c }); }
+      tr.setMeta(MOVE, moveIntent(ents, lo, hi, ents[lo].at, attrs));
       dispatch(tr);
     } else dispatch(moveSpanTr(st, ents, lo, hi, ents[end].end, attrs).scrollIntoView());
   }
@@ -481,7 +499,13 @@ export function exitToggleOnEmpty(st, dispatch) {
   const i = $from.index(0);
   const ti = ents.findIndex((x) => x.node.attrs.id === t);
   if (ti < 0 || ents[ti].subEnd !== i) return false;
-  if (dispatch) dispatch(st.tr.setNodeMarkup(ents[i].at, null, { ...$from.parent.attrs, parent: parentOf(ents[ti].node) }));
+  if (dispatch) {
+    const id = ents[i].node.attrs.id, to = parentOf(ents[ti].node);
+    const prev = i > 0 ? ents[i - 1].node : null;
+    const tr = st.tr.setNodeMarkup(ents[i].at, null, { ...$from.parent.attrs, parent: to });
+    tr.setMeta(MOVE, { ids: [id], afterId: prev ? prev.attrs.id : null, parent: parentOf(prev ?? ents[i].node), attrs: { [id]: { parent: to } } });
+    dispatch(tr);
+  }
   return true;
 }
 
@@ -1024,8 +1048,41 @@ export function flattenPastedHTML(html, doc = globalThis.document) {
 const numberAttr = (value, min = 0) => value !== null && value !== "" && Number.isInteger(+value) && +value >= min ? +value : null;
 const parentAttr = (dom) => dom.getAttribute("data-page-parent") || null;
 
+// A copied opaque mark is not one of the schema's marks, so the rules of the
+// clipboard parser resolve mark names through a view of the schema that holds
+// the internal one; every node a parse builds is the schema's own.
+const opaqueType = opaqueMark([]).type;
+const parseSchema = Object.create(schema, { marks: { value: { ...schema.marks, [OPAQUE_MARK]: opaqueType } } });
+
+// The record of a pasted block envelope, or null when it is not one this
+// runtime may keep: a malformed, oversized or hostile envelope, one naming a
+// known block type, or one with no type of its own. A pasted element with no
+// usable record is plain text, never a record this runtime made up.
+const pastedRecord = (dom) => {
+  let record;
+  try { record = envelopeRecord(dom); } catch { return null; }
+  if (!record || typeof record.t !== "string" || record.t === "opaque_block" || Object.hasOwn(DEFAULTS, record.t)) return null;
+  return record;
+};
+const pastedOpaque = (dom) => {
+  const record = pastedRecord(dom);
+  if (!record) return false;
+  return { raw: record, parent: parentAttr(dom) };
+};
+const pastedOpaqueContent = (dom) => {
+  const record = pastedRecord(dom);
+  if (!record || typeof record.c !== "string" || !record.c) return model.Fragment.empty;
+  const units = unitsOf(record.m, record.c.length);
+  return model.Fragment.from(unflatten(schema, record.c, units, schema.nodes.opaque_block));
+};
+const pastedOpaqueMarks = (dom) => {
+  try { return { entries: marksEntries(dom.getAttribute(MARKS)) }; } catch { return false; }
+};
+
 // The clipboard parser: the schema has toDOM only, so paste gets its own rules.
-export const clipboardParser = new model.DOMParser(schema, [
+export const clipboardParser = new model.DOMParser(parseSchema, [
+  { tag: `div[${OPAQUE}]`, node: "opaque_block", getAttrs: pastedOpaque, getContent: pastedOpaqueContent },
+  { tag: `span[${MARKS}]`, mark: OPAQUE_MARK, getAttrs: pastedOpaqueMarks },
   { tag: "div[data-page-li]", node: "list_item", getAttrs: (d) => ({ kind: d.getAttribute("data-kind") || "bullet", indent: +d.getAttribute("data-indent") || 0, checked: d.getAttribute("data-checked") === "true", parent: parentAttr(d) }) },
   { tag: "div.page-li", node: "list_item", getAttrs: (d) => ({ kind: d.getAttribute("data-kind") || "bullet", indent: +d.getAttribute("data-indent") || 0, checked: d.getAttribute("data-checked") === "true", parent: parentAttr(d) }) },
   { tag: "div[data-page-toggle]", node: "toggle", getAttrs: (d) => ({ id: d.getAttribute("data-page-toggle"), open: d.getAttribute("data-open") === "true", parent: parentAttr(d) }) },
@@ -1115,7 +1172,24 @@ class ClipboardSerializer extends model.DOMSerializer {
   }
 }
 const base = model.DOMSerializer.fromSchema(schema);
-export const clipboardSerializer = new ClipboardSerializer(base.nodes, base.marks);
+
+// A copied block this runtime has no schema for keeps its record in the
+// projection's block envelope, with its own text as the readable fallback, and
+// a copied opaque mark keeps its descriptors in the marks envelope. The record
+// is the one the saved article keeps: its own type, every field it carried, and
+// its text with its marks.
+const opaqueRecord = (node) => {
+  const { t, ...rest } = node.attrs.raw ?? {};
+  const { c, m } = flatten(node.content);
+  if (!c) return { t, ...rest };
+  return { t, ...rest, c, ...(m.some(Boolean) ? { m: runsOf(m) } : {}) };
+};
+const opaqueNode = (node) => ["div", { "data-type": "newer-format", ...envelopeAttrs(opaqueRecord(node)) }, 0];
+const opaqueMarks = (mark) => ["span", marksAttrs(mark.attrs.entries), 0];
+const clipboardNodes = { ...base.nodes, opaque_block: opaqueNode };
+const clipboardMarks = { ...base.marks, [OPAQUE_MARK]: opaqueMarks };
+
+export const clipboardSerializer = new ClipboardSerializer(clipboardNodes, clipboardMarks);
 
 // Several blocks pasted into a closed toggle's summary join its body, so the
 // toggle opens first instead of hiding what was just pasted.

package/src/page/blocksel.js

@@ -8,6 +8,7 @@ import { schema } from "./schema.js";
 import { outline, siblingSpan, touchedBlocks, BlockSelection, STEP } from "./blocks.js";
 import { keysBetween, newId, orderedIds, REMOTE } from "./model.js";
 import { announce } from "./announce.js";
+import { rectKey } from "./table-rect-key.js";
 
 const { Selection, TextSelection, NodeSelection, Plugin, PluginKey } = state;
 const N = schema.nodes;
@@ -145,14 +146,29 @@ export function exitToText(st, dispatch) {
   return true;
 }
 
+// The top-level table holding both ends of the selection, as block boundaries.
+const tableAround = ({ $from, $to }) => {
+  if ($from.depth < 2 || $to.depth < 2) return null;
+  const node = $from.node(1);
+  return node.type.name === "table" && $to.node(1) === node ? { from: $from.before(1), to: $from.after(1) } : null;
+};
+
+// Mod-a widens one step at a time: the text of the block or table cell, then the table
+// around a cell, then every block.
 export function selectAllBlocks(st, dispatch) {
-  const { $from, $to } = st.selection;
-  const one = $from.depth === 1 && $from.sameParent($to);
-  const whole = one && $from.parentOffset === 0 && $to.parentOffset === $to.parent.content.size;
-  if (one && !whole && $from.parent.content.size) {
+  const sel = st.selection;
+  const { $from, $to } = sel;
+  const inText = $from.parent.isTextblock && $from.sameParent($to) && !rectKey.getState(st);
+  const whole = inText && $from.parentOffset === 0 && $to.parentOffset === $to.parent.content.size;
+  if (inText && !whole && $from.parent.content.size) {
     if (dispatch) dispatch(st.tr.setSelection(TextSelection.create(st.doc, $from.start(), $from.end())));
     return true;
   }
+  const table = tableAround(sel);
+  if (table && !(sel instanceof BlockSelection && sel.from === table.from && sel.to === table.to)) {
+    if (dispatch) dispatch(st.tr.setSelection(new BlockSelection(st.doc.resolve(table.from), st.doc.resolve(table.to))));
+    return true;
+  }
   if (dispatch) dispatch(st.tr.setSelection(new BlockSelection(st.doc.resolve(0), st.doc.resolve(st.doc.content.size))));
   return true;
 }

package/src/page/board-face.js

@@ -0,0 +1,13 @@
+// The small board pieces the checklist and the board view and panel share, so
+// the board's own view part can load without them.
+export function el(doc, tag, cls, attrs = {}, text = null) {
+  const node = doc.createElement(tag);
+  if (cls) node.className = cls;
+  for (const [key, value] of Object.entries(attrs)) if (value !== null && value !== undefined && value !== false) node.setAttribute(key, value === true ? "" : String(value));
+  if (text !== null) node.textContent = text;
+  return node;
+}
+
+export const initialOf = (name) => ([...String(name).trim()][0] ?? "?").toUpperCase();
+
+export const cardFace = (doc, name) => el(doc, "span", "page-board-face", { "aria-hidden": "true" }, initialOf(name));

package/src/page/board-panel.js

@@ -1,16 +1,16 @@
-import { state } from "../vendor/prosemirror.vendor.js";
 import { schema } from "./schema.js";
 import { announce } from "./announce.js";
-import { BOARD_ICONS, el, iconButton, boardOf, cardFace, dueLabel, dueState, todayKey, placeAfter } from "./board-view.js";
+import { BOARD_ICONS, iconButton, boardOf, dueLabel, dueState, todayKey, placeAfter } from "./board-view.js";
+import { el, cardFace } from "./board-face.js";
+import { cardPanels } from "./board-views.js";
 
 const NARROW = "(max-width: 1039.98px)";
 const isTyping = (target) => /^(INPUT|TEXTAREA|SELECT)$/.test(target?.tagName ?? "");
-const panels = new WeakMap();
 let count = 0;
 
 export function cardPanel(view) {
-  if (!panels.has(view)) panels.set(view, new CardPanel(view));
-  return panels.get(view);
+  if (!cardPanels.has(view)) cardPanels.set(view, new CardPanel(view));
+  return cardPanels.get(view);
 }
 
 export class CardPanel {
@@ -339,15 +339,3 @@ export class CardPanel {
     }
   }
 }
-
-export function boardPlugin() {
-  return new state.Plugin({
-    view: (view) => ({
-      update: () => panels.get(view)?.sync(),
-      destroy: () => {
-        panels.get(view)?.hide(false, false);
-        panels.delete(view);
-      },
-    }),
-  });
-}

package/src/page/board-style.js

@@ -21,7 +21,6 @@ export const BOARD_CSS = `
 .page-board-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--page-ink-soft); font-size: 13px; line-height: 20px; }
 .page-board-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
 .page-board-owner-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.page-board-face { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--page-code-bg); box-shadow: inset 0 0 0 1px var(--page-rule); color: var(--page-ink-soft); font-size: 10.5px; font-weight: 600; line-height: 1; }
 .page-board-due { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
 .page-board-due[data-due="today"] { color: var(--page-ink); font-weight: 500; }
 .page-board-due[data-due="overdue"] { color: var(--page-ink); }
@@ -95,14 +94,6 @@ export const BOARD_CSS = `
 .page-board-control .page-board-due + .page-board-due-note { margin-inline-start: auto; }
 .page-board-control .page-board-due-note + .i { margin-inline-start: 0; }
 .page-board-date { border: 1px solid var(--page-pop-line); cursor: text; }
-.page-board-owners { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-inline: 8px; }
-.page-board-people { display: flex; flex-wrap: wrap; gap: 4px; }
-.page-board-person { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border: 1px solid var(--page-rule); border-radius: 14px; background: var(--page-pop-bg); color: var(--page-pop-ink); font: inherit; font-size: 13px; cursor: pointer; transition: background-color var(--page-fade), border-color var(--page-fade); }
-.page-board-person.is-none { padding-inline-start: 10px; color: var(--page-pop-muted); }
-.page-board-person:hover { background: var(--page-pop-hover); }
-.page-board-person[aria-pressed="true"] { border-color: var(--page-accent); background: var(--page-selection); color: var(--page-pop-ink); }
-.page-board-owner-input { width: 100%; height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--page-pop-line); border-radius: 7px; background: var(--page-pop-bg); color: var(--page-pop-ink); font: inherit; font-size: 14px; }
-.page-board-owner-input::placeholder { color: var(--page-ink-faint); }
 .page-board-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
 .page-board-delete { margin-inline-start: auto; border-color: transparent; color: var(--page-pop-muted); }
 .page-board-delete:hover { background: var(--page-pop-hover); color: var(--page-danger); }
@@ -135,12 +126,10 @@ export const BOARD_CSS = `
   .page-board-rename { height: 44px; margin-block: -12px; font-size: 16px; }
   .page-board-panel { border-width: 1px 0 0; }
   .page-board-panel-title { margin-top: -8px; padding-block: 8px; }
-  .page-board-control, .page-board-owner-input { font-size: 16px; }
+  .page-board-control { font-size: 16px; }
   .page-board-label { font-size: 15px; }
-  .page-board-person { height: 44px; border-radius: 22px; }
-  .page-board-owner-input { height: 44px; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .page-board-icon, .page-board-card, .page-board-add, .page-board-addcol, .page-board-btn, .page-board-control, .page-board-person { transition: none; }
+  .page-board-icon, .page-board-card, .page-board-add, .page-board-addcol, .page-board-btn, .page-board-control { transition: none; }
 }
 `;

package/src/page/board-view.js

@@ -2,6 +2,7 @@ import { schema } from "./schema.js";
 import { orderedIds } from "./model.js";
 import { announce } from "./announce.js";
 import { BoardDrag } from "./board-drag.js";
+import { el, cardFace } from "./board-face.js";
 
 const N = schema.nodes;
 const boardViews = new WeakMap();
@@ -24,14 +25,6 @@ export const BOARD_ICONS = {
   restore: svg('<path d="M3.5 8a4.5 4.5 0 1 0 1.32-3.18M3.5 2.75v2.5H6"/>'),
 };
 
-export function el(doc, tag, cls, attrs = {}, text = null) {
-  const node = doc.createElement(tag);
-  if (cls) node.className = cls;
-  for (const [key, value] of Object.entries(attrs)) if (value !== null && value !== undefined && value !== false) node.setAttribute(key, value === true ? "" : String(value));
-  if (text !== null) node.textContent = text;
-  return node;
-}
-
 export function iconButton(doc, cls, icon, label, attrs = {}) {
   const button = el(doc, "button", cls, { type: "button", ...attrs });
   button.innerHTML = BOARD_ICONS[icon];
@@ -61,7 +54,6 @@ export function dueLabel(due, today = todayKey(), long = false) {
   const sameYear = due.slice(0, 4) === today.slice(0, 4);
   return new Date(`${due}T00:00:00Z`).toLocaleDateString("en-US", { ...(long ? { weekday: "short" } : {}), month: "short", day: "numeric", ...(sameYear ? {} : { year: "numeric" }), timeZone: "UTC" });
 }
-export const initialOf = (name) => ([...String(name).trim()][0] ?? "?").toUpperCase();
 export const placeAfter = (ids, index) => (index >= 2 ? ids[index - 2] : null);
 const countOf = (doc, n) => el(doc, "span", "page-board-count", { "aria-label": `${n} ${n === 1 ? "card" : "cards"}` }, String(n));
 const isTyping = (target) => /^(INPUT|TEXTAREA|SELECT)$/.test(target?.tagName ?? "");
@@ -75,8 +67,6 @@ function dueBadge(doc, due) {
   return badge;
 }
 
-export const cardFace = (doc, name) => el(doc, "span", "page-board-face", { "aria-hidden": "true" }, initialOf(name));
-
 export class BoardView {
   constructor(node, view, getPos, { commands = null, undo = null, redo = null, panel = null } = {}) {
     this.node = node;

package/src/page/board-views.js

@@ -0,0 +1,17 @@
+import { state } from "../vendor/prosemirror.vendor.js";
+
+// The card panels a board plugin can reach, filled by the board view part when it
+// loads. The plugin works, and does nothing, for a board without a panel.
+export const cardPanels = new WeakMap();
+
+export function boardPlugin() {
+  return new state.Plugin({
+    view: (view) => ({
+      update: () => cardPanels.get(view)?.sync(),
+      destroy: () => {
+        cardPanels.get(view)?.hide(false, false);
+        cardPanels.delete(view);
+      },
+    }),
+  });
+}

package/src/page/board.js

@@ -20,10 +20,10 @@ export function makeBoard(names = BOARD_COLUMNS) {
 // The board takes the place of an empty line, otherwise it goes after the
 // line's whole subtree at the line's own level. An empty paragraph follows it
 // and holds the caret, so typing goes on below the board.
-export function insertBoardNode(st, dispatch, board = makeBoard(), remove = null) {
+export function insertBoardNode(st, dispatch, board = makeBoard(), remove = null, index = null) {
   const tr = st.tr;
   if (remove) tr.delete(remove.from, remove.to);
-  const index = tr.doc.resolve(tr.mapping.map(st.selection.head)).index(0);
+  index ??= tr.doc.resolve(tr.mapping.map(st.selection.head)).index(0);
   const ents = outline(tr.doc);
   const line = tr.doc.child(index);
   const empty = line.isTextblock && line.content.size === 0;

package/src/page/boot-pack.js

@@ -0,0 +1,26 @@
+// The page's boot code in one module: the page code and the chrome, recovery and title
+// code beside it arrive through this file's static graph, and the plugin fetches it with
+// one dynamic import. Loading the parts together is what keeps a module they share from
+// being linked by two dynamic imports at once, and it is one download for a boot that
+// needs them all. The parts a page chooses from its own tag (a table, a board, media, a
+// tool) stay separate dynamic imports, issued once this has resolved.
+//
+// The editor is a download of its own, and it starts here rather than after this file
+// so its fetch runs beside the page code's. It is not awaited: the page code, and the
+// room participant the binding registers, must be ready while the editor is still on
+// the wire. Its static graph is linked by the time this body runs, so the vendor it
+// shares with the page code is already in cache when its own link begins.
+export { installAdoption, ADOPTION_TIMEOUT_MS } from "./adopt-boot.js";
+export { classifyFile, readBack } from "./adopt.js";
+export { mergePageModels } from "./merge.js";
+export { canon } from "./projection.js";
+export { renderFromTags } from "./save-projection.js";
+export { blocksFromYValue } from "./ybind/decode.js";
+export { createYPageBinding } from "./ybind/binding.js";
+export { yValueOf } from "./ybind/provider.js";
+export { seedPageFromArticle } from "./ybind/migrate.js";
+export { holdSlashRange, heldSlashRange } from "./chrome.js";
+export { createRecoverList, focusBlock } from "./recover.js";
+export { observeDocumentTitle } from "./document-title-runtime.js";
+export { createFeatureLoader } from "./feature-loader.js";
+import("./editor.js").catch(() => null);