@edrlab/thorium-web 1.4.0 → 1.5.0

package/dist/{chunk-TSLTLQ6O.mjs → chunk-BBCSLDQT.mjs}

@@ -1,15 +1,15 @@
-import { useFonts, Peripherals, getReaderClassNames, StatefulReaderHeader, StatefulReaderFooter } from './chunk-6MONB2DN.mjs';
-import { createDefaultPlugin, useSpacingPresets, useSettingsComponentStatus, useIsScroll, usePositionStorage, useLineHeight, NavigatorProvider, thorium_web_reader_app_default, StatefulDockingWrapper, useReaderTransitions, thorium_web_button_default } from './chunk-PXXWEMNL.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-WLVE3WNW.mjs';
-import { useFilteredPreferenceKeys, usePreferences, resolveContentProtectionConfig, buildThemeObject } from './chunk-XRFLDNAY.mjs';
+import { useFonts, useZoomCallbacks, getReaderClassNames, StatefulReaderHeader, StatefulReaderFooter } from './chunk-Y5X74VW7.mjs';
+import { createDefaultPlugin, useSpacingPresets, useSettingsComponentStatus, useIsScroll, usePositionStorage, fromActionPeripheralType, NavPeripheralType, NavigatorProvider, thorium_web_reader_app_default, StatefulDockingWrapper, useReaderTransitions, thorium_web_button_default, useLineHeight, ZOOM_IN_KEY_COMBOS, ZOOM_OUT_KEY_COMBOS, toActionPeripheralType } from './chunk-KJ55Q63A.mjs';
+import { makeBreakpointsMap, isActiveElement, isKeyboardTriggered } from './chunk-VENFFPK2.mjs';
+import { useFullscreen, useEpubNavigator, useTimeline, useDocumentTitle, useEpubSettingsCache } from './chunk-GRYEOCGD.mjs';
+import { setImmersive, setFullscreen, setTimeline, setHovering, toggleImmersive, setPublicationStart, setPublicationEnd, toggleActionOpen, setScrollAffordance, debounce, setDirection, setPlatformModifier, setUserNavigated, setTheme, setHasArrows, setLoading } from './chunk-PAFJZH7O.mjs';
+import { useFilteredPreferenceKeys, usePreferences, resolveContentProtectionConfig, buildThemeObject, useActionsPreferences } from './chunk-PRQBFBJ7.mjs';
 import { ThArrowVariant } from './chunk-2YRT7RNW.mjs';
-import { useAppSelector, useAppDispatch, useAppStore } from './chunk-A575ZW4A.mjs';
-import { getPlatformModifier } from './chunk-5LUMM7FW.mjs';
-import { ThPluginRegistry, ThPluginProvider, ThNavigationButton } from './chunk-P6ILEQ5P.mjs';
+import { useAppSelector, useAppDispatch } from './chunk-A575ZW4A.mjs';
+import { getPlatformModifier } from './chunk-KOR74F6M.mjs';
+import { ThPluginRegistry, ThPluginProvider, ThNavigationButton } from './chunk-ZD4LTF6G.mjs';
 import { usePrevious } from './chunk-YZ73DHRU.mjs';
-import { useI18n } from './chunk-NUXGQWED.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';
@@ -28,7 +28,7 @@ var usePaginatedArrows = () => {
   const { preferences } = usePreferences();
   const hasArrows = useAppSelector((state) => state.reader.hasArrows);
   const isFXL = useAppSelector((state) => state.publication.isFXL);
-  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
+  const breakpoint = useAppSelector((state) => state.theming.containerBreakpoint);
   const {
     isScroll,
     fromImmersive,
@@ -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,57 @@ var useEpubStatelessCache = (textAlign, columnCount, fontFamily, fontSize, fontW
   cache.current.reducedMotion = reducedMotion;
   return cache;
 };
+var useObservableCondition = (value) => {
+  const listeners = useRef(/* @__PURE__ */ new Set());
+  const current = useRef(value);
+  const condition = useRef({
+    subscribe(cb) {
+      listeners.current.add(cb);
+      cb(current.current);
+      return () => listeners.current.delete(cb);
+    }
+  }).current;
+  useEffect(() => {
+    if (current.current === value) return;
+    current.current = value;
+    listeners.current.forEach((cb) => cb(value));
+  }, [value]);
+  return condition;
+};
+
+// src/components/Epub/Hooks/useEpubKeyboardPeripherals.ts
+var useEpubKeyboardPeripherals = () => {
+  const isScroll = useIsScroll();
+  const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const noScroll = useObservableCondition(!isScroll);
+  const zoomActive = useObservableCondition(!isFXL);
+  const { actionsKeys } = useActionsPreferences();
+  return useMemo(() => {
+    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;
+      if (shortcut) config.push({ type: toActionPeripheralType(key), keyCombos: shortcut.keyCombos });
+    }
+    return config;
+  }, [noScroll, zoomActive, actionsKeys]);
+};
 var useEpubPreferencesConfig = ({
   isFXL,
   settings,
@@ -224,10 +276,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({
@@ -307,7 +359,6 @@ var useEpubPreferencesConfig = ({
       fontFamily: isFontFamilyUsed ? getFontMetadata(settings.fontFamily[fontLanguage] ?? "")?.fontStack || null : void 0,
       fontSize: isFontSizeUsed ? settings.fontSize : void 0,
       fontWeight: isFontWeightUsed ? settings.fontWeight : void 0,
-      hyphens: isHyphensUsed ? settings.hyphens : void 0,
       ligatures: isLigaturesUsed ? settings.ligatures : void 0,
       noRuby: isNoRubyUsed ? settings.noRuby : void 0,
       letterSpacing: !isLetterSpacingUsed || settings.publisherStyles ? void 0 : settings.letterSpacing,
@@ -319,6 +370,7 @@ var useEpubPreferencesConfig = ({
       paragraphSpacing: !isParagraphSpacingUsed || settings.publisherStyles ? void 0 : settings.paragraphSpacing,
       scroll: isVerticalScript ? true : !isLayoutUsed ? void 0 : settings.scroll,
       textAlign: isTextAlignUsed ? settings.textAlign : void 0,
+      hyphens: isHyphensUsed && settings.textAlign !== "publisher" ? settings.hyphens : void 0,
       textNormalization: isTextNormalizeUsed ? settings.textNormalization : void 0,
       wordSpacing: !isWordSpacingUsed || settings.publisherStyles ? void 0 : settings.wordSpacing,
       ...themeProps
@@ -333,7 +385,6 @@ var useEpubPreferencesConfig = ({
     preferences.theming.themes.keys,
     preferences.theming.themes.systemThemes,
     getFontMetadata,
-    lineHeightOptions,
     fxlThemeKeys,
     reflowThemeKeys,
     isVerticalScript,
@@ -351,7 +402,8 @@ var useEpubPreferencesConfig = ({
     isParagraphSpacingUsed,
     isTextAlignUsed,
     isTextNormalizeUsed,
-    isWordSpacingUsed
+    isWordSpacingUsed,
+    lineHeightOptions
   ]);
   const epubDefaults = useMemo(() => {
     if (isFXL) return {};
@@ -426,7 +478,6 @@ var useEpubReaderInit = ({
   getFontInjectables,
   fxlThemeKeys,
   reflowThemeKeys,
-  lineHeightOptions,
   arrowsOccupySpace,
   arrowsWidth,
   colorScheme,
@@ -447,7 +498,6 @@ var useEpubReaderInit = ({
     arrowsWidth,
     preferences,
     getFontMetadata,
-    lineHeightOptions,
     fxlThemeKeys,
     reflowThemeKeys
   });
@@ -462,6 +512,7 @@ var useEpubReaderInit = ({
     if (!isFXL) removeFontResources();
     onCleanup?.();
   }, [isFXL, removeFontResources, onCleanup]);
+  const keyboardPeripherals = useEpubKeyboardPeripherals();
   const { EpubNavigatorLoad, EpubNavigatorDestroy } = useEpubNavigator();
   const isNavigatorLoadedEpub = useRef(false);
   useEffect(() => {
@@ -479,7 +530,8 @@ var useEpubReaderInit = ({
       preferences: epubPreferences,
       defaults: epubDefaults,
       injectables: injectables || void 0,
-      contentProtection: contentProtectionConfig
+      contentProtection: contentProtectionConfig,
+      keyboardPeripherals
     };
     isNavigatorLoadedEpub.current = true;
     onNavigatorReady?.();
@@ -514,7 +566,8 @@ var StatefulReader = ({
   publication,
   localDataKey,
   plugins,
-  positionStorage
+  positionStorage,
+  containerRefSetter
 }) => {
   const [pluginsRegistered, setPluginsRegistered] = useState(false);
   useLayoutEffect(() => {
@@ -530,9 +583,9 @@ var StatefulReader = ({
   if (!pluginsRegistered) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ThPluginProvider, { children: /* @__PURE__ */ jsx(StatefulReaderInner, { publication, localDataKey, positionStorage }) }) });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ThPluginProvider, { children: /* @__PURE__ */ jsx(StatefulReaderInner, { publication, localDataKey, positionStorage, containerRefSetter }) }) });
 };
-var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
+var StatefulReaderInner = ({ publication, localDataKey, positionStorage, containerRefSetter }) => {
   const { fxlActionKeys, fxlThemeKeys, reflowActionKeys, reflowThemeKeys } = useFilteredPreferenceKeys();
   const { preferences, getFontMetadata, getFontInjectables } = usePreferences();
   const { direction: uiDirection } = useLocale();
@@ -542,6 +595,7 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
   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);
@@ -573,6 +627,7 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
   const colorScheme = useAppSelector((state) => state.theming.colorScheme);
   const reducedMotion = useAppSelector((state) => state.theming.prefersReducedMotion);
   const breakpoint = useAppSelector((state) => state.theming.breakpoint);
+  const containerBreakpoint = useAppSelector((state) => state.theming.containerBreakpoint);
   const isImmersive = useAppSelector((state) => state.reader.isImmersive);
   const isHovering = useAppSelector((state) => state.reader.isHovering);
   const layoutUI = isFXL ? preferences.theming.layout.ui?.fxl || "layered-ui" /* layered */ : isScroll ? preferences.theming.layout.ui?.reflow || "layered-ui" /* layered */ : "stacked-ui" /* stacked */;
@@ -612,7 +667,7 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
   const onFsChange = useCallback((isFullscreen) => {
     dispatch(setFullscreen(isFullscreen));
   }, [dispatch]);
-  const fs = useFullscreen(onFsChange);
+  useFullscreen(onFsChange);
   const epubNavigator = useEpubNavigator();
   const {
     goLeft,
@@ -639,7 +694,6 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
       dispatch(setTimeline(timeline2));
     }
   });
-  const lineHeightOptions = useLineHeight();
   const documentTitleFormat = preferences.metadata?.documentTitle?.format;
   let documentTitle;
   if (documentTitleFormat) {
@@ -699,7 +753,7 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
       }
     }
   }, [getCframes, cache, preferences.affordances.scroll, goLeft, goRight, dispatch, activateImmersiveOnAction, toggleIsImmersive]);
-  const handleClick = useCallback((event) => {
+  const handleClick = useCallback((_event) => {
     if (cache.current.layoutUI === "layered-ui" /* layered */ && (!cache.current.settings.scroll || preferences.affordances.scroll.toggleOnMiddlePointer.includes("click"))) {
       toggleIsImmersive();
     }
@@ -728,60 +782,33 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
       }
     }
   }, [navLayout, currentLocator, handleFXLProgression]);
-  const appStore = useAppStore();
-  const p = useMemo(() => new Peripherals(appStore, preferences.actions, {
-    moveTo: (direction) => {
-      const navigationCallback = () => {
+  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;
+    }
+  }, [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) {
@@ -847,9 +874,45 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
     },
     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 && profile) dispatch(toggleActionOpen({ key: actionKey, profile }));
+        }
+      }
     }
-  }), [p, initReadingEnv, getCframes, navLayout, setLocalData, dispatch, handleTap, handleClick, cache, preferences.affordances.scroll, isScrollStart, isScrollEnd, updatePublicationNavigationState]);
+  }), [initReadingEnv, navLayout, setLocalData, dispatch, handleTap, handleClick, cache, preferences.affordances.scroll, isScrollStart, isScrollEnd, updatePublicationNavigationState, moveTo, goProgression, zoomIn, zoomOut, profile]);
   const initialPosition = useMemo(() => getLocalData(), [getLocalData]);
   const { navigatorReady } = useEpubReaderInit({
     container,
@@ -868,7 +931,6 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
     getFontInjectables,
     fxlThemeKeys,
     reflowThemeKeys,
-    lineHeightOptions,
     arrowsOccupySpace,
     arrowsWidth,
     colorScheme,
@@ -877,12 +939,6 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
     onNavigatorReady: () => {
       dispatch(setLoading(false));
     },
-    onNavigatorLoaded: () => {
-      p.observe(window);
-    },
-    onCleanup: () => {
-      p.destroy();
-    },
     fxlProgressionCallback: handleFXLProgression
   });
   const applyConstraint = useCallback(async (value) => {
@@ -925,13 +981,15 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(NavigatorProvider, { visualNavigator: epubNavigator, children: /* @__PURE__ */ jsx("main", { className: thorium_web_reader_app_default.main, children: /* @__PURE__ */ jsx(StatefulDockingWrapper, { children: /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRefSetter,
       className: getReaderClassNames({
         isScroll,
         isImmersive,
         isHovering,
         isFXL,
         layoutUI,
-        breakpoint
+        breakpoint,
+        containerBreakpoint
       }),
       children: [
         /* @__PURE__ */ jsx(
@@ -986,5 +1044,5 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
 };
 
 export { StatefulReader };
-//# sourceMappingURL=chunk-TSLTLQ6O.mjs.map
-//# sourceMappingURL=chunk-TSLTLQ6O.mjs.map
+//# sourceMappingURL=chunk-BBCSLDQT.mjs.map
+//# sourceMappingURL=chunk-BBCSLDQT.mjs.map