@laminapdf/viewer 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/source/http-range.js

@@ -0,0 +1,284 @@
+// A remote PDF read in the document worker with HTTP Range requests: `@laminapdf/sdk`'s
+// httpRangeSource (tail-first probe, If-Range and ETag checks, the 200 fallback) with what a
+// reader needs on top:
+//
+// - privacy: every request omits credentials and the referrer (ADR 0011 §3), and by default skips
+//   the HTTP cache, so the file is not kept on disk after the tab closes;
+// - a block cache that the render backend reads synchronously (`readSync`, `RenderSource`): PDFium
+//   asks for bytes while it draws, and a miss makes the render throw `data-pending`, after which
+//   the worker fills the ranges asked for and draws again;
+// - readahead, a byte budget (least recently used blocks go first) and progress;
+// - a cap on the whole download a server without range support makes, until large files can be
+//   streamed to OPFS.
+import { httpRangeSource, isLaminaPdfError, LaminaPdfError } from "@laminapdf/sdk";
+// Only docsUrl: the package has no side effects, so the explain pages stay out of the worker.
+import { docsUrl } from "@laminapdf/sdk/explain";
+const DEFAULTS = { blockSize: 65_536, readahead: 1, cacheBytes: 64 * 1024 * 1024, maxWholeBytes: 256 * 1024 * 1024 };
+/**
+ * The fetch every request of the source goes through: no cookies or credentials, no referrer, no
+ * HTTP cache unless asked, CORS mode. Each answer's body is counted as it arrives (the source's
+ * progress), and a full answer is cut off past `maxWholeBytes`, whether it says its length or not
+ * (chunked, or compressed so that its length isn't the file's).
+ */
+function privateFetch(base, noStore, maxWholeBytes, hooks) {
+    return async (input, init) => {
+        const response = await base(input, {
+            ...init,
+            credentials: "omit",
+            referrerPolicy: "no-referrer",
+            mode: "cors",
+            ...(noStore ? { cache: "no-store" } : {}),
+        });
+        const whole = response.status === 200;
+        if (whole) {
+            const length = Number(response.headers.get("Content-Length") ?? Number.NaN);
+            if (Number.isFinite(length) && length > maxWholeBytes) {
+                await response.body?.cancel();
+                throw tooLarge(length, maxWholeBytes);
+            }
+            hooks.whole();
+        }
+        if (response.body === null)
+            return response;
+        let total = 0;
+        const counted = response.body.pipeThrough(new TransformStream({
+            transform(chunk, controller) {
+                total += chunk.length;
+                if (whole && total > maxWholeBytes) {
+                    controller.error(tooLarge(total, maxWholeBytes));
+                    return;
+                }
+                hooks.received(chunk.length);
+                controller.enqueue(chunk);
+            },
+        }));
+        const { status, statusText, headers } = response;
+        return new Response(counted, { status, statusText, headers });
+    };
+}
+function tooLarge(size, budget) {
+    return new LaminaPdfError({
+        code: "source-budget-exceeded",
+        kind: "limit",
+        message: "the server doesn't send parts of the file, and the whole file is larger than the reader downloads",
+        data: { reason: "whole-download", size, budget },
+        docsUrl: docsUrl("source-budget-exceeded"),
+    });
+}
+/** httpRangeSource reports a throwing fetch as `fetch-failed`; the cap's own error is its cause. */
+function unwrapCap(e) {
+    return isLaminaPdfError(e, "fetch-failed") && isLaminaPdfError(e.cause, "source-budget-exceeded") ? e.cause : e;
+}
+/** A remote file as a `RangeSource` (for Lamina PDF) and a `RenderSource` (for the render backend). */
+export class HttpRangeByteSource {
+    size;
+    blockSize;
+    #inner;
+    #readahead;
+    #cacheBytes;
+    #onProgress;
+    /** Cached blocks by index, least recently used first (a Map keeps insertion order). */
+    #blocks = new Map();
+    #cached = 0;
+    /** Blocks being fetched, so two fills never fetch one block twice. */
+    #inFlight = new Map();
+    /** The whole file, when the server sent it whole. */
+    #whole;
+    #loaded = 0;
+    constructor(inner, options) {
+        this.#inner = inner;
+        this.size = inner.size;
+        this.blockSize = Math.max(1, Math.floor(options.blockSize ?? DEFAULTS.blockSize));
+        this.#readahead = Math.max(0, Math.floor(options.readahead ?? DEFAULTS.readahead));
+        this.#cacheBytes = options.cacheBytes ?? DEFAULTS.cacheBytes;
+        this.#onProgress = options.onProgress;
+    }
+    /**
+     * Probes `url` (its last 64 KiB: the size, and the part a reader reads first) and returns the
+     * source. A server that ignores `Range` sends the whole file, which is kept.
+     *
+     * @throws LaminaPdfError `fetch-failed` (`data.reason` `network` covers a refused CORS check,
+     *   which the browser doesn't tell apart from being offline), `source-changed`,
+     *   `source-budget-exceeded`, or the signal's reason.
+     */
+    static async open(url, options = {}) {
+        let whole = false;
+        let received = 0;
+        let source;
+        const fetcher = privateFetch(options.fetch ?? fetch, options.noStore ?? true, options.maxWholeBytes ?? DEFAULTS.maxWholeBytes, {
+            received: (bytes) => {
+                received += bytes;
+                if (source !== undefined)
+                    source.#loaded = received;
+            },
+            whole: () => {
+                whole = true;
+            },
+        });
+        const inner = await httpRangeSource(url, {
+            fetch: fetcher,
+            blockSize: options.blockSize ?? DEFAULTS.blockSize,
+            ...(options.signal === undefined ? {} : { signal: options.signal }),
+        }).catch((e) => {
+            throw unwrapCap(e);
+        });
+        source = new HttpRangeByteSource(inner, options);
+        source.#loaded = received;
+        // The probe's answer was the file: httpRangeSource holds it, and this reads it back once.
+        if (whole)
+            source.#whole = await inner.read(0, inner.size);
+        source.#progress();
+        return source;
+    }
+    /** The whole file, when the server sent it whole (then every read is answered from it). */
+    get whole() {
+        return this.#whole;
+    }
+    /** Bytes received from the network so far (the probe's included), re-fetches of evicted blocks too. */
+    get loaded() {
+        return this.#loaded;
+    }
+    /** The `length` bytes at `offset` if every block is cached, else undefined (`RenderSource`). */
+    readSync(offset, length) {
+        const end = Math.min(this.size, offset + length);
+        if (offset < 0 || end < offset)
+            return undefined;
+        if (this.#whole !== undefined)
+            return this.#whole.subarray(offset, end);
+        const first = Math.floor(offset / this.blockSize);
+        const last = Math.floor((end - 1) / this.blockSize);
+        if (end === offset)
+            return new Uint8Array();
+        if (first === last) {
+            const block = this.#touch(first);
+            if (block === undefined)
+                return undefined;
+            const at = first * this.blockSize;
+            return block.subarray(offset - at, end - at);
+        }
+        const out = new Uint8Array(end - offset);
+        for (let index = first; index <= last; index++) {
+            const block = this.#touch(index);
+            if (block === undefined)
+                return undefined;
+            const at = index * this.blockSize;
+            const from = Math.max(offset, at) - at;
+            const to = Math.min(end, at + block.length) - at;
+            out.set(block.subarray(from, to), at + from - offset);
+        }
+        return out;
+    }
+    /**
+     * Fetches the blocks `ranges` touch (and the readahead after each) that aren't cached: the
+     * ranges of a render backend's `data-pending`.
+     */
+    async fill(ranges, signal) {
+        if (this.#whole !== undefined)
+            return;
+        const wanted = this.#blocksFor(ranges);
+        const waits = [];
+        let run = [];
+        const flush = () => {
+            if (run.length > 0)
+                waits.push(this.#fetchRun(run, signal));
+            run = [];
+        };
+        for (const index of wanted) {
+            const pending = this.#inFlight.get(index);
+            if (pending !== undefined || this.#blocks.has(index)) {
+                flush();
+                if (pending !== undefined)
+                    waits.push(pending);
+                continue;
+            }
+            if (run.length > 0 && run[run.length - 1] !== index - 1)
+                flush();
+            run.push(index);
+        }
+        flush();
+        await Promise.all(waits);
+        // Keep what this fill asked for: evicting it now would make the caller miss again.
+        this.#evict(new Set(wanted));
+    }
+    /** The blocks `ranges` touch, with the readahead after each, in order and once each. */
+    #blocksFor(ranges) {
+        const wanted = new Set();
+        const lastBlock = Math.max(0, Math.ceil(this.size / this.blockSize) - 1);
+        for (const [offset, length] of ranges) {
+            if (length <= 0)
+                continue;
+            const first = Math.floor(offset / this.blockSize);
+            const last = Math.min(lastBlock, Math.floor((offset + length - 1) / this.blockSize) + this.#readahead);
+            for (let index = first; index <= last; index++)
+                wanted.add(index);
+        }
+        return [...wanted].sort((a, b) => a - b);
+    }
+    /** `RangeSource.read`: fills, then reads from the cache. */
+    async read(offset, length, options) {
+        const cached = this.readSync(offset, length);
+        if (cached !== undefined && cached.length === length)
+            return cached.slice();
+        await this.fill([[offset, length]], options?.signal);
+        const bytes = this.readSync(offset, length);
+        if (bytes === undefined)
+            throw new Error("a range read missed blocks it had just fetched");
+        return bytes.slice();
+    }
+    /** Fetches the consecutive blocks `run` in one request. */
+    #fetchRun(run, signal) {
+        const first = run[0] ?? 0;
+        const last = run[run.length - 1] ?? first;
+        const start = first * this.blockSize;
+        const end = Math.min(this.size, (last + 1) * this.blockSize);
+        const fetching = this.#inner.read(start, end - start, signal === undefined ? {} : { signal }).then((bytes) => {
+            for (const index of run) {
+                const at = index * this.blockSize - start;
+                this.#store(index, bytes.slice(at, Math.min(bytes.length, at + this.blockSize)));
+            }
+            this.#progress();
+        }, (e) => {
+            throw unwrapCap(e);
+        });
+        const done = fetching.finally(() => {
+            for (const index of run)
+                if (this.#inFlight.get(index) === done)
+                    this.#inFlight.delete(index);
+        });
+        for (const index of run)
+            this.#inFlight.set(index, done);
+        return done;
+    }
+    #store(index, block) {
+        const old = this.#blocks.get(index);
+        if (old !== undefined)
+            this.#cached -= old.length;
+        this.#blocks.delete(index);
+        this.#blocks.set(index, block);
+        this.#cached += block.length;
+    }
+    /** Block `index`, marked as used now; undefined when it isn't cached. */
+    #touch(index) {
+        const block = this.#blocks.get(index);
+        if (block !== undefined) {
+            this.#blocks.delete(index);
+            this.#blocks.set(index, block);
+        }
+        return block;
+    }
+    /** Drops the least recently used blocks over the budget, never one in `keep`. */
+    #evict(keep) {
+        for (const [index, block] of this.#blocks) {
+            if (this.#cached <= this.#cacheBytes)
+                return;
+            if (keep.has(index))
+                continue;
+            this.#blocks.delete(index);
+            this.#cached -= block.length;
+        }
+    }
+    #progress() {
+        this.#onProgress?.({ loaded: this.#loaded, total: this.size });
+    }
+}
+//# sourceMappingURL=http-range.js.map

package/dist/source/http-range.js.map

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

package/dist/thumbnails/strip.d.ts

@@ -0,0 +1,37 @@
+import type { PageInfo } from "@laminapdf/sdk";
+import type { ViewerClient } from "../client.js";
+import type { OpenedDocument } from "../protocol.js";
+import type { Viewer } from "../view/viewer.js";
+/** How a strip looks and how much it keeps. */
+export interface ThumbnailStripOptions {
+    /** The widest page's thumbnail width in CSS px (default 120). */
+    readonly width?: number;
+    /** Thumbnails mounted past each end of the view (default 4). */
+    readonly margin?: number;
+    /** The bitmap cache's budget in bytes (default 32 MB). */
+    readonly cacheBytes?: number;
+    /**
+     * A thumbnail's accessible name and visible caption: by default its page label, and the
+     * name adds "Page … of …".
+     */
+    readonly label?: (page: PageInfo, count: number) => {
+        readonly caption: string;
+        readonly name: string;
+    };
+    /** The list's own accessible name (default "Pages"). */
+    readonly name?: string;
+}
+/** The pages as thumbnails. Make one with `new ThumbnailStrip(client, viewer)`, then `mount` and `open`. */
+export declare class ThumbnailStrip {
+    #private;
+    /** The scrolling list (`role=listbox`); size it with CSS. */
+    readonly element: HTMLElement;
+    constructor(client: ViewerClient, viewer: Viewer, options?: ThumbnailStripOptions);
+    /** Puts the strip in `container`. */
+    mount(container: HTMLElement): void;
+    /** Shows `document`'s pages (the one the viewer opened). */
+    open(document: OpenedDocument): void;
+    /** Takes the strip down: renders aborted, canvases and bitmaps freed, listeners removed. */
+    destroy(): void;
+}
+//# sourceMappingURL=strip.d.ts.map

package/dist/thumbnails/strip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"strip.d.ts","sourceRoot":"","sources":["../../src/thumbnails/strip.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,0DAA0D;IAC1D,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK;QAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACxG,wDAAwD;IACxD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;CACxB;AAyBD,4GAA4G;AAC5G,qBAAa,cAAc;;IACzB,6DAA6D;IAC7D,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAoB9B,YAAY,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAE,qBAA0B,EA4BpF;IAED,qCAAqC;IACrC,KAAK,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAGlC;IAED,4DAA4D;IAC5D,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CASnC;IAED,4FAA4F;IAC5F,OAAO,IAAI,IAAI,CAMd;CAkNF"}

package/dist/thumbnails/strip.js

@@ -0,0 +1,313 @@
+// The thumbnails strip: one small picture per page in a scrolling list, the
+// current page marked, a click or Enter going there. Like the viewer it mounts only the
+// thumbnails in view and a few either side (the same `PageLayout` at thumbnail scale), each with
+// a canvas from its own small pool, rendered at `background` priority so the main view's pages
+// always come first; a thumbnail scrolled away aborts its render. Bitmaps stay in a cache of their
+// own (32 MB by default), so scrolling back costs nothing. Framework-free; styles are set through
+// the CSSOM, which a `style-src 'self'` policy allows.
+import { BitmapCache } from "../canvas/cache.js";
+import { CanvasPool } from "../canvas/pool.js";
+import { PageLayout, rotated } from "../layout/page-layout.js";
+/** Space for the caption under each thumbnail, and between thumbnails, in CSS px. */
+const CAPTION = 20;
+const GAP = 12;
+/** The default caption (the page label, else the number) and name. */
+function defaultLabel(page, count) {
+    const number = String(page.index + 1);
+    const caption = page.label ?? number;
+    const name = caption === number ? `Page ${number} of ${count}` : `Page ${caption} (${number} of ${count})`;
+    return { caption, name };
+}
+/** The pages as thumbnails. Make one with `new ThumbnailStrip(client, viewer)`, then `mount` and `open`. */
+export class ThumbnailStrip {
+    /** The scrolling list (`role=listbox`); size it with CSS. */
+    element;
+    #client;
+    #viewer;
+    #width;
+    #margin;
+    #label;
+    #spacer;
+    #pool = new CanvasPool({ max: 32, maxPixels: 8 * 1024 * 1024 });
+    #cache;
+    #items = new Map();
+    #cleanup = [];
+    #document;
+    #layout;
+    #rotation = 0;
+    /** The page the viewer shows, marked selected. */
+    #current = 0;
+    /** The page that takes Tab (roving focus). */
+    #focus = 0;
+    #frame;
+    constructor(client, viewer, options = {}) {
+        this.#client = client;
+        this.#viewer = viewer;
+        this.#width = options.width ?? 120;
+        this.#margin = options.margin ?? 4;
+        this.#label = options.label ?? defaultLabel;
+        this.#cache = new BitmapCache(options.cacheBytes ?? 32 * 1024 * 1024);
+        const root = document.createElement("div");
+        root.className = "lamina-thumbnails";
+        root.setAttribute("role", "listbox");
+        root.setAttribute("aria-label", options.name ?? "Pages");
+        Object.assign(root.style, { position: "relative", overflowY: "auto", overflowX: "hidden" });
+        this.#spacer = document.createElement("div");
+        this.#spacer.style.position = "relative";
+        root.append(this.#spacer);
+        this.element = root;
+        const on = (type, f) => {
+            root.addEventListener(type, f);
+            this.#cleanup.push(() => root.removeEventListener(type, f));
+        };
+        on("scroll", () => this.#schedule());
+        on("click", (e) => this.#clicked(e));
+        on("keydown", (e) => this.#key(e));
+        this.#cleanup.push(viewer.subscribe(() => this.#viewChanged()));
+        // A strip shown later (its tab opened, its sheet raised) mounts what it now shows.
+        const resized = new ResizeObserver(() => this.#schedule());
+        resized.observe(root);
+        this.#cleanup.push(() => resized.disconnect());
+    }
+    /** Puts the strip in `container`. */
+    mount(container) {
+        container.append(this.element);
+        this.#schedule();
+    }
+    /** Shows `document`'s pages (the one the viewer opened). */
+    open(document) {
+        this.#unmountAll();
+        this.#cache.clear();
+        this.#document = document;
+        this.#current = 0;
+        this.#focus = 0;
+        this.#rotation = this.#viewer.getState().rotation;
+        this.element.scrollTop = 0;
+        this.#relayout();
+    }
+    /** Takes the strip down: renders aborted, canvases and bitmaps freed, listeners removed. */
+    destroy() {
+        if (this.#frame !== undefined)
+            cancelAnimationFrame(this.#frame);
+        this.#unmountAll();
+        this.#cache.clear();
+        for (const f of this.#cleanup.splice(0))
+            f();
+        this.element.remove();
+    }
+    // --- internals ---
+    #relayout() {
+        const pages = this.#document?.pages ?? [];
+        const widest = Math.max(1, ...pages.map((p) => rotated(p, this.#rotation).width));
+        this.#layout = new PageLayout(pages, { scale: this.#width / widest, rotation: this.#rotation, gap: GAP + CAPTION });
+        this.#spacer.style.height = `${this.#layout.height}px`;
+        this.#unmountAll();
+        this.#schedule();
+    }
+    #viewChanged() {
+        const state = this.#viewer.getState();
+        if (state.rotation !== this.#rotation) {
+            this.#rotation = state.rotation;
+            this.#relayout();
+        }
+        if (state.currentPage === this.#current || this.#document === undefined)
+            return;
+        this.#current = state.currentPage;
+        // Tab lands on the current page, unless focus is already in the list.
+        if (!this.element.contains(document.activeElement))
+            this.#focus = this.#current;
+        this.#reveal(this.#current);
+        this.#schedule();
+    }
+    /** Scrolls the strip just enough to show page `index`'s thumbnail. */
+    #reveal(index) {
+        const layout = this.#layout;
+        if (layout === undefined || index >= layout.pageCount)
+            return;
+        const top = layout.offsetOf(index) - GAP;
+        const bottom = top + layout.heights[index] + CAPTION + 2 * GAP;
+        const view = this.element;
+        if (top < view.scrollTop)
+            view.scrollTop = top;
+        else if (bottom > view.scrollTop + view.clientHeight)
+            view.scrollTop = bottom - view.clientHeight;
+    }
+    #schedule() {
+        if (this.#frame !== undefined)
+            return;
+        this.#frame = requestAnimationFrame(() => {
+            this.#frame = undefined;
+            this.#update();
+        });
+    }
+    #update() {
+        const layout = this.#layout;
+        if (layout === undefined || layout.pageCount === 0)
+            return;
+        // Nothing renders while the strip is out of the page or hidden (its tab not shown).
+        if (!this.element.isConnected || this.element.clientHeight === 0)
+            return;
+        const top = this.element.scrollTop;
+        const view = layout.rangeIn(top, top + Math.max(1, this.element.clientHeight));
+        const first = Math.max(0, view.first - this.#margin);
+        const last = Math.min(layout.pageCount - 1, view.last + this.#margin);
+        for (const [index, item] of this.#items)
+            if (index < first || index > last)
+                this.#unmount(item);
+        for (let index = first; index <= last; index++) {
+            const item = this.#items.get(index) ?? this.#mount(index, layout);
+            this.#mark(item);
+            if (!item.done && item.abort === undefined)
+                void this.#draw(item, layout);
+        }
+    }
+    #mount(index, layout) {
+        const page = this.#document?.pages[index];
+        const { caption, name } = this.#label(page, layout.pageCount);
+        const root = document.createElement("div");
+        root.className = "lamina-thumbnail";
+        root.setAttribute("role", "option");
+        root.setAttribute("aria-label", name);
+        root.setAttribute("aria-posinset", String(index + 1));
+        root.setAttribute("aria-setsize", String(layout.pageCount));
+        root.dataset.pageIndex = String(index);
+        const width = layout.widths[index];
+        const height = layout.heights[index];
+        Object.assign(root.style, {
+            position: "absolute",
+            top: `${layout.offsetOf(index) - GAP / 2}px`,
+            left: "0",
+            right: "0",
+            height: `${height + CAPTION + GAP}px`,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            paddingTop: `${GAP / 2}px`,
+        });
+        const frame = document.createElement("div");
+        frame.className = "lamina-thumbnail-page";
+        Object.assign(frame.style, { width: `${width}px`, height: `${height}px`, flex: "none" });
+        const label = document.createElement("div");
+        label.className = "lamina-thumbnail-label";
+        label.textContent = caption;
+        label.setAttribute("aria-hidden", "true");
+        root.append(frame, label);
+        this.#spacer.append(root);
+        const item = { index, root, frame, canvas: undefined, abort: undefined, done: false };
+        this.#items.set(index, item);
+        return item;
+    }
+    /** Sets `item`'s selected state and whether Tab reaches it. */
+    #mark(item) {
+        item.root.setAttribute("aria-selected", String(item.index === this.#current));
+        item.root.tabIndex = item.index === this.#focus ? 0 : -1;
+    }
+    async #draw(item, layout) {
+        const ratio = globalThis.devicePixelRatio || 1;
+        const scale = layout.scale * ratio;
+        const key = `${this.#client.document?.id ?? 0}:${item.index}:${layout.rotation}:${scale.toFixed(4)}`;
+        let bitmap = this.#cache.get(key);
+        let owned = false;
+        if (bitmap === undefined) {
+            const abort = new AbortController();
+            item.abort = abort;
+            try {
+                const rendered = await this.#client.render({ page: item.index, scale, rotation: layout.rotation }, { priority: "background", signal: abort.signal });
+                bitmap = rendered.bitmap;
+            }
+            catch (error) {
+                // Scrolled away or a new document: drawn again if it comes back into view.
+                if (abort.signal.aborted)
+                    return;
+                // A failed render keeps its placeholder, and isn't asked for again while mounted.
+                item.done = true;
+                reportError(error);
+                return;
+            }
+            finally {
+                if (item.abort === abort)
+                    item.abort = undefined;
+            }
+            if (abort.signal.aborted || this.#items.get(item.index) !== item || this.#layout !== layout) {
+                bitmap.close();
+                return;
+            }
+            owned = !this.#cache.set(key, item.index, bitmap, this.#current);
+        }
+        this.#paint(item, bitmap, layout);
+        if (owned)
+            bitmap.close();
+    }
+    #paint(item, bitmap, layout) {
+        const canvas = item.canvas ?? this.#pool.acquire();
+        if (canvas === undefined)
+            return;
+        item.canvas = canvas;
+        const size = this.#pool.fit(canvas, bitmap.width, bitmap.height);
+        canvas.width = size.width;
+        canvas.height = size.height;
+        Object.assign(canvas.style, {
+            display: "block",
+            width: `${layout.widths[item.index]}px`,
+            height: `${layout.heights[item.index]}px`,
+        });
+        canvas.getContext("2d")?.drawImage(bitmap, 0, 0, size.width, size.height);
+        if (canvas.parentElement !== item.frame)
+            item.frame.append(canvas);
+        item.done = true;
+    }
+    #unmount(item) {
+        item.abort?.abort();
+        if (item.canvas !== undefined)
+            this.#pool.release(item.canvas);
+        item.root.remove();
+        this.#items.delete(item.index);
+    }
+    #unmountAll() {
+        for (const item of [...this.#items.values()])
+            this.#unmount(item);
+    }
+    #clicked(e) {
+        const target = e.target?.closest(".lamina-thumbnail");
+        const index = Number(target?.dataset.pageIndex);
+        if (target === null || target === undefined || !Number.isInteger(index))
+            return;
+        this.#go(index);
+    }
+    /** Arrow keys, Home and End move focus; Enter and Space go to the focused page. */
+    #key(e) {
+        const count = this.#layout?.pageCount ?? 0;
+        if (count === 0)
+            return;
+        const moves = {
+            ArrowDown: this.#focus + 1,
+            ArrowUp: this.#focus - 1,
+            Home: 0,
+            End: count - 1,
+        };
+        const next = moves[e.key];
+        if (next !== undefined) {
+            e.preventDefault();
+            this.#moveFocus(Math.min(count - 1, Math.max(0, next)));
+        }
+        else if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.#go(this.#focus);
+        }
+    }
+    #moveFocus(index) {
+        this.#focus = index;
+        this.#reveal(index);
+        // The item may not be mounted yet: mount the range now, then focus it.
+        this.#update();
+        const item = this.#items.get(index);
+        for (const other of this.#items.values())
+            this.#mark(other);
+        item?.root.focus();
+    }
+    #go(index) {
+        this.#focus = index;
+        this.#viewer.goToPage(index);
+    }
+}
+//# sourceMappingURL=strip.js.map