spread/multipage

frontend/package-lock.json

@@ -18,6 +18,7 @@
         "@embedpdf/plugin-render": "^1.1.1",
         "@embedpdf/plugin-scroll": "^1.1.1",
         "@embedpdf/plugin-selection": "^1.1.1",
+        "@embedpdf/plugin-spread": "^1.1.1",
         "@embedpdf/plugin-tiling": "^1.1.1",
         "@embedpdf/plugin-viewport": "^1.1.1",
         "@embedpdf/plugin-zoom": "^1.1.1",
@@ -745,6 +746,22 @@
         "vue": ">=3.2.0"
       }
     },
+    "node_modules/@embedpdf/plugin-spread": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-spread/-/plugin-spread-1.1.1.tgz",
+      "integrity": "sha512-UyzPKx96f96qKqtGKLv0wT26NbCUi2D+pBdk+/CUQFbe7PJfNIIpECPp0bZJAwQ6MwBWnIwCVT1OwK+egqji5A==",
+      "dependencies": {
+        "@embedpdf/models": "1.1.1"
+      },
+      "peerDependencies": {
+        "@embedpdf/core": "1.1.1",
+        "@embedpdf/plugin-loader": "1.1.1",
+        "preact": "^10.26.4",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@embedpdf/plugin-tiling": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-tiling/-/plugin-tiling-1.1.1.tgz",

frontend/package.json

@@ -14,6 +14,7 @@
     "@embedpdf/plugin-render": "^1.1.1",
     "@embedpdf/plugin-scroll": "^1.1.1",
     "@embedpdf/plugin-selection": "^1.1.1",
+    "@embedpdf/plugin-spread": "^1.1.1",
     "@embedpdf/plugin-tiling": "^1.1.1",
     "@embedpdf/plugin-viewport": "^1.1.1",
     "@embedpdf/plugin-zoom": "^1.1.1",

frontend/src/components/viewer/EmbedPdfViewer.tsx

@@ -132,8 +132,7 @@ const EmbedPdfViewer = ({
                   }}
                   dualPage={false}
                   onDualPageToggle={() => {
-                    // Placeholder - will implement dual page toggle later
-                    console.log('Toggle dual page view');
+                    (window as any).embedPdfSpread?.toggleSpreadMode();
                   }}
                   currentZoom={100}
                 />

frontend/src/components/viewer/LocalEmbedPDF.tsx

@@ -13,10 +13,12 @@ import { InteractionManagerPluginPackage, PagePointerProvider, GlobalPointerProv
 import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react';
 import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react';
 import { PanPluginPackage } from '@embedpdf/plugin-pan/react';
+import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react';
 import { ZoomControlsExporter } from './ZoomControlsExporter';
 import { ScrollControlsExporter } from './ScrollControlsExporter';
 import { SelectionControlsExporter } from './SelectionControlsExporter';
 import { PanControlsExporter } from './PanControlsExporter';
+import { SpreadControlsExporter } from './SpreadControlsExporter';
 
 interface LocalEmbedPDFProps {
   file?: File | Blob;
@@ -88,6 +90,11 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
         overlapPx: 5,
         extraRings: 1,
       }),
+      
+      // Register spread plugin for dual page layout
+      createPluginRegistration(SpreadPluginPackage, {
+        defaultSpreadMode: SpreadMode.None, // Start with single page view
+      }),
     ];
   }, [pdfUrl]);
 
@@ -166,6 +173,7 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
         <ScrollControlsExporter />
         <SelectionControlsExporter />
         <PanControlsExporter />
+        <SpreadControlsExporter />
         <GlobalPointerProvider>
           <Viewport
             style={{

frontend/src/components/viewer/SpreadControlsExporter.tsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { useSpread, SpreadMode } from '@embedpdf/plugin-spread/react';
+
+/**
+ * Component that runs inside EmbedPDF context and exports spread controls globally
+ */
+export function SpreadControlsExporter() {
+  const { provides: spread, spreadMode } = useSpread();
+
+  useEffect(() => {
+    if (spread) {
+      // Export spread controls to global window for toolbar access
+      (window as any).embedPdfSpread = {
+        setSpreadMode: (mode: SpreadMode) => {
+          console.log('EmbedPDF: Setting spread mode to:', mode);
+          spread.setSpreadMode(mode);
+        },
+        getSpreadMode: () => spread.getSpreadMode(),
+        toggleSpreadMode: () => {
+          // Toggle between None and Odd (most common dual-page mode)
+          const newMode = spreadMode === SpreadMode.None ? SpreadMode.Odd : SpreadMode.None;
+          console.log('EmbedPDF: Toggling spread mode from', spreadMode, 'to', newMode);
+          spread.setSpreadMode(newMode);
+        },
+        currentSpreadMode: spreadMode,
+        isDualPage: spreadMode !== SpreadMode.None,
+        SpreadMode: SpreadMode, // Export enum for reference
+      };
+      
+      console.log('EmbedPDF spread controls exported to window.embedPdfSpread', {
+        currentSpreadMode: spreadMode,
+        isDualPage: spreadMode !== SpreadMode.None,
+        spreadAPI: spread,
+        availableMethods: Object.keys(spread)
+      });
+    } else {
+      console.warn('EmbedPDF spread API not available yet');
+    }
+  }, [spread, spreadMode]);
+
+  return null; // This component doesn't render anything
+}