@edrlab/thorium-web 1.4.0 → 1.5.0

package/dist/{ThPreferencesAdapter-L1H6gzmu.d.mts → ThPreferencesAdapter-B3a-f5v-.d.mts}

@@ -1,7 +1,7 @@
-import { e as UnstableShortcutRepresentation } from './keyboardUtilities-BWAyLS_D.mjs';
+import { S as ShortcutRepresentation } from './keyboardUtilities-BCP3UcLb.mjs';
 import { B as BreakpointsMap, d as ThBreakpoints, e as ThBreakpointsObject, f as ThDocumentTitleFormat, T as ThBackLinkPref, g as ThFormatPref, h as ThRunningHeadFormat, i as ThProgressionFormat, j as ThLayoutUI, k as ThPaginatedAffordancePref } from './ui-DnZZhozX.mjs';
-import { I as I18nValue, e as ThColorScheme, f as ThContrast, g as ThSettingsKeys, h as ThTextSettingsKeys, b as ThSpacingSettingsKeys, d as ThSettingsRangePrefRequired, i as ThSettingsRadioPref, T as ThLineHeightOptions, j as ThSettingsGroupPref, a as ThSpacingPresetKeys } from './useContrast-Bo7cDw_X.mjs';
-import { e as ThSheetTypes, g as ThActionsKeys, d as ThCollapsibility, c as ThActionsTokens, f as ThDockingPref, T as ThDockingKeys } from './actions-BjeRjaJU.mjs';
+import { e as ThColorScheme, f as ThContrast, g as ThSettingsKeys, h as ThTextSettingsKeys, b as ThSpacingSettingsKeys, d as ThSettingsRangePrefRequired, i as ThSettingsRadioPref, T as ThLineHeightOptions, j as ThSettingsGroupPref, a as ThSpacingPresetKeys } from './useContrast-Bl08zDTU.mjs';
+import { I as I18nValue, e as ThSheetTypes, g as ThActionsKeys, d as ThCollapsibility, c as ThActionsTokens, f as ThDockingPref, T as ThDockingKeys } from './actions-C33UN3Ji.mjs';
 import { IContentProtectionConfig, IAudioContentProtectionConfig, ExperimentKey } from '@readium/navigator';
 
 type CSSValueUnitless = `${number}`;
@@ -350,8 +350,9 @@ interface useThemingProps<T extends string> {
     onMonochromeChange?: (isMonochrome: boolean) => void;
     onReducedMotionChange?: (reducedMotion: boolean) => void;
     onReducedTransparencyChange?: (reducedTransparency: boolean) => void;
+    onContainerBreakpointChange?: (breakpoint: ThBreakpoints | null) => void;
 }
-declare const useTheming: <T extends string>({ theme, systemKeys, themeKeys, breakpointsMap, initProps, coverUrl, autoThemeSource, onBreakpointChange, onColorSchemeChange, onContrastChange, onForcedColorsChange, onMonochromeChange, onReducedMotionChange, onReducedTransparencyChange, onCoverThemeGenerated, }: useThemingProps<T>) => {
+declare const useTheming: <T extends string>({ theme, systemKeys, themeKeys, breakpointsMap, initProps, coverUrl, autoThemeSource, onBreakpointChange, onColorSchemeChange, onContrastChange, onForcedColorsChange, onMonochromeChange, onReducedMotionChange, onReducedTransparencyChange, onCoverThemeGenerated, onContainerBreakpointChange, }: useThemingProps<T>) => {
     inferThemeAuto: () => T | undefined;
     theme: string | undefined;
     breakpoints: ThBreakpointsObject;
@@ -363,6 +364,7 @@ declare const useTheming: <T extends string>({ theme, systemKeys, themeKeys, bre
     reducedTransparency: boolean;
     coverThemeTokens: ThemeTokens | null;
     themeResolved: boolean;
+    setContainerRef: (el: Element | null) => void;
 };
 
 interface ThGlobalPreferences {
@@ -445,6 +447,21 @@ type ThSettingsKeyTypes<K extends CustomizableKeys = DefaultKeys> = {
     [key in S]: any;
 } : {} : {});
 type ThConstraintKeys = Extract<ThSheetTypes, ThSheetTypes.bottomSheet | ThSheetTypes.popover | ThSheetTypes.modal> | "pagination" | "dropdown";
+type ThShortcutsDisplayIn = "tooltip" | "menuItem";
+interface ThShortcutsPref {
+    representation: ShortcutRepresentation;
+    joiner?: string;
+    displayIn?: ThShortcutsDisplayIn[];
+}
+interface ThIconPref {
+    size: number;
+    tooltipOffset: number;
+    tooltipDelay?: number;
+}
+interface ThLayoutDefaultsPref {
+    dockingWidth: number;
+    scrim: string;
+}
 interface ThPreferences<K extends CustomizableKeys = {}> {
     experiments?: {
         reflow?: Array<ExperimentKey>;
@@ -484,11 +501,7 @@ interface ThPreferences<K extends CustomizableKeys = {}> {
             offset: number;
             tooltipDelay?: number;
         };
-        icon: {
-            size: number;
-            tooltipOffset: number;
-            tooltipDelay?: number;
-        };
+        icon: ThIconPref;
         layout: {
             ui?: {
                 reflow?: ThLayoutUI;
@@ -497,10 +510,7 @@ interface ThPreferences<K extends CustomizableKeys = {}> {
             };
             radius: number;
             spacing: number;
-            defaults: {
-                dockingWidth: number;
-                scrim: string;
-            };
+            defaults: ThLayoutDefaultsPref;
             constraints?: {
                 [key in ThConstraintKeys]?: number | null;
             };
@@ -530,10 +540,7 @@ interface ThPreferences<K extends CustomizableKeys = {}> {
         };
     };
     actions: ThActionsPref<K>;
-    shortcuts: {
-        representation: UnstableShortcutRepresentation;
-        joiner?: string;
-    };
+    shortcuts: ThShortcutsPref;
     docking: ThDockingPref<ThDockingKeys>;
     settings: {
         reflowOrder: Array<SettingsKey<K>>;
@@ -565,4 +572,4 @@ interface ThPreferencesAdapter<T extends CustomizableKeys = CustomizableKeys> {
     unsubscribe(callback: (prefs: ThPreferences<T>) => void): void;
 }
 
-export { type LocalVariableFontFile as $, type ActionKey as A, type CSSAbsoluteLength as B, type CustomizableKeys as C, type DefaultKeys as D, type CSSAngle as E, type FontCollection as F, type CSSDefaultViewport as G, type CSSDynamicViewport as H, type CSSFrequency as I, type CSSFontRelativeLength as J, type CSSLargeViewport as K, type LocalStaticFontFile as L, type CSSPhysicalLength as M, type CSSRelativeLength as N, type CSSResolution as O, type CSSRootFontRelativeLength as P, type CSSSmallViewport as Q, type CSSTime as R, type SettingsKey as S, ThThemeKeys as T, type CSSViewport as U, type VariableFontRangeConfig as V, type WeightConfig as W, type CSSColor as X, type SystemFontSource as Y, type BunnyFontSource as Z, type GoogleFontSource as _, type ThemeTokens as a, type LocalStaticFontSource as a0, type LocalVariableFontSource as a1, type LocalFontSource as a2, type FontSource as a3, type FontSpec as a4, type ValidatedLanguageCollection as a5, type ThFontFamilyPref as a6, readiumCSSFontCollection as a7, defaultFontCollection as a8, tamilCollection as a9, arabicFarsiCollection as aa, hebrewCollection as ab, chineseSimplifiedCollection as ac, chineseTraditionalCollection as ad, japaneseCollection as ae, japaneseVerticalCollection as af, koreanCollection as ag, type CopyProtectionConfig as ah, type PrintProtectionConfig as ai, type ContentProtectionConfig as aj, resolveContentProtectionConfig as ak, resolveAudioContentProtectionConfig as al, defaultContentProtectionConfig as am, defaultAudioContentProtectionConfig as an, devContentProtectionConfig as ao, lightTheme as ap, darkTheme as aq, paperTheme as ar, sepiaTheme as as, contrast1Theme as at, contrast2Theme as au, contrast3Theme as av, type AudioContentProtectionConfig as b, type ThPreferencesAdapter as c, type ThPreferences as d, type ThGlobalPreferences as e, type ThGlobalPreferencesAdapter as f, type FontDefinition as g, createGlobalPreferences as h, type ThemeKey as i, type TextSettingsKey as j, type SpacingSettingsKey as k, type ThSettingsSpacingPresets as l, type ThSpacingPreset as m, type ThActionsPref as n, type ThSettingsKeyTypes as o, type ThConstraintKeys as p, createPreferences as q, type ActionKeyType as r, type ThemeKeyType as s, type SettingsKeyType as t, useTheming as u, type TextSettingsKeyType as v, type SpacingSettingsKeyType as w, type useThemingProps as x, type CSSValueUnitless as y, type CSSValueWithUnit as z };
+export { type CSSColor as $, type ActionKey as A, type SpacingSettingsKeyType as B, type CustomizableKeys as C, type DefaultKeys as D, type useThemingProps as E, type FontCollection as F, type CSSValueUnitless as G, type CSSValueWithUnit as H, type CSSAbsoluteLength as I, type CSSAngle as J, type CSSDefaultViewport as K, type LocalStaticFontFile as L, type CSSDynamicViewport as M, type CSSFrequency as N, type CSSFontRelativeLength as O, type CSSLargeViewport as P, type CSSPhysicalLength as Q, type CSSRelativeLength as R, type SettingsKey as S, ThThemeKeys as T, type CSSResolution as U, type VariableFontRangeConfig as V, type WeightConfig as W, type CSSRootFontRelativeLength as X, type CSSSmallViewport as Y, type CSSTime as Z, type CSSViewport as _, type ThemeTokens as a, type SystemFontSource as a0, type BunnyFontSource as a1, type GoogleFontSource as a2, type LocalVariableFontFile as a3, type LocalStaticFontSource as a4, type LocalVariableFontSource as a5, type LocalFontSource as a6, type FontSource as a7, type FontSpec as a8, type ValidatedLanguageCollection as a9, type ThFontFamilyPref as aa, readiumCSSFontCollection as ab, defaultFontCollection as ac, tamilCollection as ad, arabicFarsiCollection as ae, hebrewCollection as af, chineseSimplifiedCollection as ag, chineseTraditionalCollection as ah, japaneseCollection as ai, japaneseVerticalCollection as aj, koreanCollection as ak, type CopyProtectionConfig as al, type PrintProtectionConfig as am, type ContentProtectionConfig as an, resolveContentProtectionConfig as ao, resolveAudioContentProtectionConfig as ap, defaultContentProtectionConfig as aq, defaultAudioContentProtectionConfig as ar, devContentProtectionConfig as as, lightTheme as at, darkTheme as au, paperTheme as av, sepiaTheme as aw, contrast1Theme as ax, contrast2Theme as ay, contrast3Theme as az, type AudioContentProtectionConfig as b, type ThShortcutsPref as c, type ThPreferencesAdapter as d, type ThPreferences as e, type ThGlobalPreferences as f, type ThGlobalPreferencesAdapter as g, type FontDefinition as h, type ThIconPref as i, type ThLayoutDefaultsPref as j, createGlobalPreferences as k, type ThemeKey as l, type TextSettingsKey as m, type SpacingSettingsKey as n, type ThSettingsSpacingPresets as o, type ThSpacingPreset as p, type ThActionsPref as q, type ThSettingsKeyTypes as r, type ThConstraintKeys as s, type ThShortcutsDisplayIn as t, useTheming as u, createPreferences as v, type ActionKeyType as w, type ThemeKeyType as x, type SettingsKeyType as y, type TextSettingsKeyType as z };

package/dist/{ThSettingsWrapper-DWEA4hYF.d.mts → ThSettingsWrapper-DtzcwzYX.d.mts}

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default, { ComponentType, SVGProps } from 'react';
 import { TooltipTriggerProps, KeyboardProps } from 'react-aria';
 import { ButtonProps, TooltipProps, MenuItemProps, LabelProps, MenuProps, MenuTriggerProps, PopoverProps, NumberFieldProps, GroupProps, InputProps, RadioGroupProps, RadioProps, SliderProps, SliderOutputProps, SliderTrackProps, SliderThumbProps, SwitchProps, HeadingProps, SelectProps, Button, ListBoxProps, ListBox, ListBoxItemProps, Heading } from 'react-aria-components';
-import { h as ThActionEntry, i as ThActionsBarProps, C as CollapsiblePref } from './actions-BjeRjaJU.mjs';
+import { h as ThActionEntry, i as ThActionsBarProps, C as CollapsiblePref } from './actions-C33UN3Ji.mjs';
 
 interface HTMLAttributesWithRef<T> extends React.HTMLAttributes<T> {
     ref?: React.ForwardedRef<T>;
@@ -13,7 +13,7 @@ type WithRef<T, K> = T & {
 
 interface ThActionButtonProps extends ButtonProps {
     label?: string;
-    ref?: React.ForwardedRef<HTMLButtonElement>;
+    ref?: React__default.ForwardedRef<HTMLButtonElement>;
     compounds?: {
         /**
          * Props for the tooltipTrigger component. See `TooltipTriggerProps` for more information.
@@ -24,9 +24,9 @@ interface ThActionButtonProps extends ButtonProps {
          */
         tooltip?: WithRef<TooltipProps, HTMLDivElement>;
         /**
-         * String for the tooltip
+         * Content for the tooltip
          */
-        label: string;
+        label: React__default.ReactNode;
     };
 }
 declare const ThActionButton: ({ ref, compounds, children, ...props }: ThActionButtonProps) => react_jsx_runtime.JSX.Element;

package/dist/{actions-BjeRjaJU.d.mts → actions-C33UN3Ji.d.mts}

@@ -1,6 +1,8 @@
+import { RefObject } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ToolbarProps } from 'react-aria-components';
 import { B as BreakpointsMap } from './ui-DnZZhozX.mjs';
+import { KeyCombo } from '@readium/navigator-html-injectables';
 
 declare enum ThActionsTriggerVariant {
     button = "iconButton",
@@ -33,15 +35,27 @@ interface CollapsiblePref {
         };
     };
 }
-declare const useCollapsibility: (items: ThActionEntry<string>[], prefs: CollapsiblePref, breakpoint?: string) => {
+declare const useCollapsibility: (items: ThActionEntry<string>[], prefs: CollapsiblePref, breakpoint?: string, containerRef?: RefObject<HTMLElement | null>) => {
     ActionIcons: ThActionEntry<string>[];
     MenuItems: ThActionEntry<string>[];
+    getItemRef: (key: string) => (el: HTMLElement | null) => void;
+    getGhostRef: (el: HTMLDivElement | null) => void;
 };
 
+type I18nValue<T> = T | string | {
+    key: string;
+    fallback?: string;
+};
+
+interface ThShortcutConfig {
+    keyCombos: KeyCombo[];
+    label?: I18nValue<string>;
+}
+declare const TEXT_INPUT_SELECTORS: string[];
 type ThBottomSheetDetent = "content-height" | "full-height";
 interface ThActionsTokens {
     visibility: ThCollapsibilityVisibility;
-    shortcut: string | null;
+    shortcut: ThShortcutConfig | null;
     sheet?: {
         defaultSheet: Exclude<ThSheetTypes, ThSheetTypes.dockedStart | ThSheetTypes.dockedEnd | ThSheetTypes.compactPopover>;
         breakpoints: BreakpointsMap<Exclude<ThSheetTypes, ThSheetTypes.compactPopover>>;
@@ -51,7 +65,7 @@ interface ThActionsTokens {
 }
 interface ThAudioActionsTokens {
     visibility: ThCollapsibilityVisibility;
-    shortcut: string | null;
+    shortcut: ThShortcutConfig | null;
     sheet?: {
         defaultSheet: Exclude<ThSheetTypes, ThSheetTypes.dockedStart | ThSheetTypes.dockedEnd | ThSheetTypes.popover>;
         breakpoints: BreakpointsMap<Exclude<ThSheetTypes, ThSheetTypes.popover>>;
@@ -117,4 +131,4 @@ declare const defaultFullscreenAction: ThActionsTokens;
 declare const defaultTocAction: ThActionsTokens;
 declare const defaultJumpToPositionAction: ThActionsTokens;
 
-export { type CollapsiblePref as C, ThDockingKeys as T, ThSheetHeaderVariant as a, type ThAudioActionsTokens as b, type ThActionsTokens as c, type ThCollapsibility as d, ThSheetTypes as e, type ThDockingPref as f, ThActionsKeys as g, type ThActionEntry as h, type ThActionsBarProps as i, type ThBottomSheetDetent as j, type ThActionsDockedPref as k, type ThActionsSnappedPref as l, ThDockingTypes as m, defaultActionKeysObject as n, defaultSettingsAction as o, defaultFullscreenAction as p, defaultTocAction as q, defaultJumpToPositionAction as r, ThCollapsibilityVisibility as s, ThActionsTriggerVariant as t, useCollapsibility as u, ThActionsBar as v };
+export { type CollapsiblePref as C, type I18nValue as I, ThDockingKeys as T, ThSheetHeaderVariant as a, type ThAudioActionsTokens as b, type ThActionsTokens as c, type ThCollapsibility as d, ThSheetTypes as e, type ThDockingPref as f, ThActionsKeys as g, type ThActionEntry as h, type ThActionsBarProps as i, type ThShortcutConfig as j, TEXT_INPUT_SELECTORS as k, type ThBottomSheetDetent as l, type ThActionsDockedPref as m, type ThActionsSnappedPref as n, ThDockingTypes as o, defaultActionKeysObject as p, defaultSettingsAction as q, defaultFullscreenAction as r, defaultTocAction as s, defaultJumpToPositionAction as t, ThCollapsibilityVisibility as u, useCollapsibility as v, ThActionsTriggerVariant as w, ThActionsBar as x };

package/dist/{actionsReducer-B32cq2mB.d.mts → actionsReducer-Bzcj3wk3.d.mts}

@@ -1,6 +1,6 @@
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { W as WritableDraft } from './immer.d-CoRThNOF.mjs';
-import { T as ThDockingKeys } from './actions-BjeRjaJU.mjs';
+import { T as ThDockingKeys } from './actions-C33UN3Ji.mjs';
 
 type ActionsStateKeys = string;
 type OverflowStateKeys = string;

package/dist/{chunk-NUXGQWED.mjs → chunk-2NCN2AG2.mjs}

@@ -1,4 +1,4 @@
-import { supportedLocales } from './chunk-B3WDMWCT.mjs';
+import { supportedLocales } from './chunk-GNROODJB.mjs';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
@@ -67,5 +67,5 @@ var useI18n = (ns) => {
 };
 
 export { DEFAULT_CONFIG, initI18n, useI18n };
-//# sourceMappingURL=chunk-NUXGQWED.mjs.map
-//# sourceMappingURL=chunk-NUXGQWED.mjs.map
+//# sourceMappingURL=chunk-2NCN2AG2.mjs.map
+//# sourceMappingURL=chunk-2NCN2AG2.mjs.map

package/dist/{chunk-NUXGQWED.mjs.map → chunk-2NCN2AG2.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/i18n/config.ts","../src/i18n/useI18n.ts"],"names":["i18n"],"mappings":";;;;;;;;AAOO,IAAM,cAAA,GAA8B;AAAA,EACzC,WAAA,EAAa,IAAA;AAAA,EACb,IAAA,EAAM,KAAA;AAAA,EACN,wBAAA,EAA0B,IAAA;AAAA,EAC1B,aAAA,EAAe,gBAAA;AAAA,EACf,SAAA,EAAW;AAAA,IACT,KAAA,EAAO,CAAC,WAAW,CAAA;AAAA,IACnB,QAAQ;AAAC,GACX;AAAA,EACA,aAAA,EAAe;AAAA,IACb,WAAA,EAAa;AAAA,GACf;AAAA,EACA,OAAA,EAAS;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,EAAA,EAAI,CAAC,gBAAA,EAAkB,aAAa,CAAA;AAAA,EACpC,SAAA,EAAW,CAAC,aAAA,EAAe,gBAAgB,CAAA;AAAA,EAC3C,iBAAA,EAAmB;AACrB;AAEO,IAAM,QAAA,GAAW,OAAO,OAAA,GAAgC,EAAC,KAAM;AACpE,EAAA,IAAI,KAAK,aAAA,EAAe;AACtB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,OAAO,IAAA,CACJ,GAAA,CAAI,OAAO,CAAA,CACX,GAAA,CAAI,gBAAgB,CAAA,CACpB,GAAA,CAAI,gBAAgB,CAAA,CACpB,IAAA,CAAK;AAAA,IACJ,GAAG,cAAA;AAAA,IACH,GAAG;AAAA,GACJ,CAAA;AACL;AC/BO,IAAM,OAAA,GAAU,CAAC,EAAA,KAA2B;AAGjD,EAAA,MAAM,EAAE,CAAA,EAAG,IAAA,EAAM,IAAA,EAAAA,KAAAA,EAAM,OAAM,GAAI,cAAA,CAAe,EAAA,IAAM,cAAA,CAAe,EAAc,CAAA;AAGnF,EAAA,MAAM,cAAA,GAAiB,CAAC,GAAA,KAAgB;AACtC,IAAA,OAAOA,KAAAA,CAAK,eAAe,GAAG,CAAA;AAAA,EAChC,CAAA;AAGA,EAAA,MAAM,CAAA,GAAI,WAAA,CAAY,CAAC,GAAA,EAAa,OAAA,KAA0B;AAC5D,IAAA,IAAI,EAAA,EAAI;AAEN,MAAA,OAAO,IAAA,CAAK,KAAK,OAAO,CAAA;AAAA,IAC1B,CAAA,MAAO;AAEL,MAAA,KAAA,MAAW,SAAA,IAAa,eAAe,EAAA,EAAgB;AACrD,QAAA,MAAM,MAAA,GAAS,KAAK,GAAA,EAAK,EAAE,GAAG,OAAA,EAAS,EAAA,EAAI,WAAW,CAAA;AACtD,QAAA,IAAI,MAAA,KAAW,KAAK,OAAO,MAAA;AAAA,MAC7B;AACA,MAAA,OAAO,GAAA;AAAA,IACT;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,IAAI,CAAC,CAAA;AAEb,EAAA,OAAO;AAAA;AAAA,IAEL,CAAA;AAAA;AAAA,IAEA,IAAA,EAAAA,KAAAA;AAAA;AAAA,IAEA,KAAA;AAAA;AAAA,IAEA,iBAAiBA,KAAAA,CAAK,QAAA;AAAA;AAAA,IAEtB,WAAWA,KAAAA,CAAK,SAAA;AAAA;AAAA,IAEhB;AAAA,GACF;AACF","file":"chunk-NUXGQWED.mjs","sourcesContent":["import i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\nimport LanguageDetector from \"i18next-browser-languagedetector\";\nimport Backend from \"i18next-http-backend\";\nimport { InitOptions } from \"i18next\";\nimport { supportedLocales } from \"./supported-locales\";\n\nexport const DEFAULT_CONFIG: InitOptions = {\n  fallbackLng: \"en\",\n  load: \"all\",\n  nonExplicitSupportedLngs: true,\n  supportedLngs: supportedLocales,\n  detection: {\n    order: [\"navigator\"],\n    caches: []\n  },\n  interpolation: {\n    escapeValue: false\n  },\n  backend: {\n    loadPath: \"/locales/{{lng}}/{{ns}}.json\"\n  },\n  ns: [\"thorium-shared\", \"thorium-web\"],\n  defaultNS: [\"thorium-web\", \"thorium-shared\"],\n  returnEmptyString: false\n};\n\nexport const initI18n = async (options: Partial<InitOptions> = {}) => {\n  if (i18n.isInitialized) {\n    return i18n;\n  }\n\n  return i18n\n    .use(Backend)\n    .use(LanguageDetector)\n    .use(initReactI18next)\n    .init({\n      ...DEFAULT_CONFIG,\n      ...options\n    });\n};\n\nexport { i18n };","import { useCallback } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DEFAULT_CONFIG } from \"./config\";\n\n/**\n * Hook to access the i18n instance and translation functions\n * @param ns Optional additional namespace(s) to include alongside the default namespaces\n * @returns Translation functions and i18n instance\n */\nexport const useI18n = (ns?: string | string[]) => {\n  // If no namespace provided, use both defaults with fallback\n  // If namespace provided, use only that (override behavior)\n  const { t: tRaw, i18n, ready } = useTranslation(ns || DEFAULT_CONFIG.ns as string[]);\n  \n  // Helper function to change language\n  const changeLanguage = (lng: string) => {\n    return i18n.changeLanguage(lng);\n  };\n\n  // Enhanced t function that searches both namespaces only when using defaults\n  const t = useCallback((key: string, options?: any): string => {\n    if (ns) {\n      // If custom namespace provided, use it directly (no fallback)\n      return tRaw(key, options) as string;\n    } else {\n      // If no namespace provided, search all default namespaces\n      for (const namespace of DEFAULT_CONFIG.ns as string[]) {\n        const result = tRaw(key, { ...options, ns: namespace });\n        if (result !== key) return result as string;\n      }\n      return key;\n    }\n  }, [ns, tRaw]);\n\n  return {\n    // Translation function\n    t,\n    // i18n instance\n    i18n,\n    // Whether translations are loaded\n    ready,\n    // Current language\n    currentLanguage: i18n.language,\n    // List of available languages\n    languages: i18n.languages,\n    // Function to change language\n    changeLanguage\n  };\n};\n"]}
+{"version":3,"sources":["../src/i18n/config.ts","../src/i18n/useI18n.ts"],"names":["i18n"],"mappings":";;;;;;;;AAOO,IAAM,cAAA,GAA8B;AAAA,EACzC,WAAA,EAAa,IAAA;AAAA,EACb,IAAA,EAAM,KAAA;AAAA,EACN,wBAAA,EAA0B,IAAA;AAAA,EAC1B,aAAA,EAAe,gBAAA;AAAA,EACf,SAAA,EAAW;AAAA,IACT,KAAA,EAAO,CAAC,WAAW,CAAA;AAAA,IACnB,QAAQ;AAAC,GACX;AAAA,EACA,aAAA,EAAe;AAAA,IACb,WAAA,EAAa;AAAA,GACf;AAAA,EACA,OAAA,EAAS;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,EAAA,EAAI,CAAC,gBAAA,EAAkB,aAAa,CAAA;AAAA,EACpC,SAAA,EAAW,CAAC,aAAA,EAAe,gBAAgB,CAAA;AAAA,EAC3C,iBAAA,EAAmB;AACrB;AAEO,IAAM,QAAA,GAAW,OAAO,OAAA,GAAgC,EAAC,KAAM;AACpE,EAAA,IAAI,KAAK,aAAA,EAAe;AACtB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,OAAO,IAAA,CACJ,GAAA,CAAI,OAAO,CAAA,CACX,GAAA,CAAI,gBAAgB,CAAA,CACpB,GAAA,CAAI,gBAAgB,CAAA,CACpB,IAAA,CAAK;AAAA,IACJ,GAAG,cAAA;AAAA,IACH,GAAG;AAAA,GACJ,CAAA;AACL;AC/BO,IAAM,OAAA,GAAU,CAAC,EAAA,KAA2B;AAGjD,EAAA,MAAM,EAAE,CAAA,EAAG,IAAA,EAAM,IAAA,EAAAA,KAAAA,EAAM,OAAM,GAAI,cAAA,CAAe,EAAA,IAAM,cAAA,CAAe,EAAc,CAAA;AAGnF,EAAA,MAAM,cAAA,GAAiB,CAAC,GAAA,KAAgB;AACtC,IAAA,OAAOA,KAAAA,CAAK,eAAe,GAAG,CAAA;AAAA,EAChC,CAAA;AAGA,EAAA,MAAM,CAAA,GAAI,WAAA,CAAY,CAAC,GAAA,EAAa,OAAA,KAA0B;AAC5D,IAAA,IAAI,EAAA,EAAI;AAEN,MAAA,OAAO,IAAA,CAAK,KAAK,OAAO,CAAA;AAAA,IAC1B,CAAA,MAAO;AAEL,MAAA,KAAA,MAAW,SAAA,IAAa,eAAe,EAAA,EAAgB;AACrD,QAAA,MAAM,MAAA,GAAS,KAAK,GAAA,EAAK,EAAE,GAAG,OAAA,EAAS,EAAA,EAAI,WAAW,CAAA;AACtD,QAAA,IAAI,MAAA,KAAW,KAAK,OAAO,MAAA;AAAA,MAC7B;AACA,MAAA,OAAO,GAAA;AAAA,IACT;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,IAAI,CAAC,CAAA;AAEb,EAAA,OAAO;AAAA;AAAA,IAEL,CAAA;AAAA;AAAA,IAEA,IAAA,EAAAA,KAAAA;AAAA;AAAA,IAEA,KAAA;AAAA;AAAA,IAEA,iBAAiBA,KAAAA,CAAK,QAAA;AAAA;AAAA,IAEtB,WAAWA,KAAAA,CAAK,SAAA;AAAA;AAAA,IAEhB;AAAA,GACF;AACF","file":"chunk-2NCN2AG2.mjs","sourcesContent":["import i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\nimport LanguageDetector from \"i18next-browser-languagedetector\";\nimport Backend from \"i18next-http-backend\";\nimport { InitOptions } from \"i18next\";\nimport { supportedLocales } from \"./supported-locales\";\n\nexport const DEFAULT_CONFIG: InitOptions = {\n  fallbackLng: \"en\",\n  load: \"all\",\n  nonExplicitSupportedLngs: true,\n  supportedLngs: supportedLocales,\n  detection: {\n    order: [\"navigator\"],\n    caches: []\n  },\n  interpolation: {\n    escapeValue: false\n  },\n  backend: {\n    loadPath: \"/locales/{{lng}}/{{ns}}.json\"\n  },\n  ns: [\"thorium-shared\", \"thorium-web\"],\n  defaultNS: [\"thorium-web\", \"thorium-shared\"],\n  returnEmptyString: false\n};\n\nexport const initI18n = async (options: Partial<InitOptions> = {}) => {\n  if (i18n.isInitialized) {\n    return i18n;\n  }\n\n  return i18n\n    .use(Backend)\n    .use(LanguageDetector)\n    .use(initReactI18next)\n    .init({\n      ...DEFAULT_CONFIG,\n      ...options\n    });\n};\n\nexport { i18n };","import { useCallback } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DEFAULT_CONFIG } from \"./config\";\n\n/**\n * Hook to access the i18n instance and translation functions\n * @param ns Optional additional namespace(s) to include alongside the default namespaces\n * @returns Translation functions and i18n instance\n */\nexport const useI18n = (ns?: string | string[]) => {\n  // If no namespace provided, use both defaults with fallback\n  // If namespace provided, use only that (override behavior)\n  const { t: tRaw, i18n, ready } = useTranslation(ns || DEFAULT_CONFIG.ns as string[]);\n  \n  // Helper function to change language\n  const changeLanguage = (lng: string) => {\n    return i18n.changeLanguage(lng);\n  };\n\n  // Enhanced t function that searches both namespaces only when using defaults\n  const t = useCallback((key: string, options?: any): string => {\n    if (ns) {\n      // If custom namespace provided, use it directly (no fallback)\n      return tRaw(key, options) as string;\n    } else {\n      // If no namespace provided, search all default namespaces\n      for (const namespace of DEFAULT_CONFIG.ns as string[]) {\n        const result = tRaw(key, { ...options, ns: namespace });\n        if (result !== key) return result as string;\n      }\n      return key;\n    }\n  }, [ns, tRaw]);\n\n  return {\n    // Translation function\n    t,\n    // i18n instance\n    i18n,\n    // Whether translations are loaded\n    ready,\n    // Current language\n    currentLanguage: i18n.language,\n    // List of available languages\n    languages: i18n.languages,\n    // Function to change language\n    changeLanguage\n  };\n};\n"]}

package/dist/{chunk-IVXRCKWR.mjs → chunk-2T65MDBR.mjs}

@@ -1,5 +1,5 @@
-import { ThGrid, ThLoader } from './chunk-P6ILEQ5P.mjs';
-import { useI18n } from './chunk-NUXGQWED.mjs';
+import { ThGrid, ThLoader } from './chunk-ZD4LTF6G.mjs';
+import { useI18n } from './chunk-2NCN2AG2.mjs';
 import { isValidElement, cloneElement } from 'react';
 import { Link } from 'react-aria-components';
 import classNames from 'classnames';
@@ -130,5 +130,5 @@ var ErrorDisplay = ({
 };
 
 export { DefaultImage, ErrorDisplay, PublicationGrid, StatefulLoader };
-//# sourceMappingURL=chunk-IVXRCKWR.mjs.map
-//# sourceMappingURL=chunk-IVXRCKWR.mjs.map
+//# sourceMappingURL=chunk-2T65MDBR.mjs.map
+//# sourceMappingURL=chunk-2T65MDBR.mjs.map

package/dist/{chunk-IVXRCKWR.mjs.map → chunk-2T65MDBR.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Misc/assets/styles/thorium-web.publicationGrid.module.css","../src/components/Misc/PublicationGrid.tsx","../src/components/Misc/assets/styles/thorium-web.loader.module.css","../src/components/Misc/StatefulLoader.tsx","../src/components/Misc/assets/styles/thorium-web.error.module.css","../src/components/Misc/ErrorDisplay.tsx"],"names":["wrapper","card","cover","image","info","title","author","rendition","loader","jsx","message","jsxs"],"mappings":"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","file":"chunk-IVXRCKWR.mjs","sourcesContent":[".wrapper {\n  --th-color-text: #333;\n  --th-color-text-secondary: #666;\n  --th-color-background: #fff;\n  --th-color-primary: #e0e0e0;\n  --th-color-secondary: #fafafa;\n\n  padding: 1rem;\n  width: 100%;\n}\n\n.card {\n  display: flex;\n  text-decoration: none;\n  color: inherit;\n  border: 1px solid var(--th-color-primary);\n  border-radius: 8px;\n  overflow: hidden;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n  background: white;\n}\n\n.card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.cover {\n  width: 120px;\n  height: 180px;\n  flex-shrink: 0;\n  margin: 0;\n  background-color: var(--th-color-secondary);\n}\n\n.image {\n  width: 120px;\n  height: 180px;\n  object-fit: contain;\n}\n\n.info {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.title {\n  margin: 0 0 0.5rem;\n  font-weight: 600;\n  font-size: 1.25rem;\n  color: var(--th-color-text);\n}\n\n.author {\n  margin: 0 0 0.75rem;\n  color: var(--th-color-text-secondary);\n  font-size: 1rem;\n}\n\n.rendition {\n  background: var(--th-color-primary);\n  color: var(--th-color-text);\n  padding: 0.25rem 0.75rem;\n  margin: 0;\n  border-radius: 20px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-top: auto;\n  align-self: flex-start;\n}","\"use client\";\n\nimport React, { cloneElement, isValidElement } from \"react\";\n\nimport publicationGridStyles from \"./assets/styles/thorium-web.publicationGrid.module.css\";\n\nimport { ThGrid } from \"@/core/Components\";\nimport { Link } from \"react-aria-components\";\n\nimport classNames from \"classnames\";\n\nexport const DefaultImage = ({\n  src,\n  alt = \"\"\n}: {\n  src: string;\n  alt?: string;\n}) => (\n  <img\n    src={ src }\n    alt={ alt }\n    className={ publicationGridStyles.image }\n    loading=\"lazy\"\n  />\n);\n\nexport interface Publication {\n  title: string;\n  author: string;\n  cover: string;\n  url: string;\n  rendition?: string;\n}\n\nexport interface PublicationGridProps {\n  publications: Publication[];\n  columnWidth?: number;\n  gap?: string;\n  renderCover?: (publication: Publication) => React.ReactElement<React.ImgHTMLAttributes<HTMLImageElement>>;\n}\n\nexport const PublicationGrid = ({ \n  publications,\n  columnWidth = 400,\n  gap = \"1.5rem\",\n  renderCover = (publication) => (\n    <DefaultImage\n      src={ publication.cover }\n      alt=\"\"\n    />\n  ),\n}: PublicationGridProps) => {\n  const renderCoverWithClass = (publication: Publication) => {\n    const cover = renderCover(publication);\n    \n    if (!isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(cover)) {\n      return (\n        <DefaultImage\n          src={ publication.cover }\n          alt=\"\"\n        />\n      );\n    }\n\n    return cloneElement(cover, {\n      className: classNames(\n        publicationGridStyles.image,\n        cover.props.className\n      )\n    });\n  };\n\n  return (\n    <ThGrid\n      className={ publicationGridStyles.wrapper }\n      items={ publications }\n      columnWidth={ columnWidth }\n      gap={ gap }\n      renderItem={ (publication, index) => (\n        <Link\n          href={ publication.url }\n          key={ index }\n          className={ publicationGridStyles.card }\n        >\n          <figure className={ publicationGridStyles.cover }>\n            { renderCoverWithClass(publication) }\n          </figure>\n          <div className={ publicationGridStyles.info }>\n            <h2 className={ publicationGridStyles.title }>\n              { publication.title }\n            </h2>\n            <p className={ publicationGridStyles.author }>\n              { publication.author }\n            </p>\n            { publication.rendition && (\n              <p className={ publicationGridStyles.rendition }>\n                { publication.rendition }\n              </p>\n            ) }\n          </div>\n        </Link>\n      ) }\n    />\n  );\n};",".wrapper {\n  width: 100%;\n  height: 100dvh;\n  height: 100vh;\n}\n\n.loader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  color: var(--th-theme-text, CanvasText);\n  background-color: var(--th-theme-background, Canvas);\n  font-weight: bold;\n}\n\n.loader::after {\n  content: \"...\";\n  overflow: hidden;\n  display: inline-block;\n  vertical-align: bottom;\n  animation: ellipsis-dot 1s infinite 300ms;\n  animation-fill-mode: forwards;\n  width: 3ch;\n}\n\n@keyframes ellipsis-dot {\n  25% {\n    content: \"\";\n  }\n  50% {\n    content: \".\";\n  }\n  75% {\n    content: \"..\";\n  }\n  100% {\n    content: \"...\";\n  }\n}","import { ReactNode } from \"react\";\n\nimport readerLoaderStyles from \"./assets/styles/thorium-web.loader.module.css\";\n\nimport { ThLoader } from \"@/core/Components/Reader/ThLoader\";\n\nimport { useI18n } from \"@/i18n/useI18n\";\n\nexport const StatefulLoader = ({ isLoading, children }: { isLoading: boolean, children: ReactNode }) => {\n  const { t } = useI18n();\n\n  return (\n    <>\n    <ThLoader \n      isLoading={ isLoading } \n      loader={ <div className={ readerLoaderStyles.loader }>{ t(\"reader.app.loading\") }</div> } \n      className={ readerLoaderStyles.wrapper } \n    >\n      { children }\n    </ThLoader>\n    </>\n  )\n}",".wrapper {\n  --th-color-text: #333;\n  --th-color-text-secondary: #666;\n  --th-color-background: #fff;\n\n  padding: 2rem;\n  text-align: center;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: var(--th-color-text);\n  margin: 0 0 1rem 0;\n}\n\n.message {\n  font-size: 1.125rem;\n  color: var(--th-color-text-secondary);\n  line-height: 1.6;\n  margin: 0 0 1.5rem 0;\n}","import { ReactNode } from \"react\";\nimport { ProcessedError } from \"@/helpers/errorHandler\";\nimport { useI18n } from \"@/i18n/useI18n\";\nimport errorStyles from \"./assets/styles/thorium-web.error.module.css\";\n\ninterface ErrorDisplayProps {\n  error: ProcessedError;\n  title?: string;\n  children?: ReactNode;\n}\n\nexport const ErrorDisplay = ({ \n  error, \n  title,\n  children\n}: ErrorDisplayProps) => {\n  const { t } = useI18n();\n  \n  const getUserMessage = () => {\n    if (error.isNotFound()) return t(\"reader.app.errors.notFound\");\n    if (error.isAccessDenied()) return t(\"reader.app.errors.accessDenied\");\n    if (error.isNetwork()) return t(\"reader.app.errors.network\");\n    if (error.isServerError()) return t(\"reader.app.errors.serverError\");\n    if (error.isClientError()) return t(\"reader.app.errors.clientError\");\n    return t(\"reader.app.errors.generic\");\n  };\n\n  return (\n    <div className={ errorStyles.wrapper }>\n      <h1 className={ errorStyles.title }>{ title || t(\"reader.app.errors.title\") }</h1>\n      <p className={ errorStyles.message }>{ getUserMessage() }</p>\n      { children }\n    </div>\n  );\n};\n"]}
+{"version":3,"sources":["../src/components/Misc/assets/styles/thorium-web.publicationGrid.module.css","../src/components/Misc/PublicationGrid.tsx","../src/components/Misc/assets/styles/thorium-web.loader.module.css","../src/components/Misc/StatefulLoader.tsx","../src/components/Misc/assets/styles/thorium-web.error.module.css","../src/components/Misc/ErrorDisplay.tsx"],"names":["wrapper","card","cover","image","info","title","author","rendition","loader","jsx","message","jsxs"],"mappings":"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","file":"chunk-2T65MDBR.mjs","sourcesContent":[".wrapper {\n  --th-color-text: #333;\n  --th-color-text-secondary: #666;\n  --th-color-background: #fff;\n  --th-color-primary: #e0e0e0;\n  --th-color-secondary: #fafafa;\n\n  padding: 1rem;\n  width: 100%;\n}\n\n.card {\n  display: flex;\n  text-decoration: none;\n  color: inherit;\n  border: 1px solid var(--th-color-primary);\n  border-radius: 8px;\n  overflow: hidden;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n  background: white;\n}\n\n.card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.cover {\n  width: 120px;\n  height: 180px;\n  flex-shrink: 0;\n  margin: 0;\n  background-color: var(--th-color-secondary);\n}\n\n.image {\n  width: 120px;\n  height: 180px;\n  object-fit: contain;\n}\n\n.info {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.title {\n  margin: 0 0 0.5rem;\n  font-weight: 600;\n  font-size: 1.25rem;\n  color: var(--th-color-text);\n}\n\n.author {\n  margin: 0 0 0.75rem;\n  color: var(--th-color-text-secondary);\n  font-size: 1rem;\n}\n\n.rendition {\n  background: var(--th-color-primary);\n  color: var(--th-color-text);\n  padding: 0.25rem 0.75rem;\n  margin: 0;\n  border-radius: 20px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-top: auto;\n  align-self: flex-start;\n}","\"use client\";\n\nimport React, { cloneElement, isValidElement } from \"react\";\n\nimport publicationGridStyles from \"./assets/styles/thorium-web.publicationGrid.module.css\";\n\nimport { ThGrid } from \"@/core/Components\";\nimport { Link } from \"react-aria-components\";\n\nimport classNames from \"classnames\";\n\nexport const DefaultImage = ({\n  src,\n  alt = \"\"\n}: {\n  src: string;\n  alt?: string;\n}) => (\n  <img\n    src={ src }\n    alt={ alt }\n    className={ publicationGridStyles.image }\n    loading=\"lazy\"\n  />\n);\n\nexport interface Publication {\n  title: string;\n  author: string;\n  cover: string;\n  url: string;\n  rendition?: string;\n}\n\nexport interface PublicationGridProps {\n  publications: Publication[];\n  columnWidth?: number;\n  gap?: string;\n  renderCover?: (publication: Publication) => React.ReactElement<React.ImgHTMLAttributes<HTMLImageElement>>;\n}\n\nexport const PublicationGrid = ({ \n  publications,\n  columnWidth = 400,\n  gap = \"1.5rem\",\n  renderCover = (publication) => (\n    <DefaultImage\n      src={ publication.cover }\n      alt=\"\"\n    />\n  ),\n}: PublicationGridProps) => {\n  const renderCoverWithClass = (publication: Publication) => {\n    const cover = renderCover(publication);\n    \n    if (!isValidElement<React.ImgHTMLAttributes<HTMLImageElement>>(cover)) {\n      return (\n        <DefaultImage\n          src={ publication.cover }\n          alt=\"\"\n        />\n      );\n    }\n\n    return cloneElement(cover, {\n      className: classNames(\n        publicationGridStyles.image,\n        cover.props.className\n      )\n    });\n  };\n\n  return (\n    <ThGrid\n      className={ publicationGridStyles.wrapper }\n      items={ publications }\n      columnWidth={ columnWidth }\n      gap={ gap }\n      renderItem={ (publication, index) => (\n        <Link\n          href={ publication.url }\n          key={ index }\n          className={ publicationGridStyles.card }\n        >\n          <figure className={ publicationGridStyles.cover }>\n            { renderCoverWithClass(publication) }\n          </figure>\n          <div className={ publicationGridStyles.info }>\n            <h2 className={ publicationGridStyles.title }>\n              { publication.title }\n            </h2>\n            <p className={ publicationGridStyles.author }>\n              { publication.author }\n            </p>\n            { publication.rendition && (\n              <p className={ publicationGridStyles.rendition }>\n                { publication.rendition }\n              </p>\n            ) }\n          </div>\n        </Link>\n      ) }\n    />\n  );\n};",".wrapper {\n  width: 100%;\n  height: 100dvh;\n  height: 100vh;\n}\n\n.loader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  color: var(--th-theme-text, CanvasText);\n  background-color: var(--th-theme-background, Canvas);\n  font-weight: bold;\n}\n\n.loader::after {\n  content: \"...\";\n  overflow: hidden;\n  display: inline-block;\n  vertical-align: bottom;\n  animation: ellipsis-dot 1s infinite 300ms;\n  animation-fill-mode: forwards;\n  width: 3ch;\n}\n\n@keyframes ellipsis-dot {\n  25% {\n    content: \"\";\n  }\n  50% {\n    content: \".\";\n  }\n  75% {\n    content: \"..\";\n  }\n  100% {\n    content: \"...\";\n  }\n}","import { ReactNode } from \"react\";\n\nimport readerLoaderStyles from \"./assets/styles/thorium-web.loader.module.css\";\n\nimport { ThLoader } from \"@/core/Components/Reader/ThLoader\";\n\nimport { useI18n } from \"@/i18n/useI18n\";\n\nexport const StatefulLoader = ({ isLoading, children }: { isLoading: boolean, children: ReactNode }) => {\n  const { t } = useI18n();\n\n  return (\n    <>\n    <ThLoader \n      isLoading={ isLoading } \n      loader={ <div className={ readerLoaderStyles.loader }>{ t(\"reader.app.loading\") }</div> } \n      className={ readerLoaderStyles.wrapper } \n    >\n      { children }\n    </ThLoader>\n    </>\n  )\n}",".wrapper {\n  --th-color-text: #333;\n  --th-color-text-secondary: #666;\n  --th-color-background: #fff;\n\n  padding: 2rem;\n  text-align: center;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: var(--th-color-text);\n  margin: 0 0 1rem 0;\n}\n\n.message {\n  font-size: 1.125rem;\n  color: var(--th-color-text-secondary);\n  line-height: 1.6;\n  margin: 0 0 1.5rem 0;\n}","import { ReactNode } from \"react\";\nimport { ProcessedError } from \"@/helpers/errorHandler\";\nimport { useI18n } from \"@/i18n/useI18n\";\nimport errorStyles from \"./assets/styles/thorium-web.error.module.css\";\n\ninterface ErrorDisplayProps {\n  error: ProcessedError;\n  title?: string;\n  children?: ReactNode;\n}\n\nexport const ErrorDisplay = ({ \n  error, \n  title,\n  children\n}: ErrorDisplayProps) => {\n  const { t } = useI18n();\n  \n  const getUserMessage = () => {\n    if (error.isNotFound()) return t(\"reader.app.errors.notFound\");\n    if (error.isAccessDenied()) return t(\"reader.app.errors.accessDenied\");\n    if (error.isNetwork()) return t(\"reader.app.errors.network\");\n    if (error.isServerError()) return t(\"reader.app.errors.serverError\");\n    if (error.isClientError()) return t(\"reader.app.errors.clientError\");\n    return t(\"reader.app.errors.generic\");\n  };\n\n  return (\n    <div className={ errorStyles.wrapper }>\n      <h1 className={ errorStyles.title }>{ title || t(\"reader.app.errors.title\") }</h1>\n      <p className={ errorStyles.message }>{ getUserMessage() }</p>\n      { children }\n    </div>\n  );\n};\n"]}

package/dist/{chunk-KVUG6BNI.mjs → chunk-63LKYJFG.mjs}

@@ -1,11 +1,11 @@
-import { useFonts, Peripherals, StatefulReaderHeader, StatefulReaderFooter, getReaderClassNames } from './chunk-6MONB2DN.mjs';
-import { createDefaultPlugin, useSpacingPresets, useSettingsComponentStatus, usePositionStorage, useLineHeight, NavigatorProvider, thorium_web_reader_app_default, StatefulDockingWrapper } from './chunk-PXXWEMNL.mjs';
-import { useWebPubSettingsCache, useFullscreen, useWebPubNavigator, useTimeline, useDocumentTitle } from './chunk-SZAVAQ6S.mjs';
-import { setFullscreen, setTimeline, setHovering, toggleImmersive, toggleActionOpen, setPublicationStart, setPublicationEnd, setLoading } from './chunk-WLVE3WNW.mjs';
-import { usePreferences, resolveContentProtectionConfig } from './chunk-XRFLDNAY.mjs';
-import { useAppSelector, useAppDispatch, useAppStore } from './chunk-A575ZW4A.mjs';
-import { ThPluginRegistry, ThPluginProvider } from './chunk-P6ILEQ5P.mjs';
-import { useI18n } from './chunk-NUXGQWED.mjs';
+import { useFonts, useZoomCallbacks, StatefulReaderHeader, StatefulReaderFooter, getReaderClassNames } from './chunk-Y5X74VW7.mjs';
+import { createDefaultPlugin, useSpacingPresets, useSettingsComponentStatus, usePositionStorage, fromActionPeripheralType, NavPeripheralType, NavigatorProvider, thorium_web_reader_app_default, StatefulDockingWrapper, ZOOM_IN_KEY_COMBOS, ZOOM_OUT_KEY_COMBOS, toActionPeripheralType, useLineHeight } from './chunk-KJ55Q63A.mjs';
+import { useWebPubSettingsCache, useFullscreen, useWebPubNavigator, useTimeline, useDocumentTitle } from './chunk-GRYEOCGD.mjs';
+import { setFullscreen, setTimeline, setHovering, toggleImmersive, toggleActionOpen, setPublicationStart, setPublicationEnd, setLoading } from './chunk-PAFJZH7O.mjs';
+import { usePreferences, resolveContentProtectionConfig, useActionsPreferences } from './chunk-PRQBFBJ7.mjs';
+import { useAppSelector, useAppDispatch } from './chunk-A575ZW4A.mjs';
+import { ThPluginRegistry, ThPluginProvider } from './chunk-ZD4LTF6G.mjs';
+import { useI18n } from './chunk-2NCN2AG2.mjs';
 import { useState, useLayoutEffect, useRef, useCallback, useMemo, useEffect } from 'react';
 import { Locator } from '@readium/shared';
 import classNames from 'classnames';
@@ -15,9 +15,9 @@ var useWebPubPreferencesConfig = ({
   settings,
   fontLanguage,
   hasDisplayTransformability,
-  getFontMetadata,
-  lineHeightOptions
+  getFontMetadata
 }) => {
+  const { processedValues: lineHeightOptions } = useLineHeight();
   const { isComponentUsed: isFontFamilyUsed } = useSettingsComponentStatus({
     settingsKey: "fontFamily" /* fontFamily */,
     publicationType: "webpub"
@@ -73,7 +73,6 @@ var useWebPubPreferencesConfig = ({
     if (hasDisplayTransformability) {
       if (isFontFamilyUsed) preferences.fontFamily = getFontMetadata(settings.fontFamily[fontLanguage] ?? "")?.fontStack || null;
       if (isFontWeightUsed) preferences.fontWeight = settings.fontWeight;
-      if (isHyphensUsed) preferences.hyphens = settings.hyphens;
       if (isLigaturesUsed) preferences.ligatures = settings.ligatures;
       if (isNoRubyUsed) preferences.noRuby = settings.noRuby;
       if (isLetterSpacingUsed) preferences.letterSpacing = settings.letterSpacing;
@@ -81,6 +80,7 @@ var useWebPubPreferencesConfig = ({
       if (isParagraphIndentUsed) preferences.paragraphIndent = settings.paragraphIndent;
       if (isParagraphSpacingUsed) preferences.paragraphSpacing = settings.paragraphSpacing;
       if (isTextAlignUsed) preferences.textAlign = settings.textAlign;
+      if (isHyphensUsed && settings.textAlign !== "publisher") preferences.hyphens = settings.hyphens;
       if (isTextNormalizeUsed) preferences.textNormalization = settings.textNormalization;
       if (isWordSpacingUsed) preferences.wordSpacing = settings.wordSpacing;
     }
@@ -90,7 +90,6 @@ var useWebPubPreferencesConfig = ({
     fontLanguage,
     hasDisplayTransformability,
     getFontMetadata,
-    lineHeightOptions,
     isFontFamilyUsed,
     isFontWeightUsed,
     isHyphensUsed,
@@ -102,7 +101,8 @@ var useWebPubPreferencesConfig = ({
     isParagraphSpacingUsed,
     isTextAlignUsed,
     isTextNormalizeUsed,
-    isWordSpacingUsed
+    isWordSpacingUsed,
+    lineHeightOptions
   ]);
   return { webPubPreferences };
 };
@@ -146,8 +146,8 @@ var useWebPubReaderInit = ({
   injectFontResources,
   removeFontResources,
   getFontInjectables,
-  lineHeightOptions,
   contentProtectionConfig,
+  keyboardPeripherals,
   onNavigatorReady,
   onNavigatorLoaded,
   onCleanup
@@ -157,8 +157,7 @@ var useWebPubReaderInit = ({
     settings: cache.current.settings,
     fontLanguage,
     hasDisplayTransformability,
-    getFontMetadata,
-    lineHeightOptions
+    getFontMetadata
   });
   const { injectables } = useWebPubInjectablesConfig({
     isFontFamilyUsed,
@@ -187,7 +186,8 @@ var useWebPubReaderInit = ({
         experiments: preferences.experiments?.webPub || null
       },
       injectables,
-      contentProtection: contentProtectionConfig
+      contentProtection: contentProtectionConfig,
+      keyboardPeripherals
     };
     isNavigatorLoadedWebPub.current = true;
     onNavigatorReady?.();
@@ -217,11 +217,26 @@ var useWebPubReaderInit = ({
     navigatorReady
   };
 };
+var useWebPubKeyboardPeripherals = () => {
+  const { actionsKeys } = useActionsPreferences();
+  return useMemo(() => {
+    const config = [
+      { type: NavPeripheralType.zoomIn, keyCombos: [...ZOOM_IN_KEY_COMBOS] },
+      { type: NavPeripheralType.zoomOut, keyCombos: [...ZOOM_OUT_KEY_COMBOS] }
+    ];
+    for (const [key, tokens] of Object.entries(actionsKeys)) {
+      const shortcut = tokens?.shortcut;
+      if (shortcut) config.push({ type: toActionPeripheralType(key), keyCombos: shortcut.keyCombos });
+    }
+    return config;
+  }, [actionsKeys]);
+};
 var ExperimentalWebPubStatefulReader = ({
   publication,
   localDataKey,
   plugins,
-  positionStorage
+  positionStorage,
+  containerRefSetter
 }) => {
   const [pluginsRegistered, setPluginsRegistered] = useState(false);
   useLayoutEffect(() => {
@@ -237,9 +252,9 @@ var ExperimentalWebPubStatefulReader = ({
   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 { preferences, getFontMetadata, getFontInjectables } = usePreferences();
   const { t } = useI18n();
   const { getEffectiveSpacingValue } = useSpacingPresets();
@@ -267,6 +282,8 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
   const hasDisplayTransformability = useAppSelector((state) => state.publication.hasDisplayTransformability);
   const isImmersive = useAppSelector((state) => state.reader.isImmersive);
   const isHovering = useAppSelector((state) => state.reader.isHovering);
+  const breakpoint = useAppSelector((state) => state.theming.breakpoint);
+  const containerBreakpoint = useAppSelector((state) => state.theming.containerBreakpoint);
   const cache = useWebPubSettingsCache(
     fontFamily,
     fontWeight,
@@ -285,10 +302,12 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
   );
   const layoutUI = preferences.theming.layout.ui?.webPub || "stacked-ui" /* stacked */;
   const dispatch = useAppDispatch();
+  const profile = useAppSelector((state) => state.reader.profile);
+  const keyboardPeripherals = useWebPubKeyboardPeripherals();
   const onFsChange = useCallback((isFullscreen) => {
     dispatch(setFullscreen(isFullscreen));
   }, [dispatch]);
-  const fs = useFullscreen(onFsChange);
+  useFullscreen(onFsChange);
   const webPubNavigator = useWebPubNavigator();
   const {
     currentPositions,
@@ -305,7 +324,6 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
       dispatch(setTimeline(timeline2));
     }
   });
-  const lineHeightOptions = useLineHeight();
   const documentTitleFormat = preferences.metadata?.documentTitle?.format;
   let documentTitle;
   if (documentTitleFormat) {
@@ -339,30 +357,9 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
     dispatch(setHovering(false));
     dispatch(toggleImmersive());
   }, [dispatch]);
-  const appStore = useAppStore();
-  const p = useMemo(() => new Peripherals(appStore, preferences.actions, {
-    moveTo: () => {
-    },
-    goProgression: () => {
-    },
-    toggleAction: (actionKey) => {
-      switch (actionKey) {
-        case "fullscreen" /* fullscreen */:
-          fs.handleFullscreen();
-          break;
-        case "settings" /* settings */:
-        case "toc" /* toc */:
-          dispatch(toggleActionOpen({
-            key: actionKey,
-            profile: "webPub"
-          }));
-          break;
-      }
-    }
-  }), [appStore, preferences.actions, fs, dispatch]);
+  const { zoomIn, zoomOut } = useZoomCallbacks(webPubNavigator);
   const listeners = useMemo(() => ({
     frameLoaded: async function(_wnd) {
-      p.observe(window);
     },
     positionChanged: async function(locator) {
       setLocalData(locator);
@@ -405,9 +402,21 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
     },
     contextMenu: function(_data) {
     },
-    peripheral: function(_data) {
+    peripheral: function(data) {
+      switch (data.type) {
+        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, setLocalData, canGoBackward, canGoForward, dispatch, toggleIsImmersive]);
+  }), [setLocalData, canGoBackward, canGoForward, dispatch, toggleIsImmersive, zoomIn, zoomOut, profile]);
   const initialPosition = useMemo(() => getLocalData(), [getLocalData]);
   useWebPubReaderInit({
     container,
@@ -423,27 +432,24 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
     injectFontResources,
     removeFontResources,
     getFontInjectables,
-    lineHeightOptions,
     contentProtectionConfig: resolveContentProtectionConfig(preferences.contentProtection, t),
+    keyboardPeripherals,
     onNavigatorReady: () => {
       dispatch(setLoading(false));
-    },
-    onNavigatorLoaded: () => {
-      p.observe(window);
-    },
-    onCleanup: () => {
-      p.destroy();
     }
   });
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(NavigatorProvider, { visualNavigator: webPubNavigator, children: /* @__PURE__ */ jsx("main", { className: thorium_web_reader_app_default.main, children: /* @__PURE__ */ jsx(StatefulDockingWrapper, { children: /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: containerRefSetter,
       className: classNames(
         getReaderClassNames({
           isScroll: true,
           isImmersive,
           isHovering,
-          layoutUI
+          layoutUI,
+          breakpoint,
+          containerBreakpoint
         })
       ),
       children: [
@@ -471,5 +477,5 @@ var StatefulReaderInner = ({ publication, localDataKey, positionStorage }) => {
 };
 
 export { ExperimentalWebPubStatefulReader };
-//# sourceMappingURL=chunk-KVUG6BNI.mjs.map
-//# sourceMappingURL=chunk-KVUG6BNI.mjs.map
+//# sourceMappingURL=chunk-63LKYJFG.mjs.map
+//# sourceMappingURL=chunk-63LKYJFG.mjs.map