postext-folio 0.52.5 → 0.52.7

package/dist/postext.js

@@ -1,142 +1,12 @@
-import { renderPageToCanvas } from "postext";
-import { folioForTrim, resolveFolioConfig } from "postext";
-import { BLOCK_PAGES } from "./pageFlip.js";
-import { createFolio } from "./viewer.js";
-import { attachVideoSource, autoKey, autoplayPlan, isHlsVideo, makeWay, pageVideoSpots, spotContains } from "./videos.js";
-/** Whether the document's first page is a recto: page 1, or a chapter
- *  continued after an even number of pages. */
-export function firstPageIsRecto(doc) {
-    return (doc.pageIndexOffset ?? 0) % 2 === 0;
-}
-/** A page's width and height as bound: the trim box, since a book is cut
- *  (a sheet laid out with cut lines also carries the bleed, the slug and
- *  the crop marks, none of which a bound page shows). */
-export function trimmedSize(page, doc) {
-    const inset = Math.max(0, doc.trimOffset);
-    return { width: page.width - 2 * inset, height: page.height - 2 * inset };
-}
-/** The page's colour, for blank pages: white when it has none. */
-function paperOf(doc) {
-    const hex = doc.config.page.backgroundColor.hex;
-    return hex && hex !== "transparent" ? hex : "#fff";
-}
-/** How the document's book is presented: its `folio` settings, its page
- *  width, the book's pages before and after it (a chapter of a longer
- *  book), with the host's own appearance laid over them. The pages round
- *  it are the host's word when it gives them (`extraPages`: a host laying
- *  a book out a chapter at a time knows the chapters after this one, which
- *  the document only knows when it was given the book's page count). A
- *  newspaper trim (`page.sizePreset` broadsheet, berliner, tabloid or
- *  compact) shows folded newsprint unless the settings name a stock or a
- *  binding (#506). */
-export function appearanceOf(doc, own) {
-    const page = doc.pages[0];
-    const before = Math.max(0, own?.extraPages?.before ?? doc.pageIndexOffset ?? 0);
-    const after = Math.max(0, own?.extraPages?.after ?? (doc.bookPageCount ?? 0) - before - doc.pages.length);
-    const folio = folioForTrim(own && "folio" in own ? own.folio : doc.config.folio, doc.config.page.sizePreset);
-    // The document's own covers: the book's first page (a recto) and its
-    // last, when that is a verso (an even page number). A chapter from the
-    // middle of the book has neither: its first and last leaves are paper
-    // (#449).
-    const ownCovers = resolveFolioConfig(folio).binding.cover === "pages";
-    const total = before + doc.pages.length;
-    return {
-        covers: { front: ownCovers && before === 0, back: ownCovers && after === 0 && total % 2 === 0 },
-        // Page sizes are in device pixels at the page's dpi.
-        ...(page ? { pageWidthMm: (trimmedSize(page, doc).width * 25.4) / (doc.config.page.dpi || 300) } : {}),
-        ...own,
-        folio,
-        extraPages: { before, after },
-    };
-}
-/** The paper a page is printed on, when a `:::paper` run sets one. */
-const pagePaperOf = (page) => page?.paper;
-/** What a page is painted from, as text: two pages with the same
- *  signature under the same config paint the same. */
-const signatures = new WeakMap();
-function signature(of) {
-    let sig = signatures.get(of);
-    if (sig === undefined) {
-        sig = JSON.stringify(of);
-        signatures.set(of, sig);
-    }
-    return sig;
-}
-/**
- * Which paintings a new layout can keep: new page index → old page index,
- * for every page of `wanted` that is the same page as a painted one (the
- * same object, or one that reads the same). Each old painting goes to one
- * page at most.
- */
-export function carriedPaintings(before, painted, next, wanted) {
-    const carried = new Map();
-    const byPage = new Map();
-    for (const k of painted)
-        if (before[k])
-            byPage.set(before[k], k);
-    if (byPage.size === 0)
-        return carried;
-    let bySignature = null;
-    for (const i of wanted) {
-        const page = next[i];
-        if (!page)
-            continue;
-        let k = byPage.get(page);
-        if (k === undefined) {
-            bySignature ??= new Map([...byPage].map(([p, j]) => [signature(p), j]));
-            k = bySignature.get(signature(page));
-        }
-        if (k === undefined)
-            continue;
-        carried.set(i, k);
-        byPage.delete(before[k]);
-        bySignature = null;
-    }
-    return carried;
-}
-/** Pages a turn paints for its leaves, at most. */
-const MAX_SWEEP = 160;
-/**
- * The pages a turn to `target` sweeps past, in the order its leaves lift,
- * and the run it belongs to. A turn set at rest (`run` null) more than
- * `BLOCK_PAGES` away goes over as one block, as the renderer turns it: it
- * keeps only the pages on show (the block's top face), the target's being
- * painted with it. A target set while leaves are in the air carries the
- * run on leaf by leaf (the renderer lifts a block only with no leaf in
- * the air), so every page from where the run started (or its block
- * lands) to the target is swept, a run of fast clicks included.
- */
-export function sweepFor(run, settled, target, count) {
-    if (!run) {
-        const from = settled.length ? settled : [0];
-        if (Math.abs((target[0] ?? 0) - (from[0] ?? 0)) > BLOCK_PAGES)
-            return { run: { from, block: target }, pages: [...from] };
-        run = { from, block: null };
-    }
-    const from = run.block ?? run.from;
-    const lo = Math.max(0, Math.min(...from, ...target) - 1);
-    const hi = Math.min(count - 1, Math.max(...from, ...target) + 1);
-    const pages = [];
-    for (let i = lo; i <= hi; i++)
-        pages.push(i);
-    if ((target[0] ?? 0) < (from[0] ?? 0))
-        pages.reverse();
-    // The block's top face stays until it lands.
-    const swept = run.block ? [...run.from, ...pages] : pages;
-    return { run, pages: swept.slice(0, MAX_SWEEP) };
-}
-/** Painting time per frame while leaves are in the air. */
-const SWEEP_BUDGET_MS = 8;
-/** The reader has asked for less motion: no video starts on its own to
- *  play alongside the others. */
-const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
-/** How long the book must stay as it is before a video set to play on its
- *  own starts (a host's layouts settling, a run of turns). */
-const AUTOPLAY_SETTLE_MS = 700;
-/** The most pixels a page is painted in for the magnifying glass. */
-const SHARP_MAX_PIXELS = 24e6;
-/** How long a resize settles before the pages are painted at the new size. */
-const RESIZE_SETTLE_MS = 120;
+import { createFolio } from './viewer.js';
+import { autoKey } from './videos.js';
+import { pagePaperOf, trimmedSize, appearanceOf, firstPageIsRecto, paperOf, signature, carriedPaintings } from './postext/book.js';
+import { cancelIdle, RESIZE_SETTLE_MS } from './postext/constants.js';
+import { createDocumentPainting } from './postext/painting.js';
+import { createDocumentVideos } from './postext/pageVideos.js';
+import { createDocumentSharp } from './postext/sharp.js';
+export { firstPageIsRecto, trimmedSize, appearanceOf, carriedPaintings } from './postext/book.js';
+export { sweepFor } from './postext/sweep.js';
 /**
  * A postext document as a book: `createFolio` over its pages, painted with
  * `renderPageToCanvas` at exactly the device pixels of a page slot, so the
@@ -151,562 +21,48 @@ const RESIZE_SETTLE_MS = 120;
  * as for `renderPage`.
  */
 export function createFolioFromDocument(container, doc, options = {}) {
+    const ds = {};
+    const dlate = {};
     const reach = options.window ?? 3;
-    let current = doc;
-    let canvases = [];
+    ds.current = doc;
+    ds.canvases = [];
     /** A decorated page's canvas: its painting with the decorations over
      *  it, kept (and drawn again in place) once a page has been decorated. */
-    let decorated = [];
+    ds.decorated = [];
     /** Page → the slot width (device px) it was painted for. */
-    let painted = new Map();
-    let focus = [options.at ?? 0];
-    let idle = 0;
+    ds.painted = new Map();
+    ds.focus = [options.at ?? 0];
+    ds.idle = 0;
     /** The pages on show when the book last came to rest. */
-    let settled = [];
+    ds.settled = [];
     /** The pages a turn in progress sweeps past, in the order their leaves
      *  lift (from the spread at rest towards the target). */
-    let sweep = [];
-    let sweepFrame = 0;
+    ds.sweep = [];
+    ds.sweepFrame = 0;
     /** The run of turns since the book last came to rest. */
-    let run = null;
+    ds.run = null;
     /** Leaves are in the air (sent to a spread that has not landed yet). */
-    let turning = false;
+    ds.turning = false;
     let resizeTimer = 0;
-    let ready = false;
+    ds.ready = false;
     let hostAppearance = options.appearance;
     const slotWidth = () => viewer.pageSize.deviceWidth;
-    const sources = () => current.pages.map((_, i) => {
-        const canvas = canvases[i];
-        const paper = pagePaperOf(current.pages[i]);
-        if (painted.has(i) && canvas)
-            return { src: decorated[i] ?? canvas, alt: options.alt?.(i) ?? `Page ${i + 1}`, ...(paper ? { paper } : {}) };
+    const sources = () => ds.current.pages.map((_, i) => {
+        const canvas = ds.canvases[i];
+        const paper = pagePaperOf(ds.current.pages[i]);
+        if (ds.painted.has(i) && canvas)
+            return { src: ds.decorated[i] ?? canvas, alt: options.alt?.(i) ?? `Page ${i + 1}`, ...(paper ? { paper } : {}) };
         return paper ? { src: "", paper } : "";
     });
-    /** Pages within `reach` spreads of the ones on show. */
-    function wanted() {
-        const keep = new Set();
-        const span = 2 * reach + 1;
-        for (const p of focus)
-            for (let i = p - span; i <= p + span; i++)
-                if (i >= 0 && i < current.pages.length)
-                    keep.add(i);
-        for (const i of sweep)
-            keep.add(i);
-        return keep;
-    }
-    /** Paints page `i` on a fresh canvas (the leaves cache their texture by
-     *  element) exactly `width` device pixels wide. */
-    function paint(i, width) {
-        const page = current.pages[i];
-        if (!page)
-            return;
-        const canvas = document.createElement("canvas");
-        // The page as bound: trimmed, without the slug and the crop marks.
-        renderPageToCanvas(page, current, canvas, {
-            trim: true,
-            scale: width / trimmedSize(page, current).width,
-            singleInk: options.singleInk,
-            pageNegative: options.pageNegative,
-            ...(options.printPreview ? { printPreview: options.printPreview } : {}),
-        });
-        const old = canvases[i];
-        if (old)
-            old.width = old.height = 0;
-        canvases[i] = canvas;
-        painted.set(i, width);
-        // A new painting: decorated afresh, on a canvas of its own (its
-        // texture follows the element).
-        free(decorated[i]);
-        decorated[i] = null;
-        decorate(i);
-    }
-    const free = (canvas) => {
-        if (canvas)
-            canvas.width = canvas.height = 0;
-    };
-    /** Draws page `i`'s decorations over its painting. True when the page
-     *  shows another canvas than before (it was not decorated). */
-    function decorate(i) {
-        const draw = options.decorate;
-        const base = canvases[i];
-        const page = current.pages[i];
-        if (!draw || !base || !page)
-            return false;
-        let target = decorated[i];
-        const fresh = !target;
-        target ??= document.createElement("canvas");
-        if (target.width !== base.width || target.height !== base.height) {
-            target.width = base.width;
-            target.height = base.height;
-        }
-        const ctx = target.getContext("2d");
-        if (!ctx)
-            return false;
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
-        ctx.globalCompositeOperation = "source-over";
-        ctx.globalAlpha = 1;
-        ctx.drawImage(base, 0, 0);
-        // The page's own pixels: the canvas shows the trimmed page at its size.
-        const inset = Math.max(0, current.trimOffset);
-        const scale = base.width / trimmedSize(page, current).width;
-        ctx.setTransform(scale, 0, 0, scale, -inset * scale, -inset * scale);
-        ctx.save();
-        const drew = draw(i, ctx);
-        ctx.restore();
-        if (!drew && fresh)
-            return false;
-        decorated[i] = target;
-        return fresh;
-    }
-    /** Paints what the open spread needs now and lets go of the far pages;
-     *  the rest of the window fills in when the browser is idle. */
-    function refresh(urgent) {
-        if (!ready)
-            return;
-        const width = slotWidth();
-        const keep = wanted();
-        let changed = false;
-        for (const i of urgent) {
-            if (i < 0 || i >= current.pages.length || painted.get(i) === width)
-                continue;
-            paint(i, width);
-            changed = true;
-        }
-        for (const i of [...painted.keys()]) {
-            if (keep.has(i))
-                continue;
-            const canvas = canvases[i];
-            if (canvas)
-                canvas.width = canvas.height = 0;
-            canvases[i] = null;
-            free(decorated[i]);
-            decorated[i] = null;
-            painted.delete(i);
-            changed = true;
-        }
-        if (changed)
-            viewer.setPages(sources());
-        schedule();
-    }
-    /** A turn across several spreads: every page its leaves carry is
-     *  painted, a frame at a time, in the order the leaves lift, so no page
-     *  goes over blank. */
-    function startSweep(target) {
-        const next = sweepFor(run, settled, target, current.pages.length);
-        run = next.run;
-        sweep = next.pages;
-        cancelAnimationFrame(sweepFrame);
-        sweepFrame = requestAnimationFrame(paintSweep);
-    }
-    function paintSweep() {
-        sweepFrame = 0;
-        const width = slotWidth();
-        const start = performance.now();
-        let changed = false;
-        for (const i of sweep) {
-            if (painted.get(i) === width)
-                continue;
-            paint(i, width);
-            changed = true;
-            if (performance.now() - start > SWEEP_BUDGET_MS)
-                break;
-        }
-        if (!changed)
-            return;
-        viewer.setPages(sources());
-        sweepFrame = requestAnimationFrame(paintSweep);
-    }
-    function schedule() {
-        cancelIdle(idle);
-        idle = onIdle(() => {
-            const width = slotWidth();
-            const distance = (i) => Math.min(...focus.map((f) => Math.abs(i - f)));
-            const next = [...wanted()].filter((i) => painted.get(i) !== width).sort((a, b) => distance(a) - distance(b)).slice(0, 4);
-            if (!next.length)
-                return;
-            for (const i of next)
-                paint(i, width);
-            viewer.setPages(sources());
-            schedule();
-        });
-    }
-    const around = (state) => {
-        const pages = state.pages.length ? state.pages : [0];
-        // The leaf a hand would lift next shows the neighbours' pages.
-        return [...pages, pages[0] - 2, pages[0] - 1, pages[pages.length - 1] + 1, pages[pages.length - 1] + 2];
-    };
-    // ── Videos on the pages (#477, #507) ──
-    /** The video spots of each page of the current document, as found. */
-    let spots = new Map();
-    /** The videos playing (or paused) on the pages, in the order they
-     *  started. */
-    let players = [];
-    /** The videos that have started on their own once (`player.autoplay`
-     *  with `exclusive`). */
-    const autoplayed = new Set();
-    /** The videos playing alongside that have started on their own since
-     *  their page last came into view (`page|key`). */
-    const autoStarted = new Set();
-    const spotsOf = (i) => {
-        let found = spots.get(i);
-        if (!found) {
-            const page = current.pages[i];
-            found = page ? pageVideoSpots(page, current) : [];
-            spots.set(i, found);
-        }
-        return found;
-    };
-    /** Where a self-hosted video plays from: its file, else its address. */
-    const urlOf = (spot) => {
-        const v = spot.video;
-        if (v.source !== "file")
-            return undefined;
-        return (v.fileId ? options.videoUrl?.(v.fileId) : undefined) ?? v.link;
-    };
-    const spotAt = (point) => options.videos === false ? undefined : spotsOf(point.page).find((s) => urlOf(s) && spotContains(s, point.x, point.y));
-    const playerOf = (page, spot) => players.find((p) => p.page === page && p.spot.key === spot.key);
-    const onShow = (p) => viewer.state.pages.includes(p.page);
-    const report = (p, state) => {
-        options.onVideo?.({ resourceId: p.spot.resourceId, page: p.page, state });
-    };
-    /** Shows the videos that have a frame to show on their pages. */
-    function showVideos() {
-        viewer.setPageVideos(players
-            .filter((p) => p.shown)
-            .map((p) => ({ page: p.page, element: p.element, origin: p.spot.origin, across: p.spot.across, down: p.spot.down, ...(p.spot.crop ? { crop: p.spot.crop } : {}) })));
-    }
-    /** Stops a video: its poster shows again, and the videos it held go on. */
-    function stopPlayer(p, state = "stopped") {
-        if (!players.includes(p))
-            return;
-        players = players.filter((q) => q !== p);
-        report(p, state);
-        p.element.pause();
-        p.release?.();
-        if (p.shown)
-            showVideos();
-        resumeHeld(p);
-    }
-    function stopVideos() {
-        for (const p of [...players])
-            stopPlayer(p);
-    }
-    /** The videos playing alongside that `by` held go on (on show only),
-     *  and those set to play on their own that have not started yet start. */
-    function resumeHeld(by) {
-        if (by.alongside)
-            return;
-        for (const q of players) {
-            if (q.heldBy !== by)
-                continue;
-            q.heldBy = null;
-            if (onShow(q))
-                void q.element.play().catch(() => { });
-        }
-        if (!turning)
-            autoplayOn(viewer.state.pages, { exclusive: false });
-    }
-    /** A video starts (or goes on): the others make way for it (see
-     *  `makeWay`). */
-    function makeWayFor(p) {
-        p.heldBy = null;
-        // Those waiting for another exclusive video wait for this one now.
-        if (!p.alongside)
-            for (const q of players)
-                if (q.heldBy)
-                    q.heldBy = p;
-        const list = [...players.filter((q) => q !== p), p].map((q) => ({ q, alongside: q.alongside, paused: q.element.paused }));
-        const way = makeWay(list[list.length - 1], list);
-        for (const { q } of way.hold) {
-            q.heldBy = p;
-            q.element.pause();
-        }
-        for (const { q } of way.pause)
-            q.element.pause();
-        for (const { q } of way.stop)
-            stopPlayer(q);
-    }
-    /** Plays the video at `spot` on `page`, from its start; `auto` when it
-     *  starts on its own. */
-    function startVideo(page, spot, auto = false) {
-        const url = urlOf(spot);
-        if (!url)
-            return;
-        const player = spot.video.player;
-        const alongside = player.exclusive === false;
-        const element = document.createElement("video");
-        element.playsInline = true;
-        element.preload = "auto";
-        // WebGL draws the picture only when its server allows the read.
-        if (!/^(blob|data):/i.test(url))
-            element.crossOrigin = "anonymous";
-        const range = { start: spot.video.start ?? 0, end: spot.video.end };
-        // A loop from the file's start loops by itself (seamlessly); one from
-        // later on is sent back by hand.
-        element.loop = player.loop && !range.start;
-        // A video that starts on its own has its sound once the reader has
-        // clicked or typed on the page (the browser allows it then); before
-        // that it starts muted, as browsers require, and a click unmutes it.
-        // One playing alongside always starts muted on its own: a page of
-        // living pictures is a quiet one.
-        const activated = navigator.userActivation?.hasBeenActive ?? false;
-        element.muted = player.muted || (auto && (alongside || !activated));
-        const entry = { page, spot, element, shown: false, autoMuted: !player.muted && element.muted, alongside, heldBy: null };
-        // The others make way at once (an exclusive one, still loading, holds
-        // the videos playing alongside from now).
-        players = [...players, entry];
-        makeWayFor(entry);
-        const live = () => players.includes(entry);
-        element.addEventListener("error", () => live() && stopPlayer(entry, "error"));
-        element.addEventListener("loadedmetadata", () => {
-            if (range.start)
-                element.currentTime = range.start;
-        }, { once: true });
-        element.addEventListener("loadeddata", () => {
-            if (!live())
-                return;
-            entry.shown = true;
-            showVideos();
-        }, { once: true });
-        element.addEventListener("play", () => live() && makeWayFor(entry));
-        element.addEventListener("playing", () => live() && report(entry, "playing"));
-        element.addEventListener("pause", () => {
-            if (!live() || element.ended)
-                return;
-            report(entry, "paused");
-            resumeHeld(entry);
-        });
-        const atEnd = () => {
-            if (!live())
-                return;
-            if (player.loop) {
-                element.currentTime = range.start;
-                void element.play().catch(() => { });
-            }
-            else
-                stopPlayer(entry);
-        };
-        element.addEventListener("ended", atEnd);
-        element.addEventListener("timeupdate", () => {
-            if (range.end && element.currentTime >= range.end)
-                atEnd();
-        });
-        // The picture's height on screen: an HLS stream needs no larger variant.
-        const size = viewer.pageSize;
-        const maxHeight = Math.max(Math.hypot(spot.down.x * size.deviceWidth, spot.down.y * size.deviceHeight), Math.hypot(spot.across.x * size.deviceWidth, spot.across.y * size.deviceHeight));
-        void attachVideoSource(element, url, { hls: isHlsVideo(spot.video, url), maxHeight, corsTag: true }).then((release) => {
-            if (!live())
-                return release();
-            entry.release = release;
-            // Held back already (an exclusive video started meanwhile).
-            if (entry.heldBy)
-                return;
-            // The click's gesture lets it play with sound; a browser that still
-            // refuses gets it muted.
-            element.play().catch((err) => {
-                if (!live())
-                    return;
-                if (err?.name === "NotAllowedError" && !element.muted) {
-                    element.muted = true;
-                    entry.autoMuted = !player.muted;
-                    return element.play();
-                }
-                throw err;
-            }).catch(() => live() && stopPlayer(entry, "error"));
-        }, () => live() && stopPlayer(entry, "error"));
-    }
-    /** A click at a point of a page: plays, pauses or resumes the video
-     *  printed there. */
-    function toggleVideoAt(point) {
-        const spot = spotAt(point);
-        if (!spot)
-            return false;
-        const p = playerOf(point.page, spot);
-        if (p)
-            togglePlaying(p);
-        else
-            startVideo(point.page, spot);
-        return true;
-    }
-    /** A click (or Space) on a video playing: one that started on its own
-     *  is unmuted first; otherwise it pauses or resumes. */
-    function togglePlaying(p) {
-        if (p.autoMuted && !p.element.paused) {
-            p.autoMuted = false;
-            p.element.muted = false;
-            return;
-        }
-        if (p.element.paused)
-            void p.element.play().catch(() => { });
-        else
-            p.element.pause();
-    }
-    /** Autoplay waits for the book to settle: a host lays a book out in
-     *  steps (a chapter, then the whole book), and only the spread the reader
-     *  is left looking at counts as shown. */
-    let autoTimer = 0;
-    const scheduleAutoplay = () => {
-        clearTimeout(autoTimer);
-        autoTimer = window.setTimeout(() => {
-            if (!turning)
-                autoplayOn(viewer.state.pages);
-        }, AUTOPLAY_SETTLE_MS);
-    };
-    /**
-     * The videos on show set to play on their own (`player.autoplay`) start,
-     * muted. One playing alongside the others (`exclusive: false`) starts
-     * each time its page comes into view (not while an exclusive video
-     * plays there, nor when the reader asks for less motion); an exclusive
-     * one, the first time its spread is shown and never again in this
-     * viewer, when no other exclusive video is on.
-     */
-    function autoplayOn(pages, { exclusive = true } = {}) {
-        if (options.videos === false)
-            return;
-        const state = {
-            players: players.map((p) => ({ page: p.page, key: p.spot.key, alongside: p.alongside, paused: p.element.paused, shown: p.shown })),
-            autoplayed,
-            autoStarted,
-        };
-        for (const { page, spot } of autoplayPlan(pages, spotsOf, (s) => !!urlOf(s), state, { exclusive, reducedMotion: reducedMotion() })) {
-            if (spot.video.player.exclusive === false)
-                autoStarted.add(autoKey(page, spot.key));
-            else
-                autoplayed.add(spot.key);
-            startVideo(page, spot, true);
-        }
-    }
-    /** A new layout: each video follows its resource to where the layout
-     *  puts it, or stops when it is gone (or, at rest, off the pages on
-     *  show). */
-    function followVideos() {
-        spots = new Map();
-        let moved = false;
-        for (const p of [...players]) {
-            const near = [p.page, ...viewer.state.pages];
-            for (let i = 0; i < current.pages.length; i++)
-                near.push(i);
-            const at = near.find((i) => spotsOf(i).some((s) => s.key === p.spot.key && urlOf(s) === urlOf(p.spot)));
-            if (at === undefined || (!turning && !viewer.state.pages.includes(at))) {
-                stopPlayer(p);
-                continue;
-            }
-            p.page = at;
-            p.spot = spotsOf(at).find((s) => s.key === p.spot.key && urlOf(s) === urlOf(p.spot));
-            moved ||= p.shown;
-        }
-        if (moved)
-            showVideos();
-    }
-    // ── Sharper paintings for the magnifying glass (#527) ──
-    /** Page → its painting for the glass (with its decorations), the page
-     *  as painted without them while it has some (to draw them again from,
-     *  #543), the width it was painted at and the layout it was painted
-     *  from. */
-    const sharp = new Map();
-    let sharpChain = Promise.resolve();
-    /** Pages whose sharp paintings wait to be decorated again (once a
-     *  frame: a drag selects on every move). */
-    const sharpDirty = new Set();
-    let sharpFrame = 0;
-    /** Draws page `i`'s decorations over its painting for the glass, from
-     *  the bare painting (kept while the page has decorations). True when
-     *  it drew some. */
-    function decorateSharp(i, entry) {
-        const draw = options.decorate;
-        const page = entry.doc.pages[i];
-        const ctx = entry.canvas.getContext("2d");
-        if (!draw || !page || !ctx)
-            return false;
-        if (entry.bare) {
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.globalCompositeOperation = "source-over";
-            ctx.globalAlpha = 1;
-            ctx.drawImage(entry.bare, 0, 0);
-        }
-        else {
-            const bare = document.createElement("canvas");
-            bare.width = entry.canvas.width;
-            bare.height = entry.canvas.height;
-            bare.getContext("2d")?.drawImage(entry.canvas, 0, 0);
-            entry.bare = bare;
-        }
-        const inset = Math.max(0, entry.doc.trimOffset);
-        const scale = entry.canvas.width / trimmedSize(page, entry.doc).width;
-        ctx.setTransform(scale, 0, 0, scale, -inset * scale, -inset * scale);
-        ctx.save();
-        const drew = draw(i, ctx);
-        ctx.restore();
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
-        // No decorations: the painting is bare again.
-        if (!drew) {
-            free(entry.bare);
-            entry.bare = null;
-        }
-        return drew;
-    }
-    /** The glass's paintings of these pages decorated again (the selection
-     *  moved), and shown again. */
-    function redecorateSharp() {
-        sharpFrame = 0;
-        for (const i of sharpDirty) {
-            const entry = sharp.get(i);
-            if (!entry || entry.doc !== current)
-                continue;
-            decorateSharp(i, entry);
-            viewer.refreshPage(entry.canvas);
-        }
-        sharpDirty.clear();
-    }
-    /** Page `i` painted `width` px wide for the glass, within 1.5 times the
-     *  page's own resolution and 24 megapixels; one page at a time, each in
-     *  a task of its own (a newspaper page takes a while to paint). */
-    function paintSharp(i, width) {
-        const done = sharpChain.then(() => new Promise((resolve) => {
-            setTimeout(() => {
-                const page = current.pages[i];
-                if (!page)
-                    return resolve(null);
-                const size = trimmedSize(page, current);
-                const w = Math.max(1, Math.min(width, Math.round(size.width * 1.5), Math.floor(Math.sqrt((SHARP_MAX_PIXELS * size.width) / size.height))));
-                const had = sharp.get(i);
-                if (had && had.doc === current && had.width >= w)
-                    return resolve(had.canvas);
-                const canvas = document.createElement("canvas");
-                const scale = w / size.width;
-                renderPageToCanvas(page, current, canvas, { trim: true, scale, singleInk: options.singleInk, pageNegative: options.pageNegative, ...(options.printPreview ? { printPreview: options.printPreview } : {}) });
-                const entry = { canvas, bare: null, width: w, doc: current };
-                // The decorations too (a selection), over the page as painted.
-                decorateSharp(i, entry);
-                if (had)
-                    freeSharp(had);
-                sharp.delete(i);
-                sharp.set(i, entry);
-                // A few pages kept: the spread on show and the one before.
-                for (const [k, v] of sharp) {
-                    if (sharp.size <= 4)
-                        break;
-                    freeSharp(v);
-                    sharp.delete(k);
-                }
-                resolve(canvas);
-            }, 0);
-        }));
-        sharpChain = done.catch(() => undefined);
-        return done;
-    }
-    function freeSharp(entry) {
-        free(entry.canvas);
-        free(entry.bare);
-    }
-    function releaseSharp() {
-        for (const v of sharp.values())
-            freeSharp(v);
-        sharp.clear();
-        sharpDirty.clear();
-        cancelAnimationFrame(sharpFrame);
-        sharpFrame = 0;
-    }
+    const { wanted, paint, free, decorate, refresh, startSweep, around } = createDocumentPainting({
+        options, reach, slotWidth, sources, ds, dlate
+    });
+    const { autoplayed, autoStarted, spotsOf, urlOf, spotAt, stopPlayer, stopVideos, startVideo, toggleVideoAt, togglePlaying, scheduleAutoplay, followVideos } = createDocumentVideos({
+        options, ds, dlate
+    });
+    const { sharp, sharpDirty, redecorateSharp, paintSharp, releaseSharp } = createDocumentSharp({
+        options, free, ds, dlate
+    });
     const first = doc.pages[0];
     const viewer = createFolio(container, {
         ...options,
@@ -721,8 +77,8 @@ export function createFolioFromDocument(container, doc, options = {}) {
         binding: doc.binding === "right" ? "right" : "left",
         paper: options.paper ?? paperOf(doc),
         onTarget: (state) => {
-            focus = state.pages;
-            turning = true;
+            ds.focus = state.pages;
+            ds.turning = true;
             // The sweep first: the pages it keeps are not let go by the refresh.
             startSweep(state.pages);
             refresh(around(state));
@@ -733,46 +89,47 @@ export function createFolioFromDocument(container, doc, options = {}) {
         onChange: (state) => {
             // A video whose page has turned away stops; one set to play on its
             // own starts when its spread is shown (see `autoplayOn`).
-            for (const p of [...players])
+            for (const p of [...ds.players])
                 if (!state.pages.includes(p.page))
                     stopPlayer(p);
             for (const key of [...autoStarted])
                 if (!state.pages.some((i) => key.startsWith(autoKey(i, ""))))
                     autoStarted.delete(key);
             scheduleAutoplay();
-            focus = state.pages;
-            settled = state.pages;
-            turning = false;
+            ds.focus = state.pages;
+            ds.settled = state.pages;
+            ds.turning = false;
             // At rest: the pages the turn carried past are let go.
-            sweep = [];
-            run = null;
-            cancelAnimationFrame(sweepFrame);
+            ds.sweep = [];
+            ds.run = null;
+            cancelAnimationFrame(ds.sweepFrame);
             refresh([]);
             options.onChange?.(state);
         },
         onLayout: (size) => {
             options.onLayout?.(size);
-            if (!ready)
+            if (!ds.ready)
                 return;
             // Painted again once the box stops changing (a dragged divider).
             clearTimeout(resizeTimer);
             resizeTimer = window.setTimeout(() => refresh(around(viewer.state)), RESIZE_SETTLE_MS);
         },
     });
+    Object.assign(dlate, { viewer });
     // The open spread, painted at the slot's size before the first frame.
-    ready = true;
-    focus = viewer.state.pages;
-    settled = viewer.state.pages;
+    ds.ready = true;
+    ds.focus = viewer.state.pages;
+    ds.settled = viewer.state.pages;
     refresh(around(viewer.state));
     scheduleAutoplay();
     // Debugging (`__postextFolioPreserve`, as for the renderer): the videos.
     if (globalThis.__postextFolioPreserve) {
         globalThis.__postextFolioVideos = {
-            playing: () => players,
+            playing: () => ds.players,
             autoplayed,
             spots: (i) => spotsOf(i),
             state: () => viewer.state,
-            turning: () => turning,
+            turning: () => ds.turning,
         };
     }
     // Space plays or pauses the first video on the spread on show.
@@ -780,7 +137,7 @@ export function createFolioFromDocument(container, doc, options = {}) {
         if (event.target !== viewer.element || (event.key !== " " && event.key !== "Enter") || options.videos === false)
             return;
         const on = viewer.state.pages;
-        const shown = players.filter((p) => on.includes(p.page));
+        const shown = ds.players.filter((p) => on.includes(p.page));
         const p = shown.find((x) => !x.alongside) ?? shown[0];
         if (p)
             togglePlaying(p);
@@ -815,7 +172,7 @@ export function createFolioFromDocument(container, doc, options = {}) {
         pointOnScreen: viewer.pointOnScreen,
         setAppearance(next) {
             hostAppearance = { ...hostAppearance, ...next };
-            viewer.setAppearance(appearanceOf(current, hostAppearance));
+            viewer.setAppearance(appearanceOf(ds.current, hostAppearance));
         },
         get pageSize() {
             return viewer.pageSize;
@@ -827,15 +184,15 @@ export function createFolioFromDocument(container, doc, options = {}) {
             if (opts.appearance)
                 hostAppearance = { ...hostAppearance, ...opts.appearance };
             const at = Math.max(0, Math.min(next.pages.length - 1, opts.at ?? viewer.state.pages[0] ?? 0));
-            const before = current;
-            const oldCanvases = canvases;
-            const oldDecorated = decorated;
-            const oldPainted = painted;
-            current = next;
-            canvases = [];
-            decorated = [];
-            painted = new Map();
-            focus = [at];
+            const before = ds.current;
+            const oldCanvases = ds.canvases;
+            const oldDecorated = ds.decorated;
+            const oldPainted = ds.painted;
+            ds.current = next;
+            ds.canvases = [];
+            ds.decorated = [];
+            ds.painted = new Map();
+            ds.focus = [at];
             // A page that reads the same keeps its painting (and its texture):
             // a relayout elsewhere in the book (the plan settling, an edit in
             // another chapter) leaves the open spread as it is.
@@ -845,12 +202,12 @@ export function createFolioFromDocument(container, doc, options = {}) {
                     const canvas = oldCanvases[k];
                     if (!canvas)
                         continue;
-                    canvases[i] = canvas;
-                    painted.set(i, oldPainted.get(k));
+                    ds.canvases[i] = canvas;
+                    ds.painted.set(i, oldPainted.get(k));
                     oldCanvases[k] = null;
                     // Its decorated canvas too (drawn again below, for the new
                     // document's selection).
-                    decorated[i] = oldDecorated[k] ?? null;
+                    ds.decorated[i] = oldDecorated[k] ?? null;
                     oldDecorated[k] = null;
                 }
             }
@@ -858,14 +215,14 @@ export function createFolioFromDocument(container, doc, options = {}) {
             // blank; the old paintings no page took are let go.
             const width = slotWidth();
             for (let i = at - 2; i <= at + 3; i++)
-                if (i >= 0 && i < next.pages.length && painted.get(i) !== width)
+                if (i >= 0 && i < next.pages.length && ds.painted.get(i) !== width)
                     paint(i, width);
             for (const canvas of oldCanvases)
                 if (canvas)
                     canvas.width = canvas.height = 0;
             for (const canvas of oldDecorated)
                 free(canvas);
-            for (const i of painted.keys())
+            for (const i of ds.painted.keys())
                 decorate(i);
             viewer.setAppearance(appearanceOf(next, hostAppearance));
             viewer.setPages(sources(), {
@@ -874,13 +231,13 @@ export function createFolioFromDocument(container, doc, options = {}) {
                 paper: options.paper ?? paperOf(next),
                 at,
             });
-            focus = viewer.state.pages;
+            ds.focus = viewer.state.pages;
             // A relayout while leaves are in the air (the chapter the book was
             // sent to becoming the active one) keeps the pages they carry.
-            if (!turning) {
-                settled = viewer.state.pages;
-                sweep = [];
-                run = null;
+            if (!ds.turning) {
+                ds.settled = viewer.state.pages;
+                ds.sweep = [];
+                ds.run = null;
             }
             refresh(around(viewer.state));
             followVideos();
@@ -889,10 +246,10 @@ export function createFolioFromDocument(container, doc, options = {}) {
         redecorate(pages) {
             const list = pages ? [...pages] : null;
             let swapped = false;
-            for (const i of list ?? [...painted.keys()]) {
-                if (!painted.has(i))
+            for (const i of list ?? [...ds.painted.keys()]) {
+                if (!ds.painted.has(i))
                     continue;
-                const had = decorated[i];
+                const had = ds.decorated[i];
                 if (decorate(i))
                     swapped = true;
                 else if (had)
@@ -904,28 +261,26 @@ export function createFolioFromDocument(container, doc, options = {}) {
             for (const i of list ?? [...sharp.keys()])
                 if (sharp.has(i))
                     sharpDirty.add(i);
-            if (sharpDirty.size && !sharpFrame)
-                sharpFrame = requestAnimationFrame(redecorateSharp);
+            if (sharpDirty.size && !ds.sharpFrame)
+                ds.sharpFrame = requestAnimationFrame(redecorateSharp);
         },
         dispose() {
-            clearTimeout(autoTimer);
+            clearTimeout(ds.autoTimer);
             stopVideos();
-            cancelIdle(idle);
-            cancelAnimationFrame(sweepFrame);
+            cancelIdle(ds.idle);
+            cancelAnimationFrame(ds.sweepFrame);
             clearTimeout(resizeTimer);
             viewer.dispose();
             releaseSharp();
-            for (const canvas of canvases)
+            for (const canvas of ds.canvases)
                 if (canvas)
                     canvas.width = canvas.height = 0;
-            for (const canvas of decorated)
+            for (const canvas of ds.decorated)
                 free(canvas);
-            canvases = [];
-            decorated = [];
-            painted.clear();
+            ds.canvases = [];
+            ds.decorated = [];
+            ds.painted.clear();
         },
     };
 }
-const onIdle = (cb) => typeof requestIdleCallback === "function" ? requestIdleCallback(cb, { timeout: 500 }) : setTimeout(cb, 50);
-const cancelIdle = (id) => (typeof cancelIdleCallback === "function" ? cancelIdleCallback(id) : clearTimeout(id));
 //# sourceMappingURL=postext.js.map