@sdcorejs/angular 21.1.3 → 21.1.5

package/fesm2022/sdcorejs-angular-components-preview.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, DestroyRef, input, computed, output, signal, effect, afterNextRender, HostListener, ChangeDetectionStrategy, Component, InjectionToken, viewChild, viewChildren } from '@angular/core';
+import { inject, ElementRef, DestroyRef, input, computed, output, signal, effect, afterNextRender, HostListener, ChangeDetectionStrategy, Component, InjectionToken, PLATFORM_ID, viewChild, viewChildren } from '@angular/core';
 import { Utilities } from '@sdcorejs/utils/fns';
 import { TranslatePipe } from '@sdcorejs/angular/i18n';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
@@ -657,24 +657,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 args: ['keydown', ['$event']]
             }] } });
 
-var _a;
+class SdPdfDocumentBrowserAdapter {
+    document;
+    isBrowser;
+    canDownloadUrl;
+    canDownloadBlob;
+    canFullscreen;
+    constructor(document, platformId) {
+        this.document = document;
+        this.isBrowser = isPlatformBrowser(platformId) && !!document.defaultView;
+        this.canDownloadUrl = this.isBrowser && !!document.body && 'download' in document.createElement('a');
+        const view = document.defaultView;
+        this.canDownloadBlob =
+            this.canDownloadUrl &&
+                typeof view?.Blob === 'function' &&
+                typeof view.URL?.createObjectURL === 'function' &&
+                typeof view.URL?.revokeObjectURL === 'function';
+        this.canFullscreen =
+            this.isBrowser && typeof document.documentElement?.requestFullscreen === 'function' && typeof document.exitFullscreen === 'function';
+    }
+    isFile(value) {
+        const FileCtor = this.document.defaultView?.File;
+        return this.isBrowser && !!FileCtor && value instanceof FileCtor;
+    }
+    isBlob(value) {
+        const BlobCtor = this.document.defaultView?.Blob;
+        return this.isBrowser && !!BlobCtor && value instanceof BlobCtor;
+    }
+    createPdfBlob(data) {
+        const BlobCtor = this.document.defaultView?.Blob;
+        if (!this.isBrowser || !BlobCtor)
+            return null;
+        return new BlobCtor([new Uint8Array(data)], { type: 'application/pdf' });
+    }
+    createObjectUrl(blob) {
+        const urlApi = this.document.defaultView?.URL;
+        return this.isBrowser && urlApi?.createObjectURL ? urlApi.createObjectURL(blob) : null;
+    }
+    revokeObjectUrl(url) {
+        if (!this.isBrowser)
+            return;
+        this.document.defaultView?.URL?.revokeObjectURL?.(url);
+    }
+    download(href, filename) {
+        if (!this.canDownloadUrl || !this.document.body)
+            return false;
+        const anchor = this.document.createElement('a');
+        anchor.href = href;
+        anchor.download = filename;
+        anchor.hidden = true;
+        this.document.body.appendChild(anchor);
+        anchor.click();
+        anchor.remove();
+        return true;
+    }
+    createElement(tagName) {
+        return this.isBrowser ? this.document.createElement(tagName) : null;
+    }
+    createImage() {
+        return this.createElement('img');
+    }
+    listenFullscreen(host, listener) {
+        if (!this.isBrowser)
+            return () => undefined;
+        const onChange = () => listener(this.document.fullscreenElement === host);
+        this.document.addEventListener('fullscreenchange', onChange);
+        onChange();
+        return () => this.document.removeEventListener('fullscreenchange', onChange);
+    }
+    async toggleFullscreen(host) {
+        if (!this.canFullscreen)
+            return;
+        if (this.document.fullscreenElement) {
+            await this.document.exitFullscreen?.();
+            return;
+        }
+        await host.requestFullscreen?.();
+    }
+    observeResize(element, listener) {
+        const ResizeObserverCtor = this.document.defaultView?.ResizeObserver;
+        if (!this.isBrowser || !ResizeObserverCtor)
+            return () => undefined;
+        const observer = new ResizeObserverCtor(() => listener());
+        observer.observe(element);
+        return () => observer.disconnect();
+    }
+    observeIntersections(elements, listener, options) {
+        const IntersectionObserverCtor = this.document.defaultView?.IntersectionObserver;
+        if (!this.isBrowser || elements.length === 0)
+            return () => undefined;
+        if (!IntersectionObserverCtor) {
+            listener(elements.map(target => ({ target, isIntersecting: true })));
+            return () => undefined;
+        }
+        const observer = new IntersectionObserverCtor(entries => listener(entries), options);
+        for (const element of elements)
+            observer.observe(element);
+        return () => observer.disconnect();
+    }
+    scheduleFrame(callback) {
+        const view = this.document.defaultView;
+        if (!this.isBrowser || !view)
+            return null;
+        return view.requestAnimationFrame ? view.requestAnimationFrame(callback) : view.setTimeout(() => callback(view.performance.now()), 0);
+    }
+    cancelFrame(handle) {
+        if (handle === null || !this.isBrowser)
+            return;
+        this.document.defaultView?.cancelAnimationFrame?.(handle);
+        this.document.defaultView?.clearTimeout(handle);
+    }
+}
+const SD_PDF_BROWSER_ADAPTER = new InjectionToken('SD_PDF_BROWSER_ADAPTER', {
+    providedIn: 'root',
+    factory: () => new SdPdfDocumentBrowserAdapter(inject(DOCUMENT), inject(PLATFORM_ID)),
+});
+
+class SdPdfIframePrintAdapter {
+    document;
+    #isBrowser;
+    isSupported;
+    constructor(document, platformId) {
+        this.document = document;
+        this.#isBrowser = isPlatformBrowser(platformId) && !!document.defaultView;
+        const view = document.defaultView;
+        this.isSupported =
+            this.#isBrowser &&
+                !!view?.Blob &&
+                typeof view.URL?.createObjectURL === 'function' &&
+                typeof view.URL?.revokeObjectURL === 'function' &&
+                !!document.body;
+    }
+    start(data, filename) {
+        const view = this.document.defaultView;
+        const BlobCtor = view?.Blob;
+        const urlApi = view?.URL;
+        if (!this.isSupported ||
+            !view ||
+            !BlobCtor ||
+            typeof urlApi?.createObjectURL !== 'function' ||
+            typeof urlApi.revokeObjectURL !== 'function' ||
+            !this.document.body) {
+            return null;
+        }
+        const blob = new BlobCtor([new Uint8Array(data)], { type: 'application/pdf' });
+        const objectUrl = urlApi.createObjectURL(blob);
+        const frame = this.document.createElement('iframe');
+        frame.hidden = true;
+        frame.title = filename;
+        let settled = false;
+        let timeoutHandle = null;
+        let resolveFinished = () => undefined;
+        let rejectFinished = () => undefined;
+        const finished = new Promise((resolve, reject) => {
+            resolveFinished = resolve;
+            rejectFinished = reject;
+        });
+        const attemptCleanup = (operation) => {
+            try {
+                operation();
+            }
+            catch {
+                // Cleanup is best-effort; every remaining step and promise settlement must still run.
+            }
+        };
+        const cleanup = () => {
+            if (timeoutHandle !== null)
+                attemptCleanup(() => view.clearTimeout(timeoutHandle));
+            attemptCleanup(() => frame.contentWindow?.removeEventListener('afterprint', complete));
+            attemptCleanup(() => frame.removeEventListener('load', onLoad));
+            attemptCleanup(() => frame.removeEventListener('error', onError));
+            attemptCleanup(() => frame.remove());
+            attemptCleanup(() => urlApi.revokeObjectURL(objectUrl));
+        };
+        const complete = () => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            resolveFinished();
+        };
+        const fail = (message) => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            rejectFinished(new Error(message));
+        };
+        const onError = () => fail('Unable to load the PDF print frame.');
+        const onLoad = () => {
+            const printWindow = frame.contentWindow;
+            if (!printWindow?.print) {
+                fail('Printing is unavailable in this browser.');
+                return;
+            }
+            printWindow.addEventListener('afterprint', complete, { once: true });
+            timeoutHandle = view.setTimeout(complete, 30_000);
+            try {
+                printWindow.focus();
+                printWindow.print();
+            }
+            catch {
+                fail('The browser blocked the PDF print dialog.');
+            }
+        };
+        frame.addEventListener('load', onLoad, { once: true });
+        frame.addEventListener('error', onError, { once: true });
+        frame.src = objectUrl;
+        this.document.body.appendChild(frame);
+        return {
+            finished,
+            cancel: complete,
+        };
+    }
+}
+const SD_PDF_PRINT_ADAPTER = new InjectionToken('SD_PDF_PRINT_ADAPTER', {
+    providedIn: 'root',
+    factory: () => new SdPdfIframePrintAdapter(inject(DOCUMENT), inject(PLATFORM_ID)),
+});
+
+function isSdPdfJsLib(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    const candidate = value;
+    return typeof candidate.getDocument === 'function' && typeof candidate.GlobalWorkerOptions?.workerSrc === 'string';
+}
 const SD_PDFJS_LIB = new InjectionToken('SD_PDFJS_LIB', {
     providedIn: 'root',
     factory: () => {
-        // Try the worker URL one time at first-injection. Guarded so the
-        // component still imports cleanly in environments (tests, SSR) where
-        // import.meta.url can't be resolved or the worker bundle isn't shipped.
-        try {
-            if (pdfjsLib?.GlobalWorkerOptions && !pdfjsLib.GlobalWorkerOptions.workerSrc) {
-                pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
-            }
+        if (!pdfjsLib.GlobalWorkerOptions.workerSrc) {
+            pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
         }
-        catch {
-            // Consumer app must set workerSrc manually (documented in sd-preview.md).
+        const candidate = pdfjsLib;
+        if (!isSdPdfJsLib(candidate)) {
+            throw new Error('The installed pdfjs-dist build does not expose getDocument().');
         }
-        return pdfjsLib;
+        return candidate;
     },
 });
+
+var _a;
+let nextPdfPreviewInstanceId = 0;
+class PdfHeightIndex {
+    #gap;
+    #tree = [0];
+    #values = [];
+    constructor(gap) {
+        this.#gap = gap;
+    }
+    reset(heights) {
+        this.#values = heights.map((height, index) => height + (index < heights.length - 1 ? this.#gap : 0));
+        this.#tree = Array.from({ length: this.#values.length + 1 }, () => 0);
+        for (let index = 1; index < this.#tree.length; index++) {
+            this.#tree[index] += this.#values[index - 1];
+            const parent = index + (index & -index);
+            if (parent < this.#tree.length)
+                this.#tree[parent] += this.#tree[index];
+        }
+    }
+    updateHeight(index, height) {
+        if (index < 0 || index >= this.#values.length)
+            return;
+        const next = height + (index < this.#values.length - 1 ? this.#gap : 0);
+        const delta = next - this.#values[index];
+        this.#values[index] = next;
+        for (let cursor = index + 1; cursor < this.#tree.length; cursor += cursor & -cursor)
+            this.#tree[cursor] += delta;
+    }
+    offsetAt(index) {
+        let sum = 0;
+        for (let cursor = Math.max(0, Math.min(index, this.#values.length)); cursor > 0; cursor -= cursor & -cursor) {
+            sum += this.#tree[cursor];
+        }
+        return sum;
+    }
+    total() {
+        return this.offsetAt(this.#values.length);
+    }
+    indexAt(offset) {
+        if (this.#values.length === 0)
+            return 0;
+        const bounded = Math.max(0, Math.min(offset, this.total()));
+        let index = 0;
+        let prefix = 0;
+        let bit = 1;
+        while (bit * 2 < this.#tree.length)
+            bit *= 2;
+        for (; bit > 0; bit >>= 1) {
+            const next = index + bit;
+            if (next < this.#tree.length && prefix + this.#tree[next] <= bounded) {
+                index = next;
+                prefix += this.#tree[next];
+            }
+        }
+        return Math.min(index, this.#values.length - 1);
+    }
+}
 class SdPreviewPdf {
     // ==========================================
     // CONSTANTS
@@ -685,12 +963,25 @@ class SdPreviewPdf {
     static MIN_ZOOM = 0.25;
     static MAX_ZOOM = 4;
     static ZOOM_STEP = 0.1;
+    static OUTLINE_MAX_DEPTH = 64;
+    static OUTLINE_MAX_NODES = 10_000;
+    static MAX_SEARCH_RESULTS = 1000;
+    static MAX_PAGE_TEXT_CACHE_PAGES = 128;
+    static THUMBNAIL_WINDOW_SIZE = 48;
+    static THUMBNAIL_ITEM_HEIGHT = 220;
+    static MAX_THUMBNAIL_CACHE_ENTRIES = 96;
+    static MAX_CONCURRENT_THUMBNAIL_WORK = 4;
+    static MAX_CANVAS_DIMENSION = 8192;
+    static MAX_CANVAS_PIXELS = 16_777_216;
     // ==========================================
     // DI
     // ==========================================
     #hostEl = inject(ElementRef);
     #destroyRef = inject(DestroyRef);
     #pdfjs = inject(SD_PDFJS_LIB);
+    #browser = inject(SD_PDF_BROWSER_ADAPTER);
+    #printAdapter = inject(SD_PDF_PRINT_ADAPTER);
+    #instanceId = `sd-preview-pdf-${++nextPdfPreviewInstanceId}`;
     // ==========================================
     // VIEW CHILDREN
     // WHY `protected readonly` (not `#private`): Angular's `viewChild()` query
@@ -702,6 +993,10 @@ class SdPreviewPdf {
     stageEl = viewChild('stageRef', ...(ngDevMode ? [{ debugName: "stageEl" }] : /* istanbul ignore next */ []));
     pageInputRef = viewChild('pageInput', ...(ngDevMode ? [{ debugName: "pageInputRef" }] : /* istanbul ignore next */ []));
     searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
+    sidebarContentRef = viewChild('sidebarContent', ...(ngDevMode ? [{ debugName: "sidebarContentRef" }] : /* istanbul ignore next */ []));
+    outlineItemRefs = viewChildren('outlineItem', ...(ngDevMode ? [{ debugName: "outlineItemRefs" }] : /* istanbul ignore next */ []));
+    sidebarTabRefs = viewChildren('sidebarTab', ...(ngDevMode ? [{ debugName: "sidebarTabRefs" }] : /* istanbul ignore next */ []));
+    continuousCanvases = viewChildren('continuousCanvas', ...(ngDevMode ? [{ debugName: "continuousCanvases" }] : /* istanbul ignore next */ []));
     // Every thumbnail <canvas> in the sidebar — populated when sidebar is open +
     // mode==='thumbnails'. We feed these to the IntersectionObserver below so a
     // thumb only renders when it scrolls into the viewport (lazy fill).
@@ -740,6 +1035,22 @@ class SdPreviewPdf {
     autoIdTabThumbnails = computed(() => this.#childAutoId('tab-thumbnails'), ...(ngDevMode ? [{ debugName: "autoIdTabThumbnails" }] : /* istanbul ignore next */ []));
     autoIdTabOutline = computed(() => this.#childAutoId('tab-outline'), ...(ngDevMode ? [{ debugName: "autoIdTabOutline" }] : /* istanbul ignore next */ []));
     autoIdTabSearch = computed(() => this.#childAutoId('tab-search'), ...(ngDevMode ? [{ debugName: "autoIdTabSearch" }] : /* istanbul ignore next */ []));
+    sidebarPanelId = computed(() => this.#childAutoId('sidebar-panel') ?? `${this.#instanceId}-sidebar-panel`, ...(ngDevMode ? [{ debugName: "sidebarPanelId" }] : /* istanbul ignore next */ []));
+    sidebarRegionId = computed(() => this.#childAutoId('sidebar') ?? `${this.#instanceId}-sidebar`, ...(ngDevMode ? [{ debugName: "sidebarRegionId" }] : /* istanbul ignore next */ []));
+    searchBarId = computed(() => this.#childAutoId('searchbar') ?? `${this.#instanceId}-searchbar`, ...(ngDevMode ? [{ debugName: "searchBarId" }] : /* istanbul ignore next */ []));
+    tabThumbnailsId = computed(() => this.#childAutoId('tab-thumbnails') ?? `${this.#instanceId}-tab-thumbnails`, ...(ngDevMode ? [{ debugName: "tabThumbnailsId" }] : /* istanbul ignore next */ []));
+    tabOutlineId = computed(() => this.#childAutoId('tab-outline') ?? `${this.#instanceId}-tab-outline`, ...(ngDevMode ? [{ debugName: "tabOutlineId" }] : /* istanbul ignore next */ []));
+    tabSearchId = computed(() => this.#childAutoId('tab-search') ?? `${this.#instanceId}-tab-search`, ...(ngDevMode ? [{ debugName: "tabSearchId" }] : /* istanbul ignore next */ []));
+    sidebarActiveTabId = computed(() => {
+        switch (this.#sidebarModeInternal()) {
+            case 'outline':
+                return this.tabOutlineId();
+            case 'search':
+                return this.tabSearchId();
+            default:
+                return this.tabThumbnailsId();
+        }
+    }, ...(ngDevMode ? [{ debugName: "sidebarActiveTabId" }] : /* istanbul ignore next */ []));
     // Search bar
     autoIdSearchInput = computed(() => this.#childAutoId('search-input'), ...(ngDevMode ? [{ debugName: "autoIdSearchInput" }] : /* istanbul ignore next */ []));
     autoIdSearchNext = computed(() => this.#childAutoId('search-next'), ...(ngDevMode ? [{ debugName: "autoIdSearchNext" }] : /* istanbul ignore next */ []));
@@ -797,9 +1108,18 @@ class SdPreviewPdf {
     #isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "#isFullscreen" }] : /* istanbul ignore next */ []));
     #filename = signal('document.pdf', ...(ngDevMode ? [{ debugName: "#filename" }] : /* istanbul ignore next */ []));
     #fileSize = signal(0, ...(ngDevMode ? [{ debugName: "#fileSize" }] : /* istanbul ignore next */ []));
+    #continuousPages = signal([], ...(ngDevMode ? [{ debugName: "#continuousPages" }] : /* istanbul ignore next */ []));
+    #continuousTopSpacer = signal(0, ...(ngDevMode ? [{ debugName: "#continuousTopSpacer" }] : /* istanbul ignore next */ []));
+    #continuousBottomSpacer = signal(0, ...(ngDevMode ? [{ debugName: "#continuousBottomSpacer" }] : /* istanbul ignore next */ []));
+    #continuousHeightVersion = signal(0, ...(ngDevMode ? [{ debugName: "#continuousHeightVersion" }] : /* istanbul ignore next */ []));
+    #thumbnailWindowStart = signal(0, ...(ngDevMode ? [{ debugName: "#thumbnailWindowStart" }] : /* istanbul ignore next */ []));
+    #outline = signal([], ...(ngDevMode ? [{ debugName: "#outline" }] : /* istanbul ignore next */ []));
+    #outlineExpanded = signal(new Set(), ...(ngDevMode ? [{ debugName: "#outlineExpanded" }] : /* istanbul ignore next */ []));
+    #outlineFocusId = signal(null, ...(ngDevMode ? [{ debugName: "#outlineFocusId" }] : /* istanbul ignore next */ []));
     // Thumbnail cache: page number → data URL of mini-render. Lazy-populated as
     // the user opens the sidebar / scrolls thumbnails into view.
     #thumbCache = signal({}, ...(ngDevMode ? [{ debugName: "#thumbCache" }] : /* istanbul ignore next */ []));
+    #thumbnailCacheLru = new Map();
     // ==========================================
     // SEARCH STATE
     // ==========================================
@@ -814,6 +1134,7 @@ class SdPreviewPdf {
     #searchWholeWord = signal(false, ...(ngDevMode ? [{ debugName: "#searchWholeWord" }] : /* istanbul ignore next */ []));
     #searchTerm = signal('', ...(ngDevMode ? [{ debugName: "#searchTerm" }] : /* istanbul ignore next */ []));
     #searchResults = signal([], ...(ngDevMode ? [{ debugName: "#searchResults" }] : /* istanbul ignore next */ []));
+    #searchTruncated = signal(false, ...(ngDevMode ? [{ debugName: "#searchTruncated" }] : /* istanbul ignore next */ []));
     // -1 sentinel means "no result focused yet" (e.g. right after clearSearch
     // or before the first searchNext). Highlight rendering uses this to skip
     // the `--active` class altogether.
@@ -822,25 +1143,41 @@ class SdPreviewPdf {
     // `getTextContent()` cost once per page per document, then reuse across
     // re-runs (e.g. toggling case-sensitive). Cleared on every source change.
     #pageTextCache = new Map();
+    #pageTextCacheSize = signal(0, ...(ngDevMode ? [{ debugName: "#pageTextCacheSize" }] : /* istanbul ignore next */ []));
     // Token to abort an in-flight `search()` call when a newer one supersedes it
     // — same pattern as #loadToken / #renderToken upstream.
     #searchToken = 0;
+    #searchWorkerActive = false;
+    #queuedSearchRequest = null;
     // The IntersectionObserver instance that drives lazy thumb rendering. Lives
     // for the component's lifetime; we just rebind to the latest canvas refs
     // when the sidebar tab switches.
-    #thumbObserver = null;
+    #thumbObserverCleanup = null;
     // Pages currently being rendered as thumbs — guards against double work
     // when a thumb scrolls in/out/in rapidly.
-    #thumbsRendering = new Set();
+    #thumbnailWork = new Map();
+    #thumbnailWorkCount = signal(0, ...(ngDevMode ? [{ debugName: "#thumbnailWorkCount" }] : /* istanbul ignore next */ []));
+    #thumbnailSlotQueue = [];
+    #activeThumbnailSlots = 0;
+    #continuousTasks = new Map();
+    #continuousReservations = new Map();
+    #continuousFrame = null;
+    #layoutGeneration = 0;
+    #pageHeights = [];
+    #heightIndex = new PdfHeightIndex(24);
     // Cached resolved source object that getDocument actually consumed — used
     // for download fallback when caller passed a non-URL source.
-    #lastBlobUrl = null;
     // Track ALL blob URLs we created so we can revoke on source change + destroy.
     #ownedBlobUrls = new Set();
     // Race guards mirror preview-image's #loadToken pattern.
     #loadToken = 0;
+    #currentLoadingTask = null;
     #currentRenderTask = null;
+    #currentPrintJob = null;
+    #printGeneration = 0;
+    #downloadGeneration = 0;
     #renderToken = 0;
+    #destroyed = false;
     // ==========================================
     // COMPUTED (template-readable)
     // ==========================================
@@ -857,6 +1194,30 @@ class SdPreviewPdf {
     fileSize = this.#fileSize.asReadonly();
     loadError$ = this.#loadError.asReadonly();
     thumbCache = this.#thumbCache.asReadonly();
+    thumbnailWorkCount = this.#thumbnailWorkCount.asReadonly();
+    pageTextCacheSize = this.#pageTextCacheSize.asReadonly();
+    continuousPages = this.#continuousPages.asReadonly();
+    continuousTopSpacer = this.#continuousTopSpacer.asReadonly();
+    continuousBottomSpacer = this.#continuousBottomSpacer.asReadonly();
+    continuousPageHeights = computed(() => {
+        this.#continuousHeightVersion();
+        return Object.fromEntries(this.#continuousPages().map(page => [page, this.#pageHeights[page - 1] ?? 1]));
+    }, ...(ngDevMode ? [{ debugName: "continuousPageHeights" }] : /* istanbul ignore next */ []));
+    outline = this.#outline.asReadonly();
+    outlineFocusId = this.#outlineFocusId.asReadonly();
+    visibleOutline = computed(() => {
+        const rows = [];
+        const expanded = this.#outlineExpanded();
+        const visit = (items, level, parentId) => {
+            for (const item of items) {
+                rows.push({ item, level, parentId });
+                if (item.children.length > 0 && expanded.has(item.id))
+                    visit(item.children, level + 1, item.id);
+            }
+        };
+        visit(this.#outline(), 1, null);
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "visibleOutline" }] : /* istanbul ignore next */ []));
     numPages = computed(() => this.#meta()?.numPages ?? 0, ...(ngDevMode ? [{ debugName: "numPages" }] : /* istanbul ignore next */ []));
     canPrev = computed(() => this.#activePage() > 1, ...(ngDevMode ? [{ debugName: "canPrev" }] : /* istanbul ignore next */ []));
     canNext = computed(() => {
@@ -871,13 +1232,37 @@ class SdPreviewPdf {
         return Math.min(100, Math.round((p.loaded / p.total) * 100));
     }, ...(ngDevMode ? [{ debugName: "loadPercent" }] : /* istanbul ignore next */ []));
     isSidebarOpen = computed(() => this.#sidebarOpenInternal() && this.#sidebarModeInternal() !== 'none', ...(ngDevMode ? [{ debugName: "isSidebarOpen" }] : /* istanbul ignore next */ []));
+    canDownload = computed(() => {
+        const source = this.source();
+        if (!this.downloadable() || !source)
+            return false;
+        if (this.#requiresLoadedDocumentBytes(source)) {
+            return this.#browser.canDownloadBlob && this.#stage() === 'ready' && this.#pdfDoc() !== null;
+        }
+        if (typeof source === 'string' || ('url' in source && typeof source.url === 'string')) {
+            return this.#browser.canDownloadUrl;
+        }
+        return this.#browser.canDownloadBlob;
+    }, ...(ngDevMode ? [{ debugName: "canDownload" }] : /* istanbul ignore next */ []));
+    canFullscreen = computed(() => this.#browser.canFullscreen, ...(ngDevMode ? [{ debugName: "canFullscreen" }] : /* istanbul ignore next */ []));
+    canPrint = computed(() => this.#printAdapter.isSupported && this.#stage() === 'ready' && this.#pdfDoc() !== null, ...(ngDevMode ? [{ debugName: "canPrint" }] : /* istanbul ignore next */ []));
     pageList = computed(() => {
         const n = this.numPages();
         return n > 0 ? Array.from({ length: n }, (_, i) => i + 1) : [];
     }, ...(ngDevMode ? [{ debugName: "pageList" }] : /* istanbul ignore next */ []));
     // Alias used by the template's thumbnail @for — keeps the JSX-y `pageNumbers`
     // name from the design handoff while reusing the same computed.
-    pageNumbers = this.pageList;
+    pageNumbers = computed(() => {
+        const count = this.numPages();
+        const start = Math.max(0, Math.min(this.#thumbnailWindowStart(), Math.max(0, count - _a.THUMBNAIL_WINDOW_SIZE)));
+        const length = Math.min(_a.THUMBNAIL_WINDOW_SIZE, count - start);
+        return Array.from({ length }, (_, index) => start + index + 1);
+    }, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : /* istanbul ignore next */ []));
+    thumbnailTopSpacer = computed(() => this.#thumbnailWindowStart() * _a.THUMBNAIL_ITEM_HEIGHT, ...(ngDevMode ? [{ debugName: "thumbnailTopSpacer" }] : /* istanbul ignore next */ []));
+    thumbnailBottomSpacer = computed(() => {
+        const renderedEnd = this.#thumbnailWindowStart() + this.pageNumbers().length;
+        return Math.max(0, this.numPages() - renderedEnd) * _a.THUMBNAIL_ITEM_HEIGHT;
+    }, ...(ngDevMode ? [{ debugName: "thumbnailBottomSpacer" }] : /* istanbul ignore next */ []));
     // Search readonly accessors for the template + tests. Read-only by design;
     // mutations go through `search()` / `searchNext()` etc.
     searchBarOpen = this.#searchBarOpen.asReadonly();
@@ -887,6 +1272,7 @@ class SdPreviewPdf {
     searchCaseSensitive = this.#searchCaseSensitive.asReadonly();
     searchWholeWord = this.#searchWholeWord.asReadonly();
     searchTotal = computed(() => this.#searchResults().length, ...(ngDevMode ? [{ debugName: "searchTotal" }] : /* istanbul ignore next */ []));
+    searchTruncated = this.#searchTruncated.asReadonly();
     // 1-based "X of N" indicator for the search bar counter. Reads 0 when
     // there are no results so the template can hide / dim the counter.
     searchCurrent = computed(() => {
@@ -908,6 +1294,7 @@ class SdPreviewPdf {
         wholeWord: this.#searchWholeWord(),
         results: this.#searchResults(),
         activeIndex: this.#searchActiveIndex(),
+        truncated: this.#searchTruncated(),
     }), ...(ngDevMode ? [{ debugName: "searchState" }] : /* istanbul ignore next */ []));
     // ==========================================
     // CONSTRUCTOR — declarative wiring
@@ -921,34 +1308,25 @@ class SdPreviewPdf {
         });
         effect(() => {
             const m = this.sidebar();
-            // 'outline' + 'search' are deferred — selecting them through the input
-            // is allowed (we still toggle the tab UI) but the body shows the deferred
-            // placeholder. Don't force-fallback to 'thumbnails' so the input value
-            // is honored visibly.
             this.#sidebarModeInternal.set(m);
         });
+        let previousScrollModeInput;
         effect(() => {
             const m = this.scrollMode();
-            // Continuous scroll is deferred — warn once if requested but keep the
-            // input value so consumer code is forward-compatible.
-            if (m === 'continuous') {
-                console.warn('[sd-preview-pdf] scrollMode="continuous" is deferred; falling back to single-page rendering.' // @i18n-ignore
-                );
-            }
+            if (m === previousScrollModeInput)
+                return;
+            previousScrollModeInput = m;
             this.#scrollModeInternal.set(m);
+            queueMicrotask(() => this.#onScrollModeChanged());
         });
         effect(() => {
             // Reset zoom mode when initialZoom input changes — only fires when the
             // input itself updates (not when user clicks zoom +/-).
             this.#zoomMode.set(this.initialZoom());
         });
-        // Sync fullscreen state from the browser (works with Esc, F11, programmatic exit).
-        const onFullscreenChange = () => {
-            this.#isFullscreen.set(document.fullscreenElement === this.#hostEl.nativeElement);
-        };
-        document.addEventListener('fullscreenchange', onFullscreenChange);
-        this.#destroyRef.onDestroy(() => {
-            document.removeEventListener('fullscreenchange', onFullscreenChange);
+        const removeFullscreenListener = this.#browser.listenFullscreen(this.#hostEl.nativeElement, active => {
+            if (!this.#destroyed)
+                this.#isFullscreen.set(active);
         });
         // React to source changes — destroy previous doc, load new one.
         // WHY untracked-via-queueMicrotask: `effect()` tracks every signal READ
@@ -963,6 +1341,8 @@ class SdPreviewPdf {
         });
         // Auto-focus host after first render so keyboard works immediately.
         afterNextRender(() => {
+            if (!this.#browser.isBrowser || this.#destroyed)
+                return;
             try {
                 this.#hostEl.nativeElement.focus({ preventScroll: true });
             }
@@ -979,6 +1359,24 @@ class SdPreviewPdf {
             const refs = this.thumbCanvases();
             this.#syncThumbObserver(refs.map(r => r.nativeElement));
         });
+        effect(() => {
+            const refs = this.continuousCanvases();
+            this.#scheduleContinuousRenders(refs.map(ref => ref.nativeElement));
+        });
+        effect(onCleanup => {
+            const stage = this.stageEl()?.nativeElement;
+            if (!stage)
+                return;
+            const cleanup = this.#browser.observeResize(stage, () => {
+                if (this.#destroyed || this.#stage() !== 'ready')
+                    return;
+                if (this.#scrollModeInternal() === 'continuous')
+                    this.#invalidateContinuousLayout();
+                else
+                    void this.#renderActivePage();
+            });
+            onCleanup(cleanup);
+        });
         // Re-apply highlights when the rendered page changes OR when the search
         // term / active hit changes. WHY a separate effect: text-layer overlay
         // doesn't exist in this commit, so we hook the page canvas wrapper and
@@ -995,22 +1393,26 @@ class SdPreviewPdf {
         });
         // Cleanup on destroy.
         this.#destroyRef.onDestroy(() => {
+            this.#destroyed = true;
+            this.#loadToken++;
+            this.#searchToken++;
+            this.#cancelQueuedSearch();
+            this.#downloadGeneration++;
+            this.#renderToken++;
+            this.#cancelLoadingTask();
             this.#cancelRender();
+            this.#cancelContinuousRenders();
+            this.#cancelThumbnailRenders();
+            this.#cancelPrint();
             this.#destroyDoc();
             this.#revokeAllBlobs();
-            this.#thumbObserver?.disconnect();
-            this.#thumbObserver = null;
-            this.#thumbsRendering.clear();
-            this.#pageTextCache.clear();
-            if (document.fullscreenElement === this.#hostEl.nativeElement) {
-                document.exitFullscreen?.().catch(() => undefined);
-            }
+            this.#thumbObserverCleanup?.();
+            this.#thumbObserverCleanup = null;
+            this.#thumbnailCacheLru.clear();
+            this.#clearPageTextCache();
+            removeFullscreenListener();
         });
     }
-    ngOnDestroy() {
-        // Cleanup logic dời vào DestroyRef.onDestroy ở constructor — giữ hook để
-        // tương thích với `implements OnDestroy` (giúp test code `spyOn(comp, 'ngOnDestroy')`).
-    }
     // ==========================================
     // PUBLIC API
     // ==========================================
@@ -1019,11 +1421,18 @@ class SdPreviewPdf {
         if (n <= 0)
             return;
         const target = Math.max(1, Math.min(page, n));
-        if (target === this.#activePage())
-            return;
-        this.#activePage.set(target);
-        this.pageChange.emit(target);
-        this.#renderActivePage();
+        const changed = target !== this.#activePage();
+        if (changed) {
+            this.#activePage.set(target);
+            this.pageChange.emit(target);
+        }
+        this.#ensureThumbnailPageVisible(target);
+        if (this.#scrollModeInternal() === 'continuous') {
+            this.#positionContinuousPage(target);
+        }
+        else if (changed) {
+            void this.#renderActivePage();
+        }
     }
     nextPage() {
         this.goToPage(this.#activePage() + 1);
@@ -1051,15 +1460,19 @@ class SdPreviewPdf {
             this.#setZoom(mode);
         }
         else {
-            // Fit modes recompute against stage size + page natural size — done in
-            // #renderActivePage which reads zoomMode().
-            this.#renderActivePage();
+            if (this.#scrollModeInternal() === 'continuous')
+                this.#invalidateContinuousLayout();
+            else
+                void this.#renderActivePage();
         }
     }
     rotate(direction) {
         const delta = direction === 'right' ? 90 : -90;
         this.#rotation.update(r => (((r + delta) % 360) + 360) % 360);
-        this.#renderActivePage();
+        if (this.#scrollModeInternal() === 'continuous')
+            this.#invalidateContinuousLayout();
+        else
+            void this.#renderActivePage();
     }
     toggleSidebar() {
         this.#sidebarOpenInternal.update(v => !v);
@@ -1075,59 +1488,114 @@ class SdPreviewPdf {
             this.openSearch();
         }
     }
-    // TODO(preview-pdf): setScrollMode is signature-only; continuous + horizontal
-    // layout deferred. Currently this just updates internal state + emits a
-    // warning when consumer asks for the deferred 'continuous' mode.
-    setScrollMode(mode) {
-        if (mode === 'continuous') {
-            console.warn('[sd-preview-pdf] setScrollMode("continuous") is deferred; staying in single-page mode.' // @i18n-ignore
-            );
+    onSidebarTabKeyDown(event, currentMode) {
+        const modes = ['thumbnails', 'outline', 'search'];
+        const currentIndex = modes.indexOf(currentMode);
+        let targetIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                targetIndex = (currentIndex + 1) % modes.length;
+                break;
+            case 'ArrowLeft':
+                targetIndex = (currentIndex - 1 + modes.length) % modes.length;
+                break;
+            case 'Home':
+                targetIndex = 0;
+                break;
+            case 'End':
+                targetIndex = modes.length - 1;
+                break;
+            default:
+                return;
         }
+        event.preventDefault();
+        event.stopPropagation();
+        const target = modes[targetIndex];
+        this.setSidebarMode(target);
+        queueMicrotask(() => {
+            const tab = this.sidebarTabRefs().find(ref => ref.nativeElement.dataset['sidebarMode'] === target);
+            tab?.nativeElement.focus();
+        });
+    }
+    onThumbnailSidebarScroll(event) {
+        if (this.#sidebarModeInternal() !== 'thumbnails')
+            return;
+        const element = event.currentTarget;
+        if (!element)
+            return;
+        const firstVisible = Math.floor(element.scrollTop / _a.THUMBNAIL_ITEM_HEIGHT);
+        const start = Math.max(0, Math.min(firstVisible - 8, Math.max(0, this.numPages() - _a.THUMBNAIL_WINDOW_SIZE)));
+        this.#thumbnailWindowStart.set(start);
+    }
+    setScrollMode(mode) {
+        if (this.#scrollModeInternal() === mode)
+            return;
         this.#scrollModeInternal.set(mode);
+        this.#onScrollModeChanged();
     }
     downloadFile() {
-        if (!this.downloadable())
-            return;
+        void this.downloadFileAsync();
+    }
+    async downloadFileAsync() {
+        const generation = ++this.#downloadGeneration;
+        if (!this.canDownload() || this.#destroyed)
+            return false;
         const src = this.source();
+        if (!src)
+            return false;
         const filename = this.#filename();
-        // Strategy: if caller passed a URL, anchor download honors server's
-        // Content-Disposition; for File/Blob/buffer sources we re-emit the blob.
+        const doc = this.#pdfDoc();
         let href = null;
-        if (typeof src === 'string') {
-            href = src;
+        let temporaryHref = null;
+        if (this.#requiresLoadedDocumentBytes(src)) {
+            if (!doc)
+                return false;
+            let data;
+            try {
+                data = new Uint8Array(await doc.getData());
+            }
+            catch {
+                return false;
+            }
+            if (!this.#isCurrentDownload(generation, src, doc))
+                return false;
+            const blob = this.#browser.createPdfBlob(data);
+            href = blob ? this.#browser.createObjectUrl(blob) : null;
+            temporaryHref = this.#trackTemporaryDownloadUrl(href);
         }
-        else if (src instanceof File || src instanceof Blob) {
-            href = URL.createObjectURL(src);
-            this.#ownedBlobUrls.add(href);
+        else if (typeof src === 'string') {
+            href = src;
         }
-        else if (this.#lastBlobUrl) {
-            href = this.#lastBlobUrl;
+        else if (this.#browser.isFile(src) || this.#browser.isBlob(src)) {
+            href = this.#browser.createObjectUrl(src);
+            temporaryHref = this.#trackTemporaryDownloadUrl(href);
         }
         else if (src && typeof src === 'object' && 'url' in src && typeof src.url === 'string') {
             href = src.url;
         }
-        else if (src instanceof ArrayBuffer || src instanceof Uint8Array) {
-            const blob = new Blob([src], { type: 'application/pdf' });
-            href = URL.createObjectURL(blob);
-            this.#ownedBlobUrls.add(href);
-        }
-        if (!href)
-            return;
-        const a = document.createElement('a');
-        a.href = href;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        this.download.emit({ filename });
+        else if (src instanceof ArrayBuffer || src instanceof Uint8Array || (src && typeof src === 'object' && 'data' in src)) {
+            const raw = src instanceof ArrayBuffer || src instanceof Uint8Array ? src : src.data;
+            const data = raw instanceof Uint8Array ? new Uint8Array(raw) : new Uint8Array(raw.slice(0));
+            const blob = this.#browser.createPdfBlob(data);
+            href = blob ? this.#browser.createObjectUrl(blob) : null;
+            temporaryHref = this.#trackTemporaryDownloadUrl(href);
+        }
+        if (!href || !this.#isCurrentDownload(generation, src, doc)) {
+            if (temporaryHref)
+                this.#scheduleTemporaryDownloadUrlRelease(temporaryHref);
+            return false;
+        }
+        const downloaded = this.#browser.download(href, filename);
+        if (temporaryHref)
+            this.#scheduleTemporaryDownloadUrlRelease(temporaryHref);
+        if (downloaded && !this.#destroyed)
+            this.download.emit({ filename });
+        return downloaded;
     }
     toggleFullscreen() {
-        if (!document.fullscreenElement) {
-            this.#hostEl.nativeElement.requestFullscreen?.().catch(() => undefined);
-        }
-        else {
-            document.exitFullscreen?.().catch(() => undefined);
-        }
+        if (!this.canFullscreen())
+            return;
+        void this.#browser.toggleFullscreen(this.#hostEl.nativeElement).catch(() => undefined);
     }
     /** Programmatic equivalent of clicking the X — emits the close output. */
     requestClose() {
@@ -1137,11 +1605,125 @@ class SdPreviewPdf {
     retryLoad() {
         this.#loadDocument(this.source());
     }
-    // TODO(preview-pdf): printFile + scroll-mode continuous remain deferred.
-    // Search is now implemented below.
     printFile() {
-        console.warn('[sd-preview-pdf] printFile() is deferred to a follow-up commit.' // @i18n-ignore
-        );
+        void this.print();
+    }
+    async print() {
+        const generation = ++this.#printGeneration;
+        this.#cancelPrintJob();
+        const doc = this.#pdfDoc();
+        if (!doc || this.#destroyed || !this.canPrint())
+            return;
+        const loadToken = this.#loadToken;
+        let data;
+        try {
+            data = new Uint8Array(await doc.getData());
+        }
+        catch {
+            return;
+        }
+        if (generation !== this.#printGeneration || !this.#isActiveLoad(loadToken) || this.#pdfDoc() !== doc)
+            return;
+        const job = this.#printAdapter.start(data, this.#filename());
+        if (!job)
+            return;
+        this.#currentPrintJob = job;
+        try {
+            await job.finished;
+        }
+        catch {
+            job.cancel();
+        }
+        finally {
+            if (this.#currentPrintJob === job)
+                this.#currentPrintJob = null;
+        }
+    }
+    isOutlineExpanded(id) {
+        return this.#outlineExpanded().has(id);
+    }
+    toggleOutlineItem(id, event) {
+        event?.stopPropagation();
+        const item = this.#findOutlineItem(id);
+        if (!item || item.children.length === 0) {
+            this.#outlineFocusId.set(id);
+            return;
+        }
+        this.#outlineExpanded.update(current => {
+            const next = new Set(current);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+        this.#outlineFocusId.set(id);
+    }
+    focusOutlineItem(id) {
+        this.#outlineFocusId.set(id);
+    }
+    activateOutlineItem(id) {
+        const item = this.#findOutlineItem(id);
+        if (!item)
+            return;
+        this.#outlineFocusId.set(id);
+        if (item.page !== null) {
+            this.goToPage(item.page);
+            return;
+        }
+        if (item.children.length > 0)
+            this.toggleOutlineItem(id);
+    }
+    onOutlineKeyDown(event, id) {
+        const rows = this.visibleOutline();
+        const index = rows.findIndex(row => row.item.id === id);
+        if (index < 0)
+            return;
+        const row = rows[index];
+        const item = row.item;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.#focusOutlineRow(rows[Math.min(rows.length - 1, index + 1)].item.id);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.#focusOutlineRow(rows[Math.max(0, index - 1)].item.id);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (item.children.length === 0)
+                    break;
+                if (!this.isOutlineExpanded(id))
+                    this.toggleOutlineItem(id);
+                else
+                    this.#focusOutlineRow(item.children[0].id);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (item.children.length > 0 && this.isOutlineExpanded(id))
+                    this.toggleOutlineItem(id);
+                else if (row.parentId)
+                    this.#focusOutlineRow(row.parentId);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.#focusOutlineRow(rows[0].item.id);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.#focusOutlineRow(rows[rows.length - 1].item.id);
+                break;
+            case 'Enter':
+            case ' ':
+                if (item.url && item.page === null)
+                    break;
+                event.preventDefault();
+                this.activateOutlineItem(id);
+                break;
+            default:
+                break;
+        }
     }
     /**
      * Run a full-document search for `term`. Returns the result count.
@@ -1161,7 +1743,7 @@ class SdPreviewPdf {
      */
     async search(term, options) {
         const token = ++this.#searchToken;
-        const cleanTerm = (term ?? '').trim();
+        const cleanTerm = (term ?? '').trim().normalize('NFC');
         if (options?.caseSensitive !== undefined) {
             this.#searchCaseSensitive.set(options.caseSensitive);
         }
@@ -1169,7 +1751,9 @@ class SdPreviewPdf {
             this.#searchWholeWord.set(options.wholeWord);
         }
         this.#searchTerm.set(cleanTerm);
+        this.#searchTruncated.set(false);
         if (!cleanTerm) {
+            this.#cancelQueuedSearch();
             this.#searchResults.set([]);
             this.#searchActiveIndex.set(-1);
             this.#emitSearchChange();
@@ -1177,6 +1761,7 @@ class SdPreviewPdf {
         }
         const doc = this.#pdfDoc();
         if (!doc) {
+            this.#cancelQueuedSearch();
             this.#searchResults.set([]);
             this.#searchActiveIndex.set(-1);
             this.#emitSearchChange();
@@ -1184,35 +1769,51 @@ class SdPreviewPdf {
         }
         const re = this.#buildSearchRegex(cleanTerm, this.#searchCaseSensitive(), this.#searchWholeWord());
         if (!re) {
+            this.#cancelQueuedSearch();
             this.#searchResults.set([]);
             this.#searchActiveIndex.set(-1);
             this.#emitSearchChange();
             return 0;
         }
+        return new Promise(resolve => {
+            this.#enqueueSearchRequest({ token, doc, expression: re, resolve });
+        });
+    }
+    async #executeSearchRequest(request) {
+        const { token, doc, expression } = request;
         const results = [];
-        for (let p = 1; p <= doc.numPages; p++) {
+        const textScan = {
+            snapshot: new Map(this.#pageTextCache),
+            staged: new Map(),
+        };
+        pageLoop: for (let p = 1; p <= doc.numPages; p++) {
             if (token !== this.#searchToken)
                 return 0; // newer search superseded us
-            const text = await this.#getPageText(doc, p);
+            const text = await this.#getPageText(doc, p, token, textScan);
             if (token !== this.#searchToken)
                 return 0;
             // re is /g — must be re-created or `lastIndex` reset between pages.
-            re.lastIndex = 0;
+            expression.lastIndex = 0;
             let m;
-            while ((m = re.exec(text)) !== null) {
+            while ((m = expression.exec(text)) !== null) {
                 const start = m.index;
                 const matched = m[0];
                 const end = start + matched.length;
                 const before = text.slice(Math.max(0, start - 30), start);
                 const after = text.slice(end, end + 30);
+                if (results.length >= _a.MAX_SEARCH_RESULTS) {
+                    this.#searchTruncated.set(true);
+                    break pageLoop;
+                }
                 results.push({ page: p, before, term: matched, after });
                 // Defensive: zero-length match would loop forever.
                 if (matched.length === 0)
-                    re.lastIndex++;
+                    expression.lastIndex++;
             }
         }
         if (token !== this.#searchToken)
             return 0;
+        this.#commitPageTextScan(textScan);
         this.#searchResults.set(results);
         // Activate the first result so the user sees something immediately;
         // tests can assert this via `searchActiveIndex()`. Skip when empty.
@@ -1224,6 +1825,35 @@ class SdPreviewPdf {
         this.#emitSearchChange();
         return results.length;
     }
+    #enqueueSearchRequest(request) {
+        if (this.#searchWorkerActive) {
+            this.#queuedSearchRequest?.resolve(0);
+            this.#queuedSearchRequest = request;
+            return;
+        }
+        this.#searchWorkerActive = true;
+        void this.#drainSearchRequests(request);
+    }
+    async #drainSearchRequests(initial) {
+        let request = initial;
+        while (request) {
+            let resultCount = 0;
+            try {
+                resultCount = await this.#executeSearchRequest(request);
+            }
+            catch {
+                resultCount = 0;
+            }
+            request.resolve(resultCount);
+            request = this.#queuedSearchRequest;
+            this.#queuedSearchRequest = null;
+        }
+        this.#searchWorkerActive = false;
+    }
+    #cancelQueuedSearch() {
+        this.#queuedSearchRequest?.resolve(0);
+        this.#queuedSearchRequest = null;
+    }
     searchNext() {
         const results = this.#searchResults();
         if (results.length === 0)
@@ -1243,11 +1873,21 @@ class SdPreviewPdf {
         this.goToPage(results[prev].page);
         this.#emitSearchChange();
     }
+    activateSearchResult(index) {
+        const result = this.#searchResults()[index];
+        if (!result)
+            return;
+        this.#searchActiveIndex.set(index);
+        this.goToPage(result.page);
+        this.#emitSearchChange();
+    }
     clearSearch() {
         this.#searchToken++;
+        this.#cancelQueuedSearch();
         this.#searchTerm.set('');
         this.#searchResults.set([]);
         this.#searchActiveIndex.set(-1);
+        this.#searchTruncated.set(false);
         this.#emitSearchChange();
     }
     /** Open the search bar and focus its input. Idempotent. */
@@ -1278,8 +1918,11 @@ class SdPreviewPdf {
         }
     }
     /** Live binding from the search bar's `(input)` event. */
-    onSearchInput(value) {
-        void this.search(value);
+    onSearchInput(event) {
+        const target = event.target;
+        if (!target || typeof target !== 'object' || !('value' in target) || typeof target.value !== 'string')
+            return;
+        void this.search(target.value);
     }
     // ==========================================
     // KEYBOARD — bound to HOST (not document)
@@ -1296,6 +1939,11 @@ class SdPreviewPdf {
             this.openSearch();
             return;
         }
+        if ((event.ctrlKey || event.metaKey) && (event.key === 'p' || event.key === 'P') && this.canPrint()) {
+            event.preventDefault();
+            this.printFile();
+            return;
+        }
         // Keys while the search input is focused: Enter / Shift+Enter, F3 / Shift+F3
         // cycle results; Esc closes the bar. Everything else (typing) passes through.
         if (isSearchInput) {
@@ -1439,22 +2087,155 @@ class SdPreviewPdf {
     // ==========================================
     // INTERNALS
     // ==========================================
+    #findOutlineItem(id, items = this.#outline()) {
+        for (const item of items) {
+            if (item.id === id)
+                return item;
+            const nested = this.#findOutlineItem(id, item.children);
+            if (nested)
+                return nested;
+        }
+        return null;
+    }
+    #focusOutlineRow(id) {
+        this.#outlineFocusId.set(id);
+        queueMicrotask(() => {
+            if (this.#destroyed)
+                return;
+            const ref = this.outlineItemRefs().find(candidate => candidate.nativeElement.dataset['outlineId'] === id);
+            ref?.nativeElement.focus();
+        });
+    }
+    #setOutline(items) {
+        const expanded = new Set();
+        const collect = (nodes) => {
+            for (const item of nodes) {
+                if (item.children.length > 0)
+                    expanded.add(item.id);
+                collect(item.children);
+            }
+        };
+        collect(items);
+        this.#outline.set(items);
+        this.#outlineExpanded.set(expanded);
+        this.#outlineFocusId.set(items[0]?.id ?? null);
+    }
+    async #loadOutline(doc, token) {
+        let rawItems;
+        try {
+            rawItems = await doc.getOutline();
+        }
+        catch {
+            return this.#isActiveLoad(token) ? [] : null;
+        }
+        if (!this.#isActiveLoad(token))
+            return null;
+        return this.#resolveOutlineItems(doc, rawItems ?? [], token, [], 0, { nodes: 0 }, new Set());
+    }
+    async #resolveOutlineItems(doc, rawItems, token, parentPath, depth, traversal, ancestors) {
+        const items = [];
+        if (depth >= _a.OUTLINE_MAX_DEPTH)
+            return items;
+        for (let index = 0; index < rawItems.length; index++) {
+            if (!this.#isActiveLoad(token))
+                return null;
+            const raw = rawItems[index];
+            if (!raw || typeof raw !== 'object' || ancestors.has(raw))
+                continue;
+            if (traversal.nodes >= _a.OUTLINE_MAX_NODES)
+                break;
+            traversal.nodes++;
+            const path = [...parentPath, index];
+            const page = await this.#resolveOutlinePage(doc, raw, token);
+            if (!this.#isActiveLoad(token))
+                return null;
+            const rawChildren = Array.isArray(raw.items) ? raw.items : [];
+            const childAncestors = new Set(ancestors);
+            childAncestors.add(raw);
+            const children = await this.#resolveOutlineItems(doc, rawChildren, token, path, depth + 1, traversal, childAncestors);
+            if (!children || !this.#isActiveLoad(token))
+                return null;
+            const safeUrl = this.#safeOutlineUrl(raw.url);
+            items.push({
+                id: `outline-${path.join('-')}`,
+                title: raw.title?.trim() || `Page ${page ?? ''}`.trim(),
+                page,
+                ...(safeUrl ? { url: safeUrl } : {}),
+                children,
+            });
+        }
+        return items;
+    }
+    async #resolveOutlinePage(doc, item, token) {
+        let destination = item.dest;
+        if (typeof destination === 'string') {
+            try {
+                destination = await doc.getDestination(destination);
+            }
+            catch {
+                return null;
+            }
+        }
+        if (!this.#isActiveLoad(token) || !Array.isArray(destination) || destination.length === 0)
+            return null;
+        const target = destination[0];
+        if (typeof target === 'number')
+            return this.#validOutlinePage(Math.floor(target) + 1, doc.numPages);
+        if (!this.#isPdfReference(target))
+            return null;
+        const cached = doc.cachedPageNumber(target);
+        if (cached !== null)
+            return this.#validOutlinePage(cached, doc.numPages);
+        try {
+            const index = await doc.getPageIndex(target);
+            return this.#isActiveLoad(token) ? this.#validOutlinePage(index + 1, doc.numPages) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    #isPdfReference(value) {
+        return (!!value &&
+            typeof value === 'object' &&
+            'num' in value &&
+            'gen' in value &&
+            typeof value.num === 'number' &&
+            typeof value.gen === 'number');
+    }
+    #validOutlinePage(page, pageCount) {
+        return Number.isInteger(page) && page >= 1 && page <= pageCount ? page : null;
+    }
+    #safeOutlineUrl(url) {
+        const value = url?.trim();
+        return value && /^(?:https?:\/\/|mailto:)/i.test(value) ? value : undefined;
+    }
     async #loadDocument(src) {
         const token = ++this.#loadToken;
+        this.#searchToken++;
+        this.#cancelQueuedSearch();
+        this.#downloadGeneration++;
+        this.#cancelLoadingTask();
         this.#cancelRender();
+        this.#cancelContinuousRenders();
+        this.#cancelThumbnailRenders();
+        this.#cancelPrint();
         await this.#destroyDoc();
+        if (!this.#isActiveLoad(token))
+            return;
         this.#revokeAllBlobs();
+        this.#thumbnailCacheLru.clear();
         this.#thumbCache.set({});
-        this.#pageTextCache.clear();
-        this.#thumbsRendering.clear();
+        this.#setOutline([]);
+        this.#clearPageTextCache();
         // Reset search state — results are per-document, but keep the term so a
         // newly-loaded source with the same term gets re-indexed automatically
         // on the next user keystroke. Active index resets unconditionally.
         this.#searchResults.set([]);
         this.#searchActiveIndex.set(-1);
+        this.#searchTruncated.set(false);
         this.#loadError.set(null);
         this.#loadProgress.set({ loaded: 0, total: 0 });
-        if (!src) {
+        if (!src || !this.#browser.isBrowser) {
             this.#stage.set('empty');
             this.#pdfDoc.set(null);
             this.#meta.set(null);
@@ -1467,46 +2248,47 @@ class SdPreviewPdf {
             spec = await this.#normalizeSource(src);
         }
         catch (err) {
-            if (token !== this.#loadToken)
+            if (!this.#isActiveLoad(token))
                 return;
             this.#emitError(this.#classifyError(err), this.#errorMessage(err));
             return;
         }
+        if (!this.#isActiveLoad(token))
+            return;
         if (this.password()) {
-            spec['password'] = this.password();
+            spec.password = this.password();
         }
         let task;
         try {
             task = this.#pdfjs.getDocument(spec);
-            // pdfjs's loadingTask exposes onProgress as an assignable property.
+            this.#currentLoadingTask = task;
             task.onProgress = (p) => {
-                if (token !== this.#loadToken)
+                if (!this.#isActiveLoad(token) || this.#currentLoadingTask !== task)
                     return;
                 this.#loadProgress.set({ loaded: p.loaded ?? 0, total: p.total ?? 0 });
             };
         }
         catch (err) {
-            this.#emitError(this.#classifyError(err), this.#errorMessage(err));
+            if (this.#isActiveLoad(token))
+                this.#emitError(this.#classifyError(err), this.#errorMessage(err));
             return;
         }
         let pdfDoc;
         try {
-            pdfDoc = (await task.promise);
+            pdfDoc = await task.promise;
         }
         catch (err) {
-            if (token !== this.#loadToken)
+            if (this.#currentLoadingTask === task)
+                this.#currentLoadingTask = null;
+            if (!this.#isActiveLoad(token))
                 return;
             this.#emitError(this.#classifyError(err), this.#errorMessage(err));
             return;
         }
-        if (token !== this.#loadToken) {
-            // A newer source replaced us mid-load. Cleanup this stale doc.
-            try {
-                await pdfDoc.destroy();
-            }
-            catch {
-                /* ignore */
-            }
+        if (this.#currentLoadingTask === task)
+            this.#currentLoadingTask = null;
+        if (!this.#isActiveLoad(token)) {
+            await this.#destroyDocument(pdfDoc);
             return;
         }
         let meta;
@@ -1523,16 +2305,35 @@ class SdPreviewPdf {
         catch {
             meta = { numPages: pdfDoc.numPages };
         }
+        if (!this.#isActiveLoad(token)) {
+            await this.#destroyDocument(pdfDoc);
+            return;
+        }
+        const outline = await this.#loadOutline(pdfDoc, token);
+        if (!outline || !this.#isActiveLoad(token)) {
+            await this.#destroyDocument(pdfDoc);
+            return;
+        }
         this.#pdfDoc.set(pdfDoc);
         this.#meta.set(meta);
+        this.#setOutline(outline);
         this.#activePage.set(Math.max(1, Math.min(this.startPage(), pdfDoc.numPages)));
+        this.#ensureThumbnailPageVisible(this.#activePage());
         this.#stage.set('ready');
         this.#zoom.set(1);
         this.#rotation.set(0);
         this.#zoomMode.set(this.initialZoom());
-        this.loaded.emit({ totalPages: pdfDoc.numPages, meta });
-        this.pageChange.emit(this.#activePage());
-        await this.#renderActivePage();
+        this.#resetContinuousLayout(pdfDoc.numPages);
+        if (!this.#destroyed) {
+            this.loaded.emit({ totalPages: pdfDoc.numPages, meta });
+            this.pageChange.emit(this.#activePage());
+        }
+        if (this.#scrollModeInternal() === 'continuous') {
+            this.#positionContinuousPage(this.#activePage());
+        }
+        else {
+            await this.#renderActivePage();
+        }
     }
     async #renderActivePage() {
         const pdfDoc = this.#pdfDoc();
@@ -1547,41 +2348,48 @@ class SdPreviewPdf {
         catch {
             return;
         }
-        if (token !== this.#renderToken)
+        if (token !== this.#renderToken || this.#destroyed || this.#pdfDoc() !== pdfDoc) {
+            page.cleanup();
             return;
+        }
         const canvas = this.pageCanvasRef()?.nativeElement;
-        if (!canvas)
+        if (!canvas) {
+            page.cleanup();
             return;
-        // Resolve scale from current zoom mode.
+        }
         const rotation = this.#rotation();
         const baseViewport = page.getViewport({ scale: 1, rotation });
         const scale = this.#resolveScale(baseViewport);
         this.#zoom.set(scale);
-        const viewport = page.getViewport({ scale, rotation });
+        const { logicalViewport, renderViewport } = this.#canvasViewports(page, scale, rotation);
         const ctx = canvas.getContext('2d');
-        if (!ctx)
+        if (!ctx) {
+            page.cleanup();
             return;
-        canvas.width = Math.floor(viewport.width);
-        canvas.height = Math.floor(viewport.height);
-        canvas.style.width = `${viewport.width}px`;
-        canvas.style.height = `${viewport.height}px`;
+        }
+        canvas.width = Math.floor(renderViewport.width);
+        canvas.height = Math.floor(renderViewport.height);
+        canvas.style.width = `${logicalViewport.width}px`;
+        canvas.style.height = `${logicalViewport.height}px`;
         this.#cancelRender();
-        const renderTask = page.render({ canvasContext: ctx, viewport });
+        const renderTask = page.render({ canvasContext: ctx, viewport: renderViewport });
         this.#currentRenderTask = renderTask;
+        let completed = false;
         try {
             await renderTask.promise;
+            completed = token === this.#renderToken && !this.#destroyed && this.#pdfDoc() === pdfDoc;
         }
         catch {
-            // Cancelled mid-flight when user navigated to a new page — fine.
-            return;
+            completed = false;
         }
         finally {
             if (this.#currentRenderTask === renderTask) {
                 this.#currentRenderTask = null;
             }
+            page.cleanup();
         }
-        page.cleanup();
-        this.zoomChange.emit(scale);
+        if (completed)
+            this.zoomChange.emit(scale);
     }
     #resolveScale(baseViewport) {
         const mode = this.#zoomMode();
@@ -1604,6 +2412,16 @@ class SdPreviewPdf {
         // page-fit
         return Math.min(availW / baseViewport.width, availH / baseViewport.height);
     }
+    #canvasViewports(page, scale, rotation) {
+        const logicalViewport = page.getViewport({ scale, rotation });
+        const width = Math.max(1, logicalViewport.width);
+        const height = Math.max(1, logicalViewport.height);
+        const factor = Math.min(1, _a.MAX_CANVAS_DIMENSION / width, _a.MAX_CANVAS_DIMENSION / height, Math.sqrt(_a.MAX_CANVAS_PIXELS / (width * height)));
+        return {
+            logicalViewport,
+            renderViewport: factor < 1 ? page.getViewport({ scale: scale * factor, rotation }) : logicalViewport,
+        };
+    }
     #cancelRender() {
         if (this.#currentRenderTask) {
             try {
@@ -1615,22 +2433,59 @@ class SdPreviewPdf {
             this.#currentRenderTask = null;
         }
     }
-    async #destroyDoc() {
-        const doc = this.#pdfDoc();
-        if (!doc)
+    onStageScroll() {
+        if (this.#scrollModeInternal() === 'continuous')
+            this.#updateContinuousWindow(true);
+    }
+    #cancelLoadingTask() {
+        const task = this.#currentLoadingTask;
+        this.#currentLoadingTask = null;
+        if (!task?.destroy)
             return;
-        this.#pdfDoc.set(null);
+        try {
+            void Promise.resolve(task.destroy()).catch(() => undefined);
+        }
+        catch {
+            return;
+        }
+    }
+    #cancelPrint() {
+        this.#printGeneration++;
+        this.#cancelPrintJob();
+    }
+    #cancelPrintJob() {
+        const job = this.#currentPrintJob;
+        this.#currentPrintJob = null;
+        job?.cancel();
+    }
+    #isActiveLoad(token) {
+        return !this.#destroyed && token === this.#loadToken;
+    }
+    #isCurrentDownload(generation, source, doc) {
+        return !this.#destroyed && generation === this.#downloadGeneration && this.source() === source && this.#pdfDoc() === doc;
+    }
+    async #destroyDocument(doc) {
         try {
             await doc.destroy();
         }
         catch {
-            /* ignore */
+            return;
         }
     }
+    async #destroyDoc() {
+        const doc = this.#pdfDoc();
+        if (!doc)
+            return;
+        this.#pdfDoc.set(null);
+        await this.#destroyDocument(doc);
+    }
     #setZoom(value) {
         const clamped = Math.min(_a.MAX_ZOOM, Math.max(_a.MIN_ZOOM, value));
         this.#zoom.set(clamped);
-        this.#renderActivePage();
+        if (this.#scrollModeInternal() === 'continuous')
+            this.#invalidateContinuousLayout();
+        else
+            void this.#renderActivePage();
     }
     async #normalizeSource(src) {
         if (typeof src === 'string') {
@@ -1638,16 +2493,16 @@ class SdPreviewPdf {
             const headers = this.httpHeaders();
             const spec = { url: src };
             if (headers)
-                spec['httpHeaders'] = headers;
+                spec.httpHeaders = headers;
             return spec;
         }
-        if (src instanceof File) {
+        if (this.#browser.isFile(src)) {
             this.#filename.set(src.name);
             this.#fileSize.set(src.size);
             const buf = await src.arrayBuffer();
             return { data: new Uint8Array(buf) };
         }
-        if (src instanceof Blob) {
+        if (this.#browser.isBlob(src)) {
             this.#filename.set('document.pdf');
             this.#fileSize.set(src.size);
             const buf = await src.arrayBuffer();
@@ -1656,12 +2511,12 @@ class SdPreviewPdf {
         if (src instanceof ArrayBuffer) {
             this.#filename.set('document.pdf');
             this.#fileSize.set(src.byteLength);
-            return { data: new Uint8Array(src) };
+            return { data: new Uint8Array(src.slice(0)) };
         }
         if (src instanceof Uint8Array) {
             this.#filename.set('document.pdf');
             this.#fileSize.set(src.byteLength);
-            return { data: src };
+            return { data: new Uint8Array(src) };
         }
         if (src && typeof src === 'object') {
             if ('url' in src && typeof src.url === 'string') {
@@ -1670,14 +2525,14 @@ class SdPreviewPdf {
                 // Caller-provided headers win over the [httpHeaders] input.
                 const headers = src.httpHeaders ?? this.httpHeaders();
                 if (headers)
-                    spec['httpHeaders'] = headers;
+                    spec.httpHeaders = headers;
                 if (src.withCredentials)
-                    spec['withCredentials'] = true;
+                    spec.withCredentials = true;
                 return spec;
             }
             if ('data' in src && (src.data instanceof ArrayBuffer || src.data instanceof Uint8Array)) {
                 this.#filename.set('document.pdf');
-                const data = src.data instanceof ArrayBuffer ? new Uint8Array(src.data) : src.data;
+                const data = src.data instanceof ArrayBuffer ? new Uint8Array(src.data.slice(0)) : new Uint8Array(src.data);
                 this.#fileSize.set(data.byteLength);
                 return { data };
             }
@@ -1721,10 +2576,30 @@ class SdPreviewPdf {
     }
     #revokeAllBlobs() {
         for (const url of this.#ownedBlobUrls) {
-            URL.revokeObjectURL(url);
+            this.#browser.revokeObjectUrl(url);
         }
         this.#ownedBlobUrls.clear();
-        this.#lastBlobUrl = null;
+    }
+    #requiresLoadedDocumentBytes(source) {
+        if (typeof source === 'string')
+            return !!this.httpHeaders();
+        if (!('url' in source) || typeof source.url !== 'string')
+            return false;
+        return !!source.httpHeaders || !!source.withCredentials || !!this.httpHeaders();
+    }
+    #trackTemporaryDownloadUrl(url) {
+        if (url)
+            this.#ownedBlobUrls.add(url);
+        return url;
+    }
+    #scheduleTemporaryDownloadUrlRelease(url) {
+        const release = () => {
+            if (!this.#ownedBlobUrls.delete(url))
+                return;
+            this.#browser.revokeObjectUrl(url);
+        };
+        if (this.#browser.scheduleFrame(() => release()) === null)
+            queueMicrotask(release);
     }
     // ==========================================
     // SEARCH HELPERS
@@ -1741,7 +2616,8 @@ class SdPreviewPdf {
             return null;
         const escaped = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
         const flags = (caseSensitive ? 'g' : 'gi') + 'u';
-        const pattern = wholeWord ? `\\b${escaped}\\b` : escaped;
+        const wordCharacter = '[\\p{L}\\p{M}\\p{N}\\p{Pc}]';
+        const pattern = wholeWord ? '(?<!' + wordCharacter + ')' + escaped + '(?!' + wordCharacter + ')' : escaped;
         try {
             return new RegExp(pattern, flags);
         }
@@ -1755,10 +2631,12 @@ class SdPreviewPdf {
      * (NFD) matches the same search term — pdfjs has been seen to return NFD
      * in some PDFs.
      */
-    async #getPageText(doc, pageNum) {
-        const cached = this.#pageTextCache.get(pageNum);
-        if (cached !== undefined)
+    async #getPageText(doc, pageNum, searchToken, scan) {
+        const cached = scan.staged.get(pageNum) ?? scan.snapshot.get(pageNum);
+        if (cached !== undefined) {
+            this.#stagePageText(scan, pageNum, cached);
             return cached;
+        }
         let page;
         try {
             page = await doc.getPage(pageNum);
@@ -1768,13 +2646,12 @@ class SdPreviewPdf {
         }
         let text = '';
         try {
-            const tc = (await page.getTextContent());
-            const items = Array.isArray(tc?.items) ? tc.items : [];
+            const content = await page.getTextContent();
+            const items = content && typeof content === 'object' && 'items' in content && Array.isArray(content.items) ? content.items : [];
             const parts = [];
             for (const it of items) {
-                const str = it?.str;
-                if (typeof str === 'string')
-                    parts.push(str);
+                if (it && typeof it === 'object' && 'str' in it && typeof it.str === 'string')
+                    parts.push(it.str);
             }
             // Space-join so multi-word matches across textItem boundaries work.
             text = parts.join(' ').normalize('NFC');
@@ -1782,14 +2659,49 @@ class SdPreviewPdf {
         catch {
             text = '';
         }
-        this.#pageTextCache.set(pageNum, text);
+        finally {
+            page.cleanup();
+        }
+        if (searchToken === this.#searchToken && this.#pdfDoc() === doc && !this.#destroyed) {
+            this.#stagePageText(scan, pageNum, text);
+        }
         return text;
     }
+    #stagePageText(scan, pageNum, text) {
+        scan.staged.delete(pageNum);
+        scan.staged.set(pageNum, text);
+        while (scan.staged.size > _a.MAX_PAGE_TEXT_CACHE_PAGES) {
+            const oldestPage = scan.staged.keys().next().value;
+            if (oldestPage === undefined)
+                break;
+            scan.staged.delete(oldestPage);
+        }
+    }
+    #commitPageTextScan(scan) {
+        for (const [pageNum, text] of scan.staged)
+            this.#cachePageText(pageNum, text);
+    }
+    #cachePageText(pageNum, text) {
+        this.#pageTextCache.delete(pageNum);
+        this.#pageTextCache.set(pageNum, text);
+        while (this.#pageTextCache.size > _a.MAX_PAGE_TEXT_CACHE_PAGES) {
+            const oldestPage = this.#pageTextCache.keys().next().value;
+            if (oldestPage === undefined)
+                break;
+            this.#pageTextCache.delete(oldestPage);
+        }
+        this.#pageTextCacheSize.set(this.#pageTextCache.size);
+    }
+    #clearPageTextCache() {
+        this.#pageTextCache.clear();
+        this.#pageTextCacheSize.set(0);
+    }
     #emitSearchChange() {
         this.searchChange.emit({
             term: this.#searchTerm(),
             total: this.#searchResults().length,
             current: this.#searchActiveIndex() + 1, // 1-based; 0 when no active
+            truncated: this.#searchTruncated(),
         });
     }
     /**
@@ -1819,10 +2731,14 @@ class SdPreviewPdf {
         const pageHits = results.map((r, i) => ({ r, i })).filter(({ r }) => r.page === activePage);
         if (pageHits.length === 0)
             return;
-        const overlay = document.createElement('div');
+        const overlay = this.#browser.createElement('div');
+        if (!overlay)
+            return;
         overlay.className = 'sd-pdf-search-overlay';
         for (const { r, i } of pageHits) {
-            const m = document.createElement('mark');
+            const m = this.#browser.createElement('mark');
+            if (!m)
+                continue;
             m.className = i === activeIdx ? 'sd-pdf-search-hi sd-pdf-search-hi--active' : 'sd-pdf-search-hi';
             m.textContent = r.term;
             overlay.appendChild(m);
@@ -1839,6 +2755,186 @@ class SdPreviewPdf {
             }
         }
     }
+    #onScrollModeChanged() {
+        if (this.#destroyed || this.#stage() !== 'ready')
+            return;
+        if (this.#scrollModeInternal() === 'continuous') {
+            this.#cancelRender();
+            this.#resetContinuousLayout(this.numPages());
+            this.#positionContinuousPage(this.#activePage());
+            return;
+        }
+        this.#cancelContinuousRenders();
+        this.#continuousPages.set([]);
+        this.#continuousTopSpacer.set(0);
+        this.#continuousBottomSpacer.set(0);
+        void this.#renderActivePage();
+    }
+    #estimatedContinuousHeight() {
+        const rotated = this.#rotation() % 180 !== 0;
+        const baseViewport = rotated ? { width: 792, height: 612 } : { width: 612, height: 792 };
+        return Math.max(1, baseViewport.height * this.#resolveScale(baseViewport));
+    }
+    #resetContinuousLayout(pageCount) {
+        const estimatedHeight = this.#estimatedContinuousHeight();
+        this.#pageHeights = Array.from({ length: pageCount }, () => estimatedHeight);
+        this.#heightIndex.reset(this.#pageHeights);
+        this.#continuousHeightVersion.update(version => version + 1);
+    }
+    #continuousPageIndexAt(offset) {
+        return this.#heightIndex.indexAt(offset);
+    }
+    #updateContinuousWindow(updateActivePage) {
+        const stage = this.stageEl()?.nativeElement;
+        const pageCount = this.#pageHeights.length;
+        if (!stage || pageCount === 0 || this.#scrollModeInternal() !== 'continuous')
+            return;
+        const viewportHeight = Math.max(1, stage.clientHeight || stage.getBoundingClientRect().height || 1);
+        const firstVisible = this.#continuousPageIndexAt(stage.scrollTop);
+        const lastVisible = this.#continuousPageIndexAt(stage.scrollTop + viewportHeight - 1);
+        const first = Math.max(0, firstVisible - 1);
+        const last = Math.min(pageCount - 1, lastVisible + 1);
+        const pages = Array.from({ length: last - first + 1 }, (_, index) => first + index + 1);
+        this.#continuousPages.set(pages);
+        this.#continuousTopSpacer.set(this.#heightIndex.offsetAt(first));
+        const renderedEnd = this.#heightIndex.offsetAt(last) + this.#pageHeights[last];
+        this.#continuousBottomSpacer.set(Math.max(0, this.#heightIndex.total() - renderedEnd));
+        const retained = new Set(pages);
+        for (const [pageNumber, task] of this.#continuousTasks) {
+            if (retained.has(pageNumber))
+                continue;
+            task.cancel();
+            this.#continuousTasks.delete(pageNumber);
+        }
+        if (!updateActivePage)
+            return;
+        const midpointPage = this.#continuousPageIndexAt(stage.scrollTop + viewportHeight / 2) + 1;
+        if (midpointPage === this.#activePage())
+            return;
+        this.#activePage.set(midpointPage);
+        if (!this.#destroyed)
+            this.pageChange.emit(midpointPage);
+    }
+    #positionContinuousPage(pageNumber) {
+        const stage = this.stageEl()?.nativeElement;
+        if (stage)
+            stage.scrollTop = this.#heightIndex.offsetAt(pageNumber - 1);
+        this.#updateContinuousWindow(false);
+        this.#rescheduleContinuousRenders();
+    }
+    #invalidateContinuousLayout() {
+        const stage = this.stageEl()?.nativeElement;
+        const anchorIndex = stage ? this.#continuousPageIndexAt(stage.scrollTop) : 0;
+        const oldHeight = this.#pageHeights[anchorIndex] || 1;
+        const oldOffset = this.#heightIndex.offsetAt(anchorIndex);
+        const anchorRatio = stage ? Math.max(0, Math.min(1, (stage.scrollTop - oldOffset) / oldHeight)) : 0;
+        this.#cancelContinuousRenders();
+        this.#resetContinuousLayout(this.numPages());
+        if (stage)
+            stage.scrollTop = this.#heightIndex.offsetAt(anchorIndex) + this.#pageHeights[anchorIndex] * anchorRatio;
+        this.#updateContinuousWindow(false);
+        this.#rescheduleContinuousRenders();
+    }
+    #rescheduleContinuousRenders() {
+        queueMicrotask(() => {
+            if (this.#destroyed || this.#scrollModeInternal() !== 'continuous')
+                return;
+            this.#scheduleContinuousRenders(this.continuousCanvases().map(ref => ref.nativeElement));
+        });
+    }
+    #scheduleContinuousRenders(canvases) {
+        if (this.#continuousFrame !== null)
+            this.#browser.cancelFrame(this.#continuousFrame);
+        if (canvases.length === 0 || this.#scrollModeInternal() !== 'continuous') {
+            this.#continuousFrame = null;
+            return;
+        }
+        this.#continuousFrame = this.#browser.scheduleFrame(() => {
+            this.#continuousFrame = null;
+            for (const canvas of canvases)
+                void this.#renderContinuousCanvas(canvas);
+        });
+    }
+    async #renderContinuousCanvas(canvas) {
+        const pageNumber = Number(canvas.getAttribute('data-page'));
+        const doc = this.#pdfDoc();
+        const generation = this.#layoutGeneration;
+        if (!doc ||
+            !Number.isInteger(pageNumber) ||
+            pageNumber < 1 ||
+            this.#continuousTasks.has(pageNumber) ||
+            this.#continuousReservations.has(pageNumber))
+            return;
+        const reservation = { generation };
+        this.#continuousReservations.set(pageNumber, reservation);
+        let page = null;
+        try {
+            page = await doc.getPage(pageNumber);
+            if (!this.#isCurrentContinuousPage(doc, generation, pageNumber))
+                return;
+            const rotation = this.#rotation();
+            const baseViewport = page.getViewport({ scale: 1, rotation });
+            const scale = this.#resolveScale(baseViewport);
+            const { logicalViewport, renderViewport } = this.#canvasViewports(page, scale, rotation);
+            const context = canvas.getContext('2d');
+            if (!context)
+                return;
+            canvas.width = Math.floor(renderViewport.width);
+            canvas.height = Math.floor(renderViewport.height);
+            canvas.style.width = `${logicalViewport.width}px`;
+            canvas.style.height = `${logicalViewport.height}px`;
+            const task = page.render({ canvasContext: context, viewport: renderViewport });
+            this.#continuousTasks.set(pageNumber, task);
+            try {
+                await task.promise;
+            }
+            catch {
+                return;
+            }
+            finally {
+                if (this.#continuousTasks.get(pageNumber) === task)
+                    this.#continuousTasks.delete(pageNumber);
+            }
+            if (!this.#isCurrentContinuousPage(doc, generation, pageNumber))
+                return;
+            this.#updateContinuousMeasurement(pageNumber, logicalViewport.height);
+            this.#zoom.set(scale);
+            this.zoomChange.emit(scale);
+        }
+        finally {
+            if (this.#continuousReservations.get(pageNumber) === reservation)
+                this.#continuousReservations.delete(pageNumber);
+            page?.cleanup();
+        }
+    }
+    #isCurrentContinuousPage(doc, generation, pageNumber) {
+        return (!this.#destroyed && this.#pdfDoc() === doc && this.#layoutGeneration === generation && this.#continuousPages().includes(pageNumber));
+    }
+    #updateContinuousMeasurement(pageNumber, height) {
+        const index = pageNumber - 1;
+        if (!Number.isFinite(height) || height <= 0 || Math.abs((this.#pageHeights[index] ?? 0) - height) < 0.5)
+            return;
+        const stage = this.stageEl()?.nativeElement;
+        const anchorIndex = stage ? this.#continuousPageIndexAt(stage.scrollTop) : 0;
+        const anchorDelta = stage ? stage.scrollTop - this.#heightIndex.offsetAt(anchorIndex) : 0;
+        this.#pageHeights[index] = height;
+        this.#heightIndex.updateHeight(index, height);
+        this.#continuousHeightVersion.update(version => version + 1);
+        if (stage)
+            stage.scrollTop = this.#heightIndex.offsetAt(anchorIndex) + anchorDelta;
+        this.#updateContinuousWindow(false);
+    }
+    #cancelContinuousRenders() {
+        this.#layoutGeneration++;
+        if (this.#continuousFrame !== null) {
+            this.#browser.cancelFrame(this.#continuousFrame);
+            this.#continuousFrame = null;
+        }
+        for (const task of this.#continuousTasks.values())
+            task.cancel();
+        this.#continuousTasks.clear();
+        this.#continuousReservations.clear();
+    }
     // ==========================================
     // THUMBNAIL HELPERS
     // ==========================================
@@ -1847,42 +2943,46 @@ class SdPreviewPdf {
      * currently mounted. Called from an effect that tracks `thumbCanvases()`.
      */
     #syncThumbObserver(canvases) {
-        // Disconnect prior observer — refs are stale once the @for re-renders.
-        this.#thumbObserver?.disconnect();
+        this.#thumbObserverCleanup?.();
+        this.#thumbObserverCleanup = null;
+        const currentPages = new Set(canvases.map(canvas => Number(canvas.getAttribute('data-page'))).filter(page => Number.isFinite(page)));
+        this.#cancelThumbnailWorkOutside(currentPages);
         if (canvases.length === 0) {
-            this.#thumbObserver = null;
-            return;
-        }
-        // Lazily create an IntersectionObserver scoped to the sidebar scroll
-        // container so we only render thumbs the user can actually see. Falls
-        // back to "render everything" when IntersectionObserver isn't available
-        // (very old runtime / SSR shim).
-        if (typeof IntersectionObserver !== 'function') {
-            for (const c of canvases) {
-                const n = Number(c.getAttribute('data-page'));
-                if (Number.isFinite(n))
-                    void this.#renderThumbnail(n, c);
-            }
             return;
         }
-        this.#thumbObserver = new IntersectionObserver(entries => {
+        this.#thumbObserverCleanup = this.#browser.observeIntersections(canvases, entries => {
             for (const entry of entries) {
                 if (!entry.isIntersecting)
                     continue;
-                const c = entry.target;
-                const n = Number(c.getAttribute('data-page'));
+                const canvas = canvases.find(candidate => candidate === entry.target);
+                if (!canvas)
+                    continue;
+                const n = Number(canvas.getAttribute('data-page'));
                 if (!Number.isFinite(n))
                     continue;
-                this.#thumbObserver?.unobserve(c); // one-shot — cached after first paint
-                void this.#renderThumbnail(n, c);
+                void this.#renderThumbnail(n, canvas);
             }
         }, { rootMargin: '120px 0px 120px 0px', threshold: 0.01 });
-        for (const c of canvases)
-            this.#thumbObserver.observe(c);
+    }
+    #ensureThumbnailPageVisible(pageNumber) {
+        const start = this.#thumbnailWindowStart();
+        const end = start + _a.THUMBNAIL_WINDOW_SIZE;
+        if (pageNumber > start && pageNumber <= end)
+            return;
+        const centered = pageNumber - 1 - Math.floor(_a.THUMBNAIL_WINDOW_SIZE / 2);
+        const next = Math.max(0, Math.min(centered, Math.max(0, this.numPages() - _a.THUMBNAIL_WINDOW_SIZE)));
+        this.#thumbnailWindowStart.set(next);
+        queueMicrotask(() => {
+            const content = this.sidebarContentRef()?.nativeElement;
+            if (content && this.#sidebarModeInternal() === 'thumbnails') {
+                content.scrollTop = next * _a.THUMBNAIL_ITEM_HEIGHT;
+            }
+        });
     }
     /**
      * Render a single page into a sidebar thumbnail canvas at ~140px width.
-     * Cached via `#thumbsRendering` so rapid scroll bounces don't double-render.
+     * Reserved in `#thumbnailWork` before getPage() so rapid scroll bounces
+     * cannot start duplicate work for the same mounted page.
      *
      * Visible for testing — tests can stub `getPage()` on the fake doc to
      * assert this method calls `render(...)` with the right page argument.
@@ -1899,60 +2999,180 @@ class SdPreviewPdf {
         const doc = this.#pdfDoc();
         if (!doc)
             return;
-        if (this.#thumbsRendering.has(pageNum))
+        if (this.#thumbnailWork.has(pageNum))
             return;
-        if (this.#thumbCache()[pageNum]) {
-            // Already cached → just blit the dataURL onto the canvas.
-            this.#paintCachedThumb(canvas, this.#thumbCache()[pageNum]);
+        const cachedThumbnail = this.#getCachedThumbnail(pageNum);
+        if (cachedThumbnail) {
+            this.#paintCachedThumb(canvas, cachedThumbnail, this.#loadToken);
             return;
         }
-        this.#thumbsRendering.add(pageNum);
+        const loadToken = this.#loadToken;
+        const work = {
+            loadToken,
+            cancelled: false,
+            renderTask: null,
+            slotState: 'new',
+            resumeSlot: null,
+        };
+        this.#thumbnailWork.set(pageNum, work);
+        this.#thumbnailWorkCount.set(this.#thumbnailWork.size);
+        let page = null;
+        let acquiredSlot = false;
         try {
-            const page = await doc.getPage(pageNum);
-            // Target ~140px wide for sidebar thumbs (handoff says 152px, leave a
-            // small margin so the canvas itself can fit inside the page wrapper's
-            // outline). PDF page viewport at scale=1 ≈ 612 wide; pick scale so the
-            // result lands near 140px.
+            acquiredSlot = await this.#acquireThumbnailSlot(work);
+            if (!acquiredSlot || !this.#isThumbnailWorkActive(pageNum, work, doc))
+                return;
+            page = await doc.getPage(pageNum);
+            if (!this.#isThumbnailWorkActive(pageNum, work, doc))
+                return;
             const baseViewport = page.getViewport({ scale: 1 });
             const scale = 140 / Math.max(1, baseViewport.width);
-            const viewport = page.getViewport({ scale });
-            canvas.width = Math.floor(viewport.width);
-            canvas.height = Math.floor(viewport.height);
-            canvas.style.width = `${viewport.width}px`;
-            canvas.style.height = `${viewport.height}px`;
+            const { logicalViewport, renderViewport } = this.#canvasViewports(page, scale);
+            canvas.width = Math.floor(renderViewport.width);
+            canvas.height = Math.floor(renderViewport.height);
+            canvas.style.width = `${logicalViewport.width}px`;
+            canvas.style.height = `${logicalViewport.height}px`;
             const ctx = canvas.getContext('2d');
             if (!ctx)
                 return;
-            const renderTask = page.render({ canvasContext: ctx, viewport });
+            const renderTask = page.render({ canvasContext: ctx, viewport: renderViewport });
+            work.renderTask = renderTask;
             try {
                 await renderTask.promise;
             }
             catch {
-                return; // cancelled / failed silently — keep the blank thumb
+                return;
             }
+            if (!this.#isThumbnailWorkActive(pageNum, work, doc))
+                return;
             try {
                 const dataUrl = canvas.toDataURL('image/png');
-                this.#thumbCache.update(prev => ({ ...prev, [pageNum]: dataUrl }));
+                this.#cacheThumbnail(pageNum, dataUrl);
             }
             catch {
-                // Tainted canvas (e.g. dev mock) — just skip caching, keep visual.
+                return;
             }
-            page.cleanup();
         }
         catch {
-            // Page load failed — leave the thumb blank rather than throwing.
+            return;
         }
         finally {
-            this.#thumbsRendering.delete(pageNum);
+            if (acquiredSlot)
+                this.#releaseThumbnailSlot(work);
+            if (this.#thumbnailWork.get(pageNum) === work) {
+                this.#thumbnailWork.delete(pageNum);
+                this.#thumbnailWorkCount.set(this.#thumbnailWork.size);
+            }
+            page?.cleanup();
+        }
+    }
+    #isThumbnailWorkActive(pageNum, work, doc) {
+        return (!work.cancelled &&
+            work.loadToken === this.#loadToken &&
+            this.#isActiveLoad(work.loadToken) &&
+            this.#pdfDoc() === doc &&
+            this.#thumbnailWork.get(pageNum) === work &&
+            this.pageNumbers().includes(pageNum));
+    }
+    #getCachedThumbnail(pageNum) {
+        const cached = this.#thumbnailCacheLru.get(pageNum);
+        if (cached === undefined)
+            return undefined;
+        this.#thumbnailCacheLru.delete(pageNum);
+        this.#thumbnailCacheLru.set(pageNum, cached);
+        return cached;
+    }
+    #cacheThumbnail(pageNum, dataUrl) {
+        this.#thumbnailCacheLru.delete(pageNum);
+        this.#thumbnailCacheLru.set(pageNum, dataUrl);
+        while (this.#thumbnailCacheLru.size > _a.MAX_THUMBNAIL_CACHE_ENTRIES) {
+            const oldestPage = this.#thumbnailCacheLru.keys().next().value;
+            if (oldestPage === undefined)
+                break;
+            this.#thumbnailCacheLru.delete(oldestPage);
+        }
+        this.#thumbCache.set(Object.fromEntries(this.#thumbnailCacheLru));
+    }
+    #cancelThumbnailRenders() {
+        for (const work of this.#thumbnailWork.values())
+            this.#cancelThumbnailWork(work);
+        this.#thumbnailWork.clear();
+        this.#thumbnailWorkCount.set(0);
+    }
+    #cancelThumbnailWorkOutside(currentPages) {
+        for (const [pageNumber, work] of this.#thumbnailWork) {
+            if (currentPages.has(pageNumber))
+                continue;
+            this.#cancelThumbnailWork(work);
+            this.#thumbnailWork.delete(pageNumber);
+        }
+        this.#thumbnailWorkCount.set(this.#thumbnailWork.size);
+    }
+    #cancelThumbnailWork(work) {
+        work.cancelled = true;
+        if (work.slotState === 'queued') {
+            const queueIndex = this.#thumbnailSlotQueue.indexOf(work);
+            if (queueIndex >= 0)
+                this.#thumbnailSlotQueue.splice(queueIndex, 1);
+            work.slotState = 'released';
+            const resume = work.resumeSlot;
+            work.resumeSlot = null;
+            resume?.(false);
+        }
+        try {
+            work.renderTask?.cancel();
+        }
+        catch {
+            // Cancellation is best-effort; the identity guard still blocks late cache writes.
+        }
+    }
+    #acquireThumbnailSlot(work) {
+        if (work.cancelled || this.#destroyed)
+            return Promise.resolve(false);
+        if (this.#activeThumbnailSlots < _a.MAX_CONCURRENT_THUMBNAIL_WORK) {
+            this.#activeThumbnailSlots++;
+            work.slotState = 'active';
+            return Promise.resolve(true);
+        }
+        work.slotState = 'queued';
+        return new Promise(resolve => {
+            work.resumeSlot = resolve;
+            this.#thumbnailSlotQueue.push(work);
+        });
+    }
+    #releaseThumbnailSlot(work) {
+        if (work.slotState !== 'active')
+            return;
+        work.slotState = 'released';
+        this.#activeThumbnailSlots = Math.max(0, this.#activeThumbnailSlots - 1);
+        while (this.#thumbnailSlotQueue.length > 0) {
+            const next = this.#thumbnailSlotQueue.shift();
+            if (next.cancelled || next.slotState !== 'queued') {
+                const resumeCancelled = next.resumeSlot;
+                next.resumeSlot = null;
+                next.slotState = 'released';
+                resumeCancelled?.(false);
+                continue;
+            }
+            this.#activeThumbnailSlots++;
+            next.slotState = 'active';
+            const resume = next.resumeSlot;
+            next.resumeSlot = null;
+            resume?.(true);
+            break;
         }
     }
     /**
      * Paint a previously-rendered dataURL onto a freshly-mounted canvas so the
      * mini-page reappears without re-rasterizing.
      */
-    #paintCachedThumb(canvas, dataUrl) {
-        const img = new Image();
+    #paintCachedThumb(canvas, dataUrl, loadToken) {
+        const img = this.#browser.createImage();
+        if (!img)
+            return;
         img.onload = () => {
+            if (!this.#isActiveLoad(loadToken))
+                return;
             canvas.width = img.naturalWidth;
             canvas.height = img.naturalHeight;
             canvas.style.width = `${img.naturalWidth}px`;
@@ -1963,7 +3183,7 @@ class SdPreviewPdf {
         img.src = dataUrl;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdPreviewPdf, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdPreviewPdf, isStandalone: true, selector: "sd-preview-pdf", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, startPage: { classPropertyName: "startPage", publicName: "startPage", isSignal: true, isRequired: false, transformFunction: null }, initialZoom: { classPropertyName: "initialZoom", publicName: "initialZoom", isSignal: true, isRequired: false, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: false, transformFunction: null }, sidebarOpen: { classPropertyName: "sidebarOpen", publicName: "sidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, scrollMode: { classPropertyName: "scrollMode", publicName: "scrollMode", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, httpHeaders: { classPropertyName: "httpHeaders", publicName: "httpHeaders", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", loaded: "loaded", pageChange: "pageChange", zoomChange: "zoomChange", download: "download", loadError: "loadError", searchChange: "searchChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-theme": "theme()", "class.sd-preview-pdf-host--fullscreen": "isFullscreen()" }, classAttribute: "sd-preview-pdf-host" }, viewQueries: [{ propertyName: "pageCanvasRef", first: true, predicate: ["pageCanvas"], descendants: true, isSignal: true }, { propertyName: "stageEl", first: true, predicate: ["stageRef"], descendants: true, isSignal: true }, { propertyName: "pageInputRef", first: true, predicate: ["pageInput"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "thumbCanvases", predicate: ["thumbCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  sd-preview-pdf shell. Self-contained \u2014 sizes to its parent. Consumer wraps\n  in <sd-modal>/<sd-side-drawer>/page section. Header + sidebar + stage +\n  floating toolbar mirror Artboards A / C / E from the design handoff.\n-->\n<div class=\"sd-preview-pdf-shell\" role=\"region\">\n  @let _stage = stage();\n  @let _numPages = numPages();\n  @let _activePage = activePage();\n  @let _isSidebarOpen = isSidebarOpen();\n  @let _searchBarOpen = searchBarOpen();\n  @let _searchTerm = searchTerm();\n  @let _searchTotal = searchTotal();\n\n  <!-- ============================================\n       HEADER BAR \u2014 hidden in empty + loading per design\n       ============================================ -->\n  @if (_stage === 'ready') {\n    <div class=\"sd-preview-pdf-header\">\n      <div class=\"sd-preview-pdf-header__left\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"_isSidebarOpen\"\n          [attr.aria-label]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.data-autoId]=\"autoIdSidebarToggle()\"\n          (click)=\"toggleSidebar()\">\n          <sd-icon fontIcon=\"menu\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-header__divider\"></span>\n        <div class=\"sd-preview-pdf-fileicon\" aria-hidden=\"true\">PDF</div>\n        <div class=\"sd-preview-pdf-header__meta\">\n          <div class=\"sd-preview-pdf-header__name\" [title]=\"title() || filename()\">\n            {{ title() || filename() }}\n          </div>\n          <div class=\"sd-preview-pdf-header__sub\">\n            {{ 'core.component.preview-pdf.pages-count' | translate: { count: _numPages } }}\n          </div>\n        </div>\n      </div>\n\n      <div class=\"sd-preview-pdf-header__right\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"_searchBarOpen\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.data-autoId]=\"autoIdSearchToggle()\"\n          (click)=\"searchBarOpen() ? closeSearch() : openSearch()\">\n          <sd-icon fontIcon=\"search\"></sd-icon>\n        </button>\n        @if (downloadable()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.data-autoId]=\"autoIdDownload()\"\n            (click)=\"downloadFile()\">\n            <sd-icon fontIcon=\"download\"></sd-icon>\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.fullscreen' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.fullscreen' | translate\"\n          [attr.data-autoId]=\"autoIdFullscreen()\"\n          (click)=\"toggleFullscreen()\">\n          <sd-icon [fontIcon]=\"isFullscreen() ? 'fullscreen_exit' : 'fullscreen'\"></sd-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- ============================================\n         SEARCH BAR \u2014 between header + body, only when bar is open\n         ============================================ -->\n    @if (_searchBarOpen) {\n      <div class=\"sd-preview-pdf-searchbar\" role=\"search\">\n        <sd-icon class=\"sd-preview-pdf-searchbar__icon\" fontIcon=\"search\"></sd-icon>\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"sd-preview-pdf-searchbar__input\"\n          [attr.placeholder]=\"'core.component.preview-pdf.search-placeholder' | translate\"\n          [value]=\"_searchTerm\"\n          [attr.data-autoId]=\"autoIdSearchInput()\"\n          (input)=\"onSearchInput($any($event.target).value)\" />\n        <span class=\"sd-preview-pdf-searchbar__counter\" aria-live=\"polite\"> {{ searchCurrent() }} / {{ _searchTotal }} </span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"_searchTotal === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.data-autoId]=\"autoIdSearchPrev()\"\n          (click)=\"searchPrev()\">\n          <sd-icon fontIcon=\"keyboard_arrow_up\"></sd-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"_searchTotal === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.data-autoId]=\"autoIdSearchNext()\"\n          (click)=\"searchNext()\">\n          <sd-icon fontIcon=\"keyboard_arrow_down\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__divider\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchCaseSensitive()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.data-autoId]=\"autoIdSearchCase()\"\n          (click)=\"toggleSearchCaseSensitive()\">\n          <sd-icon fontIcon=\"match_case\"></sd-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchWholeWord()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.data-autoId]=\"autoIdSearchWhole()\"\n          (click)=\"toggleSearchWholeWord()\">\n          <sd-icon fontIcon=\"text_fields\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__spacer\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.data-autoId]=\"autoIdSearchClose()\"\n          (click)=\"closeSearch()\">\n          <sd-icon fontIcon=\"close\"></sd-icon>\n        </button>\n      </div>\n    }\n  }\n\n  <!-- ============================================\n       BODY \u2014 sidebar + stage\n       ============================================ -->\n  <div class=\"sd-preview-pdf-body\">\n    <!-- SIDEBAR ............................................................. -->\n    @if (_stage === 'ready' && _isSidebarOpen) {\n      <aside class=\"sd-preview-pdf-sidebar\" role=\"complementary\">\n        @let _sidebarMode = sidebarMode();\n        <div class=\"sd-preview-pdf-sidebar__tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'thumbnails'\"\n            [attr.data-autoId]=\"autoIdTabThumbnails()\"\n            (click)=\"setSidebarMode('thumbnails')\">\n            <sd-icon fontIcon=\"view_carousel\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.tab.thumbnails' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'outline'\"\n            [attr.data-autoId]=\"autoIdTabOutline()\"\n            (click)=\"setSidebarMode('outline')\">\n            <sd-icon fontIcon=\"list\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.tab.outline' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'search'\"\n            [attr.data-autoId]=\"autoIdTabSearch()\"\n            (click)=\"setSidebarMode('search')\">\n            <sd-icon fontIcon=\"search\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.tab.search' | translate }}</span>\n          </button>\n        </div>\n\n        <div class=\"sd-preview-pdf-sidebar__content\">\n          @switch (_sidebarMode) {\n            @case ('thumbnails') {\n              <ul class=\"sd-preview-pdf-thumb-list\">\n                @for (p of pageNumbers(); track trackByPage($index, p); let pi = $index) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      class=\"sd-preview-pdf-thumb\"\n                      [class.sd-preview-pdf-thumb--active]=\"p === _activePage\"\n                      [attr.aria-current]=\"p === _activePage ? 'page' : null\"\n                      [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: p, total: _numPages }\"\n                      [attr.data-autoId]=\"autoIdThumb(pi)\"\n                      (click)=\"goToPage(p)\">\n                      <div class=\"sd-preview-pdf-thumb__page\">\n                        <canvas #thumbCanvas class=\"sd-preview-pdf-thumb__canvas\" [attr.data-page]=\"p\" aria-hidden=\"true\"></canvas>\n                      </div>\n                      <span class=\"sd-preview-pdf-thumb__label\">{{ p }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @case ('outline') {\n              <!-- TODO(preview-pdf): outline tree (pdfDoc.getOutline()) deferred to follow-up commit. -->\n              <div class=\"sd-preview-pdf-sidebar__deferred\">\n                <sd-icon fontIcon=\"list\"></sd-icon>\n                <p>{{ 'core.component.preview-pdf.deferred.outline' | translate }}</p>\n              </div>\n            }\n            @case ('search') {\n              @if (!_searchTerm) {\n                <div class=\"sd-preview-pdf-sidebar__deferred\">\n                  <sd-icon fontIcon=\"search\"></sd-icon>\n                  <p>{{ 'core.component.preview-pdf.search-placeholder' | translate }}</p>\n                </div>\n              } @else if (_searchTotal === 0) {\n                <div class=\"sd-preview-pdf-sidebar__deferred\">\n                  <sd-icon fontIcon=\"search_off\"></sd-icon>\n                  <p>{{ 'core.component.preview-pdf.search-no-results' | translate }}</p>\n                </div>\n              } @else {\n                <ul class=\"sd-preview-pdf-search-list\">\n                  @for (r of searchResults(); track $index; let i = $index) {\n                    <li>\n                      <button\n                        type=\"button\"\n                        class=\"sd-preview-pdf-search-result\"\n                        [class.sd-preview-pdf-search-result--active]=\"i === searchActiveIndex()\"\n                        [attr.data-autoId]=\"autoIdResult(i)\"\n                        (click)=\"goToPage(r.page)\">\n                        <span class=\"sd-preview-pdf-search-result__snippet\">\n                          {{ r.before }}<mark>{{ r.term }}</mark\n                          >{{ r.after }}\n                        </span>\n                        <span class=\"sd-preview-pdf-search-result__page\">{{ r.page }}</span>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n            }\n            @default {\n              <div class=\"sd-preview-pdf-sidebar__deferred\"></div>\n            }\n          }\n        </div>\n      </aside>\n    }\n\n    <!-- STAGE ............................................................... -->\n    <div class=\"sd-preview-pdf-stage\" #stageRef (wheel)=\"onWheel($event)\">\n      @switch (_stage) {\n        @case ('empty') {\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--muted\">\n              <sd-icon fontIcon=\"picture_as_pdf\"></sd-icon>\n            </div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.empty.title' | translate }}\n            </div>\n            <div class=\"sd-preview-pdf-status__hint\">\n              {{ 'core.component.preview-pdf.empty.subtitle' | translate }}\n            </div>\n          </div>\n        }\n        @case ('loading') {\n          @let _loadPercent = loadPercent();\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-spinner\" role=\"progressbar\"></div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.loading' | translate }}\n              @if (_loadPercent > 0) {\n                <span class=\"sd-preview-pdf-progress-pct\">&nbsp;{{ _loadPercent }}%</span>\n              }\n            </div>\n            <div class=\"sd-preview-pdf-progress\">\n              <div class=\"sd-preview-pdf-progress__fill\" [style.width.%]=\"_loadPercent\"></div>\n            </div>\n          </div>\n        }\n        @case ('error') {\n          @if (loadError$(); as err) {\n            <div class=\"sd-preview-pdf-status\">\n              <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--danger\">\n                <sd-icon fontIcon=\"error\"></sd-icon>\n              </div>\n              <div class=\"sd-preview-pdf-status__title\">\n                {{ 'core.component.preview-pdf.error.' + err.reason + '.title' | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__hint\">\n                {{ 'core.component.preview-pdf.error.' + err.reason + '.body' | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__actions\">\n                <button type=\"button\" class=\"sd-preview-pdf-btn-primary\" (click)=\"retryLoad()\" [attr.data-autoId]=\"autoIdRetry()\">\n                  <sd-icon fontIcon=\"refresh\"></sd-icon>\n                  <span>{{ 'core.component.preview-pdf.error.retry' | translate }}</span>\n                </button>\n                @if (downloadable()) {\n                  <button type=\"button\" class=\"sd-preview-pdf-btn-secondary\" (click)=\"downloadFile()\">\n                    <sd-icon fontIcon=\"download\"></sd-icon>\n                    <span>{{ 'core.component.preview-pdf.error.download-raw' | translate }}</span>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        }\n        @default {\n          <div class=\"sd-preview-pdf-page-wrap\">\n            <canvas\n              #pageCanvas\n              class=\"sd-preview-pdf-page\"\n              role=\"img\"\n              [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: _activePage, total: _numPages }\">\n            </canvas>\n          </div>\n        }\n      }\n\n      <!-- FLOATING TOOLBAR ........................................ -->\n      @if (showToolbar() && _stage === 'ready') {\n        @let _canPrev = canPrev();\n        @let _canNext = canNext();\n        @let _zoomMode = zoomMode();\n        @let _scrollModeCurrent = scrollModeCurrent();\n        <div class=\"sd-preview-pdf-toolbar\" role=\"toolbar\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canPrev\"\n            [attr.aria-label]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.data-autoId]=\"autoIdFirst()\"\n            (click)=\"firstPage()\">\n            <sd-icon fontIcon=\"first_page\"></sd-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canPrev\"\n            [attr.aria-label]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.data-autoId]=\"autoIdPrev()\"\n            (click)=\"prevPage()\">\n            <sd-icon fontIcon=\"chevron_left\"></sd-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__page\">\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              class=\"sd-preview-pdf-toolbar__page-input\"\n              [value]=\"_activePage\"\n              #pageInput\n              (keydown.enter)=\"onPageInputEnter($event)\"\n              (blur)=\"onPageInputBlur($event)\"\n              [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: _activePage, total: _numPages }\"\n              [attr.data-autoId]=\"autoIdPageInput()\" />\n            <span class=\"sd-preview-pdf-toolbar__page-total\">/ {{ _numPages }}</span>\n          </span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canNext\"\n            [attr.aria-label]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.data-autoId]=\"autoIdNext()\"\n            (click)=\"nextPage()\">\n            <sd-icon fontIcon=\"chevron_right\"></sd-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canNext\"\n            [attr.aria-label]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.data-autoId]=\"autoIdLast()\"\n            (click)=\"lastPage()\">\n            <sd-icon fontIcon=\"last_page\"></sd-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.data-autoId]=\"autoIdZoomOut()\"\n            (click)=\"zoomOut()\">\n            <sd-icon fontIcon=\"remove\"></sd-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__zoom\" aria-live=\"polite\" [attr.data-autoId]=\"autoIdZoomReadout()\">{{ zoomPercent() }}%</span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.data-autoId]=\"autoIdZoomIn()\"\n            (click)=\"zoomIn()\">\n            <sd-icon fontIcon=\"add\"></sd-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"_zoomMode === 'page-fit'\"\n            [attr.data-autoId]=\"autoIdFitPage()\"\n            (click)=\"setZoom('page-fit')\">\n            <sd-icon fontIcon=\"fit_screen\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.fit-page' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"_zoomMode === 'page-width'\"\n            [attr.data-autoId]=\"autoIdFitWidth()\"\n            (click)=\"setZoom('page-width')\">\n            <sd-icon fontIcon=\"swap_horiz\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.fit-width' | translate }}</span>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.data-autoId]=\"autoIdRotate()\"\n            (click)=\"rotate('right')\">\n            <sd-icon fontIcon=\"rotate_right\"></sd-icon>\n          </button>\n\n          <!-- TODO(preview-pdf): scroll mode toggle is signature-only;\n               clicking switches the state but rendering stays single-page\n               until the continuous scroll feature lands. -->\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [attr.data-autoId]=\"autoIdScrollMode()\"\n            (click)=\"setScrollMode(_scrollModeCurrent === 'page' ? 'continuous' : 'page')\">\n            <sd-icon [fontIcon]=\"_scrollModeCurrent === 'page' ? 'description' : 'view_day'\"></sd-icon>\n            <span>\n              {{\n                (_scrollModeCurrent === 'page' ? 'core.component.preview-pdf.scroll-page' : 'core.component.preview-pdf.scroll-continuous')\n                  | translate\n              }}\n            </span>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--sd-pdf-shell-bg: #1a1c1f;--sd-pdf-sidebar-bg: #22252a;--sd-pdf-toolbar-bg: rgba(20, 22, 25, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .4);--sd-pdf-divider: rgba(255, 255, 255, .08);--sd-pdf-fg: #f5f6f7;--sd-pdf-fg-muted: rgba(255, 255, 255, .6);--sd-pdf-fg-subtle: rgba(255, 255, 255, .4);--sd-pdf-primary: var(--sd-pdf-accent, var(--sd-primary, #005cbb));--sd-pdf-primary-soft: var(--sd-pdf-accent-soft, rgba(0, 92, 187, .18));--sd-pdf-danger: var(--sd-error, #ba1a1a);--sd-pdf-success: var(--sd-success, #2e7d32);--sd-pdf-danger-soft: rgba(186, 26, 26, .1);--sd-pdf-danger-border: rgba(186, 26, 26, .3);--sd-pdf-danger-tint: rgba(186, 26, 26, .15);--sd-pdf-hover-bg: rgba(255, 255, 255, .1);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(249, 115, 22, .85);display:block;width:100%;height:100%;min-height:320px;outline:none}:host([data-theme=light]){--sd-pdf-shell-bg: #f7f8fa;--sd-pdf-sidebar-bg: #ffffff;--sd-pdf-toolbar-bg: rgba(255, 255, 255, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .12);--sd-pdf-divider: rgba(0, 0, 0, .08);--sd-pdf-fg: #1a1c1f;--sd-pdf-fg-muted: rgba(0, 0, 0, .62);--sd-pdf-fg-subtle: rgba(0, 0, 0, .42);--sd-pdf-primary: var(--sd-pdf-accent, var(--sd-primary, #005cbb));--sd-pdf-primary-soft: var(--sd-pdf-accent-soft, rgba(0, 92, 187, .16));--sd-pdf-danger: var(--sd-error, #ba1a1a);--sd-pdf-success: var(--sd-success, #2e7d32);--sd-pdf-danger-soft: rgba(186, 26, 26, .08);--sd-pdf-danger-border: rgba(186, 26, 26, .25);--sd-pdf-danger-tint: rgba(186, 26, 26, .12);--sd-pdf-hover-bg: rgba(0, 0, 0, .06);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(250, 204, 21, .9)}:host(.sd-preview-pdf-host--fullscreen){width:100vw;height:100vh;min-height:0}.sd-preview-pdf-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-pdf-shell-bg);color:var(--sd-pdf-fg);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0a;font-family:inherit}.sd-preview-pdf-header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:57px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sd-pdf-divider);flex:0 0 auto;z-index:2}.sd-preview-pdf-header__left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}.sd-preview-pdf-header__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.sd-preview-pdf-header__divider{display:inline-block;width:1px;height:20px;background:var(--sd-pdf-divider)}.sd-preview-pdf-header__meta{display:flex;flex-direction:column;min-width:0}.sd-preview-pdf-header__name{font-size:14px;font-weight:500;color:var(--sd-pdf-fg);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-preview-pdf-header__sub{font-size:11px;color:var(--sd-pdf-fg-muted);margin-top:2px}.sd-preview-pdf-fileicon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:var(--sd-pdf-danger-tint);border:1px solid var(--sd-pdf-danger-border);color:var(--sd-error-light, #f87171);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.sd-preview-pdf-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 8px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;flex-shrink:0}.sd-preview-pdf-iconbtn sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-iconbtn__label{font-size:13px;font-weight:500}.sd-preview-pdf-iconbtn:hover:not(:disabled){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-iconbtn:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-iconbtn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-iconbtn--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-searchbar{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);border-bottom:1px solid var(--sd-pdf-divider);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex:0 0 auto;z-index:2}.sd-preview-pdf-searchbar__icon{color:var(--sd-pdf-fg-muted);font-size:18px;width:18px;height:18px;flex-shrink:0}.sd-preview-pdf-searchbar__input{flex:0 1 360px;min-width:160px;height:30px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:6px;padding:0 10px;font-size:13px;outline:none}.sd-preview-pdf-searchbar__input::placeholder{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-searchbar__input:focus{border-color:var(--sd-pdf-primary);background:#ffffff17}.sd-preview-pdf-searchbar__counter{color:var(--sd-pdf-fg-muted);font-size:12px;font-variant-numeric:tabular-nums;min-width:48px;text-align:center;flex-shrink:0}.sd-preview-pdf-searchbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);flex-shrink:0}.sd-preview-pdf-searchbar__spacer{flex:1 1 auto}.sd-pdf-search-overlay{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:4px;max-width:80%;pointer-events:none;z-index:5}.sd-pdf-search-hi{display:inline-block;padding:1px 4px;border-radius:2px;background:var(--sd-pdf-search-hi);color:#000;font-size:12px;font-weight:500}.sd-pdf-search-hi--active{background:var(--sd-pdf-search-hi-active);color:#fff;box-shadow:0 0 0 2px #fff6}.sd-preview-pdf-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:row;overflow:hidden}.sd-preview-pdf-sidebar{width:240px;display:flex;flex-direction:column;background:var(--sd-pdf-sidebar-bg);border-right:1px solid var(--sd-pdf-divider);flex-shrink:0;min-height:0}.sd-preview-pdf-sidebar__tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-sidebar__tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 4px;background:transparent;border:none;color:var(--sd-pdf-fg-muted);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-sidebar__tab sd-icon{font-size:14px;width:14px;height:14px}.sd-preview-pdf-sidebar__tab:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-sidebar__tab--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-sidebar__content{flex:1 1 auto;overflow:auto;padding:12px}.sd-preview-pdf-sidebar__deferred{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-sidebar__deferred sd-icon{font-size:28px;width:28px;height:28px;opacity:.6}.sd-preview-pdf-sidebar__deferred p{margin:0;font-size:12px;line-height:1.5}.sd-preview-pdf-thumb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.sd-preview-pdf-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:0;background:transparent;border:none;cursor:pointer}.sd-preview-pdf-thumb__page{width:152px;aspect-ratio:612/792;background:var(--sd-pdf-page-bg);border-radius:2px;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;box-shadow:0 2px 6px #0000004d;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;background-image:linear-gradient(90deg,#0000,#0000000a,#0000);background-size:200% 100%;animation:sd-preview-pdf-thumb-skel 1.6s ease-in-out infinite}.sd-preview-pdf-thumb__canvas{display:block;max-width:100%;max-height:100%;background:var(--sd-pdf-page-bg)}.sd-preview-pdf-thumb__label{font-size:11px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-primary);outline-offset:-2px}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__label{color:var(--sd-pdf-primary);font-weight:600}.sd-preview-pdf-thumb:focus-visible .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;background:var(--sd-pdf-shell-bg);background-image:linear-gradient(45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.015) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:auto;padding:32px 24px 96px;display:flex;justify-content:center;align-items:flex-start}:host([data-theme=light]) .sd-preview-pdf-stage{background-image:linear-gradient(45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.015) 75%)}.sd-preview-pdf-page-wrap{display:inline-block;position:relative}.sd-preview-pdf-page{display:block;background:var(--sd-pdf-page-bg);border-radius:2px;box-shadow:var(--sd-pdf-page-shadow);max-width:100%}.sd-preview-pdf-toolbar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;padding:5px 6px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--sd-pdf-divider);border-radius:10px;box-shadow:0 8px 30px #0006;z-index:4;max-width:calc(100% - 32px);overflow-x:auto}.sd-preview-pdf-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:28px;padding:0 6px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-toolbar__btn sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-toolbar__btn span{font-size:13px;font-weight:500}.sd-preview-pdf-toolbar__btn--with-label{padding:0 10px}.sd-preview-pdf-toolbar__btn--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-toolbar__btn:hover:not(:disabled):not(.sd-preview-pdf-toolbar__btn--active){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-toolbar__btn:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-toolbar__btn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-toolbar__page{display:inline-flex;align-items:center;gap:4px;padding:0 6px;flex-shrink:0}.sd-preview-pdf-toolbar__page-input{width:36px;height:24px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:4px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;outline:none}.sd-preview-pdf-toolbar__page-input:focus{border-color:var(--sd-pdf-primary)}.sd-preview-pdf-toolbar__page-total{font-size:13px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-toolbar__zoom{min-width:56px;text-align:center;color:var(--sd-pdf-fg);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;background:#ffffff14;border-radius:4px;padding:2px 8px}.sd-preview-pdf-toolbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);margin:0 4px;flex-shrink:0}.sd-preview-pdf-status{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;max-width:420px}.sd-preview-pdf-status__tile{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-status__tile sd-icon{font-size:48px;width:48px;height:48px}.sd-preview-pdf-status__tile--muted{background:#ffffff0d}.sd-preview-pdf-status__tile--muted sd-icon{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-status__tile--danger{background:var(--sd-pdf-danger-soft);border-color:var(--sd-pdf-danger-border)}.sd-preview-pdf-status__tile--danger sd-icon{color:var(--sd-pdf-danger)}.sd-preview-pdf-status__title{font-size:16px;font-weight:500;color:var(--sd-pdf-fg)}.sd-preview-pdf-status__hint{font-size:13px;color:var(--sd-pdf-fg-muted);line-height:1.5}.sd-preview-pdf-status__actions{display:flex;gap:8px;margin-top:4px}.sd-preview-pdf-progress-pct{font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted)}.sd-preview-pdf-progress{width:240px;height:4px;background:#ffffff14;border-radius:999px;overflow:hidden}.sd-preview-pdf-progress__fill{height:100%;background:var(--sd-pdf-primary);transition:width .12s linear}.sd-preview-pdf-spinner{width:56px;height:56px;border-radius:999px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--sd-pdf-primary);animation:sd-preview-pdf-spin .9s linear infinite}@keyframes sd-preview-pdf-spin{to{transform:rotate(360deg)}}@keyframes sd-preview-pdf-thumb-skel{0%{background-position:200% 0}to{background-position:-200% 0}}.sd-preview-pdf-search-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.sd-preview-pdf-search-result{width:100%;display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#ffffff0a;border:1px solid transparent;border-radius:6px;color:var(--sd-pdf-fg);cursor:pointer;text-align:left;transition:background .12s,border-color .12s}.sd-preview-pdf-search-result:hover{background:#ffffff12}.sd-preview-pdf-search-result--active{background:var(--sd-pdf-primary-soft);border-color:#005cbb73}.sd-preview-pdf-search-result__snippet{flex:1 1 auto;font-size:12px;line-height:1.4;color:var(--sd-pdf-fg);word-break:break-word}.sd-preview-pdf-search-result__snippet mark{background:var(--sd-pdf-search-hi);color:#000;padding:0 2px;border-radius:2px}.sd-preview-pdf-search-result__page{flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted);background:#ffffff0f;padding:2px 6px;border-radius:4px}.sd-preview-pdf-btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:var(--sd-pdf-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:filter .12s}.sd-preview-pdf-btn-primary sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-primary:hover{filter:brightness(1.1)}.sd-preview-pdf-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:2px}.sd-preview-pdf-btn-secondary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:transparent;color:var(--sd-pdf-fg);border:1px solid var(--sd-pdf-divider);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:background .12s}.sd-preview-pdf-btn-secondary sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-secondary:hover{background:#ffffff0f}.sd-preview-pdf-btn-secondary:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdPreviewPdf, isStandalone: true, selector: "sd-preview-pdf", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, startPage: { classPropertyName: "startPage", publicName: "startPage", isSignal: true, isRequired: false, transformFunction: null }, initialZoom: { classPropertyName: "initialZoom", publicName: "initialZoom", isSignal: true, isRequired: false, transformFunction: null }, sidebar: { classPropertyName: "sidebar", publicName: "sidebar", isSignal: true, isRequired: false, transformFunction: null }, sidebarOpen: { classPropertyName: "sidebarOpen", publicName: "sidebarOpen", isSignal: true, isRequired: false, transformFunction: null }, scrollMode: { classPropertyName: "scrollMode", publicName: "scrollMode", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, downloadable: { classPropertyName: "downloadable", publicName: "downloadable", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, httpHeaders: { classPropertyName: "httpHeaders", publicName: "httpHeaders", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", loaded: "loaded", pageChange: "pageChange", zoomChange: "zoomChange", download: "download", loadError: "loadError", searchChange: "searchChange" }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-theme": "theme()", "class.sd-preview-pdf-host--fullscreen": "isFullscreen()" }, classAttribute: "sd-preview-pdf-host" }, viewQueries: [{ propertyName: "pageCanvasRef", first: true, predicate: ["pageCanvas"], descendants: true, isSignal: true }, { propertyName: "stageEl", first: true, predicate: ["stageRef"], descendants: true, isSignal: true }, { propertyName: "pageInputRef", first: true, predicate: ["pageInput"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "sidebarContentRef", first: true, predicate: ["sidebarContent"], descendants: true, isSignal: true }, { propertyName: "outlineItemRefs", predicate: ["outlineItem"], descendants: true, isSignal: true }, { propertyName: "sidebarTabRefs", predicate: ["sidebarTab"], descendants: true, isSignal: true }, { propertyName: "continuousCanvases", predicate: ["continuousCanvas"], descendants: true, isSignal: true }, { propertyName: "thumbCanvases", predicate: ["thumbCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  sd-preview-pdf shell. Self-contained \u2014 sizes to its parent. Consumer wraps\n  in <sd-modal>/<sd-side-drawer>/page section. Header + sidebar + stage +\n  floating toolbar mirror Artboards A / C / E from the design handoff.\n-->\n<div class=\"sd-preview-pdf-shell\" role=\"region\">\n  @let _stage = stage();\n  @let _numPages = numPages();\n  @let _activePage = activePage();\n  @let _isSidebarOpen = isSidebarOpen();\n  @let _searchBarOpen = searchBarOpen();\n  @let _searchTerm = searchTerm();\n  @let _searchTotal = searchTotal();\n\n  <!-- ============================================\n       HEADER BAR \u2014 hidden in empty + loading per design\n       ============================================ -->\n  @if (_stage === 'ready') {\n    <div class=\"sd-preview-pdf-header\">\n      <div class=\"sd-preview-pdf-header__left\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"_isSidebarOpen\"\n          [attr.aria-expanded]=\"_isSidebarOpen\"\n          [attr.aria-controls]=\"sidebarRegionId()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.data-autoId]=\"autoIdSidebarToggle()\"\n          (click)=\"toggleSidebar()\">\n          <sd-icon fontIcon=\"menu\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-header__divider\"></span>\n        <div class=\"sd-preview-pdf-fileicon\" aria-hidden=\"true\">PDF</div>\n        <div class=\"sd-preview-pdf-header__meta\">\n          <div class=\"sd-preview-pdf-header__name\" [title]=\"title() || filename()\">\n            {{ title() || filename() }}\n          </div>\n          <div class=\"sd-preview-pdf-header__sub\">\n            {{ 'core.component.preview-pdf.pages-count' | translate: { count: _numPages } }}\n          </div>\n        </div>\n      </div>\n\n      <div class=\"sd-preview-pdf-header__right\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"_searchBarOpen\"\n          [attr.aria-expanded]=\"_searchBarOpen\"\n          [attr.aria-controls]=\"searchBarId()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.data-autoId]=\"autoIdSearchToggle()\"\n          (click)=\"searchBarOpen() ? closeSearch() : openSearch()\">\n          <sd-icon fontIcon=\"search\"></sd-icon>\n        </button>\n        @if (canPrint()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.print' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.print' | translate\"\n            [attr.data-autoId]=\"autoIdPrint()\"\n            (click)=\"printFile()\">\n            <sd-icon fontIcon=\"print\"></sd-icon>\n          </button>\n        }\n        @if (canDownload()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.data-autoId]=\"autoIdDownload()\"\n            (click)=\"downloadFile()\">\n            <sd-icon fontIcon=\"download\"></sd-icon>\n          </button>\n        }\n        @if (canFullscreen()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.fullscreen' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.fullscreen' | translate\"\n            [attr.data-autoId]=\"autoIdFullscreen()\"\n            (click)=\"toggleFullscreen()\">\n            <sd-icon [fontIcon]=\"isFullscreen() ? 'fullscreen_exit' : 'fullscreen'\"></sd-icon>\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- ============================================\n         SEARCH BAR \u2014 between header + body, only when bar is open\n         ============================================ -->\n    <div\n      class=\"sd-preview-pdf-searchbar\"\n      role=\"search\"\n      [id]=\"searchBarId()\"\n      [hidden]=\"!_searchBarOpen\"\n      [style.display]=\"_searchBarOpen ? null : 'none'\">\n      @if (_searchBarOpen) {\n        <sd-icon class=\"sd-preview-pdf-searchbar__icon\" fontIcon=\"search\"></sd-icon>\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"sd-preview-pdf-searchbar__input\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-placeholder' | translate\"\n          [attr.placeholder]=\"'core.component.preview-pdf.search-placeholder' | translate\"\n          [value]=\"_searchTerm\"\n          [attr.data-autoId]=\"autoIdSearchInput()\"\n          (input)=\"onSearchInput($event)\" />\n        <span class=\"sd-preview-pdf-searchbar__counter\" aria-live=\"polite\">\n          {{ searchCurrent() }} / {{ _searchTotal }}{{ searchTruncated() ? '+' : '' }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"_searchTotal === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.data-autoId]=\"autoIdSearchPrev()\"\n          (click)=\"searchPrev()\">\n          <sd-icon fontIcon=\"keyboard_arrow_up\"></sd-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"_searchTotal === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.data-autoId]=\"autoIdSearchNext()\"\n          (click)=\"searchNext()\">\n          <sd-icon fontIcon=\"keyboard_arrow_down\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__divider\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchCaseSensitive()\"\n          [attr.aria-pressed]=\"searchCaseSensitive()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.data-autoId]=\"autoIdSearchCase()\"\n          (click)=\"toggleSearchCaseSensitive()\">\n          <sd-icon fontIcon=\"match_case\"></sd-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchWholeWord()\"\n          [attr.aria-pressed]=\"searchWholeWord()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.data-autoId]=\"autoIdSearchWhole()\"\n          (click)=\"toggleSearchWholeWord()\">\n          <sd-icon fontIcon=\"text_fields\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__spacer\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.data-autoId]=\"autoIdSearchClose()\"\n          (click)=\"closeSearch()\">\n          <sd-icon fontIcon=\"close\"></sd-icon>\n        </button>\n      }\n    </div>\n  }\n\n  <!-- ============================================\n       BODY \u2014 sidebar + stage\n       ============================================ -->\n  <div class=\"sd-preview-pdf-body\">\n    <!-- SIDEBAR ............................................................. -->\n    @if (_stage === 'ready') {\n      <aside\n        class=\"sd-preview-pdf-sidebar\"\n        role=\"complementary\"\n        [id]=\"sidebarRegionId()\"\n        [hidden]=\"!_isSidebarOpen\"\n        [style.display]=\"_isSidebarOpen ? null : 'none'\">\n        @if (_isSidebarOpen) {\n          @let _sidebarMode = sidebarMode();\n          <div class=\"sd-preview-pdf-sidebar__tabs\" role=\"tablist\">\n            <button\n              #sidebarTab\n              type=\"button\"\n              class=\"sd-preview-pdf-sidebar__tab\"\n              role=\"tab\"\n              [id]=\"tabThumbnailsId()\"\n              [attr.aria-selected]=\"_sidebarMode === 'thumbnails'\"\n              [attr.aria-controls]=\"sidebarPanelId()\"\n              [attr.tabindex]=\"_sidebarMode === 'thumbnails' ? 0 : -1\"\n              [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'thumbnails'\"\n              data-sidebar-mode=\"thumbnails\"\n              [attr.data-autoId]=\"autoIdTabThumbnails()\"\n              (keydown)=\"onSidebarTabKeyDown($event, 'thumbnails')\"\n              (click)=\"setSidebarMode('thumbnails')\">\n              <sd-icon fontIcon=\"view_carousel\"></sd-icon>\n              <span>{{ 'core.component.preview-pdf.tab.thumbnails' | translate }}</span>\n            </button>\n            <button\n              #sidebarTab\n              type=\"button\"\n              class=\"sd-preview-pdf-sidebar__tab\"\n              role=\"tab\"\n              [id]=\"tabOutlineId()\"\n              [attr.aria-selected]=\"_sidebarMode === 'outline'\"\n              [attr.aria-controls]=\"sidebarPanelId()\"\n              [attr.tabindex]=\"_sidebarMode === 'outline' ? 0 : -1\"\n              [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'outline'\"\n              data-sidebar-mode=\"outline\"\n              [attr.data-autoId]=\"autoIdTabOutline()\"\n              (keydown)=\"onSidebarTabKeyDown($event, 'outline')\"\n              (click)=\"setSidebarMode('outline')\">\n              <sd-icon fontIcon=\"list\"></sd-icon>\n              <span>{{ 'core.component.preview-pdf.tab.outline' | translate }}</span>\n            </button>\n            <button\n              #sidebarTab\n              type=\"button\"\n              class=\"sd-preview-pdf-sidebar__tab\"\n              role=\"tab\"\n              [id]=\"tabSearchId()\"\n              [attr.aria-selected]=\"_sidebarMode === 'search'\"\n              [attr.aria-controls]=\"sidebarPanelId()\"\n              [attr.tabindex]=\"_sidebarMode === 'search' ? 0 : -1\"\n              [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'search'\"\n              data-sidebar-mode=\"search\"\n              [attr.data-autoId]=\"autoIdTabSearch()\"\n              (keydown)=\"onSidebarTabKeyDown($event, 'search')\"\n              (click)=\"setSidebarMode('search')\">\n              <sd-icon fontIcon=\"search\"></sd-icon>\n              <span>{{ 'core.component.preview-pdf.tab.search' | translate }}</span>\n            </button>\n          </div>\n\n          <div\n            #sidebarContent\n            class=\"sd-preview-pdf-sidebar__content\"\n            role=\"tabpanel\"\n            [id]=\"sidebarPanelId()\"\n            [attr.aria-labelledby]=\"sidebarActiveTabId()\"\n            (scroll)=\"onThumbnailSidebarScroll($event)\">\n            @switch (_sidebarMode) {\n              @case ('thumbnails') {\n                <ul class=\"sd-preview-pdf-thumb-list\">\n                  <li class=\"sd-preview-pdf-thumb-list__spacer\" aria-hidden=\"true\" [style.height.px]=\"thumbnailTopSpacer()\"></li>\n                  @for (p of pageNumbers(); track trackByPage($index, p)) {\n                    <li>\n                      <button\n                        type=\"button\"\n                        class=\"sd-preview-pdf-thumb\"\n                        [class.sd-preview-pdf-thumb--active]=\"p === _activePage\"\n                        [attr.aria-current]=\"p === _activePage ? 'page' : null\"\n                        [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: p, total: _numPages }\"\n                        [attr.data-autoId]=\"autoIdThumb(p - 1)\"\n                        (click)=\"goToPage(p)\">\n                        <div class=\"sd-preview-pdf-thumb__page\">\n                          <canvas #thumbCanvas class=\"sd-preview-pdf-thumb__canvas\" [attr.data-page]=\"p\" aria-hidden=\"true\"></canvas>\n                        </div>\n                        <span class=\"sd-preview-pdf-thumb__label\">{{ p }}</span>\n                      </button>\n                    </li>\n                  }\n                  <li class=\"sd-preview-pdf-thumb-list__spacer\" aria-hidden=\"true\" [style.height.px]=\"thumbnailBottomSpacer()\"></li>\n                </ul>\n              }\n              @case ('outline') {\n                <ul\n                  class=\"sd-preview-pdf-outline-tree\"\n                  role=\"tree\"\n                  [attr.aria-label]=\"'core.component.preview-pdf.tab.outline' | translate\">\n                  @for (row of visibleOutline(); track row.item.id) {\n                    <li class=\"sd-preview-pdf-outline-tree__node\" role=\"none\">\n                      <div class=\"sd-preview-pdf-outline-tree__row\" [style.padding-left.px]=\"(row.level - 1) * 16\">\n                        @if (row.item.children.length > 0) {\n                          <button\n                            type=\"button\"\n                            class=\"sd-preview-pdf-outline-tree__toggle\"\n                            tabindex=\"-1\"\n                            [attr.aria-label]=\"row.item.title\"\n                            [attr.aria-expanded]=\"isOutlineExpanded(row.item.id)\"\n                            (click)=\"toggleOutlineItem(row.item.id, $event)\">\n                            <sd-icon [fontIcon]=\"isOutlineExpanded(row.item.id) ? 'expand_more' : 'chevron_right'\"></sd-icon>\n                          </button>\n                        } @else {\n                          <span class=\"sd-preview-pdf-outline-tree__toggle-placeholder\" aria-hidden=\"true\"></span>\n                        }\n\n                        @if (row.item.url && row.item.page === null) {\n                          <a\n                            #outlineItem\n                            class=\"sd-preview-pdf-outline-tree__item\"\n                            role=\"treeitem\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            [href]=\"row.item.url\"\n                            [attr.data-outline-id]=\"row.item.id\"\n                            [attr.aria-level]=\"row.level\"\n                            [attr.aria-expanded]=\"row.item.children.length > 0 ? isOutlineExpanded(row.item.id) : null\"\n                            [attr.aria-current]=\"row.item.page === _activePage ? 'page' : null\"\n                            [attr.tabindex]=\"outlineFocusId() === row.item.id ? 0 : -1\"\n                            (focus)=\"focusOutlineItem(row.item.id)\"\n                            (keydown)=\"onOutlineKeyDown($event, row.item.id)\">\n                            {{ row.item.title }}\n                          </a>\n                        } @else {\n                          <button\n                            #outlineItem\n                            type=\"button\"\n                            class=\"sd-preview-pdf-outline-tree__item\"\n                            role=\"treeitem\"\n                            [attr.data-outline-id]=\"row.item.id\"\n                            [attr.aria-level]=\"row.level\"\n                            [attr.aria-expanded]=\"row.item.children.length > 0 ? isOutlineExpanded(row.item.id) : null\"\n                            [attr.aria-current]=\"row.item.page === _activePage ? 'page' : null\"\n                            [attr.tabindex]=\"outlineFocusId() === row.item.id ? 0 : -1\"\n                            (focus)=\"focusOutlineItem(row.item.id)\"\n                            (click)=\"activateOutlineItem(row.item.id)\"\n                            (keydown)=\"onOutlineKeyDown($event, row.item.id)\">\n                            {{ row.item.title }}\n                          </button>\n                        }\n                      </div>\n                    </li>\n                  }\n                </ul>\n              }\n              @case ('search') {\n                @if (!_searchTerm) {\n                  <div class=\"sd-preview-pdf-sidebar__message\">\n                    <sd-icon fontIcon=\"search\"></sd-icon>\n                    <p>{{ 'core.component.preview-pdf.search-placeholder' | translate }}</p>\n                  </div>\n                } @else if (_searchTotal === 0) {\n                  <div class=\"sd-preview-pdf-sidebar__message\">\n                    <sd-icon fontIcon=\"search_off\"></sd-icon>\n                    <p>{{ 'core.component.preview-pdf.search-no-results' | translate }}</p>\n                  </div>\n                } @else {\n                  @if (searchTruncated()) {\n                    <p class=\"sd-preview-pdf-search-limit\" role=\"status\">\n                      {{ 'core.component.preview-pdf.search-truncated' | translate: { count: _searchTotal } }}\n                    </p>\n                  }\n                  <ul class=\"sd-preview-pdf-search-list\">\n                    @for (r of searchResults(); track $index; let i = $index) {\n                      <li>\n                        <button\n                          type=\"button\"\n                          class=\"sd-preview-pdf-search-result\"\n                          [class.sd-preview-pdf-search-result--active]=\"i === searchActiveIndex()\"\n                          [attr.data-autoId]=\"autoIdResult(i)\"\n                          (click)=\"activateSearchResult(i)\">\n                          <span class=\"sd-preview-pdf-search-result__snippet\">\n                            {{ r.before }}<mark>{{ r.term }}</mark\n                            >{{ r.after }}\n                          </span>\n                          <span class=\"sd-preview-pdf-search-result__page\">{{ r.page }}</span>\n                        </button>\n                      </li>\n                    }\n                  </ul>\n                }\n              }\n            }\n          </div>\n        }\n      </aside>\n    }\n\n    <!-- STAGE ............................................................... -->\n    <div class=\"sd-preview-pdf-stage\" #stageRef (wheel)=\"onWheel($event)\" (scroll)=\"onStageScroll()\">\n      @switch (_stage) {\n        @case ('empty') {\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--muted\">\n              <sd-icon fontIcon=\"picture_as_pdf\"></sd-icon>\n            </div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.empty.title' | translate }}\n            </div>\n            <div class=\"sd-preview-pdf-status__hint\">\n              {{ 'core.component.preview-pdf.empty.subtitle' | translate }}\n            </div>\n          </div>\n        }\n        @case ('loading') {\n          @let _loadPercent = loadPercent();\n          <div class=\"sd-preview-pdf-status\">\n            <div\n              class=\"sd-preview-pdf-spinner\"\n              role=\"progressbar\"\n              [attr.aria-label]=\"'core.component.preview-pdf.loading' | translate\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n              [attr.aria-valuenow]=\"_loadPercent\"></div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.loading' | translate }}\n              @if (_loadPercent > 0) {\n                <span class=\"sd-preview-pdf-progress-pct\">&nbsp;{{ _loadPercent }}%</span>\n              }\n            </div>\n            <div class=\"sd-preview-pdf-progress\">\n              <div class=\"sd-preview-pdf-progress__fill\" [style.width.%]=\"_loadPercent\"></div>\n            </div>\n          </div>\n        }\n        @case ('error') {\n          @if (loadError$(); as err) {\n            <div class=\"sd-preview-pdf-status\" role=\"alert\" aria-live=\"assertive\">\n              <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--danger\">\n                <sd-icon fontIcon=\"error\"></sd-icon>\n              </div>\n              <div class=\"sd-preview-pdf-status__title\">\n                {{ 'core.component.preview-pdf.error.' + err.reason + '.title' | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__hint\">\n                {{ 'core.component.preview-pdf.error.' + err.reason + '.body' | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__actions\">\n                <button type=\"button\" class=\"sd-preview-pdf-btn-primary\" (click)=\"retryLoad()\" [attr.data-autoId]=\"autoIdRetry()\">\n                  <sd-icon fontIcon=\"refresh\"></sd-icon>\n                  <span>{{ 'core.component.preview-pdf.error.retry' | translate }}</span>\n                </button>\n                @if (canDownload()) {\n                  <button type=\"button\" class=\"sd-preview-pdf-btn-secondary\" (click)=\"downloadFile()\">\n                    <sd-icon fontIcon=\"download\"></sd-icon>\n                    <span>{{ 'core.component.preview-pdf.error.download-raw' | translate }}</span>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        }\n        @default {\n          @if (scrollModeCurrent() === 'continuous') {\n            <div class=\"sd-preview-pdf-continuous-content\">\n              <div class=\"sd-preview-pdf-continuous-spacer\" [style.height.px]=\"continuousTopSpacer()\"></div>\n              @for (pageNumber of continuousPages(); track pageNumber) {\n                <div class=\"sd-preview-pdf-continuous-slot\" [style.min-height.px]=\"continuousPageHeights()[pageNumber]\">\n                  <canvas\n                    #continuousCanvas\n                    class=\"sd-preview-pdf-continuous-page\"\n                    role=\"img\"\n                    [attr.data-page]=\"pageNumber\"\n                    [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: pageNumber, total: _numPages }\">\n                  </canvas>\n                </div>\n              }\n              <div class=\"sd-preview-pdf-continuous-spacer\" [style.height.px]=\"continuousBottomSpacer()\"></div>\n            </div>\n          } @else {\n            <div class=\"sd-preview-pdf-page-wrap\">\n              <canvas\n                #pageCanvas\n                class=\"sd-preview-pdf-page\"\n                role=\"img\"\n                [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: _activePage, total: _numPages }\">\n              </canvas>\n            </div>\n          }\n        }\n      }\n\n      <!-- FLOATING TOOLBAR ........................................ -->\n      @if (showToolbar() && _stage === 'ready') {\n        @let _canPrev = canPrev();\n        @let _canNext = canNext();\n        @let _zoomMode = zoomMode();\n        @let _scrollModeCurrent = scrollModeCurrent();\n        <div class=\"sd-preview-pdf-toolbar\" role=\"toolbar\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canPrev\"\n            [attr.aria-label]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.data-autoId]=\"autoIdFirst()\"\n            (click)=\"firstPage()\">\n            <sd-icon fontIcon=\"first_page\"></sd-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canPrev\"\n            [attr.aria-label]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.data-autoId]=\"autoIdPrev()\"\n            (click)=\"prevPage()\">\n            <sd-icon fontIcon=\"chevron_left\"></sd-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__page\">\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              class=\"sd-preview-pdf-toolbar__page-input\"\n              [value]=\"_activePage\"\n              #pageInput\n              (keydown.enter)=\"onPageInputEnter($event)\"\n              (blur)=\"onPageInputBlur($event)\"\n              [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: _activePage, total: _numPages }\"\n              [attr.data-autoId]=\"autoIdPageInput()\" />\n            <span class=\"sd-preview-pdf-toolbar__page-total\">/ {{ _numPages }}</span>\n          </span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canNext\"\n            [attr.aria-label]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.data-autoId]=\"autoIdNext()\"\n            (click)=\"nextPage()\">\n            <sd-icon fontIcon=\"chevron_right\"></sd-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canNext\"\n            [attr.aria-label]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.data-autoId]=\"autoIdLast()\"\n            (click)=\"lastPage()\">\n            <sd-icon fontIcon=\"last_page\"></sd-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.data-autoId]=\"autoIdZoomOut()\"\n            (click)=\"zoomOut()\">\n            <sd-icon fontIcon=\"remove\"></sd-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__zoom\" aria-live=\"polite\" [attr.data-autoId]=\"autoIdZoomReadout()\">{{ zoomPercent() }}%</span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.data-autoId]=\"autoIdZoomIn()\"\n            (click)=\"zoomIn()\">\n            <sd-icon fontIcon=\"add\"></sd-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"_zoomMode === 'page-fit'\"\n            [attr.data-autoId]=\"autoIdFitPage()\"\n            (click)=\"setZoom('page-fit')\">\n            <sd-icon fontIcon=\"fit_screen\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.fit-page' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"_zoomMode === 'page-width'\"\n            [attr.data-autoId]=\"autoIdFitWidth()\"\n            (click)=\"setZoom('page-width')\">\n            <sd-icon fontIcon=\"swap_horiz\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.fit-width' | translate }}</span>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.data-autoId]=\"autoIdRotate()\"\n            (click)=\"rotate('right')\">\n            <sd-icon fontIcon=\"rotate_right\"></sd-icon>\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [attr.data-autoId]=\"autoIdScrollMode()\"\n            (click)=\"setScrollMode(_scrollModeCurrent === 'page' ? 'continuous' : 'page')\">\n            <sd-icon [fontIcon]=\"_scrollModeCurrent === 'page' ? 'description' : 'view_day'\"></sd-icon>\n            <span>\n              {{\n                (_scrollModeCurrent === 'page' ? 'core.component.preview-pdf.scroll-page' : 'core.component.preview-pdf.scroll-continuous')\n                  | translate\n              }}\n            </span>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--sd-pdf-shell-bg: #1a1c1f;--sd-pdf-sidebar-bg: #22252a;--sd-pdf-toolbar-bg: rgba(20, 22, 25, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .4);--sd-pdf-divider: rgba(255, 255, 255, .08);--sd-pdf-fg: #f5f6f7;--sd-pdf-fg-muted: rgba(255, 255, 255, .6);--sd-pdf-fg-subtle: rgba(255, 255, 255, .4);--sd-pdf-primary: var(--sd-pdf-accent, var(--sd-primary, #005cbb));--sd-pdf-primary-soft: var(--sd-pdf-accent-soft, rgba(0, 92, 187, .18));--sd-pdf-danger: var(--sd-error, #ba1a1a);--sd-pdf-success: var(--sd-success, #2e7d32);--sd-pdf-danger-soft: rgba(186, 26, 26, .1);--sd-pdf-danger-border: rgba(186, 26, 26, .3);--sd-pdf-danger-tint: rgba(186, 26, 26, .15);--sd-pdf-hover-bg: rgba(255, 255, 255, .1);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(249, 115, 22, .85);display:block;width:100%;height:100%;min-height:320px;outline:none}:host:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}:host([data-theme=light]){--sd-pdf-shell-bg: #f7f8fa;--sd-pdf-sidebar-bg: #ffffff;--sd-pdf-toolbar-bg: rgba(255, 255, 255, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .12);--sd-pdf-divider: rgba(0, 0, 0, .08);--sd-pdf-fg: #1a1c1f;--sd-pdf-fg-muted: rgba(0, 0, 0, .62);--sd-pdf-fg-subtle: rgba(0, 0, 0, .42);--sd-pdf-primary: var(--sd-pdf-accent, var(--sd-primary, #005cbb));--sd-pdf-primary-soft: var(--sd-pdf-accent-soft, rgba(0, 92, 187, .16));--sd-pdf-danger: var(--sd-error, #ba1a1a);--sd-pdf-success: var(--sd-success, #2e7d32);--sd-pdf-danger-soft: rgba(186, 26, 26, .08);--sd-pdf-danger-border: rgba(186, 26, 26, .25);--sd-pdf-danger-tint: rgba(186, 26, 26, .12);--sd-pdf-hover-bg: rgba(0, 0, 0, .06);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(250, 204, 21, .9)}:host(.sd-preview-pdf-host--fullscreen){width:100vw;height:100vh;min-height:0}.sd-preview-pdf-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-pdf-shell-bg);color:var(--sd-pdf-fg);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0a;font-family:inherit}.sd-preview-pdf-header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:57px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sd-pdf-divider);flex:0 0 auto;z-index:2}.sd-preview-pdf-header__left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}.sd-preview-pdf-header__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.sd-preview-pdf-header__divider{display:inline-block;width:1px;height:20px;background:var(--sd-pdf-divider)}.sd-preview-pdf-header__meta{display:flex;flex-direction:column;min-width:0}.sd-preview-pdf-header__name{font-size:14px;font-weight:500;color:var(--sd-pdf-fg);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-preview-pdf-header__sub{font-size:11px;color:var(--sd-pdf-fg-muted);margin-top:2px}.sd-preview-pdf-fileicon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:var(--sd-pdf-danger-tint);border:1px solid var(--sd-pdf-danger-border);color:var(--sd-error-light, #f87171);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.sd-preview-pdf-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 8px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;flex-shrink:0}.sd-preview-pdf-iconbtn sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-iconbtn__label{font-size:13px;font-weight:500}.sd-preview-pdf-iconbtn:hover:not(:disabled){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-iconbtn:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-iconbtn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-iconbtn--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-searchbar{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);border-bottom:1px solid var(--sd-pdf-divider);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex:0 0 auto;z-index:2}.sd-preview-pdf-searchbar__icon{color:var(--sd-pdf-fg-muted);font-size:18px;width:18px;height:18px;flex-shrink:0}.sd-preview-pdf-searchbar__input{flex:0 1 360px;min-width:160px;height:30px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:6px;padding:0 10px;font-size:13px;outline:none}.sd-preview-pdf-searchbar__input::placeholder{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-searchbar__input:focus{border-color:var(--sd-pdf-primary);background:#ffffff17}.sd-preview-pdf-searchbar__counter{color:var(--sd-pdf-fg-muted);font-size:12px;font-variant-numeric:tabular-nums;min-width:48px;text-align:center;flex-shrink:0}.sd-preview-pdf-searchbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);flex-shrink:0}.sd-preview-pdf-searchbar__spacer{flex:1 1 auto}.sd-pdf-search-overlay{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:4px;max-width:80%;pointer-events:none;z-index:5}.sd-pdf-search-hi{display:inline-block;padding:1px 4px;border-radius:2px;background:var(--sd-pdf-search-hi);color:#000;font-size:12px;font-weight:500}.sd-pdf-search-hi--active{background:var(--sd-pdf-search-hi-active);color:#fff;box-shadow:0 0 0 2px #fff6}.sd-preview-pdf-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:row;overflow:hidden}.sd-preview-pdf-sidebar{width:240px;display:flex;flex-direction:column;background:var(--sd-pdf-sidebar-bg);border-right:1px solid var(--sd-pdf-divider);flex-shrink:0;min-height:0}.sd-preview-pdf-sidebar__tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-sidebar__tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 4px;background:transparent;border:none;color:var(--sd-pdf-fg-muted);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-sidebar__tab sd-icon{font-size:14px;width:14px;height:14px}.sd-preview-pdf-sidebar__tab:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-sidebar__tab--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-sidebar__content{flex:1 1 auto;overflow:auto;padding:12px}.sd-preview-pdf-sidebar__message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-sidebar__message sd-icon{font-size:28px;width:28px;height:28px;opacity:.6}.sd-preview-pdf-sidebar__message p{margin:0;font-size:12px;line-height:1.5}.sd-preview-pdf-outline-tree{list-style:none;margin:0;padding:0}.sd-preview-pdf-outline-tree__node{margin:0;padding:0}.sd-preview-pdf-outline-tree__row{display:flex;align-items:center;min-width:0}.sd-preview-pdf-outline-tree__toggle,.sd-preview-pdf-outline-tree__toggle-placeholder{width:24px;height:28px;flex:0 0 24px}.sd-preview-pdf-outline-tree__toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sd-pdf-fg-muted);cursor:pointer}.sd-preview-pdf-outline-tree__toggle:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-outline-tree__toggle sd-icon{width:16px;height:16px;font-size:16px}.sd-preview-pdf-outline-tree__item{min-width:0;flex:1 1 auto;overflow:hidden;padding:6px 8px;border:0;border-radius:5px;background:transparent;color:var(--sd-pdf-fg-muted);font:inherit;font-size:12px;line-height:1.35;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.sd-preview-pdf-outline-tree__item:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-outline-tree__item[aria-current=page]{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary);font-weight:600}.sd-preview-pdf-outline-tree__item:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:-2px}.sd-preview-pdf-thumb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.sd-preview-pdf-thumb-list__spacer{flex:0 0 auto;pointer-events:none}.sd-preview-pdf-search-limit{margin:0 0 8px;color:var(--sd-pdf-fg-muted);font-size:11px;line-height:1.4}.sd-preview-pdf-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:0;background:transparent;border:none;cursor:pointer}.sd-preview-pdf-thumb__page{width:152px;aspect-ratio:612/792;background:var(--sd-pdf-page-bg);border-radius:2px;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;box-shadow:0 2px 6px #0000004d;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;background-image:linear-gradient(90deg,#0000,#0000000a,#0000);background-size:200% 100%;animation:sd-preview-pdf-thumb-skel 1.6s ease-in-out infinite}.sd-preview-pdf-thumb__canvas{display:block;max-width:100%;max-height:100%;background:var(--sd-pdf-page-bg)}.sd-preview-pdf-thumb__label{font-size:11px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-primary);outline-offset:-2px}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__label{color:var(--sd-pdf-primary);font-weight:600}.sd-preview-pdf-thumb:focus-visible .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;background:var(--sd-pdf-shell-bg);background-image:linear-gradient(45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.015) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:auto;padding:32px 24px 96px;display:flex;justify-content:center;align-items:flex-start}:host([data-theme=light]) .sd-preview-pdf-stage{background-image:linear-gradient(45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.015) 75%)}.sd-preview-pdf-page-wrap{display:inline-block;position:relative}.sd-preview-pdf-page{display:block;background:var(--sd-pdf-page-bg);border-radius:2px;box-shadow:var(--sd-pdf-page-shadow);max-width:100%}.sd-preview-pdf-continuous-content{width:100%;min-height:100%}.sd-preview-pdf-continuous-spacer{width:1px}.sd-preview-pdf-continuous-slot{display:flex;justify-content:center;align-items:flex-start}.sd-preview-pdf-continuous-slot+.sd-preview-pdf-continuous-slot{margin-top:24px}.sd-preview-pdf-continuous-page{display:block;max-width:100%;background:var(--sd-pdf-page-bg);border-radius:2px;box-shadow:var(--sd-pdf-page-shadow)}.sd-preview-pdf-toolbar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;padding:5px 6px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--sd-pdf-divider);border-radius:10px;box-shadow:0 8px 30px #0006;z-index:4;max-width:calc(100% - 32px);overflow-x:auto}.sd-preview-pdf-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:28px;padding:0 6px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-toolbar__btn sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-toolbar__btn span{font-size:13px;font-weight:500}.sd-preview-pdf-toolbar__btn--with-label{padding:0 10px}.sd-preview-pdf-toolbar__btn--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-toolbar__btn:hover:not(:disabled):not(.sd-preview-pdf-toolbar__btn--active){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-toolbar__btn:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-toolbar__btn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-toolbar__page{display:inline-flex;align-items:center;gap:4px;padding:0 6px;flex-shrink:0}.sd-preview-pdf-toolbar__page-input{width:36px;height:24px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:4px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;outline:none}.sd-preview-pdf-toolbar__page-input:focus{border-color:var(--sd-pdf-primary)}.sd-preview-pdf-toolbar__page-total{font-size:13px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-toolbar__zoom{min-width:56px;text-align:center;color:var(--sd-pdf-fg);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;background:#ffffff14;border-radius:4px;padding:2px 8px}.sd-preview-pdf-toolbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);margin:0 4px;flex-shrink:0}.sd-preview-pdf-status{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;max-width:420px}.sd-preview-pdf-status__tile{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-status__tile sd-icon{font-size:48px;width:48px;height:48px}.sd-preview-pdf-status__tile--muted{background:#ffffff0d}.sd-preview-pdf-status__tile--muted sd-icon{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-status__tile--danger{background:var(--sd-pdf-danger-soft);border-color:var(--sd-pdf-danger-border)}.sd-preview-pdf-status__tile--danger sd-icon{color:var(--sd-pdf-danger)}.sd-preview-pdf-status__title{font-size:16px;font-weight:500;color:var(--sd-pdf-fg)}.sd-preview-pdf-status__hint{font-size:13px;color:var(--sd-pdf-fg-muted);line-height:1.5}.sd-preview-pdf-status__actions{display:flex;gap:8px;margin-top:4px}.sd-preview-pdf-progress-pct{font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted)}.sd-preview-pdf-progress{width:240px;height:4px;background:#ffffff14;border-radius:999px;overflow:hidden}.sd-preview-pdf-progress__fill{height:100%;background:var(--sd-pdf-primary);transition:width .12s linear}.sd-preview-pdf-spinner{width:56px;height:56px;border-radius:999px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--sd-pdf-primary);animation:sd-preview-pdf-spin .9s linear infinite}@keyframes sd-preview-pdf-spin{to{transform:rotate(360deg)}}@keyframes sd-preview-pdf-thumb-skel{0%{background-position:200% 0}to{background-position:-200% 0}}.sd-preview-pdf-search-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.sd-preview-pdf-search-result{width:100%;display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#ffffff0a;border:1px solid transparent;border-radius:6px;color:var(--sd-pdf-fg);cursor:pointer;text-align:left;transition:background .12s,border-color .12s}.sd-preview-pdf-search-result:hover{background:#ffffff12}.sd-preview-pdf-search-result--active{background:var(--sd-pdf-primary-soft);border-color:#005cbb73}.sd-preview-pdf-search-result__snippet{flex:1 1 auto;font-size:12px;line-height:1.4;color:var(--sd-pdf-fg);word-break:break-word}.sd-preview-pdf-search-result__snippet mark{background:var(--sd-pdf-search-hi);color:#000;padding:0 2px;border-radius:2px}.sd-preview-pdf-search-result__page{flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted);background:#ffffff0f;padding:2px 6px;border-radius:4px}.sd-preview-pdf-btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:var(--sd-pdf-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:filter .12s}.sd-preview-pdf-btn-primary sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-primary:hover{filter:brightness(1.1)}.sd-preview-pdf-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:2px}.sd-preview-pdf-btn-secondary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:transparent;color:var(--sd-pdf-fg);border:1px solid var(--sd-pdf-divider);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:background .12s}.sd-preview-pdf-btn-secondary sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-secondary:hover{background:#ffffff0f}.sd-preview-pdf-btn-secondary:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 _a = SdPreviewPdf;
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdPreviewPdf, decorators: [{
@@ -1976,8 +3196,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         // collision with consumer styling.
                         '[attr.data-theme]': 'theme()',
                         '[class.sd-preview-pdf-host--fullscreen]': 'isFullscreen()',
-                    }, template: "<!--\n  sd-preview-pdf shell. Self-contained \u2014 sizes to its parent. Consumer wraps\n  in <sd-modal>/<sd-side-drawer>/page section. Header + sidebar + stage +\n  floating toolbar mirror Artboards A / C / E from the design handoff.\n-->\n<div class=\"sd-preview-pdf-shell\" role=\"region\">\n  @let _stage = stage();\n  @let _numPages = numPages();\n  @let _activePage = activePage();\n  @let _isSidebarOpen = isSidebarOpen();\n  @let _searchBarOpen = searchBarOpen();\n  @let _searchTerm = searchTerm();\n  @let _searchTotal = searchTotal();\n\n  <!-- ============================================\n       HEADER BAR \u2014 hidden in empty + loading per design\n       ============================================ -->\n  @if (_stage === 'ready') {\n    <div class=\"sd-preview-pdf-header\">\n      <div class=\"sd-preview-pdf-header__left\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"_isSidebarOpen\"\n          [attr.aria-label]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.data-autoId]=\"autoIdSidebarToggle()\"\n          (click)=\"toggleSidebar()\">\n          <sd-icon fontIcon=\"menu\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-header__divider\"></span>\n        <div class=\"sd-preview-pdf-fileicon\" aria-hidden=\"true\">PDF</div>\n        <div class=\"sd-preview-pdf-header__meta\">\n          <div class=\"sd-preview-pdf-header__name\" [title]=\"title() || filename()\">\n            {{ title() || filename() }}\n          </div>\n          <div class=\"sd-preview-pdf-header__sub\">\n            {{ 'core.component.preview-pdf.pages-count' | translate: { count: _numPages } }}\n          </div>\n        </div>\n      </div>\n\n      <div class=\"sd-preview-pdf-header__right\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"_searchBarOpen\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.data-autoId]=\"autoIdSearchToggle()\"\n          (click)=\"searchBarOpen() ? closeSearch() : openSearch()\">\n          <sd-icon fontIcon=\"search\"></sd-icon>\n        </button>\n        @if (downloadable()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.data-autoId]=\"autoIdDownload()\"\n            (click)=\"downloadFile()\">\n            <sd-icon fontIcon=\"download\"></sd-icon>\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.fullscreen' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.fullscreen' | translate\"\n          [attr.data-autoId]=\"autoIdFullscreen()\"\n          (click)=\"toggleFullscreen()\">\n          <sd-icon [fontIcon]=\"isFullscreen() ? 'fullscreen_exit' : 'fullscreen'\"></sd-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- ============================================\n         SEARCH BAR \u2014 between header + body, only when bar is open\n         ============================================ -->\n    @if (_searchBarOpen) {\n      <div class=\"sd-preview-pdf-searchbar\" role=\"search\">\n        <sd-icon class=\"sd-preview-pdf-searchbar__icon\" fontIcon=\"search\"></sd-icon>\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"sd-preview-pdf-searchbar__input\"\n          [attr.placeholder]=\"'core.component.preview-pdf.search-placeholder' | translate\"\n          [value]=\"_searchTerm\"\n          [attr.data-autoId]=\"autoIdSearchInput()\"\n          (input)=\"onSearchInput($any($event.target).value)\" />\n        <span class=\"sd-preview-pdf-searchbar__counter\" aria-live=\"polite\"> {{ searchCurrent() }} / {{ _searchTotal }} </span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"_searchTotal === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.data-autoId]=\"autoIdSearchPrev()\"\n          (click)=\"searchPrev()\">\n          <sd-icon fontIcon=\"keyboard_arrow_up\"></sd-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"_searchTotal === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.data-autoId]=\"autoIdSearchNext()\"\n          (click)=\"searchNext()\">\n          <sd-icon fontIcon=\"keyboard_arrow_down\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__divider\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchCaseSensitive()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.data-autoId]=\"autoIdSearchCase()\"\n          (click)=\"toggleSearchCaseSensitive()\">\n          <sd-icon fontIcon=\"match_case\"></sd-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchWholeWord()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.data-autoId]=\"autoIdSearchWhole()\"\n          (click)=\"toggleSearchWholeWord()\">\n          <sd-icon fontIcon=\"text_fields\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__spacer\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.data-autoId]=\"autoIdSearchClose()\"\n          (click)=\"closeSearch()\">\n          <sd-icon fontIcon=\"close\"></sd-icon>\n        </button>\n      </div>\n    }\n  }\n\n  <!-- ============================================\n       BODY \u2014 sidebar + stage\n       ============================================ -->\n  <div class=\"sd-preview-pdf-body\">\n    <!-- SIDEBAR ............................................................. -->\n    @if (_stage === 'ready' && _isSidebarOpen) {\n      <aside class=\"sd-preview-pdf-sidebar\" role=\"complementary\">\n        @let _sidebarMode = sidebarMode();\n        <div class=\"sd-preview-pdf-sidebar__tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'thumbnails'\"\n            [attr.data-autoId]=\"autoIdTabThumbnails()\"\n            (click)=\"setSidebarMode('thumbnails')\">\n            <sd-icon fontIcon=\"view_carousel\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.tab.thumbnails' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'outline'\"\n            [attr.data-autoId]=\"autoIdTabOutline()\"\n            (click)=\"setSidebarMode('outline')\">\n            <sd-icon fontIcon=\"list\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.tab.outline' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-sidebar__tab\"\n            role=\"tab\"\n            [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'search'\"\n            [attr.data-autoId]=\"autoIdTabSearch()\"\n            (click)=\"setSidebarMode('search')\">\n            <sd-icon fontIcon=\"search\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.tab.search' | translate }}</span>\n          </button>\n        </div>\n\n        <div class=\"sd-preview-pdf-sidebar__content\">\n          @switch (_sidebarMode) {\n            @case ('thumbnails') {\n              <ul class=\"sd-preview-pdf-thumb-list\">\n                @for (p of pageNumbers(); track trackByPage($index, p); let pi = $index) {\n                  <li>\n                    <button\n                      type=\"button\"\n                      class=\"sd-preview-pdf-thumb\"\n                      [class.sd-preview-pdf-thumb--active]=\"p === _activePage\"\n                      [attr.aria-current]=\"p === _activePage ? 'page' : null\"\n                      [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: p, total: _numPages }\"\n                      [attr.data-autoId]=\"autoIdThumb(pi)\"\n                      (click)=\"goToPage(p)\">\n                      <div class=\"sd-preview-pdf-thumb__page\">\n                        <canvas #thumbCanvas class=\"sd-preview-pdf-thumb__canvas\" [attr.data-page]=\"p\" aria-hidden=\"true\"></canvas>\n                      </div>\n                      <span class=\"sd-preview-pdf-thumb__label\">{{ p }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @case ('outline') {\n              <!-- TODO(preview-pdf): outline tree (pdfDoc.getOutline()) deferred to follow-up commit. -->\n              <div class=\"sd-preview-pdf-sidebar__deferred\">\n                <sd-icon fontIcon=\"list\"></sd-icon>\n                <p>{{ 'core.component.preview-pdf.deferred.outline' | translate }}</p>\n              </div>\n            }\n            @case ('search') {\n              @if (!_searchTerm) {\n                <div class=\"sd-preview-pdf-sidebar__deferred\">\n                  <sd-icon fontIcon=\"search\"></sd-icon>\n                  <p>{{ 'core.component.preview-pdf.search-placeholder' | translate }}</p>\n                </div>\n              } @else if (_searchTotal === 0) {\n                <div class=\"sd-preview-pdf-sidebar__deferred\">\n                  <sd-icon fontIcon=\"search_off\"></sd-icon>\n                  <p>{{ 'core.component.preview-pdf.search-no-results' | translate }}</p>\n                </div>\n              } @else {\n                <ul class=\"sd-preview-pdf-search-list\">\n                  @for (r of searchResults(); track $index; let i = $index) {\n                    <li>\n                      <button\n                        type=\"button\"\n                        class=\"sd-preview-pdf-search-result\"\n                        [class.sd-preview-pdf-search-result--active]=\"i === searchActiveIndex()\"\n                        [attr.data-autoId]=\"autoIdResult(i)\"\n                        (click)=\"goToPage(r.page)\">\n                        <span class=\"sd-preview-pdf-search-result__snippet\">\n                          {{ r.before }}<mark>{{ r.term }}</mark\n                          >{{ r.after }}\n                        </span>\n                        <span class=\"sd-preview-pdf-search-result__page\">{{ r.page }}</span>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n            }\n            @default {\n              <div class=\"sd-preview-pdf-sidebar__deferred\"></div>\n            }\n          }\n        </div>\n      </aside>\n    }\n\n    <!-- STAGE ............................................................... -->\n    <div class=\"sd-preview-pdf-stage\" #stageRef (wheel)=\"onWheel($event)\">\n      @switch (_stage) {\n        @case ('empty') {\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--muted\">\n              <sd-icon fontIcon=\"picture_as_pdf\"></sd-icon>\n            </div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.empty.title' | translate }}\n            </div>\n            <div class=\"sd-preview-pdf-status__hint\">\n              {{ 'core.component.preview-pdf.empty.subtitle' | translate }}\n            </div>\n          </div>\n        }\n        @case ('loading') {\n          @let _loadPercent = loadPercent();\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-spinner\" role=\"progressbar\"></div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.loading' | translate }}\n              @if (_loadPercent > 0) {\n                <span class=\"sd-preview-pdf-progress-pct\">&nbsp;{{ _loadPercent }}%</span>\n              }\n            </div>\n            <div class=\"sd-preview-pdf-progress\">\n              <div class=\"sd-preview-pdf-progress__fill\" [style.width.%]=\"_loadPercent\"></div>\n            </div>\n          </div>\n        }\n        @case ('error') {\n          @if (loadError$(); as err) {\n            <div class=\"sd-preview-pdf-status\">\n              <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--danger\">\n                <sd-icon fontIcon=\"error\"></sd-icon>\n              </div>\n              <div class=\"sd-preview-pdf-status__title\">\n                {{ 'core.component.preview-pdf.error.' + err.reason + '.title' | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__hint\">\n                {{ 'core.component.preview-pdf.error.' + err.reason + '.body' | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__actions\">\n                <button type=\"button\" class=\"sd-preview-pdf-btn-primary\" (click)=\"retryLoad()\" [attr.data-autoId]=\"autoIdRetry()\">\n                  <sd-icon fontIcon=\"refresh\"></sd-icon>\n                  <span>{{ 'core.component.preview-pdf.error.retry' | translate }}</span>\n                </button>\n                @if (downloadable()) {\n                  <button type=\"button\" class=\"sd-preview-pdf-btn-secondary\" (click)=\"downloadFile()\">\n                    <sd-icon fontIcon=\"download\"></sd-icon>\n                    <span>{{ 'core.component.preview-pdf.error.download-raw' | translate }}</span>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        }\n        @default {\n          <div class=\"sd-preview-pdf-page-wrap\">\n            <canvas\n              #pageCanvas\n              class=\"sd-preview-pdf-page\"\n              role=\"img\"\n              [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: _activePage, total: _numPages }\">\n            </canvas>\n          </div>\n        }\n      }\n\n      <!-- FLOATING TOOLBAR ........................................ -->\n      @if (showToolbar() && _stage === 'ready') {\n        @let _canPrev = canPrev();\n        @let _canNext = canNext();\n        @let _zoomMode = zoomMode();\n        @let _scrollModeCurrent = scrollModeCurrent();\n        <div class=\"sd-preview-pdf-toolbar\" role=\"toolbar\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canPrev\"\n            [attr.aria-label]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.data-autoId]=\"autoIdFirst()\"\n            (click)=\"firstPage()\">\n            <sd-icon fontIcon=\"first_page\"></sd-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canPrev\"\n            [attr.aria-label]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.data-autoId]=\"autoIdPrev()\"\n            (click)=\"prevPage()\">\n            <sd-icon fontIcon=\"chevron_left\"></sd-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__page\">\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              class=\"sd-preview-pdf-toolbar__page-input\"\n              [value]=\"_activePage\"\n              #pageInput\n              (keydown.enter)=\"onPageInputEnter($event)\"\n              (blur)=\"onPageInputBlur($event)\"\n              [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: _activePage, total: _numPages }\"\n              [attr.data-autoId]=\"autoIdPageInput()\" />\n            <span class=\"sd-preview-pdf-toolbar__page-total\">/ {{ _numPages }}</span>\n          </span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canNext\"\n            [attr.aria-label]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.data-autoId]=\"autoIdNext()\"\n            (click)=\"nextPage()\">\n            <sd-icon fontIcon=\"chevron_right\"></sd-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canNext\"\n            [attr.aria-label]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.data-autoId]=\"autoIdLast()\"\n            (click)=\"lastPage()\">\n            <sd-icon fontIcon=\"last_page\"></sd-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.data-autoId]=\"autoIdZoomOut()\"\n            (click)=\"zoomOut()\">\n            <sd-icon fontIcon=\"remove\"></sd-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__zoom\" aria-live=\"polite\" [attr.data-autoId]=\"autoIdZoomReadout()\">{{ zoomPercent() }}%</span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.data-autoId]=\"autoIdZoomIn()\"\n            (click)=\"zoomIn()\">\n            <sd-icon fontIcon=\"add\"></sd-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"_zoomMode === 'page-fit'\"\n            [attr.data-autoId]=\"autoIdFitPage()\"\n            (click)=\"setZoom('page-fit')\">\n            <sd-icon fontIcon=\"fit_screen\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.fit-page' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"_zoomMode === 'page-width'\"\n            [attr.data-autoId]=\"autoIdFitWidth()\"\n            (click)=\"setZoom('page-width')\">\n            <sd-icon fontIcon=\"swap_horiz\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.fit-width' | translate }}</span>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.data-autoId]=\"autoIdRotate()\"\n            (click)=\"rotate('right')\">\n            <sd-icon fontIcon=\"rotate_right\"></sd-icon>\n          </button>\n\n          <!-- TODO(preview-pdf): scroll mode toggle is signature-only;\n               clicking switches the state but rendering stays single-page\n               until the continuous scroll feature lands. -->\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [attr.data-autoId]=\"autoIdScrollMode()\"\n            (click)=\"setScrollMode(_scrollModeCurrent === 'page' ? 'continuous' : 'page')\">\n            <sd-icon [fontIcon]=\"_scrollModeCurrent === 'page' ? 'description' : 'view_day'\"></sd-icon>\n            <span>\n              {{\n                (_scrollModeCurrent === 'page' ? 'core.component.preview-pdf.scroll-page' : 'core.component.preview-pdf.scroll-continuous')\n                  | translate\n              }}\n            </span>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--sd-pdf-shell-bg: #1a1c1f;--sd-pdf-sidebar-bg: #22252a;--sd-pdf-toolbar-bg: rgba(20, 22, 25, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .4);--sd-pdf-divider: rgba(255, 255, 255, .08);--sd-pdf-fg: #f5f6f7;--sd-pdf-fg-muted: rgba(255, 255, 255, .6);--sd-pdf-fg-subtle: rgba(255, 255, 255, .4);--sd-pdf-primary: var(--sd-pdf-accent, var(--sd-primary, #005cbb));--sd-pdf-primary-soft: var(--sd-pdf-accent-soft, rgba(0, 92, 187, .18));--sd-pdf-danger: var(--sd-error, #ba1a1a);--sd-pdf-success: var(--sd-success, #2e7d32);--sd-pdf-danger-soft: rgba(186, 26, 26, .1);--sd-pdf-danger-border: rgba(186, 26, 26, .3);--sd-pdf-danger-tint: rgba(186, 26, 26, .15);--sd-pdf-hover-bg: rgba(255, 255, 255, .1);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(249, 115, 22, .85);display:block;width:100%;height:100%;min-height:320px;outline:none}:host([data-theme=light]){--sd-pdf-shell-bg: #f7f8fa;--sd-pdf-sidebar-bg: #ffffff;--sd-pdf-toolbar-bg: rgba(255, 255, 255, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .12);--sd-pdf-divider: rgba(0, 0, 0, .08);--sd-pdf-fg: #1a1c1f;--sd-pdf-fg-muted: rgba(0, 0, 0, .62);--sd-pdf-fg-subtle: rgba(0, 0, 0, .42);--sd-pdf-primary: var(--sd-pdf-accent, var(--sd-primary, #005cbb));--sd-pdf-primary-soft: var(--sd-pdf-accent-soft, rgba(0, 92, 187, .16));--sd-pdf-danger: var(--sd-error, #ba1a1a);--sd-pdf-success: var(--sd-success, #2e7d32);--sd-pdf-danger-soft: rgba(186, 26, 26, .08);--sd-pdf-danger-border: rgba(186, 26, 26, .25);--sd-pdf-danger-tint: rgba(186, 26, 26, .12);--sd-pdf-hover-bg: rgba(0, 0, 0, .06);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(250, 204, 21, .9)}:host(.sd-preview-pdf-host--fullscreen){width:100vw;height:100vh;min-height:0}.sd-preview-pdf-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-pdf-shell-bg);color:var(--sd-pdf-fg);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0a;font-family:inherit}.sd-preview-pdf-header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:57px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sd-pdf-divider);flex:0 0 auto;z-index:2}.sd-preview-pdf-header__left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}.sd-preview-pdf-header__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.sd-preview-pdf-header__divider{display:inline-block;width:1px;height:20px;background:var(--sd-pdf-divider)}.sd-preview-pdf-header__meta{display:flex;flex-direction:column;min-width:0}.sd-preview-pdf-header__name{font-size:14px;font-weight:500;color:var(--sd-pdf-fg);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-preview-pdf-header__sub{font-size:11px;color:var(--sd-pdf-fg-muted);margin-top:2px}.sd-preview-pdf-fileicon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:var(--sd-pdf-danger-tint);border:1px solid var(--sd-pdf-danger-border);color:var(--sd-error-light, #f87171);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.sd-preview-pdf-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 8px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;flex-shrink:0}.sd-preview-pdf-iconbtn sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-iconbtn__label{font-size:13px;font-weight:500}.sd-preview-pdf-iconbtn:hover:not(:disabled){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-iconbtn:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-iconbtn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-iconbtn--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-searchbar{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);border-bottom:1px solid var(--sd-pdf-divider);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex:0 0 auto;z-index:2}.sd-preview-pdf-searchbar__icon{color:var(--sd-pdf-fg-muted);font-size:18px;width:18px;height:18px;flex-shrink:0}.sd-preview-pdf-searchbar__input{flex:0 1 360px;min-width:160px;height:30px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:6px;padding:0 10px;font-size:13px;outline:none}.sd-preview-pdf-searchbar__input::placeholder{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-searchbar__input:focus{border-color:var(--sd-pdf-primary);background:#ffffff17}.sd-preview-pdf-searchbar__counter{color:var(--sd-pdf-fg-muted);font-size:12px;font-variant-numeric:tabular-nums;min-width:48px;text-align:center;flex-shrink:0}.sd-preview-pdf-searchbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);flex-shrink:0}.sd-preview-pdf-searchbar__spacer{flex:1 1 auto}.sd-pdf-search-overlay{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:4px;max-width:80%;pointer-events:none;z-index:5}.sd-pdf-search-hi{display:inline-block;padding:1px 4px;border-radius:2px;background:var(--sd-pdf-search-hi);color:#000;font-size:12px;font-weight:500}.sd-pdf-search-hi--active{background:var(--sd-pdf-search-hi-active);color:#fff;box-shadow:0 0 0 2px #fff6}.sd-preview-pdf-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:row;overflow:hidden}.sd-preview-pdf-sidebar{width:240px;display:flex;flex-direction:column;background:var(--sd-pdf-sidebar-bg);border-right:1px solid var(--sd-pdf-divider);flex-shrink:0;min-height:0}.sd-preview-pdf-sidebar__tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-sidebar__tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 4px;background:transparent;border:none;color:var(--sd-pdf-fg-muted);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-sidebar__tab sd-icon{font-size:14px;width:14px;height:14px}.sd-preview-pdf-sidebar__tab:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-sidebar__tab--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-sidebar__content{flex:1 1 auto;overflow:auto;padding:12px}.sd-preview-pdf-sidebar__deferred{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-sidebar__deferred sd-icon{font-size:28px;width:28px;height:28px;opacity:.6}.sd-preview-pdf-sidebar__deferred p{margin:0;font-size:12px;line-height:1.5}.sd-preview-pdf-thumb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.sd-preview-pdf-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:0;background:transparent;border:none;cursor:pointer}.sd-preview-pdf-thumb__page{width:152px;aspect-ratio:612/792;background:var(--sd-pdf-page-bg);border-radius:2px;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;box-shadow:0 2px 6px #0000004d;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;background-image:linear-gradient(90deg,#0000,#0000000a,#0000);background-size:200% 100%;animation:sd-preview-pdf-thumb-skel 1.6s ease-in-out infinite}.sd-preview-pdf-thumb__canvas{display:block;max-width:100%;max-height:100%;background:var(--sd-pdf-page-bg)}.sd-preview-pdf-thumb__label{font-size:11px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-primary);outline-offset:-2px}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__label{color:var(--sd-pdf-primary);font-weight:600}.sd-preview-pdf-thumb:focus-visible .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;background:var(--sd-pdf-shell-bg);background-image:linear-gradient(45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.015) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:auto;padding:32px 24px 96px;display:flex;justify-content:center;align-items:flex-start}:host([data-theme=light]) .sd-preview-pdf-stage{background-image:linear-gradient(45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.015) 75%)}.sd-preview-pdf-page-wrap{display:inline-block;position:relative}.sd-preview-pdf-page{display:block;background:var(--sd-pdf-page-bg);border-radius:2px;box-shadow:var(--sd-pdf-page-shadow);max-width:100%}.sd-preview-pdf-toolbar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;padding:5px 6px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--sd-pdf-divider);border-radius:10px;box-shadow:0 8px 30px #0006;z-index:4;max-width:calc(100% - 32px);overflow-x:auto}.sd-preview-pdf-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:28px;padding:0 6px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-toolbar__btn sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-toolbar__btn span{font-size:13px;font-weight:500}.sd-preview-pdf-toolbar__btn--with-label{padding:0 10px}.sd-preview-pdf-toolbar__btn--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-toolbar__btn:hover:not(:disabled):not(.sd-preview-pdf-toolbar__btn--active){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-toolbar__btn:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-toolbar__btn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-toolbar__page{display:inline-flex;align-items:center;gap:4px;padding:0 6px;flex-shrink:0}.sd-preview-pdf-toolbar__page-input{width:36px;height:24px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:4px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;outline:none}.sd-preview-pdf-toolbar__page-input:focus{border-color:var(--sd-pdf-primary)}.sd-preview-pdf-toolbar__page-total{font-size:13px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-toolbar__zoom{min-width:56px;text-align:center;color:var(--sd-pdf-fg);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;background:#ffffff14;border-radius:4px;padding:2px 8px}.sd-preview-pdf-toolbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);margin:0 4px;flex-shrink:0}.sd-preview-pdf-status{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;max-width:420px}.sd-preview-pdf-status__tile{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-status__tile sd-icon{font-size:48px;width:48px;height:48px}.sd-preview-pdf-status__tile--muted{background:#ffffff0d}.sd-preview-pdf-status__tile--muted sd-icon{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-status__tile--danger{background:var(--sd-pdf-danger-soft);border-color:var(--sd-pdf-danger-border)}.sd-preview-pdf-status__tile--danger sd-icon{color:var(--sd-pdf-danger)}.sd-preview-pdf-status__title{font-size:16px;font-weight:500;color:var(--sd-pdf-fg)}.sd-preview-pdf-status__hint{font-size:13px;color:var(--sd-pdf-fg-muted);line-height:1.5}.sd-preview-pdf-status__actions{display:flex;gap:8px;margin-top:4px}.sd-preview-pdf-progress-pct{font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted)}.sd-preview-pdf-progress{width:240px;height:4px;background:#ffffff14;border-radius:999px;overflow:hidden}.sd-preview-pdf-progress__fill{height:100%;background:var(--sd-pdf-primary);transition:width .12s linear}.sd-preview-pdf-spinner{width:56px;height:56px;border-radius:999px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--sd-pdf-primary);animation:sd-preview-pdf-spin .9s linear infinite}@keyframes sd-preview-pdf-spin{to{transform:rotate(360deg)}}@keyframes sd-preview-pdf-thumb-skel{0%{background-position:200% 0}to{background-position:-200% 0}}.sd-preview-pdf-search-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.sd-preview-pdf-search-result{width:100%;display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#ffffff0a;border:1px solid transparent;border-radius:6px;color:var(--sd-pdf-fg);cursor:pointer;text-align:left;transition:background .12s,border-color .12s}.sd-preview-pdf-search-result:hover{background:#ffffff12}.sd-preview-pdf-search-result--active{background:var(--sd-pdf-primary-soft);border-color:#005cbb73}.sd-preview-pdf-search-result__snippet{flex:1 1 auto;font-size:12px;line-height:1.4;color:var(--sd-pdf-fg);word-break:break-word}.sd-preview-pdf-search-result__snippet mark{background:var(--sd-pdf-search-hi);color:#000;padding:0 2px;border-radius:2px}.sd-preview-pdf-search-result__page{flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted);background:#ffffff0f;padding:2px 6px;border-radius:4px}.sd-preview-pdf-btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:var(--sd-pdf-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:filter .12s}.sd-preview-pdf-btn-primary sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-primary:hover{filter:brightness(1.1)}.sd-preview-pdf-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:2px}.sd-preview-pdf-btn-secondary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:transparent;color:var(--sd-pdf-fg);border:1px solid var(--sd-pdf-divider);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:background .12s}.sd-preview-pdf-btn-secondary sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-secondary:hover{background:#ffffff0f}.sd-preview-pdf-btn-secondary:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { pageCanvasRef: [{ type: i0.ViewChild, args: ['pageCanvas', { isSignal: true }] }], stageEl: [{ type: i0.ViewChild, args: ['stageRef', { isSignal: true }] }], pageInputRef: [{ type: i0.ViewChild, args: ['pageInput', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], thumbCanvases: [{ type: i0.ViewChildren, args: ['thumbCanvas', { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], startPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPage", required: false }] }], initialZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialZoom", required: false }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: false }] }], sidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarOpen", required: false }] }], scrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollMode", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], downloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadable", required: false }] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }], httpHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "httpHeaders", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], loaded: [{ type: i0.Output, args: ["loaded"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], zoomChange: [{ type: i0.Output, args: ["zoomChange"] }], download: [{ type: i0.Output, args: ["download"] }], loadError: [{ type: i0.Output, args: ["loadError"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], onKeyDown: [{
+                    }, template: "<!--\n  sd-preview-pdf shell. Self-contained \u2014 sizes to its parent. Consumer wraps\n  in <sd-modal>/<sd-side-drawer>/page section. Header + sidebar + stage +\n  floating toolbar mirror Artboards A / C / E from the design handoff.\n-->\n<div class=\"sd-preview-pdf-shell\" role=\"region\">\n  @let _stage = stage();\n  @let _numPages = numPages();\n  @let _activePage = activePage();\n  @let _isSidebarOpen = isSidebarOpen();\n  @let _searchBarOpen = searchBarOpen();\n  @let _searchTerm = searchTerm();\n  @let _searchTotal = searchTotal();\n\n  <!-- ============================================\n       HEADER BAR \u2014 hidden in empty + loading per design\n       ============================================ -->\n  @if (_stage === 'ready') {\n    <div class=\"sd-preview-pdf-header\">\n      <div class=\"sd-preview-pdf-header__left\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"_isSidebarOpen\"\n          [attr.aria-expanded]=\"_isSidebarOpen\"\n          [attr.aria-controls]=\"sidebarRegionId()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.toggle-sidebar' | translate\"\n          [attr.data-autoId]=\"autoIdSidebarToggle()\"\n          (click)=\"toggleSidebar()\">\n          <sd-icon fontIcon=\"menu\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-header__divider\"></span>\n        <div class=\"sd-preview-pdf-fileicon\" aria-hidden=\"true\">PDF</div>\n        <div class=\"sd-preview-pdf-header__meta\">\n          <div class=\"sd-preview-pdf-header__name\" [title]=\"title() || filename()\">\n            {{ title() || filename() }}\n          </div>\n          <div class=\"sd-preview-pdf-header__sub\">\n            {{ 'core.component.preview-pdf.pages-count' | translate: { count: _numPages } }}\n          </div>\n        </div>\n      </div>\n\n      <div class=\"sd-preview-pdf-header__right\">\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"_searchBarOpen\"\n          [attr.aria-expanded]=\"_searchBarOpen\"\n          [attr.aria-controls]=\"searchBarId()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search' | translate\"\n          [attr.data-autoId]=\"autoIdSearchToggle()\"\n          (click)=\"searchBarOpen() ? closeSearch() : openSearch()\">\n          <sd-icon fontIcon=\"search\"></sd-icon>\n        </button>\n        @if (canPrint()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.print' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.print' | translate\"\n            [attr.data-autoId]=\"autoIdPrint()\"\n            (click)=\"printFile()\">\n            <sd-icon fontIcon=\"print\"></sd-icon>\n          </button>\n        }\n        @if (canDownload()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.download' | translate\"\n            [attr.data-autoId]=\"autoIdDownload()\"\n            (click)=\"downloadFile()\">\n            <sd-icon fontIcon=\"download\"></sd-icon>\n          </button>\n        }\n        @if (canFullscreen()) {\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-iconbtn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.fullscreen' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.fullscreen' | translate\"\n            [attr.data-autoId]=\"autoIdFullscreen()\"\n            (click)=\"toggleFullscreen()\">\n            <sd-icon [fontIcon]=\"isFullscreen() ? 'fullscreen_exit' : 'fullscreen'\"></sd-icon>\n          </button>\n        }\n      </div>\n    </div>\n\n    <!-- ============================================\n         SEARCH BAR \u2014 between header + body, only when bar is open\n         ============================================ -->\n    <div\n      class=\"sd-preview-pdf-searchbar\"\n      role=\"search\"\n      [id]=\"searchBarId()\"\n      [hidden]=\"!_searchBarOpen\"\n      [style.display]=\"_searchBarOpen ? null : 'none'\">\n      @if (_searchBarOpen) {\n        <sd-icon class=\"sd-preview-pdf-searchbar__icon\" fontIcon=\"search\"></sd-icon>\n        <input\n          #searchInput\n          type=\"text\"\n          class=\"sd-preview-pdf-searchbar__input\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-placeholder' | translate\"\n          [attr.placeholder]=\"'core.component.preview-pdf.search-placeholder' | translate\"\n          [value]=\"_searchTerm\"\n          [attr.data-autoId]=\"autoIdSearchInput()\"\n          (input)=\"onSearchInput($event)\" />\n        <span class=\"sd-preview-pdf-searchbar__counter\" aria-live=\"polite\">\n          {{ searchCurrent() }} / {{ _searchTotal }}{{ searchTruncated() ? '+' : '' }}\n        </span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"_searchTotal === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-prev' | translate\"\n          [attr.data-autoId]=\"autoIdSearchPrev()\"\n          (click)=\"searchPrev()\">\n          <sd-icon fontIcon=\"keyboard_arrow_up\"></sd-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [disabled]=\"_searchTotal === 0\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-next' | translate\"\n          [attr.data-autoId]=\"autoIdSearchNext()\"\n          (click)=\"searchNext()\">\n          <sd-icon fontIcon=\"keyboard_arrow_down\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__divider\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchCaseSensitive()\"\n          [attr.aria-pressed]=\"searchCaseSensitive()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-case' | translate\"\n          [attr.data-autoId]=\"autoIdSearchCase()\"\n          (click)=\"toggleSearchCaseSensitive()\">\n          <sd-icon fontIcon=\"match_case\"></sd-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [class.sd-preview-pdf-iconbtn--active]=\"searchWholeWord()\"\n          [attr.aria-pressed]=\"searchWholeWord()\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-whole' | translate\"\n          [attr.data-autoId]=\"autoIdSearchWhole()\"\n          (click)=\"toggleSearchWholeWord()\">\n          <sd-icon fontIcon=\"text_fields\"></sd-icon>\n        </button>\n        <span class=\"sd-preview-pdf-searchbar__spacer\"></span>\n        <button\n          type=\"button\"\n          class=\"sd-preview-pdf-iconbtn\"\n          [attr.aria-label]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.title]=\"'core.component.preview-pdf.search-close' | translate\"\n          [attr.data-autoId]=\"autoIdSearchClose()\"\n          (click)=\"closeSearch()\">\n          <sd-icon fontIcon=\"close\"></sd-icon>\n        </button>\n      }\n    </div>\n  }\n\n  <!-- ============================================\n       BODY \u2014 sidebar + stage\n       ============================================ -->\n  <div class=\"sd-preview-pdf-body\">\n    <!-- SIDEBAR ............................................................. -->\n    @if (_stage === 'ready') {\n      <aside\n        class=\"sd-preview-pdf-sidebar\"\n        role=\"complementary\"\n        [id]=\"sidebarRegionId()\"\n        [hidden]=\"!_isSidebarOpen\"\n        [style.display]=\"_isSidebarOpen ? null : 'none'\">\n        @if (_isSidebarOpen) {\n          @let _sidebarMode = sidebarMode();\n          <div class=\"sd-preview-pdf-sidebar__tabs\" role=\"tablist\">\n            <button\n              #sidebarTab\n              type=\"button\"\n              class=\"sd-preview-pdf-sidebar__tab\"\n              role=\"tab\"\n              [id]=\"tabThumbnailsId()\"\n              [attr.aria-selected]=\"_sidebarMode === 'thumbnails'\"\n              [attr.aria-controls]=\"sidebarPanelId()\"\n              [attr.tabindex]=\"_sidebarMode === 'thumbnails' ? 0 : -1\"\n              [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'thumbnails'\"\n              data-sidebar-mode=\"thumbnails\"\n              [attr.data-autoId]=\"autoIdTabThumbnails()\"\n              (keydown)=\"onSidebarTabKeyDown($event, 'thumbnails')\"\n              (click)=\"setSidebarMode('thumbnails')\">\n              <sd-icon fontIcon=\"view_carousel\"></sd-icon>\n              <span>{{ 'core.component.preview-pdf.tab.thumbnails' | translate }}</span>\n            </button>\n            <button\n              #sidebarTab\n              type=\"button\"\n              class=\"sd-preview-pdf-sidebar__tab\"\n              role=\"tab\"\n              [id]=\"tabOutlineId()\"\n              [attr.aria-selected]=\"_sidebarMode === 'outline'\"\n              [attr.aria-controls]=\"sidebarPanelId()\"\n              [attr.tabindex]=\"_sidebarMode === 'outline' ? 0 : -1\"\n              [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'outline'\"\n              data-sidebar-mode=\"outline\"\n              [attr.data-autoId]=\"autoIdTabOutline()\"\n              (keydown)=\"onSidebarTabKeyDown($event, 'outline')\"\n              (click)=\"setSidebarMode('outline')\">\n              <sd-icon fontIcon=\"list\"></sd-icon>\n              <span>{{ 'core.component.preview-pdf.tab.outline' | translate }}</span>\n            </button>\n            <button\n              #sidebarTab\n              type=\"button\"\n              class=\"sd-preview-pdf-sidebar__tab\"\n              role=\"tab\"\n              [id]=\"tabSearchId()\"\n              [attr.aria-selected]=\"_sidebarMode === 'search'\"\n              [attr.aria-controls]=\"sidebarPanelId()\"\n              [attr.tabindex]=\"_sidebarMode === 'search' ? 0 : -1\"\n              [class.sd-preview-pdf-sidebar__tab--active]=\"_sidebarMode === 'search'\"\n              data-sidebar-mode=\"search\"\n              [attr.data-autoId]=\"autoIdTabSearch()\"\n              (keydown)=\"onSidebarTabKeyDown($event, 'search')\"\n              (click)=\"setSidebarMode('search')\">\n              <sd-icon fontIcon=\"search\"></sd-icon>\n              <span>{{ 'core.component.preview-pdf.tab.search' | translate }}</span>\n            </button>\n          </div>\n\n          <div\n            #sidebarContent\n            class=\"sd-preview-pdf-sidebar__content\"\n            role=\"tabpanel\"\n            [id]=\"sidebarPanelId()\"\n            [attr.aria-labelledby]=\"sidebarActiveTabId()\"\n            (scroll)=\"onThumbnailSidebarScroll($event)\">\n            @switch (_sidebarMode) {\n              @case ('thumbnails') {\n                <ul class=\"sd-preview-pdf-thumb-list\">\n                  <li class=\"sd-preview-pdf-thumb-list__spacer\" aria-hidden=\"true\" [style.height.px]=\"thumbnailTopSpacer()\"></li>\n                  @for (p of pageNumbers(); track trackByPage($index, p)) {\n                    <li>\n                      <button\n                        type=\"button\"\n                        class=\"sd-preview-pdf-thumb\"\n                        [class.sd-preview-pdf-thumb--active]=\"p === _activePage\"\n                        [attr.aria-current]=\"p === _activePage ? 'page' : null\"\n                        [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: p, total: _numPages }\"\n                        [attr.data-autoId]=\"autoIdThumb(p - 1)\"\n                        (click)=\"goToPage(p)\">\n                        <div class=\"sd-preview-pdf-thumb__page\">\n                          <canvas #thumbCanvas class=\"sd-preview-pdf-thumb__canvas\" [attr.data-page]=\"p\" aria-hidden=\"true\"></canvas>\n                        </div>\n                        <span class=\"sd-preview-pdf-thumb__label\">{{ p }}</span>\n                      </button>\n                    </li>\n                  }\n                  <li class=\"sd-preview-pdf-thumb-list__spacer\" aria-hidden=\"true\" [style.height.px]=\"thumbnailBottomSpacer()\"></li>\n                </ul>\n              }\n              @case ('outline') {\n                <ul\n                  class=\"sd-preview-pdf-outline-tree\"\n                  role=\"tree\"\n                  [attr.aria-label]=\"'core.component.preview-pdf.tab.outline' | translate\">\n                  @for (row of visibleOutline(); track row.item.id) {\n                    <li class=\"sd-preview-pdf-outline-tree__node\" role=\"none\">\n                      <div class=\"sd-preview-pdf-outline-tree__row\" [style.padding-left.px]=\"(row.level - 1) * 16\">\n                        @if (row.item.children.length > 0) {\n                          <button\n                            type=\"button\"\n                            class=\"sd-preview-pdf-outline-tree__toggle\"\n                            tabindex=\"-1\"\n                            [attr.aria-label]=\"row.item.title\"\n                            [attr.aria-expanded]=\"isOutlineExpanded(row.item.id)\"\n                            (click)=\"toggleOutlineItem(row.item.id, $event)\">\n                            <sd-icon [fontIcon]=\"isOutlineExpanded(row.item.id) ? 'expand_more' : 'chevron_right'\"></sd-icon>\n                          </button>\n                        } @else {\n                          <span class=\"sd-preview-pdf-outline-tree__toggle-placeholder\" aria-hidden=\"true\"></span>\n                        }\n\n                        @if (row.item.url && row.item.page === null) {\n                          <a\n                            #outlineItem\n                            class=\"sd-preview-pdf-outline-tree__item\"\n                            role=\"treeitem\"\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            [href]=\"row.item.url\"\n                            [attr.data-outline-id]=\"row.item.id\"\n                            [attr.aria-level]=\"row.level\"\n                            [attr.aria-expanded]=\"row.item.children.length > 0 ? isOutlineExpanded(row.item.id) : null\"\n                            [attr.aria-current]=\"row.item.page === _activePage ? 'page' : null\"\n                            [attr.tabindex]=\"outlineFocusId() === row.item.id ? 0 : -1\"\n                            (focus)=\"focusOutlineItem(row.item.id)\"\n                            (keydown)=\"onOutlineKeyDown($event, row.item.id)\">\n                            {{ row.item.title }}\n                          </a>\n                        } @else {\n                          <button\n                            #outlineItem\n                            type=\"button\"\n                            class=\"sd-preview-pdf-outline-tree__item\"\n                            role=\"treeitem\"\n                            [attr.data-outline-id]=\"row.item.id\"\n                            [attr.aria-level]=\"row.level\"\n                            [attr.aria-expanded]=\"row.item.children.length > 0 ? isOutlineExpanded(row.item.id) : null\"\n                            [attr.aria-current]=\"row.item.page === _activePage ? 'page' : null\"\n                            [attr.tabindex]=\"outlineFocusId() === row.item.id ? 0 : -1\"\n                            (focus)=\"focusOutlineItem(row.item.id)\"\n                            (click)=\"activateOutlineItem(row.item.id)\"\n                            (keydown)=\"onOutlineKeyDown($event, row.item.id)\">\n                            {{ row.item.title }}\n                          </button>\n                        }\n                      </div>\n                    </li>\n                  }\n                </ul>\n              }\n              @case ('search') {\n                @if (!_searchTerm) {\n                  <div class=\"sd-preview-pdf-sidebar__message\">\n                    <sd-icon fontIcon=\"search\"></sd-icon>\n                    <p>{{ 'core.component.preview-pdf.search-placeholder' | translate }}</p>\n                  </div>\n                } @else if (_searchTotal === 0) {\n                  <div class=\"sd-preview-pdf-sidebar__message\">\n                    <sd-icon fontIcon=\"search_off\"></sd-icon>\n                    <p>{{ 'core.component.preview-pdf.search-no-results' | translate }}</p>\n                  </div>\n                } @else {\n                  @if (searchTruncated()) {\n                    <p class=\"sd-preview-pdf-search-limit\" role=\"status\">\n                      {{ 'core.component.preview-pdf.search-truncated' | translate: { count: _searchTotal } }}\n                    </p>\n                  }\n                  <ul class=\"sd-preview-pdf-search-list\">\n                    @for (r of searchResults(); track $index; let i = $index) {\n                      <li>\n                        <button\n                          type=\"button\"\n                          class=\"sd-preview-pdf-search-result\"\n                          [class.sd-preview-pdf-search-result--active]=\"i === searchActiveIndex()\"\n                          [attr.data-autoId]=\"autoIdResult(i)\"\n                          (click)=\"activateSearchResult(i)\">\n                          <span class=\"sd-preview-pdf-search-result__snippet\">\n                            {{ r.before }}<mark>{{ r.term }}</mark\n                            >{{ r.after }}\n                          </span>\n                          <span class=\"sd-preview-pdf-search-result__page\">{{ r.page }}</span>\n                        </button>\n                      </li>\n                    }\n                  </ul>\n                }\n              }\n            }\n          </div>\n        }\n      </aside>\n    }\n\n    <!-- STAGE ............................................................... -->\n    <div class=\"sd-preview-pdf-stage\" #stageRef (wheel)=\"onWheel($event)\" (scroll)=\"onStageScroll()\">\n      @switch (_stage) {\n        @case ('empty') {\n          <div class=\"sd-preview-pdf-status\">\n            <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--muted\">\n              <sd-icon fontIcon=\"picture_as_pdf\"></sd-icon>\n            </div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.empty.title' | translate }}\n            </div>\n            <div class=\"sd-preview-pdf-status__hint\">\n              {{ 'core.component.preview-pdf.empty.subtitle' | translate }}\n            </div>\n          </div>\n        }\n        @case ('loading') {\n          @let _loadPercent = loadPercent();\n          <div class=\"sd-preview-pdf-status\">\n            <div\n              class=\"sd-preview-pdf-spinner\"\n              role=\"progressbar\"\n              [attr.aria-label]=\"'core.component.preview-pdf.loading' | translate\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n              [attr.aria-valuenow]=\"_loadPercent\"></div>\n            <div class=\"sd-preview-pdf-status__title\">\n              {{ 'core.component.preview-pdf.loading' | translate }}\n              @if (_loadPercent > 0) {\n                <span class=\"sd-preview-pdf-progress-pct\">&nbsp;{{ _loadPercent }}%</span>\n              }\n            </div>\n            <div class=\"sd-preview-pdf-progress\">\n              <div class=\"sd-preview-pdf-progress__fill\" [style.width.%]=\"_loadPercent\"></div>\n            </div>\n          </div>\n        }\n        @case ('error') {\n          @if (loadError$(); as err) {\n            <div class=\"sd-preview-pdf-status\" role=\"alert\" aria-live=\"assertive\">\n              <div class=\"sd-preview-pdf-status__tile sd-preview-pdf-status__tile--danger\">\n                <sd-icon fontIcon=\"error\"></sd-icon>\n              </div>\n              <div class=\"sd-preview-pdf-status__title\">\n                {{ 'core.component.preview-pdf.error.' + err.reason + '.title' | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__hint\">\n                {{ 'core.component.preview-pdf.error.' + err.reason + '.body' | translate }}\n              </div>\n              <div class=\"sd-preview-pdf-status__actions\">\n                <button type=\"button\" class=\"sd-preview-pdf-btn-primary\" (click)=\"retryLoad()\" [attr.data-autoId]=\"autoIdRetry()\">\n                  <sd-icon fontIcon=\"refresh\"></sd-icon>\n                  <span>{{ 'core.component.preview-pdf.error.retry' | translate }}</span>\n                </button>\n                @if (canDownload()) {\n                  <button type=\"button\" class=\"sd-preview-pdf-btn-secondary\" (click)=\"downloadFile()\">\n                    <sd-icon fontIcon=\"download\"></sd-icon>\n                    <span>{{ 'core.component.preview-pdf.error.download-raw' | translate }}</span>\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        }\n        @default {\n          @if (scrollModeCurrent() === 'continuous') {\n            <div class=\"sd-preview-pdf-continuous-content\">\n              <div class=\"sd-preview-pdf-continuous-spacer\" [style.height.px]=\"continuousTopSpacer()\"></div>\n              @for (pageNumber of continuousPages(); track pageNumber) {\n                <div class=\"sd-preview-pdf-continuous-slot\" [style.min-height.px]=\"continuousPageHeights()[pageNumber]\">\n                  <canvas\n                    #continuousCanvas\n                    class=\"sd-preview-pdf-continuous-page\"\n                    role=\"img\"\n                    [attr.data-page]=\"pageNumber\"\n                    [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: pageNumber, total: _numPages }\">\n                  </canvas>\n                </div>\n              }\n              <div class=\"sd-preview-pdf-continuous-spacer\" [style.height.px]=\"continuousBottomSpacer()\"></div>\n            </div>\n          } @else {\n            <div class=\"sd-preview-pdf-page-wrap\">\n              <canvas\n                #pageCanvas\n                class=\"sd-preview-pdf-page\"\n                role=\"img\"\n                [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: _activePage, total: _numPages }\">\n              </canvas>\n            </div>\n          }\n        }\n      }\n\n      <!-- FLOATING TOOLBAR ........................................ -->\n      @if (showToolbar() && _stage === 'ready') {\n        @let _canPrev = canPrev();\n        @let _canNext = canNext();\n        @let _zoomMode = zoomMode();\n        @let _scrollModeCurrent = scrollModeCurrent();\n        <div class=\"sd-preview-pdf-toolbar\" role=\"toolbar\">\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canPrev\"\n            [attr.aria-label]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.first-page' | translate\"\n            [attr.data-autoId]=\"autoIdFirst()\"\n            (click)=\"firstPage()\">\n            <sd-icon fontIcon=\"first_page\"></sd-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canPrev\"\n            [attr.aria-label]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.prev-page' | translate\"\n            [attr.data-autoId]=\"autoIdPrev()\"\n            (click)=\"prevPage()\">\n            <sd-icon fontIcon=\"chevron_left\"></sd-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__page\">\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              class=\"sd-preview-pdf-toolbar__page-input\"\n              [value]=\"_activePage\"\n              #pageInput\n              (keydown.enter)=\"onPageInputEnter($event)\"\n              (blur)=\"onPageInputBlur($event)\"\n              [attr.aria-label]=\"'core.component.preview-pdf.page-of' | translate: { current: _activePage, total: _numPages }\"\n              [attr.data-autoId]=\"autoIdPageInput()\" />\n            <span class=\"sd-preview-pdf-toolbar__page-total\">/ {{ _numPages }}</span>\n          </span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canNext\"\n            [attr.aria-label]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.next-page' | translate\"\n            [attr.data-autoId]=\"autoIdNext()\"\n            (click)=\"nextPage()\">\n            <sd-icon fontIcon=\"chevron_right\"></sd-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [disabled]=\"!_canNext\"\n            [attr.aria-label]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.last-page' | translate\"\n            [attr.data-autoId]=\"autoIdLast()\"\n            (click)=\"lastPage()\">\n            <sd-icon fontIcon=\"last_page\"></sd-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-out' | translate\"\n            [attr.data-autoId]=\"autoIdZoomOut()\"\n            (click)=\"zoomOut()\">\n            <sd-icon fontIcon=\"remove\"></sd-icon>\n          </button>\n          <span class=\"sd-preview-pdf-toolbar__zoom\" aria-live=\"polite\" [attr.data-autoId]=\"autoIdZoomReadout()\">{{ zoomPercent() }}%</span>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.zoom-in' | translate\"\n            [attr.data-autoId]=\"autoIdZoomIn()\"\n            (click)=\"zoomIn()\">\n            <sd-icon fontIcon=\"add\"></sd-icon>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"_zoomMode === 'page-fit'\"\n            [attr.data-autoId]=\"autoIdFitPage()\"\n            (click)=\"setZoom('page-fit')\">\n            <sd-icon fontIcon=\"fit_screen\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.fit-page' | translate }}</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [class.sd-preview-pdf-toolbar__btn--active]=\"_zoomMode === 'page-width'\"\n            [attr.data-autoId]=\"autoIdFitWidth()\"\n            (click)=\"setZoom('page-width')\">\n            <sd-icon fontIcon=\"swap_horiz\"></sd-icon>\n            <span>{{ 'core.component.preview-pdf.fit-width' | translate }}</span>\n          </button>\n\n          <span class=\"sd-preview-pdf-toolbar__divider\"></span>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn\"\n            [attr.aria-label]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.title]=\"'core.component.preview-pdf.rotate' | translate\"\n            [attr.data-autoId]=\"autoIdRotate()\"\n            (click)=\"rotate('right')\">\n            <sd-icon fontIcon=\"rotate_right\"></sd-icon>\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"sd-preview-pdf-toolbar__btn sd-preview-pdf-toolbar__btn--with-label\"\n            [attr.data-autoId]=\"autoIdScrollMode()\"\n            (click)=\"setScrollMode(_scrollModeCurrent === 'page' ? 'continuous' : 'page')\">\n            <sd-icon [fontIcon]=\"_scrollModeCurrent === 'page' ? 'description' : 'view_day'\"></sd-icon>\n            <span>\n              {{\n                (_scrollModeCurrent === 'page' ? 'core.component.preview-pdf.scroll-page' : 'core.component.preview-pdf.scroll-continuous')\n                  | translate\n              }}\n            </span>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{--sd-pdf-shell-bg: #1a1c1f;--sd-pdf-sidebar-bg: #22252a;--sd-pdf-toolbar-bg: rgba(20, 22, 25, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .4);--sd-pdf-divider: rgba(255, 255, 255, .08);--sd-pdf-fg: #f5f6f7;--sd-pdf-fg-muted: rgba(255, 255, 255, .6);--sd-pdf-fg-subtle: rgba(255, 255, 255, .4);--sd-pdf-primary: var(--sd-pdf-accent, var(--sd-primary, #005cbb));--sd-pdf-primary-soft: var(--sd-pdf-accent-soft, rgba(0, 92, 187, .18));--sd-pdf-danger: var(--sd-error, #ba1a1a);--sd-pdf-success: var(--sd-success, #2e7d32);--sd-pdf-danger-soft: rgba(186, 26, 26, .1);--sd-pdf-danger-border: rgba(186, 26, 26, .3);--sd-pdf-danger-tint: rgba(186, 26, 26, .15);--sd-pdf-hover-bg: rgba(255, 255, 255, .1);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(249, 115, 22, .85);display:block;width:100%;height:100%;min-height:320px;outline:none}:host:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}:host([data-theme=light]){--sd-pdf-shell-bg: #f7f8fa;--sd-pdf-sidebar-bg: #ffffff;--sd-pdf-toolbar-bg: rgba(255, 255, 255, .94);--sd-pdf-page-bg: #ffffff;--sd-pdf-page-shadow: 0 4px 16px rgba(0, 0, 0, .12);--sd-pdf-divider: rgba(0, 0, 0, .08);--sd-pdf-fg: #1a1c1f;--sd-pdf-fg-muted: rgba(0, 0, 0, .62);--sd-pdf-fg-subtle: rgba(0, 0, 0, .42);--sd-pdf-primary: var(--sd-pdf-accent, var(--sd-primary, #005cbb));--sd-pdf-primary-soft: var(--sd-pdf-accent-soft, rgba(0, 92, 187, .16));--sd-pdf-danger: var(--sd-error, #ba1a1a);--sd-pdf-success: var(--sd-success, #2e7d32);--sd-pdf-danger-soft: rgba(186, 26, 26, .08);--sd-pdf-danger-border: rgba(186, 26, 26, .25);--sd-pdf-danger-tint: rgba(186, 26, 26, .12);--sd-pdf-hover-bg: rgba(0, 0, 0, .06);--sd-pdf-search-hi: rgba(250, 204, 21, .55);--sd-pdf-search-hi-active: rgba(250, 204, 21, .9)}:host(.sd-preview-pdf-host--fullscreen){width:100vw;height:100vh;min-height:0}.sd-preview-pdf-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-pdf-shell-bg);color:var(--sd-pdf-fg);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #0000008c,0 0 0 1px #ffffff0a;font-family:inherit}.sd-preview-pdf-header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:57px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sd-pdf-divider);flex:0 0 auto;z-index:2}.sd-preview-pdf-header__left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}.sd-preview-pdf-header__right{display:flex;align-items:center;gap:4px;flex-shrink:0}.sd-preview-pdf-header__divider{display:inline-block;width:1px;height:20px;background:var(--sd-pdf-divider)}.sd-preview-pdf-header__meta{display:flex;flex-direction:column;min-width:0}.sd-preview-pdf-header__name{font-size:14px;font-weight:500;color:var(--sd-pdf-fg);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-preview-pdf-header__sub{font-size:11px;color:var(--sd-pdf-fg-muted);margin-top:2px}.sd-preview-pdf-fileicon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:var(--sd-pdf-danger-tint);border:1px solid var(--sd-pdf-danger-border);color:var(--sd-error-light, #f87171);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.sd-preview-pdf-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 8px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;flex-shrink:0}.sd-preview-pdf-iconbtn sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-iconbtn__label{font-size:13px;font-weight:500}.sd-preview-pdf-iconbtn:hover:not(:disabled){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-iconbtn:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-iconbtn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-iconbtn--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-searchbar{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;background:var(--sd-pdf-toolbar-bg);border-bottom:1px solid var(--sd-pdf-divider);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);flex:0 0 auto;z-index:2}.sd-preview-pdf-searchbar__icon{color:var(--sd-pdf-fg-muted);font-size:18px;width:18px;height:18px;flex-shrink:0}.sd-preview-pdf-searchbar__input{flex:0 1 360px;min-width:160px;height:30px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:6px;padding:0 10px;font-size:13px;outline:none}.sd-preview-pdf-searchbar__input::placeholder{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-searchbar__input:focus{border-color:var(--sd-pdf-primary);background:#ffffff17}.sd-preview-pdf-searchbar__counter{color:var(--sd-pdf-fg-muted);font-size:12px;font-variant-numeric:tabular-nums;min-width:48px;text-align:center;flex-shrink:0}.sd-preview-pdf-searchbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);flex-shrink:0}.sd-preview-pdf-searchbar__spacer{flex:1 1 auto}.sd-pdf-search-overlay{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:4px;max-width:80%;pointer-events:none;z-index:5}.sd-pdf-search-hi{display:inline-block;padding:1px 4px;border-radius:2px;background:var(--sd-pdf-search-hi);color:#000;font-size:12px;font-weight:500}.sd-pdf-search-hi--active{background:var(--sd-pdf-search-hi-active);color:#fff;box-shadow:0 0 0 2px #fff6}.sd-preview-pdf-body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:row;overflow:hidden}.sd-preview-pdf-sidebar{width:240px;display:flex;flex-direction:column;background:var(--sd-pdf-sidebar-bg);border-right:1px solid var(--sd-pdf-divider);flex-shrink:0;min-height:0}.sd-preview-pdf-sidebar__tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-sidebar__tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 4px;background:transparent;border:none;color:var(--sd-pdf-fg-muted);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-sidebar__tab sd-icon{font-size:14px;width:14px;height:14px}.sd-preview-pdf-sidebar__tab:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-sidebar__tab--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-sidebar__content{flex:1 1 auto;overflow:auto;padding:12px}.sd-preview-pdf-sidebar__message{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-sidebar__message sd-icon{font-size:28px;width:28px;height:28px;opacity:.6}.sd-preview-pdf-sidebar__message p{margin:0;font-size:12px;line-height:1.5}.sd-preview-pdf-outline-tree{list-style:none;margin:0;padding:0}.sd-preview-pdf-outline-tree__node{margin:0;padding:0}.sd-preview-pdf-outline-tree__row{display:flex;align-items:center;min-width:0}.sd-preview-pdf-outline-tree__toggle,.sd-preview-pdf-outline-tree__toggle-placeholder{width:24px;height:28px;flex:0 0 24px}.sd-preview-pdf-outline-tree__toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;background:transparent;color:var(--sd-pdf-fg-muted);cursor:pointer}.sd-preview-pdf-outline-tree__toggle:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-outline-tree__toggle sd-icon{width:16px;height:16px;font-size:16px}.sd-preview-pdf-outline-tree__item{min-width:0;flex:1 1 auto;overflow:hidden;padding:6px 8px;border:0;border-radius:5px;background:transparent;color:var(--sd-pdf-fg-muted);font:inherit;font-size:12px;line-height:1.35;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.sd-preview-pdf-outline-tree__item:hover{background:#ffffff0f;color:var(--sd-pdf-fg)}.sd-preview-pdf-outline-tree__item[aria-current=page]{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary);font-weight:600}.sd-preview-pdf-outline-tree__item:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:-2px}.sd-preview-pdf-thumb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.sd-preview-pdf-thumb-list__spacer{flex:0 0 auto;pointer-events:none}.sd-preview-pdf-search-limit{margin:0 0 8px;color:var(--sd-pdf-fg-muted);font-size:11px;line-height:1.4}.sd-preview-pdf-thumb{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:0;background:transparent;border:none;cursor:pointer}.sd-preview-pdf-thumb__page{width:152px;aspect-ratio:612/792;background:var(--sd-pdf-page-bg);border-radius:2px;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;box-shadow:0 2px 6px #0000004d;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;background-image:linear-gradient(90deg,#0000,#0000000a,#0000);background-size:200% 100%;animation:sd-preview-pdf-thumb-skel 1.6s ease-in-out infinite}.sd-preview-pdf-thumb__canvas{display:block;max-width:100%;max-height:100%;background:var(--sd-pdf-page-bg)}.sd-preview-pdf-thumb__label{font-size:11px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-primary);outline-offset:-2px}.sd-preview-pdf-thumb--active .sd-preview-pdf-thumb__label{color:var(--sd-pdf-primary);font-weight:600}.sd-preview-pdf-thumb:focus-visible .sd-preview-pdf-thumb__page{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;background:var(--sd-pdf-shell-bg);background-image:linear-gradient(45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.015) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:auto;padding:32px 24px 96px;display:flex;justify-content:center;align-items:flex-start}:host([data-theme=light]) .sd-preview-pdf-stage{background-image:linear-gradient(45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.015) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.015) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.015) 75%)}.sd-preview-pdf-page-wrap{display:inline-block;position:relative}.sd-preview-pdf-page{display:block;background:var(--sd-pdf-page-bg);border-radius:2px;box-shadow:var(--sd-pdf-page-shadow);max-width:100%}.sd-preview-pdf-continuous-content{width:100%;min-height:100%}.sd-preview-pdf-continuous-spacer{width:1px}.sd-preview-pdf-continuous-slot{display:flex;justify-content:center;align-items:flex-start}.sd-preview-pdf-continuous-slot+.sd-preview-pdf-continuous-slot{margin-top:24px}.sd-preview-pdf-continuous-page{display:block;max-width:100%;background:var(--sd-pdf-page-bg);border-radius:2px;box-shadow:var(--sd-pdf-page-shadow)}.sd-preview-pdf-toolbar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;padding:5px 6px;background:var(--sd-pdf-toolbar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--sd-pdf-divider);border-radius:10px;box-shadow:0 8px 30px #0006;z-index:4;max-width:calc(100% - 32px);overflow-x:auto}.sd-preview-pdf-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:28px;padding:0 6px;background:transparent;border:none;color:var(--sd-pdf-fg);border-radius:6px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .12s,color .12s}.sd-preview-pdf-toolbar__btn sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-toolbar__btn span{font-size:13px;font-weight:500}.sd-preview-pdf-toolbar__btn--with-label{padding:0 10px}.sd-preview-pdf-toolbar__btn--active{background:var(--sd-pdf-primary-soft);color:var(--sd-pdf-primary)}.sd-preview-pdf-toolbar__btn:hover:not(:disabled):not(.sd-preview-pdf-toolbar__btn--active){background:var(--sd-pdf-hover-bg)}.sd-preview-pdf-toolbar__btn:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}.sd-preview-pdf-toolbar__btn:disabled{opacity:.35;cursor:not-allowed}.sd-preview-pdf-toolbar__page{display:inline-flex;align-items:center;gap:4px;padding:0 6px;flex-shrink:0}.sd-preview-pdf-toolbar__page-input{width:36px;height:24px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);color:var(--sd-pdf-fg);border-radius:4px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums;outline:none}.sd-preview-pdf-toolbar__page-input:focus{border-color:var(--sd-pdf-primary)}.sd-preview-pdf-toolbar__page-total{font-size:13px;color:var(--sd-pdf-fg-muted);font-variant-numeric:tabular-nums}.sd-preview-pdf-toolbar__zoom{min-width:56px;text-align:center;color:var(--sd-pdf-fg);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;background:#ffffff14;border-radius:4px;padding:2px 8px}.sd-preview-pdf-toolbar__divider{width:1px;height:20px;background:var(--sd-pdf-divider);margin:0 4px;flex-shrink:0}.sd-preview-pdf-status{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;max-width:420px}.sd-preview-pdf-status__tile{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sd-pdf-divider)}.sd-preview-pdf-status__tile sd-icon{font-size:48px;width:48px;height:48px}.sd-preview-pdf-status__tile--muted{background:#ffffff0d}.sd-preview-pdf-status__tile--muted sd-icon{color:var(--sd-pdf-fg-subtle)}.sd-preview-pdf-status__tile--danger{background:var(--sd-pdf-danger-soft);border-color:var(--sd-pdf-danger-border)}.sd-preview-pdf-status__tile--danger sd-icon{color:var(--sd-pdf-danger)}.sd-preview-pdf-status__title{font-size:16px;font-weight:500;color:var(--sd-pdf-fg)}.sd-preview-pdf-status__hint{font-size:13px;color:var(--sd-pdf-fg-muted);line-height:1.5}.sd-preview-pdf-status__actions{display:flex;gap:8px;margin-top:4px}.sd-preview-pdf-progress-pct{font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted)}.sd-preview-pdf-progress{width:240px;height:4px;background:#ffffff14;border-radius:999px;overflow:hidden}.sd-preview-pdf-progress__fill{height:100%;background:var(--sd-pdf-primary);transition:width .12s linear}.sd-preview-pdf-spinner{width:56px;height:56px;border-radius:999px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--sd-pdf-primary);animation:sd-preview-pdf-spin .9s linear infinite}@keyframes sd-preview-pdf-spin{to{transform:rotate(360deg)}}@keyframes sd-preview-pdf-thumb-skel{0%{background-position:200% 0}to{background-position:-200% 0}}.sd-preview-pdf-search-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.sd-preview-pdf-search-result{width:100%;display:flex;align-items:flex-start;gap:8px;padding:8px 10px;background:#ffffff0a;border:1px solid transparent;border-radius:6px;color:var(--sd-pdf-fg);cursor:pointer;text-align:left;transition:background .12s,border-color .12s}.sd-preview-pdf-search-result:hover{background:#ffffff12}.sd-preview-pdf-search-result--active{background:var(--sd-pdf-primary-soft);border-color:#005cbb73}.sd-preview-pdf-search-result__snippet{flex:1 1 auto;font-size:12px;line-height:1.4;color:var(--sd-pdf-fg);word-break:break-word}.sd-preview-pdf-search-result__snippet mark{background:var(--sd-pdf-search-hi);color:#000;padding:0 2px;border-radius:2px}.sd-preview-pdf-search-result__page{flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--sd-pdf-fg-muted);background:#ffffff0f;padding:2px 6px;border-radius:4px}.sd-preview-pdf-btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:var(--sd-pdf-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:filter .12s}.sd-preview-pdf-btn-primary sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-primary:hover{filter:brightness(1.1)}.sd-preview-pdf-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:2px}.sd-preview-pdf-btn-secondary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;background:transparent;color:var(--sd-pdf-fg);border:1px solid var(--sd-pdf-divider);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:background .12s}.sd-preview-pdf-btn-secondary sd-icon{font-size:18px;width:18px;height:18px}.sd-preview-pdf-btn-secondary:hover{background:#ffffff0f}.sd-preview-pdf-btn-secondary:focus-visible{outline:2px solid var(--sd-pdf-primary);outline-offset:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pageCanvasRef: [{ type: i0.ViewChild, args: ['pageCanvas', { isSignal: true }] }], stageEl: [{ type: i0.ViewChild, args: ['stageRef', { isSignal: true }] }], pageInputRef: [{ type: i0.ViewChild, args: ['pageInput', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], sidebarContentRef: [{ type: i0.ViewChild, args: ['sidebarContent', { isSignal: true }] }], outlineItemRefs: [{ type: i0.ViewChildren, args: ['outlineItem', { isSignal: true }] }], sidebarTabRefs: [{ type: i0.ViewChildren, args: ['sidebarTab', { isSignal: true }] }], continuousCanvases: [{ type: i0.ViewChildren, args: ['continuousCanvas', { isSignal: true }] }], thumbCanvases: [{ type: i0.ViewChildren, args: ['thumbCanvas', { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], startPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPage", required: false }] }], initialZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialZoom", required: false }] }], sidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebar", required: false }] }], sidebarOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarOpen", required: false }] }], scrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollMode", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], downloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadable", required: false }] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }], httpHeaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "httpHeaders", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], loaded: [{ type: i0.Output, args: ["loaded"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], zoomChange: [{ type: i0.Output, args: ["zoomChange"] }], download: [{ type: i0.Output, args: ["download"] }], loadError: [{ type: i0.Output, args: ["loadError"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
@@ -1986,5 +3206,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SD_PDFJS_LIB, SdPreviewImage, SdPreviewPdf };
+export { SD_PDFJS_LIB, SD_PDF_BROWSER_ADAPTER, SD_PDF_PRINT_ADAPTER, SdPreviewImage, SdPreviewPdf };
 //# sourceMappingURL=sdcorejs-angular-components-preview.mjs.map