pdf-tsx 0.4.0 → 0.5.0

package/README.md

@@ -1,337 +1,350 @@
-# pdf-tsx
-
-A fully-featured, composable PDF viewer component for React.
-
-## Installation
-
-```bash
-npm install pdf-tsx
-```
-
-### Peer dependencies
-
-```bash
-npm install react react-dom pdfjs-dist
-```
-
----
-
-## CSS
-
-Import the stylesheet once in your app entry point:
-
-```ts
-import 'pdf-tsx/dist/es/pdf-tsx.css'
-```
-
----
-
-## Quick start
-
-`PDFViewer` requires a `workerSrc` prop — the URL of the pdfjs worker script. The easiest way is to serve it from the `pdfjs-dist` package directly:
-
-```tsx
-import { PDFViewer } from 'pdf-tsx'
-import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
-
-function App() {
-  const [file, setFile] = useState<File | null>(null)
-
-  if (!file) return <input type="file" accept=".pdf" onChange={e => setFile(e.target.files![0])} />
-
-  return <PDFViewer file={file} workerSrc={workerUrl} />
-}
-```
-
-> The `?url` suffix is a Vite feature that returns the asset URL as a string. If you use a different bundler, import the worker URL accordingly or pass a CDN URL:
-> ```ts
-> workerSrc="https://unpkg.com/pdfjs-dist@5/build/pdf.worker.min.mjs"
-> ```
-
----
-
-## Icons
-
-Feature components do not bundle any icon library. Each component that shows an icon requires you to pass it explicitly as a prop — use any icon library or custom SVG you prefer.
-
-```tsx
-import { FiZoomIn, FiZoomOut } from 'react-icons/fi'
-
-<PDFZoomControls zoomInIcon={<FiZoomIn size={16} />} zoomOutIcon={<FiZoomOut size={16} />} />
-```
-
----
-
-## PDFViewer
-
-The main component. Must wrap all feature components.
-
-```tsx
-<PDFViewer
-  file={file}
-  workerSrc={workerUrl}
-  sidebar={<PDFSidebar panels={[...]} />}
-  toolbar={<>...</>}
-  onChangeFile={(newFile) => setFile(newFile)}
-/>
-```
-
-| Prop             | Type                                                    | Required | Description                                          |
-|------------------|---------------------------------------------------------|----------|------------------------------------------------------|
-| `file`           | `File`                                                  | yes      | The PDF file object to display                       |
-| `workerSrc`      | `string`                                                | yes      | URL of the pdfjs worker script (see Quick start)     |
-| `sidebar`        | `ReactNode`                                             | no       | Content rendered on the left side                    |
-| `toolbar`        | `ReactNode`                                             | no       | Content rendered in the top toolbar                  |
-| `onChangeFile`   | `(file: File) => void`                                  | no       | Called when the user opens a different file          |
-| `defaultTheme`   | `"light" \| "dark"`                                     | no       | Initial theme mode (default: `"light"`)              |
-| `themeOverrides` | `{ light?: Partial<Theme>; dark?: Partial<Theme> }`     | no       | Override individual theme tokens (see Theming)       |
-| `defaultFit`     | `"width" \| "page"`                                     | no       | Initial zoom mode when a PDF is loaded               |
-| `className`      | `string`                                                | no       | CSS class applied to the root layout element         |
-| `style`          | `React.CSSProperties`                                   | no       | Inline style applied to the root layout element      |
-
----
-
-## Theming
-
-`PDFViewer` ships with built-in light and dark themes. The default is `"light"`. Use `defaultTheme` to set the initial mode and `themeOverrides` to override individual tokens without replacing the whole theme.
-
-```tsx
-import { PDFViewer, darkTheme } from 'pdf-tsx'
-
-<PDFViewer
-  themeOverrides={{
-    dark:  { accent: '#e11d48', accentHover: '#be123c', accentDark: '#9f1239' },
-    light: { accent: '#e11d48', accentHover: '#be123c', accentDark: '#9f1239' },
-  }}
-  ...
-/>
-```
-
-Both `darkTheme` and `lightTheme` are exported so you can spread them as a base:
-
-```tsx
-import { darkTheme } from 'pdf-tsx'
-
-themeOverrides={{ dark: { ...darkTheme, bg: '#0f0f0f' } }}
-```
-
-**Theme tokens** (`Theme` interface):
-
-| Token              | Description                          |
-|--------------------|--------------------------------------|
-| `bg`               | Main background                      |
-| `surface`          | Card / panel surface                 |
-| `surfaceHover`     | Surface hover state                  |
-| `border`           | Default border color                 |
-| `borderLight`      | Subtle border color                  |
-| `scrollArea`       | Scroll container background          |
-| `textPrimary`      | Primary text                         |
-| `textSecondary`    | Secondary text                       |
-| `textMuted`        | Muted / placeholder text             |
-| `textPlaceholder`  | Input placeholder text               |
-| `accent`           | Accent / interactive color           |
-| `accentHover`      | Accent hover state                   |
-| `accentDark`       | Accent dark variant                  |
-| `accentLight`      | Accent light variant                 |
-| `accentSubtle`     | Accent with low opacity              |
-| `panelBg`          | Sidebar panel background             |
-| `panelBorder`      | Sidebar panel border                 |
-| `panelHeaderBg`    | Sidebar panel header background      |
-| `shadowPage`       | Drop shadow color for PDF pages      |
-
----
-
-## PDFSidebar
-
-A collapsible icon sidebar. Each panel has an icon button — clicking it toggles the panel open/closed. When collapsed via `PDFSidebarToggle`, the entire sidebar is hidden (`null`).
-
-```tsx
-import { PDFSidebar } from 'pdf-tsx'
-import { FiImage, FiList, FiChevronsLeft } from 'react-icons/fi'
-
-<PDFSidebar
-  collapseIcon={<FiChevronsLeft size={16} />}
-  panels={[
-    { icon: <FiImage size={18} />, label: 'Thumbnails', content: <PDFThumbnails /> },
-    { icon: <FiList size={18} />,  label: 'Outline',    content: <PDFOutline /> },
-  ]}
-/>
-```
-
-| Prop           | Type             | Description                                                      |
-|----------------|------------------|------------------------------------------------------------------|
-| `panels`       | `SidebarPanel[]` | Array of panels to display                                       |
-| `collapseIcon` | `ReactNode`      | If provided, renders a toggle button at the top of the icon bar to hide the sidebar |
-
-**SidebarPanel**
-
-| Field     | Type        | Description                            |
-|-----------|-------------|----------------------------------------|
-| `icon`    | `ReactNode` | Icon shown in the sidebar button bar   |
-| `label`   | `string`    | Panel title shown in the header        |
-| `content` | `ReactNode` | Content rendered inside the open panel |
-
-### Sidebar hide/show pattern
-
-Use `PDFSidebarToggle` in the toolbar alongside `PDFSidebar`. When the sidebar is open, the collapse button lives inside the sidebar. When collapsed, the expand button appears in the toolbar.
-
-```tsx
-import { PDFSidebar, PDFSidebarToggle } from 'pdf-tsx'
-import { FiChevronsLeft, FiChevronsRight } from 'react-icons/fi'
-
-<PDFViewer
-  sidebar={
-    <PDFSidebar
-      collapseIcon={<FiChevronsLeft size={16} />}
-      panels={[...]}
-    />
-  }
-  toolbar={
-    <>
-      <PDFSidebarToggle
-        collapseIcon={<FiChevronsLeft size={16} />}
-        expandIcon={<FiChevronsRight size={16} />}
-      />
-      {/* other toolbar items */}
-    </>
-  }
-/>
-```
-
----
-
-## Feature components
-
-All feature components must be rendered inside `<PDFViewer>`. They read and write state via `usePDFViewer()` internally.
-
-| Component              | Icon props                                          | Description                                          |
-|------------------------|-----------------------------------------------------|------------------------------------------------------|
-| `PDFThumbnails`        | —                                                   | Page thumbnail strip for quick navigation            |
-| `PDFOutline`           | —                                                   | Document outline / bookmarks tree                    |
-| `PDFAnnotations`       | —                                                   | Display PDF annotations                              |
-| `PDFAnnotationsIcon`   | `icon`                                              | Sidebar icon with annotation count badge             |
-| `PDFSignatures`        | —                                                   | Display PDF digital signatures                       |
-| `PDFSignaturesIcon`    | `icon`                                              | Sidebar icon with signature count badge              |
-| `PDFSearch`            | `searchIcon` `prevIcon` `nextIcon` `clearIcon`      | Full-text search with match highlighting             |
-| `PDFZoomControls`      | `zoomInIcon` `zoomOutIcon`                          | Zoom in / zoom out buttons with percentage display   |
-| `PDFPageFit`           | `fitWidthIcon` `fitPageIcon`                        | Fit-to-width and fit-to-page buttons                 |
-| `PDFRotationControl`   | `icon`                                              | Rotate page clockwise                                |
-| `PDFNavigation`        | `prevIcon` `nextIcon`                               | Previous / next page buttons with current page input |
-| `PDFDownloadButton`    | `icon`                                              | Download the current PDF file                        |
-| `PDFChangeFile`        | `icon`                                              | Button to open a new PDF file                        |
-| `PDFThemeToggle`       | `lightIcon` `darkIcon`                              | Toggle between dark and light mode                   |
-| `PDFPrintButton`       | `icon`                                              | Print the PDF using the browser's native print dialog|
-| `PDFSidebarToggle`     | `collapseIcon` `expandIcon`                         | Toolbar button to expand the sidebar — visible only when sidebar is hidden (see Sidebar hide/show pattern) |
-
-### Count badges
-
-`PDFSignaturesIcon` and `PDFAnnotationsIcon` are icon wrapper components intended for use as the `icon` prop in `PDFSidebar` panels. They render the provided icon with a small count badge in the top-right corner, automatically populated from the loaded PDF.
-
-```tsx
-import { PDFSidebar, PDFSignatures, PDFSignaturesIcon, PDFAnnotations, PDFAnnotationsIcon } from 'pdf-tsx'
-import { FiPenTool, FiMessageSquare } from 'react-icons/fi'
-
-<PDFSidebar panels={[
-  {
-    icon: <PDFSignaturesIcon icon={<FiPenTool size={17} />} />,
-    label: 'Signatures',
-    content: <PDFSignatures />,
-  },
-  {
-    icon: <PDFAnnotationsIcon icon={<FiMessageSquare size={17} />} />,
-    label: 'Annotations',
-    content: <PDFAnnotations />,
-  },
-]} />
-```
-
-The badge uses `var(--pdf-accent)` and respects `themeOverrides`.
-
----
-
-## Full example
-
-```tsx
-import { useState, Suspense, lazy } from 'react'
-import {
-  PDFSidebar, PDFSidebarToggle, PDFThumbnails, PDFOutline, PDFSearch,
-  PDFZoomControls, PDFPageFit, PDFRotationControl,
-  PDFNavigation, PDFDownloadButton, PDFChangeFile,
-  PDFThemeToggle, PDFPrintButton,
-  PDFSignatures, PDFSignaturesIcon,
-  PDFAnnotations, PDFAnnotationsIcon,
-} from 'pdf-tsx'
-import {
-  FiImage, FiList, FiPenTool, FiMessageSquare,
-  FiSearch, FiChevronUp, FiChevronDown, FiX,
-  FiZoomIn, FiZoomOut, FiAlignJustify, FiMaximize2, FiRotateCw,
-  FiChevronLeft, FiChevronRight, FiDownload, FiFolderPlus,
-  FiPrinter, FiSun, FiMoon, FiChevronsLeft, FiChevronsRight,
-} from 'react-icons/fi'
-import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
-
-const PDFViewer = lazy(() => import('pdf-tsx').then(m => ({ default: m.PDFViewer })))
-
-function App() {
-  const [file, setFile] = useState<File | null>(null)
-
-  if (!file) {
-    return (
-      <input
-        type="file"
-        accept=".pdf"
-        onChange={e => setFile(e.target.files![0])}
-      />
-    )
-  }
-
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <PDFViewer
-        file={file}
-        workerSrc={workerUrl}
-        onChangeFile={setFile}
-        sidebar={
-          <PDFSidebar
-            collapseIcon={<FiChevronsLeft size={16} />}
-            panels={[
-              { icon: <FiImage size={18} />, label: 'Thumbnails', content: <PDFThumbnails /> },
-              { icon: <FiList size={18} />,  label: 'Outline',    content: <PDFOutline /> },
-              { icon: <PDFSignaturesIcon icon={<FiPenTool size={17} />} />,       label: 'Signatures',   content: <PDFSignatures /> },
-              { icon: <PDFAnnotationsIcon icon={<FiMessageSquare size={17} />} />, label: 'Annotations', content: <PDFAnnotations /> },
-            ]}
-          />
-        }
-        toolbar={
-          <>
-            <PDFSidebarToggle
-              collapseIcon={<FiChevronsLeft size={16} />}
-              expandIcon={<FiChevronsRight size={16} />}
-            />
-            <PDFSearch
-              searchIcon={<FiSearch size={14} />}
-              prevIcon={<FiChevronUp size={14} />}
-              nextIcon={<FiChevronDown size={14} />}
-              clearIcon={<FiX size={14} />}
-            />
-            <PDFZoomControls zoomOutIcon={<FiZoomOut size={16} />} zoomInIcon={<FiZoomIn size={16} />} />
-            <PDFPageFit fitWidthIcon={<FiAlignJustify size={16} />} fitPageIcon={<FiMaximize2 size={16} />} />
-            <PDFRotationControl icon={<FiRotateCw size={16} />} />
-            <PDFNavigation prevIcon={<FiChevronLeft size={16} />} nextIcon={<FiChevronRight size={16} />} />
-            <PDFChangeFile icon={<FiFolderPlus size={16} />} />
-            <PDFDownloadButton icon={<FiDownload size={15} />} />
-            <PDFThemeToggle lightIcon={<FiSun size={16} />} darkIcon={<FiMoon size={16} />} />
-            <PDFPrintButton icon={<FiPrinter size={16} />} />
-          </>
-        }
-      />
-    </Suspense>
-  )
-}
-```
-
----
-
-## License
-
-MIT © Riccardo Grossano — see [LICENSE](./LICENSE) for full terms.
+# pdf-tsx
+
+A fully-featured, composable PDF viewer component for React.
+
+## Installation
+
+```bash
+npm install pdf-tsx
+```
+
+### Peer dependencies
+
+```bash
+npm install react react-dom pdfjs-dist
+```
+
+---
+
+## CSS
+
+Import the stylesheet once in your app entry point:
+
+```ts
+import 'pdf-tsx/dist/es/pdf-tsx.css'
+```
+
+---
+
+## Quick start
+
+`PDFViewer` requires a `workerSrc` prop — the URL of the pdfjs worker script. The easiest way is to serve it from the `pdfjs-dist` package directly:
+
+```tsx
+import { PDFViewer } from 'pdf-tsx'
+import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
+
+function App() {
+  const [file, setFile] = useState<File | null>(null)
+
+  if (!file) return <input type="file" accept=".pdf" onChange={e => setFile(e.target.files![0])} />
+
+  return <PDFViewer file={file} workerSrc={workerUrl} />
+}
+```
+
+> The `?url` suffix is a Vite feature that returns the asset URL as a string. If you use a different bundler, import the worker URL accordingly or pass a CDN URL:
+> ```ts
+> workerSrc="https://unpkg.com/pdfjs-dist@5/build/pdf.worker.min.mjs"
+> ```
+
+---
+
+## Icons
+
+Feature components do not bundle any icon library. Each component that shows an icon requires you to pass it explicitly as a prop — use any icon library or custom SVG you prefer.
+
+```tsx
+import { FiZoomIn, FiZoomOut } from 'react-icons/fi'
+
+<PDFZoomControls zoomInIcon={<FiZoomIn size={16} />} zoomOutIcon={<FiZoomOut size={16} />} />
+```
+
+---
+
+## PDFViewer
+
+The main component. Must wrap all feature components.
+
+```tsx
+<PDFViewer
+  file={file}
+  workerSrc={workerUrl}
+  sidebar={<PDFSidebar panels={[...]} />}
+  toolbar={<>...</>}
+  onChangeFile={(newFile) => setFile(newFile)}
+/>
+```
+
+| Prop             | Type                                                    | Required | Description                                          |
+|------------------|---------------------------------------------------------|----------|------------------------------------------------------|
+| `file`           | `File`                                                  | yes      | The PDF file object to display                       |
+| `workerSrc`      | `string`                                                | yes      | URL of the pdfjs worker script (see Quick start)     |
+| `sidebar`        | `ReactNode`                                             | no       | Content rendered on the left side                    |
+| `toolbar`        | `ReactNode`                                             | no       | Content rendered in the top toolbar                  |
+| `onChangeFile`   | `(file: File) => void`                                  | no       | Called when the user opens a different file          |
+| `defaultTheme`   | `"light" \| "dark"`                                     | no       | Initial theme mode (default: `"light"`)              |
+| `themeOverrides` | `{ light?: Partial<Theme>; dark?: Partial<Theme> }`     | no       | Override individual theme tokens (see Theming)       |
+| `defaultFit`     | `"width" \| "page"`                                     | no       | Initial zoom mode when a PDF is loaded               |
+| `className`      | `string`                                                | no       | CSS class applied to the root layout element         |
+| `style`          | `React.CSSProperties`                                   | no       | Inline style applied to the root layout element      |
+
+---
+
+## Theming
+
+`PDFViewer` ships with built-in light and dark themes. The default is `"light"`. Use `defaultTheme` to set the initial mode and `themeOverrides` to override individual tokens without replacing the whole theme.
+
+```tsx
+import { PDFViewer, darkTheme } from 'pdf-tsx'
+
+<PDFViewer
+  themeOverrides={{
+    dark:  { accent: '#e11d48', accentHover: '#be123c', accentDark: '#9f1239' },
+    light: { accent: '#e11d48', accentHover: '#be123c', accentDark: '#9f1239' },
+  }}
+  ...
+/>
+```
+
+Both `darkTheme` and `lightTheme` are exported so you can spread them as a base:
+
+```tsx
+import { darkTheme } from 'pdf-tsx'
+
+themeOverrides={{ dark: { ...darkTheme, bg: '#0f0f0f' } }}
+```
+
+**Theme tokens** (`Theme` interface):
+
+| Token              | Description                          |
+|--------------------|--------------------------------------|
+| `bg`               | Main background                      |
+| `surface`          | Card / panel surface                 |
+| `surfaceHover`     | Surface hover state                  |
+| `border`           | Default border color                 |
+| `borderLight`      | Subtle border color                  |
+| `scrollArea`       | Scroll container background          |
+| `textPrimary`      | Primary text                         |
+| `textSecondary`    | Secondary text                       |
+| `textMuted`        | Muted / placeholder text             |
+| `textPlaceholder`  | Input placeholder text               |
+| `accent`           | Accent / interactive color           |
+| `accentHover`      | Accent hover state                   |
+| `accentDark`       | Accent dark variant                  |
+| `accentLight`      | Accent light variant                 |
+| `accentSubtle`     | Accent with low opacity              |
+| `panelBg`          | Sidebar panel background             |
+| `panelBorder`      | Sidebar panel border                 |
+| `panelHeaderBg`    | Sidebar panel header background      |
+| `shadowPage`       | Drop shadow color for PDF pages      |
+
+---
+
+## PDFSidebar
+
+A collapsible icon sidebar. Each panel has an icon button — clicking it toggles the panel open/closed. When collapsed via `PDFSidebarToggle`, the entire sidebar is hidden (`null`).
+
+```tsx
+import { PDFSidebar } from 'pdf-tsx'
+import { FiImage, FiList, FiChevronsLeft } from 'react-icons/fi'
+
+<PDFSidebar
+  collapseIcon={<FiChevronsLeft size={16} />}
+  panels={[
+    { icon: <FiImage size={18} />, label: 'Thumbnails', content: <PDFThumbnails /> },
+    { icon: <FiList size={18} />,  label: 'Outline',    content: <PDFOutline /> },
+  ]}
+/>
+```
+
+| Prop           | Type             | Description                                                      |
+|----------------|------------------|------------------------------------------------------------------|
+| `panels`       | `SidebarPanel[]` | Array of panels to display                                       |
+| `collapseIcon` | `ReactNode`      | If provided, renders a toggle button at the top of the icon bar to hide the sidebar |
+
+**SidebarPanel**
+
+| Field     | Type        | Description                            |
+|-----------|-------------|----------------------------------------|
+| `icon`    | `ReactNode` | Icon shown in the sidebar button bar   |
+| `label`   | `string`    | Panel title shown in the header        |
+| `content` | `ReactNode` | Content rendered inside the open panel |
+
+### Sidebar hide/show pattern
+
+Use `PDFSidebarToggle` in the toolbar alongside `PDFSidebar`. When the sidebar is open, the collapse button lives inside the sidebar. When collapsed, the expand button appears in the toolbar.
+
+```tsx
+import { PDFSidebar, PDFSidebarToggle } from 'pdf-tsx'
+import { FiChevronsLeft, FiChevronsRight } from 'react-icons/fi'
+
+<PDFViewer
+  sidebar={
+    <PDFSidebar
+      collapseIcon={<FiChevronsLeft size={16} />}
+      panels={[...]}
+    />
+  }
+  toolbar={
+    <>
+      <PDFSidebarToggle
+        collapseIcon={<FiChevronsLeft size={16} />}
+        expandIcon={<FiChevronsRight size={16} />}
+      />
+      {/* other toolbar items */}
+    </>
+  }
+/>
+```
+
+---
+
+## Feature components
+
+All feature components must be rendered inside `<PDFViewer>`. They read and write state via `usePDFViewer()` internally.
+
+| Component              | Icon props                                          | Description                                          |
+|------------------------|-----------------------------------------------------|------------------------------------------------------|
+| `PDFThumbnails`        | —                                                   | Page thumbnail strip for quick navigation            |
+| `PDFOutline`           | —                                                   | Document outline / bookmarks tree                    |
+| `PDFAnnotations`       | —                                                   | Display PDF annotations                              |
+| `PDFAnnotationsIcon`   | `icon`                                              | Sidebar icon with annotation count badge             |
+| `PDFSignatures`        | —                                                   | Display PDF digital signatures                       |
+| `PDFSignaturesIcon`    | `icon`                                              | Sidebar icon with signature count badge              |
+| `PDFSearch`            | `searchIcon` `prevIcon` `nextIcon` `clearIcon`      | Full-text search with match highlighting             |
+| `PDFZoomControls`      | `zoomInIcon` `zoomOutIcon`                          | Zoom in / zoom out buttons with percentage display   |
+| `PDFPageFit`           | `fitWidthIcon` `fitPageIcon`                        | Fit-to-width and fit-to-page buttons                 |
+| `PDFRotationControl`   | `icon`                                              | Rotate page clockwise                                |
+| `PDFNavigation`        | `prevIcon` `nextIcon`                               | Previous / next page buttons with current page input |
+| `PDFDownloadButton`    | `icon`                                              | Download the current PDF file                        |
+| `PDFChangeFile`        | `icon`                                              | Button to open a new PDF file                        |
+| `PDFThemeToggle`       | `lightIcon` `darkIcon`                              | Toggle between dark and light mode                   |
+| `PDFPrintButton`       | `icon`                                              | Print the PDF using the browser's native print dialog|
+| `PDFSidebarToggle`     | `collapseIcon` `expandIcon`                         | Toolbar button to expand the sidebar — visible only when sidebar is hidden (see Sidebar hide/show pattern) |
+
+### Count badges
+
+`PDFSignaturesIcon` and `PDFAnnotationsIcon` are icon wrapper components intended for use as the `icon` prop in `PDFSidebar` panels. They render the provided icon with a small count badge in the top-right corner, automatically populated from the loaded PDF.
+
+```tsx
+import { PDFSidebar, PDFSignatures, PDFSignaturesIcon, PDFAnnotations, PDFAnnotationsIcon } from 'pdf-tsx'
+import { FiPenTool, FiMessageSquare } from 'react-icons/fi'
+
+<PDFSidebar panels={[
+  {
+    icon: <PDFSignaturesIcon icon={<FiPenTool size={17} />} />,
+    label: 'Signatures',
+    content: <PDFSignatures />,
+  },
+  {
+    icon: <PDFAnnotationsIcon icon={<FiMessageSquare size={17} />} />,
+    label: 'Annotations',
+    content: <PDFAnnotations />,
+  },
+]} />
+```
+
+The badge uses `var(--pdf-accent)` and respects `themeOverrides`.
+
+---
+
+## Full example
+
+```tsx
+import { useState, Suspense, lazy } from 'react'
+import {
+  PDFSidebar, PDFSidebarToggle, PDFThumbnails, PDFOutline, PDFSearch,
+  PDFZoomControls, PDFPageFit, PDFRotationControl,
+  PDFNavigation, PDFDownloadButton, PDFChangeFile,
+  PDFThemeToggle, PDFPrintButton,
+  PDFSignatures, PDFSignaturesIcon,
+  PDFAnnotations, PDFAnnotationsIcon,
+} from 'pdf-tsx'
+import {
+  FiImage, FiList, FiPenTool, FiMessageSquare,
+  FiSearch, FiChevronUp, FiChevronDown, FiX,
+  FiZoomIn, FiZoomOut, FiAlignJustify, FiMaximize2, FiRotateCw,
+  FiChevronLeft, FiChevronRight, FiDownload, FiFolderPlus,
+  FiPrinter, FiSun, FiMoon, FiChevronsLeft, FiChevronsRight,
+} from 'react-icons/fi'
+import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
+
+const PDFViewer = lazy(() => import('pdf-tsx').then(m => ({ default: m.PDFViewer })))
+
+function App() {
+  const [file, setFile] = useState<File | null>(null)
+
+  if (!file) {
+    return (
+      <input
+        type="file"
+        accept=".pdf"
+        onChange={e => setFile(e.target.files![0])}
+      />
+    )
+  }
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <PDFViewer
+        file={file}
+        workerSrc={workerUrl}
+        onChangeFile={setFile}
+        sidebar={
+          <PDFSidebar
+            collapseIcon={<FiChevronsLeft size={16} />}
+            panels={[
+              { icon: <FiImage size={18} />, label: 'Thumbnails', content: <PDFThumbnails /> },
+              { icon: <FiList size={18} />,  label: 'Outline',    content: <PDFOutline /> },
+              { icon: <PDFSignaturesIcon icon={<FiPenTool size={17} />} />,       label: 'Signatures',   content: <PDFSignatures /> },
+              { icon: <PDFAnnotationsIcon icon={<FiMessageSquare size={17} />} />, label: 'Annotations', content: <PDFAnnotations /> },
+            ]}
+          />
+        }
+        toolbar={
+          <>
+            <PDFSidebarToggle
+              collapseIcon={<FiChevronsLeft size={16} />}
+              expandIcon={<FiChevronsRight size={16} />}
+            />
+            <PDFSearch
+              searchIcon={<FiSearch size={14} />}
+              prevIcon={<FiChevronUp size={14} />}
+              nextIcon={<FiChevronDown size={14} />}
+              clearIcon={<FiX size={14} />}
+            />
+            <PDFZoomControls zoomOutIcon={<FiZoomOut size={16} />} zoomInIcon={<FiZoomIn size={16} />} />
+            <PDFPageFit fitWidthIcon={<FiAlignJustify size={16} />} fitPageIcon={<FiMaximize2 size={16} />} />
+            <PDFRotationControl icon={<FiRotateCw size={16} />} />
+            <PDFNavigation prevIcon={<FiChevronLeft size={16} />} nextIcon={<FiChevronRight size={16} />} />
+            <PDFChangeFile icon={<FiFolderPlus size={16} />} />
+            <PDFDownloadButton icon={<FiDownload size={15} />} />
+            <PDFThemeToggle lightIcon={<FiSun size={16} />} darkIcon={<FiMoon size={16} />} />
+            <PDFPrintButton icon={<FiPrinter size={16} />} />
+          </>
+        }
+      />
+    </Suspense>
+  )
+}
+```
+
+---
+
+## Performance
+
+`pdf-tsx` uses **virtual rendering**: only the pages near the current view are rendered at any one time. The default window is the current page ±2. Pages with an active highlight or search match are always included regardless of position.
+
+This means:
+- Initial load renders at most 5 pages, regardless of document length
+- Memory and CPU usage stay flat as the user scrolls through a large document
+- Pages that have already been rendered are kept in the DOM as the user scrolls, avoiding redundant re-renders
+
+No configuration is needed — this is the default behaviour.
+
+---
+
+## License
+
+MIT © Riccardo Grossano — see [LICENSE](./LICENSE) for full terms.