postext-folio 0.0.0-stage → 0.1.1

package/dist/viewer.d.ts

@@ -0,0 +1,103 @@
+import { type PageSource } from "./pageFlip";
+/** A page of the book: its source, or its source with a text alternative. */
+export type FolioPage = PageSource | {
+    src: PageSource;
+    alt?: string;
+};
+export interface FolioLabels {
+    /** The viewer's accessible name. */
+    region: string;
+    prev: string;
+    next: string;
+    /** The pages on show, for the live count under the book: page indexes
+     *  (0-based) and the page count. */
+    count: (pages: number[], total: number) => string;
+}
+export interface FolioOptions {
+    pages: FolioPage[];
+    /** Whether the first page is a recto (it opens alone, on the right of a
+     *  left-bound book). Default true. */
+    firstPageRecto?: boolean;
+    /** The edge the book is bound on. A right-bound book lies mirrored: page
+     *  1 alone on the left, pairs [3 | 2], and its pages turn leftward. */
+    binding?: "left" | "right";
+    /** The page to open on (0-based). Default 0. */
+    at?: number;
+    /** `double` shows spreads and turns leaves in 3D; `single` one page at a
+     *  time; `auto` (default) is single in a box narrower than 560 px. */
+    mode?: "auto" | "single" | "double";
+    /** A page's width / height, when the pages cannot tell it yet (blank
+     *  until painted). Default: the first sized page's, else 1 : √2. */
+    aspect?: number;
+    /** The colour of blank pages (any CSS colour). Default white. */
+    paper?: string;
+    /** Turns leaves in 3D when WebGL2 is there and the reader has not asked
+     *  for reduced motion. Default true. */
+    animate?: boolean;
+    /** Draws the ‹ › buttons and the page count. Default true. */
+    controls?: boolean;
+    /** Shows the page count under the book. Default true. When false it is
+     *  still announced to screen readers (a visually hidden live region). */
+    showCount?: boolean;
+    labels?: Partial<FolioLabels>;
+    /** Told of every spread that settles: its index and the pages on show. */
+    onChange?: (state: FolioState) => void;
+    /** Told as soon as the book is sent to another spread (a button, a key,
+     *  a page let go past halfway), before its leaves have landed. */
+    onTarget?: (state: FolioState) => void;
+    /** Told when the page slots change size: a host painting pages for the
+     *  viewer paints them at `deviceWidth` × `deviceHeight` pixels, so they
+     *  are shown 1:1 both at rest and on a turning leaf. */
+    onLayout?: (size: FolioPageSize) => void;
+}
+/** One page slot of the spread: its CSS size, and the device pixels it
+ *  covers (the size a page bitmap is shown 1:1 at). */
+export interface FolioPageSize {
+    width: number;
+    height: number;
+    deviceWidth: number;
+    deviceHeight: number;
+}
+export interface FolioState {
+    spread: number;
+    /** The page indexes on show (one or two). */
+    pages: number[];
+}
+export interface FolioViewer {
+    /** The viewer's root element. */
+    readonly element: HTMLElement;
+    /** Turns to the spread that shows page `index`; `instant` opens it
+     *  there without turning the leaves (a link, a restored position). */
+    goToPage(index: number, options?: {
+        instant?: boolean;
+    }): void;
+    /** Turns to spread `index` (`instant`: opens it there). */
+    goToSpread(index: number, options?: {
+        instant?: boolean;
+    }): void;
+    next(): void;
+    prev(): void;
+    /** Replaces the pages (a relayout, or more pages painted), staying on
+     *  the page on show unless `at` says otherwise. */
+    setPages(pages: FolioPage[], options?: Pick<FolioOptions, "firstPageRecto" | "binding" | "at" | "paper" | "mode">): void;
+    /** The page slot's size, as last laid out. */
+    readonly pageSize: FolioPageSize;
+    /** Swaps the labels (a host that changes language). */
+    setLabels(labels: Partial<FolioLabels>): void;
+    readonly state: FolioState;
+    dispose(): void;
+}
+/** Below this width (px) `mode: 'auto'` shows one page at a time. */
+export declare const SINGLE_BELOW = 560;
+/**
+ * A book on the page: the pages in spreads by the recto rule, turned with
+ * the ‹ › buttons, ←/→, a swipe, a click on a page, or taken by hand and
+ * dragged over, the leaves curling in three.js with their shadows. The
+ * WebGL canvas draws the book still and turning alike, so a page never
+ * changes look when it lands; the DOM pages under it (images or canvases)
+ * are its textures' sources and the pages' text alternatives. Without
+ * WebGL2, or with reduced motion, the DOM pages show and the spreads
+ * simply change.
+ */
+export declare function createFolio(container: HTMLElement, options: FolioOptions): FolioViewer;
+//# sourceMappingURL=viewer.d.ts.map

package/dist/viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../src/viewer.ts"],"names":[],"mappings":"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"}

package/dist/viewer.js

@@ -0,0 +1,565 @@
+import { canFlip, PageFlipper } from "./pageFlip";
+import { spreadOfPage, spreadsOf } from "./spreads";
+import { injectStyles } from "./styles";
+const DEFAULT_LABELS = {
+    region: "Book",
+    prev: "Previous pages",
+    next: "Next pages",
+    count: (pages, total) => pages.length > 1 ? `Pages ${pages[0] + 1}–${pages[pages.length - 1] + 1} of ${total}` : `Page ${(pages[0] ?? 0) + 1} of ${total}`,
+};
+/** A press on a page that moves less than this (px) is a click: it turns
+ *  the page (the recto forward, the verso back). */
+const CLICK_SLOP = 6;
+/** A horizontal swipe longer than this (px) turns the spread. */
+const SWIPE = 40;
+/** Below this width (px) `mode: 'auto'` shows one page at a time. */
+export const SINGLE_BELOW = 560;
+/** Space kept round the book (CSS px): beside it for the ‹ › buttons, and
+ *  above and below it for the page count (and a lifted leaf's corner). */
+const GAP = 12;
+const MIN_MARGIN_Y = 20;
+const CHEVRON = (dir) => `<svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="${dir === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6"}"/></svg>`;
+const sourceOf = (page) => (page && typeof page === "object" && "src" in page ? page.src : (page ?? null));
+const altOf = (page) => (page && typeof page === "object" && "src" in page ? page.alt : undefined);
+/** The natural width / height of a page source, when it is known. */
+function aspectOf(src) {
+    if (!src || typeof src === "string")
+        return null;
+    const w = src instanceof HTMLCanvasElement ? src.width : src.naturalWidth;
+    const h = src instanceof HTMLCanvasElement ? src.height : src.naturalHeight;
+    return w > 0 && h > 0 ? w / h : null;
+}
+/** A CSS colour as 0 … 1 channels. */
+function rgbOf(color) {
+    const ctx = document.createElement("canvas").getContext("2d");
+    if (!ctx)
+        return null;
+    // Over white: a transparent page is white paper.
+    ctx.fillStyle = "#fff";
+    ctx.fillRect(0, 0, 1, 1);
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, 1, 1);
+    const d = ctx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+}
+/**
+ * A book on the page: the pages in spreads by the recto rule, turned with
+ * the ‹ › buttons, ←/→, a swipe, a click on a page, or taken by hand and
+ * dragged over, the leaves curling in three.js with their shadows. The
+ * WebGL canvas draws the book still and turning alike, so a page never
+ * changes look when it lands; the DOM pages under it (images or canvases)
+ * are its textures' sources and the pages' text alternatives. Without
+ * WebGL2, or with reduced motion, the DOM pages show and the spreads
+ * simply change.
+ */
+export function createFolio(container, options) {
+    injectStyles(container);
+    let labels = { ...DEFAULT_LABELS, ...options.labels };
+    let pages = options.pages;
+    let firstPageRecto = options.firstPageRecto ?? true;
+    let binding = options.binding ?? "left";
+    let mode = options.mode ?? "auto";
+    let paper = options.paper ?? "#fff";
+    const animate = options.animate ?? true;
+    const controls = options.controls ?? true;
+    const showCount = controls && (options.showCount ?? true);
+    const root = document.createElement("div");
+    root.className = "postext-folio";
+    root.tabIndex = 0;
+    root.setAttribute("role", "group");
+    root.setAttribute("aria-roledescription", "carousel");
+    const prevBtn = document.createElement("button");
+    const nextBtn = document.createElement("button");
+    for (const btn of [prevBtn, nextBtn]) {
+        btn.type = "button";
+        btn.className = "postext-folio-nav";
+    }
+    const spreadEl = document.createElement("div");
+    spreadEl.className = "postext-folio-spread";
+    const count = document.createElement("p");
+    count.className = "postext-folio-count";
+    count.setAttribute("aria-live", "polite");
+    prevBtn.classList.add("is-prev");
+    nextBtn.classList.add("is-next");
+    root.append(spreadEl, prevBtn, nextBtn);
+    if (controls)
+        root.append(count);
+    if (!showCount)
+        count.classList.add("is-unseen");
+    else
+        prevBtn.hidden = nextBtn.hidden = true;
+    container.append(root);
+    let single = false;
+    let spreads = [];
+    let current = 0;
+    let shown = 0;
+    let flipper = null;
+    let flipCanvas = null;
+    let holding = null;
+    let press = null;
+    let swipe = null;
+    let disposed = false;
+    let slot = { width: 0, height: 0, deviceWidth: 0, deviceHeight: 0 };
+    const rtl = () => binding === "right";
+    const pagesOf = (s) => (s ?? [null, null]).filter((i) => i !== null);
+    /** One page at a time on a WebGL book: the spine runs along the page's
+     *  inner edge, the leaf turns over it and out of the box. */
+    const singleGl = () => single && !!flipper;
+    // In single mode every sheet carries one page: its back is blank paper
+    // (the page after it lies under it, not on its back).
+    const bookOf = () => spreads.map((s, k) => (single ? [k === 0 ? null : "", sourceOf(pages[s[1]])] : s.map((i) => (i === null ? null : sourceOf(pages[i])))));
+    function aspect() {
+        if (options.aspect)
+            return options.aspect;
+        for (const page of pages) {
+            const ar = aspectOf(sourceOf(page));
+            if (ar)
+                return ar;
+        }
+        return 1 / Math.SQRT2;
+    }
+    /**
+     * Fits the book into the box, as large as it goes: the ‹ › buttons and
+     * the count sit in the margins round it. The spread lies on the device
+     * pixel grid, its page slots a whole number of device pixels wide, so a
+     * page painted at that size is shown 1:1 in the DOM and on the canvas
+     * alike. The WebGL canvas covers the box, centred on the spread (the
+     * camera maps the spread onto it 1:1), with room for a lifted leaf.
+     */
+    function fit() {
+        const dpr = window.devicePixelRatio || 1;
+        const box = root.getBoundingClientRect();
+        const boxW = Math.floor(box.width * dpr);
+        const boxH = Math.floor(box.height * dpr);
+        const ar = aspect();
+        const gap = Math.round(GAP * dpr);
+        // The widest page up to `max` device px whose width and height are
+        // even: the spread's centre and the spine (the camera's centre in one
+        // or the other mode) then lie on the pixel grid.
+        const fitWidth = (max) => {
+            let w = Math.max(2, Math.floor(max));
+            while (w > 2 && (w % 2 || Math.round(w / ar) % 2))
+                w--;
+            return w;
+        };
+        let deviceWidth;
+        let left;
+        let top;
+        let across;
+        if (single) {
+            // One page across the box, the buttons and the count in a bar below.
+            const bar = controls ? Math.round((prevBtn.offsetWidth + 2 * GAP) * dpr) : gap;
+            const availW = Math.max(0, boxW - 2 * gap);
+            const availH = Math.max(0, boxH - gap - bar);
+            deviceWidth = fitWidth(Math.min(availW, availH > 0 ? availH * ar : Infinity));
+            const deviceHeight = Math.round(deviceWidth / ar);
+            const pageLeft = gap + Math.floor((availW - deviceWidth) / 2);
+            top = gap + Math.max(0, Math.floor((availH - deviceHeight) / 2));
+            if (flipper) {
+                // The WebGL book is a spread whose other page lies off the box: the
+                // spine on the page's inner edge (its left, or its right when the
+                // book is bound on the right).
+                across = 2;
+                left = rtl() ? pageLeft : pageLeft - deviceWidth;
+            }
+            else {
+                across = 1;
+                left = pageLeft;
+            }
+        }
+        else {
+            across = 2;
+            const marginX = Math.round((controls ? prevBtn.offsetWidth + 2 * GAP : GAP) * dpr);
+            const marginY = Math.round(Math.max(MIN_MARGIN_Y, showCount ? count.offsetHeight + 2 * GAP : GAP) * dpr);
+            const availW = Math.max(0, boxW - 2 * marginX);
+            const availH = Math.max(0, boxH - 2 * marginY);
+            deviceWidth = fitWidth(Math.min(availW / 2, availH > 0 ? availH * ar : Infinity));
+            left = Math.floor((boxW - 2 * deviceWidth) / 2);
+            top = Math.max(0, Math.floor((boxH - Math.round(deviceWidth / ar)) / 2));
+        }
+        const deviceHeight = Math.max(1, Math.round(deviceWidth / ar));
+        Object.assign(spreadEl.style, {
+            left: `${left / dpr}px`,
+            top: `${top / dpr}px`,
+            width: `${(across * deviceWidth) / dpr}px`,
+            height: `${deviceHeight / dpr}px`,
+        });
+        if (flipCanvas) {
+            // Centred on the spine (the camera maps the spread onto the canvas
+            // 1:1 about its centre) and reaching every edge of the box; what
+            // falls outside the box is clipped.
+            const cx = left + deviceWidth;
+            const cy = top + deviceHeight / 2;
+            const hw = Math.max(cx, boxW - cx);
+            const hh = Math.max(cy, boxH - cy);
+            Object.assign(flipCanvas.style, {
+                left: `${(cx - hw) / dpr}px`,
+                top: `${(cy - hh) / dpr}px`,
+                width: `${(2 * hw) / dpr}px`,
+                height: `${(2 * hh) / dpr}px`,
+            });
+        }
+        const next = { width: deviceWidth / dpr, height: deviceHeight / dpr, deviceWidth, deviceHeight };
+        if (next.deviceWidth !== slot.deviceWidth || next.deviceHeight !== slot.deviceHeight) {
+            slot = next;
+            options.onLayout?.(slot);
+        }
+        flipper?.redraw();
+    }
+    function pageEl(i, slot) {
+        const el = document.createElement("div");
+        el.className = "postext-folio-page";
+        if (!single || singleGl())
+            el.classList.add(slot === 0 ? "is-verso" : "is-recto");
+        const src = i === null ? null : sourceOf(pages[i]);
+        if (src === null) {
+            el.classList.add("is-empty");
+            el.setAttribute("aria-hidden", "true");
+        }
+        else if (src === "") {
+            el.classList.add("is-blank");
+            el.setAttribute("aria-hidden", "true");
+        }
+        else {
+            const alt = altOf(pages[i]) ?? "";
+            if (typeof src === "string") {
+                const img = document.createElement("img");
+                img.src = src;
+                img.alt = alt;
+                img.draggable = false;
+                img.decoding = "async";
+                el.append(img);
+            }
+            else {
+                // The page's own element (a canvas, or a decoded image), shown as is.
+                src.classList.add("postext-folio-surface");
+                if (src instanceof HTMLCanvasElement) {
+                    src.setAttribute("role", "img");
+                    if (alt)
+                        src.setAttribute("aria-label", alt);
+                }
+                else {
+                    src.alt = alt;
+                    src.draggable = false;
+                }
+                el.append(src);
+            }
+        }
+        return el;
+    }
+    function render() {
+        const s = spreads[shown] ?? [null, null];
+        const slots = single && !singleGl() ? [s[0] ?? s[1]] : s;
+        spreadEl.replaceChildren(...slots.map((i, side) => pageEl(i, side)));
+        spreadEl.classList.toggle("is-solo", single && !singleGl());
+        spreadEl.classList.toggle("is-by-hand", !!flipper);
+        // The canvas draws the book, still or turning; the DOM pages stay as
+        // the textures' sources and the pages' text alternatives.
+        spreadEl.classList.toggle("is-gl", !!flipper);
+        const on = pagesOf(spreads[current]);
+        count.textContent = on.length ? labels.count(on, pages.length) : "";
+        prevBtn.disabled = current <= 0;
+        nextBtn.disabled = current >= spreads.length - 1;
+        // The settled spread, drawn at rest.
+        flipper?.clear();
+    }
+    function settle(index) {
+        shown = index;
+        render();
+        options.onChange?.({ spread: index, pages: pagesOf(spreads[index]) });
+    }
+    function go(index) {
+        const to = Math.max(0, Math.min(spreads.length - 1, index));
+        if (to === current && to === shown)
+            return;
+        current = to;
+        options.onTarget?.({ spread: to, pages: pagesOf(spreads[to]) });
+        if (flipper) {
+            flipper.go(to);
+            // The count and buttons follow the hand at once.
+            count.textContent = labels.count(pagesOf(spreads[to]), pages.length);
+            prevBtn.disabled = to <= 0;
+            nextBtn.disabled = to >= spreads.length - 1;
+        }
+        else
+            settle(to);
+    }
+    /** Opens spread `index` at once, no leaf turning. */
+    function jump(index) {
+        const to = Math.max(0, Math.min(spreads.length - 1, index));
+        if (to === current && to === shown)
+            return;
+        current = to;
+        options.onTarget?.({ spread: to, pages: pagesOf(spreads[to]) });
+        flipper?.setBook(bookOf(), to);
+        settle(to);
+    }
+    function setUpFlipper() {
+        flipper?.dispose();
+        flipper = null;
+        flipCanvas?.remove();
+        flipCanvas = null;
+        if (!animate || spreads.length < 2 || !canFlip())
+            return;
+        flipCanvas = document.createElement("canvas");
+        flipCanvas.className = "postext-folio-flip";
+        flipCanvas.setAttribute("aria-hidden", "true");
+        root.append(flipCanvas);
+        flipper = new PageFlipper(flipCanvas, spreadEl, bookOf(), shown, settle, (i) => {
+            current = i;
+            options.onTarget?.({ spread: i, pages: pagesOf(spreads[i]) });
+            count.textContent = labels.count(pagesOf(spreads[i]), pages.length);
+        }, binding, 
+        // One page at a time the spine is the box's edge: the leaf cannot be
+        // carried past halfway, so a shorter pull turns it.
+        { persistent: true, turnAt: single ? 0.2 : 0.5 });
+        const rgb = rgbOf(paper);
+        if (rgb)
+            flipper.setPaper(...rgb);
+    }
+    /** Lays the book out again: spreads, mode, flipper. */
+    function rebuild(atPage) {
+        single = mode === "single" || (mode === "auto" && root.clientWidth > 0 && root.clientWidth < SINGLE_BELOW);
+        spreads = single ? pages.map((_, i) => [null, i]) : spreadsOf(pages.length, firstPageRecto);
+        current = shown = spreadOfPage(spreads, atPage);
+        root.dir = rtl() ? "rtl" : "ltr";
+        root.style.setProperty("--postext-folio-paper", paper);
+        root.classList.toggle("is-single", single);
+        prevBtn.innerHTML = CHEVRON(rtl() ? "right" : "left");
+        nextBtn.innerHTML = CHEVRON(rtl() ? "left" : "right");
+        setUpFlipper();
+        fit();
+        render();
+    }
+    function applyLabels() {
+        root.setAttribute("aria-label", labels.region);
+        prevBtn.setAttribute("aria-label", labels.prev);
+        nextBtn.setAttribute("aria-label", labels.next);
+    }
+    // ── Input ──
+    prevBtn.addEventListener("click", () => go(current - 1));
+    nextBtn.addEventListener("click", () => go(current + 1));
+    root.addEventListener("keydown", (event) => {
+        if (event.target !== root)
+            return;
+        const forward = rtl() ? "ArrowLeft" : "ArrowRight";
+        const back = rtl() ? "ArrowRight" : "ArrowLeft";
+        if (event.key === back || event.key === "PageUp")
+            go(current - 1);
+        else if (event.key === forward || event.key === "PageDown")
+            go(current + 1);
+        else if (event.key === "Home")
+            go(0);
+        else if (event.key === "End")
+            go(spreads.length - 1);
+        else
+            return;
+        event.preventDefault();
+    });
+    root.addEventListener("pointerdown", (event) => {
+        if (event.pointerType !== "mouse")
+            swipe = { x: event.clientX, y: event.clientY };
+    });
+    root.addEventListener("pointerup", (event) => {
+        const start = swipe;
+        swipe = null;
+        if (!start)
+            return;
+        const dx = event.clientX - start.x;
+        if (Math.abs(dx) > SWIPE && Math.abs(dx) > Math.abs(event.clientY - start.y))
+            go(current + ((dx < 0) !== rtl() ? 1 : -1));
+    });
+    spreadEl.addEventListener("pointerdown", (event) => {
+        if (event.button !== 0 || holding)
+            return;
+        press = { x: event.clientX, y: event.clientY };
+        if (singleGl())
+            return void decide(event);
+        if (!flipper?.grab(event))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        hold(event, press);
+    });
+    /**
+     * One page at a time, the page is taken only once the pointer shows
+     * which way it goes: towards the spine it is lifted and dragged over
+     * (from where it was pressed), away from it the book goes back a page (a
+     * swipe); a press that does not move is a tap and turns forward.
+     */
+    function decide(down) {
+        down.stopPropagation();
+        swipe = null;
+        const id = down.pointerId;
+        const start = { x: down.clientX, y: down.clientY };
+        const toSpine = rtl() ? 1 : -1;
+        const done = () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp, true);
+            window.removeEventListener("pointercancel", onCancel);
+        };
+        const onMove = (e) => {
+            if (e.pointerId !== id)
+                return;
+            const dx = e.clientX - start.x;
+            const dy = e.clientY - start.y;
+            if (Math.hypot(dx, dy) < CLICK_SLOP || Math.abs(dy) > Math.abs(dx))
+                return;
+            if (Math.sign(dx) !== toSpine)
+                return; // a swipe back: settled on release
+            done();
+            if (!flipper?.grab(down))
+                return;
+            hold(down, start);
+            flipper.drag(e);
+        };
+        const onUp = (e) => {
+            if (e.pointerId !== id)
+                return;
+            done();
+            press = null;
+            const dx = e.clientX - start.x;
+            const dy = e.clientY - start.y;
+            if (Math.hypot(dx, dy) < CLICK_SLOP)
+                go(current + 1);
+            else if (Math.abs(dx) > SWIPE && Math.abs(dx) > Math.abs(dy) && Math.sign(dx) === -toSpine)
+                go(current - 1);
+            e.stopPropagation();
+        };
+        const onCancel = (e) => {
+            if (e.pointerId === id)
+                done();
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp, true);
+        window.addEventListener("pointercancel", onCancel);
+    }
+    /** Holds the page taken at `event` until the pointer lets go. */
+    function hold(event, start) {
+        // The hold follows the pointer anywhere: the window hears it even if
+        // the capture is lost, and a move with the button up means the release
+        // was missed.
+        const id = event.pointerId;
+        const onMove = (e) => {
+            if (e.pointerId !== id)
+                return;
+            if ((e.buttons & 1) === 0)
+                end(false);
+            else
+                flipper?.drag(e);
+        };
+        const onUp = (e) => {
+            if (e.pointerId === id)
+                end(Math.hypot(e.clientX - start.x, e.clientY - start.y) < CLICK_SLOP);
+        };
+        const onCancel = (e) => {
+            if (e.pointerId === id)
+                end(false);
+        };
+        const onBlur = () => end(false);
+        const end = (click) => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp, true);
+            window.removeEventListener("pointercancel", onCancel);
+            window.removeEventListener("blur", onBlur);
+            spreadEl.classList.remove("is-held");
+            holding = null;
+            press = null;
+            flipper?.release(click);
+        };
+        window.addEventListener("pointermove", onMove);
+        // Captured, so the stage's swipe does not hear the hold's release.
+        window.addEventListener("pointerup", onUp, true);
+        window.addEventListener("pointercancel", onCancel);
+        window.addEventListener("blur", onBlur);
+        holding = end;
+        swipe = null;
+        spreadEl.classList.add("is-held");
+        try {
+            spreadEl.setPointerCapture(id);
+        }
+        catch {
+            // The window listeners carry the hold without it.
+        }
+    }
+    spreadEl.addEventListener("pointerup", (event) => {
+        if (holding || singleGl())
+            return;
+        const start = press;
+        press = null;
+        const click = !!start && Math.hypot(event.clientX - start.x, event.clientY - start.y) < CLICK_SLOP;
+        if (!click || !event.target.closest(".postext-folio-page:not(.is-empty)"))
+            return;
+        // A click on the recto turns forward, on the verso back (pages already
+        // in the air: it joins them).
+        const rect = spreadEl.getBoundingClientRect();
+        swipe = null;
+        if (single)
+            go(current + 1);
+        else
+            go(current + ((event.clientX > rect.left + rect.width / 2) !== rtl() ? 1 : -1));
+    });
+    let lastWidth = -1;
+    const observer = new ResizeObserver(() => {
+        if (disposed)
+            return;
+        const w = root.clientWidth;
+        const wasSingle = single;
+        const nowSingle = mode === "single" || (mode === "auto" && w > 0 && w < SINGLE_BELOW);
+        if (lastWidth >= 0 && nowSingle !== wasSingle)
+            rebuild(pagesOf(spreads[shown])[0] ?? 0);
+        else
+            fit();
+        lastWidth = w;
+    });
+    observer.observe(root);
+    applyLabels();
+    rebuild(options.at ?? 0);
+    return {
+        element: root,
+        goToPage: (index, opts) => (opts?.instant ? jump : go)(spreadOfPage(spreads, index)),
+        goToSpread: (index, opts) => (opts?.instant ? jump : go)(index),
+        next: () => go(current + 1),
+        prev: () => go(current - 1),
+        setLabels(next) {
+            labels = { ...labels, ...next };
+            applyLabels();
+            render();
+        },
+        get pageSize() {
+            return slot;
+        },
+        get state() {
+            return { spread: current, pages: pagesOf(spreads[current]) };
+        },
+        setPages(next, opts = {}) {
+            const atPage = opts.at ?? pagesOf(spreads[shown])[0] ?? 0;
+            const relayout = next.length !== pages.length ||
+                (opts.firstPageRecto ?? firstPageRecto) !== firstPageRecto ||
+                (opts.binding ?? binding) !== binding ||
+                (opts.mode ?? mode) !== mode ||
+                (opts.paper ?? paper) !== paper;
+            pages = next;
+            firstPageRecto = opts.firstPageRecto ?? firstPageRecto;
+            binding = opts.binding ?? binding;
+            mode = opts.mode ?? mode;
+            paper = opts.paper ?? paper;
+            if (relayout)
+                return rebuild(atPage);
+            // Same spreads: the leaves take their new pages where they lie.
+            flipper?.setBook(bookOf(), opts.at !== undefined ? spreadOfPage(spreads, opts.at) : undefined);
+            if (opts.at !== undefined)
+                current = shown = spreadOfPage(spreads, opts.at);
+            fit();
+            render();
+        },
+        dispose() {
+            disposed = true;
+            observer.disconnect();
+            holding?.(false);
+            flipper?.dispose();
+            root.remove();
+        },
+    };
+}
+//# sourceMappingURL=viewer.js.map