@panphora/clayjs 1.23.0 → 1.24.1

package/src/page/export-html.js

@@ -122,11 +122,11 @@ const escText = (text) => String(text).replace(/&/g, "&amp;").replace(/</g, "&lt
 
 const READER_CSS = `:root { color-scheme: light dark; }
 body { margin: 0; background: #ffffff; color: #37352f; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; }
-article[data-page] { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
-article[data-page] > * { margin: 0.7em 0; }
-header[data-page-heading] { position: relative; margin-bottom: 1.6em; }
-header[data-page-heading] img[data-page-cover] { display: block; width: 100%; max-height: 18rem; object-fit: cover; border-radius: 6px; margin-bottom: 1em; }
-header[data-page-heading] span[data-page-icon] { display: block; font-size: 2.6em; line-height: 1.2; }
+article[data-blockeditor] { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
+article[data-blockeditor] > * { margin: 0.7em 0; }
+header[data-blockeditor-heading] { position: relative; margin-bottom: 1.6em; }
+header[data-blockeditor-heading] img[data-blockeditor-cover] { display: block; width: 100%; max-height: 18rem; object-fit: cover; border-radius: 6px; margin-bottom: 1em; }
+header[data-blockeditor-heading] span[data-blockeditor-icon] { display: block; font-size: 2.6em; line-height: 1.2; }
 h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 650; margin: 1.2em 0 0.3em; }
 h1 { font-size: 2em; }
 h2 { font-size: 1.5em; }
@@ -134,7 +134,7 @@ h3 { font-size: 1.2em; }
 p, li { max-width: 100%; }
 a { color: #0b6bcb; }
 blockquote { margin-left: 0; padding-left: 1em; border-left: 3px solid rgba(55, 53, 47, 0.2); color: #5b5952; }
-aside.page-callout { border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 6px; padding: 0.8em 1em; background: rgba(55, 53, 47, 0.04); }
+aside.blockeditor-callout { border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 6px; padding: 0.8em 1em; background: rgba(55, 53, 47, 0.04); }
 pre { overflow-x: auto; padding: 0.9em 1em; border-radius: 6px; background: rgba(55, 53, 47, 0.06); font-size: 0.9em; }
 code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
 pre code { font-size: inherit; }
@@ -160,7 +160,7 @@ li > input[type="checkbox"] { margin-right: 0.4em; }
 [data-type="file"] a { display: inline-block; padding: 0.4em 0.7em; border: 1px solid rgba(55, 53, 47, 0.18); border-radius: 4px; }
 @media (prefers-color-scheme: dark) {
   body { background: #191919; color: #d4d4d4; }
-  aside.page-callout, th, pre { background: rgba(255, 255, 255, 0.06); }
+  aside.blockeditor-callout, th, pre { background: rgba(255, 255, 255, 0.06); }
   th, td, section[data-type="board"] > div, section[data-type="board"] li, [data-type="file"] a { border-color: rgba(255, 255, 255, 0.16); }
   a { color: #6cb0f5; }
 }`;
@@ -177,7 +177,7 @@ ${READER_CSS}
 </style>
 </head>
 <body>
-<article data-page="1">
+<article data-blockeditor="1">
 ${body}
 </article>
 </body>

package/src/page/features/checklist.js

@@ -19,7 +19,7 @@ const el = (doc, tag, cls, attrs = {}, text = null) => {
   return node;
 };
 
-const cardFace = (doc, name) => el(doc, "span", "page-board-face", { "aria-hidden": "true" }, ([...String(name).trim()][0] ?? "?").toUpperCase());
+const cardFace = (doc, name) => el(doc, "span", "blockeditor-board-face", { "aria-hidden": "true" }, ([...String(name).trim()][0] ?? "?").toUpperCase());
 
 function itemAt(view, id) {
   let found = null;
@@ -81,7 +81,7 @@ function dueLabel(due, today) {
 }
 
 function tag(doc, { name, paths, label, aria, filled, overdue = false }) {
-  const button = el(doc, "button", "page-check-chip", {
+  const button = el(doc, "button", "blockeditor-check-chip", {
     type: "button",
     "data-check": name,
     "data-filled": String(filled),
@@ -89,7 +89,7 @@ function tag(doc, { name, paths, label, aria, filled, overdue = false }) {
     "aria-expanded": "false",
     "aria-label": aria,
   });
-  button.append(icon(doc, paths), el(doc, "span", "page-check-chip-label", {}, label));
+  button.append(icon(doc, paths), el(doc, "span", "blockeditor-check-chip-label", {}, label));
   return button;
 }
 
@@ -103,11 +103,11 @@ function popup(view, anchor, { className, label, check, onKey = null }) {
   const doc = anchor.ownerDocument;
   const win = doc.defaultView;
   if (openPopup) openPopup.close();
-  for (const node of doc.querySelectorAll(".page-check-popup")) node.remove();
+  for (const node of doc.querySelectorAll(".blockeditor-check-popup")) node.remove();
   const parent = view.dom.parentNode;
   const anchored = ["relative", "absolute", "fixed", "sticky"].includes(win?.getComputedStyle?.(parent)?.position ?? "");
   const placement = parent && anchored ? parent : doc.body;
-  const panel = el(doc, "div", `page-check-popup ${className}`, { role: "dialog", "aria-label": label, "data-check": check });
+  const panel = el(doc, "div", `blockeditor-check-popup ${className}`, { role: "dialog", "aria-label": label, "data-check": check });
   let closed = false;
   const place = () => {
     const ring = anchor.getBoundingClientRect();
@@ -176,7 +176,7 @@ function ownerPicker(view, id, anchor) {
   const doc = anchor.ownerDocument;
   const current = itemAt(view, id)?.node.attrs.owner || "";
   const { panel, close, place } = popup(view, anchor, {
-    className: "page-check-owner",
+    className: "blockeditor-check-owner",
     label: "Assignee",
     check: "owner-panel",
     onKey: (event, panel) => {
@@ -189,28 +189,28 @@ function ownerPicker(view, id, anchor) {
       next?.focus();
     },
   });
-  const input = el(doc, "input", "page-check-search", { type: "text", placeholder: "Find or type a name", "aria-label": "Find or type a name" });
-  const list = el(doc, "div", "page-check-people");
-  const remove = el(doc, "button", "page-check-person page-check-danger", { type: "button", "data-check": "clear-owner" });
-  remove.append(icon(doc, ICONS.clear), el(doc, "span", "page-check-person-name", {}, "Remove assignee"));
+  const input = el(doc, "input", "blockeditor-check-search", { type: "text", placeholder: "Find or type a name", "aria-label": "Find or type a name" });
+  const list = el(doc, "div", "blockeditor-check-people");
+  const remove = el(doc, "button", "blockeditor-check-person blockeditor-check-danger", { type: "button", "data-check": "clear-owner" });
+  remove.append(icon(doc, ICONS.clear), el(doc, "span", "blockeditor-check-person-name", {}, "Remove assignee"));
   remove.disabled = !current;
   remove.addEventListener("click", () => choose(null));
-  panel.append(input, el(doc, "div", "page-check-subhead", {}, "People in this document"), list, el(doc, "div", "page-check-divider"), remove);
+  panel.append(input, el(doc, "div", "blockeditor-check-subhead", {}, "People in this document"), list, el(doc, "div", "blockeditor-check-divider"), remove);
   let available = [];
   const choose = (name) => { close(); setItem(view, id, "owner", name); };
   const personRow = (name, count) => {
     const selected = name.toLowerCase() === String(current).toLowerCase();
-    const row = el(doc, "button", "page-check-person", { type: "button", "data-check": "owner-option", "data-name": name, "aria-pressed": String(selected) });
-    row.append(cardFace(doc, name), el(doc, "span", "page-check-person-name", {}, name), el(doc, "span", "page-check-person-meta", {}, `${count} ${count === 1 ? "item" : "items"}`));
+    const row = el(doc, "button", "blockeditor-check-person", { type: "button", "data-check": "owner-option", "data-name": name, "aria-pressed": String(selected) });
+    row.append(cardFace(doc, name), el(doc, "span", "blockeditor-check-person-name", {}, name), el(doc, "span", "blockeditor-check-person-meta", {}, `${count} ${count === 1 ? "item" : "items"}`));
     if (selected) row.append(icon(doc, ICONS.tick));
     row.addEventListener("click", () => choose(name));
     return row;
   };
   const addRow = (name) => {
-    const row = el(doc, "button", "page-check-person", { type: "button", "data-check": "owner-new", "data-name": name });
-    const label = el(doc, "span", "page-check-person-name", {}, "Assign to ");
+    const row = el(doc, "button", "blockeditor-check-person", { type: "button", "data-check": "owner-new", "data-name": name });
+    const label = el(doc, "span", "blockeditor-check-person-name", {}, "Assign to ");
     label.append(el(doc, "strong", null, {}, name));
-    row.append(icon(doc, ICONS.plus), label, el(doc, "span", "page-check-person-meta", {}, "New"));
+    row.append(icon(doc, ICONS.plus), label, el(doc, "span", "blockeditor-check-person-meta", {}, "New"));
     row.addEventListener("click", () => choose(name));
     return row;
   };
@@ -267,55 +267,55 @@ function datePicker(view, id, anchor) {
   let month = opened.getMonth();
 
   const { panel, close, place } = popup(view, anchor, {
-    className: "page-check-date",
+    className: "blockeditor-check-date",
     label: "Due date",
     check: "date-panel",
     onKey: (event, panel) => gridKey(event, panel),
   });
   const pick = (key) => { close(); setItem(view, id, "due", key); };
 
-  const quick = el(doc, "div", "page-check-quick");
+  const quick = el(doc, "div", "blockeditor-check-quick");
   const quickRow = (label, offset) => {
     const day = dateOf(now.getFullYear(), now.getMonth(), now.getDate() + offset);
-    const row = el(doc, "button", "page-check-quick-row", { type: "button", "data-check": "date-quick", "data-date": todayKey(day) });
-    row.append(icon(doc, ICONS.calendar), el(doc, "span", "page-check-quick-label", {}, label), el(doc, "span", "page-check-quick-meta", {}, shortDay(day)));
+    const row = el(doc, "button", "blockeditor-check-quick-row", { type: "button", "data-check": "date-quick", "data-date": todayKey(day) });
+    row.append(icon(doc, ICONS.calendar), el(doc, "span", "blockeditor-check-quick-label", {}, label), el(doc, "span", "blockeditor-check-quick-meta", {}, shortDay(day)));
     row.addEventListener("click", () => pick(todayKey(day)));
     return row;
   };
   quick.append(quickRow("Today", 0), quickRow("Tomorrow", 1), quickRow("Next week", 7));
 
-  const calendar = el(doc, "div", "page-check-cal");
-  const head = el(doc, "div", "page-check-cal-head");
-  const monthLabel = el(doc, "span", "page-check-cal-month");
-  const nav = el(doc, "span", "page-check-cal-nav");
+  const calendar = el(doc, "div", "blockeditor-check-cal");
+  const head = el(doc, "div", "blockeditor-check-cal-head");
+  const monthLabel = el(doc, "span", "blockeditor-check-cal-month");
+  const nav = el(doc, "span", "blockeditor-check-cal-nav");
   const step = (by) => {
     const moved = dateOf(year, month + by, 1);
     year = moved.getFullYear();
     month = moved.getMonth();
     draw();
   };
-  const previous = el(doc, "button", "page-check-cal-btn", { type: "button", "aria-label": "Previous month" });
-  const next = el(doc, "button", "page-check-cal-btn", { type: "button", "aria-label": "Next month" });
+  const previous = el(doc, "button", "blockeditor-check-cal-btn", { type: "button", "aria-label": "Previous month" });
+  const next = el(doc, "button", "blockeditor-check-cal-btn", { type: "button", "aria-label": "Next month" });
   previous.append(icon(doc, ICONS["chevron-left"]));
   next.append(icon(doc, ICONS["chevron-right"]));
   previous.addEventListener("click", () => step(-1));
   next.addEventListener("click", () => step(1));
   nav.append(previous, next);
   head.append(monthLabel, nav);
-  const grid = el(doc, "div", "page-check-cal-grid");
+  const grid = el(doc, "div", "blockeditor-check-cal-grid");
   calendar.append(head, grid);
 
   const draw = () => {
-    monthLabel.replaceChildren(el(doc, "span", null, {}, `${MONTHS[month]} `), el(doc, "span", "page-check-cal-year", {}, String(year)));
+    monthLabel.replaceChildren(el(doc, "span", null, {}, `${MONTHS[month]} `), el(doc, "span", "blockeditor-check-cal-year", {}, String(year)));
     const first = dateOf(year, month, 1);
     const days = dateOf(year, month + 1, 0).getDate();
     const cells = Math.ceil((first.getDay() + days) / 7) * 7;
-    const heads = ["S", "M", "T", "W", "T", "F", "S"].map((letter) => el(doc, "span", "page-check-cal-dow", {}, letter));
+    const heads = ["S", "M", "T", "W", "T", "F", "S"].map((letter) => el(doc, "span", "blockeditor-check-cal-dow", {}, letter));
     const buttons = [];
     for (let i = 0; i < cells; i += 1) {
       const day = dateOf(year, month, 1 - first.getDay() + i);
       const key = todayKey(day);
-      const button = el(doc, "button", "page-check-cal-day", {
+      const button = el(doc, "button", "blockeditor-check-cal-day", {
         type: "button",
         "data-check": "date-day",
         "data-date": key,
@@ -347,12 +347,12 @@ function datePicker(view, id, anchor) {
     panel.querySelector(`[data-check="date-day"][data-date="${todayKey(day)}"]`)?.focus();
   };
 
-  const clear = el(doc, "button", "page-check-quick-row page-check-danger", { type: "button", "data-check": "clear-date" });
-  clear.append(icon(doc, ICONS.clear), el(doc, "span", "page-check-quick-label", {}, "Clear date"));
+  const clear = el(doc, "button", "blockeditor-check-quick-row blockeditor-check-danger", { type: "button", "data-check": "clear-date" });
+  clear.append(icon(doc, ICONS.clear), el(doc, "span", "blockeditor-check-quick-label", {}, "Clear date"));
   clear.disabled = !current;
   clear.addEventListener("click", () => pick(null));
 
-  panel.append(quick, calendar, el(doc, "div", "page-check-divider"), clear);
+  panel.append(quick, calendar, el(doc, "div", "blockeditor-check-divider"), clear);
   draw();
   place();
   (grid.querySelector('[data-check="date-day"][aria-pressed="true"]') ?? grid.querySelector('[data-check="date-day"][data-today="true"]'))?.focus();
@@ -361,7 +361,7 @@ function datePicker(view, id, anchor) {
 function controls(view, node) {
   const doc = view.dom.ownerDocument;
   const box = doc.createElement("span");
-  box.className = "page-check-controls";
+  box.className = "blockeditor-check-controls";
   box.contentEditable = "false";
   box.dataset.empty = String(!node.attrs.owner && !node.attrs.due);
   const today = todayKey();
@@ -380,7 +380,7 @@ export function focusControl(view, name) {
   const $pos = view.state.selection.$head;
   if ($pos.depth !== 1 || $pos.parent.type !== schema.nodes.list_item || $pos.parent.attrs.kind !== "check") return false;
   const id = $pos.parent.attrs.id;
-  const widget = [...view.dom.querySelectorAll(".page-check-controls")].find((el) => el.dataset.item === id);
+  const widget = [...view.dom.querySelectorAll(".blockeditor-check-controls")].find((el) => el.dataset.item === id);
   const button = widget?.querySelector(`[data-check="${name}"]`);
   if (!button) return false;
   button.dataset.fromKeys = "true";
@@ -397,7 +397,7 @@ export function decorations(st) {
       const box = controls(view, node);
       box.dataset.item = node.attrs.id;
       return box;
-    }, { key: `${node.attrs.id}:${node.attrs.owner}:${node.attrs.due}:${node.attrs.checked}:${today}`, side: -1, stopEvent: (event) => !!event.target.closest?.(".page-check-chip, .page-check-popup"), ignoreSelection: true }));
+    }, { key: `${node.attrs.id}:${node.attrs.owner}:${node.attrs.due}:${node.attrs.checked}:${today}`, side: -1, stopEvent: (event) => !!event.target.closest?.(".blockeditor-check-chip, .blockeditor-check-popup"), ignoreSelection: true }));
   });
   return DecorationSet.create(st.doc, widgets);
 }

package/src/page/features/export-html.js

@@ -23,18 +23,18 @@ function fileName(title) {
 }
 
 // The panel 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 PANEL_CSS = `
 :host{font:inherit !important;color:inherit !important}
-.page-export-panel{max-width:46ch;margin:8px 0;padding:10px 12px;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-export-title{margin:0 0 2px;font-weight:600}
-.page-export-when{margin:0 0 6px;color:var(--page-ink-soft)}
-.page-export-losses{margin:6px 0;padding-left:1.1em}
-.page-export-losses li{margin:2px 0}
-.page-export-acts{display:flex;gap:6px;margin-top:8px}
-.page-export-btn{border:0;padding:4px 8px;border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer}
-.page-export-btn:hover{background:var(--page-pop-hover)}
-.page-export-panel[data-state="loss"] .page-export-title{color:var(--page-danger, #9E3B2F)}
+.blockeditor-export-panel{max-width:46ch;margin:8px 0;padding:10px 12px;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-export-title{margin:0 0 2px;font-weight:600}
+.blockeditor-export-when{margin:0 0 6px;color:var(--blockeditor-ink-soft)}
+.blockeditor-export-losses{margin:6px 0;padding-left:1.1em}
+.blockeditor-export-losses li{margin:2px 0}
+.blockeditor-export-acts{display:flex;gap:6px;margin-top:8px}
+.blockeditor-export-btn{border:0;padding:4px 8px;border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer}
+.blockeditor-export-btn:hover{background:var(--blockeditor-pop-hover)}
+.blockeditor-export-panel[data-state="loss"] .blockeditor-export-title{color:var(--blockeditor-danger, #9E3B2F)}
 `;
 
 export function createFeature({ view = null, download = downloadHtml, fetch: fetchImpl = null, now = () => new Date() } = {}) {
@@ -51,7 +51,7 @@ export function createFeature({ view = null, download = downloadHtml, fetch: fet
   const button = (act, label) => {
     const b = doc.createElement("button");
     b.type = "button";
-    b.className = "page-export-btn";
+    b.className = "blockeditor-export-btn";
     b.dataset.act = act;
     b.textContent = label;
     return b;
@@ -70,28 +70,28 @@ export function createFeature({ view = null, download = downloadHtml, fetch: fet
   // the one action that does anything — a download, and only when nothing is missing.
   function draw(s) {
     const box = s.panel ?? (s.panel = doc.createElement("aside"));
-    box.className = "page-export-panel";
+    box.className = "blockeditor-export-panel";
     box.dataset.state = s.ready ? "ready" : "loss";
     box.setAttribute("contenteditable", "false");
     box.setAttribute("role", "dialog");
     box.setAttribute("aria-modal", "false");
-    box.setAttribute("aria-labelledby", "page-export-title");
+    box.setAttribute("aria-labelledby", "blockeditor-export-title");
     box.dataset.at = s.at.toISOString();
     box.setAttribute("tabindex", "-1");
     box.textContent = "";
     const title = doc.createElement("p");
-    title.className = "page-export-title";
-    title.id = "page-export-title";
+    title.className = "blockeditor-export-title";
+    title.id = "blockeditor-export-title";
     const heading = s.ready ? "Reading copy" : "This page cannot be a reading copy yet";
     title.textContent = s.title ? `${heading}: ${s.title}` : heading;
     const when = doc.createElement("p");
-    when.className = "page-export-when";
+    when.className = "blockeditor-export-when";
     const said = `${s.at.toLocaleString()} · ${s.embedded} ${s.embedded === 1 ? "resource" : "resources"} inside the file`;
     when.textContent = said;
     box.append(title, when);
     if (s.losses.length) {
       const list = doc.createElement("ul");
-      list.className = "page-export-losses";
+      list.className = "blockeditor-export-losses";
       for (const entry of s.losses) {
         const item = doc.createElement("li");
         item.textContent = entry.message;
@@ -100,12 +100,12 @@ export function createFeature({ view = null, download = downloadHtml, fetch: fet
       box.append(list);
     }
     const acts = doc.createElement("div");
-    acts.className = "page-export-acts";
+    acts.className = "blockeditor-export-acts";
     if (s.ready) acts.append(button("download", "Download"), button("close", "Close"));
     else acts.append(button("retry", "Try again"), button("close", "Close"));
     box.append(acts);
     const first = acts.firstChild;
-    if (!s.ui) s.ui = mountEditorUI({ name: "page-export", content: box, css: [PANEL_CSS], parent: view.dom.parentElement ?? doc.body });
+    if (!s.ui) s.ui = mountEditorUI({ name: "blockeditor-export", content: box, css: [PANEL_CSS], parent: view.dom.parentElement ?? doc.body });
     // The panel is what a person lands on: the download when there is one to take,
     // and the list of what stopped it when there is not.
     (s.ready ? first : box).focus?.();

package/src/page/features/export-markdown.js

@@ -41,30 +41,30 @@ export function createFeature({ view = null, download = downloadHtml } = {}) {
       el.textContent = text;
       return el;
     };
-    parts.push(line("page-menu-title", "Export as Markdown"));
+    parts.push(line("blockeditor-menu-title", "Export as Markdown"));
     const counts = [`${s.report.blocks} block${s.report.blocks === 1 ? "" : "s"}`];
     if (s.report.extensions.length) counts.push(`${s.report.extensions.length} kept as HTML`);
     if (s.report.losses.length) counts.push(`${s.report.losses.length} lost`);
-    parts.push(line("page-menu-title page-export-summary", counts.join(" \u00b7 ")));
+    parts.push(line("blockeditor-menu-title blockeditor-export-summary", counts.join(" \u00b7 ")));
     const section = (className, label, list) => {
       if (!list.length) return;
       const box = doc.createElement("div");
       box.className = className;
-      box.append(line("page-menu-title", label));
+      box.append(line("blockeditor-menu-title", label));
       for (const one of list) {
-        const row = line("page-export-row", one.name);
+        const row = line("blockeditor-export-row", one.name);
         row.dataset.block = one.block ?? "";
         row.dataset.type = one.type ?? "";
         box.append(row);
       }
       parts.push(box);
     };
-    section("page-export-extensions", "Kept as HTML", s.report.extensions);
-    section("page-export-losses", "Not kept in Markdown", s.report.losses);
-    if (!s.report.extensions.length && !s.report.losses.length) parts.push(line("page-export-row", "Everything here is written as Markdown."));
+    section("blockeditor-export-extensions", "Kept as HTML", s.report.extensions);
+    section("blockeditor-export-losses", "Not kept in Markdown", s.report.losses);
+    if (!s.report.extensions.length && !s.report.losses.length) parts.push(line("blockeditor-export-row", "Everything here is written as Markdown."));
     if (s.notice) {
       const failed = doc.createElement("p");
-      failed.className = "page-export-error";
+      failed.className = "blockeditor-export-error";
       failed.setAttribute("role", "alert");
       failed.textContent = s.notice;
       parts.push(failed);
@@ -72,7 +72,7 @@ export function createFeature({ view = null, download = downloadHtml } = {}) {
     const button = (what, label) => {
       const el = doc.createElement("button");
       el.type = "button";
-      el.className = "page-menu-item";
+      el.className = "blockeditor-menu-item";
       el.dataset.export = what;
       el.textContent = label;
       el.addEventListener("mousedown", (event) => event.preventDefault());
@@ -112,7 +112,7 @@ export function createFeature({ view = null, download = downloadHtml } = {}) {
 
   function open(report, name) {
     const panel = doc.createElement("div");
-    panel.className = "page-menu page-export-preview";
+    panel.className = "blockeditor-menu blockeditor-export-preview";
     panel.setAttribute("role", "dialog");
     panel.setAttribute("aria-label", "Export Markdown");
     const s = { report, name, panel, notice: null, listen: [] };

package/src/page/features/import-markdown.js

@@ -80,8 +80,8 @@ const needsFormat = (blocks) => {
 };
 
 const messageOf = (answer) => {
-  if (answer?.code === "page-format-upgrade-required") return "This document needs a newer page format before Markdown can be added. The preview stays open.";
-  if (answer?.code === "page-format-unsupported") return "This host cannot record the newer page format this file needs. The preview stays open.";
+  if (answer?.code === "blockeditor-format-upgrade-required") return "This document needs a newer page format before Markdown can be added. The preview stays open.";
+  if (answer?.code === "blockeditor-format-unsupported") return "This host cannot record the newer page format this file needs. The preview stays open.";
   if (answer?.code === "stale-target") return "The place this import was started from changed. The preview stays open.";
   if (answer?.code === "empty-import") return "This file holds nothing that can be inserted.";
   return "The Markdown could not be inserted. The preview stays open.";
@@ -135,25 +135,25 @@ export function createFeature({ view = null, load = assetMarked } = {}) {
       el.textContent = text;
       return el;
     };
-    parts.push(line("page-menu-title", s.error ? "Couldn't read that Markdown" : `Import ${s.name}`));
+    parts.push(line("blockeditor-menu-title", s.error ? "Couldn't read that Markdown" : `Import ${s.name}`));
     if (!s.error) {
       const counts = [`${s.count} block${s.count === 1 ? "" : "s"}`];
       if (s.unsupported.length) counts.push(`${s.unsupported.length} kept as written`);
       if (s.refused.length) counts.push(`${s.refused.length} address${s.refused.length === 1 ? "" : "es"} left out`);
-      parts.push(line("page-menu-title page-import-summary", counts.join(" \u00b7 ")));
+      parts.push(line("blockeditor-menu-title blockeditor-import-summary", counts.join(" \u00b7 ")));
     }
     const rows = (className, list) => {
       const box = doc.createElement("div");
       box.className = className;
-      box.replaceChildren(...list.map((text) => line("page-import-row", text)));
+      box.replaceChildren(...list.map((text) => line("blockeditor-import-row", text)));
       return box;
     };
-    if (s.unsupported.length) parts.push(rows("page-import-unsupported", s.unsupported.map((one) => `${one.type}: ${excerpt(one.text)}`)));
-    if (s.refused.length) parts.push(rows("page-import-refused", s.refused.map((one) => `${one.type}: ${one.href}`)));
+    if (s.unsupported.length) parts.push(rows("blockeditor-import-unsupported", s.unsupported.map((one) => `${one.type}: ${excerpt(one.text)}`)));
+    if (s.refused.length) parts.push(rows("blockeditor-import-refused", s.refused.map((one) => `${one.type}: ${one.href}`)));
     const said = s.error ?? s.notice ?? null;
     if (said) {
       const failed = doc.createElement("p");
-      failed.className = "page-import-error";
+      failed.className = "blockeditor-import-error";
       failed.setAttribute("role", "alert");
       failed.textContent = said;
       parts.push(failed);
@@ -161,7 +161,7 @@ export function createFeature({ view = null, load = assetMarked } = {}) {
     const button = (what, label) => {
       const el = doc.createElement("button");
       el.type = "button";
-      el.className = "page-menu-item";
+      el.className = "blockeditor-menu-item";
       el.dataset.import = what;
       el.textContent = label;
       el.addEventListener("mousedown", (event) => event.preventDefault());
@@ -265,7 +265,7 @@ export function createFeature({ view = null, load = assetMarked } = {}) {
       input.type = "file";
       input.accept = ".md,.markdown,text/markdown,text/plain";
       input.hidden = true;
-      input.className = "page-markdown-input";
+      input.className = "blockeditor-markdown-input";
       const done = (file) => {
         input.remove();
         resolve(file);
@@ -280,7 +280,7 @@ export function createFeature({ view = null, load = assetMarked } = {}) {
   async function open(s, error = null) {
     s.error = error;
     const panel = doc.createElement("div");
-    panel.className = "page-menu page-import-preview";
+    panel.className = "blockeditor-menu blockeditor-import-preview";
     panel.setAttribute("role", "dialog");
     panel.setAttribute("aria-label", "Import Markdown");
     s.panel = panel;
@@ -295,8 +295,8 @@ export function createFeature({ view = null, load = assetMarked } = {}) {
     draw(s);
     const at = place();
     if (at) {
-      panel.style.setProperty("--page-pop-x", `${at.x}px`);
-      panel.style.setProperty("--page-pop-y", `${at.y}px`);
+      panel.style.setProperty("--blockeditor-pop-x", `${at.x}px`);
+      panel.style.setProperty("--blockeditor-pop-y", `${at.y}px`);
     }
     const insert = panel.querySelector('[data-import="insert"]');
     if (insert && !insert.disabled) insert.focus?.();