Rems

frontend/src/components/shared/RightRail.tsx

@@ -7,16 +7,16 @@ import { useRightRail } from '../../contexts/RightRailContext';
 import { useFileState, useFileSelection, useFileManagement } from '../../contexts/FileContext';
 import { useNavigationState } from '../../contexts/NavigationContext';
 import { useTranslation } from 'react-i18next';
-import { usePanState } from '../../hooks/usePanState';
 
 import LanguageSelector from '../shared/LanguageSelector';
 import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
 import { Tooltip } from '../shared/Tooltip';
 import BulkSelectionPanel from '../pageEditor/BulkSelectionPanel';
+import { SearchInterface } from '../viewer/SearchInterface';
 
 export default function RightRail() {
   const { t } = useTranslation();
-  const isPanning = usePanState();
+  const [isPanning, setIsPanning] = useState(false);
   const { toggleTheme } = useRainbowThemeContext();
   const { buttons, actions } = useRightRail();
   const topButtons = useMemo(() => buttons.filter(b => (b.section || 'top') === 'top' && (b.visible ?? true)), [buttons]);
@@ -215,15 +215,29 @@ export default function RightRail() {
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
             {/* Search */}
             <Tooltip content={t('rightRail.search', 'Search PDF')} position="left" offset={12} arrow>
+              <Popover position="left" withArrow shadow="md" offset={8}>
+                <Popover.Target>
+                  <div style={{ display: 'inline-flex' }}>
                     <ActionIcon
                       variant="subtle"
                       radius="md"
                       className="right-rail-icon"
-                onClick={() => (window as any).togglePdfSearch?.()}
                       disabled={currentView !== 'viewer'}
+                      aria-label={typeof t === 'function' ? t('rightRail.search', 'Search PDF') : 'Search PDF'}
                     >
                       <LocalIcon icon="search" width="1.5rem" height="1.5rem" />
                     </ActionIcon>
+                  </div>
+                </Popover.Target>
+                <Popover.Dropdown>
+                  <div style={{ minWidth: '20rem' }}>
+                    <SearchInterface 
+                      visible={true} 
+                      onClose={() => {}} 
+                    />
+                  </div>
+                </Popover.Dropdown>
+              </Popover>
             </Tooltip>
 
 
@@ -234,7 +248,10 @@ export default function RightRail() {
                 color={isPanning ? "blue" : undefined}
                 radius="md"
                 className="right-rail-icon"
-                onClick={() => (window as any).embedPdfPan?.togglePan()}
+                onClick={() => {
+                  (window as any).embedPdfPan?.togglePan();
+                  setIsPanning(!isPanning);
+                }}
                 disabled={currentView !== 'viewer'}
               >
                 <LocalIcon icon="pan-tool-rounded" width="1.5rem" height="1.5rem" />
@@ -326,7 +343,7 @@ export default function RightRail() {
                       </div>
                   </Popover.Target>
                   <Popover.Dropdown>
-                    <div style={{ minWidth: 280 }}>
+                    <div style={{ minWidth: '17.5rem' }}>
                       <BulkSelectionPanel
                         csvInput={csvInput}
                         setCsvInput={setCsvInput}

frontend/src/components/viewer/EmbedPdfViewer.tsx

@@ -8,7 +8,6 @@ import { useFileState } from "../../contexts/FileContext";
 import { useFileWithUrl } from "../../hooks/useFileWithUrl";
 import { LocalEmbedPDF } from './LocalEmbedPDF';
 import { PdfViewerToolbar } from './PdfViewerToolbar';
-import { SearchInterface } from './SearchInterface';
 import { ThumbnailSidebar } from './ThumbnailSidebar';
 
 export interface EmbedPdfViewerProps {
@@ -29,7 +28,6 @@ const EmbedPdfViewer = ({
   const { colorScheme } = useMantineColorScheme();
   const viewerRef = React.useRef<HTMLDivElement>(null);
   const [isViewerHovered, setIsViewerHovered] = React.useState(false);
-  const [isSearchVisible, setIsSearchVisible] = React.useState(false);
   const [isThumbnailSidebarVisible, setIsThumbnailSidebarVisible] = React.useState(false);
 
   // Get current file from FileContext
@@ -122,16 +120,11 @@ const EmbedPdfViewer = ({
 
   // Expose toggle functions globally for right rail buttons
   React.useEffect(() => {
-    (window as any).togglePdfSearch = () => {
-      setIsSearchVisible(prev => !prev);
-    };
-    
     (window as any).toggleThumbnailSidebar = () => {
       setIsThumbnailSidebarVisible(prev => !prev);
     };
     
     return () => {
-      delete (window as any).togglePdfSearch;
       delete (window as any).toggleThumbnailSidebar;
     };
   }, []);
@@ -227,11 +220,6 @@ const EmbedPdfViewer = ({
         </div>
       )}
 
-      {/* Search Interface Overlay */}
-      <SearchInterface 
-        visible={isSearchVisible} 
-        onClose={() => setIsSearchVisible(false)} 
-      />
 
       {/* Thumbnail Sidebar */}
       <ThumbnailSidebar

frontend/src/components/viewer/LocalEmbedPDF.tsx

@@ -17,13 +17,13 @@ import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react';
 import { SearchPluginPackage } from '@embedpdf/plugin-search/react';
 import { ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/react';
 import { CustomSearchLayer } from './CustomSearchLayer';
-import { ZoomControlsExporter } from './ZoomControlsExporter';
+import { ZoomAPIBridge } from './ZoomAPIBridge';
-import { ScrollControlsExporter } from './ScrollControlsExporter';
+import { ScrollAPIBridge } from './ScrollAPIBridge';
-import { SelectionControlsExporter } from './SelectionControlsExporter';
+import { SelectionAPIBridge } from './SelectionAPIBridge';
-import { PanControlsExporter } from './PanControlsExporter';
+import { PanAPIBridge } from './PanAPIBridge';
-import { SpreadControlsExporter } from './SpreadControlsExporter';
+import { SpreadAPIBridge } from './SpreadAPIBridge';
-import { SearchControlsExporter } from './SearchControlsExporter';
+import { SearchAPIBridge } from './SearchAPIBridge';
-import { ThumbnailControlsExporter } from './ThumbnailControlsExporter';
+import { ThumbnailAPIBridge } from './ThumbnailAPIBridge';
 
 interface LocalEmbedPDFProps {
   file?: File | Blob;
@@ -180,13 +180,13 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
       minWidth: 0
     }}>
       <EmbedPDF engine={engine} plugins={plugins}>
-        <ZoomControlsExporter />
+        <ZoomAPIBridge />
-        <ScrollControlsExporter />
+        <ScrollAPIBridge />
-        <SelectionControlsExporter />
+        <SelectionAPIBridge />
-        <PanControlsExporter />
+        <PanAPIBridge />
-        <SpreadControlsExporter />
+        <SpreadAPIBridge />
-        <SearchControlsExporter />
+        <SearchAPIBridge />
-        <ThumbnailControlsExporter />
+        <ThumbnailAPIBridge />
         <GlobalPointerProvider>
           <Viewport
             style={{

frontend/src/components/viewer/PanAPIBridge.tsx

@@ -2,9 +2,9 @@ import { useEffect, useState } from 'react';
 import { usePan } from '@embedpdf/plugin-pan/react';
 
 /**
- * Component that runs inside EmbedPDF context and exports pan controls globally
+ * Component that runs inside EmbedPDF context and bridges pan controls to global window
  */
-export function PanControlsExporter() {
+export function PanAPIBridge() {
   const { provides: pan, isPanning } = usePan();
   const [panStateListeners, setPanStateListeners] = useState<Array<(isPanning: boolean) => void>>([]);
 
@@ -21,11 +21,10 @@ export function PanControlsExporter() {
           pan.disablePan();
         },
         togglePan: () => {
-          console.log('EmbedPDF: Toggling pan mode, current isPanning:', isPanning);
           pan.togglePan();
         },
         makePanDefault: () => pan.makePanDefault(),
-        isPanning: isPanning,
+        get isPanning() { return isPanning; }, // Use getter to always return current value
         // Subscribe to pan state changes for reactive UI
         onPanStateChange: (callback: (isPanning: boolean) => void) => {
           setPanStateListeners(prev => [...prev, callback]);
@@ -36,11 +35,6 @@ export function PanControlsExporter() {
         },
       };
 
-      console.log('EmbedPDF pan controls exported to window.embedPdfPan', {
-        isPanning,
-        panAPI: pan,
-        availableMethods: Object.keys(pan)
-      });
     } else {
       console.warn('EmbedPDF pan API not available yet');
     }
@@ -51,5 +45,5 @@ export function PanControlsExporter() {
     panStateListeners.forEach(callback => callback(isPanning));
   }, [isPanning, panStateListeners]);
 
-  return null; // This component doesn't render anything
+  return null;
 }

frontend/src/components/viewer/PdfViewerToolbar.tsx

@@ -35,6 +35,7 @@ export function PdfViewerToolbar({
   const [dynamicZoom, setDynamicZoom] = useState(currentZoom);
   const [dynamicPage, setDynamicPage] = useState(currentPage);
   const [dynamicTotalPages, setDynamicTotalPages] = useState(totalPages);
+  const [isPanning, setIsPanning] = useState(false);
 
   // Update zoom and scroll state from EmbedPDF APIs
   useEffect(() => {
@@ -53,6 +54,12 @@ export function PdfViewerToolbar({
         setDynamicTotalPages(totalPagesNum);
         setPageInput(currentPageNum);
       }
+      
+      // Update pan mode state
+      if ((window as any).embedPdfPan) {
+        const panState = (window as any).embedPdfPan.isPanning || false;
+        setIsPanning(panState);
+      }
     };
 
     // Update state immediately
@@ -133,7 +140,7 @@ export function PdfViewerToolbar({
           borderBottomRightRadius: 0,
           boxShadow: "0 -2px 8px rgba(0,0,0,0.04)",
           pointerEvents: "auto",
-          minWidth: 420,
+          minWidth: '26.5rem',
         }}
       >
         {/* First Page Button */}
@@ -145,7 +152,7 @@ export function PdfViewerToolbar({
           radius="xl"
           onClick={handleFirstPage}
           disabled={dynamicPage === 1}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={t("viewer.firstPage", "First Page")}
         >
           <FirstPageIcon fontSize="small" />
@@ -160,7 +167,7 @@ export function PdfViewerToolbar({
           radius="xl"
           onClick={handlePreviousPage}
           disabled={dynamicPage === 1}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={t("viewer.previousPage", "Previous Page")}
         >
           <ArrowBackIosIcon fontSize="small" />
@@ -197,7 +204,7 @@ export function PdfViewerToolbar({
           radius="xl"
           onClick={handleNextPage}
           disabled={dynamicPage === dynamicTotalPages}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={t("viewer.nextPage", "Next Page")}
         >
           <ArrowForwardIosIcon fontSize="small" />
@@ -212,7 +219,7 @@ export function PdfViewerToolbar({
           radius="xl"
           onClick={handleLastPage}
           disabled={dynamicPage === dynamicTotalPages}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={t("viewer.lastPage", "Last Page")}
         >
           <LastPageIcon fontSize="small" />
@@ -225,7 +232,7 @@ export function PdfViewerToolbar({
           size="md"
           radius="xl"
           onClick={onDualPageToggle}
-          style={{ minWidth: 36 }}
+          style={{ minWidth: '2.5rem' }}
           title={dualPage ? t("viewer.singlePageView", "Single Page View") : t("viewer.dualPageView", "Dual Page View")}
         >
           {dualPage ? <DescriptionIcon fontSize="small" /> : <ViewWeekIcon fontSize="small" />}
@@ -239,12 +246,12 @@ export function PdfViewerToolbar({
             size="md"
             radius="xl"
             onClick={handleZoomOut}
-            style={{ minWidth: 32, padding: 0 }}
+            style={{ minWidth: '2rem', padding: 0 }}
             title={t("viewer.zoomOut", "Zoom out")}
           >
             −
           </Button>
-          <span style={{ minWidth: 40, textAlign: "center" }}>
+          <span style={{ minWidth: '2.5rem', textAlign: "center" }}>
             {dynamicZoom}%
           </span>
           <Button
@@ -253,7 +260,7 @@ export function PdfViewerToolbar({
             size="md"
             radius="xl"
             onClick={handleZoomIn}
-            style={{ minWidth: 32, padding: 0 }}
+            style={{ minWidth: '2rem', padding: 0 }}
             title={t("viewer.zoomIn", "Zoom in")}
           >
             +

frontend/src/components/viewer/ScrollAPIBridge.tsx

@@ -4,7 +4,7 @@ import { useScroll } from '@embedpdf/plugin-scroll/react';
 /**
  * Component that runs inside EmbedPDF context and exports scroll controls globally
  */
-export function ScrollControlsExporter() {
+export function ScrollAPIBridge() {
   const { provides: scroll, state: scrollState } = useScroll();
 
   useEffect(() => {
@@ -23,5 +23,5 @@ export function ScrollControlsExporter() {
     }
   }, [scroll, scrollState]);
 
-  return null; // This component doesn't render anything
+  return null;
 }

frontend/src/components/viewer/SearchAPIBridge.tsx

@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 import { useSearch } from '@embedpdf/plugin-search/react';
 
 /**
- * Component that runs inside EmbedPDF context and exports search controls globally
+ * Component that runs inside EmbedPDF context and bridges search controls to global window
  */
-export function SearchControlsExporter() {
+export function SearchAPIBridge() {
   const { provides: search, state } = useSearch();
 
   useEffect(() => {
@@ -48,5 +48,5 @@ export function SearchControlsExporter() {
     }
   }, [search, state]);
 
-  return null; // This component doesn't render anything
+  return null;
 }

frontend/src/components/viewer/SearchInterface.tsx

@@ -11,6 +11,7 @@ interface SearchInterfaceProps {
 export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
   const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState('');
+  const [jumpToValue, setJumpToValue] = useState('');
   const [resultInfo, setResultInfo] = useState<{
     currentIndex: number;
     totalResults: number;
@@ -54,7 +55,11 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
   }, [visible]);
 
   const handleSearch = async (query: string) => {
-    if (!query.trim()) return;
+    if (!query.trim()) {
+      // If query is empty, clear the search
+      handleClearSearch();
+      return;
+    }
 
     const searchAPI = (window as any).embedPdfSearch;
     if (searchAPI) {
@@ -95,47 +100,61 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
     const searchAPI = (window as any).embedPdfSearch;
     if (searchAPI) {
       searchAPI.clearSearch();
+      // Also try to explicitly clear highlights if available
+      if (searchAPI.searchAPI && searchAPI.searchAPI.clearHighlights) {
+        searchAPI.searchAPI.clearHighlights();
+      }
     }
     setSearchQuery('');
     setResultInfo(null);
   };
 
+  // Sync search query with API state on mount
+  useEffect(() => {
+    const searchAPI = (window as any).embedPdfSearch;
+    if (searchAPI && searchAPI.state && searchAPI.state.query) {
+      setSearchQuery(searchAPI.state.query);
+    }
+  }, []);
+
+  const handleJumpToResult = (index: number) => {
+    const searchAPI = (window as any).embedPdfSearch;
+    if (searchAPI && resultInfo && index >= 1 && index <= resultInfo.totalResults) {
+      // Convert 1-based user input to 0-based API index
+      searchAPI.goToResult(index - 1);
+    }
+  };
+
+  const handleJumpToSubmit = () => {
+    const index = parseInt(jumpToValue);
+    if (index && resultInfo && index >= 1 && index <= resultInfo.totalResults) {
+      handleJumpToResult(index);
+    }
+  };
+
+  const handleJumpToKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleJumpToSubmit();
+    }
+  };
+
   const handleClose = () => {
     handleClearSearch();
     onClose();
   };
 
-  if (!visible) return null;
 
   return (
     <Box
       style={{
-        position: 'fixed',
+        padding: '0px'
-        top: '20px',
-        right: '20px',
-        zIndex: 1000,
-        backgroundColor: 'var(--mantine-color-body)',
-        border: '1px solid var(--mantine-color-gray-3)',
-        borderRadius: '8px',
-        padding: '16px',
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-        minWidth: '320px',
-        maxWidth: '400px'
       }}
     >
-      {/* Header with close button */}
+      {/* Header */}
-      <Group justify="space-between" mb="md">
+      <Group mb="md">
         <Text size="sm" fw={600}>
           {t('search.title', 'Search PDF')}
         </Text>
-        <ActionIcon
-          variant="subtle"
-          size="sm"
-          onClick={handleClose}
-          aria-label="Close search"
-        >
-          <LocalIcon icon="close" width="1rem" height="1rem" />
-        </ActionIcon>
       </Group>
 
       {/* Search input */}
@@ -143,7 +162,14 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
         <TextInput
           placeholder={t('search.placeholder', 'Enter search term...')}
           value={searchQuery}
-          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          onChange={(e) => {
+            const newValue = e.currentTarget.value;
+            setSearchQuery(newValue);
+            // If user clears the input, clear the search highlights
+            if (!newValue.trim()) {
+              handleClearSearch();
+            }
+          }}
           onKeyDown={handleKeyDown}
           style={{ flex: 1 }}
           rightSection={
@@ -162,15 +188,29 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
       {/* Results info and navigation */}
       {resultInfo && (
         <Group justify="space-between" align="center">
+          {resultInfo.totalResults === 0 ? (
             <Text size="sm" c="dimmed">
-            {resultInfo.totalResults === 0 
+              {t('search.noResults', 'No results found')}
-              ? t('search.noResults', 'No results found')
-              : t('search.resultCount', '{{current}} of {{total}}', {
-                  current: resultInfo.currentIndex,
-                  total: resultInfo.totalResults
-                })
-            }
             </Text>
+          ) : (
+            <Group gap="xs" align="center">
+              <TextInput
+                size="xs"
+                value={jumpToValue}
+                onChange={(e) => setJumpToValue(e.currentTarget.value)}
+                onKeyDown={handleJumpToKeyDown}
+                onBlur={handleJumpToSubmit}
+                placeholder={resultInfo.currentIndex.toString()}
+                style={{ width: '3rem' }}
+                type="number"
+                min="1"
+                max={resultInfo.totalResults}
+              />
+              <Text size="sm" c="dimmed">
+                of {resultInfo.totalResults}
+              </Text>
+            </Group>
+          )}
           
           {resultInfo.totalResults > 0 && (
             <Group gap="xs">

frontend/src/components/viewer/SelectionAPIBridge.tsx

@@ -4,7 +4,7 @@ import { useSelectionCapability, SelectionRangeX } from '@embedpdf/plugin-select
 /**
  * Component that runs inside EmbedPDF context and exports selection controls globally
  */
-export function SelectionControlsExporter() {
+export function SelectionAPIBridge() {
   const { provides: selection } = useSelectionCapability();
   const [hasSelection, setHasSelection] = useState(false);
 
@@ -47,5 +47,5 @@ export function SelectionControlsExporter() {
     }
   }, [selection, hasSelection]);
 
-  return null; // This component doesn't render anything
+  return null;
 }

frontend/src/components/viewer/SpreadAPIBridge.tsx

@@ -4,7 +4,7 @@ import { useSpread, SpreadMode } from '@embedpdf/plugin-spread/react';
 /**
  * Component that runs inside EmbedPDF context and exports spread controls globally
  */
-export function SpreadControlsExporter() {
+export function SpreadAPIBridge() {
   const { provides: spread, spreadMode } = useSpread();
 
   useEffect(() => {
@@ -38,5 +38,5 @@ export function SpreadControlsExporter() {
     }
   }, [spread, spreadMode]);
 
-  return null; // This component doesn't render anything
+  return null;
 }

frontend/src/components/viewer/ThumbnailAPIBridge.tsx

@@ -4,11 +4,11 @@ import { useThumbnailCapability } from '@embedpdf/plugin-thumbnail/react';
 /**
  * Component that runs inside EmbedPDF context and exports thumbnail controls globally
  */
-export function ThumbnailControlsExporter() {
+export function ThumbnailAPIBridge() {
   const { provides: thumbnail } = useThumbnailCapability();
 
   useEffect(() => {
-    console.log('📄 ThumbnailControlsExporter useEffect:', { thumbnail: !!thumbnail });
+    console.log('📄 ThumbnailAPIBridge useEffect:', { thumbnail: !!thumbnail });
     if (thumbnail) {
       console.log('📄 Exporting thumbnail controls to window:', {
         availableMethods: Object.keys(thumbnail),
@@ -22,5 +22,5 @@ export function ThumbnailControlsExporter() {
     }
   }, [thumbnail]);
 
-  return null; // This component doesn't render anything
+  return null;
 }

frontend/src/components/viewer/ThumbnailSidebar.tsx

@@ -111,7 +111,7 @@ export function ThumbnailSidebar({ visible, onToggle, colorScheme }: ThumbnailSi
             right: 0,
             top: 0,
             bottom: 0,
-            width: '240px',
+            width: '15rem',
             backgroundColor: actualColorScheme === 'dark' ? '#1a1b1e' : '#f8f9fa',
             borderLeft: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}`,
             zIndex: 998,
@@ -174,8 +174,8 @@ export function ThumbnailSidebar({ visible, onToggle, colorScheme }: ThumbnailSi
                       />
                     ) : thumbnails[pageIndex] === 'error' ? (
                       <div style={{
-                        width: '180px',
+                        width: '11.5rem',
-                        height: '240px',
+                        height: '15rem',
                         backgroundColor: actualColorScheme === 'dark' ? '#2d1b1b' : '#ffebee',
                         border: `1px solid ${actualColorScheme === 'dark' ? '#5d3737' : '#ffcdd2'}`,
                         borderRadius: '4px',
@@ -189,8 +189,8 @@ export function ThumbnailSidebar({ visible, onToggle, colorScheme }: ThumbnailSi
                       </div>
                     ) : (
                       <div style={{
-                        width: '180px',
+                        width: '11.5rem',
-                        height: '240px',
+                        height: '15rem',
                         backgroundColor: actualColorScheme === 'dark' ? '#25262b' : '#f8f9fa',
                         border: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}`,
                         borderRadius: '4px',

frontend/src/components/viewer/ZoomAPIBridge.tsx

@@ -4,7 +4,7 @@ import { useZoom } from '@embedpdf/plugin-zoom/react';
 /**
  * Component that runs inside EmbedPDF context and exports zoom controls globally
  */
-export function ZoomControlsExporter() {
+export function ZoomAPIBridge() {
   const { provides: zoom, state: zoomState } = useZoom();
 
   useEffect(() => {
@@ -22,5 +22,5 @@ export function ZoomControlsExporter() {
     }
   }, [zoom, zoomState]);
 
-  return null; // This component doesn't render anything
+  return null;
 }

frontend/src/hooks/usePanState.ts

@@ -1,24 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * Hook to track EmbedPDF pan state for reactive UI components
- */
-export function usePanState() {
-  const [isPanning, setIsPanning] = useState(false);
-
-  useEffect(() => {
-    // Subscribe to pan state changes
-    const unsubscribe = (window as any).embedPdfPan?.onPanStateChange?.((newIsPanning: boolean) => {
-      setIsPanning(newIsPanning);
-    });
-
-    // Get initial state
-    if ((window as any).embedPdfPan?.isPanning !== undefined) {
-      setIsPanning((window as any).embedPdfPan.isPanning);
-    }
-
-    return unsubscribe || (() => {});
-  }, []);
-
-  return isPanning;
-}