@gridkitjs/dom 0.3.3 → 0.5.0

package/dist/index.js

@@ -69,13 +69,15 @@ function bodyRowFrom(target) {
 // src/checklist/attachChecklist.ts
 var ITEM = "[data-gridkit-checklist-item]";
 var INDEX = "data-gridkit-checklist-index";
+var SETTLED = { kind: "settled" };
+var DETACHED = { kind: "detached" };
 function indexOf(item) {
   return Number(item.getAttribute(INDEX));
 }
 function attachChecklist(list, options) {
   let count = 0;
   let active = 0;
-  let pending = null;
+  let state = SETTLED;
   function items() {
     return Array.from(list.querySelectorAll(ITEM));
   }
@@ -102,7 +104,7 @@ function attachChecklist(list, options) {
     }
   }
   function moveTo(index) {
-    if (count === 0) {
+    if (state.kind === "detached" || count === 0) {
       return;
     }
     const target = Math.max(0, Math.min(index, count - 1));
@@ -111,9 +113,9 @@ function attachChecklist(list, options) {
     options.scrollToIndex(target);
     const item = itemAt(target);
     if (item === null) {
-      pending = target;
+      state = { kind: "awaiting-item", index: target };
     } else {
-      pending = null;
+      state = SETTLED;
       item.focus({ preventScroll: true });
     }
   }
@@ -163,7 +165,7 @@ function attachChecklist(list, options) {
   function onFocusIn(event) {
     const item = itemOf(event.target);
     if (item !== null) {
-      pending = null;
+      state = SETTLED;
       makeActive(indexOf(item));
       setTabStop();
     }
@@ -175,17 +177,20 @@ function attachChecklist(list, options) {
       item.focus({ preventScroll: true });
     }
   }
-  const observer = new MutationObserver(() => {
-    setTabStop();
-    const item = pending === null ? null : itemAt(pending);
+  function focusAwaitedItemIfMounted() {
+    const item = state.kind === "awaiting-item" ? itemAt(state.index) : null;
     if (item === null) {
       return;
     }
-    pending = null;
+    state = SETTLED;
     const focused = document.activeElement;
     if (focused === null || focused === document.body || list.contains(focused)) {
       item.focus({ preventScroll: true });
     }
+  }
+  const observer = new MutationObserver(() => {
+    setTabStop();
+    focusAwaitedItemIfMounted();
   });
   observer.observe(list, {
     childList: true,
@@ -198,13 +203,23 @@ function attachChecklist(list, options) {
   list.addEventListener("click", onClick);
   return {
     setCount(next) {
+      if (state.kind === "detached") {
+        return;
+      }
       count = next;
       active = Math.max(0, Math.min(active, count - 1));
+      if (state.kind === "awaiting-item") {
+        state = count === 0 ? SETTLED : {
+          kind: "awaiting-item",
+          index: Math.min(state.index, count - 1)
+        };
+      }
       setTabStop();
+      focusAwaitedItemIfMounted();
     },
     focusItem: moveTo,
     detach() {
-      pending = null;
+      state = DETACHED;
       observer.disconnect();
       list.removeEventListener("keydown", onKeyDown2);
       list.removeEventListener("focusin", onFocusIn);
@@ -322,61 +337,79 @@ function attachContextMenuTrigger(root, options) {
 import { applyColumnResize } from "@gridkitjs/core";
 
 // src/pointerGesture.ts
-function isPrimaryPress(press) {
-  return press.button === 0 && press.isPrimary;
+function mayStartGesture(press, signal) {
+  return press.button === 0 && press.isPrimary && signal?.aborted !== true;
 }
-function startPointerGesture(element, pointerId, handlers) {
+function startPointerGesture(element, pointerId, handlers, signal) {
   element.setPointerCapture(pointerId);
   function stop() {
     element.removeEventListener("pointermove", move);
     element.removeEventListener("pointerup", end);
     element.removeEventListener("pointercancel", cancel);
     window.removeEventListener("keydown", onKeyDown2);
+    signal?.removeEventListener("abort", abandon);
     if (element.hasPointerCapture(pointerId)) {
       element.releasePointerCapture(pointerId);
     }
   }
   function move(event) {
-    handlers.onMove(event);
+    if (event.pointerId === pointerId) {
+      handlers.onMove(event);
+    }
   }
-  function end() {
-    stop();
-    handlers.onEnd();
+  function end(event) {
+    if (event.pointerId === pointerId) {
+      stop();
+      handlers.onEnd();
+    }
+  }
+  function cancel(event) {
+    if (event.pointerId === pointerId) {
+      abandon();
+    }
   }
-  function cancel() {
+  function abandon() {
     stop();
     handlers.onCancel();
   }
   function onKeyDown2(event) {
     if (event.key === "Escape") {
-      cancel();
+      abandon();
     }
   }
   element.addEventListener("pointermove", move);
   element.addEventListener("pointerup", end);
   element.addEventListener("pointercancel", cancel);
   window.addEventListener("keydown", onKeyDown2);
+  signal?.addEventListener("abort", abandon);
 }
 
 // src/columnResize.ts
 function startColumnResizeGesture(handle, press, session, handlers) {
-  if (!isPrimaryPress(press)) {
+  if (!mayStartGesture(press, handlers.signal)) {
     return false;
   }
   press.preventDefault();
   let width = session.startWidth;
-  startPointerGesture(handle, press.pointerId, {
-    onMove(event) {
-      width = applyColumnResize(session, event.clientX);
-      handlers.onMove(width);
-    },
-    onEnd() {
-      handlers.onEnd(width === session.startWidth ? null : width);
+  let resized = false;
+  startPointerGesture(
+    handle,
+    press.pointerId,
+    {
+      onMove(event) {
+        width = applyColumnResize(session, event.clientX);
+        resized ||= width !== session.startWidth;
+        handlers.onMove(width);
+      },
+      onEnd() {
+        handlers.onEnd(resized ? width : null);
+      },
+      onCancel() {
+        handlers.onCancel();
+      }
     },
-    onCancel() {
-      handlers.onCancel();
-    }
-  });
+    handlers.signal
+  );
   return true;
 }
 function measureColumnContent(table, columnId) {
@@ -497,47 +530,46 @@ function downloadBlob(blob, fileName) {
 
 // src/dragReorder.ts
 var DRAG_THRESHOLD = 4;
-var NO_DRAG = {
-  draggedId: null,
-  dropTarget: null,
-  ghostTransform: null
-};
+var NO_DRAG = { kind: "idle" };
 function startDragReorder(id, grabElement, press, handlers) {
-  if (!isPrimaryPress(press)) {
+  if (!mayStartGesture(press, handlers.signal)) {
     return false;
   }
-  const { pointerId, clientX: startX } = press;
+  const { pointerId, clientX: startX, clientY: startY } = press;
   const grabX = startX - grabElement.getBoundingClientRect().left;
-  let dragging = false;
-  let target = null;
-  startPointerGesture(grabElement, pointerId, {
-    onMove(moveEvent) {
-      const { clientX, clientY } = moveEvent;
-      if (!dragging) {
-        if (Math.abs(clientX - startX) < DRAG_THRESHOLD) {
+  let phase = { kind: "pressed" };
+  startPointerGesture(
+    grabElement,
+    pointerId,
+    {
+      onMove(moveEvent) {
+        const { clientX, clientY } = moveEvent;
+        if (phase.kind === "pressed" && Math.hypot(clientX - startX, clientY - startY) < DRAG_THRESHOLD) {
           return;
         }
-        dragging = true;
-      }
-      target = handlers.resolveTarget(clientX, clientY, id);
-      handlers.onState({
-        draggedId: id,
-        dropTarget: target,
-        ghostTransform: `translate(${String(clientX - grabX)}px, ${String(clientY)}px)`
-      });
-    },
-    onEnd() {
-      const dropped = target;
-      handlers.onState(NO_DRAG);
-      if (dragging && dropped !== null) {
-        handlers.onDrop(dropped, id);
+        phase = {
+          kind: "dragging",
+          target: handlers.resolveTarget(clientX, clientY, id)
+        };
+        handlers.onState({
+          kind: "dragging",
+          draggedId: id,
+          dropTarget: phase.target,
+          ghostTransform: `translate(${String(clientX - grabX)}px, ${String(clientY)}px)`
+        });
+      },
+      onEnd() {
+        handlers.onState(NO_DRAG);
+        if (phase.kind === "dragging" && phase.target !== null) {
+          handlers.onDrop(phase.target, id);
+        }
+      },
+      onCancel() {
+        handlers.onState(NO_DRAG);
       }
     },
-    onCancel() {
-      target = null;
-      handlers.onState(NO_DRAG);
-    }
-  });
+    handlers.signal
+  );
   return true;
 }
 
@@ -594,7 +626,7 @@ function observeElementWidth(element, onWidth) {
 // src/gridFocus.ts
 import {
   clampFocus,
-  HEADER_ROW,
+  headerFocus,
   nextFocusForKey
 } from "@gridkitjs/core";
 var FALLBACK_PAGE = 10;
@@ -604,6 +636,12 @@ function cellIn(row, columnIndex) {
   }
   return row.cells[Math.min(columnIndex, row.cells.length - 1)] ?? null;
 }
+function sameCell(a, b) {
+  if (a.area === "body" && b.area === "body") {
+    return a.rowIndex === b.rowIndex && a.columnIndex === b.columnIndex;
+  }
+  return a.area === b.area && a.columnIndex === b.columnIndex;
+}
 function findBodyRow(bodyTable, rowIndex) {
   return bodyTable?.tBodies[0]?.querySelector(
     `:scope > tr[data-gridkit-row-index="${String(rowIndex)}"]`
@@ -621,7 +659,7 @@ function createGridFocus(initialOptions) {
   let options = initialOptions;
   let rows = null;
   const listeners = /* @__PURE__ */ new Set();
-  let stored = { rowIndex: HEADER_ROW, columnIndex: 0 };
+  let stored = headerFocus(0);
   let snapshot = {
     stored,
     rowCount: options.rowCount,
@@ -640,14 +678,28 @@ function createGridFocus(initialOptions) {
     }
     return snapshot.focus;
   }
-  function focusCell(rowIndex, columnIndex) {
-    const next = clampFocus(
-      { rowIndex, columnIndex },
-      options.rowCount,
-      options.columnCount
-    );
-    const current = getFocus();
-    if (next.rowIndex === current.rowIndex && next.columnIndex === current.columnIndex) {
+  function dropPendingMove() {
+    pendingMove = null;
+  }
+  function listenForTakeover(root) {
+    function onFocusOut(event) {
+      const to = event.relatedTarget;
+      if (to instanceof Node && !root.contains(to)) {
+        dropPendingMove();
+      }
+    }
+    root.addEventListener("focusout", onFocusOut);
+    root.addEventListener("wheel", dropPendingMove, { passive: true });
+    root.addEventListener("pointerdown", dropPendingMove);
+    return () => {
+      root.removeEventListener("focusout", onFocusOut);
+      root.removeEventListener("wheel", dropPendingMove);
+      root.removeEventListener("pointerdown", dropPendingMove);
+    };
+  }
+  function focusCell(focus) {
+    const next = clampFocus(focus, options.rowCount, options.columnCount);
+    if (sameCell(next, getFocus())) {
       return;
     }
     pendingMove = next;
@@ -681,12 +733,14 @@ function createGridFocus(initialOptions) {
       if (next === null) {
         return false;
       }
-      focusCell(next.rowIndex, next.columnIndex);
+      focusCell(next);
       return true;
     },
-    attach(next) {
+    attach(next, root) {
       rows = next;
+      const stopListening = root == null ? void 0 : listenForTakeover(root);
       return () => {
+        stopListening?.();
         if (rows === next) {
           rows = null;
         }
@@ -697,7 +751,7 @@ function createGridFocus(initialOptions) {
         return;
       }
       const cell = cellIn(
-        drawn.rowIndex === HEADER_ROW ? rows.getHeaderRow() : rows.getBodyRow(drawn.rowIndex),
+        drawn.area === "header" ? rows.getHeaderRow() : rows.getBodyRow(drawn.rowIndex),
         drawn.columnIndex
       );
       if (cell !== null) {
@@ -706,7 +760,7 @@ function createGridFocus(initialOptions) {
         return;
       }
       const range = options.virtualRange;
-      if (range != null && drawn.rowIndex !== HEADER_ROW && (drawn.rowIndex < range.startIndex || drawn.rowIndex > range.endIndex)) {
+      if (range != null && drawn.area === "body" && (drawn.rowIndex < range.startIndex || drawn.rowIndex > range.endIndex)) {
         range.scrollToIndex(drawn.rowIndex);
         return;
       }
@@ -716,20 +770,48 @@ function createGridFocus(initialOptions) {
 }
 
 // src/infiniteScroll.ts
+var IDLE = { kind: "idle" };
+var LOADING = { kind: "loading" };
+var DETACHED2 = { kind: "detached" };
+function afterUpdate(state, loading, hasMoreChanged) {
+  if (loading) {
+    return LOADING;
+  }
+  return state.kind === "loading" || hasMoreChanged ? IDLE : state;
+}
+function contentOffset(root, sentinel) {
+  return sentinel.getBoundingClientRect().top - root.getBoundingClientRect().top + root.scrollTop;
+}
 function attachInfiniteScroll(root, options) {
   let latest = options;
   let intersecting = false;
-  let fired = false;
-  let wasLoading = options.isLoadingMore ?? false;
+  let state = options.isLoadingMore ?? false ? LOADING : IDLE;
   let observer = null;
   let observed = null;
   function maybeLoadMore() {
-    if (!intersecting || !latest.hasMore || (latest.isLoadingMore ?? false) || fired) {
+    if (state.kind !== "idle" || !intersecting || observed === null || !latest.hasMore) {
       return;
     }
-    fired = true;
+    state = {
+      kind: "requested",
+      sentinelOffset: contentOffset(root, observed.sentinel)
+    };
     latest.onLoadMore?.();
   }
+  function requestAnswered() {
+    if (state.kind !== "requested" || observed === null) {
+      return false;
+    }
+    const moved = contentOffset(root, observed.sentinel) - state.sentinelOffset;
+    return Math.abs(moved) >= 1;
+  }
+  function report(isIntersecting) {
+    intersecting = isIntersecting;
+    if (!intersecting && state.kind === "requested") {
+      state = IDLE;
+    }
+    maybeLoadMore();
+  }
   function disconnect() {
     observer?.disconnect();
     observer = null;
@@ -749,11 +831,9 @@ function attachInfiniteScroll(root, options) {
     observer = new IntersectionObserver(
       (entries) => {
         const entry = entries[entries.length - 1];
-        if (entry === void 0) {
-          return;
+        if (entry !== void 0) {
+          report(entry.isIntersecting);
         }
-        intersecting = entry.isIntersecting;
-        maybeLoadMore();
       },
       { root, rootMargin }
     );
@@ -763,16 +843,24 @@ function attachInfiniteScroll(root, options) {
   observe();
   return {
     update(next) {
-      latest = next;
-      const loading = next.isLoadingMore ?? false;
-      if (wasLoading && !loading) {
-        fired = false;
-        maybeLoadMore();
+      if (state.kind === "detached") {
+        return;
       }
-      wasLoading = loading;
+      const hasMoreChanged = next.hasMore !== latest.hasMore;
+      latest = next;
+      state = afterUpdate(state, next.isLoadingMore ?? false, hasMoreChanged);
       observe();
+      if (requestAnswered()) {
+        state = IDLE;
+        disconnect();
+        observe();
+      }
+      maybeLoadMore();
     },
-    detach: disconnect
+    detach() {
+      disconnect();
+      state = DETACHED2;
+    }
   };
 }
 
@@ -792,6 +880,8 @@ var MOVES = {
   Home: "first",
   End: "last"
 };
+var IDLE2 = { kind: "idle" };
+var AWAY = { kind: "away" };
 function idOf(item) {
   return item.getAttribute("data-gridkit-menu-item") ?? "";
 }
@@ -809,10 +899,8 @@ function isTypeahead(event) {
   return /^\S$/u.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey;
 }
 function attachMenu(panel, options) {
-  let typed = "";
-  let typeaheadTimer;
-  let hovered = null;
-  let hoverTimer;
+  let typeahead = IDLE2;
+  let hover = AWAY;
   function items() {
     return Array.from(panel.querySelectorAll(ITEM2));
   }
@@ -841,21 +929,58 @@ function attachMenu(panel, options) {
       options.onActivate(idOf(item));
     }
   }
-  function typeahead(key, all, from) {
-    typed += key;
-    window.clearTimeout(typeaheadTimer);
-    typeaheadTimer = window.setTimeout(() => {
-      typed = "";
-    }, TYPEAHEAD_TIMEOUT);
+  function endTyping() {
+    if (typeahead.kind === "typing") {
+      window.clearTimeout(typeahead.timer);
+    }
+    typeahead = IDLE2;
+  }
+  function endHover() {
+    if (hover.kind === "resting") {
+      window.clearTimeout(hover.timer);
+    }
+    hover = AWAY;
+  }
+  function type(key, all, from) {
+    const typed = (typeahead.kind === "typing" ? typeahead.typed : "") + key;
+    endTyping();
+    typeahead = {
+      kind: "typing",
+      typed,
+      timer: window.setTimeout(() => {
+        typeahead = IDLE2;
+      }, TYPEAHEAD_TIMEOUT)
+    };
     const match = all[typeaheadIndex(all.map(labelOf), from, typed)];
     if (match !== void 0) {
       focus(match);
     }
   }
+  function rest(item) {
+    hover = {
+      kind: "resting",
+      item,
+      timer: window.setTimeout(() => {
+        hover = { kind: "rested", item };
+        if (opensSubmenu(item) && !isDisabled(item)) {
+          openSubmenu(item, "none");
+        } else {
+          options.onCollapseSubmenu?.();
+        }
+      }, HOVER_DELAY)
+    };
+  }
   function onKeyDown2(event) {
-    if (event.isComposing) {
+    if (event.isComposing || !actOnKey(event)) {
       return;
     }
+    event.preventDefault();
+    endHover();
+    if (!isTypeahead(event)) {
+      endTyping();
+    }
+  }
+  function actOnKey(event) {
     const all = items();
     const item = itemOf(event.target);
     const from = item === null ? -1 : all.indexOf(item);
@@ -882,11 +1007,11 @@ function attachMenu(panel, options) {
     } else if (event.key === "Tab") {
       options.onClose("tab");
     } else if (isTypeahead(event)) {
-      typeahead(event.key, all, from);
+      type(event.key, all, from);
     } else {
-      return;
+      return false;
     }
-    event.preventDefault();
+    return true;
   }
   function onFocusIn(event) {
     const item = itemOf(event.target);
@@ -908,24 +1033,16 @@ function attachMenu(panel, options) {
     if (item !== null && document.activeElement !== item) {
       focus(item);
     }
-    if (item === hovered) {
+    if (hover.kind !== "away" && hover.item === item) {
       return;
     }
-    hovered = item;
-    window.clearTimeout(hoverTimer);
+    endHover();
     if (item !== null) {
-      hoverTimer = window.setTimeout(() => {
-        if (opensSubmenu(item) && !isDisabled(item)) {
-          openSubmenu(item, "none");
-        } else {
-          options.onCollapseSubmenu?.();
-        }
-      }, HOVER_DELAY);
+      rest(item);
     }
   }
   function onPointerLeave() {
-    hovered = null;
-    window.clearTimeout(hoverTimer);
+    endHover();
   }
   const focused = itemOf(document.activeElement);
   setTabStop(focused ?? items()[0]);
@@ -943,8 +1060,8 @@ function attachMenu(panel, options) {
       }
     },
     detach() {
-      window.clearTimeout(typeaheadTimer);
-      window.clearTimeout(hoverTimer);
+      endTyping();
+      endHover();
       panel.removeEventListener("keydown", onKeyDown2);
       panel.removeEventListener("focusin", onFocusIn);
       panel.removeEventListener("click", onClick);
@@ -1238,15 +1355,18 @@ function attachOverlay(anchor, panel, options) {
     if (settlingFrame !== null) {
       cancelAnimationFrame(settlingFrame);
     }
-    if (returnFocusTo !== null && focusInside) {
-      returnFocusTo.focus({ preventScroll: true });
+    if (!focusInside) {
+      return;
     }
+    const target = returnFocusTo?.isConnected === true ? returnFocusTo : options.returnFocusFallback?.();
+    target?.focus({ preventScroll: true });
   }
   return detach;
 }
 
 // src/rowVirtualizer.ts
 import { visibleRange } from "@gridkitjs/core";
+var READY = { kind: "ready" };
 function sameRange(a, b) {
   return a.startIndex === b.startIndex && a.endIndex === b.endIndex && a.offsetBefore === b.offsetBefore && a.offsetAfter === b.offsetAfter;
 }
@@ -1256,13 +1376,12 @@ function createRowVirtualizer(scrollElement, options) {
   let scrollTop = scrollElement.scrollTop;
   let viewportHeight = scrollElement.clientHeight;
   let range = null;
-  let destroyed = false;
-  let pendingScroll;
+  let phase = READY;
   const elements = /* @__PURE__ */ new Map();
   const indexByElement = /* @__PURE__ */ new Map();
   const refCallbacks = /* @__PURE__ */ new Map();
   function recompute() {
-    if (destroyed) {
+    if (phase.kind === "destroyed") {
       return;
     }
     const next = visibleRange(
@@ -1313,10 +1432,16 @@ function createRowVirtualizer(scrollElement, options) {
   recompute();
   return {
     setRowCount(count) {
+      if (phase.kind === "awaiting-row" && phase.index >= count) {
+        phase = READY;
+      }
       heights = Array.from({ length: count }, (_, index) => heights[index]);
       recompute();
     },
     resetHeights() {
+      if (phase.kind === "awaiting-row") {
+        phase = READY;
+      }
       heights = new Array(heights.length).fill(void 0);
       recompute();
     },
@@ -1330,15 +1455,15 @@ function createRowVirtualizer(scrollElement, options) {
             indexByElement.delete(previous);
             elements.delete(index);
           }
-          if (element === null || destroyed) {
+          if (element === null || phase.kind === "destroyed") {
             return;
           }
           elements.set(index, element);
           indexByElement.set(element, index);
           rowObserver.observe(element);
-          if (pendingScroll?.index === index) {
-            element.scrollIntoView(pendingScroll.options);
-            pendingScroll = void 0;
+          if (phase.kind === "awaiting-row" && phase.index === index) {
+            element.scrollIntoView(phase.options);
+            phase = READY;
           }
         };
         refCallbacks.set(index, callback);
@@ -1346,21 +1471,21 @@ function createRowVirtualizer(scrollElement, options) {
       return callback;
     },
     scrollToIndex(index, scrollOptions) {
-      if (heights.length === 0) {
+      if (phase.kind === "destroyed" || heights.length === 0) {
         return;
       }
       const clamped = Math.max(0, Math.min(index, heights.length - 1));
       const mounted = elements.get(clamped);
       if (mounted !== void 0) {
+        phase = READY;
         mounted.scrollIntoView(scrollOptions);
         return;
       }
-      pendingScroll = { index: clamped, options: scrollOptions };
+      phase = { kind: "awaiting-row", index: clamped, options: scrollOptions };
       scrollElement.scrollTop = estimateOffsetBefore(clamped);
     },
     destroy() {
-      destroyed = true;
-      pendingScroll = void 0;
+      phase = { kind: "destroyed" };
       scrollElement.removeEventListener("scroll", handleScroll);
       viewportObserver.disconnect();
       rowObserver.disconnect();
@@ -1573,6 +1698,7 @@ function observeToolbarOverflow(toolbar, options) {
 
 // src/print/printDocument.ts
 var RETURN_EVENTS = ["pointerdown", "keydown"];
+var FONTS_TIMEOUT_MS = 3e3;
 var printing = false;
 function createFrame(bodyHtml) {
   const frame = document.createElement("iframe");
@@ -1589,17 +1715,26 @@ function createFrame(bodyHtml) {
 }
 function load(frame) {
   return new Promise((resolve, reject) => {
-    frame.addEventListener(
-      "load",
-      () => {
-        if (frame.contentWindow === null) {
-          reject(new Error("The print frame has no window."));
-        } else {
-          resolve(frame.contentWindow);
-        }
-      },
-      { once: true }
-    );
+    const removal = new MutationObserver(() => {
+      if (!frame.isConnected) {
+        settle();
+        reject(new Error("The print frame was removed before it loaded."));
+      }
+    });
+    function loaded() {
+      settle();
+      if (frame.contentWindow === null) {
+        reject(new Error("The print frame has no window."));
+      } else {
+        resolve(frame.contentWindow);
+      }
+    }
+    function settle() {
+      removal.disconnect();
+      frame.removeEventListener("load", loaded);
+    }
+    frame.addEventListener("load", loaded);
+    removal.observe(document.body, { childList: true });
     document.body.append(frame);
   });
 }
@@ -1610,7 +1745,18 @@ function fill(view, { title, styles }) {
   style.textContent = styles;
   frameDocument.head.append(style);
 }
-function print(view) {
+async function fontsLoaded(view) {
+  let timer = 0;
+  const timeout = new Promise((resolve) => {
+    timer = window.setTimeout(resolve, FONTS_TIMEOUT_MS);
+  });
+  try {
+    await Promise.race([view.document.fonts.ready, timeout]);
+  } finally {
+    window.clearTimeout(timer);
+  }
+}
+async function print(view) {
   const listeners = [
     [view, "afterprint"],
     ...RETURN_EVENTS.flatMap((type) => [
@@ -1618,19 +1764,22 @@ function print(view) {
       [window, type]
     ])
   ];
-  return new Promise((resolve) => {
-    function done() {
-      for (const [target, type] of listeners) {
-        target.removeEventListener(type, done, { capture: true });
-      }
-      resolve();
-    }
-    for (const [target, type] of listeners) {
-      target.addEventListener(type, done, { capture: true });
-    }
+  let done = () => void 0;
+  const closed = new Promise((resolve) => {
+    done = resolve;
+  });
+  for (const [target, type] of listeners) {
+    target.addEventListener(type, done, { capture: true });
+  }
+  try {
     view.focus();
     view.print();
-  });
+    await closed;
+  } finally {
+    for (const [target, type] of listeners) {
+      target.removeEventListener(type, done, { capture: true });
+    }
+  }
 }
 async function printDocument(options) {
   if (printing) {
@@ -1642,7 +1791,7 @@ async function printDocument(options) {
   try {
     const view = await load(frame);
     fill(view, options);
-    await view.document.fonts.ready;
+    await fontsLoaded(view);
     await print(view);
   } finally {
     frame.remove();