leafthrough 0.0.0-stage → 0.1.1

package/dist/plain/PlainEngine.d.ts

@@ -0,0 +1,42 @@
+import * as THREE from 'three';
+import type { Engine } from '../engine.js';
+import type { ResolvedSettings } from '../options.js';
+export interface PlainEngineContext {
+    /** Receives pointer input; covers the pages. */
+    hitArea: HTMLElement;
+    settings: ResolvedSettings;
+    pageCount: number;
+    /** Where the magazine opens, in the engine's own position units. */
+    position: number;
+}
+/**
+ * The plain view's engine: nothing moves, the pages just change. Positions mean what they
+ * do in the 3D engines (spread: sheets turned to the left; single: pages turned). The
+ * controller shows the pages themselves.
+ */
+export declare class PlainEngine implements Engine {
+    readonly group: THREE.Group<THREE.Object3DEventMap>;
+    readonly maxPosition: number;
+    private readonly spread;
+    private readonly settings;
+    private readonly hitArea;
+    private readonly abort;
+    private current;
+    private dirty;
+    private press;
+    constructor(ctx: PlainEngineContext);
+    get position(): number;
+    get turning(): boolean;
+    pagesInView(): {
+        from: number;
+        to: number;
+    };
+    get activeSide(): "both" | "left" | "right";
+    update(): boolean;
+    flip(forward: boolean): boolean;
+    jumpTo(position: number): void;
+    setPageTexture(): void;
+    dispose(): void;
+    private clamp;
+    private bindInput;
+}

package/dist/react.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties } from 'react';
+import { LeafThrough as Magazine, type GoToOptions } from './LeafThrough.js';
+import { type LeafThroughOptions } from './options.js';
+export type * from './options.js';
+export interface LeafThroughProps extends LeafThroughOptions {
+    className?: string;
+    style?: CSSProperties;
+}
+export interface LeafThroughHandle {
+    next(): boolean;
+    prev(): boolean;
+    goTo(page: number, options?: GoToOptions): void;
+    readonly page: number;
+    readonly pageCount: number;
+    /** The underlying instance, or null before mount. */
+    readonly instance: Magazine | null;
+}
+/**
+ * React component (React 18+). Give it a size with `className` or `style`; without a height
+ * it takes its height from its width.
+ *
+ * ```tsx
+ * const ref = useRef<LeafThroughHandle>(null)
+ * <LeafThrough ref={ref} pages={pages} style={{ height: '80vh' }} onPageChange={(d) => setPage(d.page)} />
+ * ```
+ */
+export declare const LeafThrough: import("react").ForwardRefExoticComponent<LeafThroughProps & import("react").RefAttributes<LeafThroughHandle>>;

package/dist/react.js

@@ -0,0 +1,60 @@
+"use client";
+import {
+  LeafThrough,
+  defaultPageLabel
+} from "./chunk-DQL4R32K.js";
+
+// src/react.tsx
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var LeafThrough2 = forwardRef(function LeafThrough3({ className, style, ...options }, ref) {
+  const element = useRef(null);
+  const instance = useRef(null);
+  const latest = useRef(options);
+  latest.current = options;
+  const callbacks = useRef({
+    onPageChange: (detail) => latest.current.onPageChange?.(detail),
+    onReady: () => latest.current.onReady?.(),
+    onPageLoad: (page) => latest.current.onPageLoad?.(page),
+    onError: (error, page) => {
+      const handler = latest.current.onError;
+      if (handler) handler(error, page);
+      else console.warn("[leafthrough]", error);
+    },
+    formatPageLabel: (detail) => latest.current.formatPageLabel?.(detail) ?? defaultPageLabel(detail)
+  }).current;
+  useEffect(() => {
+    const magazine = new LeafThrough(element.current, { ...latest.current, ...callbacks });
+    instance.current = magazine;
+    return () => {
+      magazine.dispose();
+      instance.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    instance.current?.setOptions({ ...options, ...callbacks });
+  });
+  useImperativeHandle(
+    ref,
+    () => ({
+      next: () => instance.current?.next() ?? false,
+      prev: () => instance.current?.prev() ?? false,
+      goTo: (page, goToOptions) => instance.current?.goTo(page, goToOptions),
+      get page() {
+        return instance.current?.page ?? options.startPage ?? 0;
+      },
+      get pageCount() {
+        return options.pages.length;
+      },
+      get instance() {
+        return instance.current;
+      }
+    }),
+    [options.pages.length, options.startPage]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: element, className, style });
+});
+export {
+  LeafThrough2 as LeafThrough
+};
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, useEffect, useImperativeHandle, useRef, type CSSProperties } from 'react'\nimport { LeafThrough as Magazine, type GoToOptions } from './LeafThrough.js'\nimport { defaultPageLabel, type LeafThroughOptions, type PageChangeDetail } from './options.js'\n\nexport type * from './options.js'\n\nexport interface LeafThroughProps extends LeafThroughOptions {\n  className?: string\n  style?: CSSProperties\n}\n\nexport interface LeafThroughHandle {\n  next(): boolean\n  prev(): boolean\n  goTo(page: number, options?: GoToOptions): void\n  readonly page: number\n  readonly pageCount: number\n  /** The underlying instance, or null before mount. */\n  readonly instance: Magazine | null\n}\n\n/**\n * React component (React 18+). Give it a size with `className` or `style`; without a height\n * it takes its height from its width.\n *\n * ```tsx\n * const ref = useRef<LeafThroughHandle>(null)\n * <LeafThrough ref={ref} pages={pages} style={{ height: '80vh' }} onPageChange={(d) => setPage(d.page)} />\n * ```\n */\nexport const LeafThrough = forwardRef<LeafThroughHandle, LeafThroughProps>(function LeafThrough(\n  { className, style, ...options },\n  ref,\n) {\n  const element = useRef<HTMLDivElement>(null)\n  const instance = useRef<Magazine | null>(null)\n  // callbacks change every render; route them through a ref so they never cause a rebuild\n  const latest = useRef(options)\n  latest.current = options\n\n  const callbacks = useRef({\n    onPageChange: (detail: PageChangeDetail) => latest.current.onPageChange?.(detail),\n    onReady: () => latest.current.onReady?.(),\n    onPageLoad: (page: number) => latest.current.onPageLoad?.(page),\n    onError: (error: unknown, page?: number) => {\n      const handler = latest.current.onError\n      if (handler) handler(error, page)\n      else console.warn('[leafthrough]', error)\n    },\n    formatPageLabel: (detail: PageChangeDetail) => latest.current.formatPageLabel?.(detail) ?? defaultPageLabel(detail),\n  }).current\n\n  useEffect(() => {\n    const magazine = new Magazine(element.current!, { ...latest.current, ...callbacks })\n    instance.current = magazine\n    return () => {\n      magazine.dispose()\n      instance.current = null\n    }\n  }, [])\n\n  // Props are the whole state, so a prop that's removed goes back to its default.\n  // Everything is compared by value, so inline objects and arrays don't rebuild anything.\n  useEffect(() => {\n    instance.current?.setOptions({ ...options, ...callbacks })\n  })\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      next: () => instance.current?.next() ?? false,\n      prev: () => instance.current?.prev() ?? false,\n      goTo: (page, goToOptions) => instance.current?.goTo(page, goToOptions),\n      get page() {\n        return instance.current?.page ?? options.startPage ?? 0\n      },\n      get pageCount() {\n        return options.pages.length\n      },\n      get instance() {\n        return instance.current\n      },\n    }),\n    [options.pages.length, options.startPage],\n  )\n\n  return <div ref={element} className={className} style={style} />\n})\n\n"],"mappings":";;;;;;;AAEA,SAAS,YAAY,WAAW,qBAAqB,cAAkC;AAsF9E;AAxDF,IAAMA,eAAc,WAAgD,SAASA,aAClF,EAAE,WAAW,OAAO,GAAG,QAAQ,GAC/B,KACA;AACA,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,WAAW,OAAwB,IAAI;AAE7C,QAAM,SAAS,OAAO,OAAO;AAC7B,SAAO,UAAU;AAEjB,QAAM,YAAY,OAAO;AAAA,IACvB,cAAc,CAAC,WAA6B,OAAO,QAAQ,eAAe,MAAM;AAAA,IAChF,SAAS,MAAM,OAAO,QAAQ,UAAU;AAAA,IACxC,YAAY,CAAC,SAAiB,OAAO,QAAQ,aAAa,IAAI;AAAA,IAC9D,SAAS,CAAC,OAAgB,SAAkB;AAC1C,YAAM,UAAU,OAAO,QAAQ;AAC/B,UAAI,QAAS,SAAQ,OAAO,IAAI;AAAA,UAC3B,SAAQ,KAAK,iBAAiB,KAAK;AAAA,IAC1C;AAAA,IACA,iBAAiB,CAAC,WAA6B,OAAO,QAAQ,kBAAkB,MAAM,KAAK,iBAAiB,MAAM;AAAA,EACpH,CAAC,EAAE;AAEH,YAAU,MAAM;AACd,UAAM,WAAW,IAAI,YAAS,QAAQ,SAAU,EAAE,GAAG,OAAO,SAAS,GAAG,UAAU,CAAC;AACnF,aAAS,UAAU;AACnB,WAAO,MAAM;AACX,eAAS,QAAQ;AACjB,eAAS,UAAU;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,CAAC;AAIL,YAAU,MAAM;AACd,aAAS,SAAS,WAAW,EAAE,GAAG,SAAS,GAAG,UAAU,CAAC;AAAA,EAC3D,CAAC;AAED;AAAA,IACE;AAAA,IACA,OAAO;AAAA,MACL,MAAM,MAAM,SAAS,SAAS,KAAK,KAAK;AAAA,MACxC,MAAM,MAAM,SAAS,SAAS,KAAK,KAAK;AAAA,MACxC,MAAM,CAAC,MAAM,gBAAgB,SAAS,SAAS,KAAK,MAAM,WAAW;AAAA,MACrE,IAAI,OAAO;AACT,eAAO,SAAS,SAAS,QAAQ,QAAQ,aAAa;AAAA,MACxD;AAAA,MACA,IAAI,YAAY;AACd,eAAO,QAAQ,MAAM;AAAA,MACvB;AAAA,MACA,IAAI,WAAW;AACb,eAAO,SAAS;AAAA,MAClB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,MAAM,QAAQ,QAAQ,SAAS;AAAA,EAC1C;AAEA,SAAO,oBAAC,SAAI,KAAK,SAAS,WAAsB,OAAc;AAChE,CAAC;","names":["LeafThrough"]}

package/dist/single/SingleEngine.d.ts

@@ -0,0 +1,76 @@
+import * as THREE from 'three';
+import type { Engine, EngineContext } from '../engine.js';
+/**
+ * One page at a time: turned pages swing round the spine and roll up behind the magazine.
+ */
+export declare class SingleEngine implements Engine {
+    readonly group: THREE.Group<THREE.Object3DEventMap>;
+    readonly maxPosition: number;
+    private readonly settings;
+    private readonly halfHeight;
+    private readonly liftHeight;
+    private readonly camera;
+    private readonly canvas;
+    private readonly hitArea;
+    private readonly metrics;
+    private readonly geometry;
+    private readonly sheets;
+    private readonly count;
+    private readonly radiusSpacing;
+    private readonly catchUp;
+    private readonly fallDelay;
+    private readonly fallDuration;
+    private readonly abort;
+    private current;
+    private turned;
+    private flights;
+    private drag;
+    private press;
+    private hold;
+    private touch;
+    private dirty;
+    private last;
+    private readonly raycaster;
+    private readonly ndc;
+    private readonly floor;
+    private readonly hit;
+    private readonly spine;
+    constructor(ctx: EngineContext);
+    get position(): number;
+    get turning(): boolean;
+    readonly activeSide = "both";
+    pagesInView(): {
+        from: number;
+        to: number;
+    };
+    private pileTop;
+    setPageTexture(page: number, texture: THREE.Texture): void;
+    dispose(): void;
+    private randomWobble;
+    private seconds;
+    private pileHeight;
+    private pileReach;
+    private paced;
+    private closing;
+    private shutting;
+    private inFlight;
+    private busy;
+    private floorPoint;
+    private grab;
+    private canTurn;
+    private sheetAt;
+    private commit;
+    private fly;
+    flip(forward: boolean): boolean;
+    jumpTo(position: number): void;
+    private bindInput;
+    private moved;
+    private cancelHold;
+    private holdTick;
+    private release;
+    private settleBack;
+    update(now: number): boolean;
+    private pileEdge;
+    private applyUniforms;
+    private shapeTurn;
+}

package/dist/single/singleSheet.d.ts

@@ -0,0 +1,23 @@
+import * as THREE from 'three';
+import type { ResolvedSettings } from '../options.js';
+import { type SheetMesh, type SheetShading, type SheetUniforms } from '../paper/paperMaterial.js';
+export declare function createSingleGeometry(aspect: number): THREE.BufferGeometry;
+export interface SingleSheetUniforms extends SheetUniforms {
+    uPileLift: THREE.IUniform<THREE.Vector3>;
+    uPileReach: THREE.IUniform<THREE.Vector2>;
+    uConeTaper: THREE.IUniform<number>;
+    uTailCurl: THREE.IUniform<THREE.Vector4>;
+    uTailBend: THREE.IUniform<number>;
+    uCone: THREE.IUniform<THREE.Vector3>;
+    uFlipRotation: THREE.IUniform<THREE.Vector2>;
+    uTrim: THREE.IUniform<THREE.Vector3>;
+    uFront: THREE.IUniform<THREE.Texture>;
+    uBack: THREE.IUniform<THREE.Texture>;
+    uPattern: THREE.IUniform<THREE.Texture>;
+    uSpineContact: THREE.IUniform<THREE.Vector3>;
+    uLightDirection: THREE.IUniform<THREE.Vector3>;
+}
+export declare function createSingleSheet(geometry: THREE.BufferGeometry, front: THREE.Texture, back: THREE.Texture, pattern: THREE.Texture, settings: ResolvedSettings, shading: SheetShading): {
+    mesh: SheetMesh;
+    uniforms: SingleSheetUniforms;
+};

package/dist/spread/SpreadEngine.d.ts

@@ -0,0 +1,64 @@
+import * as THREE from 'three';
+import type { Engine, EngineContext } from '../engine.js';
+/**
+ * The open magazine: sheets rotate over the spine, bending as they go. Horizontal drag
+ * drives the turn; where the hand is around the spine tilts the fold.
+ */
+export declare class SpreadEngine implements Engine {
+    readonly group: THREE.Group<THREE.Object3DEventMap>;
+    readonly maxPosition: number;
+    private readonly settings;
+    private readonly halfHeight;
+    private readonly camera;
+    private readonly canvas;
+    private readonly hitArea;
+    private readonly metrics;
+    private readonly geometry;
+    private readonly sheets;
+    private readonly abort;
+    private readonly shading;
+    private current;
+    private flights;
+    private drag;
+    private press;
+    private hold;
+    private hover;
+    private hovered;
+    private leader;
+    private dirty;
+    private last;
+    private readonly raycaster;
+    private readonly ndc;
+    private readonly floor;
+    private readonly hit;
+    private readonly spine;
+    constructor(ctx: EngineContext);
+    get position(): number;
+    get turning(): boolean;
+    pagesInView(): {
+        from: number;
+        to: number;
+    };
+    get activeSide(): "both" | "left" | "right";
+    setPageTexture(page: number, texture: THREE.Texture): void;
+    dispose(): void;
+    private randomWobble;
+    private seconds;
+    private arcLimit;
+    private restingArc;
+    private inFlight;
+    private sheetAt;
+    private curveFor;
+    private setCurve;
+    private commit;
+    private fly;
+    flip(forward: boolean): boolean;
+    jumpTo(position: number): void;
+    private bindInput;
+    private moved;
+    private cancelHold;
+    private holdTick;
+    private release;
+    update(now: number): boolean;
+    private applyUniforms;
+}

package/dist/spread/spreadSheet.d.ts

@@ -0,0 +1,23 @@
+import * as THREE from 'three';
+import type { ResolvedSettings } from '../options.js';
+import { type SheetMesh, type SheetShading, type SheetUniforms } from '../paper/paperMaterial.js';
+export declare function createSpreadGeometry(aspect: number): THREE.BufferGeometry;
+export interface SpreadSheetUniforms extends SheetUniforms {
+    uFlipProgress: THREE.IUniform<number>;
+    uWrinkleSide: THREE.IUniform<number>;
+    uBendAngle: THREE.IUniform<number>;
+    uFold: THREE.IUniform<THREE.Vector2>;
+    uCurl: THREE.IUniform<THREE.Vector2>;
+    uFlipRotation: THREE.IUniform<THREE.Vector2>;
+    uDirection: THREE.IUniform<number>;
+    uStackLift: THREE.IUniform<number>;
+    uFront: THREE.IUniform<THREE.Texture>;
+    uBack: THREE.IUniform<THREE.Texture>;
+    uPattern: THREE.IUniform<THREE.Texture>;
+    uSpineContact: THREE.IUniform<THREE.Vector3>;
+    uLightDirection: THREE.IUniform<THREE.Vector3>;
+}
+export declare function createSpreadSheet(geometry: THREE.BufferGeometry, front: THREE.Texture, back: THREE.Texture, pattern: THREE.Texture, settings: ResolvedSettings, shading: SheetShading): {
+    mesh: SheetMesh;
+    uniforms: SpreadSheetUniforms;
+};

package/dist/svelte.d.ts

@@ -0,0 +1,19 @@
+import { LeafThrough } from './LeafThrough.js';
+import type { LeafThroughOptions } from './options.js';
+export { LeafThrough };
+export type * from './options.js';
+export interface LeafThroughActionOptions extends LeafThroughOptions {
+    /** Called with the instance, for `next()`, `prev()` and `goTo()`. */
+    onInit?: (magazine: LeafThrough) => void;
+}
+/**
+ * Svelte action (Svelte 4 and 5). Give the element a size.
+ *
+ * ```svelte
+ * <div style="height: 80vh" use:leafThrough={{ pages, onPageChange: (d) => (page = d.page) }} />
+ * ```
+ */
+export declare function leafThrough(node: HTMLElement, options: LeafThroughActionOptions): {
+    update(next: LeafThroughActionOptions): void;
+    destroy(): void;
+};

package/dist/svelte.js

@@ -0,0 +1,24 @@
+import {
+  LeafThrough
+} from "./chunk-DQL4R32K.js";
+
+// src/svelte.ts
+function leafThrough(node, options) {
+  const { onInit, ...rest } = options;
+  const magazine = new LeafThrough(node, rest);
+  onInit?.(magazine);
+  return {
+    update(next) {
+      const { onInit: _ignored, ...nextRest } = next;
+      magazine.setOptions(nextRest);
+    },
+    destroy() {
+      magazine.dispose();
+    }
+  };
+}
+export {
+  LeafThrough,
+  leafThrough
+};
+//# sourceMappingURL=svelte.js.map

package/dist/svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/svelte.ts"],"sourcesContent":["import { LeafThrough } from './LeafThrough.js'\nimport type { LeafThroughOptions } from './options.js'\n\nexport { LeafThrough }\nexport type * from './options.js'\n\nexport interface LeafThroughActionOptions extends LeafThroughOptions {\n  /** Called with the instance, for `next()`, `prev()` and `goTo()`. */\n  onInit?: (magazine: LeafThrough) => void\n}\n\n/**\n * Svelte action (Svelte 4 and 5). Give the element a size.\n *\n * ```svelte\n * <div style=\"height: 80vh\" use:leafThrough={{ pages, onPageChange: (d) => (page = d.page) }} />\n * ```\n */\nexport function leafThrough(node: HTMLElement, options: LeafThroughActionOptions) {\n  const { onInit, ...rest } = options\n  const magazine = new LeafThrough(node, rest)\n  onInit?.(magazine)\n  return {\n    update(next: LeafThroughActionOptions) {\n      const { onInit: _ignored, ...nextRest } = next\n      magazine.setOptions(nextRest)\n    },\n    destroy() {\n      magazine.dispose()\n    },\n  }\n}\n"],"mappings":";;;;;AAkBO,SAAS,YAAY,MAAmB,SAAmC;AAChF,QAAM,EAAE,QAAQ,GAAG,KAAK,IAAI;AAC5B,QAAM,WAAW,IAAI,YAAY,MAAM,IAAI;AAC3C,WAAS,QAAQ;AACjB,SAAO;AAAA,IACL,OAAO,MAAgC;AACrC,YAAM,EAAE,QAAQ,UAAU,GAAG,SAAS,IAAI;AAC1C,eAAS,WAAW,QAAQ;AAAA,IAC9B;AAAA,IACA,UAAU;AACR,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF;AACF;","names":[]}

package/dist/textures.d.ts

@@ -0,0 +1,54 @@
+import * as THREE from 'three';
+import type { PageImage } from './options.js';
+export interface PageLoaderEvents {
+    onLoad(page: number, texture: THREE.Texture): void;
+    /** The page's texture was freed; show plain paper until it loads again. */
+    onUnload(page: number): void;
+    onError(page: number, error: unknown): void;
+}
+/**
+ * Loads page images into textures, nearest the visible pages first. Pages within `radius`
+ * of the visible ones load; pages more than twice as far unload. Pages show plain paper
+ * until their image arrives.
+ */
+export declare class PageLoader {
+    private readonly sources;
+    private readonly renderer;
+    private radius;
+    private readonly events;
+    /** Loaded textures by page; missing pages are still loading, unloaded or failed. */
+    readonly textures: (THREE.Texture | undefined)[];
+    private readonly owned;
+    private readonly inFlight;
+    private readonly failed;
+    private first;
+    private from;
+    private to;
+    private around;
+    private wrap;
+    private waiting;
+    private settleFirst;
+    private disposed;
+    constructor(sources: PageImage[], renderer: THREE.WebGLRenderer, radius: number, events: PageLoaderEvents);
+    /**
+     * Starts loading around the visible pages `from`–`to`. Resolves once the `first` pages
+     * within reach are in (or failed).
+     */
+    start(from: number, to: number, first: number[]): Promise<void>;
+    /**
+     * 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: number, to?: number, around?: number): void;
+    setWrap(wrap: boolean): void;
+    setRadius(radius: number): void;
+    /** Loads the pages that failed again. */
+    retry(): void;
+    dispose(): void;
+    private distance;
+    private pump;
+    private load;
+    private createTexture;
+}
+/** Loads the paper grain option into a tiling texture. */
+export declare function loadGrain(source: string | HTMLImageElement | HTMLCanvasElement): Promise<THREE.Texture>;

package/dist/vue.d.ts

@@ -0,0 +1,87 @@
+import { type PropType } from 'vue';
+import type { LeafThroughOptions, InteractionOptions, LightingOptions, MotionOptions, PageChangeDetail, PageSource, PaperOptions } from './options.js';
+export type * from './options.js';
+/**
+ * Vue 3 component. Give it a size with a class or style; without a height it takes its
+ * height from its width. Exposes `next()`, `prev()`, `goTo()` and `instance` via a template ref.
+ *
+ * ```vue
+ * <LeafThrough :pages="pages" style="height: 80vh" @pagechange="(d) => (page = d.page)" />
+ * ```
+ */
+export declare const LeafThrough: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    pages: {
+        type: PropType<PageSource[]>;
+        required: true;
+    };
+    startPage: NumberConstructor;
+    layout: PropType<LeafThroughOptions['layout']>;
+    spreadQuery: StringConstructor;
+    pageAspect: NumberConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    bleed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    paper: PropType<PaperOptions>;
+    lighting: PropType<LightingOptions>;
+    motion: PropType<MotionOptions>;
+    interaction: PropType<InteractionOptions>;
+    maxPixelRatio: NumberConstructor;
+    preload: NumberConstructor;
+    plain: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: StringConstructor;
+    formatPageLabel: PropType<LeafThroughOptions['formatPageLabel']>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pagechange: (_detail: PageChangeDetail) => true;
+    ready: () => true;
+    pageload: (_page: number) => true;
+    error: (_error: unknown, _page?: number) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    pages: {
+        type: PropType<PageSource[]>;
+        required: true;
+    };
+    startPage: NumberConstructor;
+    layout: PropType<LeafThroughOptions['layout']>;
+    spreadQuery: StringConstructor;
+    pageAspect: NumberConstructor;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    bleed: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    paper: PropType<PaperOptions>;
+    lighting: PropType<LightingOptions>;
+    motion: PropType<MotionOptions>;
+    interaction: PropType<InteractionOptions>;
+    maxPixelRatio: NumberConstructor;
+    preload: NumberConstructor;
+    plain: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: StringConstructor;
+    formatPageLabel: PropType<LeafThroughOptions['formatPageLabel']>;
+}>> & Readonly<{
+    onError?: ((_error: unknown, _page?: number | undefined) => any) | undefined;
+    onPagechange?: ((_detail: PageChangeDetail) => any) | undefined;
+    onPageload?: ((_page: number) => any) | undefined;
+    onReady?: (() => any) | undefined;
+}>, {
+    loop: boolean;
+    bleed: boolean;
+    plain: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default LeafThrough;

package/dist/vue.js

@@ -0,0 +1,65 @@
+import {
+  LeafThrough
+} from "./chunk-DQL4R32K.js";
+
+// src/vue.ts
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+var LeafThrough2 = defineComponent({
+  name: "LeafThrough",
+  props: {
+    pages: { type: Array, required: true },
+    startPage: Number,
+    layout: String,
+    spreadQuery: String,
+    pageAspect: Number,
+    loop: { type: Boolean, default: void 0 },
+    bleed: { type: Boolean, default: void 0 },
+    paper: Object,
+    lighting: Object,
+    motion: Object,
+    interaction: Object,
+    maxPixelRatio: Number,
+    preload: Number,
+    plain: { type: Boolean, default: void 0 },
+    label: String,
+    formatPageLabel: Function
+  },
+  emits: {
+    pagechange: (_detail) => true,
+    ready: () => true,
+    pageload: (_page) => true,
+    error: (_error, _page) => true
+  },
+  setup(props, { emit, expose }) {
+    const element = ref();
+    const instance = shallowRef(null);
+    const events = {
+      onPageChange: (detail) => emit("pagechange", detail),
+      onReady: () => emit("ready"),
+      onPageLoad: (page) => emit("pageload", page),
+      onError: (error, page) => emit("error", error, page)
+    };
+    const options = () => ({ ...props, ...events });
+    onMounted(() => {
+      instance.value = new LeafThrough(element.value, options());
+    });
+    watch(options, (next) => instance.value?.setOptions(next), { deep: true });
+    onBeforeUnmount(() => {
+      instance.value?.dispose();
+      instance.value = null;
+    });
+    expose({
+      next: () => instance.value?.next() ?? false,
+      prev: () => instance.value?.prev() ?? false,
+      goTo: (page, goToOptions) => instance.value?.goTo(page, goToOptions),
+      instance
+    });
+    return () => h("div", { ref: element });
+  }
+});
+var vue_default = LeafThrough2;
+export {
+  LeafThrough2 as LeafThrough,
+  vue_default as default
+};
+//# sourceMappingURL=vue.js.map

package/dist/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vue.ts"],"sourcesContent":["import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef, watch, type PropType } from 'vue'\nimport { LeafThrough as Magazine, type GoToOptions } from './LeafThrough.js'\nimport type {\n  LeafThroughOptions,\n  InteractionOptions,\n  LightingOptions,\n  MotionOptions,\n  PageChangeDetail,\n  PageSource,\n  PaperOptions,\n} from './options.js'\n\nexport type * from './options.js'\n\n/**\n * Vue 3 component. Give it a size with a class or style; without a height it takes its\n * height from its width. Exposes `next()`, `prev()`, `goTo()` and `instance` via a template ref.\n *\n * ```vue\n * <LeafThrough :pages=\"pages\" style=\"height: 80vh\" @pagechange=\"(d) => (page = d.page)\" />\n * ```\n */\nexport const LeafThrough = defineComponent({\n  name: 'LeafThrough',\n  props: {\n    pages: { type: Array as PropType<PageSource[]>, required: true },\n    startPage: Number,\n    layout: String as PropType<LeafThroughOptions['layout']>,\n    spreadQuery: String,\n    pageAspect: Number,\n    loop: { type: Boolean, default: undefined },\n    bleed: { type: Boolean, default: undefined },\n    paper: Object as PropType<PaperOptions>,\n    lighting: Object as PropType<LightingOptions>,\n    motion: Object as PropType<MotionOptions>,\n    interaction: Object as PropType<InteractionOptions>,\n    maxPixelRatio: Number,\n    preload: Number,\n    plain: { type: Boolean, default: undefined },\n    label: String,\n    formatPageLabel: Function as PropType<LeafThroughOptions['formatPageLabel']>,\n  },\n  emits: {\n    pagechange: (_detail: PageChangeDetail) => true,\n    ready: () => true,\n    pageload: (_page: number) => true,\n    error: (_error: unknown, _page?: number) => true,\n  },\n  setup(props, { emit, expose }) {\n    const element = ref<HTMLDivElement>()\n    const instance = shallowRef<Magazine | null>(null)\n\n    const events = {\n      onPageChange: (detail: PageChangeDetail) => emit('pagechange', detail),\n      onReady: () => emit('ready'),\n      onPageLoad: (page: number) => emit('pageload', page),\n      onError: (error: unknown, page?: number) => emit('error', error, page),\n    }\n    // every prop, set or not: unset ones fall back to the magazine's defaults\n    const options = (): LeafThroughOptions => ({ ...(props as unknown as LeafThroughOptions), ...events })\n\n    onMounted(() => {\n      instance.value = new Magazine(element.value!, options())\n    })\n    // compared by value, so only real changes rebuild anything\n    watch(options, (next) => instance.value?.setOptions(next), { deep: true })\n    onBeforeUnmount(() => {\n      instance.value?.dispose()\n      instance.value = null\n    })\n\n    expose({\n      next: () => instance.value?.next() ?? false,\n      prev: () => instance.value?.prev() ?? false,\n      goTo: (page: number, goToOptions?: GoToOptions) => instance.value?.goTo(page, goToOptions),\n      instance,\n    })\n\n    return () => h('div', { ref: element })\n  },\n})\n\nexport default LeafThrough\n"],"mappings":";;;;;AAAA,SAAS,iBAAiB,GAAG,iBAAiB,WAAW,KAAK,YAAY,aAA4B;AAsB/F,IAAMA,eAAc,gBAAgB;AAAA,EACzC,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO,EAAE,MAAM,OAAiC,UAAU,KAAK;AAAA,IAC/D,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,MAAM,EAAE,MAAM,SAAS,SAAS,OAAU;AAAA,IAC1C,OAAO,EAAE,MAAM,SAAS,SAAS,OAAU;AAAA,IAC3C,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,eAAe;AAAA,IACf,SAAS;AAAA,IACT,OAAO,EAAE,MAAM,SAAS,SAAS,OAAU;AAAA,IAC3C,OAAO;AAAA,IACP,iBAAiB;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,IACL,YAAY,CAAC,YAA8B;AAAA,IAC3C,OAAO,MAAM;AAAA,IACb,UAAU,CAAC,UAAkB;AAAA,IAC7B,OAAO,CAAC,QAAiB,UAAmB;AAAA,EAC9C;AAAA,EACA,MAAM,OAAO,EAAE,MAAM,OAAO,GAAG;AAC7B,UAAM,UAAU,IAAoB;AACpC,UAAM,WAAW,WAA4B,IAAI;AAEjD,UAAM,SAAS;AAAA,MACb,cAAc,CAAC,WAA6B,KAAK,cAAc,MAAM;AAAA,MACrE,SAAS,MAAM,KAAK,OAAO;AAAA,MAC3B,YAAY,CAAC,SAAiB,KAAK,YAAY,IAAI;AAAA,MACnD,SAAS,CAAC,OAAgB,SAAkB,KAAK,SAAS,OAAO,IAAI;AAAA,IACvE;AAEA,UAAM,UAAU,OAA2B,EAAE,GAAI,OAAyC,GAAG,OAAO;AAEpG,cAAU,MAAM;AACd,eAAS,QAAQ,IAAI,YAAS,QAAQ,OAAQ,QAAQ,CAAC;AAAA,IACzD,CAAC;AAED,UAAM,SAAS,CAAC,SAAS,SAAS,OAAO,WAAW,IAAI,GAAG,EAAE,MAAM,KAAK,CAAC;AACzE,oBAAgB,MAAM;AACpB,eAAS,OAAO,QAAQ;AACxB,eAAS,QAAQ;AAAA,IACnB,CAAC;AAED,WAAO;AAAA,MACL,MAAM,MAAM,SAAS,OAAO,KAAK,KAAK;AAAA,MACtC,MAAM,MAAM,SAAS,OAAO,KAAK,KAAK;AAAA,MACtC,MAAM,CAAC,MAAc,gBAA8B,SAAS,OAAO,KAAK,MAAM,WAAW;AAAA,MACzF;AAAA,IACF,CAAC;AAED,WAAO,MAAM,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC;AAAA,EACxC;AACF,CAAC;AAED,IAAO,cAAQA;","names":["LeafThrough"]}