@monime/pdfio 0.1.5 → 0.1.7

package/README.md

@@ -1,39 +1,92 @@
 # `@monime/pdfio`
 
-A simple custom PDF viewer for React, built with Vite and managed with `pnpm`.
+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
 
-- Preview PDFs from a remote URL, `File`, `Blob`, or `Uint8Array`
-- Built-in previous/next page controls
-- Zoom in, zoom out, and reset actions
-- Vite-based demo app for local development
-- Library build ready to publish to npm
+- 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
-pnpm add @monime/pdfio react react-dom
+# npm
+npm install @monime/pdfio
+
+# pnpm
+pnpm add @monime/pdfio
+
+# yarn
+yarn add @monime/pdfio
 ```
 
-This package also relies on `pdfjs-dist`, which is installed automatically as a dependency.
+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 { PDFViewer } from '@monime/pdfio';
 import '@monime/pdfio/style.css';
 
 export function Example() {
   return (
-    <PdfViewer
-      file="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
-      height={700}
-    />
+    <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
@@ -41,30 +94,32 @@ pnpm install
 pnpm dev
 ```
 
-## Build the package
+## Build the library
 
 ```bash
 pnpm build
 ```
 
-This generates:
+Output in `dist/`:
 
-- `dist/index.js`
-- `dist/index.cjs`
-- `dist/index.d.ts`
-- `dist/style.css`
+| File              | Format |
+| ----------------- | ------ |
+| `index.js`        | ESM    |
+| `index.cjs`       | CJS    |
+| `index.d.ts`      | Types  |
+| `style.css`       | CSS    |
 
-## Demo build
+## Build the demo app
 
 ```bash
 pnpm build:demo
 ```
 
-This writes the standalone demo app to `demo-dist/`.
+Writes a standalone demo to `demo-dist/`.
 
 ## Publish
 
-Update the package version, then publish with:
+Bump the version in `package.json`, then:
 
 ```bash
 pnpm publish --access public

package/dist/Icons.d.ts

@@ -0,0 +1,19 @@
+type IconProps = {
+    size?: number;
+    className?: string;
+};
+export declare const Icons: {
+    ChevronLeft: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    ChevronRight: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    ZoomIn: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    ZoomOut: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    Maximize: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    Minimize: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    ArrowLeftRight: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    ArrowUpDown: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    Loader2: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    AlertTriangle: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+    FileText: ({ size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=Icons.d.ts.map

package/dist/Icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../src/lib/Icons.tsx"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuBF,eAAO,MAAM,KAAK;uCACwB,SAAS;wCAKR,SAAS;kCAKf,SAAS;mCAQR,SAAS;oCAOR,SAAS;oCAQT,SAAS;0CAQH,SAAS;uCAQZ,SAAS;mCAQb,SAAS;yCAKH,SAAS;oCAOd,SAAS;CAS/C,CAAC"}

package/dist/PdfViewer.d.ts

@@ -1,5 +1,22 @@
+export interface WatermarkConfig {
+    text: string;
+    /** CSS color string — default: "rgba(0,0,0,0.12)" */
+    color?: string;
+    /** Font size in px at scale=1 — default: 28 */
+    fontSize?: number;
+    /** Rotation angle in degrees — default: -35 */
+    angle?: number;
+    /** Horizontal gap between repeated labels in px — default: 80 */
+    gap?: number;
+    /** Font family — default: "sans-serif" */
+    fontFamily?: string;
+    /** Font weight — default: "600" */
+    fontWeight?: string;
+}
 export interface PDFViewerProps {
-    src?: string;
+    src?: string | ArrayBuffer | URL;
+    /** Pass a string for a quick watermark, or a WatermarkConfig for full control. */
+    watermark?: string | WatermarkConfig;
 }
-export declare function PDFViewer({ src, }: PDFViewerProps): import("react/jsx-runtime").JSX.Element;
+export declare function PDFViewer({ src, watermark }: PDFViewerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PdfViewer.d.ts.map

package/dist/PdfViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdfViewer.d.ts","sourceRoot":"","sources":["../src/lib/PdfViewer.tsx"],"names":[],"mappings":"AAkCA,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAID,wBAAgB,SAAS,CAAC,EACxB,GAA8C,GAC/C,EAAE,cAAc,2CAobhB"}
+{"version":3,"file":"PdfViewer.d.ts","sourceRoot":"","sources":["../src/lib/PdfViewer.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,GAAG,CAAC;IACjC,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC;CACtC;AA0ED,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,cAAc,2CA6d3D"}