Fix zoom percentage to track relative to fit-page scale

The zoom percentage display had two bugs:
1. Scroll-zoom never updated the status bar percentage because the
   'zoom' event listener was registered inside the magnifier-toggle
   click handler (only added on click, and re-added on each click).
2. After reset (fit-page), the status bar showed '100%' but the
   zoom-in button treated the current scale as 1.0 (absolute), not
   the fit-page scale (e.g. 0.3). This caused a wild zoom jump
   from '100%' to '120%' that was actually a 4x visual change.

Fix by introducing a #baseScale field that captures the fit-page or
fit-width scale whenever the component renders in auto-fit mode. The
new currentScale getter exposes the actual transform scale, and
zoomPercent expresses it as a percentage of baseScale. All zoom-in/
zoom-out handlers (buttons and keyboard) now use currentScale instead
of getAttribute('zoom') || 1, and all percentage displays use
zoomPercent. The zoom event listener is registered once at setup
rather than inside the magnifier toggle handler.

Also removes all diagnostic console.log statements from fixed-layout.js
and reader.js.

fixed-layout.js

@@ -40,6 +40,7 @@ export class FixedLayout extends HTMLElement {
   #interactionMode = "select";
   #wrapper;
   #transform = { x: 0, y: 0, scale: 1 };
+  #baseScale = 1;
   #zoomState = {
     minScale: 0.1,
     maxScale: 10,
@@ -132,6 +133,14 @@ export class FixedLayout extends HTMLElement {
     return this.#magnifier.enabled;
   }
 
+  get currentScale() {
+    return this.#transform.scale;
+  }
+
+  get zoomPercent() {
+    return Math.round((this.#transform.scale / this.#baseScale) * 100);
+  }
+
   resetZoom() {
     this.#zoom = undefined;
     this.#render();
@@ -395,14 +404,6 @@ export class FixedLayout extends HTMLElement {
   }
 
   #zoomByRatio(cx, cy, ratio) {
-    console.log("[FXL] zoomByRatio:", {
-      cx,
-      cy,
-      ratio,
-      oldScale: this.#transform.scale,
-      oldX: this.#transform.x,
-      oldY: this.#transform.y,
-    });
     const oldScale = this.#transform.scale;
     const newScale = Math.min(
       this.#zoomState.maxScale,
@@ -421,12 +422,6 @@ export class FixedLayout extends HTMLElement {
     this.dispatchEvent(
       new CustomEvent("zoom", { detail: { scale: newScale } }),
     );
-    console.log("[FXL] zoomByRatio result:", {
-      newX: this.#transform.x,
-      newY: this.#transform.y,
-      newScale: this.#transform.scale,
-      actualRatio,
-    });
   }
 
   #handleWheel(event) {
@@ -442,16 +437,6 @@ export class FixedLayout extends HTMLElement {
       event.deltaY > 0
         ? 1 - this.#zoomState.zoomStep
         : 1 + this.#zoomState.zoomStep;
-    console.log("[FXL] wheel:", {
-      cx,
-      cy,
-      transformX: this.#transform.x,
-      transformY: this.#transform.y,
-      transformScale: this.#transform.scale,
-      zoom: this.#zoom,
-      side: this.#side,
-      hostWidth: rect.width,
-    });
     this.#zoomByRatio(cx, cy, ratio);
   }
 
@@ -656,13 +641,6 @@ export class FixedLayout extends HTMLElement {
   }
 
   #render(side = this.#side) {
-    console.log("[FXL] render:", {
-      side,
-      zoom: this.#zoom,
-      transformScale: this.#transform.scale,
-      isNumericZoom: typeof this.#zoom === "number" && !isNaN(this.#zoom),
-      hasDualFrames: !this.#center && !this.#left?.blank && !this.#right?.blank,
-    });
     if (!side) return;
     const left = this.#left ?? {};
     const right = this.#center ?? this.#right ?? {};
@@ -699,6 +677,10 @@ export class FixedLayout extends HTMLElement {
 
     this.#transform.scale = scale;
 
+    if (typeof this.#zoom !== "number" || isNaN(this.#zoom)) {
+      this.#baseScale = scale;
+    }
+
     this.#updateFrameScales(scale);
 
     const { contentWidth, contentHeight } = this.#getContentSize();