@zinejs/core 0.1.0

package/README.md

@@ -0,0 +1,70 @@
+# @zinejs/core
+
+Framework-agnostic flipbook engine: turn images or PDFs into a page-flipping book. Zero dependencies. Ships a **CSS renderer** (works everywhere, no GPU) and a **WebGL2 renderer** (page-curl, auto-selected where a GPU is available), behind one API — you never choose a renderer.
+
+> Pre-1.0 and under active development. Licensed **PolyForm Noncommercial 1.0.0** (free for non-commercial use).
+
+## Install
+
+```bash
+npm install @zinejs/core
+```
+
+## Image book
+
+```js
+import { Zine, ImageSource } from '@zinejs/core';
+
+const book = new Zine(document.getElementById('book'), {
+  source: new ImageSource([
+    'page-01.png',
+    'page-02.png',
+    'page-03.png',
+    'page-04.png',
+  ]),
+});
+```
+
+Give the container a size (e.g. `#book { width: 900px; height: 560px; }`). Flip by dragging a corner or clicking near an edge; zoom with double-click, Ctrl/⌘+wheel, or pinch.
+
+## PDF book
+
+Install the plugin (see [`@zinejs/pdf`](https://www.npmjs.com/package/@zinejs/pdf)):
+
+```js
+import { Zine } from '@zinejs/core';
+import { PdfSource } from '@zinejs/pdf';
+
+new Zine(document.getElementById('book'), {
+  source: new PdfSource('document.pdf'),
+});
+```
+
+## Options
+
+```ts
+new Zine(container, {
+  source,                    // ImageSource | PdfSource (required)
+  direction: 'ltr',          // 'ltr' | 'rtl'
+  cover: false,              // treat the first page as a standalone cover
+  startPage: 0,
+  flipDuration: 800,         // ms
+  singlePageThreshold: 640,  // px: below this, show one page at a time
+  clickToFlip: 'edge',       // 'edge' | 'half' | 'off'
+  zoom: { enabled: true, max: 4, wheel: true, doubleClick: [1, 2, 4] },
+  renderer: 'auto',          // 'auto' | 'css' | 'webgl2' | a custom Renderer
+});
+```
+
+## Methods & events
+
+```js
+book.flipNext(); book.flipPrev(); book.flipTo(12);
+book.getPage(); book.getPageCount();
+book.setZoom(2); book.resetZoom();
+book.update(); book.destroy();
+
+book.on('ready' | 'pageChanged' | 'flipStart' | 'flipEnd' | 'zoomChanged' | 'sourceError' | 'rendererFallback', handler);
+```
+
+A JSON Schema for the options is published at `@zinejs/core/options.schema.json`.

package/dist/cssRenderer-BACNXO8M.js

@@ -0,0 +1,68 @@
+import { t as e } from "./flipProgressToPose-DZWSuKoE.js";
+//#region src/renderer/cssRenderer.ts
+var t = 180 / Math.PI;
+function n(e) {
+	let t = e === "forward" ? "to right" : "to left";
+	return [
+		`linear-gradient(${t}, rgba(0,0,0,0.6), rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 60%)`,
+		`linear-gradient(${t}, transparent 40%, rgba(255,255,255,0.32) 66%, transparent 90%)`,
+		`linear-gradient(${t}, transparent 66%, rgba(0,0,0,0.35))`
+	].join(",");
+}
+var r = class {
+	#e = null;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	mount(e) {
+		let t = e.ownerDocument;
+		return this.#e = e, this.#t = t.createElement("div"), this.#t.className = "zine-clip", this.#t.style.cssText = "position:relative;width:100%;height:100%;overflow:hidden;", this.#n = t.createElement("div"), this.#n.className = "zine-viewport", this.#n.style.cssText = "position:absolute;inset:0;transform-origin:0 0;", this.#r = t.createElement("div"), this.#r.className = "zine-book", this.#r.style.cssText = "position:absolute;inset:0;perspective:2000px;transform-style:preserve-3d;", this.#i = this.#u(t, "zine-page-left", "left:0;"), this.#a = this.#u(t, "zine-page-right", "right:0;"), this.#o = t.createElement("div"), this.#o.className = "zine-leaf", this.#o.style.cssText = "position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;display:none;", this.#s = t.createElement("canvas"), this.#s.className = "zine-leaf-front", this.#s.style.cssText = "position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;", this.#c = t.createElement("canvas"), this.#c.className = "zine-leaf-back", this.#c.style.cssText = "position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;transform:rotateY(180deg);", this.#l = t.createElement("div"), this.#l.className = "zine-leaf-shadow", this.#l.style.cssText = "position:absolute;inset:0;opacity:0;pointer-events:none;", this.#l.style.background = n("forward"), this.#o.append(this.#s, this.#c, this.#l), this.#r.append(this.#i, this.#a, this.#o), this.#n.append(this.#r), this.#t.append(this.#n), e.append(this.#t), Promise.resolve();
+	}
+	destroy() {
+		this.#t?.remove(), this.#e = null;
+	}
+	renderSpread(e, t, n) {
+		n?.fill ? (this.#i.style.width = "100%", this.#a.style.display = "none", this.#d(this.#i, t.right ?? t.left)) : (this.#i.style.width = "50%", this.#a.style.display = "", this.#d(this.#i, t.left), this.#d(this.#a, t.right)), this.#o.style.display = "none", this.#o.style.transform = "", this.#l.style.opacity = "0";
+	}
+	beginFlip(e, t, r, i) {
+		i?.fill ? (this.#i.style.width = "100%", this.#a.style.display = "none", this.#o.style.width = "100%", this.#o.style.left = "0", this.#o.style.transformOrigin = r === "forward" ? "left center" : "right center", this.#d(this.#i, t.right ?? t.left), this.#d(this.#s, e.right ?? e.left), this.#d(this.#c, t.right ?? t.left)) : (this.#i.style.width = "50%", this.#a.style.display = "", this.#o.style.width = "50%", r === "forward" ? (this.#d(this.#i, e.left), this.#d(this.#a, t.right), this.#d(this.#s, e.right), this.#d(this.#c, t.left), this.#o.style.left = "50%", this.#o.style.transformOrigin = "left center") : (this.#d(this.#a, e.right), this.#d(this.#i, t.left), this.#d(this.#s, e.left), this.#d(this.#c, t.right), this.#o.style.left = "0", this.#o.style.transformOrigin = "right center")), this.#o.style.display = "block", this.#o.style.transform = "rotateY(0deg)", this.#l.style.background = n(r), this.#l.style.opacity = "0";
+	}
+	setFlipProgress(n, r) {
+		let i = e(n), a = i.angle * t;
+		this.#o.style.display = "block", this.#o.style.transform = `rotateY(${r === "forward" ? -a : a}deg)`, this.#l.style.opacity = String(i.shadowAlpha);
+	}
+	setViewTransform(e, t, n) {
+		this.#n.style.transform = `translate(${t}px, ${n}px) scale(${e})`;
+	}
+	measure() {
+		let e = this.#e, t = e?.clientWidth ?? 0, n = e?.clientHeight ?? 0;
+		return {
+			containerWidth: t,
+			containerHeight: n,
+			pageWidth: t / 2,
+			pageHeight: n
+		};
+	}
+	#u(e, t, n) {
+		let r = e.createElement("canvas");
+		return r.className = t, r.style.cssText = `position:absolute;top:0;width:50%;height:100%;${n}`, r;
+	}
+	#d(e, t) {
+		let n = e.getContext("2d");
+		if (t === null) {
+			n?.clearRect(0, 0, e.width, e.height);
+			return;
+		}
+		e.width = t.width, e.height = t.height, n?.drawImage(t, 0, 0);
+	}
+};
+//#endregion
+export { r as CssRenderer };
+
+//# sourceMappingURL=cssRenderer-BACNXO8M.js.map

package/dist/cssRenderer-BACNXO8M.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssRenderer-BACNXO8M.js","names":["#container","#clip","#viewport","#book","#pageLeft","#makeCanvas","#pageRight","#leaf","#leafFront","#leafBack","#leafShadow","#paint"],"sources":["../src/renderer/cssRenderer.ts"],"sourcesContent":["import { flipProgressToPose } from '../geometry/flipProgressToPose';\nimport type { Spread } from '../engine/spread';\nimport type {\n  FlipDirection,\n  LayoutMetrics,\n  PageContent,\n  Renderer,\n  RenderOptions,\n  SpreadContent,\n} from './types';\n\nconst RAD_TO_DEG = 180 / Math.PI;\n\n/**\n * Layered gradients painted over the turning leaf to fake paper depth on the flat\n * fold: a crease shadow at the spine, a soft curve sheen, and a free-edge shade.\n * The spine is the leaf's pivot edge — left for a forward flip, right for backward.\n */\nfunction foldOverlay(direction: FlipDirection): string {\n  const dir = direction === 'forward' ? 'to right' : 'to left';\n  return [\n    `linear-gradient(${dir}, rgba(0,0,0,0.6), rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 60%)`,\n    `linear-gradient(${dir}, transparent 40%, rgba(255,255,255,0.32) 66%, transparent 90%)`,\n    `linear-gradient(${dir}, transparent 66%, rgba(0,0,0,0.35))`,\n  ].join(',');\n}\n\n/**\n * Baseline renderer: a 2-panel CSS-3D fold. Runs on every browser, no GPU. Pages\n * are <canvas> elements; the turning leaf (front + back faces, backface-hidden)\n * rotates about the spine driven by flipProgressToPose(), with a gradient shadow\n * overlay for depth. `beginFlip` stages the surfaces; `setFlipProgress` animates.\n */\nexport class CssRenderer implements Renderer {\n  #container: HTMLElement | null = null;\n  #clip!: HTMLDivElement;\n  #viewport!: HTMLDivElement;\n  #book!: HTMLDivElement;\n  #pageLeft!: HTMLCanvasElement;\n  #pageRight!: HTMLCanvasElement;\n  #leaf!: HTMLDivElement;\n  #leafFront!: HTMLCanvasElement;\n  #leafBack!: HTMLCanvasElement;\n  #leafShadow!: HTMLDivElement;\n\n  mount(container: HTMLElement): Promise<void> {\n    const doc = container.ownerDocument;\n    this.#container = container;\n\n    // Fixed-size clip box; NOT transformed, so zoom can't scale the crop region.\n    this.#clip = doc.createElement('div');\n    this.#clip.className = 'zine-clip';\n    this.#clip.style.cssText = 'position:relative;width:100%;height:100%;overflow:hidden;';\n\n    // Transform target for zoom/pan; lives inside the clip.\n    this.#viewport = doc.createElement('div');\n    this.#viewport.className = 'zine-viewport';\n    this.#viewport.style.cssText = 'position:absolute;inset:0;transform-origin:0 0;';\n\n    this.#book = doc.createElement('div');\n    this.#book.className = 'zine-book';\n    this.#book.style.cssText =\n      'position:absolute;inset:0;perspective:2000px;transform-style:preserve-3d;';\n\n    this.#pageLeft = this.#makeCanvas(doc, 'zine-page-left', 'left:0;');\n    this.#pageRight = this.#makeCanvas(doc, 'zine-page-right', 'right:0;');\n\n    this.#leaf = doc.createElement('div');\n    this.#leaf.className = 'zine-leaf';\n    this.#leaf.style.cssText =\n      'position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;display:none;';\n\n    this.#leafFront = doc.createElement('canvas');\n    this.#leafFront.className = 'zine-leaf-front';\n    this.#leafFront.style.cssText =\n      'position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;';\n\n    this.#leafBack = doc.createElement('canvas');\n    this.#leafBack.className = 'zine-leaf-back';\n    this.#leafBack.style.cssText =\n      'position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;transform:rotateY(180deg);';\n\n    this.#leafShadow = doc.createElement('div');\n    this.#leafShadow.className = 'zine-leaf-shadow';\n    this.#leafShadow.style.cssText = 'position:absolute;inset:0;opacity:0;pointer-events:none;';\n    this.#leafShadow.style.background = foldOverlay('forward'); // default; beginFlip sets per direction\n\n    this.#leaf.append(this.#leafFront, this.#leafBack, this.#leafShadow);\n    this.#book.append(this.#pageLeft, this.#pageRight, this.#leaf);\n    this.#viewport.append(this.#book);\n    this.#clip.append(this.#viewport);\n    container.append(this.#clip);\n\n    return Promise.resolve();\n  }\n\n  destroy(): void {\n    this.#clip?.remove();\n    this.#container = null;\n  }\n\n  renderSpread(_spread: Spread, content: SpreadContent, options?: RenderOptions): void {\n    if (options?.fill) {\n      // Single-page mode: the lone page fills the container; hide the other panel.\n      this.#pageLeft.style.width = '100%';\n      this.#pageRight.style.display = 'none';\n      this.#paint(this.#pageLeft, content.right ?? content.left);\n    } else {\n      this.#pageLeft.style.width = '50%';\n      this.#pageRight.style.display = '';\n      this.#paint(this.#pageLeft, content.left);\n      this.#paint(this.#pageRight, content.right);\n    }\n    // A fresh spread cancels any in-progress flip.\n    this.#leaf.style.display = 'none';\n    this.#leaf.style.transform = '';\n    this.#leafShadow.style.opacity = '0';\n  }\n\n  beginFlip(\n    from: SpreadContent,\n    to: SpreadContent,\n    direction: FlipDirection,\n    options?: RenderOptions,\n  ): void {\n    if (options?.fill) {\n      // Single-page: a full-width leaf turns about one edge, revealing `to` underneath.\n      this.#pageLeft.style.width = '100%';\n      this.#pageRight.style.display = 'none';\n      this.#leaf.style.width = '100%';\n      this.#leaf.style.left = '0';\n      this.#leaf.style.transformOrigin = direction === 'forward' ? 'left center' : 'right center';\n      this.#paint(this.#pageLeft, to.right ?? to.left);\n      this.#paint(this.#leafFront, from.right ?? from.left);\n      this.#paint(this.#leafBack, to.right ?? to.left);\n    } else {\n      this.#pageLeft.style.width = '50%';\n      this.#pageRight.style.display = '';\n      this.#leaf.style.width = '50%';\n      if (direction === 'forward') {\n        // Right page lifts and swings left about the spine. Left stays; right reveals `to`.\n        this.#paint(this.#pageLeft, from.left);\n        this.#paint(this.#pageRight, to.right);\n        this.#paint(this.#leafFront, from.right);\n        this.#paint(this.#leafBack, to.left);\n        this.#leaf.style.left = '50%';\n        this.#leaf.style.transformOrigin = 'left center';\n      } else {\n        // Left page swings right about its right edge. Right stays; left reveals `to`.\n        this.#paint(this.#pageRight, from.right);\n        this.#paint(this.#pageLeft, to.left);\n        this.#paint(this.#leafFront, from.left);\n        this.#paint(this.#leafBack, to.right);\n        this.#leaf.style.left = '0';\n        this.#leaf.style.transformOrigin = 'right center';\n      }\n    }\n    this.#leaf.style.display = 'block';\n    this.#leaf.style.transform = 'rotateY(0deg)';\n    this.#leafShadow.style.background = foldOverlay(direction);\n    this.#leafShadow.style.opacity = '0';\n  }\n\n  setFlipProgress(t: number, direction: FlipDirection): void {\n    const pose = flipProgressToPose(t);\n    const deg = pose.angle * RAD_TO_DEG;\n    this.#leaf.style.display = 'block';\n    this.#leaf.style.transform = `rotateY(${direction === 'forward' ? -deg : deg}deg)`;\n    this.#leafShadow.style.opacity = String(pose.shadowAlpha);\n  }\n\n  setViewTransform(scale: number, x: number, y: number): void {\n    this.#viewport.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;\n  }\n\n  measure(): LayoutMetrics {\n    const el = this.#container;\n    const w = el?.clientWidth ?? 0;\n    const h = el?.clientHeight ?? 0;\n    return { containerWidth: w, containerHeight: h, pageWidth: w / 2, pageHeight: h };\n  }\n\n  #makeCanvas(doc: Document, className: string, extra: string): HTMLCanvasElement {\n    const c = doc.createElement('canvas');\n    c.className = className;\n    c.style.cssText = `position:absolute;top:0;width:50%;height:100%;${extra}`;\n    return c;\n  }\n\n  #paint(canvas: HTMLCanvasElement, content: PageContent | null): void {\n    const ctx = canvas.getContext('2d');\n    if (content === null) {\n      ctx?.clearRect(0, 0, canvas.width, canvas.height);\n      return;\n    }\n    canvas.width = content.width;\n    canvas.height = content.height;\n    ctx?.drawImage(content, 0, 0);\n  }\n}\n"],"mappings":"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"}

package/dist/engine/emitter.d.ts

@@ -0,0 +1,42 @@
+export type Listener<T> = (payload: T) => void;
+/** Events typed as `void` are emitted with no payload argument. */
+type PayloadArgs<T> = [T] extends [void] ? [] : [payload: T];
+/** Minimal typed event emitter keyed by an event map. */
+export declare class Emitter<Events> {
+    #private;
+    /** Subscribe; returns an unsubscribe function. */
+    on<K extends keyof Events>(type: K, listener: Listener<Events[K]>): () => void;
+    off<K extends keyof Events>(type: K, listener: Listener<Events[K]>): void;
+    emit<K extends keyof Events>(type: K, ...args: PayloadArgs<Events[K]>): void;
+    clear(): void;
+}
+/**
+ * Public event surface of a Zine instance. Payloads are provisional and will
+ * firm up as the engine wires the emitters that fire them.
+ */
+export interface ZineEventMap {
+    ready: void;
+    flipStart: {
+        from: number;
+        to: number;
+    };
+    flipEnd: {
+        page: number;
+    };
+    pageChanged: {
+        page: number;
+    };
+    zoomChanged: {
+        scale: number;
+    };
+    sourceError: {
+        index: number;
+        error: unknown;
+    };
+    rendererFallback: {
+        from: string;
+        to: string;
+    };
+}
+export type ZineEmitter = Emitter<ZineEventMap>;
+export {};

package/dist/engine/input.d.ts

@@ -0,0 +1,94 @@
+export interface GestureStart {
+    x: number;
+    y: number;
+    t: number;
+}
+export interface GestureMove {
+    x: number;
+    y: number;
+    /** Displacement from the start point. */
+    dx: number;
+    dy: number;
+}
+export interface GestureEnd {
+    x: number;
+    y: number;
+    dx: number;
+    dy: number;
+    /** Elapsed time from start to end (ms). */
+    dt: number;
+    /** Velocity of the final move segment (px/ms). */
+    vx: number;
+    vy: number;
+    /** A fast flick: final speed exceeded the swipe threshold and the gesture was not canceled. */
+    swipe: boolean;
+    /** The pointer was canceled (e.g. pointercancel) rather than lifted. */
+    canceled: boolean;
+}
+export interface PointerHandlers {
+    onStart?: (g: GestureStart) => void;
+    onMove?: (g: GestureMove) => void;
+    onEnd?: (g: GestureEnd) => void;
+}
+/**
+ * Recognizes a single-pointer drag from raw pointer samples and reports normalized
+ * gestures. DOM-agnostic on purpose: `bindPointerInput` maps real PointerEvents onto
+ * it, but the kinematics stay pure and unit-testable. Extra pointers are ignored
+ * (multi-touch pinch is a separate recognizer).
+ */
+export declare class PointerRecognizer {
+    #private;
+    constructor(handlers?: PointerHandlers);
+    get active(): boolean;
+    down(id: number, x: number, y: number, t: number): void;
+    move(id: number, x: number, y: number, t: number): void;
+    up(id: number, x: number, y: number, t: number): void;
+    cancel(id: number, x: number, y: number, t: number): void;
+}
+/**
+ * Wire real PointerEvents from `target` into a recognizer. Returns an unbind
+ * function that removes every listener. Coordinates are passed through as
+ * client-space; mapping to page-local space is the engine's job.
+ */
+export declare function bindPointerInput(target: EventTarget, recognizer: PointerRecognizer): () => void;
+/**
+ * Wire PointerEvents from `target` into a drag recognizer and/or a pinch
+ * recognizer at once, so a single pointer stream feeds both. Returns an unbind.
+ */
+export declare function bindGestures(target: EventTarget, recognizers: {
+    pointer?: PointerRecognizer;
+    pinch?: PinchRecognizer;
+}): () => void;
+export interface PinchStart {
+    centerX: number;
+    centerY: number;
+    /** Distance between the two pointers at pinch start. */
+    distance: number;
+}
+export interface PinchMove {
+    centerX: number;
+    centerY: number;
+    /** Current distance / start distance. */
+    scale: number;
+}
+export interface PinchHandlers {
+    onPinchStart?: (g: PinchStart) => void;
+    onPinchMove?: (g: PinchMove) => void;
+    onPinchEnd?: () => void;
+}
+/**
+ * Recognizes a two-pointer pinch and reports zoom scale (relative to the start
+ * distance) and the live center point. No timestamps: pinch drives zoom, not a
+ * flick. A third pointer is ignored; lifting either tracked pointer ends the pinch.
+ * Coordinating this with the drag recognizer (a second finger should suspend a
+ * single-finger drag) is the engine's job.
+ */
+export declare class PinchRecognizer {
+    #private;
+    constructor(handlers?: PinchHandlers);
+    get pinching(): boolean;
+    down(id: number, x: number, y: number): void;
+    move(id: number, x: number, y: number): void;
+    up(id: number): void;
+    cancel(id: number): void;
+}

package/dist/engine/spread.d.ts

@@ -0,0 +1,24 @@
+export type Direction = 'ltr' | 'rtl';
+export interface Spread {
+    /** Page index shown on the left, or null for a blank side. */
+    left: number | null;
+    /** Page index shown on the right, or null for a blank side. */
+    right: number | null;
+}
+export interface SpreadOptions {
+    direction?: Direction;
+    /** First page is a lone cover on the leading side; interior pages pair up after it. */
+    cover?: boolean;
+    /** One page per spread (narrow/portrait viewports). Takes precedence over `cover`. */
+    singlePage?: boolean;
+}
+/**
+ * Map a flat page list (indices 0..pageCount-1) into display spreads.
+ *
+ * Reading order is always preserved; `direction` only mirrors each spread's
+ * left/right positions, so RTL is just an LTR layout with the sides swapped.
+ * Out-of-range slots are `null` (a blank half on odd counts / the back cover).
+ */
+export declare function buildSpreads(pageCount: number, options?: SpreadOptions): Spread[];
+/** Whether a container this wide should fall back to one page per spread. */
+export declare function shouldSinglePage(containerWidth: number, threshold: number): boolean;

package/dist/engine/stateMachine.d.ts

@@ -0,0 +1,12 @@
+export type FlipState = 'idle' | 'dragging' | 'animating' | 'zoomed-panning';
+export type FlipEvent = 'grab' | 'release' | 'settle' | 'panStart' | 'panEnd' | 'flip';
+/** Pure transition: the next state, or null if `event` is illegal from `state`. */
+export declare function nextState(state: FlipState, event: FlipEvent): FlipState | null;
+/** Stateful holder around `nextState`; illegal events are ignored. */
+export declare class FlipMachine {
+    #private;
+    constructor(initial?: FlipState);
+    get state(): FlipState;
+    /** Apply `event`; returns the new state, or null (no-op) if the event was illegal. */
+    send(event: FlipEvent): FlipState | null;
+}

package/dist/engine/virtualizer.d.ts

@@ -0,0 +1,18 @@
+/** Spread indices that should be mounted around `current`, clamped to the book. */
+export declare function mountWindow(current: number, spreadCount: number, radius: number): number[];
+export interface VirtualizerDelta {
+    toMount: number[];
+    toEvict: number[];
+}
+/**
+ * Tracks which spreads are mounted and, on each move, reports the difference:
+ * spreads entering the ±radius window (`toMount`) and those leaving it
+ * (`toEvict`). Default radius 2 = current spread ±2.
+ */
+export declare class Virtualizer {
+    #private;
+    constructor(radius?: number);
+    get mounted(): number[];
+    /** Recenter on `current`; mounts/evicts to match the window and returns the delta. */
+    update(current: number, spreadCount: number): VirtualizerDelta;
+}

package/dist/flipProgressToPose-DZWSuKoE.js

@@ -0,0 +1,13 @@
+//#region src/geometry/flipProgressToPose.ts
+function e(e) {
+	let t = e < 0 ? 0 : e > 1 ? 1 : e, n = Math.sin(t * Math.PI);
+	return {
+		angle: t * Math.PI,
+		curl: n,
+		shadowAlpha: n
+	};
+}
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=flipProgressToPose-DZWSuKoE.js.map

package/dist/flipProgressToPose-DZWSuKoE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flipProgressToPose-DZWSuKoE.js","names":[],"sources":["../src/geometry/flipProgressToPose.ts"],"sourcesContent":["export interface FlipPose {\n  /** Turning-page rotation about the spine, radians: 0 (flat/open) → π (fully turned). */\n  angle: number;\n  /** Mesh cylinder-wrap curl, 0..1 — flat at the ends, peaks edge-on at t=0.5. CSS renderer ignores it. */\n  curl: number;\n  /** Fold-shadow intensity, 0..1 — peaks edge-on at t=0.5. */\n  shadowAlpha: number;\n}\n\n/**\n * Map a 0→1 flip progress to a renderer-neutral fold pose.\n *\n * Linear in `t` on purpose — easing belongs to the animator that produces `t`,\n * so seeking to a fixed progress (e.g. the 0/.25/.5/.75/1 visual-regression stops)\n * is deterministic. The CSS renderer consumes `angle` as a spine `rotateY`; the\n * WebGL2 renderer additionally bends its mesh by `curl`.\n */\nexport function flipProgressToPose(t: number): FlipPose {\n  const clamped = t < 0 ? 0 : t > 1 ? 1 : t;\n  const arc = Math.sin(clamped * Math.PI);\n  return {\n    angle: clamped * Math.PI,\n    curl: arc,\n    shadowAlpha: arc,\n  };\n}\n"],"mappings":";AAiBA,SAAgB,EAAmB,GAAqB;CACtD,IAAM,IAAU,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAClC,IAAM,KAAK,IAAI,IAAU,KAAK,EAAE;CACtC,OAAO;EACL,OAAO,IAAU,KAAK;EACtB,MAAM;EACN,aAAa;CACf;AACF"}

package/dist/geometry/flipProgressToPose.d.ts

@@ -0,0 +1,17 @@
+export interface FlipPose {
+    /** Turning-page rotation about the spine, radians: 0 (flat/open) → π (fully turned). */
+    angle: number;
+    /** Mesh cylinder-wrap curl, 0..1 — flat at the ends, peaks edge-on at t=0.5. CSS renderer ignores it. */
+    curl: number;
+    /** Fold-shadow intensity, 0..1 — peaks edge-on at t=0.5. */
+    shadowAlpha: number;
+}
+/**
+ * Map a 0→1 flip progress to a renderer-neutral fold pose.
+ *
+ * Linear in `t` on purpose — easing belongs to the animator that produces `t`,
+ * so seeking to a fixed progress (e.g. the 0/.25/.5/.75/1 visual-regression stops)
+ * is deterministic. The CSS renderer consumes `angle` as a spine `rotateY`; the
+ * WebGL2 renderer additionally bends its mesh by `curl`.
+ */
+export declare function flipProgressToPose(t: number): FlipPose;

package/dist/geometry/foldFromPointer.d.ts

@@ -0,0 +1,30 @@
+export interface Vec2 {
+    x: number;
+    y: number;
+}
+export interface PageRect {
+    width: number;
+    height: number;
+}
+export interface FoldLine {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+export interface Fold {
+    /** Crease line, clipped to the page rect (page-local coords). */
+    foldLine: FoldLine;
+    /** Crease orientation in radians (atan2 of the crease direction). */
+    angle: number;
+    /** Fold-shadow intensity, 0..1. */
+    shadowAlpha: number;
+}
+/**
+ * Book-fold geometry from a dragged corner.
+ *
+ * The folded flap reflects the grabbed `corner` onto the pointer `point`, so the
+ * crease is the perpendicular bisector of the segment corner→point. Coordinates
+ * are page-local: (0,0) top-left, x right, y down, page spanning (0,0)..(width,height).
+ */
+export declare function foldFromPointer(point: Vec2, corner: Vec2, pageRect: PageRect): Fold;

package/dist/geometry/hitTest.d.ts

@@ -0,0 +1,11 @@
+import type { PageRect, Vec2 } from './foldFromPointer';
+export type HitRegion = 'corner' | 'page' | 'outside';
+/**
+ * Classify a page-local point into a hit region.
+ *
+ * Coordinates are page-local (see `foldFromPointer`): (0,0) top-left,
+ * page spanning (0,0)..(width,height). `cornerSize` is the width/height of each
+ * grabbable corner box. All four corners report `corner`; the engine decides
+ * which are actually grabbable for the current spread layout (LTR/RTL, cover).
+ */
+export declare function hitTest(point: Vec2, pageRect: PageRect, cornerSize: number): HitRegion;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Zine } from './zine';
+export type { ZineOptions, ZoomOptions } from './zine';
+export { ImageSource } from './source/imageSource';
+export type { ImageSourceOptions, ImageFit } from './source/imageSource';
+export type { Source } from './source/types';
+export type { RendererOption, RendererKind } from './renderer/select';
+export type { Renderer, SpreadContent, PageContent, FlipDirection, LayoutMetrics, RenderOptions } from './renderer/types';
+export type { ZineEventMap } from './engine/emitter';
+export type { Direction, Spread } from './engine/spread';