@panphora/clayjs 1.16.0 → 1.18.0

package/src/page/chrome.js

@@ -8,16 +8,15 @@ import { schema } from "./schema.js";
 import { BlockSelection, siblingSpan, moveBlock, indentBlocks, outdentBlocks } from "./blocks.js";
 import { outlineOf } from "./outline-cache.js";
 import { currentSpan, selectBlocks, duplicateBlocks, deleteBlocks, asStep, typeIntoBlocks } from "./blocksel.js";
-import { openAltEditor, setImageAttrs } from "./media.js";
 import { BlockDrag } from "./drag.js";
 import { openLinkEditor } from "./link.js";
-import { BLOCK_TYPES, MENU_ITEMS, blockTypeOf, turnInto, insertAfter, rankItems, runItem, retype, canTurnInto, insertItemsFor } from "./items.js";
+import { BLOCK_TYPES, MENU_ITEMS, blockTypeOf, turnBlocks, turnInto, insertAfter, rankItems, runItem, retype, canTurnInto, insertItemsFor, loadChartPart, runMenuCommand } from "./items.js";
 import toast from "../ui/toast-lazy.js";
-import { insertChartAfterTable } from "./chart.js";
 import { pickCsv } from "./csv-import.js";
 import { HISTORY_INTENT, typingIntent } from "./history-intent.js";
 import { composing } from "./markdown.js";
 import { announce } from "./announce.js";
+import { REMOTE } from "./model.js";
 
 export { BLOCK_TYPES, blockTypeOf, turnInto, insertAfter } from "./items.js";
 
@@ -74,20 +73,24 @@ function copyBlockLink(id) {
 }
 
 export const ACTION_ITEMS = [
-  { key: "up", label: "Move up", icon: "↑", hint: `${MOD}⇧↑`, run: (view) => moveBlock(-1)(view.state, view.dispatch) },
-  { key: "down", label: "Move down", icon: "↓", hint: `${MOD}⇧↓`, run: (view) => moveBlock(1)(view.state, view.dispatch) },
-  { key: "indent", label: "Indent", icon: "→", hint: "Tab", run: (view) => indentBlocks(view.state, view.dispatch) },
-  { key: "outdent", label: "Outdent", icon: "←", hint: "⇧Tab", run: (view) => outdentBlocks(view.state, view.dispatch) },
-  { key: "duplicate", label: "Duplicate", icon: "⧉", hint: `${MOD}D`, run: (view) => duplicateBlocks(view.state, view.dispatch) },
-  { key: "delete", label: "Delete", icon: "×", hint: "Del", run: (view) => deleteBlocks(view.state, view.dispatch) },
-  { key: "turn", label: "Turn into", icon: "↻", hint: "›", only: "text", run: (view, chrome) => chrome.openMenu("turn", chrome.plus) },
-  { key: "link", label: "Copy link", icon: "🔗", run: (view, chrome, index) => copyBlockLink(view.state.doc.child(index).attrs.id) },
-  { key: "alt", label: "Alt text…", icon: "Aa", only: "image", focus: false, run: (view, chrome, index) => openAltEditor(view, imageId(view, index)) },
-  { key: "small", label: "Small", icon: "▫", only: "image", run: (view, chrome, index) => setImageAttrs(view, imageId(view, index), { width: 240 }) },
-  { key: "medium", label: "Medium", icon: "◻", only: "image", run: (view, chrome, index) => setImageAttrs(view, imageId(view, index), { width: 480 }) },
-  { key: "full", label: "Full width", icon: "⬜", only: "image", run: (view, chrome, index) => setImageAttrs(view, imageId(view, index), { width: null }) },
-  { key: "chart", label: "Chart this table", icon: "📊", only: "table", run: (view, chrome, index) => insertChartAfterTable(view, blockStart(view.state.doc, index)) },
-  { key: "csv", label: "Import CSV…", icon: "⇧", only: "table", focus: false, run: (view, chrome, index) => pickCsv(view, null, view.state.doc.child(index).attrs.id) },
+  { key: "up", label: "Move up", icon: "up", hint: `${MOD}⇧↑`, run: (view) => moveBlock(-1)(view.state, view.dispatch) },
+  { key: "down", label: "Move down", icon: "down", hint: `${MOD}⇧↓`, run: (view) => moveBlock(1)(view.state, view.dispatch) },
+  { key: "indent", label: "Indent", icon: "indent", hint: "Tab", run: (view) => {
+    const before = view.state.doc;
+    indentBlocks(view.state, view.dispatch);
+    if (view.state.doc === before) { announce(view, "Indent works on list items and inside toggles."); toast("Indent works on list items and inside toggles."); }
+  } },
+  { key: "outdent", label: "Outdent", icon: "outdent", hint: "⇧Tab", run: (view) => outdentBlocks(view.state, view.dispatch) },
+  { key: "duplicate", label: "Duplicate", icon: "duplicate", hint: `${MOD}D`, run: (view) => duplicateBlocks(view.state, view.dispatch) },
+  { key: "delete", label: "Delete", icon: "trash", hint: "Del", run: (view) => deleteBlocks(view.state, view.dispatch) },
+  { key: "turn", label: "Turn into", icon: "turn", hint: "›", only: "text", run: (view, chrome) => chrome.openMenu("turn", chrome.plus) },
+  { key: "link", label: "Copy link", icon: "link", run: (view, chrome, index) => copyBlockLink(view.state.doc.child(index).attrs.id) },
+  { key: "alt", label: "Alt text…", icon: "alt", only: "image", focus: false, run: (view, chrome, index) => { const id = imageId(view, index); return import("./image-actions.js").then((part) => part.openAltEditor(view, id)); } },
+  { key: "small", label: "Small", icon: "small", only: "image", run: (view, chrome, index) => { const id = imageId(view, index); return import("./image-actions.js").then((part) => part.setImageAttrs(view, id, { width: 240 })); } },
+  { key: "medium", label: "Medium", icon: "medium", only: "image", run: (view, chrome, index) => { const id = imageId(view, index); return import("./image-actions.js").then((part) => part.setImageAttrs(view, id, { width: 480 })); } },
+  { key: "full", label: "Full width", icon: "full", only: "image", run: (view, chrome, index) => { const id = imageId(view, index); return import("./image-actions.js").then((part) => part.setImageAttrs(view, id, { width: null })); } },
+  { key: "chart", label: "Chart this table", icon: "chart", only: "table", run: (view, chrome, index) => { const at = blockStart(view.state.doc, index); return loadChartPart(view).then(({ insertChartAfterTable }) => insertChartAfterTable(view, at)); } },
+  { key: "csv", label: "Import CSV…", icon: "csv", only: "table", focus: false, run: (view, chrome, index) => pickCsv(view, null, view.state.doc.child(index).attrs.id) },
 ];
 
 const actionsFor = (st) => {
@@ -112,6 +115,21 @@ const ICONS = {
   ordered: svg('<path d="M7 4.5h6.5M7 8h6.5M7 11.5h6.5M2.5 3.5l1-.5v3M2.5 9.3c.2-.5.6-.8 1.1-.8.6 0 1 .4 1 .9 0 .9-2.1 1.4-2.1 2.6h2.1"/>'),
   check: svg('<rect x="2.5" y="2.5" width="11" height="11" rx="2.5"/><path d="M5.5 8.2l1.8 1.8 3.4-4"/>'),
   more: svg('<path stroke-width="2.2" d="M3 8h.01M8 8h.01M13 8h.01"/>'),
+  gear: svg('<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>'),
+  close: svg('<path d="M4 4l8 8M12 4l-8 8"/>'),
+  up: svg('<path d="M8 13V3.5M4 7.5 8 3.5l4 4"/>'),
+  down: svg('<path d="M8 3v9.5M4 8.5l4 4 4-4"/>'),
+  indent: svg('<path d="M2.5 3.5h11M7 8h6.5M2.5 12.5h11M2.5 6l2.5 2-2.5 2"/>'),
+  outdent: svg('<path d="M2.5 3.5h11M7 8h6.5M2.5 12.5h11M5 6 2.5 8 5 10"/>'),
+  duplicate: svg('<rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 3.5v-.5A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v5A1.5 1.5 0 0 0 4 9.5h.5"/>'),
+  trash: svg('<path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5"/>'),
+  turn: svg('<path d="M3 5.5h9.5M10 3l2.5 2.5L10 8M13 10.5H3.5M6 8l-2.5 2.5L6 13"/>'),
+  chart: svg('<path d="M3 13V3M3 13h10.5M6 10.5V8M9 10.5V5.5M12 10.5V7"/>'),
+  csv: svg('<path d="M4 1.5h5L12.5 5v9.5h-8.5zM9 1.5V5h3.5M8 7.5v5M6 10.5l2 2 2-2"/>'),
+  alt: svg('<path d="M2.5 12.5 5.5 4l3 8.5M3.6 9.5h3.8M10 12.5V7.5M10 8.5c.4-.7 1.1-1 2-1h.5"/>'),
+  small: svg('<rect x="5" y="5" width="6" height="6" rx="1"/>'),
+  medium: svg('<rect x="3.5" y="3.5" width="9" height="9" rx="1.2"/>'),
+  full: svg('<rect x="1.5" y="3.5" width="13" height="9" rx="1.2"/>'),
 };
 const TOOLS = [
   ["strong", "Bold"],
@@ -129,6 +147,7 @@ const PHONE_TOOLS = new Set(["strong", "em", "link"]);
 const MORE_ACTIONS = new Set(["up", "down", "indent", "outdent"]);
 const PHONE_BAR_WIDTH = 204, PHONE_BAR_HEIGHT = 52, PHONE_INSET = 8;
 const LIST_KINDS = new Set(["bullet", "ordered", "check"]);
+const SETTING_ROWS = [["assignees", "Checklist assignees"], ["dates", "Checklist due dates"]];
 const LINE_TYPES = new Set(["paragraph", "heading", "list_item"]);
 
 // The top-level blocks a toolbar command acts on. A nonempty selection's end is
@@ -217,6 +236,11 @@ function runList(view, kind) {
   if (tr.docChanged) view.dispatch(asStep(tr));
 }
 
+// The four formats this release adds are commands the format gate may refuse, and
+// a refusal is a notice rather than a change. The menu that offers them, and the
+// commands behind it, load the first time one is chosen (format-native-commands.js).
+const nativeMenu = (view, chrome, name) => import("./format-native-commands.js").then((menu) => menu.nativeMenu(view, name, chrome.pickedFrom ?? chrome.more));
+
 function runMark(view, name) {
   if (name === "link") return openLinkEditor(view);
   const st = view.state;
@@ -277,15 +301,28 @@ export const heldSlashRange = (st) => {
   return held ? { from: held.from, to: held.to } : null;
 };
 
-export function openPageMenu(view, anchor, items) {
+export function openPageMenu(view, anchor, items, { persist = false } = {}) {
   const chrome = chromeFor.get(view);
   if (!chrome) return false;
   chrome.openMenu("external", anchor);
   chrome.menu.externalItems = items;
+  chrome.menu.persist = persist;
   chrome.renderMenu();
   return true;
 }
 
+// A menu whose rows name their targets by id outlives a render of the control that
+// opened it: the control that takes the old one's place keeps the popup open.
+export function reanchorPageMenu(view, from, to) {
+  const chrome = chromeFor.get(view);
+  const menu = chrome?.menu;
+  if (!menu || menu.anchor !== from || !to || to === from) return false;
+  menu.anchor = to;
+  to.setAttribute("aria-expanded", "true");
+  view.dom.setAttribute("aria-controls", chrome.menuId);
+  return true;
+}
+
 class Chrome {
   constructor(view, onAiTool) {
     this.view = view;
@@ -301,18 +338,32 @@ class Chrome {
     this.destroyed = false;
     this.probe = null;
     this.roving = null;
+    this.remote = false;
 
     this.dock = el("div", "page-dock", { role: "toolbar", "aria-label": "Formatting" });
     this.turn = el("button", "page-tool page-tool-turn page-tool-desk", { type: "button", "aria-haspopup": "menu" });
     this.more = el("button", "page-tool page-tool-primary page-tool-more", { type: "button", "aria-label": "More", title: "More", "aria-haspopup": "menu" });
     this.more.innerHTML = ICONS.more;
+    this.settingsBtn = el("button", "page-tool page-tool-desk page-tool-settings", { type: "button", "aria-label": "Document settings", title: "Document settings", "aria-haspopup": "dialog", "aria-expanded": "false" });
+    this.settingsBtn.innerHTML = ICONS.gear;
+    this.settingsEl = null;
+    this.settingsOpen = false;
+    this.settingsAnchor = null;
+    this.settingSwitches = {};
     this.dock.append(this.turn, el("span", "page-tool-sep page-tool-desk"), ...TOOLS.map(([n, l]) => toolButton(n, l)), this.more);
+    // The loader publishes the page facade when its module arrives, which can be after
+    // this toolbar is built, so the gear asks for the settings each time it is drawn.
+    this.dock.insertBefore(this.settingsBtn, this.more);
+    this.settingsBtn.hidden = !this.settingsAPI;
     this.plus = el("button", "page-plus", { type: "button", "aria-label": "Add a block", title: "Add a block" });
     this.plus.innerHTML = ICONS.plus;
     this.grip = el("button", "page-grip", { type: "button", "aria-label": "Block actions", title: "Drag to move, click for actions", "aria-haspopup": "menu" });
     this.grip.innerHTML = ICONS.grip;
     this.bubble = el("div", "page-bubble", { role: "toolbar", "aria-label": "Selection", hidden: "" });
-    this.bubble.append(...TOOLS.map(([n, l]) => toolButton(n, l)));
+    this.bubbleTurn = el("button", "page-tool page-tool-turn", { type: "button", "aria-haspopup": "menu" });
+    this.bubbleMore = el("button", "page-tool page-tool-primary page-tool-more", { type: "button", "aria-label": "More", title: "More", "aria-haspopup": "menu" });
+    this.bubbleMore.innerHTML = ICONS.more;
+    this.bubble.append(this.bubbleTurn, el("span", "page-tool-sep"), ...TOOLS.map(([n, l]) => toolButton(n, l)), this.bubbleMore);
     this.menuId = `page-menu-${++menuCount}`;
     this.menuEl = el("div", "page-menu", { role: "menu", id: this.menuId, hidden: "" });
     this.scrim = el("div", "page-scrim", { hidden: "" });
@@ -329,13 +380,23 @@ class Chrome {
     }
     this.turn.addEventListener("click", () => this.toggleMenu("turn", this.turn));
     this.more.addEventListener("click", () => this.toggleMenu("more", this.more));
+    this.settingsBtn.addEventListener("click", () => this.toggleSettings());
+    this.bubbleTurn.addEventListener("click", () => this.toggleMenu("turn", this.bubbleTurn));
+    this.bubbleMore.addEventListener("click", () => this.toggleMenu("more", this.bubbleMore));
     this.dock.addEventListener("keydown", (e) => this.dockKey(e));
     this.plus.addEventListener("click", () => this.fromPlus());
     this.grip.addEventListener("click", (e) => {
       if (e.detail === 0) this.gripAction(this.gutterIndex());
     });
     this.drag = new BlockDrag(view, this.grip, { index: () => this.gutterIndex(), onClick: (i) => this.gripAction(i) });
-    this.scrim.addEventListener("click", () => this.closeMenu());
+    // A tap that opens a menu ends in a click over the scrim it just showed: only a press
+    // that began on the scrim closes it.
+    let scrimPressed = false;
+    this.scrim.addEventListener("pointerdown", () => { scrimPressed = true; });
+    this.scrim.addEventListener("click", () => {
+      if (scrimPressed) this.closeMenu();
+      scrimPressed = false;
+    });
     this.menuEl.addEventListener("click", (e) => {
       const row = e.target.closest(".page-menu-item");
       if (row) this.pick(Number(row.dataset.index));
@@ -356,13 +417,21 @@ class Chrome {
       this.setHover(null);
     };
     this.onLeave = () => { this.pendingHover = null; this.setHover(null); };
-    this.onResize = () => this.scheduleLayout();
+    this.onResize = () => { this.scheduleLayout(); this.placeSettings(); };
     this.onDocDown = (e) => {
+      if (this.settingsOpen && ![this.settingsEl, this.settingsAnchor].some((part) => part?.contains(e.target))) this.closeSettings();
       if (!this.menu) return;
-      if ([this.menuEl, this.plus, this.grip, this.turn].some((part) => part.contains(e.target))) return;
+      if ([this.menuEl, this.plus, this.grip, this.turn, this.bubbleTurn, this.bubbleMore].some((part) => part.contains(e.target))) return;
       this.closeMenu();
     };
+    this.onSettingsKey = (e) => {
+      if (e.key !== "Escape" || !this.settingsOpen) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.closeSettings(true);
+    };
     document.addEventListener("mousedown", this.onDocDown, true);
+    document.addEventListener("keydown", this.onSettingsKey, true);
     this.shell.addEventListener("mousemove", this.onMove);
     this.shell.addEventListener("mouseleave", this.onLeave);
     this.shell.addEventListener("keydown", this.onKey);
@@ -467,7 +536,7 @@ class Chrome {
     const m = this.menu;
     if (!m || m.slashAt !== null) return this.view.dom;
     const a = m.anchor;
-    return a && a !== this.view.dom && (a.tagName === "BUTTON" || a.hasAttribute("tabindex")) ? a : this.view.dom;
+    return a && a !== this.view.dom && a.isConnected && (a.tagName === "BUTTON" || a.hasAttribute("tabindex")) ? a : this.view.dom;
   }
 
   // A block action from the phone menu acts on the caret's block when nothing
@@ -522,13 +591,116 @@ class Chrome {
     this.openMenu("insert", this.plus, null, null, this.view.state.doc.child(i).attrs.id);
   }
 
+  // The gear's panel: built once, filled from the document's own settings, and
+  // placed under the control that opened it.
+  buildSettings() {
+    if (this.settingsEl) return this.settingsEl;
+    const panel = el("div", "page-settings", { role: "dialog", "aria-label": "Document settings", hidden: "" });
+    const head = el("div", "page-settings-head");
+    const title = el("span", "page-settings-title");
+    title.textContent = "Document settings";
+    const close = el("button", "page-settings-close", { type: "button", "aria-label": "Close settings" });
+    close.innerHTML = ICONS.close;
+    close.addEventListener("click", () => this.closeSettings(true));
+    head.append(title, close);
+    const rows = SETTING_ROWS.map(([key, label]) => {
+      const row = el("div", "page-settings-row");
+      const name = el("span", "page-settings-name", { id: `${this.menuId}-set-${key}` });
+      name.textContent = label;
+      const sw = el("button", "page-settings-switch", { type: "button", role: "switch", "aria-checked": "true", "aria-labelledby": name.id, "data-setting": key });
+      sw.append(el("span", "page-settings-knob"));
+      sw.addEventListener("click", () => this.flipSetting(key));
+      this.settingSwitches[key] = sw;
+      row.append(name, sw);
+      return row;
+    });
+    const note = el("div", "page-settings-note");
+    note.textContent = "Hidden values stay saved and come back when turned on.";
+    panel.append(head, ...rows, note);
+    this.settingsEl = panel;
+    this.shell.append(panel);
+    return panel;
+  }
+
+  flipSetting(key) {
+    const sw = this.settingSwitches[key];
+    const on = sw.getAttribute("aria-checked") !== "true";
+    sw.setAttribute("aria-checked", String(on));
+    Promise.resolve().then(() => this.settingsAPI.set(key, on)).catch(() => {
+      sw.setAttribute("aria-checked", String(!on));
+      toast("That setting could not be saved.", "error");
+    });
+  }
+
+  openSettings(anchor = this.settingsBtn) {
+    if (!this.settingsAPI) return;
+    if (this.menu) this.closeMenu();
+    const panel = this.buildSettings();
+    const now = this.settingsAPI.read();
+    for (const [key, sw] of Object.entries(this.settingSwitches)) sw.setAttribute("aria-checked", String(now[key] !== false));
+    this.settingsOpen = true;
+    this.settingsAnchor = anchor;
+    anchor.setAttribute("aria-expanded", "true");
+    panel.hidden = false;
+    this.placeSettings();
+    panel.querySelector(".page-settings-close")?.focus({ preventScroll: true });
+  }
+
+  closeSettings(restoreFocus = false) {
+    if (!this.settingsOpen) return;
+    const anchor = this.settingsAnchor;
+    this.settingsOpen = false;
+    this.settingsAnchor = null;
+    if (this.settingsEl) this.settingsEl.hidden = true;
+    anchor?.setAttribute("aria-expanded", "false");
+    if (restoreFocus && anchor?.isConnected) anchor.focus({ preventScroll: true });
+  }
+
+  toggleSettings() {
+    if (this.settingsOpen) this.closeSettings(true);
+    else this.openSettings(this.settingsBtn);
+  }
+
+  // The panel's right edge sits on its control's right edge, under it, and it
+  // flips above the control when there is no room below.
+  placeSettings() {
+    const panel = this.settingsEl;
+    if (!panel || panel.hidden || !this.settingsAnchor) return;
+    const r = this.settingsAnchor.getBoundingClientRect();
+    const width = panel.offsetWidth || 264;
+    const height = panel.offsetHeight || 0;
+    if (this.isPhone()) {
+      const v = phoneViewport(this.win);
+      const x = Math.max(v.left + PHONE_INSET, Math.min(r.right - width, v.left + v.width - PHONE_INSET - width));
+      let y = r.top - 6 - height;
+      if (y < v.top + PHONE_INSET) y = Math.min(r.bottom + 6, v.top + v.height - PHONE_INSET - height);
+      panel.style.setProperty("--page-pop-x", `${x}px`);
+      panel.style.setProperty("--page-pop-y", `${Math.max(v.top + PHONE_INSET, y)}px`);
+      return;
+    }
+    const shellBox = this.shell.getBoundingClientRect();
+    const x = Math.max(8, Math.min(r.right - shellBox.left - width, Math.max(8, shellBox.width - width - 8)));
+    let y = r.bottom - shellBox.top + 6;
+    if (y + height > this.win.innerHeight - 8 && r.top - shellBox.top - 6 - height >= 8) y = r.top - shellBox.top - 6 - height;
+    panel.style.setProperty("--page-pop-x", `${x}px`);
+    panel.style.setProperty("--page-pop-y", `${y}px`);
+  }
+
   toggleMenu(mode, anchor) {
     if (this.menu) this.closeMenu();
     else this.openMenu(mode, anchor);
   }
 
+  // A slash dismissed with Escape stays text: it is known by its block and the text
+  // before it, so typing after it does not bring the menu back.
+  slashKey(slashAt) {
+    const $at = this.view.state.doc.resolve(slashAt);
+    return `${$at.parent.attrs.id}\u0000${this.view.state.doc.textBetween($at.start(), slashAt - 1)}`;
+  }
+
   openMenu(mode, anchor, slashAt = null, ids = null, anchorId = null) {
-    this.menu = { mode, anchor, slashAt, anchorId, ids: ids ?? (mode === "insert" ? [] : this.selectionIds()), query: "", active: 0, items: [] };
+    this.closeSettings();
+    this.menu = { mode, anchor, slashAt, anchorId, ids: ids ?? (mode === "insert" ? [] : this.selectionIds()), query: "", active: 0, items: [], persist: false };
     anchor.setAttribute("aria-expanded", "true");
     if (slashAt !== null) {
       if (!this.priorAria) this.priorAria = POPUP_ATTRS.map((name) => [name, this.view.dom.getAttribute(name)]);
@@ -555,14 +727,23 @@ class Chrome {
   // Everything the phone toolbar folds away: the rest of the formatting, and the
   // block actions the desktop menu carries. The move commands are the same ones.
   moreItems() {
-    const tools = TOOLS.filter(([name]) => !PHONE_TOOLS.has(name))
-      .map(([name, label]) => ({ key: name, label, icon: ICONS[name], run: (view) => runMark(view, name) }));
+    const phone = this.isPhone();
+    const tools = phone ? TOOLS.filter(([name]) => !PHONE_TOOLS.has(name))
+      .map(([name, label]) => ({ key: name, label, icon: name, run: (view) => runMark(view, name) })) : [];
     const actions = ACTION_ITEMS.filter((a) => MORE_ACTIONS.has(a.key)).map((a) => ({ ...a, blocks: true }));
     return [
       ...tools,
-      { key: "turn", label: "Turn into", icon: "\u21bb", run: (view, chrome) => chrome.openMenu("turn", chrome.more) },
-      { key: "insert", label: "Insert", icon: "+", run: (view, chrome) => chrome.openMenu("insert", chrome.more, null, null, view.state.doc.child(chrome.blockIndex()).attrs.id) },
+      { key: "underline", label: "Underline", icon: "U", hint: `${MOD}u`, run: (view, chrome) => nativeMenu(view, chrome, "underline") },
+      { key: "text_color", label: "Text color", icon: "A", hint: "\u203a", run: (view, chrome) => nativeMenu(view, chrome, "text_color") },
+      { key: "highlight", label: "Highlight", icon: "\u25A0", hint: "\u203a", run: (view, chrome) => nativeMenu(view, chrome, "highlight") },
+      ...(phone ? [{ key: "turn", label: "Turn into", icon: "turn", run: (view, chrome) => chrome.openMenu("turn", chrome.more) }] : []),
+      { key: "insert", label: "Insert", icon: "+", run: (view, chrome) => chrome.openMenu("insert", chrome.pickedFrom ?? chrome.more, null, null, view.state.doc.child(chrome.blockIndex()).attrs.id) },
       ...actions,
+      ...(phone && this.settingsAPI ? [{ key: "settings", label: "Document settings", icon: "gear", focus: false, run: (view, chrome) => chrome.openSettings(chrome.more) }] : []),
+      { key: "titleIcon", label: "Page icon", icon: "\u263A", run: (view) => runMenuCommand(view, "titleIcon") },
+      { key: "titleCover", label: "Add cover", icon: "\u25A4", run: (view) => runMenuCommand(view, "titleCover") },
+      { key: "exportHtml", label: "Export reading copy", icon: "\u21E9", run: (view) => runMenuCommand(view, "exportHtml") },
+      { key: "exportMarkdown", label: "Export as Markdown", icon: "M\u21E9", run: (view) => runMenuCommand(view, "exportMarkdown") },
     ];
   }
 
@@ -619,7 +800,8 @@ class Chrome {
       const role = m.mode === "turn" ? "menuitemradio" : typeof checked === "boolean" ? "menuitemcheckbox" : slash ? "option" : "menuitem";
       const row = el("button", `page-menu-item${active ? " is-active" : ""}`, { type: "button", role, tabindex: !slash && active ? "0" : "-1", id: `${this.menuId}-${i}`, "data-index": String(i), ...(role === "menuitemradio" ? {} : { "aria-selected": active ? "true" : "false" }), ...(typeof checked === "boolean" ? { "aria-checked": String(checked) } : {}) });
       const icon = el("span", "page-menu-icon");
-      icon.textContent = b.icon || "";
+      if (ICONS[b.icon]) icon.innerHTML = ICONS[b.icon];
+      else icon.textContent = b.icon || "";
       const label = el("span", "page-menu-label");
       label.textContent = b.label;
       if (b.description) {
@@ -642,7 +824,7 @@ class Chrome {
     this.menuEl.hidden = false;
     this.scrim.hidden = false;
     this.scheduleLayout();
-    if (!slash) this.menuEl.querySelectorAll("button")[m.active]?.focus();
+    if (!slash) this.menuEl.querySelectorAll("button")[m.active]?.focus({ preventScroll: true });
   }
 
   pick(i) {
@@ -656,6 +838,8 @@ class Chrome {
     const wanted = m.mode === "insert" ? (m.anchorId ? [m.anchorId] : []) : m.ids;
     const stale = wanted.some((id) => !id || this.idIndex(id) < 0);
     const index = wanted.length ? this.idIndex(wanted[0]) : -1;
+    // A submenu a row opens (text color, highlight) anchors where this menu was opened.
+    this.pickedFrom = m.anchor;
     this.closeMenu();
     if (stale && m.mode !== "external") {
       announce(this.view, TARGET_GONE);
@@ -668,10 +852,7 @@ class Chrome {
         this.view.focus();
         return;
       }
-      const tr = st.tr;
-      for (const id of wanted) retype(tr, this.idIndex(id), item);
-      this.view.dispatch(asStep(tr).scrollIntoView());
-      this.view.focus();
+      turnBlocks(this.view, item, wanted);
     } else if (m.mode === "actions" || m.mode === "more" || m.mode === "external") {
       if (item.blocks) this.selectCaretBlock(wanted);
       item.run(this.view, this, index >= 0 ? index : this.blockIndex());
@@ -709,8 +890,13 @@ class Chrome {
       if (m.items.length) this.pick(m.active);
       return true;
     }
+    if (event.key === "Tab" && m.slashAt === null) {
+      this.closeMenu();
+      return false;
+    }
     if (event.key === "Escape") {
       const target = this.invoker();
+      if (m.slashAt !== null) this.dismissedSlash = this.slashKey(m.slashAt);
       this.closeMenu();
       if (target === this.view.dom) this.view.focus();
       else target?.focus?.();
@@ -818,6 +1004,8 @@ class Chrome {
         const r = m.anchor === this.plus ? (dom?.getBoundingClientRect?.() ?? edBox) : m.anchor.getBoundingClientRect();
         left = r.left;
         top = r.bottom + 6;
+        const height = this.menuEl.offsetHeight;
+        if (top + height > this.win.innerHeight - 8 && r.top - 6 - height >= 8) top = r.top - 6 - height;
       }
       out.menu = { x: Math.max(8, Math.min(left - shellBox.left, shellBox.width - 280)), y: top - shellBox.top };
     }
@@ -856,22 +1044,46 @@ class Chrome {
     }
   }
 
+  get settingsAPI() {
+    return globalThis.clay?.page?.settings ?? null;
+  }
+
   update(view, prev) {
+    const settingsHidden = !this.settingsAPI;
+    if (this.settingsBtn.hidden !== settingsHidden) this.settingsBtn.hidden = settingsHidden;
     this.view = view;
     if (this.menu && this.menu.slashAt === null && prev && prev.doc !== view.state.doc) {
-      const hadFocus = this.menuEl.contains(document.activeElement);
-      this.closeMenu();
-      if (hadFocus) view.focus();
+      // A menu whose rows resolve their targets by id, from a control the page keeps,
+      // is still the right menu after a peer's edit.
+      if (this.menu.persist && this.menu.anchor?.isConnected) this.scheduleLayout();
+      else {
+        const hadFocus = this.menuEl.contains(document.activeElement);
+        this.closeMenu();
+        if (hadFocus) view.focus();
+      }
     }
     const st = view.state;
     const node = st.doc.child(this.blockIndex());
     this.turn.textContent = `${blockTypeOf(node).label} ▾`;
+    this.bubbleTurn.textContent = this.turn.textContent;
     for (const b of this.dock.querySelectorAll("[data-cmd]")) b.setAttribute("aria-pressed", String(toolActive(st, b.dataset.cmd)));
-    const showBubble = !st.selection.empty && st.selection instanceof TextSelection && view.hasFocus();
+    const bubbleMenu = !!this.menu && [this.bubbleTurn, this.bubbleMore].includes(this.menu.anchor);
+    const showBubble = bubbleMenu || (!st.selection.empty && st.selection instanceof TextSelection && view.hasFocus());
     this.bubble.hidden = !showBubble;
     if (showBubble) for (const b of this.bubble.querySelectorAll("[data-cmd]")) b.setAttribute("aria-pressed", String(toolActive(st, b.dataset.cmd)));
     this.grip.classList.toggle("is-on", st.selection instanceof BlockSelection);
     if (!this.inRoving(this.roving)) this.setRoving(this.dockControls()[0]);
+    // A slash word typed before the caret left the block reopens when its own word is
+    // edited again, not when the caret merely returns to it.
+    if (!this.menu && prev && prev.doc !== st.doc && !this.remote && view.hasFocus() && st.selection.empty) {
+      const $head = st.selection.$head;
+      if ($head.depth === 1 && $head.parent.isTextblock && !$head.parent.type.spec.code) {
+        const before = st.doc.textBetween($head.start(), $head.pos);
+        const match = /(?:^|\s)\/([a-z]*)$/i.exec(before);
+        const slashAt = match ? $head.start() + match.index + match[0].indexOf("/") + 1 : null;
+        if (match && this.slashKey(slashAt) !== this.dismissedSlash) this.openMenu("insert", this.plus, slashAt, null, $head.parent.attrs.id);
+      }
+    }
     this.slashQuery();
     this.scheduleLayout();
   }
@@ -890,7 +1102,8 @@ class Chrome {
     this.win.visualViewport?.removeEventListener("resize", this.onResize);
     this.win.visualViewport?.removeEventListener("scroll", this.onResize);
     document.removeEventListener("mousedown", this.onDocDown, true);
-    for (const part of [this.dock, this.plus, this.grip, this.bubble, this.scrim, this.menuEl, this.probe]) part?.remove();
+    document.removeEventListener("keydown", this.onSettingsKey, true);
+    for (const part of [this.dock, this.plus, this.grip, this.bubble, this.scrim, this.menuEl, this.settingsEl, this.probe]) part?.remove();
   }
 }
 
@@ -903,6 +1116,10 @@ export function chromePlugin({ onAiTool = null } = {}) {
       chromeFor.set(view, chrome);
       return chrome;
     },
+    filterTransaction(tr) {
+      if (chrome && tr.docChanged) chrome.remote = !!tr.getMeta(REMOTE);
+      return true;
+    },
     props: {
       handleKeyDown(view, event) {
         if (!chrome) return false;
@@ -928,7 +1145,7 @@ export function chromePlugin({ onAiTool = null } = {}) {
       handleDOMEvents: {
         keydown(view, event) { return composing(event, view); },
         blur(view) {
-          if (chrome) chrome.bubble.hidden = true;
+          if (chrome && !(chrome.menu && [chrome.bubbleTurn, chrome.bubbleMore].includes(chrome.menu.anchor))) chrome.bubble.hidden = true;
           return false;
         },
       },

package/src/page/clipboard-shape.js

@@ -0,0 +1,126 @@
+// Lists and tables on the clipboard in the saved article's shape, so another app
+// gets real lists and a header row and a Document reads them back as the same
+// blocks. A copy nests list items as <ul>/<ol> by indent, leads a check item with
+// its checkbox and names a table's columns in a <thead>; a toggle's own list items
+// keep the editor's flat form, which carries their toggle. On paste,
+// flattenPastedHTML turns the lists back into items and moves the slice's open
+// depths (data-pm-slice, left on the dropped <ul>) to the first block, and the
+// table rule in blocks.js reads a table through table() and rows() below; a
+// Document's own table skips pasteTable's grid path for it. The text flavor is
+// markdown list lines (parseListText reads them) and tab-separated table rows.
+// blocks.js loads this module when an editor mounts, off the input-ready path.
+import { model } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { keysBetween, newId, orderedIds } from "./model.js";
+import { clipboardParser } from "./blocks.js";
+
+const N = schema.nodes;
+const parentOf = (n) => n.attrs.parent ?? null;
+
+const copiedCols = (table) => {
+  const used = new Set();
+  table.forEach((row) => row.forEach((cell) => used.add(cell.attrs.col)));
+  return orderedIds(table.attrs.cols).filter((id) => used.has(id));
+};
+
+function tableHead(table, dom) {
+  const doc = dom.ownerDocument;
+  const tr = doc.createElement("thead").appendChild(doc.createElement("tr"));
+  for (const id of copiedCols(table)) {
+    const col = table.attrs.cols[id], th = tr.appendChild(doc.createElement("th"));
+    th.setAttribute("data-col", id);
+    th.setAttribute("scope", "col");
+    if (col.kind) th.setAttribute("data-kind", col.kind);
+    if (col.width) { th.setAttribute("data-width", String(col.width)); th.style.width = `${col.width}px`; }
+    th.textContent = col.name ?? "";
+  }
+  dom.prepend(tr.parentNode);
+  if (table.attrs.sort) dom.setAttribute("data-sort", JSON.stringify(table.attrs.sort));
+}
+
+// The serializer's top-level elements, one per block of the fragment, rewritten in place.
+export function copy(fragment, doms) {
+  let lists = [];
+  fragment.forEach((n, _, i) => {
+    const dom = doms[i];
+    if (!dom || dom.nodeType !== 1) return;
+    if (n.type === N.table) tableHead(n, dom);
+    if (n.type !== N.list_item || parentOf(n) !== null) { lists = []; return; }
+    const doc = dom.ownerDocument, { indent, kind } = n.attrs, tag = kind === "ordered" ? "OL" : "UL";
+    while (lists.length && lists.at(-1).indent > indent) lists.pop();
+    if (lists.at(-1)?.indent === indent && lists.at(-1).list.tagName !== tag) lists.pop();
+    if (!lists.length || lists.at(-1).indent < indent) {
+      const list = doc.createElement(tag);
+      if (lists.length) lists.at(-1).li.append(list); else dom.before(list);
+      lists.push({ indent, list, li: null });
+    }
+    const li = doc.createElement("li");
+    if (kind === "check") li.innerHTML = `<input type="checkbox" disabled${n.attrs.checked ? " checked" : ""}>`;
+    li.append(...dom.childNodes);
+    lists.at(-1).list.append(li);
+    lists.at(-1).li = li;
+    dom.remove();
+  });
+}
+
+const quoteCell = (text) => (/[\t\n\r"]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+
+export function text(slice) {
+  if (!slice.content.firstChild?.type.spec.group?.includes("block")) return null;
+  let out = "", runs = [], prevList = false;
+  slice.content.forEach((n, _, i) => {
+    const list = n.type === N.list_item;
+    let line = n.textBetween(0, n.content.size, "\n\n");
+    if (list) {
+      const { indent, kind } = n.attrs;
+      while (runs.length && runs.at(-1).indent > indent) runs.pop();
+      if (runs.at(-1)?.indent === indent && runs.at(-1).kind !== kind) runs.pop();
+      if (!runs.length || runs.at(-1).indent < indent) runs.push({ indent, kind, n: 0 });
+      const run = runs.at(-1);
+      const marker = kind === "ordered" ? `${++run.n}.` : kind === "check" ? `- [${n.attrs.checked ? "x" : " "}]` : "-";
+      line = `${"    ".repeat(runs.length - 1)}${marker} ${line}`;
+    } else runs = [];
+    if (n.type === N.table) {
+      const rows = [copiedCols(n).map((id) => quoteCell(n.attrs.cols[id].name ?? ""))];
+      n.forEach((row) => { const cells = []; row.forEach((cell) => cells.push(quoteCell(cell.textContent))); rows.push(cells); });
+      line = rows.map((row) => row.join("\t")).join("\n");
+    }
+    out += (i ? (prevList && list ? "\n" : "\n\n") : "") + line;
+    prevList = list;
+  });
+  return out;
+}
+
+// A pasted table: its header row (a <thead> row, or a first row of <th>) names
+// the columns, and a copied one keeps each column's id, kind and width; every
+// other row is a row of cells. Rows get their ids and order keys from identityPlugin.
+const tables = new WeakMap();
+function pastedTable(dom) {
+  if (tables.has(dom)) return tables.get(dom);
+  const cellsOf = (tr) => [...tr.children].filter((c) => c.tagName === "TD" || c.tagName === "TH");
+  const trs = [...dom.querySelectorAll("tr")].filter((tr) => tr.closest("table") === dom);
+  const head = trs.find((tr) => tr.parentElement.tagName === "THEAD") ?? (trs.length > 1 && cellsOf(trs[0]).every((c) => c.tagName === "TH") ? trs[0] : null);
+  const body = trs.filter((tr) => tr !== head);
+  const names = head ? cellsOf(head) : [];
+  const width = Math.max(1, names.length, ...body.map((tr) => cellsOf(tr).length));
+  const keys = keysBetween(null, null, width);
+  const ids = [], cols = {};
+  for (let i = 0; i < width; i++) {
+    const th = names[i];
+    let id = th?.getAttribute("data-col");
+    if (!id || Object.hasOwn(cols, id)) id = newId("c");
+    const kind = th?.getAttribute("data-kind"), w = Math.round(Number(th?.getAttribute("data-width")));
+    cols[id] = { pos: keys[i], name: th?.textContent.replace(/\s+/g, " ").trim() || `Column ${i + 1}`, ...(kind ? { kind } : {}), ...(w > 0 ? { width: w } : {}) };
+    ids.push(id);
+  }
+  const cell = (td, col) => (td ? clipboardParser.parse(td, { topNode: N.table_cell.create({ col }) }) : N.table_cell.create({ col }));
+  const rows = (body.length ? body : [null]).map((tr) => N.table_row.create(null, ids.map((col, i) => cell(tr && cellsOf(tr)[i], col))));
+  let sort = null;
+  try { sort = JSON.parse(dom.getAttribute("data-sort")); } catch {}
+  const found = { cols, sort: sort && ids.includes(sort.col) && (sort.dir === "asc" || sort.dir === "desc") ? { col: sort.col, dir: sort.dir } : null, rows: model.Fragment.from(rows) };
+  tables.set(dom, found);
+  return found;
+}
+
+export const table = (dom) => ({ cols: pastedTable(dom).cols, sort: pastedTable(dom).sort, parent: dom.getAttribute("data-page-parent") || null });
+export const rows = (dom) => pastedTable(dom).rows;