@panphora/clayjs 1.23.0 → 1.24.1

package/src/page/features/media.js

@@ -17,44 +17,44 @@ const N = schema.nodes;
 const RETRY = new Set(["timeout", "network", "error", "bad-response"]);
 
 export const MEDIA_CSS = `
-.page-editor .page-image { margin-inline: 0; }
-.page-image-frame { position: relative; margin: 0 auto; max-width: 100%; }
-.page-image-frame img { display: block; width: 100%; height: auto; border-radius: var(--page-image-radius, 6px); }
-.page-image[data-broken] .page-image-frame { min-height: 80px; background: var(--page-code-bg); border-radius: var(--page-image-radius, 6px); }
-.page-image-handle { position: absolute; top: 50%; inset-inline-end: 6px; width: 6px; height: 36px; margin-top: -18px; border-radius: 3px; background: var(--page-chrome-ink-moved); opacity: 0; cursor: ew-resize; touch-action: none; transition: opacity var(--page-fade); }
-.page-image:hover .page-image-handle, .page-image.is-selected .page-image-handle { opacity: 1; }
-.page-editor .page-image.page-block-selected { background: none; box-shadow: none; }
-.page-editor .page-image.page-block-selected .page-image-frame { box-shadow: 0 0 0 6px var(--page-block-selected, rgba(88, 120, 170, 0.12)); border-radius: var(--page-image-radius, 6px); }
-.page-image[data-align="left"] .page-image-frame { margin-left: 0; margin-right: auto; }
-.page-image[data-align="right"] .page-image-frame { margin-left: auto; margin-right: 0; }
-.page-image[data-align="left"] .page-image-caption { text-align: left; }
-.page-image[data-align="right"] .page-image-caption { text-align: right; }
-.page-image-align { position: absolute; top: 8px; inset-inline-end: 8px; display: none; gap: 1px; padding: 2px; background: var(--page-pop-bg); color: var(--page-pop-ink); border: 1px solid var(--page-pop-line); box-shadow: var(--page-pop-shadow); border-radius: 7px; }
-.page-image.is-selected .page-image-align, .page-image.page-block-selected .page-image-align { display: flex; }
-.page-image-align button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; }
-.page-image-align button:hover, .page-image-align button[aria-pressed="true"] { background: var(--page-pop-hover); }
-.page-image.is-selected .page-image-frame img { outline: 2px solid var(--page-selection); outline-offset: 2px; }
-.page-image-caption { margin-top: 6px; color: var(--page-ink-soft); font-size: 0.88em; text-align: center; outline: none; }
-.page-image-caption[data-empty]::before { content: attr(data-placeholder); color: var(--page-ink-faint); }
-.page-image:not(.is-selected) .page-image-caption[data-empty]:not(:focus) { display: none; }
-.page-file-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--page-rule); border-radius: 8px; color: var(--page-ink); text-decoration: none; }
-.page-file-icon { color: var(--page-link, var(--page-accent)); }
-.page-file-name { color: var(--page-link, var(--page-accent)); min-width: 0; overflow-wrap: anywhere; }
-.page-file-meta { margin-inline-start: auto; color: var(--page-ink-faint); font-size: 0.88em; }
-.page-upload { display: flex; align-items: center; gap: 10px; margin: var(--page-block-gap) 0; padding: 8px 12px; border: 1px dashed var(--page-rule); border-radius: 8px; color: var(--page-ink-soft); font-size: 0.88em; }
-.page-upload-preview { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; opacity: 0.6; }
-.page-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.page-upload-bar { flex: 1; height: 2px; border-radius: 1px; background: var(--page-rule); overflow: hidden; }
-.page-upload-bar > span { display: block; height: 100%; background: var(--page-progress, var(--page-ink-soft)); transition: width 200ms; }
-.page-upload[data-state="error"] .page-upload-msg, .page-upload[data-state="embed-choice"] .page-upload-msg { flex: 1; }
-.page-upload[data-state="error"] .page-upload-msg { color: var(--page-danger, #9E3B2F); }
-.page-upload-btn { border: 0; padding: 4px 8px; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
-.page-upload-btn:hover { background: var(--page-pop-hover); }`;
+.blockeditor-editor .blockeditor-image { margin-inline: 0; }
+.blockeditor-image-frame { position: relative; margin: 0 auto; max-width: 100%; }
+.blockeditor-image-frame img { display: block; width: 100%; height: auto; border-radius: var(--blockeditor-image-radius, 6px); }
+.blockeditor-image[data-broken] .blockeditor-image-frame { min-height: 80px; background: var(--blockeditor-code-bg); border-radius: var(--blockeditor-image-radius, 6px); }
+.blockeditor-image-handle { position: absolute; top: 50%; inset-inline-end: 6px; width: 6px; height: 36px; margin-top: -18px; border-radius: 3px; background: var(--blockeditor-chrome-ink-moved); opacity: 0; cursor: ew-resize; touch-action: none; transition: opacity var(--blockeditor-fade); }
+.blockeditor-image:hover .blockeditor-image-handle, .blockeditor-image.is-selected .blockeditor-image-handle { opacity: 1; }
+.blockeditor-editor .blockeditor-image.blockeditor-block-selected { background: none; box-shadow: none; }
+.blockeditor-editor .blockeditor-image.blockeditor-block-selected .blockeditor-image-frame { box-shadow: 0 0 0 6px var(--blockeditor-block-selected, rgba(88, 120, 170, 0.12)); border-radius: var(--blockeditor-image-radius, 6px); }
+.blockeditor-image[data-align="left"] .blockeditor-image-frame { margin-left: 0; margin-right: auto; }
+.blockeditor-image[data-align="right"] .blockeditor-image-frame { margin-left: auto; margin-right: 0; }
+.blockeditor-image[data-align="left"] .blockeditor-image-caption { text-align: left; }
+.blockeditor-image[data-align="right"] .blockeditor-image-caption { text-align: right; }
+.blockeditor-image-align { position: absolute; top: 8px; inset-inline-end: 8px; display: none; gap: 1px; padding: 2px; background: var(--blockeditor-pop-bg); color: var(--blockeditor-pop-ink); border: 1px solid var(--blockeditor-pop-line); box-shadow: var(--blockeditor-pop-shadow); border-radius: 7px; }
+.blockeditor-image.is-selected .blockeditor-image-align, .blockeditor-image.blockeditor-block-selected .blockeditor-image-align { display: flex; }
+.blockeditor-image-align button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; }
+.blockeditor-image-align button:hover, .blockeditor-image-align button[aria-pressed="true"] { background: var(--blockeditor-pop-hover); }
+.blockeditor-image.is-selected .blockeditor-image-frame img { outline: 2px solid var(--blockeditor-selection); outline-offset: 2px; }
+.blockeditor-image-caption { margin-top: 6px; color: var(--blockeditor-ink-soft); font-size: 0.88em; text-align: center; outline: none; }
+.blockeditor-image-caption[data-empty]::before { content: attr(data-placeholder); color: var(--blockeditor-ink-faint); }
+.blockeditor-image:not(.is-selected) .blockeditor-image-caption[data-empty]:not(:focus) { display: none; }
+.blockeditor-file-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--blockeditor-rule); border-radius: 8px; color: var(--blockeditor-ink); text-decoration: none; }
+.blockeditor-file-icon { color: var(--blockeditor-link, var(--blockeditor-accent)); }
+.blockeditor-file-name { color: var(--blockeditor-link, var(--blockeditor-accent)); min-width: 0; overflow-wrap: anywhere; }
+.blockeditor-file-meta { margin-inline-start: auto; color: var(--blockeditor-ink-faint); font-size: 0.88em; }
+.blockeditor-upload { display: flex; align-items: center; gap: 10px; margin: var(--blockeditor-block-gap) 0; padding: 8px 12px; border: 1px dashed var(--blockeditor-rule); border-radius: 8px; color: var(--blockeditor-ink-soft); font-size: 0.88em; }
+.blockeditor-upload-preview { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; opacity: 0.6; }
+.blockeditor-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.blockeditor-upload-bar { flex: 1; height: 2px; border-radius: 1px; background: var(--blockeditor-rule); overflow: hidden; }
+.blockeditor-upload-bar > span { display: block; height: 100%; background: var(--blockeditor-progress, var(--blockeditor-ink-soft)); transition: width 200ms; }
+.blockeditor-upload[data-state="error"] .blockeditor-upload-msg, .blockeditor-upload[data-state="embed-choice"] .blockeditor-upload-msg { flex: 1; }
+.blockeditor-upload[data-state="error"] .blockeditor-upload-msg { color: var(--blockeditor-danger, #9E3B2F); }
+.blockeditor-upload-btn { border: 0; padding: 4px 8px; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.blockeditor-upload-btn:hover { background: var(--blockeditor-pop-hover); }`;
 
 function button(doc, act, label, id) {
   const b = doc.createElement("button");
   b.type = "button";
-  b.className = "page-upload-btn";
+  b.className = "blockeditor-upload-btn";
   b.dataset.act = act;
   b.dataset.upload = id;
   b.textContent = label;
@@ -63,25 +63,25 @@ function button(doc, act, label, id) {
 
 function bookmarkDOM(doc, it) {
   const box = doc.createElement("div");
-  box.className = "page-upload";
+  box.className = "blockeditor-upload";
   box.dataset.state = it.state;
   box.dataset.kind = it.kind;
   box.contentEditable = "false";
   box.setAttribute("role", it.state === "uploading" ? "status" : "alert");
   if (it.preview) {
     const img = doc.createElement("img");
-    img.className = "page-upload-preview";
+    img.className = "blockeditor-upload-preview";
     img.src = it.preview;
     img.alt = "";
     box.append(img);
   }
   const name = doc.createElement("span");
-  name.className = "page-upload-name";
+  name.className = "blockeditor-upload-name";
   name.textContent = it.name;
   box.append(name);
   if (it.state === "uploading") {
     const bar = doc.createElement("span");
-    bar.className = "page-upload-bar";
+    bar.className = "blockeditor-upload-bar";
     bar.setAttribute("role", "progressbar");
     bar.setAttribute("aria-label", `Uploading ${it.name}`);
     bar.setAttribute("aria-valuemin", "0");
@@ -94,7 +94,7 @@ function bookmarkDOM(doc, it) {
     return box;
   }
   const msg = doc.createElement("span");
-  msg.className = "page-upload-msg";
+  msg.className = "blockeditor-upload-msg";
   msg.textContent = it.message;
   box.append(msg);
   if (it.state === "embed-choice") box.append(button(doc, "embed", "Keep this image inside the document", it.id));
@@ -118,21 +118,21 @@ export class ImageView {
     this.getPos = getPos;
     const doc = view.dom.ownerDocument;
     this.dom = doc.createElement("figure");
-    this.dom.className = "page-image";
+    this.dom.className = "blockeditor-image";
     this.dom.addEventListener("dragstart", (event) => { event.preventDefault(); event.stopPropagation(); });
     this.dom.draggable = false;
     this.frame = doc.createElement("div");
-    this.frame.className = "page-image-frame";
+    this.frame.className = "blockeditor-image-frame";
     this.img = doc.createElement("img");
     this.img.draggable = false;
     this.img.addEventListener("error", () => this.dom.toggleAttribute("data-broken", true));
     this.img.addEventListener("load", () => this.dom.removeAttribute("data-broken"));
     this.handle = doc.createElement("span");
-    this.handle.className = "page-image-handle";
+    this.handle.className = "blockeditor-image-handle";
     this.handle.setAttribute("aria-hidden", "true");
     this.handle.addEventListener("pointerdown", (e) => this.resize(e));
     this.alignBar = doc.createElement("div");
-    this.alignBar.className = "page-image-align";
+    this.alignBar.className = "blockeditor-image-align";
     this.alignBar.setAttribute("role", "toolbar");
     this.alignBar.setAttribute("aria-label", "Image alignment");
     for (const [value, label, path] of ALIGNS) {
@@ -151,7 +151,7 @@ export class ImageView {
     });
     this.frame.append(this.img, this.handle, this.alignBar);
     this.caption = doc.createElement("figcaption");
-    this.caption.className = "page-image-caption";
+    this.caption.className = "blockeditor-image-caption";
     this.caption.contentEditable = "plaintext-only";
     this.caption.setAttribute("aria-label", "Caption");
     this.caption.dataset.placeholder = "Add a caption";
@@ -230,7 +230,7 @@ export class ImageView {
 
   selectNode() { this.dom.classList.add("is-selected"); }
   deselectNode() { this.dom.classList.remove("is-selected"); }
-  stopEvent(event) { return this.caption.contains(event.target) || this.alignBar.contains(event.target) || event.target.classList?.contains("page-image-handle"); }
+  stopEvent(event) { return this.caption.contains(event.target) || this.alignBar.contains(event.target) || event.target.classList?.contains("blockeditor-image-handle"); }
   ignoreMutation() { return true; }
 }
 
@@ -246,19 +246,19 @@ export class FileView {
     this.node = node;
     const doc = view.dom.ownerDocument;
     this.dom = doc.createElement("div");
-    this.dom.className = "page-file";
+    this.dom.className = "blockeditor-file";
     this.dom.addEventListener("dragstart", (event) => { event.preventDefault(); event.stopPropagation(); });
     this.link = doc.createElement("a");
-    this.link.className = "page-file-link";
+    this.link.className = "blockeditor-file-link";
     this.link.target = "_blank";
     this.link.rel = "noopener noreferrer";
     this.icon = doc.createElement("span");
-    this.icon.className = "page-file-icon";
+    this.icon.className = "blockeditor-file-icon";
     this.icon.textContent = "⎘";
     this.name = doc.createElement("span");
-    this.name.className = "page-file-name";
+    this.name.className = "blockeditor-file-name";
     this.meta = doc.createElement("span");
-    this.meta.className = "page-file-meta";
+    this.meta.className = "blockeditor-file-meta";
     this.link.append(this.icon, this.name, this.meta);
     this.dom.append(this.link);
     this.render(node);

package/src/page/features/table.js

@@ -19,11 +19,11 @@ const columns = (table) => orderedIds(table.attrs.cols);
 const UNAVAILABLE = "That part of the table is no longer available.";
 const GEAR = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g transform="scale(0.6667)" stroke-width="2.25"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></g></svg>';
 const ACTIONS_CSS = `
-.page-editor .page-table-actions { position: absolute; z-index: 2; bottom: 100%; inset-inline-end: 0; inset-inline-start: auto; width: 24px; height: 20px; padding: 0; display: grid; place-items: center; border: 1px solid var(--page-chrome-line-rest); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--page-chrome-bg-moved); color: var(--page-chrome-ink-moved); font: inherit; cursor: pointer; opacity: 1; }
-.page-editor .page-table-actions:hover { background: var(--page-pop-hover); color: var(--page-ink-soft); }
+.blockeditor-editor .blockeditor-table-actions { position: absolute; z-index: 2; bottom: 100%; inset-inline-end: 0; inset-inline-start: auto; width: 24px; height: 20px; padding: 0; display: grid; place-items: center; border: 1px solid var(--blockeditor-chrome-line-rest); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--blockeditor-chrome-bg-moved); color: var(--blockeditor-chrome-ink-moved); font: inherit; cursor: pointer; opacity: 1; }
+.blockeditor-editor .blockeditor-table-actions:hover { background: var(--blockeditor-pop-hover); color: var(--blockeditor-ink-soft); }
 @media (max-width: 560px) {
-  .page-editor .page-table-actions { position: absolute; }
-  .page-editor .page-table-actions::after { content: ""; position: absolute; inset: -12px; }
+  .blockeditor-editor .blockeditor-table-actions { position: absolute; }
+  .blockeditor-editor .blockeditor-table-actions::after { content: ""; position: absolute; inset: -12px; }
 }
 `;
 
@@ -94,12 +94,12 @@ export class TableView {
     this.destroyed = false;
     const doc = view.dom.ownerDocument;
     this.dom = doc.createElement("div");
-    this.dom.className = "page-table";
+    this.dom.className = "blockeditor-table";
     this.dom.dataset.id = node.attrs.id ?? "";
     this.dom.setAttribute("role", "group");
     this.dom.setAttribute("aria-label", "Table");
     const scroll = doc.createElement("div");
-    scroll.className = "page-table-scroll";
+    scroll.className = "blockeditor-table-scroll";
     const table = doc.createElement("table");
     table.setAttribute("aria-label", "Table");
     this.table = table;
@@ -110,16 +110,16 @@ export class TableView {
     table.append(this.colgroup, this.header, this.contentDOM);
     scroll.append(table);
     const addRowButton = button(doc, "+", () => this.append("row"));
-    addRowButton.className = "page-table-add-row";
+    addRowButton.className = "blockeditor-table-add-row";
     addRowButton.setAttribute("aria-label", "Add a row");
     addRowButton.title = "Add a row";
     const addColumnButton = button(doc, "+", () => this.append("column"));
-    addColumnButton.className = "page-table-add-col";
+    addColumnButton.className = "blockeditor-table-add-col";
     addColumnButton.setAttribute("aria-label", "Add a column");
     addColumnButton.title = "Add a column";
     const actions = doc.createElement("button");
     actions.type = "button";
-    actions.className = "page-table-actions";
+    actions.className = "blockeditor-table-actions";
     actions.innerHTML = GEAR;
     actions.dataset.control = "actions";
     actions.setAttribute("aria-haspopup", "menu");
@@ -258,7 +258,7 @@ export class TableView {
     const tableId = this.node.attrs.id;
     const input = doc.createElement("input");
     input.type = "text";
-    input.className = "page-table-rename";
+    input.className = "blockeditor-table-rename";
     input.dataset.control = "rename";
     input.dataset.col = colId;
     input.value = col.name ?? "";
@@ -316,7 +316,7 @@ export class TableView {
   resizer(colId, th, col, index) {
     const doc = this.dom.ownerDocument;
     const handle = doc.createElement("span");
-    handle.className = "page-table-resize";
+    handle.className = "blockeditor-table-resize";
     handle.dataset.control = "resize";
     handle.dataset.col = colId;
     handle.setAttribute("role", "separator");
@@ -395,7 +395,7 @@ export class TableView {
     return this.command(colId, this.widthCommand(colId, width));
   }
   handleFor(colId) {
-    return [...this.header.querySelectorAll(".page-table-resize")].find((handle) => handle.dataset.col === colId) ?? null;
+    return [...this.header.querySelectorAll(".blockeditor-table-resize")].find((handle) => handle.dataset.col === colId) ?? null;
   }
   // The arrow keys, Home, End, Enter and Escape preview a width; the key that
   // stops repeating, Enter, or leaving the handle commits the one command.
@@ -474,7 +474,7 @@ export class TableView {
       if (this.node.attrs.sort?.col === colId) th.setAttribute("aria-sort", this.node.attrs.sort.dir === "asc" ? "ascending" : "descending");
       const control = doc.createElement("button");
       control.type = "button";
-      control.className = "page-table-col-menu";
+      control.className = "blockeditor-table-col-menu";
       control.textContent = name;
       control.dataset.control = "column";
       control.dataset.col = colId;
@@ -540,7 +540,7 @@ export class TableView {
     if (focused && !renaming) this.afterUpdate(focused);
     return true;
   }
-  stopEvent(event) { return !!event.target.closest?.("thead, .page-table-actions, .page-table-add-row, .page-table-add-col"); }
+  stopEvent(event) { return !!event.target.closest?.("thead, .blockeditor-table-actions, .blockeditor-table-add-row, .blockeditor-table-add-col"); }
   ignoreMutation(mutation) { return !this.contentDOM.contains(mutation.target); }
   destroy() {
     this.destroyed = true;
@@ -566,7 +566,7 @@ export class TableCellView {
     this.contentDOM = doc.createElement("span");
     const menu = doc.createElement("button");
     menu.type = "button";
-    menu.className = "page-table-row-menu";
+    menu.className = "blockeditor-table-row-menu";
     menu.innerHTML = GEAR;
     menu.dataset.control = "row";
     menu.setAttribute("aria-haspopup", "menu");
@@ -630,7 +630,7 @@ export class TableCellView {
     const doc = this.dom.ownerDocument;
     const input = doc.createElement("input");
     input.type = "date";
-    input.className = "page-table-date";
+    input.className = "blockeditor-table-date";
     input.contentEditable = "false";
     input.setAttribute("aria-label", "Pick a date");
     const current = this.node.textContent.trim();
@@ -656,7 +656,7 @@ export class TableCellView {
     if (input?.isConnected) input.remove();
   }
   destroy() { this.closeDate(); }
-  stopEvent(event) { return !!event.target.closest?.(".page-table-row-menu, .page-table-date"); }
+  stopEvent(event) { return !!event.target.closest?.(".blockeditor-table-row-menu, .blockeditor-table-date"); }
   ignoreMutation(mutation) { return !this.contentDOM.contains(mutation.target); }
 }
 

package/src/page/features/title-cover.js

@@ -30,16 +30,16 @@ function titleOf(doc) {
 }
 
 // The bar sits in its own shadow root beside the editor, so the page's CSS cannot restyle
-// it. The page's --page-* tokens still reach it, and it keeps the editor's font and colour.
+// it. The page's --blockeditor-* tokens still reach it, and it keeps the editor's font and colour.
 const COVER_CSS = `
 :host{font:inherit !important;color:inherit !important}
-.page-cover-panel{display:flex;align-items:center;gap:8px;margin:8px 0;padding:6px 10px;border:1px solid var(--page-pop-line);border-radius:8px;background:var(--page-pop-bg);color:var(--page-pop-ink);box-shadow:var(--page-pop-shadow);font-size:.88em}
-.page-cover-msg{max-width:34ch}
-.page-cover-bar{flex:1;height:2px;border-radius:1px;background:var(--page-rule);overflow:hidden}
-.page-cover-bar>span{display:block;height:100%;background:var(--page-progress, var(--page-ink-soft));transition:width 200ms}
-.page-cover-btn{border:0;padding:4px 8px;border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer}
-.page-cover-btn:hover{background:var(--page-pop-hover)}
-.page-cover-panel[data-state="error"] .page-cover-msg{color:var(--page-danger, #9E3B2F)}
+.blockeditor-cover-panel{display:flex;align-items:center;gap:8px;margin:8px 0;padding:6px 10px;border:1px solid var(--blockeditor-pop-line);border-radius:8px;background:var(--blockeditor-pop-bg);color:var(--blockeditor-pop-ink);box-shadow:var(--blockeditor-pop-shadow);font-size:.88em}
+.blockeditor-cover-msg{max-width:34ch}
+.blockeditor-cover-bar{flex:1;height:2px;border-radius:1px;background:var(--blockeditor-rule);overflow:hidden}
+.blockeditor-cover-bar>span{display:block;height:100%;background:var(--blockeditor-progress, var(--blockeditor-ink-soft));transition:width 200ms}
+.blockeditor-cover-btn{border:0;padding:4px 8px;border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer}
+.blockeditor-cover-btn:hover{background:var(--blockeditor-pop-hover)}
+.blockeditor-cover-panel[data-state="error"] .blockeditor-cover-msg{color:var(--blockeditor-danger, #9E3B2F)}
 `;
 
 const clamp = (value) => Math.min(100, Math.max(0, Math.round(value)));
@@ -47,9 +47,9 @@ const clamp = (value) => Math.min(100, Math.max(0, Math.round(value)));
 // The format gate's own answer, as every command that writes a newer page format asks for
 // it: the command's result when the gate admitted the write, the gate's refusal otherwise.
 async function formatted(view, apply) {
-  if (typeof view.runFormatCommand !== "function") return { ok: false, code: "page-format-unsupported" };
+  if (typeof view.runFormatCommand !== "function") return { ok: false, code: "blockeditor-format-unsupported" };
   const answer = await view.runFormatCommand(apply);
-  return answer?.status === "applied" ? answer.result : { ok: false, code: answer?.code ?? answer?.status ?? "page-format-refused", retry: answer?.retry === true };
+  return answer?.status === "applied" ? answer.result : { ok: false, code: answer?.code ?? answer?.status ?? "blockeditor-format-refused", retry: answer?.retry === true };
 }
 const readDataUrl = (file) => new Promise((ok, no) => { const r = new FileReader(); r.onload = () => ok(r.result); r.onerror = () => no(r.error); r.readAsDataURL(file); });
 
@@ -78,7 +78,7 @@ export function createFeature({ view = null, upload = null } = {}) {
   const button = (act, label) => {
     const b = doc.createElement("button");
     b.type = "button";
-    b.className = "page-cover-btn";
+    b.className = "blockeditor-cover-btn";
     b.dataset.act = act;
     b.textContent = label;
     return b;
@@ -88,18 +88,18 @@ export function createFeature({ view = null, upload = null } = {}) {
   // reposition's own message. It is runtime only, so nothing of it is in the record.
   function draw(s) {
     const box = s.panel ?? (s.panel = doc.createElement("div"));
-    box.className = "page-cover-panel";
+    box.className = "blockeditor-cover-panel";
     box.dataset.state = s.state;
     box.setAttribute("contenteditable", "false");
     box.setAttribute("role", s.state === "uploading" ? "status" : "alert");
     box.textContent = "";
     const msg = doc.createElement("span");
-    msg.className = "page-cover-msg";
+    msg.className = "blockeditor-cover-msg";
     msg.textContent = s.message;
     box.append(msg);
     if (s.state === "uploading") {
       const bar = doc.createElement("span");
-      bar.className = "page-cover-bar";
+      bar.className = "blockeditor-cover-bar";
       bar.setAttribute("role", "progressbar");
       bar.setAttribute("aria-valuemin", "0");
       bar.setAttribute("aria-valuemax", "100");
@@ -113,7 +113,7 @@ export function createFeature({ view = null, upload = null } = {}) {
     else box.append(button("cancel", "Close"));
     if (!s.ui) {
       const host = view.dom.parentElement;
-      s.ui = mountEditorUI({ name: "page-cover", content: box, css: [COVER_CSS], parent: host ?? doc.body, before: host ? view.dom : null });
+      s.ui = mountEditorUI({ name: "blockeditor-cover", content: box, css: [COVER_CSS], parent: host ?? doc.body, before: host ? view.dom : null });
     }
   }
 
@@ -156,7 +156,7 @@ export function createFeature({ view = null, upload = null } = {}) {
       const input = doc.createElement("input");
       input.type = "file";
       input.accept = "image/*";
-      input.className = "page-cover-input";
+      input.className = "blockeditor-cover-input";
       input.hidden = true;
       (view.dom.parentElement ?? doc.body).appendChild(input);
       s.input = input;
@@ -261,7 +261,7 @@ export function createFeature({ view = null, upload = null } = {}) {
     return { ok: true, picker: true };
   }
 
-  const coverImg = () => view.dom.querySelector("header[data-page-heading] img[data-page-cover]");
+  const coverImg = () => view.dom.querySelector("header[data-blockeditor-heading] img[data-blockeditor-cover]");
 
   function preview(s) {
     const img = coverImg();

package/src/page/features/title-icon.js

@@ -11,10 +11,10 @@ import { createMentionPicker } from "../mention-picker.js";
 import { runFormatted } from "../format-command.js";
 
 const TITLE_CSS = `
-[data-page-heading]{display:block}
-[data-page-heading]>span[data-page-icon]{display:inline-block;font-size:34px;line-height:1;margin-block-end:.2em}
-[data-page-heading]>img[data-page-cover]{display:block;width:100%;height:180px;object-fit:cover;border-radius:var(--page-image-radius, 6px);margin-block-end:.6em}
-[data-page-heading]>h1{font-family:var(--page-font-display);font-size:var(--page-h1-size);font-weight:var(--page-h1-weight);letter-spacing:var(--page-h1-tracking);line-height:var(--page-h1-line);color:var(--page-ink-strong);margin-block:0 .6em}
+[data-blockeditor-heading]{display:block}
+[data-blockeditor-heading]>span[data-blockeditor-icon]{display:inline-block;font-size:34px;line-height:1;margin-block-end:.2em}
+[data-blockeditor-heading]>img[data-blockeditor-cover]{display:block;width:100%;height:180px;object-fit:cover;border-radius:var(--blockeditor-image-radius, 6px);margin-block-end:.6em}
+[data-blockeditor-heading]>h1{font-family:var(--blockeditor-font-display);font-size:var(--blockeditor-h1-size);font-weight:var(--blockeditor-h1-weight);letter-spacing:var(--blockeditor-h1-tracking);line-height:var(--blockeditor-h1-line);color:var(--blockeditor-ink-strong);margin-block:0 .6em}
 `;
 
 // The emoji feature, fetched on first use: one list of glyphs, one way of finding one and
@@ -49,7 +49,7 @@ export function titleOf(doc) {
 // part of it a person kept in view, so a reader draws it with nothing of this loaded.
 function coverImg(doc, attrs) {
   const img = doc.createElement("img");
-  img.setAttribute("data-page-cover", "");
+  img.setAttribute("data-blockeditor-cover", "");
   img.setAttribute("src", attrs.pageCoverSrc);
   img.setAttribute("alt", attrs.pageCoverAlt ?? "");
   img.setAttribute("style", `object-position:${attrs.pageCoverX}% ${attrs.pageCoverY}%`);
@@ -72,12 +72,12 @@ class TitleHeadingView {
     if (!this.decorated) return;
     const box = doc.createElement("header");
     box.setAttribute("data-id", node.attrs.id);
-    box.setAttribute("data-page-heading", "1");
+    box.setAttribute("data-blockeditor-heading", "1");
     head.removeAttribute("data-id");
     if (node.attrs.pageCoverSrc) box.append(coverImg(doc, node.attrs));
     if (node.attrs.pageIcon) {
       const mark = doc.createElement("span");
-      mark.setAttribute("data-page-icon", "");
+      mark.setAttribute("data-blockeditor-icon", "");
       mark.setAttribute("aria-hidden", "true");
       mark.textContent = node.attrs.pageIcon;
       box.append(mark);

package/src/page/features/toc.js

@@ -41,7 +41,7 @@ export class TocView {
     this.doc = view.state.doc;
     const doc = view.dom.ownerDocument;
     this.dom = doc.createElement("div");
-    this.dom.className = "page-toc";
+    this.dom.className = "blockeditor-toc";
     this.dom.contentEditable = "false";
     this.dom.setAttribute("role", "group");
     this.dom.setAttribute("aria-label", "Table of contents");

package/src/page/features/tool.js

@@ -4,48 +4,47 @@
 import { openPageMenu } from "../chrome.js";
 import { schema } from "../schema.js";
 import { createToolHost } from "../tools.js";
-import { toolViews } from "../tool-views.js";
+import { toolBlockViews, toolViews } from "../tool-views.js";
 
 export const TOOL_CSS = `
-.page-tool-block { position: relative; min-height: 48px; border: 1px solid var(--page-rule); border-radius: 8px; padding: 12px; }
-.page-tool-settings { position: absolute; top: 4px; inset-inline-end: 4px; border: 0; border-radius: 5px; background: var(--page-pop-bg); color: var(--page-ink-soft); font: 12px var(--page-font); padding: 5px 8px; cursor: pointer; opacity: 0; }
-.page-tool-block:hover .page-tool-settings, .page-tool-block:focus-within .page-tool-settings { opacity: 1; }
-.page-ai-panel { position: relative; z-index: 5; width: min(520px, 100%); box-sizing: border-box; margin: 12px auto; padding: 14px; border: 1px solid var(--page-pop-line); border-radius: 10px; background: var(--page-pop-bg); color: var(--page-pop-ink); box-shadow: var(--page-pop-shadow); }
-.page-ai-panel textarea { width: 100%; min-height: 88px; box-sizing: border-box; padding: 8px; border: 1px solid var(--page-pop-line); border-radius: 6px; background: var(--page-pop-bg); color: inherit; font: inherit; resize: vertical; }
-.page-ai-actions { display: flex; gap: 8px; margin-top: 8px; }
-.page-ai-actions button { border: 1px solid var(--page-pop-line); border-radius: 6px; background: var(--page-pop-bg); color: inherit; font: inherit; padding: 5px 10px; cursor: pointer; }
-.page-ai-status, [data-tool-note], [data-tool-error] { color: var(--page-danger); font-size: 0.85em; }`;
+.blockeditor-tool-block { position: relative; min-height: 48px; border: 1px solid var(--blockeditor-rule); border-radius: 8px; padding: 12px; }
+.blockeditor-tool-settings { position: absolute; top: 4px; inset-inline-end: 4px; border: 0; border-radius: 5px; background: var(--blockeditor-pop-bg); color: var(--blockeditor-ink-soft); font: 12px var(--blockeditor-font); padding: 5px 8px; cursor: pointer; opacity: 0; }
+.blockeditor-tool-block:hover .blockeditor-tool-settings, .blockeditor-tool-block:focus-within .blockeditor-tool-settings { opacity: 1; }
+[data-tool-note], [data-tool-error] { color: var(--blockeditor-danger); font-size: 0.85em; }`;
 
 export class ToolView {
-  constructor(node, view, getPos, { host, revise = null }) {
+  constructor(node, view, getPos, { host, revise = null, blocks = null }) {
     this.node = node;
     this.view = view;
     this.getPos = getPos;
     this.host = host;
     this.revise = revise;
+    this.blocks = blocks;
     this.showingFallback = false;
+    this.suspended = false;
     const doc = view.dom.ownerDocument;
     this.dom = doc.createElement("section");
-    this.dom.className = "page-tool-block";
+    this.dom.className = "blockeditor-tool-block";
     this.dom.dataset.type = "tool";
     this.dom.dataset.id = node.attrs.id ?? "";
     this.dom.contentEditable = "false";
     this.content = doc.createElement("div");
-    this.content.className = "page-tool-content";
+    this.content.className = "blockeditor-tool-content";
     this.menu = doc.createElement("button");
     this.menu.type = "button";
-    this.menu.className = "page-tool-settings";
+    this.menu.className = "blockeditor-tool-settings";
     this.menu.textContent = "Tool options";
     this.menu.setAttribute("aria-label", "Tool options");
     this.menu.addEventListener("click", () => this.openMenu());
     this.dom.append(this.content, this.menu);
+    if (this.blocks && this.dom.dataset.id) this.blocks.set(this.dom.dataset.id, this);
     this.mount();
   }
 
   mount() {
     this.instance?.dispose();
     this.instance = null;
-    if (this.showingFallback) this.content.innerHTML = this.node.attrs.artifact?.fallbackHtml ?? "";
+    if (this.suspended || this.showingFallback) this.content.innerHTML = this.node.attrs.artifact?.fallbackHtml ?? "";
     else this.instance = this.host.mount(this.content, {
       id: this.node.attrs.id,
       artifact: this.node.attrs.artifact,
@@ -54,6 +53,18 @@ export class ToolView {
     });
   }
 
+  suspend() {
+    if (this.suspended) return;
+    this.suspended = true;
+    this.mount();
+  }
+
+  resume() {
+    if (!this.suspended) return;
+    this.suspended = false;
+    this.mount();
+  }
+
   openMenu() {
     const items = [];
     if (this.revise) items.push({ label: "Revise…", run: () => this.revise(this.node.attrs.id, this.node.attrs.rev) });
@@ -73,26 +84,39 @@ export class ToolView {
     if (node.type !== schema.nodes.tool || node.attrs.id !== this.node.attrs.id) return false;
     const changed = node.attrs.rev !== this.node.attrs.rev || JSON.stringify(node.attrs.artifact) !== JSON.stringify(this.node.attrs.artifact);
     this.node = node;
-    if (changed) this.mount();
+    if (changed) {
+      this.suspended = false;
+      this.mount();
+    }
     return true;
   }
 
   stopEvent(event) { return this.dom.contains(event.target); }
   ignoreMutation() { return true; }
-  destroy() { this.instance?.dispose(); this.instance = null; }
+  destroy() {
+    const id = this.node.attrs.id;
+    if (this.blocks?.get(id) === this) this.blocks.delete(id);
+    this.instance?.dispose();
+    this.instance = null;
+  }
 }
 
 export function createFeature({ toolHost = null, revise = null, view = null } = {}) {
   const host = toolHost ?? createToolHost({ mode: "edit" });
-  if (view) toolViews.set(view, host);
+  const blocks = new Map();
+  if (view) {
+    toolViews.set(view, host);
+    toolBlockViews.set(view, blocks);
+  }
   return {
     id: "tool",
     nodeViews: {
-      tool: (node, editorView, getPos) => new ToolView(node, editorView, getPos, { host, revise }),
+      tool: (node, editorView, getPos) => new ToolView(node, editorView, getPos, { host, revise, blocks }),
     },
     css: TOOL_CSS,
     dispose() {
       if (view && toolViews.get(view) === host) toolViews.delete(view);
+      if (view && toolBlockViews.get(view) === blocks) toolBlockViews.delete(view);
       if (!toolHost) host.dispose();
     },
   };

package/src/page/format-command.js

@@ -4,7 +4,7 @@ import toast from "../ui/toast-lazy.js";
 // A refusal the person cannot see is the same as a command that did nothing, so the
 // gate's "no" is said out loud. Only the gate's own refusal: a command the gate let
 // through reports its own result to its caller.
-const UNSUPPORTED = new Set(["page-format-unsupported", "unsupported-host"]);
+const UNSUPPORTED = new Set(["blockeditor-format-unsupported", "unsupported-host"]);
 const UNSUPPORTED_TEXT = "This host can't store that yet, so nothing was added.";
 const RETRY_TEXT = "That didn't go through. Try again.";
 const REFUSED_TEXT = "That couldn't be added here.";
@@ -23,11 +23,11 @@ function say(view, answer) {
 // caller writes nothing on a refusal.
 export async function runFormatted(view, apply) {
   if (typeof view.runFormatCommand !== "function") {
-    say(view, { code: "page-format-unsupported" });
-    return { ok: false, code: "page-format-unsupported" };
+    say(view, { code: "blockeditor-format-unsupported" });
+    return { ok: false, code: "blockeditor-format-unsupported" };
   }
   const answer = await view.runFormatCommand(apply);
   if (answer?.status === "applied") return answer.result;
   say(view, answer);
-  return { ok: false, code: answer?.code ?? answer?.status ?? "page-format-refused", retry: answer?.retry === true };
+  return { ok: false, code: answer?.code ?? answer?.status ?? "blockeditor-format-refused", retry: answer?.retry === true };
 }