# `@monime/pdfio`

A lightweight, zero-config PDF viewer component for React. Built on top of `pdfjs-dist`, styled with Tailwind CSS v4, and bundled with Vite.

## Features

- Render PDFs from a URL, `ArrayBuffer`, or `URL` object
- Page navigation with prev / next controls and a click-to-jump page input
- Zoom in, zoom out, preset zoom levels, fit-to-width, and fit-to-height
- Fullscreen mode
- **Watermark overlay** — tiled diagonal text on every page, fully customisable
- HiDPI / Retina-aware canvas rendering
- ESM + CJS dual build, ships TypeScript declarations

## Install

```bash
# npm
npm install @monime/pdfio

# pnpm
pnpm add @monime/pdfio

# yarn
yarn add @monime/pdfio
```

Peer dependencies: `react >=18` and `react-dom >=18` (or v19).  
`pdfjs-dist` is loaded dynamically at runtime — no extra install needed.

## Usage

```tsx
import { PDFViewer } from '@monime/pdfio';
import '@monime/pdfio/style.css';

export function Example() {
  return (
    <div style={{ height: '100vh' }}>
      <PDFViewer src="https://example.com/document.pdf" />
    </div>
  );
}
```

The component fills the height of its container, so give the wrapper a defined height.

## Props

| Prop        | Type                        | Default     | Description                                      |
| ----------- | --------------------------- | ----------- | ------------------------------------------------ |
| `src`       | `string \| ArrayBuffer \| URL` | —           | PDF source. Omit (or pass `undefined`) to show the empty state. |
| `watermark` | `string \| WatermarkConfig` | —           | Watermark text stamped diagonally across every page. |

## Watermark

Pass a plain string for a quick stamp, or a `WatermarkConfig` object for full control.

```tsx
{/* Quick string */}
<PDFViewer src={url} watermark="CONFIDENTIAL" />

{/* Full config */}
<PDFViewer
  src={url}
  watermark={{
    text: "DRAFT",
    color: "rgba(220, 38, 38, 0.15)",
    fontSize: 32,
    angle: -40,
    gap: 60,
    fontFamily: "Georgia, serif",
    fontWeight: "700",
  }}
/>
```

### `WatermarkConfig`

| Property     | Type     | Default                  | Description                                          |
| ------------ | -------- | ------------------------ | ---------------------------------------------------- |
| `text`       | `string` | —                        | The text to repeat across each page.                 |
| `color`      | `string` | `"rgba(0,0,0,0.12)"`     | Any valid CSS color string.                          |
| `fontSize`   | `number` | `28`                     | Base font size in px (scales automatically with zoom). |
| `angle`      | `number` | `-35`                    | Rotation angle in degrees.                           |
| `gap`        | `number` | `80`                     | Horizontal spacing between repeated labels in px.    |
| `fontFamily` | `string` | `"sans-serif"`           | CSS font-family value.                               |
| `fontWeight` | `string` | `"600"`                  | CSS font-weight value.                               |

## Local development

```bash
pnpm install
pnpm dev
```

## Build the library

```bash
pnpm build
```

Output in `dist/`:

| File              | Format |
| ----------------- | ------ |
| `index.js`        | ESM    |
| `index.cjs`       | CJS    |
| `index.d.ts`      | Types  |
| `style.css`       | CSS    |

## Build the demo app

```bash
pnpm build:demo
```

Writes a standalone demo to `demo-dist/`.

## Publish

Bump the version in `package.json`, then:

```bash
pnpm publish --access public
```
