@k2b/ui 0.50.0 → 0.51.0

package/dist/browser/content/PdfViewer.js

@@ -0,0 +1,588 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span aria-live=polite>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<i class="ti ti-arrows-horizontal"aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-pdf-viewer__bar>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div><div class=k2b-pdf-viewer__pages tabindex=0 role=document><div class=k2b-pdf-viewer__stack></div></div><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-pdf-viewer__page><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-pdf-viewer__text>`);
+import { batch, createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show } from "solid-js";
+import { Button } from "../actions/Button";
+import { Toolbar } from "../actions/Toolbar";
+import { openPdfDocument, pageImageWidth } from "./pdf-document";
+import { usePdfMessages } from "./pdf-messages";
+/** CSS pixels per PDF point at 100 %: 96 dpi on screen, 72 points per inch. */
+const POINT = 96 / 72;
+/** Steps for − and + in percent; Ctrl or ⌘ with the wheel and two fingers zoom freely between the first and the last. */
+export const PDF_ZOOM_STEPS = [25, 50, 75, 100, 125, 150, 200, 300];
+const SMALLEST = PDF_ZOOM_STEPS[0];
+const LARGEST = PDF_ZOOM_STEPS[PDF_ZOOM_STEPS.length - 1] ?? 300;
+/** Horizontal padding of the page stack, both sides together. */
+const INSET = 24;
+/** Pages within this distance of the view draw; farther ones keep only their box. */
+const NEAR_MARGIN = "150% 0px";
+/** At most this many drawn pages stay in memory; the ones out of view are released first. */
+const KEPT_IMAGES = 24;
+
+/** The next zoom step above or below `percent`; at either end it stays there. */
+export const nextPdfZoomStep = (percent, direction) => direction === 1 ? PDF_ZOOM_STEPS.find(step => step > percent + 0.5) ?? LARGEST : [...PDF_ZOOM_STEPS].reverse().find(step => step < percent - 0.5) ?? SMALLEST;
+
+/**
+ * The page width most pages share, at a tie the first page's. "Width" fits every page to the area, so a landscape page
+ * among portrait ones never scrolls sideways; percentages and fixed zoom follow this common width.
+ */
+export const commonPageWidth = pages => {
+  const counts = new Map();
+  for (const page of pages) counts.set(Math.round(page.width), (counts.get(Math.round(page.width)) ?? 0) + 1);
+  let best = Math.round(pages[0]?.width ?? 1);
+  let most = 0;
+  for (const [width, count] of counts) if (count > most) {
+    best = width;
+    most = count;
+  }
+  return Math.max(1, best);
+};
+
+/**
+ * A PDF drawn by pdf.js in every browser: pages as images in one scroll area, an invisible text layer over each page
+ * to select, copy, and find text, and a small zoom bar. Only pages near the view are drawn and carry text; the others
+ * keep their size, so the scroll bar is right from the start. Printing and forms stay with the browser's own viewer.
+ */
+export default function PdfViewer(props) {
+  const messages = usePdfMessages();
+  const [doc, setDoc] = createSignal(null);
+  const pages = () => doc()?.pages ?? [];
+  const shown = () => props.page === undefined ? pages().map((_, index) => index) : [props.page].filter(index => index < pages().length);
+  const [images, setImages] = createSignal(new Map());
+  const [near, setNear] = createSignal(new Set());
+  const [fitWidth, setFitWidth] = createSignal(true);
+  const [fixed, setFixed] = createSignal(POINT);
+  const [inner, setInner] = createSignal(0);
+  const [current, setCurrent] = createSignal(0);
+  const [ready, setReady] = createSignal(false);
+  let area;
+  let drawRun;
+  let drawTimer;
+  let gone = false;
+  const releaseAll = () => {
+    for (const image of images().values()) URL.revokeObjectURL(image.url);
+    setImages(new Map());
+  };
+
+  // Opening: a new `data` opens a new document and closes the previous one.
+  createEffect(on(() => props.data, data => {
+    const opening = new AbortController();
+    let opened = null;
+    onCleanup(() => {
+      opening.abort();
+      drawRun?.abort();
+      releaseAll();
+      void opened?.close();
+    });
+    setReady(false);
+    void openPdfDocument(data, opening.signal).then(handle => {
+      if (!handle || opening.signal.aborted) return void handle?.close();
+      opened = handle;
+      // A document without pages has nothing to draw; the host shows its fallback instead of waiting forever.
+      if (handle.pages.length === 0) return void props.onError?.(new Error("The PDF has no pages"));
+      setDoc(handle);
+    }, error => {
+      if (!opening.signal.aborted) props.onError?.(error);
+    });
+  }));
+  onCleanup(() => {
+    gone = true;
+    clearTimeout(drawTimer);
+  });
+  const commonWidth = createMemo(() => commonPageWidth(pages()));
+  const areaWidth = () => Math.max(120, inner());
+  /** CSS pixels per point of the common page width; percent, steps, and fixed zoom follow from it. */
+  const factor = () => fitWidth() ? areaWidth() / commonWidth() : fixed();
+  const percent = () => Math.round(factor() / POINT * 100);
+  const pageWidth = page => Math.max(1, Math.floor(fitWidth() ? areaWidth() : page.width * fixed()));
+
+  /**
+   * Draws each near page whose image is too small (blurred) or far too large (memory) for its shown size. A new zoom or
+   * scroll aborts and continues. A page that fails keeps its old image; without one, `onError` reports it.
+   */
+  const redraw = async () => {
+    drawRun?.abort();
+    const run = new AbortController();
+    drawRun = run;
+    const handle = doc();
+    if (!handle) return;
+    const order = shown().filter(index => near().has(index));
+    for (const index of order) {
+      const page = pages()[index];
+      if (!page) continue;
+      const target = pageImageWidth(pageWidth(page), window.devicePixelRatio, page.height / page.width);
+      const existing = images().get(index);
+      if (existing && target <= existing.width * 1.15 && target >= existing.width * 0.5) continue;
+      const image = await handle.draw(index, target, run.signal).catch(() => "failed");
+      if (run.signal.aborted || gone || doc() !== handle) {
+        if (image && image !== "failed") URL.revokeObjectURL(image.url);
+        return;
+      }
+      if (image === "failed" || !image) {
+        if (existing) continue;
+        props.onError?.(new Error(`Page ${index + 1} could not be drawn`));
+        return;
+      }
+      setImages(previous => {
+        const next = new Map(previous);
+        next.set(index, image);
+        // Keep memory bounded: release drawn pages out of view, oldest first, past the limit.
+        for (const key of next.keys()) {
+          if (next.size <= KEPT_IMAGES) break;
+          if (near().has(key)) continue;
+          const released = next.get(key);
+          if (released) URL.revokeObjectURL(released.url);
+          next.delete(key);
+        }
+        return next;
+      });
+      if (existing) URL.revokeObjectURL(existing.url);
+      if (!ready()) {
+        setReady(true);
+        props.onReady?.();
+      }
+    }
+  };
+  const scheduleRedraw = delay => {
+    clearTimeout(drawTimer);
+    drawTimer = setTimeout(() => void redraw(), delay);
+  };
+  createEffect(on(factor, () => scheduleRedraw(200), {
+    defer: true
+  }));
+  createEffect(on(near, () => scheduleRedraw(0), {
+    defer: true
+  }));
+  // A new document of the same shape keeps the page boxes and the near set, so it draws on its own.
+  createEffect(on(doc, () => scheduleRedraw(0), {
+    defer: true
+  }));
+  createEffect(on(() => props.page, () => {
+    if (area) area.scrollTop = 0;
+    scheduleRedraw(0);
+  }, {
+    defer: true
+  }));
+
+  /**
+   * Zooms to `target` (CSS pixels per point) around a point of the area (pointer, between the fingers, else the
+   * centre) that stays where it is. The point counts relative to the page under it, because padding, gaps, and the
+   * centring of narrow pages do not grow with the zoom.
+   */
+  const zoomTo = (target, clientX, clientY) => {
+    if (props.zoom === false || !area) return;
+    const before = factor();
+    const next = Math.min(LARGEST, Math.max(SMALLEST, target / POINT * 100)) / 100 * POINT;
+    if (Math.abs(next - before) < 1e-4) return;
+    const box = area.getBoundingClientRect();
+    const x = clientX ?? box.left + area.clientWidth / 2;
+    const y = clientY ?? box.top + area.clientHeight / 2;
+    const boxes = [...area.querySelectorAll("[data-pdf-page]")];
+    const distance = page => {
+      const rect = page.getBoundingClientRect();
+      return y < rect.top ? rect.top - y : y > rect.bottom ? y - rect.bottom : 0;
+    };
+    const anchor = boxes.reduce((best, page) => !best || distance(page) < distance(best) ? page : best, undefined);
+    const anchorBefore = anchor?.getBoundingClientRect();
+    const relativeX = anchorBefore ? (x - anchorBefore.left) / anchorBefore.width : 0;
+    const relativeY = anchorBefore ? (y - anchorBefore.top) / anchorBefore.height : 0;
+    batch(() => {
+      setFitWidth(false);
+      setFixed(next);
+    });
+    if (!anchor) return;
+    const anchorAfter = anchor.getBoundingClientRect();
+    area.scrollLeft += anchorAfter.left + relativeX * anchorAfter.width - x;
+    area.scrollTop += anchorAfter.top + relativeY * anchorAfter.height - y;
+  };
+  const step = direction => zoomTo(nextPdfZoomStep(percent(), direction) / 100 * POINT);
+  const fit = () => {
+    if (!area || fitWidth()) return;
+    const before = factor();
+    const top = area.scrollTop;
+    setFitWidth(true);
+    area.scrollLeft = 0;
+    area.scrollTop = top * factor() / before;
+  };
+  onMount(() => {
+    if (!area) return;
+    const scroller = area;
+    setInner(scroller.clientWidth - INSET);
+    const resize = new ResizeObserver(() => setInner(scroller.clientWidth - INSET));
+    resize.observe(scroller);
+    // Pages near the view draw and carry their text; the observer follows every page box as it appears. Without an
+    // IntersectionObserver every page counts as near, as MapView does.
+    const nearPages = typeof IntersectionObserver === "undefined" ? undefined : new IntersectionObserver(entries => {
+      setNear(previous => {
+        const next = new Set(previous);
+        for (const entry of entries) {
+          const index = Number(entry.target.getAttribute("data-pdf-page"));
+          if (entry.isIntersecting) next.add(index);else next.delete(index);
+        }
+        return next;
+      });
+    }, {
+      root: scroller,
+      rootMargin: NEAR_MARGIN
+    });
+    if (!nearPages) createEffect(() => setNear(new Set(shown())));
+    // Page boxes come and go with the document and `page`: new ones are observed, removed ones released, so a detached
+    // page and its image are never kept alive.
+    const observed = new Set();
+    const watched = new MutationObserver(() => {
+      for (const page of observed) if (!page.isConnected) {
+        nearPages?.unobserve(page);
+        observed.delete(page);
+      }
+      for (const page of scroller.querySelectorAll("[data-pdf-page]")) {
+        if (observed.has(page)) continue;
+        observed.add(page);
+        nearPages?.observe(page);
+      }
+    });
+    watched.observe(scroller, {
+      childList: true,
+      subtree: true
+    });
+    // The page in the middle of the view is the current one.
+    let frame = 0;
+    const track = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const middle = scroller.getBoundingClientRect().top + scroller.clientHeight / 2;
+        for (const page of scroller.querySelectorAll("[data-pdf-page]")) {
+          const rect = page.getBoundingClientRect();
+          if (rect.bottom >= middle) {
+            setCurrent(Number(page.dataset.pdfPage));
+            break;
+          }
+        }
+      });
+    };
+    // Ctrl or ⌘ with the wheel; a trackpad pinch sends the same with Ctrl. Without a key the wheel scrolls as always.
+    const wheel = event => {
+      if (!(event.ctrlKey || event.metaKey)) return;
+      event.preventDefault();
+      const delta = Math.max(-120, Math.min(120, event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY));
+      zoomTo(factor() * Math.exp(-delta * 0.002), event.clientX, event.clientY);
+    };
+    // Two fingers on touch; `touch-action: pan-x pan-y` leaves scrolling to the browser but keeps page zoom out.
+    let pinch = null;
+    const spread = touches => {
+      const [a, b] = [touches[0], touches[1]];
+      return a && b ? Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY) : 0;
+    };
+    const touchStart = event => {
+      if (event.touches.length === 2) pinch = {
+        distance: spread(event.touches) || 1,
+        factor: factor()
+      };
+    };
+    const touchMove = event => {
+      const [a, b] = [event.touches[0], event.touches[1]];
+      if (!pinch || !a || !b) return;
+      event.preventDefault();
+      zoomTo(pinch.factor * spread(event.touches) / pinch.distance, (a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2);
+    };
+    const touchEnd = event => {
+      if (event.touches.length < 2) pinch = null;
+    };
+    // Safari on a Mac reports a trackpad pinch as its own gesture (`scale`), not as a wheel.
+    let gestureStart = 0;
+    const gestureBegin = event => {
+      if (pinch) return;
+      event.preventDefault();
+      gestureStart = factor();
+    };
+    const gestureChange = event => {
+      const scale = Reflect.get(event, "scale");
+      if (pinch || !gestureStart || typeof scale !== "number") return;
+      event.preventDefault();
+      const x = Reflect.get(event, "clientX");
+      const y = Reflect.get(event, "clientY");
+      zoomTo(gestureStart * scale, typeof x === "number" ? x : undefined, typeof y === "number" ? y : undefined);
+    };
+    const gestureEnd = () => {
+      gestureStart = 0;
+    };
+    // A selection does not jump across gaps while the layer knows a drag is selecting (its end marker then fills it).
+    const selectEnd = () => {
+      for (const layer of scroller.querySelectorAll(".k2b-pdf-viewer__text[data-selecting]")) layer.removeAttribute("data-selecting");
+    };
+    scroller.addEventListener("scroll", track, {
+      passive: true
+    });
+    scroller.addEventListener("wheel", wheel, {
+      passive: false
+    });
+    scroller.addEventListener("touchstart", touchStart, {
+      passive: true
+    });
+    scroller.addEventListener("touchmove", touchMove, {
+      passive: false
+    });
+    scroller.addEventListener("touchend", touchEnd);
+    scroller.addEventListener("touchcancel", touchEnd);
+    scroller.addEventListener("gesturestart", gestureBegin);
+    scroller.addEventListener("gesturechange", gestureChange);
+    scroller.addEventListener("gestureend", gestureEnd);
+    window.addEventListener("pointerup", selectEnd);
+    onCleanup(() => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      nearPages?.disconnect();
+      watched.disconnect();
+      scroller.removeEventListener("scroll", track);
+      scroller.removeEventListener("wheel", wheel);
+      scroller.removeEventListener("touchstart", touchStart);
+      scroller.removeEventListener("touchmove", touchMove);
+      scroller.removeEventListener("touchend", touchEnd);
+      scroller.removeEventListener("touchcancel", touchEnd);
+      scroller.removeEventListener("gesturestart", gestureBegin);
+      scroller.removeEventListener("gesturechange", gestureChange);
+      scroller.removeEventListener("gestureend", gestureEnd);
+      window.removeEventListener("pointerup", selectEnd);
+    });
+  });
+  return (// Out of keyboard reach until the first page is drawn, so focus never lands on a viewer still being prepared.
+    (() => {
+      var _el$ = _$getNextElement(_tmpl$6),
+        _el$2 = _el$.firstChild,
+        _el$3 = _el$2.firstChild,
+        _el$9 = _el$2.nextSibling,
+        [_el$0, _co$] = _$getNextMarker(_el$9.nextSibling);
+      var _ref$ = area;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$2) : area = _el$2;
+      _$insert(_el$3, _$createComponent(For, {
+        get each() {
+          return shown();
+        },
+        children: index => {
+          const page = () => pages()[index] ?? {
+            width: 1,
+            height: 1
+          };
+          const width = () => pageWidth(page());
+          const image = () => images().get(index);
+          return (() => {
+            var _el$1 = _$getNextElement(_tmpl$7),
+              _el$10 = _el$1.firstChild,
+              [_el$11, _co$2] = _$getNextMarker(_el$10.nextSibling),
+              _el$12 = _el$11.nextSibling,
+              [_el$13, _co$3] = _$getNextMarker(_el$12.nextSibling);
+            _$setAttribute(_el$1, "data-pdf-page", index);
+            _$insert(_el$1, _$createComponent(Show, {
+              get when() {
+                return image();
+              },
+              children: drawn => (() => {
+                var _el$14 = _$getNextElement(_tmpl$8);
+                _$setAttribute(_el$14, "draggable", false);
+                _$effect(_p$ => {
+                  var _v$0 = drawn().url,
+                    _v$1 = drawn().width,
+                    _v$10 = drawn().height,
+                    _v$11 = `${props.title}: ${messages().pdfPage({
+                      number: index + 1,
+                      total: pages().length
+                    })}`;
+                  _v$0 !== _p$.e && _$setAttribute(_el$14, "src", _p$.e = _v$0);
+                  _v$1 !== _p$.t && _$setAttribute(_el$14, "width", _p$.t = _v$1);
+                  _v$10 !== _p$.a && _$setAttribute(_el$14, "height", _p$.a = _v$10);
+                  _v$11 !== _p$.o && _$setAttribute(_el$14, "alt", _p$.o = _v$11);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
+                });
+                return _el$14;
+              })()
+            }), _el$11, _co$2);
+            _$insert(_el$1, _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!near().has(index))() && doc();
+              },
+              keyed: true,
+              children: handle => _$createComponent(PdfTextLayer, {
+                document: handle,
+                index: index
+              })
+            }), _el$13, _co$3);
+            _$effect(_p$ => {
+              var _v$7 = `${width()}px`,
+                _v$8 = `${page().width} / ${page().height}`,
+                _v$9 = String(width() / page().width);
+              _v$7 !== _p$.e && _$setStyleProperty(_el$1, "width", _p$.e = _v$7);
+              _v$8 !== _p$.t && _$setStyleProperty(_el$1, "aspect-ratio", _p$.t = _v$8);
+              _v$9 !== _p$.a && _$setStyleProperty(_el$1, "--total-scale-factor", _p$.a = _v$9);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            return _el$1;
+          })();
+        }
+      }));
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => props.zoom !== false)() && doc();
+        },
+        get children() {
+          var _el$4 = _$getNextElement(_tmpl$5);
+          _$insert(_el$4, _$createComponent(Toolbar, {
+            get label() {
+              return messages().pdfZoom;
+            },
+            get children() {
+              return [_$createComponent(Show, {
+                get when() {
+                  return _$memo(() => props.page === undefined)() && pages().length > 1;
+                },
+                get children() {
+                  return [_$createComponent(Toolbar.Label, {
+                    "class": "k2b-pdf-viewer__page-number",
+                    get children() {
+                      return [(() => {
+                        var _el$5 = _$getNextElement(_tmpl$);
+                        _$insert(_el$5, () => messages().pdfPage({
+                          number: current() + 1,
+                          total: pages().length
+                        }));
+                        return _el$5;
+                      })(), (() => {
+                        var _el$6 = _$getNextElement(_tmpl$2);
+                        _$insert(_el$6, () => messages().pdfPageShort({
+                          number: current() + 1,
+                          total: pages().length
+                        }));
+                        return _el$6;
+                      })()];
+                    }
+                  }), _$createComponent(Toolbar.Separator, {})];
+                }
+              }), _$createComponent(Toolbar.Action, {
+                get label() {
+                  return messages().pdfZoomOut;
+                },
+                icon: "ti ti-minus",
+                get disabled() {
+                  return percent() <= SMALLEST;
+                },
+                onClick: () => step(-1)
+              }), _$createComponent(Toolbar.Label, {
+                "class": "k2b-pdf-viewer__percent",
+                get children() {
+                  var _el$7 = _$getNextElement(_tmpl$3);
+                  _$insert(_el$7, () => messages().pdfZoomPercent({
+                    value: percent()
+                  }));
+                  return _el$7;
+                }
+              }), _$createComponent(Toolbar.Action, {
+                get label() {
+                  return messages().pdfZoomIn;
+                },
+                icon: "ti ti-plus",
+                get disabled() {
+                  return percent() >= LARGEST;
+                },
+                onClick: () => step(1)
+              }), _$createComponent(Toolbar.Separator, {}), _$createComponent(Button, {
+                variant: "ghost",
+                type: "button",
+                get ["aria-pressed"]() {
+                  return fitWidth();
+                },
+                get ["aria-label"]() {
+                  return messages().pdfFitWidthLabel;
+                },
+                get title() {
+                  return messages().pdfFitWidthLabel;
+                },
+                onClick: fit,
+                get children() {
+                  return [_$getNextElement(_tmpl$4), " ", _$memo(() => messages().pdfFitWidth)];
+                }
+              })];
+            }
+          }));
+          return _el$4;
+        }
+      }), _el$0, _co$);
+      _$effect(_p$ => {
+        var _v$ = `k2b-pdf-viewer ${props.class ?? ""}`,
+          _v$2 = ready() ? "" : undefined,
+          _v$3 = !ready(),
+          _v$4 = fitWidth() ? "" : undefined,
+          _v$5 = percent(),
+          _v$6 = props.title;
+        _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "data-drawn", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setProperty(_el$, "inert", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setAttribute(_el$2, "data-fit", _p$.o = _v$4);
+        _v$5 !== _p$.i && _$setAttribute(_el$2, "data-zoom", _p$.i = _v$5);
+        _v$6 !== _p$.n && _$setAttribute(_el$2, "aria-label", _p$.n = _v$6);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined
+      });
+      return _el$;
+    })()
+  );
+}
+
+/** One page's text layer; pdf.js builds it once, and zoom changes only `--total-scale-factor` on the page. */
+function PdfTextLayer(props) {
+  let layer;
+  onMount(() => {
+    if (!layer) return;
+    const container = layer;
+    const abort = new AbortController();
+    onCleanup(() => abort.abort());
+    void props.document.textLayer(props.index, container, abort.signal).then(() => {
+      if (abort.signal.aborted) return;
+      const end = document.createElement("div");
+      end.className = "k2b-pdf-viewer__text-end";
+      container.append(end);
+    }, () => undefined);
+  });
+  return (() => {
+    var _el$15 = _$getNextElement(_tmpl$9);
+    _el$15.$$pointerdown = () => layer?.setAttribute("data-selecting", "");
+    var _ref$2 = layer;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$15) : layer = _el$15;
+    _$runHydrationEvents();
+    return _el$15;
+  })();
+}
+_$delegateEvents(["pointerdown"]);
+//# sourceMappingURL=PdfViewer.js.map