@edrlab/thorium-web 0.11.0 → 0.13.0

package/dist/components/Epub/index.mjs

@@ -1,16 +1,16 @@
-import { require_debounce, useAppSelector, useAppDispatch, setColumnCount, setFontFamily, setFontWeight, setHyphens, setScroll, setLetterSpacing, setPublisherStyles, setLineHeight, setParagraphIndent, setParagraphSpacing, setSettingsContainer, setTextAlign, setTextNormalization, setTheme, setWordSpacing, setFontSize, toggleImmersive, setFullscreen, setActionOpen, dockAction, setImmersive, setHovering, setArrows, setProgression, setTocEntry, useAppStore, toggleActionOpen, setDirection, setPlatformModifier, setRTL, setFXL, setRunningHead, setTocTree, setOverflow, setPositionsList, setLoading, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from '../../chunk-IUF5GAPA.mjs';
-export { ThStoreProvider, actionsSlice, activateDockPanel, collapseDockPanel, deactivateDockPanel, dockAction, expandDockPanel, makeStore, publicationSlice, readerSlice, setActionOpen, setArrows, setBreakpoint, setColorScheme, setColumnCount, setContrast, setDirection, setDockPanelWidth, setFXL, setFontFamily, setFontSize, setFontWeight, setForcedColors, setFullscreen, setHovering, setHyphens, setImmersive, setLayoutStrategy, setLetterSpacing, setLineHeight, setLineLength, setLoading, setMonochrome, setOverflow, setParagraphIndent, setParagraphSpacing, setPlatformModifier, setPositionsList, setProgression, setPublicationEnd, setPublicationStart, setPublisherStyles, setRTL, setReducedMotion, setReducedTransparency, setRunningHead, setScroll, setSettingsContainer, setTextAlign, setTextNormalization, setTheme, setTmpLineLengths, setTmpMaxChars, setTmpMinChars, setTocEntry, setTocTree, setWordSpacing, settingsSlice, themeSlice, toggleActionOpen, toggleImmersive, useAppDispatch, useAppSelector, useAppStore } from '../../chunk-IUF5GAPA.mjs';
-import { defaultFontFamilyOptions, usePreferences, defaultLetterSpacing, defaultLineHeights, defaultParagraphIndent, defaultParagraphSpacing, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, usePreferenceKeys, buildThemeObject, defaultWordSpacing, defaultFontSize } from '../../chunk-4BUYRCGX.mjs';
-export { ThPreferencesProvider, usePreferences, useTheming } from '../../chunk-4BUYRCGX.mjs';
-import { ThRadioGroup, ThDropdown, ThSlider, ThSwitch, ThNumberField, ThSettingsWrapper, ThActionButton, ThMenu, ThCollapsibleActionsBar, ThMenuItem, ThPopover, ThContainerHeader, ThNavigationButton, ThContainerBody, ThBottomSheet, ThCloseButton, ThModal, ThDockedPanel, ThTypedComponentRenderer, useActions, ThForm, ThFormNumberField, ThFormSearchField, ThFormTextField, ThLoader, ThHeader, ThRunningHead, ThFooter, ThProgression } from '../../chunk-2U455VSY.mjs';
+import { require_debounce, useAppSelector, useAppDispatch, setColumnCount, setFontFamily, setFontWeight, setHyphens, setScroll, setLetterSpacing, setPublisherStyles, setLineHeight, setParagraphIndent, setParagraphSpacing, setSettingsContainer, setTextAlign, setTextNormalization, setTheme, setWordSpacing, setFontSize, toggleImmersive, setFullscreen, setActionOpen, dockAction, setImmersive, setHovering, setArrows, setProgression, setTocEntry, useAppStore, toggleActionOpen, setDirection, setPlatformModifier, setRTL, setFXL, setRunningHead, setTocTree, setOverflow, setPositionsList, setLoading, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from '../../chunk-AFXHD6TS.mjs';
+export { ThStoreProvider, actionsSlice, activateDockPanel, collapseDockPanel, deactivateDockPanel, dockAction, expandDockPanel, makeStore, publicationSlice, readerSlice, setActionOpen, setArrows, setBreakpoint, setColorScheme, setColumnCount, setContrast, setDirection, setDockPanelWidth, setFXL, setFontFamily, setFontSize, setFontWeight, setForcedColors, setFullscreen, setHovering, setHyphens, setImmersive, setLayoutStrategy, setLetterSpacing, setLineHeight, setLineLength, setLoading, setMonochrome, setOverflow, setParagraphIndent, setParagraphSpacing, setPlatformModifier, setPositionsList, setProgression, setPublicationEnd, setPublicationStart, setPublisherStyles, setRTL, setReducedMotion, setReducedTransparency, setRunningHead, setScroll, setSettingsContainer, setTextAlign, setTextNormalization, setTheme, setTocEntry, setTocTree, setWordSpacing, settingsSlice, themeSlice, toggleActionOpen, toggleImmersive, useAppDispatch, useAppSelector, useAppStore } from '../../chunk-AFXHD6TS.mjs';
+import { defaultFontFamilyOptions, usePreferences, defaultLetterSpacing, defaultLineHeights, defaultParagraphIndent, defaultParagraphSpacing, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, usePreferenceKeys, buildThemeObject, defaultWordSpacing, defaultFontSize } from '../../chunk-VMGV6SUR.mjs';
+export { ThPreferencesProvider, usePreferences, useTheming } from '../../chunk-VMGV6SUR.mjs';
+import { ThRadioGroup, ThDropdown, ThSlider, ThSwitch, ThNumberField, ThSettingsWrapper, ThActionButton, ThMenu, ThCollapsibleActionsBar, ThMenuItem, ThPopover, ThContainerHeader, ThNavigationButton, ThContainerBody, ThBottomSheet, ThCloseButton, ThModal, ThDockedPanel, ThTypedComponentRenderer, useActions, ThForm, ThFormNumberField, ThFormSearchField, ThFormTextField, ThLoader, ThHeader, ThRunningHead, ThFooter, ThProgression } from '../../chunk-GSWRWFPI.mjs';
 import '../../chunk-MLEYTQGK.mjs';
 import { makeBreakpointsMap, localData, isKeyboardTriggered, isActiveElement, isInteractiveElement } from '../../chunk-4DAERVPF.mjs';
 export { isActiveElement, isInteractiveElement, isKeyboardTriggered, localData, makeBreakpointsMap } from '../../chunk-4DAERVPF.mjs';
 export { propsToCSSVars } from '../../chunk-TTGURRX3.mjs';
 import { isIOSish, getPlatformModifier, buildShortcut, metaKeys } from '../../chunk-IEYR7QV7.mjs';
 export { UnstableShortcutMetaKeywords, UnstableShortcutRepresentation, buildShortcut, defaultPlatformModifier, getPlatform, getPlatformModifier, isIOSish, isIpadOS, isMacish, metaKeys } from '../../chunk-IEYR7QV7.mjs';
-import { useEpubNavigator, en_default, useFullscreen, usePrevious, TH_CUSTOM_SCHEME, ThScrollActions } from '../../chunk-JS5WI5D4.mjs';
-export { useEpubNavigator } from '../../chunk-JS5WI5D4.mjs';
+import { useEpubNavigator, en_default, useFullscreen, usePrevious, TH_CUSTOM_SCHEME, ThScrollActions } from '../../chunk-CW72NB4V.mjs';
+export { useEpubNavigator } from '../../chunk-CW72NB4V.mjs';
 import '../../chunk-KBKVDSTL.mjs';
 import '../../chunk-NQ2ZSGCX.mjs';
 import { ThDockingTypes, ThSheetTypes } from '../../chunk-PGRUW4ME.mjs';
@@ -20,18 +20,18 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import settingsStyles3 from '../../settings.module-5WB3OOEF.module.css';
 import { ListBox, ListBoxItem, Radio, Text, useFilter, Tree, TreeItem, TreeItemContent, Button, Collection, Keyboard, Toolbar } from 'react-aria-components';
 import { fontWeightRangeConfig, TextAlignment } from '@readium/navigator';
-import classNames10 from 'classnames';
+import classNames9 from 'classnames';
 import readerSharedUI9 from '../../readerSharedUI.module-ZOIZ4GTR.module.css';
-import '../../reader-GYRNT4IZ.css';
+import '../../reader-JFQBOUCS.css';
 import arrowStyles2 from '../../readerArrowButton.module-C37PFDSY.module.css';
 import { I18nProvider } from 'react-aria';
-import { Link, HttpFetcher, Manifest, Publication, ReadingProgression, EPUBLayout } from '@readium/shared';
+import { Link, EPUBLayout, Locator, HttpFetcher, Manifest, Publication, ReadingProgression } from '@readium/shared';
 import dockingStyles from '../../docking.module-TDNYZX4H.module.css';
 import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
-import readerStateStyles from '../../readerStates.module-WG46M7GK.module.css';
-import readerHeaderStyles from '../../readerHeader.module-LTPJ6FLV.module.css';
+import readerHeaderStyles from '../../readerHeader.module-PDCMID5Y.module.css';
 import overflowMenuStyles from '../../overflowMenu.module-XQRI7RJJ.module.css';
-import progressionStyles from '../../readerProgression.module-PL3TD3GE.module.css';
+import readerStateStyles from '../../readerStates.module-XBXHDJTJ.module.css';
+import progressionStyles from '../../readerProgression.module-QP76XMVO.module.css';
 import jumpToPositionStyles from '../../jumpToPosition.module-4C47UYPE.module.css';
 import sheetStyles2 from '../../sheets.module-DDN7GPMG.module.css';
 import tocStyles from '../../toc.module-XJLXQM7G.module.css';
@@ -582,10 +582,10 @@ var StatefulSlider = ({
     {
       ...props,
       ...standalone ? { label } : { "aria-label": label },
-      className: classNames10(settingsStyles3.readerSettingsSlider, standalone ? settingsStyles3.readerSettingsGroup : ""),
+      className: classNames9(settingsStyles3.readerSettingsSlider, standalone ? settingsStyles3.readerSettingsGroup : ""),
       compounds: {
         label: {
-          className: classNames10(settingsStyles3.readerSettingsLabel, settingsStyles3.readerSettingsSliderLabel)
+          className: classNames9(settingsStyles3.readerSettingsLabel, settingsStyles3.readerSettingsSliderLabel)
         },
         output: {
           className: settingsStyles3.readerSettingsSliderOutput
@@ -720,7 +720,7 @@ var StatefulNumberField = ({
     {
       ...props,
       ...standalone ? { label } : { "aria-label": label },
-      className: classNames10(settingsStyles3.readerSettingsNumbfield, standalone ? settingsStyles3.readerSettingsGroup : ""),
+      className: classNames9(settingsStyles3.readerSettingsNumbfield, standalone ? settingsStyles3.readerSettingsGroup : ""),
       compounds: {
         group: {
           className: settingsStyles3.readerSettingsGroupWrapper
@@ -1026,16 +1026,16 @@ var StatefulGroupWrapper = ({
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     ThSettingsWrapper,
     {
-      className: classNames10(settingsStyles3.readerSettingsGroup, settingsStyles3.readerSettingsAdvancedGroup),
+      className: classNames9(settingsStyles3.readerSettingsGroup, settingsStyles3.readerSettingsAdvancedGroup),
       items: componentsMap,
       prefs: resolvedPrefs,
       compounds: {
         label: heading,
         heading: {
-          className: classNames10(settingsStyles3.readerSettingsLabel, settingsStyles3.readerSettingsGroupLabel)
+          className: classNames9(settingsStyles3.readerSettingsLabel, settingsStyles3.readerSettingsGroupLabel)
         },
         button: {
-          className: classNames10(readerSharedUI9.icon, settingsStyles3.readerSettingsAdvancedIcon),
+          className: classNames9(readerSharedUI9.icon, settingsStyles3.readerSettingsAdvancedIcon),
           "aria-label": moreLabel,
           compounds: {
             tooltipTrigger: {
@@ -1394,11 +1394,11 @@ var StatefulTheme = ({ mapArrowNav }) => {
       label: en_default.reader.settings.themes.title,
       value: theme,
       onChange: async (val) => await updatePreference(val),
-      children: /* @__PURE__ */ jsx("div", { className: classNames10(settingsStyles3.readerSettingsRadioWrapper, settingsStyles3.readerSettingsThemesWrapper), children: themeItems.current.map(
+      children: /* @__PURE__ */ jsx("div", { className: classNames9(settingsStyles3.readerSettingsRadioWrapper, settingsStyles3.readerSettingsThemesWrapper), children: themeItems.current.map(
         (t) => /* @__PURE__ */ jsx(
           Radio,
           {
-            className: classNames10(
+            className: classNames9(
               settingsStyles3.readerSettingsRadio,
               settingsStyles3.readerSettingsThemeRadio
             ),
@@ -1635,7 +1635,7 @@ var DockHandle = ({
       className: dockingStyles.dockResizeHandle,
       disabled: !isResizable,
       tabIndex: isPopulated ? 0 : -1,
-      children: isResizable && hasDragIndicator && /* @__PURE__ */ jsx("div", { className: classNames10(dockingStyles.dockResizeHandleGrab, classFromFlow()) })
+      children: isResizable && hasDragIndicator && /* @__PURE__ */ jsx("div", { className: classNames9(dockingStyles.dockResizeHandleGrab, classFromFlow()) })
     }
   ) });
 };
@@ -1727,7 +1727,7 @@ var DockPanel = ({
           {
             id: flow,
             "aria-label": makeDockLabel(),
-            className: classNames10(dockingStyles.dockPanelContainer, dockClassName)
+            className: classNames9(dockingStyles.dockPanelContainer, dockClassName)
           }
         )
       }
@@ -1854,7 +1854,7 @@ var StatefulActionIcon = ({
     ThActionButton,
     {
       ref: triggerRef,
-      className: classNames10(readerSharedUI9.icon, handleClassNameFromState(), props.className),
+      className: classNames9(readerSharedUI9.icon, handleClassNameFromState(), props.className),
       onPress: props.onPress || defaultOnPressFunc,
       onKeyDown: blurOnEsc,
       onFocus: handleImmersive,
@@ -1993,15 +1993,6 @@ var StatefulReaderHeader = () => {
   const removeHover = () => {
     dispatch(setHovering(false));
   };
-  const handleClassNameFromState = () => {
-    let className = "";
-    if (isImmersive && isHovering) {
-      className = readerStateStyles.immersiveHovering;
-    } else if (isImmersive) {
-      className = readerStateStyles.immersive;
-    }
-    return className;
-  };
   const listActionItems = useCallback(() => {
     const actionKeys = isFXL ? fxlActionKeys : reflowActionKeys;
     const actionsItems = [];
@@ -2023,7 +2014,7 @@ var StatefulReaderHeader = () => {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     ThHeader,
     {
-      className: classNames10(readerHeaderStyles.header, handleClassNameFromState()),
+      className: readerHeaderStyles.header,
       id: "top-bar",
       "aria-label": en_default.reader.app.header.label,
       onMouseEnter: setHover,
@@ -2076,7 +2067,7 @@ var StatefulReaderArrowButton = ({
   const handleClassNameFromState = () => {
     let className2 = "";
     if (!hasArrows && !switchedFromScrollable()) {
-      className2 = readerStateStyles.immersiveHidden;
+      className2 = readerStateStyles.noOpacity;
     }
     return className2;
   };
@@ -2110,7 +2101,7 @@ var StatefulReaderArrowButton = ({
       onPress: (e) => onPress && handleOnPress(e, onPress),
       onHoverChange: (isHovering2) => setIsHovering(isHovering2),
       onKeyDown: blurOnEsc,
-      className: classNames10(className, handleClassNameFromSpaceProp(), handleClassNameFromState()),
+      className: classNames9(className, handleClassNameFromSpaceProp(), handleClassNameFromState()),
       isDisabled,
       preventFocusOnPress: true,
       ...props,
@@ -2159,8 +2150,6 @@ var StatefulReaderProgression = () => {
   ) });
 };
 var StatefulReaderFooter = () => {
-  const isImmersive = useAppSelector((state) => state.reader.isImmersive);
-  const isHovering = useAppSelector((state) => state.reader.isHovering);
   const dispatch = useAppDispatch();
   const setHover = () => {
     dispatch(setHovering(true));
@@ -2168,19 +2157,9 @@ var StatefulReaderFooter = () => {
   const removeHover = () => {
     dispatch(setHovering(false));
   };
-  const handleClassNameFromState = () => {
-    let className = "";
-    if (isImmersive && isHovering) {
-      className = readerStateStyles.immersiveHovering;
-    } else if (isImmersive) {
-      className = readerStateStyles.immersive;
-    }
-    return className;
-  };
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     ThFooter,
     {
-      className: handleClassNameFromState(),
       id: "bottom-bar",
       "aria-label": en_default.reader.app.footer.label,
       onMouseEnter: setHover,
@@ -2559,7 +2538,7 @@ var StatefulPopoverSheet = ({
           updateState: resetFocus
         },
         placement: placement || "bottom",
-        className: classNames10(sheetStyles2.popOverSheet, className),
+        className: classNames9(sheetStyles2.popOverSheet, className),
         isOpen,
         onOpenChange,
         isKeyboardDismissDisabled: dismissEscapeKeyClose,
@@ -2589,7 +2568,7 @@ var StatefulPopoverSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: en_default.reader.app.back.trigger,
                   ref: popoverCloseRef,
-                  className: classNames10(className, readerSharedUI9.backButton),
+                  className: classNames9(className, readerSharedUI9.backButton),
                   "aria-label": en_default.reader.app.back.trigger,
                   onPress: onClosePress
                 }
@@ -2805,7 +2784,7 @@ var StatefulBottomSheet = ({
         prefersReducedMotion,
         compounds: {
           container: {
-            className: classNames10(sheetStyles2.bottomSheetModal, detentClassName),
+            className: classNames9(sheetStyles2.bottomSheetModal, detentClassName),
             ref: sheetContainerRef,
             style: {
               maxWidth: maxWidthPref
@@ -2817,15 +2796,15 @@ var StatefulBottomSheet = ({
             onKeyDown: onDragKeyCallback
           },
           content: {
-            className: classNames10(sheetStyles2.bottomSheet, className),
+            className: classNames9(sheetStyles2.bottomSheet, className),
             disableDrag: true
           },
           scroller: {
-            className: classNames10(sheetStyles2.bottomSheetScroller, sheetStyles2.sheetBody),
+            className: classNames9(sheetStyles2.bottomSheetScroller, sheetStyles2.sheetBody),
             draggable: false
           },
           backdrop: {
-            className: classNames10(sheetStyles2.bottomSheetBackdrop, scrimClassName),
+            className: classNames9(sheetStyles2.bottomSheetBackdrop, scrimClassName),
             style: { "--defaults-scrim": scrimPref.override }
           }
         },
@@ -2846,7 +2825,7 @@ var StatefulBottomSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: en_default.reader.app.back.trigger,
                   ref: bottomSheetCloseRef,
-                  className: classNames10(className, readerSharedUI9.backButton),
+                  className: classNames9(className, readerSharedUI9.backButton),
                   "aria-label": en_default.reader.app.back.trigger,
                   onPress: onClosePress
                 }
@@ -2908,7 +2887,7 @@ var StatefulFullScreenSheet = ({
         isOpen,
         onOpenChange,
         isDismissable: true,
-        className: classNames10(sheetStyles2.fullScreenSheet, className),
+        className: classNames9(sheetStyles2.fullScreenSheet, className),
         isKeyboardDismissDisabled: dismissEscapeKeyClose,
         style: {
           "--sheet-sticky-header": fullScreenHeaderRef.current ? `${fullScreenHeaderRef.current.clientHeight}px` : void 0
@@ -2931,7 +2910,7 @@ var StatefulFullScreenSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: en_default.reader.app.back.trigger,
                   ref: fullScreenCloseRef,
-                  className: classNames10(className, readerSharedUI9.backButton),
+                  className: classNames9(className, readerSharedUI9.backButton),
                   "aria-label": en_default.reader.app.back.trigger,
                   onPress: onClosePress
                 }
@@ -2997,7 +2976,7 @@ var StatefulDockedSheet = ({
           autoFocus: false,
           updateState: resetFocus
         },
-        className: classNames10(sheetStyles2.dockedSheet, className, classFromFlow()),
+        className: classNames9(sheetStyles2.dockedSheet, className, classFromFlow()),
         style: {
           "--sheet-sticky-header": dockedSheetHeaderRef.current ? `${dockedSheetHeaderRef.current.clientHeight}px` : void 0
         },
@@ -3019,7 +2998,7 @@ var StatefulDockedSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: en_default.reader.app.back.trigger,
                   ref: dockedSheetCloseRef,
-                  className: classNames10(className, readerSharedUI9.backButton),
+                  className: classNames9(className, readerSharedUI9.backButton),
                   "aria-label": en_default.reader.app.back.trigger,
                   onPress: onClosePress
                 }
@@ -3654,6 +3633,7 @@ var StatefulTocContainer = ({ triggerRef }) => {
         /* @__PURE__ */ jsx(
           ThFormSearchField,
           {
+            "aria-label": en_default.reader.toc.search.label,
             value: filterValue,
             onChange: setFilterValue,
             onClear: () => setFilterValue(""),
@@ -3665,7 +3645,6 @@ var StatefulTocContainer = ({ triggerRef }) => {
               input: {
                 ref: searchInputRef,
                 className: tocStyles.tocSearchInput,
-                "aria-label": en_default.reader.toc.search.label,
                 placeholder: en_default.reader.toc.search.placeholder
               },
               searchIcon: {
@@ -3806,7 +3785,10 @@ var createDefaultPlugin = () => {
           type: "text"
         },
         ["theme" /* theme */]: {
-          Comp: StatefulTheme
+          Comp: StatefulTheme,
+          props: {
+            mapArrowNav: 2
+          }
         },
         ["wordSpacing" /* wordSpacing */]: {
           Comp: StatefulWordSpacing,
@@ -3987,6 +3969,7 @@ var StatefulReader = ({
   const localDataKey = useRef(`${selfHref}-current-location`);
   const arrowsWidth = useRef(2 * ((RSPrefs.theming.arrow.size || 40) + (RSPrefs.theming.arrow.offset || 0)));
   const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const positionsList = useAppSelector((state) => state.publication.positionsList);
   const tocTree = useAppSelector((state) => state.publication.tocTree);
   const tocEntry = useAppSelector((state) => state.publication.tocEntry);
   const textAlign = useAppSelector((state) => state.settings.textAlign);
@@ -4013,6 +3996,7 @@ var StatefulReader = ({
   const breakpoint = useAppSelector((state) => state.theming.breakpoint);
   const arrowsOccupySpace = breakpoint && (breakpoint === "large" /* large */ || breakpoint === "xLarge" /* xLarge */);
   const isImmersive = useAppSelector((state) => state.reader.isImmersive);
+  const isHovering = useAppSelector((state) => state.reader.isHovering);
   const cache = useRef({
     isImmersive,
     arrowsOccupySpace: arrowsOccupySpace || false,
@@ -4036,6 +4020,7 @@ var StatefulReader = ({
       wordSpacing
     },
     tocTree,
+    positionsList: positionsList || [],
     colorScheme,
     reducedMotion
   });
@@ -4097,41 +4082,60 @@ var StatefulReader = ({
       totalProgression: locator.locations.totalProgression
     }));
   }, [dispatch, currentPositions]);
-  const initReadingEnv = async () => {
-    if (navLayout() === EPUBLayout.fixed) {
-      const cLoc = currentLocator();
-      if (cLoc) handleProgression(cLoc);
-    } else {
-      handleScrollAffordances(cache.current.settings.scroll);
-    }
-  };
-  const handleTocEntryOnNav = useCallback((link) => {
-    if (!link) return;
+  const handleTocEntryOnNav = useCallback((locator) => {
+    if (!locator) return;
     if (cache.current.tocTree) {
-      const findMatch = (items) => {
+      const findMatch = (items, link) => {
         for (const item of items) {
-          if (item.href === link.href) {
+          if (item.href === link?.href) {
             return item;
           }
           if (item.children) {
-            const match2 = findMatch(item.children);
-            if (match2) {
-              return match2;
+            const match = findMatch(item.children, link);
+            if (match) {
+              return match;
             }
           }
         }
         return void 0;
       };
-      const match = findMatch(cache.current.tocTree);
-      if (match) dispatch(setTocEntry(match.id));
+      const currentMatch = findMatch(cache.current.tocTree, new Link(locator));
+      if (currentMatch) {
+        dispatch(setTocEntry(currentMatch.id));
+        return;
+      }
+      if (navLayout() === EPUBLayout.fixed) {
+        const positions = currentPositions();
+        if (positions && positions.length === 2) {
+          const otherPosition = positions[0] === locator.locations.position ? positions[1] : positions[0];
+          const otherPositionInList = cache.current.positionsList.find((pos) => pos.locations.position === otherPosition);
+          if (otherPositionInList) {
+            const match = findMatch(cache.current.tocTree, new Link(otherPositionInList));
+            if (match) {
+              dispatch(setTocEntry(match.id));
+              return;
+            }
+          }
+        }
+      }
     }
-  }, [dispatch]);
+  }, [dispatch, currentPositions, navLayout]);
   const handleFXLProgression = useCallback((locator) => {
     handleProgression(locator);
-    handleTocEntryOnNav(new Link(locator));
+    handleTocEntryOnNav(locator);
     localData.set(localDataKey.current, locator);
   }, [handleProgression, handleTocEntryOnNav]);
   onFXLPositionChange(handleFXLProgression);
+  const initReadingEnv = async () => {
+    if (navLayout() === EPUBLayout.fixed) {
+      const cLoc = currentLocator();
+      if (cLoc) {
+        handleFXLProgression(cLoc);
+      }
+    } else {
+      handleScrollAffordances(cache.current.settings.scroll);
+    }
+  };
   const p = new Peripherals(useAppStore(), RSPrefs.actions, {
     moveTo: (direction) => {
       switch (direction) {
@@ -4186,7 +4190,7 @@ var StatefulReader = ({
     positionChanged: async function(locator) {
       const currentLocator2 = localData.get(localDataKey.current);
       if (currentLocator2?.href !== locator.href) {
-        handleTocEntryOnNav(new Link(locator));
+        handleTocEntryOnNav(locator);
       }
       if (navLayout() === EPUBLayout.reflowable) {
         const debouncedHandleProgression = (0, import_debounce.default)(
@@ -4207,6 +4211,7 @@ var StatefulReader = ({
       return true;
     },
     click: function(_e) {
+      navLayout() === EPUBLayout.fixed && handleTap(_e);
       return true;
     },
     zoom: function(_scale) {
@@ -4298,16 +4303,19 @@ var StatefulReader = ({
   useEffect(() => {
     cache.current.settings.wordSpacing = wordSpacing;
   }, [wordSpacing]);
+  useEffect(() => {
+    cache.current.positionsList = positionsList || [];
+  }, [positionsList]);
   useEffect(() => {
     cache.current.tocTree = tocTree;
     if (tocEntry) return;
     const knownPosition = localData.get(localDataKey.current);
     if (knownPosition) {
-      handleTocEntryOnNav(new Link(knownPosition));
+      handleTocEntryOnNav(knownPosition);
     } else {
       const initialTocEntry = tocTree?.[0];
       if (initialTocEntry) {
-        handleTocEntryOnNav(new Link({ href: initialTocEntry.href }));
+        handleTocEntryOnNav(new Locator({ href: initialTocEntry.href, type: "" }));
       }
     }
   }, [tocTree, tocEntry, handleTocEntryOnNav]);
@@ -4359,13 +4367,13 @@ var StatefulReader = ({
     const pubTitle = publication.current.metadata.title.getTranslation("en");
     dispatch(setRunningHead(pubTitle));
     dispatch(setProgression({ currentPublication: pubTitle }));
-    let positionsList;
+    let positionsList2;
     const fetchPositions = async () => {
-      positionsList = await publication.current?.positionsFromManifest();
-      if (positionsList && positionsList.length > 0) {
-        dispatch(setProgression({ totalPositions: positionsList.length }));
+      positionsList2 = await publication.current?.positionsFromManifest();
+      if (positionsList2 && positionsList2.length > 0) {
+        dispatch(setProgression({ totalPositions: positionsList2.length }));
       }
-      const deserializedPositionsList = deserializePositions(positionsList);
+      const deserializedPositionsList = deserializePositions(positionsList2);
       dispatch(setPositionsList(deserializedPositionsList));
     };
     fetchPositions().catch(console.error).then(() => {
@@ -4373,7 +4381,7 @@ var StatefulReader = ({
       const initialPosition = localData.get(localDataKey.current);
       let idCounter = 0;
       const idGenerator = () => `toc-${++idCounter}`;
-      const tocTree2 = createTocTree(publication.current?.tableOfContents?.items || [], idGenerator, positionsList);
+      const tocTree2 = createTocTree(publication.current?.tableOfContents?.items || [], idGenerator, positionsList2);
       dispatch(setTocTree(tocTree2));
       const initialConstraint = cache.current.arrowsOccupySpace ? arrowsWidth.current : 0;
       const themeKeys = isFXL2 ? fxlThemeKeys : reflowThemeKeys;
@@ -4400,7 +4408,9 @@ var StatefulReader = ({
         layoutStrategy: cache.current.settings.layoutStrategy,
         letterSpacing: cache.current.settings.publisherStyles ? void 0 : cache.current.settings.letterSpacing,
         lineHeight: cache.current.settings.publisherStyles ? void 0 : cache.current.settings.lineHeight === null ? null : lineHeightOptions[cache.current.settings.lineHeight],
-        lineLength: cache.current.settings.lineLength,
+        optimalLineLength: cache.current.settings.lineLength?.optimal,
+        maximalLineLength: cache.current.settings.lineLength?.max?.isDisabled ? null : cache.current.settings.lineLength?.max?.chars,
+        minimalLineLength: cache.current.settings.lineLength?.min?.isDisabled ? null : cache.current.settings.lineLength?.min?.chars,
         paragraphIndent: cache.current.settings.publisherStyles ? void 0 : cache.current.settings.paragraphIndent,
         paragraphSpacing: cache.current.settings.publisherStyles ? void 0 : cache.current.settings.paragraphSpacing,
         scroll: cache.current.settings.scroll,
@@ -4420,7 +4430,7 @@ var StatefulReader = ({
         container: container.current,
         publication: publication.current,
         listeners,
-        positionsList,
+        positionsList: positionsList2,
         initialPosition,
         preferences,
         defaults,
@@ -4439,29 +4449,40 @@ var StatefulReader = ({
       EpubNavigatorDestroy(() => p.destroy());
     };
   }, [rawManifest, selfHref, RSPrefs, fxlThemeKeys, reflowThemeKeys]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(I18nProvider, { locale: RSPrefs.locale, children: /* @__PURE__ */ jsx(ThPluginProvider, { children: /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StatefulDockingWrapper, { children: /* @__PURE__ */ jsxs("div", { id: "reader-main", children: [
-    /* @__PURE__ */ jsx(StatefulReaderHeader, {}),
-    isPaged ? /* @__PURE__ */ jsx("nav", { className: arrowStyles2.container, id: arrowStyles2.left, children: /* @__PURE__ */ jsx(
-      StatefulReaderArrowButton,
-      {
-        direction: "left",
-        occupySpace: arrowsOccupySpace || false,
-        isDisabled: atPublicationStart,
-        onPress: () => goLeft(!reducedMotion, activateImmersiveOnAction)
-      }
-    ) }) : /* @__PURE__ */ jsx(Fragment, {}),
-    /* @__PURE__ */ jsx("article", { id: "wrapper", "aria-label": en_default.reader.app.publicationWrapper, children: /* @__PURE__ */ jsx("div", { id: "container", ref: container }) }),
-    isPaged ? /* @__PURE__ */ jsx("nav", { className: arrowStyles2.container, id: arrowStyles2.right, children: /* @__PURE__ */ jsx(
-      StatefulReaderArrowButton,
-      {
-        direction: "right",
-        occupySpace: arrowsOccupySpace || false,
-        isDisabled: atPublicationEnd,
-        onPress: () => goRight(!reducedMotion, activateImmersiveOnAction)
-      }
-    ) }) : /* @__PURE__ */ jsx(Fragment, {}),
-    isPaged ? /* @__PURE__ */ jsx(StatefulReaderFooter, {}) : /* @__PURE__ */ jsx(Fragment, {})
-  ] }) }) }) }) }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(I18nProvider, { locale: RSPrefs.locale, children: /* @__PURE__ */ jsx(ThPluginProvider, { children: /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StatefulDockingWrapper, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: "reader-main",
+      className: classNames9(
+        isFXL ? "isFXL" : "isReflow",
+        isImmersive ? "isImmersive" : "",
+        isHovering ? "isHovering" : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsx(StatefulReaderHeader, {}),
+        isPaged ? /* @__PURE__ */ jsx("nav", { className: arrowStyles2.container, id: arrowStyles2.left, children: /* @__PURE__ */ jsx(
+          StatefulReaderArrowButton,
+          {
+            direction: "left",
+            occupySpace: arrowsOccupySpace || false,
+            isDisabled: atPublicationStart,
+            onPress: () => goLeft(!reducedMotion, activateImmersiveOnAction)
+          }
+        ) }) : /* @__PURE__ */ jsx(Fragment, {}),
+        /* @__PURE__ */ jsx("article", { id: "wrapper", "aria-label": en_default.reader.app.publicationWrapper, children: /* @__PURE__ */ jsx("div", { id: "container", ref: container }) }),
+        isPaged ? /* @__PURE__ */ jsx("nav", { className: arrowStyles2.container, id: arrowStyles2.right, children: /* @__PURE__ */ jsx(
+          StatefulReaderArrowButton,
+          {
+            direction: "right",
+            occupySpace: arrowsOccupySpace || false,
+            isDisabled: atPublicationEnd,
+            onPress: () => goRight(!reducedMotion, activateImmersiveOnAction)
+          }
+        ) }) : /* @__PURE__ */ jsx(Fragment, {}),
+        isPaged ? /* @__PURE__ */ jsx(StatefulReaderFooter, {}) : /* @__PURE__ */ jsx(Fragment, {})
+      ]
+    }
+  ) }) }) }) }) });
 };
 var BookUrlConverter = () => {
   const [bookUrl, setBookUrl] = useState("");