web-annotation-renderer 0.1.0

package/dist/index9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index9.cjs","sources":["../src/layers/DrawingLayer.js"],"sourcesContent":["import BaseLayer from './BaseLayer.js';\n\n/**\n * DrawingLayer - Renders ink/drawing annotations on HTML canvas\n *\n * Extends BaseLayer to provide progressive stroke animation for ink annotations.\n * Draws stroke points incrementally based on timeline position using requestAnimationFrame.\n * Handles device pixel ratio scaling for crisp rendering on high-DPI displays.\n *\n * Features:\n * - Progressive stroke drawing point-by-point\n * - Multiple strokes per annotation with custom colors/sizes\n * - Device pixel ratio handling for Retina displays\n * - Smooth 60fps animation with RAF\n * - Efficient canvas clear/redraw cycle\n *\n * @extends BaseLayer\n */\nclass DrawingLayer extends BaseLayer {\n  /**\n   * Creates a new DrawingLayer instance\n   *\n   * @param {HTMLElement} container - Parent DOM element for layer content\n   * @param {Object} viewport - Initial viewport dimensions\n   * @param {number} viewport.width - Viewport width in pixels\n   * @param {number} viewport.height - Viewport height in pixels\n   * @param {number} viewport.scale - PDF scale/zoom level\n   */\n  constructor(container, viewport) {\n    super(container, viewport);\n\n    // Create canvas element\n    this.canvasElement = document.createElement('canvas');\n    this.canvasElement.style.position = 'absolute';\n    this.canvasElement.style.inset = '0';\n    this.canvasElement.style.pointerEvents = 'none';\n    this.canvasElement.style.zIndex = '40';\n\n    // Append to container\n    this.container.appendChild(this.canvasElement);\n\n    // Get 2D context\n    this.ctx = this.canvasElement.getContext('2d');\n\n    // Initialize animation frame ID\n    this.rafId = null;\n\n    // Setup canvas with device pixel ratio\n    this._setupCanvas();\n  }\n\n  /**\n   * Configures canvas dimensions with device pixel ratio scaling\n   *\n   * Sets canvas buffer size for high-resolution rendering on Retina displays\n   * while maintaining correct display size in CSS pixels. Scales context\n   * transform to allow drawing with CSS pixel coordinates.\n   *\n   * @private\n   */\n  _setupCanvas() {\n    const dpr = window.devicePixelRatio || 1;\n\n    // Set canvas buffer resolution (high-res for crisp rendering)\n    this.canvasElement.width = Math.round(this.viewport.width * dpr);\n    this.canvasElement.height = Math.round(this.viewport.height * dpr);\n\n    // Set canvas display size (CSS pixels)\n    this.canvasElement.style.width = `${this.viewport.width}px`;\n    this.canvasElement.style.height = `${this.viewport.height}px`;\n\n    // Scale context to account for device pixel ratio\n    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  }\n\n  /**\n   * Updates viewport dimensions and resizes canvas\n   *\n   * Reconfigures canvas buffer and display size when viewport changes\n   * due to page navigation or zoom operations.\n   *\n   * @param {Object} viewport - New viewport dimensions\n   * @param {number} viewport.width - Viewport width in pixels\n   * @param {number} viewport.height - Viewport height in pixels\n   * @param {number} viewport.scale - PDF scale/zoom level\n   * @override\n   */\n  setViewport(viewport) {\n    super.setViewport(viewport);\n    this._setupCanvas();\n  }\n\n  /**\n   * Updates timeline position and starts progressive stroke drawing\n   *\n   * Cancels any existing animation loop and starts a new requestAnimationFrame\n   * loop to redraw the canvas with strokes progressively drawn based on elapsed time.\n   * Each frame clears the canvas and redraws all visible strokes.\n   *\n   * @param {number} nowSec - Current timeline position in seconds\n   * @throws {Error} If called after layer is destroyed\n   * @override\n   */\n  updateTime(nowSec) {\n    super.updateTime(nowSec);\n\n    // Cancel existing RAF to prevent multiple loops\n    if (this.rafId) {\n      cancelAnimationFrame(this.rafId);\n    }\n\n    // Start drawing loop\n    const draw = () => {\n      // Check destroyed state\n      if (this.isDestroyed) return;\n\n      // Clear canvas\n      this.ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n      // Draw each annotation\n      for (const a of this.annotations) {\n        // Skip annotations that haven't started yet\n        if (nowSec < a.start) continue;\n\n        // Calculate elapsed time (capped at duration for persistence)\n        const duration = a.end - a.start;\n        const elapsed = Math.min(nowSec - a.start, duration);\n\n        // Draw each stroke\n        for (const stroke of (a.strokes || [])) {\n          // Configure stroke style\n          this.ctx.lineCap = 'round';\n          this.ctx.lineJoin = 'round';\n          this.ctx.strokeStyle = stroke.color || '#1f2937';\n          this.ctx.lineWidth = stroke.size || 3;\n          this.ctx.beginPath();\n\n          let started = false;\n\n          // Draw points up to current time\n          for (const point of stroke.points) {\n            // Skip points that haven't been drawn yet\n            if (point.t > elapsed) break;\n\n            // Convert normalized coordinates to canvas pixels\n            const x = point.x * this.viewport.width;\n            const y = point.y * this.viewport.height;\n\n            if (!started) {\n              this.ctx.moveTo(x, y);\n              started = true;\n            } else {\n              this.ctx.lineTo(x, y);\n            }\n          }\n\n          // Render the stroke\n          if (started) {\n            this.ctx.stroke();\n          }\n        }\n      }\n\n      // Schedule next frame\n      this.rafId = requestAnimationFrame(draw);\n    };\n\n    // Start the loop\n    draw();\n  }\n\n  /**\n   * Renders the layer content\n   *\n   * No-op for DrawingLayer - canvas rendering happens in updateTime() RAF loop.\n   * Canvas element is created once in constructor and drawn to continuously.\n   *\n   * @override\n   */\n  render() {\n    // No-op: Canvas rendering happens in updateTime() RAF loop\n    // Canvas element is created once in constructor\n  }\n\n  /**\n   * Updates the visual state of the layer\n   *\n   * Not used for DrawingLayer - updateTime() handles updates via RAF loop.\n   *\n   * @override\n   */\n  update() {\n    // Not used - updateTime handles drawing via RAF loop\n  }\n\n  /**\n   * Destroys the layer and releases resources\n   *\n   * Cancels animation loop, clears references, and removes canvas from DOM.\n   * Safe to call multiple times (idempotent).\n   *\n   * @override\n   */\n  destroy() {\n    // Cancel animation loop first\n    if (this.rafId) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    // Clear context reference\n    this.ctx = null;\n\n    // Remove canvas from DOM\n    if (this.canvasElement && this.canvasElement.parentNode) {\n      this.canvasElement.parentNode.removeChild(this.canvasElement);\n    }\n    this.canvasElement = null;\n\n    // Call parent cleanup (always last)\n    super.destroy();\n  }\n}\n\nexport default DrawingLayer;\n"],"names":["DrawingLayer","BaseLayer","container","viewport","dpr","nowSec","draw","a","duration","elapsed","stroke","started","point","x","y"],"mappings":"4IAkBA,MAAMA,UAAqBC,EAAAA,OAAU,CAUnC,YAAYC,EAAWC,EAAU,CAC/B,MAAMD,EAAWC,CAAQ,EAGzB,KAAK,cAAgB,SAAS,cAAc,QAAQ,EACpD,KAAK,cAAc,MAAM,SAAW,WACpC,KAAK,cAAc,MAAM,MAAQ,IACjC,KAAK,cAAc,MAAM,cAAgB,OACzC,KAAK,cAAc,MAAM,OAAS,KAGlC,KAAK,UAAU,YAAY,KAAK,aAAa,EAG7C,KAAK,IAAM,KAAK,cAAc,WAAW,IAAI,EAG7C,KAAK,MAAQ,KAGb,KAAK,aAAY,CACnB,CAWA,cAAe,CACb,MAAMC,EAAM,OAAO,kBAAoB,EAGvC,KAAK,cAAc,MAAQ,KAAK,MAAM,KAAK,SAAS,MAAQA,CAAG,EAC/D,KAAK,cAAc,OAAS,KAAK,MAAM,KAAK,SAAS,OAASA,CAAG,EAGjE,KAAK,cAAc,MAAM,MAAQ,GAAG,KAAK,SAAS,KAAK,KACvD,KAAK,cAAc,MAAM,OAAS,GAAG,KAAK,SAAS,MAAM,KAGzD,KAAK,IAAI,aAAaA,EAAK,EAAG,EAAGA,EAAK,EAAG,CAAC,CAC5C,CAcA,YAAYD,EAAU,CACpB,MAAM,YAAYA,CAAQ,EAC1B,KAAK,aAAY,CACnB,CAaA,WAAWE,EAAQ,CACjB,MAAM,WAAWA,CAAM,EAGnB,KAAK,OACP,qBAAqB,KAAK,KAAK,EAIjC,MAAMC,EAAO,IAAM,CAEjB,GAAI,MAAK,YAGT,MAAK,IAAI,UAAU,EAAG,EAAG,KAAK,cAAc,MAAO,KAAK,cAAc,MAAM,EAG5E,UAAWC,KAAK,KAAK,YAAa,CAEhC,GAAIF,EAASE,EAAE,MAAO,SAGtB,MAAMC,EAAWD,EAAE,IAAMA,EAAE,MACrBE,EAAU,KAAK,IAAIJ,EAASE,EAAE,MAAOC,CAAQ,EAGnD,UAAWE,KAAWH,EAAE,SAAW,CAAA,EAAK,CAEtC,KAAK,IAAI,QAAU,QACnB,KAAK,IAAI,SAAW,QACpB,KAAK,IAAI,YAAcG,EAAO,OAAS,UACvC,KAAK,IAAI,UAAYA,EAAO,MAAQ,EACpC,KAAK,IAAI,UAAS,EAElB,IAAIC,EAAU,GAGd,UAAWC,KAASF,EAAO,OAAQ,CAEjC,GAAIE,EAAM,EAAIH,EAAS,MAGvB,MAAMI,EAAID,EAAM,EAAI,KAAK,SAAS,MAC5BE,EAAIF,EAAM,EAAI,KAAK,SAAS,OAE7BD,EAIH,KAAK,IAAI,OAAOE,EAAGC,CAAC,GAHpB,KAAK,IAAI,OAAOD,EAAGC,CAAC,EACpBH,EAAU,GAId,CAGIA,GACF,KAAK,IAAI,OAAM,CAEnB,CACF,CAGA,KAAK,MAAQ,sBAAsBL,CAAI,EACzC,EAGAA,EAAI,CACN,CAUA,QAAS,CAGT,CASA,QAAS,CAET,CAUA,SAAU,CAEJ,KAAK,QACP,qBAAqB,KAAK,KAAK,EAC/B,KAAK,MAAQ,MAIf,KAAK,IAAM,KAGP,KAAK,eAAiB,KAAK,cAAc,YAC3C,KAAK,cAAc,WAAW,YAAY,KAAK,aAAa,EAE9D,KAAK,cAAgB,KAGrB,MAAM,QAAO,CACf,CACF"}

package/dist/index9.js

@@ -0,0 +1,112 @@
+import l from "./index6.js";
+class p extends l {
+  /**
+   * Creates a new DrawingLayer instance
+   *
+   * @param {HTMLElement} container - Parent DOM element for layer content
+   * @param {Object} viewport - Initial viewport dimensions
+   * @param {number} viewport.width - Viewport width in pixels
+   * @param {number} viewport.height - Viewport height in pixels
+   * @param {number} viewport.scale - PDF scale/zoom level
+   */
+  constructor(t, s) {
+    super(t, s), this.canvasElement = document.createElement("canvas"), this.canvasElement.style.position = "absolute", this.canvasElement.style.inset = "0", this.canvasElement.style.pointerEvents = "none", this.canvasElement.style.zIndex = "40", this.container.appendChild(this.canvasElement), this.ctx = this.canvasElement.getContext("2d"), this.rafId = null, this._setupCanvas();
+  }
+  /**
+   * Configures canvas dimensions with device pixel ratio scaling
+   *
+   * Sets canvas buffer size for high-resolution rendering on Retina displays
+   * while maintaining correct display size in CSS pixels. Scales context
+   * transform to allow drawing with CSS pixel coordinates.
+   *
+   * @private
+   */
+  _setupCanvas() {
+    const t = window.devicePixelRatio || 1;
+    this.canvasElement.width = Math.round(this.viewport.width * t), this.canvasElement.height = Math.round(this.viewport.height * t), this.canvasElement.style.width = `${this.viewport.width}px`, this.canvasElement.style.height = `${this.viewport.height}px`, this.ctx.setTransform(t, 0, 0, t, 0, 0);
+  }
+  /**
+   * Updates viewport dimensions and resizes canvas
+   *
+   * Reconfigures canvas buffer and display size when viewport changes
+   * due to page navigation or zoom operations.
+   *
+   * @param {Object} viewport - New viewport dimensions
+   * @param {number} viewport.width - Viewport width in pixels
+   * @param {number} viewport.height - Viewport height in pixels
+   * @param {number} viewport.scale - PDF scale/zoom level
+   * @override
+   */
+  setViewport(t) {
+    super.setViewport(t), this._setupCanvas();
+  }
+  /**
+   * Updates timeline position and starts progressive stroke drawing
+   *
+   * Cancels any existing animation loop and starts a new requestAnimationFrame
+   * loop to redraw the canvas with strokes progressively drawn based on elapsed time.
+   * Each frame clears the canvas and redraws all visible strokes.
+   *
+   * @param {number} nowSec - Current timeline position in seconds
+   * @throws {Error} If called after layer is destroyed
+   * @override
+   */
+  updateTime(t) {
+    super.updateTime(t), this.rafId && cancelAnimationFrame(this.rafId);
+    const s = () => {
+      if (!this.isDestroyed) {
+        this.ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
+        for (const e of this.annotations) {
+          if (t < e.start) continue;
+          const o = e.end - e.start, c = Math.min(t - e.start, o);
+          for (const i of e.strokes || []) {
+            this.ctx.lineCap = "round", this.ctx.lineJoin = "round", this.ctx.strokeStyle = i.color || "#1f2937", this.ctx.lineWidth = i.size || 3, this.ctx.beginPath();
+            let n = !1;
+            for (const a of i.points) {
+              if (a.t > c) break;
+              const h = a.x * this.viewport.width, r = a.y * this.viewport.height;
+              n ? this.ctx.lineTo(h, r) : (this.ctx.moveTo(h, r), n = !0);
+            }
+            n && this.ctx.stroke();
+          }
+        }
+        this.rafId = requestAnimationFrame(s);
+      }
+    };
+    s();
+  }
+  /**
+   * Renders the layer content
+   *
+   * No-op for DrawingLayer - canvas rendering happens in updateTime() RAF loop.
+   * Canvas element is created once in constructor and drawn to continuously.
+   *
+   * @override
+   */
+  render() {
+  }
+  /**
+   * Updates the visual state of the layer
+   *
+   * Not used for DrawingLayer - updateTime() handles updates via RAF loop.
+   *
+   * @override
+   */
+  update() {
+  }
+  /**
+   * Destroys the layer and releases resources
+   *
+   * Cancels animation loop, clears references, and removes canvas from DOM.
+   * Safe to call multiple times (idempotent).
+   *
+   * @override
+   */
+  destroy() {
+    this.rafId && (cancelAnimationFrame(this.rafId), this.rafId = null), this.ctx = null, this.canvasElement && this.canvasElement.parentNode && this.canvasElement.parentNode.removeChild(this.canvasElement), this.canvasElement = null, super.destroy();
+  }
+}
+export {
+  p as default
+};
+//# sourceMappingURL=index9.js.map

package/dist/index9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index9.js","sources":["../src/layers/DrawingLayer.js"],"sourcesContent":["import BaseLayer from './BaseLayer.js';\n\n/**\n * DrawingLayer - Renders ink/drawing annotations on HTML canvas\n *\n * Extends BaseLayer to provide progressive stroke animation for ink annotations.\n * Draws stroke points incrementally based on timeline position using requestAnimationFrame.\n * Handles device pixel ratio scaling for crisp rendering on high-DPI displays.\n *\n * Features:\n * - Progressive stroke drawing point-by-point\n * - Multiple strokes per annotation with custom colors/sizes\n * - Device pixel ratio handling for Retina displays\n * - Smooth 60fps animation with RAF\n * - Efficient canvas clear/redraw cycle\n *\n * @extends BaseLayer\n */\nclass DrawingLayer extends BaseLayer {\n  /**\n   * Creates a new DrawingLayer instance\n   *\n   * @param {HTMLElement} container - Parent DOM element for layer content\n   * @param {Object} viewport - Initial viewport dimensions\n   * @param {number} viewport.width - Viewport width in pixels\n   * @param {number} viewport.height - Viewport height in pixels\n   * @param {number} viewport.scale - PDF scale/zoom level\n   */\n  constructor(container, viewport) {\n    super(container, viewport);\n\n    // Create canvas element\n    this.canvasElement = document.createElement('canvas');\n    this.canvasElement.style.position = 'absolute';\n    this.canvasElement.style.inset = '0';\n    this.canvasElement.style.pointerEvents = 'none';\n    this.canvasElement.style.zIndex = '40';\n\n    // Append to container\n    this.container.appendChild(this.canvasElement);\n\n    // Get 2D context\n    this.ctx = this.canvasElement.getContext('2d');\n\n    // Initialize animation frame ID\n    this.rafId = null;\n\n    // Setup canvas with device pixel ratio\n    this._setupCanvas();\n  }\n\n  /**\n   * Configures canvas dimensions with device pixel ratio scaling\n   *\n   * Sets canvas buffer size for high-resolution rendering on Retina displays\n   * while maintaining correct display size in CSS pixels. Scales context\n   * transform to allow drawing with CSS pixel coordinates.\n   *\n   * @private\n   */\n  _setupCanvas() {\n    const dpr = window.devicePixelRatio || 1;\n\n    // Set canvas buffer resolution (high-res for crisp rendering)\n    this.canvasElement.width = Math.round(this.viewport.width * dpr);\n    this.canvasElement.height = Math.round(this.viewport.height * dpr);\n\n    // Set canvas display size (CSS pixels)\n    this.canvasElement.style.width = `${this.viewport.width}px`;\n    this.canvasElement.style.height = `${this.viewport.height}px`;\n\n    // Scale context to account for device pixel ratio\n    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  }\n\n  /**\n   * Updates viewport dimensions and resizes canvas\n   *\n   * Reconfigures canvas buffer and display size when viewport changes\n   * due to page navigation or zoom operations.\n   *\n   * @param {Object} viewport - New viewport dimensions\n   * @param {number} viewport.width - Viewport width in pixels\n   * @param {number} viewport.height - Viewport height in pixels\n   * @param {number} viewport.scale - PDF scale/zoom level\n   * @override\n   */\n  setViewport(viewport) {\n    super.setViewport(viewport);\n    this._setupCanvas();\n  }\n\n  /**\n   * Updates timeline position and starts progressive stroke drawing\n   *\n   * Cancels any existing animation loop and starts a new requestAnimationFrame\n   * loop to redraw the canvas with strokes progressively drawn based on elapsed time.\n   * Each frame clears the canvas and redraws all visible strokes.\n   *\n   * @param {number} nowSec - Current timeline position in seconds\n   * @throws {Error} If called after layer is destroyed\n   * @override\n   */\n  updateTime(nowSec) {\n    super.updateTime(nowSec);\n\n    // Cancel existing RAF to prevent multiple loops\n    if (this.rafId) {\n      cancelAnimationFrame(this.rafId);\n    }\n\n    // Start drawing loop\n    const draw = () => {\n      // Check destroyed state\n      if (this.isDestroyed) return;\n\n      // Clear canvas\n      this.ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n      // Draw each annotation\n      for (const a of this.annotations) {\n        // Skip annotations that haven't started yet\n        if (nowSec < a.start) continue;\n\n        // Calculate elapsed time (capped at duration for persistence)\n        const duration = a.end - a.start;\n        const elapsed = Math.min(nowSec - a.start, duration);\n\n        // Draw each stroke\n        for (const stroke of (a.strokes || [])) {\n          // Configure stroke style\n          this.ctx.lineCap = 'round';\n          this.ctx.lineJoin = 'round';\n          this.ctx.strokeStyle = stroke.color || '#1f2937';\n          this.ctx.lineWidth = stroke.size || 3;\n          this.ctx.beginPath();\n\n          let started = false;\n\n          // Draw points up to current time\n          for (const point of stroke.points) {\n            // Skip points that haven't been drawn yet\n            if (point.t > elapsed) break;\n\n            // Convert normalized coordinates to canvas pixels\n            const x = point.x * this.viewport.width;\n            const y = point.y * this.viewport.height;\n\n            if (!started) {\n              this.ctx.moveTo(x, y);\n              started = true;\n            } else {\n              this.ctx.lineTo(x, y);\n            }\n          }\n\n          // Render the stroke\n          if (started) {\n            this.ctx.stroke();\n          }\n        }\n      }\n\n      // Schedule next frame\n      this.rafId = requestAnimationFrame(draw);\n    };\n\n    // Start the loop\n    draw();\n  }\n\n  /**\n   * Renders the layer content\n   *\n   * No-op for DrawingLayer - canvas rendering happens in updateTime() RAF loop.\n   * Canvas element is created once in constructor and drawn to continuously.\n   *\n   * @override\n   */\n  render() {\n    // No-op: Canvas rendering happens in updateTime() RAF loop\n    // Canvas element is created once in constructor\n  }\n\n  /**\n   * Updates the visual state of the layer\n   *\n   * Not used for DrawingLayer - updateTime() handles updates via RAF loop.\n   *\n   * @override\n   */\n  update() {\n    // Not used - updateTime handles drawing via RAF loop\n  }\n\n  /**\n   * Destroys the layer and releases resources\n   *\n   * Cancels animation loop, clears references, and removes canvas from DOM.\n   * Safe to call multiple times (idempotent).\n   *\n   * @override\n   */\n  destroy() {\n    // Cancel animation loop first\n    if (this.rafId) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    // Clear context reference\n    this.ctx = null;\n\n    // Remove canvas from DOM\n    if (this.canvasElement && this.canvasElement.parentNode) {\n      this.canvasElement.parentNode.removeChild(this.canvasElement);\n    }\n    this.canvasElement = null;\n\n    // Call parent cleanup (always last)\n    super.destroy();\n  }\n}\n\nexport default DrawingLayer;\n"],"names":["DrawingLayer","BaseLayer","container","viewport","dpr","nowSec","draw","a","duration","elapsed","stroke","started","point","x","y"],"mappings":"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"}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "web-annotation-renderer",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Framework-agnostic PDF annotation renderer with timeline synchronization for educational content and interactive documents",
+  "keywords": [
+    "pdf",
+    "annotations",
+    "renderer",
+    "timeline",
+    "pdfjs",
+    "education",
+    "react",
+    "canvas",
+    "highlights",
+    "interactive",
+    "viewer",
+    "timeline-sync"
+  ],
+  "author": "jhl72e <jhl72e@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jhl72e/pdfAutoAnnotator.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jhl72e/pdfAutoAnnotator/issues"
+  },
+  "homepage": "https://github.com/jhl72e/pdfAutoAnnotator#readme",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "test": "echo \"Tests not yet implemented\" && exit 0",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "pdfjs-dist": "^5.4.149"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.4.0",
+    "puppeteer": "^24.22.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "vite": "^7.1.7"
+  }
+}