genus-pdf-viewer 0.2.3 → 0.2.10

package/dist/viewer.js

@@ -1,6 +1,8 @@
-import * as pdfjsLib from "pdfjs-dist";
+import * as pdfjsLib from "pdfjs-dist/legacy/build/pdf.mjs";
 import { VIEWER_STYLES } from "./styles.js";
 const GENUS_PDF_VIEWER_TAG = "genus-pdf-viewer";
+export const PDF_WORKER_BOOTSTRAP_ASSET_PATH = "assets/pdf.worker.bootstrap.mjs";
+const IOS_CANVAS_PIXEL_LIMIT = 16_777_216;
 const DEFAULT_CONFIG = {
     page: 1,
     zoom: 1,
@@ -72,21 +74,232 @@ function resolveTitle(config) {
     }
     return "PDF viewer";
 }
-async function toDocumentParameters(config) {
+function resolveSourceHref(source) {
+    if (typeof source === "string") {
+        return source;
+    }
+    if (source instanceof URL) {
+        return source.toString();
+    }
+    return null;
+}
+function resolveProxyEndpoint(config, sourceHref) {
+    if (config.proxyUrl === false) {
+        return null;
+    }
+    if (typeof config.proxyUrl === "string" && config.proxyUrl) {
+        return config.proxyUrl;
+    }
+    return isCrossOriginSource(sourceHref) ? "/__proxy" : null;
+}
+function resolveEffectiveSourceHref(config, proxyPreference = "auto") {
+    const sourceHref = resolveSourceHref(config.src);
+    if (!sourceHref) {
+        return null;
+    }
+    if (proxyPreference === "never") {
+        return sourceHref;
+    }
+    const proxyEndpoint = resolveProxyEndpoint(config, sourceHref);
+    if (!proxyEndpoint) {
+        return sourceHref;
+    }
+    try {
+        const proxyUrl = new URL(proxyEndpoint, typeof window === "undefined" ? "http://localhost" : window.location.href);
+        proxyUrl.searchParams.set("url", sourceHref);
+        return proxyUrl.toString();
+    }
+    catch {
+        const separator = proxyEndpoint.includes("?") ? "&" : "?";
+        return `${proxyEndpoint}${separator}url=${encodeURIComponent(sourceHref)}`;
+    }
+}
+function isAppleMobileBrowser() {
+    if (typeof navigator === "undefined") {
+        return false;
+    }
+    const userAgent = navigator.userAgent ?? "";
+    const platform = navigator.platform ?? "";
+    return (/iPad|iPhone|iPod/i.test(userAgent) ||
+        (/Mac/i.test(platform) && (navigator.maxTouchPoints ?? 0) > 1));
+}
+function getPdfJsRuntimeOptions() {
+    if (!isAppleMobileBrowser()) {
+        return {};
+    }
+    return {
+        isOffscreenCanvasSupported: false,
+        isImageDecoderSupported: false,
+    };
+}
+function getCanvasOutputScale(width, height) {
+    const devicePixelRatio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+    if (!isAppleMobileBrowser()) {
+        return devicePixelRatio;
+    }
+    const pixelArea = Math.max(width * height, 1);
+    const maxScale = Math.sqrt(IOS_CANVAS_PIXEL_LIMIT / pixelArea);
+    return Math.min(devicePixelRatio, maxScale);
+}
+function iconLabelMarkup(svg, label) {
+    return `<span class="button-icon" aria-hidden="true">${svg}</span><span class="button-label">${label}</span>`;
+}
+function openUrl(url) {
+    const openedWindow = window.open(url, "_blank", "noopener,noreferrer");
+    if (!openedWindow) {
+        window.location.href = url;
+    }
+}
+function releaseObjectUrl(href) {
+    window.setTimeout(() => {
+        URL.revokeObjectURL(href);
+    }, 1_000);
+}
+function triggerDownload(href, filename) {
+    const link = document.createElement("a");
+    link.href = href;
+    link.download = filename;
+    link.rel = "noopener";
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+}
+async function tryNativeFileDownload(blob, filename) {
+    if (typeof navigator === "undefined" || typeof File === "undefined") {
+        return false;
+    }
+    if (typeof navigator.share !== "function") {
+        return false;
+    }
+    try {
+        const file = new File([blob], filename, { type: blob.type || "application/pdf" });
+        if (typeof navigator.canShare === "function" && !navigator.canShare({ files: [file] })) {
+            return false;
+        }
+        await navigator.share({
+            title: filename,
+            files: [file],
+        });
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function shouldUseCompactToolbarUi() {
+    return isAppleMobileBrowser();
+}
+function ensurePromiseCompat() {
+    const promiseCtor = Promise;
+    if (typeof promiseCtor.try !== "function") {
+        promiseCtor.try = (callback, ...args) => new Promise((resolve, reject) => {
+            try {
+                resolve(callback(...args));
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    }
+    if (typeof promiseCtor.withResolvers !== "function") {
+        promiseCtor.withResolvers = () => {
+            let resolve;
+            let reject;
+            const promise = new Promise((promiseResolve, promiseReject) => {
+                resolve = promiseResolve;
+                reject = promiseReject;
+            });
+            return {
+                promise,
+                resolve,
+                reject,
+            };
+        };
+    }
+}
+function ensureUrlParseCompat() {
+    const urlCtor = URL;
+    if (typeof URL === "undefined" || typeof urlCtor.parse === "function") {
+        return;
+    }
+    urlCtor.parse = (input, base) => {
+        try {
+            if (typeof base === "undefined") {
+                return new URL(input);
+            }
+            return new URL(input, base);
+        }
+        catch {
+            return null;
+        }
+    };
+}
+function ensurePdfJsCompat() {
+    ensurePromiseCompat();
+    ensureUrlParseCompat();
+}
+function isUnbundledPackageModuleUrl(moduleUrl) {
+    try {
+        const { pathname } = new URL(moduleUrl);
+        return /\/(?:index|viewer)\.js$/.test(pathname);
+    }
+    catch {
+        return false;
+    }
+}
+export function resolveDefaultPdfWorkerSrc(options = {}) {
+    const moduleUrl = options.moduleUrl ?? import.meta.url;
+    const packageRelativeWorkerUrl = new URL("./pdf.worker.bootstrap.mjs", moduleUrl).toString();
+    if (isUnbundledPackageModuleUrl(moduleUrl)) {
+        return packageRelativeWorkerUrl;
+    }
+    const baseUri = options.baseUri ??
+        (typeof document !== "undefined" ? document.baseURI : undefined) ??
+        (typeof location !== "undefined" ? location.href : undefined);
+    return baseUri
+        ? new URL(PDF_WORKER_BOOTSTRAP_ASSET_PATH, baseUri).toString()
+        : packageRelativeWorkerUrl;
+}
+async function createDocumentData(config) {
+    if (config.src instanceof Blob) {
+        return new Uint8Array(await config.src.arrayBuffer());
+    }
+    if (config.src instanceof Uint8Array) {
+        return new Uint8Array(config.src);
+    }
+    return null;
+}
+async function toDocumentParameters(config, proxyPreference = "auto") {
+    const runtimeOptions = getPdfJsRuntimeOptions();
+    const data = await createDocumentData(config);
+    if (data) {
+        return {
+            data,
+            disableRange: true,
+            disableStream: true,
+            disableAutoFetch: true,
+            stopAtErrors: true,
+            ...runtimeOptions,
+        };
+    }
     if (typeof config.src === "string") {
+        const url = resolveEffectiveSourceHref(config, proxyPreference);
         return {
-            url: config.src,
+            url: url ?? config.src,
             withCredentials: config.withCredentials,
             httpHeaders: config.httpHeaders,
             stopAtErrors: true,
+            ...runtimeOptions,
         };
     }
     if (config.src instanceof URL) {
+        const url = resolveEffectiveSourceHref(config, proxyPreference);
         return {
-            url: config.src.toString(),
+            url: url ?? config.src.toString(),
             withCredentials: config.withCredentials,
             httpHeaders: config.httpHeaders,
             stopAtErrors: true,
+            ...runtimeOptions,
         };
     }
     if (config.src instanceof Blob) {
@@ -96,6 +309,7 @@ async function toDocumentParameters(config) {
             disableStream: true,
             disableAutoFetch: true,
             stopAtErrors: true,
+            ...runtimeOptions,
         };
     }
     return {
@@ -104,6 +318,7 @@ async function toDocumentParameters(config) {
         disableStream: true,
         disableAutoFetch: true,
         stopAtErrors: true,
+        ...runtimeOptions,
     };
 }
 async function createBlobFromSource(config) {
@@ -113,32 +328,183 @@ async function createBlobFromSource(config) {
     if (config.src instanceof Uint8Array) {
         return new Blob([new Uint8Array(config.src)], { type: "application/pdf" });
     }
-    const href = typeof config.src === "string"
-        ? config.src
-        : config.src instanceof URL
-            ? config.src.toString()
-            : null;
+    const response = await fetchSourceResponse(config);
+    if (!response) {
+        return null;
+    }
+    return response.blob();
+}
+function emitViewerEvent(element, type, detail) {
+    element.dispatchEvent(new CustomEvent(`genus-${type}`, {
+        bubbles: true,
+        detail,
+    }));
+}
+function getErrorName(error) {
+    if (typeof error === "object" &&
+        error !== null &&
+        "name" in error &&
+        typeof error.name === "string") {
+        return error.name;
+    }
+    return "";
+}
+function getRawErrorMessage(error) {
+    if (error instanceof Error && error.message) {
+        return error.message;
+    }
+    if (typeof error === "object" &&
+        error !== null &&
+        "message" in error &&
+        typeof error.message === "string") {
+        return error.message;
+    }
+    if (typeof error === "string") {
+        return error;
+    }
+    return "";
+}
+function isLikelyCorsError(error) {
+    const message = getRawErrorMessage(error).toLowerCase();
+    const name = getErrorName(error).toLowerCase();
+    return (message.includes("access-control") ||
+        message.includes("cross-origin") ||
+        message.includes("cors") ||
+        message.includes("credential is not supported") ||
+        message.includes("origin ") ||
+        name.includes("cors"));
+}
+function isLikelyNetworkLoadError(error) {
+    const name = getErrorName(error).toLowerCase();
+    const message = getRawErrorMessage(error).toLowerCase();
+    return (name.includes("network") ||
+        name === "unknownerrorexception" ||
+        message.includes("load failed") ||
+        message.includes("failed to fetch") ||
+        message.includes("networkerror") ||
+        message.includes("unexpected server response (0)") ||
+        message.includes("fetch"));
+}
+function isCrossOriginSource(href) {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    try {
+        return new URL(href, window.location.href).origin !== window.location.origin;
+    }
+    catch {
+        return false;
+    }
+}
+function resolveFetchCredentials(href, withCredentials) {
+    if (withCredentials) {
+        return "include";
+    }
+    return isCrossOriginSource(href) ? "omit" : "same-origin";
+}
+function resolveFetchMode(href) {
+    return isCrossOriginSource(href) ? "cors" : "same-origin";
+}
+async function fetchSourceResponse(config, proxyPreference = "auto") {
+    const href = resolveEffectiveSourceHref(config, proxyPreference);
     if (!href || typeof fetch === "undefined") {
         return null;
     }
     const response = await fetch(href, {
         headers: config.httpHeaders,
-        credentials: config.withCredentials ? "include" : "same-origin",
+        credentials: resolveFetchCredentials(href, config.withCredentials),
+        mode: resolveFetchMode(href),
     });
     if (!response.ok) {
         return null;
     }
-    return response.blob();
+    return response;
 }
-function emitViewerEvent(element, type, detail) {
-    element.dispatchEvent(new CustomEvent(`genus-${type}`, {
-        bubbles: true,
-        detail,
-    }));
+async function fetchDocumentDataViaXhr(config, proxyPreference = "auto") {
+    const href = resolveEffectiveSourceHref(config, proxyPreference);
+    if (!href || typeof XMLHttpRequest === "undefined") {
+        return null;
+    }
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("GET", href, true);
+        xhr.responseType = "arraybuffer";
+        xhr.withCredentials = Boolean(config.withCredentials);
+        for (const [key, value] of Object.entries(config.httpHeaders ?? {})) {
+            xhr.setRequestHeader(key, value);
+        }
+        xhr.onload = () => {
+            if ((xhr.status === 200 || xhr.status === 206) && xhr.response instanceof ArrayBuffer) {
+                resolve(new Uint8Array(xhr.response));
+                return;
+            }
+            resolve(null);
+        };
+        xhr.onerror = () => {
+            reject(new TypeError("Load failed"));
+        };
+        xhr.onabort = () => {
+            reject(new TypeError("Load failed"));
+        };
+        xhr.send();
+    });
+}
+async function fetchDocumentDataFromSource(config, proxyPreference = "auto") {
+    try {
+        const response = await fetchSourceResponse(config, proxyPreference);
+        if (response) {
+            return new Uint8Array(await response.arrayBuffer());
+        }
+    }
+    catch {
+        // Fall through to the XHR loader, which is often more reliable on Safari.
+    }
+    return fetchDocumentDataViaXhr(config, proxyPreference);
+}
+function createErrorDetail(config, error) {
+    const sourceUrl = resolveSourceHref(config.src) ?? undefined;
+    const rawMessage = getRawErrorMessage(error);
+    if (sourceUrl && isLikelyNetworkLoadError(error)) {
+        if (isCrossOriginSource(sourceUrl) && isLikelyCorsError(error)) {
+            return {
+                error,
+                code: "cors",
+                sourceUrl,
+                message: `Failed to load PDF from ${sourceUrl}. The remote server blocked this origin. Allow CORS for your app origin or pass Blob/Uint8Array PDF data instead of a URL.`,
+            };
+        }
+        return {
+            error,
+            code: "network",
+            sourceUrl,
+            message: `Failed to load PDF from ${sourceUrl}. Check the URL, auth headers, and network access.`,
+        };
+    }
+    return {
+        error,
+        code: "unknown",
+        sourceUrl,
+        message: rawMessage || "Failed to load PDF.",
+    };
+}
+function shouldAttemptNativeUrlFallback(config, error) {
+    return Boolean(isAppleMobileBrowser() &&
+        resolveSourceHref(config.src) &&
+        (isLikelyNetworkLoadError(error) || isLikelyCorsError(error)));
 }
 export class GenusPdfViewerElement extends HTMLElement {
     static get observedAttributes() {
-        return ["src", "title", "page", "zoom", "fit", "continuous", "toolbar", "download"];
+        return [
+            "src",
+            "title",
+            "page",
+            "zoom",
+            "fit",
+            "continuous",
+            "toolbar",
+            "download",
+            "proxy-url",
+        ];
     }
     #config = null;
     #document = null;
@@ -146,6 +512,8 @@ export class GenusPdfViewerElement extends HTMLElement {
     #pageCount = 0;
     #loadVersion = 0;
     #renderVersion = 0;
+    #isUsingNativeViewer = false;
+    #resizeObserver = null;
     #shadow = this.attachShadow({ mode: "open" });
     #toolbar = document.createElement("div");
     #navGroup = document.createElement("div");
@@ -162,6 +530,8 @@ export class GenusPdfViewerElement extends HTMLElement {
     #stage = document.createElement("div");
     #status = document.createElement("div");
     #handleResize = () => {
+        this.#syncInteractionMode();
+        this.#syncContainerSize();
         if (!this.#document || !this.#config) {
             return;
         }
@@ -187,6 +557,11 @@ export class GenusPdfViewerElement extends HTMLElement {
     };
     constructor() {
         super();
+        if (typeof ResizeObserver !== "undefined") {
+            this.#resizeObserver = new ResizeObserver(() => {
+                this.#handleResize();
+            });
+        }
         const style = document.createElement("style");
         style.textContent = VIEWER_STYLES;
         const shell = document.createElement("div");
@@ -198,33 +573,49 @@ export class GenusPdfViewerElement extends HTMLElement {
         this.#pageValue.className = "value";
         this.#zoomValue.className = "value";
         this.#prevButton.type = "button";
-        this.#prevButton.textContent = "Prev";
+        this.#prevButton.className = "compact";
+        this.#prevButton.setAttribute("aria-label", "Previous page");
+        this.#prevButton.title = "Previous page";
+        this.#prevButton.innerHTML = iconLabelMarkup('<svg viewBox="0 0 24 24" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"></path></svg>', "Prev");
         this.#prevButton.addEventListener("click", () => {
             void this.prevPage();
         });
         this.#nextButton.type = "button";
-        this.#nextButton.textContent = "Next";
+        this.#nextButton.className = "compact";
+        this.#nextButton.setAttribute("aria-label", "Next page");
+        this.#nextButton.title = "Next page";
+        this.#nextButton.innerHTML = iconLabelMarkup('<svg viewBox="0 0 24 24" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>', "Next");
         this.#nextButton.addEventListener("click", () => {
             void this.nextPage();
         });
         this.#zoomOutButton.type = "button";
         this.#zoomOutButton.textContent = "−";
+        this.#zoomOutButton.setAttribute("aria-label", "Zoom out");
+        this.#zoomOutButton.title = "Zoom out";
         this.#zoomOutButton.addEventListener("click", () => {
             void this.zoomOut();
         });
         this.#zoomInButton.type = "button";
         this.#zoomInButton.textContent = "+";
+        this.#zoomInButton.setAttribute("aria-label", "Zoom in");
+        this.#zoomInButton.title = "Zoom in";
         this.#zoomInButton.addEventListener("click", () => {
             void this.zoomIn();
         });
         this.#resetZoomButton.type = "button";
-        this.#resetZoomButton.textContent = "100%";
+        this.#resetZoomButton.className = "compact";
+        this.#resetZoomButton.setAttribute("aria-label", "Reset zoom");
+        this.#resetZoomButton.title = "Reset zoom";
+        this.#resetZoomButton.innerHTML = iconLabelMarkup('<svg viewBox="0 0 24 24" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3.2-6.9"></path><path d="M21 3v6h-6"></path></svg>', "100%");
         this.#resetZoomButton.addEventListener("click", () => {
             void this.setZoom(1);
         });
         this.#downloadButton.type = "button";
-        this.#downloadButton.textContent = "Download";
-        this.#downloadButton.className = "primary";
+        this.#downloadButton.className = "primary icon-button";
+        this.#downloadButton.setAttribute("aria-label", "Download PDF");
+        this.#downloadButton.title = "Download PDF";
+        this.#downloadButton.innerHTML =
+            '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v11"></path><path d="m7 11 5 5 5-5"></path><path d="M5 21h14"></path></svg>';
         this.#downloadButton.addEventListener("click", () => {
             void this.download();
         });
@@ -241,6 +632,9 @@ export class GenusPdfViewerElement extends HTMLElement {
     }
     connectedCallback() {
         window.addEventListener("resize", this.#handleResize);
+        this.#observeResizeTargets();
+        this.#syncInteractionMode();
+        this.#syncContainerSize();
         if (!this.#config) {
             const attributeConfig = this.#configFromAttributes();
             if (attributeConfig) {
@@ -257,6 +651,7 @@ export class GenusPdfViewerElement extends HTMLElement {
     }
     disconnectedCallback() {
         window.removeEventListener("resize", this.#handleResize);
+        this.#resizeObserver?.disconnect();
         void this.#teardownDocument();
     }
     attributeChangedCallback() {
@@ -285,6 +680,7 @@ export class GenusPdfViewerElement extends HTMLElement {
         const sourceChanged = !previous ||
             !isSameSource(previous.src, nextConfig.src) ||
             previous.workerSrc !== nextConfig.workerSrc ||
+            previous.proxyUrl !== nextConfig.proxyUrl ||
             previous.withCredentials !== nextConfig.withCredentials ||
             !sameHeaders(previous.httpHeaders, nextConfig.httpHeaders);
         if (sourceChanged) {
@@ -318,7 +714,7 @@ export class GenusPdfViewerElement extends HTMLElement {
         await this.#loadAndRender();
     }
     async goToPage(page) {
-        if (!this.#config) {
+        if (!this.#config || this.#isUsingNativeViewer) {
             return;
         }
         const nextPage = clampPage(page, this.#pageCount || Number.MAX_SAFE_INTEGER);
@@ -342,13 +738,13 @@ export class GenusPdfViewerElement extends HTMLElement {
         await this.goToPage((this.#config.page ?? DEFAULT_CONFIG.page) + 1);
     }
     async prevPage() {
-        if (!this.#config) {
+        if (!this.#config || this.#isUsingNativeViewer) {
             return;
         }
         await this.goToPage((this.#config.page ?? DEFAULT_CONFIG.page) - 1);
     }
     async setZoom(zoom) {
-        if (!this.#config) {
+        if (!this.#config || this.#isUsingNativeViewer) {
             return;
         }
         const nextZoom = clampZoom(zoom, this.#config.minZoom ?? DEFAULT_CONFIG.minZoom, this.#config.maxZoom ?? DEFAULT_CONFIG.maxZoom);
@@ -358,14 +754,14 @@ export class GenusPdfViewerElement extends HTMLElement {
         emitViewerEvent(this, "zoomchange", { zoom: nextZoom });
     }
     async zoomIn() {
-        if (!this.#config) {
+        if (!this.#config || this.#isUsingNativeViewer) {
             return;
         }
         await this.setZoom((this.#config.zoom ?? DEFAULT_CONFIG.zoom) +
             (this.#config.zoomStep ?? DEFAULT_CONFIG.zoomStep));
     }
     async zoomOut() {
-        if (!this.#config) {
+        if (!this.#config || this.#isUsingNativeViewer) {
             return;
         }
         await this.setZoom((this.#config.zoom ?? DEFAULT_CONFIG.zoom) -
@@ -375,26 +771,29 @@ export class GenusPdfViewerElement extends HTMLElement {
         if (!this.#config?.allowDownload) {
             return;
         }
-        const link = document.createElement("a");
         const blob = await createBlobFromSource(this.#config);
         if (blob) {
             const href = URL.createObjectURL(blob);
-            link.href = href;
-            link.download = resolveTitle(this.#config).endsWith(".pdf")
+            const filename = resolveTitle(this.#config).endsWith(".pdf")
                 ? resolveTitle(this.#config)
                 : `${resolveTitle(this.#config)}.pdf`;
-            document.body.appendChild(link);
-            link.click();
-            link.remove();
-            URL.revokeObjectURL(href);
-            return;
+            try {
+                if (isAppleMobileBrowser() && (await tryNativeFileDownload(blob, filename))) {
+                    return;
+                }
+                triggerDownload(href, filename);
+                return;
+            }
+            finally {
+                releaseObjectUrl(href);
+            }
         }
         if (typeof this.#config.src === "string") {
-            window.open(this.#config.src, "_blank", "noopener,noreferrer");
+            openUrl(this.#config.src);
             return;
         }
         if (this.#config.src instanceof URL) {
-            window.open(this.#config.src.toString(), "_blank", "noopener,noreferrer");
+            openUrl(this.#config.src.toString());
         }
     }
     async destroy() {
@@ -416,6 +815,13 @@ export class GenusPdfViewerElement extends HTMLElement {
             continuous: parseBooleanAttribute(this.getAttribute("continuous"), DEFAULT_CONFIG.continuous),
             showToolbar: parseBooleanAttribute(this.getAttribute("toolbar"), DEFAULT_CONFIG.showToolbar),
             allowDownload: parseBooleanAttribute(this.getAttribute("download"), DEFAULT_CONFIG.allowDownload),
+            proxyUrl: (() => {
+                const value = this.getAttribute("proxy-url");
+                if (value === null) {
+                    return undefined;
+                }
+                return value === "false" ? false : value;
+            })(),
         };
     }
     async #loadAndRender() {
@@ -424,19 +830,16 @@ export class GenusPdfViewerElement extends HTMLElement {
             return;
         }
         const loadVersion = ++this.#loadVersion;
+        this.#isUsingNativeViewer = false;
         this.#setStatus("Loading PDF...");
         await this.#teardownDocument();
         try {
             const globalWorkerOptions = pdfjsLib.GlobalWorkerOptions;
             globalWorkerOptions.workerPort = null;
-            globalWorkerOptions.workerSrc =
-                config.workerSrc ?? new URL("./pdf.worker.min.mjs", import.meta.url).toString();
-            const params = await toDocumentParameters(config);
-            const task = pdfjsLib.getDocument(params);
-            this.#loadingTask = task;
-            const documentProxy = await task.promise;
-            if (loadVersion !== this.#loadVersion) {
-                await documentProxy.destroy();
+            ensurePdfJsCompat();
+            globalWorkerOptions.workerSrc = config.workerSrc ?? resolveDefaultPdfWorkerSrc();
+            const documentProxy = await this.#loadDocumentProxy(config, loadVersion);
+            if (!documentProxy) {
                 return;
             }
             this.#document = documentProxy;
@@ -455,16 +858,79 @@ export class GenusPdfViewerElement extends HTMLElement {
             emitViewerEvent(this, "ready", detail);
         }
         catch (error) {
-            const detail = {
-                error,
-                message: this.#toErrorMessage(error),
-            };
+            if (this.#tryRenderNativeUrlFallback(config, error)) {
+                return;
+            }
+            const detail = createErrorDetail(config, error);
             this.#setStatus(detail.message);
             emitViewerEvent(this, "error", detail);
         }
     }
+    async #loadDocumentProxy(config, loadVersion) {
+        try {
+            return await this.#loadDocumentProxyFromParams(await toDocumentParameters(config, "auto"), loadVersion);
+        }
+        catch (error) {
+            let currentError = error;
+            const directRetryParams = await this.#createDirectUrlRetryParameters(config);
+            if (directRetryParams) {
+                try {
+                    return await this.#loadDocumentProxyFromParams(directRetryParams, loadVersion);
+                }
+                catch (directError) {
+                    currentError = directError;
+                }
+            }
+            const fallbackParams = await this.#createFetchedDataFallbackParameters(config, currentError, directRetryParams ? "never" : "auto");
+            if (!fallbackParams) {
+                throw currentError;
+            }
+            return this.#loadDocumentProxyFromParams(fallbackParams, loadVersion);
+        }
+    }
+    async #loadDocumentProxyFromParams(params, loadVersion) {
+        const task = pdfjsLib.getDocument(params);
+        this.#loadingTask = task;
+        const documentProxy = await task.promise;
+        if (loadVersion !== this.#loadVersion) {
+            await documentProxy.destroy();
+            return null;
+        }
+        return documentProxy;
+    }
+    async #createFetchedDataFallbackParameters(config, error, proxyPreference) {
+        if (!resolveSourceHref(config.src) || !isLikelyNetworkLoadError(error)) {
+            return null;
+        }
+        try {
+            const data = await fetchDocumentDataFromSource(config, proxyPreference);
+            if (!data) {
+                return null;
+            }
+            return {
+                data,
+                disableRange: true,
+                disableStream: true,
+                disableAutoFetch: true,
+                stopAtErrors: true,
+                ...getPdfJsRuntimeOptions(),
+            };
+        }
+        catch {
+            return null;
+        }
+    }
+    async #createDirectUrlRetryParameters(config) {
+        const proxiedHref = resolveEffectiveSourceHref(config, "auto");
+        const directHref = resolveEffectiveSourceHref(config, "never");
+        if (!proxiedHref || !directHref || proxiedHref === directHref) {
+            return null;
+        }
+        return toDocumentParameters(config, "never");
+    }
     async #teardownDocument() {
         this.#renderVersion += 1;
+        this.#isUsingNativeViewer = false;
         const loadingTask = this.#loadingTask;
         this.#loadingTask = null;
         if (loadingTask) {
@@ -497,16 +963,10 @@ export class GenusPdfViewerElement extends HTMLElement {
         const scrollSnapshot = config.continuous ? this.#captureScrollSnapshot() : null;
         this.#setStatus(null);
         this.#stage.className = config.continuous ? "stage" : "stage single";
-        const stageChildren = Array.from(this.#stage.children);
-        for (const child of stageChildren) {
-            if (child !== this.#status) {
-                child.remove();
-            }
-        }
+        const stageChildren = Array.from(this.#stage.children).filter((child) => child !== this.#status);
         if (config.continuous) {
             const stack = document.createElement("div");
             stack.className = "page-stack";
-            this.#stage.insertBefore(stack, this.#status);
             for (let index = 1; index <= documentProxy.numPages; index += 1) {
                 if (renderVersion !== this.#renderVersion) {
                     return;
@@ -516,6 +976,10 @@ export class GenusPdfViewerElement extends HTMLElement {
                 stack.appendChild(wrapper);
                 this.#animatePageEntry(wrapper);
             }
+            for (const child of stageChildren) {
+                child.remove();
+            }
+            this.#stage.insertBefore(stack, this.#status);
             this.#restoreScrollSnapshot(scrollSnapshot ?? {
                 page: config.page ?? DEFAULT_CONFIG.page,
                 offsetRatio: 0,
@@ -525,6 +989,9 @@ export class GenusPdfViewerElement extends HTMLElement {
             const pageNumber = clampPage(config.page ?? DEFAULT_CONFIG.page, documentProxy.numPages);
             const page = await documentProxy.getPage(pageNumber);
             const wrapper = await this.#renderPage(page, config, pageNumber);
+            for (const child of stageChildren) {
+                child.remove();
+            }
             this.#stage.insertBefore(wrapper, this.#status);
             this.#animatePageEntry(wrapper);
         }
@@ -541,9 +1008,9 @@ export class GenusPdfViewerElement extends HTMLElement {
         }
         const scale = this.#computeScale(page, config);
         const viewport = page.getViewport({ scale });
-        const dpr = window.devicePixelRatio || 1;
-        canvas.width = Math.floor(viewport.width * dpr);
-        canvas.height = Math.floor(viewport.height * dpr);
+        const outputScale = getCanvasOutputScale(viewport.width, viewport.height);
+        canvas.width = Math.max(1, Math.floor(viewport.width * outputScale));
+        canvas.height = Math.max(1, Math.floor(viewport.height * outputScale));
         canvas.style.width = `${Math.floor(viewport.width)}px`;
         canvas.style.height = `${Math.floor(viewport.height)}px`;
         wrapper.style.width = canvas.style.width;
@@ -554,16 +1021,17 @@ export class GenusPdfViewerElement extends HTMLElement {
             canvasContext: context,
             viewport,
         };
-        if (dpr !== 1) {
-            renderContext.transform = [dpr, 0, 0, dpr, 0, 0];
+        if (outputScale !== 1) {
+            renderContext.transform = [outputScale, 0, 0, outputScale, 0, 0];
         }
         await page.render(renderContext).promise;
         return wrapper;
     }
     #computeScale(page, config) {
         const viewport = page.getViewport({ scale: 1 });
-        const availableWidth = Math.max(320, this.#stage.clientWidth || 960) - 32;
-        const availableHeight = Math.max(320, this.#stage.clientHeight || 720) - 32;
+        const { width, height } = this.#getAvailableViewportSize();
+        const availableWidth = Math.max(320, width) - 32;
+        const availableHeight = Math.max(320, height) - 32;
         let baseScale = 1;
         if (config.fit === "width") {
             baseScale = availableWidth / viewport.width;
@@ -577,11 +1045,20 @@ export class GenusPdfViewerElement extends HTMLElement {
         const config = this.#config;
         const page = config?.page ?? DEFAULT_CONFIG.page;
         const zoom = config?.zoom ?? DEFAULT_CONFIG.zoom;
+        const isCompactUi = this.hasAttribute("compact-ui");
+        const isNativeViewer = this.#isUsingNativeViewer;
         this.#toolbar.hidden = !(config?.showToolbar ?? DEFAULT_CONFIG.showToolbar);
-        this.#pageValue.textContent = `${page} / ${this.#pageCount || 0}`;
-        this.#zoomValue.textContent = `${Math.round(zoom * 100)}%`;
-        this.#prevButton.disabled = page <= 1;
-        this.#nextButton.disabled = this.#pageCount > 0 ? page >= this.#pageCount : true;
+        this.#pageValue.textContent = isNativeViewer
+            ? "Browser"
+            : isCompactUi
+                ? `${page}/${this.#pageCount || 0}`
+                : `${page} / ${this.#pageCount || 0}`;
+        this.#zoomValue.textContent = isNativeViewer ? "Auto" : `${Math.round(zoom * 100)}%`;
+        this.#prevButton.disabled = isNativeViewer || page <= 1;
+        this.#nextButton.disabled = isNativeViewer || (this.#pageCount > 0 ? page >= this.#pageCount : true);
+        this.#zoomOutButton.disabled = isNativeViewer;
+        this.#zoomInButton.disabled = isNativeViewer;
+        this.#resetZoomButton.disabled = isNativeViewer;
         this.#downloadButton.hidden = !(config?.allowDownload ?? DEFAULT_CONFIG.allowDownload);
     }
     #setStatus(message) {
@@ -594,17 +1071,13 @@ export class GenusPdfViewerElement extends HTMLElement {
         this.#status.textContent = message;
     }
     #scrollToPage(page, smooth) {
-        const target = this.#stage.querySelector(`.page[data-page="${page}"]`);
-        if (!target) {
-            return;
-        }
-        target.scrollIntoView({
-            block: "start",
-            behavior: smooth ? "smooth" : "auto",
-        });
+        this.#restoreScrollSnapshot({
+            page,
+            offsetRatio: 0,
+        }, smooth);
     }
     #captureScrollSnapshot() {
-        const currentPage = this.#detectVisiblePage();
+        const currentPage = this.#config?.page ?? this.#detectVisiblePage();
         if (!currentPage) {
             return null;
         }
@@ -636,6 +1109,97 @@ export class GenusPdfViewerElement extends HTMLElement {
             wrapper.classList.remove("entering");
         });
     }
+    #observeResizeTargets() {
+        if (!this.#resizeObserver) {
+            return;
+        }
+        this.#resizeObserver.disconnect();
+        this.#resizeObserver.observe(this);
+        if (this.parentElement) {
+            this.#resizeObserver.observe(this.parentElement);
+        }
+    }
+    #syncInteractionMode() {
+        if (shouldUseCompactToolbarUi()) {
+            this.setAttribute("compact-ui", "");
+            return;
+        }
+        this.removeAttribute("compact-ui");
+    }
+    #tryRenderNativeUrlFallback(config, error) {
+        if (!shouldAttemptNativeUrlFallback(config, error)) {
+            return false;
+        }
+        const sourceUrl = resolveSourceHref(config.src);
+        if (!sourceUrl) {
+            return false;
+        }
+        this.#isUsingNativeViewer = true;
+        this.#pageCount = 0;
+        this.#setStatus(null);
+        this.#stage.className = "stage native-stage";
+        const stageChildren = Array.from(this.#stage.children).filter((child) => child !== this.#status);
+        for (const child of stageChildren) {
+            child.remove();
+        }
+        const wrapper = document.createElement("div");
+        wrapper.className = "page native-page";
+        wrapper.dataset.page = "1";
+        const frame = document.createElement("iframe");
+        frame.className = "native-frame";
+        frame.src = sourceUrl;
+        frame.title = resolveTitle(config);
+        const actions = document.createElement("div");
+        actions.className = "native-actions";
+        const note = document.createElement("p");
+        note.className = "native-note";
+        note.textContent = "Using the iOS browser PDF viewer because direct PDF fetching failed.";
+        const link = document.createElement("a");
+        link.className = "native-link";
+        link.href = sourceUrl;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        link.textContent = "Open PDF in a new tab";
+        actions.append(note, link);
+        wrapper.append(frame, actions);
+        this.#stage.insertBefore(wrapper, this.#status);
+        this.#syncToolbarState();
+        const detail = {
+            page: 1,
+            pageCount: 0,
+            zoom: config.zoom ?? DEFAULT_CONFIG.zoom,
+        };
+        emitViewerEvent(this, "ready", detail);
+        return true;
+    }
+    #syncContainerSize() {
+        const parent = this.parentElement;
+        if (!parent) {
+            return;
+        }
+        const parentWidth = parent.clientWidth || Math.round(parent.getBoundingClientRect().width);
+        const parentHeight = parent.clientHeight || Math.round(parent.getBoundingClientRect().height);
+        this.style.width = parentWidth > 0 ? `${parentWidth}px` : "100%";
+        if (parentHeight > 0) {
+            this.style.height = `${parentHeight}px`;
+        }
+    }
+    #getAvailableViewportSize() {
+        const toolbarHeight = this.#toolbar.hidden ? 0 : this.#toolbar.offsetHeight;
+        const stageWidth = this.#stage.clientWidth;
+        const stageHeight = this.#stage.clientHeight;
+        const hostWidth = this.clientWidth;
+        const hostHeight = this.clientHeight;
+        const parentWidth = this.parentElement?.clientWidth ?? 0;
+        const parentHeight = this.parentElement?.clientHeight ?? 0;
+        return {
+            width: stageWidth || hostWidth || parentWidth || 960,
+            height: stageHeight ||
+                Math.max(hostHeight - toolbarHeight, 0) ||
+                Math.max(parentHeight - toolbarHeight, 0) ||
+                720,
+        };
+    }
     #detectVisiblePage() {
         const pages = Array.from(this.#stage.querySelectorAll(".page"));
         if (pages.length === 0) {
@@ -650,15 +1214,6 @@ export class GenusPdfViewerElement extends HTMLElement {
         const parsed = Number(visible.dataset.page);
         return Number.isFinite(parsed) ? parsed : null;
     }
-    #toErrorMessage(error) {
-        if (error instanceof Error && error.message) {
-            return error.message;
-        }
-        if (typeof error === "string") {
-            return error;
-        }
-        return "Failed to load PDF.";
-    }
 }
 export function defineGenusPdfViewerElement(tagName = GENUS_PDF_VIEWER_TAG) {
     if (!customElements.get(tagName)) {