leafthrough 0.1.2 → 0.1.4

package/dist/engine.d.ts

@@ -1,11 +1,8 @@
-import type * as THREE from 'three';
+import * as THREE from 'three';
 import type { ResolvedSettings } from './options.js';
 import type { SheetShading } from './paper/paperMaterial.js';
 export interface EngineContext {
-    camera: THREE.PerspectiveCamera;
-    canvas: HTMLCanvasElement;
-    /** Receives pointer input; covers the pages. */
-    hitArea: HTMLElement;
+    input: EngineInput;
     settings: ResolvedSettings;
     /** One texture per page, in reading order. */
     textures: THREE.Texture[];
@@ -18,10 +15,23 @@ export interface EngineContext {
     metrics: EngineMetrics;
     /** Shared by every sheet; the engine keeps spineContact current. */
     shading: SheetShading;
+    /** Asks for a frame: input and timers change the pages between frames. */
+    requestFrame: () => void;
+}
+/** Where pointer input comes from, and how a point on screen reaches the magazine. */
+export interface EngineInput {
+    /** Receives pointer input. */
+    element: HTMLElement;
+    /** Sets `ray` to the world-space ray through a point on screen; false when there's none. */
+    ray(clientX: number, clientY: number, ray: THREE.Ray): boolean;
+    /** Whether a press at this point lands on the magazine. */
+    covers(clientX: number, clientY: number): boolean;
 }
 export interface EngineMetrics {
     /** Pixels a drag spans per unit of `dragDistance`. */
-    dragWidth: number;
+    readonly dragWidth: number;
+    /** Screen displacement along the magazine’s projected x axis; defaults to horizontal. */
+    dragDelta?(dx: number, dy: number): number;
 }
 export interface Engine {
     readonly group: THREE.Group;
@@ -47,5 +57,14 @@ export interface Engine {
     /** Moves to a position at once, without animating. */
     jumpTo(position: number): void;
     setPageTexture(page: number, texture: THREE.Texture): void;
+    /** Releases pointer capture and cancels active gestures and hold timers. */
+    cancelInput?(): void;
     dispose(): void;
 }
+/**
+ * Where a world-space ray meets the floor of `object` (its z = 0 plane), in the object's own
+ * units; null when it misses. However the object is moved, turned or scaled.
+ */
+export declare function floorPoint(object: THREE.Object3D, ray: THREE.Ray, target: THREE.Vector3): THREE.Vector3 | null;
+/** Sets `ray` to the ray from `camera` through a point on screen over `element`, which shows its view. */
+export declare function rayThrough(camera: THREE.Camera, element: Element, clientX: number, clientY: number, ray: THREE.Ray): boolean;

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export { LeafThrough, type LeafThroughEventMap, type GoToOptions } from './LeafThrough.js';
+export { LeafThroughObject, type LeafThroughBounds, type LeafThroughObjectContext, type LeafThroughObjectEventMap, type LeafThroughObjectOptions, } from './LeafThroughObject.js';
+export type { Rect } from './framing.js';
 export { DEFAULT_PAGE_ASPECT, DEFAULT_SPREAD_QUERY, defaultPageLabel, type LeafThroughOptions, type InteractionOptions, type Layout, type LightingOptions, type MotionOptions, type PageChangeDetail, type PageDescriptor, type PageImage, type PageSource, type PaperOptions, } from './options.js';

package/dist/index.js

@@ -1,13 +1,378 @@
 import {
   DEFAULT_PAGE_ASPECT,
   DEFAULT_SPREAD_QUERY,
+  LIVE_OPTIONS,
   LeafThrough,
-  defaultPageLabel
-} from "./chunk-GJRP6UAH.js";
+  PageLoader,
+  PaperTextures,
+  Riffle,
+  SingleEngine,
+  SpreadEngine,
+  bindKeyboard,
+  changedOptions,
+  defaultPageLabel,
+  floorPoint,
+  framingFor,
+  pageDetail,
+  pageImage,
+  pageToPosition,
+  pagesAt,
+  plainFramingFor,
+  preloadRadius,
+  rayThrough,
+  resolveSettings,
+  snapshot,
+  sourceKey
+} from "./chunk-GYSQO7QZ.js";
+
+// src/LeafThroughObject.ts
+import * as THREE from "three";
+var isClient = typeof window !== "undefined";
+var LeafThroughObject = class extends THREE.Group {
+  /** The camera your scene is drawn with; pointer input is cast from it. */
+  camera;
+  domElement;
+  inputEnabled = true;
+  /**
+   * Whether it takes pointer and key input. Turn it off while it's tucked away or moving,
+   * and on again; the pages stay as they are. Turning it off lets go of a page being held.
+   * Default `true`.
+   */
+  get enabled() {
+    return this.inputEnabled;
+  }
+  set enabled(value) {
+    if (this.inputEnabled && !value) this.view?.engine.cancelInput?.();
+    this.inputEnabled = value;
+  }
+  renderer;
+  options;
+  paper;
+  loader = null;
+  view = null;
+  spreadMedia = null;
+  motionMedia;
+  abort = new AbortController();
+  riffle = new Riffle();
+  metrics;
+  ray = new THREE.Ray();
+  point = new THREE.Vector3();
+  ends = [new THREE.Vector3(), new THREE.Vector3()];
+  needsRender = true;
+  lastPagesKey = "";
+  lastDetailKey = "";
+  inView = "";
+  ready = false;
+  readyFired = false;
+  disposed = false;
+  constructor({ renderer, camera, domElement = renderer.domElement }, options) {
+    super();
+    if (!isClient) throw new Error("LeafThrough needs a browser; create it on the client.");
+    this.renderer = renderer;
+    this.camera = camera;
+    this.domElement = domElement;
+    this.options = snapshot(options);
+    const object = this;
+    this.metrics = {
+      get dragWidth() {
+        return object.dragWidth();
+      },
+      dragDelta(dx, dy) {
+        const axis = object.pageAxis();
+        return (dx * axis.x + dy * axis.y) / (axis.length() || 1);
+      }
+    };
+    this.paper = new PaperTextures(options.paper?.backColor ?? "#fcfcf9", {
+      onGrain: () => this.remount(),
+      onError: (error) => this.fail(error)
+    });
+    const signal = this.abort.signal;
+    this.watchSpreadQuery();
+    this.motionMedia = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this.motionMedia.addEventListener("change", () => this.remount(), { signal });
+    window.addEventListener("online", () => this.retry(), { signal });
+    bindKeyboard(
+      domElement,
+      () => this.enabled && this.shown() ? this.view?.settings.interaction.keyboard : false,
+      { next: () => this.next(), prev: () => this.prev(), first: () => this.goTo(0), last: () => this.goTo(this.pageCount - 1) },
+      signal
+    );
+    this.remount(options.startPage ?? 0);
+  }
+  // --- public API -----------------------------------------------------------------
+  /** First visible page, 0-based. */
+  get page() {
+    return this.detail().page;
+  }
+  get pageCount() {
+    return this.options.pages.length;
+  }
+  get layout() {
+    return this.view?.settings.layout ?? this.pickLayout();
+  }
+  get visiblePages() {
+    return this.detail().visiblePages;
+  }
+  /** True while a page is being dragged or is completing its turn. */
+  get turning() {
+    return this.view?.engine.turning ?? false;
+  }
+  /**
+   * Where the magazine lies in its own units: frame `pages` with your camera. Changes with
+   * the layout, which `'auto'` can switch as the window resizes.
+   */
+  get bounds() {
+    const layout = this.layout;
+    const aspect = this.view?.settings.pageAspect ?? resolveSettings(this.options, layout, false).pageAspect;
+    return { pages: plainFramingFor(layout, aspect).box, reach: framingFor(layout, aspect).view };
+  }
+  /** Turns to the next page. Returns false at the end. */
+  next() {
+    this.riffle.stop();
+    return this.view?.engine.flip(true) ?? false;
+  }
+  /** Turns to the previous page. Returns false at the start. */
+  prev() {
+    this.riffle.stop();
+    return this.view?.engine.flip(false) ?? false;
+  }
+  /** Shows `page` (0-based), jumping there or turning the pages one by one. */
+  goTo(page, { animate = false } = {}) {
+    if (!this.view || Number.isNaN(page)) return;
+    this.riffle.stop();
+    const engine = this.view.engine;
+    const target = pageToPosition(page, this.view.settings.layout, this.pageCount);
+    if (!animate) {
+      engine.jumpTo(target);
+      return;
+    }
+    if (engine.position === target) return;
+    this.riffle.start(target, this.view.settings.motion.speed);
+    this.requestFrame();
+  }
+  /** Loads the pages that failed again. Also happens by itself when the browser comes back online. */
+  retry() {
+    this.loader?.retry();
+  }
+  /** Changes some options and keeps the rest. Structural changes rebuild the pages and keep the current page. */
+  update(options) {
+    this.applyOptions({ ...this.options, ...options });
+  }
+  /** Replaces every option at once: anything left out goes back to its default. */
+  setOptions(options) {
+    this.applyOptions(options);
+  }
+  /**
+   * Whether a press at this point on screen lands on the magazine, which then takes it. Check
+   * it in your own pointer handlers to leave such presses alone. False while it's hidden or
+   * not `enabled`.
+   */
+  covers(clientX, clientY) {
+    const view = this.view;
+    if (!view || !this.enabled || !this.shown()) return false;
+    if (!rayThrough(this.camera, this.domElement, clientX, clientY, this.ray)) return false;
+    const point = floorPoint(view.engine.group, this.ray, this.point);
+    if (!point) return false;
+    const box = view.framing.box;
+    const side = view.engine.activeSide;
+    const left = side === "right" ? box.x + box.width / 2 : box.x;
+    const right = side === "left" ? box.x + box.width / 2 : box.x + box.width;
+    return point.x >= left && point.x <= right && point.y >= box.y && point.y <= box.y + box.height;
+  }
+  /**
+   * Advances the pages to `now` (a `requestAnimationFrame` timestamp). Call it every frame
+   * before rendering. Returns true while the pages are moving and need another frame.
+   */
+  tick(now = performance.now()) {
+    const view = this.view;
+    if (!view) return false;
+    this.riffle.step(now, view.engine);
+    const moved = view.engine.update(now);
+    this.followReader(view.engine, view.settings.layout);
+    const draw = moved || this.needsRender;
+    this.needsRender = false;
+    if (this.ready && !this.readyFired) {
+      this.readyFired = true;
+      this.options.onReady?.();
+      this.dispatchEvent({ type: "ready" });
+    }
+    this.emitPageChange();
+    return draw || this.riffle.active;
+  }
+  /** Frees the pages, textures and listeners, and takes the magazine out of its parent. */
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.riffle.stop();
+    this.abort.abort();
+    this.spreadMedia?.abort.abort();
+    this.view?.dispose();
+    this.view = null;
+    this.loader?.dispose();
+    this.paper.dispose();
+    this.removeFromParent();
+  }
+  // --- options and layout -----------------------------------------------------------
+  applyOptions(options) {
+    if (this.disposed) return;
+    const previous = this.options;
+    const next = this.options = snapshot(options);
+    const changed = changedOptions(previous, next);
+    if (!changed.length) return;
+    if (changed.includes("spreadQuery")) this.watchSpreadQuery();
+    const page = this.page;
+    let rebuild = changed.some((key) => !LIVE_OPTIONS.has(key));
+    if (changed.includes("pages") && this.pagesKey(next) !== this.lastPagesKey) {
+      this.loader?.dispose();
+      this.loader = null;
+      rebuild = true;
+    }
+    if (changed.includes("preload")) this.loader?.setRadius(preloadRadius(this.options.preload));
+    if (rebuild) this.remount(page);
+  }
+  pickLayout() {
+    const layout = this.options.layout ?? "auto";
+    if (layout !== "auto") return layout;
+    return this.spreadMedia?.list.matches ? "spread" : "single";
+  }
+  watchSpreadQuery() {
+    this.spreadMedia?.abort.abort();
+    const list = window.matchMedia(this.options.spreadQuery ?? DEFAULT_SPREAD_QUERY);
+    const abort = new AbortController();
+    list.addEventListener("change", () => this.remount(), { signal: abort.signal });
+    this.spreadMedia = { list, abort };
+  }
+  remount(page = this.page) {
+    if (this.disposed) return;
+    this.riffle.stop();
+    this.view?.dispose();
+    const layout = this.pickLayout();
+    const settings = resolveSettings(this.options, layout, this.motionMedia.matches);
+    this.lastPagesKey = this.pagesKey(this.options);
+    if (!this.loader) this.loadPages(page, layout);
+    this.loader?.setWrap(layout === "single" && settings.loop);
+    const domElement = this.domElement;
+    const blank = this.paper.blank;
+    const ctx = {
+      input: {
+        element: domElement,
+        ray: (x, y, ray) => rayThrough(this.camera, domElement, x, y, ray),
+        covers: (x, y) => this.covers(x, y)
+      },
+      settings,
+      textures: this.options.pages.map((_, i) => this.loader?.textures[i] ?? blank),
+      blank: layout === "single" ? this.paper.back(settings.paper.backColor) : blank,
+      pattern: this.paper.grain(settings, this.renderer),
+      position: pageToPosition(page, layout, this.pageCount),
+      metrics: this.metrics,
+      shading: {
+        spineContact: { value: new THREE.Vector3(1, 0, 0) },
+        lightDirection: { value: new THREE.Vector3(...settings.lighting.sun.position).normalize() }
+      },
+      requestFrame: () => this.requestFrame()
+    };
+    const engine = layout === "spread" ? new SpreadEngine(ctx) : new SingleEngine(ctx);
+    this.add(engine.group);
+    this.view = {
+      engine,
+      settings,
+      framing: framingFor(layout, settings.pageAspect),
+      dispose: () => {
+        this.remove(engine.group);
+        engine.dispose();
+      }
+    };
+    this.requestFrame();
+  }
+  // A drag across this many pixels turns a page all the way: the magazine's drag width, at the
+  // size it shows on screen now.
+  axis = new THREE.Vector2();
+  pageAxis() {
+    const group = this.view?.engine.group ?? this;
+    group.updateWorldMatrix(true, false);
+    this.camera.updateWorldMatrix(true, false);
+    const rect = this.domElement.getBoundingClientRect();
+    const [spine, edge] = this.ends.map((end, x) => end.set(x, 0, 0).applyMatrix4(group.matrixWorld).project(this.camera));
+    return this.axis.set((edge.x - spine.x) * rect.width / 2, -((edge.y - spine.y) * rect.height) / 2);
+  }
+  dragWidth() {
+    return Math.max(1, (this.view?.framing.dragWidth ?? 1) * this.pageAxis().length());
+  }
+  // whether this and every parent are visible
+  shown() {
+    for (let object = this; object; object = object.parent) if (!object.visible) return false;
+    return true;
+  }
+  requestFrame() {
+    this.needsRender = true;
+    this.dispatchEvent({ type: "change" });
+  }
+  // --- pages ---------------------------------------------------------------------
+  // what the pages show; their alt and text don't count
+  pagesKey(options) {
+    return options.pages.map((p) => sourceKey(pageImage(p))).join("\n");
+  }
+  loadPages(around, layout) {
+    this.loader?.dispose();
+    const loader = new PageLoader(this.options.pages.map(pageImage), this.renderer, preloadRadius(this.options.preload), {
+      onLoad: (page, texture) => {
+        if (this.loader !== loader) return;
+        this.view?.engine.setPageTexture(page, texture);
+        this.options.onPageLoad?.(page);
+        this.dispatchEvent({ type: "pageload", detail: { page } });
+      },
+      onUnload: (page) => {
+        if (this.loader !== loader) return;
+        this.view?.engine.setPageTexture(page, this.paper.blank);
+      },
+      onError: (page, error) => this.fail(error, page)
+    });
+    this.loader = loader;
+    this.inView = "";
+    this.ready = this.readyFired = false;
+    const count = this.pageCount;
+    const first = [around - 1, around, around + 1, around + 2];
+    const visible = pagesAt(pageToPosition(around, layout, count), layout, count);
+    loader.start(visible[0] ?? around, visible[visible.length - 1] ?? around, first).then(() => {
+      if (this.loader !== loader || this.disposed) return;
+      this.ready = true;
+      this.requestFrame();
+    });
+  }
+  // loads around what's on screen, pages mid-turn included, the page being read first
+  followReader(engine, layout) {
+    if (!this.loader) return;
+    const { from, to } = engine.pagesInView();
+    const around = pagesAt(engine.position, layout, this.pageCount)[0] ?? to;
+    const key = `${from}:${to}:${around}`;
+    if (key === this.inView) return;
+    this.inView = key;
+    this.loader.focus(from, to, around);
+  }
+  fail(error, page) {
+    if (this.options.onError) this.options.onError(error, page);
+    else console.warn("[leafthrough]", error);
+    this.dispatchEvent({ type: "error", detail: { error, page } });
+  }
+  detail() {
+    return pageDetail(this.view?.engine.position ?? 0, this.layout, this.pageCount);
+  }
+  emitPageChange() {
+    const detail = this.detail();
+    const key = `${detail.layout}:${detail.visiblePages.join(",")}/${detail.pageCount}`;
+    if (key === this.lastDetailKey) return;
+    const first = !this.lastDetailKey;
+    this.lastDetailKey = key;
+    if (first) return;
+    this.options.onPageChange?.(detail);
+    this.dispatchEvent({ type: "pagechange", detail });
+  }
+};
 export {
   DEFAULT_PAGE_ASPECT,
   DEFAULT_SPREAD_QUERY,
   LeafThrough,
+  LeafThroughObject,
   defaultPageLabel
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/LeafThroughObject.ts"],"sourcesContent":["import * as THREE from 'three'\nimport { sourceKey } from './content.js'\nimport { floorPoint, rayThrough, type Engine } from './engine.js'\nimport { framingFor, plainFramingFor, type Framing, type Rect } from './framing.js'\nimport type { GoToOptions } from './LeafThrough.js'\nimport { bindKeyboard, pageDetail, pagesAt, pageToPosition, Riffle } from './navigation.js'\nimport {\n  changedOptions,\n  DEFAULT_SPREAD_QUERY,\n  LIVE_OPTIONS,\n  pageImage,\n  preloadRadius,\n  resolveSettings,\n  snapshot,\n  type LeafThroughOptions,\n  type Layout,\n  type PageChangeDetail,\n  type ResolvedSettings,\n} from './options.js'\nimport { PaperTextures } from './paper/paperTextures.js'\nimport { SingleEngine } from './single/SingleEngine.js'\nimport { SpreadEngine } from './spread/SpreadEngine.js'\nimport { PageLoader } from './textures.js'\n\n/**\n * The magazine's options, less those about its own canvas and DOM. Of `lighting`, only\n * `sun.position` (which way the paper is shaded) and `shadows` (whether sheets cast and\n * receive them) apply: the lights are your scene's.\n */\nexport type LeafThroughObjectOptions = Omit<LeafThroughOptions, 'bleed' | 'maxPixelRatio' | 'plain' | 'label' | 'formatPageLabel'>\n\n/** What the magazine draws with, from your scene. */\nexport interface LeafThroughObjectContext {\n  /** The renderer drawing your scene. Pages load into it. */\n  renderer: THREE.WebGLRenderer\n  /** The camera your scene is drawn with. Pointer input is cast from it; change it later through `camera`. */\n  camera: THREE.Camera\n  /**\n   * Takes pointer input, and keys with `interaction.keyboard: true` while it has focus. It must\n   * show the camera's whole view. Default `renderer.domElement`.\n   */\n  domElement?: HTMLElement\n}\n\nexport interface LeafThroughObjectEventMap extends THREE.Object3DEventMap {\n  pagechange: { detail: PageChangeDetail }\n  ready: {}\n  pageload: { detail: { page: number } }\n  error: { detail: { error: unknown; page?: number } }\n  /** Something changed between frames: draw one, and keep drawing while `tick()` returns true. */\n  change: {}\n}\n\n/** Where the magazine lies in its own units. */\nexport interface LeafThroughBounds {\n  /** The pages at rest: what to frame. */\n  pages: Rect\n  /** Everything a turning page can sweep through. */\n  reach: Rect\n}\n\nconst isClient = typeof window !== 'undefined'\n\n/**\n * A 3D magazine to add to your own three.js scene. It draws nothing itself: call `tick()`\n * every frame you render, and render again whenever it fires `change`.\n *\n * In its own units a page is 1 wide and `pageAspect` tall, the spine runs up the y axis at\n * x = 0, and the pages lie on the z = 0 plane facing +z. Move, turn and scale it like any\n * object. Pointer input is cast through `camera` onto the pages, wherever they are.\n *\n * ```ts\n * const magazine = new LeafThroughObject({ renderer, camera }, { pages, layout: 'spread' })\n * scene.add(magazine)\n * renderer.setAnimationLoop((now) => {\n *   magazine.tick(now)\n *   renderer.render(scene, camera)\n * })\n * ```\n */\nexport class LeafThroughObject extends THREE.Group<LeafThroughObjectEventMap> {\n  /** The camera your scene is drawn with; pointer input is cast from it. */\n  camera: THREE.Camera\n  readonly domElement: HTMLElement\n  private inputEnabled = true\n\n  /**\n   * Whether it takes pointer and key input. Turn it off while it's tucked away or moving,\n   * and on again; the pages stay as they are. Turning it off lets go of a page being held.\n   * Default `true`.\n   */\n  get enabled() {\n    return this.inputEnabled\n  }\n  set enabled(value: boolean) {\n    if (this.inputEnabled && !value) this.view?.engine.cancelInput?.()\n    this.inputEnabled = value\n  }\n\n  private readonly renderer: THREE.WebGLRenderer\n  private options: LeafThroughObjectOptions\n  private readonly paper: PaperTextures\n  private loader: PageLoader | null = null\n  private view: { engine: Engine; settings: ResolvedSettings; framing: Framing; dispose: () => void } | null = null\n\n  private spreadMedia: { list: MediaQueryList; abort: AbortController } | null = null\n  private readonly motionMedia: MediaQueryList\n  private readonly abort = new AbortController()\n  private readonly riffle = new Riffle()\n  private readonly metrics: { readonly dragWidth: number; dragDelta(dx: number, dy: number): number }\n  private readonly ray = new THREE.Ray()\n  private readonly point = new THREE.Vector3()\n  private readonly ends = [new THREE.Vector3(), new THREE.Vector3()]\n  private needsRender = true\n  private lastPagesKey = ''\n  private lastDetailKey = ''\n  private inView = ''\n  private ready = false\n  private readyFired = false\n  private disposed = false\n\n  constructor({ renderer, camera, domElement = renderer.domElement }: LeafThroughObjectContext, options: LeafThroughObjectOptions) {\n    super()\n    if (!isClient) throw new Error('LeafThrough needs a browser; create it on the client.')\n    this.renderer = renderer\n    this.camera = camera\n    this.domElement = domElement\n    this.options = snapshot(options)\n    const object = this\n    this.metrics = {\n      get dragWidth() {\n        return object.dragWidth()\n      },\n      dragDelta(dx, dy) {\n        const axis = object.pageAxis()\n        return (dx * axis.x + dy * axis.y) / (axis.length() || 1)\n      },\n    }\n\n    this.paper = new PaperTextures(options.paper?.backColor ?? '#fcfcf9', {\n      onGrain: () => this.remount(),\n      onError: (error) => this.fail(error),\n    })\n\n    const signal = this.abort.signal\n    this.watchSpreadQuery()\n    this.motionMedia = window.matchMedia('(prefers-reduced-motion: reduce)')\n    this.motionMedia.addEventListener('change', () => this.remount(), { signal })\n    window.addEventListener('online', () => this.retry(), { signal })\n    bindKeyboard(\n      domElement,\n      () => (this.enabled && this.shown() ? this.view?.settings.interaction.keyboard : false),\n      { next: () => this.next(), prev: () => this.prev(), first: () => this.goTo(0), last: () => this.goTo(this.pageCount - 1) },\n      signal,\n    )\n\n    this.remount(options.startPage ?? 0)\n  }\n\n  // --- public API -----------------------------------------------------------------\n\n  /** First visible page, 0-based. */\n  get page(): number {\n    return this.detail().page\n  }\n\n  get pageCount(): number {\n    return this.options.pages.length\n  }\n\n  get layout(): Layout {\n    return this.view?.settings.layout ?? this.pickLayout()\n  }\n\n  get visiblePages(): number[] {\n    return this.detail().visiblePages\n  }\n\n  /** True while a page is being dragged or is completing its turn. */\n  get turning(): boolean {\n    return this.view?.engine.turning ?? false\n  }\n\n  /**\n   * Where the magazine lies in its own units: frame `pages` with your camera. Changes with\n   * the layout, which `'auto'` can switch as the window resizes.\n   */\n  get bounds(): LeafThroughBounds {\n    const layout = this.layout\n    const aspect = this.view?.settings.pageAspect ?? resolveSettings(this.options, layout, false).pageAspect\n    return { pages: plainFramingFor(layout, aspect).box, reach: framingFor(layout, aspect).view }\n  }\n\n  /** Turns to the next page. Returns false at the end. */\n  next(): boolean {\n    this.riffle.stop()\n    return this.view?.engine.flip(true) ?? false\n  }\n\n  /** Turns to the previous page. Returns false at the start. */\n  prev(): boolean {\n    this.riffle.stop()\n    return this.view?.engine.flip(false) ?? false\n  }\n\n  /** Shows `page` (0-based), jumping there or turning the pages one by one. */\n  goTo(page: number, { animate = false }: GoToOptions = {}) {\n    if (!this.view || Number.isNaN(page)) return\n    this.riffle.stop()\n    const engine = this.view.engine\n    const target = pageToPosition(page, this.view.settings.layout, this.pageCount)\n    if (!animate) {\n      engine.jumpTo(target)\n      return\n    }\n    if (engine.position === target) return\n    this.riffle.start(target, this.view.settings.motion.speed)\n    this.requestFrame()\n  }\n\n  /** Loads the pages that failed again. Also happens by itself when the browser comes back online. */\n  retry() {\n    this.loader?.retry()\n  }\n\n  /** Changes some options and keeps the rest. Structural changes rebuild the pages and keep the current page. */\n  update(options: Partial<LeafThroughObjectOptions>) {\n    this.applyOptions({ ...this.options, ...options })\n  }\n\n  /** Replaces every option at once: anything left out goes back to its default. */\n  setOptions(options: LeafThroughObjectOptions) {\n    this.applyOptions(options)\n  }\n\n  /**\n   * Whether a press at this point on screen lands on the magazine, which then takes it. Check\n   * it in your own pointer handlers to leave such presses alone. False while it's hidden or\n   * not `enabled`.\n   */\n  covers(clientX: number, clientY: number): boolean {\n    const view = this.view\n    if (!view || !this.enabled || !this.shown()) return false\n    if (!rayThrough(this.camera, this.domElement, clientX, clientY, this.ray)) return false\n    const point = floorPoint(view.engine.group, this.ray, this.point)\n    if (!point) return false\n    // a closed spread only turns from its cover side\n    const box = view.framing.box\n    const side = view.engine.activeSide\n    const left = side === 'right' ? box.x + box.width / 2 : box.x\n    const right = side === 'left' ? box.x + box.width / 2 : box.x + box.width\n    return point.x >= left && point.x <= right && point.y >= box.y && point.y <= box.y + box.height\n  }\n\n  /**\n   * Advances the pages to `now` (a `requestAnimationFrame` timestamp). Call it every frame\n   * before rendering. Returns true while the pages are moving and need another frame.\n   */\n  tick(now = performance.now()): boolean {\n    const view = this.view\n    if (!view) return false\n    this.riffle.step(now, view.engine)\n    const moved = view.engine.update(now)\n    this.followReader(view.engine, view.settings.layout)\n    const draw = moved || this.needsRender\n    this.needsRender = false\n    if (this.ready && !this.readyFired) {\n      this.readyFired = true\n      this.options.onReady?.()\n      this.dispatchEvent({ type: 'ready' })\n    }\n    this.emitPageChange()\n    return draw || this.riffle.active\n  }\n\n  /** Frees the pages, textures and listeners, and takes the magazine out of its parent. */\n  dispose() {\n    if (this.disposed) return\n    this.disposed = true\n    this.riffle.stop()\n    this.abort.abort()\n    this.spreadMedia?.abort.abort()\n    this.view?.dispose()\n    this.view = null\n    this.loader?.dispose()\n    this.paper.dispose()\n    this.removeFromParent()\n  }\n\n  // --- options and layout -----------------------------------------------------------\n\n  private applyOptions(options: LeafThroughObjectOptions) {\n    if (this.disposed) return\n    const previous = this.options\n    const next = (this.options = snapshot(options))\n    const changed = changedOptions(previous, next)\n    if (!changed.length) return\n    if (changed.includes('spreadQuery')) this.watchSpreadQuery()\n\n    const page = this.page\n    let rebuild = changed.some((key) => !LIVE_OPTIONS.has(key))\n    if (changed.includes('pages') && this.pagesKey(next) !== this.lastPagesKey) {\n      this.loader?.dispose()\n      this.loader = null\n      rebuild = true\n    }\n    if (changed.includes('preload')) this.loader?.setRadius(preloadRadius(this.options.preload))\n    if (rebuild) this.remount(page)\n  }\n\n  private pickLayout(): Layout {\n    const layout = this.options.layout ?? 'auto'\n    if (layout !== 'auto') return layout\n    return this.spreadMedia?.list.matches ? 'spread' : 'single'\n  }\n\n  private watchSpreadQuery() {\n    this.spreadMedia?.abort.abort()\n    const list = window.matchMedia(this.options.spreadQuery ?? DEFAULT_SPREAD_QUERY)\n    const abort = new AbortController()\n    list.addEventListener('change', () => this.remount(), { signal: abort.signal })\n    this.spreadMedia = { list, abort }\n  }\n\n  private remount(page = this.page) {\n    if (this.disposed) return\n    this.riffle.stop()\n    this.view?.dispose()\n\n    const layout = this.pickLayout()\n    const settings = resolveSettings(this.options, layout, this.motionMedia.matches)\n    this.lastPagesKey = this.pagesKey(this.options)\n    if (!this.loader) this.loadPages(page, layout)\n    this.loader?.setWrap(layout === 'single' && settings.loop)\n\n    const domElement = this.domElement\n    const blank = this.paper.blank\n    const ctx = {\n      input: {\n        element: domElement,\n        ray: (x: number, y: number, ray: THREE.Ray) => rayThrough(this.camera, domElement, x, y, ray),\n        covers: (x: number, y: number) => this.covers(x, y),\n      },\n      settings,\n      textures: this.options.pages.map((_, i) => this.loader?.textures[i] ?? blank),\n      blank: layout === 'single' ? this.paper.back(settings.paper.backColor) : blank,\n      pattern: this.paper.grain(settings, this.renderer),\n      position: pageToPosition(page, layout, this.pageCount),\n      metrics: this.metrics,\n      shading: {\n        spineContact: { value: new THREE.Vector3(1, 0, 0) },\n        lightDirection: { value: new THREE.Vector3(...settings.lighting.sun.position).normalize() },\n      },\n      requestFrame: () => this.requestFrame(),\n    }\n    const engine: Engine = layout === 'spread' ? new SpreadEngine(ctx) : new SingleEngine(ctx)\n    this.add(engine.group)\n    this.view = {\n      engine,\n      settings,\n      framing: framingFor(layout, settings.pageAspect),\n      dispose: () => {\n        this.remove(engine.group)\n        engine.dispose()\n      },\n    }\n    this.requestFrame()\n  }\n\n  // A drag across this many pixels turns a page all the way: the magazine's drag width, at the\n  // size it shows on screen now.\n  private readonly axis = new THREE.Vector2()\n\n  private pageAxis() {\n    const group = this.view?.engine.group ?? this\n    group.updateWorldMatrix(true, false)\n    this.camera.updateWorldMatrix(true, false)\n    const rect = this.domElement.getBoundingClientRect()\n    const [spine, edge] = this.ends.map((end, x) => end.set(x, 0, 0).applyMatrix4(group.matrixWorld).project(this.camera))\n    return this.axis.set(((edge.x - spine.x) * rect.width) / 2, -((edge.y - spine.y) * rect.height) / 2)\n  }\n\n  private dragWidth() {\n    return Math.max(1, (this.view?.framing.dragWidth ?? 1) * this.pageAxis().length())\n  }\n\n  // whether this and every parent are visible\n  private shown() {\n    for (let object: THREE.Object3D | null = this; object; object = object.parent) if (!object.visible) return false\n    return true\n  }\n\n  private requestFrame() {\n    this.needsRender = true\n    this.dispatchEvent({ type: 'change' })\n  }\n\n  // --- pages ---------------------------------------------------------------------\n\n  // what the pages show; their alt and text don't count\n  private pagesKey(options: LeafThroughObjectOptions) {\n    return options.pages.map((p) => sourceKey(pageImage(p))).join('\\n')\n  }\n\n  private loadPages(around: number, layout: Layout) {\n    this.loader?.dispose()\n    const loader = new PageLoader(this.options.pages.map(pageImage), this.renderer, preloadRadius(this.options.preload), {\n      onLoad: (page, texture) => {\n        if (this.loader !== loader) return\n        this.view?.engine.setPageTexture(page, texture)\n        this.options.onPageLoad?.(page)\n        this.dispatchEvent({ type: 'pageload', detail: { page } })\n      },\n      onUnload: (page) => {\n        if (this.loader !== loader) return\n        this.view?.engine.setPageTexture(page, this.paper.blank)\n      },\n      onError: (page, error) => this.fail(error, page),\n    })\n    this.loader = loader\n    this.inView = ''\n    this.ready = this.readyFired = false\n    // the pages around the start, so the first turn either way has its next page ready\n    const count = this.pageCount\n    const first = [around - 1, around, around + 1, around + 2]\n    const visible = pagesAt(pageToPosition(around, layout, count), layout, count)\n    loader.start(visible[0] ?? around, visible[visible.length - 1] ?? around, first).then(() => {\n      if (this.loader !== loader || this.disposed) return\n      this.ready = true\n      this.requestFrame()\n    })\n  }\n\n  // loads around what's on screen, pages mid-turn included, the page being read first\n  private followReader(engine: Engine, layout: Layout) {\n    if (!this.loader) return\n    const { from, to } = engine.pagesInView()\n    const around = pagesAt(engine.position, layout, this.pageCount)[0] ?? to\n    const key = `${from}:${to}:${around}`\n    if (key === this.inView) return\n    this.inView = key\n    this.loader.focus(from, to, around)\n  }\n\n  private fail(error: unknown, page?: number) {\n    if (this.options.onError) this.options.onError(error, page)\n    else console.warn('[leafthrough]', error)\n    this.dispatchEvent({ type: 'error', detail: { error, page } })\n  }\n\n  private detail(): PageChangeDetail {\n    return pageDetail(this.view?.engine.position ?? 0, this.layout, this.pageCount)\n  }\n\n  private emitPageChange() {\n    const detail = this.detail()\n    const key = `${detail.layout}:${detail.visiblePages.join(',')}/${detail.pageCount}`\n    if (key === this.lastDetailKey) return\n    const first = !this.lastDetailKey\n    this.lastDetailKey = key\n    if (first) return\n    this.options.onPageChange?.(detail)\n    this.dispatchEvent({ type: 'pagechange', detail })\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/navigation.d.ts

@@ -0,0 +1,26 @@
+import type { Engine } from './engine.js';
+import type { InteractionOptions, Layout, PageChangeDetail } from './options.js';
+export declare function pageToPosition(page: number, layout: Layout, count: number): number;
+export declare function positionToPage(position: number, layout: Layout): number;
+/** The pages showing at an engine position. */
+export declare function pagesAt(position: number, layout: Layout, count: number): number[];
+export declare function pageDetail(position: number, layout: Layout, count: number): PageChangeDetail;
+/** Turns one page every `interval` ms until the engine reaches `target`. */
+export declare class Riffle {
+    private state;
+    get active(): boolean;
+    start(target: number, speed: number): void;
+    stop(): void;
+    step(now: number, engine: Engine): void;
+}
+export interface KeyboardActions {
+    next(): unknown;
+    prev(): unknown;
+    first(): unknown;
+    last(): unknown;
+}
+/**
+ * Arrow keys, PageUp/PageDown and Home/End. With `true` they work while `element` has focus;
+ * with `'global'` anywhere on the page, except in text fields.
+ */
+export declare function bindKeyboard(element: HTMLElement, mode: () => InteractionOptions['keyboard'] | undefined, actions: KeyboardActions, signal: AbortSignal): void;

package/dist/options.d.ts

@@ -43,6 +43,12 @@ export interface PaperOptions {
     wrinkles?: number;
     /** Scales how much resting pages bulge up off the spine. Default `1`. */
     bulge?: number;
+    /**
+     * Cuts each sheet to the shape of its front page: where that image is transparent there's no
+     * paper, so the sheet and its shadow take its outline (a die-cut cover, a flap). Default
+     * `false`: transparent areas are unprinted paper.
+     */
+    cutout?: boolean;
 }
 export interface LightingOptions {
     /** Hemisphere light. Default sky `#ffffff`, ground `#a1aeaf`, intensity `1.5` (spread) or `1.7` (single). */
@@ -80,8 +86,9 @@ export interface MotionOptions {
     /** How far a hovered sheet lifts, as a share of a turn (spread). `0` disables. Default `0.03`. */
     hoverLift?: number;
     /**
-     * `'auto'` follows the user's `prefers-reduced-motion`. When reduced, turns are quicker and
-     * hovering doesn't lift pages. Default `'auto'`.
+     * `'auto'` follows the user's `prefers-reduced-motion`. When reduced, the decorative motion
+     * goes: hovered pages don't lift and turns don't wobble at random. Turns themselves keep their
+     * speed, and press and hold still riffles. Default `'auto'`.
      */
     reducedMotion?: 'auto' | boolean;
 }
@@ -192,3 +199,11 @@ export interface ResolvedSettings {
     maxPixelRatio: number;
 }
 export declare function resolveSettings(options: LeafThroughOptions, layout: Layout, prefersReducedMotion: boolean): ResolvedSettings;
+/** Options that don't need a rebuild (pages only need one when their images change). */
+export declare const LIVE_OPTIONS: Set<keyof LeafThroughOptions>;
+/** How many pages either side of the visible ones load, from the `preload` option. */
+export declare function preloadRadius(preload: number | undefined): number;
+export declare function snapshot<T>(value: T): T;
+export declare function deepEqual(a: unknown, b: unknown): boolean;
+/** The options that changed between two snapshots. */
+export declare function changedOptions<T extends object>(previous: T, next: T): (keyof T)[];

package/dist/paper/paperTextures.d.ts

@@ -0,0 +1,25 @@
+import * as THREE from 'three';
+import type { ResolvedSettings } from '../options.js';
+export interface PaperTextureEvents {
+    /** A custom grain image arrived; sheets made before it show none. */
+    onGrain(): void;
+    onError(error: unknown): void;
+}
+/** Plain paper and the grain, kept across rebuilds and made again only when their options change. */
+export declare class PaperTextures {
+    private readonly events;
+    /** Plain paper, for missing pages and the spread's unprinted sides. */
+    readonly blank: THREE.DataTexture;
+    backBlank: {
+        texture: THREE.DataTexture;
+        color: string;
+    };
+    private pattern;
+    private disposed;
+    constructor(backColor: THREE.ColorRepresentation, events: PaperTextureEvents);
+    /** The blank backs of single-layout pages, in `paper.backColor`. */
+    back(color: THREE.ColorRepresentation): THREE.Texture;
+    grain(settings: ResolvedSettings, renderer: THREE.WebGLRenderer): THREE.Texture;
+    dispose(): void;
+}
+export declare function colorKey(color: THREE.ColorRepresentation): string;

package/dist/react.js

@@ -2,7 +2,7 @@
 import {
   LeafThrough,
   defaultPageLabel
-} from "./chunk-GJRP6UAH.js";
+} from "./chunk-GYSQO7QZ.js";
 
 // src/react.tsx
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";

package/dist/single/SingleEngine.d.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import type { Engine, EngineContext } from '../engine.js';
+import { type Engine, type EngineContext } from '../engine.js';
 /**
  * One page at a time: turned pages swing round the spine and roll up behind the magazine.
  */
@@ -9,10 +9,9 @@ export declare class SingleEngine implements Engine {
     private readonly settings;
     private readonly halfHeight;
     private readonly liftHeight;
-    private readonly camera;
-    private readonly canvas;
-    private readonly hitArea;
+    private readonly input;
     private readonly metrics;
+    private readonly requestFrame;
     private readonly geometry;
     private readonly sheets;
     private readonly count;
@@ -30,11 +29,8 @@ export declare class SingleEngine implements Engine {
     private touch;
     private dirty;
     private last;
-    private readonly raycaster;
-    private readonly ndc;
-    private readonly floor;
+    private readonly ray;
     private readonly hit;
-    private readonly spine;
     constructor(ctx: EngineContext);
     get position(): number;
     get turning(): boolean;
@@ -45,9 +41,11 @@ export declare class SingleEngine implements Engine {
     };
     private pileTop;
     setPageTexture(page: number, texture: THREE.Texture): void;
+    cancelInput(): void;
     dispose(): void;
     private randomWobble;
     private seconds;
+    private wake;
     private pileHeight;
     private pileReach;
     private paced;
@@ -55,7 +53,7 @@ export declare class SingleEngine implements Engine {
     private shutting;
     private inFlight;
     private busy;
-    private floorPoint;
+    private pointAt;
     private grab;
     private canTurn;
     private sheetAt;