@edrlab/thorium-web 1.4.1 → 1.5.1

package/dist/{chunk-SI4FBFHM.mjs → chunk-3ITHCTDL.mjs}

@@ -1,20 +1,20 @@
-import { useFonts, Peripherals, getReaderClassNames, StatefulReaderHeader, StatefulReaderFooter } from './chunk-KGSFTRCH.mjs';
-import { createDefaultPlugin, useSpacingPresets, useSettingsComponentStatus, useIsScroll, usePositionStorage, useLineHeight, NavigatorProvider, thorium_web_reader_app_default, StatefulDockingWrapper, useReaderTransitions, thorium_web_button_default } from './chunk-MSHUPSBI.mjs';
-import { makeBreakpointsMap, isActiveElement } from './chunk-VENFFPK2.mjs';
-import { useFullscreen, useEpubNavigator, useTimeline, useDocumentTitle, useEpubSettingsCache } from './chunk-SZAVAQ6S.mjs';
-import { setImmersive, setFullscreen, setTimeline, setHovering, toggleImmersive, setPublicationStart, setPublicationEnd, toggleActionOpen, setScrollAffordance, debounce, setDirection, setPlatformModifier, setUserNavigated, setTheme, setHasArrows, setLoading } from './chunk-YEVLT3AV.mjs';
-import { useFilteredPreferenceKeys, usePreferences, resolveContentProtectionConfig, buildThemeObject } from './chunk-OD75GC5N.mjs';
+import { useFonts, useZoomCallbacks, getReaderClassNames, StatefulReaderHeader, StatefulReaderFooter } from './chunk-KXOIN35D.mjs';
+import { ThPluginRegistry, createDefaultPlugin, ThPluginProvider, useSpacingPresets, useSettingsComponentStatus, useIsScroll, useFocusedDockableKey, usePositionStorage, fromActionPeripheralType, fromDockingPeripheralType, NavPeripheralType, NavigatorProvider, thorium_web_reader_app_default, StatefulDockingWrapper, useReaderTransitions, thorium_web_button_default, useLineHeight, useActionComponentStatus, ZOOM_IN_KEY_COMBOS, ZOOM_OUT_KEY_COMBOS, toActionPeripheralType, toDockingPeripheralType } from './chunk-THOJRBVD.mjs';
+import { makeBreakpointsMap, isActiveElement, isKeyboardTriggered } from './chunk-VYSDLACR.mjs';
+import { useFullscreen, useEpubNavigator, useTimeline, useDocumentTitle, useEpubSettingsCache, useObservableCondition } from './chunk-2B3HE57E.mjs';
+import { useI18n } from './chunk-2NCN2AG2.mjs';
+import { setImmersive, setFullscreen, setTimeline, setHovering, toggleImmersive, setPublicationStart, setPublicationEnd, toggleActionOpen, dockAction, setScrollAffordance, debounce, setDirection, setPlatformModifier, setUserNavigated, setTheme, setHasArrows, setLoading } from './chunk-YE5QOQUT.mjs';
+import { useFilteredPreferenceKeys, usePreferences, resolveContentProtectionConfig, buildThemeObject, useActionsPreferences } from './chunk-3VB756GR.mjs';
 import { ThArrowVariant } from './chunk-2YRT7RNW.mjs';
-import { useAppSelector, useAppDispatch, useAppStore } from './chunk-A575ZW4A.mjs';
-import { getPlatformModifier } from './chunk-44PEO3DS.mjs';
-import { ThPluginRegistry, ThPluginProvider, ThNavigationButton } from './chunk-ETLIGONP.mjs';
+import { useAppSelector, useAppDispatch } from './chunk-A575ZW4A.mjs';
+import { getPlatformModifier } from './chunk-X63WSMOH.mjs';
+import { ThNavigationButton } from './chunk-AXX4U2FW.mjs';
 import { usePrevious } from './chunk-YZ73DHRU.mjs';
-import { useI18n } from './chunk-2NCN2AG2.mjs';
 import { useState, useLayoutEffect, useRef, useEffect, useCallback, useMemo } from 'react';
-import { useLocale } from 'react-aria';
 import { Layout, Locator } from '@readium/shared';
 import classNames2 from 'classnames';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useLocale } from 'react-aria';
 
 // src/components/assets/styles/thorium-web.reader.paginatedArrow.module.css
 var thorium_web_reader_paginatedArrow_default = {
@@ -138,8 +138,10 @@ var StatefulReaderArrowButton = ({
     return className2;
   };
   useEffect(() => {
-    if ((isDisabled || !hasArrows && !isHovering) && isActiveElement(buttonRef.current)) {
-      buttonRef.current.blur();
+    const el = buttonRef.current;
+    if (!el || !isActiveElement(el)) return;
+    if (isDisabled || !hasArrows && !isHovering && !isKeyboardTriggered(el)) {
+      el.blur();
     }
   });
   const blurOnEsc = (event) => {
@@ -158,7 +160,6 @@ var StatefulReaderArrowButton = ({
       onKeyDown: blurOnEsc,
       className: classNames2(className, handleClassNameFromSpaceProp(), handleClassNameFromState()),
       isDisabled,
-      preventFocusOnPress: true,
       ...props,
       compounds: {
         tooltipTrigger: {
@@ -215,6 +216,55 @@ var useEpubStatelessCache = (textAlign, columnCount, fontFamily, fontSize, fontW
   cache.current.reducedMotion = reducedMotion;
   return cache;
 };
+var useEpubKeyboardPeripherals = () => {
+  const isScroll = useIsScroll();
+  const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const noScroll = useObservableCondition(!isScroll);
+  const zoomActive = useObservableCondition(!isFXL);
+  const { actionsKeys, docking } = useActionsPreferences();
+  const { isSupported: isFullscreenSupported } = useFullscreen();
+  const { reflowActionKeys, fxlActionKeys } = useFilteredPreferenceKeys();
+  const orderArray = isFXL ? fxlActionKeys : reflowActionKeys;
+  const { isComponentAvailable: isFullscreenAvailable } = useActionComponentStatus({ actionKey: "fullscreen" /* fullscreen */, orderArray, additionalCondition: isFullscreenSupported });
+  const { isComponentAvailable: isTocAvailable } = useActionComponentStatus({ actionKey: "toc" /* toc */, orderArray });
+  const { isComponentAvailable: isSettingsAvailable } = useActionComponentStatus({ actionKey: "settings" /* settings */, orderArray });
+  const { isComponentAvailable: isJumpToPositionAvailable } = useActionComponentStatus({ actionKey: "jumpToPosition" /* jumpToPosition */, orderArray });
+  return useMemo(() => {
+    const actionAvailability = {
+      ["fullscreen" /* fullscreen */]: isFullscreenAvailable,
+      ["toc" /* toc */]: isTocAvailable,
+      ["settings" /* settings */]: isSettingsAvailable,
+      ["jumpToPosition" /* jumpToPosition */]: isJumpToPositionAvailable
+    };
+    const config = [
+      { type: NavPeripheralType.progressForward, keyCombos: [{ keyCode: 32, suppressOnInteractiveElement: true, condition: noScroll }] },
+      { type: NavPeripheralType.progressBackward, keyCombos: [{ keyCode: 32, shift: true, suppressOnInteractiveElement: true, condition: noScroll }] },
+      { type: NavPeripheralType.moveRight, keyCombos: [{ keyCode: 39, suppressOnInteractiveElement: true, condition: noScroll }] },
+      { type: NavPeripheralType.moveLeft, keyCombos: [{ keyCode: 37, suppressOnInteractiveElement: true, condition: noScroll }] },
+      { type: NavPeripheralType.moveUp, keyCombos: [
+        { keyCode: 38, suppressOnInteractiveElement: true, condition: noScroll },
+        { keyCode: 33, suppressOnInteractiveElement: true, condition: noScroll }
+      ] },
+      { type: NavPeripheralType.moveDown, keyCombos: [
+        { keyCode: 40, suppressOnInteractiveElement: true, condition: noScroll },
+        { keyCode: 34, suppressOnInteractiveElement: true, condition: noScroll }
+      ] },
+      { type: NavPeripheralType.moveHome, keyCombos: [{ keyCode: 36, suppressOnInteractiveElement: true, condition: noScroll }] },
+      { type: NavPeripheralType.moveEnd, keyCombos: [{ keyCode: 35, suppressOnInteractiveElement: true, condition: noScroll }] },
+      { type: NavPeripheralType.zoomIn, keyCombos: ZOOM_IN_KEY_COMBOS.map((c) => ({ ...c, condition: zoomActive })) },
+      { type: NavPeripheralType.zoomOut, keyCombos: ZOOM_OUT_KEY_COMBOS.map((c) => ({ ...c, condition: zoomActive })) }
+    ];
+    for (const [key, tokens] of Object.entries(actionsKeys)) {
+      const shortcut = tokens?.shortcut;
+      const isAvailable = actionAvailability[key] ?? true;
+      if (shortcut && isAvailable) config.push({ type: toActionPeripheralType(key), keyCombos: shortcut.keyCombos });
+    }
+    for (const [key, tokens] of Object.entries(docking.keys)) {
+      if (tokens?.shortcut) config.push({ type: toDockingPeripheralType(key), keyCombos: tokens.shortcut.keyCombos });
+    }
+    return config;
+  }, [noScroll, zoomActive, actionsKeys, docking.keys, isFullscreenAvailable, isTocAvailable, isSettingsAvailable, isJumpToPositionAvailable]);
+};
 var useEpubPreferencesConfig = ({
   isFXL,
   settings,
@@ -224,10 +274,10 @@ var useEpubPreferencesConfig = ({
   arrowsWidth,
   preferences,
   getFontMetadata,
-  lineHeightOptions,
   fxlThemeKeys,
   reflowThemeKeys
 }) => {
+  const { processedValues: lineHeightOptions } = useLineHeight();
   const scriptMode = useAppSelector((state) => state.publication.scriptMode);
   const isVerticalScript = scriptMode === "cjk-vertical" || scriptMode === "mongolian-vertical";
   const { isComponentUsed: isFontFamilyUsed } = useSettingsComponentStatus({
@@ -333,7 +383,6 @@ var useEpubPreferencesConfig = ({
     preferences.theming.themes.keys,
     preferences.theming.themes.systemThemes,
     getFontMetadata,
-    lineHeightOptions,
     fxlThemeKeys,
     reflowThemeKeys,
     isVerticalScript,
@@ -351,7 +400,8 @@ var useEpubPreferencesConfig = ({
     isParagraphSpacingUsed,
     isTextAlignUsed,
     isTextNormalizeUsed,
-    isWordSpacingUsed
+    isWordSpacingUsed,
+    lineHeightOptions
   ]);
   const epubDefaults = useMemo(() => {
     if (isFXL) return {};
@@ -426,7 +476,6 @@ var useEpubReaderInit = ({
   getFontInjectables,
   fxlThemeKeys,
   reflowThemeKeys,
-  lineHeightOptions,
   arrowsOccupySpace,
   arrowsWidth,
   colorScheme,
@@ -434,8 +483,7 @@ var useEpubReaderInit = ({
   contentProtectionConfig,
   onNavigatorReady,
   onNavigatorLoaded,
-  onCleanup,
-  fxlProgressionCallback
+  onCleanup
 }) => {
   const [navigatorReady, setNavigatorReady] = useState(false);
   const { epubPreferences, epubDefaults } = useEpubPreferencesConfig({
@@ -447,7 +495,6 @@ var useEpubReaderInit = ({
     arrowsWidth,
     preferences,
     getFontMetadata,
-    lineHeightOptions,
     fxlThemeKeys,
     reflowThemeKeys
   });
@@ -462,6 +509,7 @@ var useEpubReaderInit = ({
     if (!isFXL) removeFontResources();
     onCleanup?.();
   }, [isFXL, removeFontResources, onCleanup]);
+  const keyboardPeripherals = useEpubKeyboardPeripherals();
   const { EpubNavigatorLoad, EpubNavigatorDestroy } = useEpubNavigator();
   const isNavigatorLoadedEpub = useRef(false);
   useEffect(() => {
@@ -479,14 +527,15 @@ var useEpubReaderInit = ({
       preferences: epubPreferences,
       defaults: epubDefaults,
       injectables: injectables || void 0,
-      contentProtection: contentProtectionConfig
+      contentProtection: contentProtectionConfig,
+      keyboardPeripherals
     };
     isNavigatorLoadedEpub.current = true;
     onNavigatorReady?.();
     EpubNavigatorLoad(config, () => {
       setNavigatorReady(true);
       onNavigatorLoaded?.();
-    }, fxlProgressionCallback);
+    });
     return () => {
       if (isNavigatorLoadedEpub.current) {
         setNavigatorReady(false);
@@ -543,6 +592,7 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage, contain
   const { injectFontResources, removeFontResources, getAndroidFXLPatch } = useFonts();
   const container = useRef(null);
   const arrowsWidth = useRef(2 * ((preferences.theming.arrow.size || 40) + (preferences.theming.arrow.offset || 0)));
+  const profile = useAppSelector((state) => state.reader.profile);
   const isFXL = useAppSelector((state) => state.publication.isFXL);
   const isRTL = useAppSelector((state) => state.publication.isRTL);
   const positionsList = useAppSelector((state) => state.publication.positionsList);
@@ -608,13 +658,14 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage, contain
   const atPublicationStart = useAppSelector((state) => state.publication.atPublicationStart);
   const atPublicationEnd = useAppSelector((state) => state.publication.atPublicationEnd);
   const dispatch = useAppDispatch();
+  const getFocusedDockableKey = useFocusedDockableKey();
   useEffect(() => {
     dispatch(setImmersive(false));
   }, [isScroll, dispatch]);
   const onFsChange = useCallback((isFullscreen) => {
     dispatch(setFullscreen(isFullscreen));
   }, [dispatch]);
-  const fs = useFullscreen(onFsChange);
+  const { handleFullscreen } = useFullscreen(onFsChange);
   const epubNavigator = useEpubNavigator();
   const {
     goLeft,
@@ -622,7 +673,6 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage, contain
     goBackward,
     goForward,
     navLayout,
-    currentLocator,
     currentPositions,
     canGoBackward,
     canGoForward,
@@ -641,7 +691,6 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage, contain
       dispatch(setTimeline(timeline2));
     }
   });
-  const lineHeightOptions = useLineHeight();
   const documentTitleFormat = preferences.metadata?.documentTitle?.format;
   let documentTitle;
   if (documentTitleFormat) {
@@ -718,84 +767,42 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage, contain
       dispatch(setPublicationEnd(true));
     }
   }, [canGoBackward, canGoForward, dispatch]);
-  const handleFXLProgression = useCallback((locator) => {
-    setLocalData(locator);
-    updatePublicationNavigationState();
-  }, [setLocalData, updatePublicationNavigationState]);
-  const initReadingEnv = useCallback(async () => {
-    if (navLayout() === Layout.fixed) {
-      const cLoc = currentLocator();
-      if (cLoc) {
-        handleFXLProgression(cLoc);
-      }
+  const moveTo = useCallback((direction) => {
+    const navigationCallback = () => {
+      dispatch(setUserNavigated(true));
+      activateImmersiveOnAction();
+    };
+    switch (direction) {
+      case "right":
+        !cache.current.settings.scroll && goRight(!cache.current.reducedMotion, navigationCallback);
+        break;
+      case "left":
+        !cache.current.settings.scroll && goLeft(!cache.current.reducedMotion, navigationCallback);
+        break;
     }
-  }, [navLayout, currentLocator, handleFXLProgression]);
-  const appStore = useAppStore();
-  const p = useMemo(() => new Peripherals(appStore, preferences.actions, {
-    moveTo: (direction) => {
-      const navigationCallback = () => {
+  }, [dispatch, activateImmersiveOnAction, cache, goRight, goLeft]);
+  const { zoomIn, zoomOut } = useZoomCallbacks(epubNavigator);
+  const goProgression = useCallback((shiftKey) => {
+    if (!cache.current.settings?.scroll) {
+      const cb = () => {
         dispatch(setUserNavigated(true));
         activateImmersiveOnAction();
       };
-      switch (direction) {
-        case "right":
-          if (!cache.current.settings.scroll) {
-            goRight(!cache.current.reducedMotion, navigationCallback);
-          }
-          break;
-        case "left":
-          if (!cache.current.settings.scroll) {
-            goLeft(!cache.current.reducedMotion, navigationCallback);
-          }
-          break;
-      }
-    },
-    goProgression: (shiftKey) => {
-      if (!cache.current.settings?.scroll) {
-        const callback = () => {
-          dispatch(setUserNavigated(true));
-          activateImmersiveOnAction();
-        };
-        shiftKey ? goBackward(!cache.current.reducedMotion, callback) : goForward(!cache.current.reducedMotion, callback);
-      }
-    },
-    toggleAction: (actionKey) => {
-      switch (actionKey) {
-        case "fullscreen" /* fullscreen */:
-          fs.handleFullscreen();
-          break;
-        case "settings" /* settings */:
-        case "toc" /* toc */:
-          dispatch(toggleActionOpen({
-            key: actionKey,
-            profile: "epub"
-          }));
-          break;
-      }
+      shiftKey ? goBackward(!cache.current.reducedMotion, cb) : goForward(!cache.current.reducedMotion, cb);
     }
-  }), [appStore, preferences.actions, dispatch, activateImmersiveOnAction, cache, goRight, goLeft, goBackward, goForward, fs]);
+  }, [dispatch, activateImmersiveOnAction, cache, goBackward, goForward]);
   const listeners = useMemo(() => ({
     frameLoaded: async function(_wnd) {
-      await initReadingEnv();
-      const _cframes = getCframes();
-      _cframes?.forEach(
-        (frameManager) => {
-          if (frameManager) p.observe(frameManager.window);
-        }
-      );
-      p.observe(window);
     },
     positionChanged: async function(locator) {
-      if (navLayout() !== Layout.fixed) {
-        const debouncedHandleProgression = debounce(
-          async () => {
-            setLocalData(locator);
-            updatePublicationNavigationState();
-          },
-          250
-        );
-        debouncedHandleProgression();
-      }
+      const debouncedHandleProgression = debounce(
+        async () => {
+          setLocalData(locator);
+          updatePublicationNavigationState();
+        },
+        250
+      );
+      debouncedHandleProgression();
     },
     tap: function(_e) {
       handleTap(_e);
@@ -849,9 +856,59 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage, contain
     },
     contextMenu: function(_data) {
     },
-    peripheral: function(_data) {
+    peripheral: function(data) {
+      switch (data.type) {
+        case NavPeripheralType.progressForward:
+          goProgression(false);
+          break;
+        case NavPeripheralType.progressBackward:
+          goProgression(true);
+          break;
+        case NavPeripheralType.moveRight:
+          moveTo("right");
+          break;
+        case NavPeripheralType.moveLeft:
+          moveTo("left");
+          break;
+        case NavPeripheralType.moveUp:
+          moveTo("up");
+          break;
+        case NavPeripheralType.moveDown:
+          moveTo("down");
+          break;
+        case NavPeripheralType.moveHome:
+          moveTo("home");
+          break;
+        case NavPeripheralType.moveEnd:
+          moveTo("end");
+          break;
+        case NavPeripheralType.zoomIn:
+          zoomIn();
+          break;
+        case NavPeripheralType.zoomOut:
+          zoomOut();
+          break;
+        default: {
+          const actionKey = fromActionPeripheralType(data.type);
+          if (actionKey === "fullscreen" /* fullscreen */) {
+            handleFullscreen();
+            return;
+          }
+          if (actionKey && profile) {
+            dispatch(toggleActionOpen({ key: actionKey, profile }));
+            return;
+          }
+          const dockingKey = fromDockingPeripheralType(data.type);
+          if (dockingKey && profile) {
+            const actionKey2 = getFocusedDockableKey(dockingKey);
+            if (actionKey2) {
+              dispatch(dockAction({ key: actionKey2, dockingKey, profile }));
+            }
+          }
+        }
+      }
     }
-  }), [p, initReadingEnv, getCframes, navLayout, setLocalData, dispatch, handleTap, handleClick, cache, preferences.affordances.scroll, isScrollStart, isScrollEnd, updatePublicationNavigationState]);
+  }), [navLayout, setLocalData, dispatch, handleTap, handleClick, cache, preferences.affordances.scroll, isScrollStart, isScrollEnd, updatePublicationNavigationState, moveTo, goProgression, zoomIn, zoomOut, profile, handleFullscreen, getFocusedDockableKey]);
   const initialPosition = useMemo(() => getLocalData(), [getLocalData]);
   const { navigatorReady } = useEpubReaderInit({
     container,
@@ -870,7 +927,6 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage, contain
     getFontInjectables,
     fxlThemeKeys,
     reflowThemeKeys,
-    lineHeightOptions,
     arrowsOccupySpace,
     arrowsWidth,
     colorScheme,
@@ -878,14 +934,7 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage, contain
     contentProtectionConfig: resolveContentProtectionConfig(preferences.contentProtection, t),
     onNavigatorReady: () => {
       dispatch(setLoading(false));
-    },
-    onNavigatorLoaded: () => {
-      p.observe(window);
-    },
-    onCleanup: () => {
-      p.destroy();
-    },
-    fxlProgressionCallback: handleFXLProgression
+    }
   });
   const applyConstraint = useCallback(async (value) => {
     await submitPreferences({
@@ -990,5 +1039,5 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage, contain
 };
 
 export { StatefulReader };
-//# sourceMappingURL=chunk-SI4FBFHM.mjs.map
-//# sourceMappingURL=chunk-SI4FBFHM.mjs.map
+//# sourceMappingURL=chunk-3ITHCTDL.mjs.map
+//# sourceMappingURL=chunk-3ITHCTDL.mjs.map