react-book-reader 1.0.0 → 1.1.0

package/lib/paginator-CpnI4Urk.js

@@ -0,0 +1,748 @@
+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
+};