@prose-reader/react-reader 1.244.0 → 1.245.0

package/dist/index.js

@@ -2,21 +2,21 @@ import { jsx as e, jsxs as s, Fragment as ce } from "react/jsx-runtime";
 import * as y from "react";
 import He, { createContext as Ne, memo as m, useMemo as Pe, useEffect as ne, useContext as Ve, useState as R, useLayoutEffect as je, useCallback as X } from "react";
 import { signal as J, useConstant as re, useLiveRef as Ge, useSubscribe as D, useObserve as b, isDefined as Ae, useSignalValue as be, useSignalState as Ye } from "reactjrx";
-import { Subject as xe, tap as ve, map as B, filter as ie, switchMap as M, EMPTY as fe, of as ae, withLatestFrom as Ue, NEVER as de, startWith as qe, distinctUntilChanged as Ce, throttleTime as Qe, first as Oe, combineLatest as Ze, finalize as Ee, mergeMap as Ke, skip as ze, merge as Me, timer as De, BehaviorSubject as Xe } from "rxjs";
-import { IconButton as x, Portal as ke, Dialog as I, List as w, Link as Ie, Stack as C, Text as p, Tabs as z, Button as F, Presence as se, Box as O, createToaster as Je, Toaster as et, Toast as _, Spinner as tt, Heading as he, HStack as A, Kbd as Te, Popover as $, Progress as ee, chakra as nt, Collapsible as ge, Field as Z, RadioGroup as K, Slider as S, For as ot, Fieldset as pe, Input as rt } from "@chakra-ui/react";
+import { Subject as xe, tap as ve, map as B, filter as ie, switchMap as z, EMPTY as fe, of as ae, withLatestFrom as Ue, NEVER as de, startWith as qe, distinctUntilChanged as Ce, throttleTime as Qe, first as Oe, combineLatest as Ze, finalize as Ee, mergeMap as Ke, skip as Me, merge as ze, timer as De, BehaviorSubject as Xe } from "rxjs";
+import { IconButton as x, Portal as ke, Dialog as S, List as w, Link as Se, Stack as C, Text as p, Tabs as M, Button as F, Presence as se, Box as O, createToaster as Je, Toaster as et, Toast as _, Spinner as tt, Heading as he, HStack as A, Kbd as Te, Popover as $, Progress as ee, chakra as nt, Collapsible as ge, Field as Z, RadioGroup as K, Slider as I, For as ot, Fieldset as pe, Input as rt } from "@chakra-ui/react";
 import { LuX as it, LuNotebookPen as le, LuBookmark as at, LuArrowBigRight as st, LuArrowBigLeft as lt, LuChevronDown as ct, LuCircleHelp as dt, LuTableOfContents as ut, LuSearch as ht, LuGalleryHorizontal as gt, LuCircleCheck as we } from "react-icons/lu";
 import { createPortal as pt } from "react-dom";
 import { isPositionInArea as ft } from "@prose-reader/enhancer-gestures";
 import { isShallowEqual as mt, observeIntersection as bt, isHtmlTagElement as xt, watchKeys as vt } from "@prose-reader/core";
 import { BsBookmarks as Ct } from "react-icons/bs";
-import { MdOutlineFitScreen as kt, MdFullscreenExit as It, MdFullscreen as St } from "react-icons/md";
+import { MdOutlineFitScreen as kt, MdFullscreenExit as St, MdFullscreen as It } from "react-icons/md";
 import { RiGalleryView2 as Rt } from "react-icons/ri";
 import { RxDoubleArrowUp as yt, RxDoubleArrowLeft as Tt, RxDoubleArrowDown as wt, RxDoubleArrowRight as Pt } from "react-icons/rx";
 import { HiOutlineInformationCircle as At } from "react-icons/hi";
 import Ot from "rc-slider";
 import "rc-slider/assets/index.css";
-import { IoIosArrowBack as Et, IoMdMore as zt } from "react-icons/io";
-const Mt = "data-bookmark-area", Be = Ne({
+import { IoIosArrowBack as Et, IoMdMore as Mt } from "react-icons/io";
+const zt = "data-bookmark-area", Be = Ne({
   reader: void 0,
   quickMenuSignal: J({ default: !1 }),
   notificationsSubject: new xe(),
@@ -65,12 +65,12 @@ const Mt = "data-bookmark-area", Be = Ne({
     ...c
   } = n;
   return /* @__PURE__ */ s(ke, { disabled: !r, container: a, children: [
-    l && /* @__PURE__ */ e(I.Backdrop, {}),
-    /* @__PURE__ */ e(I.Positioner, { children: /* @__PURE__ */ e(I.Content, { ref: o, ...c, asChild: !1, children: i }) })
+    l && /* @__PURE__ */ e(S.Backdrop, {}),
+    /* @__PURE__ */ e(S.Positioner, { children: /* @__PURE__ */ e(S.Content, { ref: o, ...c, asChild: !1, children: i }) })
   ] });
 }), H = y.forwardRef(function(n, o) {
   return /* @__PURE__ */ e(
-    I.CloseTrigger,
+    S.CloseTrigger,
     {
       position: "absolute",
       top: "2",
@@ -80,12 +80,12 @@ const Mt = "data-bookmark-area", Be = Ne({
       children: /* @__PURE__ */ e(Dt, { size: "sm", ref: o, children: n.children })
     }
   );
-}), N = I.Root, V = I.Footer, j = I.Header, G = I.Body;
-I.Backdrop;
-const Y = I.Title;
-I.Description;
-I.Trigger;
-const U = I.ActionTrigger, E = () => Ve(Be), f = () => {
+}), N = S.Root, V = S.Footer, j = S.Header, G = S.Body;
+S.Backdrop;
+const Y = S.Title;
+S.Description;
+S.Trigger;
+const U = S.ActionTrigger, E = () => Ve(Be), f = () => {
   const { reader: t } = E();
   return t;
 }, Le = (t) => !!t && "__PROSE_READER_ENHANCER_SEARCH" in t, te = (t) => !!t && "__PROSE_READER_ENHANCER_ANNOTATIONS" in t, _e = (t) => !!t && "__PROSE_READER_ENHANCER_GALLERY" in t, $e = (t) => !!t && "__PROSE_READER_ENHANCER_REFIT" in t, Bt = (t) => {
@@ -94,7 +94,7 @@ const U = I.ActionTrigger, E = () => Ve(Be), f = () => {
     () => o?.annotations.annotations$.pipe(
       B((r) => r.find((a) => a.id === t)),
       ie(Ae),
-      M((r) => o.locateResource(r))
+      z((r) => o.locateResource(r))
     ),
     [o]
   ) };
@@ -105,7 +105,7 @@ const U = I.ActionTrigger, E = () => Ve(Be), f = () => {
 }) => {
   const i = f(), { data: r } = Bt(t), a = r?.meta.range?.toString() || r?.meta.node?.textContent;
   return /* @__PURE__ */ e(w.Item, { children: /* @__PURE__ */ s(
-    Ie,
+    Se,
     {
       href: "#",
       onClick: () => {
@@ -135,7 +135,7 @@ const U = I.ActionTrigger, E = () => Ve(Be), f = () => {
   const t = f(), n = te(t) ? t : void 0;
   return { data: b(
     () => n?.annotations.annotations$.pipe(
-      M(
+      z(
         (i) => n.locateResource(i)
       )
     ),
@@ -181,24 +181,24 @@ const U = I.ActionTrigger, E = () => Ve(Be), f = () => {
   }) => {
     const [o, i] = R(n ?? "bookmarks");
     return /* @__PURE__ */ s(
-      z.Root,
+      M.Root,
       {
         value: o,
         onValueChange: (r) => i(r.value),
         children: [
-          /* @__PURE__ */ s(z.List, { children: [
-            /* @__PURE__ */ s(z.Trigger, { value: "bookmarks", children: [
+          /* @__PURE__ */ s(M.List, { children: [
+            /* @__PURE__ */ s(M.Trigger, { value: "bookmarks", children: [
               /* @__PURE__ */ e(at, {}),
               "Bookmarks"
             ] }),
-            /* @__PURE__ */ s(z.Trigger, { value: "annotations", children: [
+            /* @__PURE__ */ s(M.Trigger, { value: "annotations", children: [
               /* @__PURE__ */ e(le, {}),
               "Annotations"
             ] }),
-            /* @__PURE__ */ e(z.Indicator, {})
+            /* @__PURE__ */ e(M.Indicator, {})
           ] }),
-          /* @__PURE__ */ e(z.Content, { value: "bookmarks", children: /* @__PURE__ */ e(Ft, { onNavigate: t }) }),
-          /* @__PURE__ */ e(z.Content, { value: "annotations", children: /* @__PURE__ */ e(_t, { onNavigate: t }) })
+          /* @__PURE__ */ e(M.Content, { value: "bookmarks", children: /* @__PURE__ */ e(Ft, { onNavigate: t }) }),
+          /* @__PURE__ */ e(M.Content, { value: "annotations", children: /* @__PURE__ */ e(_t, { onNavigate: t }) })
         ]
       }
     );
@@ -277,7 +277,7 @@ const U = I.ActionTrigger, E = () => Ve(Be), f = () => {
         children: /* @__PURE__ */ e(
           O,
           {
-            "data-bookmark-area": Mt,
+            "data-bookmark-area": zt,
             position: "absolute",
             left: n + i,
             transform: "translateX(-100%)",
@@ -410,14 +410,14 @@ const Xt = (t, n, o) => {
     ).pipe(B((c) => c.some((d) => d.isIntersecting)));
     return a.pipe(
       Qe(100, void 0, { trailing: !0 }),
-      M(() => l.pipe(
+      z(() => l.pipe(
         ve((c) => {
           c || (t.innerHTML = "");
         }),
         ie((c) => c),
         Oe()
       ).pipe(
-        M(() => (t.innerHTML = "", r?.gallery.snapshot(
+        z(() => (t.innerHTML = "", r?.gallery.snapshot(
           n,
           t,
           o
@@ -523,7 +523,7 @@ const Xt = (t, n, o) => {
       }
     );
   }
-), tn = "@prose-reader/react-reader", nn = "1.243.0", on = m(
+), tn = "@prose-reader/react-reader", nn = "1.244.0", on = m(
   ({ open: t, setOpen: n }) => /* @__PURE__ */ e(
     N,
     {
@@ -615,11 +615,11 @@ const Xt = (t, n, o) => {
     hour: "2-digit",
     minute: "2-digit"
   }) });
-}, Se = () => {
+}, Ie = () => {
   const { quickMenuSignal: t } = E();
   return [be(t), t.update, t];
 }, ln = () => {
-  const [t] = Se();
+  const [t] = Ie();
   return /* @__PURE__ */ e(
     O,
     {
@@ -650,7 +650,7 @@ const Xt = (t, n, o) => {
   D(
     () => t?.zoom.state$.pipe(
       vt(["isZooming", "currentScale"]),
-      M(({ isZooming: o, currentScale: i }) => {
+      z(({ isZooming: o, currentScale: i }) => {
         if (!o || i < 1) return fe;
         const r = new xe();
         return n.next({
@@ -673,7 +673,7 @@ const Xt = (t, n, o) => {
     () => t?.settings.values$.pipe(
       B(({ fontScale: o }) => o),
       Ce(),
-      ze(1),
+      Me(1),
       ve((o) => {
         n.next({
           key: "fontScaleChange",
@@ -695,10 +695,10 @@ const Xt = (t, n, o) => {
           description: n.description,
           duration: o
         }), r = t.pipe(
-          ze(1),
+          Me(1),
           ie((a) => !!n.key && a?.key === n.key)
         );
-        return Me(
+        return ze(
           De(o),
           n.abort ?? de,
           r
@@ -913,7 +913,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
     min: c,
     max: d
   };
-}, In = (t) => {
+}, Sn = (t) => {
   const n = f(), o = q(), { manifest: i } = b(() => n?.context, [n]) ?? {}, r = i?.readingDirection === "rtl", a = o?.isUsingSpread, { totalApproximatePages: l = 0, isBeginWithinChapter: c } = Re(), d = 1, u = c, { value: g, valueSignal: h, min: v, max: T } = kn(), P = X(
     (Q) => {
       const [k = 0] = Array.isArray(Q) ? Q : [Q];
@@ -948,12 +948,12 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
       ...t
     }
   );
-}, Sn = m(
+}, In = m(
   ({
     open: t,
     onItemClick: n
   }) => {
-    const o = f(), { refitMenuSignal: i } = E(), r = b(() => o?.navigation.state$, [o]), a = b(() => o?.settings.values$, [o]), l = b(() => o?.zoom.state$, [o]), c = a?.computedPageTurnDirection === "vertical", [d, u] = R(!0);
+    const o = f(), { refitMenuSignal: i } = E(), r = b(() => o?.navigation.state$, [o]), a = b(() => o?.settings.values$, [o]), l = b(() => o?.zoom.state$, [o]), c = a?.computedPageTurnMode === "scrollable", d = a?.computedPageTurnDirection === "vertical", [u, g] = R(!0);
     return /* @__PURE__ */ s(
       We,
       {
@@ -963,6 +963,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
         flexDirection: "column",
         overflow: "auto",
         pb: 8,
+        px: 0,
         children: [
           /* @__PURE__ */ s(
             A,
@@ -971,6 +972,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
               alignItems: "center",
               justifyContent: "center",
               maxWidth: "100%",
+              px: 4,
               children: [
                 /* @__PURE__ */ e(
                   x,
@@ -981,7 +983,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
                     flexShrink: 0,
                     onClick: () => o?.navigation.goToLeftOrTopSpineItem(),
                     disabled: !r?.canGoLeftSpineItem && !r?.canGoTopSpineItem,
-                    children: c ? /* @__PURE__ */ e(yt, {}) : /* @__PURE__ */ e(Tt, {})
+                    children: d ? /* @__PURE__ */ e(yt, {}) : /* @__PURE__ */ e(Tt, {})
                   }
                 ),
                 /* @__PURE__ */ s(
@@ -996,7 +998,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
                     children: [
                       /* @__PURE__ */ e(xn, {}),
                       /* @__PURE__ */ e(
-                        In,
+                        Sn,
                         {
                           style: {
                             width: "100%",
@@ -1019,7 +1021,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
                     onClick: () => {
                       o?.navigation.goToRightOrBottomSpineItem();
                     },
-                    children: c ? /* @__PURE__ */ e(wt, {}) : /* @__PURE__ */ e(Pt, {})
+                    children: d ? /* @__PURE__ */ e(wt, {}) : /* @__PURE__ */ e(Pt, {})
                   }
                 )
               ]
@@ -1028,11 +1030,12 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
           /* @__PURE__ */ e(A, { alignSelf: "stretch", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ s(
             ge.Root,
             {
-              open: d,
+              open: u,
               flex: 1,
-              onOpenChange: ({ open: g }) => {
-                u(g);
+              onOpenChange: ({ open: h }) => {
+                g(h);
               },
+              width: "100%",
               children: [
                 /* @__PURE__ */ e(
                   ge.Trigger,
@@ -1045,13 +1048,13 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
                       ct,
                       {
                         style: {
-                          transform: d ? "rotate(0deg)" : "rotate(180deg)"
+                          transform: u ? "rotate(0deg)" : "rotate(180deg)"
                         }
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ s(ge.Content, { display: "flex", justifyContent: "center", children: [
+                /* @__PURE__ */ e(ge.Content, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ s(O, { display: "flex", overflowX: "auto", px: 4, children: [
                   /* @__PURE__ */ e(
                     x,
                     {
@@ -1111,6 +1114,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
                       onClick: () => {
                         i.next(!0);
                       },
+                      disabled: !c,
                       children: /* @__PURE__ */ e(kt, {})
                     }
                   ),
@@ -1139,7 +1143,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
                       children: /* @__PURE__ */ e(Rt, {})
                     }
                   )
-                ] })
+                ] }) })
               ]
             }
           ) })
@@ -1210,7 +1214,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
                 flexShrink: 0,
                 variant: "ghost",
                 onClick: () => n("more"),
-                children: /* @__PURE__ */ e(zt, {})
+                children: /* @__PURE__ */ e(Mt, {})
               }
             ),
             /* @__PURE__ */ e(
@@ -1221,7 +1225,7 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
                 flexShrink: 0,
                 variant: "ghost",
                 onClick: a,
-                children: r ? /* @__PURE__ */ e(It, {}) : /* @__PURE__ */ e(St, {})
+                children: r ? /* @__PURE__ */ e(St, {}) : /* @__PURE__ */ e(It, {})
               }
             )
           ] })
@@ -1233,11 +1237,11 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
   ({
     onItemClick: t
   }) => {
-    const [n] = Se(), { refitMenuSignal: o } = E(), i = be(o);
+    const [n] = Ie(), { refitMenuSignal: o } = E(), i = be(o);
     return /* @__PURE__ */ s(ce, { children: [
       /* @__PURE__ */ e(yn, { open: n && !i, onItemClick: t }),
       /* @__PURE__ */ e(
-        Sn,
+        In,
         {
           open: n && !i,
           onItemClick: t
@@ -1270,14 +1274,14 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
 ), Pn = K.Root, An = y.forwardRef(
   function(n, o) {
     const { marks: i, label: r, showValue: a, ...l } = n, c = n.defaultValue ?? n.value, d = i?.map((g) => typeof g == "number" ? { value: g, label: void 0 } : g), u = !!d?.some((g) => g.label);
-    return /* @__PURE__ */ s(S.Root, { ref: o, thumbAlignment: "center", ...l, children: [
-      r && !a && /* @__PURE__ */ e(S.Label, { children: r }),
+    return /* @__PURE__ */ s(I.Root, { ref: o, thumbAlignment: "center", ...l, children: [
+      r && !a && /* @__PURE__ */ e(I.Label, { children: r }),
       r && a && /* @__PURE__ */ s(A, { justify: "space-between", children: [
-        /* @__PURE__ */ e(S.Label, { children: r }),
-        /* @__PURE__ */ e(S.ValueText, {})
+        /* @__PURE__ */ e(I.Label, { children: r }),
+        /* @__PURE__ */ e(I.ValueText, {})
       ] }),
-      /* @__PURE__ */ s(S.Control, { "data-has-mark-label": u || void 0, children: [
-        /* @__PURE__ */ e(S.Track, { children: /* @__PURE__ */ e(S.Range, {}) }),
+      /* @__PURE__ */ s(I.Control, { "data-has-mark-label": u || void 0, children: [
+        /* @__PURE__ */ e(I.Track, { children: /* @__PURE__ */ e(I.Range, {}) }),
         /* @__PURE__ */ e(On, { value: c }),
         /* @__PURE__ */ e(En, { marks: d })
       ] })
@@ -1286,20 +1290,20 @@ const mn = ee.Root, bn = ee.ValueText, Re = () => {
 );
 function On(t) {
   const { value: n } = t;
-  return /* @__PURE__ */ e(ot, { each: n, children: (o, i) => /* @__PURE__ */ e(S.Thumb, { index: i, children: /* @__PURE__ */ e(S.HiddenInput, {}) }, i) });
+  return /* @__PURE__ */ e(ot, { each: n, children: (o, i) => /* @__PURE__ */ e(I.Thumb, { index: i, children: /* @__PURE__ */ e(I.HiddenInput, {}) }, i) });
 }
 const En = y.forwardRef(
   function(n, o) {
     const { marks: i } = n;
-    return i?.length ? /* @__PURE__ */ e(S.MarkerGroup, { ref: o, children: i.map((r, a) => {
+    return i?.length ? /* @__PURE__ */ e(I.MarkerGroup, { ref: o, children: i.map((r, a) => {
       const l = typeof r == "number" ? r : r.value, c = typeof r == "number" ? void 0 : r.label;
-      return /* @__PURE__ */ s(S.Marker, { value: l, children: [
-        /* @__PURE__ */ e(S.MarkerIndicator, {}),
+      return /* @__PURE__ */ s(I.Marker, { value: l, children: [
+        /* @__PURE__ */ e(I.MarkerIndicator, {}),
         c
       ] }, a);
     }) }) : null;
   }
-), zn = m(() => {
+), Mn = m(() => {
   const { refitMenuSignal: n } = E(), o = be(n), i = f(), r = $e(i) ? i : void 0, a = b(
     () => r?.refit.settings$,
     [r]
@@ -1361,7 +1365,7 @@ const En = y.forwardRef(
       ] })
     }
   );
-}), Mn = m(
+}), zn = m(
   ({
     contextText: t = "",
     startOffset: n = 0,
@@ -1381,7 +1385,7 @@ const En = y.forwardRef(
       )
     );
     return /* @__PURE__ */ s(
-      Ie,
+      Se,
       {
         href: i,
         style: { margin: 5, overflow: "hidden" },
@@ -1408,14 +1412,14 @@ const En = y.forwardRef(
 ), Dn = 500, Bn = () => {
   const t = re(() => new Xe("")), n = b(t), o = f(), i = Le(o) ? o : void 0, r = b(() => t.pipe(
     Ce(),
-    M(
-      (a) => a === "" || !i ? ae(void 0) : Me(
+    z(
+      (a) => a === "" || !i ? ae(void 0) : ze(
         ae({
           type: "start",
           data: void 0
         }),
         De(Dn).pipe(
-          M(() => i.search.search(a)),
+          z(() => i.search.search(a)),
           B((l) => ({ type: "end", data: l }))
         )
       )
@@ -1472,7 +1476,7 @@ const En = y.forwardRef(
                 " result(s)"
               ] }),
               /* @__PURE__ */ e(C, { gap: 0, children: d?.map((u, g) => /* @__PURE__ */ e(
-                Mn,
+                zn,
                 {
                   contextText: u.meta?.range?.startContainer.parentElement?.textContent ?? "",
                   pageIndex: u.meta?.itemPageIndex,
@@ -1530,7 +1534,7 @@ const En = y.forwardRef(
             alignItems: "center"
           },
           children: /* @__PURE__ */ s(
-            Ie,
+            Se,
             {
               onClick: () => {
                 t(), n?.navigation.goToUrl(h.href);
@@ -1589,7 +1593,7 @@ const En = y.forwardRef(
   enableFloatingProgress: n = !0,
   onItemClick: o
 }) => {
-  const [i, r] = R(!1), [a, l] = R(!1), [c, d] = R(!1), [u, g] = R(void 0), [h, v] = R(!1), [T, P] = Se(), L = X(() => {
+  const [i, r] = R(!1), [a, l] = R(!1), [c, d] = R(!1), [u, g] = R(void 0), [h, v] = R(!1), [T, P] = Ie(), L = X(() => {
     r(!1), l(!1), d(!1), g(void 0), P(!1), v(!1);
   }, [P]), Q = X(
     (k) => {
@@ -1608,7 +1612,7 @@ const En = y.forwardRef(
       }
     ),
     /* @__PURE__ */ e(en, { open: h, setOpen: v }),
-    /* @__PURE__ */ e(zn, {}),
+    /* @__PURE__ */ e(Mn, {}),
     /* @__PURE__ */ e(Tn, { onItemClick: Q }),
     /* @__PURE__ */ e(Yt, {}),
     /* @__PURE__ */ e(on, { open: a, setOpen: l }),
@@ -1650,7 +1654,7 @@ const En = y.forwardRef(
   ] });
 };
 export {
-  Mt as BOOKMARK_AREA_DATA_ATTRIBUTE,
+  zt as BOOKMARK_AREA_DATA_ATTRIBUTE,
   ro as ReactReader,
   oo as ReactReaderProvider
 };