@nypl/web-reader 4.1.0 → 4.3.0

package/dist/esm/index.js

@@ -34516,8 +34516,8 @@ var FONT_DETAILS = {
   },
   "sans-serif": {
     heading: "Sans-serif font",
-    body: "Helvetica",
-    token: "sansSerif",
+    body: "Roboto",
+    token: "body",
     fontWeight: "regular"
   },
   "open-dyslexic": {
@@ -34866,18 +34866,6 @@ import React42 from "react";
 var Fonts = () => /* @__PURE__ */ React42.createElement(Global, {
   styles: `
       /* latin */
-      @font-face {
-        font-family: 'Helvetica';
-        src: url('Helvetica.eot');
-        src: local('Helvetica'),
-            url('Helvetica.eot?#iefix') format('embedded-opentype'),
-            url('Helvetica.woff2') format('woff2'),
-            url('Helvetica.woff') format('woff'),
-            url('Helvetica.ttf') format('truetype');
-        font-weight: normal;
-        font-style: normal;
-        font-display: swap;
-    }
       @font-face {
         font-family: 'OpenDyslexic';
         font-style: normal;
@@ -34887,29 +34875,6 @@ var Fonts = () => /* @__PURE__ */ React42.createElement(Global, {
           url('/fonts/opendyslexic/opendyslexic-regular-webfont.woff')
             format('woff');
       }
-      @font-face {
-        font-family: 'robotoregular';
-        src: url('Roboto-Regular-webfont.eot');
-        src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-             url('Roboto-Regular-webfont.woff2') format('woff2'),
-             url('Roboto-Regular-webfont.woff') format('woff'),
-             url('Roboto-Regular-webfont.ttf') format('truetype'),
-             url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
-        font-weight: normal;
-        font-style: normal;
-    }
-      @font-face {
-        font-family: 'robotolight';
-        src: url('Roboto-Light-webfont.eot');
-        src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
-             url('Roboto-Light-webfont.woff2') format('woff2'),
-             url('Roboto-Light-webfont.woff') format('woff'),
-             url('Roboto-Light-webfont.ttf') format('truetype'),
-             url('Roboto-Light-webfont.svg#robotolight') format('svg');
-        font-weight: normal;
-        font-style: normal;
-    
-    }
     `
 });
 var fonts_default = Fonts;
@@ -34984,7 +34949,6 @@ var typography3 = {
     body: "Roboto, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
     heading: "Roboto, -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
     serif: `'Georgia', serif`,
-    sansSerif: `'Helvetica', 'Arial', serif`,
     opendyslexic: `'OpenDyslexic', sans-serif`
   }
 };
@@ -35574,7 +35538,12 @@ var variantSolid6 = (getColor4) => (props) => {
   const bgColor = getColor4("ui.gray.light-warm", "ui.black", "ui.sepia");
   const bgColorActive = getColor4("ui.gray.active", "ui.gray.x-dark", "ui.sepiaChecked");
   const color3 = getColor4("gray.800", "ui.white", "gray.800");
-  const _focus = { bgColor: bgColorActive, color: color3 };
+  const _focus = {
+    bgColor: bgColorActive,
+    color: color3,
+    ring: "2px",
+    ringInset: "inset"
+  };
   const _hover = {
     bgColor: bgColorActive,
     color: color3,
@@ -35586,7 +35555,7 @@ var variantSolid6 = (getColor4) => (props) => {
   return {
     border: "none",
     borderColor: "gray.100",
-    height: "48px",
+    height: "45px",
     transition: "none",
     fontSize: 0,
     letterSpacing: 1,
@@ -35613,6 +35582,9 @@ var variantSettings = (getColor4) => (props) => {
     width: [8, 16, 36],
     fontSize: [0, 0, 2],
     whiteSpace: ["normal", "normal", "nowrap"],
+    p: {
+      textAlign: "center"
+    },
     _active: {
       bgColor
     },
@@ -35621,7 +35593,8 @@ var variantSettings = (getColor4) => (props) => {
       bgColor: checkedBgColor,
       borderBottomColor: checkedBgColor,
       p: {
-        textDecoration: "underline"
+        textDecoration: "underline",
+        textUnderlinePosition: "under"
       }
     },
     _hover: {
@@ -35652,7 +35625,23 @@ function getTheme3(colorMode = "day") {
 
 // src/ui/ToggleButton.tsx
 function ToggleButton(props) {
-  const _a = props, { children, colorMode, icon, iconFill, label, value } = _a, rest = __objRest(_a, ["children", "colorMode", "icon", "iconFill", "label", "value"]);
+  const _a = props, {
+    children,
+    colorMode,
+    icon,
+    iconFill,
+    label,
+    value,
+    isChecked
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "colorMode",
+    "icon",
+    "iconFill",
+    "label",
+    "value",
+    "isChecked"
+  ]);
   const { getInputProps, getCheckboxProps } = useRadio(props);
   const input = getInputProps();
   const checkbox = getCheckboxProps();
@@ -35679,7 +35668,7 @@ function ToggleButton(props) {
 }
 var FontToggleButton = (props) => {
   return /* @__PURE__ */ React43.createElement(ToggleButton, __spreadValues({
-    fontSize: [-1, -1, 0],
+    fontSize: [-2, -2, -1, -1, 0],
     py: 6
   }, props));
 };
@@ -35694,7 +35683,8 @@ var ColorModeToggleButton = (_a) => {
       _checked: {
         bgColor,
         p: {
-          textDecoration: "underline"
+          textDecoration: "underline",
+          textUnderlinePosition: "under"
         }
       }
     }
@@ -35907,28 +35897,31 @@ function HtmlSettings(props) {
   }), /* @__PURE__ */ React48.createElement(FontToggleButton, {
     value: "sans-serif",
     label: "Sans-Serif",
-    fontFamily: "sansSerif",
+    fontFamily: "body",
     fontWeight: "regular"
   }), /* @__PURE__ */ React48.createElement(FontToggleButton, {
     value: "open-dyslexic",
     label: "Dyslexia",
     fontFamily: "opendyslexic",
     fontWeight: "regular"
-  })), /* @__PURE__ */ React48.createElement(Stack, {
+  })), /* @__PURE__ */ React48.createElement(Box, {
     bgColor: checkedButtonBgColor,
-    px: 7,
-    py: 5
+    display: "flex",
+    flexDirection: "column",
+    px: [3, 3, 7],
+    py: [4, 4, 5]
   }, /* @__PURE__ */ React48.createElement(Heading, {
     as: "h3",
     color: buttonTextColor,
-    pb: "10px",
+    pb: [1.5, 1.5, 2.5],
     fontSize: 2,
     fontWeight: "light"
   }, FONT_DETAILS[fontFamily].heading), /* @__PURE__ */ React48.createElement(Text, {
     color: buttonTextColor,
     fontFamily: FONT_DETAILS[fontFamily].token,
     fontSize: -1,
-    fontWeight: FONT_DETAILS[fontFamily].fontWeight
+    fontWeight: FONT_DETAILS[fontFamily].fontWeight,
+    margin: 0
   }, FONT_DETAILS[fontFamily].body)), /* @__PURE__ */ React48.createElement(ToggleGroup_default, {
     value: colorMode,
     label: "reading theme options",
@@ -36038,31 +36031,35 @@ function SettingsCard(props) {
   const paginationValue = ((_b = (_a = props.state) == null ? void 0 : _a.settings) == null ? void 0 : _b.isScrolling) ? "scrolling" : "paginated";
   return /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(Popover, {
     gutter: 0,
+    closeOnBlur: true,
     placement: "bottom-start",
     isOpen,
-    onOpen: open,
     onClose: close,
+    onOpen: open,
     autoFocus: true,
     preventOverflow: true,
     strategy: "fixed"
   }, /* @__PURE__ */ React49.createElement(PopoverTrigger, null, /* @__PURE__ */ React49.createElement(Button_default, {
+    "aria-label": "Settings",
     onClick: open,
+    onMouseDown: (e) => e.preventDefault(),
     border: "none",
-    "aria-label": "Settings",
-    leftIcon: /* @__PURE__ */ React49.createElement(Icon, {
-      as: ReaderSettings_default,
-      w: 6,
-      h: 6,
-      fill: iconFill
-    })
-  }, /* @__PURE__ */ React49.createElement(Text, {
+    gap: [0, 0, 2]
+  }, /* @__PURE__ */ React49.createElement(Icon, {
+    as: ReaderSettings_default,
+    fill: iconFill,
+    w: 6,
+    h: 6
+  }), /* @__PURE__ */ React49.createElement(Text, {
     variant: "headerNav"
   }, "Settings"))), /* @__PURE__ */ React49.createElement(PopoverContent, {
     overflow: "hidden",
     bgColor: contentBgColor,
-    borderRadius: "0 0 4px 4px",
-    boxShadow: "0 4px 4px -2px #424242",
-    width: "inherit",
+    borderColor: "ui.gray.disabled",
+    borderRadius: "0 0 2px 2px",
+    filter: "drop-shadow(0 1px 2px #00000040)",
+    width: ["90vw", "90vw", "inherit"],
+    marginRight: [4, 4, 4, 0],
     maxWidth: "100vw"
   }, /* @__PURE__ */ React49.createElement(PopoverBody, {
     p: 0
@@ -36941,7 +36938,7 @@ function Header(props) {
     bg: mainBgColor
   }, headerLeft != null ? headerLeft : /* @__PURE__ */ React53.createElement(DefaultHeaderLeft, null), /* @__PURE__ */ React53.createElement(HStack, {
     ml: "auto",
-    spacing: 1
+    spacing: 0
   }, /* @__PURE__ */ React53.createElement(TableOfContent, {
     containerRef,
     navigator: navigator2,
@@ -36950,14 +36947,17 @@ function Header(props) {
     "aria-expanded": isFullscreen,
     "aria-label": "Toggle full screen",
     border: "none",
+    bgColor: mainBgColor,
+    gap: [0, 0, 2],
     onClick: toggleFullScreen2,
-    leftIcon: /* @__PURE__ */ React53.createElement(Icon, {
-      as: isFullscreen ? ToggleFullScreenExit_default : ToggleFullScreen_default,
-      fill: iconFill,
-      w: 6,
-      h: 6
-    })
-  }, /* @__PURE__ */ React53.createElement(Text, {
+    _active: { bgColor: mainBgColor },
+    _focus: { bgColor: mainBgColor, ring: "2px", ringInset: "inset" }
+  }, /* @__PURE__ */ React53.createElement(Icon, {
+    as: isFullscreen ? ToggleFullScreenExit_default : ToggleFullScreen_default,
+    fill: iconFill,
+    w: 6,
+    h: 6
+  }), /* @__PURE__ */ React53.createElement(Text, {
     variant: "headerNav"
   }, isFullscreen ? "Full screen exit" : "Full screen"))));
 }
@@ -36974,7 +36974,7 @@ var HeaderWrapper = React53.forwardRef((_a, ref) => {
     zIndex: "sticky",
     alignContent: "space-between",
     alignItems: "center",
-    px: 8,
+    px: [0, 0, 8],
     borderBottom: "1px solid",
     borderColor: "gray.100"
   }, rest), children);
@@ -40496,81 +40496,10 @@ function LoadingSkeleton({
   }));
 }
 
-// src/PdfReader/index.tsx
+// src/PdfReader/lib.ts
 var IFRAME_WRAPPER_ID = "iframe-wrapper";
 var SCALE_STEP = 0.1;
 var START_QUERY = "start";
-function pdfReducer(state2, action) {
-  switch (action.type) {
-    case "ARGS_CHANGED": {
-      return {
-        state: "ACTIVE",
-        settings: DEFAULT_SETTINGS,
-        resourceIndex: 0,
-        resource: null,
-        pageNumber: 1,
-        numPages: null,
-        scale: 1,
-        pdfWidth: 0,
-        pdfHeight: 0,
-        pageHeight: void 0,
-        pageWidth: void 0,
-        atStart: true,
-        atEnd: false
-      };
-    }
-    case "SET_CURRENT_RESOURCE":
-      return __spreadProps(__spreadValues({}, state2), {
-        resource: null,
-        resourceIndex: action.index,
-        pageNumber: action.shouldNavigateToEnd ? -1 : 1,
-        numPages: null
-      });
-    case "RESOURCE_FETCH_SUCCESS":
-      return __spreadProps(__spreadValues({}, state2), {
-        resource: action.resource
-      });
-    case "PDF_PARSED":
-      return __spreadProps(__spreadValues({}, state2), {
-        numPages: action.numPages,
-        pageNumber: state2.pageNumber === -1 ? action.numPages : state2.pageNumber
-      });
-    case "NAVIGATE_PAGE":
-      return __spreadProps(__spreadValues({}, state2), {
-        pageNumber: action.pageNum
-      });
-    case "SET_SCROLL":
-      if (state2.state !== "ACTIVE") {
-        return handleInvalidTransition(state2, action);
-      }
-      return __spreadProps(__spreadValues({}, state2), {
-        settings: __spreadProps(__spreadValues({}, state2.settings), {
-          isScrolling: action.isScrolling
-        })
-      });
-    case "SET_SCALE":
-      return __spreadProps(__spreadValues({}, state2), {
-        scale: action.scale
-      });
-    case "PAGE_LOAD_SUCCESS":
-      return __spreadProps(__spreadValues({}, state2), {
-        pdfWidth: action.width,
-        pdfHeight: action.height,
-        pageWidth: action.width,
-        pageHeight: action.height
-      });
-    case "RESIZE_PAGE":
-      return __spreadProps(__spreadValues({}, state2), {
-        pageWidth: action.width,
-        pageHeight: action.height
-      });
-    case "BOOK_BOUNDARY_CHANGED":
-      return __spreadProps(__spreadValues({}, state2), {
-        atStart: action.atStart,
-        atEnd: action.atEnd
-      });
-  }
-}
 var getResourceUrl = (index, readingOrder) => {
   if (!readingOrder || !readingOrder.length) {
     throw new Error("A manifest has been returned, but has no reading order");
@@ -40581,19 +40510,197 @@ var loadResource = (resourceUrl, proxyUrl) => __async(void 0, null, function* ()
   const url = proxyUrl ? `${proxyUrl}${encodeURIComponent(resourceUrl)}` : resourceUrl;
   const response = yield fetch(url, { mode: "cors" });
   const array = new Uint8Array(yield response.arrayBuffer());
-  console.log("proxied", url, response);
   if (!response.ok) {
     throw new Error("Response not Ok for URL: " + url);
   }
   return array;
 });
-var getStartPage = (resourceUrl) => {
-  const params = new URL(resourceUrl).searchParams;
+function getIndexFromHref(href, manifest) {
+  var _a;
+  const input = new URL(href);
+  const index = (_a = manifest == null ? void 0 : manifest.readingOrder) == null ? void 0 : _a.findIndex((link2) => {
+    return doHrefsMatch(link2.href, input);
+  });
+  if (index < 0) {
+    throw new Error(`Cannot find resource in readingOrder: ${href}`);
+  }
+  return index;
+}
+function doHrefsMatch(href1, href2) {
+  const input1 = new URL(href1);
+  const input2 = new URL(href2);
+  return input1.pathname === input2.pathname && input1.hostname === input2.hostname && input1.protocol === input2.protocol;
+}
+var getStartPageFromHref = (href) => {
+  const params = new URL(href).searchParams;
   const startPage = params.get(START_QUERY);
-  return startPage ? parseInt(startPage) : 1;
+  return startPage ? parseInt(startPage) : void 0;
+};
+var getPageNumberFromHref = (href) => {
+  const hash4 = new URL(href).hash;
+  try {
+    const strPageNumber = hash4.replace("#page=", "");
+    if (!strPageNumber || strPageNumber === "NaN")
+      return void 0;
+    const pageNumber = parseInt(strPageNumber);
+    return pageNumber;
+  } catch (e) {
+    console.warn(`Failed to parse page number from hash ${hash4}`);
+    return void 0;
+  }
 };
+
+// src/PdfReader/reducer.ts
+function makePdfReducer(args) {
+  if (!args)
+    return (state2, _action) => state2;
+  const { manifest } = args;
+  return function reducer(state2, action) {
+    var _a, _b, _c;
+    if (state2.state !== "ACTIVE" && action.type !== "ARGS_CHANGED") {
+      return handleInvalidTransition(state2, action);
+    }
+    function goToLocation(index, page = 1) {
+      const shouldResetResource = state2.resourceIndex !== index;
+      const href = manifest.readingOrder[index].href;
+      const startPage = getStartPageFromHref(href);
+      const isNavigatingToEnd = page === -1;
+      const requestedPageIsBeforeStartPage = startPage && page < startPage;
+      const pageNumberToNavigateTo = !isNavigatingToEnd && requestedPageIsBeforeStartPage ? startPage : page;
+      const newState = __spreadProps(__spreadValues({}, state2), {
+        resourceIndex: index,
+        pageNumber: pageNumberToNavigateTo
+      });
+      if (shouldResetResource) {
+        return __spreadProps(__spreadValues({}, newState), {
+          resource: null,
+          numPages: null,
+          rendered: false,
+          pageHeight: void 0,
+          pageWidth: void 0,
+          pdfHeight: 0,
+          pdfWidth: 0
+        });
+      }
+      return newState;
+    }
+    switch (action.type) {
+      case "ARGS_CHANGED": {
+        return {
+          state: "ACTIVE",
+          settings: DEFAULT_SETTINGS,
+          resourceIndex: 0,
+          resource: null,
+          pageNumber: 1,
+          numPages: null,
+          scale: 1,
+          pdfWidth: 0,
+          pdfHeight: 0,
+          pageHeight: void 0,
+          pageWidth: void 0,
+          atStart: true,
+          atEnd: false,
+          rendered: false
+        };
+      }
+      case "GO_FORWARD": {
+        if ((_a = state2.settings) == null ? void 0 : _a.isScrolling) {
+          const atEndOfBook2 = state2.resourceIndex === args.manifest.readingOrder.length - 1;
+          if (atEndOfBook2)
+            return state2;
+          return goToLocation(state2.resourceIndex + 1);
+        }
+        if (!state2.numPages)
+          return state2;
+        const atEndOfResource = state2.pageNumber === state2.numPages;
+        const atEndOfBook = state2.resourceIndex === args.manifest.readingOrder.length - 1;
+        if (atEndOfResource) {
+          if (atEndOfBook)
+            return state2;
+          return goToLocation(state2.resourceIndex + 1);
+        }
+        return goToLocation(state2.resourceIndex, state2.pageNumber + 1);
+      }
+      case "GO_BACKWARD": {
+        if ((_b = state2.settings) == null ? void 0 : _b.isScrolling) {
+          const atStartOfBook2 = state2.resourceIndex === 0;
+          if (atStartOfBook2)
+            return state2;
+          return goToLocation(state2.resourceIndex - 1);
+        }
+        if (!state2.numPages)
+          return state2;
+        const atStartOfResource = isStartOfResource(state2.pageNumber, args.manifest.readingOrder[state2.resourceIndex].href);
+        const atStartOfBook = state2.resourceIndex === 0;
+        if (atStartOfResource) {
+          if (atStartOfBook)
+            return state2;
+          return __spreadValues({}, goToLocation(state2.resourceIndex - 1, -1));
+        }
+        return goToLocation(state2.resourceIndex, state2.pageNumber - 1);
+      }
+      case "GO_TO_HREF": {
+        const resourceIndex = getIndexFromHref(action.href, args.manifest);
+        const startPage = getStartPageFromHref(action.href);
+        const pageNumber = getPageNumberFromHref(action.href);
+        const page = (_c = pageNumber != null ? pageNumber : startPage) != null ? _c : 1;
+        return goToLocation(resourceIndex, page);
+      }
+      case "RESOURCE_FETCH_SUCCESS":
+        return __spreadProps(__spreadValues({}, state2), {
+          resource: action.resource
+        });
+      case "PDF_PARSED":
+        return __spreadProps(__spreadValues({}, state2), {
+          numPages: action.numPages,
+          pageNumber: state2.pageNumber === -1 ? action.numPages : state2.pageNumber
+        });
+      case "SET_SCROLL":
+        if (state2.state !== "ACTIVE") {
+          return handleInvalidTransition(state2, action);
+        }
+        return __spreadProps(__spreadValues({}, state2), {
+          settings: __spreadProps(__spreadValues({}, state2.settings), {
+            isScrolling: action.isScrolling
+          })
+        });
+      case "SET_SCALE":
+        return __spreadProps(__spreadValues({}, state2), {
+          scale: action.scale
+        });
+      case "PAGE_LOAD_SUCCESS":
+        return __spreadProps(__spreadValues({}, state2), {
+          rendered: true,
+          pdfWidth: action.width,
+          pdfHeight: action.height,
+          pageWidth: action.width,
+          pageHeight: action.height
+        });
+      case "RESIZE_PAGE":
+        return __spreadProps(__spreadValues({}, state2), {
+          pageWidth: action.width,
+          pageHeight: action.height
+        });
+      case "BOOK_BOUNDARY_CHANGED":
+        return __spreadProps(__spreadValues({}, state2), {
+          atStart: action.atStart,
+          atEnd: action.atEnd
+        });
+    }
+  };
+}
+function handleInvalidTransition(state2, action) {
+  console.trace(`Inavlid state transition attempted: ${state2} with ${action.type}`);
+  return state2;
+}
+function isStartOfResource(pageNumber, resourceHref) {
+  const startPage = getStartPageFromHref(resourceHref);
+  return pageNumber === (startPage != null ? startPage : 1);
+}
+
+// src/PdfReader/index.tsx
 function usePdfReader(args) {
-  var _a;
+  var _a, _b, _c, _d;
   if (args == null ? void 0 : args.pdfWorkerSrc) {
     pdfjs4.GlobalWorkerOptions.workerSrc = args.pdfWorkerSrc;
   }
@@ -40607,7 +40714,7 @@ function usePdfReader(args) {
     height = DEFAULT_HEIGHT,
     growWhenScrolling = DEFAULT_SHOULD_GROW_WHEN_SCROLLING
   } = args != null ? args : {};
-  const [state2, dispatch] = React71.useReducer(pdfReducer, {
+  const [state2, dispatch] = React71.useReducer(makePdfReducer(args), {
     state: "INACTIVE",
     resourceIndex: 0,
     resource: null,
@@ -40620,11 +40727,11 @@ function usePdfReader(args) {
     pageWidth: void 0,
     atStart: true,
     atEnd: false,
-    settings: void 0
+    settings: void 0,
+    rendered: false
   });
   const isFetching = !state2.resource;
   const isParsed = typeof state2.numPages === "number";
-  const isSinglePDF = manifest && (manifest == null ? void 0 : manifest.readingOrder.length) === 1;
   const [containerRef, containerSize] = useMeasure();
   React71.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
@@ -40677,96 +40784,43 @@ function usePdfReader(args) {
     resizePage(state2.pdfWidth, state2.pdfHeight, containerSize);
   }, [containerSize, state2.pdfWidth, state2.pdfHeight, resizePage]);
   React71.useEffect(() => {
-    var _a2;
-    if (!manifest || state2.state !== "ACTIVE")
-      return;
-    if (isSinglePDF && state2.settings.isScrolling) {
-      dispatch({
-        type: "BOOK_BOUNDARY_CHANGED",
-        atStart: true,
-        atEnd: true
-      });
-    } else {
-      const isFirstResource = state2.resourceIndex === 0;
-      const isResourceStart = isFirstResource && state2.pageNumber === 1;
-      const isLastResource = state2.resourceIndex === ((_a2 = manifest == null ? void 0 : manifest.readingOrder) == null ? void 0 : _a2.length) - 1;
-      const isResourceEnd = isLastResource && state2.pageNumber === state2.numPages || state2.settings.isScrolling && isLastResource;
-      dispatch({
-        type: "BOOK_BOUNDARY_CHANGED",
-        atStart: isResourceStart,
-        atEnd: isResourceEnd
-      });
-    }
+    var _a2, _b2, _c2;
+    const isScrolling = (_a2 = state2.settings) == null ? void 0 : _a2.isScrolling;
+    const isFirstResource = state2.resourceIndex === 0;
+    const isFirstResourceStart = isFirstResource && state2.pageNumber === 1;
+    const showPrevButton = isScrolling ? !isFirstResource : !isFirstResourceStart;
+    const isLastResource = state2.resourceIndex === ((_c2 = (_b2 = manifest == null ? void 0 : manifest.readingOrder) == null ? void 0 : _b2.length) != null ? _c2 : 1) - 1;
+    const isLastResourceEnd = isLastResource && state2.pageNumber === state2.numPages;
+    const showNextButton = isScrolling ? !isLastResource : !isLastResourceEnd;
+    dispatch({
+      type: "BOOK_BOUNDARY_CHANGED",
+      atStart: !showPrevButton,
+      atEnd: !showNextButton
+    });
   }, [
-    manifest,
-    state2.state,
-    state2.settings,
-    state2.numPages,
+    (_a = manifest == null ? void 0 : manifest.readingOrder) == null ? void 0 : _a.length,
     state2.pageNumber,
     state2.resourceIndex,
-    isSinglePDF
+    (_b = state2.settings) == null ? void 0 : _b.isScrolling,
+    state2.numPages
   ]);
-  const goForward = React71.useCallback(() => __async(this, null, function* () {
+  React71.useEffect(() => {
     var _a2;
-    if (!state2.numPages)
+    if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling))
       return;
-    if (state2.state !== "ACTIVE")
+    if (!state2.rendered)
       return;
-    if (state2.pageNumber < state2.numPages && !state2.settings.isScrolling) {
-      dispatch({
-        type: "NAVIGATE_PAGE",
-        pageNum: state2.pageNumber + 1
-      });
-    } else if (manifest && manifest.readingOrder && state2.resourceIndex < ((_a2 = manifest == null ? void 0 : manifest.readingOrder) == null ? void 0 : _a2.length) - 1) {
-      const nextIndex = state2.resourceIndex + 1;
-      dispatch({
-        type: "SET_CURRENT_RESOURCE",
-        index: nextIndex,
-        shouldNavigateToEnd: false
-      });
-      if (manifest == null ? void 0 : manifest.readingOrder[nextIndex]) {
-        const pageNum = getStartPage(manifest == null ? void 0 : manifest.readingOrder[nextIndex].href);
-        dispatch({
-          type: "NAVIGATE_PAGE",
-          pageNum
-        });
-      }
-    }
-  }), [
-    state2.state,
-    manifest,
-    state2.settings,
-    state2.numPages,
-    state2.pageNumber,
-    state2.resourceIndex
-  ]);
+    process.nextTick(() => {
+      const page = document.querySelector(`[data-page-number="${state2.pageNumber}"]`);
+      page == null ? void 0 : page.scrollIntoView();
+    });
+  }, [state2.pageNumber, (_c = state2.settings) == null ? void 0 : _c.isScrolling, state2.rendered]);
+  const goForward = React71.useCallback(() => __async(this, null, function* () {
+    dispatch({ type: "GO_FORWARD" });
+  }), []);
   const goBackward = React71.useCallback(() => __async(this, null, function* () {
-    if (!isParsed)
-      return;
-    if (state2.state !== "ACTIVE")
-      return;
-    const startPage = (manifest == null ? void 0 : manifest.readingOrder) && (manifest == null ? void 0 : manifest.readingOrder[state2.resourceIndex]) ? getStartPage(manifest == null ? void 0 : manifest.readingOrder[state2.resourceIndex].href) : 1;
-    if (state2.pageNumber > startPage && !state2.settings.isScrolling) {
-      dispatch({
-        type: "NAVIGATE_PAGE",
-        pageNum: state2.pageNumber - 1
-      });
-    } else if ((manifest == null ? void 0 : manifest.readingOrder) && state2.resourceIndex > 0) {
-      const nextIndex = state2.resourceIndex - 1;
-      dispatch({
-        type: "SET_CURRENT_RESOURCE",
-        index: nextIndex,
-        shouldNavigateToEnd: !state2.settings.isScrolling
-      });
-    }
-  }), [
-    manifest,
-    isParsed,
-    state2.state,
-    state2.settings,
-    state2.pageNumber,
-    state2.resourceIndex
-  ]);
+    dispatch({ type: "GO_BACKWARD" });
+  }), []);
   const setScroll = React71.useCallback((val) => __async(this, null, function* () {
     const isScrolling = val === "scrolling";
     dispatch({ type: "SET_SCROLL", isScrolling });
@@ -40784,30 +40838,8 @@ function usePdfReader(args) {
     });
   }), [state2.scale]);
   const goToPage = React71.useCallback((href) => __async(this, null, function* () {
-    const getIndexFromHref = (href2) => {
-      var _a2;
-      const index = (_a2 = manifest == null ? void 0 : manifest.readingOrder) == null ? void 0 : _a2.findIndex((link2) => {
-        return link2.href === href2;
-      });
-      if (index < 0) {
-        throw new Error("Cannot find resource in readingOrder");
-      }
-      return index;
-    };
-    const resourceIndex = getIndexFromHref(href);
-    dispatch({
-      type: "SET_CURRENT_RESOURCE",
-      index: resourceIndex,
-      shouldNavigateToEnd: false
-    });
-    if ((manifest == null ? void 0 : manifest.readingOrder) && (manifest == null ? void 0 : manifest.readingOrder[resourceIndex])) {
-      const startPage = getStartPage(manifest == null ? void 0 : manifest.readingOrder[resourceIndex].href);
-      dispatch({
-        type: "NAVIGATE_PAGE",
-        pageNum: startPage
-      });
-    }
-  }), [manifest == null ? void 0 : manifest.readingOrder]);
+    dispatch({ type: "GO_TO_HREF", href });
+  }), []);
   if (!webpubManifestUrl || !manifest)
     return null;
   if (state2.state === "INACTIVE" || isFetching) {
@@ -40841,7 +40873,7 @@ function usePdfReader(args) {
       resizePage(page.width, page.height, containerSize);
     }
   }
-  const shouldGrow = ((_a = state2.settings) == null ? void 0 : _a.isScrolling) && growWhenScrolling;
+  const shouldGrow = ((_d = state2.settings) == null ? void 0 : _d.isScrolling) && growWhenScrolling;
   const finalHeight = shouldGrow ? "initial" : height;
   return {
     type: "PDF",
@@ -40893,10 +40925,6 @@ function usePdfReader(args) {
     }
   };
 }
-function handleInvalidTransition(state2, action) {
-  console.trace(`Inavlid state transition attempted: ${state2} with ${action.type}`);
-  return state2;
-}
 
 // src/HtmlReader/index.tsx
 import React79 from "react";
@@ -41935,9 +41963,9 @@ function useHtmlReader(args) {
   const numResources = manifest.readingOrder.length;
   const isFirstResource = resourceIndex === 0;
   const isLastResource = resourceIndex === numResources - 1;
-  const isStartOfResource = state2.location.locations.position === 1;
+  const isStartOfResource2 = state2.location.locations.position === 1;
   const isEndOfResource = state2.location.locations.remainingPositions === 0;
-  const atStart = isFirstResource && isStartOfResource;
+  const atStart = isFirstResource && isStartOfResource2;
   const atEnd = isLastResource && isEndOfResource;
   return {
     type: "HTML",
@@ -42046,6 +42074,44 @@ function useWebReader(args) {
   throw new Error(`No reader was initialized for the webpub with url: ${webpubManifestUrl} and type: ${readerType}.`);
 }
 
+// src/PdfReader/addTocToManifest.tsx
+function addTocToManifest(manifest, getResource, pdfWorkerSrc) {
+  return __async(this, null, function* () {
+    const pdfUrl = manifest.readingOrder[0].href;
+    const pdfData = yield getResource(pdfUrl);
+    try {
+      pdfjs4.GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
+      const pdf = yield pdfjs4.getDocument(pdfData).promise;
+      const outline5 = yield pdf.getOutline();
+      const tocPromises = outline5.map((chapter) => __async(this, null, function* () {
+        const dest = chapter.dest;
+        if (dest && dest.length > 0) {
+          const ref = dest[0];
+          const pageIndex = yield pdf.getPageIndex(ref);
+          if (typeof pageIndex !== "number")
+            return void 0;
+          if (pageIndex) {
+            const link2 = {
+              title: chapter.title,
+              href: `${pdfUrl}#page=${pageIndex + 1}`,
+              children: []
+            };
+            return link2;
+          }
+        }
+        return void 0;
+      }));
+      const toc = (yield Promise.all(tocPromises)).filter((item) => !!item);
+      if (toc.length > 0) {
+        manifest.toc = toc;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return manifest;
+  });
+}
+
 // src/index.tsx
 var WebReaderWithoutBoundary = (_a) => {
   var _b = _a, {
@@ -42086,6 +42152,7 @@ export {
   LOCAL_STORAGE_SETTINGS_KEY,
   ReadiumWebpubContext,
   WebReaderWithoutBoundary,
+  addTocToManifest,
   clearWebReaderLocalStorage,
   src_default as default,
   getTheme3 as getTheme,