@profpowell/pdf-viewer 0.1.0

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@profpowell/pdf-viewer",
+  "version": "0.1.0",
+  "description": "A PDF viewer web component wrapping PDF.js with navigation, zoom, search, thumbnails, and theme support",
+  "type": "module",
+  "main": "dist/pdf-viewer.js",
+  "module": "dist/pdf-viewer.js",
+  "types": "pdf-viewer.d.ts",
+  "exports": {
+    ".": {
+      "types": "./pdf-viewer.d.ts",
+      "import": "./dist/pdf-viewer.js",
+      "default": "./dist/pdf-viewer.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "pdf-viewer.d.ts",
+    "custom-elements.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "format": "prettier --write \"src/**/*.js\"",
+    "format:check": "prettier --check \"src/**/*.js\"",
+    "analyze": "cem analyze",
+    "prepublishOnly": "npm run build && npm run analyze"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "vanilla-js",
+    "pdf-viewer",
+    "pdf",
+    "pdfjs",
+    "dark-mode",
+    "profpowell-web-components"
+  ],
+  "author": "Prof Thomas Powell",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ProfPowell/pdf-viewer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ProfPowell/pdf-viewer/issues"
+  },
+  "homepage": "https://profpowell.github.io/pdf-viewer/",
+  "dependencies": {
+    "pdfjs-dist": "^4.10.38"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@playwright/test": "^1.57.0",
+    "eslint": "^9.0.0",
+    "prettier": "^3.0.0",
+    "vite": "^6.0.0"
+  },
+  "customElements": "custom-elements.json"
+}

package/pdf-viewer.d.ts

@@ -0,0 +1,147 @@
+export interface PdfLoadedDetail {
+  url: string | null
+  pageCount: number
+  title: string
+}
+
+export interface PdfLoadErrorDetail {
+  url: string | null
+  error: string
+}
+
+export interface PageChangeDetail {
+  page: number
+  previousPage: number
+  pageCount: number
+}
+
+export interface ZoomChangeDetail {
+  zoom: string
+  previousZoom: string
+}
+
+export interface ViewChangeDetail {
+  view: 'single' | 'continuous'
+}
+
+export interface FileOpenedDetail {
+  name: string
+  size: number
+}
+
+export class PdfViewer extends HTMLElement {
+  /** URL of the PDF document to display */
+  src: string
+
+  /** Current page number (1-based) */
+  page: number
+
+  /** Zoom level: a number or mode string ("fit-width", "fit-page", "auto") */
+  zoom: string
+
+  /** Color scheme. Omit for auto-detection from page/system preference */
+  mode: 'light' | 'dark' | ''
+
+  /** View mode */
+  view: 'single' | 'continuous'
+
+  /** Whether the toolbar is shown */
+  readonly showToolbar: boolean
+
+  /** Whether the thumbnail sidebar is shown */
+  readonly showThumbnails: boolean
+
+  /** Whether the search bar is shown */
+  readonly showSearch: boolean
+
+  /** Whether the download button is hidden */
+  readonly noDownload: boolean
+
+  /** Whether the print button is hidden */
+  readonly noPrint: boolean
+
+  /** Title displayed in the toolbar */
+  readonly viewerTitle: string
+
+  /** Whether lazy loading is enabled */
+  readonly lazy: boolean
+
+  /** Navigate to the next page */
+  nextPage(): void
+
+  /** Navigate to the previous page */
+  prevPage(): void
+
+  /** Navigate to a specific page number */
+  goToPage(pageNumber: number): void
+
+  /** Get the total number of pages */
+  getPageCount(): number
+
+  /** Get the current page number */
+  getCurrentPage(): number
+
+  /** Zoom in one step */
+  zoomIn(): void
+
+  /** Zoom out one step */
+  zoomOut(): void
+
+  /** Set zoom to a specific level or mode */
+  setZoom(level: number | 'fit-width' | 'fit-page' | 'auto'): void
+
+  /** Load a PDF from an ArrayBuffer, Uint8Array, or File */
+  setData(source: ArrayBuffer | Uint8Array | File): Promise<void>
+
+  /** Open a file picker dialog to select a PDF */
+  openFile(): void
+
+  /** Download the current PDF */
+  download(): Promise<void>
+
+  /** Print the current PDF */
+  print(): Promise<void>
+
+  /** Search for text in the document */
+  search(query: string): Promise<void>
+
+  /** Clear the current search */
+  clearSearch(): void
+
+  /** Toggle fullscreen mode */
+  toggleFullscreen(): void
+
+  /** Toggle the thumbnail sidebar */
+  toggleThumbnails(): void
+
+  /** Toggle the search bar */
+  toggleSearch(): void
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pdf-viewer': PdfViewer
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'pdf-viewer': React.DetailedHTMLProps<
+        React.HTMLAttributes<PdfViewer> & {
+          src?: string
+          page?: number | string
+          zoom?: string
+          mode?: 'light' | 'dark'
+          view?: 'single' | 'continuous'
+          'show-toolbar'?: boolean | string
+          'show-thumbnails'?: boolean | string
+          'show-search'?: boolean | string
+          'no-download'?: boolean | string
+          'no-print'?: boolean | string
+          title?: string
+          lazy?: boolean | string
+        },
+        PdfViewer
+      >
+    }
+  }
+}