@edrlab/thorium-web 1.4.0 → 1.5.0

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

@@ -1,21 +1,22 @@
 import { makeBreakpointsMap, isKeyboardTriggered, isActiveElement } from './chunk-VENFFPK2.mjs';
-import { useFullscreen, useLocalStorage, useEpubNavigator } from './chunk-SZAVAQ6S.mjs';
-import { setFullscreen, setReaderProfile, setPositionsList, setTocTree, setScriptMode, setRTL, setFXL, setHasDisplayTransformability, setActionOpen, dockAction, setHovering, setSettingsContainer, debounce, setColumnCount, initialWebPubSettingsState, initialSettingsState, setWebPubFontFamily, setFontFamily, setWebPubFontWeight, setFontWeight, setWebPubHyphens, setHyphens, setScroll, setWebPubLetterSpacing, setLetterSpacing, setWebPubLineHeight, setLineHeight, setWebPubParagraphIndent, setParagraphIndent, setWebPubParagraphSpacing, setParagraphSpacing, setWebPubWordSpacing, setWordSpacing, setWebPubSpacingPreset, setWebPubPublisherStyles, setSpacingPreset, setPublisherStyles, setWebPubTextAlign, setTextAlign, setWebPubTextNormalization, setTextNormalization, setWebPubLigatures, setLigatures, setWebPubNoRuby, setNoRuby, setTheme, setWebPubZoom, setFontSize, setSkipBackwardInterval, setSkipForwardInterval, setSkipInterval, setAutoPlay, toggleActionOpen, setVolume, setPlaybackRate, setSleepTimerRemainingSeconds, setSleepTimerOnTrackEnd, setSleepTimerOnFragmentEnd, setRemotePlaybackState, ThReduxPreferencesAdapter, ThReduxGlobalPreferencesAdapter, setImmersive, setOverflow, setUserNavigated, setTocEntry, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from './chunk-WLVE3WNW.mjs';
+import { useFullscreen, useLocalStorage, useEpubNavigator } from './chunk-GRYEOCGD.mjs';
+import { setFullscreen, setReaderProfile, setPositionsList, setTocTree, setScriptMode, setRTL, setFXL, setHasDisplayTransformability, setActionOpen, dockAction, setHovering, setSettingsContainer, debounce, setColumnCount, initialWebPubSettingsState, initialSettingsState, setWebPubFontFamily, setFontFamily, setWebPubFontWeight, setFontWeight, setWebPubHyphens, setHyphens, setScroll, setWebPubLetterSpacing, setLetterSpacing, setWebPubLineHeight, setLineHeight, setWebPubParagraphIndent, setParagraphIndent, setWebPubParagraphSpacing, setParagraphSpacing, setWebPubWordSpacing, setWordSpacing, setWebPubSpacingPreset, setWebPubPublisherStyles, setSpacingPreset, setPublisherStyles, setWebPubTextAlign, setTextAlign, setWebPubTextNormalization, setTextNormalization, setWebPubLigatures, setLigatures, setWebPubNoRuby, setNoRuby, setTheme, setWebPubZoom, setFontSize, setSkipBackwardInterval, setSkipForwardInterval, setSkipInterval, setAutoPlay, toggleActionOpen, setVolume, setPlaybackRate, setSleepTimerRemainingSeconds, setSleepTimerOnTrackEnd, setSleepTimerOnFragmentEnd, setRemotePlaybackState, ThReduxPreferencesAdapter, ThReduxGlobalPreferencesAdapter, setImmersive, setOverflow, setUserNavigated, setTocEntry, collapseDockPanel, expandDockPanel, activateDockPanel, deactivateDockPanel, setDockPanelWidth } from './chunk-PAFJZH7O.mjs';
 import { buildTocTree, findTocItemById } from './chunk-TEZB4ULX.mjs';
-import { useSharedPreferences, useActionsPreferences, prefixString, ThDockingTypes, ThSheetTypes, useAudioPreferences, usePreferences, useFilteredPreferenceKeys, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, ThTextSettingsKeys, ThSpacingSettingsKeys, buildThemeObject, defaultAudioSkipBackwardInterval, defaultAudioSkipForwardInterval, defaultAudioSkipInterval, defaultPreferences, ThPreferencesProvider, ThGlobalPreferencesProvider } from './chunk-XRFLDNAY.mjs';
+import { useSharedPreferences, useActionsPreferences, prefixString, ThDockingTypes, ThSheetTypes, useAudioPreferences, usePreferences, useFilteredPreferenceKeys, defaultSpacingSettingsSubpanel, defaultSpacingSettingsMain, defaultTextSettingsSubpanel, defaultTextSettingsMain, ThTextSettingsKeys, ThSpacingSettingsKeys, buildThemeObject, defaultAudioSkipBackwardInterval, defaultAudioSkipForwardInterval, defaultAudioSkipInterval, defaultPreferences, ThPreferencesProvider, ThGlobalPreferencesProvider } from './chunk-PRQBFBJ7.mjs';
 import { useAppDispatch, useAppSelector } from './chunk-A575ZW4A.mjs';
-import { isIOSish, buildShortcut, metaKeys } from './chunk-5LUMM7FW.mjs';
+import { isIOSish, metaKeys } from './chunk-KOR74F6M.mjs';
 import { ErrorHandler } from './chunk-RRDEPGBK.mjs';
-import { ThMenuItem, ThActionButton, ThMenu, ThCollapsibleActionsBar, ThPopover, ThContainerHeader, ThNavigationButton, ThContainerBody, ThModal, ThBottomSheet, ThCloseButton, ThDockedPanel, useFirstFocusable, ThTypedComponentRenderer, useActions, useActionComponentStatus, ThForm, ThFormNumberField, usePlugins, ThSettingsWrapper, ThRadioGroup, ThDropdown, ThSwitch, ThNumberField, ThSlider, ThSliderWithPresets, ThLink, ThLibrary, ThHome, ThBackArrow, ThFormSearchField } from './chunk-P6ILEQ5P.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-ZD4LTF6G.mjs';
 import { usePrevious } from './chunk-YZ73DHRU.mjs';
-import { useI18n } from './chunk-NUXGQWED.mjs';
+import { useI18n } from './chunk-2NCN2AG2.mjs';
 import { Text, Popover, Dialog, ListBox, ListBoxItem, Radio, Button, Keyboard, Toolbar, useFilter, Tree, TreeItem, TreeItemContent, Collection } from 'react-aria-components';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useObjectRef, useNumberFormatter, FocusScope, useLocale, useFocusWithin } from 'react-aria';
 import classNames4 from 'classnames';
-import React22, { createContext, useCallback, useRef, useContext, useMemo, useState, useEffect } from 'react';
+import React22, { createContext, useCallback, useRef, useMemo, useContext, useState, useEffect } from 'react';
 import { Link, HttpFetcher, Manifest, Publication, ReadingProgression, Layout, Feature, Profile } from '@readium/shared';
-import { getScriptMode, TextAlignment } from '@readium/navigator';
+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';
 
@@ -28,40 +29,47 @@ var thorium_web_overflow_default = {
   menuItemLabel: "thorium_web_overflow_menuItemLabel",
   menuItemShortcut: "thorium_web_overflow_menuItemShortcut"
 };
-var UnstableStatefulShortcut = ({
+var DIGIT_OFFSET = 48;
+var F_KEY_OFFSET = 112;
+var resolveKeyLabel = (keyCode, label, t) => {
+  if (label !== void 0) {
+    if (typeof label === "string") return label;
+    return t(label.key, { defaultValue: label.fallback });
+  }
+  if (keyCode >= 65 && keyCode <= 90) return String.fromCharCode(keyCode);
+  if (keyCode >= DIGIT_OFFSET && keyCode <= 57) return String.fromCharCode(keyCode);
+  if (keyCode >= F_KEY_OFFSET && keyCode <= 123) return `F${keyCode - F_KEY_OFFSET + 1}`;
+  return "";
+};
+var pickCombo = (keyCombos, platformModifier) => {
+  if (keyCombos.length === 1) return keyCombos[0];
+  const wantsCtrl = platformModifier.modifier === "ctrlKey";
+  const preferred = keyCombos.find((c) => wantsCtrl ? c.ctrl : c.meta);
+  return preferred ?? keyCombos[0];
+};
+var StatefulShortcut = ({
   className,
-  rawForm,
+  combo,
   representation,
   joiner
 }) => {
   const { shortcuts } = useSharedPreferences();
   const platformModifier = useAppSelector((state) => state.reader.platformModifier);
-  representation = representation ? representation : shortcuts.representation || "symbol" /* symbol */;
-  joiner = joiner ? joiner : shortcuts.joiner || " + ";
-  const shortcutObj = buildShortcut(rawForm);
-  if (shortcutObj) {
-    let shortcutRepresentation = [];
-    for (const prop in shortcutObj.modifiers) {
-      if (shortcutObj.modifiers[prop]) {
-        if (prop === "platformKey") {
-          shortcutRepresentation.push(platformModifier[representation]);
-        } else {
-          const metaKey = metaKeys[prop];
-          shortcutRepresentation.push(metaKey[representation]);
-        }
-      }
-    }
-    if (shortcutObj.char) {
-      shortcutRepresentation.push(shortcutObj.char);
-    }
-    if (shortcutRepresentation.length > 0) {
-      const displayShortcut = shortcutRepresentation.join(joiner);
-      return /* @__PURE__ */ jsx(Keyboard, { className, children: displayShortcut });
-    } else {
-      return /* @__PURE__ */ jsx(Fragment, {});
-    }
-  }
-  return /* @__PURE__ */ jsx(Fragment, {});
+  const { t } = useI18n();
+  const rep = representation ?? shortcuts.representation ?? "symbol" /* symbol */;
+  const sep = joiner ?? shortcuts.joiner ?? " + ";
+  const { keyCombos, label } = combo;
+  if (!keyCombos.length) return /* @__PURE__ */ jsx(Fragment, {});
+  const chosen = pickCombo(keyCombos, platformModifier);
+  const parts = [];
+  if (chosen.ctrl) parts.push(metaKeys.ctrlKey[rep]);
+  if (chosen.alt) parts.push(metaKeys.altKey[rep]);
+  if (chosen.shift) parts.push(metaKeys.shiftKey[rep]);
+  if (chosen.meta) parts.push(metaKeys.metaKey[rep]);
+  const keyLabel = resolveKeyLabel(chosen.keyCode, label, t);
+  if (keyLabel) parts.push(keyLabel);
+  if (!parts.length) return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(Keyboard, { className, children: parts.join(sep) });
 };
 var StatefulOverflowMenuItem = ({
   id,
@@ -70,6 +78,7 @@ var StatefulOverflowMenuItem = ({
   shortcut = void 0,
   ...props
 }) => {
+  const { shortcuts } = useSharedPreferences();
   const menuItemLabelId = `${id}-label`;
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     ThMenuItem,
@@ -90,11 +99,11 @@ var StatefulOverflowMenuItem = ({
             children: label
           }
         ),
-        shortcut && /* @__PURE__ */ jsx(
-          UnstableStatefulShortcut,
+        shortcut && shortcuts.displayIn?.includes("menuItem") && /* @__PURE__ */ jsx(
+          StatefulShortcut,
           {
             className: thorium_web_overflow_default.menuItemShortcut,
-            rawForm: shortcut
+            combo: shortcut
           }
         )
       ]
@@ -109,6 +118,7 @@ var thorium_web_button_default = {
   closeButton: "thorium_web_button_closeButton",
   backButton: "thorium_web_button_backButton",
   tooltip: "thorium_web_button_tooltip",
+  tooltipShortcut: "thorium_web_button_tooltipShortcut",
   alwaysVisible: "thorium_web_button_alwaysVisible",
   partiallyVisible: "thorium_web_button_partiallyVisible",
   iconCompSm: "thorium_web_button_iconCompSm",
@@ -120,10 +130,11 @@ var StatefulActionIcon = ({
   visibility,
   placement,
   tooltipLabel,
+  shortcut,
   children,
   ...props
 }) => {
-  const { theming } = useSharedPreferences();
+  const { theming, shortcuts } = useSharedPreferences();
   const triggerRef = useObjectRef(externalRef ?? null);
   const dispatch = useAppDispatch();
   const handleClassNameFromState = () => {
@@ -169,7 +180,10 @@ var StatefulActionIcon = ({
           placement,
           offset: theming.icon.tooltipOffset || 0
         },
-        label: tooltipLabel
+        label: /* @__PURE__ */ jsxs(Fragment, { children: [
+          tooltipLabel,
+          shortcut && shortcuts.displayIn?.includes("tooltip") && /* @__PURE__ */ jsx(StatefulShortcut, { className: thorium_web_button_default.tooltipShortcut, combo: shortcut })
+        ] })
       } : void 0,
       ...Object.fromEntries(Object.entries(props).filter(([key]) => key !== "className")),
       children
@@ -219,6 +233,7 @@ var StatefulFullscreenTrigger = ({ variant }) => {
 };
 var SvgMoreVert = (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-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z" }) });
 var more_vert_default = SvgMoreVert;
+var MENU_DEPENDENCIES = ["Trigger"];
 var StatefulOverflowMenu = ({
   id,
   className,
@@ -241,7 +256,7 @@ var StatefulOverflowMenu = ({
         triggerRef,
         selectionMode: "none",
         className: thorium_web_overflow_default.menu,
-        dependencies: ["Trigger"],
+        dependencies: MENU_DEPENDENCIES,
         items,
         compounds: {
           menuTrigger: {
@@ -274,7 +289,18 @@ var StatefulCollapsibleActionsBar = ({
   ...props
 }) => {
   const ref = useRef(null);
-  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
+  const breakpoint = useAppSelector((state) => state.theming.containerBreakpoint);
+  const compounds = useMemo(() => ({
+    menu: /* @__PURE__ */ jsx(
+      StatefulOverflowMenu,
+      {
+        id,
+        triggerRef: ref,
+        className: overflowMenuClassName,
+        items: []
+      }
+    )
+  }), [id, overflowMenuClassName]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     ThCollapsibleActionsBar,
     {
@@ -282,17 +308,7 @@ var StatefulCollapsibleActionsBar = ({
       id,
       items,
       breakpoint,
-      compounds: {
-        menu: /* @__PURE__ */ jsx(
-          StatefulOverflowMenu,
-          {
-            id,
-            triggerRef: ref,
-            className: overflowMenuClassName,
-            items: []
-          }
-        )
-      },
+      compounds,
       ...props
     }
   ) });
@@ -879,7 +895,7 @@ var useWebkitPatch = (isOpen) => {
   try {
     const visual = useNavigator().visual;
     getCframes = visual.getCframes;
-  } catch (e) {
+  } catch (_e) {
     getCframes = void 0;
   }
   useEffect(() => {
@@ -907,7 +923,7 @@ var useWebkitPatch = (isOpen) => {
         try {
           frameWindow = frame?.window;
           if (!frameWindow?.document?.scrollingElement) return;
-        } catch (e) {
+        } catch (_e) {
           return;
         }
         if (isHorizontalScroll) {
@@ -1457,8 +1473,7 @@ var StatefulDockedSheet = ({
   children,
   resetFocus,
   focusSelector,
-  focusWithinRef,
-  scrollTopOnFocus
+  focusWithinRef
 }) => {
   const { t } = useI18n();
   const dockPortal = flow && document.getElementById(flow);
@@ -1552,7 +1567,6 @@ var StatefulDockedSheet = ({
   }
 };
 var StatefulCompactPopoverSheet = ({
-  id,
   triggerRef,
   heading,
   className,
@@ -2052,6 +2066,7 @@ var StatefulJumpToPositionTrigger = ({ variant }) => {
       "aria-label": t("reader.actions.goToPosition.descriptive"),
       placement: "bottom",
       tooltipLabel: t("reader.actions.goToPosition.compact"),
+      shortcut: preferences.actionsKeys["jumpToPosition" /* jumpToPosition */].shortcut,
       onPress: () => setOpen(!actionState?.isOpen),
       children: /* @__PURE__ */ jsx(pin_drop_default, { "aria-hidden": "true", focusable: "false" })
     }
@@ -2480,6 +2495,7 @@ var StatefulSettingsTrigger = ({ variant }) => {
       "aria-label": isAudio ? t("reader.playback.preferences.audio.title") : t("reader.preferences.title"),
       placement: "bottom",
       tooltipLabel: isAudio ? t("reader.playback.preferences.audio.title") : t("reader.preferences.title"),
+      shortcut: preferences.actionsKeys["settings" /* settings */].shortcut,
       onPress: () => setOpen(!actionState?.isOpen),
       children: isAudio ? /* @__PURE__ */ jsx(instant_mix_default, { "aria-hidden": "true", focusable: "false" }) : /* @__PURE__ */ jsx(match_case_default, { "aria-hidden": "true", focusable: "false" })
     }
@@ -2766,6 +2782,7 @@ var StatefulTocTrigger = ({ variant }) => {
       "aria-label": t("reader.tableOfContents.title"),
       placement: "bottom",
       tooltipLabel: t("reader.tableOfContents.title"),
+      shortcut: preferences.actionsKeys["toc" /* toc */].shortcut,
       onPress: () => setOpen(!actionState?.isOpen),
       children: /* @__PURE__ */ jsx(toc_default, { "aria-hidden": "true", focusable: "false" })
     }
@@ -3858,14 +3875,55 @@ var StatefulLetterSpacing = ({ standalone = true }) => {
     }
   ) });
 };
+var ORDERED_LINE_HEIGHT_OPTIONS = ["small" /* small */, "medium" /* medium */, "large" /* large */];
+function spreadValues(values, globalMin, globalMax) {
+  const n = values.length;
+  if (n <= 1) return values;
+  const indexed = values.map((v, i) => ({ v, i })).sort((a, b) => a.v - b.v);
+  if (indexed.every((item, i) => i === 0 || item.v !== indexed[i - 1].v)) return values;
+  const lo = indexed[0].v === indexed[n - 1].v ? globalMin : indexed[0].v;
+  const hi = indexed[0].v === indexed[n - 1].v ? globalMax : indexed[n - 1].v;
+  const step = (hi - lo) / (n - 1);
+  const result = new Array(n);
+  for (let i = 0; i < n; i++) result[indexed[i].i] = lo + i * step;
+  return result;
+}
+var getLineHeightCompensation = (language) => {
+  const data = i18nData;
+  if (data[language]?.lineHeightCompensation !== void 0) return data[language].lineHeightCompensation;
+  const stripped = language.split("-").slice(0, -1).join("-");
+  if (stripped && data[stripped]?.lineHeightCompensation !== void 0) return data[stripped].lineHeightCompensation;
+  return data.default?.lineHeightCompensation ?? 1;
+};
 var useLineHeight = () => {
   const { preferences } = usePreferences();
-  return useMemo(() => ({
-    ["publisher" /* publisher */]: null,
-    ["small" /* small */]: preferences.settings.keys["lineHeight" /* lineHeight */].keys["small" /* small */],
-    ["medium" /* medium */]: preferences.settings.keys["lineHeight" /* lineHeight */].keys["medium" /* medium */],
-    ["large" /* large */]: preferences.settings.keys["lineHeight" /* lineHeight */].keys["large" /* large */]
-  }), [preferences.settings.keys]);
+  const fontLanguage = useAppSelector((state) => state.publication.fontLanguage);
+  return useMemo(() => {
+    const keys = preferences.settings.keys["lineHeight" /* lineHeight */].keys;
+    const factor = getLineHeightCompensation(fontLanguage);
+    const values = {
+      ["publisher" /* publisher */]: null,
+      ["small" /* small */]: keys["small" /* small */],
+      ["medium" /* medium */]: keys["medium" /* medium */],
+      ["large" /* large */]: keys["large" /* large */]
+    };
+    const compensate = (v) => v !== null ? v * factor : null;
+    const compensatedValues = {
+      ["publisher" /* publisher */]: null,
+      ["small" /* small */]: compensate(values["small" /* small */]),
+      ["medium" /* medium */]: compensate(values["medium" /* medium */]),
+      ["large" /* large */]: compensate(values["large" /* large */])
+    };
+    const [minRange, maxRange] = lineHeightRangeConfig.range;
+    const clamp = (v) => v === null ? minRange : Math.min(Math.max(v, minRange), maxRange);
+    const ordered = ORDERED_LINE_HEIGHT_OPTIONS;
+    const clamped = ordered.map((key) => clamp(compensatedValues[key]));
+    const processed = spreadValues(clamped, minRange, maxRange);
+    const processedValues = Object.fromEntries(
+      ordered.map((key, i) => [key, processed[i]])
+    );
+    return { values, compensatedValues, processedValues, compensate };
+  }, [preferences.settings.keys, fontLanguage]);
 };
 var SvgBook = (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-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm0 0v-640 640Zm200-360 100-60 100 60-100-60-100 60Z" }) });
 var book_default = SvgBook;
@@ -3881,20 +3939,18 @@ var StatefulLineHeight = ({ standalone = true }) => {
   const profile = useAppSelector((state) => state.reader.profile);
   const isWebPub = profile === "webPub";
   const publisherStyles = useReaderSetting("publisherStyles");
-  const { getSetting, submitPreferences, preferencesEditor } = useNavigator().visual;
+  const { getSetting, submitPreferences } = useNavigator().visual;
   const prefKey = SETTINGS_KEY_TO_PREFERENCE["lineHeight" /* lineHeight */];
   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 { processedValues } = useLineHeight();
+  const processedPresets = useMemo(() => {
+    const result = /* @__PURE__ */ new Map();
+    result.set("small" /* small */, processedValues["small" /* small */]);
+    result.set("medium" /* medium */, processedValues["medium" /* medium */]);
+    result.set("large" /* large */, processedValues["large" /* large */]);
+    return result;
+  }, [processedValues]);
   const items = useMemo(() => {
     const baseItems = [
       {
@@ -3915,10 +3971,7 @@ 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);
-    });
+    ].filter((item) => processedPresets.has(item.id));
     if (preferences.settings.keys["lineHeight" /* lineHeight */].allowUnset !== false) {
       baseItems.unshift({
         id: "publisher" /* publisher */,
@@ -3928,16 +3981,16 @@ var StatefulLineHeight = ({ standalone = true }) => {
       });
     }
     return baseItems;
-  }, [preferences.settings.keys, lineHeightOptions, effectivePresets, t]);
+  }, [preferences.settings.keys, processedPresets, t]);
   const updatePreference = useCallback(async (value) => {
-    const computedValue = value === "publisher" /* publisher */ ? null : lineHeightOptions[value];
+    const submitValue = value === "publisher" /* publisher */ ? null : processedPresets.get(value) ?? null;
     await submitPreferences({
-      [prefKey]: computedValue
+      [prefKey]: submitValue
     });
-    const currentLineHeight = getSetting(prefKey);
-    const currentDisplayLineHeightOption = Object.entries(lineHeightOptions).find(([key, value2]) => value2 === currentLineHeight)?.[0];
+    const storedLineHeight = getSetting(prefKey);
+    const currentDisplayLineHeightOption = [...processedPresets.entries()].find(([, v]) => v === storedLineHeight)?.[0];
     setLineHeight2(currentDisplayLineHeightOption);
-  }, [prefKey, submitPreferences, getSetting, setLineHeight2, lineHeightOptions]);
+  }, [prefKey, submitPreferences, getSetting, setLineHeight2, processedPresets]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulRadioGroup,
     {
@@ -4113,7 +4166,7 @@ var StatefulPublisherStyles = ({ standalone = true }) => {
   const paragraphSpacing = getEffectiveSpacingValue("paragraphSpacing" /* paragraphSpacing */);
   const letterSpacing = getEffectiveSpacingValue("letterSpacing" /* letterSpacing */);
   const wordSpacing = getEffectiveSpacingValue("wordSpacing" /* wordSpacing */);
-  const lineHeightOptions = useLineHeight();
+  const { compensatedValues: lineHeightOptions } = useLineHeight();
   const { submitPreferences } = useNavigator().visual;
   const lineHeightPrefKey = SETTINGS_KEY_TO_PREFERENCE["lineHeight" /* lineHeight */];
   const paragraphIndentPrefKey = SETTINGS_KEY_TO_PREFERENCE["paragraphIndent" /* paragraphIndent */];
@@ -4206,7 +4259,7 @@ var StatefulSpacingPresets = ({ standalone }) => {
   const paragraphIndentPrefKey = SETTINGS_KEY_TO_PREFERENCE["paragraphIndent" /* paragraphIndent */];
   const paragraphSpacingPrefKey = SETTINGS_KEY_TO_PREFERENCE["paragraphSpacing" /* paragraphSpacing */];
   const wordSpacingPrefKey = SETTINGS_KEY_TO_PREFERENCE["wordSpacing" /* wordSpacing */];
-  const lineHeightOptions = useLineHeight();
+  const { values: lineHeightOptions, compensate: compensateLineHeight } = useLineHeight();
   const { getPresetValues } = useSpacingPresets();
   const publicationType = isWebPub ? "webpub" : isFXL ? "fxl" : "reflow";
   const { isComponentUsed: isLetterSpacingUsed } = useSettingsComponentStatus({
@@ -4240,7 +4293,7 @@ var StatefulSpacingPresets = ({ standalone }) => {
       ["wordSpacing" /* wordSpacing */]: presetValues?.["wordSpacing" /* wordSpacing */] ?? null
     };
     const lineHeightValue = reduxValues["lineHeight" /* lineHeight */];
-    const lineHeightValueNumber = lineHeightValue && lineHeightValue !== "publisher" /* publisher */ ? lineHeightOptions[lineHeightValue] : null;
+    const lineHeightValueNumber = lineHeightValue && lineHeightValue !== "publisher" /* publisher */ ? compensateLineHeight(lineHeightOptions[lineHeightValue]) : null;
     const preferencesToSubmit = {};
     if (isLetterSpacingUsed) {
       preferencesToSubmit[letterSpacingPrefKey] = reduxValues["letterSpacing" /* letterSpacing */];
@@ -4269,7 +4322,7 @@ var StatefulSpacingPresets = ({ standalone }) => {
         values: reduxValues
       }));
     }
-  }, [isWebPub, dispatch, submitPreferences, getPresetValues, lineHeightOptions, letterSpacingPrefKey, lineHeightPrefKey, paragraphIndentPrefKey, paragraphSpacingPrefKey, wordSpacingPrefKey, isLetterSpacingUsed, isLineHeightUsed, isParagraphIndentUsed, isParagraphSpacingUsed, isWordSpacingUsed]);
+  }, [isWebPub, dispatch, submitPreferences, getPresetValues, lineHeightOptions, compensateLineHeight, letterSpacingPrefKey, lineHeightPrefKey, paragraphIndentPrefKey, paragraphSpacingPrefKey, wordSpacingPrefKey, isLetterSpacingUsed, isLineHeightUsed, isParagraphIndentUsed, isParagraphSpacingUsed, isWordSpacingUsed]);
   const spacingKeys = useMemo(() => {
     const baseKeys = isWebPub ? webPubSpacingPresetKeys : isFXL ? fxlSpacingPresetKeys : reflowSpacingPresetKeys;
     const subPanelKeys = subPanelSpacingSettingsKeys || [];
@@ -4315,6 +4368,7 @@ var StatefulTextAlign = ({ standalone = true }) => {
   const isWebPub = profile === "webPub";
   const isRTL = useAppSelector((state) => state.publication.isRTL);
   const textAlign = useReaderSetting("textAlign");
+  const hyphens = useReaderSetting("hyphens");
   const dispatch = useAppDispatch();
   const { getSetting, submitPreferences } = useNavigator().visual;
   const hyphensPrefKey = SETTINGS_KEY_TO_PREFERENCE["hyphens" /* hyphens */];
@@ -4345,27 +4399,40 @@ var StatefulTextAlign = ({ standalone = true }) => {
     }
   ];
   const updatePreference = useCallback(async (value) => {
-    const textAlign2 = value === "publisher" /* publisher */ ? null : value === "start" /* start */ ? TextAlignment.start : TextAlignment.justify;
-    const currentHyphens = getSetting(hyphensPrefKey);
-    const hyphens = textAlign2 === null ? null : currentHyphens ?? textAlign2 === TextAlignment.justify;
+    const oldTextAlign = textAlign;
+    const navigatorTextAlign = value === "publisher" /* publisher */ ? null : value === "start" /* start */ ? TextAlignment.start : TextAlignment.justify;
     const preferencesToSubmit = {
-      [textAlignPrefKey]: textAlign2
+      [textAlignPrefKey]: navigatorTextAlign
     };
-    if (isHyphensUsed) {
-      preferencesToSubmit[hyphensPrefKey] = hyphens;
-    }
     await submitPreferences(preferencesToSubmit);
     const textAlignSetting = getSetting(textAlignPrefKey);
     const textAlignValue = textAlignSetting === null ? "publisher" /* publisher */ : textAlignSetting;
-    const effectiveHyphens = getSetting(hyphensPrefKey);
     if (isWebPub) {
       dispatch(setWebPubTextAlign(textAlignValue));
-      dispatch(setWebPubHyphens(effectiveHyphens));
     } else {
       dispatch(setTextAlign(textAlignValue));
-      dispatch(setHyphens(effectiveHyphens));
     }
-  }, [hyphensPrefKey, textAlignPrefKey, isWebPub, getSetting, submitPreferences, dispatch, isHyphensUsed]);
+    if (isHyphensUsed) {
+      if (navigatorTextAlign === null) {
+        await submitPreferences({ [hyphensPrefKey]: null });
+      } else {
+        const wasPublisher = oldTextAlign === "publisher" /* publisher */;
+        let hyphensToSubmit;
+        if (wasPublisher && hyphens === null) {
+          hyphensToSubmit = navigatorTextAlign === TextAlignment.justify;
+        } else {
+          hyphensToSubmit = hyphens;
+        }
+        await submitPreferences({ [hyphensPrefKey]: hyphensToSubmit });
+        const effectiveHyphens = getSetting(hyphensPrefKey);
+        if (isWebPub) {
+          dispatch(setWebPubHyphens(effectiveHyphens));
+        } else {
+          dispatch(setHyphens(effectiveHyphens));
+        }
+      }
+    }
+  }, [hyphensPrefKey, textAlignPrefKey, isWebPub, getSetting, submitPreferences, dispatch, isHyphensUsed, hyphens, textAlign]);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     StatefulRadioGroup,
     {
@@ -4736,7 +4803,7 @@ var createDefaultPlugin = () => {
     id: "core",
     name: "Core Components",
     description: "Default components for Thorium Web Epub StatefulReader",
-    version: "1.4.0",
+    version: "1.5.0",
     components: {
       actions: {
         ["fullscreen" /* fullscreen */]: {
@@ -5330,6 +5397,8 @@ var StatefulAudioVolumeTrigger = ({ ref }) => {
   const { t } = useI18n();
   const profile = useAppSelector((state) => state.reader.profile);
   const { preferences } = useAudioPreferences();
+  const { actionsKeys } = useActionsPreferences();
+  const shortcut = actionsKeys["audio.volume" /* volume */]?.shortcut;
   const { preferencesEditor } = useNavigator().media;
   const volume = useAppSelector((state) => state.audioSettings.volume);
   const isTrackReady = useAppSelector((state) => state.player.isTrackReady);
@@ -5345,11 +5414,13 @@ var StatefulAudioVolumeTrigger = ({ ref }) => {
     if (volume <= max / 3 * 2) return volume_down_default;
     return volume_up_default;
   }, [volume, range]);
+  if (isIOSish()) return null;
   return /* @__PURE__ */ jsx(
     StatefulActionIcon,
     {
       ref,
       tooltipLabel: t("reader.playback.preferences.audio.volume"),
+      shortcut,
       placement: "top",
       onPress: () => {
         if (profile) {
@@ -5385,6 +5456,7 @@ var StatefulAudioVolumeContainer = ({ triggerRef, placement = "top" }) => {
       dispatch(setActionOpen({ key: "audio.volume" /* volume */, isOpen: open, profile }));
     }
   }, [dispatch, profile]);
+  if (isIOSish()) return null;
   return /* @__PURE__ */ jsx(
     StatefulSheetWrapper,
     {
@@ -5432,6 +5504,8 @@ var thorium_web_playbackRate_default = {
 var StatefulAudioPlaybackRateTrigger = ({ ref }) => {
   const { t } = useI18n();
   const profile = useAppSelector((state) => state.reader.profile);
+  const { actionsKeys } = useActionsPreferences();
+  const shortcut = actionsKeys["audio.playbackRate" /* playbackRate */]?.shortcut;
   const playbackRate = useAppSelector((state) => state.audioSettings.playbackRate);
   const isTrackReady = useAppSelector((state) => state.player.isTrackReady);
   const isStalled = useAppSelector((state) => state.player.isStalled);
@@ -5442,6 +5516,7 @@ var StatefulAudioPlaybackRateTrigger = ({ ref }) => {
     {
       ref,
       tooltipLabel: t("reader.playback.preferences.playbackRate.descriptive"),
+      shortcut,
       placement: "top",
       onPress: () => {
         if (profile) {
@@ -5547,6 +5622,8 @@ var thorium_web_audioToc_default = {
 var StatefulAudioTocTrigger = ({ ref }) => {
   const { t } = useI18n();
   const profile = useAppSelector((state) => state.reader.profile);
+  const { actionsKeys } = useActionsPreferences();
+  const shortcut = actionsKeys["audio.toc" /* toc */]?.shortcut;
   const isTrackReady = useAppSelector((state) => state.player.isTrackReady);
   const isStalled = useAppSelector((state) => state.player.isStalled);
   const isDisabled = !isTrackReady || isStalled;
@@ -5556,6 +5633,7 @@ var StatefulAudioTocTrigger = ({ ref }) => {
     {
       ref,
       tooltipLabel: t("reader.tableOfContents.title"),
+      shortcut,
       placement: "top",
       onPress: () => {
         if (profile) {
@@ -5675,6 +5753,8 @@ var thorium_web_sleepTimer_default = {
 var StatefulAudioSleepTimerTrigger = ({ ref }) => {
   const { t } = useI18n();
   const profile = useAppSelector((state) => state.reader.profile);
+  const { actionsKeys } = useActionsPreferences();
+  const shortcut = actionsKeys["audio.sleepTimer" /* sleepTimer */]?.shortcut;
   const remainingSeconds = useAppSelector((state) => state.player.sleepTimer.remainingSeconds);
   const onTrackEnd = useAppSelector((state) => state.player.sleepTimer.onTrackEnd);
   const onFragmentEnd = useAppSelector((state) => state.player.sleepTimer.onFragmentEnd);
@@ -5697,6 +5777,7 @@ var StatefulAudioSleepTimerTrigger = ({ ref }) => {
     {
       ref,
       tooltipLabel: t("reader.playback.preferences.sleepTimer.descriptive"),
+      shortcut,
       placement: "top",
       onPress: () => {
         if (profile) {
@@ -5998,7 +6079,7 @@ var createAudioDefaultPlugin = () => {
     id: "audio-core",
     name: "Audio Core Components",
     description: "Default components for Thorium Web Audio StatefulReader",
-    version: "1.4.0",
+    version: "1.5.0",
     components: {
       actions: {
         ["settings" /* settings */]: {
@@ -6064,6 +6145,39 @@ var StatefulGlobalPreferencesProvider = ({
   return /* @__PURE__ */ jsx(ThGlobalPreferencesProvider, { adapter, initialPreferences, children });
 };
 
+// src/helpers/peripherals.ts
+var NavPeripheralType = {
+  progressForward: "th_nav_progress_forward",
+  progressBackward: "th_nav_progress_backward",
+  moveRight: "th_nav_move_right",
+  moveLeft: "th_nav_move_left",
+  moveUp: "th_nav_move_up",
+  moveDown: "th_nav_move_down",
+  moveHome: "th_nav_move_home",
+  moveEnd: "th_nav_move_end",
+  zoomIn: "th_nav_zoom_in",
+  zoomOut: "th_nav_zoom_out"
+};
+var ZOOM_IN_KEY_COMBOS = [
+  { keyCode: 187, ctrl: true },
+  { keyCode: 61, ctrl: true },
+  { keyCode: 107, ctrl: true },
+  { keyCode: 187, meta: true },
+  { keyCode: 61, meta: true },
+  { keyCode: 107, meta: true }
+];
+var ZOOM_OUT_KEY_COMBOS = [
+  { keyCode: 189, ctrl: true },
+  { keyCode: 173, ctrl: true },
+  { keyCode: 109, ctrl: true },
+  { keyCode: 189, meta: true },
+  { keyCode: 173, meta: true },
+  { keyCode: 109, meta: true }
+];
+var ACTION_PERIPHERAL_PREFIX = "th_action_";
+var toActionPeripheralType = (key) => `${ACTION_PERIPHERAL_PREFIX}${key}`;
+var fromActionPeripheralType = (type) => type.startsWith(ACTION_PERIPHERAL_PREFIX) ? type.slice(ACTION_PERIPHERAL_PREFIX.length) : null;
+
 // src/components/assets/styles/thorium-web.reader.app.module.css
 var thorium_web_reader_app_default = {
   wrapper: "thorium_web_reader_app_wrapper",
@@ -6556,6 +6670,6 @@ var useReaderHeaderBase = (actionKeys) => {
   };
 };
 
-export { NavigatorProvider, StatefulActionIcon, StatefulAudioAutoPlay, StatefulAudioPlaybackRateContainer, StatefulAudioPlaybackRateTrigger, StatefulAudioRemotePlaybackTrigger, StatefulAudioSettingsContainer, StatefulAudioSkipBackwardInterval, StatefulAudioSkipForwardInterval, StatefulAudioSkipInterval, StatefulAudioSleepTimerContainer, StatefulAudioSleepTimerTrigger, StatefulAudioTocContainer, StatefulAudioTocTrigger, StatefulAudioVolumeContainer, StatefulAudioVolumeTrigger, StatefulBackLink, StatefulBottomSheet, StatefulCollapsibleActionsBar, StatefulColumns, StatefulCompactPopoverSheet, StatefulDockedSheet, StatefulDockingWrapper, StatefulDropdown, StatefulFontFamily, StatefulFullScreenSheet, StatefulFullscreenTrigger, StatefulGlobalPreferencesProvider, StatefulGroupWrapper, StatefulHyphens, StatefulJumpToPositionContainer, StatefulJumpToPositionTrigger, StatefulLayout, StatefulLetterSpacing, StatefulLigatures, StatefulLineHeight, StatefulModalBase, StatefulModalSheet, StatefulNoRuby, StatefulNumberField, StatefulOverflowMenu, StatefulOverflowMenuItem, StatefulParagraphIndent, StatefulParagraphSpacing, StatefulPopoverSheet, StatefulPreferencesProvider, StatefulPublisherStyles, StatefulRadioGroup, StatefulSettingsTrigger, StatefulSettingsWrapper, StatefulSheetWrapper, StatefulSlider, StatefulSliderWithPresets, StatefulSpacingGroup, StatefulSpacingGroupContainer, StatefulSpacingPresets, StatefulSwitch, StatefulTextAlign, StatefulTextGroup, StatefulTextGroupContainer, StatefulTextNormalize, StatefulTheme, StatefulTocContainer, StatefulTocTrigger, StatefulVisualSettingsContainer, StatefulWordSpacing, StatefulZoom, UnstableStatefulFontWeight, createAudioDefaultPlugin, createDefaultPlugin, thorium_web_button_default, thorium_web_overflow_default, thorium_web_reader_app_default, thorium_web_reader_header_default, useDocking, useEffectiveRange, useGridNavigation, useGridTemplate, useIsScroll, useLineHeight, useNavigator, usePlaceholder, usePositionStorage, usePublication, useReaderHeaderBase, useReaderSetting, useReaderTransitions, useSettingsComponentStatus, useSpacingPresets };
-//# sourceMappingURL=chunk-PXXWEMNL.mjs.map
-//# sourceMappingURL=chunk-PXXWEMNL.mjs.map
+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, UnstableStatefulFontWeight, ZOOM_IN_KEY_COMBOS, ZOOM_OUT_KEY_COMBOS, createAudioDefaultPlugin, createDefaultPlugin, fromActionPeripheralType, thorium_web_button_default, thorium_web_overflow_default, thorium_web_reader_app_default, thorium_web_reader_header_default, toActionPeripheralType, useDocking, useEffectiveRange, useGridNavigation, useGridTemplate, useIsScroll, useLineHeight, useNavigator, usePlaceholder, usePositionStorage, usePublication, useReaderHeaderBase, useReaderSetting, useReaderTransitions, useSettingsComponentStatus, useSpacingPresets };
+//# sourceMappingURL=chunk-KJ55Q63A.mjs.map
+//# sourceMappingURL=chunk-KJ55Q63A.mjs.map