react-book-reader 1.1.7 → 1.1.8

package/lib/paginator-CpnI4Urk.js

@@ -1,748 +0,0 @@
-const I = (o) => new Promise((t) => setTimeout(t, o)), C = (o, t, e) => {
-  let i;
-  return (...s) => {
-    const n = () => {
-      i = null, o(...s);
-    };
-    i && clearTimeout(i), i = setTimeout(n, t);
-  };
-}, S = (o, t, e) => e * (t - o) + o, B = (o) => 1 - (1 - o) * (1 - o), V = (o, t, e, i, s) => new Promise((n) => {
-  let r;
-  const a = (h) => {
-    if (document.hidden)
-      return s(S(o, t, 1)), n();
-    r ??= h;
-    const c = Math.min(1, (h - r) / e);
-    s(S(o, t, i(c))), c < 1 ? requestAnimationFrame(a) : n();
-  };
-  if (document.hidden)
-    return s(S(o, t, 1)), n();
-  requestAnimationFrame(a);
-}), N = (o) => {
-  if (!o?.collapsed) return o;
-  const { endOffset: t, endContainer: e } = o;
-  if (e.nodeType === 1) {
-    const i = e.childNodes[t];
-    return i?.nodeType === 1 ? i : e;
-  }
-  if (t + 1 < e.length) o.setEnd(e, t + 1);
-  else if (t > 1) o.setStart(e, t - 1);
-  else return e.parentNode;
-  return o;
-}, v = (o, t, e, i = e) => {
-  const s = o.createRange();
-  return s.setStart(t, e), s.setEnd(t, i), s;
-}, E = (o, t, e, i = 0, s = t.nodeValue.length) => {
-  if (s - i === 1)
-    return e(v(o, t, i), v(o, t, s)) < 0 ? i : s;
-  const n = Math.floor(i + (s - i) / 2), r = e(v(o, t, i, n), v(o, t, n, s));
-  return r < 0 ? E(o, t, e, i, n) : r > 0 ? E(o, t, e, n, s) : n;
-}, {
-  SHOW_ELEMENT: O,
-  SHOW_TEXT: F,
-  SHOW_CDATA_SECTION: D,
-  FILTER_ACCEPT: R,
-  FILTER_REJECT: M,
-  FILTER_SKIP: L
-} = NodeFilter, j = O | F | D, b = (o) => {
-  let t = 1 / 0, e = -1 / 0, i = 1 / 0, s = -1 / 0;
-  for (const n of o.getClientRects())
-    i = Math.min(i, n.left), t = Math.min(t, n.top), e = Math.max(e, n.right), s = Math.max(s, n.bottom);
-  return new DOMRect(i, t, e - i, s - t);
-}, $ = (o, t, e, i) => {
-  const s = (l) => {
-    const m = l.localName?.toLowerCase();
-    if (m === "script" || m === "style") return M;
-    if (l.nodeType === 1) {
-      const { left: u, right: g } = i(l.getBoundingClientRect());
-      if (g < t || u > e) return M;
-      if (u >= t && g <= e) return R;
-    } else {
-      if (!l.nodeValue?.trim()) return L;
-      const u = o.createRange();
-      u.selectNodeContents(l);
-      const { left: g, right: p } = i(u.getBoundingClientRect());
-      if (p >= t && g <= e) return R;
-    }
-    return L;
-  }, n = o.createTreeWalker(o.body, j, { acceptNode: s }), r = [];
-  for (let l = n.nextNode(); l; l = n.nextNode())
-    r.push(l);
-  const a = r[0] ?? o.body, h = r[r.length - 1] ?? a, c = a.nodeType === 1 ? 0 : E(o, a, (l, m) => {
-    const u = i(b(l)), g = i(b(m));
-    return u.right < t && g.left > t ? 0 : g.left > t ? -1 : 1;
-  }), f = h.nodeType === 1 ? 0 : E(o, h, (l, m) => {
-    const u = i(b(l)), g = i(b(m));
-    return u.right < e && g.left > e ? 0 : g.left > e ? -1 : 1;
-  }), d = o.createRange();
-  return d.setStart(a, c), d.setEnd(h, f), d;
-}, A = (o) => {
-  const t = document.createRange();
-  return t.setStart(o.anchorNode, o.anchorOffset), t.setEnd(o.focusNode, o.focusOffset), t.collapsed;
-}, w = (o, t) => {
-  let e;
-  if (o.startContainer ? e = o.cloneRange() : o.nodeType && (e = document.createRange(), e.selectNode(o)), e) {
-    const i = e.startContainer.ownerDocument.defaultView.getSelection();
-    i && (i.removeAllRanges(), t === -1 ? e.collapse(!0) : t === 1 && e.collapse(), i.addRange(e));
-  }
-}, W = (o) => {
-  const { defaultView: t } = o, { writingMode: e, direction: i } = t.getComputedStyle(o.body), s = e === "vertical-rl" || e === "vertical-lr", n = o.body.dir === "rtl" || i === "rtl" || o.documentElement.dir === "rtl";
-  return { vertical: s, rtl: n };
-}, _ = (o) => {
-  const t = o.defaultView.getComputedStyle(o.body);
-  return t.backgroundColor === "rgba(0, 0, 0, 0)" && t.backgroundImage === "none" ? o.defaultView.getComputedStyle(o.documentElement).background : t.background;
-}, P = (o, t) => Array.from({ length: o }, () => {
-  const e = document.createElement("div"), i = document.createElement("div");
-  return e.append(i), i.setAttribute("part", t), e;
-}), x = (o, t) => {
-  const { style: e } = o;
-  for (const [i, s] of Object.entries(t)) e.setProperty(i, s, "important");
-};
-class q {
-  #a = new ResizeObserver(() => this.expand());
-  #r = document.createElement("div");
-  #i = document.createElement("iframe");
-  #l = document.createRange();
-  #e;
-  #s = !1;
-  #c = !1;
-  #t = !0;
-  #n;
-  #o = {};
-  constructor({ container: t, onExpand: e }) {
-    this.container = t, this.onExpand = e, this.#i.setAttribute("part", "filter"), this.#r.append(this.#i), Object.assign(this.#r.style, {
-      boxSizing: "content-box",
-      position: "relative",
-      overflow: "hidden",
-      flex: "0 0 auto",
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    }), Object.assign(this.#i.style, {
-      overflow: "hidden",
-      border: "0",
-      display: "none",
-      width: "100%",
-      height: "100%"
-    }), this.#i.setAttribute("sandbox", "allow-same-origin allow-scripts"), this.#i.setAttribute("scrolling", "no");
-  }
-  get element() {
-    return this.#r;
-  }
-  get document() {
-    return this.#i.contentDocument;
-  }
-  async load(t, e, i) {
-    if (typeof t != "string") throw new Error(`${t} is not string`);
-    return new Promise((s) => {
-      this.#i.addEventListener("load", () => {
-        const n = this.document;
-        e?.(n), this.#i.style.display = "block";
-        const { vertical: r, rtl: a } = W(n), h = _(n);
-        this.#i.style.display = "none", this.#s = r, this.#c = a, this.#l.selectNodeContents(n.body);
-        const c = i?.({ vertical: r, rtl: a, background: h });
-        this.#i.style.display = "block", this.render(c), this.#a.observe(n.body), n.fonts.ready.then(() => this.expand()), s();
-      }, { once: !0 }), this.#i.src = t;
-    });
-  }
-  render(t) {
-    t && (this.#t = t.flow !== "scrolled", this.#o = t, this.#t ? this.columnize(t) : this.scrolled(t));
-  }
-  scrolled({ gap: t, columnWidth: e }) {
-    const i = this.#s, s = this.document;
-    x(s.documentElement, {
-      "box-sizing": "border-box",
-      padding: i ? `${t}px 0` : `0 ${t}px`,
-      "column-width": "auto",
-      height: "auto",
-      width: "auto"
-    }), x(s.body, {
-      [i ? "max-height" : "max-width"]: `${e}px`,
-      margin: "auto"
-    }), this.setImageSize(), this.expand();
-  }
-  columnize({ width: t, height: e, gap: i, columnWidth: s }) {
-    const n = this.#s;
-    this.#n = n ? e : t;
-    const r = this.document;
-    x(r.documentElement, {
-      "box-sizing": "border-box",
-      "column-width": `${Math.trunc(s)}px`,
-      "column-gap": `${i}px`,
-      "column-fill": "auto",
-      ...n ? { width: `${t}px` } : { height: `${e}px` },
-      padding: n ? `${i / 2}px 0` : `0 ${i / 2}px`,
-      overflow: "hidden",
-      // force wrap long words
-      "overflow-wrap": "break-word",
-      // reset some potentially problematic props
-      position: "static",
-      border: "0",
-      margin: "0",
-      "max-height": "none",
-      "max-width": "none",
-      "min-height": "none",
-      "min-width": "none",
-      // fix glyph clipping in WebKit
-      "-webkit-line-box-contain": "block glyphs replaced"
-    }), x(r.body, {
-      "max-height": "none",
-      "max-width": "none",
-      margin: "0"
-    }), this.setImageSize(), this.expand();
-  }
-  setImageSize() {
-    const { width: t, height: e, margin: i } = this.#o, s = this.#s, n = this.document;
-    for (const r of n.body.querySelectorAll("img, svg, video")) {
-      const { maxHeight: a, maxWidth: h } = n.defaultView.getComputedStyle(r);
-      x(r, {
-        "max-height": s ? a !== "none" && a !== "0px" ? a : "100%" : `${e - i * 2}px`,
-        "max-width": s ? `${t - i * 2}px` : h !== "none" && h !== "0px" ? h : "100%",
-        "object-fit": "contain",
-        "page-break-inside": "avoid",
-        "break-inside": "avoid",
-        "box-sizing": "border-box"
-      });
-    }
-  }
-  expand() {
-    const { documentElement: t } = this.document;
-    if (this.#t) {
-      const e = this.#s ? "height" : "width", i = this.#s ? "width" : "height", s = this.#l.getBoundingClientRect(), n = t.getBoundingClientRect(), a = (this.#s ? 0 : this.#c ? n.right - s.right : s.left - n.left) + s[e], c = Math.ceil(a / this.#n) * this.#n;
-      this.#r.style.padding = "0", this.#i.style[e] = `${c}px`, this.#r.style[e] = `${c + this.#n * 2}px`, this.#i.style[i] = "100%", this.#r.style[i] = "100%", t.style[e] = `${this.#n}px`, this.#e && (this.#e.element.style.margin = "0", this.#e.element.style.left = this.#s ? "0" : `${this.#n}px`, this.#e.element.style.top = this.#s ? `${this.#n}px` : "0", this.#e.element.style[e] = `${c}px`, this.#e.redraw());
-    } else {
-      const e = this.#s ? "width" : "height", i = this.#s ? "height" : "width", n = t.getBoundingClientRect()[e], { margin: r } = this.#o, a = this.#s ? `0 ${r}px` : `${r}px 0`;
-      this.#r.style.padding = a, this.#i.style[e] = `${n}px`, this.#r.style[e] = `${n}px`, this.#i.style[i] = "100%", this.#r.style[i] = "100%", this.#e && (this.#e.element.style.margin = a, this.#e.element.style.left = "0", this.#e.element.style.top = "0", this.#e.element.style[e] = `${n}px`, this.#e.redraw());
-    }
-    this.onExpand();
-  }
-  set overlayer(t) {
-    this.#e = t, this.#r.append(t.element);
-  }
-  get overlayer() {
-    return this.#e;
-  }
-  destroy() {
-    this.document && this.#a.unobserve(this.document.body);
-  }
-}
-class H extends HTMLElement {
-  static observedAttributes = [
-    "flow",
-    "gap",
-    "margin",
-    "max-inline-size",
-    "max-block-size",
-    "max-column-count"
-  ];
-  #a = this.attachShadow({ mode: "closed" });
-  #r = new ResizeObserver(() => this.render());
-  #i;
-  #l;
-  #e;
-  #s;
-  #c;
-  #t;
-  #n = !1;
-  #o = !1;
-  #g = 0;
-  #d = -1;
-  #h = 0;
-  // anchor view to a fraction (0-1), Range, or Element
-  #E = !1;
-  #x = !1;
-  // while true, prevent any further navigation
-  #T;
-  #k = /* @__PURE__ */ new WeakMap();
-  #C = matchMedia("(prefers-color-scheme: dark)");
-  #S;
-  #m;
-  #v;
-  #_;
-  #R;
-  constructor() {
-    super(), this.#a.innerHTML = `<style>
-        :host {
-            display: block;
-            container-type: size;
-        }
-        :host, #top {
-            box-sizing: border-box;
-            position: relative;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-        }
-        #top {
-            --_gap: 7%;
-            --_margin: 48px;
-            --_max-inline-size: 720px;
-            --_max-block-size: 1440px;
-            --_max-column-count: 2;
-            --_max-column-count-portrait: 1;
-            --_max-column-count-spread: var(--_max-column-count);
-            --_half-gap: calc(var(--_gap) / 2);
-            --_max-width: calc(var(--_max-inline-size) * var(--_max-column-count-spread));
-            --_max-height: var(--_max-block-size);
-            display: grid;
-            grid-template-columns:
-                minmax(var(--_half-gap), 1fr)
-                var(--_half-gap)
-                minmax(0, calc(var(--_max-width) - var(--_gap)))
-                var(--_half-gap)
-                minmax(var(--_half-gap), 1fr);
-            grid-template-rows:
-                minmax(var(--_margin), 1fr)
-                minmax(0, var(--_max-height))
-                minmax(var(--_margin), 1fr);
-            &.vertical {
-                --_max-column-count-spread: var(--_max-column-count-portrait);
-                --_max-width: var(--_max-block-size);
-                --_max-height: calc(var(--_max-inline-size) * var(--_max-column-count-spread));
-            }
-            @container (orientation: portrait) {
-                & {
-                    --_max-column-count-spread: var(--_max-column-count-portrait);
-                }
-                &.vertical {
-                    --_max-column-count-spread: var(--_max-column-count);
-                }
-            }
-        }
-        #background {
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
-        }
-        #container {
-            grid-column: 2 / 5;
-            grid-row: 2;
-            overflow: hidden;
-        }
-        :host([flow="scrolled"]) #container {
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
-            overflow: auto;
-        }
-        #header {
-            grid-column: 3 / 4;
-            grid-row: 1;
-        }
-        #footer {
-            grid-column: 3 / 4;
-            grid-row: 3;
-            align-self: end;
-        }
-        #header, #footer {
-            display: grid;
-            height: var(--_margin);
-        }
-        :is(#header, #footer) > * {
-            display: flex;
-            align-items: center;
-            min-width: 0;
-        }
-        :is(#header, #footer) > * > * {
-            width: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            text-align: center;
-            font-size: .75em;
-            opacity: .6;
-        }
-        </style>
-        <div id="top">
-            <div id="background" part="filter"></div>
-            <div id="header"></div>
-            <div id="container"></div>
-            <div id="footer"></div>
-        </div>
-        `, this.#i = this.#a.getElementById("top"), this.#l = this.#a.getElementById("background"), this.#e = this.#a.getElementById("container"), this.#s = this.#a.getElementById("header"), this.#c = this.#a.getElementById("footer"), this.#r.observe(this.#e), this.#e.addEventListener("scroll", () => this.dispatchEvent(new Event("scroll"))), this.#e.addEventListener("scroll", C(() => {
-      this.scrolled && (this.#E ? this.#E = !1 : this.#w("scroll"));
-    }, 250));
-    const t = { passive: !1 };
-    this.addEventListener("touchstart", this.#L.bind(this), t), this.addEventListener("touchmove", this.#$.bind(this), t), this.addEventListener("touchend", this.#A.bind(this)), this.addEventListener("load", ({ detail: { doc: i } }) => {
-      i.addEventListener("touchstart", this.#L.bind(this), t), i.addEventListener("touchmove", this.#$.bind(this), t), i.addEventListener("touchend", this.#A.bind(this));
-    }), this.addEventListener("relocate", ({ detail: i }) => {
-      i.reason === "selection" ? w(this.#h, 0) : i.reason === "navigation" && (this.#h === 1 ? w(i.range, 1) : typeof this.#h == "number" ? w(i.range, -1) : w(this.#h, -1));
-    });
-    const e = C((i, s) => {
-      if (!s.rangeCount) return;
-      const n = s.getRangeAt(0), r = A(s);
-      r && n.compareBoundaryPoints(Range.START_TO_START, i) < 0 ? this.prev() : !r && n.compareBoundaryPoints(Range.END_TO_END, i) > 0 && this.next();
-    }, 700);
-    this.addEventListener("load", ({ detail: { doc: i } }) => {
-      let s = !1;
-      i.addEventListener("pointerdown", () => s = !0), i.addEventListener("pointerup", () => s = !1);
-      let n = !1;
-      i.addEventListener("keydown", () => n = !0), i.addEventListener("keyup", () => n = !1), i.addEventListener("selectionchange", () => {
-        if (this.scrolled) return;
-        const r = this.#R;
-        if (!r) return;
-        const a = i.getSelection();
-        if (a.rangeCount) {
-          if (s && a.type === "Range")
-            e(r, a);
-          else if (n) {
-            const h = a.getRangeAt(0).cloneRange();
-            A(a) || h.collapse(), this.#y(h);
-          }
-        }
-      }), i.addEventListener("focusin", (r) => this.scrolled ? null : (
-        // NOTE: `requestAnimationFrame` is needed in WebKit
-        requestAnimationFrame(() => this.#y(r.target))
-      ));
-    }), this.#S = () => {
-      this.#t && (this.#l.style.background = _(this.#t.document));
-    }, this.#C.addEventListener("change", this.#S);
-  }
-  attributeChangedCallback(t, e, i) {
-    switch (t) {
-      case "flow":
-        this.render();
-        break;
-      case "gap":
-      case "margin":
-      case "max-block-size":
-      case "max-column-count":
-        this.#i.style.setProperty("--_" + t, i);
-        break;
-      case "max-inline-size":
-        this.#i.style.setProperty("--_" + t, i), this.render();
-        break;
-    }
-  }
-  open(t) {
-    this.bookDir = t.dir, this.sections = t.sections, t.transformTarget?.addEventListener("data", ({ detail: e }) => {
-      if (e.type !== "text/css") return;
-      const i = innerWidth, s = innerHeight;
-      e.data = Promise.resolve(e.data).then((n) => n.replace(new RegExp("(?<=[{\\s;])-epub-", "gi"), "").replace(/(\d*\.?\d+)vw/gi, (r, a) => parseFloat(a) * i / 100 + "px").replace(/(\d*\.?\d+)vh/gi, (r, a) => parseFloat(a) * s / 100 + "px").replace(/page-break-(after|before|inside)\s*:/gi, (r, a) => `-webkit-column-break-${a}:`).replace(/break-(after|before|inside)\s*:\s*(avoid-)?page/gi, (r, a, h) => `break-${a}: ${h ?? ""}column`));
-    });
-  }
-  #V() {
-    return this.#t && (this.#t.destroy(), this.#e.removeChild(this.#t.element)), this.#t = new q({
-      container: this,
-      onExpand: () => this.#y(this.#h)
-    }), this.#e.append(this.#t.element), this.#t;
-  }
-  #M({ vertical: t, rtl: e, background: i }) {
-    this.#n = t, this.#o = e, this.#i.classList.toggle("vertical", t), this.#l.style.background = i;
-    const { width: s, height: n } = this.#e.getBoundingClientRect(), r = t ? n : s, a = getComputedStyle(this.#i), h = parseFloat(a.getPropertyValue("--_max-inline-size")), c = parseInt(a.getPropertyValue("--_max-column-count-spread")), f = parseFloat(a.getPropertyValue("--_margin"));
-    this.#g = f;
-    const d = parseFloat(a.getPropertyValue("--_gap")) / 100, l = -d / (d - 1) * r, m = this.getAttribute("flow");
-    if (m === "scrolled") {
-      this.setAttribute("dir", t ? "rtl" : "ltr"), this.#i.style.padding = "0";
-      const y = h;
-      return this.heads = null, this.feet = null, this.#s.replaceChildren(), this.#c.replaceChildren(), { flow: m, margin: f, gap: l, columnWidth: y };
-    }
-    const u = Math.min(c, Math.ceil(r / h)), g = r / u - l;
-    this.setAttribute("dir", e ? "rtl" : "ltr");
-    const p = t ? Math.min(2, Math.ceil(s / h)) : u, z = {
-      gridTemplateColumns: `repeat(${p}, 1fr)`,
-      gap: `${l}px`,
-      direction: this.bookDir === "rtl" ? "rtl" : "ltr"
-    };
-    Object.assign(this.#s.style, z), Object.assign(this.#c.style, z);
-    const T = P(p, "head"), k = P(p, "foot");
-    return this.heads = T.map((y) => y.children[0]), this.feet = k.map((y) => y.children[0]), this.#s.replaceChildren(...T), this.#c.replaceChildren(...k), { height: n, width: s, margin: f, gap: l, columnWidth: g };
-  }
-  render() {
-    this.#t && (this.#t.render(this.#M({
-      vertical: this.#n,
-      rtl: this.#o
-    })), this.#y(this.#h));
-  }
-  get scrolled() {
-    return this.getAttribute("flow") === "scrolled";
-  }
-  get scrollProp() {
-    const { scrolled: t } = this;
-    return this.#n ? t ? "scrollLeft" : "scrollTop" : t ? "scrollTop" : "scrollLeft";
-  }
-  get sideProp() {
-    const { scrolled: t } = this;
-    return this.#n ? t ? "width" : "height" : t ? "height" : "width";
-  }
-  get size() {
-    return this.#e.getBoundingClientRect()[this.sideProp];
-  }
-  get viewSize() {
-    return this.#t.element.getBoundingClientRect()[this.sideProp];
-  }
-  get start() {
-    return Math.abs(this.#e[this.scrollProp]);
-  }
-  get end() {
-    return this.start + this.size;
-  }
-  get page() {
-    return Math.floor((this.start + this.end) / 2 / this.size);
-  }
-  get pages() {
-    return Math.round(this.viewSize / this.size);
-  }
-  scrollBy(t, e) {
-    const i = this.#n ? e : t, s = this.#e, { scrollProp: n } = this, [r, a, h] = this.#m, c = this.#o, f = c ? r - h : r - a, d = c ? r + a : r + h;
-    s[n] = Math.max(f, Math.min(
-      d,
-      s[n] + i
-    ));
-  }
-  snap(t, e) {
-    const i = this.#n ? e : t, [s, n, r] = this.#m, { start: a, end: h, pages: c, size: f } = this, d = Math.abs(s) - n, l = Math.abs(s) + r, m = i * (this.#o ? -f : f), u = Math.floor(
-      Math.max(d, Math.min(l, (a + h) / 2 + (isNaN(m) ? 0 : m))) / f
-    );
-    this.#p(u, "snap").then(() => {
-      const g = u <= 0 ? -1 : u >= c - 1 ? 1 : null;
-      if (g) return this.#z({
-        index: this.#u(g),
-        anchor: g < 0 ? () => 1 : () => 0
-      });
-    });
-  }
-  #L(t) {
-    const e = t.changedTouches[0];
-    this.#v = {
-      x: e?.screenX,
-      y: e?.screenY,
-      t: t.timeStamp,
-      vx: 0,
-      xy: 0
-    };
-  }
-  #$(t) {
-    const e = this.#v;
-    if (e.pinched || (e.pinched = globalThis.visualViewport.scale > 1, this.scrolled || e.pinched)) return;
-    if (t.touches.length > 1) {
-      this.#_ && t.preventDefault();
-      return;
-    }
-    t.preventDefault();
-    const i = t.changedTouches[0], s = i.screenX, n = i.screenY, r = e.x - s, a = e.y - n, h = t.timeStamp - e.t;
-    e.x = s, e.y = n, e.t = t.timeStamp, e.vx = r / h, e.vy = a / h, this.#_ = !0, this.scrollBy(r, a);
-  }
-  #A() {
-    this.#_ = !1, !this.scrolled && requestAnimationFrame(() => {
-      globalThis.visualViewport.scale === 1 && this.snap(this.#v.vx, this.#v.vy);
-    });
-  }
-  // allows one to process rects as if they were LTR and horizontal
-  #b() {
-    if (this.scrolled) {
-      const e = this.viewSize, i = this.#g;
-      return this.#n ? ({ left: s, right: n }) => ({ left: e - n - i, right: e - s - i }) : ({ top: s, bottom: n }) => ({ left: s + i, right: n + i });
-    }
-    const t = this.pages * this.size;
-    return this.#o ? ({ left: e, right: i }) => ({ left: t - i, right: t - e }) : this.#n ? ({ top: e, bottom: i }) => ({ left: e, right: i }) : (e) => e;
-  }
-  async #N(t, e) {
-    if (this.scrolled) {
-      const s = this.#b()(t).left - this.#g;
-      return this.#f(s, e);
-    }
-    const i = this.#b()(t).left;
-    return this.#p(Math.floor(i / this.size) + (this.#o ? -1 : 1), e);
-  }
-  async #f(t, e, i) {
-    const s = this.#e, { scrollProp: n, size: r } = this;
-    if (s[n] === t) {
-      this.#m = [t, this.atStart ? 0 : r, this.atEnd ? 0 : r], this.#w(e);
-      return;
-    }
-    if (this.scrolled && this.#n && (t = -t), (e === "snap" || i) && this.hasAttribute("animated")) return V(
-      s[n],
-      t,
-      300,
-      B,
-      (a) => s[n] = a
-    ).then(() => {
-      this.#m = [t, this.atStart ? 0 : r, this.atEnd ? 0 : r], this.#w(e);
-    });
-    s[n] = t, this.#m = [t, this.atStart ? 0 : r, this.atEnd ? 0 : r], this.#w(e);
-  }
-  async #p(t, e, i) {
-    const s = this.size * (this.#o ? -t : t);
-    return this.#f(s, e, i);
-  }
-  async scrollToAnchor(t, e) {
-    return this.#y(t, e ? "selection" : "navigation");
-  }
-  async #y(t, e = "anchor") {
-    this.#h = t;
-    const i = N(t)?.getClientRects?.();
-    if (i) {
-      const a = Array.from(i).find((h) => h.width > 0 && h.height > 0) || i[0];
-      if (!a) return;
-      await this.#N(a, e);
-      return;
-    }
-    if (this.scrolled) {
-      await this.#f(t * this.viewSize, e);
-      return;
-    }
-    const { pages: s } = this;
-    if (!s) return;
-    const n = s - 2, r = Math.round(t * (n - 1));
-    await this.#p(r + 1, e);
-  }
-  #O() {
-    if (this.scrolled) return $(
-      this.#t.document,
-      this.start + this.#g,
-      this.end - this.#g,
-      this.#b()
-    );
-    const t = this.#o ? -this.size : this.size;
-    return $(
-      this.#t.document,
-      this.start - t,
-      this.end - t,
-      this.#b()
-    );
-  }
-  #w(t) {
-    const e = this.#O();
-    this.#R = e, t !== "selection" && t !== "navigation" && t !== "anchor" ? this.#h = e : this.#E = !0;
-    const i = this.#d, s = { reason: t, range: e, index: i };
-    if (this.scrolled) s.fraction = this.start / this.viewSize;
-    else if (this.pages > 0) {
-      const { page: n, pages: r } = this;
-      this.#s.style.visibility = n > 1 ? "visible" : "hidden", s.fraction = (n - 1) / (r - 2), s.size = 1 / (r - 2);
-    }
-    this.dispatchEvent(new CustomEvent("relocate", { detail: s }));
-  }
-  async #P(t) {
-    const { index: e, src: i, anchor: s, onLoad: n, select: r } = await t;
-    this.#d = e;
-    const a = this.#t?.document?.hasFocus();
-    if (i) {
-      const h = this.#V(), c = (d) => {
-        if (d.head) {
-          const l = d.createElement("style");
-          d.head.prepend(l);
-          const m = d.createElement("style");
-          d.head.append(m), this.#k.set(d, [l, m]);
-        }
-        n?.({ doc: d, index: e });
-      }, f = this.#M.bind(this);
-      await h.load(i, c, f), this.dispatchEvent(new CustomEvent("create-overlayer", {
-        detail: {
-          doc: h.document,
-          index: e,
-          attach: (d) => h.overlayer = d
-        }
-      })), this.#t = h;
-    }
-    await this.scrollToAnchor((typeof s == "function" ? s(this.#t.document) : s) ?? 0, r), a && this.focusView();
-  }
-  #I(t) {
-    return t >= 0 && t <= this.sections.length - 1;
-  }
-  async #z({ index: t, anchor: e, select: i }) {
-    if (t === this.#d) await this.#P({ index: t, anchor: e, select: i });
-    else {
-      const s = this.#d, n = (r) => {
-        this.sections[s]?.unload?.(), this.setStyles(this.#T), this.dispatchEvent(new CustomEvent("load", { detail: r }));
-      };
-      await this.#P(Promise.resolve(this.sections[t].load()).then((r) => ({ index: t, src: r, anchor: e, onLoad: n, select: i })).catch((r) => (console.warn(r), console.warn(new Error(`Failed to load section ${t}`)), {})));
-    }
-  }
-  async goTo(t) {
-    if (this.#x) return;
-    const e = await t;
-    if (this.#I(e.index)) return this.#z(e);
-  }
-  #F(t) {
-    if (!this.#t) return !0;
-    if (this.scrolled)
-      return this.start > 0 ? this.#f(
-        Math.max(0, this.start - (t ?? this.size)),
-        null,
-        !0
-      ) : !0;
-    if (this.atStart) return;
-    const e = this.page - 1;
-    return this.#p(e, "page", !0).then(() => e <= 0);
-  }
-  #D(t) {
-    if (!this.#t) return !0;
-    if (this.scrolled)
-      return this.viewSize - this.end > 2 ? this.#f(
-        Math.min(this.viewSize, t ? this.start + t : this.end),
-        null,
-        !0
-      ) : !0;
-    if (this.atEnd) return;
-    const e = this.page + 1, i = this.pages;
-    return this.#p(e, "page", !0).then(() => e >= i - 1);
-  }
-  get atStart() {
-    return this.#u(-1) == null && this.page <= 1;
-  }
-  get atEnd() {
-    return this.#u(1) == null && this.page >= this.pages - 2;
-  }
-  #u(t) {
-    for (let e = this.#d + t; this.#I(e); e += t)
-      if (this.sections[e]?.linear !== "no") return e;
-  }
-  async #B(t, e) {
-    if (this.#x) return;
-    this.#x = !0;
-    const i = t === -1, s = await (i ? this.#F(e) : this.#D(e));
-    s && await this.#z({
-      index: this.#u(t),
-      anchor: i ? () => 1 : () => 0
-    }), (s || !this.hasAttribute("animated")) && await I(100), this.#x = !1;
-  }
-  prev(t) {
-    return this.#B(-1, t);
-  }
-  next(t) {
-    return this.#B(1, t);
-  }
-  prevSection() {
-    return this.goTo({ index: this.#u(-1) });
-  }
-  nextSection() {
-    return this.goTo({ index: this.#u(1) });
-  }
-  firstSection() {
-    const t = this.sections.findIndex((e) => e.linear !== "no");
-    return this.goTo({ index: t });
-  }
-  lastSection() {
-    const t = this.sections.findLastIndex((e) => e.linear !== "no");
-    return this.goTo({ index: t });
-  }
-  getContents() {
-    return this.#t ? [{
-      index: this.#d,
-      overlayer: this.#t.overlayer,
-      doc: this.#t.document
-    }] : [];
-  }
-  setStyles(t) {
-    this.#T = t;
-    const e = this.#k.get(this.#t?.document);
-    if (!e) return;
-    const [i, s] = e;
-    if (Array.isArray(t)) {
-      const [n, r] = t;
-      i.textContent = n, s.textContent = r;
-    } else s.textContent = t;
-    requestAnimationFrame(() => this.#l.style.background = _(this.#t.document)), this.#t?.document?.fonts?.ready?.then(() => this.#t.expand());
-  }
-  focusView() {
-    this.#t.document.defaultView.focus();
-  }
-  destroy() {
-    this.#r.unobserve(this), this.#t.destroy(), this.#t = null, this.sections[this.#d]?.unload?.(), this.#C.removeEventListener("change", this.#S);
-  }
-}
-customElements.define("foliate-paginator", H);
-export {
-  H as Paginator
-};