deps(embedPDF): Bump codebase to embedPDF v2.3.0 and adjust codebase for new features (#5567)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Signed-off-by: Balázs Szücs <[email protected]>
Co-authored-by: Anthony Stirling <[email protected]>

frontend/src/core/components/viewer/ZoomAPIBridge.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { useZoom, ZoomMode } from '@embedpdf/plugin-zoom/react';
 import { useSpread, SpreadMode } from '@embedpdf/plugin-spread/react';
 import { useViewer } from '@app/contexts/ViewerContext';
+import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
 import { useFileState } from '@app/contexts/FileContext';
 import {
   determineAutoZoom,
@@ -12,8 +13,19 @@ import {
 import { getFirstPageAspectRatioFromStub } from '@app/utils/pageMetadata';
 
 export function ZoomAPIBridge() {
-  const { provides: zoom, state: zoomState } = useZoom();
-  const { spreadMode } = useSpread();
+  const activeDocumentId = useActiveDocumentId();
+  
+  // Don't render the inner component until we have a valid document ID
+  if (!activeDocumentId) {
+    return null;
+  }
+  
+  return <ZoomAPIBridgeInner documentId={activeDocumentId} />;
+}
+
+function ZoomAPIBridgeInner({ documentId }: { documentId: string }) {
+  const { provides: zoom, state: zoomState } = useZoom(documentId);
+  const { spreadMode } = useSpread(documentId);
   const { registerBridge, triggerImmediateZoomUpdate } = useViewer();
   const { selectors } = useFileState();
 
@@ -21,8 +33,14 @@ export function ZoomAPIBridge() {
   const lastSpreadMode = useRef(spreadMode ?? SpreadMode.None);
   const lastFileId = useRef<string | undefined>(undefined);
   const lastAppliedZoom = useRef<number | null>(null);
+  const zoomRef = useRef(zoom);
   const [autoZoomTick, setAutoZoomTick] = useState(0);
 
+  // Keep zoom ref updated
+  useEffect(() => {
+    zoomRef.current = zoom;
+  }, [zoom]);
+
   const scheduleAutoZoom = useCallback(() => {
     hasSetInitialZoom.current = false;
     lastAppliedZoom.current = null;
@@ -30,15 +48,22 @@ export function ZoomAPIBridge() {
   }, []);
 
   const requestFitWidth = useCallback(() => {
-    if (zoom) {
-      zoom.requestZoom(ZoomMode.FitWidth, { vx: 0.5, vy: 0 });
+    if (zoomRef.current) {
+      zoomRef.current.requestZoom(ZoomMode.FitWidth, { vx: 0.5, vy: 0 });
     }
-  }, [zoom]);
+  }, []);
 
   const stubs = selectors.getStirlingFileStubs();
   const firstFileStub = stubs[0];
   const firstFileId = firstFileStub?.id;
 
+  // Extract primitive values from zoomState for dependency arrays
+  const zoomLevel = zoomState?.zoomLevel;
+  const currentZoomLevel = zoomState?.currentZoomLevel;
+  
+  // Extract metadata aspect ratio as a primitive to avoid object reference issues
+  const metadataAspectRatio = getFirstPageAspectRatioFromStub(firstFileStub);
+
   useEffect(() => {
     if (!firstFileId) {
       hasSetInitialZoom.current = false;
@@ -59,7 +84,6 @@ export function ZoomAPIBridge() {
       lastSpreadMode.current = currentSpreadMode;
 
       const hadTrackedAutoZoom = lastAppliedZoom.current !== null;
-      const zoomLevel = zoomState?.zoomLevel;
       if (
         zoomLevel === ZoomMode.FitWidth ||
         zoomLevel === ZoomMode.Automatic ||
@@ -69,13 +93,13 @@ export function ZoomAPIBridge() {
         scheduleAutoZoom();
       }
     }
-  }, [spreadMode, zoomState?.zoomLevel, scheduleAutoZoom, requestFitWidth]);
+  }, [spreadMode, zoomLevel, scheduleAutoZoom, requestFitWidth]);
 
 
   const isManagedZoom =
     !!zoom &&
-    (zoomState?.zoomLevel === ZoomMode.FitWidth ||
-      zoomState?.zoomLevel === ZoomMode.Automatic ||
+    (zoomLevel === ZoomMode.FitWidth ||
+      zoomLevel === ZoomMode.Automatic ||
       lastAppliedZoom.current !== null);
 
   useFitWidthResize({
@@ -85,7 +109,7 @@ export function ZoomAPIBridge() {
   });
 
   useEffect(() => {
-    if (!zoom || !zoomState) {
+    if (!zoom || zoomLevel === undefined || currentZoomLevel === undefined) {
       return;
     }
 
@@ -97,14 +121,14 @@ export function ZoomAPIBridge() {
       return;
     }
 
-    if (zoomState.zoomLevel !== ZoomMode.FitWidth) {
-      if (zoomState.zoomLevel === ZoomMode.Automatic) {
+    if (zoomLevel !== ZoomMode.FitWidth) {
+      if (zoomLevel === ZoomMode.Automatic) {
         requestFitWidth();
       }
       return;
     }
 
-    const fitWidthZoom = zoomState.currentZoomLevel;
+    const fitWidthZoom = currentZoomLevel;
     if (!fitWidthZoom || fitWidthZoom <= 0 || fitWidthZoom === 1) {
       return;
     }
@@ -121,7 +145,6 @@ export function ZoomAPIBridge() {
     const applyAutoZoom = async () => {
       const currentSpreadMode = spreadMode ?? SpreadMode.None;
       const pagesPerSpread = currentSpreadMode !== SpreadMode.None ? 2 : 1;
-      const metadataAspectRatio = getFirstPageAspectRatioFromStub(firstFileStub);
 
       if (cancelled) {
         return;
@@ -165,21 +188,31 @@ export function ZoomAPIBridge() {
     };
   }, [
     zoom,
-    zoomState,
+    zoomLevel,
+    currentZoomLevel,
     firstFileId,
-    firstFileStub,
+    metadataAspectRatio,
     requestFitWidth,
     autoZoomTick,
     spreadMode,
     triggerImmediateZoomUpdate,
   ]);
 
+  // Subscribe to zoom changes - use ref to avoid re-subscribing when zoom reference changes
+  const zoomSubscriptionRef = useRef<(() => void) | null>(null);
+  
   useEffect(() => {
+    // Cleanup previous subscription if any
+    if (zoomSubscriptionRef.current) {
+      zoomSubscriptionRef.current();
+      zoomSubscriptionRef.current = null;
+    }
+    
     if (!zoom) {
       return;
     }
 
-    const unsubscribe = zoom.onZoomChange((event: { newZoom?: number }) => {
+    zoomSubscriptionRef.current = zoom.onZoomChange((event: { newZoom?: number }) => {
       if (typeof event?.newZoom !== 'number') {
         return;
       }
@@ -188,17 +221,25 @@ export function ZoomAPIBridge() {
     });
 
     return () => {
-      unsubscribe();
+      if (zoomSubscriptionRef.current) {
+        zoomSubscriptionRef.current();
+        zoomSubscriptionRef.current = null;
+      }
     };
   }, [zoom, triggerImmediateZoomUpdate]);
 
+  // Extract primitive values to avoid dependency on object reference
+  const zoomStateCurrentZoomLevel = zoomState?.currentZoomLevel;
+
+  // Register bridge - only re-run when actual values change
   useEffect(() => {
-    if (!zoom || !zoomState) {
+    const currentZoom = zoomRef.current;
+    if (!currentZoom || zoomStateCurrentZoomLevel === undefined) {
       return;
     }
 
     const currentZoomLevel =
-      lastAppliedZoom.current ?? zoomState.currentZoomLevel ?? 1;
+      lastAppliedZoom.current ?? zoomStateCurrentZoomLevel ?? 1;
 
     const newState = {
       currentZoom: currentZoomLevel,
@@ -209,9 +250,9 @@ export function ZoomAPIBridge() {
 
     registerBridge('zoom', {
       state: newState,
-      api: zoom,
+      api: currentZoom,
     });
-  }, [zoom, zoomState, registerBridge, triggerImmediateZoomUpdate]);
+  }, [zoomStateCurrentZoomLevel, registerBridge, triggerImmediateZoomUpdate]);
 
   return null;
 }