# Sender PDF Toolbar Migration Plan

## Goal
Design and integrate a reusable toolbar component for `SenderPdfImageEditor` that matches the provided visual style and supports:
- page navigation
- zoom in/out (including overriding default mouse-based zoom behavior inside editor)
- PDF download as original bytes (not image)
- print output

Critical rule: existing signature add/remove/drag-drop behavior must remain fully functional.

## Scope and Files
Planned touch points:
1. `EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor` (new)
2. `EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditorToolbar.razor.cs` (optional, if code-behind needed)
3. `EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/PdfEditor/SenderPdfImageEditor.razor` (compose toolbar + editor integration)
4. `EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderEditorPage.razor` (pass PDF bytes/metadata/events to editor)
5. `EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css` (toolbar visual styles + responsive)
6. `EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/envelope-editor.js` (helper functions: scroll-to-page, wheel handling, download, print if needed)

## Non-Regression Strategy
- Keep all existing signature event paths unchanged (`EditorClick`, `MoveField`, `RemoveField`).
- Introduce toolbar as a separate component with explicit parameters and callbacks.
- Add features incrementally; no behavior switch all at once.
- After each stage: run manual black-box checks focused on signatures and new feature.
- If any regression appears: rollback only the stage-local changes.

## Stage Plan

### Stage 1 - Visual Toolbar Skeleton (all buttons disabled)
- Build standalone `SenderPdfImageEditorToolbar` component.
- Recreate layout from reference image (three grouped blocks: page nav, zoom, print/download).
- Render in `SenderPdfImageEditor` above page canvas area.
- All controls disabled; only visual state and responsive behavior implemented.
- No functional binding yet.

Acceptance:
- Toolbar appears and matches structure/spacing/icons closely.
- Signature add/remove/drag still works exactly as before.

### Stage 2 - Page Navigation
- Add current page/total page model and callbacks.
- Implement first/prev/next/last navigation.
- Implement page number selector UI behavior.
- Navigate by scrolling/focusing target page container (`data-editor-page`) without changing signature logic.

Acceptance:
- Navigation controls move to correct page boundaries.
- Signature interactions continue to work on all pages.

### Stage 3 - Zoom In/Out + Mouse Override
- Introduce zoom state (e.g., 50%-300%, step-based).
- Wire `-` / `+` and percent display.
- Apply zoom in a way that preserves coordinate normalization for signature placement/drag.
- Override wheel behavior inside editor container (`@onwheel:preventDefault` + JS helper where needed).

Acceptance:
- Zoom buttons work consistently.
- Mouse wheel behavior follows custom zoom logic.
- Signature placement and drag coordinates remain correct after zoom changes.

### Stage 4 - Download Original PDF Bytes
- Expose download action from toolbar.
- Download source must be original PDF bytes (same content as uploaded/loaded document).
- Suggested filename from current editor state.

Acceptance:
- Downloaded file opens as valid PDF.
- Not an image export; true PDF bytes.

### Stage 5 - Print Output
- Add print action from toolbar.
- Print original PDF content using browser print flow (hidden iframe/object URL approach).
- Ensure action is isolated and does not mutate editor state.

Acceptance:
- Print dialog opens with correct document.
- Existing editor/signature interactions remain intact before and after print.

## Approval Gates
- Stop after each stage.
- Share what changed + exact black-box checklist.
- Wait for explicit approval before moving to next stage.