@zinejs/core 0.7.3 → 0.8.0

package/dist/controls-Bj72hxVJ.js

@@ -1,653 +0,0 @@
-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 = !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;
-	}
-	#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-Bj72hxVJ.js.map