@panphora/clayjs 1.23.0 → 1.24.1

package/src/plugins/page.js

@@ -1,8 +1,9 @@
 import { FEATURES, featureForNode, featureForType } from "../page/features/registry.js";
 import { mergeEngine } from "../sync/merge-engine.js";
 import { registerUnsavedState } from "../lib/unsaved-state.js";
+import Mutation from "../lib/mutation.js";
 import { hostMeta } from "../core/host-meta.js";
-import { savePageForce, holdAllSaves, releaseAllSaves, suspendAutosave, resumeAutosave, getLastSavedBytes, savesAdmitted } from "../core/save.js";
+import { savePageForce, holdAllSaves, releaseAllSaves, suspendAutosave, resumeAutosave, getLastSavedBytes, savesAdmitted, claimFailure } from "../core/save.js";
 import { setSaveHeader, onSaveAccepted } from "../core/save-core.js";
 import { lastSeenEtag, representedEtag, recordEtag } from "../core/etag.js";
 import { captureForSaveAndComparison } from "../core/snapshot.js";
@@ -15,19 +16,23 @@ import { claim } from "../page/runtime-owner.js";
 import { authorIdentity } from "../page/ybind/author.js";
 import { createInstall, disposeInstall, addDisposer, finishError, isCurrent, ownsView, runBoot, activateInput } from "../page/boot.js";
 import { capabilityAdvertised } from "../page/tool-capability.js";
-import { startsAtImport } from "../core/is-edit-mode.js";
+import { startsAtImport, isDraftMode } from "../core/is-edit-mode.js";
 import { toolViews } from "../page/tool-views.js";
 import { style } from "../lib/hostile-css.js";
+import { addViewHook } from "../page/view-hooks.js";
+import { previewShown } from "../page/ai-preview.js";
 
-const ARTICLE_SEL = "article[data-page]";
-const TAG_SEL = 'script[type="application/json"][merge="page"][clay~="live"]';
+const ARTICLE_SEL = "article[data-blockeditor]";
+const TAG_SEL = 'script[type="application/json"][merge="blockeditor"][clay~="live"]';
 const BLOCKED = { state: "blocked", code: "unsupported-host", message: "This host does not support page editing" };
 const STORE_TEXT = "Changes cannot be stored on this device. Download a copy to keep them.";
 const RETRY_BOUND_MS = 45000;
 const GENERIC_ERROR = "Couldn't save";
-const GENERIC_OFFLINE = "Offline, not saved";
+const GENERIC_OFFLINE = "Offline, will retry";
 const REPLACED_TEXT = "This page was changed outside the editor. Reload to see it.";
 const TOO_LARGE_TEXT = "That change is too large to share, so it was not saved. Reload the page to keep editing.";
+const VISITOR_MEDIA = "Download your copy to add pictures and files.";
+const draftUpload = (file, opts) => Promise.resolve({ ok: false, code: "draft", msg: VISITOR_MEDIA });
 const CLIENT_KEY = /^[ur][0-9a-z]+(-[0-9a-z]+){2}$/;
 export const PAGE_FULL_MESSAGE = "This document is full, though your changes are still here to download. To edit again, reload this tab after another editor, or the owner in another browser, deletes content.";
 const OVERWRITTEN_TEXT = "Some changes you made were replaced by a change made outside the editor.";
@@ -46,11 +51,11 @@ const isPlainObject = (v) => v !== null && typeof v === "object" && !Array.isArr
 function unreadablePage(value) {
   if (!isPlainObject(value)) {
     console.warn("clayjs: page plugin: the page tag is not JSON, leaving the page as saved HTML");
-    return "invalid-page-json";
+    return "invalid-blockeditor-json";
   }
   if (value.v !== 1 || !isPlainObject(value.y) || Object.hasOwn(value, "blocks") || Object.hasOwn(value, "deleted")) {
     console.warn("clayjs: page plugin: the page tag is not a strict Yjs page, leaving the page as saved HTML");
-    return "unsupported-page-format";
+    return "unsupported-blockeditor-format";
   }
   return null;
 }
@@ -98,7 +103,7 @@ function armLoadingStatus(inst, article) {
     inst.statusTimer = null;
     if (!isCurrent(inst)) return;
     const note = article.ownerDocument.createElement("div");
-    note.className = "page-boot-status";
+    note.className = "blockeditor-boot-status";
     note.setAttribute("clay", "editor-ui");
     note.setAttribute("sap-ignore", "");
     note.setAttribute("role", "status");
@@ -120,6 +125,22 @@ let ended = null;
 
 // Shorter than installAdoption's 10 s hold, so an unelected room still adopts.
 export const WRITER_WAIT_MS = 8_000;
+// ai-edit loads late, after the editor takes input, so the first /ai or Revise can
+// arrive before `clay.aiEdit` exists. The wait is bounded like the menu's own.
+const AI_EDIT_WAIT_MS = 8_000;
+const AI_UNAVAILABLE = "AI tool making isn't available on this page right now.";
+
+function whenPresent(get, ms) {
+  return new Promise((resolve) => {
+    const start = Date.now();
+    const tick = () => {
+      const value = get();
+      if (value || Date.now() - start >= ms) resolve(value || null);
+      else setTimeout(tick, 50);
+    };
+    tick();
+  });
+}
 
 function scrollToHashBlock(view, loc = globalThis.location) {
   const raw = loc?.hash?.slice(1);
@@ -133,7 +154,7 @@ function scrollToHashBlock(view, loc = globalThis.location) {
 }
 
 function dispatchState(state, code = null, message = "") {
-  document.dispatchEvent(new CustomEvent("clay:page-save-state", { detail: { state, code, message } }));
+  document.dispatchEvent(new CustomEvent("clay:blockeditor-save-state", { detail: { state, code, message } }));
 }
 
 function dismissGeneric() {
@@ -183,7 +204,7 @@ function showBlocked(inst, code, message, state = "blocked") {
   toastPersistent(state === "unavailable" ? STORE_TEXT : BLOCKED_TEXT, "error", {
     detail: message,
     actions: [
-      { label: "Download a copy", onClick: downloadPageCopy },
+      { label: "Download copy", onClick: downloadPageCopy },
       { label: "Copy text", onClick: copyPageText },
     ],
   });
@@ -275,16 +296,58 @@ function listen(inst, type, handler) {
   inst.listeners.push([type, handler]);
 }
 
+// The page's own history, the one the editor's Cmd+Z already uses: nothing is undoable
+// while a proposal is only a preview, because Discard is the whole of that change and
+// Keep is the one step worth undoing.
+function pageHistory(inst) {
+  const binding = inst?.binding;
+  const um = binding?.bridge?.um;
+  if (!binding || !um) return null;
+  const showing = () => {
+    const view = inst.view;
+    return Boolean(view && !view.isDestroyed && previewShown(view.state));
+  };
+  const focus = () => inst.view?.focus?.();
+  return {
+    undo: () => {
+      if (binding.undo()) focus();
+    },
+    redo: () => {
+      if (binding.redo()) focus();
+    },
+    get canUndo() {
+      return um.undoStack.length > 0 && !showing();
+    },
+    get canRedo() {
+      return um.redoStack.length > 0 && !showing();
+    },
+  };
+}
+
+// One event for whatever presents the history, the same one plugins/undo.js emits: after
+// every entry the page's stack takes or replays, and whenever a preview comes up or goes.
+function notifyHistory(inst) {
+  const history = pageHistory(inst);
+  document.dispatchEvent(new CustomEvent("clay:undo-change", {
+    detail: { canUndo: !!history?.canUndo, canRedo: !!history?.canRedo },
+  }));
+}
+
 function listenForSaves(inst) {
+  // Retrying and blocked carry the editor's own notices, so core adds no generic one on
+  // top; a plain error is left to the generic "Couldn't save".
+  const reportFailure = (event, state) => {
+    if (state !== "error") claimFailure(event);
+    applySaveState(inst, state, event.detail?.code ?? null, event.detail?.msg ?? "");
+  };
   listen(inst, "clay:save-error", (event) => {
     const code = event.detail?.code ?? null;
     // The host holds exactly what this tab would have written: nothing to report.
-    if (code === "page-nothing-to-write") return;
-    applySaveState(inst, saveStateFor({ code }), code, event.detail?.msg ?? "");
+    if (code === "blockeditor-nothing-to-write") return claimFailure(event);
+    reportFailure(event, saveStateFor({ code }));
   });
   listen(inst, "clay:save-offline", (event) => {
-    const code = event.detail?.code ?? null;
-    applySaveState(inst, saveStateFor({ code, offline: true }), code, event.detail?.msg ?? "");
+    reportFailure(event, saveStateFor({ code: event.detail?.code ?? null, offline: true }));
   });
   listen(inst, "clay:save-conflict", (event) => {
     const code = event.detail?.code ?? null;
@@ -299,7 +362,7 @@ function listenForSaves(inst) {
     inst.adoption?.saved(getLastSavedBytes());
   });
   listen(inst, "clay:live-notice", (event) => {
-    if (event.detail?.name !== "page") return;
+    if (event.detail?.name !== "blockeditor") return;
     if (event.detail?.code === "op-too-large") return;
     if (event.detail?.code === "unknown-store") {
       showReplaced(inst);
@@ -312,6 +375,7 @@ function listenForSaves(inst) {
 
 // The page the host stores now, including any merge state it keeps beside the file.
 async function readStoredArticle() {
+  if (isDraftMode) return null;
   const response = await fetch(new URL(globalThis.location.href).href, { cache: "no-store" });
   if (!response?.ok) return null;
   const html = await response.text();
@@ -335,7 +399,7 @@ async function retryFirstWrite(inst, event) {
   const staged = inst.staged;
   if (!staged || inst.staleRetry || inst.replaced) return;
   const refusal = event?.detail?.code ?? null;
-  if (refusal !== "page-lineage-stale" && refusal !== "conflict") return;
+  if (refusal !== "blockeditor-lineage-stale" && refusal !== "conflict") return;
   if (!inst.store || !staged.isPending()) return;
   inst.staleRetry = true;
   try {
@@ -387,15 +451,13 @@ function releaseMounted(inst) {
   inst.adoption = null;
   try { inst.recover?.destroy(); } catch (error) { console.error("clayjs: page plugin recover list failed to dispose", error); }
   inst.recover = null;
-  inst.aiTool?.dispose();
-  inst.aiTool = null;
   inst.awareness?.dispose();
   inst.awareness = null;
   inst.toolHost?.dispose();
   inst.toolHost = null;
   if (inst.view) toolViews.delete(inst.view);
   if (inst.article) {
-    const shell = inst.article.querySelector(".page-shell");
+    const shell = inst.article.querySelector(".blockeditor-shell");
     if (shell) shell.remove();
   }
   try { inst.binding?.dispose(); } catch (error) { console.error("clayjs: page plugin binding failed to dispose", error); }
@@ -403,7 +465,7 @@ function releaseMounted(inst) {
   try { inst.staged?.close(); } catch (error) { console.error("clayjs: page plugin staged store failed to close", error); }
   inst.staged = null;
   if (inst.pageStore) {
-    try { closeStore("page", inst.pageStore); } catch (error) { console.error("clayjs: page plugin store failed to close", error); }
+    try { closeStore("blockeditor", inst.pageStore); } catch (error) { console.error("clayjs: page plugin store failed to close", error); }
     inst.pageStore = null;
   }
   inst.binding = null;
@@ -433,7 +495,7 @@ function dispose() {
   generation += 1;
   const inst = active;
   active = null;
-  setSaveHeader("Page-Write", null);
+  setSaveHeader("Blockeditor-Write", null);
   registerPageCheckpoints(null);
   if (!inst) return;
   disposeInstall(inst);
@@ -479,11 +541,12 @@ function pageRecovery() {
   return recoveryModules;
 }
 
+// A visitor's draft has no recovery identity on this host: its record in this browser is the copy.
 // What this session journals under, or null when this page cannot pin an identity or this
 // host has no recovery service: the document is then edited with no local copy, as before.
 async function openJournal(meta, store) {
   const service = globalThis.window?.clay?.recovery ?? null;
-  if (!service || !store) return null;
+  if (isDraftMode || !service || !store) return null;
   const modules = await pageRecovery();
   if (!modules) return null;
   try {
@@ -521,7 +584,7 @@ async function replayJournal(inst) {
 function installRecoveryReview(inst, ui) {
   if (inst.recoveryPanel) return inst.recoveryPanel;
   const view = inst.view;
-  const mount = view?.dom.closest(".page-shell") ?? inst.article;
+  const mount = view?.dom.closest(".blockeditor-shell") ?? inst.article;
   if (!mount) return null;
   const review = ui.createRecoveryReview({
     mount,
@@ -581,6 +644,23 @@ function installJournalStatus(inst, modules) {
   return inst.pageStatus;
 }
 
+// The page store the session mounts, brought to the file the reader holds. A page store's
+// value is a set of Yjs updates and this tab's own unsaved ops are updates of their own, so
+// installing the file's value as the store's own leaves the unconfirmed work replayed over
+// the page the file states; the binding that mounts next applies both sets in one Y
+// document, which is the merge. False when the store cannot take the value, and the entry
+// refuses rather than mounting a page the file does not state.
+function mergeRepresentedPage(store, value) {
+  if (unreadablePage(value)) return false;
+  if (serializeLive(store.authoritative) === serializeLive(value)) return true;
+  try {
+    return store.rebase(value, { source: "state" });
+  } catch (error) {
+    console.warn("clayjs: page plugin could not reconcile the open page store with the saved file", error);
+    return false;
+  }
+}
+
 export function createSteps(inst, options) {
   let meta = null;
   let binding = null;
@@ -591,7 +671,7 @@ export function createSteps(inst, options) {
   let featuresReady = null;
   let savedContent = [];
   let toolsStore = null;
-  let aiTool = null;
+  let pageAiReady = null;
   let toolsOpening = null;
   let chrome = null;
   let setEditorActive = null;
@@ -642,7 +722,7 @@ export function createSteps(inst, options) {
   // A document with a tool block, at boot or when one arrives, opens the store its
   // tools keep state in and the host that mounts them. A document with no tool
   // never waits for either.
-  const TOOLS_SEL = 'script[type="application/json"][merge="page.tools"][clay~="live"]';
+  const TOOLS_SEL = 'script[type="application/json"][merge="blockeditor.tools"][clay~="live"]';
   const openTools = () => {
     if (toolsOpening) return toolsOpening;
     toolsOpening = (async () => {
@@ -652,14 +732,14 @@ export function createSteps(inst, options) {
       if (!document.querySelector(TOOLS_SEL)) {
         const tools = document.createElement("script");
         tools.setAttribute("type", "application/json");
-        tools.setAttribute("merge", "page.tools");
+        tools.setAttribute("merge", "blockeditor.tools");
         tools.setAttribute("clay", "live");
         tools.textContent = "{}";
         document.head.appendChild(tools);
       }
       if (document.querySelector(TOOLS_SEL)) {
         try {
-          toolsStore = window.clay.live("page.tools");
+          toolsStore = window.clay.live("blockeditor.tools");
           await toolsStore.ready;
         } catch (error) {
           console.warn("clayjs: page plugin could not open the tool store", error);
@@ -676,13 +756,6 @@ export function createSteps(inst, options) {
         tables: () => tablesFromDoc(editorView?.state.doc ?? binding.doc()).map(({ id, cols, rows }) => ({ id, cols, rows })),
       });
       inst.toolHost = toolHost;
-      if (capabilityAdvertised(meta)) {
-        const { createAiTool } = await import("../page/ai-tool.js");
-        if (!isCurrent(inst)) return null;
-        const transport = window.clay?.wire?.pageTool ?? options.transport ?? null;
-        aiTool = createAiTool({ getView: () => inst.view, store: toolsStore, transport, acceptState: options.acceptState });
-        inst.aiTool = aiTool;
-      }
       return toolHost;
     })().catch((error) => {
       toolsOpening = null;
@@ -694,7 +767,7 @@ export function createSteps(inst, options) {
   // The document's own switches travel with it: the gear panel writes them into the
   // page's live store, and a document that never touched one opens no store at all.
   // Turning a switch off hides a tag; the owner and due values stay in the file.
-  const SETTINGS_SEL = 'script[type="application/json"][merge="page.settings"][clay~="live"]';
+  const SETTINGS_SEL = 'script[type="application/json"][merge="blockeditor.settings"][clay~="live"]';
   const SETTING_KEYS = ["assignees", "dates"];
   let settingsOpening = null;
   let settingsValue = { assignees: true, dates: true };
@@ -729,14 +802,14 @@ export function createSteps(inst, options) {
       if (!document.querySelector(SETTINGS_SEL)) {
         const tag = document.createElement("script");
         tag.setAttribute("type", "application/json");
-        tag.setAttribute("merge", "page.settings");
+        tag.setAttribute("merge", "blockeditor.settings");
         tag.setAttribute("clay", "live");
         tag.textContent = "{}";
         document.head.appendChild(tag);
       }
       let handle = null;
       try {
-        handle = window.clay.live("page.settings");
+        handle = window.clay.live("blockeditor.settings");
         await handle.ready;
       } catch (error) {
         console.warn("clayjs: page plugin could not open the settings store", error);
@@ -786,13 +859,23 @@ export function createSteps(inst, options) {
     });
   };
   inst.notices = notices;
-  // Making or revising a tool opens the store and the host first, so the panel
-  // keeps what it makes.
+  // Making or revising a tool opens the store and the host first, so the panel keeps
+  // what it makes; the panel itself is ai-edit's, on a target this page builds.
   const openAi = async ({ target = null, remove = null } = {}) => {
     if (chrome && editorView && remove) chrome.holdSlashRange(editorView, remove);
     await features.ensure("tool").catch(() => {});
-    if (!isCurrent(inst) || !aiTool || !editorView) return;
-    aiTool.open({ target, remove: remove ? chrome.heldSlashRange(editorView.state) : null });
+    if (!isCurrent(inst) || !editorView) return;
+    const held = remove ? chrome.heldSlashRange(editorView.state) : null;
+    const surface = await (pageAiReady ?? Promise.resolve(null));
+    if (!surface || !isCurrent(inst)) return;
+    const aiTarget = target ? surface.reviseTool(target.toolId) : surface.newTool(held);
+    const ai = window.clay?.aiEdit || await whenPresent(() => window.clay?.aiEdit, AI_EDIT_WAIT_MS);
+    if (!isCurrent(inst)) return;
+    if (!ai?.openTarget) {
+      toast(AI_UNAVAILABLE, "warning");
+      return;
+    }
+    ai.openTarget(aiTarget);
   };
   const aiRequested = () => capabilityAdvertised(meta);
 
@@ -809,7 +892,7 @@ export function createSteps(inst, options) {
       : null;
     const articles = represented ? represented.querySelectorAll(ARTICLE_SEL) : liveArticles;
     const tags = represented ? represented.querySelectorAll(TAG_SEL) : document.querySelectorAll(TAG_SEL);
-    if (!articles.length && !tags.length) return { ok: false, reason: "no-page" };
+    if (!articles.length && !tags.length) return { ok: false, reason: "no-blockeditor" };
     // A page saved without its merge state (HTML Clay, an outside edit, a download)
     // is booted from its article alone: the seed is deterministic, so every tab
     // rebuilding the same article holds the same state and their edits merge. The tag
@@ -818,11 +901,11 @@ export function createSteps(inst, options) {
     // the next install to read as a page the file already has.
     const seeded = articles.length === 1 && tags.length === 0;
     if (articles.length !== 1 || (!seeded && tags.length !== 1)) {
-      console.warn(`clayjs: page plugin needs exactly one article[data-page] and one merge="page" live tag; found ${articles.length} article(s) and ${tags.length} tag(s), leaving the page as saved HTML`);
-      return { ok: false, reason: "ambiguous-page" };
+      console.warn(`clayjs: page plugin needs exactly one article[data-blockeditor] and one merge="blockeditor" live tag; found ${articles.length} article(s) and ${tags.length} tag(s), leaving the page as saved HTML`);
+      return { ok: false, reason: "ambiguous-blockeditor" };
     }
     const element = liveArticles[0];
-    if (!element) return { ok: false, reason: "no-page" };
+    if (!element) return { ok: false, reason: "no-blockeditor" };
     // The file the reader represented is the page this session edits: its tag and the
     // article the seed is built from come off those bytes once, so a tag another tab
     // changed and a reader's own local state cannot reach what is staged. The live
@@ -844,7 +927,7 @@ export function createSteps(inst, options) {
       if (seeded) {
         try {
           const meta = await hostMeta();
-          const href = meta?.extensions?.includes("page-recovery-v1") && meta.document?.pageState?.href;
+          const href = meta?.extensions?.includes("blockeditor-recovery-v1") && meta.document?.blockeditorState?.href;
           const etag = inst.context?.represented ? inst.context.represented.etag : representedEtag() ?? lastSeenEtag();
           if (href && etag) {
             const { readPageState } = await import("../page/checkpoint-proof.js");
@@ -854,7 +937,7 @@ export function createSteps(inst, options) {
               if (stored.etag !== etag) return { ok: false, reason: "etag-mismatch" };
               value = parseJsonRelaxed(stored.tag);
               source.persisted = true;
-            } else if (stored.code !== "no-page-state") {
+            } else if (stored.code !== "no-blockeditor-state") {
               return { ok: false, reason: stored.code };
             }
           } else if (href) {
@@ -867,7 +950,7 @@ export function createSteps(inst, options) {
           value = source.seedValue = value ?? code.seedPageFromArticle(source.article.cloneNode(true));
         } catch (error) {
           console.warn("clayjs: page plugin could not rebuild the page it found, leaving the page as saved HTML", error);
-          return { ok: false, reason: "invalid-page-source" };
+          return { ok: false, reason: "invalid-blockeditor-source" };
         }
         const unreadable = unreadablePage(value);
         if (unreadable) return { ok: false, reason: unreadable };
@@ -877,7 +960,7 @@ export function createSteps(inst, options) {
         source.blocks = code.blocksFromYValue(value);
       } catch (error) {
         console.warn("clayjs: page plugin: the page tag is not a valid Yjs page, leaving the page as saved HTML", error);
-        return { ok: false, reason: "invalid-page-json" };
+        return { ok: false, reason: "invalid-blockeditor-json" };
       }
       return { ok: true };
     })();
@@ -885,23 +968,6 @@ export function createSteps(inst, options) {
     return { ok: true, source };
   }
 
-// The page store the session mounts, brought to the file the reader holds. A page store's
-// value is a set of Yjs updates and this tab's own unsaved ops are updates of their own, so
-// installing the file's value as the store's own leaves the unconfirmed work replayed over
-// the page the file states; the binding that mounts next applies both sets in one Y
-// document, which is the merge. False when the store cannot take the value, and the entry
-// refuses rather than mounting a page the file does not state.
-function mergeRepresentedPage(store, value) {
-  if (unreadablePage(value)) return false;
-  if (serializeLive(store.authoritative) === serializeLive(value)) return true;
-  try {
-    return store.rebase(value, { source: "state" });
-  } catch (error) {
-    console.warn("clayjs: page plugin could not reconcile the open page store with the saved file", error);
-    return false;
-  }
-}
-
   // The page's own code, the editor it starts and the feature views the saved article
   // demands are separate downloads, and the page's own starts here beside the room join.
   // Nothing evaluates the editor until the coordinator calls it; the parts are
@@ -919,7 +985,7 @@ function mergeRepresentedPage(store, value) {
       install: async (id, mod) => {
         if (!editorView) await editorReady;
         if (!isCurrent(inst) || !editorView) return null;
-        const context = { view: editorView, upload: options.upload, board: binding.board, undo: binding.undo, redo: binding.redo, revise: aiRequested() ? (toolId, rev) => { openAi({ target: { toolId, rev } }); } : null };
+        const context = { view: editorView, upload: isDraftMode ? draftUpload : options.upload, board: binding.board, undo: binding.undo, redo: binding.redo, revise: aiRequested() ? (toolId) => { openAi({ target: { toolId } }); } : null };
         if (id === "tool") {
           context.toolHost = await openTools();
           if (!isCurrent(inst)) return null;
@@ -954,9 +1020,10 @@ function mergeRepresentedPage(store, value) {
     // download: it starts here, beside authority, and only a page that must rebuild
     // its tag waits for it before the join. Nothing else on this path touches a vendor.
     const codePromise = pageCodeReady();
-    try { meta = await hostMeta(); } catch (error) { meta = null; }
+    // A visitor's draft never asks the host: the editor's only store is this browser's.
+    try { meta = isDraftMode ? { spec: null, extensions: ["blockeditor"], document: null } : await hostMeta(); } catch (error) { meta = null; }
     if (!isCurrent(inst)) return { ok: false, cancelled: true };
-    if (!meta || !Array.isArray(meta.extensions) || !meta.extensions.includes("page")) {
+    if (!meta || !Array.isArray(meta.extensions) || !meta.extensions.includes("blockeditor")) {
       showBlocked(inst, BLOCKED.code, BLOCKED.message);
       return { ok: false, reason: "missing-capability" };
     }
@@ -965,7 +1032,7 @@ function mergeRepresentedPage(store, value) {
     // is merged by the boot instead of being read as a replacement.
     inst.mergeTagless = !meta.extensions.includes("live-data");
     // The one declaration that lets a host answer a seed-only body with nothing-to-write.
-    setSaveHeader("Page-Write", "v1");
+    setSaveHeader("Blockeditor-Write", "v1");
     // A seeded page is the one boot whose join needs the page code, which rebuilds
     // the seed the article states.
     let read = null;
@@ -985,7 +1052,7 @@ function mergeRepresentedPage(store, value) {
     let ownsStore = true;
     try {
       if (source.seeded) {
-        const staged = stageStore("page", {
+        const staged = stageStore("blockeditor", {
           value: source.seedValue,
           represented: options.represented ?? { bytes: source.article.outerHTML, etag: representedEtag() ?? lastSeenEtag() },
           persisted: source.persisted,
@@ -993,14 +1060,14 @@ function mergeRepresentedPage(store, value) {
         inst.staged = staged;
         handle = staged.handle;
       } else {
-        const opened = storeOf("page") === null;
+        const opened = storeOf("blockeditor") === null;
         ownsStore = opened;
-        handle = window.clay.live("page");
-        if (opened) inst.pageStore = storeOf("page");
+        handle = window.clay.live("blockeditor");
+        if (opened) inst.pageStore = storeOf("blockeditor");
       }
     } catch (error) {
       console.warn("clayjs: page plugin could not open the page store", error);
-      return { ok: false, reason: "missing-page-store" };
+      return { ok: false, reason: "missing-blockeditor-store" };
     }
     try {
       await handle.ready;
@@ -1018,14 +1085,14 @@ function mergeRepresentedPage(store, value) {
     // file before anything mounts on it, and a store that cannot take it refuses the
     // entry rather than mounting a page the file does not state. A store that has joined
     // a room is the exception: the room is newer than any file, and its value stands.
-    const inRoom = storeOf("page")?.handle?.status?.mode === "fast";
-    if (!ownsStore && !inRoom && !mergeRepresentedPage(storeOf("page"), source.tags?.[0])) {
+    const inRoom = storeOf("blockeditor")?.handle?.status?.mode === "fast";
+    if (!ownsStore && !inRoom && !mergeRepresentedPage(storeOf("blockeditor"), source.tags?.[0])) {
       return { ok: false, reason: "stale-store" };
     }
     code ??= await codePromise;
     if (!isCurrent(inst)) return { ok: false, cancelled: true };
-    const store = storeOf("page");
-    if (!store) return { ok: false, reason: "missing-page-store" };
+    const store = storeOf("blockeditor");
+    if (!store) return { ok: false, reason: "missing-blockeditor-store" };
     inst.store = store;
 
     let flushFailed = false;
@@ -1047,9 +1114,9 @@ function mergeRepresentedPage(store, value) {
       onStopped: (reason) => {
         inst.tabValue = code.yValueOf(binding.ydoc);
         if (reason === "lineage") {
-          fastLane()?.abandon?.("page");
+          fastLane()?.abandon?.("blockeditor");
           showReplaced(inst);
-        } else if (reason === "page-full" || reason === "compaction-failed") {
+        } else if (reason === "blockeditor-full" || reason === "compaction-failed") {
           showFull(inst, reason);
         } else {
           showTooLarge(inst);
@@ -1138,8 +1205,10 @@ function mountAndAttach(inst, source, loaded) {
         board: binding.board,
         editable: false,
         features,
+        upload: isDraftMode ? draftUpload : options.upload,
         onAiTool: aiRequested() ? (_view, remove) => { openAi({ remove }); } : null,
-        reviseTool: aiRequested() ? (toolId, rev) => { openAi({ target: { toolId, rev } }); } : null,
+        mediaNote: isDraftMode ? VISITOR_MEDIA : null,
+        reviseTool: aiRequested() ? (toolId) => { openAi({ target: { toolId } }); } : null,
         formatGate: inst.loadFormatGate,
       });
     } catch (error) {
@@ -1152,6 +1221,22 @@ function mountAndAttach(inst, source, loaded) {
     }
     editorView = view;
     inst.view = view;
+    // The AI surface is the page's own, and it arrives beside the editor rather than in
+    // the plugin chunk: nothing rewrites a page until a person asks it to.
+    pageAiReady = import("../page/ai-surface.js")
+      .then(({ createPageAi }) => {
+        if (!isCurrent(inst) || inst.view !== view) return null;
+        inst.pageAi = createPageAi({
+          getView: () => inst.view,
+          store: () => toolsStore,
+          acceptState: options.acceptState,
+        });
+        return inst.pageAi;
+      })
+      .catch((error) => {
+        console.warn("clayjs: page plugin could not load the AI surface", error);
+        return null;
+      });
     applySettings(readSettings());
     // A document that states settings opens their store so a peer's change reaches this
     // tab; one that states none opens it when a switch is first written.
@@ -1159,18 +1244,52 @@ function mountAndAttach(inst, source, loaded) {
     else listen(inst, "clay:sync-applied", () => {
       if (!settingsOpening && document.querySelector(SETTINGS_SEL)) openSettings().catch(() => null);
     });
-    const shell = view.dom.closest(".page-shell");
+    const shell = view.dom.closest(".blockeditor-shell");
     // A shell still waiting for its boot takes no input of any kind: a control inside
     // a non-editable editor would otherwise write before the boot says ready. It is
     // cleared at the one place input is enabled.
     if (shell) shell.inert = true;
     if (loaded.featureIds.length && shell) shell.style.visibility = "hidden";
     // One synchronous move: the finished shell replaces the saved surface as a
-    // single change, and the article element itself stays where it is.
-    if (!loaded.featureIds.length) for (const node of savedContent) node.remove();
-    if (shell) article.appendChild(shell);
+    // single change, and the article element itself stays where it is. The editor
+    // chunk can land after the boot settle, so the move is paused: it is the editor
+    // presenting the saved surface, never an edit to save.
+    Mutation.pause();
+    try {
+      if (!loaded.featureIds.length) for (const node of savedContent) node.remove();
+      if (shell) article.appendChild(shell);
+    } finally {
+      Mutation.resume();
+    }
     loaded.refreshView?.(view);
     binding.attach(view);
+    // The page's history tells whoever presents it once it exists (a menu opened before the
+    // editor came up gets its Undo row then), and once per entry it takes or replays. A
+    // peer's typing takes none of them: their work is not this tab's to undo.
+    const um = binding.bridge?.um;
+    if (um) {
+      const notify = () => notifyHistory(inst);
+      um.on("stack-item-added", notify);
+      um.on("stack-item-popped", notify);
+      um.on("stack-cleared", notify);
+      addDisposer(inst, () => {
+        um.off("stack-item-added", notify);
+        um.off("stack-item-popped", notify);
+        um.off("stack-cleared", notify);
+      });
+      notify();
+    }
+    // A proposal shown or cleared changes what the pair may do without touching the stack,
+    // so the change of that flag is what is told, not every transaction.
+    let previewWas = previewShown(view.state);
+    addDisposer(inst, addViewHook(view, {
+      update: (next) => {
+        const previewIs = previewShown(next.state);
+        if (previewIs === previewWas) return;
+        previewWas = previewIs;
+        notifyHistory(inst);
+      },
+    }));
     installAwareness(inst, view);
     editorReadyResolve();
     // The parts the saved article demands install onto the mounted view now, whether
@@ -1180,7 +1299,7 @@ function mountAndAttach(inst, source, loaded) {
     scrollToHashBlock(view);
     inst.recover = loaded.code.createRecoverList({
       binding,
-      mount: view.dom.closest(".page-shell") ?? article,
+      mount: view.dom.closest(".blockeditor-shell") ?? article,
       ownTokens: [identity.token, ...identity.owned],
       onRestored: (id) => loaded.code.focusBlock(view, id),
       onStale: () => toast("That change was updated. The list now shows the latest version.", "warning"),
@@ -1269,7 +1388,7 @@ function mountAndAttach(inst, source, loaded) {
         inst.store.handle.set(["y", key], value);
         // The session is not admitted until the commit, so its ops stay in the tab: the
         // claim alone is framed now, before adoption writes anything, or no election runs.
-        lane.release("page");
+        lane.release("blockeditor");
       }
       // A lane that never reports a writer must not cost the hand edit: give up
       // before adoption's own bound, and adopt as the file-mode tab would.
@@ -1292,7 +1411,7 @@ function mountAndAttach(inst, source, loaded) {
       mergeTagless: inst.mergeTagless,
       seeded: source.seeded,
       writerReady: awaitWriter,
-      adopted: (rev) => fastLane()?.adopted?.("page", rev, inst.store.mark),
+      adopted: (rev) => fastLane()?.adopted?.("blockeditor", rev, inst.store.mark),
       notice: (counts) => {
         if (!counts.copy) return;
         toastPersistent(OVERWRITTEN_TEXT, "warning", {
@@ -1325,12 +1444,12 @@ function mountAndAttach(inst, source, loaded) {
   async function prepareInput(inst, mounted) {
     // A replacement that landed while the page was still booting keeps the editor
     // read-only: the notice is already up, and this tab must not edit the old article.
-    if (inst.replaced) return { ok: false, reason: "page-replaced" };
+    if (inst.replaced) return { ok: false, reason: "blockeditor-replaced" };
     await featuresReady;
     if (!isCurrent(inst)) return { ok: false, cancelled: true };
     // The gate: this installation's own view, still in the article it claimed, over
     // the binding the room accepted. Anything else is not something to type into.
-    const shell = mounted.view.dom.closest(".page-shell");
+    const shell = mounted.view.dom.closest(".blockeditor-shell");
     if (!ownsView(inst, mounted) || !shell || !shell.isConnected || mounted.view.isDestroyed) {
       return { ok: false, reason: "view-detached" };
     }
@@ -1350,17 +1469,23 @@ function mountAndAttach(inst, source, loaded) {
   // opens. It changes activation only, and only after preparation already passed, so
   // the commit that enters edit cannot fail here.
   function openInput(inst, mounted) {
-    const shell = mounted.view.dom.closest(".page-shell");
+    const shell = mounted.view.dom.closest(".blockeditor-shell");
+    // Like the boot move, revealing the editor over the saved surface is presentation, not an edit.
     const showEditor = () => {
-      for (const node of savedContent) node.remove();
-      if (shell) shell.style.visibility = "";
+      Mutation.pause();
+      try {
+        for (const node of savedContent) node.remove();
+        if (shell) shell.style.visibility = "";
+      } finally {
+        Mutation.resume();
+      }
     };
     // A replacement that landed during the feature wait keeps the editor read-only,
     // exactly as one that landed before it does.
     if (inst.replaced) {
       showEditor();
       stopEditing(inst);
-      return { ok: false, reason: "page-replaced" };
+      return { ok: false, reason: "blockeditor-replaced" };
     }
     if (inst.inputOpen) return { ok: true };
     if (!ownsView(inst, mounted) || !shell || !shell.isConnected || mounted.view.isDestroyed) {
@@ -1431,7 +1556,7 @@ function begin(options = {}, { activate = true, context = null } = {}) {
         options.onPhase?.(result);
       },
     }),
-    article: null, view: null, binding: null, adoption: null, source: null, store: null, toolHost: null, aiTool: null, bootHtml: "", bootRev: null, savedRev: null, staged: null, pageStore: null, releaseArticle: null, replaced: false, savesHeld: false, flush: null, loadFormatGate: null, listeners: [], retryTimer: null, retryShown: false, statusTimer: null, statusNote: null, notices: null, editorReadyResolve: null, context, inputOpen: false, sessionHeld: false, autosaveSuspended: false, staleRetry: false,
+    article: null, view: null, binding: null, adoption: null, source: null, store: null, toolHost: null, pageAi: null, bootHtml: "", bootRev: null, savedRev: null, staged: null, pageStore: null, releaseArticle: null, replaced: false, savesHeld: false, flush: null, loadFormatGate: null, listeners: [], retryTimer: null, retryShown: false, statusTimer: null, statusNote: null, notices: null, editorReadyResolve: null, context, inputOpen: false, sessionHeld: false, autosaveSuspended: false, staleRetry: false,
   };
   active = inst;
   const boot = run(inst, options, { activate }).catch((error) => {
@@ -1455,7 +1580,7 @@ function endSession(inst) {
     active = null;
     generation += 1;
   }
-  setSaveHeader("Page-Write", null);
+  setSaveHeader("Blockeditor-Write", null);
   disposeInstall(inst);
   dismissSaveStateToasts(inst, true);
   inst.titleObserver?.dispose();
@@ -1557,7 +1682,7 @@ export function preparePageSession(context = null, options = {}) {
  */
 export function pageParticipant(options = {}) {
   return {
-    id: "clay:page",
+    id: "clay:blockeditor",
     // After live (200) and upload (340): the page builds its stores over the admission
     // those two already opened.
     order: 400,
@@ -1590,6 +1715,14 @@ export const page = {
   get view() {
     return active?.view ?? null;
   },
+  // The page's chosen-area AI, read by ai-edit at use time: null until the editor is up.
+  get ai() {
+    return active?.pageAi ?? null;
+  },
+  // The document's history, for the Claygoo menu: null until its editor is up.
+  get history() {
+    return active ? pageHistory(active) : null;
+  },
   // The document's settings, for the panel that switches them.
   get settings() {
     return active?.settings ?? null;
@@ -1606,6 +1739,32 @@ onSaveAccepted((html) => {
   if (state) binding.acceptFile(state);
 });
 
+if (isDraftMode) {
+  // Another tab of this visitor's draft recorded its page: it joins this tab's in one Y
+  // document, the same merge a represented page takes, and the next save records both.
+  document.addEventListener("clay:drafts-blockeditor-external", (event) => {
+    const { live, adopted } = event.detail || {};
+    if (!live || typeof live !== "object") return;
+    let merged = true;
+    for (const [name, value] of Object.entries(live)) {
+      const store = storeOf(name);
+      if (!store) continue;
+      try {
+        const ok = name === "blockeditor" ? mergeRepresentedPage(store, value) : store.rebase(value, { source: "state" });
+        if (ok === false) merged = false;
+      } catch (error) {
+        console.warn("clayjs: another tab's page could not join this one", error);
+        merged = false;
+      }
+    }
+    // The provider re-offers this tab's own edits on a timer; a hide before it fires would
+    // capture the other tab's page alone. Reconcile now, so a capture holds both.
+    if (merged) active?.binding?.provider?.settle?.();
+    if (merged) adopted?.();
+  });
+  document.dispatchEvent(new CustomEvent("clay:drafts-blockeditor-listening"));
+}
+
 // A live entry imports this module while the committed mode is still view: the install
 // belongs to the explicit edit boot alone, and a managed session starts its own.
 page.ready = startsAtImport() ? install() : null;