@openpageflip/core 0.0.1 → 0.1.0

package/dist/index.js

@@ -1,3 +1,45 @@
+//#region src/animation.ts
+const browserClock = {
+	now: () => performance.now(),
+	requestFrame: (callback) => requestAnimationFrame(callback),
+	cancelFrame: (handle) => cancelAnimationFrame(handle)
+};
+/** A single time-based animation. Frames are requested only while it runs. */
+function startTween(clock, spec) {
+	const startedAt = clock.now();
+	let handle = null;
+	let done = false;
+	const end = () => {
+		if (done) return;
+		done = true;
+		if (handle !== null) clock.cancelFrame(handle);
+		handle = null;
+		spec.onFrame(1);
+		spec.onEnd();
+	};
+	const tick = (time) => {
+		handle = null;
+		if (done) return;
+		const t = spec.duration <= 0 ? 1 : Math.min(1, (time - startedAt) / spec.duration);
+		if (t >= 1) {
+			end();
+			return;
+		}
+		spec.onFrame(spec.easing(t));
+		handle = clock.requestFrame(tick);
+	};
+	if (spec.duration <= 0) end();
+	else handle = clock.requestFrame(tick);
+	return {
+		finish: end,
+		cancel: () => {
+			done = true;
+			if (handle !== null) clock.cancelFrame(handle);
+			handle = null;
+		}
+	};
+}
+//#endregion
 //#region src/options.ts
 /**
 * Public option vocabularies. Plain `as const` objects instead of enums so they survive
@@ -24,7 +66,1470 @@ const PageDensity = {
 	soft: "soft",
 	hard: "hard"
 };
+/** Which way a page is turning: `forward` reads on, `back` returns to the previous spread. */
+const FlipDirection = {
+	forward: "forward",
+	back: "back"
+};
+/** What the book is showing: one page (`portrait`) or a two-page spread (`landscape`). */
+const Orientation = {
+	portrait: "portrait",
+	landscape: "landscape"
+};
+/** What the book is doing right now. */
+const FlipState = {
+	/** Nothing in motion. */
+	read: "read",
+	/** A corner is lifted because the pointer hovers over it. */
+	foldCorner: "fold_corner",
+	/** The user is dragging a corner. */
+	userFold: "user_fold",
+	/** A flip animation is running. */
+	flipping: "flipping"
+};
+/** How the book sizes itself. */
+const SizeMode = {
+	/** Pages are exactly `width` x `height` CSS pixels. */
+	fixed: "fixed",
+	/** Pages scale to the container, keeping the `width:height` ratio, between `minWidth` and `maxWidth`. */
+	stretch: "stretch"
+};
+/** When a click or tap turns the page. */
+const ClickMode = {
+	anywhere: "anywhere",
+	corners: "corners",
+	off: "off"
+};
+const DEFAULTS = {
+	size: SizeMode.fixed,
+	minWidth: 100,
+	maxWidth: 2e3,
+	layout: Layout.auto,
+	cover: false,
+	startPage: 0,
+	flipDuration: 1e3,
+	easing: (t) => t,
+	shadows: true,
+	shadowOpacity: 1,
+	autoSize: true,
+	click: ClickMode.anywhere,
+	drag: true,
+	swipe: true,
+	swipeDistance: 30,
+	hoverCorners: true,
+	ignoreDragOn: "a, button, input, textarea, select, [data-opf-no-flip]"
+};
+function isOneOf(vocabulary, value) {
+	return Object.values(vocabulary).includes(value);
+}
+/** Fill in defaults and reject options that could only produce a broken book. */
+function resolveOptions(user) {
+	const { pages: _pages, ...rest } = user;
+	const options = {
+		...DEFAULTS,
+		...rest
+	};
+	const positive = (name) => {
+		const value = options[name];
+		if (!(Number.isFinite(value) && value > 0)) throw new TypeError(`@openpageflip/core: "${name}" must be a positive number, got ${String(value)}`);
+	};
+	positive("width");
+	positive("height");
+	positive("flipDuration");
+	positive("minWidth");
+	positive("maxWidth");
+	if (options.maxWidth < options.minWidth) throw new TypeError(`@openpageflip/core: "maxWidth" (${options.maxWidth}) is below "minWidth" (${options.minWidth})`);
+	if (!isOneOf(SizeMode, options.size)) throw new TypeError(`@openpageflip/core: unknown "size" ${String(options.size)}`);
+	if (!isOneOf(Layout, options.layout)) throw new TypeError(`@openpageflip/core: unknown "layout" ${String(options.layout)}`);
+	if (!isOneOf(ClickMode, options.click)) throw new TypeError(`@openpageflip/core: unknown "click" ${String(options.click)}`);
+	if (!(options.shadowOpacity >= 0 && options.shadowOpacity <= 1)) throw new TypeError(`@openpageflip/core: "shadowOpacity" must be within 0..1, got ${options.shadowOpacity}`);
+	if (!Number.isInteger(options.startPage) || options.startPage < 0) throw new TypeError(`@openpageflip/core: "startPage" must be a non-negative integer, got ${options.startPage}`);
+	return options;
+}
+//#endregion
+//#region src/coords.ts
+/**
+* Three coordinate spaces meet here: the container (where pointer events land), the book rect,
+* and the active page. Page space has its origin at the page's outer top corner with x growing
+* toward the spine, so a backward flip mirrors x.
+*/
+function containerToBook(pos, rect) {
+	return {
+		x: pos.x - rect.left,
+		y: pos.y - rect.top
+	};
+}
+function containerToPage(pos, rect, direction) {
+	return {
+		x: direction === FlipDirection.forward ? pos.x - rect.left - rect.width / 2 : rect.width / 2 - pos.x + rect.left,
+		y: pos.y - rect.top
+	};
+}
+function pageToContainer(pos, rect, direction) {
+	return {
+		x: direction === FlipDirection.forward ? pos.x + rect.left + rect.width / 2 : rect.width / 2 - pos.x + rect.left,
+		y: pos.y + rect.top
+	};
+}
+//#endregion
+//#region src/geometry/point.ts
+function distance(a, b) {
+	return Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2);
+}
+/** Angle between two lines in radians, via the dot product of their normals. */
+function angleBetweenLines(one, two) {
+	const a1 = one[0].y - one[1].y;
+	const a2 = two[0].y - two[1].y;
+	const b1 = one[1].x - one[0].x;
+	const b2 = two[1].x - two[0].x;
+	return Math.acos((a1 * a2 + b1 * b2) / (Math.sqrt(a1 * a1 + b1 * b1) * Math.sqrt(a2 * a2 + b2 * b2)));
+}
+/** Inclusive containment test. */
+function isPointInRect(rect, point) {
+	return point.x >= rect.left && point.x <= rect.left + rect.width && point.y >= rect.top && point.y <= rect.top + rect.height;
+}
+/** Rotate `point` by `angle` radians (clockwise in screen space) and translate by `origin`. */
+function rotatePoint(point, origin, angle) {
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	return {
+		x: point.x * cos + point.y * sin + origin.x,
+		y: point.y * cos - point.x * sin + origin.y
+	};
+}
+/**
+* Keep `point` inside the circle around `center`. Returns the very same object when it is
+* already inside, so callers can detect clamping by identity.
+*
+* Quirk kept from the original: when the point is left of the y axis the whole x result is
+* negated (not mirrored around the center), and a degenerate line falls back to `y = radius`.
+*/
+function clampToCircle(center, radius, point) {
+	if (distance(center, point) <= radius) return point;
+	const a = center.x;
+	const b = center.y;
+	const n = point.x;
+	const m = point.y;
+	let x = Math.sqrt(radius ** 2 * (a - n) ** 2 / ((a - n) ** 2 + (b - m) ** 2)) + a;
+	if (point.x < 0) x *= -1;
+	let y = (x - a) * (b - m) / (a - n) + b;
+	if (a - n + b === 0) y = radius;
+	return {
+		x,
+		y
+	};
+}
+/** Two lines are the same line, so they have no single intersection point. */
+const Collinear = Symbol("collinear");
+/**
+* Intersection of two infinite lines: a point, `null` when parallel, or `Collinear` when they
+* coincide. The fold calculation treats `Collinear` as "this pointer position is degenerate".
+*/
+function intersectLines(one, two) {
+	const a1 = one[0].y - one[1].y;
+	const a2 = two[0].y - two[1].y;
+	const b1 = one[1].x - one[0].x;
+	const b2 = two[1].x - two[0].x;
+	const c1 = one[0].x * one[1].y - one[1].x * one[0].y;
+	const c2 = two[0].x * two[1].y - two[1].x * two[0].y;
+	const x = -((c1 * b2 - c2 * b1) / (a1 * b2 - a2 * b1));
+	const y = -((a1 * c2 - a2 * c1) / (a1 * b2 - a2 * b1));
+	if (Number.isFinite(x) && Number.isFinite(y)) return {
+		x,
+		y
+	};
+	const det1 = a1 * c2 - a2 * c1;
+	const det2 = b1 * c2 - b2 * c1;
+	return Math.abs(det1 - det2) < .1 ? Collinear : null;
+}
+/** `intersectLines`, additionally dropping a hit that lands outside `bounds`. */
+function intersectLinesWithin(bounds, one, two) {
+	const hit = intersectLines(one, two);
+	if (hit === null || hit === Collinear) return hit;
+	return isPointInRect(bounds, hit) ? hit : null;
+}
+//#endregion
+//#region src/geometry/fold.ts
+/**
+* The fold: where a page lands when its corner is dragged to a point.
+*
+* A pure function of the drag point and the page size. This is the kernel that StPageFlip
+* users came for; it derives from `FlipCalculation` (MIT, Oleg Litovski) with the same output
+* for the same input, checked by the parity tests. Differences are deliberate: numbers instead
+* of strings for the page size (so fractional layouts stay exact), a result instead of thrown
+* errors for degenerate positions, and no `null` entries inside clip polygons.
+*/
+/**
+* Returns `null` when the point is degenerate (the corner is at rest, or the fold line would
+* coincide with a page edge). Callers keep the previous fold for that frame, as the original did.
+*/
+function computeFold(input) {
+	const { direction, corner, pageWidth, pageHeight } = input;
+	const positioned = resolvePosition(input);
+	if (positioned === null) return null;
+	const { position, angle, rect } = positioned;
+	const intersections = intersect(input, position, rect);
+	if (intersections === null) return null;
+	const { top, side, bottom } = intersections;
+	const flippingClip = [rect.topLeft];
+	if (top) flippingClip.push(top);
+	let clipBottom = false;
+	if (side === null) clipBottom = true;
+	else flippingClip.push(side);
+	if (bottom) flippingClip.push(bottom);
+	if (clipBottom || corner === FlipCorner.bottom) flippingClip.push(rect.bottomLeft);
+	const bottomClip = [];
+	if (top) bottomClip.push(top);
+	if (corner === FlipCorner.top) bottomClip.push({
+		x: pageWidth,
+		y: 0
+	});
+	else {
+		if (top !== null) bottomClip.push({
+			x: pageWidth,
+			y: 0
+		});
+		bottomClip.push({
+			x: pageWidth,
+			y: pageHeight
+		});
+	}
+	if (side !== null) {
+		if (top === null || distance(side, top) >= 10) bottomClip.push(side);
+	} else if (corner === FlipCorner.top) bottomClip.push({
+		x: pageWidth,
+		y: pageHeight
+	});
+	if (bottom) bottomClip.push(bottom);
+	if (top) bottomClip.push(top);
+	const shadowStart = corner === FlipCorner.top ? top : side ?? top;
+	const shadowEnd = shadowStart !== side && side !== null ? side : bottom;
+	let shadow = null;
+	if (shadowStart !== null && shadowEnd !== null) {
+		const raw = angleBetweenLines([shadowStart, shadowEnd], [{
+			x: 0,
+			y: 0
+		}, {
+			x: pageWidth,
+			y: 0
+		}]);
+		shadow = {
+			start: shadowStart,
+			angle: direction === FlipDirection.forward ? raw : Math.PI - raw
+		};
+	}
+	return {
+		angle: direction === FlipDirection.forward ? -angle : angle,
+		position,
+		progress: Math.abs((position.x - pageWidth) / (2 * pageWidth) * 100),
+		rect,
+		intersections,
+		flippingClip,
+		bottomClip,
+		activeCorner: direction === FlipDirection.forward ? rect.topLeft : rect.topRight,
+		bottomPagePosition: direction === FlipDirection.back ? {
+			x: pageWidth,
+			y: 0
+		} : {
+			x: 0,
+			y: 0
+		},
+		shadow
+	};
+}
+/** Clamp the drag point to what the paper allows and derive the page rotation from it. */
+function resolvePosition(input) {
+	const { corner, pageWidth, pageHeight } = input;
+	let position = input.point;
+	let geometry = angleAndRect(input, position);
+	if (geometry === null) return null;
+	const spineNear = corner === FlipCorner.top ? {
+		x: 0,
+		y: 0
+	} : {
+		x: 0,
+		y: pageHeight
+	};
+	const spineFar = corner === FlipCorner.top ? {
+		x: 0,
+		y: pageHeight
+	} : {
+		x: 0,
+		y: 0
+	};
+	const clamped = clampToCircle(spineNear, pageWidth, position);
+	if (clamped !== position) {
+		position = clamped;
+		geometry = angleAndRect(input, position);
+		if (geometry === null) return null;
+	}
+	const crossed = corner === FlipCorner.top ? geometry.rect.bottomRight : geometry.rect.topRight;
+	const opposite = corner === FlipCorner.top ? geometry.rect.topLeft : geometry.rect.bottomLeft;
+	if (crossed.x <= 0) {
+		position = clampToCircle(spineFar, Math.sqrt(pageWidth ** 2 + pageHeight ** 2), opposite);
+		geometry = angleAndRect(input, position);
+		if (geometry === null) return null;
+	}
+	if (Math.abs(position.x - pageWidth) < 1 && Math.abs(position.y) < 1) return null;
+	return {
+		position,
+		...geometry
+	};
+}
+function angleAndRect(input, position) {
+	const angle = foldAngle(input, position);
+	if (angle === null) return null;
+	return {
+		angle,
+		rect: pageRect(input, position, angle)
+	};
+}
+/** Rotation that puts the page corner at `position`, folded around the crease. */
+function foldAngle(input, position) {
+	const { corner, pageWidth, pageHeight } = input;
+	const left = pageWidth - position.x + 1;
+	const top = corner === FlipCorner.bottom ? pageHeight - position.y : position.y;
+	let angle = 2 * Math.acos(left / Math.sqrt(top * top + left * left));
+	if (top < 0) angle = -angle;
+	const flat = Math.PI - angle;
+	if (!Number.isFinite(angle) || flat >= 0 && flat < .003) return null;
+	return corner === FlipCorner.bottom ? -angle : angle;
+}
+function pageRect(input, position, angle) {
+	const { corner, pageWidth, pageHeight } = input;
+	const dy = corner === FlipCorner.top ? 0 : -pageHeight;
+	return {
+		topLeft: rotatePoint({
+			x: 0,
+			y: dy
+		}, position, angle),
+		topRight: rotatePoint({
+			x: pageWidth,
+			y: dy
+		}, position, angle),
+		bottomLeft: rotatePoint({
+			x: 0,
+			y: dy + pageHeight
+		}, position, angle),
+		bottomRight: rotatePoint({
+			x: pageWidth,
+			y: dy + pageHeight
+		}, position, angle)
+	};
+}
+/** Where the fold line and the page's far edge cross the page borders. `null` when degenerate. */
+function intersect(input, position, rect) {
+	const { corner, pageWidth, pageHeight } = input;
+	const bounds = {
+		left: -1,
+		top: -1,
+		width: pageWidth + 2,
+		height: pageHeight + 2
+	};
+	const topEdge = [{
+		x: 0,
+		y: 0
+	}, {
+		x: pageWidth,
+		y: 0
+	}];
+	const rightEdge = [{
+		x: pageWidth,
+		y: 0
+	}, {
+		x: pageWidth,
+		y: pageHeight
+	}];
+	const bottomEdge = [{
+		x: 0,
+		y: pageHeight
+	}, {
+		x: pageWidth,
+		y: pageHeight
+	}];
+	const top = corner === FlipCorner.top ? intersectLinesWithin(bounds, [position, rect.topRight], topEdge) : intersectLinesWithin(bounds, [rect.topLeft, rect.topRight], topEdge);
+	const side = corner === FlipCorner.top ? intersectLinesWithin(bounds, [position, rect.bottomLeft], rightEdge) : intersectLinesWithin(bounds, [position, rect.topLeft], rightEdge);
+	const bottom = intersectLinesWithin(bounds, [rect.bottomLeft, rect.bottomRight], bottomEdge);
+	if (top === Collinear || side === Collinear || bottom === Collinear) return null;
+	return {
+		top,
+		side,
+		bottom
+	};
+}
+//#endregion
+//#region src/pagination.ts
+function buildSpreads(pageCount, orientation, cover) {
+	const hardByPosition = /* @__PURE__ */ new Set();
+	const landscape = [];
+	let start = 0;
+	if (cover && pageCount > 0) {
+		hardByPosition.add(0);
+		landscape.push([0]);
+		start = 1;
+	}
+	for (let i = start; i < pageCount; i += 2) if (i < pageCount - 1) landscape.push([i, i + 1]);
+	else {
+		landscape.push([i]);
+		hardByPosition.add(i);
+	}
+	const portrait = Array.from({ length: pageCount }, (_, i) => [i]);
+	return {
+		spreads: orientation === Orientation.portrait ? portrait : landscape,
+		hardByPosition
+	};
+}
+function spreadIndexOfPage(spreads, page) {
+	const index = spreads.findIndex((spread) => spread[0] === page || spread[1] === page);
+	return index === -1 ? null : index;
+}
+/** Pages lying flat on the left and right for a spread. */
+function staticPages(spreads, orientation, spreadIndex, pageCount) {
+	const spread = spreads[spreadIndex];
+	if (spread === void 0) return {
+		left: null,
+		right: null
+	};
+	if (spread.length === 2) return {
+		left: spread[0],
+		right: spread[1]
+	};
+	if (orientation === Orientation.landscape && spread[0] === pageCount - 1) return {
+		left: spread[0],
+		right: null
+	};
+	return {
+		left: null,
+		right: spread[0]
+	};
+}
+/**
+* The page that lifts (its back face is what the viewer sees mid-flip) and the page revealed
+* underneath it. `null` when there is no spread in that direction.
+*/
+function flipPages(spreads, orientation, spreadIndex, direction) {
+	const forward = direction === FlipDirection.forward;
+	if (orientation === Orientation.portrait) {
+		const current = spreads[spreadIndex]?.[0];
+		const other = spreads[forward ? spreadIndex + 1 : spreadIndex - 1]?.[0];
+		if (current === void 0 || other === void 0) return null;
+		return forward ? {
+			flipping: current,
+			bottom: other
+		} : {
+			flipping: other,
+			bottom: other
+		};
+	}
+	const target = spreads[forward ? spreadIndex + 1 : spreadIndex - 1];
+	if (target === void 0) return null;
+	if (target.length === 1) return {
+		flipping: target[0],
+		bottom: target[0]
+	};
+	return forward ? {
+		flipping: target[0],
+		bottom: target[1]
+	} : {
+		flipping: target[1],
+		bottom: target[0]
+	};
+}
+//#endregion
+//#region src/controller.ts
+/**
+* The headless heart of the book: which spread is open, what a pointer is doing to a corner,
+* and where the flip animation is. It knows nothing about the DOM; it hands `Frame`s to a
+* renderer. The behaviour (corner detection, hover fold, drop thresholds, animation paths)
+* is the original's, so the book feels the same.
+*/
+/** Pointer travel before a press counts as a drag rather than a click. */
+const DRAG_THRESHOLD = 5;
+/** How far a hovered corner lifts. */
+const HOVER_LIFT = 50;
+/** Animation paths longer than this take the full `flipDuration`; shorter ones scale down. */
+const FULL_FLIP_LENGTH = 1e3;
+var FlipController = class {
+	pages;
+	spreads = [];
+	spreadIndex = 0;
+	currentPage = 0;
+	orientation;
+	rect;
+	left = null;
+	right = null;
+	state = FlipState.read;
+	session = null;
+	tween = null;
+	/** Settles the promise of the running animation when it is cut short. */
+	settleTween = null;
+	pressStart = null;
+	dragged = false;
+	options;
+	clock;
+	hooks;
+	constructor(options, clock, hooks, pages, layout) {
+		this.options = options;
+		this.clock = clock;
+		this.hooks = hooks;
+		this.pages = pages;
+		this.orientation = layout.orientation;
+		this.rect = layout.rect;
+		this.rebuildSpreads();
+	}
+	get page() {
+		return this.currentPage;
+	}
+	get pageCount() {
+		return this.pages.length;
+	}
+	get currentState() {
+		return this.state;
+	}
+	get currentOrientation() {
+		return this.orientation;
+	}
+	get bookRect() {
+		return this.rect;
+	}
+	setPages(pages) {
+		this.endSession();
+		this.pages = pages;
+		this.rebuildSpreads();
+		this.showPage(Math.min(this.currentPage, Math.max(0, pages.length - 1)));
+	}
+	/** Returns true when the orientation changed, which re-paginates the book. */
+	setLayout(layout) {
+		this.rect = layout.rect;
+		const orientationChanged = layout.orientation !== this.orientation;
+		if (orientationChanged) {
+			this.endSession();
+			this.orientation = layout.orientation;
+			this.rebuildSpreads();
+		}
+		this.showPage(this.currentPage);
+		return orientationChanged;
+	}
+	rebuildSpreads() {
+		const { spreads, hardByPosition } = buildSpreads(this.pages.length, this.orientation, this.options.cover);
+		this.spreads = spreads;
+		for (const [index, page] of this.pages.entries()) if (hardByPosition.has(index)) {
+			page.density = PageDensity.hard;
+			page.drawingDensity = PageDensity.hard;
+		}
+	}
+	showPage(page) {
+		const index = spreadIndexOfPage(this.spreads, page);
+		if (index === null) return;
+		this.spreadIndex = index;
+		this.showSpread();
+	}
+	showNext() {
+		if (this.spreadIndex < this.spreads.length - 1) {
+			this.spreadIndex++;
+			this.showSpread();
+		}
+	}
+	showPrev() {
+		if (this.spreadIndex > 0) {
+			this.spreadIndex--;
+			this.showSpread();
+		}
+	}
+	showSpread() {
+		const { left, right } = staticPages(this.spreads, this.orientation, this.spreadIndex, this.pages.length);
+		this.left = left;
+		this.right = right;
+		const spread = this.spreads[this.spreadIndex];
+		const page = spread === void 0 ? this.currentPage : spread[0];
+		const changed = page !== this.currentPage;
+		this.currentPage = page;
+		this.render();
+		if (changed) this.hooks.onPage(page);
+	}
+	flipNext(corner) {
+		return this.flipFrom({
+			x: this.rect.left + this.rect.pageWidth * 2 - 10,
+			y: corner === FlipCorner.top ? 1 : this.rect.height - 2
+		});
+	}
+	flipPrev(corner) {
+		return this.flipFrom({
+			x: this.rect.left + 10,
+			y: corner === FlipCorner.top ? 1 : this.rect.height - 2
+		});
+	}
+	/**
+	* Jumps to the spread beside the target without animation, then animates the last turn.
+	* The static pages keep showing the current spread until that turn lands.
+	*/
+	flipTo(page, corner) {
+		const target = spreadIndexOfPage(this.spreads, page);
+		if (target === null || target === this.spreadIndex) return Promise.resolve(false);
+		if (target > this.spreadIndex) {
+			this.spreadIndex = target - 1;
+			this.syncCurrentPage();
+			return this.flipNext(corner);
+		}
+		this.spreadIndex = target + 1;
+		this.syncCurrentPage();
+		return this.flipPrev(corner);
+	}
+	syncCurrentPage() {
+		const spread = this.spreads[this.spreadIndex];
+		if (spread !== void 0) this.currentPage = spread[0];
+	}
+	/** Full animated flip starting at a container point, as a click would. */
+	flipFrom(containerPos) {
+		if (this.session !== null) this.tween?.finish();
+		const session = this.start(containerPos);
+		if (session === null) return Promise.resolve(false);
+		this.setState(FlipState.flipping);
+		const { pageWidth, pageHeight } = session;
+		const margin = pageHeight / 10;
+		const yStart = session.corner === FlipCorner.bottom ? pageHeight - margin : margin;
+		const yDest = session.corner === FlipCorner.bottom ? pageHeight : 0;
+		const from = {
+			x: pageWidth - margin,
+			y: yStart
+		};
+		this.applyFold(from);
+		return this.animateTo(from, {
+			x: -pageWidth,
+			y: yDest
+		}, true, true);
+	}
+	/** Let go of a dragged corner: complete the turn if it crossed the spine, otherwise drop it back. */
+	release() {
+		const session = this.session;
+		if (session === null || session.fold === null) return Promise.resolve(false);
+		const pos = session.fold.position;
+		const y = session.corner === FlipCorner.bottom ? session.pageHeight : 0;
+		return pos.x <= 0 ? this.animateTo(pos, {
+			x: -session.pageWidth,
+			y
+		}, true, true) : this.animateTo(pos, {
+			x: session.pageWidth,
+			y
+		}, false, true);
+	}
+	/** Resolves with whether the page turned. A cancelled animation resolves with `false`. */
+	animateTo(from, to, turn, reset) {
+		this.tween?.finish();
+		const dx = to.x - from.x;
+		const dy = to.y - from.y;
+		const duration = Math.min(1, Math.max(Math.abs(dx), Math.abs(dy)) / FULL_FLIP_LENGTH) * this.options.flipDuration;
+		return new Promise((resolve) => {
+			this.settleTween = resolve;
+			this.tween = startTween(this.clock, {
+				duration,
+				easing: this.options.easing,
+				onFrame: (t) => this.applyFold({
+					x: from.x + dx * t,
+					y: from.y + dy * t
+				}),
+				onEnd: () => {
+					this.tween = null;
+					this.settleTween = null;
+					const session = this.session;
+					if (session === null) {
+						resolve(false);
+						return;
+					}
+					if (turn) {
+						if (session.direction === FlipDirection.back) this.showPrev();
+						else this.showNext();
+					}
+					if (reset) {
+						this.endSession();
+						this.setState(FlipState.read);
+						this.render();
+					}
+					resolve(turn);
+				}
+			});
+		});
+	}
+	/** Mouse moving over the book without a button down. */
+	hover(containerPos) {
+		if (this.state !== FlipState.read && this.state !== FlipState.foldCorner) return;
+		const { pageWidth, height } = this.rect;
+		if (!this.isOnCorner(containerPos)) {
+			if (this.session === null) return;
+			this.setState(FlipState.read);
+			this.tween?.finish();
+			this.release();
+			return;
+		}
+		if (this.session !== null) {
+			this.applyFold(containerToPage(containerPos, this.rect, this.session.direction));
+			return;
+		}
+		const session = this.start(containerPos);
+		if (session === null) return;
+		this.setState(FlipState.foldCorner);
+		this.applyFold({
+			x: pageWidth - 1,
+			y: 1
+		});
+		const yStart = session.corner === FlipCorner.bottom ? height - 1 : 1;
+		const yDest = session.corner === FlipCorner.bottom ? height - HOVER_LIFT : HOVER_LIFT;
+		this.animateTo({
+			x: pageWidth - 1,
+			y: yStart
+		}, {
+			x: pageWidth - HOVER_LIFT,
+			y: yDest
+		}, false, false);
+	}
+	/** The mouse left the book: drop any hovered corner. */
+	hoverEnd() {
+		if (this.state !== FlipState.foldCorner) return;
+		this.setState(FlipState.read);
+		this.tween?.finish();
+		this.release();
+	}
+	pointerDown(containerPos) {
+		this.pressStart = containerPos;
+		this.dragged = false;
+	}
+	/** A pressed pointer moved. Starts a drag once it travels past the click threshold. */
+	pointerDrag(containerPos) {
+		if (this.pressStart === null || !this.options.drag) return;
+		if (!this.dragged && distance(this.pressStart, containerPos) <= DRAG_THRESHOLD) return;
+		this.dragged = true;
+		const session = this.session ?? this.start(this.pressStart);
+		if (session === null) return;
+		this.setState(FlipState.userFold);
+		this.applyFold(containerToPage(containerPos, this.rect, session.direction));
+	}
+	/** The pointer was released. A press without a drag is a click. */
+	pointerUp(containerPos) {
+		if (this.pressStart === null) return;
+		this.pressStart = null;
+		if (this.dragged) {
+			this.release();
+			return;
+		}
+		this.click(containerPos);
+	}
+	/** The browser took the pointer (a scroll, for instance): drop the corner, no click. */
+	pointerCancel() {
+		if (this.pressStart === null) return;
+		this.pressStart = null;
+		if (this.dragged) this.release();
+	}
+	/** A quick horizontal swipe: turn the page the swipe points at. */
+	swipe(direction, corner) {
+		this.pressStart = null;
+		const session = this.session;
+		if (session !== null && session.fold !== null) {
+			if (session.direction !== direction) return this.release();
+			const y = corner === FlipCorner.bottom ? session.pageHeight : 0;
+			return this.animateTo(session.fold.position, {
+				x: -session.pageWidth,
+				y
+			}, true, true);
+		}
+		return direction === FlipDirection.forward ? this.flipNext(corner) : this.flipPrev(corner);
+	}
+	click(containerPos) {
+		if (this.options.click === ClickMode.off) return;
+		if (this.options.click === ClickMode.corners && !this.isOnCorner(containerPos)) return;
+		this.flipFrom(containerPos);
+	}
+	/** Decide direction and corner from where the pointer is, and pick the pages that move. */
+	start(containerPos) {
+		this.endSession();
+		const bookPos = containerToBook(containerPos, this.rect);
+		const direction = this.directionAt(bookPos);
+		const corner = bookPos.y >= this.rect.height / 2 ? FlipCorner.bottom : FlipCorner.top;
+		if (!(direction === FlipDirection.forward ? this.currentPage < this.pages.length - 1 : this.currentPage >= 1)) return null;
+		const pair = flipPages(this.spreads, this.orientation, this.spreadIndex, direction);
+		if (pair === null) return null;
+		if (this.orientation === Orientation.landscape) {
+			const flipping = this.pages[pair.flipping];
+			const neighbour = this.pages[direction === FlipDirection.back ? pair.flipping + 1 : pair.flipping - 1];
+			if (flipping !== void 0 && neighbour !== void 0 && flipping.density !== neighbour.density) {
+				flipping.drawingDensity = PageDensity.hard;
+				neighbour.drawingDensity = PageDensity.hard;
+			}
+		}
+		this.session = {
+			direction,
+			corner,
+			flipping: pair.flipping,
+			bottom: pair.bottom,
+			pageWidth: this.rect.pageWidth,
+			pageHeight: this.rect.height,
+			fold: null,
+			progress: 0,
+			hardAngle: 0,
+			shadow: null
+		};
+		return this.session;
+	}
+	endSession() {
+		this.tween?.cancel();
+		this.tween = null;
+		this.settleTween?.(false);
+		this.settleTween = null;
+		this.session = null;
+		for (const page of this.pages) page.drawingDensity = page.density;
+	}
+	/** Move the lifted corner to a page-space point. Degenerate points keep the previous fold. */
+	applyFold(pagePos) {
+		const session = this.session;
+		if (session === null) return;
+		const fold = computeFold({
+			direction: session.direction,
+			corner: session.corner,
+			pageWidth: session.pageWidth,
+			pageHeight: session.pageHeight,
+			point: pagePos
+		});
+		if (fold === null) return;
+		const { progress } = fold;
+		session.fold = fold;
+		session.progress = progress;
+		session.hardAngle = (session.direction === FlipDirection.forward ? 90 : -90) * ((200 - progress * 2) / 100);
+		session.shadow = this.options.shadows && fold.shadow !== null ? {
+			pos: fold.shadow.start,
+			angle: fold.shadow.angle,
+			width: session.pageWidth * 3 / 4 * (progress / 100),
+			opacity: (100 - progress) * (100 * this.options.shadowOpacity) / 100 / 100,
+			direction: session.direction,
+			progress: progress * 2
+		} : null;
+		this.render();
+	}
+	directionAt(bookPos) {
+		if (this.orientation === Orientation.portrait) return bookPos.x - this.rect.pageWidth <= this.rect.width / 5 ? FlipDirection.back : FlipDirection.forward;
+		return bookPos.x < this.rect.width / 2 ? FlipDirection.back : FlipDirection.forward;
+	}
+	isOnCorner(containerPos) {
+		const { pageWidth, height, width } = this.rect;
+		const reach = Math.sqrt(pageWidth ** 2 + height ** 2) / 5;
+		const p = containerToBook(containerPos, this.rect);
+		return p.x > 0 && p.y > 0 && p.x < width && p.y < height && (p.x < reach || p.x > width - reach) && (p.y < reach || p.y > height - reach);
+	}
+	setState(state) {
+		if (this.state === state) return;
+		this.state = state;
+		this.hooks.onState(state);
+	}
+	frame() {
+		const session = this.session;
+		return {
+			rect: this.rect,
+			orientation: this.orientation,
+			left: this.left,
+			right: this.right,
+			flip: session !== null && session.fold !== null ? {
+				direction: session.direction,
+				corner: session.corner,
+				flipping: session.flipping,
+				bottom: session.bottom,
+				fold: session.fold,
+				progress: session.progress,
+				hardAngle: session.hardAngle,
+				shadow: session.shadow
+			} : null
+		};
+	}
+	render() {
+		this.hooks.onFrame(this.frame());
+	}
+	destroy() {
+		this.endSession();
+	}
+};
+//#endregion
+//#region src/events.ts
+/** Minimal typed event emitter. `on` returns the unsubscribe function. */
+function createEmitter() {
+	const listeners = /* @__PURE__ */ new Map();
+	const off = (name, listener) => {
+		listeners.get(name)?.delete(listener);
+	};
+	return {
+		on(name, listener, options) {
+			let set = listeners.get(name);
+			if (set === void 0) {
+				set = /* @__PURE__ */ new Set();
+				listeners.set(name, set);
+			}
+			set.add(listener);
+			const unsubscribe = () => off(name, listener);
+			options?.signal?.addEventListener("abort", unsubscribe, { once: true });
+			return unsubscribe;
+		},
+		off,
+		emit(name, event) {
+			const set = listeners.get(name);
+			if (set === void 0) return;
+			for (const listener of [...set]) listener(event);
+		},
+		clear() {
+			listeners.clear();
+		}
+	};
+}
+//#endregion
+//#region src/input.ts
+/** A press shorter than this that travels `swipeDistance` is a swipe rather than a drag. */
+const SWIPE_TIMEOUT = 250;
+function attachInput(container, controller, options) {
+	let press = null;
+	const local = (event) => {
+		const bounds = container.getBoundingClientRect();
+		return {
+			x: event.clientX - bounds.left,
+			y: event.clientY - bounds.top
+		};
+	};
+	const onDown = (event) => {
+		if (press !== null) return;
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		if (event.target instanceof Element && event.target.closest(options.ignoreDragOn) !== null) return;
+		const start = local(event);
+		press = {
+			id: event.pointerId,
+			start,
+			startedAt: event.timeStamp
+		};
+		try {
+			container.setPointerCapture(event.pointerId);
+		} catch {}
+		controller.pointerDown(start);
+		if (event.pointerType === "mouse") event.preventDefault();
+	};
+	const onMove = (event) => {
+		if (press !== null) {
+			if (event.pointerId === press.id) controller.pointerDrag(local(event));
+			return;
+		}
+		if (event.pointerType === "mouse" && options.hoverCorners) controller.hover(local(event));
+	};
+	const onUp = (event) => {
+		if (press === null || event.pointerId !== press.id) return;
+		const { start, startedAt } = press;
+		press = null;
+		const end = local(event);
+		const dx = end.x - start.x;
+		const dy = end.y - start.y;
+		const quick = event.timeStamp - startedAt < SWIPE_TIMEOUT;
+		if (options.swipe && quick && Math.abs(dx) > options.swipeDistance && Math.abs(dy) < options.swipeDistance * 2) {
+			const rect = controller.bookRect;
+			const corner = start.y - rect.top < rect.height / 2 ? FlipCorner.top : FlipCorner.bottom;
+			controller.swipe(dx > 0 ? FlipDirection.back : FlipDirection.forward, corner);
+			return;
+		}
+		controller.pointerUp(end);
+	};
+	const onCancel = (event) => {
+		if (press === null || event.pointerId !== press.id) return;
+		press = null;
+		controller.pointerCancel();
+	};
+	const onLeave = (event) => {
+		if (press === null && event.pointerType === "mouse") controller.hoverEnd();
+	};
+	container.addEventListener("pointerdown", onDown);
+	container.addEventListener("pointermove", onMove, { passive: true });
+	container.addEventListener("pointerup", onUp);
+	container.addEventListener("pointercancel", onCancel);
+	container.addEventListener("pointerleave", onLeave);
+	return () => {
+		container.removeEventListener("pointerdown", onDown);
+		container.removeEventListener("pointermove", onMove);
+		container.removeEventListener("pointerup", onUp);
+		container.removeEventListener("pointercancel", onCancel);
+		container.removeEventListener("pointerleave", onLeave);
+	};
+}
+//#endregion
+//#region src/layout.ts
+/**
+* Page size and orientation for a container. Same arithmetic as the original, so the book lands
+* on the same pixels; `layout` only overrides the "is the container too narrow" decision.
+*/
+function computeLayout(containerWidth, containerHeight, options) {
+	const middle = {
+		x: containerWidth / 2,
+		y: containerHeight / 2
+	};
+	const ratio = options.width / options.height;
+	const portraitIf = (narrow) => options.layout === Layout.single || options.layout === Layout.auto && narrow ? Orientation.portrait : Orientation.landscape;
+	let orientation;
+	let pageWidth = options.width;
+	let pageHeight = options.height;
+	if (options.size === SizeMode.stretch) {
+		orientation = portraitIf(containerWidth < options.minWidth * 2);
+		pageWidth = orientation === Orientation.portrait ? containerWidth : containerWidth / 2;
+		if (pageWidth > options.maxWidth) pageWidth = options.maxWidth;
+		pageHeight = pageWidth / ratio;
+		if (pageHeight > containerHeight) {
+			pageHeight = containerHeight;
+			pageWidth = pageHeight * ratio;
+		}
+	} else orientation = portraitIf(containerWidth < pageWidth * 2);
+	const left = orientation === Orientation.portrait ? middle.x - pageWidth / 2 - pageWidth : middle.x - pageWidth;
+	return {
+		orientation,
+		rect: {
+			left,
+			top: middle.y - pageHeight / 2,
+			width: pageWidth * 2,
+			height: pageHeight,
+			pageWidth
+		}
+	};
+}
+//#endregion
+//#region src/pages.ts
+function createPages(elements, hardByPosition) {
+	return elements.map((element, index) => {
+		const density = hardByPosition.has(index) || element.dataset["density"] === PageDensity.hard ? PageDensity.hard : PageDensity.soft;
+		return {
+			element,
+			density,
+			drawingDensity: density
+		};
+	});
+}
+//#endregion
+//#region src/render/dom.ts
+const Z = {
+	flat: 1,
+	bottom: 3,
+	hardShadow: 4,
+	flipping: 5,
+	hardInnerShadow: 5,
+	shadow: 10
+};
+const CLASS = {
+	book: "opf-book",
+	page: "opf-page",
+	left: "opf-page--left",
+	right: "opf-page--right",
+	flat: "opf-page--flat",
+	soft: "opf-page--soft",
+	hard: "opf-page--hard",
+	shadow: "opf-shadow"
+};
+/**
+* The inline properties this renderer owns on a page element. Every draw sets all of them
+* (clearing the ones it does not use) and touches nothing else, so a page keeps whatever other
+* inline style its author or framework gave it.
+*/
+const PAGE_STYLE = [
+	"display",
+	"position",
+	"zIndex",
+	"left",
+	"top",
+	"width",
+	"height",
+	"transformOrigin",
+	"transform",
+	"clipPath",
+	"backfaceVisibility"
+];
+function applyPageStyle(el, style) {
+	for (const key of PAGE_STYLE) el.style[key] = style[key] ?? "";
+}
+var DomRenderer = class {
+	shadows;
+	pages = [];
+	saved = /* @__PURE__ */ new Map();
+	/**
+	* In portrait a page lifts away from itself: the flat page stays and a mirrored copy folds
+	* over it. The copy is inert, has no ids, and lives only for the duration of the flip.
+	*/
+	clone = null;
+	container;
+	options;
+	constructor(container, options) {
+		this.container = container;
+		this.options = options;
+		container.classList.add(CLASS.book);
+		const shadow = (name) => {
+			const el = document.createElement("div");
+			el.className = `${CLASS.shadow} ${CLASS.shadow}--${name}`;
+			el.style.display = "none";
+			container.append(el);
+			return el;
+		};
+		this.shadows = {
+			outer: shadow("outer"),
+			inner: shadow("inner"),
+			hardOuter: shadow("hard-outer"),
+			hardInner: shadow("hard-inner")
+		};
+		this.applyContainerSizing();
+	}
+	setPages(pages) {
+		for (const page of this.pages) if (!pages.some((next) => next.element === page.element)) this.restore(page.element);
+		this.pages = pages;
+		for (const page of pages) {
+			if (this.saved.has(page.element)) continue;
+			this.saved.set(page.element, {
+				cssText: page.element.style.cssText,
+				className: page.element.className
+			});
+			page.element.classList.add(CLASS.page);
+			if (page.element.parentElement !== this.container) this.container.append(page.element);
+		}
+	}
+	/** Aspect ratio and width limits on the container, when the book sizes itself. */
+	applyContainerSizing(orientation = Orientation.landscape) {
+		const { autoSize, size, width, height, minWidth, maxWidth, layout } = this.options;
+		if (!autoSize) return;
+		const pagesAcross = layout === "spread" ? 2 : 1;
+		const style = this.container.style;
+		style.width = "100%";
+		style.minWidth = `${(size === "fixed" ? width : minWidth) * pagesAcross}px`;
+		style.maxWidth = `${(size === "fixed" ? width : maxWidth) * 2}px`;
+		style.aspectRatio = orientation === Orientation.portrait ? `${width} / ${height}` : `${width * 2} / ${height}`;
+	}
+	render(frame) {
+		const { rect, flip } = frame;
+		const active = /* @__PURE__ */ new Set([
+			frame.left,
+			frame.right,
+			flip?.flipping,
+			flip?.bottom
+		]);
+		for (const [index, page] of this.pages.entries()) {
+			if (!active.has(index)) applyPageStyle(page.element, { display: "none" });
+			page.element.classList.toggle(CLASS.hard, page.drawingDensity === PageDensity.hard);
+			page.element.classList.toggle(CLASS.soft, page.drawingDensity === PageDensity.soft);
+		}
+		const flippingHard = flip !== null && this.pages[flip.flipping]?.drawingDensity === PageDensity.hard;
+		if (frame.orientation !== Orientation.portrait && frame.left !== null) {
+			if (flip !== null && flip.direction === FlipDirection.back && flippingHard) this.drawHard(frame.left, "left", 180 + flip.hardAngle, Z.flipping, rect);
+			else this.drawFlat(frame.left, "left", rect);
+		}
+		if (frame.right !== null) {
+			if (flip !== null && flip.direction === FlipDirection.forward && flippingHard) this.drawHard(frame.right, "right", 180 + flip.hardAngle, Z.flipping, rect);
+			else this.drawFlat(frame.right, "right", rect);
+		}
+		if (flip === null) {
+			this.dropClone();
+			this.hideShadows();
+			return;
+		}
+		const liftsFromItself = !flippingHard && flip.flipping === frame.right;
+		if (!liftsFromItself) this.dropClone();
+		const bottomSide = flip.direction === FlipDirection.back ? "left" : "right";
+		if (!(frame.orientation === Orientation.portrait && flip.direction === FlipDirection.back)) {
+			if (flippingHard) this.drawHard(flip.bottom, bottomSide, 0, Z.bottom, rect);
+			else this.drawSoft(flip.bottom, bottomSide, flip.fold.bottomClip, flip.fold.bottomPagePosition, 0, flip.direction, Z.bottom, rect);
+		}
+		const flippingSide = flip.direction === FlipDirection.forward && frame.orientation !== Orientation.portrait ? "left" : "right";
+		if (flippingHard) this.drawHard(flip.flipping, flippingSide, flip.hardAngle, Z.flipping, rect);
+		else this.drawSoft(flip.flipping, flippingSide, flip.fold.flippingClip, flip.fold.activeCorner, flip.fold.angle, flip.direction, Z.flipping, rect, liftsFromItself);
+		if (flip.shadow === null) this.hideShadows();
+		else if (flippingHard) {
+			this.hideSoftShadows();
+			this.drawHardShadows(flip.shadow, rect);
+		} else {
+			this.hideHardShadows();
+			this.drawSoftShadows(flip.shadow, flip.fold.rect, rect);
+		}
+	}
+	element(index, side, asClone = false) {
+		const page = this.pages[index];
+		if (page === void 0) return null;
+		const el = asClone ? this.cloneOf(page.element) : page.element;
+		el.classList.toggle(CLASS.left, side === "left");
+		el.classList.toggle(CLASS.right, side === "right");
+		return el;
+	}
+	cloneOf(source) {
+		if (this.clone?.source === source) return this.clone.element;
+		this.dropClone();
+		const element = source.cloneNode(true);
+		element.removeAttribute("id");
+		for (const el of element.querySelectorAll("[id]")) el.removeAttribute("id");
+		element.setAttribute("aria-hidden", "true");
+		element.inert = true;
+		element.dataset["opfClone"] = "";
+		source.after(element);
+		this.clone = {
+			source,
+			element
+		};
+		return element;
+	}
+	dropClone() {
+		this.clone?.element.remove();
+		this.clone = null;
+	}
+	drawFlat(index, side, rect) {
+		const el = this.element(index, side);
+		if (el === null) return;
+		el.classList.add(CLASS.flat);
+		const left = side === "right" ? rect.left + rect.pageWidth : rect.left;
+		applyPageStyle(el, {
+			position: "absolute",
+			display: "block",
+			height: `${rect.height}px`,
+			left: `${left}px`,
+			top: `${rect.top}px`,
+			width: `${rect.pageWidth}px`,
+			zIndex: String(Z.flat)
+		});
+	}
+	drawSoft(index, side, area, position, angle, direction, zIndex, rect, asClone = false) {
+		const el = this.element(index, side, asClone);
+		if (el === null) return;
+		el.classList.remove(CLASS.flat);
+		const at = pageToContainer(position, rect, direction);
+		const polygon = area.map((p) => {
+			const g = rotatePoint(direction === FlipDirection.back ? {
+				x: -p.x + position.x,
+				y: p.y - position.y
+			} : {
+				x: p.x - position.x,
+				y: p.y - position.y
+			}, {
+				x: 0,
+				y: 0
+			}, angle);
+			return `${g.x}px ${g.y}px`;
+		}).join(", ");
+		applyPageStyle(el, {
+			position: "absolute",
+			display: "block",
+			zIndex: String(zIndex),
+			left: "0",
+			top: "0",
+			width: `${rect.pageWidth}px`,
+			height: `${rect.height}px`,
+			transformOrigin: "0 0",
+			clipPath: `polygon(${polygon})`,
+			transform: `translate3d(${at.x}px, ${at.y}px, 0) rotate(${angle}rad)`
+		});
+	}
+	drawHard(index, side, angle, zIndex, rect) {
+		const el = this.element(index, side);
+		if (el === null) return;
+		el.classList.remove(CLASS.flat);
+		const spine = rect.left + rect.width / 2;
+		applyPageStyle(el, {
+			position: "absolute",
+			display: "block",
+			zIndex: String(zIndex),
+			left: "0",
+			top: "0",
+			width: `${rect.pageWidth}px`,
+			height: `${rect.height}px`,
+			backfaceVisibility: "hidden",
+			clipPath: "none",
+			transformOrigin: side === "left" ? `${rect.pageWidth}px 0` : "0 0",
+			transform: side === "left" ? `translate3d(${rect.left}px, ${rect.top}px, 0) rotateY(${angle}deg)` : `translate3d(${spine}px, ${rect.top}px, 0) rotateY(${angle}deg)`
+		});
+	}
+	drawSoftShadows(shadow, pageRect, rect) {
+		const forward = shadow.direction === FlipDirection.forward;
+		const at = pageToContainer(shadow.pos, rect, shadow.direction);
+		const angle = shadow.angle + 3 * Math.PI / 2;
+		const polygon = (points, translate) => points.map((p) => {
+			const g = rotatePoint(forward ? {
+				x: p.x - shadow.pos.x,
+				y: p.y - shadow.pos.y
+			} : {
+				x: -p.x + shadow.pos.x,
+				y: p.y - shadow.pos.y
+			}, {
+				x: translate,
+				y: 100
+			}, angle);
+			return `${g.x}px ${g.y}px`;
+		}).join(", ");
+		const outerTranslate = forward ? 0 : shadow.width;
+		const outerClip = polygon([
+			{
+				x: 0,
+				y: 0
+			},
+			{
+				x: rect.pageWidth,
+				y: 0
+			},
+			{
+				x: rect.pageWidth,
+				y: rect.height
+			},
+			{
+				x: 0,
+				y: rect.height
+			}
+		], outerTranslate);
+		this.shadows.outer.style.cssText = `display: block; z-index: ${Z.shadow}; width: ${shadow.width}px; height: ${rect.height * 2}px; background: linear-gradient(${forward ? "to right" : "to left"}, rgba(0, 0, 0, ${shadow.opacity}), rgba(0, 0, 0, 0)); transform-origin: ${outerTranslate}px 100px; transform: translate3d(${at.x - outerTranslate}px, ${at.y - 100}px, 0) rotate(${angle}rad); clip-path: polygon(${outerClip});`;
+		const innerWidth = shadow.width * 3 / 4;
+		const innerTranslate = forward ? innerWidth : 0;
+		const innerClip = polygon([
+			pageRect.topLeft,
+			pageRect.topRight,
+			pageRect.bottomRight,
+			pageRect.bottomLeft
+		], innerTranslate);
+		this.shadows.inner.style.cssText = `display: block; z-index: ${Z.shadow}; width: ${innerWidth}px; height: ${rect.height * 2}px; background: linear-gradient(${forward ? "to left" : "to right"}, rgba(0, 0, 0, ${shadow.opacity}) 5%, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, ${shadow.opacity}) 35%, rgba(0, 0, 0, 0) 100%); transform-origin: ${innerTranslate}px 100px; transform: translate3d(${at.x - innerTranslate}px, ${at.y - 100}px, 0) rotate(${angle}rad); clip-path: polygon(${innerClip});`;
+	}
+	drawHardShadows(shadow, rect) {
+		const progress = shadow.progress > 100 ? 200 - shadow.progress : shadow.progress;
+		const size = Math.min(rect.pageWidth, (100 - progress) * (2.5 * rect.pageWidth) / 100 + 20);
+		const spine = rect.left + rect.width / 2;
+		const flipped = shadow.direction === FlipDirection.forward && shadow.progress > 100 || shadow.direction === FlipDirection.back && shadow.progress <= 100;
+		const common = `display: block; width: ${size}px; height: ${rect.height}px; left: ${spine}px; top: ${rect.top}px; transform-origin: 0 0;`;
+		this.shadows.hardInner.style.cssText = `${common} z-index: ${Z.hardInnerShadow}; background: linear-gradient(to right, rgba(0, 0, 0, ${shadow.opacity * progress / 100}) 5%, rgba(0, 0, 0, 0) 100%); transform: translate3d(0, 0, 0)${flipped ? "" : " rotateY(180deg)"};`;
+		this.shadows.hardOuter.style.cssText = `${common} z-index: ${Z.hardShadow}; background: linear-gradient(to left, rgba(0, 0, 0, ${shadow.opacity}) 5%, rgba(0, 0, 0, 0) 100%); transform: translate3d(0, 0, 0)${flipped ? " rotateY(180deg)" : ""};`;
+	}
+	hideSoftShadows() {
+		this.shadows.outer.style.cssText = "display: none";
+		this.shadows.inner.style.cssText = "display: none";
+	}
+	hideHardShadows() {
+		this.shadows.hardOuter.style.cssText = "display: none";
+		this.shadows.hardInner.style.cssText = "display: none";
+	}
+	hideShadows() {
+		this.hideSoftShadows();
+		this.hideHardShadows();
+	}
+	restore(element) {
+		const saved = this.saved.get(element);
+		if (saved === void 0) return;
+		element.style.cssText = saved.cssText;
+		element.className = saved.className;
+		this.saved.delete(element);
+	}
+	/** Put the container and every page back the way they were found. */
+	destroy() {
+		this.dropClone();
+		for (const page of this.pages) this.restore(page.element);
+		this.pages = [];
+		for (const el of Object.values(this.shadows)) el.remove();
+		this.container.classList.remove(CLASS.book);
+		const style = this.container.style;
+		style.width = "";
+		style.minWidth = "";
+		style.maxWidth = "";
+		style.aspectRatio = "";
+	}
+};
+//#endregion
+//#region src/book.ts
+function createBook(container, userOptions) {
+	const { clock = browserClock, ...bookOptions } = userOptions;
+	const options = resolveOptions(bookOptions);
+	const elements = Array.from(bookOptions.pages ?? container.children).filter((el) => el instanceof HTMLElement);
+	if (elements.length === 0) throw new TypeError("@openpageflip/core: createBook needs at least one page element");
+	if (options.startPage >= elements.length) throw new TypeError(`@openpageflip/core: "startPage" ${options.startPage} is out of range for ${elements.length} pages`);
+	const emitter = createEmitter();
+	const renderer = new DomRenderer(container, options);
+	const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+	const measure = () => {
+		const width = container.clientWidth;
+		const { orientation } = computeLayout(width, container.clientHeight, options);
+		renderer.applyContainerSizing(orientation);
+		return computeLayout(width, container.clientHeight, options);
+	};
+	const buildPages = (els) => {
+		const { hardByPosition } = buildSpreads(els.length, "landscape", options.cover);
+		return createPages(els, hardByPosition);
+	};
+	let pages = buildPages(elements);
+	renderer.setPages(pages);
+	const controller = new FlipController({
+		...options,
+		get flipDuration() {
+			return reducedMotion.matches ? 0 : options.flipDuration;
+		}
+	}, clock, {
+		onFrame: (frame) => renderer.render(frame),
+		onPage: (page) => emitter.emit("flip", { page }),
+		onState: (state) => emitter.emit("changeState", { state })
+	}, pages, measure());
+	const relayout = () => {
+		const layout = measure();
+		if (controller.setLayout(layout)) emitter.emit("changeOrientation", { orientation: layout.orientation });
+	};
+	let lastSize = {
+		width: container.clientWidth,
+		height: container.clientHeight
+	};
+	let pendingRelayout = null;
+	const observer = new ResizeObserver(() => {
+		if (pendingRelayout !== null) return;
+		pendingRelayout = requestAnimationFrame(() => {
+			pendingRelayout = null;
+			const size = {
+				width: container.clientWidth,
+				height: container.clientHeight
+			};
+			if (size.width === lastSize.width && size.height === lastSize.height) return;
+			lastSize = size;
+			relayout();
+		});
+	});
+	observer.observe(container);
+	const detachInput = attachInput(container, controller, options);
+	controller.showPage(options.startPage);
+	queueMicrotask(() => emitter.emit("init", {
+		page: controller.page,
+		orientation: controller.currentOrientation
+	}));
+	return {
+		get page() {
+			return controller.page;
+		},
+		get pageCount() {
+			return controller.pageCount;
+		},
+		get orientation() {
+			return controller.currentOrientation;
+		},
+		get state() {
+			return controller.currentState;
+		},
+		get rect() {
+			return controller.bookRect;
+		},
+		on: emitter.on,
+		off: emitter.off,
+		flipNext: (corner = FlipCorner.top) => controller.flipNext(corner),
+		flipPrev: (corner = FlipCorner.top) => controller.flipPrev(corner),
+		flipTo: (page, corner = FlipCorner.top) => controller.flipTo(page, corner),
+		turnTo: (page) => controller.showPage(page),
+		turnNext: () => controller.showNext(),
+		turnPrev: () => controller.showPrev(),
+		setPages(next) {
+			const els = Array.from(next);
+			if (els.length === 0) throw new TypeError("@openpageflip/core: setPages needs at least one page element");
+			pages = buildPages(els);
+			renderer.setPages(pages);
+			controller.setPages(pages);
+			emitter.emit("update", {
+				page: controller.page,
+				orientation: controller.currentOrientation
+			});
+		},
+		update: relayout,
+		destroy() {
+			observer.disconnect();
+			if (pendingRelayout !== null) cancelAnimationFrame(pendingRelayout);
+			detachInput();
+			controller.destroy();
+			renderer.destroy();
+			emitter.clear();
+		}
+	};
+}
 //#endregion
-export { Direction, FlipCorner, Layout, PageDensity };
+export { ClickMode, Direction, FlipCorner, FlipDirection, FlipState, Layout, Orientation, PageDensity, SizeMode, computeFold, computeLayout, createBook };
 
 //# sourceMappingURL=index.js.map