@seamlet/astro 0.11.2 → 0.12.0

package/dist/bridge.js

@@ -18,7 +18,7 @@ import {
   shortcutOf,
   toggleList,
   toggleMark
-} from "./chunk-2E7VDSUK.js";
+} from "./chunk-MW3BE5O6.js";
 import {
   FIELD_PATH_ATTRIBUTE,
   REVEALED_ATTRIBUTE,
@@ -26,8 +26,9 @@ import {
   REVEAL_EVENT,
   asOneParagraph,
   readRichText,
-  resolveFieldPath
-} from "./chunk-DRDPKFHZ.js";
+  resolveFieldPath,
+  safeHref
+} from "./chunk-7GYJS7ZT.js";
 
 // src/bridge/typed-fields.ts
 function typedKindAt(schema, path) {
@@ -55,6 +56,51 @@ function typedKindAt(schema, path) {
   }
 }
 
+// src/bridge/event-listening.ts
+function onElement(element, type, listener) {
+  return {
+    target: element,
+    type,
+    listener,
+    isCapturing: false
+  };
+}
+function onDocument(document2, type, listener) {
+  return {
+    target: document2,
+    type,
+    listener,
+    isCapturing: true
+  };
+}
+function onWindow(view, type, listener) {
+  if (view === null) return [];
+  return [
+    {
+      target: view,
+      type,
+      listener,
+      isCapturing: false
+    }
+  ];
+}
+function listenToAll(listenings) {
+  for (const { target, type, listener, isCapturing } of listenings) {
+    target.addEventListener(type, listener, isCapturing);
+  }
+  return () => {
+    for (const { target, type, listener, isCapturing } of listenings) {
+      target.removeEventListener(type, listener, isCapturing);
+    }
+  };
+}
+
+// src/bridge/dom-nodes.ts
+function asElement(value) {
+  const isElement = typeof value === "object" && value !== null && "nodeType" in value && value.nodeType === Node.ELEMENT_NODE;
+  return isElement ? value : void 0;
+}
+
 // src/bridge/page-markers.ts
 var MARKER_SELECTOR = `[${FIELD_PATH_ATTRIBUTE}]`;
 var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
@@ -100,15 +146,13 @@ function findClosestMarkedElement(document2, path) {
 function isHtmlElement(value) {
   return asElement(value)?.namespaceURI === HTML_NAMESPACE;
 }
-function asElement(value) {
-  const isElement2 = typeof value === "object" && value !== null && "nodeType" in value && value.nodeType === Node.ELEMENT_NODE;
-  return isElement2 ? value : void 0;
-}
 
 // src/bridge/page-reveals.ts
 var DETAILS_SELECTOR = "details";
 var REVEAL_SELECTOR = `[${REVEAL_ATTRIBUTE}]`;
 var SWITCH_SELECTOR = 'input[type="radio"], input[type="checkbox"]';
+var MARKER_SELECTOR2 = `[${FIELD_PATH_ATTRIBUTE}]`;
+var KEY_SEPARATOR = "\n";
 function revealAround(element) {
   for (let part = element; part !== null; ) {
     if (isDetails(part)) part.open = true;
@@ -116,70 +160,77 @@ function revealAround(element) {
     part = part.parentElement;
   }
 }
-function toggleDetailsAt(target, isOnField) {
+function revealPartAt(target) {
   const details = detailsOfSummaryAround(target);
-  if (details === void 0) return;
-  if (!details.open) {
-    details.open = true;
-    return;
-  }
-  if (!isOnField) details.open = false;
+  if (details !== void 0) details.open = true;
+  const control = switchAround(target);
+  const isUncheckedRadio = control?.type === "radio" && !control.checked;
+  if (control !== void 0 && isUncheckedRadio) checkSwitch(control, true);
 }
-function flipSwitchAt(target, isOnField) {
+function togglePartAt(target) {
+  const details = detailsOfSummaryAround(target);
+  if (details !== void 0) details.open = !details.open;
   const control = switchAround(target);
   if (control === void 0) return;
   const isRadio = control.type === "radio";
-  const isFlipped = isRadio ? !control.checked : !isOnField;
-  if (!isFlipped) return;
-  control.checked = isRadio || !control.checked;
-  announceSwitch(control);
+  if (isRadio && control.checked) return;
+  checkSwitch(control, isRadio || !control.checked);
 }
 function revealedPartsOf(document2) {
   const details = [...document2.querySelectorAll(DETAILS_SELECTOR)];
   const parts = [...document2.querySelectorAll(REVEAL_SELECTOR)];
   const switches = [...document2.querySelectorAll(SWITCH_SELECTOR)];
   return {
-    openDetails: indexesWhere(details, (part) => isDetails(part) && part.open),
-    revealed: indexesWhere(
-      parts,
-      (part) => part.hasAttribute(REVEALED_ATTRIBUTE)
-    ),
-    flippedSwitches: indexesWhere(
+    openDetails: keysWhere(details, (part) => isDetails(part) && part.open),
+    revealed: keysWhere(parts, (part) => part.hasAttribute(REVEALED_ATTRIBUTE)),
+    flippedSwitches: keysWhere(
       switches,
       (control) => isSwitch(control) && control.checked !== control.defaultChecked
     )
   };
 }
 function restoreRevealedParts(document2, revealed) {
-  const details = [...document2.querySelectorAll(DETAILS_SELECTOR)];
-  const parts = [...document2.querySelectorAll(REVEAL_SELECTOR)];
-  for (const index of revealed.openDetails) {
-    const part = details[index];
-    if (part !== void 0 && isDetails(part)) part.open = true;
+  const details = partsWithKeys(
+    document2,
+    DETAILS_SELECTOR,
+    revealed.openDetails
+  );
+  const parts = partsWithKeys(document2, REVEAL_SELECTOR, revealed.revealed);
+  for (const part of details) {
+    if (isDetails(part)) part.open = true;
   }
-  for (const index of revealed.revealed) {
-    const part = parts[index];
-    if (part !== void 0) reveal(part);
+  for (const part of parts) reveal(part);
+  const switches = partsWithKeys(
+    document2,
+    SWITCH_SELECTOR,
+    revealed.flippedSwitches
+  );
+  for (const control of switches) {
+    if (isSwitch(control)) flipFromDefault(control);
   }
-  restoreSwitches(document2, revealed.flippedSwitches);
 }
-function restoreSwitches(document2, flipped) {
-  const switches = [...document2.querySelectorAll(SWITCH_SELECTOR)];
-  for (const index of flipped) {
-    const control = switches[index];
-    if (control === void 0 || !isSwitch(control)) continue;
-    control.checked = !control.defaultChecked;
-    announceSwitch(control);
-  }
+function flipFromDefault(control) {
+  checkSwitch(control, !control.defaultChecked);
+}
+function checkSwitch(control, isChecked) {
+  control.checked = isChecked;
+  announceSwitch(control);
+}
+function partsWithKeys(document2, selector, keys) {
+  const wanted = new Set(keys);
+  const parts = [...document2.querySelectorAll(selector)];
+  const partKeys = partKeysOf(parts);
+  return parts.filter((_, index) => wanted.has(partKeys[index] ?? ""));
 }
 function announceSwitch(control) {
   control.dispatchEvent(new Event("input", { bubbles: true }));
   control.dispatchEvent(new Event("change", { bubbles: true }));
 }
 function switchAround(target) {
-  if (!isElement(target)) return void 0;
-  const label = target.closest("label");
-  const control = isLabel(label) ? label.control : target;
+  const element = asElement(target);
+  if (element === void 0) return void 0;
+  const label = element.closest("label");
+  const control = isLabel(label) ? label.control : element;
   return control !== null && isSwitch(control) ? control : void 0;
 }
 function reveal(part) {
@@ -188,16 +239,29 @@ function reveal(part) {
   part.dispatchEvent(new CustomEvent(REVEAL_EVENT, { bubbles: true }));
 }
 function detailsOfSummaryAround(target) {
-  const summary = isElement(target) ? target.closest("summary") : null;
+  const summary = asElement(target)?.closest("summary");
   const details = summary?.parentElement;
   const isSummaryOfDetails = details !== null && details !== void 0 && isDetails(details);
   return isSummaryOfDetails ? details : void 0;
 }
-function indexesWhere(elements, isPicked) {
+function keysWhere(elements, isPicked) {
+  const keys = partKeysOf(elements);
   return elements.flatMap(
-    (element, index) => isPicked(element) ? [index] : []
+    (element, index) => isPicked(element) ? [keys[index] ?? ""] : []
   );
 }
+function partKeysOf(parts) {
+  const names = parts.map(partNameOf);
+  return names.map((name, index) => {
+    const place = names.slice(0, index).filter((each) => each === name).length;
+    return `${name}${KEY_SEPARATOR}${String(place)}`;
+  });
+}
+function partNameOf(part) {
+  if (part.id !== "") return `#${part.id}`;
+  const marked = part.closest(MARKER_SELECTOR2) ?? part.querySelector(MARKER_SELECTOR2);
+  return marked?.getAttribute(FIELD_PATH_ATTRIBUTE) ?? "";
+}
 function isDetails(element) {
   return element.localName === "details";
 }
@@ -207,43 +271,70 @@ function isLabel(element) {
 function isSwitch(element) {
   return element.matches(SWITCH_SELECTOR);
 }
-function isElement(value) {
-  return value !== null && "nodeType" in value && value.nodeType === Node.ELEMENT_NODE;
-}
 
 // src/bridge/page-events.ts
 var DRAG_GONE_AFTER_MS = 150;
 function listenToPage(document2, listeners) {
-  const view = document2.defaultView;
-  const hover = (event) => {
-    const link = linkToFollow(event.target);
-    listeners.onHover(
-      link === void 0 ? markedElementAround(event.target)?.path : void 0
-    );
-    listeners.onLinkHover(link);
-  };
+  const fileDrags = followFileDrags(listeners);
+  const { onLayoutChange } = listeners;
   const leave = () => {
     listeners.onHover(void 0);
     listeners.onLinkHover(void 0);
   };
-  const click = (event) => {
-    event.preventDefault();
-    const link = linkToFollow(event.target);
-    if (link !== void 0) {
-      listeners.onLinkClick(link);
-      return;
-    }
-    const marked = markedElementAround(event.target);
-    const isOnField = marked !== void 0;
-    toggleDetailsAt(event.target, isOnField);
-    flipSwitchAt(event.target, isOnField);
-    listeners.onClick(
-      marked === void 0 ? void 0 : { ...marked, point: { x: event.clientX, y: event.clientY } }
-    );
-  };
-  const preventDefault = (event) => {
-    event.preventDefault();
+  const stopListening = listenToAll([
+    onDocument(document2, "mouseover", (event) => {
+      hover(event, listeners);
+    }),
+    onDocument(document2, "click", (event) => {
+      click(event, listeners);
+    }),
+    onDocument(document2, "auxclick", preventDefault),
+    onDocument(document2, "submit", preventDefault),
+    onDocument(document2, "dragstart", preventDefault),
+    onDocument(document2, "keydown", listeners.onKeyDown),
+    ...fileDrags.listenings(document2),
+    onDocument(document2, "scroll", onLayoutChange),
+    // An opened or closed `<details>` moves what is below it; toggle does not bubble.
+    onDocument(document2, "toggle", onLayoutChange),
+    // A flipped switch shows and hides parts of the page.
+    onDocument(document2, "change", onLayoutChange),
+    // Images load after the page is shown and move what is below them; load does not bubble.
+    onDocument(document2, "load", onLayoutChange),
+    onElement(document2.documentElement, "mouseleave", leave),
+    ...onWindow(document2.defaultView, "resize", onLayoutChange)
+  ]);
+  return () => {
+    fileDrags.stop();
+    stopListening();
   };
+}
+function hover(event, listeners) {
+  const link = linkToFollow(event.target);
+  const path = link === void 0 ? markedElementAround(event.target)?.path : void 0;
+  listeners.onHover(path);
+  listeners.onLinkHover(link);
+}
+function click(event, listeners) {
+  event.preventDefault();
+  const link = linkToFollow(event.target);
+  if (link !== void 0) {
+    listeners.onLinkClick(link);
+    return;
+  }
+  const marked = markedElementAround(event.target);
+  if (marked === void 0) {
+    togglePartAt(event.target);
+    listeners.onClick(void 0);
+    return;
+  }
+  revealPartAt(event.target);
+  const point = { x: event.clientX, y: event.clientY };
+  listeners.onClick({ ...marked, point });
+}
+function preventDefault(event) {
+  event.preventDefault();
+}
+function followFileDrags(listeners) {
   let dragGoneTimer;
   const dragFile = (event) => {
     if (!carriesFiles(event)) return;
@@ -270,36 +361,15 @@ function listenToPage(document2, listeners) {
     clearTimeout(dragGoneTimer);
     dragGoneTimer = setTimeout(listeners.onFileDragEnd, DRAG_GONE_AFTER_MS);
   };
-  const documentListeners = [
-    ["mouseover", hover],
-    ["click", click],
-    ["auxclick", preventDefault],
-    ["submit", preventDefault],
-    ["dragstart", preventDefault],
-    ["keydown", listeners.onKeyDown],
-    ["dragover", dragFile],
-    ["drop", dropFile],
-    ["dragleave", leaveWithFile],
-    ["scroll", listeners.onLayoutChange],
-    // An opened or closed `<details>` moves what is below it; toggle does not bubble.
-    ["toggle", listeners.onLayoutChange],
-    // A flipped switch shows and hides parts of the page.
-    ["change", listeners.onLayoutChange],
-    // Images load after the page is shown and move what is below them; load does not bubble.
-    ["load", listeners.onLayoutChange]
-  ];
-  for (const [type, listener] of documentListeners) {
-    document2.addEventListener(type, listener, true);
-  }
-  document2.documentElement.addEventListener("mouseleave", leave);
-  view?.addEventListener("resize", listeners.onLayoutChange);
-  return () => {
-    clearTimeout(dragGoneTimer);
-    for (const [type, listener] of documentListeners) {
-      document2.removeEventListener(type, listener, true);
+  return {
+    listenings: (document2) => [
+      onDocument(document2, "dragover", dragFile),
+      onDocument(document2, "drop", dropFile),
+      onDocument(document2, "dragleave", leaveWithFile)
+    ],
+    stop: () => {
+      clearTimeout(dragGoneTimer);
     }
-    document2.documentElement.removeEventListener("mouseleave", leave);
-    view?.removeEventListener("resize", listeners.onLayoutChange);
   };
 }
 function linkToFollow(target) {
@@ -337,13 +407,16 @@ function measureLayout(document2, link) {
     }
   );
   const root = document2.documentElement;
-  const linkBox = link === void 0 ? void 0 : boxOf(link.element);
   return {
     markers,
     viewport: { width: root.clientWidth, height: root.clientHeight },
-    link: link === void 0 || linkBox === void 0 ? void 0 : { href: link.href, box: linkBox }
+    link: link === void 0 ? void 0 : linkBoxOf(link)
   };
 }
+function linkBoxOf(link) {
+  const box = boxOf(link.element);
+  return box === void 0 ? void 0 : { href: link.href, box };
+}
 function createLayoutReports(document2, report) {
   const view = document2.defaultView;
   let link;
@@ -372,30 +445,77 @@ function createLayoutReports(document2, report) {
   };
 }
 
+// src/bridge/page-presses.ts
+function followPresses(document2, onRelease) {
+  const view = document2.defaultView;
+  let isPressed = false;
+  let releaseTimer;
+  const press = () => {
+    clearTimeout(releaseTimer);
+    isPressed = true;
+  };
+  const release = () => {
+    if (!isPressed) return;
+    isPressed = false;
+    releaseTimer = setTimeout(onRelease, 0);
+  };
+  const releaseOnMove = (event) => {
+    if (event.buttons === 0) release();
+  };
+  const stopListening = listenToAll([
+    onDocument(document2, "pointerdown", press),
+    onDocument(document2, "pointerup", release),
+    onDocument(document2, "pointercancel", release),
+    onDocument(document2, "pointermove", releaseOnMove),
+    ...onWindow(view, "blur", release)
+  ]);
+  return {
+    isPressed: () => isPressed,
+    stop: () => {
+      clearTimeout(releaseTimer);
+      stopListening();
+    }
+  };
+}
+
 // src/bridge/page-rendering.ts
 function createPageRenderer(options) {
   let request;
-  const render2 = (content) => {
+  let heldPage;
+  const show = (html) => {
+    const isPageBusy = options.isPagePressed() || !options.canReplacePage();
+    if (isPageBusy) {
+      heldPage = html;
+      return;
+    }
+    replacePageBody(options.document, html);
+    options.onRendered();
+  };
+  const render = (content) => {
     request?.abort();
+    heldPage = void 0;
     const currentRequest = new AbortController();
     request = currentRequest;
     fetchRenderedPage(
       pageAddress(options.document),
       content,
       currentRequest.signal
-    ).then((html) => {
-      if (!options.canReplacePage()) return;
-      replacePageBody(options.document, html);
-      options.onRendered();
-    }).catch((error) => {
+    ).then(show).catch((error) => {
       if (currentRequest.signal.aborted) return;
       options.onFailed(error);
     });
   };
+  const showHeldPage = () => {
+    const html = heldPage;
+    heldPage = void 0;
+    if (html !== void 0) show(html);
+  };
   return {
-    render: render2,
+    render,
+    showHeldPage,
     stop: () => {
       request?.abort();
+      heldPage = void 0;
     }
   };
 }
@@ -427,12 +547,14 @@ function replacePageBody(document2, html) {
 }
 
 // src/bridge/editable-elements.ts
+var EDITABLE_AS_PLAIN_TEXT = "plaintext-only";
+var EDITABLE_AS_RICH_TEXT = "true";
 var OUTLINE = "outline";
 var NO_OUTLINE = "none";
 var IMPORTANT = "important";
 var keptOutlines = /* @__PURE__ */ new WeakMap();
-function makeEditable(element, editable) {
-  element.setAttribute("contenteditable", editable);
+function makeEditable(element, editableAs) {
+  element.setAttribute("contenteditable", editableAs);
   if (keptOutlines.has(element)) return;
   const { style } = element;
   keptOutlines.set(element, {
@@ -514,45 +636,56 @@ function whiteSpaceOf(element) {
   return view === null ? "normal" : view.getComputedStyle(element).whiteSpace;
 }
 
-// src/bridge/inline-text-editing.ts
-var EDITABLE_AS_PLAIN_TEXT = "plaintext-only";
-function startInlineTextEditing(element, options) {
-  const reportInput = () => {
-    options.onInput(readElementText(element));
-  };
+// src/bridge/typing-sessions.ts
+function startTypingSession(element, options) {
   const endOnKey = (event) => {
-    const isEnd = event.key === "Enter" && options.isSingleLine;
-    if (event.key === "Escape") {
-      event.preventDefault();
-      end("reverted");
-    } else if (isEnd) {
-      event.preventDefault();
-      end("kept");
-    }
-  };
-  const endOnBlur = () => {
-    end("kept");
-  };
-  const stop = () => {
-    element.removeEventListener("input", reportInput);
-    element.removeEventListener("keydown", endOnKey);
-    element.removeEventListener("blur", endOnBlur);
-    makeUneditable(element);
+    const outcome = outcomeOfKey(event, options.isEndingKey);
+    if (outcome === void 0) return;
+    event.preventDefault();
+    end(outcome);
   };
   let hasEnded = false;
   const end = (outcome) => {
     if (hasEnded) return;
     hasEnded = true;
-    stop();
+    stopListening();
+    options.onStop();
+    makeUneditable(element);
     options.onEnd(outcome);
   };
-  makeEditable(element, EDITABLE_AS_PLAIN_TEXT);
-  element.addEventListener("input", reportInput);
-  element.addEventListener("keydown", endOnKey);
-  element.addEventListener("blur", endOnBlur);
+  makeEditable(element, options.editableAs);
+  const stopListening = listenToAll([
+    onElement(element, "keydown", endOnKey),
+    ...options.listeners
+  ]);
   element.focus();
+  return { end };
+}
+function outcomeOfKey(event, isEndingKey) {
+  if (event.key === "Escape") return "reverted";
+  return isEndingKey(event) ? "kept" : void 0;
+}
+
+// src/bridge/inline-text-editing.ts
+function startInlineTextEditing(element, options) {
+  const reportInput = () => {
+    options.onInput(readElementText(element));
+  };
+  const endOnBlur = () => {
+    session.end("kept");
+  };
+  const session = startTypingSession(element, {
+    editableAs: EDITABLE_AS_PLAIN_TEXT,
+    isEndingKey: (event) => event.key === "Enter" && options.isSingleLine,
+    listeners: [
+      onElement(element, "input", reportInput),
+      onElement(element, "blur", endOnBlur)
+    ],
+    onStop: () => void 0,
+    onEnd: options.onEnd
+  });
   return () => {
-    end("kept");
+    session.end("kept");
   };
 }
 function placeCaretAt(element, point) {
@@ -582,145 +715,47 @@ function caretRangeAt(document2, point) {
   return lookup.caretRangeFromPoint?.(point.x, point.y) ?? void 0;
 }
 
-// src/bridge/rich-text-editing.ts
-var EDITABLE_AS_RICH_TEXT = "true";
-var PASTED_LINE_BREAKS = /\s*\n\s*/gu;
-var SPACE = " ";
-function canEditRichTextInPlace(element, value, isInline) {
-  if (hasMarkedDescendants(element)) return false;
-  const normalized = readRichText(value) ?? [];
-  const expected = isInline ? asOneParagraph(normalized) : normalized;
-  const shown = readTextOf(element, isInline);
-  return JSON.stringify(shown) === JSON.stringify(expected);
-}
-function startRichTextEditing(element, options) {
+// src/bridge/typed-selections.ts
+function createSelectionReports(element, readText, onSelect) {
   const document2 = element.ownerDocument;
   const view = document2.defaultView;
   let lastSelection;
   let reportFrame;
-  let blurTimer;
-  const readText = () => readTextOf(element, options.isInline);
   const liveSelection = () => isSelectionIn(element) ? readSelectionFrom(element) : void 0;
-  const reportSelection = () => {
+  const report = () => {
     reportFrame = void 0;
-    options.onSelect(measureSelection(element, readText(), lastSelection));
+    onSelect(measureSelection(element, readText(), lastSelection));
   };
-  const scheduleReport = () => {
+  const schedule = () => {
     if (reportFrame !== void 0) return;
-    reportFrame = view?.requestAnimationFrame(reportSelection);
+    reportFrame = view?.requestAnimationFrame(report);
   };
-  const followSelection = () => {
+  const follow = () => {
     const selection = document2.hasFocus() ? liveSelection() : void 0;
     if (selection === void 0) return;
     lastSelection = selection;
-    scheduleReport();
+    schedule();
   };
-  const reportInput = () => {
-    options.onInput(readText());
-    followSelection();
-  };
-  const change = (changed, selection) => {
-    render(element, changed, options.isInline);
+  const keep = (selection) => {
     lastSelection = selection;
     if (document2.hasFocus()) selectIn(element, selection);
-    options.onInput(changed);
-    scheduleReport();
-  };
-  const format = (requested) => {
-    const selection = liveSelection() ?? lastSelection;
-    const isListInLine = requested === "list" && options.isInline;
-    if (selection === void 0 || isListInLine) return;
-    const current = readText();
-    const changed = requested === "list" ? toggleList(current, selection) : toggleMark(current, selection, requested);
-    change(changed, selection);
+    schedule();
   };
-  const linkTo = (href) => {
-    const selection = lastSelection;
-    if (selection === void 0) return;
-    const current = readText();
-    const target = isCollapsed(selection) ? linkSelectionAt(current, selection.start) : selection;
-    if (target === void 0) return;
-    change(setLink(current, target, href), selection);
-  };
-  const pressKey = (event) => {
-    const isEnd = event.key === "Enter" && options.isInline && !event.shiftKey;
-    const shortcut = formatShortcutOf(event);
-    if (event.key === "Escape") {
-      event.preventDefault();
-      end("reverted");
-    } else if (isEnd) {
-      event.preventDefault();
-      end("kept");
-    } else if (shortcut !== void 0) {
-      event.preventDefault();
-      if (shortcut !== "none") format(shortcut);
-    }
-  };
-  const pastePlainText = (event) => {
-    event.preventDefault();
-    const pasted = event.clipboardData?.getData("text/plain") ?? "";
-    const words = options.isInline ? pasted.replace(PASTED_LINE_BREAKS, SPACE) : pasted;
-    insertPlainText(element, words);
-    reportInput();
-  };
-  const refuseDrop = (event) => {
-    event.preventDefault();
-  };
-  const endOnBlur = () => {
-    clearTimeout(blurTimer);
-    blurTimer = setTimeout(() => {
-      const isFocusOnPage = document2.hasFocus();
-      const isFocusInText = document2.activeElement === element;
-      if (isFocusOnPage && !isFocusInText) end("kept");
-    });
-  };
-  const stopListening = () => {
-    clearTimeout(blurTimer);
-    if (reportFrame !== void 0) view?.cancelAnimationFrame(reportFrame);
-    element.removeEventListener("input", reportInput);
-    element.removeEventListener("keydown", pressKey);
-    element.removeEventListener("paste", pastePlainText);
-    element.removeEventListener("drop", refuseDrop);
-    element.removeEventListener("blur", endOnBlur);
-    document2.removeEventListener("selectionchange", followSelection);
-    document2.removeEventListener("scroll", scheduleReport, true);
-    view?.removeEventListener("resize", scheduleReport);
-    makeUneditable(element);
-  };
-  let hasEnded = false;
-  const end = (outcome) => {
-    if (hasEnded) return;
-    hasEnded = true;
-    stopListening();
-    options.onSelect(void 0);
-    options.onEnd(outcome);
-  };
-  makeEditable(element, EDITABLE_AS_RICH_TEXT);
-  element.addEventListener("input", reportInput);
-  element.addEventListener("keydown", pressKey);
-  element.addEventListener("paste", pastePlainText);
-  element.addEventListener("drop", refuseDrop);
-  element.addEventListener("blur", endOnBlur);
-  document2.addEventListener("selectionchange", followSelection);
-  document2.addEventListener("scroll", scheduleReport, true);
-  view?.addEventListener("resize", scheduleReport);
-  element.focus();
   return {
-    format,
-    setLink: linkTo,
+    listeners: [
+      onDocument(document2, "selectionchange", follow),
+      onDocument(document2, "scroll", schedule),
+      ...onWindow(view, "resize", schedule)
+    ],
+    current: () => liveSelection() ?? lastSelection,
+    last: () => lastSelection,
+    follow,
+    keep,
     stop: () => {
-      end("kept");
+      if (reportFrame !== void 0) view?.cancelAnimationFrame(reportFrame);
     }
   };
 }
-function readTextOf(element, isInline) {
-  const read = readRichTextFrom(element);
-  return isInline ? asOneParagraph(read) : read;
-}
-function render(element, text, isInline) {
-  if (isInline) renderInlineRichText(element, text);
-  else renderRichText(element, text);
-}
 function measureSelection(element, text, selection) {
   if (selection === void 0) return void 0;
   const range = isSelectionIn(element) ? element.ownerDocument.getSelection()?.getRangeAt(0) : rangeOf(element, selection);
@@ -734,7 +769,8 @@ function measureSelection(element, text, selection) {
 }
 function boxOfRange(range) {
   const whole = range.getBoundingClientRect();
-  const rectangle = whole.width > 0 || whole.height > 0 ? whole : range.getClientRects()[0];
+  const hasOwnBox = whole.width > 0 || whole.height > 0;
+  const rectangle = hasOwnBox ? whole : range.getClientRects()[0];
   if (rectangle === void 0) return void 0;
   const isShown = rectangle.width > 0 || rectangle.height > 0;
   if (!isShown) return void 0;
@@ -751,6 +787,118 @@ function isSelectionIn(element) {
   const hasRange = (selection?.rangeCount ?? 0) > 0;
   return hasRange && anchor !== null && element.contains(anchor);
 }
+
+// src/bridge/rich-text-editing.ts
+function canEditRichTextInPlace(element, value, layout) {
+  if (hasMarkedDescendants(element)) return false;
+  const normalized = readRichText(value) ?? [];
+  const expected = layout.shapeOf(normalized);
+  const shown = layout.read(element);
+  return JSON.stringify(shown) === JSON.stringify(expected);
+}
+function startRichTextEditing(element, options) {
+  const { layout } = options;
+  const readText = () => layout.read(element);
+  const selections = createSelectionReports(
+    element,
+    readText,
+    options.onSelect
+  );
+  const reportInput = () => {
+    options.onInput(readText());
+    selections.follow();
+  };
+  const change = (changed, selection) => {
+    layout.render(element, changed);
+    selections.keep(selection);
+    options.onInput(changed);
+  };
+  const format = (requested) => {
+    const selection = selections.current();
+    const isRefusedList = requested === "list" && !layout.canHoldLists;
+    if (selection === void 0 || isRefusedList) return;
+    change(formatted(readText(), selection, requested), selection);
+  };
+  const linkTo = (href) => {
+    const selection = selections.last();
+    const isUnsafe = href !== void 0 && safeHref(href) === void 0;
+    if (selection === void 0 || isUnsafe) return;
+    const current = readText();
+    const target = isCollapsed(selection) ? linkSelectionAt(current, selection.start) : selection;
+    if (target === void 0) return;
+    change(setLink(current, target, href), selection);
+  };
+  const blurs = endWhenFocusMovesOnPage(element, () => {
+    session.end("kept");
+  });
+  const session = startTypingSession(element, {
+    editableAs: EDITABLE_AS_RICH_TEXT,
+    isEndingKey: layout.isEndingKey,
+    listeners: [
+      onElement(element, "input", reportInput),
+      onElement(element, "keydown", (event) => {
+        formatOnShortcut(event, format);
+      }),
+      onElement(element, "paste", (event) => {
+        pastePlainText(event, element, layout);
+        reportInput();
+      }),
+      onElement(element, "drop", refuseDrop),
+      onElement(element, "blur", blurs.listener),
+      ...selections.listeners
+    ],
+    onStop: () => {
+      blurs.stop();
+      selections.stop();
+    },
+    onEnd: (outcome) => {
+      options.onSelect(void 0);
+      options.onEnd(outcome);
+    }
+  });
+  return {
+    format,
+    setLink: linkTo,
+    stop: () => {
+      session.end("kept");
+    }
+  };
+}
+function formatted(text, selection, format) {
+  return format === "list" ? toggleList(text, selection) : toggleMark(text, selection, format);
+}
+function formatOnShortcut(event, format) {
+  const shortcut = formatShortcutOf(event);
+  if (shortcut === void 0) return;
+  event.preventDefault();
+  if (shortcut !== "refused") format(shortcut);
+}
+function pastePlainText(event, element, layout) {
+  event.preventDefault();
+  const pasted = event.clipboardData?.getData("text/plain") ?? "";
+  insertPlainText(element, layout.pastedWords(pasted));
+}
+function refuseDrop(event) {
+  event.preventDefault();
+}
+function endWhenFocusMovesOnPage(element, end) {
+  let blurTimer;
+  const listener = () => {
+    clearTimeout(blurTimer);
+    blurTimer = setTimeout(() => {
+      const { ownerDocument } = element;
+      const isFocusOnPage = ownerDocument.hasFocus();
+      const isFocusInText = ownerDocument.activeElement === element;
+      if (isFocusOnPage && !isFocusInText) end();
+    });
+  };
+  return {
+    listener,
+    stop: () => {
+      clearTimeout(blurTimer);
+    }
+  };
+}
 function formatShortcutOf(event) {
   const hasCommandKey = event.metaKey || event.ctrlKey;
   if (!hasCommandKey || event.altKey || event.shiftKey) return void 0;
@@ -760,12 +908,35 @@ function formatShortcutOf(event) {
     case "KeyI":
       return "italic";
     case "KeyU":
-      return "none";
+      return "refused";
     default:
       return void 0;
   }
 }
 
+// src/bridge/rich-text-layouts.ts
+var PASTED_LINE_BREAKS = /\s*\n\s*/gu;
+var SPACE = " ";
+var BLOCKS_LAYOUT = {
+  shapeOf: (text) => text,
+  read: readRichTextFrom,
+  render: renderRichText,
+  canHoldLists: true,
+  isEndingKey: () => false,
+  pastedWords: (pasted) => pasted
+};
+var LINE_LAYOUT = {
+  shapeOf: asOneParagraph,
+  read: (element) => asOneParagraph(readRichTextFrom(element)),
+  render: renderInlineRichText,
+  canHoldLists: false,
+  isEndingKey: (event) => event.key === "Enter" && !event.shiftKey,
+  pastedWords: (pasted) => pasted.replace(PASTED_LINE_BREAKS, SPACE)
+};
+function richTextLayoutOf(isInline) {
+  return isInline ? LINE_LAYOUT : BLOCKS_LAYOUT;
+}
+
 // src/bridge/page-typing.ts
 var PREPARED_TYPING_TIMEOUT_MS = 3e3;
 var EDITABLE_VALUES = {
@@ -773,93 +944,111 @@ var EDITABLE_VALUES = {
   rich: EDITABLE_AS_RICH_TEXT
 };
 function createPageTyping(options) {
-  let stopEditing;
-  let richEditing;
+  const { send } = options;
+  let typing;
   let prepared;
-  const takePrepared = (isTyped) => {
+  const isTyping = () => typing !== void 0 || prepared !== void 0;
+  const reportIfOver = () => {
+    if (!isTyping()) options.onTypingOver();
+  };
+  const releasePrepared = () => {
     if (prepared === void 0) return;
     clearTimeout(prepared.timer);
-    if (!isTyped && stopEditing === void 0) {
+    if (typing === void 0) {
       prepared.element.blur();
       makeUneditable(prepared.element);
     }
     prepared = void 0;
   };
+  const handOverPrepared = () => {
+    if (prepared !== void 0) clearTimeout(prepared.timer);
+    prepared = void 0;
+  };
   const prepare = (element, kind) => {
     const isTypedAlready = element.hasAttribute("contenteditable");
     if (isTypedAlready) return;
-    takePrepared(false);
+    releasePrepared();
     makeEditable(element, EDITABLE_VALUES[kind]);
     element.focus({ preventScroll: true });
     const timer = setTimeout(() => {
-      takePrepared(false);
+      releasePrepared();
+      reportIfOver();
     }, PREPARED_TYPING_TIMEOUT_MS);
     prepared = { element, timer };
   };
   const stop = () => {
-    stopEditing?.();
+    typing?.stop();
   };
-  const ended = (path) => (outcome) => {
-    stopEditing = void 0;
-    richEditing = void 0;
-    options.send({ type: "typing-ended", path, outcome });
+  const endedAt = (path) => (outcome) => {
+    typing = void 0;
+    send({ type: "typing-ended", path, outcome });
+    reportIfOver();
   };
-  const start = (request) => {
+  const begin = (start) => {
     stop();
-    const { path } = request;
+    const { path } = start;
     const element = findMarkedElement(options.document, path);
-    const canType = element !== void 0 && canEditTextInPlace(element, request.text);
-    if (!canType) {
-      takePrepared(false);
-      options.send({ type: "typing-refused", path });
+    if (element === void 0 || !start.canTypeIn(element)) {
+      releasePrepared();
+      send({ type: "typing-refused", path });
+      reportIfOver();
       return;
     }
-    takePrepared(true);
-    options.send({ type: "typing-started", path });
-    stopEditing = startInlineTextEditing(element, {
-      isSingleLine: request.isSingleLine,
-      onInput: (text) => {
-        options.send({ type: "typed", path, text });
-        options.onInput();
-      },
-      onEnd: ended(path)
+    handOverPrepared();
+    send({ type: "typing-started", path });
+    typing = start.typeIn(element, endedAt(path));
+    placeCaretAt(element, start.point);
+  };
+  const reportTyped = (message) => {
+    send(message);
+    options.onInput();
+  };
+  const typePlainText = (request) => {
+    const { path, text } = request;
+    begin({
+      path,
+      point: request.point,
+      canTypeIn: (element) => canEditTextInPlace(element, text),
+      typeIn: (element, onEnd) => ({
+        stop: startInlineTextEditing(element, {
+          isSingleLine: request.isSingleLine,
+          onInput: (typed) => {
+            reportTyped({ type: "typed", path, text: typed });
+          },
+          onEnd
+        })
+      })
     });
-    placeCaretAt(element, request.point);
   };
-  const startRich = (request) => {
-    stop();
-    const { path, isInline } = request;
-    const element = findMarkedElement(options.document, path);
-    const canType = element !== void 0 && canEditRichTextInPlace(element, request.text, isInline);
-    if (!canType) {
-      takePrepared(false);
-      options.send({ type: "typing-refused", path });
-      return;
-    }
-    takePrepared(true);
-    options.send({ type: "typing-started", path });
-    const editing = startRichTextEditing(element, {
-      isInline,
-      onInput: (text) => {
-        options.send({ type: "rich-typed", path, text });
-        options.onInput();
-      },
-      onSelect: (selection) => {
-        options.send({ type: "typed-selection", path, selection });
-      },
-      onEnd: ended(path)
+  const typeRichText = (request) => {
+    const { path, text } = request;
+    const layout = richTextLayoutOf(request.isInline);
+    begin({
+      path,
+      point: request.point,
+      canTypeIn: (element) => canEditRichTextInPlace(element, text, layout),
+      typeIn: (element, onEnd) => {
+        const editing = startRichTextEditing(element, {
+          layout,
+          onInput: (typed) => {
+            reportTyped({ type: "rich-typed", path, text: typed });
+          },
+          onSelect: (selection) => {
+            send({ type: "typed-selection", path, selection });
+          },
+          onEnd
+        });
+        return { stop: editing.stop, richText: editing };
+      }
     });
-    richEditing = editing;
-    stopEditing = editing.stop;
-    placeCaretAt(element, request.point);
   };
   return {
     prepare,
-    isTyping: () => stopEditing !== void 0,
-    start,
-    startRich,
-    format: (format) => richEditing?.format(format),
-    setLink: (href) => richEditing?.setLink(href),
+    isTyping,
+    start: typePlainText,
+    startRich: typeRichText,
+    format: (format) => typing?.richText?.format(format),
+    setLink: (href) => typing?.richText?.setLink(href),
     stop
   };
 }
@@ -895,11 +1084,21 @@ function connectPage(document2, schema, send) {
   const layout = createLayoutReports(document2, (measured) => {
     send({ type: "layout", layout: measured });
   });
-  const typing = createPageTyping({ document: document2, send, onInput: layout.schedule });
+  const showHeldPage = () => {
+    renderer.showHeldPage();
+  };
+  const typing = createPageTyping({
+    document: document2,
+    send,
+    onInput: layout.schedule,
+    onTypingOver: showHeldPage
+  });
+  const presses = followPresses(document2, showHeldPage);
   const renderer = createPageRenderer({
     document: document2,
     // Replacing the page under a text being typed would throw the typing away.
     canReplacePage: () => !typing.isTyping(),
+    isPagePressed: presses.isPressed,
     onRendered: () => {
       layout.reportNow();
       send({ type: "rendered" });
@@ -909,31 +1108,45 @@ function connectPage(document2, schema, send) {
       send({ type: "render-failed" });
     }
   });
-  const pressKey = (event) => {
-    const key = editorKeyOf(event);
-    const isTypingEscape = key === "escape" && typing.isTyping();
-    if (key === void 0 || isTypingEscape) return;
-    event.preventDefault();
-    typing.stop();
-    send({ type: "key", key });
+  const page = {
+    document: document2,
+    schema,
+    send,
+    layout,
+    typing,
+    renderer
   };
-  const stopListening = listenToPage(document2, {
+  const stopListening = listenToPage(document2, pageListenersOf(page));
+  layout.reportNow();
+  return {
+    receive: (message) => {
+      receiveEditorMessage(page, message);
+    },
+    stop: () => {
+      typing.stop();
+      renderer.stop();
+      presses.stop();
+      layout.stop();
+      stopListening();
+    }
+  };
+}
+function pageListenersOf(page) {
+  const { schema, send, layout } = page;
+  return {
     onHover: (path) => {
       send({ type: "hover", path });
     },
     onClick: (pointer) => {
-      const kind = pointer === void 0 ? void 0 : typedKindAt(schema, pointer.path);
-      if (pointer !== void 0 && kind !== void 0) {
-        typing.prepare(pointer.element, kind);
-      }
-      const target = pointer === void 0 ? void 0 : { path: pointer.path, point: pointer.point };
-      send({ type: "click", target });
+      clickOn(page, pointer);
     },
     onLinkHover: layout.hoverLink,
     onLinkClick: (link) => {
       send({ type: "link-click", href: link.href });
     },
-    onKeyDown: pressKey,
+    onKeyDown: (event) => {
+      pressKey(page, event);
+    },
     onFileDragOver: (path) => {
       const isTaken = imageFieldAt(schema, path) !== void 0;
       send({ type: "file-drag", path: isTaken ? path : void 0 });
@@ -947,44 +1160,55 @@ function connectPage(document2, schema, send) {
       if (isTaken) send({ type: "file-drop", path, file });
     },
     onLayoutChange: layout.schedule
-  });
-  layout.reportNow();
-  const receive = (message) => {
-    switch (message.type) {
-      case "connect":
-        break;
-      case "render":
-        renderer.render(message.content);
-        break;
-      case "start-typing":
-        typing.start(message);
-        break;
-      case "start-rich-typing":
-        typing.startRich(message);
-        break;
-      case "format-typed":
-        typing.format(message.format);
-        break;
-      case "link-typed":
-        typing.setLink(message.href);
-        break;
-      case "stop-typing":
-        typing.stop();
-        break;
-      case "scroll-to":
-        scrollToField(document2, message.path);
-        break;
-    }
   };
-  return {
-    receive,
-    stop: () => {
+}
+function clickOn(page, pointer) {
+  if (pointer === void 0) {
+    page.send({ type: "click", target: void 0 });
+    return;
+  }
+  const kind = typedKindAt(page.schema, pointer.path);
+  if (kind !== void 0) page.typing.prepare(pointer.element, kind);
+  page.send({
+    type: "click",
+    target: { path: pointer.path, point: pointer.point }
+  });
+}
+function pressKey(page, event) {
+  const key = editorKeyOf(event);
+  const isTypingEscape = key === "escape" && page.typing.isTyping();
+  if (key === void 0 || isTypingEscape) return;
+  event.preventDefault();
+  page.typing.stop();
+  page.send({ type: "key", key });
+}
+function receiveEditorMessage(page, message) {
+  const { typing } = page;
+  switch (message.type) {
+    case "connect":
+      break;
+    case "render":
+      page.renderer.render(message.content);
+      break;
+    case "start-typing":
+      typing.start(message);
+      break;
+    case "start-rich-typing":
+      typing.startRich(message);
+      break;
+    case "format-typed":
+      typing.format(message.format);
+      break;
+    case "link-typed":
+      typing.setLink(message.href);
+      break;
+    case "stop-typing":
       typing.stop();
-      renderer.stop();
-      layout.stop();
-      stopListening();
-    }
-  };
+      break;
+    case "scroll-to":
+      scrollToField(page.document, message.path);
+      break;
+  }
 }
 function scrollToField(document2, path) {
   const element = findClosestMarkedElement(document2, path);