@prose-reader/react-reader 1.187.0 → 1.189.0

package/dist/index.js

@@ -1,202 +1,411 @@
-import { jsx as t, jsxs as a, Fragment as F } from "react/jsx-runtime";
-import * as w from "react";
-import he, { createContext as ue, memo as p, useMemo as ge, useEffect as M, useContext as oe, useState as T, useCallback as H } from "react";
-import { signal as me, useSignal as re, useLiveRef as fe, useSubscribe as le, useObserve as I, useSignalValue as pe } from "reactjrx";
-import { tap as be, NEVER as xe, combineLatest as Ce, map as ie, startWith as ve } from "rxjs";
-import { IconButton as b, Portal as se, Dialog as f, Heading as L, HStack as k, Kbd as te, Text as m, Button as _, Box as R, Popover as y, Progress as B, Stack as v, Presence as $, chakra as Ie, Collapsible as E, Link as ae, Input as Se, List as z } from "@chakra-ui/react";
-import { LuX as Pe, LuArrowBigRight as Te, LuArrowBigLeft as ke, LuChevronDown as we, LuCircleHelp as ye, LuTableOfContents as Re, LuSearch as Oe, LuCircleCheck as ne } from "react-icons/lu";
-import { RxDoubleArrowUp as De, RxDoubleArrowLeft as Ae, RxDoubleArrowDown as ze, RxDoubleArrowRight as Be } from "react-icons/rx";
-import { HiOutlineInformationCircle as Me } from "react-icons/hi";
-import Ee from "rc-slider";
+import { jsx as e, jsxs as c, Fragment as U } from "react/jsx-runtime";
+import * as D from "react";
+import fe, { createContext as me, memo as f, useMemo as be, useEffect as Q, useContext as le, useState as w, useCallback as M } from "react";
+import { signal as xe, useSignal as se, useLiveRef as Ce, useSubscribe as ae, useObserve as b, useSignalValue as ve } from "reactjrx";
+import { tap as ke, switchMap as ce, NEVER as Ie, combineLatest as Se, map as de, startWith as Pe } from "rxjs";
+import { IconButton as m, Portal as he, Dialog as k, List as S, Link as G, Stack as P, Text as p, Button as E, Presence as q, Box as A, Heading as W, HStack as O, Kbd as re, Popover as z, Progress as _, chakra as Te, Collapsible as K, Input as we } from "@chakra-ui/react";
+import { LuX as ye, LuNotebookPen as X, LuArrowBigRight as Re, LuArrowBigLeft as Oe, LuChevronDown as De, LuCircleHelp as ze, LuTableOfContents as Ae, LuSearch as Ee, LuCircleCheck as ie } from "react-icons/lu";
+import { createPortal as Be } from "react-dom";
+import { BsBookmarkPlus as Me, BsBookmarkXFill as _e, BsBookmarks as Le } from "react-icons/bs";
+import { RxDoubleArrowUp as $e, RxDoubleArrowLeft as Ne, RxDoubleArrowDown as Fe, RxDoubleArrowRight as He } from "react-icons/rx";
+import { HiOutlineInformationCircle as je } from "react-icons/hi";
+import Ve from "rc-slider";
 import "rc-slider/assets/index.css";
-import { IoIosArrowBack as Le, IoMdMore as $e } from "react-icons/io";
-import { MdFullscreenExit as Fe, MdFullscreen as He } from "react-icons/md";
-const N = ue({
+import { IoIosArrowBack as Ye, IoMdMore as qe } from "react-icons/io";
+import { MdFullscreenExit as Ue, MdFullscreen as Qe } from "react-icons/md";
+const J = me({
   reader: void 0,
-  quickMenuSignal: me({ default: !1 })
-}), kt = p(
+  quickMenuSignal: xe({ default: !1 })
+}), Hn = f(
   ({
-    children: e,
-    reader: n,
-    quickMenuOpen: r,
-    onQuickMenuOpenChange: l
+    children: n,
+    reader: t,
+    quickMenuOpen: o,
+    onQuickMenuOpenChange: r
   }) => {
-    const [, o] = re({
-      default: r
-    }), i = fe(l), c = ge(
+    const [, l] = se({
+      default: o
+    }), i = Ce(r), a = be(
       () => ({
-        quickMenuSignal: o,
-        reader: n
+        quickMenuSignal: l,
+        reader: t
       }),
-      [o, n]
+      [l, t]
     );
-    return M(() => {
-      o.setValue(r);
-    }, [r, o]), le(
-      () => o.subject.pipe(be(i.current)),
-      [o, i]
-    ), /* @__PURE__ */ t(N.Provider, { value: c, children: e });
+    return Q(() => {
+      l.setValue(o);
+    }, [o, l]), ae(
+      () => l.subject.pipe(ke(i.current)),
+      [l, i]
+    ), /* @__PURE__ */ e(J.Provider, { value: a, children: n });
   }
-), _e = "@prose-reader/react-reader", Ne = "1.186.0", We = w.forwardRef(function(n, r) {
-  return /* @__PURE__ */ t(b, { variant: "ghost", "aria-label": "Close", ref: r, ...n, children: n.children ?? /* @__PURE__ */ t(Pe, {}) });
-}), W = w.forwardRef(function(n, r) {
+), Ge = D.forwardRef(function(t, o) {
+  return /* @__PURE__ */ e(m, { variant: "ghost", "aria-label": "Close", ref: o, ...t, children: t.children ?? /* @__PURE__ */ e(ye, {}) });
+}), L = D.forwardRef(function(t, o) {
   const {
-    children: l,
-    portalled: o = !0,
+    children: r,
+    portalled: l = !0,
     portalRef: i,
-    backdrop: c = !0,
-    ...d
-  } = n;
-  return /* @__PURE__ */ a(se, { disabled: !o, container: i, children: [
-    c && /* @__PURE__ */ t(f.Backdrop, {}),
-    /* @__PURE__ */ t(f.Positioner, { children: /* @__PURE__ */ t(f.Content, { ref: r, ...d, asChild: !1, children: l }) })
+    backdrop: a = !0,
+    ...h
+  } = t;
+  return /* @__PURE__ */ c(he, { disabled: !l, container: i, children: [
+    a && /* @__PURE__ */ e(k.Backdrop, {}),
+    /* @__PURE__ */ e(k.Positioner, { children: /* @__PURE__ */ e(k.Content, { ref: o, ...h, asChild: !1, children: r }) })
   ] });
-}), j = w.forwardRef(function(n, r) {
-  return /* @__PURE__ */ t(
-    f.CloseTrigger,
+}), $ = D.forwardRef(function(t, o) {
+  return /* @__PURE__ */ e(
+    k.CloseTrigger,
     {
       position: "absolute",
       top: "2",
       insetEnd: "2",
-      ...n,
+      ...t,
       asChild: !0,
-      children: /* @__PURE__ */ t(We, { size: "sm", ref: r, children: n.children })
+      children: /* @__PURE__ */ e(Ge, { size: "sm", ref: o, children: t.children })
     }
   );
-}), V = f.Root, q = f.Footer, U = f.Header, Y = f.Body;
-f.Backdrop;
-const Q = f.Title;
-f.Description;
-f.Trigger;
-const G = f.ActionTrigger, je = p(
+}), N = k.Root, F = k.Footer, H = k.Header, j = k.Body;
+k.Backdrop;
+const V = k.Title;
+k.Description;
+k.Trigger;
+const Y = k.ActionTrigger, y = () => {
+  const { reader: n } = le(J);
+  return n;
+}, ue = (n) => !!n && "__PROSE_READER_ENHANCER_SEARCH" in n, Z = (n) => !!n && "__PROSE_READER_ENHANCER_BOOKMARKS" in n, ge = (n) => !!n && "__PROSE_READER_ENHANCER_ANNOTATIONS" in n, Ke = f(
+  ({ onNavigate: n }) => {
+    const t = y(), o = ge(t) ? t : void 0, r = b(
+      () => o == null ? void 0 : o.annotations.highlights$.pipe(
+        ce(
+          (i) => o.pagination.locate(i)
+        )
+      ),
+      [o]
+    ), l = (i, a) => {
+      var h;
+      return /* @__PURE__ */ e(S.Item, { children: /* @__PURE__ */ c(
+        G,
+        {
+          href: "#",
+          onClick: () => {
+            n(), t == null || t.navigation.goToCfi(i.cfi ?? "");
+          },
+          children: [
+            (i.contents ?? [])[0] ? /* @__PURE__ */ e(S.Indicator, { asChild: !0, children: /* @__PURE__ */ e(X, {}) }) : /* @__PURE__ */ e(S.Indicator, { asChild: !0, visibility: "hidden", children: /* @__PURE__ */ e(X, {}) }),
+            /* @__PURE__ */ c(P, { gap: 0, children: [
+              /* @__PURE__ */ e(p, { lineClamp: 2, fontSize: "md", children: i.selectionAsText ? i.selectionAsText ?? "" : /* @__PURE__ */ e("i", { children: /* @__PURE__ */ e("b", { children: "unknown (not loaded)" }) }) }),
+              /* @__PURE__ */ e(
+                p,
+                {
+                  fontStyle: "italic",
+                  fontWeight: "bold",
+                  fontSize: "sm",
+                  children: `Book page: ${((h = i.meta) == null ? void 0 : h.absolutePageIndex) !== void 0 ? i.meta.absolutePageIndex + 1 : "unknown (not loaded)"}`
+                }
+              )
+            ] })
+          ]
+        }
+      ) }, a);
+    };
+    return /* @__PURE__ */ e(S.Root, { overflowY: "auto", gap: 3, pt: 4, variant: "plain", children: r == null ? void 0 : r.map(
+      (i, a) => l(i, a)
+    ) });
+  }
+), We = f(
+  ({
+    open: n,
+    setOpen: t,
+    onNavigate: o
+  }) => /* @__PURE__ */ e(
+    N,
+    {
+      lazyMount: !0,
+      placement: "center",
+      open: n,
+      onOpenChange: (r) => t(r.open),
+      size: { mdDown: "full", md: "lg" },
+      scrollBehavior: "inside",
+      children: /* @__PURE__ */ c(L, { height: "100%", children: [
+        /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(V, { children: "Annotations" }) }),
+        /* @__PURE__ */ e(j, { flex: 1, children: /* @__PURE__ */ e(Ke, { onNavigate: o }) }),
+        /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(E, { variant: "outline", children: "Cancel" }) }) }),
+        /* @__PURE__ */ e($, {})
+      ] })
+    }
+  )
+), Xe = f(() => {
+  const n = y(), t = Z(n) ? n : void 0, o = b(() => n == null ? void 0 : n.spine.element$, [n]), r = b(
+    () => t == null ? void 0 : t.bookmarks.pages$,
+    [t]
+  ), l = b(
+    () => t == null ? void 0 : t.bookmarks.bookmarks$,
+    [t]
+  ), i = b(
+    () => n == null ? void 0 : n.pagination.locate(l ?? []),
+    [n, l]
+  );
+  return o ? /* @__PURE__ */ e(U, { children: Be(
+    r == null ? void 0 : r.map(
+      ({ isBookmarkable: a, absolutePosition: { left: h, top: u, width: s } }, g) => {
+        const d = i == null ? void 0 : i.find(
+          (x) => {
+            var C;
+            return ((C = x.meta) == null ? void 0 : C.absolutePageIndex) === g;
+          }
+        );
+        return a ? /* @__PURE__ */ e(
+          q,
+          {
+            present: !0,
+            lazyMount: !0,
+            animationName: { _open: "fade-in", _closed: "fade-out" },
+            animationDuration: "moderate",
+            children: /* @__PURE__ */ e(
+              A,
+              {
+                "data-bookmark-area": !0,
+                position: "absolute",
+                left: h + s,
+                transform: "translateX(-100%)",
+                top: u,
+                p: 2,
+                children: d ? /* @__PURE__ */ e(
+                  m,
+                  {
+                    "aria-label": "bookmark",
+                    onClick: () => {
+                      d && (t == null || t.bookmarks.delete(
+                        d == null ? void 0 : d.id
+                      ));
+                    },
+                    size: "lg",
+                    variant: "ghost",
+                    _icon: { boxSize: "36px" },
+                    children: /* @__PURE__ */ e(_e, {})
+                  }
+                ) : /* @__PURE__ */ e(
+                  m,
+                  {
+                    "aria-label": "bookmark",
+                    onClick: () => {
+                      t == null || t.bookmarks.bookmark(g);
+                    },
+                    size: "lg",
+                    variant: "ghost",
+                    _icon: { boxSize: "36px" },
+                    children: /* @__PURE__ */ e(Me, {})
+                  }
+                )
+              }
+            )
+          },
+          g
+        ) : null;
+      }
+    ),
+    o
+  ) }) : null;
+}), Je = f(
+  ({ onNavigate: n }) => {
+    const t = y(), o = Z(t) ? t : void 0, r = b(
+      () => o == null ? void 0 : o.bookmarks.bookmarks$.pipe(
+        ce((i) => o.pagination.locate(i))
+      ),
+      [o]
+    ), l = (i, a) => {
+      var h, u, s, g, d;
+      return /* @__PURE__ */ c(S.Item, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ e(
+          G,
+          {
+            href: "#",
+            onClick: () => {
+              n(), t == null || t.navigation.goToCfi(i.cfi ?? "");
+            },
+            children: /* @__PURE__ */ c(P, { gap: 0, children: [
+              /* @__PURE__ */ e(p, { fontSize: "md", children: `Book page: ${((h = i.meta) == null ? void 0 : h.absolutePageIndex) !== void 0 ? i.meta.absolutePageIndex + 1 : "unknown"}` }),
+              /* @__PURE__ */ e(
+                p,
+                {
+                  fontStyle: "italic",
+                  fontWeight: "bold",
+                  fontSize: "sm",
+                  truncate: !0,
+                  lineClamp: 2,
+                  children: (s = (u = i.meta) == null ? void 0 : u.startNode) != null && s.textContent ? (d = (g = i.meta) == null ? void 0 : g.startNode) == null ? void 0 : d.textContent : "..."
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e(
+          E,
+          {
+            colorPalette: "red",
+            variant: "solid",
+            size: "xs",
+            onClick: () => {
+              o == null || o.bookmarks.delete(i.id);
+            },
+            children: "Delete"
+          }
+        )
+      ] }, a);
+    };
+    return /* @__PURE__ */ e(S.Root, { overflowY: "auto", gap: 3, variant: "plain", overflow: "auto", children: r == null ? void 0 : r.map(
+      (i, a) => l(i, a)
+    ) });
+  }
+), Ze = f(
   ({
-    open: e,
-    setOpen: n
-  }) => /* @__PURE__ */ t(
-    V,
+    open: n,
+    setOpen: t,
+    onNavigate: o
+  }) => /* @__PURE__ */ e(
+    N,
     {
       lazyMount: !0,
       placement: "center",
-      open: e,
-      onOpenChange: (r) => n(r.open),
+      open: n,
+      onOpenChange: (r) => t(r.open),
       size: { mdDown: "full", md: "lg" },
       scrollBehavior: "inside",
-      children: /* @__PURE__ */ a(W, { children: [
-        /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(Q, { children: "Help" }) }),
-        /* @__PURE__ */ a(Y, { overflowY: "auto", flex: 1, children: [
-          /* @__PURE__ */ t(L, { mb: 2, as: "h3", size: "lg", children: "Shortcuts" }),
-          /* @__PURE__ */ a(k, { mb: 1, children: [
-            /* @__PURE__ */ t(te, { children: /* @__PURE__ */ t(Te, {}) }),
+      children: /* @__PURE__ */ c(L, { height: "100%", children: [
+        /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(V, { children: "Bookmarks" }) }),
+        /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(Je, { onNavigate: o }) }),
+        /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(E, { variant: "outline", children: "Cancel" }) }) }),
+        /* @__PURE__ */ e($, {})
+      ] })
+    }
+  )
+), en = "@prose-reader/react-reader", nn = "1.188.0", tn = f(
+  ({
+    open: n,
+    setOpen: t
+  }) => /* @__PURE__ */ e(
+    N,
+    {
+      lazyMount: !0,
+      placement: "center",
+      open: n,
+      onOpenChange: (o) => t(o.open),
+      size: { mdDown: "full", md: "lg" },
+      scrollBehavior: "inside",
+      children: /* @__PURE__ */ c(L, { children: [
+        /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(V, { children: "Help" }) }),
+        /* @__PURE__ */ c(j, { overflowY: "auto", flex: 1, children: [
+          /* @__PURE__ */ e(W, { mb: 2, as: "h3", size: "lg", children: "Shortcuts" }),
+          /* @__PURE__ */ c(O, { mb: 1, children: [
+            /* @__PURE__ */ e(re, { children: /* @__PURE__ */ e(Re, {}) }),
             " ",
-            /* @__PURE__ */ t(m, { children: "Navigate to right page" })
+            /* @__PURE__ */ e(p, { children: "Navigate to right page" })
           ] }),
-          /* @__PURE__ */ a(k, { mb: 1, children: [
-            /* @__PURE__ */ t(te, { children: /* @__PURE__ */ t(ke, {}) }),
+          /* @__PURE__ */ c(O, { mb: 1, children: [
+            /* @__PURE__ */ e(re, { children: /* @__PURE__ */ e(Oe, {}) }),
             " ",
-            /* @__PURE__ */ t(m, { children: "Navigate to left page" })
+            /* @__PURE__ */ e(p, { children: "Navigate to left page" })
           ] }),
-          /* @__PURE__ */ t(L, { mb: 2, mt: 4, as: "h3", size: "lg", children: "About" }),
-          /* @__PURE__ */ a(m, { children: [
-            _e,
+          /* @__PURE__ */ e(W, { mb: 2, mt: 4, as: "h3", size: "lg", children: "About" }),
+          /* @__PURE__ */ c(p, { children: [
+            en,
             " version: ",
-            Ne
+            nn
           ] })
         ] }),
-        /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(G, { asChild: !0, children: /* @__PURE__ */ t(_, { variant: "outline", children: "Cancel" }) }) }),
-        /* @__PURE__ */ t(j, {})
+        /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(E, { variant: "outline", children: "Cancel" }) }) }),
+        /* @__PURE__ */ e($, {})
       ] })
     }
   )
-), O = () => {
-  const { reader: e } = oe(N);
-  return e;
-}, ce = (e) => !!e && "__PROSE_READER_ENHANCER_SEARCH" in e, D = () => {
-  const e = O();
-  return I(
-    () => e ? Ce([e.pagination.state$, e.context.state$]).pipe(
-      ie(([n, r]) => {
-        var o;
-        const l = (o = r.manifest) == null ? void 0 : o.spineItems.every(
+), B = () => {
+  const n = y();
+  return b(
+    () => n ? Se([n.pagination.state$, n.context.state$]).pipe(
+      de(([t, o]) => {
+        var l;
+        const r = (l = o.manifest) == null ? void 0 : l.spineItems.every(
           (i) => {
-            var c;
-            return (c = i.mediaType) == null ? void 0 : c.startsWith("image/");
+            var a;
+            return (a = i.mediaType) == null ? void 0 : a.startsWith("image/");
           }
         );
         return {
-          ...n,
-          hasChapters: !r.isFullyPrePaginated && !l
+          ...t,
+          hasChapters: !o.isFullyPrePaginated && !r
         };
       })
-    ) : xe,
-    [e]
+    ) : Ie,
+    [n]
   );
-}, Ve = () => {
-  const e = D(), n = Math.floor(
-    ((e == null ? void 0 : e.percentageEstimateOfBook) ?? 0) * 100
-  ), r = n > 0 ? n : 1;
-  return (e == null ? void 0 : e.percentageEstimateOfBook) === void 0 ? null : /* @__PURE__ */ t(R, { position: "absolute", right: 0, bottom: 0, p: 2, color: "black", children: /* @__PURE__ */ a(m, { fontSize: "sm", children: [
-    r,
+}, on = () => {
+  const n = B(), t = Math.floor(
+    ((n == null ? void 0 : n.percentageEstimateOfBook) ?? 0) * 100
+  ), o = t > 0 ? t : 1;
+  return (n == null ? void 0 : n.percentageEstimateOfBook) === void 0 ? null : /* @__PURE__ */ e(A, { position: "absolute", right: 0, bottom: 0, p: 2, color: "black", children: /* @__PURE__ */ c(p, { fontSize: "sm", children: [
+    o,
     " %"
   ] }) });
-}, qe = () => {
-  const [e, n] = T(/* @__PURE__ */ new Date());
-  return M(() => {
-    const r = setInterval(() => {
-      n(/* @__PURE__ */ new Date());
+}, rn = () => {
+  const [n, t] = w(/* @__PURE__ */ new Date());
+  return Q(() => {
+    const o = setInterval(() => {
+      t(/* @__PURE__ */ new Date());
     }, 6e4);
-    return () => clearInterval(r);
-  }, []), e;
-}, Ue = (e) => {
-  const n = qe();
-  return /* @__PURE__ */ t(m, { fontSize: "xs", ...e, children: n.toLocaleTimeString(navigator.language, {
+    return () => clearInterval(o);
+  }, []), n;
+}, ln = (n) => {
+  const t = rn();
+  return /* @__PURE__ */ e(p, { fontSize: "xs", ...n, children: t.toLocaleTimeString(navigator.language, {
     hour: "2-digit",
     minute: "2-digit"
   }) });
-}, K = () => {
-  const { quickMenuSignal: e } = oe(N);
-  return [pe(e), e.setValue, e];
-}, Ye = () => {
-  const [e] = K();
-  return /* @__PURE__ */ t(
-    R,
+}, ee = () => {
+  const { quickMenuSignal: n } = le(J);
+  return [ve(n), n.setValue, n];
+}, sn = () => {
+  const [n] = ee();
+  return /* @__PURE__ */ e(
+    A,
     {
       position: "absolute",
       left: 0,
       bottom: 0,
       p: 2,
-      color: e ? void 0 : "colorPalette.contrast",
-      children: /* @__PURE__ */ t(Ue, {})
+      color: n ? void 0 : "colorPalette.contrast",
+      children: /* @__PURE__ */ e(ln, {})
     }
   );
-}, Qe = w.forwardRef(
-  function(n, r) {
+}, an = D.forwardRef(
+  function(t, o) {
     const {
-      showArrow: l,
-      children: o,
+      showArrow: r,
+      children: l,
       portalled: i = !0,
-      content: c,
-      portalRef: d,
+      content: a,
+      portalRef: h,
       ...u
-    } = n;
-    return /* @__PURE__ */ a(
-      y.Root,
+    } = t;
+    return /* @__PURE__ */ c(
+      z.Root,
       {
         ...u,
         positioning: { ...u.positioning, gutter: 4 },
         children: [
-          /* @__PURE__ */ t(y.Trigger, { asChild: !0, children: o }),
-          /* @__PURE__ */ t(se, { disabled: !i, container: d, children: /* @__PURE__ */ t(y.Positioner, { children: /* @__PURE__ */ a(
-            y.Content,
+          /* @__PURE__ */ e(z.Trigger, { asChild: !0, children: l }),
+          /* @__PURE__ */ e(he, { disabled: !i, container: h, children: /* @__PURE__ */ e(z.Positioner, { children: /* @__PURE__ */ c(
+            z.Content,
             {
               width: "auto",
               px: "2",
               py: "1",
               textStyle: "xs",
               rounded: "sm",
-              ref: r,
+              ref: o,
               children: [
-                l && /* @__PURE__ */ t(y.Arrow, { children: /* @__PURE__ */ t(y.ArrowTip, {}) }),
-                c
+                r && /* @__PURE__ */ e(z.Arrow, { children: /* @__PURE__ */ e(z.ArrowTip, {}) }),
+                a
               ]
             }
           ) }) })
@@ -204,84 +413,84 @@ const G = f.ActionTrigger, je = p(
       }
     );
   }
-), Ge = w.forwardRef(function(n, r) {
-  const { children: l, ...o } = n;
-  return /* @__PURE__ */ t(Qe, { content: l, ...o, ref: r, children: /* @__PURE__ */ t(
-    b,
+), cn = D.forwardRef(function(t, o) {
+  const { children: r, ...l } = t;
+  return /* @__PURE__ */ e(an, { content: r, ...l, ref: o, children: /* @__PURE__ */ e(
+    m,
     {
       variant: "ghost",
       "aria-label": "info",
       size: "2xs",
       colorPalette: "gray",
-      children: /* @__PURE__ */ t(Me, {})
+      children: /* @__PURE__ */ e(je, {})
     }
   ) });
-}), Ke = w.forwardRef(function(n, r) {
-  return /* @__PURE__ */ t(B.Track, { ...n, ref: r, children: /* @__PURE__ */ t(B.Range, {}) });
+}), dn = D.forwardRef(function(t, o) {
+  return /* @__PURE__ */ e(_.Track, { ...t, ref: o, children: /* @__PURE__ */ e(_.Range, {}) });
 });
-w.forwardRef(function(n, r) {
-  const { children: l, info: o, ...i } = n;
-  return /* @__PURE__ */ a(B.Label, { ...i, ref: r, children: [
-    l,
-    o && /* @__PURE__ */ t(Ge, { children: o })
+D.forwardRef(function(t, o) {
+  const { children: r, info: l, ...i } = t;
+  return /* @__PURE__ */ c(_.Label, { ...i, ref: o, children: [
+    r,
+    l && /* @__PURE__ */ e(cn, { children: l })
   ] });
 });
-const Xe = B.Root, Je = B.ValueText, X = () => {
-  const e = D(), n = (e == null ? void 0 : e.numberOfTotalPages) === 1, r = ((e == null ? void 0 : e.beginNumberOfPagesInSpineItem) ?? 0) > 1, l = ((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, i = (e != null && e.hasChapters ? e == null ? void 0 : e.endPageIndexInSpineItem : e == null ? void 0 : e.endAbsolutePageIndex) ?? 0, [c = 0, d = 0] = [
-    o,
+const hn = _.Root, un = _.ValueText, ne = () => {
+  const n = B(), t = (n == null ? void 0 : n.numberOfTotalPages) === 1, o = ((n == null ? void 0 : n.beginNumberOfPagesInSpineItem) ?? 0) > 1, r = ((n == null ? void 0 : n.endNumberOfPagesInSpineItem) ?? 0) > 1, l = (n != null && n.hasChapters ? n == null ? void 0 : n.beginPageIndexInSpineItem : n == null ? void 0 : n.beginAbsolutePageIndex) ?? 0, i = (n != null && n.hasChapters ? n == null ? void 0 : n.endPageIndexInSpineItem : n == null ? void 0 : n.endAbsolutePageIndex) ?? 0, [a = 0, h = 0] = [
+    l,
     i
-  ].sort((g, h) => g - 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;
+  ].sort((g, d) => g - d), u = (n == null ? void 0 : n.beginPageIndexInSpineItem) !== (n == null ? void 0 : n.endPageIndexInSpineItem) || (n == null ? void 0 : n.beginSpineItemIndex) !== (n == null ? void 0 : n.endSpineItemIndex), s = n != null && n.hasChapters ? n == null ? void 0 : n.beginNumberOfPagesInSpineItem : n == null ? void 0 : n.numberOfTotalPages;
   return {
-    hasOnlyOnePage: n,
-    beginPageIndex: o,
+    hasOnlyOnePage: t,
+    beginPageIndex: l,
     endPageIndex: i,
-    isBeginWithinChapter: r,
-    isEndWithinChapter: l,
+    isBeginWithinChapter: o,
+    isEndWithinChapter: r,
     beginAndEndAreDifferent: u,
     totalApproximatePages: s,
-    leftPageIndex: c,
-    rightPageIndex: d
+    leftPageIndex: a,
+    rightPageIndex: h
   };
-}, Ze = () => {
-  const e = D(), {
-    hasOnlyOnePage: n,
-    leftPageIndex: r,
-    rightPageIndex: l,
-    totalApproximatePages: o,
+}, gn = () => {
+  const n = B(), {
+    hasOnlyOnePage: t,
+    leftPageIndex: o,
+    rightPageIndex: r,
+    totalApproximatePages: l,
     beginAndEndAreDifferent: i
-  } = X(), 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(v, { alignItems: "center", gap: 1, maxW: "100%", overflow: "auto", children: [
-    /* @__PURE__ */ t(Xe, { value: c, size: "xs", width: 150, children: /* @__PURE__ */ a(k, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ t(Ke, { width: 110 }),
-      /* @__PURE__ */ t(Je, { children: `${c}%` })
+  } = ne(), a = Math.round(((n == null ? void 0 : n.percentageEstimateOfBook) ?? 0) * 100), h = (s) => s != null && s.subChapter ? `${s.title} / ${h(s.subChapter)}` : (s == null ? void 0 : s.title) || "", u = h(n == null ? void 0 : n.beginChapterInfo);
+  return /* @__PURE__ */ c(P, { alignItems: "center", gap: 1, maxW: "100%", overflow: "auto", children: [
+    /* @__PURE__ */ e(hn, { value: a, size: "xs", width: 150, children: /* @__PURE__ */ c(O, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ e(dn, { width: 110 }),
+      /* @__PURE__ */ e(un, { children: `${a}%` })
     ] }) }),
-    /* @__PURE__ */ t(m, { truncate: !0, maxWidth: "100%", fontSize: "sm", mt: 1, children: u ? `Chapter: ${u}` : " " }),
-    !n && /* @__PURE__ */ a(k, { children: [
-      /* @__PURE__ */ t(m, { fontSize: "xs", children: i ? `${r + 1} - ${l + 1} of ${o}` : `${r + 1} of ${o}` }),
-      !!(e != null && e.hasChapters) && /* @__PURE__ */ a(F, { children: [
-        /* @__PURE__ */ t(m, { children: "-" }),
-        /* @__PURE__ */ a(m, { fontSize: "xs", children: [
+    /* @__PURE__ */ e(p, { truncate: !0, maxWidth: "100%", fontSize: "sm", mt: 1, children: u ? `Chapter: ${u}` : " " }),
+    !t && /* @__PURE__ */ c(O, { children: [
+      /* @__PURE__ */ e(p, { fontSize: "xs", children: i ? `${o + 1} - ${r + 1} of ${l}` : `${o + 1} of ${l}` }),
+      !!(n != null && n.hasChapters) && /* @__PURE__ */ c(U, { children: [
+        /* @__PURE__ */ e(p, { children: "-" }),
+        /* @__PURE__ */ c(p, { fontSize: "xs", children: [
           "(",
-          ((e == null ? void 0 : e.beginAbsolutePageIndex) ?? 0) + 1,
+          ((n == null ? void 0 : n.beginAbsolutePageIndex) ?? 0) + 1,
           ")"
         ] })
       ] })
     ] })
   ] });
-}, de = p(
+}, pe = f(
   ({
-    children: e,
-    position: n,
-    ...r
-  }) => /* @__PURE__ */ t(
-    $,
+    children: n,
+    position: t,
+    ...o
+  }) => /* @__PURE__ */ e(
+    q,
     {
       display: "flex",
       flexDirection: "row",
       width: "100%",
       position: "absolute",
-      ...n === "bottom" ? { bottom: 0 } : { top: 0 },
-      animationName: n === "bottom" ? {
+      ...t === "bottom" ? { bottom: 0 } : { top: 0 },
+      animationName: t === "bottom" ? {
         _open: "slide-from-bottom, fade-in",
         _closed: "slide-to-bottom, fade-out"
       } : {
@@ -294,12 +503,12 @@ const Xe = B.Root, Je = B.ValueText, X = () => {
       justifyContent: "center",
       shadow: "md",
       p: 4,
-      ...r,
-      children: e
+      ...o,
+      children: n
     }
   )
-), et = Ie(Ee), tt = p((e) => /* @__PURE__ */ t(
-  R,
+), pn = Te(Ve), fn = f((n) => /* @__PURE__ */ e(
+  A,
   {
     display: "contents",
     css: {
@@ -307,8 +516,8 @@ const Xe = B.Root, Je = B.ValueText, X = () => {
       "--bg-emphasized": "colors.bg.emphasized",
       "--color-solid": "colors.colorPalette.solid"
     },
-    children: /* @__PURE__ */ t(
-      et,
+    children: /* @__PURE__ */ e(
+      pn,
       {
         keyboard: !1,
         style: {
@@ -343,394 +552,376 @@ const Xe = B.Root, Je = B.ValueText, X = () => {
             height: "24px",
             top: "50%",
             borderColor: "var(--color-solid)",
-            transform: `translate(${e.reverse ? "50%" : "-50%"}, -50%)`,
+            transform: `translate(${n.reverse ? "50%" : "-50%"}, -50%)`,
             backgroundColor: "var(--bg)",
             marginTop: "0px"
           }
         },
-        ...e
+        ...n
       }
     )
   }
-)), nt = () => {
-  const e = D(), n = e == null ? void 0 : e.isUsingSpread, { beginPageIndex: r, totalApproximatePages: l = 0 } = X(), o = n ? Math.floor((r || 0) / 2) : r, [i, c] = re({
-    default: o || 0
-  }), d = 0, u = Math.max(
+)), mn = () => {
+  const n = B(), t = n == null ? void 0 : n.isUsingSpread, { beginPageIndex: o, totalApproximatePages: r = 0 } = ne(), l = t ? Math.floor((o || 0) / 2) : o, [i, a] = se({
+    default: l || 0
+  }), h = 0, u = Math.max(
     0,
-    n ? Math.floor((l - 1) / 2) : l - 1
+    t ? Math.floor((r - 1) / 2) : r - 1
   );
-  return M(() => {
-    c.setValue(o || 0);
-  }, [o, c]), {
+  return Q(() => {
+    a.setValue(l || 0);
+  }, [l, a]), {
     value: i,
-    valueSignal: c,
-    min: d,
+    valueSignal: a,
+    min: h,
     max: u
   };
-}, ot = () => {
-  const e = O(), n = D(), { manifest: r } = I(() => e == null ? void 0 : e.context.state$, []) ?? {}, l = (r == null ? void 0 : r.readingDirection) === "rtl", o = n == null ? void 0 : n.isUsingSpread, { totalApproximatePages: i = 0, isBeginWithinChapter: c } = X(), d = 1, u = c, { value: s, valueSignal: g, min: h, max: S } = nt(), P = H(
-    (x) => {
-      const [C = 0] = Array.isArray(x) ? x : [x];
-      g.setValue(C);
-      const A = o ? Math.floor(C) * 2 : Math.floor(C);
-      u ? e == null || e.navigation.goToPageOfSpineItem({
-        pageIndex: A,
-        spineItemId: e.pagination.getState().beginSpineItemIndex ?? 0,
+}, bn = (n) => {
+  const t = y(), o = B(), { manifest: r } = b(() => t == null ? void 0 : t.context.state$, []) ?? {}, l = (r == null ? void 0 : r.readingDirection) === "rtl", i = o == null ? void 0 : o.isUsingSpread, { totalApproximatePages: a = 0, isBeginWithinChapter: h } = ne(), u = 1, s = h, { value: g, valueSignal: d, min: x, max: C } = mn(), T = M(
+    (v) => {
+      const [R = 0] = Array.isArray(v) ? v : [v];
+      d.setValue(R);
+      const I = i ? Math.floor(R) * 2 : Math.floor(R);
+      s ? t == null || t.navigation.goToPageOfSpineItem({
+        pageIndex: I,
+        spineItemId: t.pagination.getState().beginSpineItemIndex ?? 0,
         animation: !1
-      }) : e == null || e.navigation.goToAbsolutePageIndex({
-        absolutePageIndex: A,
+      }) : t == null || t.navigation.goToAbsolutePageIndex({
+        absolutePageIndex: I,
         animation: !1
       });
     },
-    [e, o, g, u]
+    [t, i, d, s]
   );
-  return le(
-    () => e == null ? void 0 : e.navigation.throttleLock({
+  return ae(
+    () => t == null ? void 0 : t.navigation.throttleLock({
       duration: 100,
-      trigger: g.subject
+      trigger: d.subject
     }),
-    [e, g]
-  ), i === 1 || o && i === 2 ? null : /* @__PURE__ */ t(
-    tt,
+    [t, d]
+  ), a === 1 || i && a === 2 ? null : /* @__PURE__ */ e(
+    fn,
     {
-      value: [s],
-      max: S,
-      min: h,
+      value: [g],
+      max: C,
+      min: x,
       reverse: l,
-      step: d,
-      onChange: P
+      step: u,
+      onChange: T,
+      ...n
     }
   );
-}, rt = p(
+}, xn = f(
   ({
-    open: e,
-    onTableOfContentsClick: n,
-    onHelpClick: r,
-    onSearchClick: l
+    open: n,
+    onItemClick: t
   }) => {
-    const o = O(), i = I(() => o == null ? void 0 : o.navigation.state$, [o]), c = I(() => o == null ? void 0 : o.settings.values$, [o]), d = (c == null ? void 0 : c.computedPageTurnDirection) === "vertical", [u, s] = T(!0);
-    return /* @__PURE__ */ t(
-      de,
-      {
-        present: e,
-        position: "bottom",
-        children: /* @__PURE__ */ a(
-          v,
+    const o = y(), r = b(() => o == null ? void 0 : o.navigation.state$, [o]), l = b(() => o == null ? void 0 : o.settings.values$, [o]), i = (l == null ? void 0 : l.computedPageTurnDirection) === "vertical", [a, h] = w(!0);
+    return /* @__PURE__ */ e(pe, { present: n, position: "bottom", children: /* @__PURE__ */ c(P, { flex: 1, overflow: "auto", children: [
+      /* @__PURE__ */ c(O, { flex: 1, alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            "aria-label": "left",
+            size: "lg",
+            variant: "ghost",
+            flexShrink: 0,
+            onClick: () => o == null ? void 0 : o.navigation.goToLeftOrTopSpineItem(),
+            disabled: !(r != null && r.canGoLeftSpineItem) && !(r != null && r.canGoTopSpineItem),
+            children: i ? /* @__PURE__ */ e($e, {}) : /* @__PURE__ */ e(Ne, {})
+          }
+        ),
+        /* @__PURE__ */ c(
+          P,
           {
             flex: 1,
+            maxW: 400,
+            gap: 2,
+            alignItems: "center",
+            overflow: "auto",
+            px: 4,
             children: [
-              /* @__PURE__ */ a(k, { flex: 1, alignItems: "center", justifyContent: "center", children: [
-                /* @__PURE__ */ t(
-                  b,
-                  {
-                    "aria-label": "left",
-                    size: "lg",
-                    variant: "ghost",
-                    flexShrink: 0,
-                    onClick: () => o == null ? void 0 : o.navigation.goToLeftOrTopSpineItem(),
-                    disabled: !(i != null && i.canGoLeftSpineItem) && !(i != null && i.canGoTopSpineItem),
-                    children: d ? /* @__PURE__ */ t(De, {}) : /* @__PURE__ */ t(Ae, {})
-                  }
-                ),
-                /* @__PURE__ */ a(
-                  v,
-                  {
-                    flex: 1,
-                    maxW: 400,
-                    gap: 2,
-                    alignItems: "center",
-                    overflow: "visible",
-                    px: 4,
-                    children: [
-                      /* @__PURE__ */ t(Ze, {}),
-                      /* @__PURE__ */ t(R, { height: 5, maxW: 300, width: "100%", overflow: "visible", children: /* @__PURE__ */ t(ot, {}) })
-                    ]
+              /* @__PURE__ */ e(gn, {}),
+              /* @__PURE__ */ e(
+                bn,
+                {
+                  style: {
+                    width: "100%",
+                    maxWidth: "300px",
+                    height: "35px"
                   }
-                ),
-                /* @__PURE__ */ t(
-                  b,
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            "aria-label": "right",
+            size: "lg",
+            flexShrink: 0,
+            variant: "ghost",
+            disabled: !(r != null && r.canGoRightSpineItem) && !(r != null && r.canGoBottomSpineItem),
+            onClick: () => {
+              o == null || o.navigation.goToRightOrBottomSpineItem();
+            },
+            children: i ? /* @__PURE__ */ e(Fe, {}) : /* @__PURE__ */ e(He, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(O, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ c(
+        K.Root,
+        {
+          open: a,
+          flex: 1,
+          onOpenChange: ({ open: u }) => {
+            h(u);
+          },
+          children: [
+            /* @__PURE__ */ e(
+              K.Trigger,
+              {
+                paddingY: "3",
+                width: "100%",
+                display: "flex",
+                justifyContent: "center",
+                children: /* @__PURE__ */ e(
+                  De,
                   {
-                    "aria-label": "right",
-                    size: "lg",
-                    flexShrink: 0,
-                    variant: "ghost",
-                    disabled: !(i != null && i.canGoRightSpineItem) && !(i != null && i.canGoBottomSpineItem),
-                    onClick: () => {
-                      o == null || o.navigation.goToRightOrBottomSpineItem();
-                    },
-                    children: d ? /* @__PURE__ */ t(ze, {}) : /* @__PURE__ */ t(Be, {})
+                    style: {
+                      transform: a ? "rotate(0deg)" : "rotate(180deg)"
+                    }
                   }
                 )
-              ] }),
-              /* @__PURE__ */ t(
-                k,
+              }
+            ),
+            /* @__PURE__ */ c(K.Content, { display: "flex", justifyContent: "center", children: [
+              /* @__PURE__ */ e(
+                m,
                 {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  children: /* @__PURE__ */ a(
-                    E.Root,
-                    {
-                      open: u,
-                      flex: 1,
-                      onOpenChange: ({ open: g }) => {
-                        s(g);
-                      },
-                      children: [
-                        /* @__PURE__ */ t(
-                          E.Trigger,
-                          {
-                            paddingY: "3",
-                            width: "100%",
-                            display: "flex",
-                            justifyContent: "center",
-                            children: /* @__PURE__ */ t(
-                              we,
-                              {
-                                style: {
-                                  transform: u ? "rotate(0deg)" : "rotate(180deg)"
-                                }
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ a(
-                          E.Content,
-                          {
-                            display: "flex",
-                            justifyContent: "center",
-                            gap: 2,
-                            children: [
-                              /* @__PURE__ */ t(
-                                b,
-                                {
-                                  "aria-label": "Help",
-                                  size: "lg",
-                                  variant: "ghost",
-                                  onClick: r,
-                                  children: /* @__PURE__ */ t(ye, {})
-                                }
-                              ),
-                              /* @__PURE__ */ t(
-                                b,
-                                {
-                                  "aria-label": "Table of contents",
-                                  size: "lg",
-                                  variant: "ghost",
-                                  onClick: n,
-                                  children: /* @__PURE__ */ t(Re, {})
-                                }
-                              ),
-                              ce(o) && /* @__PURE__ */ t(
-                                b,
-                                {
-                                  "aria-label": "Search",
-                                  size: "lg",
-                                  variant: "ghost",
-                                  onClick: l,
-                                  children: /* @__PURE__ */ t(Oe, {})
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  )
+                  "aria-label": "Help",
+                  size: "lg",
+                  variant: "ghost",
+                  onClick: () => t("help"),
+                  children: /* @__PURE__ */ e(ze, {})
+                }
+              ),
+              /* @__PURE__ */ e(
+                m,
+                {
+                  "aria-label": "Table of contents",
+                  size: "lg",
+                  variant: "ghost",
+                  onClick: () => t("toc"),
+                  children: /* @__PURE__ */ e(Ae, {})
+                }
+              ),
+              ue(o) && /* @__PURE__ */ e(
+                m,
+                {
+                  "aria-label": "Search",
+                  size: "lg",
+                  variant: "ghost",
+                  onClick: () => t("search"),
+                  children: /* @__PURE__ */ e(Ee, {})
+                }
+              ),
+              Z(o) && /* @__PURE__ */ e(
+                m,
+                {
+                  "aria-label": "Search",
+                  size: "lg",
+                  variant: "ghost",
+                  onClick: () => t("bookmarks"),
+                  children: /* @__PURE__ */ e(Le, {})
+                }
+              ),
+              ge(o) && /* @__PURE__ */ e(
+                m,
+                {
+                  "aria-label": "Search",
+                  size: "lg",
+                  variant: "ghost",
+                  onClick: () => t("annotations"),
+                  children: /* @__PURE__ */ e(X, {})
                 }
               )
-            ]
-          }
-        )
-      }
-    );
+            ] })
+          ]
+        }
+      ) })
+    ] }) });
   }
-), lt = () => {
-  const [e, n] = T(!1), r = H(() => document.fullscreenElement ? document.exitFullscreen().catch(console.error).then(() => {
-    n(!1);
+), Cn = () => {
+  const [n, t] = w(!1), o = M(() => document.fullscreenElement ? document.exitFullscreen().catch(console.error).then(() => {
+    t(!1);
   }) : document.documentElement.requestFullscreen({ navigationUI: "hide" }).catch(console.error).then(() => {
-    n(!0);
+    t(!0);
   }), []);
-  return M(() => {
-    function l() {
-      n(!!document.fullscreenElement);
+  return Q(() => {
+    function r() {
+      t(!!document.fullscreenElement);
     }
-    return document.addEventListener("fullscreenchange", l), () => {
-      document.removeEventListener("fullscreenchange", l);
+    return document.addEventListener("fullscreenchange", r), () => {
+      document.removeEventListener("fullscreenchange", r);
     };
   }, []), {
-    isFullscreen: e,
-    onToggleFullscreenClick: r
+    isFullscreen: n,
+    onToggleFullscreenClick: o
   };
-}, it = ({
-  open: e,
-  onBackClick: n,
-  onMoreClick: r
-}) => {
-  const l = O(), o = I(() => l == null ? void 0 : l.context.manifest$, [l]), { isFullscreen: i, onToggleFullscreenClick: c } = lt();
-  return /* @__PURE__ */ a(
-    de,
-    {
-      present: e,
-      position: "top",
-      height: "80px",
-      justifyContent: "space-between",
-      children: [
-        /* @__PURE__ */ t(
-          b,
-          {
-            "aria-label": "left",
-            size: "lg",
-            variant: "ghost",
-            flexShrink: 0,
-            onClick: n,
-            children: /* @__PURE__ */ t(Le, {})
-          }
-        ),
-        /* @__PURE__ */ t(
-          v,
-          {
-            flex: 1,
-            maxW: 600,
-            gap: 1,
-            alignItems: "center",
-            overflow: "auto",
-            px: 4,
-            children: /* @__PURE__ */ t(m, { truncate: !0, maxWidth: "100%", children: o == null ? void 0 : o.title })
-          }
-        ),
-        /* @__PURE__ */ a(k, { children: [
-          /* @__PURE__ */ t(
-            b,
+}, vn = f(
+  ({
+    open: n,
+    onItemClick: t
+  }) => {
+    const o = y(), r = b(() => o == null ? void 0 : o.context.manifest$, [o]), { isFullscreen: l, onToggleFullscreenClick: i } = Cn();
+    return /* @__PURE__ */ c(
+      pe,
+      {
+        present: n,
+        position: "top",
+        height: "80px",
+        justifyContent: "space-between",
+        children: [
+          /* @__PURE__ */ e(
+            m,
             {
-              "aria-label": "right",
+              "aria-label": "left",
               size: "lg",
-              flexShrink: 0,
               variant: "ghost",
-              onClick: r,
-              children: /* @__PURE__ */ t($e, {})
+              flexShrink: 0,
+              onClick: () => t("back"),
+              children: /* @__PURE__ */ e(Ye, {})
             }
           ),
-          /* @__PURE__ */ t(
-            b,
+          /* @__PURE__ */ e(
+            P,
             {
-              "aria-label": "right",
-              size: "lg",
-              flexShrink: 0,
-              variant: "ghost",
-              onClick: c,
-              children: i ? /* @__PURE__ */ t(Fe, {}) : /* @__PURE__ */ t(He, {})
+              flex: 1,
+              maxW: 600,
+              gap: 1,
+              alignItems: "center",
+              overflow: "auto",
+              px: 4,
+              children: /* @__PURE__ */ e(p, { truncate: !0, maxWidth: "100%", children: r == null ? void 0 : r.title })
             }
-          )
-        ] })
-      ]
-    }
-  );
-}, st = p(
+          ),
+          /* @__PURE__ */ c(O, { children: [
+            /* @__PURE__ */ e(
+              m,
+              {
+                "aria-label": "right",
+                size: "lg",
+                flexShrink: 0,
+                variant: "ghost",
+                onClick: () => t("more"),
+                children: /* @__PURE__ */ e(qe, {})
+              }
+            ),
+            /* @__PURE__ */ e(
+              m,
+              {
+                "aria-label": "right",
+                size: "lg",
+                flexShrink: 0,
+                variant: "ghost",
+                onClick: i,
+                children: l ? /* @__PURE__ */ e(Ue, {}) : /* @__PURE__ */ e(Qe, {})
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+), kn = f(
   ({
-    onBackClick: e,
-    onMoreClick: n,
-    onTableOfContentsClick: r,
-    onHelpClick: l,
-    onSearchClick: o
+    onItemClick: n
   }) => {
-    const [i] = K();
-    return /* @__PURE__ */ a(F, { children: [
-      /* @__PURE__ */ t(
-        it,
-        {
-          open: i,
-          onBackClick: e,
-          onMoreClick: n
-        }
-      ),
-      /* @__PURE__ */ t(
-        rt,
-        {
-          open: i,
-          onTableOfContentsClick: r,
-          onHelpClick: l,
-          onSearchClick: o
-        }
-      )
+    const [t] = ee();
+    return /* @__PURE__ */ c(U, { children: [
+      /* @__PURE__ */ e(vn, { open: t, onItemClick: n }),
+      /* @__PURE__ */ e(xn, { open: t, onItemClick: n })
     ] });
   }
-), at = p(
+), In = f(
   ({
-    contextText: e = "",
-    startOffset: n = 0,
-    text: r,
-    cfi: l = "#",
-    onClick: o,
+    contextText: n = "",
+    startOffset: t = 0,
+    text: o,
+    cfi: r = "#",
+    onClick: l,
     absolutePageIndex: i
   }) => {
-    const d = e.substring(
-      Math.max(n - 15, 0),
-      Math.max(n, 0)
-    ), u = e.substring(
-      Math.min(n + r.length, e.length - 1),
+    const h = n.substring(
+      Math.max(t - 15, 0),
+      Math.max(t, 0)
+    ), u = n.substring(
+      Math.min(t + o.length, n.length - 1),
       Math.min(
-        n + r.length + 15,
-        e.length - 1
+        t + o.length + 15,
+        n.length - 1
       )
     );
-    return /* @__PURE__ */ a(
-      ae,
+    return /* @__PURE__ */ c(
+      G,
       {
-        href: l,
+        href: r,
         style: { margin: 5, overflow: "hidden" },
         onClick: (s) => {
-          s.preventDefault(), o(l);
+          s.preventDefault(), l(r);
         },
         display: "flex",
         flexDirection: "column",
         alignItems: "flex-start",
         gap: 0,
         children: [
-          /* @__PURE__ */ a(m, { lineClamp: 1, as: "cite", style: { display: "block" }, children: [
+          /* @__PURE__ */ c(p, { lineClamp: 1, as: "cite", style: { display: "block" }, children: [
             '"',
-            d,
-            /* @__PURE__ */ t("b", { children: r }),
+            h,
+            /* @__PURE__ */ e("b", { children: o }),
             u,
             '"'
           ] }),
-          /* @__PURE__ */ t(m, { fontSize: "sm", color: "gray.500", style: { textDecoration: "none" }, children: `Book page: ${i !== void 0 ? i + 1 : "unknown (not loaded)"}` })
+          /* @__PURE__ */ e(p, { fontSize: "sm", color: "gray.500", style: { textDecoration: "none" }, children: `Book page: ${i !== void 0 ? i + 1 : "unknown (not loaded)"}` })
         ]
       }
     );
   }
-), ct = p(
+), Sn = f(
   ({
-    onNavigate: e
+    onNavigate: n
   }) => {
-    const [n, r] = T(""), l = O(), o = ce(l) ? l : void 0, i = (h) => {
-      r(h.target.value);
-    }, c = H(
-      (h) => {
-        e(), l == null || l.navigation.goToCfi(h);
+    const [t, o] = w(""), r = y(), l = ue(r) ? r : void 0, i = (d) => {
+      o(d.target.value);
+    }, a = M(
+      (d) => {
+        n(), r == null || r.navigation.goToCfi(d);
       },
-      [l, e]
-    ), d = I(
-      () => o == null ? void 0 : o.search.search(n).pipe(
-        ie((h) => ({ type: "end", data: h })),
-        ve({ type: "start" })
+      [r, n]
+    ), h = b(
+      () => l == null ? void 0 : l.search.search(t).pipe(
+        de((d) => ({ type: "end", data: d })),
+        Pe({ type: "start" })
       ),
-      [l, n]
-    ), u = (d == null ? void 0 : d.type) === "start", s = (d == null ? void 0 : d.type) === "end" ? d.data : [], g = I(
-      () => l == null ? void 0 : l.pagination.locate(s.slice(0, 100)),
+      [r, t]
+    ), u = (h == null ? void 0 : h.type) === "start", s = (h == null ? void 0 : h.type) === "end" ? h.data : [], g = b(
+      () => r == null ? void 0 : r.pagination.locate(s.slice(0, 100)),
       [s]
     );
-    return /* @__PURE__ */ a(v, { flex: 1, height: "100%", children: [
-      /* @__PURE__ */ t(R, { px: 4, children: /* @__PURE__ */ t(
-        Se,
+    return /* @__PURE__ */ c(P, { flex: 1, height: "100%", children: [
+      /* @__PURE__ */ e(A, { px: 4, children: /* @__PURE__ */ e(
+        we,
         {
           placeholder: "Type something...",
-          value: n,
+          value: t,
           onChange: i,
           borderRadius: 0
         }
       ) }),
-      /* @__PURE__ */ a(
-        R,
+      /* @__PURE__ */ c(
+        A,
         {
           px: 4,
           pb: 4,
@@ -738,27 +929,27 @@ const Xe = B.Root, Je = B.ValueText, X = () => {
           flex: 1,
           style: { overflow: "hidden", overflowY: "auto" },
           children: [
-            u && /* @__PURE__ */ t(m, { children: "Searching ..." }),
-            !u && s.length === 0 && /* @__PURE__ */ t("p", { children: "There are no results" }),
-            !u && s.length >= 0 && /* @__PURE__ */ a(v, { children: [
-              /* @__PURE__ */ a(L, { as: "h2", size: "md", children: [
+            u && /* @__PURE__ */ e(p, { children: "Searching ..." }),
+            !u && s.length === 0 && /* @__PURE__ */ e("p", { children: "There are no results" }),
+            !u && s.length >= 0 && /* @__PURE__ */ c(P, { children: [
+              /* @__PURE__ */ c(W, { as: "h2", size: "md", children: [
                 s.length,
                 " result(s)"
               ] }),
-              /* @__PURE__ */ t(v, { gap: 0, children: g == null ? void 0 : g.map((h, S) => {
-                var P, x, C, A, J, Z, ee;
-                return /* @__PURE__ */ t(
-                  at,
+              /* @__PURE__ */ e(P, { gap: 0, children: g == null ? void 0 : g.map((d, x) => {
+                var C, T, v, R, I, te, oe;
+                return /* @__PURE__ */ e(
+                  In,
                   {
-                    contextText: ((C = (x = (P = h.meta) == null ? void 0 : P.range) == null ? void 0 : x.startContainer.parentElement) == null ? void 0 : C.textContent) ?? "",
-                    pageIndex: (A = h.meta) == null ? void 0 : A.itemPageIndex,
-                    startOffset: ((Z = (J = h.meta) == null ? void 0 : J.range) == null ? void 0 : Z.startOffset) ?? 0,
-                    text: n,
-                    cfi: h.cfi,
-                    onClick: c,
-                    absolutePageIndex: (ee = h.meta) == null ? void 0 : ee.absolutePageIndex
+                    contextText: ((v = (T = (C = d.meta) == null ? void 0 : C.range) == null ? void 0 : T.startContainer.parentElement) == null ? void 0 : v.textContent) ?? "",
+                    pageIndex: (R = d.meta) == null ? void 0 : R.itemPageIndex,
+                    startOffset: ((te = (I = d.meta) == null ? void 0 : I.range) == null ? void 0 : te.startOffset) ?? 0,
+                    text: t,
+                    cfi: d.cfi,
+                    onClick: a,
+                    absolutePageIndex: (oe = d.meta) == null ? void 0 : oe.absolutePageIndex
                   },
-                  S
+                  x
                 );
               }) })
             ] })
@@ -767,62 +958,62 @@ const Xe = B.Root, Je = B.ValueText, X = () => {
       )
     ] });
   }
-), dt = p(
+), Pn = f(
   ({
-    open: e,
-    setOpen: n,
-    onNavigate: r
-  }) => /* @__PURE__ */ t(
-    V,
+    open: n,
+    setOpen: t,
+    onNavigate: o
+  }) => /* @__PURE__ */ e(
+    N,
     {
       lazyMount: !0,
       placement: "center",
-      open: e,
-      onOpenChange: (l) => n(l.open),
+      open: n,
+      onOpenChange: (r) => t(r.open),
       size: { mdDown: "full", md: "lg" },
       scrollBehavior: "inside",
-      children: /* @__PURE__ */ a(W, { height: "100%", children: [
-        /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(Q, { children: "Search" }) }),
-        /* @__PURE__ */ t(Y, { flex: 1, children: /* @__PURE__ */ t(ct, { onNavigate: r }) }),
-        /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(G, { asChild: !0, children: /* @__PURE__ */ t(_, { variant: "outline", children: "Cancel" }) }) }),
-        /* @__PURE__ */ t(j, {})
+      children: /* @__PURE__ */ c(L, { height: "100%", children: [
+        /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(V, { children: "Search" }) }),
+        /* @__PURE__ */ e(j, { flex: 1, children: /* @__PURE__ */ e(Sn, { onNavigate: o }) }),
+        /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(E, { variant: "outline", children: "Cancel" }) }) }),
+        /* @__PURE__ */ e($, {})
       ] })
     }
   )
-), ht = p(
+), Tn = f(
   ({
-    onNavigate: e
+    onNavigate: n
   }) => {
-    const n = O(), { manifest: r, assumedRenditionLayout: l } = I(() => n == null ? void 0 : n.context.state$, [n]) ?? {}, { nav: o } = r ?? {}, i = D();
-    o != null && o.toc;
-    const { beginSpineItemIndex: c, beginPageIndexInSpineItem: d } = i ?? {}, u = (l === "reflowable" ? d : c) || 0;
-    console.log({ assumedRenditionLayout: l, currentSpineItemOrChapterPageIndex: u });
+    const t = y(), { manifest: o, assumedRenditionLayout: r } = b(() => t == null ? void 0 : t.context.state$, [t]) ?? {}, { nav: l } = o ?? {}, i = B();
+    l != null && l.toc;
+    const { beginSpineItemIndex: a, beginPageIndexInSpineItem: h } = i ?? {}, u = (r === "reflowable" ? h : a) || 0;
+    console.log({ assumedRenditionLayout: r, currentSpineItemOrChapterPageIndex: u });
     let s = i == null ? void 0 : i.beginChapterInfo;
     for (; s != null && s.subChapter; )
       s = s == null ? void 0 : s.subChapter;
-    const g = (h, S, P) => /* @__PURE__ */ a(he.Fragment, { children: [
-      /* @__PURE__ */ t(
-        z.Item,
+    const g = (d, x, C) => /* @__PURE__ */ c(fe.Fragment, { children: [
+      /* @__PURE__ */ e(
+        S.Item,
         {
-          pl: 4 * (P + 1),
+          pl: 4 * (C + 1),
           style: {
             display: "flex",
             alignItems: "center"
           },
-          children: /* @__PURE__ */ a(
-            ae,
+          children: /* @__PURE__ */ c(
+            G,
             {
               onClick: () => {
-                e(), n == null || n.navigation.goToUrl(h.href);
+                n(), t == null || t.navigation.goToUrl(d.href);
               },
               href: "#",
               children: [
-                (s == null ? void 0 : s.path) === h.path && /* @__PURE__ */ t(z.Indicator, { asChild: !0, children: /* @__PURE__ */ t(ne, {}) }),
-                (s == null ? void 0 : s.path) !== h.path && /* @__PURE__ */ t(z.Indicator, { asChild: !0, visibility: "hidden", children: /* @__PURE__ */ t(ne, {}) }),
-                /* @__PURE__ */ a(v, { gap: 0, children: [
-                  /* @__PURE__ */ t(m, { fontSize: "md", children: h.title || h.path }),
-                  (s == null ? void 0 : s.path) === h.path && /* @__PURE__ */ t(
-                    m,
+                (s == null ? void 0 : s.path) === d.path && /* @__PURE__ */ e(S.Indicator, { asChild: !0, children: /* @__PURE__ */ e(ie, {}) }),
+                (s == null ? void 0 : s.path) !== d.path && /* @__PURE__ */ e(S.Indicator, { asChild: !0, visibility: "hidden", children: /* @__PURE__ */ e(ie, {}) }),
+                /* @__PURE__ */ c(P, { gap: 0, children: [
+                  /* @__PURE__ */ e(p, { fontSize: "md", children: d.title || d.path }),
+                  (s == null ? void 0 : s.path) === d.path && /* @__PURE__ */ e(
+                    p,
                     {
                       fontStyle: "italic",
                       fontWeight: "bold",
@@ -836,96 +1027,106 @@ const Xe = B.Root, Je = B.ValueText, X = () => {
           )
         }
       ),
-      h.contents.length > 0 && /* @__PURE__ */ t(z.Root, { as: "div", gap: 2, children: h.contents.map(
-        (x, C) => g(x, C, P + 1)
+      d.contents.length > 0 && /* @__PURE__ */ e(S.Root, { as: "div", gap: 2, children: d.contents.map(
+        (T, v) => g(T, v, C + 1)
       ) })
-    ] }, S);
-    return /* @__PURE__ */ t(z.Root, { gap: 3, overflowY: "auto", py: 4, flex: 1, children: o == null ? void 0 : o.toc.map((h, S) => g(h, S, 0)) });
+    ] }, x);
+    return /* @__PURE__ */ e(S.Root, { gap: 3, overflowY: "auto", py: 4, flex: 1, children: l == null ? void 0 : l.toc.map((d, x) => g(d, x, 0)) });
   }
-), ut = p(
+), wn = f(
   ({
-    open: e,
-    setOpen: n,
-    onNavigate: r
-  }) => /* @__PURE__ */ t(
-    V,
+    open: n,
+    setOpen: t,
+    onNavigate: o
+  }) => /* @__PURE__ */ e(
+    N,
     {
       lazyMount: !0,
       placement: "center",
-      open: e,
-      onOpenChange: (l) => n(l.open),
+      open: n,
+      onOpenChange: (r) => t(r.open),
       size: { mdDown: "full", md: "lg" },
       scrollBehavior: "inside",
-      children: /* @__PURE__ */ a(W, { children: [
-        /* @__PURE__ */ t(U, { children: /* @__PURE__ */ t(Q, { children: "Table of Contents" }) }),
-        /* @__PURE__ */ t(Y, { overflowY: "auto", flex: 1, children: /* @__PURE__ */ t(ht, { onNavigate: r }) }),
-        /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(G, { asChild: !0, children: /* @__PURE__ */ t(_, { variant: "outline", children: "Cancel" }) }) }),
-        /* @__PURE__ */ t(j, {})
+      children: /* @__PURE__ */ c(L, { children: [
+        /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(V, { children: "Table of Contents" }) }),
+        /* @__PURE__ */ e(j, { overflowY: "auto", flex: 1, children: /* @__PURE__ */ e(Tn, { onNavigate: o }) }),
+        /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(E, { variant: "outline", children: "Cancel" }) }) }),
+        /* @__PURE__ */ e($, {})
       ] })
     }
   )
-), wt = ({
-  enableFloatingTime: e = !0,
-  enableFloatingProgress: n = !0,
-  onBackClick: r,
-  onMoreClick: l
+), jn = ({
+  enableFloatingTime: n = !0,
+  enableFloatingProgress: t = !0,
+  onItemClick: o
 }) => {
-  const [o, i] = T(!1), [c, d] = T(!1), [u, s] = T(!1), [g, h] = K();
-  return /* @__PURE__ */ a(F, { children: [
-    n && /* @__PURE__ */ t(
-      $,
+  const [r, l] = w(!1), [i, a] = w(!1), [h, u] = w(!1), [s, g] = w(!1), [d, x] = w(!1), [C, T] = ee(), v = M(() => {
+    l(!1), a(!1), u(!1), g(!1), x(!1), T(!1);
+  }, [T]), R = M(
+    (I) => {
+      I === "annotations" ? g(!0) : I === "search" ? u(!0) : I === "help" ? a(!0) : I === "toc" ? l(!0) : I === "bookmarks" && x(!0), o == null || o(I);
+    },
+    [o]
+  );
+  return /* @__PURE__ */ c(U, { children: [
+    t && /* @__PURE__ */ e(
+      q,
       {
-        present: !g,
+        present: !C,
         animationName: { _open: "fade-in", _closed: "fade-out" },
         animationDuration: "moderate",
-        children: /* @__PURE__ */ t(Ve, {})
+        children: /* @__PURE__ */ e(on, {})
       }
     ),
-    /* @__PURE__ */ t(
-      st,
+    /* @__PURE__ */ e(kn, { onItemClick: R }),
+    /* @__PURE__ */ e(Xe, {}),
+    /* @__PURE__ */ e(tn, { open: i, setOpen: a }),
+    /* @__PURE__ */ e(
+      wn,
       {
-        onBackClick: r,
-        onMoreClick: l,
-        onTableOfContentsClick: () => i(!0),
-        onHelpClick: () => d(!0),
-        onSearchClick: () => s(!0)
+        open: r,
+        setOpen: l,
+        onNavigate: v
       }
     ),
-    /* @__PURE__ */ t(je, { open: c, setOpen: d }),
-    /* @__PURE__ */ t(
-      ut,
+    /* @__PURE__ */ e(
+      Pn,
       {
-        open: o,
-        setOpen: i,
-        onNavigate: () => {
-          i(!1), h(!1);
-        }
+        open: h,
+        setOpen: u,
+        onNavigate: v
       }
     ),
-    /* @__PURE__ */ t(
-      dt,
+    /* @__PURE__ */ e(
+      We,
       {
-        open: u,
-        setOpen: s,
-        onNavigate: () => {
-          s(!1), h(!1);
-        }
+        open: s,
+        setOpen: g,
+        onNavigate: v
+      }
+    ),
+    /* @__PURE__ */ e(
+      Ze,
+      {
+        open: d,
+        setOpen: x,
+        onNavigate: v
       }
     ),
-    /* @__PURE__ */ t(
-      $,
+    /* @__PURE__ */ e(
+      q,
       {
-        present: e || g,
+        present: n || C,
         animationName: { _open: "fade-in", _closed: "fade-out" },
         animationDuration: "slow",
         overflow: "hidden",
-        children: /* @__PURE__ */ t(Ye, {})
+        children: /* @__PURE__ */ e(sn, {})
       }
     )
   ] });
 };
 export {
-  wt as ReactReader,
-  kt as ReactReaderProvider
+  jn as ReactReader,
+  Hn as ReactReaderProvider
 };
 //# sourceMappingURL=index.js.map