PDF Viewer

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7import {
8  FileViewer,
9  FileViewerContent,
10  FileViewerHeader,
11  FileViewerControls,
12  FileViewerTitle,
13  FileViewerInset,
14  FileViewerProvider,
15  FileViewerViewport,
16} from "./file-viewer";
17import {
18  PdfResourceContent,
19  type PdfResourceContentProps,
20  type PdfViewerContentProps,
21} from "./pdf-viewer-content";
22import {
23  PdfViewerPages,
24  PdfViewerProvider,
25  type PdfDocumentSource,
26} from "./pdf-viewer-context";
27import type { PdfViewerHandle } from "./pdf-viewer-types";
28 
29export type {
30  PageOverlayProps,
31  PdfPageAreaTarget,
32  PdfPageRenderSource,
33  PdfPageRenderStatus,
34  PdfPageRenderTiming,
35  PdfViewerHandle,
36  PdfViewerPerformanceOptions,
37} from "./pdf-viewer-types";
38export {
39  PdfViewerPages,
40  PdfViewerProvider,
41  usePdfViewerThumbnails,
42  type PdfDocumentSource,
43} from "./pdf-viewer-context";
44export {
45  PdfResourceContent,
46  type PdfResourceContentProps,
47  type PdfViewerContentProps,
48} from "./pdf-viewer-content";
49export {
50  PdfThumbnailRail,
51  PdfViewerThumbnails,
52  type PdfThumbnailRailProps,
53  type PdfViewerThumbnailsProps,
54} from "./pdf-viewer-thumbnails";
55 
56export interface PdfHighlightProps extends React.ComponentProps<"div"> {
57  /** Normalized box, each field a percentage [0, 100] of the page. */
58  area: { left: number; top: number; width: number; height: number };
59}
60 
61export function PdfHighlight({
62  area,
63  className,
64  style,
65  ...props
66}: PdfHighlightProps) {
67  return (
68    <div
69      data-slot="pdf-highlight"
70      className={cn(
71        "border-primary/70 bg-primary/12 pointer-events-none absolute z-10 rounded-[2px] border shadow-[0_4px_16px_rgb(0_0_0_/_8%)]",
72        className,
73      )}
74      style={{
75        left: `${area.left}%`,
76        top: `${area.top}%`,
77        width: `${area.width}%`,
78        height: `${area.height}%`,
79        ...style,
80      }}
81      {...props}
82    />
83  );
84}
85 
86export interface PdfViewerProps extends PdfViewerContentProps {
87  /** Canonical PDF source. URL sources preserve PDF.js range-loading behavior. */
88  source: PdfDocumentSource;
89}
90 
91export const PdfViewer = React.forwardRef<PdfViewerHandle, PdfViewerProps>(
92  function PdfViewer(props, ref) {
93    const {
94      source,
95      className,
96      bare = false,
97      controls = true,
98      download = true,
99      ...pagesProps
100    } = props;
101    return (
102      <FileViewerProvider source={source}>
103        <FileViewer
104          className={cn(
105            "h-full",
106// … truncated