svelte-pdf-view 0.1.12 → 0.2.0

package/README.md

@@ -112,12 +112,37 @@ The main container component that provides context for toolbar and renderer.
 </PdfViewer>
 ```
 
-| Prop               | Type        | Default  | Description                                                            |
-| ------------------ | ----------- | -------- | ---------------------------------------------------------------------- |
-| `src`              | `PdfSource` | required | PDF source (URL, ArrayBuffer, Uint8Array, or Blob)                     |
-| `scale`            | `number`    | `1.0`    | Initial zoom scale                                                     |
-| `downloadFilename` | `string`    | -        | Custom filename for PDF download (default: from URL or 'document.pdf') |
-| `class`            | `string`    | `''`     | CSS class for the container                                            |
+| Prop               | Type                      | Default  | Description                                                            |
+| ------------------ | ------------------------- | -------- | ---------------------------------------------------------------------- |
+| `src`              | `PdfSource`               | required | PDF source (URL, ArrayBuffer, Uint8Array, or Blob)                     |
+| `scale`            | `number`                  | `1.0`    | Initial zoom scale                                                     |
+| `downloadFilename` | `string`                  | -        | Custom filename for PDF download (default: from URL or 'document.pdf') |
+| `onerror`          | `(error: string) => void` | -        | Callback when PDF fails to load                                        |
+| `class`            | `string`                  | `''`     | CSS class for the container                                            |
+
+#### Error Handling
+
+```svelte
+<script lang="ts">
+	import { PdfViewer, PdfToolbar, PdfRenderer } from 'svelte-pdf-view';
+
+	let errorMessage = $state<string | null>(null);
+
+	function handleError(error: string) {
+		errorMessage = error;
+		console.error('PDF failed to load:', error);
+	}
+</script>
+
+{#if errorMessage}
+	<div class="error-banner">Failed to load PDF: {errorMessage}</div>
+{/if}
+
+<PdfViewer src="/document.pdf" onerror={handleError}>
+	<PdfToolbar />
+	<PdfRenderer />
+</PdfViewer>
+```
 
 ### `<PdfToolbar>`
 
@@ -213,18 +238,19 @@ You can create your own toolbar using the context API:
 
 #### `actions: PdfViewerActions`
 
-| Method                     | Description                  |
-| -------------------------- | ---------------------------- |
-| `zoomIn()`                 | Increase zoom level          |
-| `zoomOut()`                | Decrease zoom level          |
-| `setScale(scale: number)`  | Set specific zoom scale      |
-| `rotateClockwise()`        | Rotate 90° clockwise         |
-| `rotateCounterClockwise()` | Rotate 90° counter-clockwise |
-| `goToPage(page: number)`   | Navigate to specific page    |
-| `search(query: string)`    | Search for text              |
-| `searchNext()`             | Go to next search match      |
-| `searchPrevious()`         | Go to previous search match  |
-| `clearSearch()`            | Clear search highlights      |
+| Method                        | Description                  |
+| ----------------------------- | ---------------------------- |
+| `zoomIn()`                    | Increase zoom level          |
+| `zoomOut()`                   | Decrease zoom level          |
+| `setScale(scale: number)`     | Set specific zoom scale      |
+| `rotateClockwise()`           | Rotate 90° clockwise         |
+| `rotateCounterClockwise()`    | Rotate 90° counter-clockwise |
+| `goToPage(page: number)`      | Navigate to specific page    |
+| `search(query: string)`       | Search for text              |
+| `searchNext()`                | Go to next search match      |
+| `searchPrevious()`            | Go to previous search match  |
+| `clearSearch()`               | Clear search highlights      |
+| `download(filename?: string)` | Download the PDF             |
 
 ## Types
 
@@ -256,6 +282,7 @@ interface PdfViewerActions {
 	searchNext: () => void;
 	searchPrevious: () => void;
 	clearSearch: () => void;
+	download: (filename?: string) => Promise<void>;
 }
 ```
 

package/dist/PdfRenderer.svelte

@@ -7,6 +7,7 @@
 		type PdfSource
 	} from './pdf-viewer/context.js';
 	import { getPdfJs } from './pdf-viewer/pdfjs-singleton.js';
+	import { PdfPresentationMode } from './pdf-viewer/PdfPresentationMode.js';
 	import { rendererStyles } from './pdf-viewer/renderer-styles.js';
 
 	interface Props {
@@ -37,7 +38,7 @@
 	}: Props = $props();
 
 	const context = getPdfViewerContext();
-	const { state: viewerState, _registerRenderer } = context;
+	const { state: viewerState, _registerRenderer, _setSrcDataForDownload } = context;
 
 	// Use prop src if provided, otherwise fall back to context src (via getter for reactivity)
 	let src = $derived(srcProp ?? context.src);
@@ -51,6 +52,17 @@
 	let viewer: import('./pdf-viewer/PDFViewerCore.js').PDFViewerCore | null = null;
 	let findController: import('./pdf-viewer/FindController.js').FindController | null = null;
 
+	// Presentation mode
+	const presentationMode = new PdfPresentationMode({
+		onStateChange: (newState) => {
+			viewerState.presentationMode = newState;
+		},
+		onPageChange: (pageNumber) => {
+			// Sync page number back to main viewer when changed in presentation mode
+			viewer?.scrollToPage(pageNumber);
+		}
+	});
+
 	async function loadPdf(source: PdfSource) {
 		if (!BROWSER || !scrollContainerEl) return;
 
@@ -110,29 +122,39 @@
 			if (typeof source === 'string') {
 				// URL string
 				documentSource = source;
+				_setSrcDataForDownload(null); // URL doesn't need copying
 			} else if (source instanceof Blob) {
 				// Convert Blob to ArrayBuffer
 				const arrayBuffer = await source.arrayBuffer();
+				_setSrcDataForDownload(arrayBuffer.slice(0)); // Store a copy for download
 				documentSource = { data: arrayBuffer };
 			} else if (source instanceof ArrayBuffer) {
+				_setSrcDataForDownload(source.slice(0)); // Store a copy before PDF.js detaches it
 				documentSource = { data: source };
 			} else if (source instanceof Uint8Array) {
+				_setSrcDataForDownload(new Uint8Array(source).buffer.slice(0) as ArrayBuffer); // Store a copy for download
 				documentSource = { data: source };
 			} else {
 				throw new Error('Invalid PDF source type');
 			}
 
 			const loadingTask = pdfjs.getDocument(documentSource);
-			const pdfDocument = await loadingTask.promise;
+			const loadedPdfDocument = await loadingTask.promise;
 
-			await newViewer.setDocument(pdfDocument);
-			findController.setDocument(pdfDocument);
+			await newViewer.setDocument(loadedPdfDocument);
+			findController.setDocument(loadedPdfDocument);
+
+			// Set document on presentation mode
+			presentationMode.setDocument(loadedPdfDocument);
 
 			viewer = newViewer;
 			viewerState.loading = false;
 		} catch (e) {
-			viewerState.error = e instanceof Error ? e.message : 'Failed to load PDF';
+			const errorMessage = e instanceof Error ? e.message : 'Failed to load PDF';
+			viewerState.error = errorMessage;
 			viewerState.loading = false;
+			// Call the error callback if provided
+			context._onerror?.(errorMessage);
 		}
 	}
 
@@ -167,7 +189,14 @@
 				viewerState.searchTotal = 0;
 			}
 		},
-		download: async () => {} // Download is handled by PdfViewer, not renderer
+		download: async () => {}, // Download is handled by PdfViewer, not renderer
+		enterPresentationMode: async () => {
+			presentationMode.setCurrentPage(viewerState.currentPage);
+			return presentationMode.request();
+		},
+		exitPresentationMode: async () => {
+			await presentationMode.exit();
+		}
 	};
 
 	onMount(async () => {
@@ -218,6 +247,7 @@
 			viewer = null;
 		}
 		findController = null;
+		presentationMode.destroy();
 		// Note: Worker is a global singleton, not cleaned up per-component
 		// Use destroyPdfJs() from pdfjs-singleton.js if you need to fully cleanup
 	});

package/dist/PdfToolbar.svelte

@@ -7,7 +7,8 @@
 		Search,
 		ChevronLeft,
 		ChevronRight,
-		Download
+		Download,
+		Presentation
 	} from '@lucide/svelte';
 	import { getPdfViewerContext } from './pdf-viewer/context.js';
 
@@ -116,8 +117,15 @@
 		{/if}
 	</div>
 
-	<!-- Download -->
+	<!-- Presentation & Download -->
 	<div class="pdf-toolbar-group">
+		<button
+			onclick={() => actions.enterPresentationMode()}
+			aria-label="Presentation Mode"
+			title="Presentation Mode"
+		>
+			<Presentation size={18} />
+		</button>
 		<button onclick={() => actions.download()} aria-label="Download PDF" title="Download">
 			<Download size={18} />
 		</button>

package/dist/PdfViewer.svelte

@@ -8,6 +8,7 @@
 	import type { Snippet } from 'svelte';
 	import {
 		setPdfViewerContext,
+		PresentationModeState,
 		type PdfViewerState,
 		type PdfViewerActions,
 		type PdfSource
@@ -20,6 +21,8 @@
 		scale?: number;
 		/** Custom filename for PDF download (default: extracted from URL or 'document.pdf') */
 		downloadFilename?: string;
+		/** Callback when PDF fails to load */
+		onerror?: (error: string) => void;
 		/** CSS class for the container */
 		class?: string;
 		/** Children (toolbar and renderer) */
@@ -30,12 +33,17 @@
 		src,
 		scale: initialScale = 1.0,
 		downloadFilename,
+		onerror,
 		class: className = '',
 		children
 	}: Props = $props();
 
+	// Keep a copy of binary source data for download (PDF.js transfers/detaches ArrayBuffers)
+	// This is set by PdfRenderer before it passes data to PDF.js
+	let srcDataForDownload = $state<ArrayBuffer | null>(null);
+
 	// Reactive state that will be shared via context
-	let state = $state<PdfViewerState>({
+	let viewerState = $state<PdfViewerState>({
 		loading: true,
 		error: null,
 		totalPages: 0,
@@ -45,7 +53,8 @@
 		searchQuery: '',
 		searchCurrent: 0,
 		searchTotal: 0,
-		isSearching: false
+		isSearching: false,
+		presentationMode: PresentationModeState.NORMAL
 	});
 
 	// Renderer actions - will be populated when renderer mounts
@@ -77,11 +86,12 @@
 			}
 		} else if (src instanceof Blob) {
 			blob = src;
-		} else if (src instanceof ArrayBuffer) {
-			blob = new Blob([src], { type: 'application/pdf' });
+		} else if (srcDataForDownload) {
+			// Use the pre-copied data (original ArrayBuffer/Uint8Array gets detached by PDF.js)
+			blob = new Blob([srcDataForDownload], { type: 'application/pdf' });
 		} else {
-			// Uint8Array
-			blob = new Blob([new Uint8Array(src)], { type: 'application/pdf' });
+			console.error('Cannot download: no valid source data available');
+			return;
 		}
 
 		const url = URL.createObjectURL(blob);
@@ -108,27 +118,42 @@
 		searchNext: () => rendererActions?.searchNext(),
 		searchPrevious: () => rendererActions?.searchPrevious(),
 		clearSearch: () => rendererActions?.clearSearch(),
-		download: downloadPdf
+		download: downloadPdf,
+		enterPresentationMode: async () => {
+			if (rendererActions) {
+				return rendererActions.enterPresentationMode();
+			}
+			return false;
+		},
+		exitPresentationMode: async () => {
+			if (rendererActions) {
+				await rendererActions.exitPresentationMode();
+			}
+		}
 	};
 
 	// Set up context
 	setPdfViewerContext({
-		state,
+		state: viewerState,
 		actions,
 		get src() {
 			return src;
 		},
 		_registerRenderer: (renderer: PdfViewerActions) => {
 			rendererActions = renderer;
+		},
+		_onerror: onerror,
+		_setSrcDataForDownload: (data: ArrayBuffer | null) => {
+			srcDataForDownload = data;
 		}
 	});
 </script>
 
 <div class="pdf-viewer-container {className}">
-	{#if state.loading}
+	{#if viewerState.loading}
 		<div class="pdf-loading">Loading PDF...</div>
-	{:else if state.error}
-		<div class="pdf-error">Error: {state.error}</div>
+	{:else if viewerState.error}
+		<div class="pdf-error">Error: {viewerState.error}</div>
 	{/if}
 
 	{#if children}

package/dist/PdfViewer.svelte.d.ts

@@ -9,6 +9,8 @@ interface Props {
     scale?: number;
     /** Custom filename for PDF download (default: extracted from URL or 'document.pdf') */
     downloadFilename?: string;
+    /** Callback when PDF fails to load */
+    onerror?: (error: string) => void;
     /** CSS class for the container */
     class?: string;
     /** Children (toolbar and renderer) */

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as PdfViewer, Toolbar as PdfToolbar, Renderer as PdfRenderer } from './PdfViewer.svelte';
 export type { PdfSource } from './pdf-viewer/context.js';
-export { getPdfViewerContext, type PdfViewerState, type PdfViewerActions, type PdfViewerContext } from './pdf-viewer/context.js';
+export { getPdfViewerContext, PresentationModeState, type PdfViewerState, type PdfViewerActions, type PdfViewerContext } from './pdf-viewer/context.js';
 export { destroyPdfJs } from './pdf-viewer/pdfjs-singleton.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 // Reexport your entry components here
 export { default as PdfViewer, Toolbar as PdfToolbar, Renderer as PdfRenderer } from './PdfViewer.svelte';
 // Export context for custom toolbars
-export { getPdfViewerContext } from './pdf-viewer/context.js';
+export { getPdfViewerContext, PresentationModeState } from './pdf-viewer/context.js';
 // Export PDF.js singleton utilities
 export { destroyPdfJs } from './pdf-viewer/pdfjs-singleton.js';

package/dist/pdf-viewer/PdfPresentationMode.d.ts

@@ -0,0 +1,96 @@
+/**
+ * PdfPresentationMode - Fullscreen presentation mode for PDF viewing.
+ * This is a derivative work based on PDF.js pdf_presentation_mode.js
+ *
+ * Features:
+ * - Browser fullscreen mode
+ * - Black background
+ * - Single page view scaled to fit screen
+ * - No text layer or toolbar
+ * - Mouse/keyboard/touch navigation
+ */
+import type { PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
+export declare enum PresentationModeState {
+    UNKNOWN = 0,
+    NORMAL = 1,
+    CHANGING = 2,
+    FULLSCREEN = 3
+}
+export interface PresentationModeCallbacks {
+    onStateChange?: (state: PresentationModeState) => void;
+    onPageChange?: (pageNumber: number) => void;
+}
+export declare class PdfPresentationMode {
+    private state;
+    private pdfDocument;
+    private currentPageNumber;
+    private totalPages;
+    private container;
+    private canvas;
+    private callbacks;
+    private fullscreenChangeAbortController;
+    private windowAbortController;
+    private mouseScrollTimeStamp;
+    private mouseScrollDelta;
+    private touchSwipeState;
+    private renderingPage;
+    constructor(callbacks?: PresentationModeCallbacks);
+    /**
+     * Set the PDF document for presentation
+     */
+    setDocument(pdfDocument: PDFDocumentProxy | null): void;
+    /**
+     * Set the current page number (used when entering presentation mode)
+     */
+    setCurrentPage(pageNumber: number): void;
+    /**
+     * Check if presentation mode is active
+     */
+    get active(): boolean;
+    /**
+     * Get current state
+     */
+    get currentState(): PresentationModeState;
+    /**
+     * Request entering fullscreen presentation mode
+     */
+    request(): Promise<boolean>;
+    /**
+     * Exit presentation mode
+     */
+    exit(): Promise<void>;
+    /**
+     * Go to next page
+     */
+    nextPage(): boolean;
+    /**
+     * Go to previous page
+     */
+    previousPage(): boolean;
+    /**
+     * Go to a specific page
+     */
+    goToPage(pageNumber: number): boolean;
+    /**
+     * Destroy and cleanup
+     */
+    destroy(): void;
+    private createPresentationContainer;
+    private destroyPresentationContainer;
+    private renderCurrentPage;
+    private notifyStateChange;
+    private enter;
+    private doExit;
+    private handleMouseWheel;
+    private normalizeWheelDelta;
+    private handleMouseDown;
+    private handleKeyDown;
+    private handleContextMenu;
+    private handleTouchSwipe;
+    private handleResize;
+    private resetMouseScrollState;
+    private addWindowListeners;
+    private removeWindowListeners;
+    private addFullscreenChangeListeners;
+    private removeFullscreenChangeListeners;
+}

package/dist/pdf-viewer/PdfPresentationMode.js

@@ -0,0 +1,437 @@
+/* Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export var PresentationModeState;
+(function (PresentationModeState) {
+    PresentationModeState[PresentationModeState["UNKNOWN"] = 0] = "UNKNOWN";
+    PresentationModeState[PresentationModeState["NORMAL"] = 1] = "NORMAL";
+    PresentationModeState[PresentationModeState["CHANGING"] = 2] = "CHANGING";
+    PresentationModeState[PresentationModeState["FULLSCREEN"] = 3] = "FULLSCREEN";
+})(PresentationModeState || (PresentationModeState = {}));
+const MOUSE_SCROLL_COOLDOWN_TIME = 50; // in ms
+const PAGE_SWITCH_THRESHOLD = 0.1;
+const SWIPE_MIN_DISTANCE_THRESHOLD = 50;
+const SWIPE_ANGLE_THRESHOLD = Math.PI / 6;
+export class PdfPresentationMode {
+    state = PresentationModeState.UNKNOWN;
+    pdfDocument = null;
+    currentPageNumber = 1;
+    totalPages = 0;
+    container = null;
+    canvas = null;
+    callbacks;
+    fullscreenChangeAbortController = null;
+    windowAbortController = null;
+    mouseScrollTimeStamp = 0;
+    mouseScrollDelta = 0;
+    touchSwipeState = null;
+    renderingPage = false;
+    constructor(callbacks = {}) {
+        this.callbacks = callbacks;
+    }
+    /**
+     * Set the PDF document for presentation
+     */
+    setDocument(pdfDocument) {
+        this.pdfDocument = pdfDocument;
+        this.totalPages = pdfDocument?.numPages ?? 0;
+    }
+    /**
+     * Set the current page number (used when entering presentation mode)
+     */
+    setCurrentPage(pageNumber) {
+        this.currentPageNumber = Math.max(1, Math.min(pageNumber, this.totalPages));
+    }
+    /**
+     * Check if presentation mode is active
+     */
+    get active() {
+        return (this.state === PresentationModeState.CHANGING ||
+            this.state === PresentationModeState.FULLSCREEN);
+    }
+    /**
+     * Get current state
+     */
+    get currentState() {
+        return this.state;
+    }
+    /**
+     * Request entering fullscreen presentation mode
+     */
+    async request() {
+        if (this.active || !this.pdfDocument || this.totalPages === 0) {
+            return false;
+        }
+        // Create the presentation container
+        this.createPresentationContainer();
+        if (!this.container) {
+            return false;
+        }
+        this.addFullscreenChangeListeners();
+        this.notifyStateChange(PresentationModeState.CHANGING);
+        try {
+            await this.container.requestFullscreen();
+            return true;
+        }
+        catch {
+            this.removeFullscreenChangeListeners();
+            this.notifyStateChange(PresentationModeState.NORMAL);
+            this.destroyPresentationContainer();
+            return false;
+        }
+    }
+    /**
+     * Exit presentation mode
+     */
+    async exit() {
+        if (!this.active) {
+            return;
+        }
+        if (document.fullscreenElement) {
+            await document.exitFullscreen();
+        }
+    }
+    /**
+     * Go to next page
+     */
+    nextPage() {
+        if (this.currentPageNumber >= this.totalPages) {
+            return false;
+        }
+        this.currentPageNumber++;
+        this.renderCurrentPage();
+        this.callbacks.onPageChange?.(this.currentPageNumber);
+        return true;
+    }
+    /**
+     * Go to previous page
+     */
+    previousPage() {
+        if (this.currentPageNumber <= 1) {
+            return false;
+        }
+        this.currentPageNumber--;
+        this.renderCurrentPage();
+        this.callbacks.onPageChange?.(this.currentPageNumber);
+        return true;
+    }
+    /**
+     * Go to a specific page
+     */
+    goToPage(pageNumber) {
+        if (pageNumber < 1 || pageNumber > this.totalPages) {
+            return false;
+        }
+        this.currentPageNumber = pageNumber;
+        this.renderCurrentPage();
+        this.callbacks.onPageChange?.(this.currentPageNumber);
+        return true;
+    }
+    /**
+     * Destroy and cleanup
+     */
+    destroy() {
+        this.exit();
+        this.removeWindowListeners();
+        this.removeFullscreenChangeListeners();
+        this.destroyPresentationContainer();
+    }
+    // Private methods
+    createPresentationContainer() {
+        // Create fullscreen container
+        this.container = document.createElement('div');
+        this.container.className = 'pdf-presentation-mode';
+        this.container.style.cssText = `
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-color: #000;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			z-index: 999999;
+		`;
+        // Create canvas for rendering
+        this.canvas = document.createElement('canvas');
+        this.canvas.style.cssText = `
+			max-width: 100%;
+			max-height: 100%;
+			object-fit: contain;
+		`;
+        this.container.appendChild(this.canvas);
+        document.body.appendChild(this.container);
+    }
+    destroyPresentationContainer() {
+        if (this.container) {
+            this.container.remove();
+            this.container = null;
+            this.canvas = null;
+        }
+    }
+    async renderCurrentPage() {
+        if (!this.pdfDocument || !this.canvas || !this.container || this.renderingPage) {
+            return;
+        }
+        this.renderingPage = true;
+        try {
+            const page = await this.pdfDocument.getPage(this.currentPageNumber);
+            // Calculate scale to fit the screen while maintaining aspect ratio
+            const containerWidth = window.innerWidth;
+            const containerHeight = window.innerHeight;
+            const viewport = page.getViewport({ scale: 1, rotation: 0 });
+            const pageWidth = viewport.width;
+            const pageHeight = viewport.height;
+            // Calculate scale to fit
+            const scaleX = containerWidth / pageWidth;
+            const scaleY = containerHeight / pageHeight;
+            const scale = Math.min(scaleX, scaleY);
+            const scaledViewport = page.getViewport({ scale, rotation: 0 });
+            // Set canvas size
+            this.canvas.width = scaledViewport.width;
+            this.canvas.height = scaledViewport.height;
+            const context = this.canvas.getContext('2d');
+            if (!context) {
+                return;
+            }
+            // Clear and render
+            context.fillStyle = '#fff';
+            context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+            await page.render({
+                canvasContext: context,
+                viewport: scaledViewport,
+                canvas: this.canvas
+            }).promise;
+        }
+        catch (e) {
+            console.error('Failed to render presentation page:', e);
+        }
+        finally {
+            this.renderingPage = false;
+        }
+    }
+    notifyStateChange(newState) {
+        this.state = newState;
+        this.callbacks.onStateChange?.(newState);
+    }
+    enter() {
+        this.notifyStateChange(PresentationModeState.FULLSCREEN);
+        this.addWindowListeners();
+        this.renderCurrentPage();
+        // Clear any text selection
+        document.getSelection()?.empty();
+    }
+    doExit() {
+        this.removeWindowListeners();
+        this.destroyPresentationContainer();
+        this.resetMouseScrollState();
+        this.removeFullscreenChangeListeners();
+        this.notifyStateChange(PresentationModeState.NORMAL);
+    }
+    handleMouseWheel = (evt) => {
+        if (!this.active) {
+            return;
+        }
+        evt.preventDefault();
+        const delta = this.normalizeWheelDelta(evt);
+        const currentTime = Date.now();
+        const storedTime = this.mouseScrollTimeStamp;
+        // Cooldown to prevent accidental double-switching
+        if (currentTime > storedTime && currentTime - storedTime < MOUSE_SCROLL_COOLDOWN_TIME) {
+            return;
+        }
+        // Reset if direction changed
+        if ((this.mouseScrollDelta > 0 && delta < 0) || (this.mouseScrollDelta < 0 && delta > 0)) {
+            this.resetMouseScrollState();
+        }
+        this.mouseScrollDelta += delta;
+        if (Math.abs(this.mouseScrollDelta) >= PAGE_SWITCH_THRESHOLD) {
+            const totalDelta = this.mouseScrollDelta;
+            this.resetMouseScrollState();
+            const success = totalDelta > 0 ? this.previousPage() : this.nextPage();
+            if (success) {
+                this.mouseScrollTimeStamp = currentTime;
+            }
+        }
+    };
+    normalizeWheelDelta(evt) {
+        let delta = Math.hypot(evt.deltaX, evt.deltaY);
+        const angle = Math.atan2(evt.deltaY, evt.deltaX);
+        if (-0.25 * Math.PI < angle && angle < 0.75 * Math.PI) {
+            delta = -delta;
+        }
+        if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+            delta *= 30;
+        }
+        else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+            delta *= 30 * 10;
+        }
+        return delta / 30;
+    }
+    handleMouseDown = (evt) => {
+        // Left click (0) = next page, Right click (2) = previous page
+        if (evt.button === 0) {
+            evt.preventDefault();
+            if (evt.shiftKey) {
+                this.previousPage();
+            }
+            else {
+                this.nextPage();
+            }
+        }
+        else if (evt.button === 2) {
+            evt.preventDefault();
+            this.previousPage();
+        }
+    };
+    handleKeyDown = (evt) => {
+        if (!this.active) {
+            return;
+        }
+        this.resetMouseScrollState();
+        switch (evt.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+            case ' ':
+            case 'PageDown':
+            case 'Enter':
+                evt.preventDefault();
+                this.nextPage();
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+            case 'PageUp':
+            case 'Backspace':
+                evt.preventDefault();
+                this.previousPage();
+                break;
+            case 'Home':
+                evt.preventDefault();
+                this.goToPage(1);
+                break;
+            case 'End':
+                evt.preventDefault();
+                this.goToPage(this.totalPages);
+                break;
+            case 'Escape':
+                // Escape is handled by the browser for fullscreen exit
+                break;
+        }
+    };
+    handleContextMenu = (evt) => {
+        // Prevent context menu - right-click is handled in handleMouseDown
+        evt.preventDefault();
+    };
+    handleTouchSwipe = (evt) => {
+        if (!this.active) {
+            return;
+        }
+        if (evt.touches.length > 1) {
+            this.touchSwipeState = null;
+            return;
+        }
+        switch (evt.type) {
+            case 'touchstart':
+                this.touchSwipeState = {
+                    startX: evt.touches[0].pageX,
+                    startY: evt.touches[0].pageY,
+                    endX: evt.touches[0].pageX,
+                    endY: evt.touches[0].pageY
+                };
+                break;
+            case 'touchmove':
+                if (this.touchSwipeState === null) {
+                    return;
+                }
+                this.touchSwipeState.endX = evt.touches[0].pageX;
+                this.touchSwipeState.endY = evt.touches[0].pageY;
+                evt.preventDefault();
+                break;
+            case 'touchend': {
+                if (this.touchSwipeState === null) {
+                    return;
+                }
+                const dx = this.touchSwipeState.endX - this.touchSwipeState.startX;
+                const dy = this.touchSwipeState.endY - this.touchSwipeState.startY;
+                const absAngle = Math.abs(Math.atan2(dy, dx));
+                let delta = 0;
+                if (Math.abs(dx) > SWIPE_MIN_DISTANCE_THRESHOLD &&
+                    (absAngle <= SWIPE_ANGLE_THRESHOLD || absAngle >= Math.PI - SWIPE_ANGLE_THRESHOLD)) {
+                    // Horizontal swipe
+                    delta = dx;
+                }
+                else if (Math.abs(dy) > SWIPE_MIN_DISTANCE_THRESHOLD &&
+                    Math.abs(absAngle - Math.PI / 2) <= SWIPE_ANGLE_THRESHOLD) {
+                    // Vertical swipe
+                    delta = dy;
+                }
+                if (delta > 0) {
+                    this.previousPage();
+                }
+                else if (delta < 0) {
+                    this.nextPage();
+                }
+                this.touchSwipeState = null;
+                break;
+            }
+        }
+    };
+    handleResize = () => {
+        if (this.active) {
+            this.renderCurrentPage();
+        }
+    };
+    resetMouseScrollState() {
+        this.mouseScrollTimeStamp = 0;
+        this.mouseScrollDelta = 0;
+    }
+    addWindowListeners() {
+        if (this.windowAbortController) {
+            return;
+        }
+        this.windowAbortController = new AbortController();
+        const { signal } = this.windowAbortController;
+        window.addEventListener('mousedown', this.handleMouseDown, { signal });
+        window.addEventListener('wheel', this.handleMouseWheel, { passive: false, signal });
+        window.addEventListener('keydown', this.handleKeyDown, { signal });
+        window.addEventListener('contextmenu', this.handleContextMenu, { signal });
+        window.addEventListener('touchstart', this.handleTouchSwipe, { signal });
+        window.addEventListener('touchmove', this.handleTouchSwipe, { passive: false, signal });
+        window.addEventListener('touchend', this.handleTouchSwipe, { signal });
+        window.addEventListener('resize', this.handleResize, { signal });
+    }
+    removeWindowListeners() {
+        this.windowAbortController?.abort();
+        this.windowAbortController = null;
+    }
+    addFullscreenChangeListeners() {
+        if (this.fullscreenChangeAbortController) {
+            return;
+        }
+        this.fullscreenChangeAbortController = new AbortController();
+        window.addEventListener('fullscreenchange', () => {
+            if (document.fullscreenElement) {
+                this.enter();
+            }
+            else {
+                this.doExit();
+            }
+        }, { signal: this.fullscreenChangeAbortController.signal });
+    }
+    removeFullscreenChangeListeners() {
+        this.fullscreenChangeAbortController?.abort();
+        this.fullscreenChangeAbortController = null;
+    }
+}

package/dist/pdf-viewer/context.d.ts

@@ -1,5 +1,12 @@
 /** PDF source - can be a URL string, ArrayBuffer, Uint8Array, or Blob */
 export type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
+/** Presentation mode state */
+export declare enum PresentationModeState {
+    UNKNOWN = 0,
+    NORMAL = 1,
+    CHANGING = 2,
+    FULLSCREEN = 3
+}
 export interface PdfViewerState {
     loading: boolean;
     error: string | null;
@@ -11,6 +18,7 @@ export interface PdfViewerState {
     searchCurrent: number;
     searchTotal: number;
     isSearching: boolean;
+    presentationMode: PresentationModeState;
 }
 export interface PdfViewerActions {
     zoomIn: () => void;
@@ -24,6 +32,10 @@ export interface PdfViewerActions {
     searchPrevious: () => void;
     clearSearch: () => void;
     download: (filename?: string) => Promise<void>;
+    /** Enter fullscreen presentation mode */
+    enterPresentationMode: () => Promise<boolean>;
+    /** Exit fullscreen presentation mode */
+    exitPresentationMode: () => Promise<void>;
 }
 export interface PdfViewerContext {
     state: PdfViewerState;
@@ -31,6 +43,8 @@ export interface PdfViewerContext {
     /** The PDF source - shared from PdfViewer to PdfRenderer */
     src: PdfSource;
     _registerRenderer: (renderer: PdfViewerActions) => void;
+    _onerror?: (error: string) => void;
+    _setSrcDataForDownload: (data: ArrayBuffer | null) => void;
 }
 export declare function setPdfViewerContext(ctx: PdfViewerContext): void;
 export declare function getPdfViewerContext(): PdfViewerContext;

package/dist/pdf-viewer/context.js

@@ -3,6 +3,14 @@
  */
 import { getContext, setContext } from 'svelte';
 const PDF_VIEWER_CONTEXT_KEY = Symbol('pdf-viewer');
+/** Presentation mode state */
+export var PresentationModeState;
+(function (PresentationModeState) {
+    PresentationModeState[PresentationModeState["UNKNOWN"] = 0] = "UNKNOWN";
+    PresentationModeState[PresentationModeState["NORMAL"] = 1] = "NORMAL";
+    PresentationModeState[PresentationModeState["CHANGING"] = 2] = "CHANGING";
+    PresentationModeState[PresentationModeState["FULLSCREEN"] = 3] = "FULLSCREEN";
+})(PresentationModeState || (PresentationModeState = {}));
 export function setPdfViewerContext(ctx) {
     setContext(PDF_VIEWER_CONTEXT_KEY, ctx);
 }

package/package.json

@@ -1,91 +1,89 @@
 {
-	"name": "svelte-pdf-view",
-	"version": "0.1.12",
-	"description": "A modern, modular PDF viewer component for Svelte 5. Built on PDF.js with TypeScript support",
-	"author": "Louis Li",
-	"license": "Apache-2.0",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/nullpointerexceptionkek/svelte-pdf-view.git"
-	},
-	"bugs": {
-		"url": "https://github.com/nullpointerexceptionkek/svelte-pdf-view/issues"
-	},
-	"homepage": "https://github.com/nullpointerexceptionkek/svelte-pdf-view#readme",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*",
-		"LICENSE.md",
-		"README.md"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"@lucide/svelte": ">=0.500.0",
-		"pdfjs-dist": "^5.0.0",
-		"svelte": "^5.0.0"
-	},
-	"peerDependenciesMeta": {
-		"@lucide/svelte": {
-			"optional": true
-		}
-	},
-	"devDependencies": {
-		"@eslint/compat": "^1.4.0",
-		"@eslint/js": "^9.39.1",
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.48.5",
-		"@sveltejs/package": "^2.5.6",
-		"@sveltejs/vite-plugin-svelte": "^6.2.1",
-		"@types/node": "^22",
-		"eslint": "^9.39.1",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.13.0",
-		"globals": "^16.5.0",
-		"pdfjs-dist": "^5.4.394",
-		"prettier": "^3.6.2",
-		"prettier-plugin-svelte": "^3.4.0",
-		"publint": "^0.3.15",
-		"svelte": "^5.43.8",
-		"svelte-check": "^4.3.4",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.47.0",
-		"vite": "^7.2.2"
-	},
-	"keywords": [
-		"svelte",
-		"svelte5",
-		"pdf",
-		"pdf-viewer",
-		"pdfjs",
-		"pdf.js",
-		"document-viewer",
-		"svelte-component"
-	],
-	"dependencies": {
-		"esm-env": "^1.2.2"
-	}
-}
+  "name": "svelte-pdf-view",
+  "version": "0.2.0",
+  "description": "A modern, modular PDF viewer component for Svelte 5. Built on PDF.js with TypeScript support",
+  "author": "Louis Li",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nullpointerexceptionkek/svelte-pdf-view.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nullpointerexceptionkek/svelte-pdf-view/issues"
+  },
+  "homepage": "https://github.com/nullpointerexceptionkek/svelte-pdf-view#readme",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "LICENSE.md",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@lucide/svelte": ">=0.500.0",
+    "pdfjs-dist": "^5.0.0",
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@lucide/svelte": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.39.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@types/node": "^22",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.13.0",
+    "globals": "^16.5.0",
+    "pdfjs-dist": "^5.4.394",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "publint": "^0.3.15",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.47.0",
+    "vite": "^7.2.2"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "pdf",
+    "pdf-viewer",
+    "pdfjs",
+    "pdf.js",
+    "document-viewer",
+    "svelte-component"
+  ],
+  "dependencies": {
+    "esm-env": "^1.2.2"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  }
+}