@prose-reader/react-reader 1.186.0 → 1.187.0

package/dist/index.js

@@ -1,122 +1,192 @@
-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 me } from "rxjs";
-import { Box as z, Text as m, Popover as I, Portal as Q, IconButton as p, Progress as O, Stack as y, HStack as x, Presence as L, chakra as fe, 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 { 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 "rc-slider/assets/index.css";
-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({
+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({
   reader: void 0,
-  quickMenuSignal: ce({ default: !1 })
-}), ft = b(
+  quickMenuSignal: me({ default: !1 })
+}), kt = p(
   ({
     children: e,
     reader: n,
     quickMenuOpen: r,
-    onQuickMenuOpenChange: i
+    onQuickMenuOpenChange: l
   }) => {
-    const [, o] = U({
+    const [, o] = re({
       default: r
-    }), l = ae(i), c = se(
+    }), i = fe(l), c = ge(
       () => ({
         quickMenuSignal: o,
         reader: n
       }),
       [o, n]
     );
-    return B(() => {
+    return M(() => {
       o.setValue(r);
-    }, [r, o]), Y(
-      () => o.subject.pipe(ue(l.current)),
-      [o, l]
-    ), /* @__PURE__ */ t(F.Provider, { value: c, children: e });
+    }, [r, o]), le(
+      () => o.subject.pipe(be(i.current)),
+      [o, i]
+    ), /* @__PURE__ */ t(N.Provider, { value: c, children: e });
   }
-), D = () => {
-  const { reader: e } = _(F);
+), _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) {
+  const {
+    children: l,
+    portalled: o = !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 }) })
+  ] });
+}), j = w.forwardRef(function(n, r) {
+  return /* @__PURE__ */ t(
+    f.CloseTrigger,
+    {
+      position: "absolute",
+      top: "2",
+      insetEnd: "2",
+      ...n,
+      asChild: !0,
+      children: /* @__PURE__ */ t(We, { size: "sm", ref: r, children: n.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(
+  ({
+    open: e,
+    setOpen: n
+  }) => /* @__PURE__ */ t(
+    V,
+    {
+      lazyMount: !0,
+      placement: "center",
+      open: e,
+      onOpenChange: (r) => n(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, {}) }),
+            " ",
+            /* @__PURE__ */ t(m, { children: "Navigate to right page" })
+          ] }),
+          /* @__PURE__ */ a(k, { mb: 1, children: [
+            /* @__PURE__ */ t(te, { children: /* @__PURE__ */ t(ke, {}) }),
+            " ",
+            /* @__PURE__ */ t(m, { children: "Navigate to left page" })
+          ] }),
+          /* @__PURE__ */ t(L, { mb: 2, mt: 4, as: "h3", size: "lg", children: "About" }),
+          /* @__PURE__ */ a(m, { children: [
+            _e,
+            " version: ",
+            Ne
+          ] })
+        ] }),
+        /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(G, { asChild: !0, children: /* @__PURE__ */ t(_, { variant: "outline", children: "Cancel" }) }) }),
+        /* @__PURE__ */ t(j, {})
+      ] })
+    }
+  )
+), O = () => {
+  const { reader: e } = oe(N);
   return e;
-}, P = () => {
-  const e = D();
-  return v(
-    () => e ? ge([e.pagination.state$, e.context.state$]).pipe(
-      me(([n, r]) => {
+}, 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 i = (o = r.manifest) == null ? void 0 : o.spineItems.every(
-          (l) => {
+        const l = (o = r.manifest) == null ? void 0 : o.spineItems.every(
+          (i) => {
             var c;
-            return (c = l.mediaType) == null ? void 0 : c.startsWith("image/");
+            return (c = i.mediaType) == null ? void 0 : c.startsWith("image/");
           }
         );
         return {
           ...n,
-          hasChapters: !r.isFullyPrePaginated && !i
+          hasChapters: !r.isFullyPrePaginated && !l
         };
       })
-    ) : he,
+    ) : xe,
     [e]
   );
-}, ze = () => {
-  const e = P(), n = Math.floor(
+}, 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(z, { position: "absolute", right: 0, bottom: 0, p: 2, color: "black", children: /* @__PURE__ */ a(m, { fontSize: "sm", children: [
+  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,
     " %"
   ] }) });
-}, Me = () => {
-  const [e, n] = R(/* @__PURE__ */ new Date());
-  return B(() => {
+}, qe = () => {
+  const [e, n] = T(/* @__PURE__ */ new Date());
+  return M(() => {
     const r = setInterval(() => {
       n(/* @__PURE__ */ new Date());
     }, 6e4);
     return () => clearInterval(r);
   }, []), e;
-}, Le = (e) => {
-  const n = Me();
+}, Ue = (e) => {
+  const n = qe();
   return /* @__PURE__ */ t(m, { fontSize: "xs", ...e, children: n.toLocaleTimeString(navigator.language, {
     hour: "2-digit",
     minute: "2-digit"
   }) });
-}, $ = () => {
-  const { quickMenuSignal: e } = _(F);
-  return [de(e), e.setValue, e];
-}, Ee = () => {
-  const [e] = $();
+}, K = () => {
+  const { quickMenuSignal: e } = oe(N);
+  return [pe(e), e.setValue, e];
+}, Ye = () => {
+  const [e] = K();
   return /* @__PURE__ */ t(
-    z,
+    R,
     {
       position: "absolute",
       left: 0,
       bottom: 0,
       p: 2,
       color: e ? void 0 : "colorPalette.contrast",
-      children: /* @__PURE__ */ t(Le, {})
+      children: /* @__PURE__ */ t(Ue, {})
     }
   );
-}, Fe = C.forwardRef(
+}, Qe = w.forwardRef(
   function(n, r) {
     const {
-      showArrow: i,
+      showArrow: l,
       children: o,
-      portalled: l = !0,
+      portalled: i = !0,
       content: c,
       portalRef: d,
       ...u
     } = n;
     return /* @__PURE__ */ a(
-      I.Root,
+      y.Root,
       {
         ...u,
         positioning: { ...u.positioning, gutter: 4 },
         children: [
-          /* @__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,
+          /* @__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,
             {
               width: "auto",
               px: "2",
@@ -125,7 +195,7 @@ const F = le({
               rounded: "sm",
               ref: r,
               children: [
-                i && /* @__PURE__ */ t(I.Arrow, { children: /* @__PURE__ */ t(I.ArrowTip, {}) }),
+                l && /* @__PURE__ */ t(y.Arrow, { children: /* @__PURE__ */ t(y.ArrowTip, {}) }),
                 c
               ]
             }
@@ -134,61 +204,61 @@ const F = le({
       }
     );
   }
-), $e = C.forwardRef(function(n, r) {
-  const { children: i, ...o } = n;
-  return /* @__PURE__ */ t(Fe, { content: i, ...o, ref: r, children: /* @__PURE__ */ t(
-    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,
     {
       variant: "ghost",
       "aria-label": "info",
       size: "2xs",
       colorPalette: "gray",
-      children: /* @__PURE__ */ t(Re, {})
+      children: /* @__PURE__ */ t(Me, {})
     }
   ) });
-}), He = C.forwardRef(function(n, r) {
-  return /* @__PURE__ */ t(O.Track, { ...n, ref: r, children: /* @__PURE__ */ t(O.Range, {}) });
+}), Ke = w.forwardRef(function(n, r) {
+  return /* @__PURE__ */ t(B.Track, { ...n, ref: r, children: /* @__PURE__ */ t(B.Range, {}) });
 });
-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 })
+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 })
   ] });
 });
-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] = [
+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,
-    l
-  ].sort((f, h) => f - 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;
+    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;
   return {
     hasOnlyOnePage: n,
     beginPageIndex: o,
-    endPageIndex: l,
+    endPageIndex: i,
     isBeginWithinChapter: r,
-    isEndWithinChapter: i,
+    isEndWithinChapter: l,
     beginAndEndAreDifferent: u,
     totalApproximatePages: s,
     leftPageIndex: c,
     rightPageIndex: d
   };
-}, Ne = () => {
-  const e = P(), {
+}, Ze = () => {
+  const e = D(), {
     hasOnlyOnePage: n,
     leftPageIndex: r,
-    rightPageIndex: i,
+    rightPageIndex: l,
     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}%` })
+    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}%` })
     ] }) }),
     /* @__PURE__ */ t(m, { truncate: !0, maxWidth: "100%", fontSize: "sm", mt: 1, children: u ? `Chapter: ${u}` : " " }),
-    !n && /* @__PURE__ */ a(x, { children: [
-      /* @__PURE__ */ t(m, { fontSize: "xs", children: l ? `${r + 1} - ${i + 1} of ${o}` : `${r + 1} of ${o}` }),
-      !!(e != null && e.hasChapters) && /* @__PURE__ */ a(E, { children: [
+    !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: [
           "(",
@@ -198,13 +268,13 @@ const We = O.Root, je = O.ValueText, H = () => {
       ] })
     ] })
   ] });
-}, K = b(
+}, de = p(
   ({
     children: e,
     position: n,
     ...r
   }) => /* @__PURE__ */ t(
-    L,
+    $,
     {
       display: "flex",
       flexDirection: "row",
@@ -228,8 +298,8 @@ const We = O.Root, je = O.ValueText, H = () => {
       children: e
     }
   )
-), Ve = fe(Oe), _e = b((e) => /* @__PURE__ */ t(
-  z,
+), et = Ie(Ee), tt = p((e) => /* @__PURE__ */ t(
+  R,
   {
     display: "contents",
     css: {
@@ -238,7 +308,7 @@ const We = O.Root, je = O.ValueText, H = () => {
       "--color-solid": "colors.colorPalette.solid"
     },
     children: /* @__PURE__ */ t(
-      Ve,
+      et,
       {
         keyboard: !1,
         style: {
@@ -282,87 +352,88 @@ const We = O.Root, je = O.ValueText, H = () => {
       }
     )
   }
-)), 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({
+)), 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(
     0,
-    n ? Math.floor((i - 1) / 2) : i - 1
+    n ? Math.floor((l - 1) / 2) : l - 1
   );
-  return B(() => {
+  return M(() => {
     c.setValue(o || 0);
   }, [o, c]), {
-    value: l,
+    value: i,
     valueSignal: c,
     min: d,
     max: u
   };
-}, 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: f, min: h, max: S } = qe(), A = q(
-    (T) => {
-      const [k = 0] = Array.isArray(T) ? T : [T];
-      f.setValue(k);
-      const W = o ? Math.floor(k) * 2 : Math.floor(k);
+}, 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: W,
+        pageIndex: A,
         spineItemId: e.pagination.getState().beginSpineItemIndex ?? 0,
         animation: !1
       }) : e == null || e.navigation.goToAbsolutePageIndex({
-        absolutePageIndex: W,
+        absolutePageIndex: A,
         animation: !1
       });
     },
-    [e, o, f, u]
+    [e, o, g, u]
   );
-  return Y(
+  return le(
     () => e == null ? void 0 : e.navigation.throttleLock({
       duration: 100,
-      trigger: f.subject
+      trigger: g.subject
     }),
-    [e, f]
-  ), l === 1 || o && l === 2 ? null : /* @__PURE__ */ t(
-    _e,
+    [e, g]
+  ), i === 1 || o && i === 2 ? null : /* @__PURE__ */ t(
+    tt,
     {
       value: [s],
       max: S,
       min: h,
-      reverse: i,
+      reverse: l,
       step: d,
-      onChange: A
+      onChange: P
     }
   );
-}, Ye = b(
+}, rt = p(
   ({
     open: e,
     onTableOfContentsClick: n,
-    onHelpClick: r
+    onHelpClick: r,
+    onSearchClick: l
   }) => {
-    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);
+    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(
-      K,
+      de,
       {
         present: e,
         position: "bottom",
         children: /* @__PURE__ */ a(
-          y,
+          v,
           {
             flex: 1,
             children: [
-              /* @__PURE__ */ a(x, { flex: 1, alignItems: "center", justifyContent: "center", children: [
+              /* @__PURE__ */ a(k, { flex: 1, alignItems: "center", justifyContent: "center", children: [
                 /* @__PURE__ */ t(
-                  p,
+                  b,
                   {
                     "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, {})
+                    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(
-                  y,
+                  v,
                   {
                     flex: 1,
                     maxW: 400,
@@ -371,82 +442,92 @@ const We = O.Root, je = O.ValueText, H = () => {
                     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(Ze, {}),
+                      /* @__PURE__ */ t(R, { height: 5, maxW: 300, width: "100%", overflow: "visible", children: /* @__PURE__ */ t(ot, {}) })
                     ]
                   }
                 ),
                 /* @__PURE__ */ t(
-                  p,
+                  b,
                   {
                     "aria-label": "right",
                     size: "lg",
                     flexShrink: 0,
                     variant: "ghost",
-                    disabled: !(o != null && o.canGoRightSpineItem) && !(o != null && o.canGoBottomSpineItem),
+                    disabled: !(i != null && i.canGoRightSpineItem) && !(i != null && i.canGoBottomSpineItem),
                     onClick: () => {
-                      i == null || i.navigation.goToRightOrBottomSpineItem();
+                      o == null || o.navigation.goToRightOrBottomSpineItem();
                     },
-                    children: c ? /* @__PURE__ */ t(ke, {}) : /* @__PURE__ */ t(we, {})
+                    children: d ? /* @__PURE__ */ t(ze, {}) : /* @__PURE__ */ t(Be, {})
                   }
                 )
               ] }),
               /* @__PURE__ */ t(
-                x,
+                k,
                 {
                   alignItems: "center",
                   justifyContent: "center",
                   children: /* @__PURE__ */ a(
-                    M.Root,
+                    E.Root,
                     {
-                      open: d,
+                      open: u,
                       flex: 1,
-                      onOpenChange: ({ open: s }) => {
-                        u(s);
+                      onOpenChange: ({ open: g }) => {
+                        s(g);
                       },
                       children: [
                         /* @__PURE__ */ t(
-                          M.Trigger,
+                          E.Trigger,
                           {
                             paddingY: "3",
                             width: "100%",
                             display: "flex",
                             justifyContent: "center",
                             children: /* @__PURE__ */ t(
-                              be,
+                              we,
                               {
                                 style: {
-                                  transform: d ? "rotate(0deg)" : "rotate(180deg)"
+                                  transform: u ? "rotate(0deg)" : "rotate(180deg)"
                                 }
                               }
                             )
                           }
                         ),
                         /* @__PURE__ */ a(
-                          M.Content,
+                          E.Content,
                           {
                             display: "flex",
                             justifyContent: "center",
                             gap: 2,
                             children: [
                               /* @__PURE__ */ t(
-                                p,
+                                b,
                                 {
                                   "aria-label": "Help",
                                   size: "lg",
                                   variant: "ghost",
                                   onClick: r,
-                                  children: /* @__PURE__ */ t(xe, {})
+                                  children: /* @__PURE__ */ t(ye, {})
                                 }
                               ),
                               /* @__PURE__ */ t(
-                                p,
+                                b,
                                 {
                                   "aria-label": "Table of contents",
                                   size: "lg",
                                   variant: "ghost",
                                   onClick: n,
-                                  children: /* @__PURE__ */ t(Ce, {})
+                                  children: /* @__PURE__ */ t(Re, {})
+                                }
+                              ),
+                              ce(o) && /* @__PURE__ */ t(
+                                b,
+                                {
+                                  "aria-label": "Search",
+                                  size: "lg",
+                                  variant: "ghost",
+                                  onClick: l,
+                                  children: /* @__PURE__ */ t(Oe, {})
                                 }
                               )
                             ]
@@ -463,31 +544,31 @@ const We = O.Root, je = O.ValueText, H = () => {
       }
     );
   }
-), Qe = () => {
-  const [e, n] = R(!1), r = q(() => document.fullscreenElement ? document.exitFullscreen().catch(console.error).then(() => {
+), lt = () => {
+  const [e, n] = T(!1), r = H(() => document.fullscreenElement ? document.exitFullscreen().catch(console.error).then(() => {
     n(!1);
   }) : document.documentElement.requestFullscreen({ navigationUI: "hide" }).catch(console.error).then(() => {
     n(!0);
   }), []);
-  return B(() => {
-    function i() {
+  return M(() => {
+    function l() {
       n(!!document.fullscreenElement);
     }
-    return document.addEventListener("fullscreenchange", i), () => {
-      document.removeEventListener("fullscreenchange", i);
+    return document.addEventListener("fullscreenchange", l), () => {
+      document.removeEventListener("fullscreenchange", l);
     };
   }, []), {
     isFullscreen: e,
     onToggleFullscreenClick: r
   };
-}, Ge = ({
+}, it = ({
   open: e,
   onBackClick: n,
   onMoreClick: r
 }) => {
-  const i = D(), o = v(() => i == null ? void 0 : i.context.manifest$, [i]), { isFullscreen: l, onToggleFullscreenClick: c } = Qe();
+  const l = O(), o = I(() => l == null ? void 0 : l.context.manifest$, [l]), { isFullscreen: i, onToggleFullscreenClick: c } = lt();
   return /* @__PURE__ */ a(
-    K,
+    de,
     {
       present: e,
       position: "top",
@@ -495,18 +576,18 @@ const We = O.Root, je = O.ValueText, H = () => {
       justifyContent: "space-between",
       children: [
         /* @__PURE__ */ t(
-          p,
+          b,
           {
             "aria-label": "left",
             size: "lg",
             variant: "ghost",
             flexShrink: 0,
             onClick: n,
-            children: /* @__PURE__ */ t(ye, {})
+            children: /* @__PURE__ */ t(Le, {})
           }
         ),
         /* @__PURE__ */ t(
-          y,
+          v,
           {
             flex: 1,
             maxW: 600,
@@ -517,161 +598,228 @@ const We = O.Root, je = O.ValueText, H = () => {
             children: /* @__PURE__ */ t(m, { truncate: !0, maxWidth: "100%", children: o == null ? void 0 : o.title })
           }
         ),
-        /* @__PURE__ */ a(x, { children: [
+        /* @__PURE__ */ a(k, { children: [
           /* @__PURE__ */ t(
-            p,
+            b,
             {
               "aria-label": "right",
               size: "lg",
               flexShrink: 0,
               variant: "ghost",
               onClick: r,
-              children: /* @__PURE__ */ t(De, {})
+              children: /* @__PURE__ */ t($e, {})
             }
           ),
           /* @__PURE__ */ t(
-            p,
+            b,
             {
               "aria-label": "right",
               size: "lg",
               flexShrink: 0,
               variant: "ghost",
               onClick: c,
-              children: l ? /* @__PURE__ */ t(Ae, {}) : /* @__PURE__ */ t(Be, {})
+              children: i ? /* @__PURE__ */ t(Fe, {}) : /* @__PURE__ */ t(He, {})
             }
           )
         ] })
       ]
     }
   );
-}, Ke = b(
+}, st = p(
   ({
     onBackClick: e,
     onMoreClick: n,
     onTableOfContentsClick: r,
-    onHelpClick: i
+    onHelpClick: l,
+    onSearchClick: o
   }) => {
-    const [o] = $();
-    return /* @__PURE__ */ a(E, { children: [
+    const [i] = K();
+    return /* @__PURE__ */ a(F, { children: [
       /* @__PURE__ */ t(
-        Ge,
+        it,
         {
-          open: o,
+          open: i,
           onBackClick: e,
           onMoreClick: n
         }
       ),
       /* @__PURE__ */ t(
-        Ye,
+        rt,
         {
-          open: o,
+          open: i,
           onTableOfContentsClick: r,
-          onHelpClick: i
+          onHelpClick: l,
+          onSearchClick: o
         }
       )
     ] });
   }
-), Xe = "@prose-reader/react-reader", Je = "1.185.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(
+), at = p(
+  ({
+    contextText: e = "",
+    startOffset: n = 0,
+    text: r,
+    cfi: l = "#",
+    onClick: o,
+    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),
+      Math.min(
+        n + r.length + 15,
+        e.length - 1
+      )
+    );
+    return /* @__PURE__ */ a(
+      ae,
+      {
+        href: l,
+        style: { margin: 5, overflow: "hidden" },
+        onClick: (s) => {
+          s.preventDefault(), o(l);
+        },
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: 0,
+        children: [
+          /* @__PURE__ */ a(m, { lineClamp: 1, as: "cite", style: { display: "block" }, children: [
+            '"',
+            d,
+            /* @__PURE__ */ t("b", { children: r }),
+            u,
+            '"'
+          ] }),
+          /* @__PURE__ */ t(m, { fontSize: "sm", color: "gray.500", style: { textDecoration: "none" }, children: `Book page: ${i !== void 0 ? i + 1 : "unknown (not loaded)"}` })
+        ]
+      }
+    );
+  }
+), ct = p(
+  ({
+    onNavigate: e
+  }) => {
+    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);
+      },
+      [l, e]
+    ), d = I(
+      () => o == null ? void 0 : o.search.search(n).pipe(
+        ie((h) => ({ type: "end", data: h })),
+        ve({ 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)),
+      [s]
+    );
+    return /* @__PURE__ */ a(v, { flex: 1, height: "100%", children: [
+      /* @__PURE__ */ t(R, { px: 4, children: /* @__PURE__ */ t(
+        Se,
+        {
+          placeholder: "Type something...",
+          value: n,
+          onChange: i,
+          borderRadius: 0
+        }
+      ) }),
+      /* @__PURE__ */ a(
+        R,
+        {
+          px: 4,
+          pb: 4,
+          mt: 2,
+          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: [
+                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,
+                  {
+                    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
+                  },
+                  S
+                );
+              }) })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+), dt = p(
   ({
     open: e,
-    setOpen: n
+    setOpen: n,
+    onNavigate: r
   }) => /* @__PURE__ */ t(
-    Z,
+    V,
     {
       lazyMount: !0,
       placement: "center",
       open: e,
-      onOpenChange: (r) => n(r.open),
+      onOpenChange: (l) => n(l.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(m, { children: "Navigate to right page" })
-          ] }),
-          /* @__PURE__ */ a(x, { mb: 1, children: [
-            /* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(Pe, {}) }),
-            " ",
-            /* @__PURE__ */ t(m, { children: "Navigate to left page" })
-          ] }),
-          /* @__PURE__ */ t(j, { mb: 2, mt: 4, as: "h3", size: "lg", children: "About" }),
-          /* @__PURE__ */ a(m, { children: [
-            Xe,
-            " version: ",
-            Je
-          ] })
-        ] }),
-        /* @__PURE__ */ t(ee, { children: /* @__PURE__ */ t(re, { asChild: !0, children: /* @__PURE__ */ t(G, { variant: "outline", children: "Cancel" }) }) }),
-        /* @__PURE__ */ t(J, {})
+      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, {})
       ] })
     }
   )
-), tt = b(
+), ht = p(
   ({
     onNavigate: e
   }) => {
-    const n = D(), { manifest: r, assumedRenditionLayout: i } = v(() => n == null ? void 0 : n.context.state$, [n]) ?? {}, { nav: o } = r ?? {}, l = P();
+    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 } = l ?? {}, u = (i === "reflowable" ? d : c) || 0;
-    console.log({ assumedRenditionLayout: i, currentSpineItemOrChapterPageIndex: u });
-    let s = l == null ? void 0 : l.beginChapterInfo;
+    const { beginSpineItemIndex: c, beginPageIndexInSpineItem: d } = i ?? {}, u = (l === "reflowable" ? d : c) || 0;
+    console.log({ assumedRenditionLayout: l, currentSpineItemOrChapterPageIndex: u });
+    let s = i == null ? void 0 : i.beginChapterInfo;
     for (; s != null && s.subChapter; )
       s = s == null ? void 0 : s.subChapter;
-    const f = (h, S, A) => /* @__PURE__ */ a(ie.Fragment, { children: [
+    const g = (h, S, P) => /* @__PURE__ */ a(he.Fragment, { children: [
       /* @__PURE__ */ t(
-        w.Item,
+        z.Item,
         {
-          pl: 4 * (A + 1),
+          pl: 4 * (P + 1),
           style: {
             display: "flex",
             alignItems: "center"
           },
           children: /* @__PURE__ */ a(
-            pe,
+            ae,
             {
               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: [
+                (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,
@@ -688,83 +836,96 @@ const re = g.ActionTrigger, et = b(
           )
         }
       ),
-      h.contents.length > 0 && /* @__PURE__ */ t(w.Root, { as: "div", gap: 2, children: h.contents.map(
-        (T, k) => f(T, k, A + 1)
+      h.contents.length > 0 && /* @__PURE__ */ t(z.Root, { as: "div", gap: 2, children: h.contents.map(
+        (x, C) => g(x, C, P + 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) => f(h, S, 0)) });
+    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)) });
   }
-), nt = b(
+), ut = p(
   ({
     open: e,
     setOpen: n,
     onNavigate: r
   }) => /* @__PURE__ */ t(
-    Z,
+    V,
     {
       lazyMount: !0,
       placement: "center",
       open: e,
-      onOpenChange: (i) => n(i.open),
+      onOpenChange: (l) => n(l.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, {})
+      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, {})
       ] })
     }
   )
-), pt = ({
+), wt = ({
   enableFloatingTime: e = !0,
   enableFloatingProgress: n = !0,
-  ...r
+  onBackClick: r,
+  onMoreClick: l
 }) => {
-  const [i, o] = R(!1), [l, c] = R(!1), [d, u] = $();
-  return /* @__PURE__ */ a(E, { children: [
+  const [o, i] = T(!1), [c, d] = T(!1), [u, s] = T(!1), [g, h] = K();
+  return /* @__PURE__ */ a(F, { children: [
     n && /* @__PURE__ */ t(
-      L,
+      $,
       {
-        present: !d,
+        present: !g,
         animationName: { _open: "fade-in", _closed: "fade-out" },
         animationDuration: "moderate",
-        children: /* @__PURE__ */ t(ze, {})
+        children: /* @__PURE__ */ t(Ve, {})
       }
     ),
     /* @__PURE__ */ t(
-      Ke,
+      st,
       {
-        ...r,
-        onTableOfContentsClick: () => o(!0),
-        onHelpClick: () => c(!0)
+        onBackClick: r,
+        onMoreClick: l,
+        onTableOfContentsClick: () => i(!0),
+        onHelpClick: () => d(!0),
+        onSearchClick: () => s(!0)
+      }
+    ),
+    /* @__PURE__ */ t(je, { open: c, setOpen: d }),
+    /* @__PURE__ */ t(
+      ut,
+      {
+        open: o,
+        setOpen: i,
+        onNavigate: () => {
+          i(!1), h(!1);
+        }
       }
     ),
-    /* @__PURE__ */ t(et, { open: l, setOpen: c }),
     /* @__PURE__ */ t(
-      nt,
+      dt,
       {
-        open: i,
-        setOpen: o,
+        open: u,
+        setOpen: s,
         onNavigate: () => {
-          o(!1), u(!1);
+          s(!1), h(!1);
         }
       }
     ),
     /* @__PURE__ */ t(
-      L,
+      $,
       {
-        present: e || d,
+        present: e || g,
         animationName: { _open: "fade-in", _closed: "fade-out" },
         animationDuration: "slow",
         overflow: "hidden",
-        children: /* @__PURE__ */ t(Ee, {})
+        children: /* @__PURE__ */ t(Ye, {})
       }
     )
   ] });
 };
 export {
-  pt as ReactReader,
-  ft as ReactReaderProvider
+  wt as ReactReader,
+  kt as ReactReaderProvider
 };
 //# sourceMappingURL=index.js.map