diff --git a/examples/advanced/grading-papers-comments-annotations/package.json b/examples/advanced/grading-papers-comments-annotations/package.json
index e11d3c67b2..4c3cf6d349 100644
--- a/examples/advanced/grading-papers-comments-annotations/package.json
+++ b/examples/advanced/grading-papers-comments-annotations/package.json
@@ -9,9 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "pdfjs-dist": "4.3.136",
+    "pdfjs-dist": "^5.4.296",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "superdoc": "latest"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.0.4",
diff --git a/examples/advanced/grading-papers-comments-annotations/src/App.jsx b/examples/advanced/grading-papers-comments-annotations/src/App.jsx
index 9542114e0b..2849be6f0c 100644
--- a/examples/advanced/grading-papers-comments-annotations/src/App.jsx
+++ b/examples/advanced/grading-papers-comments-annotations/src/App.jsx
@@ -1,12 +1,14 @@
-import '@harbour-enterprises/superdoc/style.css';
+import 'superdoc/style.css';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Header from './components/Header.jsx';
 import AssignmentHeader from './components/AssignmentHeader.jsx';
 import Drawer from './components/Drawer.jsx';
-import { SuperDoc } from '@harbour-enterprises/superdoc';
+import { SuperDoc } from 'superdoc';
 import NickPDF from '/nick.pdf?url';
 import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';
-import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.mjs';
+
+// Set worker globally outside SD.
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url,).toString();
 
 const defaultWhiteboardOpacity = 1;
 const disabledWhiteboardOpacity = 0.5;
@@ -16,7 +18,7 @@ const App = () => {
   const docFileRef = useRef(null);
 
   // UI state only (do not store SuperDoc instance in state).
-  const [whiteboardReady, setWhiteboardReady] = useState(false);
+  const [whiteboardInitialized, setWhiteboardInit] = useState(false);
   const [whiteboardEnabled, setWhiteboardEnabled] = useState(true);
   const [activeTool, setActiveTool] = useState('select');
 
@@ -51,15 +53,15 @@ const App = () => {
     const superdoc = superdocRef.current;
     if (!superdoc) return;
     superdoc.on('whiteboard:change', (data) => {
-      console.log('whiteboard:change', { data });
+      console.log('whiteboard:change', data);
     });
     superdoc.on('whiteboard:tool', (tool) => {
       setActiveTool(tool);
     });
   }, []);
 
-  const onWhiteboardReady = useCallback((whiteboard) => {
-    setWhiteboardReady(true);
+  const onWhiteboardInit = useCallback((whiteboard) => {
+    setWhiteboardInit(true);
     setActiveTool(whiteboard?.getTool?.() ?? 'select');
     registerStickers();
     registerComments();
@@ -75,7 +77,7 @@ const App = () => {
 
     const superdocInstance = new SuperDoc({
       selector: '#superdoc',
-      document: { data: docFileRef.current },
+      document: docFileRef.current,
       toolbar: 'superdoc-toolbar',
       licenseKey: 'public_license_key_superdocinternal_ad7035140c4b',
       telemetry: { enabled: false },
@@ -87,15 +89,16 @@ const App = () => {
           excludeItems: [
             'acceptTrackedChangeBySelection',
             'rejectTrackedChangeOnSelection',
-            'zoom',
+            // 'zoom',
             'documentMode',
           ],
         },
         pdf: {
           pdfLib: pdfjsLib,
-          pdfViewer: pdfjsViewer,
-          setWorker: true,
-          textLayerMode: 0,
+          setWorker: false,
+          // workerSrc: '',
+          textLayer: true,
+          // outputScale: 1.5,
         },
         whiteboard: {
           enabled: whiteboardEnabled,
@@ -113,10 +116,10 @@ const App = () => {
     superdocRef.current = superdocInstance;
     window.superdoc = superdocInstance;
 
-    superdocInstance.on('whiteboard:ready', ({ whiteboard }) => {
-      onWhiteboardReady(whiteboard);
+    superdocInstance.on('whiteboard:init', ({ whiteboard }) => {
+      onWhiteboardInit(whiteboard);
     });
-  }, [onWhiteboardReady]);
+  }, [onWhiteboardInit]);
 
   // Load selected file and boot SuperDoc.
   const handleNewFile = useCallback(async (fileName) => {
@@ -163,7 +166,7 @@ const App = () => {
   const exportWhiteboard = useCallback(() => {
     const data = superdocRef.current?.whiteboard?.getWhiteboardData();
     if (!data) return;
-    console.log('[Whiteboard] export', { data });
+    console.log('[Whiteboard] export', data);
     console.log('[Whiteboard] export json:', JSON.stringify(data, null, 2));
   }, []);
 
@@ -202,7 +205,7 @@ const App = () => {
               <div className="document-viewer">
                 <div className="viewer-header">
                   <h3>Document Viewer</h3>
-                  {whiteboardReady && (
+                  {whiteboardInitialized && (
                     <div className="whiteboard-toolbar">
                       <div className="whiteboard-tools">
                         {toolButtons.map((tool) => (
diff --git a/examples/advanced/grading-papers-comments-annotations/src/style.css b/examples/advanced/grading-papers-comments-annotations/src/style.css
index f9962255b1..8fa57c4866 100644
--- a/examples/advanced/grading-papers-comments-annotations/src/style.css
+++ b/examples/advanced/grading-papers-comments-annotations/src/style.css
@@ -696,9 +696,29 @@ body {
     font-size: 12px;
 }
 
-.superdoc-pdf-viewer-container {
+.sd-pdf-viewer {
     border: 1px solid #DBDBDB;
     border-radius: 8px;
+    overflow: hidden;
+}
+
+.sd-pdf-viewer-page {
+    border-bottom: 1px solid #DBDBDB;
+}
+
+.sd-pdf-viewer-page  {
+    border-top: 1px solid #dfdfdf;
+    border-bottom: 1px solid #dfdfdf;
+}
+
+.sd-pdf-viewer-page:first-child {
+    border-radius: 16px 16px 0 0;
+    border-top: none;
+}
+
+.sd-pdf-viewer-page:last-child {
+    border-radius: 0 0 16px 16px;
+    border-bottom: none;
 }
 
 .hiddenCanvasElement{
diff --git a/packages/superdoc/package.json b/packages/superdoc/package.json
index 0b2fb0010c..ab3df13d55 100644
--- a/packages/superdoc/package.json
+++ b/packages/superdoc/package.json
@@ -89,7 +89,7 @@
   },
   "peerDependencies": {
     "@hocuspocus/provider": "^2.13.6",
-    "pdfjs-dist": ">=4.3.136 <=4.6.82",
+    "pdfjs-dist": "^5.4.296",
     "y-prosemirror": "catalog:",
     "yjs": "catalog:"
   },
diff --git a/packages/superdoc/postcss.config.mjs b/packages/superdoc/postcss.config.mjs
index f7ce74d8ff..bf3c0bcb2b 100644
--- a/packages/superdoc/postcss.config.mjs
+++ b/packages/superdoc/postcss.config.mjs
@@ -1,15 +1,5 @@
-// packages/superdoc/src/components/PdfViewer/PdfViewer.vue
-const PDF_VIEWER_CLASS = '.superdoc-pdf-viewer';
-
 export default {
   plugins: [
     (await import('postcss-nested')).default,
-    // https://github.com/dbtedman/postcss-prefixwrap
-    // This is necessary for pdf.js style scoping.
-    (await import('postcss-prefixwrap')).default(PDF_VIEWER_CLASS, {
-      whitelist: ['pdf-viewer.css'],
-      ignoredSelectors: [],
-      prefixRootTags: false,
-    }),
   ]
 }
diff --git a/packages/superdoc/src/SuperDoc.test.js b/packages/superdoc/src/SuperDoc.test.js
index 317df33aac..0c74cf747a 100644
--- a/packages/superdoc/src/SuperDoc.test.js
+++ b/packages/superdoc/src/SuperDoc.test.js
@@ -98,7 +98,6 @@ const FloatingCommentsStub = stubComponent('FloatingComments');
 const CommentsLayerStub = stubComponent('CommentsLayer');
 const HrbrFieldsLayerStub = stubComponent('HrbrFieldsLayer');
 const AiLayerStub = stubComponent('AiLayer');
-const PdfViewerStub = stubComponent('PdfViewer');
 const HtmlViewerStub = stubComponent('HtmlViewer');
 
 // Mock @superdoc/super-editor with stubs and PresentationEditor class
@@ -118,10 +117,6 @@ vi.mock('@superdoc/super-editor', () => ({
   },
 }));
 
-vi.mock('./components/PdfViewer/PdfViewer.vue', () => ({
-  default: PdfViewerStub,
-}));
-
 vi.mock('./components/HtmlViewer/HtmlViewer.vue', () => ({
   default: HtmlViewerStub,
 }));
diff --git a/packages/superdoc/src/SuperDoc.vue b/packages/superdoc/src/SuperDoc.vue
index 379f415302..b02961f5b8 100644
--- a/packages/superdoc/src/SuperDoc.vue
+++ b/packages/superdoc/src/SuperDoc.vue
@@ -57,6 +57,17 @@ const {
 } = storeToRefs(superdocStore);
 const { handlePageReady, modules, user, getDocument } = superdocStore;
 
+/*
+NOTE: new PdfViewer does not emit page-loaded. Hrbr fields/annotations
+rely on handlePageReady; revisit when wiring fields for PDF.
+
+From the old code:
+const containerBounds = container.getBoundingClientRect();
+containerBounds.originalWidth = width;
+containerBounds.originalHeight = height;
+emit('page-loaded', documentId, index, containerBounds);
+*/
+
 //prettier-ignore
 const {
   getConfig,
@@ -135,6 +146,7 @@ const superdocStyleVars = computed(() => {
 
 // Refs
 const layers = ref(null);
+const pdfViewerRef = ref(null);
 
 // Comments layer
 const commentsLayer = ref(null);
@@ -687,10 +699,12 @@ const getSelectionPosition = computed(() => {
     return { x: null, y: null };
   }
 
-  const top = selectionPosition.value.top;
-  const left = selectionPosition.value.left;
-  const right = selectionPosition.value.right;
-  const bottom = selectionPosition.value.bottom;
+  const isPdf = selectionPosition.value.source === 'pdf';
+  const zoom = isPdf ? (activeZoom.value ?? 100) / 100 : 1;
+  const top = selectionPosition.value.top * zoom;
+  const left = selectionPosition.value.left * zoom;
+  const right = selectionPosition.value.right * zoom;
+  const bottom = selectionPosition.value.bottom * zoom;
   const style = {
     zIndex: 500,
     borderRadius: '4px',
@@ -733,7 +747,9 @@ const handleSelectionChange = (selection) => {
   activeSelection.value = selection;
 
   // Place the tools menu at the level of the selection
-  let top = selection.selectionBounds.top;
+  const isPdf = selection.source === 'pdf' || selection.source?.value === 'pdf';
+  const zoom = isPdf ? (activeZoom.value ?? 100) / 100 : 1;
+  const top = selection.selectionBounds.top * zoom;
   toolsMenuPosition.top = top + 'px';
   toolsMenuPosition.right = isMobileView ? '0' : '-25px';
 };
@@ -795,7 +811,7 @@ const getPdfPageNumberFromEvent = (event) => {
   const y = event?.clientY;
   if (typeof x !== 'number' || typeof y !== 'number') return null;
   const elements = document.elementsFromPoint(x, y);
-  const pageEl = elements.find((el) => el?.classList?.contains?.('pdf-page'));
+  const pageEl = elements.find((el) => el?.dataset?.pdfPage != null);
   if (pageEl) {
     const pageNumber = Number(pageEl.dataset?.pageNumber);
     return Number.isFinite(pageNumber) ? pageNumber : null;
@@ -821,7 +837,7 @@ const handleSelectionStart = (e) => {
     const zoom = activeZoom.value / 100;
     const x = (e.clientX - layerBounds.left) / zoom;
     const y = (e.clientY - layerBounds.top) / zoom;
-    updateSelection({ startX: x, startY: y, page: pageNumber });
+    updateSelection({ startX: x, startY: y, page: pageNumber, source: 'pdf' });
     selectionLayer.value.addEventListener('mousemove', handleDragMove);
   });
 };
@@ -850,6 +866,7 @@ const handleDragEnd = (e) => {
     },
     page: pageNumber ?? 1,
     documentId: documents.value[0].id,
+    source: 'pdf',
   });
 
   handleSelectionChange(selection);
@@ -873,12 +890,27 @@ const handlePdfClick = (e) => {
   handleSelectionStart(e);
 };
 
+const handlePdfSelectionRaw = ({ selectionBounds, documentId, page }) => {
+  if (!selectionBounds || !documentId) return;
+  const selection = useSelection({
+    selectionBounds,
+    documentId,
+    page,
+    source: 'pdf',
+  });
+  handleSelectionChange(selection);
+};
+
 watch(
   () => activeZoom.value,
   (zoom) => {
     if (proxy.$superdoc.config.useLayoutEngine !== false) {
       PresentationEditor.setGlobalZoom((zoom ?? 100) / 100);
     }
+
+    const pdfViewer = getPDFViewer();
+    pdfViewer?.updateScale((zoom ?? 100) / 100);
+
     nextTick(() => {
       updateWhiteboardPageSizes();
       updateWhiteboardPageOffsets();
@@ -910,6 +942,10 @@ const {
   documents,
   modules,
 });
+
+const getPDFViewer = () => {
+  return Array.isArray(pdfViewerRef.value) ? pdfViewerRef.value[0] : pdfViewerRef.value;
+};
 </script>
 
 <template>
@@ -998,16 +1034,16 @@ const {
 
           <div class="superdoc__sub-document sub-document" v-for="doc in documents" :key="doc.id">
             <!-- PDF renderer -->
-
             <PdfViewer
               v-if="doc.type === PDF"
-              :document-data="doc"
+              :file="doc.data"
+              :file-id="doc.id"
               :config="pdfConfig"
-              @selection-change="handleSelectionChange"
-              @ready="handleDocumentReady"
-              @page-loaded="handlePageReady"
-              @page-ready="handleWhiteboardPageReady"
+              @selection-raw="handlePdfSelectionRaw"
               @bypass-selection="handlePdfClick"
+              @page-rendered="handleWhiteboardPageReady"
+              @document-ready="({ documentId, viewerContainer }) => handleDocumentReady(documentId, viewerContainer)"
+              ref="pdfViewerRef"
             />
 
             <n-message-provider>
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
index dc71241230..4957085329 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
@@ -41,6 +41,7 @@ const {
   editorCommentPositions,
   isCommentHighlighted,
 } = storeToRefs(commentsStore);
+const { activeZoom } = storeToRefs(superdocStore);
 
 const isInternal = ref(true);
 const commentInput = ref(null);
@@ -319,7 +320,10 @@ const getSidebarCommentStyle = computed(() => {
   }
 
   if (pendingComment.value && pendingComment.value.commentId === props.comment.commentId) {
-    const top = Math.max(96, pendingComment.value.selection?.selectionBounds.top - 50);
+    const source = pendingComment.value.selection?.source;
+    const isPdf = source === 'pdf' || source?.value === 'pdf';
+    const zoom = isPdf ? (activeZoom.value ?? 100) / 100 : 1;
+    const top = Math.max(96, pendingComment.value.selection?.selectionBounds.top * zoom - 50);
     style.position = 'absolute';
     style.top = top + 'px';
   }
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
index 599c1560e6..1794f9bafe 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentsLayer.vue
@@ -60,8 +60,8 @@ const getStyle = (conversation) => {
   const { selection, commentId } = conversation;
   const containerBounds = selection.getContainerLocation(props.parent);
   const placement = conversation.selection.selectionBounds;
-  const top = (parseFloat(placement.top) + containerBounds.top) * activeZoom.value;
-
+  const isPdf = selection?.source === 'pdf';
+  const zoom = isPdf ? (activeZoom.value ?? 100) / 100 : 1;
   const internalHighlightColor = '#078383';
   const externalHighlightColor = '#B1124B';
 
@@ -72,10 +72,10 @@ const getStyle = (conversation) => {
 
   return {
     position: 'absolute',
-    top: parseFloat(placement.top) + 'px',
-    left: placement.left + 'px',
-    width: placement.right - placement.left + 'px',
-    height: placement.bottom - placement.top + 'px',
+    top: parseFloat(placement.top) * zoom + 'px',
+    left: placement.left * zoom + 'px',
+    width: (placement.right - placement.left) * zoom + 'px',
+    height: (placement.bottom - placement.top) * zoom + 'px',
     backgroundColor: fillColor,
     pointerEvents: conversation.suppressClick ? 'none' : 'auto',
   };
diff --git a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
index 52899c82e2..481c3626d1 100644
--- a/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
+++ b/packages/superdoc/src/components/CommentsLayer/FloatingComments.vue
@@ -21,6 +21,7 @@ const commentsStore = useCommentsStore();
 
 const { getFloatingComments, hasInitializedLocations, activeComment, commentsList, editorCommentPositions } =
   storeToRefs(commentsStore);
+const { activeZoom } = storeToRefs(superdocStore);
 
 const floatingCommentsContainer = ref(null);
 const renderedSizes = ref([]);
@@ -53,8 +54,9 @@ const handleDialog = (dialog) => {
 
     // If this is a PDF, set the position based on selection bounds
     if (props.currentDocument.type === 'application/pdf') {
+      const zoom = (activeZoom.value ?? 100) / 100;
       Object.entries(comment.selection?.selectionBounds).forEach(([key, value]) => {
-        position[key] = Number(value);
+        position[key] = Number(value) * zoom;
       });
     }
 
@@ -130,10 +132,11 @@ watch(activeComment, (newVal, oldVal) => {
     if (!renderedItem) return (verticalOffset.value = 0);
 
     const selectionTop = comment.selection.selectionBounds.top;
+    const zoom = props.currentDocument.type === 'application/pdf' ? (activeZoom.value ?? 100) / 100 : 1;
     const renderedTop = renderedItem.top;
 
     const editorBounds = floatingCommentsContainer.value.getBoundingClientRect();
-    verticalOffset.value = selectionTop - renderedTop;
+    verticalOffset.value = selectionTop * zoom - renderedTop;
 
     setTimeout(() => {
       renderedItem.elementRef?.value?.scrollIntoView({
@@ -144,6 +147,15 @@ watch(activeComment, (newVal, oldVal) => {
   });
 });
 
+watch(activeZoom, () => {
+  if (props.currentDocument.type === 'application/pdf') {
+    renderedSizes.value = [];
+    firstGroupRendered.value = false;
+    commentsRenderKey.value += 1;
+    verticalOffset.value = 0;
+  }
+});
+
 onBeforeUnmount(() => {
   // Clean up pending timeout to prevent memory leak
   if (measurementTimeoutId.value) {
diff --git a/packages/superdoc/src/components/PdfViewer/PdfViewer.vue b/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
index f1ad74c697..e07c420385 100644
--- a/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
+++ b/packages/superdoc/src/components/PdfViewer/PdfViewer.vue
@@ -1,193 +1,202 @@
 <script setup>
-import { NSpin } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useSuperdocStore } from '@superdoc/stores/superdoc-store';
-import { PDFAdapterFactory, createPDFConfig } from './pdf/pdf-adapter.js';
-import { readFileAsArrayBuffer } from './helpers/read-file.js';
-import useSelection from '@superdoc/helpers/use-selection';
-import './pdf/pdf-viewer.css';
-
-const emit = defineEmits(['page-loaded', 'page-ready', 'ready', 'selection-change', 'bypass-selection']);
+import { ref, computed, watch, markRaw } from 'vue';
+import { floor } from '../../core/pdf/helpers/floor';
+import { readFileAsArrayBuffer } from '../../core/pdf/helpers/read-file';
+import { OUTPUT_SCALE } from '../../core/pdf/helpers/constants';
+import { PDFAdapterFactory, createPDFConfig } from '../../core/pdf/pdf-adapter';
+import PdfViewerDocument from './PdfViewerDocument.vue';
+
+const emit = defineEmits([
+  'page-rendered',
+  'pages-loaded',
+  'document-loaded',
+  'document-ready',
+  'document-error',
+  'selection-raw',
+  'bypass-selection',
+]);
 
 const props = defineProps({
-  documentData: {
+  config: {
     type: Object,
     required: true,
   },
-  config: {
+  file: {
     type: Object,
     required: true,
   },
+  fileId: {
+    type: String,
+  },
 });
 
-const superdocStore = useSuperdocStore();
-const { activeZoom } = storeToRefs(superdocStore);
-
-const viewer = ref(null);
-const isReady = ref(false);
-
-const id = props.documentData.id;
-const pdfData = props.documentData.data;
-
 const pdfConfig = createPDFConfig({
-  pdfLib: props.config.pdfLib,
-  pdfViewer: props.config.pdfViewer,
+  pdfLib: markRaw(props.config.pdfLib),
   workerSrc: props.config.workerSrc,
   setWorker: props.config.setWorker,
-  textLayerMode: props.config.textLayerMode,
 });
+
 const pdfAdapter = PDFAdapterFactory.create(pdfConfig);
 
-const loadPDF = async (file) => {
-  try {
-    const result = await readFileAsArrayBuffer(file);
-    const document = await pdfAdapter.getDocument(result);
-    await pdfAdapter.renderPages({
-      documentId: id,
-      pdfDocument: document,
-      viewerContainer: viewer.value,
-      emit,
-    });
-    isReady.value = true;
-  } catch {}
-};
-
-function getSelectedTextBoundingBox(container) {
-  const selection = window.getSelection();
-  if (selection.rangeCount === 0) {
-    return null;
-  }
+const rootRef = ref(null);
+const documentRef = ref(null);
 
-  const range = selection.getRangeAt(0);
-  const boundingRects = range.getClientRects();
+const pdf = ref(null);
+const pages = ref([]);
+const scale = ref(1); // zoom scale
+const totalPages = ref(0);
+const renderedPages = ref(0);
 
-  if (boundingRects.length === 0) {
-    return null;
-  }
+const hasTextLayer = computed(() => props.config?.textLayer === true);
+const outputScale = computed(() => props.config?.outputScale ?? OUTPUT_SCALE);
 
-  // Initialize bounding box with the first bounding rectangle
-  const firstRect = boundingRects[0];
-  let boundingBox = {
-    top: firstRect.top,
-    left: firstRect.left,
-    bottom: firstRect.bottom,
-    right: firstRect.right,
-  };
-
-  for (let i = 1; i < boundingRects.length; i++) {
-    const rect = boundingRects[i];
-    if (rect.width === 0 || rect.height === 0) {
-      continue;
-    }
-    boundingBox.top = Math.min(boundingBox.top, rect.top);
-    boundingBox.left = Math.min(boundingBox.left, rect.left);
-    boundingBox.bottom = Math.max(boundingBox.bottom, rect.bottom);
-    boundingBox.right = Math.max(boundingBox.right, rect.right);
-  }
-
-  // Get the bounding box of the container
-  const containerRect = container.getBoundingClientRect();
-  const viewerRect = viewer.value.getBoundingClientRect();
+function onPageRendered(payload) {
+  const page = payload?.page;
+  if (page) page.pageIsRendered = true;
+  checkDocumentReady();
+  emit('page-rendered', payload);
+}
 
-  // Adjust the bounding box relative to the page
-  boundingBox.top = (boundingBox.top - containerRect.top) / (activeZoom.value / 100) + container.scrollTop;
-  boundingBox.left = (boundingBox.left - containerRect.left) / (activeZoom.value / 100) + container.scrollLeft;
-  boundingBox.bottom = (boundingBox.bottom - containerRect.top) / (activeZoom.value / 100) + container.scrollTop;
-  boundingBox.right = (boundingBox.right - containerRect.left) / (activeZoom.value / 100) + container.scrollLeft;
+function onSelectionRaw(payload) {
+  emit('selection-raw', payload);
+}
 
-  return boundingBox;
+function onBypassSelection(event) {
+  emit('bypass-selection', event);
 }
 
-const handlePdfClick = (e) => {
-  const { target } = e;
-  if (target.tagName !== 'SPAN') {
-    emit('bypass-selection', e);
-  }
-};
-
-const handleMouseUp = (e) => {
-  const selection = window.getSelection();
-  if (selection.toString().length > 0) {
-    const selectionBounds = getSelectedTextBoundingBox(viewer.value);
-    const sel = useSelection({
-      selectionBounds,
-      documentId: id,
+function checkDocumentReady() {
+  if (totalPages.value <= 0) return;
+  renderedPages.value += 1;
+  if (renderedPages.value >= totalPages.value) {
+    emit('document-ready', {
+      documentId: pdf.value?.documentId,
+      viewerContainer: rootRef.value,
     });
-    emit('selection-change', sel);
   }
-};
+}
 
-onMounted(async () => {
-  await loadPDF(pdfData);
-});
+function updatePages(nextPages) {
+  pages.value = nextPages;
+  totalPages.value = nextPages.length;
+  renderedPages.value = 0;
+}
 
-onUnmounted(() => {
-  pdfAdapter.destroy();
-});
-</script>
+function updateScale(nextScale) {
+  const roundedScale = floor(nextScale, 2);
+  scale.value = roundedScale;
+}
 
-<template>
-  <div class="superdoc-pdf-viewer-container" @mousedown="handlePdfClick" @mouseup="handleMouseUp">
-    <div class="superdoc-pdf-viewer" ref="viewer" id="viewerId"></div>
+defineExpose({
+  updateScale,
+});
 
-    <div v-if="!isReady" class="superdoc-pdf-viewer__loader">
-      <n-spin class="superdoc-pdf-viewer__spin" size="large" />
-    </div>
-  </div>
-</template>
+async function getDocument(file) {
+  if (!file) return;
 
-<style lang="postcss" scoped>
-.superdoc-pdf-viewer-container {
-  width: 100%;
+  try {
+    const result = await readFileAsArrayBuffer(file);
+    const documentId = props.fileId || generateDocumentId('document');
+    const pdfjsDocument = await pdfAdapter.getDocument(result);
+
+    pdf.value = {
+      documentId,
+      pdfjsDocument: markRaw(pdfjsDocument),
+    };
+
+    emit('document-loaded', file);
+  } catch (e) {
+    emit('document-error', e);
+    console.error(e);
+  }
 }
 
-.superdoc-pdf-viewer {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-}
+async function getPages() {
+  if (!pdf.value) return;
 
-.superdoc-pdf-viewer__loader {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  min-width: 150px;
-  min-height: 150px;
-}
+  const { pdfjsDocument } = pdf.value;
+  const firstPageNum = 1;
+  const lastPageNum = pdfjsDocument.numPages;
 
-.superdoc-pdf-viewer__loader :deep(.n-spin) {
-  --n-color: #1354ff !important;
-  --n-text-color: #1354ff !important;
+  try {
+    const pdfjsPages = await pdfAdapter.getPages(pdfjsDocument, firstPageNum, lastPageNum);
+
+    const mapPages = (pdfjsPage) => {
+      return {
+        documentId: pdf.value.documentId,
+        pageId: generatePageId(pdf.value.documentId, pdfjsPage.pageNumber),
+        pageNumber: pdfjsPage.pageNumber,
+        pageIsRendered: false,
+        pdfjsPage: markRaw(pdfjsPage),
+      };
+    };
+    const pages = pdfjsPages.map(mapPages);
+
+    updatePages(pages);
+    emit('pages-loaded', pages);
+  } catch (e) {
+    emit('document-error', e);
+    console.error(e);
+  }
 }
 
-.superdoc-pdf-viewer :deep(.pdf-page) {
-  border-top: 1px solid #dfdfdf;
-  border-bottom: 1px solid #dfdfdf;
-  margin: 0 0 20px 0;
-  position: relative;
-  overflow: hidden;
+function resetValues() {
+  pages.value = [];
+  scale.value = 1;
 }
 
-.superdoc-pdf-viewer :deep(.pdf-page):first-child {
-  border-radius: 16px 16px 0 0;
-  border-top: none;
+function generateDocumentId(fileName) {
+  return `pdf-${fileName.replace(/\W/g, '')}-${Math.random().toString(36).slice(2)}-${Date.now()}`;
 }
 
-.superdoc-pdf-viewer :deep(.pdf-page):last-child {
-  border-radius: 0 0 16px 16px;
-  border-bottom: none;
+function generatePageId(documentId, pageNumber) {
+  return `${documentId}-page-${pageNumber}`;
 }
 
-.superdoc-pdf-viewer :deep(.textLayer) {
-  z-index: 2;
-  position: absolute;
+watch(
+  () => props.file,
+  (file) => {
+    getDocument(file);
+  },
+  { immediate: true },
+);
+
+watch(pdf, (nextPdf, oldPdf) => {
+  if (!nextPdf) return;
+  if (oldPdf) resetValues();
+  getPages();
+});
+</script>
+
+<template>
+  <div class="sd-pdf-viewer" ref="rootRef">
+    <div class="sd-pdf-viewer__main">
+      <PdfViewerDocument
+        v-bind="{
+          pdf,
+          pages,
+          scale,
+          config,
+          hasTextLayer,
+          outputScale,
+        }"
+        @page-rendered="onPageRendered"
+        @selection-raw="onSelectionRaw"
+        @bypass-selection="onBypassSelection"
+        ref="documentRef"
+      >
+      </PdfViewerDocument>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sd-pdf-viewer {
+  width: 100%;
+  position: relative;
 }
 
-.superdoc-pdf-viewer :deep(.textLayer)::selection {
-  background-color: #1355ff66;
-  mix-blend-mode: difference;
+.sd-pdf-viewer__main {
+  width: 100%;
 }
 </style>
diff --git a/packages/superdoc/src/components/PdfViewer/PdfViewerDocument.vue b/packages/superdoc/src/components/PdfViewer/PdfViewerDocument.vue
new file mode 100644
index 0000000000..ee4dbee0b7
--- /dev/null
+++ b/packages/superdoc/src/components/PdfViewer/PdfViewerDocument.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { ref } from 'vue';
+import PdfViewerPage from './PdfViewerPage.vue';
+
+const emit = defineEmits(['page-focus', 'page-rendered', 'page-error', 'selection-raw', 'bypass-selection']);
+
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+  },
+  pdf: {
+    type: Object,
+  },
+  pages: {
+    type: Array,
+    required: true,
+  },
+  scale: {
+    type: Number,
+  },
+  hasTextLayer: {
+    type: Boolean,
+    default: false,
+  },
+  outputScale: {
+    type: Number,
+  },
+});
+
+const documentRef = ref(null);
+const documentWrapper = ref(null);
+
+function onPageFocused(pageNumber) {
+  emit('page-focus', pageNumber);
+}
+
+function onPageRendered(payload) {
+  emit('page-rendered', payload);
+}
+
+function onPageError(page) {
+  emit('page-error', page);
+}
+
+function onSelectionRaw(payload) {
+  emit('selection-raw', payload);
+}
+
+function onBypassSelection(event) {
+  emit('bypass-selection', event);
+}
+</script>
+
+<template>
+  <div class="sd-pdf-viewer-document" ref="documentRef">
+    <div class="sd-pdf-viewer-document__wrapper" ref="documentWrapper">
+      <PdfViewerPage
+        v-for="page in pages"
+        :key="page.pageId"
+        v-bind="{
+          page,
+          pages,
+          scale,
+          config,
+          hasTextLayer,
+          outputScale,
+          documentEl: documentRef,
+        }"
+        @page-rendered="onPageRendered"
+        @page-error="onPageError"
+        @selection-raw="onSelectionRaw"
+        @bypass-selection="onBypassSelection"
+      >
+      </PdfViewerPage>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sd-pdf-viewer-document {
+  position: relative;
+  width: 100%;
+}
+
+.sd-pdf-viewer-document__wrapper {
+  width: 100%;
+  padding-bottom: 10px;
+}
+</style>
diff --git a/packages/superdoc/src/components/PdfViewer/PdfViewerPage.vue b/packages/superdoc/src/components/PdfViewer/PdfViewerPage.vue
new file mode 100644
index 0000000000..b8c17088c3
--- /dev/null
+++ b/packages/superdoc/src/components/PdfViewer/PdfViewerPage.vue
@@ -0,0 +1,462 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+import { OUTPUT_SCALE, PDF_TO_CSS_UNITS } from '../../core/pdf/helpers/constants';
+
+const emit = defineEmits([
+  'page-rendered',
+  'page-error',
+  'text-layer-rendered',
+  'text-layer-error',
+  'selection-raw',
+  'bypass-selection',
+]);
+
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+  },
+  page: {
+    type: Object,
+    required: true,
+  },
+  pages: {
+    type: Array,
+    required: true,
+  },
+  scale: {
+    type: Number,
+    required: true,
+  },
+  hasTextLayer: {
+    type: Boolean,
+    default: false,
+  },
+  outputScale: {
+    type: Number,
+    default: OUTPUT_SCALE,
+  },
+  documentEl: {
+    type: [Object],
+    default: null,
+  },
+});
+
+const viewport = shallowRef(null);
+const pageRef = ref(null);
+const canvasRef = ref(null);
+const textLayerRef = ref(null);
+
+let renderTask;
+
+const pageIdx = computed(() => props.pages.findIndex((page) => page.pageId === props.page.pageId));
+const pageNumber = computed(() => {
+  if (pageIdx.value === -1) return 0;
+  return pageIdx.value + 1;
+});
+
+function getSelectedTextBoundingBox(container) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return null;
+
+  const range = selection.getRangeAt(0);
+  const rects = range.getClientRects();
+  if (!rects.length) return null;
+
+  const containerRect = container.getBoundingClientRect();
+  const scale = props.scale ?? 1;
+  const firstRect = rects[0];
+  let boundingBox = {
+    top: firstRect.top,
+    left: firstRect.left,
+    bottom: firstRect.bottom,
+    right: firstRect.right,
+  };
+
+  for (let i = 1; i < rects.length; i += 1) {
+    const rect = rects[i];
+    if (rect.width === 0 || rect.height === 0) {
+      continue;
+    }
+    boundingBox.top = Math.min(boundingBox.top, rect.top);
+    boundingBox.left = Math.min(boundingBox.left, rect.left);
+    boundingBox.bottom = Math.max(boundingBox.bottom, rect.bottom);
+    boundingBox.right = Math.max(boundingBox.right, rect.right);
+  }
+
+  return {
+    top: (boundingBox.top - containerRect.top) / scale + container.scrollTop,
+    left: (boundingBox.left - containerRect.left) / scale + container.scrollLeft,
+    bottom: (boundingBox.bottom - containerRect.top) / scale + container.scrollTop,
+    right: (boundingBox.right - containerRect.left) / scale + container.scrollLeft,
+  };
+}
+
+const pageSize = computed(() => {
+  let { width, height } = viewport.value;
+  [width, height] = [width, height].map((dim) => Math.ceil(dim));
+  return { width, height };
+});
+
+const canvasAttrs = computed(() => {
+  const { width, height } = pageSize.value;
+  return { width, height };
+});
+
+const pageStyle = computed(() => {
+  const { width: widthPt, height: heightPt } = getPagePtSize();
+  const scaleFactor = getScaleFactor();
+  return {
+    '--scale-factor': `${scaleFactor}`,
+    width: `calc(var(--scale-factor) * ${widthPt}px)`,
+    height: `calc(var(--scale-factor) * ${heightPt}px)`,
+  };
+});
+
+function onMouseUp() {
+  const selection = window.getSelection();
+  if (!selection || selection.toString().length === 0) return;
+  const container = props.documentEl?.value ?? props.documentEl ?? pageRef.value;
+  const bounds = getSelectedTextBoundingBox(container);
+  if (!bounds) return;
+  emit('selection-raw', {
+    selectionBounds: bounds,
+    documentId: props.page.documentId,
+    page: pageNumber.value,
+    source: 'pdf',
+  });
+}
+
+function onMouseDown(event) {
+  if (!event?.target) return;
+  if (event.target.tagName !== 'SPAN') {
+    emit('bypass-selection', event);
+  }
+}
+
+function getPagePtSize() {
+  const factor = PDF_TO_CSS_UNITS * props.outputScale;
+  let { width, height } = viewport.value;
+  width = width / factor;
+  height = height / factor;
+  [width, height] = [width, height].map((dim) => Math.ceil(dim));
+  return { width, height };
+}
+
+function getPageSize() {
+  const { width: widthPt, height: heightPt } = getPagePtSize();
+  const scaleFactor = getScaleFactor();
+  return {
+    width: widthPt * scaleFactor,
+    height: heightPt * scaleFactor,
+  };
+}
+
+function getScaleFactor() {
+  return (props.scale ?? 1) * PDF_TO_CSS_UNITS;
+}
+
+function setInitialViewport() {
+  const { pdfjsPage } = props.page;
+  viewport.value = pdfjsPage.getViewport({ scale: PDF_TO_CSS_UNITS * props.outputScale });
+}
+
+async function renderPage() {
+  if (renderTask) return;
+
+  const canvasElem = canvasRef.value;
+  if (!canvasElem || !viewport.value) return;
+
+  const canvasContext = canvasElem.getContext('2d');
+  const renderContext = { canvasContext, viewport: viewport.value };
+
+  try {
+    const { pdfjsPage } = props.page;
+    renderTask = pdfjsPage.render(renderContext);
+    await renderTask.promise;
+
+    const size = getPageSize();
+    const originalPt = getPagePtSize();
+
+    const payload = {
+      page: props.page,
+      documentId: props.page.documentId,
+      pageIndex: pageIdx.value,
+      pageNumber: pageNumber.value,
+      width: size.width,
+      height: size.height,
+      originalWidth: originalPt.width * PDF_TO_CSS_UNITS,
+      originalHeight: originalPt.height * PDF_TO_CSS_UNITS,
+    };
+
+    emit('page-rendered', payload);
+  } catch (e) {
+    destroyRenderTask();
+    emit('page-error', props.page);
+  }
+}
+
+async function renderTextLayer() {
+  if (!props.hasTextLayer) return;
+
+  const container = textLayerRef.value;
+  if (!container) return;
+
+  container.innerHTML = '';
+
+  const TextLayer = props.config?.pdfLib?.TextLayer;
+  if (!TextLayer) return;
+
+  try {
+    const scale = (props.scale ?? 1) * PDF_TO_CSS_UNITS;
+    const textViewport = props.page.pdfjsPage.getViewport({ scale });
+    const textContent = await props.page.pdfjsPage.getTextContent();
+
+    const textLayer = new TextLayer({
+      textContentSource: textContent,
+      container,
+      viewport: textViewport,
+    });
+
+    await textLayer.render();
+    emit('text-layer-rendered', props.page);
+  } catch (e) {
+    emit('text-layer-error', props.page);
+    console.error(e);
+  }
+}
+
+async function render() {
+  await renderPage();
+  await renderTextLayer();
+}
+
+function destroyPage(page) {
+  if (page?.pdfjsPage) page.pdfjsPage.cleanup();
+  destroyRenderTask();
+}
+
+function destroyRenderTask() {
+  if (!renderTask) return;
+  renderTask.cancel();
+  renderTask = null;
+}
+
+watch(
+  () => props.scale,
+  () => {
+    renderTextLayer();
+  },
+);
+
+setInitialViewport();
+onMounted(() => {
+  render();
+});
+
+onBeforeUnmount(() => {
+  destroyPage(props.page);
+});
+</script>
+
+<template>
+  <div
+    class="sd-pdf-viewer-page"
+    :data-page-id="page.pageId"
+    :data-page-number="pageNumber"
+    :style="pageStyle"
+    data-pdf-page
+    ref="pageRef"
+    @mousedown="onMouseDown"
+    @mouseup="onMouseUp"
+  >
+    <div class="sd-pdf-viewer-page__canvas-wrapper">
+      <canvas class="sd-pdf-viewer-page__canvas" v-bind="canvasAttrs" ref="canvasRef"> </canvas>
+    </div>
+    <div class="sd-pdf-viewer-page__text-layer" v-if="hasTextLayer" ref="textLayerRef"></div>
+  </div>
+</template>
+
+<style scoped>
+.sd-pdf-viewer-page {
+  --user-unit: 1;
+  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
+  --scale-round-x: 1px;
+  --scale-round-y: 1px;
+
+  width: 816px;
+  height: 1056px;
+  /* margin: 1px auto -8px; */
+  position: relative;
+  overflow: visible;
+  /* border: 9px solid transparent; */
+  background-clip: content-box;
+  background-color: #fff;
+  box-sizing: content-box;
+  margin: 0 0 calc(var(--scale-factor) * 10px);
+}
+
+.sd-pdf-viewer-page:last-child {
+  margin: 0;
+}
+
+.sd-pdf-viewer-page__canvas-wrapper {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.sd-pdf-viewer-page__canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  contain: content;
+}
+</style>
+
+<style>
+/* Text layer style */
+.sd-pdf-viewer-page__text-layer {
+  --csstools-color-scheme--light: initial;
+  color-scheme: only light;
+
+  position: absolute;
+  text-align: initial;
+  inset: 0;
+  overflow: clip;
+  opacity: 1;
+  line-height: 1;
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  text-size-adjust: none;
+  forced-color-adjust: none;
+  transform-origin: 0 0;
+  caret-color: CanvasText;
+  z-index: 0;
+}
+
+.sd-pdf-viewer-page__text-layer.highlighting {
+  touch-action: none;
+}
+
+.sd-pdf-viewer-page__text-layer :is(span, br) {
+  color: transparent;
+  position: absolute;
+  white-space: pre;
+  cursor: text;
+  transform-origin: 0% 0%;
+}
+
+.sd-pdf-viewer-page__text-layer {
+  --min-font-size: 1;
+  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+  --min-font-size-inv: calc(1 / var(--min-font-size));
+}
+
+.sd-pdf-viewer-page__text-layer > :not(.markedContent),
+.sd-pdf-viewer-page__text-layer .markedContent span:not(.markedContent) {
+  z-index: 1;
+
+  --font-height: 0;
+  font-size: calc(var(--text-scale-factor) * var(--font-height));
+
+  --scale-x: 1;
+  --rotate: 0deg;
+  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
+}
+
+.sd-pdf-viewer-page__text-layer .markedContent {
+  display: contents;
+}
+
+.sd-pdf-viewer-page__text-layer span[role='img'] {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+.sd-pdf-viewer-page__text-layer .highlight {
+  --highlight-bg-color: rgb(180 0 170 / 0.25);
+  --highlight-selected-bg-color: rgb(0 100 0 / 0.25);
+  --highlight-backdrop-filter: none;
+  --highlight-selected-backdrop-filter: none;
+}
+
+@media screen and (forced-colors: active) {
+  .sd-pdf-viewer-page__text-layer.highlight {
+    --highlight-bg-color: transparent;
+    --highlight-selected-bg-color: transparent;
+    --highlight-backdrop-filter: var(--hcm-highlight-filter);
+    --highlight-selected-backdrop-filter: var(--hcm-highlight-selected-filter);
+  }
+}
+
+.sd-pdf-viewer-page__text-layer .highlight {
+  margin: -1px;
+  padding: 1px;
+  background-color: var(--highlight-bg-color);
+  -webkit-backdrop-filter: var(--highlight-backdrop-filter);
+  backdrop-filter: var(--highlight-backdrop-filter);
+  border-radius: 4px;
+}
+
+.appended:is(.sd-pdf-viewer-page__text-layer .highlight) {
+  position: initial;
+}
+
+.begin:is(.sd-pdf-viewer-page__text-layer .highlight) {
+  border-radius: 4px 0 0 4px;
+}
+
+.end:is(.sd-pdf-viewer-page__text-layer .highlight) {
+  border-radius: 0 4px 4px 0;
+}
+
+.middle:is(.sd-pdf-viewer-page__text-layer .highlight) {
+  border-radius: 0;
+}
+
+.selected:is(.sd-pdf-viewer-page__text-layer .highlight) {
+  background-color: var(--highlight-selected-bg-color);
+  -webkit-backdrop-filter: var(--highlight-selected-backdrop-filter);
+  backdrop-filter: var(--highlight-selected-backdrop-filter);
+}
+
+.sd-pdf-viewer-page__text-layer ::-moz-selection {
+  background: rgba(0 0 255 / 0.25);
+  background: color-mix(in srgb, AccentColor, transparent 75%);
+}
+
+.sd-pdf-viewer-page__text-layer ::selection {
+  background: rgba(0 0 255 / 0.25);
+  background: color-mix(in srgb, AccentColor, transparent 75%);
+}
+
+.sd-pdf-viewer-page__text-layer br::-moz-selection {
+  background: transparent;
+}
+
+.sd-pdf-viewer-page__text-layer br::selection {
+  background: transparent;
+}
+
+.sd-pdf-viewer-page__text-layer .endOfContent {
+  display: block;
+  position: absolute;
+  inset: 100% 0 0;
+  z-index: 0;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.textLayer.selecting .endOfContent {
+  top: 0;
+}
+</style>
diff --git a/packages/superdoc/src/components/PdfViewer/pdf/pdf-adapter.js b/packages/superdoc/src/components/PdfViewer/pdf/pdf-adapter.js
deleted file mode 100644
index 24914de8d2..0000000000
--- a/packages/superdoc/src/components/PdfViewer/pdf/pdf-adapter.js
+++ /dev/null
@@ -1,226 +0,0 @@
-// @ts-check
-import { range } from '../helpers/range.js';
-
-/**
- * @typedef {import('pdfjs-dist').PDFDocumentProxy} PDFDocumentProxy
- * @typedef {import('pdfjs-dist').PDFPageProxy} PDFPageProxy
- */
-
-/**
- * @typedef {'pdfjs'} AdapterType
- */
-
-/**
- * @typedef {Object} PDFConfig
- * @property {AdapterType} adapter
- * @property {any} [pdfLib]
- * @property {any} [pdfViewer]
- * @property {string} [workerSrc]
- * @property {boolean} [setWorker]
- * @property {0 | 1} [textLayerMode]
- */
-
-/**
- * @typedef {Object} PDFJSConfig
- * @property {any} pdfLib
- * @property {any} pdfViewer
- * @property {string} [workerSrc]
- * @property {0 | 1} [textLayerMode]
- * @property {boolean} [setWorker]
- */
-
-/**
- * @typedef {Object} RenderPagesOptions
- * @property {string} documentId
- * @property {PDFDocumentProxy} pdfDocument
- * @property {HTMLElement} viewerContainer
- * @property {function(string, ...any): void} [emit]
- */
-
-/**
- * @typedef {Object} PageSize
- * @property {number} width
- * @property {number} height
- */
-
-/**
- * @abstract
- */
-class PDFAdapter {
-  /**
-   * @throws {Error}
-   */
-  constructor() {
-    const proto = Object.getPrototypeOf(this);
-    if (proto.constructor === PDFAdapter) {
-      throw new Error('Abstract class should not be instanciated');
-    }
-  }
-}
-
-export class PDFJSAdapter extends PDFAdapter {
-  /**
-   * @param {PDFJSConfig} config
-   */
-  constructor(config) {
-    super();
-    this.pdfLib = config.pdfLib;
-    this.pdfViewer = config.pdfViewer;
-    this.workerSrc = config.workerSrc;
-    this.textLayerMode = config.textLayerMode ?? 0;
-    if (config.setWorker) {
-      if (this.workerSrc) {
-        this.pdfLib.GlobalWorkerOptions.workerSrc = config.workerSrc;
-      } else {
-        // Fallback to CDN version.
-        this.pdfLib.GlobalWorkerOptions.workerSrc = getWorkerSrcFromCDN(this.pdfLib.version);
-      }
-    }
-    /** @type {any[]} */
-    this.pdfPageViews = [];
-  }
-
-  /**
-   * @param {string | ArrayBuffer | Uint8Array} file
-   * @returns {Promise<PDFDocumentProxy>}
-   */
-  async getDocument(file) {
-    const loadingTask = this.pdfLib.getDocument(file);
-    const document = await loadingTask.promise;
-    return document;
-  }
-
-  /**
-   * @param {RenderPagesOptions} options
-   * @returns {Promise<void>}
-   */
-  async renderPages({ documentId, pdfDocument, viewerContainer, emit = () => {} }) {
-    try {
-      this.pdfPageViews = [];
-
-      const numPages = pdfDocument.numPages;
-      const firstPage = 1;
-
-      const pdfjsPages = await getPdfjsPages(pdfDocument, firstPage, numPages);
-      for (const [index, page] of pdfjsPages.entries()) {
-        const container = document.createElement('div');
-        container.classList.add('pdf-page');
-        container.dataset.pageNumber = (index + 1).toString();
-        container.id = `${documentId}-page-${index + 1}`;
-        viewerContainer.append(container);
-
-        const { width, height } = this.getOriginalPageSize(page);
-        const scale = 1;
-
-        const eventBus = new this.pdfViewer.EventBus();
-        const pdfPageView = new this.pdfViewer.PDFPageView({
-          container,
-          id: index + 1,
-          scale,
-          defaultViewport: page.getViewport({ scale }),
-          eventBus,
-          textLayerMode: this.textLayerMode,
-        });
-        this.pdfPageViews.push(pdfPageView);
-
-        const containerBounds = container.getBoundingClientRect();
-        // @ts-expect-error - Adding custom properties to DOMRect for internal use
-        containerBounds.originalWidth = width;
-        // @ts-expect-error - Adding custom properties to DOMRect for internal use
-        containerBounds.originalHeight = height;
-
-        pdfPageView.setPdfPage(page);
-        await pdfPageView.draw();
-
-        emit('page-loaded', documentId, index, containerBounds);
-
-        emit('page-ready', {
-          documentId,
-          pageIndex: index,
-          width: containerBounds.width,
-          height: containerBounds.height,
-          originalWidth: width,
-          originalHeight: height,
-        });
-      }
-
-      emit('ready', documentId, viewerContainer);
-    } catch (err) {
-      console.error('Error loading PDF:', err);
-    }
-  }
-
-  /**
-   * @param {PDFPageProxy} page
-   * @returns {PageSize}
-   */
-  getOriginalPageSize(page) {
-    const viewport = page.getViewport({ scale: 1 });
-    const width = viewport.width;
-    const height = viewport.height;
-    return { width, height };
-  }
-
-  /**
-   * @return {void}
-   */
-  destroy() {
-    this.pdfPageViews.forEach((view) => view.destroy());
-    this.pdfPageViews = [];
-  }
-}
-
-export class PDFAdapterFactory {
-  /**
-   * @param {PDFJSConfig & {adapter: AdapterType}} config
-   * @returns {PDFAdapter}
-   * @throws {Error}
-   */
-  static create(config) {
-    const adapters = {
-      pdfjs: () => {
-        return new PDFJSAdapter(config);
-      },
-      default: () => {
-        throw new Error('Unsupported adapter');
-      },
-    };
-    const adapter = adapters[config.adapter] ?? adapters.default;
-    return adapter();
-  }
-}
-
-/**
- * @param {Partial<PDFConfig>} [config]
- * @returns {PDFConfig}
- */
-export const createPDFConfig = (config) => {
-  /** @type {PDFConfig} */
-  const defaultConfig = {
-    adapter: 'pdfjs',
-  };
-
-  return {
-    ...defaultConfig,
-    ...config,
-  };
-};
-
-/**
- * @param {PDFDocumentProxy} pdf
- * @param {number} firstPage
- * @param {number} lastPage
- * @returns {Promise<PDFPageProxy[]>}
- */
-export async function getPdfjsPages(pdf, firstPage, lastPage) {
-  const pagesPromises = range(firstPage, lastPage + 1).map((num) => pdf.getPage(num));
-  return await Promise.all(pagesPromises);
-}
-
-/**
- * @param {number} version
- * @returns {string}
- */
-export function getWorkerSrcFromCDN(version) {
-  return `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.min.mjs`;
-}
diff --git a/packages/superdoc/src/components/PdfViewer/pdf/pdf-viewer.css b/packages/superdoc/src/components/PdfViewer/pdf/pdf-viewer.css
deleted file mode 100644
index d289cdc49a..0000000000
--- a/packages/superdoc/src/components/PdfViewer/pdf/pdf-viewer.css
+++ /dev/null
@@ -1 +0,0 @@
-@import 'pdfjs-dist/web/pdf_viewer.css';
diff --git a/packages/superdoc/src/components/Whiteboard/WhiteboardPage.vue b/packages/superdoc/src/components/Whiteboard/WhiteboardPage.vue
index d3ca4f2176..e682b3d6a2 100644
--- a/packages/superdoc/src/components/Whiteboard/WhiteboardPage.vue
+++ b/packages/superdoc/src/components/Whiteboard/WhiteboardPage.vue
@@ -54,11 +54,15 @@ const handleDrop = (event) => {
   const rect = container.getBoundingClientRect();
   const x = event.clientX - rect.left;
   const y = event.clientY - rect.top;
+  const currentWidth = props.pageSize?.width;
+  const originalWidth = props.pageSize?.originalWidth ?? currentWidth;
+  const scale =
+    Number.isFinite(currentWidth) && Number.isFinite(originalWidth) && originalWidth ? currentWidth / originalWidth : 1;
 
-  if (handleStickerDrop(event, x, y)) {
+  if (handleStickerDrop(event, x, y, scale)) {
     return;
   }
-  if (handleFileImageDrop(event, x, y)) {
+  if (handleFileImageDrop(event, x, y, scale)) {
     return;
   }
   if (handleCommentDrop(event, x, y)) {
@@ -68,7 +72,7 @@ const handleDrop = (event) => {
 };
 
 // Drop sticker by id (from registry).
-const handleStickerDrop = (event, x, y) => {
+const handleStickerDrop = (event, x, y, scale) => {
   const stickerId = event.dataTransfer.getData('application/sticker');
   if (!stickerId) return false;
   const stickers = props.whiteboard.getType('stickers') || [];
@@ -79,15 +83,15 @@ const handleStickerDrop = (event, x, y) => {
     x,
     y,
     src: sticker.src,
-    width: sticker.width,
-    height: sticker.height,
+    width: Number.isFinite(sticker.width) ? sticker.width * scale : sticker.width,
+    height: Number.isFinite(sticker.height) ? sticker.height * scale : sticker.height,
     type: 'sticker',
   });
   return true;
 };
 
 // Drop local image file (base64).
-const handleFileImageDrop = (event, x, y) => {
+const handleFileImageDrop = (event, x, y, scale) => {
   const files = Array.from(event.dataTransfer.files || []);
   const imageFile = files.find((file) => file.type.startsWith('image/'));
   if (!imageFile) return false;
diff --git a/packages/superdoc/src/components/Whiteboard/use-whiteboard.js b/packages/superdoc/src/components/Whiteboard/use-whiteboard.js
index 7702ef4068..8a599a7179 100644
--- a/packages/superdoc/src/components/Whiteboard/use-whiteboard.js
+++ b/packages/superdoc/src/components/Whiteboard/use-whiteboard.js
@@ -16,9 +16,23 @@ export const useWhiteboard = ({ proxy, layers, documents, modules }) => {
   const whiteboardPageSizes = reactive({});
   const whiteboardPageOffsets = reactive({});
 
+  const whiteboardReady = ref(false);
+  const whiteboardReadyPages = ref(0);
+  const whiteboardTotalPages = ref(0);
+
   const whiteboardOpacity = ref(1);
   const whiteboardEnabled = ref(whiteboardModuleConfig.value?.enabled ?? false);
 
+  const checkWhiteboardReady = () => {
+    if (whiteboardReady.value) return;
+    whiteboardReadyPages.value += 1;
+    const total = whiteboardTotalPages.value || whiteboardPages.value.length;
+    if (total && whiteboardReadyPages.value >= total) {
+      whiteboardReady.value = true;
+      proxy?.$superdoc?.emit('whiteboard:ready', { whiteboard: whiteboard });
+    }
+  };
+
   // Sync page size + instances when PDF viewer reports page-ready.
   const handleWhiteboardPageReady = (payload) => {
     if (!payload) return;
@@ -43,14 +57,17 @@ export const useWhiteboard = ({ proxy, layers, documents, modules }) => {
         .getPages()
         .sort((a, b) => a.pageIndex - b.pageIndex)
         .map((page) => markRaw(page));
+      whiteboardTotalPages.value = whiteboardPages.value.length;
     }
-    nextTick(() => updateWhiteboardPageOffsets());
+    nextTick(() => {
+      updateWhiteboardPageOffsets();
+      checkWhiteboardReady();
+    });
   };
 
   // Re-emit for host app consumers.
   const handleWhiteboardChange = (data) => {
     proxy?.$superdoc?.emit('whiteboard:change', data);
-    console.debug('[Whiteboard] change', data);
   };
 
   // Update UI pages after setWhiteboardData.
@@ -60,6 +77,7 @@ export const useWhiteboard = ({ proxy, layers, documents, modules }) => {
       if (size) page.setSize(size);
     });
     whiteboardPages.value = pages.map((page) => markRaw(page));
+    whiteboardTotalPages.value = whiteboardPages.value.length;
     nextTick(() => updateWhiteboardPageOffsets());
   };
 
@@ -87,7 +105,8 @@ export const useWhiteboard = ({ proxy, layers, documents, modules }) => {
 
   const updateWhiteboardPDFPageSizes = ({ doc }) => {
     whiteboardPages.value.forEach((page) => {
-      const pageEl = document.getElementById(`${doc.id}-page-${page.pageIndex + 1}`);
+      const pageId = `${doc.id}-page-${page.pageIndex + 1}`;
+      const pageEl = document.querySelector(`[data-page-id="${pageId}"]`);
       if (!pageEl) return;
       const pageBounds = pageEl.getBoundingClientRect();
       const existingSize = whiteboardPageSizes[page.pageIndex] || {};
@@ -118,7 +137,8 @@ export const useWhiteboard = ({ proxy, layers, documents, modules }) => {
 
   const updateWhiteboardPDFPageOffsets = ({ doc, layerBounds }) => {
     whiteboardPages.value.forEach((page) => {
-      const pageEl = document.getElementById(`${doc.id}-page-${page.pageIndex + 1}`);
+      const pageId = `${doc.id}-page-${page.pageIndex + 1}`;
+      const pageEl = document.querySelector(`[data-page-id="${pageId}"]`);
       if (!pageEl) return;
       const pageBounds = pageEl.getBoundingClientRect();
       whiteboardPageOffsets[page.pageIndex] = {
@@ -153,6 +173,7 @@ export const useWhiteboard = ({ proxy, layers, documents, modules }) => {
     whiteboardPageOffsets,
     whiteboardEnabled,
     whiteboardOpacity,
+    whiteboardReady,
     handleWhiteboardPageReady,
     updateWhiteboardPageSizes,
     updateWhiteboardPageOffsets,
diff --git a/packages/superdoc/src/core/SuperDoc.js b/packages/superdoc/src/core/SuperDoc.js
index 21ef32cbf9..5792420978 100644
--- a/packages/superdoc/src/core/SuperDoc.js
+++ b/packages/superdoc/src/core/SuperDoc.js
@@ -59,6 +59,7 @@ export class SuperDoc extends EventEmitter {
   /** @type {import('@hocuspocus/provider').HocuspocusProvider | undefined} */
   provider;
 
+  /** @type {Whiteboard | null} */
   whiteboard;
 
   /** @type {Config} */
@@ -289,7 +290,7 @@ export class SuperDoc extends EventEmitter {
       superdoc: this,
       enabled,
     });
-    this.emit('whiteboard:ready', { whiteboard: this.whiteboard });
+    this.emit('whiteboard:init', { whiteboard: this.whiteboard });
   }
 
   /**
@@ -430,7 +431,7 @@ export class SuperDoc extends EventEmitter {
     this.on('comments-update', this.config.onCommentsUpdate);
     this.on('awareness-update', this.config.onAwarenessUpdate);
     this.on('locked', this.config.onLocked);
-    this.on('pdf-document-ready', this.config.onPdfDocumentReady);
+    this.on('pdf:document-ready', this.config.onPdfDocumentReady);
     this.on('sidebar-toggle', this.config.onSidebarToggle);
     this.on('collaboration-ready', this.config.onCollaborationReady);
     this.on('editor-update', this.config.onEditorUpdate);
@@ -550,7 +551,7 @@ export class SuperDoc extends EventEmitter {
    * @returns {void}
    */
   broadcastPdfDocumentReady() {
-    this.emit('pdf-document-ready');
+    this.emit('pdf:document-ready');
   }
 
   /**
diff --git a/packages/superdoc/src/core/pdf/helpers/constants.js b/packages/superdoc/src/core/pdf/helpers/constants.js
new file mode 100644
index 0000000000..aefe199ca1
--- /dev/null
+++ b/packages/superdoc/src/core/pdf/helpers/constants.js
@@ -0,0 +1,2 @@
+export const OUTPUT_SCALE = 2;
+export const PDF_TO_CSS_UNITS = 96.0 / 72.0;
diff --git a/packages/superdoc/src/core/pdf/helpers/floor.js b/packages/superdoc/src/core/pdf/helpers/floor.js
new file mode 100644
index 0000000000..20129179b8
--- /dev/null
+++ b/packages/superdoc/src/core/pdf/helpers/floor.js
@@ -0,0 +1,4 @@
+export const floor = (val, precision) => {
+  const multiplier = 10 ** (precision || 0);
+  return Math.floor(val * multiplier) / multiplier;
+};
diff --git a/packages/superdoc/src/components/PdfViewer/helpers/range.js b/packages/superdoc/src/core/pdf/helpers/range.js
similarity index 100%
rename from packages/superdoc/src/components/PdfViewer/helpers/range.js
rename to packages/superdoc/src/core/pdf/helpers/range.js
diff --git a/packages/superdoc/src/components/PdfViewer/helpers/read-file.js b/packages/superdoc/src/core/pdf/helpers/read-file.js
similarity index 100%
rename from packages/superdoc/src/components/PdfViewer/helpers/read-file.js
rename to packages/superdoc/src/core/pdf/helpers/read-file.js
diff --git a/packages/superdoc/src/core/pdf/pdf-adapter.js b/packages/superdoc/src/core/pdf/pdf-adapter.js
new file mode 100644
index 0000000000..a1cb3f3209
--- /dev/null
+++ b/packages/superdoc/src/core/pdf/pdf-adapter.js
@@ -0,0 +1,141 @@
+// @ts-check
+import { range } from './helpers/range';
+
+/**
+ * @typedef {import('pdfjs-dist').PDFDocumentProxy} PDFDocumentProxy
+ * @typedef {import('pdfjs-dist').PDFPageProxy} PDFPageProxy
+ */
+
+/**
+ * @typedef {'pdfjs'} AdapterType
+ */
+
+/**
+ * @typedef {Object} PDFConfig
+ * @property {AdapterType} adapter
+ * @property {any} [pdfLib]
+ * @property {string} [workerSrc]
+ * @property {boolean} [setWorker]
+ */
+
+/**
+ * @typedef {Object} PDFJSConfig
+ * @property {any} pdfLib
+ * @property {string} [workerSrc]
+ * @property {boolean} [setWorker]
+ */
+
+/**
+ * @typedef {Object} RenderPagesOptions
+ * @property {string} documentId
+ * @property {PDFDocumentProxy} pdfDocument
+ * @property {HTMLElement} viewerContainer
+ * @property {function(string, ...any): void} [emit]
+ */
+
+/**
+ * @typedef {Object} PageSize
+ * @property {number} width
+ * @property {number} height
+ */
+
+/**
+ * @param {Partial<PDFConfig>} [config]
+ * @returns {PDFConfig}
+ */
+export const createPDFConfig = (config) => {
+  /** @type {PDFConfig} */
+  const defaultConfig = {
+    adapter: 'pdfjs',
+  };
+
+  return {
+    ...defaultConfig,
+    ...config,
+  };
+};
+
+/**
+ * @abstract
+ */
+class PDFAdapter {
+  /**
+   * @throws {Error}
+   */
+  constructor() {
+    const proto = Object.getPrototypeOf(this);
+    if (proto.constructor === PDFAdapter) {
+      throw new Error('Abstract class should not be instanciated');
+    }
+  }
+}
+
+export class PDFJSAdapter extends PDFAdapter {
+  /**
+   * @param {PDFJSConfig} config
+   */
+  constructor(config) {
+    super();
+
+    this.pdfLib = config.pdfLib;
+    this.workerSrc = config.workerSrc;
+
+    if (config.setWorker) {
+      if (this.workerSrc) {
+        this.pdfLib.GlobalWorkerOptions.workerSrc = config.workerSrc;
+      } else {
+        // Fallback to CDN version.
+        this.pdfLib.GlobalWorkerOptions.workerSrc = getWorkerSrcFromCDN(this.pdfLib.version);
+      }
+    }
+  }
+
+  /**
+   * @param {string | ArrayBuffer | Uint8Array} file
+   * @returns {Promise<PDFDocumentProxy>}
+   */
+  async getDocument(file) {
+    const loadingTask = this.pdfLib.getDocument(file);
+    const document = await loadingTask.promise;
+    return document;
+  }
+
+  /**
+   * @param {PDFDocumentProxy} pdf
+   * @param {number} firstPage
+   * @param {number} lastPage
+   * @returns {Promise<PDFPageProxy[]>}
+   */
+  async getPages(pdf, firstPage, lastPage) {
+    const pagesPromises = range(firstPage, lastPage + 1).map((num) => pdf.getPage(num));
+    return await Promise.all(pagesPromises);
+  }
+}
+
+export class PDFAdapterFactory {
+  /**
+   * @param {PDFJSConfig & {adapter: AdapterType}} config
+   * @returns {PDFAdapter}
+   * @throws {Error}
+   */
+  static create(config) {
+    const adapters = {
+      pdfjs: () => {
+        return new PDFJSAdapter(config);
+      },
+      default: () => {
+        throw new Error('Unsupported adapter');
+      },
+    };
+    const adapter = adapters[config.adapter] ?? adapters.default;
+    return adapter();
+  }
+}
+
+/**
+ * @param {number} version
+ * @returns {string}
+ */
+export function getWorkerSrcFromCDN(version) {
+  return `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.min.mjs`;
+}
diff --git a/packages/superdoc/src/core/types/index.js b/packages/superdoc/src/core/types/index.js
index 163b21e969..32c4d2acd5 100644
--- a/packages/superdoc/src/core/types/index.js
+++ b/packages/superdoc/src/core/types/index.js
@@ -75,6 +75,12 @@
  * @property {Object} [ai] AI module configuration
  * @property {string} [ai.apiKey] Harbour API key for AI features
  * @property {string} [ai.endpoint] Custom endpoint URL for AI services
+ * @property {Object} [pdf] PDF module configuration
+ * @property {Object} pdf.pdfLib Preloaded pdf.js library instance
+ * @property {string} [pdf.workerSrc] PDF.js worker source URL (falls back to CDN when omitted)
+ * @property {boolean} [pdf.setWorker] Whether to auto-configure pdf.js worker
+ * @property {boolean} [pdf.textLayer] Enable text layer rendering (default: false)
+ * @property {number} [pdf.outputScale] Canvas render scale (quality)
  * @property {CollaborationConfig} [collaboration] Collaboration module configuration
  * @property {Object} [toolbar] Toolbar module configuration
  * @property {Object} [slashMenu] Slash menu module configuration
diff --git a/packages/superdoc/src/core/whiteboard/README.md b/packages/superdoc/src/core/whiteboard/README.md
deleted file mode 100644
index 5b7544fe79..0000000000
--- a/packages/superdoc/src/core/whiteboard/README.md
+++ /dev/null
@@ -1,141 +0,0 @@
-# Whiteboard (POC)
-
-This module provides a lightweight whiteboard layer for PDF annotations.
-It is **in progress** and the public API may change.
-
----
-
-## Enable whiteboard
-
-When creating SuperDoc:
-
-```js
-const superdoc = new SuperDoc({
-  // ...
-  modules: {
-    whiteboard: {
-      enabled: true,
-    },
-  },
-});
-```
-
-`enabled: true` shows the whiteboard layer by default.
-
----
-
-## Public API
-
-All APIs are exposed via `superdoc.whiteboard`.
-
-### register(type, items)
-Register palette items (e.g. stickers, comments).
-
-```js
-superdoc.whiteboard.register('stickers', [
-  { id: 'check-mark', label: 'Check', src: '/stickers/check-mark.svg', width: 100, height: 83 },
-]);
-```
-
-### getType(type)
-Returns the registered items for a given type.
-
-```js
-const stickers = superdoc.whiteboard.getType('stickers');
-```
-
-### getWhiteboardData()
-Returns JSON for all pages (strokes/text/images).
-
-```js
-const data = superdoc.whiteboard.getWhiteboardData();
-```
-
-### setWhiteboardData(json)
-Restores state from JSON.
-
-```js
-superdoc.whiteboard.setWhiteboardData(saved);
-```
-
-### Events
-`whiteboard:change` fires on any change.\
-`whiteboard:tool` fires when the active tool changes.\
-`whiteboard:enabled` fires when interactivity is toggled.
-
-```js
-superdoc.on('whiteboard:change', (data) => {
-  console.log(data);
-});
-
-superdoc.on('whiteboard:tool', (tool) => {
-  console.log(tool);
-});
-
-superdoc.on('whiteboard:enabled', (enabled) => {
-  console.log(enabled);
-});
-```
-
----
-
-## Modes (tools)
-
-The whiteboard has a global tool mode:
-
-- **select** — default. You can select/drag/resize items and drop stickers/text.
-- **draw** — draw strokes only (no selection/drag/resize).
-- **erase** — erases only strokes (no selection/drag/resize).
-- **text** — add text by click; selection/drag/resize disabled.
-
-These modes are intentionally strict to avoid ambiguous interactions.
-
----
-
-## Demo / example
-
-See:
-`examples/advanced/grading-papers-comments-annotations`
-
----
-
-## PDF support
-
-Whiteboard currently targets the PDF flow. To use it reliably:
-- Ensure PDF viewer is enabled in SuperDoc.
-- Whiteboard page sizes come from PDF `page-ready` events.
-
-### PDF.js setup
-
-Install a compatible pdfjs-dist version:
-
-```
-npm install pdfjs-dist@4.3.136
-```
-
-Supported range: `>=4.3.136 <=4.6.82`  
-Recommended: `4.3.136` (more tested in our flows).
-
-Example configuration:
-
-```js
-import { SuperDoc } from '@harbour-enterprises/superdoc';
-import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';
-import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.mjs';
-
-const config = {
-  modules: {
-    pdf: {
-      pdfLib: pdfjsLib,
-      pdfViewer: pdfjsViewer,
-      setWorker: true, // or set to 'false' and register the worker globally outside the component.
-      workerSrc: pathToWorker, // If omitted, it will fall back to the CDN worker.
-      textLayerMode: 0, // 0 or 1
-    },
-  },
-};
-
-new SuperDoc(config);
-```
-
-Note: PDF support is evolving and some behavior may change as the integration stabilizes.
diff --git a/packages/superdoc/src/core/whiteboard/Whiteboard.js b/packages/superdoc/src/core/whiteboard/Whiteboard.js
index 396a08f30d..15e373668b 100644
--- a/packages/superdoc/src/core/whiteboard/Whiteboard.js
+++ b/packages/superdoc/src/core/whiteboard/Whiteboard.js
@@ -143,6 +143,13 @@ export class Whiteboard extends EventEmitter {
     return Array.from(this.#pages.values());
   }
 
+  /**
+   * Re-render all pages.
+   */
+  rerender() {
+    this.#pages.forEach((page) => page.render());
+  }
+
   /**
    * Set size for a page (creates page if missing).
    * @param {number} pageIndex
diff --git a/packages/superdoc/src/core/whiteboard/WhiteboardPage.js b/packages/superdoc/src/core/whiteboard/WhiteboardPage.js
index 9db9ca99d9..aa6d5a3ac1 100644
--- a/packages/superdoc/src/core/whiteboard/WhiteboardPage.js
+++ b/packages/superdoc/src/core/whiteboard/WhiteboardPage.js
@@ -2,6 +2,8 @@ import { flattenPoints } from './helpers/flattenPoints';
 import { getRandomId } from './helpers/getRandomId';
 import { createTextarea } from './helpers/createTextarea';
 
+const DEFAULT_TEXT_FONT_SIZE = 18;
+
 /**
  * @typedef {{ width: number, height: number, originalWidth?: number, originalHeight?: number }} WhiteboardPageSize
  * @typedef {{ x: number, y: number }} Point
@@ -51,12 +53,16 @@ export class WhiteboardPage {
 
   #containerEl = null;
 
+  #pendingImageIds = new Set();
+
   #isDrawing = false;
 
   #currentLine = null;
 
   #currentPoints = [];
 
+  #currentStrokeWidth = null;
+
   #currentTool = 'select';
 
   #enabled = false;
@@ -93,6 +99,181 @@ export class WhiteboardPage {
     this.#onToolChange = props.onToolChange;
   }
 
+  /**
+   * @private
+   * Convert px -> normalized (0..1) using current page size.
+   * @param {number} x
+   * @param {number} y
+   * @returns {{ xN: number, yN: number }}
+   */
+  #toNormalizedPoint(x, y) {
+    const width = this.size?.width || 1;
+    const height = this.size?.height || 1;
+    return {
+      xN: x / width,
+      yN: y / height,
+    };
+  }
+
+  /**
+   * @private
+   * Convert normalized (0..1) -> px using current page size.
+   * @param {number} xN
+   * @param {number} yN
+   * @returns {{ x: number, y: number }}
+   */
+  #fromNormalizedPoint(xN, yN) {
+    const width = this.size?.width || 1;
+    const height = this.size?.height || 1;
+    return {
+      x: xN * width,
+      y: yN * height,
+    };
+  }
+
+  /**
+   * @private
+   * Convert px -> normalized size.
+   * @param {number} width
+   * @param {number} height
+   * @returns {{ wN: number, hN: number }}
+   */
+  #toNormalizedSize(width, height) {
+    const pageWidth = this.size?.width || 1;
+    const pageHeight = this.size?.height || 1;
+    return {
+      wN: width / pageWidth,
+      hN: height / pageHeight,
+    };
+  }
+
+  /**
+   * @private
+   * Convert normalized size -> px.
+   * @param {number} wN
+   * @param {number} hN
+   * @returns {{ width: number, height: number }}
+   */
+  #fromNormalizedSize(wN, hN) {
+    const pageWidth = this.size?.width || 1;
+    const pageHeight = this.size?.height || 1;
+    return {
+      width: wN * pageWidth,
+      height: hN * pageHeight,
+    };
+  }
+
+  /**
+   * @private
+   * Convert normalized stroke (0..1) -> px using current page size.
+   * `widthN` is normalized by average page size.
+   * @param {WhiteboardStroke} stroke
+   * @returns {{ points: number[][], strokeWidth: number }}
+   */
+  #fromNormalizedStroke(stroke) {
+    const { width: pageWidth = 1, height: pageHeight = 1 } = this.size || {};
+    const pointsN = Array.isArray(stroke.pointsN) ? stroke.pointsN : [];
+    const points = pointsN.map((pair) => {
+      return [pair[0] * pageWidth, pair[1] * pageHeight];
+    });
+    const strokeWidth = Number.isFinite(stroke.widthN)
+      ? stroke.widthN * ((pageWidth + pageHeight) / 2)
+      : this.#strokeWidth;
+    return { points, strokeWidth };
+  }
+
+  /**
+   * @private
+   * Convert stroke from px -> normalized (0..1).
+   * `widthN` is normalized by average page size.
+   * @param {WhiteboardStroke} stroke
+   * @returns {{ pointsN: number[][], widthN: number | undefined }}
+   */
+  #toNormalizedStroke(stroke) {
+    const { width: pageWidth = 1, height: pageHeight = 1 } = this.size || {};
+    const points = Array.isArray(stroke.points) ? stroke.points : [];
+    const pointsN = points.map((pair) => [pair[0] / pageWidth, pair[1] / pageHeight]);
+    const widthN = Number.isFinite(stroke.width) ? stroke.width / ((pageWidth + pageHeight) / 2) : undefined;
+    return { pointsN, widthN };
+  }
+
+  /**
+   * @private
+   * Convert normalized text (0..1) -> px using current page size.
+   * `fontSizeN` is normalized by original page height.
+   * @param {WhiteboardTextItem} item
+   * @returns {{ x: number, y: number, width: number | undefined, fontSize: number }}
+   */
+  #fromNormalizedText(item) {
+    const { width: pageWidth = 1, height: pageHeight = 1 } = this.size || {};
+    const x = (item.xN ?? 0) * pageWidth;
+    const y = (item.yN ?? 0) * pageHeight;
+    const width = Number.isFinite(item.widthN) ? item.widthN * pageWidth : undefined;
+    const fontSize = Number.isFinite(item.fontSizeN) ? item.fontSizeN * pageHeight : DEFAULT_TEXT_FONT_SIZE;
+    return { x, y, width, fontSize };
+  }
+
+  /**
+   * @private
+   * Convert text from px -> normalized (0..1).
+   * `fontSizeN` is normalized by original page height.
+   * @param {WhiteboardTextItem} item
+   * @returns {{ xN: number, yN: number, widthN: number | null, fontSizeN: number }}
+   */
+  #toNormalizedText(item) {
+    const { width: pageWidth = 1, height: pageHeight = 1 } = this.size || {};
+    const originalHeight = this.originalSize?.height ?? pageHeight;
+    const xN = (item.x ?? 0) / pageWidth;
+    const yN = (item.y ?? 0) / pageHeight;
+    const widthN = Number.isFinite(item.width) ? item.width / pageWidth : null;
+    const fontSizeN = Number.isFinite(item.fontSize)
+      ? item.fontSize / originalHeight
+      : DEFAULT_TEXT_FONT_SIZE / originalHeight;
+    return { xN, yN, widthN, fontSizeN };
+  }
+
+  /**
+   * @private
+   * Convert normalized image (0..1) -> px using current page size.
+   * @param {WhiteboardImageItem} item
+   * @returns {{ x: number, y: number, width: number | undefined, height: number | undefined }}
+   */
+  #fromNormalizedImage(item) {
+    const { width: pageWidth = 1, height: pageHeight = 1 } = this.size || {};
+    const x = (item.xN ?? 0) * pageWidth;
+    const y = (item.yN ?? 0) * pageHeight;
+    const width = Number.isFinite(item.widthN) ? item.widthN * pageWidth : undefined;
+    const height = Number.isFinite(item.heightN) ? item.heightN * pageHeight : undefined;
+    return { x, y, width, height };
+  }
+
+  /**
+   * @private
+   * Convert image from px -> normalized (0..1).
+   * @param {WhiteboardImageItem} item
+   * @returns {{ xN: number, yN: number, widthN: number | null, heightN: number | null }}
+   */
+  #toNormalizedImage(item) {
+    const { width: pageWidth = 1, height: pageHeight = 1 } = this.size || {};
+    const xN = (item.x ?? 0) / pageWidth;
+    const yN = (item.y ?? 0) / pageHeight;
+    const widthN = Number.isFinite(item.width) ? item.width / pageWidth : null;
+    const heightN = Number.isFinite(item.height) ? item.height / pageHeight : null;
+    return { xN, yN, widthN, heightN };
+  }
+
+  /**
+   * @private
+   * Get current page scale relative to the original width.
+   * @returns {number}
+   */
+  #getCurrentScale() {
+    const current = this.size?.width;
+    const original = this.originalSize?.width ?? current;
+    if (!Number.isFinite(current) || !Number.isFinite(original) || !original) return 1;
+    return current / original;
+  }
+
   /**
    * @private
    * Attach Konva stage listeners.
@@ -178,6 +359,7 @@ export class WhiteboardPage {
     if (!this.#stage) return;
     this.#stage.size({ width, height });
     this.#applyPixelRatio();
+    this.render();
   }
 
   /**
@@ -269,10 +451,11 @@ export class WhiteboardPage {
    */
   renderStrokes() {
     this.strokes.forEach((stroke) => {
+      const { points, strokeWidth } = this.#fromNormalizedStroke(stroke);
       const line = new this.#Renderer.Line({
-        points: flattenPoints(stroke.points || []),
+        points: flattenPoints(points),
         stroke: stroke.color || this.#strokeColor,
-        strokeWidth: stroke.width || this.#strokeWidth,
+        strokeWidth,
         lineCap: 'round',
         lineJoin: 'round',
         globalCompositeOperation: stroke.type === 'erase' ? 'destination-out' : 'source-over',
@@ -287,15 +470,16 @@ export class WhiteboardPage {
    */
   renderText() {
     this.text.forEach((item) => {
+      const { x, y, width, fontSize } = this.#fromNormalizedText(item);
       const textNode = new this.#Renderer.Text({
-        x: item.x,
-        y: item.y,
+        x,
+        y,
         text: item.content,
-        fontSize: item.fontSize ?? 18,
+        fontSize,
         fontFamily: 'Arial, sans-serif',
         fill: '#2293fb',
         draggable: this.#currentTool === 'select',
-        width: item.width ?? undefined,
+        width,
       });
 
       textNode.name('wb-text');
@@ -320,8 +504,14 @@ export class WhiteboardPage {
     });
 
     textNode.on('dragend', () => {
-      item.x = textNode.x();
-      item.y = textNode.y();
+      const { xN, yN } = this.#toNormalizedText({
+        x: textNode.x(),
+        y: textNode.y(),
+        fontSize: item.fontSizeN ? item.fontSizeN * (this.size?.height || 1) : DEFAULT_TEXT_FONT_SIZE,
+        width: item.widthN ? item.widthN * (this.size?.width || 1) : null,
+      });
+      item.xN = xN;
+      item.yN = yN;
       this.#triggerChanged();
     });
 
@@ -340,9 +530,10 @@ export class WhiteboardPage {
         scaleY: 1,
       });
       const nextWidth = textNode.width();
-      item.width = nextWidth;
-      item.x = textNode.x();
-      item.y = textNode.y();
+      const pageWidth = this.size?.width || 1;
+      item.widthN = nextWidth / pageWidth;
+      item.xN = textNode.x() / pageWidth;
+      item.yN = textNode.y() / (this.size?.height || 1);
       this.#triggerChanged();
     });
 
@@ -374,26 +565,40 @@ export class WhiteboardPage {
     });
 
     const renderImageItem = (item, name) => {
+      const { x, y, width, height } = this.#fromNormalizedImage(item);
       const existing = existingById.get(item.id);
 
       if (existing) {
-        if (Number.isFinite(item.x)) existing.x(item.x);
-        if (Number.isFinite(item.y)) existing.y(item.y);
-        if (Number.isFinite(item.width)) existing.width(item.width);
-        if (Number.isFinite(item.height)) existing.height(item.height);
+        if (Number.isFinite(x)) existing.x(x);
+        if (Number.isFinite(y)) existing.y(y);
+        if (Number.isFinite(width)) existing.width(width);
+        if (Number.isFinite(height)) existing.height(height);
         existing.draggable(this.#currentTool === 'select');
         return;
       }
 
+      if (this.#pendingImageIds.has(item.id)) {
+        return;
+      }
+
+      this.#pendingImageIds.add(item.id);
       const imageObj = new window.Image();
       imageObj.crossOrigin = 'Anonymous';
       imageObj.onload = () => {
+        if (existingById.get(item.id)) {
+          this.#pendingImageIds.delete(item.id);
+          return;
+        }
+        if (!this.#layer) {
+          this.#pendingImageIds.delete(item.id);
+          return;
+        }
         const imageNode = new this.#Renderer.Image({
-          x: item.x,
-          y: item.y,
+          x,
+          y,
           image: imageObj,
-          width: item.width ?? imageObj.width,
-          height: item.height ?? imageObj.height,
+          width: width ?? imageObj.width,
+          height: height ?? imageObj.height,
           draggable: this.#currentTool === 'select',
         });
 
@@ -403,6 +608,10 @@ export class WhiteboardPage {
 
         this.#layer.add(imageNode);
         this.#layer.batchDraw();
+        this.#pendingImageIds.delete(item.id);
+      };
+      imageObj.onerror = () => {
+        this.#pendingImageIds.delete(item.id);
       };
       imageObj.src = item.src;
     };
@@ -424,8 +633,10 @@ export class WhiteboardPage {
     });
 
     imageNode.on('dragend', () => {
-      item.x = imageNode.x();
-      item.y = imageNode.y();
+      const pageWidth = this.size?.width || 1;
+      const pageHeight = this.size?.height || 1;
+      item.xN = imageNode.x() / pageWidth;
+      item.yN = imageNode.y() / pageHeight;
       this.#triggerChanged();
     });
 
@@ -437,10 +648,12 @@ export class WhiteboardPage {
       imageNode.scale({ x: 1, y: 1 });
       imageNode.width(nextWidth);
       imageNode.height(nextHeight);
-      item.width = nextWidth;
-      item.height = nextHeight;
-      item.x = imageNode.x();
-      item.y = imageNode.y();
+      const pageWidth = this.size?.width || 1;
+      const pageHeight = this.size?.height || 1;
+      item.widthN = nextWidth / pageWidth;
+      item.heightN = nextHeight / pageHeight;
+      item.xN = imageNode.x() / pageWidth;
+      item.yN = imageNode.y() / pageHeight;
       this.#triggerChanged();
     });
   }
@@ -512,7 +725,13 @@ export class WhiteboardPage {
     if (!stroke || !Array.isArray(stroke.points)) {
       return;
     }
-    this.strokes.push(stroke);
+    const { pointsN, widthN } = this.#toNormalizedStroke(stroke);
+    this.strokes.push({
+      pointsN,
+      widthN,
+      color: stroke.color,
+      type: stroke.type,
+    });
   }
 
   /**
@@ -524,13 +743,14 @@ export class WhiteboardPage {
       return;
     }
 
+    const { xN, yN, widthN, fontSizeN } = this.#toNormalizedText(item);
     this.text.push({
       id: item.id ?? getRandomId('text'),
-      x: item.x,
-      y: item.y,
+      xN,
+      yN,
       content: item.content,
-      fontSize: item.fontSize ?? 18,
-      width: item.width ?? null,
+      fontSizeN,
+      widthN,
     });
 
     this.render();
@@ -546,14 +766,15 @@ export class WhiteboardPage {
       return;
     }
 
+    const { xN, yN, widthN, heightN } = this.#toNormalizedImage(item);
     const imageItem = {
       id: item.id ?? getRandomId('image'),
       stickerId: item.stickerId ?? (item.type === 'sticker' ? (item.id ?? null) : null),
-      x: item.x,
-      y: item.y,
+      xN,
+      yN,
       src: item.src,
-      width: item.width ?? null,
-      height: item.height ?? null,
+      widthN,
+      heightN,
       type: item.type ?? 'image',
     };
     this.images.push(imageItem);
@@ -715,15 +936,17 @@ export class WhiteboardPage {
     const pos = this.#stage.getPointerPosition();
     if (!pos) return;
     const isErase = this.#currentTool === 'erase';
+    const strokeWidth = this.#strokeWidth * this.#getCurrentScale();
     this.#currentPoints = [pos.x, pos.y];
     this.#currentLine = new this.#Renderer.Line({
       points: this.#currentPoints,
       stroke: this.#strokeColor,
-      strokeWidth: isErase ? this.#strokeWidth * 3 : this.#strokeWidth,
+      strokeWidth: isErase ? strokeWidth * 3 : strokeWidth,
       lineCap: 'round',
       lineJoin: 'round',
       globalCompositeOperation: isErase ? 'destination-out' : 'source-over',
     });
+    this.#currentStrokeWidth = strokeWidth;
     this.#strokesLayer.add(this.#currentLine);
   }
 
@@ -762,15 +985,17 @@ export class WhiteboardPage {
       pairs.push([this.#currentPoints[i], this.#currentPoints[i + 1]]);
     }
     const isErase = this.#currentTool === 'erase';
+    const baseWidth = this.#currentStrokeWidth ?? this.#strokeWidth;
     this.addStroke({
       points: pairs,
       color: this.#strokeColor,
-      width: isErase ? this.#strokeWidth * 3 : this.#strokeWidth,
+      width: isErase ? baseWidth * 3 : baseWidth,
       type: isErase ? 'erase' : 'draw',
     });
     this.#triggerChanged();
     this.#currentLine = null;
     this.#currentPoints = [];
+    this.#currentStrokeWidth = null;
   }
 
   /**
@@ -785,12 +1010,14 @@ export class WhiteboardPage {
       return;
     }
 
+    const scale = this.#getCurrentScale();
+    const fontSize = DEFAULT_TEXT_FONT_SIZE * scale;
     const textarea = createTextarea({
       left: x,
       top: y,
-      height: 24,
+      height: Math.ceil(fontSize * 1.4),
       background: 'transparent',
-      fontSize: 18,
+      fontSize,
       color: '#2293fb',
     });
     this.#containerEl.append(textarea);
diff --git a/packages/superdoc/src/dev/components/SuperdocDev.vue b/packages/superdoc/src/dev/components/SuperdocDev.vue
index 74e6c5d55d..a6034aae7a 100644
--- a/packages/superdoc/src/dev/components/SuperdocDev.vue
+++ b/packages/superdoc/src/dev/components/SuperdocDev.vue
@@ -12,8 +12,6 @@ import { fieldAnnotationHelpers } from '@superdoc/super-editor';
 import { toolbarIcons } from '../../../../super-editor/src/components/toolbar/toolbarIcons';
 import BlankDOCX from '@superdoc/common/data/blank.docx?url';
 import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';
-import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.mjs';
-import { getWorkerSrcFromCDN } from '../../components/PdfViewer/pdf/pdf-adapter.js';
 import SidebarSearch from './sidebar/SidebarSearch.vue';
 import SidebarFieldAnnotations from './sidebar/SidebarFieldAnnotations.vue';
 import SidebarLayout from './sidebar/SidebarLayout.vue';
@@ -22,10 +20,7 @@ import * as Y from 'yjs';
 
 // note:
 // Or set worker globally outside the component.
-// pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
-//   'pdfjs-dist/build/pdf.worker.min.mjs',
-//   import.meta.url,
-// ).toString();
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
 
 /* For local dev */
 const superdoc = shallowRef(null);
@@ -465,14 +460,14 @@ const init = async () => {
       },
       pdf: {
         pdfLib: pdfjsLib,
-        pdfViewer: pdfjsViewer,
-        setWorker: true,
-        workerSrc: getWorkerSrcFromCDN(pdfjsLib.version),
-        textLayerMode: 0,
-      },
-      whiteboard: {
-        enabled: false,
+        setWorker: false,
+        // workerSrc: getWorkerSrcFromCDN(pdfjsLib.version),
+        // textLayer: true,
+        // outputScale: 1.5,
       },
+      // whiteboard: {
+      //   enabled: true,
+      // },
     },
     onEditorCreate,
     onContentError,
diff --git a/packages/superdoc/src/stores/comments-store.js b/packages/superdoc/src/stores/comments-store.js
index b4d362f855..88c11a6dc3 100644
--- a/packages/superdoc/src/stores/comments-store.js
+++ b/packages/superdoc/src/stores/comments-store.js
@@ -384,7 +384,7 @@ export const useCommentsStore = defineStore('comments', () => {
     const selection = { ...superdocStore.activeSelection };
     selection.selectionBounds = { ...selection.selectionBounds };
 
-    if (superdocStore.selectionPosition?.source) {
+    if (superdocStore.selectionPosition?.source && superdocStore.selectionPosition.source !== 'pdf') {
       superdocStore.selectionPosition.source = null;
     }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af2e89b99e..147eaf60e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -148,8 +148,8 @@ catalogs:
       specifier: ^8.0.1
       version: 8.0.1
     pdfjs-dist:
-      specifier: 4.3.136
-      version: 4.3.136
+      specifier: ^5.4.296
+      version: 5.4.624
     pinia:
       specifier: ^2.1.7
       version: 2.3.1
@@ -919,7 +919,7 @@ importers:
     dependencies:
       superdoc:
         specifier: '>=1.0.0'
-        version: 1.11.0(@hocuspocus/provider@2.15.3(y-protocols@1.0.7(yjs@13.6.19))(yjs@13.6.19))(canvas@3.2.0)(pdfjs-dist@4.3.136)(typescript@5.9.3)(y-prosemirror@1.3.7(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.19))(yjs@13.6.19))(yjs@13.6.19)
+        version: 1.11.0(@hocuspocus/provider@2.15.3(y-protocols@1.0.7(yjs@13.6.19))(yjs@13.6.19))(canvas@3.2.0)(pdfjs-dist@5.4.624)(typescript@5.9.3)(y-prosemirror@1.3.7(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.19))(yjs@13.6.19))(yjs@13.6.19)
     devDependencies:
       '@testing-library/react':
         specifier: 'catalog:'
@@ -1204,7 +1204,7 @@ importers:
         version: 3.1.11
       pdfjs-dist:
         specifier: 'catalog:'
-        version: 4.3.136
+        version: 5.4.624
       postcss-nested:
         specifier: 'catalog:'
         version: 6.2.0(postcss@8.5.6)
@@ -2910,6 +2910,76 @@ packages:
   '@mintlify/validation@0.1.585':
     resolution: {integrity: sha512-32mezT7v1dmPQa2DyGDYf0t+HHUbmpShJVnMrxxhXyMHvKUqOu4ENoRCAxRbfc4OLPxAFRB4qEEq2toID+tOHw==}
 
+  '@napi-rs/canvas-android-arm64@0.1.91':
+    resolution: {integrity: sha512-SLLzXXgSnfct4zy/BVAfweZQkYkPJsNsJ2e5DOE8DFEHC6PufyUrwb12yqeu2So2IOIDpWJJaDAxKY/xpy6MYQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@napi-rs/canvas-darwin-arm64@0.1.91':
+    resolution: {integrity: sha512-bzdbCjIjw3iRuVFL+uxdSoMra/l09ydGNX9gsBxO/zg+5nlppscIpj6gg+nL6VNG85zwUarDleIrUJ+FWHvmuA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@napi-rs/canvas-darwin-x64@0.1.91':
+    resolution: {integrity: sha512-q3qpkpw0IsG9fAS/dmcGIhCVoNxj8ojbexZKWwz3HwxlEWsLncEQRl4arnxrwbpLc2nTNTyj4WwDn7QR5NDAaA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.91':
+    resolution: {integrity: sha512-Io3g8wJZVhK8G+Fpg1363BE90pIPqg+ZbeehYNxPWDSzbgwU3xV0l8r/JBzODwC7XHi1RpFEk+xyUTMa2POj6w==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.91':
+    resolution: {integrity: sha512-HBnto+0rxx1bQSl8bCWA9PyBKtlk2z/AI32r3cu4kcNO+M/5SD4b0v1MWBWZyqMQyxFjWgy3ECyDjDKMC6tY1A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-arm64-musl@0.1.91':
+    resolution: {integrity: sha512-/eJtVe2Xw9A86I4kwXpxxoNagdGclu12/NSMsfoL8q05QmeRCbfjhg1PJS7ENAuAvaiUiALGrbVfeY1KU1gztQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.91':
+    resolution: {integrity: sha512-floNK9wQuRWevUhhXRcuis7h0zirdytVxPgkonWO+kQlbvxV7gEUHGUFQyq4n55UHYFwgck1SAfJ1HuXv/+ppQ==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.91':
+    resolution: {integrity: sha512-c3YDqBdf7KETuZy2AxsHFMsBBX1dWT43yFfWUq+j1IELdgesWtxf/6N7csi3VPf6VA3PmnT9EhMyb+M1wfGtqw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.91':
+    resolution: {integrity: sha512-RpZ3RPIwgEcNBHSHSX98adm+4VP8SMT5FN6250s5jQbWpX/XNUX5aLMfAVJS/YnDjS1QlsCgQxFOPU0aCCWgag==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@napi-rs/canvas-win32-arm64-msvc@0.1.91':
+    resolution: {integrity: sha512-gF8MBp4X134AgVurxqlCdDA2qO0WaDdi9o6Sd5rWRVXRhWhYQ6wkdEzXNLIrmmros0Tsp2J0hQzx4ej/9O8trQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.91':
+    resolution: {integrity: sha512-++gtW9EV/neKI8TshD8WFxzBYALSPag2kFRahIJV+LYsyt5kBn21b1dBhEUDHf7O+wiZmuFCeUa7QKGHnYRZBA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/canvas@0.1.91':
+    resolution: {integrity: sha512-eeIe1GoB74P1B0Nkw6pV8BCQ3hfCfvyYr4BntzlCsnFXzVJiPMDnLeIx3gVB0xQMblHYnjK/0nCLvirEhOjr5g==}
+    engines: {node: '>= 10'}
+
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
@@ -8392,6 +8462,9 @@ packages:
     resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  node-readable-to-web-readable-stream@0.4.2:
+    resolution: {integrity: sha512-/cMZNI34v//jUTrI+UIo4ieHAB5EZRY/+7OmXZgBxaWBMcW2tGdceIw06RFxWxrKZ5Jp3sI2i5TsRo+CBhtVLQ==}
+
   node-releases@2.0.27:
     resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
@@ -8948,10 +9021,6 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
-  path2d@0.2.2:
-    resolution: {integrity: sha512-+vnG6S4dYcYxZd+CZxzXCNKdELYZSKfohrk98yajCo1PtRoDgCTrrwOvK1GT0UoAdVszagDVllQc0U1vaX4NUQ==}
-    engines: {node: '>=6'}
-
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
@@ -8963,9 +9032,9 @@ packages:
     resolution: {integrity: sha512-Q3CG/cYvCO1ye4QKkuH7EXxs3VC/rI1/trd+qX2+PolbaKG0H+bgcZzrTt96mMyRtejk+JMCiLUn3y29W8qmFQ==}
     engines: {node: '>= 0.10'}
 
-  pdfjs-dist@4.3.136:
-    resolution: {integrity: sha512-gzfnt1qc4yA+U46golPGYtU4WM2ssqP2MvFjKga8GEKOrEnzRPrA/9jogLLPYHiA3sGBPJ+p7BdAq+ytmw3jEg==}
-    engines: {node: '>=18'}
+  pdfjs-dist@5.4.624:
+    resolution: {integrity: sha512-sm6TxKTtWv1Oh6n3C6J6a8odejb5uO4A4zo/2dgkHuC0iu8ZMAXOezEODkVaoVp8nX1Xzr+0WxFJJmUr45hQzg==}
+    engines: {node: '>=20.16.0 || >=22.3.0'}
 
   peek-readable@4.1.0:
     resolution: {integrity: sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg==}
@@ -13595,6 +13664,54 @@ snapshots:
       - supports-color
       - typescript
 
+  '@napi-rs/canvas-android-arm64@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-darwin-arm64@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-darwin-x64@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-musl@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-win32-arm64-msvc@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.91':
+    optional: true
+
+  '@napi-rs/canvas@0.1.91':
+    optionalDependencies:
+      '@napi-rs/canvas-android-arm64': 0.1.91
+      '@napi-rs/canvas-darwin-arm64': 0.1.91
+      '@napi-rs/canvas-darwin-x64': 0.1.91
+      '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.91
+      '@napi-rs/canvas-linux-arm64-gnu': 0.1.91
+      '@napi-rs/canvas-linux-arm64-musl': 0.1.91
+      '@napi-rs/canvas-linux-riscv64-gnu': 0.1.91
+      '@napi-rs/canvas-linux-x64-gnu': 0.1.91
+      '@napi-rs/canvas-linux-x64-musl': 0.1.91
+      '@napi-rs/canvas-win32-arm64-msvc': 0.1.91
+      '@napi-rs/canvas-win32-x64-msvc': 0.1.91
+    optional: true
+
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.8.1
@@ -20596,6 +20713,9 @@ snapshots:
       fetch-blob: 3.2.0
       formdata-polyfill: 4.0.10
 
+  node-readable-to-web-readable-stream@0.4.2:
+    optional: true
+
   node-releases@2.0.27: {}
 
   node-stdlib-browser@1.3.1:
@@ -21061,9 +21181,6 @@ snapshots:
 
   path-type@4.0.0: {}
 
-  path2d@0.2.2:
-    optional: true
-
   pathe@2.0.3: {}
 
   pathval@2.0.1: {}
@@ -21077,10 +21194,10 @@ snapshots:
       sha.js: 2.4.12
       to-buffer: 1.2.2
 
-  pdfjs-dist@4.3.136:
+  pdfjs-dist@5.4.624:
     optionalDependencies:
-      canvas: 3.2.0
-      path2d: 0.2.2
+      '@napi-rs/canvas': 0.1.91
+      node-readable-to-web-readable-stream: 0.4.2
 
   peek-readable@4.1.0: {}
 
@@ -22820,14 +22937,14 @@ snapshots:
       make-asynchronous: 1.0.1
       time-span: 5.1.0
 
-  superdoc@1.11.0(@hocuspocus/provider@2.15.3(y-protocols@1.0.7(yjs@13.6.19))(yjs@13.6.19))(canvas@3.2.0)(pdfjs-dist@4.3.136)(typescript@5.9.3)(y-prosemirror@1.3.7(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.19))(yjs@13.6.19))(yjs@13.6.19):
+  superdoc@1.11.0(@hocuspocus/provider@2.15.3(y-protocols@1.0.7(yjs@13.6.19))(yjs@13.6.19))(canvas@3.2.0)(pdfjs-dist@5.4.624)(typescript@5.9.3)(y-prosemirror@1.3.7(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.19))(yjs@13.6.19))(yjs@13.6.19):
     dependencies:
       '@hocuspocus/provider': 2.15.3(y-protocols@1.0.7(yjs@13.6.19))(yjs@13.6.19)
       buffer-crc32: 1.0.0
       eventemitter3: 5.0.4
       jsdom: 27.3.0(canvas@3.2.0)
       naive-ui: 2.43.2(vue@3.5.25(typescript@5.9.3))
-      pdfjs-dist: 4.3.136
+      pdfjs-dist: 5.4.624
       pinia: 2.3.1(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
       rollup-plugin-copy: 3.5.0
       uuid: 9.0.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index a2e35cb14d..80d987fb4f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -58,7 +58,7 @@ catalog:
   naive-ui: ^2.43.1
   nodemon: ^3.1.10
   patch-package: ^8.0.1
-  pdfjs-dist: 4.3.136
+  pdfjs-dist: ^5.4.296
   pinia: ^2.1.7
   pixelmatch: ^7.1.0
   playwright: ^1.56.0