\n \n {renderOverlay ? (\n \n {renderOverlay({\n pageNumber,\n width: displaySize.width,\n height: displaySize.height,\n scale,\n rotation,\n })}\n
\n ) : null}\n \n );\n}, arePdfPagePropsEqual);\n\nconst PdfPageCanvas = React.memo(function PdfPageCanvas({\n documentKey,\n page,\n pageNumber,\n renderScale,\n rotation,\n devicePixelRatio,\n renderCache,\n onRenderTiming,\n}: PdfPageCanvasProps) {\n const renderViewport = React.useMemo(\n () =>\n page.getViewport({\n scale: renderScale,\n rotation: ((page.rotate ?? 0) + rotation) % 360,\n }),\n [page, renderScale, rotation],\n );\n const [renderError, setRenderError] = React.useState(null);\n if (renderError) throw renderError;\n\n const renderedPageRef = React.useRef(null);\n\n const canvasRef = React.useCallback(\n (canvas: HTMLCanvasElement | null) => {\n if (!canvas) return;\n const renderSignature = {\n documentKey,\n pageNumber,\n scale: renderScale,\n rotation,\n devicePixelRatio,\n viewportWidth: renderViewport.width,\n viewportHeight: renderViewport.height,\n } satisfies PdfRenderedPage;\n if (\n renderedPageRef.current &&\n doesRenderedPageSatisfyRequest(renderedPageRef.current, renderSignature)\n ) {\n return;\n }\n\n const startedAt = readNow();\n const reportRenderTiming = (\n status: PdfPageRenderStatus,\n source?: PdfPageRenderTiming[\"source\"],\n ) => {\n onRenderTiming?.({\n pageNumber,\n scale: renderScale,\n rotation,\n devicePixelRatio,\n status,\n source,\n durationMs: Math.max(0, readNow() - startedAt),\n });\n };\n const context = canvas.getContext(\"2d\");\n if (!context) {\n markCanvasRenderStatus(canvas, renderSignature, \"failed\");\n reportRenderTiming(\"failed\");\n setRenderError(\n toPdfRenderFailedError(new Error(\"Canvas 2D context unavailable.\")),\n );\n return;\n }\n\n const canvasWidth = getPdfCanvasPixelSize(\n renderSignature.viewportWidth,\n devicePixelRatio,\n );\n const canvasHeight = getPdfCanvasPixelSize(\n renderSignature.viewportHeight,\n devicePixelRatio,\n );\n const cachedPage = readPdfRenderedPageCache(renderCache, renderSignature);\n if (cachedPage) {\n replaceCanvasImage(\n canvas,\n context,\n cachedPage.canvas,\n canvasWidth,\n canvasHeight,\n );\n renderedPageRef.current = renderSignature;\n markCanvasRenderStatus(canvas, renderSignature, \"rendered\", \"cache\");\n reportRenderTiming(\"rendered\", \"cache\");\n return;\n }\n\n const previewPage = readPdfRenderedPageCachePreview(\n renderCache,\n renderSignature,\n );\n const canKeepRenderedPageVisible =\n renderedPageRef.current !== null &&\n canRenderedPageStayVisibleWhilePending(\n renderedPageRef.current,\n renderSignature,\n );\n if (previewPage && !canKeepRenderedPageVisible) {\n replaceCanvasImage(\n canvas,\n context,\n previewPage.canvas,\n canvasWidth,\n canvasHeight,\n );\n markCanvasRenderStatus(\n canvas,\n renderSignature,\n \"pending\",\n \"cache-preview\",\n );\n } else if (!canKeepRenderedPageVisible) {\n resizeCanvas(canvas, canvasWidth, canvasHeight);\n markCanvasRenderStatus(canvas, renderSignature, \"pending\");\n } else {\n markCanvasRenderStatus(canvas, renderSignature, \"pending\");\n }\n\n const renderCanvas = canvas.ownerDocument.createElement(\"canvas\");\n renderCanvas.width = canvasWidth;\n renderCanvas.height = canvasHeight;\n renderCanvas.style.width = `${renderViewport.width}px`;\n renderCanvas.style.height = `${renderViewport.height}px`;\n const renderContext = renderCanvas.getContext(\"2d\");\n if (!renderContext) {\n markCanvasRenderStatus(canvas, renderSignature, \"failed\");\n reportRenderTiming(\"failed\");\n setRenderError(\n toPdfRenderFailedError(new Error(\"Canvas 2D context unavailable.\")),\n );\n return;\n }\n\n let renderTask: ReturnType;\n try {\n renderTask = page.render({\n canvas: renderCanvas,\n canvasContext: renderContext,\n viewport: renderViewport,\n transform:\n devicePixelRatio !== 1\n ? [devicePixelRatio, 0, 0, devicePixelRatio, 0, 0]\n : undefined,\n });\n } catch (error) {\n markCanvasRenderStatus(canvas, renderSignature, \"failed\");\n reportRenderTiming(\"failed\");\n setRenderError(toPdfRenderFailedError(error));\n return;\n }\n let isActive = true;\n let didFinishPdfRender = false;\n renderTask.promise.then(\n () => {\n if (!isActive) return;\n didFinishPdfRender = true;\n replaceCanvasImage(\n canvas,\n context,\n renderCanvas,\n canvasWidth,\n canvasHeight,\n );\n renderedPageRef.current = renderSignature;\n writePdfRenderedPageCache({\n cache: renderCache,\n rendered: renderSignature,\n sourceCanvas: renderCanvas,\n });\n markCanvasRenderStatus(canvas, renderSignature, \"rendered\", \"pdfjs\");\n reportRenderTiming(\"rendered\", \"pdfjs\");\n },\n (error) => {\n if (!isActive) return;\n didFinishPdfRender = true;\n markCanvasRenderStatus(canvas, renderSignature, \"failed\");\n reportRenderTiming(\"failed\");\n setRenderError(toPdfRenderFailedError(error));\n },\n );\n return () => {\n isActive = false;\n if (!didFinishPdfRender) {\n renderTask.cancel();\n }\n if (!didFinishPdfRender) {\n markCanvasRenderStatus(canvas, renderSignature, \"cancelled\");\n reportRenderTiming(\"cancelled\");\n }\n };\n },\n [\n devicePixelRatio,\n documentKey,\n onRenderTiming,\n page,\n pageNumber,\n renderCache,\n renderScale,\n renderViewport,\n rotation,\n ],\n );\n\n return (\n \n );\n}, arePdfPageCanvasPropsEqual);\n\nfunction arePdfPagePropsEqual(previous: PdfPageProps, next: PdfPageProps) {\n return (\n previous.document === next.document &&\n previous.documentKey === next.documentKey &&\n previous.pageNumber === next.pageNumber &&\n previous.scale === next.scale &&\n previous.renderScale === next.renderScale &&\n previous.isLayoutTransitioning === next.isLayoutTransitioning &&\n previous.rotation === next.rotation &&\n previous.devicePixelRatio === next.devicePixelRatio &&\n previous.renderCache === next.renderCache &&\n previous.renderOverlay === next.renderOverlay &&\n previous.onRenderTiming === next.onRenderTiming &&\n previous.onSize === next.onSize\n );\n}\n\nfunction arePdfPageCanvasPropsEqual(\n previous: PdfPageCanvasProps,\n next: PdfPageCanvasProps,\n) {\n return (\n previous.documentKey === next.documentKey &&\n previous.page === next.page &&\n previous.pageNumber === next.pageNumber &&\n previous.renderScale === next.renderScale &&\n previous.rotation === next.rotation &&\n previous.devicePixelRatio === next.devicePixelRatio &&\n previous.renderCache === next.renderCache &&\n previous.onRenderTiming === next.onRenderTiming\n );\n}\n\nfunction getPdfDisplayViewportSize({\n intrinsicViewport,\n rotation,\n scale,\n}: {\n intrinsicViewport: PdfViewportSize;\n rotation: number;\n scale: number;\n}): PdfViewportSize {\n const isRotated = normalizePdfRotation(rotation) % 180 !== 0;\n return {\n width: Math.round(\n (isRotated ? intrinsicViewport.height : intrinsicViewport.width) * scale,\n ),\n height: Math.round(\n (isRotated ? intrinsicViewport.width : intrinsicViewport.height) * scale,\n ),\n };\n}\n\nfunction normalizePdfRotation(rotation: number) {\n return ((rotation % 360) + 360) % 360;\n}\n\nfunction resizeCanvas(\n canvas: HTMLCanvasElement,\n width: number,\n height: number,\n) {\n if (canvas.width !== width) canvas.width = width;\n if (canvas.height !== height) canvas.height = height;\n}\n\nfunction drawCanvasImage(\n context: CanvasRenderingContext2D,\n image: HTMLCanvasElement,\n width: number,\n height: number,\n) {\n if (typeof context.setTransform === \"function\") {\n context.setTransform(1, 0, 0, 1, 0, 0);\n }\n if (typeof context.drawImage === \"function\") {\n context.drawImage(image, 0, 0, width, height);\n }\n}\n\nfunction replaceCanvasImage(\n canvas: HTMLCanvasElement,\n context: CanvasRenderingContext2D,\n image: HTMLCanvasElement,\n width: number,\n height: number,\n) {\n resizeCanvas(canvas, width, height);\n drawCanvasImage(context, image, width, height);\n}\n\nfunction markCanvasRenderStatus(\n canvas: HTMLCanvasElement,\n rendered: PdfRenderedPage,\n status: \"pending\" | PdfPageRenderStatus,\n source?: PdfPageRenderTiming[\"source\"],\n) {\n canvas.dataset.pdfPageNumber = String(rendered.pageNumber);\n canvas.dataset.pdfRenderStatus = status;\n if (source) {\n canvas.dataset.pdfRenderSource = source;\n } else {\n delete canvas.dataset.pdfRenderSource;\n }\n}\n\nfunction doesRenderedPageSatisfyRequest(\n rendered: PdfRenderedPage,\n requested: PdfRenderedPage,\n) {\n return (\n rendered.documentKey === requested.documentKey &&\n rendered.pageNumber === requested.pageNumber &&\n rendered.rotation === requested.rotation &&\n rendered.scale >= requested.scale &&\n rendered.viewportWidth >= requested.viewportWidth &&\n rendered.viewportHeight >= requested.viewportHeight &&\n hasMatchingPageAspectRatio(rendered, requested) &&\n rendered.devicePixelRatio >= requested.devicePixelRatio\n );\n}\n\nfunction canRenderedPageStayVisibleWhilePending(\n rendered: PdfRenderedPage,\n requested: PdfRenderedPage,\n) {\n return (\n rendered.documentKey === requested.documentKey &&\n rendered.pageNumber === requested.pageNumber &&\n rendered.rotation === requested.rotation &&\n hasMatchingPageAspectRatio(rendered, requested)\n );\n}\n\nfunction hasMatchingPageAspectRatio(\n rendered: PdfRenderedPage,\n requested: PdfRenderedPage,\n) {\n const renderedRatio = rendered.viewportWidth / rendered.viewportHeight;\n const requestedRatio = requested.viewportWidth / requested.viewportHeight;\n return Math.abs(renderedRatio - requestedRatio) < 0.0001;\n}\n\nfunction readNow() {\n return typeof performance !== \"undefined\" ? performance.now() : Date.now();\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-viewer-page.tsx"
},
{
"path": "registry/new-york-v4/ui/pdf-viewer-canvas.ts",
"content": "export function getPdfCanvasPixelSize(\n cssSize: number,\n devicePixelRatio: number,\n) {\n if (\n !Number.isFinite(cssSize) ||\n !Number.isFinite(devicePixelRatio) ||\n cssSize <= 0 ||\n devicePixelRatio <= 0\n ) {\n return 1;\n }\n return Math.max(1, Math.floor(cssSize * devicePixelRatio));\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-viewer-canvas.ts"
},
{
"path": "registry/new-york-v4/ui/pdf-viewer-render-error.ts",
"content": "import { ViewerFormatError } from \"@/lib/viewer-errors\";\n\nexport function toPdfRenderFailedError(error: unknown) {\n return new ViewerFormatError({\n format: \"pdf\",\n kind: \"render_failed\",\n message: \"Failed to render PDF page.\",\n cause: error,\n });\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-viewer-render-error.ts"
},
{
"path": "registry/new-york-v4/ui/pdf-viewer-states.tsx",
"content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { ViewerControlsSkeleton } from \"@/components/ui/viewer-controls\";\nimport type { PdfPageSize } from \"./pdf-viewer-types\";\n\nconst DEFAULT_PDF_FALLBACK_PAGE_SIZE: PdfPageSize = {\n width: 8.5,\n height: 11,\n};\n\nexport function PdfViewerFallback({\n className,\n bare = false,\n controls = true,\n fallbackPageSize,\n}: {\n className?: string;\n bare?: boolean;\n controls?: boolean;\n fallbackPageSize?: PdfPageSize;\n}) {\n return (\n \n {controls ? (\n \n ) : null}\n \n \n );\n}\n\nexport function PageSkeleton() {\n return (\n \n );\n}\n\nfunction PageAspectSkeleton({ pageSize }: { pageSize?: PdfPageSize }) {\n const resolvedPageSize =\n pageSize &&\n Number.isFinite(pageSize.width) &&\n pageSize.width > 0 &&\n Number.isFinite(pageSize.height) &&\n pageSize.height > 0\n ? pageSize\n : DEFAULT_PDF_FALLBACK_PAGE_SIZE;\n\n return (\n \n );\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-viewer-states.tsx"
},
{
"path": "registry/new-york-v4/ui/pdf-viewer-thumbnails.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { clearPdfDocumentResource } from \"@/lib/pdf-document-resource\";\nimport { cn } from \"@/lib/utils\";\nimport type { ViewerResource } from \"@/lib/viewer-resource\";\nimport { Spinner } from \"@/components/ui/spinner\";\n\nimport {\n buildPdfThumbnailLayout,\n PDF_THUMBNAIL_INITIAL_VIEWPORT_HEIGHT,\n PDF_THUMBNAIL_OVERSCAN_PX,\n type PdfThumbnailShape,\n} from \"./pdf-thumbnail-layout\";\nimport {\n useOptionalFileViewerSidebarMotion,\n type FileViewerSidebarMotion,\n} from \"./file-viewer-renderer-frame\";\nimport { PdfThumbnailRailViewport } from \"./pdf-thumbnail-rail\";\nimport { usePdfViewerThumbnails } from \"./pdf-viewer-context\";\nimport { useIsClient } from \"./use-is-client\";\nimport { usePdfThumbnailDocument } from \"./use-pdf-thumbnail-document\";\nimport { usePdfThumbnailPageMetrics } from \"./use-pdf-thumbnail-page-metrics\";\nimport { usePdfThumbnailWindow } from \"./use-pdf-thumbnail-window\";\nimport { useThumbnailRailFollow } from \"./use-thumbnail-rail-follow\";\nimport { usePdfRenderedPageCache } from \"./pdf-viewer-render-cache\";\nimport { ViewerErrorBoundary } from \"./viewer-error\";\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nconst PDF_THUMBNAIL_RENDER_RESUME_DELAY_MS = 1400;\nconst PDF_THUMBNAIL_CLOSED_WARM_DELAY_MS = 2200;\n\nexport interface PdfViewerThumbnailsProps {\n /** Thumbnail image width in CSS pixels. The sidebar shell owns rail width. */\n thumbnailWidth?: number;\n /** Preserve page aspect or crop each page preview into a square frame. */\n thumbnailShape?: PdfThumbnailShape;\n className?: string;\n}\n\nexport interface PdfThumbnailRailProps {\n /** Same resource object passed to PdfResourceContent. */\n resource: ViewerResource;\n /** 1-based current page; its thumbnail is highlighted. */\n currentPage?: number | null;\n /** Click a thumbnail to jump the document to that page. */\n onSelectPage?: (page: number) => void;\n /** Thumbnail image width in CSS pixels. The sidebar shell owns rail width. */\n thumbnailWidth?: number;\n /** Preserve page aspect or crop each page preview into a square frame. */\n thumbnailShape?: PdfThumbnailShape;\n className?: string;\n}\n\nexport function PdfViewerThumbnails({\n className,\n thumbnailShape,\n thumbnailWidth,\n}: PdfViewerThumbnailsProps) {\n const thumbnails = usePdfViewerThumbnails();\n const sidebarMotion = useOptionalFileViewerSidebarMotion();\n const isRenderingSuspended = usePdfThumbnailRenderSuspension(sidebarMotion);\n\n return (\n \n );\n}\n\nexport function PdfThumbnailRail({\n className,\n currentPage,\n onSelectPage,\n resource,\n thumbnailShape,\n thumbnailWidth,\n}: PdfThumbnailRailProps) {\n return (\n \n );\n}\n\nfunction PdfThumbnailRailShell({\n className,\n currentPage,\n isRenderingSuspended,\n onSelectPage,\n resource,\n thumbnailShape,\n thumbnailWidth,\n}: PdfThumbnailRailProps & {\n isRenderingSuspended: boolean;\n}) {\n const isClient = useIsClient();\n\n if (!isClient) {\n return ;\n }\n\n return (\n clearPdfDocumentResource(resource.content)}\n resetKey={resource.keys.resource}\n sourceKind={resource.sourceKind}\n variant=\"inline\"\n >\n }>\n \n \n \n );\n}\n\nfunction PdfThumbnailRailInner({\n resource,\n currentPage,\n isRenderingSuspended,\n onSelectPage,\n thumbnailShape = \"page\",\n thumbnailWidth = 120,\n className,\n}: PdfThumbnailRailProps & {\n isRenderingSuspended: boolean;\n}) {\n const doc = usePdfThumbnailDocument(resource);\n const renderCache = usePdfRenderedPageCache(doc);\n const pageMetrics = usePdfThumbnailPageMetrics(doc, doc);\n const { metricByPageNumber, pageCount, requestPageMetrics } = pageMetrics;\n const viewportRef = React.useRef(null);\n const activeCurrentPage = isRenderingSuspended ? null : currentPage;\n\n const layout = React.useMemo(\n () =>\n buildPdfThumbnailLayout({\n pageCount,\n width: thumbnailWidth,\n shape: thumbnailShape,\n metricByPageNumber,\n }),\n [metricByPageNumber, pageCount, thumbnailShape, thumbnailWidth],\n );\n const thumbnailWindow = usePdfThumbnailWindow({\n layout,\n viewportRef,\n overscanPx: PDF_THUMBNAIL_OVERSCAN_PX,\n initialViewportHeight: PDF_THUMBNAIL_INITIAL_VIEWPORT_HEIGHT,\n });\n const follow = useThumbnailRailFollow({\n currentPage: activeCurrentPage,\n layout,\n viewportRef,\n resetKey: doc,\n });\n useKeyedMountEffect(\n joinEffectKey([\n activeCurrentPage,\n isRenderingSuspended,\n layout.pageCount,\n requestPageMetrics,\n thumbnailWindow.visibleItems,\n ]),\n () => {\n if (isRenderingSuspended) return;\n requestPageMetrics(\n getRequestedThumbnailMetricPages({\n currentPage: activeCurrentPage,\n pageCount: layout.pageCount,\n visibleItems: thumbnailWindow.visibleItems,\n }),\n );\n },\n );\n\n return (\n \n );\n}\n\nfunction usePdfThumbnailRenderSuspension(\n sidebarMotion: FileViewerSidebarMotion | null,\n) {\n const isMotionManaged = sidebarMotion?.isMotionManaged === true;\n const isSidebarOpen = sidebarMotion?.isSidebarOpen === true;\n const isSidebarInteractive = sidebarMotion?.isSidebarInteractive === true;\n const isSidebarTransitioning = sidebarMotion?.isSidebarTransitioning === true;\n const [isOpenSettling, setIsOpenSettling] = React.useState(false);\n const [isClosedWarmReleased, setIsClosedWarmReleased] = React.useState(false);\n\n useKeyedMountEffect(\n joinEffectKey([\n isMotionManaged,\n isOpenSettling,\n isSidebarInteractive,\n isSidebarOpen,\n isSidebarTransitioning,\n ]),\n () => {\n if (!isMotionManaged) {\n setIsOpenSettling(false);\n setIsClosedWarmReleased(false);\n return;\n }\n\n if (!isSidebarOpen) {\n setIsOpenSettling(false);\n setIsClosedWarmReleased(false);\n if (isSidebarTransitioning) return;\n\n const timer = window.setTimeout(() => {\n setIsClosedWarmReleased(true);\n }, PDF_THUMBNAIL_CLOSED_WARM_DELAY_MS);\n\n return () => window.clearTimeout(timer);\n }\n\n setIsClosedWarmReleased(false);\n\n if (isSidebarTransitioning || !isSidebarInteractive) {\n setIsOpenSettling(true);\n return;\n }\n\n if (!isOpenSettling) return;\n\n const timer = window.setTimeout(() => {\n setIsOpenSettling(false);\n }, PDF_THUMBNAIL_RENDER_RESUME_DELAY_MS);\n\n return () => window.clearTimeout(timer);\n },\n );\n\n if (!isMotionManaged) return false;\n if (!isSidebarOpen) return !isClosedWarmReleased;\n if (isSidebarTransitioning || !isSidebarInteractive) return true;\n return isOpenSettling;\n}\n\nfunction getRequestedThumbnailMetricPages({\n currentPage,\n pageCount,\n visibleItems,\n}: {\n currentPage: number | null | undefined;\n pageCount: number;\n visibleItems: readonly { pageNumber: number }[];\n}) {\n const pageNumbers = new Set();\n for (const item of visibleItems) pageNumbers.add(item.pageNumber);\n if (\n currentPage != null &&\n Number.isInteger(currentPage) &&\n currentPage >= 1 &&\n currentPage <= pageCount\n ) {\n pageNumbers.add(currentPage);\n }\n\n return pageNumbers;\n}\n\nfunction ThumbnailsFallback({ className }: { className?: string }) {\n return (\n \n \n \n );\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-viewer-thumbnails.tsx"
},
{
"path": "registry/new-york-v4/ui/pdf-thumbnail-layout.ts",
"content": "export const PDF_THUMBNAIL_OVERSCAN_PX = 1000;\nexport const PDF_THUMBNAIL_INITIAL_VIEWPORT_HEIGHT = 680;\nexport const PDF_THUMBNAIL_DEFAULT_ASPECT = 4 / 3;\nexport const PDF_THUMBNAIL_LABEL_AND_GAP_HEIGHT = 22;\n\nexport type PdfThumbnailShape = \"page\" | \"square\";\n\nexport interface PdfThumbnailPageMetric {\n pageNumber: number;\n width: number;\n height: number;\n}\n\nexport interface PdfThumbnailLayoutItem {\n pageNumber: number;\n pageIndex: number;\n top: number;\n height: number;\n imageWidth: number;\n imageHeight: number;\n}\n\nexport interface PdfThumbnailLayout {\n pageCount: number;\n width: number;\n shape: PdfThumbnailShape;\n estimatedImageHeight: number;\n estimatedItemHeight: number;\n labelAndGapHeight: number;\n metricByPageNumber: ReadonlyMap;\n prefixHeightDeltas: readonly PdfThumbnailHeightDelta[];\n totalHeight: number;\n}\n\nexport interface PdfThumbnailRenderedWindowItem\n extends PdfThumbnailLayoutItem {\n windowTop: number;\n}\n\nexport interface PdfThumbnailRenderedWindow {\n afterHeight: number;\n beforeHeight: number;\n height: number;\n items: readonly PdfThumbnailRenderedWindowItem[];\n renderedBottom: number;\n renderedTop: number;\n stickyInset: number;\n}\n\nexport interface PdfThumbnailPixelWindow {\n bottom: number;\n top: number;\n}\n\ninterface PdfThumbnailHeightDelta {\n pageNumber: number;\n prefixDeltaAfterPage: number;\n}\n\nexport function buildPdfThumbnailLayout({\n pageCount,\n width,\n metricByPageNumber,\n labelAndGapHeight = PDF_THUMBNAIL_LABEL_AND_GAP_HEIGHT,\n shape = \"page\",\n}: {\n pageCount: number;\n width: number;\n metricByPageNumber?: ReadonlyMap;\n labelAndGapHeight?: number;\n shape?: PdfThumbnailShape;\n}): PdfThumbnailLayout {\n const safePageCount = normalizePageCount(pageCount);\n const safeWidth = normalizeWidth(width);\n const safeLabelAndGapHeight = normalizeSize(labelAndGapHeight, 0);\n const safeMetricByPageNumber = metricByPageNumber ?? new Map();\n const estimatedImageHeight = getThumbnailImageHeight({\n width: safeWidth,\n metric: safeMetricByPageNumber.get(1),\n shape,\n });\n const estimatedItemHeight =\n Math.ceil(estimatedImageHeight) + safeLabelAndGapHeight;\n const prefixHeightDeltas = buildPrefixHeightDeltas({\n pageCount: safePageCount,\n width: safeWidth,\n shape,\n estimatedItemHeight,\n metricByPageNumber: safeMetricByPageNumber,\n labelAndGapHeight: safeLabelAndGapHeight,\n });\n const totalHeight =\n safePageCount * estimatedItemHeight +\n (prefixHeightDeltas.at(-1)?.prefixDeltaAfterPage ?? 0);\n\n return {\n pageCount: safePageCount,\n width: safeWidth,\n shape,\n estimatedImageHeight,\n estimatedItemHeight,\n labelAndGapHeight: safeLabelAndGapHeight,\n metricByPageNumber: safeMetricByPageNumber,\n prefixHeightDeltas,\n totalHeight,\n };\n}\n\nexport function getPdfThumbnailLayoutItem(\n layout: PdfThumbnailLayout,\n pageNumber: number,\n): PdfThumbnailLayoutItem | null {\n const normalizedPage = normalizeThumbnailPage(pageNumber, layout.pageCount);\n if (normalizedPage == null) return null;\n\n const metric = layout.metricByPageNumber.get(normalizedPage);\n const imageHeight = getThumbnailImageHeight({\n width: layout.width,\n metric,\n shape: layout.shape,\n });\n const height = Math.ceil(imageHeight) + layout.labelAndGapHeight;\n\n return {\n pageNumber: normalizedPage,\n pageIndex: normalizedPage - 1,\n top:\n (normalizedPage - 1) * layout.estimatedItemHeight +\n getPrefixHeightDeltaBeforePage(layout, normalizedPage),\n height,\n imageWidth: layout.width,\n imageHeight,\n };\n}\n\nexport function getVisiblePdfThumbnailItems({\n layout,\n scrollTop,\n viewportHeight,\n overscanPx,\n}: {\n layout: PdfThumbnailLayout;\n scrollTop: number;\n viewportHeight: number;\n overscanPx: number;\n}) {\n if (layout.pageCount === 0) return [];\n\n const window = getPdfThumbnailPixelWindow({\n layout,\n scrollTop,\n viewportHeight,\n overscanPx,\n });\n const firstVisiblePage = findPdfThumbnailPageByOffset(layout, window.top);\n const lastVisiblePage = findPdfThumbnailPageByOffset(layout, window.bottom);\n const items: PdfThumbnailLayoutItem[] = [];\n\n for (\n let pageNumber = firstVisiblePage;\n pageNumber <= lastVisiblePage;\n pageNumber += 1\n ) {\n const item = getPdfThumbnailLayoutItem(layout, pageNumber);\n if (item) items.push(item);\n }\n\n return items;\n}\n\nexport function getPdfThumbnailPixelWindow({\n layout,\n scrollTop,\n viewportHeight,\n overscanPx,\n}: {\n layout: PdfThumbnailLayout;\n scrollTop: number;\n viewportHeight: number;\n overscanPx: number;\n}): PdfThumbnailPixelWindow {\n const scrollHeight = normalizeSize(layout.totalHeight, 0);\n const safeViewportHeight = normalizeSize(viewportHeight, 0);\n const safeOverscanPx = normalizeSize(overscanPx, 0);\n const windowHeight = safeViewportHeight + safeOverscanPx * 2;\n\n if (windowHeight >= scrollHeight) {\n return {\n bottom: scrollHeight,\n top: 0,\n };\n }\n\n const scrollCenter =\n Math.max(0, finiteNumber(scrollTop)) + safeViewportHeight / 2;\n let top = scrollCenter - windowHeight / 2;\n let bottom = top + windowHeight;\n\n if (top < 0) {\n top = 0;\n bottom = windowHeight;\n }\n if (bottom > scrollHeight) {\n bottom = scrollHeight;\n top = scrollHeight - windowHeight;\n }\n\n return {\n bottom: Math.ceil(Math.max(bottom, top)),\n top: Math.floor(Math.max(0, top)),\n };\n}\n\nexport function getPdfThumbnailRenderedWindow({\n layout,\n visibleItems,\n viewportHeight,\n}: {\n layout: PdfThumbnailLayout;\n visibleItems: readonly PdfThumbnailLayoutItem[];\n viewportHeight: number;\n}): PdfThumbnailRenderedWindow | null {\n if (visibleItems.length === 0 || layout.totalHeight <= 0) return null;\n\n const safeViewportHeight = Math.max(1, normalizeSize(viewportHeight, 1));\n let renderedTop = layout.totalHeight;\n let renderedBottom = 0;\n\n for (const item of visibleItems) {\n renderedTop = Math.min(renderedTop, item.top);\n renderedBottom = Math.max(renderedBottom, item.top + item.height);\n }\n\n renderedTop = clamp(renderedTop, 0, layout.totalHeight);\n renderedBottom = clamp(\n Math.max(renderedTop, renderedBottom),\n renderedTop,\n layout.totalHeight,\n );\n\n const height = renderedBottom - renderedTop;\n\n return {\n afterHeight: Math.max(0, layout.totalHeight - renderedBottom),\n beforeHeight: renderedTop,\n height,\n items: visibleItems.map((item) => ({\n ...item,\n windowTop: item.top - renderedTop,\n })),\n renderedBottom,\n renderedTop,\n stickyInset: -Math.max(0, height - safeViewportHeight),\n };\n}\n\nexport function findPdfThumbnailPageByOffset(\n layout: PdfThumbnailLayout,\n offset: number,\n) {\n const safeOffset = Math.max(0, offset);\n let low = 1;\n let high = layout.pageCount;\n let result = 1;\n\n while (low <= high) {\n const pageNumber = Math.floor((low + high) / 2);\n const item = getPdfThumbnailLayoutItem(layout, pageNumber);\n if (!item) break;\n\n if (item.top + item.height >= safeOffset) {\n result = pageNumber;\n high = pageNumber - 1;\n } else {\n low = pageNumber + 1;\n }\n }\n\n return result;\n}\n\nexport function normalizeThumbnailPage(\n page: number | null | undefined,\n pageCount: number,\n): number | null {\n return page != null &&\n Number.isInteger(page) &&\n page >= 1 &&\n page <= pageCount\n ? page\n : null;\n}\n\nfunction getThumbnailImageHeight({\n width,\n metric,\n shape,\n}: {\n width: number;\n metric: PdfThumbnailPageMetric | undefined;\n shape: PdfThumbnailShape;\n}) {\n if (shape === \"square\") return width;\n\n if (\n metric &&\n Number.isFinite(metric.width) &&\n Number.isFinite(metric.height) &&\n metric.width > 0 &&\n metric.height > 0\n ) {\n return width * (metric.height / metric.width);\n }\n\n return width * PDF_THUMBNAIL_DEFAULT_ASPECT;\n}\n\nfunction buildPrefixHeightDeltas({\n pageCount,\n width,\n shape,\n estimatedItemHeight,\n metricByPageNumber,\n labelAndGapHeight,\n}: {\n pageCount: number;\n width: number;\n shape: PdfThumbnailShape;\n estimatedItemHeight: number;\n metricByPageNumber: ReadonlyMap;\n labelAndGapHeight: number;\n}) {\n let prefixDeltaAfterPage = 0;\n const prefixHeightDeltas: PdfThumbnailHeightDelta[] = [];\n\n for (const [pageNumber, metric] of [...metricByPageNumber.entries()].sort(\n ([left], [right]) => left - right,\n )) {\n if (normalizeThumbnailPage(pageNumber, pageCount) == null) continue;\n\n const measuredItemHeight =\n Math.ceil(getThumbnailImageHeight({ width, metric, shape })) +\n labelAndGapHeight;\n const delta = measuredItemHeight - estimatedItemHeight;\n if (delta === 0) continue;\n\n prefixDeltaAfterPage += delta;\n prefixHeightDeltas.push({ pageNumber, prefixDeltaAfterPage });\n }\n\n return prefixHeightDeltas;\n}\n\nfunction getPrefixHeightDeltaBeforePage(\n layout: PdfThumbnailLayout,\n pageNumber: number,\n) {\n let low = 0;\n let high = layout.prefixHeightDeltas.length - 1;\n let result = 0;\n\n while (low <= high) {\n const mid = Math.floor((low + high) / 2);\n const delta = layout.prefixHeightDeltas[mid];\n\n if (delta.pageNumber < pageNumber) {\n result = delta.prefixDeltaAfterPage;\n low = mid + 1;\n } else {\n high = mid - 1;\n }\n }\n\n return result;\n}\n\nfunction normalizePageCount(pageCount: number) {\n return Number.isInteger(pageCount) && pageCount > 0 ? pageCount : 0;\n}\n\nfunction normalizeWidth(width: number) {\n return normalizeSize(width, 0);\n}\n\nfunction normalizeSize(value: number, fallback: number) {\n return Number.isFinite(value) && value > 0 ? value : fallback;\n}\n\nfunction finiteNumber(value: number) {\n return Number.isFinite(value) ? value : 0;\n}\n\nfunction clamp(value: number, min: number, max: number) {\n return Math.min(max, Math.max(min, value));\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-thumbnail-layout.ts"
},
{
"path": "registry/new-york-v4/ui/use-pdf-thumbnail-document.ts",
"content": "\"use client\";\n\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\nimport {\n readPdfDocumentResource,\n releasePdfDocumentResource,\n retainPdfDocumentResource,\n} from \"@/lib/pdf-document-resource\";\nimport type { ViewerResource } from \"@/lib/viewer-resource\";\n\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nexport function usePdfThumbnailDocument(resource: ViewerResource) {\n const content = resource.content;\n const doc = readPdfDocumentResource(content);\n\n const retainEffectKey = joinEffectKey([\n \"pdf-thumbnail-document\",\n content.sourceKind,\n content.key,\n doc,\n ]);\n useKeyedMountEffect(retainEffectKey, () => {\n retainPdfDocumentResource(content, doc);\n return () => releasePdfDocumentResource(content, doc);\n });\n\n return doc;\n}\n",
"type": "registry:ui",
"target": "@ui/use-pdf-thumbnail-document.ts"
},
{
"path": "registry/new-york-v4/ui/use-pdf-thumbnail-page-metrics.ts",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\nimport { getPdfPageResource } from \"@/lib/pdf-document-resource\";\nimport type { PdfDocumentProxy } from \"@/lib/pdf-document-types\";\n\nimport { normalizeThumbnailPage } from \"./pdf-thumbnail-layout\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nexport const PDF_THUMBNAIL_PAGE_METRIC_CONCURRENCY = 4;\n\nexport interface PdfThumbnailPageMetric {\n pageNumber: number;\n width: number;\n height: number;\n}\n\nexport interface PdfThumbnailPageMetrics {\n pageCount: number;\n metricByPageNumber: ReadonlyMap;\n requestPageMetrics: (pageNumbers: Iterable) => void;\n status: \"idle\" | \"loading\";\n}\n\ninterface MetricControllerState {\n documentKey: unknown;\n pageCount: number;\n metricByPageNumber: ReadonlyMap;\n queuedPageNumbers: readonly number[];\n loadingPageNumbers: ReadonlySet;\n error: unknown;\n}\n\ntype MetricAction =\n | { type: \"reset\"; documentKey: unknown; pageCount: number }\n | {\n type: \"enqueue\";\n documentKey: unknown;\n pageCount: number;\n pageNumbers: readonly number[];\n }\n | { type: \"start\"; documentKey: unknown; pageNumbers: readonly number[] }\n | { type: \"resolve\"; documentKey: unknown; metric: PdfThumbnailPageMetric }\n | { type: \"reject\"; documentKey: unknown; error: unknown };\n\nexport function usePdfThumbnailPageMetrics(\n doc: PdfDocumentProxy,\n resetKey: unknown,\n): PdfThumbnailPageMetrics {\n const workerSequenceRef = React.useRef(0);\n const [state, dispatch] = React.useReducer(\n metricControllerReducer,\n undefined,\n () => createMetricControllerState(resetKey, doc.numPages),\n );\n const visibleState = Object.is(state.documentKey, resetKey)\n ? state\n : createMetricControllerState(resetKey, doc.numPages);\n const status = getMetricStatus(visibleState);\n\n const resetEffectKey = joinEffectKey([\"reset\", doc, resetKey]);\n useKeyedMountEffect(resetEffectKey, () => {\n workerSequenceRef.current += 1;\n dispatch({\n type: \"reset\",\n documentKey: resetKey,\n pageCount: doc.numPages,\n });\n });\n\n const requestPageMetrics = React.useCallback(\n (pageNumbers: Iterable) => {\n const requestedPageNumbers = Array.from(pageNumbers)\n .map((pageNumber) => normalizeThumbnailPage(pageNumber, doc.numPages))\n .filter((pageNumber): pageNumber is number => pageNumber != null);\n\n if (requestedPageNumbers.length === 0) return;\n\n dispatch({\n type: \"enqueue\",\n documentKey: resetKey,\n pageCount: doc.numPages,\n pageNumbers: requestedPageNumbers,\n });\n },\n [doc.numPages, resetKey],\n );\n\n const loadEffectKey = joinEffectKey([\n \"load\",\n doc,\n resetKey,\n state.documentKey,\n state.error,\n state.loadingPageNumbers,\n state.queuedPageNumbers,\n ]);\n useKeyedMountEffect(loadEffectKey, () => {\n if (!Object.is(state.documentKey, resetKey)) return;\n if (state.error) return;\n\n const availableSlotCount =\n PDF_THUMBNAIL_PAGE_METRIC_CONCURRENCY - state.loadingPageNumbers.size;\n if (availableSlotCount <= 0) return;\n\n const startingPageNumbers = state.queuedPageNumbers.slice(\n 0,\n availableSlotCount,\n );\n if (startingPageNumbers.length === 0) return;\n\n const sequence = workerSequenceRef.current;\n dispatch({\n type: \"start\",\n documentKey: resetKey,\n pageNumbers: startingPageNumbers,\n });\n\n for (const pageNumber of startingPageNumbers) {\n void getPdfPageResource(doc, pageNumber, { retainRejected: true })\n .then((page) => {\n if (workerSequenceRef.current !== sequence) return;\n\n const viewport = page.getViewport({ scale: 1 });\n dispatch({\n type: \"resolve\",\n documentKey: resetKey,\n metric: {\n pageNumber,\n width: viewport.width,\n height: viewport.height,\n },\n });\n })\n .catch((error: unknown) => {\n if (workerSequenceRef.current !== sequence) return;\n dispatch({ type: \"reject\", documentKey: resetKey, error });\n });\n }\n });\n\n if (visibleState.error) throw visibleState.error;\n\n return {\n pageCount: visibleState.pageCount,\n metricByPageNumber: visibleState.metricByPageNumber,\n requestPageMetrics,\n status,\n };\n}\n\nfunction metricControllerReducer(\n state: MetricControllerState,\n action: MetricAction,\n): MetricControllerState {\n switch (action.type) {\n case \"reset\":\n return createMetricControllerState(action.documentKey, action.pageCount);\n case \"enqueue\":\n return enqueuePageMetrics(state, action);\n case \"start\":\n return startPageMetrics(state, action);\n case \"resolve\":\n return resolvePageMetric(state, action);\n case \"reject\":\n if (!Object.is(state.documentKey, action.documentKey)) return state;\n return {\n ...state,\n queuedPageNumbers: [],\n loadingPageNumbers: new Set(),\n error: action.error,\n };\n }\n}\n\nfunction createMetricControllerState(\n documentKey: unknown,\n pageCount: number,\n): MetricControllerState {\n return {\n documentKey,\n pageCount,\n metricByPageNumber: new Map(),\n queuedPageNumbers: [],\n loadingPageNumbers: new Set(),\n error: null,\n };\n}\n\nfunction enqueuePageMetrics(\n state: MetricControllerState,\n action: Extract,\n): MetricControllerState {\n const baseState = Object.is(state.documentKey, action.documentKey)\n ? state\n : createMetricControllerState(action.documentKey, action.pageCount);\n const queuedPageNumberSet = new Set(baseState.queuedPageNumbers);\n const queuedPageNumbers = [...baseState.queuedPageNumbers];\n\n for (const pageNumber of action.pageNumbers) {\n if (baseState.metricByPageNumber.has(pageNumber)) continue;\n if (baseState.loadingPageNumbers.has(pageNumber)) continue;\n if (queuedPageNumberSet.has(pageNumber)) continue;\n\n queuedPageNumberSet.add(pageNumber);\n queuedPageNumbers.push(pageNumber);\n }\n\n if (queuedPageNumbers.length === baseState.queuedPageNumbers.length) {\n return baseState;\n }\n\n return {\n ...baseState,\n queuedPageNumbers,\n };\n}\n\nfunction startPageMetrics(\n state: MetricControllerState,\n action: Extract,\n): MetricControllerState {\n if (!Object.is(state.documentKey, action.documentKey)) return state;\n\n const startingPageNumberSet = new Set(action.pageNumbers);\n const queuedPageNumbers = state.queuedPageNumbers.filter(\n (pageNumber) => !startingPageNumberSet.has(pageNumber),\n );\n const loadingPageNumbers = new Set(state.loadingPageNumbers);\n\n for (const pageNumber of action.pageNumbers) {\n if (state.metricByPageNumber.has(pageNumber)) continue;\n loadingPageNumbers.add(pageNumber);\n }\n\n return {\n ...state,\n queuedPageNumbers,\n loadingPageNumbers,\n };\n}\n\nfunction resolvePageMetric(\n state: MetricControllerState,\n action: Extract,\n): MetricControllerState {\n if (!Object.is(state.documentKey, action.documentKey)) return state;\n\n const loadingPageNumbers = new Set(state.loadingPageNumbers);\n loadingPageNumbers.delete(action.metric.pageNumber);\n\n const metricByPageNumber = new Map(state.metricByPageNumber);\n metricByPageNumber.set(action.metric.pageNumber, action.metric);\n\n return {\n ...state,\n metricByPageNumber,\n loadingPageNumbers,\n };\n}\n\nfunction getMetricStatus(state: MetricControllerState): \"idle\" | \"loading\" {\n return state.queuedPageNumbers.length > 0 || state.loadingPageNumbers.size > 0\n ? \"loading\"\n : \"idle\";\n}\n",
"type": "registry:ui",
"target": "@ui/use-pdf-thumbnail-page-metrics.ts"
},
{
"path": "registry/new-york-v4/ui/use-pdf-thumbnail-window.ts",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\n\nimport {\n getVisiblePdfThumbnailItems,\n type PdfThumbnailLayout,\n type PdfThumbnailLayoutItem,\n} from \"./pdf-thumbnail-layout\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\ninterface PdfThumbnailWindowMetrics {\n scrollTop: number;\n viewportHeight: number;\n}\n\nexport interface PdfThumbnailWindow {\n viewportHeight: number;\n visibleItems: readonly PdfThumbnailLayoutItem[];\n totalHeight: number;\n}\n\nexport function usePdfThumbnailWindow({\n layout,\n viewportRef,\n overscanPx,\n initialViewportHeight,\n}: {\n layout: PdfThumbnailLayout;\n viewportRef: React.RefObject;\n overscanPx: number;\n initialViewportHeight: number;\n}): PdfThumbnailWindow {\n const [metrics, setMetrics] = React.useState({\n scrollTop: 0,\n viewportHeight: initialViewportHeight,\n });\n const metricsRef = React.useRef(metrics);\n\n const setMeasuredMetrics = React.useCallback(\n (next: PdfThumbnailWindowMetrics) => {\n const current = metricsRef.current;\n if (\n current.scrollTop === next.scrollTop &&\n current.viewportHeight === next.viewportHeight\n ) {\n return;\n }\n\n metricsRef.current = next;\n setMetrics(next);\n },\n [],\n );\n\n const viewportEffectKey = joinEffectKey([\n \"pdf-thumbnail-window\",\n initialViewportHeight,\n viewportRef,\n ]);\n useKeyedMountEffect(viewportEffectKey, () => {\n const viewport = viewportRef.current;\n if (!viewport) return;\n\n let frame = 0;\n const read = () => {\n const scrollTop =\n Number.isFinite(viewport.scrollTop) && viewport.scrollTop > 0\n ? viewport.scrollTop\n : 0;\n const viewportHeight =\n Number.isFinite(viewport.clientHeight) && viewport.clientHeight > 0\n ? viewport.clientHeight\n : initialViewportHeight;\n\n setMeasuredMetrics({ scrollTop, viewportHeight });\n };\n const scheduleRead = () => {\n if (frame !== 0) return;\n frame = window.requestAnimationFrame(() => {\n frame = 0;\n read();\n });\n };\n const observer =\n typeof ResizeObserver !== \"undefined\"\n ? new ResizeObserver(scheduleRead)\n : null;\n\n read();\n observer?.observe(viewport);\n viewport.addEventListener(\"scroll\", scheduleRead, { passive: true });\n\n return () => {\n viewport.removeEventListener(\"scroll\", scheduleRead);\n observer?.disconnect();\n if (frame !== 0) window.cancelAnimationFrame(frame);\n };\n });\n\n return React.useMemo(\n () => ({\n viewportHeight: metrics.viewportHeight,\n visibleItems: getVisiblePdfThumbnailItems({\n layout,\n scrollTop: metrics.scrollTop,\n viewportHeight: metrics.viewportHeight,\n overscanPx,\n }),\n totalHeight: layout.totalHeight,\n }),\n [layout, metrics, overscanPx],\n );\n}\n",
"type": "registry:ui",
"target": "@ui/use-pdf-thumbnail-window.ts"
},
{
"path": "registry/new-york-v4/ui/use-thumbnail-rail-follow.ts",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\n\nimport {\n getPdfThumbnailLayoutItem,\n normalizeThumbnailPage,\n type PdfThumbnailLayout,\n} from \"./pdf-thumbnail-layout\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nexport const THUMBNAIL_FOLLOW_MARGIN = 24;\n\ntype ThumbnailFollowSuspension =\n | { kind: \"none\" }\n | { kind: \"pointer\" }\n | { kind: \"user-scroll\" }\n | { kind: \"rail-navigation\"; targetPage: number };\n\ninterface ThumbnailFollowState {\n suspension: ThumbnailFollowSuspension;\n currentPage: number | null;\n programmaticScrollCount: number;\n}\n\nexport function useThumbnailRailFollow({\n currentPage,\n layout,\n viewportRef,\n resetKey,\n}: {\n currentPage: number | null | undefined;\n layout: PdfThumbnailLayout;\n viewportRef: React.RefObject;\n resetKey: unknown;\n}) {\n const stateRef = React.useRef({\n suspension: { kind: \"none\" },\n currentPage: null,\n programmaticScrollCount: 0,\n });\n\n const scrollPageIntoView = React.useCallback(\n (page: number, behavior: ScrollBehavior) => {\n const normalizedPage = normalizeThumbnailPage(page, layout.pageCount);\n if (normalizedPage == null) return false;\n\n const viewport = viewportRef.current;\n if (!viewport) return false;\n\n const item = getPdfThumbnailLayoutItem(layout, normalizedPage);\n if (!item) return false;\n\n const top = item.top - viewport.scrollTop;\n const bottom = top + item.height;\n const minTop = THUMBNAIL_FOLLOW_MARGIN;\n const maxBottom = viewport.clientHeight - THUMBNAIL_FOLLOW_MARGIN;\n const isAtDocumentStart =\n item.top <= THUMBNAIL_FOLLOW_MARGIN &&\n viewport.scrollTop <= THUMBNAIL_FOLLOW_MARGIN;\n\n if ((top >= minTop || isAtDocumentStart) && bottom <= maxBottom) {\n return false;\n }\n\n const maxScrollTop = Math.max(\n 0,\n layout.totalHeight - viewport.clientHeight,\n );\n const targetTop = Math.min(\n maxScrollTop,\n Math.max(0, item.top - viewport.clientHeight / 2 + item.height / 2),\n );\n\n if (stateRef.current.suspension.kind !== \"rail-navigation\") {\n stateRef.current.programmaticScrollCount += 1;\n }\n viewport.scrollTo?.({ top: targetTop, behavior });\n return true;\n },\n [layout, viewportRef],\n );\n\n const followNow = React.useCallback(() => {\n const page = normalizeThumbnailPage(currentPage, layout.pageCount);\n if (page == null) return;\n\n const state = stateRef.current;\n if (state.suspension.kind !== \"none\") return;\n\n scrollPageIntoView(page, \"auto\");\n }, [currentPage, layout.pageCount, scrollPageIntoView]);\n\n useKeyedMountEffect(joinEffectKey([\"thumbnail-reset\", resetKey]), () => {\n const state = stateRef.current;\n state.suspension = { kind: \"none\" };\n state.currentPage = null;\n state.programmaticScrollCount = 0;\n });\n\n useKeyedMountEffect(\n joinEffectKey([\"thumbnail-follow\", followNow, resetKey]),\n () => {\n const page = normalizeThumbnailPage(currentPage, layout.pageCount);\n const state = stateRef.current;\n const pageChanged = state.currentPage !== page;\n\n state.currentPage = page;\n if (state.suspension.kind === \"rail-navigation\") {\n if (pageChanged || page === state.suspension.targetPage) {\n state.suspension = { kind: \"none\" };\n followNow();\n }\n return;\n }\n\n if (state.suspension.kind === \"user-scroll\" && pageChanged) {\n state.suspension = { kind: \"none\" };\n }\n\n followNow();\n },\n );\n\n const onPointerEnter = React.useCallback(() => {\n const state = stateRef.current;\n if (\n state.suspension.kind === \"user-scroll\" ||\n state.suspension.kind === \"rail-navigation\"\n ) {\n return;\n }\n state.suspension = { kind: \"pointer\" };\n }, []);\n\n const onPointerLeave = React.useCallback(() => {\n const state = stateRef.current;\n if (state.suspension.kind !== \"pointer\") return;\n state.suspension = { kind: \"none\" };\n followNow();\n }, [followNow]);\n\n const onPageActivate = React.useCallback(\n (pageNumber: number) => {\n const targetPage = normalizeThumbnailPage(pageNumber, layout.pageCount);\n if (targetPage == null) return;\n\n const state = stateRef.current;\n state.suspension =\n state.currentPage === targetPage\n ? { kind: \"none\" }\n : { kind: \"rail-navigation\", targetPage };\n scrollPageIntoView(targetPage, \"smooth\");\n },\n [layout.pageCount, scrollPageIntoView],\n );\n\n const onScroll = React.useCallback(() => {\n const state = stateRef.current;\n if (state.programmaticScrollCount > 0) {\n state.programmaticScrollCount -= 1;\n return;\n }\n\n if (state.suspension.kind === \"rail-navigation\") return;\n\n state.suspension = { kind: \"user-scroll\" };\n }, []);\n\n return {\n onPageActivate,\n onPointerEnter,\n onPointerLeave,\n onScroll,\n };\n}\n",
"type": "registry:ui",
"target": "@ui/use-thumbnail-rail-follow.ts"
},
{
"path": "registry/new-york-v4/ui/pdf-thumbnail-rail.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport type { PdfDocumentProxy } from \"@/lib/pdf-document-types\";\nimport { cn } from \"@/lib/utils\";\n\nimport { PdfThumbnailItem } from \"./pdf-thumbnail-item\";\nimport {\n getPdfThumbnailRenderedWindow,\n normalizeThumbnailPage,\n type PdfThumbnailLayout,\n type PdfThumbnailLayoutItem,\n} from \"./pdf-thumbnail-layout\";\nimport type { PdfRenderedPageCache } from \"./pdf-viewer-render-cache\";\n\nexport function getPdfThumbnailItemId(pageNumber: number) {\n return `pdf-thumbnail-page-${pageNumber}`;\n}\n\nexport function PdfThumbnailRailViewport({\n doc,\n documentKey,\n isRenderingSuspended = false,\n layout,\n visibleItems,\n viewportHeight,\n currentPage,\n viewportRef,\n onSelectPage,\n onPageActivate,\n onPointerEnter,\n onPointerLeave,\n onScroll,\n className,\n renderCache,\n}: {\n doc: PdfDocumentProxy;\n documentKey: string;\n isRenderingSuspended?: boolean;\n layout: PdfThumbnailLayout;\n visibleItems: readonly PdfThumbnailLayoutItem[];\n viewportHeight: number;\n currentPage: number | null | undefined;\n viewportRef: React.RefObject;\n onSelectPage?: (pageNumber: number) => void;\n onPageActivate?: (pageNumber: number) => void;\n onPointerEnter?: () => void;\n onPointerLeave?: () => void;\n onScroll?: () => void;\n className?: string;\n renderCache?: PdfRenderedPageCache;\n}) {\n const activePage = normalizeThumbnailPage(currentPage, layout.pageCount);\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n const page = activePage ?? 1;\n const nextPage = getKeyboardTargetPage({\n key: event.key,\n page,\n pageCount: layout.pageCount,\n });\n\n if (nextPage == null) return;\n event.preventDefault();\n onPageActivate?.(nextPage);\n onSelectPage?.(nextPage);\n },\n [activePage, layout.pageCount, onPageActivate, onSelectPage],\n );\n const handleSelectPage = React.useCallback(\n (pageNumber: number) => {\n onPageActivate?.(pageNumber);\n onSelectPage?.(pageNumber);\n },\n [onPageActivate, onSelectPage],\n );\n const renderedWindow = React.useMemo(\n () =>\n getPdfThumbnailRenderedWindow({\n layout,\n visibleItems,\n viewportHeight,\n }),\n [layout, visibleItems, viewportHeight],\n );\n\n return (\n \n \n {renderedWindow ? (\n <>\n \n \n \n {renderedWindow.items.map((item) => (\n \n \n \n ))}\n \n \n \n \n ) : null}\n \n \n );\n}\n\nfunction getKeyboardTargetPage({\n key,\n page,\n pageCount,\n}: {\n key: string;\n page: number;\n pageCount: number;\n}) {\n switch (key) {\n case \"ArrowUp\":\n return Math.max(1, page - 1);\n case \"ArrowDown\":\n return Math.min(pageCount, page + 1);\n case \"Home\":\n return 1;\n case \"End\":\n return pageCount;\n default:\n return null;\n }\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-thumbnail-rail.tsx"
},
{
"path": "registry/new-york-v4/ui/pdf-thumbnail-item.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport type { PdfDocumentProxy } from \"@/lib/pdf-document-types\";\nimport { cn } from \"@/lib/utils\";\n\nimport {\n PdfThumbnailCanvas,\n PdfThumbnailSkeleton,\n} from \"./pdf-thumbnail-canvas\";\nimport type { PdfThumbnailLayoutItem } from \"./pdf-thumbnail-layout\";\nimport type { PdfRenderedPageCache } from \"./pdf-viewer-render-cache\";\n\nexport function PdfThumbnailItem({\n doc,\n documentKey,\n item,\n active,\n isRenderingSuspended = false,\n itemId,\n onSelectPage,\n renderCache,\n}: {\n doc: PdfDocumentProxy;\n documentKey: string;\n item: PdfThumbnailLayoutItem;\n active: boolean;\n isRenderingSuspended?: boolean;\n itemId: string;\n onSelectPage?: (pageNumber: number) => void;\n renderCache?: PdfRenderedPageCache;\n}) {\n return (\n onSelectPage?.(item.pageNumber)}\n className=\"flex flex-shrink-0 flex-col items-center gap-1 outline-none\"\n >\n \n }>\n \n \n \n \n {item.pageNumber}\n \n \n );\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-thumbnail-item.tsx"
},
{
"path": "registry/new-york-v4/ui/pdf-thumbnail-canvas.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport type { PdfDocumentProxy } from \"@/lib/pdf-document-types\";\nimport { readPdfPageResource } from \"@/lib/pdf-document-resource\";\n\nimport { getPdfCanvasPixelSize } from \"./pdf-viewer-canvas\";\nimport {\n readPdfRenderedPageCache,\n writePdfRenderedPageCache,\n type PdfRenderedPageCache,\n type PdfRenderedPageSignature,\n} from \"./pdf-viewer-render-cache\";\nimport { toPdfRenderFailedError } from \"./pdf-viewer-render-error\";\n\nconst PDF_THUMBNAIL_MAX_DEVICE_PIXEL_RATIO = 1;\n\nexport function PdfThumbnailCanvas({\n doc,\n documentKey,\n isRenderingSuspended = false,\n pageNumber,\n renderCache,\n width,\n}: {\n doc: PdfDocumentProxy;\n documentKey: string;\n isRenderingSuspended?: boolean;\n pageNumber: number;\n renderCache?: PdfRenderedPageCache;\n width: number;\n}) {\n const page = readPdfPageResource(doc, pageNumber);\n const baseViewport = React.useMemo(\n () => page.getViewport({ scale: 1 }),\n [page],\n );\n const viewport = React.useMemo(\n () => page.getViewport({ scale: width / baseViewport.width }),\n [baseViewport.width, page, width],\n );\n const dpr = Math.min(\n (typeof window !== \"undefined\" ? window.devicePixelRatio : 1) || 1,\n PDF_THUMBNAIL_MAX_DEVICE_PIXEL_RATIO,\n );\n const [renderError, setRenderError] = React.useState(null);\n if (renderError) throw renderError;\n\n const canvasRef = React.useCallback(\n (canvas: HTMLCanvasElement | null) => {\n if (!canvas) return;\n const context = canvas.getContext(\"2d\");\n if (!context) {\n setRenderError(\n toPdfRenderFailedError(new Error(\"Canvas 2D context unavailable.\")),\n );\n return;\n }\n\n const renderSignature = {\n documentKey,\n pageNumber,\n scale: width / baseViewport.width,\n rotation: 0,\n devicePixelRatio: dpr,\n viewportWidth: viewport.width,\n viewportHeight: viewport.height,\n } satisfies PdfRenderedPageSignature;\n const canvasWidth = getPdfCanvasPixelSize(viewport.width, dpr);\n const canvasHeight = getPdfCanvasPixelSize(viewport.height, dpr);\n const cachedPage = readPdfRenderedPageCache(renderCache, renderSignature);\n\n resizeCanvas(canvas, canvasWidth, canvasHeight);\n if (isRenderingSuspended) {\n markCanvasRenderStatus(canvas, renderSignature, \"suspended\");\n return;\n }\n\n if (cachedPage) {\n drawCanvasImage(context, cachedPage.canvas, canvasWidth, canvasHeight);\n markCanvasRenderStatus(canvas, renderSignature, \"rendered\", \"cache\");\n return;\n }\n markCanvasRenderStatus(canvas, renderSignature, \"pending\");\n\n let task: ReturnType;\n try {\n task = page.render({\n canvas,\n canvasContext: context,\n viewport,\n transform: dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : undefined,\n });\n } catch (error) {\n setRenderError(toPdfRenderFailedError(error));\n return;\n }\n\n let isActive = true;\n let didFinishPdfRender = false;\n task.promise.then(\n () => {\n if (!isActive) return;\n didFinishPdfRender = true;\n writePdfRenderedPageCache({\n cache: renderCache,\n rendered: renderSignature,\n sourceCanvas: canvas,\n });\n markCanvasRenderStatus(canvas, renderSignature, \"rendered\", \"pdfjs\");\n },\n (error) => {\n if (!isActive) return;\n didFinishPdfRender = true;\n markCanvasRenderStatus(canvas, renderSignature, \"failed\");\n setRenderError(toPdfRenderFailedError(error));\n },\n );\n\n return () => {\n isActive = false;\n if (!didFinishPdfRender) {\n task.cancel();\n markCanvasRenderStatus(canvas, renderSignature, \"cancelled\");\n }\n };\n },\n [\n baseViewport.width,\n documentKey,\n dpr,\n isRenderingSuspended,\n page,\n pageNumber,\n renderCache,\n viewport,\n width,\n ],\n );\n\n return (\n \n );\n}\n\nfunction resizeCanvas(\n canvas: HTMLCanvasElement,\n width: number,\n height: number,\n) {\n if (canvas.width !== width) canvas.width = width;\n if (canvas.height !== height) canvas.height = height;\n}\n\nfunction drawCanvasImage(\n context: CanvasRenderingContext2D,\n image: HTMLCanvasElement,\n width: number,\n height: number,\n) {\n if (typeof context.setTransform === \"function\") {\n context.setTransform(1, 0, 0, 1, 0, 0);\n }\n if (typeof context.drawImage === \"function\") {\n context.drawImage(image, 0, 0, width, height);\n }\n}\n\nfunction markCanvasRenderStatus(\n canvas: HTMLCanvasElement,\n rendered: PdfRenderedPageSignature,\n status: \"pending\" | \"rendered\" | \"cancelled\" | \"failed\" | \"suspended\",\n source?: \"cache\" | \"pdfjs\",\n) {\n canvas.dataset.pdfPageNumber = String(rendered.pageNumber);\n canvas.dataset.pdfRenderStatus = status;\n if (source) {\n canvas.dataset.pdfRenderSource = source;\n } else {\n delete canvas.dataset.pdfRenderSource;\n }\n}\n\nexport function PdfThumbnailSkeleton() {\n return ;\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-thumbnail-canvas.tsx"
},
{
"path": "registry/new-york-v4/lib/viewer-source.ts",
"content": "export type FileCategory =\n | \"pdf\"\n | \"docx\"\n | \"xlsx\"\n | \"pptx\"\n | \"csv\"\n | \"image\"\n | \"markdown\"\n | \"html\"\n | \"email\"\n | \"text\"\n | \"unsupported\";\n\nexport type ViewerSource = UrlViewerSource | TextSource | BlobViewerSource;\n\nexport interface UrlViewerSource {\n kind: \"url\";\n url: string;\n fileName?: string;\n mimeType?: string;\n downloadUrl?: string;\n identityKey?: string;\n}\n\nexport interface TextSource {\n kind: \"text\";\n text: string;\n fileName?: string;\n mimeType?: string;\n identityKey?: string;\n}\n\nexport interface BlobViewerSource {\n kind: \"blob\";\n blob: Blob;\n identityKey: string;\n fileName?: string;\n mimeType?: string;\n downloadUrl?: string;\n}\n\nexport interface ViewerDescriptor {\n source: ViewerSource;\n category: FileCategory;\n identityKey: string;\n displayName: string;\n fileName: string;\n mimeType?: string;\n}\n\nconst EXTENSION_CATEGORY: Record = {\n pdf: \"pdf\",\n docx: \"docx\",\n xlsx: \"xlsx\",\n xls: \"xlsx\",\n xlsm: \"xlsx\",\n pptx: \"pptx\",\n csv: \"csv\",\n tsv: \"csv\",\n png: \"image\",\n jpg: \"image\",\n jpeg: \"image\",\n gif: \"image\",\n webp: \"image\",\n avif: \"image\",\n bmp: \"image\",\n svg: \"image\",\n ico: \"image\",\n tif: \"image\",\n tiff: \"image\",\n md: \"markdown\",\n markdown: \"markdown\",\n mdx: \"text\",\n html: \"html\",\n htm: \"html\",\n eml: \"email\",\n txt: \"text\",\n text: \"text\",\n log: \"text\",\n json: \"text\",\n jsonl: \"text\",\n json5: \"text\",\n ndjson: \"text\",\n xml: \"text\",\n yaml: \"text\",\n yml: \"text\",\n toml: \"text\",\n ini: \"text\",\n env: \"text\",\n js: \"text\",\n mjs: \"text\",\n cjs: \"text\",\n jsx: \"text\",\n ts: \"text\",\n tsx: \"text\",\n css: \"text\",\n scss: \"text\",\n less: \"text\",\n py: \"text\",\n rb: \"text\",\n go: \"text\",\n rs: \"text\",\n java: \"text\",\n kt: \"text\",\n c: \"text\",\n h: \"text\",\n cpp: \"text\",\n cc: \"text\",\n cs: \"text\",\n php: \"text\",\n sh: \"text\",\n bash: \"text\",\n zsh: \"text\",\n sql: \"text\",\n graphql: \"text\",\n proto: \"text\",\n lua: \"text\",\n r: \"text\",\n swift: \"text\",\n scala: \"text\",\n pl: \"text\",\n vue: \"text\",\n svelte: \"text\",\n};\n\nexport function extensionOf(name: string): string | null {\n const clean = name.split(/[?#]/)[0];\n const base = clean.split(\"/\").pop() ?? clean;\n const dot = base.lastIndexOf(\".\");\n return dot > 0 ? base.slice(dot + 1).toLowerCase() : null;\n}\n\nexport function extractName(url: string): string {\n const clean = url.split(/[?#]/)[0];\n return clean.split(\"/\").pop() || \"file\";\n}\n\nexport function detectCategory(\n fileName: string,\n mimeType?: string,\n): FileCategory {\n const ext = extensionOf(fileName);\n if (ext && EXTENSION_CATEGORY[ext]) return EXTENSION_CATEGORY[ext];\n if (mimeType) {\n const fromMime = categoryFromMime(mimeType);\n if (fromMime) return fromMime;\n }\n return \"unsupported\";\n}\n\nexport function resolveViewerDescriptor({\n source,\n category,\n}: {\n source: ViewerSource;\n category?: FileCategory;\n}): ViewerDescriptor {\n const resolvedMimeType =\n source.mimeType ??\n (source.kind === \"blob\" && source.blob.type ? source.blob.type : undefined);\n const displayName = source.fileName ?? defaultDisplayName(source);\n const fileName = source.fileName ?? defaultFileName(source);\n const resolvedCategory =\n category ?? detectCategory(displayName, resolvedMimeType);\n\n return {\n source,\n category: resolvedCategory,\n identityKey: source.identityKey ?? defaultIdentityKey(source),\n displayName,\n fileName,\n mimeType: resolvedMimeType,\n };\n}\n\nfunction categoryFromMime(mimeType: string): FileCategory | null {\n const mime = mimeType.toLowerCase().split(\";\")[0].trim();\n if (mime === \"application/pdf\") return \"pdf\";\n if (mime.includes(\"wordprocessingml\")) return \"docx\";\n if (mime.includes(\"spreadsheet\") || mime.includes(\"ms-excel\")) return \"xlsx\";\n if (mime.includes(\"presentation\") || mime.includes(\"ms-powerpoint\")) {\n return \"pptx\";\n }\n if (mime === \"text/csv\" || mime === \"text/tab-separated-values\") return \"csv\";\n if (mime === \"text/markdown\") return \"markdown\";\n if (mime === \"text/html\") return \"html\";\n if (mime === \"message/rfc822\" || mime === \"message/global\") {\n return \"email\";\n }\n if (mime.startsWith(\"image/\")) return \"image\";\n if (mime === \"application/json\" || mime === \"application/xml\") return \"text\";\n if (mime.startsWith(\"text/\")) return \"text\";\n return null;\n}\n\nfunction defaultDisplayName(source: ViewerSource) {\n if (source.kind === \"url\") return source.url;\n if (source.kind === \"text\") return \"text.txt\";\n return \"file\";\n}\n\nfunction defaultFileName(source: ViewerSource) {\n if (source.kind === \"url\") return extractName(source.url);\n if (source.kind === \"text\") return \"text.txt\";\n return \"file\";\n}\n\nfunction defaultIdentityKey(source: ViewerSource) {\n if (source.kind === \"url\") return `url:${source.url}`;\n if (source.kind === \"text\") return textPayloadIdentityKey(source.text);\n return source.identityKey;\n}\n\nexport function textPayloadIdentityKey(text: string) {\n return textPayloadKey(text);\n}\n\nexport function textPayloadKey(text: string) {\n return `text:${text.length}:${hashString(text)}`;\n}\n\nfunction hashString(text: string) {\n let hash = 0x811c9dc5;\n for (let index = 0; index < text.length; index += 1) {\n hash ^= text.charCodeAt(index);\n hash = Math.imul(hash, 0x01000193);\n }\n return (hash >>> 0).toString(36);\n}\n",
"type": "registry:lib",
"target": "@lib/viewer-source.ts"
},
{
"path": "registry/new-york-v4/ui/use-is-client.ts",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nconst emptySubscribe = () => () => {};\nconst getClientSnapshot = () => true;\nconst getServerSnapshot = () => false;\n\n/**\n * SSR gate: `false` on the server (and during hydration's first pass),\n * `true` on the client.\n *\n * This must stay a synchronous external-store read, NOT the\n * `useState(false)` + mount-effect flip. The flip pattern makes every\n * viewer mount its Suspense boundary in a later update; when two such\n * boundaries suspend on pending resources in the same flush as other\n * commit-phase updates (viewer sidebar/geometry registration), React 19's\n * retry lanes desynchronize and re-attempt each other's boundary on every\n * commit — an unbounded synchronous suspend/retry loop that starves the\n * event loop (jsdom tests OOM; browsers busy-spin until the resource\n * resolves). With the store read, client renders suspend on mount, which\n * never enters that loop. Regression-guarded in\n * tests/pdf-viewer-thumbnails.test.tsx (\"shares one document resource…\").\n */\nexport function useIsClient(): boolean {\n return React.useSyncExternalStore(\n emptySubscribe,\n getClientSnapshot,\n getServerSnapshot,\n );\n}\n",
"type": "registry:ui",
"target": "@ui/use-is-client.ts"
},
{
"path": "registry/new-york-v4/ui/viewer-download.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Download } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n ViewerDownloadError,\n type ViewerDownloadAction,\n type ViewerDownloadPayload,\n} from \"@/lib/viewer-download-actions\";\n\nimport { Spinner } from \"@/components/ui/spinner\";\n\nimport { Button, buttonVariants } from \"./button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\nimport { joinEffectKey } from \"@/lib/effect-key\";\n\nexport interface TriggerViewerDownloadOptions {\n signal?: AbortSignal;\n}\n\nexport async function triggerViewerDownload(\n action: ViewerDownloadAction,\n options?: TriggerViewerDownloadOptions,\n): Promise {\n if (action.isDisabled) {\n throw new ViewerDownloadError({\n actionId: action.id,\n kind: \"disabled\",\n message: \"This download is disabled.\",\n });\n }\n\n let payload: ViewerDownloadPayload;\n try {\n payload = await action.getPayload(options);\n } catch (error) {\n if (isAbortError(error)) {\n throw new ViewerDownloadError({\n actionId: action.id,\n kind: \"aborted\",\n message: \"Download was cancelled.\",\n cause: error,\n });\n }\n throw new ViewerDownloadError({\n actionId: action.id,\n kind: \"payload_failed\",\n message: \"Could not prepare this download.\",\n cause: error,\n });\n }\n\n if (payload.kind === \"none\") return;\n if (payload.kind === \"href\") {\n try {\n clickDownload(payload.href, action.fileName);\n } catch (error) {\n throw new ViewerDownloadError({\n actionId: action.id,\n kind: \"unsupported\",\n message: \"Could not start this download.\",\n cause: error,\n });\n }\n return;\n }\n\n try {\n const blob =\n payload.kind === \"blob\"\n ? payload.blob\n : new Blob([payload.text], {\n type: payload.mimeType ?? \"text/plain;charset=utf-8\",\n });\n const url = URL.createObjectURL(blob);\n try {\n clickDownload(url, action.fileName);\n } finally {\n URL.revokeObjectURL(url);\n }\n } catch (error) {\n throw new ViewerDownloadError({\n actionId: action.id,\n kind: \"unsupported\",\n message: \"Could not start this download.\",\n cause: error,\n });\n }\n}\n\nexport type ViewerDownloadErrorHandler = (\n error: ViewerDownloadError,\n action: ViewerDownloadAction,\n) => void;\n\nexport interface ViewerDownloadTrigger {\n pendingActionId: string | null;\n triggerDownload: (action: ViewerDownloadAction) => void;\n}\n\nexport interface ViewerDownloadTriggerOptions {\n /** Reports non-aborted action failures; visible failure UI belongs to consumers. */\n onError?: ViewerDownloadErrorHandler;\n resetKey?: unknown;\n}\n\nexport interface ViewerDownloadControlProps {\n actions: Array;\n variant?: React.ComponentProps[\"variant\"];\n size?: React.ComponentProps[\"size\"];\n className?: string;\n showLabel?: boolean;\n /** Reports non-aborted action failures; visible failure UI belongs to consumers. */\n onError?: ViewerDownloadErrorHandler;\n}\n\nexport interface ViewerDownloadButtonProps\n extends Omit {\n action: ViewerDownloadAction | null;\n}\n\nexport interface ViewerDownloadMenuProps\n extends Omit {\n actions: ViewerDownloadAction[];\n}\n\nexport function useViewerDownloadHref(\n action: ViewerDownloadAction | null,\n): string | null {\n const shouldCreateHref = action?.origin !== \"derived\";\n const payload = shouldCreateHref ? getSynchronousPayload(action) : null;\n\n return shouldCreateHref && payload?.kind === \"href\" ? payload.href : null;\n}\n\nexport function useViewerDownloadTrigger({\n onError,\n resetKey = \"\",\n}: ViewerDownloadTriggerOptions = {}): ViewerDownloadTrigger {\n const [pendingActionId, setPendingActionId] = React.useState(\n null,\n );\n const abortControllerRef = React.useRef(null);\n\n useKeyedMountEffect(joinEffectKey([resetKey]), () => {\n return () => {\n abortControllerRef.current?.abort();\n abortControllerRef.current = null;\n };\n });\n\n const triggerDownload = React.useCallback(\n (action: ViewerDownloadAction) => {\n abortControllerRef.current?.abort();\n const abortController = new AbortController();\n abortControllerRef.current = abortController;\n setPendingActionId(action.id);\n void triggerViewerDownload(action, { signal: abortController.signal })\n .catch((error) => {\n reportDownloadError(error, action, onError);\n })\n .finally(() => {\n if (abortControllerRef.current === abortController) {\n abortControllerRef.current = null;\n setPendingActionId(null);\n }\n });\n },\n [onError],\n );\n\n return { pendingActionId, triggerDownload };\n}\n\nexport function ViewerDownloadControl({\n actions,\n variant = \"ghost\",\n size = \"iconSm\",\n className = \"size-7\",\n showLabel = false,\n onError,\n}: ViewerDownloadControlProps) {\n const enabledActions = actions.filter(\n (action): action is ViewerDownloadAction => Boolean(action),\n );\n\n if (enabledActions.length <= 1) {\n return (\n \n );\n }\n\n return (\n \n );\n}\n\nexport function ViewerDownloadButton({\n action,\n variant = \"ghost\",\n size = \"iconSm\",\n className = \"size-7\",\n showLabel = false,\n onError,\n}: ViewerDownloadButtonProps) {\n const href = useViewerDownloadHref(action);\n const label = action?.label ?? \"Download\";\n const disabled = !action || action.isDisabled;\n const hasDownloadHref = Boolean(href);\n const { pendingActionId, triggerDownload } = useViewerDownloadTrigger({\n onError,\n resetKey: action,\n });\n const isPending = Boolean(action && pendingActionId === action.id);\n\n const handleClick = React.useCallback(() => {\n if (!action || hasDownloadHref) return;\n triggerDownload(action);\n }, [action, hasDownloadHref, triggerDownload]);\n\n if (href) {\n return (\n \n \n {showLabel ? label : null}\n \n );\n }\n\n return (\n \n {isPending ? (\n \n ) : (\n \n )}\n {showLabel ? label : null}\n \n );\n}\n\nexport function ViewerDownloadMenu({\n actions,\n variant = \"ghost\",\n size = \"iconSm\",\n className = \"size-7\",\n showLabel = false,\n onError,\n}: ViewerDownloadMenuProps) {\n const actionSetKey = actions.map((action) => action.id).join(\"\\u0000\");\n const label = \"Download\";\n const { pendingActionId, triggerDownload } = useViewerDownloadTrigger({\n onError,\n resetKey: actionSetKey,\n });\n\n return (\n \n \n \n {pendingActionId != null ? (\n \n ) : (\n \n )}\n {showLabel ? label : null}\n \n \n \n {actions.map((action) => (\n triggerDownload(action)}\n >\n \n {action.label}\n \n ))}\n \n \n );\n}\n\nfunction clickDownload(href: string, fileName: string) {\n const anchor = document.createElement(\"a\");\n anchor.href = href;\n anchor.download = fileName;\n anchor.rel = \"noreferrer\";\n document.body.appendChild(anchor);\n anchor.click();\n anchor.remove();\n}\n\nfunction getSynchronousPayload(\n action: ViewerDownloadAction | null,\n): ViewerDownloadPayload | null {\n if (!action || action.isDisabled) return null;\n const payload = action.getPayload();\n return payload instanceof Promise ? null : payload;\n}\n\nfunction reportDownloadError(\n error: unknown,\n action: ViewerDownloadAction,\n onError: ViewerDownloadErrorHandler | undefined,\n) {\n if (!(error instanceof ViewerDownloadError)) return;\n if (error.kind === \"aborted\") return;\n onError?.(error, action);\n}\n\nfunction isAbortError(error: unknown) {\n return error instanceof DOMException && error.name === \"AbortError\";\n}\n",
"type": "registry:ui",
"target": "@ui/viewer-download.tsx"
},
{
"path": "registry/new-york-v4/ui/pdf-viewer-telemetry.ts",
"content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { joinEffectKey } from \"@/lib/effect-key\";\nimport { useKeyedMountEffect } from \"@/hooks/use-keyed-mount-effect\";\n\nimport type { FileViewerRendererFrame } from \"./file-viewer-renderer-contract\";\nimport type { PdfPageLayoutModel } from \"./pdf-viewer-layout\";\nimport {\n getPdfZoomMotionFlightRecords,\n type PdfZoomMotionFlightRecord,\n} from \"./pdf-viewer-zoom-motion\";\n\ntype PdfViewerTelemetryMetricId =\n | \"blink\"\n | \"horizontal-back-and-forth\"\n | \"vertical-overshoot\"\n | \"settle-jitter\"\n | \"resize-linearity\"\n | \"scroll-stability\"\n | \"renderer-continuity\"\n | \"canvas-continuity\"\n | \"raster-headroom\"\n | \"virtual-window-retention\";\n\ntype PdfViewerTelemetryMetric = {\n budget: string;\n detail: string;\n id: PdfViewerTelemetryMetricId;\n label: string;\n passed: boolean;\n value: string;\n};\n\ntype PdfViewerTelemetrySample = {\n activeRenderPageNumbers: number[];\n canvasBitmapHeight: number | null;\n canvasBitmapWidth: number | null;\n canvasCssHeight: number | null;\n canvasCssWidth: number | null;\n canvasInkRatio: number | null;\n canvasPixelSignature: string | null;\n canvasRenderSource: string | null;\n canvasRenderStatus: string | null;\n clientHeight: number;\n clientWidth: number;\n devicePixelRatio: number;\n displayScale: number;\n documentKey: string;\n elapsedMs: number;\n gapWidth: number | null;\n hasBlink: boolean;\n layoutInlineSize: number | null;\n logicalScrollTop: number;\n motionPhase: FileViewerRendererFrame[\"phase\"];\n physicalScrollTop: number;\n primaryPageBottom: number | null;\n primaryPageCenterX: number | null;\n primaryPageHeight: number | null;\n primaryPageLeft: number | null;\n primaryPageNumber: number | null;\n primaryPageTop: number | null;\n primaryPageWidth: number | null;\n renderPageNumbers: number[];\n renderScale: number;\n scrollHeight: number;\n scrollPageOffset: number;\n sidebarOpen: string | null;\n sidebarState: string | null;\n sidebarWidth: number | null;\n timestamp: number;\n toInlineSize: number | null;\n transform: string | null;\n visiblePageNumbers: number[];\n visibleRenderedPageNumbers: number[];\n visualHeight: number | null;\n visualLeft: number | null;\n visualTop: number | null;\n visualWidth: number | null;\n};\n\ntype PdfViewerTelemetryRun = {\n action: \"close\" | \"open\";\n after: PdfViewerTelemetrySample;\n before: PdfViewerTelemetrySample;\n samples: PdfViewerTelemetrySample[];\n};\n\ntype PdfViewerTelemetryResult = {\n durationMs: number;\n metrics: PdfViewerTelemetryMetric[];\n runs: PdfViewerTelemetryRun[];\n sampledFrameCount: number;\n status: \"failed\" | \"passed\";\n};\n\ntype PdfViewerTelemetryRunOptions = {\n sampleFrameCount?: number;\n settleFrameCount?: number;\n};\n\ntype PdfViewerTelemetryState = {\n activeRenderPageNumbers: readonly number[];\n displayScale: number;\n documentKey: string;\n getDocumentSurfaceElement: () => HTMLElement | null;\n getScrollMetrics: () => {\n physicalScrollHeight: number;\n physicalScrollTop: number;\n scrollPageOffset: number;\n scrollTop: number;\n viewportHeight: number;\n };\n getViewportElement: () => HTMLDivElement | null;\n layout: PdfPageLayoutModel;\n renderPageNumbers: readonly number[];\n renderScale: number;\n pageDevicePixelRatio: number;\n rendererFrame: FileViewerRendererFrame;\n visiblePageNumbers: readonly number[];\n};\n\ntype PdfViewerTelemetryRuntime = {\n getLastResult: () => PdfViewerTelemetryResult | null;\n /** Flight recorder for toolbar zoom relaxes (pdf-viewer-zoom-motion). */\n getZoomFlightRecords: () => readonly PdfZoomMotionFlightRecord[];\n readSample: () => PdfViewerTelemetrySample | null;\n runShellMotion: (\n options?: PdfViewerTelemetryRunOptions,\n ) => Promise;\n};\n\ndeclare global {\n interface Window {\n __pdfViewerTelemetry?: PdfViewerTelemetryRuntime;\n }\n}\n\nconst PDF_TELEMETRY_READING_MARKER_RATIO = 0.2;\nconst PDF_TELEMETRY_REVERSAL_EPSILON_PX = 1;\nconst PDF_TELEMETRY_SETTLE_EPSILON_PX = 1;\nconst PDF_TELEMETRY_DEFAULT_SAMPLE_FRAMES = 36;\nconst PDF_TELEMETRY_DEFAULT_SETTLE_FRAMES = 12;\n\nexport function usePdfViewerTelemetry(state: PdfViewerTelemetryState) {\n const stateRef = React.useRef(state);\n const lastResultRef = React.useRef(null);\n stateRef.current = state;\n\n useKeyedMountEffect(\n joinEffectKey([\"pdf-viewer-telemetry\", state.documentKey]),\n () => {\n if (typeof window === \"undefined\") return;\n\n const previousRuntime = window.__pdfViewerTelemetry;\n const runtime: PdfViewerTelemetryRuntime = {\n getLastResult: () => lastResultRef.current,\n getZoomFlightRecords: () => getPdfZoomMotionFlightRecords(),\n readSample: () =>\n readPdfViewerTelemetrySample({\n startedAt: performance.now(),\n state: stateRef.current,\n }),\n runShellMotion: async (options) => {\n const result = await runPdfViewerShellMotionTelemetry({\n options,\n stateRef,\n });\n lastResultRef.current = result;\n if (result) logPdfViewerTelemetryResult(result);\n return result;\n },\n };\n\n window.__pdfViewerTelemetry = runtime;\n\n return () => {\n if (window.__pdfViewerTelemetry === runtime) {\n window.__pdfViewerTelemetry = previousRuntime;\n }\n };\n },\n );\n}\n\nasync function runPdfViewerShellMotionTelemetry({\n options,\n stateRef,\n}: {\n options?: PdfViewerTelemetryRunOptions;\n stateRef: React.MutableRefObject;\n}): Promise {\n const state = stateRef.current;\n const viewportElement = state.getViewportElement();\n const shell = getPdfViewerTelemetryShell(viewportElement);\n if (!shell) return null;\n\n const sampleFrameCount =\n options?.sampleFrameCount ?? PDF_TELEMETRY_DEFAULT_SAMPLE_FRAMES;\n const settleFrameCount =\n options?.settleFrameCount ?? PDF_TELEMETRY_DEFAULT_SETTLE_FRAMES;\n const startedAt = performance.now();\n const runs: PdfViewerTelemetryRun[] = [];\n const firstAction =\n shell.root.dataset.fileViewerSidebarOpen === \"true\" ? \"close\" : \"open\";\n const secondAction = firstAction === \"close\" ? \"open\" : \"close\";\n\n runs.push(\n await samplePdfViewerShellMotionRun({\n action: firstAction,\n sampleFrameCount,\n settleFrameCount,\n shell,\n startedAt,\n stateRef,\n }),\n );\n runs.push(\n await samplePdfViewerShellMotionRun({\n action: secondAction,\n sampleFrameCount,\n settleFrameCount,\n shell,\n startedAt,\n stateRef,\n }),\n );\n\n const metrics = collectPdfViewerTelemetryMetrics(runs);\n const status = metrics.every((metric) => metric.passed) ? \"passed\" : \"failed\";\n\n return {\n durationMs: performance.now() - startedAt,\n metrics,\n runs,\n sampledFrameCount: runs.reduce(\n (count, run) => count + run.samples.length,\n 0,\n ),\n status,\n };\n}\n\nasync function samplePdfViewerShellMotionRun({\n action,\n sampleFrameCount,\n settleFrameCount,\n shell,\n startedAt,\n stateRef,\n}: {\n action: PdfViewerTelemetryRun[\"action\"];\n sampleFrameCount: number;\n settleFrameCount: number;\n shell: PdfViewerTelemetryShell;\n startedAt: number;\n stateRef: React.MutableRefObject;\n}): Promise {\n const before = readPdfViewerTelemetrySample({\n startedAt,\n state: stateRef.current,\n });\n if (!before) throw new Error(\"PDF telemetry sample unavailable before run.\");\n\n const samples: PdfViewerTelemetrySample[] = [];\n shell.trigger.click();\n\n for (let index = 0; index < sampleFrameCount; index += 1) {\n await nextPdfTelemetryAnimationFrame();\n const sample = readPdfViewerTelemetrySample({\n startedAt,\n state: stateRef.current,\n });\n if (sample) samples.push(sample);\n }\n\n for (let index = 0; index < settleFrameCount; index += 1) {\n await nextPdfTelemetryAnimationFrame();\n }\n\n const after = readPdfViewerTelemetrySample({\n startedAt,\n state: stateRef.current,\n });\n if (!after) throw new Error(\"PDF telemetry sample unavailable after run.\");\n\n return { action, after, before, samples };\n}\n\nfunction readPdfViewerTelemetrySample({\n startedAt,\n state,\n}: {\n startedAt: number;\n state: PdfViewerTelemetryState;\n}): PdfViewerTelemetrySample | null {\n const viewportElement = state.getViewportElement();\n const surfaceElement = state.getDocumentSurfaceElement();\n if (!viewportElement || !surfaceElement) return null;\n\n const pdfRoot = surfaceElement.closest(\n '[data-slot=\"pdf-viewer\"]',\n );\n const shell = getPdfViewerTelemetryShell(viewportElement);\n const viewportRect = viewportElement.getBoundingClientRect();\n const surfaceRect = surfaceElement.getBoundingClientRect();\n const metrics = state.getScrollMetrics();\n const pages = readPdfViewerTelemetryPages({ pdfRoot, viewportRect });\n const marker =\n viewportRect.top + viewportRect.height * PDF_TELEMETRY_READING_MARKER_RATIO;\n const primaryPage = getPdfTelemetryPrimaryPage({ marker, pages });\n const visibleRenderedPageNumbers = pages\n .filter((page) => page.isVisible && page.hasCanvasPixels)\n .map((page) => page.pageNumber);\n const transform =\n surfaceElement.style.transform ||\n getComputedStyle(surfaceElement).transform;\n\n return {\n activeRenderPageNumbers: [...state.activeRenderPageNumbers],\n canvasBitmapHeight: primaryPage?.canvasBitmapHeight ?? null,\n canvasBitmapWidth: primaryPage?.canvasBitmapWidth ?? null,\n canvasCssHeight: primaryPage?.canvasCssHeight ?? null,\n canvasCssWidth: primaryPage?.canvasCssWidth ?? null,\n canvasInkRatio: primaryPage?.canvasInkRatio ?? null,\n canvasPixelSignature: primaryPage?.canvasPixelSignature ?? null,\n canvasRenderSource: primaryPage?.canvasRenderSource ?? null,\n canvasRenderStatus: primaryPage?.canvasRenderStatus ?? null,\n clientHeight: viewportElement.clientHeight,\n clientWidth: viewportElement.clientWidth,\n devicePixelRatio: state.pageDevicePixelRatio,\n displayScale: state.displayScale,\n documentKey: state.documentKey,\n elapsedMs: Math.max(0, performance.now() - startedAt),\n gapWidth: shell?.gap.getBoundingClientRect().width ?? null,\n hasBlink:\n !primaryPage ||\n !primaryPage.hasCanvasPixels ||\n primaryPage.canvasRenderStatus === \"failed\" ||\n primaryPage.canvasRenderStatus === \"cancelled\" ||\n visibleRenderedPageNumbers.length === 0,\n layoutInlineSize: state.rendererFrame.layoutInlineSize,\n logicalScrollTop: metrics.scrollTop,\n motionPhase: state.rendererFrame.phase,\n physicalScrollTop: viewportElement.scrollTop,\n primaryPageBottom:\n primaryPage == null ? null : primaryPage.bottom - viewportRect.top,\n primaryPageCenterX:\n primaryPage == null\n ? null\n : primaryPage.left - viewportRect.left + primaryPage.width / 2,\n primaryPageHeight: primaryPage?.height ?? null,\n primaryPageLeft:\n primaryPage == null ? null : primaryPage.left - viewportRect.left,\n primaryPageNumber: primaryPage?.pageNumber ?? null,\n primaryPageTop:\n primaryPage == null ? null : primaryPage.top - viewportRect.top,\n primaryPageWidth: primaryPage?.width ?? null,\n renderPageNumbers: [...state.renderPageNumbers],\n renderScale: state.renderScale,\n scrollHeight: viewportElement.scrollHeight,\n scrollPageOffset: metrics.scrollPageOffset,\n sidebarOpen: shell?.root.dataset.fileViewerSidebarOpen ?? null,\n sidebarState: shell?.root.dataset.fileViewerSidebarState ?? null,\n sidebarWidth: shell?.sidebar?.getBoundingClientRect().width ?? null,\n timestamp: performance.now(),\n toInlineSize: state.rendererFrame.toInlineSize,\n transform: transform && transform !== \"none\" ? transform : null,\n visiblePageNumbers: [...state.visiblePageNumbers],\n visibleRenderedPageNumbers,\n visualHeight: surfaceRect.height,\n visualLeft: surfaceRect.left - viewportRect.left,\n visualTop: surfaceRect.top - viewportRect.top,\n visualWidth: surfaceRect.width,\n };\n}\n\ntype PdfViewerTelemetryShell = {\n gap: HTMLElement;\n root: HTMLElement;\n sidebar: HTMLElement | null;\n trigger: HTMLButtonElement;\n};\n\nfunction getPdfViewerTelemetryShell(\n viewportElement: HTMLElement | null,\n): PdfViewerTelemetryShell | null {\n const root = viewportElement?.closest(\n '[data-slot=\"file-viewer-root\"]',\n );\n const trigger = root?.querySelector(\n '[data-slot=\"file-viewer-sidebar-trigger\"]',\n );\n const gap = root?.querySelector(\n '[data-slot=\"file-viewer-sidebar-gap\"]',\n );\n\n if (!root || !trigger || !gap) return null;\n\n return {\n gap,\n root,\n sidebar: root.querySelector(\n '[data-slot=\"file-viewer-sidebar\"]',\n ),\n trigger,\n };\n}\n\ntype PdfViewerTelemetryPage = {\n bottom: number;\n canvasBitmapHeight: number | null;\n canvasBitmapWidth: number | null;\n canvasCssHeight: number | null;\n canvasCssWidth: number | null;\n canvasInkRatio: number | null;\n canvasPixelSignature: string | null;\n canvasRenderSource: string | null;\n canvasRenderStatus: string | null;\n hasCanvasPixels: boolean;\n height: number;\n isVisible: boolean;\n left: number;\n pageNumber: number;\n top: number;\n width: number;\n};\n\nfunction readPdfViewerTelemetryPages({\n pdfRoot,\n viewportRect,\n}: {\n pdfRoot: HTMLElement | null;\n viewportRect: DOMRect;\n}): PdfViewerTelemetryPage[] {\n if (!pdfRoot) return [];\n\n return Array.from(\n pdfRoot.querySelectorAll('[data-slot=\"pdf-page\"]'),\n )\n .map((element) => {\n const rect = element.getBoundingClientRect();\n const canvas = element.querySelector(\"canvas\");\n const canvasRect = canvas?.getBoundingClientRect();\n const canvasBitmapWidth =\n canvas instanceof HTMLCanvasElement ? canvas.width : null;\n const canvasBitmapHeight =\n canvas instanceof HTMLCanvasElement ? canvas.height : null;\n const pixelSample =\n canvas instanceof HTMLCanvasElement\n ? readPdfTelemetryCanvasPixels(canvas)\n : null;\n\n return {\n bottom: rect.bottom,\n canvasBitmapHeight,\n canvasBitmapWidth,\n canvasCssHeight: canvasRect?.height ?? null,\n canvasCssWidth: canvasRect?.width ?? null,\n canvasInkRatio: pixelSample?.inkRatio ?? null,\n canvasPixelSignature: pixelSample?.signature ?? null,\n canvasRenderSource: canvas?.dataset.pdfRenderSource ?? null,\n canvasRenderStatus: canvas?.dataset.pdfRenderStatus ?? null,\n hasCanvasPixels:\n (canvasBitmapWidth ?? 0) > 0 && (canvasBitmapHeight ?? 0) > 0,\n height: rect.height,\n isVisible:\n rect.width > 1 &&\n rect.height > 1 &&\n rect.bottom > viewportRect.top + 1 &&\n rect.top < viewportRect.bottom - 1,\n left: rect.left,\n pageNumber: Number(element.dataset.page ?? 0),\n top: rect.top,\n width: rect.width,\n };\n })\n .filter((page) => page.pageNumber > 0)\n .sort((left, right) => left.pageNumber - right.pageNumber);\n}\n\nfunction getPdfTelemetryPrimaryPage({\n marker,\n pages,\n}: {\n marker: number;\n pages: readonly PdfViewerTelemetryPage[];\n}) {\n const visiblePages = pages.filter((page) => page.isVisible);\n if (visiblePages.length === 0) return null;\n\n return (\n visiblePages.find((page) => page.top <= marker && page.bottom >= marker) ??\n visiblePages.reduce((nearest, page) =>\n Math.abs(page.top - marker) < Math.abs(nearest.top - marker)\n ? page\n : nearest,\n )\n );\n}\n\n// Downsample the page canvas to 8x8 with a GPU-side drawImage and do a single\n// 64-pixel readback: per-point getImageData forces one full GPU->CPU sync per\n// call and would inflate the main-thread work this telemetry measures. The\n// downsampled cells average their region, so any text or figure reads as\n// non-white ink while a wiped buffer reads fully blank — presence and status\n// attributes cannot distinguish those two.\nconst PDF_TELEMETRY_CANVAS_PROBE_SIZE = 8;\nlet pdfTelemetryCanvasProbe: {\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n} | null = null;\n\nfunction getPdfTelemetryCanvasProbe() {\n if (pdfTelemetryCanvasProbe) return pdfTelemetryCanvasProbe;\n const canvas = document.createElement(\"canvas\");\n canvas.width = PDF_TELEMETRY_CANVAS_PROBE_SIZE;\n canvas.height = PDF_TELEMETRY_CANVAS_PROBE_SIZE;\n const context = canvas.getContext(\"2d\", { willReadFrequently: true });\n if (!context) return null;\n pdfTelemetryCanvasProbe = { canvas, context };\n return pdfTelemetryCanvasProbe;\n}\n\nfunction readPdfTelemetryCanvasPixels(canvas: HTMLCanvasElement) {\n if (canvas.width <= 0 || canvas.height <= 0) return null;\n const probe = getPdfTelemetryCanvasProbe();\n if (!probe) return null;\n\n const size = PDF_TELEMETRY_CANVAS_PROBE_SIZE;\n let hash = 2166136261;\n let inkCount = 0;\n\n try {\n probe.context.clearRect(0, 0, size, size);\n probe.context.drawImage(canvas, 0, 0, size, size);\n const { data } = probe.context.getImageData(0, 0, size, size);\n for (let index = 0; index < data.length; index += 4) {\n const red = data[index];\n const green = data[index + 1];\n const blue = data[index + 2];\n const alpha = data[index + 3];\n const luminance = red * 0.2126 + green * 0.7152 + blue * 0.0722;\n if (alpha > 0 && luminance < 245) inkCount += 1;\n hash ^= red;\n hash = Math.imul(hash, 16777619);\n hash ^= green;\n hash = Math.imul(hash, 16777619);\n hash ^= blue;\n hash = Math.imul(hash, 16777619);\n hash ^= alpha;\n hash = Math.imul(hash, 16777619);\n }\n } catch {\n return null;\n }\n\n return {\n inkRatio: inkCount / (size * size),\n signature: hash.toString(16),\n };\n}\n\nfunction collectPdfViewerTelemetryMetrics(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric[] {\n return [\n collectPdfTelemetryBlinkMetric(runs),\n collectPdfTelemetryHorizontalMetric(runs),\n collectPdfTelemetryVerticalMetric(runs),\n collectPdfTelemetrySettleJitterMetric(runs),\n collectPdfTelemetryResizeLinearityMetric(runs),\n collectPdfTelemetryScrollStabilityMetric(runs),\n collectPdfTelemetryRendererContinuityMetric(runs),\n collectPdfTelemetryCanvasContinuityMetric(runs),\n collectPdfTelemetryRasterHeadroomMetric(runs),\n collectPdfTelemetryVirtualWindowRetentionMetric(runs),\n ];\n}\n\nfunction collectPdfTelemetryBlinkMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n const frames = getPdfTelemetryAllSamples(runs).filter(\n (sample) => sample.hasBlink,\n ).length;\n\n return {\n budget: \"0 blink frames\",\n detail:\n \"A blink frame has no visible rendered page, a missing canvas, or a failed visible canvas.\",\n id: \"blink\",\n label: \"Blink\",\n passed: frames === 0,\n value: `${frames} frames`,\n };\n}\n\nfunction collectPdfTelemetryHorizontalMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n const reversals = Math.max(\n 0,\n ...runs.map((run) =>\n Math.max(\n countPdfTelemetryReversals(\n getPdfTelemetryMotionSamples(run).map(\n (sample) => sample.primaryPageLeft,\n ),\n PDF_TELEMETRY_REVERSAL_EPSILON_PX,\n ),\n countPdfTelemetryReversals(\n getPdfTelemetryMotionSamples(run).map(\n (sample) => sample.primaryPageCenterX,\n ),\n PDF_TELEMETRY_REVERSAL_EPSILON_PX,\n ),\n ),\n ),\n );\n const overshoot = Math.max(\n 0,\n ...runs.flatMap((run) => [\n getPdfTelemetryRunOvershoot(run, (sample) => sample.primaryPageLeft),\n getPdfTelemetryRunOvershoot(run, (sample) => sample.primaryPageCenterX),\n ]),\n );\n\n return {\n budget: \"0 x reversals over 1px, <= 2px x overshoot\",\n detail: \"Tracks the visible page left edge and center during shell motion.\",\n id: \"horizontal-back-and-forth\",\n label: \"Horizontal back and forth\",\n passed: reversals === 0 && overshoot <= 2,\n value: `${reversals} reversals / ${formatPdfTelemetryNumber(\n overshoot,\n 2,\n )}px`,\n };\n}\n\nfunction collectPdfTelemetryVerticalMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n const overshoot = Math.max(\n 0,\n ...runs.flatMap((run) => [\n getPdfTelemetryRunOvershoot(run, (sample) => sample.primaryPageTop),\n getPdfTelemetryRunOvershoot(run, (sample) => sample.logicalScrollTop),\n ]),\n );\n\n return {\n budget: \"<= 4px\",\n detail:\n \"Visible page top and logical scroll position should stay inside their start/end intervals.\",\n id: \"vertical-overshoot\",\n label: \"Vertical overshoot\",\n passed: overshoot <= 4,\n value: `${formatPdfTelemetryNumber(overshoot, 2)}px`,\n };\n}\n\nfunction collectPdfTelemetrySettleJitterMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n const range = Math.max(\n 0,\n ...runs.flatMap((run) => {\n const settled = getPdfTelemetrySettledSamples(run);\n return [\n getPdfTelemetryRange(settled.map((sample) => sample.primaryPageLeft)),\n getPdfTelemetryRange(settled.map((sample) => sample.primaryPageTop)),\n ];\n }),\n );\n\n return {\n budget: \"<= 1px settled range\",\n detail:\n \"After endpoint geometry is reached, the visible page and logical scroll should not tremble.\",\n id: \"settle-jitter\",\n label: \"Settle jitter\",\n passed: range <= 1,\n value: `${formatPdfTelemetryNumber(range, 2)}px`,\n };\n}\n\nfunction collectPdfTelemetryResizeLinearityMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n const maxError = Math.max(\n 0,\n ...runs.map((run) => getPdfTelemetryResizeProgressError(run)),\n );\n\n return {\n budget: \"<= 20% progress error\",\n detail:\n \"Visible page width should progress with sidebar width instead of waiting for settle.\",\n id: \"resize-linearity\",\n label: \"Resize linearity\",\n passed: maxError <= 0.2,\n value: `${formatPdfTelemetryNumber(maxError * 100, 1)}%`,\n };\n}\n\nfunction collectPdfTelemetryScrollStabilityMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n const maxSlidingRange = Math.max(\n 0,\n ...runs.map((run) =>\n getPdfTelemetryRange(\n getPdfTelemetryMotionSamples(run).map(\n (sample) => sample.physicalScrollTop,\n ),\n ),\n ),\n );\n\n return {\n budget: \"<= 1px physical scroll range while sliding\",\n detail:\n \"The shell motion should not emit native scroll drift while the PDF surface is being transformed.\",\n id: \"scroll-stability\",\n label: \"Scroll stability\",\n passed: maxSlidingRange <= 1,\n value: `${formatPdfTelemetryNumber(maxSlidingRange, 2)}px`,\n };\n}\n\nfunction collectPdfTelemetryRendererContinuityMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n let missingPrimaryFrames = 0;\n let emptyRenderedFrames = 0;\n\n for (const run of runs) {\n const primaryPageNumber = run.before.primaryPageNumber;\n for (const sample of getPdfTelemetryLifecycleSamples(run)) {\n if (sample.visibleRenderedPageNumbers.length === 0)\n emptyRenderedFrames += 1;\n if (\n primaryPageNumber != null &&\n !sample.visibleRenderedPageNumbers.includes(primaryPageNumber)\n ) {\n missingPrimaryFrames += 1;\n }\n }\n }\n\n return {\n budget: \"0 blank rendered frames, 0 primary-page drops\",\n detail:\n \"The virtualized window must keep the visible rendered page mounted throughout motion and settle.\",\n id: \"renderer-continuity\",\n label: \"Renderer continuity\",\n passed: emptyRenderedFrames === 0 && missingPrimaryFrames === 0,\n value: `${emptyRenderedFrames} blank / ${missingPrimaryFrames} drops`,\n };\n}\n\nfunction collectPdfTelemetryCanvasContinuityMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n let missingCanvasFrames = 0;\n let failedCanvasFrames = 0;\n let whiteoutFrames = 0;\n\n for (const sample of getPdfTelemetryAllSamples(runs)) {\n if (\n sample.canvasBitmapWidth == null ||\n sample.canvasBitmapHeight == null ||\n sample.canvasBitmapWidth <= 0 ||\n sample.canvasBitmapHeight <= 0\n ) {\n missingCanvasFrames += 1;\n }\n if (\n sample.canvasRenderStatus === \"failed\" ||\n sample.canvasRenderStatus === \"cancelled\"\n ) {\n failedCanvasFrames += 1;\n }\n }\n\n // A whiteout is the blink presence checks cannot see: the same primary page\n // keeps a sized, \"ready\" canvas whose buffer momentarily holds zero ink —\n // a resize wiped it before the redraw landed.\n for (const run of runs) {\n const samples = [run.before, ...run.samples, run.after];\n for (let index = 1; index < samples.length; index += 1) {\n const previous = samples[index - 1];\n const current = samples[index];\n if (\n previous.primaryPageNumber != null &&\n previous.primaryPageNumber === current.primaryPageNumber &&\n previous.canvasInkRatio != null &&\n previous.canvasInkRatio > 0 &&\n current.canvasInkRatio === 0\n ) {\n whiteoutFrames += 1;\n }\n }\n }\n\n return {\n budget:\n \"0 missing canvas frames, 0 failed/cancelled visible canvases, 0 whiteouts\",\n detail:\n \"The primary visible page canvas must keep pixels while target raster work is pending — including its buffer contents, which must never wipe to blank mid-motion.\",\n id: \"canvas-continuity\",\n label: \"Canvas continuity\",\n passed:\n missingCanvasFrames === 0 &&\n failedCanvasFrames === 0 &&\n whiteoutFrames === 0,\n value: `${missingCanvasFrames} missing / ${failedCanvasFrames} failed / ${whiteoutFrames} whiteouts`,\n };\n}\n\nfunction collectPdfTelemetryRasterHeadroomMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n const minHeadroom = Math.min(\n 0,\n ...runs.flatMap((run) => {\n const maxCssWidth = Math.max(\n 0,\n ...getPdfTelemetryLifecycleSamples(run).map(\n (sample) => sample.primaryPageWidth ?? 0,\n ),\n );\n return getPdfTelemetryLifecycleSamples(run).map((sample) => {\n if (\n sample.canvasBitmapWidth == null ||\n sample.canvasBitmapWidth <= 0 ||\n sample.canvasCssWidth == null ||\n sample.canvasCssWidth <= 0 ||\n sample.primaryPageWidth == null ||\n sample.primaryPageWidth <= 0\n ) {\n return 0;\n }\n\n return sample.canvasBitmapWidth / sample.devicePixelRatio - maxCssWidth;\n });\n }),\n );\n\n return {\n budget: \">= -1px visible canvas backing headroom\",\n detail:\n \"Visible canvases should keep enough backing resolution for the largest page width in the sidebar cycle.\",\n id: \"raster-headroom\",\n label: \"Raster headroom\",\n passed: minHeadroom >= -1,\n value: `${formatPdfTelemetryNumber(minHeadroom, 2)}px`,\n };\n}\n\nfunction collectPdfTelemetryVirtualWindowRetentionMetric(\n runs: readonly PdfViewerTelemetryRun[],\n): PdfViewerTelemetryMetric {\n let droppedFrames = 0;\n\n for (const run of runs) {\n const primaryPageNumber = run.before.primaryPageNumber;\n if (primaryPageNumber == null) {\n droppedFrames += 1;\n continue;\n }\n\n for (const sample of getPdfTelemetryLifecycleSamples(run)) {\n if (!sample.renderPageNumbers.includes(primaryPageNumber)) {\n droppedFrames += 1;\n }\n }\n }\n\n return {\n budget: \"0 retained-window drops\",\n detail:\n \"The virtual render window must retain the pre-motion reading page until the shell motion settles.\",\n id: \"virtual-window-retention\",\n label: \"Virtual window retention\",\n passed: droppedFrames === 0,\n value: `${droppedFrames} drops`,\n };\n}\n\nfunction logPdfViewerTelemetryResult(result: PdfViewerTelemetryResult) {\n const metrics = result.metrics.map((metric) => ({\n budget: metric.budget,\n detail: metric.detail,\n id: metric.id,\n label: metric.label,\n passed: metric.passed,\n value: metric.value,\n }));\n const summary = {\n durationMs: Number(result.durationMs.toFixed(1)),\n failedMetricIds: metrics\n .filter((metric) => !metric.passed)\n .map((metric) => metric.id),\n metrics,\n passedMetricCount: metrics.filter((metric) => metric.passed).length,\n sampledFrameCount: result.sampledFrameCount,\n status: result.status,\n totalMetricCount: metrics.length,\n };\n\n console.info(\"[pdf-viewer:telemetry] result\", JSON.stringify(summary));\n console.info(\"[pdf-viewer:telemetry] full result\", JSON.stringify(result));\n console.table(metrics);\n}\n\nfunction getPdfTelemetryResizeProgressError(run: PdfViewerTelemetryRun) {\n const beforeGap = run.before.gapWidth;\n const afterGap = run.after.gapWidth;\n const beforeWidth = run.before.primaryPageWidth;\n const afterWidth = run.after.primaryPageWidth;\n\n if (\n beforeGap == null ||\n afterGap == null ||\n beforeWidth == null ||\n afterWidth == null ||\n Math.abs(afterGap - beforeGap) <= 8 ||\n Math.abs(afterWidth - beforeWidth) <= 8\n ) {\n return 0;\n }\n\n return Math.max(\n 0,\n ...getPdfTelemetryMotionSamples(run).map((sample) => {\n const gapProgress = getPdfTelemetryProgress(\n sample.gapWidth,\n beforeGap,\n afterGap,\n );\n const widthProgress = getPdfTelemetryProgress(\n sample.primaryPageWidth,\n beforeWidth,\n afterWidth,\n );\n return Math.abs(gapProgress - widthProgress);\n }),\n );\n}\n\nfunction getPdfTelemetryProgress(\n value: number | null,\n start: number,\n end: number,\n) {\n if (value == null) return 1;\n const travel = end - start;\n if (Math.abs(travel) <= 0.001) return 1;\n return clampPdfTelemetryNumber((value - start) / travel, 0, 1);\n}\n\nfunction getPdfTelemetryRunOvershoot(\n run: PdfViewerTelemetryRun,\n getValue: (sample: PdfViewerTelemetrySample) => number | null,\n) {\n const start = getValue(run.before);\n const end = getValue(run.after);\n if (start == null || end == null) return 0;\n\n const min = Math.min(start, end);\n const max = Math.max(start, end);\n\n return Math.max(\n 0,\n ...getPdfTelemetryMotionSamples(run).map((sample) => {\n const value = getValue(sample);\n if (value == null) return 0;\n if (value < min) return min - value;\n if (value > max) return value - max;\n return 0;\n }),\n );\n}\n\nfunction getPdfTelemetrySettledSamples(run: PdfViewerTelemetryRun) {\n const afterGap = run.after.gapWidth;\n const afterWidth = run.after.primaryPageWidth;\n const settledIndex = run.samples.findIndex(\n (sample) =>\n afterGap != null &&\n afterWidth != null &&\n sample.gapWidth != null &&\n sample.primaryPageWidth != null &&\n Math.abs(sample.gapWidth - afterGap) <= PDF_TELEMETRY_SETTLE_EPSILON_PX &&\n Math.abs(sample.primaryPageWidth - afterWidth) <=\n PDF_TELEMETRY_SETTLE_EPSILON_PX,\n );\n\n return settledIndex < 0\n ? [run.after]\n : [...run.samples.slice(settledIndex), run.after];\n}\n\nfunction getPdfTelemetryMotionSamples(run: PdfViewerTelemetryRun) {\n return run.samples.filter((sample) => sample.motionPhase === \"sliding\");\n}\n\nfunction getPdfTelemetryLifecycleSamples(run: PdfViewerTelemetryRun) {\n return [...run.samples, run.after];\n}\n\nfunction getPdfTelemetryAllSamples(runs: readonly PdfViewerTelemetryRun[]) {\n return runs.flatMap((run) => [run.before, ...run.samples, run.after]);\n}\n\nfunction countPdfTelemetryReversals(\n values: readonly (number | null)[],\n epsilon: number,\n) {\n let direction = 0;\n let reversals = 0;\n let previous: number | null = null;\n\n for (const value of values) {\n if (value == null || !Number.isFinite(value)) continue;\n if (previous === null) {\n previous = value;\n continue;\n }\n\n const delta = value - previous;\n previous = value;\n if (Math.abs(delta) <= epsilon) continue;\n\n const nextDirection = delta > 0 ? 1 : -1;\n if (direction !== 0 && nextDirection !== direction) reversals += 1;\n direction = nextDirection;\n }\n\n return reversals;\n}\n\nfunction getPdfTelemetryRange(values: readonly (number | null)[]) {\n const finiteValues = values.filter(\n (value): value is number => value != null && Number.isFinite(value),\n );\n if (finiteValues.length === 0) return 0;\n return Math.max(...finiteValues) - Math.min(...finiteValues);\n}\n\nfunction nextPdfTelemetryAnimationFrame() {\n return new Promise((resolve) => requestAnimationFrame(() => resolve()));\n}\n\nfunction clampPdfTelemetryNumber(value: number, min: number, max: number) {\n return Math.min(max, Math.max(min, value));\n}\n\nfunction formatPdfTelemetryNumber(value: number, fractionDigits: number) {\n return Number.isFinite(value) ? Number(value.toFixed(fractionDigits)) : 0;\n}\n",
"type": "registry:ui",
"target": "@ui/pdf-viewer-telemetry.ts"
}
],
"type": "registry:ui"
}