@makolabs/ripple 3.8.1 → 3.9.2

package/dist/elements/image-viewer/ImageViewer.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { isSafeHttpUrl } from '../../helper/is-safe-http-url.js';
+	import { MAX_IMAGE_PIXELS } from '../../helper/resource-limits.js';
+	import Spinner from '../spinner/Spinner.svelte';
+	import ViewerToolbar from '../viewer-shared/ViewerToolbar.svelte';
+	import UnsupportedPreview from '../viewer-shared/UnsupportedPreview.svelte';
+	import { Color, Size } from '../../variants.js';
+	import type { ImageViewerProps } from './image-viewer-types.js';
+
+	let {
+		url,
+		initialScale = 1,
+		minScale = 0.25,
+		maxScale = 5,
+		scaleStep = 0.25,
+		maxImagePixels = MAX_IMAGE_PIXELS,
+		showToolbar = true,
+		loadingLabel = 'Loading image...',
+		errorTitle = 'Unable to display image',
+		errorActionLabel = 'Open in new tab',
+		alt = '',
+		class: className = '',
+		testId
+	}: ImageViewerProps = $props();
+
+	const urlAllowed = $derived(isSafeHttpUrl(url, { allowBlob: true, allowPrivateHosts: true }));
+
+	const clampScale = (value: number) => Math.min(Math.max(value, minScale), maxScale);
+
+	let containerEl: HTMLDivElement;
+	let status = $state<'loading' | 'ready' | 'error'>('loading');
+	let naturalWidth = $state(0);
+	let scale = $state(clampScale(initialScale));
+
+	// Reset load state whenever the source *changes* (not on first mount, which
+	// would clobber the load/error handler). Without this, a viewer stuck on
+	// `error` never re-attempts (the <img> isn't rendered, so no onload fires),
+	// and a successful swap would briefly size the new image with the old
+	// naturalWidth. Scale (user zoom) is intentionally preserved across swaps.
+	let previousImgUrl: string | undefined;
+	$effect(() => {
+		const current = url;
+		if (previousImgUrl !== undefined && previousImgUrl !== current) {
+			status = 'loading';
+			naturalWidth = 0;
+		}
+		previousImgUrl = current;
+	});
+
+	function handleLoad(event: Event) {
+		const img = event.currentTarget as HTMLImageElement;
+		const pixels = img.naturalWidth * img.naturalHeight;
+		if (pixels > maxImagePixels) {
+			status = 'error';
+			return;
+		}
+		naturalWidth = img.naturalWidth;
+		status = 'ready';
+	}
+
+	function handleError() {
+		status = 'error';
+	}
+
+	function handleZoomIn() {
+		scale = Math.min(scale + scaleStep, maxScale);
+	}
+	function handleZoomOut() {
+		scale = Math.max(scale - scaleStep, minScale);
+	}
+	function handleFitToWidth() {
+		if (!containerEl || !naturalWidth) return;
+		const computed = (containerEl.clientWidth - 32) / naturalWidth;
+		scale = Math.min(Math.max(computed, minScale), maxScale);
+	}
+</script>
+
+<div
+	class={cn('flex h-full flex-col', className)}
+	data-testid={buildTestId('image-viewer', undefined, testId)}
+>
+	{#if urlAllowed && status !== 'error' && showToolbar}
+		<ViewerToolbar
+			component="image-viewer"
+			{scale}
+			{minScale}
+			{maxScale}
+			disabled={status !== 'ready'}
+			onzoomin={handleZoomIn}
+			onzoomout={handleZoomOut}
+			onfittowidth={handleFitToWidth}
+			{testId}
+		/>
+	{/if}
+
+	<div
+		bind:this={containerEl}
+		class="bg-default-100 relative flex-1 overflow-auto p-4"
+		data-testid={buildTestId('image-viewer', 'canvas-area', testId)}
+	>
+		{#if !urlAllowed || status === 'error'}
+			<UnsupportedPreview
+				url={urlAllowed ? url : undefined}
+				title={errorTitle}
+				actionLabel={errorActionLabel}
+				variant="error"
+				{testId}
+			/>
+		{:else}
+			{#if status === 'loading'}
+				<div class="absolute inset-0 flex items-center justify-center">
+					<Spinner size={Size.LG} color={Color.PRIMARY} label={loadingLabel} />
+				</div>
+			{/if}
+			<div class="flex justify-center">
+				<img
+					src={url}
+					{alt}
+					loading="lazy"
+					decoding="async"
+					referrerpolicy="no-referrer"
+					onload={handleLoad}
+					onerror={handleError}
+					style:width={naturalWidth ? `${naturalWidth * scale}px` : undefined}
+					class="block max-w-none rounded-sm bg-white shadow-sm"
+					data-testid={buildTestId('image-viewer', 'img', testId)}
+				/>
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/elements/image-viewer/ImageViewer.svelte.d.ts

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

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

@@ -0,0 +1,16 @@
+import type { ClassValue } from 'tailwind-variants';
+export type ImageViewerProps = {
+    url: string;
+    initialScale?: number;
+    minScale?: number;
+    maxScale?: number;
+    scaleStep?: number;
+    maxImagePixels?: number;
+    showToolbar?: boolean;
+    loadingLabel?: string;
+    errorTitle?: string;
+    errorActionLabel?: string;
+    alt?: string;
+    class?: ClassValue;
+    testId?: string;
+};

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

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

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

@@ -3,6 +3,17 @@
 	import { browser } from '$app/environment';
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
+	import { isSafeHttpUrl, redactUrl } from '../../helper/is-safe-http-url.js';
+	import {
+		PDFJS_DOCUMENT_OPTIONS,
+		isPdfJsVersionSafe,
+		computeCanvasDimensions,
+		pagesToRender,
+		computeFitScale,
+		type FitMode
+	} from '../../helper/pdf-safety.js';
+	import { MAX_PAGES } from '../../helper/resource-limits.js';
+	import { PdfBinaryDataFactory } from '../../helper/pdf-assets.js';
 	import Spinner from '../spinner/Spinner.svelte';
 	import Button from '../../button/Button.svelte';
 	import { Color, Size } from '../../variants.js';
@@ -13,10 +24,11 @@
 
 	let {
 		url,
-		initialScale = 1.5,
+		initialScale = 'fit-width',
 		minScale = 0.5,
 		maxScale = 3,
 		scaleStep = 0.25,
+		maxPages = MAX_PAGES,
 		showToolbar = true,
 		loadingLabel = 'Loading PDF...',
 		errorTitle = 'Error loading PDF',
@@ -25,13 +37,32 @@
 		testId
 	}: PdfViewerProps = $props();
 
+	const RENDER_TIMEOUT_MS = 15000;
+	const LOAD_TIMEOUT_MS = 30000;
+	const RENDER_CONCURRENCY = 3;
+	// Container chrome to discount when fitting: canvas-area p-4 (16px each side)
+	// plus the canvas ring — matched empirically so a fit page doesn't overflow.
+	const FIT_PADDING = 48;
+
+	const isFitMode = (value: number | FitMode): value is FitMode =>
+		value === 'fit-width' || value === 'fit-page';
+
 	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));
+	// Derived so changing `maxPages` on an already-loaded document re-applies the
+	// cap (banner + canvas slots) without waiting for the URL to change.
+	const renderedPageCount = $derived(pagesToRender(pageCount, maxPages));
+	const pagesTruncated = $derived(pageCount > renderedPageCount);
+	// `fitMode` is the active auto-fit lock: while set, `scale` is derived from the
+	// container and re-applied on resize; a manual zoom clears it. `scale` starts
+	// at a provisional 100% in fit modes until the first page is measured.
+	let fitMode = $state<FitMode | null>(isFitMode(initialScale) ? initialScale : null);
+	let scale = $state(isFitMode(initialScale) ? clampScale(1) : clampScale(initialScale));
+	let resizeObserver: ResizeObserver | null = null;
 	let loading = $state(true);
 	let error = $state<string | null>(null);
 	let pdfjsLib: PdfJsModule | null = $state(null);
@@ -46,21 +77,47 @@
 	onMount(async () => {
 		if (!browser) return;
 
+		// Re-fit on container resize (e.g. the modal/window changes size) while an
+		// auto-fit lock is active; a manual zoom clears the lock and stops this.
+		if (containerEl && typeof ResizeObserver !== 'undefined') {
+			resizeObserver = new ResizeObserver(() => {
+				if (fitMode) void applyFit(fitMode);
+			});
+			resizeObserver.observe(containerEl);
+		}
+
 		try {
 			const lib = await import('pdfjs-dist');
-			const workerModule = await import('pdfjs-dist/build/pdf.worker.min.mjs?url');
-			lib.GlobalWorkerOptions.workerSrc = workerModule.default;
+			// Resolve the worker from the consumer's own pdfjs-dist (peer dep) so its
+			// version always matches the API. `new URL(..., import.meta.url)` is the
+			// standard, bundler-agnostic pattern (Vite/webpack/Next all resolve it) —
+			// unlike Vite's `?url` query, which breaks other bundlers and esbuild's
+			// dep pre-bundling in consumer apps.
+			lib.GlobalWorkerOptions.workerSrc = new URL(
+				'pdfjs-dist/build/pdf.worker.min.mjs',
+				import.meta.url
+			).toString();
+
+			if (!isPdfJsVersionSafe(lib.version)) {
+				console.warn(
+					`[ripple] pdfjs-dist ${lib.version} is below the recommended 4.2.67 ` +
+						`(CVE-2024-4367 — arbitrary script execution). Please upgrade pdfjs-dist.`
+				);
+			}
+
 			// 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);
+			console.error('Error loading PDF.js:', err instanceof Error ? err.name : 'unknown');
 			error = 'Failed to load PDF library';
 			loading = false;
 		}
 	});
 
 	onDestroy(() => {
+		resizeObserver?.disconnect();
+		resizeObserver = null;
 		cleanupPdf();
 	});
 
@@ -85,7 +142,8 @@
 	});
 
 	$effect(() => {
-		if (pdfDoc && !loading && scale) {
+		// renderedPageCount is tracked so raising maxPages renders the new pages.
+		if (pdfDoc && !loading && scale && renderedPageCount) {
 			// Wait for canvas elements to mount after loading completes
 			tick().then(() => renderAllPages());
 		}
@@ -110,38 +168,79 @@
 			pdfDoc = null;
 		}
 
+		// Release canvas backing stores eagerly instead of waiting for GC.
+		for (const canvas of canvasElements) {
+			if (canvas) {
+				canvas.width = 0;
+				canvas.height = 0;
+			}
+		}
 		canvasElements = [];
 	}
 
 	async function loadPdf() {
 		if (!pdfjsLib) return;
 
+		if (!isSafeHttpUrl(url, { allowBlob: true, allowPrivateHosts: true })) {
+			error = 'This document URL is not allowed.';
+			loading = false;
+			return;
+		}
+
 		const token = ++loadToken;
 
 		loading = true;
 		error = null;
 
-		const loadingTask = (currentLoadingTask = pdfjsLib.getDocument(url));
+		const loadingTask = (currentLoadingTask = pdfjsLib.getDocument({
+			url,
+			// Serve pdfjs's image-codec wasm (JPEG2000/JPX, JBIG2) from
+			// bundler-emitted asset URLs. Without this, JPX-encoded pages render
+			// blank because pdfjs can't load `openjpeg.wasm`. See pdf-assets.ts.
+			BinaryDataFactory: PdfBinaryDataFactory,
+			...PDFJS_DOCUMENT_OPTIONS
+		}));
+
+		let loadTimer: ReturnType<typeof setTimeout> | undefined;
 
 		try {
-			const doc = await loadingTask.promise;
+			const doc = (await Promise.race([
+				loadingTask.promise,
+				new Promise<never>((_, reject) => {
+					loadTimer = setTimeout(() => {
+						loadingTask.destroy();
+						reject(new Error('PDF load timed out'));
+					}, LOAD_TIMEOUT_MS);
+				})
+			])) as PDFDocumentProxy;
 
 			if (token !== loadToken) return;
 
 			currentLoadingTask = null;
 			pdfDoc = doc;
-			pageCount = pdfDoc.numPages;
+			pageCount = doc.numPages;
 
-			canvasElements = new Array(pageCount).fill(null);
+			canvasElements = new Array(renderedPageCount).fill(null);
+
+			// Resolve any auto-fit lock now (loading is still true, so this sets the
+			// scale before the first render — no flash of a wrong zoom level).
+			if (fitMode) await applyFit(fitMode);
+			if (token !== loadToken) return;
 
 			loading = false;
 		} catch (err) {
 			if (token !== loadToken) return;
 
-			console.error('Error loading PDF:', err);
-			error = err instanceof Error ? err.message : 'Failed to load PDF';
+			console.error(
+				'Error loading PDF:',
+				redactUrl(url),
+				err instanceof Error ? err.name : 'unknown'
+			);
+			error = 'Failed to load PDF';
 			loading = false;
 			currentLoadingTask = null;
+		} finally {
+			clearTimeout(loadTimer);
 		}
 	}
 
@@ -156,9 +255,22 @@
 		}
 		renderTasks = [];
 
-		for (let i = 1; i <= pageCount; i++) {
-			void renderPage(i, epoch, renderScale);
+		const total = renderedPageCount;
+		let next = 1;
+
+		const worker = async () => {
+			while (next <= total) {
+				const num = next++;
+				if (epoch !== renderEpoch) return;
+				await renderPage(num, epoch, renderScale);
+			}
+		};
+
+		const workers: Promise<void>[] = [];
+		for (let i = 0; i < Math.min(RENDER_CONCURRENCY, total); i++) {
+			workers.push(worker());
 		}
+		void Promise.all(workers);
 	}
 
 	async function renderPage(num: number, epoch: number, renderScale: number) {
@@ -168,11 +280,21 @@
 		const canvas = canvasElements[num - 1];
 		if (!canvas) return;
 
+		let renderTimer: ReturnType<typeof setTimeout> | undefined;
+
 		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 baseViewport = page.getViewport({ scale: 1 });
+			const dims = computeCanvasDimensions(
+				baseViewport.width,
+				baseViewport.height,
+				renderScale,
+				typeof window !== 'undefined' ? window.devicePixelRatio : 1
+			);
+
 			const viewport = page.getViewport({ scale: renderScale });
 
 			const context = canvas.getContext('2d');
@@ -180,16 +302,12 @@
 				throw new Error('Could not get canvas context');
 			}
 
-			// Account for high-DPI/Retina displays to prevent fuzzy rendering
-			const pixelRatio = window.devicePixelRatio || 1;
+			canvas.width = dims.pixelWidth;
+			canvas.height = dims.pixelHeight;
+			canvas.style.width = `${dims.cssWidth}px`;
+			canvas.style.height = `${dims.cssHeight}px`;
 
-			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);
+			context.scale(dims.effectivePixelRatio, dims.effectivePixelRatio);
 
 			const renderTask = page.render({
 				canvas,
@@ -198,33 +316,64 @@
 			});
 			if (epoch === renderEpoch) renderTasks[num - 1] = renderTask;
 
-			await renderTask.promise;
+			await Promise.race([
+				renderTask.promise,
+				new Promise<never>((_, reject) => {
+					renderTimer = setTimeout(() => {
+						renderTask.cancel();
+						reject(new Error('Page render timed out'));
+					}, RENDER_TIMEOUT_MS);
+				})
+			]);
 			if (epoch === renderEpoch) renderTasks[num - 1] = null;
 		} catch (err) {
 			if (err instanceof Error && err.name === 'RenderingCancelledException') {
 				return;
 			}
-			console.error('Error rendering page:', err);
+			console.error('Error rendering page:', num, err instanceof Error ? err.name : 'unknown');
+		} finally {
+			clearTimeout(renderTimer);
 		}
 	}
 
+	// Resolve the active fit mode against the current page + container geometry.
+	// Guards on document identity so a load/teardown mid-await can't set a stale scale.
+	async function applyFit(mode: FitMode) {
+		const doc = pdfDoc;
+		if (!doc || !containerEl) return;
+
+		const page = await doc.getPage(1);
+		if (doc !== pdfDoc) return;
+
+		const viewport = page.getViewport({ scale: 1 });
+		scale = computeFitScale(
+			viewport.width,
+			viewport.height,
+			containerEl.clientWidth,
+			containerEl.clientHeight,
+			mode,
+			{ minScale, maxScale, padding: FIT_PADDING }
+		);
+	}
+
 	function handleZoomIn() {
+		fitMode = null;
 		scale = Math.min(scale + scaleStep, maxScale);
 	}
 
 	function handleZoomOut() {
+		fitMode = null;
 		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;
+		fitMode = 'fit-width';
+		await applyFit('fit-width');
+	}
 
-		const computed = (containerWidth - 48) / viewport.width;
-		scale = Math.min(Math.max(computed, minScale), maxScale);
+	async function handleFitToPage() {
+		fitMode = 'fit-page';
+		await applyFit('fit-page');
 	}
 
 	function handleKeydown(event: KeyboardEvent) {
@@ -329,7 +478,6 @@
 						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>
@@ -361,6 +509,32 @@
 						<line x1="3" y1="21" x2="10" y2="14" />
 					</svg>
 				</button>
+
+				<button
+					type="button"
+					onclick={handleFitToPage}
+					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 page"
+					title="Fit page"
+					data-testid={buildTestId('pdf-viewer', 'fit-to-page', 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"
+					>
+						<rect x="4" y="3" width="16" height="18" rx="1" />
+						<polyline points="9 8 12 5 15 8" />
+						<polyline points="9 16 12 19 15 16" />
+					</svg>
+				</button>
 			</div>
 		</div>
 	{/if}
@@ -414,7 +588,24 @@
 			</div>
 		{:else}
 			<div class="flex flex-col items-center gap-4">
-				{#each { length: pageCount } as _, i (i)}
+				{#if pagesTruncated}
+					<div
+						class="border-default-200 bg-default-50 text-default-700 flex w-full max-w-2xl items-center justify-between gap-4 rounded-lg border px-4 py-2 text-sm"
+						data-testid={buildTestId('pdf-viewer', 'truncated', testId)}
+					>
+						<span>Showing the first {renderedPageCount} of {pageCount} pages.</span>
+						<Button
+							color={Color.PRIMARY}
+							size={Size.SM}
+							href={url}
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							{errorActionLabel}
+						</Button>
+					</div>
+				{/if}
+				{#each { length: renderedPageCount } as _, i (i)}
 					<canvas
 						bind:this={canvasElements[i]}
 						class="ring-default-200 block rounded-sm bg-white shadow-sm ring-1"

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

@@ -1,11 +1,13 @@
 import type { ClassValue } from 'tailwind-variants';
+import type { FitMode } from '../../helper/pdf-safety.js';
 /**
  * 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.
+ * canvases, with a toolbar for zoom in / zoom out / fit-width / fit-page.
+ * It defaults to fit-width and re-fits on container resize until the user
+ * zooms. PDF.js is imported lazily inside `onMount`, so the viewer is SSR-safe.
  *
  * **Peer dependency:** install `pdfjs-dist` in your application.
  *
@@ -17,14 +19,21 @@ import type { ClassValue } from 'tailwind-variants';
 export type PdfViewerProps = {
     /** URL of the PDF document. Changing the URL reloads the viewer. */
     url: string;
-    /** Initial zoom scale. @default 1.5 */
-    initialScale?: number;
+    /**
+     * Initial zoom. A number is a fixed scale (1 = 100%); `'fit-width'` sizes the
+     * page to the container width (scroll vertically), `'fit-page'` fits the whole
+     * first page. Fit modes re-apply on container resize until the user zooms.
+     * @default 'fit-width'
+     */
+    initialScale?: number | FitMode;
     /** 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;
+    /** Max pages to eagerly render; extra pages are not rendered. @default 200 */
+    maxPages?: number;
     /** Show the zoom / page-count toolbar. @default true */
     showToolbar?: boolean;
     /** Visible label inside the loading spinner. @default 'Loading PDF...' */