@panphora/clayjs 1.23.0 → 1.24.1

package/src/page/chart.js

@@ -154,7 +154,7 @@ function option(doc, value, label, selected = false) {
 }
 
 function select(doc, field, label) {
-  const node = element(doc, "select", "page-chart-select");
+  const node = element(doc, "select", "blockeditor-chart-select");
   node.dataset.field = field;
   node.setAttribute("aria-label", label);
   return node;
@@ -173,21 +173,21 @@ export class ChartView {
     const doc = view.dom.ownerDocument;
     this.doc = doc;
     this.dom = doc.createElement("figure");
-    this.dom.className = "page-chart";
+    this.dom.className = "blockeditor-chart";
     this.dom.dataset.id = node.attrs.id ?? "";
     this.dom.dataset.type = "chart";
-    this.head = element(doc, "div", "page-chart-head");
+    this.head = element(doc, "div", "blockeditor-chart-head");
     this.head.contentEditable = "false";
-    this.title = element(doc, "span", "page-chart-title");
-    this.chip = element(doc, "button", "page-chart-source");
+    this.title = element(doc, "span", "blockeditor-chart-title");
+    this.chip = element(doc, "button", "blockeditor-chart-source");
     this.chip.type = "button";
     this.chip.contentEditable = "false";
     this.chip.setAttribute("aria-label", "Go to source table");
     this.chip.innerHTML = TABLE_ICON;
-    this.chipName = element(doc, "span", "page-chart-source-name");
+    this.chipName = element(doc, "span", "blockeditor-chart-source-name");
     this.chip.append(this.chipName);
     this.chip.addEventListener("click", () => this.goToSource());
-    this.edit = element(doc, "button", "page-chart-edit");
+    this.edit = element(doc, "button", "blockeditor-chart-edit");
     this.edit.type = "button";
     this.edit.contentEditable = "false";
     this.edit.setAttribute("aria-haspopup", "dialog");
@@ -196,14 +196,14 @@ export class ChartView {
     this.edit.append("Edit chart");
     this.edit.addEventListener("click", () => (this.panel.isConnected ? this.closePanel(true) : this.openPanel()));
     this.head.append(this.title, this.chip, this.edit);
-    this.plot = element(doc, "div", "page-chart-plot");
-    this.broken = element(doc, "div", "page-chart-broken");
+    this.plot = element(doc, "div", "blockeditor-chart-plot");
+    this.broken = element(doc, "div", "blockeditor-chart-broken");
     this.broken.hidden = true;
     this.broken.contentEditable = "false";
     this.brokenKey = null;
     this.brokenSelect = null;
     this.broken.addEventListener("click", (event) => this.brokenClick(event));
-    this.panel = element(doc, "div", "page-chart-panel");
+    this.panel = element(doc, "div", "blockeditor-chart-panel");
     this.panel.tabIndex = -1;
     this.panel.contentEditable = "false";
     this.panel.setAttribute("role", "dialog");
@@ -277,20 +277,20 @@ export class ChartView {
     const doc = this.doc;
     this.broken.textContent = "";
     this.broken.append(
-      element(doc, "div", "page-chart-broken-head", "This chart's table was deleted"),
-      element(doc, "p", "page-chart-broken-text", "Pick another table in this document, or delete the chart. Undo brings the table back."),
+      element(doc, "div", "blockeditor-chart-broken-head", "This chart's table was deleted"),
+      element(doc, "p", "blockeditor-chart-broken-text", "Pick another table in this document, or delete the chart. Undo brings the table back."),
     );
-    const actions = element(doc, "div", "page-chart-broken-actions");
+    const actions = element(doc, "div", "blockeditor-chart-broken-actions");
     if (tables.length) {
       const sources = select(doc, "rescue", "Source table");
       for (const table of tables) sources.append(option(doc, table.id, `${table.name} (${table.rows} ${table.rows === 1 ? "row" : "rows"})`));
       this.brokenSelect = sources;
-      const use = element(doc, "button", "page-chart-use", "Use this table");
+      const use = element(doc, "button", "blockeditor-chart-use", "Use this table");
       use.type = "button";
       use.dataset.action = "use";
       actions.append(sources, use);
     }
-    const remove = element(doc, "button", "page-chart-delete", "Delete chart");
+    const remove = element(doc, "button", "blockeditor-chart-delete", "Delete chart");
     remove.type = "button";
     remove.dataset.action = "delete";
     actions.append(remove);
@@ -329,8 +329,8 @@ export class ChartView {
   }
 
   row(label, ...children) {
-    const row = element(this.doc, "div", "page-chart-row");
-    if (label) row.append(element(this.doc, "span", "page-chart-label", label));
+    const row = element(this.doc, "div", "blockeditor-chart-row");
+    if (label) row.append(element(this.doc, "span", "blockeditor-chart-label", label));
     row.append(...children);
     return row;
   }
@@ -370,9 +370,9 @@ export class ChartView {
     this.titleInput = null;
     this.panel.textContent = "";
 
-    const types = element(doc, "div", "page-chart-types");
+    const types = element(doc, "div", "blockeditor-chart-types");
     for (const [kind, label] of CHART_TYPES) {
-      const button = element(doc, "button", "page-chart-type", label);
+      const button = element(doc, "button", "blockeditor-chart-type", label);
       button.type = "button";
       button.dataset.kind = kind;
       button.setAttribute("aria-pressed", String(attrs.kind === kind));
@@ -390,22 +390,22 @@ export class ChartView {
     for (const col of cols) labels.append(option(doc, col.id, col.name || col.id, col.id === attrs.x));
     this.panel.append(this.row("Labels column", labels));
 
-    const values = element(doc, "div", "page-chart-values");
+    const values = element(doc, "div", "blockeditor-chart-values");
     cols.filter((col) => col.id !== attrs.x).forEach((col, index) => {
-      const line = element(doc, "label", "page-chart-value");
+      const line = element(doc, "label", "blockeditor-chart-value");
       const check = element(doc, "input");
       check.type = "checkbox";
       check.dataset.field = "series";
       check.dataset.col = col.id;
       check.checked = attrs.series.includes(col.id);
-      const swatch = element(doc, "span", "page-chart-swatch");
+      const swatch = element(doc, "span", "blockeditor-chart-swatch");
       swatch.style.background = `var(--chart-${index % 6 + 1})`;
       swatch.setAttribute("aria-hidden", "true");
-      line.append(check, swatch, element(doc, "span", "page-chart-value-name", col.name || col.id));
+      line.append(check, swatch, element(doc, "span", "blockeditor-chart-value-name", col.name || col.id));
       values.append(line);
     });
     const valueRow = this.row(pie ? "Value column" : "Value columns", values);
-    if (pie) valueRow.append(element(doc, "span", "page-chart-hint", "Pie charts plot the first value column across rows."));
+    if (pie) valueRow.append(element(doc, "span", "blockeditor-chart-hint", "Pie charts plot the first value column across rows."));
     this.panel.append(valueRow);
 
     const highlight = select(doc, "highlight", "Highlight row");
@@ -413,7 +413,7 @@ export class ChartView {
     for (const row of rows) highlight.append(option(doc, row.id, cellText(row.cells?.[attrs.x]) || row.id, row.id === attrs.highlight));
     this.panel.append(this.row("Highlight row", highlight));
 
-    const title = element(doc, "input", "page-chart-title-input");
+    const title = element(doc, "input", "blockeditor-chart-title-input");
     title.type = "text";
     title.dataset.field = "title";
     title.setAttribute("aria-label", "Chart title");
@@ -430,13 +430,13 @@ export class ChartView {
     this.titleInput = title;
     this.panel.append(this.row("Chart title", title));
 
-    const foot = element(doc, "div", "page-chart-foot");
-    const remove = element(doc, "button", "page-chart-remove");
+    const foot = element(doc, "div", "blockeditor-chart-foot");
+    const remove = element(doc, "button", "blockeditor-chart-remove");
     remove.type = "button";
     remove.dataset.action = "remove";
     remove.innerHTML = TRASH_ICON;
     remove.append("Remove");
-    const done = element(doc, "button", "page-chart-done", "Done");
+    const done = element(doc, "button", "blockeditor-chart-done", "Done");
     done.type = "button";
     done.dataset.action = "done";
     foot.append(remove, done);
@@ -536,7 +536,7 @@ export class ChartView {
     return true;
   }
 
-  stopEvent(event) { return !!event.target.closest?.(".page-chart-head, .page-chart-panel"); }
+  stopEvent(event) { return !!event.target.closest?.(".blockeditor-chart-head, .blockeditor-chart-panel"); }
 
   destroy() {
     this.unsaved?.dispose();

package/src/page/checkpoint-proof.js

@@ -14,7 +14,7 @@
  * meaning, a page rebuilt from another article or a stale tag all produce no proof, and
  * the records stay.
  *
- * The second half is the conditional page-state client: the host's own copy of the page
+ * The second half is the conditional blockeditor-state client: the host's own copy of the page
  * state, asked for by the accepted ETag, for the cases a local capture cannot answer —
  * the server's checkpoint, another writer's, and a lost reply that only a verified
  * refetch can reconcile. Nothing here reads a cookie, a room sequence or a version
@@ -35,7 +35,7 @@ import { articleOfPageState, pageStateOfClone } from "./save-projection.js";
 // clone whose bytes it sends, after every transform.
 setCapturePageState(pageStateOfClone);
 
-/** The only page-state resource version this client reads. */
+/** The only blockeditor-state resource version this client reads. */
 export const PAGE_STATE_VERSION = 1;
 
 export class PageCheckpointError extends Error {
@@ -79,7 +79,7 @@ const idKey = (value) => (value === null || value === undefined ? "" : String(va
  * failure are refusals with a code: the caller keeps its records and asks again later.
  *
  * @param {Object} options
- * @param {string} options.href - the resource discovery named in `document.pageState.href`
+ * @param {string} options.href - the resource discovery named in `document.blockeditorState.href`
  * @param {string} options.etag - the ETag the accepted bytes were stored under
  * @param {Function} [options.fetch]
  * @param {AbortSignal} [options.signal]
@@ -87,12 +87,12 @@ const idKey = (value) => (value === null || value === undefined ? "" : String(va
  */
 export async function readPageState({ href, etag, fetch: doFetch = globalThis.fetch, signal = null } = {}) {
   if (typeof etag !== "string" || !etag) return refused("missing-etag", "A conditional read needs the accepted ETag");
-  if (typeof href !== "string" || !href) return refused("no-page-state", "This host names no page-state resource");
+  if (typeof href !== "string" || !href) return refused("no-blockeditor-state", "This host names no blockeditor-state resource");
   if (typeof doFetch !== "function") return refused("unavailable", "This tab cannot read the page state");
   const base = globalThis.location?.href ?? "http://localhost/";
   let url;
   try { url = new URL(href, base).href; }
-  catch (_) { return refused("no-page-state", "The page-state resource is not a URL"); }
+  catch (_) { return refused("no-blockeditor-state", "The blockeditor-state resource is not a URL"); }
   const token = saveToken();
   let res;
   try {
@@ -105,23 +105,23 @@ export async function readPageState({ href, etag, fetch: doFetch = globalThis.fe
       signal,
     });
   } catch (_) {
-    return refused("unavailable", "The page-state request did not complete");
+    return refused("unavailable", "The blockeditor-state request did not complete");
   }
-  if (!res || typeof res.status !== "number") return refused("unavailable", "The page-state request did not answer");
+  if (!res || typeof res.status !== "number") return refused("unavailable", "The blockeditor-state request did not answer");
   if (res.status === 412) return refused("etag-mismatch", "Another version of this document is stored");
   if (res.status === 428) return refused("etag-required", "The host needs a condition this read cannot send");
-  if (res.status === 404) return refused("no-page-state", "This host keeps no page state");
+  if (res.status === 404) return refused("no-blockeditor-state", "This host keeps no page state");
   if (!res.ok) return refused("unavailable", `The host answered ${res.status}`);
 
   let body;
   try { body = JSON.parse(await res.text()); }
-  catch (_) { return refused("invalid-state", "The page-state answer is not JSON"); }
-  if (!isObject(body) || body.version !== PAGE_STATE_VERSION) return refused("unsupported-version", "Unknown page-state version");
-  if (typeof body.tag !== "string" || !body.tag) return refused("invalid-state", "The page-state answer carries no page tag");
-  if (typeof body.stateHash !== "string" || !HEX64.test(body.stateHash)) return refused("invalid-state", "The page-state answer carries no state digest");
-  if (typeof body.generation !== "string" || !GENERATION.test(body.generation)) return refused("invalid-state", "The page-state answer carries no generation");
-  if (typeof body.etag !== "string" || !body.etag) return refused("invalid-state", "The page-state answer carries no ETag");
-  if (!Object.hasOwn(body, "documentId")) return refused("invalid-state", "The page-state answer carries no document identity");
+  catch (_) { return refused("invalid-state", "The blockeditor-state answer is not JSON"); }
+  if (!isObject(body) || body.version !== PAGE_STATE_VERSION) return refused("unsupported-version", "Unknown blockeditor-state version");
+  if (typeof body.tag !== "string" || !body.tag) return refused("invalid-state", "The blockeditor-state answer carries no page tag");
+  if (typeof body.stateHash !== "string" || !HEX64.test(body.stateHash)) return refused("invalid-state", "The blockeditor-state answer carries no state digest");
+  if (typeof body.generation !== "string" || !GENERATION.test(body.generation)) return refused("invalid-state", "The blockeditor-state answer carries no generation");
+  if (typeof body.etag !== "string" || !body.etag) return refused("invalid-state", "The blockeditor-state answer carries no ETag");
+  if (!Object.hasOwn(body, "documentId")) return refused("invalid-state", "The blockeditor-state answer carries no document identity");
   return {
     ok: true,
     version: body.version,
@@ -149,7 +149,7 @@ export async function readPageState({ href, etag, fetch: doFetch = globalThis.fe
  * @param {{authority: Object, lineage: Object}} options.accepted
  * @param {string} options.article - the final outgoing canonical article
  * @param {string} options.etag - the ETag the accepted save carried
- * @returns {Promise<{ok: true, state: Object, receipt: {file: string, pageState: string}}|{ok: false, code: string, message: string}>}
+ * @returns {Promise<{ok: true, state: Object, receipt: {file: string, blockeditorState: string}}|{ok: false, code: string, message: string}>}
  */
 export async function verifyPageState(read, { accepted, article, etag } = {}) {
   if (!read || read.ok !== true) return refused(read?.code ?? "unavailable", read?.message ?? "The page state was not read");
@@ -167,7 +167,7 @@ export async function verifyPageState(read, { accepted, article, etag } = {}) {
   try { projected = articleOfPageState(state); }
   catch (error) { return refused("invalid-state", error?.message ?? "The page state does not project"); }
   if (projected !== article) return refused("article-mismatch", "The page state does not project to the accepted article");
-  return { ok: true, state, receipt: { file: read.etag, pageState: read.stateHash } };
+  return { ok: true, state, receipt: { file: read.etag, blockeditorState: read.stateHash } };
 }
 
 // A proof is only worth the records the validator confirms, over the revisions the
@@ -217,7 +217,7 @@ export async function captureProof({ capture, records = [], accepted, article, s
       accepted,
       article,
       state,
-      receipt: { file: etag, pageState: await digestHex(stateBytes) },
+      receipt: { file: etag, blockeditorState: await digestHex(stateBytes) },
     });
   } catch (error) {
     return refused(error?.code ?? "invalid-proof", error?.message ?? "The proof could not be built");
@@ -265,7 +265,7 @@ export async function refetchedProof({ read, capture, records = [], accepted, ar
  * @param {string} options.article
  * @param {Object} [options.state] - the page state pinned to the capture
  * @param {string} options.etag
- * @param {?string} [options.href] - the page-state resource, or null
+ * @param {?string} [options.href] - the blockeditor-state resource, or null
  * @param {Function} [options.read]
  * @param {Function} [options.fetch]
  * @returns {Promise<{ok: boolean, retired: Array, proof: ?Object, code?: string}>}

package/src/page/chrome.js

@@ -2,7 +2,7 @@
 // line, a toolbar over a text selection and a block menu (from the plus or "/").
 // At rest everything is faint; moving the pointer adds .is-moved to the shell,
 // which themes darken by a small step. All of it is themed through the
-// --page-* tokens in editor.js (contract: default-page/v1/look/THEME-CONTRACT.md).
+// --blockeditor-* tokens in editor.js (contract: default-page/v1/look/THEME-CONTRACT.md).
 import { state, commands } from "../vendor/prosemirror.vendor.js";
 import { schema } from "./schema.js";
 import { BlockSelection, siblingSpan, moveBlock, indentBlocks, outdentBlocks } from "./blocks.js";
@@ -262,19 +262,19 @@ const el = (tag, cls, attrs = {}) => {
 };
 
 function toolButton(name, label) {
-  const b = el("button", `page-tool${PHONE_TOOLS.has(name) ? " page-tool-primary" : " page-tool-desk"}`, { type: "button", "data-cmd": name, "aria-label": label, title: label });
+  const b = el("button", `blockeditor-tool${PHONE_TOOLS.has(name) ? " blockeditor-tool-primary" : " blockeditor-tool-desk"}`, { type: "button", "data-cmd": name, "aria-label": label, title: label });
   b.innerHTML = ICONS[name];
   return b;
 }
 
 const MOVED_MS = 1600;
 let menuCount = 0;
-export const chromeKey = new PluginKey("page-chrome");
+export const chromeKey = new PluginKey("blockeditor-chrome");
 const chromeFor = new WeakMap();
 
 // A range a slash menu chose, held in plugin state so it follows the document
 // while the action it belongs to waits for code to load.
-export const slashRangeKey = new PluginKey("page-slash-range");
+export const slashRangeKey = new PluginKey("blockeditor-slash-range");
 const slashRangeState = {
   init: () => null,
   apply(tr, value) {
@@ -324,9 +324,10 @@ export function reanchorPageMenu(view, from, to) {
 }
 
 class Chrome {
-  constructor(view, onAiTool) {
+  constructor(view, onAiTool, mediaNote) {
     this.view = view;
     this.onAiTool = onAiTool;
+    this.mediaNote = mediaNote;
     this.shell = view.dom.parentElement;
     this.menu = null;
     this.priorAria = null;
@@ -340,33 +341,33 @@ class Chrome {
     this.roving = null;
     this.remote = false;
 
-    this.dock = el("div", "page-dock", { role: "toolbar", "aria-label": "Formatting" });
-    this.turn = el("button", "page-tool page-tool-turn page-tool-desk", { type: "button", "aria-haspopup": "menu" });
-    this.more = el("button", "page-tool page-tool-primary page-tool-more", { type: "button", "aria-label": "More", title: "More", "aria-haspopup": "menu" });
+    this.dock = el("div", "blockeditor-dock", { role: "toolbar", "aria-label": "Formatting" });
+    this.turn = el("button", "blockeditor-tool blockeditor-tool-turn blockeditor-tool-desk", { type: "button", "aria-haspopup": "menu" });
+    this.more = el("button", "blockeditor-tool blockeditor-tool-primary blockeditor-tool-more", { type: "button", "aria-label": "More", title: "More", "aria-haspopup": "menu" });
     this.more.innerHTML = ICONS.more;
-    this.settingsBtn = el("button", "page-tool page-tool-desk page-tool-settings", { type: "button", "aria-label": "Document settings", title: "Document settings", "aria-haspopup": "dialog", "aria-expanded": "false" });
+    this.settingsBtn = el("button", "blockeditor-tool blockeditor-tool-desk blockeditor-tool-settings", { type: "button", "aria-label": "Document settings", title: "Document settings", "aria-haspopup": "dialog", "aria-expanded": "false" });
     this.settingsBtn.innerHTML = ICONS.gear;
     this.settingsEl = null;
     this.settingsOpen = false;
     this.settingsAnchor = null;
     this.settingSwitches = {};
-    this.dock.append(this.turn, el("span", "page-tool-sep page-tool-desk"), ...TOOLS.map(([n, l]) => toolButton(n, l)), this.more);
+    this.dock.append(this.turn, el("span", "blockeditor-tool-sep blockeditor-tool-desk"), ...TOOLS.map(([n, l]) => toolButton(n, l)), this.more);
     // The loader publishes the page facade when its module arrives, which can be after
     // this toolbar is built, so the gear asks for the settings each time it is drawn.
     this.dock.insertBefore(this.settingsBtn, this.more);
     this.settingsBtn.hidden = !this.settingsAPI;
-    this.plus = el("button", "page-plus", { type: "button", "aria-label": "Add a block", title: "Add a block" });
+    this.plus = el("button", "blockeditor-plus", { type: "button", "aria-label": "Add a block", title: "Add a block" });
     this.plus.innerHTML = ICONS.plus;
-    this.grip = el("button", "page-grip", { type: "button", "aria-label": "Block actions", title: "Drag to move, click for actions", "aria-haspopup": "menu" });
+    this.grip = el("button", "blockeditor-grip", { type: "button", "aria-label": "Block actions", title: "Drag to move, click for actions", "aria-haspopup": "menu" });
     this.grip.innerHTML = ICONS.grip;
-    this.bubble = el("div", "page-bubble", { role: "toolbar", "aria-label": "Selection", hidden: "" });
-    this.bubbleTurn = el("button", "page-tool page-tool-turn", { type: "button", "aria-haspopup": "menu" });
-    this.bubbleMore = el("button", "page-tool page-tool-primary page-tool-more", { type: "button", "aria-label": "More", title: "More", "aria-haspopup": "menu" });
+    this.bubble = el("div", "blockeditor-bubble", { role: "toolbar", "aria-label": "Selection", hidden: "" });
+    this.bubbleTurn = el("button", "blockeditor-tool blockeditor-tool-turn", { type: "button", "aria-haspopup": "menu" });
+    this.bubbleMore = el("button", "blockeditor-tool blockeditor-tool-primary blockeditor-tool-more", { type: "button", "aria-label": "More", title: "More", "aria-haspopup": "menu" });
     this.bubbleMore.innerHTML = ICONS.more;
-    this.bubble.append(this.bubbleTurn, el("span", "page-tool-sep"), ...TOOLS.map(([n, l]) => toolButton(n, l)), this.bubbleMore);
-    this.menuId = `page-menu-${++menuCount}`;
-    this.menuEl = el("div", "page-menu", { role: "menu", id: this.menuId, hidden: "" });
-    this.scrim = el("div", "page-scrim", { hidden: "" });
+    this.bubble.append(this.bubbleTurn, el("span", "blockeditor-tool-sep"), ...TOOLS.map(([n, l]) => toolButton(n, l)), this.bubbleMore);
+    this.menuId = `blockeditor-menu-${++menuCount}`;
+    this.menuEl = el("div", "blockeditor-menu", { role: "menu", id: this.menuId, hidden: "" });
+    this.scrim = el("div", "blockeditor-scrim", { hidden: "" });
     this.shell.insertBefore(this.dock, view.dom);
     this.shell.append(this.plus, this.grip, this.bubble, this.scrim, this.menuEl);
 
@@ -398,7 +399,7 @@ class Chrome {
       scrimPressed = false;
     });
     this.menuEl.addEventListener("click", (e) => {
-      const row = e.target.closest(".page-menu-item");
+      const row = e.target.closest(".blockeditor-menu-item");
       if (row) this.pick(Number(row.dataset.index));
     });
     this.menuEl.addEventListener("keydown", (e) => {
@@ -460,14 +461,14 @@ class Chrome {
 
   dockControls() {
     const all = [...this.dock.querySelectorAll("button")].filter((b) => this.rendered(b));
-    return this.isPhone() ? all.filter((b) => b.classList.contains("page-tool-primary")) : all;
+    return this.isPhone() ? all.filter((b) => b.classList.contains("blockeditor-tool-primary")) : all;
   }
 
   // Every transaction asks whether the roving control is still usable: one style read for
   // that control, not one for every button in the dock.
   inRoving(control) {
     if (!control || !this.dock.contains(control)) return false;
-    if (this.isPhone() && !control.classList.contains("page-tool-primary")) return false;
+    if (this.isPhone() && !control.classList.contains("blockeditor-tool-primary")) return false;
     return this.rendered(control);
   }
 
@@ -595,26 +596,26 @@ class Chrome {
   // placed under the control that opened it.
   buildSettings() {
     if (this.settingsEl) return this.settingsEl;
-    const panel = el("div", "page-settings", { role: "dialog", "aria-label": "Document settings", hidden: "" });
-    const head = el("div", "page-settings-head");
-    const title = el("span", "page-settings-title");
+    const panel = el("div", "blockeditor-settings", { role: "dialog", "aria-label": "Document settings", hidden: "" });
+    const head = el("div", "blockeditor-settings-head");
+    const title = el("span", "blockeditor-settings-title");
     title.textContent = "Document settings";
-    const close = el("button", "page-settings-close", { type: "button", "aria-label": "Close settings" });
+    const close = el("button", "blockeditor-settings-close", { type: "button", "aria-label": "Close settings" });
     close.innerHTML = ICONS.close;
     close.addEventListener("click", () => this.closeSettings(true));
     head.append(title, close);
     const rows = SETTING_ROWS.map(([key, label]) => {
-      const row = el("div", "page-settings-row");
-      const name = el("span", "page-settings-name", { id: `${this.menuId}-set-${key}` });
+      const row = el("div", "blockeditor-settings-row");
+      const name = el("span", "blockeditor-settings-name", { id: `${this.menuId}-set-${key}` });
       name.textContent = label;
-      const sw = el("button", "page-settings-switch", { type: "button", role: "switch", "aria-checked": "true", "aria-labelledby": name.id, "data-setting": key });
-      sw.append(el("span", "page-settings-knob"));
+      const sw = el("button", "blockeditor-settings-switch", { type: "button", role: "switch", "aria-checked": "true", "aria-labelledby": name.id, "data-setting": key });
+      sw.append(el("span", "blockeditor-settings-knob"));
       sw.addEventListener("click", () => this.flipSetting(key));
       this.settingSwitches[key] = sw;
       row.append(name, sw);
       return row;
     });
-    const note = el("div", "page-settings-note");
+    const note = el("div", "blockeditor-settings-note");
     note.textContent = "Hidden values stay saved and come back when turned on.";
     panel.append(head, ...rows, note);
     this.settingsEl = panel;
@@ -643,7 +644,7 @@ class Chrome {
     anchor.setAttribute("aria-expanded", "true");
     panel.hidden = false;
     this.placeSettings();
-    panel.querySelector(".page-settings-close")?.focus({ preventScroll: true });
+    panel.querySelector(".blockeditor-settings-close")?.focus({ preventScroll: true });
   }
 
   closeSettings(restoreFocus = false) {
@@ -674,16 +675,16 @@ class Chrome {
       const x = Math.max(v.left + PHONE_INSET, Math.min(r.right - width, v.left + v.width - PHONE_INSET - width));
       let y = r.top - 6 - height;
       if (y < v.top + PHONE_INSET) y = Math.min(r.bottom + 6, v.top + v.height - PHONE_INSET - height);
-      panel.style.setProperty("--page-pop-x", `${x}px`);
-      panel.style.setProperty("--page-pop-y", `${Math.max(v.top + PHONE_INSET, y)}px`);
+      panel.style.setProperty("--blockeditor-pop-x", `${x}px`);
+      panel.style.setProperty("--blockeditor-pop-y", `${Math.max(v.top + PHONE_INSET, y)}px`);
       return;
     }
     const shellBox = this.shell.getBoundingClientRect();
     const x = Math.max(8, Math.min(r.right - shellBox.left - width, Math.max(8, shellBox.width - width - 8)));
     let y = r.bottom - shellBox.top + 6;
     if (y + height > this.win.innerHeight - 8 && r.top - shellBox.top - 6 - height >= 8) y = r.top - shellBox.top - 6 - height;
-    panel.style.setProperty("--page-pop-x", `${x}px`);
-    panel.style.setProperty("--page-pop-y", `${y}px`);
+    panel.style.setProperty("--blockeditor-pop-x", `${x}px`);
+    panel.style.setProperty("--blockeditor-pop-y", `${y}px`);
   }
 
   toggleMenu(mode, anchor) {
@@ -741,7 +742,7 @@ class Chrome {
       ...actions,
       ...(phone && this.settingsAPI ? [{ key: "settings", label: "Document settings", icon: "gear", focus: false, run: (view, chrome) => chrome.openSettings(chrome.more) }] : []),
       { key: "titleIcon", label: "Page icon", icon: "\u263A", run: (view) => runMenuCommand(view, "titleIcon") },
-      { key: "titleCover", label: "Add cover", icon: "\u25A4", run: (view) => runMenuCommand(view, "titleCover") },
+      ...(this.mediaNote ? [] : [{ key: "titleCover", label: "Add cover", icon: "\u25A4", run: (view) => runMenuCommand(view, "titleCover") }]),
       { key: "exportHtml", label: "Export reading copy", icon: "\u21E9", run: (view) => runMenuCommand(view, "exportHtml") },
       { key: "exportMarkdown", label: "Export as Markdown", icon: "M\u21E9", run: (view) => runMenuCommand(view, "exportMarkdown") },
     ];
@@ -751,9 +752,11 @@ class Chrome {
     if (m.mode === "external") return m.externalItems || [];
     if (m.mode === "actions") return actionsFor(this.view.state);
     if (m.mode === "more") return this.moreItems();
-    const items = m.mode === "turn" ? BLOCK_TYPES : insertItemsFor(this.view.state, this.onAiTool
+    const all = this.onAiTool
       ? [...MENU_ITEMS, { key: "ai", label: "Make a tool with AI…", icon: "✦", aliases: ["tool", "generate"], insert: "ai" }]
-      : MENU_ITEMS);
+      : MENU_ITEMS;
+    const offered = this.mediaNote ? all.filter((item) => item.key !== "image" && item.key !== "file") : all;
+    const items = m.mode === "turn" ? BLOCK_TYPES : insertItemsFor(this.view.state, offered);
     return rankItems(items, m.query);
   }
 
@@ -785,12 +788,12 @@ class Chrome {
     this.menuEl.setAttribute("role", slash ? "listbox" : "menu");
     const nodes = [];
     if (m.mode === "turn") {
-      const title = el("div", "page-menu-title");
+      const title = el("div", "blockeditor-menu-title");
       title.textContent = m.query ? `Turn into “${m.query}”` : "Turn into";
       nodes.push(title);
     }
     if (!m.items.length) {
-      const none = el("div", "page-menu-empty");
+      const none = el("div", "blockeditor-menu-empty");
       none.textContent = "No matching blocks";
       nodes.push(none);
     }
@@ -798,26 +801,32 @@ class Chrome {
       const active = i === m.active;
       const checked = current ? current.size === 1 && b.key === [...current][0] : (typeof b.checked === "boolean" ? b.checked : null);
       const role = m.mode === "turn" ? "menuitemradio" : typeof checked === "boolean" ? "menuitemcheckbox" : slash ? "option" : "menuitem";
-      const row = el("button", `page-menu-item${active ? " is-active" : ""}`, { type: "button", role, tabindex: !slash && active ? "0" : "-1", id: `${this.menuId}-${i}`, "data-index": String(i), ...(role === "menuitemradio" ? {} : { "aria-selected": active ? "true" : "false" }), ...(typeof checked === "boolean" ? { "aria-checked": String(checked) } : {}) });
-      const icon = el("span", "page-menu-icon");
+      const row = el("button", `blockeditor-menu-item${active ? " is-active" : ""}`, { type: "button", role, tabindex: !slash && active ? "0" : "-1", id: `${this.menuId}-${i}`, "data-index": String(i), ...(role === "menuitemradio" ? {} : { "aria-selected": active ? "true" : "false" }), ...(typeof checked === "boolean" ? { "aria-checked": String(checked) } : {}) });
+      const icon = el("span", "blockeditor-menu-icon");
       if (ICONS[b.icon]) icon.innerHTML = ICONS[b.icon];
       else icon.textContent = b.icon || "";
-      const label = el("span", "page-menu-label");
+      const label = el("span", "blockeditor-menu-label");
       label.textContent = b.label;
       if (b.description) {
-        const text = el("span", "page-menu-text");
-        const description = el("span", "page-menu-desc");
+        const text = el("span", "blockeditor-menu-text");
+        const description = el("span", "blockeditor-menu-desc");
         description.textContent = b.description;
         text.append(label, description);
         row.append(icon, text);
       } else row.append(icon, label);
       if (b.hint) {
-        const hint = el("span", "page-menu-hint");
+        const hint = el("span", "blockeditor-menu-hint");
         hint.textContent = b.hint;
         row.append(hint);
       }
       nodes.push(row);
     });
+    // A visitor's draft keeps no pictures or files: the menu says where they go instead.
+    if (this.mediaNote && m.mode !== "turn" && m.mode !== "actions" && m.mode !== "more" && m.mode !== "external") {
+      const note = el("div", "blockeditor-menu-note", { role: "note" });
+      note.textContent = this.mediaNote;
+      nodes.push(note);
+    }
     this.menuEl.replaceChildren(...nodes);
     if (slash && m.items.length) this.view.dom.setAttribute("aria-activedescendant", `${this.menuId}-${m.active}`);
     else this.view.dom.removeAttribute("aria-activedescendant");
@@ -933,7 +942,7 @@ class Chrome {
   // The safe-area inset the browser reports, read through one hidden probe.
   safeBottom() {
     if (!this.probe) {
-      this.probe = el("div", "page-safe-probe");
+      this.probe = el("div", "blockeditor-safe-probe");
       this.shell.append(this.probe);
     }
     return parseFloat(this.win.getComputedStyle(this.probe).paddingBottom) || 0;
@@ -944,10 +953,10 @@ class Chrome {
     const v = phoneViewport(this.win);
     const maxHeight = Math.max(0, v.height - PHONE_INSET * 2);
     const width = Math.min(280, Math.max(0, v.width - PHONE_INSET * 2));
-    const applied = this.menuEl.style.getPropertyValue("--page-pop-max");
-    this.menuEl.style.removeProperty("--page-pop-max");
+    const applied = this.menuEl.style.getPropertyValue("--blockeditor-pop-max");
+    this.menuEl.style.removeProperty("--blockeditor-pop-max");
     const natural = this.menuEl.offsetHeight || 0;
-    if (applied) this.menuEl.style.setProperty("--page-pop-max", applied);
+    if (applied) this.menuEl.style.setProperty("--blockeditor-pop-max", applied);
     const height = Math.min(natural, maxHeight);
     const left = Math.max(v.left + PHONE_INSET, Math.min(bar.left, v.left + v.width - PHONE_INSET - width));
     let top = bar.top - 6 - height;
@@ -1018,34 +1027,34 @@ class Chrome {
       this.dock.style.left = `${layout.bar.left}px`;
       this.dock.style.top = `${layout.bar.top}px`;
       this.dock.style.width = `${layout.bar.width}px`;
-      this.grip.style.setProperty("--page-grip-lift", `${layout.bar.height}px`);
+      this.grip.style.setProperty("--blockeditor-grip-lift", `${layout.bar.height}px`);
     } else {
       if (layout.desk) for (const side of ["left", "top", "width"]) this.dock.style.removeProperty(side);
-      this.grip.style.removeProperty("--page-grip-lift");
+      this.grip.style.removeProperty("--blockeditor-grip-lift");
     }
     if (layout.gutter) {
       for (const part of [this.plus, this.grip]) {
-        part.style.setProperty("--page-plus-top", `${layout.gutter.top}px`);
-        part.style.setProperty("--page-plus-left", `${layout.gutter.left}px`);
+        part.style.setProperty("--blockeditor-plus-top", `${layout.gutter.top}px`);
+        part.style.setProperty("--blockeditor-plus-left", `${layout.gutter.left}px`);
       }
     }
-    this.plus.style.setProperty("--page-text-left", `${layout.textLeft}px`);
+    this.plus.style.setProperty("--blockeditor-text-left", `${layout.textLeft}px`);
     if (layout.bubble) {
-      this.bubble.style.setProperty("--page-pop-x", `${layout.bubble.x}px`);
-      this.bubble.style.setProperty("--page-pop-y", `${layout.bubble.y}px`);
+      this.bubble.style.setProperty("--blockeditor-pop-x", `${layout.bubble.x}px`);
+      this.bubble.style.setProperty("--blockeditor-pop-y", `${layout.bubble.y}px`);
     }
     if (layout.menu) {
-      this.menuEl.style.setProperty("--page-pop-x", `${layout.menu.x}px`);
-      this.menuEl.style.setProperty("--page-pop-y", `${layout.menu.y}px`);
+      this.menuEl.style.setProperty("--blockeditor-pop-x", `${layout.menu.x}px`);
+      this.menuEl.style.setProperty("--blockeditor-pop-y", `${layout.menu.y}px`);
       if (layout.menu.width !== undefined) {
-        this.menuEl.style.setProperty("--page-pop-width", `${layout.menu.width}px`);
-        this.menuEl.style.setProperty("--page-pop-max", `${layout.menu.maxHeight}px`);
+        this.menuEl.style.setProperty("--blockeditor-pop-width", `${layout.menu.width}px`);
+        this.menuEl.style.setProperty("--blockeditor-pop-max", `${layout.menu.maxHeight}px`);
       }
     }
   }
 
   get settingsAPI() {
-    return globalThis.clay?.page?.settings ?? null;
+    return globalThis.clay?.blockeditor?.settings ?? null;
   }
 
   update(view, prev) {
@@ -1107,12 +1116,12 @@ class Chrome {
   }
 }
 
-export function chromePlugin({ onAiTool = null } = {}) {
+export function chromePlugin({ onAiTool = null, mediaNote = null } = {}) {
   let chrome = null;
   return new Plugin({
     key: chromeKey,
     view(view) {
-      chrome = new Chrome(view, onAiTool);
+      chrome = new Chrome(view, onAiTool, mediaNote);
       chromeFor.set(view, chrome);
       return chrome;
     },

package/src/page/clipboard-shape.js

@@ -122,5 +122,5 @@ function pastedTable(dom) {
   return found;
 }
 
-export const table = (dom) => ({ cols: pastedTable(dom).cols, sort: pastedTable(dom).sort, parent: dom.getAttribute("data-page-parent") || null });
+export const table = (dom) => ({ cols: pastedTable(dom).cols, sort: pastedTable(dom).sort, parent: dom.getAttribute("data-blockeditor-parent") || null });
 export const rows = (dom) => pastedTable(dom).rows;