@d-i-t-a/reader 3.0.0-alpha.8 → 3.0.0-alpha.9

package/dist/esm/index.js

@@ -29944,24 +29944,6 @@ var require_jscrypto = __commonJS({
   }
 });
 
-// src/utils/HTMLTemplates.ts
-var readerLoading, readerError;
-var init_HTMLTemplates = __esm({
-  "src/utils/HTMLTemplates.ts"() {
-    init_polyfills();
-    init_IconLib();
-    readerLoading = `${icons.loading}`;
-    readerError = `
-    <span>
-    ${icons.error}
-    </span>
-    <span>There was an error loading this page.</span>
-    <button class="go-back">Go back</button>
-    <button class="try-again">Try again</button>
-`;
-  }
-});
-
 // node_modules/eventemitter3/index.js
 var require_eventemitter3 = __commonJS({
   "node_modules/eventemitter3/index.js"(exports, module) {
@@ -30135,6 +30117,264 @@ var init_eventemitter3 = __esm({
   }
 });
 
+// src/navigator/VisualNavigator.ts
+var NavigatorFeature, VisualNavigator;
+var init_VisualNavigator = __esm({
+  "src/navigator/VisualNavigator.ts"() {
+    init_polyfills();
+    init_eventemitter3();
+    NavigatorFeature = {
+      TTS: "tts",
+      MediaOverlays: "mediaOverlays",
+      Search: "search",
+      Annotations: "annotations",
+      Bookmarks: "bookmarks",
+      Zoom: "zoom",
+      LineFocus: "lineFocus",
+      Definitions: "definitions",
+      Citations: "citations",
+      ContentProtection: "contentProtection",
+      Consumption: "consumption",
+      History: "history",
+      Timeline: "timeline"
+    };
+    VisualNavigator = class extends eventemitter3_default {
+      // ── Capability query ──────────────────────────────────────────
+      /**
+       * Check if this navigator supports a given feature.
+       * Replaces instanceof checks in D2Reader.
+       */
+      supports(_feature) {
+        return false;
+      }
+      // ── Default no-ops for optional features ──────────────────────
+      // Subclasses override what they support. D2Reader calls these
+      // without instanceof checks — if the navigator doesn't support
+      // the feature, the no-op runs silently.
+      startReadAloud() {
+      }
+      stopReadAloud() {
+      }
+      pauseReadAloud() {
+      }
+      resumeReadAloud() {
+      }
+      startReadAlong() {
+      }
+      stopReadAlong() {
+      }
+      pauseReadAlong() {
+      }
+      resumeReadAlong() {
+      }
+      hideLayer(_layer) {
+      }
+      showLayer(_layer) {
+      }
+      activateMarker(_id, _position) {
+      }
+      deactivateMarker() {
+      }
+      snapToSelector(_selector) {
+      }
+      applyAttributes(_value) {
+      }
+      mostRecentNavigatedTocItem() {
+        return void 0;
+      }
+      // ── RTL-aware navigation ──────────────────────────────────────
+      /**
+       * Navigate left — respects reading progression direction.
+       * In LTR: goes to previous page. In RTL: goes to next page.
+       */
+      goLeft() {
+        const rtl = this.publication.metadata?.readingProgression === "rtl" || this.publication.metadata?.otherMetadata?.["rendition:spread-direction"] === "rtl";
+        if (rtl) {
+          this.nextPage();
+        } else {
+          this.previousPage();
+        }
+      }
+      /**
+       * Navigate right — respects reading progression direction.
+       * In LTR: goes to next page. In RTL: goes to previous page.
+       */
+      goRight() {
+        const rtl = this.publication.metadata?.readingProgression === "rtl" || this.publication.metadata?.otherMetadata?.["rendition:spread-direction"] === "rtl";
+        if (rtl) {
+          this.previousPage();
+        } else {
+          this.nextPage();
+        }
+      }
+      // ── Zoom (for FXL and PDF) ────────────────────────────────────
+      // Default no-ops. PDFNavigator and EpubNavigator (FXL) override.
+      fitToPage() {
+      }
+      fitToWidth() {
+      }
+      zoomIn() {
+      }
+      zoomOut() {
+      }
+      activateHand() {
+      }
+      deactivateHand() {
+      }
+    };
+  }
+});
+
+// src/utils/HTMLTemplates.ts
+var readerLoading, readerError;
+var init_HTMLTemplates = __esm({
+  "src/utils/HTMLTemplates.ts"() {
+    init_polyfills();
+    init_IconLib();
+    readerLoading = `${icons.loading}`;
+    readerError = `
+    <span>
+    ${icons.error}
+    </span>
+    <span>There was an error loading this page.</span>
+    <button class="go-back">Go back</button>
+    <button class="try-again">Try again</button>
+`;
+  }
+});
+
+// src/utils/GrabToPan.ts
+var CSS_CLASS_GRAB, GrabToPan;
+var init_GrabToPan = __esm({
+  "src/utils/GrabToPan.ts"() {
+    init_polyfills();
+    CSS_CLASS_GRAB = "grab-to-pan-grab";
+    GrabToPan = class {
+      /**
+       * Construct a GrabToPan instance for a given HTML element.
+       * @param {Element} options.element
+       * @param {function} [options.ignoreTarget] - See `ignoreTarget(node)`.
+       * @param {function(boolean)} [options.onActiveChanged] - Called when
+       *   grab-to-pan is (de)activated. The first argument is a boolean that
+       *   shows whether grab-to-pan is activated.
+       */
+      constructor(options) {
+        this.element = options.element;
+        this.document = options.element.ownerDocument;
+        if (typeof options.ignoreTarget === "function") {
+          this.ignoreTarget = options.ignoreTarget;
+        }
+        this.onActiveChanged = options.onActiveChanged;
+        this.activate = this.activate.bind(this);
+        this.deactivate = this.deactivate.bind(this);
+        this.toggle = this.toggle.bind(this);
+        this._onMouseDown = this.#onMouseDown.bind(this);
+        this._onMouseMove = this.#onMouseMove.bind(this);
+        this._endPan = this.#endPan.bind(this);
+        const overlay = this.overlay = document.createElement("div");
+        overlay.className = "grab-to-pan-grabbing";
+      }
+      /**
+       * Bind a mousedown event to the element to enable grab-detection.
+       */
+      activate() {
+        if (!this.active) {
+          this.active = true;
+          this.element.addEventListener("mousedown", this._onMouseDown, true);
+          this.element.classList.add(CSS_CLASS_GRAB);
+          this.onActiveChanged?.(true);
+        }
+      }
+      /**
+       * Removes all events. Any pending pan session is immediately stopped.
+       */
+      deactivate() {
+        if (this.active) {
+          this.active = false;
+          this.element.removeEventListener("mousedown", this._onMouseDown, true);
+          this._endPan();
+          this.element.classList.remove(CSS_CLASS_GRAB);
+          this.onActiveChanged?.(false);
+        }
+      }
+      toggle() {
+        if (this.active) {
+          this.deactivate();
+        } else {
+          this.activate();
+        }
+      }
+      /**
+       * Whether to not pan if the target element is clicked.
+       * Override this method to change the default behaviour.
+       *
+       * @param {Element} node - The target of the event.
+       * @returns {boolean} Whether to not react to the click event.
+       */
+      ignoreTarget(node) {
+        return node.matches(
+          "a[href], a[href] *, input, textarea, button, button *, select, option"
+        );
+      }
+      #onMouseDown(event) {
+        if (event.button !== 0 || this.ignoreTarget(event.target)) {
+          return;
+        }
+        if (event.originalTarget) {
+          try {
+            event.originalTarget.tagName;
+          } catch (e7) {
+            return;
+          }
+        }
+        this.scrollLeftStart = this.element.scrollLeft;
+        this.scrollTopStart = this.element.scrollTop;
+        this.clientXStart = event.clientX;
+        this.clientYStart = event.clientY;
+        this.document.addEventListener("mousemove", this._onMouseMove, true);
+        this.document.addEventListener("mouseup", this._endPan, true);
+        this.element.addEventListener("scroll", this._endPan, true);
+        event.preventDefault();
+        event.stopPropagation();
+        const focusedElement = document.activeElement;
+        if (focusedElement && !focusedElement.contains(event.target)) {
+          focusedElement.blur();
+        }
+      }
+      #onMouseMove(event) {
+        this.element.removeEventListener("scroll", this._endPan, true);
+        if (!(event.buttons & 1)) {
+          this._endPan();
+          return;
+        }
+        const xDiff = event.clientX - this.clientXStart;
+        const yDiff = event.clientY - this.clientYStart;
+        const scrollTop = this.scrollTopStart - yDiff;
+        const scrollLeft = this.scrollLeftStart - xDiff;
+        if (this.element.scrollTo) {
+          this.element.scrollTo({
+            top: scrollTop,
+            left: scrollLeft,
+            behavior: "instant"
+          });
+        } else {
+          this.element.scrollTop = scrollTop;
+          this.element.scrollLeft = scrollLeft;
+        }
+        if (!this.overlay.parentNode) {
+          document.body.append(this.overlay);
+        }
+      }
+      #endPan() {
+        this.element.removeEventListener("scroll", this._endPan, true);
+        this.document.removeEventListener("mousemove", this._onMouseMove, true);
+        this.document.removeEventListener("mouseup", this._endPan, true);
+        this.overlay.remove();
+      }
+    };
+  }
+});
+
 // node_modules/pdfjs-dist/build/pdf.mjs
 function setVerbosityLevel(level) {
   if (Number.isInteger(level)) {
@@ -65271,138 +65511,6 @@ var init_pdf_viewer = __esm({
   }
 });
 
-// src/utils/GrabToPan.ts
-var CSS_CLASS_GRAB, GrabToPan;
-var init_GrabToPan = __esm({
-  "src/utils/GrabToPan.ts"() {
-    init_polyfills();
-    CSS_CLASS_GRAB = "grab-to-pan-grab";
-    GrabToPan = class {
-      /**
-       * Construct a GrabToPan instance for a given HTML element.
-       * @param {Element} options.element
-       * @param {function} [options.ignoreTarget] - See `ignoreTarget(node)`.
-       * @param {function(boolean)} [options.onActiveChanged] - Called when
-       *   grab-to-pan is (de)activated. The first argument is a boolean that
-       *   shows whether grab-to-pan is activated.
-       */
-      constructor(options) {
-        this.element = options.element;
-        this.document = options.element.ownerDocument;
-        if (typeof options.ignoreTarget === "function") {
-          this.ignoreTarget = options.ignoreTarget;
-        }
-        this.onActiveChanged = options.onActiveChanged;
-        this.activate = this.activate.bind(this);
-        this.deactivate = this.deactivate.bind(this);
-        this.toggle = this.toggle.bind(this);
-        this._onMouseDown = this.#onMouseDown.bind(this);
-        this._onMouseMove = this.#onMouseMove.bind(this);
-        this._endPan = this.#endPan.bind(this);
-        const overlay = this.overlay = document.createElement("div");
-        overlay.className = "grab-to-pan-grabbing";
-      }
-      /**
-       * Bind a mousedown event to the element to enable grab-detection.
-       */
-      activate() {
-        if (!this.active) {
-          this.active = true;
-          this.element.addEventListener("mousedown", this._onMouseDown, true);
-          this.element.classList.add(CSS_CLASS_GRAB);
-          this.onActiveChanged?.(true);
-        }
-      }
-      /**
-       * Removes all events. Any pending pan session is immediately stopped.
-       */
-      deactivate() {
-        if (this.active) {
-          this.active = false;
-          this.element.removeEventListener("mousedown", this._onMouseDown, true);
-          this._endPan();
-          this.element.classList.remove(CSS_CLASS_GRAB);
-          this.onActiveChanged?.(false);
-        }
-      }
-      toggle() {
-        if (this.active) {
-          this.deactivate();
-        } else {
-          this.activate();
-        }
-      }
-      /**
-       * Whether to not pan if the target element is clicked.
-       * Override this method to change the default behaviour.
-       *
-       * @param {Element} node - The target of the event.
-       * @returns {boolean} Whether to not react to the click event.
-       */
-      ignoreTarget(node) {
-        return node.matches(
-          "a[href], a[href] *, input, textarea, button, button *, select, option"
-        );
-      }
-      #onMouseDown(event) {
-        if (event.button !== 0 || this.ignoreTarget(event.target)) {
-          return;
-        }
-        if (event.originalTarget) {
-          try {
-            event.originalTarget.tagName;
-          } catch (e7) {
-            return;
-          }
-        }
-        this.scrollLeftStart = this.element.scrollLeft;
-        this.scrollTopStart = this.element.scrollTop;
-        this.clientXStart = event.clientX;
-        this.clientYStart = event.clientY;
-        this.document.addEventListener("mousemove", this._onMouseMove, true);
-        this.document.addEventListener("mouseup", this._endPan, true);
-        this.element.addEventListener("scroll", this._endPan, true);
-        event.preventDefault();
-        event.stopPropagation();
-        const focusedElement = document.activeElement;
-        if (focusedElement && !focusedElement.contains(event.target)) {
-          focusedElement.blur();
-        }
-      }
-      #onMouseMove(event) {
-        this.element.removeEventListener("scroll", this._endPan, true);
-        if (!(event.buttons & 1)) {
-          this._endPan();
-          return;
-        }
-        const xDiff = event.clientX - this.clientXStart;
-        const yDiff = event.clientY - this.clientYStart;
-        const scrollTop = this.scrollTopStart - yDiff;
-        const scrollLeft = this.scrollLeftStart - xDiff;
-        if (this.element.scrollTo) {
-          this.element.scrollTo({
-            top: scrollTop,
-            left: scrollLeft,
-            behavior: "instant"
-          });
-        } else {
-          this.element.scrollTop = scrollTop;
-          this.element.scrollLeft = scrollLeft;
-        }
-        if (!this.overlay.parentNode) {
-          document.body.append(this.overlay);
-        }
-      }
-      #endPan() {
-        this.element.removeEventListener("scroll", this._endPan, true);
-        this.document.removeEventListener("mousemove", this._onMouseMove, true);
-        this.document.removeEventListener("mouseup", this._endPan, true);
-        this.overlay.remove();
-      }
-    };
-  }
-});
-
 // src/navigator/PDFNavigator.ts
 var PDFNavigator_exports = {};
 __export(PDFNavigator_exports, {
@@ -65417,7 +65525,7 @@ var init_PDFNavigator = __esm({
   "src/navigator/PDFNavigator.ts"() {
     init_polyfills();
     import_debounce8 = __toESM(require_debounce());
-    init_eventemitter3();
+    init_VisualNavigator();
     init_Events();
     init_pdf();
     init_pdf_viewer();
@@ -65430,7 +65538,7 @@ var init_PDFNavigator = __esm({
       ScaleType2[ScaleType2["Width"] = 1] = "Width";
       return ScaleType2;
     })(ScaleType || {});
-    _PDFNavigator = class _PDFNavigator extends eventemitter3_default {
+    _PDFNavigator = class _PDFNavigator extends VisualNavigator {
       constructor(settings, publication, api, workerSrc, annotator, initialLastReadingPosition, viewStore) {
         super();
         this.isPDF = true;
@@ -65459,6 +65567,20 @@ var init_PDFNavigator = __esm({
         this.initialLastReadingPosition = initialLastReadingPosition;
         this.viewStore = viewStore;
       }
+      supports(feature) {
+        switch (feature) {
+          case NavigatorFeature.Search:
+            return true;
+          case NavigatorFeature.Annotations:
+            return true;
+          case NavigatorFeature.Zoom:
+            return true;
+          case NavigatorFeature.Bookmarks:
+            return true;
+          default:
+            return false;
+        }
+      }
       // ── Factory ────────────────────────────────────────────────────────────────
       static async create(config2) {
         const nav = new this(
@@ -69324,6 +69446,8 @@ var ReflowableBookView = class {
         if (html) {
           html.style.setProperty("--USER__scroll", "readium-scroll-on");
         }
+        const spacer = doc.getElementById("r2d2bc-column-spacer");
+        if (spacer) spacer.remove();
       }
       this.setSize();
       this.setIframeHeight(this.iframe);
@@ -69345,8 +69469,8 @@ var ReflowableBookView = class {
       this.setSize();
       this.padOddColumns();
     }
-    if (this.navigator.rights.enableContentProtection) {
-      this.navigator.contentProtectionModule?.recalculate();
+    if (this.host.isContentProtectionEnabled()) {
+      this.host.recalculateContentProtection();
     }
   }
   start() {
@@ -69454,8 +69578,8 @@ var ReflowableBookView = class {
         let roundedLeftWidth = Math.floor(left / width) * width;
         element.style.height = originalHeight;
         this.setLeftColumnsWidth(roundedLeftWidth);
-        if (this.navigator.rights.enableContentProtection) {
-          this.navigator.contentProtectionModule?.recalculate(0);
+        if (this.host.isContentProtectionEnabled()) {
+          this.host.recalculateContentProtection(0);
         }
       }
     }
@@ -69479,8 +69603,8 @@ var ReflowableBookView = class {
         }
         element.style.height = originalHeight;
         this.setLeftColumnsWidth(roundedLeftWidth);
-        if (this.navigator.rights.enableContentProtection) {
-          this.navigator.contentProtectionModule?.recalculate(200);
+        if (this.host.isContentProtectionEnabled()) {
+          this.host.recalculateContentProtection(200);
         }
       }
     }
@@ -69537,10 +69661,10 @@ var ReflowableBookView = class {
       } else {
         this.setLeftColumnsWidth(0);
       }
-      this.navigator.checkResourcePosition();
+      this.host.checkResourcePosition();
     }
-    if (this.navigator.rights.enableContentProtection) {
-      this.navigator.contentProtectionModule?.recalculate();
+    if (this.host.isContentProtectionEnabled()) {
+      this.host.recalculateContentProtection();
     }
   }
   goToNextPage() {
@@ -69568,10 +69692,10 @@ var ReflowableBookView = class {
       } else {
         this.setLeftColumnsWidth(scrollWidth);
       }
-      this.navigator.checkResourcePosition();
+      this.host.checkResourcePosition();
     }
-    if (this.navigator.rights.enableContentProtection) {
-      this.navigator.contentProtectionModule?.recalculate();
+    if (this.host.isContentProtectionEnabled()) {
+      this.host.recalculateContentProtection();
     }
   }
   // doesn't exist in scroll mode
@@ -70217,7 +70341,7 @@ var _UserSettings = class _UserSettings {
       if (html) {
         const rootElement = findElement(document, "#root") || document.documentElement;
         const body = findElement(html, "body");
-        if (this.view?.navigator.publication.isReflowable) {
+        if (this.view?.host?.isReflowable()) {
           if (await this.getProperty(ReadiumCSS.FONT_SIZE_KEY)) {
             html.style.setProperty(
               ReadiumCSS.FONT_SIZE_KEY,
@@ -70243,7 +70367,7 @@ var _UserSettings = class _UserSettings {
             this.userProperties.getByRef(ReadiumCSS.COLUMN_COUNT_REF)?.toString() ?? null
           );
         }
-        if (this.view?.navigator.publication.isReflowable) {
+        if (this.view?.host?.isReflowable()) {
           if (await this.getProperty(ReadiumCSS.TEXT_ALIGNMENT_KEY)) {
             if (this.userProperties.getByRef(ReadiumCSS.TEXT_ALIGNMENT_REF)?.toString() === "auto") {
               html.style.removeProperty(ReadiumCSS.TEXT_ALIGNMENT_KEY);
@@ -70330,14 +70454,14 @@ var _UserSettings = class _UserSettings {
             setAttr(rootElement, "data-viewer-theme", "day");
           if (body) setAttr(body, "data-viewer-theme", "day");
         }
-        if (this.view?.navigator.publication.isFixedLayout) {
+        if (this.view?.host?.isFixedLayout()) {
           if (await this.getProperty(ReadiumCSS.DIRECTION_KEY)) {
             let value = this.userProperties.getByRef(ReadiumCSS.DIRECTION_REF)?.toString() ?? null;
             html.style.setProperty(ReadiumCSS.DIRECTION_KEY, value);
-            this.view.navigator.setDirection(value);
+            this.view.host?.setDirection(value);
           }
         }
-        if (this.view?.navigator.publication.isReflowable) {
+        if (this.view?.host?.isReflowable()) {
           if (await this.getProperty(ReadiumCSS.FONT_FAMILY_KEY)) {
             html.style.setProperty(
               ReadiumCSS.FONT_FAMILY_KEY,
@@ -81969,8 +82093,9 @@ var TTSSettings = class {
   }
 };
 
-// src/navigator/IFrameNavigator.ts
+// src/navigator/EpubNavigator.ts
 init_polyfills();
+init_VisualNavigator();
 init_Events();
 init_EventHandler();
 init_HTMLUtilities();
@@ -83637,9 +83762,6 @@ var DefinitionsModule = class {
   }
 };
 
-// src/navigator/IFrameNavigator.ts
-init_eventemitter3();
-
 // src/modules/linefocus/LineFocusModule.ts
 init_polyfills();
 init_HTMLUtilities();
@@ -84627,12 +84749,31 @@ var CitationModule = class {
   }
 };
 
-// src/navigator/IFrameNavigator.ts
+// src/navigator/EpubNavigator.ts
 var import_loglevel23 = __toESM(require_loglevel());
-var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
+init_GrabToPan();
+var EpubNavigator = class _EpubNavigator extends VisualNavigator {
   constructor(settings, annotator = void 0, initialLastReadingPosition = void 0, publication, api, rights, tts, injectables, attributes, services, sample, requestConfig, highlighter, modules) {
     super();
     this.iframes = [];
+    // ── FXL zoom ────────────────────────────────────────────────
+    this.fxlZoomKeyHandler = (event) => {
+      if (/input|select|option|textarea/i.test(
+        event.target.tagName
+      ))
+        return;
+      const key = event.key;
+      if (key === "=" || key === "+") {
+        this.zoomIn();
+      } else if (key === "-") {
+        this.zoomOut();
+      } else if (key === "0") {
+        this.fitToPage();
+      } else {
+        return;
+      }
+      event.preventDefault();
+    };
     this.sideNavExpanded = false;
     this.currentChapterLink = { href: "" };
     this.currentSpreadLinks = {};
@@ -84653,6 +84794,8 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
       enableCitations: false
     };
     this.didInitKeyboardEventHandler = false;
+    this.fxlContentWidth = 0;
+    this.fxlContentHeight = 0;
     this.onResize = () => {
       clearTimeout(this.timeout);
       this.timeout = setTimeout(this.handleResize.bind(this), 200);
@@ -84734,7 +84877,14 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
     this.annotator = annotator;
     this.view = settings.view;
     this.view.attributes = attributes;
-    this.view.navigator = this;
+    this.view.host = {
+      checkResourcePosition: () => this.checkResourcePosition(),
+      recalculateContentProtection: (delay2) => this.contentProtectionModule?.recalculate(delay2),
+      isContentProtectionEnabled: () => !!this.rights.enableContentProtection,
+      isFixedLayout: () => this.publication.isFixedLayout,
+      isReflowable: () => this.publication.isReflowable,
+      setDirection: (direction) => this.setDirection(direction)
+    };
     this.eventHandler = new EventHandler(this);
     this.touchEventHandler = new TouchEventHandler(this);
     this.keyboardEventHandler = new KeyboardEventHandler(this);
@@ -84765,6 +84915,117 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
     this.requestConfig = requestConfig;
     this.sampleReadEventHandler = new SampleReadEventHandler(this);
   }
+  supports(feature) {
+    switch (feature) {
+      case NavigatorFeature.TTS:
+        return !!this.rights.enableTTS && !!this.ttsModule;
+      case NavigatorFeature.MediaOverlays:
+        return !!this.rights.enableMediaOverlays && !!this.mediaOverlayModule && this.hasMediaOverlays;
+      case NavigatorFeature.Search:
+        return !!this.rights.enableSearch && !!this.searchModule;
+      case NavigatorFeature.Annotations:
+        return !!this.rights.enableAnnotations && !!this.annotationModule;
+      case NavigatorFeature.Bookmarks:
+        return !!this.rights.enableBookmarks && !!this.bookmarkModule;
+      case NavigatorFeature.Zoom:
+        return this.publication.isFixedLayout;
+      case NavigatorFeature.LineFocus:
+        return !!this.rights.enableLineFocus && !!this.lineFocusModule;
+      case NavigatorFeature.Definitions:
+        return !!this.rights.enableDefinitions && !!this.definitionsModule;
+      case NavigatorFeature.Citations:
+        return !!this.rights.enableCitations && !!this.citationModule;
+      case NavigatorFeature.ContentProtection:
+        return !!this.rights.enableContentProtection && !!this.contentProtectionModule;
+      case NavigatorFeature.Consumption:
+        return !!this.rights.enableConsumption && !!this.consumptionModule;
+      case NavigatorFeature.History:
+        return !!this.rights.enableHistory && !!this.historyModule;
+      case NavigatorFeature.Timeline:
+        return !!this.rights.enableTimeline && !!this.timelineModule;
+      default:
+        return false;
+    }
+  }
+  getFxlCurrentScale() {
+    const match2 = this.spreads?.style.transform?.match(/scale\(([^)]+)\)/);
+    return match2 ? parseFloat(match2[1]) : 1;
+  }
+  fitToPage() {
+    if (!this.publication.isFixedLayout) return;
+    this.handleResize();
+  }
+  zoomIn() {
+    if (!this.publication.isFixedLayout) return;
+    this.setFxlScale(this.getFxlCurrentScale() * 1.15);
+  }
+  zoomOut() {
+    if (!this.publication.isFixedLayout) return;
+    this.setFxlScale(this.getFxlCurrentScale() / 1.15);
+  }
+  setFxlScale(newScale) {
+    if (!this.spreads || !this.fxlZoomContainer) return;
+    this.spreads.style.transform = "scale(" + newScale + ")";
+    this.updateFxlZoomContainer(newScale);
+  }
+  updateFxlZoomContainer(scale) {
+    if (!this.fxlZoomContainer || !this.fxlContentWidth || !this.fxlContentHeight)
+      return;
+    this.fxlZoomContainer.style.width = this.fxlContentWidth * scale + "px";
+    this.fxlZoomContainer.style.height = this.fxlContentHeight * scale + "px";
+    this.spreads.style.width = this.fxlContentWidth + "px";
+    this.spreads.style.height = this.fxlContentHeight + "px";
+    if (this.fxlHandTool) {
+      requestAnimationFrame(() => {
+        if (!this.fxlScrollContainer) return;
+        const isZoomed = this.fxlScrollContainer.scrollWidth > this.fxlScrollContainer.clientWidth || this.fxlScrollContainer.scrollHeight > this.fxlScrollContainer.clientHeight;
+        if (isZoomed) {
+          this.activateHand();
+        } else {
+          this.deactivateHand();
+        }
+      });
+    }
+  }
+  setupFxlPan() {
+    const el = this.fxlScrollContainer;
+    if (!el) return;
+    this.fxlPanOverlay = document.createElement("div");
+    this.fxlPanOverlay.style.position = "absolute";
+    this.fxlPanOverlay.style.top = "0";
+    this.fxlPanOverlay.style.left = "0";
+    this.fxlPanOverlay.style.width = "100%";
+    this.fxlPanOverlay.style.height = "100%";
+    this.fxlPanOverlay.style.pointerEvents = "none";
+    this.fxlPanOverlay.style.zIndex = "1";
+    this.fxlZoomContainer.style.position = "relative";
+    this.fxlZoomContainer.appendChild(this.fxlPanOverlay);
+    this.fxlHandTool = new GrabToPan({ element: el });
+  }
+  activateHand() {
+    if (!this.publication.isFixedLayout) return;
+    if (this.fxlPanOverlay) {
+      this.fxlPanOverlay.style.pointerEvents = "auto";
+    }
+    this.fxlHandTool?.activate();
+    const panBtn = document.querySelector("#fxl-pan a");
+    if (panBtn) {
+      panBtn.classList.add("active");
+      panBtn.style.color = "#039be5";
+    }
+  }
+  deactivateHand() {
+    if (!this.publication.isFixedLayout) return;
+    if (this.fxlPanOverlay) {
+      this.fxlPanOverlay.style.pointerEvents = "none";
+    }
+    this.fxlHandTool?.deactivate();
+    const panBtn = document.querySelector("#fxl-pan a");
+    if (panBtn) {
+      panBtn.classList.remove("active");
+      panBtn.style.color = "";
+    }
+  }
   static async create(config2) {
     const navigator2 = new this(
       config2.settings,
@@ -84829,7 +85090,7 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
     removeEventListenerOptional(
       this.goBackButton,
       "click",
-      _IFrameNavigator.goBack.bind(this)
+      _EpubNavigator.goBack.bind(this)
     );
     removeEventListenerOptional(
       this.espandMenuIcon,
@@ -84845,12 +85106,15 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
   }
   setDirection(direction) {
     let dir = "";
-    if (direction === "rtl" || direction === "ltr") dir = direction;
-    if (direction === "auto")
-      dir = this.publication.metadata?.readingProgression;
-    if (dir) {
-      if (dir === "rtl") this.spreads.style.flexDirection = "row-reverse";
-      if (dir === "ltr") this.spreads.style.flexDirection = "row";
+    if (direction === "rtl" || direction === "ltr") {
+      dir = direction;
+    } else if (direction === "auto") {
+      dir = this.publication.metadata?.readingProgression || this.publication.metadata?.otherMetadata?.["rendition:spread-direction"] || "ltr";
+    }
+    if (dir === "rtl" || dir === "ltr") {
+      if (this.publication.isFixedLayout) {
+        this.spreads.style.flexDirection = dir === "rtl" ? "row-reverse" : "row";
+      }
       this.keyboardEventHandler.rtl = dir === "rtl";
       if (this.api?.direction) this.api?.direction(dir);
       this.emit(ReaderEvent.Direction, dir);
@@ -84889,11 +85153,33 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
           this.spreads = document.createElement("div");
           this.firstSpread = document.createElement("div");
           this.spreads.style.display = "flex";
-          this.spreads.style.alignItems = "center";
-          this.spreads.style.justifyContent = "center";
+          this.spreads.style.transformOrigin = "0 0";
           this.spreads.appendChild(this.firstSpread);
           this.firstSpread.appendChild(this.iframes[0]);
-          wrapper.appendChild(this.spreads);
+          this.fxlScrollContainer = document.createElement("div");
+          this.fxlScrollContainer.style.position = "absolute";
+          this.fxlScrollContainer.style.top = "0";
+          this.fxlScrollContainer.style.right = "0";
+          const timelineEl = document.getElementById("container-view-timeline");
+          this.fxlScrollContainer.style.left = timelineEl && this.rights.enableTimeline ? "70px" : "0";
+          const infoBottom = document.getElementById("reader-info-bottom");
+          this.fxlScrollContainer.style.bottom = infoBottom ? (this.attributes?.bottomInfoHeight ?? 40) + "px" : "0";
+          this.fxlScrollContainer.style.overflow = "auto";
+          this.fxlScrollContainer.style.display = "flex";
+          this.fxlZoomContainer = document.createElement("div");
+          this.fxlZoomContainer.style.margin = "auto";
+          this.fxlZoomContainer.style.flexShrink = "0";
+          this.fxlZoomContainer.style.overflow = "hidden";
+          if (this.attributes?.fixedLayoutShadow !== false) {
+            this.fxlZoomContainer.style.padding = "12px";
+            this.fxlZoomContainer.style.boxSizing = "content-box";
+          }
+          this.fxlZoomContainer.appendChild(this.spreads);
+          this.fxlScrollContainer.appendChild(this.fxlZoomContainer);
+          wrapper.style.position = "relative";
+          wrapper.appendChild(this.fxlScrollContainer);
+          document.addEventListener("keydown", this.fxlZoomKeyHandler);
+          this.setupFxlPan();
           let dir = "";
           switch (this.settings.direction) {
             case 0:
@@ -84941,13 +85227,23 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
         }
       }
       if (this.publication.isFixedLayout) {
-        const minHeight = wrapper.clientHeight;
-        var iframeParent = this.iframes[0].parentElement?.parentElement;
-        iframeParent.style.height = minHeight + 40 + "px";
       } else {
         if (this.iframes.length === 2) {
           this.iframes.pop();
         }
+        let dir = "";
+        switch (this.settings.direction) {
+          case 0:
+            dir = "auto";
+            break;
+          case 1:
+            dir = "ltr";
+            break;
+          case 2:
+            dir = "rtl";
+            break;
+        }
+        this.setDirection(dir);
       }
       this.loadingMessage = findElement(
         mainElement,
@@ -85143,7 +85439,7 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
           if (menuSearch)
             menuSearch.parentElement?.style.setProperty("display", "none");
         }
-        if (menuSearch && this.view?.navigator.publication.isFixedLayout) {
+        if (menuSearch && this.publication.isFixedLayout) {
           menuSearch.parentElement?.style.setProperty("display", "none");
         }
         if (this.hasMediaOverlays) {
@@ -85217,7 +85513,7 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
     addEventListenerOptional(
       this.goBackButton,
       "click",
-      _IFrameNavigator.goBack.bind(this)
+      _EpubNavigator.goBack.bind(this)
     );
     addEventListenerOptional(
       this.espandMenuIcon,
@@ -85659,6 +85955,12 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
           this.didInitKeyboardEventHandler = true;
         }
       }
+      if (this.publication.isFixedLayout && iframe.contentDocument) {
+        iframe.contentDocument.addEventListener(
+          "keydown",
+          this.fxlZoomKeyHandler
+        );
+      }
       if (this.view?.layout !== "fixed") {
         if (this.view?.isScrollMode()) {
           iframe.height = "0";
@@ -85723,6 +86025,9 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
         setTimeout(() => {
           if (this.mediaOverlayModule) {
             this.mediaOverlayModule.settings.resourceReady = true;
+            if (this.mediaOverlayModule.settings.playing) {
+              this.mediaOverlayModule.bindClickHandler();
+            }
           }
         }, 300);
       }, 200);
@@ -85752,7 +86057,7 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
       const bases = iframe.contentDocument.getElementsByTagName("base");
       if (bases.length === 0) {
         head.insertBefore(
-          _IFrameNavigator.createBase(this.currentChapterLink.href),
+          _EpubNavigator.createBase(this.currentChapterLink.href),
           head.firstChild
         );
       }
@@ -85761,32 +86066,32 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
           if (injectable.fontFamily) {
             this.settings.initAddedFont();
             if (!injectable.systemFont && injectable.url) {
-              const link = _IFrameNavigator.createCssLink(injectable.url);
+              const link = _EpubNavigator.createCssLink(injectable.url);
               head.appendChild(link);
               addLoadingInjectable(link);
             }
           } else if (injectable.r2before && injectable.url) {
-            const link = _IFrameNavigator.createCssLink(injectable.url);
+            const link = _EpubNavigator.createCssLink(injectable.url);
             head.insertBefore(link, head.firstChild);
             addLoadingInjectable(link);
           } else if (injectable.r2default && injectable.url) {
-            const link = _IFrameNavigator.createCssLink(injectable.url);
+            const link = _EpubNavigator.createCssLink(injectable.url);
             head.insertBefore(link, head.childNodes[1]);
             addLoadingInjectable(link);
           } else if (injectable.r2after && injectable.url) {
             if (injectable.appearance) {
               this.settings.initAddedAppearance();
             }
-            const link = _IFrameNavigator.createCssLink(injectable.url);
+            const link = _EpubNavigator.createCssLink(injectable.url);
             head.appendChild(link);
             addLoadingInjectable(link);
           } else if (injectable.url) {
-            const link = _IFrameNavigator.createCssLink(injectable.url);
+            const link = _EpubNavigator.createCssLink(injectable.url);
             head.appendChild(link);
             addLoadingInjectable(link);
           }
         } else if (injectable.type === "script" && injectable.url) {
-          const script = _IFrameNavigator.createJavascriptLink(
+          const script = _EpubNavigator.createJavascriptLink(
             injectable.url,
             injectable.async ?? false
           );
@@ -85805,7 +86110,7 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
    */
   abortOnError(e7) {
     if (this.api?.onError) {
-      const trueError = e7 instanceof Error ? e7 : typeof e7 === "string" ? new Error(e7) : new Error("An unknown error occurred in the IFrameNavigator.");
+      const trueError = e7 instanceof Error ? e7 : typeof e7 === "string" ? new Error(e7) : new Error("An unknown error occurred in the EpubNavigator.");
       this.api.onError(trueError);
       this.emit(ReaderEvent.Error, trueError);
     } else {
@@ -85831,7 +86136,7 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
         const bases = doc.getElementsByTagName("base");
         if (bases.length === 0) {
           doc.head.insertBefore(
-            _IFrameNavigator.createBase(href),
+            _EpubNavigator.createBase(href),
             doc.head.firstChild
           );
         }
@@ -85851,7 +86156,7 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
         const bases = doc.getElementsByTagName("base");
         if (bases.length === 0) {
           doc.head.insertBefore(
-            _IFrameNavigator.createBase(href),
+            _EpubNavigator.createBase(href),
             doc.head.firstChild
           );
         }
@@ -86203,13 +86508,15 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
             }
           }
         }
-        var iframeParent = index2 === 0 && this.iframes.length === 2 ? this.iframes[1].parentElement?.parentElement : this.iframes[0].parentElement?.parentElement;
-        if (iframeParent && width) {
+        if (width) {
+          if (!this.fxlScrollContainer) return;
           const fxlMargin = this.attributes?.fixedLayoutMargin ?? 100;
-          var widthRatio = (parseInt(getComputedStyle(iframeParent).width) - fxlMargin) / (this.iframes.length === 2 ? parseInt(width.toString().replace("px", "")) * 2 + fxlMargin * 2 : parseInt(width.toString().replace("px", "")));
-          var heightRatio = (parseInt(getComputedStyle(iframeParent).height) - fxlMargin) / parseInt(height.toString().replace("px", ""));
+          const contentW = parseInt(width.toString().replace("px", ""));
+          const contentH = parseInt(height.toString().replace("px", ""));
+          var widthRatio = (this.fxlScrollContainer.clientWidth - fxlMargin) / (this.iframes.length === 2 ? contentW * 2 + fxlMargin * 2 : contentW);
+          var heightRatio = (this.fxlScrollContainer.clientHeight - fxlMargin) / contentH;
           var scale = Math.min(widthRatio, heightRatio);
-          iframeParent.style.transform = "scale(" + scale + ")";
+          this.spreads.style.transform = "scale(" + scale + ")";
           for (const iframe of this.iframes) {
             iframe.style.height = height;
             iframe.style.width = width;
@@ -86217,6 +86524,9 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
               iframe.parentElement.style.height = height;
             }
           }
+          this.fxlContentWidth = this.iframes.length === 2 ? contentW * 2 : contentW;
+          this.fxlContentHeight = contentH;
+          this.updateFxlZoomContainer(scale);
         }
       }, 400);
     }
@@ -86579,10 +86889,7 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
     }
     if (this.publication.isFixedLayout) {
       var index2 = this.publication.getSpineIndex(this.currentChapterLink.href);
-      const minHeight = getHeight() - 40 - (this.attributes?.margin ?? 0);
-      var iframeParent = index2 === 0 && this.iframes.length === 2 ? this.iframes[1].parentElement?.parentElement : this.iframes[0].parentElement?.parentElement;
-      if (iframeParent) {
-        iframeParent.style.height = minHeight + 40 + "px";
+      if (this.fxlScrollContainer) {
         let height, width;
         let doc;
         if (index2 === 0 && this.iframes?.length === 2) {
@@ -86620,14 +86927,14 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
           }
         }
         const fxlMargin = this.attributes?.fixedLayoutMargin ?? 100;
-        var widthRatio = (parseInt(getComputedStyle(iframeParent).width) - fxlMargin) / (this.iframes.length === 2 ? parseInt(
+        const contentW = parseInt(
           width.toString().endsWith("px") ? width?.replace("px", "") : width
-        ) * 2 + fxlMargin * 2 : parseInt(
-          width.toString().endsWith("px") ? width?.replace("px", "") : width
-        ));
-        var heightRatio = (parseInt(getComputedStyle(iframeParent).height) - fxlMargin) / parseInt(height.toString().replace("px", ""));
+        );
+        const contentH = parseInt(height.toString().replace("px", ""));
+        var widthRatio = (this.fxlScrollContainer.clientWidth - fxlMargin) / (this.iframes.length === 2 ? contentW * 2 + fxlMargin * 2 : contentW);
+        var heightRatio = (this.fxlScrollContainer.clientHeight - fxlMargin) / contentH;
         var scale = Math.min(widthRatio, heightRatio);
-        iframeParent.style.transform = "scale(" + scale + ")";
+        this.spreads.style.transform = "scale(" + scale + ")";
         for (const iframe of this.iframes) {
           iframe.style.height = height;
           iframe.style.width = width;
@@ -86635,6 +86942,9 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
             iframe.parentElement.style.height = height;
           }
         }
+        this.fxlContentWidth = this.iframes.length === 2 ? contentW * 2 : contentW;
+        this.fxlContentHeight = contentH;
+        this.updateFxlZoomContainer(scale);
       }
     }
     const oldPosition = this.view?.getCurrentPosition();
@@ -87324,6 +87634,7 @@ var IFrameNavigator = class _IFrameNavigator extends eventemitter3_default {
     }
   }
 };
+var IFrameNavigator = EpubNavigator;
 
 // src/store/LocalAnnotator.ts
 init_polyfills();
@@ -87813,6 +88124,7 @@ var LayerSettings = class {
 };
 
 // src/reader.ts
+init_VisualNavigator();
 var _PDFNavigatorClass;
 async function loadPDFNavigator() {
   if (!_PDFNavigatorClass) {
@@ -87849,54 +88161,38 @@ var D2Reader = class _D2Reader {
      */
     /** Start TTS Read Aloud */
     this.startReadAloud = () => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.startReadAloud();
-      }
+      this.navigator.startReadAloud();
     };
-    /** Start TTS Read Aloud */
+    /** Stop TTS Read Aloud */
     this.stopReadAloud = () => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.stopReadAloud();
-      }
+      this.navigator.stopReadAloud();
     };
-    /** Start TTS Read Aloud */
+    /** Pause TTS Read Aloud */
     this.pauseReadAloud = () => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.pauseReadAloud();
-      }
+      this.navigator.pauseReadAloud();
     };
-    /** Start TTS Read Aloud */
+    /** Resume TTS Read Aloud */
     this.resumeReadAloud = () => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.resumeReadAloud();
-      }
+      this.navigator.resumeReadAloud();
     };
     /**
      * Read Along
      */
     /** Start Media Overlay Read Along */
     this.startReadAlong = () => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.startReadAlong();
-      }
+      this.navigator.startReadAlong();
     };
     /** Stop Media Overlay Read Along */
     this.stopReadAlong = () => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.stopReadAlong();
-      }
+      this.navigator.stopReadAlong();
     };
     /** Pause Media Overlay Read Along */
     this.pauseReadAlong = () => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.pauseReadAlong();
-      }
+      this.navigator.pauseReadAlong();
     };
     /** Resume Media Overlay Read Along */
     this.resumeReadAlong = () => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.resumeReadAlong();
-      }
+      this.navigator.resumeReadAlong();
     };
     /**
      * Bookmarks and annotations
@@ -87945,20 +88241,20 @@ var D2Reader = class _D2Reader {
     };
     /** Hide  Layer */
     this.hideLayer = (layer) => {
-      return this.navigator instanceof IFrameNavigator ? this.navigator?.hideLayer(layer) : false;
+      this.navigator.hideLayer(layer);
     };
     /** Show  Layer */
     this.showLayer = (layer) => {
-      return this.navigator instanceof IFrameNavigator ? this.navigator?.showLayer(layer) : false;
+      this.navigator.showLayer(layer);
     };
     /** Activate Marker <br>
      * Activated Marker will be used for active annotation creation */
     this.activateMarker = (id2, position) => {
-      return this.navigator instanceof IFrameNavigator ? this.navigator?.activateMarker(id2, position) : false;
+      this.navigator.activateMarker(id2, position);
     };
     /** Deactivate Marker */
     this.deactivateMarker = () => {
-      return this.navigator instanceof IFrameNavigator ? this.navigator?.deactivateMarker() : false;
+      this.navigator.deactivateMarker();
     };
     /**
      * Definitions
@@ -87989,17 +88285,17 @@ var D2Reader = class _D2Reader {
       return await this.searchModule?.search(term, current) ?? [];
     };
     this.goToSearchIndex = async (href, index2, current) => {
-      if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableSearch) {
+      if (this.navigator.supports(NavigatorFeature.Search)) {
         await this.searchModule?.goToSearchIndex(href, index2, current);
       }
     };
     this.goToSearchID = async (href, index2, current) => {
-      if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableSearch) {
+      if (this.navigator.supports(NavigatorFeature.Search)) {
         await this.searchModule?.goToSearchID(href, index2, current);
       }
     };
     this.clearSearch = async () => {
-      if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableSearch) {
+      if (this.navigator.supports(NavigatorFeature.Search)) {
         await this.searchModule?.clearSearch();
       }
     };
@@ -88016,16 +88312,16 @@ var D2Reader = class _D2Reader {
       return await this.settings.scroll(value);
     };
     /**
-    * Used to increase anything that can be increased,
-    * such as pitch, rate, volume, fontSize
-    */
+     * Used to increase anything that can be increased,
+     * such as pitch, rate, volume, fontSize
+     */
     this.increase = async (incremental) => {
       if (this.isTTSIncrementable(incremental)) {
-        if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableTTS) {
+        if (this.navigator.supports(NavigatorFeature.TTS)) {
           await this.ttsSettings?.increase(incremental);
         }
       } else if (this.isMOIncrementable(incremental)) {
-        if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableMediaOverlays) {
+        if (this.navigator.supports(NavigatorFeature.MediaOverlays)) {
           await this.mediaOverlaySettings?.increase(incremental);
         }
       } else {
@@ -88038,11 +88334,11 @@ var D2Reader = class _D2Reader {
      */
     this.decrease = async (incremental) => {
       if (this.isTTSIncrementable(incremental)) {
-        if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableTTS) {
+        if (this.navigator.supports(NavigatorFeature.TTS)) {
           await this.ttsSettings?.decrease(incremental);
         }
       } else if (this.isMOIncrementable(incremental)) {
-        if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableMediaOverlays) {
+        if (this.navigator.supports(NavigatorFeature.MediaOverlays)) {
           await this.mediaOverlaySettings?.decrease(incremental);
         }
       } else {
@@ -88060,12 +88356,12 @@ var D2Reader = class _D2Reader {
      * TTS Settings
      */
     this.resetTTSSettings = () => {
-      if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableTTS) {
+      if (this.navigator.supports(NavigatorFeature.TTS)) {
         this.ttsSettings?.resetTTSSettings();
       }
     };
     this.applyTTSSettings = async (ttsSettings) => {
-      if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableTTS) {
+      if (this.navigator.supports(NavigatorFeature.TTS)) {
         await this.ttsSettings?.applyTTSSettings(ttsSettings);
       }
     };
@@ -88078,7 +88374,7 @@ var D2Reader = class _D2Reader {
     //   }
     // };
     this.applyPreferredVoice = async (value) => {
-      if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableTTS) {
+      if (this.navigator.supports(NavigatorFeature.TTS)) {
         await this.ttsSettings?.applyPreferredVoice(value);
       }
     };
@@ -88086,12 +88382,12 @@ var D2Reader = class _D2Reader {
      * Media Overlay Settings
      */
     this.resetMediaOverlaySettings = async () => {
-      if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableMediaOverlays) {
+      if (this.navigator.supports(NavigatorFeature.MediaOverlays)) {
         await this.mediaOverlaySettings?.resetMediaOverlaySettings();
       }
     };
     this.applyMediaOverlaySettings = async (settings) => {
-      if (this.navigator instanceof IFrameNavigator && this.navigator.rights.enableMediaOverlays) {
+      if (this.navigator.supports(NavigatorFeature.MediaOverlays)) {
         await this.mediaOverlaySettings?.applyMediaOverlaySettings(settings);
       }
     };
@@ -88105,34 +88401,22 @@ var D2Reader = class _D2Reader {
       await this.navigator.goToPage(page);
     };
     this.fitToPage = () => {
-      if (isPDFNavigator(this.navigator)) {
-        this.navigator.fitToPage();
-      }
+      this.navigator.fitToPage();
     };
     this.fitToWidth = () => {
-      if (isPDFNavigator(this.navigator)) {
-        this.navigator.fitToWidth();
-      }
+      this.navigator.fitToWidth();
     };
     this.zoomIn = () => {
-      if (isPDFNavigator(this.navigator)) {
-        this.navigator.zoomIn();
-      }
+      this.navigator.zoomIn();
     };
     this.zoomOut = () => {
-      if (isPDFNavigator(this.navigator)) {
-        this.navigator.zoomOut();
-      }
+      this.navigator.zoomOut();
     };
     this.activateHand = () => {
-      if (isPDFNavigator(this.navigator)) {
-        this.navigator.activateHand();
-      }
+      this.navigator.activateHand();
     };
     this.deactivateHand = () => {
-      if (isPDFNavigator(this.navigator)) {
-        this.navigator.deactivateHand();
-      }
+      this.navigator.deactivateHand();
     };
     this.copyToClipboard = (text) => {
       this.contentProtectionModule?.copyToClipboard(text);
@@ -88150,18 +88434,14 @@ var D2Reader = class _D2Reader {
       this.navigator.previousPage();
     };
     this.snapToSelector = async (selector2) => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.snapToSelector(selector2);
-      }
+      this.navigator.snapToSelector?.(selector2);
     };
     /**
      * You have attributes in the reader when you initialize it. You can set margin, navigationHeight etc...
      * This is in case you change the attributes after initializing the reader.
      */
     this.applyAttributes = (value) => {
-      if (this.navigator instanceof IFrameNavigator) {
-        this.navigator.applyAttributes(value);
-      }
+      this.navigator.applyAttributes?.(value);
     };
     /**
      * Destructor:
@@ -88190,9 +88470,7 @@ var D2Reader = class _D2Reader {
     };
   }
   addEventListener(event, handler) {
-    if (this.navigator instanceof IFrameNavigator || isPDFNavigator(this.navigator)) {
-      this.navigator.addListener(event, handler);
-    }
+    this.navigator.addListener(event, handler);
   }
   /**
    * The async builder.
@@ -88393,7 +88671,7 @@ var D2Reader = class _D2Reader {
         publication,
         ...initialConfig.consumption
       }) : void 0;
-      const navigator2 = await IFrameNavigator.create({
+      const navigator2 = await EpubNavigator.create({
         mainElement,
         headerMenu,
         footerMenu,
@@ -88449,10 +88727,7 @@ var D2Reader = class _D2Reader {
     }
   }
   get hasMediaOverlays() {
-    if (this.navigator instanceof IFrameNavigator) {
-      return this.navigator.hasMediaOverlays;
-    }
-    return false;
+    return this.navigator.publication.hasMediaOverlays ?? false;
   }
   /** Table of Contents */
   get tableOfContents() {
@@ -88496,7 +88771,7 @@ var D2Reader = class _D2Reader {
     return this.navigator.currentResource();
   }
   get mostRecentNavigatedTocItem() {
-    return this.navigator instanceof IFrameNavigator ? this.navigator.mostRecentNavigatedTocItem() : false;
+    return this.navigator.mostRecentNavigatedTocItem?.() ?? void 0;
   }
   get totalResources() {
     return this.navigator.totalResources();
@@ -88527,10 +88802,10 @@ var D2Reader = class _D2Reader {
     return this.navigator.positions();
   }
   get atStart() {
-    return this.navigator instanceof IFrameNavigator ? this.navigator.atStart() : false;
+    return this.navigator.atStart();
   }
   get atEnd() {
-    return this.navigator instanceof IFrameNavigator ? this.navigator.atEnd() : false;
+    return this.navigator.atEnd();
   }
   async applyLineFocusSettings(userSettings) {
     if (userSettings.lines) {
@@ -88599,11 +88874,15 @@ function updateConfig(rights, publication) {
 
 // src/index.ts
 init_Events();
+init_VisualNavigator();
 var index_default = D2Reader;
 var load = D2Reader.load;
 export {
   AnnotationMarker,
+  EpubNavigator,
+  IFrameNavigator,
   Link,
+  NavigatorFeature,
   ReaderEvent,
   index_default as default,
   load