@panphora/clayjs 1.15.2 → 1.17.0

package/src/page/editor.js

@@ -6,30 +6,30 @@
 // `page` cascade layer, so a theme is one plain stylesheet that sets tokens on
 // .page-shell (and adds scoped rules where it needs to); unlayered theme rules
 // always win. Contract: plans/.../default-page/v1/look/THEME-CONTRACT.md
-import { state, view as pmView, keymap, commands, history, gapcursor, inputrules } from "../vendor/prosemirror.vendor.js";
+import { state, view as pmView, model, keymap, commands, history, gapcursor, inputrules } from "../vendor/prosemirror.vendor.js";
 import { schema } from "./schema.js";
 import { identityPlugin, docFromBlocks, blockMap, keyBetween, newId } from "./model.js";
 import { blockKeys, structurePlugin, collapsePlugin, pastePlugin, BlockSelection, STEP } from "./blocks.js";
-import { chromePlugin } from "./chrome.js";
-import { announcementPlugin } from "./announce.js";
+import { chromePlugin, slashRangePlugin } from "./chrome.js";
+import { announcementPlugin, announce } from "./announce.js";
 import { linkPlugin } from "./link.js";
-import { blockSelectionPlugin } from "./blocksel.js";
-import { markdownPlugin, markdownKeys, backspaceToParagraph } from "./markdown.js";
+import { blockSelectionPlugin, asStep } from "./blocksel.js";
+import { markdownPlugin, markdownKeys, backspaceToParagraph, composing } from "./markdown.js";
+import { markable } from "./format-native.js";
 import { placeholderPlugin } from "./placeholder.js";
-import { mediaPlugin, ImageView, FileView } from "./media.js";
-import { highlightPlugin, CodeBlockView } from "./highlight.js";
-import { tableKeys, tablePlugin, TableView, TableCellView } from "./table.js";
+import { titlePlugin } from "./document-title-runtime.js";
+import { mediaPlugin } from "./media.js";
+import { highlightSlot } from "./highlight-slot.js";
+import { tableKeys, tablePlugin } from "./table.js";
 import { tableSelectPlugin } from "./table-select.js";
-import { chartPlugin, ChartView } from "./chart.js";
-import { BoardView } from "./board-view.js";
-import { boardPlugin, cardPanel } from "./board-panel.js";
-import { ToolView } from "./tool-view.js";
-import { createToolHost } from "./tools.js";
+import { viewFeatures, viewHookPlugin } from "./view-hooks.js";
 import { checklistPlugin, checklistKeys } from "./checklist.js";
 import { csvImportPlugin } from "./csv-import.js";
-import { TABLE_CSS } from "./table-style.js";
-import { BOARD_CSS } from "./board-style.js";
 import { styleWithLegacyId } from "../lib/style.js";
+import { historyIntentPlugin } from "./history-intent.js";
+import { createFeatureLoader } from "./feature-loader.js";
+import { COMMAND_FEATURES, FEATURES, featureForType } from "./features/registry.js";
+import { toolViews } from "./tool-views.js";
 
 const STYLE_ID = "page-editor-style";
 const INDENTS = [1, 2, 3, 4, 5, 6, 7, 8];
@@ -39,6 +39,11 @@ const LIGHT = `
   --page-rule: rgba(35, 34, 31, 0.10); --page-accent: #2F5E9E; --page-link: #164583; --page-selection: rgba(88, 120, 170, 0.20);
   --page-check-border: rgba(35, 34, 31, 0.35); --page-check-fill: #23221F; --page-check-ink: #F7F6F2;
   --page-callout-bg: rgba(35, 34, 31, 0.04); --page-code-bg: rgba(35, 34, 31, 0.05);
+  --page-color-gray: #5B5953; --page-color-brown: #8A5A1E; --page-color-orange: #B4531A; --page-color-yellow: #7A6210; --page-color-green: #3E6A28;
+  --page-color-blue: #1F5A8A; --page-color-purple: #5E4596; --page-color-pink: #A23E6E; --page-color-red: #9E3B2F;
+  --page-mark-bg-gray: rgba(35, 34, 31, 0.12); --page-mark-bg-brown: rgba(138, 90, 30, 0.20); --page-mark-bg-orange: rgba(180, 83, 26, 0.20);
+  --page-mark-bg-yellow: rgba(122, 98, 16, 0.22); --page-mark-bg-green: rgba(62, 106, 40, 0.20); --page-mark-bg-blue: rgba(31, 90, 138, 0.18);
+  --page-mark-bg-purple: rgba(94, 69, 150, 0.18); --page-mark-bg-pink: rgba(162, 62, 110, 0.18); --page-mark-bg-red: rgba(158, 59, 47, 0.18);
   --page-code-token-keyword: #8A3B6E; --page-code-token-constant: #1F5A8A; --page-code-token-string: #3E6A28; --page-code-token-string-expression: #3E6A28; --page-code-token-comment: #8B877E; --page-code-token-function: #5E4596; --page-code-token-parameter: #8A5A1E; --page-code-token-punctuation: var(--page-ink-soft); --page-code-token-link: var(--page-link);
   --page-chrome-ink-rest: rgba(35, 34, 31, 0.20); --page-chrome-ink-moved: rgba(35, 34, 31, 0.34);
   --page-chrome-bg-rest: rgba(35, 34, 31, 0.02); --page-chrome-bg-moved: rgba(35, 34, 31, 0.04);
@@ -53,6 +58,11 @@ const DARK = `
   --page-rule: rgba(231, 228, 220, 0.10); --page-accent: #8DB0E6; --page-link: #8DB0E6; --page-selection: rgba(120, 155, 210, 0.28);
   --page-check-border: rgba(231, 228, 220, 0.35); --page-check-fill: #E7E4DC; --page-check-ink: #1A1A18;
   --page-callout-bg: rgba(231, 228, 220, 0.05); --page-code-bg: rgba(231, 228, 220, 0.06);
+  --page-color-gray: #A3A098; --page-color-brown: #E0B47A; --page-color-orange: #E8A177; --page-color-yellow: #DEC97A; --page-color-green: #A9C98B;
+  --page-color-blue: #8DB0E6; --page-color-purple: #BBA6E6; --page-color-pink: #E3A3C4; --page-color-red: #E08A7A;
+  --page-mark-bg-gray: rgba(231, 228, 220, 0.14); --page-mark-bg-brown: rgba(224, 180, 122, 0.22); --page-mark-bg-orange: rgba(232, 161, 119, 0.22);
+  --page-mark-bg-yellow: rgba(222, 201, 122, 0.24); --page-mark-bg-green: rgba(169, 201, 139, 0.22); --page-mark-bg-blue: rgba(141, 176, 230, 0.22);
+  --page-mark-bg-purple: rgba(187, 166, 230, 0.22); --page-mark-bg-pink: rgba(227, 163, 196, 0.22); --page-mark-bg-red: rgba(224, 138, 122, 0.22);
   --page-code-token-keyword: #D9A0C8; --page-code-token-constant: #8DB0E6; --page-code-token-string: #A9C98B; --page-code-token-string-expression: #A9C98B; --page-code-token-comment: #75726B; --page-code-token-function: #BBA6E6; --page-code-token-parameter: #E0B47A; --page-code-token-punctuation: var(--page-ink-soft); --page-code-token-link: var(--page-link);
   --page-chrome-ink-rest: rgba(231, 228, 220, 0.18); --page-chrome-ink-moved: rgba(231, 228, 220, 0.30);
   --page-chrome-bg-rest: rgba(231, 228, 220, 0.02); --page-chrome-bg-moved: rgba(231, 228, 220, 0.04);
@@ -100,6 +110,9 @@ export const PAGE_EDITOR_CSS = `
 .page-editor pre:hover .page-code-lang, .page-editor pre:focus-within .page-code-lang, .page-code-lang:focus-visible, .page-editor pre[data-lang] .page-code-lang { opacity: 1; }
 .page-code-lang:hover, .page-code-lang:focus-visible { background: var(--page-pop-hover); color: var(--page-ink-soft); }
 :where(article[data-page], .page-editor) .page-callout { background: var(--page-callout-bg); border: 1px solid var(--page-callout-line); border-radius: 8px; padding: 10px 14px; }
+/* The four floor-1 formats. A quote is set apart by its own inset and ink, with
+   no left-border accent; the palette's keys are fixed tokens, in both themes. */
+:where(article[data-page], .page-editor) blockquote { padding-inline-start: var(--page-indent); color: var(--page-ink-soft); }
 :where(article[data-page], .page-editor) hr { border: 0; border-top: 1px solid var(--page-rule); margin-block: 1.2em; }
 :where(article[data-page], .page-editor) .page-hidden { display: none; }
 :where(article[data-page], .page-editor) .page-li { position: relative; --li-indent: 0; padding-inline-start: calc((var(--li-indent) + 1) * var(--page-indent)); }
@@ -126,7 +139,10 @@ ${INDENTS.map((n) => `:where(article[data-page], .page-editor) .page-li[data-ind
 .page-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 5px; background: none; color: inherit; font: 500 13px/1 var(--page-font); cursor: pointer; }
 .page-tool:hover, .page-tool[aria-pressed="true"] { background: var(--page-pop-hover); }
 .page-tool-turn { gap: 4px; padding: 0 8px; }
+/* The phone's fourth control: everything the narrow bar folds away. */
+.page-tool-more { display: none; }
 .page-tool-sep { width: 1px; height: 16px; margin: 0 3px; background: currentColor; opacity: 0.5; }
+.page-safe-probe { position: fixed; left: 0; bottom: 0; width: 0; height: 0; padding-bottom: env(safe-area-inset-bottom); visibility: hidden; pointer-events: none; }
 .page-plus { position: absolute; z-index: 2; top: calc(var(--page-plus-top, 0px) - var(--page-plus-size) / 2); left: calc(var(--page-plus-left, 0px) - var(--page-plus-size) - 12px); width: var(--page-plus-size); height: var(--page-plus-size); display: grid; place-items: center; padding: 0; cursor: pointer; }
 .page-plus[aria-expanded="true"] { color: var(--page-chrome-ink-moved); background: var(--page-chrome-bg-moved); }
 .page-grip { position: absolute; z-index: 2; top: calc(var(--page-plus-top, 0px) - var(--page-grip-size, var(--page-plus-size)) / 2); left: calc(var(--page-plus-left, 0px) - var(--page-plus-size) - 12px - var(--page-grip-size, var(--page-plus-size)) - 2px); width: var(--page-grip-size, var(--page-plus-size)); height: var(--page-grip-size, var(--page-plus-size)); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--page-chrome-radius); background: none; color: var(--page-chrome-ink-moved); opacity: 0; cursor: grab; touch-action: none; transition: opacity var(--page-fade); }
@@ -157,40 +173,8 @@ ${INDENTS.map((n) => `:where(article[data-page], .page-editor) .page-li[data-ind
 .page-link-btn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
 .page-link-btn:hover { background: var(--page-pop-hover); }
 .page-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-.page-editor .page-image { margin-inline: 0; }
-.page-image-frame { position: relative; margin: 0 auto; max-width: 100%; }
-.page-image-frame img { display: block; width: 100%; height: auto; border-radius: var(--page-image-radius, 6px); }
-.page-image[data-broken] .page-image-frame { min-height: 80px; background: var(--page-code-bg); border-radius: var(--page-image-radius, 6px); }
-.page-image-handle { position: absolute; top: 50%; inset-inline-end: 6px; width: 6px; height: 36px; margin-top: -18px; border-radius: 3px; background: var(--page-chrome-ink-moved); opacity: 0; cursor: ew-resize; touch-action: none; transition: opacity var(--page-fade); }
-.page-image:hover .page-image-handle, .page-image.is-selected .page-image-handle { opacity: 1; }
-.page-editor .page-image.page-block-selected { background: none; box-shadow: none; }
-.page-editor .page-image.page-block-selected .page-image-frame { box-shadow: 0 0 0 6px var(--page-block-selected, rgba(88, 120, 170, 0.12)); border-radius: var(--page-image-radius, 6px); }
-.page-image[data-align="left"] .page-image-frame { margin-left: 0; margin-right: auto; }
-.page-image[data-align="right"] .page-image-frame { margin-left: auto; margin-right: 0; }
-.page-image[data-align="left"] .page-image-caption { text-align: left; }
-.page-image[data-align="right"] .page-image-caption { text-align: right; }
-.page-image-align { position: absolute; top: 8px; inset-inline-end: 8px; display: none; gap: 1px; padding: 2px; background: var(--page-pop-bg); color: var(--page-pop-ink); border: 1px solid var(--page-pop-line); box-shadow: var(--page-pop-shadow); border-radius: 7px; }
-.page-image.is-selected .page-image-align, .page-image.page-block-selected .page-image-align { display: flex; }
-.page-image-align button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; }
-.page-image-align button:hover, .page-image-align button[aria-pressed="true"] { background: var(--page-pop-hover); }
-.page-image.is-selected .page-image-frame img { outline: 2px solid var(--page-selection); outline-offset: 2px; }
-.page-image-caption { margin-top: 6px; color: var(--page-ink-soft); font-size: 0.88em; text-align: center; outline: none; }
-.page-image-caption[data-empty]::before { content: attr(data-placeholder); color: var(--page-ink-faint); }
 .ProseMirror-focused .page-placeholder::before { content: attr(data-placeholder); float: left; height: 0; color: var(--page-ink-faint); pointer-events: none; }
-.page-image:not(.is-selected) .page-image-caption[data-empty]:not(:focus) { display: none; }
-.page-file-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--page-rule); border-radius: 8px; color: var(--page-ink); text-decoration: none; }
-.page-file-icon { color: var(--page-link, var(--page-accent)); }
-.page-file-name { color: var(--page-link, var(--page-accent)); min-width: 0; overflow-wrap: anywhere; }
-.page-file-meta { margin-inline-start: auto; color: var(--page-ink-faint); font-size: 0.88em; }
-.page-upload { display: flex; align-items: center; gap: 10px; margin: var(--page-block-gap) 0; padding: 8px 12px; border: 1px dashed var(--page-rule); border-radius: 8px; color: var(--page-ink-soft); font-size: 0.88em; }
-.page-upload-preview { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; opacity: 0.6; }
-.page-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.page-upload-bar { flex: 1; height: 2px; border-radius: 1px; background: var(--page-rule); overflow: hidden; }
-.page-upload-bar > span { display: block; height: 100%; background: var(--page-progress, var(--page-ink-soft)); transition: width 200ms; }
-.page-upload[data-state="error"] .page-upload-msg, .page-upload[data-state="embed-choice"] .page-upload-msg { flex: 1; }
-.page-upload[data-state="error"] .page-upload-msg { color: var(--page-danger, #9E3B2F); }
-.page-upload-btn { border: 0; padding: 4px 8px; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
-.page-upload-btn:hover { background: var(--page-pop-hover); }
+.page-editor .page-title-placeholder::before { content: attr(data-placeholder); float: left; height: 0; color: var(--page-ink-faint); pointer-events: none; }
 .page-csv-error { margin: 8px 0; color: var(--page-danger); font-size: 14px; }
 .page-editor .page-table { max-width: 100%; min-width: 0; border: 1px solid var(--page-rule); border-radius: 8px; }
 .page-editor .page-chart { position: relative; max-width: 100%; min-width: 0; margin-inline: 0; color: var(--page-ink); }
@@ -198,14 +182,6 @@ ${INDENTS.map((n) => `:where(article[data-page], .page-editor) .page-li[data-ind
 .page-chart figcaption { color: var(--page-ink-soft); font-size: 0.88em; text-align: center; }
 .page-chart-settings { display: block; margin: 8px auto 0; padding: 4px 10px; border: 1px solid var(--page-rule); border-radius: 6px; background: var(--page-pop-bg); color: var(--page-ink); font: inherit; cursor: pointer; }
 .page-chart-title-input { display: block; width: min(100%, 24em); box-sizing: border-box; margin: 6px auto; padding: 4px 8px; border: 1px solid var(--page-rule); border-radius: 6px; background: var(--page-pop-bg); color: var(--page-ink); font: inherit; }
-.page-tool-block { position: relative; min-height: 48px; border: 1px solid var(--page-rule); border-radius: 8px; padding: 12px; }
-.page-tool-settings { position: absolute; top: 4px; inset-inline-end: 4px; border: 0; border-radius: 5px; background: var(--page-pop-bg); color: var(--page-ink-soft); font: 12px var(--page-font); padding: 5px 8px; cursor: pointer; opacity: 0; }
-.page-tool-block:hover .page-tool-settings, .page-tool-block:focus-within .page-tool-settings { opacity: 1; }
-.page-ai-panel { position: relative; z-index: 5; width: min(520px, 100%); box-sizing: border-box; margin: 12px auto; padding: 14px; border: 1px solid var(--page-pop-line); border-radius: 10px; background: var(--page-pop-bg); color: var(--page-pop-ink); box-shadow: var(--page-pop-shadow); }
-.page-ai-panel textarea { width: 100%; min-height: 88px; box-sizing: border-box; padding: 8px; border: 1px solid var(--page-pop-line); border-radius: 6px; background: var(--page-pop-bg); color: inherit; font: inherit; resize: vertical; }
-.page-ai-actions { display: flex; gap: 8px; margin-top: 8px; }
-.page-ai-actions button { border: 1px solid var(--page-pop-line); border-radius: 6px; background: var(--page-pop-bg); color: inherit; font: inherit; padding: 5px 10px; cursor: pointer; }
-.page-ai-status, [data-tool-note], [data-tool-error] { color: var(--page-danger); font-size: 0.85em; }
 .page-table-scroll { max-width: 100%; overflow-x: auto; }
 .page-table table { border-collapse: collapse; min-width: max-content; width: 100%; table-layout: auto; }
 .page-table th, .page-table td { min-width: 120px; padding: 6px 10px; border-inline-end: 1px solid var(--page-rule); border-block-end: 1px solid var(--page-rule); text-align: start; white-space: pre-wrap; }
@@ -223,18 +199,31 @@ ${INDENTS.map((n) => `:where(article[data-page], .page-editor) .page-li[data-ind
 .page-check-popup { display: inline-flex; gap: 4px; padding: 4px; background: var(--page-pop-bg); color: var(--page-pop-ink); border: 1px solid var(--page-pop-line); border-radius: var(--page-pop-radius); box-shadow: var(--page-pop-shadow); }
 .page-check-popup input { font: inherit; color: inherit; background: var(--page-pop-bg); border: 1px solid var(--page-pop-line); }
 .page-check-popup.page-check-owner { display: inline-block; width: min(280px, 80vw); padding: 8px 0; vertical-align: top; }
+.page-board-owners { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-inline: 8px; }
+.page-board-people { display: flex; flex-wrap: wrap; gap: 4px; }
+.page-board-person { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border: 1px solid var(--page-rule); border-radius: 14px; background: var(--page-pop-bg); color: var(--page-pop-ink); font: inherit; font-size: 13px; cursor: pointer; transition: background-color var(--page-fade), border-color var(--page-fade); }
+.page-board-person.is-none { padding-inline-start: 10px; color: var(--page-pop-muted); }
+.page-board-person:hover { background: var(--page-pop-hover); }
+.page-board-person[aria-pressed="true"] { border-color: var(--page-accent); background: var(--page-selection); color: var(--page-pop-ink); }
+.page-board-owner-input { width: 100%; height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--page-pop-line); border-radius: 7px; background: var(--page-pop-bg); color: var(--page-pop-ink); font: inherit; font-size: 14px; }
+.page-board-owner-input::placeholder { color: var(--page-ink-faint); }
+.page-board-face { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--page-code-bg); box-shadow: inset 0 0 0 1px var(--page-rule); color: var(--page-ink-soft); font-size: 10.5px; font-weight: 600; line-height: 1; }
 .page-scrim { display: none; }
 .page-shell [hidden] { display: none !important; }
-${TABLE_CSS}
-${BOARD_CSS}
 @media (max-width: 560px) {
-  .page-dock { display: none; }
+  /* One fixed bar over the visual viewport, with the four controls a phone keeps.
+     The bubble and the desktop-only tools stand down so nothing is doubled. */
+  .page-dock { display: flex; position: fixed; left: 0; top: 8px; width: 204px; min-width: 204px; box-sizing: border-box; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 8px; z-index: 3; }
+  .page-tool-desk { display: none; }
+  .page-dock .page-tool-more { display: inline-flex; }
+  .page-dock .page-tool { min-width: 44px; height: 44px; }
+  .page-shell:has(.page-bubble:not([hidden])) .page-dock { visibility: visible; }
+  .page-dock + .page-editor { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
   .page-plus { position: fixed; top: auto; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 22px; }
-  .page-grip { position: fixed; top: auto; left: 68px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 22px; opacity: 1; color: var(--page-chrome-ink-rest); background: var(--page-chrome-bg-rest); border: 1px solid var(--page-chrome-line-rest); }
-  .page-bubble { position: fixed; left: 0; right: 0; top: auto; bottom: 0; transform: none; justify-content: center; gap: 4px; padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); border-radius: 0; border-width: 1px 0 0; background: var(--page-bar-bg); color: var(--page-bar-ink); }
-  .page-bubble .page-tool { min-width: 44px; height: 44px; }
+  .page-grip { position: fixed; top: auto; left: 68px; bottom: calc(16px + var(--page-grip-lift, 0px) + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 22px; opacity: 1; color: var(--page-chrome-ink-rest); background: var(--page-chrome-bg-rest); border: 1px solid var(--page-chrome-line-rest); }
+  .page-bubble { display: none; }
   .page-scrim { display: block; position: fixed; inset: 0; z-index: 4; background: var(--page-scrim); }
-  .page-menu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 70vh; z-index: 5; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-radius: var(--page-pop-radius) var(--page-pop-radius) 0 0; border-width: 1px 0 0; }
+  .page-menu { position: fixed; left: 0; top: 0; width: var(--page-pop-width, min(280px, calc(100vw - 16px))); max-height: min(70vh, var(--page-pop-max, 70vh)); overflow-y: auto; transform: translate(var(--page-pop-x, 0px), var(--page-pop-y, 0px)); z-index: 5; }
   .page-menu-item { min-height: 48px; font-size: 16px; }
   .page-link { position: fixed; left: 0; right: 0; top: auto; bottom: 0; max-width: none; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-radius: 0; border-width: 1px 0 0; }
   .page-link-input { min-width: 0; height: 44px; font-size: 16px; }
@@ -242,9 +231,11 @@ ${BOARD_CSS}
   .page-image-frame { width: 100% !important; }
   .page-image-handle { display: none; }
   .page-table th button, .page-table-row-menu, .page-check-chip, .page-check-popup button, .page-menu-item { min-height: 44px; }
+  .page-board-owner-input { font-size: 16px; height: 44px; }
+  .page-board-person { height: 44px; border-radius: 22px; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .page-dock, .page-plus, .page-grip, .page-toggle-button, .page-image-handle, .page-upload-bar > span { transition: none; }
+  .page-dock, .page-plus, .page-grip, .page-toggle-button, .page-image-handle, .page-upload-bar > span, .page-board-person { transition: none; }
 }
 }
 `;
@@ -254,6 +245,19 @@ const insertHardBreak = (st, dispatch) => {
   return true;
 };
 
+// Mod-u belongs to an editable page selection only: anywhere else the browser
+// keeps its own meaning for the key. The write itself goes through the format
+// gate, so a refused activation leaves the document exactly as it was.
+const underlineShortcut = (st, dispatch, view) => {
+  if (!dispatch || !view?.editable || !markable(st, schema.marks.underline)) return false;
+  import("./format-native-commands.js")
+    .then(({ formatMark }) => formatMark(view, "underline"), () => null)
+    .then((result) => {
+      if (result?.status !== "applied" && !view.isDestroyed) announce(view, result?.message ?? "That format isn\u2019t available here.");
+    });
+  return true;
+};
+
 const editKeys = ({ history: useHistory = true, undo, redo } = {}) => ({
   "Mod-z": useHistory ? history.undo : () => { undo?.(); return true; },
   "Shift-Mod-z": useHistory ? history.redo : () => { redo?.(); return true; },
@@ -261,32 +265,266 @@ const editKeys = ({ history: useHistory = true, undo, redo } = {}) => ({
   "Shift-Enter": insertHardBreak,
   "Mod-b": commands.toggleMark(schema.marks.strong),
   "Mod-i": commands.toggleMark(schema.marks.em),
+  "Mod-u": underlineShortcut,
 });
 
+const restoreShortcut = (st, dispatch, view) => {
+  if (composing(null, view)) return false;
+  return inputrules.undoInputRule(st, dispatch && ((tr) => dispatch(asStep(tr))));
+};
+
 const markKeys = {
-  Backspace: commands.chainCommands(inputrules.undoInputRule, backspaceToParagraph),
+  Backspace: commands.chainCommands(restoreShortcut, backspaceToParagraph),
   "Mod-e": commands.toggleMark(schema.marks.code),
   "Mod-Shift-s": commands.toggleMark(schema.marks.strike),
 };
 
 const defaultUpload = (file, options) => globalThis.clay?.upload?.(file, options) ?? Promise.resolve({ ok: false, code: "unavailable", msg: "File uploads are not available in this editor" });
 
-export function pagePlugins({ upload = defaultUpload, highlight, history: useHistory = true, undo, redo, onAiTool = null, toolHost = null } = {}) {
+const nodeViewRegistries = new WeakMap();
+
+export const lazyViewsKey = new state.PluginKey("lazyViews");
+
+// Stands in for a view part's node view until its type loads: the schema's own
+// toDOM, and an update that asks to be recreated once the real view exists.
+class PendingView {
+  constructor(node, registry) {
+    this.node = node;
+    this.type = node.type;
+    this.registry = registry;
+    const { dom, contentDOM } = model.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+    this.dom = dom;
+    this.contentDOM = contentDOM ?? null;
+  }
+  update(node) { return node.type === this.type && !this.registry.has(node.type.name); }
+}
+
+// Recreates only the node views of the types that just loaded: one node
+// decoration makes ProseMirror rebuild those nodes and no others.
+export function lazyViewsPlugin() {
+  return new state.Plugin({
+    key: lazyViewsKey,
+    state: {
+      init: () => pmView.DecorationSet.empty,
+      apply(tr) {
+        const meta = tr.getMeta(lazyViewsKey);
+        if (!meta) return pmView.DecorationSet.empty;
+        const decorations = [];
+        tr.doc.forEach((node, offset) => {
+          if (!meta.types.includes(node.type.name)) return;
+          decorations.push(pmView.Decoration.node(offset, offset + node.nodeSize, {}, { lazyView: decorations.length + 1 }));
+        });
+        return pmView.DecorationSet.create(tr.doc, decorations);
+      },
+    },
+    props: { decorations: (state) => lazyViewsKey.getState(state) },
+  });
+}
+
+// Adds a view part to a running editor: its CSS at once, its node views into the
+// editor's registry, and a transaction that recreates only those block types.
+export function installPageFeature({ view, upload, toolHost, board = null, undo = null, redo = null, revise = null, highlight }, id, mod) {
+  const feature = mod.createFeature({ view, upload, toolHost, board, undo, redo, revise, highlight });
+  const registry = nodeViewRegistries.get(view);
+  const apply = () => {
+    if (feature.css) styleWithLegacyId(`page-feature-${id}`, feature.css, `page-feature-${id}`, ["editor-ui"]);
+    if (!feature.nodeViews) return;
+    const types = Object.keys(feature.nodeViews);
+    for (const type of types) registry.set(type, feature.nodeViews[type]);
+    view.dispatch(view.state.tr.setMeta(lazyViewsKey, { types }).setMeta("addToHistory", false));
+  };
+  const afterComposition = () => {
+    if (view.isDestroyed) return;
+    if (view.composing) setTimeout(afterComposition, 25);
+    else apply();
+  };
+  if (view.composing) view.dom.addEventListener("compositionend", () => setTimeout(afterComposition, 25), { once: true });
+  else apply();
+  return feature;
+}
+
+// Loads the view part for a block type the editor shows but has no view for:
+// the blocks that were there at boot, and any that arrive later.
+function featureWatchPlugin(features) {
+  return new state.Plugin({
+    view(editorView) {
+      const failed = new Set();
+      const walk = () => {
+        for (const id of failed) if (features.has(id)) failed.delete(id);
+        editorView.state.doc.forEach((node) => {
+          const id = featureForType(node.type.name);
+          if (!id || features.has(id) || failed.has(id)) return;
+          features.ensure(id).catch(() => { failed.add(id); });
+        });
+      };
+      let doc = editorView.state.doc;
+      walk();
+      return {
+        update() {
+          if (editorView.state.doc === doc) return;
+          doc = editorView.state.doc;
+          walk();
+        },
+      };
+    },
+  });
+}
+
+// The optional commands. A command module exports `createFeature(context)` returning
+// `{ run, dispose }`; the editor fetches it on the first ask and installs it once, and
+// nothing here is preloaded by the block-type scan. A command is asked for with the state
+// it was asked in: the module is fetched, and the command runs only if the edit is still
+// open, the document revision has not moved and the selection is where it was. A failed
+// fetch is reported and asked for again on the next request; an exit disposes what was
+// installed and aborts whatever was still arriving, and the next entry installs fresh
+// against the module the browser already holds.
+function createCommandHost({ load = () => Promise.reject(new Error("page: this editor has no command module")), context = () => ({}), reportError } = {}) {
+  const modules = new Map();
+  const waiters = new Set();
+  let view = null;
+  let loader = null;
+  let active = true;
+  let disposed = false;
+  let revision = 0;
+
+  // One fetch per command for the life of the host, whatever the entry: a module that
+  // failed is the one thing not kept, so the next ask loads it again.
+  const moduleFor = (id) => {
+    let fetched = modules.get(id);
+    if (!fetched) {
+      fetched = Promise.resolve(load(id));
+      modules.set(id, fetched);
+      fetched.catch(() => { if (modules.get(id) === fetched) modules.delete(id); });
+    }
+    return fetched;
+  };
+
+  const loaderFor = () => {
+    loader ??= createFeatureLoader({
+      load: moduleFor,
+      install: (id, mod) => mod.createFeature(context(view)),
+      reportError: reportError ?? ((error, id) => console.error(`clayjs: the ${id} command failed to load`, error)),
+    });
+    return loader;
+  };
+
+  // The document revision and the selection a command was asked for. A revision moves
+  // when any transaction changes the document, whoever wrote it.
+  const leaseOf = () => {
+    const at = revision;
+    const selection = view.state.selection;
+    return {
+      revision: at,
+      selection,
+      valid: () => active && !disposed && !view.isDestroyed && revision === at && view.state.selection.eq(selection),
+    };
+  };
+
+  function observe(state, prevState) {
+    if (state.doc !== prevState.doc) revision += 1;
+    for (const waiter of waiters) {
+      if (waiter.lease.valid()) continue;
+      waiters.delete(waiter);
+      waiter.controller.abort({ ok: false, code: "stale-target" });
+    }
+  }
+
+  async function run(id, args) {
+    if (!active || disposed || !view || view.isDestroyed) return { ok: false, code: "not-editing" };
+    const waiter = { lease: leaseOf(), controller: new AbortController() };
+    waiters.add(waiter);
+    try {
+      const feature = await loaderFor().ensure(id, { signal: waiter.controller.signal });
+      if (!feature) return { ok: false, code: "not-editing" };
+      if (!waiter.lease.valid()) return { ok: false, code: "stale-target" };
+      return await feature.run(args);
+    } catch (error) {
+      if (waiter.controller.signal.aborted) return waiter.controller.signal.reason;
+      return { ok: false, code: "unavailable", error };
+    } finally {
+      waiters.delete(waiter);
+    }
+  }
+
+  function leave() {
+    if (!active) return;
+    active = false;
+    for (const waiter of waiters) waiter.controller.abort({ ok: false, code: "not-editing" });
+    waiters.clear();
+    loader?.dispose();
+    loader = null;
+  }
+
+  return {
+    attach(editorView) { view = editorView; },
+    observe,
+    run,
+    enter() { if (!disposed) active = true; },
+    leave,
+    dispose() {
+      leave();
+      disposed = true;
+      active = false;
+      modules.clear();
+    },
+  };
+}
+
+const commandHosts = new WeakMap();
+// A command asks for its module with the state it was asked in, so the host has to hear
+// about every transaction: one that moves the document revision or the selection refuses
+// a command whose module is still arriving rather than running it where the person has
+// since left. It also holds the one typed key a command owns: `@` asks for the mention
+// picker, and the host types the character itself so the command is handed the bookmark it
+// belongs to, with everything else about that picker left to the module that arrives for
+// it. It is asked before the plugin that records ordinary typing, since it types it.
+function commandWatchPlugin(host) {
+  return new state.Plugin({
+    view: () => ({ update: (editorView, prevState) => host.observe(editorView.state, prevState) }),
+    props: { handleTextInput(v, from, to, text) {
+      if (text !== "@" || v.composing || !Object.hasOwn(COMMAND_FEATURES, "mentions")) return false;
+      v.dispatch(v.state.tr.insertText("@", from, to));
+      host.run("mentions", { from, to: from + 1 });
+      return true;
+    } },
+  });
+}
+
+// Runs an optional command on a mounted editor, by the id its row has in COMMAND_FEATURES.
+// A command nobody offers, or an editor with no command host, refuses rather than throws.
+export function runPageCommand(view, id, args) {
+  const host = view ? commandHosts.get(view) : null;
+  if (!host) return Promise.resolve({ ok: false, code: "not-editing" });
+  if (!Object.hasOwn(COMMAND_FEATURES, id)) return Promise.resolve({ ok: false, code: "unknown-command" });
+  return host.run(id, args);
+}
+
+// Tools follow the tables a document holds; the host arrives with the tool view
+// part on a document that had no tool at boot.
+function toolFollowPlugin(toolHost) {
+  return new state.Plugin({
+    view(view) {
+      const changed = toolHost ? () => toolHost.tablesChanged() : () => toolViews.get(view)?.tablesChanged?.();
+      let previous = view.state.doc;
+      return { update(next) { if (next.state.doc !== previous) { previous = next.state.doc; changed(); } } };
+    },
+  });
+}
+
+export function pagePlugins({ upload = defaultUpload, highlight, history: useHistory = true, undo, redo, onAiTool = null, toolHost = null, features = null, commandHost = null } = {}) {
   return [
     announcementPlugin(),
     chromePlugin({ onAiTool }),
-    toolHost && new state.Plugin({
-      view(view) {
-        let previous = view.state.doc;
-        return { update(next) { if (next.state.doc !== previous) { previous = next.state.doc; toolHost.tablesChanged(); } } };
-      },
-    }),
+    commandHost ? commandWatchPlugin(commandHost) : null,
+    slashRangePlugin(),
+    toolFollowPlugin(toolHost),
     linkPlugin(),
     tableSelectPlugin(),
     blockSelectionPlugin(),
     markdownPlugin(),
     markdownKeys(),
     placeholderPlugin(),
+    titlePlugin(),
     keymap.keymap(markKeys),
     tableKeys,
     checklistKeys,
@@ -296,16 +534,18 @@ export function pagePlugins({ upload = defaultUpload, highlight, history: useHis
     structurePlugin(),
     identityPlugin(),
     tablePlugin(),
-    chartPlugin(),
-    boardPlugin(),
+    viewHookPlugin(),
     checklistPlugin(),
     csvImportPlugin({ upload }),
     collapsePlugin(),
-    mediaPlugin({ upload }),
-    highlightPlugin(highlight),
+    mediaPlugin({ upload, features }),
+    highlightSlot(),
     pastePlugin(),
+    historyIntentPlugin(),
     useHistory ? history.history() : null,
     gapcursor.gapCursor(),
+    lazyViewsPlugin(),
+    features ? featureWatchPlugin(features) : null,
   ].filter(Boolean);
 }
 
@@ -315,6 +555,29 @@ export function pageState(blocks, options = {}) {
   return state.EditorState.create({ doc, plugins: pagePlugins(options) });
 }
 
+// The shell is built detached and moved into the article once it is complete, so
+// the node views in it measured nothing while it was out of the document. One pass
+// in place gives them a real box: the state is the same object it was, and no node
+// view is rebuilt for it.
+export function refreshMountedView(view) {
+  if (!view || view.isDestroyed) return;
+  view.updateState(view.state);
+}
+
+// Admission on a mounted editor, in one place: the commit that enters edit opens it,
+// and the exit that holds the session closed shuts it without touching a buffer.
+export function setEditorActive(view, active) {
+  if (!view || view.isDestroyed) return false;
+  const open = active === true;
+  view.setProps({ editable: () => open });
+  // A refused exit closes admission without destroying the view, so the commands are told
+  // here: the exit disposes what they installed, and the next entry installs fresh.
+  const host = commandHosts.get(view);
+  if (open) host?.enter();
+  else host?.leave();
+  return open;
+}
+
 // Clicking a checklist box (drawn by ::before in the item's start gutter)
 // toggles `checked`.
 function checkboxClick(view, event) {
@@ -335,9 +598,8 @@ function checkboxClick(view, event) {
 // Mounts the editor in `mount`, inside a .page-shell wrapper (the surface a
 // theme styles). `onChange(record)` gets the block record (blockMap) after
 // every transaction that changed the document.
-export function createPageEditor(mount, { blocks = null, onChange = null, upload, highlight, doc: initialDoc, dispatch, history: useHistory = true, undo, redo, editable = true, toolHost: providedToolHost = null, onAiTool = null, reviseTool = null, board = null } = {}) {
+export function createPageEditor(mount, { blocks = null, onChange = null, upload, highlight, doc: initialDoc, dispatch, history: useHistory = true, undo, redo, editable = true, toolHost = null, onAiTool = null, reviseTool = null, board = null, features: providedFeatures = null, formatGate = null } = {}) {
   const doc = mount.ownerDocument;
-  const toolHost = providedToolHost ?? createToolHost({ mode: "edit" });
   // Editor chrome, injected on every edit-mode boot and kept out of the saved file:
   // the reader theme <link> styles the page for visitors.
   styleWithLegacyId(STYLE_ID, PAGE_EDITOR_CSS, STYLE_ID, ["editor-ui"]);
@@ -347,20 +609,30 @@ export function createPageEditor(mount, { blocks = null, onChange = null, upload
   shell.setAttribute("sap-ignore", "");
   mount.appendChild(shell);
   let afterStep = false;
-  const view = new pmView.EditorView(shell, {
-    state: pageState(blocks, { upload, highlight, doc: initialDoc, history: useHistory, undo, redo, onAiTool, toolHost }),
+  let view = null;
+  const features = providedFeatures ?? createFeatureLoader({
+    load: (id) => FEATURES[id].load(),
+    install: (id, mod) => installPageFeature({ view, upload, toolHost, board, undo, redo, revise: reviseTool, highlight }, id, mod),
+  });
+  // Commands are their own loader: a document never fetches a picker to be read or typed
+  // in, and the host outlives a refused exit so a re-entry installs once more.
+  const commandHost = createCommandHost({
+    load: (id) => COMMAND_FEATURES[id].load(),
+    context: (editorView) => ({ view: editorView, upload }),
+  });
+  const nodeViewRegistry = new Map();
+  const nodeViews = {};
+  for (const feature of Object.values(FEATURES)) for (const type of feature.views ?? feature.types) {
+    nodeViews[type] = (node, v, getPos, decorations, inner) => {
+      const make = nodeViewRegistry.get(node.type.name);
+      return make ? make(node, v, getPos, decorations, inner) : new PendingView(node, nodeViewRegistry);
+    };
+  }
+  view = new pmView.EditorView(shell, {
+    state: pageState(blocks, { upload, highlight, doc: initialDoc, history: useHistory, undo, redo, onAiTool, toolHost, features, commandHost }),
     attributes: { class: "page-editor" },
     editable: () => editable,
-    nodeViews: {
-      image: (node, v, getPos) => new ImageView(node, v, getPos),
-      file: (node, v) => new FileView(node, v),
-      code_block: (node, v, getPos) => new CodeBlockView(node, v, getPos),
-      table: (node, v, getPos) => new TableView(node, v, getPos),
-      chart: (node, v, getPos) => new ChartView(node, v, getPos),
-      tool: (node, v, getPos) => new ToolView(node, v, getPos, { host: toolHost, revise: reviseTool }),
-      table_cell: (node, v, getPos) => new TableCellView(node, v, getPos),
-      ...(board ? { board: (node, v, getPos) => new BoardView(node, v, getPos, { commands: board, undo, redo, panel: cardPanel(v) }) } : {}),
-    },
+    nodeViews,
     handleDOMEvents: {
       mousedown: checkboxClick,
       dragstart(v, event) {
@@ -382,5 +654,42 @@ export function createPageEditor(mount, { blocks = null, onChange = null, upload
       if (onChange && view.state.doc !== before) onChange(blockMap(view.state.doc));
     },
   });
+  nodeViewRegistries.set(view, nodeViewRegistry);
+  viewFeatures.set(view, features);
+  commandHost.attach(view);
+  commandHosts.set(view, commandHost);
+  const destroy = view.destroy.bind(view);
+  // A new-format command asks the format gate, which the page plugin hands over as a
+  // loader of its own: neither the gate nor its host adapter is on the editor's ready
+  // path, so a reader who never uses a newer format never fetches them. The gate is
+  // created once, on the first command, and belongs to this view.
+  let gateHeld = null;
+  let disposed = false;
+  const heldGate = () => {
+    if (!gateHeld) {
+      gateHeld = Promise.resolve().then(() => formatGate()).catch((error) => {
+        gateHeld = null;
+        throw error;
+      });
+    }
+    return gateHeld;
+  };
+  view.runFormatCommand = async (apply) => {
+    if (disposed) return { status: "disposed", retry: false };
+    if (!formatGate) return { status: "unsupported-host", code: "page-format-unsupported", retry: false };
+    const gate = await heldGate();
+    if (disposed) {
+      gate.dispose?.();
+      return { status: "disposed", retry: false };
+    }
+    return gate.run({ apply });
+  };
+  view.destroy = () => {
+    disposed = true;
+    if (gateHeld) gateHeld.then((gate) => gate?.dispose?.(), () => {});
+    commandHost.dispose();
+    features.dispose();
+    destroy();
+  };
   return view;
 }