leafthrough 0.0.0-stage → 0.1.1

package/dist/element.d.ts

@@ -0,0 +1,79 @@
+import { LeafThrough, type GoToOptions } from './LeafThrough.js';
+import type { LeafThroughOptions, Layout, PageChangeDetail, PageSource } from './options.js';
+export type * from './options.js';
+declare const BaseElement: typeof HTMLElement;
+/**
+ * `<leaf-through>`: works anywhere HTML does, including Angular, Solid and Lit.
+ *
+ * Pages come from the `pages` property, a `pages` attribute (JSON array or comma-separated
+ * URLs), or the element's `<img>` children: their `alt` describes the page, and a
+ * `<figcaption>` next to one in a `<figure>` gives the page's text. Everything else can be
+ * set through the `options` property or the attributes `start-page`, `layout`,
+ * `spread-query`, `page-aspect`, `loop`, `bleed`, `label`, `keyboard`, `preload` and `plain`.
+ *
+ * Events (all bubble): `pagechange` (detail: PageChangeDetail), `ready`, `pageload`
+ * (detail: `{ page }`), and `pageerror`
+ * (detail: `{ error, page }`). It isn't called `error`, which on the DOM means a script
+ * error and reaches `window`, where error trackers listen.
+ *
+ * ```html
+ * <leaf-through style="height: 80vh" layout="auto">
+ *   <img src="/pages/01.jpg" alt="Cover: a lighthouse at dusk" />
+ *   <figure>
+ *     <img src="/pages/02.jpg" alt="" />
+ *     <figcaption>Contents. Page 3: The keeper's year…</figcaption>
+ *   </figure>
+ * </leaf-through>
+ * ```
+ */
+export interface LeafThroughElementEventMap extends HTMLElementEventMap {
+    pagechange: CustomEvent<PageChangeDetail>;
+    ready: CustomEvent<void>;
+    pageload: CustomEvent<{
+        page: number;
+    }>;
+    pageerror: CustomEvent<{
+        error: unknown;
+        page?: number;
+    }>;
+}
+export declare class LeafThroughElement extends BaseElement {
+    static observedAttributes: string[];
+    private magazine;
+    private extra;
+    private explicitPages;
+    private readonly mount;
+    private childObserver;
+    constructor();
+    /** The pages, in reading order. */
+    get pages(): PageSource[];
+    set pages(pages: PageSource[]);
+    /** Any other options, merged over the attributes. */
+    get options(): Partial<LeafThroughOptions>;
+    set options(options: Partial<LeafThroughOptions>);
+    get page(): number;
+    get pageCount(): number;
+    get layout(): Layout | undefined;
+    /** The underlying instance, once connected. */
+    get instance(): LeafThrough | null;
+    next(): boolean;
+    prev(): boolean;
+    goTo(page: number, options?: GoToOptions): void;
+    addEventListener<K extends keyof LeafThroughElementEventMap>(type: K, listener: (this: LeafThroughElement, event: LeafThroughElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof LeafThroughElementEventMap>(type: K, listener: (this: LeafThroughElement, event: LeafThroughElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private pagesFromMarkup;
+    private optionsFromAttributes;
+    private sync;
+}
+/** Registers the element (as `leaf-through` unless you pick another tag). */
+export declare function defineLeafThrough(tagName?: string): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'leaf-through': LeafThroughElement;
+    }
+}

package/dist/element.js

@@ -0,0 +1,182 @@
+import {
+  LeafThrough
+} from "./chunk-DQL4R32K.js";
+
+// src/element.ts
+var ATTRIBUTES = {
+  "start-page": "startPage",
+  layout: "layout",
+  "spread-query": "spreadQuery",
+  "page-aspect": "pageAspect",
+  loop: "loop",
+  bleed: "bleed",
+  label: "label",
+  keyboard: "keyboard",
+  preload: "preload",
+  plain: "plain"
+};
+var NUMBERS = /* @__PURE__ */ new Set(["startPage", "pageAspect", "preload"]);
+var BOOLEANS = /* @__PURE__ */ new Set(["loop", "bleed", "plain"]);
+var BaseElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+var LeafThroughElement = class extends BaseElement {
+  static observedAttributes = ["pages", ...Object.keys(ATTRIBUTES)];
+  magazine = null;
+  extra = {};
+  explicitPages = null;
+  mount;
+  childObserver = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = ":host{display:block;position:relative}:host([hidden]){display:none}div{width:100%;height:100%}";
+    this.mount = document.createElement("div");
+    shadow.append(style, this.mount);
+    const self = this;
+    for (const key of ["pages", "options"]) {
+      if (!Object.hasOwn(this, key)) continue;
+      const value = self[key];
+      delete self[key];
+      self[key] = value;
+    }
+  }
+  /** The pages, in reading order. */
+  get pages() {
+    return this.explicitPages ?? this.pagesFromMarkup();
+  }
+  set pages(pages) {
+    this.explicitPages = pages;
+    this.sync();
+  }
+  /** Any other options, merged over the attributes. */
+  get options() {
+    return this.extra;
+  }
+  set options(options) {
+    this.extra = { ...options };
+    if (options.pages) this.explicitPages = options.pages;
+    this.sync();
+  }
+  get page() {
+    return this.magazine?.page ?? 0;
+  }
+  get pageCount() {
+    return this.pages.length;
+  }
+  get layout() {
+    return this.magazine?.layout;
+  }
+  /** The underlying instance, once connected. */
+  get instance() {
+    return this.magazine;
+  }
+  next() {
+    return this.magazine?.next() ?? false;
+  }
+  prev() {
+    return this.magazine?.prev() ?? false;
+  }
+  goTo(page, options) {
+    this.magazine?.goTo(page, options);
+  }
+  addEventListener(type, listener, options) {
+    super.addEventListener(type, listener, options);
+  }
+  removeEventListener(type, listener, options) {
+    super.removeEventListener(type, listener, options);
+  }
+  connectedCallback() {
+    this.childObserver = new MutationObserver(() => {
+      if (!this.explicitPages) this.sync();
+    });
+    this.childObserver.observe(this, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["src", "alt"] });
+    this.sync();
+  }
+  disconnectedCallback() {
+    this.childObserver?.disconnect();
+    this.magazine?.dispose();
+    this.magazine = null;
+  }
+  attributeChangedCallback() {
+    this.sync();
+  }
+  pagesFromMarkup() {
+    const attribute = this.getAttribute("pages");
+    if (attribute) {
+      const trimmed = attribute.trim();
+      if (trimmed.startsWith("[")) {
+        try {
+          return JSON.parse(trimmed);
+        } catch {
+          return [];
+        }
+      }
+      return trimmed.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    return Array.from(this.querySelectorAll("img")).flatMap((img) => {
+      const src = img.currentSrc || img.src;
+      if (!src) return [];
+      const text = img.closest("figure")?.querySelector("figcaption")?.textContent?.trim();
+      return img.alt || text ? [{ src, alt: img.alt || void 0, text: text || void 0 }] : [src];
+    });
+  }
+  optionsFromAttributes() {
+    const out = {};
+    for (const [attribute, key] of Object.entries(ATTRIBUTES)) {
+      const value = this.getAttribute(attribute);
+      if (value === null) continue;
+      if (NUMBERS.has(key)) out[key] = Number(value);
+      else if (BOOLEANS.has(key)) out[key] = value !== "false";
+      else if (key === "keyboard") {
+        out.interaction = { keyboard: value === "global" ? "global" : value !== "false" };
+      } else out[key] = value;
+    }
+    return out;
+  }
+  sync() {
+    if (!this.isConnected) return;
+    const pages = this.pages;
+    const attributes = this.optionsFromAttributes();
+    const options = {
+      ...attributes,
+      ...this.extra,
+      interaction: { ...attributes.interaction, ...this.extra.interaction },
+      pages,
+      onPageChange: (detail) => {
+        this.extra.onPageChange?.(detail);
+        this.dispatchEvent(new CustomEvent("pagechange", { detail, bubbles: true, composed: true }));
+      },
+      onReady: () => {
+        this.extra.onReady?.();
+        this.dispatchEvent(new CustomEvent("ready", { bubbles: true, composed: true }));
+      },
+      onPageLoad: (page) => {
+        this.extra.onPageLoad?.(page);
+        this.dispatchEvent(new CustomEvent("pageload", { detail: { page }, bubbles: true, composed: true }));
+      },
+      onError: (error, page) => {
+        this.extra.onError?.(error, page);
+        this.dispatchEvent(new CustomEvent("pageerror", { detail: { error, page }, bubbles: true, composed: true }));
+      }
+    };
+    if (!pages.length) {
+      this.magazine?.dispose();
+      this.magazine = null;
+      return;
+    }
+    if (this.magazine) this.magazine.setOptions(options);
+    else this.magazine = new LeafThrough(this.mount, options);
+  }
+};
+function defineLeafThrough(tagName = "leaf-through") {
+  if (typeof customElements === "undefined" || customElements.get(tagName)) return;
+  customElements.define(tagName, class extends LeafThroughElement {
+  });
+}
+defineLeafThrough();
+export {
+  LeafThroughElement,
+  defineLeafThrough
+};
+//# sourceMappingURL=element.js.map

package/dist/element.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/element.ts"],"sourcesContent":["import { LeafThrough, type GoToOptions } from './LeafThrough.js'\nimport type { LeafThroughOptions, Layout, PageChangeDetail, PageSource } from './options.js'\n\nexport type * from './options.js'\n\n// attribute → option, for the simple ones\nconst ATTRIBUTES = {\n  'start-page': 'startPage',\n  layout: 'layout',\n  'spread-query': 'spreadQuery',\n  'page-aspect': 'pageAspect',\n  loop: 'loop',\n  bleed: 'bleed',\n  label: 'label',\n  keyboard: 'keyboard',\n  preload: 'preload',\n  plain: 'plain',\n} as const\n\nconst NUMBERS = new Set(['startPage', 'pageAspect', 'preload'])\nconst BOOLEANS = new Set(['loop', 'bleed', 'plain'])\n\nconst BaseElement = (typeof HTMLElement !== 'undefined' ? HTMLElement : class {}) as typeof HTMLElement\n\n/**\n * `<leaf-through>`: works anywhere HTML does, including Angular, Solid and Lit.\n *\n * Pages come from the `pages` property, a `pages` attribute (JSON array or comma-separated\n * URLs), or the element's `<img>` children: their `alt` describes the page, and a\n * `<figcaption>` next to one in a `<figure>` gives the page's text. Everything else can be\n * set through the `options` property or the attributes `start-page`, `layout`,\n * `spread-query`, `page-aspect`, `loop`, `bleed`, `label`, `keyboard`, `preload` and `plain`.\n *\n * Events (all bubble): `pagechange` (detail: PageChangeDetail), `ready`, `pageload`\n * (detail: `{ page }`), and `pageerror`\n * (detail: `{ error, page }`). It isn't called `error`, which on the DOM means a script\n * error and reaches `window`, where error trackers listen.\n *\n * ```html\n * <leaf-through style=\"height: 80vh\" layout=\"auto\">\n *   <img src=\"/pages/01.jpg\" alt=\"Cover: a lighthouse at dusk\" />\n *   <figure>\n *     <img src=\"/pages/02.jpg\" alt=\"\" />\n *     <figcaption>Contents. Page 3: The keeper's year…</figcaption>\n *   </figure>\n * </leaf-through>\n * ```\n */\nexport interface LeafThroughElementEventMap extends HTMLElementEventMap {\n  pagechange: CustomEvent<PageChangeDetail>\n  ready: CustomEvent<void>\n  pageload: CustomEvent<{ page: number }>\n  pageerror: CustomEvent<{ error: unknown; page?: number }>\n}\n\nexport class LeafThroughElement extends BaseElement {\n  static observedAttributes = ['pages', ...Object.keys(ATTRIBUTES)]\n\n  private magazine: LeafThrough | null = null\n  private extra: Partial<LeafThroughOptions> = {}\n  private explicitPages: PageSource[] | null = null\n  private readonly mount: HTMLDivElement\n  private childObserver: MutationObserver | null = null\n\n  constructor() {\n    super()\n    const shadow = this.attachShadow({ mode: 'open' })\n    const style = document.createElement('style')\n    style.textContent = ':host{display:block;position:relative}:host([hidden]){display:none}div{width:100%;height:100%}'\n    this.mount = document.createElement('div')\n    // children stay in the light DOM as the page list (and as fallback content); hide them\n    shadow.append(style, this.mount)\n\n    // A property set before the element was defined is an own property that hides the\n    // setter; move it through the setter, so later assignments reach the magazine.\n    const self = this as unknown as Record<string, unknown>\n    for (const key of ['pages', 'options']) {\n      if (!Object.hasOwn(this, key)) continue\n      const value = self[key]\n      delete self[key]\n      self[key] = value\n    }\n  }\n\n  /** The pages, in reading order. */\n  get pages(): PageSource[] {\n    return this.explicitPages ?? this.pagesFromMarkup()\n  }\n\n  set pages(pages: PageSource[]) {\n    this.explicitPages = pages\n    this.sync()\n  }\n\n  /** Any other options, merged over the attributes. */\n  get options(): Partial<LeafThroughOptions> {\n    return this.extra\n  }\n\n  set options(options: Partial<LeafThroughOptions>) {\n    this.extra = { ...options }\n    if (options.pages) this.explicitPages = options.pages\n    this.sync()\n  }\n\n  get page(): number {\n    return this.magazine?.page ?? 0\n  }\n\n  get pageCount(): number {\n    return this.pages.length\n  }\n\n  get layout(): Layout | undefined {\n    return this.magazine?.layout\n  }\n\n  /** The underlying instance, once connected. */\n  get instance(): LeafThrough | null {\n    return this.magazine\n  }\n\n  next(): boolean {\n    return this.magazine?.next() ?? false\n  }\n\n  prev(): boolean {\n    return this.magazine?.prev() ?? false\n  }\n\n  goTo(page: number, options?: GoToOptions) {\n    this.magazine?.goTo(page, options)\n  }\n\n  addEventListener<K extends keyof LeafThroughElementEventMap>(\n    type: K,\n    listener: (this: LeafThroughElement, event: LeafThroughElementEventMap[K]) => unknown,\n    options?: boolean | AddEventListenerOptions,\n  ): void\n  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void\n  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) {\n    super.addEventListener(type, listener, options)\n  }\n\n  removeEventListener<K extends keyof LeafThroughElementEventMap>(\n    type: K,\n    listener: (this: LeafThroughElement, event: LeafThroughElementEventMap[K]) => unknown,\n    options?: boolean | EventListenerOptions,\n  ): void\n  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void\n  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) {\n    super.removeEventListener(type, listener, options)\n  }\n\n  connectedCallback() {\n    this.childObserver = new MutationObserver(() => {\n      if (!this.explicitPages) this.sync()\n    })\n    this.childObserver.observe(this, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['src', 'alt'] })\n    this.sync()\n  }\n\n  disconnectedCallback() {\n    this.childObserver?.disconnect()\n    this.magazine?.dispose()\n    this.magazine = null\n  }\n\n  attributeChangedCallback() {\n    this.sync()\n  }\n\n  private pagesFromMarkup(): PageSource[] {\n    const attribute = this.getAttribute('pages')\n    if (attribute) {\n      const trimmed = attribute.trim()\n      if (trimmed.startsWith('[')) {\n        try {\n          return JSON.parse(trimmed) as PageSource[]\n        } catch {\n          return []\n        }\n      }\n      return trimmed.split(',').map((s) => s.trim()).filter(Boolean)\n    }\n    return Array.from(this.querySelectorAll('img')).flatMap((img): PageSource[] => {\n      const src = img.currentSrc || img.src\n      if (!src) return []\n      const text = img.closest('figure')?.querySelector('figcaption')?.textContent?.trim()\n      return img.alt || text ? [{ src, alt: img.alt || undefined, text: text || undefined }] : [src]\n    })\n  }\n\n  private optionsFromAttributes(): Partial<LeafThroughOptions> {\n    const out: Record<string, unknown> = {}\n    for (const [attribute, key] of Object.entries(ATTRIBUTES)) {\n      const value = this.getAttribute(attribute)\n      if (value === null) continue\n      if (NUMBERS.has(key)) out[key] = Number(value)\n      else if (BOOLEANS.has(key)) out[key] = value !== 'false'\n      else if (key === 'keyboard') {\n        out.interaction = { keyboard: value === 'global' ? 'global' : value !== 'false' }\n      } else out[key] = value\n    }\n    return out as Partial<LeafThroughOptions>\n  }\n\n  private sync() {\n    if (!this.isConnected) return\n    const pages = this.pages\n    const attributes = this.optionsFromAttributes()\n    const options: LeafThroughOptions = {\n      ...attributes,\n      ...this.extra,\n      interaction: { ...attributes.interaction, ...this.extra.interaction },\n      pages,\n      onPageChange: (detail: PageChangeDetail) => {\n        this.extra.onPageChange?.(detail)\n        this.dispatchEvent(new CustomEvent('pagechange', { detail, bubbles: true, composed: true }))\n      },\n      onReady: () => {\n        this.extra.onReady?.()\n        this.dispatchEvent(new CustomEvent('ready', { bubbles: true, composed: true }))\n      },\n      onPageLoad: (page: number) => {\n        this.extra.onPageLoad?.(page)\n        this.dispatchEvent(new CustomEvent('pageload', { detail: { page }, bubbles: true, composed: true }))\n      },\n      onError: (error: unknown, page?: number) => {\n        this.extra.onError?.(error, page)\n        this.dispatchEvent(new CustomEvent('pageerror', { detail: { error, page }, bubbles: true, composed: true }))\n      },\n    }\n    if (!pages.length) {\n      this.magazine?.dispose()\n      this.magazine = null\n      return\n    }\n    if (this.magazine) this.magazine.setOptions(options)\n    else this.magazine = new LeafThrough(this.mount, options)\n  }\n}\n\n/** Registers the element (as `leaf-through` unless you pick another tag). */\nexport function defineLeafThrough(tagName = 'leaf-through') {\n  if (typeof customElements === 'undefined' || customElements.get(tagName)) return\n  customElements.define(tagName, class extends LeafThroughElement {})\n}\n\ndefineLeafThrough()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'leaf-through': LeafThroughElement\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/engine.d.ts

@@ -0,0 +1,51 @@
+import type * as THREE from 'three';
+import type { ResolvedSettings } from './options.js';
+import type { SheetShading } from './paper/paperMaterial.js';
+export interface EngineContext {
+    camera: THREE.PerspectiveCamera;
+    canvas: HTMLCanvasElement;
+    /** Receives pointer input; covers the pages. */
+    hitArea: HTMLElement;
+    settings: ResolvedSettings;
+    /** One texture per page, in reading order. */
+    textures: THREE.Texture[];
+    /** Plain paper, for missing or unprinted sides. */
+    blank: THREE.Texture;
+    pattern: THREE.Texture;
+    /** Where the magazine opens, in the engine's own position units. */
+    position: number;
+    /** Kept current by the controller as the magazine resizes. */
+    metrics: EngineMetrics;
+    /** Shared by every sheet; the engine keeps spineContact current. */
+    shading: SheetShading;
+}
+export interface EngineMetrics {
+    /** Pixels a drag spans per unit of `dragDistance`. */
+    dragWidth: number;
+}
+export interface Engine {
+    readonly group: THREE.Group;
+    /** Spread: sheets turned to the left. Single: pages turned. */
+    readonly position: number;
+    readonly maxPosition: number;
+    /** Whether a page is being dragged or is still completing a turn. */
+    readonly turning: boolean;
+    /** Which part of the pages takes input: a closed spread only turns from its cover side. */
+    readonly activeSide: 'both' | 'right' | 'left';
+    /**
+     * The pages that can be seen right now, as a range: the ones at rest and any mid-turn. A
+     * quick riffle leaves pages turning well behind the position, and they mustn't unload.
+     */
+    pagesInView(): {
+        from: number;
+        to: number;
+    };
+    /** Advances the simulation; returns true when the frame needs drawing. */
+    update(now: number): boolean;
+    /** Turns the top page one way; false when there's nothing to turn. */
+    flip(forward: boolean): boolean;
+    /** Moves to a position at once, without animating. */
+    jumpTo(position: number): void;
+    setPageTexture(page: number, texture: THREE.Texture): void;
+    dispose(): void;
+}

package/dist/framing.d.ts

@@ -0,0 +1,48 @@
+import type { Layout } from './options.js';
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** What the camera looks at, in world units (a page is 1 wide, the spine is at x = 0). */
+export interface Framing {
+    /** Fits the element when bleeding: the pages, plus any room the layout always needs. Takes input. */
+    box: Rect;
+    /** Everything a turning page can reach. The canvas covers this (clipped to the document). */
+    view: Rect;
+    /** Camera position over the floor; the view needn't be centred on it. */
+    eye: {
+        x: number;
+        y: number;
+    };
+    distance: number;
+    /** World width that a drag of `dragDistance` × this turns a page all the way over. */
+    dragWidth: number;
+    /** Directional shadow frustum, already scaled to the page aspect. */
+    shadow: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+}
+export declare function framingFor(layout: Layout, aspect: number): Framing;
+/** The plain view: just the pages, centred, with nothing around them. */
+export declare function plainFramingFor(layout: Layout, aspect: number): Framing;
+export interface Fit {
+    /** Pixels per world unit. */
+    scale: number;
+    /** Where the whole view lands, in px relative to the root's top-left corner. */
+    view: Rect;
+    /** Where the box lands, in px relative to the root. */
+    box: Rect;
+    /** Height the root needs when its container has no height of its own. */
+    height: number;
+}
+/**
+ * Fits the framing into an element. With `bleed`, the box fills the element and the rest
+ * of the view spills past it; without, the whole view stays inside. An element with no
+ * height (`height` 0) takes its height from its width.
+ */
+export declare function fit(framing: Framing, width: number, height: number, bleed: boolean): Fit;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { LeafThrough, type LeafThroughEventMap, type GoToOptions } from './LeafThrough.js';
+export { DEFAULT_PAGE_ASPECT, DEFAULT_SPREAD_QUERY, defaultPageLabel, type LeafThroughOptions, type InteractionOptions, type Layout, type LightingOptions, type MotionOptions, type PageChangeDetail, type PageDescriptor, type PageImage, type PageSource, type PaperOptions, } from './options.js';

package/dist/index.js

@@ -0,0 +1,13 @@
+import {
+  DEFAULT_PAGE_ASPECT,
+  DEFAULT_SPREAD_QUERY,
+  LeafThrough,
+  defaultPageLabel
+} from "./chunk-DQL4R32K.js";
+export {
+  DEFAULT_PAGE_ASPECT,
+  DEFAULT_SPREAD_QUERY,
+  LeafThrough,
+  defaultPageLabel
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/options.d.ts

@@ -0,0 +1,194 @@
+import type { ColorRepresentation, Texture } from 'three';
+/** Anything a page can be printed from. Strings are image URLs. */
+export type PageImage = string | HTMLImageElement | HTMLCanvasElement | ImageBitmap | Texture;
+/** A page image with what's on it, for screen readers and the plain view. */
+export interface PageDescriptor {
+    src: PageImage;
+    /** A short description of the page, like an image's alt text. */
+    alt?: string;
+    /** The page's text, or a transcript of it. Blank lines separate paragraphs. */
+    text?: string;
+}
+/** A page: its image, or a descriptor with the image and what's on it. */
+export type PageSource = PageImage | PageDescriptor;
+/**
+ * `spread`: an open magazine, two pages side by side, sheets turning over the spine.
+ * `single`: one page at a time, read pages rolling up behind the magazine.
+ */
+export type Layout = 'spread' | 'single';
+export interface PaperOptions {
+    /**
+     * Paper fibre texture. `true` uses the built-in one, `false` turns it off, or pass a
+     * tiling greyscale image (or its URL). Only the brightest specks show. Default `true`.
+     */
+    grain?: boolean | string | HTMLImageElement | HTMLCanvasElement;
+    /** How many times the grain tiles across a page. Default `1.46`. */
+    grainScale?: number;
+    /** How much the grain darkens the paper, 0–1. Default `0.17`. */
+    grainStrength?: number;
+    /** How much of the other side's print shows through, 0–1. Default `0.04` (spread), `0.3` (single). */
+    showThrough?: number;
+    /** How much glossier ink is than bare paper, 0–1. Default `0.33`. */
+    inkGloss?: number;
+    /** Default `0.5`. */
+    roughness?: number;
+    /** A touch of metalness gives the paper its sheen. Default `0.17`. */
+    metalness?: number;
+    /**
+     * Colour of unprinted paper: the blank back of single-layout pages, and what shows through
+     * transparent parts of page images. Default `#fcfcf9`.
+     */
+    backColor?: ColorRepresentation;
+    /** Scales the waviness of resting sheets (spread). `0` lays them flat. Default `1`. */
+    wrinkles?: number;
+    /** Scales how much resting pages bulge up off the spine. Default `1`. */
+    bulge?: number;
+}
+export interface LightingOptions {
+    /** Hemisphere light. Default sky `#ffffff`, ground `#a1aeaf`, intensity `1.5` (spread) or `1.7` (single). */
+    ambient?: {
+        sky?: ColorRepresentation;
+        ground?: ColorRepresentation;
+        intensity?: number;
+    };
+    /** The one directional light. `position` is in page widths, +z towards the viewer. */
+    sun?: {
+        color?: ColorRepresentation;
+        intensity?: number;
+        position?: [number, number, number];
+    };
+    /** Default `true`. */
+    shadows?: boolean;
+    /** Shadow map resolution. Default `2048`. */
+    shadowMapSize?: number;
+    /** Opacity of the shadow the magazine casts on the surface under it (spread). `0` hides it. Default `0.15`. */
+    floorShadow?: number;
+}
+export interface MotionOptions {
+    /** Multiplies the speed of every page turn. Default `1`. */
+    speed?: number;
+    /** Share of the canvas width a drag must travel to turn a page all the way. Default `0.8` (spread), `1.2` (single). */
+    dragDistance?: number;
+    /** Share of a turn a released drag must have made to complete it. Default `0.2` (spread), `0.1` (single). */
+    commitThreshold?: number;
+    /** Scales how much a turning sheet bends. Default `1`. */
+    curl?: number;
+    /** Largest tilt of the fold, in degrees, from where the page is held. Default `45` (spread), `35` (single). */
+    maxTilt?: number;
+    /** Small random differences between turns, so no two look the same. Default `true`. */
+    jitter?: boolean;
+    /** How far a hovered sheet lifts, as a share of a turn (spread). `0` disables. Default `0.03`. */
+    hoverLift?: number;
+    /**
+     * `'auto'` follows the user's `prefers-reduced-motion`. When reduced, turns are quicker and
+     * hovering doesn't lift pages. Default `'auto'`.
+     */
+    reducedMotion?: 'auto' | boolean;
+}
+export interface InteractionOptions {
+    /** Drag pages to turn them. Default `true`. */
+    drag?: boolean;
+    /** Click or tap a page to turn it. Default `true`. */
+    click?: boolean;
+    /** Press and hold to keep turning pages. Default `true`. */
+    hold?: boolean;
+    /** Hovering lifts the top sheet (spread). Default `true`. */
+    hover?: boolean;
+    /**
+     * Arrow keys, PageUp/PageDown, Home/End. `true` listens while the magazine has focus,
+     * `'global'` listens on the whole window. Default `true`.
+     */
+    keyboard?: boolean | 'global';
+}
+export interface PageChangeDetail {
+    /** First visible page, 0-based. */
+    page: number;
+    /** Every page currently showing, 0-based. */
+    visiblePages: number[];
+    pageCount: number;
+    layout: Layout;
+}
+export interface LeafThroughOptions {
+    /** The pages in reading order, front cover first. */
+    pages: PageSource[];
+    /** Page to open at, 0-based. Default `0`. Later changes are ignored; use `goTo()`. */
+    startPage?: number;
+    /** `'auto'` picks `spread` when `spreadQuery` matches, `single` otherwise. Default `'auto'`. */
+    layout?: 'auto' | Layout;
+    /** Media query for the spread layout. Default `(min-width: 768px) and (orientation: landscape)`. */
+    spreadQuery?: string;
+    /** Page height divided by width. Default `1.377`. */
+    pageAspect?: number;
+    /** Single layout: after the last page, close and start again from the cover. Default `true`. */
+    loop?: boolean;
+    /**
+     * `true` fits the magazine to the container and lets turning pages and shadows spill
+     * outside it, up to the edges of the document (the container must not clip).
+     * `false` keeps everything inside the container, which makes the pages smaller.
+     * Default `true`.
+     */
+    bleed?: boolean;
+    paper?: PaperOptions;
+    lighting?: LightingOptions;
+    motion?: MotionOptions;
+    interaction?: InteractionOptions;
+    /** Upper limit for the canvas pixel ratio. Default `2`. */
+    maxPixelRatio?: number;
+    /**
+     * How many pages either side of the visible ones to load ahead. Visible means on screen:
+     * pages mid-turn count, and in `single` so do read pages still rolled up behind the magazine.
+     * Pages more than twice as far away are unloaded, which frees their memory. `Infinity` loads
+     * and keeps every page. Default `6`.
+     */
+    preload?: number;
+    /**
+     * Shows the pages as flat images, without 3D. The magazine switches to this by itself when
+     * the browser can't run WebGL. Default `false`.
+     */
+    plain?: boolean;
+    /** Accessible name. Default `'Magazine'`. */
+    label?: string;
+    /** Text announced to screen readers when pages change. */
+    formatPageLabel?: (detail: PageChangeDetail) => string;
+    onPageChange?: (detail: PageChangeDetail) => void;
+    onReady?: () => void;
+    /** A page's image has loaded. Fires again if the page is unloaded and loads later. */
+    onPageLoad?: (page: number) => void;
+    onError?: (error: unknown, page?: number) => void;
+}
+export declare const DEFAULT_SPREAD_QUERY = "(min-width: 768px) and (orientation: landscape)";
+export declare const DEFAULT_PAGE_ASPECT = 1.377;
+export declare function defaultPageLabel({ visiblePages, pageCount }: PageChangeDetail): string;
+export declare function isPageDescriptor(page: PageSource): page is PageDescriptor;
+export declare const pageImage: (page: PageSource) => PageImage;
+/** Everything an engine needs, with layout defaults filled in. */
+export interface ResolvedSettings {
+    layout: Layout;
+    pageAspect: number;
+    loop: boolean;
+    bleed: boolean;
+    paper: Required<Omit<PaperOptions, 'grain'>> & {
+        grain: PaperOptions['grain'];
+    };
+    lighting: {
+        ambient: {
+            sky: ColorRepresentation;
+            ground: ColorRepresentation;
+            intensity: number;
+        };
+        sun: {
+            color: ColorRepresentation;
+            intensity: number;
+            position: [number, number, number];
+        };
+        shadows: boolean;
+        shadowMapSize: number;
+        floorShadow: number;
+    };
+    motion: Required<Omit<MotionOptions, 'reducedMotion'>> & {
+        reduced: boolean;
+    };
+    interaction: Required<InteractionOptions>;
+    maxPixelRatio: number;
+}
+export declare function resolveSettings(options: LeafThroughOptions, layout: Layout, prefersReducedMotion: boolean): ResolvedSettings;

package/dist/paper/paperMaterial.d.ts

@@ -0,0 +1,34 @@
+import * as THREE from 'three';
+import type { ResolvedSettings } from '../options.js';
+export type SheetUniforms = Record<string, THREE.IUniform>;
+/** Uniforms every sheet in a scene shares. */
+export interface SheetShading {
+    /** Direction across of the turning sheet's root (x, z) and whether one is turning. */
+    spineContact: THREE.IUniform<THREE.Vector3>;
+    /** Towards the sun, in the magazine's frame. */
+    lightDirection: THREE.IUniform<THREE.Vector3>;
+}
+export interface SheetShader {
+    /** GLSL defining `vec3 sheetPosition(vec2 uv, float noise)` and its uniforms. */
+    vertexChunk: string;
+    /** GLSL defining `bool sheetHidden(vec3 p)` and its uniforms: true where not to draw. */
+    fragmentChunk?: string;
+    /** Finite difference step for normals, in page widths. */
+    epsilon: number;
+    /** Read per-vertex noise from the `aNoise` attribute (declared by the chunk). */
+    noise?: boolean;
+    /** Nudges the shadow caster sideways. */
+    shadowOffsetX: number;
+}
+export type SheetMesh = THREE.Mesh<THREE.BufferGeometry, THREE.MeshStandardMaterial>;
+export declare function createSheetMesh(geometry: THREE.BufferGeometry, uniforms: SheetUniforms, shader: SheetShader, settings: ResolvedSettings): SheetMesh;
+/**
+ * Every sheet rises from the spine at height 0, so along the spine they all but touch and
+ * the depth buffer can't separate them: sheets further down flicker through as a light seam.
+ * Bias each sheet's depth by its place in the stack instead: the top sheet wins, and a sheet
+ * that's turning wins over everything.
+ */
+export declare function layerSheet(mesh: SheetMesh, depth: number, count: number, moving: boolean): void;
+export declare function disposeSheetMesh(mesh: SheetMesh): void;
+/** A 1×1 texture of one colour, for blank pages and placeholders. */
+export declare function solidTexture(color: THREE.ColorRepresentation): THREE.DataTexture;

package/dist/paper/paperPattern.d.ts

@@ -0,0 +1,2 @@
+import * as THREE from 'three';
+export declare function createPaperPattern(renderer: THREE.WebGLRenderer): THREE.CanvasTexture;