@makolabs/ripple 3.4.0 → 3.5.0

package/dist/elements/pdf-viewer/PdfViewer.svelte

@@ -0,0 +1,427 @@
+<script lang="ts">
+	import { onMount, onDestroy, tick } from 'svelte';
+	import { browser } from '$app/environment';
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import Spinner from '../spinner/Spinner.svelte';
+	import Button from '../../button/Button.svelte';
+	import { Color, Size } from '../../variants.js';
+	import type { PDFDocumentLoadingTask, PDFDocumentProxy, RenderTask } from 'pdfjs-dist';
+	import type { PdfViewerProps } from './pdf-viewer-types.js';
+
+	type PdfJsModule = typeof import('pdfjs-dist');
+
+	let {
+		url,
+		initialScale = 1.5,
+		minScale = 0.5,
+		maxScale = 3,
+		scaleStep = 0.25,
+		showToolbar = true,
+		loadingLabel = 'Loading PDF...',
+		errorTitle = 'Error loading PDF',
+		errorActionLabel = 'Open in new tab',
+		class: className = '',
+		testId
+	}: PdfViewerProps = $props();
+
+	const clampScale = (value: number) => Math.min(Math.max(value, minScale), maxScale);
+
+	let containerEl: HTMLDivElement;
+	let canvasElements: HTMLCanvasElement[] = $state([]);
+	let pdfDoc: PDFDocumentProxy | null = $state(null);
+	let pageCount = $state(0);
+	let scale = $state(clampScale(initialScale));
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let pdfjsLib: PdfJsModule | null = $state(null);
+	let currentLoadingTask: PDFDocumentLoadingTask | null = null;
+	let previousUrl: string | null = null;
+	let loadToken = 0;
+	let renderEpoch = 0;
+	let renderTasks: (RenderTask | null)[] = [];
+
+	const wrapperTestId = $derived(buildTestId('pdf-viewer', undefined, testId));
+
+	onMount(async () => {
+		if (!browser) return;
+
+		try {
+			const lib = await import('pdfjs-dist');
+			const workerModule = await import('pdfjs-dist/build/pdf.worker.min.mjs?url');
+			lib.GlobalWorkerOptions.workerSrc = workerModule.default;
+			// Assign to reactive state only after workerSrc is configured,
+			// so the $effect that calls loadPdf() sees a fully-ready library
+			pdfjsLib = lib;
+		} catch (err) {
+			console.error('Error loading PDF.js:', err);
+			error = 'Failed to load PDF library';
+			loading = false;
+		}
+	});
+
+	onDestroy(() => {
+		cleanupPdf();
+	});
+
+	$effect(() => {
+		if (!pdfjsLib || !browser) return;
+
+		const isFirstLoad = previousUrl === null;
+		const urlChanged = !isFirstLoad && previousUrl !== url;
+
+		if (!isFirstLoad && !urlChanged) {
+			return;
+		}
+
+		if (urlChanged) {
+			cleanupPdf();
+			pageCount = 0;
+			error = null;
+		}
+
+		previousUrl = url;
+		loadPdf();
+	});
+
+	$effect(() => {
+		if (pdfDoc && !loading && scale) {
+			// Wait for canvas elements to mount after loading completes
+			tick().then(() => renderAllPages());
+		}
+	});
+
+	function cleanupPdf() {
+		loadToken++;
+		renderEpoch++;
+
+		for (const task of renderTasks) {
+			if (task) task.cancel();
+		}
+		renderTasks = [];
+
+		if (currentLoadingTask) {
+			currentLoadingTask.destroy();
+			currentLoadingTask = null;
+		}
+
+		if (pdfDoc) {
+			pdfDoc.destroy();
+			pdfDoc = null;
+		}
+
+		canvasElements = [];
+	}
+
+	async function loadPdf() {
+		if (!pdfjsLib) return;
+
+		const token = ++loadToken;
+
+		loading = true;
+		error = null;
+
+		const loadingTask = (currentLoadingTask = pdfjsLib.getDocument(url));
+
+		try {
+			const doc = await loadingTask.promise;
+
+			if (token !== loadToken) return;
+
+			currentLoadingTask = null;
+			pdfDoc = doc;
+			pageCount = pdfDoc.numPages;
+
+			canvasElements = new Array(pageCount).fill(null);
+
+			loading = false;
+		} catch (err) {
+			if (token !== loadToken) return;
+
+			console.error('Error loading PDF:', err);
+			error = err instanceof Error ? err.message : 'Failed to load PDF';
+			loading = false;
+			currentLoadingTask = null;
+		}
+	}
+
+	async function renderAllPages() {
+		if (!pdfDoc) return;
+
+		const epoch = ++renderEpoch;
+		const renderScale = scale;
+
+		for (const task of renderTasks) {
+			if (task) task.cancel();
+		}
+		renderTasks = [];
+
+		for (let i = 1; i <= pageCount; i++) {
+			void renderPage(i, epoch, renderScale);
+		}
+	}
+
+	async function renderPage(num: number, epoch: number, renderScale: number) {
+		const doc = pdfDoc;
+		if (!doc) return;
+
+		const canvas = canvasElements[num - 1];
+		if (!canvas) return;
+
+		try {
+			const page = await doc.getPage(num);
+			// Bail if a newer pass started, the doc was swapped, or the canvas was remounted
+			if (epoch !== renderEpoch || doc !== pdfDoc || canvas !== canvasElements[num - 1]) return;
+
+			const viewport = page.getViewport({ scale: renderScale });
+
+			const context = canvas.getContext('2d');
+			if (!context) {
+				throw new Error('Could not get canvas context');
+			}
+
+			// Account for high-DPI/Retina displays to prevent fuzzy rendering
+			const pixelRatio = window.devicePixelRatio || 1;
+
+			canvas.height = viewport.height * pixelRatio;
+			canvas.width = viewport.width * pixelRatio;
+
+			canvas.style.width = `${viewport.width}px`;
+			canvas.style.height = `${viewport.height}px`;
+
+			context.scale(pixelRatio, pixelRatio);
+
+			const renderTask = page.render({
+				canvas,
+				canvasContext: context,
+				viewport
+			});
+			if (epoch === renderEpoch) renderTasks[num - 1] = renderTask;
+
+			await renderTask.promise;
+			if (epoch === renderEpoch) renderTasks[num - 1] = null;
+		} catch (err) {
+			if (err instanceof Error && err.name === 'RenderingCancelledException') {
+				return;
+			}
+			console.error('Error rendering page:', err);
+		}
+	}
+
+	function handleZoomIn() {
+		scale = Math.min(scale + scaleStep, maxScale);
+	}
+
+	function handleZoomOut() {
+		scale = Math.max(scale - scaleStep, minScale);
+	}
+
+	async function handleFitToWidth() {
+		if (!pdfDoc || !containerEl) return;
+
+		const page = await pdfDoc.getPage(1);
+		const viewport = page.getViewport({ scale: 1 });
+		const containerWidth = containerEl.clientWidth || viewport.width;
+
+		const computed = (containerWidth - 48) / viewport.width;
+		scale = Math.min(Math.max(computed, minScale), maxScale);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (loading) return;
+
+		switch (event.key) {
+			case '+':
+			case '=':
+				event.preventDefault();
+				handleZoomIn();
+				break;
+			case '-':
+				event.preventDefault();
+				handleZoomOut();
+				break;
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	class={cn(
+		'focus-visible:ring-primary-400 flex h-full flex-col focus-visible:ring-2 focus-visible:outline-none',
+		className
+	)}
+	onkeydown={handleKeydown}
+	tabindex="0"
+	role="region"
+	aria-label="PDF viewer"
+	data-testid={wrapperTestId}
+>
+	{#if showToolbar}
+		<div
+			class="border-default-200 bg-default-50 flex items-center justify-between border-b px-4 py-2"
+			data-testid={buildTestId('pdf-viewer', 'toolbar', testId)}
+		>
+			<div class="flex items-center gap-2">
+				<span class="text-default-700 text-sm" aria-live="polite">
+					{#if loading}
+						&nbsp;
+					{:else}
+						{pageCount}
+						{pageCount === 1 ? 'page' : 'pages'}
+					{/if}
+				</span>
+			</div>
+
+			<div class="flex items-center gap-1">
+				<button
+					type="button"
+					onclick={handleZoomOut}
+					disabled={loading || scale <= minScale}
+					class="text-default-700 hover:bg-default-100 focus-visible:ring-primary-400 rounded-md p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+					aria-label="Zoom out"
+					title="Zoom out"
+					data-testid={buildTestId('pdf-viewer', 'zoom-out', testId)}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<circle cx="11" cy="11" r="8" />
+						<line x1="21" y1="21" x2="16.65" y2="16.65" />
+						<line x1="8" y1="11" x2="14" y2="11" />
+					</svg>
+				</button>
+
+				<span
+					class="text-default-700 min-w-[3.5rem] text-center text-sm tabular-nums"
+					aria-live="polite"
+					data-testid={buildTestId('pdf-viewer', 'scale', testId)}
+				>
+					{Math.round(scale * 100)}%
+				</span>
+
+				<button
+					type="button"
+					onclick={handleZoomIn}
+					disabled={loading || scale >= maxScale}
+					class="text-default-700 hover:bg-default-100 focus-visible:ring-primary-400 rounded-md p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+					aria-label="Zoom in"
+					title="Zoom in"
+					data-testid={buildTestId('pdf-viewer', 'zoom-in', testId)}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<circle cx="11" cy="11" r="8" />
+						<line x1="21" y1="21" x2="16.65" y2="16.65" />
+						<line x1="11" y1="8" x2="11" y2="14" />
+						<line x1="8" y1="11" x2="14" y2="11" />
+					</svg>
+				</button>
+
+				<button
+					type="button"
+					onclick={handleFitToWidth}
+					disabled={loading}
+					class="text-default-700 hover:bg-default-100 focus-visible:ring-primary-400 rounded-md p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+					aria-label="Fit to width"
+					title="Fit to width"
+					data-testid={buildTestId('pdf-viewer', 'fit-to-width', testId)}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<polyline points="15 3 21 3 21 9" />
+						<polyline points="9 21 3 21 3 15" />
+						<line x1="21" y1="3" x2="14" y2="10" />
+						<line x1="3" y1="21" x2="10" y2="14" />
+					</svg>
+				</button>
+			</div>
+		</div>
+	{/if}
+
+	<div
+		bind:this={containerEl}
+		class="bg-default-100 relative flex-1 overflow-auto p-4"
+		data-testid={buildTestId('pdf-viewer', 'canvas-area', testId)}
+	>
+		{#if loading}
+			<div class="absolute inset-0 flex items-center justify-center">
+				<Spinner size={Size.LG} color={Color.PRIMARY} label={loadingLabel} />
+			</div>
+		{:else if error}
+			<div class="absolute inset-0 flex items-center justify-center">
+				<div
+					class="ring-default-200 max-w-md rounded-xl bg-white p-6 text-center shadow-sm ring-1"
+					data-testid={buildTestId('pdf-viewer', 'error', testId)}
+				>
+					<div
+						class="bg-danger-50 text-danger-600 mx-auto mb-3 flex size-10 items-center justify-center rounded-full"
+						aria-hidden="true"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<circle cx="12" cy="12" r="10" />
+							<line x1="12" y1="8" x2="12" y2="12" />
+							<line x1="12" y1="16" x2="12.01" y2="16" />
+						</svg>
+					</div>
+					<p class="text-default-900 mb-1 text-base font-semibold">{errorTitle}</p>
+					<p class="text-default-600 mb-4 text-sm">{error}</p>
+					<Button
+						color={Color.PRIMARY}
+						size={Size.SM}
+						href={url}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						{errorActionLabel}
+					</Button>
+				</div>
+			</div>
+		{:else}
+			<div class="flex flex-col items-center gap-4">
+				{#each { length: pageCount } as _, i (i)}
+					<canvas
+						bind:this={canvasElements[i]}
+						class="ring-default-200 block rounded-sm bg-white shadow-sm ring-1"
+						data-testid={buildTestId('pdf-viewer', 'page', testId, i + 1)}
+					></canvas>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/elements/pdf-viewer/PdfViewer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PdfViewerProps } from './pdf-viewer-types.js';
+declare const PdfViewer: import("svelte").Component<PdfViewerProps, {}, "">;
+type PdfViewer = ReturnType<typeof PdfViewer>;
+export default PdfViewer;

package/dist/elements/pdf-viewer/pdf-viewer-types.d.ts

@@ -0,0 +1,38 @@
+import type { ClassValue } from 'tailwind-variants';
+/**
+ * Props for `<PdfViewer>` — a scrollable, zoomable canvas-based PDF
+ * viewer powered by `pdfjs-dist` (loaded dynamically on the client).
+ *
+ * The component renders every page of the PDF as a stacked column of
+ * canvases, with a toolbar for zoom in / zoom out / fit-to-width. PDF.js
+ * is imported lazily inside `onMount`, so the viewer is SSR-safe.
+ *
+ * **Peer dependency:** install `pdfjs-dist` in your application.
+ *
+ * @example
+ * ```svelte
+ * <PdfViewer url="/files/invoice.pdf" class="h-[80vh]" />
+ * ```
+ */
+export type PdfViewerProps = {
+    /** URL of the PDF document. Changing the URL reloads the viewer. */
+    url: string;
+    /** Initial zoom scale. @default 1.5 */
+    initialScale?: number;
+    /** Minimum allowed zoom scale. @default 0.5 */
+    minScale?: number;
+    /** Maximum allowed zoom scale. @default 3 */
+    maxScale?: number;
+    /** Step used by the zoom-in / zoom-out buttons. @default 0.25 */
+    scaleStep?: number;
+    /** Show the zoom / page-count toolbar. @default true */
+    showToolbar?: boolean;
+    /** Visible label inside the loading spinner. @default 'Loading PDF...' */
+    loadingLabel?: string;
+    /** Heading shown when the PDF fails to load. @default 'Error loading PDF' */
+    errorTitle?: string;
+    /** Label of the fallback "open in new tab" link in the error state. @default 'Open in new tab' */
+    errorActionLabel?: string;
+    class?: ClassValue;
+    testId?: string;
+};

package/dist/elements/pdf-viewer/pdf-viewer-types.js

@@ -0,0 +1 @@
+export {};