@olenbetong/synergi-react 2.3.7 → 2.3.9

package/src/components/ImageEditor/useEdgeDetection.ts

@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+
+export interface Point {
+	x: number;
+	y: number;
+}
+
+/** TL, TR, BR, BL */
+export type Quad = [Point, Point, Point, Point];
+
+export function fullImageQuad(width: number, height: number): Quad {
+	return [
+		{ x: 0, y: 0 },
+		{ x: width, y: 0 },
+		{ x: width, y: height },
+		{ x: 0, y: height },
+	];
+}
+
+interface FindQuadResult {
+	quad: Quad | null;
+	/** Canvas containing the Canny edge image (with detected quad overlay) for debugging */
+	debugCanvas: HTMLCanvasElement;
+}
+
+function findLargestQuad(cv: any, src: any, minAreaFraction = 0.1): FindQuadResult {
+	let gray = new cv.Mat();
+	let blurred = new cv.Mat();
+	let edges = new cv.Mat();
+	let dilated = new cv.Mat();
+	let contours = new cv.MatVector();
+	let hierarchy = new cv.Mat();
+
+	try {
+		cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
+		cv.GaussianBlur(gray, blurred, new cv.Size(5, 5), 0);
+		// Lower thresholds catch document-background boundaries even in low-contrast images
+		cv.Canny(blurred, edges, 40, 120);
+
+		// Dilate to close small gaps along document edges
+		let kernel = cv.getStructuringElement(cv.MORPH_RECT, new cv.Size(3, 3));
+		cv.dilate(edges, dilated, kernel);
+		kernel.delete();
+
+		// Build RGBA debug canvas so we can draw a coloured quad overlay
+		let debugRgba = new cv.Mat();
+		cv.cvtColor(dilated, debugRgba, cv.COLOR_GRAY2RGBA);
+
+		cv.findContours(dilated, contours, hierarchy, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE);
+
+		let best: unknown = null;
+		let bestArea = 0;
+		let minArea = src.cols * src.rows * minAreaFraction;
+
+		for (let i = 0; i < contours.size(); i++) {
+			let contour = contours.get(i);
+			let peri = cv.arcLength(contour, true);
+			let approx = new cv.Mat();
+			// Larger epsilon is more aggressive — helps when the outline isn't perfectly straight
+			cv.approxPolyDP(contour, approx, 0.04 * peri, true);
+
+			if (approx.rows === 4) {
+				let area = cv.contourArea(approx);
+				if (area > bestArea && area > minArea) {
+					bestArea = area;
+					(best as any)?.delete();
+					best = approx;
+				} else {
+					approx.delete();
+				}
+			} else {
+				approx.delete();
+			}
+			contour.delete();
+		}
+
+		let quad: Quad | null = null;
+		if (best) {
+			let mat = best as any;
+			let pts: Point[] = [];
+			for (let i = 0; i < 4; i++) {
+				pts.push({ x: mat.data32S[i * 2], y: mat.data32S[i * 2 + 1] });
+			}
+			mat.delete();
+
+			// Sort into TL, TR, BR, BL
+			pts.sort((a, b) => a.x + a.y - (b.x + b.y));
+			let tl = pts[0];
+			let br = pts[3];
+			let remaining = [pts[1], pts[2]];
+			let tr = remaining[0].x > remaining[1].x ? remaining[0] : remaining[1];
+			let bl = remaining[0].x < remaining[1].x ? remaining[0] : remaining[1];
+			quad = [tl, tr, br, bl];
+
+			// Draw the detected quad on the debug canvas in green
+			let green = new cv.Scalar(0, 255, 0, 255);
+			let ordered = [tl, tr, br, bl];
+			for (let i = 0; i < 4; i++) {
+				let a = ordered[i];
+				let b = ordered[(i + 1) % 4];
+				cv.line(debugRgba, new cv.Point(a.x, a.y), new cv.Point(b.x, b.y), green, 3);
+			}
+			for (let pt of ordered) {
+				cv.circle(debugRgba, new cv.Point(pt.x, pt.y), 8, green, -1);
+			}
+		}
+
+		let debugCanvas = document.createElement("canvas");
+		cv.imshow(debugCanvas, debugRgba);
+		debugRgba.delete();
+
+		return { quad, debugCanvas };
+	} finally {
+		gray.delete();
+		blurred.delete();
+		edges.delete();
+		dilated.delete();
+		contours.delete();
+		hierarchy.delete();
+	}
+}
+
+interface UseEdgeDetectionResult {
+	corners: Quad | null;
+	/** Data URL of the Canny edge image, for debug visualisation */
+	debugImageUrl: string | null;
+}
+
+/**
+ * Runs Canny edge detection on the image to suggest document corners.
+ * Falls back to full-image corners if no quadrilateral is found.
+ */
+export function useEdgeDetection(cv: any, canvas: HTMLCanvasElement | null, enabled: boolean): UseEdgeDetectionResult {
+	let [corners, setCorners] = useState<Quad | null>(null);
+	let [debugImageUrl, setDebugImageUrl] = useState<string | null>(null);
+
+	useEffect(() => {
+		console.log(
+			"[useEdgeDetection] effect: enabled=",
+			enabled,
+			"cv=",
+			typeof cv,
+			"canvas=",
+			canvas?.width,
+			"x",
+			canvas?.height,
+		);
+		if (!enabled || !cv || !canvas) return;
+
+		try {
+			console.log("[useEdgeDetection] running findLargestQuad...");
+			let src = cv.imread(canvas);
+			let { quad, debugCanvas } = findLargestQuad(cv, src);
+			src.delete();
+			console.log("[useEdgeDetection] quad=", quad);
+			setDebugImageUrl(debugCanvas.toDataURL());
+			setCorners(quad ?? fullImageQuad(canvas.width, canvas.height));
+		} catch (err) {
+			console.error("[useEdgeDetection] error:", err);
+			if (canvas) {
+				setCorners(fullImageQuad(canvas.width, canvas.height));
+			}
+		}
+	}, [cv, canvas, enabled]);
+
+	return { corners, debugImageUrl };
+}

package/src/components/ImageEditor/useImageEditor.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from "react";
+
+interface UseImageEditorResult {
+	currentImageUrl: string;
+	currentBlob: Blob | null;
+	applyImage: (blob: Blob) => string;
+	reset: () => void;
+}
+
+/**
+ * Manages the image history for the editor.
+ * Tracks the current image URL/blob and cleans up generated object URLs on unmount.
+ */
+export function useImageEditor(initialImageUrl: string): UseImageEditorResult {
+	let [currentImageUrl, setCurrentImageUrl] = useState(initialImageUrl);
+	let [currentBlob, setCurrentBlob] = useState<Blob | null>(null);
+	let generatedUrls = useRef<string[]>([]);
+
+	useEffect(() => {
+		return () => {
+			for (let url of generatedUrls.current) URL.revokeObjectURL(url);
+		};
+	}, []);
+
+	function applyImage(blob: Blob): string {
+		let nextUrl = URL.createObjectURL(blob);
+		generatedUrls.current = [...generatedUrls.current, nextUrl];
+		setCurrentImageUrl(nextUrl);
+		setCurrentBlob(blob);
+		return nextUrl;
+	}
+
+	function reset() {
+		setCurrentImageUrl(initialImageUrl);
+		setCurrentBlob(null);
+	}
+
+	return { currentImageUrl, currentBlob, applyImage, reset };
+}

package/src/components/ImageEditor/useImageHistory.ts

@@ -0,0 +1,189 @@
+import { useEffect, useRef, useState } from "react";
+
+import type { ActionRegistry, EditAction } from "./types.js";
+
+interface HistoryState {
+	past: EditAction[][];
+	future: EditAction[][];
+}
+
+interface CurrentState {
+	url: string;
+	blob: Blob | null;
+	/** True if `url` is an object URL we created and must eventually revoke. */
+	generated: boolean;
+}
+
+export interface UseImageHistoryResult {
+	currentImageUrl: string;
+	currentBlob: Blob | null;
+	canUndo: boolean;
+	canRedo: boolean;
+	/** True while an async replay (undo/redo) is in progress. */
+	replaying: boolean;
+	applyActions: (blob: Blob, actions: EditAction[]) => void;
+	undo: () => void;
+	redo: () => void;
+	reset: () => void;
+}
+
+/**
+ * Manages undo/redo history for the image editor using action replay.
+ *
+ * Only action lists are stored — no intermediate blobs. Undo/redo replays
+ * all remaining actions from the source image, keeping memory usage minimal
+ * regardless of history depth. Only one blob is in memory at a time.
+ */
+export function useImageHistory(sourceUrl: string, registry: ActionRegistry): UseImageHistoryResult {
+	let [history, setHistory] = useState<HistoryState>({ past: [], future: [] });
+	let [current, setCurrent] = useState<CurrentState>({ url: sourceUrl, blob: null, generated: false });
+	let [replaying, setReplaying] = useState(false);
+
+	let historyRef = useRef(history);
+	historyRef.current = history;
+	let currentRef = useRef(current);
+	currentRef.current = current;
+	let isReplaying = useRef(false);
+	let replayAbort = useRef<AbortController | null>(null);
+
+	// When source changes (e.g. component remount with new image), reset fully.
+	useEffect(() => {
+		replayAbort.current?.abort();
+		isReplaying.current = false;
+		setReplaying(false);
+		setCurrent((prev) => {
+			if (prev.generated) URL.revokeObjectURL(prev.url);
+			return { url: sourceUrl, blob: null, generated: false };
+		});
+		setHistory({ past: [], future: [] });
+	}, [sourceUrl]);
+
+	useEffect(() => {
+		return () => {
+			if (currentRef.current.generated) URL.revokeObjectURL(currentRef.current.url);
+			replayAbort.current?.abort();
+		};
+	}, []);
+
+	function applyActions(blob: Blob, actions: EditAction[]) {
+		// A direct apply always takes priority — abort any in-flight replay.
+		replayAbort.current?.abort();
+		isReplaying.current = false;
+		setReplaying(false);
+
+		let newUrl = URL.createObjectURL(blob);
+		setCurrent((prev) => {
+			if (prev.generated) URL.revokeObjectURL(prev.url);
+			return { url: newUrl, blob, generated: true };
+		});
+		setHistory((prev) => ({ past: [...prev.past, actions], future: [] }));
+	}
+
+	async function doReplay(newPast: EditAction[][], newFuture: EditAction[][]) {
+		replayAbort.current?.abort();
+		let abort = new AbortController();
+		replayAbort.current = abort;
+		isReplaying.current = true;
+		setReplaying(true);
+
+		try {
+			let result = await replayAll(sourceUrl, newPast, registry, abort.signal);
+			if (abort.signal.aborted) return;
+
+			setCurrent((prev) => {
+				if (prev.generated) URL.revokeObjectURL(prev.url);
+				if (result) return { url: result.url, blob: result.blob, generated: true };
+				return { url: sourceUrl, blob: null, generated: false };
+			});
+			setHistory({ past: newPast, future: newFuture });
+		} finally {
+			if (!abort.signal.aborted) {
+				isReplaying.current = false;
+				setReplaying(false);
+			}
+		}
+	}
+
+	function undo() {
+		if (isReplaying.current) return;
+		let { past, future } = historyRef.current;
+		if (past.length === 0) return;
+		doReplay(past.slice(0, -1), [past.at(-1)!, ...future]);
+	}
+
+	function redo() {
+		if (isReplaying.current) return;
+		let { past, future } = historyRef.current;
+		if (future.length === 0) return;
+		doReplay([...past, future[0]], future.slice(1));
+	}
+
+	function reset() {
+		replayAbort.current?.abort();
+		isReplaying.current = false;
+		setReplaying(false);
+		setCurrent((prev) => {
+			if (prev.generated) URL.revokeObjectURL(prev.url);
+			return { url: sourceUrl, blob: null, generated: false };
+		});
+		setHistory({ past: [], future: [] });
+	}
+
+	return {
+		currentImageUrl: current.url,
+		currentBlob: current.blob,
+		canUndo: history.past.length > 0,
+		canRedo: history.future.length > 0,
+		replaying,
+		applyActions,
+		undo,
+		redo,
+		reset,
+	};
+}
+
+/**
+ * Replays a sequence of action groups from a source URL.
+ * Intermediate object URLs are revoked as soon as a new step succeeds.
+ * Returns the final `{ url, blob }` or `null` if there were no actions.
+ */
+async function replayAll(
+	sourceUrl: string,
+	actionGroups: EditAction[][],
+	registry: ActionRegistry,
+	signal: AbortSignal,
+): Promise<{ url: string; blob: Blob } | null> {
+	let prevUrl = sourceUrl;
+	let prevGenerated = false;
+	let lastBlob: Blob | null = null;
+
+	for (let group of actionGroups) {
+		for (let action of group) {
+			if (signal.aborted) {
+				if (prevGenerated) URL.revokeObjectURL(prevUrl);
+				return null;
+			}
+
+			let apply = registry.get(action.type);
+			if (!apply) {
+				console.warn(`[ImageHistory] No replay handler for action type "${action.type}" — skipping`);
+				continue;
+			}
+
+			let blob = await apply(prevUrl, action.params);
+
+			if (signal.aborted) {
+				if (prevGenerated) URL.revokeObjectURL(prevUrl);
+				return null;
+			}
+
+			if (prevGenerated) URL.revokeObjectURL(prevUrl);
+			lastBlob = blob;
+			prevUrl = URL.createObjectURL(blob);
+			prevGenerated = true;
+		}
+	}
+
+	if (!lastBlob || !prevGenerated) return null;
+	return { url: prevUrl, blob: lastBlob };
+}

package/src/components/ImageEditor/useOpenCV.ts

@@ -0,0 +1,134 @@
+import { useEffect, useState } from "react";
+
+let loadPromise: Promise<unknown> | null = null;
+
+declare global {
+	interface Window {
+		cv: any;
+	}
+}
+
+function waitForCvMat(timeoutMs = 30_000): Promise<void> {
+	return new Promise((resolve, reject) => {
+		let elapsed = 0;
+		let interval = setInterval(() => {
+			console.log("[OpenCV] polling... cv=", typeof window.cv, "cv.Mat=", typeof window.cv?.Mat);
+			// cv.Mat signals that the WASM runtime has fully initialised
+			if (window.cv?.Mat) {
+				clearInterval(interval);
+				console.log("[OpenCV] cv.Mat found — ready!");
+				resolve(); // callers read window.cv directly
+				return;
+			}
+			elapsed += 100;
+			if (elapsed >= timeoutMs) {
+				clearInterval(interval);
+				reject(new Error("OpenCV.js initialisation timed out"));
+			}
+		}, 100);
+	});
+}
+
+export function loadOpenCV(): Promise<unknown> {
+	if (loadPromise) {
+		console.log("[OpenCV] loadOpenCV() — reusing existing promise");
+		return loadPromise;
+	}
+
+	// Already initialised (e.g. hot-reload)
+	if (window.cv?.Mat) {
+		console.log("[OpenCV] already initialised on window.cv");
+		loadPromise = Promise.resolve(window.cv);
+		return loadPromise;
+	}
+
+	console.log("[OpenCV] injecting script tag...");
+	loadPromise = new Promise<unknown>((resolve, reject) => {
+		let script = document.createElement("script");
+		script.src = "https://docs.opencv.org/4.10.0/opencv.js";
+		script.async = true;
+
+		script.onload = () => {
+			console.log(
+				"[OpenCV] script onload fired. typeof window.cv=",
+				typeof window.cv,
+				"cv?.then=",
+				typeof window.cv?.then,
+				"cv?.Mat=",
+				typeof window.cv?.Mat,
+			);
+			if (typeof window.cv?.then === "function") {
+				console.log("[OpenCV] promise-based build detected, awaiting cv...");
+				// Emscripten promise-based build: cv itself is the promise.
+				// IMPORTANT: we must NOT pass `instance` into resolve() — if the resolved
+				// value is itself thenable, Promise will follow it forever and never settle.
+				// Instead we mutate window.cv and signal readiness with undefined.
+				(window.cv as Promise<unknown>).then(
+					(instance) => {
+						console.log(
+							"[OpenCV] promise resolved, instance=",
+							typeof instance,
+							"hasReadMethod=",
+							typeof (instance as any)?.imread,
+						);
+						window.cv = instance;
+						resolve(undefined); // signal only; callers read window.cv
+					},
+					(err) => {
+						console.error("[OpenCV] promise rejected", err);
+						reject(err);
+					},
+				);
+			} else {
+				console.log("[OpenCV] polling-based build, starting waitForCvMat...");
+				// Polling build: WASM initialises asynchronously after script loads
+				waitForCvMat().then(() => resolve(undefined), reject);
+			}
+		};
+
+		script.onerror = (err) => {
+			console.error("[OpenCV] script load error", err);
+			loadPromise = null;
+			reject(new Error("Failed to load OpenCV.js"));
+		};
+
+		document.head.appendChild(script);
+	});
+
+	return loadPromise;
+}
+
+interface UseOpenCVResult {
+	cv: any | null;
+	ready: boolean;
+	error: Error | null;
+}
+
+/** Lazily loads OpenCV.js from CDN. Starts loading only when `enabled` is true. */
+export function useOpenCV(enabled = true): UseOpenCVResult {
+	let [cv, setCv] = useState<any | null>(null);
+	let [ready, setReady] = useState(false);
+	let [error, setError] = useState<Error | null>(null);
+
+	useEffect(() => {
+		if (!enabled) return;
+		console.log("[useOpenCV] enabled=true, calling loadOpenCV()");
+		loadOpenCV()
+			.then(() => {
+				console.log(
+					"[useOpenCV] loadOpenCV resolved. window.cv=",
+					typeof window.cv,
+					"imread=",
+					typeof window.cv?.imread,
+				);
+				setCv(window.cv);
+				setReady(true);
+			})
+			.catch((err: Error) => {
+				console.error("[useOpenCV] loadOpenCV rejected:", err);
+				setError(err);
+			});
+	}, [enabled]);
+
+	return { cv, ready, error };
+}

package/src/components/PdfViewer/PdfViewer.css

@@ -0,0 +1,12 @@
+.pdfViewerContainer {
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+
+.pdfViewerContent {
+	width: max-content;
+	/* Center the PDF horizontally within the scroll container */
+	margin-left: auto;
+	margin-right: auto;
+}

package/src/components/PdfViewer/PdfViewer.tsx

@@ -0,0 +1,160 @@
+import rawPdfWorkerSrc from "pdfjs-dist/build/pdf.worker.min.mjs?raw";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import "./PdfViewer.css";
+
+// Clear any leftover workerPort from previous mounts/HMR to avoid using a terminated worker
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const opts: any = pdfjs.GlobalWorkerOptions as any;
+if (opts.workerPort && typeof opts.workerPort === "object" && typeof opts.workerPort.terminate === "function") {
+	try {
+		opts.workerPort.terminate();
+	} catch {}
+}
+// Remove the property entirely to avoid type checks on undefined
+try {
+	delete opts.workerPort;
+} catch {
+	opts.workerPort = null;
+}
+// Provide a dedicated Worker instance via blob; pdf.js prefers workerPort over workerSrc
+try {
+	const blob = new Blob([rawPdfWorkerSrc], { type: "text/javascript" });
+	const worker = new Worker(URL.createObjectURL(blob), { type: "module" });
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(pdfjs.GlobalWorkerOptions as any).workerPort = worker;
+} catch {
+	// Ignore – pdf.js may fallback to fake worker in extreme cases
+}
+
+type PdfViewerProps = { url?: string; file?: string | Blob | ArrayBuffer };
+
+export function PdfViewer({ url, file }: PdfViewerProps) {
+	let [numPages, setNumPages] = useState(0);
+	let [error, setError] = useState<string | null>(null);
+	let containerRef = useRef<HTMLDivElement | null>(null);
+	let [containerWidth, setContainerWidth] = useState<number>(0);
+	let [containerHeight, setContainerHeight] = useState<number>(0);
+	let [scale, setScale] = useState<number>(1);
+	let [naturalPageSize, setNaturalPageSize] = useState<{
+		w: number;
+		h: number;
+	} | null>(null);
+
+	const pages = useMemo(() => Array.from({ length: numPages }, (_, i) => i + 1), [numPages]);
+
+	// Observe container size to support fit-to-page calculations
+	useEffect(() => {
+		let el = containerRef.current;
+		if (!el) return;
+		let ro = new ResizeObserver((entries) => {
+			let cr = entries[0].contentRect;
+			setContainerWidth(Math.max(1, Math.floor(cr.width)));
+			setContainerHeight(Math.max(1, Math.floor(cr.height)));
+		});
+		ro.observe(el);
+		setContainerWidth(Math.max(1, Math.floor(el.clientWidth)));
+		setContainerHeight(Math.max(1, Math.floor(el.clientHeight)));
+		return () => ro.disconnect();
+	}, []);
+
+	// Intercept browser zoom gestures and zoom the PDF instead
+	useEffect(() => {
+		let el = containerRef.current;
+		if (!el) return;
+
+		const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
+		const zoomBy = (delta: number) => {
+			// Smooth exponential zoom for trackpads/mice
+			const factor = Math.exp(delta * 0.001);
+			setScale((s) => clamp(s * factor, 0.25, 5));
+		};
+
+		const onWheel = (e: WheelEvent) => {
+			if (e.ctrlKey) {
+				// ctrl+wheel is usually browser zoom; override for PDF zoom
+				e.preventDefault();
+				zoomBy(-e.deltaY);
+			}
+		};
+
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (!e.ctrlKey) return;
+			const key = e.key;
+			if (key === "+" || key === "=" || key === "Add") {
+				e.preventDefault();
+				setScale((s) => clamp(s * 1.1, 0.25, 5));
+			} else if (key === "-" || key === "_" || key === "Subtract") {
+				e.preventDefault();
+				setScale((s) => clamp(s / 1.1, 0.25, 5));
+			} else if (key === "0") {
+				e.preventDefault();
+				setScale(1);
+			}
+		};
+
+		el.addEventListener("wheel", onWheel, { passive: false });
+		window.addEventListener("keydown", onKeyDown, { passive: false });
+		return () => {
+			el.removeEventListener("wheel", onWheel as EventListener);
+			window.removeEventListener("keydown", onKeyDown as EventListener);
+		};
+	}, []);
+
+	// When source changes, reset auto-fit baseline
+	useEffect(() => {
+		setNaturalPageSize(null);
+		setScale(1);
+	}, [url, file]);
+
+	// Compute base width to fit full page into container, then apply zoom scale.
+	// If we don't yet know page's natural size, default to fit-to-width.
+	const fitBaseWidth = useMemo(() => {
+		if (!naturalPageSize) return containerWidth || 1000;
+		const { w, h } = naturalPageSize;
+		if (w <= 0 || h <= 0) return containerWidth || 1000;
+		// width to fit by height: containerHeight * (w/h)
+		const widthByHeight = (containerHeight || 1000) * (w / h);
+		// Fit to page means respecting both constraints
+		return Math.min(Math.max(1, containerWidth || 1000), Math.max(1, widthByHeight));
+	}, [naturalPageSize, containerWidth, containerHeight]);
+
+	const pageWidth = Math.max(1, Math.round(fitBaseWidth * scale));
+
+	return (
+		<div ref={containerRef} className="pdfViewerContainer">
+			<div className="pdfViewerContent">
+				<Document
+					file={file ?? url}
+					onLoadSuccess={({ numPages }) => setNumPages(numPages)}
+					onLoadError={(e) => setError((e as Error)?.message ?? "Failed to load PDF")}
+				>
+					{pages.map((pageNumber) => (
+						<Page
+							key={pageNumber}
+							pageNumber={pageNumber}
+							renderTextLayer={false}
+							renderAnnotationLayer={false}
+							width={pageWidth}
+							onLoadSuccess={(p) => {
+								// Capture natural page size once for fit-to-page calculation
+								try {
+									// pdf.js viewport at scale 1
+									const vp = p.getViewport({ scale: 1 });
+									const w = Number(vp?.width) || Number((p as any).width) || 0;
+									const h = Number(vp?.height) || Number((p as any).height) || 0;
+									if (w > 0 && h > 0 && !naturalPageSize) {
+										setNaturalPageSize({ w, h });
+									}
+								} catch {
+									// Ignore, fallback to fit-to-width when unknown
+								}
+							}}
+						/>
+					))}
+				</Document>
+			</div>
+			{error && <div style={{ color: "#b00020", padding: 8 }}>Error loading PDF: {error}</div>}
+		</div>
+	);
+}

package/src/components/PdfViewer/index.ts

@@ -0,0 +1 @@
+export { PdfViewer } from "./PdfViewer.js";