leafthrough 0.1.3 → 0.1.4

package/dist/{chunk-XPIDTVB5.js → chunk-GYSQO7QZ.js}

@@ -32,7 +32,8 @@ function resolveSettings(options, layout, prefersReducedMotion) {
       metalness: paper.metalness ?? 0.17,
       backColor: paper.backColor ?? "#fcfcf9",
       wrinkles: paper.wrinkles ?? 1,
-      bulge: paper.bulge ?? 1
+      bulge: paper.bulge ?? 1,
+      cutout: paper.cutout ?? false
     },
     lighting: {
       ambient: {
@@ -69,9 +70,46 @@ function resolveSettings(options, layout, prefersReducedMotion) {
     maxPixelRatio: options.maxPixelRatio ?? 3
   };
 }
+var LIVE_OPTIONS = /* @__PURE__ */ new Set([
+  "onPageChange",
+  "onReady",
+  "onPageLoad",
+  "onError",
+  "formatPageLabel",
+  "label",
+  "startPage",
+  "preload",
+  "pages"
+]);
+function preloadRadius(preload) {
+  const radius = preload ?? 6;
+  return Number.isNaN(radius) ? 6 : Math.max(0, radius);
+}
+function snapshot(value) {
+  if (typeof value !== "object" || value === null) return value;
+  if (Array.isArray(value)) return value.map(snapshot);
+  if (Object.getPrototypeOf(value) !== Object.prototype) return value;
+  return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, snapshot(item)]));
+}
+function deepEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  const protoA = Object.getPrototypeOf(a);
+  if (protoA !== Object.prototype && protoA !== Array.prototype) return false;
+  if (protoA !== Object.getPrototypeOf(b)) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  return keysA.every((key) => deepEqual(a[key], b[key]));
+}
+function changedOptions(previous, next) {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(next)]);
+  return [...keys].filter((key) => !deepEqual(previous[key], next[key]));
+}
 
 // src/LeafThrough.ts
-import * as THREE10 from "three";
+import * as THREE13 from "three";
 
 // src/content.ts
 import * as THREE from "three";
@@ -226,6 +264,28 @@ function describe(element, alt, style) {
   return element;
 }
 
+// src/engine.ts
+import * as THREE2 from "three";
+var floor = new THREE2.Plane(new THREE2.Vector3(0, 0, 1), 0);
+var inverse = new THREE2.Matrix4();
+var localRay = new THREE2.Ray();
+function floorPoint(object, ray, target) {
+  object.updateWorldMatrix(true, false);
+  localRay.copy(ray).applyMatrix4(inverse.copy(object.matrixWorld).invert());
+  return localRay.intersectPlane(floor, target);
+}
+var raycaster = new THREE2.Raycaster();
+var ndc = new THREE2.Vector2();
+function rayThrough(camera, element, clientX, clientY, ray) {
+  const rect = element.getBoundingClientRect();
+  if (!rect.width || !rect.height) return false;
+  ndc.set((clientX - rect.left) / rect.width * 2 - 1, -((clientY - rect.top) / rect.height) * 2 + 1);
+  camera.updateWorldMatrix(true, false);
+  raycaster.setFromCamera(ndc, camera);
+  ray.copy(raycaster.ray);
+  return true;
+}
+
 // src/framing.ts
 var REFERENCE_ASPECT = 1.377;
 var SPREAD_OVERSCAN = 0.27975;
@@ -286,12 +346,276 @@ function fit(framing, width, height, bleed) {
   return { scale, view: toPx(framing.view), box: toPx(framing.box), height: boxHeight };
 }
 
+// src/navigation.ts
+import * as THREE3 from "three";
+function pageToPosition(page, layout, count) {
+  const p = THREE3.MathUtils.clamp(Math.round(page) || 0, 0, Math.max(count - 1, 0));
+  return layout === "spread" ? Math.ceil(p / 2) : p;
+}
+function positionToPage(position, layout) {
+  return layout === "spread" ? Math.max(0, 2 * position - 1) : position;
+}
+function pagesAt(position, layout, count) {
+  const candidates = layout === "spread" ? [2 * position - 1, 2 * position] : [position];
+  return candidates.filter((p) => p >= 0 && p < count);
+}
+function pageDetail(position, layout, count) {
+  const visiblePages = pagesAt(position, layout, count);
+  const page = visiblePages.length ? visiblePages[0] : Math.max(0, Math.min(positionToPage(position, layout), count - 1));
+  return { page, visiblePages, pageCount: count, layout };
+}
+var Riffle = class {
+  state = null;
+  get active() {
+    return this.state !== null;
+  }
+  start(target, speed) {
+    this.state = { target, interval: 140 / speed, last: -Infinity };
+  }
+  stop() {
+    this.state = null;
+  }
+  step(now, engine) {
+    const riffle = this.state;
+    if (!riffle || now - riffle.last < riffle.interval) return;
+    if (engine.position === riffle.target) {
+      this.state = null;
+      return;
+    }
+    riffle.last = now;
+    if (!engine.flip(engine.position < riffle.target)) this.state = null;
+  }
+};
+function bindKeyboard(element, mode, actions, signal) {
+  const handler = (e) => {
+    const current = mode();
+    if (!current || e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    if (current === "global") {
+      const target = e.target;
+      if (target?.closest?.('input, textarea, select, [contenteditable=""], [contenteditable="true"]')) return;
+    } else if (e.currentTarget !== element) return;
+    const keys = {
+      ArrowRight: actions.next,
+      PageDown: actions.next,
+      ArrowLeft: actions.prev,
+      PageUp: actions.prev,
+      Home: actions.first,
+      End: actions.last
+    };
+    const action = keys[e.key];
+    if (!action) return;
+    e.preventDefault();
+    action();
+  };
+  element.addEventListener("keydown", handler, { signal });
+  window.addEventListener(
+    "keydown",
+    (e) => {
+      if (mode() === "global" && !element.contains(e.target)) handler(e);
+    },
+    { signal }
+  );
+}
+
+// src/paper/paperTextures.ts
+import * as THREE7 from "three";
+
+// src/textures.ts
+import * as THREE4 from "three";
+var CONCURRENCY = 4;
+var PageLoader = class {
+  constructor(sources, renderer, radius, events) {
+    this.sources = sources;
+    this.renderer = renderer;
+    this.radius = radius;
+    this.events = events;
+    this.textures = new Array(sources.length);
+  }
+  sources;
+  renderer;
+  radius;
+  events;
+  /** Loaded textures by page; missing pages are still loading, unloaded or failed. */
+  textures;
+  owned = /* @__PURE__ */ new Set();
+  inFlight = /* @__PURE__ */ new Map();
+  failed = /* @__PURE__ */ new Set();
+  // `first` pages load before the rest; the rest go nearest first
+  first = [];
+  // the pages in view, and the one being read, which loads first among them
+  from = 0;
+  to = 0;
+  around = 0;
+  // whether the magazine loops, putting the cover right after the last page
+  wrap = false;
+  waiting = /* @__PURE__ */ new Set();
+  settleFirst = () => {
+  };
+  disposed = false;
+  /**
+   * Starts loading around the visible pages `from`–`to`. Resolves once the `first` pages
+   * within reach are in (or failed).
+   */
+  start(from, to, first) {
+    this.from = from;
+    this.to = to;
+    this.first = first.filter((i) => i >= 0 && i < this.sources.length && this.distance(i) <= this.radius);
+    this.waiting = new Set(this.first);
+    const ready = new Promise((resolve) => this.settleFirst = resolve);
+    this.focus(from, to);
+    if (!this.waiting.size) this.settleFirst();
+    return ready;
+  }
+  /**
+   * Follows the reader: loads around the pages in view (`from`–`to`), the page being read
+   * (`around`) first, and unloads pages left far behind.
+   */
+  focus(from, to = from, around = from) {
+    if (this.disposed) return;
+    this.from = from;
+    this.to = to;
+    this.around = around;
+    const keep = 2 * this.radius;
+    for (const [i, request] of this.inFlight) {
+      if (this.distance(i) <= keep) continue;
+      request.abort();
+      this.inFlight.delete(i);
+    }
+    this.textures.forEach((texture, i) => {
+      if (!texture || this.distance(i) <= keep || !this.owned.has(texture)) return;
+      this.textures[i] = void 0;
+      this.events.onUnload(i);
+      this.owned.delete(texture);
+      texture.dispose();
+    });
+    this.pump();
+  }
+  setWrap(wrap) {
+    if (wrap === this.wrap) return;
+    this.wrap = wrap;
+    this.focus(this.from, this.to, this.around);
+  }
+  setRadius(radius) {
+    this.radius = radius;
+    this.focus(this.from, this.to, this.around);
+  }
+  /** Loads the pages that failed again. */
+  retry() {
+    this.failed.clear();
+    this.pump();
+  }
+  dispose() {
+    this.disposed = true;
+    for (const request of this.inFlight.values()) request.abort();
+    for (const texture of this.owned) texture.dispose();
+    this.owned.clear();
+  }
+  // pages away from the visible ones
+  distance(page) {
+    const straight = page < this.from ? this.from - page : page > this.to ? page - this.to : 0;
+    if (!this.wrap) return straight;
+    const count = this.sources.length;
+    return Math.min(straight, page + count - this.to, this.from + count - page);
+  }
+  // starts the most wanted pages while there's room
+  pump() {
+    if (this.disposed || this.inFlight.size >= CONCURRENCY) return;
+    const wanted = (i) => !this.textures[i] && !this.inFlight.has(i) && !this.failed.has(i) && this.distance(i) <= this.radius;
+    const queue = [
+      ...this.first.filter((i) => this.waiting.has(i)),
+      ...this.sources.map((_, i) => i).sort((a, b) => this.distance(a) - this.distance(b) || Math.abs(a - this.around) - Math.abs(b - this.around))
+    ];
+    for (const page of queue) {
+      if (this.inFlight.size >= CONCURRENCY) return;
+      if (wanted(page)) this.load(page);
+    }
+  }
+  load(page) {
+    const request = new AbortController();
+    this.inFlight.set(page, request);
+    this.createTexture(this.sources[page], request.signal).then((texture) => {
+      if (this.disposed || request.signal.aborted) {
+        if (this.owned.delete(texture)) texture.dispose();
+        return;
+      }
+      texture.colorSpace = THREE4.SRGBColorSpace;
+      texture.premultiplyAlpha = true;
+      texture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();
+      texture.needsUpdate = true;
+      this.renderer.initTexture(texture);
+      this.textures[page] = texture;
+      this.events.onLoad(page, texture);
+    }).catch((error) => {
+      if (this.disposed || request.signal.aborted) return;
+      this.failed.add(page);
+      this.events.onError(page, error);
+    }).finally(() => {
+      if (this.inFlight.get(page) === request) this.inFlight.delete(page);
+      if (this.waiting.delete(page) && !this.waiting.size) this.settleFirst();
+      this.pump();
+    });
+  }
+  async createTexture(source, signal) {
+    if (source instanceof THREE4.Texture) return source;
+    const own = (texture) => (this.owned.add(texture), texture);
+    if (typeof source === "string") return own(new THREE4.Texture(await loadImage(source, signal)));
+    if (typeof HTMLCanvasElement !== "undefined" && source instanceof HTMLCanvasElement) return own(new THREE4.CanvasTexture(source));
+    if (typeof HTMLImageElement !== "undefined" && source instanceof HTMLImageElement) {
+      if (!source.complete || !source.naturalWidth) await source.decode();
+      return own(new THREE4.Texture(source));
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = source.width;
+    canvas.height = source.height;
+    canvas.getContext("2d").drawImage(source, 0, 0);
+    return own(new THREE4.CanvasTexture(canvas));
+  }
+};
+function loadImage(url, signal) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.decoding = "async";
+    const onAbort = () => {
+      done();
+      img.src = "";
+      reject(new DOMException("Page no longer needed", "AbortError"));
+    };
+    const done = () => {
+      img.onload = img.onerror = null;
+      signal?.removeEventListener("abort", onAbort);
+    };
+    signal?.addEventListener("abort", onAbort, { once: true });
+    img.onload = () => {
+      done();
+      img.decode().then(() => resolve(img), () => resolve(img));
+    };
+    img.onerror = () => {
+      done();
+      reject(new Error(`Failed to load page image: ${url}`));
+    };
+    img.src = url;
+  });
+}
+async function loadGrain(source) {
+  let texture;
+  if (typeof source === "string") texture = new THREE4.Texture(await loadImage(source));
+  else if (source instanceof HTMLCanvasElement) texture = new THREE4.CanvasTexture(source);
+  else {
+    if (!source.complete || !source.naturalWidth) await source.decode();
+    texture = new THREE4.Texture(source);
+  }
+  texture.wrapS = texture.wrapT = THREE4.RepeatWrapping;
+  texture.needsUpdate = true;
+  return texture;
+}
+
 // src/paper/paperMaterial.ts
-import * as THREE2 from "three";
+import * as THREE5 from "three";
 var glslFloat = (n) => Number.isInteger(n) ? `${n}.0` : `${n}`;
 function createPaperMaterials(uniforms, shader, settings) {
   const { paper, pageAspect } = settings;
-  const blank = new THREE2.Color(paper.backColor);
+  const blank = new THREE5.Color(paper.backColor);
   const constants = (
     /* glsl */
     `
@@ -308,8 +632,8 @@ function createPaperMaterials(uniforms, shader, settings) {
   `
   );
   const noiseAt = (component) => shader.noise ? `aNoise.${component}` : "0.0";
-  const material = new THREE2.MeshStandardMaterial({
-    side: THREE2.DoubleSide,
+  const material = new THREE5.MeshStandardMaterial({
+    side: THREE5.DoubleSide,
     metalness: paper.metalness,
     roughness: paper.roughness
   });
@@ -372,10 +696,15 @@ function createPaperMaterials(uniforms, shader, settings) {
       "#include <map_fragment>",
       `vec4 frontColor = texture2D(uFront, vSheetUv);
         vec4 backColor = texture2D(uBack, vec2(1.0 - vSheetUv.x, vSheetUv.y));
-        // Transparent artwork is unprinted paper, not a hole in the sheet. Page images are
+        ${paper.cutout ? `// Cut to the front page: no paper where it's transparent. The edge that's left
+        // keeps its own colour (page images are premultiplied, so divide the alpha out) rather
+        // than fading to paper, which would leave a pale fringe.
+        if (frontColor.a < 0.5) discard;
+        frontColor = vec4(frontColor.rgb / frontColor.a, 1.0);
+        backColor = backColor.a > 0.01 ? vec4(backColor.rgb / backColor.a, 1.0) : vec4(BLANK_PAPER, 1.0);` : `// Transparent artwork is unprinted paper, not a hole in the sheet. Page images are
         // premultiplied, so this is "over" compositing onto the paper colour.
         frontColor = vec4(frontColor.rgb + BLANK_PAPER * (1.0 - frontColor.a), 1.0);
-        backColor = vec4(backColor.rgb + BLANK_PAPER * (1.0 - backColor.a), 1.0);
+        backColor = vec4(backColor.rgb + BLANK_PAPER * (1.0 - backColor.a), 1.0);`}
         vec4 faceColor = gl_FrontFacing ? frontColor : backColor;
         vec4 otherColor = gl_FrontFacing ? backColor : frontColor;
         // thin paper lets some of the other side through
@@ -383,7 +712,7 @@ function createPaperMaterials(uniforms, shader, settings) {
         sheetColor.rgb *= mix(vec3(1.0), otherColor.rgb, SHOW_THROUGH);
         diffuseColor *= sheetColor;
         float inkAmount = 1.0 - dot(faceColor.rgb, vec3(0.299, 0.587, 0.114));`
-    ).replace("#include <lights_fragment_begin>", withContactShadow(THREE2.ShaderChunk.lights_fragment_begin)).replace(
+    ).replace("#include <lights_fragment_begin>", withContactShadow(THREE5.ShaderChunk.lights_fragment_begin)).replace(
       "#include <roughnessmap_fragment>",
       `#include <roughnessmap_fragment>
         // ink sits glossier than bare paper; fibres are rougher
@@ -397,19 +726,38 @@ function createPaperMaterials(uniforms, shader, settings) {
         gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.0), pattern * PATTERN_DARKEN);`
     );
   };
-  const depthMaterial = new THREE2.MeshDepthMaterial({
-    depthPacking: THREE2.RGBADepthPacking,
-    side: THREE2.DoubleSide
+  const depthMaterial = new THREE5.MeshDepthMaterial({
+    depthPacking: THREE5.RGBADepthPacking,
+    side: THREE5.DoubleSide
   });
-  depthMaterial.onBeforeCompile = (program) => {
+  const distanceMaterial = new THREE5.MeshDistanceMaterial({ side: THREE5.DoubleSide });
+  depthMaterial.onBeforeCompile = distanceMaterial.onBeforeCompile = (program) => {
     Object.assign(program.uniforms, uniforms);
-    program.vertexShader = constants + shader.vertexChunk + program.vertexShader;
+    program.vertexShader = constants + shader.vertexChunk + "varying vec2 vSheetUv;\nvarying vec3 vSheetPosition;\n" + program.vertexShader;
     program.vertexShader = program.vertexShader.replace(
       "#include <begin_vertex>",
-      `vec3 transformed = sheetPosition(uv, ${noiseAt("x")}) - vec3(SHADOW_OFFSET_X, 0.0, 0.0);`
+      `vSheetUv = uv;
+      vSheetPosition = sheetPosition(uv, ${noiseAt("x")});
+      vec3 transformed = vSheetPosition - vec3(SHADOW_OFFSET_X, 0.0, 0.0);`
+    );
+    program.fragmentShader = constants + `
+      uniform sampler2D uFront;
+      varying vec2 vSheetUv;
+      varying vec3 vSheetPosition;
+      ${shader.fragmentChunk ?? ""}
+    ` + program.fragmentShader;
+    program.fragmentShader = program.fragmentShader.replace(
+      "#include <clipping_planes_fragment>",
+      `#include <clipping_planes_fragment>
+      ${paper.cutout ? "if (texture2D(uFront, vSheetUv).a < 0.5) discard;" : ""}
+      ${shader.fragmentChunk ? "if (sheetHidden(vSheetPosition)) discard;" : ""}`
     );
   };
-  return { material, depthMaterial };
+  const cacheKey = constants + shader.vertexChunk + (shader.fragmentChunk ?? "") + (paper.cutout ? "cutout" : "");
+  material.customProgramCacheKey = () => cacheKey;
+  depthMaterial.customProgramCacheKey = () => cacheKey;
+  distanceMaterial.customProgramCacheKey = () => cacheKey;
+  return { material, depthMaterial, distanceMaterial };
 }
 var DIRECTIONAL_SHADOW = "getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowIntensity, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] )";
 function withContactShadow(chunk) {
@@ -420,9 +768,10 @@ function withContactShadow(chunk) {
   );
 }
 function createSheetMesh(geometry, uniforms, shader, settings) {
-  const { material, depthMaterial } = createPaperMaterials(uniforms, shader, settings);
-  const mesh = new THREE2.Mesh(geometry, material);
+  const { material, depthMaterial, distanceMaterial } = createPaperMaterials(uniforms, shader, settings);
+  const mesh = new THREE5.Mesh(geometry, material);
   mesh.customDepthMaterial = depthMaterial;
+  mesh.customDistanceMaterial = distanceMaterial;
   mesh.castShadow = settings.lighting.shadows;
   mesh.receiveShadow = settings.lighting.shadows;
   mesh.frustumCulled = false;
@@ -438,22 +787,23 @@ function layerSheet(mesh, depth, count, moving) {
 function disposeSheetMesh(mesh) {
   mesh.material.dispose();
   mesh.customDepthMaterial?.dispose();
+  mesh.customDistanceMaterial?.dispose();
 }
 function solidTexture(color) {
-  const c = new THREE2.Color(color);
+  const c = new THREE5.Color(color);
   const srgb = c.clone().convertLinearToSRGB();
-  const texture = new THREE2.DataTexture(
+  const texture = new THREE5.DataTexture(
     new Uint8Array([Math.round(srgb.r * 255), Math.round(srgb.g * 255), Math.round(srgb.b * 255), 255]),
     1,
     1
   );
-  texture.colorSpace = THREE2.SRGBColorSpace;
+  texture.colorSpace = THREE5.SRGBColorSpace;
   texture.needsUpdate = true;
   return texture;
 }
 
 // src/paper/paperPattern.ts
-import * as THREE3 from "three";
+import * as THREE6 from "three";
 var SIZE = 384;
 var KERNEL = [
   [1, 0.108, -0.049, 0.022],
@@ -546,19 +896,76 @@ function createPaperPattern(renderer) {
     image.data[o + 3] = 255;
   });
   ctx.putImageData(image, 0, 0);
-  const texture = new THREE3.CanvasTexture(canvas);
-  texture.wrapS = texture.wrapT = THREE3.RepeatWrapping;
+  const texture = new THREE6.CanvasTexture(canvas);
+  texture.wrapS = texture.wrapT = THREE6.RepeatWrapping;
   texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
   return texture;
 }
 
-// src/plain/PlainEngine.ts
-import * as THREE4 from "three";
-var SWIPE_PX = 30;
-var PlainEngine = class {
-  group = new THREE4.Group();
-  maxPosition;
-  spread;
+// src/paper/paperTextures.ts
+var PaperTextures = class {
+  constructor(backColor, events) {
+    this.events = events;
+    this.backBlank = { texture: solidTexture(backColor), color: colorKey(backColor) };
+  }
+  events;
+  /** Plain paper, for missing pages and the spread's unprinted sides. */
+  blank = solidTexture("#fcfcf9");
+  backBlank;
+  pattern = null;
+  disposed = false;
+  /** The blank backs of single-layout pages, in `paper.backColor`. */
+  back(color) {
+    const key = colorKey(color);
+    if (key !== this.backBlank.color) {
+      this.backBlank.texture.dispose();
+      this.backBlank = { texture: solidTexture(color), color: key };
+    }
+    return this.backBlank.texture;
+  }
+  grain(settings, renderer) {
+    const grain = settings.paper.grain;
+    const key = grain === true || grain === void 0 ? "builtin" : grain === false ? "none" : grain;
+    if (this.pattern?.key === key) return this.pattern.texture;
+    this.pattern?.texture.dispose();
+    let texture;
+    if (key === "builtin") texture = createPaperPattern(renderer);
+    else if (key === "none") texture = solidTexture("#000000");
+    else {
+      texture = solidTexture("#000000");
+      loadGrain(key).then(
+        (loaded) => {
+          if (this.pattern?.key !== key || this.disposed) return loaded.dispose();
+          this.pattern.texture.dispose();
+          this.pattern.texture = loaded;
+          this.events.onGrain();
+        },
+        (error) => {
+          if (this.pattern?.key === key && !this.disposed) this.events.onError(error);
+        }
+      );
+    }
+    this.pattern = { texture, key };
+    return texture;
+  }
+  dispose() {
+    this.disposed = true;
+    this.pattern?.texture.dispose();
+    this.blank.dispose();
+    this.backBlank.texture.dispose();
+  }
+};
+function colorKey(color) {
+  return new THREE7.Color(color).getHexString();
+}
+
+// src/plain/PlainEngine.ts
+import * as THREE8 from "three";
+var SWIPE_PX = 30;
+var PlainEngine = class {
+  group = new THREE8.Group();
+  maxPosition;
+  spread;
   settings;
   hitArea;
   abort = new AbortController();
@@ -663,10 +1070,10 @@ var PlainEngine = class {
 };
 
 // src/single/SingleEngine.ts
-import * as THREE6 from "three";
+import * as THREE10 from "three";
 
 // src/single/singleSheet.ts
-import * as THREE5 from "three";
+import * as THREE9 from "three";
 var NORMAL_EPSILON = 0.02;
 var vertexChunk = (
   /* glsl */
@@ -787,18 +1194,18 @@ var fragmentChunk = (
 `
 );
 function createSingleGeometry(aspect) {
-  return new THREE5.PlaneGeometry(1, aspect, 64, Math.round(64 * aspect));
+  return new THREE9.PlaneGeometry(1, aspect, 64, Math.round(64 * aspect));
 }
 function createSingleSheet(geometry, front, back, pattern, settings, shading) {
   const uniforms = {
-    uPileLift: { value: new THREE5.Vector3(1, 0, 0) },
-    uPileReach: { value: new THREE5.Vector2(1, 1) },
+    uPileLift: { value: new THREE9.Vector3(1, 0, 0) },
+    uPileReach: { value: new THREE9.Vector2(1, 1) },
     uConeTaper: { value: 0 },
-    uTailCurl: { value: new THREE5.Vector4(1, 0, 1, 1) },
+    uTailCurl: { value: new THREE9.Vector4(1, 0, 1, 1) },
     uTailBend: { value: 0 },
-    uCone: { value: new THREE5.Vector3(0, 1, 0) },
-    uFlipRotation: { value: new THREE5.Vector2(1, 0) },
-    uTrim: { value: new THREE5.Vector3(0, 1, 1) },
+    uCone: { value: new THREE9.Vector3(0, 1, 0) },
+    uFlipRotation: { value: new THREE9.Vector2(1, 0) },
+    uTrim: { value: new THREE9.Vector3(0, 1, 1) },
     uFront: { value: front },
     uBack: { value: back },
     uPattern: { value: pattern },
@@ -867,7 +1274,7 @@ var PILE = {
 var BOOK = { pushBack: 0.05, pushRight: 0.02 };
 var CATCH_UP = { clump: 1.6, seed: 41 };
 var TAU = Math.PI * 2;
-var clamp = THREE6.MathUtils.clamp;
+var clamp = THREE10.MathUtils.clamp;
 var smooth = (x) => {
   const t = clamp(x, 0, 1);
   return t * t * (3 - 2 * t);
@@ -877,16 +1284,15 @@ var hash = (a, b) => {
   return s - Math.floor(s);
 };
 var SingleEngine = class {
-  group = new THREE6.Group();
+  group = new THREE10.Group();
   // the book, nudged back and right as you read
   maxPosition;
   settings;
   halfHeight;
   liftHeight;
-  camera;
-  canvas;
-  hitArea;
+  input;
   metrics;
+  requestFrame;
   geometry;
   sheets;
   count;
@@ -906,19 +1312,15 @@ var SingleEngine = class {
   touch = null;
   dirty = true;
   last = 0;
-  raycaster = new THREE6.Raycaster();
-  ndc = new THREE6.Vector2();
-  floor = new THREE6.Plane(new THREE6.Vector3(0, 0, 1), 0);
-  hit = new THREE6.Vector3();
-  spine = new THREE6.Vector3();
+  ray = new THREE10.Ray();
+  hit = new THREE10.Vector3();
   constructor(ctx) {
     this.settings = ctx.settings;
     this.halfHeight = ctx.settings.pageAspect / 2;
     this.liftHeight = PILE.liftHeight * ctx.settings.paper.bulge;
-    this.camera = ctx.camera;
-    this.canvas = ctx.canvas;
-    this.hitArea = ctx.hitArea;
+    this.input = ctx.input;
     this.metrics = ctx.metrics;
+    this.requestFrame = ctx.requestFrame;
     this.count = ctx.textures.length;
     this.maxPosition = this.count;
     this.current = clamp(Math.round(ctx.position), 0, Math.max(this.count - 1, 0));
@@ -989,7 +1391,13 @@ var SingleEngine = class {
     const sheet = this.sheets[page];
     if (!sheet) return;
     sheet.uniforms.uFront.value = texture;
-    this.dirty = true;
+    this.wake();
+  }
+  cancelInput() {
+    this.cancelHold();
+    this.touch = null;
+    if (this.press) this.release(new PointerEvent("pointercancel", { pointerId: this.press.id }));
+    this.wake();
   }
   dispose() {
     this.cancelHold();
@@ -1001,13 +1409,18 @@ var SingleEngine = class {
   randomWobble() {
     if (!this.settings.motion.jitter) return { tiltDeg: 0, flipTime: 1 };
     return {
-      tiltDeg: THREE6.MathUtils.lerp(-WOBBLE.tiltDeg, WOBBLE.tiltDeg, Math.random()),
-      flipTime: THREE6.MathUtils.lerp(WOBBLE.flipTimeMin, WOBBLE.flipTimeMax, Math.random())
+      tiltDeg: THREE10.MathUtils.lerp(-WOBBLE.tiltDeg, WOBBLE.tiltDeg, Math.random()),
+      flipTime: THREE10.MathUtils.lerp(WOBBLE.flipTimeMin, WOBBLE.flipTimeMax, Math.random())
     };
   }
   seconds(time) {
     return time / this.settings.motion.speed;
   }
+  // something changed between frames
+  wake() {
+    this.dirty = true;
+    this.requestFrame();
+  }
   // pile lift for a sheet this many pages below the top
   pileHeight(depth) {
     return this.liftHeight / (1 + depth * PILE.liftDepthFalloff) * (1 - 2e-3 * depth);
@@ -1047,13 +1460,9 @@ var SingleEngine = class {
     return this.inFlight(sheet) || this.drag?.sheet === sheet;
   }
   // floor point under the pointer, relative to the book
-  floorPoint(clientX, clientY) {
-    const rect = this.canvas.getBoundingClientRect();
-    this.ndc.set((clientX - rect.left) / rect.width * 2 - 1, -((clientY - rect.top) / rect.height) * 2 + 1);
-    this.raycaster.setFromCamera(this.ndc, this.camera);
-    this.floor.constant = -this.group.position.z;
-    const hit = this.raycaster.ray.intersectPlane(this.floor, this.hit);
-    return hit ? { x: hit.x - this.group.position.x, y: hit.y - this.group.position.y } : null;
+  pointAt(clientX, clientY) {
+    if (!this.input.ray(clientX, clientY, this.ray)) return null;
+    return floorPoint(this.group, this.ray, this.hit);
   }
   // where on the page the hand is, steering how the page tilts as it turns
   grab(sheet, point, snap) {
@@ -1070,11 +1479,10 @@ var SingleEngine = class {
     if (!forward) return this.current > 0;
     return this.current < (this.settings.loop ? this.count : this.count - 1);
   }
-  // which page a press at this x would pick up: right of the spine turns forward
-  sheetAt(clientX) {
-    const rect = this.canvas.getBoundingClientRect();
-    const spineX = this.spine.copy(this.group.position).project(this.camera).x;
-    const forward = clientX >= rect.left + (0.5 * spineX + 0.5) * rect.width;
+  // which page a press here would pick up: right of the spine turns forward
+  sheetAt(point) {
+    if (!point) return null;
+    const forward = point.x >= 0;
     if (!this.canTurn(forward)) return null;
     return { sheet: this.sheets[forward ? this.current : this.current - 1], forward };
   }
@@ -1082,7 +1490,7 @@ var SingleEngine = class {
   commit(forward, toProgress) {
     if (forward && toProgress === 1) this.current++;
     else if (!forward && toProgress === 0) this.current--;
-    this.dirty = true;
+    this.wake();
   }
   fly(sheet, forward, toProgress, flipTime = CLICK.flipTime) {
     this.commit(forward, toProgress);
@@ -1110,11 +1518,11 @@ var SingleEngine = class {
     this.flights = [];
     this.current = clamp(Math.round(position), 0, Math.max(this.count - 1, 0));
     for (const sheet of this.sheets) sheet.progress = sheet.index < this.current ? 1 : 0;
-    this.dirty = true;
+    this.wake();
   }
   // --- input ------------------------------------------------------------------
   bindInput() {
-    const el = this.hitArea;
+    const el = this.input.element;
     const signal = this.abort.signal;
     const { interaction } = this.settings;
     el.addEventListener(
@@ -1123,10 +1531,10 @@ var SingleEngine = class {
         if (this.press && e.pointerId !== this.press.id) return;
         if (this.hold && this.moved(e, this.hold.fired ? HOLD.moveSlopPx : void 0)) this.cancelHold();
         if (!this.drag || !this.press || !interaction.drag) return;
-        const dx = e.clientX - this.press.x;
+        const dx = this.metrics.dragDelta?.(e.clientX - this.press.x, e.clientY - this.press.y) ?? e.clientX - this.press.x;
         this.drag.progress = clamp(this.drag.base - dx / this.drag.rectWidth / this.settings.motion.dragDistance, 0, 1);
-        this.grab(this.drag.sheet, this.floorPoint(e.clientX, e.clientY), false);
-        this.dirty = true;
+        this.grab(this.drag.sheet, this.pointAt(e.clientX, e.clientY), false);
+        this.wake();
       },
       { signal }
     );
@@ -1135,11 +1543,13 @@ var SingleEngine = class {
       (e) => {
         if (this.press && !e.isPrimary) return;
         if (e.button !== 0 || !(interaction.drag || interaction.click || interaction.hold)) return;
-        const target = this.sheetAt(e.clientX);
+        if (!this.input.covers(e.clientX, e.clientY)) return;
+        const point = this.pointAt(e.clientX, e.clientY);
+        const target = this.sheetAt(point);
         if (!target) return;
         const sheet = target.sheet;
         if (!this.inFlight(sheet)) sheet.wobble = this.randomWobble();
-        this.grab(sheet, this.floorPoint(e.clientX, e.clientY), true);
+        this.grab(sheet, point, true);
         this.flights = this.flights.filter((f) => f.sheet !== sheet);
         this.press = { id: e.pointerId, x: e.clientX, y: e.clientY };
         this.drag = {
@@ -1165,7 +1575,7 @@ var SingleEngine = class {
           el.setPointerCapture(e.pointerId);
         } catch {
         }
-        this.dirty = true;
+        this.wake();
       },
       { signal }
     );
@@ -1177,7 +1587,8 @@ var SingleEngine = class {
       "touchstart",
       (e) => {
         const t = e.touches[0];
-        this.touch = e.touches.length === 1 ? { x: t.clientX, y: t.clientY, claimed: false } : null;
+        const single = e.touches.length === 1 && this.input.covers(t.clientX, t.clientY);
+        this.touch = single ? { x: t.clientX, y: t.clientY, claimed: false } : null;
       },
       { passive: true, signal }
     );
@@ -1223,7 +1634,7 @@ var SingleEngine = class {
     const sheet = this.sheets[hold.forward ? this.current : this.current - 1];
     const ramp = (from, to) => from + (to - from) * Math.min(hold.count / HOLD.speedUpSheets, 1);
     if (!this.inFlight(sheet)) sheet.wobble = this.randomWobble();
-    this.grab(sheet, this.floorPoint(hold.x, hold.y), true);
+    this.grab(sheet, this.pointAt(hold.x, hold.y), true);
     const flipTime = ramp(HOLD.firstFlipTime, HOLD.fastestFlipTime);
     this.fly(sheet, hold.forward, hold.forward ? 1 : 0, flipTime);
     hold.count++;
@@ -1242,9 +1653,10 @@ var SingleEngine = class {
     this.drag = null;
     this.press = null;
     try {
-      this.hitArea.releasePointerCapture(e.pointerId);
+      this.input.element.releasePointerCapture(e.pointerId);
     } catch {
     }
+    this.wake();
     if (!drag) return;
     const { interaction } = this.settings;
     if (!wasMoved || !interaction.drag) {
@@ -1278,6 +1690,7 @@ var SingleEngine = class {
     const to = drag.forward ? 0 : 1;
     if (drag.sheet.progress === to) return;
     this.flights.push({ sheet: drag.sheet, from: drag.sheet.progress, to, start: performance.now(), duration: 300 });
+    this.wake();
   }
   // --- simulation ---------------------------------------------------------------
   update(now) {
@@ -1457,10 +1870,10 @@ var SingleEngine = class {
 };
 
 // src/spread/SpreadEngine.ts
-import * as THREE8 from "three";
+import * as THREE12 from "three";
 
 // src/spread/spreadSheet.ts
-import * as THREE7 from "three";
+import * as THREE11 from "three";
 var NORMAL_EPSILON2 = 0.03;
 var WRINKLE_SCALE = 1.2;
 var WRINKLE_SEED = 46;
@@ -1556,7 +1969,7 @@ function wrinkleNoise(u, v, aspect) {
   return value;
 }
 function createSpreadGeometry(aspect) {
-  const geometry = new THREE7.PlaneGeometry(1, aspect, 64, Math.round(64 * aspect));
+  const geometry = new THREE11.PlaneGeometry(1, aspect, 64, Math.round(64 * aspect));
   const uv = geometry.attributes.uv;
   const noise = new Float32Array(uv.count * 3);
   for (let i = 0; i < uv.count; i++) {
@@ -1566,7 +1979,7 @@ function createSpreadGeometry(aspect) {
     noise[i * 3 + 1] = wrinkleNoise(u + NORMAL_EPSILON2, v, aspect);
     noise[i * 3 + 2] = wrinkleNoise(u, v + NORMAL_EPSILON2 / aspect, aspect);
   }
-  geometry.setAttribute("aNoise", new THREE7.BufferAttribute(noise, 3));
+  geometry.setAttribute("aNoise", new THREE11.BufferAttribute(noise, 3));
   return geometry;
 }
 function createSpreadSheet(geometry, front, back, pattern, settings, shading) {
@@ -1574,9 +1987,9 @@ function createSpreadSheet(geometry, front, back, pattern, settings, shading) {
     uFlipProgress: { value: 0 },
     uWrinkleSide: { value: -1 },
     uBendAngle: { value: 0 },
-    uFold: { value: new THREE7.Vector2(1, 0) },
-    uCurl: { value: new THREE7.Vector2(0, 1) },
-    uFlipRotation: { value: new THREE7.Vector2(1, 0) },
+    uFold: { value: new THREE11.Vector2(1, 0) },
+    uCurl: { value: new THREE11.Vector2(0, 1) },
+    uFlipRotation: { value: new THREE11.Vector2(1, 0) },
     uDirection: { value: 1 },
     uStackLift: { value: 1 },
     uFront: { value: front },
@@ -1618,21 +2031,20 @@ var HOLD2 = {
 };
 var DRAG2 = { progressSmoothTime: 0.9, fallTime: 1, fallTimeExponent: 0.5, landingSpeed: 0.5, clickSlopPx: 5 };
 var CLICK2 = { flipTime: 0.85, followArcGainMin: 1, followArcGainMax: 1.08 };
-var clamp2 = THREE8.MathUtils.clamp;
+var clamp2 = THREE12.MathUtils.clamp;
 var approach = (smoothTime, dt) => 1 - Math.pow(1e-3, dt / smoothTime);
 function stackLift(index, count, progress) {
   if (count <= 1) return 1;
   return 0.31 + 0.69 * (index + (count - 1 - 2 * index) * (1 - progress)) / (count - 1);
 }
 var SpreadEngine = class {
-  group = new THREE8.Group();
+  group = new THREE12.Group();
   maxPosition;
   settings;
   halfHeight;
-  camera;
-  canvas;
-  hitArea;
+  input;
   metrics;
+  requestFrame;
   geometry;
   sheets;
   abort = new AbortController();
@@ -1649,18 +2061,14 @@ var SpreadEngine = class {
   // the sheet most recently sent flying
   dirty = true;
   last = 0;
-  raycaster = new THREE8.Raycaster();
-  ndc = new THREE8.Vector2();
-  floor = new THREE8.Plane(new THREE8.Vector3(0, 0, 1), 0);
-  hit = new THREE8.Vector3();
-  spine = new THREE8.Vector3();
+  ray = new THREE12.Ray();
+  hit = new THREE12.Vector3();
   constructor(ctx) {
     this.settings = ctx.settings;
     this.halfHeight = ctx.settings.pageAspect / 2;
-    this.camera = ctx.camera;
-    this.canvas = ctx.canvas;
-    this.hitArea = ctx.hitArea;
+    this.input = ctx.input;
     this.metrics = ctx.metrics;
+    this.requestFrame = ctx.requestFrame;
     this.shading = ctx.shading;
     const count = Math.ceil(ctx.textures.length / 2);
     this.maxPosition = count;
@@ -1717,7 +2125,13 @@ var SpreadEngine = class {
     if (!sheet) return;
     if (page % 2 === 0) sheet.uniforms.uFront.value = texture;
     else sheet.uniforms.uBack.value = texture;
-    this.dirty = true;
+    this.wake();
+  }
+  cancelInput() {
+    this.cancelHold();
+    this.hover.active = false;
+    if (this.press) this.release(new PointerEvent("pointercancel", { pointerId: this.press.id }));
+    this.wake();
   }
   dispose() {
     this.cancelHold();
@@ -1733,6 +2147,16 @@ var SpreadEngine = class {
   seconds(time) {
     return time / this.settings.motion.speed;
   }
+  // something changed between frames
+  wake() {
+    this.dirty = true;
+    this.requestFrame();
+  }
+  // the point on the floor under the pointer, the spine at x = 0
+  pointAt(clientX, clientY) {
+    if (!this.input.ray(clientX, clientY, this.ray)) return null;
+    return floorPoint(this.group, this.ray, this.hit);
+  }
   // how far a sheet may bend before its far corner rolls over itself
   arcLimit(angleDeg) {
     const t = Math.abs(angleDeg) * Math.PI / 180;
@@ -1745,11 +2169,11 @@ var SpreadEngine = class {
   inFlight(index) {
     return this.flights.some((f) => f.index === index);
   }
-  // which sheet a press at this x would pick up
-  sheetAt(clientX) {
-    const rect = this.canvas.getBoundingClientRect();
-    const spineX = this.spine.set(0, 0, 0).project(this.camera).x;
-    const forward = clientX >= rect.left + (0.5 * spineX + 0.5) * rect.width;
+  // which sheet a press here would pick up
+  sheetAt(clientX, clientY) {
+    const point = this.pointAt(clientX, clientY);
+    if (!point) return null;
+    const forward = point.x >= 0;
     if (forward ? this.current >= this.sheets.length : this.current <= 0) return null;
     return { index: forward ? this.current : this.current - 1, forward };
   }
@@ -1758,10 +2182,7 @@ var SpreadEngine = class {
   curveFor(clientX, clientY, index) {
     const wobble = this.sheets[index].wobble;
     const maxTilt = this.settings.motion.maxTilt;
-    const rect = this.canvas.getBoundingClientRect();
-    this.ndc.set((clientX - rect.left) / rect.width * 2 - 1, -((clientY - rect.top) / rect.height) * 2 + 1);
-    this.raycaster.setFromCamera(this.ndc, this.camera);
-    const hit = this.raycaster.ray.intersectPlane(this.floor, this.hit);
+    const hit = this.pointAt(clientX, clientY);
     let angleDeg = 0;
     if (hit) {
       let deg = Math.atan2(hit.y, hit.x) * 180 / Math.PI;
@@ -1779,7 +2200,7 @@ var SpreadEngine = class {
     if (!following) return { arc: this.restingArc(wobble, angleDeg), angleDeg };
     const lead = leader.curveTarget;
     angleDeg = clamp2(angleDeg, Math.min(0, lead.angleDeg), Math.max(0, lead.angleDeg));
-    const gain = THREE8.MathUtils.lerp(CLICK2.followArcGainMin, CLICK2.followArcGainMax, wobble.arc);
+    const gain = THREE12.MathUtils.lerp(CLICK2.followArcGainMin, CLICK2.followArcGainMax, wobble.arc);
     return { arc: clamp2(lead.arc * gain, lead.arc, this.arcLimit(angleDeg)), angleDeg };
   }
   setCurve(sheet, curve, snap) {
@@ -1794,7 +2215,7 @@ var SpreadEngine = class {
     this.leader = index;
     this.sheets[index].wobble = this.randomWobble();
     this.current = toProgress === 1 ? index + 1 : index;
-    this.dirty = true;
+    this.wake();
   }
   fly(index, forward, toProgress, flipTime = CLICK2.flipTime) {
     this.commit(index, toProgress);
@@ -1832,11 +2253,11 @@ var SpreadEngine = class {
       sheet.progress = sheet.index < this.current ? 1 : 0;
       sheet.direction = sheet.directionSmooth = 1;
     }
-    this.dirty = true;
+    this.wake();
   }
   // --- input ------------------------------------------------------------------
   bindInput() {
-    const el = this.hitArea;
+    const el = this.input.element;
     const signal = this.abort.signal;
     const { interaction } = this.settings;
     el.addEventListener(
@@ -1846,13 +2267,13 @@ var SpreadEngine = class {
         if (this.hold && this.moved(e, this.hold.fired ? HOLD2.moveSlopPx : void 0)) this.cancelHold();
         if (this.drag && this.press) {
           if (!interaction.drag) return;
-          const dx = e.clientX - this.press.x;
+          const dx = this.metrics.dragDelta?.(e.clientX - this.press.x, e.clientY - this.press.y) ?? e.clientX - this.press.x;
           this.drag.progress = clamp2(this.drag.base - dx / this.drag.rectWidth / this.settings.motion.dragDistance, 0, 1);
           this.drag.targetCurve = this.curveFor(e.clientX, e.clientY, this.drag.index);
         } else if (e.pointerType === "mouse") {
-          this.hover = { active: true, x: e.clientX, y: e.clientY };
+          this.hover = { active: this.input.covers(e.clientX, e.clientY), x: e.clientX, y: e.clientY };
         }
-        this.dirty = true;
+        this.wake();
       },
       { signal }
     );
@@ -1860,7 +2281,7 @@ var SpreadEngine = class {
       "pointerleave",
       () => {
         this.hover.active = false;
-        this.dirty = true;
+        this.wake();
       },
       { signal }
     );
@@ -1869,7 +2290,8 @@ var SpreadEngine = class {
       (e) => {
         if (this.press && !e.isPrimary) return;
         if (e.button !== 0 || !(interaction.drag || interaction.click || interaction.hold)) return;
-        const target = this.sheetAt(e.clientX);
+        if (!this.input.covers(e.clientX, e.clientY)) return;
+        const target = this.sheetAt(e.clientX, e.clientY);
         if (!target) return;
         const sheet = this.sheets[target.index];
         if (!this.inFlight(target.index)) this.setCurve(sheet, this.curveFor(e.clientX, e.clientY, target.index), true);
@@ -1900,7 +2322,7 @@ var SpreadEngine = class {
           el.setPointerCapture(e.pointerId);
         } catch {
         }
-        this.dirty = true;
+        this.wake();
       },
       { signal }
     );
@@ -1947,9 +2369,10 @@ var SpreadEngine = class {
     this.drag = null;
     this.press = null;
     try {
-      this.hitArea.releasePointerCapture(e.pointerId);
+      this.input.element.releasePointerCapture(e.pointerId);
     } catch {
     }
+    this.wake();
     if (!drag) return;
     const { interaction } = this.settings;
     if (!wasMoved || !interaction.drag) {
@@ -1967,352 +2390,150 @@ var SpreadEngine = class {
     this.flights = this.flights.filter((f) => f.index !== drag.index);
     this.flights.push({
       index: drag.index,
-      from: sheet.progress,
-      to,
-      direction: drag.forward ? 1 : -1,
-      start: performance.now(),
-      duration: 1e3 * duration,
-      launch: clamp2(speed * duration / remaining, 0, 2)
-    });
-  }
-  // --- simulation ---------------------------------------------------------------
-  update(now) {
-    for (let i = this.flights.length - 1; i >= 0; i--) {
-      const f = this.flights[i];
-      const sheet = this.sheets[f.index];
-      const t = clamp2((now - f.start) / f.duration, 0, 1);
-      let k;
-      if (f.launch === void 0) {
-        k = 0.5 * (1 - Math.cos(t * Math.PI));
-      } else {
-        const t2 = t * t;
-        const t3 = t2 * t;
-        k = (t3 - 2 * t2 + t) * f.launch + (3 * t2 - 2 * t3) + (t3 - t2) * DRAG2.landingSpeed;
-      }
-      sheet.progress = f.from + (f.to - f.from) * k;
-      sheet.direction = f.direction;
-      if (now >= f.start + f.duration) {
-        this.flights.splice(i, 1);
-        this.dirty = true;
-      }
-    }
-    const dt = this.last ? Math.min((now - this.last) / 1e3, 0.1) : 1 / 60;
-    this.last = now;
-    let moving = this.flights.length > 0 || this.drag !== null;
-    if (this.drag) {
-      const sheet = this.sheets[this.drag.index];
-      const step = (this.drag.progress - sheet.progress) * (1 - Math.pow(0.01, dt / DRAG2.progressSmoothTime));
-      sheet.progress += step;
-      this.drag.speed = dt > 0 ? step / dt : 0;
-      this.setCurve(sheet, this.drag.targetCurve, false);
-    }
-    const { hoverLift } = this.settings.motion;
-    const previous = this.hovered;
-    const canHover = this.settings.interaction.hover && hoverLift > 0;
-    const target = canHover && this.hover.active && !this.drag && !this.hold ? this.sheetAt(this.hover.x) : null;
-    this.hovered = target && !this.inFlight(target.index) ? target.index : -1;
-    if (this.hovered !== -1) {
-      const sheet = this.sheets[this.hovered];
-      this.setCurve(sheet, this.curveFor(this.hover.x, this.hover.y, this.hovered), this.hovered !== previous);
-    }
-    const toward = approach(HOVER.smoothTime, dt);
-    const directionStep = approach(CURVE.directionSmoothTime, dt);
-    const curveStep = approach(CURVE.smoothTime, dt);
-    for (const sheet of this.sheets) {
-      const i = sheet.index;
-      if (!this.inFlight(i) && this.drag?.index !== i) {
-        const rest = i >= this.current ? 0 : 1;
-        const goal = i === this.hovered ? Math.abs(rest - hoverLift) : rest;
-        const diff = goal - sheet.progress;
-        if (Math.abs(diff) < CURVE.settleEpsilon) {
-          if (sheet.progress !== goal) {
-            sheet.progress = goal;
-            this.dirty = true;
-          }
-        } else {
-          sheet.progress += diff * toward;
-          moving = true;
-        }
-        const above = this.sheets[rest === 0 ? i - 1 : i + 1];
-        if (above) {
-          const bounded = rest === 0 ? Math.min(sheet.progress, Math.max(0, above.progress - HOVER.gapToSheetAbove)) : Math.max(sheet.progress, Math.min(1, above.progress + HOVER.gapToSheetAbove));
-          if (bounded !== sheet.progress) {
-            sheet.progress = bounded;
-            moving = true;
-          }
-        }
-        sheet.direction = rest === 1 && sheet.progress !== rest ? -1 : 1;
-        sheet.directionSmooth = sheet.direction;
-      }
-      const dd = sheet.direction - sheet.directionSmooth;
-      if (Math.abs(dd) < CURVE.settleEpsilon) {
-        if (sheet.directionSmooth !== sheet.direction) {
-          sheet.directionSmooth = sheet.direction;
-          this.dirty = true;
-        }
-      } else {
-        sheet.directionSmooth += dd * directionStep;
-        moving = true;
-      }
-      for (const key of ["arc", "angleDeg"]) {
-        const d = sheet.curveTarget[key] - sheet.curve[key];
-        if (Math.abs(d) < CURVE.settleEpsilon) sheet.curve[key] = sheet.curveTarget[key];
-        else {
-          sheet.curve[key] += d * curveStep;
-          moving = true;
-        }
-      }
-      this.applyUniforms(sheet);
-    }
-    if (!moving && !this.dirty) return false;
-    let contact = null;
-    let upright = 0;
-    for (const sheet of this.sheets) {
-      const i = sheet.index;
-      const depth = i >= this.current ? i - this.current : this.current - 1 - i;
-      const turning = this.inFlight(i) || this.drag?.index === i;
-      sheet.mesh.castShadow = this.settings.lighting.shadows && (depth < 3 || turning);
-      layerSheet(sheet.mesh, depth, this.sheets.length, turning);
-      const lift = Math.abs(sheet.uniforms.uFlipRotation.value.y);
-      if (turning && lift > upright) {
-        upright = lift;
-        contact = sheet;
-      }
-    }
-    const rotation = contact?.uniforms.uFlipRotation.value;
-    if (rotation) this.shading.spineContact.value.set(rotation.x, rotation.y, 1);
-    else this.shading.spineContact.value.set(1, 0, 0);
-    this.dirty = false;
-    return true;
-  }
-  applyUniforms(sheet) {
-    const u = sheet.uniforms;
-    const half = this.halfHeight;
-    const turn = sheet.progress * Math.PI;
-    const bend = Math.sin(turn) * Math.PI * sheet.curve.arc;
-    const tilt = sheet.curve.angleDeg * Math.PI / 180;
-    const cos = Math.cos(tilt);
-    const sin = Math.sin(tilt);
-    const curlLength = 1 - half * Math.sin(Math.abs(tilt));
-    const curlStart = 1 - curlLength;
-    const reach = Math.max(0, cos + sin * half * Math.sign(sin) - curlStart);
-    const tipAngle = reach / curlLength * bend;
-    const tipLift = reach * (Math.abs(tipAngle) < 1e-4 ? 0 : (1 - Math.cos(tipAngle)) / tipAngle);
-    const rotation = turn + 0.5 * sheet.directionSmooth * tipLift;
-    u.uFlipProgress.value = sheet.progress;
-    u.uWrinkleSide.value = -Math.cos(turn);
-    u.uDirection.value = sheet.directionSmooth;
-    u.uStackLift.value = sheet.liftBase + sheet.liftSpan * sheet.progress;
-    u.uBendAngle.value = bend;
-    u.uFold.value.set(cos, sin);
-    u.uCurl.value.set(curlStart, curlLength);
-    u.uFlipRotation.value.set(Math.cos(rotation), Math.sin(rotation));
-  }
-};
-
-// src/textures.ts
-import * as THREE9 from "three";
-var CONCURRENCY = 4;
-var PageLoader = class {
-  constructor(sources, renderer, radius, events) {
-    this.sources = sources;
-    this.renderer = renderer;
-    this.radius = radius;
-    this.events = events;
-    this.textures = new Array(sources.length);
-  }
-  sources;
-  renderer;
-  radius;
-  events;
-  /** Loaded textures by page; missing pages are still loading, unloaded or failed. */
-  textures;
-  owned = /* @__PURE__ */ new Set();
-  inFlight = /* @__PURE__ */ new Map();
-  failed = /* @__PURE__ */ new Set();
-  // `first` pages load before the rest; the rest go nearest first
-  first = [];
-  // the pages in view, and the one being read, which loads first among them
-  from = 0;
-  to = 0;
-  around = 0;
-  // whether the magazine loops, putting the cover right after the last page
-  wrap = false;
-  waiting = /* @__PURE__ */ new Set();
-  settleFirst = () => {
-  };
-  disposed = false;
-  /**
-   * Starts loading around the visible pages `from`–`to`. Resolves once the `first` pages
-   * within reach are in (or failed).
-   */
-  start(from, to, first) {
-    this.from = from;
-    this.to = to;
-    this.first = first.filter((i) => i >= 0 && i < this.sources.length && this.distance(i) <= this.radius);
-    this.waiting = new Set(this.first);
-    const ready = new Promise((resolve) => this.settleFirst = resolve);
-    this.focus(from, to);
-    if (!this.waiting.size) this.settleFirst();
-    return ready;
-  }
-  /**
-   * Follows the reader: loads around the pages in view (`from`–`to`), the page being read
-   * (`around`) first, and unloads pages left far behind.
-   */
-  focus(from, to = from, around = from) {
-    if (this.disposed) return;
-    this.from = from;
-    this.to = to;
-    this.around = around;
-    const keep = 2 * this.radius;
-    for (const [i, request] of this.inFlight) {
-      if (this.distance(i) <= keep) continue;
-      request.abort();
-      this.inFlight.delete(i);
-    }
-    this.textures.forEach((texture, i) => {
-      if (!texture || this.distance(i) <= keep || !this.owned.has(texture)) return;
-      this.textures[i] = void 0;
-      this.events.onUnload(i);
-      this.owned.delete(texture);
-      texture.dispose();
-    });
-    this.pump();
-  }
-  setWrap(wrap) {
-    if (wrap === this.wrap) return;
-    this.wrap = wrap;
-    this.focus(this.from, this.to, this.around);
-  }
-  setRadius(radius) {
-    this.radius = radius;
-    this.focus(this.from, this.to, this.around);
-  }
-  /** Loads the pages that failed again. */
-  retry() {
-    this.failed.clear();
-    this.pump();
-  }
-  dispose() {
-    this.disposed = true;
-    for (const request of this.inFlight.values()) request.abort();
-    for (const texture of this.owned) texture.dispose();
-    this.owned.clear();
-  }
-  // pages away from the visible ones
-  distance(page) {
-    const straight = page < this.from ? this.from - page : page > this.to ? page - this.to : 0;
-    if (!this.wrap) return straight;
-    const count = this.sources.length;
-    return Math.min(straight, page + count - this.to, this.from + count - page);
-  }
-  // starts the most wanted pages while there's room
-  pump() {
-    if (this.disposed || this.inFlight.size >= CONCURRENCY) return;
-    const wanted = (i) => !this.textures[i] && !this.inFlight.has(i) && !this.failed.has(i) && this.distance(i) <= this.radius;
-    const queue = [
-      ...this.first.filter((i) => this.waiting.has(i)),
-      ...this.sources.map((_, i) => i).sort((a, b) => this.distance(a) - this.distance(b) || Math.abs(a - this.around) - Math.abs(b - this.around))
-    ];
-    for (const page of queue) {
-      if (this.inFlight.size >= CONCURRENCY) return;
-      if (wanted(page)) this.load(page);
-    }
-  }
-  load(page) {
-    const request = new AbortController();
-    this.inFlight.set(page, request);
-    this.createTexture(this.sources[page], request.signal).then((texture) => {
-      if (this.disposed || request.signal.aborted) {
-        if (this.owned.delete(texture)) texture.dispose();
-        return;
-      }
-      texture.colorSpace = THREE9.SRGBColorSpace;
-      texture.premultiplyAlpha = true;
-      texture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();
-      texture.needsUpdate = true;
-      this.renderer.initTexture(texture);
-      this.textures[page] = texture;
-      this.events.onLoad(page, texture);
-    }).catch((error) => {
-      if (this.disposed || request.signal.aborted) return;
-      this.failed.add(page);
-      this.events.onError(page, error);
-    }).finally(() => {
-      if (this.inFlight.get(page) === request) this.inFlight.delete(page);
-      if (this.waiting.delete(page) && !this.waiting.size) this.settleFirst();
-      this.pump();
+      from: sheet.progress,
+      to,
+      direction: drag.forward ? 1 : -1,
+      start: performance.now(),
+      duration: 1e3 * duration,
+      launch: clamp2(speed * duration / remaining, 0, 2)
     });
   }
-  async createTexture(source, signal) {
-    if (source instanceof THREE9.Texture) return source;
-    const own = (texture) => (this.owned.add(texture), texture);
-    if (typeof source === "string") return own(new THREE9.Texture(await loadImage(source, signal)));
-    if (typeof HTMLCanvasElement !== "undefined" && source instanceof HTMLCanvasElement) return own(new THREE9.CanvasTexture(source));
-    if (typeof HTMLImageElement !== "undefined" && source instanceof HTMLImageElement) {
-      if (!source.complete || !source.naturalWidth) await source.decode();
-      return own(new THREE9.Texture(source));
+  // --- simulation ---------------------------------------------------------------
+  update(now) {
+    for (let i = this.flights.length - 1; i >= 0; i--) {
+      const f = this.flights[i];
+      const sheet = this.sheets[f.index];
+      const t = clamp2((now - f.start) / f.duration, 0, 1);
+      let k;
+      if (f.launch === void 0) {
+        k = 0.5 * (1 - Math.cos(t * Math.PI));
+      } else {
+        const t2 = t * t;
+        const t3 = t2 * t;
+        k = (t3 - 2 * t2 + t) * f.launch + (3 * t2 - 2 * t3) + (t3 - t2) * DRAG2.landingSpeed;
+      }
+      sheet.progress = f.from + (f.to - f.from) * k;
+      sheet.direction = f.direction;
+      if (now >= f.start + f.duration) {
+        this.flights.splice(i, 1);
+        this.dirty = true;
+      }
     }
-    const canvas = document.createElement("canvas");
-    canvas.width = source.width;
-    canvas.height = source.height;
-    canvas.getContext("2d").drawImage(source, 0, 0);
-    return own(new THREE9.CanvasTexture(canvas));
+    const dt = this.last ? Math.min((now - this.last) / 1e3, 0.1) : 1 / 60;
+    this.last = now;
+    let moving = this.flights.length > 0 || this.drag !== null;
+    if (this.drag) {
+      const sheet = this.sheets[this.drag.index];
+      const step = (this.drag.progress - sheet.progress) * (1 - Math.pow(0.01, dt / DRAG2.progressSmoothTime));
+      sheet.progress += step;
+      this.drag.speed = dt > 0 ? step / dt : 0;
+      this.setCurve(sheet, this.drag.targetCurve, false);
+    }
+    const { hoverLift } = this.settings.motion;
+    const previous = this.hovered;
+    const canHover = this.settings.interaction.hover && hoverLift > 0;
+    const target = canHover && this.hover.active && !this.drag && !this.hold ? this.sheetAt(this.hover.x, this.hover.y) : null;
+    this.hovered = target && !this.inFlight(target.index) ? target.index : -1;
+    if (this.hovered !== -1) {
+      const sheet = this.sheets[this.hovered];
+      this.setCurve(sheet, this.curveFor(this.hover.x, this.hover.y, this.hovered), this.hovered !== previous);
+    }
+    const toward = approach(HOVER.smoothTime, dt);
+    const directionStep = approach(CURVE.directionSmoothTime, dt);
+    const curveStep = approach(CURVE.smoothTime, dt);
+    for (const sheet of this.sheets) {
+      const i = sheet.index;
+      if (!this.inFlight(i) && this.drag?.index !== i) {
+        const rest = i >= this.current ? 0 : 1;
+        const goal = i === this.hovered ? Math.abs(rest - hoverLift) : rest;
+        const diff = goal - sheet.progress;
+        if (Math.abs(diff) < CURVE.settleEpsilon) {
+          if (sheet.progress !== goal) {
+            sheet.progress = goal;
+            this.dirty = true;
+          }
+        } else {
+          sheet.progress += diff * toward;
+          moving = true;
+        }
+        const above = this.sheets[rest === 0 ? i - 1 : i + 1];
+        if (above) {
+          const bounded = rest === 0 ? Math.min(sheet.progress, Math.max(0, above.progress - HOVER.gapToSheetAbove)) : Math.max(sheet.progress, Math.min(1, above.progress + HOVER.gapToSheetAbove));
+          if (bounded !== sheet.progress) {
+            sheet.progress = bounded;
+            moving = true;
+          }
+        }
+        sheet.direction = rest === 1 && sheet.progress !== rest ? -1 : 1;
+        sheet.directionSmooth = sheet.direction;
+      }
+      const dd = sheet.direction - sheet.directionSmooth;
+      if (Math.abs(dd) < CURVE.settleEpsilon) {
+        if (sheet.directionSmooth !== sheet.direction) {
+          sheet.directionSmooth = sheet.direction;
+          this.dirty = true;
+        }
+      } else {
+        sheet.directionSmooth += dd * directionStep;
+        moving = true;
+      }
+      for (const key of ["arc", "angleDeg"]) {
+        const d = sheet.curveTarget[key] - sheet.curve[key];
+        if (Math.abs(d) < CURVE.settleEpsilon) sheet.curve[key] = sheet.curveTarget[key];
+        else {
+          sheet.curve[key] += d * curveStep;
+          moving = true;
+        }
+      }
+      this.applyUniforms(sheet);
+    }
+    if (!moving && !this.dirty) return false;
+    let contact = null;
+    let upright = 0;
+    for (const sheet of this.sheets) {
+      const i = sheet.index;
+      const depth = i >= this.current ? i - this.current : this.current - 1 - i;
+      const turning = this.inFlight(i) || this.drag?.index === i;
+      sheet.mesh.castShadow = this.settings.lighting.shadows && (depth < 3 || turning);
+      layerSheet(sheet.mesh, depth, this.sheets.length, turning);
+      const lift = Math.abs(sheet.uniforms.uFlipRotation.value.y);
+      if (turning && lift > upright) {
+        upright = lift;
+        contact = sheet;
+      }
+    }
+    const rotation = contact?.uniforms.uFlipRotation.value;
+    if (rotation) this.shading.spineContact.value.set(rotation.x, rotation.y, 1);
+    else this.shading.spineContact.value.set(1, 0, 0);
+    this.dirty = false;
+    return true;
   }
-};
-function loadImage(url, signal) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.decoding = "async";
-    const onAbort = () => {
-      done();
-      img.src = "";
-      reject(new DOMException("Page no longer needed", "AbortError"));
-    };
-    const done = () => {
-      img.onload = img.onerror = null;
-      signal?.removeEventListener("abort", onAbort);
-    };
-    signal?.addEventListener("abort", onAbort, { once: true });
-    img.onload = () => {
-      done();
-      img.decode().then(() => resolve(img), () => resolve(img));
-    };
-    img.onerror = () => {
-      done();
-      reject(new Error(`Failed to load page image: ${url}`));
-    };
-    img.src = url;
-  });
-}
-async function loadGrain(source) {
-  let texture;
-  if (typeof source === "string") texture = new THREE9.Texture(await loadImage(source));
-  else if (source instanceof HTMLCanvasElement) texture = new THREE9.CanvasTexture(source);
-  else {
-    if (!source.complete || !source.naturalWidth) await source.decode();
-    texture = new THREE9.Texture(source);
+  applyUniforms(sheet) {
+    const u = sheet.uniforms;
+    const half = this.halfHeight;
+    const turn = sheet.progress * Math.PI;
+    const bend = Math.sin(turn) * Math.PI * sheet.curve.arc;
+    const tilt = sheet.curve.angleDeg * Math.PI / 180;
+    const cos = Math.cos(tilt);
+    const sin = Math.sin(tilt);
+    const curlLength = 1 - half * Math.sin(Math.abs(tilt));
+    const curlStart = 1 - curlLength;
+    const reach = Math.max(0, cos + sin * half * Math.sign(sin) - curlStart);
+    const tipAngle = reach / curlLength * bend;
+    const tipLift = reach * (Math.abs(tipAngle) < 1e-4 ? 0 : (1 - Math.cos(tipAngle)) / tipAngle);
+    const rotation = turn + 0.5 * sheet.directionSmooth * tipLift;
+    u.uFlipProgress.value = sheet.progress;
+    u.uWrinkleSide.value = -Math.cos(turn);
+    u.uDirection.value = sheet.directionSmooth;
+    u.uStackLift.value = sheet.liftBase + sheet.liftSpan * sheet.progress;
+    u.uBendAngle.value = bend;
+    u.uFold.value.set(cos, sin);
+    u.uCurl.value.set(curlStart, curlLength);
+    u.uFlipRotation.value.set(Math.cos(rotation), Math.sin(rotation));
   }
-  texture.wrapS = texture.wrapT = THREE9.RepeatWrapping;
-  texture.needsUpdate = true;
-  return texture;
-}
+};
 
 // src/LeafThrough.ts
-var LIVE_KEYS = /* @__PURE__ */ new Set([
-  "onPageChange",
-  "onReady",
-  "onPageLoad",
-  "onError",
-  "formatPageLabel",
-  "label",
-  "startPage",
-  "preload",
-  "pages"
-]);
-var DEFAULT_PRELOAD = 6;
 var isClient = typeof window !== "undefined";
 var LeafThrough = class extends EventTarget {
   container;
@@ -2326,9 +2547,7 @@ var LeafThrough = class extends EventTarget {
   // null when the browser can't run WebGL; the magazine then shows plain pages
   renderer;
   frameRequest = 0;
-  blank;
-  backBlank;
-  pattern = null;
+  paper;
   loader = null;
   view = null;
   spreadMedia = null;
@@ -2342,8 +2561,7 @@ var LeafThrough = class extends EventTarget {
   visible = true;
   needsRender = true;
   running = false;
-  // an animated goTo(): turn one page every `interval` ms until `target`
-  riffle = null;
+  riffle = new Riffle();
   lastPagesKey = "";
   ready = false;
   disposed = false;
@@ -2380,9 +2598,10 @@ var LeafThrough = class extends EventTarget {
     element.append(this.canvas, this.content.element, this.hitArea, this.live);
     this.renderer = createRenderer(this.canvas);
     container.append(element);
-    this.blank = solidTexture("#fcfcf9");
-    const backColor = options.paper?.backColor ?? "#fcfcf9";
-    this.backBlank = { texture: solidTexture(backColor), color: colorKey(backColor) };
+    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)");
@@ -2431,18 +2650,18 @@ var LeafThrough = class extends EventTarget {
   }
   /** Turns to the next page. Returns false at the end. */
   next() {
-    this.stopRiffle();
+    this.riffle.stop();
     return this.view?.engine.flip(true) ?? false;
   }
   /** Turns to the previous page. Returns false at the start. */
   prev() {
-    this.stopRiffle();
+    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.stopRiffle();
+    this.riffle.stop();
     const engine = this.view.engine;
     const target = this.pageToPosition(page, this.view.settings.layout);
     if (!animate) {
@@ -2450,7 +2669,7 @@ var LeafThrough = class extends EventTarget {
       return;
     }
     if (engine.position === target) return;
-    this.riffle = { target, interval: 140 / this.view.settings.motion.speed, last: -Infinity };
+    this.riffle.start(target, this.view.settings.motion.speed);
     this.needsRender = true;
   }
   /** Loads the pages that failed again. Also happens by itself when the browser comes back online. */
@@ -2474,20 +2693,19 @@ var LeafThrough = class extends EventTarget {
     if (this.disposed) return;
     const previous = this.options;
     const next = this.options = snapshot(options);
-    const keys = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(next)]);
-    const changed = [...keys].filter((key) => !deepEqual(previous[key], next[key]));
+    const changed = changedOptions(previous, next);
     if (!changed.length) return;
     if (changed.includes("label") || changed.includes("formatPageLabel")) this.applyLabel();
     if (changed.includes("spreadQuery")) this.watchSpreadQuery();
     const page = this.page;
-    let rebuild = changed.some((key) => !LIVE_KEYS.has(key));
+    let rebuild = changed.some((key) => !LIVE_OPTIONS.has(key));
     if (changed.includes("pages") && this.pagesKey(next) !== this.lastPagesKey) {
       this.loader?.dispose();
       this.loader = null;
       this.resetReady();
       rebuild = true;
     }
-    if (changed.includes("preload")) this.loader?.setRadius(this.preloadRadius());
+    if (changed.includes("preload")) this.loader?.setRadius(preloadRadius(this.options.preload));
     if (rebuild) this.remount(page);
   }
   addEventListener(type, listener, options) {
@@ -2499,7 +2717,7 @@ var LeafThrough = class extends EventTarget {
   dispose() {
     if (this.disposed) return;
     this.disposed = true;
-    this.stopRiffle();
+    this.riffle.stop();
     this.setLoop(null);
     this.abort.abort();
     this.spreadMedia?.abort.abort();
@@ -2508,9 +2726,7 @@ var LeafThrough = class extends EventTarget {
     this.view?.dispose();
     this.view = null;
     this.loader?.dispose();
-    this.pattern?.texture.dispose();
-    this.blank.dispose();
-    this.backBlank.texture.dispose();
+    this.paper.dispose();
     this.renderer?.dispose();
     this.renderer?.forceContextLoss();
     this.element.remove();
@@ -2530,7 +2746,7 @@ var LeafThrough = class extends EventTarget {
   }
   remount(page = this.page) {
     if (this.disposed) return;
-    this.stopRiffle();
+    this.riffle.stop();
     const wasPlain = this.view?.engine instanceof PlainEngine;
     this.view?.dispose();
     const layout = this.pickLayout();
@@ -2573,13 +2789,13 @@ var LeafThrough = class extends EventTarget {
     const framing = framingFor(layout, settings.pageAspect);
     const { drag, click, hold } = settings.interaction;
     this.hitArea.style.cursor = drag ? "grab" : click || hold ? "pointer" : "default";
-    const scene = new THREE10.Scene();
-    const camera = new THREE10.PerspectiveCamera(40, 1, Math.max(0.1, framing.distance - 1.8), framing.distance + 2);
+    const scene = new THREE13.Scene();
+    const camera = new THREE13.PerspectiveCamera(40, 1, Math.max(0.1, framing.distance - 1.8), framing.distance + 2);
     camera.position.set(framing.eye.x, framing.eye.y, framing.distance);
     camera.lookAt(framing.eye.x, framing.eye.y, 0);
     const { ambient, sun: sunOptions, shadows } = settings.lighting;
-    scene.add(new THREE10.HemisphereLight(ambient.sky, ambient.ground, ambient.intensity));
-    const sun = new THREE10.DirectionalLight(sunOptions.color, sunOptions.intensity);
+    scene.add(new THREE13.HemisphereLight(ambient.sky, ambient.ground, ambient.intensity));
+    const sun = new THREE13.DirectionalLight(sunOptions.color, sunOptions.intensity);
     sun.position.set(...sunOptions.position);
     sun.castShadow = shadows;
     if (layout === "single") sun.shadow.intensity = 0.4;
@@ -2589,35 +2805,35 @@ var LeafThrough = class extends EventTarget {
     sun.shadow.bias = -1e-3;
     scene.add(sun, sun.target);
     const shading = {
-      spineContact: { value: new THREE10.Vector3(1, 0, 0) },
+      spineContact: { value: new THREE13.Vector3(1, 0, 0) },
       lightDirection: { value: sun.position.clone().sub(sun.target.position).normalize() }
     };
-    let floor = null;
+    let floor2 = null;
     if (layout === "spread" && shadows && settings.lighting.floorShadow > 0) {
-      floor = new THREE10.Mesh(new THREE10.PlaneGeometry(8, 8), new THREE10.ShadowMaterial({ opacity: settings.lighting.floorShadow }));
-      floor.position.z = -1e-5;
-      floor.receiveShadow = true;
-      scene.add(floor);
-    }
-    const pages = this.options.pages;
-    const textures = pages.map((_, i) => this.loader?.textures[i] ?? this.blank);
-    const backColor = colorKey(settings.paper.backColor);
-    if (backColor !== this.backBlank.color) {
-      this.backBlank.texture.dispose();
-      this.backBlank.texture = solidTexture(settings.paper.backColor);
-      this.backBlank.color = backColor;
+      floor2 = new THREE13.Mesh(new THREE13.PlaneGeometry(8, 8), new THREE13.ShadowMaterial({ opacity: settings.lighting.floorShadow }));
+      floor2.position.z = -1e-5;
+      floor2.receiveShadow = true;
+      scene.add(floor2);
     }
+    const blank = this.paper.blank;
+    const textures = this.options.pages.map((_, i) => this.loader?.textures[i] ?? blank);
     const ctx = {
-      camera,
-      canvas: this.canvas,
-      hitArea: this.hitArea,
+      input: {
+        element: this.hitArea,
+        ray: (x, y, ray) => rayThrough(camera, this.canvas, x, y, ray),
+        // the hit area itself covers just the pages
+        covers: () => true
+      },
       settings,
       textures,
-      blank: layout === "single" ? this.backBlank.texture : this.blank,
-      pattern: this.patternFor(settings, renderer),
+      blank: layout === "single" ? this.paper.back(settings.paper.backColor) : blank,
+      pattern: this.paper.grain(settings, renderer),
       position: this.pageToPosition(page, layout),
       metrics: this.metrics,
-      shading
+      shading,
+      // the loop draws every frame the engine asks for while the magazine is on screen
+      requestFrame: () => {
+      }
     };
     const engine = layout === "spread" ? new SpreadEngine(ctx) : new SingleEngine(ctx);
     scene.add(engine.group);
@@ -2630,36 +2846,11 @@ var LeafThrough = class extends EventTarget {
       dispose: () => {
         engine.dispose();
         sun.shadow.dispose();
-        floor?.geometry.dispose();
-        floor?.material.dispose();
+        floor2?.geometry.dispose();
+        floor2?.material.dispose();
       }
     };
   }
-  patternFor(settings, renderer) {
-    const grain = settings.paper.grain;
-    const key = grain === true || grain === void 0 ? "builtin" : grain === false ? "none" : grain;
-    if (this.pattern?.key === key) return this.pattern.texture;
-    this.pattern?.texture.dispose();
-    let texture;
-    if (key === "builtin") texture = createPaperPattern(renderer);
-    else if (key === "none") texture = solidTexture("#000000");
-    else {
-      texture = solidTexture("#000000");
-      loadGrain(key).then(
-        (loaded) => {
-          if (this.pattern?.key !== key || this.disposed) return loaded.dispose();
-          this.pattern.texture.dispose();
-          this.pattern.texture = loaded;
-          this.remount();
-        },
-        (error) => {
-          if (this.pattern?.key === key && !this.disposed) this.fail(error);
-        }
-      );
-    }
-    this.pattern = { texture, key };
-    return texture;
-  }
   // sizes the canvas and hit area to the container
   layoutBox() {
     if (!this.view) return;
@@ -2724,13 +2915,9 @@ var LeafThrough = class extends EventTarget {
   pagesKey(options) {
     return options.pages.map((p) => sourceKey(pageImage(p))).join("\n");
   }
-  preloadRadius() {
-    const preload = this.options.preload ?? DEFAULT_PRELOAD;
-    return Number.isNaN(preload) ? DEFAULT_PRELOAD : Math.max(0, preload);
-  }
   loadPages(renderer, around, layout) {
     this.loader?.dispose();
-    const loader = new PageLoader(this.options.pages.map(pageImage), renderer, this.preloadRadius(), {
+    const loader = new PageLoader(this.options.pages.map(pageImage), renderer, preloadRadius(this.options.preload), {
       onLoad: (page, texture) => {
         if (this.loader !== loader) return;
         this.view?.engine.setPageTexture(page, texture);
@@ -2739,7 +2926,7 @@ var LeafThrough = class extends EventTarget {
       },
       onUnload: (page) => {
         if (this.loader !== loader) return;
-        this.view?.engine.setPageTexture(page, this.blank);
+        this.view?.engine.setPageTexture(page, this.paper.blank);
         this.needsRender = true;
       },
       onError: (page, error) => this.fail(error, page)
@@ -2781,25 +2968,14 @@ var LeafThrough = class extends EventTarget {
   }
   // --- pages ↔ engine positions -------------------------------------------------------
   pageToPosition(page, layout) {
-    const count = this.options.pages.length;
-    const p = THREE10.MathUtils.clamp(Math.round(page) || 0, 0, Math.max(count - 1, 0));
-    return layout === "spread" ? Math.ceil(p / 2) : p;
+    return pageToPosition(page, layout, this.options.pages.length);
   }
-  positionToPage(position, layout) {
-    return layout === "spread" ? Math.max(0, 2 * position - 1) : position;
-  }
-  // the pages showing at an engine position
   pagesAt(position, layout) {
-    const candidates = layout === "spread" ? [2 * position - 1, 2 * position] : [position];
-    return candidates.filter((p) => p >= 0 && p < this.options.pages.length);
+    return pagesAt(position, layout, this.options.pages.length);
   }
   detail() {
-    const count = this.options.pages.length;
     const layout = this.view?.settings.layout ?? this.pickLayout();
-    const position = this.view?.engine.position ?? 0;
-    const visiblePages = this.pagesAt(position, layout);
-    const page = visiblePages.length ? visiblePages[0] : Math.max(0, Math.min(this.positionToPage(position, layout), count - 1));
-    return { page, visiblePages, pageCount: count, layout };
+    return pageDetail(this.view?.engine.position ?? 0, layout, this.options.pages.length);
   }
   lastDetailKey = "";
   emitPageChange() {
@@ -2832,49 +3008,13 @@ var LeafThrough = class extends EventTarget {
   }
   // --- input and loop -----------------------------------------------------------------
   bindKeyboard() {
-    const handler = (e) => {
-      const mode = this.view?.settings.interaction.keyboard;
-      if (!mode || e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
-      if (mode === "global") {
-        const target = e.target;
-        if (target?.closest?.('input, textarea, select, [contenteditable=""], [contenteditable="true"]')) return;
-      } else if (e.currentTarget !== this.element) return;
-      const last = this.pageCount - 1;
-      const actions = {
-        ArrowRight: () => this.next(),
-        PageDown: () => this.next(),
-        ArrowLeft: () => this.prev(),
-        PageUp: () => this.prev(),
-        Home: () => this.goTo(0),
-        End: () => this.goTo(last)
-      };
-      const action = actions[e.key];
-      if (!action) return;
-      e.preventDefault();
-      action();
-    };
-    this.element.addEventListener("keydown", handler, { signal: this.abort.signal });
-    window.addEventListener(
-      "keydown",
-      (e) => {
-        if (this.view?.settings.interaction.keyboard === "global" && !this.element.contains(e.target)) handler(e);
-      },
-      { signal: this.abort.signal }
+    bindKeyboard(
+      this.element,
+      () => this.view?.settings.interaction.keyboard,
+      { next: () => this.next(), prev: () => this.prev(), first: () => this.goTo(0), last: () => this.goTo(this.pageCount - 1) },
+      this.abort.signal
     );
   }
-  stopRiffle() {
-    this.riffle = null;
-  }
-  stepRiffle(now, engine) {
-    const riffle = this.riffle;
-    if (!riffle || now - riffle.last < riffle.interval) return;
-    if (engine.position === riffle.target) {
-      this.riffle = null;
-      return;
-    }
-    riffle.last = now;
-    if (!engine.flip(engine.position < riffle.target)) this.riffle = null;
-  }
   // only animate while the magazine is on screen and the tab is visible
   syncLoop() {
     const run = this.visible && !document.hidden && !this.disposed;
@@ -2913,7 +3053,7 @@ var LeafThrough = class extends EventTarget {
   frame(now) {
     const view = this.view;
     if (!view) return;
-    this.stepRiffle(now, view.engine);
+    this.riffle.step(now, view.engine);
     const moved = view.engine.update(now);
     this.followReader(view.engine, view.settings.layout);
     if (view.engine.activeSide !== this.hitSide) this.placeHitArea();
@@ -2934,45 +3074,44 @@ var LeafThrough = class extends EventTarget {
     this.syncContent(view);
   }
 };
-function colorKey(color) {
-  return new THREE10.Color(color).getHexString();
-}
 function createRenderer(canvas) {
   let renderer;
   try {
-    renderer = new THREE10.WebGLRenderer({ canvas, antialias: true, alpha: true });
+    renderer = new THREE13.WebGLRenderer({ canvas, antialias: true, alpha: true });
   } catch {
     return null;
   }
-  renderer.outputColorSpace = THREE10.SRGBColorSpace;
+  renderer.outputColorSpace = THREE13.SRGBColorSpace;
   renderer.shadowMap.enabled = true;
-  renderer.shadowMap.type = THREE10.PCFShadowMap;
+  renderer.shadowMap.type = THREE13.PCFShadowMap;
   renderer.shadowMap.autoUpdate = false;
   return renderer;
 }
-function snapshot(value) {
-  if (typeof value !== "object" || value === null) return value;
-  if (Array.isArray(value)) return value.map(snapshot);
-  if (Object.getPrototypeOf(value) !== Object.prototype) return value;
-  return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, snapshot(item)]));
-}
-function deepEqual(a, b) {
-  if (Object.is(a, b)) return true;
-  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
-  if (Array.isArray(a) !== Array.isArray(b)) return false;
-  const protoA = Object.getPrototypeOf(a);
-  if (protoA !== Object.prototype && protoA !== Array.prototype) return false;
-  if (protoA !== Object.getPrototypeOf(b)) return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  return keysA.every((key) => deepEqual(a[key], b[key]));
-}
 
 export {
   DEFAULT_SPREAD_QUERY,
   DEFAULT_PAGE_ASPECT,
   defaultPageLabel,
+  pageImage,
+  resolveSettings,
+  LIVE_OPTIONS,
+  preloadRadius,
+  snapshot,
+  changedOptions,
+  sourceKey,
+  floorPoint,
+  rayThrough,
+  framingFor,
+  plainFramingFor,
+  pageToPosition,
+  pagesAt,
+  pageDetail,
+  Riffle,
+  bindKeyboard,
+  PageLoader,
+  PaperTextures,
+  SingleEngine,
+  SpreadEngine,
   LeafThrough
 };
-//# sourceMappingURL=chunk-XPIDTVB5.js.map
+//# sourceMappingURL=chunk-GYSQO7QZ.js.map