@nypl/web-reader 1.1.1 → 1.2.2

package/dist/esm/index.js

@@ -13681,7 +13681,7 @@ var require_entry = __commonJS({
 });
 
 // src/index.tsx
-import React101 from "react";
+import React102 from "react";
 
 // node_modules/@emotion/react/dist/emotion-react.browser.esm.js
 import { createElement as createElement2, useContext as useContext2, useRef, useLayoutEffect } from "react";
@@ -21262,8 +21262,8 @@ var pseudoSelectors = {
   _ltr: "[dir=ltr] &, &[dir=ltr]",
   _mediaDark: "@media (prefers-color-scheme: dark)",
   _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
-  _dark: ".chakra-ui-dark &, [data-theme=dark] &, &[data-theme=dark]",
-  _light: ".chakra-ui-light &, [data-theme=light] &, &[data-theme=light]"
+  _dark: ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]",
+  _light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]"
 };
 var pseudoPropNames = objectKeys(pseudoSelectors);
 var systemProps = (0, import_lodash.default)({}, background, border, color, flexbox, layout, filter2, ring2, interactivity, grid, others, position2, effect, space, scroll, typography2, textDecoration, transform8, list, transition);
@@ -39302,7 +39302,9 @@ function PdfSettings(props) {
 import * as React66 from "react";
 function HtmlSettings(props) {
   const { navigator: navigator2, readerState, paginationValue } = props;
-  const { fontFamily, colorMode } = readerState;
+  if (!readerState.settings)
+    return null;
+  const { fontFamily, colorMode } = readerState.settings;
   const {
     setFontFamily,
     decreaseFontSize,
@@ -39376,11 +39378,11 @@ function HtmlSettings(props) {
 
 // src/ui/SettingsButton.tsx
 function SettingsCard(props) {
-  var _a;
+  var _a, _b;
   const [isOpen, setIsOpen] = React67.useState(false);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
-  const paginationValue = ((_a = props.state) == null ? void 0 : _a.isScrolling) ? "scrolling" : "paginated";
+  const paginationValue = ((_b = (_a = props.state) == null ? void 0 : _a.settings) == null ? void 0 : _b.isScrolling) ? "scrolling" : "paginated";
   const contentBgColor = useColorModeValue_default("ui.white", "ui.black", "ui.white");
   return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(Popover, {
     placement: "bottom",
@@ -39882,7 +39884,7 @@ function createDescendantContext() {
 import * as React70 from "react";
 import React__default2, { useState as useState24, useCallback as useCallback24, useEffect as useEffect25, useRef as useRef23 } from "react";
 
-// node_modules/@chakra-ui/hooks/dist/use-animation-state-5e0537c8.esm.js
+// node_modules/@chakra-ui/hooks/dist/use-animation-state-35233362.esm.js
 import * as React69 from "react";
 import { useState as useState22, useEffect as useEffect23 } from "react";
 var useSafeLayoutEffect4 = isBrowser4 ? React69.useLayoutEffect : React69.useEffect;
@@ -41004,6 +41006,12 @@ var FOOTER_HEIGHT = 48;
 var CHROME_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT;
 var DEFAULT_HEIGHT = `calc(100vh - ${CHROME_HEIGHT}px)`;
 var DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
+var DEFAULT_SETTINGS = {
+  colorMode: "day",
+  isScrolling: false,
+  fontSize: 100,
+  fontFamily: "publisher"
+};
 
 // src/ui/Header.tsx
 var DefaultHeaderLeft = () => {
@@ -41147,9 +41155,9 @@ var PageButton_default = PageButton;
 
 // src/ui/manager.tsx
 var ManagerUI = (props) => {
-  var _a;
+  var _a, _b;
   return /* @__PURE__ */ React77.createElement(ThemeProvider3, {
-    theme: getTheme3((_a = props.state) == null ? void 0 : _a.colorMode)
+    theme: getTheme3((_b = (_a = props.state) == null ? void 0 : _a.settings) == null ? void 0 : _b.colorMode)
   }, /* @__PURE__ */ React77.createElement(WebReaderContent, __spreadValues({}, props)));
 };
 var WebReaderContent = (_a) => {
@@ -41211,7 +41219,7 @@ var WebReaderContent = (_a) => {
 var manager_default = ManagerUI;
 
 // src/useWebReader.tsx
-import React99 from "react";
+import React100 from "react";
 
 // src/utils/fetch.ts
 function fetchJson(url) {
@@ -44166,7 +44174,7 @@ if (isLocalFileSystem) {
 pdfjs4.GlobalWorkerOptions.workerSrc = "pdf.worker.js";
 
 // src/PdfReader/index.tsx
-import * as React90 from "react";
+import * as React91 from "react";
 
 // src/PdfReader/useMeasure.tsx
 import * as React88 from "react";
@@ -44522,11 +44530,58 @@ var ScrollPage = ({
 };
 var ScrollPage_default = ScrollPage;
 
+// src/ui/LoadingSkeleton.tsx
+import React90 from "react";
+function LoadingSkeleton({
+  height
+}) {
+  return /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(HeaderWrapper, null), /* @__PURE__ */ React90.createElement(Box, {
+    padding: "6",
+    bg: "white",
+    mt: "7",
+    height,
+    "aria-label": "Loading book...",
+    "aria-busy": "true",
+    role: "progressbar"
+  }, /* @__PURE__ */ React90.createElement(Flex, {
+    justifyContent: "center"
+  }, /* @__PURE__ */ React90.createElement(Skeleton, {
+    height: "20px",
+    mb: "7",
+    w: "30%"
+  })), /* @__PURE__ */ React90.createElement(SkeletonText, {
+    mb: "7",
+    noOfLines: 10,
+    spacing: "4"
+  }), /* @__PURE__ */ React90.createElement(SkeletonText, {
+    mb: "7",
+    noOfLines: 5,
+    spacing: "4"
+  })));
+}
+
 // src/PdfReader/index.tsx
 var IFRAME_WRAPPER_ID = "iframe-wrapper";
 var SCALE_STEP = 0.1;
 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,
@@ -44548,8 +44603,13 @@ function pdfReducer(state2, action) {
         pageNumber: action.pageNum
       });
     case "SET_SCROLL":
+      if (state2.state !== "ACTIVE") {
+        return handleInvalidTransition(state2, action);
+      }
       return __spreadProps(__spreadValues({}, state2), {
-        isScrolling: action.isScrolling
+        settings: __spreadProps(__spreadValues({}, state2.settings), {
+          isScrolling: action.isScrolling
+        })
       });
     case "SET_SCALE":
       return __spreadProps(__spreadValues({}, state2), {
@@ -44581,11 +44641,11 @@ var getResourceUrl = (index, readingOrder) => {
   return readingOrder[index].href;
 };
 var loadResource = (resourceUrl, proxyUrl) => __async(void 0, null, function* () {
-  const resource = proxyUrl + encodeURI(resourceUrl);
-  const response = yield fetch(resource, { mode: "cors" });
+  const url = proxyUrl ? `${proxyUrl}${encodeURIComponent(resourceUrl)}` : resourceUrl;
+  const response = yield fetch(url, { mode: "cors" });
   const array = new Uint8Array(yield response.arrayBuffer());
   if (!response.ok) {
-    throw new Error("Response not Ok for URL: " + resource);
+    throw new Error("Response not Ok for URL: " + url);
   }
   return array;
 });
@@ -44598,33 +44658,57 @@ function usePdfReader(args) {
     webpubManifestUrl,
     manifest,
     proxyUrl,
-    readerSettings,
+    getContent,
+    injectables,
+    injectablesFixed,
     height = DEFAULT_HEIGHT,
     growWhenScrolling = DEFAULT_SHOULD_GROW_WHEN_SCROLLING
   } = args != null ? args : {};
-  const [state2, dispatch] = React90.useReducer(pdfReducer, {
-    colorMode: "day",
-    isScrolling: (_a = readerSettings == null ? void 0 : readerSettings.isScrolling) != null ? _a : false,
-    fontSize: 16,
-    fontFamily: "sans-serif",
+  const [state2, dispatch] = React91.useReducer(pdfReducer, {
+    state: "INACTIVE",
     resourceIndex: 0,
     resource: null,
     pageNumber: 1,
     numPages: null,
-    currentTocUrl: null,
     scale: 1,
     pdfWidth: 0,
     pdfHeight: 0,
     pageHeight: void 0,
     pageWidth: void 0,
     atStart: true,
-    atEnd: false
+    atEnd: false,
+    settings: void 0
   });
   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();
-  React90.useEffect(() => {
+  React91.useEffect(() => {
+    if (!webpubManifestUrl || !manifest) {
+      return dispatch({ type: "ARGS_CHANGED", args: void 0 });
+    }
+    dispatch({
+      type: "ARGS_CHANGED",
+      args: {
+        webpubManifestUrl,
+        manifest,
+        getContent,
+        injectables,
+        injectablesFixed,
+        height,
+        growWhenScrolling
+      }
+    });
+  }, [
+    webpubManifestUrl,
+    manifest,
+    getContent,
+    injectables,
+    injectablesFixed,
+    height,
+    growWhenScrolling
+  ]);
+  React91.useEffect(() => {
     if (!manifest)
       return;
     if (!manifest.readingOrder || !manifest.readingOrder.length) {
@@ -44638,7 +44722,7 @@ function usePdfReader(args) {
       });
     });
   }, [state2.resourceIndex, manifest, proxyUrl]);
-  const resizePage = React90.useCallback((pdfWidth, pdfHeight, containerSize2) => {
+  const resizePage = React91.useCallback((pdfWidth, pdfHeight, containerSize2) => {
     const wRatio = pdfWidth / containerSize2.width;
     const hRatio = pdfHeight / containerSize2.height;
     const fitHorizontal = wRatio > hRatio;
@@ -44646,14 +44730,14 @@ function usePdfReader(args) {
     const height2 = !fitHorizontal ? Math.round(containerSize2.height) : void 0;
     dispatch({ type: "RESIZE_PAGE", width, height: height2 });
   }, []);
-  React90.useEffect(() => {
+  React91.useEffect(() => {
     resizePage(state2.pdfWidth, state2.pdfHeight, containerSize);
   }, [containerSize, state2.pdfWidth, state2.pdfHeight, resizePage]);
-  React90.useEffect(() => {
+  React91.useEffect(() => {
     var _a2;
-    if (!manifest)
+    if (!manifest || state2.state !== "ACTIVE")
       return;
-    if (isSinglePDF && state2.isScrolling) {
+    if (isSinglePDF && state2.settings.isScrolling) {
       dispatch({
         type: "BOOK_BOUNDARY_CHANGED",
         atStart: true,
@@ -44663,7 +44747,7 @@ function usePdfReader(args) {
       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.isScrolling && isLastResource;
+      const isResourceEnd = isLastResource && state2.pageNumber === state2.numPages || state2.settings.isScrolling && isLastResource;
       dispatch({
         type: "BOOK_BOUNDARY_CHANGED",
         atStart: isResourceStart,
@@ -44672,17 +44756,20 @@ function usePdfReader(args) {
     }
   }, [
     manifest,
-    state2.isScrolling,
+    state2.state,
+    state2.settings,
     state2.numPages,
     state2.pageNumber,
     state2.resourceIndex,
     isSinglePDF
   ]);
-  const goForward = React90.useCallback(() => __async(this, null, function* () {
+  const goForward = React91.useCallback(() => __async(this, null, function* () {
     var _a2;
     if (!state2.numPages)
       return;
-    if (state2.pageNumber < state2.numPages && !state2.isScrolling) {
+    if (state2.state !== "ACTIVE")
+      return;
+    if (state2.pageNumber < state2.numPages && !state2.settings.isScrolling) {
       dispatch({
         type: "NAVIGATE_PAGE",
         pageNum: state2.pageNumber + 1
@@ -44696,16 +44783,19 @@ function usePdfReader(args) {
       });
     }
   }), [
+    state2.state,
     manifest,
-    state2.isScrolling,
+    state2.settings,
     state2.numPages,
     state2.pageNumber,
     state2.resourceIndex
   ]);
-  const goBackward = React90.useCallback(() => __async(this, null, function* () {
+  const goBackward = React91.useCallback(() => __async(this, null, function* () {
     if (!isParsed)
       return;
-    if (state2.pageNumber > 1 && !state2.isScrolling) {
+    if (state2.state !== "ACTIVE")
+      return;
+    if (state2.pageNumber > 1 && !state2.settings.isScrolling) {
       dispatch({
         type: "NAVIGATE_PAGE",
         pageNum: state2.pageNumber - 1
@@ -44715,33 +44805,34 @@ function usePdfReader(args) {
       dispatch({
         type: "SET_CURRENT_RESOURCE",
         index: nextIndex,
-        shouldNavigateToEnd: !state2.isScrolling
+        shouldNavigateToEnd: !state2.settings.isScrolling
       });
     }
   }), [
     manifest,
     isParsed,
-    state2.isScrolling,
+    state2.state,
+    state2.settings,
     state2.pageNumber,
     state2.resourceIndex
   ]);
-  const setScroll = React90.useCallback((val) => __async(this, null, function* () {
+  const setScroll = React91.useCallback((val) => __async(this, null, function* () {
     const isScrolling = val === "scrolling";
     dispatch({ type: "SET_SCROLL", isScrolling });
   }), []);
-  const zoomIn = React90.useCallback(() => __async(this, null, function* () {
+  const zoomIn = React91.useCallback(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state2.scale + SCALE_STEP
     });
   }), [state2.scale]);
-  const zoomOut = React90.useCallback(() => __async(this, null, function* () {
+  const zoomOut = React91.useCallback(() => __async(this, null, function* () {
     dispatch({
       type: "SET_SCALE",
       scale: state2.scale - SCALE_STEP
     });
   }), [state2.scale]);
-  const goToPage = React90.useCallback((href) => __async(this, null, function* () {
+  const goToPage = React91.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((link) => {
@@ -44760,30 +44851,16 @@ function usePdfReader(args) {
   }), [manifest == null ? void 0 : manifest.readingOrder]);
   if (!webpubManifestUrl || !manifest)
     return null;
-  if (isFetching) {
+  if (state2.state === "INACTIVE" || isFetching) {
     return {
-      type: "PDF",
-      isLoading: false,
-      content: /* @__PURE__ */ React90.createElement(Flex, {
-        as: "main",
-        tabIndex: -1,
-        id: "iframe-wrapper",
-        zIndex: "base",
-        alignItems: "center",
-        justifyContent: "center",
-        flex: "1 0 auto",
+      type: null,
+      isLoading: true,
+      content: /* @__PURE__ */ React91.createElement(LoadingSkeleton, {
         height
-      }, "PDF is loading"),
-      state: state2,
-      manifest,
-      navigator: {
-        goForward,
-        goBackward,
-        zoomIn,
-        zoomOut,
-        setScroll,
-        goToPage
-      }
+      }),
+      navigator: null,
+      manifest: null,
+      state: null
     };
   }
   const onDocumentLoadSuccess = ({ numPages }) => {
@@ -44804,12 +44881,12 @@ function usePdfReader(args) {
       resizePage(page.width, page.height, containerSize);
     }
   }
-  const shouldGrow = state2.isScrolling && growWhenScrolling;
+  const shouldGrow = ((_a = state2.settings) == null ? void 0 : _a.isScrolling) && growWhenScrolling;
   const finalHeight = shouldGrow ? "initial" : height;
   return {
     type: "PDF",
     isLoading: false,
-    content: /* @__PURE__ */ React90.createElement(Flex, {
+    content: /* @__PURE__ */ React91.createElement(Flex, {
       as: "main",
       zIndex: "base",
       flex: "1 0 auto",
@@ -44819,16 +44896,16 @@ function usePdfReader(args) {
       id: IFRAME_WRAPPER_ID,
       ref: containerRef,
       height: finalHeight
-    }, /* @__PURE__ */ React90.createElement("style", null, `
+    }, /* @__PURE__ */ React91.createElement("style", null, `
             .react-pdf__Document {
               height: calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT}px);
               overflow-x: hidden;
               overflow-y: auto;
             }
-          `), /* @__PURE__ */ React90.createElement(Document, {
+          `), /* @__PURE__ */ React91.createElement(Document, {
       file: state2.resource,
       onLoadSuccess: onDocumentLoadSuccess
-    }, isParsed && state2.numPages && /* @__PURE__ */ React90.createElement(React90.Fragment, null, state2.isScrolling && Array.from(new Array(state2.numPages), (_, index) => /* @__PURE__ */ React90.createElement(ScrollPage_default, {
+    }, isParsed && state2.numPages && /* @__PURE__ */ React91.createElement(React91.Fragment, null, state2.settings.isScrolling && Array.from(new Array(state2.numPages), (_, index) => /* @__PURE__ */ React91.createElement(ScrollPage_default, {
       key: `page_${index + 1}`,
       width: containerSize.width,
       placeholderHeight: state2.pdfHeight,
@@ -44836,13 +44913,13 @@ function usePdfReader(args) {
       scale: state2.scale,
       pageNumber: index + 1,
       onLoadSuccess: onRenderSuccess
-    })), !state2.isScrolling && /* @__PURE__ */ React90.createElement(ChakraPage_default, {
+    })), !state2.settings.isScrolling && /* @__PURE__ */ React91.createElement(ChakraPage_default, {
       pageNumber: state2.pageNumber,
       onLoadSuccess: onRenderSuccess,
       width: state2.pageWidth,
       height: state2.pageHeight,
       scale: state2.scale,
-      loading: /* @__PURE__ */ React90.createElement(React90.Fragment, null)
+      loading: /* @__PURE__ */ React91.createElement(React91.Fragment, null)
     })))),
     state: state2,
     manifest,
@@ -44856,39 +44933,13 @@ function usePdfReader(args) {
     }
   };
 }
+function handleInvalidTransition(state2, action) {
+  console.trace(`Inavlid state transition attempted: ${state2} with ${action.type}`);
+  return state2;
+}
 
 // src/HtmlReader/index.tsx
-import React98 from "react";
-
-// src/ui/LoadingSkeleton.tsx
-import React91 from "react";
-function LoadingSkeleton({
-  height
-}) {
-  return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(HeaderWrapper, null), /* @__PURE__ */ React91.createElement(Box, {
-    padding: "6",
-    bg: "white",
-    mt: "7",
-    height,
-    "aria-label": "Loading book...",
-    "aria-busy": "true",
-    role: "progressbar"
-  }, /* @__PURE__ */ React91.createElement(Flex, {
-    justifyContent: "center"
-  }, /* @__PURE__ */ React91.createElement(Skeleton, {
-    height: "20px",
-    mb: "7",
-    w: "30%"
-  })), /* @__PURE__ */ React91.createElement(SkeletonText, {
-    mb: "7",
-    noOfLines: 10,
-    spacing: "4"
-  }), /* @__PURE__ */ React91.createElement(SkeletonText, {
-    mb: "7",
-    noOfLines: 5,
-    spacing: "4"
-  })));
-}
+import React99 from "react";
 
 // src/HtmlReader/lib.ts
 var FONT_SIZE_STEP = 4;
@@ -45051,11 +45102,60 @@ var familyToReadiumFamily = {
   "open-dyslexic": "opendyslexic"
 };
 
-// src/HtmlReader/useLocationQuery.ts
+// src/utils/localstorage.ts
 import React92 from "react";
+var lsLocationKey = (identifier2) => `web-reader-location-${identifier2}`;
+function getLocalStorageLocation(identifier2) {
+  const locationKey = lsLocationKey(identifier2);
+  const item = localStorage.getItem(locationKey);
+  if (item) {
+    const record = JSON.parse(item);
+    return record;
+  }
+  return void 0;
+}
+var LOCAL_STORAGE_SETTINGS_KEY = "web-reader-settings";
+function getLocalStorageSettings() {
+  const item = localStorage.getItem(LOCAL_STORAGE_SETTINGS_KEY);
+  if (item) {
+    const settings = JSON.parse(item);
+    return settings;
+  }
+  return void 0;
+}
+function useUpdateLocalStorage(identifier2, state2) {
+  React92.useEffect(() => {
+    if (!identifier2)
+      return;
+    const locationKey = lsLocationKey(identifier2);
+    if (state2.location) {
+      const record = {
+        createdAt: Date.now(),
+        location: state2.location
+      };
+      const val = JSON.stringify(record);
+      localStorage.setItem(locationKey, val);
+    }
+  }, [state2.location, identifier2]);
+  React92.useEffect(() => {
+    if (!identifier2 || !state2.settings)
+      return;
+    const settings = {
+      fontSize: state2.settings.fontSize,
+      fontFamily: state2.settings.fontFamily,
+      colorMode: state2.settings.colorMode,
+      isScrolling: state2.settings.isScrolling
+    };
+    const val = JSON.stringify(settings);
+    localStorage.setItem(LOCAL_STORAGE_SETTINGS_KEY, val);
+  }, [state2.settings, identifier2]);
+}
+
+// src/HtmlReader/useLocationQuery.ts
+import React93 from "react";
 var LOCATION_QUERY_TITLE = "location";
 function useLocationQuery(state2) {
-  React92.useEffect(() => {
+  React93.useEffect(() => {
     if (state2.state === "READY")
       updateQuery(state2.location);
   }, [state2.location, state2.state]);
@@ -45100,10 +45200,10 @@ function makeHtmlReducer(args) {
     return (state2, _action) => state2;
   const { manifest, webpubManifestUrl } = args;
   return function reducer(state2, action) {
-    var _a;
+    var _a, _b, _c;
     function goToNextResource() {
       if (state2.state === "INACTIVE") {
-        return handleInvalidTransition(state2, action);
+        return handleInvalidTransition2(state2, action);
       }
       const currentIndex = getCurrentIndex(manifest, state2, webpubManifestUrl);
       const nextIndex = currentIndex + 1;
@@ -45122,7 +45222,7 @@ function makeHtmlReducer(args) {
     }
     function goToPrevResource() {
       if (state2.state === "INACTIVE") {
-        return handleInvalidTransition(state2, action);
+        return handleInvalidTransition2(state2, action);
       }
       const currentIndex = getCurrentIndex(manifest, state2, webpubManifestUrl);
       const prevIndex = currentIndex - 1;
@@ -45154,8 +45254,12 @@ function makeHtmlReducer(args) {
         });
         const queryLocation = getLocationQuery();
         const isQueryValid = queryLocation && !!getFromReadingOrder(queryLocation == null ? void 0 : queryLocation.href, manifest, webpubManifestUrl);
-        const location = isQueryValid ? queryLocation : defaultStartLocation;
+        const localStorageRecord = getLocalStorageLocation((_a = manifest.metadata.identifier) != null ? _a : webpubManifestUrl);
+        const isLocalStorageLocationValid = !!localStorageRecord && !!getFromReadingOrder(localStorageRecord.location.href, manifest, webpubManifestUrl);
+        const location = isQueryValid ? queryLocation : isLocalStorageLocationValid ? localStorageRecord.location : defaultStartLocation;
+        const settings = (_b = getLocalStorageSettings()) != null ? _b : DEFAULT_SETTINGS;
         const fetchingResource = __spreadProps(__spreadValues({}, state2), {
+          settings,
           state: "FETCHING_RESOURCE",
           location,
           resourceFetchError: void 0,
@@ -45166,7 +45270,7 @@ function makeHtmlReducer(args) {
       }
       case "RESOURCE_FETCH_SUCCESS": {
         if (state2.state === "INACTIVE") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
         const newState = __spreadProps(__spreadValues({}, state2), {
           state: "RENDERING_IFRAME",
@@ -45178,7 +45282,7 @@ function makeHtmlReducer(args) {
       }
       case "RESOURCE_FETCH_ERROR": {
         if (state2.state !== "FETCHING_RESOURCE") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
         const newState = __spreadProps(__spreadValues({}, state2), {
           state: "RESOURCE_FETCH_ERROR",
@@ -45189,9 +45293,9 @@ function makeHtmlReducer(args) {
       }
       case "IFRAME_LOADED": {
         if (state2.state !== "LOADING_IFRAME") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
-        const { currentPage, totalPages } = calcPosition(state2.iframe, state2.isScrolling);
+        const { currentPage, totalPages } = calcPosition(state2.iframe, state2.settings.isScrolling);
         const newState = __spreadProps(__spreadValues({}, state2), {
           state: "NAVIGATING",
           location: __spreadProps(__spreadValues({}, state2.location), {
@@ -45211,9 +45315,9 @@ function makeHtmlReducer(args) {
       }
       case "GO_TO_HREF": {
         if (state2.state !== "READY") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
-        const { link } = (_a = getFromReadingOrder(action.href, manifest, webpubManifestUrl)) != null ? _a : {};
+        const { link } = (_c = getFromReadingOrder(action.href, manifest, webpubManifestUrl)) != null ? _c : {};
         if (!link) {
           console.error(`No readingOrder entry found for href: ${action.href}`);
           return state2;
@@ -45241,7 +45345,7 @@ function makeHtmlReducer(args) {
       }
       case "GO_TO_LOCATION": {
         if (state2.state !== "READY") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
         const isNewResource = !isSameResource(action.location.href, state2.location.href, webpubManifestUrl);
         if (isNewResource) {
@@ -45276,9 +45380,9 @@ function makeHtmlReducer(args) {
       }
       case "GO_FORWARD": {
         if (state2.state !== "READY") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
-        const { progression, totalPages, currentPage } = calcPosition(state2.iframe, state2.isScrolling);
+        const { progression, totalPages, currentPage } = calcPosition(state2.iframe, state2.settings.isScrolling);
         if (currentPage === totalPages) {
           return goToNextResource();
         }
@@ -45299,9 +45403,9 @@ function makeHtmlReducer(args) {
       }
       case "GO_BACKWARD": {
         if (state2.state !== "READY") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
-        const { progression, totalPages, currentPage } = calcPosition(state2.iframe, state2.isScrolling);
+        const { progression, totalPages, currentPage } = calcPosition(state2.iframe, state2.settings.isScrolling);
         if (currentPage === 1) {
           return goToPrevResource();
         }
@@ -45322,9 +45426,9 @@ function makeHtmlReducer(args) {
       }
       case "NAV_COMPLETE": {
         if (state2.state !== "NAVIGATING") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
-        const { totalPages, currentPage } = calcPosition(state2.iframe, state2.isScrolling);
+        const { totalPages, currentPage } = calcPosition(state2.iframe, state2.settings.isScrolling);
         const newState = __spreadProps(__spreadValues({}, state2), {
           state: "READY",
           location: __spreadProps(__spreadValues({}, state2.location), {
@@ -45337,17 +45441,24 @@ function makeHtmlReducer(args) {
         return newState;
       }
       case "SET_COLOR_MODE":
+        if (state2.state === "INACTIVE") {
+          return handleInvalidTransition2(state2, action);
+        }
         return __spreadProps(__spreadValues({}, state2), {
-          colorMode: action.mode
+          settings: __spreadProps(__spreadValues({}, state2.settings), {
+            colorMode: action.mode
+          })
         });
       case "SET_SCROLL": {
         if (state2.state !== "READY") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
-        const { currentPageFloor, totalPages } = calcPosition(state2.iframe, state2.isScrolling);
+        const { currentPageFloor, totalPages } = calcPosition(state2.iframe, state2.settings.isScrolling);
         const newState = __spreadProps(__spreadValues({}, state2), {
           state: "NAVIGATING",
-          isScrolling: action.isScrolling,
+          settings: __spreadProps(__spreadValues({}, state2.settings), {
+            isScrolling: action.isScrolling
+          }),
           location: __spreadProps(__spreadValues({}, state2.location), {
             locations: {
               position: currentPageFloor,
@@ -45358,27 +45469,42 @@ function makeHtmlReducer(args) {
         return newState;
       }
       case "INCREASE_FONT_SIZE": {
-        const newSize = state2.fontSize + FONT_SIZE_STEP;
+        if (state2.state === "INACTIVE") {
+          return handleInvalidTransition2(state2, action);
+        }
+        const newSize = state2.settings.fontSize + FONT_SIZE_STEP;
         return __spreadProps(__spreadValues({}, state2), {
-          fontSize: newSize > 0 ? newSize : 0
+          settings: __spreadProps(__spreadValues({}, state2.settings), {
+            fontSize: newSize > 0 ? newSize : 0
+          })
         });
       }
       case "DECREASE_FONT_SIZE": {
-        const newSize = state2.fontSize - FONT_SIZE_STEP;
+        if (state2.state === "INACTIVE") {
+          return handleInvalidTransition2(state2, action);
+        }
+        const newSize = state2.settings.fontSize - FONT_SIZE_STEP;
         return __spreadProps(__spreadValues({}, state2), {
-          fontSize: newSize > 0 ? newSize : 0
+          settings: __spreadProps(__spreadValues({}, state2.settings), {
+            fontSize: newSize > 0 ? newSize : 0
+          })
         });
       }
       case "SET_FONT_FAMILY":
+        if (state2.state === "INACTIVE") {
+          return handleInvalidTransition2(state2, action);
+        }
         return __spreadProps(__spreadValues({}, state2), {
-          fontFamily: action.family
+          settings: __spreadProps(__spreadValues({}, state2.settings), {
+            fontFamily: action.family
+          })
         });
       case "SET_IFRAME": {
         if (action.iframe === null) {
           return state2;
         }
         if (state2.state !== "RENDERING_IFRAME" || !action.iframe) {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
         const newState = __spreadProps(__spreadValues({}, state2), {
           state: "LOADING_IFRAME",
@@ -45388,9 +45514,9 @@ function makeHtmlReducer(args) {
       }
       case "USER_SCROLLED": {
         if (state2.state !== "READY") {
-          return handleInvalidTransition(state2, action);
+          return handleInvalidTransition2(state2, action);
         }
-        const { progression, currentPage, totalPages } = calcPosition(state2.iframe, state2.isScrolling);
+        const { progression, currentPage, totalPages } = calcPosition(state2.iframe, state2.settings.isScrolling);
         const newState = __spreadProps(__spreadValues({}, state2), {
           location: __spreadProps(__spreadValues({}, state2.location), {
             locations: {
@@ -45405,23 +45531,19 @@ function makeHtmlReducer(args) {
     }
   };
 }
-function handleInvalidTransition(state2, action) {
+function handleInvalidTransition2(state2, action) {
   console.trace(`Inavlid state transition attempted: ${state2.state} to ${action.type}`);
   return state2;
 }
 var inactiveState = {
-  colorMode: "day",
-  isScrolling: false,
-  fontSize: 100,
-  fontFamily: "sans-serif",
-  currentTocUrl: null,
   atStart: false,
   atEnd: false,
   iframe: null,
   resource: void 0,
   resourceFetchError: void 0,
   state: "INACTIVE",
-  location: void 0
+  location: void 0,
+  settings: void 0
 };
 
 // src/HtmlReader/effects.ts
@@ -45452,29 +45574,31 @@ function navigateToHash(fragment, iframe, isScrolling) {
     }
   }
 }
-function setCss(html, state2) {
-  setCSSProperty(html, "--USER__scroll", getPagination(state2.isScrolling));
-  setCSSProperty(html, "--USER__appearance", getColorModeValue(state2.colorMode));
+function setCss(html, settings) {
+  setCSSProperty(html, "--USER__scroll", getPagination(settings.isScrolling));
+  setCSSProperty(html, "--USER__appearance", getColorModeValue(settings.colorMode));
   setCSSProperty(html, "--USER__advancedSettings", "readium-advanced-on");
-  setCSSProperty(html, "--USER__fontOverride", getFontOverride(state2.fontFamily));
-  setCSSProperty(html, "--USER__fontFamily", familyToReadiumFamily[state2.fontFamily]);
-  setCSSProperty(html, "--USER__fontSize", `${state2.fontSize}%`);
-  setCSSProperty(html, "overflow", state2.isScrolling ? "scroll" : "hidden");
+  setCSSProperty(html, "--USER__fontOverride", getFontOverride(settings.fontFamily));
+  setCSSProperty(html, "--USER__fontFamily", familyToReadiumFamily[settings.fontFamily]);
+  setCSSProperty(html, "--USER__fontSize", `${settings.fontSize}%`);
+  setCSSProperty(html, "overflow", settings.isScrolling ? "scroll" : "hidden");
   setCSSProperty(html, "--USER__colCount", "1");
 }
 
 // src/HtmlReader/useResource.tsx
-import React93 from "react";
+import React94 from "react";
 function useResource(state2, getContent, injectables, dispatch) {
   var _a, _b;
   const currentResourceUrl = (_b = (_a = state2.location) == null ? void 0 : _a.href) != null ? _b : null;
-  React93.useEffect(() => {
+  React94.useEffect(() => {
     if (!currentResourceUrl) {
       return;
     }
     function fetchResource(url) {
       return __async(this, null, function* () {
         var _a2, _b2;
+        if (!state2.settings)
+          return;
         try {
           const content = yield getContent(url);
           const mimetype = ((_b2 = (_a2 = state2.location) == null ? void 0 : _a2.type) != null ? _b2 : url.endsWith(".html")) ? "text/html" : "application/xhtml+xml";
@@ -45491,10 +45615,10 @@ function useResource(state2, getContent, injectables, dispatch) {
           }
           injectJS(document2.body);
           setCss(document2.documentElement, {
-            colorMode: state2.colorMode,
-            fontSize: state2.fontSize,
-            fontFamily: state2.fontFamily,
-            isScrolling: state2.isScrolling
+            colorMode: state2.settings.colorMode,
+            fontSize: state2.settings.fontSize,
+            fontFamily: state2.settings.fontFamily,
+            isScrolling: state2.settings.isScrolling
           });
           const finalResource = new XMLSerializer().serializeToString(document2);
           dispatch({ type: "RESOURCE_FETCH_SUCCESS", resource: finalResource });
@@ -45533,9 +45657,9 @@ function injectJS(body) {
 }
 
 // src/HtmlReader/useWindowResize.ts
-import React94 from "react";
+import React95 from "react";
 function useWindowResize(dispatch) {
-  React94.useEffect(() => {
+  React95.useEffect(() => {
     function handleResize() {
       dispatch({ type: "WINDOW_RESIZED" });
     }
@@ -45545,11 +45669,11 @@ function useWindowResize(dispatch) {
 }
 
 // src/HtmlReader/useUpdateScroll.ts
-import * as React95 from "react";
+import * as React96 from "react";
 var SCROLL_STOP_DEBOUNCE = 100;
 function useUpdateScroll(state2, dispatch) {
-  const timeout = React95.useRef();
-  React95.useLayoutEffect(() => {
+  const timeout = React96.useRef();
+  React96.useLayoutEffect(() => {
     if (state2.state !== "READY")
       return;
     const iframeDocument = state2.iframe.contentDocument;
@@ -45568,9 +45692,9 @@ function useUpdateScroll(state2, dispatch) {
 }
 
 // src/HtmlReader/useUpdateCSS.ts
-import React96 from "react";
+import React97 from "react";
 function useUpdateCSS(state2, manifest) {
-  React96.useEffect(() => {
+  React97.useEffect(() => {
     if (!manifest)
       return;
     if (state2.state !== "NAVIGATING" && state2.state !== "READY")
@@ -45578,14 +45702,14 @@ function useUpdateCSS(state2, manifest) {
     const html = getMaybeIframeHtml(state2.iframe);
     if (!html)
       return;
-    setCss(html, state2);
+    setCss(html, state2.settings);
   }, [state2, manifest]);
 }
 
 // src/HtmlReader/useIframeLinkClick.ts
-import React97 from "react";
+import React98 from "react";
 function useIframeLinkClick(dispatch) {
-  React97.useEffect(() => {
+  React98.useEffect(() => {
     window.addEventListener("message", ({ data }) => {
       if (typeof data === "object" && data !== null && "type" in data) {
         switch (data.type) {
@@ -45599,7 +45723,7 @@ function useIframeLinkClick(dispatch) {
 
 // src/HtmlReader/index.tsx
 function useHtmlReader(args) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   const {
     webpubManifestUrl,
     manifest,
@@ -45609,15 +45733,17 @@ function useHtmlReader(args) {
     height = DEFAULT_HEIGHT,
     growWhenScrolling = DEFAULT_SHOULD_GROW_WHEN_SCROLLING
   } = args != null ? args : {};
-  const [state2, dispatch] = React98.useReducer(makeHtmlReducer(args), inactiveState);
+  const [state2, dispatch] = React99.useReducer(makeHtmlReducer(args), inactiveState);
   const currentResourceUrl = (_b = (_a = state2.location) == null ? void 0 : _a.href) != null ? _b : null;
   useResource(state2, getContent, injectables, dispatch);
   useUpdateScroll(state2, dispatch);
+  const identifier2 = manifest ? (_d = (_c = manifest.metadata.identifier) != null ? _c : webpubManifestUrl) != null ? _d : null : null;
+  useUpdateLocalStorage(identifier2, state2);
   useLocationQuery(state2);
   useWindowResize(dispatch);
   useUpdateCSS(state2, manifest);
   useIframeLinkClick(dispatch);
-  React98.useEffect(() => {
+  React99.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
       return dispatch({ type: "ARGS_CHANGED", args: void 0 });
     }
@@ -45642,24 +45768,29 @@ function useHtmlReader(args) {
     height,
     growWhenScrolling
   ]);
-  React98.useEffect(() => {
+  React99.useEffect(() => {
     process.nextTick(() => {
       if (state2.state === "NAVIGATING") {
         const { fragment, progression, position: position5 } = state2.location.locations;
         if (typeof fragment === "string") {
-          navigateToHash(fragment, state2.iframe, state2.isScrolling);
+          navigateToHash(fragment, state2.iframe, state2.settings.isScrolling);
         } else if (typeof progression === "number") {
-          navigateToProgression(state2.iframe, progression, state2.isScrolling);
+          navigateToProgression(state2.iframe, progression, state2.settings.isScrolling);
         } else if (typeof position5 === "number") {
-          const { totalPages } = calcPosition(state2.iframe, state2.isScrolling);
+          const { totalPages } = calcPosition(state2.iframe, state2.settings.isScrolling);
           const calculatedProgression = (position5 - 1) / totalPages;
-          navigateToProgression(state2.iframe, calculatedProgression, state2.isScrolling);
+          navigateToProgression(state2.iframe, calculatedProgression, state2.settings.isScrolling);
         }
         dispatch({ type: "NAV_COMPLETE" });
       }
     });
-  }, [state2.state, state2.iframe, state2.isScrolling, (_c = state2.location) == null ? void 0 : _c.locations]);
-  const navigator2 = React98.useRef({
+  }, [
+    state2.state,
+    state2.iframe,
+    (_e = state2.settings) == null ? void 0 : _e.isScrolling,
+    (_f = state2.location) == null ? void 0 : _f.locations
+  ]);
+  const navigator2 = React99.useRef({
     goToPage(href) {
       dispatch({ type: "GO_TO_HREF", href });
     },
@@ -45700,7 +45831,7 @@ function useHtmlReader(args) {
       });
     }
   }).current;
-  const setIframe = React98.useRef((el) => {
+  const setIframe = React99.useRef((el) => {
     dispatch({ type: "SET_IFRAME", iframe: el });
   }).current;
   if (!webpubManifestUrl || !manifest)
@@ -45709,7 +45840,7 @@ function useHtmlReader(args) {
     return {
       type: null,
       isLoading: true,
-      content: /* @__PURE__ */ React98.createElement(LoadingSkeleton, {
+      content: /* @__PURE__ */ React99.createElement(LoadingSkeleton, {
         height
       }),
       navigator: null,
@@ -45719,8 +45850,8 @@ function useHtmlReader(args) {
   }
   if (state2.state === "RESOURCE_FETCH_ERROR")
     throw state2.resourceFetchError;
-  const shouldGrow = state2.isScrolling && growWhenScrolling;
-  const englishTitle = typeof manifest.metadata.title === "string" ? manifest.metadata.title : (_d = manifest.metadata.title.en) != null ? _d : "Unknown Title";
+  const shouldGrow = state2.settings.isScrolling && growWhenScrolling;
+  const englishTitle = typeof manifest.metadata.title === "string" ? manifest.metadata.title : (_g = manifest.metadata.title.en) != null ? _g : "Unknown Title";
   const resourceIndex = manifest.readingOrder.findIndex((link) => isSameResource(link.href, state2.location.href, webpubManifestUrl));
   const numResources = manifest.readingOrder.length;
   const isFirstResource = resourceIndex === 0;
@@ -45732,7 +45863,7 @@ function useHtmlReader(args) {
   return {
     type: "HTML",
     isLoading: false,
-    content: /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement("iframe", {
+    content: /* @__PURE__ */ React99.createElement(React99.Fragment, null, /* @__PURE__ */ React99.createElement("iframe", {
       id: "html-reader-iframe",
       onLoad: () => dispatch({ type: "IFRAME_LOADED" }),
       ref: setIframe,
@@ -45782,8 +45913,8 @@ function useWebReader(args) {
     height = DEFAULT_HEIGHT,
     growWhenScrolling = DEFAULT_SHOULD_GROW_WHEN_SCROLLING
   } = args;
-  const [manifest, setManifest] = React99.useState(null);
-  const [error7, setError] = React99.useState(null);
+  const [manifest, setManifest] = React100.useState(null);
+  const [error7, setError] = React100.useState(null);
   if (error7) {
     throw error7;
   }
@@ -45805,13 +45936,13 @@ function useWebReader(args) {
     height,
     growWhenScrolling
   } : void 0);
-  React99.useEffect(() => {
+  React100.useEffect(() => {
     fetchJson(webpubManifestUrl).then(setManifest).catch(setError);
   }, [webpubManifestUrl]);
   if (manifest === null) {
     return {
       isLoading: true,
-      content: /* @__PURE__ */ React99.createElement(LoadingSkeleton, {
+      content: /* @__PURE__ */ React100.createElement(LoadingSkeleton, {
         height
       }),
       manifest: null,
@@ -45830,7 +45961,7 @@ function useWebReader(args) {
 }
 
 // src/ServiceWorker/client.ts
-import React100 from "react";
+import React101 from "react";
 
 // src/ServiceWorker/constants.ts
 var PRECACHE_PUBLICATIONS = "PRECACHE_PUBLICATIONS";
@@ -45838,7 +45969,7 @@ var CACHE_EXPIRATION_SECONDS = 7 * 24 * 60 * 60;
 
 // src/ServiceWorker/client.ts
 function usePublicationSW(publications) {
-  React100.useEffect(() => {
+  React101.useEffect(() => {
     var _a;
     if ("serviceWorker" in navigator) {
       const message = {
@@ -45869,17 +46000,18 @@ var WebReaderWithoutBoundary = (_a) => {
     getContent
   }, props));
   const { content } = webReader;
-  return /* @__PURE__ */ React101.createElement(manager_default, __spreadValues({
+  return /* @__PURE__ */ React102.createElement(manager_default, __spreadValues({
     headerLeft
   }, webReader), content);
 };
 var WebReader = (props) => {
-  return /* @__PURE__ */ React101.createElement(ErrorBoundary_default, __spreadValues({}, props), /* @__PURE__ */ React101.createElement(WebReaderWithoutBoundary, __spreadValues({}, props)));
+  return /* @__PURE__ */ React102.createElement(ErrorBoundary_default, __spreadValues({}, props), /* @__PURE__ */ React102.createElement(WebReaderWithoutBoundary, __spreadValues({}, props)));
 };
 var src_default = WebReader;
 export {
   CHROME_HEIGHT,
   DEFAULT_HEIGHT,
+  DEFAULT_SETTINGS,
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
   FOOTER_HEIGHT,
   HEADER_HEIGHT,