Feature/v2/selected pageeditor rework

[reecebrowne]

Description of Changes

---

Checklist

General

• I have read the Contribution Guidelines
• I have read the Stirling-PDF Developer Guide (if applicable)
• I have read the How to add new languages to Stirling-PDF (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 (if functionality has heavily changed)
• I have read the section 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 for more details.

[Copilot]

Pull Request Overview

This PR implements a comprehensive page editor enhancement with file-level organization, improved drag-and-drop functionality, and visual feedback systems. The key changes include:

• Migration from Atlaskit pragmatic-drag-and-drop to dnd-kit for improved drag-and-drop UX
• Introduction of PageEditorContext for coordinating file and page reordering
• File color coding system (20 distinct colors) for visual organization
• Box selection for batch page operations
• Zoom controls with wheel/keyboard support
• File dropdown with reorderable file list in top controls

Reviewed Changes

Copilot reviewed 29 out of 31 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
frontend/package.json	Added @dnd-kit/core dependency for drag-and-drop functionality
frontend/src/core/contexts/PageEditorContext.tsx	New context managing page editor state, file ordering, and file selection
frontend/src/core/hooks/useWheelZoom.ts	New shared hook for wheel-based zoom with accumulator pattern
frontend/src/core/components/pageEditor/hooks/usePageDocument.ts	Enhanced to support placeholders for deselected files and insertion positioning
frontend/src/core/components/pageEditor/PageEditor.tsx	Major refactor with zoom support, file color coding, and improved state management
frontend/src/core/components/pageEditor/DragDropGrid.tsx	Complete rewrite using dnd-kit with box selection and improved drop indicators
frontend/src/core/components/shared/TopControls.tsx	Added PageEditorFileDropdown for file management in toolbar
frontend/src/core/components/shared/PageEditorFileDropdown.tsx	New dropdown component for file selection and reordering
frontend/src/core/types/pageEditor.ts	Added isPlaceholder flag for deselected file placeholders
frontend/src/core/styles/zIndex.ts	Added z-index constants for page editor UI layers
frontend/src/core/components/pageEditor/commands/pageCommands.ts	Added PageBreakSettings interface and onReorderComplete callback

Files not reviewed (1)

• frontend/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

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

• Using React.useRef and React.useEffect instead of the imported hooks. For consistency with the rest of the file where these hooks are imported and used directly, use useRef and useEffect here.

import { useState, useCallback, useRef, useEffect, useMemo } from "react";

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The isPlaceholder field is added to the PDFPage interface but pageBreakSettings is also referenced in pageCommands.ts line 475 yet is not defined in this interface. Consider adding pageBreakSettings?: PageBreakSettings; to the PDFPage interface for type consistency.

[Copilot]

A UTF-8 BOM (Byte Order Mark) character is present at the start of the file. This is generally unnecessary for UTF-8 files and can cause issues with some tools. Remove the BOM character.

Suggested change

	/**
	/**

[Copilot]

Using React.useEffect instead of the imported useEffect. For consistency with the rest of the file where useEffect is imported and used directly, use useEffect here.

Suggested change

	React.useEffect(() => {
	useEffect(() => {

[Copilot]

Using React.useEffect instead of the imported useEffect. For consistency with the rest of the file where useEffect is imported and used directly, use useEffect here.

Suggested change

	React.useEffect(() => {
	useEffect(() => {

[Copilot]

Using React.useRef and React.useEffect instead of importing them from 'react'. For consistency with line 1 where useRef and useEffect are not explicitly imported (only useState, useCallback, useMemo are), consider importing and using these hooks directly.

[Copilot]

The check related instanceof Node is redundant since related is already typed as Node | null and the preceding related && check ensures it's truthy. The instanceof Node check can be removed for cleaner code.

Suggested change

	if (related && related instanceof Node && tooltipRef.current && tooltipRef.current.contains(related)) {
	if (related && tooltipRef.current && tooltipRef.current.contains(related)) {

[Copilot]

The initial value of lineLeft is unused, since it is always overwritten.

Suggested change

	let lineLeft = currentRect.right;
	let lineLeft;

[jbrunton96]

This is just a quick scan over to find import issues, not a proper review

[stirlingbot]

✅ Frontend License Check Passed

All frontend licenses have been validated and no compatibility warnings were detected.

The frontend license report has been updated successfully.

[stirlingbot]

🚀 V2 Auto-Deployment Complete!

Your V2 PR with the new frontend/backend split architecture has been deployed!

🔗 Direct Test URL (non-SSL) http://185.252.234.121:4756

🔐 Secure HTTPS URL: https://4756.ssl.stirlingpdf.cloud

This deployment will be automatically cleaned up when the PR is closed.

🔄 Auto-deployed because PR title or branch name contains V2/version2/React keywords.