@readium/navigator 2.4.0-beta.9 → 2.5.0-beta.1

package/src/epub/frame/FrameBlobBuilder.ts

@@ -1,6 +1,6 @@
-import { MediaType } from "@readium/shared";
-import { Link, Publication } from "@readium/shared";
-import { Injector } from "../../injection/Injector";
+import { Link, MediaType, Publication, ReadingProgression } from "@readium/shared";
+import { Injector } from "../../injection/Injector.ts";
+import { getScriptMode } from "../helpers/scriptMode.ts";
 
 const csp = (domains: string[]) => {
     const d = domains.join(" ");
@@ -58,12 +58,12 @@ export default class FrameBlobBuider {
         // Load the HTML resource
         const txt = await this.pub.get(this.item).readAsString();
         if(!txt) throw new Error(`Failed reading item ${this.item.href}`);
-        
+
         const doc = new DOMParser().parseFromString(
             txt,
             this.item.mediaType.string as DOMParserSupportedType
         );
-        
+
         const perror = doc.querySelector("parsererror");
         if (perror) {
             const details = perror.querySelector("div");
@@ -101,7 +101,7 @@ export default class FrameBlobBuider {
 
         // Get allowed domains from injector if it exists
         const allowedDomains = this.injector?.getAllowedDomains?.() || [];
-        
+
         // Always include the root domain if provided
         const domains = [...new Set([
             ...(root ? [root] : []),
@@ -126,10 +126,10 @@ export default class FrameBlobBuider {
             img.setAttribute("fetchpriority", "high");
         });
 
-        // We need to ensure that lang is set on the root element 
+        // We need to ensure that lang is set on the root element
         // since it is used for settings such as font-family, hyphens, ligatures, etc.
         // but also screen readers, etc.
-        // Metadata’s effectiveReadingProgression uses first item in array as primary language 
+        // Metadata’s effectiveReadingProgression uses first item in array as primary language
         // so we keep it consistent.
         if (mediaType.isHTML && this.pub.metadata.languages?.[0]) {
             const primaryLanguage = this.pub.metadata.languages[0];
@@ -137,37 +137,37 @@ export default class FrameBlobBuider {
             if (mediaType === MediaType.XHTML) {
                 // InDesign is infamous for setting xml:lang on the body instead of the root element
                 // So we have to check whether lang is set on the body and move it to the root element
-                const rootLang = document.documentElement.lang || document.documentElement.getAttribute("xml:lang");
-                const bodyLang = document.body.lang || document.body.getAttribute("xml:lang");
+                const rootLang = doc.documentElement.lang || doc.documentElement.getAttribute("xml:lang");
+                const bodyLang = doc.body.lang || doc.body.getAttribute("xml:lang");
                 if (bodyLang && !rootLang) {
-                    document.documentElement.lang = bodyLang;
-                    document.documentElement.setAttribute("xml:lang", bodyLang);
-                    document.body.removeAttribute("xml:lang");
-                    document.body.removeAttribute("lang");
+                    doc.documentElement.lang = bodyLang;
+                    doc.documentElement.setAttribute("xml:lang", bodyLang);
+                    doc.body.removeAttribute("xml:lang");
+                    doc.body.removeAttribute("lang");
                 } else if (!rootLang) {
-                    document.documentElement.lang = primaryLanguage;
-                    document.documentElement.setAttribute("xml:lang", primaryLanguage);
+                    doc.documentElement.lang = primaryLanguage;
+                    doc.documentElement.setAttribute("xml:lang", primaryLanguage);
                 }
             } else if (
-                mediaType === MediaType.HTML && 
-                !document.documentElement.lang
+                mediaType === MediaType.HTML &&
+                !doc.documentElement.lang
             ) {
-                document.documentElement.lang = primaryLanguage;
+                doc.documentElement.lang = primaryLanguage;
             }
         }
 
-        // We need to ensure that dir is set on the root element if rtl
-        // Since body can bubble up, we also need to check it’s not here.
-        // https://github.com/readium/readium-css/blob/develop/docs/CSS03-injection_and_pagination.md#be-cautious-the-direction-propagates
-
-        // TODO: ReadiumCSS stylesheets are injected as LTR/default no matter what so disabled ATM
-        /* if (
-            !document.documentElement.dir &&
-            !document.body.dir && 
-            this.pub.metadata.effectiveReadingProgression === ReadingProgression.rtl
+        // Set dir="rtl" on the root element for RTL publications if the author
+        // has not already declared a direction on html or body.
+        // See: https://github.com/readium/readium-css/blob/develop/docs/CSS03-injection_and_pagination.md#be-cautious-the-direction-propagates
+        // CJK modes must NEVER receive a dir attribute — writing-mode handles
+        // directionality visually, and dir="rtl" would break vertical layout.
+        const scriptMode = getScriptMode(this.pub.metadata);
+        if (scriptMode === "rtl" &&
+            !doc.documentElement.dir &&
+            !doc.body.dir
         ) {
-            document.documentElement.dir = this.pub.metadata.effectiveReadingProgression;
-        } */
+            doc.documentElement.dir = ReadingProgression.rtl;
+        }
 
         if (base !== undefined) {
             // Set all URL bases. Very convenient!
@@ -193,4 +193,4 @@ export default class FrameBlobBuider {
             })
         );
     }
-}
+}

package/src/epub/frame/FrameComms.ts

@@ -6,7 +6,7 @@ import {
     mid,
     CommsEventKey,
 } from "@readium/navigator-html-injectables";
-import { ManagerEventKey } from "../EpubNavigator";
+import { ManagerEventKey } from "../EpubNavigator.ts";
 
 interface RegistryValue {
     time: number;

package/src/epub/frame/FrameManager.ts

@@ -1,8 +1,8 @@
 import { Loader, ModuleName } from "@readium/navigator-html-injectables";
-import { FrameComms } from "./FrameComms";
-import { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
-import { sML } from "../../helpers";
-import type { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator";
+import { FrameComms } from "./FrameComms.ts";
+import type { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
+import { sML } from "../../helpers/index.ts";
+import type { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 
 
 export class FrameManager {
@@ -70,10 +70,10 @@ export class FrameManager {
 
     private applyContentProtection() {
         if (!this.comms) this.comms!.resume();
-        
+
         // Send content protection config
         this.comms!.send("peripherals_protection", this.contentProtectionConfig);
-        
+
         // Send keyboard peripherals separately
         if (this.keyboardPeripheralsConfig && this.keyboardPeripheralsConfig.length > 0) {
             this.comms!.send("keyboard_peripherals", this.keyboardPeripheralsConfig);
@@ -126,7 +126,7 @@ export class FrameManager {
                 this.comms?.send("focus", undefined, () => {
                     // Apply content protection synchronously
                     this.applyContentProtection();
-                    
+
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
                         this.frame.style.removeProperty("aria-hidden");
@@ -152,7 +152,7 @@ export class FrameManager {
 
     setCSSProperties(properties: { [key: string]: string }) {
         if(this.destroyed || !this.frame.contentWindow) return;
-        
+
         // We need to resume and halt postMessage to update the properties
         // if the frame is hidden since it’s been halted in hide()
         if (this.hidden) {
@@ -173,6 +173,10 @@ export class FrameManager {
         return this.frame.getBoundingClientRect();
     }
 
+    get isDestroyed() {
+        return this.destroyed;
+    }
+
     get window() {
         if(this.destroyed || !this.frame.contentWindow) throw Error("Trying to use frame window when it doesn't exist");
         return this.frame.contentWindow;
@@ -193,4 +197,4 @@ export class FrameManager {
     get ldr() {
         return this.loader;
     }
-}
+}

package/src/epub/frame/FramePoolManager.ts

@@ -1,9 +1,9 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
 import { Locator, Publication } from "@readium/shared";
-import FrameBlobBuider from "./FrameBlobBuilder";
-import { FrameManager } from "./FrameManager";
-import { Injector } from "../../injection/Injector";
-import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator";
+import FrameBlobBuider from "./FrameBlobBuilder.ts";
+import { FrameManager } from "./FrameManager.ts";
+import { Injector } from "../../injection/Injector.ts";
+import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 
 const UPPER_BOUNDARY = 5;
 const LOWER_BOUNDARY = 3;
@@ -23,8 +23,8 @@ export class FramePoolManager {
     private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
 
     constructor(
-        container: HTMLElement, 
-        positions: Locator[], 
+        container: HTMLElement,
+        positions: Locator[],
         cssProperties?: { [key: string]: string },
         injector?: Injector | null,
         contentProtectionConfig?: IContentProtectionConfig,
@@ -158,9 +158,9 @@ export class FramePoolManager {
                 if(!itm) return; // TODO throw?
                 if(!this.blobs.has(href)) {
                     const blobBuilder = new FrameBlobBuider(
-                        pub, 
-                        this.currentBaseURL || "", 
-                        itm, 
+                        pub,
+                        this.currentBaseURL || "",
+                        itm,
                         {
                             cssProperties: this.currentCssProperties,
                             injector: this.injector
@@ -208,17 +208,17 @@ export class FramePoolManager {
         const deepCompare = (obj1: { [key: string]: string }, obj2: { [key: string]: string }) => {
             const keys1 = Object.keys(obj1);
             const keys2 = Object.keys(obj2);
-          
+
             if (keys1.length !== keys2.length) {
               return false;
             }
-          
+
             for (const key of keys1) {
               if (obj1[key] !== obj2[key]) {
                 return false;
               }
             }
-          
+
             return true;
         };
 
@@ -270,4 +270,4 @@ export class FramePoolManager {
         });
         return ret as DOMRect;
     }
-}
+}

package/src/epub/frame/index.ts

@@ -1,4 +1,4 @@
-export * from "./FrameBlobBuilder";
-export * from "./FrameComms";
-export * from "./FrameManager";
-export * from "./FramePoolManager";
+export * from "./FrameBlobBuilder.ts";
+export * from "./FrameComms.ts";
+export * from "./FrameManager.ts";
+export * from "./FramePoolManager.ts";

package/src/epub/fxl/FXLCoordinator.ts

@@ -1,4 +1,4 @@
-import { sML } from "../../helpers/sML";
+import { sML } from "../../helpers/sML.ts";
 
 export interface Point {
     X: number;
@@ -108,7 +108,7 @@ export class FXLCoordinator {
         const y2 = Eve.touches[1].screenY - this.outerHeight - subT;
         return { X: (x1 + x2) / 2, Y: (y1 + y2) / 2 };
     }
-    
+
     getBibiEvent(Eve: Event): BibiEvent {
         if(!Eve) return {
             Coord: null,
@@ -149,4 +149,4 @@ export class FXLCoordinator {
             Division: Division
         };
     }
-}
+}

package/src/epub/fxl/FXLFrameManager.ts

@@ -1,9 +1,9 @@
 import { Loader, ModuleName } from "@readium/navigator-html-injectables";
 import { Page, ReadingProgression } from "@readium/shared";
-import { FrameComms } from "../frame/FrameComms";
-import { FXLPeripherals } from "./FXLPeripherals";
-import { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
-import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator";
+import { FrameComms } from "../frame/FrameComms.ts";
+import { FXLPeripherals } from "./FXLPeripherals.ts";
+import type { ReadiumWindow } from "../../../../navigator-html-injectables/types/src/helpers/dom";
+import { IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
 
 export class FXLFrameManager {
     private frame: HTMLIFrameElement;
@@ -22,8 +22,8 @@ export class FXLFrameManager {
     private showPromise: Promise<void> | undefined;
 
     constructor(
-        peripherals: FXLPeripherals, 
-        direction: ReadingProgression, 
+        peripherals: FXLPeripherals,
+        direction: ReadingProgression,
         debugHref: string,
         contentProtectionConfig: IContentProtectionConfig = {},
         keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = []
@@ -212,7 +212,7 @@ export class FXLFrameManager {
 
         // Send content protection config
         this.comms!.send("peripherals_protection", this.contentProtectionConfig);
-        
+
         // Send keyboard peripherals separately
         if (this.keyboardPeripheralsConfig && this.keyboardPeripheralsConfig.length > 0) {
             this.comms!.send("keyboard_peripherals", this.keyboardPeripheralsConfig);
@@ -313,4 +313,4 @@ export class FXLFrameManager {
     get ldr() {
         return this.loader;
     }
-}
+}

package/src/epub/fxl/FXLFramePoolManager.ts

@@ -1,12 +1,12 @@
 import { ModuleName } from "@readium/navigator-html-injectables";
 import { Locator, Publication, ReadingProgression, Page, Link } from "@readium/shared";
-import { FrameCommsListener } from "../frame";
-import FrameBlobBuider from "../frame/FrameBlobBuilder";
-import { FXLFrameManager } from "./FXLFrameManager";
-import { FXLPeripherals } from "./FXLPeripherals";
-import { FXLSpreader, Orientation, Spread } from "./FXLSpreader";
-import { VisualNavigatorViewport, IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator";
-import { Injector } from "../../injection/Injector";
+import { FrameCommsListener } from "../frame/index.ts";
+import FrameBlobBuider from "../frame/FrameBlobBuilder.ts";
+import { FXLFrameManager } from "./FXLFrameManager.ts";
+import { FXLPeripherals } from "./FXLPeripherals.ts";
+import { FXLSpreader, Orientation, Spread } from "./FXLSpreader.ts";
+import { VisualNavigatorViewport, IContentProtectionConfig, IKeyboardPeripheralsConfig } from "../../Navigator.ts";
+import { Injector } from "../../injection/Injector.ts";
 
 const UPPER_BOUNDARY = 8;
 const LOWER_BOUNDARY = 5;
@@ -49,8 +49,8 @@ export class FXLFramePoolManager {
     public readonly peripherals: FXLPeripherals;
 
     constructor(
-        container: HTMLElement, 
-        positions: Locator[], 
+        container: HTMLElement,
+        positions: Locator[],
         pub: Publication,
         injector?: Injector | null,
         contentProtectionConfig?: IContentProtectionConfig,
@@ -134,7 +134,7 @@ export class FXLFramePoolManager {
 
         clearTimeout(this.resizeTimeout);
         this.resizeTimeout = window.setTimeout(() => {
-            // TODO optimize this expensive set of loops and operations 
+            // TODO optimize this expensive set of loops and operations
             this.pool.forEach((frm, linkHref) => {
                 let i = this.pub.readingOrder.items.findIndex(l => l.href === linkHref);
                 const link = this.pub.readingOrder.items[i];
@@ -513,8 +513,8 @@ export class FXLFramePoolManager {
                 if(!itm) return; // TODO throw?
                 if(!this.blobs.has(href)) {
                     const blobBuilder = new FrameBlobBuider(
-                        pub, 
-                        this.currentBaseURL || "", 
+                        pub,
+                        this.currentBaseURL || "",
                         itm,
                         {
                             injector: this.injector
@@ -633,7 +633,11 @@ export class FXLFramePoolManager {
             progressions: new Map(),
             positions: null
         };
-        const currentSpread = this.spreader.currentSpread(this.currentSlide, this.perPage);
+        // Mirror currentFrames: for single-page mode use currentSlide directly,
+        // otherwise use the spreader (which indexes by spread, not by item).
+        const currentSpread = this.perPage < 2
+            ? [this.pub.readingOrder.items[this.currentSlide]]
+            : this.spreader.currentSpread(this.currentSlide, this.perPage);
         currentSpread.forEach(link => {
             viewport.readingOrder.push(link.href);
             viewport.progressions.set(link.href, { start: 0, end: 1 }); // FXL always uses [0,1] progression
@@ -641,7 +645,7 @@ export class FXLFramePoolManager {
 
         // Set positions using currentNumbers
         viewport.positions = this.getCurrentNumbers();
-    
+
         return viewport;
     }
 

package/src/epub/fxl/FXLPeripherals.ts

@@ -1,6 +1,6 @@
-import { FXLCoordinator, Point } from "./FXLCoordinator";
-import { FXLFramePoolManager } from "./FXLFramePoolManager";
-import { FXLPeripheralsDebug } from "./FXLPeripheralsDebug";
+import { FXLCoordinator, Point } from "./FXLCoordinator.ts";
+import { FXLFramePoolManager } from "./FXLFramePoolManager.ts";
+import { FXLPeripheralsDebug } from "./FXLPeripheralsDebug.ts";
 
 const MAX_SCALE = 6; // 6x zoom
 const MIN_SCALE = 1.02;
@@ -584,4 +584,4 @@ export class FXLPeripherals {
         // this.ui.toggle(false);
         this.manager.slideToCurrent(true, true); // slideToNegativeClone || slideToPositiveClone
     }
-}
+}

package/src/epub/fxl/index.ts

@@ -1,5 +1,5 @@
-export * from "./FXLCoordinator";
-export * from "./FXLFrameManager";
-export * from "./FXLFramePoolManager";
-export * from "./FXLPeripherals";
-export * from "./FXLSpreader";
+export * from "./FXLCoordinator.ts";
+export * from "./FXLFrameManager.ts";
+export * from "./FXLFramePoolManager.ts";
+export * from "./FXLPeripherals.ts";
+export * from "./FXLSpreader.ts";

package/src/epub/helpers/scriptMode.ts

@@ -0,0 +1,45 @@
+import { Metadata, ReadingProgression } from "@readium/shared";
+
+export type ScriptMode = 'ltr' | 'rtl' | 'cjk-horizontal' | 'cjk-vertical';
+
+/**
+ * Derives the script mode from publication metadata.
+ *
+ * Rules:
+ * - Only the first language in the array is used. A Latin book containing
+ *   some Japanese is still Latin.
+ * - For CJK (zh/ja/ko): both language AND explicit reading progression are
+ *   required. CJK vertical = explicit rtl + CJK language. CJK horizontal =
+ *   CJK language with ltr or unset progression.
+ * - For RTL (ar/fa/he): language wins. If the primary language is a RTL
+ *   script, RTL mode is applied regardless of the explicit progression
+ *   direction declared in the OPF.
+ */
+export function getScriptMode(metadata: Metadata): ScriptMode {
+    const primaryLang = metadata.languages?.[0]?.toLowerCase();
+    // Use explicit readingProgression only — effectiveReadingProgression
+    // auto-detects from language, which would create circular logic here.
+    const progression = metadata.readingProgression;
+
+    if (primaryLang) {
+        const isCJK = primaryLang.startsWith('zh') ||
+                      primaryLang.startsWith('ja') ||
+                      primaryLang.startsWith('ko');
+        if (isCJK) {
+            // Vertical requires explicit rtl progression. If progression
+            // conflicts (e.g. ltr) we fall back to horizontal.
+            return progression === ReadingProgression.rtl
+                ? 'cjk-vertical'
+                : 'cjk-horizontal';
+        }
+
+        // RTL: language is authoritative. ar/fa/he → rtl regardless of
+        // what the OPF says about page-progression-direction.
+        const isRTLScript = primaryLang.startsWith('ar') ||
+                            primaryLang.startsWith('fa') ||
+                            primaryLang.startsWith('he');
+        if (isRTLScript) return 'rtl';
+    }
+
+    return 'ltr';
+}

package/src/epub/index.ts

@@ -1,5 +1,6 @@
-export * from "./EpubNavigator";
-export * from "./frame";
-export * from "./fxl";
-export * from "./preferences";
-export * from "./css";
+export * from "./EpubNavigator.ts";
+export * from "./frame/index.ts";
+export * from "./fxl/index.ts";
+export * from "./preferences/index.ts";
+export * from "./css/index.ts";
+export { getScriptMode, type ScriptMode } from "./helpers/scriptMode.ts";

package/src/epub/preferences/EpubDefaults.ts

@@ -1,25 +1,25 @@
-import { 
+import {
   ExperimentKey,
-  fontSizeRangeConfig, 
-  fontWeightRangeConfig, 
-  fontWidthRangeConfig, 
+  fontSizeRangeConfig,
+  fontWeightRangeConfig,
+  fontWidthRangeConfig,
   TextAlignment
-} from "../../preferences/Types";
+} from "../../preferences/Types.ts";
 
-import { 
-  ensureBoolean, 
-  ensureEnumValue, 
-  ensureExperiment, 
-  ensureFilter, 
-  ensureLessThanOrEqual, 
-  ensureMoreThanOrEqual, 
-  ensureNonNegative, 
-  ensureString, 
-  ensureValueInRange, 
-  withFallback 
-} from "../../preferences/guards";
+import {
+  ensureBoolean,
+  ensureEnumValue,
+  ensureExperiment,
+  ensureFilter,
+  ensureLessThanOrEqual,
+  ensureMoreThanOrEqual,
+  ensureNonNegative,
+  ensureString,
+  ensureValueInRange,
+  withFallback
+} from "../../preferences/guards.ts";
 
-import { sMLWithRequest } from "../../helpers";
+import { sMLWithRequest } from "../../helpers/index.ts";
 
 export interface IEpubDefaults {
   backgroundColor?: string | null,
@@ -127,11 +127,11 @@ export class EpubDefaults {
     this.hyphens = ensureBoolean(defaults.hyphens) ?? null;
     this.invertFilter = ensureFilter(defaults.invertFilter) ?? false;
     this.invertGaijiFilter = ensureFilter(defaults.invertGaijiFilter) ?? false;
-    this.iOSPatch = defaults.iOSPatch === false 
-        ? false 
+    this.iOSPatch = defaults.iOSPatch === false
+        ? false
         : ((sMLWithRequest.OS.iOS || sMLWithRequest.OS.iPadOS) && sMLWithRequest.iOSRequest === "mobile");
-    this.iPadOSPatch = defaults.iPadOSPatch === false 
-        ? false 
+    this.iPadOSPatch = defaults.iPadOSPatch === false
+        ? false
         : (sMLWithRequest.OS.iPadOS && sMLWithRequest.iOSRequest === "desktop");
     this.letterSpacing = ensureNonNegative(defaults.letterSpacing) || null;
     this.ligatures = ensureBoolean(defaults.ligatures) ?? null;
@@ -160,4 +160,4 @@ export class EpubDefaults {
 
     this.experiments = ensureExperiment(defaults.experiments) || null;
   }
-}
+}

package/src/epub/preferences/EpubPreferences.ts

@@ -1,20 +1,20 @@
-import { ConfigurablePreferences } from "../../preferences/Configurable";
+import { ConfigurablePreferences } from "../../preferences/Configurable.ts";
 
-import { 
-  TextAlignment, 
-  fontSizeRangeConfig, 
-  fontWeightRangeConfig, 
-  fontWidthRangeConfig 
-} from "../../preferences/Types";
+import {
+  TextAlignment,
+  fontSizeRangeConfig,
+  fontWeightRangeConfig,
+  fontWidthRangeConfig
+} from "../../preferences/Types.ts";
 
-import { 
-  ensureBoolean, 
-  ensureEnumValue, 
-  ensureFilter, 
-  ensureNonNegative, 
-  ensureString, 
-  ensureValueInRange 
-} from "../../preferences/guards";
+import {
+  ensureBoolean,
+  ensureEnumValue,
+  ensureFilter,
+  ensureNonNegative,
+  ensureString,
+  ensureValueInRange
+} from "../../preferences/guards.ts";
 
 export interface IEpubPreferences {
   backgroundColor?: string | null,
@@ -181,4 +181,4 @@ export class EpubPreferences implements ConfigurablePreferences<EpubPreferences>
     }
     return new EpubPreferences(merged);
   }
-}
+}