@embedpdf/svelte-pdf-viewer 2.0.0 → 2.0.1

package/README.md

@@ -1,8 +1,46 @@
-# @embedpdf/svelte-pdf-viewer
+<div align="center">
+  <a href="https://www.embedpdf.com/svelte-pdf-viewer">
+    <img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">
+  </a>
 
-Svelte component for embedding PDF documents with full-featured viewing capabilities.
+  <h1>Svelte PDF Viewer</h1>
+  <p>The easiest way to embed PDF files in your Svelte application with a complete, ready‑to‑use interface.</p>
 
-## Installation
+<a href="https://www.embedpdf.com/svelte-pdf-viewer"><img alt="Documentation" src="https://img.shields.io/badge/View%20Docs-0af?style=for-the-badge&labelColor=000000"></a>
+<a href="https://app.embedpdf.com/"><img alt="Live Demo" src="https://img.shields.io/badge/Try%20Live%20Demo-ff1493.svg?style=for-the-badge&labelColor=000000"></a>
+<a href="https://www.npmjs.com/package/@embedpdf/svelte-pdf-viewer"><img alt="NPM Version" src="https://img.shields.io/npm/v/@embedpdf/svelte-pdf-viewer?style=for-the-badge&labelColor=000000&color=blue"></a>
+
+</div>
+
+---
+
+## 📚 Documentation
+
+The full walkthrough, advanced examples, and API reference live in our docs site:
+
+👉 **[https://www.embedpdf.com/svelte-pdf-viewer](https://www.embedpdf.com/svelte-pdf-viewer)**
+
+---
+
+## 🚀 Introduction
+
+The `@embedpdf/svelte-pdf-viewer` package provides a complete, production-ready PDF viewing experience for Svelte applications.
+
+It is designed to be the fastest way to get a high-quality PDF viewer into your app. You don't need to build toolbars, handle layout logic, or worry about CSS—it just works.
+
+### Key Features
+
+- **Ready-to-use UI** — Includes a polished toolbar, sidebar, and thumbnails.
+- **Responsive** — Adapts seamlessly to mobile and desktop screens.
+- **Themable** — Built-in light/dark modes and support for custom brand colors.
+- **Configurable** — Easily disable features you don't need (e.g., printing or downloading).
+- **TypeScript** — Fully typed for a great developer experience.
+- **Svelte 4 & 5** — Works with both Svelte 4 and Svelte 5 projects.
+- **SvelteKit Ready** — Works seamlessly with SSR.
+
+---
+
+## 📦 Installation
 
 ```bash
 npm install @embedpdf/svelte-pdf-viewer
@@ -12,75 +50,131 @@ pnpm add @embedpdf/svelte-pdf-viewer
 yarn add @embedpdf/svelte-pdf-viewer
 ```
 
-## Usage
+---
+
+## 🛠 Basic Usage
+
+Import the `PDFViewer` component and render it with a PDF source.
 
 ```svelte
 <script>
   import { PDFViewer } from '@embedpdf/svelte-pdf-viewer';
+</script>
+
+<div style="height: 100vh;">
+  <PDFViewer
+    config={{
+      src: 'https://snippet.embedpdf.com/ebook.pdf',
+      theme: { preference: 'light' },
+    }}
+  />
+</div>
+```
+
+That's it! You now have a fully functional PDF viewer.
+
+### SvelteKit Usage
+
+The component works seamlessly with SvelteKit. Since it uses browser APIs (Canvas, WebAssembly), it should be used in a browser context. The component handles this internally, but you can also lazy load it if needed.
+
+---
+
+## 🎨 Customization
+
+### Theme
+
+The viewer includes a robust theming system. You can set the preference to `'light'`, `'dark'`, or `'system'`, and even override specific colors to match your brand.
 
-  const config = {
+```svelte
+<PDFViewer
+  config={{
     src: '/document.pdf',
-    theme: { preference: 'system' },
-  };
+    theme: {
+      preference: 'system',
+      light: {
+        accent: {
+          primary: '#ff3e00', // Custom brand color (Orange)
+        },
+      },
+    },
+  }}
+/>
+```
 
-  function onReady(event) {
-    console.log('PDF viewer ready', event.detail);
-  }
-</script>
+### Disabling Features
+
+Easily customize the UI by disabling features you don't need via the `disabledCategories` option:
 
-<PDFViewer {config} style="width: 100%; height: 100vh;" on:ready={onReady} />
+```svelte
+<PDFViewer
+  config={{
+    src: '/document.pdf',
+    disabledCategories: ['annotation', 'print', 'export'],
+  }}
+/>
 ```
 
-## Props
+Available categories include: `zoom`, `annotation`, `redaction`, `document`, `page`, `panel`, `tools`, `selection`, and `history`.
 
-| Prop     | Type              | Description                              |
-| -------- | ----------------- | ---------------------------------------- |
-| `config` | `PDFViewerConfig` | Full configuration object for the viewer |
-| `class`  | `string`          | CSS class name for the container         |
-| `style`  | `string`          | Inline styles for the container          |
+---
 
-The `config` prop accepts all configuration options from `@embedpdf/snippet`, including:
+## ⚙️ Configuration Options
 
-- `src` - URL or path to the PDF document
-- `theme` - Theme configuration
-- `zoom` - Zoom configuration
-- `scroll` - Scroll configuration
-- `annotations` - Annotation configuration
-- And more...
+The `config` prop accepts the following top-level options:
 
-## Events
+| Option               | Type                                | Description                                    |
+| :------------------- | :---------------------------------- | :--------------------------------------------- |
+| `src`                | `string`                            | URL or path to the PDF document.               |
+| `theme`              | `object`                            | Theme configuration (preference, overrides).   |
+| `tabBar`             | `'always' \| 'multiple' \| 'never'` | Control visibility of the document tab bar.    |
+| `disabledCategories` | `string[]`                          | Hide specific UI features by category.         |
+| `i18n`               | `object`                            | Configure locales and translations.            |
+| `annotations`        | `object`                            | Configure annotation defaults (author, tools). |
+| `zoom`               | `object`                            | Configure default zoom levels and limits.      |
+| `scroll`             | `object`                            | Configure scroll direction and logic.          |
 
-| Event   | Detail              | Description                      |
-| ------- | ------------------- | -------------------------------- |
-| `init`  | `EmbedPdfContainer` | Fired when viewer is initialized |
-| `ready` | `PluginRegistry`    | Fired when registry is ready     |
+---
 
-## Accessing the Registry
+## 🔌 Callbacks & Registry
 
-Use bind: directives to access the viewer container and registry:
+Use callback props to access the viewer instance and plugin registry.
 
 ```svelte
 <script>
   import { PDFViewer } from '@embedpdf/svelte-pdf-viewer';
 
-  let container;
-  let registry;
-
-  async function handleClick() {
-    const reg = await registry;
-    // Use registry to access plugins
+  function onready(registry) {
+    const engine = registry.getEngine();
+    console.log('Engine ready:', engine);
   }
 </script>
 
-<PDFViewer
-  bind:container
-  bind:registry
-  config={{ src: '/document.pdf' }}
-  style="width: 100%; height: 100vh;"
-/>
-<button on:click={handleClick}>Get Registry</button>
+<PDFViewer config={{ src: '/doc.pdf' }} {onready} />
+```
+
+### Available Callbacks
+
+| Callback  | Payload             | Description                                     |
+| :-------- | :------------------ | :---------------------------------------------- |
+| `oninit`  | `EmbedPdfContainer` | Fired when the viewer container is initialized. |
+| `onready` | `PluginRegistry`    | Fired when the plugin registry is ready.        |
+
+---
+
+## 🧩 Headless Mode
+
+Need complete control over the UI? Building a custom design system?
+
+Check out our **Headless Components** which provide stores and logic without the UI:
+
+```bash
+npm install @embedpdf/core @embedpdf/plugin-zoom ...
 ```
 
-## License
+Read the [Headless Documentation](https://www.embedpdf.com/docs/svelte/headless/introduction) for more details.
+
+---
+
+## 📄 License
 
-MIT
+EmbedPDF is [MIT licensed](https://github.com/embedpdf/embed-pdf-viewer/blob/main/LICENSE). Commercial use is welcome—just keep the copyright headers intact.

package/dist/PDFViewer.svelte

@@ -6,22 +6,29 @@
     type PluginRegistry,
   } from '@embedpdf/snippet';
 
-  /** Full configuration for the PDF viewer */
-  export let config: PDFViewerConfig = {};
-
-  /** Exposed bindings for accessing the viewer */
-  export let container: EmbedPdfContainer | null = null;
-  export let registry: Promise<PluginRegistry> | null = null;
-
+  interface Props {
+    /** Full configuration for the PDF viewer */
+    config?: PDFViewerConfig;
+    /** CSS class for the container element */
+    class?: string;
+    /** Inline styles for the container element */
+    style?: string;
+    /** Callback when the viewer container is initialized */
+    oninit?: (container: EmbedPdfContainer) => void;
+    /** Callback when the plugin registry is ready */
+    onready?: (registry: PluginRegistry) => void;
+  }
+
+  let { config = {}, class: className = '', style = '', oninit, onready }: Props = $props();
+
+  let container: EmbedPdfContainer | null = null;
+  let containerEl: HTMLDivElement;
   const dispatch = createEventDispatcher<{
     init: EmbedPdfContainer;
     ready: PluginRegistry;
   }>();
 
-  let containerEl: HTMLDivElement;
-
   onMount(() => {
-    // Initialize the viewer with the config prop
     const viewer = EmbedPDF.init({
       type: 'container',
       target: containerEl,
@@ -30,24 +37,22 @@
 
     if (viewer) {
       container = viewer;
-      registry = viewer.registry;
+      oninit?.(viewer);
       dispatch('init', viewer);
 
-      // Dispatch ready when registry is available
       viewer.registry.then((reg) => {
+        onready?.(reg);
         dispatch('ready', reg);
       });
     }
   });
 
   onDestroy(() => {
-    // Cleanup: remove the viewer element
     if (container && containerEl) {
       containerEl.innerHTML = '';
       container = null;
-      registry = null;
     }
   });
 </script>
 
-<div bind:this={containerEl} class={$$props.class} style={$$props.style} />
+<div bind:this={containerEl} class={className} {style}></div>

package/dist/PDFViewer.svelte.d.ts

@@ -1,4 +1,16 @@
 import { type EmbedPdfContainer, type PDFViewerConfig, type PluginRegistry } from '@embedpdf/snippet';
+interface Props {
+    /** Full configuration for the PDF viewer */
+    config?: PDFViewerConfig;
+    /** CSS class for the container element */
+    class?: string;
+    /** Inline styles for the container element */
+    style?: string;
+    /** Callback when the viewer container is initialized */
+    oninit?: (container: EmbedPdfContainer) => void;
+    /** Callback when the plugin registry is ready */
+    onready?: (registry: PluginRegistry) => void;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,17 +24,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PDFViewer: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    config?: PDFViewerConfig | undefined;
-    container?: (EmbedPdfContainer | null) | undefined;
-    registry?: (Promise<PluginRegistry> | null) | undefined;
-}, {
+declare const PDFViewer: $$__sveltets_2_IsomorphicComponent<Props, {
     init: CustomEvent<EmbedPdfContainer>;
     ready: CustomEvent<PluginRegistry>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type PDFViewer = InstanceType<typeof PDFViewer>;
 export default PDFViewer;
 //# sourceMappingURL=PDFViewer.svelte.d.ts.map

package/dist/PDFViewer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PDFViewer.svelte.d.ts","sourceRoot":"","sources":["../src/PDFViewer.svelte.ts"],"names":[],"mappings":"AAIA,OAAiB,EACb,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AA2D7B,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,SAAS;;aAdsC,eAAe;iBACR,iBAAiB,GAAG,IAAI;gBAAa,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;;;;;;kBAaV,CAAC;AACpG,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"PDFViewer.svelte.d.ts","sourceRoot":"","sources":["../src/PDFViewer.svelte.ts"],"names":[],"mappings":"AAIA,OAAiB,EACb,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAG3B,UAAU,KAAK;IACb,4CAA4C;IAC5C,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAiDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,SAAS;;;;;cAA+E,CAAC;AAC7E,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@embedpdf/svelte-pdf-viewer",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Svelte component for embedding PDF documents",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
+  "homepage": "https://www.embedpdf.com/svelte-pdf-viewer",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -19,11 +20,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@embedpdf/snippet": "2.0.0"
+    "@embedpdf/snippet": "2.0.1"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.0",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.1.2",
     "svelte": "^5.0.0",
     "typescript": "^5.1.6"
   },