@edrlab/thorium-web 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/Epub/index.mjs

@@ -1,42 +1,42 @@
-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, setReducedTransparency, setReducedMotion, setMonochrome, setForcedColors, setContrast, setColorScheme, setBreakpoint, setImmersive, setHovering, setArrows, setProgression, setTocEntry, useAppStore, toggleActionOpen, setDirection, setPlatformModifier, setRTL, setFXL, setRunningHead, setTocTree, setOverflow, setPositionsList, setLoading, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from '../../chunk-O4MBY6P4.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-O4MBY6P4.mjs';
-import { defaultFontFamilyOptions, usePreferences, defaultLetterSpacing, defaultLineHeights, defaultParagraphIndent, defaultParagraphSpacing, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, usePreferenceKeys, buildThemeObject, defaultWordSpacing, defaultFontSize, useTheming } from '../../chunk-PGZF5NO2.mjs';
-export { ThPreferencesProvider, usePreferences, useTheming } from '../../chunk-PGZF5NO2.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-BVSROK7Z.mjs';
+import { require_debounce, useAppSelector, useAppDispatch, setColumnCount, setFontFamily, setFontWeight, setHyphens, setScroll, setLetterSpacing, setPublisherStyles, setLineHeight, setParagraphIndent, setParagraphSpacing, setSettingsContainer, setTextAlign, setTextNormalization, setTheme, setWordSpacing, setFontSize, setFullscreen, setActionOpen, dockAction, setReducedTransparency, setReducedMotion, setMonochrome, setForcedColors, setContrast, setColorScheme, setBreakpoint, setTimeline, setImmersive, setHovering, setArrows, toggleImmersive, setProgression, useAppStore, toggleActionOpen, setDirection, setPlatformModifier, setRTL, setFXL, setRunningHead, setOverflow, setScrollAffordance, setPublicationStart, setPublicationEnd, setPositionsList, setLoading, setTocEntry, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from '../../chunk-OCASVHBV.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, setLetterSpacing, setLineHeight, setLineLength, setLoading, setMonochrome, setOverflow, setParagraphIndent, setParagraphSpacing, setPlatformModifier, setPositionsList, setProgression, setPublicationEnd, setPublicationStart, setPublisherStyles, setRTL, setReducedMotion, setReducedTransparency, setRunningHead, setScroll, setScrollAffordance, setSettingsContainer, setTextAlign, setTextNormalization, setTheme, setTimeline, setTocEntry, setTocTree, setWordSpacing, settingsSlice, themeSlice, toggleActionOpen, toggleImmersive, useAppDispatch, useAppSelector, useAppStore } from '../../chunk-OCASVHBV.mjs';
+import { defaultFontFamilyOptions, usePreferences, defaultLetterSpacing, defaultLineHeights, defaultParagraphIndent, defaultParagraphSpacing, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, usePreferenceKeys, buildThemeObject, defaultWordSpacing, defaultFontSize, useTheming } from '../../chunk-TXILKP4F.mjs';
+export { ThPreferencesProvider, usePreferences, useTheming } from '../../chunk-TXILKP4F.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, ThLoader, ThGrid, ThInteractiveOverlay, ThHeader, ThRunningHead, ThFooter, ThPagination, ThProgression } from '../../chunk-SDVDRPT5.mjs';
 import '../../chunk-MLEYTQGK.mjs';
-import { makeBreakpointsMap, localData, isKeyboardTriggered, isActiveElement, isInteractiveElement } from '../../chunk-GHEGQBCW.mjs';
-export { isActiveElement, isInteractiveElement, isKeyboardTriggered, localData, makeBreakpointsMap } from '../../chunk-GHEGQBCW.mjs';
+import { makeBreakpointsMap, isKeyboardTriggered, isActiveElement, isInteractiveElement } from '../../chunk-NOV43IG4.mjs';
+export { isActiveElement, isInteractiveElement, isKeyboardTriggered, makeBreakpointsMap } from '../../chunk-NOV43IG4.mjs';
 import { propsToCSSVars } from '../../chunk-TTGURRX3.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, useFullscreen, usePrevious, useLocalStorage, useTimeline } from '../../chunk-NA3KMUS4.mjs';
+export { useEpubNavigator } from '../../chunk-NA3KMUS4.mjs';
 import '../../chunk-BNPR6V7V.mjs';
 import '../../chunk-NQ2ZSGCX.mjs';
-import { ThDockingTypes, ThSheetTypes } from '../../chunk-TWGRY5SW.mjs';
-import { __commonJS, __toESM } from '../../chunk-3QS3WKRC.mjs';
-import React48, { createContext, useCallback, useRef, useContext, useEffect, useMemo, useState } from 'react';
+import { __commonJS, __toESM, ThDockingTypes, ThSheetTypes } from '../../chunk-RQFPGXWN.mjs';
+import React49, { createContext, useState, useMemo, useCallback, useEffect, useRef, useContext, isValidElement, cloneElement } from 'react';
 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 settingsStyles3 from '../../settings.module-O2SOKTIN.module.css';
+import { ListBox, ListBoxItem, Radio, Text, useFilter, Tree, TreeItem, TreeItemContent, Button, Collection, Link, Keyboard, Toolbar } from 'react-aria-components';
 import { fontWeightRangeConfig, TextAlignment } from '@readium/navigator';
-import classNames9 from 'classnames';
-import readerSharedUI3 from '../../readerSharedUI.module-MCLGNG22.module.css';
-import '../../reader-QFK7DGLX.css';
-import arrowStyles2 from '../../readerArrowButton.module-NHAUIQXS.module.css';
-import { I18nProvider } from 'react-aria';
-import { Link, EPUBLayout, Locator, HttpFetcher, Manifest, Publication, ReadingProgression } from '@readium/shared';
+import classNames10 from 'classnames';
+import readerSharedUI3 from '../../readerSharedUI.module-Y2VDWFS5.module.css';
+import '../../reader-NGCQJKLX.css';
+import arrowStyles2 from '../../readerArrowButton.module-EFLOIADG.module.css';
+import { I18nProvider, useFocusWithin } from 'react-aria';
+import { HttpFetcher, Manifest, Publication, ReadingProgression, EPUBLayout, Link as Link$1 } from '@readium/shared';
 import dockingStyles from '../../docking.module-TDNYZX4H.module.css';
 import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
-import readerHeaderStyles from '../../readerHeader.module-OBKZATSW.module.css';
-import overflowMenuStyles from '../../overflowMenu.module-XQRI7RJJ.module.css';
-import progressionStyles from '../../readerProgression.module-S5R3Y6JI.module.css';
+import readerHeaderStyles from '../../readerHeader.module-K7OLOIJP.module.css';
+import overflowMenuStyles from '../../overflowMenu.module-FO27A2A3.module.css';
+import readerPaginationStyles2 from '../../readerPagination.module-W4IAEOSH.module.css';
+import progressionStyles from '../../readerProgression.module-7PU7L74S.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';
-import bookUrlConverterStyles from '../../bookUrlConverter.module-J46O27CR.module.css';
-import readerLoaderStyles from '../../readerLoader.module-U6LLXOVQ.module.css';
+import sheetStyles2 from '../../sheets.module-NA32WOSZ.module.css';
+import tocStyles from '../../toc.module-KNW5CKIY.module.css';
+import readerLoaderStyles from '../../readerLoader.module-KDBPCQZJ.module.css';
+import publicationGridStyles from '../../publicationGrid.module-T6ISNRGM.module.css';
 
 // node_modules/.pnpm/object-path@0.11.8/node_modules/object-path/index.js
 var require_object_path = __commonJS({
@@ -434,6 +434,251 @@ var require_dist = __commonJS({
     });
   }
 });
+
+// src/resources/locales/en.json
+var en_default = {
+  reader: {
+    app: {
+      loading: "Loading",
+      publicationWrapper: "You\u2019re now in the publication.",
+      docking: {
+        dockingLeft: "Docked panel left",
+        dockingRight: "Docked panel right",
+        dockingEmpty: "Currently empty",
+        dockingClosed: "Is closed, contains {{ action }}",
+        dockingCollapsed: "Is Collapsed, contains {{ action }}"
+      },
+      header: {
+        label: "Top bar",
+        runningHead: "Running head",
+        runningHeadFallback: "...",
+        actions: "Actions"
+      },
+      footer: {
+        label: "Bottom bar"
+      },
+      progression: {
+        wrapper: "Current progression",
+        of: "{{ current }} of {{ reference }}",
+        referenceFallback: "current chapter",
+        pubFallback: "the publication"
+      },
+      docker: {
+        wrapper: "Docking options",
+        dockToLeft: {
+          trigger: "Dock to the left",
+          tooltip: "Dock left"
+        },
+        dockToRight: {
+          trigger: "Dock to the right",
+          tooltip: "Dock Right"
+        },
+        popover: {
+          trigger: "Display in a window",
+          tooltip: "Pop over"
+        },
+        fullscreen: {
+          trigger: "Display over contents",
+          tooltip: "Overlay"
+        },
+        close: {
+          trigger: "Close",
+          tooltip: "Close"
+        }
+      },
+      back: {
+        trigger: "Back"
+      }
+    },
+    navigation: {
+      goForward: "Go forward",
+      goBackward: "Go backward",
+      scroll: {
+        wrapper: "Navigate through the publication",
+        prevLabel: "Previous",
+        nextLabel: "Next",
+        prevA11yLabel: "Go to the previous resource",
+        nextA11yLabel: "Go to the next resource"
+      }
+    },
+    fullscreen: {
+      tooltip: "Fullscreen",
+      trigger: "Toggle fullscreen mode",
+      close: "Exit fullscreen mode"
+    },
+    toc: {
+      tooltip: "Table of contents",
+      trigger: "Table of contents",
+      close: "Close table of contents",
+      heading: "Table of contents",
+      entries: "Entries in the table",
+      empty: "The table of contents was not provided for this publication.",
+      search: {
+        label: "Search",
+        placeholder: "Search",
+        clear: "Clear"
+      }
+    },
+    jumpToPosition: {
+      tooltip: "Jump to\u2026",
+      trigger: "Jump to position",
+      heading: "Jump to position",
+      go: "Go",
+      close: "Close jump to position",
+      label: "Select a position from {{ positionStart }} to {{ positionEnd }}:"
+    },
+    overflowMenu: {
+      active: {
+        tooltip: "More actions",
+        trigger: "Toggle menu"
+      },
+      hint: {
+        tooltip: "Toggle actions",
+        trigger: "Display actions"
+      }
+    },
+    layoutStrategy: {
+      tooltip: "Layout",
+      trigger: "Layout strategy",
+      close: "Close layout strategy menu",
+      heading: "Layout strategy",
+      title: "Strategy",
+      margin: "Margin",
+      lineLength: "Line length",
+      columns: "Columns",
+      minChars: "Disable minimal line length",
+      maxChars: "Disable maximal line length",
+      minimalLineLength: {
+        title: "Minimal line length",
+        increase: "Increase minimal line length",
+        decrease: "Decrease maximal line length"
+      },
+      optimalLineLength: {
+        title: "Optimal line length",
+        increase: "Increase optimal line length",
+        decrease: "Decrease optimal line length"
+      },
+      maximalLineLength: {
+        title: "Maximal line length",
+        increase: "Increase maximal line length",
+        decrease: "Decrease maximal line length"
+      }
+    },
+    settings: {
+      tooltip: "Settings",
+      trigger: "Settings menu",
+      close: "Close settings menu",
+      heading: "Display settings",
+      themes: {
+        title: "Themes",
+        auto: "Auto",
+        light: "Light",
+        sepia: "Sepia",
+        paper: "Paper",
+        dark: "Dark",
+        contrast1: "Contrast 1",
+        contrast2: "Contrast 2",
+        contrast3: "Contrast 3"
+      },
+      zoom: {
+        title: "Zoom",
+        increase: "Increase zoom",
+        decrease: "Decrease zoom"
+      },
+      fontSize: {
+        title: "Font size",
+        increase: "Increase font size",
+        decrease: "Decrease font size"
+      },
+      fontFamily: {
+        title: "Font family",
+        labels: {
+          publisher: "Publisher\u2019s font",
+          oldStyle: "Old style serif",
+          modern: "Modern serif",
+          sans: "Sans-serif",
+          humanist: "Humanist sans-serif",
+          monospace: "Monospace"
+        }
+      },
+      fontWeight: {
+        title: "Font weight",
+        increase: "Increase font weight",
+        decrease: "Decrease font weight"
+      },
+      normalizeText: {
+        title: "Text normalization",
+        label: "Remove all text formatting"
+      },
+      align: {
+        title: "Text alignment",
+        publisher: "Default",
+        left: "Left",
+        justify: "Justify",
+        right: "Right"
+      },
+      hyphens: {
+        title: "Hyphenation",
+        label: "Enable hyphens"
+      },
+      text: {
+        title: "Text",
+        advanced: {
+          tooltip: "More options",
+          trigger: "More formatting options"
+        }
+      },
+      lineHeight: {
+        title: "Line height",
+        publisher: "Default",
+        small: "Tight",
+        medium: "Balanced",
+        large: "Loose"
+      },
+      paraSpacing: {
+        title: "Paragraph spacing",
+        increase: "Increase paragraph spacing",
+        decrease: "Decrease paragraph spacing"
+      },
+      paraIndent: {
+        title: "Paragraph indent",
+        increase: "Increase paragraph indent",
+        decrease: "Decrease paragraph indent"
+      },
+      wordSpacing: {
+        title: "Word spacing",
+        increase: "Increase word spacing",
+        decrease: "Decrease word spacing"
+      },
+      letterSpacing: {
+        title: "Letter spacing",
+        increase: "Increase letter spacing",
+        decrease: "Decrease letter spacing"
+      },
+      publisherStyles: {
+        label: "Use original formatting"
+      },
+      spacing: {
+        title: "Spacing",
+        advanced: {
+          tooltip: "More options",
+          trigger: "More spacing options"
+        }
+      },
+      layout: {
+        title: "Layout",
+        scrolled: "Scrollable",
+        paginated: "Paginated"
+      },
+      column: {
+        title: "Columns",
+        auto: "Auto",
+        one: "1 col",
+        two: "2 cols"
+      }
+    }
+  }
+};
 var SvgDocumentScanner = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "inherit", ...props, children: /* @__PURE__ */ jsx("path", { d: "M80-720v-200h200v80H160v120H80Zm720 0v-120H680v-80h200v200h-80ZM80-40v-200h80v120h120v80H80Zm600 0v-80h120v-120h80v200H680ZM280-240h400v-480H280v480Zm0 80q-33 0-56.5-23.5T200-240v-480q0-33 23.5-56.5T280-800h400q33 0 56.5 23.5T760-720v480q0 33-23.5 56.5T680-160H280Zm80-400h240v-80H360v80Zm0 120h240v-80H360v80Zm0 120h240v-80H360v80Zm-80 80v-480 480Z" }) });
 var document_scanner_default = SvgDocumentScanner;
 var SvgArticle = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "inherit", ...props, children: /* @__PURE__ */ jsx("path", { d: "M280-280h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm-80 480q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z" }) });
@@ -467,26 +712,61 @@ var StatefulRadioGroup = ({
     }
   ) });
 };
+
+// src/components/Epub/Settings/StatefulColumns.tsx
+var import_debounce = __toESM(require_debounce());
 var StatefulColumns = () => {
-  const isScroll = useAppSelector((state) => state.settings.scroll);
+  const scroll = useAppSelector((state) => state.settings.scroll);
   const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const isScroll = scroll && !isFXL;
   const columnCount = useAppSelector((state) => state.settings.columnCount) || "auto";
+  const [effectiveValue, setEffectiveValue] = useState(columnCount);
+  const fontSize = useAppSelector((state) => state.settings.fontSize);
+  const fontFamily = useAppSelector((state) => state.settings.fontFamily);
+  const wordSpacing = useAppSelector((state) => state.settings.wordSpacing);
+  const letterSpacing = useAppSelector((state) => state.settings.letterSpacing);
+  const publisherStyles = useAppSelector((state) => state.settings.publisherStyles);
+  const layoutSettings = useMemo(() => {
+    return {
+      fontSize,
+      fontFamily,
+      wordSpacing,
+      letterSpacing,
+      publisherStyles
+    };
+  }, [fontSize, fontFamily, wordSpacing, letterSpacing, publisherStyles]);
   const dispatch = useAppDispatch();
-  const { submitPreferences } = useEpubNavigator();
+  const { submitPreferences, getSetting } = useEpubNavigator();
+  const updateEffectiveValue = useCallback((preference, setting) => {
+    const derivedValue = preference === "auto" || setting === null ? "auto" : setting.toString();
+    setEffectiveValue(derivedValue);
+  }, []);
   const updatePreference = useCallback(async (value) => {
     const colCount = value === "auto" ? null : Number(value);
     await submitPreferences({ columnCount: colCount });
+    updateEffectiveValue(value, getSetting("columnCount"));
     dispatch(setColumnCount(value));
-  }, [submitPreferences, dispatch]);
+  }, [submitPreferences, getSetting, updateEffectiveValue, dispatch]);
+  const debouncedUpdate = useCallback(() => {
+    const update = () => updateEffectiveValue(columnCount, getSetting("columnCount"));
+    (0, import_debounce.default)(update, 50)();
+  }, [columnCount, layoutSettings, getSetting, updateEffectiveValue]);
+  useEffect(() => {
+    debouncedUpdate();
+    window.addEventListener("resize", debouncedUpdate);
+    return () => {
+      window.removeEventListener("resize", debouncedUpdate);
+    };
+  }, [debouncedUpdate]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulRadioGroup,
     {
       standalone: true,
       label: en_default.reader.settings.column.title,
       orientation: "horizontal",
-      value: columnCount,
+      value: effectiveValue,
       onChange: async (val) => await updatePreference(val),
-      isDisabled: isScroll && !isFXL,
+      isDisabled: isScroll,
       items: [
         {
           icon: document_scanner_default,
@@ -501,7 +781,11 @@ var StatefulColumns = () => {
         {
           icon: menu_book_default,
           label: en_default.reader.settings.column.two,
-          value: "2"
+          value: "2",
+          // This is subpar when the columnCount is 1 though because
+          // it won’t be disabled, but it’s the best we can do with
+          // the preferences API at the moment
+          isDisabled: effectiveValue === "1" && columnCount === "2"
         }
       ]
     }
@@ -582,10 +866,10 @@ var StatefulSlider = ({
     {
       ...props,
       ...standalone ? { label } : { "aria-label": label },
-      className: classNames9(settingsStyles3.readerSettingsSlider, standalone ? settingsStyles3.readerSettingsGroup : ""),
+      className: classNames10(settingsStyles3.readerSettingsSlider, standalone ? settingsStyles3.readerSettingsGroup : ""),
       compounds: {
         label: {
-          className: classNames9(settingsStyles3.readerSettingsLabel, settingsStyles3.readerSettingsSliderLabel)
+          className: classNames10(settingsStyles3.readerSettingsLabel, settingsStyles3.readerSettingsSliderLabel)
         },
         output: {
           className: settingsStyles3.readerSettingsSliderOutput
@@ -678,15 +962,16 @@ var contract_default = SvgContract;
 var SvgDocs = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "inherit", ...props, children: /* @__PURE__ */ jsx("path", { d: "M320-440h320v-80H320v80Zm0 120h320v-80H320v80Zm0 120h200v-80H320v80ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z" }) });
 var docs_default = SvgDocs;
 var StatefulLayout = () => {
-  const isScroll = useAppSelector((state) => state.settings.scroll);
+  const scroll = useAppSelector((state) => state.settings.scroll);
+  const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const isScroll = scroll && !isFXL;
   const dispatch = useAppDispatch();
-  const { getSetting, submitPreferences, handleScrollAffordances } = useEpubNavigator();
+  const { getSetting, submitPreferences } = useEpubNavigator();
   const updatePreference = useCallback(async (value) => {
     const derivedValue = value === "scroll_option" /* scroll */;
     await submitPreferences({ scroll: derivedValue });
     dispatch(setScroll(getSetting("scroll")));
-    handleScrollAffordances(derivedValue);
-  }, [submitPreferences, getSetting, dispatch, handleScrollAffordances]);
+  }, [submitPreferences, getSetting, dispatch]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulRadioGroup,
     {
@@ -720,7 +1005,7 @@ var StatefulNumberField = ({
     {
       ...props,
       ...standalone ? { label } : { "aria-label": label },
-      className: classNames9(settingsStyles3.readerSettingsNumbfield, standalone ? settingsStyles3.readerSettingsGroup : ""),
+      className: classNames10(settingsStyles3.readerSettingsNumbfield, standalone ? settingsStyles3.readerSettingsGroup : ""),
       compounds: {
         group: {
           className: settingsStyles3.readerSettingsGroupWrapper
@@ -1026,16 +1311,16 @@ var StatefulGroupWrapper = ({
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     ThSettingsWrapper,
     {
-      className: classNames9(settingsStyles3.readerSettingsGroup, settingsStyles3.readerSettingsAdvancedGroup),
+      className: classNames10(settingsStyles3.readerSettingsGroup, settingsStyles3.readerSettingsAdvancedGroup),
       items: componentsMap,
       prefs: resolvedPrefs,
       compounds: {
         label: heading,
         heading: {
-          className: classNames9(settingsStyles3.readerSettingsLabel, settingsStyles3.readerSettingsGroupLabel)
+          className: classNames10(settingsStyles3.readerSettingsLabel, settingsStyles3.readerSettingsGroupLabel)
         },
         button: {
-          className: classNames9(readerSharedUI3.icon, settingsStyles3.readerSettingsAdvancedIcon),
+          className: classNames10(readerSharedUI3.icon, settingsStyles3.readerSettingsAdvancedIcon),
           "aria-label": moreLabel,
           compounds: {
             tooltipTrigger: {
@@ -1398,11 +1683,11 @@ var StatefulTheme = ({ mapArrowNav }) => {
       label: en_default.reader.settings.themes.title,
       value: theme,
       onChange: async (val) => await updatePreference(val),
-      children: /* @__PURE__ */ jsx("div", { className: classNames9(settingsStyles3.readerSettingsRadioWrapper, settingsStyles3.readerSettingsThemesWrapper), children: themeItems.current.map(
+      children: /* @__PURE__ */ jsx("div", { className: classNames10(settingsStyles3.readerSettingsRadioWrapper, settingsStyles3.readerSettingsThemesWrapper), children: themeItems.current.map(
         (t) => /* @__PURE__ */ jsx(
           Radio,
           {
-            className: classNames9(
+            className: classNames10(
               settingsStyles3.readerSettingsRadio,
               settingsStyles3.readerSettingsThemeRadio
             ),
@@ -1639,7 +1924,7 @@ var DockHandle = ({
       className: dockingStyles.dockResizeHandle,
       disabled: !isResizable,
       tabIndex: isPopulated ? 0 : -1,
-      children: isResizable && hasDragIndicator && /* @__PURE__ */ jsx("div", { className: classNames9(dockingStyles.dockResizeHandleGrab, classFromFlow()) })
+      children: isResizable && hasDragIndicator && /* @__PURE__ */ jsx("div", { className: classNames10(dockingStyles.dockResizeHandleGrab, classFromFlow()) })
     }
   ) });
 };
@@ -1731,7 +2016,7 @@ var DockPanel = ({
           {
             id: flow,
             "aria-label": makeDockLabel(),
-            className: classNames9(dockingStyles.dockPanelContainer, dockClassName)
+            className: classNames10(dockingStyles.dockPanelContainer, dockClassName)
           }
         )
       }
@@ -1818,8 +2103,6 @@ var StatefulActionIcon = ({
 }) => {
   const RSPrefs = usePreferences();
   const triggerRef = useRef(null);
-  useAppSelector((state) => state.reader.isImmersive);
-  useAppSelector((state) => state.reader.isHovering);
   const dispatch = useAppDispatch();
   const handleClassNameFromState = () => {
     let className = "";
@@ -1850,7 +2133,7 @@ var StatefulActionIcon = ({
     ThActionButton,
     {
       ref: triggerRef,
-      className: classNames9(readerSharedUI3.icon, handleClassNameFromState(), props.className),
+      className: classNames10(readerSharedUI3.icon, handleClassNameFromState(), props.className),
       onPress: props.onPress || defaultOnPressFunc,
       onKeyDown: blurOnEsc,
       onFocus: handleImmersive,
@@ -1874,8 +2157,6 @@ var StatefulActionIcon = ({
 var StatefulOverflowMenu = ({
   id,
   className,
-  actionFallback,
-  display,
   items,
   triggerRef
 }) => {
@@ -1886,7 +2167,7 @@ var StatefulOverflowMenu = ({
       isOpen: value
     }));
   };
-  if (items.length > 0 && display) {
+  if (items.length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
       ThMenu,
       {
@@ -1907,7 +2188,7 @@ var StatefulOverflowMenu = ({
           button: /* @__PURE__ */ jsx(
             StatefulActionIcon,
             {
-              className: className ? className : overflowMenuStyles.activeButton,
+              className: classNames10(className, overflowMenuStyles.activeButton),
               "aria-label": en_default.reader.overflowMenu.active.trigger,
               placement: "bottom",
               tooltipLabel: en_default.reader.overflowMenu.active.tooltip,
@@ -1918,34 +2199,12 @@ var StatefulOverflowMenu = ({
         }
       }
     ) });
-  } else {
-    if (actionFallback) {
-      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-        StatefulActionIcon,
-        {
-          className: className ? className : overflowMenuStyles.hintButton,
-          "aria-label": en_default.reader.overflowMenu.hint.trigger,
-          placement: "bottom",
-          tooltipLabel: en_default.reader.overflowMenu.hint.tooltip,
-          visibility: "always" /* always */,
-          onPress: () => {
-            dispatch(toggleImmersive());
-          },
-          preventFocusOnPress: true,
-          children: /* @__PURE__ */ jsx(more_vert_default, { "aria-hidden": "true", focusable: "false" })
-        }
-      ) });
-    } else {
-      return /* @__PURE__ */ jsx(Fragment, {});
-    }
   }
 };
 var StatefulCollapsibleActionsBar = ({
   id,
   items,
-  overflowActionCallback,
   overflowMenuClassName,
-  overflowMenuDisplay,
   ...props
 }) => {
   const ref = useRef(null);
@@ -1963,9 +2222,7 @@ var StatefulCollapsibleActionsBar = ({
           {
             id,
             triggerRef: ref,
-            display: overflowMenuDisplay || true,
             className: overflowMenuClassName,
-            actionFallback: overflowActionCallback,
             items: []
           }
         )
@@ -1974,20 +2231,42 @@ var StatefulCollapsibleActionsBar = ({
     }
   ) });
 };
-var StatefulReaderHeader = () => {
+var StatefulReaderHeader = ({
+  layout
+}) => {
+  const headerRef = useRef(null);
   const { reflowActionKeys, fxlActionKeys } = usePreferenceKeys();
   const RSPrefs = usePreferences();
   const { actionsComponentsMap } = usePlugins();
+  const actionsMap = useAppSelector((state) => state.actions.keys);
+  const overflowMap = useAppSelector((state) => state.actions.overflow);
   const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const isScroll = useAppSelector((state) => state.settings.scroll);
   const runningHead = useAppSelector((state) => state.publication.runningHead);
   const isImmersive = useAppSelector((state) => state.reader.isImmersive);
   const isHovering = useAppSelector((state) => state.reader.isHovering);
+  const hasScrollAffordance = useAppSelector((state) => state.reader.hasScrollAffordance);
+  const actions = useActions({ ...actionsMap, ...overflowMap });
   const dispatch = useAppDispatch();
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithin() {
+      dispatch(setHovering(true));
+    },
+    onBlurWithin() {
+      if (actions.everyOpenDocked()) {
+        dispatch(setHovering(false));
+      }
+    }
+  });
   const setHover = () => {
-    dispatch(setHovering(true));
+    if (!hasScrollAffordance && actions.everyOpenDocked()) {
+      dispatch(setHovering(true));
+    }
   };
   const removeHover = () => {
-    dispatch(setHovering(false));
+    if (!hasScrollAffordance && actions.everyOpenDocked()) {
+      dispatch(setHovering(false));
+    }
   };
   const listActionItems = useCallback(() => {
     const actionKeys = isFXL ? fxlActionKeys : reflowActionKeys;
@@ -2007,38 +2286,62 @@ var StatefulReaderHeader = () => {
     }
     return actionsItems;
   }, [isFXL, fxlActionKeys, reflowActionKeys, actionsComponentsMap]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    ThHeader,
-    {
-      className: readerHeaderStyles.header,
-      id: "top-bar",
-      "aria-label": en_default.reader.app.header.label,
-      onMouseEnter: setHover,
-      onMouseLeave: removeHover,
-      children: [
-        /* @__PURE__ */ jsx(
-          ThRunningHead,
-          {
-            label: runningHead || en_default.reader.app.header.runningHeadFallback,
-            syncDocTitle: true,
-            "aria-label": en_default.reader.app.header.runningHead
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          StatefulCollapsibleActionsBar,
-          {
-            id: "reader-header-overflowMenu",
-            items: listActionItems(),
-            prefs: { ...RSPrefs.actions, displayOrder: isFXL ? RSPrefs.actions.fxlOrder : RSPrefs.actions.reflowOrder },
-            className: readerHeaderStyles.actionsWrapper,
-            "aria-label": en_default.reader.app.header.actions,
-            overflowActionCallback: isImmersive && !isHovering,
-            overflowMenuDisplay: !isImmersive || isHovering
-          }
-        )
-      ]
+  useEffect(() => {
+    if (isImmersive) {
+      const focusElement = document.activeElement;
+      if (focusElement && headerRef.current?.contains(focusElement)) {
+        focusElement.blur();
+      }
     }
-  ) });
+  }, [isImmersive]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ThInteractiveOverlay,
+      {
+        id: "reader-header-overlay",
+        className: "bar-overlay",
+        isActive: layout === "layered-ui" /* layered */ && isImmersive && !isHovering,
+        onMouseEnter: setHover,
+        onMouseLeave: removeHover
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ThHeader,
+      {
+        ref: headerRef,
+        className: readerHeaderStyles.header,
+        id: "top-bar",
+        "aria-label": en_default.reader.app.header.label,
+        onMouseEnter: setHover,
+        onMouseLeave: removeHover,
+        ...focusWithinProps,
+        children: [
+          /* @__PURE__ */ jsx(
+            ThRunningHead,
+            {
+              label: runningHead || en_default.reader.app.header.runningHeadFallback,
+              syncDocTitle: true,
+              "aria-label": en_default.reader.app.header.runningHead
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StatefulCollapsibleActionsBar,
+            {
+              id: "reader-header-overflowMenu",
+              items: listActionItems(),
+              prefs: {
+                ...RSPrefs.actions,
+                displayOrder: isFXL ? RSPrefs.actions.fxlOrder : RSPrefs.actions.reflowOrder
+              },
+              className: readerHeaderStyles.actionsWrapper,
+              "aria-label": en_default.reader.app.header.actions,
+              overflowMenuClassName: !isScroll || RSPrefs.affordances.scroll.hintInImmersive ? overflowMenuStyles.hintButton : void 0
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 var StatefulReaderArrowButton = ({
   direction,
@@ -2052,7 +2355,9 @@ var StatefulReaderArrowButton = ({
   const buttonRef = useRef(null);
   const isRTL = useAppSelector((state) => state.publication.isRTL);
   const hasArrows = useAppSelector((state) => state.reader.hasArrows);
-  const isScroll = useAppSelector((state) => state.settings.scroll);
+  const scroll = useAppSelector((state) => state.settings.scroll);
+  const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const isScroll = scroll && !isFXL;
   const wasScroll = usePrevious(isScroll);
   const dispatch = useAppDispatch();
   const [isHovering, setIsHovering] = useState(false);
@@ -2097,7 +2402,7 @@ var StatefulReaderArrowButton = ({
       onPress: (e) => onPress && handleOnPress(e, onPress),
       onHoverChange: (isHovering2) => setIsHovering(isHovering2),
       onKeyDown: blurOnEsc,
-      className: classNames9(className, handleClassNameFromSpaceProp(), handleClassNameFromState()),
+      className: classNames10(className, handleClassNameFromSpaceProp(), handleClassNameFromState()),
       isDisabled,
       preventFocusOnPress: true,
       ...props,
@@ -2116,7 +2421,9 @@ var StatefulReaderArrowButton = ({
   ) });
 };
 var import_json_templates2 = __toESM(require_dist());
-var StatefulReaderProgression = () => {
+var StatefulReaderProgression = ({
+  className
+}) => {
   const jsonTemplate = (0, import_json_templates2.default)(en_default.reader.app.progression.of);
   const progression = useAppSelector((state) => state.publication.progression);
   const [current, setCurrent] = useState("");
@@ -2141,32 +2448,174 @@ var StatefulReaderProgression = () => {
     {
       id: progressionStyles.current,
       "aria-label": en_default.reader.app.progression.wrapper,
+      className,
       children: jsonTemplate({ current, reference })
     }
   ) });
 };
-var StatefulReaderFooter = () => {
+var StatefulPagination = ({
+  ref,
+  links,
+  compounds,
+  children,
+  ...props
+}) => {
+  const previousButtonRef = useRef(null);
+  const nextButtonRef = useRef(null);
+  const updatedCompounds = {
+    ...compounds,
+    previousButton: {
+      ...compounds?.previousButton,
+      ref: previousButtonRef,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          previousButtonRef.current?.blur();
+        }
+      }
+    },
+    nextButton: {
+      ...compounds?.nextButton,
+      ref: nextButtonRef,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          nextButtonRef.current?.blur();
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ThPagination,
+    {
+      ref,
+      className: readerPaginationStyles2.pagination,
+      links,
+      compounds: updatedCompounds,
+      ...props,
+      children
+    }
+  );
+};
+var StatefulReaderFooter = ({
+  layout
+}) => {
+  const footerRef = useRef(null);
+  const isImmersive = useAppSelector((state) => state.reader.isImmersive);
+  const isHovering = useAppSelector((state) => state.reader.isHovering);
+  const hasScrollAffordance = useAppSelector((state) => state.reader.hasScrollAffordance);
+  const scroll = useAppSelector((state) => state.settings.scroll);
+  const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const isScroll = scroll && !isFXL;
+  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
+  const reducedMotion = useAppSelector((state) => state.theming.prefersReducedMotion);
+  const timeline = useAppSelector((state) => state.publication.unstableTimeline);
   const dispatch = useAppDispatch();
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithin() {
+      dispatch(setHovering(true));
+    },
+    onBlurWithin() {
+      dispatch(setHovering(false));
+    }
+  });
   const setHover = () => {
-    dispatch(setHovering(true));
+    if (!hasScrollAffordance) {
+      dispatch(setHovering(true));
+    }
   };
   const removeHover = () => {
-    dispatch(setHovering(false));
+    if (!hasScrollAffordance) {
+      dispatch(setHovering(false));
+    }
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    ThFooter,
-    {
-      id: "bottom-bar",
-      "aria-label": en_default.reader.app.footer.label,
-      onMouseEnter: setHover,
-      onMouseLeave: removeHover,
-      children: /* @__PURE__ */ jsx(StatefulReaderProgression, {})
+  const { previousLocator, nextLocator, go } = useEpubNavigator();
+  const updateLinks = useCallback(() => {
+    const links = {
+      previous: void 0,
+      next: void 0
+    };
+    const previous = previousLocator();
+    const next = nextLocator();
+    if (previous) {
+      links.previous = {
+        node: breakpoint !== "compact" /* compact */ && breakpoint !== "medium" /* medium */ ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: en_default.reader.navigation.scroll.prevA11yLabel }),
+          /* @__PURE__ */ jsx("span", { className: readerPaginationStyles2.paginationLabel, children: timeline?.previousItem?.title || previous.title || en_default.reader.navigation.scroll.prevLabel })
+        ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: readerPaginationStyles2.paginationLabel, children: en_default.reader.navigation.scroll.prevLabel }) }),
+        onPress: () => go(previous, !reducedMotion, () => {
+        })
+      };
     }
-  ) });
+    if (next) {
+      links.next = {
+        node: breakpoint !== "compact" /* compact */ && breakpoint !== "medium" /* medium */ ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: en_default.reader.navigation.scroll.nextA11yLabel }),
+          /* @__PURE__ */ jsx("span", { className: readerPaginationStyles2.paginationLabel, children: timeline?.nextItem?.title || next.title || en_default.reader.navigation.scroll.nextLabel })
+        ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: readerPaginationStyles2.paginationLabel, children: en_default.reader.navigation.scroll.nextLabel }) }),
+        onPress: () => go(next, !reducedMotion, () => {
+        })
+      };
+    }
+    return links;
+  }, [go, previousLocator, nextLocator, timeline, breakpoint, reducedMotion]);
+  useEffect(() => {
+    updateLinks();
+  }, [timeline, updateLinks]);
+  useEffect(() => {
+    if (isImmersive) {
+      const focusElement = document.activeElement;
+      if (focusElement && footerRef.current?.contains(focusElement)) {
+        focusElement.blur();
+      }
+    }
+  }, [isImmersive]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ThInteractiveOverlay,
+      {
+        id: "reader-footer-overlay",
+        className: "bar-overlay",
+        isActive: layout === "layered-ui" /* layered */ && isImmersive && !isHovering,
+        onMouseEnter: setHover,
+        onMouseLeave: removeHover
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ThFooter,
+      {
+        ref: footerRef,
+        id: "bottom-bar",
+        "aria-label": en_default.reader.app.footer.label,
+        onMouseEnter: setHover,
+        onMouseLeave: removeHover,
+        ...focusWithinProps,
+        children: isScroll && !isFXL ? /* @__PURE__ */ jsx(
+          StatefulPagination,
+          {
+            "aria-label": en_default.reader.navigation.scroll.wrapper,
+            links: updateLinks(),
+            compounds: {
+              listItem: {
+                className: readerPaginationStyles2.paginationListItem
+              },
+              previousButton: {
+                className: readerPaginationStyles2.previousButton,
+                preventFocusOnPress: true
+              },
+              nextButton: {
+                className: readerPaginationStyles2.nextButton,
+                preventFocusOnPress: true
+              }
+            },
+            children: /* @__PURE__ */ jsx(StatefulReaderProgression, { className: readerPaginationStyles2.progression })
+          }
+        ) : /* @__PURE__ */ jsx(StatefulReaderProgression, {})
+      }
+    )
+  ] });
 };
 
 // src/components/Epub/StatefulReader.tsx
-var import_debounce = __toESM(require_debounce());
+var import_debounce2 = __toESM(require_debounce());
 var SvgFullscreen = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "inherit", ...props, children: /* @__PURE__ */ jsx("path", { d: "M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z" }) });
 var fullscreen_default = SvgFullscreen;
 var SvgFullscreenExit = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "inherit", ...props, children: /* @__PURE__ */ jsx("path", { d: "M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z" }) });
@@ -2500,6 +2949,34 @@ var StatefulDocker = ({
     )
   ] }) });
 };
+var useWebkitPatch = (isOpen) => {
+  const scroll = useAppSelector((state) => state.settings.scroll);
+  const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const isScroll = scroll && !isFXL;
+  const {
+    getCframes
+  } = useEpubNavigator();
+  useEffect(() => {
+    if (isScroll && !isOpen) {
+      const container = document.getElementById("container");
+      if (!container) return;
+      const currentHeight = container.offsetHeight;
+      container.style.height = `${currentHeight - 1}px`;
+      setTimeout(() => {
+        container.style.height = "";
+        const frame = getCframes()?.[0];
+        if (!frame?.window?.document?.scrollingElement) return;
+        const currentScrollTop = frame.window.document.scrollingElement.scrollTop;
+        if (currentScrollTop > 1) {
+          frame.window.document.scrollingElement.scrollTop = currentScrollTop - 1;
+        } else {
+          frame.window.document.scrollingElement.scrollTop = currentScrollTop + 1;
+        }
+        frame.window.document.scrollingElement.scrollTop = currentScrollTop;
+      }, 0);
+    }
+  }, [isScroll, isOpen, getCframes]);
+};
 var StatefulPopoverSheet = ({
   id,
   triggerRef,
@@ -2521,7 +2998,8 @@ var StatefulPopoverSheet = ({
   const popoverHeaderRef = useRef(null);
   const popoverBodyRef = useRef(null);
   const popoverCloseRef = useRef(null);
-  if (React48.Children.toArray(children).length > 0) {
+  useWebkitPatch(!!isOpen);
+  if (React49.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThPopover,
       {
@@ -2534,7 +3012,7 @@ var StatefulPopoverSheet = ({
           updateState: resetFocus
         },
         placement: placement || "bottom",
-        className: classNames9(sheetStyles2.popOverSheet, className),
+        className: classNames10(sheetStyles2.popOverSheet, className),
         isOpen,
         onOpenChange,
         isKeyboardDismissDisabled: dismissEscapeKeyClose,
@@ -2564,7 +3042,7 @@ var StatefulPopoverSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: en_default.reader.app.back.trigger,
                   ref: popoverCloseRef,
-                  className: classNames9(className, readerSharedUI3.backButton),
+                  className: classNames10(className, readerSharedUI3.backButton),
                   "aria-label": en_default.reader.app.back.trigger,
                   onPress: onClosePress
                 }
@@ -2752,7 +3230,7 @@ var StatefulBottomSheet = ({
   const scrimClassName = useMemo(() => {
     return scrimPref.active ? sheetStyles2.bottomSheetScrim : "";
   }, [scrimPref]);
-  if (React48.Children.toArray(children).length > 0) {
+  if (React49.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThBottomSheet,
       {
@@ -2780,7 +3258,7 @@ var StatefulBottomSheet = ({
         prefersReducedMotion,
         compounds: {
           container: {
-            className: classNames9(sheetStyles2.bottomSheetModal, detentClassName),
+            className: classNames10(sheetStyles2.bottomSheetModal, detentClassName),
             ref: sheetContainerRef,
             style: {
               maxWidth: maxWidthPref
@@ -2792,15 +3270,15 @@ var StatefulBottomSheet = ({
             onKeyDown: onDragKeyCallback
           },
           content: {
-            className: classNames9(sheetStyles2.bottomSheet, className),
+            className: classNames10(sheetStyles2.bottomSheet, className),
             disableDrag: true
           },
           scroller: {
-            className: classNames9(sheetStyles2.bottomSheetScroller, sheetStyles2.sheetBody),
+            className: classNames10(sheetStyles2.bottomSheetScroller, sheetStyles2.sheetBody),
             draggable: false
           },
           backdrop: {
-            className: classNames9(sheetStyles2.bottomSheetBackdrop, scrimClassName),
+            className: classNames10(sheetStyles2.bottomSheetBackdrop, scrimClassName),
             style: { "--defaults-scrim": scrimPref.override }
           }
         },
@@ -2821,7 +3299,7 @@ var StatefulBottomSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: en_default.reader.app.back.trigger,
                   ref: bottomSheetCloseRef,
-                  className: classNames9(className, readerSharedUI3.backButton),
+                  className: classNames10(className, readerSharedUI3.backButton),
                   "aria-label": en_default.reader.app.back.trigger,
                   onPress: onClosePress
                 }
@@ -2864,7 +3342,8 @@ var StatefulFullScreenSheet = ({
   const fullScreenHeaderRef = useRef(null);
   const fullScreenBodyRef = useRef(null);
   const fullScreenCloseRef = useRef(null);
-  if (React48.Children.toArray(children).length > 0) {
+  useWebkitPatch(!!isOpen);
+  if (React49.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThModal,
       {
@@ -2883,7 +3362,7 @@ var StatefulFullScreenSheet = ({
         isOpen,
         onOpenChange,
         isDismissable: true,
-        className: classNames9(sheetStyles2.fullScreenSheet, className),
+        className: classNames10(sheetStyles2.fullScreenSheet, className),
         isKeyboardDismissDisabled: dismissEscapeKeyClose,
         style: {
           "--sheet-sticky-header": fullScreenHeaderRef.current ? `${fullScreenHeaderRef.current.clientHeight}px` : void 0
@@ -2906,7 +3385,7 @@ var StatefulFullScreenSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: en_default.reader.app.back.trigger,
                   ref: fullScreenCloseRef,
-                  className: classNames9(className, readerSharedUI3.backButton),
+                  className: classNames10(className, readerSharedUI3.backButton),
                   "aria-label": en_default.reader.app.back.trigger,
                   onPress: onClosePress
                 }
@@ -2959,7 +3438,7 @@ var StatefulDockedSheet = ({
       return direction === "ltr" /* ltr */ ? sheetStyles2.dockedSheetRightBorder : sheetStyles2.dockedSheetLeftBorder;
     }
   }, [flow, direction]);
-  if (React48.Children.toArray(children).length > 0) {
+  if (React49.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThDockedPanel,
       {
@@ -2972,7 +3451,7 @@ var StatefulDockedSheet = ({
           autoFocus: false,
           updateState: resetFocus
         },
-        className: classNames9(sheetStyles2.dockedSheet, className, classFromFlow()),
+        className: classNames10(sheetStyles2.dockedSheet, className, classFromFlow()),
         style: {
           "--sheet-sticky-header": dockedSheetHeaderRef.current ? `${dockedSheetHeaderRef.current.clientHeight}px` : void 0
         },
@@ -2994,7 +3473,7 @@ var StatefulDockedSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: en_default.reader.app.back.trigger,
                   ref: dockedSheetCloseRef,
-                  className: classNames9(className, readerSharedUI3.backButton),
+                  className: classNames10(className, readerSharedUI3.backButton),
                   "aria-label": en_default.reader.app.back.trigger,
                   onPress: onClosePress
                 }
@@ -3526,11 +4005,12 @@ var SvgChevronRight = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www
 var chevron_right_default = SvgChevronRight;
 var StatefulTocContainer = ({ triggerRef }) => {
   const treeRef = useRef(null);
-  const tocEntry = useAppSelector((state) => state.publication.tocEntry);
+  const unstableTimeline = useAppSelector((state) => state.publication.unstableTimeline);
+  const tocEntry = unstableTimeline?.toc?.currentEntry;
+  const tocTree = unstableTimeline?.toc?.tree;
   const direction = useAppSelector((state) => state.reader.direction);
   const isRTL = direction === "rtl" /* rtl */;
   const actionState = useAppSelector((state) => state.actions.keys["toc" /* toc */]);
-  const tocTree = useAppSelector((state) => state.publication.tocTree);
   const dispatch = useAppDispatch();
   const previousTocEntry = usePrevious(tocEntry);
   const [forceRerender, setForceRerender] = useState(0);
@@ -3538,8 +4018,8 @@ var StatefulTocContainer = ({ triggerRef }) => {
   const docking = useDocking("toc" /* toc */);
   const sheetType = docking.sheetType;
   const { contains } = useFilter({ sensitivity: "base" });
-  const [filterValue, setFilterValue] = React48.useState("");
-  const searchInputRef = React48.useRef(null);
+  const [filterValue, setFilterValue] = React49.useState("");
+  const searchInputRef = React49.useRef(null);
   const filterTocTree = (items, filterValue2) => {
     if (!filterValue2) {
       return items;
@@ -3572,15 +4052,13 @@ var StatefulTocContainer = ({ triggerRef }) => {
     const el = document.querySelector(`[data-key=${key}]`);
     const href = el?.getAttribute("data-href");
     if (!href) return;
-    const link = new Link({ href });
+    const link = new Link$1({ href });
     const cb = actionState?.isOpen && (sheetType === "docked start" /* dockedStart */ || sheetType === "docked end" /* dockedEnd */) ? () => {
       dispatch(setTocEntry(key));
       dispatch(setImmersive(true));
-      dispatch(setHovering(false));
     } : () => {
       dispatch(setTocEntry(key));
       dispatch(setImmersive(true));
-      dispatch(setHovering(false));
       setOpen(false);
     };
     goLink(link, true, cb);
@@ -3599,7 +4077,7 @@ var StatefulTocContainer = ({ triggerRef }) => {
     }
   }, [actionState, setOpen, filterValue]);
   useEffect(() => {
-    if ((sheetType === "docked start" /* dockedStart */ || sheetType === "docked end" /* dockedEnd */) && tocEntry !== void 0 && previousTocEntry === void 0) {
+    if ((sheetType === "docked start" /* dockedStart */ || sheetType === "docked end" /* dockedEnd */) && tocEntry !== void 0 && (!previousTocEntry || previousTocEntry !== tocEntry)) {
       setForceRerender(Math.random());
     }
   }, [sheetType, tocEntry, previousTocEntry]);
@@ -3675,15 +4153,15 @@ var StatefulTocContainer = ({ triggerRef }) => {
                   textValue: item.title || "",
                   children: [
                     /* @__PURE__ */ jsxs(TreeItemContent, { children: [
-                      item.children ? /* @__PURE__ */ jsx(
+                      item.children && /* @__PURE__ */ jsx(
                         Button,
                         {
                           slot: "chevron",
                           className: tocStyles.tocTreeItemButton,
-                          ...isRTL ? { style: { transform: "scaleX(-1)" } } : {},
+                          style: { transform: isRTL ? "scaleX(-1)" : "none" },
                           children: /* @__PURE__ */ jsx(chevron_right_default, { "aria-hidden": "true", focusable: "false" })
                         }
-                      ) : null,
+                      ),
                       /* @__PURE__ */ jsxs("div", { className: tocStyles.tocTreeItemText, children: [
                         /* @__PURE__ */ jsx("div", { className: tocStyles.tocTreeItemTextTitle, children: item.title }),
                         item.position && /* @__PURE__ */ jsx("div", { className: tocStyles.tocTreeItemTextPosition, children: item.position })
@@ -3908,32 +4386,6 @@ var Peripherals = class {
   }
 };
 
-// src/helpers/createTocTree.ts
-function createTocTree(links, idGenerator, positionsList) {
-  return links.map((link) => {
-    const newId = idGenerator();
-    let href = link.href;
-    const fragmentIndex = href.indexOf("#");
-    if (fragmentIndex !== -1) {
-      const baseHref = href.substring(0, fragmentIndex);
-      const duplicateLink = links.find((l) => l.href.startsWith(baseHref) && l.href !== href);
-      if (!duplicateLink) {
-        href = baseHref;
-      }
-    }
-    const treeNode = {
-      id: newId,
-      href,
-      title: link.title,
-      position: positionsList?.find((position) => position.href === href)?.locations.position
-    };
-    if (link.children) {
-      treeNode.children = createTocTree(link.children.items, idGenerator, positionsList);
-    }
-    return treeNode;
-  });
-}
-
 // src/helpers/deserializePositions.ts
 var deserializePositions = (positionsList) => {
   return positionsList?.map((locator) => ({
@@ -3960,22 +4412,19 @@ var StatefulReader = ({
   }
   const { fxlThemeKeys, reflowThemeKeys } = usePreferenceKeys();
   const RSPrefs = usePreferences();
+  const [publication, setPublication] = useState(null);
   const container = useRef(null);
-  const publication = useRef(null);
   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 layoutUI = isFXL ? RSPrefs.theming.layout.ui?.fxl || "layered-ui" /* layered */ : "stacked-ui" /* stacked */;
+  const progression = useAppSelector((state) => state.publication.progression);
   const textAlign = useAppSelector((state) => state.settings.textAlign);
   const columnCount = useAppSelector((state) => state.settings.columnCount);
   const fontFamily = useAppSelector((state) => state.settings.fontFamily);
   const fontSize = useAppSelector((state) => state.settings.fontSize);
   const fontWeight = useAppSelector((state) => state.settings.fontWeight);
   const hyphens = useAppSelector((state) => state.settings.hyphens);
-  const layoutStrategy = useAppSelector((state) => state.settings.layoutStrategy);
   const letterSpacing = useAppSelector((state) => state.settings.letterSpacing);
   const lineLength = useAppSelector((state) => state.settings.lineLength);
   const lineHeight = useAppSelector((state) => state.settings.lineHeight);
@@ -3983,7 +4432,7 @@ var StatefulReader = ({
   const paragraphSpacing = useAppSelector((state) => state.settings.paragraphSpacing);
   const publisherStyles = useAppSelector((state) => state.settings.publisherStyles);
   const scroll = useAppSelector((state) => state.settings.scroll);
-  const isPaged = !scroll;
+  const isScroll = scroll && !isFXL;
   const textNormalization = useAppSelector((state) => state.settings.textNormalization);
   const wordSpacing = useAppSelector((state) => state.settings.wordSpacing);
   const themeObject = useAppSelector((state) => state.theming.theme);
@@ -3992,9 +4441,10 @@ var StatefulReader = ({
   const colorScheme = useAppSelector((state) => state.theming.colorScheme);
   const reducedMotion = useAppSelector((state) => state.theming.prefersReducedMotion);
   const breakpoint = useAppSelector((state) => state.theming.breakpoint);
-  const arrowsOccupySpace = breakpoint && (breakpoint === "large" /* large */ || breakpoint === "xLarge" /* xLarge */);
+  const arrowsOccupySpace = !isScroll && breakpoint && (breakpoint === "large" /* large */ || breakpoint === "xLarge" /* xLarge */);
   const isImmersive = useAppSelector((state) => state.reader.isImmersive);
   const isHovering = useAppSelector((state) => state.reader.isHovering);
+  const layoutUI = isFXL ? RSPrefs.theming.layout.ui?.fxl || "layered-ui" /* layered */ : isScroll ? RSPrefs.theming.layout.ui?.reflow || "layered-ui" /* layered */ : "stacked-ui" /* stacked */;
   useTheming({
     theme,
     themeKeys: RSPrefs.theming.themes.keys,
@@ -4013,9 +4463,45 @@ var StatefulReader = ({
     onReducedMotionChange: (reducedMotion2) => dispatch(setReducedMotion(reducedMotion2)),
     onReducedTransparencyChange: (reducedTransparency) => dispatch(setReducedTransparency(reducedTransparency))
   });
+  const atPublicationStart = useAppSelector((state) => state.publication.atPublicationStart);
+  const atPublicationEnd = useAppSelector((state) => state.publication.atPublicationEnd);
+  const dispatch = useAppDispatch();
+  const onFsChange = useCallback((isFullscreen) => {
+    dispatch(setFullscreen(isFullscreen));
+  }, [dispatch]);
+  const fs = useFullscreen(onFsChange);
+  const {
+    EpubNavigatorLoad,
+    EpubNavigatorDestroy,
+    goLeft,
+    goRight,
+    goBackward,
+    goForward,
+    navLayout,
+    currentLocator,
+    currentPositions,
+    canGoBackward,
+    canGoForward,
+    isScrollStart,
+    isScrollEnd,
+    getCframes,
+    onFXLPositionChange,
+    submitPreferences
+  } = useEpubNavigator();
+  const { setLocalData, getLocalData, localData } = useLocalStorage(localDataKey.current);
+  useTimeline({
+    publication,
+    currentLocation: localData,
+    currentPositions: progression.currentPositions || [],
+    positionsList,
+    onChange: (timeline2) => {
+      dispatch(setTimeline(timeline2));
+    }
+  });
   const cache = useRef({
     layoutUI,
     isImmersive,
+    isHovering,
     arrowsOccupySpace: arrowsOccupySpace || false,
     settings: {
       columnCount,
@@ -4023,47 +4509,22 @@ var StatefulReader = ({
       fontSize,
       fontWeight,
       hyphens,
-      layoutStrategy,
       letterSpacing,
       lineHeight,
       lineLength,
       paragraphIndent,
       paragraphSpacing,
       publisherStyles,
-      scroll,
+      scroll: isScroll,
       textAlign,
       textNormalization,
       theme,
       wordSpacing
     },
-    tocTree,
     positionsList: positionsList || [],
     colorScheme,
     reducedMotion
   });
-  const atPublicationStart = useAppSelector((state) => state.publication.atPublicationStart);
-  const atPublicationEnd = useAppSelector((state) => state.publication.atPublicationEnd);
-  const dispatch = useAppDispatch();
-  const onFsChange = useCallback((isFullscreen) => {
-    dispatch(setFullscreen(isFullscreen));
-  }, [dispatch]);
-  const fs = useFullscreen(onFsChange);
-  const {
-    EpubNavigatorLoad,
-    EpubNavigatorDestroy,
-    goLeft,
-    goRight,
-    goBackward,
-    goForward,
-    scrollBackTo,
-    navLayout,
-    currentLocator,
-    currentPositions,
-    getCframes,
-    onFXLPositionChange,
-    handleScrollAffordances,
-    submitPreferences
-  } = useEpubNavigator();
   const activateImmersiveOnAction = useCallback(() => {
     if (!cache.current.isImmersive) dispatch(setImmersive(true));
   }, [dispatch]);
@@ -4072,22 +4533,23 @@ var StatefulReader = ({
     dispatch(setArrows(false));
     dispatch(toggleImmersive());
   }, [dispatch]);
-  useEffect(() => {
-    cache.current.isImmersive = isImmersive;
-  }, [isImmersive]);
   const handleTap = (event) => {
     const _cframes = getCframes();
-    if (_cframes && !cache.current.settings.scroll) {
-      const oneQuarter = (_cframes.length === 2 ? _cframes[0].window.innerWidth + _cframes[1].window.innerWidth : _cframes[0].window.innerWidth) * window.devicePixelRatio / 4;
-      if (event.x < oneQuarter) {
-        goLeft(!cache.current.reducedMotion, activateImmersiveOnAction);
-      } else if (event.x > oneQuarter * 3) {
-        goRight(!cache.current.reducedMotion, activateImmersiveOnAction);
-      } else if (oneQuarter <= event.x && event.x <= oneQuarter * 3) {
-        toggleIsImmersive();
+    if (_cframes) {
+      if (!cache.current.settings.scroll) {
+        const oneQuarter = (_cframes.length === 2 ? _cframes[0].window.innerWidth + _cframes[1].window.innerWidth : _cframes[0].window.innerWidth) * window.devicePixelRatio / 4;
+        if (event.x < oneQuarter) {
+          goLeft(!cache.current.reducedMotion, activateImmersiveOnAction);
+        } else if (event.x > oneQuarter * 3) {
+          goRight(!cache.current.reducedMotion, activateImmersiveOnAction);
+        } else if (oneQuarter <= event.x && event.x <= oneQuarter * 3) {
+          toggleIsImmersive();
+        }
+      } else {
+        if (RSPrefs.affordances.scroll.toggleOnMiddlePointer.includes("tap")) {
+          toggleIsImmersive();
+        }
       }
-    } else {
-      toggleIsImmersive();
     }
   };
   const handleProgression = useCallback((locator) => {
@@ -4099,49 +4561,10 @@ var StatefulReader = ({
       totalProgression: locator.locations.totalProgression
     }));
   }, [dispatch, currentPositions]);
-  const handleTocEntryOnNav = useCallback((locator) => {
-    if (!locator) return;
-    if (cache.current.tocTree) {
-      const findMatch = (items, link) => {
-        for (const item of items) {
-          if (item.href === link?.href) {
-            return item;
-          }
-          if (item.children) {
-            const match = findMatch(item.children, link);
-            if (match) {
-              return match;
-            }
-          }
-        }
-        return void 0;
-      };
-      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, currentPositions, navLayout]);
   const handleFXLProgression = useCallback((locator) => {
     handleProgression(locator);
-    handleTocEntryOnNav(locator);
-    localData.set(localDataKey.current, locator);
-  }, [handleProgression, handleTocEntryOnNav]);
+    setLocalData(locator);
+  }, [handleProgression, setLocalData]);
   onFXLPositionChange(handleFXLProgression);
   const initReadingEnv = async () => {
     if (navLayout() === EPUBLayout.fixed) {
@@ -4149,8 +4572,6 @@ var StatefulReader = ({
       if (cLoc) {
         handleFXLProgression(cLoc);
       }
-    } else {
-      handleScrollAffordances(cache.current.settings.scroll);
     }
   };
   const p = new Peripherals(useAppStore(), RSPrefs.actions, {
@@ -4162,21 +4583,11 @@ var StatefulReader = ({
         case "left":
           if (!cache.current.settings.scroll) goLeft(!cache.current.reducedMotion, activateImmersiveOnAction);
           break;
-        case "up":
-        case "home":
-          if (cache.current.settings.scroll) activateImmersiveOnAction();
-          break;
-        case "down":
-        case "end":
-          if (cache.current.settings.scroll) activateImmersiveOnAction();
-          break;
       }
     },
     goProgression: (shiftKey) => {
       if (!cache.current.settings?.scroll) {
         shiftKey ? goBackward(!cache.current.reducedMotion, activateImmersiveOnAction) : goForward(!cache.current.reducedMotion, activateImmersiveOnAction);
-      } else {
-        activateImmersiveOnAction();
       }
     },
     toggleAction: (actionKey) => {
@@ -4205,51 +4616,71 @@ var StatefulReader = ({
       p.observe(window);
     },
     positionChanged: async function(locator) {
-      const currentLocator2 = localData.get(localDataKey.current);
-      if (currentLocator2?.href !== locator.href) {
-        handleTocEntryOnNav(locator);
-      }
       if (navLayout() === EPUBLayout.reflowable) {
-        const debouncedHandleProgression = (0, import_debounce.default)(
+        const debouncedHandleProgression = (0, import_debounce2.default)(
           async () => {
-            if (currentLocator2?.href !== locator.href) {
-              handleScrollAffordances(cache.current.settings.scroll);
-            }
             handleProgression(locator);
-            localData.set(localDataKey.current, locator);
+            setLocalData(locator);
           },
           250
         );
         debouncedHandleProgression();
       }
+      if (canGoBackward()) {
+        dispatch(setPublicationStart(false));
+      } else {
+        dispatch(setPublicationStart(true));
+      }
+      if (canGoForward()) {
+        dispatch(setPublicationEnd(false));
+      } else {
+        dispatch(setPublicationEnd(true));
+      }
     },
     tap: function(_e) {
       handleTap(_e);
       return true;
     },
     click: function(_e) {
-      cache.current.layoutUI === "layered-ui" /* layered */ && handleTap(_e);
+      if (cache.current.layoutUI === "layered-ui" /* layered */) {
+        if (!cache.current.settings.scroll || RSPrefs.affordances.scroll.toggleOnMiddlePointer.includes("click")) {
+          handleTap(_e);
+        }
+      }
       return true;
     },
     zoom: function(_scale) {
     },
     miscPointer: function(_amount) {
     },
+    scroll: function(_delta) {
+      if (cache.current.settings.scroll && navLayout() === EPUBLayout.reflowable) {
+        if (isScrollStart() || isScrollEnd()) {
+          if (
+            // Keep consistent with pagination behavior
+            cache.current.layoutUI === "layered-ui" /* layered */
+          ) {
+            dispatch(setScrollAffordance(true));
+          }
+        } else if (!cache.current.isImmersive && _delta > 20) {
+          if (RSPrefs.affordances.scroll.hideOnForwardScroll) {
+            dispatch(setImmersive(true));
+          }
+        } else if (cache.current.isImmersive && _delta < -20) {
+          if (
+            // Keep consistent with pagination behavior
+            cache.current.layoutUI === "layered-ui" /* layered */ && RSPrefs.affordances.scroll.showOnBackwardScroll
+          ) {
+            dispatch(setImmersive(false));
+          }
+        }
+      }
+    },
     customEvent: function(_key, _data) {
     },
     handleLocator: function(locator) {
       const href = locator.href;
-      if (href.includes(TH_CUSTOM_SCHEME)) {
-        if (href.includes(ThScrollActions.prev)) {
-          goLeft(false, () => {
-            scrollBackTo(RSPrefs.scroll.backTo);
-          });
-        } else if (href.includes(ThScrollActions.next)) {
-          goRight(false, () => {
-            scrollBackTo("top" /* top */);
-          });
-        }
-      } else if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("mailto:") || href.startsWith("tel:")) {
+      if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("mailto:") || href.startsWith("tel:")) {
         if (confirm(`Open "${href}" ?`)) window.open(href, "_blank");
       } else {
         console.warn("Unhandled locator", locator);
@@ -4264,20 +4695,27 @@ var StatefulReader = ({
       constraint: value
     });
   }, [submitPreferences]);
+  useEffect(() => {
+    cache.current.isImmersive = isImmersive;
+  }, [isImmersive]);
+  useEffect(() => {
+    cache.current.isHovering = isHovering;
+  }, [isHovering]);
   useEffect(() => {
     cache.current.layoutUI = layoutUI;
   }, [layoutUI]);
   useEffect(() => {
-    cache.current.settings.scroll = scroll;
+    cache.current.settings.scroll = isScroll;
+    dispatch(setImmersive(false));
     const handleConstraint = async (value) => {
       await applyConstraint(value);
     };
-    if (!scroll) {
+    if (!isScroll) {
       handleConstraint(arrowsOccupySpace ? arrowsWidth.current : 0).catch(console.error);
     } else {
       handleConstraint(0).catch(console.error);
     }
-  }, [scroll, arrowsOccupySpace, applyConstraint]);
+  }, [isScroll, arrowsOccupySpace, applyConstraint, dispatch]);
   useEffect(() => {
     cache.current.settings.columnCount = columnCount;
   }, [columnCount]);
@@ -4293,9 +4731,6 @@ var StatefulReader = ({
   useEffect(() => {
     cache.current.settings.hyphens = hyphens;
   }, [hyphens]);
-  useEffect(() => {
-    cache.current.settings.layoutStrategy = layoutStrategy;
-  }, [layoutStrategy]);
   useEffect(() => {
     cache.current.settings.letterSpacing = letterSpacing;
   }, [letterSpacing]);
@@ -4326,19 +4761,6 @@ var StatefulReader = ({
   useEffect(() => {
     cache.current.positionsList = positionsList || [];
   }, [positionsList]);
-  useEffect(() => {
-    cache.current.tocTree = tocTree;
-    if (tocEntry) return;
-    const knownPosition = localData.get(localDataKey.current);
-    if (knownPosition) {
-      handleTocEntryOnNav(knownPosition);
-    } else {
-      const initialTocEntry = tocTree?.[0];
-      if (initialTocEntry) {
-        handleTocEntryOnNav(new Locator({ href: initialTocEntry.href, type: "" }));
-      }
-    }
-  }, [tocTree, tocEntry, handleTocEntryOnNav]);
   useEffect(() => {
     cache.current.arrowsOccupySpace = arrowsOccupySpace || false;
   }, [arrowsOccupySpace]);
@@ -4382,18 +4804,21 @@ var StatefulReader = ({
     const fetcher = new HttpFetcher(void 0, selfHref);
     const manifest = Manifest.deserialize(rawManifest);
     manifest.setSelfLink(selfHref);
-    publication.current = new Publication({
+    setPublication(new Publication({
       manifest,
       fetcher
-    });
-    dispatch(setRTL(publication.current.metadata.effectiveReadingProgression === ReadingProgression.rtl));
-    dispatch(setFXL(publication.current.metadata.getPresentation()?.layout === EPUBLayout.fixed));
-    const pubTitle = publication.current.metadata.title.getTranslation("en");
+    }));
+  }, [rawManifest, selfHref]);
+  useEffect(() => {
+    if (!publication) return;
+    dispatch(setRTL(publication.metadata.effectiveReadingProgression === ReadingProgression.rtl));
+    dispatch(setFXL(publication.metadata.getPresentation()?.layout === EPUBLayout.fixed));
+    const pubTitle = publication.metadata.title.getTranslation("en");
     dispatch(setRunningHead(pubTitle));
     dispatch(setProgression({ currentPublication: pubTitle }));
     let positionsList2;
     const fetchPositions = async () => {
-      positionsList2 = await publication.current?.positionsFromManifest();
+      positionsList2 = await publication.positionsFromManifest();
       if (positionsList2 && positionsList2.length > 0) {
         dispatch(setProgression({ totalPositions: positionsList2.length }));
       }
@@ -4401,12 +4826,8 @@ var StatefulReader = ({
       dispatch(setPositionsList(deserializedPositionsList));
     };
     fetchPositions().catch(console.error).then(() => {
-      const isFXL2 = publication.current?.metadata.getPresentation()?.layout === EPUBLayout.fixed;
-      const initialPosition = localData.get(localDataKey.current);
-      let idCounter = 0;
-      const idGenerator = () => `toc-${++idCounter}`;
-      const tocTree2 = createTocTree(publication.current?.tableOfContents?.items || [], idGenerator, positionsList2);
-      dispatch(setTocTree(tocTree2));
+      const isFXL2 = publication.metadata.getPresentation()?.layout === EPUBLayout.fixed;
+      const initialPosition = getLocalData();
       const initialConstraint = cache.current.arrowsOccupySpace ? arrowsWidth.current : 0;
       const themeKeys = isFXL2 ? fxlThemeKeys : reflowThemeKeys;
       const theme2 = themeKeys.includes(cache.current.settings.theme) ? cache.current.settings.theme : "auto";
@@ -4429,7 +4850,6 @@ var StatefulReader = ({
         fontSize: cache.current.settings.fontSize,
         fontWeight: cache.current.settings.fontWeight,
         hyphens: cache.current.settings.hyphens,
-        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],
         optimalLineLength: cache.current.settings.lineLength?.optimal,
@@ -4444,24 +4864,21 @@ var StatefulReader = ({
         ...themeProps
       };
       const defaults = isFXL2 ? {} : {
-        layoutStrategy: RSPrefs.typography.layoutStrategy,
         maximalLineLength: RSPrefs.typography.maximalLineLength,
         minimalLineLength: RSPrefs.typography.minimalLineLength,
         optimalLineLength: RSPrefs.typography.optimalLineLength,
-        pageGutter: RSPrefs.typography.pageGutter
+        pageGutter: RSPrefs.typography.pageGutter,
+        scrollPaddingTop: RSPrefs.theming.layout.ui?.reflow === "layered-ui" /* layered */ ? (RSPrefs.theming.icon.size || 24) * 3 : RSPrefs.theming.icon.size || 24,
+        scrollPaddingBottom: RSPrefs.theming.layout.ui?.reflow === "layered-ui" /* layered */ ? (RSPrefs.theming.icon.size || 24) * 5 : RSPrefs.theming.icon.size || 24
       };
       EpubNavigatorLoad({
         container: container.current,
-        publication: publication.current,
+        publication,
         listeners,
         positionsList: positionsList2,
-        initialPosition,
+        initialPosition: initialPosition ?? void 0,
         preferences,
-        defaults,
-        scrollAffordances: {
-          top: RSPrefs.scroll.topAffordance,
-          bottom: RSPrefs.scroll.bottomAffordance
-        }
+        defaults
       }, () => p.observe(window));
     }).finally(() => {
       const setLoadingThunk = (dispatch2) => {
@@ -4472,21 +4889,23 @@ var StatefulReader = ({
     return () => {
       EpubNavigatorDestroy(() => p.destroy());
     };
-  }, [rawManifest, selfHref, RSPrefs, fxlThemeKeys, reflowThemeKeys]);
+  }, [publication, RSPrefs, fxlThemeKeys, reflowThemeKeys]);
   if (!breakpoint) return null;
-  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(
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(I18nProvider, { locale: RSPrefs.locale, children: /* @__PURE__ */ jsx(ThPluginProvider, { children: /* @__PURE__ */ jsx("main", { id: "reader-main", children: /* @__PURE__ */ jsx(StatefulDockingWrapper, { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      id: "reader-main",
-      className: classNames9(
+      id: "reader-shell",
+      className: classNames10(
         isFXL ? "isFXL" : "isReflow",
         isImmersive ? "isImmersive" : "",
         isHovering ? "isHovering" : "",
-        layoutUI
+        isScroll ? "isScroll" : "isPaged",
+        layoutUI,
+        breakpoint
       ),
       children: [
-        /* @__PURE__ */ jsx(StatefulReaderHeader, {}),
-        isPaged ? /* @__PURE__ */ jsx("nav", { className: arrowStyles2.container, id: arrowStyles2.left, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(StatefulReaderHeader, { layout: layoutUI }),
+        !isScroll ? /* @__PURE__ */ jsx("nav", { className: arrowStyles2.container, id: arrowStyles2.left, children: /* @__PURE__ */ jsx(
           StatefulReaderArrowButton,
           {
             direction: "left",
@@ -4496,7 +4915,7 @@ var StatefulReader = ({
           }
         ) }) : /* @__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(
+        !isScroll ? /* @__PURE__ */ jsx("nav", { className: arrowStyles2.container, id: arrowStyles2.right, children: /* @__PURE__ */ jsx(
           StatefulReaderArrowButton,
           {
             direction: "right",
@@ -4505,68 +4924,11 @@ var StatefulReader = ({
             onPress: () => goRight(!reducedMotion, activateImmersiveOnAction)
           }
         ) }) : /* @__PURE__ */ jsx(Fragment, {}),
-        isPaged ? /* @__PURE__ */ jsx(StatefulReaderFooter, {}) : /* @__PURE__ */ jsx(Fragment, {})
+        /* @__PURE__ */ jsx(StatefulReaderFooter, { layout: layoutUI })
       ]
     }
   ) }) }) }) }) });
 };
-var BookUrlConverter = () => {
-  const [bookUrl, setBookUrl] = useState("");
-  const handleAction = (e) => {
-    e.preventDefault();
-    if (!bookUrl) return;
-    try {
-      const bytes = new TextEncoder().encode(bookUrl);
-      const binString = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join("");
-      const base64 = btoa(binString);
-      const base64Url = base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-      window.location.href = new URL(
-        `read?book=https://publication-server.readium.org/${encodeURIComponent(base64Url)}/manifest.json`,
-        window.location.href
-      ).href;
-    } catch (error) {
-      console.error("Error encoding URL:", error);
-    }
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    ThForm,
-    {
-      label: en_default.bookUrlConverter.button,
-      className: bookUrlConverterStyles.bookConverterForm,
-      onSubmit: handleAction,
-      compounds: {
-        button: {
-          className: bookUrlConverterStyles.bookConverterFormButton,
-          isDisabled: !bookUrl
-        }
-      },
-      children: /* @__PURE__ */ jsx(
-        ThFormTextField,
-        {
-          label: en_default.bookUrlConverter.label,
-          name: "book-url-converter",
-          className: bookUrlConverterStyles.bookConverterFormTextField,
-          type: "url",
-          errorMessage: en_default.bookUrlConverter.error,
-          compounds: {
-            label: {
-              className: bookUrlConverterStyles.bookConverterFormLabel
-            },
-            input: {
-              className: bookUrlConverterStyles.bookConverterFormInput,
-              value: bookUrl,
-              onChange: (e) => setBookUrl(e.target.value),
-              placeholder: en_default.bookUrlConverter.placeholder
-            },
-            fieldError: {
-              className: bookUrlConverterStyles.bookConverterFormFieldError
-            }
-          }
-        }
-      )
-    }
-  ) });
-};
 var StatefulLoader = ({ isLoading, children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     ThLoader,
@@ -4578,7 +4940,115 @@ var StatefulLoader = ({ isLoading, children }) => {
     }
   ) });
 };
+var DefaultImage = ({
+  src,
+  alt = ""
+}) => /* @__PURE__ */ jsx(
+  "img",
+  {
+    src,
+    alt,
+    className: publicationGridStyles.publicationImage,
+    loading: "lazy"
+  }
+);
+var PublicationGrid = ({
+  publications,
+  columnWidth = 400,
+  gap = "1.5rem",
+  renderCover = (publication) => /* @__PURE__ */ jsx(
+    DefaultImage,
+    {
+      src: publication.cover,
+      alt: ""
+    }
+  )
+}) => {
+  const renderCoverWithClass = (publication) => {
+    const cover = renderCover(publication);
+    if (!isValidElement(cover)) {
+      return /* @__PURE__ */ jsx(
+        DefaultImage,
+        {
+          src: publication.cover,
+          alt: ""
+        }
+      );
+    }
+    return cloneElement(cover, {
+      className: classNames10(
+        publicationGridStyles.publicationImage,
+        cover.props.className
+      )
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    ThGrid,
+    {
+      className: publicationGridStyles.publicationGrid,
+      items: publications,
+      columnWidth,
+      gap,
+      renderItem: (publication, index) => /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: publication.url,
+          className: publicationGridStyles.publicationCard,
+          children: [
+            /* @__PURE__ */ jsx("figure", { className: publicationGridStyles.publicationCover, children: renderCoverWithClass(publication) }),
+            /* @__PURE__ */ jsxs("div", { className: publicationGridStyles.publicationInfo, children: [
+              /* @__PURE__ */ jsx("h2", { className: publicationGridStyles.publicationTitle, children: publication.title }),
+              /* @__PURE__ */ jsx("p", { className: publicationGridStyles.publicationAuthor, children: publication.author }),
+              publication.rendition && /* @__PURE__ */ jsx("p", { className: publicationGridStyles.publicationRendition, children: publication.rendition })
+            ] })
+          ]
+        },
+        index
+      )
+    }
+  );
+};
+function usePublication({ url, onError = () => {
+} }) {
+  const [error, setError] = useState("");
+  const [manifest, setManifest] = useState(void 0);
+  const [selfLink, setSelfLink] = useState(void 0);
+  useEffect(() => {
+    if (!url) {
+      setError("Manifest URL is required");
+      return;
+    }
+    const decodedUrl = decodeURIComponent(url);
+    const manifestLink = new Link$1({ href: decodedUrl });
+    const fetcher = new HttpFetcher(void 0);
+    try {
+      const fetched = fetcher.get(manifestLink);
+      fetched.link().then((link) => {
+        setSelfLink(link.toURL(decodedUrl));
+      });
+      fetched.readAsJSON().then((manifestData) => {
+        setManifest(manifestData);
+      }).catch((error2) => {
+        console.error("Error loading manifest:", error2);
+        setError(`Failed loading manifest ${decodedUrl}: ${error2 instanceof Error ? error2.message : "Unknown error"}`);
+      });
+    } catch (error2) {
+      console.error("Error loading manifest:", error2);
+      setError(`Failed loading manifest ${decodedUrl}: ${error2 instanceof Error ? error2.message : "Unknown error"}`);
+    }
+  }, [url]);
+  useEffect(() => {
+    if (error) {
+      onError(error);
+    }
+  }, [error, onError]);
+  return {
+    error,
+    manifest,
+    selfLink
+  };
+}
 
-export { BookUrlConverter, StatefulActionIcon, StatefulBottomSheet, StatefulCollapsibleActionsBar, StatefulColumns, StatefulDockedSheet, StatefulFontFamily, StatefulFontWeight, StatefulFullScreenSheet, StatefulFullscreenTrigger, StatefulGroupWrapper, StatefulHyphens, StatefulJumpToPositionContainer, StatefulJumpToPositionTrigger, StatefulLayout, StatefulLetterSpacing, StatefulLineHeight, StatefulLoader, StatefulNumberField, StatefulOverflowMenu, StatefulOverflowMenuItem, StatefulParagraphIndent, StatefulParagraphSpacing, StatefulPopoverSheet, StatefulPublisherStyles, StatefulRadioGroup, StatefulReader, StatefulSettingsContainer, StatefulSettingsTrigger, StatefulSheetWrapper, StatefulSlider, StatefulSpacingGroup, StatefulSpacingGroupContainer, StatefulSwitch, StatefulTextAlign, StatefulTextGroup, StatefulTextGroupContainer, StatefulTextNormalize, StatefulTheme, StatefulTocContainer, StatefulTocTrigger, StatefulWordSpacing, StatefulZoom, createDefaultPlugin, useDocking };
+export { DefaultImage, PublicationGrid, StatefulActionIcon, StatefulBottomSheet, StatefulCollapsibleActionsBar, StatefulColumns, StatefulDockedSheet, StatefulFontFamily, StatefulFontWeight, StatefulFullScreenSheet, StatefulFullscreenTrigger, StatefulGroupWrapper, StatefulHyphens, StatefulJumpToPositionContainer, StatefulJumpToPositionTrigger, StatefulLayout, StatefulLetterSpacing, StatefulLineHeight, StatefulLoader, StatefulNumberField, StatefulOverflowMenu, StatefulOverflowMenuItem, StatefulParagraphIndent, StatefulParagraphSpacing, StatefulPopoverSheet, StatefulPublisherStyles, StatefulRadioGroup, StatefulReader, StatefulSettingsContainer, StatefulSettingsTrigger, StatefulSheetWrapper, StatefulSlider, StatefulSpacingGroup, StatefulSpacingGroupContainer, StatefulSwitch, StatefulTextAlign, StatefulTextGroup, StatefulTextGroupContainer, StatefulTextNormalize, StatefulTheme, StatefulTocContainer, StatefulTocTrigger, StatefulWordSpacing, StatefulZoom, createDefaultPlugin, useDocking, usePublication };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map