Fix merge

frontend/package-lock.json

@@ -10,7 +10,7 @@
       "license": "SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
-        "@dnd-kit/core": "^6.3.1",        
+        "@dnd-kit/core": "^6.3.1",
         "@embedpdf/core": "^1.4.1",
         "@embedpdf/engines": "^1.4.1",
         "@embedpdf/plugin-annotation": "^1.4.1",

frontend/src/core/components/layout/Workbench.tsx

@@ -156,13 +156,11 @@ export default function Workbench() {
   return (
     <PageEditorProvider>
       <Box
-   className={`flex-1 h-full min-w-80 relative flex flex-col z-10 ${styles.workbenchScrollable}`}
-    data-tour="workbench"
-    style={{
-      backgroundColor: isRainbowMode ? undefined : 'var(--bg-background)',
-      transition: 'opacity 0.15s ease-in-out',
-      paddingTop: currentView === 'viewer' ? '0' : (activeFiles.length > 0 ? '3.5rem' : '0'),
-    }}
+        className={`flex-1 h-full min-w-80 relative flex flex-col z-10 ${styles.workbenchScrollable}`}
+        data-tour="workbench"
+        style={{
+          backgroundColor: isRainbowMode ? undefined : 'var(--bg-background)',
+        }}
       >
         {/* Top Controls */}
         {activeFiles.length > 0 && (
@@ -187,7 +185,7 @@ export default function Workbench() {
           className="flex-1 min-h-0 relative z-10 workbench-scrollable "
           style={{
             transition: 'opacity 0.15s ease-in-out',
-            paddingTop: 0,
+            paddingTop: currentView === 'viewer' ? '0' : (activeFiles.length > 0 ? '2rem' : '0'),
           }}
         >
           {renderMainContent()}
@@ -202,5 +200,6 @@ export default function Workbench() {
           accessibilityStatement={config?.accessibilityStatement}
         />
       </Box>
+    </PageEditorProvider>
   );
 }

frontend/src/core/components/pageEditor/DragDropGrid.tsx

@@ -1,13 +1,13 @@
 import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import { Box } from '@mantine/core';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { GRID_CONSTANTS } from './constants';
-import styles from './DragDropGrid.module.css';
+import { GRID_CONSTANTS } from '@app/components/pageEditor/constants';
+import styles from '@app/components/pageEditor/DragDropGrid.module.css';
 import {
   Z_INDEX_SELECTION_BOX,
   Z_INDEX_DROP_INDICATOR,
   Z_INDEX_DRAG_BADGE,
-} from '../../styles/zIndex';
+} from '@app/styles/zIndex';
 import {
   DndContext,
   DragEndEvent,
@@ -55,7 +55,7 @@ function resolveDropHint(
   }
 
   const items: ItemRect[] = Array.from(itemRefs.current.entries())
-    .filter(([itemId, element]): element is HTMLDivElement => !!element && itemId !== activeId)
+    .filter((entry): entry is [string, HTMLDivElement] => !!entry[1] && entry[0] !== activeId)
     .map(([itemId, element]) => ({
       id: itemId,
       rect: element.getBoundingClientRect(),

frontend/src/core/components/pageEditor/PageEditor.tsx

@@ -9,11 +9,11 @@ import { pdfExportService } from "@app/services/pdfExportService";
 import { documentManipulationService } from "@app/services/documentManipulationService";
 import { exportProcessedDocumentsToFiles } from "@app/services/pdfExportHelpers";
 // Thumbnail generation is now handled by individual PageThumbnail components
-import './PageEditor.module.css';
-import PageThumbnail from './PageThumbnail';
-import DragDropGrid from './DragDropGrid';
-import SkeletonLoader from '../shared/SkeletonLoader';
-import NavigationWarningModal from '../shared/NavigationWarningModal';
+import '@app/components/pageEditor/PageEditor.module.css';
+import PageThumbnail from '@app/components/pageEditor/PageThumbnail';
+import DragDropGrid from '@app/components/pageEditor/DragDropGrid';
+import SkeletonLoader from '@app/components/shared/SkeletonLoader';
+import NavigationWarningModal from '@app/components/shared/NavigationWarningModal';
 import { FileId } from "@app/types/file";
 
 import {
@@ -23,11 +23,11 @@ import {
   BulkRotateCommand,
   PageBreakCommand,
   UndoManager
-} from './commands/pageCommands';
-import { GRID_CONSTANTS } from './constants';
-import { useInitialPageDocument } from './hooks/useInitialPageDocument';
-import { usePageDocument } from './hooks/usePageDocument';
-import { usePageEditorState } from './hooks/usePageEditorState';
+} from '@app/components/pageEditor/commands/pageCommands';
+import { GRID_CONSTANTS } from '@app/components/pageEditor/constants';
+import { useInitialPageDocument } from '@app/components/pageEditor/hooks/useInitialPageDocument';
+import { usePageDocument } from '@app/components/pageEditor/hooks/usePageDocument';
+import { usePageEditorState } from '@app/components/pageEditor/hooks/usePageEditorState';
 import { parseSelection } from "@app/utils/bulkselection/parseSelection";
 import { usePageEditorRightRailButtons } from "@app/components/pageEditor/pageEditorRightRailButtons";
 import { useFileColorMap } from "@app/components/pageEditor/hooks/useFileColorMap";
@@ -345,27 +345,6 @@ const PageEditor = ({
     setHasUnsavedChanges(true);
   }, [setHasUnsavedChanges]);
 
-  // Watch for container size changes to update split line positions
-  useEffect(() => {
-    const container = gridContainerRef.current;
-    if (!container) return;
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        setContainerDimensions({
-          width: entry.contentRect.width,
-          height: entry.contentRect.height
-        });
-      }
-    });
-
-    resizeObserver.observe(container);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
 
   // Interface functions for parent component
   const displayDocument = editedDocument || initialDocument;

frontend/src/core/components/pageEditor/commands/pageCommands.ts

@@ -1,5 +1,5 @@
 import { FileId } from '@app/types/file';
-import { PDFDocument, PDFPage, PageBreakSettings, PageSize, PageOrientation } from '@app/types/pageEditor';
+import { PDFDocument, PDFPage, PageBreakSettings } from '@app/types/pageEditor';
 
 // V1-style DOM-first command system (replaces the old React state commands)
 export abstract class DOMCommand {

frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { usePageDocument } from './usePageDocument';
+import { usePageDocument } from '@app/components/pageEditor/hooks/usePageDocument';
 import { PDFDocument } from '@app/types/pageEditor';
 
 /**

frontend/src/core/components/shared/TopControls.tsx

@@ -58,7 +58,6 @@ const createViewOptions = (
         ) : (
           <VisibilityIcon fontSize="medium" />
         )}
-        <PrivateContent>{displayName}</PrivateContent>
       </div>
     ),
     value: "viewer",

frontend/src/core/hooks/useWheelZoom.ts

@@ -54,16 +54,17 @@ export function useWheelZoom({
 
     let accumulator = 0;
 
-    const handleWheel = (event: WheelEvent) => {
-      const hasModifier = event.ctrlKey || event.metaKey;
+    const handleWheel = (event: Event) => {
+      const wheelEvent = event as WheelEvent;
+      const hasModifier = wheelEvent.ctrlKey || wheelEvent.metaKey;
       if (requireModifierKey && !hasModifier) {
         return;
       }
 
-      event.preventDefault();
-      event.stopPropagation();
+      wheelEvent.preventDefault();
+      wheelEvent.stopPropagation();
 
-      accumulator += event.deltaY;
+      accumulator += wheelEvent.deltaY;
 
       if (accumulator <= -threshold) {
         onZoomIn();