svelte-pdf-view 0.1.0

package/dist/PdfToolbar.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+	import {
+		ZoomIn,
+		ZoomOut,
+		RotateCcw,
+		RotateCw,
+		Search,
+		ChevronLeft,
+		ChevronRight
+	} from '@lucide/svelte';
+	import { getPdfViewerContext } from './pdf-viewer/context.js';
+
+	const { state: viewerState, actions } = getPdfViewerContext();
+
+	let searchInput = $state('');
+
+	function handlePageChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const pageNum = parseInt(input.value, 10);
+		if (pageNum >= 1 && pageNum <= viewerState.totalPages) {
+			actions.goToPage(pageNum);
+		}
+	}
+
+	async function handleSearch() {
+		if (!searchInput.trim()) {
+			actions.clearSearch();
+			return;
+		}
+		await actions.search(searchInput);
+	}
+
+	function handleSearchKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			if (e.shiftKey) {
+				actions.searchPrevious();
+			} else if (viewerState.searchTotal > 0) {
+				actions.searchNext();
+			} else {
+				handleSearch();
+			}
+		}
+	}
+</script>
+
+<div class="pdf-toolbar">
+	<!-- Page navigation -->
+	<div class="pdf-toolbar-group">
+		<input
+			type="number"
+			value={viewerState.currentPage}
+			min="1"
+			max={viewerState.totalPages}
+			onchange={handlePageChange}
+			aria-label="Current page"
+		/>
+		<span class="page-info">/ {viewerState.totalPages}</span>
+	</div>
+
+	<!-- Zoom controls -->
+	<div class="pdf-toolbar-group">
+		<button onclick={() => actions.zoomOut()} aria-label="Zoom out" title="Zoom Out">
+			<ZoomOut size={18} />
+		</button>
+		<span class="zoom-level">{Math.round(viewerState.scale * 100)}%</span>
+		<button onclick={() => actions.zoomIn()} aria-label="Zoom in" title="Zoom In">
+			<ZoomIn size={18} />
+		</button>
+	</div>
+
+	<!-- Rotation controls -->
+	<div class="pdf-toolbar-group">
+		<button
+			onclick={() => actions.rotateCounterClockwise()}
+			aria-label="Rotate counter-clockwise"
+			title="Rotate Left"
+		>
+			<RotateCcw size={18} />
+		</button>
+		<button
+			onclick={() => actions.rotateClockwise()}
+			aria-label="Rotate clockwise"
+			title="Rotate Right"
+		>
+			<RotateCw size={18} />
+		</button>
+	</div>
+
+	<!-- Search -->
+	<div class="pdf-toolbar-group">
+		<input
+			type="text"
+			class="search-input"
+			placeholder="Search..."
+			bind:value={searchInput}
+			onkeydown={handleSearchKeydown}
+			aria-label="Search in document"
+		/>
+		<button
+			onclick={handleSearch}
+			disabled={viewerState.isSearching}
+			aria-label="Search"
+			title="Search"
+		>
+			<Search size={18} />
+		</button>
+		{#if viewerState.searchTotal > 0}
+			<button onclick={() => actions.searchPrevious()} aria-label="Previous match" title="Previous">
+				<ChevronLeft size={18} />
+			</button>
+			<button onclick={() => actions.searchNext()} aria-label="Next match" title="Next">
+				<ChevronRight size={18} />
+			</button>
+			<span class="match-info">{viewerState.searchCurrent}/{viewerState.searchTotal}</span>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Toolbar */
+	.pdf-toolbar {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+		padding: 0.625rem 1rem;
+		background-color: #ffffff;
+		color: #333;
+		flex-shrink: 0;
+		flex-wrap: wrap;
+		border-bottom: 1px solid #e0e0e0;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+	}
+
+	.pdf-toolbar-group {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.pdf-toolbar button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 32px;
+		padding: 0;
+		border: 1px solid #e0e0e0;
+		background-color: #fafafa;
+		color: #555;
+		border-radius: 6px;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.pdf-toolbar button:hover:not(:disabled) {
+		background-color: #f0f0f0;
+		border-color: #d0d0d0;
+		color: #333;
+	}
+
+	.pdf-toolbar button:active:not(:disabled) {
+		background-color: #e8e8e8;
+	}
+
+	.pdf-toolbar button:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.pdf-toolbar input[type='text'],
+	.pdf-toolbar input[type='number'] {
+		height: 28px;
+		padding: 0 0.5rem;
+		border: 1px solid #e0e0e0;
+		border-radius: 6px;
+		background-color: #fff;
+		color: #333;
+		font-size: 0.8rem;
+		outline: none;
+		transition:
+			border-color 0.15s,
+			box-shadow 0.15s;
+	}
+
+	.pdf-toolbar input[type='text']:focus,
+	.pdf-toolbar input[type='number']:focus {
+		border-color: #0066cc;
+		box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
+	}
+
+	.pdf-toolbar input[type='number'] {
+		width: 40px;
+		text-align: center;
+		appearance: textfield;
+		-moz-appearance: textfield;
+	}
+
+	.pdf-toolbar input[type='number']::-webkit-outer-spin-button,
+	.pdf-toolbar input[type='number']::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	.pdf-toolbar .search-input {
+		width: 160px;
+	}
+
+	.pdf-toolbar .zoom-level {
+		min-width: 48px;
+		text-align: center;
+		font-size: 0.8rem;
+		color: #666;
+		font-weight: 500;
+	}
+
+	.pdf-toolbar .page-info {
+		font-size: 0.8rem;
+		color: #888;
+		margin-left: 0.25rem;
+	}
+
+	.pdf-toolbar .match-info {
+		font-size: 0.75rem;
+		color: #888;
+		min-width: 60px;
+		margin-left: 0.25rem;
+	}
+</style>

package/dist/PdfToolbar.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PdfToolbar: import("svelte").Component<Record<string, never>, {}, "">;
+type PdfToolbar = ReturnType<typeof PdfToolbar>;
+export default PdfToolbar;

package/dist/PdfViewer.svelte

@@ -0,0 +1,118 @@
+<script lang="ts" module>
+	// Export compound components
+	export { default as Toolbar } from './PdfToolbar.svelte';
+	export { default as Renderer } from './PdfRenderer.svelte';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		setPdfViewerContext,
+		type PdfViewerState,
+		type PdfViewerActions
+	} from './pdf-viewer/context.js';
+	import type { PdfSource } from './PdfRenderer.svelte';
+
+	interface Props {
+		/** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
+		src: PdfSource;
+		/** Initial scale (default: 1.0) */
+		scale?: number;
+		/** CSS class for the container */
+		class?: string;
+		/** Children (toolbar and renderer) */
+		children?: Snippet;
+	}
+
+	let { src, scale: initialScale = 1.0, class: className = '', children }: Props = $props();
+
+	// Reactive state that will be shared via context
+	let state = $state<PdfViewerState>({
+		loading: true,
+		error: null,
+		totalPages: 0,
+		currentPage: 1,
+		scale: initialScale,
+		rotation: 0,
+		searchQuery: '',
+		searchCurrent: 0,
+		searchTotal: 0,
+		isSearching: false
+	});
+
+	// Renderer actions - will be populated when renderer mounts
+	let rendererActions: PdfViewerActions | null = null;
+
+	// Actions that proxy to the renderer
+	const actions: PdfViewerActions = {
+		zoomIn: () => rendererActions?.zoomIn(),
+		zoomOut: () => rendererActions?.zoomOut(),
+		setScale: (scale: number) => rendererActions?.setScale(scale),
+		rotateClockwise: () => rendererActions?.rotateClockwise(),
+		rotateCounterClockwise: () => rendererActions?.rotateCounterClockwise(),
+		goToPage: (page: number) => rendererActions?.goToPage(page),
+		search: async (query: string) => {
+			if (rendererActions) {
+				await rendererActions.search(query);
+			}
+		},
+		searchNext: () => rendererActions?.searchNext(),
+		searchPrevious: () => rendererActions?.searchPrevious(),
+		clearSearch: () => rendererActions?.clearSearch()
+	};
+
+	// Set up context
+	setPdfViewerContext({
+		state,
+		actions,
+		_registerRenderer: (renderer: PdfViewerActions) => {
+			rendererActions = renderer;
+		}
+	});
+</script>
+
+<div class="pdf-viewer-container {className}">
+	{#if state.loading}
+		<div class="pdf-loading">Loading PDF...</div>
+	{:else if state.error}
+		<div class="pdf-error">Error: {state.error}</div>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{:else}
+		<!-- Default layout if no children provided -->
+		{#await import('./PdfToolbar.svelte') then { default: Toolbar }}
+			<Toolbar />
+		{/await}
+		{#await import('./PdfRenderer.svelte') then { default: Renderer }}
+			<Renderer {src} />
+		{/await}
+	{/if}
+</div>
+
+<style>
+	.pdf-viewer-container {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+		background-color: #f0f0f0;
+		overflow: hidden;
+	}
+
+	.pdf-loading,
+	.pdf-error {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		color: #666;
+		font-size: 1rem;
+		z-index: 10;
+	}
+
+	.pdf-error {
+		color: #dc3545;
+	}
+</style>

package/dist/PdfViewer.svelte.d.ts

@@ -0,0 +1,17 @@
+export { default as Toolbar } from './PdfToolbar.svelte';
+export { default as Renderer } from './PdfRenderer.svelte';
+import type { Snippet } from 'svelte';
+import type { PdfSource } from './PdfRenderer.svelte';
+interface Props {
+    /** PDF source - URL string, ArrayBuffer, Uint8Array, or Blob */
+    src: PdfSource;
+    /** Initial scale (default: 1.0) */
+    scale?: number;
+    /** CSS class for the container */
+    class?: string;
+    /** Children (toolbar and renderer) */
+    children?: Snippet;
+}
+declare const PdfViewer: import("svelte").Component<Props, {}, "">;
+type PdfViewer = ReturnType<typeof PdfViewer>;
+export default PdfViewer;

package/dist/PdfViewerInner.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+
+	const browser = typeof window !== 'undefined';
+	import {
+		ZoomIn,
+		ZoomOut,
+		RotateCcw,
+		RotateCw,
+		Search,
+		ChevronLeft,
+		ChevronRight
+	} from '@lucide/svelte';
+
+	interface Props {
+		/** URL or path to the PDF file */
+		src: string;
+		/** Initial scale (default: 1.0) */
+		scale?: number;
+		/** CSS class for the container */
+		class?: string;
+	}
+
+	let { src, scale: initialScale = 1.0, class: className = '' }: Props = $props();
+
+	let scrollContainerEl: HTMLDivElement | undefined = $state();
+	let mounted = $state(false);
+
+	// Viewer state
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let currentScale = $state(initialScale);
+	let currentRotation = $state(0);
+	let currentPage = $state(1);
+	let totalPages = $state(0);
+
+	// Search state
+	let searchQuery = $state('');
+	let searchCurrent = $state(0);
+	let searchTotal = $state(0);
+	let isSearching = $state(false);
+
+	// Core instances (loaded dynamically)
+	let viewer: import('./pdf-viewer/PDFViewerCore.js').PDFViewerCore | null = null;
+	let findController: import('./pdf-viewer/FindController.js').FindController | null = null;
+	let pdfjsLib: typeof import('pdfjs-dist') | null = null;
+
+	async function initPdfJs() {
+		if (!browser) return null;
+
+		pdfjsLib = await import('pdfjs-dist');
+		const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.min.mjs?url');
+		pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker.default;
+
+		return pdfjsLib;
+	}
+
+	async function loadPdf(url: string) {
+		if (!browser || !scrollContainerEl) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			// Initialize PDF.js
+			const pdfjs = await initPdfJs();
+			if (!pdfjs) return;
+
+			// Initialize viewer
+			const { PDFViewerCore } = await import('./pdf-viewer/PDFViewerCore.js');
+			const { FindController } = await import('./pdf-viewer/FindController.js');
+			const { EventBus } = await import('./pdf-viewer/EventBus.js');
+
+			// Cleanup existing viewer
+			if (viewer) {
+				viewer.destroy();
+			}
+
+			const eventBus = new EventBus();
+
+			const newViewer = new PDFViewerCore({
+				container: scrollContainerEl,
+				eventBus,
+				initialScale: currentScale,
+				initialRotation: currentRotation
+			});
+
+			findController = new FindController(newViewer, eventBus);
+
+			// Setup event listeners
+			eventBus.on('scalechanged', (data: Record<string, unknown>) => {
+				currentScale = data.scale as number;
+			});
+
+			eventBus.on('rotationchanged', (data: Record<string, unknown>) => {
+				currentRotation = data.rotation as number;
+			});
+
+			eventBus.on('updateviewarea', (data: Record<string, unknown>) => {
+				const location = data.location as { pageNumber: number };
+				currentPage = location.pageNumber;
+			});
+
+			eventBus.on('pagesloaded', (data: Record<string, unknown>) => {
+				totalPages = data.pagesCount as number;
+			});
+
+			eventBus.on('updatefindmatchescount', (data: Record<string, unknown>) => {
+				const matchesCount = data.matchesCount as { current: number; total: number };
+				searchCurrent = matchesCount.current;
+				searchTotal = matchesCount.total;
+			});
+
+			// Load document
+			const loadingTask = pdfjs.getDocument(url);
+			const pdfDocument = await loadingTask.promise;
+
+			await newViewer.setDocument(pdfDocument);
+
+			// Set document on find controller for text extraction
+			findController.setDocument(pdfDocument);
+
+			viewer = newViewer;
+
+			loading = false;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load PDF';
+			loading = false;
+		}
+	}
+
+	function handleZoomIn() {
+		if (viewer) {
+			viewer.zoomIn();
+		}
+	}
+
+	function handleZoomOut() {
+		if (viewer) {
+			viewer.zoomOut();
+		}
+	}
+
+	function handleRotateRight() {
+		if (viewer) {
+			viewer.rotateClockwise();
+		}
+	}
+
+	function handleRotateLeft() {
+		if (viewer) {
+			viewer.rotateCounterClockwise();
+		}
+	}
+
+	function handlePageChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const pageNum = parseInt(input.value, 10);
+		if (viewer && pageNum >= 1 && pageNum <= totalPages) {
+			viewer.scrollToPage(pageNum);
+		}
+	}
+
+	async function handleSearch() {
+		if (!findController || !searchQuery.trim()) {
+			searchCurrent = 0;
+			searchTotal = 0;
+			return;
+		}
+
+		isSearching = true;
+		await findController.find({
+			query: searchQuery,
+			highlightAll: true,
+			caseSensitive: false
+		});
+		isSearching = false;
+	}
+
+	function handleSearchNext() {
+		if (findController) {
+			findController.findNext();
+		}
+	}
+
+	function handleSearchPrev() {
+		if (findController) {
+			findController.findPrevious();
+		}
+	}
+
+	function handleSearchKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			if (e.shiftKey) {
+				handleSearchPrev();
+			} else if (searchTotal > 0) {
+				handleSearchNext();
+			} else {
+				handleSearch();
+			}
+		}
+	}
+
+	// Load PDF when src changes
+	$effect(() => {
+		if (browser && src && scrollContainerEl && mounted) {
+			loadPdf(src);
+		}
+	});
+
+	onMount(() => {
+		mounted = true;
+	});
+
+	onDestroy(() => {
+		if (viewer) {
+			viewer.destroy();
+			viewer = null;
+		}
+		findController = null;
+	});
+</script>
+
+<div class="pdf-viewer-container {className}">
+	{#if loading}
+		<div class="pdf-loading">
+			<span>Loading PDF...</span>
+		</div>
+	{:else if error}
+		<div class="pdf-error">
+			<span>Error: {error}</span>
+		</div>
+	{:else}
+		<!-- Toolbar -->
+		<div class="pdf-toolbar">
+			<!-- Page navigation -->
+			<div class="pdf-toolbar-group">
+				<input
+					type="number"
+					value={currentPage}
+					min="1"
+					max={totalPages}
+					onchange={handlePageChange}
+					aria-label="Current page"
+				/>
+				<span class="page-info">/ {totalPages}</span>
+			</div>
+
+			<!-- Zoom controls -->
+			<div class="pdf-toolbar-group">
+				<button onclick={handleZoomOut} aria-label="Zoom out" title="Zoom Out"
+					><ZoomOut size={18} /></button
+				>
+				<span class="zoom-level">{Math.round(currentScale * 100)}%</span>
+				<button onclick={handleZoomIn} aria-label="Zoom in" title="Zoom In"
+					><ZoomIn size={18} /></button
+				>
+			</div>
+
+			<!-- Rotation controls -->
+			<div class="pdf-toolbar-group">
+				<button
+					onclick={handleRotateLeft}
+					aria-label="Rotate counter-clockwise"
+					title="Rotate Left"
+				>
+					<RotateCcw size={18} />
+				</button>
+				<button onclick={handleRotateRight} aria-label="Rotate clockwise" title="Rotate Right">
+					<RotateCw size={18} />
+				</button>
+			</div>
+
+			<!-- Search -->
+			<div class="pdf-toolbar-group">
+				<input
+					type="text"
+					class="search-input"
+					placeholder="Search..."
+					bind:value={searchQuery}
+					onkeydown={handleSearchKeydown}
+					aria-label="Search in document"
+				/>
+				<button onclick={handleSearch} disabled={isSearching} aria-label="Search" title="Search">
+					<Search size={18} />
+				</button>
+				{#if searchTotal > 0}
+					<button onclick={handleSearchPrev} aria-label="Previous match" title="Previous">
+						<ChevronLeft size={18} />
+					</button>
+					<button onclick={handleSearchNext} aria-label="Next match" title="Next">
+						<ChevronRight size={18} />
+					</button>
+					<span class="match-info">{searchCurrent}/{searchTotal}</span>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<!-- PDF scroll container -->
+	<div class="pdf-scroll-container" bind:this={scrollContainerEl}></div>
+</div>

package/dist/PdfViewerInner.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    /** URL or path to the PDF file */
+    src: string;
+    /** Initial scale (default: 1.0) */
+    scale?: number;
+    /** CSS class for the container */
+    class?: string;
+}
+declare const PdfViewerInner: import("svelte").Component<Props, {}, "">;
+type PdfViewerInner = ReturnType<typeof PdfViewerInner>;
+export default PdfViewerInner;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,4 @@
+// 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';

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

@@ -0,0 +1,12 @@
+/**
+ * Simple event bus for PDF viewer component communication.
+ * This is a derivative work based on PDF.js event_utils.js
+ */
+export declare class EventBus {
+    private listeners;
+    on(eventName: string, listener: EventListener): void;
+    off(eventName: string, listener: EventListener): void;
+    dispatch(eventName: string, data?: Record<string, unknown>): void;
+    destroy(): void;
+}
+export type EventListener = (data: Record<string, unknown>) => void;