@panphora/clayjs 1.23.0 → 1.24.1

package/src/page/recovery-ui.js

@@ -29,26 +29,26 @@ import {
 export const REVIEW_TEXT = "Work from an earlier session could not be put back. Read it, download it, or recover it as a copy.";
 
 // 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-recovery-root { display: contents; }
-.page-recovery { 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-recovery[hidden], .page-recovery-panel[hidden] { display: none; }
-.page-recovery-panel { position: fixed; right: 16px; bottom: 64px; z-index: 21; width: min(420px, 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-recovery-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 8px; font-weight: 600; }
-.page-recovery-note { margin: 0 6px 8px; font-size: 13px; opacity: .72; }
-.page-recovery-failure { margin: 0 6px 8px; font-size: 13px; color: var(--page-warn, #b25b00); }
-.page-recovery-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-recovery-meta { grid-column: 1; font-size: 12px; opacity: .72; }
-.page-recovery-text { grid-column: 1; overflow-wrap: anywhere; white-space: pre-wrap; }
-.page-recovery-row button, .page-recovery-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; }
-.page-recovery-row.is-busy button { opacity: .6; cursor: progress; }
+.blockeditor-recovery-root { display: contents; }
+.blockeditor-recovery { 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-recovery[hidden], .blockeditor-recovery-panel[hidden] { display: none; }
+.blockeditor-recovery-panel { position: fixed; right: 16px; bottom: 64px; z-index: 21; width: min(420px, 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-recovery-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 8px; font-weight: 600; }
+.blockeditor-recovery-note { margin: 0 6px 8px; font-size: 13px; opacity: .72; }
+.blockeditor-recovery-failure { margin: 0 6px 8px; font-size: 13px; color: var(--blockeditor-warn, #b25b00); }
+.blockeditor-recovery-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-recovery-meta { grid-column: 1; font-size: 12px; opacity: .72; }
+.blockeditor-recovery-text { grid-column: 1; overflow-wrap: anywhere; white-space: pre-wrap; }
+.blockeditor-recovery-row button, .blockeditor-recovery-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; }
+.blockeditor-recovery-row.is-busy button { opacity: .6; cursor: progress; }
 @media (max-width: 560px) {
-  .page-recovery { top: 12px; bottom: auto; min-height: 44px; }
-  .page-recovery-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-recovery-row button, .page-recovery-head button { min-height: 44px; }
+  .blockeditor-recovery { top: 12px; bottom: auto; min-height: 44px; }
+  .blockeditor-recovery-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-recovery-row button, .blockeditor-recovery-head button { min-height: 44px; }
 }
 `;
 
@@ -136,7 +136,7 @@ export function insertCopy(view, blocks) {
 }
 
 const preview = (doc, text) => {
-  const box = el(doc, "div", "page-recovery-text");
+  const box = el(doc, "div", "blockeditor-recovery-text");
   box.textContent = text.length > PREVIEW_LIMIT ? `${text.slice(0, PREVIEW_LIMIT)}…` : text;
   return box;
 };
@@ -184,13 +184,13 @@ export function createRecoveryReview({
   onCovered = () => {},
 } = {}) {
   const doc = mount.ownerDocument;
-  const button = el(doc, "button", "page-recovery", { type: "button", "aria-haspopup": "dialog", "aria-expanded": "false" });
-  const panel = el(doc, "div", "page-recovery-panel", { role: "dialog", "aria-label": "Recover work" });
+  const button = el(doc, "button", "blockeditor-recovery", { type: "button", "aria-haspopup": "dialog", "aria-expanded": "false" });
+  const panel = el(doc, "div", "blockeditor-recovery-panel", { role: "dialog", "aria-label": "Recover work" });
   button.hidden = true;
   panel.hidden = true;
-  const content = el(doc, "div", "page-recovery-root");
+  const content = el(doc, "div", "blockeditor-recovery-root");
   content.append(button, panel);
-  const ui = mountEditorUI({ name: "page-recovery", content, css: [STYLES], parent: mount });
+  const ui = mountEditorUI({ name: "blockeditor-recovery", content, css: [STYLES], parent: mount });
 
   let rows = [];
   let journaled = [];
@@ -312,23 +312,23 @@ export function createRecoveryReview({
 
   function draw() {
     panel.replaceChildren();
-    const head = el(doc, "div", "page-recovery-head");
+    const head = el(doc, "div", "blockeditor-recovery-head");
     head.append(doc.createTextNode("Recover work"));
     head.append(rowButton("Download", download));
     const done = rowButton("Close", () => { close(); button.focus(); });
     head.append(done);
-    const note = el(doc, "p", "page-recovery-note");
+    const note = el(doc, "p", "blockeditor-recovery-note");
     note.textContent = REVIEW_TEXT;
     panel.append(head, note);
     if (failure) {
-      const line = el(doc, "p", "page-recovery-failure");
+      const line = el(doc, "p", "blockeditor-recovery-failure");
       line.textContent = failure;
       panel.append(line);
     }
     for (const row of rows) {
-      const item = el(doc, "div", "page-recovery-row", { "data-capsule": String(row.id) });
+      const item = el(doc, "div", "blockeditor-recovery-row", { "data-capsule": String(row.id) });
       if (busy.has(row.id)) item.classList.add("is-busy");
-      const meta = el(doc, "div", "page-recovery-meta");
+      const meta = el(doc, "div", "blockeditor-recovery-meta");
       meta.textContent = `${row.message}${copied.has(row.id) ? " · Recovered as a copy" : ""}`;
       const action = rowButton("Recover as a copy", () => recover(row));
       action.disabled = busy.has(row.id) || copied.has(row.id);
@@ -336,8 +336,8 @@ export function createRecoveryReview({
       panel.append(item);
     }
     for (const row of journaled) {
-      const item = el(doc, "div", "page-recovery-row", { "data-composing": row.blockId });
-      const meta = el(doc, "div", "page-recovery-meta");
+      const item = el(doc, "div", "blockeditor-recovery-row", { "data-composing": row.blockId });
+      const meta = el(doc, "div", "blockeditor-recovery-meta");
       meta.textContent = "Text typed while composing. It never reached the page.";
       item.append(meta, preview(doc, row.text));
       const actions = el(doc, "div", "");

package/src/page/rich/chart.js

@@ -92,7 +92,7 @@ function renderPie(model, slices, width) {
     const y1 = fmt(PIE.cy + PIE.radius * Math.sin(slice.from));
     const x2 = fmt(PIE.cx + PIE.radius * Math.cos(slice.to));
     const y2 = fmt(PIE.cy + PIE.radius * Math.sin(slice.to));
-    parts.push(`<path${point} d="M ${PIE.cx} ${PIE.cy} L ${x1} ${y1} A ${PIE.radius} ${PIE.radius} 0 ${slice.fraction > .5 ? 1 : 0} 1 ${x2} ${y2} Z" fill="${slice.color}" stroke="var(--page-bg)" stroke-width="2"/>`);
+    parts.push(`<path${point} d="M ${PIE.cx} ${PIE.cy} L ${x1} ${y1} A ${PIE.radius} ${PIE.radius} 0 ${slice.fraction > .5 ? 1 : 0} 1 ${x2} ${y2} Z" fill="${slice.color}" stroke="var(--blockeditor-bg)" stroke-width="2"/>`);
   });
   slices.forEach((slice, index) => {
     const yy = fmt(54 + index * 36);

package/src/page/rich/page-tool.js

@@ -5,7 +5,12 @@ export { capabilityAdvertised } from "../tool-capability.js";
 const CONTEXT_LIMIT = 16384;
 const bytes = (value) => new TextEncoder().encode(JSON.stringify(value)).length;
 
-/** @typedef {{protocol: 'page-tool/1', requestId: string, prompt: string, context: {title: string, outline: unknown[], tables: unknown[]}, target: null | {toolId: string, rev: string}}} ToolRequest */
+/**
+ * @typedef {{protocol: 'blockeditor-tool/1', requestId: string, prompt: string,
+ *   context: {title: string, outline: unknown[], tables: unknown[]},
+ *   target: null | {toolId: string, rev: string},
+ *   current: null | {artifact: object, state: unknown}}} ToolRequest
+ */
 /** @typedef {{requestId: string, artifact: object, state: unknown}} ToolResult */
 /** @typedef {{requestId: string, code: string, message: string}} ToolFailure */
 
@@ -31,7 +36,12 @@ function trimmedContext(context) {
   return copy;
 }
 
-export function createToolClient({ transport, newId }) {
+// The wire sees the request id as the host's own column, a UUID: a made-up string is
+// refused before the model is asked.
+const freshRequestId = () =>
+  globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+
+export function createToolClient({ transport, newId = freshRequestId }) {
   let active = null;
   const discard = (candidate) => {
     if (!candidate || candidate.discarded || candidate.done) return;
@@ -41,14 +51,14 @@ export function createToolClient({ transport, newId }) {
     candidate.resolve({ requestId: candidate.requestId, code: "discarded", message: "Candidate discarded" });
   };
   return {
-    request(prompt, context, target = null) {
+    request(prompt, context, target = null, current = null) {
       const trimmed = trimmedContext(context);
       if (active) discard(active);
       const requestId = newId();
       const candidate = { requestId, discarded: false, done: false };
       candidate.promise = new Promise((resolve) => { candidate.resolve = resolve; });
       active = candidate;
-      const request = { protocol: "page-tool/1", requestId, prompt, context: trimmed, target };
+      const request = { protocol: "blockeditor-tool/1", requestId, prompt, context: trimmed, target, current };
       candidate.request = request;
       const finish = (reply) => {
         if (candidate.discarded || candidate.done || reply?.requestId !== requestId) return;
@@ -62,9 +72,14 @@ export function createToolClient({ transport, newId }) {
         } else candidate.resolve(typeof reply?.code === "string" ? reply : { requestId, code: "invalid-result", message: "invalid-result" });
       };
       try {
-        Promise.resolve(transport.request(request)).then(finish, (error) => finish({ requestId, code: "transport-error", message: String(error?.message ?? error) }));
+        const failed = (error) => finish({
+          requestId,
+          code: typeof error?.code === "string" ? error.code : "transport-error",
+          message: String(error?.message ?? error),
+        });
+        Promise.resolve(transport.request(request)).then(finish, failed);
       } catch (error) {
-        finish({ requestId, code: "transport-error", message: String(error?.message ?? error) });
+        finish({ requestId, code: typeof error?.code === "string" ? error.code : "transport-error", message: String(error?.message ?? error) });
       }
       return candidate;
     },

package/src/page/rich/tool-runtime.js

@@ -138,7 +138,7 @@ export function scopeCss(css, blockSelector) {
 export function mountTool({ root, artifact, mode, state, tables = () => [], onError = () => {}, setTimer = setTimeout, clearTimer = clearTimeout }) {
   const listeners = { change: new Set(), tables: new Set() };
   const timers = new Set();
-  let cleanup, disposed = false;
+  let cleanup, disposed = false, failed = false;
   const dispose = () => {
     if (disposed) return;
     disposed = true;
@@ -181,11 +181,12 @@ export function mountTool({ root, artifact, mode, state, tables = () => [], onEr
     if (typeof mount !== "function") throw new TypeError("tool script must define mount(tool)");
     cleanup = mount(tool);
   } catch (error) {
+    failed = true;
     try { dispose(); } catch (cleanupError) { onError(cleanupError); }
     onError(error);
     root.innerHTML = `${artifact.fallbackHtml}<p data-tool-error>Tool could not start</p>`;
   }
-  return { notifyState: () => notify("change"), notifyTables: () => notify("tables"), dispose };
+  return { notifyState: () => notify("change"), notifyTables: () => notify("tables"), dispose, failed };
 }
 
 function deepFreeze(value) {

package/src/page/save-projection.js

@@ -12,8 +12,8 @@ import { customTitle, writeTitle } from "./document-title-dom.js";
 import { blocksFromPageValues } from "./ybind/decode.js";
 import { YDecodeError } from "./ybind/provider.js";
 
-export const ARTICLE = "article[data-page]";
-const PAGE = /^page(\.[0-9]+)?$/;
+export const ARTICLE = "article[data-blockeditor]";
+const PAGE = /^blockeditor(\.[0-9]+)?$/;
 
 export function pageTags(root) {
   return [...root.querySelectorAll('script[merge][clay~="live"]')].filter((el) => PAGE.test(el.getAttribute("merge")));

package/src/page/save-states.js

@@ -8,8 +8,8 @@ import { downloadHtml, documentName } from "../core/download.js";
 // table does not know falls to `error`, which leaves the existing generic
 // "Couldn't save" feedback exactly as it was.
 const SAVE_STATE_BY_CODE = Object.freeze({
-  "page-converting": "retrying",
-  "page-capacity": "retrying",
+  "blockeditor-converting": "retrying",
+  "blockeditor-capacity": "retrying",
   busy: "retrying",
   "rate-limited": "retrying",
   offline: "retrying",
@@ -17,17 +17,17 @@ const SAVE_STATE_BY_CODE = Object.freeze({
   "network-error": "retrying",
   timeout: "retrying",
   "save-history-pending": "retrying",
-  "page-condition-required": "blocked",
-  "page-conversion-refused": "blocked",
-  "page-conversion-required": "blocked",
-  "page-conversion-stale": "blocked",
+  "blockeditor-condition-required": "blocked",
+  "blockeditor-conversion-refused": "blocked",
+  "blockeditor-conversion-required": "blocked",
+  "blockeditor-conversion-stale": "blocked",
   "save-id-reused": "blocked",
   "too-large": "blocked",
   "unsupported-host": "blocked",
   "save-history-refresh-required": "blocked",
   "provenance-unsupported": "blocked",
   "receipt-expired": "blocked",
-  "page-full": "blocked",
+  "blockeditor-full": "blocked",
   "compaction-failed": "blocked",
 });
 
@@ -55,7 +55,7 @@ function saveStateFor({ ok = false, code = null, offline = false } = {}) {
 function withoutPageTag(html) {
   let doc;
   try { doc = new DOMParser().parseFromString(html, "text/html"); } catch { return html; }
-  const tags = [...doc.querySelectorAll('script[type="application/json"][merge="page"][clay~="live"]')]
+  const tags = [...doc.querySelectorAll('script[type="application/json"][merge="blockeditor"][clay~="live"]')]
     .filter((el) => !el.closest("template") && !el.closest("noscript"));
   if (tags.length !== 1) return html;
   const outer = tags[0].outerHTML;
@@ -83,7 +83,7 @@ async function copyPageText() {
   try {
     const { forSave } = captureForSaveAndComparison({ emitForSync: false });
     const doc = new DOMParser().parseFromString(forSave, "text/html");
-    const articles = doc.querySelectorAll("article[data-page]");
+    const articles = doc.querySelectorAll("article[data-blockeditor]");
     if (articles.length !== 1) return false;
     await navigator.clipboard.writeText(articles[0].textContent);
     return true;

package/src/page/schema.js

@@ -52,7 +52,7 @@ export const schema = new model.Schema({
         due: { default: null },
       },
       toDOM: (n) => ["div", ref(n, {
-        class: "page-li",
+        class: "blockeditor-li",
         "data-kind": n.attrs.kind,
         "data-indent": String(n.attrs.indent),
         "data-checked": n.attrs.checked ? "true" : "false",
@@ -68,7 +68,7 @@ export const schema = new model.Schema({
       group: "block",
       content: "inline*",
       attrs: block,
-      toDOM: (n) => ["aside", ref(n, { class: "page-callout" }), 0],
+      toDOM: (n) => ["aside", ref(n, { class: "blockeditor-callout" }), 0],
     },
     code_block: {
       group: "block",
@@ -83,7 +83,7 @@ export const schema = new model.Schema({
       group: "block",
       content: "inline*",
       attrs: { ...block, open: { default: false }, level: { default: null } },
-      toDOM: (n) => ["div", ref(n, { class: "page-toggle", "data-open": n.attrs.open ? "true" : "false", ...(n.attrs.level ? { "data-level": String(n.attrs.level) } : {}) }), 0],
+      toDOM: (n) => ["div", ref(n, { class: "blockeditor-toggle", "data-open": n.attrs.open ? "true" : "false", ...(n.attrs.level ? { "data-level": String(n.attrs.level) } : {}) }), 0],
     },
     divider: {
       group: "block",
@@ -97,7 +97,7 @@ export const schema = new model.Schema({
       group: "block",
       atom: true,
       attrs: { ...block, maxLevel: { default: null } },
-      toDOM: (n) => ["div", ref(n, { class: "page-toc", "data-type": "toc", ...(n.attrs.maxLevel ? { "data-max-level": String(n.attrs.maxLevel) } : {}) })],
+      toDOM: (n) => ["div", ref(n, { class: "blockeditor-toc", "data-type": "toc", ...(n.attrs.maxLevel ? { "data-max-level": String(n.attrs.maxLevel) } : {}) })],
     },
     image: {
       group: "block",
@@ -110,7 +110,7 @@ export const schema = new model.Schema({
       group: "block",
       atom: true,
       attrs: { ...block, src: { default: "" }, name: { default: "" }, size: { default: null }, mime: { default: null } },
-      toDOM: (n) => ["div", ref(n, { class: "page-file", "data-type": "file", "data-src": safeFileHref(n.attrs.src) ?? "", "data-name": n.attrs.name, "data-size": n.attrs.size == null ? "" : String(n.attrs.size), "data-mime": n.attrs.mime ?? "" }),
+      toDOM: (n) => ["div", ref(n, { class: "blockeditor-file", "data-type": "file", "data-src": safeFileHref(n.attrs.src) ?? "", "data-name": n.attrs.name, "data-size": n.attrs.size == null ? "" : String(n.attrs.size), "data-mime": n.attrs.mime ?? "" }),
         ["a", { href: safeFileHref(n.attrs.src), target: "_blank", rel: "noopener noreferrer" }, n.attrs.name || "file"]],
     },
     table: {
@@ -174,8 +174,8 @@ export const schema = new model.Schema({
       selectable: true,
       attrs: { ...block, raw: { default: null } },
       toDOM: (n) => ["div", ref(n, { "data-type": "newer-format", "data-format": String(n.attrs.raw?.t ?? ""), contenteditable: "false" }),
-        ["span", { class: "page-newer-format" }, `Newer format: ${String(n.attrs.raw?.t ?? "")}`],
-        ["span", { class: "page-newer-format-text" }, n.textContent]],
+        ["span", { class: "blockeditor-newer-format" }, `Newer format: ${String(n.attrs.raw?.t ?? "")}`],
+        ["span", { class: "blockeditor-newer-format-text" }, n.textContent]],
     },
 
     text: { group: "inline" },
@@ -202,7 +202,7 @@ export const schema = new model.Schema({
       attrs: { id: {} },
       inclusive: false,
       excludes: "mention date link",
-      toDOM: (m) => ["span", { "data-page-mention": m.attrs.id }, 0],
+      toDOM: (m) => ["span", { "data-blockeditor-mention": m.attrs.id }, 0],
     },
     // A date mention is the calendar date as ordinary ISO text with this mark over it:
     // `date` is YYYY-MM-DD, and no time, zone, reminder or relative word is stored.
@@ -210,7 +210,7 @@ export const schema = new model.Schema({
       attrs: { date: {} },
       inclusive: false,
       excludes: "mention date link",
-      toDOM: (m) => ["time", { datetime: m.attrs.date, "data-page-date": "" }, 0],
+      toDOM: (m) => ["time", { datetime: m.attrs.date, "data-blockeditor-date": "" }, 0],
     },
     // The floor-1 formats (format-native.js): written as named descriptors,
     // drawn as the elements the saved article keeps for them.

package/src/page/table-style.js

@@ -1,25 +1,25 @@
 export const TABLE_CSS = `
-.page-editor .page-table { position: relative; }
-.page-table td { position: relative; }
-.page-table th { position: relative; }
-.page-table td.is-cell-selected { background: var(--page-block-selected); }
-.page-editor.has-cell-rect .page-table td ::selection, .page-editor.has-cell-rect .page-table td::selection { background: transparent; }
-.page-editor.has-cell-rect .page-table td { caret-color: transparent; }
-.page-table table.is-sized { table-layout: fixed; min-width: 0; }
-.page-table table.is-sized th, .page-table table.is-sized td { min-width: 0; overflow-wrap: anywhere; }
-.page-table-resize { position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 8px; z-index: 2; cursor: col-resize; touch-action: none; }
-.page-table-resize:hover, .page-table-resize:active, .page-table-resize:focus-visible { background: var(--page-accent); opacity: 0.4; }
-.page-table-add-row, .page-table-add-col { position: absolute; z-index: 1; padding: 0; background: var(--page-chrome-bg-moved); color: var(--page-ink-soft); display: flex; align-items: center; justify-content: center; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms; }
-.page-table-add-row { left: 0; right: 0; top: 100%; height: 16px; border-radius: 0 0 6px 6px; border: 1px solid var(--page-chrome-line-moved); border-top: 0; padding-bottom: 2px; box-sizing: border-box; }
-.page-table-add-col { top: 0; bottom: 0; left: 100%; width: 16px; border-radius: 0 6px 6px 0; border: 1px solid var(--page-chrome-line-moved); border-left: 0; box-sizing: border-box; }
-.page-table:hover > .page-table-add-row, .page-table:hover > .page-table-add-col, .page-table-add-row:focus-visible, .page-table-add-col:focus-visible { opacity: 1; }
-.page-table-add-row:hover, .page-table-add-col:hover { background: var(--page-pop-hover); color: var(--page-ink); }
-.page-table-date { position: absolute; inset-inline-start: 0; top: 100%; z-index: 3; font: inherit; color: var(--page-pop-ink); background: var(--page-pop-bg); border: 1px solid var(--page-pop-line); border-radius: 6px; padding: 4px 6px; box-shadow: var(--page-pop-shadow); }
+.blockeditor-editor .blockeditor-table { position: relative; }
+.blockeditor-table td { position: relative; }
+.blockeditor-table th { position: relative; }
+.blockeditor-table td.is-cell-selected { background: var(--blockeditor-block-selected); }
+.blockeditor-editor.has-cell-rect .blockeditor-table td ::selection, .blockeditor-editor.has-cell-rect .blockeditor-table td::selection { background: transparent; }
+.blockeditor-editor.has-cell-rect .blockeditor-table td { caret-color: transparent; }
+.blockeditor-table table.is-sized { table-layout: fixed; min-width: 0; }
+.blockeditor-table table.is-sized th, .blockeditor-table table.is-sized td { min-width: 0; overflow-wrap: anywhere; }
+.blockeditor-table-resize { position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 8px; z-index: 2; cursor: col-resize; touch-action: none; }
+.blockeditor-table-resize:hover, .blockeditor-table-resize:active, .blockeditor-table-resize:focus-visible { background: var(--blockeditor-accent); opacity: 0.4; }
+.blockeditor-table-add-row, .blockeditor-table-add-col { position: absolute; z-index: 1; padding: 0; background: var(--blockeditor-chrome-bg-moved); color: var(--blockeditor-ink-soft); display: flex; align-items: center; justify-content: center; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 120ms; }
+.blockeditor-table-add-row { left: 0; right: 0; top: 100%; height: 16px; border-radius: 0 0 6px 6px; border: 1px solid var(--blockeditor-chrome-line-moved); border-top: 0; padding-bottom: 2px; box-sizing: border-box; }
+.blockeditor-table-add-col { top: 0; bottom: 0; left: 100%; width: 16px; border-radius: 0 6px 6px 0; border: 1px solid var(--blockeditor-chrome-line-moved); border-left: 0; box-sizing: border-box; }
+.blockeditor-table:hover > .blockeditor-table-add-row, .blockeditor-table:hover > .blockeditor-table-add-col, .blockeditor-table-add-row:focus-visible, .blockeditor-table-add-col:focus-visible { opacity: 1; }
+.blockeditor-table-add-row:hover, .blockeditor-table-add-col:hover { background: var(--blockeditor-pop-hover); color: var(--blockeditor-ink); }
+.blockeditor-table-date { position: absolute; inset-inline-start: 0; top: 100%; z-index: 3; font: inherit; color: var(--blockeditor-pop-ink); background: var(--blockeditor-pop-bg); border: 1px solid var(--blockeditor-pop-line); border-radius: 6px; padding: 4px 6px; box-shadow: var(--blockeditor-pop-shadow); }
 @media (max-width: 560px) {
-  .page-table-date { min-height: 44px; }
-  .page-table-resize { display: none; }
-  .page-table-add-row, .page-table-add-col { position: static; display: inline-block; width: 50%; height: 44px; border-radius: 0; opacity: 1; border-block-start: 1px solid var(--page-rule); }
-  .page-table-add-row::after { content: " Row"; }
-  .page-table-add-col::after { content: " Column"; }
+  .blockeditor-table-date { min-height: 44px; }
+  .blockeditor-table-resize { display: none; }
+  .blockeditor-table-add-row, .blockeditor-table-add-col { position: static; display: inline-block; width: 50%; height: 44px; border-radius: 0; opacity: 1; border-block-start: 1px solid var(--blockeditor-rule); }
+  .blockeditor-table-add-row::after { content: " Row"; }
+  .blockeditor-table-add-col::after { content: " Column"; }
 }
 `;

package/src/page/toc-link.js

@@ -1,6 +1,6 @@
 // The saved table of contents' links: decode the anchor a link names, and reveal
 // the block it points at in a reader. Loaded the first time a reader follows one.
-const TOC_ANCHOR = "page-block-";
+const TOC_ANCHOR = "blockeditor-block-";
 
 const fromB64url = (text) => {
   const bin = atob(String(text).replace(/-/g, "+").replace(/_/g, "/"));

package/src/page/tool-capability.js

@@ -1,3 +1,8 @@
-// A host that advertises page-tool/1 can answer tool requests. The check stays
-// in the core: the slash menu asks it before the tool view part loads.
-export const capabilityAdvertised = (meta) => Array.isArray(meta?.extensions) && meta.extensions.includes("page-tool/1");
+// A host that lists blockeditor-tool in this document's helper list can answer tool
+// requests. Old clients look for a blockeditor-tool/1 entry in `extensions`, which no host
+// adds, so they never show a dead /ai. The check stays in the core: the slash menu
+// asks it before the tool view part loads.
+export const capabilityAdvertised = (meta) =>
+  Array.isArray(meta?.document?.helpers) &&
+  meta.document.helpers.some((helper) =>
+    helper?.name === "blockeditor-tool" && (helper.state === "ready" || helper.state === "unavailable"));

package/src/page/tool-transport.js

@@ -0,0 +1,52 @@
+// The blockeditor-tool helper over clay.wire. `clay.wire` is read when a request goes out,
+// because the page plugin loads before the wire does: a page with exclude=wire must
+// never pull the module in.
+export class ToolTransportError extends Error {
+  constructor(code) {
+    super(code);
+    this.name = "ToolTransportError";
+    this.code = code;
+  }
+}
+
+export function createToolTransport({ getWire = () => globalThis.window?.clay?.wire ?? null } = {}) {
+  const handles = new Map();
+  return {
+    request(payload, { onStatus = null } = {}) {
+      const wire = getWire();
+      if (!wire || typeof wire.send !== "function") return Promise.reject(new ToolTransportError("no-wire"));
+      const id = payload?.requestId;
+      let handle;
+      try {
+        handle = wire.send(payload, { helper: "blockeditor-tool", document: "none", id, onStatus });
+      } catch (error) {
+        return Promise.reject(new ToolTransportError("no-wire"));
+      }
+      handles.set(id, handle);
+      return Promise.resolve(handle.done).then((outcome) => {
+        if (handles.get(id) === handle) handles.delete(id);
+        // A reply is the wire's structured result; a failure keeps the host's own code
+        // so the page can tell a refused prompt from a lost connection.
+        if (outcome?.state === "done") {
+          const result = outcome.result ?? {};
+          return {
+            requestId: typeof result.requestId === "string" ? result.requestId : id,
+            artifact: result.artifact,
+            state: result.state,
+            model: result.model,
+          };
+        }
+        return {
+          requestId: id,
+          code: outcome?.errorCode || (outcome?.state === "cancelled" ? "cancelled" : "transport-error"),
+          message: outcome?.error || "the helper reported an error",
+        };
+      }, () => ({ requestId: id, code: "transport-error", message: "the helper reported an error" }));
+    },
+    cancel(id) {
+      const handle = handles.get(id);
+      handles.delete(id);
+      handle?.cancel?.();
+    },
+  };
+}

package/src/page/tool-views.js

@@ -1,3 +1,7 @@
 // The tool host a tool's plugin can reach, filled by the tool view part when it
 // loads, per editor. A document whose editor has no host yet notifies nothing.
 export const toolViews = new WeakMap();
+
+// The mounted tool blocks of an editor, by id, so work that must pause a tool can
+// reach the block that runs it.
+export const toolBlockViews = new WeakMap();

package/src/page/tools.js

@@ -15,6 +15,7 @@ export function createToolHost({ store = null, mode, tables = () => [] }) {
   };
 
   const fail = (item, error) => {
+    item.failed = true;
     warn(item.id, item.rev, error);
     item.readerOff?.();
     item.readerOff = null;
@@ -46,7 +47,7 @@ export function createToolHost({ store = null, mode, tables = () => [] }) {
   const host = {
     mount(root, { id, artifact, rev, seed = {} }) {
       if (disposed) throw new Error("tool host is disposed");
-      const item = { root, id, artifact, rev, seed, runtime: null, readerOff: null, disposed: false, signature: undefined };
+      const item = { root, id, artifact, rev, seed, runtime: null, readerOff: null, disposed: false, failed: false, signature: undefined };
       const note = (message) => {
         const line = root.ownerDocument.createElement("p");
         line.setAttribute("data-tool-note", "");
@@ -58,8 +59,10 @@ export function createToolHost({ store = null, mode, tables = () => [] }) {
         item.readerOff = null;
         try { item.runtime?.dispose(); } catch (error) { warn(item.id, item.rev, error); }
         item.runtime = null;
+        item.failed = false;
         root.removeAttribute("data-tool-scope");
         if (validateArtifact(item.artifact).ok === false) {
+          item.failed = true;
           root.textContent = "Tool unavailable";
           warn(item.id, item.rev, new Error("invalid artifact"));
           return;
@@ -75,6 +78,7 @@ export function createToolHost({ store = null, mode, tables = () => [] }) {
           ? scopedStateHandle(store, item.id, item.rev)
           : readerStateHandle(current ?? item.seed ?? {});
         item.runtime = mountTool({ root, artifact: item.artifact, mode, state, tables, onError: (error) => warn(item.id, item.rev, error) });
+        item.failed = item.runtime.failed === true;
         item.readerOff = state.on?.("change", () => {
           try { item.runtime?.notifyState(); } catch (error) { fail(item, error); }
         }) ?? null;
@@ -83,6 +87,7 @@ export function createToolHost({ store = null, mode, tables = () => [] }) {
       try { item.render(); } catch (error) { fail(item, error); }
       mounted.add(item);
       return {
+        get failed() { return item.failed; },
         update({ artifact: nextArtifact, rev: nextRev }) {
           if (item.disposed) return;
           if (nextRev === item.rev && nextArtifact === item.artifact) return;

package/src/page/view.js

@@ -9,9 +9,9 @@ import { stopForUpgrade, upgradeReplaces, upgradeReplacesDocument } from "../syn
 import { applyPreparedArticle, keepToolVersion, prepareSavedArticle, toolInfoOf, toolsOf, toolStateOf } from "./reader-patch.js";
 import { claim } from "./runtime-owner.js";
 
-const ARTICLE = "article[data-page]";
+const ARTICLE = "article[data-blockeditor]";
 const TOOL = 'section[data-type="tool"][data-id]';
-const PAGE_TAG = 'script[type="application/json"][merge="page"]';
+const PAGE_TAG = 'script[type="application/json"][merge="blockeditor"]';
 const LINEAGE = ["live-at", "live-by"];
 
 export { applyPreparedArticle, prepareSavedArticle };
@@ -220,7 +220,7 @@ function createReader({ doc, article, represented = null, feed = null, documentU
     if (stopped || yielded) return false;
     const prepared = prepareSavedArticle(candidate.bytes, doc);
     if (!prepared.ok) return false;
-    if (article.querySelector(".page-editor")) return false;
+    if (article.querySelector(".blockeditor-editor")) return false;
     // A file published at another version of this document is not this reader's to
     // show: the stream stops, this file and every later one are refused, and the
     // notice offers a reload. Nothing of it reaches the article.
@@ -267,7 +267,7 @@ function createReader({ doc, article, represented = null, feed = null, documentU
   listeners.push(["toggle", onToggle, true]);
 
   const onTocLink = (event) => {
-    const link = event.target.closest?.('a[href^="#page-block-"], a[href^="#"]');
+    const link = event.target.closest?.('a[href^="#blockeditor-block-"], a[href^="#"]');
     if (!link || !article.contains(link) || !link.closest('nav[aria-label="Table of contents"]')) return;
     event.preventDefault();
     followTocLink(article, link.getAttribute("href"));
@@ -399,9 +399,9 @@ export function start({ represented = null, documentURL, servedEtag = null, stre
     throw new TypeError("clayjs: the reader needs a file, a stream or a page to follow");
   }
   const articles = doc.querySelectorAll(ARTICLE);
-  if (articles.length !== 1) throw new Error("clayjs: the reader needs exactly one article[data-page]");
+  if (articles.length !== 1) throw new Error("clayjs: the reader needs exactly one article[data-blockeditor]");
   const article = articles[0];
-  if (article.querySelector(".page-editor")) throw new Error("clayjs: the reader will not start over a mounted editor");
+  if (article.querySelector(".blockeditor-editor")) throw new Error("clayjs: the reader will not start over a mounted editor");
   if (represented) {
     const prepared = prepareSavedArticle(represented.bytes, doc);
     if (!prepared.ok) throw new Error("clayjs: the saved file is not a readable page");

package/src/page/ybind/binding.js

@@ -26,7 +26,7 @@ export function createYPageBinding({ store, ydoc = new Y.Doc(), onNotice = () =>
     // A full or failed room stops offering at once, but the checkpoint of what it already
     // admitted goes out before the page locks and holds every save.
     onStopped: (reason) => {
-      if (reason !== "page-full" && reason !== "compaction-failed") { onStopped(reason); return; }
+      if (reason !== "blockeditor-full" && reason !== "compaction-failed") { onStopped(reason); return; }
       Promise.resolve(requestCheckpoint?.({ timeoutMs: 10_000 })).catch(() => {}).finally(() => onStopped(reason));
     },
     onLocalUpdate: debt.local,

package/src/page/ybind/conversion.js

@@ -2,7 +2,7 @@ import { cloneJson } from "../../live/ops.js";
 import { canon } from "../projection.js";
 import { migrateHybridValues, YMigrationError } from "./migrate.js";
 
-const PAGE = /^page(\.[0-9]+)?$/;
+const PAGE = /^blockeditor(\.[0-9]+)?$/;
 
 export async function prepareHybridConversion(tags) {
   try {

package/src/page/ybind/layout.js

@@ -1,11 +1,11 @@
 import * as Y from "../../vendor/yjs.vendor.js";
 import { REMOTE } from "../model.js";
 
-export const LOCAL = "page-local";
-export const NET = "page-net";
-export const SEED = "page-seed";
+export const LOCAL = "blockeditor-local";
+export const NET = "blockeditor-net";
+export const SEED = "blockeditor-seed";
 export const REMOTE_META = REMOTE;
-export const HISTORY_META = Symbol("page-history");
+export const HISTORY_META = Symbol("blockeditor-history");
 export const PAGE_ROOTS = Object.freeze(["flow", "attrs", "gone", "boardFields", "tableFields", "origins"]);
 
 const SKIP = new Set(["id", "pos"]);

package/src/page/ybind/migrate.js

@@ -171,7 +171,7 @@ export function migrateHybridValues(values) {
 // so every rebuild of the same article is byte-identical (two tabs converge) and rebuilds of
 // different articles never share Yjs item ids.
 export function seedClientId(blocks) {
-  const id = parseInt(hash64(`page-seed:v1:${canon(blocks)}`).slice(0, 8), 16) >>> 0;
+  const id = parseInt(hash64(`blockeditor-seed:v1:${canon(blocks)}`).slice(0, 8), 16) >>> 0;
   return id < 2 ? id + 2 : id;
 }