Preserve scroll position during PDF page rendering

Added functionality to maintain the scroll position and viewport
center of the `.pdf-frame` container during PDF page rendering.
This ensures the user's view remains centered on the same content
after re-rendering, even if the canvas dimensions change.

Implemented logic to store the scroll position and viewport center
before rendering and restore them afterward using scaling factors
calculated from the canvas's old and new dimensions.

COPILOT_CONTEXT_EN.md

@@ -25,8 +25,11 @@ A digital document signing system. Senders upload PDFs and place signature annot
 
 | File | Purpose |
 |---|---|
-| `ReceiverUI/Pages/ReportViewer.razor` | Main receiver page. All signing logic. |
+| `ReceiverUI/Pages/EnvelopeViewer.razor` | **NEW** PDF.js-based viewer (`/envelope/{key}`). Replaces ReportViewer.razor. Simple read-only PDF viewing with zoom/navigation. |
+| `ReceiverUI/Pages/ReportViewer.razor` | **LEGACY** DevExpress-based signing page (`/receiver/{key}`). Still used for signature workflow. Will be deprecated. |
+| `ReceiverUI/wwwroot/js/pdf-viewer.js` | **NEW** PDF.js wrapper: rendering, zoom, pagination, mouse wheel control. |
 | `ReceiverUI/wwwroot/js/receiver-signature.js` | JS: checkbox overlay, signature pad (draw/type/image). |
+| `ReceiverUI/wwwroot/css/envelope-viewer.css` | **NEW** Styles for EnvelopeViewer.razor (external CSS, not inline). |
 | `ReceiverUI/wwwroot/fake-data/annotations.json` | Dev-mode fake annotations (YARP proxy target). |
 | `ReceiverUI/Models/AnnotationDto.cs` | Annotation position model. All properties non-nullable. |
 | `ReceiverUI/Services/AnnotationService.cs` | Fetches `List<AnnotationDto>` from API or fake-data. |
@@ -55,7 +58,109 @@ Conversions:
 
 ---
 
-## ReceiverUI Signing Flow (ReportViewer.razor)
+## EnvelopeViewer (NEW) — PDF.js Read-Only Viewer
+
+**Route:** `/envelope/{EnvelopeKey}`  
+**Purpose:** Simple, modern PDF viewing without signing functionality.  
+**Technology:** PDF.js 3.11.174 + custom JavaScript wrapper
+
+### Architecture
+
+**Blazor Component (`EnvelopeViewer.razor`):**
+- Fetches PDF via `DocumentService.GetDocumentAsync(EnvelopeKey)`
+- Converts to base64 data URL: `data:application/pdf;base64,{base64}`
+- Initializes PDF.js viewer via JSInterop with `DotNetObjectReference` for callbacks
+- Displays controls: Zoom In/Out, Page Navigation, Zoom percentage
+- CSS externalized to `envelope-viewer.css`
+
+**JavaScript (`pdf-viewer.js`):**
+```javascript
+window.pdfViewer = {
+    pdfDoc, canvas, ctx, scale, currentRenderTask,
+    dotNetReference, wheelEventAttached,
+    
+    initialize(canvasId, pdfDataUrl, dotNetRef),
+    renderPage(num),
+    attachWheelEvent(),  // Global Ctrl+Wheel zoom
+    zoomIn(), zoomOut(),
+    nextPage(), previousPage(),
+    dispose()
+}
+```
+
+**CSS (`envelope-viewer.css`):**
+- `.envelope-viewer-layout`: Full-height gradient background
+- `.envelope-action-bar`: Top bar with logo, title, controls (sticky)
+- `.pdf-frame`: Fixed-size white container (`calc(100vh - 200px)` × 90% width, max 1200px)
+- `.pdf-canvas`: `display: inline-block`, unlimited zoom, scrollable when exceeds frame
+- Modern glassmorphism design with gradients and shadows
+
+### Features
+
+1. **Unlimited Zoom:**
+   - Canvas size not restricted by `max-width`
+   - Frame stays fixed, scroll bars appear automatically
+   - `text-align: center` for small sizes, full scroll for zoomed views
+
+2. **Global Mouse Wheel Zoom:**
+   - Event listener on `document.body` (works anywhere on page)
+   - `Ctrl + Mouse Wheel` triggers `zoomIn()`/`zoomOut()`
+   - Calls `dotNetReference.invokeMethodAsync('OnZoomChanged', scale)` to update Blazor UI
+   - `{ passive: false }` to enable `preventDefault()`
+
+3. **Render Task Cancellation:**
+   - Stores `currentRenderTask` to cancel previous render if new one starts
+   - Catches `RenderingCancelledException` to avoid console errors
+   - Queue system (`pageNumPending`) for rapid page changes
+
+4. **Responsive Design:**
+   - Desktop: 90% width, 1200px max
+   - Mobile: 95% width, adjusted heights
+   - Adaptive padding and font sizes
+
+### Flow
+
+1. **Component Load:**
+   ```csharp
+   OnInitializedAsync():
+     - Fetch PDF bytes
+     - Convert to base64 data URL
+     - Set _isLoading = false
+   
+   OnAfterRenderAsync():
+     - Create DotNetObjectReference
+     - JSRuntime.InvokeAsync("pdfViewer.initialize", canvasId, pdfDataUrl, dotNetRef)
+     - Update _totalPages, _currentPage, _pdfLoaded
+   ```
+
+2. **User Interaction:**
+   - Button clicks ? `ZoomIn()`/`ZoomOut()` ? `JSRuntime.InvokeVoidAsync("pdfViewer.zoomIn")`
+   - Ctrl+Wheel ? JS `attachWheelEvent()` ? `dotNetRef.invokeMethodAsync('OnZoomChanged')`
+   - Page buttons ? `NextPage()`/`PreviousPage()` ? `JSRuntime.InvokeAsync("pdfViewer.nextPage")`
+
+3. **Cleanup:**
+   ```csharp
+   DisposeAsync():
+     - JSRuntime.InvokeVoidAsync("pdfViewer.dispose")
+     - _dotNetRef?.Dispose()
+   ```
+
+### Key Differences from ReportViewer
+
+| Feature | EnvelopeViewer (NEW) | ReportViewer (LEGACY) |
+|---------|----------------------|------------------------|
+| Technology | PDF.js + Canvas | DevExpress XtraReports |
+| Route | `/envelope/{key}` | `/receiver/{key}` |
+| Purpose | Read-only viewing | Signature workflow |
+| Dependencies | PDF.js CDN | DevExpress NuGet packages |
+| Zoom | Unlimited, smooth | Report viewer default |
+| Mouse Wheel | Custom Ctrl+Wheel | Browser default |
+| File Size | Minimal (JS + CSS) | Heavy (DX libs) |
+| Maintenance | Simple, standard web | Complex, vendor-specific |
+
+---
+
+## ReceiverUI Signing Flow (ReportViewer.razor — LEGACY)
 
 ### On Load (`OnInitializedAsync`)
 1. `AuthService.CheckEnvelopeAccessAsync` ? redirect to login if unauthorized
@@ -137,12 +242,16 @@ return report;
 
 | Package | Version | Purpose |
 |---|---|---|
-| `DevExpress.Blazor.Reporting.Viewer` | 25.2.3 | DxReportViewer component |
+| `DevExpress.Blazor.Reporting.Viewer` | 25.2.3 | DxReportViewer (LEGACY, used in ReportViewer.razor) |
-| `DevExpress.Blazor.PdfViewer` | 25.2.3 | PDF viewer |
+| `DevExpress.Blazor.PdfViewer` | 25.2.3 | PDF viewer (not used in EnvelopeViewer) |
 | `DevExpress.Drawing.Skia` | 25.2.3 | Drawing backend |
 | `itext` | 8.0.5 | PDF stamping (iText7) |
 | `SkiaSharp.*` | 3.119.1 | WASM native rendering |
 
+**External CDN (EnvelopeViewer):**
+- PDF.js 3.11.174 (via `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js`)
+- PDF.js Worker (`pdf.worker.min.js`)
+
 ---
 
 ## Mistakes History — Do NOT Repeat
@@ -155,6 +264,9 @@ return report;
 | `ctrl.Report?.PrintingSystem` | `PrintingSystem` not on `XtraReportBase` in WASM |
 | Adding stamp endpoint to `DocumentController` | Not needed; stamping is done client-side in ReceiverUI |
 | iText7 via API (server-side) | Unnecessary; iText7 runs fine in WASM directly |
+| **PDF.js: `display: flex` on `.pdf-frame`** | **Prevents left-edge scroll when canvas exceeds container** |
+| **PDF.js: `max-width: 100%` on canvas** | **Limits zoom; user expects unlimited zoom capability** |
+| **Mouse wheel on `.pdf-frame` only** | **Only works when mouse over PDF; should work anywhere on page** |
 
 ---
 
@@ -180,3 +292,10 @@ Our use case is **visual/image stamping** at specific page coordinates
 | 10 | — | Investigated DevExpress article — not applicable to our case |
 | 10 | — | Added iText7 to ReceiverUI; implemented `StampSignaturesOnPdf` — ? deterministic coordinates, no page count side effects |
 | 10 | — | Split COPILOT_CONTEXT.md into COPILOT_CONTEXT_EN.md and COPILOT_CONTEXT_TR.md |
+| **11** | **2025-01-XX** | **Created EnvelopeViewer.razor (`/envelope/{key}`) with PDF.js 3.11.174** |
+| **11** | **2025-01-XX** | **Implemented `pdf-viewer.js`: canvas rendering, zoom, pagination, render task cancellation** |
+| **11** | **2025-01-XX** | **Externalized CSS to `envelope-viewer.css`: modern glassmorphism design** |
+| **11** | **2025-01-XX** | **Fixed scroll issues: removed `display: flex`, used `text-align: center` + `inline-block`** |
+| **11** | **2025-01-XX** | **Removed canvas `max-width` restriction for unlimited zoom** |
+| **11** | **2025-01-XX** | **Added global mouse wheel zoom: `Ctrl+Wheel` on `document.body`, JSInterop callback to Blazor** |
+| **11** | **2025-01-XX** | **Updated COPILOT_CONTEXT_EN.md: EnvelopeViewer replaces ReportViewer for read-only viewing** |

EnvelopeGenerator.API/yarp.json

@@ -44,9 +44,21 @@
           "Methods": [ "GET", "HEAD" ]
         },
         "Transforms": [
-          { "ResponseHeader": "Cache-Control", "Set": "no-cache, no-store, must-revalidate", "When": "Always" },
+          {
-          { "ResponseHeader": "Pragma", "Set": "no-cache", "When": "Always" },
+            "ResponseHeader": "Cache-Control",
-          { "ResponseHeader": "Expires", "Set": "0", "When": "Always" }
+            "Set": "no-cache, no-store, must-revalidate",
+            "When": "Always"
+          },
+          {
+            "ResponseHeader": "Pragma",
+            "Set": "no-cache",
+            "When": "Always"
+          },
+          {
+            "ResponseHeader": "Expires",
+            "Set": "0",
+            "When": "Always"
+          }
         ]
       },
       "receiver-ui-annotation-fake": {
@@ -78,7 +90,10 @@
         },
         "Transforms": [
           { "PathPattern": "/api/auth/envelope-receiver/{key}" },
-          { "QueryValueParameter": "cookie", "Set": "true" }
+          {
+            "QueryValueParameter": "cookie",
+            "Set": "true"
+          }
         ]
       }
     },

EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor

@@ -0,0 +1,208 @@
+@page "/envelope/{EnvelopeKey}"
+@using EnvelopeGenerator.ReceiverUI.Services
+@using Microsoft.Extensions.Options
+@using EnvelopeGenerator.ReceiverUI.Options
+@using Microsoft.JSInterop
+@inject DocumentService DocumentService
+@inject NavigationManager Navigation
+@inject IOptions<ApiOptions> AppOptions
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+<link href="css/envelope-viewer.css" rel="stylesheet" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+<script src="js/pdf-viewer.js"></script>
+
+<div class="envelope-viewer-layout">
+    <div class="envelope-action-bar">
+        <div class="envelope-action-bar__inner">
+            <div class="d-flex align-items-center gap-3">
+                <div class="envelope-logo">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
+                    </svg>
+                </div>
+                <div>
+                    <div class="envelope-title">Dokumentenansicht</div>
+                    <div class="envelope-key">ID: @EnvelopeKey</div>
+                </div>
+            </div>
+            @if (_pdfLoaded) {
+                <div class="d-flex align-items-center gap-2 ms-auto">
+                    <div class="pdf-controls">
+                        <button class="btn btn-sm btn-outline-primary" @onclick="ZoomOut" title="Zoom Out">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M6.5 1A5.5 5.5 0 0 0 1 6.5v3A5.5 5.5 0 0 0 6.5 15h3a5.5 5.5 0 0 0 5.5-5.5v-3A5.5 5.5 0 0 0 9.5 1h-3zM4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
+                            </svg>
+                        </button>
+                        <span class="zoom-level">@(_currentZoom)%</span>
+                        <button class="btn btn-sm btn-outline-primary" @onclick="ZoomIn" title="Zoom In">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M6.5 1A5.5 5.5 0 0 0 1 6.5v3A5.5 5.5 0 0 0 6.5 15h3a5.5 5.5 0 0 0 5.5-5.5v-3A5.5 5.5 0 0 0 9.5 1h-3zM8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="pdf-navigation">
+                        <button class="btn btn-sm btn-primary" @onclick="PreviousPage" disabled="@(_currentPage <= 1)">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+                            </svg>
+                        </button>
+                        <span class="page-info">Seite @_currentPage / @_totalPages</span>
+                        <button class="btn btn-sm btn-primary" @onclick="NextPage" disabled="@(_currentPage >= _totalPages)">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            }
+        </div>
+    </div>
+
+    <div class="envelope-content">
+        @if (_isLoading) {
+            <div class="d-flex justify-content-center align-items-center h-100">
+                <div class="text-center">
+                    <div class="spinner-border text-white mb-3" style="width: 3.5rem; height: 3.5rem;" role="status">
+                        <span class="visually-hidden">L<>dt...</span>
+                    </div>
+                    <p class="text-white fw-semibold">Dokument wird geladen...</p>
+                </div>
+            </div>
+        } else if (_errorMessage is not null) {
+            <div class="error-container">
+                <div class="alert alert-danger shadow-lg">
+                    <div class="d-flex align-items-start">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="me-3 flex-shrink-0" viewBox="0 0 16 16">
+                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                            <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
+                        </svg>
+                        <div>
+                            <h5 class="mb-2">Fehler beim Laden des Dokuments</h5>
+                            <p class="mb-0">@_errorMessage</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        } else if (!string.IsNullOrWhiteSpace(_pdfDataUrl)) {
+            <div class="pdf-viewer-container">
+                <div class="pdf-frame">
+                    <canvas id="pdf-canvas" class="pdf-canvas"></canvas>
+                </div>
+            </div>
+        } else {
+            <div class="error-container">
+                <div class="alert alert-warning shadow-lg">
+                    <div class="d-flex align-items-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="me-3" viewBox="0 0 16 16">
+                            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+                        </svg>
+                        <span class="fs-5">Dokument konnte nicht geladen werden.</span>
+                    </div>
+                </div>
+            </div>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter] public string? EnvelopeKey { get; set; }
+
+    bool _isLoading = true;
+    string? _errorMessage;
+    string? _pdfDataUrl;
+    bool _pdfLoaded = false;
+    int _currentPage = 1;
+    int _totalPages = 0;
+    int _currentZoom = 150;
+    DotNetObjectReference<EnvelopeViewer>? _dotNetRef;
+
+    protected override async Task OnInitializedAsync() {
+        if (string.IsNullOrWhiteSpace(EnvelopeKey)) {
+            _errorMessage = "Envelope-Schlüssel fehlt.";
+            _isLoading = false;
+            return;
+        }
+
+        try {
+            var (pdfBytes, statusCode) = await DocumentService.GetDocumentAsync(EnvelopeKey);
+
+            if (pdfBytes is { Length: > 0 }) {
+                var base64 = Convert.ToBase64String(pdfBytes);
+                _pdfDataUrl = $"data:application/pdf;base64,{base64}";
+            } else {
+                _errorMessage = $"Dokument konnte nicht geladen werden. HTTP Status: {statusCode}";
+            }
+        } catch (Exception ex) {
+            _errorMessage = $"Fehler: {ex.Message}";
+        }
+
+        _isLoading = false;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender) {
+        if (!_pdfLoaded && !string.IsNullOrWhiteSpace(_pdfDataUrl)) {
+            await Task.Delay(500);
+            
+            try {
+                _dotNetRef = DotNetObjectReference.Create(this);
+                var success = await JSRuntime.InvokeAsync<bool>("pdfViewer.initialize", "pdf-canvas", _pdfDataUrl, _dotNetRef);
+                
+                if (success) {
+                    _pdfLoaded = true;
+                    _totalPages = await JSRuntime.InvokeAsync<int>("pdfViewer.getTotalPages");
+                    _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
+                    await InvokeAsync(StateHasChanged);
+                }
+            } catch (Exception ex) {
+                _errorMessage = $"PDF.js Fehler: {ex.Message}";
+                await InvokeAsync(StateHasChanged);
+            }
+        }
+    }
+
+    [JSInvokable]
+    public async Task OnZoomChanged(double scale)
+    {
+        _currentZoom = (int)(scale * 100);
+        await InvokeAsync(StateHasChanged);
+    }
+
+    async Task NextPage() {
+        if (await JSRuntime.InvokeAsync<bool>("pdfViewer.nextPage")) {
+            _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
+        }
+    }
+
+    async Task PreviousPage() {
+        if (await JSRuntime.InvokeAsync<bool>("pdfViewer.previousPage")) {
+            _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
+        }
+    }
+
+    async Task ZoomIn() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.zoomIn");
+        var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
+        _currentZoom = (int)(scale * 100);
+    }
+
+    async Task ZoomOut() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.zoomOut");
+        var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
+        _currentZoom = (int)(scale * 100);
+    }
+
+    public async ValueTask DisposeAsync() {
+        if (_pdfLoaded) {
+            try {
+                await JSRuntime.InvokeVoidAsync("pdfViewer.dispose");
+            } catch {
+                // Ignore errors during disposal
+            }
+        }
+        _dotNetRef?.Dispose();
+    }
+}

EnvelopeGenerator.ReceiverUI/wwwroot/appsettings.json

@@ -1,6 +1,6 @@
 {
   "Api": {
     "BaseUrl": "",
-    "ForceToUseFakeDocument": true
+    "ForceToUseFakeDocument": false
   }
 }

EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css

@@ -0,0 +1,176 @@
+.envelope-viewer-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
+}
+
+.envelope-action-bar {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-bottom: 3px solid rgba(126, 34, 206, 0.3);
+    padding: 1.25rem 2rem;
+    flex-shrink: 0;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.envelope-action-bar__inner {
+    max-width: 1600px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
+.envelope-logo svg {
+    filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3));
+    color: #7e22ce;
+}
+
+.envelope-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: #1e293b;
+    letter-spacing: -0.025em;
+}
+
+.envelope-key {
+    font-size: 0.8125rem;
+    color: #64748b;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    font-weight: 500;
+    margin-top: 0.25rem;
+}
+
+.pdf-controls, .pdf-navigation {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.zoom-level, .page-info {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #475569;
+    min-width: 60px;
+    text-align: center;
+}
+
+.envelope-content {
+    flex: 1;
+    min-height: 0;
+    padding: 1.5rem;
+    position: relative;
+    overflow: auto;
+}
+
+.pdf-viewer-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.pdf-frame {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 
+        0 25px 50px -12px rgba(0, 0, 0, 0.25),
+        0 0 0 1px rgba(255, 255, 255, 0.1);
+    overflow: auto;
+    position: relative;
+    padding: 2rem;
+    height: calc(100vh - 200px);
+    width: 90%;
+    max-width: 1200px;
+    text-align: center;
+}
+
+.pdf-frame::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%);
+    z-index: 1;
+    border-radius: 16px 16px 0 0;
+}
+
+.pdf-canvas {
+    display: inline-block;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    vertical-align: top;
+}
+
+.error-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 2rem;
+}
+
+.alert {
+    border-radius: 12px;
+    border: none;
+    padding: 2rem;
+    max-width: 600px;
+}
+
+.alert-danger {
+    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
+    color: #be123c;
+    border-left: 4px solid #e11d48;
+}
+
+.alert-warning {
+    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+    color: #92400e;
+    border-left: 4px solid #f59e0b;
+}
+
+.spinner-border {
+    border-width: 0.35rem;
+}
+
+@media (max-width: 768px) {
+    .envelope-content {
+        padding: 0.75rem;
+    }
+
+    .pdf-frame {
+        border-radius: 12px;
+        padding: 1rem;
+        height: calc(100vh - 180px);
+        width: 95%;
+    }
+
+    .envelope-action-bar {
+        padding: 1rem 1.25rem;
+    }
+
+    .envelope-action-bar__inner {
+        flex-wrap: wrap;
+    }
+
+    .envelope-title {
+        font-size: 1rem;
+    }
+
+    .envelope-key {
+        font-size: 0.75rem;
+    }
+
+    .envelope-logo svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    .alert {
+        padding: 1.5rem;
+    }
+}

EnvelopeGenerator.ReceiverUI/wwwroot/js/pdf-viewer.js

@@ -0,0 +1,257 @@
+// PDF.js Viewer for Blazor WASM
+window.pdfViewer = {
+    pdfDoc: null,
+    pageNum: 1,
+    pageRendering: false,
+    pageNumPending: null,
+    scale: 1.5,
+    canvas: null,
+    ctx: null,
+    totalPages: 0,
+    currentRenderTask: null,
+    dotNetReference: null,
+    wheelEventAttached: false,
+
+    async initialize(canvasId, pdfDataUrl, dotNetRef) {
+        try {
+            console.log('PDF.js initialization started for canvas:', canvasId);
+
+            // Store .NET reference for callbacks
+            this.dotNetReference = dotNetRef;
+
+            // Wait for PDF.js to load
+            if (typeof window.pdfjsLib === 'undefined') {
+                console.error('PDF.js library not loaded, waiting...');
+                await this.waitForPdfJs();
+            }
+
+            const pdfjsLib = window.pdfjsLib;
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+
+            this.canvas = document.getElementById(canvasId);
+            if (!this.canvas) {
+                console.error('Canvas element not found:', canvasId);
+                return false;
+            }
+
+            console.log('Canvas element found, loading PDF...');
+
+            this.ctx = this.canvas.getContext('2d');
+
+            // Attach mouse wheel event listener
+            this.attachWheelEvent();
+
+            // Load PDF from data URL
+            const uint8Array = this.base64ToUint8Array(pdfDataUrl);
+            console.log('PDF data converted to Uint8Array, size:', uint8Array.length);
+
+            const loadingTask = pdfjsLib.getDocument({ data: uint8Array });
+            this.pdfDoc = await loadingTask.promise;
+            this.totalPages = this.pdfDoc.numPages;
+
+            console.log('PDF loaded successfully, total pages:', this.totalPages);
+
+            // Render first page
+            await this.renderPage(this.pageNum);
+            return true;
+        } catch (error) {
+            console.error('Error initializing PDF viewer:', error);
+            return false;
+        }
+    },
+
+    attachWheelEvent() {
+        if (this.wheelEventAttached) return;
+        
+        // Attach to the entire document body for global zoom control
+        document.body.addEventListener('wheel', (e) => {
+            // Check if Ctrl key is pressed (zoom gesture)
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+                
+                if (e.deltaY < 0) {
+                    // Scroll up = Zoom In
+                    this.zoomIn();
+                    if (this.dotNetReference) {
+                        this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
+                    }
+                } else {
+                    // Scroll down = Zoom Out
+                    this.zoomOut();
+                    if (this.dotNetReference) {
+                        this.dotNetReference.invokeMethodAsync('OnZoomChanged', this.scale);
+                    }
+                }
+            }
+        }, { passive: false });
+
+        this.wheelEventAttached = true;
+        console.log('Wheel event listener attached to document body');
+    },
+
+    async waitForPdfJs() {
+        for (let i = 0; i < 50; i++) {
+            if (typeof window.pdfjsLib !== 'undefined') {
+                console.log('PDF.js loaded after', i * 100, 'ms');
+                return;
+            }
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        throw new Error('PDF.js failed to load after 5 seconds');
+    },
+
+    base64ToUint8Array(base64) {
+        // Remove data URL prefix if present
+        const base64String = base64.includes(',') ? base64.split(',')[1] : base64;
+        const raw = atob(base64String);
+        const uint8Array = new Uint8Array(raw.length);
+        for (let i = 0; i < raw.length; i++) {
+            uint8Array[i] = raw.charCodeAt(i);
+        }
+        return uint8Array;
+    },
+
+    async renderPage(num) {
+        this.pageRendering = true;
+
+        try {
+            // Get scroll container
+            const container = this.canvas.closest('.pdf-frame');
+            
+            // Store scroll position and viewport center BEFORE rendering
+            let scrollLeft = 0, scrollTop = 0;
+            let centerX = 0, centerY = 0;
+            let oldWidth = this.canvas.width;
+            let oldHeight = this.canvas.height;
+            
+            if (container) {
+                scrollLeft = container.scrollLeft;
+                scrollTop = container.scrollTop;
+                centerX = scrollLeft + container.clientWidth / 2;
+                centerY = scrollTop + container.clientHeight / 2;
+            }
+
+            const page = await this.pdfDoc.getPage(num);
+            const viewport = page.getViewport({ scale: this.scale });
+
+            console.log('Rendering page:', num, 'Viewport:', viewport.width, 'x', viewport.height);
+
+            this.canvas.height = viewport.height;
+            this.canvas.width = viewport.width;
+
+            const renderContext = {
+                canvasContext: this.ctx,
+                viewport: viewport
+            };
+
+            if (this.currentRenderTask) {
+                console.log('Cancelling previous render task');
+                this.currentRenderTask.cancel();
+            }
+
+            this.currentRenderTask = page.render(renderContext);
+            await this.currentRenderTask.promise;
+
+            console.log('Page rendered successfully');
+
+            // Restore viewport center position AFTER rendering
+            if (container && oldWidth > 0 && oldHeight > 0) {
+                const scaleX = this.canvas.width / oldWidth;
+                const scaleY = this.canvas.height / oldHeight;
+                
+                const newCenterX = centerX * scaleX;
+                const newCenterY = centerY * scaleY;
+                
+                container.scrollLeft = newCenterX - container.clientWidth / 2;
+                container.scrollTop = newCenterY - container.clientHeight / 2;
+            }
+
+            this.currentRenderTask = null;
+            this.pageRendering = false;
+
+            if (this.pageNumPending !== null) {
+                this.renderPage(this.pageNumPending);
+                this.pageNumPending = null;
+            }
+        } catch (error) {
+            if (error.name === 'RenderingCancelledException') {
+                console.log('Rendering cancelled, will render pending page');
+            } else {
+                console.error('Error rendering page:', error);
+            }
+            this.currentRenderTask = null;
+            this.pageRendering = false;
+        }
+    },
+
+    queueRenderPage(num) {
+        if (this.pageRendering) {
+            this.pageNumPending = num;
+        } else {
+            this.renderPage(num);
+        }
+    },
+
+    nextPage() {
+        if (this.pageNum >= this.totalPages) {
+            return false;
+        }
+        this.pageNum++;
+        this.queueRenderPage(this.pageNum);
+        return true;
+    },
+
+    previousPage() {
+        if (this.pageNum <= 1) {
+            return false;
+        }
+        this.pageNum--;
+        this.queueRenderPage(this.pageNum);
+        return true;
+    },
+
+    goToPage(num) {
+        if (num < 1 || num > this.totalPages) {
+            return false;
+        }
+        this.pageNum = num;
+        this.queueRenderPage(this.pageNum);
+        return true;
+    },
+
+    zoomIn() {
+        this.scale += 0.25;
+        this.queueRenderPage(this.pageNum);
+    },
+
+    zoomOut() {
+        if (this.scale > 0.5) {
+            this.scale -= 0.25;
+            this.queueRenderPage(this.pageNum);
+        }
+    },
+
+    getCurrentPage() {
+        return this.pageNum;
+    },
+
+    getTotalPages() {
+        return this.totalPages;
+    },
+
+    getScale() {
+        return this.scale;
+    },
+
+    dispose() {
+        // Clean up event listeners
+        if (this.wheelEventAttached) {
+            // Note: We can't remove the exact listener without keeping a reference
+            // but we can at least mark it as disposed
+            this.wheelEventAttached = false;
+            this.dotNetReference = null;
+            console.log('PDF viewer disposed');
+        }
+    }
+};
+