@zinejs/core 0.7.3 → 0.7.4

package/dist/index.js

@@ -282,7 +282,7 @@ function w(e, t) {
 //#region src/renderer/select.ts
 var T = {
 	css: async () => new (await (import("./cssRenderer-Deskm2ND.js"))).CssRenderer(),
-	webgl2: async () => new (await (import("./webglRenderer-D_XGumQT.js"))).WebglRenderer()
+	webgl2: async () => new (await (import("./webglRenderer-nGRruZk2.js"))).WebglRenderer()
 }, E = !0;
 function ee(e) {
 	return typeof e == "object" && !!e && !Array.isArray(e) && typeof e.mount == "function";
@@ -331,6 +331,7 @@ var M = class {
 	#a = /* @__PURE__ */ new Map();
 	open;
 	onPageUpdate;
+	onProgress;
 	getText;
 	getDownload;
 	getOutline;
@@ -339,7 +340,7 @@ var M = class {
 			await e.open(), this.#o();
 		} : this.#o(), typeof e.onPageUpdate == "function" && (this.onPageUpdate = (t) => {
 			e.onPageUpdate((e) => t(e + (this.#t === null ? 0 : 1)));
-		}), typeof e.getText == "function" && (this.getText = async (t) => {
+		}), typeof e.onProgress == "function" && (this.onProgress = (t) => e.onProgress(t)), typeof e.getText == "function" && (this.getText = async (t) => {
 			let n = this.#t === null ? 0 : 1;
 			if (this.#t !== null && t === 0 || this.#n !== null && t === this.pageCount - 1) return "";
 			let r = t - n;
@@ -469,10 +470,14 @@ var J = class {
 	#le = /* @__PURE__ */ new Set();
 	#ue;
 	#de = null;
-	#fe = 1;
-	#pe = 0;
+	#fe;
+	#pe = null;
 	#me = null;
-	#he;
+	#he = "download";
+	#ge = 1;
+	#_e = 0;
+	#ve = null;
+	#ye;
 	debug = { setFlipProgress: (e, t) => {
 		this.#z?.setFlipProgress(e, t);
 	} };
@@ -483,7 +488,7 @@ var J = class {
 			pages: t.pages
 		});
 		let n = t.direction ?? "ltr";
-		this.#a = n, this.#x = (t.deepLink ?? !0) && b(), this.#S = t.disableContextMenu ?? !1, this.#o = t.spreadMode ?? "cover", this.#s = this.#o, this.#c = t.curl ?? "cone", this.#u = t.clickToFlip ?? "edge", this.#d = t.clickZoneSize ?? 64, this.#m = t.singlePageThreshold ?? 640, this.#v = t.responsiveSpread ?? !0, this.#ue = t.controls ?? !0, this.#b = t.startPage, typeof this.#t.open != "function" && this.#xt(), this.#k = t.flipDuration ?? 800, this.#A = t.zoom?.enabled ?? !0, this.#j = t.zoom?.wheel ?? !0;
+		this.#a = n, this.#x = (t.deepLink ?? !0) && b(), this.#S = t.disableContextMenu ?? !1, this.#o = t.spreadMode ?? "cover", this.#s = this.#o, this.#c = t.curl ?? "cone", this.#u = t.clickToFlip ?? "edge", this.#d = t.clickZoneSize ?? 64, this.#m = t.singlePageThreshold ?? 640, this.#v = t.responsiveSpread ?? !0, this.#ue = t.controls ?? !0, this.#fe = t.loading ?? !0, this.#b = t.startPage, typeof this.#t.open != "function" && this.#jt(), this.#k = t.flipDuration ?? 800, this.#A = t.zoom?.enabled ?? !0, this.#j = t.zoom?.wheel ?? !0;
 		let r = t.zoom?.doubleClick, i = r === !1 ? [] : [...r ?? [
 			1,
 			2,
@@ -491,10 +496,10 @@ var J = class {
 		]].sort((e, t) => e - t);
 		this.#M = i.length > 0 ? i : null, this.#N = t.zoom?.max ?? 4;
 		let a = this.#A && this.#M !== null, o = t.zoom?.doubleClickInFlipZone ?? this.#u === "half";
-		this.#f = this.#u !== "off" && a && o && t.clickFlipDelay !== 0, this.#p = this.#f ? t.clickFlipDelay ?? I : 0, this.#he = this.#Ke(t.renderer ?? "auto");
+		this.#f = this.#u !== "off" && a && o && t.clickFlipDelay !== 0, this.#p = this.#f ? t.clickFlipDelay ?? I : 0, this.#ye = this.#Qe(t.renderer ?? "auto");
 	}
 	get ready() {
-		return this.#he;
+		return this.#ye;
 	}
 	getPageCount() {
 		return this.#t.pageCount;
@@ -521,7 +526,7 @@ var J = class {
 		return this.#h;
 	}
 	setSpreadMode(e) {
-		e !== this.#o && (this.#o = e, this.#_ = !1, this.#at(), this.#ot());
+		e !== this.#o && (this.#o = e, this.#_ = !1, this.#ht(), this.#gt());
 	}
 	toggleSpreadMode() {
 		this.setSpreadMode(this.#o === "single" ? this.#s === "single" ? "double" : this.#s : "single");
@@ -537,16 +542,16 @@ var J = class {
 			if (this.#v = e, e) {
 				let e = this.#z?.measure().containerWidth;
 				if (e === void 0) return;
-				this.#_ = !1, this.#it(e);
+				this.#_ = !1, this.#mt(e);
 			} else {
 				if (!this.#_) return;
-				this.#_ = !1, this.#at();
+				this.#_ = !1, this.#ht();
 			}
-			this.#ot();
+			this.#gt();
 		}
 	}
 	getPageImage(e) {
-		return this.#vt(e);
+		return this.#Ot(e);
 	}
 	canFlipNext() {
 		return this.#E + 1 < this.#T.length;
@@ -636,29 +641,29 @@ var J = class {
 		return a;
 	}
 	flipNext() {
-		this.#ge(1);
+		this.#be(1);
 	}
 	flipPrev() {
-		this.#ge(-1);
+		this.#be(-1);
 	}
-	#ge(e) {
-		this.#_e(() => this.#xe(this.#E + e));
+	#be(e) {
+		this.#xe(() => this.#Ee(this.#E + e));
 	}
 	flipTo(e) {
 		let t = Y(e, 0, Math.max(0, this.#t.pageCount - 1));
-		this.#_e(() => this.#xe(this.#bt(t)));
+		this.#xe(() => this.#Ee(this.#At(t)));
 	}
-	#_e(e) {
-		this.#i.state === "idle" ? e() : this.#J ? (this.#q = null, this.#ve(), e()) : this.#q = e;
+	#xe(e) {
+		this.#i.state === "idle" ? e() : this.#J ? (this.#q = null, this.#Se(), e()) : this.#q = e;
 	}
-	#ve() {
+	#Se() {
 		let e = this.#J;
 		e && (this.#J = null, this.#H !== null && (cancelAnimationFrame(this.#H), this.#H = null), this.#z?.setFlipProgress(e.toT, e.direction), e.onDone());
 	}
-	#ye() {
+	#Ce() {
 		let e = this.#q;
 		if (!e) {
-			this.#mt();
+			this.#wt();
 			return;
 		}
 		this.#q = null, e();
@@ -675,12 +680,15 @@ var J = class {
 			x: r.containerWidth / 2,
 			y: r.containerHeight / 2
 		}, o = this.#I, s = n === 1 ? 0 : a.x - n / o * (a.x - this.#L), c = n === 1 ? 0 : a.y - n / o * (a.y - this.#R);
-		[s, c] = this.#be(s, c, n, r.containerWidth, r.containerHeight), this.#I = n, this.#L = s, this.#R = c, this.#z.setViewTransform(n, s, c), this.#ut(), this.#n.emit("zoomChanged", { scale: n });
+		[s, c] = this.#Te(s, c, n, r.containerWidth, r.containerHeight), this.#I = n, this.#L = s, this.#R = c, this.#z.setViewTransform(n, s, c), o > 1 != n > 1 && this.#we(), this.#bt(), this.#n.emit("zoomChanged", { scale: n });
 	}
 	resetZoom() {
 		this.setZoom(1);
 	}
-	#be(e, t, n, r, i) {
+	#we() {
+		this.#e.style.touchAction = this.#I > 1 ? "none" : "pan-y";
+	}
+	#Te(e, t, n, r, i) {
 		let a = typeof devicePixelRatio == "number" && devicePixelRatio > 0 ? devicePixelRatio : 1, o = (e) => Math.round(e * a) / a || 0, s = this.#z?.measure().screenAt?.(n) ?? {
 			x: 0,
 			y: 0,
@@ -693,29 +701,29 @@ var J = class {
 		return this.#n.on(e, t);
 	}
 	destroy() {
-		this.#V = !0, this.#H !== null && cancelAnimationFrame(this.#H), this.#J = null, this.#q = null, this.#Le(), this.#P?.disconnect(), this.#C?.stop(), this.#C = null, this.#w?.(), this.#x && x(), this.#de?.(), this.#se?.(), this.#ne?.(), this.#ie?.(), this.#re?.(), this.#te?.(), this.#me !== null && clearTimeout(this.#me), this.#pe++, this.#z?.destroy(), this.#z = null, this.#t.destroy(), this.#n.clear();
+		this.#V = !0, this.#H !== null && cancelAnimationFrame(this.#H), this.#J = null, this.#q = null, this.#Ue(), this.#P?.disconnect(), this.#C?.stop(), this.#C = null, this.#w?.(), this.#x && x(), this.#de?.(), this.#nt(), this.#se?.(), this.#ne?.(), this.#ie?.(), this.#re?.(), this.#te?.(), this.#ve !== null && clearTimeout(this.#ve), this.#_e++, this.#z?.destroy(), this.#z = null, this.#t.destroy(), this.#n.clear();
 	}
-	#xe(e) {
+	#Ee(e) {
 		if (e < 0 || e >= this.#T.length || e === this.#E || this.#i.send("flip") === null) return;
-		let t = e > this.#E ? "forward" : "backward", n = this.#Ee(e);
+		let t = e > this.#E ? "forward" : "backward", n = this.#je(e);
 		this.#n.emit("flipStart", {
 			from: this.#D,
 			to: n
-		}), this.#Se(e, t, n, ++this.#Y);
+		}), this.#De(e, t, n, ++this.#Y);
 	}
-	async #Se(e, t, n, r) {
-		let i = this.#T[e], a = i ? await this.#_t(i) : {
+	async #De(e, t, n, r) {
+		let i = this.#T[e], a = i ? await this.#Dt(i) : {
 			left: null,
 			right: null
 		};
 		r === this.#Y && (this.#z?.beginFlip(this.#O, a, t, {
 			fill: this.#h,
-			curl: this.#nt(),
+			curl: this.#ft(),
 			anchor: { y: this.#l }
-		}), this.#Ce(0, 1, t, () => this.#Te(e, n, a), () => this.#we(n)));
+		}), this.#Oe(0, 1, t, () => this.#Ae(e, n, a), () => this.#ke(n)));
 	}
-	#Ce(e, t, n, r, i) {
-		let a = this.#tt() * Math.abs(t - e);
+	#Oe(e, t, n, r, i) {
+		let a = this.#dt() * Math.abs(t - e);
 		if (a <= 0) {
 			this.#z?.setFlipProgress(t, n), r();
 			return;
@@ -733,22 +741,22 @@ var J = class {
 		};
 		this.#H = requestAnimationFrame(l);
 	}
-	#we(e) {
-		this.#D !== e && (this.#D = e, this.#et(), this.#n.emit("pageChanged", { page: e }));
+	#ke(e) {
+		this.#D !== e && (this.#D = e, this.#ut(), this.#n.emit("pageChanged", { page: e }));
 	}
-	#Te(e, t, n) {
+	#Ae(e, t, n) {
 		let r = this.#T[e];
-		this.#E = e, this.#O = n, r && this.#st(r, n), this.#yt(), this.#i.send("settle"), this.#oe = performance.now(), this.#we(t), this.#n.emit("flipEnd", { page: t }), this.#ye();
+		this.#E = e, this.#O = n, r && this.#_t(r, n), this.#kt(), this.#i.send("settle"), this.#oe = performance.now(), this.#ke(t), this.#n.emit("flipEnd", { page: t }), this.#Ce();
 	}
-	#Ee(e) {
+	#je(e) {
 		let t = this.#T[e];
 		if (!t) return this.#D;
 		let n = [t.left, t.right].filter((e) => e !== null);
 		return n.length > 0 ? Math.min(...n) : this.#D;
 	}
-	#De(e, t) {
+	#Me(e, t) {
 		if (this.#Z || !this.#z) return;
-		if (this.#Le(), this.#I > 1) {
+		if (this.#Ue(), this.#I > 1) {
 			if (this.#i.send("panStart") === null) return;
 			this.#X = {
 				baseTx: this.#L,
@@ -756,7 +764,7 @@ var J = class {
 			};
 			return;
 		}
-		let n = this.#Ne(), r = this.#Pe(e, t);
+		let n = this.#ze(), r = this.#Be(e, t);
 		this.#G = r;
 		let i = Math.min(n.width, n.height) * N, a = r.x >= 0 && r.x <= n.width && r.y >= 0 && r.y <= n.height, o = r.x <= i || r.x >= n.width - i, s = a && o;
 		if (this.#i.state !== "idle") {
@@ -764,7 +772,7 @@ var J = class {
 				this.#W = null;
 				return;
 			}
-			this.#ve();
+			this.#Se();
 		}
 		if (!s) return;
 		this.#l = Y(r.y / n.height, 0, 1);
@@ -772,11 +780,11 @@ var J = class {
 		u < 0 || u >= this.#T.length || (this.#W = {
 			direction: l ? "forward" : "backward",
 			targetIndex: u,
-			toPage: this.#Ee(u),
+			toPage: this.#je(u),
 			width: n.width
 		});
 	}
-	#Oe() {
+	#Ne() {
 		let e = this.#W;
 		e && (this.#W = null, this.#i.send("grab") !== null && (this.#U = {
 			direction: e.direction,
@@ -791,32 +799,32 @@ var J = class {
 		}, this.#n.emit("flipStart", {
 			from: this.#D,
 			to: e.toPage
-		}), this.#ke(e.targetIndex, e.direction)));
+		}), this.#Pe(e.targetIndex, e.direction)));
 	}
-	async #ke(e, t) {
-		let n = this.#T[e], r = n ? await this.#_t(n) : {
+	async #Pe(e, t) {
+		let n = this.#T[e], r = n ? await this.#Dt(n) : {
 			left: null,
 			right: null
 		};
 		this.#U?.targetIndex === e && (this.#U.toContent = r, this.#z?.beginFlip(this.#O, r, t, {
 			fill: this.#h,
-			curl: this.#nt(),
+			curl: this.#ft(),
 			anchor: { y: this.#l }
 		}), this.#z?.setFlipProgress(this.#U.t, t));
 	}
-	#Ae(e, t) {
+	#Fe(e, t) {
 		if (this.#Z) return;
 		if (this.#X) {
 			if (!this.#z) return;
-			let n = this.#z.measure(), [r, i] = this.#be(this.#X.baseTx + e, this.#X.baseTy + t, this.#I, n.containerWidth, n.containerHeight);
-			this.#L = r, this.#R = i, this.#z.setViewTransform(this.#I, r, i), this.#ut();
+			let n = this.#z.measure(), [r, i] = this.#Te(this.#X.baseTx + e, this.#X.baseTy + t, this.#I, n.containerWidth, n.containerHeight);
+			this.#L = r, this.#R = i, this.#z.setViewTransform(this.#I, r, i), this.#bt();
 			return;
 		}
-		this.#W && Math.hypot(e, t) > F && this.#Oe();
+		this.#W && Math.hypot(e, t) > F && this.#Ne();
 		let n = this.#U;
 		n && (n.t = Y((n.direction === "forward" ? -e : e) / n.width, 0, 1), this.#z?.setFlipProgress(n.t, n.direction));
 	}
-	#je(e) {
+	#Ie(e) {
 		if (this.#Z) return;
 		if (this.#X) {
 			this.#X = null, this.#i.send("panEnd");
@@ -824,28 +832,35 @@ var J = class {
 		}
 		let t = this.#U;
 		if (!t) {
-			this.#W = null, this.#Me(e);
+			this.#W = null, this.#Le(e) || this.#Re(e);
 			return;
 		}
 		this.#U = null, this.#i.send("release");
-		let n = e.swipe && (t.direction === "forward" ? e.dx < 0 : e.dx > 0);
-		t.t >= .5 || n ? this.#Ce(t.t, 1, t.direction, () => this.#Te(t.targetIndex, t.toPage, t.toContent), () => this.#we(t.toPage)) : this.#Ce(t.t, 0, t.direction, () => this.#Re());
+		let n = e.swipe && Math.abs(e.vx) > Math.abs(e.vy), r = t.direction === "forward" ? e.vx < 0 : e.vx > 0, i = n && r, a = n && !r;
+		i || t.t >= .5 && !a ? this.#Oe(t.t, 1, t.direction, () => this.#Ae(t.targetIndex, t.toPage, t.toContent), () => this.#ke(t.toPage)) : this.#Oe(t.t, 0, t.direction, () => this.#We());
+	}
+	#Le(e) {
+		if (this.#I > 1 || !e.swipe || Math.abs(e.dx) <= Math.abs(e.dy)) return !1;
+		let t = this.#a === "rtl" ? e.dx > 0 : e.dx < 0, n = t ? "forward" : "backward";
+		if (!this.#He(n)) return !1;
+		let r = t ? 1 : -1;
+		return this.#xe(() => this.#Ee(this.#E + r)), !0;
 	}
-	#Me(e) {
+	#Re(e) {
 		if (this.#u === "off" || this.#I > 1 || !this.#G || Math.abs(e.dx) > F || Math.abs(e.dy) > F) return;
-		let t = this.#Fe(this.#G);
-		if (!t || !this.#Ie(t)) return;
-		this.#l = Y(this.#G.y / this.#Ne().height, 0, 1);
-		let n = t === "forward" ? 1 : -1, r = () => this.#xe(this.#E + n);
-		if (this.#Le(), this.#p <= 0) {
-			this.#_e(r);
+		let t = this.#Ve(this.#G);
+		if (!t || !this.#He(t)) return;
+		this.#l = Y(this.#G.y / this.#ze().height, 0, 1);
+		let n = t === "forward" ? 1 : -1, r = () => this.#Ee(this.#E + n);
+		if (this.#Ue(), this.#p <= 0) {
+			this.#xe(r);
 			return;
 		}
 		this.#K = setTimeout(() => {
-			this.#K = null, this.#_e(r);
+			this.#K = null, this.#xe(r);
 		}, this.#p);
 	}
-	#Ne() {
+	#ze() {
 		let e = this.#z.measure();
 		return e.content ?? e.book ?? {
 			x: 0,
@@ -854,40 +869,40 @@ var J = class {
 			height: e.containerHeight
 		};
 	}
-	#Pe(e, t) {
-		let n = this.#e.getBoundingClientRect(), r = this.#Ne();
+	#Be(e, t) {
+		let n = this.#e.getBoundingClientRect(), r = this.#ze();
 		return {
 			x: e - n.left - r.x,
 			y: t - n.top - r.y
 		};
 	}
-	#Fe(e) {
+	#Ve(e) {
 		if (!this.#z) return null;
-		let t = this.#Ne().width, n;
+		let t = this.#ze().width, n;
 		if (n = this.#u === "half" ? e.x > t / 2 ? "right" : "left" : e.x <= this.#d ? "left" : e.x >= t - this.#d ? "right" : null, !n) return null;
 		let r = this.#a === "rtl" ? "left" : "right";
 		return n === r ? "forward" : "backward";
 	}
-	#Ie(e) {
+	#He(e) {
 		let t = this.#E + (e === "forward" ? 1 : -1);
 		return t >= 0 && t < this.#T.length;
 	}
-	#Le() {
+	#Ue() {
 		this.#K !== null && (clearTimeout(this.#K), this.#K = null);
 	}
-	#Re() {
+	#We() {
 		let e = this.#T[this.#E];
-		e && this.#st(e, this.#O), this.#i.send("settle"), this.#n.emit("flipEnd", { page: this.#D }), this.#ye();
+		e && this.#_t(e, this.#O), this.#i.send("settle"), this.#n.emit("flipEnd", { page: this.#D }), this.#Ce();
 	}
-	#ze() {
-		if (this.#W = null, this.#Le(), this.#U) {
+	#Ge() {
+		if (this.#W = null, this.#Ue(), this.#U) {
 			this.#U = null, this.#i.send("release"), this.#i.send("settle");
 			let e = this.#T[this.#E];
-			e && this.#st(e, this.#O);
+			e && this.#_t(e, this.#O);
 		} else this.#X && (this.#X = null, this.#i.send("panEnd"));
 		this.#Z = !0, this.#Q = this.#I;
 	}
-	#Be(e, t, n) {
+	#Ke(e, t, n) {
 		if (!this.#Z) return;
 		let r = this.#e.getBoundingClientRect();
 		this.setZoom(this.#Q * n, {
@@ -895,15 +910,15 @@ var J = class {
 			y: t - r.top
 		});
 	}
-	#Ve() {
+	#qe() {
 		this.#Z = !1;
 	}
-	#He() {
+	#Je() {
 		if (!this.#S) return;
 		let e = (e) => e.preventDefault();
 		this.#e.addEventListener("contextmenu", e), this.#re = () => this.#e.removeEventListener("contextmenu", e);
 	}
-	#Ue() {
+	#Ye() {
 		let e = (e) => {
 			if (!this.#j || !this.#A || !(e.ctrlKey || e.metaKey)) return;
 			e.preventDefault();
@@ -915,7 +930,7 @@ var J = class {
 		};
 		this.#e.addEventListener("wheel", e, { passive: !1 }), this.#ne = () => this.#e.removeEventListener("wheel", e);
 	}
-	#We() {
+	#Xe() {
 		let e = (e) => {
 			let t = this.#M;
 			if (!this.#A || t === null || !this.#z) return;
@@ -928,45 +943,72 @@ var J = class {
 				};
 				return;
 			}
-			this.#ae = null, this.#Ge(e.clientX, e.clientY, t);
+			this.#ae = null, this.#Ze(e.clientX, e.clientY, t);
 		};
 		this.#e.addEventListener("click", e), this.#ie = () => this.#e.removeEventListener("click", e);
 	}
-	#Ge(e, t, n) {
+	#Ze(e, t, n) {
 		if (this.#I <= 1 && this.#u !== "off" && !this.#f) {
-			let n = this.#Pe(e, t), r = this.#Fe(n);
-			if (r !== null && (this.#Ie(r) || performance.now() - this.#oe <= R)) return;
+			let n = this.#Be(e, t), r = this.#Ve(n);
+			if (r !== null && this.#He(r) || this.#i.state === "animating" || performance.now() - this.#oe <= R) return;
 		}
-		this.#Le();
+		this.#Ue();
 		let r = n.find((e) => e > this.#I + 1e-6) ?? n[0] ?? this.#I, i = this.#e.getBoundingClientRect();
 		this.setZoom(r, {
 			x: e - i.left,
 			y: t - i.top
 		});
 	}
-	async #Ke(e) {
+	async #Qe(e) {
 		let t = k(e);
-		typeof this.#t.open == "function" && (await this.#t.open(), this.#xt()), this.#t.prefetch([this.#D]);
-		let n = await t, r = await this.#qe(n);
-		this.#z = r, this.#t.onPageUpdate?.((e) => this.#lt(e)), this.#it(r.measure().containerWidth);
+		if (this.#t.onProgress?.((e) => this.#$e(e)), typeof this.#t.open == "function") {
+			this.#et();
+			try {
+				await this.#t.open(), this.#jt();
+			} catch (e) {
+				throw this.#nt(), e;
+			}
+			this.#tt("preparing");
+		}
+		this.#t.prefetch([this.#D]);
+		let n = await t, r = await this.#rt(n);
+		this.#z = r, this.#t.onPageUpdate?.((e) => this.#yt(e)), this.#mt(r.measure().containerWidth);
 		let i = new m({
-			onStart: (e) => this.#De(e.x, e.y),
-			onMove: (e) => this.#Ae(e.dx, e.dy),
-			onEnd: (e) => this.#je(e)
+			onStart: (e) => this.#Me(e.x, e.y),
+			onMove: (e) => this.#Fe(e.dx, e.dy),
+			onEnd: (e) => this.#Ie(e)
 		}), a = new _({
-			onPinchStart: () => this.#ze(),
-			onPinchMove: (e) => this.#Be(e.centerX, e.centerY, e.scale),
-			onPinchEnd: () => this.#Ve()
+			onPinchStart: () => this.#Ge(),
+			onPinchMove: (e) => this.#Ke(e.centerX, e.centerY, e.scale),
+			onPinchEnd: () => this.#qe()
 		});
 		this.#te = h(this.#e, {
 			pointer: i,
 			pinch: a
-		}), this.#Ue(), this.#We(), this.#He(), this.#Ye(), this.#se = this.#Qe(), await this.#ot(), this.#ht(), this.#yt(), this.#et(), this.#Ze(), await this.#Xe(), this.#n.emit("ready");
+		}), this.#we(), this.#Ye(), this.#Xe(), this.#Je(), this.#at(), this.#se = this.#ct(), await this.#gt(), this.#nt(), this.#Tt(), this.#kt(), this.#ut(), this.#st(), await this.#ot(), this.#n.emit("ready");
+	}
+	#$e(e) {
+		this.#me = e, this.#n.emit("progress", e), this.#pe?.update(e);
+	}
+	async #et() {
+		if (this.#fe === !1 || this.#V) return;
+		let e = this.#e;
+		if (!(!e.ownerDocument || typeof e.appendChild != "function")) try {
+			let { mountLoading: t } = await import("./loading-C0qbANt2.js");
+			if (this.#he === "done" || this.#V) return;
+			this.#pe = t(e), this.#me && this.#pe.update(this.#me), this.#he === "preparing" && this.#pe.preparing();
+		} catch {}
 	}
-	async #qe(e) {
+	#tt(e) {
+		this.#he !== "done" && (this.#he = e, this.#pe?.preparing());
+	}
+	#nt() {
+		this.#he = "done", this.#pe?.destroy(), this.#pe = null;
+	}
+	async #rt(e) {
 		try {
 			return await e.mount(this.#e), e.onFatal?.(() => {
-				this.#Je();
+				this.#it();
 			}), e;
 		} catch {
 			e.destroy();
@@ -977,7 +1019,7 @@ var J = class {
 			}), t;
 		}
 	}
-	async #Je() {
+	async #it() {
 		if (this.#B || this.#V) return;
 		this.#B = !0, this.#z?.destroy(), this.#z = null;
 		let e = await k("css");
@@ -985,19 +1027,19 @@ var J = class {
 			e.destroy();
 			return;
 		}
-		await e.mount(this.#e), this.#z = e, this.#it(e.measure().containerWidth), await this.#ot(), this.#n.emit("rendererFallback", {
+		await e.mount(this.#e), this.#z = e, this.#mt(e.measure().containerWidth), await this.#gt(), this.#n.emit("rendererFallback", {
 			from: "webgl2",
 			to: "css"
 		});
 	}
-	#Ye() {
+	#at() {
 		if (typeof matchMedia != "function") return;
 		let e = matchMedia("(prefers-reduced-motion: reduce)");
 		this.#$ = e.matches, e.addEventListener?.("change", (e) => {
 			this.#$ = e.matches;
 		});
 	}
-	async #Xe() {
+	async #ot() {
 		if (this.#ue === !1 || this.#V) return;
 		let e = this.#e;
 		if (!(!e.ownerDocument || typeof e.appendChild != "function")) try {
@@ -1007,7 +1049,7 @@ var J = class {
 			this.#de = t(this, e, n);
 		} catch {}
 	}
-	#Ze() {
+	#st() {
 		if (!this.#x || globalThis.location === void 0) return;
 		let e = globalThis;
 		this.#C = w(e, (e) => {
@@ -1022,18 +1064,18 @@ var J = class {
 		let n = new URL(t);
 		return n.hash = C(n.hash, Y(e, 0, Math.max(0, this.#t.pageCount - 1))), n.toString();
 	}
-	#Qe() {
+	#ct() {
 		let e = this.#e, t = e.ownerDocument;
 		if (!t || typeof e.setAttribute != "function") return null;
 		e.hasAttribute("tabindex") || (e.tabIndex = 0), e.setAttribute("aria-roledescription", "flipbook");
-		let n = (e) => this.#$e(e);
+		let n = (e) => this.#lt(e);
 		e.addEventListener("keydown", n);
 		let r = t.createElement("div");
 		return r.setAttribute("aria-live", "polite"), r.setAttribute("aria-atomic", "true"), r.style.cssText = "position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;", e.appendChild(r), this.#ee = r, () => {
 			e.removeEventListener("keydown", n), r.remove(), this.#ee = null;
 		};
 	}
-	#$e(e) {
+	#lt(e) {
 		let t = this.#a === "rtl" ? "ArrowLeft" : "ArrowRight";
 		switch (e.key) {
 			case "ArrowRight":
@@ -1049,70 +1091,70 @@ var J = class {
 			default: break;
 		}
 	}
-	#et() {
+	#ut() {
 		this.#ee && (this.#ee.textContent = `Page ${this.#D + 1} of ${this.#t.pageCount}`);
 	}
-	#tt() {
+	#dt() {
 		return this.#$ ? W : this.#k * (this.#h ? z : 1);
 	}
-	#nt() {
+	#ft() {
 		return this.#$ ? "simple" : this.#c;
 	}
 	update() {
-		!this.#z || this.#i.state !== "idle" || (this.#it(this.#z.measure().containerWidth), this.#ot());
+		!this.#z || this.#i.state !== "idle" || (this.#mt(this.#z.measure().containerWidth), this.#gt());
 	}
-	#rt() {
+	#pt() {
 		return this.#_ || this.#o === "single" ? "single" : this.#o;
 	}
-	#it(e) {
+	#mt(e) {
 		let t = this.#v && o(e, this.#m);
-		t !== this.#_ && (this.#_ = t, this.#at());
+		t !== this.#_ && (this.#_ = t, this.#ht());
 	}
-	#at() {
-		let e = this.#rt(), t = e !== this.#g;
+	#ht() {
+		let e = this.#pt(), t = e !== this.#g;
 		this.#g = e, this.#h = e === "single", this.#T = a(this.#t.pageCount, {
 			direction: this.#a,
 			mode: e
-		}), this.#E = this.#bt(this.#D), t && this.#n.emit("spreadChanged", {
+		}), this.#E = this.#At(this.#D), t && this.#n.emit("spreadChanged", {
 			mode: e,
 			singlePage: this.#h
 		});
 	}
-	async #ot() {
+	async #gt() {
 		let e = this.#T[this.#E];
-		!e || !this.#z || (this.#O = await this.#_t(e), this.#st(e, this.#O));
+		!e || !this.#z || (this.#O = await this.#Dt(e), this.#_t(e, this.#O));
 	}
-	#st(e, t) {
-		this.#z?.renderSpread(e, t, { fill: this.#h }), this.#ct(), this.#fe = 1, this.#ut();
+	#_t(e, t) {
+		this.#z?.renderSpread(e, t, { fill: this.#h }), this.#vt(), this.#ge = 1, this.#bt();
 	}
-	#ct() {
+	#vt() {
 		let e = this.#z?.measure().book;
 		if (!e || e.width <= 0 || e.height <= 0) return;
 		let t = (e.width / e.height).toFixed(4);
 		t !== this.#y && (this.#y = t, this.#e.style.aspectRatio = t);
 	}
-	#lt(e) {
+	#yt(e) {
 		if (this.#i.state !== "idle") {
 			this.#le.add(e);
 			return;
 		}
 		let t = this.#T[this.#E];
-		t && (t.left === e || t.right === e) && this.#ot();
+		t && (t.left === e || t.right === e) && this.#gt();
 	}
-	#ut() {
-		this.#me !== null && clearTimeout(this.#me);
-		let e = this.#ft();
-		if (e !== this.#fe) {
+	#bt() {
+		this.#ve !== null && clearTimeout(this.#ve);
+		let e = this.#St();
+		if (e !== this.#ge) {
 			if (e === 1) {
-				this.#pe++, this.#fe = 1, this.#ot();
+				this.#_e++, this.#ge = 1, this.#gt();
 				return;
 			}
-			this.#me = setTimeout(() => {
-				this.#me = null, this.#pt();
+			this.#ve = setTimeout(() => {
+				this.#ve = null, this.#Ct();
 			}, V);
 		}
 	}
-	#dt() {
+	#xt() {
 		let e = this.#z?.measure(), t = e?.content ?? e?.book;
 		if (!t || t.width <= 0) return 1;
 		let n = this.#O, r = +!!n.left + +!!n.right;
@@ -1120,21 +1162,21 @@ var J = class {
 		let i = t.width / r, a = typeof devicePixelRatio == "number" && devicePixelRatio > 0 ? devicePixelRatio : 1, o = 0;
 		for (let e of [n.left, n.right]) {
 			if (!e || e.width <= 0) continue;
-			let t = e.width / this.#fe;
+			let t = e.width / this.#ge;
 			o = Math.max(o, i * a / t);
 		}
 		return o === 0 ? 1 : o;
 	}
-	#ft() {
-		let e = Math.max(1, U / (typeof devicePixelRatio == "number" && devicePixelRatio > 0 ? devicePixelRatio : 1)), t = this.#I <= 1 ? 1 : this.#I, n = this.#dt() * Math.max(t, e);
+	#St() {
+		let e = Math.max(1, U / (typeof devicePixelRatio == "number" && devicePixelRatio > 0 ? devicePixelRatio : 1)), t = this.#I <= 1 ? 1 : this.#I, n = this.#xt() * Math.max(t, e);
 		return n <= 1.001 ? 1 : Math.min(Math.ceil(n * 2) / 2, H);
 	}
-	async #pt() {
+	async #Ct() {
 		let e = this.#T[this.#E];
 		if (!this.#z || !e) return;
-		let t = this.#ft();
-		if (t === 1 || t === this.#fe || this.#i.state !== "idle") return;
-		let n = ++this.#pe, r = {
+		let t = this.#St();
+		if (t === 1 || t === this.#ge || this.#i.state !== "idle") return;
+		let n = ++this.#_e, r = {
 			x: 0,
 			y: 0,
 			width: 1,
@@ -1153,34 +1195,34 @@ var J = class {
 				}), null;
 			}
 		}));
-		if (n !== this.#pe || this.#ft() !== t || this.#i.state !== "idle") return;
+		if (n !== this.#_e || this.#St() !== t || this.#i.state !== "idle") return;
 		let a = i[0] ?? null, o = i[1] ?? null;
-		a === this.#O.left && o === this.#O.right || (this.#fe = t, this.#O = {
+		a === this.#O.left && o === this.#O.right || (this.#ge = t, this.#O = {
 			left: a,
 			right: o
 		}, this.#z.renderSpread(e, this.#O, { fill: this.#h }));
 	}
-	#mt() {
+	#wt() {
 		if (this.#le.size === 0) return;
 		let e = this.#T[this.#E], t = e !== void 0 && [e.left, e.right].some((e) => e !== null && this.#le.has(e));
-		this.#le.clear(), t && this.#ot();
+		this.#le.clear(), t && this.#gt();
 	}
-	#ht() {
-		typeof ResizeObserver > "u" || (this.#P = new ResizeObserver(() => this.#gt()), this.#P.observe(this.#e));
+	#Tt() {
+		typeof ResizeObserver > "u" || (this.#P = new ResizeObserver(() => this.#Et()), this.#P.observe(this.#e));
 	}
-	#gt() {
+	#Et() {
 		this.#F || (this.#F = !0, requestAnimationFrame(() => {
 			this.#F = !1, this.update();
 		}));
 	}
-	async #_t(e) {
-		let [t, n] = await Promise.all([this.#vt(e.left), this.#vt(e.right)]);
+	async #Dt(e) {
+		let [t, n] = await Promise.all([this.#Ot(e.left), this.#Ot(e.right)]);
 		return {
 			left: t,
 			right: n
 		};
 	}
-	async #vt(e) {
+	async #Ot(e) {
 		if (e === null) return null;
 		try {
 			return await this.#t.get(e);
@@ -1191,7 +1233,7 @@ var J = class {
 			}), null;
 		}
 	}
-	#yt() {
+	#kt() {
 		let { toMount: e } = this.#r.update(this.#E, this.#T.length), t = [];
 		for (let n of e) {
 			let e = this.#T[n];
@@ -1199,22 +1241,22 @@ var J = class {
 		}
 		this.#t.prefetch(t);
 	}
-	#bt(e) {
+	#At(e) {
 		let t = this.#T.findIndex((t) => t.left === e || t.right === e);
 		return t === -1 ? 0 : t;
 	}
-	#xt() {
+	#jt() {
 		let e = this.#t.pageCount;
 		if (!Number.isInteger(e) || e < 1) throw Error(`Zine: source has ${e} pages; a Source must have at least 1 page.`);
 		let t = this.#b;
 		if (t !== void 0 && (!Number.isInteger(t) || t < 0 || t >= e)) throw Error(`Zine: startPage ${JSON.stringify(t)} is out of range for a ${e}-page book (valid 0..${e - 1}).`);
-		let n = this.#rt();
+		let n = this.#pt();
 		this.#h = n === "single", this.#T = a(e, {
 			direction: this.#a,
 			mode: n
 		});
 		let r = this.#x ? S(globalThis.location?.hash ?? "") : null;
-		this.#D = Y(r ?? t ?? 0, 0, e - 1), this.#E = this.#bt(this.#D);
+		this.#D = Y(r ?? t ?? 0, 0, e - 1), this.#E = this.#At(this.#D);
 	}
 };
 function Y(e, t, n) {
@@ -1261,7 +1303,8 @@ function re(n, r) {
 	for (let e of [
 		"deepLink",
 		"disableContextMenu",
-		"responsiveSpread"
+		"responsiveSpread",
+		"loading"
 	]) if (i[e] !== void 0 && typeof i[e] != "boolean") throw Error(`Zine: ${e} must be a boolean; got ${Q(i[e])}.`);
 	let u = i.controls;
 	if (u !== void 0 && typeof u != "boolean" && (typeof u != "object" || !u)) throw Error(`Zine: controls must be a boolean or an options object; got ${Q(u)}.`);