@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/session.mjs

@@ -0,0 +1,168 @@
+import { OLD_PROTOCOL, PROTOCOL, PROTOCOLS, VERSION, keyCombo } from "../../shared/session.mjs";
+import { lookOf, lookOfElement } from "../../shared/document-look.mjs";
+
+// The report page inside a workbench (an iframe of the same origin): it answers a few commands and
+// tells the workbench its state, never the report's content. Nothing happens when the page is not
+// embedded. The protocol is src/shared/session.mjs; how a workbench uses it, docs/workbench.md.
+//
+// A message counts only from the parent window, of this origin and protocol. A command names the
+// report it is meant for: one for another report (the iframe went to another page meanwhile) is
+// refused. Every command gets exactly one reply, once it is done. Besides the editor's commands the
+// session itself answers five: `theme` (show the report light or dark, or as the reader chose, without
+// storing it), `look` (show the document in a look, 字体与布局: { look }, src/shared/document-look.mjs; the
+// workbench writes it into doc.json), `keys` (key combinations to hand to the workbench when the page does not use them),
+// `scroll-top` (back to the top when scrolled down) and `close-card` (the detail card on top closes as a
+// press on its backdrop closes it: the workbench asks on a press on its own bars, or Esc there, while
+// the page says a card is open, `card` in what it sends). A card stands in the middle of the
+// workbench's window, not of the frame (centreCards, below).
+
+/** A page opened in a frame on its own (?solo), not as the workbench's report: no session, its own notices. */
+export const SOLO = new URLSearchParams(location.search).has("solo");
+
+/**
+ * slug: the report's; snapshot(): { title, state } (state: STATE_FLAGS of src/shared/session.mjs);
+ * commands: name -> async (message) => result ({ ok, … }); modals: what stands open over the page
+ * (`modalOps`, page-objects.mjs: open(), listen(listener), closeTop()).
+ * Returns { update() (call it when the state may have changed), notice({ text, tone, hold, room }) (the
+ * workbench shows it: a toast, `room` px above the frame's bottom, what the page's bottom panels take;
+ * text "" takes it away), noticeRoom(room) (that room changed: the workbench's toasts stand above it),
+ * reload() (the workbench shows the report
+ * again in a new page, swapped in once drawn), annotationsRemoved(items) (批注 deleted in the page:
+ * the workbench says so and offers them back), open({ target, block } or { hash }) (the workbench
+ * goes to another document), jump({ block, place }) (a link goes to a block of this page: the
+ * workbench adds a history entry, `place` where the reader was, for the way back: `show-place`),
+ * workspace() (a page was made under this one: the sidebar reads the list
+ * again and opens this page's row) }, or null when not embedded, or opened on its own in a frame of the
+ * workbench (?solo: the 写作偏好 dialog's page, which talks to no session).
+ */
+export function connectWorkbench({ slug, snapshot, commands, modals }) {
+  if (window.parent === window || SOLO) return null;
+  centreCards(modals);
+  // The id the workbench speaks (src/shared/session.mjs, OLD_PROTOCOL): null until its first command,
+  // and meanwhile every message goes under both, so that a workbench of either version hears it.
+  let spoken = null;
+  const send = (type, fields, protocols = spoken ? [spoken] : [PROTOCOL, OLD_PROTOCOL]) => {
+    for (const protocol of protocols) window.parent.postMessage({ protocol, v: VERSION, type, slug, ...fields }, location.origin);
+  };
+  let last = null;
+  const update = () => {
+    const now = { ...snapshot(), card: modals.open().length > 0 };
+    const key = JSON.stringify(now);
+    if (key === last) return;
+    last = key;
+    send("state", now);
+  };
+  modals.listen(update);
+
+  // A key combination the workbench asked for goes to it when nothing on the page took it (the
+  // editor's own keys, Ctrl+K for a link among them, are handled and prevented before this).
+  let keys = new Set();
+  addEventListener("keydown", (event) => {
+    if (event.defaultPrevented || event.isComposing || keys.size === 0) return;
+    const key = keyCombo(event);
+    if (!keys.has(key)) return;
+    event.preventDefault();
+    send("key", { key });
+  });
+  const own = {
+    async theme({ theme = null }) {
+      if (theme !== null && theme !== "light" && theme !== "dark") return { ok: false, reason: "theme" };
+      dispatchEvent(new CustomEvent("doc-theme-request", { detail: { theme } })); // the kit's ui.js
+      return { ok: true };
+    },
+    // The document's look shown at once (the kit's ui.js puts it on <html> and lays out again), never
+    // stored here: the workbench writes doc.json. Answers with the look the page shows then.
+    async look({ look = null }) {
+      if (look !== null && (typeof look !== "object" || Array.isArray(look))) return { ok: false, reason: "look" };
+      dispatchEvent(new CustomEvent("doc-look-request", { detail: { look: lookOf(look) } }));
+      return { ok: true, look: lookOfElement(document.documentElement) };
+    },
+    async keys({ keys: list }) {
+      if (!Array.isArray(list) || !list.every((key) => typeof key === "string")) return { ok: false, reason: "keys" };
+      keys = new Set(list);
+      return { ok: true };
+    },
+    // Scrolled down (10px or more, as Notion's breadcrumb asks), the page glides back to its top.
+    async "scroll-top"() {
+      if (Math.abs(scrollY) < 10) return { ok: true, scrolled: false };
+      scrollTo({ top: 0, behavior: "smooth" });
+      return { ok: true, scrolled: true };
+    },
+    // A press on the workbench's own bars, or Esc there, while a detail card is open.
+    async "close-card"() {
+      return { ok: true, closed: modals.closeTop() };
+    },
+  };
+  const all = { ...commands, ...own };
+
+  addEventListener("message", async (event) => {
+    const message = event.data;
+    if (event.source !== window.parent || event.origin !== location.origin) return;
+    if (!PROTOCOLS.includes(message?.protocol) || message.v !== VERSION || message.type !== "command") return;
+    spoken = message.protocol;
+    const run = Object.hasOwn(all, message.name) ? all[message.name] : null;
+    let result;
+    try {
+      result = message.slug !== slug ? { ok: false, reason: "slug" } : run ? await run(message) : { ok: false, reason: "unknown" };
+    } catch (error) {
+      result = { ok: false, reason: "error", message: String(error?.message ?? error) };
+    }
+    send("reply", { id: message.id, ...result }, [message.protocol]);
+    update();
+  });
+  const first = { ...snapshot(), card: modals.open().length > 0 };
+  last = JSON.stringify(first);
+  send("ready", { commands: Object.keys(all), ...first });
+  return {
+    update,
+    notice: (fields) => send("notice", fields),
+    noticeRoom: (room) => send("noticeRoom", { room }),
+    // Show the report again (the file changed): the workbench loads it out of sight and puts it in
+    // this page's place once drawn; this page does nothing more meanwhile.
+    reload: () => send("reload", {}),
+    annotationsRemoved: (items) => send("annotations-removed", { items }),
+    open: (place) => send("open", place),
+    jump: (fields) => send("jump", fields),
+    workspace: () => send("workspace", {}),
+  };
+}
+
+// A detail card stands in the middle of the workbench's window, as the workbench's own dialogs do
+// (组件列表, 写作偏好), not in the middle of this frame right of its sidebar and under its top bar;
+// the workbench covers its bars while the page says a card is open (`card`), the card's backdrop
+// the rest. The kit's dialog.css puts the card's middle at --doc-dialog-centre-x and -y, as far as
+// the frame lets it stay clear of its sides, and makes it 80% as high as --doc-dialog-window-height.
+// They are read from the frame's place in the workbench's window (of this origin, as every message
+// of the session is), and said in a sheet the document adopts, which is in no markup (a copy of the
+// view, the file); again as the frame changes size (the window resized, the sidebar opened, closed or
+// dragged wider) and as a card opens or closes.
+function centreCards(modals) {
+  let sheet;
+  try {
+    sheet = new CSSStyleSheet();
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+  } catch {
+    return; // a browser with no constructed sheets: the card in the middle of the frame
+  }
+  let said = null;
+  const place = () => {
+    let rule = "";
+    try {
+      const frame = window.frameElement;
+      const outer = frame?.ownerDocument.documentElement;
+      if (outer) {
+        const box = frame.getBoundingClientRect();
+        const style = frame.ownerDocument.defaultView.getComputedStyle(frame);
+        const left = box.left + frame.clientLeft + parseFloat(style.paddingLeft);
+        const top = box.top + frame.clientTop + parseFloat(style.paddingTop);
+        rule = `:root { --doc-dialog-centre-x: ${outer.clientWidth / 2 - left}px; --doc-dialog-centre-y: ${outer.clientHeight / 2 - top}px; --doc-dialog-window-height: ${outer.clientHeight}px; }`;
+      }
+    } catch { /* a frame of another origin's page, or one taken away: in the middle of the frame */ }
+    if (rule === said) return;
+    said = rule;
+    sheet.replaceSync(rule);
+  };
+  place();
+  addEventListener("resize", place);
+  modals.listen(place);
+}

package/browser/editor/page/slash-menu/index.mjs

@@ -0,0 +1,291 @@
+import { MENU_GROUPS, takesFormula, textFilters } from "../../components/registry.mjs";
+import { FORMULA_ICON, LINK_ICON, PAGE_ICON } from "../../components/icons.mjs";
+import { caretRect, hostOf } from "../caret.mjs";
+import { can, isFirstLine } from "../core.mjs";
+import { belowTargets, convertible, typeOf, typedTargets } from "../convert.mjs";
+import { rangeAt, rangeOffsets } from "../marks.mjs";
+import { createMenu } from "../menu.mjs";
+import { offered } from "../offered.mjs";
+import { menuRow, variantKeys } from "../page-objects.mjs";
+import { recentList } from "../storage.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// The "/" menu (docs/editor.md, "New blocks and conversions"), Notion's (notion-lite
+// editor/menus/slash-menu.js): "/" (or "、", "／", the same key with a Chinese input method) typed in
+// a text block opens a menu of blocks at the caret, filtered by what follows it (label, pinyin,
+// initials; while composing too). In a block holding nothing else, a block chosen is what the block
+// turns into; in one with text, a new block of the type goes below it (insertBelow), and so it does
+// below a flowchart node's first line (its title, which turns into nothing: core.mjs firstLineOf); 公式,
+// 链接 and 页面 go where the "/" was. In text no block can come of (a table's cell, a caption, a card's
+// title: what takes links, as the "@" menu goes by) it holds those three alone, where notion-lite opens
+// no menu. Unfiltered, the menu shows 建议 (the four blocks used last, kept on
+// this computer) and the blocks by group, the workspace's component packages the last of those
+// (组件: notion-lite's variants, "installed:<id>", each named as the reader reads and found by its
+// words, offered where a block of its own stands: convert.mjs); filtered, one list. 240px wide, at most min(448px, 40vh)
+// high (its rows scroll), below the caret or above it where there is more room; ↑/↓, Enter or Tab
+// and Esc work while it is open. It closes when the "/" goes, the caret leaves for another block or
+// before the "/", what follows starts with a space or ends with two, or three more characters are
+// typed after nothing matched (a "、" in the middle of text, a Chinese list's comma most often, at
+// once), none of it while an input method composes. The block handle's "+" opens it with no "/" (in
+// the empty block it made: `add`, notion-lite's openAddMenu), filtered by what is typed there. The card
+// is menu.mjs; markdown/ tells it what is typed.
+
+/** The characters that open the menu: "/", and what the same key types with a Chinese input method. */
+export const SLASH = new Set(["/", "、", "／"]);
+
+// The rows not blocks of their own, where the "/" was (notion-lite's inline section).
+const INLINE = {
+  // 公式 is the format bar's (an inline formula; a formula block of its own would be 公式块).
+  "inline:formula": { label: t("公式"), icon: FORMULA_ICON, words: "公式 行内公式 gongshi hangneigongshi gs hngs equation inline math latex tex $" },
+  "inline:link": { label: t("链接"), icon: LINK_ICON, words: "链接 超链接 lianjie chaolianjie lj link url href" },
+  "inline:page": { label: t("页面"), icon: PAGE_ICON, words: "页面 页面块 子页面 yemian yemiankuai ziyemian ym zym page subpage mention" },
+};
+
+// Groups of the unfiltered menu: 基本区块, 高级区块 (media, code, tabs and formula blocks: what
+// holds more than text; the types' own `menu`, registry.mjs MENU_GROUPS), 组件 (what the variants
+// are now: the workspace's), and what is no block under 内联.
+const SECTIONS = [
+  { title: t("基本区块"), types: () => MENU_GROUPS.basic },
+  { title: t("高级区块"), types: () => MENU_GROUPS.advanced },
+  { title: t("组件@group"), types: variantKeys },
+];
+
+const infoOf = (key) => INLINE[key] ?? menuRow(key);
+
+/**
+ * How well a row (a block type, or 公式 / 链接 / 页面) matches what the reader typed after "/": 0 when
+ * its name is just that, 1 when one of its words (pinyin, initials, English) is, 2 when one starts
+ * with it, 3 when one has it inside; null when none (Notion's order: "gl" is 高亮块 before 折叠列表's
+ * "toggle", "链接" the link before 网页书签, which has the word).
+ */
+export function matchScore(type, query) {
+  const text = query.trim().toLowerCase().replace(/\s/g, "");
+  if (!text) return 0;
+  const { label, words } = infoOf(type);
+  const names = [label.replace(/\s/g, "").toLowerCase(), ...words.split(" ")];
+  if (names[0] === text) return 0;
+  if (names.includes(text)) return 1;
+  if (names.some((name) => name.startsWith(text))) return 2;
+  if (names[0].includes(text) || (text.length > 1 && names.some((name) => name.includes(text)))) return 3;
+  return null;
+}
+
+/** Whether a row matches what the reader typed after "/". */
+export const typeMatches = (type, query) => matchScore(type, query) !== null;
+
+// ---------- the blocks used last (建议) ----------
+
+const recent = recentList("gallery-edit:recent-types", { max: 8, valid: (key) => typeof key === "string" && Boolean(infoOf(key)) });
+
+/** The rows chosen last, newest first. */
+export const recentTypes = () => recent.read();
+
+/** A row chosen: first among the recent ones. */
+export const rememberType = (key) => recent.use(key);
+
+/**
+ * The menu's items for `those` (block types, and 公式 / 链接 / 页面 as "inline:formula" / "inline:link" / "inline:page"),
+ * but what the reader hid (offered.mjs) and a package's row that went while a card stood open, run(key) choosing one: filtered by `query`, one list; else
+ * 建议 and the groups. The block menu's 在下方新建 shows the same (block-menu/). `blocks`: in a block
+ * holding nothing but the "/…", whose type it would become — the blocks that match come before what
+ * goes in the text (/gs: 公式块, then 公式), as in text the best match comes first (公式, then 公式块).
+ */
+export function typeItems(those, run, query = "", { blocks = false } = {}) {
+  const keys = offered(those).filter(infoOf);
+  const rowOf = (key) => ({ ...infoOf(key), run: () => run(key) });
+  if (query) {
+    // Best match first, the menu's order within each (sort is stable).
+    const rank = (key, score) => (blocks && INLINE[key] ? 10 : 0) + score;
+    return keys.map((key) => [key, matchScore(key, query)]).filter(([, score]) => score !== null).sort((a, b) => rank(a[0], a[1]) - rank(b[0], b[1])).map(([key]) => rowOf(key));
+  }
+  const items = [];
+  const recent = recentTypes().filter((key) => keys.includes(key)).slice(0, 4);
+  if (recent.length > 0) items.push({ title: t("建议") }, ...recent.map(rowOf));
+  for (const { title, types } of SECTIONS) {
+    const shown = types().filter((key) => keys.includes(key));
+    if (shown.length > 0) items.push({ title }, ...shown.map(rowOf));
+  }
+  const inline = keys.filter((key) => INLINE[key]);
+  if (inline.length > 0) items.push({ title: t("内联") }, ...inline.map(rowOf));
+  return items;
+}
+
+/**
+ * convert(host, type, typed): the block, holding nothing but the "/…" typed (`typed`, a range of it),
+ * turned into the type (editor.mjs convertHost); insertBelow(host, type, typed): a new block of the
+ * type below the block, the typed "/…" taken away; inline.formula(host, typed), inline.link(host,
+ * typed) and inline.page(host, typed): a formula, a link or a page block where the "/…" was, its field
+ * open. composing():
+ * whether an input method is composing (editor.mjs). closed(host): the menu the "+" opened in `host`
+ * closed (its hint, 输入以筛选…, goes: typing/ updatePlaceholder).
+ */
+export function createSlashMenu({ convert, insertBelow, inline, composing = () => false, closed = () => {} }) {
+  const menu = createMenu();
+  let slash = null; // { host, at, char, quiet, missed }: the block, where the "/" is (a character offset), which
+
+  const caretOffset = (host) => {
+    const selection = getSelection();
+    return selection.rangeCount && selection.isCollapsed && host.contains(selection.anchorNode) ? rangeOffsets(host, selection.getRangeAt(0))[1] : null;
+  };
+
+  function rect(host) {
+    const selection = getSelection();
+    const caret = selection.rangeCount && host.contains(selection.anchorNode) ? caretRect(selection.getRangeAt(0)) : null;
+    const box = host.getBoundingClientRect();
+    return caret ? { left: caret.left - 4, top: caret.top, bottom: caret.bottom } : { left: box.left, top: box.top, bottom: box.bottom };
+  }
+
+  // The "/…" typed (`state`: where the menu opened), as a range of the block, or null when it is not
+  // there any more (deleted, or the caret before it). Opened by the handle's "+" (`char` null: no
+  // "/"), what is typed from where it opened, nothing at first.
+  function typedRange(state) {
+    const caret = caretOffset(state.host);
+    if (caret === null || caret < state.at || (state.char && caret === state.at)) return null;
+    const range = rangeAt(state.host, [state.at, caret]);
+    return !state.char || range.toString()[0] === state.char ? range : null;
+  }
+
+  // Whether a block can come of a "/" typed in it: what it turns into, or a block below it.
+  const takesBlocks = (host) => convertible(host) || can(host, "split");
+
+  // Whether the block holds nothing but the "/…": then a block chosen is what it turns into (a node's
+  // title never: what is chosen goes below it).
+  const alone = (host, typed) => !isFirstLine(host) && host.textContent.replace(/\s/g, "") === typed.toString().replace(/\s/g, "") && !host.querySelector("[data-ge-atom]");
+
+  // The rows for what follows the "/"; null closes the menu. While a Chinese input method composes
+  // pinyin there, it shows it with its syllables apart ("gs" as "g's" or "g s"): what is looked for is
+  // its letters, as Enter puts them in (the menu staying open for a second Enter to choose).
+  function rows() {
+    const state = slash;
+    const { host } = state;
+    const typed = typedRange(state);
+    if (!typed) return null;
+    const written = typed.toString().slice(state.char ? 1 : 0).replace(/ /g, " ");
+    const query = composing() ? written.replace(/['\s]/g, "") : written;
+    if (/^\s/.test(query) || /\s\s$/.test(query) || (query.length > 16 && !composing())) return null;
+    const empty = alone(host, typed);
+    const blocks = !takesBlocks(host) ? [] : empty ? typedTargets(host, true) : belowTargets(host);
+    const keys = [...blocks, ...(can(host, "links") ? Object.keys(INLINE).filter((key) => key !== "inline:formula" || takesFormula(host)) : [])];
+    const found = typeItems(keys, (key) => choose(state, key), query, { blocks: empty }); // the menu closes before a row runs
+    if (found.length > 0) {
+      slash.missed = null;
+      return found;
+    }
+    // Letters being composed are no text yet: what they turn into is looked for once they do, a
+    // package's name that its words do not spell in pinyin among it.
+    if (composing()) return found;
+    if (slash.quiet) return null; // "甲、乙": a comma, not a menu
+    slash.missed ??= query.length;
+    return query.length - slash.missed >= 3 ? null : found;
+  }
+
+  function open() {
+    const found = rows();
+    if (!found) {
+      slash = null;
+      return;
+    }
+    menu.open(found, rect(slash.host), {
+      label: t("插入块"),
+      empty: t("没有结果"),
+      width: 240,
+      height: Math.min(448, Math.round(innerHeight * 0.4)),
+      gap: 8,
+      onClose: () => {
+        const added = slash && !slash.char ? slash.host : null;
+        slash = null;
+        if (added) closed(added);
+      },
+    });
+  }
+
+  // The rows follow what is typed after the "/", and the menu its block.
+  function update() {
+    const found = slash?.host.isConnected ? rows() : null;
+    if (found) menu.update(found, rect(slash.host));
+    else menu.close();
+  }
+
+  // The typed "/…" goes, then: the block turns into the type (it held nothing else), a block of the
+  // type goes below it, or a formula or link goes where the "/" was.
+  function choose(state, key) {
+    const { host } = state;
+    const typed = typedRange(state);
+    menu.close();
+    if (!typed || !infoOf(key)) return; // (a package's row, its package gone while the menu stood)
+    rememberType(key);
+    // Opened by the "+" and nothing typed: the empty block's own type chosen changes nothing (no
+    // undo step that does nothing).
+    if (!state.char && typed.collapsed && typeOf(host) === key && alone(host, typed)) return;
+    if (key === "inline:formula") return inline.formula(host, typed);
+    if (key === "inline:link") return inline.link(host, typed);
+    if (key === "inline:page") return inline.page(host, typed);
+    if (alone(host, typed)) return convert(host, key, typed);
+    // At the block's end, the spaces typed before the "/" go with it (they were for the menu).
+    const [start, end] = rangeOffsets(host, typed);
+    const rest = document.createRange();
+    rest.selectNodeContents(host);
+    rest.setStart(typed.endContainer, typed.endOffset);
+    let from = start;
+    if (!rest.toString().trim()) while (from > 0 && /^\s$/.test(rangeAt(host, [from - 1, from]).toString())) from--;
+    insertBelow(host, key, from < start ? rangeAt(host, [from, end]) : typed);
+  }
+
+  return {
+    /**
+     * Text typed in `host`, `before` the caret: the menu opens when it ends with a "/" standing at the
+     * block's start, after a space, a whole in the text or a character no Latin word or address has
+     * ("and/or" and "https:/" open nothing; "、" anywhere), in a text block a block can be made from, or
+     * that takes links. `whole`: the block's text. Returns whether it opened.
+     */
+    typed(host, before, whole) {
+      const char = before.at(-1);
+      if (!SLASH.has(char) || !textFilters(host) || can(host, "plain") || !(takesBlocks(host) || can(host, "links"))) return false;
+      const caret = caretOffset(host);
+      if (caret === null) return false;
+      const previous = before.at(-2);
+      const word = previous !== undefined && !/\s/.test(previous) && /[\x21-\x7e]/.test(previous);
+      if (char !== "、" && word && !rangeAt(host, [caret - 2, caret - 1]).cloneContents().querySelector("[data-ge-atom]")) return false;
+      slash = { host, at: caret - 1, char, quiet: char === "、" && whole !== char, missed: null };
+      open();
+      return Boolean(slash);
+    },
+    /**
+     * The menu opened with no "/" typed, at the caret in `host` (an empty block the block handle's
+     * "+" made: notion-lite's openAddMenu): unfiltered, then filtered by what is typed from there, the
+     * rest as after a "/" (a block chosen is what the empty block turns into). Returns whether it opened.
+     */
+    add(host) {
+      const caret = caretOffset(host);
+      if (caret === null) return false;
+      slash = { host, at: caret, char: null, quiet: false, missed: null };
+      open();
+      return Boolean(slash);
+    },
+    /** The block the menu is open in, opened by the "+" (`add`), or null. */
+    get adding() { return slash && !slash.char && menu.isOpen ? slash.host : null; },
+    update,
+    close: () => menu.close(),
+    /**
+     * Keys while the menu is open, in its block (the caret's: a block a list item holds is edited in
+     * the item's element, which the keys go to, hostOf). Returns true when handled.
+     */
+    key(event) {
+      if (!menu.isOpen || hostOf(event) !== slash?.host || event.isComposing || event.keyCode === 229) return false;
+      if (!menu.arrow(event)) {
+        if ((event.key === "Enter" || event.key === "Tab") && menu.hasChoice) menu.choose();
+        else if (event.key === "Escape") menu.close();
+        else {
+          if (event.key === "Enter") menu.close();
+          return false;
+        }
+      }
+      event.preventDefault();
+      return true;
+    },
+    /** The block the menu is open for, or null. */
+    get host() { return slash?.host ?? null; },
+    contains: (node) => menu.contains(node),
+    get nodes() { return menu.nodes; },
+  };
+}

package/browser/editor/page/storage.mjs

@@ -0,0 +1,48 @@
+// What the editor keeps in the browser's storage: its crash buffer and tab (autosave.mjs, as strings),
+// the format brush, the colors, formulas and blocks used lately (JSON). Every call is safe where the
+// storage is not: a private window, blocked site data or a full quota store nothing and read nothing,
+// and the page works without (a list used lately is then kept for the page's life only).
+
+/** A storage area (`area()`: localStorage or sessionStorage) whose calls never throw. */
+export const storageOf = (area) => ({
+  get(key) { try { return area().getItem(key); } catch { return null; } },
+  set(key, value) { try { area().setItem(key, value); return true; } catch { return false; } },
+  remove(key) { try { area().removeItem(key); } catch {} },
+  keys() { try { return Object.keys(area()); } catch { return []; } },
+});
+
+/** localStorage, safe. */
+export const local = storageOf(() => localStorage);
+
+/** What `key` holds as JSON when `valid` says it is fit (by default: when there is something), else `fallback`. */
+export function stored(key, fallback, valid = (value) => value !== null) {
+  try {
+    const saved = JSON.parse(local.get(key) ?? "null");
+    if (valid(saved)) return saved;
+  } catch {}
+  return fallback;
+}
+
+/** `value` stored as JSON under `key`. */
+export const keep = (key, value) => local.set(key, JSON.stringify(value));
+
+/**
+ * A list of what was used lately, newest first, kept under `key`: { read(), use(entry) }. At most
+ * `max` entries, those `valid` says are fit (`fallback` when none are); an entry used again moves to
+ * the front (`same(a, b)`: whether two are one).
+ */
+export function recentList(key, { max, valid = () => true, same = (a, b) => a === b, fallback = [] }) {
+  let list = stored(key, [], Array.isArray);
+  const fits = (entry) => { try { return valid(entry); } catch { return false; } }; // an entry that is no object
+  const read = () => {
+    const fit = list.filter(fits).slice(0, max);
+    return fit.length > 0 ? fit : fallback;
+  };
+  return {
+    read,
+    use(entry) {
+      list = [entry, ...read().filter((other) => !same(other, entry))].slice(0, max);
+      keep(key, list);
+    },
+  };
+}