Stirling 2.0 (#3928)

# Description of Changes

<!--

File context for managing files between tools and views
Optimisation for large files
Updated Split to work with new file system and match Matts stepped
design closer

-->

---

## 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)

### 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.

---------

Co-authored-by: Anthony Stirling <[email protected]>

frontend/src/components/pageEditor/DragDropGrid.tsx

@@ -9,21 +9,21 @@ interface DragDropItem {
 
 interface DragDropGridProps<T extends DragDropItem> {
   items: T[];
-  selectedItems: string[];
+  selectedItems: number[];
   selectionMode: boolean;
   isAnimating: boolean;
-  onDragStart: (itemId: string) => void;
+  onDragStart: (pageNumber: number) => void;
   onDragEnd: () => void;
   onDragOver: (e: React.DragEvent) => void;
-  onDragEnter: (itemId: string) => void;
+  onDragEnter: (pageNumber: number) => void;
   onDragLeave: () => void;
-  onDrop: (e: React.DragEvent, targetId: string | 'end') => void;
+  onDrop: (e: React.DragEvent, targetPageNumber: number | 'end') => void;
   onEndZoneDragEnter: () => void;
   renderItem: (item: T, index: number, refs: React.MutableRefObject<Map<string, HTMLDivElement>>) => React.ReactNode;
   renderSplitMarker?: (item: T, index: number) => React.ReactNode;
-  draggedItem: string | null;
-  dropTarget: string | null;
-  multiItemDrag: {itemIds: string[], count: number} | null;
+  draggedItem: number | null;
+  dropTarget: number | null;
+  multiItemDrag: {pageNumbers: number[], count: number} | null;
   dragPosition: {x: number, y: number} | null;
 }
 
@@ -77,7 +77,13 @@ const DragDropGrid = <T extends DragDropItem>({
           flexWrap: 'wrap',
           gap: '1.5rem',
           justifyContent: 'flex-start',
-          paddingBottom: '100px'
+          paddingBottom: '100px',
+          // Performance optimizations for smooth scrolling
+          willChange: 'scroll-position',
+          transform: 'translateZ(0)', // Force hardware acceleration
+          backfaceVisibility: 'hidden',
+          // Use containment for better rendering performance
+          contain: 'layout style paint',
         }}
       >
         {items.map((item, index) => (