@readium/navigator-html-injectables 2.3.1-alpha.2 → 2.4.0-beta.1

package/src/modules/snapper/ColumnSnapper.ts

@@ -1,14 +1,13 @@
-import { Comms } from "../../comms";
-import { Snapper } from "./Snapper";
-import { getColumnCountPerScreen, isRTL, appendVirtualColumnIfNeeded } from "../../helpers/document";
-import { easeInOutQuad } from "../../helpers/animation";
-import { ModuleName } from "../ModuleLibrary";
+import { Comms } from "../../comms/index.ts";
+import { Snapper } from "./Snapper.ts";
+import { getColumnCountPerScreen, isRTL, appendVirtualColumnIfNeeded } from "../../helpers/document.ts";
+import { easeInOutQuad } from "../../helpers/animation.ts";
+import { ModuleName } from "../ModuleLibrary.ts";
 import { Locator, LocatorLocations, LocatorText } from "@readium/shared";
-import { rangeFromLocator } from "../../helpers/locator";
-import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom";
-import { PatternAnalyzer } from "../../protection/PatternAnalyzer";
-import { BaseSuspiciousActivityEvent } from "../Peripherals";
-import { isTypedOMSupported } from "../../helpers/css";
+import { rangeFromLocator } from "../../helpers/locator.ts";
+import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom.ts";
+import { PatternAnalyzer } from "../../protection/PatternAnalyzer.ts";
+import { BaseSuspiciousActivityEvent } from "../Peripherals.ts";
 
 const COLUMN_SNAPPER_STYLE_ID = "readium-column-snapper-style";
 
@@ -42,7 +41,9 @@ export class ColumnSnapper extends Snapper {
         // The reason we do this is because when the document is transformed (translate3d),
         // the scrollLeft value is 0 because... reasons. So we have to use the cached value
         // from this.alreadyScrollLeft instead.
-        return (this.doc().scrollLeft > 0) ? this.doc().scrollLeft : this.alreadyScrollLeft;
+        // Note: for RTL, scrollLeft is negative, so we check !== 0, not > 0.
+        const sl = this.doc().scrollLeft;
+        return (sl !== 0) ? sl : this.alreadyScrollLeft;
     }
 
     snapOffset(offset: number) {
@@ -50,13 +51,35 @@ export class ColumnSnapper extends Snapper {
         return value - (value % this.wnd.innerWidth);
     }
 
+    /**
+     * Snap a non-negative normalized offset (distance from document start) to
+     * the nearest page boundary. Works identically regardless of reading direction.
+     */
+    private snapNormOffset(offset: number): number {
+        const value = offset + 1;
+        return value - (value % this.wnd.innerWidth);
+    }
+
+    /**
+     * Normalized scroll position: distance from document start, always in
+     * [0, scrollWidth - innerWidth] regardless of reading direction.
+     * scrollLeft may be negative depending on the browser — Math.abs() normalizes it.
+     */
+    private normScroll(): number {
+        const rtl = isRTL(this.wnd);
+        const raw = this.doc().scrollLeft || this.alreadyScrollLeft;
+        return rtl ? Math.abs(raw) : Math.max(0, this.wnd.scrollX > 0 ? this.wnd.scrollX : raw);
+    }
+
     reportProgress() {
-        // Contrary to ScrollTop, Android slightly adds to scrollX
-        // So we do not need to round it up
-        const scrollX = this.wnd.scrollX;
         const scrollWidth = this.cachedScrollWidth;
-        const progress = Math.max(0, Math.min(1, scrollX / scrollWidth));
-        const viewportEnd = Math.max(0, Math.min(1, (scrollX + this.wnd.innerWidth) / scrollWidth));
+        const viewportWidth = this.wnd.innerWidth;
+        const norm = this.normScroll();
+        const scrollable = Math.max(1, scrollWidth - viewportWidth);
+
+        // progress 0 = document start, 1 = document end — same regardless of direction.
+        const progress = Math.max(0, Math.min(1, norm / scrollable));
+        const viewportEnd = Math.max(0, Math.min(1, (norm + viewportWidth) / scrollWidth));
         this.comms.send("progress", {
             start: progress,
             end: viewportEnd
@@ -70,11 +93,17 @@ export class ColumnSnapper extends Snapper {
         if(this.overscroll !== 0 || this.shakeTimeout !== 0) return;
         const doc = this.doc();
 
-        doc.classList.add((isRTL(this.wnd) ? "readium-bounce-l" : "readium-bounce-r"));
+        // Bounce toward the boundary that was hit.
+        // LTR: end is on the right → bounce-r. RTL: start is on the right (norm≈0),
+        // end is on the left → bounce direction flips based on which boundary we're at.
+        const atStart = this.normScroll() < 5;
+        const bounceClass = isRTL(this.wnd)
+            ? (atStart ? "readium-bounce-r" : "readium-bounce-l")
+            : "readium-bounce-r";
+        doc.classList.add(bounceClass);
         const curScrollLeft = this.scrollOffset();
         this.shakeTimeout = this.wnd.setTimeout(() => {
-            doc.classList.remove("readium-bounce-l");
-            doc.classList.remove("readium-bounce-r");
+            doc.classList.remove(bounceClass);
             this.shakeTimeout = 0;
             this.doc().scrollLeft = curScrollLeft;
         }, 150);
@@ -84,7 +113,7 @@ export class ColumnSnapper extends Snapper {
     private alreadyScrollLeft = 0;
     private overscroll = 0;
     private cachedScrollWidth = 0; // We have to cache this because during overscroll (transform, or left) the width is incorrect due to browser
-    
+
     private takeOverSnap() {
         this.snappingCancelled = true;
         this.clearTouches();
@@ -93,36 +122,40 @@ export class ColumnSnapper extends Snapper {
         // translate3d(XXXpx, 0px, 0px) -> slice 12 -> XXXpx, 0px, 0px) -> split "px" [0] -> XXX
         this.overscroll = doc.style.transform?.length > 12 ? parseFloat(doc.style.transform.slice(12).split("px")[0]) : 0;
     }
-    
+
     // Snaps the current offset to the page width.
     snapCurrentOffset(smooth=false, noprogress=false) {
-        const startX = this.wnd.scrollX > 0 ? this.wnd.scrollX : this.alreadyScrollLeft;
+        const rtl = isRTL(this.wnd);
         const doc = this.doc();
-        const cdo = this.dragOffset();
         const columnCount = getColumnCountPerScreen(this.wnd);
-        const currentOffset = Math.min(Math.max(0, startX), this.cachedScrollWidth);
-        const factor = isRTL(this.wnd) ? -1 : 1;
-        const hurdle =
-            // The hurdle to overcome in order to change pages
-            factor *
-            (this.wnd.innerWidth / 3) *
-            ((factor * cdo) > 0 ? 2 : 1);
-
-        const so = this.snapOffset(currentOffset + hurdle);
-        
-        const direction = so > this.scrollOffset() ? "right" : "left";
-
-        this.checkSuspiciousSnap(direction, Math.abs(so - this.scrollOffset()));
-        
-        if(smooth && so !== this.scrollOffset()) { // Smooth snapping
+        const maxScroll = this.cachedScrollWidth - this.wnd.innerWidth;
+
+        // Work in normalized (non-negative, distance-from-start) coordinates
+        // so all arithmetic is direction-agnostic.
+        const currentNorm = Math.min(Math.max(0, this.normScroll()), maxScroll);
+
+        // Forward drag: LTR = drag left (cdo > 0), RTL = drag right (cdo < 0).
+        // Normalize so that positive = moving forward in reading order.
+        const cdo = this.dragOffset();
+        const normalizedCdo = rtl ? -cdo : cdo;
+        const hurdle = (this.wnd.innerWidth / 3) * (normalizedCdo > 0 ? 2 : 1);
+
+        const snappedNorm = Math.min(maxScroll, Math.max(0, this.snapNormOffset(currentNorm + hurdle)));
+
+        // Convert back to signed scrollLeft for the actual DOM write.
+        const so = rtl ? -snappedNorm : snappedNorm;
+        const currentScrollLeft = rtl ? -currentNorm : currentNorm;
+
+        const direction = so > currentScrollLeft ? "right" : "left";
+        this.checkSuspiciousSnap(direction, Math.abs(so - currentScrollLeft));
+
+        if(smooth && so !== currentScrollLeft) { // Smooth snapping
             this.snappingCancelled = false;
             const position = (start: number, end: number, elapsed: number, period: number) => {
-                if (elapsed > period) {
-                    return end;
-                }
+                if (elapsed > period) return end;
                 return start + (end - start) * easeInOutQuad(elapsed / period);
-            }
-            const period = /*Math.abs(startX - (this.useTransform ? currentOffset : 0)) < 10 ? 1 : */SNAP_DURATION * columnCount; // TODO revamp
+            };
+            const period = SNAP_DURATION * columnCount;
             let startTime: number;
             const step = (timestamp: number) => {
                 if(this.snappingCancelled) return;
@@ -131,16 +164,10 @@ export class ColumnSnapper extends Snapper {
                 const elapsed = timestamp - startTime;
 
                 const lpos = position(this.overscroll, 0, elapsed, period);
-                const spos = position(startX, so, elapsed, period);
+                const spos = position(currentScrollLeft, so, elapsed, period);
                 doc.scrollLeft = spos;
                 if(this.overscroll !== 0)
-                    if(isTypedOMSupported()) {
-                        doc.attributeStyleMap.set("transform", new CSSTransformValue([
-                            new CSSTranslate(CSS.px(-lpos), CSS.px(0), CSS.px(0))
-                        ]));
-                    } else {
-                        doc.style.transform = `translate3d(${-lpos}px, 0px, 0px)`;
-                    }
+                    doc.style.transform = `translate3d(${-lpos}px, 0px, 0px)`;
 
                 if (elapsed < period)
                     this.wnd.requestAnimationFrame(step);
@@ -150,7 +177,7 @@ export class ColumnSnapper extends Snapper {
                     doc.scrollLeft = so;
                     if(!noprogress) this.reportProgress();
                 }
-            }
+            };
             this.wnd.requestAnimationFrame(step);
         } else { // Instant snapping
             doc.style.removeProperty("transform");
@@ -200,18 +227,25 @@ export class ColumnSnapper extends Snapper {
         if(this.touchState === ScrollTouchState.MOVE) {
             // Get the horizontal drag distance
             const dragOffset = this.dragOffset();
-            const scrollOffset = this.scrollOffset();
-            // this.cachedScrollWidth = this.doc().scrollWidth!;
+            const rtl = isRTL(this.wnd);
+
+            // Normalize: distance from document start, forward drag is positive.
+            const norm = this.normScroll();
+            const maxScroll = this.cachedScrollWidth - this.wnd.innerWidth;
+            const normalizedDrag = rtl ? -dragOffset : dragOffset;
+
             if(this.cachedScrollWidth <= this.wnd.innerWidth) {
                 // Only a single page, meaning any swipe triggers next/prev
                 this.reportProgress();
-                if(dragOffset > 5) this.comms.send("no_more", undefined);
-                if(dragOffset < -5) this.comms.send("no_less", undefined);
-            } else if(scrollOffset < 5 && dragOffset < 5) {
+                if(normalizedDrag > 5) this.comms.send("no_more", undefined);
+                if(normalizedDrag < -5) this.comms.send("no_less", undefined);
+            } else if(norm < 5 && normalizedDrag < 5) {
+                // At document start, tried to go backward
                 this.alreadyScrollLeft = 0;
                 this.comms.send("no_less", undefined);
-            } else if((this.cachedScrollWidth - scrollOffset - this.wnd.innerWidth) < 5 && dragOffset > 5) {
-                this.alreadyScrollLeft = this.cachedScrollWidth;
+            } else if((maxScroll - norm) < 5 && normalizedDrag > 5) {
+                // At document end, tried to go forward
+                this.alreadyScrollLeft = rtl ? -maxScroll : maxScroll;
                 this.comms.send("no_more", undefined);
             }
 
@@ -242,28 +276,22 @@ export class ColumnSnapper extends Snapper {
 
         const dro = this.dragOffset();
         const newpos = this.alreadyScrollLeft + dro;
-        if(newpos < 0) {
+
+        // For RTL, scrollLeft is in [-(scrollWidth - innerWidth), 0].
+        // For LTR, scrollLeft is in [0, scrollWidth - innerWidth].
+        const minScrollLeft = isRTL(this.wnd) ? -(this.cachedScrollWidth - this.wnd.innerWidth) : 0;
+        const maxScrollLeft = isRTL(this.wnd) ? 0 : (this.cachedScrollWidth - this.wnd.innerWidth);
+
+        if(newpos < minScrollLeft) {
             this.overscroll = newpos;
-            if(isTypedOMSupported()) {
-                this.doc().attributeStyleMap.set("transform", new CSSTransformValue([
-                    new CSSTranslate(CSS.px(-newpos), CSS.px(0), CSS.px(0))
-                ]));
-            } else {
-                this.doc().style.transform = `translate3d(${-newpos}px, 0px, 0px)`;
-            }
-        } else if((newpos + this.wnd.innerWidth) > this.cachedScrollWidth) {
+            this.doc().style.transform = `translate3d(${-this.overscroll}px, 0px, 0px)`;
+        } else if(newpos > maxScrollLeft) {
             this.overscroll = newpos;
-            if(isTypedOMSupported()) {
-                this.doc().attributeStyleMap.set("transform", new CSSTransformValue([
-                    new CSSTranslate(CSS.px(-newpos), CSS.px(0), CSS.px(0))
-                ]));
-            } else {
-                this.doc().style.transform = `translate3d(${-newpos}px, 0px, 0px)`;
-            }
+            this.doc().style.transform = `translate3d(${-newpos}px, 0px, 0px)`;
         } else {
             this.overscroll = 0;
             this.doc().style.removeProperty("transform");
-            this.doc().scrollLeft = this.alreadyScrollLeft + dro;
+            this.doc().scrollLeft = newpos;
         }
     }
     private readonly onTouchMover = this.onTouchMove.bind(this);
@@ -340,7 +368,7 @@ export class ColumnSnapper extends Snapper {
         * {
             scrollbar-width: none; /* for Firefox */
         }
-        
+
         body::-webkit-scrollbar {
             display: none; /* for Chrome, Safari, and Opera */
         }
@@ -365,7 +393,7 @@ export class ColumnSnapper extends Snapper {
                     const oldValueTransform = oldValue?.match(transformRegex);
                     const newValueTransform = newValue?.match(transformRegex);
                     if (
-                        (!oldValueTransform && !newValueTransform) || 
+                        (!oldValueTransform && !newValueTransform) ||
                         (oldValueTransform && !newValueTransform) ||
                         (oldValueTransform && newValueTransform && oldValueTransform[1] !== newValueTransform[1])
                     ) {
@@ -384,16 +412,25 @@ export class ColumnSnapper extends Snapper {
         // For cases the resizeObserver is not able to detect cos body is not resizing despite colCount,
         // we need to check the syle attribute on the documentElement (ReadiumCSS props)
         this.mutationObserver.observe(wnd.document.documentElement, {attributes: true, attributeFilter: ["style"]});
-        
+
         comms.register("scroll_protection", ColumnSnapper.moduleName, (_, ack) => {
             this.enableSnapProtection();
             ack(true);
         });
 
+        // LTR only — snapOffset only works with non-negative values.
         const scrollToOffset = (offset: number): boolean => {
             const oldScrollLeft = this.doc().scrollLeft;
-            this.doc().scrollLeft = this.snapOffset(offset); // TODO assert if never undefined (same for rest of !)
+            this.doc().scrollLeft = this.snapOffset(offset);
+            return oldScrollLeft !== this.doc().scrollLeft;
+        }
 
+        // RTL: offset is normalized (non-negative, 0 = start, scrollable = end).
+        // Snaps to page boundary and sets scrollLeft = -snappedNorm.
+        const rtlScrollToNorm = (norm: number): boolean => {
+            const oldScrollLeft = this.doc().scrollLeft;
+            const snapped = this.snapNormOffset(Math.max(0, Math.min(this.cachedScrollWidth - wnd.innerWidth, norm)));
+            this.doc().scrollLeft = -snapped;
             return oldScrollLeft !== this.doc().scrollLeft;
         }
 
@@ -412,10 +449,13 @@ export class ColumnSnapper extends Snapper {
             }
             this.wnd.requestAnimationFrame(() => {
                 this.cachedScrollWidth = this.doc().scrollWidth!;
-                const documentWidth = this.cachedScrollWidth;
-                const factor = isRTL(wnd) ? -1 : 1;
-                const offset = documentWidth * position * factor;
-                this.doc().scrollLeft = this.snapOffset(offset);
+                const scrollable = this.cachedScrollWidth - wnd.innerWidth;
+                const norm = scrollable * position;
+                if (isRTL(wnd)) {
+                    this.doc().scrollLeft = -this.snapNormOffset(norm);
+                } else {
+                    this.doc().scrollLeft = this.snapOffset(norm);
+                }
                 this.reportProgress();
                 deselect(this.wnd);
                 ack(true);
@@ -429,7 +469,11 @@ export class ColumnSnapper extends Snapper {
                 return;
             }
             this.wnd.requestAnimationFrame(() => {
-                this.doc().scrollLeft = this.snapOffset(element.getBoundingClientRect().left + wnd.scrollX);
+                if (isRTL(wnd)) {
+                    this.doc().scrollLeft = -this.snapNormOffset(element.getBoundingClientRect().left + wnd.scrollX);
+                } else {
+                    this.doc().scrollLeft = this.snapOffset(element.getBoundingClientRect().left + wnd.scrollX);
+                }
                 this.reportProgress();
                 deselect(this.wnd);
                 ack(true);
@@ -460,7 +504,11 @@ export class ColumnSnapper extends Snapper {
                 return;
             }
             this.wnd.requestAnimationFrame(() => {
-                this.doc().scrollLeft = this.snapOffset(r.getBoundingClientRect().left + wnd.scrollX);
+                if (isRTL(wnd)) {
+                    this.doc().scrollLeft = -this.snapNormOffset(r.getBoundingClientRect().left + wnd.scrollX);
+                } else {
+                    this.doc().scrollLeft = this.snapOffset(r.getBoundingClientRect().left + wnd.scrollX);
+                }
                 this.reportProgress();
                 deselect(this.wnd);
                 ack(true);
@@ -468,12 +516,18 @@ export class ColumnSnapper extends Snapper {
         });
 
         comms.register("go_end", ColumnSnapper.moduleName, (_, ack) => {
-            const factor = isRTL(wnd) ? -1 : 1;
             this.wnd.requestAnimationFrame(() => {
                 this.cachedScrollWidth = this.doc().scrollWidth!;
-                const final = this.cachedScrollWidth * factor;
-                if(this.doc().scrollLeft === final) return ack(false);
-                this.doc().scrollLeft = this.snapOffset(final);
+                let snappedFinal: number;
+                if (isRTL(wnd)) {
+                    // RTL: end is the leftmost position, using normalized snapping first
+                    snappedFinal = -this.snapNormOffset(this.cachedScrollWidth - wnd.innerWidth);
+                } else {
+                    // LTR: end is scrollWidth (browser clamps to scrollWidth - innerWidth)
+                    snappedFinal = this.snapOffset(this.cachedScrollWidth);
+                }
+                if(this.doc().scrollLeft === snappedFinal) return ack(false);
+                this.doc().scrollLeft = snappedFinal;
                 this.reportProgress();
                 deselect(this.wnd);
                 ack(true);
@@ -493,11 +547,15 @@ export class ColumnSnapper extends Snapper {
         comms.register("go_prev", ColumnSnapper.moduleName, (_, ack) => {
             this.wnd.requestAnimationFrame(() => {
                 this.cachedScrollWidth = this.doc().scrollWidth!;
-                const offset = wnd.scrollX - wnd.innerWidth;
-                const minOffset = isRTL(wnd) ? - (this.cachedScrollWidth - wnd.innerWidth) : 0;
-                const change = scrollToOffset(Math.max(offset, minOffset));
+                let change: boolean;
+                if (isRTL(wnd)) {
+                    // RTL: go_prev = toward document start = decreasing norm = scrollLeft toward 0
+                    change = rtlScrollToNorm(this.normScroll() - wnd.innerWidth);
+                } else {
+                    change = scrollToOffset(wnd.scrollX - wnd.innerWidth);
+                }
+                this.reportProgress();
                 if(change) {
-                    this.reportProgress();
                     deselect(this.wnd);
                     this.checkSuspiciousSnap("left", this.wnd.innerWidth);
                 }
@@ -508,11 +566,15 @@ export class ColumnSnapper extends Snapper {
         comms.register("go_next", ColumnSnapper.moduleName, (_, ack) => {
             this.wnd.requestAnimationFrame(() => {
                 this.cachedScrollWidth = this.doc().scrollWidth!;
-                const offset = wnd.scrollX + wnd.innerWidth;
-                const maxOffset = isRTL(wnd) ? 0 : this.cachedScrollWidth - wnd.innerWidth;
-                const change = scrollToOffset(Math.min(offset, maxOffset));
+                let change: boolean;
+                if (isRTL(wnd)) {
+                    // RTL: go_next = toward document end = increasing norm = scrollLeft more negative
+                    change = rtlScrollToNorm(this.normScroll() + wnd.innerWidth);
+                } else {
+                    change = scrollToOffset(wnd.scrollX + wnd.innerWidth);
+                }
+                this.reportProgress();
                 if(change) {
-                    this.reportProgress();
                     deselect(this.wnd);
                     this.checkSuspiciousSnap("right", this.wnd.innerWidth);
                 }
@@ -582,4 +644,4 @@ export class ColumnSnapper extends Snapper {
         comms.log("ColumnSnapper Unmounted");
         return super.unmount(wnd, comms);
     }
-}
+}

package/src/modules/snapper/ScrollSnapper.ts

@@ -1,13 +1,13 @@
 import { Locator, LocatorLocations, LocatorText } from "@readium/shared";
-import { Comms } from "../../comms";
-import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom";
-import { ModuleName } from "../ModuleLibrary";
-import { Snapper } from "./Snapper";
-import { rangeFromLocator } from "../../helpers/locator";
-import { forceWebkitRecalc } from "../../helpers/document";
-import { PatternAnalyzer } from "../../protection/PatternAnalyzer";
-import { SCROLL_PROTECTION_CONFIG } from "../../protection/config";
-import { BaseSuspiciousActivityEvent } from "../Peripherals";
+import { Comms } from "../../comms/index.ts";
+import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom.ts";
+import { ModuleName } from "../ModuleLibrary.ts";
+import { Snapper } from "./Snapper.ts";
+import { rangeFromLocator } from "../../helpers/locator.ts";
+import { forceWebkitRecalc } from "../../helpers/document.ts";
+import { PatternAnalyzer } from "../../protection/PatternAnalyzer.ts";
+import { SCROLL_PROTECTION_CONFIG } from "../../protection/config.ts";
+import { BaseSuspiciousActivityEvent } from "../Peripherals.ts";
 
 const SCROLL_SNAPPER_STYLE_ID = "readium-scroll-snapper-style";
 
@@ -56,7 +56,7 @@ export class ScrollSnapper extends Snapper {
 
     private handleScroll = (_e: Event) => {
         if (!this.comms.ready) return;
-        
+
         // We have to filter scroll from resize events
         if (this.isResizing) {
             return;
@@ -91,9 +91,9 @@ export class ScrollSnapper extends Snapper {
                             timeDelta
                         );
                         if (isSuspicious) {
-                            const target = _e.target && "tagName" in _e.target ? 
+                            const target = _e.target && "tagName" in _e.target ?
                                 { tagName: (_e.target as Element).tagName } : null;
-                                
+
                             this.comms?.send("content_protection", {
                                 type: "suspicious_scrolling",
                                 timestamp: Date.now(),
@@ -107,7 +107,7 @@ export class ScrollSnapper extends Snapper {
                 }
 
                 this.comms.send("scroll", deltaY);
-            
+
                 this.isScrolling = false;
             });
         }
@@ -143,7 +143,7 @@ export class ScrollSnapper extends Snapper {
         * {
             scrollbar-width: none; /* for Firefox */
         }
-        
+
         body::-webkit-scrollbar {
             display: none; /* for Chrome, Safari, and Opera */
         }
@@ -157,7 +157,7 @@ export class ScrollSnapper extends Snapper {
             if (this.resizeDebounce) {
                 this.wnd.clearTimeout(this.resizeDebounce);
             }
-            
+
             this.isResizing = true;
             this.resizeDebounce = this.wnd.setTimeout(() => {
                 this.isResizing = false;
@@ -173,8 +173,8 @@ export class ScrollSnapper extends Snapper {
             forceWebkitRecalc(this.wnd);
 
             // We absolutely must do this because overflown content
-            // won’t be rendered if we do not trigger scroll… 
-            // Only the content at the start of the document, 
+            // won’t be rendered if we do not trigger scroll…
+            // Only the content at the start of the document,
             // whose height is the viewport height, will be rendered.
             const currentScroll = this.doc().scrollTop;
             if (currentScroll > 1) {
@@ -308,4 +308,4 @@ export class ScrollSnapper extends Snapper {
         comms.log("ScrollSnapper Unmounted");
         return true;
     }
-}
+}

package/src/modules/snapper/Snapper.ts

@@ -1,7 +1,7 @@
-import { Comms } from "../../comms";
-import { ReadiumWindow } from "../../helpers/dom";
-import { Module } from "../Module";
-import { ModuleName } from "../ModuleLibrary";
+import { Comms } from "../../comms/index.ts";
+import { ReadiumWindow } from "../../helpers/dom.ts";
+import { Module } from "../Module.ts";
+import { ModuleName } from "../ModuleLibrary.ts";
 
 const SNAPPER_STYLE_ID = "readium-snapper-style";
 
@@ -46,4 +46,4 @@ export abstract class Snapper extends Module {
         comms.log("Snapper Unmounted");
         return true;
     }
-}
+}

package/src/modules/snapper/WebPubSnapper.ts

@@ -1,13 +1,13 @@
 import { Locator, LocatorLocations, LocatorText } from "@readium/shared";
-import { Comms } from "../../comms/comms";
-import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom";
-import { ModuleName } from "../ModuleLibrary";
-import { Snapper } from "./Snapper";
-import { rangeFromLocator } from "../../helpers/locator";
-import { forceWebkitRecalc } from "../../helpers/document";
-import { PatternAnalyzer } from "../../protection/PatternAnalyzer";
-import { SCROLL_PROTECTION_CONFIG } from "../../protection/config";
-import { SuspiciousScrollingEvent } from "./ScrollSnapper";
+import { Comms } from "../../comms/comms.ts";
+import { ReadiumWindow, deselect, findFirstVisibleLocator } from "../../helpers/dom.ts";
+import { ModuleName } from "../ModuleLibrary.ts";
+import { Snapper } from "./Snapper.ts";
+import { rangeFromLocator } from "../../helpers/locator.ts";
+import { forceWebkitRecalc } from "../../helpers/document.ts";
+import { PatternAnalyzer } from "../../protection/PatternAnalyzer.ts";
+import { SCROLL_PROTECTION_CONFIG } from "../../protection/config.ts";
+import { SuspiciousScrollingEvent } from "./ScrollSnapper.ts";
 
 export type { SuspiciousScrollingEvent };
 
@@ -82,9 +82,9 @@ export class WebPubSnapper extends Snapper {
                             timeDelta
                         );
                         if (isSuspicious) {
-                            const target = _e.target && "tagName" in _e.target ? 
+                            const target = _e.target && "tagName" in _e.target ?
                                 { tagName: (_e.target as Element).tagName } : null;
-                                
+
                             this.comms?.send("content_protection", {
                                 type: "suspicious_scrolling",
                                 timestamp: Date.now(),
@@ -145,8 +145,8 @@ export class WebPubSnapper extends Snapper {
             forceWebkitRecalc(this.wnd);
 
             // We absolutely must do this because overflown content
-            // won’t be rendered if we do not trigger scroll… 
-            // Only the content at the start of the document, 
+            // won’t be rendered if we do not trigger scroll…
+            // Only the content at the start of the document,
             // whose height is the viewport height, will be rendered.
             const currentScroll = this.doc().scrollTop;
             if (currentScroll > 1) {
@@ -267,7 +267,7 @@ export class WebPubSnapper extends Snapper {
         comms.unregisterAll(WebPubSnapper.moduleName);
         this.resizeObserver.disconnect();
         if (this.handleScroll) wnd.removeEventListener("scroll", this.handleScroll);
-        
+
         if (this.patternAnalyzer) {
             this.patternAnalyzer.clear();
             this.patternAnalyzer = null;
@@ -277,4 +277,4 @@ export class WebPubSnapper extends Snapper {
         comms.log("WebPubSnapper Unmounted");
         return true;
     }
-}
+}