web-annotation-renderer 0.1.2 → 0.1.3

package/dist/index14.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("react/jsx-runtime"),n=require("react"),j=require("./index2.cjs");function m({pdfUrl:l,page:u=1,scale:i=1.5,annotations:A=[],currentTime:o=0,onLoad:f,onError:t,onPageChange:a,className:F,style:R,canvasStyle:p}){const d=n.useRef(null),y=n.useRef(null),r=n.useRef(null),v=n.useRef(Promise.resolve()),c=n.useCallback(e=>{v.current=v.current.then(e).catch(h=>{console.error("AnnotPdf: Queued operation failed:",h)})},[]);n.useEffect(()=>{if(!(!d.current||!y.current)){try{r.current=new j.AnnotationRenderer({canvasElement:d.current,container:y.current})}catch(e){console.error("AnnotPdf: Failed to initialize renderer:",e),t&&t(e)}return()=>{r.current&&(r.current.destroy(),r.current=null)}}},[]),n.useEffect(()=>{if(!r.current||!l)return;let e=!1;return c(async()=>{try{const s=await r.current.loadPDF(l);if(e)return;if(!s.success){console.error("AnnotPdf: Failed to load PDF:",s.error),t&&t(new Error(s.error));return}f&&f({pageCount:s.pageCount})}catch(s){if(e)return;console.error("AnnotPdf: Failed to load PDF:",s),t&&t(s)}}),()=>{e=!0}},[l,f,t,c]),n.useEffect(()=>{!r.current||!u||typeof u!="number"||c(async()=>{try{const e=await r.current.setPage(u);if(!e.success){console.error("AnnotPdf: Failed to set page:",e.error),t&&t(new Error(e.error));return}a&&a(u)}catch(e){console.error("AnnotPdf: Failed to set page:",e),t&&t(e)}})},[u,a,t,c]),n.useEffect(()=>{!r.current||!i||typeof i!="number"||c(async()=>{try{const e=await r.current.setScale(i);e.success||(console.error("AnnotPdf: Failed to set scale:",e.error),t&&t(new Error(e.error)))}catch(e){console.error("AnnotPdf: Failed to set scale:",e),t&&t(e)}})},[i,t,c]),n.useEffect(()=>{if(r.current)try{r.current.setAnnotations(A||[])}catch(e){console.error("AnnotPdf: Failed to set annotations:",e),t&&t(e)}},[A,t]),n.useEffect(()=>{if(!(!r.current||o===void 0||o===null))try{r.current.setTime(o)}catch(e){console.error("AnnotPdf: Failed to set time:",e),t&&t(e)}},[o,t]);const w={position:"relative",display:"inline-block",lineHeight:0,...R},b={position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",overflow:"hidden"},S={display:"block",...p};return P.jsxs("div",{className:F,style:w,children:[P.jsx("canvas",{ref:d,style:S}),P.jsx("div",{ref:y,style:b})]})}exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),n=require("react"),j=require("./index2.cjs");function m({pdfUrl:l,page:c=1,scale:u=1.5,annotations:y=[],currentTime:i=0,onLoad:P,onError:t,onPageChange:A,className:F,style:R,canvasStyle:p}){const f=n.useRef(null),a=n.useRef(null),r=n.useRef(null),h=n.useRef(Promise.resolve()),o=n.useCallback(e=>{h.current=h.current.then(e).catch(v=>{console.error("AnnotPdf: Queued operation failed:",v)})},[]);n.useEffect(()=>{if(!(!f.current||!a.current)){try{r.current=new j.AnnotationRenderer({canvasElement:f.current,container:a.current})}catch(e){console.error("AnnotPdf: Failed to initialize renderer:",e),t&&t(e)}return()=>{r.current&&(r.current.destroy(),r.current=null)}}},[]),n.useEffect(()=>{if(!r.current||!l)return;let e=!1;return o(async()=>{try{const s=await r.current.loadPDF(l);if(e)return;if(!s.success){console.error("AnnotPdf: Failed to load PDF:",s.error),t&&t(new Error(s.error));return}P&&P({pageCount:s.pageCount})}catch(s){if(e)return;console.error("AnnotPdf: Failed to load PDF:",s),t&&t(s)}}),()=>{e=!0}},[l,o]),n.useEffect(()=>{!r.current||!c||typeof c!="number"||o(async()=>{try{const e=await r.current.setPage(c);if(!e.success){console.error("AnnotPdf: Failed to set page:",e.error),t&&t(new Error(e.error));return}A&&A(c)}catch(e){console.error("AnnotPdf: Failed to set page:",e),t&&t(e)}})},[c,o]),n.useEffect(()=>{!r.current||!u||typeof u!="number"||o(async()=>{try{const e=await r.current.setScale(u);e.success||(console.error("AnnotPdf: Failed to set scale:",e.error),t&&t(new Error(e.error)))}catch(e){console.error("AnnotPdf: Failed to set scale:",e),t&&t(e)}})},[u,o]),n.useEffect(()=>{if(r.current)try{r.current.setAnnotations(y||[])}catch(e){console.error("AnnotPdf: Failed to set annotations:",e),t&&t(e)}},[y]),n.useEffect(()=>{if(!(!r.current||i===void 0||i===null))try{r.current.setTime(i)}catch(e){console.error("AnnotPdf: Failed to set time:",e),t&&t(e)}},[i]);const w={position:"relative",display:"inline-block",lineHeight:0,...R},b={position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none",overflow:"hidden"},S={display:"block",...p};return d.jsxs("div",{className:F,style:w,children:[d.jsx("canvas",{ref:f,style:S}),d.jsx("div",{ref:a,style:b})]})}exports.default=m;
 //# sourceMappingURL=index14.cjs.map

package/dist/index14.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index14.cjs","sources":["../src/adapters/AnnotPdf.jsx"],"sourcesContent":["// ============================================================================\n// SECTION 1: IMPORTS\n// ============================================================================\n\nimport { useRef, useEffect, useCallback } from 'react';\nimport { AnnotationRenderer } from '../core/AnnotationRenderer.js';\n\n// ============================================================================\n// SECTION 2: JSDOC DOCUMENTATION\n// ============================================================================\n\n/**\n * AnnotPdf - Declarative React component for PDF annotation rendering\n *\n * A React wrapper around the AnnotationRenderer core engine that provides\n * a declarative, props-based API for rendering PDF documents with\n * timeline-synchronized annotations.\n *\n * Features:\n * - Automatic lifecycle management (initialization and cleanup)\n * - Declarative prop-to-method synchronization\n * - PDF rendering with pdf.js\n * - Timeline-synchronized annotation display\n * - Support for highlight, text, and ink annotations\n * - Page navigation and zoom control\n *\n * @component\n * @example\n * // Basic usage\n * <AnnotPdf\n *   pdfUrl=\"/document.pdf\"\n *   page={1}\n *   scale={1.5}\n *   annotations={[]}\n *   currentTime={0}\n * />\n *\n * @example\n * // With audio synchronization\n * const [currentTime, setCurrentTime] = useState(0);\n *\n * <div>\n *   <AnnotPdf\n *     pdfUrl=\"/lecture.pdf\"\n *     page={1}\n *     scale={1.5}\n *     annotations={annotations}\n *     currentTime={currentTime}\n *     onLoad={({ pageCount }) => console.log('Loaded:', pageCount)}\n *   />\n *   <audio\n *     src=\"/lecture.mp3\"\n *     onTimeUpdate={(e) => setCurrentTime(e.target.currentTime)}\n *     controls\n *   />\n * </div>\n *\n * @param {Object} props - Component props\n * @param {string} props.pdfUrl - PDF document URL (required)\n * @param {number} [props.page=1] - Current page number (1-indexed)\n * @param {number} [props.scale=1.5] - Zoom scale factor\n * @param {Array} [props.annotations=[]] - Array of annotation objects\n * @param {number} [props.currentTime=0] - Timeline position in seconds\n * @param {Function} [props.onLoad] - Callback when PDF loads: ({pageCount}) => void\n * @param {Function} [props.onError] - Callback on error: (error) => void\n * @param {Function} [props.onPageChange] - Callback when page changes: (page) => void\n * @param {string} [props.className] - CSS class for container div\n * @param {Object} [props.style] - Inline styles for container div\n * @param {Object} [props.canvasStyle] - Inline styles for canvas element\n * @returns {JSX.Element} PDF viewer component with annotation layers\n */\n\n// ============================================================================\n// SECTION 3: COMPONENT DEFINITION\n// ============================================================================\n\nfunction AnnotPdf({\n  // Required props\n  pdfUrl,\n\n  // Optional props with defaults\n  page = 1,\n  scale = 1.5,\n  annotations = [],\n  currentTime = 0,\n\n  // Callbacks\n  onLoad,\n  onError,\n  onPageChange,\n\n  // Styling\n  className,\n  style,\n  canvasStyle\n}) {\n\n  // ==========================================================================\n  // SECTION 4: REFS INITIALIZATION\n  // ==========================================================================\n\n  /**\n   * Reference to the canvas element for PDF rendering\n   * @type {React.RefObject<HTMLCanvasElement>}\n   */\n  const canvasRef = useRef(null);\n\n  /**\n   * Reference to the layer container div for annotation layers\n   * @type {React.RefObject<HTMLDivElement>}\n   */\n  const layerContainerRef = useRef(null);\n\n  /**\n   * Reference to the AnnotationRenderer engine instance\n   * Stored in ref to avoid triggering re-renders\n   * @type {React.RefObject<AnnotationRenderer|null>}\n   */\n  const engineRef = useRef(null);\n\n  /**\n   * Reference to the render operation queue\n   * Ensures sequential execution of async canvas operations\n   * Prevents PDF.js race condition: \"Cannot use the same canvas during multiple render() operations\"\n   * @type {React.RefObject<Promise<void>>}\n   */\n  const renderQueue = useRef(Promise.resolve());\n\n  // ==========================================================================\n  // SECTION 4.5: RENDER QUEUE HELPER\n  // ==========================================================================\n\n  /**\n   * Queue a render operation to execute sequentially\n   *\n   * This helper ensures that async canvas operations (loadPDF, setPage, setScale)\n   * execute one at a time, preventing concurrent access to the PDF.js canvas.\n   * Uses Promise chaining to maintain operation order.\n   *\n   * @param {Function} operation - Async function returning a Promise\n   * @returns {void}\n   */\n  const queueOperation = useCallback((operation) => {\n    renderQueue.current = renderQueue.current\n      .then(operation)\n      .catch(error => {\n        // Log errors but don't break the queue\n        console.error('AnnotPdf: Queued operation failed:', error);\n      });\n  }, []);\n\n  // ==========================================================================\n  // SECTION 5: ENGINE INITIALIZATION AND CLEANUP\n  // ==========================================================================\n\n  /**\n   * Initialize AnnotationRenderer on component mount\n   * Cleanup on component unmount\n   */\n  useEffect(() => {\n    // Guard: Wait for DOM elements to be ready\n    if (!canvasRef.current || !layerContainerRef.current) {\n      return;\n    }\n\n    // Initialize engine\n    try {\n      engineRef.current = new AnnotationRenderer({\n        canvasElement: canvasRef.current,\n        container: layerContainerRef.current\n      });\n    } catch (error) {\n      console.error('AnnotPdf: Failed to initialize renderer:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n\n    // Cleanup on unmount\n    return () => {\n      if (engineRef.current) {\n        engineRef.current.destroy();\n        engineRef.current = null;\n      }\n    };\n  }, []); // Empty deps - run once on mount\n\n  // ==========================================================================\n  // SECTION 6: PDF LOADING SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Load PDF document when pdfUrl prop changes\n   * Handles async operation with cancellation support\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and pdfUrl must be valid\n    if (!engineRef.current || !pdfUrl) {\n      return;\n    }\n\n    let cancelled = false;\n\n    const loadPdf = async () => {\n      try {\n        const result = await engineRef.current.loadPDF(pdfUrl);\n\n        // Check if component unmounted during async operation\n        if (cancelled) return;\n\n        // Check if load was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to load PDF:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n          return;\n        }\n\n        // Call onLoad callback with pageCount from result\n        if (onLoad) {\n          onLoad({ pageCount: result.pageCount });\n        }\n      } catch (error) {\n        if (cancelled) return;\n\n        console.error('AnnotPdf: Failed to load PDF:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    };\n\n    // Queue the PDF loading operation to prevent race conditions\n    queueOperation(loadPdf);\n\n    // Cleanup: Prevent state updates if component unmounts during load\n    return () => {\n      cancelled = true;\n    };\n  }, [pdfUrl, onLoad, onError, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 7: PAGE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync page prop to engine.setPage() method\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and page must be valid\n    if (!engineRef.current || !page || typeof page !== 'number') {\n      return;\n    }\n\n    // Queue the page change operation to prevent race conditions\n    queueOperation(async () => {\n      try {\n        const result = await engineRef.current.setPage(page);\n\n        // Check if page change was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to set page:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n          return;\n        }\n\n        // Optional: Notify parent of successful page change\n        if (onPageChange) {\n          onPageChange(page);\n        }\n      } catch (error) {\n        console.error('AnnotPdf: Failed to set page:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    });\n  }, [page, onPageChange, onError, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 8: SCALE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync scale prop to engine.setScale() method\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and scale must be valid\n    if (!engineRef.current || !scale || typeof scale !== 'number') {\n      return;\n    }\n\n    // Queue the scale change operation to prevent race conditions\n    queueOperation(async () => {\n      try {\n        const result = await engineRef.current.setScale(scale);\n\n        // Check if scale change was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to set scale:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n        }\n      } catch (error) {\n        console.error('AnnotPdf: Failed to set scale:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    });\n  }, [scale, onError, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 9: ANNOTATIONS SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync annotations prop to engine.setAnnotations() method\n   */\n  useEffect(() => {\n    // Guard: Engine must exist\n    if (!engineRef.current) {\n      return;\n    }\n\n    // Sync annotations to engine (default to empty array)\n    try {\n      engineRef.current.setAnnotations(annotations || []);\n    } catch (error) {\n      console.error('AnnotPdf: Failed to set annotations:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n  }, [annotations, onError]);\n\n  // ==========================================================================\n  // SECTION 10: TIMELINE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync currentTime prop to engine.setTime() method\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and currentTime must be defined\n    if (!engineRef.current || currentTime === undefined || currentTime === null) {\n      return;\n    }\n\n    // Sync timeline to engine\n    try {\n      engineRef.current.setTime(currentTime);\n    } catch (error) {\n      console.error('AnnotPdf: Failed to set time:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n  }, [currentTime, onError]);\n\n  // ==========================================================================\n  // SECTION 11: STYLING DEFINITIONS\n  // ==========================================================================\n\n  /**\n   * Default container styles\n   * Merged with user-provided styles (user styles override defaults)\n   */\n  const defaultContainerStyle = {\n    position: 'relative',\n    display: 'inline-block',\n    lineHeight: 0, // Remove extra space below canvas\n    ...style // User styles override defaults\n  };\n\n  /**\n   * Default layer container styles\n   * Positions layer div absolutely over canvas\n   */\n  const defaultLayerStyle = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none', // Allow clicks to pass through to canvas\n    overflow: 'hidden'\n  };\n\n  /**\n   * Default canvas styles\n   * Merged with user-provided canvasStyle\n   */\n  const defaultCanvasStyle = {\n    display: 'block',\n    ...canvasStyle // User styles override defaults\n  };\n\n  // ==========================================================================\n  // SECTION 12: JSX RETURN\n  // ==========================================================================\n\n  return (\n    <div className={className} style={defaultContainerStyle}>\n      <canvas ref={canvasRef} style={defaultCanvasStyle} />\n      <div ref={layerContainerRef} style={defaultLayerStyle} />\n    </div>\n  );\n}\n\n// ============================================================================\n// SECTION 13: EXPORT\n// ============================================================================\n\nexport default AnnotPdf;\n"],"names":["AnnotPdf","pdfUrl","page","scale","annotations","currentTime","onLoad","onError","onPageChange","className","style","canvasStyle","canvasRef","useRef","layerContainerRef","engineRef","renderQueue","queueOperation","useCallback","operation","error","useEffect","AnnotationRenderer","cancelled","result","defaultContainerStyle","defaultLayerStyle","defaultCanvasStyle","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"index14.cjs","sources":["../src/adapters/AnnotPdf.jsx"],"sourcesContent":["// ============================================================================\n// SECTION 1: IMPORTS\n// ============================================================================\n\nimport { useRef, useEffect, useCallback } from 'react';\nimport { AnnotationRenderer } from '../core/AnnotationRenderer.js';\n\n// ============================================================================\n// SECTION 2: JSDOC DOCUMENTATION\n// ============================================================================\n\n/**\n * AnnotPdf - Declarative React component for PDF annotation rendering\n *\n * A React wrapper around the AnnotationRenderer core engine that provides\n * a declarative, props-based API for rendering PDF documents with\n * timeline-synchronized annotations.\n *\n * Features:\n * - Automatic lifecycle management (initialization and cleanup)\n * - Declarative prop-to-method synchronization\n * - PDF rendering with pdf.js\n * - Timeline-synchronized annotation display\n * - Support for highlight, text, and ink annotations\n * - Page navigation and zoom control\n *\n * @component\n * @example\n * // Basic usage\n * <AnnotPdf\n *   pdfUrl=\"/document.pdf\"\n *   page={1}\n *   scale={1.5}\n *   annotations={[]}\n *   currentTime={0}\n * />\n *\n * @example\n * // With audio synchronization\n * const [currentTime, setCurrentTime] = useState(0);\n *\n * <div>\n *   <AnnotPdf\n *     pdfUrl=\"/lecture.pdf\"\n *     page={1}\n *     scale={1.5}\n *     annotations={annotations}\n *     currentTime={currentTime}\n *     onLoad={({ pageCount }) => console.log('Loaded:', pageCount)}\n *   />\n *   <audio\n *     src=\"/lecture.mp3\"\n *     onTimeUpdate={(e) => setCurrentTime(e.target.currentTime)}\n *     controls\n *   />\n * </div>\n *\n * @param {Object} props - Component props\n * @param {string} props.pdfUrl - PDF document URL (required)\n * @param {number} [props.page=1] - Current page number (1-indexed)\n * @param {number} [props.scale=1.5] - Zoom scale factor\n * @param {Array} [props.annotations=[]] - Array of annotation objects\n * @param {number} [props.currentTime=0] - Timeline position in seconds\n * @param {Function} [props.onLoad] - Callback when PDF loads: ({pageCount}) => void\n * @param {Function} [props.onError] - Callback on error: (error) => void\n * @param {Function} [props.onPageChange] - Callback when page changes: (page) => void\n * @param {string} [props.className] - CSS class for container div\n * @param {Object} [props.style] - Inline styles for container div\n * @param {Object} [props.canvasStyle] - Inline styles for canvas element\n * @returns {JSX.Element} PDF viewer component with annotation layers\n */\n\n// ============================================================================\n// SECTION 3: COMPONENT DEFINITION\n// ============================================================================\n\nfunction AnnotPdf({\n  // Required props\n  pdfUrl,\n\n  // Optional props with defaults\n  page = 1,\n  scale = 1.5,\n  annotations = [],\n  currentTime = 0,\n\n  // Callbacks\n  onLoad,\n  onError,\n  onPageChange,\n\n  // Styling\n  className,\n  style,\n  canvasStyle\n}) {\n\n  // ==========================================================================\n  // SECTION 4: REFS INITIALIZATION\n  // ==========================================================================\n\n  /**\n   * Reference to the canvas element for PDF rendering\n   * @type {React.RefObject<HTMLCanvasElement>}\n   */\n  const canvasRef = useRef(null);\n\n  /**\n   * Reference to the layer container div for annotation layers\n   * @type {React.RefObject<HTMLDivElement>}\n   */\n  const layerContainerRef = useRef(null);\n\n  /**\n   * Reference to the AnnotationRenderer engine instance\n   * Stored in ref to avoid triggering re-renders\n   * @type {React.RefObject<AnnotationRenderer|null>}\n   */\n  const engineRef = useRef(null);\n\n  /**\n   * Reference to the render operation queue\n   * Ensures sequential execution of async canvas operations\n   * Prevents PDF.js race condition: \"Cannot use the same canvas during multiple render() operations\"\n   * @type {React.RefObject<Promise<void>>}\n   */\n  const renderQueue = useRef(Promise.resolve());\n\n  // ==========================================================================\n  // SECTION 4.5: RENDER QUEUE HELPER\n  // ==========================================================================\n\n  /**\n   * Queue a render operation to execute sequentially\n   *\n   * This helper ensures that async canvas operations (loadPDF, setPage, setScale)\n   * execute one at a time, preventing concurrent access to the PDF.js canvas.\n   * Uses Promise chaining to maintain operation order.\n   *\n   * @param {Function} operation - Async function returning a Promise\n   * @returns {void}\n   */\n  const queueOperation = useCallback((operation) => {\n    renderQueue.current = renderQueue.current\n      .then(operation)\n      .catch(error => {\n        // Log errors but don't break the queue\n        console.error('AnnotPdf: Queued operation failed:', error);\n      });\n  }, []);\n\n  // ==========================================================================\n  // SECTION 5: ENGINE INITIALIZATION AND CLEANUP\n  // ==========================================================================\n\n  /**\n   * Initialize AnnotationRenderer on component mount\n   * Cleanup on component unmount\n   */\n  useEffect(() => {\n    // Guard: Wait for DOM elements to be ready\n    if (!canvasRef.current || !layerContainerRef.current) {\n      return;\n    }\n\n    // Initialize engine\n    try {\n      engineRef.current = new AnnotationRenderer({\n        canvasElement: canvasRef.current,\n        container: layerContainerRef.current\n      });\n    } catch (error) {\n      console.error('AnnotPdf: Failed to initialize renderer:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n\n    // Cleanup on unmount\n    return () => {\n      if (engineRef.current) {\n        engineRef.current.destroy();\n        engineRef.current = null;\n      }\n    };\n  }, []); // Empty deps - run once on mount\n\n  // ==========================================================================\n  // SECTION 6: PDF LOADING SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Load PDF document when pdfUrl prop changes\n   * Handles async operation with cancellation support\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and pdfUrl must be valid\n    if (!engineRef.current || !pdfUrl) {\n      return;\n    }\n\n    let cancelled = false;\n\n    const loadPdf = async () => {\n      try {\n        const result = await engineRef.current.loadPDF(pdfUrl);\n\n        // Check if component unmounted during async operation\n        if (cancelled) return;\n\n        // Check if load was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to load PDF:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n          return;\n        }\n\n        // Call onLoad callback with pageCount from result\n        if (onLoad) {\n          onLoad({ pageCount: result.pageCount });\n        }\n      } catch (error) {\n        if (cancelled) return;\n\n        console.error('AnnotPdf: Failed to load PDF:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    };\n\n    // Queue the PDF loading operation to prevent race conditions\n    queueOperation(loadPdf);\n\n    // Cleanup: Prevent state updates if component unmounts during load\n    return () => {\n      cancelled = true;\n    };\n  }, [pdfUrl, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 7: PAGE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync page prop to engine.setPage() method\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and page must be valid\n    if (!engineRef.current || !page || typeof page !== 'number') {\n      return;\n    }\n\n    // Queue the page change operation to prevent race conditions\n    queueOperation(async () => {\n      try {\n        const result = await engineRef.current.setPage(page);\n\n        // Check if page change was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to set page:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n          return;\n        }\n\n        // Optional: Notify parent of successful page change\n        if (onPageChange) {\n          onPageChange(page);\n        }\n      } catch (error) {\n        console.error('AnnotPdf: Failed to set page:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    });\n  }, [page, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 8: SCALE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync scale prop to engine.setScale() method\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and scale must be valid\n    if (!engineRef.current || !scale || typeof scale !== 'number') {\n      return;\n    }\n\n    // Queue the scale change operation to prevent race conditions\n    queueOperation(async () => {\n      try {\n        const result = await engineRef.current.setScale(scale);\n\n        // Check if scale change was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to set scale:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n        }\n      } catch (error) {\n        console.error('AnnotPdf: Failed to set scale:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    });\n  }, [scale, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 9: ANNOTATIONS SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync annotations prop to engine.setAnnotations() method\n   */\n  useEffect(() => {\n    // Guard: Engine must exist\n    if (!engineRef.current) {\n      return;\n    }\n\n    // Sync annotations to engine (default to empty array)\n    try {\n      engineRef.current.setAnnotations(annotations || []);\n    } catch (error) {\n      console.error('AnnotPdf: Failed to set annotations:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n  }, [annotations]);\n\n  // ==========================================================================\n  // SECTION 10: TIMELINE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync currentTime prop to engine.setTime() method\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and currentTime must be defined\n    if (!engineRef.current || currentTime === undefined || currentTime === null) {\n      return;\n    }\n\n    // Sync timeline to engine\n    try {\n      engineRef.current.setTime(currentTime);\n    } catch (error) {\n      console.error('AnnotPdf: Failed to set time:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n  }, [currentTime]);\n\n  // ==========================================================================\n  // SECTION 11: STYLING DEFINITIONS\n  // ==========================================================================\n\n  /**\n   * Default container styles\n   * Merged with user-provided styles (user styles override defaults)\n   */\n  const defaultContainerStyle = {\n    position: 'relative',\n    display: 'inline-block',\n    lineHeight: 0, // Remove extra space below canvas\n    ...style // User styles override defaults\n  };\n\n  /**\n   * Default layer container styles\n   * Positions layer div absolutely over canvas\n   */\n  const defaultLayerStyle = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none', // Allow clicks to pass through to canvas\n    overflow: 'hidden'\n  };\n\n  /**\n   * Default canvas styles\n   * Merged with user-provided canvasStyle\n   */\n  const defaultCanvasStyle = {\n    display: 'block',\n    ...canvasStyle // User styles override defaults\n  };\n\n  // ==========================================================================\n  // SECTION 12: JSX RETURN\n  // ==========================================================================\n\n  return (\n    <div className={className} style={defaultContainerStyle}>\n      <canvas ref={canvasRef} style={defaultCanvasStyle} />\n      <div ref={layerContainerRef} style={defaultLayerStyle} />\n    </div>\n  );\n}\n\n// ============================================================================\n// SECTION 13: EXPORT\n// ============================================================================\n\nexport default AnnotPdf;\n"],"names":["AnnotPdf","pdfUrl","page","scale","annotations","currentTime","onLoad","onError","onPageChange","className","style","canvasStyle","canvasRef","useRef","layerContainerRef","engineRef","renderQueue","queueOperation","useCallback","operation","error","useEffect","AnnotationRenderer","cancelled","result","defaultContainerStyle","defaultLayerStyle","defaultCanvasStyle","jsxs","jsx"],"mappings":"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"}

package/dist/index14.js

@@ -1,34 +1,34 @@
 import { jsxs as S, jsx as F } from "react/jsx-runtime";
-import { useRef as u, useCallback as k, useEffect as i } from "react";
+import { useRef as u, useCallback as k, useEffect as c } from "react";
 import { AnnotationRenderer as x } from "./index2.js";
-function q({
+function Q({
   // Required props
   pdfUrl: a,
   // Optional props with defaults
-  page: s = 1,
-  scale: o = 1.5,
-  annotations: A = [],
+  page: i = 1,
+  scale: s = 1.5,
+  annotations: y = [],
   currentTime: l = 0,
   // Callbacks
-  onLoad: f,
+  onLoad: P,
   onError: t,
-  onPageChange: d,
+  onPageChange: h,
   // Styling
   className: v,
   style: m,
   canvasStyle: w
 }) {
-  const y = u(null), P = u(null), r = u(null), h = u(Promise.resolve()), c = k((e) => {
-    h.current = h.current.then(e).catch((p) => {
+  const f = u(null), d = u(null), r = u(null), A = u(Promise.resolve()), o = k((e) => {
+    A.current = A.current.then(e).catch((p) => {
       console.error("AnnotPdf: Queued operation failed:", p);
     });
   }, []);
-  i(() => {
-    if (!(!y.current || !P.current)) {
+  c(() => {
+    if (!(!f.current || !d.current)) {
       try {
         r.current = new x({
-          canvasElement: y.current,
-          container: P.current
+          canvasElement: f.current,
+          container: d.current
         });
       } catch (e) {
         console.error("AnnotPdf: Failed to initialize renderer:", e), t && t(e);
@@ -37,11 +37,11 @@ function q({
         r.current && (r.current.destroy(), r.current = null);
       };
     }
-  }, []), i(() => {
+  }, []), c(() => {
     if (!r.current || !a)
       return;
     let e = !1;
-    return c(async () => {
+    return o(async () => {
       try {
         const n = await r.current.loadPDF(a);
         if (e) return;
@@ -49,7 +49,7 @@ function q({
           console.error("AnnotPdf: Failed to load PDF:", n.error), t && t(new Error(n.error));
           return;
         }
-        f && f({ pageCount: n.pageCount });
+        P && P({ pageCount: n.pageCount });
       } catch (n) {
         if (e) return;
         console.error("AnnotPdf: Failed to load PDF:", n), t && t(n);
@@ -57,43 +57,43 @@ function q({
     }), () => {
       e = !0;
     };
-  }, [a, f, t, c]), i(() => {
-    !r.current || !s || typeof s != "number" || c(async () => {
+  }, [a, o]), c(() => {
+    !r.current || !i || typeof i != "number" || o(async () => {
       try {
-        const e = await r.current.setPage(s);
+        const e = await r.current.setPage(i);
         if (!e.success) {
           console.error("AnnotPdf: Failed to set page:", e.error), t && t(new Error(e.error));
           return;
         }
-        d && d(s);
+        h && h(i);
       } catch (e) {
         console.error("AnnotPdf: Failed to set page:", e), t && t(e);
       }
     });
-  }, [s, d, t, c]), i(() => {
-    !r.current || !o || typeof o != "number" || c(async () => {
+  }, [i, o]), c(() => {
+    !r.current || !s || typeof s != "number" || o(async () => {
       try {
-        const e = await r.current.setScale(o);
+        const e = await r.current.setScale(s);
         e.success || (console.error("AnnotPdf: Failed to set scale:", e.error), t && t(new Error(e.error)));
       } catch (e) {
         console.error("AnnotPdf: Failed to set scale:", e), t && t(e);
       }
     });
-  }, [o, t, c]), i(() => {
+  }, [s, o]), c(() => {
     if (r.current)
       try {
-        r.current.setAnnotations(A || []);
+        r.current.setAnnotations(y || []);
       } catch (e) {
         console.error("AnnotPdf: Failed to set annotations:", e), t && t(e);
       }
-  }, [A, t]), i(() => {
+  }, [y]), c(() => {
     if (!(!r.current || l === void 0 || l === null))
       try {
         r.current.setTime(l);
       } catch (e) {
         console.error("AnnotPdf: Failed to set time:", e), t && t(e);
       }
-  }, [l, t]);
+  }, [l]);
   const b = {
     position: "relative",
     display: "inline-block",
@@ -101,7 +101,7 @@ function q({
     // Remove extra space below canvas
     ...m
     // User styles override defaults
-  }, R = {
+  }, C = {
     position: "absolute",
     top: 0,
     left: 0,
@@ -110,17 +110,17 @@ function q({
     pointerEvents: "none",
     // Allow clicks to pass through to canvas
     overflow: "hidden"
-  }, C = {
+  }, R = {
     display: "block",
     ...w
     // User styles override defaults
   };
   return /* @__PURE__ */ S("div", { className: v, style: b, children: [
-    /* @__PURE__ */ F("canvas", { ref: y, style: C }),
-    /* @__PURE__ */ F("div", { ref: P, style: R })
+    /* @__PURE__ */ F("canvas", { ref: f, style: R }),
+    /* @__PURE__ */ F("div", { ref: d, style: C })
   ] });
 }
 export {
-  q as default
+  Q as default
 };
 //# sourceMappingURL=index14.js.map

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","sources":["../src/adapters/AnnotPdf.jsx"],"sourcesContent":["// ============================================================================\n// SECTION 1: IMPORTS\n// ============================================================================\n\nimport { useRef, useEffect, useCallback } from 'react';\nimport { AnnotationRenderer } from '../core/AnnotationRenderer.js';\n\n// ============================================================================\n// SECTION 2: JSDOC DOCUMENTATION\n// ============================================================================\n\n/**\n * AnnotPdf - Declarative React component for PDF annotation rendering\n *\n * A React wrapper around the AnnotationRenderer core engine that provides\n * a declarative, props-based API for rendering PDF documents with\n * timeline-synchronized annotations.\n *\n * Features:\n * - Automatic lifecycle management (initialization and cleanup)\n * - Declarative prop-to-method synchronization\n * - PDF rendering with pdf.js\n * - Timeline-synchronized annotation display\n * - Support for highlight, text, and ink annotations\n * - Page navigation and zoom control\n *\n * @component\n * @example\n * // Basic usage\n * <AnnotPdf\n *   pdfUrl=\"/document.pdf\"\n *   page={1}\n *   scale={1.5}\n *   annotations={[]}\n *   currentTime={0}\n * />\n *\n * @example\n * // With audio synchronization\n * const [currentTime, setCurrentTime] = useState(0);\n *\n * <div>\n *   <AnnotPdf\n *     pdfUrl=\"/lecture.pdf\"\n *     page={1}\n *     scale={1.5}\n *     annotations={annotations}\n *     currentTime={currentTime}\n *     onLoad={({ pageCount }) => console.log('Loaded:', pageCount)}\n *   />\n *   <audio\n *     src=\"/lecture.mp3\"\n *     onTimeUpdate={(e) => setCurrentTime(e.target.currentTime)}\n *     controls\n *   />\n * </div>\n *\n * @param {Object} props - Component props\n * @param {string} props.pdfUrl - PDF document URL (required)\n * @param {number} [props.page=1] - Current page number (1-indexed)\n * @param {number} [props.scale=1.5] - Zoom scale factor\n * @param {Array} [props.annotations=[]] - Array of annotation objects\n * @param {number} [props.currentTime=0] - Timeline position in seconds\n * @param {Function} [props.onLoad] - Callback when PDF loads: ({pageCount}) => void\n * @param {Function} [props.onError] - Callback on error: (error) => void\n * @param {Function} [props.onPageChange] - Callback when page changes: (page) => void\n * @param {string} [props.className] - CSS class for container div\n * @param {Object} [props.style] - Inline styles for container div\n * @param {Object} [props.canvasStyle] - Inline styles for canvas element\n * @returns {JSX.Element} PDF viewer component with annotation layers\n */\n\n// ============================================================================\n// SECTION 3: COMPONENT DEFINITION\n// ============================================================================\n\nfunction AnnotPdf({\n  // Required props\n  pdfUrl,\n\n  // Optional props with defaults\n  page = 1,\n  scale = 1.5,\n  annotations = [],\n  currentTime = 0,\n\n  // Callbacks\n  onLoad,\n  onError,\n  onPageChange,\n\n  // Styling\n  className,\n  style,\n  canvasStyle\n}) {\n\n  // ==========================================================================\n  // SECTION 4: REFS INITIALIZATION\n  // ==========================================================================\n\n  /**\n   * Reference to the canvas element for PDF rendering\n   * @type {React.RefObject<HTMLCanvasElement>}\n   */\n  const canvasRef = useRef(null);\n\n  /**\n   * Reference to the layer container div for annotation layers\n   * @type {React.RefObject<HTMLDivElement>}\n   */\n  const layerContainerRef = useRef(null);\n\n  /**\n   * Reference to the AnnotationRenderer engine instance\n   * Stored in ref to avoid triggering re-renders\n   * @type {React.RefObject<AnnotationRenderer|null>}\n   */\n  const engineRef = useRef(null);\n\n  /**\n   * Reference to the render operation queue\n   * Ensures sequential execution of async canvas operations\n   * Prevents PDF.js race condition: \"Cannot use the same canvas during multiple render() operations\"\n   * @type {React.RefObject<Promise<void>>}\n   */\n  const renderQueue = useRef(Promise.resolve());\n\n  // ==========================================================================\n  // SECTION 4.5: RENDER QUEUE HELPER\n  // ==========================================================================\n\n  /**\n   * Queue a render operation to execute sequentially\n   *\n   * This helper ensures that async canvas operations (loadPDF, setPage, setScale)\n   * execute one at a time, preventing concurrent access to the PDF.js canvas.\n   * Uses Promise chaining to maintain operation order.\n   *\n   * @param {Function} operation - Async function returning a Promise\n   * @returns {void}\n   */\n  const queueOperation = useCallback((operation) => {\n    renderQueue.current = renderQueue.current\n      .then(operation)\n      .catch(error => {\n        // Log errors but don't break the queue\n        console.error('AnnotPdf: Queued operation failed:', error);\n      });\n  }, []);\n\n  // ==========================================================================\n  // SECTION 5: ENGINE INITIALIZATION AND CLEANUP\n  // ==========================================================================\n\n  /**\n   * Initialize AnnotationRenderer on component mount\n   * Cleanup on component unmount\n   */\n  useEffect(() => {\n    // Guard: Wait for DOM elements to be ready\n    if (!canvasRef.current || !layerContainerRef.current) {\n      return;\n    }\n\n    // Initialize engine\n    try {\n      engineRef.current = new AnnotationRenderer({\n        canvasElement: canvasRef.current,\n        container: layerContainerRef.current\n      });\n    } catch (error) {\n      console.error('AnnotPdf: Failed to initialize renderer:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n\n    // Cleanup on unmount\n    return () => {\n      if (engineRef.current) {\n        engineRef.current.destroy();\n        engineRef.current = null;\n      }\n    };\n  }, []); // Empty deps - run once on mount\n\n  // ==========================================================================\n  // SECTION 6: PDF LOADING SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Load PDF document when pdfUrl prop changes\n   * Handles async operation with cancellation support\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and pdfUrl must be valid\n    if (!engineRef.current || !pdfUrl) {\n      return;\n    }\n\n    let cancelled = false;\n\n    const loadPdf = async () => {\n      try {\n        const result = await engineRef.current.loadPDF(pdfUrl);\n\n        // Check if component unmounted during async operation\n        if (cancelled) return;\n\n        // Check if load was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to load PDF:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n          return;\n        }\n\n        // Call onLoad callback with pageCount from result\n        if (onLoad) {\n          onLoad({ pageCount: result.pageCount });\n        }\n      } catch (error) {\n        if (cancelled) return;\n\n        console.error('AnnotPdf: Failed to load PDF:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    };\n\n    // Queue the PDF loading operation to prevent race conditions\n    queueOperation(loadPdf);\n\n    // Cleanup: Prevent state updates if component unmounts during load\n    return () => {\n      cancelled = true;\n    };\n  }, [pdfUrl, onLoad, onError, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 7: PAGE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync page prop to engine.setPage() method\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and page must be valid\n    if (!engineRef.current || !page || typeof page !== 'number') {\n      return;\n    }\n\n    // Queue the page change operation to prevent race conditions\n    queueOperation(async () => {\n      try {\n        const result = await engineRef.current.setPage(page);\n\n        // Check if page change was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to set page:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n          return;\n        }\n\n        // Optional: Notify parent of successful page change\n        if (onPageChange) {\n          onPageChange(page);\n        }\n      } catch (error) {\n        console.error('AnnotPdf: Failed to set page:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    });\n  }, [page, onPageChange, onError, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 8: SCALE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync scale prop to engine.setScale() method\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and scale must be valid\n    if (!engineRef.current || !scale || typeof scale !== 'number') {\n      return;\n    }\n\n    // Queue the scale change operation to prevent race conditions\n    queueOperation(async () => {\n      try {\n        const result = await engineRef.current.setScale(scale);\n\n        // Check if scale change was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to set scale:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n        }\n      } catch (error) {\n        console.error('AnnotPdf: Failed to set scale:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    });\n  }, [scale, onError, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 9: ANNOTATIONS SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync annotations prop to engine.setAnnotations() method\n   */\n  useEffect(() => {\n    // Guard: Engine must exist\n    if (!engineRef.current) {\n      return;\n    }\n\n    // Sync annotations to engine (default to empty array)\n    try {\n      engineRef.current.setAnnotations(annotations || []);\n    } catch (error) {\n      console.error('AnnotPdf: Failed to set annotations:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n  }, [annotations, onError]);\n\n  // ==========================================================================\n  // SECTION 10: TIMELINE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync currentTime prop to engine.setTime() method\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and currentTime must be defined\n    if (!engineRef.current || currentTime === undefined || currentTime === null) {\n      return;\n    }\n\n    // Sync timeline to engine\n    try {\n      engineRef.current.setTime(currentTime);\n    } catch (error) {\n      console.error('AnnotPdf: Failed to set time:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n  }, [currentTime, onError]);\n\n  // ==========================================================================\n  // SECTION 11: STYLING DEFINITIONS\n  // ==========================================================================\n\n  /**\n   * Default container styles\n   * Merged with user-provided styles (user styles override defaults)\n   */\n  const defaultContainerStyle = {\n    position: 'relative',\n    display: 'inline-block',\n    lineHeight: 0, // Remove extra space below canvas\n    ...style // User styles override defaults\n  };\n\n  /**\n   * Default layer container styles\n   * Positions layer div absolutely over canvas\n   */\n  const defaultLayerStyle = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none', // Allow clicks to pass through to canvas\n    overflow: 'hidden'\n  };\n\n  /**\n   * Default canvas styles\n   * Merged with user-provided canvasStyle\n   */\n  const defaultCanvasStyle = {\n    display: 'block',\n    ...canvasStyle // User styles override defaults\n  };\n\n  // ==========================================================================\n  // SECTION 12: JSX RETURN\n  // ==========================================================================\n\n  return (\n    <div className={className} style={defaultContainerStyle}>\n      <canvas ref={canvasRef} style={defaultCanvasStyle} />\n      <div ref={layerContainerRef} style={defaultLayerStyle} />\n    </div>\n  );\n}\n\n// ============================================================================\n// SECTION 13: EXPORT\n// ============================================================================\n\nexport default AnnotPdf;\n"],"names":["AnnotPdf","pdfUrl","page","scale","annotations","currentTime","onLoad","onError","onPageChange","className","style","canvasStyle","canvasRef","useRef","layerContainerRef","engineRef","renderQueue","queueOperation","useCallback","operation","error","useEffect","AnnotationRenderer","cancelled","result","defaultContainerStyle","defaultLayerStyle","defaultCanvasStyle","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"index14.js","sources":["../src/adapters/AnnotPdf.jsx"],"sourcesContent":["// ============================================================================\n// SECTION 1: IMPORTS\n// ============================================================================\n\nimport { useRef, useEffect, useCallback } from 'react';\nimport { AnnotationRenderer } from '../core/AnnotationRenderer.js';\n\n// ============================================================================\n// SECTION 2: JSDOC DOCUMENTATION\n// ============================================================================\n\n/**\n * AnnotPdf - Declarative React component for PDF annotation rendering\n *\n * A React wrapper around the AnnotationRenderer core engine that provides\n * a declarative, props-based API for rendering PDF documents with\n * timeline-synchronized annotations.\n *\n * Features:\n * - Automatic lifecycle management (initialization and cleanup)\n * - Declarative prop-to-method synchronization\n * - PDF rendering with pdf.js\n * - Timeline-synchronized annotation display\n * - Support for highlight, text, and ink annotations\n * - Page navigation and zoom control\n *\n * @component\n * @example\n * // Basic usage\n * <AnnotPdf\n *   pdfUrl=\"/document.pdf\"\n *   page={1}\n *   scale={1.5}\n *   annotations={[]}\n *   currentTime={0}\n * />\n *\n * @example\n * // With audio synchronization\n * const [currentTime, setCurrentTime] = useState(0);\n *\n * <div>\n *   <AnnotPdf\n *     pdfUrl=\"/lecture.pdf\"\n *     page={1}\n *     scale={1.5}\n *     annotations={annotations}\n *     currentTime={currentTime}\n *     onLoad={({ pageCount }) => console.log('Loaded:', pageCount)}\n *   />\n *   <audio\n *     src=\"/lecture.mp3\"\n *     onTimeUpdate={(e) => setCurrentTime(e.target.currentTime)}\n *     controls\n *   />\n * </div>\n *\n * @param {Object} props - Component props\n * @param {string} props.pdfUrl - PDF document URL (required)\n * @param {number} [props.page=1] - Current page number (1-indexed)\n * @param {number} [props.scale=1.5] - Zoom scale factor\n * @param {Array} [props.annotations=[]] - Array of annotation objects\n * @param {number} [props.currentTime=0] - Timeline position in seconds\n * @param {Function} [props.onLoad] - Callback when PDF loads: ({pageCount}) => void\n * @param {Function} [props.onError] - Callback on error: (error) => void\n * @param {Function} [props.onPageChange] - Callback when page changes: (page) => void\n * @param {string} [props.className] - CSS class for container div\n * @param {Object} [props.style] - Inline styles for container div\n * @param {Object} [props.canvasStyle] - Inline styles for canvas element\n * @returns {JSX.Element} PDF viewer component with annotation layers\n */\n\n// ============================================================================\n// SECTION 3: COMPONENT DEFINITION\n// ============================================================================\n\nfunction AnnotPdf({\n  // Required props\n  pdfUrl,\n\n  // Optional props with defaults\n  page = 1,\n  scale = 1.5,\n  annotations = [],\n  currentTime = 0,\n\n  // Callbacks\n  onLoad,\n  onError,\n  onPageChange,\n\n  // Styling\n  className,\n  style,\n  canvasStyle\n}) {\n\n  // ==========================================================================\n  // SECTION 4: REFS INITIALIZATION\n  // ==========================================================================\n\n  /**\n   * Reference to the canvas element for PDF rendering\n   * @type {React.RefObject<HTMLCanvasElement>}\n   */\n  const canvasRef = useRef(null);\n\n  /**\n   * Reference to the layer container div for annotation layers\n   * @type {React.RefObject<HTMLDivElement>}\n   */\n  const layerContainerRef = useRef(null);\n\n  /**\n   * Reference to the AnnotationRenderer engine instance\n   * Stored in ref to avoid triggering re-renders\n   * @type {React.RefObject<AnnotationRenderer|null>}\n   */\n  const engineRef = useRef(null);\n\n  /**\n   * Reference to the render operation queue\n   * Ensures sequential execution of async canvas operations\n   * Prevents PDF.js race condition: \"Cannot use the same canvas during multiple render() operations\"\n   * @type {React.RefObject<Promise<void>>}\n   */\n  const renderQueue = useRef(Promise.resolve());\n\n  // ==========================================================================\n  // SECTION 4.5: RENDER QUEUE HELPER\n  // ==========================================================================\n\n  /**\n   * Queue a render operation to execute sequentially\n   *\n   * This helper ensures that async canvas operations (loadPDF, setPage, setScale)\n   * execute one at a time, preventing concurrent access to the PDF.js canvas.\n   * Uses Promise chaining to maintain operation order.\n   *\n   * @param {Function} operation - Async function returning a Promise\n   * @returns {void}\n   */\n  const queueOperation = useCallback((operation) => {\n    renderQueue.current = renderQueue.current\n      .then(operation)\n      .catch(error => {\n        // Log errors but don't break the queue\n        console.error('AnnotPdf: Queued operation failed:', error);\n      });\n  }, []);\n\n  // ==========================================================================\n  // SECTION 5: ENGINE INITIALIZATION AND CLEANUP\n  // ==========================================================================\n\n  /**\n   * Initialize AnnotationRenderer on component mount\n   * Cleanup on component unmount\n   */\n  useEffect(() => {\n    // Guard: Wait for DOM elements to be ready\n    if (!canvasRef.current || !layerContainerRef.current) {\n      return;\n    }\n\n    // Initialize engine\n    try {\n      engineRef.current = new AnnotationRenderer({\n        canvasElement: canvasRef.current,\n        container: layerContainerRef.current\n      });\n    } catch (error) {\n      console.error('AnnotPdf: Failed to initialize renderer:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n\n    // Cleanup on unmount\n    return () => {\n      if (engineRef.current) {\n        engineRef.current.destroy();\n        engineRef.current = null;\n      }\n    };\n  }, []); // Empty deps - run once on mount\n\n  // ==========================================================================\n  // SECTION 6: PDF LOADING SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Load PDF document when pdfUrl prop changes\n   * Handles async operation with cancellation support\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and pdfUrl must be valid\n    if (!engineRef.current || !pdfUrl) {\n      return;\n    }\n\n    let cancelled = false;\n\n    const loadPdf = async () => {\n      try {\n        const result = await engineRef.current.loadPDF(pdfUrl);\n\n        // Check if component unmounted during async operation\n        if (cancelled) return;\n\n        // Check if load was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to load PDF:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n          return;\n        }\n\n        // Call onLoad callback with pageCount from result\n        if (onLoad) {\n          onLoad({ pageCount: result.pageCount });\n        }\n      } catch (error) {\n        if (cancelled) return;\n\n        console.error('AnnotPdf: Failed to load PDF:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    };\n\n    // Queue the PDF loading operation to prevent race conditions\n    queueOperation(loadPdf);\n\n    // Cleanup: Prevent state updates if component unmounts during load\n    return () => {\n      cancelled = true;\n    };\n  }, [pdfUrl, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 7: PAGE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync page prop to engine.setPage() method\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and page must be valid\n    if (!engineRef.current || !page || typeof page !== 'number') {\n      return;\n    }\n\n    // Queue the page change operation to prevent race conditions\n    queueOperation(async () => {\n      try {\n        const result = await engineRef.current.setPage(page);\n\n        // Check if page change was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to set page:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n          return;\n        }\n\n        // Optional: Notify parent of successful page change\n        if (onPageChange) {\n          onPageChange(page);\n        }\n      } catch (error) {\n        console.error('AnnotPdf: Failed to set page:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    });\n  }, [page, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 8: SCALE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync scale prop to engine.setScale() method\n   * Uses render queue to prevent concurrent canvas operations\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and scale must be valid\n    if (!engineRef.current || !scale || typeof scale !== 'number') {\n      return;\n    }\n\n    // Queue the scale change operation to prevent race conditions\n    queueOperation(async () => {\n      try {\n        const result = await engineRef.current.setScale(scale);\n\n        // Check if scale change was successful\n        if (!result.success) {\n          console.error('AnnotPdf: Failed to set scale:', result.error);\n          if (onError) {\n            onError(new Error(result.error));\n          }\n        }\n      } catch (error) {\n        console.error('AnnotPdf: Failed to set scale:', error);\n        if (onError) {\n          onError(error);\n        }\n      }\n    });\n  }, [scale, queueOperation]);\n\n  // ==========================================================================\n  // SECTION 9: ANNOTATIONS SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync annotations prop to engine.setAnnotations() method\n   */\n  useEffect(() => {\n    // Guard: Engine must exist\n    if (!engineRef.current) {\n      return;\n    }\n\n    // Sync annotations to engine (default to empty array)\n    try {\n      engineRef.current.setAnnotations(annotations || []);\n    } catch (error) {\n      console.error('AnnotPdf: Failed to set annotations:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n  }, [annotations]);\n\n  // ==========================================================================\n  // SECTION 10: TIMELINE SYNCHRONIZATION\n  // ==========================================================================\n\n  /**\n   * Sync currentTime prop to engine.setTime() method\n   */\n  useEffect(() => {\n    // Guard: Engine must exist and currentTime must be defined\n    if (!engineRef.current || currentTime === undefined || currentTime === null) {\n      return;\n    }\n\n    // Sync timeline to engine\n    try {\n      engineRef.current.setTime(currentTime);\n    } catch (error) {\n      console.error('AnnotPdf: Failed to set time:', error);\n      if (onError) {\n        onError(error);\n      }\n    }\n  }, [currentTime]);\n\n  // ==========================================================================\n  // SECTION 11: STYLING DEFINITIONS\n  // ==========================================================================\n\n  /**\n   * Default container styles\n   * Merged with user-provided styles (user styles override defaults)\n   */\n  const defaultContainerStyle = {\n    position: 'relative',\n    display: 'inline-block',\n    lineHeight: 0, // Remove extra space below canvas\n    ...style // User styles override defaults\n  };\n\n  /**\n   * Default layer container styles\n   * Positions layer div absolutely over canvas\n   */\n  const defaultLayerStyle = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none', // Allow clicks to pass through to canvas\n    overflow: 'hidden'\n  };\n\n  /**\n   * Default canvas styles\n   * Merged with user-provided canvasStyle\n   */\n  const defaultCanvasStyle = {\n    display: 'block',\n    ...canvasStyle // User styles override defaults\n  };\n\n  // ==========================================================================\n  // SECTION 12: JSX RETURN\n  // ==========================================================================\n\n  return (\n    <div className={className} style={defaultContainerStyle}>\n      <canvas ref={canvasRef} style={defaultCanvasStyle} />\n      <div ref={layerContainerRef} style={defaultLayerStyle} />\n    </div>\n  );\n}\n\n// ============================================================================\n// SECTION 13: EXPORT\n// ============================================================================\n\nexport default AnnotPdf;\n"],"names":["AnnotPdf","pdfUrl","page","scale","annotations","currentTime","onLoad","onError","onPageChange","className","style","canvasStyle","canvasRef","useRef","layerContainerRef","engineRef","renderQueue","queueOperation","useCallback","operation","error","useEffect","AnnotationRenderer","cancelled","result","defaultContainerStyle","defaultLayerStyle","defaultCanvasStyle","jsxs","jsx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-annotation-renderer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "Framework-agnostic PDF annotation renderer with timeline synchronization for educational content and interactive documents",
   "keywords": [