@panphora/clayjs 1.16.0 → 1.17.0

package/src/page/editor.js

@@ -11,18 +11,18 @@ 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, slashRangePlugin } from "./chrome.js";
-import { announcementPlugin } from "./announce.js";
+import { announcementPlugin, announce } from "./announce.js";
 import { linkPlugin } from "./link.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 { 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 { boardPlugin } from "./board-views.js";
+import { viewFeatures, viewHookPlugin } from "./view-hooks.js";
 import { checklistPlugin, checklistKeys } from "./checklist.js";
 import { csvImportPlugin } from "./csv-import.js";
 import { styleWithLegacyId } from "../lib/style.js";
@@ -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)); }
@@ -232,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; },
@@ -239,6 +265,7 @@ 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) => {
@@ -447,10 +474,19 @@ 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.
+// 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;
+    } },
   });
 }
 
@@ -479,6 +515,7 @@ export function pagePlugins({ upload = defaultUpload, highlight, history: useHis
   return [
     announcementPlugin(),
     chromePlugin({ onAiTool }),
+    commandHost ? commandWatchPlugin(commandHost) : null,
     slashRangePlugin(),
     toolFollowPlugin(toolHost),
     linkPlugin(),
@@ -497,8 +534,7 @@ export function pagePlugins({ upload = defaultUpload, highlight, history: useHis
     structurePlugin(),
     identityPlugin(),
     tablePlugin(),
-    chartPlugin(),
-    boardPlugin(),
+    viewHookPlugin(),
     checklistPlugin(),
     csvImportPlugin({ upload }),
     collapsePlugin(),
@@ -510,7 +546,6 @@ export function pagePlugins({ upload = defaultUpload, highlight, history: useHis
     gapcursor.gapCursor(),
     lazyViewsPlugin(),
     features ? featureWatchPlugin(features) : null,
-    commandHost ? commandWatchPlugin(commandHost) : null,
   ].filter(Boolean);
 }
 
@@ -563,7 +598,7 @@ 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 = null, onAiTool = null, reviseTool = null, board = null, features: providedFeatures = 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;
   // Editor chrome, injected on every edit-mode boot and kept out of the saved file:
   // the reader theme <link> styles the page for visitors.
@@ -586,9 +621,7 @@ export function createPageEditor(mount, { blocks = null, onChange = null, upload
     context: (editorView) => ({ view: editorView, upload }),
   });
   const nodeViewRegistry = new Map();
-  const nodeViews = {
-    chart: (node, v, getPos) => new ChartView(node, v, getPos),
-  };
+  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);
@@ -622,9 +655,41 @@ export function createPageEditor(mount, { blocks = null, onChange = null, upload
     },
   });
   nodeViewRegistries.set(view, nodeViewRegistry);
+  viewFeatures.set(view, features);
   commandHost.attach(view);
   commandHosts.set(view, commandHost);
   const destroy = view.destroy.bind(view);
-  view.destroy = () => { commandHost.dispose(); features.dispose(); destroy(); };
+  // 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;
 }

package/src/page/emoji-data.js

@@ -0,0 +1,162 @@
+// The emoji a picker offers: a small curated set, grouped the way somebody looks for one.
+// Each row is [glyph, name, keywords], and the glyph is the whole record: a variation
+// selector, a skin tone, a flag's regional pair, a keycap or a joined family is written as
+// the one grapheme a person sees, and nothing here is a font, a sprite, an image or a URL.
+// It is fetched by `emoji.js` the first time the picker opens, never by a reader and never
+// with the editor.
+export const EMOJI = {
+  "Smileys": [
+    ["😀", "grinning", "face smile happy"],
+    ["😃", "grinning big eyes", "face smile happy"],
+    ["😄", "grinning smiling eyes", "face laugh happy"],
+    ["😁", "beaming", "face grin happy"],
+    ["😆", "laughing", "face happy haha"],
+    ["😅", "sweat smile", "face relief nervous"],
+    ["😂", "joy", "face tears laugh lol"],
+    ["🙂", "slight smile", "face ok"],
+    ["🙃", "upside down", "face silly"],
+    ["😉", "wink", "face flirt"],
+    ["😊", "blush", "face smile warm"],
+    ["😇", "halo", "face angel innocent"],
+    ["🥰", "smiling hearts", "face love"],
+    ["😍", "heart eyes", "face love crush"],
+    ["🤩", "star struck", "face wow excited"],
+    ["😎", "cool", "face sunglasses"],
+    ["🤔", "thinking", "face hmm question"],
+    ["😐", "neutral", "face flat"],
+    ["😴", "sleeping", "face tired zzz"],
+    ["😢", "crying", "face sad tear"],
+    ["😭", "sobbing", "face sad tears"],
+    ["😡", "angry", "face mad red"],
+    ["😱", "scream", "face fear shock"],
+    ["🤯", "exploding head", "face mind blown"],
+    ["🥳", "party face", "celebration birthday"],
+    ["😷", "mask", "face sick medical"],
+    ["🤒", "thermometer", "face sick ill"],
+  ],
+  "Gestures and people": [
+    ["👋", "wave", "hand hello hi bye"],
+    ["👋🏽", "wave medium skin tone", "hand hello hi"],
+    ["👍", "thumbs up", "yes like approve"],
+    ["👍🏿", "thumbs up dark skin tone", "yes like approve"],
+    ["👎", "thumbs down", "no dislike"],
+    ["👏", "clapping", "hands applause bravo"],
+    ["🙌", "raised hands", "hooray praise"],
+    ["🙏", "folded hands", "please thanks pray"],
+    ["💪", "flexed arm", "strong muscle"],
+    ["🤝", "handshake", "deal agreement"],
+    ["👨‍👩‍👧‍👦", "family", "people children parents"],
+    ["🧑‍💻", "technologist", "person laptop work code"],
+    ["🏃", "runner", "person sport hurry"],
+    ["🧘", "lotus", "person meditation yoga"],
+  ],
+  "Animals and nature": [
+    ["🐶", "dog", "animal pet puppy"],
+    ["🐱", "cat", "animal pet kitten"],
+    ["🐭", "mouse", "animal rodent"],
+    ["🐰", "rabbit", "animal bunny"],
+    ["🦊", "fox", "animal"],
+    ["🐻", "bear", "animal"],
+    ["🐼", "panda", "animal"],
+    ["🐨", "koala", "animal"],
+    ["🐯", "tiger", "animal"],
+    ["🦁", "lion", "animal"],
+    ["🐮", "cow", "animal"],
+    ["🐷", "pig", "animal"],
+    ["🐸", "frog", "animal"],
+    ["🐵", "monkey", "animal"],
+    ["🐔", "chicken", "animal bird"],
+    ["🐧", "penguin", "animal bird"],
+    ["🐦", "bird", "animal"],
+    ["🦄", "unicorn", "animal magic"],
+    ["🐝", "bee", "animal insect honey"],
+    ["🦋", "butterfly", "animal insect"],
+    ["🌸", "cherry blossom", "flower plant spring"],
+    ["🌻", "sunflower", "flower plant summer"],
+    ["🌈", "rainbow", "weather sky"],
+    ["🌲", "evergreen tree", "plant forest"],
+    ["🌵", "cactus", "plant desert"],
+    ["🍁", "maple leaf", "plant autumn"],
+  ],
+  "Food and drink": [
+    ["☕", "coffee", "drink cup hot"],
+    ["🍵", "tea", "drink cup green"],
+    ["🍺", "beer", "drink mug"],
+    ["🍷", "wine", "drink glass"],
+    ["🍎", "apple", "fruit food red"],
+    ["🍌", "banana", "fruit food"],
+    ["🍇", "grapes", "fruit food"],
+    ["🍓", "strawberry", "fruit food"],
+    ["🍑", "peach", "fruit food"],
+    ["🍕", "pizza", "food slice"],
+    ["🍔", "burger", "food"],
+    ["🍟", "fries", "food"],
+    ["🌮", "taco", "food"],
+    ["🍣", "sushi", "food fish"],
+    ["🍜", "noodles", "food ramen"],
+    ["🍰", "cake", "food dessert"],
+    ["🍪", "cookie", "food sweet"],
+    ["🍫", "chocolate", "food sweet"],
+    ["🥑", "avocado", "food fruit"],
+    ["🥕", "carrot", "food vegetable"],
+    ["🍞", "bread", "food loaf"],
+  ],
+  "Travel and places": [
+    ["✈️", "airplane", "travel flight"],
+    ["🚗", "car", "travel drive"],
+    ["🚲", "bicycle", "travel bike"],
+    ["🚂", "train", "travel locomotive"],
+    ["🚀", "rocket", "travel launch space"],
+    ["⛵", "sailboat", "travel boat"],
+    ["🏠", "house", "place home"],
+    ["🏢", "office", "place building work"],
+    ["🗽", "statue of liberty", "place new york"],
+    ["🗼", "tower", "place tokyo"],
+    ["🏔", "mountain", "place snow"],
+    ["🏖", "beach", "place holiday sea"],
+    ["🌍", "globe", "world earth"],
+    ["🗺", "map", "place world"],
+    ["🚦", "traffic light", "place street"],
+  ],
+  "Objects": [
+    ["💡", "bulb", "idea light"],
+    ["🔥", "fire", "hot flame"],
+    ["⭐", "star", "favourite rating"],
+    ["💯", "hundred", "score perfect"],
+    ["✅", "check", "done yes"],
+    ["❌", "cross", "no wrong"],
+    ["⚠️", "warning", "caution alert"],
+    ["📌", "pushpin", "pin note"],
+    ["📎", "paperclip", "attach"],
+    ["📅", "calendar", "date schedule"],
+    ["📈", "chart up", "graph growth"],
+    ["📉", "chart down", "graph loss"],
+    ["💰", "money bag", "cash"],
+    ["🔑", "key", "access"],
+    ["🔒", "lock", "secure private"],
+    ["🔔", "bell", "notify alert"],
+    ["🎉", "party popper", "celebrate"],
+    ["🎁", "gift", "present"],
+    ["🏆", "trophy", "win award"],
+    ["🎯", "target", "goal aim"],
+    ["⏰", "alarm clock", "time"],
+    ["⌛", "hourglass", "time wait"],
+  ],
+  "Symbols": [
+    ["❤️", "red heart", "love"],
+    ["💔", "broken heart", "love sad"],
+    ["✨", "sparkles", "magic new"],
+    ["1️⃣", "keycap one", "number"],
+    ["2️⃣", "keycap two", "number"],
+    ["#️⃣", "keycap hash", "number channel"],
+    ["🇫🇷", "flag france", "country"],
+    ["🇺🇸", "flag united states", "country"],
+    ["🇯🇵", "flag japan", "country"],
+    ["♻️", "recycle", "reuse"],
+    ["➡️", "arrow right", "direction next"],
+    ["⬅️", "arrow left", "direction back"],
+    ["🔁", "repeat", "loop again"],
+    ["🔀", "shuffle", "random"],
+    ["🆗", "ok button", "yes"],
+  ],
+};

package/src/page/features/board.js

@@ -1,12 +1,21 @@
 import { BOARD_CSS } from "../board-style.js";
 import { BoardView } from "../board-view.js";
 import { cardPanel } from "../board-panel.js";
+import { cardPanels } from "../board-views.js";
+import { addViewHook } from "../view-hooks.js";
 
-export function createFeature({ board = null, undo = null, redo = null } = {}) {
+export function createFeature({ view = null, board = null, undo = null, redo = null } = {}) {
+  const off = view ? addViewHook(view, {
+    update: (editorView) => cardPanels.get(editorView)?.sync(),
+    destroy: (editorView) => {
+      cardPanels.get(editorView)?.hide(false, false);
+      cardPanels.delete(editorView);
+    },
+  }) : () => {};
   return {
     id: "board",
-    nodeViews: board ? { board: (node, view, getPos) => new BoardView(node, view, getPos, { commands: board, undo, redo, panel: cardPanel(view) }) } : null,
+    nodeViews: board ? { board: (node, editorView, getPos) => new BoardView(node, editorView, getPos, { commands: board, undo, redo, panel: cardPanel(editorView) }) } : null,
     css: board ? BOARD_CSS : null,
-    dispose() {},
+    dispose() { off(); },
   };
 }

package/src/page/features/chart.js

@@ -0,0 +1,11 @@
+import { ChartView, refreshCharts } from "../chart.js";
+import { addViewHook } from "../view-hooks.js";
+
+export function createFeature({ view = null } = {}) {
+  const off = view ? addViewHook(view, { update: refreshCharts }) : () => {};
+  return {
+    id: "chart",
+    nodeViews: { chart: (node, editorView, getPos) => new ChartView(node, editorView, getPos) },
+    dispose() { off(); },
+  };
+}

package/src/page/features/dates.js

@@ -0,0 +1,180 @@
+// Date mentions: the Date action offers Today and Tomorrow, and choosing one writes that
+// calendar day into the document as ordinary ISO text with the `date` mark over it. Both
+// days are resolved once, when the command runs, from the local calendar rather than from a
+// UTC instant, so the text a person reads is the day they picked; nothing here stores a
+// time, a zone, a relative word or a reminder, and nothing speaks to the network. Loaded on
+// the first Date action, and disposed with the exit.
+import { state } from "../../vendor/prosemirror.vendor.js";
+import { schema } from "../schema.js";
+import { asStep } from "../blocksel.js";
+import { composing } from "../markdown.js";
+import { createMentionPicker } from "../mention-picker.js";
+import { runFormatted } from "../format-command.js";
+
+const pad = (n) => String(n).padStart(2, "0");
+
+// A calendar date, as the record stores it: no year padding games, no leap second, no
+// zone. A day that does not exist is not a date, so 2023-02-29 is refused.
+export function isISODate(value) {
+  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+  const parsed = new Date(`${value}T12:00:00Z`);
+  return Number.isFinite(parsed.valueOf()) && parsed.toISOString().slice(0, 10) === value;
+}
+
+// Today, from the local calendar: the fields a person reads on their own wall clock, never
+// `toISOString()` of a local time, which is tomorrow or yesterday for part of the day.
+export const localISODate = (now = new Date()) => `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+
+// A day after (or before) a date, by calendar arithmetic on the date alone: noon UTC keeps
+// a daylight-saving shift from landing on the day before.
+const dayAfter = (date, days) => {
+  const moved = new Date(`${date}T12:00:00Z`);
+  moved.setUTCDate(moved.getUTCDate() + days);
+  return moved.toISOString().slice(0, 10);
+};
+
+// What the picker lists: two days, both resolved here and once, labelled with the text each
+// one writes. Nothing is stored and no day is invented later.
+export const earlyDays = (today) => {
+  const tomorrow = dayAfter(today, 1);
+  return [
+    { id: "today", name: `Today (${today})`, date: today },
+    { id: "tomorrow", name: `Tomorrow (${tomorrow})`, date: tomorrow },
+  ];
+};
+
+export function createFeature({ view = null } = {}) {
+  if (!view) return { run: () => ({ ok: false, code: "not-editing" }), dispose() {} };
+  const doc = view.dom.ownerDocument;
+  let session = null;
+
+  // The caret the command belongs to, read from the document again at the commit: the
+  // picker holds no focus and writes nothing, so a caret that moved, a selection that is no
+  // longer empty or a block that refuses marks all mean the bookmark no longer holds and the
+  // command refuses rather than writing the date somewhere else.
+  function bookmark(s) {
+    const st = view.state;
+    if (!st.selection.empty || st.selection.from !== s.from) return null;
+    if (s.from < 0 || s.from > st.doc.content.size) return null;
+    const $from = st.doc.resolve(s.from);
+    if (!$from.parent.isTextblock || $from.parent.type.spec.code) return null;
+    if (!$from.parent.type.allowsMarkType(schema.marks.date)) return null;
+    return s.from;
+  }
+
+  // Where the list hangs, in the page's own placement variables. A view that cannot measure
+  // the caret (one outside a laid-out document) still gets its list, just not positioned.
+  function place(s) {
+    try {
+      const box = view.dom.parentElement?.getBoundingClientRect?.() ?? { left: 0, top: 0 };
+      const at = view.coordsAtPos(s.from);
+      return { x: Math.max(8, at.left - box.left), y: at.bottom + 6 - box.top };
+    } catch {
+      return null;
+    }
+  }
+
+  function anchor(s) {
+    const id = s.picker.activeId();
+    if (id) view.dom.setAttribute("aria-activedescendant", id);
+    else if (view.dom.getAttribute("aria-activedescendant")?.startsWith(s.picker.el.id)) view.dom.removeAttribute("aria-activedescendant");
+  }
+
+  function close() {
+    const s = session;
+    if (!s) return;
+    session = null;
+    for (const [target, type, fn, options] of s.listen) target.removeEventListener(type, fn, options);
+    if (view.dom.getAttribute("aria-activedescendant")?.startsWith(`${s.picker.el.id}-`)) view.dom.removeAttribute("aria-activedescendant");
+    s.picker.destroy();
+  }
+
+  // The one place a date reaches the document. Document 14 Step 8a wraps this call in the
+  // format gate's `runFormatCommand`; nothing else in this module writes.
+  function insertDateMention(at, date) {
+    const label = String(date);
+    // One transaction: the ISO text and its mark, then one unmarked space so typing at the
+    // edge of a date stays plain text.
+    const tr = view.state.tr.insertText(label, at, at);
+    tr.addMark(at, at + label.length, schema.marks.date.create({ date: label }));
+    tr.insertText(" ", at + label.length);
+    tr.setSelection(state.TextSelection.create(tr.doc, at + label.length + 1));
+    view.dispatch(asStep(tr));
+    view.focus();
+    return { ok: true, date: label };
+  }
+
+  async function choose(index) {
+    const s = session;
+    if (!s) return { ok: false, code: "not-editing" };
+    const entry = s.picker.personAt(index);
+    const at = bookmark(s);
+    if (at === null || !entry || !isISODate(entry.date)) {
+      close();
+      if (!entry) return { ok: false, code: "no-date" };
+      if (at === null) return { ok: false, code: "stale-target" };
+      return { ok: false, code: "invalid-date" };
+    }
+    close();
+    // The gate awaits, so the caret is read again here: one that moved, a selection that is
+    // no longer a caret or a block that refuses marks means the target no longer holds, and
+    // the date is not written anywhere.
+    return runFormatted(view, () => {
+      const now = bookmark(s);
+      if (now === null) return { ok: false, code: "stale-target" };
+      return insertDateMention(now, entry.date);
+    });
+  }
+
+  function key(event) {
+    const s = session;
+    if (!s || composing(event, view)) return;
+    const stop = () => { event.preventDefault(); event.stopPropagation(); };
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      stop();
+      s.picker.move(event.key === "ArrowDown" ? 1 : -1);
+      anchor(s);
+    } else if (event.key === "Enter") {
+      stop();
+      choose(s.picker.index());
+    } else if (event.key === "Escape" || event.key === "Tab") {
+      stop();
+      close();
+    }
+  }
+
+  function open() {
+    close();
+    // Today is read once, here: a picker left open across midnight still writes the day the
+    // command was asked for, and choosing Tomorrow never reads the clock again.
+    const s = { from: view.state.selection.from, days: earlyDays(localISODate()), picker: null, listen: [] };
+    s.picker = createMentionPicker({ document: doc, label: "Insert a date", empty: "No date to insert", onPick: (index) => choose(index) });
+    session = s;
+    const listen = (target, type, fn, options) => {
+      target.addEventListener(type, fn, options);
+      s.listen.push([target, type, fn, options]);
+    };
+    listen(doc, "keydown", (event) => key(event), true);
+    // Typing closes the list: the caret has moved on, and the command that opened it has
+    // nothing to write where it no longer holds.
+    listen(view.dom, "input", () => close());
+    listen(doc, "mousedown", (event) => { if (!s.picker.el.contains(event.target)) close(); }, true);
+    (view.dom.parentElement ?? doc.body).appendChild(s.picker.el);
+    if (bookmark(s) === null) {
+      close();
+      return { ok: false, code: "stale-target" };
+    }
+    s.picker.show(s.days, place(s));
+    anchor(s);
+    return { ok: true, picker: true };
+  }
+
+  return {
+    // The Date action: the picker at the caret, offering the two days resolved now. It
+    // writes nothing until one is chosen.
+    async run() {
+      return open();
+    },
+    dispose() { close(); },
+  };
+}