pdf-flipbook 1.3.0 → 1.8.0

package/dist/pdf-flipbook.esm.js

@@ -21209,291 +21209,406 @@ if (typeof window !== "undefined") {
   __webpack_exports__GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${__webpack_exports__version}/pdf.worker.min.mjs`;
 }
 var DEFAULTS = {
-  /** Flip animation duration in ms */
-  flipDuration: 700,
-  /** Shadow opacity at peak of flip (0-1) */
-  shadowIntensity: 0.4,
-  /** Device-pixel-ratio cap for canvas rendering */
-  maxDpr: 2,
-  /** Whether to show the toolbar */
+  flippingTime: 800,
   toolbar: true,
-  /** Toolbar theme: "light" | "dark" */
   theme: "dark",
-  /** Preload N pages ahead */
-  preloadAhead: 2,
-  /** Called when a page turn starts: (fromPage, toPage) */
+  maxDpr: 2,
   onFlip: null,
-  /** Called when all pages are loaded */
   onReady: null,
-  /** Called on load error */
   onError: null
 };
-var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
-var even = (n) => n % 2 === 0 ? n : n - 1;
-var isTouchDevice = () => "ontouchstart" in window || navigator.maxTouchPoints > 0;
+var clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+var easeInOut = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
 var PdfFlipbook = class {
-  /**
-   * @param {string|HTMLElement} container  CSS selector or DOM element
-   * @param {string}             pdfUrl     Remote or local PDF URL
-   * @param {object}             [options]  See DEFAULTS
-   */
   constructor(container, pdfUrl, options = {}) {
     if (!pdfUrl) throw new Error("[PdfFlipbook] pdfUrl is required");
     this._el = typeof container === "string" ? document.querySelector(container) : container;
-    if (!this._el) throw new Error(`[PdfFlipbook] container not found: ${container}`);
+    if (!this._el) throw new Error("[PdfFlipbook] container not found");
     this._url = pdfUrl;
     this._opts = { ...DEFAULTS, ...options };
     this._pages = [];
-    this._pdf = null;
     this._total = 0;
     this._spread = 0;
-    this._flipping = false;
+    this._flip = null;
+    this._raf = null;
+    this._aspect = 1.414;
     this._init();
   }
-  // ── Static workerSrc override ──────────────────────────────────────────────
   static set workerSrc(src) {
     __webpack_exports__GlobalWorkerOptions.workerSrc = src;
   }
-  // ═══ PUBLIC API ═══════════════════════════════════════════════════════════
-  /** Go to the next spread */
   next() {
-    this._flip(1);
+    if (!this._flip) this._startFlip(1);
   }
-  /** Go to the previous spread */
   prev() {
-    this._flip(-1);
+    if (!this._flip) this._startFlip(-1);
   }
-  /** Jump directly to a page (1-indexed) */
-  goTo(pageNum) {
-    const target = clamp(pageNum - 1, 0, this._total - 1);
-    const targetSpread = even(target);
-    if (targetSpread === this._spread) return;
-    const dir = targetSpread > this._spread ? 1 : -1;
-    this._animateFlip(dir, targetSpread);
+  goTo(n) {
+    const idx = clamp(n - 1, 0, this._total - 1);
+    const s = idx % 2 === 0 ? idx : idx - 1;
+    if (s !== this._spread && !this._flip) this._startFlip(s > this._spread ? 1 : -1, s);
   }
-  /** Destroy the flipbook and clean up */
   destroy() {
-    this._el.innerHTML = "";
-    this._el.classList.remove("pfb", `pfb--${this._opts.theme}`);
-    this._pages = [];
-    window.removeEventListener("resize", this._onResize);
+    cancelAnimationFrame(this._raf);
     window.removeEventListener("keydown", this._onKey);
+    window.removeEventListener("resize", this._onResize);
+    this._el.innerHTML = "";
   }
-  // ═══ PRIVATE ══════════════════════════════════════════════════════════════
   async _init() {
     this._buildShell();
     try {
-      await this._loadPdf();
+      await this._load();
       this._bindEvents();
+      this._raf = requestAnimationFrame(() => this._loop());
       this._opts.onReady?.();
-    } catch (err) {
-      console.error("[PdfFlipbook]", err);
-      this._showError(err.message);
-      this._opts.onError?.(err);
+    } catch (e) {
+      console.error("[PdfFlipbook]", e);
+      this._showError(e.message);
+      this._opts.onError?.(e);
     }
   }
-  // ── DOM Shell ──────────────────────────────────────────────────────────────
   _buildShell() {
     this._el.classList.add("pfb", `pfb--${this._opts.theme}`);
     this._el.innerHTML = `
       <div class="pfb__stage">
-        <div class="pfb__book">
-          <div class="pfb__page pfb__page--left">
-            <div class="pfb__page-front"></div>
-            <div class="pfb__page-back"></div>
-            <div class="pfb__shadow pfb__shadow--left"></div>
-          </div>
-          <div class="pfb__spine"></div>
-          <div class="pfb__page pfb__page--right">
-            <div class="pfb__page-front"></div>
-            <div class="pfb__page-back"></div>
-            <div class="pfb__shadow pfb__shadow--right"></div>
-          </div>
-        </div>
-        <button class="pfb__btn pfb__btn--prev" aria-label="Previous page">&#8592;</button>
-        <button class="pfb__btn pfb__btn--next" aria-label="Next page">&#8594;</button>
-        <div class="pfb__loader">
-          <div class="pfb__spinner"></div>
-          <span class="pfb__loader-text">Loading PDF\u2026</span>
-        </div>
+        <canvas class="pfb__canvas"></canvas>
+        <button class="pfb__btn pfb__btn--prev">&#8592;</button>
+        <button class="pfb__btn pfb__btn--next">&#8594;</button>
+        <button class="pfb__btn--fs" aria-label="Fullscreen">&#x26F6;</button>
+        <div class="pfb__loader"><div class="pfb__spinner"></div><span class="pfb__loader-text">Loading\u2026</span></div>
         <div class="pfb__error" hidden></div>
       </div>
-      ${this._opts.toolbar ? `
-      <div class="pfb__toolbar">
-        <button class="pfb__tb-btn pfb__tb-prev" aria-label="Previous">&#8592;</button>
+      ${this._opts.toolbar ? `<div class="pfb__toolbar">
+        <button class="pfb__tb-btn pfb__tb-prev">&#8592;</button>
         <span class="pfb__page-info"></span>
-        <button class="pfb__tb-btn pfb__tb-next" aria-label="Next">&#8594;</button>
-      </div>` : ""}
-    `;
+        <button class="pfb__tb-btn pfb__tb-next">&#8594;</button>
+      </div>` : ""}`;
     this._stage = this._el.querySelector(".pfb__stage");
-    this._book = this._el.querySelector(".pfb__book");
+    this._canvas = this._el.querySelector(".pfb__canvas");
+    this._ctx = this._canvas.getContext("2d");
     this._loader = this._el.querySelector(".pfb__loader");
+    this._loaderT = this._el.querySelector(".pfb__loader-text");
     this._errorEl = this._el.querySelector(".pfb__error");
-    this._pageInfo = this._el.querySelector(".pfb__page-info");
-    this._leftFront = this._el.querySelector(".pfb__page--left .pfb__page-front");
-    this._leftBack = this._el.querySelector(".pfb__page--left .pfb__page-back");
-    this._leftShadow = this._el.querySelector(".pfb__shadow--left");
-    this._rightFront = this._el.querySelector(".pfb__page--right .pfb__page-front");
-    this._rightBack = this._el.querySelector(".pfb__page--right .pfb__page-back");
-    this._rightShadow = this._el.querySelector(".pfb__shadow--right");
-  }
-  // ── PDF Loading ────────────────────────────────────────────────────────────
-  async _loadPdf() {
-    const loadingTask = __webpack_exports__getDocument({ url: this._url, withCredentials: false });
-    this._pdf = await loadingTask.promise;
-    this._total = this._pdf.numPages;
-    await this._prerenderAll();
-    this._loader.hidden = true;
-    this._renderSpread(0, false);
-  }
-  async _prerenderAll() {
-    this._loaderText = this._el.querySelector(".pfb__loader-text");
+    this._pgInfo = this._el.querySelector(".pfb__page-info");
+    this._resizeCanvas();
+  }
+  _resizeCanvas() {
+    const w = this._stage.clientWidth || 900;
+    const h = this._stage.clientHeight || 560;
+    this._canvas.width = w;
+    this._canvas.height = h;
+    this._canvas.style.width = w + "px";
+    this._canvas.style.height = h + "px";
+  }
+  async _load() {
+    const pdf = await __webpack_exports__getDocument({ url: this._url, withCredentials: false }).promise;
+    this._total = pdf.numPages;
+    const fp = await pdf.getPage(1);
+    const vp0 = fp.getViewport({ scale: 1 });
+    this._aspect = vp0.height / vp0.width;
     for (let i = 1; i <= this._total; i++) {
-      const canvas = await this._renderPage(i);
-      this._pages.push(canvas);
-      if (this._loaderText) {
-        this._loaderText.textContent = `Loading ${i} / ${this._total}\u2026`;
-      }
-    }
-  }
-  async _renderPage(pageNum) {
-    const page = await this._pdf.getPage(pageNum);
-    const dpr = clamp(window.devicePixelRatio || 1, 1, this._opts.maxDpr);
-    const viewport = page.getViewport({ scale: 1 });
-    const baseW = 900;
-    const scale = baseW / viewport.width;
-    const vp = page.getViewport({ scale: scale * dpr });
-    const canvas = document.createElement("canvas");
-    canvas.width = vp.width;
-    canvas.height = vp.height;
-    canvas.style.width = `${vp.width / dpr}px`;
-    canvas.style.height = `${vp.height / dpr}px`;
-    canvas.dataset.pageNum = pageNum;
-    const ctx = canvas.getContext("2d");
-    await page.render({ canvasContext: ctx, viewport: vp }).promise;
-    return canvas;
-  }
-  // ── Spread Rendering ───────────────────────────────────────────────────────
-  _renderSpread(spreadIndex, animate) {
-    this._spread = clamp(spreadIndex, 0, even(this._total - 1) || 0);
-    const leftIdx = this._spread;
-    const rightIdx = this._spread + 1;
-    this._setFace(this._leftFront, leftIdx);
-    this._setFace(this._rightFront, rightIdx);
-    this._setFace(this._leftBack, null);
-    this._setFace(this._rightBack, null);
+      if (this._loaderT) this._loaderT.textContent = `Loading ${i} / ${this._total}\u2026`;
+      const page = await pdf.getPage(i);
+      const dpr = clamp(window.devicePixelRatio || 1, 1, this._opts.maxDpr);
+      const W = 1200 * dpr;
+      const vp = page.getViewport({ scale: W / vp0.width });
+      const cvs = document.createElement("canvas");
+      cvs.width = vp.width;
+      cvs.height = vp.height;
+      await page.render({ canvasContext: cvs.getContext("2d"), viewport: vp }).promise;
+      this._pages.push(cvs);
+    }
+    this._loader.hidden = true;
     this._updateUI();
   }
-  _setFace(face, pageIndex) {
-    face.innerHTML = "";
-    if (pageIndex === null || pageIndex >= this._total) {
-      face.classList.add("pfb__face--blank");
+  // ── Layout ────────────────────────────────────────────────────────────────
+  _bookLayout() {
+    const cW = this._canvas.width;
+    const cH = this._canvas.height;
+    const mob = cW < 560;
+    const arrowPad = mob ? 48 : 64;
+    const maxW = cW - arrowPad * 2;
+    let pH = cH - 8;
+    let pW = Math.floor(pH / this._aspect);
+    if (!mob && pW * 2 > maxW) {
+      pW = Math.floor(maxW / 2);
+      pH = Math.floor(pW * this._aspect);
+    }
+    if (mob && pW > maxW) {
+      pW = maxW;
+      pH = Math.floor(pW * this._aspect);
+    }
+    const bx = Math.floor((cW - (mob ? pW : pW * 2)) / 2);
+    const by = Math.floor((cH - pH) / 2);
+    return { bx, by, pW, pH, mob };
+  }
+  // ── Render loop ───────────────────────────────────────────────────────────
+  _loop() {
+    this._draw();
+    this._raf = requestAnimationFrame(() => this._loop());
+  }
+  _draw() {
+    const ctx = this._ctx;
+    ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+    if (!this._total) return;
+    const { bx, by, pW, pH, mob } = this._bookLayout();
+    if (mob) {
+      this._blitPage(ctx, this._pages[this._spread] || null, bx, by, pW, pH);
       return;
     }
-    face.classList.remove("pfb__face--blank");
-    const canvas = this._pages[pageIndex];
-    if (canvas) {
-      const clone = canvas.cloneNode();
-      clone.getContext("2d").drawImage(canvas, 0, 0);
-      face.appendChild(clone);
-    }
-  }
-  // ── Flip Animation ────────────────────────────────────────────────────────
-  _flip(dir) {
-    if (this._flipping) return;
-    const next = this._spread + dir * 2;
-    if (next < 0 || next > even(this._total - 1)) return;
-    this._animateFlip(dir, next);
-  }
-  _animateFlip(dir, targetSpread) {
-    if (this._flipping) return;
-    this._flipping = true;
-    const { flipDuration, shadowIntensity, onFlip } = this._opts;
-    const currentLeft = this._spread;
-    const currentRight = this._spread + 1;
-    onFlip?.(currentLeft + 1, targetSpread + 1);
+    if (!this._flip) {
+      this._drawSpread(ctx, this._spread, bx, by, pW, pH);
+    } else {
+      this._drawFlip(ctx, bx, by, pW, pH);
+    }
+  }
+  // ── Draw a static spread ──────────────────────────────────────────────────
+  _drawSpread(ctx, spread, bx, by, pW, pH) {
+    this._blitPage(ctx, this._pages[spread] || null, bx, by, pW, pH);
+    this._blitPage(ctx, this._pages[spread + 1] || null, bx + pW, by, pW, pH);
+    this._drawSpineAndShadow(ctx, bx, by, pW, pH);
+  }
+  _blitPage(ctx, cvs, x, y, w, h) {
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(x, y, w, h);
+    if (cvs) ctx.drawImage(cvs, x, y, w, h);
+  }
+  _drawSpineAndShadow(ctx, bx, by, pW, pH) {
+    const sx = bx + pW;
+    const sg = ctx.createLinearGradient(sx - 18, 0, sx + 18, 0);
+    sg.addColorStop(0, "rgba(0,0,0,0)");
+    sg.addColorStop(0.35, "rgba(0,0,0,0.12)");
+    sg.addColorStop(0.5, "rgba(0,0,0,0.18)");
+    sg.addColorStop(0.65, "rgba(0,0,0,0.12)");
+    sg.addColorStop(1, "rgba(0,0,0,0)");
+    ctx.fillStyle = sg;
+    ctx.fillRect(sx - 18, by, 36, pH);
+    const dg = ctx.createLinearGradient(0, by + pH - 4, 0, by + pH + 38);
+    dg.addColorStop(0, "rgba(0,0,0,0.38)");
+    dg.addColorStop(1, "rgba(0,0,0,0)");
+    ctx.fillStyle = dg;
+    ctx.fillRect(bx - 16, by + pH - 4, pW * 2 + 32, 42);
+  }
+  // ── Flip render ───────────────────────────────────────────────────────────
+  _drawFlip(ctx, bx, by, pW, pH) {
+    const f = this._flip;
+    const t = easeInOut(f.progress);
+    const dir = f.dir;
+    const srcSpread = f.src;
+    const destSpread = f.dest;
+    const srcL = this._pages[srcSpread] || null;
+    const srcR = this._pages[srcSpread + 1] || null;
+    const dstL = this._pages[destSpread] || null;
+    const dstR = this._pages[destSpread + 1] || null;
+    const spine = bx + pW;
     if (dir === 1) {
-      this._setFace(this._rightBack, targetSpread + 1);
-      this._setFace(this._leftBack, targetSpread);
+      this._blitPage(ctx, dstR, spine, by, pW, pH);
+      this._blitPage(ctx, srcL, bx, by, pW, pH);
+      if (t <= 0.5) {
+        const frontT = 1 - t * 2;
+        const frontW = Math.floor(pW * frontT);
+        if (frontW > 0) {
+          ctx.save();
+          ctx.beginPath();
+          ctx.rect(spine, by, frontW, pH);
+          ctx.clip();
+          this._blitPage(ctx, srcR, spine, by, pW, pH);
+          ctx.restore();
+        }
+        const shadowW = Math.min(80, pW * 0.3) * (1 - frontT);
+        if (shadowW > 0) {
+          const shadowX = spine - shadowW;
+          const sg = ctx.createLinearGradient(spine, 0, shadowX, 0);
+          sg.addColorStop(0, "rgba(0,0,0,0.38)");
+          sg.addColorStop(0.5, "rgba(0,0,0,0.12)");
+          sg.addColorStop(1, "rgba(0,0,0,0)");
+          ctx.fillStyle = sg;
+          ctx.fillRect(shadowX, by, shadowW, pH);
+        }
+        const cx = spine + frontW;
+        this._drawCrease(ctx, cx, by, pH, "right");
+      } else {
+        const backT = (t - 0.5) * 2;
+        const backW = Math.floor(pW * backT);
+        if (backW > 0) {
+          const backX = spine - backW;
+          ctx.save();
+          ctx.beginPath();
+          ctx.rect(backX, by, backW, pH);
+          ctx.clip();
+          ctx.save();
+          ctx.translate(spine, by);
+          ctx.scale(-1, 1);
+          this._blitPage(ctx, dstL, 0, 0, pW, pH);
+          ctx.fillStyle = `rgba(0,0,0,${0.08 + 0.12 * backT})`;
+          ctx.fillRect(0, 0, pW, pH);
+          ctx.restore();
+          ctx.restore();
+        }
+        const shadowW = Math.min(80, pW * 0.3) * (1 - backT);
+        if (shadowW > 0) {
+          const shadowX = spine - backW - shadowW;
+          const sg = ctx.createLinearGradient(spine - backW, 0, shadowX, 0);
+          sg.addColorStop(0, "rgba(0,0,0,0.3)");
+          sg.addColorStop(1, "rgba(0,0,0,0)");
+          ctx.fillStyle = sg;
+          ctx.fillRect(Math.max(bx, shadowX), by, Math.min(shadowW, spine - backW - bx), pH);
+        }
+        const cx = spine - backW;
+        this._drawCrease(ctx, cx, by, pH, "left");
+      }
+    } else {
+      this._blitPage(ctx, dstL, bx, by, pW, pH);
+      this._blitPage(ctx, srcR, spine, by, pW, pH);
+      if (t <= 0.5) {
+        const frontT = 1 - t * 2;
+        const frontW = Math.floor(pW * frontT);
+        const frontX = spine - frontW;
+        if (frontW > 0) {
+          ctx.save();
+          ctx.beginPath();
+          ctx.rect(frontX, by, frontW, pH);
+          ctx.clip();
+          this._blitPage(ctx, srcL, bx, by, pW, pH);
+          ctx.restore();
+        }
+        const shadowW = Math.min(80, pW * 0.3) * (1 - frontT);
+        if (shadowW > 0) {
+          const sg = ctx.createLinearGradient(spine, 0, spine + shadowW, 0);
+          sg.addColorStop(0, "rgba(0,0,0,0.38)");
+          sg.addColorStop(0.5, "rgba(0,0,0,0.12)");
+          sg.addColorStop(1, "rgba(0,0,0,0)");
+          ctx.fillStyle = sg;
+          ctx.fillRect(spine, by, shadowW, pH);
+        }
+        const cx = spine - frontW;
+        this._drawCrease(ctx, cx, by, pH, "left");
+      } else {
+        const backT = (t - 0.5) * 2;
+        const backW = Math.floor(pW * backT);
+        const backX = spine;
+        if (backW > 0) {
+          ctx.save();
+          ctx.beginPath();
+          ctx.rect(backX, by, backW, pH);
+          ctx.clip();
+          ctx.save();
+          ctx.translate(spine, by);
+          ctx.scale(-1, 1);
+          ctx.translate(-pW, 0);
+          this._blitPage(ctx, dstR, 0, 0, pW, pH);
+          ctx.fillStyle = `rgba(0,0,0,${0.08 + 0.12 * backT})`;
+          ctx.fillRect(0, 0, pW, pH);
+          ctx.restore();
+          ctx.restore();
+        }
+        const shadowW = Math.min(80, pW * 0.3) * (1 - backT);
+        if (shadowW > 0) {
+          const shadowEdge = spine + backW + shadowW;
+          const sg = ctx.createLinearGradient(spine + backW, 0, shadowEdge, 0);
+          sg.addColorStop(0, "rgba(0,0,0,0.3)");
+          sg.addColorStop(1, "rgba(0,0,0,0)");
+          ctx.fillStyle = sg;
+          ctx.fillRect(spine + backW, by, Math.min(shadowW, bx + pW * 2 - spine - backW), pH);
+        }
+        const cx = spine + backW;
+        this._drawCrease(ctx, cx, by, pH, "right");
+      }
+    }
+    this._drawSpineAndShadow(ctx, bx, by, pW, pH);
+  }
+  _drawCrease(ctx, cx, by, pH, highlightSide) {
+    const w = 10;
+    const g = ctx.createLinearGradient(cx - w, 0, cx + w, 0);
+    if (highlightSide === "right") {
+      g.addColorStop(0, "rgba(0,0,0,0)");
+      g.addColorStop(0.35, "rgba(0,0,0,0.28)");
+      g.addColorStop(0.55, "rgba(255,255,255,0.22)");
+      g.addColorStop(1, "rgba(0,0,0,0)");
     } else {
-      this._setFace(this._leftBack, targetSpread);
-      this._setFace(this._rightBack, targetSpread + 1);
-    }
-    const flippingPage = dir === 1 ? this._el.querySelector(".pfb__page--right") : this._el.querySelector(".pfb__page--left");
-    const shadow2 = dir === 1 ? this._rightShadow : this._leftShadow;
-    const startAngle = 0;
-    const endAngle = dir === 1 ? -180 : 180;
-    const easeInOut = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-    let startTime = null;
+      g.addColorStop(0, "rgba(0,0,0,0)");
+      g.addColorStop(0.45, "rgba(255,255,255,0.22)");
+      g.addColorStop(0.65, "rgba(0,0,0,0.28)");
+      g.addColorStop(1, "rgba(0,0,0,0)");
+    }
+    ctx.fillStyle = g;
+    ctx.fillRect(cx - w, by, w * 2, pH);
+  }
+  // ── Flip state ────────────────────────────────────────────────────────────
+  _startFlip(dir, dest) {
+    if (this._flip || !this._total) return;
+    const target = dest !== void 0 ? dest : this._spread + dir * 2;
+    if (target < 0 || target + 1 > this._total) return;
+    this._opts.onFlip?.(this._spread + 1, target + 1);
+    this._flip = { dir, src: this._spread, dest: target, progress: 0, start: null };
+    const duration = this._opts.flippingTime;
     const step = (ts) => {
-      if (!startTime) startTime = ts;
-      const elapsed = ts - startTime;
-      const progress = clamp(elapsed / flipDuration, 0, 1);
-      const eased = easeInOut(progress);
-      const angle = startAngle + (endAngle - startAngle) * eased;
-      flippingPage.style.transform = `rotateY(${angle}deg)`;
-      const shadowPeak = Math.sin(progress * Math.PI);
-      shadow2.style.opacity = shadowPeak * shadowIntensity;
-      if (progress < 1) {
-        requestAnimationFrame(step);
+      if (!this._flip) return;
+      if (!this._flip.start) this._flip.start = ts;
+      this._flip.progress = clamp((ts - this._flip.start) / duration, 0, 1);
+      if (this._flip.progress >= 1) {
+        this._spread = target;
+        this._flip = null;
+        this._updateUI();
       } else {
-        flippingPage.style.transform = "";
-        shadow2.style.opacity = 0;
-        this._spread = targetSpread;
-        this._flipping = false;
-        this._renderSpread(targetSpread, false);
+        requestAnimationFrame(step);
       }
     };
     requestAnimationFrame(step);
   }
   // ── Events ────────────────────────────────────────────────────────────────
   _bindEvents() {
-    const prevBtns = this._el.querySelectorAll(".pfb__btn--prev, .pfb__tb-prev");
-    const nextBtns = this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next");
-    prevBtns.forEach((b) => b.addEventListener("click", () => this.prev()));
-    nextBtns.forEach((b) => b.addEventListener("click", () => this.next()));
+    this._el.querySelectorAll(".pfb__btn--prev, .pfb__tb-prev").forEach((b) => b.addEventListener("click", () => this.prev()));
+    this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next").forEach((b) => b.addEventListener("click", () => this.next()));
+    const fsBtn = this._el.querySelector(".pfb__btn--fs");
+    if (fsBtn) {
+      fsBtn.addEventListener("click", () => {
+        if (!document.fullscreenElement) {
+          this._el.requestFullscreen?.() || this._el.webkitRequestFullscreen?.();
+        } else {
+          document.exitFullscreen?.() || document.webkitExitFullscreen?.();
+        }
+      });
+    }
     this._onKey = (e) => {
-      if (e.key === "ArrowRight" || e.key === "ArrowDown") this.next();
-      if (e.key === "ArrowLeft" || e.key === "ArrowUp") this.prev();
+      if (["ArrowRight", "ArrowDown"].includes(e.key)) this.next();
+      if (["ArrowLeft", "ArrowUp"].includes(e.key)) this.prev();
     };
     window.addEventListener("keydown", this._onKey);
-    if (isTouchDevice()) this._bindSwipe();
-    this._onResize = () => this._updateUI();
-    window.addEventListener("resize", this._onResize);
-  }
-  _bindSwipe() {
-    let startX = 0;
-    this._stage.addEventListener("touchstart", (e) => {
-      startX = e.touches[0].clientX;
+    this._canvas.addEventListener("click", (e) => {
+      if (this._flip) return;
+      const rect = this._canvas.getBoundingClientRect();
+      if (e.clientX - rect.left < this._canvas.width / 2) this.prev();
+      else this.next();
+    });
+    let tx = 0;
+    this._canvas.addEventListener("touchstart", (e) => {
+      tx = e.touches[0].clientX;
     }, { passive: true });
-    this._stage.addEventListener("touchend", (e) => {
-      const dx = e.changedTouches[0].clientX - startX;
+    this._canvas.addEventListener("touchend", (e) => {
+      const dx = e.changedTouches[0].clientX - tx;
       if (Math.abs(dx) > 40) dx < 0 ? this.next() : this.prev();
     }, { passive: true });
+    this._onResize = () => this._resizeCanvas();
+    window.addEventListener("resize", this._onResize);
   }
-  // ── UI Helpers ────────────────────────────────────────────────────────────
   _updateUI() {
-    if (!this._pageInfo) return;
-    const leftPage = this._spread + 1;
-    const rightPage = this._spread + 2;
-    if (rightPage <= this._total) {
-      this._pageInfo.textContent = `${leftPage} \u2013 ${rightPage} / ${this._total}`;
-    } else {
-      this._pageInfo.textContent = `${leftPage} / ${this._total}`;
+    const i = this._spread;
+    const r = i + 2;
+    if (this._pgInfo) {
+      this._pgInfo.textContent = r <= this._total ? `${i + 1} \u2013 ${r} / ${this._total}` : `${i + 1} / ${this._total}`;
     }
-    const prevBtns = this._el.querySelectorAll(".pfb__btn--prev, .pfb__tb-prev");
-    const nextBtns = this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next");
-    prevBtns.forEach((b) => {
-      b.disabled = this._spread === 0;
+    this._el.querySelectorAll(".pfb__btn--prev, .pfb__tb-prev").forEach((b) => {
+      b.disabled = i <= 0;
     });
-    nextBtns.forEach((b) => {
-      b.disabled = this._spread + 2 >= this._total;
+    this._el.querySelectorAll(".pfb__btn--next, .pfb__tb-next").forEach((b) => {
+      b.disabled = i + 2 >= this._total;
     });
   }
   _showError(msg) {
     this._loader.hidden = true;
     this._errorEl.hidden = false;
-    this._errorEl.textContent = `\u26A0\uFE0F Could not load PDF: ${msg}`;
+    this._errorEl.textContent = `\u26A0\uFE0F ${msg}`;
   }
 };
 function createFlipbook(container, pdfUrl, options) {