@panphora/clayjs 1.23.0 → 1.24.1

package/src/page/format-gate.js

@@ -28,10 +28,10 @@
 // admitted editors again and persists the marker, so a legacy registration that
 // lands between `capabilities()` and `activate()` is refused rather than missed.
 
-import { PAGE_FORMAT, PAGE_FORMAT_EXTENSION, PAGE_FORMAT_UPGRADE, formatCapability, notePageFormatFloor, pageFormatDecision, pageFormatFloor } from "./format-level.js";
+import { PAGE_FORMAT, PAGE_FORMAT_EXTENSION, PAGE_FORMAT_UPGRADE, formatCapability, notePageFormatFloor, pageFormatDecision, blockeditorFormatFloor } from "./format-level.js";
 import { registerUnsavedState } from "../lib/unsaved-state.js";
 
-const PENDING_COMMAND = "page-format-command";
+const PENDING_COMMAND = "blockeditor-format-command";
 
 const UPGRADE_MESSAGE = "This document uses a newer page format; update the editor in the other tabs to keep writing";
 
@@ -80,7 +80,7 @@ export function createFormatGate({
   async function read() {
     try {
       const answer = await host.read();
-      note(answer?.floor ?? pageFormatFloor(answer?.html));
+      note(answer?.floor ?? blockeditorFormatFloor(answer?.html));
     } catch {}
     return floor;
   }
@@ -106,7 +106,7 @@ export function createFormatGate({
 
   async function activateNow() {
     if (disposed) return { status: "disposed", retry: false };
-    if (!(await supportedHere())) return { status: "unsupported-host", code: "page-format-unsupported", extension: PAGE_FORMAT_EXTENSION };
+    if (!(await supportedHere())) return { status: "unsupported-host", code: "blockeditor-format-unsupported", extension: PAGE_FORMAT_EXTENSION };
     await read();
     if (floor >= PAGE_FORMAT) {
       await requestLane();
@@ -120,11 +120,11 @@ export function createFormatGate({
     try {
       answer = await host.activate({ floor: PAGE_FORMAT, capability, revision: stamp.revision, installed: stamp.installed });
     } catch (error) {
-      return { status: "failed", code: "page-format-activation-failed", error, retry: true };
+      return { status: "failed", code: "blockeditor-format-activation-failed", error, retry: true };
     }
     if (!answer || answer.accepted !== true) {
       if (answer?.code === PAGE_FORMAT_UPGRADE) return upgrade(PAGE_FORMAT);
-      return { status: "failed", code: answer?.code ?? "page-format-activation-failed", retry: true };
+      return { status: "failed", code: answer?.code ?? "blockeditor-format-activation-failed", retry: true };
     }
     if (disposed) {
       // The save was accepted, so the document is at floor 1 either way; this

package/src/page/format-host.js

@@ -5,22 +5,22 @@
 // The host is the authority, so `capabilities()` answers nothing here: the editors
 // admitted to the document are checked under its admission/write lock when the save
 // carrying the marker arrives, which is the check no registration can race. A save
-// refused there reports `page-format-upgrade-required` like any other refusal, and
+// refused there reports `blockeditor-format-upgrade-required` like any other refusal, and
 // this tab stays at the floor it already knew.
 //
 // Nothing is noted before the host answers: `notePageFormatFloor` runs when the gate
 // accepts the activation, so a refusal leaves every later save at floor 0.
 
-import { PAGE_FORMAT, PAGE_FORMAT_META, PAGE_FORMAT_UPGRADE, knownPageFormatFloor, pageFormatFloor } from "./format-level.js";
+import { PAGE_FORMAT, PAGE_FORMAT_META, PAGE_FORMAT_UPGRADE, knownPageFormatFloor, blockeditorFormatFloor } from "./format-level.js";
 import { hostPageFormat } from "../core/host-meta.js";
 
-const FAILED = "page-format-activation-failed";
+const FAILED = "blockeditor-format-activation-failed";
 
 // The document's own marker, as it was served. A tab that joined a document already
 // at floor 1 must not ask to activate it again.
 function servedFloor() {
   const tag = document.querySelector(`meta[name="${PAGE_FORMAT_META}"]`);
-  return tag ? pageFormatFloor(tag.outerHTML) : 0;
+  return tag ? blockeditorFormatFloor(tag.outerHTML) : 0;
 }
 
 // The editor's own explicit save, fetched when a floor is really raised: a tab that
@@ -55,10 +55,10 @@ export function createFormatHost({
     async activate({ floor = PAGE_FORMAT } = {}) {
       let result;
       try {
-        result = await save({ pageFormatFloor: floor });
+        result = await save({ blockeditorFormatFloor: floor });
         for (let attempt = 1; attempt < SKIPPED_ATTEMPTS && skippedBehindSave(result); attempt += 1) {
           await settles();
-          result = await save({ pageFormatFloor: floor });
+          result = await save({ blockeditorFormatFloor: floor });
         }
       } catch (error) {
         return { accepted: false, code: error?.code ?? FAILED };

package/src/page/format-level.js

@@ -3,10 +3,10 @@
 //
 // The canonical marker is document metadata, outside the unchanged `{v,g,y}`
 // page value:
-//   <meta name="clay-page-format" content="1">
+//   <meta name="clay-blockeditor-format" content="1">
 // Absence means floor 0. A document's floor only ever rises, and every path that
 // writes a page declares the capability it writes with in
-// `X-Clay-Page-Format`. The value is protocol capability, not authorization: the
+// `X-Clay-Blockeditor-Format`. The value is protocol capability, not authorization: the
 // host still applies every permission check.
 //
 // `requiredPageFormat` answers the other direction: what floor does THIS content
@@ -15,7 +15,7 @@
 
 export {
   PAGE_FORMAT, PAGE_FORMAT_HEADER, PAGE_FORMAT_META, PAGE_FORMAT_EXTENSION, PAGE_FORMAT_UPGRADE,
-  formatCapability, pageFormatFloor, withPageFormatFloor, knownPageFormatFloor, notePageFormatFloor,
+  formatCapability, blockeditorFormatFloor, withPageFormatFloor, knownPageFormatFloor, notePageFormatFloor,
 } from "../core/page-format.js";
 import { PAGE_FORMAT, PAGE_FORMAT_UPGRADE, formatCapability } from "../core/page-format.js";
 

package/src/page/format-native-commands.js

@@ -18,7 +18,7 @@ import { openPageMenu } from "./chrome.js";
 // blocks.js's STEP, read here rather than imported from it: this module is part
 // of the projection's graph, and blocks.js reads the projection's constants as it
 // loads. A command of ours is one undo item by itself, like every other command.
-const STEP = "page-step";
+const STEP = "blockeditor-step";
 const asStep = (tr) => history.closeHistory(tr).setMeta(STEP, true);
 
 const holds = (mark, attrs) => !!mark && Object.keys(mark.type.attrs).every((name) => mark.attrs[name] === attrs[name]);
@@ -55,7 +55,7 @@ function remove(view, type) {
 // format, and a refusal leaves the content exactly as it was.
 export function runFormat(view, apply) {
   const run = view.runFormatCommand;
-  if (typeof run !== "function") return Promise.resolve({ status: "unsupported-host", code: "page-format-unsupported", retry: false });
+  if (typeof run !== "function") return Promise.resolve({ status: "unsupported-host", code: "blockeditor-format-unsupported", retry: false });
   return run(apply);
 }
 

package/src/page/highlight-slot.js

@@ -6,7 +6,7 @@ import { state, view as pmView } from "../vendor/prosemirror.vendor.js";
 const { Plugin, PluginKey } = state;
 const { DecorationSet } = pmView;
 
-export const highlightKey = new PluginKey("page-highlight");
+export const highlightKey = new PluginKey("blockeditor-highlight");
 
 export function highlightSlot() {
   return new Plugin({

package/src/page/highlight.js

@@ -1,7 +1,7 @@
 // Syntax colours for code blocks. A code block with a language gets inline
 // decorations from Pierre's highlighter, loaded on first use (src/vendor/pierre/).
 // Only blocks on screen are highlighted, and only after typing pauses. Colours are
-// --page-code-token-* variables, so each page theme sets them.
+// --blockeditor-code-token-* variables, so each page theme sets them.
 import { state, view as pmView } from "../vendor/prosemirror.vendor.js";
 import { schema } from "./schema.js";
 import { asStep } from "./blocksel.js";
@@ -54,7 +54,7 @@ const color = (name) => ({ color: name });
 const THEME = {
   name: "page",
   appearance: "light",
-  cssVariables: { prefix: "--page-code-token-" },
+  cssVariables: { prefix: "--blockeditor-code-token-" },
   style: {
     syntax: {
       comment: color("comment"),
@@ -99,7 +99,7 @@ export async function tokenize(code, lang) {
   return codeToTokens(code, { lang, theme: THEME }).tokens;
 }
 
-const FOREGROUND = "var(--page-code-token-foreground)";
+const FOREGROUND = "var(--blockeditor-code-token-foreground)";
 const styleOf = (t) => {
   const s = [];
   if (t.color && t.color !== FOREGROUND) s.push(`color: ${t.color}`);
@@ -246,7 +246,7 @@ export class CodeBlockView {
     this.dom = doc.createElement("pre");
     this.contentDOM = doc.createElement("code");
     this.select = doc.createElement("select");
-    this.select.className = "page-code-lang";
+    this.select.className = "blockeditor-code-lang";
     this.select.contentEditable = "false";
     this.select.setAttribute("aria-label", "Code language");
     for (const [id, label] of LANGS) this.select.append(new Option(label, id));

package/src/page/history-intent.js

@@ -4,7 +4,7 @@
 import { state } from "../vendor/prosemirror.vendor.js";
 import { STEP } from "./blocks.js";
 
-export const HISTORY_INTENT = "page-history-intent";
+export const HISTORY_INTENT = "blockeditor-history-intent";
 export const GROUP_MS = 500;
 
 const blockIdAt = (doc, pos) => {
@@ -29,7 +29,7 @@ export function continuesGroup(prev, next) {
 const DELETES = { deleteContentBackward: -1, deleteContentForward: 1 };
 const pendingDeletes = new WeakMap();
 const PENDING_MS = 1000;
-export const DERIVED = "page-derived";
+export const DERIVED = "blockeditor-derived";
 
 // A native deletion arrives as a DOM change with no handler, sometimes after a delayed flush
 // (Android waits 20 ms), so the beforeinput that announced it is held with the document it saw

package/src/page/image-actions.js

@@ -28,10 +28,10 @@ export function openAltEditor(view, id) {
   let at = 0;
   for (let i = 0; i < index; i++) at += view.state.doc.child(i).nodeSize;
   const box = doc.createElement("div");
-  box.className = "page-link";
+  box.className = "blockeditor-link";
   box.dataset.mode = "alt";
   const input = doc.createElement("input");
-  input.className = "page-link-input";
+  input.className = "blockeditor-link-input";
   input.type = "text";
   input.value = view.state.doc.child(index).attrs.alt || "";
   input.placeholder = "Describe the image";
@@ -40,8 +40,8 @@ export function openAltEditor(view, id) {
   const rect = view.nodeDOM(at)?.getBoundingClientRect?.();
   const shellBox = shell.getBoundingClientRect();
   if (rect) {
-    box.style.setProperty("--page-pop-x", `${rect.left - shellBox.left}px`);
-    box.style.setProperty("--page-pop-y", `${rect.bottom - shellBox.top + 6}px`);
+    box.style.setProperty("--blockeditor-pop-x", `${rect.left - shellBox.left}px`);
+    box.style.setProperty("--blockeditor-pop-y", `${rect.bottom - shellBox.top + 6}px`);
   }
   shell.append(box);
   let done = false;

package/src/page/link.js

@@ -35,7 +35,7 @@ export function setLinkTr(st, from, to, href) {
   return asStep(tr);
 }
 
-export const linkKey = new PluginKey("page-link");
+export const linkKey = new PluginKey("blockeditor-link");
 const popovers = new WeakMap();
 
 const svg = (body) => `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
@@ -63,14 +63,14 @@ class LinkPopover {
     this.mode = null;
     this.range = null;
     const doc = this.doc;
-    this.dom = el(doc, "div", "page-link", { role: "dialog", "aria-label": "Link", hidden: "" });
-    this.input = el(doc, "input", "page-link-input", { type: "url", "aria-label": "Link address", placeholder: "Paste or type a link", autocomplete: "off", spellcheck: "false" });
-    this.url = el(doc, "a", "page-link-url", { target: "_blank", rel: "noopener noreferrer" });
-    this.open = el(doc, "a", "page-link-btn", { "data-act": "open", target: "_blank", rel: "noopener noreferrer", "aria-label": "Open link in a new tab", title: "Open in a new tab" });
+    this.dom = el(doc, "div", "blockeditor-link", { role: "dialog", "aria-label": "Link", hidden: "" });
+    this.input = el(doc, "input", "blockeditor-link-input", { type: "url", "aria-label": "Link address", placeholder: "Paste or type a link", autocomplete: "off", spellcheck: "false" });
+    this.url = el(doc, "a", "blockeditor-link-url", { target: "_blank", rel: "noopener noreferrer" });
+    this.open = el(doc, "a", "blockeditor-link-btn", { "data-act": "open", target: "_blank", rel: "noopener noreferrer", "aria-label": "Open link in a new tab", title: "Open in a new tab" });
     this.open.innerHTML = ICON_OPEN;
-    this.edit = el(doc, "button", "page-link-btn", { type: "button", "data-act": "edit" });
+    this.edit = el(doc, "button", "blockeditor-link-btn", { type: "button", "data-act": "edit" });
     this.edit.textContent = "Edit";
-    this.remove = el(doc, "button", "page-link-btn", { type: "button", "data-act": "remove", "aria-label": "Remove link", title: "Remove link" });
+    this.remove = el(doc, "button", "blockeditor-link-btn", { type: "button", "data-act": "remove", "aria-label": "Remove link", title: "Remove link" });
     this.remove.innerHTML = ICON_REMOVE;
     this.dom.append(this.input, this.url, this.open, this.edit, this.remove);
     this.shell.append(this.dom);
@@ -153,8 +153,8 @@ class LinkPopover {
     if (!r) return;
     const shellBox = this.shell.getBoundingClientRect();
     const a = this.view.coordsAtPos(r.from), b = this.view.coordsAtPos(r.to, -1);
-    this.dom.style.setProperty("--page-pop-x", `${Math.min(a.left, b.left) - shellBox.left}px`);
-    this.dom.style.setProperty("--page-pop-y", `${Math.max(a.bottom, b.bottom) - shellBox.top + 6}px`);
+    this.dom.style.setProperty("--blockeditor-pop-x", `${Math.min(a.left, b.left) - shellBox.left}px`);
+    this.dom.style.setProperty("--blockeditor-pop-y", `${Math.max(a.bottom, b.bottom) - shellBox.top + 6}px`);
   }
 
   update(view) {
@@ -224,7 +224,7 @@ export function linkPlugin() {
     props: {
       decorations(st) {
         const r = linkKey.getState(st);
-        return r && r.from < r.to ? DecorationSet.create(st.doc, [Decoration.inline(r.from, r.to, { class: "page-link-pending" })]) : null;
+        return r && r.from < r.to ? DecorationSet.create(st.doc, [Decoration.inline(r.from, r.to, { class: "blockeditor-link-pending" })]) : null;
       },
       handleKeyDown(view, event) {
         const mod = event.metaKey || event.ctrlKey;

package/src/page/media.js

@@ -19,7 +19,7 @@ import { safeFileHref } from "./address.js";
 const { Plugin, PluginKey } = state;
 const N = schema.nodes;
 
-export const mediaKey = new PluginKey("page-media");
+export const mediaKey = new PluginKey("blockeditor-media");
 export const EMBED_MAX = 1.5 * 1024 * 1024;
 export const mediaRuntime = new WeakMap();
 
@@ -182,7 +182,7 @@ export function mediaPlugin({ upload, features = null }) {
       input.type = "file";
       input.multiple = true;
       input.hidden = true;
-      input.className = "page-file-input";
+      input.className = "blockeditor-file-input";
       view.dom.parentElement.append(input);
       mediaRuntime.set(view, { upload, aborts: new Map(), input });
       input.addEventListener("change", () => {
@@ -205,7 +205,7 @@ export function mediaPlugin({ upload, features = null }) {
       });
       input.addEventListener("cancel", () => view.dispatch(view.state.tr.setMeta(mediaKey, { picker: null })));
       const onClick = (e) => {
-        const b = e.target.closest?.(".page-upload-btn");
+        const b = e.target.closest?.(".blockeditor-upload-btn");
         if (!b) return;
         e.preventDefault();
         const part = mediaParts.get(view);

package/src/page/mention-picker.js

@@ -3,8 +3,8 @@
 // stylesheet of its own, and it takes no focus: the caret and the typed query stay in the
 // document, and the active row is announced through the editor's aria-activedescendant as
 // the slash menu does. A name is only ever text.
-export const PICKER = "page-mention-picker";
-export const OPTION = "page-menu-item";
+export const PICKER = "blockeditor-mention-picker";
+export const OPTION = "blockeditor-menu-item";
 const EMPTY = "No people to mention";
 
 let count = 0;
@@ -28,9 +28,9 @@ export const filterPeople = (people, query) => {
 // The shell takes the words a command shows, so a date command reuses the same listbox:
 // same placement, same rows, same keyboard, and its own name for what it lists.
 export function createMentionPicker({ document: doc = globalThis.document, onPick = () => {}, label = "Mention a person", empty = EMPTY } = {}) {
-  const id = `page-mentions-${++count}`;
+  const id = `blockeditor-mentions-${++count}`;
   const el = doc.createElement("div");
-  el.className = `page-menu ${PICKER}`;
+  el.className = `blockeditor-menu ${PICKER}`;
   el.id = id;
   el.setAttribute("role", "listbox");
   el.setAttribute("aria-label", label);
@@ -41,7 +41,7 @@ export function createMentionPicker({ document: doc = globalThis.document, onPic
   const draw = () => {
     if (!people.length) {
       const none = doc.createElement("div");
-      none.className = "page-menu-title";
+      none.className = "blockeditor-menu-title";
       none.textContent = empty;
       el.replaceChildren(none);
       return;
@@ -64,8 +64,8 @@ export function createMentionPicker({ document: doc = globalThis.document, onPic
   // The caret the list hangs from, in the page's own placement variables: the same ones
   // the block menu writes, so the existing menu stylesheet paints and lifts it.
   const place = (at) => {
-    el.style.setProperty("--page-pop-x", `${at.x}px`);
-    el.style.setProperty("--page-pop-y", `${at.y}px`);
+    el.style.setProperty("--blockeditor-pop-x", `${at.x}px`);
+    el.style.setProperty("--blockeditor-pop-y", `${at.y}px`);
   };
 
   return {

package/src/page/merge.js

@@ -5,7 +5,7 @@ const same = (a, b) => canon(a) === canon(b);
 
 function inlineOf(item, doc) {
   const article = doc.createElement("article");
-  article.setAttribute("data-page", "");
+  article.setAttribute("data-blockeditor", "");
   article.innerHTML = renderModel([{ id: item.id, t: "paragraph", c: item.c ?? "", ...(item.m ? { m: item.m } : {}) }], { clean: fragmentCleaner(doc) });
   return article;
 }

package/src/page/placeholder.js

@@ -14,7 +14,7 @@ function titlePlaceholder(doc) {
     if (done) return;
     if (node.type !== schema.nodes.heading || node.attrs.level !== 1 || (node.attrs.parent ?? null) !== null) return;
     done = true;
-    if (!node.content.size) decoration = Decoration.node(offset, offset + node.nodeSize, { class: "page-title-placeholder", "data-placeholder": TITLE_PLACEHOLDER });
+    if (!node.content.size) decoration = Decoration.node(offset, offset + node.nodeSize, { class: "blockeditor-title-placeholder", "data-placeholder": TITLE_PLACEHOLDER });
   });
   return decoration;
 }
@@ -26,7 +26,7 @@ function checkPlaceholders(doc) {
   doc.forEach((node, offset) => {
     if (node.type !== schema.nodes.list_item || node.attrs.kind !== "check") return;
     if (node.content.size || node.attrs.checked) return;
-    decorations.push(Decoration.node(offset, offset + node.nodeSize, { class: "page-check-placeholder", "data-placeholder": CHECK_PLACEHOLDER }));
+    decorations.push(Decoration.node(offset, offset + node.nodeSize, { class: "blockeditor-check-placeholder", "data-placeholder": CHECK_PLACEHOLDER }));
   });
   return decorations;
 }
@@ -45,7 +45,7 @@ export function placeholderPlugin(text = PLACEHOLDER_TEXT) {
             const node = $from.parent;
             if (node.type === schema.nodes.paragraph && !node.content.size) {
               const pos = $from.before(1);
-              decorations.push(Decoration.node(pos, pos + node.nodeSize, { class: "page-placeholder", "data-placeholder": text }));
+              decorations.push(Decoration.node(pos, pos + node.nodeSize, { class: "blockeditor-placeholder", "data-placeholder": text }));
             }
           }
         }

package/src/page/projection.js

@@ -25,15 +25,15 @@ const KNOWN = new Set(CODES);
 // semantic envelope: canonical JSON, base64url, in one attribute. The block
 // envelope holds the block record, the marks envelope the descriptors of one
 // run, and the visible text stays the readable fallback.
-export const OPAQUE = "data-clay-page-opaque";
-export const VALUE = "data-clay-page-value";
-export const MARKS = "data-clay-page-marks";
+export const OPAQUE = "data-clay-blockeditor-opaque";
+export const VALUE = "data-clay-blockeditor-value";
+export const MARKS = "data-clay-blockeditor-marks";
 // A person mention's span states its id plainly beside the envelope that carries it:
 // the label is the text, and a reader without the editor shows a name, never a link.
-export const MENTION = "data-page-mention";
+export const MENTION = "data-blockeditor-mention";
 // A date mention reads as a `time` element: the text is the ISO date and `datetime`
 // repeats it, so a reader without the editor shows the day and no zone or reminder.
-export const DATE = "data-page-date";
+export const DATE = "data-blockeditor-date";
 const DAY = /^\d{4}-\d{2}-\d{2}$/;
 const ENVELOPE = "1";
 const STRUCTURAL = new Set(["id", "t", "parent", "c", "m"]);
@@ -60,7 +60,7 @@ export const DEFAULTS = {
 };
 const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "quote", "code_block", "toggle"]);
 export const TOC_LABEL = "Table of contents";
-export const TOC_ANCHOR = "page-block-";
+export const TOC_ANCHOR = "blockeditor-block-";
 export const blockAnchor = (id) => `${TOC_ANCHOR}${b64url(String(id ?? ""))}`;
 const TOC_MAX_LEVEL = 3;
 const tocLevel = (item) => (item.t === "heading"
@@ -530,9 +530,9 @@ export function renderInline(c, m, marksEnvelopes = true) {
 }
 
 const inlineOf = (item) => renderInline(item.c ?? "", item.m);
-const titleHtml = (item) => `<header${attr("data-id", item.id)} data-page-heading="1"${extrasOfItem(item)}>${item.pageCoverSrc ? `<img data-page-cover${attr("src", item.pageCoverSrc)}${attr("alt", item.pageCoverAlt ?? "")} style="object-position:${item.pageCoverX ?? 50}% ${item.pageCoverY ?? 50}%">` : ""}${item.pageIcon ? `<span data-page-icon aria-hidden="true">${escText(item.pageIcon)}</span>` : ""}<h1>${inlineOf(item)}</h1></header>`;
+const titleHtml = (item) => `<header${attr("data-id", item.id)} data-blockeditor-heading="1"${extrasOfItem(item)}>${item.pageCoverSrc ? `<img data-blockeditor-cover${attr("src", item.pageCoverSrc)}${attr("alt", item.pageCoverAlt ?? "")} style="object-position:${item.pageCoverX ?? 50}% ${item.pageCoverY ?? 50}%">` : ""}${item.pageIcon ? `<span data-blockeditor-icon aria-hidden="true">${escText(item.pageIcon)}</span>` : ""}<h1>${inlineOf(item)}</h1></header>`;
 const toolData = (item) => item.artifact || item.rev || (item.state && Object.keys(item.state).length)
-  ? `<script type="application/json" data-tool>${canon({ artifact: item.artifact ?? null, rev: item.rev ?? null, state: item.state ?? {} }).replace(/</g, "\\u003c")}</script>`
+  ? `<script type="application/json" clay="no-data" data-tool>${canon({ artifact: item.artifact ?? null, rev: item.rev ?? null, state: item.state ?? {} }).replace(/</g, "\\u003c")}</script>`
   : "";
 // A header names its column for every cell under it: the table id and the column
 // id together, so a copied column keeps a name no other table shares.
@@ -547,7 +547,7 @@ function renderLeaf(item, clean, tables) {
   switch (item.t) {
     case "paragraph": return `<p${at}>${inlineOf(item)}</p>`;
     case "heading": { const h = `h${item.level ?? 2}`; return `<${h}${at}>${inlineOf(item)}</${h}>`; }
-    case "callout": return `<aside${at} class="page-callout">${inlineOf(item)}</aside>`;
+    case "callout": return `<aside${at} class="blockeditor-callout">${inlineOf(item)}</aside>`;
     case "quote": return `<blockquote${at}>${inlineOf(item)}</blockquote>`;
     case "code_block": return `<pre${at}${attr("data-lang", item.lang || null)}><code>${escText(item.c ?? "")}</code></pre>`;
     case "divider": return `<hr${at}>`;
@@ -789,8 +789,8 @@ export function parseArticle(article) {
     const onlyImage = tag === "P" && el.children.length === 1 && el.children[0].tagName === "IMG" && !el.textContent.trim();
     if (tag === "P" && !onlyImage) return push(el, "paragraph", parent, { ...omitDefaults("paragraph", P), ...tf(el) });
     if (/^H[1-6]$/.test(tag)) return push(el, "heading", parent, { ...omitDefaults("heading", { ...P, level: +tag[1] }), ...tf(el) });
-    if (tag === "HEADER" && el.getAttribute("data-page-heading") === ENVELOPE) {
-      const icon = el.querySelector(":scope > [data-page-icon]");
+    if (tag === "HEADER" && el.getAttribute("data-blockeditor-heading") === ENVELOPE) {
+      const icon = el.querySelector(":scope > [data-blockeditor-icon]");
       const cover = el.querySelector(":scope > img");
       const [, x, y] = /object-position:\s*([-\d.]+)%\s+([-\d.]+)%/.exec(cover?.getAttribute("style") ?? "") ?? [];
       const cover0 = cover ? { pageCoverSrc: safeSrc(cover.getAttribute("src")), pageCoverAlt: cover.getAttribute("alt") ?? "", pageCoverX: focal(x), pageCoverY: focal(y) } : {};

package/src/page/reader-patch.js

@@ -10,7 +10,7 @@
 // card id can never match an article block id. An id that appears twice is not
 // reused at all: neither occurrence promises node identity.
 
-const ARTICLE = "article[data-page]";
+const ARTICLE = "article[data-blockeditor]";
 const TOOL = 'section[data-type="tool"][data-id]';
 const CONTAINERS = new Set(["UL", "OL", "LI", "DETAILS"]);
 const LISTS = new Set(["UL", "OL"]);
@@ -60,7 +60,7 @@ export function toolsOf(root) {
 }
 
 export function toolStateOf(doc) {
-  const tag = doc.querySelector('script[type="application/json"][merge="page.tools"]');
+  const tag = doc.querySelector('script[type="application/json"][merge="blockeditor.tools"]');
   if (!tag) return {};
   try { return JSON.parse(tag.textContent); } catch { return {}; }
 }

package/src/page/recover.js

@@ -5,26 +5,26 @@ import { mountEditorUI } from "../ui/editor-ui.js";
 export const NOTICE_TEXT = "Some text you typed was kept aside when its block moved or was removed.";
 
 // The control and its panel sit in one shadow root inside the page shell, so the page's
-// CSS cannot restyle them. The page's --page-* tokens still reach them, and they keep
+// CSS cannot restyle them. The page's --blockeditor-* tokens still reach them, and they keep
 // the page's font and colour.
 const STYLES = `
 :host { font: inherit !important; color: inherit !important; }
-.page-recover-root { display: contents; }
-.page-recover { position: fixed; right: 16px; bottom: 16px; z-index: 20; min-height: 36px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--page-ink); background: var(--page-pop-bg); border: 1px solid var(--page-chrome-line-rest); border-radius: 999px; cursor: pointer; }
-.page-recover[hidden], .page-recover-panel[hidden] { display: none; }
-.page-recover-panel { position: fixed; right: 16px; bottom: 64px; z-index: 21; width: min(380px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; color: var(--page-ink); background: var(--page-pop-bg); border: 1px solid var(--page-chrome-line-rest); border-radius: var(--page-chrome-radius); padding: 8px; box-sizing: border-box; }
-.page-recover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 8px; font-weight: 600; }
-.page-recover-note { margin: 0 6px 8px; font-size: 13px; opacity: .72; }
-.page-recover-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; min-height: 44px; padding: 8px 6px; border-top: 1px solid var(--page-chrome-line-rest); }
-.page-recover-row.is-target { outline: 2px solid var(--page-accent, currentColor); outline-offset: -2px; }
-.page-recover-meta { grid-column: 1; font-size: 12px; opacity: .72; }
-.page-recover-text { grid-column: 1; overflow-wrap: anywhere; }
-.page-recover-text mark { background: var(--page-mark-bg, rgba(255, 214, 102, .45)); color: inherit; border-radius: 2px; }
-.page-recover-row button, .page-recover-head button { grid-column: 2; grid-row: 1 / span 2; min-height: 36px; padding: 0 12px; font: inherit; font-size: 14px; color: inherit; background: transparent; border: 1px solid var(--page-chrome-line-rest); border-radius: var(--page-chrome-radius); cursor: pointer; }
+.blockeditor-recover-root { display: contents; }
+.blockeditor-recover { position: fixed; right: 16px; bottom: 16px; z-index: 20; min-height: 36px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--blockeditor-ink); background: var(--blockeditor-pop-bg); border: 1px solid var(--blockeditor-chrome-line-rest); border-radius: 999px; cursor: pointer; }
+.blockeditor-recover[hidden], .blockeditor-recover-panel[hidden] { display: none; }
+.blockeditor-recover-panel { position: fixed; right: 16px; bottom: 64px; z-index: 21; width: min(380px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; color: var(--blockeditor-ink); background: var(--blockeditor-pop-bg); border: 1px solid var(--blockeditor-chrome-line-rest); border-radius: var(--blockeditor-chrome-radius); padding: 8px; box-sizing: border-box; }
+.blockeditor-recover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 8px; font-weight: 600; }
+.blockeditor-recover-note { margin: 0 6px 8px; font-size: 13px; opacity: .72; }
+.blockeditor-recover-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; min-height: 44px; padding: 8px 6px; border-top: 1px solid var(--blockeditor-chrome-line-rest); }
+.blockeditor-recover-row.is-target { outline: 2px solid var(--blockeditor-accent, currentColor); outline-offset: -2px; }
+.blockeditor-recover-meta { grid-column: 1; font-size: 12px; opacity: .72; }
+.blockeditor-recover-text { grid-column: 1; overflow-wrap: anywhere; }
+.blockeditor-recover-text mark { background: var(--blockeditor-mark-bg, rgba(255, 214, 102, .45)); color: inherit; border-radius: 2px; }
+.blockeditor-recover-row button, .blockeditor-recover-head button { grid-column: 2; grid-row: 1 / span 2; min-height: 36px; padding: 0 12px; font: inherit; font-size: 14px; color: inherit; background: transparent; border: 1px solid var(--blockeditor-chrome-line-rest); border-radius: var(--blockeditor-chrome-radius); cursor: pointer; }
 @media (max-width: 560px) {
-  .page-recover { top: 12px; bottom: auto; min-height: 44px; }
-  .page-recover-panel { left: 0; right: 0; bottom: 0; width: 100%; max-height: 70vh; border-radius: var(--page-chrome-radius) var(--page-chrome-radius) 0 0; }
-  .page-recover-row button, .page-recover-head button { min-height: 44px; }
+  .blockeditor-recover { top: 12px; bottom: auto; min-height: 44px; }
+  .blockeditor-recover-panel { left: 0; right: 0; bottom: 0; width: 100%; max-height: 70vh; border-radius: var(--blockeditor-chrome-radius) var(--blockeditor-chrome-radius) 0 0; }
+  .blockeditor-recover-row button, .blockeditor-recover-head button { min-height: 44px; }
 }
 `;
 
@@ -40,7 +40,7 @@ const el = (doc, tag, className, attrs = {}) => {
 
 
 function previewOf(doc, record) {
-  const out = el(doc, "div", "page-recover-text");
+  const out = el(doc, "div", "blockeditor-recover-text");
   let used = 0;
   for (const block of record.blocks) {
     for (const run of block.runs) {
@@ -73,13 +73,13 @@ export function focusBlock(view, id) {
 export function createRecoverList({ binding, mount, ownTokens = [], onRestored = () => {}, onStale = () => {} }) {
   const doc = mount.ownerDocument;
   const own = new Set(ownTokens.filter(Boolean));
-  const button = el(doc, "button", "page-recover", { type: "button", "aria-haspopup": "dialog", "aria-expanded": "false" });
-  const panel = el(doc, "div", "page-recover-panel", { role: "dialog", "aria-label": "Recover changes" });
+  const button = el(doc, "button", "blockeditor-recover", { type: "button", "aria-haspopup": "dialog", "aria-expanded": "false" });
+  const panel = el(doc, "div", "blockeditor-recover-panel", { role: "dialog", "aria-label": "Recover changes" });
   button.hidden = true;
   panel.hidden = true;
-  const content = el(doc, "div", "page-recover-root");
+  const content = el(doc, "div", "blockeditor-recover-root");
   content.append(button, panel);
-  const ui = mountEditorUI({ name: "page-recover", content, css: [STYLES], parent: mount });
+  const ui = mountEditorUI({ name: "blockeditor-recover", content, css: [STYLES], parent: mount });
 
   let snapshot = { recoverable: [], notices: [] };
   let target = null;
@@ -112,19 +112,19 @@ export function createRecoverList({ binding, mount, ownTokens = [], onRestored =
 
   const draw = () => {
     panel.replaceChildren();
-    const head = el(doc, "div", "page-recover-head");
+    const head = el(doc, "div", "blockeditor-recover-head");
     head.append(doc.createTextNode("Recover changes"));
     const done = el(doc, "button", "", { type: "button" });
     done.textContent = "Close";
     done.addEventListener("click", () => { close(); button.focus(); });
     head.append(done);
-    const note = el(doc, "p", "page-recover-note");
+    const note = el(doc, "p", "blockeditor-recover-note");
     note.textContent = "Text typed while its block was moved or removed. Restore puts it back as a new block.";
     panel.append(head, note);
     for (const record of snapshot.recoverable) {
-      const row = el(doc, "div", "page-recover-row", { "data-source": record.source });
+      const row = el(doc, "div", "blockeditor-recover-row", { "data-source": record.source });
       if (record.source === target) row.classList.add("is-target");
-      const meta = el(doc, "div", "page-recover-meta");
+      const meta = el(doc, "div", "blockeditor-recover-meta");
       meta.textContent = `${TYPE_LABELS[record.type] ?? "Paragraph"} · ${who(authorsOf(record))}`;
       const action = el(doc, "button", "", { type: "button" });
       action.textContent = "Restore";
@@ -140,7 +140,7 @@ export function createRecoverList({ binding, mount, ownTokens = [], onRestored =
     panel.hidden = false;
     button.setAttribute("aria-expanded", "true");
     draw();
-    const rows = [...panel.querySelectorAll(".page-recover-row")];
+    const rows = [...panel.querySelectorAll(".blockeditor-recover-row")];
     const focus = (rows.find((row) => row.dataset.source === source) ?? rows[0])?.querySelector("button");
     focus?.focus();
   };