@edrlab/thorium-web 1.2.1 → 1.3.0

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

@@ -1,22 +1,23 @@
-import { makeBreakpointsMap, isInteractiveElement, isKeyboardTriggered, isActiveElement, getBestMatchingProgressionFormat } from './chunk-47AIIJFO.mjs';
-import { useFullscreen, useEpubNavigator, useLocalStorage } from './chunk-4VHEHMJN.mjs';
-import { useAppDispatch, setFullscreen, useAppSelector, setActionOpen, dockAction, 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, ThReduxPreferencesAdapter, setReaderProfile, setPositionsList, setRTL, setFXL, setFontLanguage, setHasDisplayTransformability, setHovering, setImmersive, setOverflow, setUserNavigated, setTocEntry, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from './chunk-K3K7TUWM.mjs';
-import { usePreferences, prefixString, ThDockingTypes, ThSheetTypes, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, usePreferenceKeys, ThTextSettingsKeys, ThSpacingSettingsKeys, buildThemeObject, defaultPreferences, ThPreferencesProvider } from './chunk-7NEQAW7J.mjs';
-import { ThRunningHeadFormat, ThProgressionFormat } from './chunk-XVSFXHYB.mjs';
-import { isIOSish, getPlatform, buildShortcut, metaKeys } from './chunk-5LUMM7FW.mjs';
+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 { 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 { isIOSish, buildShortcut, metaKeys } from './chunk-5LUMM7FW.mjs';
 import { ErrorHandler } from './chunk-RRDEPGBK.mjs';
-import { ThMenuItem, ThActionButton, ThMenu, ThCollapsibleActionsBar, ThPopover, ThContainerHeader, ThNavigationButton, ThContainerBody, ThBottomSheet, ThCloseButton, ThModal, ThDockedPanel, ThTypedComponentRenderer, useActions, ThForm, ThFormNumberField, ThSettingsWrapper, ThFormSearchField, ThRadioGroup, ThDropdown, ThSwitch, ThNumberField, ThSlider, ThInteractiveOverlay, ThHeader, ThFooter, ThLink, ThLibrary, ThHome, ThBackArrow, ThRunningHead, ThPagination, ThProgression } from './chunk-NYZBHYW2.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 { usePrevious } from './chunk-YZ73DHRU.mjs';
 import { useI18n } from './chunk-IYAFKTPL.mjs';
-import { Text, useFilter, Tree, TreeItem, TreeItemContent, Button, Collection, ListBox, ListBoxItem, Radio, Keyboard, Toolbar } from 'react-aria-components';
+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 React18, { createContext, useRef, useCallback, useEffect, useMemo, useState, useContext } from 'react';
-import classNames3 from 'classnames';
+import { useObjectRef, useNumberFormatter, FocusScope, useFocusWithin } from 'react-aria';
+import classNames4 from 'classnames';
+import React24, { createContext, useCallback, useRef, useContext, useEffect, useMemo, useState } from 'react';
 import { Link, HttpFetcher, Manifest, Publication, ReadingProgression, Layout, Feature, Profile } from '@readium/shared';
 import { TextAlignment } from '@readium/navigator';
 import { useStore } from 'react-redux';
 import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
-import { useFocusWithin } from 'react-aria';
 
 // src/components/Actions/assets/styles/thorium-web.overflow.module.css
 var thorium_web_overflow_default = {
@@ -33,10 +34,10 @@ var UnstableStatefulShortcut = ({
   representation,
   joiner
 }) => {
-  const { preferences } = usePreferences();
+  const { shortcuts } = useSharedPreferences();
   const platformModifier = useAppSelector((state) => state.reader.platformModifier);
-  representation = representation ? representation : preferences.shortcuts.representation || "symbol" /* symbol */;
-  joiner = joiner ? joiner : preferences.shortcuts.joiner || " + ";
+  representation = representation ? representation : shortcuts.representation || "symbol" /* symbol */;
+  joiner = joiner ? joiner : shortcuts.joiner || " + ";
   const shortcutObj = buildShortcut(rawForm);
   if (shortcutObj) {
     let shortcutRepresentation = [];
@@ -115,14 +116,15 @@ var thorium_web_button_default = {
   iconApplyStroke: "thorium_web_button_iconApplyStroke"
 };
 var StatefulActionIcon = ({
+  ref: externalRef,
   visibility,
   placement,
   tooltipLabel,
   children,
   ...props
 }) => {
-  const { preferences } = usePreferences();
-  const triggerRef = useRef(null);
+  const { theming } = useSharedPreferences();
+  const triggerRef = useObjectRef(externalRef ?? null);
   const dispatch = useAppDispatch();
   const handleClassNameFromState = () => {
     let className = "";
@@ -153,19 +155,19 @@ var StatefulActionIcon = ({
     ThActionButton,
     {
       ref: triggerRef,
-      className: classNames3(thorium_web_button_default.icon, handleClassNameFromState(), props.className),
+      className: classNames4(thorium_web_button_default.icon, handleClassNameFromState(), props.className),
       onPress: props.onPress || defaultOnPressFunc,
       onKeyDown: blurOnEsc,
       onFocus: handleImmersive,
       compounds: tooltipLabel ? {
         tooltipTrigger: {
-          delay: preferences.theming.icon.tooltipDelay,
-          closeDelay: preferences.theming.icon.tooltipDelay
+          delay: theming.icon.tooltipDelay,
+          closeDelay: theming.icon.tooltipDelay
         },
         tooltip: {
           className: thorium_web_button_default.tooltip,
           placement,
-          offset: preferences.theming.icon.tooltipOffset || 0
+          offset: theming.icon.tooltipOffset || 0
         },
         label: tooltipLabel
       } : void 0,
@@ -179,7 +181,7 @@ var fullscreen_default = SvgFullscreen;
 var SvgFullscreenExit = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "inherit", ...props, children: /* @__PURE__ */ jsx("path", { d: "M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z" }) });
 var fullscreen_exit_default = SvgFullscreenExit;
 var StatefulFullscreenTrigger = ({ variant }) => {
-  const { preferences } = usePreferences();
+  const preferences = useActionsPreferences();
   const { t } = useI18n();
   const dispatch = useAppDispatch();
   const onChange = useCallback((isFullscreen) => {
@@ -198,7 +200,7 @@ var StatefulFullscreenTrigger = ({ variant }) => {
     {
       label,
       SVGIcon: Icon,
-      shortcut: preferences.actions.keys["fullscreen" /* fullscreen */].shortcut,
+      shortcut: preferences.actionsKeys["fullscreen" /* fullscreen */].shortcut,
       onAction: fs.handleFullscreen,
       id: "fullscreen" /* fullscreen */
     }
@@ -206,7 +208,7 @@ var StatefulFullscreenTrigger = ({ variant }) => {
     StatefulActionIcon,
     {
       className: thorium_web_button_default.iconCompSm,
-      visibility: preferences.actions.keys["fullscreen" /* fullscreen */].visibility,
+      visibility: preferences.actionsKeys["fullscreen" /* fullscreen */].visibility,
       "aria-label": label,
       placement: "bottom",
       tooltipLabel: t("reader.fullscreen.tooltip"),
@@ -296,26 +298,99 @@ var StatefulCollapsibleActionsBar = ({
   ) });
 };
 var NavigatorContext = createContext(null);
-var NavigatorProvider = ({ navigator, children }) => {
-  return /* @__PURE__ */ jsx(NavigatorContext.Provider, { value: { navigator }, children });
-};
-var useNavigatorContext = () => {
-  const context = useContext(NavigatorContext);
-  if (!context) {
-    throw new Error("Navigator hooks must be used within NavigatorProvider");
-  }
-  return context.navigator;
+var NavigatorProvider = ({
+  mediaNavigator,
+  visualNavigator,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(NavigatorContext.Provider, { value: { media: mediaNavigator, visual: visualNavigator }, children });
 };
 
 // src/core/Navigator/hooks/useNavigatorContext.ts
+var createUnifiedGetSetting = (navigator) => {
+  return (settingKey) => {
+    return navigator.getSetting(settingKey);
+  };
+};
+var isVisualNavigator = (navigator, contextVisual) => {
+  return navigator === contextVisual;
+};
 var useNavigator = () => {
-  return useNavigatorContext();
+  const context = useContext(NavigatorContext);
+  if (!context) {
+    throw new Error("useNavigator must be used within NavigatorProvider");
+  }
+  return {
+    get visual() {
+      if (!context.visual) throw new Error("Visual navigator not available");
+      const visualNavigator = context.visual;
+      return {
+        ...visualNavigator,
+        getSetting: createUnifiedGetSetting(visualNavigator)
+      };
+    },
+    get media() {
+      if (!context.media) throw new Error("Media navigator not available");
+      return context.media;
+    },
+    // 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 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
+      };
+    }
+  };
 };
 
 // src/components/Sheets/assets/styles/thorium-web.sheets.module.css
 var thorium_web_sheets_default = {
   fullscreen: "thorium_web_sheets_fullscreen",
+  modal: "thorium_web_sheets_modal",
+  modalDialog: "thorium_web_sheets_modalDialog",
   popover: "thorium_web_sheets_popover",
+  compactPopover: "thorium_web_sheets_compactPopover",
   draggable: "thorium_web_sheets_draggable",
   draggableFullHeightDetent: "thorium_web_sheets_draggableFullHeightDetent",
   draggableContentHeightDetent: "thorium_web_sheets_draggableContentHeightDetent",
@@ -347,10 +422,11 @@ var dock_to_right_default = SvgDockToRight;
 var SvgDockToLeft = (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: "M200-120q-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-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z" }) });
 var dock_to_left_default = SvgDockToLeft;
 var StatefulDockStart = ({ variant, associatedKey }) => {
-  const { preferences } = usePreferences();
+  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 isRTL = direction === "rtl" /* rtl */;
   const translationKey = isRTL ? "reader.app.docker.dockToRight" : "reader.app.docker.dockToLeft";
   const localeKey = {
@@ -361,13 +437,14 @@ var StatefulDockStart = ({ variant, associatedKey }) => {
   const isDisabled = actions.whichDocked(associatedKey) === "dockingStart" /* start */;
   const dispatch = useAppDispatch();
   const handlePress = useCallback(() => {
-    if (associatedKey) {
+    if (associatedKey && profile) {
       dispatch(dockAction({
         key: associatedKey,
-        dockingKey: "dockingStart" /* start */
+        dockingKey: "dockingStart" /* start */,
+        profile
       }));
     }
-  }, [dispatch, associatedKey]);
+  }, [dispatch, associatedKey, profile]);
   return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
     StatefulOverflowMenuItem,
     {
@@ -392,10 +469,11 @@ var StatefulDockStart = ({ variant, associatedKey }) => {
   ) });
 };
 var StatefulDockEnd = ({ variant, associatedKey }) => {
-  const { preferences } = usePreferences();
+  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 isRTL = direction === "rtl" /* rtl */;
   const translationKey = isRTL ? "reader.app.docker.dockToLeft" : "reader.app.docker.dockToRight";
   const localeKey = {
@@ -406,13 +484,14 @@ var StatefulDockEnd = ({ variant, associatedKey }) => {
   const isDisabled = actions.whichDocked(associatedKey) === "dockingEnd" /* end */;
   const dispatch = useAppDispatch();
   const handlePress = useCallback(() => {
-    if (associatedKey) {
+    if (associatedKey && profile) {
       dispatch(dockAction({
         key: associatedKey,
-        dockingKey: "dockingEnd" /* end */
+        dockingKey: "dockingEnd" /* end */,
+        profile
       }));
     }
-  }, [dispatch, associatedKey]);
+  }, [dispatch, associatedKey, profile]);
   return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
     StatefulOverflowMenuItem,
     {
@@ -439,20 +518,22 @@ var StatefulDockEnd = ({ variant, associatedKey }) => {
 var SvgStack = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "inherit", ...props, children: /* @__PURE__ */ jsx("path", { d: "M240-400v80h-80q-33 0-56.5-23.5T80-400v-400q0-33 23.5-56.5T160-880h400q33 0 56.5 23.5T640-800v80h-80v-80H160v400h80ZM400-80q-33 0-56.5-23.5T320-160v-400q0-33 23.5-56.5T400-640h400q33 0 56.5 23.5T880-560v400q0 33-23.5 56.5T800-80H400Zm0-80h400v-400H400v400Zm200-200Z" }) });
 var stack_default = SvgStack;
 var StatefulDockTransientPopover = ({ variant, associatedKey }) => {
-  const { preferences } = usePreferences();
+  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 isDisabled = !actions.isDocked(associatedKey) || actions.whichDocked(associatedKey) === "dockingTransient" /* transient */;
   const dispatch = useAppDispatch();
   const handlePress = useCallback(() => {
-    if (associatedKey) {
+    if (associatedKey && profile) {
       dispatch(dockAction({
         key: associatedKey,
-        dockingKey: "dockingTransient" /* transient */
+        dockingKey: "dockingTransient" /* transient */,
+        profile
       }));
     }
-  }, [dispatch, associatedKey]);
+  }, [dispatch, associatedKey, profile]);
   return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
     StatefulOverflowMenuItem,
     {
@@ -493,7 +574,8 @@ var StatefulDocker = ({
   ref,
   onClose
 }) => {
-  const { preferences } = usePreferences();
+  const preferences = useActionsPreferences();
+  const { theming } = useSharedPreferences();
   const { t } = useI18n();
   const listActionItems = useCallback(() => {
     const actionsItems = [];
@@ -527,8 +609,8 @@ var StatefulDocker = ({
         onPress: onClose,
         compounds: {
           tooltipTrigger: {
-            delay: preferences.theming.icon.tooltipDelay,
-            closeDelay: preferences.theming.icon.tooltipDelay
+            delay: theming.icon.tooltipDelay,
+            closeDelay: theming.icon.tooltipDelay
           },
           tooltip: {
             className: thorium_web_button_default.tooltip
@@ -547,7 +629,7 @@ var useWebkitPatch = (isOpen) => {
   const isScroll = isWebPub || scroll && !isFXL;
   const {
     getCframes
-  } = useNavigator();
+  } = useNavigator().unified;
   useEffect(() => {
     if (isScroll && !isOpen) {
       const container = document.getElementById("thorium-web-container");
@@ -556,7 +638,10 @@ var useWebkitPatch = (isOpen) => {
       container.style.height = `${currentHeight - 1}px`;
       setTimeout(() => {
         container.style.height = "";
-        const frame = getCframes()?.[0];
+        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) {
@@ -575,6 +660,7 @@ var StatefulPopoverSheet = ({
   heading,
   headerVariant,
   className,
+  headerClassName,
   isOpen,
   onOpenChange,
   onClosePress,
@@ -602,7 +688,7 @@ var StatefulPopoverSheet = ({
     }
   }, [isOpen]);
   useWebkitPatch(!!isOpen);
-  if (React18.Children.toArray(children).length > 0) {
+  if (React24.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThPopover,
       {
@@ -623,7 +709,7 @@ var StatefulPopoverSheet = ({
           updateState: resetFocus
         },
         placement: placement || "bottom",
-        className: classNames3(thorium_web_sheets_default.popover, className),
+        className: classNames4(thorium_web_sheets_default.popover, className),
         isOpen,
         onOpenChange,
         isKeyboardDismissDisabled: dismissEscapeKeyClose,
@@ -637,7 +723,7 @@ var StatefulPopoverSheet = ({
             ThContainerHeader,
             {
               ref: popoverHeaderRef,
-              className: thorium_web_sheets_default.header,
+              className: classNames4(thorium_web_sheets_default.header, headerClassName),
               label: heading,
               compounds: {
                 heading: {
@@ -650,7 +736,7 @@ var StatefulPopoverSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: t("reader.app.back.trigger"),
                   ref: popoverCloseRef,
-                  className: classNames3(className, thorium_web_button_default.backButton),
+                  className: classNames4(className, thorium_web_button_default.backButton),
                   "aria-label": t("reader.app.back.trigger"),
                   onPress: onClosePress
                 }
@@ -678,6 +764,124 @@ var StatefulPopoverSheet = ({
     ) });
   }
 };
+var StatefulModalBase = ({
+  id,
+  heading,
+  headerVariant,
+  className,
+  sheetClassName,
+  dialogClassName,
+  isOpen,
+  onOpenChange,
+  onClosePress,
+  docker,
+  children,
+  resetFocus,
+  focusWithinRef,
+  focusSelector,
+  scrollTopOnFocus,
+  dismissEscapeKeyClose
+}) => {
+  const { t } = useI18n();
+  const direction = useAppSelector((state) => state.reader.direction);
+  const sheetRef = useRef(null);
+  const sheetHeaderRef = useRef(null);
+  const sheetBodyRef = useRef(null);
+  const sheetCloseRef = useRef(null);
+  useEffect(() => {
+    if (isOpen && sheetRef.current && sheetHeaderRef.current) {
+      sheetRef.current.style.setProperty(
+        `--${prefixString("sheet-sticky-header")}`,
+        `${sheetHeaderRef.current.clientHeight}px`
+      );
+    }
+  }, [isOpen]);
+  useWebkitPatch(!!isOpen);
+  if (React24.Children.toArray(children).length > 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      ThModal,
+      {
+        ref: sheetRef,
+        focusOptions: {
+          withinRef: focusWithinRef ?? sheetBodyRef,
+          trackedState: isOpen,
+          fallbackRef: sheetCloseRef,
+          withSelector: focusSelector,
+          action: {
+            type: "focus",
+            options: {
+              preventScroll: scrollTopOnFocus ? true : false,
+              scrollContainerToTop: scrollTopOnFocus
+            }
+          },
+          updateState: resetFocus
+        },
+        compounds: {
+          dialog: {
+            className: classNames4(thorium_web_sheets_default.dialog, dialogClassName, className)
+          }
+        },
+        isOpen,
+        onOpenChange,
+        isDismissable: true,
+        className: sheetClassName,
+        isKeyboardDismissDisabled: dismissEscapeKeyClose,
+        children: [
+          /* @__PURE__ */ jsx(
+            ThContainerHeader,
+            {
+              ref: sheetHeaderRef,
+              className: thorium_web_sheets_default.header,
+              label: heading,
+              compounds: {
+                heading: {
+                  className: thorium_web_sheets_default.heading
+                }
+              },
+              children: headerVariant === "previous" /* previous */ ? /* @__PURE__ */ jsx(
+                ThNavigationButton,
+                {
+                  direction: direction === "ltr" ? "left" : "right",
+                  label: t("reader.app.back.trigger"),
+                  ref: sheetCloseRef,
+                  className: classNames4(className, thorium_web_button_default.backButton),
+                  "aria-label": t("reader.app.back.trigger"),
+                  onPress: onClosePress
+                }
+              ) : /* @__PURE__ */ jsx(
+                StatefulDocker,
+                {
+                  id,
+                  keys: docker || [],
+                  ref: sheetCloseRef,
+                  onClose: onClosePress
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ThContainerBody,
+            {
+              ref: sheetBodyRef,
+              className: thorium_web_sheets_default.body,
+              children
+            }
+          )
+        ]
+      }
+    ) });
+  }
+};
+var StatefulModalSheet = (props) => {
+  return /* @__PURE__ */ jsx(
+    StatefulModalBase,
+    {
+      ...props,
+      sheetClassName: thorium_web_sheets_default.modal,
+      dialogClassName: thorium_web_sheets_default.modalDialog
+    }
+  );
+};
 var DEFAULT_SNAPPOINTS = {
   min: 0.3,
   peek: 0.5,
@@ -698,7 +902,8 @@ var StatefulBottomSheet = ({
   scrollTopOnFocus,
   dismissEscapeKeyClose
 }) => {
-  const { preferences } = usePreferences();
+  const preferences = useActionsPreferences();
+  const sharedPreferences = useSharedPreferences();
   const { t } = useI18n();
   const direction = useAppSelector((state) => state.reader.direction);
   const prefersReducedMotion = useAppSelector((state) => state.theming.prefersReducedMotion);
@@ -717,7 +922,7 @@ var StatefulBottomSheet = ({
       }
     };
     let snapArray2 = [0];
-    const snapPref = preferences.actions.keys[id].snapped;
+    const snapPref = preferences.actionsKeys[id].snapped;
     if (snapPref) {
       if (snapPref.minHeight) {
         switch (snapPref.minHeight) {
@@ -806,7 +1011,7 @@ var StatefulBottomSheet = ({
     }
   }, [snapArray, onClosePress]);
   const maxWidthPref = useMemo(() => {
-    const maxWidth = preferences.actions.keys[id].snapped?.maxWidth;
+    const maxWidth = preferences.actionsKeys[id].snapped?.maxWidth;
     if (typeof maxWidth === "undefined") {
       return void 0;
     } else if (maxWidth === null) {
@@ -820,7 +1025,7 @@ var StatefulBottomSheet = ({
       active: false,
       override: void 0
     };
-    const scrim = preferences.actions.keys[id].snapped?.scrim;
+    const scrim = preferences.actionsKeys[id].snapped?.scrim ?? sharedPreferences.theming.layout.defaults.scrim;
     if (scrim) {
       scrimPref2.active = true;
       if (typeof scrim === "string") {
@@ -828,7 +1033,7 @@ var StatefulBottomSheet = ({
       }
     }
     return scrimPref2;
-  }, [id, preferences]);
+  }, [id, preferences, sharedPreferences]);
   const detentClassName = useMemo(() => {
     let className2 = "";
     if (detent.current === "content-height") {
@@ -851,7 +1056,7 @@ var StatefulBottomSheet = ({
         return "default";
     }
   };
-  if (React18.Children.toArray(children).length > 0) {
+  if (React24.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThBottomSheet,
       {
@@ -889,7 +1094,7 @@ var StatefulBottomSheet = ({
         prefersReducedMotion,
         compounds: {
           container: {
-            className: classNames3(thorium_web_sheets_default.draggable, detentClassName),
+            className: classNames4(thorium_web_sheets_default.draggable, detentClassName),
             ref: sheetContainerRef,
             style: {
               maxWidth: maxWidthPref
@@ -901,14 +1106,14 @@ var StatefulBottomSheet = ({
             onKeyDown: onDragKeyCallback
           },
           content: {
-            className: classNames3(thorium_web_sheets_default.draggableContent, className),
+            className: classNames4(thorium_web_sheets_default.draggableContent, className),
             disableDrag: true
           },
           scroller: {
             className: thorium_web_sheets_default.draggableScroller
           },
           backdrop: {
-            className: classNames3(thorium_web_sheets_default.draggableBackdrop, scrimClassName),
+            className: classNames4(thorium_web_sheets_default.draggableBackdrop, scrimClassName),
             style: { [`--${prefixString("layout-defaults-scrim")}`]: scrimPref.override }
           }
         },
@@ -929,7 +1134,7 @@ var StatefulBottomSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: t("reader.app.back.trigger"),
                   ref: bottomSheetCloseRef,
-                  className: classNames3(className, thorium_web_button_default.backButton),
+                  className: classNames4(className, thorium_web_button_default.backButton),
                   "aria-label": t("reader.app.back.trigger"),
                   onPress: onClosePress
                 }
@@ -957,109 +1162,14 @@ var StatefulBottomSheet = ({
     ) });
   }
 };
-var StatefulFullScreenSheet = ({
-  heading,
-  headerVariant,
-  className,
-  isOpen,
-  onOpenChange,
-  onClosePress,
-  children,
-  resetFocus,
-  focusWithinRef,
-  focusSelector,
-  scrollTopOnFocus,
-  dismissEscapeKeyClose
-}) => {
-  const { t } = useI18n();
-  const direction = useAppSelector((state) => state.reader.direction);
-  const fullScreenRef = useRef(null);
-  const fullScreenHeaderRef = useRef(null);
-  const fullScreenBodyRef = useRef(null);
-  const fullScreenCloseRef = useRef(null);
-  useEffect(() => {
-    if (isOpen && fullScreenRef.current && fullScreenHeaderRef.current) {
-      fullScreenRef.current.style.setProperty(
-        `--${prefixString("sheet-sticky-header")}`,
-        `${fullScreenHeaderRef.current.clientHeight}px`
-      );
+var StatefulFullScreenSheet = (props) => {
+  return /* @__PURE__ */ jsx(
+    StatefulModalBase,
+    {
+      ...props,
+      sheetClassName: thorium_web_sheets_default.fullscreen
     }
-  }, [isOpen]);
-  useWebkitPatch(!!isOpen);
-  if (React18.Children.toArray(children).length > 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-      ThModal,
-      {
-        ref: fullScreenRef,
-        focusOptions: {
-          withinRef: focusWithinRef ?? fullScreenBodyRef,
-          trackedState: isOpen,
-          fallbackRef: fullScreenCloseRef,
-          withSelector: focusSelector,
-          action: {
-            type: "focus",
-            options: {
-              preventScroll: scrollTopOnFocus ? true : false,
-              scrollContainerToTop: scrollTopOnFocus
-            }
-          },
-          updateState: resetFocus
-        },
-        compounds: {
-          dialog: {
-            className: thorium_web_sheets_default.dialog
-          }
-        },
-        isOpen,
-        onOpenChange,
-        isDismissable: true,
-        className: classNames3(thorium_web_sheets_default.fullscreen, className),
-        isKeyboardDismissDisabled: dismissEscapeKeyClose,
-        children: [
-          /* @__PURE__ */ jsx(
-            ThContainerHeader,
-            {
-              ref: fullScreenHeaderRef,
-              className: thorium_web_sheets_default.header,
-              label: heading,
-              compounds: {
-                heading: {
-                  className: thorium_web_sheets_default.heading
-                }
-              },
-              children: headerVariant === "previous" /* previous */ ? /* @__PURE__ */ jsx(
-                ThNavigationButton,
-                {
-                  direction: direction === "ltr" ? "left" : "right",
-                  label: t("reader.app.back.trigger"),
-                  ref: fullScreenCloseRef,
-                  className: classNames3(className, thorium_web_button_default.backButton),
-                  "aria-label": t("reader.app.back.trigger"),
-                  onPress: onClosePress
-                }
-              ) : /* @__PURE__ */ jsx(
-                ThCloseButton,
-                {
-                  ref: fullScreenCloseRef,
-                  className: thorium_web_button_default.closeButton,
-                  "aria-label": t("common.actions.close"),
-                  onPress: onClosePress
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ThContainerBody,
-            {
-              ref: fullScreenBodyRef,
-              className: thorium_web_sheets_default.body,
-              children
-            }
-          )
-        ]
-      }
-    ) });
-  }
+  );
 };
 var StatefulDockedSheet = ({
   id,
@@ -1098,7 +1208,7 @@ var StatefulDockedSheet = ({
       return direction === "ltr" /* ltr */ ? thorium_web_sheets_default.dockedRightBorder : thorium_web_sheets_default.dockedLeftBorder;
     }
   }, [flow, direction]);
-  if (React18.Children.toArray(children).length > 0) {
+  if (React24.Children.toArray(children).length > 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
       ThDockedPanel,
       {
@@ -1120,7 +1230,7 @@ var StatefulDockedSheet = ({
           },
           updateState: resetFocus
         },
-        className: classNames3(thorium_web_sheets_default.docked, className, classFromFlow()),
+        className: classNames4(thorium_web_sheets_default.docked, className, classFromFlow()),
         children: [
           /* @__PURE__ */ jsx(
             ThContainerHeader,
@@ -1139,7 +1249,7 @@ var StatefulDockedSheet = ({
                   direction: direction === "ltr" ? "left" : "right",
                   label: t("reader.app.back.trigger"),
                   ref: dockedSheetCloseRef,
-                  className: classNames3(className, thorium_web_button_default.backButton),
+                  className: classNames4(className, thorium_web_button_default.backButton),
                   "aria-label": t("reader.app.back.trigger"),
                   onPress: onClosePress
                 }
@@ -1167,23 +1277,86 @@ var StatefulDockedSheet = ({
     ) });
   }
 };
-var componentMap = {
-  ["popover" /* popover */]: StatefulPopoverSheet,
-  ["bottomSheet" /* bottomSheet */]: StatefulBottomSheet,
-  ["fullscreen" /* fullscreen */]: StatefulFullScreenSheet,
-  ["docked start" /* dockedStart */]: (props) => /* @__PURE__ */ jsx(StatefulDockedSheet, { ...props, flow: "dockingStart" /* start */ }),
-  ["docked end" /* dockedEnd */]: (props) => /* @__PURE__ */ jsx(StatefulDockedSheet, { ...props, flow: "dockingEnd" /* end */ })
-};
-var StatefulSheetWrapper = ({
-  sheetType,
-  sheetProps,
-  children
+var StatefulCompactPopoverSheet = ({
+  id,
+  triggerRef,
+  heading,
+  className,
+  isOpen,
+  onOpenChange,
+  placement,
+  children,
+  resetFocus,
+  focusWithinRef,
+  focusSelector,
+  scrollTopOnFocus,
+  dismissEscapeKeyClose
 }) => {
-  return /* @__PURE__ */ jsx(
-    ThTypedComponentRenderer,
-    {
-      type: sheetType,
-      componentMap,
+  const popoverRef = useRef(null);
+  const popoverBodyRef = useRef(null);
+  useFirstFocusable({
+    withinRef: focusWithinRef ?? popoverBodyRef,
+    trackedState: isOpen,
+    withSelector: focusSelector,
+    action: {
+      type: "focus",
+      options: {
+        preventScroll: scrollTopOnFocus ? true : false,
+        scrollContainerToTop: scrollTopOnFocus
+      }
+    },
+    updateState: resetFocus
+  });
+  useWebkitPatch(!!isOpen);
+  if (React24.Children.toArray(children).length > 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      Popover,
+      {
+        ref: popoverRef,
+        triggerRef,
+        placement: placement || "bottom",
+        isOpen,
+        onOpenChange,
+        isKeyboardDismissDisabled: dismissEscapeKeyClose,
+        className: classNames4(thorium_web_sheets_default.compactPopover, className),
+        children: /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            "aria-label": heading,
+            className: thorium_web_sheets_default.dialog,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: popoverBodyRef,
+                className: thorium_web_sheets_default.body,
+                children
+              }
+            )
+          }
+        )
+      }
+    ) });
+  }
+};
+var componentMap = {
+  ["compactPopover" /* compactPopover */]: StatefulCompactPopoverSheet,
+  ["popover" /* popover */]: StatefulPopoverSheet,
+  ["modal" /* modal */]: StatefulModalSheet,
+  ["bottomSheet" /* bottomSheet */]: StatefulBottomSheet,
+  ["fullscreen" /* fullscreen */]: StatefulFullScreenSheet,
+  ["docked start" /* dockedStart */]: (props) => /* @__PURE__ */ jsx(StatefulDockedSheet, { ...props, flow: "dockingStart" /* start */ }),
+  ["docked end" /* dockedEnd */]: (props) => /* @__PURE__ */ jsx(StatefulDockedSheet, { ...props, flow: "dockingEnd" /* end */ })
+};
+var StatefulSheetWrapper = ({
+  sheetType,
+  sheetProps,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(
+    ThTypedComponentRenderer,
+    {
+      type: sheetType,
+      componentMap,
       props: sheetProps,
       children
     }
@@ -1191,12 +1364,18 @@ var StatefulSheetWrapper = ({
 };
 var dockingMap = null;
 var useDocking = (key) => {
-  const { preferences } = usePreferences();
+  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 dock = useAppSelector((state) => profile ? state.actions.dock[profile] : void 0);
   const dispatch = useAppDispatch();
   const actions = useActions(actionsMap);
+  const startActionKey = dock?.["dockingStart" /* start */]?.actionKey;
+  const endActionKey = dock?.["dockingEnd" /* end */]?.actionKey;
+  const startStatus = useActionComponentStatus({ actionKey: startActionKey || "" });
+  const endStatus = useActionComponentStatus({ actionKey: endActionKey || "" });
   if (!dockingMap) {
     dockingMap = makeBreakpointsMap({
       defaultValue: "both" /* both */,
@@ -1206,12 +1385,12 @@ var useDocking = (key) => {
     });
   }
   const currentDockConfig = breakpoint && dockingMap[breakpoint];
-  const dockablePref = preferences.actions.keys[key]?.docked?.dockable || "none" /* none */;
-  const defaultSheet = preferences.actions.keys[key]?.sheet?.defaultSheet || "popover" /* popover */;
+  const dockablePref = preferences.actionsKeys[key]?.docked?.dockable || "none" /* none */;
+  const defaultSheet = preferences.actionsKeys[key]?.sheet?.defaultSheet || "popover" /* popover */;
   const sheetMap = makeBreakpointsMap({
-    defaultValue: preferences.actions.keys[key]?.sheet?.defaultSheet || "popover" /* popover */,
+    defaultValue: preferences.actionsKeys[key]?.sheet?.defaultSheet || "popover" /* popover */,
     fromEnum: ThSheetTypes,
-    pref: preferences.actions.keys[key]?.sheet?.breakpoints
+    pref: preferences.actionsKeys[key]?.sheet?.breakpoints
   });
   const sheetPref = breakpoint && sheetMap[breakpoint] || defaultSheet;
   const [sheetType, setSheetType] = useState(defaultSheet);
@@ -1330,11 +1509,12 @@ var useDocking = (key) => {
     }
   }, [dispatch, key, sheetType, previousSheetType, actionState?.docking]);
   useEffect(() => {
-    if (actionState?.isOpen == null) {
+    if (actionState?.isOpen == null && profile) {
       if (sheetType === "docked start" /* dockedStart */) {
         dispatch(dockAction({
           key,
-          dockingKey: "dockingStart" /* start */
+          dockingKey: "dockingStart" /* start */,
+          profile
         }));
         dispatch(setActionOpen({
           key,
@@ -1343,7 +1523,8 @@ var useDocking = (key) => {
       } else if (sheetType === "docked end" /* dockedEnd */) {
         dispatch(dockAction({
           key,
-          dockingKey: "dockingEnd" /* end */
+          dockingKey: "dockingEnd" /* end */,
+          profile
         }));
         dispatch(setActionOpen({
           key,
@@ -1351,15 +1532,16 @@ var useDocking = (key) => {
         }));
       }
     }
-  });
+  }, [actionState?.isOpen, sheetType, key, dispatch, profile]);
   useEffect(() => {
-    if (actionState?.isOpen != null && actionState?.docking == null) {
+    if (actionState?.isOpen != null && actionState?.docking == null && profile) {
       if (sheetType === "docked start" /* dockedStart */) {
         const dockingKey = actions.whichDocked(key);
         if (dockingKey !== "dockingStart" /* start */) {
           dispatch(dockAction({
             key,
-            dockingKey: "dockingStart" /* start */
+            dockingKey: "dockingStart" /* start */,
+            profile
           }));
         }
       } else if (sheetType === "docked end" /* dockedEnd */) {
@@ -1367,12 +1549,61 @@ var useDocking = (key) => {
         if (dockingKey !== "dockingEnd" /* end */) {
           dispatch(dockAction({
             key,
-            dockingKey: "dockingEnd" /* end */
+            dockingKey: "dockingEnd" /* end */,
+            profile
+          }));
+        }
+      }
+    }
+  }, [dispatch, key, sheetType, actionState?.isOpen, actionState?.docking, actions, profile]);
+  useEffect(() => {
+    if (profile && dock) {
+      const isDockedInStart = dock["dockingStart" /* start */]?.actionKey === key;
+      const isDockedInEnd = dock["dockingEnd" /* end */]?.actionKey === key;
+      if (isDockedInStart && actionState?.docking !== "dockingStart" /* start */) {
+        dispatch(dockAction({
+          key,
+          dockingKey: "dockingStart" /* start */,
+          profile
+        }));
+        if (actionState?.isOpen === false) {
+          dispatch(setActionOpen({
+            key,
+            isOpen: true
+          }));
+        }
+      } else if (isDockedInEnd && actionState?.docking !== "dockingEnd" /* end */) {
+        dispatch(dockAction({
+          key,
+          dockingKey: "dockingEnd" /* end */,
+          profile
+        }));
+        if (actionState?.isOpen === false) {
+          dispatch(setActionOpen({
+            key,
+            isOpen: true
           }));
         }
       }
     }
-  }, [dispatch, key, sheetType, actionState?.isOpen, actionState?.docking, actions]);
+  }, [profile, dock, actionState?.docking, actionState?.isOpen, key, dispatch]);
+  useEffect(() => {
+    if (!profile || !dock) return;
+    if (startActionKey && !startStatus.isComponentRegistered) {
+      dispatch(dockAction({
+        key: startActionKey,
+        dockingKey: "dockingTransient" /* transient */,
+        profile
+      }));
+    }
+    if (endActionKey && !endStatus.isComponentRegistered) {
+      dispatch(dockAction({
+        key: endActionKey,
+        dockingKey: "dockingTransient" /* transient */,
+        profile
+      }));
+    }
+  }, [profile, dock, startActionKey, endActionKey, startStatus.isComponentRegistered, endStatus.isComponentRegistered, dispatch]);
   return {
     getDocker,
     sheetType
@@ -1504,7 +1735,7 @@ var StatefulJumpToPositionContainer = ({
 var SvgPinDrop = (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: "M480-301q99-80 149.5-154T680-594q0-90-56-148t-144-58q-88 0-144 58t-56 148q0 65 50.5 139T480-301Zm0 101Q339-304 269.5-402T200-594q0-125 78-205.5T480-880q124 0 202 80.5T760-594q0 94-69.5 192T480-200Zm0-320q33 0 56.5-23.5T560-600q0-33-23.5-56.5T480-680q-33 0-56.5 23.5T400-600q0 33 23.5 56.5T480-520ZM200-80v-80h560v80H200Zm280-520Z" }) });
 var pin_drop_default = SvgPinDrop;
 var StatefulJumpToPositionTrigger = ({ variant }) => {
-  const { preferences } = usePreferences();
+  const preferences = useActionsPreferences();
   const { t } = useI18n();
   const actionState = useAppSelector((state) => state.actions.keys["jumpToPosition" /* jumpToPosition */]);
   const positionsList = useAppSelector((state) => state.publication.positionsList);
@@ -1521,14 +1752,14 @@ var StatefulJumpToPositionTrigger = ({ variant }) => {
     {
       label: t("reader.actions.goToPosition.descriptive"),
       SVGIcon: pin_drop_default,
-      shortcut: preferences.actions.keys["jumpToPosition" /* jumpToPosition */].shortcut,
+      shortcut: preferences.actionsKeys["jumpToPosition" /* jumpToPosition */].shortcut,
       id: "jumpToPosition" /* jumpToPosition */,
       onAction: () => setOpen(!actionState?.isOpen)
     }
   ) : /* @__PURE__ */ jsx(
     StatefulActionIcon,
     {
-      visibility: preferences.actions.keys["jumpToPosition" /* jumpToPosition */].visibility,
+      visibility: preferences.actionsKeys["jumpToPosition" /* jumpToPosition */].visibility,
       "aria-label": t("reader.actions.goToPosition.descriptive"),
       placement: "bottom",
       tooltipLabel: t("reader.actions.goToPosition.compact"),
@@ -1562,6 +1793,9 @@ var thorium_web_reader_settings_default = {
   sliderTrack: "thorium_web_reader_settings_sliderTrack",
   sliderThumb: "thorium_web_reader_settings_sliderThumb",
   sliderPlaceholder: "thorium_web_reader_settings_sliderPlaceholder",
+  sliderWithPresetsWrapper: "thorium_web_reader_settings_sliderWithPresetsWrapper",
+  sliderWithPresetsRadioGroup: "thorium_web_reader_settings_sliderWithPresetsRadioGroup",
+  sliderWithPresetsRadio: "thorium_web_reader_settings_sliderWithPresetsRadio",
   sliderWithTicks: "thorium_web_reader_settings_sliderWithTicks",
   dropdown: "thorium_web_reader_settings_dropdown",
   dropdownButton: "thorium_web_reader_settings_dropdownButton",
@@ -1571,6 +1805,82 @@ var thorium_web_reader_settings_default = {
   switch: "thorium_web_reader_settings_switch",
   switchIndicator: "thorium_web_reader_settings_switchIndicator"
 };
+var StatefulSettingsWrapper = ({
+  triggerRef,
+  heading,
+  headerVariant,
+  onClosePress,
+  dismissEscapeKeyClose,
+  resetFocus,
+  onReset,
+  children
+}) => {
+  const actionState = useAppSelector((state) => state.actions.keys["settings" /* settings */]);
+  const dispatch = useAppDispatch();
+  const docking = useDocking("settings" /* settings */);
+  const setOpen = (value) => {
+    dispatch(setActionOpen({
+      key: "settings" /* settings */,
+      isOpen: value
+    }));
+    if (!value) dispatch(setHovering(false));
+  };
+  useEffect(() => {
+    if (!actionState?.isOpen) onReset?.();
+  }, [actionState?.isOpen, onReset]);
+  return /* @__PURE__ */ jsx(
+    StatefulSheetWrapper,
+    {
+      sheetType: docking.sheetType,
+      sheetProps: {
+        id: "settings" /* settings */,
+        triggerRef,
+        heading,
+        headerVariant,
+        className: thorium_web_reader_settings_default.wrapper,
+        placement: "bottom",
+        isOpen: actionState?.isOpen || false,
+        onOpenChange: setOpen,
+        onClosePress,
+        docker: docking.getDocker(),
+        resetFocus,
+        scrollTopOnFocus: true,
+        dismissEscapeKeyClose
+      },
+      children
+    }
+  );
+};
+var StatefulAudioSettingsContainer = ({
+  triggerRef
+}) => {
+  const { preferences } = useAudioPreferences();
+  const audioSettingsKeys = preferences.settings.order;
+  const { settingsComponentsMap } = usePlugins();
+  const { t } = useI18n();
+  const dispatch = useAppDispatch();
+  const close = useCallback(() => {
+    dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false }));
+    dispatch(setHovering(false));
+  }, [dispatch]);
+  return /* @__PURE__ */ jsx(
+    StatefulSettingsWrapper,
+    {
+      triggerRef,
+      heading: t("reader.playback.preferences.audio.title"),
+      headerVariant: "close" /* close */,
+      onClosePress: close,
+      children: audioSettingsKeys.length > 0 && settingsComponentsMap ? audioSettingsKeys.map((key) => {
+        const match = settingsComponentsMap[key];
+        if (!match) {
+          console.warn(`Action key "${key}" not found in the plugin registry while present in preferences.`);
+          return null;
+        }
+        return /* @__PURE__ */ jsx(match.Comp, { ...match.props }, key);
+      }) : null
+    }
+  );
+};
 var StatefulGroupWrapper = ({
   label,
   moreLabel,
@@ -1592,18 +1902,18 @@ var StatefulGroupWrapper = ({
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     ThSettingsWrapper,
     {
-      className: classNames3(thorium_web_reader_settings_default.group, thorium_web_reader_settings_default.advancedGroup),
+      className: classNames4(thorium_web_reader_settings_default.group, thorium_web_reader_settings_default.advancedGroup),
       label,
       items: componentsMap,
       prefs: resolvedPrefs,
       compounds: {
         ...compounds?.heading ? { heading: compounds.heading } : {
           heading: {
-            className: classNames3(thorium_web_reader_settings_default.label, thorium_web_reader_settings_default.groupLabel)
+            className: classNames4(thorium_web_reader_settings_default.label, thorium_web_reader_settings_default.groupLabel)
           }
         },
         button: {
-          className: classNames3(thorium_web_button_default.icon, thorium_web_reader_settings_default.advancedIcon),
+          className: classNames4(thorium_web_button_default.icon, thorium_web_reader_settings_default.advancedIcon),
           "aria-label": moreLabel,
           isDisabled,
           compounds: {
@@ -1624,96 +1934,6 @@ var StatefulGroupWrapper = ({
     }
   ) });
 };
-
-// src/components/Plugins/PluginRegistry.ts
-var pluginsStore = [];
-var PluginRegistryClass = class {
-  register(plugin) {
-    const existingPluginIndex = pluginsStore.findIndex((p) => p.id === plugin.id);
-    if (existingPluginIndex >= 0) {
-      pluginsStore[existingPluginIndex] = plugin;
-    } else {
-      pluginsStore.push(plugin);
-    }
-  }
-  unregister(pluginId) {
-    const filteredPlugins = pluginsStore.filter((plugin) => plugin.id !== pluginId);
-    pluginsStore.length = 0;
-    pluginsStore.push(...filteredPlugins);
-  }
-  getPlugins() {
-    return [...pluginsStore];
-  }
-  getComponentMaps() {
-    const actionsComponentsMap = {};
-    const settingsComponentsMap = {};
-    [...pluginsStore].reverse().forEach((plugin) => {
-      if (plugin.components.actions) {
-        Object.entries(plugin.components.actions).forEach(([key, component]) => {
-          actionsComponentsMap[key] = component;
-        });
-      }
-      if (plugin.components.settings) {
-        Object.entries(plugin.components.settings).forEach(([key, component]) => {
-          settingsComponentsMap[key] = component;
-        });
-      }
-    });
-    return {
-      actionsComponentsMap,
-      settingsComponentsMap
-    };
-  }
-};
-var ThPluginRegistry = new PluginRegistryClass();
-var ThPluginContext = createContext({
-  actionsComponentsMap: {},
-  settingsComponentsMap: {},
-  textSettingsComponentsMap: {},
-  spacingSettingsComponentsMap: {},
-  registerPlugin: ThPluginRegistry.register.bind(ThPluginRegistry),
-  unregisterPlugin: ThPluginRegistry.unregister.bind(ThPluginRegistry)
-});
-var usePlugins = () => useContext(ThPluginContext);
-var ThPluginProvider = ({ children }) => {
-  const [componentMaps, setComponentMaps] = useState(() => {
-    const maps = ThPluginRegistry.getComponentMaps();
-    return {
-      ...maps,
-      textSettingsComponentsMap: getTypedSettingsComponents(maps.settingsComponentsMap, "text"),
-      spacingSettingsComponentsMap: getTypedSettingsComponents(maps.settingsComponentsMap, "spacing")
-    };
-  });
-  function getTypedSettingsComponents(componentsMap, type) {
-    return Object.entries(componentsMap).filter(([_, component]) => component.type === type).reduce((acc, [key, component]) => {
-      acc[key] = component;
-      return acc;
-    }, {});
-  }
-  useEffect(() => {
-    const updateComponentMaps = () => {
-      const maps = ThPluginRegistry.getComponentMaps();
-      setComponentMaps({
-        ...maps,
-        textSettingsComponentsMap: getTypedSettingsComponents(maps.settingsComponentsMap, "text"),
-        spacingSettingsComponentsMap: getTypedSettingsComponents(maps.settingsComponentsMap, "spacing")
-      });
-    };
-    updateComponentMaps();
-  }, []);
-  const registerPlugin = (plugin) => {
-    ThPluginRegistry.register(plugin);
-  };
-  const unregisterPlugin = (pluginId) => {
-    ThPluginRegistry.unregister(pluginId);
-  };
-  const value = {
-    ...componentMaps,
-    registerPlugin,
-    unregisterPlugin
-  };
-  return /* @__PURE__ */ jsx(ThPluginContext.Provider, { value, children });
-};
 var StatefulSpacingGroup = () => {
   const { preferences } = usePreferences();
   const { t } = useI18n();
@@ -1788,7 +2008,7 @@ var StatefulTextGroupContainer = () => {
     return /* @__PURE__ */ jsx(match.Comp, { standalone: true }, key);
   }) });
 };
-var StatefulSettingsContainer = ({
+var StatefulVisualSettingsContainer = ({
   triggerRef
 }) => {
   const {
@@ -1807,23 +2027,17 @@ var StatefulSettingsContainer = ({
   const isFXL = useAppSelector((state) => state.publication.isFXL);
   const hasDisplayTransformability = useAppSelector((state) => state.publication.hasDisplayTransformability);
   const contains = useAppSelector((state) => state.reader.settingsContainer);
-  const actionState = useAppSelector((state) => state.actions.keys["settings" /* settings */]);
   const dispatch = useAppDispatch();
   const settingItems = useMemo(() => {
     return profile === "webPub" ? webPubSettingsKeys : isFXL ? fxlSettingsKeys : reflowSettingsKeys;
   }, [profile, isFXL, fxlSettingsKeys, reflowSettingsKeys, webPubSettingsKeys]);
-  const docking = useDocking("settings" /* settings */);
-  const sheetType = docking.sheetType;
-  const setOpen = (value) => {
-    dispatch(setActionOpen({
-      key: "settings" /* settings */,
-      isOpen: value
-    }));
-    if (!value) dispatch(setHovering(false));
-  };
   const setInitial = useCallback(() => {
     dispatch(setSettingsContainer("initial" /* initial */));
   }, [dispatch]);
+  const close = useCallback(() => {
+    dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false }));
+    dispatch(setHovering(false));
+  }, [dispatch]);
   const isTextNested = useCallback((key) => {
     const textSettings = [
       mainTextSettingsKeys || defaultTextSettingsMain,
@@ -1909,40 +2123,30 @@ var StatefulSettingsContainer = ({
       document.removeEventListener("keydown", handleEscape, true);
     };
   }, [contains, dispatch]);
-  useEffect(() => {
-    if (!actionState?.isOpen) setInitial();
-  }, [actionState?.isOpen, setInitial]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    StatefulSheetWrapper,
+  return /* @__PURE__ */ jsx(
+    StatefulSettingsWrapper,
     {
-      sheetType,
-      sheetProps: {
-        id: "settings" /* settings */,
-        triggerRef,
-        heading: getHeading(),
-        headerVariant: getHeaderVariant(),
-        className: thorium_web_reader_settings_default.wrapper,
-        placement: "bottom",
-        isOpen: actionState?.isOpen || false,
-        onOpenChange: setOpen,
-        onClosePress: () => {
-          contains === "initial" /* initial */ ? setOpen(false) : setInitial();
-        },
-        docker: docking.getDocker(),
-        resetFocus: contains,
-        scrollTopOnFocus: true,
-        dismissEscapeKeyClose: contains !== "initial" /* initial */
-      },
+      triggerRef,
+      heading: getHeading(),
+      headerVariant: getHeaderVariant(),
+      onClosePress: contains === "initial" /* initial */ ? close : setInitial,
+      onReset: setInitial,
+      dismissEscapeKeyClose: contains !== "initial" /* initial */,
+      resetFocus: contains,
       children: renderSettings()
     }
-  ) });
+  );
 };
 var SvgMatchCase = (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: "m131-252 165-440h79l165 440h-76l-39-112H247l-40 112h-76Zm139-176h131l-64-182h-4l-63 182Zm395 186q-51 0-81-27.5T554-342q0-44 34.5-72.5T677-443q23 0 45 4t38 11v-12q0-29-20.5-47T685-505q-23 0-42 9.5T610-468l-47-35q24-29 54.5-43t68.5-14q69 0 103 32.5t34 97.5v178h-63v-37h-4q-14 23-38 35t-53 12Zm12-54q35 0 59.5-24t24.5-56q-14-8-33.5-12.5T689-393q-32 0-50 14t-18 37q0 20 16 33t40 13Z" }) });
 var match_case_default = SvgMatchCase;
+var SvgInstantMix = (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: "M200-160v-280h-80v-80h240v80h-80v280h-80Zm0-440v-200h80v200h-80Zm160 0v-80h80v-120h80v120h80v80H360Zm80 440v-360h80v360h-80Zm240 0v-120h-80v-80h240v80h-80v120h-80Zm0-280v-360h80v360h-80Z" }) });
+var instant_mix_default = SvgInstantMix;
 var StatefulSettingsTrigger = ({ variant }) => {
-  const { preferences } = usePreferences();
+  const preferences = useActionsPreferences();
   const { t } = useI18n();
   const actionState = useAppSelector((state) => state.actions.keys["settings" /* settings */]);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const isAudio = profile === "audio";
   const dispatch = useAppDispatch();
   const setOpen = (value) => {
     dispatch(setActionOpen({
@@ -1954,21 +2158,21 @@ var StatefulSettingsTrigger = ({ variant }) => {
   return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
     StatefulOverflowMenuItem,
     {
-      label: t("reader.preferences.title"),
-      SVGIcon: match_case_default,
-      shortcut: preferences.actions.keys["settings" /* settings */].shortcut,
+      label: isAudio ? t("reader.playback.preferences.audio.title") : t("reader.preferences.title"),
+      SVGIcon: isAudio ? instant_mix_default : match_case_default,
+      shortcut: preferences.actionsKeys["settings" /* settings */].shortcut,
       id: "settings" /* settings */,
       onAction: () => setOpen(!actionState?.isOpen)
     }
   ) : /* @__PURE__ */ jsx(
     StatefulActionIcon,
     {
-      visibility: preferences.actions.keys["settings" /* settings */].visibility,
-      "aria-label": t("reader.preferences.title"),
+      visibility: preferences.actionsKeys["settings" /* settings */].visibility,
+      "aria-label": isAudio ? t("reader.playback.preferences.audio.title") : t("reader.preferences.title"),
       placement: "bottom",
-      tooltipLabel: t("reader.preferences.title"),
+      tooltipLabel: isAudio ? t("reader.playback.preferences.audio.title") : t("reader.preferences.title"),
       onPress: () => setOpen(!actionState?.isOpen),
-      children: /* @__PURE__ */ jsx(match_case_default, { "aria-hidden": "true", focusable: "false" })
+      children: isAudio ? /* @__PURE__ */ jsx(instant_mix_default, { "aria-hidden": "true", focusable: "false" }) : /* @__PURE__ */ jsx(match_case_default, { "aria-hidden": "true", focusable: "false" })
     }
   ) });
 };
@@ -1989,51 +2193,165 @@ var thorium_web_toc_default = {
   treeItemTextPosition: "thorium_web_toc_treeItemTextPosition",
   empty: "thorium_web_toc_empty"
 };
+function filterTocTree(items, query, contains) {
+  if (!query) return items;
+  const recursiveFilter = (items2) => items2.reduce((acc, item) => {
+    if (item.title && contains(item.title, query)) acc.push({ ...item, children: void 0 });
+    if (item.children) acc.push(...recursiveFilter(item.children));
+    return acc;
+  }, []);
+  return recursiveFilter(items).map((item, i) => ({ ...item, key: `${item.id}-${i}` }));
+}
+function useTocContent({ isOpen, tocTree, tocEntry }) {
+  const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
+  const [filterValue, setFilterValue] = useState("");
+  const treeRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const { contains } = useFilter({ sensitivity: "base" });
+  useEffect(() => {
+    if (!isOpen) setFilterValue("");
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen || !filterValue) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setFilterValue("");
+      }
+    };
+    document.addEventListener("keydown", handleEscape, true);
+    return () => document.removeEventListener("keydown", handleEscape, true);
+  }, [isOpen, filterValue]);
+  useEffect(() => {
+    if (!tocEntry || !tocTree) return;
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      let changed = false;
+      const expand = (items) => items.some((item) => {
+        if (item.id === tocEntry) return true;
+        if (item.children) {
+          const found = expand(item.children);
+          if (found && !next.has(item.id)) {
+            next.add(item.id);
+            changed = true;
+          }
+          return found;
+        }
+        return false;
+      });
+      expand(tocTree);
+      return changed ? next : prev;
+    });
+  }, [tocEntry, tocTree]);
+  const displayedTocTree = filterTocTree(tocTree || [], filterValue, contains);
+  return { expandedKeys, setExpandedKeys, filterValue, setFilterValue, displayedTocTree, treeRef, searchInputRef };
+}
 var SvgChevronRight = (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: "M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" }) });
 var chevron_right_default = SvgChevronRight;
+var TocContent = ({
+  filterValue,
+  onFilterChange,
+  displayedTocTree,
+  tocTree,
+  tocEntry,
+  expandedKeys,
+  onExpandedChange,
+  onSelectionChange,
+  isRTL = false,
+  treeRef,
+  searchInputRef,
+  compounds
+}) => {
+  const { t } = useI18n();
+  if (!tocTree || tocTree.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: thorium_web_toc_default.empty, children: t("reader.tableOfContents.emptyState.description") });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ThFormSearchField,
+      {
+        "aria-label": t("common.actions.search"),
+        value: filterValue,
+        onChange: onFilterChange,
+        onClear: () => onFilterChange(""),
+        className: thorium_web_toc_default.search,
+        compounds: {
+          label: { className: thorium_web_toc_default.searchLabel },
+          input: {
+            ref: searchInputRef,
+            className: thorium_web_toc_default.searchInput,
+            placeholder: t("common.actions.search")
+          },
+          searchIcon: { className: thorium_web_toc_default.searchIcon, hidden: !!filterValue },
+          clearButton: {
+            className: thorium_web_toc_default.clearButton,
+            isDisabled: !filterValue,
+            "aria-label": t("common.actions.clear")
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { ...compounds?.treeWrapper, children: /* @__PURE__ */ jsx(
+      Tree,
+      {
+        ref: treeRef,
+        "aria-label": t("reader.toc.entries"),
+        selectionMode: "single",
+        items: displayedTocTree,
+        className: [thorium_web_toc_default.tree, compounds?.tree?.className].filter(Boolean).join(" "),
+        onSelectionChange,
+        selectedKeys: tocEntry ? [tocEntry] : [],
+        expandedKeys,
+        onExpandedChange,
+        children: function renderItem(item) {
+          return /* @__PURE__ */ jsxs(
+            TreeItem,
+            {
+              "data-href": item.href,
+              className: thorium_web_toc_default.treeItem,
+              textValue: item.title || "",
+              children: [
+                /* @__PURE__ */ jsxs(TreeItemContent, { children: [
+                  item.children && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      slot: "chevron",
+                      className: thorium_web_toc_default.treeItemButton,
+                      style: { transform: isRTL ? "scaleX(-1)" : "none" },
+                      children: /* @__PURE__ */ jsx(chevron_right_default, { "aria-hidden": "true", focusable: "false" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: thorium_web_toc_default.treeItemText, children: [
+                    /* @__PURE__ */ jsx("div", { className: thorium_web_toc_default.treeItemTextTitle, children: item.title }),
+                    item.position && /* @__PURE__ */ jsx("div", { className: thorium_web_toc_default.treeItemTextPosition, children: item.position })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(Collection, { items: item.children, children: renderItem })
+              ]
+            }
+          );
+        }
+      }
+    ) })
+  ] });
+};
 var StatefulTocContainer = ({ triggerRef }) => {
   const { t } = useI18n();
-  const treeRef = useRef(null);
-  const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
   const unstableTimeline = useAppSelector((state) => state.publication.unstableTimeline);
-  const tocEntry = unstableTimeline?.toc?.currentEntry;
+  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 dispatch = useAppDispatch();
-  const { goLink } = useNavigator();
+  const { goLink } = useNavigator().unified;
   const docking = useDocking("toc" /* toc */);
   const sheetType = docking.sheetType;
-  const { contains } = useFilter({ sensitivity: "base" });
-  const [filterValue, setFilterValue] = React18.useState("");
-  const searchInputRef = React18.useRef(null);
-  const filterTocTree = (items, filterValue2) => {
-    if (!filterValue2) {
-      return items;
-    }
-    const recursiveFilter = (items2) => {
-      return items2.reduce((acc, item) => {
-        if (item.title && contains(item.title, filterValue2)) {
-          acc.push({ ...item, children: void 0 });
-        }
-        if (item.children) {
-          acc.push(...recursiveFilter(item.children));
-        }
-        return acc;
-      }, []);
-    };
-    const result = recursiveFilter(items);
-    return result.map((item, index) => ({ ...item, key: `${item.id}-${index}` }));
-  };
-  const displayedTocTree = filterTocTree(tocTree || [], filterValue);
   const setOpen = useCallback((value) => {
-    if (!value) setFilterValue("");
-    dispatch(setActionOpen({
-      key: "toc" /* toc */,
-      isOpen: value
-    }));
-  }, [dispatch, setFilterValue]);
+    dispatch(setActionOpen({ key: "toc" /* toc */, isOpen: value }));
+  }, [dispatch]);
+  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;
     const key = [...keys][0];
@@ -2041,12 +2359,13 @@ var StatefulTocContainer = ({ triggerRef }) => {
     const href = el?.getAttribute("data-href");
     if (!href) return;
     const link = new Link({ href });
+    const matched = findTocItemById(tocTree || [], key);
     const cb = actionState?.isOpen && (sheetType === "docked start" /* dockedStart */ || sheetType === "docked end" /* dockedEnd */) ? () => {
-      dispatch(setTocEntry(key));
+      dispatch(setTocEntry(matched || null));
       dispatch(setImmersive(true));
       dispatch(setUserNavigated(true));
     } : () => {
-      dispatch(setTocEntry(key));
+      dispatch(setTocEntry(matched || null));
       dispatch(setImmersive(true));
       dispatch(setUserNavigated(true));
       setOpen(false);
@@ -2065,32 +2384,8 @@ var StatefulTocContainer = ({ triggerRef }) => {
         document.removeEventListener("keydown", handleEscape, true);
       };
     }
-  }, [actionState, setOpen, filterValue]);
-  useEffect(() => {
-    if (tocEntry && tocTree) {
-      setExpandedKeys((prevExpandedKeys) => {
-        const newExpandedKeys = new Set(prevExpandedKeys);
-        let hasUpdates = false;
-        const updateExpanded = (items) => {
-          return items.some((item) => {
-            if (item.id === tocEntry) return true;
-            if (item.children) {
-              const hasChild = updateExpanded(item.children);
-              if (hasChild && !newExpandedKeys.has(item.id)) {
-                newExpandedKeys.add(item.id);
-                hasUpdates = true;
-              }
-              return hasChild;
-            }
-            return false;
-          });
-        };
-        updateExpanded(tocTree);
-        return hasUpdates ? newExpandedKeys : prevExpandedKeys;
-      });
-    }
-  }, [tocEntry, tocTree]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  }, [actionState, setOpen, filterValue, searchInputRef]);
+  return /* @__PURE__ */ jsx(
     StatefulSheetWrapper,
     {
       sheetType,
@@ -2104,89 +2399,32 @@ var StatefulTocContainer = ({ triggerRef }) => {
         onOpenChange: setOpen,
         onClosePress: () => setOpen(false),
         docker: docking.getDocker(),
-        resetFocus: tocEntry,
+        resetFocus: tocEntryId,
         focusWithinRef: treeRef
       },
-      children: tocTree && tocTree.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          ThFormSearchField,
-          {
-            "aria-label": t("common.actions.search"),
-            value: filterValue,
-            onChange: setFilterValue,
-            onClear: () => setFilterValue(""),
-            className: thorium_web_toc_default.search,
-            compounds: {
-              label: {
-                className: thorium_web_toc_default.searchLabel
-              },
-              input: {
-                ref: searchInputRef,
-                className: thorium_web_toc_default.searchInput,
-                placeholder: t("common.actions.search")
-              },
-              searchIcon: {
-                className: thorium_web_toc_default.searchIcon,
-                hidden: !!filterValue
-              },
-              clearButton: {
-                className: thorium_web_toc_default.clearButton,
-                isDisabled: !filterValue,
-                "aria-label": t("common.actions.clear")
-              }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Tree,
-          {
-            ref: treeRef,
-            "aria-label": t("reader.toc.entries"),
-            selectionMode: "single",
-            items: displayedTocTree,
-            className: thorium_web_toc_default.tree,
-            onSelectionChange: handleAction,
-            selectedKeys: tocEntry ? [tocEntry] : [],
-            expandedKeys,
-            onExpandedChange: setExpandedKeys,
-            children: function renderItem(item) {
-              return /* @__PURE__ */ jsxs(
-                TreeItem,
-                {
-                  "data-href": item.href,
-                  className: thorium_web_toc_default.treeItem,
-                  textValue: item.title || "",
-                  children: [
-                    /* @__PURE__ */ jsxs(TreeItemContent, { children: [
-                      item.children && /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          slot: "chevron",
-                          className: thorium_web_toc_default.treeItemButton,
-                          style: { transform: isRTL ? "scaleX(-1)" : "none" },
-                          children: /* @__PURE__ */ jsx(chevron_right_default, { "aria-hidden": "true", focusable: "false" })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("div", { className: thorium_web_toc_default.treeItemText, children: [
-                        /* @__PURE__ */ jsx("div", { className: thorium_web_toc_default.treeItemTextTitle, children: item.title }),
-                        item.position && /* @__PURE__ */ jsx("div", { className: thorium_web_toc_default.treeItemTextPosition, children: item.position })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx(Collection, { items: item.children, children: renderItem })
-                  ]
-                }
-              );
-            }
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx("div", { className: thorium_web_toc_default.empty, children: t("reader.tableOfContents.emptyState.description") })
+      children: /* @__PURE__ */ jsx(
+        TocContent,
+        {
+          filterValue,
+          onFilterChange: setFilterValue,
+          displayedTocTree,
+          tocTree,
+          tocEntry: tocEntryId,
+          expandedKeys,
+          onExpandedChange: setExpandedKeys,
+          onSelectionChange: handleAction,
+          isRTL,
+          treeRef,
+          searchInputRef
+        }
+      )
     }
-  ) });
+  );
 };
 var SvgToc = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "inherit", ...props, children: /* @__PURE__ */ jsx("path", { d: "M120-280v-80h560v80H120Zm0-160v-80h560v80H120Zm0-160v-80h560v80H120Zm680 320q-17 0-28.5-11.5T760-320q0-17 11.5-28.5T800-360q17 0 28.5 11.5T840-320q0 17-11.5 28.5T800-280Zm0-160q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440Zm0-160q-17 0-28.5-11.5T760-640q0-17 11.5-28.5T800-680q17 0 28.5 11.5T840-640q0 17-11.5 28.5T800-600Z" }) });
 var toc_default = SvgToc;
 var StatefulTocTrigger = ({ variant }) => {
-  const { preferences } = usePreferences();
+  const preferences = useActionsPreferences();
   const { t } = useI18n();
   const actionState = useAppSelector((state) => state.actions.keys["toc" /* toc */]);
   const dispatch = useAppDispatch();
@@ -2201,14 +2439,14 @@ var StatefulTocTrigger = ({ variant }) => {
     {
       label: t("reader.tableOfContents.title"),
       SVGIcon: toc_default,
-      shortcut: preferences.actions.keys["toc" /* toc */].shortcut,
+      shortcut: preferences.actionsKeys["toc" /* toc */].shortcut,
       id: "toc" /* toc */,
       onAction: () => setOpen(!actionState?.isOpen)
     }
   ) : /* @__PURE__ */ jsx(
     StatefulActionIcon,
     {
-      visibility: preferences.actions.keys["toc" /* toc */].visibility,
+      visibility: preferences.actionsKeys["toc" /* toc */].visibility,
       "aria-label": t("reader.tableOfContents.title"),
       placement: "bottom",
       tooltipLabel: t("reader.tableOfContents.title"),
@@ -2250,7 +2488,7 @@ var useGridNavigation = ({
   onFocus
 }) => {
   const visibleColumns = useGridTemplate(containerRef, "columns");
-  const onKeyDown = React18.useCallback((e) => {
+  const onKeyDown = React24.useCallback((e) => {
     const columns = visibleColumns || 1;
     if (columns <= 1 || !items.current?.length) return;
     const currentIdx = items.current.findIndex((val) => {
@@ -2466,7 +2704,7 @@ var StatefulDropdown = ({
     {
       ...props,
       ...standalone ? { label } : { "aria-label": label },
-      className: classNames3(
+      className: classNames4(
         thorium_web_reader_settings_default.dropdown,
         standalone && thorium_web_reader_settings_default.group,
         className
@@ -2476,7 +2714,7 @@ var StatefulDropdown = ({
           className: thorium_web_reader_settings_default.label,
           ...compounds?.label || {}
         },
-        ...React18.isValidElement(compounds?.button) ? { button: compounds.button } : {
+        ...React24.isValidElement(compounds?.button) ? { button: compounds.button } : {
           button: {
             className: thorium_web_reader_settings_default.dropdownButton,
             ...compounds?.button || {}
@@ -2487,7 +2725,7 @@ var StatefulDropdown = ({
           placement: "bottom",
           ...compounds?.popover || {}
         },
-        ...React18.isValidElement(compounds?.listbox) ? { listbox: compounds.listbox } : {
+        ...React24.isValidElement(compounds?.listbox) ? { listbox: compounds.listbox } : {
           listbox: {
             className: thorium_web_reader_settings_default.dropdownListbox,
             ...compounds?.listbox || {}
@@ -2545,7 +2783,7 @@ var StatefulFontFamily = ({ standalone = true }) => {
     })
   ]);
   const dispatch = useAppDispatch();
-  const { getSetting, submitPreferences } = useNavigator();
+  const { getSetting, submitPreferences } = useNavigator().visual;
   const updatePreference = useCallback(async (key) => {
     if (!key || key === fontFamily) return;
     const selectedOption = fontFamilyOptions.current.find((option) => option.id === key);
@@ -2614,7 +2852,7 @@ var UnstableStatefulFontWeight = ({ standalone = true }) => {
   const isWebPub = profile === "webPub";
   const fontWeight = useAppSelector((state) => isWebPub ? state.webPubSettings.fontWeight : state.settings.fontWeight) ?? 400;
   const dispatch = useAppDispatch();
-  const { getSetting, submitPreferences } = useNavigator();
+  const { getSetting, submitPreferences } = useNavigator().visual;
   const items = [
     {
       id: "default",
@@ -2693,7 +2931,7 @@ var StatefulHyphens = ({ standalone = true }) => {
   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 dispatch = useAppDispatch();
-  const { getSetting, submitPreferences } = useNavigator();
+  const { getSetting, submitPreferences } = useNavigator().visual;
   const updatePreference = useCallback(async (value) => {
     await submitPreferences({ hyphens: value });
     const effectiveSetting = getSetting("hyphens");
@@ -2777,7 +3015,7 @@ var StatefulNumberField = ({
       className: thorium_web_reader_settings_default.numberField,
       compounds: {
         wrapper: {
-          className: classNames3(
+          className: classNames4(
             thorium_web_reader_settings_default.numberFieldWrapper,
             standalone && thorium_web_reader_settings_default.group
           )
@@ -2795,7 +3033,7 @@ var StatefulNumberField = ({
           className: thorium_web_reader_settings_default.input
         },
         reset: {
-          className: classNames3(thorium_web_button_default.icon, thorium_web_reader_settings_default.resetButton),
+          className: classNames4(thorium_web_button_default.icon, thorium_web_reader_settings_default.resetButton),
           compounds: {
             tooltipTrigger: {
               delay: preferences.theming.arrow.tooltipDelay,
@@ -2821,7 +3059,8 @@ var StatefulSlider = ({
   ...props
 }) => {
   const { t } = useI18n();
-  const { preferences } = usePreferences();
+  const { theming } = useSharedPreferences();
+  const tooltipDelay = theming.icon.tooltipDelay;
   const style = {
     ...displayTicks && props.range && props.step ? {
       "--th-slider-ticks": (() => {
@@ -2841,20 +3080,20 @@ var StatefulSlider = ({
       ...props,
       ...standalone ? { label } : { "aria-label": label },
       placeholder,
-      className: classNames3(
+      className: classNames4(
         thorium_web_reader_settings_default.slider,
         displayTicks && thorium_web_reader_settings_default.sliderWithTicks
       ),
       style,
       compounds: {
         wrapper: {
-          className: classNames3(
+          className: classNames4(
             thorium_web_reader_settings_default.sliderWrapper,
             standalone && thorium_web_reader_settings_default.group
           )
         },
         label: {
-          className: classNames3(thorium_web_reader_settings_default.label, thorium_web_reader_settings_default.sliderLabel)
+          className: classNames4(thorium_web_reader_settings_default.label, thorium_web_reader_settings_default.sliderLabel)
         },
         output: {
           className: thorium_web_reader_settings_default.sliderOutput
@@ -2869,11 +3108,11 @@ var StatefulSlider = ({
           className: thorium_web_reader_settings_default.sliderThumb
         },
         reset: {
-          className: classNames3(thorium_web_button_default.icon, thorium_web_reader_settings_default.resetButton),
+          className: classNames4(thorium_web_button_default.icon, thorium_web_reader_settings_default.resetButton),
           compounds: {
             tooltipTrigger: {
-              delay: preferences.theming.arrow.tooltipDelay,
-              closeDelay: preferences.theming.arrow.tooltipDelay
+              delay: tooltipDelay,
+              closeDelay: tooltipDelay
             },
             tooltip: {
               className: thorium_web_button_default.tooltip
@@ -3159,6 +3398,24 @@ 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) => {
@@ -3200,14 +3457,16 @@ var usePlaceholder = (placeholder, range, format) => {
 var StatefulLetterSpacing = ({ standalone = true }) => {
   const { preferences } = usePreferences();
   const { t } = useI18n();
+  const config = preferences.settings.keys["letterSpacing" /* letterSpacing */];
+  const { getSetting, submitPreferences, preferencesEditor } = useNavigator().visual;
+  const { range } = useEffectiveRange(config.range, preferencesEditor?.letterSpacing?.supportedRange);
   const letterSpacingRangeConfig = {
-    variant: preferences.settings.keys["letterSpacing" /* letterSpacing */].variant,
-    placeholder: preferences.settings.keys["letterSpacing" /* letterSpacing */].placeholder,
-    range: preferences.settings.keys["letterSpacing" /* letterSpacing */].range,
-    step: preferences.settings.keys["letterSpacing" /* letterSpacing */].step
+    variant: config.variant,
+    placeholder: config.placeholder,
+    range,
+    step: config.step
   };
   const placeholderText = usePlaceholder(letterSpacingRangeConfig.placeholder, letterSpacingRangeConfig.range, "percent");
-  const { getSetting, submitPreferences } = useNavigator();
   const { getEffectiveSpacingValue, setLetterSpacing: setLetterSpacing2, canBeReset } = useSpacingPresets();
   const letterSpacing = getEffectiveSpacingValue("letterSpacing" /* letterSpacing */);
   const updatePreference = useCallback(async (value) => {
@@ -3276,10 +3535,19 @@ var StatefulLineHeight = ({ standalone = true }) => {
   const profile = useAppSelector((state) => state.reader.profile);
   const isWebPub = profile === "webPub";
   const publisherStyles = useAppSelector((state) => isWebPub ? state.webPubSettings.publisherStyles : state.settings.publisherStyles) ?? true;
-  const { getSetting, submitPreferences } = useNavigator();
+  const { getSetting, submitPreferences, preferencesEditor } = useNavigator().visual;
   const { getEffectiveSpacingValue, setLineHeight: setLineHeight2 } = useSpacingPresets();
   const lineHeight = getEffectiveSpacingValue("lineHeight" /* lineHeight */);
   const lineHeightOptions = useLineHeight();
+  const lineHeightNumericValues = useMemo(
+    () => Object.values(lineHeightOptions).filter((v) => v !== null),
+    [lineHeightOptions]
+  );
+  const { presets: effectivePresets } = useEffectiveRange(
+    [Math.min(...lineHeightNumericValues), Math.max(...lineHeightNumericValues)],
+    preferencesEditor?.lineHeight?.supportedRange,
+    lineHeightNumericValues
+  );
   const items = useMemo(() => {
     const baseItems = [
       {
@@ -3300,7 +3568,10 @@ var StatefulLineHeight = ({ standalone = true }) => {
         label: t("reader.preferences.lineHeight.large"),
         value: "large" /* large */
       }
-    ];
+    ].filter((item) => {
+      const v = lineHeightOptions[item.id];
+      return effectivePresets === void 0 || effectivePresets.includes(v);
+    });
     if (preferences.settings.keys["lineHeight" /* lineHeight */].allowUnset !== false) {
       baseItems.unshift({
         id: "publisher" /* publisher */,
@@ -3310,7 +3581,7 @@ var StatefulLineHeight = ({ standalone = true }) => {
       });
     }
     return baseItems;
-  }, [preferences.settings.keys, t]);
+  }, [preferences.settings.keys, lineHeightOptions, effectivePresets, t]);
   const updatePreference = useCallback(async (value) => {
     const computedValue = value === "publisher" /* publisher */ ? null : lineHeightOptions[value];
     await submitPreferences({
@@ -3335,14 +3606,16 @@ var StatefulLineHeight = ({ standalone = true }) => {
 var StatefulParagraphIndent = ({ standalone = true }) => {
   const { preferences } = usePreferences();
   const { t } = useI18n();
+  const config = preferences.settings.keys["paragraphIndent" /* paragraphIndent */];
+  const { getSetting, submitPreferences, preferencesEditor } = useNavigator().visual;
+  const { range } = useEffectiveRange(config.range, preferencesEditor?.paragraphIndent?.supportedRange);
   const paragraphIndentRangeConfig = {
-    variant: preferences.settings.keys["paragraphIndent" /* paragraphIndent */].variant,
-    placeholder: preferences.settings.keys["paragraphIndent" /* paragraphIndent */].placeholder,
-    range: preferences.settings.keys["paragraphIndent" /* paragraphIndent */].range,
-    step: preferences.settings.keys["paragraphIndent" /* paragraphIndent */].step
+    variant: config.variant,
+    placeholder: config.placeholder,
+    range,
+    step: config.step
   };
   const placeholderText = usePlaceholder(paragraphIndentRangeConfig.placeholder, paragraphIndentRangeConfig.range, "multiplier");
-  const { getSetting, submitPreferences } = useNavigator();
   const { getEffectiveSpacingValue, setParagraphIndent: setParagraphIndent2, canBeReset } = useSpacingPresets();
   const paragraphIndent = getEffectiveSpacingValue("paragraphIndent" /* paragraphIndent */);
   const updatePreference = useCallback(async (value) => {
@@ -3399,14 +3672,16 @@ var StatefulParagraphIndent = ({ standalone = true }) => {
 var StatefulParagraphSpacing = ({ standalone = true }) => {
   const { preferences } = usePreferences();
   const { t } = useI18n();
+  const config = preferences.settings.keys["paragraphSpacing" /* paragraphSpacing */];
+  const { getSetting, submitPreferences, preferencesEditor } = useNavigator().visual;
+  const { range } = useEffectiveRange(config.range, preferencesEditor?.paragraphSpacing?.supportedRange);
   const paragraphSpacingRangeConfig = {
-    variant: preferences.settings.keys["paragraphSpacing" /* paragraphSpacing */].variant,
-    placeholder: preferences.settings.keys["paragraphSpacing" /* paragraphSpacing */].placeholder,
-    range: preferences.settings.keys["paragraphSpacing" /* paragraphSpacing */].range,
-    step: preferences.settings.keys["paragraphSpacing" /* paragraphSpacing */].step
+    variant: config.variant,
+    placeholder: config.placeholder,
+    range,
+    step: config.step
   };
   const placeholderText = usePlaceholder(paragraphSpacingRangeConfig.placeholder, paragraphSpacingRangeConfig.range, "multiplier");
-  const { getSetting, submitPreferences } = useNavigator();
   const { getEffectiveSpacingValue, setParagraphSpacing: setParagraphSpacing2, canBeReset } = useSpacingPresets();
   const paragraphSpacing = getEffectiveSpacingValue("paragraphSpacing" /* paragraphSpacing */);
   const updatePreference = useCallback(async (value) => {
@@ -3470,7 +3745,7 @@ var StatefulPublisherStyles = ({ standalone = true }) => {
   const letterSpacing = getEffectiveSpacingValue("letterSpacing" /* letterSpacing */);
   const wordSpacing = getEffectiveSpacingValue("wordSpacing" /* wordSpacing */);
   const lineHeightOptions = useLineHeight();
-  const { submitPreferences } = useNavigator();
+  const { submitPreferences } = useNavigator().visual;
   const updatePreference = useCallback(async (isSelected) => {
     const values = isSelected ? {
       lineHeight: null,
@@ -3530,7 +3805,7 @@ var StatefulSpacingPresets = ({ standalone }) => {
   const spacing = useAppSelector((state) => isWebPub ? state.webPubSettings.spacing : state.settings.spacing);
   const isFXL = useAppSelector((state) => state.publication.isFXL);
   const dispatch = useAppDispatch();
-  const { submitPreferences } = useNavigator();
+  const { submitPreferences } = useNavigator().visual;
   const lineHeightOptions = useLineHeight();
   const { getPresetValues } = useSpacingPresets();
   const updatePreference = useCallback(async (value) => {
@@ -3611,7 +3886,7 @@ var StatefulTextAlign = ({ standalone = true }) => {
   const isRTL = useAppSelector((state) => state.publication.isRTL);
   const textAlign = useAppSelector((state) => isWebPub ? state.webPubSettings.textAlign : state.settings.textAlign) ?? "publisher" /* publisher */;
   const dispatch = useAppDispatch();
-  const { getSetting, submitPreferences } = useNavigator();
+  const { getSetting, submitPreferences } = useNavigator().visual;
   const items = [
     {
       id: "publisher" /* publisher */,
@@ -3669,7 +3944,7 @@ var StatefulTextNormalize = ({ standalone = true }) => {
   const isWebPub = profile === "webPub";
   const textNormalization = useAppSelector((state) => isWebPub ? state.webPubSettings.textNormalization : state.settings.textNormalization) ?? false;
   const dispatch = useAppDispatch();
-  const { getSetting, submitPreferences } = useNavigator();
+  const { getSetting, submitPreferences } = useNavigator().visual;
   const updatePreference = useCallback(async (value) => {
     await submitPreferences({ textNormalization: value });
     const effectiveSetting = getSetting("textNormalization");
@@ -3693,24 +3968,24 @@ var StatefulTextNormalize = ({ standalone = true }) => {
 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 = () => {
-  const { fxlThemeKeys, reflowThemeKeys } = usePreferenceKeys();
-  const { preferences } = usePreferences();
+  const profile = useAppSelector((state) => state.reader.profile);
+  const { theming } = useSharedPreferences();
+  const { systemThemes, keys: themeKeys, audioOrder: audioThemeOrder, reflowOrder: reflowThemeOrder, fxlOrder: fxlThemeOrder } = theming.themes;
   const { t } = useI18n();
   const radioGroupRef = useRef(null);
   const radioGroupWrapperRef = useRef(null);
   const isFXL = useAppSelector((state) => state.publication.isFXL);
   const direction = useAppSelector((state) => state.reader.direction);
   const isRTL = direction === "rtl" /* rtl */;
-  const themeArray = isFXL ? fxlThemeKeys : reflowThemeKeys;
+  const themeArray = profile === "audio" ? audioThemeOrder ?? [] : isFXL ? fxlThemeOrder ?? [] : reflowThemeOrder ?? [];
   const themeObject = useAppSelector((state) => state.theming.theme);
-  const theme = isFXL ? themeObject.fxl : themeObject.reflow;
+  const theme = profile === "audio" ? themeObject.audio : isFXL ? themeObject.fxl : themeObject.reflow;
   const colorScheme = useAppSelector((state) => state.theming.colorScheme);
+  const coverTheme = useAppSelector((state) => state.theming.coverTheme);
   const themeItems = useRef(
     themeArray.filter((theme2) => {
       if (theme2 === "auto") {
-        return preferences.theming.themes.systemThemes !== void 0 && Object.values(preferences.theming.themes.systemThemes).every(
-          (t2) => themeArray.includes(t2)
-        );
+        return systemThemes !== void 0 && Object.values(systemThemes).every((t2) => themeArray.includes(t2));
       }
       return true;
     })
@@ -3735,38 +4010,43 @@ var StatefulTheme = () => {
   const updatePreference = useCallback(async (value) => {
     const themeProps = buildThemeObject({
       theme: value,
-      themeKeys: preferences.theming.themes.keys,
-      systemThemes: preferences.theming.themes.systemThemes,
+      themeKeys: themeKeys ?? {},
+      systemThemes,
       colorScheme
     });
     await submitPreferences(themeProps);
     dispatch(setTheme({
-      key: isFXL ? "fxl" : "reflow",
+      key: profile === "audio" ? "audio" : isFXL ? "fxl" : "reflow",
       value
     }));
-  }, [isFXL, preferences.theming.themes.keys, preferences.theming.themes.systemThemes, submitPreferences, dispatch, colorScheme]);
+  }, [isFXL, themeKeys, systemThemes, submitPreferences, dispatch, colorScheme, profile]);
   const doStyles = useCallback((t2) => {
     let cssProps = {
       boxSizing: "border-box",
       color: "#999999"
     };
     if (t2 === "auto") {
-      if (preferences.theming.themes.systemThemes !== void 0) {
-        cssProps.background = isRTL ? `linear-gradient(148deg, ${preferences.theming.themes.keys[preferences.theming.themes.systemThemes.dark].background} 48%, ${preferences.theming.themes.keys[preferences.theming.themes.systemThemes.light].background} 100%)` : `linear-gradient(148deg, ${preferences.theming.themes.keys[preferences.theming.themes.systemThemes.light].background} 0%, ${preferences.theming.themes.keys[preferences.theming.themes.systemThemes.dark].background} 48%)`;
+      if (profile === "audio" && coverTheme) {
+        cssProps.background = coverTheme.background;
+        cssProps.color = coverTheme.text;
+        cssProps.border = `1px solid ${coverTheme.subdue}`;
+      } else if (systemThemes !== void 0) {
+        cssProps.background = isRTL ? `linear-gradient(148deg, ${themeKeys[systemThemes.dark].background} 48%, ${themeKeys[systemThemes.light].background} 100%)` : `linear-gradient(148deg, ${themeKeys[systemThemes.light].background} 0%, ${themeKeys[systemThemes.dark].background} 48%)`;
         cssProps.color = "#ffffff";
-        cssProps.border = `1px solid ${preferences.theming.themes.keys[preferences.theming.themes.systemThemes.light].subdue}`;
+        cssProps.border = `1px solid ${themeKeys[systemThemes.light].subdue}`;
       } else {
         cssProps.display = "none";
       }
     } else {
-      const themeKey = t2;
-      const theme2 = preferences.theming.themes.keys[themeKey];
-      cssProps.background = theme2.background;
-      cssProps.color = theme2.text;
-      cssProps.border = `1px solid ${theme2.subdue}`;
+      const theme2 = themeKeys[t2];
+      if (theme2) {
+        cssProps.background = theme2.background;
+        cssProps.color = theme2.text;
+        cssProps.border = `1px solid ${theme2.subdue}`;
+      }
     }
     return cssProps;
-  }, [preferences, isRTL]);
+  }, [themeKeys, systemThemes, isRTL, profile, coverTheme]);
   useEffect(() => {
     if (theme === "auto" && !themeItems.current.includes(theme)) {
       updatePreference(themeItems.current[0]);
@@ -3785,12 +4065,12 @@ var StatefulTheme = () => {
         "div",
         {
           ref: radioGroupWrapperRef,
-          className: classNames3(thorium_web_reader_settings_default.radioWrapper, thorium_web_reader_settings_default.themesWrapper),
+          className: classNames4(thorium_web_reader_settings_default.radioWrapper, thorium_web_reader_settings_default.themesWrapper),
           children: themeItems.current.map(
             (themeItem) => /* @__PURE__ */ jsx(
               Radio,
               {
-                className: classNames3(
+                className: classNames4(
                   thorium_web_reader_settings_default.radio,
                   thorium_web_reader_settings_default.themeRadio
                 ),
@@ -3814,14 +4094,16 @@ var StatefulTheme = () => {
 var StatefulWordSpacing = ({ standalone = true }) => {
   const { preferences } = usePreferences();
   const { t } = useI18n();
+  const config = preferences.settings.keys["wordSpacing" /* wordSpacing */];
+  const { getSetting, submitPreferences, preferencesEditor } = useNavigator().visual;
+  const { range } = useEffectiveRange(config.range, preferencesEditor?.wordSpacing?.supportedRange);
   const wordSpacingRangeConfig = {
-    variant: preferences.settings.keys["wordSpacing" /* wordSpacing */].variant,
-    placeholder: preferences.settings.keys["wordSpacing" /* wordSpacing */].placeholder,
-    range: preferences.settings.keys["wordSpacing" /* wordSpacing */].range,
-    step: preferences.settings.keys["wordSpacing" /* wordSpacing */].step
+    variant: config.variant,
+    placeholder: config.placeholder,
+    range,
+    step: config.step
   };
   const placeholderText = usePlaceholder(wordSpacingRangeConfig.placeholder, wordSpacingRangeConfig.range, "percent");
-  const { getSetting, submitPreferences } = useNavigator();
   const { getEffectiveSpacingValue, setWordSpacing: setWordSpacing2, canBeReset } = useSpacingPresets();
   const wordSpacing = getEffectiveSpacingValue("wordSpacing" /* wordSpacing */);
   const updatePreference = useCallback(async (value) => {
@@ -3888,7 +4170,7 @@ var StatefulZoom = () => {
     getSetting,
     submitPreferences,
     preferencesEditor
-  } = useNavigator();
+  } = useNavigator().visual;
   const preferenceEditorProperty = readerProfile === "webPub" ? preferencesEditor?.zoom : isFXL ? preferencesEditor?.zoom : preferencesEditor?.fontSize;
   const updatePreference = useCallback(async (value) => {
     if (readerProfile === "webPub") {
@@ -3899,23 +4181,13 @@ var StatefulZoom = () => {
       dispatch(setFontSize(getSetting("fontSize")));
     }
   }, [readerProfile, submitPreferences, getSetting, dispatch]);
-  const getEffectiveRange = (preferred, supportedRange) => {
-    if (!supportedRange) {
-      return preferred;
-    }
-    if (preferred && isRangeWithinSupportedRange(preferred, supportedRange)) {
-      return preferred;
-    }
-    return supportedRange;
-  };
-  const isRangeWithinSupportedRange = (range, supportedRange) => {
-    return Math.min(range[0], range[1]) >= Math.min(supportedRange[0], supportedRange[1]) && Math.max(range[0], range[1]) <= Math.max(supportedRange[0], supportedRange[1]);
-  };
+  const zoomConfig = preferences.settings.keys["zoom" /* zoom */];
+  const { range: effectiveRange } = useEffectiveRange(zoomConfig.range, preferenceEditorProperty?.supportedRange);
   const zoomRangeConfig = {
-    variant: preferences.settings.keys["zoom" /* zoom */].variant,
-    placeholder: preferences.settings.keys["zoom" /* zoom */].placeholder,
-    range: preferenceEditorProperty?.supportedRange ? getEffectiveRange(preferences.settings.keys["zoom" /* zoom */].range, preferenceEditorProperty.supportedRange) : preferences.settings.keys["zoom" /* zoom */].range,
-    step: preferences.settings.keys["zoom" /* zoom */].step
+    variant: zoomConfig.variant,
+    placeholder: zoomConfig.placeholder,
+    range: effectiveRange,
+    step: zoomConfig.step
   };
   const placeholderText = usePlaceholder(zoomRangeConfig.placeholder, zoomRangeConfig.range);
   return /* @__PURE__ */ jsx(Fragment, { children: zoomRangeConfig.variant === "numberField" /* numberField */ ? /* @__PURE__ */ jsx(
@@ -3962,7 +4234,7 @@ var createDefaultPlugin = () => {
     id: "core",
     name: "Core Components",
     description: "Default components for Thorium Web Epub StatefulReader",
-    version: "1.2.0",
+    version: "1.3.0",
     components: {
       actions: {
         ["fullscreen" /* fullscreen */]: {
@@ -3974,7 +4246,7 @@ var createDefaultPlugin = () => {
         },
         ["settings" /* settings */]: {
           Trigger: StatefulSettingsTrigger,
-          Target: StatefulSettingsContainer
+          Target: StatefulVisualSettingsContainer
         },
         ["toc" /* toc */]: {
           Trigger: StatefulTocTrigger,
@@ -4052,136 +4324,1274 @@ var createDefaultPlugin = () => {
     }
   };
 };
-var StatefulPreferencesProvider = ({
-  children,
-  initialPreferences = defaultPreferences
+var StatefulSliderWithPresets = ({
+  standalone,
+  label,
+  placeholder,
+  displayTicks = false,
+  hideOutput = false,
+  value,
+  resetLabel,
+  presets,
+  formatValue,
+  onEscape,
+  ...props
 }) => {
-  const store = useStore();
-  const adapter = useMemo(() => {
-    return new ThReduxPreferencesAdapter(store, initialPreferences);
-  }, [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
+  const { t } = useI18n();
+  const { theming, direction } = useSharedPreferences();
+  const numberFormatter = useNumberFormatter(props.formatOptions);
+  const resolvedFormatValue = formatValue ?? (props.formatOptions ? (v) => numberFormatter.format(v) : void 0);
+  const tooltipDelay = theming.icon.tooltipDelay;
+  const presetsListRef = useRef(null);
+  const presetsRef = useRef(presets);
+  presetsRef.current = presets;
+  const currentScalarValue = Array.isArray(value) ? value[0] : value;
+  const { onKeyDown } = useGridNavigation({
+    containerRef: presetsListRef,
+    items: presetsRef,
+    currentValue: currentScalarValue,
+    onChange: (v) => props.onChange?.([v]),
+    isRTL: direction === "rtl" /* rtl */,
+    onEscape,
+    onFocus: (v) => {
+      const el = presetsListRef.current?.querySelector(`input[value="${v}"]`);
+      el?.focus();
+    }
+  });
+  const style = {
+    ...displayTicks && props.range && props.step ? {
+      "--th-slider-ticks": (() => {
+        const [min, max] = [Math.min(...props.range), Math.max(...props.range)];
+        const step = props.step || 1;
+        const range = max - min;
+        const totalIntervals = range / step;
+        return Math.ceil(totalIntervals);
+      })()
+    } : {},
+    ...props.style
   };
-};
-
-// 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
+  return /* @__PURE__ */ jsx(
+    ThSliderWithPresets,
+    {
+      presets,
+      formatValue: resolvedFormatValue,
+      value,
+      ...props,
+      ...standalone ? { label } : { "aria-label": label },
+      placeholder,
+      className: classNames4(
+        thorium_web_reader_settings_default.slider,
+        displayTicks && thorium_web_reader_settings_default.sliderWithTicks
+      ),
+      style,
+      compounds: {
+        wrapper: {
+          className: classNames4(
+            thorium_web_reader_settings_default.sliderWithPresetsWrapper,
+            standalone && thorium_web_reader_settings_default.group
+          )
+        },
+        slider: {
+          wrapper: {
+            className: thorium_web_reader_settings_default.sliderWrapper
+          },
+          label: {
+            className: classNames4(thorium_web_reader_settings_default.label, thorium_web_reader_settings_default.sliderLabel)
+          },
+          output: {
+            className: thorium_web_reader_settings_default.sliderOutput,
+            ...hideOutput && { style: () => ({ display: "none" }) }
+          },
+          placeholder: {
+            className: thorium_web_reader_settings_default.sliderPlaceholder
+          },
+          track: {
+            className: thorium_web_reader_settings_default.sliderTrack
+          },
+          thumb: {
+            className: thorium_web_reader_settings_default.sliderThumb
+          },
+          reset: {
+            className: classNames4(thorium_web_button_default.icon, thorium_web_reader_settings_default.resetButton),
+            compounds: {
+              tooltipTrigger: {
+                delay: tooltipDelay,
+                closeDelay: tooltipDelay
+              },
+              tooltip: {
+                className: thorium_web_button_default.tooltip
+              },
+              label: resetLabel ?? t("common.actions.reset")
+            }
+          }
+        },
+        presetsList: {
+          "aria-label": label
+        },
+        presetsWrapper: {
+          ref: presetsListRef,
+          className: thorium_web_reader_settings_default.sliderWithPresetsRadioGroup
+        },
+        preset: {
+          className: thorium_web_reader_settings_default.sliderWithPresetsRadio,
+          onKeyDown
+        }
+      }
     }
+  );
+};
+var StatefulPresetsGroup = ({
+  presets,
+  value,
+  formatOptions,
+  formatValue,
+  onChange,
+  ...props
+}) => {
+  const numberFormatter = useNumberFormatter(formatOptions);
+  const resolvedFormatValue = formatValue ?? (formatOptions ? (v) => numberFormatter.format(v) : String);
+  const items = presets.map((p) => ({
+    id: String(p),
+    value: String(p),
+    label: resolvedFormatValue(p)
   }));
+  const radioValue = value !== void 0 && presets.includes(value) ? String(value) : "";
+  const handleChange = (v) => {
+    onChange?.(parseFloat(v));
+  };
+  return /* @__PURE__ */ jsx(
+    StatefulRadioGroup,
+    {
+      ...props,
+      items,
+      value: radioValue,
+      onChange: handleChange
+    }
+  );
 };
-
-// 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";
+var StatefulAudioSkipBackwardInterval = ({
+  standalone = true
+}) => {
+  const { t } = useI18n();
+  const { preferences } = useAudioPreferences();
+  const skipBackwardInterval = useAppSelector((state) => state.audioSettings.skipBackwardInterval);
+  const dispatch = useAppDispatch();
+  const { submitPreferences, getSetting, preferencesEditor } = useNavigator().media;
+  const config = preferences.settings.keys["skipBackwardInterval" /* skipBackwardInterval */] ?? defaultAudioSkipBackwardInterval;
+  const { range, presets } = useEffectiveRange(config.range, preferencesEditor?.skipBackwardInterval?.supportedRange, config.presets);
+  const skipBackwardIntervalRangeConfig = {
+    variant: config.variant,
+    placeholder: config.placeholder,
+    range,
+    step: config.step
+  };
+  const placeholderText = usePlaceholder(skipBackwardIntervalRangeConfig.placeholder, skipBackwardIntervalRangeConfig.range);
+  const updatePreference = useCallback(async (value) => {
+    const val = Array.isArray(value) ? value[0] : value;
+    await submitPreferences({ skipBackwardInterval: val });
+    const effectiveSkipBackwardInterval = getSetting("skipBackwardInterval");
+    dispatch(setSkipBackwardInterval(effectiveSkipBackwardInterval));
+  }, [submitPreferences, getSetting, dispatch]);
+  if (skipBackwardIntervalRangeConfig.variant === "numberField" /* numberField */) {
+    return /* @__PURE__ */ jsx(
+      StatefulNumberField,
+      {
+        standalone,
+        label: t("reader.playback.preferences.audio.skipBackwardInterval"),
+        placeholder: placeholderText,
+        defaultValue: void 0,
+        value: skipBackwardInterval ?? void 0,
+        onChange: updatePreference,
+        onReset: void 0,
+        range: skipBackwardIntervalRangeConfig.range || [1, 60],
+        step: skipBackwardIntervalRangeConfig.step,
+        steppers: {
+          decrementLabel: t("common.actions.decrease"),
+          incrementLabel: t("common.actions.increase")
+        },
+        formatOptions: { style: "unit", unit: "second" },
+        isWheelDisabled: true,
+        isVirtualKeyboardDisabled: true
+      }
+    );
   }
-  if (profiles.some(
-    (profile) => profile === Profile.EPUB
-  )) {
-    return "epub";
+  if (skipBackwardIntervalRangeConfig.variant === "presetsGroup" /* presetsGroup */) {
+    return /* @__PURE__ */ jsx(
+      StatefulPresetsGroup,
+      {
+        standalone,
+        label: t("reader.playback.preferences.audio.skipBackwardInterval"),
+        presets: presets || [],
+        formatOptions: { style: "unit", unit: "second" },
+        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        value: skipBackwardInterval ?? void 0,
+        onChange: (v) => updatePreference(v)
+      }
+    );
   }
-  return "webPub";
+  if (skipBackwardIntervalRangeConfig.variant === "sliderWithPresets" /* sliderWithPresets */) {
+    return /* @__PURE__ */ jsx(
+      StatefulSliderWithPresets,
+      {
+        standalone,
+        label: t("reader.playback.preferences.audio.skipBackwardInterval"),
+        placeholder: placeholderText,
+        presets: presets || [],
+        formatOptions: { style: "unit", unit: "second" },
+        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        value: skipBackwardInterval ?? void 0,
+        onChange: updatePreference,
+        range: skipBackwardIntervalRangeConfig.range,
+        step: skipBackwardIntervalRangeConfig.step
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StatefulSlider,
+    {
+      standalone,
+      displayTicks: skipBackwardIntervalRangeConfig.variant === "incrementedSlider" /* incrementedSlider */,
+      label: t("reader.playback.preferences.audio.skipBackwardInterval"),
+      placeholder: placeholderText,
+      defaultValue: void 0,
+      value: skipBackwardInterval ?? void 0,
+      onChange: updatePreference,
+      range: skipBackwardIntervalRangeConfig.range,
+      step: skipBackwardIntervalRangeConfig.step,
+      formatOptions: { style: "unit", unit: "second" }
+    }
+  );
 };
-var usePublication = ({
-  url,
-  onError = () => {
-  },
-  fetcher: customFetcher
+var StatefulAudioSkipForwardInterval = ({
+  standalone = true
 }) => {
+  const { t } = useI18n();
+  const { preferences } = useAudioPreferences();
+  const skipForwardInterval = useAppSelector((state) => state.audioSettings.skipForwardInterval);
   const dispatch = useAppDispatch();
-  const { resolveFontLanguage } = usePreferences();
-  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 [fontLanguage, setFontLanguageState] = useState("");
-  const [hasDisplayTransformability, setHasDisplayTransformabilityState] = useState(false);
-  const handleManifestError = (error2, context) => {
-    console.error(`${context}:`, error2);
-    const processedError = ErrorHandler.process(error2, context);
-    setError(processedError);
-    setIsLoading(false);
+  const { submitPreferences, getSetting, preferencesEditor } = useNavigator().media;
+  const config = preferences.settings.keys["skipForwardInterval" /* skipForwardInterval */] ?? defaultAudioSkipForwardInterval;
+  const { range, presets } = useEffectiveRange(config.range, preferencesEditor?.skipForwardInterval?.supportedRange, config.presets);
+  const skipForwardIntervalRangeConfig = {
+    variant: config.variant,
+    placeholder: config.placeholder,
+    range,
+    step: config.step
   };
-  useEffect(() => {
-    if (!url) {
-      const validationError = ErrorHandler.process(new Error("Manifest URL is required"), "Validation");
-      setError(validationError);
-      setIsLoading(false);
-      return;
+  const placeholderText = usePlaceholder(skipForwardIntervalRangeConfig.placeholder, skipForwardIntervalRangeConfig.range);
+  const updatePreference = useCallback(async (value) => {
+    const val = Array.isArray(value) ? value[0] : value;
+    await submitPreferences({ skipForwardInterval: val });
+    const effectiveSkipForwardInterval = getSetting("skipForwardInterval");
+    dispatch(setSkipForwardInterval(effectiveSkipForwardInterval));
+  }, [submitPreferences, getSetting, dispatch]);
+  if (skipForwardIntervalRangeConfig.variant === "numberField" /* numberField */) {
+    return /* @__PURE__ */ jsx(
+      StatefulNumberField,
+      {
+        standalone,
+        label: t("reader.playback.preferences.audio.skipForwardInterval"),
+        placeholder: placeholderText,
+        defaultValue: void 0,
+        value: skipForwardInterval,
+        onChange: updatePreference,
+        onReset: void 0,
+        range: skipForwardIntervalRangeConfig.range || [1, 60],
+        step: skipForwardIntervalRangeConfig.step,
+        steppers: {
+          decrementLabel: t("common.actions.decrease"),
+          incrementLabel: t("common.actions.increase")
+        },
+        formatOptions: { style: "unit", unit: "second" },
+        isWheelDisabled: true,
+        isVirtualKeyboardDisabled: true
+      }
+    );
+  }
+  if (skipForwardIntervalRangeConfig.variant === "presetsGroup" /* presetsGroup */) {
+    return /* @__PURE__ */ jsx(
+      StatefulPresetsGroup,
+      {
+        standalone,
+        label: t("reader.playback.preferences.audio.skipForwardInterval"),
+        presets: presets || [],
+        formatOptions: { style: "unit", unit: "second" },
+        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        value: skipForwardInterval,
+        onChange: (v) => updatePreference(v)
+      }
+    );
+  }
+  if (skipForwardIntervalRangeConfig.variant === "sliderWithPresets" /* sliderWithPresets */) {
+    return /* @__PURE__ */ jsx(
+      StatefulSliderWithPresets,
+      {
+        standalone,
+        label: t("reader.playback.preferences.audio.skipForwardInterval"),
+        placeholder: placeholderText,
+        presets: presets || [],
+        formatOptions: { style: "unit", unit: "second" },
+        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        value: skipForwardInterval,
+        onChange: updatePreference,
+        range: skipForwardIntervalRangeConfig.range,
+        step: skipForwardIntervalRangeConfig.step
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StatefulSlider,
+    {
+      standalone,
+      displayTicks: skipForwardIntervalRangeConfig.variant === "incrementedSlider" /* incrementedSlider */,
+      label: t("reader.playback.preferences.audio.skipForwardInterval"),
+      placeholder: placeholderText,
+      value: skipForwardInterval,
+      onChange: updatePreference,
+      range: skipForwardIntervalRangeConfig.range,
+      step: skipForwardIntervalRangeConfig.step,
+      formatOptions: { style: "unit", unit: "second" }
     }
-    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) {
+  );
+};
+var StatefulAudioSkipInterval = ({
+  standalone = true
+}) => {
+  const { t } = useI18n();
+  const { preferences } = useAudioPreferences();
+  const skipInterval = useAppSelector((state) => state.audioSettings.skipInterval);
+  const dispatch = useAppDispatch();
+  const { submitPreferences, getSetting, preferencesEditor } = useNavigator().media;
+  const config = preferences.settings.keys["skipInterval" /* skipInterval */] ?? defaultAudioSkipInterval;
+  const { range, presets } = useEffectiveRange(config.range, preferencesEditor?.skipForwardInterval?.supportedRange, config.presets);
+  const skipIntervalRangeConfig = {
+    variant: config.variant,
+    placeholder: config.placeholder,
+    range,
+    step: config.step
+  };
+  const placeholderText = usePlaceholder(skipIntervalRangeConfig.placeholder, skipIntervalRangeConfig.range);
+  const updatePreference = useCallback(async (value) => {
+    const val = Array.isArray(value) ? value[0] : value;
+    await submitPreferences({
+      skipForwardInterval: val,
+      skipBackwardInterval: val
+    });
+    dispatch(setSkipInterval(getSetting("skipForwardInterval")));
+  }, [submitPreferences, getSetting, dispatch]);
+  if (skipIntervalRangeConfig.variant === "numberField" /* numberField */) {
+    return /* @__PURE__ */ jsx(
+      StatefulNumberField,
+      {
+        standalone,
+        label: t("reader.playback.preferences.audio.skipInterval"),
+        placeholder: placeholderText,
+        defaultValue: void 0,
+        value: skipInterval,
+        onChange: updatePreference,
+        onReset: void 0,
+        range: skipIntervalRangeConfig.range || [1, 60],
+        step: skipIntervalRangeConfig.step,
+        steppers: {
+          decrementLabel: t("common.actions.decrease"),
+          incrementLabel: t("common.actions.increase")
+        },
+        formatOptions: { style: "unit", unit: "second" },
+        isWheelDisabled: true,
+        isVirtualKeyboardDisabled: true
+      }
+    );
+  }
+  if (skipIntervalRangeConfig.variant === "presetsGroup" /* presetsGroup */) {
+    return /* @__PURE__ */ jsx(
+      StatefulPresetsGroup,
+      {
+        standalone,
+        label: t("reader.playback.preferences.audio.skipInterval"),
+        presets: presets || [],
+        formatOptions: { style: "unit", unit: "second" },
+        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        value: skipInterval,
+        onChange: (v) => updatePreference(v)
+      }
+    );
+  }
+  if (skipIntervalRangeConfig.variant === "sliderWithPresets" /* sliderWithPresets */) {
+    return /* @__PURE__ */ jsx(
+      StatefulSliderWithPresets,
+      {
+        standalone,
+        label: t("reader.playback.preferences.audio.skipInterval"),
+        placeholder: placeholderText,
+        presets: presets || [],
+        formatOptions: { style: "unit", unit: "second" },
+        onEscape: () => dispatch(setActionOpen({ key: "settings" /* settings */, isOpen: false })),
+        value: skipInterval,
+        onChange: updatePreference,
+        range: skipIntervalRangeConfig.range,
+        step: skipIntervalRangeConfig.step
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StatefulSlider,
+    {
+      standalone,
+      displayTicks: skipIntervalRangeConfig.variant === "incrementedSlider" /* incrementedSlider */,
+      label: t("reader.playback.preferences.audio.skipInterval"),
+      placeholder: placeholderText,
+      value: skipInterval,
+      onChange: updatePreference,
+      range: skipIntervalRangeConfig.range,
+      step: skipIntervalRangeConfig.step,
+      formatOptions: { style: "unit", unit: "second" }
+    }
+  );
+};
+var StatefulAudioAutoPlay = ({
+  standalone = true
+}) => {
+  const { t } = useI18n();
+  const autoPlay = useAppSelector((state) => state.audioSettings.autoPlay);
+  const dispatch = useAppDispatch();
+  const { submitPreferences, getSetting } = useNavigator().media;
+  const updatePreference = useCallback(async (isSelected) => {
+    await submitPreferences({ autoPlay: isSelected });
+    const effectiveAutoPlay = getSetting("autoPlay");
+    dispatch(setAutoPlay(effectiveAutoPlay));
+  }, [submitPreferences, getSetting, dispatch]);
+  return /* @__PURE__ */ jsx(
+    StatefulSwitch,
+    {
+      standalone,
+      heading: t("reader.playback.preferences.autoPlay.title"),
+      label: t("reader.playback.preferences.autoPlay.label"),
+      isSelected: autoPlay,
+      onChange: updatePreference
+    }
+  );
+};
+var SvgVolumeUp = (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: "M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z" }) });
+var volume_up_default = SvgVolumeUp;
+var SvgVolumeDown = (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: "M200-360v-240h160l200-200v640L360-360H200Zm440 40v-322q45 21 72.5 65t27.5 97q0 53-27.5 96T640-320ZM480-606l-86 86H280v80h114l86 86v-252ZM380-480Z" }) });
+var volume_down_default = SvgVolumeDown;
+var SvgVolumeMute = (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-360v-240h160l200-200v640L440-360H280Zm80-80h114l86 86v-252l-86 86H360v80Zm100-40Z" }) });
+var volume_mute_default = SvgVolumeMute;
+var SvgVolumeOff = (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: "M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Zm-80 238v-94l-72-72H200v80h114l86 86Zm-36-130Z" }) });
+var volume_off_default = SvgVolumeOff;
+
+// src/components/Audio/actions/Volume/assets/styles/thorium-web.volume.module.css
+var thorium_web_volume_default = {
+  wrapper: "thorium_web_volume_wrapper",
+  button: "thorium_web_volume_button",
+  sliderTrack: "thorium_web_volume_sliderTrack",
+  slider: "thorium_web_volume_slider",
+  sliderThumb: "thorium_web_volume_sliderThumb"
+};
+var StatefulAudioVolumeTrigger = ({ ref }) => {
+  const { t } = useI18n();
+  const { preferences } = useAudioPreferences();
+  const { preferencesEditor } = useNavigator().media;
+  const volume = useAppSelector((state) => state.audioSettings.volume);
+  const isTrackReady = useAppSelector((state) => state.player.isTrackReady);
+  const isStalled = useAppSelector((state) => state.player.isStalled);
+  const isDisabled = !isTrackReady || isStalled;
+  const dispatch = useAppDispatch();
+  const config = preferences.settings.keys["volume" /* volume */];
+  const { range } = useEffectiveRange(config.range, preferencesEditor?.volume?.supportedRange);
+  const VolumeIcon = useMemo(() => {
+    if (volume === 0) return volume_off_default;
+    const max = Math.max(...range);
+    if (volume <= max / 3) return volume_mute_default;
+    if (volume <= max / 3 * 2) return volume_down_default;
+    return volume_up_default;
+  }, [volume, range]);
+  return /* @__PURE__ */ jsx(
+    StatefulActionIcon,
+    {
+      ref,
+      tooltipLabel: t("reader.playback.preferences.audio.volume"),
+      placement: "top",
+      onPress: () => dispatch(toggleActionOpen({ key: "audio.volume" /* volume */ })),
+      isDisabled,
+      className: thorium_web_volume_default.button,
+      children: /* @__PURE__ */ jsx(VolumeIcon, { "aria-hidden": "true", focusable: "false" })
+    }
+  );
+};
+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 { t } = useI18n();
+  const { preferences } = useAudioPreferences();
+  const dispatch = useAppDispatch();
+  const { submitPreferences, getSetting, preferencesEditor } = useNavigator().media;
+  const config = preferences.settings.keys["volume" /* volume */];
+  const { range } = useEffectiveRange(config.range, preferencesEditor?.volume?.supportedRange);
+  const updatePreference = useCallback(async (value) => {
+    const val = Array.isArray(value) ? value[0] : value;
+    await submitPreferences({ volume: val });
+    const effectiveVolume = getSetting("volume");
+    dispatch(setVolume(effectiveVolume));
+  }, [submitPreferences, getSetting, dispatch]);
+  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]);
+  return /* @__PURE__ */ jsx(
+    StatefulSheetWrapper,
+    {
+      sheetType: docking.sheetType,
+      sheetProps: {
+        id: "audio.volume" /* volume */,
+        triggerRef,
+        heading: t("reader.playback.preferences.audio.volume"),
+        className: thorium_web_volume_default.wrapper,
+        placement,
+        isOpen,
+        onOpenChange: setOpen,
+        onClosePress: () => setOpen(false),
+        docker: docking.getDocker()
+      },
+      children: /* @__PURE__ */ jsx(
+        ThSlider,
+        {
+          "aria-label": t("reader.playback.preferences.audio.volume"),
+          className: thorium_web_volume_default.slider,
+          orientation: sliderOrientation,
+          range,
+          step: config.step,
+          value: volume,
+          onChange: updatePreference,
+          compounds: {
+            track: { className: thorium_web_volume_default.sliderTrack },
+            thumb: { className: thorium_web_volume_default.sliderThumb },
+            output: { style: () => ({ display: "none" }) }
+          }
+        }
+      )
+    }
+  );
+};
+var SvgSpeed = (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: "M480-316.5q38-.5 56-27.5l224-336-336 224q-27 18-28.5 55t22.5 61q24 24 62 23.5Zm0-483.5q59 0 113.5 16.5T696-734l-76 48q-33-17-68.5-25.5T480-720q-133 0-226.5 93.5T160-400q0 42 11.5 83t32.5 77h552q23-38 33.5-79t10.5-85q0-36-8.5-70T766-540l48-76q30 47 47.5 100T880-406q1 57-13 109t-41 99q-11 18-30 28t-40 10H204q-21 0-40-10t-30-28q-26-45-40-95.5T80-400q0-83 31.5-155.5t86-127Q252-737 325-768.5T480-800Zm7 313Z" }) });
+var speed_default = SvgSpeed;
+
+// src/components/Audio/actions/PlaybackRate/assets/styles/thorium-web.playbackRate.module.css
+var thorium_web_playbackRate_default = {
+  wrapper: "thorium_web_playbackRate_wrapper",
+  button: "thorium_web_playbackRate_button",
+  label: "thorium_web_playbackRate_label",
+  slider: "thorium_web_playbackRate_slider"};
+var StatefulAudioPlaybackRateTrigger = ({ ref }) => {
+  const { t } = useI18n();
+  const playbackRate = useAppSelector((state) => state.audioSettings.playbackRate);
+  const isTrackReady = useAppSelector((state) => state.player.isTrackReady);
+  const isStalled = useAppSelector((state) => state.player.isStalled);
+  const isDisabled = !isTrackReady || isStalled;
+  const dispatch = useAppDispatch();
+  return /* @__PURE__ */ jsxs(
+    StatefulActionIcon,
+    {
+      ref,
+      tooltipLabel: t("reader.playback.preferences.playbackRate.descriptive"),
+      placement: "top",
+      onPress: () => dispatch(toggleActionOpen({ key: "audio.playbackRate" /* playbackRate */ })),
+      isDisabled,
+      className: thorium_web_playbackRate_default.button,
+      children: [
+        /* @__PURE__ */ jsx(speed_default, { "aria-hidden": "true", focusable: "false" }),
+        /* @__PURE__ */ jsxs("span", { className: thorium_web_playbackRate_default.label, "aria-hidden": "true", children: [
+          playbackRate,
+          "\xD7"
+        ] })
+      ]
+    }
+  );
+};
+var StatefulAudioPlaybackRateContainer = ({ triggerRef, placement = "top" }) => {
+  const isOpen = useAppSelector((state) => state.actions.keys["audio.playbackRate" /* playbackRate */]?.isOpen ?? false);
+  const { t } = useI18n();
+  const { preferences } = useAudioPreferences();
+  const playbackRate = useAppSelector((state) => state.audioSettings.playbackRate);
+  const dispatch = useAppDispatch();
+  const { submitPreferences, getSetting, preferencesEditor } = useNavigator().media;
+  const config = preferences.settings.keys["playbackRate" /* playbackRate */];
+  const { range, presets } = useEffectiveRange(config.range, preferencesEditor?.playbackRate?.supportedRange, config.presets);
+  const updatePreference = useCallback(async (value) => {
+    await submitPreferences({ playbackRate: value });
+    dispatch(setPlaybackRate(getSetting("playbackRate")));
+  }, [submitPreferences, getSetting, dispatch]);
+  const docking = useDocking("audio.playbackRate" /* playbackRate */);
+  const setOpen = useCallback((open) => {
+    dispatch(setActionOpen({ key: "audio.playbackRate" /* playbackRate */, isOpen: open }));
+  }, [dispatch]);
+  const renderContent = () => {
+    if (config.variant === "slider" /* slider */) {
+      return /* @__PURE__ */ jsx("div", { className: thorium_web_playbackRate_default.slider, children: /* @__PURE__ */ jsx(
+        ThSlider,
+        {
+          "aria-label": t("reader.playback.preferences.playbackRate.descriptive"),
+          range,
+          step: config.step,
+          value: playbackRate,
+          onChange: (v) => updatePreference(Array.isArray(v) ? v[0] : v)
+        }
+      ) });
+    }
+    if (config.variant === "numberField" /* numberField */) {
+      return /* @__PURE__ */ jsx("div", { className: thorium_web_playbackRate_default.numberField, children: /* @__PURE__ */ jsx(
+        ThNumberField,
+        {
+          "aria-label": t("reader.playback.preferences.playbackRate.descriptive"),
+          range,
+          step: config.step,
+          value: playbackRate,
+          onChange: updatePreference
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: thorium_web_playbackRate_default.slider, children: /* @__PURE__ */ jsx(
+      StatefulSliderWithPresets,
+      {
+        standalone: true,
+        label: t("reader.playback.preferences.playbackRate.descriptive"),
+        presets: presets || [],
+        formatValue: (v) => `${v}\xD7`,
+        value: playbackRate,
+        onChange: (v) => updatePreference(Array.isArray(v) ? v[0] : v),
+        range,
+        step: config.step,
+        onEscape: () => setOpen(false)
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsx(
+    StatefulSheetWrapper,
+    {
+      sheetType: docking.sheetType,
+      sheetProps: {
+        id: "audio.playbackRate" /* playbackRate */,
+        triggerRef,
+        heading: t("reader.playback.preferences.playbackRate.descriptive"),
+        className: thorium_web_playbackRate_default.wrapper,
+        placement,
+        isOpen,
+        onOpenChange: setOpen,
+        onClosePress: () => setOpen(false),
+        docker: docking.getDocker()
+      },
+      children: renderContent()
+    }
+  );
+};
+
+// src/components/Audio/actions/Toc/assets/styles/thorium-web.audioToc.module.css
+var thorium_web_audioToc_default = {
+  button: "thorium_web_audioToc_button"
+};
+var StatefulAudioTocTrigger = ({ ref }) => {
+  const { t } = useI18n();
+  const isTrackReady = useAppSelector((state) => state.player.isTrackReady);
+  const isStalled = useAppSelector((state) => state.player.isStalled);
+  const isDisabled = !isTrackReady || isStalled;
+  const dispatch = useAppDispatch();
+  return /* @__PURE__ */ jsx(
+    StatefulActionIcon,
+    {
+      ref,
+      tooltipLabel: t("reader.tableOfContents.title"),
+      placement: "top",
+      onPress: () => dispatch(toggleActionOpen({ key: "audio.toc" /* toc */ })),
+      isDisabled,
+      className: thorium_web_audioToc_default.button,
+      children: /* @__PURE__ */ jsx(toc_default, { "aria-hidden": "true", focusable: "false" })
+    }
+  );
+};
+var StatefulAudioTocContainer = ({ triggerRef }) => {
+  const { t } = useI18n();
+  const { goLink } = useNavigator().unified;
+  const dispatch = useAppDispatch();
+  const isOpen = useAppSelector((state) => state.actions.keys["audio.toc" /* toc */]?.isOpen ?? 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 docking = useDocking("audio.toc" /* toc */);
+  const sheetType = docking.sheetType;
+  const setOpen = useCallback((value) => {
+    dispatch(setActionOpen({ key: "audio.toc" /* toc */, isOpen: value }));
+  }, [dispatch]);
+  const { expandedKeys, setExpandedKeys, filterValue, setFilterValue, displayedTocTree, treeRef, searchInputRef } = useTocContent({ isOpen, tocTree, tocEntry: tocEntryId });
+  useEffect(() => {
+    if (isOpen) {
+      const handleEscape = (event) => {
+        if (!isActiveElement(searchInputRef.current) && !filterValue && event.key === "Escape") {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("keydown", handleEscape, true);
+      return () => document.removeEventListener("keydown", handleEscape, true);
+    }
+  }, [isOpen, filterValue, searchInputRef, setOpen]);
+  const handleAction = (keys) => {
+    if (keys === "all" || !keys || keys.size === 0) return;
+    const key = [...keys][0];
+    const el = document.querySelector(`[data-key=${key}]`);
+    const href = el?.getAttribute("data-href");
+    if (!href) return;
+    const matched = findTocItemById(tocTree || [], key);
+    const cb = isOpen && (sheetType === "docked start" /* dockedStart */ || sheetType === "docked end" /* dockedEnd */) ? () => {
+      dispatch(setTocEntry(matched || null));
+      dispatch(setImmersive(true));
+      dispatch(setUserNavigated(true));
+    } : () => {
+      dispatch(setTocEntry(matched || null));
+      dispatch(setImmersive(true));
+      dispatch(setUserNavigated(true));
+      setOpen(false);
+    };
+    goLink(new Link({ href }), true, cb);
+  };
+  return /* @__PURE__ */ jsx(
+    StatefulSheetWrapper,
+    {
+      sheetType,
+      sheetProps: {
+        id: "audio.toc" /* toc */,
+        triggerRef,
+        heading: t("reader.tableOfContents.title"),
+        className: "",
+        isOpen,
+        onOpenChange: setOpen,
+        onClosePress: () => setOpen(false),
+        docker: docking.getDocker(),
+        resetFocus: tocEntryId,
+        focusWithinRef: treeRef
+      },
+      children: /* @__PURE__ */ jsx(
+        TocContent,
+        {
+          filterValue,
+          onFilterChange: setFilterValue,
+          displayedTocTree,
+          tocTree,
+          tocEntry: tocEntryId,
+          expandedKeys,
+          onExpandedChange: setExpandedKeys,
+          onSelectionChange: handleAction,
+          isRTL,
+          treeRef,
+          searchInputRef
+        }
+      )
+    }
+  );
+};
+var SvgSnooze = (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: "M380-334h200v-60H468l112-126v-54H380v60h114L380-386v52Zm-40.5 225.5q-65.5-28.5-114-77t-77-114Q120-365 120-440t28.5-140.5q28.5-65.5 77-114t114-77Q405-800 480-800t140.5 28.5q65.5 28.5 114 77t77 114Q840-515 840-440t-28.5 140.5q-28.5 65.5-77 114t-114 77Q555-80 480-80t-140.5-28.5ZM480-440ZM224-866l56 56-170 170-56-56 170-170Zm512 0 170 170-56 56-170-170 56-56ZM480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720q-117 0-198.5 81.5T200-440q0 117 81.5 198.5T480-160Z" }) });
+var snooze_default = SvgSnooze;
+
+// src/components/Audio/actions/SleepTimer/assets/styles/thorium-web.sleepTimer.module.css
+var thorium_web_sleepTimer_default = {
+  wrapper: "thorium_web_sleepTimer_wrapper",
+  button: "thorium_web_sleepTimer_button",
+  label: "thorium_web_sleepTimer_label",
+  listbox: "thorium_web_sleepTimer_listbox",
+  listboxItem: "thorium_web_sleepTimer_listboxItem",
+  durationField: "thorium_web_sleepTimer_durationField",
+  instruction: "thorium_web_sleepTimer_instruction",
+  inputs: "thorium_web_sleepTimer_inputs",
+  fieldGroup: "thorium_web_sleepTimer_fieldGroup",
+  fieldInput: "thorium_web_sleepTimer_fieldInput",
+  unitLabel: "thorium_web_sleepTimer_unitLabel",
+  remaining: "thorium_web_sleepTimer_remaining",
+  cancelButton: "thorium_web_sleepTimer_cancelButton",
+  startButton: "thorium_web_sleepTimer_startButton"
+};
+var StatefulAudioSleepTimerTrigger = ({ ref }) => {
+  const { t } = useI18n();
+  const remainingSeconds = useAppSelector((state) => state.player.sleepTimer.remainingSeconds);
+  const onTrackEnd = useAppSelector((state) => state.player.sleepTimer.onTrackEnd);
+  const onFragmentEnd = useAppSelector((state) => state.player.sleepTimer.onFragmentEnd);
+  const isTrackReady = useAppSelector((state) => state.player.isTrackReady);
+  const isStalled = useAppSelector((state) => state.player.isStalled);
+  const isDisabled = !isTrackReady || isStalled;
+  const dispatch = useAppDispatch();
+  const isActive = remainingSeconds !== null || onTrackEnd || onFragmentEnd;
+  const formatBadge = (seconds) => {
+    if (seconds < 60) return `${seconds}${t("audio.settings.sleepTimer.seconds")}`;
+    return `${Math.ceil(seconds / 60)}${t("audio.settings.sleepTimer.minutes")}`;
+  };
+  const sleepTimerLabel = (() => {
+    if (onTrackEnd) return t("reader.playback.preferences.sleepTimer.presets.endOfResource");
+    if (onFragmentEnd) return t("reader.playback.preferences.sleepTimer.presets.endOfFragment");
+    return formatBadge(remainingSeconds);
+  })();
+  return /* @__PURE__ */ jsxs(
+    StatefulActionIcon,
+    {
+      ref,
+      tooltipLabel: t("reader.playback.preferences.sleepTimer.descriptive"),
+      placement: "top",
+      onPress: () => dispatch(toggleActionOpen({ key: "audio.sleepTimer" /* sleepTimer */ })),
+      isDisabled,
+      className: thorium_web_sleepTimer_default.button,
+      children: [
+        /* @__PURE__ */ jsx(snooze_default, { "aria-hidden": "true", focusable: "false" }),
+        isActive && /* @__PURE__ */ jsx("span", { className: thorium_web_sleepTimer_default.label, "aria-hidden": "true", children: sleepTimerLabel })
+      ]
+    }
+  );
+};
+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 remainingSeconds = useAppSelector((state) => state.player.sleepTimer.remainingSeconds);
+  const onTrackEnd = useAppSelector((state) => state.player.sleepTimer.onTrackEnd);
+  const onFragmentEnd = useAppSelector((state) => state.player.sleepTimer.onFragmentEnd);
+  const playerStatus = useAppSelector((state) => state.player.status);
+  const dispatch = useAppDispatch();
+  const { t } = useI18n();
+  const formatRemaining = (seconds) => {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor(seconds % 3600 / 60);
+    const s = seconds % 60;
+    const mm = m.toString().padStart(2, "0");
+    const ss = s.toString().padStart(2, "0");
+    const min = t("audio.settings.sleepTimer.minutes");
+    const sec = t("audio.settings.sleepTimer.seconds");
+    if (h > 0) return `${h}${t("audio.settings.sleepTimer.hours")} ${mm}${min} ${ss}${sec}`;
+    return `${mm}${min} ${ss}${sec}`;
+  };
+  const { preferences } = useAudioPreferences();
+  const { pause } = useNavigator().media;
+  const config = preferences.settings.keys["sleepTimer" /* sleepTimer */];
+  const variant = config.variant;
+  useEffect(() => {
+    if (remainingSeconds === null) return;
+    if (remainingSeconds <= 0) {
+      pause();
+      dispatch(setSleepTimerRemainingSeconds(null));
+      return;
+    }
+    if (playerStatus !== "playing") return;
+    const id = setTimeout(() => {
+      dispatch(setSleepTimerRemainingSeconds(remainingSeconds - 1));
+    }, 1e3);
+    return () => clearTimeout(id);
+  }, [remainingSeconds, playerStatus, pause, dispatch]);
+  const handleCancel = useCallback(() => {
+    dispatch(setSleepTimerRemainingSeconds(null));
+    dispatch(setSleepTimerOnTrackEnd(false));
+    dispatch(setSleepTimerOnFragmentEnd(false));
+    dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: false }));
+  }, [dispatch]);
+  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]);
+  const handlePresetSelect = useCallback((value) => {
+    if (value === "endOfResource") {
+      dispatch(setSleepTimerOnTrackEnd(true));
+      dispatch(setSleepTimerOnFragmentEnd(false));
+      dispatch(setSleepTimerRemainingSeconds(null));
+    } else if (value === "endOfFragment") {
+      dispatch(setSleepTimerOnTrackEnd(false));
+      dispatch(setSleepTimerOnFragmentEnd(true));
+      dispatch(setSleepTimerRemainingSeconds(null));
+    } else {
+      dispatch(setSleepTimerOnTrackEnd(false));
+      dispatch(setSleepTimerOnFragmentEnd(false));
+      dispatch(setSleepTimerRemainingSeconds(Number(value) * 60));
+    }
+    dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: false }));
+  }, [dispatch]);
+  const docking = useDocking("audio.sleepTimer" /* sleepTimer */);
+  const setOpen = useCallback((open) => {
+    dispatch(setActionOpen({ key: "audio.sleepTimer" /* sleepTimer */, isOpen: open }));
+  }, [dispatch]);
+  const isActive = remainingSeconds !== null || onTrackEnd || onFragmentEnd;
+  const maxHours = (config.variant === "durationField" /* durationField */ ? config.maxHours : void 0) ?? 23;
+  const renderContent = () => {
+    if (variant === "presetList" /* presetList */ && config?.variant === "presetList" /* presetList */) {
+      const items = config.presets.map((preset) => {
+        if (preset === "endOfResource") {
+          return {
+            id: "endOfResource",
+            value: "endOfResource",
+            label: t("reader.playback.preferences.sleepTimer.presets.endOfResource")
+          };
+        } else if (preset === "endOfFragment") {
+          return {
+            id: "endOfFragment",
+            value: "endOfFragment",
+            label: t("reader.playback.preferences.sleepTimer.presets.endOfFragment")
+          };
+        } else {
+          return {
+            id: String(preset),
+            value: String(preset),
+            label: `${preset} ${t("audio.settings.sleepTimer.minutes")}`
+          };
+        }
+      });
+      const activeValue = onTrackEnd ? "endOfResource" : onFragmentEnd ? "endOfFragment" : remainingSeconds !== null ? String(remainingSeconds / 60) : "";
+      return /* @__PURE__ */ jsxs("div", { className: thorium_web_sleepTimer_default.durationField, children: [
+        /* @__PURE__ */ jsx(
+          ThRadioGroup,
+          {
+            "aria-label": t("reader.playback.preferences.sleepTimer.descriptive"),
+            value: activeValue,
+            onChange: handlePresetSelect,
+            items,
+            compounds: {
+              wrapper: { className: thorium_web_sleepTimer_default.listbox },
+              radio: { className: thorium_web_sleepTimer_default.listboxItem }
+            }
+          }
+        ),
+        isActive && /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: `${thorium_web_sleepTimer_default.startButton} ${thorium_web_sleepTimer_default.cancelButton}`,
+            onPress: handleCancel,
+            children: t("common.actions.cancel")
+          }
+        )
+      ] });
+    }
+    if (isActive && remainingSeconds !== null) {
+      return /* @__PURE__ */ jsxs("div", { className: thorium_web_sleepTimer_default.durationField, children: [
+        /* @__PURE__ */ jsx("p", { className: thorium_web_sleepTimer_default.remaining, children: t("audio.settings.sleepTimer.remaining", { remaining: formatRemaining(remainingSeconds) }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: thorium_web_sleepTimer_default.startButton,
+            onPress: handleCancel,
+            children: t("common.actions.cancel")
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: thorium_web_sleepTimer_default.durationField, children: [
+      /* @__PURE__ */ jsx("p", { className: thorium_web_sleepTimer_default.instruction, children: t("audio.settings.sleepTimer.instruction") }),
+      /* @__PURE__ */ jsxs("div", { className: thorium_web_sleepTimer_default.inputs, children: [
+        /* @__PURE__ */ jsx(
+          ThNumberField,
+          {
+            "aria-label": t("audio.settings.sleepTimer.hours"),
+            range: [0, maxHours],
+            step: 1,
+            value: hours,
+            onChange: setHours,
+            onInputChange: (raw) => setHours(parseInt(raw) || 0),
+            compounds: {
+              group: { className: thorium_web_sleepTimer_default.fieldGroup },
+              input: { className: thorium_web_sleepTimer_default.fieldInput }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: thorium_web_sleepTimer_default.unitLabel, "aria-hidden": "true", children: t("audio.settings.sleepTimer.hours") }),
+        /* @__PURE__ */ jsx(
+          ThNumberField,
+          {
+            "aria-label": t("audio.settings.sleepTimer.minutes"),
+            range: [0, 59],
+            step: 1,
+            value: minutes,
+            onChange: setMinutes,
+            onInputChange: (raw) => setMinutes(parseInt(raw) || 0),
+            compounds: {
+              group: { className: thorium_web_sleepTimer_default.fieldGroup },
+              input: { className: thorium_web_sleepTimer_default.fieldInput }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: thorium_web_sleepTimer_default.unitLabel, "aria-hidden": "true", children: t("audio.settings.sleepTimer.minutes") })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: thorium_web_sleepTimer_default.startButton,
+          isDisabled: hours === 0 && minutes === 0,
+          onPress: handleStart,
+          children: t("audio.settings.sleepTimer.start")
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsx(
+    StatefulSheetWrapper,
+    {
+      sheetType: docking.sheetType,
+      sheetProps: {
+        id: "audio.sleepTimer" /* sleepTimer */,
+        triggerRef,
+        heading: t("reader.playback.preferences.sleepTimer.descriptive"),
+        className: thorium_web_sleepTimer_default.wrapper,
+        placement,
+        isOpen,
+        onOpenChange: setOpen,
+        onClosePress: () => setOpen(false),
+        docker: docking.getDocker()
+      },
+      children: /* @__PURE__ */ jsx(FocusScope, { contain: true, children: renderContent() })
+    }
+  );
+};
+var SvgCast = (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: "M480-480Zm320 320H600q0-20-1.5-40t-4.5-40h206v-480H160v46q-20-3-40-4.5T80-680v-40q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160Zm-720 0v-120q50 0 85 35t35 85H80Zm200 0q0-83-58.5-141.5T80-360v-80q117 0 198.5 81.5T360-160h-80Zm160 0q0-75-28.5-140.5t-77-114q-48.5-48.5-114-77T80-520v-80q91 0 171 34.5T391-471q60 60 94.5 140T520-160h-80Z" }) });
+var cast_default = SvgCast;
+var SvgCastConnected = (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: "M720-320H575q-7-21-15.5-41.5T542-400h98v-160H413q-29-25-62.5-45T281-640h439v320ZM480-480ZM80-160v-120q50 0 85 35t35 85H80Zm200 0q0-83-58.5-141.5T80-360v-80q117 0 198.5 81.5T360-160h-80Zm160 0q0-75-28.5-140.5t-77-114q-48.5-48.5-114-77T80-520v-80q91 0 171 34.5T391-471q60 60 94.5 140T520-160h-80Zm360 0H600q0-20-1.5-40t-4.5-40h206v-480H160v46q-20-3-40-4.5T80-680v-40q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160Z" }) });
+var cast_connected_default = SvgCastConnected;
+var SvgCastWarning = (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: "M480-480ZM80-280q50 0 85 35t35 85H80v-120Zm0-160q117 0 198.5 81.5T360-160h-80q0-83-58.5-141.5T80-360v-80Zm0-160q91 0 171 34.5T391-471q60 60 94.5 140T520-160h-80q0-75-28.5-140.5t-77-114q-48.5-48.5-114-77T80-520v-80Zm720 440H600q0-20-1.5-40t-4.5-40h206v-212q22-7 42-16.5t38-22.5v251q0 33-23.5 56.5T800-160ZM80-680v-40q0-33 23.5-56.5T160-800h292q-6 19-9 39t-3 41H160v46q-20-3-40-4.5T80-680Zm498.5 101.5Q520-637 520-720t58.5-141.5Q637-920 720-920t141.5 58.5Q920-803 920-720t-58.5 141.5Q803-520 720-520t-141.5-58.5ZM720-600q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6Zm-20-80h40v-160h-40v160Z" }) });
+var cast_warning_default = SvgCastWarning;
+var StatefulAudioRemotePlaybackTrigger = ({ variant }) => {
+  const { t } = useI18n();
+  const { preferences } = useAudioPreferences();
+  const dispatch = useAppDispatch();
+  const remotePlaybackState = useAppSelector((state) => state.player.remotePlaybackState);
+  const [isAvailable, setIsAvailable] = useState(null);
+  const watchIdRef = useRef(void 0);
+  const { remotePlayback } = useNavigator().media;
+  useEffect(() => {
+    if (!remotePlayback) return;
+    remotePlayback.watchAvailability((available) => {
+      setIsAvailable(available);
+    }).then((id) => {
+      watchIdRef.current = id;
+    }).catch(() => {
+      setIsAvailable(true);
+    });
+    return () => {
+      if (watchIdRef.current !== void 0) {
+        remotePlayback.cancelWatchAvailability(watchIdRef.current);
+      }
+    };
+  }, [remotePlayback]);
+  const handlePress = useCallback(async () => {
+    if (!remotePlayback) return;
+    try {
+      await remotePlayback.prompt();
+    } catch (err) {
+      if (err instanceof DOMException && (err.name === "AbortError" || err.name === "NotAllowedError")) return;
+      dispatch(setRemotePlaybackState("error"));
+    }
+  }, [remotePlayback, dispatch]);
+  if (preferences.contentProtection?.disableRemotePlayback) return null;
+  if (!remotePlayback || isAvailable === false) return null;
+  const isConnected = remotePlaybackState === "connected" || remotePlaybackState === "connecting";
+  const isError = remotePlaybackState === "error";
+  const Icon = isError ? cast_warning_default : isConnected ? cast_connected_default : cast_default;
+  const token = preferences.actions.secondary.keys["audio.remotePlayback" /* remotePlayback */];
+  const label = isConnected ? t("audio.remotePlayback.connected") : t("audio.remotePlayback.trigger");
+  return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
+    StatefulOverflowMenuItem,
+    {
+      label,
+      SVGIcon: Icon,
+      shortcut: token?.shortcut ?? null,
+      id: "audio.remotePlayback" /* remotePlayback */,
+      isDisabled: isError,
+      onAction: handlePress
+    }
+  ) : /* @__PURE__ */ jsx(
+    StatefulActionIcon,
+    {
+      visibility: token?.visibility,
+      tooltipLabel: label,
+      placement: "bottom",
+      "aria-label": label,
+      isDisabled: isError,
+      onPress: handlePress,
+      children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", focusable: "false" })
+    }
+  ) });
+};
+
+// src/components/Plugins/helpers/createAudioDefaultPlugin.ts
+var createAudioDefaultPlugin = () => {
+  return {
+    id: "audio-core",
+    name: "Audio Core Components",
+    description: "Default components for Thorium Web Audio StatefulReader",
+    version: "1.3.0",
+    components: {
+      actions: {
+        ["settings" /* settings */]: {
+          Trigger: StatefulSettingsTrigger,
+          Target: StatefulAudioSettingsContainer
+        },
+        ["toc" /* toc */]: {
+          Trigger: StatefulTocTrigger,
+          Target: StatefulTocContainer
+        },
+        ["fullscreen" /* fullscreen */]: {
+          Trigger: StatefulFullscreenTrigger
+        },
+        ["audio.remotePlayback" /* remotePlayback */]: {
+          Trigger: StatefulAudioRemotePlaybackTrigger
+        }
+      },
+      primaryAudioActions: {
+        ["audio.volume" /* volume */]: { Trigger: StatefulAudioVolumeTrigger, Target: StatefulAudioVolumeContainer },
+        ["audio.playbackRate" /* playbackRate */]: { Trigger: StatefulAudioPlaybackRateTrigger, Target: StatefulAudioPlaybackRateContainer },
+        ["audio.toc" /* toc */]: { Trigger: StatefulAudioTocTrigger, Target: StatefulAudioTocContainer },
+        ["audio.sleepTimer" /* sleepTimer */]: { Trigger: StatefulAudioSleepTimerTrigger, Target: StatefulAudioSleepTimerContainer }
+      },
+      settings: {
+        ["theme" /* theme */]: {
+          Comp: StatefulTheme
+        },
+        ["skipInterval" /* skipInterval */]: {
+          Comp: StatefulAudioSkipInterval
+        },
+        ["skipBackwardInterval" /* skipBackwardInterval */]: {
+          Comp: StatefulAudioSkipBackwardInterval
+        },
+        ["skipForwardInterval" /* skipForwardInterval */]: {
+          Comp: StatefulAudioSkipForwardInterval
+        },
+        ["autoPlay" /* autoPlay */]: {
+          Comp: StatefulAudioAutoPlay
+        }
+      }
+    }
+  };
+};
+var StatefulPreferencesProvider = ({
+  children,
+  initialPreferences = defaultPreferences
+}) => {
+  const store = useStore();
+  const adapter = useMemo(() => {
+    return new ThReduxPreferencesAdapter(store, initialPreferences);
+  }, [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
+}) => {
+  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);
@@ -4206,6 +5616,13 @@ var usePublication = ({
                 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);
           }
@@ -4227,12 +5644,6 @@ var usePublication = ({
       setIsFXL(fxl);
       dispatch(setFXL(fxl));
     }
-    const resolvedLang = resolveFontLanguage(
-      publication.metadata.languages?.[0],
-      publication.metadata.effectiveReadingProgression
-    );
-    setFontLanguageState(resolvedLang);
-    dispatch(setFontLanguage(resolvedLang));
     const displayTransformability = publication.metadata.accessibility?.feature?.some(
       (feature) => feature && feature.value === Feature.DISPLAY_TRANSFORMABILITY.value
     ) || false;
@@ -4251,7 +5662,7 @@ var usePublication = ({
       };
       fetchPositions();
     }
-  }, [publication, profile, resolveFontLanguage, dispatch]);
+  }, [publication, profile, dispatch]);
   useEffect(() => {
     if (error) {
       onError(error);
@@ -4267,7 +5678,6 @@ var usePublication = ({
     profile,
     isRTL,
     isFXL,
-    fontLanguage,
     hasDisplayTransformability
   };
 };
@@ -4310,29 +5720,36 @@ var thorium_web_reader_app_default = {
   srOnly: "thorium_web_reader_app_srOnly"
 };
 var useResizablePanel = (panel) => {
-  const { preferences } = usePreferences();
-  const defaultWidth = preferences.theming.layout.defaults.dockingWidth;
+  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(
-    panel.actionKey ? preferences.actions.keys[panel.actionKey].docked || null : null
+    safePanel.actionKey ? preferences.actionsKeys[safePanel.actionKey]?.docked || null : null
   );
   const actionsMap = useAppSelector((state) => state.actions.keys);
   const actions = useActions(actionsMap);
-  const previouslyCollapsed = usePrevious(panel.collapsed);
-  const previousWidth = actions.getDockedWidth(panel.actionKey) || null;
+  const previouslyCollapsed = usePrevious(safePanel.collapsed);
+  const previousWidth = actions.getDockedWidth(safePanel.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 panel.active && actions.isOpen(panel.actionKey);
+    return safePanel.active && actions.isOpen(safePanel.actionKey);
   };
   const isCollapsed = () => {
-    return panel.collapsed;
+    return safePanel.collapsed;
   };
   const forceExpand = () => {
-    return !!(isPopulated() && previouslyCollapsed && !panel.collapsed);
+    return !!(isPopulated() && previouslyCollapsed && !safePanel.collapsed);
   };
   const currentKey = () => {
-    return panel.actionKey;
+    return safePanel.actionKey;
   };
   const isResizable = () => {
     return isPopulated() ? Math.round(width) > Math.round(minWidth) && Math.round(width) < Math.round(maxWidth) : false;
@@ -4360,8 +5777,8 @@ var useResizablePanel = (panel) => {
     return current;
   }, [minWidth, maxWidth]);
   useEffect(() => {
-    setPref(panel.actionKey ? preferences.actions.keys[panel.actionKey].docked || null : null);
-  }, [panel.actionKey, preferences]);
+    setPref(safePanel.actionKey ? preferences.actionsKeys[safePanel.actionKey]?.docked || null : null);
+  }, [safePanel.actionKey, preferences]);
   return {
     currentKey,
     isPopulated,
@@ -4375,6 +5792,31 @@ var useResizablePanel = (panel) => {
     getCurrentPxWidth
   };
 };
+var useDockCleanup = (profile) => {
+  const dispatch = useAppDispatch();
+  const dock = useAppSelector((state) => profile ? state.actions.dock[profile] : void 0);
+  const startActionKey = dock?.["dockingStart" /* start */]?.actionKey;
+  const endActionKey = dock?.["dockingEnd" /* end */]?.actionKey;
+  const startStatus = useActionComponentStatus({ actionKey: startActionKey || "" });
+  const endStatus = useActionComponentStatus({ actionKey: endActionKey || "" });
+  useEffect(() => {
+    if (!profile || !dock) return;
+    if (startActionKey && !startStatus.isComponentRegistered) {
+      dispatch(dockAction({
+        key: startActionKey,
+        dockingKey: "dockingTransient" /* transient */,
+        profile
+      }));
+    }
+    if (endActionKey && !endStatus.isComponentRegistered) {
+      dispatch(dockAction({
+        key: endActionKey,
+        dockingKey: "dockingTransient" /* transient */,
+        profile
+      }));
+    }
+  }, [profile, dock, startActionKey, endActionKey, startStatus.isComponentRegistered, endStatus.isComponentRegistered, dispatch]);
+};
 var DockHandle = ({
   flow,
   isResizable,
@@ -4397,7 +5839,7 @@ var DockHandle = ({
       className: thorium_web_docking_default.resizeHandle,
       disabled: !isResizable,
       tabIndex: isPopulated ? 0 : -1,
-      children: isResizable && hasDragIndicator && /* @__PURE__ */ jsx("div", { className: classNames3(thorium_web_docking_default.resizeHandleGrab, classFromFlow()) })
+      children: isResizable && hasDragIndicator && /* @__PURE__ */ jsx("div", { className: classNames4(thorium_web_docking_default.resizeHandleGrab, classFromFlow()) })
     }
   ) });
 };
@@ -4409,7 +5851,8 @@ var DockPanel = ({
   isPopulated,
   isCollapsed,
   forceExpand,
-  hasDragIndicator
+  hasDragIndicator,
+  profile
 }) => {
   const { t } = useI18n();
   const panelRef = useRef(null);
@@ -4437,21 +5880,21 @@ var DockPanel = ({
   const collapsePanel = useCallback(() => {
     if (panelRef.current) {
       panelRef.current.collapse();
-      dispatch(collapseDockPanel(flow));
+      dispatch(collapseDockPanel({ slot: flow, profile }));
     }
-  }, [dispatch, flow]);
+  }, [dispatch, flow, profile]);
   const expandPanel = useCallback(() => {
     if (panelRef.current) {
       panelRef.current.expand();
-      dispatch(expandDockPanel(flow));
+      dispatch(expandDockPanel({ slot: flow, profile }));
     }
-  }, [dispatch, flow]);
+  }, [dispatch, flow, profile]);
   useEffect(() => {
-    dispatch(activateDockPanel(flow));
+    dispatch(activateDockPanel({ slot: flow, profile }));
     return () => {
-      dispatch(deactivateDockPanel(flow));
+      dispatch(deactivateDockPanel({ slot: flow, profile }));
     };
-  }, [dispatch, flow]);
+  }, [dispatch, flow, profile]);
   useEffect(() => {
     isPopulated || forceExpand ? expandPanel() : collapsePanel();
   }, [isPopulated, forceExpand, collapsePanel, expandPanel]);
@@ -4480,7 +5923,8 @@ var DockPanel = ({
         onExpand: expandPanel,
         onResize: (size) => size !== 0 && dispatch(setDockPanelWidth({
           key: flow,
-          width: sizes.getCurrentPxWidth(size)
+          width: sizes.getCurrentPxWidth(size),
+          profile
         })),
         inert: isCollapsed,
         children: /* @__PURE__ */ jsx(
@@ -4488,7 +5932,7 @@ var DockPanel = ({
           {
             id: flow,
             "aria-label": makeDockLabel(),
-            className: classNames3(thorium_web_docking_default.panelContainer, dockClassName)
+            className: classNames4(thorium_web_docking_default.panelContainer, dockClassName)
           }
         )
       }
@@ -4507,9 +5951,11 @@ var DockPanel = ({
 var StatefulDockingWrapper = ({
   children
 }) => {
-  const { preferences } = usePreferences();
-  const dockingStart = useAppSelector((state) => state.actions.dock["dockingStart" /* start */]);
-  const dockingEnd = useAppSelector((state) => state.actions.dock["dockingEnd" /* end */]);
+  const preferences = useActionsPreferences();
+  const profile = useAppSelector((state) => state.reader.profile);
+  useDockCleanup(profile);
+  const dockingStart = useAppSelector((state) => profile && state.actions.dock[profile] ? state.actions.dock[profile]["dockingStart" /* start */] : void 0);
+  const dockingEnd = useAppSelector((state) => profile && state.actions.dock[profile] ? state.actions.dock[profile]["dockingEnd" /* end */] : void 0);
   const startPanel = useResizablePanel(dockingStart);
   const endPanel = useResizablePanel(dockingEnd);
   const breakpoint = useAppSelector((state) => state.theming.breakpoint);
@@ -4524,7 +5970,7 @@ var StatefulDockingWrapper = ({
     });
     const dockConfig = breakpoint && dockingMap2[breakpoint] || "both" /* both */;
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(PanelGroup, { direction: "horizontal", children: [
-      (dockConfig === "both" /* both */ || dockConfig === "start" /* start */) && /* @__PURE__ */ jsx(
+      (dockConfig === "both" /* both */ || dockConfig === "start" /* start */) && profile && /* @__PURE__ */ jsx(
         DockPanel,
         {
           actionKey: startPanel.currentKey(),
@@ -4539,11 +5985,12 @@ var StatefulDockingWrapper = ({
           isPopulated: startPanel.isPopulated(),
           isCollapsed: startPanel.isCollapsed(),
           forceExpand: startPanel.forceExpand(),
-          hasDragIndicator: startPanel.hasDragIndicator()
+          hasDragIndicator: startPanel.hasDragIndicator(),
+          profile
         }
       ),
       /* @__PURE__ */ jsx(Panel, { id: "main-panel", order: 2, children }),
-      (dockConfig === "both" /* both */ || dockConfig === "end" /* end */) && /* @__PURE__ */ jsx(
+      (dockConfig === "both" /* both */ || dockConfig === "end" /* end */) && profile && /* @__PURE__ */ jsx(
         DockPanel,
         {
           actionKey: endPanel.currentKey(),
@@ -4558,7 +6005,8 @@ var StatefulDockingWrapper = ({
           isPopulated: endPanel.isPopulated(),
           isCollapsed: endPanel.isCollapsed(),
           forceExpand: endPanel.forceExpand(),
-          hasDragIndicator: endPanel.hasDragIndicator()
+          hasDragIndicator: endPanel.hasDragIndicator(),
+          profile
         }
       )
     ] }) });
@@ -4580,18 +6028,19 @@ var StatefulBackLink = ({
   className
 }) => {
   const { t } = useI18n();
-  const { preferences } = usePreferences();
-  const direction = useAppSelector((state) => state.reader.direction);
+  const { direction, theming } = useSharedPreferences();
+  const backLinkPref = theming.header?.backLink;
+  const tooltipDelay = theming.icon.tooltipDelay;
   const isRTL = direction === "rtl" /* rtl */;
-  const variant = preferences.theming.header?.backLink?.variant || "arrow" /* arrow */;
-  const href = preferences.theming.header?.backLink?.href;
-  const content = preferences.theming.header?.backLink?.content;
-  const visibility = preferences.theming.header?.backLink?.visibility || "partially";
-  const backLinkClassName = classNames3(thorium_web_backlink_default.link, visibility === "always" ? thorium_web_button_default.alwaysVisible : thorium_web_button_default.partiallyVisible);
+  const variant = backLinkPref?.variant || "arrow" /* arrow */;
+  const href = backLinkPref?.href;
+  const content = backLinkPref?.content;
+  const visibility = backLinkPref?.visibility || "partially";
+  const backLinkClassName = classNames4(thorium_web_backlink_default.link, visibility === "always" ? thorium_web_button_default.alwaysVisible : thorium_web_button_default.partiallyVisible);
   const compounds = {
     tooltipTrigger: {
-      delay: preferences.theming.arrow.tooltipDelay,
-      closeDelay: preferences.theming.arrow.tooltipDelay
+      delay: tooltipDelay,
+      closeDelay: tooltipDelay
     },
     tooltip: {
       className: thorium_web_button_default.tooltip
@@ -4618,917 +6067,136 @@ var StatefulBackLink = ({
           className: backLinkClassName,
           href,
           "aria-label": t("reader.app.header.backLink.trigger"),
-          compounds
-        }
-      ) });
-    case "library" /* library */:
-      return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
-        ThLibrary,
-        {
-          className: backLinkClassName,
-          href,
-          "aria-label": t("reader.app.header.backLink.trigger"),
-          compounds
-        }
-      ) });
-    default:
-      if (!content) return null;
-      let contentNode = null;
-      switch (content.type) {
-        case "img":
-          contentNode = /* @__PURE__ */ jsx("img", { alt: content.alt ?? "", src: content.src });
-          break;
-        case "svg":
-          const parser = new DOMParser();
-          const doc = parser.parseFromString(content.content, "image/svg+xml");
-          const svgElement = doc.documentElement;
-          const attributes = {};
-          for (const { name, value } of Array.from(svgElement.attributes)) {
-            attributes[name] = value;
-          }
-          contentNode = React18.createElement("svg", {
-            ...attributes,
-            "aria-hidden": "true",
-            focusable: "false",
-            xmlns: "http://www.w3.org/2000/svg",
-            dangerouslySetInnerHTML: {
-              __html: svgElement.innerHTML
-            }
-          });
-          break;
-      }
-      return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
-        ThLink,
-        {
-          className: backLinkClassName,
-          href,
-          "aria-label": t("reader.app.header.backLink.trigger"),
-          compounds,
-          children: contentNode
-        }
-      ) });
-  }
-};
-var StatefulReaderRunningHead = ({
-  formatPref
-}) => {
-  const { t } = useI18n();
-  const unstableTimeline = useAppSelector((state) => state.publication.unstableTimeline);
-  const isImmersive = useAppSelector((state) => state.reader.isImmersive);
-  const isHovering = useAppSelector((state) => state.reader.isHovering);
-  const isFullscreen = useAppSelector((state) => state.reader.isFullscreen);
-  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
-  const fallbackFormat = useMemo(() => ({
-    variants: "title" /* title */,
-    displayInImmersive: true,
-    displayInFullscreen: true
-  }), []);
-  const breakpointsMap = useMemo(() => {
-    return makeBreakpointsMap({
-      defaultValue: formatPref?.default || fallbackFormat,
-      fromEnum: ThRunningHeadFormat,
-      pref: formatPref?.breakpoints,
-      validateKey: "variants"
-    });
-  }, [formatPref, fallbackFormat]);
-  const currentPrefs = useMemo(() => {
-    if (!breakpoint) return formatPref?.default || fallbackFormat;
-    return breakpointsMap[breakpoint] || formatPref?.default || fallbackFormat;
-  }, [breakpoint, breakpointsMap, formatPref?.default, fallbackFormat]);
-  const { variants, displayInImmersive, displayInFullscreen } = currentPrefs;
-  const displayFormat = useMemo(() => {
-    if (!variants) return "title" /* title */;
-    if (isImmersive && displayInImmersive === false && !isHovering) {
-      return "none" /* none */;
-    }
-    if (isImmersive && isFullscreen && displayInFullscreen === false && !isHovering) {
-      return "none" /* none */;
-    }
-    return variants;
-  }, [variants, isImmersive, displayInImmersive, isHovering, isFullscreen, displayInFullscreen]);
-  const runningHead = useMemo(() => {
-    if (displayFormat === "title" /* title */) {
-      return unstableTimeline?.title || "";
-    } else if (displayFormat === "chapter" /* chapter */) {
-      return unstableTimeline?.progression?.currentChapter || unstableTimeline?.title || "";
-    }
-    return "";
-  }, [displayFormat, unstableTimeline]);
-  if (!runningHead || displayFormat === "none" /* none */) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    ThRunningHead,
-    {
-      label: runningHead,
-      "aria-label": t("reader.app.header.runningHead")
-    }
-  ) });
-};
-var StatefulReaderHeader = ({
-  actionKeys,
-  actionsOrder,
-  layout,
-  runningHeadFormatPref
-}) => {
-  const headerRef = useRef(null);
-  const { preferences } = usePreferences();
-  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 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 dispatch = useAppDispatch();
-  const { focusWithinProps } = useFocusWithin({
-    onFocusWithin() {
-      dispatch(setHovering(true));
-    },
-    onBlurWithin() {
-      if (actions.everyOpenDocked()) {
-        dispatch(setHovering(false));
-      }
-    }
-  });
-  const setHover = () => {
-    if (!hasScrollAffordance && actions.everyOpenDocked()) {
-      dispatch(setHovering(true));
-    }
-  };
-  const removeHover = () => {
-    if (!hasScrollAffordance && actions.everyOpenDocked()) {
-      dispatch(setHovering(false));
-    }
-  };
-  const listActionItems = useCallback(() => {
-    const actionsItems = [];
-    if (actionsComponentsMap && Object.keys(actionsComponentsMap).length > 0) {
-      actionKeys.forEach((key) => {
-        if (actionsComponentsMap[key]) {
-          actionsItems.push({
-            Trigger: actionsComponentsMap[key].Trigger,
-            Target: actionsComponentsMap[key].Target,
-            key
-          });
-        } else {
-          console.warn(`Action key "${key}" not found in the plugin registry while present in preferences.`);
-        }
-      });
-    }
-    return actionsItems.filter((item) => {
-      if (item.key === "jumpToPosition" /* jumpToPosition */) {
-        return isPositionsListValid(positionsList);
-      }
-      if (item.key === "fullscreen" /* fullscreen */) {
-        return document.fullscreenEnabled && !isIOSish();
-      }
-      return true;
-    });
-  }, [actionKeys, actionsComponentsMap, positionsList]);
-  useEffect(() => {
-    if (isImmersive) {
-      const focusElement = document.activeElement;
-      if (focusElement && headerRef.current?.contains(focusElement)) {
-        focusElement.blur();
-      }
-    }
-  }, [isImmersive]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ThInteractiveOverlay,
-      {
-        className: classNames3(thorium_web_reader_app_default.barOverlay, thorium_web_reader_app_default.headerOverlay),
-        isActive: layout === "layered-ui" /* layered */ && isImmersive && !isHovering,
-        onMouseEnter: setHover,
-        onMouseLeave: removeHover
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      ThHeader,
-      {
-        ref: headerRef,
-        className: classNames3(thorium_web_reader_app_default.topBar, thorium_web_reader_header_default.header),
-        "aria-label": t("reader.app.header.label"),
-        onMouseEnter: setHover,
-        onMouseLeave: removeHover,
-        ...focusWithinProps,
-        children: [
-          preferences.theming.header?.backLink && /* @__PURE__ */ jsx(StatefulBackLink, { className: thorium_web_reader_header_default.backlinkWrapper }),
-          /* @__PURE__ */ jsx(StatefulReaderRunningHead, { formatPref: runningHeadFormatPref }),
-          /* @__PURE__ */ jsx(
-            StatefulCollapsibleActionsBar,
-            {
-              id: "reader-header-overflowMenu",
-              items: listActionItems(),
-              prefs: {
-                ...preferences.actions,
-                displayOrder: actionsOrder
-              },
-              className: thorium_web_reader_header_default.actionsWrapper,
-              "aria-label": t("reader.app.header.actions"),
-              overflowMenuClassName: !isScroll || preferences.affordances.scroll.hintInImmersive ? thorium_web_overflow_default.hint : void 0
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-
-// src/components/assets/styles/thorium-web.reader.pagination.module.css
-var thorium_web_reader_pagination_default = {
-  wrapper: "thorium_web_reader_pagination_wrapper",
-  listItem: "thorium_web_reader_pagination_listItem",
-  previousButton: "thorium_web_reader_pagination_previousButton",
-  progression: "thorium_web_reader_pagination_progression",
-  nextButton: "thorium_web_reader_pagination_nextButton",
-  label: "thorium_web_reader_pagination_label"
-};
-
-// src/components/assets/styles/thorium-web.reader.progression.module.css
-var thorium_web_reader_progression_default = {
-  wrapper: "thorium_web_reader_progression_wrapper"
-};
-var StatefulReaderProgression = ({
-  className,
-  formatPref,
-  fallbackVariant
-}) => {
-  const { t } = useI18n();
-  const unstableTimeline = useAppSelector((state) => state.publication.unstableTimeline);
-  const isImmersive = useAppSelector((state) => state.reader.isImmersive);
-  const isFullscreen = useAppSelector((state) => state.reader.isFullscreen);
-  const isHovering = useAppSelector((state) => state.reader.isHovering);
-  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
-  const [displayText, setDisplayText] = useState("");
-  const fallbackFormat = useMemo(() => {
-    return {
-      variants: fallbackVariant,
-      displayInImmersive: true,
-      displayInFullscreen: true
-    };
-  }, [fallbackVariant]);
-  const breakpointsMap = useMemo(() => {
-    return makeBreakpointsMap({
-      defaultValue: formatPref?.default || fallbackFormat,
-      fromEnum: ThProgressionFormat,
-      pref: formatPref?.breakpoints,
-      validateKey: "variants"
-    });
-  }, [formatPref, fallbackFormat]);
-  const currentPrefs = useMemo(() => {
-    if (!breakpoint) return formatPref?.default || fallbackFormat;
-    return breakpointsMap[breakpoint] || formatPref?.default || fallbackFormat;
-  }, [breakpoint, breakpointsMap, formatPref?.default, fallbackFormat]);
-  const { variants, displayInImmersive, displayInFullscreen } = currentPrefs;
-  const displayFormat = useMemo(() => {
-    if (!variants) return fallbackFormat.variants;
-    if (isImmersive && displayInImmersive === false && !isHovering) {
-      return "none" /* none */;
-    }
-    if (isImmersive && isFullscreen && displayInFullscreen === false && !isHovering) {
-      return "none" /* none */;
-    }
-    if (Array.isArray(variants)) {
-      return getBestMatchingProgressionFormat(variants, unstableTimeline?.progression) || fallbackFormat.variants;
-    }
-    return variants;
-  }, [variants, unstableTimeline?.progression, fallbackFormat, isImmersive, isHovering, isFullscreen, displayInImmersive, displayInFullscreen]);
-  useEffect(() => {
-    if (displayFormat === "none" /* none */ || !unstableTimeline?.progression) {
-      setDisplayText("");
-      return;
-    }
-    const {
-      currentPositions = [],
-      totalPositions,
-      relativeProgression,
-      totalProgression,
-      currentChapter,
-      positionsLeft,
-      totalItems,
-      currentIndex
-    } = unstableTimeline.progression;
-    let text = "";
-    const formatPositions = (positions) => {
-      if (positions.length === 2) {
-        return positions.join("\u2013");
-      }
-      return positions[0]?.toString() || "";
-    };
-    switch (displayFormat) {
-      case "positions" /* positions */:
-        if (currentPositions.length > 0) {
-          text = formatPositions(currentPositions);
-        }
-        break;
-      case "positionsOfTotal" /* positionsOfTotal */:
-        if (currentPositions.length > 0 && totalPositions) {
-          text = t("reader.progression.xOfY.compact", {
-            x: formatPositions(currentPositions),
-            y: totalPositions
-          });
-        }
-        break;
-      case "positionsPercentOfTotal" /* positionsPercentOfTotal */:
-        if (currentPositions.length > 0 && totalPositions) {
-          const percentage = Math.round((totalProgression || 0) * 100);
-          text = t("reader.progression.xOfY.descriptive", {
-            x: formatPositions(currentPositions),
-            y: totalPositions,
-            z: `${percentage}%`
-          });
-        }
-        break;
-      case "positionsLeft" /* positionsLeft */:
-        if (positionsLeft !== void 0) {
-          text = t(`reader.progression.positionsLeftInChapter.descriptive`, {
-            count: positionsLeft
-          });
-        }
-        break;
-      case "overallProgression" /* overallProgression */:
-        if (totalProgression !== void 0) {
-          const percentage = Math.round(totalProgression * 100);
-          text = `${percentage}%`;
-        }
-        break;
-      case "resourceProgression" /* resourceProgression */:
-        if (relativeProgression !== void 0) {
-          const percentage = Math.round(relativeProgression * 100);
-          text = `${percentage}%`;
+          compounds
         }
-        break;
-      case "progressionOfResource" /* progressionOfResource */:
-        if (relativeProgression !== void 0) {
-          const percentage = Math.round(relativeProgression * 100);
-          text = t("reader.progression.xOfY.compact", {
-            x: `${percentage}%`,
-            y: currentChapter || t("reader.app.progression.referenceFallback")
-          });
+      ) });
+    case "library" /* library */:
+      return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+        ThLibrary,
+        {
+          className: backLinkClassName,
+          href,
+          "aria-label": t("reader.app.header.backLink.trigger"),
+          compounds
         }
-        break;
-      case "readingOrderIndex" /* readingOrderIndex */:
-        if (currentIndex !== void 0 && totalItems !== void 0) {
-          text = t("reader.progression.xOfY.compact", {
-            x: currentIndex,
-            y: totalItems
+      ) });
+    default:
+      if (!content) return null;
+      let contentNode = null;
+      switch (content.type) {
+        case "img":
+          contentNode = /* @__PURE__ */ jsx("img", { alt: content.alt ?? "", src: content.src });
+          break;
+        case "svg":
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(content.content, "image/svg+xml");
+          const svgElement = doc.documentElement;
+          const attributes = {};
+          for (const { name, value } of Array.from(svgElement.attributes)) {
+            attributes[name] = value;
+          }
+          contentNode = React24.createElement("svg", {
+            ...attributes,
+            "aria-hidden": "true",
+            focusable: "false",
+            xmlns: "http://www.w3.org/2000/svg",
+            dangerouslySetInnerHTML: {
+              __html: svgElement.innerHTML
+            }
           });
-        }
-        break;
-    }
-    setDisplayText(text);
-  }, [displayFormat, unstableTimeline?.progression, t]);
-  if (!displayText || displayFormat === "none" /* none */) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    ThProgression,
-    {
-      id: "current-progression",
-      className: classNames3(thorium_web_reader_progression_default.wrapper, className),
-      "aria-label": t("reader.app.progression.wrapper"),
-      children: displayText
-    }
-  );
-};
-var StatefulReaderPagination = ({
-  ref,
-  links,
-  compounds,
-  children,
-  ...props
-}) => {
-  const previousButtonRef = useRef(null);
-  const nextButtonRef = useRef(null);
-  const updatedCompounds = {
-    ...compounds,
-    previousButton: {
-      ...compounds?.previousButton,
-      ref: previousButtonRef,
-      onKeyDown: (e) => {
-        if (e.key === "Escape") {
-          previousButtonRef.current?.blur();
-        }
+          break;
       }
-    },
-    nextButton: {
-      ...compounds?.nextButton,
-      ref: nextButtonRef,
-      onKeyDown: (e) => {
-        if (e.key === "Escape") {
-          nextButtonRef.current?.blur();
+      return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+        ThLink,
+        {
+          className: backLinkClassName,
+          href,
+          "aria-label": t("reader.app.header.backLink.trigger"),
+          compounds,
+          children: contentNode
         }
-      }
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    ThPagination,
-    {
-      ref,
-      className: thorium_web_reader_pagination_default.wrapper,
-      links,
-      compounds: updatedCompounds,
-      ...props,
-      children
-    }
-  );
+      ) });
+  }
 };
-var StatefulReaderFooter = ({
-  layout,
-  progressionFormatPref,
-  progressionFormatFallback
-}) => {
+var useReaderHeaderBase = (actionKeys) => {
+  const headerRef = useRef(null);
   const { t } = useI18n();
-  const footerRef = useRef(null);
-  const readerProfile = useAppSelector((state) => state.reader.profile);
+  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 isImmersive = useAppSelector((state) => state.reader.isImmersive);
   const isHovering = useAppSelector((state) => state.reader.isHovering);
   const hasScrollAffordance = useAppSelector((state) => state.reader.hasScrollAffordance);
-  const scroll = useAppSelector((state) => state.settings.scroll);
-  const isFXL = useAppSelector((state) => state.publication.isFXL);
-  const isScroll = scroll && !isFXL;
-  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
-  const reducedMotion = useAppSelector((state) => state.theming.prefersReducedMotion);
-  const timeline = useAppSelector((state) => state.publication.unstableTimeline);
+  const positionsList = useAppSelector((state) => state.publication.positionsList);
+  const actions = useActions({ ...actionsMap, ...overflowMap });
   const dispatch = useAppDispatch();
   const { focusWithinProps } = useFocusWithin({
     onFocusWithin() {
       dispatch(setHovering(true));
     },
     onBlurWithin() {
-      dispatch(setHovering(false));
+      if (actions.everyOpenDocked()) {
+        dispatch(setHovering(false));
+      }
     }
   });
   const setHover = () => {
-    if (!hasScrollAffordance) {
+    if (!hasScrollAffordance && actions.everyOpenDocked()) {
       dispatch(setHovering(true));
     }
   };
   const removeHover = () => {
-    if (!hasScrollAffordance) {
+    if (!hasScrollAffordance && actions.everyOpenDocked()) {
       dispatch(setHovering(false));
     }
   };
-  const { previousLocator, nextLocator, go } = useNavigator();
-  const updateLinks = useCallback(() => {
-    const links = {
-      previous: void 0,
-      next: void 0
-    };
-    const previous = previousLocator();
-    const next = nextLocator();
-    if (previous) {
-      links.previous = {
-        node: breakpoint !== "compact" /* compact */ && breakpoint !== "medium" /* medium */ ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: thorium_web_reader_app_default.srOnly, children: t(isFXL ? "reader.actions.goToPreviousPage.descriptive" : "reader.actions.goToPreviousChapter.descriptive") }),
-          /* @__PURE__ */ jsx("span", { className: thorium_web_reader_pagination_default.label, children: timeline?.previousItem?.title || previous.title || t(isFXL ? "reader.actions.goToPreviousPage.compact" : "reader.actions.goToPreviousChapter.compact") })
-        ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: thorium_web_reader_pagination_default.label, children: t(isFXL ? "reader.actions.goToPreviousPage.compact" : "reader.actions.goToPreviousChapter.compact") }) }),
-        onPress: () => go(previous, !reducedMotion, () => {
-        })
-      };
-    }
-    if (next) {
-      links.next = {
-        node: breakpoint !== "compact" /* compact */ && breakpoint !== "medium" /* medium */ ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: thorium_web_reader_app_default.srOnly, children: t(isFXL ? "reader.actions.goToNextPage.descriptive" : "reader.actions.goToNextChapter.descriptive") }),
-          /* @__PURE__ */ jsx("span", { className: thorium_web_reader_pagination_default.label, children: timeline?.nextItem?.title || next.title || t(isFXL ? "reader.actions.goToNextPage.compact" : "reader.actions.goToNextChapter.compact") })
-        ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: thorium_web_reader_pagination_default.label, children: t(isFXL ? "reader.actions.goToNextPage.compact" : "reader.actions.goToNextChapter.compact") }) }),
-        onPress: () => go(next, !reducedMotion, () => {
-        })
-      };
+  const listActionItems = useCallback(() => {
+    const actionsItems = [];
+    if (actionsComponentsMap && Object.keys(actionsComponentsMap).length > 0) {
+      actionKeys.forEach((key) => {
+        if (actionsComponentsMap[key]) {
+          actionsItems.push({
+            Trigger: actionsComponentsMap[key].Trigger,
+            Target: actionsComponentsMap[key].Target,
+            key
+          });
+        } else {
+          console.warn(`Action key "${key}" not found in the plugin registry while present in preferences.`);
+        }
+      });
     }
-    return links;
-  }, [go, previousLocator, nextLocator, t, timeline, breakpoint, reducedMotion, isFXL]);
-  useEffect(() => {
-    updateLinks();
-  }, [timeline, updateLinks]);
+    return actionsItems.filter((item) => {
+      if (item.key === "jumpToPosition" /* jumpToPosition */) {
+        return isPositionsListValid(positionsList);
+      }
+      if (item.key === "fullscreen" /* fullscreen */) {
+        return document.fullscreenEnabled && !isIOSish();
+      }
+      return true;
+    });
+  }, [actionKeys, actionsComponentsMap, positionsList]);
   useEffect(() => {
     if (isImmersive) {
       const focusElement = document.activeElement;
-      if (focusElement && footerRef.current?.contains(focusElement)) {
+      if (focusElement && headerRef.current?.contains(focusElement)) {
         focusElement.blur();
       }
     }
   }, [isImmersive]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ThInteractiveOverlay,
-      {
-        className: classNames3(thorium_web_reader_app_default.barOverlay, thorium_web_reader_app_default.footerOverlay),
-        isActive: layout === "layered-ui" /* layered */ && isImmersive && !isHovering,
-        onMouseEnter: setHover,
-        onMouseLeave: removeHover
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ThFooter,
-      {
-        ref: footerRef,
-        className: thorium_web_reader_app_default.bottomBar,
-        "aria-label": t("reader.app.footer.label"),
-        onMouseEnter: setHover,
-        onMouseLeave: removeHover,
-        ...focusWithinProps,
-        children: isScroll || readerProfile === "webPub" ? /* @__PURE__ */ jsx(
-          StatefulReaderPagination,
-          {
-            "aria-label": t("reader.navigation.scroll.wrapper"),
-            links: updateLinks(),
-            compounds: {
-              listItem: {
-                className: thorium_web_reader_pagination_default.listItem
-              },
-              previousButton: {
-                className: thorium_web_reader_pagination_default.previousButton,
-                preventFocusOnPress: true
-              },
-              nextButton: {
-                className: thorium_web_reader_pagination_default.nextButton,
-                preventFocusOnPress: true
-              }
-            },
-            children: /* @__PURE__ */ jsx(
-              StatefulReaderProgression,
-              {
-                className: thorium_web_reader_pagination_default.progression,
-                formatPref: progressionFormatPref,
-                fallbackVariant: progressionFormatFallback
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsx(
-          StatefulReaderProgression,
-          {
-            formatPref: progressionFormatPref,
-            fallbackVariant: progressionFormatFallback
-          }
-        )
-      }
-    )
-  ] });
-};
-
-// src/core/Hooks/fonts/androidPatchCss.ts
-var getAndroidPatchCss = () => {
-  if (typeof window === "undefined") {
-    return "";
-  }
-  const origin = window.location.origin;
-  return `/* Readium CSS
-   Android Fonts Patch module
-
-   A stylesheet aligning Android generic serif and sans-serif fonts on other platforms
-
-   Repo: https://github.com/readium/css */
-
-/* Android resolves sans-serif to Roboto, and serif to Droid Serif 
-   This created issues for FXL EPUBs relying on Times (New Roman),
-   Helvetica or Arial while not embedding the font files in the package.
-
-   See https://github.com/readium/css/issues/149
-
-   Unfortunately it is no possible to target generic family using @font-face,
-   we have to target specific font-family names e.g. Times, Arial, etc.
-
-   This stylesheet/patch should be loaded only for this case i.e.
-   a Fixed-Layout EPUB with text but no embedded font on an Android device.
-   The logic for checking these conditions are up to implementers.
-*/
-
-/* Serif (Times + Times New Roman) */
-
-@font-face {
-  font-family: Times;
-  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman.woff", origin).toString()}") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Times New Roman";
-  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman.woff", origin).toString()}") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: Times;
-  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-Italic.woff", origin).toString()}") format("woff");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "Times New Roman";
-  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-Italic.woff", origin).toString()}") format("woff");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: Times;
-  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-Bold.woff", origin).toString()}") format("woff");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Times New Roman";
-  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-Bold.woff", origin).toString()}") format("woff");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: Times;
-  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-BoldItalic.woff", origin).toString()}") format("woff");
-  font-weight: bold;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "Times New Roman";
-  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-BoldItalic.woff", origin).toString()}") format("woff");
-  font-weight: bold;
-  font-style: italic;
-}
-
-/* Sans-serif (Helvetica + Arial) */
-
-@font-face {
-  font-family: Helvetica;
-  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans.woff", origin).toString()}") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: Arial;
-  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans.woff", origin).toString()}") format("woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: Helvetica;
-  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-Italic.woff", origin).toString()}") format("woff");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: Arial;
-  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-Italic.woff", origin).toString()}") format("woff");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: Helvetica;
-  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-Bold.woff", origin).toString()}") format("woff");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: Arial;
-  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-Bold.woff", origin).toString()}") format("woff");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: Helvetica;
-  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-BoldItalic.woff", origin).toString()}") format("woff");
-  font-weight: bold;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: Arial;
-  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-BoldItalic.woff", origin).toString()}") format("woff");
-  font-weight: bold;
-  font-style: italic;
-}`;
-};
-
-// src/core/Hooks/fonts/useFonts.ts
-var useFonts = (fontResources) => {
-  const injectedElementsRef = useRef({
-    prepend: [],
-    append: []
-  });
-  const createLinkElement = useCallback((resource) => {
-    const link = document.createElement("link");
-    if ("attributes" in resource && resource.attributes) {
-      Object.entries(resource.attributes).forEach(([key, value]) => {
-        link.setAttribute(key, value);
-      });
-    }
-    link.rel = resource.rel;
-    link.as = resource.as;
-    if ("url" in resource) {
-      link.href = resource.url;
-    } else if ("blob" in resource && resource.blob) {
-      link.href = URL.createObjectURL(resource.blob);
-    }
-    return link;
-  }, []);
-  const removeInjectedElements = useCallback(() => {
-    const { prepend, append } = injectedElementsRef.current;
-    [...prepend, ...append].forEach((element) => {
-      if (element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-      if (element instanceof HTMLLinkElement && element.href.startsWith("blob:")) {
-        URL.revokeObjectURL(element.href);
-      }
-    });
-    injectedElementsRef.current = {
-      prepend: [],
-      append: []
-    };
-  }, []);
-  const injectFontResources = useCallback((resources) => {
-    if (typeof document === "undefined") return;
-    removeInjectedElements();
-    if (!resources) return;
-    const { prepend, append } = resources;
-    const injectedElements = injectedElementsRef.current;
-    prepend.forEach((resource) => {
-      const element = createLinkElement(resource);
-      document.head.insertBefore(element, document.head.firstChild);
-      injectedElements.prepend.push(element);
-    });
-    append.forEach((resource) => {
-      const element = createLinkElement(resource);
-      document.head.appendChild(element);
-      injectedElements.append.push(element);
-    });
-  }, [createLinkElement, removeInjectedElements]);
-  const getAndroidFXLPatch = useCallback(() => {
-    const platform = getPlatform();
-    const isAndroid = platform === "android";
-    if (!isAndroid) {
-      return null;
-    }
-    const cssContent = getAndroidPatchCss();
-    const blob = new Blob([cssContent], { type: "text/css" });
-    return {
-      as: "link",
-      rel: "stylesheet",
-      blob
-    };
-  }, []);
-  useEffect(() => {
-    injectFontResources(fontResources || null);
-    return () => {
-      removeInjectedElements();
-    };
-  }, [fontResources, injectFontResources, removeInjectedElements]);
   return {
-    injectFontResources,
-    removeFontResources: removeInjectedElements,
-    getAndroidFXLPatch
+    headerRef,
+    focusWithinProps,
+    setHover,
+    removeHover,
+    listActionItems,
+    isImmersive,
+    isHovering,
+    isScroll,
+    t
   };
 };
 
-// src/helpers/peripherals.ts
-var Peripherals = class {
-  observers = ["keydown"];
-  targets = [];
-  callbacks;
-  store;
-  actionsPref;
-  shortcuts;
-  constructor(store, actionsPref, callbacks) {
-    this.observers.forEach((method) => {
-      this["on" + method] = this["on" + method].bind(this);
-    });
-    this.store = store;
-    this.actionsPref = actionsPref;
-    this.callbacks = callbacks;
-    this.shortcuts = this.retrieveShortcuts();
-  }
-  getPlatformModifier() {
-    return this.store.getState().reader.platformModifier.modifier;
-  }
-  retrieveShortcuts() {
-    if (!this.actionsPref) return {};
-    const shortcutsObj = {};
-    const displayOrder = this.store.getState().publication.isFXL ? this.actionsPref.fxlOrder : this.actionsPref.reflowOrder;
-    for (const actionKey of displayOrder) {
-      const shortcutString = this.actionsPref.keys[actionKey].shortcut;
-      if (shortcutString) {
-        const shortcutObj = buildShortcut(shortcutString);
-        if (shortcutObj?.key) {
-          Object.defineProperty(shortcutsObj, shortcutObj.key, {
-            value: {
-              actionKey,
-              modifiers: shortcutObj.modifiers
-            },
-            writable: false,
-            enumerable: true
-          });
-        }
-      }
-    }
-    return shortcutsObj;
-  }
-  destroy() {
-    this.targets.forEach((t) => this.unobserve(t));
-  }
-  unobserve(item) {
-    if (!item) return;
-    this.observers.forEach((EventName) => {
-      item.removeEventListener(
-        EventName,
-        this["on" + EventName],
-        false
-      );
-    });
-    this.targets = this.targets.filter((t) => t !== item);
-  }
-  observe(item) {
-    if (!item) return;
-    if (this.targets.includes(item)) return;
-    this.observers.forEach((EventName) => {
-      item.addEventListener(EventName, this["on" + EventName], false);
-    });
-    this.targets.push(item);
-  }
-  onkeydown(e) {
-    const focusIsSafe = !isInteractiveElement(document.activeElement);
-    switch (e.code) {
-      case "Space":
-        focusIsSafe && this.callbacks.goProgression(e.shiftKey);
-        break;
-      case "ArrowRight":
-        focusIsSafe && this.callbacks.moveTo("right");
-        break;
-      case "ArrowLeft":
-        focusIsSafe && this.callbacks.moveTo("left");
-        break;
-      case "ArrowUp":
-      case "PageUp":
-        focusIsSafe && this.callbacks.moveTo("up");
-        break;
-      case "ArrowDown":
-      case "PageDown":
-        focusIsSafe && this.callbacks.moveTo("down");
-        break;
-      case "Home":
-        focusIsSafe && this.callbacks.moveTo("home");
-        break;
-      case "End":
-        focusIsSafe && this.callbacks.moveTo("end");
-        break;
-      default:
-        if (this.shortcuts.hasOwnProperty(e.code)) {
-          const customShortcutObj = this.shortcuts[e.code];
-          const sendCallback = Object.entries(customShortcutObj.modifiers).every(([modifier, value]) => {
-            if (modifier === "platformKey") {
-              return e[this.getPlatformModifier()] === value;
-            } else {
-              return e[modifier] === value;
-            }
-          });
-          if (sendCallback) {
-            e.preventDefault();
-            this.callbacks.toggleAction(customShortcutObj.actionKey);
-          }
-        }
-        break;
-    }
-  }
-};
-var LAYOUT_CLASSES = {
-  ["stacked-ui" /* stacked */]: "thorium_web_stackedUI",
-  ["layered-ui" /* layered */]: "thorium_web_layeredUI"
-};
-function getReaderClassNames(options) {
-  const {
-    layoutUI,
-    isScroll,
-    isImmersive = false,
-    isHovering = false,
-    isFXL = false,
-    breakpoint
-  } = options;
-  return classNames3(
-    thorium_web_reader_app_default.shell,
-    isScroll ? "thorium_web_isScroll" : "thorium_web_isPaged",
-    isImmersive && "thorium_web_isImmersive",
-    isHovering && "thorium_web_isHovering",
-    isFXL ? "thorium_web_isFXL" : "thorium_web_isReflow",
-    LAYOUT_CLASSES[layoutUI],
-    breakpoint ? `thorium_web_is${breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)}` : void 0
-  );
-}
-
-export { NavigatorProvider, Peripherals, StatefulActionIcon, StatefulBottomSheet, StatefulCollapsibleActionsBar, StatefulColumns, StatefulDockedSheet, StatefulDockingWrapper, StatefulDropdown, StatefulFontFamily, StatefulFullScreenSheet, StatefulFullscreenTrigger, StatefulGroupWrapper, StatefulHyphens, StatefulJumpToPositionContainer, StatefulJumpToPositionTrigger, StatefulLayout, StatefulLetterSpacing, StatefulLineHeight, StatefulNumberField, StatefulOverflowMenu, StatefulOverflowMenuItem, StatefulParagraphIndent, StatefulParagraphSpacing, StatefulPopoverSheet, StatefulPreferencesProvider, StatefulPublisherStyles, StatefulRadioGroup, StatefulReaderFooter, StatefulReaderHeader, StatefulSettingsContainer, StatefulSettingsTrigger, StatefulSheetWrapper, StatefulSlider, StatefulSpacingGroup, StatefulSpacingGroupContainer, StatefulSpacingPresets, StatefulSwitch, StatefulTextAlign, StatefulTextGroup, StatefulTextGroupContainer, StatefulTextNormalize, StatefulTheme, StatefulTocContainer, StatefulTocTrigger, StatefulWordSpacing, StatefulZoom, ThPluginProvider, ThPluginRegistry, UnstableStatefulFontWeight, createDefaultPlugin, getReaderClassNames, thorium_web_button_default, thorium_web_reader_app_default, useDocking, useFonts, useGridNavigation, useGridTemplate, useLineHeight, useNavigator, usePositionStorage, usePublication, useReaderTransitions, useSettingsComponentStatus, useSpacingPresets };
-//# sourceMappingURL=chunk-PXAUQJEU.mjs.map
-//# sourceMappingURL=chunk-PXAUQJEU.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, 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