@edrlab/thorium-web 1.3.0 → 1.4.0

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

@@ -1,21 +1,21 @@
-import { makeBreakpointsMap, isKeyboardTriggered, isActiveElement } from './chunk-ITDBOMY5.mjs';
-import { useFullscreen, useEpubNavigator, useLocalStorage } from './chunk-XBZWGRDM.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-YZ3KCMKY.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-WECWPYZB.mjs';
-import { useSharedPreferences, ThDockingTypes, ThSheetTypes, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, ThTextSettingsKeys, ThSpacingSettingsKeys, defaultAudioSkipBackwardInterval, defaultAudioSkipForwardInterval, defaultAudioSkipInterval, defaultPreferences } from './chunk-C236BQQB.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-4ODYHZKD.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-IYAFKTPL.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, useEffect, useMemo, 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';
 
@@ -320,67 +320,293 @@ var useNavigator = () => {
   if (!context) {
     throw new Error("useNavigator must be used within NavigatorProvider");
   }
-  return {
+  const unified = useMemo(() => {
+    const navigator = context.visual || context.media;
+    if (!navigator) throw new Error("No navigator available");
+    const isVisual = isVisualNavigator(navigator, context.visual);
+    return {
+      go: (locator, animated, callback) => {
+        return navigator.go(locator, animated, callback);
+      },
+      goLink: (link, animated, callback) => {
+        return navigator.goLink(link, animated, callback);
+      },
+      currentLocator: () => navigator.currentLocator(),
+      previousLocator: () => {
+        if (isVisual && navigator.previousLocator) {
+          return navigator.previousLocator() || null;
+        }
+        return null;
+      },
+      nextLocator: () => {
+        if (isVisual && navigator.nextLocator) {
+          return navigator.nextLocator() || null;
+        }
+        return null;
+      },
+      goForward: (animated, callback) => {
+        if (navigator.goForward) {
+          return navigator.goForward(animated, callback);
+        }
+        return callback?.(false);
+      },
+      goBackward: (animated, callback) => {
+        if (navigator.goBackward) {
+          return navigator.goBackward(animated, callback);
+        }
+        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
+    };
+  }, [context.visual, context.media]);
+  const visualMemo = useMemo(() => {
+    if (!context.visual) return null;
+    const visualNavigator = context.visual;
+    return {
+      ...visualNavigator,
+      getSetting: createUnifiedGetSetting(visualNavigator)
+    };
+  }, [context.visual]);
+  const mediaMemo = useMemo(() => {
+    return context.media;
+  }, [context.media]);
+  return useMemo(() => ({
     get visual() {
-      if (!context.visual) throw new Error("Visual navigator not available");
-      const visualNavigator = context.visual;
-      return {
-        ...visualNavigator,
-        getSetting: createUnifiedGetSetting(visualNavigator)
-      };
+      if (!visualMemo) throw new Error("Visual navigator not available");
+      return visualMemo;
     },
     get media() {
-      if (!context.media) throw new Error("Media navigator not available");
-      return context.media;
+      if (!mediaMemo) throw new Error("Media navigator not available");
+      return mediaMemo;
     },
-    // Unified interface that automatically selects the appropriate navigator
     get unified() {
-      const navigator = context.visual || context.media;
-      if (!navigator) throw new Error("No navigator available");
-      const isVisual = isVisualNavigator(navigator, context.visual);
-      return {
-        // Navigation methods available in both
-        go: (locator, animated, callback) => {
-          return navigator.go(locator, animated, callback);
-        },
-        goLink: (link, animated, callback) => {
-          return navigator.goLink(link, animated, callback);
-        },
-        currentLocator: () => navigator.currentLocator(),
-        // Unified previous/next navigation
-        previousLocator: () => {
-          if (isVisual && navigator.previousLocator) {
-            return navigator.previousLocator() || null;
-          }
-          return null;
-        },
-        nextLocator: () => {
-          if (isVisual && navigator.nextLocator) {
-            return navigator.nextLocator() || null;
-          }
-          return null;
-        },
-        // Unified forward/backward navigation
-        goForward: (animated, callback) => {
-          if (navigator.goForward) {
-            return navigator.goForward(animated, callback);
-          }
-          return callback?.(false);
-        },
-        goBackward: (animated, callback) => {
-          if (navigator.goBackward) {
-            return navigator.goBackward(animated, callback);
+      return unified;
+    }
+  }), [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);
           }
-          return callback?.(false);
-        },
-        // Check if navigator is visual
-        isVisual: () => isVisual,
-        // Visual-specific methods (only available when isVisual() is true)
-        getCframes: isVisual ? navigator.getCframes?.bind(navigator) : void 0,
-        // Access to underlying navigator for advanced use cases
-        underlying: navigator
+        } 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
   };
 };
 
@@ -425,15 +651,15 @@ var StatefulDockStart = ({ variant, associatedKey }) => {
   const preferences = useActionsPreferences();
   const { t } = useI18n();
   const direction = useAppSelector((state) => state.reader.direction);
-  const actionsMap = useAppSelector((state) => state.actions.keys);
   const profile = useAppSelector((state) => state.reader.profile);
+  const actionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
+  const actions = useActions(actionsMap || {});
   const isRTL = direction === "rtl" /* rtl */;
   const translationKey = isRTL ? "reader.app.docker.dockToRight" : "reader.app.docker.dockToLeft";
   const localeKey = {
     trigger: t(`${translationKey}.trigger`),
     tooltip: t(`${translationKey}.tooltip`)
   };
-  const actions = useActions(actionsMap);
   const isDisabled = actions.whichDocked(associatedKey) === "dockingStart" /* start */;
   const dispatch = useAppDispatch();
   const handlePress = useCallback(() => {
@@ -472,15 +698,15 @@ var StatefulDockEnd = ({ variant, associatedKey }) => {
   const preferences = useActionsPreferences();
   const { t } = useI18n();
   const direction = useAppSelector((state) => state.reader.direction);
-  const actionsMap = useAppSelector((state) => state.actions.keys);
   const profile = useAppSelector((state) => state.reader.profile);
+  const actionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
+  const actions = useActions(actionsMap || {});
   const isRTL = direction === "rtl" /* rtl */;
   const translationKey = isRTL ? "reader.app.docker.dockToLeft" : "reader.app.docker.dockToRight";
   const localeKey = {
     trigger: t(`${translationKey}.trigger`),
     tooltip: t(`${translationKey}.tooltip`)
   };
-  const actions = useActions(actionsMap);
   const isDisabled = actions.whichDocked(associatedKey) === "dockingEnd" /* end */;
   const dispatch = useAppDispatch();
   const handlePress = useCallback(() => {
@@ -520,9 +746,9 @@ var stack_default = SvgStack;
 var StatefulDockTransientPopover = ({ variant, associatedKey }) => {
   const preferences = useActionsPreferences();
   const { t } = useI18n();
-  const actionsMap = useAppSelector((state) => state.actions.keys);
   const profile = useAppSelector((state) => state.reader.profile);
-  const actions = useActions(actionsMap);
+  const actionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
+  const actions = useActions(actionsMap || {});
   const isDisabled = !actions.isDocked(associatedKey) || actions.whichDocked(associatedKey) === "dockingTransient" /* transient */;
   const dispatch = useAppDispatch();
   const handlePress = useCallback(() => {
@@ -621,38 +847,86 @@ 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 {
-    getCframes
-  } = useNavigator().unified;
+  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 {
+    const visual = useNavigator().visual;
+    getCframes = visual.getCframes;
+  } catch (e) {
+    getCframes = void 0;
+  }
   useEffect(() => {
-    if (isScroll && !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;
         const frame = frames[0];
-        if (!frame?.window?.document?.scrollingElement) return;
-        const currentScrollTop = frame.window.document.scrollingElement.scrollTop;
-        if (currentScrollTop > 1) {
-          frame.window.document.scrollingElement.scrollTop = currentScrollTop - 1;
+        let frameWindow;
+        try {
+          frameWindow = frame?.window;
+          if (!frameWindow?.document?.scrollingElement) return;
+        } catch (e) {
+          return;
+        }
+        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 {
-          frame.window.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;
         }
-        frame.window.document.scrollingElement.scrollTop = currentScrollTop;
       }, 0);
     }
-  }, [isScroll, isOpen, getCframes]);
+  }, [isScroll, isHorizontalScroll, isOpen, prevIsOpen, getCframes]);
 };
 var StatefulPopoverSheet = ({
   id,
@@ -688,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,
       {
@@ -797,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,
       {
@@ -1056,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,
       {
@@ -1208,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,
       {
@@ -1308,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,
       {
@@ -1366,12 +1640,12 @@ var dockingMap = null;
 var useDocking = (key) => {
   const preferences = useActionsPreferences();
   const breakpoint = useAppSelector((state) => state.theming.breakpoint);
-  const actionsMap = useAppSelector((state) => state.actions.keys);
-  const actionState = actionsMap[key];
   const profile = useAppSelector((state) => state.reader.profile);
+  const actionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
+  const actionState = actionsMap?.[key];
   const dock = useAppSelector((state) => profile ? state.actions.dock[profile] : void 0);
   const dispatch = useAppDispatch();
-  const actions = useActions(actionsMap);
+  const actions = useActions(actionsMap || {});
   const startActionKey = dock?.["dockingStart" /* start */]?.actionKey;
   const endActionKey = dock?.["dockingEnd" /* end */]?.actionKey;
   const startStatus = useActionComponentStatus({ actionKey: startActionKey || "" });
@@ -1501,13 +1775,16 @@ var useDocking = (key) => {
     if (actionState?.docking === "dockingTransient" /* transient */) return;
     if (sheetType !== "docked start" /* dockedStart */ && sheetType !== "docked end" /* dockedEnd */) {
       if (previousSheetType === "docked start" /* dockedStart */ || previousSheetType === "docked end" /* dockedEnd */) {
-        dispatch(setActionOpen({
-          key,
-          isOpen: false
-        }));
+        if (profile) {
+          dispatch(setActionOpen({
+            key,
+            isOpen: false,
+            profile
+          }));
+        }
       }
     }
-  }, [dispatch, key, sheetType, previousSheetType, actionState?.docking]);
+  }, [dispatch, key, sheetType, previousSheetType, actionState?.docking, profile]);
   useEffect(() => {
     if (actionState?.isOpen == null && profile) {
       if (sheetType === "docked start" /* dockedStart */) {
@@ -1518,7 +1795,8 @@ var useDocking = (key) => {
         }));
         dispatch(setActionOpen({
           key,
-          isOpen: true
+          isOpen: true,
+          profile
         }));
       } else if (sheetType === "docked end" /* dockedEnd */) {
         dispatch(dockAction({
@@ -1528,7 +1806,8 @@ var useDocking = (key) => {
         }));
         dispatch(setActionOpen({
           key,
-          isOpen: true
+          isOpen: true,
+          profile
         }));
       }
     }
@@ -1569,7 +1848,8 @@ var useDocking = (key) => {
         if (actionState?.isOpen === false) {
           dispatch(setActionOpen({
             key,
-            isOpen: true
+            isOpen: true,
+            profile
           }));
         }
       } else if (isDockedInEnd && actionState?.docking !== "dockingEnd" /* end */) {
@@ -1581,7 +1861,8 @@ var useDocking = (key) => {
         if (actionState?.isOpen === false) {
           dispatch(setActionOpen({
             key,
-            isOpen: true
+            isOpen: true,
+            profile
           }));
         }
       }
@@ -1628,7 +1909,8 @@ var StatefulJumpToPositionContainer = ({
   triggerRef
 }) => {
   const { t } = useI18n();
-  const actionState = useAppSelector((state) => state.actions.keys["jumpToPosition" /* jumpToPosition */]);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const actionState = useAppSelector((state) => profile ? state.actions.keys[profile]["jumpToPosition" /* jumpToPosition */] : void 0);
   const positionsList = useAppSelector((state) => state.publication.positionsList);
   const positionNumbers = useAppSelector((state) => state.publication.unstableTimeline?.progression?.currentPositions);
   const reducedMotion = useAppSelector((state) => state.theming.prefersReducedMotion);
@@ -1644,11 +1926,14 @@ var StatefulJumpToPositionContainer = ({
   }, [position, positionNumbers]);
   const label = t("reader.jumpToPosition.label", { positionStart: 1, positionEnd: positionsList.length });
   const setOpen = useCallback((value) => {
-    dispatch(setActionOpen({
-      key: "jumpToPosition" /* jumpToPosition */,
-      isOpen: value
-    }));
-  }, [dispatch]);
+    if (profile) {
+      dispatch(setActionOpen({
+        key: "jumpToPosition" /* jumpToPosition */,
+        isOpen: value,
+        profile
+      }));
+    }
+  }, [dispatch, profile]);
   const handleInput = useCallback((e) => {
     const target = e.target;
     setPosition(parseInt(target.value));
@@ -1737,14 +2022,18 @@ var pin_drop_default = SvgPinDrop;
 var StatefulJumpToPositionTrigger = ({ variant }) => {
   const preferences = useActionsPreferences();
   const { t } = useI18n();
-  const actionState = useAppSelector((state) => state.actions.keys["jumpToPosition" /* jumpToPosition */]);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const actionState = useAppSelector((state) => profile ? state.actions.keys[profile]["jumpToPosition" /* jumpToPosition */] : void 0);
   const positionsList = useAppSelector((state) => state.publication.positionsList);
   const dispatch = useAppDispatch();
   const setOpen = (value) => {
-    dispatch(setActionOpen({
-      key: "jumpToPosition" /* jumpToPosition */,
-      isOpen: value
-    }));
+    if (profile) {
+      dispatch(setActionOpen({
+        key: "jumpToPosition" /* jumpToPosition */,
+        isOpen: value,
+        profile
+      }));
+    }
   };
   if (!isPositionsListValid(positionsList)) return null;
   return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
@@ -1815,14 +2104,18 @@ var StatefulSettingsWrapper = ({
   onReset,
   children
 }) => {
-  const actionState = useAppSelector((state) => state.actions.keys["settings" /* settings */]);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const actionState = useAppSelector((state) => profile ? state.actions.keys[profile]["settings" /* settings */] : void 0);
   const dispatch = useAppDispatch();
   const docking = useDocking("settings" /* settings */);
   const setOpen = (value) => {
-    dispatch(setActionOpen({
-      key: "settings" /* settings */,
-      isOpen: value
-    }));
+    if (profile) {
+      dispatch(setActionOpen({
+        key: "settings" /* settings */,
+        isOpen: value,
+        profile
+      }));
+    }
     if (!value) dispatch(setHovering(false));
   };
   useEffect(() => {
@@ -1859,10 +2152,13 @@ var StatefulAudioSettingsContainer = ({
   const { settingsComponentsMap } = usePlugins();
   const { t } = useI18n();
   const dispatch = useAppDispatch();
+  const profile = useAppSelector((state) => state.reader.profile);
   const close = useCallback(() => {
-    dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false }));
+    if (profile) {
+      dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false, profile }));
+    }
     dispatch(setHovering(false));
-  }, [dispatch]);
+  }, [dispatch, profile]);
   return /* @__PURE__ */ jsx(
     StatefulSettingsWrapper,
     {
@@ -1938,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 */));
@@ -1950,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
@@ -1959,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.`);
@@ -1975,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 */));
@@ -1987,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
@@ -1996,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.`);
@@ -2019,7 +2323,7 @@ var StatefulVisualSettingsContainer = ({
     subPanelSpacingSettingsKeys,
     subPanelTextSettingsKeys,
     webPubSettingsKeys
-  } = usePreferenceKeys();
+  } = useFilteredPreferenceKeys();
   const { preferences } = usePreferences();
   const { t } = useI18n();
   const { settingsComponentsMap } = usePlugins();
@@ -2035,9 +2339,11 @@ var StatefulVisualSettingsContainer = ({
     dispatch(setSettingsContainer("initial" /* initial */));
   }, [dispatch]);
   const close = useCallback(() => {
-    dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false }));
+    if (profile) {
+      dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false, profile }));
+    }
     dispatch(setHovering(false));
-  }, [dispatch]);
+  }, [dispatch, profile]);
   const isTextNested = useCallback((key) => {
     const textSettings = [
       mainTextSettingsKeys || defaultTextSettingsMain,
@@ -2144,15 +2450,18 @@ var instant_mix_default = SvgInstantMix;
 var StatefulSettingsTrigger = ({ variant }) => {
   const preferences = useActionsPreferences();
   const { t } = useI18n();
-  const actionState = useAppSelector((state) => state.actions.keys["settings" /* settings */]);
   const profile = useAppSelector((state) => state.reader.profile);
+  const actionState = useAppSelector((state) => profile ? state.actions.keys[profile]["settings" /* settings */] : void 0);
   const isAudio = profile === "audio";
   const dispatch = useAppDispatch();
   const setOpen = (value) => {
-    dispatch(setActionOpen({
-      key: "settings" /* settings */,
-      isOpen: value
-    }));
+    if (profile) {
+      dispatch(setActionOpen({
+        key: "settings" /* settings */,
+        isOpen: value,
+        profile
+      }));
+    }
     if (!value) dispatch(setHovering(false));
   };
   return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
@@ -2303,6 +2612,7 @@ var TocContent = ({
         selectedKeys: tocEntry ? [tocEntry] : [],
         expandedKeys,
         onExpandedChange,
+        dir: isRTL ? "rtl" : "ltr",
         children: function renderItem(item) {
           return /* @__PURE__ */ jsxs(
             TreeItem,
@@ -2341,16 +2651,18 @@ 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 actionState = useAppSelector((state) => state.actions.keys["toc" /* toc */]);
+  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) => {
-    dispatch(setActionOpen({ key: "toc" /* toc */, isOpen: value }));
-  }, [dispatch]);
+    if (profile) {
+      dispatch(setActionOpen({ key: "toc" /* toc */, isOpen: value, profile }));
+    }
+  }, [dispatch, profile]);
   const { expandedKeys, setExpandedKeys, filterValue, setFilterValue, displayedTocTree, treeRef, searchInputRef } = useTocContent({ isOpen: actionState?.isOpen ?? false, tocTree, tocEntry: tocEntryId });
   const handleAction = (keys) => {
     if (keys === "all" || !keys || keys.size === 0) return;
@@ -2426,13 +2738,17 @@ var toc_default = SvgToc;
 var StatefulTocTrigger = ({ variant }) => {
   const preferences = useActionsPreferences();
   const { t } = useI18n();
-  const actionState = useAppSelector((state) => state.actions.keys["toc" /* toc */]);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const actionState = useAppSelector((state) => profile ? state.actions.keys[profile]["toc" /* toc */] : void 0);
   const dispatch = useAppDispatch();
   const setOpen = (value) => {
-    dispatch(setActionOpen({
-      key: "toc" /* toc */,
-      isOpen: value
-    }));
+    if (profile) {
+      dispatch(setActionOpen({
+        key: "toc" /* toc */,
+        isOpen: value,
+        profile
+      }));
+    }
   };
   return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
     StatefulOverflowMenuItem,
@@ -2488,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) => {
@@ -2550,6 +2866,7 @@ var StatefulRadioGroup = ({
 }) => {
   const itemsRef = useRef(items || []);
   const wrapperRef = useRef(null);
+  const profile = useAppSelector((state) => state.reader.profile);
   const direction = useAppSelector((state) => state.reader.direction);
   const isRTL = direction === "rtl" /* rtl */;
   const settingsContainer = useAppSelector((state) => state.reader.settingsContainer);
@@ -2558,12 +2875,15 @@ var StatefulRadioGroup = ({
     if (settingsContainer !== "initial" /* initial */) {
       dispatch(setSettingsContainer("initial" /* initial */));
     } else {
-      dispatch(setActionOpen({
-        key: "settings" /* settings */,
-        isOpen: false
-      }));
+      if (profile) {
+        dispatch(setActionOpen({
+          key: "settings" /* settings */,
+          isOpen: false,
+          profile
+        }));
+      }
     }
-  }, [dispatch, settingsContainer]);
+  }, [dispatch, settingsContainer, profile]);
   const onFocusCallback = useCallback((value2) => {
     const element = wrapperRef.current?.querySelector(`[value="${value2}"]`);
     if (element) element.focus();
@@ -2605,6 +2925,25 @@ var StatefulRadioGroup = ({
     }
   ) });
 };
+
+// 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" }) });
@@ -2613,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);
@@ -2634,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",
@@ -2664,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(() => {
@@ -2714,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 || {}
@@ -2725,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 || {}
@@ -2739,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();
@@ -2758,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)
@@ -2784,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" }));
@@ -2811,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,
     {
@@ -2850,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",
@@ -2877,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,
     {
@@ -2928,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,
     {
@@ -2959,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 = [
@@ -2978,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,
     {
@@ -3125,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 {
@@ -3163,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(() => {
@@ -3194,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 */:
@@ -3398,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) => {
@@ -3454,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();
@@ -3469,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,
     {
@@ -3534,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();
@@ -3585,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,
     {
@@ -3618,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,
     {
@@ -3684,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,
     {
@@ -3737,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 */);
@@ -3746,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,
     {
@@ -3799,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);
@@ -3820,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({
@@ -3839,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 || [];
@@ -3884,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 */,
@@ -3909,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));
@@ -3925,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,
     {
@@ -3942,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,
     {
@@ -3965,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 = () => {
@@ -3979,7 +4476,7 @@ var StatefulTheme = () => {
   const isRTL = direction === "rtl" /* rtl */;
   const themeArray = profile === "audio" ? audioThemeOrder ?? [] : isFXL ? fxlThemeOrder ?? [] : reflowThemeOrder ?? [];
   const themeObject = useAppSelector((state) => state.theming.theme);
-  const theme = profile === "audio" ? themeObject.audio : isFXL ? themeObject.fxl : themeObject.reflow;
+  const theme = profile === "audio" ? themeObject.audio ?? "auto" : isFXL ? themeObject.fxl ?? "auto" : themeObject.reflow ?? "auto";
   const colorScheme = useAppSelector((state) => state.theming.colorScheme);
   const coverTheme = useAppSelector((state) => state.theming.coverTheme);
   const themeItems = useRef(
@@ -3997,10 +4494,15 @@ var StatefulTheme = () => {
     currentValue: theme,
     onChange: async (val) => await updatePreference(val),
     isRTL,
-    onEscape: () => dispatch(setActionOpen({
-      key: "settings" /* settings */,
-      isOpen: false
-    })),
+    onEscape: () => {
+      if (profile) {
+        dispatch(setActionOpen({
+          key: "settings" /* settings */,
+          isOpen: false,
+          profile
+        }));
+      }
+    },
     onFocus: (id) => {
       const element = radioGroupWrapperRef.current?.querySelector(`[id="${id}"]`);
       if (element) element.focus();
@@ -4106,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,
     {
@@ -4162,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,
@@ -4172,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 = {
@@ -4234,7 +4736,7 @@ var createDefaultPlugin = () => {
     id: "core",
     name: "Core Components",
     description: "Default components for Thorium Web Epub StatefulReader",
-    version: "1.3.0",
+    version: "1.4.0",
     components: {
       actions: {
         ["fullscreen" /* fullscreen */]: {
@@ -4310,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
         },
@@ -4338,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;
@@ -4351,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}"]`);
@@ -4474,6 +4985,7 @@ var StatefulAudioSkipBackwardInterval = ({
 }) => {
   const { t } = useI18n();
   const { preferences } = useAudioPreferences();
+  const profile = useAppSelector((state) => state.reader.profile);
   const skipBackwardInterval = useAppSelector((state) => state.audioSettings.skipBackwardInterval);
   const dispatch = useAppDispatch();
   const { submitPreferences, getSetting, preferencesEditor } = useNavigator().media;
@@ -4523,7 +5035,11 @@ var StatefulAudioSkipBackwardInterval = ({
         label: t("reader.playback.preferences.audio.skipBackwardInterval"),
         presets: presets || [],
         formatOptions: { style: "unit", unit: "second" },
-        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        onEscape: () => {
+          if (profile) {
+            dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false, profile }));
+          }
+        },
         value: skipBackwardInterval ?? void 0,
         onChange: (v) => updatePreference(v)
       }
@@ -4538,7 +5054,11 @@ var StatefulAudioSkipBackwardInterval = ({
         placeholder: placeholderText,
         presets: presets || [],
         formatOptions: { style: "unit", unit: "second" },
-        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        onEscape: () => {
+          if (profile) {
+            dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false, profile }));
+          }
+        },
         value: skipBackwardInterval ?? void 0,
         onChange: updatePreference,
         range: skipBackwardIntervalRangeConfig.range,
@@ -4567,6 +5087,7 @@ var StatefulAudioSkipForwardInterval = ({
 }) => {
   const { t } = useI18n();
   const { preferences } = useAudioPreferences();
+  const profile = useAppSelector((state) => state.reader.profile);
   const skipForwardInterval = useAppSelector((state) => state.audioSettings.skipForwardInterval);
   const dispatch = useAppDispatch();
   const { submitPreferences, getSetting, preferencesEditor } = useNavigator().media;
@@ -4616,7 +5137,11 @@ var StatefulAudioSkipForwardInterval = ({
         label: t("reader.playback.preferences.audio.skipForwardInterval"),
         presets: presets || [],
         formatOptions: { style: "unit", unit: "second" },
-        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        onEscape: () => {
+          if (profile) {
+            dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false, profile }));
+          }
+        },
         value: skipForwardInterval,
         onChange: (v) => updatePreference(v)
       }
@@ -4631,7 +5156,11 @@ var StatefulAudioSkipForwardInterval = ({
         placeholder: placeholderText,
         presets: presets || [],
         formatOptions: { style: "unit", unit: "second" },
-        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        onEscape: () => {
+          if (profile) {
+            dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false, profile }));
+          }
+        },
         value: skipForwardInterval,
         onChange: updatePreference,
         range: skipForwardIntervalRangeConfig.range,
@@ -4659,6 +5188,7 @@ var StatefulAudioSkipInterval = ({
 }) => {
   const { t } = useI18n();
   const { preferences } = useAudioPreferences();
+  const profile = useAppSelector((state) => state.reader.profile);
   const skipInterval = useAppSelector((state) => state.audioSettings.skipInterval);
   const dispatch = useAppDispatch();
   const { submitPreferences, getSetting, preferencesEditor } = useNavigator().media;
@@ -4710,7 +5240,11 @@ var StatefulAudioSkipInterval = ({
         label: t("reader.playback.preferences.audio.skipInterval"),
         presets: presets || [],
         formatOptions: { style: "unit", unit: "second" },
-        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        onEscape: () => {
+          if (profile) {
+            dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false, profile }));
+          }
+        },
         value: skipInterval,
         onChange: (v) => updatePreference(v)
       }
@@ -4725,7 +5259,11 @@ var StatefulAudioSkipInterval = ({
         placeholder: placeholderText,
         presets: presets || [],
         formatOptions: { style: "unit", unit: "second" },
-        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        onEscape: () => {
+          if (profile) {
+            dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false, profile }));
+          }
+        },
         value: skipInterval,
         onChange: updatePreference,
         range: skipIntervalRangeConfig.range,
@@ -4790,6 +5328,7 @@ var thorium_web_volume_default = {
 };
 var StatefulAudioVolumeTrigger = ({ ref }) => {
   const { t } = useI18n();
+  const profile = useAppSelector((state) => state.reader.profile);
   const { preferences } = useAudioPreferences();
   const { preferencesEditor } = useNavigator().media;
   const volume = useAppSelector((state) => state.audioSettings.volume);
@@ -4812,7 +5351,11 @@ var StatefulAudioVolumeTrigger = ({ ref }) => {
       ref,
       tooltipLabel: t("reader.playback.preferences.audio.volume"),
       placement: "top",
-      onPress: () => dispatch(toggleActionOpen({ key: "audio.volume" /* volume */ })),
+      onPress: () => {
+        if (profile) {
+          dispatch(toggleActionOpen({ key: "audio.volume" /* volume */, profile }));
+        }
+      },
       isDisabled,
       className: thorium_web_volume_default.button,
       children: /* @__PURE__ */ jsx(VolumeIcon, { "aria-hidden": "true", focusable: "false" })
@@ -4821,7 +5364,8 @@ var StatefulAudioVolumeTrigger = ({ ref }) => {
 };
 var StatefulAudioVolumeContainer = ({ triggerRef, placement = "top" }) => {
   const volume = useAppSelector((state) => state.audioSettings.volume);
-  const isOpen = useAppSelector((state) => state.actions.keys["audio.volume" /* volume */]?.isOpen ?? false);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const isOpen = useAppSelector((state) => profile ? state.actions.keys[profile]["audio.volume" /* volume */]?.isOpen ?? false : false);
   const { t } = useI18n();
   const { preferences } = useAudioPreferences();
   const dispatch = useAppDispatch();
@@ -4837,8 +5381,10 @@ var StatefulAudioVolumeContainer = ({ triggerRef, placement = "top" }) => {
   const docking = useDocking("audio.volume" /* volume */);
   const sliderOrientation = docking.sheetType === "popover" /* popover */ || docking.sheetType === "compactPopover" /* compactPopover */ ? "vertical" : "horizontal";
   const setOpen = useCallback((open) => {
-    dispatch(setActionOpen({ key: "audio.volume" /* volume */, isOpen: open }));
-  }, [dispatch]);
+    if (profile) {
+      dispatch(setActionOpen({ key: "audio.volume" /* volume */, isOpen: open, profile }));
+    }
+  }, [dispatch, profile]);
   return /* @__PURE__ */ jsx(
     StatefulSheetWrapper,
     {
@@ -4885,6 +5431,7 @@ var thorium_web_playbackRate_default = {
   slider: "thorium_web_playbackRate_slider"};
 var StatefulAudioPlaybackRateTrigger = ({ ref }) => {
   const { t } = useI18n();
+  const profile = useAppSelector((state) => state.reader.profile);
   const playbackRate = useAppSelector((state) => state.audioSettings.playbackRate);
   const isTrackReady = useAppSelector((state) => state.player.isTrackReady);
   const isStalled = useAppSelector((state) => state.player.isStalled);
@@ -4896,7 +5443,11 @@ var StatefulAudioPlaybackRateTrigger = ({ ref }) => {
       ref,
       tooltipLabel: t("reader.playback.preferences.playbackRate.descriptive"),
       placement: "top",
-      onPress: () => dispatch(toggleActionOpen({ key: "audio.playbackRate" /* playbackRate */ })),
+      onPress: () => {
+        if (profile) {
+          dispatch(toggleActionOpen({ key: "audio.playbackRate" /* playbackRate */, profile }));
+        }
+      },
       isDisabled,
       className: thorium_web_playbackRate_default.button,
       children: [
@@ -4910,7 +5461,8 @@ var StatefulAudioPlaybackRateTrigger = ({ ref }) => {
   );
 };
 var StatefulAudioPlaybackRateContainer = ({ triggerRef, placement = "top" }) => {
-  const isOpen = useAppSelector((state) => state.actions.keys["audio.playbackRate" /* playbackRate */]?.isOpen ?? false);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const isOpen = useAppSelector((state) => profile ? state.actions.keys[profile]["audio.playbackRate" /* playbackRate */]?.isOpen ?? false : false);
   const { t } = useI18n();
   const { preferences } = useAudioPreferences();
   const playbackRate = useAppSelector((state) => state.audioSettings.playbackRate);
@@ -4924,8 +5476,10 @@ var StatefulAudioPlaybackRateContainer = ({ triggerRef, placement = "top" }) =>
   }, [submitPreferences, getSetting, dispatch]);
   const docking = useDocking("audio.playbackRate" /* playbackRate */);
   const setOpen = useCallback((open) => {
-    dispatch(setActionOpen({ key: "audio.playbackRate" /* playbackRate */, isOpen: open }));
-  }, [dispatch]);
+    if (profile) {
+      dispatch(setActionOpen({ key: "audio.playbackRate" /* playbackRate */, isOpen: open, profile }));
+    }
+  }, [dispatch, profile]);
   const renderContent = () => {
     if (config.variant === "slider" /* slider */) {
       return /* @__PURE__ */ jsx("div", { className: thorium_web_playbackRate_default.slider, children: /* @__PURE__ */ jsx(
@@ -4992,6 +5546,7 @@ var thorium_web_audioToc_default = {
 };
 var StatefulAudioTocTrigger = ({ ref }) => {
   const { t } = useI18n();
+  const profile = useAppSelector((state) => state.reader.profile);
   const isTrackReady = useAppSelector((state) => state.player.isTrackReady);
   const isStalled = useAppSelector((state) => state.player.isStalled);
   const isDisabled = !isTrackReady || isStalled;
@@ -5002,7 +5557,11 @@ var StatefulAudioTocTrigger = ({ ref }) => {
       ref,
       tooltipLabel: t("reader.tableOfContents.title"),
       placement: "top",
-      onPress: () => dispatch(toggleActionOpen({ key: "audio.toc" /* toc */ })),
+      onPress: () => {
+        if (profile) {
+          dispatch(toggleActionOpen({ key: "audio.toc" /* toc */, profile }));
+        }
+      },
       isDisabled,
       className: thorium_web_audioToc_default.button,
       children: /* @__PURE__ */ jsx(toc_default, { "aria-hidden": "true", focusable: "false" })
@@ -5011,20 +5570,22 @@ var StatefulAudioTocTrigger = ({ ref }) => {
 };
 var StatefulAudioTocContainer = ({ triggerRef }) => {
   const { t } = useI18n();
+  const profile = useAppSelector((state) => state.reader.profile);
   const { goLink } = useNavigator().unified;
   const dispatch = useAppDispatch();
-  const isOpen = useAppSelector((state) => state.actions.keys["audio.toc" /* toc */]?.isOpen ?? false);
+  const isOpen = useAppSelector((state) => profile ? state.actions.keys[profile]["audio.toc" /* toc */]?.isOpen ?? false : false);
   const unstableTimeline = useAppSelector((state) => state.publication.unstableTimeline);
   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) => {
-    dispatch(setActionOpen({ key: "audio.toc" /* toc */, isOpen: value }));
-  }, [dispatch]);
+    if (profile) {
+      dispatch(setActionOpen({ key: "audio.toc" /* toc */, isOpen: value, profile }));
+    }
+  }, [dispatch, profile]);
   const { expandedKeys, setExpandedKeys, filterValue, setFilterValue, displayedTocTree, treeRef, searchInputRef } = useTocContent({ isOpen, tocTree, tocEntry: tocEntryId });
   useEffect(() => {
     if (isOpen) {
@@ -5113,6 +5674,7 @@ var thorium_web_sleepTimer_default = {
 };
 var StatefulAudioSleepTimerTrigger = ({ ref }) => {
   const { t } = useI18n();
+  const profile = useAppSelector((state) => state.reader.profile);
   const remainingSeconds = useAppSelector((state) => state.player.sleepTimer.remainingSeconds);
   const onTrackEnd = useAppSelector((state) => state.player.sleepTimer.onTrackEnd);
   const onFragmentEnd = useAppSelector((state) => state.player.sleepTimer.onFragmentEnd);
@@ -5136,7 +5698,11 @@ var StatefulAudioSleepTimerTrigger = ({ ref }) => {
       ref,
       tooltipLabel: t("reader.playback.preferences.sleepTimer.descriptive"),
       placement: "top",
-      onPress: () => dispatch(toggleActionOpen({ key: "audio.sleepTimer" /* sleepTimer */ })),
+      onPress: () => {
+        if (profile) {
+          dispatch(toggleActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, profile }));
+        }
+      },
       isDisabled,
       className: thorium_web_sleepTimer_default.button,
       children: [
@@ -5149,7 +5715,11 @@ var StatefulAudioSleepTimerTrigger = ({ ref }) => {
 var StatefulAudioSleepTimerContainer = ({ triggerRef, placement = "top" }) => {
   const [hours, setHours] = useState(0);
   const [minutes, setMinutes] = useState(0);
-  const isOpen = useAppSelector((state) => state.actions.keys["audio.sleepTimer" /* sleepTimer */]?.isOpen ?? false);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const isOpen = useAppSelector((state) => {
+    if (!profile || !state.actions.keys[profile]) return false;
+    return state.actions.keys[profile]["audio.sleepTimer" /* sleepTimer */]?.isOpen ?? false;
+  });
   const remainingSeconds = useAppSelector((state) => state.player.sleepTimer.remainingSeconds);
   const onTrackEnd = useAppSelector((state) => state.player.sleepTimer.onTrackEnd);
   const onFragmentEnd = useAppSelector((state) => state.player.sleepTimer.onFragmentEnd);
@@ -5188,14 +5758,18 @@ var StatefulAudioSleepTimerContainer = ({ triggerRef, placement = "top" }) => {
     dispatch(setSleepTimerRemainingSeconds(null));
     dispatch(setSleepTimerOnTrackEnd(false));
     dispatch(setSleepTimerOnFragmentEnd(false));
-    dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: false }));
-  }, [dispatch]);
+    if (profile) {
+      dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: false, profile }));
+    }
+  }, [dispatch, profile]);
   const handleStart = useCallback(() => {
     const totalSeconds = hours * 3600 + minutes * 60;
     if (totalSeconds <= 0) return;
     dispatch(setSleepTimerRemainingSeconds(totalSeconds));
-    dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: false }));
-  }, [hours, minutes, dispatch]);
+    if (profile) {
+      dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: false, profile }));
+    }
+  }, [hours, minutes, dispatch, profile]);
   const handlePresetSelect = useCallback((value) => {
     if (value === "endOfResource") {
       dispatch(setSleepTimerOnTrackEnd(true));
@@ -5210,12 +5784,16 @@ var StatefulAudioSleepTimerContainer = ({ triggerRef, placement = "top" }) => {
       dispatch(setSleepTimerOnFragmentEnd(false));
       dispatch(setSleepTimerRemainingSeconds(Number(value) * 60));
     }
-    dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: false }));
-  }, [dispatch]);
+    if (profile) {
+      dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: false, profile }));
+    }
+  }, [dispatch, profile]);
   const docking = useDocking("audio.sleepTimer" /* sleepTimer */);
   const setOpen = useCallback((open) => {
-    dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: open }));
-  }, [dispatch]);
+    if (profile) {
+      dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: open, profile }));
+    }
+  }, [dispatch, profile]);
   const isActive = remainingSeconds !== null || onTrackEnd || onFragmentEnd;
   const maxHours = (config.variant === "durationField" /* durationField */ ? config.maxHours : void 0) ?? 23;
   const renderContent = () => {
@@ -5420,7 +5998,7 @@ var createAudioDefaultPlugin = () => {
     id: "audio-core",
     name: "Audio Core Components",
     description: "Default components for Thorium Web Audio StatefulReader",
-    version: "1.3.0",
+    version: "1.4.0",
     components: {
       actions: {
         ["settings" /* settings */]: {
@@ -5474,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
@@ -5720,36 +6081,31 @@ var thorium_web_reader_app_default = {
   srOnly: "thorium_web_reader_app_srOnly"
 };
 var useResizablePanel = (panel) => {
-  const defaultPanel = {
-    actionKey: null,
-    active: false,
-    collapsed: false
-  };
-  const safePanel = panel || defaultPanel;
   const preferences = useActionsPreferences();
   const { theming } = useSharedPreferences();
   const defaultWidth = theming.layout.defaults.dockingWidth;
   const [pref, setPref] = useState(
-    safePanel.actionKey ? preferences.actionsKeys[safePanel.actionKey]?.docked || null : null
+    panel?.actionKey ? preferences.actionsKeys[panel.actionKey]?.docked || null : null
   );
-  const actionsMap = useAppSelector((state) => state.actions.keys);
-  const actions = useActions(actionsMap);
-  const previouslyCollapsed = usePrevious(safePanel.collapsed);
-  const previousWidth = actions.getDockedWidth(safePanel.actionKey) || null;
+  const profile = useAppSelector((state) => state.reader.profile);
+  const actionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
+  const actions = useActions(actionsMap || {});
+  const previouslyCollapsed = usePrevious(panel?.collapsed);
+  const previousWidth = actions.getDockedWidth(panel?.actionKey) || null;
   const width = pref?.width || defaultWidth;
   const minWidth = pref?.minWidth && pref.minWidth < width ? pref.minWidth : defaultWidth < width ? defaultWidth : width;
   const maxWidth = pref?.maxWidth && pref.maxWidth > width ? pref.maxWidth : defaultWidth > width ? defaultWidth : width;
   const isPopulated = () => {
-    return safePanel.active && actions.isOpen(safePanel.actionKey);
+    return !!(panel?.active && actions.isOpen(panel?.actionKey));
   };
   const isCollapsed = () => {
-    return safePanel.collapsed;
+    return !!panel?.collapsed;
   };
   const forceExpand = () => {
-    return !!(isPopulated() && previouslyCollapsed && !safePanel.collapsed);
+    return !!(isPopulated() && previouslyCollapsed && !panel?.collapsed);
   };
   const currentKey = () => {
-    return safePanel.actionKey;
+    return panel?.actionKey ?? null;
   };
   const isResizable = () => {
     return isPopulated() ? Math.round(width) > Math.round(minWidth) && Math.round(width) < Math.round(maxWidth) : false;
@@ -5777,8 +6133,8 @@ var useResizablePanel = (panel) => {
     return current;
   }, [minWidth, maxWidth]);
   useEffect(() => {
-    setPref(safePanel.actionKey ? preferences.actionsKeys[safePanel.actionKey]?.docked || null : null);
-  }, [safePanel.actionKey, preferences]);
+    setPref(panel?.actionKey ? preferences.actionsKeys[panel.actionKey]?.docked || null : null);
+  }, [panel?.actionKey, preferences]);
   return {
     currentKey,
     isPopulated,
@@ -6028,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;
@@ -6095,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",
@@ -6122,14 +6479,16 @@ var useReaderHeaderBase = (actionKeys) => {
   const headerRef = useRef(null);
   const { t } = useI18n();
   const { actionsComponentsMap } = usePlugins();
-  const actionsMap = 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);
   const positionsList = useAppSelector((state) => state.publication.positionsList);
-  const actions = useActions({ ...actionsMap, ...overflowMap });
+  const profile = useAppSelector((state) => state.reader.profile);
+  const profileActionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
+  const mergedActionsMap = useMemo(() => ({ ...profileActionsMap, ...overflowMap }), [profileActionsMap, overflowMap]);
+  const actions = useActions(mergedActionsMap);
   const dispatch = useAppDispatch();
   const { focusWithinProps } = useFocusWithin({
     onFocusWithin() {
@@ -6197,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-D7MFLHXV.mjs.map
-//# sourceMappingURL=chunk-D7MFLHXV.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