@panphora/clayjs 1.23.0 → 1.24.1

package/src/page/ai-tool.js

@@ -1,188 +1,351 @@
+// /ai tools as contract A targets: the page's AI surface builds one of these and the
+// shared panel in ai-edit.js drives it. Making a tool and revising one differ only in
+// the request's target and current revision, and in what Keep writes.
 import { state } from "../vendor/prosemirror.vendor.js";
 import { schema } from "./schema.js";
 import { asStep } from "./blocksel.js";
 import { keyBetween, newId } from "./model.js";
 import { createToolClient } from "./rich/page-tool.js";
 import { createToolHost } from "./tools.js";
-import { toolContext } from "./tool-data.js";
+import { tablesFromDoc, toolContext } from "./tool-data.js";
+import { showPreview, showWidget, clearPreview } from "./ai-preview.js";
+import { validateArtifact, validateState } from "./rich/tool-runtime.js";
+import { createToolTransport } from "./tool-transport.js";
+import { toolBlockViews } from "./tool-views.js";
 
 const { Selection } = state;
 
+const GONE = "This page is not open for editing any more.";
+const NO_WIRE = "AI tool making isn't available on this page right now.";
+const NO_STORE = "This document can't save tool data.";
+const MOVED = "The place for this tool moved. Close this and run /ai where you want the tool.";
+const STALE_REVISION = "This tool changed while you were revising, so nothing was replaced. Ask again.";
+const BAD_ARTIFACT = "AI did not make a usable tool. Try again.";
+const BAD_STATE = "The tool data from AI is too large or not usable. Try again.";
+const CHANGED = "This tool's data changed while AI was working, so it was not replaced. Ask again to include the latest data.";
+const SAVE_FAILED = "The tool could not be saved, so it was not added. Try again.";
+const UNSAVED = "Your tool is in the document, but saving failed. It will be saved with your next edit.";
+
 function findBlock(doc, id) {
   let found = null;
   doc.forEach((node, at, index) => { if (node.attrs.id === id) found = { node, at, index }; });
   return found;
 }
 
+// The block the /ai was typed in and the text of that query. Keep uses it to place the
+// tool and to remove exactly the slash text, never a caret that moved meanwhile.
+function bookmarkIn(st, remove) {
+  const $head = st.selection.$head;
+  const index = Math.min(Math.max($head.index(0), 0), st.doc.childCount - 1);
+  const host = st.doc.child(index);
+  return {
+    hostId: host?.attrs.id ?? null,
+    slashText: remove ? st.doc.textBetween(remove.from, remove.to) : null,
+    slashOffset: remove && $head.depth ? remove.from - $head.before(1) - 1 : null,
+  };
+}
+
+// Where the tool goes: over an empty or slash-only block, else in a new block after it.
+function placeIn(st, bookmark) {
+  const found = bookmark?.hostId ? findBlock(st.doc, bookmark.hostId) : null;
+  if (!found) return null;
+  const next = st.doc.maybeChild(found.index + 1);
+  const replace = found.node.isTextblock && (found.node.content.size === 0 || found.node.textContent === bookmark.slashText);
+  return {
+    ...found,
+    replace,
+    pos: replace ? found.node.attrs.pos : keyBetween(found.node.attrs.pos, next?.attrs.pos ?? null),
+    insertAt: replace ? found.at : found.at + found.node.nodeSize,
+  };
+}
+
 function insertCandidate(view, candidate, bookmark) {
   const st = view.state;
-  const found = findBlock(st.doc, bookmark?.hostId) ?? (() => {
-    const index = Math.min(st.selection.$head.index(0), st.doc.childCount - 1);
-    let at = 0;
-    for (let i = 0; i < index; i++) at += st.doc.child(i).nodeSize;
-    return { node: st.doc.child(index), at, index };
-  })();
-  const { node: current, at, index } = found;
-  const next = st.doc.maybeChild(index + 1);
-  const replace = current.isTextblock && (current.content.size === 0 || bookmark?.hostId === current.attrs.id && current.textContent === bookmark.slashText);
-  const pos = replace ? current.attrs.pos : keyBetween(current.attrs.pos, next?.attrs.pos ?? null);
+  const place = placeIn(st, bookmark);
+  if (!place) return false;
+  const { node: current, at, insertAt, replace } = place;
   const tool = schema.nodes.tool.create({
-    id: candidate.id, pos, parent: current.attrs.parent ?? null,
+    id: candidate.id, pos: place.pos, parent: current.attrs.parent ?? null,
     artifact: candidate.artifact, rev: candidate.rev, state: candidate.state,
   });
-  const place = replace ? at : at + current.nodeSize;
   const tr = st.tr;
   if (!replace && bookmark?.hostId === current.attrs.id && bookmark.slashText && bookmark.slashOffset >= 0) {
     const from = at + 1 + bookmark.slashOffset;
     const to = from + bookmark.slashText.length;
     if (to <= at + current.nodeSize - 1 && st.doc.textBetween(from, to) === bookmark.slashText) tr.delete(from, to);
   }
-  const mapped = tr.mapping.map(place);
+  const mapped = tr.mapping.map(insertAt);
   tr.replaceWith(mapped, replace ? tr.mapping.map(at + current.nodeSize) : mapped, tool);
   tr.setSelection(Selection.near(tr.doc.resolve(Math.min(mapped + tool.nodeSize, tr.doc.content.size))));
   view.dispatch(asStep(tr).scrollIntoView());
+  return true;
 }
 
-export function createAiTool({ getView, store, transport, acceptState = () => globalThis.clay?.save?.flush?.(), newId: allocate = newId }) {
-  const client = transport ? createToolClient({ transport, newId: () => allocate("request") }) : null;
-  let panel = null;
-  let generation = 0;
-
-  const close = () => {
-    generation++;
-    if (!panel) return;
-    client?.discard(panel.pending);
-    panel.preview?.dispose();
-    panel.previewHost?.dispose();
-    panel.element.remove();
-    panel = null;
-  };
+const emptyRect = () => ({ x: 0, y: 0, left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 });
 
-  const open = ({ target = null, remove = null } = {}) => {
-    close();
+export function createToolTargets({
+  getView,
+  store = () => null,
+  acceptState = () => globalThis.clay?.save?.flush?.(),
+  newId: allocate = newId,
+  transport = createToolTransport(),
+} = {}) {
+  const viewNow = () => {
     const view = getView();
-    if (!view) return;
-    const selection = view.state.selection;
-    const host = view.state.doc.child(Math.min(selection.$head.index(0), view.state.doc.childCount - 1));
-    const bookmark = {
-      hostId: host?.attrs.id,
-      slashText: remove ? view.state.doc.textBetween(remove.from, remove.to) : null,
-      slashOffset: remove && selection.$head.depth ? remove.from - selection.$head.before(1) - 1 : null,
-    };
-    const doc = view.dom.ownerDocument;
-    const element = doc.createElement("section");
-    element.className = "page-ai-panel";
-    element.contentEditable = "false";
-    element.setAttribute("role", "dialog");
-    element.setAttribute("aria-label", target ? "Revise tool" : "Make a tool with AI");
-    const input = doc.createElement("textarea");
-    input.setAttribute("aria-label", "Describe the tool");
-    input.placeholder = target ? "What should change?" : "Describe the tool you want";
-    const status = doc.createElement("p");
-    status.className = "page-ai-status";
-    const previewRoot = doc.createElement("div");
-    previewRoot.className = "page-ai-preview";
-    const actions = doc.createElement("div");
-    actions.className = "page-ai-actions";
-    element.append(input, status, previewRoot, actions);
-    view.dom.parentElement.append(element);
-    panel = { element, input, status, previewRoot, actions, target, bookmark, candidate: null, pending: null, preview: null, previewHost: null, kept: false, busy: false };
-
-    const button = (label, run) => {
-      const el = doc.createElement("button");
-      el.type = "button";
-      el.textContent = label;
-      el.addEventListener("click", run);
-      actions.append(el);
-    };
-    const showPrompt = () => {
-      if (!panel) return;
-      panel.preview?.dispose();
-      panel.previewHost?.dispose();
-      panel.preview = null;
-      panel.previewHost = null;
-      panel.previewRoot.replaceChildren();
-      panel.input.hidden = false;
-      panel.actions.replaceChildren();
-      button("Generate", generate);
-      button("Cancel", close);
-      panel.input.focus();
+    return view && !view.isDestroyed ? view : null;
+  };
+  const storeNow = () => (typeof store === "function" ? store() : store);
+
+  const liveState = (id, rev) => {
+    const value = storeNow()?.data?.[id]?.[rev];
+    return value === undefined ? {} : value;
+  };
+
+  const targets = new Map();
+
+  const canonical = (value) => {
+    if (Array.isArray(value)) return `[${value.map(canonical).join(",")}]`;
+    if (value && typeof value === "object") {
+      const keys = Object.keys(value).sort();
+      return `{${keys.map((key) => `${JSON.stringify(key)}:${canonical(value[key])}`).join(",")}}`;
+    }
+    return JSON.stringify(value) ?? "null";
+  };
+
+  function toolTarget(toolId = null, remove = null) {
+    const opened = viewNow();
+    const bookmark = toolId || !opened ? null : bookmarkIn(opened.state, remove);
+    let onStatus = null;
+    const client = createToolClient({
+      transport: {
+        request: (request) => transport.request(request, { onStatus: (status) => onStatus?.(status) }),
+        cancel: (id) => transport.cancel(id),
+      },
+    });
+    let pending = null;
+    let candidate = null;
+    let preview = null;
+    let kept = false;
+    let revision = null;
+    let captured = null;
+
+    const disposePreview = () => {
+      preview?.host?.dispose();
+      preview = null;
     };
-    const showCandidate = () => {
-      const p = panel;
-      p.input.hidden = true;
-      p.status.textContent = "";
-      p.previewHost = createToolHost({ mode: "view" });
-      p.preview = p.previewHost.mount(p.previewRoot, { id: "preview", rev: "preview", artifact: p.candidate.artifact, seed: p.candidate.state });
-      p.actions.replaceChildren();
-      button("Keep", keep);
-      button("Revise", showPrompt);
-      button("Discard", close);
+
+    // The block that runs this tool, if this editor mounts it, so a revision can pause
+    // it while the request and its preview are up.
+    const blockNow = () => {
+      const view = viewNow();
+      return view && toolId ? toolBlockViews.get(view)?.get(toolId) ?? null : null;
     };
-    const generate = async () => {
-      const p = panel;
-      if (!p || p.busy || !p.input.value.trim()) return;
-      if (!client) { p.status.textContent = "Tool generation is unavailable"; return; }
-      p.busy = true;
-      p.status.textContent = "Making your tool…";
-      p.actions.replaceChildren();
-      button("Cancel", close);
-      const turn = ++generation;
-      const candidate = client.request(p.input.value.trim(), toolContext(view.state.doc, doc.title), p.target);
-      p.pending = candidate;
-      try {
-        const result = await client.wait(candidate);
-        if (panel !== p || turn !== generation) return;
-        p.candidate = { artifact: result.artifact, state: result.state, id: null, rev: null };
-        showCandidate();
-      } catch (error) {
-        if (panel !== p || turn !== generation) return;
-        p.status.textContent = error.message;
-        p.actions.replaceChildren();
-        button("Generate", generate);
-        button("Cancel", close);
-      } finally { p.busy = false; }
+
+    const suspendTool = () => blockNow()?.suspend();
+    const resumeTool = () => blockNow()?.resume();
+
+    // Every way Keep can fail leaves the same trace: no proposal on screen, the block
+    // and its state as they were, and an editor that answers again.
+    const failKeep = (message) => {
+      kept = false;
+      const view = viewNow();
+      disposePreview();
+      if (view) clearPreview(view);
+      resumeTool();
+      return { status: "failed", message };
     };
-    const keep = async () => {
-      const p = panel;
-      if (!p?.candidate || p.busy || p.kept) return;
-      p.busy = true;
-      const candidate = p.candidate;
-      candidate.id ??= p.target?.toolId ?? allocate("b");
-      candidate.rev ??= allocate("rev");
-      try {
-        if (!store) throw new Error("This document can't save tool state");
-        await store.set([candidate.id, candidate.rev], candidate.state);
-        const accepted = await acceptState();
+
+    const target = {
+      aiTarget: true,
+      label: toolId ? "This tool" : "New tool",
+      ref: toolId ? [toolId] : [],
+      placeholder: toolId ? "What should change?" : "Describe the tool",
+      get isConnected() {
+        const view = viewNow();
+        if (!view) return false;
+        return toolId ? !!findBlock(view.state.doc, toolId) : true;
+      },
+      getBoundingClientRect() {
+        const view = viewNow();
+        if (!view) return emptyRect();
+        if (preview) return preview.dom.getBoundingClientRect();
+        const id = toolId ?? bookmark?.hostId;
+        const found = id ? findBlock(view.state.doc, id) : null;
+        const node = found ? view.nodeDOM(found.at) : null;
+        return node && typeof node.getBoundingClientRect === "function" ? node.getBoundingClientRect() : emptyRect();
+      },
+      async start(comment) {
+        candidate = null;
+        kept = false;
+        const view = viewNow();
+        if (!view) return { status: "refused", code: "gone", message: GONE };
+        // Read here, not imported: a page with exclude=wire must not pull the wire in.
+        if (!globalThis.window?.clay?.wire) return { status: "refused", code: "no-wire", message: NO_WIRE };
+        let payloadTarget = null;
+        let current = null;
+        if (toolId) {
+          const found = findBlock(view.state.doc, toolId);
+          if (found?.node.type !== schema.nodes.tool) return { status: "refused", code: "gone", message: GONE };
+          revision = found.node.attrs.rev;
+          payloadTarget = { toolId, rev: revision };
+          // The tool must not write to its own data while the request runs or its
+          // preview is shown, so it pauses and the snapshot is taken from its saved data.
+          suspendTool();
+          current = { artifact: found.node.attrs.artifact, state: liveState(toolId, revision) };
+          captured = canonical(current.state);
+        }
+        pending = client.request(comment, toolContext(view.state.doc, view.dom.ownerDocument.title), payloadTarget, current);
+        return {
+          status: "ok",
+          id: pending.requestId,
+          send: (hooks = {}) => {
+            onStatus = typeof hooks.onStatus === "function" ? hooks.onStatus : null;
+            const done = client.wait(pending).then(
+              (result) => {
+                candidate = { id: toolId, rev: null, artifact: result.artifact, state: result.state };
+                return { state: "done", result };
+              },
+              (error) => {
+                resumeTool();
+                return { state: "error", error: error?.message || error?.code || "the helper reported an error", code: error?.code ?? null };
+              },
+            );
+            return { done, cancel: () => { resumeTool(); client.discard(pending); } };
+          },
+        };
+      },
+      async propose(result) {
+        const view = viewNow();
+        if (!view || !result) return { status: "refused", message: GONE };
+        const artifact = validateArtifact(result.artifact);
+        if (!artifact.ok) return { status: "refused", message: BAD_ARTIFACT };
+        const held = validateState(result.state);
+        if (!held.ok) return { status: "refused", message: BAD_STATE };
+        candidate = { id: toolId, rev: null, artifact: result.artifact, state: result.state };
+        const mounted = mountPreview(view);
+        if (mounted.status !== "ready") candidate = null;
+        return mounted;
+      },
+      async keep() {
+        if (!candidate || kept) return failKeep(STALE_REVISION);
+        const view = viewNow();
+        if (!view) return failKeep(GONE);
+        const tools = storeNow();
+        if (!tools) return failKeep(NO_STORE);
+        const liveChanged = () => toolId && captured !== null && canonical(liveState(toolId, revision)) !== captured;
+        if (liveChanged()) return failKeep(CHANGED);
+        kept = true;
+        const id = candidate.id ?? allocate("b");
+        const rev = allocate("rev");
+        const edit = { ...candidate, id, rev };
+        // Two stages: the state has to be accepted first, and only then does the block
+        // appear, so a refused state leaves no block and one undo item.
+        try {
+          await tools.set([id, rev], edit.state);
+        } catch (error) {
+          return failKeep(error?.message ?? NO_STORE);
+        }
+        let accepted = null;
+        try {
+          accepted = await acceptState();
+        } catch {
+          return failKeep(SAVE_FAILED);
+        }
         if (accepted?.ok !== true && !["saved", "clean"].includes(accepted?.state)) {
-          throw new Error(accepted?.msg ?? accepted?.message ?? "Tool state was not saved");
+          return failKeep(accepted?.msg ?? accepted?.message ?? SAVE_FAILED);
         }
-        if (panel !== p || p.kept) return;
-        if (p.target) {
-          const found = findBlock(view.state.doc, p.target.toolId);
-          if (found?.node.type !== schema.nodes.tool || found.node.attrs.rev !== p.target.rev) {
-            p.status.textContent = "This tool changed while you were revising. Keep as a new tool, or discard.";
-            p.target = null;
-            candidate.id = null;
-            candidate.rev = null;
-            p.actions.replaceChildren();
-            button("Keep as new tool", keep);
-            button("Discard", close);
-            return;
-          }
+        if (toolId) {
+          const found = findBlock(view.state.doc, toolId);
+          if (found?.node.type !== schema.nodes.tool || found.node.attrs.rev !== revision) return failKeep(STALE_REVISION);
+        } else if (!placeIn(view.state, bookmark)) {
+          return failKeep(MOVED);
+        }
+        if (liveChanged()) return failKeep(CHANGED);
+        disposePreview();
+        clearPreview(view);
+        if (toolId) {
+          const found = findBlock(view.state.doc, toolId);
           view.dispatch(asStep(view.state.tr.setNodeMarkup(found.at, null, {
-            ...found.node.attrs, artifact: candidate.artifact, rev: candidate.rev,
+            ...found.node.attrs, artifact: edit.artifact, rev: edit.rev,
           })));
-        } else insertCandidate(view, candidate, p.bookmark);
-        p.kept = true;
-        close();
-      } catch (error) {
-        if (panel === p) p.status.textContent = error.message;
-      } finally { p.busy = false; }
+        } else if (!insertCandidate(view, edit, bookmark)) {
+          return failKeep(MOVED);
+        }
+        // The block is in the document now: a failed save neither undoes it nor asks the
+        // model again, it retries the save alone, once.
+        let saved = false;
+        for (let attempt = 0; attempt < 2 && !saved; attempt++) {
+          try {
+            const result = await acceptState();
+            saved = result?.ok !== false;
+          } catch {
+            saved = false;
+          }
+        }
+        if (!saved) return { status: "failed", message: UNSAVED };
+        targets.delete(toolId ?? "new");
+        return { status: "kept" };
+      },
+      discard() {
+        disposePreview();
+        const view = viewNow();
+        if (view) clearPreview(view);
+        client.discard(pending);
+        resumeTool();
+        targets.delete(toolId ?? "new");
+      },
     };
-    showPrompt();
-    return element;
-  };
 
-  return { open, dispose: close };
+    function mountPreview(view) {
+      disposePreview();
+      const host = createToolHost({
+        mode: "view",
+        tables: () => tablesFromDoc(view.state.doc).map(({ id, cols, rows }) => ({ id, cols, rows })),
+      });
+      const dom = view.dom.ownerDocument.createElement("div");
+      dom.className = "blockeditor-ai-preview";
+      let mounted = null;
+      try {
+        mounted = host.mount(dom, { id: "preview", rev: "preview", artifact: candidate.artifact, seed: candidate.state });
+      } catch (error) {
+        host.dispose();
+        return { status: "refused", message: BAD_ARTIFACT };
+      }
+      if (mounted.failed) {
+        host.dispose();
+        return { status: "refused", message: BAD_ARTIFACT };
+      }
+      preview = { host, dom };
+      // A revision covers the block it replaces; a new tool stands at its bookmark.
+      if (toolId) {
+        showPreview(view, { ids: [toolId], dom });
+        return { status: "ready" };
+      }
+      const place = placeIn(view.state, bookmark);
+      if (!place) {
+        disposePreview();
+        return { status: "refused", message: MOVED };
+      }
+      if (place.replace) showPreview(view, { ids: [place.node.attrs.id], dom });
+      else showWidget(view, { at: place.insertAt, dom });
+      return { status: "ready" };
+    }
+
+    if (toolId) targets.set(toolId, target);
+    return target;
+  }
+
+  return {
+    newTool(remove = null) {
+      return toolTarget(null, remove);
+    },
+    // A revision target follows the block it names: the same tool asked about twice is
+    // the same target, so its draft survives a closed panel.
+    reviseTool(toolId) {
+      const known = targets.get(toolId);
+      if (known?.isConnected) return known;
+      targets.delete(toolId);
+      return toolTarget(toolId);
+    },
+  };
 }

package/src/page/announce.js

@@ -4,7 +4,7 @@ export function announcementPlugin() {
   return new state.Plugin({
     view(view) {
       const live = view.dom.ownerDocument.createElement("div");
-      live.className = "page-live";
+      live.className = "blockeditor-live";
       live.setAttribute("role", "status");
       live.setAttribute("aria-live", "polite");
       view.dom.parentElement.appendChild(live);
@@ -14,7 +14,7 @@ export function announcementPlugin() {
 }
 
 export function announce(view, text) {
-  const region = view.dom.parentElement?.querySelector(".page-live");
+  const region = view.dom.parentElement?.querySelector(".blockeditor-live");
   if (!region) return;
   region.textContent = "";
   region.textContent = text;

package/src/page/awareness.js

@@ -18,16 +18,16 @@ import { styleWithLegacyId } from "../lib/style.js";
 const { Plugin, PluginKey } = state;
 const { Decoration, DecorationSet } = pmView;
 
-export const awarenessKey = new PluginKey("page-awareness");
+export const awarenessKey = new PluginKey("blockeditor-awareness");
 
-const STYLE_ID = "page-awareness-style";
+const STYLE_ID = "blockeditor-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); }
+.blockeditor-remote-selection { background-color: color-mix(in srgb, var(--blockeditor-remote-color, currentColor) 22%, transparent); }
+.blockeditor-remote-caret { position: relative; display: inline-block; width: 0; height: 1.1em; vertical-align: text-bottom; }
+.blockeditor-remote-caret::before { content: ""; position: absolute; inset-inline-start: -1px; top: 0; bottom: 0; width: 2px; background: var(--blockeditor-remote-color, currentColor); }
+.blockeditor-remote-name { position: absolute; inset-inline-start: -1px; bottom: 100%; padding: 1px 4px; border-radius: 4px; background: var(--blockeditor-remote-color, currentColor); color: #fff; font-size: 10px; line-height: 1.4; white-space: nowrap; pointer-events: none; }
+.blockeditor-remote-cell { outline: 2px solid var(--blockeditor-remote-color, currentColor); outline-offset: -2px; }
+.blockeditor-remote-block { box-shadow: inset 2px 0 0 var(--blockeditor-remote-color, currentColor); }
 `;
 
 // A fixed palette, chosen for contrast against both page themes. A peer's id
@@ -42,11 +42,11 @@ export const colorOf = (id) => {
 
 const caretElement = (doc, name, color) => {
   const bar = doc.createElement("span");
-  bar.className = "page-remote-caret";
+  bar.className = "blockeditor-remote-caret";
   bar.setAttribute("aria-hidden", "true");
-  bar.style.setProperty("--page-remote-color", color);
+  bar.style.setProperty("--blockeditor-remote-color", color);
   const tag = doc.createElement("span");
-  tag.className = "page-remote-name";
+  tag.className = "blockeditor-remote-name";
   tag.textContent = name;
   bar.appendChild(tag);
   return bar;
@@ -78,19 +78,19 @@ export function decorationsFor({ binding, doc, snapshot, epoch }) {
     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 || target.kind !== "blockeditor" || 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}` }));
+        if (spot.to > spot.from) decorations.push(Decoration.inline(spot.from, spot.to, { class: "blockeditor-remote-selection", style: `--blockeditor-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.node(spot.from, spot.to, { class: "blockeditor-remote-cell", style: `--blockeditor-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}` }));
+        for (const range of spot.ranges) decorations.push(Decoration.node(range.from, range.to, { class: "blockeditor-remote-block", style: `--blockeditor-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}` }));
       }
     }
@@ -133,7 +133,7 @@ export function createPageAwareness({ binding, view, store = presenceStore, epoc
       store.setTarget(null);
       return;
     }
-    store.setTarget({ kind: "page", v: PRESENCE_VERSION, epoch, generation: binding.awareness.generation(), selection });
+    store.setTarget({ kind: "blockeditor", v: PRESENCE_VERSION, epoch, generation: binding.awareness.generation(), selection });
   };
 
   const rebuild = (next) => {
@@ -252,9 +252,9 @@ export async function installPageAwareness({ binding, view, store = presenceStor
   store.setCapabilities({
     supported: extensions.includes("presence"),
     recordAwareness: extensions.includes("record-awareness-v1"),
-    pageAwareness: extensions.includes("page-awareness-v1"),
+    pageAwareness: extensions.includes("blockeditor-awareness-v1"),
   });
-  if (!extensions.includes("page-awareness-v1")) return null;
+  if (!extensions.includes("blockeditor-awareness-v1")) return null;
   const epoch = answer.document?.awareness?.scope;
   if (typeof epoch !== "string" || !epoch) return null;
   return createPageAwareness({ binding, view, store, epoch });