4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T70d,"use client"; import { FileViewer, FileViewerContent, FileViewerHeader, FileViewerTitle, FileViewerProvider, FileViewerSidebar, FileViewerSidebarTrigger, FileViewerInset, FileViewerControls, FileViewerViewport, } from "@/components/ui/file-viewer"; import { PdfViewerPages, PdfViewerProvider, PdfViewerThumbnails, } from "@/components/ui/pdf-viewer"; const PDF_URL = "/samples/nvidia-10k-fy2024.pdf"; const PDF_SOURCE = { kind: "url" as const, url: PDF_URL, fileName: "nvidia-10k-fy2024.pdf", }; /** * PDF viewer with page thumbnails in a navigation rail. * * ViewerSidebar owns placement. PdfViewerThumbnails owns PDF page * thumbnail behavior, active-page highlighting, and click-to-jump navigation. */ export function PdfThumbnailsBlock() { return (

); } 52:T242b,"use client"; import * as React from "react"; import { clearPdfDocumentResource } from "@/lib/pdf-document-resource"; import { cn } from "@/lib/utils"; import type { ViewerResource } from "@/lib/viewer-resource"; import { Spinner } from "@/components/ui/spinner"; import { buildPdfThumbnailLayout, PDF_THUMBNAIL_INITIAL_VIEWPORT_HEIGHT, PDF_THUMBNAIL_OVERSCAN_PX, type PdfThumbnailShape, } from "./pdf-thumbnail-layout"; import { useOptionalFileViewerSidebarMotion, type FileViewerSidebarMotion, } from "./file-viewer-renderer-frame"; import { PdfThumbnailRailViewport } from "./pdf-thumbnail-rail"; import { usePdfViewerThumbnails } from "./pdf-viewer-context"; import { useIsClient } from "./use-is-client"; import { usePdfThumbnailDocument } from "./use-pdf-thumbnail-document"; import { usePdfThumbnailPageMetrics } from "./use-pdf-thumbnail-page-metrics"; import { usePdfThumbnailWindow } from "./use-pdf-thumbnail-window"; import { useThumbnailRailFollow } from "./use-thumbnail-rail-follow"; import { usePdfRenderedPageCache } from "./pdf-viewer-render-cache"; import { ViewerErrorBoundary } from "./viewer-error"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { joinEffectKey } from "@/lib/effect-key"; const PDF_THUMBNAIL_RENDER_RESUME_DELAY_MS = 1400; const PDF_THUMBNAIL_CLOSED_WARM_DELAY_MS = 2200; export interface PdfViewerThumbnailsProps { /** Thumbnail image width in CSS pixels. The sidebar shell owns rail width. */ thumbnailWidth?: number; /** Preserve page aspect or crop each page preview into a square frame. */ thumbnailShape?: PdfThumbnailShape; className?: string; } export interface PdfThumbnailRailProps { /** Same resource object passed to PdfResourceContent. */ resource: ViewerResource; /** 1-based current page; its thumbnail is highlighted. */ currentPage?: number | null; /** Click a thumbnail to jump the document to that page. */ onSelectPage?: (page: number) => void; /** Thumbnail image width in CSS pixels. The sidebar shell owns rail width. */ thumbnailWidth?: number; /** Preserve page aspect or crop each page preview into a square frame. */ thumbnailShape?: PdfThumbnailShape; className?: string; } export function PdfViewerThumbnails({ className, thumbnailShape, thumbnailWidth, }: PdfViewerThumbnailsProps) { const thumbnails = usePdfViewerThumbnails(); const sidebarMotion = useOptionalFileViewerSidebarMotion(); const isRenderingSuspended = usePdfThumbnailRenderSuspension(sidebarMotion); return ( ); } export function PdfThumbnailRail({ className, currentPage, onSelectPage, resource, thumbnailShape, thumbnailWidth, }: PdfThumbnailRailProps) { return ( ); } function PdfThumbnailRailShell({ className, currentPage, isRenderingSuspended, onSelectPage, resource, thumbnailShape, thumbnailWidth, }: PdfThumbnailRailProps & { isRenderingSuspended: boolean; }) { const isClient = useIsClient(); if (!isClient) { return ; } return ( clearPdfDocumentResource(resource.content)} resetKey={resource.keys.resource} sourceKind={resource.sourceKind} variant="inline" > }> ); } function PdfThumbnailRailInner({ resource, currentPage, isRenderingSuspended, onSelectPage, thumbnailShape = "page", thumbnailWidth = 120, className, }: PdfThumbnailRailProps & { isRenderingSuspended: boolean; }) { const doc = usePdfThumbnailDocument(resource); const renderCache = usePdfRenderedPageCache(doc); const pageMetrics = usePdfThumbnailPageMetrics(doc, doc); const { metricByPageNumber, pageCount, requestPageMetrics } = pageMetrics; const viewportRef = React.useRef(null); const activeCurrentPage = isRenderingSuspended ? null : currentPage; const layout = React.useMemo( () => buildPdfThumbnailLayout({ pageCount, width: thumbnailWidth, shape: thumbnailShape, metricByPageNumber, }), [metricByPageNumber, pageCount, thumbnailShape, thumbnailWidth], ); const thumbnailWindow = usePdfThumbnailWindow({ layout, viewportRef, overscanPx: PDF_THUMBNAIL_OVERSCAN_PX, initialViewportHeight: PDF_THUMBNAIL_INITIAL_VIEWPORT_HEIGHT, }); const follow = useThumbnailRailFollow({ currentPage: activeCurrentPage, layout, viewportRef, resetKey: doc, }); useKeyedMountEffect( joinEffectKey([ activeCurrentPage, isRenderingSuspended, layout.pageCount, requestPageMetrics, thumbnailWindow.visibleItems, ]), () => { if (isRenderingSuspended) return; requestPageMetrics( getRequestedThumbnailMetricPages({ currentPage: activeCurrentPage, pageCount: layout.pageCount, visibleItems: thumbnailWindow.visibleItems, }), ); }, ); return ( ); } function usePdfThumbnailRenderSuspension( sidebarMotion: FileViewerSidebarMotion | null, ) { const isMotionManaged = sidebarMotion?.isMotionManaged === true; const isSidebarOpen = sidebarMotion?.isSidebarOpen === true; const isSidebarInteractive = sidebarMotion?.isSidebarInteractive === true; const isSidebarTransitioning = sidebarMotion?.isSidebarTransitioning === true; const [isOpenSettling, setIsOpenSettling] = React.useState(false); const [isClosedWarmReleased, setIsClosedWarmReleased] = React.useState(false); useKeyedMountEffect( joinEffectKey([ isMotionManaged, isOpenSettling, isSidebarInteractive, isSidebarOpen, isSidebarTransitioning, ]), () => { if (!isMotionManaged) { setIsOpenSettling(false); setIsClosedWarmReleased(false); return; } if (!isSidebarOpen) { setIsOpenSettling(false); setIsClosedWarmReleased(false); if (isSidebarTransitioning) return; const timer = window.setTimeout(() => { setIsClosedWarmReleased(true); }, PDF_THUMBNAIL_CLOSED_WARM_DELAY_MS); return () => window.clearTimeout(timer); } setIsClosedWarmReleased(false); if (isSidebarTransitioning || !isSidebarInteractive) { setIsOpenSettling(true); return; } if (!isOpenSettling) return; const timer = window.setTimeout(() => { setIsOpenSettling(false); }, PDF_THUMBNAIL_RENDER_RESUME_DELAY_MS); return () => window.clearTimeout(timer); }, ); if (!isMotionManaged) return false; if (!isSidebarOpen) return !isClosedWarmReleased; if (isSidebarTransitioning || !isSidebarInteractive) return true; return isOpenSettling; } function getRequestedThumbnailMetricPages({ currentPage, pageCount, visibleItems, }: { currentPage: number | null | undefined; pageCount: number; visibleItems: readonly { pageNumber: number }[]; }) { const pageNumbers = new Set(); for (const item of visibleItems) pageNumbers.add(item.pageNumber); if ( currentPage != null && Number.isInteger(currentPage) && currentPage >= 1 && currentPage <= pageCount ) { pageNumbers.add(currentPage); } return pageNumbers; } function ThumbnailsFallback({ className }: { className?: string }) { return (

); } 53:T2670,export const PDF_THUMBNAIL_OVERSCAN_PX = 1000; export const PDF_THUMBNAIL_INITIAL_VIEWPORT_HEIGHT = 680; export const PDF_THUMBNAIL_DEFAULT_ASPECT = 4 / 3; export const PDF_THUMBNAIL_LABEL_AND_GAP_HEIGHT = 22; export type PdfThumbnailShape = "page" | "square"; export interface PdfThumbnailPageMetric { pageNumber: number; width: number; height: number; } export interface PdfThumbnailLayoutItem { pageNumber: number; pageIndex: number; top: number; height: number; imageWidth: number; imageHeight: number; } export interface PdfThumbnailLayout { pageCount: number; width: number; shape: PdfThumbnailShape; estimatedImageHeight: number; estimatedItemHeight: number; labelAndGapHeight: number; metricByPageNumber: ReadonlyMap; prefixHeightDeltas: readonly PdfThumbnailHeightDelta[]; totalHeight: number; } export interface PdfThumbnailRenderedWindowItem extends PdfThumbnailLayoutItem { windowTop: number; } export interface PdfThumbnailRenderedWindow { afterHeight: number; beforeHeight: number; height: number; items: readonly PdfThumbnailRenderedWindowItem[]; renderedBottom: number; renderedTop: number; stickyInset: number; } export interface PdfThumbnailPixelWindow { bottom: number; top: number; } interface PdfThumbnailHeightDelta { pageNumber: number; prefixDeltaAfterPage: number; } export function buildPdfThumbnailLayout({ pageCount, width, metricByPageNumber, labelAndGapHeight = PDF_THUMBNAIL_LABEL_AND_GAP_HEIGHT, shape = "page", }: { pageCount: number; width: number; metricByPageNumber?: ReadonlyMap; labelAndGapHeight?: number; shape?: PdfThumbnailShape; }): PdfThumbnailLayout { const safePageCount = normalizePageCount(pageCount); const safeWidth = normalizeWidth(width); const safeLabelAndGapHeight = normalizeSize(labelAndGapHeight, 0); const safeMetricByPageNumber = metricByPageNumber ?? new Map(); const estimatedImageHeight = getThumbnailImageHeight({ width: safeWidth, metric: safeMetricByPageNumber.get(1), shape, }); const estimatedItemHeight = Math.ceil(estimatedImageHeight) + safeLabelAndGapHeight; const prefixHeightDeltas = buildPrefixHeightDeltas({ pageCount: safePageCount, width: safeWidth, shape, estimatedItemHeight, metricByPageNumber: safeMetricByPageNumber, labelAndGapHeight: safeLabelAndGapHeight, }); const totalHeight = safePageCount * estimatedItemHeight + (prefixHeightDeltas.at(-1)?.prefixDeltaAfterPage ?? 0); return { pageCount: safePageCount, width: safeWidth, shape, estimatedImageHeight, estimatedItemHeight, labelAndGapHeight: safeLabelAndGapHeight, metricByPageNumber: safeMetricByPageNumber, prefixHeightDeltas, totalHeight, }; } export function getPdfThumbnailLayoutItem( layout: PdfThumbnailLayout, pageNumber: number, ): PdfThumbnailLayoutItem | null { const normalizedPage = normalizeThumbnailPage(pageNumber, layout.pageCount); if (normalizedPage == null) return null; const metric = layout.metricByPageNumber.get(normalizedPage); const imageHeight = getThumbnailImageHeight({ width: layout.width, metric, shape: layout.shape, }); const height = Math.ceil(imageHeight) + layout.labelAndGapHeight; return { pageNumber: normalizedPage, pageIndex: normalizedPage - 1, top: (normalizedPage - 1) * layout.estimatedItemHeight + getPrefixHeightDeltaBeforePage(layout, normalizedPage), height, imageWidth: layout.width, imageHeight, }; } export function getVisiblePdfThumbnailItems({ layout, scrollTop, viewportHeight, overscanPx, }: { layout: PdfThumbnailLayout; scrollTop: number; viewportHeight: number; overscanPx: number; }) { if (layout.pageCount === 0) return []; const window = getPdfThumbnailPixelWindow({ layout, scrollTop, viewportHeight, overscanPx, }); const firstVisiblePage = findPdfThumbnailPageByOffset(layout, window.top); const lastVisiblePage = findPdfThumbnailPageByOffset(layout, window.bottom); const items: PdfThumbnailLayoutItem[] = []; for ( let pageNumber = firstVisiblePage; pageNumber <= lastVisiblePage; pageNumber += 1 ) { const item = getPdfThumbnailLayoutItem(layout, pageNumber); if (item) items.push(item); } return items; } export function getPdfThumbnailPixelWindow({ layout, scrollTop, viewportHeight, overscanPx, }: { layout: PdfThumbnailLayout; scrollTop: number; viewportHeight: number; overscanPx: number; }): PdfThumbnailPixelWindow { const scrollHeight = normalizeSize(layout.totalHeight, 0); const safeViewportHeight = normalizeSize(viewportHeight, 0); const safeOverscanPx = normalizeSize(overscanPx, 0); const windowHeight = safeViewportHeight + safeOverscanPx * 2; if (windowHeight >= scrollHeight) { return { bottom: scrollHeight, top: 0, }; } const scrollCenter = Math.max(0, finiteNumber(scrollTop)) + safeViewportHeight / 2; let top = scrollCenter - windowHeight / 2; let bottom = top + windowHeight; if (top < 0) { top = 0; bottom = windowHeight; } if (bottom > scrollHeight) { bottom = scrollHeight; top = scrollHeight - windowHeight; } return { bottom: Math.ceil(Math.max(bottom, top)), top: Math.floor(Math.max(0, top)), }; } export function getPdfThumbnailRenderedWindow({ layout, visibleItems, viewportHeight, }: { layout: PdfThumbnailLayout; visibleItems: readonly PdfThumbnailLayoutItem[]; viewportHeight: number; }): PdfThumbnailRenderedWindow | null { if (visibleItems.length === 0 || layout.totalHeight <= 0) return null; const safeViewportHeight = Math.max(1, normalizeSize(viewportHeight, 1)); let renderedTop = layout.totalHeight; let renderedBottom = 0; for (const item of visibleItems) { renderedTop = Math.min(renderedTop, item.top); renderedBottom = Math.max(renderedBottom, item.top + item.height); } renderedTop = clamp(renderedTop, 0, layout.totalHeight); renderedBottom = clamp( Math.max(renderedTop, renderedBottom), renderedTop, layout.totalHeight, ); const height = renderedBottom - renderedTop; return { afterHeight: Math.max(0, layout.totalHeight - renderedBottom), beforeHeight: renderedTop, height, items: visibleItems.map((item) => ({ ...item, windowTop: item.top - renderedTop, })), renderedBottom, renderedTop, stickyInset: -Math.max(0, height - safeViewportHeight), }; } export function findPdfThumbnailPageByOffset( layout: PdfThumbnailLayout, offset: number, ) { const safeOffset = Math.max(0, offset); let low = 1; let high = layout.pageCount; let result = 1; while (low <= high) { const pageNumber = Math.floor((low + high) / 2); const item = getPdfThumbnailLayoutItem(layout, pageNumber); if (!item) break; if (item.top + item.height >= safeOffset) { result = pageNumber; high = pageNumber - 1; } else { low = pageNumber + 1; } } return result; } export function normalizeThumbnailPage( page: number | null | undefined, pageCount: number, ): number | null { return page != null && Number.isInteger(page) && page >= 1 && page <= pageCount ? page : null; } function getThumbnailImageHeight({ width, metric, shape, }: { width: number; metric: PdfThumbnailPageMetric | undefined; shape: PdfThumbnailShape; }) { if (shape === "square") return width; if ( metric && Number.isFinite(metric.width) && Number.isFinite(metric.height) && metric.width > 0 && metric.height > 0 ) { return width * (metric.height / metric.width); } return width * PDF_THUMBNAIL_DEFAULT_ASPECT; } function buildPrefixHeightDeltas({ pageCount, width, shape, estimatedItemHeight, metricByPageNumber, labelAndGapHeight, }: { pageCount: number; width: number; shape: PdfThumbnailShape; estimatedItemHeight: number; metricByPageNumber: ReadonlyMap; labelAndGapHeight: number; }) { let prefixDeltaAfterPage = 0; const prefixHeightDeltas: PdfThumbnailHeightDelta[] = []; for (const [pageNumber, metric] of [...metricByPageNumber.entries()].sort( ([left], [right]) => left - right, )) { if (normalizeThumbnailPage(pageNumber, pageCount) == null) continue; const measuredItemHeight = Math.ceil(getThumbnailImageHeight({ width, metric, shape })) + labelAndGapHeight; const delta = measuredItemHeight - estimatedItemHeight; if (delta === 0) continue; prefixDeltaAfterPage += delta; prefixHeightDeltas.push({ pageNumber, prefixDeltaAfterPage }); } return prefixHeightDeltas; } function getPrefixHeightDeltaBeforePage( layout: PdfThumbnailLayout, pageNumber: number, ) { let low = 0; let high = layout.prefixHeightDeltas.length - 1; let result = 0; while (low <= high) { const mid = Math.floor((low + high) / 2); const delta = layout.prefixHeightDeltas[mid]; if (delta.pageNumber < pageNumber) { result = delta.prefixDeltaAfterPage; low = mid + 1; } else { high = mid - 1; } } return result; } function normalizePageCount(pageCount: number) { return Number.isInteger(pageCount) && pageCount > 0 ? pageCount : 0; } function normalizeWidth(width: number) { return normalizeSize(width, 0); } function normalizeSize(value: number, fallback: number) { return Number.isFinite(value) && value > 0 ? value : fallback; } function finiteNumber(value: number) { return Number.isFinite(value) ? value : 0; } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } 54:T1e40,"use client"; import * as React from "react"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { getPdfPageResource } from "@/lib/pdf-document-resource"; import type { PdfDocumentProxy } from "@/lib/pdf-document-types"; import { normalizeThumbnailPage } from "./pdf-thumbnail-layout"; import { joinEffectKey } from "@/lib/effect-key"; export const PDF_THUMBNAIL_PAGE_METRIC_CONCURRENCY = 4; export interface PdfThumbnailPageMetric { pageNumber: number; width: number; height: number; } export interface PdfThumbnailPageMetrics { pageCount: number; metricByPageNumber: ReadonlyMap; requestPageMetrics: (pageNumbers: Iterable) => void; status: "idle" | "loading"; } interface MetricControllerState { documentKey: unknown; pageCount: number; metricByPageNumber: ReadonlyMap; queuedPageNumbers: readonly number[]; loadingPageNumbers: ReadonlySet; error: unknown; } type MetricAction = | { type: "reset"; documentKey: unknown; pageCount: number } | { type: "enqueue"; documentKey: unknown; pageCount: number; pageNumbers: readonly number[]; } | { type: "start"; documentKey: unknown; pageNumbers: readonly number[] } | { type: "resolve"; documentKey: unknown; metric: PdfThumbnailPageMetric } | { type: "reject"; documentKey: unknown; error: unknown }; export function usePdfThumbnailPageMetrics( doc: PdfDocumentProxy, resetKey: unknown, ): PdfThumbnailPageMetrics { const workerSequenceRef = React.useRef(0); const [state, dispatch] = React.useReducer( metricControllerReducer, undefined, () => createMetricControllerState(resetKey, doc.numPages), ); const visibleState = Object.is(state.documentKey, resetKey) ? state : createMetricControllerState(resetKey, doc.numPages); const status = getMetricStatus(visibleState); const resetEffectKey = joinEffectKey(["reset", doc, resetKey]); useKeyedMountEffect(resetEffectKey, () => { workerSequenceRef.current += 1; dispatch({ type: "reset", documentKey: resetKey, pageCount: doc.numPages, }); }); const requestPageMetrics = React.useCallback( (pageNumbers: Iterable) => { const requestedPageNumbers = Array.from(pageNumbers) .map((pageNumber) => normalizeThumbnailPage(pageNumber, doc.numPages)) .filter((pageNumber): pageNumber is number => pageNumber != null); if (requestedPageNumbers.length === 0) return; dispatch({ type: "enqueue", documentKey: resetKey, pageCount: doc.numPages, pageNumbers: requestedPageNumbers, }); }, [doc.numPages, resetKey], ); const loadEffectKey = joinEffectKey([ "load", doc, resetKey, state.documentKey, state.error, state.loadingPageNumbers, state.queuedPageNumbers, ]); useKeyedMountEffect(loadEffectKey, () => { if (!Object.is(state.documentKey, resetKey)) return; if (state.error) return; const availableSlotCount = PDF_THUMBNAIL_PAGE_METRIC_CONCURRENCY - state.loadingPageNumbers.size; if (availableSlotCount <= 0) return; const startingPageNumbers = state.queuedPageNumbers.slice( 0, availableSlotCount, ); if (startingPageNumbers.length === 0) return; const sequence = workerSequenceRef.current; dispatch({ type: "start", documentKey: resetKey, pageNumbers: startingPageNumbers, }); for (const pageNumber of startingPageNumbers) { void getPdfPageResource(doc, pageNumber, { retainRejected: true }) .then((page) => { if (workerSequenceRef.current !== sequence) return; const viewport = page.getViewport({ scale: 1 }); dispatch({ type: "resolve", documentKey: resetKey, metric: { pageNumber, width: viewport.width, height: viewport.height, }, }); }) .catch((error: unknown) => { if (workerSequenceRef.current !== sequence) return; dispatch({ type: "reject", documentKey: resetKey, error }); }); } }); if (visibleState.error) throw visibleState.error; return { pageCount: visibleState.pageCount, metricByPageNumber: visibleState.metricByPageNumber, requestPageMetrics, status, }; } function metricControllerReducer( state: MetricControllerState, action: MetricAction, ): MetricControllerState { switch (action.type) { case "reset": return createMetricControllerState(action.documentKey, action.pageCount); case "enqueue": return enqueuePageMetrics(state, action); case "start": return startPageMetrics(state, action); case "resolve": return resolvePageMetric(state, action); case "reject": if (!Object.is(state.documentKey, action.documentKey)) return state; return { ...state, queuedPageNumbers: [], loadingPageNumbers: new Set(), error: action.error, }; } } function createMetricControllerState( documentKey: unknown, pageCount: number, ): MetricControllerState { return { documentKey, pageCount, metricByPageNumber: new Map(), queuedPageNumbers: [], loadingPageNumbers: new Set(), error: null, }; } function enqueuePageMetrics( state: MetricControllerState, action: Extract, ): MetricControllerState { const baseState = Object.is(state.documentKey, action.documentKey) ? state : createMetricControllerState(action.documentKey, action.pageCount); const queuedPageNumberSet = new Set(baseState.queuedPageNumbers); const queuedPageNumbers = [...baseState.queuedPageNumbers]; for (const pageNumber of action.pageNumbers) { if (baseState.metricByPageNumber.has(pageNumber)) continue; if (baseState.loadingPageNumbers.has(pageNumber)) continue; if (queuedPageNumberSet.has(pageNumber)) continue; queuedPageNumberSet.add(pageNumber); queuedPageNumbers.push(pageNumber); } if (queuedPageNumbers.length === baseState.queuedPageNumbers.length) { return baseState; } return { ...baseState, queuedPageNumbers, }; } function startPageMetrics( state: MetricControllerState, action: Extract, ): MetricControllerState { if (!Object.is(state.documentKey, action.documentKey)) return state; const startingPageNumberSet = new Set(action.pageNumbers); const queuedPageNumbers = state.queuedPageNumbers.filter( (pageNumber) => !startingPageNumberSet.has(pageNumber), ); const loadingPageNumbers = new Set(state.loadingPageNumbers); for (const pageNumber of action.pageNumbers) { if (state.metricByPageNumber.has(pageNumber)) continue; loadingPageNumbers.add(pageNumber); } return { ...state, queuedPageNumbers, loadingPageNumbers, }; } function resolvePageMetric( state: MetricControllerState, action: Extract, ): MetricControllerState { if (!Object.is(state.documentKey, action.documentKey)) return state; const loadingPageNumbers = new Set(state.loadingPageNumbers); loadingPageNumbers.delete(action.metric.pageNumber); const metricByPageNumber = new Map(state.metricByPageNumber); metricByPageNumber.set(action.metric.pageNumber, action.metric); return { ...state, metricByPageNumber, loadingPageNumbers, }; } function getMetricStatus(state: MetricControllerState): "idle" | "loading" { return state.queuedPageNumbers.length > 0 || state.loadingPageNumbers.size > 0 ? "loading" : "idle"; } 55:Tb91,"use client"; import * as React from "react"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { getVisiblePdfThumbnailItems, type PdfThumbnailLayout, type PdfThumbnailLayoutItem, } from "./pdf-thumbnail-layout"; import { joinEffectKey } from "@/lib/effect-key"; interface PdfThumbnailWindowMetrics { scrollTop: number; viewportHeight: number; } export interface PdfThumbnailWindow { viewportHeight: number; visibleItems: readonly PdfThumbnailLayoutItem[]; totalHeight: number; } export function usePdfThumbnailWindow({ layout, viewportRef, overscanPx, initialViewportHeight, }: { layout: PdfThumbnailLayout; viewportRef: React.RefObject; overscanPx: number; initialViewportHeight: number; }): PdfThumbnailWindow { const [metrics, setMetrics] = React.useState({ scrollTop: 0, viewportHeight: initialViewportHeight, }); const metricsRef = React.useRef(metrics); const setMeasuredMetrics = React.useCallback( (next: PdfThumbnailWindowMetrics) => { const current = metricsRef.current; if ( current.scrollTop === next.scrollTop && current.viewportHeight === next.viewportHeight ) { return; } metricsRef.current = next; setMetrics(next); }, [], ); const viewportEffectKey = joinEffectKey([ "pdf-thumbnail-window", initialViewportHeight, viewportRef, ]); useKeyedMountEffect(viewportEffectKey, () => { const viewport = viewportRef.current; if (!viewport) return; let frame = 0; const read = () => { const scrollTop = Number.isFinite(viewport.scrollTop) && viewport.scrollTop > 0 ? viewport.scrollTop : 0; const viewportHeight = Number.isFinite(viewport.clientHeight) && viewport.clientHeight > 0 ? viewport.clientHeight : initialViewportHeight; setMeasuredMetrics({ scrollTop, viewportHeight }); }; const scheduleRead = () => { if (frame !== 0) return; frame = window.requestAnimationFrame(() => { frame = 0; read(); }); }; const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleRead) : null; read(); observer?.observe(viewport); viewport.addEventListener("scroll", scheduleRead, { passive: true }); return () => { viewport.removeEventListener("scroll", scheduleRead); observer?.disconnect(); if (frame !== 0) window.cancelAnimationFrame(frame); }; }); return React.useMemo( () => ({ viewportHeight: metrics.viewportHeight, visibleItems: getVisiblePdfThumbnailItems({ layout, scrollTop: metrics.scrollTop, viewportHeight: metrics.viewportHeight, overscanPx, }), totalHeight: layout.totalHeight, }), [layout, metrics, overscanPx], ); } 56:T1397,"use client"; import * as React from "react"; import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect"; import { getPdfThumbnailLayoutItem, normalizeThumbnailPage, type PdfThumbnailLayout, } from "./pdf-thumbnail-layout"; import { joinEffectKey } from "@/lib/effect-key"; export const THUMBNAIL_FOLLOW_MARGIN = 24; type ThumbnailFollowSuspension = | { kind: "none" } | { kind: "pointer" } | { kind: "user-scroll" } | { kind: "rail-navigation"; targetPage: number }; interface ThumbnailFollowState { suspension: ThumbnailFollowSuspension; currentPage: number | null; programmaticScrollCount: number; } export function useThumbnailRailFollow({ currentPage, layout, viewportRef, resetKey, }: { currentPage: number | null | undefined; layout: PdfThumbnailLayout; viewportRef: React.RefObject; resetKey: unknown; }) { const stateRef = React.useRef({ suspension: { kind: "none" }, currentPage: null, programmaticScrollCount: 0, }); const scrollPageIntoView = React.useCallback( (page: number, behavior: ScrollBehavior) => { const normalizedPage = normalizeThumbnailPage(page, layout.pageCount); if (normalizedPage == null) return false; const viewport = viewportRef.current; if (!viewport) return false; const item = getPdfThumbnailLayoutItem(layout, normalizedPage); if (!item) return false; const top = item.top - viewport.scrollTop; const bottom = top + item.height; const minTop = THUMBNAIL_FOLLOW_MARGIN; const maxBottom = viewport.clientHeight - THUMBNAIL_FOLLOW_MARGIN; const isAtDocumentStart = item.top <= THUMBNAIL_FOLLOW_MARGIN && viewport.scrollTop <= THUMBNAIL_FOLLOW_MARGIN; if ((top >= minTop || isAtDocumentStart) && bottom <= maxBottom) { return false; } const maxScrollTop = Math.max( 0, layout.totalHeight - viewport.clientHeight, ); const targetTop = Math.min( maxScrollTop, Math.max(0, item.top - viewport.clientHeight / 2 + item.height / 2), ); if (stateRef.current.suspension.kind !== "rail-navigation") { stateRef.current.programmaticScrollCount += 1; } viewport.scrollTo?.({ top: targetTop, behavior }); return true; }, [layout, viewportRef], ); const followNow = React.useCallback(() => { const page = normalizeThumbnailPage(currentPage, layout.pageCount); if (page == null) return; const state = stateRef.current; if (state.suspension.kind !== "none") return; scrollPageIntoView(page, "auto"); }, [currentPage, layout.pageCount, scrollPageIntoView]); useKeyedMountEffect(joinEffectKey(["thumbnail-reset", resetKey]), () => { const state = stateRef.current; state.suspension = { kind: "none" }; state.currentPage = null; state.programmaticScrollCount = 0; }); useKeyedMountEffect( joinEffectKey(["thumbnail-follow", followNow, resetKey]), () => { const page = normalizeThumbnailPage(currentPage, layout.pageCount); const state = stateRef.current; const pageChanged = state.currentPage !== page; state.currentPage = page; if (state.suspension.kind === "rail-navigation") { if (pageChanged || page === state.suspension.targetPage) { state.suspension = { kind: "none" }; followNow(); } return; } if (state.suspension.kind === "user-scroll" && pageChanged) { state.suspension = { kind: "none" }; } followNow(); }, ); const onPointerEnter = React.useCallback(() => { const state = stateRef.current; if ( state.suspension.kind === "user-scroll" || state.suspension.kind === "rail-navigation" ) { return; } state.suspension = { kind: "pointer" }; }, []); const onPointerLeave = React.useCallback(() => { const state = stateRef.current; if (state.suspension.kind !== "pointer") return; state.suspension = { kind: "none" }; followNow(); }, [followNow]); const onPageActivate = React.useCallback( (pageNumber: number) => { const targetPage = normalizeThumbnailPage(pageNumber, layout.pageCount); if (targetPage == null) return; const state = stateRef.current; state.suspension = state.currentPage === targetPage ? { kind: "none" } : { kind: "rail-navigation", targetPage }; scrollPageIntoView(targetPage, "smooth"); }, [layout.pageCount, scrollPageIntoView], ); const onScroll = React.useCallback(() => { const state = stateRef.current; if (state.programmaticScrollCount > 0) { state.programmaticScrollCount -= 1; return; } if (state.suspension.kind === "rail-navigation") return; state.suspension = { kind: "user-scroll" }; }, []); return { onPageActivate, onPointerEnter, onPointerLeave, onScroll, }; } 57:T15c8,"use client"; import * as React from "react"; import type { PdfDocumentProxy } from "@/lib/pdf-document-types"; import { cn } from "@/lib/utils"; import { PdfThumbnailItem } from "./pdf-thumbnail-item"; import { getPdfThumbnailRenderedWindow, normalizeThumbnailPage, type PdfThumbnailLayout, type PdfThumbnailLayoutItem, } from "./pdf-thumbnail-layout"; import type { PdfRenderedPageCache } from "./pdf-viewer-render-cache"; export function getPdfThumbnailItemId(pageNumber: number) { return `pdf-thumbnail-page-${pageNumber}`; } export function PdfThumbnailRailViewport({ doc, documentKey, isRenderingSuspended = false, layout, visibleItems, viewportHeight, currentPage, viewportRef, onSelectPage, onPageActivate, onPointerEnter, onPointerLeave, onScroll, className, renderCache, }: { doc: PdfDocumentProxy; documentKey: string; isRenderingSuspended?: boolean; layout: PdfThumbnailLayout; visibleItems: readonly PdfThumbnailLayoutItem[]; viewportHeight: number; currentPage: number | null | undefined; viewportRef: React.RefObject; onSelectPage?: (pageNumber: number) => void; onPageActivate?: (pageNumber: number) => void; onPointerEnter?: () => void; onPointerLeave?: () => void; onScroll?: () => void; className?: string; renderCache?: PdfRenderedPageCache; }) { const activePage = normalizeThumbnailPage(currentPage, layout.pageCount); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { const page = activePage ?? 1; const nextPage = getKeyboardTargetPage({ key: event.key, page, pageCount: layout.pageCount, }); if (nextPage == null) return; event.preventDefault(); onPageActivate?.(nextPage); onSelectPage?.(nextPage); }, [activePage, layout.pageCount, onPageActivate, onSelectPage], ); const handleSelectPage = React.useCallback( (pageNumber: number) => { onPageActivate?.(pageNumber); onSelectPage?.(pageNumber); }, [onPageActivate, onSelectPage], ); const renderedWindow = React.useMemo( () => getPdfThumbnailRenderedWindow({ layout, visibleItems, viewportHeight, }), [layout, visibleItems, viewportHeight], ); return ( ); } function getKeyboardTargetPage({ key, page, pageCount, }: { key: string; page: number; pageCount: number; }) { switch (key) { case "ArrowUp": return Math.max(1, page - 1); case "ArrowDown": return Math.min(pageCount, page + 1); case "Home": return 1; case "End": return pageCount; default: return null; } } 58:T7ef,"use client"; import * as React from "react"; import type { PdfDocumentProxy } from "@/lib/pdf-document-types"; import { cn } from "@/lib/utils"; import { PdfThumbnailCanvas, PdfThumbnailSkeleton, } from "./pdf-thumbnail-canvas"; import type { PdfThumbnailLayoutItem } from "./pdf-thumbnail-layout"; import type { PdfRenderedPageCache } from "./pdf-viewer-render-cache"; export function PdfThumbnailItem({ doc, documentKey, item, active, isRenderingSuspended = false, itemId, onSelectPage, renderCache, }: { doc: PdfDocumentProxy; documentKey: string; item: PdfThumbnailLayoutItem; active: boolean; isRenderingSuspended?: boolean; itemId: string; onSelectPage?: (pageNumber: number) => void; renderCache?: PdfRenderedPageCache; }) { return ( ); } 59:T14a0,"use client"; import * as React from "react"; import type { PdfDocumentProxy } from "@/lib/pdf-document-types"; import { readPdfPageResource } from "@/lib/pdf-document-resource"; import { getPdfCanvasPixelSize } from "./pdf-viewer-canvas"; import { readPdfRenderedPageCache, writePdfRenderedPageCache, type PdfRenderedPageCache, type PdfRenderedPageSignature, } from "./pdf-viewer-render-cache"; import { toPdfRenderFailedError } from "./pdf-viewer-render-error"; const PDF_THUMBNAIL_MAX_DEVICE_PIXEL_RATIO = 1; export function PdfThumbnailCanvas({ doc, documentKey, isRenderingSuspended = false, pageNumber, renderCache, width, }: { doc: PdfDocumentProxy; documentKey: string; isRenderingSuspended?: boolean; pageNumber: number; renderCache?: PdfRenderedPageCache; width: number; }) { const page = readPdfPageResource(doc, pageNumber); const baseViewport = React.useMemo( () => page.getViewport({ scale: 1 }), [page], ); const viewport = React.useMemo( () => page.getViewport({ scale: width / baseViewport.width }), [baseViewport.width, page, width], ); const dpr = Math.min( (typeof window !== "undefined" ? window.devicePixelRatio : 1) || 1, PDF_THUMBNAIL_MAX_DEVICE_PIXEL_RATIO, ); const [renderError, setRenderError] = React.useState(null); if (renderError) throw renderError; const canvasRef = React.useCallback( (canvas: HTMLCanvasElement | null) => { if (!canvas) return; const context = canvas.getContext("2d"); if (!context) { setRenderError( toPdfRenderFailedError(new Error("Canvas 2D context unavailable.")), ); return; } const renderSignature = { documentKey, pageNumber, scale: width / baseViewport.width, rotation: 0, devicePixelRatio: dpr, viewportWidth: viewport.width, viewportHeight: viewport.height, } satisfies PdfRenderedPageSignature; const canvasWidth = getPdfCanvasPixelSize(viewport.width, dpr); const canvasHeight = getPdfCanvasPixelSize(viewport.height, dpr); const cachedPage = readPdfRenderedPageCache(renderCache, renderSignature); resizeCanvas(canvas, canvasWidth, canvasHeight); if (isRenderingSuspended) { markCanvasRenderStatus(canvas, renderSignature, "suspended"); return; } if (cachedPage) { drawCanvasImage(context, cachedPage.canvas, canvasWidth, canvasHeight); markCanvasRenderStatus(canvas, renderSignature, "rendered", "cache"); return; } markCanvasRenderStatus(canvas, renderSignature, "pending"); let task: ReturnType; try { task = page.render({ canvas, canvasContext: context, viewport, transform: dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : undefined, }); } catch (error) { setRenderError(toPdfRenderFailedError(error)); return; } let isActive = true; let didFinishPdfRender = false; task.promise.then( () => { if (!isActive) return; didFinishPdfRender = true; writePdfRenderedPageCache({ cache: renderCache, rendered: renderSignature, sourceCanvas: canvas, }); markCanvasRenderStatus(canvas, renderSignature, "rendered", "pdfjs"); }, (error) => { if (!isActive) return; didFinishPdfRender = true; markCanvasRenderStatus(canvas, renderSignature, "failed"); setRenderError(toPdfRenderFailedError(error)); }, ); return () => { isActive = false; if (!didFinishPdfRender) { task.cancel(); markCanvasRenderStatus(canvas, renderSignature, "cancelled"); } }; }, [ baseViewport.width, documentKey, dpr, isRenderingSuspended, page, pageNumber, renderCache, viewport, width, ], ); return (