@prose-reader/react-reader 1.178.0 → 1.180.0

package/dist/index.js

@@ -1,81 +1,122 @@
-import { jsx as n, jsxs as c, Fragment as A } from "react/jsx-runtime";
-import * as I from "react";
-import { createContext as L, memo as P, useContext as N, useState as $, useEffect as y, useCallback as z } from "react";
-import { Box as S, Text as m, Popover as g, Portal as _, IconButton as f, Progress as x, Stack as O, HStack as k, Presence as R, chakra as V } from "@chakra-ui/react";
-import { useObserve as b, useSubscribe as j, useSignal as U } from "reactjrx";
-import { NEVER as G, combineLatest as H, map as Q } from "rxjs";
-import { RxDoubleArrowUp as Y, RxDoubleArrowLeft as q, RxDoubleArrowDown as J, RxDoubleArrowRight as K } from "react-icons/rx";
-import { HiOutlineInformationCircle as X } from "react-icons/hi";
-import Z from "rc-slider";
+import { jsx as t, jsxs as a, Fragment as E } from "react/jsx-runtime";
+import * as C from "react";
+import ie, { createContext as le, memo as b, useMemo as se, useEffect as B, useContext as _, useState as R, useCallback as q } from "react";
+import { signal as ce, useSignal as U, useLiveRef as ae, useSubscribe as Y, useObserve as v, useSignalValue as de } from "reactjrx";
+import { tap as ue, NEVER as he, combineLatest as ge, map as fe } from "rxjs";
+import { Box as z, Text as f, Popover as I, Portal as Q, IconButton as p, Progress as O, Stack as y, HStack as x, Presence as L, chakra as me, Collapsible as M, Dialog as g, Heading as j, Kbd as N, Button as G, List as w, Link as pe } from "@chakra-ui/react";
+import { LuChevronDown as be, LuCircleHelp as xe, LuTableOfContents as Ce, LuX as Ie, LuArrowBigRight as ve, LuArrowBigLeft as Pe, LuCircleCheck as V } from "react-icons/lu";
+import { RxDoubleArrowUp as Se, RxDoubleArrowLeft as Te, RxDoubleArrowDown as ke, RxDoubleArrowRight as we } from "react-icons/rx";
+import { HiOutlineInformationCircle as Re } from "react-icons/hi";
+import Oe from "rc-slider";
 import "rc-slider/assets/index.css";
-import { IoIosArrowBack as ee, IoMdMore as te } from "react-icons/io";
-import { MdFullscreenExit as re, MdFullscreen as ne } from "react-icons/md";
-const E = L(void 0), $e = P(
+import { IoIosArrowBack as ye, IoMdMore as De } from "react-icons/io";
+import { MdFullscreenExit as Ae, MdFullscreen as Be } from "react-icons/md";
+const F = le({
+  reader: void 0,
+  quickMenuSignal: ce({ default: !1 })
+}), mt = b(
   ({
     children: e,
-    reader: t
-  }) => /* @__PURE__ */ n(E.Provider, { value: t, children: e })
-), v = () => N(E), p = () => {
-  const e = v();
-  return b(
-    () => e ? H([e.pagination.state$, e.context.state$]).pipe(
-      Q(([t, r]) => {
-        var s;
-        const o = (s = r.manifest) == null ? void 0 : s.spineItems.every(
-          (i) => {
-            var l;
-            return (l = i.mediaType) == null ? void 0 : l.startsWith("image/");
+    reader: n,
+    quickMenuOpen: r,
+    onQuickMenuOpenChange: i
+  }) => {
+    const [, o] = U({
+      default: r
+    }), l = ae(i), c = se(
+      () => ({
+        quickMenuSignal: o,
+        reader: n
+      }),
+      [o, n]
+    );
+    return B(() => {
+      o.setValue(r);
+    }, [r, o]), Y(
+      () => o.subject.pipe(ue(l.current)),
+      [o, l]
+    ), /* @__PURE__ */ t(F.Provider, { value: c, children: e });
+  }
+), D = () => {
+  const { reader: e } = _(F);
+  return e;
+}, P = () => {
+  const e = D();
+  return v(
+    () => e ? ge([e.pagination.state$, e.context.state$]).pipe(
+      fe(([n, r]) => {
+        var o;
+        const i = (o = r.manifest) == null ? void 0 : o.spineItems.every(
+          (l) => {
+            var c;
+            return (c = l.mediaType) == null ? void 0 : c.startsWith("image/");
           }
         );
         return {
-          ...t,
-          hasChapters: !r.isFullyPrePaginated && !o
+          ...n,
+          hasChapters: !r.isFullyPrePaginated && !i
         };
       })
-    ) : G,
+    ) : he,
     [e]
   );
-}, oe = () => {
-  const e = p(), t = Math.floor(
+}, ze = () => {
+  const e = P(), n = Math.floor(
     ((e == null ? void 0 : e.percentageEstimateOfBook) ?? 0) * 100
-  ), r = t > 0 ? t : 1;
-  return (e == null ? void 0 : e.percentageEstimateOfBook) === void 0 ? null : /* @__PURE__ */ n(S, { position: "absolute", right: 0, bottom: 0, p: 2, children: /* @__PURE__ */ c(m, { fontSize: "sm", children: [
+  ), r = n > 0 ? n : 1;
+  return (e == null ? void 0 : e.percentageEstimateOfBook) === void 0 ? null : /* @__PURE__ */ t(z, { position: "absolute", right: 0, bottom: 0, p: 2, color: "black", children: /* @__PURE__ */ a(f, { fontSize: "sm", children: [
     r,
     " %"
   ] }) });
-}, se = () => {
-  const [e, t] = $(/* @__PURE__ */ new Date());
-  return y(() => {
+}, Me = () => {
+  const [e, n] = R(/* @__PURE__ */ new Date());
+  return B(() => {
     const r = setInterval(() => {
-      t(/* @__PURE__ */ new Date());
+      n(/* @__PURE__ */ new Date());
     }, 6e4);
     return () => clearInterval(r);
   }, []), e;
-}, ie = (e) => {
-  const t = se();
-  return /* @__PURE__ */ n(m, { fontSize: "xs", ...e, children: t.toLocaleTimeString(navigator.language, {
+}, Le = (e) => {
+  const n = Me();
+  return /* @__PURE__ */ t(f, { fontSize: "xs", ...e, children: n.toLocaleTimeString(navigator.language, {
     hour: "2-digit",
     minute: "2-digit"
   }) });
-}, le = () => /* @__PURE__ */ n(S, { position: "absolute", left: 0, bottom: 0, p: 2, children: /* @__PURE__ */ n(ie, {}) }), ce = I.forwardRef(
-  function(t, r) {
+}, $ = () => {
+  const { quickMenuSignal: e } = _(F);
+  return [de(e), e.setValue, e];
+}, Ee = () => {
+  const [e] = $();
+  return /* @__PURE__ */ t(
+    z,
+    {
+      position: "absolute",
+      left: 0,
+      bottom: 0,
+      p: 2,
+      color: e ? void 0 : "colorPalette.contrast",
+      children: /* @__PURE__ */ t(Le, {})
+    }
+  );
+}, Fe = C.forwardRef(
+  function(n, r) {
     const {
-      showArrow: o,
-      children: s,
-      portalled: i = !0,
-      content: l,
-      portalRef: u,
-      ...a
-    } = t;
-    return /* @__PURE__ */ c(
-      g.Root,
+      showArrow: i,
+      children: o,
+      portalled: l = !0,
+      content: c,
+      portalRef: d,
+      ...u
+    } = n;
+    return /* @__PURE__ */ a(
+      I.Root,
       {
-        ...a,
-        positioning: { ...a.positioning, gutter: 4 },
+        ...u,
+        positioning: { ...u.positioning, gutter: 4 },
         children: [
-          /* @__PURE__ */ n(g.Trigger, { asChild: !0, children: s }),
-          /* @__PURE__ */ n(_, { disabled: !i, container: u, children: /* @__PURE__ */ n(g.Positioner, { children: /* @__PURE__ */ c(
-            g.Content,
+          /* @__PURE__ */ t(I.Trigger, { asChild: !0, children: o }),
+          /* @__PURE__ */ t(Q, { disabled: !l, container: d, children: /* @__PURE__ */ t(I.Positioner, { children: /* @__PURE__ */ a(
+            I.Content,
             {
               width: "auto",
               px: "2",
@@ -84,8 +125,8 @@ const E = L(void 0), $e = P(
               rounded: "sm",
               ref: r,
               children: [
-                o && /* @__PURE__ */ n(g.Arrow, { children: /* @__PURE__ */ n(g.ArrowTip, {}) }),
-                l
+                i && /* @__PURE__ */ t(I.Arrow, { children: /* @__PURE__ */ t(I.ArrowTip, {}) }),
+                c
               ]
             }
           ) }) })
@@ -93,63 +134,63 @@ const E = L(void 0), $e = P(
       }
     );
   }
-), ae = I.forwardRef(function(t, r) {
-  const { children: o, ...s } = t;
-  return /* @__PURE__ */ n(ce, { content: o, ...s, ref: r, children: /* @__PURE__ */ n(
-    f,
+), $e = C.forwardRef(function(n, r) {
+  const { children: i, ...o } = n;
+  return /* @__PURE__ */ t(Fe, { content: i, ...o, ref: r, children: /* @__PURE__ */ t(
+    p,
     {
       variant: "ghost",
       "aria-label": "info",
       size: "2xs",
       colorPalette: "gray",
-      children: /* @__PURE__ */ n(X, {})
+      children: /* @__PURE__ */ t(Re, {})
     }
   ) });
-}), de = I.forwardRef(function(t, r) {
-  return /* @__PURE__ */ n(x.Track, { ...t, ref: r, children: /* @__PURE__ */ n(x.Range, {}) });
+}), He = C.forwardRef(function(n, r) {
+  return /* @__PURE__ */ t(O.Track, { ...n, ref: r, children: /* @__PURE__ */ t(O.Range, {}) });
 });
-I.forwardRef(function(t, r) {
-  const { children: o, info: s, ...i } = t;
-  return /* @__PURE__ */ c(x.Label, { ...i, ref: r, children: [
-    o,
-    s && /* @__PURE__ */ n(ae, { children: s })
+C.forwardRef(function(n, r) {
+  const { children: i, info: o, ...l } = n;
+  return /* @__PURE__ */ a(O.Label, { ...l, ref: r, children: [
+    i,
+    o && /* @__PURE__ */ t($e, { children: o })
   ] });
 });
-const ue = x.Root, me = x.ValueText, B = () => {
-  const e = p(), t = (e == null ? void 0 : e.numberOfTotalPages) === 1, r = ((e == null ? void 0 : e.beginNumberOfPagesInSpineItem) ?? 0) > 1, o = ((e == null ? void 0 : e.endNumberOfPagesInSpineItem) ?? 0) > 1, s = (e != null && e.hasChapters ? e == null ? void 0 : e.beginPageIndexInSpineItem : e == null ? void 0 : e.beginAbsolutePageIndex) ?? 0, i = (e != null && e.hasChapters ? e == null ? void 0 : e.endPageIndexInSpineItem : e == null ? void 0 : e.endAbsolutePageIndex) ?? 0, [l = 0, u = 0] = [
-    s,
-    i
-  ].sort((h, C) => h - C), a = (e == null ? void 0 : e.beginPageIndexInSpineItem) !== (e == null ? void 0 : e.endPageIndexInSpineItem) || (e == null ? void 0 : e.beginSpineItemIndex) !== (e == null ? void 0 : e.endSpineItemIndex), d = e != null && e.hasChapters ? e == null ? void 0 : e.beginNumberOfPagesInSpineItem : e == null ? void 0 : e.numberOfTotalPages;
+const We = O.Root, je = O.ValueText, H = () => {
+  const e = P(), n = (e == null ? void 0 : e.numberOfTotalPages) === 1, r = ((e == null ? void 0 : e.beginNumberOfPagesInSpineItem) ?? 0) > 1, i = ((e == null ? void 0 : e.endNumberOfPagesInSpineItem) ?? 0) > 1, o = (e != null && e.hasChapters ? e == null ? void 0 : e.beginPageIndexInSpineItem : e == null ? void 0 : e.beginAbsolutePageIndex) ?? 0, l = (e != null && e.hasChapters ? e == null ? void 0 : e.endPageIndexInSpineItem : e == null ? void 0 : e.endAbsolutePageIndex) ?? 0, [c = 0, d = 0] = [
+    o,
+    l
+  ].sort((m, h) => m - h), u = (e == null ? void 0 : e.beginPageIndexInSpineItem) !== (e == null ? void 0 : e.endPageIndexInSpineItem) || (e == null ? void 0 : e.beginSpineItemIndex) !== (e == null ? void 0 : e.endSpineItemIndex), s = e != null && e.hasChapters ? e == null ? void 0 : e.beginNumberOfPagesInSpineItem : e == null ? void 0 : e.numberOfTotalPages;
   return {
-    hasOnlyOnePage: t,
-    beginPageIndex: s,
-    endPageIndex: i,
+    hasOnlyOnePage: n,
+    beginPageIndex: o,
+    endPageIndex: l,
     isBeginWithinChapter: r,
-    isEndWithinChapter: o,
-    beginAndEndAreDifferent: a,
-    totalApproximatePages: d,
-    leftPageIndex: l,
-    rightPageIndex: u
+    isEndWithinChapter: i,
+    beginAndEndAreDifferent: u,
+    totalApproximatePages: s,
+    leftPageIndex: c,
+    rightPageIndex: d
   };
-}, he = () => {
-  const e = p(), {
-    hasOnlyOnePage: t,
+}, Ne = () => {
+  const e = P(), {
+    hasOnlyOnePage: n,
     leftPageIndex: r,
-    rightPageIndex: o,
-    totalApproximatePages: s,
-    beginAndEndAreDifferent: i
-  } = B(), l = Math.round(((e == null ? void 0 : e.percentageEstimateOfBook) ?? 0) * 100), u = (d) => d != null && d.subChapter ? `${d.title} / ${u(d.subChapter)}` : (d == null ? void 0 : d.title) || "", a = u(e == null ? void 0 : e.beginChapterInfo);
-  return /* @__PURE__ */ c(O, { alignItems: "center", gap: 1, maxW: "100%", overflow: "auto", children: [
-    /* @__PURE__ */ n(ue, { value: l, size: "xs", width: 150, children: /* @__PURE__ */ c(k, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ n(de, { width: 110 }),
-      /* @__PURE__ */ n(me, { children: `${l}%` })
+    rightPageIndex: i,
+    totalApproximatePages: o,
+    beginAndEndAreDifferent: l
+  } = H(), c = Math.round(((e == null ? void 0 : e.percentageEstimateOfBook) ?? 0) * 100), d = (s) => s != null && s.subChapter ? `${s.title} / ${d(s.subChapter)}` : (s == null ? void 0 : s.title) || "", u = d(e == null ? void 0 : e.beginChapterInfo);
+  return /* @__PURE__ */ a(y, { alignItems: "center", gap: 1, maxW: "100%", overflow: "auto", children: [
+    /* @__PURE__ */ t(We, { value: c, size: "xs", width: 150, children: /* @__PURE__ */ a(x, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ t(He, { width: 110 }),
+      /* @__PURE__ */ t(je, { children: `${c}%` })
     ] }) }),
-    /* @__PURE__ */ n(m, { truncate: !0, maxWidth: "100%", fontSize: "sm", mt: 1, children: a ? `Chapter: ${a}` : " " }),
-    !t && /* @__PURE__ */ c(k, { children: [
-      /* @__PURE__ */ n(m, { fontSize: "xs", children: i ? `${r + 1} - ${o + 1} of ${s}` : `${r + 1} of ${s}` }),
-      !!(e != null && e.hasChapters) && /* @__PURE__ */ c(A, { children: [
-        /* @__PURE__ */ n(m, { children: "-" }),
-        /* @__PURE__ */ c(m, { fontSize: "xs", children: [
+    /* @__PURE__ */ t(f, { truncate: !0, maxWidth: "100%", fontSize: "sm", mt: 1, children: u ? `Chapter: ${u}` : " " }),
+    !n && /* @__PURE__ */ a(x, { children: [
+      /* @__PURE__ */ t(f, { fontSize: "xs", children: l ? `${r + 1} - ${i + 1} of ${o}` : `${r + 1} of ${o}` }),
+      !!(e != null && e.hasChapters) && /* @__PURE__ */ a(E, { children: [
+        /* @__PURE__ */ t(f, { children: "-" }),
+        /* @__PURE__ */ a(f, { fontSize: "xs", children: [
           "(",
           ((e == null ? void 0 : e.beginAbsolutePageIndex) ?? 0) + 1,
           ")"
@@ -157,20 +198,20 @@ const ue = x.Root, me = x.ValueText, B = () => {
       ] })
     ] })
   ] });
-}, F = P(
+}, K = b(
   ({
     children: e,
-    position: t,
+    position: n,
     ...r
-  }) => /* @__PURE__ */ n(
-    R,
+  }) => /* @__PURE__ */ t(
+    L,
     {
       display: "flex",
       flexDirection: "row",
       width: "100%",
       position: "absolute",
-      ...t === "bottom" ? { bottom: 0 } : { top: 0 },
-      animationName: t === "bottom" ? {
+      ...n === "bottom" ? { bottom: 0 } : { top: 0 },
+      animationName: n === "bottom" ? {
         _open: "slide-from-bottom, fade-in",
         _closed: "slide-to-bottom, fade-out"
       } : {
@@ -182,13 +223,13 @@ const ue = x.Root, me = x.ValueText, B = () => {
       alignItems: "center",
       justifyContent: "center",
       shadow: "md",
-      px: 4,
+      p: 4,
       ...r,
       children: e
     }
   )
-), ge = V(Z), fe = P((e) => /* @__PURE__ */ n(
-  S,
+), Ve = me(Oe), _e = b((e) => /* @__PURE__ */ t(
+  z,
   {
     display: "contents",
     css: {
@@ -196,8 +237,8 @@ const ue = x.Root, me = x.ValueText, B = () => {
       "--bg-emphasized": "colors.bg.emphasized",
       "--color-solid": "colors.colorPalette.solid"
     },
-    children: /* @__PURE__ */ n(
-      ge,
+    children: /* @__PURE__ */ t(
+      Ve,
       {
         keyboard: !1,
         style: {
@@ -241,144 +282,231 @@ const ue = x.Root, me = x.ValueText, B = () => {
       }
     )
   }
-)), xe = () => {
-  const e = p(), t = e == null ? void 0 : e.isUsingSpread, { beginPageIndex: r, totalApproximatePages: o = 0 } = B(), s = t ? Math.floor((r || 0) / 2) : r, [i, l] = U({
-    default: s || 0
-  }), u = 0, a = Math.max(
+)), qe = () => {
+  const e = P(), n = e == null ? void 0 : e.isUsingSpread, { beginPageIndex: r, totalApproximatePages: i = 0 } = H(), o = n ? Math.floor((r || 0) / 2) : r, [l, c] = U({
+    default: o || 0
+  }), d = 0, u = Math.max(
     0,
-    t ? Math.floor((o - 1) / 2) : o - 1
+    n ? Math.floor((i - 1) / 2) : i - 1
   );
-  return y(() => {
-    l.setValue(s || 0);
-  }, [s, l]), {
-    value: i,
-    valueSignal: l,
-    min: u,
-    max: a
+  return B(() => {
+    c.setValue(o || 0);
+  }, [o, c]), {
+    value: l,
+    valueSignal: c,
+    min: d,
+    max: u
   };
-}, be = () => {
-  const e = v(), t = p(), { manifest: r } = b(() => e == null ? void 0 : e.context.state$, []) ?? {}, o = (r == null ? void 0 : r.readingDirection) === "rtl", s = t == null ? void 0 : t.isUsingSpread, { totalApproximatePages: i = 0, isBeginWithinChapter: l } = B(), u = 1, a = l, { value: d, valueSignal: h, min: C, max: M } = xe(), W = z(
-    (w) => {
-      const [T = 0] = Array.isArray(w) ? w : [w];
-      h.setValue(T);
-      const D = s ? Math.floor(T) * 2 : Math.floor(T);
-      a ? e == null || e.navigation.goToPageOfSpineItem({
-        pageIndex: D,
+}, Ue = () => {
+  const e = D(), n = P(), { manifest: r } = v(() => e == null ? void 0 : e.context.state$, []) ?? {}, i = (r == null ? void 0 : r.readingDirection) === "rtl", o = n == null ? void 0 : n.isUsingSpread, { totalApproximatePages: l = 0, isBeginWithinChapter: c } = H(), d = 1, u = c, { value: s, valueSignal: m, min: h, max: S } = qe(), A = q(
+    (T) => {
+      const [k = 0] = Array.isArray(T) ? T : [T];
+      m.setValue(k);
+      const W = o ? Math.floor(k) * 2 : Math.floor(k);
+      u ? e == null || e.navigation.goToPageOfSpineItem({
+        pageIndex: W,
         spineItemId: e.pagination.getState().beginSpineItemIndex ?? 0,
         animation: !1
       }) : e == null || e.navigation.goToAbsolutePageIndex({
-        absolutePageIndex: D,
+        absolutePageIndex: W,
         animation: !1
       });
     },
-    [e, s, h, a]
+    [e, o, m, u]
   );
-  return j(
+  return Y(
     () => e == null ? void 0 : e.navigation.throttleLock({
       duration: 100,
-      trigger: h.subject
+      trigger: m.subject
     }),
-    [e, h]
-  ), i === 1 || s && i === 2 ? null : /* @__PURE__ */ n(
-    fe,
+    [e, m]
+  ), l === 1 || o && l === 2 ? null : /* @__PURE__ */ t(
+    _e,
     {
-      value: [d],
-      max: M,
-      min: C,
-      reverse: o,
-      step: u,
-      onChange: W
+      value: [s],
+      max: S,
+      min: h,
+      reverse: i,
+      step: d,
+      onChange: A
     }
   );
-}, pe = ({ open: e }) => {
-  const t = v(), r = b(() => t == null ? void 0 : t.navigation.state$, [t]), o = b(() => t == null ? void 0 : t.settings.values$, [t]), s = (o == null ? void 0 : o.computedPageTurnDirection) === "vertical";
-  return /* @__PURE__ */ c(F, { present: e, position: "bottom", height: 130, children: [
-    /* @__PURE__ */ n(
-      f,
-      {
-        "aria-label": "left",
-        size: "lg",
-        variant: "ghost",
-        flexShrink: 0,
-        onClick: () => t == null ? void 0 : t.navigation.goToLeftOrTopSpineItem(),
-        disabled: !(r != null && r.canGoLeftSpineItem) && !(r != null && r.canGoTopSpineItem),
-        children: s ? /* @__PURE__ */ n(Y, {}) : /* @__PURE__ */ n(q, {})
-      }
-    ),
-    /* @__PURE__ */ c(
-      O,
-      {
-        flex: 1,
-        maxW: 400,
-        gap: 2,
-        alignItems: "center",
-        overflow: "visible",
-        px: 4,
-        children: [
-          /* @__PURE__ */ n(he, {}),
-          /* @__PURE__ */ n(S, { height: 5, maxW: 300, width: "100%", overflow: "visible", children: /* @__PURE__ */ n(be, {}) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ n(
-      f,
+}, Ye = b(
+  ({
+    open: e,
+    onTableOfContentsClick: n,
+    onHelpClick: r
+  }) => {
+    const i = D(), o = v(() => i == null ? void 0 : i.navigation.state$, [i]), l = v(() => i == null ? void 0 : i.settings.values$, [i]), c = (l == null ? void 0 : l.computedPageTurnDirection) === "vertical", [d, u] = R(!0);
+    return /* @__PURE__ */ t(
+      K,
       {
-        "aria-label": "right",
-        size: "lg",
-        flexShrink: 0,
-        variant: "ghost",
-        disabled: !(r != null && r.canGoRightSpineItem) && !(r != null && r.canGoBottomSpineItem),
-        onClick: () => {
-          t == null || t.navigation.goToRightOrBottomSpineItem();
-        },
-        children: s ? /* @__PURE__ */ n(J, {}) : /* @__PURE__ */ n(K, {})
+        present: e,
+        position: "bottom",
+        children: /* @__PURE__ */ a(
+          y,
+          {
+            flex: 1,
+            children: [
+              /* @__PURE__ */ a(x, { flex: 1, alignItems: "center", justifyContent: "center", children: [
+                /* @__PURE__ */ t(
+                  p,
+                  {
+                    "aria-label": "left",
+                    size: "lg",
+                    variant: "ghost",
+                    flexShrink: 0,
+                    onClick: () => i == null ? void 0 : i.navigation.goToLeftOrTopSpineItem(),
+                    disabled: !(o != null && o.canGoLeftSpineItem) && !(o != null && o.canGoTopSpineItem),
+                    children: c ? /* @__PURE__ */ t(Se, {}) : /* @__PURE__ */ t(Te, {})
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  y,
+                  {
+                    flex: 1,
+                    maxW: 400,
+                    gap: 2,
+                    alignItems: "center",
+                    overflow: "visible",
+                    px: 4,
+                    children: [
+                      /* @__PURE__ */ t(Ne, {}),
+                      /* @__PURE__ */ t(z, { height: 5, maxW: 300, width: "100%", overflow: "visible", children: /* @__PURE__ */ t(Ue, {}) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  p,
+                  {
+                    "aria-label": "right",
+                    size: "lg",
+                    flexShrink: 0,
+                    variant: "ghost",
+                    disabled: !(o != null && o.canGoRightSpineItem) && !(o != null && o.canGoBottomSpineItem),
+                    onClick: () => {
+                      i == null || i.navigation.goToRightOrBottomSpineItem();
+                    },
+                    children: c ? /* @__PURE__ */ t(ke, {}) : /* @__PURE__ */ t(we, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ t(
+                x,
+                {
+                  alignItems: "center",
+                  justifyContent: "center",
+                  children: /* @__PURE__ */ a(
+                    M.Root,
+                    {
+                      open: d,
+                      flex: 1,
+                      onOpenChange: ({ open: s }) => {
+                        u(s);
+                      },
+                      children: [
+                        /* @__PURE__ */ t(
+                          M.Trigger,
+                          {
+                            paddingY: "3",
+                            width: "100%",
+                            display: "flex",
+                            justifyContent: "center",
+                            children: /* @__PURE__ */ t(
+                              be,
+                              {
+                                style: {
+                                  transform: d ? "rotate(0deg)" : "rotate(180deg)"
+                                }
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ a(
+                          M.Content,
+                          {
+                            display: "flex",
+                            justifyContent: "center",
+                            gap: 2,
+                            children: [
+                              /* @__PURE__ */ t(
+                                p,
+                                {
+                                  "aria-label": "Help",
+                                  size: "lg",
+                                  variant: "ghost",
+                                  onClick: r,
+                                  children: /* @__PURE__ */ t(xe, {})
+                                }
+                              ),
+                              /* @__PURE__ */ t(
+                                p,
+                                {
+                                  "aria-label": "Table of contents",
+                                  size: "lg",
+                                  variant: "ghost",
+                                  onClick: n,
+                                  children: /* @__PURE__ */ t(Ce, {})
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
       }
-    )
-  ] });
-}, Ie = () => {
-  const [e, t] = $(!1), r = z(() => document.fullscreenElement ? document.exitFullscreen().catch(console.error).then(() => {
-    t(!1);
+    );
+  }
+), Qe = () => {
+  const [e, n] = R(!1), r = q(() => document.fullscreenElement ? document.exitFullscreen().catch(console.error).then(() => {
+    n(!1);
   }) : document.documentElement.requestFullscreen({ navigationUI: "hide" }).catch(console.error).then(() => {
-    t(!0);
+    n(!0);
   }), []);
-  return y(() => {
-    function o() {
-      t(!!document.fullscreenElement);
+  return B(() => {
+    function i() {
+      n(!!document.fullscreenElement);
     }
-    return document.addEventListener("fullscreenchange", o), () => {
-      document.removeEventListener("fullscreenchange", o);
+    return document.addEventListener("fullscreenchange", i), () => {
+      document.removeEventListener("fullscreenchange", i);
     };
   }, []), {
     isFullscreen: e,
     onToggleFullscreenClick: r
   };
-}, Pe = ({
+}, Ge = ({
   open: e,
-  onBackClick: t,
+  onBackClick: n,
   onMoreClick: r
 }) => {
-  const o = v(), s = b(() => o == null ? void 0 : o.context.manifest$, [o]), { isFullscreen: i, onToggleFullscreenClick: l } = Ie();
-  return /* @__PURE__ */ c(
-    F,
+  const i = D(), o = v(() => i == null ? void 0 : i.context.manifest$, [i]), { isFullscreen: l, onToggleFullscreenClick: c } = Qe();
+  return /* @__PURE__ */ a(
+    K,
     {
       present: e,
       position: "top",
       height: "80px",
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ n(
-          f,
+        /* @__PURE__ */ t(
+          p,
           {
             "aria-label": "left",
             size: "lg",
             variant: "ghost",
             flexShrink: 0,
-            onClick: t,
-            children: /* @__PURE__ */ n(ee, {})
+            onClick: n,
+            children: /* @__PURE__ */ t(ye, {})
           }
         ),
-        /* @__PURE__ */ n(
-          O,
+        /* @__PURE__ */ t(
+          y,
           {
             flex: 1,
             maxW: 600,
@@ -386,81 +514,257 @@ const ue = x.Root, me = x.ValueText, B = () => {
             alignItems: "center",
             overflow: "auto",
             px: 4,
-            children: /* @__PURE__ */ n(m, { truncate: !0, maxWidth: "100%", children: s == null ? void 0 : s.title })
+            children: /* @__PURE__ */ t(f, { truncate: !0, maxWidth: "100%", children: o == null ? void 0 : o.title })
           }
         ),
-        /* @__PURE__ */ c(k, { children: [
-          /* @__PURE__ */ n(
-            f,
+        /* @__PURE__ */ a(x, { children: [
+          /* @__PURE__ */ t(
+            p,
             {
               "aria-label": "right",
               size: "lg",
               flexShrink: 0,
               variant: "ghost",
               onClick: r,
-              children: /* @__PURE__ */ n(te, {})
+              children: /* @__PURE__ */ t(De, {})
             }
           ),
-          /* @__PURE__ */ n(
-            f,
+          /* @__PURE__ */ t(
+            p,
             {
               "aria-label": "right",
               size: "lg",
               flexShrink: 0,
               variant: "ghost",
-              onClick: l,
-              children: i ? /* @__PURE__ */ n(re, {}) : /* @__PURE__ */ n(ne, {})
+              onClick: c,
+              children: l ? /* @__PURE__ */ t(Ae, {}) : /* @__PURE__ */ t(Be, {})
             }
           )
         ] })
       ]
     }
   );
-}, Se = P(
+}, Ke = b(
+  ({
+    onBackClick: e,
+    onMoreClick: n,
+    onTableOfContentsClick: r,
+    onHelpClick: i
+  }) => {
+    const [o] = $();
+    return /* @__PURE__ */ a(E, { children: [
+      /* @__PURE__ */ t(
+        Ge,
+        {
+          open: o,
+          onBackClick: e,
+          onMoreClick: n
+        }
+      ),
+      /* @__PURE__ */ t(
+        Ye,
+        {
+          open: o,
+          onTableOfContentsClick: r,
+          onHelpClick: i
+        }
+      )
+    ] });
+  }
+), Xe = "@prose-reader/react-reader", Je = "1.179.0", Ze = C.forwardRef(function(n, r) {
+  return /* @__PURE__ */ t(p, { variant: "ghost", "aria-label": "Close", ref: r, ...n, children: n.children ?? /* @__PURE__ */ t(Ie, {}) });
+}), X = C.forwardRef(function(n, r) {
+  const {
+    children: i,
+    portalled: o = !0,
+    portalRef: l,
+    backdrop: c = !0,
+    ...d
+  } = n;
+  return /* @__PURE__ */ a(Q, { disabled: !o, container: l, children: [
+    c && /* @__PURE__ */ t(g.Backdrop, {}),
+    /* @__PURE__ */ t(g.Positioner, { children: /* @__PURE__ */ t(g.Content, { ref: r, ...d, asChild: !1, children: i }) })
+  ] });
+}), J = C.forwardRef(function(n, r) {
+  return /* @__PURE__ */ t(
+    g.CloseTrigger,
+    {
+      position: "absolute",
+      top: "2",
+      insetEnd: "2",
+      ...n,
+      asChild: !0,
+      children: /* @__PURE__ */ t(Ze, { size: "sm", ref: r, children: n.children })
+    }
+  );
+}), Z = g.Root, ee = g.Footer, te = g.Header, ne = g.Body;
+g.Backdrop;
+const oe = g.Title;
+g.Description;
+g.Trigger;
+const re = g.ActionTrigger, et = b(
   ({
     open: e,
-    onBackClick: t,
-    onMoreClick: r
-  }) => /* @__PURE__ */ c(A, { children: [
-    /* @__PURE__ */ n(
-      Pe,
-      {
-        open: e,
-        onBackClick: t,
-        onMoreClick: r
-      }
-    ),
-    /* @__PURE__ */ n(pe, { open: e })
-  ] })
-), ze = ({
-  enableFloatingTime: e = !0,
-  enableFloatingProgress: t = !0,
-  open: r,
-  ...o
-}) => /* @__PURE__ */ c(A, { children: [
-  t && /* @__PURE__ */ n(
-    R,
+    setOpen: n
+  }) => /* @__PURE__ */ t(
+    Z,
     {
-      present: !r,
-      animationName: { _open: "fade-in", _closed: "fade-out" },
-      animationDuration: "moderate",
-      children: /* @__PURE__ */ n(oe, {})
+      lazyMount: !0,
+      placement: "center",
+      open: e,
+      onOpenChange: (r) => n(r.open),
+      size: { mdDown: "full", md: "lg" },
+      scrollBehavior: "inside",
+      children: /* @__PURE__ */ a(X, { children: [
+        /* @__PURE__ */ t(te, { children: /* @__PURE__ */ t(oe, { children: "Help" }) }),
+        /* @__PURE__ */ a(ne, { overflowY: "auto", flex: 1, children: [
+          /* @__PURE__ */ t(j, { mb: 2, as: "h3", size: "lg", children: "Shortcuts" }),
+          /* @__PURE__ */ a(x, { mb: 1, children: [
+            /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(ve, {}) }),
+            " ",
+            /* @__PURE__ */ t(f, { children: "Navigate to right page" })
+          ] }),
+          /* @__PURE__ */ a(x, { mb: 1, children: [
+            /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(Pe, {}) }),
+            " ",
+            /* @__PURE__ */ t(f, { children: "Navigate to left page" })
+          ] }),
+          /* @__PURE__ */ t(j, { mb: 2, mt: 4, as: "h3", size: "lg", children: "About" }),
+          /* @__PURE__ */ a(f, { children: [
+            Xe,
+            " version: ",
+            Je
+          ] })
+        ] }),
+        /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(re, { asChild: !0, children: /* @__PURE__ */ t(G, { variant: "outline", children: "Cancel" }) }) }),
+        /* @__PURE__ */ t(J, {})
+      ] })
     }
-  ),
-  /* @__PURE__ */ n(Se, { open: r, ...o }),
-  /* @__PURE__ */ n(
-    R,
+  )
+), tt = b(
+  ({
+    onNavigate: e
+  }) => {
+    const n = D(), { manifest: r, assumedRenditionLayout: i } = v(() => n == null ? void 0 : n.context.state$, [n]) ?? {}, { nav: o } = r ?? {}, l = P();
+    o != null && o.toc;
+    const { beginSpineItemIndex: c, beginPageIndexInSpineItem: d } = l ?? {}, u = (i === "reflowable" ? d : c) || 0;
+    console.log({ assumedRenditionLayout: i, currentSpineItemOrChapterPageIndex: u });
+    let s = l == null ? void 0 : l.beginChapterInfo;
+    for (; s != null && s.subChapter; )
+      s = s == null ? void 0 : s.subChapter;
+    const m = (h, S, A) => /* @__PURE__ */ a(ie.Fragment, { children: [
+      /* @__PURE__ */ t(
+        w.Item,
+        {
+          pl: 4 * (A + 1),
+          style: {
+            display: "flex",
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */ a(
+            pe,
+            {
+              onClick: () => {
+                e(), n == null || n.navigation.goToUrl(h.href);
+              },
+              href: "#",
+              children: [
+                (s == null ? void 0 : s.path) === h.path && /* @__PURE__ */ t(w.Indicator, { asChild: !0, children: /* @__PURE__ */ t(V, {}) }),
+                (s == null ? void 0 : s.path) !== h.path && /* @__PURE__ */ t(w.Indicator, { asChild: !0, visibility: "hidden", children: /* @__PURE__ */ t(V, {}) }),
+                /* @__PURE__ */ a(y, { gap: 0, children: [
+                  /* @__PURE__ */ t(f, { fontSize: "md", children: h.title || h.path }),
+                  (s == null ? void 0 : s.path) === h.path && /* @__PURE__ */ t(
+                    f,
+                    {
+                      fontStyle: "italic",
+                      fontWeight: "bold",
+                      fontSize: "sm",
+                      children: `Currently on page ${u + 1}`
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      h.contents.length > 0 && /* @__PURE__ */ t(w.Root, { as: "div", gap: 2, children: h.contents.map(
+        (T, k) => m(T, k, A + 1)
+      ) })
+    ] }, S);
+    return /* @__PURE__ */ t(w.Root, { gap: 3, overflowY: "auto", py: 4, flex: 1, children: o == null ? void 0 : o.toc.map((h, S) => m(h, S, 0)) });
+  }
+), nt = b(
+  ({
+    open: e,
+    setOpen: n,
+    onNavigate: r
+  }) => /* @__PURE__ */ t(
+    Z,
     {
-      present: e || r,
-      animationName: { _open: "fade-in", _closed: "fade-out" },
-      animationDuration: "slow",
-      overflow: "hidden",
-      children: /* @__PURE__ */ n(le, {})
+      lazyMount: !0,
+      placement: "center",
+      open: e,
+      onOpenChange: (i) => n(i.open),
+      size: { mdDown: "full", md: "lg" },
+      scrollBehavior: "inside",
+      children: /* @__PURE__ */ a(X, { children: [
+        /* @__PURE__ */ t(te, { children: /* @__PURE__ */ t(oe, { children: "Table of Contents" }) }),
+        /* @__PURE__ */ t(ne, { overflowY: "auto", flex: 1, children: /* @__PURE__ */ t(tt, { onNavigate: r }) }),
+        /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(re, { asChild: !0, children: /* @__PURE__ */ t(G, { variant: "outline", children: "Cancel" }) }) }),
+        /* @__PURE__ */ t(J, {})
+      ] })
     }
   )
-] });
+), pt = ({
+  enableFloatingTime: e = !0,
+  enableFloatingProgress: n = !0,
+  ...r
+}) => {
+  const [i, o] = R(!1), [l, c] = R(!1), [d, u] = $();
+  return /* @__PURE__ */ a(E, { children: [
+    n && /* @__PURE__ */ t(
+      L,
+      {
+        present: !d,
+        animationName: { _open: "fade-in", _closed: "fade-out" },
+        animationDuration: "moderate",
+        children: /* @__PURE__ */ t(ze, {})
+      }
+    ),
+    /* @__PURE__ */ t(
+      Ke,
+      {
+        ...r,
+        onTableOfContentsClick: () => o(!0),
+        onHelpClick: () => c(!0)
+      }
+    ),
+    /* @__PURE__ */ t(et, { open: l, setOpen: c }),
+    /* @__PURE__ */ t(
+      nt,
+      {
+        open: i,
+        setOpen: o,
+        onNavigate: () => {
+          o(!1), u(!1);
+        }
+      }
+    ),
+    /* @__PURE__ */ t(
+      L,
+      {
+        present: e || d,
+        animationName: { _open: "fade-in", _closed: "fade-out" },
+        animationDuration: "slow",
+        overflow: "hidden",
+        children: /* @__PURE__ */ t(Ee, {})
+      }
+    )
+  ] });
+};
 export {
-  ze as ReactReader,
-  $e as ReactReaderProvider
+  pt as ReactReader,
+  mt as ReactReaderProvider
 };
 //# sourceMappingURL=index.js.map