@edrlab/thorium-web 1.3.1 → 1.4.0

package/dist/{chunk-LP3JFZ4A.mjs → chunk-PXXWEMNL.mjs}

@@ -1,21 +1,21 @@
-import { ErrorHandler } from './chunk-RRDEPGBK.mjs';
-import { useFullscreen, useEpubNavigator, useLocalStorage } from './chunk-A3FZBEUL.mjs';
-import { useAppDispatch, setFullscreen, useAppSelector, setActionOpen, dockAction, setHovering, setSettingsContainer, debounce, setColumnCount, setWebPubFontFamily, setFontFamily, setWebPubFontWeight, setFontWeight, setWebPubHyphens, setHyphens, setScroll, setWebPubLetterSpacing, setLetterSpacing, setWebPubLineHeight, setLineHeight, setWebPubParagraphIndent, setParagraphIndent, setWebPubParagraphSpacing, setParagraphSpacing, setWebPubWordSpacing, setWordSpacing, setWebPubSpacingPreset, setWebPubPublisherStyles, setSpacingPreset, setPublisherStyles, setWebPubTextAlign, setTextAlign, setWebPubTextNormalization, setTextNormalization, setTheme, setWebPubZoom, setFontSize, setSkipBackwardInterval, setSkipForwardInterval, setSkipInterval, setAutoPlay, toggleActionOpen, setVolume, setPlaybackRate, setSleepTimerRemainingSeconds, setSleepTimerOnTrackEnd, setSleepTimerOnFragmentEnd, setRemotePlaybackState, ThReduxPreferencesAdapter, setReaderProfile, setPositionsList, setTocTree, setRTL, setFXL, setHasDisplayTransformability, setImmersive, setOverflow, setUserNavigated, setTocEntry, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from './chunk-EZG6SBSO.mjs';
+import { makeBreakpointsMap, isKeyboardTriggered, isActiveElement } from './chunk-VENFFPK2.mjs';
+import { useFullscreen, useLocalStorage, useEpubNavigator } from './chunk-SZAVAQ6S.mjs';
+import { setFullscreen, setReaderProfile, setPositionsList, setTocTree, setScriptMode, setRTL, setFXL, setHasDisplayTransformability, setActionOpen, dockAction, setHovering, setSettingsContainer, debounce, setColumnCount, initialWebPubSettingsState, initialSettingsState, setWebPubFontFamily, setFontFamily, setWebPubFontWeight, setFontWeight, setWebPubHyphens, setHyphens, setScroll, setWebPubLetterSpacing, setLetterSpacing, setWebPubLineHeight, setLineHeight, setWebPubParagraphIndent, setParagraphIndent, setWebPubParagraphSpacing, setParagraphSpacing, setWebPubWordSpacing, setWordSpacing, setWebPubSpacingPreset, setWebPubPublisherStyles, setSpacingPreset, setPublisherStyles, setWebPubTextAlign, setTextAlign, setWebPubTextNormalization, setTextNormalization, setWebPubLigatures, setLigatures, setWebPubNoRuby, setNoRuby, setTheme, setWebPubZoom, setFontSize, setSkipBackwardInterval, setSkipForwardInterval, setSkipInterval, setAutoPlay, toggleActionOpen, setVolume, setPlaybackRate, setSleepTimerRemainingSeconds, setSleepTimerOnTrackEnd, setSleepTimerOnFragmentEnd, setRemotePlaybackState, ThReduxPreferencesAdapter, ThReduxGlobalPreferencesAdapter, setImmersive, setOverflow, setUserNavigated, setTocEntry, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from './chunk-WLVE3WNW.mjs';
 import { buildTocTree, findTocItemById } from './chunk-TEZB4ULX.mjs';
-import { useActionsPreferences, prefixString, useAudioPreferences, usePreferences, usePreferenceKeys, buildThemeObject, ThPreferencesProvider } from './chunk-GPWW5OML.mjs';
-import { useI18n } from './chunk-6EHFW43Y.mjs';
-import { useSharedPreferences, ThDockingTypes, ThSheetTypes, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, ThTextSettingsKeys, ThSpacingSettingsKeys, defaultAudioSkipBackwardInterval, defaultAudioSkipForwardInterval, defaultAudioSkipInterval, defaultPreferences } from './chunk-DTPO3J2C.mjs';
-import { ThMenuItem, ThActionButton, ThMenu, ThCollapsibleActionsBar, ThPopover, ThContainerHeader, ThNavigationButton, ThContainerBody, ThModal, ThBottomSheet, ThCloseButton, ThDockedPanel, useFirstFocusable, ThTypedComponentRenderer, useActions, useActionComponentStatus, ThForm, ThFormNumberField, usePlugins, ThSettingsWrapper, ThRadioGroup, ThDropdown, ThSwitch, ThNumberField, ThSlider, ThSliderWithPresets, ThLink, ThLibrary, ThHome, ThBackArrow, ThFormSearchField } from './chunk-DETZMFZ7.mjs';
-import { usePrevious } from './chunk-YZ73DHRU.mjs';
-import { makeBreakpointsMap, isKeyboardTriggered, isActiveElement } from './chunk-ITDBOMY5.mjs';
+import { useSharedPreferences, useActionsPreferences, prefixString, ThDockingTypes, ThSheetTypes, useAudioPreferences, usePreferences, useFilteredPreferenceKeys, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, ThTextSettingsKeys, ThSpacingSettingsKeys, buildThemeObject, defaultAudioSkipBackwardInterval, defaultAudioSkipForwardInterval, defaultAudioSkipInterval, defaultPreferences, ThPreferencesProvider, ThGlobalPreferencesProvider } from './chunk-XRFLDNAY.mjs';
+import { useAppDispatch, useAppSelector } from './chunk-A575ZW4A.mjs';
 import { isIOSish, buildShortcut, metaKeys } from './chunk-5LUMM7FW.mjs';
+import { ErrorHandler } from './chunk-RRDEPGBK.mjs';
+import { ThMenuItem, ThActionButton, ThMenu, ThCollapsibleActionsBar, ThPopover, ThContainerHeader, ThNavigationButton, ThContainerBody, ThModal, ThBottomSheet, ThCloseButton, ThDockedPanel, useFirstFocusable, ThTypedComponentRenderer, useActions, useActionComponentStatus, ThForm, ThFormNumberField, usePlugins, ThSettingsWrapper, ThRadioGroup, ThDropdown, ThSwitch, ThNumberField, ThSlider, ThSliderWithPresets, ThLink, ThLibrary, ThHome, ThBackArrow, ThFormSearchField } from './chunk-P6ILEQ5P.mjs';
+import { usePrevious } from './chunk-YZ73DHRU.mjs';
+import { useI18n } from './chunk-NUXGQWED.mjs';
 import { Text, Popover, Dialog, ListBox, ListBoxItem, Radio, Button, Keyboard, Toolbar, useFilter, Tree, TreeItem, TreeItemContent, Collection } from 'react-aria-components';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useObjectRef, useNumberFormatter, FocusScope, useFocusWithin } from 'react-aria';
+import { useObjectRef, useNumberFormatter, FocusScope, useLocale, useFocusWithin } from 'react-aria';
 import classNames4 from 'classnames';
-import React24, { createContext, useCallback, useRef, useContext, useMemo, useEffect, useState } from 'react';
+import React22, { createContext, useCallback, useRef, useContext, useMemo, useState, useEffect } from 'react';
 import { Link, HttpFetcher, Manifest, Publication, ReadingProgression, Layout, Feature, Profile } from '@readium/shared';
-import { TextAlignment } from '@readium/navigator';
+import { getScriptMode, TextAlignment } from '@readium/navigator';
 import { useStore } from 'react-redux';
 import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
 
@@ -357,6 +357,12 @@ var useNavigator = () => {
         return callback?.(false);
       },
       isVisual: () => isVisual,
+      getScriptMode: () => {
+        if (isVisual && navigator.getScriptMode) {
+          return navigator.getScriptMode?.();
+        }
+        return void 0;
+      },
       getCframes: isVisual ? navigator.getCframes?.bind(navigator) : void 0,
       underlying: navigator
     };
@@ -387,6 +393,223 @@ var useNavigator = () => {
   }), [visualMemo, mediaMemo, unified]);
 };
 
+// src/hooks/useIsScroll.ts
+var useIsScroll = () => {
+  const profile = useAppSelector((state) => state.reader.profile);
+  const scroll = useAppSelector((state) => state.settings.scroll);
+  const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const scriptMode = useAppSelector((state) => state.publication.scriptMode);
+  if (profile === "webPub") return true;
+  return (scroll || scriptMode === "cjk-vertical" || scriptMode === "mongolian-vertical") && !isFXL;
+};
+
+// src/hooks/useReaderTransitions.ts
+var useReaderTransitions = () => {
+  const isImmersive = useAppSelector((state) => state.reader.isImmersive);
+  const isFullscreen = useAppSelector((state) => state.reader.isFullscreen);
+  const hasUserNavigated = useAppSelector((state) => state.reader.hasUserNavigated);
+  const isScroll = useIsScroll();
+  const wasImmersive = usePrevious(isImmersive) ?? false;
+  const wasFullscreen = usePrevious(isFullscreen) ?? false;
+  const wasScroll = usePrevious(isScroll) ?? false;
+  const wasUserNavigated = usePrevious(hasUserNavigated) ?? false;
+  const fromImmersive = wasImmersive && !isImmersive;
+  const toImmersive = !wasImmersive && isImmersive;
+  const fromFullscreen = wasFullscreen && !isFullscreen;
+  const toFullscreen = !wasFullscreen && isFullscreen;
+  const fromScroll = wasScroll && !isScroll;
+  const toScroll = !wasScroll && isScroll;
+  const fromUserNavigation = wasUserNavigated && !hasUserNavigated;
+  const toUserNavigation = !wasUserNavigated && hasUserNavigated;
+  return {
+    // Current states
+    isImmersive,
+    isFullscreen,
+    isScroll,
+    hasUserNavigated,
+    // Previous states
+    wasImmersive,
+    wasFullscreen,
+    wasScroll,
+    wasUserNavigated,
+    // State transitions
+    fromImmersive,
+    toImmersive,
+    fromFullscreen,
+    toFullscreen,
+    fromScroll,
+    toScroll,
+    fromUserNavigation,
+    toUserNavigation
+  };
+};
+
+// src/helpers/deserializePositions.ts
+var deserializePositions = (positionsList) => {
+  return positionsList?.map((locator) => ({
+    href: locator.href,
+    type: locator.type,
+    locations: {
+      position: locator.locations.position,
+      progression: locator.locations.progression,
+      totalProgression: locator.locations.totalProgression
+    }
+  }));
+};
+
+// src/hooks/usePublication.ts
+var detectProfile = (manifest) => {
+  const metadata = manifest.metadata;
+  if (!metadata) return "webPub";
+  const conformsTo = metadata.conformsTo;
+  if (!conformsTo) return "webPub";
+  const profiles = Array.isArray(conformsTo) ? conformsTo : [conformsTo];
+  if (profiles.some(
+    (profile) => profile === Profile.AUDIOBOOK
+  )) {
+    return "audio";
+  }
+  if (profiles.some(
+    (profile) => profile === Profile.EPUB
+  )) {
+    return "epub";
+  }
+  return "webPub";
+};
+var usePublication = ({
+  url,
+  onError = () => {
+  },
+  fetcher: customFetcher
+}) => {
+  const dispatch = useAppDispatch();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [manifest, setManifest] = useState(null);
+  const [selfLink, setSelfLink] = useState(null);
+  const [localDataKey, setLocalDataKey] = useState(null);
+  const [publication, setPublication] = useState(null);
+  const [profile, setProfile] = useState(null);
+  const [isRTL, setIsRTL] = useState(false);
+  const [isFXL, setIsFXL] = useState(false);
+  const [hasDisplayTransformability, setHasDisplayTransformabilityState] = useState(false);
+  const handleManifestError = (error2, context) => {
+    console.error(`${context}:`, error2);
+    const processedError = ErrorHandler.process(error2, context);
+    setError(processedError);
+    setIsLoading(false);
+  };
+  useEffect(() => {
+    if (!url) {
+      const validationError = ErrorHandler.process(new Error("Manifest URL is required"), "Validation");
+      setError(validationError);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    const decodedUrl = decodeURIComponent(url);
+    const manifestLink = new Link({ href: decodedUrl });
+    const fetcher = customFetcher || new HttpFetcher(void 0);
+    try {
+      const fetched = fetcher.get(manifestLink);
+      fetched.link().then(async (link) => {
+        try {
+          const selfHref = link.toURL(decodedUrl);
+          setSelfLink(selfHref || null);
+          if (selfHref) {
+            setLocalDataKey(`${selfHref}-current-location`);
+            const manifestFetcher = customFetcher || new HttpFetcher(void 0, selfHref);
+            const manifestFetched = manifestFetcher.get(manifestLink);
+            const manifestData = await manifestFetched.readAsJSON();
+            setManifest(manifestData);
+            const manifestObj = Manifest.deserialize(manifestData);
+            manifestObj.setSelfLink(selfHref);
+            const detectedProfile = detectProfile(manifestObj);
+            setProfile(detectedProfile);
+            dispatch(setReaderProfile(detectedProfile));
+            const pub = new Publication({
+              manifest: manifestObj,
+              fetcher: manifestFetcher
+            });
+            if (detectedProfile === "epub") {
+              try {
+                const rawPositions = await pub.positionsFromManifest();
+                const positionsList = deserializePositions(rawPositions);
+                dispatch(setPositionsList(positionsList));
+              } catch (error2) {
+                console.error("Failed to fetch positions:", error2);
+                dispatch(setPositionsList([]));
+              }
+            }
+            if (detectedProfile === "audio") {
+              const tocLinks = manifestObj.toc?.items && manifestObj.toc.items.length > 0 ? manifestObj.toc.items : manifestObj.readingOrder?.items || [];
+              const publicationTitle = manifestObj.metadata.title.getTranslation("en");
+              let idCounter = 0;
+              const idGenerator = () => `toc-${++idCounter}`;
+              dispatch(setTocTree(buildTocTree(tocLinks, idGenerator, void 0, publicationTitle)));
+            }
+            setPublication(pub);
+            setIsLoading(false);
+          }
+        } catch (error2) {
+          handleManifestError(error2, "Error loading manifest");
+        }
+      });
+    } catch (error2) {
+      handleManifestError(error2, "Error loading manifest");
+    }
+  }, [url, customFetcher, dispatch]);
+  useEffect(() => {
+    if (!publication) return;
+    const mode = getScriptMode(publication.metadata);
+    dispatch(setScriptMode(mode));
+    const rtl = publication.metadata.effectiveReadingProgression === ReadingProgression.rtl;
+    setIsRTL(rtl);
+    dispatch(setRTL(rtl));
+    if (profile === "epub") {
+      const fxl = publication.metadata.effectiveLayout === Layout.fixed;
+      setIsFXL(fxl);
+      dispatch(setFXL(fxl));
+    }
+    const displayTransformability = publication.metadata.accessibility?.feature?.some(
+      (feature) => feature && feature.value === Feature.DISPLAY_TRANSFORMABILITY.value
+    ) || false;
+    setHasDisplayTransformabilityState(displayTransformability);
+    dispatch(setHasDisplayTransformability(displayTransformability));
+    if (profile === "epub" && publication) {
+      const fetchPositions = async () => {
+        try {
+          const positionsList = await publication.positionsFromManifest();
+          const deserializedPositionsList = deserializePositions(positionsList);
+          dispatch(setPositionsList(deserializedPositionsList));
+        } catch (error2) {
+          console.error("Failed to fetch positions:", error2);
+          dispatch(setPositionsList([]));
+        }
+      };
+      fetchPositions();
+    }
+  }, [publication, profile, dispatch]);
+  useEffect(() => {
+    if (error) {
+      onError(error);
+    }
+  }, [error, onError]);
+  return {
+    isLoading,
+    error,
+    publication,
+    manifest,
+    selfLink,
+    localDataKey,
+    profile,
+    isRTL,
+    isFXL,
+    hasDisplayTransformability
+  };
+};
+
 // src/components/Sheets/assets/styles/thorium-web.sheets.module.css
 var thorium_web_sheets_default = {
   fullscreen: "thorium_web_sheets_fullscreen",
@@ -624,12 +847,33 @@ var StatefulDocker = ({
     )
   ] }) });
 };
+var usePositionStorage = (key, customStorage) => {
+  const localStorageData = useLocalStorage(key);
+  const [customData, setCustomData] = useState(
+    () => customStorage ? customStorage.get() || null : null
+  );
+  if (customStorage) {
+    const set = (newValue) => {
+      if (newValue) {
+        customStorage.set(newValue);
+      }
+      setCustomData(newValue);
+    };
+    const get = () => customData;
+    return {
+      setLocalData: set,
+      getLocalData: get,
+      localData: customData
+    };
+  }
+  return localStorageData;
+};
+
+// src/components/Sheets/hooks/useWebkitPatch.ts
 var useWebkitPatch = (isOpen) => {
-  const profile = useAppSelector((state) => state.reader.profile);
-  const isWebPub = profile === "webPub";
-  const scroll = useAppSelector((state) => state.settings.scroll);
-  const isFXL = useAppSelector((state) => state.publication.isFXL);
-  const isScroll = isWebPub || scroll && !isFXL;
+  const isScroll = useIsScroll();
+  const scriptMode = useAppSelector((state) => state.publication.scriptMode);
+  const isHorizontalScroll = scriptMode === "cjk-vertical" || scriptMode === "mongolian-vertical";
   const prevIsOpen = usePrevious(isOpen);
   let getCframes;
   try {
@@ -642,10 +886,19 @@ var useWebkitPatch = (isOpen) => {
     if (isScroll && prevIsOpen && !isOpen && getCframes) {
       const container = document.getElementById("thorium-web-container");
       if (!container) return;
-      const currentHeight = container.offsetHeight;
-      container.style.height = `${currentHeight - 1}px`;
+      if (isHorizontalScroll) {
+        const currentWidth = container.offsetWidth;
+        container.style.width = `${currentWidth - 1}px`;
+      } else {
+        const currentHeight = container.offsetHeight;
+        container.style.height = `${currentHeight - 1}px`;
+      }
       setTimeout(() => {
-        container.style.height = "";
+        if (isHorizontalScroll) {
+          container.style.width = "";
+        } else {
+          container.style.height = "";
+        }
         if (!getCframes) return;
         const frames = getCframes();
         if (!frames || !Array.isArray(frames) || frames.length === 0) return;
@@ -657,16 +910,23 @@ var useWebkitPatch = (isOpen) => {
         } catch (e) {
           return;
         }
-        const currentScrollTop = frameWindow.document.scrollingElement.scrollTop;
-        if (currentScrollTop > 1) {
-          frameWindow.document.scrollingElement.scrollTop = currentScrollTop - 1;
+        if (isHorizontalScroll) {
+          const currentScrollLeft = frameWindow.document.scrollingElement.scrollLeft;
+          const nudge = currentScrollLeft <= 0 ? -1 : 1;
+          frameWindow.document.scrollingElement.scrollLeft = currentScrollLeft + nudge;
+          frameWindow.document.scrollingElement.scrollLeft = currentScrollLeft;
         } else {
-          frameWindow.document.scrollingElement.scrollTop = currentScrollTop + 1;
+          const currentScrollTop = frameWindow.document.scrollingElement.scrollTop;
+          if (currentScrollTop > 1) {
+            frameWindow.document.scrollingElement.scrollTop = currentScrollTop - 1;
+          } else {
+            frameWindow.document.scrollingElement.scrollTop = currentScrollTop + 1;
+          }
+          frameWindow.document.scrollingElement.scrollTop = currentScrollTop;
         }
-        frameWindow.document.scrollingElement.scrollTop = currentScrollTop;
       }, 0);
     }
-  }, [isScroll, isOpen, prevIsOpen, getCframes]);
+  }, [isScroll, isHorizontalScroll, isOpen, prevIsOpen, getCframes]);
 };
 var StatefulPopoverSheet = ({
   id,
@@ -702,7 +962,7 @@ var StatefulPopoverSheet = ({
     }
   }, [isOpen]);
   useWebkitPatch(!!isOpen);
-  if (React24.Children.toArray(children).length > 0) {
+  if (React22.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThPopover,
       {
@@ -811,7 +1071,7 @@ var StatefulModalBase = ({
     }
   }, [isOpen]);
   useWebkitPatch(!!isOpen);
-  if (React24.Children.toArray(children).length > 0) {
+  if (React22.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThModal,
       {
@@ -1070,7 +1330,7 @@ var StatefulBottomSheet = ({
         return "default";
     }
   };
-  if (React24.Children.toArray(children).length > 0) {
+  if (React22.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThBottomSheet,
       {
@@ -1222,7 +1482,7 @@ var StatefulDockedSheet = ({
       return direction === "ltr" /* ltr */ ? thorium_web_sheets_default.dockedRightBorder : thorium_web_sheets_default.dockedLeftBorder;
     }
   }, [flow, direction]);
-  if (React24.Children.toArray(children).length > 0) {
+  if (React22.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThDockedPanel,
       {
@@ -1322,7 +1582,7 @@ var StatefulCompactPopoverSheet = ({
     updateState: resetFocus
   });
   useWebkitPatch(!!isOpen);
-  if (React24.Children.toArray(children).length > 0) {
+  if (React22.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
       Popover,
       {
@@ -1974,6 +2234,7 @@ var StatefulSpacingGroup = () => {
   const { preferences } = usePreferences();
   const { t } = useI18n();
   const { spacingSettingsComponentsMap } = usePlugins();
+  const { mainSpacingSettingsKeys, subPanelSpacingSettingsKeys } = useFilteredPreferenceKeys();
   const dispatch = useAppDispatch();
   const setSpacingContainer = useCallback(() => {
     dispatch(setSettingsContainer("spacing" /* spacing */));
@@ -1986,7 +2247,11 @@ var StatefulSpacingGroup = () => {
       moreTooltip: t("reader.settings.spacing.advanced.tooltip"),
       onPressMore: setSpacingContainer,
       componentsMap: spacingSettingsComponentsMap,
-      prefs: preferences.settings.spacing,
+      prefs: {
+        main: mainSpacingSettingsKeys,
+        subPanel: preferences.settings.spacing?.subPanel === null ? null : subPanelSpacingSettingsKeys,
+        header: preferences.settings.spacing?.header
+      },
       defaultPrefs: {
         main: defaultSpacingSettingsMain,
         subPanel: defaultSpacingSettingsSubpanel
@@ -1995,10 +2260,9 @@ var StatefulSpacingGroup = () => {
   ) });
 };
 var StatefulSpacingGroupContainer = () => {
-  const { preferences } = usePreferences();
-  const displayOrder = preferences.settings.spacing?.subPanel || defaultSpacingSettingsSubpanel;
+  const { subPanelSpacingSettingsKeys } = useFilteredPreferenceKeys();
   const { spacingSettingsComponentsMap } = usePlugins();
-  return /* @__PURE__ */ jsx(Fragment, { children: displayOrder.map((key) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: subPanelSpacingSettingsKeys.map((key) => {
     const match = spacingSettingsComponentsMap[key];
     if (!match) {
       console.warn(`Setting key "${key}" not found in the plugin registry while present in preferences.`);
@@ -2011,6 +2275,7 @@ var StatefulTextGroup = () => {
   const { preferences } = usePreferences();
   const { t } = useI18n();
   const { textSettingsComponentsMap } = usePlugins();
+  const { mainTextSettingsKeys, subPanelTextSettingsKeys } = useFilteredPreferenceKeys();
   const dispatch = useAppDispatch();
   const setTextContainer = useCallback(() => {
     dispatch(setSettingsContainer("text" /* text */));
@@ -2023,7 +2288,11 @@ var StatefulTextGroup = () => {
       moreTooltip: t("reader.settings.text.advanced.tooltip"),
       onPressMore: setTextContainer,
       componentsMap: textSettingsComponentsMap,
-      prefs: preferences.settings.text,
+      prefs: {
+        main: mainTextSettingsKeys,
+        subPanel: preferences.settings.text?.subPanel === null ? null : subPanelTextSettingsKeys,
+        header: preferences.settings.text?.header
+      },
       defaultPrefs: {
         main: defaultTextSettingsMain,
         subPanel: defaultTextSettingsSubpanel
@@ -2032,10 +2301,9 @@ var StatefulTextGroup = () => {
   ) });
 };
 var StatefulTextGroupContainer = () => {
-  const { preferences } = usePreferences();
-  const displayOrder = preferences.settings.text?.subPanel || defaultTextSettingsSubpanel;
+  const { subPanelTextSettingsKeys } = useFilteredPreferenceKeys();
   const { textSettingsComponentsMap } = usePlugins();
-  return /* @__PURE__ */ jsx(Fragment, { children: displayOrder.map((key) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: subPanelTextSettingsKeys.map((key) => {
     const match = textSettingsComponentsMap[key];
     if (!match) {
       console.warn(`Action key "${key}" not found in the plugin registry while present in preferences.`);
@@ -2055,7 +2323,7 @@ var StatefulVisualSettingsContainer = ({
     subPanelSpacingSettingsKeys,
     subPanelTextSettingsKeys,
     webPubSettingsKeys
-  } = usePreferenceKeys();
+  } = useFilteredPreferenceKeys();
   const { preferences } = usePreferences();
   const { t } = useI18n();
   const { settingsComponentsMap } = usePlugins();
@@ -2344,6 +2612,7 @@ var TocContent = ({
         selectedKeys: tocEntry ? [tocEntry] : [],
         expandedKeys,
         onExpandedChange,
+        dir: isRTL ? "rtl" : "ltr",
         children: function renderItem(item) {
           return /* @__PURE__ */ jsxs(
             TreeItem,
@@ -2382,12 +2651,11 @@ var StatefulTocContainer = ({ triggerRef }) => {
   const tocEntry = unstableTimeline?.toc?.currentEntry ?? void 0;
   const tocEntryId = tocEntry?.id;
   const tocTree = unstableTimeline?.toc?.tree;
-  const direction = useAppSelector((state) => state.reader.direction);
-  const isRTL = direction === "rtl" /* rtl */;
+  const { goLink, getScriptMode: getScriptMode2 } = useNavigator().unified;
+  const isRTL = getScriptMode2() === "rtl";
   const profile = useAppSelector((state) => state.reader.profile);
   const actionState = useAppSelector((state) => profile ? state.actions.keys[profile]["toc" /* toc */] : void 0);
   const dispatch = useAppDispatch();
-  const { goLink } = useNavigator().unified;
   const docking = useDocking("toc" /* toc */);
   const sheetType = docking.sheetType;
   const setOpen = useCallback((value) => {
@@ -2536,7 +2804,7 @@ var useGridNavigation = ({
   onFocus
 }) => {
   const visibleColumns = useGridTemplate(containerRef, "columns");
-  const onKeyDown = React24.useCallback((e) => {
+  const onKeyDown = React22.useCallback((e) => {
     const columns = visibleColumns || 1;
     if (columns <= 1 || !items.current?.length) return;
     const currentIdx = items.current.findIndex((val) => {
@@ -2657,7 +2925,26 @@ var StatefulRadioGroup = ({
     }
   ) });
 };
-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" }) });
+
+// src/components/Settings/helpers/settingsKeyMapping.ts
+var SETTINGS_KEY_TO_PREFERENCE = {
+  ["columns" /* columns */]: "columnCount",
+  ["fontFamily" /* fontFamily */]: "fontFamily",
+  ["fontWeight" /* fontWeight */]: "fontWeight",
+  ["hyphens" /* hyphens */]: "hyphens",
+  ["layout" /* layout */]: "scroll",
+  ["letterSpacing" /* letterSpacing */]: "letterSpacing",
+  ["ligatures" /* ligatures */]: "ligatures",
+  ["lineHeight" /* lineHeight */]: "lineHeight",
+  ["paragraphIndent" /* paragraphIndent */]: "paragraphIndent",
+  ["paragraphSpacing" /* paragraphSpacing */]: "paragraphSpacing",
+  ["textAlign" /* textAlign */]: "textAlign",
+  ["textNormalize" /* textNormalize */]: "textNormalization",
+  ["noRuby" /* noRuby */]: "noRuby",
+  ["wordSpacing" /* wordSpacing */]: "wordSpacing",
+  ["zoom" /* zoom */]: "zoom"
+};
+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" }) });
 var article_default = SvgArticle;
@@ -2665,9 +2952,7 @@ var SvgMenuBook = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.
 var menu_book_default = SvgMenuBook;
 var StatefulColumns = () => {
   const { t } = useI18n();
-  const scroll = useAppSelector((state) => state.settings.scroll);
-  const isFXL = useAppSelector((state) => state.publication.isFXL);
-  const isScroll = scroll && !isFXL;
+  const isScroll = useIsScroll();
   const columnCount = useAppSelector((state) => state.settings.columnCount) || "auto";
   const [effectiveValue, setEffectiveValue] = useState(columnCount);
   const fontSize = useAppSelector((state) => state.settings.fontSize);
@@ -2686,6 +2971,7 @@ var StatefulColumns = () => {
   }, [fontSize, fontFamily, wordSpacing, letterSpacing, publisherStyles]);
   const dispatch = useAppDispatch();
   const { submitPreferences, getSetting } = useEpubNavigator();
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["columns" /* columns */];
   const items = useMemo(() => [
     {
       id: "auto",
@@ -2716,12 +3002,12 @@ var StatefulColumns = () => {
   }, []);
   const updatePreference = useCallback(async (value) => {
     const colCount = value === "auto" ? null : Number(value);
-    await submitPreferences({ columnCount: colCount });
-    updateEffectiveValue(value, getSetting("columnCount"));
+    await submitPreferences({ [prefKey]: colCount });
+    updateEffectiveValue(value, getSetting(prefKey));
     dispatch(setColumnCount(value));
-  }, [submitPreferences, getSetting, updateEffectiveValue, dispatch]);
+  }, [prefKey, submitPreferences, getSetting, updateEffectiveValue, dispatch]);
   const debouncedUpdate = useCallback(() => {
-    const update = () => updateEffectiveValue(columnCount, getSetting("columnCount"));
+    const update = () => updateEffectiveValue(columnCount, getSetting(prefKey));
     debounce(update, 50)();
   }, [columnCount, layoutSettings, getSetting, updateEffectiveValue]);
   useEffect(() => {
@@ -2766,7 +3052,7 @@ var StatefulDropdown = ({
           className: thorium_web_reader_settings_default.label,
           ...compounds?.label || {}
         },
-        ...React24.isValidElement(compounds?.button) ? { button: compounds.button } : {
+        ...React22.isValidElement(compounds?.button) ? { button: compounds.button } : {
           button: {
             className: thorium_web_reader_settings_default.dropdownButton,
             ...compounds?.button || {}
@@ -2777,7 +3063,7 @@ var StatefulDropdown = ({
           placement: "bottom",
           ...compounds?.popover || {}
         },
-        ...React24.isValidElement(compounds?.listbox) ? { listbox: compounds.listbox } : {
+        ...React22.isValidElement(compounds?.listbox) ? { listbox: compounds.listbox } : {
           listbox: {
             className: thorium_web_reader_settings_default.dropdownListbox,
             ...compounds?.listbox || {}
@@ -2791,6 +3077,27 @@ var StatefulDropdown = ({
     }
   );
 };
+
+// src/components/Settings/hooks/useReaderSetting.ts
+function useReaderSetting(key) {
+  return useAppSelector((state) => {
+    const isWebPub = state.reader.profile === "webPub";
+    if (key === "zoom") {
+      if (isWebPub) {
+        const val3 = state.webPubSettings.zoom;
+        return val3 !== void 0 ? val3 : initialWebPubSettingsState.zoom;
+      }
+      const val2 = state.settings.fontSize;
+      return val2 !== void 0 ? val2 : initialSettingsState.fontSize;
+    }
+    if (isWebPub) {
+      const val2 = state.webPubSettings[key];
+      return val2 !== void 0 ? val2 : initialWebPubSettingsState[key];
+    }
+    const val = state.settings[key];
+    return val !== void 0 ? val : initialSettingsState[key];
+  });
+}
 var StatefulFontFamily = ({ standalone = true }) => {
   const { getFontMetadata, getFontsList } = usePreferences();
   const { t } = useI18n();
@@ -2810,10 +3117,8 @@ var StatefulFontFamily = ({ standalone = true }) => {
   const isWebPub = profile === "webPub";
   const fontLanguage = useAppSelector((state) => state.publication.fontLanguage) || "default";
   const fontPreferences = getFontsList({ language: fontLanguage });
-  const fontFamily = useAppSelector((state) => {
-    const fontSettings = isWebPub ? state.webPubSettings.fontFamily : state.settings.fontFamily;
-    return fontSettings[fontLanguage] ?? "publisher";
-  });
+  const fontFamilySettings = useReaderSetting("fontFamily");
+  const fontFamily = fontFamilySettings[fontLanguage] ?? "publisher";
   const availableFontIds = /* @__PURE__ */ new Set([
     "publisher",
     ...Object.keys(fontPreferences)
@@ -2836,12 +3141,13 @@ var StatefulFontFamily = ({ standalone = true }) => {
   ]);
   const dispatch = useAppDispatch();
   const { getSetting, submitPreferences } = useNavigator().visual;
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["fontFamily" /* fontFamily */];
   const updatePreference = useCallback(async (key) => {
     if (!key || key === fontFamily) return;
     const selectedOption = fontFamilyOptions.current.find((option) => option.id === key);
     if (selectedOption) {
-      await submitPreferences({ fontFamily: selectedOption.value });
-      const currentSetting = getSetting("fontFamily");
+      await submitPreferences({ [prefKey]: selectedOption.value });
+      const currentSetting = getSetting(prefKey);
       if (currentSetting === null) {
         if (isWebPub) {
           dispatch(setWebPubFontFamily({ key: fontLanguage, value: "publisher" }));
@@ -2863,7 +3169,7 @@ var StatefulFontFamily = ({ standalone = true }) => {
         }
       }
     }
-  }, [isWebPub, fontLanguage, fontFamily, submitPreferences, getSetting, fontPreferences, getFontMetadata, dispatch]);
+  }, [prefKey, isWebPub, fontLanguage, fontFamily, submitPreferences, getSetting, fontPreferences, getFontMetadata, dispatch]);
   return /* @__PURE__ */ jsx(
     StatefulDropdown,
     {
@@ -2902,9 +3208,10 @@ var UnstableStatefulFontWeight = ({ standalone = true }) => {
   const { t } = useI18n();
   const profile = useAppSelector((state) => state.reader.profile);
   const isWebPub = profile === "webPub";
-  const fontWeight = useAppSelector((state) => isWebPub ? state.webPubSettings.fontWeight : state.settings.fontWeight) ?? 400;
+  const fontWeight = useReaderSetting("fontWeight");
   const dispatch = useAppDispatch();
   const { getSetting, submitPreferences } = useNavigator().visual;
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["fontWeight" /* fontWeight */];
   const items = [
     {
       id: "default",
@@ -2929,14 +3236,14 @@ var UnstableStatefulFontWeight = ({ standalone = true }) => {
   }, [fontWeight]);
   const updatePreference = useCallback(async (value) => {
     const fontWeightValue = value === "default" ? 400 : 700;
-    await submitPreferences({ fontWeight: fontWeightValue });
-    const effectiveSetting = getSetting("fontWeight");
+    await submitPreferences({ [prefKey]: fontWeightValue });
+    const effectiveSetting = getSetting(prefKey);
     if (isWebPub) {
       dispatch(setWebPubFontWeight(effectiveSetting));
     } else {
       dispatch(setFontWeight(effectiveSetting));
     }
-  }, [isWebPub, submitPreferences, getSetting, dispatch]);
+  }, [prefKey, isWebPub, submitPreferences, getSetting, dispatch]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulRadioGroup,
     {
@@ -2980,19 +3287,20 @@ var StatefulHyphens = ({ standalone = true }) => {
   const { t } = useI18n();
   const profile = useAppSelector((state) => state.reader.profile);
   const isWebPub = profile === "webPub";
-  const hyphens = useAppSelector((state) => isWebPub ? state.webPubSettings.hyphens : state.settings.hyphens) ?? false;
-  const textAlign = useAppSelector((state) => isWebPub ? state.webPubSettings.textAlign : state.settings.textAlign) ?? "publisher" /* publisher */;
+  const hyphens = useReaderSetting("hyphens");
+  const textAlign = useReaderSetting("textAlign");
   const dispatch = useAppDispatch();
   const { getSetting, submitPreferences } = useNavigator().visual;
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["hyphens" /* hyphens */];
   const updatePreference = useCallback(async (value) => {
-    await submitPreferences({ hyphens: value });
-    const effectiveSetting = getSetting("hyphens");
+    await submitPreferences({ [prefKey]: value });
+    const effectiveSetting = getSetting(prefKey);
     if (isWebPub) {
       dispatch(setWebPubHyphens(effectiveSetting));
     } else {
       dispatch(setHyphens(effectiveSetting));
     }
-  }, [isWebPub, submitPreferences, getSetting, dispatch]);
+  }, [prefKey, isWebPub, submitPreferences, getSetting, dispatch]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulSwitch,
     {
@@ -3011,9 +3319,7 @@ var SvgDocs = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/
 var docs_default = SvgDocs;
 var StatefulLayout = () => {
   const { t } = useI18n();
-  const scroll = useAppSelector((state) => state.settings.scroll);
-  const isFXL = useAppSelector((state) => state.publication.isFXL);
-  const isScroll = scroll && !isFXL;
+  const isScroll = useIsScroll();
   const dispatch = useAppDispatch();
   const { getSetting, submitPreferences } = useEpubNavigator();
   const items = [
@@ -3030,11 +3336,12 @@ var StatefulLayout = () => {
       value: "scroll_option" /* scroll */
     }
   ];
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["layout" /* layout */];
   const updatePreference = useCallback(async (value) => {
     const derivedValue = value === "scroll_option" /* scroll */;
-    await submitPreferences({ scroll: derivedValue });
-    dispatch(setScroll(getSetting("scroll")));
-  }, [submitPreferences, getSetting, dispatch]);
+    await submitPreferences({ [prefKey]: derivedValue });
+    dispatch(setScroll(getSetting(prefKey)));
+  }, [prefKey, submitPreferences, getSetting, dispatch]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulRadioGroup,
     {
@@ -3177,32 +3484,25 @@ var StatefulSlider = ({
   ) });
 };
 function useSettingsComponentStatus(options) {
-  const { settingsKey, publicationType, componentType, additionalCondition = true } = options;
+  const { settingsKey, publicationType, additionalCondition = true } = options;
   const { spacingSettingsComponentsMap, textSettingsComponentsMap, settingsComponentsMap } = usePlugins();
-  const { preferences } = usePreferences();
+  const { reflowSettingsKeys, fxlSettingsKeys, webPubSettingsKeys, mainTextSettingsKeys, subPanelTextSettingsKeys, mainSpacingSettingsKeys, subPanelSpacingSettingsKeys } = useFilteredPreferenceKeys();
   return useMemo(() => {
     const isComponentRegistered = !!(settingsComponentsMap?.[settingsKey] || spacingSettingsComponentsMap?.[settingsKey] || textSettingsComponentsMap?.[settingsKey]);
     let isInOrder = false;
     switch (publicationType) {
       case "reflow":
-        isInOrder = preferences.settings?.reflowOrder?.includes(settingsKey) || false;
+        isInOrder = reflowSettingsKeys.includes(settingsKey) || false;
         break;
       case "fxl":
-        isInOrder = preferences.settings?.fxlOrder?.includes(settingsKey) || false;
+        isInOrder = fxlSettingsKeys.includes(settingsKey) || false;
         break;
       case "webpub":
-        isInOrder = preferences.settings?.webPubOrder?.includes(settingsKey) || false;
+        isInOrder = webPubSettingsKeys.includes(settingsKey) || false;
         break;
     }
-    let isInMainPanel = false;
-    let isInSubPanel = false;
-    if (componentType === "text") {
-      isInMainPanel = preferences.settings?.text?.main?.includes(settingsKey) || false;
-      isInSubPanel = preferences.settings?.text?.subPanel?.includes(settingsKey) || false;
-    } else if (componentType === "spacing") {
-      isInMainPanel = preferences.settings?.spacing?.main?.includes(settingsKey) || false;
-      isInSubPanel = preferences.settings?.spacing?.subPanel?.includes(settingsKey) || false;
-    }
+    const isInMainPanel = mainTextSettingsKeys.includes(settingsKey) || mainSpacingSettingsKeys.includes(settingsKey) || false;
+    const isInSubPanel = subPanelTextSettingsKeys.includes(settingsKey) || subPanelSpacingSettingsKeys.includes(settingsKey) || false;
     const isDisplayed = isInOrder || (isInMainPanel || isInSubPanel) && additionalCondition;
     const isComponentUsed = isComponentRegistered && isDisplayed;
     return {
@@ -3215,29 +3515,25 @@ function useSettingsComponentStatus(options) {
   }, [
     settingsKey,
     publicationType,
-    componentType,
     additionalCondition,
-    preferences,
+    reflowSettingsKeys,
+    fxlSettingsKeys,
+    webPubSettingsKeys,
+    mainTextSettingsKeys,
+    subPanelTextSettingsKeys,
+    mainSpacingSettingsKeys,
+    subPanelSpacingSettingsKeys,
     spacingSettingsComponentsMap,
     textSettingsComponentsMap,
     settingsComponentsMap
   ]);
 }
-
-// src/components/Settings/Spacing/hooks/useSpacingPresets.ts
 var useSpacingPresets = () => {
   const readerProfile = useAppSelector((state) => state.reader.profile);
   const isWebPub = readerProfile === "webPub";
   const isFXL = useAppSelector((state) => state.publication.isFXL);
-  const settings = useAppSelector(
-    (state) => isWebPub ? state.webPubSettings : state.settings
-  );
-  const spacing = settings?.spacing || {
-    preset: "publisher" /* publisher */,
-    custom: {},
-    baseline: {}
-  };
-  const { reflowSpacingPresetKeys, fxlSpacingPresetKeys, webPubSpacingPresetKeys } = usePreferenceKeys();
+  const spacing = useReaderSetting("spacing");
+  const { reflowSpacingPresetKeys, fxlSpacingPresetKeys, webPubSpacingPresetKeys } = useFilteredPreferenceKeys();
   const { preferences } = usePreferences();
   const dispatch = useAppDispatch();
   const spacingKeys = useMemo(() => {
@@ -3246,16 +3542,13 @@ var useSpacingPresets = () => {
   const { isComponentUsed: shouldApplyPresets } = useSettingsComponentStatus({
     settingsKey: "spacingPresets" /* spacingPresets */,
     publicationType: isWebPub ? "webpub" : isFXL ? "fxl" : "reflow",
-    componentType: "spacing",
     additionalCondition: spacingKeys.length > 0
   });
-  const {
-    letterSpacing,
-    lineHeight,
-    paragraphIndent,
-    paragraphSpacing,
-    wordSpacing
-  } = settings || {};
+  const letterSpacing = useReaderSetting("letterSpacing");
+  const lineHeight = useReaderSetting("lineHeight");
+  const paragraphIndent = useReaderSetting("paragraphIndent");
+  const paragraphSpacing = useReaderSetting("paragraphSpacing");
+  const wordSpacing = useReaderSetting("wordSpacing");
   const getBaseReduxValue = (key) => {
     switch (key) {
       case "letterSpacing" /* letterSpacing */:
@@ -3450,24 +3743,6 @@ var useSpacingPresets = () => {
     setPublisherStyles: setPublisherStylesAction
   };
 };
-var useEffectiveRange = (preferred, supportedRange, presets) => {
-  return useMemo(() => {
-    let range;
-    if (!supportedRange) {
-      range = preferred;
-    } else {
-      const prefMin = Math.min(...preferred);
-      const prefMax = Math.max(...preferred);
-      const supMin = Math.min(...supportedRange);
-      const supMax = Math.max(...supportedRange);
-      range = prefMin >= supMin && prefMax <= supMax ? preferred : supportedRange;
-    }
-    if (!presets) return { range };
-    const [min, max] = [Math.min(...range), Math.max(...range)];
-    const effectivePresets = presets.filter((p) => p >= min && p <= max);
-    return { range, presets: effectivePresets };
-  }, [preferred, supportedRange, presets]);
-};
 
 // src/components/Settings/hooks/usePlaceholder.ts
 var usePlaceholder = (placeholder, range, format) => {
@@ -3506,6 +3781,24 @@ var usePlaceholder = (placeholder, range, format) => {
   }
   return void 0;
 };
+var useEffectiveRange = (preferred, supportedRange, presets) => {
+  return useMemo(() => {
+    let range;
+    if (!supportedRange) {
+      range = preferred;
+    } else {
+      const prefMin = Math.min(...preferred);
+      const prefMax = Math.max(...preferred);
+      const supMin = Math.min(...supportedRange);
+      const supMax = Math.max(...supportedRange);
+      range = prefMin >= supMin && prefMax <= supMax ? preferred : supportedRange;
+    }
+    if (!presets) return { range };
+    const [min, max] = [Math.min(...range), Math.max(...range)];
+    const effectivePresets = presets.filter((p) => p >= min && p <= max);
+    return { range, presets: effectivePresets };
+  }, [preferred, supportedRange, presets]);
+};
 var StatefulLetterSpacing = ({ standalone = true }) => {
   const { preferences } = usePreferences();
   const { t } = useI18n();
@@ -3521,12 +3814,13 @@ var StatefulLetterSpacing = ({ standalone = true }) => {
   const placeholderText = usePlaceholder(letterSpacingRangeConfig.placeholder, letterSpacingRangeConfig.range, "percent");
   const { getEffectiveSpacingValue, setLetterSpacing: setLetterSpacing2, canBeReset } = useSpacingPresets();
   const letterSpacing = getEffectiveSpacingValue("letterSpacing" /* letterSpacing */);
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["letterSpacing" /* letterSpacing */];
   const updatePreference = useCallback(async (value) => {
     await submitPreferences({
-      letterSpacing: Array.isArray(value) ? value[0] : value
+      [prefKey]: Array.isArray(value) ? value[0] : value
     });
-    setLetterSpacing2(getSetting("letterSpacing"));
-  }, [submitPreferences, getSetting, setLetterSpacing2]);
+    setLetterSpacing2(getSetting(prefKey));
+  }, [prefKey, submitPreferences, getSetting, setLetterSpacing2]);
   return /* @__PURE__ */ jsx(Fragment, { children: letterSpacingRangeConfig.variant === "numberField" /* numberField */ ? /* @__PURE__ */ jsx(
     StatefulNumberField,
     {
@@ -3586,8 +3880,9 @@ var StatefulLineHeight = ({ standalone = true }) => {
   const { preferences } = usePreferences();
   const profile = useAppSelector((state) => state.reader.profile);
   const isWebPub = profile === "webPub";
-  const publisherStyles = useAppSelector((state) => isWebPub ? state.webPubSettings.publisherStyles : state.settings.publisherStyles) ?? true;
+  const publisherStyles = useReaderSetting("publisherStyles");
   const { getSetting, submitPreferences, preferencesEditor } = useNavigator().visual;
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["lineHeight" /* lineHeight */];
   const { getEffectiveSpacingValue, setLineHeight: setLineHeight2 } = useSpacingPresets();
   const lineHeight = getEffectiveSpacingValue("lineHeight" /* lineHeight */);
   const lineHeightOptions = useLineHeight();
@@ -3637,12 +3932,12 @@ var StatefulLineHeight = ({ standalone = true }) => {
   const updatePreference = useCallback(async (value) => {
     const computedValue = value === "publisher" /* publisher */ ? null : lineHeightOptions[value];
     await submitPreferences({
-      lineHeight: computedValue
+      [prefKey]: computedValue
     });
-    const currentLineHeight = getSetting("lineHeight");
+    const currentLineHeight = getSetting(prefKey);
     const currentDisplayLineHeightOption = Object.entries(lineHeightOptions).find(([key, value2]) => value2 === currentLineHeight)?.[0];
     setLineHeight2(currentDisplayLineHeightOption);
-  }, [submitPreferences, getSetting, setLineHeight2, lineHeightOptions]);
+  }, [prefKey, submitPreferences, getSetting, setLineHeight2, lineHeightOptions]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulRadioGroup,
     {
@@ -3670,12 +3965,13 @@ var StatefulParagraphIndent = ({ standalone = true }) => {
   const placeholderText = usePlaceholder(paragraphIndentRangeConfig.placeholder, paragraphIndentRangeConfig.range, "multiplier");
   const { getEffectiveSpacingValue, setParagraphIndent: setParagraphIndent2, canBeReset } = useSpacingPresets();
   const paragraphIndent = getEffectiveSpacingValue("paragraphIndent" /* paragraphIndent */);
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["paragraphIndent" /* paragraphIndent */];
   const updatePreference = useCallback(async (value) => {
     await submitPreferences({
-      paragraphIndent: Array.isArray(value) ? value[0] : value
+      [prefKey]: Array.isArray(value) ? value[0] : value
     });
-    setParagraphIndent2(getSetting("paragraphIndent"));
-  }, [submitPreferences, getSetting, setParagraphIndent2]);
+    setParagraphIndent2(getSetting(prefKey));
+  }, [prefKey, submitPreferences, getSetting, setParagraphIndent2]);
   return /* @__PURE__ */ jsx(Fragment, { children: paragraphIndentRangeConfig.variant === "numberField" /* numberField */ ? /* @__PURE__ */ jsx(
     StatefulNumberField,
     {
@@ -3736,12 +4032,13 @@ var StatefulParagraphSpacing = ({ standalone = true }) => {
   const placeholderText = usePlaceholder(paragraphSpacingRangeConfig.placeholder, paragraphSpacingRangeConfig.range, "multiplier");
   const { getEffectiveSpacingValue, setParagraphSpacing: setParagraphSpacing2, canBeReset } = useSpacingPresets();
   const paragraphSpacing = getEffectiveSpacingValue("paragraphSpacing" /* paragraphSpacing */);
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["paragraphSpacing" /* paragraphSpacing */];
   const updatePreference = useCallback(async (value) => {
     await submitPreferences({
-      paragraphSpacing: Array.isArray(value) ? value[0] : value
+      [prefKey]: Array.isArray(value) ? value[0] : value
     });
-    setParagraphSpacing2(getSetting("paragraphSpacing"));
-  }, [submitPreferences, getSetting, setParagraphSpacing2]);
+    setParagraphSpacing2(getSetting(prefKey));
+  }, [prefKey, submitPreferences, getSetting, setParagraphSpacing2]);
   return /* @__PURE__ */ jsx(Fragment, { children: paragraphSpacingRangeConfig.variant === "numberField" /* numberField */ ? /* @__PURE__ */ jsx(
     StatefulNumberField,
     {
@@ -3789,8 +4086,28 @@ var StatefulParagraphSpacing = ({ standalone = true }) => {
 };
 var StatefulPublisherStyles = ({ standalone = true }) => {
   const { t } = useI18n();
-  const publisherStyles = useAppSelector((state) => state.settings.publisherStyles);
+  const publisherStyles = useReaderSetting("publisherStyles");
   const { getEffectiveSpacingValue, setPublisherStyles: setPublisherStyles2 } = useSpacingPresets();
+  const { isComponentUsed: isLineHeightUsed } = useSettingsComponentStatus({
+    settingsKey: "lineHeight" /* lineHeight */,
+    publicationType: "reflow"
+  });
+  const { isComponentUsed: isParagraphIndentUsed } = useSettingsComponentStatus({
+    settingsKey: "paragraphIndent" /* paragraphIndent */,
+    publicationType: "reflow"
+  });
+  const { isComponentUsed: isParagraphSpacingUsed } = useSettingsComponentStatus({
+    settingsKey: "paragraphSpacing" /* paragraphSpacing */,
+    publicationType: "reflow"
+  });
+  const { isComponentUsed: isLetterSpacingUsed } = useSettingsComponentStatus({
+    settingsKey: "letterSpacing" /* letterSpacing */,
+    publicationType: "reflow"
+  });
+  const { isComponentUsed: isWordSpacingUsed } = useSettingsComponentStatus({
+    settingsKey: "wordSpacing" /* wordSpacing */,
+    publicationType: "reflow"
+  });
   const lineHeight = getEffectiveSpacingValue("lineHeight" /* lineHeight */);
   const paragraphIndent = getEffectiveSpacingValue("paragraphIndent" /* paragraphIndent */);
   const paragraphSpacing = getEffectiveSpacingValue("paragraphSpacing" /* paragraphSpacing */);
@@ -3798,23 +4115,49 @@ var StatefulPublisherStyles = ({ standalone = true }) => {
   const wordSpacing = getEffectiveSpacingValue("wordSpacing" /* wordSpacing */);
   const lineHeightOptions = useLineHeight();
   const { submitPreferences } = useNavigator().visual;
+  const lineHeightPrefKey = SETTINGS_KEY_TO_PREFERENCE["lineHeight" /* lineHeight */];
+  const paragraphIndentPrefKey = SETTINGS_KEY_TO_PREFERENCE["paragraphIndent" /* paragraphIndent */];
+  const paragraphSpacingPrefKey = SETTINGS_KEY_TO_PREFERENCE["paragraphSpacing" /* paragraphSpacing */];
+  const letterSpacingPrefKey = SETTINGS_KEY_TO_PREFERENCE["letterSpacing" /* letterSpacing */];
+  const wordSpacingPrefKey = SETTINGS_KEY_TO_PREFERENCE["wordSpacing" /* wordSpacing */];
   const updatePreference = useCallback(async (isSelected) => {
-    const values = isSelected ? {
-      lineHeight: null,
-      paragraphIndent: null,
-      paragraphSpacing: null,
-      letterSpacing: null,
-      wordSpacing: null
-    } : {
-      lineHeight: lineHeight === "publisher" /* publisher */ ? null : lineHeightOptions[lineHeight],
-      paragraphIndent,
-      paragraphSpacing,
-      letterSpacing,
-      wordSpacing
-    };
+    const values = {};
+    if (isSelected) {
+      if (isLineHeightUsed) {
+        values[lineHeightPrefKey] = null;
+      }
+      if (isParagraphIndentUsed) {
+        values[paragraphIndentPrefKey] = null;
+      }
+      if (isParagraphSpacingUsed) {
+        values[paragraphSpacingPrefKey] = null;
+      }
+      if (isLetterSpacingUsed) {
+        values[letterSpacingPrefKey] = null;
+      }
+      if (isWordSpacingUsed) {
+        values[wordSpacingPrefKey] = null;
+      }
+    } else {
+      if (isLineHeightUsed) {
+        values[lineHeightPrefKey] = lineHeight === "publisher" /* publisher */ ? null : lineHeightOptions[lineHeight];
+      }
+      if (isParagraphIndentUsed) {
+        values[paragraphIndentPrefKey] = paragraphIndent;
+      }
+      if (isParagraphSpacingUsed) {
+        values[paragraphSpacingPrefKey] = paragraphSpacing;
+      }
+      if (isLetterSpacingUsed) {
+        values[letterSpacingPrefKey] = letterSpacing;
+      }
+      if (isWordSpacingUsed) {
+        values[wordSpacingPrefKey] = wordSpacing;
+      }
+    }
     await submitPreferences(values);
     setPublisherStyles2(isSelected ? true : false);
-  }, [submitPreferences, setPublisherStyles2, lineHeight, paragraphIndent, paragraphSpacing, letterSpacing, wordSpacing, lineHeightOptions]);
+  }, [submitPreferences, setPublisherStyles2, lineHeight, paragraphIndent, paragraphSpacing, letterSpacing, wordSpacing, lineHeightOptions, lineHeightPrefKey, paragraphIndentPrefKey, paragraphSpacingPrefKey, letterSpacingPrefKey, wordSpacingPrefKey, isLineHeightUsed, isParagraphIndentUsed, isParagraphSpacingUsed, isLetterSpacingUsed, isWordSpacingUsed]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulSwitch,
     {
@@ -3851,15 +4194,41 @@ var iconMap = {
 };
 var StatefulSpacingPresets = ({ standalone }) => {
   const { t } = useI18n();
-  const { reflowSpacingPresetKeys, fxlSpacingPresetKeys, webPubSpacingPresetKeys, subPanelSpacingSettingsKeys } = usePreferenceKeys();
+  const { reflowSpacingPresetKeys, fxlSpacingPresetKeys, webPubSpacingPresetKeys, subPanelSpacingSettingsKeys } = useFilteredPreferenceKeys();
   const profile = useAppSelector((state) => state.reader.profile);
   const isWebPub = profile === "webPub";
-  const spacing = useAppSelector((state) => isWebPub ? state.webPubSettings.spacing : state.settings.spacing);
+  const spacing = useReaderSetting("spacing");
   const isFXL = useAppSelector((state) => state.publication.isFXL);
   const dispatch = useAppDispatch();
   const { submitPreferences } = useNavigator().visual;
+  const letterSpacingPrefKey = SETTINGS_KEY_TO_PREFERENCE["letterSpacing" /* letterSpacing */];
+  const lineHeightPrefKey = SETTINGS_KEY_TO_PREFERENCE["lineHeight" /* lineHeight */];
+  const paragraphIndentPrefKey = SETTINGS_KEY_TO_PREFERENCE["paragraphIndent" /* paragraphIndent */];
+  const paragraphSpacingPrefKey = SETTINGS_KEY_TO_PREFERENCE["paragraphSpacing" /* paragraphSpacing */];
+  const wordSpacingPrefKey = SETTINGS_KEY_TO_PREFERENCE["wordSpacing" /* wordSpacing */];
   const lineHeightOptions = useLineHeight();
   const { getPresetValues } = useSpacingPresets();
+  const publicationType = isWebPub ? "webpub" : isFXL ? "fxl" : "reflow";
+  const { isComponentUsed: isLetterSpacingUsed } = useSettingsComponentStatus({
+    settingsKey: "letterSpacing" /* letterSpacing */,
+    publicationType
+  });
+  const { isComponentUsed: isLineHeightUsed } = useSettingsComponentStatus({
+    settingsKey: "lineHeight" /* lineHeight */,
+    publicationType
+  });
+  const { isComponentUsed: isParagraphIndentUsed } = useSettingsComponentStatus({
+    settingsKey: "paragraphIndent" /* paragraphIndent */,
+    publicationType
+  });
+  const { isComponentUsed: isParagraphSpacingUsed } = useSettingsComponentStatus({
+    settingsKey: "paragraphSpacing" /* paragraphSpacing */,
+    publicationType
+  });
+  const { isComponentUsed: isWordSpacingUsed } = useSettingsComponentStatus({
+    settingsKey: "wordSpacing" /* wordSpacing */,
+    publicationType
+  });
   const updatePreference = useCallback(async (value) => {
     const spacingKey = value;
     const presetValues = getPresetValues(spacingKey);
@@ -3872,13 +4241,22 @@ var StatefulSpacingPresets = ({ standalone }) => {
     };
     const lineHeightValue = reduxValues["lineHeight" /* lineHeight */];
     const lineHeightValueNumber = lineHeightValue && lineHeightValue !== "publisher" /* publisher */ ? lineHeightOptions[lineHeightValue] : null;
-    const preferencesToSubmit = {
-      ["letterSpacing" /* letterSpacing */]: reduxValues["letterSpacing" /* letterSpacing */],
-      ["lineHeight" /* lineHeight */]: lineHeightValueNumber,
-      ["paragraphIndent" /* paragraphIndent */]: reduxValues["paragraphIndent" /* paragraphIndent */],
-      ["paragraphSpacing" /* paragraphSpacing */]: reduxValues["paragraphSpacing" /* paragraphSpacing */],
-      ["wordSpacing" /* wordSpacing */]: reduxValues["wordSpacing" /* wordSpacing */]
-    };
+    const preferencesToSubmit = {};
+    if (isLetterSpacingUsed) {
+      preferencesToSubmit[letterSpacingPrefKey] = reduxValues["letterSpacing" /* letterSpacing */];
+    }
+    if (isLineHeightUsed) {
+      preferencesToSubmit[lineHeightPrefKey] = lineHeightValueNumber;
+    }
+    if (isParagraphIndentUsed) {
+      preferencesToSubmit[paragraphIndentPrefKey] = reduxValues["paragraphIndent" /* paragraphIndent */];
+    }
+    if (isParagraphSpacingUsed) {
+      preferencesToSubmit[paragraphSpacingPrefKey] = reduxValues["paragraphSpacing" /* paragraphSpacing */];
+    }
+    if (isWordSpacingUsed) {
+      preferencesToSubmit[wordSpacingPrefKey] = reduxValues["wordSpacing" /* wordSpacing */];
+    }
     await submitPreferences(preferencesToSubmit);
     if (isWebPub) {
       dispatch(setWebPubSpacingPreset({
@@ -3891,7 +4269,7 @@ var StatefulSpacingPresets = ({ standalone }) => {
         values: reduxValues
       }));
     }
-  }, [isWebPub, dispatch, submitPreferences, getPresetValues, lineHeightOptions]);
+  }, [isWebPub, dispatch, submitPreferences, getPresetValues, lineHeightOptions, letterSpacingPrefKey, lineHeightPrefKey, paragraphIndentPrefKey, paragraphSpacingPrefKey, wordSpacingPrefKey, isLetterSpacingUsed, isLineHeightUsed, isParagraphIndentUsed, isParagraphSpacingUsed, isWordSpacingUsed]);
   const spacingKeys = useMemo(() => {
     const baseKeys = isWebPub ? webPubSpacingPresetKeys : isFXL ? fxlSpacingPresetKeys : reflowSpacingPresetKeys;
     const subPanelKeys = subPanelSpacingSettingsKeys || [];
@@ -3936,9 +4314,16 @@ var StatefulTextAlign = ({ standalone = true }) => {
   const profile = useAppSelector((state) => state.reader.profile);
   const isWebPub = profile === "webPub";
   const isRTL = useAppSelector((state) => state.publication.isRTL);
-  const textAlign = useAppSelector((state) => isWebPub ? state.webPubSettings.textAlign : state.settings.textAlign) ?? "publisher" /* publisher */;
+  const textAlign = useReaderSetting("textAlign");
   const dispatch = useAppDispatch();
   const { getSetting, submitPreferences } = useNavigator().visual;
+  const hyphensPrefKey = SETTINGS_KEY_TO_PREFERENCE["hyphens" /* hyphens */];
+  const textAlignPrefKey = SETTINGS_KEY_TO_PREFERENCE["textAlign" /* textAlign */];
+  const publicationType = isWebPub ? "webpub" : "reflow";
+  const { isComponentUsed: isHyphensUsed } = useSettingsComponentStatus({
+    settingsKey: "hyphens" /* hyphens */,
+    publicationType
+  });
   const items = [
     {
       id: "publisher" /* publisher */,
@@ -3961,15 +4346,18 @@ var StatefulTextAlign = ({ standalone = true }) => {
   ];
   const updatePreference = useCallback(async (value) => {
     const textAlign2 = value === "publisher" /* publisher */ ? null : value === "start" /* start */ ? TextAlignment.start : TextAlignment.justify;
-    const currentHyphens = getSetting("hyphens");
+    const currentHyphens = getSetting(hyphensPrefKey);
     const hyphens = textAlign2 === null ? null : currentHyphens ?? textAlign2 === TextAlignment.justify;
-    await submitPreferences({
-      textAlign: textAlign2,
-      hyphens
-    });
-    const textAlignSetting = getSetting("textAlign");
+    const preferencesToSubmit = {
+      [textAlignPrefKey]: textAlign2
+    };
+    if (isHyphensUsed) {
+      preferencesToSubmit[hyphensPrefKey] = hyphens;
+    }
+    await submitPreferences(preferencesToSubmit);
+    const textAlignSetting = getSetting(textAlignPrefKey);
     const textAlignValue = textAlignSetting === null ? "publisher" /* publisher */ : textAlignSetting;
-    const effectiveHyphens = getSetting("hyphens");
+    const effectiveHyphens = getSetting(hyphensPrefKey);
     if (isWebPub) {
       dispatch(setWebPubTextAlign(textAlignValue));
       dispatch(setWebPubHyphens(effectiveHyphens));
@@ -3977,7 +4365,7 @@ var StatefulTextAlign = ({ standalone = true }) => {
       dispatch(setTextAlign(textAlignValue));
       dispatch(setHyphens(effectiveHyphens));
     }
-  }, [isWebPub, getSetting, submitPreferences, dispatch]);
+  }, [hyphensPrefKey, textAlignPrefKey, isWebPub, getSetting, submitPreferences, dispatch, isHyphensUsed]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulRadioGroup,
     {
@@ -3994,18 +4382,19 @@ var StatefulTextNormalize = ({ standalone = true }) => {
   const { t } = useI18n();
   const profile = useAppSelector((state) => state.reader.profile);
   const isWebPub = profile === "webPub";
-  const textNormalization = useAppSelector((state) => isWebPub ? state.webPubSettings.textNormalization : state.settings.textNormalization) ?? false;
+  const textNormalization = useReaderSetting("textNormalization");
   const dispatch = useAppDispatch();
   const { getSetting, submitPreferences } = useNavigator().visual;
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["textNormalize" /* textNormalize */];
   const updatePreference = useCallback(async (value) => {
-    await submitPreferences({ textNormalization: value });
-    const effectiveSetting = getSetting("textNormalization");
+    await submitPreferences({ [prefKey]: value });
+    const effectiveSetting = getSetting(prefKey);
     if (isWebPub) {
       dispatch(setWebPubTextNormalization(effectiveSetting));
     } else {
       dispatch(setTextNormalization(effectiveSetting));
     }
-  }, [isWebPub, submitPreferences, getSetting, dispatch]);
+  }, [prefKey, isWebPub, submitPreferences, getSetting, dispatch]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulSwitch,
     {
@@ -4017,6 +4406,62 @@ var StatefulTextNormalize = ({ standalone = true }) => {
     }
   ) });
 };
+var StatefulLigatures = ({ standalone = true }) => {
+  const { t } = useI18n();
+  const profile = useAppSelector((state) => state.reader.profile);
+  const isWebPub = profile === "webPub";
+  const ligatures = useReaderSetting("ligatures");
+  const dispatch = useAppDispatch();
+  const { getSetting, submitPreferences } = useNavigator().visual;
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["ligatures" /* ligatures */];
+  const updatePreference = useCallback(async (value) => {
+    await submitPreferences({ [prefKey]: value });
+    const effectiveSetting = getSetting(prefKey);
+    if (isWebPub) {
+      dispatch(setWebPubLigatures(effectiveSetting));
+    } else {
+      dispatch(setLigatures(effectiveSetting));
+    }
+  }, [prefKey, isWebPub, submitPreferences, getSetting, dispatch]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    StatefulSwitch,
+    {
+      standalone,
+      heading: t("reader.preferences.ligatures.title"),
+      label: t("reader.preferences.ligatures.label"),
+      onChange: async (isSelected) => await updatePreference(isSelected),
+      isSelected: ligatures ?? true
+    }
+  ) });
+};
+var StatefulNoRuby = ({ standalone = true }) => {
+  const { t } = useI18n();
+  const profile = useAppSelector((state) => state.reader.profile);
+  const isWebPub = profile === "webPub";
+  const noRuby = useReaderSetting("noRuby");
+  const dispatch = useAppDispatch();
+  const { getSetting, submitPreferences } = useNavigator().visual;
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["noRuby" /* noRuby */];
+  const updatePreference = useCallback(async (value) => {
+    await submitPreferences({ [prefKey]: value });
+    const effectiveSetting = getSetting(prefKey);
+    if (isWebPub) {
+      dispatch(setWebPubNoRuby(effectiveSetting));
+    } else {
+      dispatch(setNoRuby(effectiveSetting));
+    }
+  }, [prefKey, isWebPub, submitPreferences, getSetting, dispatch]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    StatefulSwitch,
+    {
+      standalone,
+      heading: t("reader.preferences.noRuby.title"),
+      label: t("reader.preferences.noRuby.label"),
+      onChange: async (isSelected) => await updatePreference(isSelected),
+      isSelected: noRuby ?? false
+    }
+  ) });
+};
 var SvgCheck = (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: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" }) });
 var check_default = SvgCheck;
 var StatefulTheme = () => {
@@ -4163,12 +4608,13 @@ var StatefulWordSpacing = ({ standalone = true }) => {
   const placeholderText = usePlaceholder(wordSpacingRangeConfig.placeholder, wordSpacingRangeConfig.range, "percent");
   const { getEffectiveSpacingValue, setWordSpacing: setWordSpacing2, canBeReset } = useSpacingPresets();
   const wordSpacing = getEffectiveSpacingValue("wordSpacing" /* wordSpacing */);
+  const prefKey = SETTINGS_KEY_TO_PREFERENCE["wordSpacing" /* wordSpacing */];
   const updatePreference = useCallback(async (value) => {
     await submitPreferences({
-      wordSpacing: Array.isArray(value) ? value[0] : value
+      [prefKey]: Array.isArray(value) ? value[0] : value
     });
-    setWordSpacing2(getSetting("wordSpacing"));
-  }, [submitPreferences, getSetting, setWordSpacing2]);
+    setWordSpacing2(getSetting(prefKey));
+  }, [prefKey, submitPreferences, getSetting, setWordSpacing2]);
   return /* @__PURE__ */ jsx(Fragment, { children: wordSpacingRangeConfig.variant === "numberField" /* numberField */ ? /* @__PURE__ */ jsx(
     StatefulNumberField,
     {
@@ -4219,9 +4665,7 @@ var StatefulZoom = () => {
   const { t } = useI18n();
   const readerProfile = useAppSelector((state) => state.reader.profile);
   const isFXL = useAppSelector((state) => state.publication.isFXL);
-  const fontSize = useAppSelector((state) => state.settings.fontSize) || 1;
-  const webPubZoom = useAppSelector((state) => state.webPubSettings.zoom) || 1;
-  const derivedState = readerProfile === "webPub" ? webPubZoom : fontSize;
+  const derivedState = useReaderSetting("zoom");
   const dispatch = useAppDispatch();
   const {
     getSetting,
@@ -4229,15 +4673,16 @@ var StatefulZoom = () => {
     preferencesEditor
   } = useNavigator().visual;
   const preferenceEditorProperty = readerProfile === "webPub" ? preferencesEditor?.zoom : isFXL ? preferencesEditor?.zoom : preferencesEditor?.fontSize;
+  const prefKey = readerProfile === "webPub" ? SETTINGS_KEY_TO_PREFERENCE["zoom" /* zoom */] : "fontSize";
   const updatePreference = useCallback(async (value) => {
+    const normalizedValue = Array.isArray(value) ? value[0] : value;
+    await submitPreferences({ [prefKey]: normalizedValue });
     if (readerProfile === "webPub") {
-      await submitPreferences({ zoom: Array.isArray(value) ? value[0] : value });
-      dispatch(setWebPubZoom(getSetting("zoom")));
+      dispatch(setWebPubZoom(getSetting(prefKey)));
     } else {
-      await submitPreferences({ fontSize: Array.isArray(value) ? value[0] : value });
-      dispatch(setFontSize(getSetting("fontSize")));
+      dispatch(setFontSize(getSetting(prefKey)));
     }
-  }, [readerProfile, submitPreferences, getSetting, dispatch]);
+  }, [readerProfile, prefKey, submitPreferences, getSetting, dispatch]);
   const zoomConfig = preferences.settings.keys["zoom" /* zoom */];
   const { range: effectiveRange } = useEffectiveRange(zoomConfig.range, preferenceEditorProperty?.supportedRange);
   const zoomRangeConfig = {
@@ -4291,7 +4736,7 @@ var createDefaultPlugin = () => {
     id: "core",
     name: "Core Components",
     description: "Default components for Thorium Web Epub StatefulReader",
-    version: "1.3.1",
+    version: "1.4.0",
     components: {
       actions: {
         ["fullscreen" /* fullscreen */]: {
@@ -4367,6 +4812,14 @@ var createDefaultPlugin = () => {
           Comp: StatefulTextNormalize,
           type: "text"
         },
+        ["ligatures" /* ligatures */]: {
+          Comp: StatefulLigatures,
+          type: "text"
+        },
+        ["noRuby" /* noRuby */]: {
+          Comp: StatefulNoRuby,
+          type: "text"
+        },
         ["theme" /* theme */]: {
           Comp: StatefulTheme
         },
@@ -4395,7 +4848,8 @@ var StatefulSliderWithPresets = ({
   ...props
 }) => {
   const { t } = useI18n();
-  const { theming, direction } = useSharedPreferences();
+  const { theming } = useSharedPreferences();
+  const isRTL = useAppSelector((state) => state.publication.isRTL);
   const numberFormatter = useNumberFormatter(props.formatOptions);
   const resolvedFormatValue = formatValue ?? (props.formatOptions ? (v) => numberFormatter.format(v) : void 0);
   const tooltipDelay = theming.icon.tooltipDelay;
@@ -4408,7 +4862,7 @@ var StatefulSliderWithPresets = ({
     items: presetsRef,
     currentValue: currentScalarValue,
     onChange: (v) => props.onChange?.([v]),
-    isRTL: direction === "rtl" /* rtl */,
+    isRTL,
     onEscape,
     onFocus: (v) => {
       const el = presetsListRef.current?.querySelector(`input[value="${v}"]`);
@@ -5124,8 +5578,7 @@ var StatefulAudioTocContainer = ({ triggerRef }) => {
   const tocEntry = unstableTimeline?.toc?.currentEntry ?? void 0;
   const tocEntryId = tocEntry?.id;
   const tocTree = unstableTimeline?.toc?.tree;
-  const direction = useAppSelector((state) => state.reader.direction);
-  const isRTL = direction === "rtl" /* rtl */;
+  const isRTL = useAppSelector((state) => state.publication.isRTL);
   const docking = useDocking("audio.toc" /* toc */);
   const sheetType = docking.sheetType;
   const setOpen = useCallback((value) => {
@@ -5545,7 +5998,7 @@ var createAudioDefaultPlugin = () => {
     id: "audio-core",
     name: "Audio Core Components",
     description: "Default components for Thorium Web Audio StatefulReader",
-    version: "1.3.1",
+    version: "1.4.0",
     components: {
       actions: {
         ["settings" /* settings */]: {
@@ -5599,233 +6052,16 @@ var StatefulPreferencesProvider = ({
   }, [store, initialPreferences]);
   return /* @__PURE__ */ jsx(ThPreferencesProvider, { adapter, children });
 };
-
-// src/hooks/useReaderTransitions.ts
-var useReaderTransitions = () => {
-  const isImmersive = useAppSelector((state) => state.reader.isImmersive);
-  const isFullscreen = useAppSelector((state) => state.reader.isFullscreen);
-  const hasUserNavigated = useAppSelector((state) => state.reader.hasUserNavigated);
-  const scroll = useAppSelector((state) => state.settings.scroll);
-  const isFXL = useAppSelector((state) => state.publication.isFXL);
-  const isScroll = scroll && !isFXL;
-  const wasImmersive = usePrevious(isImmersive) ?? false;
-  const wasFullscreen = usePrevious(isFullscreen) ?? false;
-  const wasScroll = usePrevious(isScroll) ?? false;
-  const wasUserNavigated = usePrevious(hasUserNavigated) ?? false;
-  const fromImmersive = wasImmersive && !isImmersive;
-  const toImmersive = !wasImmersive && isImmersive;
-  const fromFullscreen = wasFullscreen && !isFullscreen;
-  const toFullscreen = !wasFullscreen && isFullscreen;
-  const fromScroll = wasScroll && !isScroll;
-  const toScroll = !wasScroll && isScroll;
-  const fromUserNavigation = wasUserNavigated && !hasUserNavigated;
-  const toUserNavigation = !wasUserNavigated && hasUserNavigated;
-  return {
-    // Current states
-    isImmersive,
-    isFullscreen,
-    isScroll,
-    hasUserNavigated,
-    // Previous states
-    wasImmersive,
-    wasFullscreen,
-    wasScroll,
-    wasUserNavigated,
-    // State transitions
-    fromImmersive,
-    toImmersive,
-    fromFullscreen,
-    toFullscreen,
-    fromScroll,
-    toScroll,
-    fromUserNavigation,
-    toUserNavigation
-  };
-};
-
-// src/helpers/deserializePositions.ts
-var deserializePositions = (positionsList) => {
-  return positionsList?.map((locator) => ({
-    href: locator.href,
-    type: locator.type,
-    locations: {
-      position: locator.locations.position,
-      progression: locator.locations.progression,
-      totalProgression: locator.locations.totalProgression
-    }
-  }));
-};
-
-// src/hooks/usePublication.ts
-var detectProfile = (manifest) => {
-  const metadata = manifest.metadata;
-  if (!metadata) return "webPub";
-  const conformsTo = metadata.conformsTo;
-  if (!conformsTo) return "webPub";
-  const profiles = Array.isArray(conformsTo) ? conformsTo : [conformsTo];
-  if (profiles.some(
-    (profile) => profile === Profile.AUDIOBOOK
-  )) {
-    return "audio";
-  }
-  if (profiles.some(
-    (profile) => profile === Profile.EPUB
-  )) {
-    return "epub";
-  }
-  return "webPub";
-};
-var usePublication = ({
-  url,
-  onError = () => {
-  },
-  fetcher: customFetcher
+var StatefulGlobalPreferencesProvider = ({
+  children,
+  initialPreferences = {}
 }) => {
-  const dispatch = useAppDispatch();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const [manifest, setManifest] = useState(null);
-  const [selfLink, setSelfLink] = useState(null);
-  const [localDataKey, setLocalDataKey] = useState(null);
-  const [publication, setPublication] = useState(null);
-  const [profile, setProfile] = useState(null);
-  const [isRTL, setIsRTL] = useState(false);
-  const [isFXL, setIsFXL] = useState(false);
-  const [hasDisplayTransformability, setHasDisplayTransformabilityState] = useState(false);
-  const handleManifestError = (error2, context) => {
-    console.error(`${context}:`, error2);
-    const processedError = ErrorHandler.process(error2, context);
-    setError(processedError);
-    setIsLoading(false);
-  };
-  useEffect(() => {
-    if (!url) {
-      const validationError = ErrorHandler.process(new Error("Manifest URL is required"), "Validation");
-      setError(validationError);
-      setIsLoading(false);
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
-    const decodedUrl = decodeURIComponent(url);
-    const manifestLink = new Link({ href: decodedUrl });
-    const fetcher = customFetcher || new HttpFetcher(void 0);
-    try {
-      const fetched = fetcher.get(manifestLink);
-      fetched.link().then(async (link) => {
-        try {
-          const selfHref = link.toURL(decodedUrl);
-          setSelfLink(selfHref || null);
-          if (selfHref) {
-            setLocalDataKey(`${selfHref}-current-location`);
-            const manifestFetcher = customFetcher || new HttpFetcher(void 0, selfHref);
-            const manifestFetched = manifestFetcher.get(manifestLink);
-            const manifestData = await manifestFetched.readAsJSON();
-            setManifest(manifestData);
-            const manifestObj = Manifest.deserialize(manifestData);
-            manifestObj.setSelfLink(selfHref);
-            const detectedProfile = detectProfile(manifestObj);
-            setProfile(detectedProfile);
-            dispatch(setReaderProfile(detectedProfile));
-            const pub = new Publication({
-              manifest: manifestObj,
-              fetcher: manifestFetcher
-            });
-            if (detectedProfile === "epub") {
-              try {
-                const rawPositions = await pub.positionsFromManifest();
-                const positionsList = deserializePositions(rawPositions);
-                dispatch(setPositionsList(positionsList));
-              } catch (error2) {
-                console.error("Failed to fetch positions:", error2);
-                dispatch(setPositionsList([]));
-              }
-            }
-            if (detectedProfile === "audio") {
-              const tocLinks = manifestObj.toc?.items && manifestObj.toc.items.length > 0 ? manifestObj.toc.items : manifestObj.readingOrder?.items || [];
-              const publicationTitle = manifestObj.metadata.title.getTranslation("en");
-              let idCounter = 0;
-              const idGenerator = () => `toc-${++idCounter}`;
-              dispatch(setTocTree(buildTocTree(tocLinks, idGenerator, void 0, publicationTitle)));
-            }
-            setPublication(pub);
-            setIsLoading(false);
-          }
-        } catch (error2) {
-          handleManifestError(error2, "Error loading manifest");
-        }
-      });
-    } catch (error2) {
-      handleManifestError(error2, "Error loading manifest");
-    }
-  }, [url, customFetcher, dispatch]);
-  useEffect(() => {
-    if (!publication) return;
-    const rtl = publication.metadata.effectiveReadingProgression === ReadingProgression.rtl;
-    setIsRTL(rtl);
-    dispatch(setRTL(rtl));
-    if (profile === "epub") {
-      const fxl = publication.metadata.effectiveLayout === Layout.fixed;
-      setIsFXL(fxl);
-      dispatch(setFXL(fxl));
-    }
-    const displayTransformability = publication.metadata.accessibility?.feature?.some(
-      (feature) => feature && feature.value === Feature.DISPLAY_TRANSFORMABILITY.value
-    ) || false;
-    setHasDisplayTransformabilityState(displayTransformability);
-    dispatch(setHasDisplayTransformability(displayTransformability));
-    if (profile === "epub" && publication) {
-      const fetchPositions = async () => {
-        try {
-          const positionsList = await publication.positionsFromManifest();
-          const deserializedPositionsList = deserializePositions(positionsList);
-          dispatch(setPositionsList(deserializedPositionsList));
-        } catch (error2) {
-          console.error("Failed to fetch positions:", error2);
-          dispatch(setPositionsList([]));
-        }
-      };
-      fetchPositions();
-    }
-  }, [publication, profile, dispatch]);
-  useEffect(() => {
-    if (error) {
-      onError(error);
-    }
-  }, [error, onError]);
-  return {
-    isLoading,
-    error,
-    publication,
-    manifest,
-    selfLink,
-    localDataKey,
-    profile,
-    isRTL,
-    isFXL,
-    hasDisplayTransformability
-  };
-};
-var usePositionStorage = (key, customStorage) => {
-  const localStorageData = useLocalStorage(key);
-  const [customData, setCustomData] = useState(
-    () => customStorage ? customStorage.get() || null : null
+  const store = useStore();
+  const adapter = useMemo(
+    () => new ThReduxGlobalPreferencesAdapter(store, initialPreferences),
+    [store, initialPreferences]
   );
-  if (customStorage) {
-    const set = (newValue) => {
-      if (newValue) {
-        customStorage.set(newValue);
-      }
-      setCustomData(newValue);
-    };
-    const get = () => customData;
-    return {
-      setLocalData: set,
-      getLocalData: get,
-      localData: customData
-    };
-  }
-  return localStorageData;
+  return /* @__PURE__ */ jsx(ThGlobalPreferencesProvider, { adapter, initialPreferences, children });
 };
 
 // src/components/assets/styles/thorium-web.reader.app.module.css
@@ -6148,10 +6384,11 @@ var StatefulBackLink = ({
   className
 }) => {
   const { t } = useI18n();
-  const { direction, theming } = useSharedPreferences();
+  const { theming } = useSharedPreferences();
+  const { direction } = useLocale();
   const backLinkPref = theming.header?.backLink;
   const tooltipDelay = theming.icon.tooltipDelay;
-  const isRTL = direction === "rtl" /* rtl */;
+  const isRTL = direction === "rtl";
   const variant = backLinkPref?.variant || "arrow" /* arrow */;
   const href = backLinkPref?.href;
   const content = backLinkPref?.content;
@@ -6215,7 +6452,7 @@ var StatefulBackLink = ({
           for (const { name, value } of Array.from(svgElement.attributes)) {
             attributes[name] = value;
           }
-          contentNode = React24.createElement("svg", {
+          contentNode = React22.createElement("svg", {
             ...attributes,
             "aria-hidden": "true",
             focusable: "false",
@@ -6242,9 +6479,8 @@ var useReaderHeaderBase = (actionKeys) => {
   const headerRef = useRef(null);
   const { t } = useI18n();
   const { actionsComponentsMap } = usePlugins();
-  useAppSelector((state) => state.actions.keys);
   const overflowMap = useAppSelector((state) => state.actions.overflow);
-  const isScroll = useAppSelector((state) => state.settings.scroll);
+  const isScroll = useIsScroll();
   const isImmersive = useAppSelector((state) => state.reader.isImmersive);
   const isHovering = useAppSelector((state) => state.reader.isHovering);
   const hasScrollAffordance = useAppSelector((state) => state.reader.hasScrollAffordance);
@@ -6320,6 +6556,6 @@ var useReaderHeaderBase = (actionKeys) => {
   };
 };
 
-export { NavigatorProvider, StatefulActionIcon, StatefulAudioAutoPlay, StatefulAudioPlaybackRateContainer, StatefulAudioPlaybackRateTrigger, StatefulAudioRemotePlaybackTrigger, StatefulAudioSettingsContainer, StatefulAudioSkipBackwardInterval, StatefulAudioSkipForwardInterval, StatefulAudioSkipInterval, StatefulAudioSleepTimerContainer, StatefulAudioSleepTimerTrigger, StatefulAudioTocContainer, StatefulAudioTocTrigger, StatefulAudioVolumeContainer, StatefulAudioVolumeTrigger, StatefulBackLink, StatefulBottomSheet, StatefulCollapsibleActionsBar, StatefulColumns, StatefulCompactPopoverSheet, StatefulDockedSheet, StatefulDockingWrapper, StatefulDropdown, StatefulFontFamily, StatefulFullScreenSheet, StatefulFullscreenTrigger, StatefulGroupWrapper, StatefulHyphens, StatefulJumpToPositionContainer, StatefulJumpToPositionTrigger, StatefulLayout, StatefulLetterSpacing, StatefulLineHeight, StatefulModalBase, StatefulModalSheet, StatefulNumberField, StatefulOverflowMenu, StatefulOverflowMenuItem, StatefulParagraphIndent, StatefulParagraphSpacing, StatefulPopoverSheet, StatefulPreferencesProvider, StatefulPublisherStyles, StatefulRadioGroup, StatefulSettingsTrigger, StatefulSettingsWrapper, StatefulSheetWrapper, StatefulSlider, StatefulSliderWithPresets, StatefulSpacingGroup, StatefulSpacingGroupContainer, StatefulSpacingPresets, StatefulSwitch, StatefulTextAlign, StatefulTextGroup, StatefulTextGroupContainer, StatefulTextNormalize, StatefulTheme, StatefulTocContainer, StatefulTocTrigger, StatefulVisualSettingsContainer, StatefulWordSpacing, StatefulZoom, UnstableStatefulFontWeight, createAudioDefaultPlugin, createDefaultPlugin, thorium_web_button_default, thorium_web_overflow_default, thorium_web_reader_app_default, thorium_web_reader_header_default, useDocking, useEffectiveRange, useGridNavigation, useGridTemplate, useLineHeight, useNavigator, usePositionStorage, usePublication, useReaderHeaderBase, useReaderTransitions, useSettingsComponentStatus, useSpacingPresets };
-//# sourceMappingURL=chunk-LP3JFZ4A.mjs.map
-//# sourceMappingURL=chunk-LP3JFZ4A.mjs.map
+export { NavigatorProvider, StatefulActionIcon, StatefulAudioAutoPlay, StatefulAudioPlaybackRateContainer, StatefulAudioPlaybackRateTrigger, StatefulAudioRemotePlaybackTrigger, StatefulAudioSettingsContainer, StatefulAudioSkipBackwardInterval, StatefulAudioSkipForwardInterval, StatefulAudioSkipInterval, StatefulAudioSleepTimerContainer, StatefulAudioSleepTimerTrigger, StatefulAudioTocContainer, StatefulAudioTocTrigger, StatefulAudioVolumeContainer, StatefulAudioVolumeTrigger, StatefulBackLink, StatefulBottomSheet, StatefulCollapsibleActionsBar, StatefulColumns, StatefulCompactPopoverSheet, StatefulDockedSheet, StatefulDockingWrapper, StatefulDropdown, StatefulFontFamily, StatefulFullScreenSheet, StatefulFullscreenTrigger, StatefulGlobalPreferencesProvider, StatefulGroupWrapper, StatefulHyphens, StatefulJumpToPositionContainer, StatefulJumpToPositionTrigger, StatefulLayout, StatefulLetterSpacing, StatefulLigatures, StatefulLineHeight, StatefulModalBase, StatefulModalSheet, StatefulNoRuby, StatefulNumberField, StatefulOverflowMenu, StatefulOverflowMenuItem, StatefulParagraphIndent, StatefulParagraphSpacing, StatefulPopoverSheet, StatefulPreferencesProvider, StatefulPublisherStyles, StatefulRadioGroup, StatefulSettingsTrigger, StatefulSettingsWrapper, StatefulSheetWrapper, StatefulSlider, StatefulSliderWithPresets, StatefulSpacingGroup, StatefulSpacingGroupContainer, StatefulSpacingPresets, StatefulSwitch, StatefulTextAlign, StatefulTextGroup, StatefulTextGroupContainer, StatefulTextNormalize, StatefulTheme, StatefulTocContainer, StatefulTocTrigger, StatefulVisualSettingsContainer, StatefulWordSpacing, StatefulZoom, UnstableStatefulFontWeight, createAudioDefaultPlugin, createDefaultPlugin, thorium_web_button_default, thorium_web_overflow_default, thorium_web_reader_app_default, thorium_web_reader_header_default, useDocking, useEffectiveRange, useGridNavigation, useGridTemplate, useIsScroll, useLineHeight, useNavigator, usePlaceholder, usePositionStorage, usePublication, useReaderHeaderBase, useReaderSetting, useReaderTransitions, useSettingsComponentStatus, useSpacingPresets };
+//# sourceMappingURL=chunk-PXXWEMNL.mjs.map
+//# sourceMappingURL=chunk-PXXWEMNL.mjs.map