@toneflix/flipbook 0.0.0-stage → 0.2.0

package/dist/index.mjs

@@ -0,0 +1,1026 @@
+import { BANDED_FRAMES, BookLayout, COVER_THEMES, DEFAULT_LABELS, FlipbookReader, Fold, PLACED_LAYOUTS, photoFrame } from "@toneflix/flipbook-core";
+export * from "@toneflix/flipbook-core";
+// src/dom.ts
+/** Creates an element. Strings become text, so book content is never parsed as HTML. */
+function h(tag, attrs = {}, ...children) {
+	const el = document.createElement(tag);
+	for (const [name, value] of Object.entries(attrs)) if (name === "style") Object.assign(el.style, value);
+	else if (value !== null && value !== void 0 && value !== false) el.setAttribute(name, value === true ? "" : String(value));
+	append(el, children);
+	return el;
+}
+function append(el, children) {
+	for (const child of children) if (child) el.append(child);
+}
+/** Builds trusted, static SVG markup (icons and ornaments shipped with the package). */
+function svg(markup) {
+	const template = document.createElement("template");
+	template.innerHTML = markup.trim();
+	return template.content.firstElementChild;
+}
+// src/landscape.ts
+/**
+* Goes full screen and locks the screen to landscape where the browser allows it (Chrome on
+* Android). iOS Safari supports neither for pages, so callers keep the rotate prompt there.
+*/
+async function enterLandscape(el) {
+	try {
+		if (!document.fullscreenElement && el.requestFullscreen) await el.requestFullscreen({ navigationUI: "hide" });
+	} catch {}
+	try {
+		const orientation = screen.orientation;
+		if (orientation?.lock) {
+			await orientation.lock("landscape");
+			return true;
+		}
+	} catch {}
+	return false;
+}
+/** Media queries that decide whether a phone is held upright. */
+function watchOrientation(onChange) {
+	const portrait = matchMedia("(orientation: portrait)");
+	const touch = matchMedia("(pointer: coarse)");
+	const update = () => onChange({
+		portrait: portrait.matches,
+		touch: touch.matches
+	});
+	update();
+	portrait.addEventListener("change", update);
+	touch.addEventListener("change", update);
+	window.addEventListener("resize", update);
+	return () => {
+		portrait.removeEventListener("change", update);
+		touch.removeEventListener("change", update);
+		window.removeEventListener("resize", update);
+	};
+}
+// src/pages.ts
+const LEAVES = [
+	14,
+	24,
+	34,
+	44,
+	54,
+	64,
+	74
+].map((x, i) => ({
+	x,
+	angle: i % 2 ? 38 : -38,
+	length: 26 - i * 2
+}));
+const sprig = (corner) => svg(`<svg viewBox="0 0 100 40" class="fb-print-frame-sprig is-${corner}" fill="none" stroke="currentColor" stroke-linecap="round" aria-hidden="true">
+    <path d="M4 20 Q 50 17, 92 20" stroke-width="1.2"/>
+    ${LEAVES.map(({ x, angle, length }) => `<g transform="translate(${x} 20) rotate(${angle}) scale(${length / 20})"><path d="M0 0 C 5 -5, 14 -5, 20 0 C 14 5, 5 5, 0 0 Z" stroke-width="1"/><path d="M2 0 L 16 0" stroke-width="0.6"/></g>`).join("")}
+  </svg>`);
+const ornament = () => svg(`<svg viewBox="0 0 40 40" class="fb-ornament" aria-hidden="true">
+    <circle cx="20" cy="20" r="18.5" fill="none" stroke="currentColor" stroke-opacity="0.6"/>
+    <path d="M20 9 L 27 20 L 20 31 L 13 20 Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
+    <circle cx="20" cy="20" r="2.2" fill="currentColor"/>
+  </svg>`);
+const image = (photo, className) => h("img", {
+	src: photo.src,
+	alt: photo.alt ?? "",
+	draggable: "false",
+	decoding: "async",
+	width: photo.width ?? void 0,
+	height: photo.height ?? void 0,
+	class: className
+});
+const boxStyle = ({ x, y, width, height, rotate }) => ({
+	left: `${x}cqw`,
+	top: `${y}cqw`,
+	width: `${width}cqw`,
+	height: `${height}cqw`,
+	...rotate ? { transform: `rotate(${rotate}deg)` } : {}
+});
+/** Light and grain over a whole page, with the curve into the spine on a spread. */
+const surface = (side) => h("div", {
+	class: `fb-page-surface ${side ? `is-${side}` : ""}`,
+	"aria-hidden": "true"
+}, h("div", { class: "fb-page-surface-grain" }), side && h("div", { class: "fb-page-surface-gutter" }), side && h("div", { class: "fb-page-surface-sheen" }));
+const serif = (text, style, italic = true, center = true) => h("p", {
+	class: `fb-serif ${italic ? "fb-italic" : ""} ${center ? "fb-center" : ""}`,
+	style
+}, text);
+/** A photo printed on a page inside its frame. */
+function printedPhoto(photo, frame, fit = "cover", show = true, scale = 1) {
+	const ratio = photo?.width && photo.height ? photo.width / photo.height : 4 / 3;
+	const box = h("div", {
+		class: "fb-print-frame-box",
+		style: { fontSize: `${scale}cqw` }
+	});
+	const print = h("div", { class: `fb-print-frame fb-frame-${frame} ${fit === "contain" ? "is-contained" : ""}` });
+	if (fit === "contain") print.style.setProperty("--ratio", String(ratio));
+	if (BANDED_FRAMES[frame]) print.append(h("span", {
+		class: "fb-print-frame-band",
+		"aria-hidden": "true"
+	}));
+	print.append(photo && show ? image(photo, "fb-print-photo fb-print-frame-photo") : h("div", { class: "fb-print-frame-photo fb-placeholder" }));
+	if (frame === "corners") for (const c of [
+		"tl",
+		"tr",
+		"bl",
+		"br"
+	]) print.append(h("span", {
+		class: `fb-print-frame-corner is-${c}`,
+		"aria-hidden": "true"
+	}));
+	if (frame === "botanical") print.append(sprig("tl"), sprig("br"));
+	box.append(print);
+	return box;
+}
+/** The inside of one book page. The parent must have `container-type: size`. */
+function renderPage(page, look, options = {}) {
+	const { layout, caption, photos } = page;
+	const { number, side, showImages = true, onSlotClick, activeSlot } = options;
+	const placed = PLACED_LAYOUTS[layout];
+	const root = h("div", { class: `fb-paper fb-paper-${look.paper} fb-page` });
+	const slot = (index, className = "", framed = false, style) => {
+		const photo = photos[index] ?? null;
+		const frame = photoFrame(page, photo, look.frame);
+		const el = h("div", {
+			class: [
+				"fb-slot",
+				className,
+				framed && "is-framed",
+				onSlotClick && "is-editable",
+				onSlotClick && activeSlot === index && "is-active"
+			].filter(Boolean).join(" "),
+			role: onSlotClick ? "button" : void 0,
+			"aria-label": onSlotClick ? `Photo slot ${index + 1}` : void 0,
+			style
+		});
+		if (onSlotClick) el.addEventListener("click", () => onSlotClick(index));
+		el.append(photo ? printedPhoto(photo, frame, framed ? "contain" : "cover", showImages) : h("div", { class: "fb-slot-empty" }, onSlotClick ? "Add a photo" : ""));
+		return el;
+	};
+	const column = (style, ...children) => h("div", {
+		class: "fb-column",
+		style
+	}, ...children);
+	const small = caption ? serif(caption, { fontSize: "3.8cqw" }) : null;
+	switch (layout) {
+		case "single":
+			root.append(slot(0, "fb-bleed"));
+			if (caption) root.append(h("div", { class: "fb-caption-over" }, caption));
+			break;
+		case "framed":
+			root.append(column({ padding: "10cqw 9cqw 6cqw" }, h("div", { class: "fb-grow" }, slot(0, "fb-fill", true)), serif(caption ?? "", {
+				marginTop: "5cqw",
+				fontSize: "4.2cqw",
+				minHeight: "6cqw",
+				lineHeight: "1.35"
+			})));
+			break;
+		case "pair":
+			root.append(column({
+				padding: "7cqw",
+				gap: "4cqw"
+			}, slot(0, "fb-grow"), slot(1, "fb-grow"), small));
+			break;
+		case "grid":
+			root.append(column({
+				padding: "7cqw",
+				gap: "3cqw"
+			}, h("div", {
+				class: "fb-grid fb-grow",
+				style: { gap: "3cqw" }
+			}, ...[
+				0,
+				1,
+				2,
+				3
+			].map((i) => slot(i))), small));
+			break;
+		case "collage":
+			root.append(column({
+				padding: "7cqw",
+				gap: "3cqw"
+			}, slot(0, "fb-grow-large"), h("div", {
+				class: "fb-row fb-grow",
+				style: { gap: "3cqw" }
+			}, slot(1, "fb-grow"), slot(2, "fb-grow")), small));
+			break;
+		case "text": root.append(h("div", {
+			class: "fb-column fb-center",
+			style: {
+				alignItems: "center",
+				justifyContent: "center",
+				padding: "14cqw 12cqw"
+			}
+		}, h("span", {
+			class: "fb-serif",
+			style: {
+				fontSize: "18cqw",
+				lineHeight: "0.6",
+				opacity: "0.3"
+			},
+			"aria-hidden": "true"
+		}, "“"), serif(caption || (onSlotClick ? "Write something in the caption box below." : ""), {
+			marginTop: "4cqw",
+			fontSize: "6cqw",
+			lineHeight: "1.4",
+			textWrap: "balance"
+		}, true, false)));
+	}
+	if (placed) {
+		root.append(...placed.slots.map((box, i) => slot(i, `fb-placed ${placed.loose ? "is-loose" : ""}`, false, boxStyle(box))));
+		if (caption) root.append(h("p", {
+			class: `fb-placed-caption fb-serif ${placed.prose ? "is-prose" : "fb-italic"}`,
+			style: boxStyle(placed.caption)
+		}, caption));
+	}
+	if (number !== void 0 && layout !== "single") root.append(h("span", {
+		class: "fb-page-number",
+		style: side === "left" ? { left: "0" } : { right: "0" }
+	}, String(number)));
+	root.append(surface(side));
+	return root;
+}
+/** The front cover: cloth with the title and an inset photo. */
+function renderCover(book, showImages = true) {
+	const panel = h("div", { class: "fb-cover-panel" }, book.kicker && h("p", { class: "fb-kicker" }, book.kicker), h("h1", {
+		class: "fb-serif",
+		style: {
+			marginTop: "5cqw",
+			fontSize: "9cqw",
+			fontWeight: "500",
+			lineHeight: "1.05",
+			textWrap: "balance"
+		}
+	}, book.title));
+	if (book.cover) panel.append(h("div", { class: "fb-cover-photo" }, showImages ? image(book.cover, "fb-photo") : h("div", { class: "fb-placeholder" })));
+	else if (book.subtitle) panel.append(serif(book.subtitle, {
+		marginTop: "6cqw",
+		fontSize: "4cqw",
+		opacity: "0.8"
+	}, true, false));
+	return h("div", { class: `fb-cover fb-cover-${book.theme ?? "classic"}` }, h("div", { class: "fb-hinge is-left" }), panel);
+}
+function renderBackCover(book) {
+	return h("div", { class: `fb-cover fb-cover-${book.theme ?? "classic"}` }, h("div", { class: "fb-hinge is-right" }), h("div", { class: "fb-imprint" }, ornament(), book.imprint && h("p", {
+		class: "fb-kicker",
+		style: {
+			marginTop: "2cqw",
+			fontSize: "2.4cqw",
+			opacity: "0.6"
+		}
+	}, book.imprint)));
+}
+function renderTitlePage(book, look, side) {
+	const credit = [book.author, book.year].filter(Boolean).join(" · ");
+	return h("div", {
+		class: `fb-paper fb-paper-${look.paper} fb-page fb-center`,
+		style: {
+			alignItems: "center",
+			justifyContent: "center",
+			padding: "12cqw"
+		}
+	}, ornament(), h("h2", {
+		class: "fb-serif",
+		style: {
+			marginTop: "6cqw",
+			fontSize: "7.5cqw",
+			fontWeight: "400",
+			lineHeight: "1.1",
+			textWrap: "balance"
+		}
+	}, book.title), book.subtitle && serif(book.subtitle, {
+		marginTop: "4cqw",
+		fontSize: "4cqw",
+		lineHeight: "1.45"
+	}, true, false), h("div", { style: {
+		marginTop: "7cqw",
+		height: "1px",
+		width: "20cqw",
+		background: "currentColor",
+		opacity: "0.3"
+	} }), credit && h("p", { style: {
+		marginTop: "5cqw",
+		fontSize: "2.6cqw",
+		letterSpacing: "0.2em",
+		textTransform: "uppercase"
+	} }, credit), surface(side));
+}
+function renderColophon(book, look, side) {
+	return h("div", {
+		class: `fb-paper fb-paper-${look.paper} fb-page fb-center`,
+		style: {
+			alignItems: "center",
+			justifyContent: "flex-end",
+			padding: "12cqw",
+			opacity: "0.9"
+		}
+	}, book.colophon && serif(book.colophon, { fontSize: "3.6cqw" }, true, false), surface(side));
+}
+function renderBlank(look, side) {
+	return h("div", { class: `fb-paper fb-paper-${look.paper} fb-page` }, surface(side));
+}
+/** Any face of a book. Page numbers and the spine curve need `side`. */
+function renderFace(face, book, side, numbered = true) {
+	const look = {
+		paper: book.paper ?? "ivory",
+		frame: book.frame ?? "none"
+	};
+	switch (face.kind) {
+		case "cover": return renderCover(book);
+		case "back": return renderBackCover(book);
+		case "title": return renderTitlePage(book, look, side);
+		case "colophon": return renderColophon(book, look, side);
+		case "blank": return renderBlank(look, side);
+		case "page": return renderPage(book.pages[face.index], look, {
+			number: numbered ? face.index + 1 : void 0,
+			side
+		});
+	}
+}
+// src/sound.ts
+let context = null;
+/**
+* A soft paper swish made from filtered noise, so no audio file is needed. Browsers only allow
+* audio after a user gesture, which a page turn always is.
+*/
+function playPageTurn(volume = .18) {
+	try {
+		context ??= new AudioContext();
+		const buffer = context.createBuffer(1, Math.floor(context.sampleRate * .45), context.sampleRate);
+		const data = buffer.getChannelData(0);
+		for (let i = 0; i < data.length; i++) {
+			const t = i / data.length;
+			const envelope = Math.sin(Math.PI * Math.min(1, t * 2.2)) * (1 - t) ** 1.5;
+			data[i] = (Math.random() * 2 - 1) * envelope * (.6 + .4 * Math.sin(t * 40));
+		}
+		const source = context.createBufferSource();
+		const filter = context.createBiquadFilter();
+		const gain = context.createGain();
+		source.buffer = buffer;
+		filter.type = "bandpass";
+		filter.frequency.value = 2200;
+		filter.Q.value = .6;
+		gain.gain.value = volume;
+		source.connect(filter).connect(gain).connect(context.destination);
+		source.start();
+	} catch {}
+}
+// src/Flipbook.ts
+/** Width / height of one page. */
+const PAGE_ASPECT = 3 / 4;
+const SOUND_KEY = "flipbook:sound";
+const DEFAULTS = {
+	layout: "auto",
+	controls: true,
+	autoHide: 3200,
+	thumbnails: true,
+	soundButton: true,
+	sound: false,
+	fullscreenButton: true,
+	landscape: true,
+	keyboard: true,
+	stiffCovers: true,
+	shading: 1,
+	labels: DEFAULT_LABELS
+};
+const OVERLAYS = [
+	{
+		name: "under",
+		z: 2
+	},
+	{
+		name: "bend",
+		z: 4
+	},
+	{
+		name: "shadow",
+		z: 5
+	},
+	{
+		name: "curl",
+		z: 7
+	}
+];
+const polygon = (points, dx = 0, dy = 0) => points.length ? `polygon(${points.map((p) => `${(p.x + dx).toFixed(2)}px ${(p.y + dy).toFixed(2)}px`).join(", ")})` : "polygon(0 0)";
+const icon = (d) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="${d}" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+const ICONS = {
+	prev: icon("M15 6l-6 6 6 6"),
+	next: icon("M9 6l6 6-6 6"),
+	expand: icon("M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"),
+	collapse: icon("M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5"),
+	soundOn: icon("M4 10v4h3l5 4V6L7 10H4zM16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11"),
+	soundOff: icon("M4 10v4h3l5 4V6L7 10H4zM17 10l4 4M21 10l-4 4"),
+	grid: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"8\" height=\"14\" rx=\"1\"/><rect x=\"13\" y=\"5\" width=\"8\" height=\"14\" rx=\"1\"/></svg>",
+	phone: "<svg viewBox=\"0 0 64 64\" class=\"fb-rotate-hint\" aria-hidden=\"true\"><rect x=\"20\" y=\"6\" width=\"24\" height=\"52\" rx=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"/><circle cx=\"32\" cy=\"51\" r=\"2\" fill=\"currentColor\"/></svg>"
+};
+const readStoredSound = () => {
+	try {
+		return localStorage.getItem(SOUND_KEY);
+	} catch {
+		return null;
+	}
+};
+/**
+* A photo book that opens across two pages, turned by dragging, flicking, tapping, buttons or
+* keys. Mount it into any sized element; call `destroy()` when it goes away.
+*/
+var Flipbook = class Flipbook {
+	container;
+	root;
+	reader;
+	settings;
+	layout;
+	size = {
+		width: 0,
+		height: 0
+	};
+	orientation = {
+		portrait: false,
+		touch: false
+	};
+	portraitChoice = "ask";
+	soundOn;
+	stripOpen = false;
+	chromeVisible = true;
+	hideTimer;
+	lastPlace = "";
+	rendering = false;
+	dirty = false;
+	faces = /* @__PURE__ */ new Map();
+	overlays = /* @__PURE__ */ new Map();
+	cleanups = [];
+	els;
+	constructor(container, options) {
+		this.container = container;
+		this.settings = Flipbook.resolve(options);
+		this.soundOn = this.settings.sound;
+		this.layout = this.buildLayout();
+		this.reader = new FlipbookReader(this.layout, {
+			frame: (frame, turn) => this.paint(frame, turn),
+			change: () => this.render(),
+			flip: () => {
+				if (this.soundOn) playPageTurn();
+				this.settings.onFlip?.();
+			}
+		}, {
+			flipped: this.layout.flippedForPage(this.settings.startPage),
+			physics: options.physics,
+			grip: options.grip
+		});
+		this.root = h("div", { class: "fb-root" });
+		this.els = this.build();
+		container.append(this.root);
+		const stored = readStoredSound();
+		if (this.settings.soundButton && stored) this.soundOn = stored === "on";
+		this.listen();
+		this.poke();
+		this.render();
+	}
+	/** Changes options in place; the reader keeps their page. */
+	update(options) {
+		const bookChanged = options.book && options.book !== this.settings.book;
+		this.settings = Flipbook.resolve({
+			...this.settings,
+			...options,
+			labels: {
+				...this.settings.labels,
+				...options.labels
+			}
+		});
+		if (options.sound !== void 0) this.soundOn = options.sound;
+		if (options.physics) this.reader.engine.physics = {
+			...this.reader.engine.physics,
+			...options.physics
+		};
+		if (options.grip) this.reader.grip = {
+			...this.reader.grip,
+			...options.grip
+		};
+		if (bookChanged || options.stiffCovers !== void 0) this.clearFaces();
+		this.els.title.textContent = this.settings.book.title;
+		this.poke();
+		this.render();
+	}
+	next() {
+		this.reader.next();
+	}
+	prev() {
+		this.reader.prev();
+	}
+	/** Opens at a `flipped` value. */
+	go(flipped) {
+		this.reader.go(flipped);
+	}
+	/** Opens at a page (1-based). */
+	goToPage(page) {
+		this.reader.go(this.reader.layout.flippedForPage(page));
+	}
+	destroy() {
+		this.reader.destroy();
+		clearTimeout(this.hideTimer);
+		this.cleanups.forEach((cleanup) => cleanup());
+		this.root.remove();
+	}
+	static resolve(options) {
+		const defined = Object.fromEntries(Object.entries(options).filter(([, v]) => v !== void 0));
+		return {
+			...DEFAULTS,
+			...defined,
+			labels: {
+				...DEFAULT_LABELS,
+				...options.labels
+			}
+		};
+	}
+	get spread() {
+		const { layout, landscape } = this.settings;
+		const mobilePortrait = landscape && this.orientation.touch && this.orientation.portrait;
+		const stage = this.els?.stage.getBoundingClientRect();
+		const narrow = !!stage && stage.width > 0 && stage.width / stage.height < .95;
+		if (layout !== "auto") return layout === "spread";
+		return !(mobilePortrait && this.portraitChoice === "single") && !narrow;
+	}
+	buildLayout() {
+		return new BookLayout(this.settings.book.pages.length, {
+			spread: this.spread,
+			stiffCovers: this.settings.stiffCovers
+		});
+	}
+	build() {
+		const button = (label, markup, onClick) => {
+			const el = h("button", {
+				type: "button",
+				class: "fb-button",
+				"aria-label": label,
+				title: label
+			});
+			el.append(svg(markup));
+			el.addEventListener("click", onClick);
+			return el;
+		};
+		const title = h("h1", { class: "fb-title" }, this.settings.book.title);
+		const byline = h("p", { class: "fb-byline" });
+		const sound = button("", ICONS.soundOff, () => this.toggleSound());
+		const fullscreen = button("", ICONS.expand, () => this.toggleFullscreen());
+		const topRight = h("div", { class: "fb-bar-group" }, sound, fullscreen);
+		const top = h("div", { class: "fb-bar fb-bar-top" }, h("div", { class: "fb-bar-group" }, h("div", { class: "fb-heading" }, title, byline)), topRight);
+		const shadow = h("div", { class: "fb-book-shadow" });
+		const leftEdge = h("div", { class: "fb-edge" });
+		const rightEdge = h("div", { class: "fb-edge" });
+		const spine = h("div", { class: "fb-spine" });
+		const book = h("div", { class: "fb-book" }, shadow, leftEdge, rightEdge, spine);
+		const stage = h("div", { class: "fb-stage" }, book);
+		const prev = button("", ICONS.prev, () => this.reader.prev());
+		const next = button("", ICONS.next, () => this.reader.next());
+		const pages = h("button", {
+			type: "button",
+			class: "fb-pages-button",
+			"aria-live": "polite"
+		});
+		const bottom = h("div", { class: "fb-bar fb-bar-bottom" }, prev, pages, next);
+		pages.addEventListener("click", () => {
+			if (!this.settings.thumbnails) return;
+			this.stripOpen = !this.stripOpen;
+			this.render();
+		});
+		for (const { name, z } of OVERLAYS) {
+			const light = h("div", { class: "fb-light" });
+			const clip = h("div", {
+				class: "fb-overlay",
+				style: { zIndex: String(z) }
+			}, light);
+			this.overlays.set(name, {
+				clip,
+				light
+			});
+		}
+		this.root.append(top, stage, bottom);
+		return {
+			top,
+			title,
+			byline,
+			topRight,
+			sound,
+			fullscreen,
+			stage,
+			book,
+			shadow,
+			leftEdge,
+			rightEdge,
+			spine,
+			bottom,
+			prev,
+			pages,
+			next,
+			strip: null,
+			rotate: null
+		};
+	}
+	listen() {
+		const { stage } = this.els;
+		const on = (target, type, handler) => {
+			target.addEventListener(type, handler);
+			this.cleanups.push(() => target.removeEventListener(type, handler));
+		};
+		const observer = new ResizeObserver(() => this.render());
+		observer.observe(stage);
+		this.cleanups.push(() => observer.disconnect());
+		this.cleanups.push(watchOrientation((state) => {
+			this.orientation = state;
+			this.render();
+		}));
+		on(stage, "pointerdown", (e) => {
+			if (e.button === 0) this.reader.down(this.toBook(e), e.pointerId);
+		});
+		on(stage, "pointermove", (e) => {
+			const p = this.toBook(e);
+			this.poke();
+			if (e.pointerType === "mouse") this.reader.hover(p);
+			if (this.reader.move(p, e.pointerId) && !stage.hasPointerCapture(e.pointerId)) stage.setPointerCapture(e.pointerId);
+		});
+		on(stage, "pointerup", (e) => {
+			if (this.reader.up(this.toBook(e), e.pointerId) !== "tap") return;
+			const rect = stage.getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			if (x > rect.width * 2 / 3) this.reader.next();
+			else if (x < rect.width / 3) this.reader.prev();
+		});
+		on(stage, "pointerleave", () => this.reader.leave());
+		on(stage, "pointercancel", () => this.reader.cancel());
+		on(this.root, "keydown", (e) => this.settings.keyboard === true && this.onKey(e));
+		on(window, "keydown", (e) => this.settings.keyboard === "global" && this.onKey(e));
+		on(document, "fullscreenchange", () => this.render());
+	}
+	onKey(e) {
+		if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) return;
+		if ([
+			"ArrowRight",
+			"PageDown",
+			" "
+		].includes(e.key)) {
+			e.preventDefault();
+			this.reader.next();
+		} else if (["ArrowLeft", "PageUp"].includes(e.key)) {
+			e.preventDefault();
+			this.reader.prev();
+		} else if (e.key === "Home") this.reader.go(0);
+		else if (e.key === "End") this.reader.go(this.reader.layout.length);
+		else if (e.key === "Escape" && this.stripOpen) {
+			this.stripOpen = false;
+			this.render();
+		}
+	}
+	/** Pointer position from the top of the spine. */
+	toBook(e) {
+		const rect = this.els.book.getBoundingClientRect();
+		return {
+			x: e.clientX - (rect.left + (this.layout.spread ? rect.width / 2 : 0)),
+			y: e.clientY - rect.top
+		};
+	}
+	poke() {
+		const { autoHide } = this.settings;
+		clearTimeout(this.hideTimer);
+		if (!this.chromeVisible) {
+			this.chromeVisible = true;
+			this.renderChrome();
+		}
+		if (autoHide === false) return;
+		this.hideTimer = setTimeout(() => {
+			this.chromeVisible = false;
+			this.renderChrome();
+		}, autoHide);
+	}
+	toggleSound() {
+		this.soundOn = !this.soundOn;
+		if (this.soundOn) playPageTurn();
+		try {
+			localStorage.setItem(SOUND_KEY, this.soundOn ? "on" : "off");
+		} catch {}
+		this.renderChrome();
+	}
+	async toggleFullscreen() {
+		if (document.fullscreenElement) await document.exitFullscreen().catch(() => {});
+		else await enterLandscape(this.root);
+	}
+	clearFaces() {
+		this.faces.forEach((el) => el.remove());
+		this.faces.clear();
+	}
+	/** Brings the DOM in line with the reader. Re-entrant calls (from the reader) run once more at the end. */
+	render() {
+		if (this.rendering) {
+			this.dirty = true;
+			return;
+		}
+		this.rendering = true;
+		do {
+			this.dirty = false;
+			this.renderOnce();
+		} while (this.dirty);
+		this.rendering = false;
+	}
+	renderOnce() {
+		const { settings, reader, els } = this;
+		const { book, controls } = settings;
+		const stage = els.stage.getBoundingClientRect();
+		const spread = this.spread;
+		if (spread !== this.layout.spread || book.pages.length !== this.layout.pageCount || settings.stiffCovers !== this.layout.stiffCovers) {
+			this.layout = this.buildLayout();
+			this.clearFaces();
+		}
+		const across = spread ? 2 : 1;
+		const marginY = !controls || stage.height < 500 ? 16 : Math.min(150, stage.height * .16);
+		const availW = Math.max(0, stage.width - (spread ? 64 : 24));
+		const availH = Math.max(0, stage.height - marginY);
+		const pageW = Math.floor(Math.min(availH * PAGE_ASPECT, availW / across));
+		const pageH = Math.floor(pageW / PAGE_ASPECT);
+		this.size = {
+			width: pageW,
+			height: pageH
+		};
+		reader.configure({
+			layout: this.layout,
+			width: pageW,
+			height: pageH
+		});
+		const { flipped, active, settled, atStart, atEnd } = reader;
+		const leaves = this.layout.leaves;
+		let shift = 0;
+		if (spread && atStart && settled) shift = -pageW / 2;
+		if (spread && atEnd && settled) shift = pageW / 2;
+		this.root.style.background = settings.background ?? Flipbook.stageTint(book);
+		this.root.tabIndex = settings.keyboard === true ? 0 : -1;
+		els.book.hidden = pageW <= 0;
+		Object.assign(els.book.style, {
+			width: `${pageW * across}px`,
+			height: `${pageH}px`,
+			transform: `translateX(${shift}px)`,
+			cursor: reader.engine.dragging ? "grabbing" : "grab",
+			clipPath: spread ? "" : "inset(-50% -50% -50% 0)"
+		});
+		Object.assign(els.shadow.style, {
+			left: spread && atStart && settled ? "52%" : "2%",
+			right: spread && atEnd && settled ? "52%" : "2%"
+		});
+		const open = spread && !atStart && !atEnd;
+		const edge = (count) => Math.min(10, Math.max(0, count) * .8);
+		const leftEdge = open && flipped > 1 ? edge(flipped - 1) : 0;
+		const rightEdge = (open || spread && atStart) && flipped < leaves.length - 1 ? edge(leaves.length - flipped - 1) : 0;
+		Object.assign(els.leftEdge.style, {
+			display: leftEdge ? "" : "none",
+			left: `${-leftEdge}px`,
+			width: `${leftEdge}px`
+		});
+		Object.assign(els.rightEdge.style, {
+			display: rightEdge ? "" : "none",
+			right: `${-rightEdge}px`,
+			width: `${rightEdge}px`
+		});
+		els.spine.style.left = `${spread ? pageW : 0}px`;
+		this.renderFaces(active, flipped, pageW, pageH);
+		this.renderOverlays(active, pageW, pageH);
+		this.renderChrome();
+		this.renderStrip();
+		this.renderRotatePrompt();
+		const place = `${spread}:${flipped}`;
+		if (place !== this.lastPlace) {
+			this.lastPlace = place;
+			settings.onPageChange?.({
+				flipped,
+				label: reader.label,
+				faces: this.layout.visible(flipped)
+			});
+		}
+	}
+	/** Faces of the leaves around the opening. Each keeps its element while it moves between roles, so pages never reload mid-turn. */
+	renderFaces(active, flipped, pageW, pageH) {
+		const leaves = this.layout.leaves;
+		const turnLeaf = active?.leaf ?? null;
+		const turnDir = active?.dir ?? 1;
+		const rightLeaf = turnLeaf !== null ? turnLeaf + 1 : flipped;
+		const leftLeaf = turnLeaf !== null ? turnLeaf - 1 : flipped - 1;
+		const wanted = /* @__PURE__ */ new Set();
+		for (let k = Math.max(0, flipped - 2); k <= Math.min(leaves.length - 1, flipped + 1); k++) for (const side of ["front", "back"]) {
+			const key = `${k}:${side}`;
+			const role = k === turnLeaf ? side === "front" === (turnDir === 1) ? "turning" : "flap" : side === "front" ? k === rightLeaf ? "right" : "spare" : k === leftLeaf && this.layout.spread ? "left" : "spare";
+			const onLeft = role === "left" || role === "turning" && turnDir === -1 && !active?.stiff;
+			let el = this.faces.get(key);
+			if (!el) {
+				el = h("div", { class: "fb-face" });
+				el.append(renderFace(side === "front" ? leaves[k].front : leaves[k].back, this.settings.book, side === "front" ? "right" : "left"));
+				this.faces.set(key, el);
+				this.els.spine.append(el);
+			}
+			wanted.add(key);
+			Object.assign(el.style, {
+				left: `${onLeft ? -pageW : 0}px`,
+				width: `${pageW}px`,
+				height: `${pageH}px`,
+				zIndex: String({
+					right: 1,
+					left: 1,
+					turning: 3,
+					flap: 6,
+					spare: 0
+				}[role]),
+				visibility: role === "spare" ? "hidden" : "visible"
+			});
+			el.setAttribute("aria-hidden", String(role !== "left" && role !== "right"));
+			if (k !== turnLeaf) Object.assign(el.style, {
+				transform: "",
+				transformOrigin: "",
+				clipPath: ""
+			});
+		}
+		for (const [key, el] of this.faces) {
+			if (wanted.has(key)) continue;
+			el.remove();
+			this.faces.delete(key);
+		}
+		if (active) this.paint(this.reader.engine.frame, active);
+	}
+	renderOverlays(active, pageW, pageH) {
+		const show = !!active && !active.stiff;
+		const w = (share) => `${(pageW * share).toFixed(1)}px`;
+		const lights = {
+			under: `linear-gradient(to right, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.2) ${w(.05)}, rgb(0 0 0 / 0.06) ${w(.16)}, transparent ${w(.3)})`,
+			bend: `linear-gradient(to right, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.04) ${w(.05)}, transparent ${w(.1)})`,
+			shadow: "rgb(0 0 0 / 0.55)",
+			curl: `linear-gradient(to right, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.1) ${w(.035)}, rgb(255 255 255 / 0.2) ${w(.11)}, rgb(255 255 255 / 0.06) ${w(.25)}, rgb(0 0 0 / 0.05) ${w(.6)}, rgb(0 0 0 / 0.12) ${w(1)})`
+		};
+		for (const [name, { clip, light }] of this.overlays) {
+			if (!show) {
+				clip.remove();
+				continue;
+			}
+			const shadow = name === "shadow";
+			Object.assign(clip.style, {
+				left: `${-pageW}px`,
+				top: `${-pageH}px`,
+				width: `${pageW * 2}px`,
+				height: `${pageH * 3}px`,
+				filter: shadow ? `blur(${Math.max(3, pageW * .012)}px)` : ""
+			});
+			Object.assign(light.style, shadow ? {
+				inset: "0",
+				background: lights[name]
+			} : {
+				width: `${pageW * 3}px`,
+				height: `${pageH * 4}px`,
+				background: lights[name]
+			});
+			if (!clip.isConnected) this.els.spine.append(clip);
+		}
+		if (show && active) this.paint(this.reader.engine.frame, active);
+	}
+	paint(frame, turn) {
+		const { width: pageW, height: pageH } = this.size;
+		const s = turn.dir;
+		const front = this.faces.get(`${turn.leaf}:front`);
+		const back = this.faces.get(`${turn.leaf}:back`);
+		if (frame.stiff) {
+			const perspective = `perspective(${Math.max(1800, pageW * 5)}px) rotateY(${Fold.hinge(frame.origin, frame.point, s)}deg)`;
+			if (front) Object.assign(front.style, {
+				transformOrigin: "0 50%",
+				transform: perspective,
+				clipPath: ""
+			});
+			if (back) Object.assign(back.style, {
+				transformOrigin: "0 50%",
+				transform: `${perspective} translateX(${pageW}px) rotateY(180deg)`,
+				clipPath: ""
+			});
+			return;
+		}
+		const top = s === 1 ? front : back;
+		const under = s === 1 ? back : front;
+		const fold = new Fold(pageW, pageH, frame.origin, frame.point);
+		const strength = fold.shade * this.settings.shading;
+		if (top) Object.assign(top.style, {
+			transformOrigin: "",
+			transform: "",
+			clipPath: polygon(fold.flat.map((p) => ({
+				x: s === 1 ? p.x : pageW - p.x,
+				y: p.y
+			})))
+		});
+		if (under) Object.assign(under.style, {
+			transformOrigin: "0 0",
+			transform: fold.flapMatrix(s),
+			clipPath: polygon(fold.folded.map((p) => ({
+				x: s === 1 ? pageW - p.x : p.x,
+				y: p.y
+			})))
+		});
+		const layer = (name, region, toward, opacity) => {
+			const refs = this.overlays.get(name);
+			if (!refs) return;
+			const shape = polygon(region.map((p) => ({
+				x: s * p.x,
+				y: p.y
+			})), pageW, pageH);
+			refs.clip.style.opacity = String(opacity);
+			if (name === "shadow") {
+				refs.light.style.clipPath = shape;
+				return;
+			}
+			const angle = Math.atan2(toward * fold.normal.y, s * toward * fold.normal.x);
+			refs.clip.style.clipPath = shape;
+			refs.light.style.transform = `translate(${s * fold.center.x + pageW}px, ${fold.center.y + pageH}px) rotate(${angle}rad) translateY(-50%)`;
+		};
+		layer("under", fold.folded, 1, strength);
+		layer("bend", fold.flat, -1, strength);
+		layer("shadow", fold.flap, -1, strength * .6);
+		layer("curl", fold.flap, -1, strength);
+	}
+	renderChrome() {
+		const { els, settings, reader } = this;
+		const { labels } = settings;
+		const shown = this.chromeVisible || this.stripOpen;
+		const fullscreen = document.fullscreenElement === this.root;
+		const setButton = (el, label, markup) => {
+			el.setAttribute("aria-label", label);
+			el.title = label;
+			if (markup) el.replaceChildren(svg(markup));
+		};
+		els.top.hidden = !settings.controls;
+		els.bottom.hidden = !settings.controls;
+		els.top.classList.toggle("is-hidden", !shown);
+		els.bottom.classList.toggle("is-hidden", !shown);
+		els.title.textContent = settings.book.title;
+		els.byline.textContent = settings.book.author ? labels.byline(settings.book.author) : "";
+		els.byline.hidden = !settings.book.author;
+		els.sound.hidden = !settings.soundButton;
+		els.fullscreen.hidden = !settings.fullscreenButton;
+		setButton(els.sound, this.soundOn ? labels.soundOff : labels.soundOn, this.soundOn ? ICONS.soundOn : ICONS.soundOff);
+		setButton(els.fullscreen, fullscreen ? labels.exitFullscreen : labels.fullscreen, fullscreen ? ICONS.collapse : ICONS.expand);
+		setButton(els.prev, labels.previous);
+		setButton(els.next, labels.next);
+		els.prev.disabled = reader.atStart;
+		els.next.disabled = reader.atEnd;
+		els.pages.replaceChildren(...settings.thumbnails ? [svg(ICONS.grid)] : [], reader.label);
+		els.pages.setAttribute("aria-expanded", String(this.stripOpen));
+	}
+	/** A strip of every spread (or page) to jump around the book. */
+	renderStrip() {
+		const open = this.stripOpen && this.settings.thumbnails;
+		const { book } = this.settings;
+		if (!open) {
+			this.els.strip?.remove();
+			this.els.strip = null;
+			return;
+		}
+		const list = h("div", { class: "fb-strip-list" });
+		for (const stop of this.layout.stops()) {
+			const button = h("button", {
+				type: "button",
+				class: "fb-strip-stop",
+				"aria-current": String(stop.flipped === this.reader.flipped),
+				"aria-label": `Go to ${BookLayout.describe(stop.faces)}`
+			});
+			for (const face of stop.faces) button.append(h("div", { class: "fb-strip-face" }, renderFace(face, book, void 0, false)));
+			button.addEventListener("click", () => {
+				this.stripOpen = false;
+				this.reader.go(stop.flipped);
+				this.render();
+			});
+			list.append(button);
+		}
+		const strip = h("div", { class: "fb-strip" }, list);
+		this.els.strip?.remove();
+		this.els.strip = strip;
+		this.els.bottom.before(strip);
+		list.querySelector("[aria-current='true']")?.scrollIntoView({
+			inline: "center",
+			block: "nearest"
+		});
+	}
+	/** Shown on phones held upright: books are read sideways. */
+	renderRotatePrompt() {
+		const { landscape, layout, labels } = this.settings;
+		if (!(landscape && layout !== "single" && this.orientation.touch && this.orientation.portrait && this.portraitChoice === "ask")) {
+			this.els.rotate?.remove();
+			this.els.rotate = null;
+			return;
+		}
+		if (this.els.rotate) return;
+		const primary = h("button", {
+			type: "button",
+			class: "fb-rotate-primary"
+		}, labels.rotateFullscreen);
+		const secondary = h("button", {
+			type: "button",
+			class: "fb-rotate-secondary"
+		}, labels.rotateSingle);
+		primary.addEventListener("click", () => enterLandscape(this.root));
+		secondary.addEventListener("click", () => {
+			this.portraitChoice = "single";
+			this.render();
+		});
+		this.els.rotate = h("div", { class: "fb-rotate" }, svg(ICONS.phone), h("div", {}, h("p", { class: "fb-rotate-title" }, labels.rotateTitle), h("p", { class: "fb-rotate-body" }, labels.rotateBody)), primary, secondary);
+		this.root.append(this.els.rotate);
+	}
+	static stageTint(book) {
+		const [inner, middle, outer] = COVER_THEMES[book.theme ?? "classic"].stage;
+		return `radial-gradient(ellipse at 50% 40%, ${inner} 0%, ${middle} 55%, ${outer} 100%)`;
+	}
+};
+export { Flipbook, enterLandscape, playPageTurn, printedPhoto, renderBackCover, renderBlank, renderColophon, renderCover, renderFace, renderPage, renderTitlePage, watchOrientation };