@zinejs/core 0.4.1 → 0.6.0

package/dist/controls-BrPo8pKL.js

@@ -0,0 +1,649 @@
+import { i as e, n as t, t as n } from "./registry-5nuYFMd4.js";
+import { n as r, t as i } from "./icons-D87p7JMP.js";
+//#region src/controls/builtins.ts
+var a = Math.SQRT2, o = (e) => e.zine.container.ownerDocument?.fullscreenElement === e.zine.container;
+function s() {
+	t({
+		id: "prev",
+		title: "Previous page",
+		icon: i.prev,
+		isDisabled: (e) => !e.zine.canFlipPrev(),
+		action: (e) => e.zine.flipPrev()
+	}), t({
+		id: "next",
+		title: "Next page",
+		icon: i.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) ? i.last : i.first,
+		isDisabled: (e) => !e.zine.canFlipPrev(),
+		action: (e) => {
+			e.zine.flipTo(0), e.close();
+		}
+	}), t({
+		id: "last",
+		title: "Last page",
+		icon: (t) => e(t) ? i.first : i.last,
+		isDisabled: (e) => !e.zine.canFlipNext(),
+		action: (e) => {
+			e.zine.flipTo(e.zine.getPageCount() - 1), e.close();
+		}
+	}), t({
+		id: "zoomIn",
+		title: "Zoom in",
+		icon: i.zoomIn,
+		isDisabled: (e) => e.zine.getZoom() >= e.zine.getMaxZoom() - 1e-6,
+		action: (e) => e.zine.setZoom(e.zine.getZoom() * a)
+	}), t({
+		id: "zoomOut",
+		title: "Zoom out",
+		icon: i.zoomOut,
+		isDisabled: (e) => e.zine.getZoom() <= 1.000001,
+		action: (e) => e.zine.setZoom(e.zine.getZoom() / a)
+	}), t({
+		id: "fullscreen",
+		title: "Fullscreen",
+		icon: i.fullscreen,
+		isVisible: (e) => typeof e.zine.container.requestFullscreen == "function",
+		isActive: o,
+		action: (e) => {
+			let t = e.zine.container.ownerDocument;
+			o(e) ? t?.exitFullscreen?.() : e.zine.container.requestFullscreen?.(), e.close();
+		}
+	}), t({
+		id: "share",
+		title: "Share",
+		icon: i.share,
+		action: (e) => {
+			e.close(), import("./share-CyrZiFqf.js").then(({ ShareDialog: t }) => new t(e.zine, e.zine.container)).catch(() => {
+				navigator.clipboard?.writeText(e.zine.pageLink()).catch(() => {});
+			});
+		}
+	}), t({
+		id: "download",
+		title: "Download PDF",
+		icon: i.download,
+		isVisible: (e) => e.zine.canDownload(),
+		action: (e) => {
+			e.zine.download(), e.close();
+		}
+	}), t({
+		id: "spread",
+		title: (e) => e.zine.isSinglePage() ? "Show two pages" : "Show one page",
+		icon: (e) => e.zine.isSinglePage() ? i.twoPages : i.onePage,
+		isVisible: (e) => !e.zine.isResponsiveSingle(),
+		action: (e) => {
+			e.zine.toggleSpreadMode(), e.close();
+		}
+	}), t({
+		id: "print",
+		title: "Print",
+		icon: i.print,
+		isVisible: (e) => e.zine.canPrint(),
+		action: (e) => {
+			e.zine.print(), e.close();
+		}
+	}), t({
+		id: "menu",
+		title: "More",
+		icon: i.menu,
+		children: [
+			"first",
+			"last",
+			"spread",
+			"thumbnails",
+			"outline",
+			"print",
+			"download"
+		]
+	});
+}
+//#endregion
+//#region src/controls/styles.ts
+var c = "zine-controls-style", l = "\n/* Docked mode wraps the book so the bar can sit beside it without shrinking the container,\n   whose measured box the renderer and hit-testing both depend on.\n   The wrapper deliberately does not stretch or grow its children: the container keeps whatever\n   width, aspect-ratio and auto-margins the consumer's own CSS gave it. */\n.zine-controls-wrap { display: flex; }\n/* Stacked: children keep their own width (so a percentage or auto-margin still resolves against\n   the wrapper) and take only the height they ask for. */\n.zine-controls-wrap-top,\n.zine-controls-wrap-bottom { flex-direction: column; align-items: stretch; }\n/* Side by side: the bar is only as wide as its buttons, and both are vertically centred. */\n.zine-controls-wrap-left,\n.zine-controls-wrap-right { flex-direction: row; align-items: center; }\n/* min-height:0 matters as much as min-width here. A flex item's automatic minimum size floors it\n   at its content, so once the canvas has grown for a taller layout the book cannot shrink back —\n   its aspect-ratio is restored but ignored, leaving the extra height behind. */\n.zine-controls-wrap > * { flex: 0 0 auto; min-width: 0; min-height: 0; }\n\n.zine-controls {\n  position: relative;\n  display: flex;\n  gap: 4px;\n  padding: 5px;\n  z-index: 2;\n  box-sizing: border-box;\n  font: 500 12px/1.2 system-ui, sans-serif;\n  color: var(--zine-controls-fg, #f4f4f5);\n  touch-action: auto;\n  -webkit-user-select: none;\n  user-select: none;\n}\n.zine-controls-docked { flex: 0 0 auto; justify-content: center; align-items: center; }\n.zine-controls-floating {\n  position: absolute;\n  /* Transparent to the book except on the buttons themselves, so gaps stay draggable. */\n  pointer-events: none;\n}\n.zine-controls-bar {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  padding: 3px;\n  border-radius: 8px;\n  pointer-events: auto;\n  background: var(--zine-controls-bg, rgba(24, 24, 27, 0.82));\n  backdrop-filter: blur(8px);\n}\n/* Floating: lifted off the page it covers. Docked: flat, with an outline so it reads as a\n   control strip rather than a shadow hanging in empty space. */\n.zine-controls-floating .zine-controls-bar { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28); }\n.zine-controls-docked .zine-controls-bar {\n  border: 1px solid var(--zine-controls-hover, rgba(255, 255, 255, 0.14));\n}\n.zine-controls-floating.zine-controls-bottom { inset: auto 0 0 0; justify-content: center; }\n.zine-controls-floating.zine-controls-top    { inset: 0 0 auto 0; justify-content: center; }\n.zine-controls-floating.zine-controls-left   { inset: 0 auto 0 0; align-items: center; }\n.zine-controls-floating.zine-controls-right  { inset: 0 0 0 auto; align-items: center; }\n/* A bar on a vertical edge stacks its buttons, docked or floating. */\n.zine-controls-left .zine-controls-bar,\n.zine-controls-right .zine-controls-bar { flex-direction: column; }\n\n.zine-controls-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n}\n.zine-controls-btn svg { width: 15px; height: 15px; }\n.zine-controls-btn:hover:not(:disabled) { background: var(--zine-controls-hover, rgba(255,255,255,0.14)); }\n.zine-controls-btn:focus-visible {\n  outline: 2px solid var(--zine-controls-accent, #7dd3fc);\n  outline-offset: 1px;\n}\n.zine-controls-btn:disabled { opacity: 0.38; cursor: default; }\n/* A custom widget cannot always be disabled itself, so it is marked instead and reads the same. */\n.zine-controls-off { opacity: 0.38; }\n.zine-controls-off[aria-disabled='true'] { pointer-events: none; }\n.zine-controls-btn[aria-pressed=\"true\"],\n.zine-controls-btn[aria-expanded=\"true\"] { background: var(--zine-controls-hover, rgba(255,255,255,0.14)); }\n\n.zine-controls-sep {\n  width: 1px;\n  align-self: stretch;\n  margin: 3px 3px;\n  background: currentColor;\n  opacity: 0.22;\n}\n.zine-controls-left .zine-controls-sep,\n.zine-controls-right .zine-controls-sep { width: auto; height: 1px; margin: 3px 3px; }\n\n.zine-controls-page {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 0 3px;\n  pointer-events: auto;\n  white-space: nowrap;\n}\n.zine-controls-page input {\n  width: 2.2em;\n  padding: 2px 3px;\n  border: 1px solid var(--zine-controls-hover, rgba(255,255,255,0.2));\n  border-radius: 4px;\n  background: rgba(0, 0, 0, 0.25);\n  color: inherit;\n  font: inherit;\n  text-align: center;\n  -moz-appearance: textfield;\n}\n.zine-controls-page input::-webkit-outer-spin-button,\n.zine-controls-page input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n.zine-controls-page input:focus-visible {\n  outline: 2px solid var(--zine-controls-accent, #7dd3fc);\n  outline-offset: 0;\n}\n\n.zine-controls-menu {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 152px;\n  padding: 4px;\n  border-radius: 8px;\n  pointer-events: auto;\n  background: var(--zine-controls-bg, rgba(24, 24, 27, 0.94));\n  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.36);\n  backdrop-filter: blur(8px);\n}\n.zine-controls-menu .zine-controls-btn {\n  width: 100%;\n  height: auto;\n  gap: 8px;\n  padding: 6px 8px;\n  justify-content: flex-start;\n}\n\n/* Search shares the rail: a query field pinned at the top over a scrolling list of hits. */\n.zine-search { gap: 0; overflow: hidden; }\n.zine-search-input {\n  flex: 0 0 auto;\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--zine-controls-hover, rgba(255,255,255,0.2));\n  border-radius: 6px;\n  background: rgba(0, 0, 0, 0.25);\n  color: inherit;\n  font: inherit;\n  box-sizing: border-box;\n}\n.zine-search-hits {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  margin-top: 5px;\n  scrollbar-width: thin;\n}\n.zine-search-hit {\n  display: block;\n  width: 100%;\n  padding: 6px 8px;\n  border: 0;\n  border-radius: 5px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.zine-search-hit:hover { background: var(--zine-controls-hover, rgba(255,255,255,0.14)); }\n.zine-search-hit:focus-visible {\n  outline: 2px solid var(--zine-controls-accent, #7dd3fc);\n  outline-offset: -2px;\n}\n.zine-search-page { display: block; font-size: 0.9em; opacity: 0.85; }\n.zine-search-hit small {\n  display: block;\n  margin-top: 2px;\n  opacity: 0.62;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n}\n\n/* Page-turn arrows flanking the book. Like the docked toolbar and the side panels, they sit\n   outside the container so they never shrink the book or intercept its gestures. */\n.zine-arrows-wrap {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  min-width: 0;\n}\n.zine-arrows-wrap > *:not(.zine-arrow) { flex: 1 1 auto; min-width: 0; min-height: 0; }\n.zine-arrow {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: var(--zine-controls-bg, rgba(24, 24, 27, 0.82));\n  color: var(--zine-controls-fg, #f4f4f5);\n  cursor: pointer;\n  backdrop-filter: blur(8px);\n  -webkit-user-select: none;\n  user-select: none;\n}\n.zine-arrow svg { width: 22px; height: 22px; }\n.zine-arrow:hover:not(:disabled) { background: var(--zine-controls-hover, rgba(255,255,255,0.22)); }\n.zine-arrow:focus-visible {\n  outline: 2px solid var(--zine-controls-accent, #7dd3fc);\n  outline-offset: 2px;\n}\n/* Nothing to turn to: invisible, but still occupying its slot so the book does not slide across\n   as the reader reaches a cover. */\n.zine-arrow-hidden { visibility: hidden; }\n/* No room to flank on a narrow screen; the toolbar's own prev/next still work. */\n@media (max-width: 640px) {\n  .zine-arrow { display: none; }\n}\n@media (prefers-reduced-motion: no-preference) {\n  .zine-arrow { transition: background 120ms ease; }\n}\n\n/* Side panels (thumbnails, outline). The rail wraps the book and its docked toolbar so it sits\n   beside them without shrinking the container the renderer measures. */\n.zine-panel-wrap { display: flex; align-items: stretch; gap: 8px; }\n\n/* The holder stretches to the book's height; the rail is absolutely positioned inside it so a\n   long list scrolls rather than growing the row and running past the bottom of the book. */\n.zine-panel-holder {\n  position: relative;\n  flex: 0 0 auto;\n  align-self: stretch;\n  min-height: 0;\n}\n.zine-panel {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 6px;\n  box-sizing: border-box;\n  border-radius: 8px;\n  background: var(--zine-controls-bg, rgba(24, 24, 27, 0.82));\n  color: var(--zine-controls-fg, #f4f4f5);\n  font: 500 11px/1.2 system-ui, sans-serif;\n  scrollbar-width: thin;\n  touch-action: auto;\n  -webkit-user-select: none;\n  user-select: none;\n}\n/* Overlay fallback, used when the container has no parent to wrap. */\n.zine-panel-overlay { position: absolute; inset: 0 auto 0 0; z-index: 3; }\n.zine-panel-active { background: var(--zine-controls-hover, rgba(255,255,255,0.18)); }\n.zine-panel-note { padding: 8px; opacity: 0.66; line-height: 1.4; }\n\n.zine-thumbs { align-items: center; }\n\n.zine-thumbs-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 2px;\n  width: 100%;\n  padding: 4px;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.zine-thumbs-row:hover { background: var(--zine-controls-hover, rgba(255,255,255,0.14)); }\n.zine-thumbs-row:focus-visible {\n  outline: 2px solid var(--zine-controls-accent, #7dd3fc);\n  outline-offset: -2px;\n}\n.zine-thumbs-row.zine-panel-active .zine-thumbs-cell {\n  outline: 1px solid var(--zine-controls-accent, #7dd3fc);\n}\n\n/* Outline: a single column of headings, indented by depth. */\n.zine-outline { gap: 1px; }\n.zine-outline-row {\n  display: block;\n  width: 100%;\n  padding: 6px 8px;\n  border: 0;\n  border-radius: 5px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  line-height: 1.35;\n  cursor: pointer;\n  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n.zine-outline-row:hover:not(:disabled) {\n  background: var(--zine-controls-hover, rgba(255,255,255,0.14));\n}\n.zine-outline-row:focus-visible {\n  outline: 2px solid var(--zine-controls-accent, #7dd3fc);\n  outline-offset: -2px;\n}\n/* A heading whose destination could not be resolved: shown, but nothing to click through to. */\n.zine-outline-row:disabled { opacity: 0.5; cursor: default; }\n\n.zine-thumbs-cell {\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 24px;\n  display: flex;\n  background: rgba(0, 0, 0, 0.3);\n  border-radius: 2px;\n  overflow: hidden;\n}\n/* A lone page in a book that pairs elsewhere (a cover, a back page) keeps one page's width and\n   centres, instead of stretching across both columns. */\n.zine-thumbs-row-lone .zine-thumbs-cell { flex: 0 0 calc(50% - 1px); }\n.zine-thumbs-img { display: block; width: 100%; height: auto; }\n.zine-thumbs-caption { flex: 1 0 100%; text-align: center; opacity: 0.7; }\n\n/* Share dialog. Centred over the page rather than in the side rail: a QR and six destinations\n   need more room than the rail gives, and sharing is a brief interruption, not a browsing mode. */\n.zine-share-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 2147483000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  background: rgba(0, 0, 0, 0.55);\n  font: 500 13px/1.4 system-ui, sans-serif;\n  color: var(--zine-controls-fg, #f4f4f5);\n}\n.zine-share {\n  width: min(320px, 100%);\n  max-height: 100%;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n  border-radius: 12px;\n  background: var(--zine-share-bg, #1c1c20);\n  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);\n  box-sizing: border-box;\n}\n.zine-share-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.zine-share-head strong { font-size: 15px; }\n.zine-share-close {\n  display: inline-flex;\n  width: 26px;\n  height: 26px;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: 0;\n  border-radius: 6px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.zine-share-close svg { width: 16px; height: 16px; }\n.zine-share-close:hover { background: var(--zine-controls-hover, rgba(255,255,255,0.14)); }\n\n.zine-share-qr {\n  align-self: center;\n  line-height: 0;\n  padding: 8px;\n  border-radius: 8px;\n  background: #fff;\n}\n.zine-share-qr svg { display: block; }\n\n.zine-share-link { display: flex; gap: 6px; }\n.zine-share-link input {\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: 7px 9px;\n  border: 1px solid var(--zine-controls-hover, rgba(255,255,255,0.2));\n  border-radius: 7px;\n  background: rgba(0, 0, 0, 0.3);\n  color: inherit;\n  font: inherit;\n}\n.zine-share-copy {\n  flex: 0 0 auto;\n  min-width: 74px;\n  padding: 7px 12px;\n  border: 0;\n  border-radius: 7px;\n  background: var(--zine-controls-accent, #7dd3fc);\n  color: #06202c;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.zine-share-socials { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }\n.zine-share-social {\n  display: inline-flex;\n  width: 38px;\n  height: 38px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.08);\n  color: inherit;\n  text-decoration: none;\n}\n.zine-share-social svg { width: 19px; height: 19px; }\n.zine-share-social:hover { background: var(--zine-controls-hover, rgba(255,255,255,0.18)); }\n.zine-share-close:focus-visible,\n.zine-share-copy:focus-visible,\n.zine-share-social:focus-visible,\n.zine-share-link input:focus-visible {\n  outline: 2px solid var(--zine-controls-accent, #7dd3fc);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .zine-controls-btn { transition: background 120ms ease; }\n}\n";
+function u(e) {
+	if (e.getElementById(c)) return;
+	let t = e.createElement("style");
+	t.id = c, t.textContent = l, (e.head ?? e.documentElement)?.appendChild(t);
+}
+//#endregion
+//#region src/controls/sidebar.ts
+var d = class {
+	root;
+	#e;
+	#t = null;
+	constructor(e, t, n) {
+		this.#e = e.createElement("div"), this.#e.className = "zine-panel-holder", this.#e.style.width = `${n.width}px`, 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.#n(e, t);
+	}
+	setWidth(e) {
+		this.#e.style.width = `${e}px`;
+	}
+	#n(e, t) {
+		if (!t.parentNode) {
+			this.#e.classList.add("zine-panel-overlay"), t.appendChild(this.#e);
+			return;
+		}
+		let n = t.closest(".zine-controls-wrap") ?? t, r = e.createElement("div");
+		r.className = "zine-panel-wrap", n.parentNode.insertBefore(r, n), r.append(this.#e, n), this.#t = r;
+	}
+	destroy() {
+		this.#e.remove();
+		let e = this.#t;
+		if (e?.parentNode) {
+			for (; e.firstChild;) e.parentNode.insertBefore(e.firstChild, e);
+			e.remove();
+		}
+		this.#t = null;
+	}
+}, f = 78, p = class {
+	#e;
+	#t;
+	#n;
+	#r = [];
+	#i = null;
+	#a = [];
+	constructor(e, t) {
+		this.#e = e;
+		let n = t.ownerDocument;
+		this.#t = n, this.#n = new d(n, t, {
+			className: "zine-thumbs",
+			label: "Pages",
+			width: 90
+		}), 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
+			});
+		}
+		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(f * a)), o.height = Math.max(1, Math.round(f * 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.getSpreadIndex();
+		for (let { el: t, spread: n } of this.#r) {
+			let r = n === 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();
+	}
+}, m = 208, h = 12, g = class {
+	#e;
+	#t;
+	#n;
+	#r = [];
+	#i = [];
+	constructor(e, t) {
+		this.#e = e;
+		let n = t.ownerDocument;
+		this.#t = n, this.#n = new d(n, t, {
+			className: "zine-outline",
+			label: "Outline",
+			width: m
+		}), this.#a("Loading…"), this.#o(), this.#i.push(e.on("pageChanged", () => this.#c()));
+	}
+	#a(e) {
+		let t = this.#t.createElement("div");
+		t.className = "zine-panel-note", t.textContent = e, this.#n.root.replaceChildren(t);
+	}
+	async #o() {
+		let e = await this.#e.getOutline();
+		if (this.#n.root.isConnected) {
+			if (e.length === 0) {
+				this.#a("This document has no outline.");
+				return;
+			}
+			this.#n.root.replaceChildren(), this.#s(e, 0), this.#c();
+		}
+	}
+	#s(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 * h}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.#r.push({
+					el: e,
+					page: t
+				});
+			}
+			this.#n.root.appendChild(e), n.children.length > 0 && this.#s(n.children, t + 1);
+		}
+	}
+	#c() {
+		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();
+	}
+}, _ = 208, v = 180, y = 2, b = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a = 0;
+	#o = null;
+	constructor(e, t) {
+		this.#e = e;
+		let n = t.ownerDocument;
+		this.#t = n, this.#n = new d(n, t, {
+			className: "zine-search",
+			label: "Search results",
+			width: _
+		}), this.#r = n.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.#c(), v);
+		}), this.#r.addEventListener("keydown", (e) => {
+			e.key === "Enter" && (this.#o && clearTimeout(this.#o), this.#c());
+		}), this.#i = n.createElement("div"), this.#i.className = "zine-search-hits", this.#n.root.append(this.#r, this.#i), this.#r.focus();
+	}
+	#s(e) {
+		let t = this.#t.createElement("div");
+		t.className = "zine-panel-note", t.textContent = e, this.#i.replaceChildren(t);
+	}
+	async #c() {
+		let e = this.#r.value.trim(), t = ++this.#a;
+		if (e.length < y) {
+			this.#i.replaceChildren();
+			return;
+		}
+		this.#s("Searching…");
+		let n = await this.#e.search(e);
+		if (!(t !== this.#a || !this.#n.root.isConnected)) {
+			if (n.length === 0) {
+				this.#s(`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)), t;
+			}));
+		}
+	}
+	destroy() {
+		this.#o && clearTimeout(this.#o), this.#o = null, this.#a++, this.#n.destroy();
+	}
+}, x = class {
+	#e;
+	#t;
+	#n;
+	#r = null;
+	#i = [];
+	constructor(e, t) {
+		this.#e = e;
+		let n = t.ownerDocument, r = e.getDirection() === "rtl";
+		this.#t = this.#a(n, r ? i.next : i.prev, "Previous page", () => e.flipPrev()), this.#n = this.#a(n, r ? i.prev : i.next, "Next page", () => e.flipNext()), this.#o(n, t);
+		let a = () => this.#s();
+		this.#i.push(e.on("pageChanged", a)), this.#i.push(e.on("flipEnd", a)), this.#s();
+	}
+	#a(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;
+	}
+	#o(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", r.insertBefore(i, n), i.append(this.#t, n, this.#n), this.#r = i;
+	}
+	#s() {
+		for (let [e, t] of [[this.#t, this.#e.canFlipPrev()], [this.#n, this.#e.canFlipNext()]]) e.disabled = !t, e.classList.toggle("zine-arrow-hidden", !t);
+	}
+	destroy() {
+		for (let e of this.#i) e();
+		this.#i = [], 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;
+	}
+}, S = {
+	thumbnails: p,
+	outline: g,
+	search: b
+}, C = [
+	"pointerdown",
+	"pointerup",
+	"pointermove",
+	"click",
+	"dblclick",
+	"wheel",
+	"keydown"
+], w = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i = [];
+	#a = null;
+	#o = [];
+	#s = null;
+	#c = null;
+	#l;
+	#u = null;
+	#d = null;
+	#f = null;
+	#p = null;
+	constructor(e, t, n) {
+		this.#e = e, this.#l = t;
+		let r = t.ownerDocument;
+		this.#t = r, u(r);
+		let i = n.position ?? "bottom", a = n.docked ?? !0;
+		this.#n = r.createElement("div"), this.#n.className = [
+			"zine-controls",
+			`zine-controls-${i}`,
+			a ? "zine-controls-docked" : "zine-controls-floating",
+			n.className
+		].filter(Boolean).join(" "), this.#n.setAttribute("role", "toolbar"), this.#n.setAttribute("aria-label", "Flipbook controls"), this.#r = r.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 C) this.#n.addEventListener(e, (e) => this.#h(e));
+		this.#m(t, i, a);
+		let o = () => this.#D();
+		this.#o.push(e.on("pageChanged", o)), this.#o.push(e.on("zoomChanged", o)), this.#o.push(e.on("flipEnd", o));
+		let s = (e) => {
+			this.#a && !this.#a.el.contains(e.target) && this.#T();
+		};
+		r.addEventListener("pointerdown", s, !0), this.#o.push(() => r.removeEventListener("pointerdown", s, !0));
+	}
+	#m(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.#_(e.items ?? n), (e.arrows ?? !0) && (this.#p = new x(this.#e, this.#l)), this.#D(), this.#A();
+	}
+	destroy() {
+		for (let e of this.#o) e();
+		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;
+	}
+	#h(e) {
+		e.stopPropagation();
+	}
+	#g(e = () => this.#T()) {
+		return {
+			zine: this.#e,
+			close: e
+		};
+	}
+	#_(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.#g()), this.#i.push({
+				el: r,
+				def: t
+			})) : r = this.#b(t, "zine-controls-btn"), this.#r.appendChild(r);
+		}
+	}
+	#v(e) {
+		return typeof e.title == "function" ? e.title(this.#g()) : e.title;
+	}
+	#y(e) {
+		return typeof e.icon == "function" ? e.icon(this.#g()) : e.icon;
+	}
+	#b(e, t, n = !1) {
+		let i = this.#t.createElement("button"), a = this.#v(e), o = this.#y(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.#x(e, i)), this.#i.push({
+			el: i,
+			def: e
+		}), i;
+	}
+	#x(e, t) {
+		if (!e.isDisabled?.(this.#g())) {
+			if (e.children) {
+				this.#a?.trigger === t ? this.#T() : this.#S(e, t);
+				return;
+			}
+			e.action?.(this.#g()), this.#D();
+		}
+	}
+	#S(t, n) {
+		this.#T();
+		let r = this.#t.createElement("div");
+		r.className = "zine-controls-menu", r.setAttribute("role", "menu");
+		let i = this.#g();
+		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.#g()), this.#i.push({
+				el: a,
+				def: t
+			})) : a = this.#b(t, "zine-controls-btn", !0), a.setAttribute("role", "menuitem"), r.appendChild(a);
+		}
+		this.#C(r, n), this.#D(), r.querySelector("button")?.focus();
+	}
+	#C(e, t) {
+		this.#n.appendChild(e), this.#a = {
+			el: e,
+			trigger: t
+		}, t.setAttribute("aria-expanded", "true"), this.#w(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 = `${s >= 0 ? s : o}px`;
+	}
+	#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();
+	}
+	#E(e) {
+		if (e.key === "Escape" && this.#a) {
+			let { trigger: t } = this.#a;
+			this.#T(), 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());
+	}
+	#D() {
+		let e = this.#g();
+		for (let { el: t, def: n } of this.#i) {
+			let i = n.children ? this.#k(n, e) : n.isVisible?.(e);
+			i !== void 0 && (t.style.display = i ? "" : "none");
+			let a = n.isDisabled?.(e) ?? !1;
+			for (let e of this.#O(t)) e.disabled = a;
+			if (this.#O(t).length || t.setAttribute("aria-disabled", String(a)), t.classList.toggle("zine-controls-off", a), 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));
+	}
+	#O(e) {
+		return e instanceof HTMLButtonElement || e instanceof HTMLInputElement ? [e] : [...e.querySelectorAll("button, input")];
+	}
+	#k(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 = () => {
+			let e = Number(t.value);
+			Number.isFinite(e) && this.#e.flipTo(Math.round(e) - 1), t.value = String(this.#e.getPage() + 1);
+		};
+		return t.addEventListener("keydown", (e) => {
+			e.key === "Enter" && (r(), t.blur());
+		}), t.addEventListener("blur", r), e.append(t, n), this.#s = t, e;
+	}
+	openPanel() {
+		return this.#d;
+	}
+	hasOutline() {
+		return this.#f === !0;
+	}
+	#A() {
+		this.#f !== null || !this.#e.canOutline() || (this.#f = !1, this.#e.getOutline().then((e) => {
+			if (e.length === 0) return;
+			this.#f = !0, this.#D();
+			let t = this.#a;
+			if (t) {
+				let e = this.#i.find((e) => e.el === t.trigger)?.def;
+				this.#T(), e && this.#S(e, t.trigger);
+			}
+		}));
+	}
+	togglePanel(e) {
+		let t = this.#d;
+		this.#u?.destroy(), this.#u = null, this.#d = null, t !== e && (this.#u = new S[e](this.#e, this.#l), this.#d = e), this.#D();
+	}
+};
+function T(e) {
+	s(), t({
+		id: "thumbnails",
+		title: () => e.openPanel() === "thumbnails" ? "Hide thumbnails" : "Show thumbnails",
+		icon: i.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: i.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: i.search,
+		isVisible: (e) => e.zine.canSearch(),
+		isActive: () => e.openPanel() === "search",
+		action: () => e.togglePanel("search")
+	});
+}
+//#endregion
+//#region src/controls/controls.ts
+function E(e, t, n = {}) {
+	let r = new w(e, t, n);
+	return T(r), r.mount(n), () => r.destroy();
+}
+//#endregion
+export { E as mountControls };
+
+//# sourceMappingURL=controls-BrPo8pKL.js.map