@zinejs/core 0.8.2 → 0.9.1

package/dist/{controls-DgEXR2zi.js → controls-DzVdwPJB.js}

@@ -1,18 +1,18 @@
-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";
+import { i as e, n as t, r as n, t as r } from "./registry-5nuYFMd4.js";
+import { i, n as a, r as o, t as s } from "./styles-C1Qp5pby.js";
 //#region src/controls/builtins.ts
-var s = Math.SQRT2, c = (e) => e.zine.container.ownerDocument?.fullscreenElement === e.zine.container;
-function l() {
+var c = Math.SQRT2, l = (e) => e.zine.container.ownerDocument?.fullscreenElement === e.zine.container;
+function u() {
 	t({
 		id: "prev",
 		title: "Previous page",
-		icon: a.prev,
+		icon: o.prev,
 		isDisabled: (e) => !e.zine.canFlipPrev(),
 		action: (e) => e.zine.flipPrev()
 	}), t({
 		id: "next",
 		title: "Next page",
-		icon: a.next,
+		icon: o.next,
 		isDisabled: (e) => !e.zine.canFlipNext(),
 		action: (e) => e.zine.flipNext()
 	});
@@ -20,7 +20,7 @@ function l() {
 	t({
 		id: "first",
 		title: "First page",
-		icon: (t) => e(t) ? a.last : a.first,
+		icon: (t) => e(t) ? o.last : o.first,
 		isDisabled: (e) => !e.zine.canFlipPrev(),
 		action: (e) => {
 			e.zine.flipTo(0), e.close();
@@ -28,7 +28,7 @@ function l() {
 	}), t({
 		id: "last",
 		title: "Last page",
-		icon: (t) => e(t) ? a.first : a.last,
+		icon: (t) => e(t) ? o.first : o.last,
 		isDisabled: (e) => !e.zine.canFlipNext(),
 		action: (e) => {
 			e.zine.flipTo(e.zine.getPageCount() - 1), e.close();
@@ -36,38 +36,45 @@ function l() {
 	}), t({
 		id: "zoomIn",
 		title: "Zoom in",
-		icon: a.zoomIn,
+		icon: o.zoomIn,
 		isDisabled: (e) => e.zine.getZoom() >= e.zine.getMaxZoom() - 1e-6,
-		action: (e) => e.zine.setZoom(e.zine.getZoom() * s)
+		action: (e) => e.zine.setZoom(e.zine.getZoom() * c)
 	}), t({
 		id: "zoomOut",
 		title: "Zoom out",
-		icon: a.zoomOut,
+		icon: o.zoomOut,
 		isDisabled: (e) => e.zine.getZoom() <= 1.000001,
-		action: (e) => e.zine.setZoom(e.zine.getZoom() / s)
+		action: (e) => e.zine.setZoom(e.zine.getZoom() / c)
 	}), t({
 		id: "fullscreen",
 		title: "Fullscreen",
-		icon: a.fullscreen,
+		icon: o.fullscreen,
 		isVisible: (e) => typeof e.zine.container.requestFullscreen == "function",
-		isActive: c,
+		isActive: l,
 		action: (e) => {
 			let t = e.zine.container.ownerDocument;
-			c(e) ? t?.exitFullscreen?.() : e.zine.container.requestFullscreen?.(), e.close();
+			l(e) ? t?.exitFullscreen?.() : e.zine.container.requestFullscreen?.(), e.close();
 		}
+	}), t({
+		id: "mute",
+		title: (e) => e.zine.isSoundMuted() ? "Unmute page sound" : "Mute page sound",
+		icon: (e) => e.zine.isSoundMuted() ? o.soundOff : o.soundOn,
+		isVisible: (e) => e.zine.isSoundEnabled(),
+		isActive: (e) => e.zine.isSoundMuted(),
+		action: (e) => e.zine.setSoundMuted(!e.zine.isSoundMuted())
 	}), t({
 		id: "share",
 		title: "Share",
-		icon: a.share,
+		icon: o.share,
 		action: (e) => {
-			e.close(), import("./share-WXdscwp3.js").then(({ ShareDialog: t }) => new t(e.zine, e.zine.container, e.colorScheme)).catch(() => {
+			e.close(), import("./share-Cq3RsjPr.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,
+		icon: o.download,
 		isVisible: (e) => e.zine.canDownload(),
 		action: async (e) => {
 			await e.zine.download(), e.close();
@@ -75,7 +82,7 @@ function l() {
 	}), t({
 		id: "spread",
 		title: (e) => e.zine.isSinglePage() ? "Show two pages" : "Show one page",
-		icon: (e) => e.zine.isSinglePage() ? a.twoPages : a.onePage,
+		icon: (e) => e.zine.isSinglePage() ? o.twoPages : o.onePage,
 		isVisible: (e) => !e.zine.isResponsiveSingle(),
 		action: (e) => {
 			e.zine.toggleSpreadMode(), e.close();
@@ -83,7 +90,7 @@ function l() {
 	}), t({
 		id: "print",
 		title: "Print",
-		icon: a.print,
+		icon: o.print,
 		isVisible: (e) => e.zine.canPrint(),
 		action: async (e) => {
 			await e.zine.print(), e.close();
@@ -91,21 +98,119 @@ function l() {
 	}), t({
 		id: "menu",
 		title: "More",
-		icon: a.menu,
+		icon: o.menu,
 		children: [
 			"first",
 			"last",
 			"spread",
 			"thumbnails",
 			"outline",
+			"mute",
 			"print",
 			"download"
 		]
 	});
 }
 //#endregion
+//#region src/controls/menu.ts
+var d = /* @__PURE__ */ new Set();
+function f(e) {
+	return e === "|" ? null : typeof e == "string" ? e : e.id;
+}
+function p(e, t) {
+	return t.size ? e.filter((e) => {
+		let n = f(e);
+		return n === null || !t.has(n);
+	}) : e;
+}
+function m(e, t) {
+	return typeof e.title == "function" ? e.title(t) : e.title;
+}
+function h(e, t) {
+	return typeof e.icon == "function" ? e.icon(t) : e.icon;
+}
+function g(e) {
+	return e instanceof HTMLButtonElement || e instanceof HTMLInputElement ? [e] : [...e.querySelectorAll("button, input")];
+}
+function _(e, t) {
+	e.classList.toggle("zine-controls-busy", t), e.setAttribute("aria-busy", String(t)), e.disabled = t;
+}
+function v(e, t, n, r) {
+	if (e.isDisabled?.(n) || t.classList.contains("zine-controls-busy")) return;
+	let i = e.action?.(n);
+	i && typeof i.then == "function" && (_(t, !0), i.finally(() => {
+		_(t, !1), r();
+	})), r();
+}
+function y(e, t, n, r, a, o = !1) {
+	let s = e.createElement("button"), c = m(t, r), l = h(t, r);
+	if (s.type = "button", s.className = n, s.title = c, s.setAttribute("aria-label", c), l && s.appendChild(i(e, l)), o || !l) {
+		let t = e.createElement("span");
+		t.className = "zine-controls-label", t.textContent = c, s.appendChild(t);
+	}
+	return s.addEventListener("click", () => a(t, s)), s;
+}
+function b(e, t, n, r, a) {
+	let o = a ?? t.isVisible?.(n);
+	o !== void 0 && (e.style.display = o ? "" : "none");
+	let s = e.classList.contains("zine-controls-busy"), c = (t.isDisabled?.(n) ?? !1) || s, l = g(e);
+	for (let e of l) e.disabled = c;
+	if (l.length || e.setAttribute("aria-disabled", String(c)), e.classList.toggle("zine-controls-off", c), t.isActive && e.setAttribute("aria-pressed", String(t.isActive(n))), typeof t.title == "function") {
+		let r = t.title(n);
+		e.title = r, e.setAttribute("aria-label", r);
+		let i = e.querySelector(".zine-controls-label");
+		i && (i.textContent = r);
+	}
+	typeof t.icon == "function" && e.querySelector("svg")?.replaceWith(i(r, t.icon(n)));
+}
+var x = class {
+	el;
+	#e;
+	#t;
+	#n;
+	#r;
+	#i = [];
+	constructor(e, t, n, r = d) {
+		this.#e = e, this.#t = t, this.#n = n, this.#r = r, this.el = e.createElement("div"), this.el.className = "zine-controls-menu", this.el.setAttribute("role", "menu");
+	}
+	build(t) {
+		this.el.replaceChildren(), this.#i = [];
+		let n = this.#t();
+		for (let r of p(t, this.#r)) {
+			if (r === "|") continue;
+			let t = e(r);
+			if (t.isVisible && !t.isVisible(n)) continue;
+			let i;
+			i = t.render ? t.render(this.#t()) : y(this.#e, t, "zine-controls-btn", n, (e, t) => v(e, t, this.#t(), this.#n), !0), i.setAttribute("role", "menuitem"), this.el.appendChild(i), this.#i.push({
+				el: i,
+				def: t
+			});
+		}
+	}
+	refresh() {
+		let e = this.#t();
+		for (let { el: t, def: n } of this.#i) b(t, n, e, this.#e);
+	}
+	contains(e) {
+		return e !== null && this.el.contains(e);
+	}
+	focusFirst() {
+		this.el.querySelector("button")?.focus();
+	}
+	destroy() {
+		this.el.remove(), this.#i = [];
+	}
+};
+function S(t, n, r = d) {
+	return t.isVisible && !t.isVisible(n) ? !1 : p(t.children ?? [], r).some((t) => {
+		if (t === "|") return !1;
+		let r = e(t);
+		return !r.isVisible || r.isVisible(n);
+	});
+}
+//#endregion
 //#region src/controls/sidebar.ts
-var u = class {
+var C = class {
 	root;
 	#e;
 	#t = null;
@@ -147,7 +252,7 @@ var u = class {
 	}
 	#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) => {
+		if (n.type = "button", n.className = "zine-panel-close", n.setAttribute("aria-label", "Close"), n.appendChild(i(e, o.close)), n.addEventListener("click", (e) => {
 			e.stopPropagation(), t();
 		}), this.#e.appendChild(n), this.#r = n, this.#t) {
 			let n = e.createElement("div");
@@ -170,7 +275,7 @@ var u = class {
 		}
 		this.#t = null;
 	}
-}, d = 78, f = class {
+}, w = 78, T = class {
 	root;
 	#e;
 	#t;
@@ -181,7 +286,7 @@ var u = class {
 	constructor(e, t, n = {}) {
 		this.#e = e;
 		let r = t.ownerDocument;
-		this.#t = r, this.#n = new u(r, t, {
+		this.#t = r, this.#n = new C(r, t, {
 			className: "zine-thumbs",
 			label: "Pages",
 			width: 90,
@@ -235,7 +340,7 @@ var u = class {
 		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";
+		o.width = Math.max(1, Math.round(w * a)), o.height = Math.max(1, Math.round(w * i / r * a)), o.className = "zine-thumbs-img";
 		let s = o.getContext("2d");
 		if (s) {
 			try {
@@ -257,7 +362,7 @@ var u = class {
 		for (let e of this.#a) e();
 		this.#a = [], this.#i?.disconnect(), this.#i = null, this.#n.destroy();
 	}
-}, p = 208, m = 12, h = class {
+}, E = 208, D = 12, O = class {
 	root;
 	#e;
 	#t;
@@ -268,10 +373,10 @@ var u = class {
 	constructor(e, t, n = {}) {
 		this.#e = e;
 		let r = t.ownerDocument;
-		this.#t = r, this.#a = n.onDismiss, this.#n = new u(r, t, {
+		this.#t = r, this.#a = n.onDismiss, this.#n = new C(r, t, {
 			className: "zine-outline",
 			label: "Outline",
-			width: p,
+			width: E,
 			onDismiss: n.onDismiss,
 			rtl: e.getDirection() === "rtl",
 			overlay: !0,
@@ -295,7 +400,7 @@ var u = class {
 	#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;
+			if (e.type = "button", e.className = "zine-outline-row", e.setAttribute("role", "option"), e.style.paddingLeft = `${8 + t * D}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", () => {
@@ -317,7 +422,7 @@ var u = class {
 		for (let e of this.#i) e();
 		this.#i = [], this.#n.destroy();
 	}
-}, g = 208, _ = 180, v = 2, y = class {
+}, k = 208, A = 180, j = 2, M = class {
 	root;
 	#e;
 	#t;
@@ -327,56 +432,66 @@ var u = class {
 	#a = 0;
 	#o = null;
 	#s;
+	#c = [];
 	constructor(e, t, n = {}) {
 		this.#e = e;
 		let r = t.ownerDocument;
-		this.#t = r, this.#s = n.onDismiss, this.#n = new u(r, t, {
+		this.#t = r, this.#s = n.onDismiss, this.#n = new C(r, t, {
 			className: "zine-search",
 			label: "Search results",
-			width: g,
+			width: k,
 			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.#o && clearTimeout(this.#o), this.#o = setTimeout(() => void this.#u(), A);
 		}), 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();
+			e.key === "Enter" && (this.#o && clearTimeout(this.#o), this.#u());
+		}), this.#i = r.createElement("div"), this.#i.className = "zine-search-hits", this.#n.root.append(this.#r, this.#i);
+		let i = n.state;
+		i && i.query && (this.#r.value = i.query, this.#a++, this.#d(i.query, i.results)), this.#r.focus();
 	}
-	#c(e) {
+	getState() {
+		return {
+			query: this.#r.value,
+			results: this.#c
+		};
+	}
+	#l(e) {
 		let t = this.#t.createElement("div");
 		t.className = "zine-panel-note", t.textContent = e, this.#i.replaceChildren(t);
 	}
-	async #l() {
+	async #u() {
 		let e = this.#r.value.trim(), t = ++this.#a;
-		if (e.length < v) {
-			this.#i.replaceChildren();
+		if (e.length < j) {
+			this.#c = [], this.#i.replaceChildren();
 			return;
 		}
-		this.#c("Searching…");
+		this.#l("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;
-			}));
+		t !== this.#a || !this.#n.root.isConnected || this.#d(e, n);
+	}
+	#d(e, t) {
+		if (this.#c = t, t.length === 0) {
+			this.#l(`No matches for “${e}”`);
+			return;
 		}
+		this.#i.replaceChildren(...t.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 {
+}, N = class {
 	#e;
 	#t;
 	#n;
@@ -385,14 +500,14 @@ var u = class {
 	#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);
+		let i = t.ownerDocument, a = e.getDirection() === "rtl";
+		if (this.#t = this.#o(i, a ? o.next : o.prev, "Previous page", () => e.flipPrev()), this.#n = this.#o(i, a ? o.prev : o.next, "Next page", () => e.flipNext()), this.#s(i, t), this.#r) s(this.#r, n);
+		else for (let e of [this.#t, this.#n]) s(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) {
+	#o(e, t, n, r) {
 		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);
+		a.type = "button", a.className = "zine-arrow", a.title = n, a.setAttribute("aria-label", n), a.appendChild(i(e, t)), a.addEventListener("click", r);
 		for (let e of [
 			"pointerdown",
 			"pointerup",
@@ -433,11 +548,11 @@ var u = class {
 		}
 		this.#r = null;
 	}
-}, x = {
-	thumbnails: f,
-	outline: h,
-	search: y
-}, S = [
+}, P = {
+	thumbnails: T,
+	outline: O,
+	search: M
+}, F = [
 	"pointerdown",
 	"pointerup",
 	"pointermove",
@@ -445,7 +560,13 @@ var u = class {
 	"dblclick",
 	"wheel",
 	"keydown"
-], C = class {
+];
+function I(e) {
+	let t = [];
+	for (let n of e) n === "|" && (t.length === 0 || t[t.length - 1] === "|") || t.push(n);
+	return t[t.length - 1] === "|" && t.pop(), t;
+}
+var L = class {
 	#e;
 	#t;
 	#n;
@@ -460,33 +581,35 @@ var u = class {
 	#d = null;
 	#f = null;
 	#p = null;
-	#m;
+	#m = null;
 	#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 = [
+	#g;
+	#_;
+	constructor(e, t, n, r = /* @__PURE__ */ new Set()) {
+		this.#e = e, this.#l = t, this.#_ = r;
+		let i = t.ownerDocument;
+		this.#t = i, a(i), this.#h = n.colorScheme ?? "auto";
+		let o = n.position ?? "bottom";
+		this.#g = o;
+		let c = n.docked ?? !0;
+		this.#n = i.createElement("div"), this.#n.className = [
 			"zine-controls",
-			`zine-controls-${a}`,
-			s ? "zine-controls-docked" : "zine-controls-floating",
+			`zine-controls-${o}`,
+			c ? "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) => {
+		].filter(Boolean).join(" "), this.#n.setAttribute("role", "toolbar"), this.#n.setAttribute("aria-label", "Flipbook controls"), s(this.#n, this.#h), this.#r = i.createElement("div"), this.#r.className = "zine-controls-bar", this.#n.appendChild(this.#r), this.#n.addEventListener("keydown", (e) => this.#E(e));
+		for (let e of F) this.#n.addEventListener(e, (e) => this.#y(e));
+		this.#v(t, o, c);
+		let l = () => this.#D();
+		this.#o.push(e.on("pageChanged", l)), this.#o.push(e.on("zoomChanged", l)), this.#o.push(e.on("flipEnd", l));
+		let u = (e) => {
 			if (!this.#a) return;
 			let t = e.target;
-			this.#a.el.contains(t) || this.#a.trigger.contains(t) || this.#O();
+			this.#a.menu.contains(t) || this.#a.trigger.contains(t) || this.#T();
 		};
-		r.addEventListener("pointerdown", l, !0), this.#o.push(() => r.removeEventListener("pointerdown", l, !0));
+		i.addEventListener("pointerdown", u, !0), this.#o.push(() => i.removeEventListener("pointerdown", u, !0));
 	}
-	#g(e, t, n) {
+	#v(e, t, n) {
 		if (!n) {
 			e.appendChild(this.#n);
 			return;
@@ -500,112 +623,76 @@ var u = class {
 		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);
+		this.#x(e.items ?? r);
 		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();
+		t !== !1 && (this.#m = new N(this.#e, this.#l, this.#h, t === !0 ? null : t)), this.#D(), this.#O();
 	}
 	destroy() {
 		for (let e of this.#o) e();
-		this.#o = [], this.#O(), this.#u?.destroy(), this.#u = null, this.#d = null, this.#n.remove();
+		this.#o = [], this.#T(), 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?.parentNode && (e.parentNode.insertBefore(e.firstChild, e), e.remove()), this.#c = null, this.#m?.destroy(), this.#m = null;
 	}
-	#_(e) {
+	#y(e) {
 		e.stopPropagation();
 	}
-	#v(e = () => this.#O()) {
+	#b(e = () => this.#T()) {
 		return {
 			zine: this.#e,
 			close: e,
-			colorScheme: this.#m
+			colorScheme: this.#h
 		};
 	}
-	#y(t) {
-		for (let n of t) {
+	#x(t) {
+		for (let n of I(p(t, this.#_))) {
 			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({
+			r = t.render ? t.render(this.#b()) : y(this.#t, t, "zine-controls-btn", this.#b(), (e, t) => this.#S(e, t)), this.#i.push({
 				el: r,
 				def: t
-			})) : r = this.#S(t, "zine-controls-btn"), this.#r.appendChild(r);
+			}), 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);
+	#S(e, t) {
+		if (!e.isDisabled?.(this.#b())) {
+			if (e.children) {
+				this.#a?.trigger === t ? this.#T() : this.#C(e, t);
+				return;
+			}
+			v(e, t, this.#b(), () => this.#D());
 		}
-		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,
+		this.#T();
+		let n = new x(this.#t, () => this.#b(), () => this.#D(), this.#_);
+		n.build(e.children ?? []), this.#n.appendChild(n.el), this.#a = {
+			menu: n,
 			trigger: t
-		}, t.setAttribute("aria-expanded", "true"), this.#D(e, t);
+		}, t.setAttribute("aria-expanded", "true"), this.#w(n.el, t), n.refresh(), n.focusFirst();
 	}
-	#D(e, t) {
+	#w(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`;
+		e.style.top = `${this.#g === "bottom" || s >= 0 ? s : o}px`;
 	}
-	#O() {
+	#T() {
 		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();
+		let { menu: e, trigger: t } = this.#a;
+		this.#a = null, t.removeAttribute("aria-expanded");
+		let n = this.#t.activeElement !== null && e.contains(this.#t.activeElement);
+		e.destroy(), n && t.focus();
 	}
-	#k(e) {
+	#E(e) {
 		if (e.key === "Escape" && this.#a) {
 			let { trigger: t } = this.#a;
-			this.#O(), t.focus(), e.preventDefault();
+			this.#T(), t.focus(), e.preventDefault();
 			return;
 		}
 		let t = [...this.#n.querySelectorAll("button, input")], n = t.indexOf(this.#t.activeElement);
@@ -613,32 +700,13 @@ var u = class {
 		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();
+	#D() {
+		let e = this.#b();
 		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)));
+			let r = n.children ? S(n, e, this.#_) : n.isVisible?.(e);
+			b(t, n, e, this.#t, r);
 		}
-		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);
-		});
+		this.#a?.menu.refresh(), this.#s && this.#t.activeElement !== this.#s && (this.#s.value = String(this.#e.getPage() + 1));
 	}
 	makePageInput() {
 		let e = this.#t.createElement("div");
@@ -663,29 +731,32 @@ var u = class {
 		return this.#d;
 	}
 	hasOutline() {
-		return this.#f === !0;
+		return this.#p === !0;
 	}
-	#N() {
-		this.#f !== null || !this.#e.canOutline() || (this.#f = !1, this.#e.getOutline().then((e) => {
+	#O() {
+		this.#p !== null || !this.#e.canOutline() || (this.#p = !1, this.#e.getOutline().then((e) => {
 			if (e.length === 0) return;
-			this.#f = !0, this.#A();
+			this.#p = !0, this.#D();
 			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);
+				this.#T(), e && this.#C(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();
+		this.#u instanceof M && (this.#f = this.#u.getState()), this.#u?.destroy(), this.#u = null, this.#d = null, t !== e && (this.#u = new P[e](this.#e, this.#l, {
+			onDismiss: () => this.togglePanel(e),
+			...e === "search" && this.#f ? { state: this.#f } : {}
+		}), s(this.#u.root, this.#h), this.#d = e), this.#D();
 	}
 };
-function w(e) {
-	l(), t({
+function R(e) {
+	u(), t({
 		id: "thumbnails",
 		title: () => e.openPanel() === "thumbnails" ? "Hide thumbnails" : "Show thumbnails",
-		icon: a.thumbnails,
+		icon: o.thumbnails,
 		isVisible: (e) => e.zine.isDocument(),
 		isActive: () => e.openPanel() === "thumbnails",
 		action: (t) => {
@@ -694,7 +765,7 @@ function w(e) {
 	}), t({
 		id: "outline",
 		title: () => e.openPanel() === "outline" ? "Hide outline" : "Show outline",
-		icon: a.outline,
+		icon: o.outline,
 		isVisible: () => e.hasOutline(),
 		isActive: () => e.openPanel() === "outline",
 		action: (t) => {
@@ -707,19 +778,101 @@ function w(e) {
 	}), t({
 		id: "search",
 		title: () => e.openPanel() === "search" ? "Hide search" : "Search",
-		icon: a.search,
+		icon: o.search,
 		isVisible: (e) => e.zine.canSearch(),
 		isActive: () => e.openPanel() === "search",
 		action: () => e.togglePanel("search")
 	});
 }
 //#endregion
+//#region src/controls/contextMenu.ts
+var z = [
+	"zoomIn",
+	"zoomOut",
+	"|",
+	"prev",
+	"next",
+	"|",
+	"fullscreen",
+	"mute",
+	"|",
+	"print",
+	"download",
+	"share"
+], B = /* @__PURE__ */ new Set([
+	"pageInput",
+	"thumbnails",
+	"outline",
+	"search"
+]), V = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o = null;
+	#s = [];
+	constructor(e, t, r = {}, i = /* @__PURE__ */ new Set()) {
+		this.#e = e, this.#t = t, this.#a = i, this.#n = t.ownerDocument, u(), a(this.#n), this.#i = r.colorScheme ?? "auto", this.#r = (r.items ?? z).filter((e) => typeof e != "string" || !B.has(e) || n(e) !== void 0);
+		let o = (e) => {
+			e.preventDefault(), this.#l(e.clientX, e.clientY);
+		};
+		this.#t.addEventListener("contextmenu", o), this.#s.push(() => this.#t.removeEventListener("contextmenu", o));
+		let s = (e) => {
+			this.#o && !this.#o.contains(e.target) && this.#d();
+		}, c = (e) => {
+			e.key === "Escape" && this.#o && (this.#d(), e.preventDefault());
+		};
+		this.#n.addEventListener("pointerdown", s, !0), this.#n.addEventListener("keydown", c, !0), this.#s.push(() => this.#n.removeEventListener("pointerdown", s, !0)), this.#s.push(() => this.#n.removeEventListener("keydown", c, !0));
+		let l = () => this.#o?.refresh();
+		this.#s.push(e.on("pageChanged", l)), this.#s.push(e.on("zoomChanged", l)), this.#s.push(e.on("flipEnd", l));
+	}
+	#c() {
+		return {
+			zine: this.#e,
+			close: () => this.#d(),
+			colorScheme: this.#i
+		};
+	}
+	#l(e, t) {
+		this.#d();
+		let n = new x(this.#n, () => this.#c(), () => this.#d(), this.#a);
+		if (n.build(this.#r), !n.el.querySelector("button")) return;
+		let r = this.#n.createElement("div");
+		r.className = "zine-context-layer", s(r, this.#i), r.appendChild(n.el), this.#t.appendChild(r), this.#o = n, n.refresh(), this.#u(n.el, e, t), n.focusFirst();
+	}
+	#u(e, t, n) {
+		let r = this.#t.getBoundingClientRect(), i = e.getBoundingClientRect();
+		if (!i.width) {
+			e.style.left = `${t}px`, e.style.top = `${n}px`;
+			return;
+		}
+		let a = Math.min(t, r.right - i.width - 4), o = Math.min(n, r.bottom - i.height - 4);
+		e.style.left = `${Math.max(r.left + 4, a)}px`, e.style.top = `${Math.max(r.top + 4, o)}px`;
+	}
+	#d() {
+		if (!this.#o) return;
+		let e = this.#o.el.parentElement, t = this.#n.activeElement !== null && this.#o.contains(this.#n.activeElement);
+		this.#o.destroy(), e?.remove(), this.#o = null, t && typeof this.#t.focus == "function" && this.#t.focus();
+	}
+	destroy() {
+		this.#d();
+		for (let e of this.#s) e();
+		this.#s = [];
+	}
+};
+//#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();
+function H(e, t, n = {}, r = /* @__PURE__ */ new Set()) {
+	let i = new L(e, t, n, r);
+	return R(i), i.mount(n), () => i.destroy();
+}
+function U(e, t, n = {}, r = /* @__PURE__ */ new Set()) {
+	let i = new V(e, t, n, r);
+	return () => i.destroy();
 }
 //#endregion
-export { T as mountControls };
+export { U as mountContextMenu, H as mountControls };
 
-//# sourceMappingURL=controls-DgEXR2zi.js.map
+//# sourceMappingURL=controls-DzVdwPJB.js.map