@edrlab/thorium-web 1.2.1 → 1.3.0

package/dist/chunk-UCTMVCW7.mjs

@@ -0,0 +1,833 @@
+import { useReaderHeaderBase, thorium_web_reader_app_default, StatefulBackLink, thorium_web_reader_header_default, StatefulCollapsibleActionsBar, thorium_web_overflow_default, useNavigator } from './chunk-D7MFLHXV.mjs';
+import { isInteractiveElement, makeBreakpointsMap, getBestMatchingProgressionFormat } from './chunk-ITDBOMY5.mjs';
+import { useAppSelector, useAppDispatch, setHovering } from './chunk-YZ3KCMKY.mjs';
+import { usePreferences } from './chunk-WECWPYZB.mjs';
+import { ThRunningHeadFormat, ThProgressionFormat } from './chunk-L4XGZAZ5.mjs';
+import { getPlatform, buildShortcut } from './chunk-5LUMM7FW.mjs';
+import { ThInteractiveOverlay, ThHeader, ThFooter, ThRunningHead, ThPagination } from './chunk-4ODYHZKD.mjs';
+import { useI18n } from './chunk-IYAFKTPL.mjs';
+import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useFocusWithin } from 'react-aria';
+
+var StatefulReaderRunningHead = ({
+  formatPref
+}) => {
+  const { t } = useI18n();
+  const unstableTimeline = useAppSelector((state) => state.publication.unstableTimeline);
+  const isImmersive = useAppSelector((state) => state.reader.isImmersive);
+  const isHovering = useAppSelector((state) => state.reader.isHovering);
+  const isFullscreen = useAppSelector((state) => state.reader.isFullscreen);
+  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
+  const fallbackFormat = useMemo(() => ({
+    variants: "title" /* title */,
+    displayInImmersive: true,
+    displayInFullscreen: true
+  }), []);
+  const breakpointsMap = useMemo(() => {
+    return makeBreakpointsMap({
+      defaultValue: formatPref?.default || fallbackFormat,
+      fromEnum: ThRunningHeadFormat,
+      pref: formatPref?.breakpoints,
+      validateKey: "variants"
+    });
+  }, [formatPref, fallbackFormat]);
+  const currentPrefs = useMemo(() => {
+    if (!breakpoint) return formatPref?.default || fallbackFormat;
+    return breakpointsMap[breakpoint] || formatPref?.default || fallbackFormat;
+  }, [breakpoint, breakpointsMap, formatPref?.default, fallbackFormat]);
+  const { variants, displayInImmersive, displayInFullscreen } = currentPrefs;
+  const displayFormat = useMemo(() => {
+    if (!variants) return "title" /* title */;
+    if (isImmersive && displayInImmersive === false && !isHovering) {
+      return "none" /* none */;
+    }
+    if (isImmersive && isFullscreen && displayInFullscreen === false && !isHovering) {
+      return "none" /* none */;
+    }
+    return variants;
+  }, [variants, isImmersive, displayInImmersive, isHovering, isFullscreen, displayInFullscreen]);
+  const runningHead = useMemo(() => {
+    if (displayFormat === "title" /* title */) {
+      return unstableTimeline?.title || "";
+    } else if (displayFormat === "chapter" /* chapter */) {
+      return unstableTimeline?.progression?.currentChapter || unstableTimeline?.title || "";
+    }
+    return "";
+  }, [displayFormat, unstableTimeline]);
+  if (!runningHead || displayFormat === "none" /* none */) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    ThRunningHead,
+    {
+      label: runningHead,
+      "aria-label": t("reader.app.header.runningHead")
+    }
+  ) });
+};
+var StatefulReaderHeader = ({
+  actionKeys,
+  actionsOrder,
+  layout,
+  runningHeadFormatPref
+}) => {
+  const {
+    headerRef,
+    focusWithinProps,
+    setHover,
+    removeHover,
+    listActionItems,
+    isImmersive,
+    isHovering,
+    isScroll,
+    t
+  } = useReaderHeaderBase(actionKeys);
+  const { preferences } = usePreferences();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ThInteractiveOverlay,
+      {
+        className: classNames(thorium_web_reader_app_default.barOverlay, thorium_web_reader_app_default.headerOverlay),
+        isActive: layout === "layered-ui" /* layered */ && isImmersive && !isHovering,
+        onMouseEnter: setHover,
+        onMouseLeave: removeHover
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ThHeader,
+      {
+        ref: headerRef,
+        className: classNames(thorium_web_reader_app_default.topBar, thorium_web_reader_header_default.header),
+        "aria-label": t("reader.app.header.label"),
+        onMouseEnter: setHover,
+        onMouseLeave: removeHover,
+        ...focusWithinProps,
+        children: [
+          preferences.theming.header?.backLink && /* @__PURE__ */ jsx(StatefulBackLink, { className: thorium_web_reader_header_default.backlinkWrapper }),
+          /* @__PURE__ */ jsx(StatefulReaderRunningHead, { formatPref: runningHeadFormatPref }),
+          /* @__PURE__ */ jsx(
+            StatefulCollapsibleActionsBar,
+            {
+              id: "reader-header-overflowMenu",
+              items: listActionItems(),
+              prefs: { ...preferences.actions, displayOrder: actionsOrder },
+              className: thorium_web_reader_header_default.actionsWrapper,
+              "aria-label": t("reader.app.header.actions"),
+              overflowMenuClassName: !isScroll || preferences.affordances.scroll.hintInImmersive ? thorium_web_overflow_default.hint : void 0
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/assets/styles/thorium-web.reader.pagination.module.css
+var thorium_web_reader_pagination_default = {
+  wrapper: "thorium_web_reader_pagination_wrapper",
+  listItem: "thorium_web_reader_pagination_listItem",
+  previousButton: "thorium_web_reader_pagination_previousButton",
+  progression: "thorium_web_reader_pagination_progression",
+  nextButton: "thorium_web_reader_pagination_nextButton",
+  label: "thorium_web_reader_pagination_label"
+};
+
+// src/components/assets/styles/thorium-web.reader.progression.module.css
+var thorium_web_reader_progression_default = {
+  wrapper: "thorium_web_reader_progression_wrapper"
+};
+var ThProgression = ({
+  ref,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...props,
+      children
+    }
+  ) });
+};
+var StatefulReaderProgression = ({
+  className,
+  formatPref,
+  fallbackVariant
+}) => {
+  const { t } = useI18n();
+  const unstableTimeline = useAppSelector((state) => state.publication.unstableTimeline);
+  const isImmersive = useAppSelector((state) => state.reader.isImmersive);
+  const isFullscreen = useAppSelector((state) => state.reader.isFullscreen);
+  const isHovering = useAppSelector((state) => state.reader.isHovering);
+  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
+  const [displayText, setDisplayText] = useState("");
+  const fallbackFormat = useMemo(() => {
+    return {
+      variants: fallbackVariant,
+      displayInImmersive: true,
+      displayInFullscreen: true
+    };
+  }, [fallbackVariant]);
+  const breakpointsMap = useMemo(() => {
+    return makeBreakpointsMap({
+      defaultValue: formatPref?.default || fallbackFormat,
+      fromEnum: ThProgressionFormat,
+      pref: formatPref?.breakpoints,
+      validateKey: "variants"
+    });
+  }, [formatPref, fallbackFormat]);
+  const currentPrefs = useMemo(() => {
+    if (!breakpoint) return formatPref?.default || fallbackFormat;
+    return breakpointsMap[breakpoint] || formatPref?.default || fallbackFormat;
+  }, [breakpoint, breakpointsMap, formatPref?.default, fallbackFormat]);
+  const { variants, displayInImmersive, displayInFullscreen } = currentPrefs;
+  const displayFormat = useMemo(() => {
+    if (!variants) return fallbackFormat.variants;
+    if (isImmersive && displayInImmersive === false && !isHovering) {
+      return "none" /* none */;
+    }
+    if (isImmersive && isFullscreen && displayInFullscreen === false && !isHovering) {
+      return "none" /* none */;
+    }
+    if (Array.isArray(variants)) {
+      return getBestMatchingProgressionFormat(variants, unstableTimeline?.progression) || fallbackFormat.variants;
+    }
+    return variants;
+  }, [variants, unstableTimeline?.progression, fallbackFormat, isImmersive, isHovering, isFullscreen, displayInImmersive, displayInFullscreen]);
+  useEffect(() => {
+    if (displayFormat === "none" /* none */ || !unstableTimeline?.progression) {
+      setDisplayText("");
+      return;
+    }
+    const {
+      currentPositions = [],
+      totalPositions,
+      relativeProgression,
+      totalProgression,
+      currentChapter,
+      positionsLeft,
+      totalItems,
+      currentIndex
+    } = unstableTimeline.progression;
+    let text = "";
+    const formatPositions = (positions) => {
+      if (positions.length === 2) {
+        return positions.join("\u2013");
+      }
+      return positions[0]?.toString() || "";
+    };
+    switch (displayFormat) {
+      case "positions" /* positions */:
+        if (currentPositions.length > 0) {
+          text = formatPositions(currentPositions);
+        }
+        break;
+      case "positionsOfTotal" /* positionsOfTotal */:
+        if (currentPositions.length > 0 && totalPositions) {
+          text = t("reader.progression.xOfY.compact", {
+            x: formatPositions(currentPositions),
+            y: totalPositions
+          });
+        }
+        break;
+      case "positionsPercentOfTotal" /* positionsPercentOfTotal */:
+        if (currentPositions.length > 0 && totalPositions) {
+          const percentage = Math.round((totalProgression || 0) * 100);
+          text = t("reader.progression.xOfY.descriptive", {
+            x: formatPositions(currentPositions),
+            y: totalPositions,
+            z: `${percentage}%`
+          });
+        }
+        break;
+      case "positionsLeft" /* positionsLeft */:
+        if (positionsLeft !== void 0) {
+          text = t(`reader.progression.positionsLeftInChapter.descriptive`, {
+            count: positionsLeft
+          });
+        }
+        break;
+      case "overallProgression" /* overallProgression */:
+        if (totalProgression !== void 0) {
+          const percentage = Math.round(totalProgression * 100);
+          text = `${percentage}%`;
+        }
+        break;
+      case "resourceProgression" /* resourceProgression */:
+        if (relativeProgression !== void 0) {
+          const percentage = Math.round(relativeProgression * 100);
+          text = `${percentage}%`;
+        }
+        break;
+      case "progressionOfResource" /* progressionOfResource */:
+        if (relativeProgression !== void 0) {
+          const percentage = Math.round(relativeProgression * 100);
+          text = t("reader.progression.xOfY.compact", {
+            x: `${percentage}%`,
+            y: currentChapter || t("reader.app.progression.referenceFallback")
+          });
+        }
+        break;
+      case "readingOrderIndex" /* readingOrderIndex */:
+        if (currentIndex !== void 0 && totalItems !== void 0) {
+          text = t("reader.progression.xOfY.compact", {
+            x: currentIndex,
+            y: totalItems
+          });
+        }
+        break;
+    }
+    setDisplayText(text);
+  }, [displayFormat, unstableTimeline?.progression, t]);
+  if (!displayText || displayFormat === "none" /* none */) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ThProgression,
+    {
+      id: "current-progression",
+      className: classNames(thorium_web_reader_progression_default.wrapper, className),
+      "aria-label": t("reader.app.progression.wrapper"),
+      children: displayText
+    }
+  );
+};
+var StatefulReaderPagination = ({
+  ref,
+  links,
+  compounds,
+  children,
+  ...props
+}) => {
+  const previousButtonRef = useRef(null);
+  const nextButtonRef = useRef(null);
+  const updatedCompounds = {
+    ...compounds,
+    previousButton: {
+      ...compounds?.previousButton,
+      ref: previousButtonRef,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          previousButtonRef.current?.blur();
+        }
+      }
+    },
+    nextButton: {
+      ...compounds?.nextButton,
+      ref: nextButtonRef,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          nextButtonRef.current?.blur();
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ThPagination,
+    {
+      ref,
+      className: thorium_web_reader_pagination_default.wrapper,
+      links,
+      compounds: updatedCompounds,
+      ...props,
+      children
+    }
+  );
+};
+var StatefulReaderFooter = ({
+  layout,
+  progressionFormatPref,
+  progressionFormatFallback
+}) => {
+  const { t } = useI18n();
+  const footerRef = useRef(null);
+  const readerProfile = useAppSelector((state) => state.reader.profile);
+  const isImmersive = useAppSelector((state) => state.reader.isImmersive);
+  const isHovering = useAppSelector((state) => state.reader.isHovering);
+  const hasScrollAffordance = useAppSelector((state) => state.reader.hasScrollAffordance);
+  const scroll = useAppSelector((state) => state.settings.scroll);
+  const isFXL = useAppSelector((state) => state.publication.isFXL);
+  const isScroll = scroll && !isFXL;
+  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
+  const reducedMotion = useAppSelector((state) => state.theming.prefersReducedMotion);
+  const timeline = useAppSelector((state) => state.publication.unstableTimeline);
+  const dispatch = useAppDispatch();
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithin() {
+      dispatch(setHovering(true));
+    },
+    onBlurWithin() {
+      dispatch(setHovering(false));
+    }
+  });
+  const setHover = () => {
+    if (!hasScrollAffordance) {
+      dispatch(setHovering(true));
+    }
+  };
+  const removeHover = () => {
+    if (!hasScrollAffordance) {
+      dispatch(setHovering(false));
+    }
+  };
+  const { previousLocator, nextLocator, go } = useNavigator().unified;
+  const updateLinks = useCallback(() => {
+    const links = {
+      previous: void 0,
+      next: void 0
+    };
+    const previous = previousLocator();
+    const next = nextLocator();
+    if (previous) {
+      links.previous = {
+        node: breakpoint !== "compact" /* compact */ && breakpoint !== "medium" /* medium */ ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: thorium_web_reader_app_default.srOnly, children: t(isFXL ? "reader.actions.goToPreviousPage.descriptive" : "reader.actions.goToPreviousChapter.descriptive") }),
+          /* @__PURE__ */ jsx("span", { className: thorium_web_reader_pagination_default.label, children: timeline?.previousItem?.title || previous.title || t(isFXL ? "reader.actions.goToPreviousPage.compact" : "reader.actions.goToPreviousChapter.compact") })
+        ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: thorium_web_reader_pagination_default.label, children: t(isFXL ? "reader.actions.goToPreviousPage.compact" : "reader.actions.goToPreviousChapter.compact") }) }),
+        onPress: () => go(previous, !reducedMotion, () => {
+        })
+      };
+    }
+    if (next) {
+      links.next = {
+        node: breakpoint !== "compact" /* compact */ && breakpoint !== "medium" /* medium */ ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: thorium_web_reader_app_default.srOnly, children: t(isFXL ? "reader.actions.goToNextPage.descriptive" : "reader.actions.goToNextChapter.descriptive") }),
+          /* @__PURE__ */ jsx("span", { className: thorium_web_reader_pagination_default.label, children: timeline?.nextItem?.title || next.title || t(isFXL ? "reader.actions.goToNextPage.compact" : "reader.actions.goToNextChapter.compact") })
+        ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: thorium_web_reader_pagination_default.label, children: t(isFXL ? "reader.actions.goToNextPage.compact" : "reader.actions.goToNextChapter.compact") }) }),
+        onPress: () => go(next, !reducedMotion, () => {
+        })
+      };
+    }
+    return links;
+  }, [go, previousLocator, nextLocator, t, timeline, breakpoint, reducedMotion, isFXL]);
+  useEffect(() => {
+    updateLinks();
+  }, [timeline, updateLinks]);
+  useEffect(() => {
+    if (isImmersive) {
+      const focusElement = document.activeElement;
+      if (focusElement && footerRef.current?.contains(focusElement)) {
+        focusElement.blur();
+      }
+    }
+  }, [isImmersive]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ThInteractiveOverlay,
+      {
+        className: classNames(thorium_web_reader_app_default.barOverlay, thorium_web_reader_app_default.footerOverlay),
+        isActive: layout === "layered-ui" /* layered */ && isImmersive && !isHovering,
+        onMouseEnter: setHover,
+        onMouseLeave: removeHover
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ThFooter,
+      {
+        ref: footerRef,
+        className: thorium_web_reader_app_default.bottomBar,
+        "aria-label": t("reader.app.footer.label"),
+        onMouseEnter: setHover,
+        onMouseLeave: removeHover,
+        ...focusWithinProps,
+        children: isScroll || readerProfile === "webPub" ? /* @__PURE__ */ jsx(
+          StatefulReaderPagination,
+          {
+            "aria-label": t("reader.navigation.scroll.wrapper"),
+            links: updateLinks(),
+            compounds: {
+              listItem: {
+                className: thorium_web_reader_pagination_default.listItem
+              },
+              previousButton: {
+                className: thorium_web_reader_pagination_default.previousButton,
+                preventFocusOnPress: true
+              },
+              nextButton: {
+                className: thorium_web_reader_pagination_default.nextButton,
+                preventFocusOnPress: true
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              StatefulReaderProgression,
+              {
+                className: thorium_web_reader_pagination_default.progression,
+                formatPref: progressionFormatPref,
+                fallbackVariant: progressionFormatFallback
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          StatefulReaderProgression,
+          {
+            formatPref: progressionFormatPref,
+            fallbackVariant: progressionFormatFallback
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/core/Hooks/fonts/androidPatchCss.ts
+var getAndroidPatchCss = () => {
+  if (typeof window === "undefined") {
+    return "";
+  }
+  const origin = window.location.origin;
+  return `/* Readium CSS
+   Android Fonts Patch module
+
+   A stylesheet aligning Android generic serif and sans-serif fonts on other platforms
+
+   Repo: https://github.com/readium/css */
+
+/* Android resolves sans-serif to Roboto, and serif to Droid Serif 
+   This created issues for FXL EPUBs relying on Times (New Roman),
+   Helvetica or Arial while not embedding the font files in the package.
+
+   See https://github.com/readium/css/issues/149
+
+   Unfortunately it is no possible to target generic family using @font-face,
+   we have to target specific font-family names e.g. Times, Arial, etc.
+
+   This stylesheet/patch should be loaded only for this case i.e.
+   a Fixed-Layout EPUB with text but no embedded font on an Android device.
+   The logic for checking these conditions are up to implementers.
+*/
+
+/* Serif (Times + Times New Roman) */
+
+@font-face {
+  font-family: Times;
+  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman.woff", origin).toString()}") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Times New Roman";
+  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman.woff", origin).toString()}") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Times;
+  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-Italic.woff", origin).toString()}") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Times New Roman";
+  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-Italic.woff", origin).toString()}") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Times;
+  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-Bold.woff", origin).toString()}") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Times New Roman";
+  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-Bold.woff", origin).toString()}") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Times;
+  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-BoldItalic.woff", origin).toString()}") format("woff");
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Times New Roman";
+  src: url("${new URL("/fonts/AndroidPatch/serif/NimbusRoman-BoldItalic.woff", origin).toString()}") format("woff");
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* Sans-serif (Helvetica + Arial) */
+
+@font-face {
+  font-family: Helvetica;
+  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans.woff", origin).toString()}") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Arial;
+  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans.woff", origin).toString()}") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Helvetica;
+  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-Italic.woff", origin).toString()}") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Arial;
+  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-Italic.woff", origin).toString()}") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Helvetica;
+  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-Bold.woff", origin).toString()}") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Arial;
+  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-Bold.woff", origin).toString()}") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Helvetica;
+  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-BoldItalic.woff", origin).toString()}") format("woff");
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Arial;
+  src: url("${new URL("/fonts/AndroidPatch/sans-serif/NimbusSans-BoldItalic.woff", origin).toString()}") format("woff");
+  font-weight: bold;
+  font-style: italic;
+}`;
+};
+
+// src/core/Hooks/fonts/useFonts.ts
+var useFonts = (fontResources) => {
+  const injectedElementsRef = useRef({
+    prepend: [],
+    append: []
+  });
+  const createLinkElement = useCallback((resource) => {
+    const link = document.createElement("link");
+    if ("attributes" in resource && resource.attributes) {
+      Object.entries(resource.attributes).forEach(([key, value]) => {
+        link.setAttribute(key, value);
+      });
+    }
+    link.rel = resource.rel;
+    link.as = resource.as;
+    if ("url" in resource) {
+      link.href = resource.url;
+    } else if ("blob" in resource && resource.blob) {
+      link.href = URL.createObjectURL(resource.blob);
+    }
+    return link;
+  }, []);
+  const removeInjectedElements = useCallback(() => {
+    const { prepend, append } = injectedElementsRef.current;
+    [...prepend, ...append].forEach((element) => {
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+      if (element instanceof HTMLLinkElement && element.href.startsWith("blob:")) {
+        URL.revokeObjectURL(element.href);
+      }
+    });
+    injectedElementsRef.current = {
+      prepend: [],
+      append: []
+    };
+  }, []);
+  const injectFontResources = useCallback((resources) => {
+    if (typeof document === "undefined") return;
+    removeInjectedElements();
+    if (!resources) return;
+    const { prepend, append } = resources;
+    const injectedElements = injectedElementsRef.current;
+    prepend.forEach((resource) => {
+      const element = createLinkElement(resource);
+      document.head.insertBefore(element, document.head.firstChild);
+      injectedElements.prepend.push(element);
+    });
+    append.forEach((resource) => {
+      const element = createLinkElement(resource);
+      document.head.appendChild(element);
+      injectedElements.append.push(element);
+    });
+  }, [createLinkElement, removeInjectedElements]);
+  const getAndroidFXLPatch = useCallback(() => {
+    const platform = getPlatform();
+    const isAndroid = platform === "android";
+    if (!isAndroid) {
+      return null;
+    }
+    const cssContent = getAndroidPatchCss();
+    const blob = new Blob([cssContent], { type: "text/css" });
+    return {
+      as: "link",
+      rel: "stylesheet",
+      blob
+    };
+  }, []);
+  useEffect(() => {
+    injectFontResources(fontResources || null);
+    return () => {
+      removeInjectedElements();
+    };
+  }, [fontResources, injectFontResources, removeInjectedElements]);
+  return {
+    injectFontResources,
+    removeFontResources: removeInjectedElements,
+    getAndroidFXLPatch
+  };
+};
+
+// src/helpers/peripherals.ts
+var Peripherals = class {
+  observers = ["keydown"];
+  targets = [];
+  callbacks;
+  store;
+  actionsPref;
+  shortcuts;
+  constructor(store, actionsPref, callbacks) {
+    this.observers.forEach((method) => {
+      this["on" + method] = this["on" + method].bind(this);
+    });
+    this.store = store;
+    this.actionsPref = actionsPref;
+    this.callbacks = callbacks;
+    this.shortcuts = this.retrieveShortcuts();
+  }
+  getPlatformModifier() {
+    return this.store.getState().reader.platformModifier.modifier;
+  }
+  retrieveShortcuts() {
+    if (!this.actionsPref) return {};
+    const shortcutsObj = {};
+    const displayOrder = this.store.getState().publication.isFXL ? this.actionsPref.fxlOrder : this.actionsPref.reflowOrder;
+    for (const actionKey of displayOrder) {
+      const shortcutString = this.actionsPref.keys[actionKey].shortcut;
+      if (shortcutString) {
+        const shortcutObj = buildShortcut(shortcutString);
+        if (shortcutObj?.key) {
+          Object.defineProperty(shortcutsObj, shortcutObj.key, {
+            value: {
+              actionKey,
+              modifiers: shortcutObj.modifiers
+            },
+            writable: false,
+            enumerable: true
+          });
+        }
+      }
+    }
+    return shortcutsObj;
+  }
+  destroy() {
+    this.targets.forEach((t) => this.unobserve(t));
+  }
+  unobserve(item) {
+    if (!item) return;
+    this.observers.forEach((EventName) => {
+      item.removeEventListener(
+        EventName,
+        this["on" + EventName],
+        false
+      );
+    });
+    this.targets = this.targets.filter((t) => t !== item);
+  }
+  observe(item) {
+    if (!item) return;
+    if (this.targets.includes(item)) return;
+    this.observers.forEach((EventName) => {
+      item.addEventListener(EventName, this["on" + EventName], false);
+    });
+    this.targets.push(item);
+  }
+  onkeydown(e) {
+    const focusIsSafe = !isInteractiveElement(document.activeElement);
+    switch (e.code) {
+      case "Space":
+        focusIsSafe && this.callbacks.goProgression(e.shiftKey);
+        break;
+      case "ArrowRight":
+        focusIsSafe && this.callbacks.moveTo("right");
+        break;
+      case "ArrowLeft":
+        focusIsSafe && this.callbacks.moveTo("left");
+        break;
+      case "ArrowUp":
+      case "PageUp":
+        focusIsSafe && this.callbacks.moveTo("up");
+        break;
+      case "ArrowDown":
+      case "PageDown":
+        focusIsSafe && this.callbacks.moveTo("down");
+        break;
+      case "Home":
+        focusIsSafe && this.callbacks.moveTo("home");
+        break;
+      case "End":
+        focusIsSafe && this.callbacks.moveTo("end");
+        break;
+      default:
+        if (this.shortcuts.hasOwnProperty(e.code)) {
+          const customShortcutObj = this.shortcuts[e.code];
+          const sendCallback = Object.entries(customShortcutObj.modifiers).every(([modifier, value]) => {
+            if (modifier === "platformKey") {
+              return e[this.getPlatformModifier()] === value;
+            } else {
+              return e[modifier] === value;
+            }
+          });
+          if (sendCallback) {
+            e.preventDefault();
+            this.callbacks.toggleAction(customShortcutObj.actionKey);
+          }
+        }
+        break;
+    }
+  }
+};
+var LAYOUT_CLASSES = {
+  ["stacked-ui" /* stacked */]: "thorium_web_stackedUI",
+  ["layered-ui" /* layered */]: "thorium_web_layeredUI"
+};
+function getReaderClassNames(options) {
+  const {
+    layoutUI,
+    isScroll,
+    isImmersive = false,
+    isHovering = false,
+    isFXL = false,
+    breakpoint
+  } = options;
+  return classNames(
+    thorium_web_reader_app_default.shell,
+    isScroll ? "thorium_web_isScroll" : "thorium_web_isPaged",
+    isImmersive && "thorium_web_isImmersive",
+    isHovering && "thorium_web_isHovering",
+    isFXL ? "thorium_web_isFXL" : "thorium_web_isReflow",
+    LAYOUT_CLASSES[layoutUI],
+    breakpoint ? `thorium_web_is${breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)}` : void 0
+  );
+}
+
+export { Peripherals, StatefulReaderFooter, StatefulReaderHeader, getReaderClassNames, useFonts };
+//# sourceMappingURL=chunk-UCTMVCW7.mjs.map
+//# sourceMappingURL=chunk-UCTMVCW7.mjs.map