@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/typing/index.mjs

@@ -0,0 +1,282 @@
+import {
+  boxKind, can, emptyContainer, isEmpty, isFirstLine, isHost, limitText, mergeWithPrevious, nestedBlocks, nestedLists, nextLine, parentItem, previousLine, removalTarget, splitBlock, takeOut, textEnd, unitElement,
+} from "../core.mjs";
+import { atEdge, caretAt, hosts, select, textNear } from "../caret.mjs";
+import { convertible } from "../convert.mjs";
+import { joinCode } from "../marks.mjs";
+import { numberWithUnit, sideOf, WORD } from "../../../shared/inline-spacing.mjs";
+import { pageOf, pagesAround } from "../page-objects.mjs";
+import { BLOCK_TYPES, HOSTS, firstSaysOf, placeholderOf, textFilters, textTypeOf } from "../../components/registry.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// Typing in a block (docs/editor.md, "Browser side"): every key goes first to the component the block
+// is of and to what stands around it, nearest first (`asked`), as notion-lite's
+// `if (!ctx.def.keys?.enter?.(ctx)) splitBlock(...)`, and then to the rules of every block. Enter
+// splits it, Backspace and Delete at its edges merge it with the block before or after, or remove it
+// once empty, the caret going to the neighbouring block. Backspace in a container with nothing
+// written in it (`removedEmpty`) deletes the container. Chinese typed next to a Latin letter or
+// digit gets a space between them (autoSpace; not a number and its unit, nor in a block written without), and an empty block under the caret says what it takes
+// (placeholder). Plain typing and input methods stay with the browser; the keys are routed here by
+// editor.mjs.
+
+// Chinese next to Latin letters or digits gets a space between them as the reader types, where
+// there is none yet: only around the text just typed (not in code or formulas, nor in a tab name).
+// A number and the magnitude or measure word it goes with stay together (3.6亿, 5个, 2024年, 第3名,
+// 3万5千), and a block written without such spaces is typed in its own way (none added).
+const HAN = /[\u2e80-\u2eff\u2f00-\u2fdf\u3040-\u309f\u30a0-\u30fa\u30fc-\u30ff\u3100-\u312f\u3200-\u32ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff]/;
+const LATIN = /[A-Za-z0-9]/;
+const needsSpace = (a, b, before) => ((HAN.test(a) && LATIN.test(b)) || (LATIN.test(a) && HAN.test(b))) && !numberWithUnit(a, b, before);
+// The block's own way with Chinese beside Latin letters and digits, from its text but what was just
+// typed: true when it writes them together more often than apart (a number's unit is no sign either way).
+function writtenTogether(host, node, start, end) {
+  let text = "";
+  const walker = document.createTreeWalker(host, NodeFilter.SHOW_TEXT);
+  for (let each = walker.nextNode(); each; each = walker.nextNode()) {
+    if (each.parentElement?.closest("code, [data-ge-atom]")) continue;
+    text += each === node ? `${each.data.slice(0, start)}\n${each.data.slice(end)}` : each.data;
+  }
+  let close = 0;
+  let apart = 0;
+  for (let at = 1; at < text.length; at++) {
+    if (needsSpace(text[at - 1], text[at], text[at - 2])) close++;
+    else if (text[at] === " " && needsSpace(text[at - 1], text[at + 1] ?? "", text[at - 2])) apart++;
+  }
+  return close > apart;
+}
+
+/**
+ * struct(parents, touched, mutate): the editor's undoable structural change (history.mjs). say: the
+ * status line. keepText(unit): why a block may not go (block-info.mjs). paragraphBefore(host): an
+ * empty paragraph before the block, the caret staying (insert/). removeBlocks(units): the blocks
+ * deleted as the selected ones are (selection/delete.mjs). adding(): the block the "/" menu the
+ * handle's "+" opened is open in (slash-menu/), or null. leave: where Enter and Backspace leave a
+ * container (leave.mjs). showHidden(node): the folds hiding a block opened (fold/ showAround).
+ */
+export function createTyping({ struct, say, keepText, paragraphBefore, removeBlocks, selectBlock = () => {}, adding = () => null, leave, showHidden = () => {} }) {
+  // A key, asked of the component of the text block `host` and then of what stands around it, nearest
+  // first (docs/editor.md, "The order of keys"): whether it was theirs. `ctx` is notion-lite's, as
+  // much of it as a key reads, the block being an element here.
+  function asked(key, host, ...rest) {
+    const ctx = { host, enter: () => split(host) };
+    return Boolean(key(pageOf(host)?.keys ?? {})?.(ctx, ...rest) || pagesAround(host).some((page) => key(page.keys?.around ?? {})?.(ctx, ...rest)));
+  }
+
+  // Enter.
+  function split(host) {
+    // The caret at the very start of a block with text: an empty paragraph goes before the block and
+    // the caret stays (a block that splits does this itself, splitBlock). This comes first: in a code
+    // block too, whose own Enter breaks the line.
+    const own = HOSTS[host.getAttribute("data-ge-kind")]?.opensBefore; // not a cell, a card's field, the title
+    if (own && !can(host, "split") && !isEmpty(host) && atEdge(host, false) && paragraphBefore(host)) return;
+    // Its component's Enter (a code block's line, a nested item out a level, a title going into its
+    // content), that of what stands around it (a node's), then an empty block leaves its container
+    // (leave.mjs: an empty item of a top-level list or an empty quote paragraph becomes a paragraph, as
+    // in any editor, and so does the empty last paragraph of a panel), the rule of every block.
+    if (asked((keys) => keys.enter, host) || leave.enter(host)) return;
+    if (!can(host, "split")) {
+      say(limitText(host, "split"));
+      return;
+    }
+    const selection = getSelection();
+    if (!selection.rangeCount || !host.contains(selection.getRangeAt(0).startContainer)) return;
+    const range = selection.getRangeAt(0);
+    // After a list item holding blocks, the new item opens them: in its first list, or a new list
+    // put before the first block it holds (core.mjs placeAfterText).
+    const holds = nestedBlocks(host).length > 0;
+    const result = struct([host.parentNode, ...(holds ? [host] : []), ...nestedLists(host).slice(0, 1)], [host], () => {
+      const target = splitBlock(host, range);
+      const created = target === host ? host.previousElementSibling : target;
+      const list = created?.parentElement;
+      return { touched: [host, created], focus: target, created: holds && list?.parentElement === host && list.hasAttribute("data-ge-new") ? [list] : [] };
+    });
+    caretAt(result.focus, "start");
+  }
+
+  function merge(removed) {
+    const into = previousLine(removed);
+    if (!into) return false;
+    const joint = textEnd(into);
+    // A nested list the merge leaves empty goes from the item it hangs from.
+    // An item holding blocks takes them under the line it joins.
+    const parents = [...new Set([removed.parentNode, parentItem(removed), ...(nestedBlocks(removed).length > 0 ? [into, removed] : [])].filter(Boolean))];
+    let joined = false;
+    const result = struct(parents, [into, removed], () => {
+      if (!mergeWithPrevious(removed)) return null;
+      // Inline code meeting inline code at the join is one piece (marks.mjs joinCode), the caret at the join inside it.
+      const caret = document.createRange();
+      caret.setStart(into, joint);
+      select(caret);
+      joined = joinCode(into);
+      return { touched: [into], focus: into };
+    });
+    if (!result) return false;
+    if (joined) into.focus({ preventScroll: true });
+    else caretAt(into, "start", joint);
+    return true;
+  }
+
+  // An empty container deleted whole (one undo step, which selects it again); the caret at the end of
+  // the block before it, or at the start of the one after it when it was first (a formula block passed
+  // over: textNear).
+  function removeContainer(container) {
+    const list = hosts();
+    const inside = list.filter((node) => container.contains(node));
+    const before = textNear(inside[0], -1, list);
+    const after = textNear(inside.at(-1), 1, list);
+    removeBlocks([container]);
+    if (container.isConnected) return true; // refused: the reason is said
+    if (before?.isConnected) caretAt(before, "end");
+    else if (after?.isConnected) caretAt(after, "start");
+    return true;
+  }
+
+  // Delete a block with nothing left in it; the caret goes to the neighbouring block with text, a
+  // formula block passed over (textNear).
+  function removeHost(host, forward) {
+    if (!can(host, "remove")) {
+      say(limitText(host, "remove"));
+      return true;
+    }
+    const list = hosts();
+    const next = textNear(host, 1, list);
+    const previous = textNear(host, -1, list);
+    const [target, where] = forward
+      ? (next ? [next, "start"] : [previous, "end"])
+      : (previous ? [previous, "end"] : [next, "start"]);
+    const node = removalTarget(host);
+    const kept = keepText(node);
+    if (kept) {
+      say(kept, "note", 6000);
+      return true;
+    }
+    struct([node.parentNode], [host], () => {
+      takeOut(node);
+      return { touched: [], focus: target };
+    });
+    if (target) caretAt(target, where);
+    return true;
+  }
+
+  // A block on the line above or below that a folded heading hides (fold/: data-ge-folded on it or
+  // around it): its fold opens first, so a join never takes in words out of sight.
+  const opened = (line) => {
+    if (line?.closest?.("[data-ge-folded]")) showHidden(line);
+  };
+
+  // Backspace at the start of a block. Returns whether it was handled.
+  function backspace(host) {
+    opened(previousLine(host));
+    // The block's component (a list item's: a nested item moves out a level, the first or last item of
+    // a top-level list leaves it as body text, an emptied item holding lists stays), then what stands
+    // around it (the item a block stands under; a node, at the start of its first line, holding
+    // something: nothing but the caret moves). Before a container with nothing written in it goes: an
+    // empty item in one leaves its list first, one Backspace at a time.
+    if (asked((keys) => keys.backspace, host)) return true;
+    const container = emptyContainer(host);
+    if (container) return removeContainer(container);
+    if (leave.backspace(host)) return true;
+    if (isEmpty(host)) return removeHost(host, false);
+    if (merge(host)) return true;
+    // A block holding blocks that did not join the line above says why, as its component puts it.
+    const refused = nestedBlocks(host).length > 0 && isHost(previousLine(host)) ? pageOf(host)?.mergeRefused?.(host) : null;
+    if (refused) {
+      say(refused);
+      return true;
+    }
+    // The block above holds no text to join (a divider, a code block, a highlight block, a card…):
+    // Backspace selects it (Notion's), and Backspace again deletes it as a selected block.
+    const above = previousLine(host);
+    const unit = above && !isHost(above) ? unitElement(above) : null;
+    if (unit?.closest("main") && !unit.contains(host)) {
+      selectBlock(unit);
+      return true;
+    }
+    if (!can(host, "merge") && isHost(host.previousElementSibling)) say(limitText(host, "merge"));
+    return false;
+  }
+
+  // Delete at the end of a block. Returns whether it was handled.
+  function forwardDelete(host) {
+    opened(nextLine(host));
+    // Its component (an empty item holding blocks stays), then what stands around it (at the end of a
+    // node's last block nothing is taken in).
+    if (asked((keys) => keys.delete, host)) return true;
+    // A node's first line is never deleted (its first block is its title): the block after it joins it.
+    if (isEmpty(host) && !isFirstLine(host)) return removeHost(host, true);
+    // The block on the next line: the first item a list item holds, the block after it, or after
+    // the last item of a list the block after the list (joined to the item, as Backspace there does).
+    const next = nextLine(host);
+    if (isHost(next) && previousLine(next) === host && merge(next)) return true;
+    return nestedBlocks(host).length > 0; // the browser would delete the blocks after the text
+  }
+
+  function autoSpace(host, typed) {
+    if (!typed || !textFilters(host)) return;
+    const selection = getSelection();
+    if (!selection.rangeCount || !selection.isCollapsed) return;
+    const node = selection.anchorNode;
+    if (node?.nodeType !== 3 || !host.contains(node) || node.parentElement.closest("code, [data-ge-atom]")) return;
+    const end = selection.anchorOffset;
+    const start = end - typed.length;
+    if (start < 0 || node.data.slice(start, end) !== typed) return;
+    const atStart = start === 0;
+    const atEnd = end === node.length;
+    let caret = end;
+    const together = writtenTogether(host, node, start, end);
+    for (let at = Math.min(end, node.length - 1); at >= Math.max(1, start) && !together; at--) {
+      if (!needsSpace(node.data[at - 1], node.data[at], node.data[at - 2])) continue;
+      node.insertData(at, " ");
+      if (at < end) caret++;
+    }
+    // Words typed right beside inline code or a formula: a space between them (there is none yet,
+    // the text there being the typed text's own); punctuation takes none.
+    if (atStart && WORD.test(node.data[0]) && sideOf(node, false) === true) {
+      node.insertData(0, " ");
+      caret++;
+    }
+    if (atEnd && WORD.test(node.data.at(-1)) && sideOf(node, true) === true) node.appendData(" ");
+    if (node.data.slice(start, caret) === typed && caret === end) return;
+    const range = document.createRange();
+    range.setStart(node, caret);
+    range.collapse(true);
+    select(range);
+  }
+
+  // The empty block under the caret says what it takes; a block of a type that says `placeholder: false`
+  // says nothing (a list item: its marker says it already, and a hint beside a number or a checkbox only
+  // stood in the way); a first line that says what it is (`firstSays`) says that, turned into no other type.
+  // While the "/" menu the handle's "+" opened is open in it, nothing typed yet, it says 输入以筛选…
+  // (notion-lite's slash-menu.js, its add menu's hint) on Notion's gray of what the menu was opened
+  // with (its temporary input: data-ge-adding, editor.mjs); such a block says nothing then either.
+  let placeholder = null;
+  function updatePlaceholder(host) {
+    const own = host ? BLOCK_TYPES[textTypeOf(host)]?.placeholder : undefined;
+    const says = Boolean(host) && own !== false;
+    const add = says && isEmpty(host) && adding() === host;
+    const hint = !host || !isEmpty(host) ? null
+      : (add ? t("输入以筛选…") : null)
+          ?? placeholderOf(host)
+          ?? (isFirstLine(host) ? firstSaysOf(boxKind(host.parentElement)) : null)
+          ?? (convertible(host) && says ? own ?? t("输入 / 选择类型") : null);
+    if (placeholder && placeholder !== host) {
+      placeholder.removeAttribute("data-ge-placeholder");
+      placeholder.removeAttribute("data-ge-adding");
+    }
+    placeholder = hint ? host : null;
+    if (hint) host.setAttribute("data-ge-placeholder", hint);
+    else host?.removeAttribute("data-ge-placeholder");
+    host?.toggleAttribute("data-ge-adding", add);
+  }
+
+  return {
+    split, backspace, forwardDelete, autoSpace, updatePlaceholder,
+    /** Tab (`back`: Shift+Tab). Whether the key was taken. */
+    tab: (host, back) => asked((keys) => keys.tab, host, back),
+    /** Ctrl+Enter. Whether the key was taken. */
+    commandEnter: (host) => asked((keys) => keys.commandEnter, host),
+    /** Shift+Enter. Whether the key was taken (else a line break, the browser's). */
+    shiftEnter: (host) => asked((keys) => keys.shiftEnter, host),
+    /** Esc. Whether the key was taken (else it selects the block around the text). */
+    escape: (host) => asked((keys) => keys.escape, host),
+  };
+}

package/browser/editor/page/typing/leave.mjs

@@ -0,0 +1,68 @@
+import { blocksIn, boxKind, dropIfEmpty, isEmpty } from "../core.mjs";
+import { caretAt } from "../caret.mjs";
+import { begin, done } from "../made.mjs";
+import { BLOCK_TYPES, LEAVES_BY_ENTER, accepts } from "../../components/registry.mjs";
+
+// Where Enter and Backspace leave a block's container: one rule, driven by what the components
+// declare (notion-lite's, commands/enter.js and delete.js: a block of a `resettable` type left
+// empty, or the last empty block of a container whose body it is, goes out a level, else turns into
+// body text; Backspace at the start of such a block turns it into text). It comes after the keys of
+// the block's component and of what stands around it, which may have a way out of their own (a
+// nested list item out a level; the empty last block of a flowchart's node the first line of a new
+// node after it, the empty only line of its last node a paragraph after the flowchart).
+//   - The empty last block of a box that says `leaveByEnter` (a highlight block, the opening summary
+//     too) moves out after the box, which goes if nothing is left in it (`leaveBox`).
+//   - A block of a type that says `resettable` (a quote's paragraph, a list item) turns into a
+//     paragraph where it stands, its container splitting around it (convert.mjs).
+// Enter in a title that goes into its content (a disclosure, a card, a code block) is another rule
+// (their components').
+
+/**
+ * The empty last block of a box that says `leaveByEnter`, moved out after the box (the box goes if
+ * nothing is left in it). Returns { focus, created }, focus null when `host` is not such a block.
+ */
+export function leaveBox(host) {
+  begin();
+  const box = host.parentElement;
+  if (!LEAVES_BY_ENTER.has(boxKind(box)) || blocksIn(box).at(-1) !== host || !isEmpty(host)
+    || !accepts(boxKind(box.parentElement), "paragraph")) return done(null);
+  box.after(host);
+  dropIfEmpty(box);
+  return done(host);
+}
+
+/**
+ * Enter and Backspace on a block left empty or at its start, with what the editor gives it: struct
+ * and touchedBy (a structural undo step), convertHost, typeOf and targetsOf (convert.mjs).
+ */
+export function createLeaving({ struct, touchedBy, convertHost, typeOf, targetsOf }) {
+  // A block of a type that resets, which can be body text where it stands.
+  const resets = (host) => BLOCK_TYPES[typeOf(host)]?.resettable === true && targetsOf(host).includes("paragraph");
+
+  // Enter on an empty text block. True when it left its container or became text.
+  function enter(host) {
+    if (!isEmpty(host)) return false;
+    if (LEAVES_BY_ENTER.has(boxKind(host.parentElement))) {
+      const left = struct(touchedBy(host), [], () => {
+        const { focus, created } = leaveBox(host);
+        return focus ? { touched: [focus], focus, created } : null;
+      });
+      if (!left) return false;
+      caretAt(host, "start");
+      return true;
+    }
+    if (!resets(host)) return false;
+    convertHost(host, "paragraph");
+    return true;
+  }
+
+  // Backspace at the start of a block: the first block of its container, of a type that resets (a
+  // quote's first paragraph), turns into body text before the container. True when it did.
+  function backspace(host) {
+    if (!resets(host) || host.parentElement?.firstElementChild !== host) return false;
+    convertHost(host, "paragraph");
+    return true;
+  }
+
+  return { enter, backspace };
+}

package/browser/editor/page/ui.mjs

@@ -0,0 +1,160 @@
+import { DIALOG } from "../components/kit.mjs";
+import { TOKENS } from "./look.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+// Small DOM helpers for the editor's own UI (panels, cards, the formatting bar). Every node the
+// editor adds carries data-doc-dev, so the page's "export modified HTML" control drops it.
+
+export function element(tag, props = {}, ...children) {
+  const node = document.createElement(tag);
+  for (const [name, value] of Object.entries(props)) {
+    if (name === "text") node.textContent = value;
+    else if (name === "class") node.className = value;
+    else if (name === "html") node.innerHTML = value; // editor-owned markup only (icons)
+    else node.setAttribute(name, value);
+  }
+  node.append(...children);
+  return node;
+}
+
+const loads = new Map();
+
+/**
+ * A script the page was served without, loaded when the editor first needs it (a component made on
+ * a page that has none yet: the kit's tables or code script, KaTeX): a promise of whether `ready()`
+ * says it is there. One load per address; a failed one is forgotten, so the next call tries again.
+ * `before` runs once as the load starts (a stylesheet the script goes with).
+ */
+export function loadScript(src, ready, { before } = {}) {
+  if (ready()) return Promise.resolve(true);
+  if (!loads.has(src)) {
+    loads.set(src, new Promise((resolve) => {
+      before?.();
+      const script = element("script", { src, "data-doc-dev": "" });
+      script.addEventListener("load", () => resolve(Boolean(ready())));
+      script.addEventListener("error", () => {
+        script.remove();
+        loads.delete(src);
+        resolve(false);
+      });
+      document.head.append(script);
+    }));
+  }
+  return loads.get(src);
+}
+
+/** An address on the clipboard, and said so: called right in the click that asked, as a browser takes no write after a wait. */
+export function copyAddress(address, say) {
+  navigator.clipboard?.writeText(address).then(() => say(t("已复制链接。")), () => say(t("没能复制：浏览器不允许写剪贴板。"), "error"));
+}
+
+export function button(label, action, { primary = false, ...props } = {}) {
+  const node = element("button", { type: "button", ...(label ? { text: label } : {}), ...props });
+  if (primary) node.dataset.primary = "";
+  node.addEventListener("mousedown", (event) => event.preventDefault()); // keep the selection where it is
+  node.addEventListener("click", action);
+  return node;
+}
+
+// Editor UI lives in the top layer with an open modal dialog, otherwise it would be inert.
+export function layer() {
+  return document.querySelector(DIALOG.open) ?? document.body;
+}
+
+export function mount(node) {
+  node.dataset.docDev = "";
+  layer().append(node);
+  return node;
+}
+
+/**
+ * What a click did has changed what stands under the pointer: a double click's second press would
+ * land on that. A press that follows at the same spot within a double click's time does nothing,
+ * while `stands()` says that what it did is still there.
+ */
+export function swallowNext(click, stands = () => true) {
+  const types = ["pointerdown", "mousedown", "pointerup", "mouseup", "click", "dblclick"];
+  const near = (event) => Math.hypot(event.clientX - click.clientX, event.clientY - click.clientY) <= 6;
+  const swallow = (event) => {
+    if (!near(event) || !stands()) return done();
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    if (event.type === "dblclick") done();
+  };
+  const timer = setTimeout(done, 500);
+  function done() {
+    clearTimeout(timer);
+    for (const type of types) removeEventListener(type, swallow, true);
+  }
+  for (const type of types) addEventListener(type, swallow, true);
+}
+
+// Fades (as Notion's popups): the editor's cards fade in when they appear and their panels fade out
+// when they go; nothing moves for a reader who asks for reduced motion.
+const still = () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+
+/** Show `node` (`hidden` off), fading in over `ms`; a fade out under way stops. */
+export function fadeIn(node, ms = 120) {
+  for (const animation of node.getAnimations?.() ?? []) animation.cancel();
+  node.hidden = false;
+  if (!still()) node.animate?.([{ opacity: 0 }, { opacity: 1 }], { duration: ms, easing: "ease-out" });
+}
+
+/** Fade `node` out over `ms`, then hide it and call `done`; a fadeIn() meanwhile keeps it. */
+export function fadeOut(node, ms = 100, done = null) {
+  if (node.hidden) return;
+  const animation = still() ? null : node.animate?.([{ opacity: 1 }, { opacity: 0 }], { duration: ms, easing: "ease-in", fill: "forwards" });
+  const finish = () => {
+    animation?.cancel();
+    node.hidden = true;
+    done?.();
+  };
+  if (animation) animation.onfinish = finish;
+  else finish();
+}
+
+const styled = new WeakMap(); // document -> the style sheets put in it (their texts)
+/**
+ * A style sheet in `doc` (the page's, or the workbench's for an overlay there), once per text: a
+ * menu, a submenu or a crop window may ask for its sheet at every opening and the head still holds one.
+ * The first sheet a document gets is the palette (look.mjs) every sheet of the editor paints with.
+ */
+export function addStyleTo(doc, css) {
+  const done = styled.get(doc) ?? styled.set(doc, new Set()).get(doc);
+  if (!doc.head.querySelector("style[data-ge-palette]")) put(doc, TOKENS).setAttribute("data-ge-palette", ""); // the server's, when it served the page so (service.mjs)
+  if (done.has(css)) return;
+  done.add(css);
+  put(doc, css);
+}
+
+function put(doc, css) {
+  const style = doc.createElement("style");
+  style.textContent = css;
+  style.dataset.docDev = "";
+  doc.head.append(style);
+  return style;
+}
+
+/** A style sheet in the page, once (addStyleTo). */
+export const addStyle = (css) => addStyleTo(document, css);
+
+/**
+ * Where an overlay over the whole window goes (a picture viewed, an embed full screen): the
+ * workbench's document when the page is shown in one (its iframe, of the same origin), so the
+ * overlay covers the sidebar and top bar too, as notion-lite's covers its window; else the page's
+ * own. { doc, win }.
+ */
+export function overlayHost() {
+  try {
+    const parent = window.parent;
+    if (parent !== window && parent.document?.querySelector(".app")) return { doc: parent.document, win: parent };
+  } catch {} // another origin: the page's own
+  return { doc: document, win: window };
+}
+
+/** `node` over the whole window of `host` (overlayHost): the editor's layer on the page, the body of the workbench's document. */
+export function mountOver(host, node) {
+  if (host.doc === document) return mount(node);
+  node.dataset.docDev = "";
+  host.doc.body.append(node);
+  return node;
+}