@edrlab/thorium-web 1.5.7 → 1.6.0

package/dist/{chunk-C6LWEQL2.mjs → chunk-7X5KT42Z.mjs}

@@ -1,13 +1,13 @@
 import { makeBreakpointsMap, isKeyboardTriggered, isActiveElement } from './chunk-3R5JARA2.mjs';
 import { useFullscreen, useLocalStorage, useEpubNavigator } from './chunk-CXKDZVAV.mjs';
-import { setFullscreen, setReaderProfile, setActionOpen, dockAction, setHovering, setSettingsContainer, debounce, setColumnCount, initialWebPubSettingsState, initialSettingsState, setWebPubFontFamily, setFontFamily, setWebPubFontWeight, setFontWeight, setWebPubHyphens, setHyphens, setScroll, setWebPubLetterSpacing, setLetterSpacing, setWebPubLineHeight, setLineHeight, setWebPubParagraphIndent, setParagraphIndent, setWebPubParagraphSpacing, setParagraphSpacing, setWebPubWordSpacing, setWordSpacing, setWebPubSpacingPreset, setWebPubPublisherStyles, setSpacingPreset, setPublisherStyles, setWebPubTextAlign, setTextAlign, setWebPubTextNormalization, setTextNormalization, setWebPubLigatures, setLigatures, setWebPubNoRuby, setNoRuby, setTheme, setWebPubZoom, setFontSize, setSkipBackwardInterval, setSkipForwardInterval, setSkipInterval, setAutoPlay, toggleActionOpen, setVolume, setPlaybackRate, setSleepTimerRemainingSeconds, setSleepTimerOnTrackEnd, setSleepTimerOnFragmentEnd, setRemotePlaybackState, ThReduxPreferencesAdapter, ThReduxGlobalPreferencesAdapter, setImmersive, setOverflow, setUserNavigated, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from './chunk-I765HTBI.mjs';
+import { setFullscreen, setReaderProfile, setActionOpen, dockAction, setHovering, setSettingsContainer, debounce, setColumnCount, initialWebPubSettingsState, initialSettingsState, setWebPubFontFamily, setFontFamily, setWebPubFontWeight, setFontWeight, setWebPubHyphens, setHyphens, setScroll, setWebPubLetterSpacing, setLetterSpacing, setWebPubLineHeight, setLineHeight, setWebPubParagraphIndent, setParagraphIndent, setWebPubParagraphSpacing, setParagraphSpacing, setWebPubWordSpacing, setWordSpacing, setWebPubSpacingPreset, setWebPubPublisherStyles, setSpacingPreset, setPublisherStyles, setWebPubTextAlign, setTextAlign, setWebPubTextNormalization, setTextNormalization, setWebPubLigatures, setLigatures, setWebPubNoRuby, setNoRuby, setTheme, setWebPubZoom, setFontSize, setSkipBackwardInterval, setSkipForwardInterval, setSkipInterval, setAutoPlay, toggleActionOpen, setVolume, setPlaybackRate, setSleepTimerRemainingSeconds, setSleepTimerOnTrackEnd, setSleepTimerOnFragmentEnd, setRemotePlaybackState, ThReduxPreferencesAdapter, ThReduxGlobalPreferencesAdapter, setDockPanelWidth, setImmersive, setOverflow, setUserNavigated, activateDockPanel, deactivateDockPanel } from './chunk-GC7ENGE2.mjs';
 import { setPositionsList, setScriptMode, setRTL, setFXL, setHasDisplayTransformability, setTocTree, buildTocTreeFromTimeline, setTocEntry, findTocItemByHref, findTocItemById } from './chunk-7SMOXFAF.mjs';
-import { useSharedPreferences, useActionsPreferences, prefixString, ThDockingTypes, ThSheetTypes, useAudioPreferences, usePreferences, useFilteredPreferenceKeys, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, ThTextSettingsKeys, ThSpacingSettingsKeys, buildThemeObject, defaultAudioSkipBackwardInterval, defaultAudioSkipForwardInterval, defaultAudioSkipInterval, defaultPreferences, ThPreferencesProvider, ThGlobalPreferencesProvider } from './chunk-6DR4EAK3.mjs';
+import { useSharedPreferences, useActionsPreferences, prefixString, ThDockingTypes, ThSheetTypes, useAudioPreferences, usePreferences, useFilteredPreferenceKeys, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, ThTextSettingsKeys, ThSpacingSettingsKeys, buildThemeObject, defaultAudioSkipBackwardInterval, defaultAudioSkipForwardInterval, defaultAudioSkipInterval, defaultPreferences, ThPreferencesProvider, ThGlobalPreferencesProvider } from './chunk-WA35SQJK.mjs';
 import { metaKeys } from './chunk-X63WSMOH.mjs';
 import { useAppDispatch, useAppSelector } from './chunk-MFVZ5AEN.mjs';
 import { isIOSish } from './chunk-KQ3KS5O5.mjs';
 import { ErrorHandler } from './chunk-RRDEPGBK.mjs';
-import { ThMenuItem, ThActionButton, ThMenu, ThCollapsibleActionsBar, ThPopover, ThContainerHeader, ThNavigationButton, ThContainerBody, ThModal, ThBottomSheet, ThCloseButton, ThDockedPanel, useFirstFocusable, ThTypedComponentRenderer, useActions, ThForm, ThFormNumberField, ThSettingsWrapper, ThRadioGroup, ThDropdown, ThSwitch, ThNumberField, ThSlider, ThSliderWithPresets, ThLink, ThLibrary, ThHome, ThBackArrow, ThFormSearchField } from './chunk-ES2Y5MC7.mjs';
+import { ThMenuItem, ThActionButton, ThMenu, ThCollapsibleActionsBar, ThPopover, ThContainerHeader, ThNavigationButton, ThContainerBody, ThModal, ThBottomSheet, ThCloseButton, ThDockedPanel, useFirstFocusable, ThTypedComponentRenderer, ThForm, ThFormNumberField, ThSettingsWrapper, ThRadioGroup, ThDropdown, ThSwitch, ThNumberField, ThSlider, ThSliderWithPresets, ThLink, ThLibrary, ThHome, ThBackArrow, useActions, ThFormSearchField } from './chunk-ES2Y5MC7.mjs';
 import { usePrevious } from './chunk-YZ73DHRU.mjs';
 import { useI18n } from './chunk-2NCN2AG2.mjs';
 import React23, { createContext, useContext, useState, useEffect, useMemo, useCallback, useRef } from 'react';
@@ -19,7 +19,7 @@ import { Link, HttpFetcher, Manifest, Publication, ReadingProgression, Layout, F
 import { getScriptMode, lineHeightRangeConfig, TextAlignment } from '@readium/navigator';
 import i18nData from '@readium/css/css/vars/i18n.json';
 import { useStore } from 'react-redux';
-import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
+import { Group, Panel, Separator } from 'react-resizable-panels';
 
 // src/components/Plugins/PluginRegistry.ts
 var pluginsStore = [];
@@ -748,30 +748,61 @@ var SvgDockToRight = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.
 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 }) => {
+
+// src/components/Docking/helpers/dockReservation.ts
+var isReservedByPref = (actionPref) => {
+  const isDockedByDefault = actionPref?.sheet?.defaultSheet === "docked start" /* dockedStart */ || actionPref?.sheet?.defaultSheet === "docked end" /* dockedEnd */;
+  return !!actionPref?.docked?.reserved && isDockedByDefault;
+};
+
+// src/components/Docking/hooks/useDockReservation.ts
+var useDockReservation = (key) => {
   const preferences = useActionsPreferences();
-  const { t } = useI18n();
-  const direction = useAppSelector((state) => state.reader.direction);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const dock = useAppSelector((state) => profile ? state.actions.dock[profile] : void 0);
+  const actionPref = preferences.actionsKeys[key];
+  const reserved = isReservedByPref(actionPref);
+  const isSlotLockedByOther = useCallback((slot) => {
+    return !!dock?.[slot]?.reserved && dock?.[slot]?.actionKey !== key;
+  }, [dock, key]);
+  return {
+    dock,
+    reserved,
+    isSlotLockedByOther
+  };
+};
+
+// src/components/Docking/hooks/useDockTrigger.ts
+var useDockTrigger = (slot, associatedKey) => {
   const profile = useAppSelector((state) => state.reader.profile);
   const actionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
   const actions = useActions(actionsMap || {});
-  const isRTL = direction === "rtl" /* rtl */;
-  const translationKey = isRTL ? "reader.app.docker.dockToRight" : "reader.app.docker.dockToLeft";
-  const localeKey = {
-    trigger: t(`${translationKey}.trigger`),
-    tooltip: t(`${translationKey}.tooltip`)
-  };
-  const isDisabled = actions.whichDocked(associatedKey) === "dockingStart" /* start */;
+  const { reserved, isSlotLockedByOther } = useDockReservation(associatedKey ?? "");
   const dispatch = useAppDispatch();
+  const isDisabled = actions.whichDocked(associatedKey) === slot || isSlotLockedByOther(slot);
   const handlePress = useCallback(() => {
     if (associatedKey && profile) {
       dispatch(dockAction({
         key: associatedKey,
-        dockingKey: "dockingStart" /* start */,
-        profile
+        dockingKey: slot,
+        profile,
+        reserved
       }));
     }
-  }, [dispatch, associatedKey, profile]);
+  }, [dispatch, associatedKey, profile, reserved, slot]);
+  return { isDisabled, handlePress };
+};
+var StatefulDockStart = ({ variant, associatedKey }) => {
+  const preferences = useActionsPreferences();
+  const { t } = useI18n();
+  const direction = useAppSelector((state) => state.reader.direction);
+  const { isDisabled, handlePress } = useDockTrigger("dockingStart" /* start */, associatedKey);
+  const isRTL = direction === "rtl" /* rtl */;
+  const translationKey = isRTL ? "reader.app.docker.dockToRight" : "reader.app.docker.dockToLeft";
+  const localeKey = {
+    trigger: t(`${translationKey}.trigger`),
+    tooltip: t(`${translationKey}.tooltip`)
+  };
   return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
     StatefulOverflowMenuItem,
     {
@@ -799,26 +830,13 @@ var StatefulDockEnd = ({ variant, associatedKey }) => {
   const preferences = useActionsPreferences();
   const { t } = useI18n();
   const direction = useAppSelector((state) => state.reader.direction);
-  const profile = useAppSelector((state) => state.reader.profile);
-  const actionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
-  const actions = useActions(actionsMap || {});
+  const { isDisabled, handlePress } = useDockTrigger("dockingEnd" /* end */, associatedKey);
   const isRTL = direction === "rtl" /* rtl */;
   const translationKey = isRTL ? "reader.app.docker.dockToLeft" : "reader.app.docker.dockToRight";
   const localeKey = {
     trigger: t(`${translationKey}.trigger`),
     tooltip: t(`${translationKey}.tooltip`)
   };
-  const isDisabled = actions.whichDocked(associatedKey) === "dockingEnd" /* end */;
-  const dispatch = useAppDispatch();
-  const handlePress = useCallback(() => {
-    if (associatedKey && profile) {
-      dispatch(dockAction({
-        key: associatedKey,
-        dockingKey: "dockingEnd" /* end */,
-        profile
-      }));
-    }
-  }, [dispatch, associatedKey, profile]);
   return /* @__PURE__ */ jsx(Fragment, { children: variant && variant === "menuItem" /* menu */ ? /* @__PURE__ */ jsx(
     StatefulOverflowMenuItem,
     {
@@ -1564,12 +1582,17 @@ var StatefulDockedSheet = ({
   focusWithinRef
 }) => {
   const { t } = useI18n();
-  const dockPortal = flow && document.getElementById(flow);
   const dockedSheetRef = useRef(null);
   const dockedSheetHeaderRef = useRef(null);
   const dockedSheetBodyRef = useRef(null);
   const dockedSheetCloseRef = useRef(null);
+  const [dockPortal, setDockPortal] = useState(null);
   const direction = useAppSelector((state) => state.reader.direction);
+  const profile = useAppSelector((state) => state.reader.profile);
+  const isSlotActive = useAppSelector((state) => profile && flow ? !!state.actions.dock[profile]?.[flow]?.active : false);
+  useEffect(() => {
+    setDockPortal(flow ? document.getElementById(flow) : null);
+  }, [flow, isSlotActive, isOpen]);
   useEffect(() => {
     if (isOpen && dockedSheetRef.current && dockedSheetHeaderRef.current) {
       dockedSheetRef.current.style.setProperty(
@@ -1741,42 +1764,39 @@ var StatefulSheetWrapper = ({
     }
   );
 };
-var dockingMap = null;
+var isDockedType = (type) => type === "docked start" /* dockedStart */ || type === "docked end" /* dockedEnd */;
 var useDocking = (key) => {
   const preferences = useActionsPreferences();
   const breakpoint = useAppSelector((state) => state.theming.breakpoint);
   const profile = useAppSelector((state) => state.reader.profile);
   const actionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
   const actionState = actionsMap?.[key];
-  const dock = useAppSelector((state) => profile ? state.actions.dock[profile] : void 0);
+  const { dock, reserved, isSlotLockedByOther } = useDockReservation(key);
   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 */,
-      fromEnum: ThDockingTypes,
-      pref: preferences.docking.dock,
-      disabledValue: "none" /* none */
-    });
-  }
+  const dockingPref = preferences.docking.dock;
+  const dockingMap = useMemo(() => makeBreakpointsMap({
+    defaultValue: "both" /* both */,
+    fromEnum: ThDockingTypes,
+    pref: dockingPref,
+    disabledValue: "none" /* none */
+  }), [dockingPref]);
   const currentDockConfig = breakpoint && dockingMap[breakpoint];
-  const dockablePref = preferences.actionsKeys[key]?.docked?.dockable || "none" /* none */;
-  const defaultSheet = preferences.actionsKeys[key]?.sheet?.defaultSheet || "popover" /* popover */;
-  const sheetMap = makeBreakpointsMap({
-    defaultValue: preferences.actionsKeys[key]?.sheet?.defaultSheet || "popover" /* popover */,
+  const actionPref = preferences.actionsKeys[key];
+  const dockablePref = actionPref?.docked?.dockable || "none" /* none */;
+  const reopenOnLoadPref = !!actionPref?.docked?.reopenOnLoad;
+  const defaultSheet = actionPref?.sheet?.defaultSheet || "popover" /* popover */;
+  const fallbackSheet = actionPref?.sheet?.fallbackSheet || "modal" /* modal */;
+  const safeDefaultSheet = isDockedType(defaultSheet) ? fallbackSheet : defaultSheet;
+  const sheetBreakpointsPref = actionPref?.sheet?.breakpoints;
+  const sheetMap = useMemo(() => makeBreakpointsMap({
+    defaultValue: defaultSheet,
     fromEnum: ThSheetTypes,
-    pref: preferences.actionsKeys[key]?.sheet?.breakpoints
-  });
+    pref: sheetBreakpointsPref
+  }), [defaultSheet, sheetBreakpointsPref]);
   const sheetPref = breakpoint && sheetMap[breakpoint] || defaultSheet;
-  const [sheetType, setSheetType] = useState(defaultSheet);
-  const previousSheetType = usePrevious(sheetType);
   const canBeDocked = useCallback((slot) => {
-    return (currentDockConfig === slot || currentDockConfig === "both" /* both */) && (dockablePref === slot || dockablePref === "both" /* both */);
-  }, [currentDockConfig, dockablePref]);
+    return (currentDockConfig === slot || currentDockConfig === "both" /* both */) && (dockablePref === slot || dockablePref === "both" /* both */) && !isSlotLockedByOther(slot === "start" /* start */ ? "dockingStart" /* start */ : "dockingEnd" /* end */);
+  }, [currentDockConfig, dockablePref, isSlotLockedByOther]);
   const isDockedSheetPref = useCallback((type) => {
     if (type) {
       return sheetPref === type;
@@ -1784,73 +1804,51 @@ var useDocking = (key) => {
       return sheetPref === "docked start" /* dockedStart */ || sheetPref === "docked end" /* dockedEnd */;
     }
   }, [sheetPref]);
-  const getDocker = useCallback(() => {
-    if (dockablePref === "none" /* none */) return [];
-    if (currentDockConfig === "none" /* none */) return [];
-    if (sheetPref === "fullscreen" /* fullscreen */ || sheetPref === "bottomSheet" /* bottomSheet */) return [];
-    let dockerKeys = [];
-    preferences.docking.displayOrder.forEach((dockingKey) => {
-      switch (dockingKey) {
-        case "dockingTransient" /* transient */:
-          dockerKeys.push(dockingKey);
-          break;
-        case "dockingStart" /* start */:
-          if (canBeDocked("start" /* start */)) {
-            dockerKeys.push(dockingKey);
-          }
-          break;
-        case "dockingEnd" /* end */:
-          if (canBeDocked("end" /* end */)) {
-            dockerKeys.push(dockingKey);
-          }
-          break;
-      }
-    });
-    if (dockerKeys.length === 1 && dockerKeys[0] === "dockingTransient" /* transient */) return [];
-    return dockerKeys;
-  }, [preferences.docking.displayOrder, currentDockConfig, sheetPref, dockablePref, canBeDocked]);
-  const getSheetType = useCallback(() => {
+  const usableSheetPref = useCallback(() => {
+    if (sheetPref === "docked start" /* dockedStart */ && !canBeDocked("start" /* start */)) return safeDefaultSheet;
+    if (sheetPref === "docked end" /* dockedEnd */ && !canBeDocked("end" /* end */)) return safeDefaultSheet;
+    return sheetPref;
+  }, [sheetPref, canBeDocked, safeDefaultSheet]);
+  const hasStaleTransient = actionState?.docking === "dockingTransient" /* transient */ && reserved;
+  const effectiveDocking = hasStaleTransient ? void 0 : actionState?.docking;
+  const nonDockedSheetPref = isDockedType(sheetPref) ? safeDefaultSheet : sheetPref;
+  const sheetType = useMemo(() => {
     if (!breakpoint) {
-      return sheetType;
+      return safeDefaultSheet;
     }
     if (dockablePref === "none" /* none */) {
       if (isDockedSheetPref()) {
-        return defaultSheet;
+        return safeDefaultSheet;
       } else {
-        return sheetPref;
+        return usableSheetPref();
       }
     }
-    switch (actionState?.docking) {
-      // if action.docking is transient we need to check the pref, 
+    switch (effectiveDocking) {
+      // if action.docking is transient we need to check the pref,
       // it can be docked and in that case we need to pick the default
       case "dockingTransient" /* transient */:
         if (isDockedSheetPref()) {
-          return defaultSheet;
+          return safeDefaultSheet;
         } else {
-          return sheetPref;
+          return usableSheetPref();
         }
-      // If action.docking is set to start/end then we check the docking slot is available
+      // The chosen slot may not be the one the static pref names, so
+      // usableSheetPref (keyed to sheetPref's own slot) can't be reused here.
+      // Unavailable: an explicit per-breakpoint non-docked sheet wins,
+      // otherwise fall to fallbackSheet
       case "dockingStart" /* start */:
         if (canBeDocked("start" /* start */)) {
           return "docked start" /* dockedStart */;
         } else {
-          if (!isDockedSheetPref("docked start" /* dockedStart */)) {
-            return sheetPref;
-          } else {
-            return defaultSheet;
-          }
+          return nonDockedSheetPref;
         }
       case "dockingEnd" /* end */:
         if (canBeDocked("end" /* end */)) {
           return "docked end" /* dockedEnd */;
         } else {
-          if (!isDockedSheetPref("docked end" /* dockedEnd */)) {
-            return sheetPref;
-          } else {
-            return defaultSheet;
-          }
+          return nonDockedSheetPref;
         }
-      // If action.docking is null or undefined then we rely on pref 
+      // If action.docking is null or undefined then we rely on pref
       // as it means the user did not pick another option
       case null:
       case void 0:
@@ -1858,138 +1856,127 @@ var useDocking = (key) => {
           if (canBeDocked("start" /* start */)) {
             return "docked start" /* dockedStart */;
           } else {
-            return defaultSheet;
+            return safeDefaultSheet;
           }
         } else if (isDockedSheetPref("docked end" /* dockedEnd */)) {
           if (canBeDocked("end" /* end */)) {
             return "docked end" /* dockedEnd */;
           } else {
-            return defaultSheet;
+            return safeDefaultSheet;
           }
         } else {
-          return sheetPref;
+          return usableSheetPref();
         }
       default:
-        return defaultSheet;
+        return safeDefaultSheet;
     }
-  }, [dockablePref, sheetPref, defaultSheet, actionState?.docking, canBeDocked, isDockedSheetPref, breakpoint, sheetType]);
-  useEffect(() => {
-    setSheetType(getSheetType());
-  }, [sheetPref, currentDockConfig, actionState?.docking, getSheetType]);
-  useEffect(() => {
-    if (actionState?.docking === "dockingTransient" /* transient */) return;
-    if (sheetType !== "docked start" /* dockedStart */ && sheetType !== "docked end" /* dockedEnd */) {
-      if (previousSheetType === "docked start" /* dockedStart */ || previousSheetType === "docked end" /* dockedEnd */) {
-        if (profile) {
-          dispatch(setActionOpen({
-            key,
-            isOpen: false,
-            profile
-          }));
-        }
+  }, [dockablePref, safeDefaultSheet, effectiveDocking, canBeDocked, isDockedSheetPref, usableSheetPref, nonDockedSheetPref, breakpoint]);
+  const previousSheetType = usePrevious(sheetType);
+  const getDocker = useCallback(() => {
+    if (dockablePref === "none" /* none */) return [];
+    if (currentDockConfig === "none" /* none */) return [];
+    if (sheetPref === "fullscreen" /* fullscreen */ || sheetPref === "bottomSheet" /* bottomSheet */) return [];
+    let dockerKeys = [];
+    preferences.docking.displayOrder.forEach((dockingKey) => {
+      switch (dockingKey) {
+        case "dockingTransient" /* transient */:
+          if (!reserved) {
+            dockerKeys.push(dockingKey);
+          }
+          break;
+        case "dockingStart" /* start */:
+          if (canBeDocked("start" /* start */)) {
+            dockerKeys.push(dockingKey);
+          }
+          break;
+        case "dockingEnd" /* end */:
+          if (canBeDocked("end" /* end */)) {
+            dockerKeys.push(dockingKey);
+          }
+          break;
       }
-    }
-  }, [dispatch, key, sheetType, previousSheetType, actionState?.docking, profile]);
+    });
+    if (dockerKeys.length === 1 && dockerKeys[0] === "dockingTransient" /* transient */) return [];
+    return dockerKeys;
+  }, [preferences.docking.displayOrder, currentDockConfig, sheetPref, dockablePref, reserved, canBeDocked]);
   useEffect(() => {
-    if (actionState?.isOpen == null && profile) {
-      if (sheetType === "docked start" /* dockedStart */) {
-        dispatch(dockAction({
-          key,
-          dockingKey: "dockingStart" /* start */,
-          profile
-        }));
+    if (!profile) return;
+    if (!isDockedType(sheetType)) {
+      if (previousSheetType == null && (actionState?.docking === "dockingStart" /* start */ || actionState?.docking === "dockingEnd" /* end */) && actionState?.isOpen) {
         dispatch(setActionOpen({
           key,
-          isOpen: true,
-          profile
-        }));
-      } else if (sheetType === "docked end" /* dockedEnd */) {
-        dispatch(dockAction({
-          key,
-          dockingKey: "dockingEnd" /* end */,
-          profile
-        }));
-        dispatch(setActionOpen({
-          key,
-          isOpen: true,
+          isOpen: false,
           profile
         }));
       }
+      return;
     }
-  }, [actionState?.isOpen, sheetType, key, dispatch, profile]);
-  useEffect(() => {
-    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 */,
-            profile
-          }));
-        }
-      } else if (sheetType === "docked end" /* dockedEnd */) {
-        const dockingKey = actions.whichDocked(key);
-        if (dockingKey !== "dockingEnd" /* end */) {
-          dispatch(dockAction({
-            key,
-            dockingKey: "dockingEnd" /* end */,
-            profile
-          }));
-        }
-      }
+    if (effectiveDocking == null) {
+      dispatch(dockAction({
+        key,
+        dockingKey: sheetType === "docked start" /* dockedStart */ ? "dockingStart" /* start */ : "dockingEnd" /* end */,
+        profile,
+        reserved
+      }));
     }
-  }, [dispatch, key, sheetType, actionState?.isOpen, actionState?.docking, actions, profile]);
+    if (actionState?.isOpen == null || hasStaleTransient) {
+      dispatch(setActionOpen({
+        key,
+        isOpen: reopenOnLoadPref,
+        profile
+      }));
+    }
+  }, [effectiveDocking, hasStaleTransient, actionState?.isOpen, actionState?.docking, sheetType, previousSheetType, key, dispatch, profile, reserved, reopenOnLoadPref]);
   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({
+    if (effectiveDocking === "dockingTransient" /* transient */) return;
+    if (effectiveDocking === "dockingStart" /* start */ && !isSlotLockedByOther("dockingStart" /* start */)) return;
+    if (effectiveDocking === "dockingEnd" /* end */ && !isSlotLockedByOther("dockingEnd" /* end */)) return;
+    if (!previousSheetType || !isDockedType(previousSheetType) || isDockedType(sheetType)) return;
+    if (!breakpoint || !profile) return;
+    dispatch(setActionOpen({
+      key,
+      isOpen: false,
+      profile
+    }));
+  }, [dispatch, key, sheetType, previousSheetType, breakpoint, profile, effectiveDocking, isSlotLockedByOther]);
+  useEffect(() => {
+    if (!profile || !dock) return;
+    const startSlot = dock["dockingStart" /* start */];
+    const endSlot = dock["dockingEnd" /* end */];
+    const isDockedInStart = startSlot?.actionKey === key;
+    const isDockedInEnd = endSlot?.actionKey === key;
+    const wasAlreadyDockedInStart = actionState?.docking === "dockingStart" /* start */;
+    const wasAlreadyDockedInEnd = actionState?.docking === "dockingEnd" /* end */;
+    if (isDockedInStart && (!wasAlreadyDockedInStart || startSlot?.reserved !== reserved)) {
+      dispatch(dockAction({
+        key,
+        dockingKey: "dockingStart" /* start */,
+        profile,
+        reserved
+      }));
+      if (!wasAlreadyDockedInStart && actionState?.isOpen == null && reopenOnLoadPref) {
+        dispatch(setActionOpen({
           key,
-          dockingKey: "dockingStart" /* start */,
+          isOpen: true,
           profile
         }));
-        if (actionState?.isOpen === false) {
-          dispatch(setActionOpen({
-            key,
-            isOpen: true,
-            profile
-          }));
-        }
-      } else if (isDockedInEnd && actionState?.docking !== "dockingEnd" /* end */) {
-        dispatch(dockAction({
+      }
+    } else if (isDockedInEnd && (!wasAlreadyDockedInEnd || endSlot?.reserved !== reserved)) {
+      dispatch(dockAction({
+        key,
+        dockingKey: "dockingEnd" /* end */,
+        profile,
+        reserved
+      }));
+      if (!wasAlreadyDockedInEnd && actionState?.isOpen == null && reopenOnLoadPref) {
+        dispatch(setActionOpen({
           key,
-          dockingKey: "dockingEnd" /* end */,
+          isOpen: true,
           profile
         }));
-        if (actionState?.isOpen === false) {
-          dispatch(setActionOpen({
-            key,
-            isOpen: true,
-            profile
-          }));
-        }
       }
     }
-  }, [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]);
+  }, [profile, dock, actionState?.docking, actionState?.isOpen, key, dispatch, reserved, reopenOnLoadPref]);
   return {
     getDocker,
     sheetType
@@ -4896,7 +4883,7 @@ var createDefaultPlugin = () => {
     id: "core",
     name: "Core Components",
     description: "Default components for Thorium Web Epub StatefulReader",
-    version: "1.5.7",
+    version: "1.6.0",
     components: {
       actions: {
         ["fullscreen" /* fullscreen */]: {
@@ -6170,7 +6157,7 @@ var createAudioDefaultPlugin = () => {
     id: "audio-core",
     name: "Audio Core Components",
     description: "Default components for Thorium Web Audio StatefulReader",
-    version: "1.5.7",
+    version: "1.6.0",
     components: {
       actions: {
         ["settings" /* settings */]: {
@@ -6288,6 +6275,14 @@ var thorium_web_reader_app_default = {
   loading: "thorium_web_reader_app_loading",
   srOnly: "thorium_web_reader_app_srOnly"
 };
+var isNumericSize = (value) => {
+  return typeof value === "number";
+};
+var toPixels = (value) => {
+  if (isNumericSize(value)) return value;
+  if (typeof value === "string" && value.endsWith("px")) return parseFloat(value);
+  return void 0;
+};
 var useResizablePanel = (panel) => {
   const preferences = useActionsPreferences();
   const { theming } = useSharedPreferences();
@@ -6298,62 +6293,50 @@ var useResizablePanel = (panel) => {
   const profile = useAppSelector((state) => state.reader.profile);
   const actionsMap = useAppSelector((state) => profile ? state.actions.keys[profile] : void 0);
   const actions = useActions(actionsMap || {});
-  const previouslyCollapsed = usePrevious(panel?.collapsed);
   const previousWidth = actions.getDockedWidth(panel?.actionKey) || null;
-  const width = pref?.width || defaultWidth;
-  const minWidth = pref?.minWidth && pref.minWidth < width ? pref.minWidth : defaultWidth < width ? defaultWidth : width;
-  const maxWidth = pref?.maxWidth && pref.maxWidth > width ? pref.maxWidth : defaultWidth > width ? defaultWidth : width;
+  const width = pref?.width ?? defaultWidth;
+  const widthPx = toPixels(width);
+  const defaultWidthPx = toPixels(defaultWidth);
+  const minWidthPx = toPixels(pref?.minWidth);
+  const minWidth = widthPx !== void 0 && minWidthPx !== void 0 && minWidthPx < widthPx ? minWidthPx : pref?.minWidth !== void 0 && minWidthPx === void 0 ? pref.minWidth : widthPx !== void 0 && defaultWidthPx !== void 0 && defaultWidthPx < widthPx ? defaultWidth : pref?.minWidth ?? width;
+  const maxWidthPx = toPixels(pref?.maxWidth);
+  const maxWidth = widthPx !== void 0 && maxWidthPx !== void 0 && maxWidthPx > widthPx ? maxWidthPx : pref?.maxWidth !== void 0 && maxWidthPx === void 0 ? pref.maxWidth : widthPx !== void 0 && defaultWidthPx !== void 0 && defaultWidthPx > widthPx ? defaultWidth : pref?.maxWidth ?? width;
   const isPopulated = () => {
     return !!(panel?.active && actions.isOpen(panel?.actionKey));
   };
-  const isCollapsed = () => {
-    return !!panel?.collapsed;
-  };
-  const forceExpand = () => {
-    return !!(isPopulated() && previouslyCollapsed && !panel?.collapsed);
-  };
   const currentKey = () => {
     return panel?.actionKey ?? null;
   };
   const isResizable = () => {
-    return isPopulated() ? Math.round(width) > Math.round(minWidth) && Math.round(width) < Math.round(maxWidth) : false;
+    if (!panel?.actionKey) return false;
+    return isNumericSize(width) && isNumericSize(minWidth) && isNumericSize(maxWidth) ? Math.round(width) > Math.round(minWidth) && Math.round(width) < Math.round(maxWidth) : minWidth !== maxWidth;
   };
   const hasDragIndicator = () => {
     return pref?.dragIndicator || false;
   };
-  const getWidth = useCallback(() => {
-    return previousWidth ? Math.round(previousWidth / window.innerWidth * 100) : Math.round(width / window.innerWidth * 100);
-  }, [previousWidth, width]);
-  const getMinWidth = useCallback(() => {
-    return Math.round(minWidth / window.innerWidth * 100);
-  }, [minWidth]);
-  const getMaxWidth = useCallback(() => {
-    return Math.round(maxWidth / window.innerWidth * 100);
-  }, [maxWidth]);
-  const getCurrentPxWidth = useCallback((percentage) => {
-    let current = Math.round(percentage * window.innerWidth / 100);
-    if (current < minWidth) {
-      current = minWidth;
-    }
-    if (current > maxWidth) {
-      current = maxWidth;
-    }
-    return current;
-  }, [minWidth, maxWidth]);
+  const getTargetWidth = () => {
+    if (previousWidth == null) return width;
+    if (isNumericSize(minWidth) && previousWidth < minWidth) return minWidth;
+    if (isNumericSize(maxWidth) && previousWidth > maxWidth) return maxWidth;
+    return previousWidth;
+  };
+  const getMinWidth = () => {
+    return minWidth;
+  };
+  const getMaxWidth = () => {
+    return maxWidth;
+  };
   useEffect(() => {
     setPref(panel?.actionKey ? preferences.actionsKeys[panel.actionKey]?.docked || null : null);
   }, [panel?.actionKey, preferences]);
   return {
     currentKey,
     isPopulated,
-    isCollapsed,
-    forceExpand,
     isResizable,
     hasDragIndicator,
-    getWidth,
+    getTargetWidth,
     getMinWidth,
-    getMaxWidth,
-    getCurrentPxWidth
+    getMaxWidth
   };
 };
 var useDockCleanup = (profile) => {
@@ -6363,8 +6346,10 @@ var useDockCleanup = (profile) => {
   const endActionKey = dock?.["dockingEnd" /* end */]?.actionKey;
   const startStatus = useActionComponentStatus({ actionKey: startActionKey || "" });
   const endStatus = useActionComponentStatus({ actionKey: endActionKey || "" });
+  const { actionsComponentsMap, primaryAudioActionsMap } = usePlugins();
+  const isRegistryPopulated = Object.keys(actionsComponentsMap || {}).length > 0 || Object.keys(primaryAudioActionsMap || {}).length > 0;
   useEffect(() => {
-    if (!profile || !dock) return;
+    if (!profile || !dock || !isRegistryPopulated) return;
     if (startActionKey && !startStatus.isComponentRegistered) {
       dispatch(dockAction({
         key: startActionKey,
@@ -6379,12 +6364,11 @@ var useDockCleanup = (profile) => {
         profile
       }));
     }
-  }, [profile, dock, startActionKey, endActionKey, startStatus.isComponentRegistered, endStatus.isComponentRegistered, dispatch]);
+  }, [profile, dock, isRegistryPopulated, startActionKey, endActionKey, startStatus.isComponentRegistered, endStatus.isComponentRegistered, dispatch]);
 };
 var DockHandle = ({
   flow,
   isResizable,
-  isPopulated,
   hasDragIndicator
 }) => {
   const handleID = `${flow}-resize-handle`;
@@ -6397,12 +6381,11 @@ var DockHandle = ({
     }
   }, [flow, direction]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    PanelResizeHandle,
+    Separator,
     {
       id: handleID,
       className: thorium_web_docking_default.resizeHandle,
       disabled: !isResizable,
-      tabIndex: isPopulated ? 0 : -1,
       children: isResizable && hasDragIndicator && /* @__PURE__ */ jsx("div", { className: classNames4(thorium_web_docking_default.resizeHandleGrab, classFromFlow()) })
     }
   ) });
@@ -6410,18 +6393,20 @@ var DockHandle = ({
 var DockPanel = ({
   actionKey,
   flow,
+  dockConfig,
   sizes,
+  targetWidth,
   isResizable,
   isPopulated,
-  isCollapsed,
-  forceExpand,
   hasDragIndicator,
-  profile
+  profile,
+  panelRef
 }) => {
   const { t } = useI18n();
-  const panelRef = useRef(null);
   const direction = useAppSelector((state) => state.reader.direction);
   const dispatch = useAppDispatch();
+  const targetWidthRef = useRef(targetWidth);
+  targetWidthRef.current = targetWidth;
   const dockClassName = flow === "dockingEnd" /* end */ && direction === "ltr" /* ltr */ ? thorium_web_reader_app_default.rightDock : thorium_web_reader_app_default.leftDock;
   const makeDockLabel = useCallback(() => {
     let label = "";
@@ -6433,26 +6418,26 @@ var DockPanel = ({
     if (actionKey) {
       if (!isPopulated) {
         label += ` \u2013 ${t("reader.app.docking.dockingClosed", { action: t(`reader.${actionKey}.heading`) })}`;
-      } else if (isCollapsed) {
-        label += ` \u2013 ${t("reader.app.docking.dockingCollapsed", { action: t(`reader.${actionKey}.heading`) })}`;
       }
     } else {
       label += ` \u2013 ${t("reader.app.docking.dockingEmpty")}`;
     }
     return label;
-  }, [flow, direction, isPopulated, isCollapsed, actionKey, t]);
+  }, [flow, direction, isPopulated, actionKey, t]);
   const collapsePanel = useCallback(() => {
-    if (panelRef.current) {
-      panelRef.current.collapse();
-      dispatch(collapseDockPanel({ slot: flow, profile }));
+    try {
+      panelRef.current?.collapse();
+    } catch (error) {
+      console.warn(`Failed to collapse ${flow} dock panel`, error);
     }
-  }, [dispatch, flow, profile]);
+  }, [panelRef, flow]);
   const expandPanel = useCallback(() => {
-    if (panelRef.current) {
-      panelRef.current.expand();
-      dispatch(expandDockPanel({ slot: flow, profile }));
+    try {
+      panelRef.current?.resize(targetWidthRef.current);
+    } catch (error) {
+      console.warn(`Failed to expand ${flow} dock panel`, error);
     }
-  }, [dispatch, flow, profile]);
+  }, [panelRef, flow]);
   useEffect(() => {
     dispatch(activateDockPanel({ slot: flow, profile }));
     return () => {
@@ -6460,15 +6445,17 @@ var DockPanel = ({
     };
   }, [dispatch, flow, profile]);
   useEffect(() => {
-    isPopulated || forceExpand ? expandPanel() : collapsePanel();
-  }, [isPopulated, forceExpand, collapsePanel, expandPanel]);
+    const raf = requestAnimationFrame(() => {
+      isPopulated ? expandPanel() : collapsePanel();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [isPopulated, dockConfig, collapsePanel, expandPanel]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     flow === "dockingEnd" /* end */ && /* @__PURE__ */ jsx(
       DockHandle,
       {
         flow: "dockingEnd" /* end */,
         isResizable,
-        isPopulated,
         hasDragIndicator
       }
     ),
@@ -6476,21 +6463,14 @@ var DockPanel = ({
       Panel,
       {
         id: `${flow}-panel`,
-        order: flow === "dockingEnd" /* end */ ? 3 : 1,
         collapsible: true,
         collapsedSize: 0,
-        ref: panelRef,
-        defaultSize: isPopulated ? sizes.width : 0,
+        panelRef,
+        defaultSize: 0,
         minSize: sizes.minWidth,
         maxSize: sizes.maxWidth,
-        onCollapse: collapsePanel,
-        onExpand: expandPanel,
-        onResize: (size) => size !== 0 && dispatch(setDockPanelWidth({
-          key: flow,
-          width: sizes.getCurrentPxWidth(size),
-          profile
-        })),
-        inert: isCollapsed,
+        groupResizeBehavior: "preserve-pixel-size",
+        inert: !isPopulated,
         children: /* @__PURE__ */ jsx(
           "div",
           {
@@ -6506,7 +6486,6 @@ var DockPanel = ({
       {
         flow: "dockingStart" /* start */,
         isResizable,
-        isPopulated,
         hasDragIndicator
       }
     )
@@ -6517,60 +6496,104 @@ var StatefulDockingWrapper = ({
 }) => {
   const preferences = useActionsPreferences();
   const profile = useAppSelector((state) => state.reader.profile);
+  const dispatch = useAppDispatch();
   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 startPanelRef = useRef(null);
+  const endPanelRef = useRef(null);
+  const startActionKey = startPanel.currentKey();
+  const endActionKey = endPanel.currentKey();
+  const isStartPopulated = startPanel.isPopulated();
+  const isEndPopulated = endPanel.isPopulated();
+  const handleLayoutChanged = useCallback((_layout, meta) => {
+    if (!profile) return;
+    [
+      ["dockingStart" /* start */, startPanelRef, startActionKey, isStartPopulated],
+      ["dockingEnd" /* end */, endPanelRef, endActionKey, isEndPopulated]
+    ].forEach(([flow, ref, actionKey, isPopulated]) => {
+      const panel = ref.current;
+      if (!panel) return;
+      let inPixels;
+      try {
+        inPixels = panel.getSize().inPixels;
+      } catch (error) {
+        console.warn(`Failed to read ${flow} dock panel size`, error);
+        return;
+      }
+      if (!meta.isUserInteraction) {
+        if (!isPopulated && inPixels !== 0) {
+          try {
+            panel.collapse();
+          } catch (error) {
+            console.warn(`Failed to collapse ${flow} dock panel`, error);
+          }
+        }
+        return;
+      }
+      if (!actionKey) return;
+      if (inPixels === 0) {
+        dispatch(setActionOpen({ key: actionKey, isOpen: false, profile }));
+        return;
+      }
+      if (!isPopulated) {
+        dispatch(setActionOpen({ key: actionKey, isOpen: true, profile }));
+      }
+      dispatch(setDockPanelWidth({ key: flow, width: inPixels, profile }));
+    });
+  }, [profile, dispatch, startActionKey, endActionKey, isStartPopulated, isEndPopulated]);
   const breakpoint = useAppSelector((state) => state.theming.breakpoint);
+  const dockingPref = preferences.docking.dock;
+  const dockingMap = useMemo(() => makeBreakpointsMap({
+    defaultValue: "both" /* both */,
+    fromEnum: ThDockingTypes,
+    pref: dockingPref,
+    disabledValue: "none" /* none */
+  }), [dockingPref]);
+  const dockConfig = breakpoint && dockingMap[breakpoint] || "both" /* both */;
+  const hasStartSlot = dockConfig === "both" /* both */ || dockConfig === "start" /* start */;
+  const hasEndSlot = dockConfig === "both" /* both */ || dockConfig === "end" /* end */;
   if (!preferences.docking.dock) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   } else {
-    const dockingMap2 = makeBreakpointsMap({
-      defaultValue: "both" /* both */,
-      fromEnum: ThDockingTypes,
-      pref: preferences.docking.dock,
-      disabledValue: "none" /* none */
-    });
-    const dockConfig = breakpoint && dockingMap2[breakpoint] || "both" /* both */;
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(PanelGroup, { direction: "horizontal", children: [
-      (dockConfig === "both" /* both */ || dockConfig === "start" /* start */) && profile && /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Group, { id: "docking-panel-group", orientation: "horizontal", onLayoutChanged: handleLayoutChanged, children: [
+      hasStartSlot && profile && /* @__PURE__ */ jsx(
         DockPanel,
         {
-          actionKey: startPanel.currentKey(),
+          actionKey: startActionKey,
           flow: "dockingStart" /* start */,
+          dockConfig,
           sizes: {
-            width: startPanel.getWidth(),
             minWidth: startPanel.getMinWidth(),
-            maxWidth: startPanel.getMaxWidth(),
-            getCurrentPxWidth: startPanel.getCurrentPxWidth
+            maxWidth: startPanel.getMaxWidth()
           },
+          targetWidth: startPanel.getTargetWidth(),
           isResizable: startPanel.isResizable(),
-          isPopulated: startPanel.isPopulated(),
-          isCollapsed: startPanel.isCollapsed(),
-          forceExpand: startPanel.forceExpand(),
+          isPopulated: isStartPopulated,
           hasDragIndicator: startPanel.hasDragIndicator(),
-          profile
+          profile,
+          panelRef: startPanelRef
         }
       ),
-      /* @__PURE__ */ jsx(Panel, { id: "main-panel", order: 2, children }),
-      (dockConfig === "both" /* both */ || dockConfig === "end" /* end */) && profile && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Panel, { id: "main-panel", children }),
+      hasEndSlot && profile && /* @__PURE__ */ jsx(
         DockPanel,
         {
-          actionKey: endPanel.currentKey(),
+          actionKey: endActionKey,
           flow: "dockingEnd" /* end */,
+          dockConfig,
           sizes: {
-            width: endPanel.getWidth(),
             minWidth: endPanel.getMinWidth(),
-            maxWidth: endPanel.getMaxWidth(),
-            getCurrentPxWidth: endPanel.getCurrentPxWidth
+            maxWidth: endPanel.getMaxWidth()
           },
+          targetWidth: endPanel.getTargetWidth(),
           isResizable: endPanel.isResizable(),
-          isPopulated: endPanel.isPopulated(),
-          isCollapsed: endPanel.isCollapsed(),
-          forceExpand: endPanel.forceExpand(),
+          isPopulated: isEndPopulated,
           hasDragIndicator: endPanel.hasDragIndicator(),
-          profile
+          profile,
+          panelRef: endPanelRef
         }
       )
     ] }) });
@@ -6586,18 +6609,21 @@ var useFocusedDockableKey = () => {
       if (!dockable || dockable === "none" /* none */) return false;
       return dockingKey === "dockingTransient" /* transient */ || dockingKey === "dockingStart" /* start */ && (dockable === "start" /* start */ || dockable === "both" /* both */) || dockingKey === "dockingEnd" /* end */ && (dockable === "end" /* end */ || dockable === "both" /* both */);
     };
+    const resolve = (key) => {
+      return { key, reserved: isReservedByPref(actionsKeys[key]) };
+    };
     let el = active;
     while (el) {
       const id = el.getAttribute("id");
       if (id) {
-        if (checkKey(id)) return id;
+        if (checkKey(id)) return resolve(id);
         const keyFromId = Object.keys(actionsKeys).find((k) => id.startsWith(`${k}-`));
-        if (keyFromId && checkKey(keyFromId)) return keyFromId;
+        if (keyFromId && checkKey(keyFromId)) return resolve(keyFromId);
       }
       const dataKey = el.getAttribute("data-key");
       if (dataKey) {
         const key = dataKey.slice(dataKey.lastIndexOf("-") + 1);
-        if (key && checkKey(key)) return key;
+        if (key && checkKey(key)) return resolve(key);
       }
       el = el.parentElement;
     }
@@ -6833,5 +6859,5 @@ var useReaderHeaderBase = (actionKeys) => {
 };
 
 export { NavPeripheralType, NavigatorProvider, ORDERED_LINE_HEIGHT_OPTIONS, StatefulActionIcon, StatefulAudioAutoPlay, StatefulAudioPlaybackRateContainer, StatefulAudioPlaybackRateTrigger, StatefulAudioRemotePlaybackTrigger, StatefulAudioSettingsContainer, StatefulAudioSkipBackwardInterval, StatefulAudioSkipForwardInterval, StatefulAudioSkipInterval, StatefulAudioSleepTimerContainer, StatefulAudioSleepTimerTrigger, StatefulAudioTocContainer, StatefulAudioTocTrigger, StatefulAudioVolumeContainer, StatefulAudioVolumeTrigger, StatefulBackLink, StatefulBottomSheet, StatefulCollapsibleActionsBar, StatefulColumns, StatefulCompactPopoverSheet, StatefulDockedSheet, StatefulDockingWrapper, StatefulDropdown, StatefulFontFamily, StatefulFullScreenSheet, StatefulFullscreenTrigger, StatefulGlobalPreferencesProvider, StatefulGroupWrapper, StatefulHyphens, StatefulJumpToPositionContainer, StatefulJumpToPositionTrigger, StatefulLayout, StatefulLetterSpacing, StatefulLigatures, StatefulLineHeight, StatefulModalBase, StatefulModalSheet, StatefulNoRuby, StatefulNumberField, StatefulOverflowMenu, StatefulOverflowMenuItem, StatefulParagraphIndent, StatefulParagraphSpacing, StatefulPopoverSheet, StatefulPreferencesProvider, StatefulPublisherStyles, StatefulRadioGroup, StatefulSettingsTrigger, StatefulSettingsWrapper, StatefulSheetWrapper, StatefulSlider, StatefulSliderWithPresets, StatefulSpacingGroup, StatefulSpacingGroupContainer, StatefulSpacingPresets, StatefulSwitch, StatefulTextAlign, StatefulTextGroup, StatefulTextGroupContainer, StatefulTextNormalize, StatefulTheme, StatefulTocContainer, StatefulTocTrigger, StatefulVisualSettingsContainer, StatefulWordSpacing, StatefulZoom, ThPluginProvider, ThPluginRegistry, UnstableStatefulFontWeight, ZOOM_IN_KEY_COMBOS, ZOOM_OUT_KEY_COMBOS, createAudioDefaultPlugin, createDefaultPlugin, fromActionPeripheralType, fromDockingPeripheralType, thorium_web_button_default, thorium_web_overflow_default, thorium_web_reader_app_default, thorium_web_reader_header_default, toActionPeripheralType, toDockingPeripheralType, useActionComponentStatus, useDocking, useEffectiveRange, useFocusedDockableKey, useGridNavigation, useGridTemplate, useIsScroll, useLineHeight, useNavigator, usePlaceholder, usePlugins, usePositionStorage, usePublication, useReaderHeaderBase, useReaderSetting, useReaderTransitions, useSettingsComponentStatus, useSpacingPresets, useTocEntryTracking, useTocTreeBuilder };
-//# sourceMappingURL=chunk-C6LWEQL2.mjs.map
-//# sourceMappingURL=chunk-C6LWEQL2.mjs.map
+//# sourceMappingURL=chunk-7X5KT42Z.mjs.map
+//# sourceMappingURL=chunk-7X5KT42Z.mjs.map