@zinejs/core 0.7.4 → 0.8.2

package/dist/controls-DgEXR2zi.js

@@ -0,0 +1,725 @@
+import { i as e, n as t, t as n } from "./registry-5nuYFMd4.js";
+import { i as r, n as i, r as a, t as o } from "./styles-B8fFoYm_.js";
+//#region src/controls/builtins.ts
+var s = Math.SQRT2, c = (e) => e.zine.container.ownerDocument?.fullscreenElement === e.zine.container;
+function l() {
+	t({
+		id: "prev",
+		title: "Previous page",
+		icon: a.prev,
+		isDisabled: (e) => !e.zine.canFlipPrev(),
+		action: (e) => e.zine.flipPrev()
+	}), t({
+		id: "next",
+		title: "Next page",
+		icon: a.next,
+		isDisabled: (e) => !e.zine.canFlipNext(),
+		action: (e) => e.zine.flipNext()
+	});
+	let e = (e) => e.zine.getDirection() === "rtl";
+	t({
+		id: "first",
+		title: "First page",
+		icon: (t) => e(t) ? a.last : a.first,
+		isDisabled: (e) => !e.zine.canFlipPrev(),
+		action: (e) => {
+			e.zine.flipTo(0), e.close();
+		}
+	}), t({
+		id: "last",
+		title: "Last page",
+		icon: (t) => e(t) ? a.first : a.last,
+		isDisabled: (e) => !e.zine.canFlipNext(),
+		action: (e) => {
+			e.zine.flipTo(e.zine.getPageCount() - 1), e.close();
+		}
+	}), t({
+		id: "zoomIn",
+		title: "Zoom in",
+		icon: a.zoomIn,
+		isDisabled: (e) => e.zine.getZoom() >= e.zine.getMaxZoom() - 1e-6,
+		action: (e) => e.zine.setZoom(e.zine.getZoom() * s)
+	}), t({
+		id: "zoomOut",
+		title: "Zoom out",
+		icon: a.zoomOut,
+		isDisabled: (e) => e.zine.getZoom() <= 1.000001,
+		action: (e) => e.zine.setZoom(e.zine.getZoom() / s)
+	}), t({
+		id: "fullscreen",
+		title: "Fullscreen",
+		icon: a.fullscreen,
+		isVisible: (e) => typeof e.zine.container.requestFullscreen == "function",
+		isActive: c,
+		action: (e) => {
+			let t = e.zine.container.ownerDocument;
+			c(e) ? t?.exitFullscreen?.() : e.zine.container.requestFullscreen?.(), e.close();
+		}
+	}), t({
+		id: "share",
+		title: "Share",
+		icon: a.share,
+		action: (e) => {
+			e.close(), import("./share-WXdscwp3.js").then(({ ShareDialog: t }) => new t(e.zine, e.zine.container, e.colorScheme)).catch(() => {
+				navigator.clipboard?.writeText(e.zine.pageLink()).catch(() => {});
+			});
+		}
+	}), t({
+		id: "download",
+		title: "Download PDF",
+		icon: a.download,
+		isVisible: (e) => e.zine.canDownload(),
+		action: async (e) => {
+			await e.zine.download(), e.close();
+		}
+	}), t({
+		id: "spread",
+		title: (e) => e.zine.isSinglePage() ? "Show two pages" : "Show one page",
+		icon: (e) => e.zine.isSinglePage() ? a.twoPages : a.onePage,
+		isVisible: (e) => !e.zine.isResponsiveSingle(),
+		action: (e) => {
+			e.zine.toggleSpreadMode(), e.close();
+		}
+	}), t({
+		id: "print",
+		title: "Print",
+		icon: a.print,
+		isVisible: (e) => e.zine.canPrint(),
+		action: async (e) => {
+			await e.zine.print(), e.close();
+		}
+	}), t({
+		id: "menu",
+		title: "More",
+		icon: a.menu,
+		children: [
+			"first",
+			"last",
+			"spread",
+			"thumbnails",
+			"outline",
+			"print",
+			"download"
+		]
+	});
+}
+//#endregion
+//#region src/controls/sidebar.ts
+var u = class {
+	root;
+	#e;
+	#t = null;
+	#n = null;
+	#r = null;
+	#i = null;
+	#a;
+	#o = null;
+	#s = null;
+	constructor(e, t, n) {
+		this.#a = e, this.#e = e.createElement("div"), this.#e.className = "zine-panel-holder", this.#e.style.width = `${n.width}px`, this.#o = n.pageBox ?? null, this.root = e.createElement("div"), this.root.className = `zine-panel ${n.className}`, this.root.setAttribute("role", "listbox"), this.root.setAttribute("aria-label", n.label), this.#e.appendChild(this.root);
+		for (let e of [
+			"pointerdown",
+			"pointerup",
+			"pointermove",
+			"click",
+			"dblclick",
+			"wheel"
+		]) this.root.addEventListener(e, (e) => e.stopPropagation());
+		this.#u(e, t, n.rtl ?? !1, n.overlay ?? !1), n.onDismiss && this.#d(e, n.onDismiss), this.#c(t);
+	}
+	#c(e) {
+		this.#o && (this.#l(), !(typeof ResizeObserver > "u") && (this.#s = new ResizeObserver(() => this.#l()), this.#s.observe(e)));
+	}
+	#l() {
+		let e = this.#o?.();
+		e && (this.#e.style.top = `${e.y}px`, this.#e.style.bottom = "auto", this.#e.style.height = `${e.height}px`);
+	}
+	setWidth(e) {
+		this.#e.style.width = `${e}px`;
+	}
+	#u(e, t, n, r) {
+		if (!t.parentNode) {
+			this.#e.classList.add("zine-panel-overlay"), t.appendChild(this.#e);
+			return;
+		}
+		let i = t.closest(".zine-controls-wrap") ?? t, a = e.createElement("div");
+		a.className = "zine-panel-wrap", n && a.classList.add("zine-panel-wrap-rtl"), r && a.classList.add("zine-panel-wrap-overlay"), i.parentNode.insertBefore(a, i), a.append(this.#e, i), this.#t = a;
+	}
+	#d(e, t) {
+		let n = e.createElement("button");
+		if (n.type = "button", n.className = "zine-panel-close", n.setAttribute("aria-label", "Close"), n.appendChild(r(e, a.close)), n.addEventListener("click", (e) => {
+			e.stopPropagation(), t();
+		}), this.#e.appendChild(n), this.#r = n, this.#t) {
+			let n = e.createElement("div");
+			n.className = "zine-panel-scrim", this.#t.insertBefore(n, this.#e);
+			for (let e of ["pointerdown", "click"]) n.addEventListener(e, (e) => {
+				e.stopPropagation(), t();
+			});
+			this.#n = n;
+		}
+		this.#i = (e) => {
+			e.key === "Escape" && t();
+		}, e.addEventListener("keydown", this.#i);
+	}
+	destroy() {
+		this.#s?.disconnect(), this.#s = null, this.#i &&= (this.#a.removeEventListener("keydown", this.#i), null), this.#n?.remove(), this.#n = null, this.#r = null, this.#e.remove();
+		let e = this.#t;
+		if (e?.parentNode) {
+			for (; e.firstChild;) e.parentNode.insertBefore(e.firstChild, e);
+			e.remove();
+		}
+		this.#t = null;
+	}
+}, d = 78, f = class {
+	root;
+	#e;
+	#t;
+	#n;
+	#r = [];
+	#i = null;
+	#a = [];
+	constructor(e, t, n = {}) {
+		this.#e = e;
+		let r = t.ownerDocument;
+		this.#t = r, this.#n = new u(r, t, {
+			className: "zine-thumbs",
+			label: "Pages",
+			width: 90,
+			onDismiss: n.onDismiss,
+			rtl: e.getDirection() === "rtl",
+			pageBox: () => e.getPageBox()
+		}), this.root = this.#n.root, this.#o(), this.#a.push(e.on("pageChanged", () => this.#l())), this.#l();
+	}
+	#o() {
+		let e = this.#e.getSpreads(), t = this.#e.getDirection() === "rtl", n = e.some((e) => e.left !== null && e.right !== null);
+		this.#n.root.classList.toggle("zine-thumbs-solo", !n), n && this.#n.setWidth(170);
+		for (let [r, i] of e.entries()) {
+			let e = this.#t.createElement("button");
+			e.type = "button", e.className = "zine-thumbs-row", e.setAttribute("role", "option"), t && (e.style.flexDirection = "row-reverse");
+			let a = [i.left, i.right].filter((e) => e !== null);
+			n && a.length === 1 && e.classList.add("zine-thumbs-row-lone");
+			for (let t of a) {
+				let n = this.#t.createElement("span");
+				n.className = "zine-thumbs-cell", n.dataset.page = String(t), e.appendChild(n);
+			}
+			let o = [...a].sort((e, t) => e - t).map((e) => e + 1);
+			e.setAttribute("aria-label", o.length > 1 ? `Pages ${o[0]}–${o.at(-1)}` : `Page ${o[0] ?? ""}`);
+			let s = this.#t.createElement("span");
+			s.className = "zine-thumbs-caption", s.textContent = o.join("–"), e.appendChild(s), e.addEventListener("click", () => {
+				a.length > 0 && this.#e.flipTo(Math.min(...a));
+			}), this.#n.root.appendChild(e), this.#r.push({
+				el: e,
+				spread: r,
+				pages: a
+			});
+		}
+		this.#s();
+	}
+	#s() {
+		let e = [...this.#n.root.querySelectorAll(".zine-thumbs-cell[data-page]")];
+		if (typeof IntersectionObserver > "u") {
+			for (let t of e) this.#c(t);
+			return;
+		}
+		this.#i = new IntersectionObserver((e, t) => {
+			for (let n of e) n.isIntersecting && (t.unobserve(n.target), this.#c(n.target));
+		}, {
+			root: this.#n.root,
+			rootMargin: "200px"
+		});
+		for (let t of e) this.#i.observe(t);
+	}
+	async #c(e) {
+		let t = Number(e.dataset.page), n = await this.#e.getPageImage(t);
+		if (!n || !e.isConnected) return;
+		let r = n.width, i = n.height;
+		if (!r || !i) return;
+		let a = Math.min(2, globalThis.devicePixelRatio || 1), o = this.#t.createElement("canvas");
+		o.width = Math.max(1, Math.round(d * a)), o.height = Math.max(1, Math.round(d * i / r * a)), o.className = "zine-thumbs-img";
+		let s = o.getContext("2d");
+		if (s) {
+			try {
+				s.drawImage(n, 0, 0, o.width, o.height);
+			} catch {
+				return;
+			}
+			e.replaceChildren(o);
+		}
+	}
+	#l() {
+		let e = this.#e.getPage();
+		for (let { el: t, pages: n } of this.#r) {
+			let r = n.includes(e);
+			t.classList.toggle("zine-panel-active", r), t.setAttribute("aria-selected", String(r)), r && t.scrollIntoView?.({ block: "nearest" });
+		}
+	}
+	destroy() {
+		for (let e of this.#a) e();
+		this.#a = [], this.#i?.disconnect(), this.#i = null, this.#n.destroy();
+	}
+}, p = 208, m = 12, h = class {
+	root;
+	#e;
+	#t;
+	#n;
+	#r = [];
+	#i = [];
+	#a;
+	constructor(e, t, n = {}) {
+		this.#e = e;
+		let r = t.ownerDocument;
+		this.#t = r, this.#a = n.onDismiss, this.#n = new u(r, t, {
+			className: "zine-outline",
+			label: "Outline",
+			width: p,
+			onDismiss: n.onDismiss,
+			rtl: e.getDirection() === "rtl",
+			overlay: !0,
+			pageBox: () => e.getPageBox()
+		}), this.root = this.#n.root, this.#o("Loading…"), this.#s(), this.#i.push(e.on("pageChanged", () => this.#l()));
+	}
+	#o(e) {
+		let t = this.#t.createElement("div");
+		t.className = "zine-panel-note", t.textContent = e, this.#n.root.replaceChildren(t);
+	}
+	async #s() {
+		let e = await this.#e.getOutline();
+		if (this.#n.root.isConnected) {
+			if (e.length === 0) {
+				this.#o("This document has no outline.");
+				return;
+			}
+			this.#n.root.replaceChildren(), this.#c(e, 0), this.#l();
+		}
+	}
+	#c(e, t) {
+		for (let n of e) {
+			let e = this.#t.createElement("button");
+			if (e.type = "button", e.className = "zine-outline-row", e.setAttribute("role", "option"), e.style.paddingLeft = `${8 + t * m}px`, e.textContent = n.title, e.title = n.title, n.page === null) e.disabled = !0;
+			else {
+				let t = n.page;
+				e.setAttribute("aria-label", `${n.title}, page ${t + 1}`), e.addEventListener("click", () => {
+					this.#e.flipTo(t), this.#a?.();
+				}), this.#r.push({
+					el: e,
+					page: t
+				});
+			}
+			this.#n.root.appendChild(e), n.children.length > 0 && this.#c(n.children, t + 1);
+		}
+	}
+	#l() {
+		let e = this.#e.getPage(), t = null, n = -1;
+		for (let { el: r, page: i } of this.#r) r.classList.remove("zine-panel-active"), r.removeAttribute("aria-selected"), i <= e && i >= n && (t = r, n = i);
+		t && (t.classList.add("zine-panel-active"), t.setAttribute("aria-selected", "true"), t.scrollIntoView?.({ block: "nearest" }));
+	}
+	destroy() {
+		for (let e of this.#i) e();
+		this.#i = [], this.#n.destroy();
+	}
+}, g = 208, _ = 180, v = 2, y = class {
+	root;
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a = 0;
+	#o = null;
+	#s;
+	constructor(e, t, n = {}) {
+		this.#e = e;
+		let r = t.ownerDocument;
+		this.#t = r, this.#s = n.onDismiss, this.#n = new u(r, t, {
+			className: "zine-search",
+			label: "Search results",
+			width: g,
+			onDismiss: n.onDismiss,
+			rtl: e.getDirection() === "rtl",
+			overlay: !0,
+			pageBox: () => e.getPageBox()
+		}), this.root = this.#n.root, this.#r = r.createElement("input"), this.#r.type = "search", this.#r.className = "zine-search-input", this.#r.placeholder = "Search…", this.#r.setAttribute("aria-label", "Search the document"), this.#r.addEventListener("input", () => {
+			this.#o && clearTimeout(this.#o), this.#o = setTimeout(() => void this.#l(), _);
+		}), this.#r.addEventListener("keydown", (e) => {
+			e.key === "Enter" && (this.#o && clearTimeout(this.#o), this.#l());
+		}), this.#i = r.createElement("div"), this.#i.className = "zine-search-hits", this.#n.root.append(this.#r, this.#i), this.#r.focus();
+	}
+	#c(e) {
+		let t = this.#t.createElement("div");
+		t.className = "zine-panel-note", t.textContent = e, this.#i.replaceChildren(t);
+	}
+	async #l() {
+		let e = this.#r.value.trim(), t = ++this.#a;
+		if (e.length < v) {
+			this.#i.replaceChildren();
+			return;
+		}
+		this.#c("Searching…");
+		let n = await this.#e.search(e);
+		if (!(t !== this.#a || !this.#n.root.isConnected)) {
+			if (n.length === 0) {
+				this.#c(`No matches for “${e}”`);
+				return;
+			}
+			this.#i.replaceChildren(...n.map((e) => {
+				let t = this.#t.createElement("button");
+				t.type = "button", t.className = "zine-search-hit", t.setAttribute("role", "option"), t.setAttribute("aria-label", `Page ${e.page + 1}: ${e.excerpt}`);
+				let n = this.#t.createElement("span");
+				n.className = "zine-search-page", n.textContent = `Page ${e.page + 1}`;
+				let r = this.#t.createElement("small");
+				return r.textContent = e.excerpt, t.append(n, r), t.addEventListener("click", () => {
+					this.#e.flipTo(e.page), this.#s?.();
+				}), t;
+			}));
+		}
+	}
+	destroy() {
+		this.#o && clearTimeout(this.#o), this.#o = null, this.#a++, this.#n.destroy();
+	}
+}, b = class {
+	#e;
+	#t;
+	#n;
+	#r = null;
+	#i;
+	#a = [];
+	constructor(e, t, n = "auto", r = null) {
+		this.#e = e, this.#i = r;
+		let i = t.ownerDocument, s = e.getDirection() === "rtl";
+		if (this.#t = this.#o(i, s ? a.next : a.prev, "Previous page", () => e.flipPrev()), this.#n = this.#o(i, s ? a.prev : a.next, "Next page", () => e.flipNext()), this.#s(i, t), this.#r) o(this.#r, n);
+		else for (let e of [this.#t, this.#n]) o(e, n);
+		this.#a.push(e.on("pageChanged", ({ page: e }) => this.#c(e))), this.#a.push(e.on("flipEnd", () => this.#c())), this.#c();
+	}
+	#o(e, t, n, i) {
+		let a = e.createElement("button");
+		a.type = "button", a.className = "zine-arrow", a.title = n, a.setAttribute("aria-label", n), a.appendChild(r(e, t)), a.addEventListener("click", i);
+		for (let e of [
+			"pointerdown",
+			"pointerup",
+			"click"
+		]) a.addEventListener(e, (e) => e.stopPropagation());
+		return a;
+	}
+	#s(e, t) {
+		let n = t.closest(".zine-panel-wrap") ?? t.closest(".zine-controls-wrap") ?? t, r = n.parentNode;
+		if (!r) return;
+		let i = e.createElement("div");
+		i.className = "zine-arrows-wrap", this.#i && i.classList.add(`zine-arrows-${this.#i}`), r.insertBefore(i, n), i.append(this.#t, n, this.#n), this.#r = i;
+	}
+	#c(e) {
+		let { prev: t, next: n } = this.#l(e);
+		for (let [e, r] of [[this.#t, t], [this.#n, n]]) e.disabled = !r, e.classList.toggle("zine-arrow-hidden", !r);
+	}
+	#l(e) {
+		if (e !== void 0) {
+			let t = this.#e.getSpreads(), n = t.findIndex((t) => t.left === e || t.right === e);
+			if (n >= 0) return {
+				prev: n > 0,
+				next: n + 1 < t.length
+			};
+		}
+		return {
+			prev: this.#e.canFlipPrev(),
+			next: this.#e.canFlipNext()
+		};
+	}
+	destroy() {
+		for (let e of this.#a) e();
+		this.#a = [], this.#t.remove(), this.#n.remove();
+		let e = this.#r;
+		if (e?.parentNode) {
+			for (; e.firstChild;) e.parentNode.insertBefore(e.firstChild, e);
+			e.remove();
+		}
+		this.#r = null;
+	}
+}, x = {
+	thumbnails: f,
+	outline: h,
+	search: y
+}, S = [
+	"pointerdown",
+	"pointerup",
+	"pointermove",
+	"click",
+	"dblclick",
+	"wheel",
+	"keydown"
+], C = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i = [];
+	#a = null;
+	#o = [];
+	#s = null;
+	#c = null;
+	#l;
+	#u = null;
+	#d = null;
+	#f = null;
+	#p = null;
+	#m;
+	#h;
+	constructor(e, t, n) {
+		this.#e = e, this.#l = t;
+		let r = t.ownerDocument;
+		this.#t = r, i(r), this.#m = n.colorScheme ?? "auto";
+		let a = n.position ?? "bottom";
+		this.#h = a;
+		let s = n.docked ?? !0;
+		this.#n = r.createElement("div"), this.#n.className = [
+			"zine-controls",
+			`zine-controls-${a}`,
+			s ? "zine-controls-docked" : "zine-controls-floating",
+			n.className
+		].filter(Boolean).join(" "), this.#n.setAttribute("role", "toolbar"), this.#n.setAttribute("aria-label", "Flipbook controls"), o(this.#n, this.#m), this.#r = r.createElement("div"), this.#r.className = "zine-controls-bar", this.#n.appendChild(this.#r), this.#n.addEventListener("keydown", (e) => this.#k(e));
+		for (let e of S) this.#n.addEventListener(e, (e) => this.#_(e));
+		this.#g(t, a, s);
+		let c = () => this.#A();
+		this.#o.push(e.on("pageChanged", c)), this.#o.push(e.on("zoomChanged", c)), this.#o.push(e.on("flipEnd", c));
+		let l = (e) => {
+			if (!this.#a) return;
+			let t = e.target;
+			this.#a.el.contains(t) || this.#a.trigger.contains(t) || this.#O();
+		};
+		r.addEventListener("pointerdown", l, !0), this.#o.push(() => r.removeEventListener("pointerdown", l, !0));
+	}
+	#g(e, t, n) {
+		if (!n) {
+			e.appendChild(this.#n);
+			return;
+		}
+		let r = e.parentNode;
+		if (!r) {
+			this.#n.classList.replace("zine-controls-docked", "zine-controls-floating"), e.appendChild(this.#n);
+			return;
+		}
+		let i = this.#t.createElement("div");
+		i.className = `zine-controls-wrap zine-controls-wrap-${t}`, r.insertBefore(i, e), i.appendChild(e), t === "top" || t === "left" ? i.insertBefore(this.#n, e) : i.appendChild(this.#n), this.#c = i;
+	}
+	mount(e) {
+		this.#y(e.items ?? n);
+		let t = e.arrows ?? !0;
+		t !== !1 && (this.#p = new b(this.#e, this.#l, this.#m, t === !0 ? null : t)), this.#A(), this.#N();
+	}
+	destroy() {
+		for (let e of this.#o) e();
+		this.#o = [], this.#O(), this.#u?.destroy(), this.#u = null, this.#d = null, this.#n.remove();
+		let e = this.#c;
+		e?.parentNode && (e.parentNode.insertBefore(e.firstChild, e), e.remove()), this.#c = null, this.#p?.destroy(), this.#p = null;
+	}
+	#_(e) {
+		e.stopPropagation();
+	}
+	#v(e = () => this.#O()) {
+		return {
+			zine: this.#e,
+			close: e,
+			colorScheme: this.#m
+		};
+	}
+	#y(t) {
+		for (let n of t) {
+			if (n === "|") {
+				let e = this.#t.createElement("div");
+				e.className = "zine-controls-sep", this.#r.appendChild(e);
+				continue;
+			}
+			let t = e(n), r;
+			t.render ? (r = t.render(this.#v()), this.#i.push({
+				el: r,
+				def: t
+			})) : r = this.#S(t, "zine-controls-btn"), this.#r.appendChild(r);
+		}
+	}
+	#b(e) {
+		return typeof e.title == "function" ? e.title(this.#v()) : e.title;
+	}
+	#x(e) {
+		return typeof e.icon == "function" ? e.icon(this.#v()) : e.icon;
+	}
+	#S(e, t, n = !1) {
+		let i = this.#t.createElement("button"), a = this.#b(e), o = this.#x(e);
+		if (i.type = "button", i.className = t, i.title = a, i.setAttribute("aria-label", a), o && i.appendChild(r(this.#t, o)), n || !o) {
+			let e = this.#t.createElement("span");
+			e.className = "zine-controls-label", e.textContent = a, i.appendChild(e);
+		}
+		return i.addEventListener("click", () => this.#C(e, i)), this.#i.push({
+			el: i,
+			def: e
+		}), i;
+	}
+	#C(e, t) {
+		if (e.isDisabled?.(this.#v())) return;
+		if (e.children) {
+			this.#a?.trigger === t ? this.#O() : this.#T(e, t);
+			return;
+		}
+		if (t.classList.contains("zine-controls-busy")) return;
+		let n = e.action?.(this.#v());
+		n && typeof n.then == "function" && (this.#w(t, !0), n.finally(() => {
+			this.#w(t, !1), this.#A();
+		})), this.#A();
+	}
+	#w(e, t) {
+		e.classList.toggle("zine-controls-busy", t), e.setAttribute("aria-busy", String(t)), e.disabled = t;
+	}
+	#T(t, n) {
+		this.#O();
+		let r = this.#t.createElement("div");
+		r.className = "zine-controls-menu", r.setAttribute("role", "menu");
+		let i = this.#v();
+		for (let n of t.children ?? []) {
+			if (n === "|") continue;
+			let t = e(n);
+			if (t.isVisible && !t.isVisible(i)) continue;
+			let a;
+			t.render ? (a = t.render(this.#v()), this.#i.push({
+				el: a,
+				def: t
+			})) : a = this.#S(t, "zine-controls-btn", !0), a.setAttribute("role", "menuitem"), r.appendChild(a);
+		}
+		this.#E(r, n), this.#A(), r.querySelector("button")?.focus();
+	}
+	#E(e, t) {
+		this.#n.appendChild(e), this.#a = {
+			el: e,
+			trigger: t
+		}, t.setAttribute("aria-expanded", "true"), this.#D(e, t);
+	}
+	#D(e, t) {
+		let n = this.#n.getBoundingClientRect(), r = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+		if (!n.width || !i.width) return;
+		let a = r.left - n.left + r.width / 2 - i.width / 2;
+		a = Math.max(4, Math.min(a, n.width - i.width - 4)), e.style.left = `${a}px`;
+		let o = r.bottom - n.top + 6, s = r.top - n.top - i.height - 6;
+		e.style.top = `${this.#h === "bottom" || s >= 0 ? s : o}px`;
+	}
+	#O() {
+		if (!this.#a) return;
+		let { el: e, trigger: t } = this.#a;
+		this.#a = null, t.removeAttribute("aria-expanded"), this.#i = this.#i.filter((t) => !e.contains(t.el)), e.remove(), this.#t.activeElement && e.contains(this.#t.activeElement) && t.focus();
+	}
+	#k(e) {
+		if (e.key === "Escape" && this.#a) {
+			let { trigger: t } = this.#a;
+			this.#O(), t.focus(), e.preventDefault();
+			return;
+		}
+		let t = [...this.#n.querySelectorAll("button, input")], n = t.indexOf(this.#t.activeElement);
+		if (n < 0 || this.#t.activeElement instanceof HTMLInputElement) return;
+		let r = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+		r !== 0 && (t[(n + r + t.length) % t.length]?.focus(), e.preventDefault());
+	}
+	#A() {
+		let e = this.#v();
+		for (let { el: t, def: n } of this.#i) {
+			let i = n.children ? this.#M(n, e) : n.isVisible?.(e);
+			i !== void 0 && (t.style.display = i ? "" : "none");
+			let a = t.classList.contains("zine-controls-busy"), o = (n.isDisabled?.(e) ?? !1) || a;
+			for (let e of this.#j(t)) e.disabled = o;
+			if (this.#j(t).length || t.setAttribute("aria-disabled", String(o)), t.classList.toggle("zine-controls-off", o), n.isActive && t.setAttribute("aria-pressed", String(n.isActive(e))), typeof n.title == "function") {
+				let r = n.title(e);
+				t.title = r, t.setAttribute("aria-label", r);
+				let i = t.querySelector(".zine-controls-label");
+				i && (i.textContent = r);
+			}
+			typeof n.icon == "function" && t.querySelector("svg")?.replaceWith(r(this.#t, n.icon(e)));
+		}
+		this.#s && this.#t.activeElement !== this.#s && (this.#s.value = String(this.#e.getPage() + 1));
+	}
+	#j(e) {
+		return e instanceof HTMLButtonElement || e instanceof HTMLInputElement ? [e] : [...e.querySelectorAll("button, input")];
+	}
+	#M(t, n) {
+		return t.isVisible && !t.isVisible(n) ? !1 : (t.children ?? []).some((t) => {
+			if (t === "|") return !1;
+			let r = e(t);
+			return !r.isVisible || r.isVisible(n);
+		});
+	}
+	makePageInput() {
+		let e = this.#t.createElement("div");
+		e.className = "zine-controls-page";
+		let t = this.#t.createElement("input");
+		t.type = "number", t.min = "1", t.max = String(this.#e.getPageCount()), t.value = String(this.#e.getPage() + 1), t.setAttribute("aria-label", "Page number");
+		let n = this.#t.createElement("span");
+		n.textContent = `/ ${this.#e.getPageCount()}`;
+		let r = !1, i = () => {
+			if (r) return;
+			r = !0;
+			let e = Number(t.value), n = Math.max(0, this.#e.getPageCount() - 1), i = Number.isFinite(e) ? Math.min(Math.max(Math.round(e) - 1, 0), n) : this.#e.getPage();
+			i === this.#e.getPage() ? t.value = String(this.#e.getPage() + 1) : this.#e.flipTo(i);
+		};
+		return t.addEventListener("focus", () => {
+			r = !1;
+		}), t.addEventListener("keydown", (e) => {
+			e.key === "Enter" && (i(), t.blur());
+		}), t.addEventListener("blur", i), e.append(t, n), this.#s = t, e;
+	}
+	openPanel() {
+		return this.#d;
+	}
+	hasOutline() {
+		return this.#f === !0;
+	}
+	#N() {
+		this.#f !== null || !this.#e.canOutline() || (this.#f = !1, this.#e.getOutline().then((e) => {
+			if (e.length === 0) return;
+			this.#f = !0, this.#A();
+			let t = this.#a;
+			if (t) {
+				let e = this.#i.find((e) => e.el === t.trigger)?.def;
+				this.#O(), e && this.#T(e, t.trigger);
+			}
+		}));
+	}
+	togglePanel(e) {
+		let t = this.#d;
+		this.#u?.destroy(), this.#u = null, this.#d = null, t !== e && (this.#u = new x[e](this.#e, this.#l, { onDismiss: () => this.togglePanel(e) }), o(this.#u.root, this.#m), this.#d = e), this.#A();
+	}
+};
+function w(e) {
+	l(), t({
+		id: "thumbnails",
+		title: () => e.openPanel() === "thumbnails" ? "Hide thumbnails" : "Show thumbnails",
+		icon: a.thumbnails,
+		isVisible: (e) => e.zine.isDocument(),
+		isActive: () => e.openPanel() === "thumbnails",
+		action: (t) => {
+			e.togglePanel("thumbnails"), t.close();
+		}
+	}), t({
+		id: "outline",
+		title: () => e.openPanel() === "outline" ? "Hide outline" : "Show outline",
+		icon: a.outline,
+		isVisible: () => e.hasOutline(),
+		isActive: () => e.openPanel() === "outline",
+		action: (t) => {
+			e.togglePanel("outline"), t.close();
+		}
+	}), t({
+		id: "pageInput",
+		title: "Page",
+		render: () => e.makePageInput()
+	}), t({
+		id: "search",
+		title: () => e.openPanel() === "search" ? "Hide search" : "Search",
+		icon: a.search,
+		isVisible: (e) => e.zine.canSearch(),
+		isActive: () => e.openPanel() === "search",
+		action: () => e.togglePanel("search")
+	});
+}
+//#endregion
+//#region src/controls/controls.ts
+function T(e, t, n = {}) {
+	let r = new C(e, t, n);
+	return w(r), r.mount(n), () => r.destroy();
+}
+//#endregion
+export { T as mountControls };
+
+//# sourceMappingURL=controls-DgEXR2zi.js.map