Refactor signature handling with SignatureCaptureDto

Introduced a new `SignatureCaptureDto` model to encapsulate
signature-related data and metadata, replacing the previous
`SignatureCapture` type in `EnvelopeViewer.razor`.

- Added `SignatureCaptureDto` in `SignatureCaptureDto.cs` with
  properties for signature image, signer name, position, and place.
- Updated `_capturedSignature` to use `SignatureCaptureDto` for
  consistency and maintainability.
- Refactored signature capture logic to initialize
  `SignatureCaptureDto` using object initializer syntax.
- Improved code clarity with detailed XML documentation for
  `SignatureCaptureDto`.

These changes enhance maintainability, readability, and ensure
a centralized model for signature-related data.

COPILOT_CONTEXT_EN.md

@@ -0,0 +1,946 @@
+# EnvelopeGenerator — Copilot Context Notes (English)
+
+## Purpose
+A digital document signing system. Senders upload PDFs and place signature annotation fields via PSPDFKit (EnvelopeGenerator.Web). Receivers open the document in a Blazor WASM viewer, confirm each signature field via a checkbox overlay, draw/type/upload their signature, and export the stamped PDF.
+
+---
+
+## Solution Structure
+
+| Project | Target | Description |
+|---|---|---|
+| `EnvelopeGenerator.API` | net8.0 | ASP.NET Core Web API. Receiver auth (cookie), annotation reading, PDF serving. |
+| `EnvelopeGenerator.ReceiverUI` | net8.0 WASM | Blazor WebAssembly. Receiver UI. YARP proxies API calls. |
+| `EnvelopeGenerator.Web` | net7/8/9 | Razor Pages. Sender UI + PSPDFKit annotation placement. |
+| `EnvelopeGenerator.Application` | multi | MediatR CQRS handlers. |
+| `EnvelopeGenerator.Domain` | multi | Domain models, constants, interfaces. |
+| `EnvelopeGenerator.Infrastructure` | multi | EF Core repos, DB context. |
+| `EnvelopeGenerator.PdfEditor` | multi | iText7 utilities. NOT used in ReceiverUI flow. |
+| `EnvelopeGenerator.DependencyInjection` | multi | DI registration helpers. |
+| VB.NET projects (Service/Form/BBTests) | net462 | Legacy. Do NOT touch. |
+
+---
+
+## Key Files
+
+| File | Purpose |
+|---|---|
+| `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. |
+| `ReceiverUI/Services/DocumentService.cs` | Fetches PDF bytes from API. |
+| `ReceiverUI/Services/AuthService.cs` | Manages receiver session cookie. |
+| `API/Controllers/AnnotationController.cs` | GET `api/Annotation/{key}` ? annotation list. |
+| `API/Controllers/DocumentController.cs` | GET `api/Document/{key}` ? PDF bytes. |
+
+---
+
+## SignatureDto / AnnotationDto — Coordinate System
+
+**Database Storage Format:** INCHES (GdPicture14 native unit)  
+**Origin:** Top-left corner of page  
+**Axes:** X increases rightward, Y increases downward
+
+### Source Evidence (VB.NET Legacy Code)
+
+```vb
+' From: EnvelopeGenerator.Form/frmFieldEditor.vb
+' GdPicture14.Annotations.AnnotationStickyNote
+
+'Breite und Höhe in Inches (4,5*5cm)
+Private Const SIGNATURE_WIDTH As Single = 1.77   ' 1.77 inches = 4.5cm
+Private Const SIGNATURE_HEIGHT As Single = 1.96  ' 1.96 inches = 5cm
+
+Sub LoadAnnotation(pElement As Signature, ...)
+    oAnnotation.Left = CSng(pElement.X)      ' Direct assignment ? INCHES
+    oAnnotation.Top = CSng(pElement.Y)
+    oAnnotation.Width = CSng(pElement.Width)
+    oAnnotation.Height = CSng(pElement.Height)
+End Sub
+```
+
+### Conversion Formulas
+
+```
+Inches ? DevExpress (DX):  x_DX = x_inches * 100.0
+                          y_DX = y_inches * 100.0
+
+Inches ? PDF Points:       x_pt = x_inches * 72.0
+                          y_pt = x_inches * 72.0
+
+Inches ? PDF.js Canvas:    normalize to [0,1], then scale to pixels
+                          x_norm = x_inches / pageWidth_inches
+                          y_norm = y_inches / pageHeight_inches
+                          x_px = x_norm * canvasWidth * scale * dpr
+                          y_px = y_norm * canvasHeight * scale * dpr
+```
+
+### Unit Comparison Table
+
+| System | Unit | Origin | Conversion from INCHES |
+|--------|------|--------|------------------------|
+| **GdPicture14** (Source) | **Inches** | Top-left | Database format (no conversion) |
+| DevExpress (LEGACY) | 1/100 inch (DX) | Top-left | `x_DX = x_inches * 100` |
+| PDF.js (NEW) | Pixels | Top-left | `normalize ? scale` |
+| PDF Points (iText7) | Points (1/72") | **Bottom-left** | `x_pt = x_inches * 72` + Y-flip |
+| PSPDFKit (Web) | Points (1/72") | Top-left | `x_pt = x_inches * 72` |
+
+**A4 Page Dimensions:**
+- Width: 8.27 inches = 595 points = 827 DX units
+- Height: 11.69 inches = 842 points = 1169 DX units
+
+---
+
+## EnvelopeViewer (NEW) — PDF.js Read-Only Viewer
+
+**Route:** `/envelope/{EnvelopeKey}`  
+**Purpose:** Modern, high-performance PDF viewing without signing functionality.  
+**Technology:** PDF.js 3.11.174 + custom JavaScript + configurable quality settings
+
+### 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
+- Quality settings loaded from `appsettings.json` via `IOptions<PdfViewerOptions>`
+- Thumbnail sidebar with resizable splitter (150px-400px, localStorage persistence)
+- CSS externalized to `envelope-viewer.css`
+
+**JavaScript (`pdf-viewer.js`):**
+```javascript
+window.pdfViewer = {
+    qualityOptions,              // Configurable from appsettings.json
+    setQualityOptions(options),  // Dynamic quality update
+    initialize(canvasId, pdfDataUrl, dotNetRef),
+    renderPage(num),
+    renderThumbnail(pageNum, canvasId),
+    attachWheelEvent(),          // Ctrl+Wheel zoom (configurable step)
+    zoomIn(), zoomOut(),         // Configurable step percentage
+    dispose()
+}
+```
+
+**Options (`PdfViewerOptions.cs`):**
+```csharp
+public class PdfViewerOptions {
+    public double ThumbnailBaseScale { get; set; } = 0.75;      // 0.2-1.5
+    public bool ThumbnailEnableHiDPI { get; set; } = true;
+    public double ThumbnailMaxDPR { get; set; } = 2.0;          // 1.0-3.0
+    public bool MainCanvasEnableHiDPI { get; set; } = true;
+    public double MainCanvasMaxDPR { get; set; } = 2.0;
+    public bool EnableSmoothZoom { get; set; } = true;
+    public int ZoomTransitionDuration { get; set; } = 150;      // ms
+    public double RenderingOpacity { get; set; } = 0.85;        // 0.0-1.0
+    public int ThumbnailRenderDelay { get; set; } = 50;         // ms
+    public int ZoomStepPercentage { get; set; } = 5;            // 1-50%
+}
+```
+
+### Configuration (appsettings.json)
+
+**Location:** `EnvelopeGenerator.ReceiverUI/wwwroot/appsettings.json`
+
+```json
+{
+  "PdfViewer": {
+    "ThumbnailBaseScale": 0.75,
+    "ThumbnailEnableHiDPI": true,
+    "ThumbnailMaxDPR": 2.0,
+    "MainCanvasEnableHiDPI": true,
+    "MainCanvasMaxDPR": 2.0,
+    "EnableSmoothZoom": true,
+    "ZoomTransitionDuration": 150,
+    "RenderingOpacity": 0.85,
+    "ThumbnailRenderDelay": 50,
+    "ZoomStepPercentage": 5
+  }
+}
+```
+
+**Usage:** Edit file ? F5 (browser refresh) ? new settings applied
+
+**Presets:**
+- **High Quality**: `ThumbnailBaseScale: 1.0, MaxDPR: 3.0` (powerful devices)
+- **Balanced**: Default values (recommended)
+- **Performance**: `ThumbnailBaseScale: 0.5, EnableHiDPI: false` (mobile/low-end)
+
+---
+
+### Features
+
+1. **HiDPI/Retina Support** ? 4x quality on Retina displays
+2. **Configurable Quality** ? All parameters in appsettings.json
+3. **Unlimited Zoom** ? 50%-300%, configurable step (default 5%)
+4. **Global Ctrl+Wheel Zoom** ? Works anywhere on page
+5. **Thumbnail Sidebar** ? Resizable (150-400px), high-quality rendering
+6. **Smooth Transitions** ? Configurable fade effect
+7. **Responsive Design** ? Desktop/mobile adaptive layout
+
+---
+
+### 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. **Thumbnail Sidebar:**
+   - Left panel with page previews (sequential rendering, 50ms delay)
+   - Click to navigate to specific page
+   - Active page highlighted with gradient border
+   - No header/title (maximizes thumbnail space)
+   - Toggle button in toolbar to show/hide
+
+5. **Resizable Splitter:**
+   - 4px draggable divider between thumbnails and canvas
+   - Min width: 150px, Max width: 400px
+   - Visual feedback: gradient on hover/active
+   - User preference saved to localStorage (`envelopeViewer_thumbnailWidth`)
+   - Global mouse events (works anywhere during drag)
+   - `col-resize` cursor (?) for intuitive UX
+
+6. **Flex Layout:**
+   - Thumbnails and canvas in same container (`.pdf-frame`)
+   - `display: flex, flex-direction: row, align-items: stretch`
+   - Perfect vertical alignment (same top/bottom position)
+   - Responsive: column layout on mobile (<768px)
+
+7. **Responsive Design:**
+   - Desktop: 90% width, 1200px max
+   - Mobile: 95% width, adjusted heights, thumbnails collapse to top
+   - Adaptive padding and font sizes
+
+### Initialization Flow
+
+```csharp
+OnInitializedAsync():
+  1. Fetch PDF bytes from DocumentService
+  2. Convert to base64 data URL
+  3. Set _isLoading = false
+
+OnAfterRenderAsync(firstRender):
+  1. Load saved thumbnail width from localStorage
+  2. Create DotNetObjectReference
+  3. Send PdfViewerOptions to JavaScript
+  4. Initialize PDF.js viewer
+  5. Attach splitter resize listeners
+  6. Render thumbnails sequentially (configurable delay)
+```
+
+**User Interactions:**
+- Zoom: Buttons/Ctrl+Wheel/Slider ? configurable step percentage
+- Pages: Buttons/Input/Thumbnails ? navigate
+- Sidebar: Toggle button ? show/hide thumbnails
+- Splitter: Drag ? resize sidebar (150-400px)
+
+**Cleanup:**
+```csharp
+DisposeAsync():
+  - Dispose PDF.js viewer
+  - Detach event listeners
+  - Dispose DotNetObjectReference
+```
+
+---
+
+### 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
+2. `AnnotationService.GetAnnotationsAsync` ? fills `_annotations`
+3. `DocumentService.GetDocumentAsync` ? fills `_basePdfBytes` (real mode)
+4. `BuildFreshBaseReport()` ? `XtraReport` for `DxReportViewer`
+
+### Signature Popup
+- Tabs: Draw / Text / Image
+- Fields: full name (required), position (optional), place (required)
+- Saved to `_capturedSignature` record
+- If annotations exist ? popup closes ? JS checkbox overlays installed
+
+### JS Checkbox Overlay (`receiver-signature.js`)
+- `receiverSignature.installAnnotationCheckboxes(annotations, checkedIds, dotNetRef)`
+- One `.annot-sig-cb-wrapper` div per annotation, absolutely positioned over viewer scroll container
+- Position: `left = pageRect.left + ann.x * scaleX`, `top = pageRect.top + ann.y * scaleY`
+  - `scaleX = pagePixelWidth / 827`, `scaleY = pagePixelHeight / 1169`
+- Click ? `dotNetRef.invokeMethodAsync('OnAnnotationToggled', id, checked)`
+
+### Apply Signatures ("Unterschriften anwenden" — `SubmitSignaturesAsync`)
+
+**Real PDF mode (`_basePdfBytes` is set):**
+- Calls `StampSignaturesOnPdf` using **iText7** directly on PDF bytes
+- Coordinate conversion: `xPt = ann.X * (72/100)`, `yPt = pageHeight - ann.Y * (72/100) - sigHeight` (Y flip: DX top-down ? PDF bottom-up)
+- Returns stamped bytes ? loaded into new `XtraReport` with `XRPdfContent`
+- Viewer refreshed with `ViewerKey++`
+
+**Dev/fake mode (`_basePdfBytes` is null):**
+- Falls back to `AddSignatureAtAnnotation` (XtraReports DetailBand + BeforePrint counter)
+- This is intentionally left as a dev fallback only
+
+### Export
+- `reportViewer.ExportToAsync(ExportFormat.Pdf)`
+
+---
+
+## StampSignaturesOnPdf — iText7 Implementation
+
+```csharp
+// Located in ReportViewer.razor @code section
+// Called by SubmitSignaturesAsync when _basePdfBytes is available
+
+static byte[] StampSignaturesOnPdf(
+    byte[] sourcePdfBytes, byte[] signatureImageBytes,
+    string signerFullName, string signerPosition, string signaturePlace,
+    IReadOnlyList<AnnotationDto> annotations)
+{
+    // Opens PDF with PdfReader/PdfWriter
+    // For each annotation:
+    //   pageNum = ann.Page (clamped to totalPages)
+    //   xPt = ann.X * (72f/100f)
+    //   imgBottomY = pageHeight - ann.Y * (72f/100f) - sigHeightPt  ? Y-axis flip
+    //   PdfCanvas.AddImageFittedIntoRectangle(imageData, rect, false)
+    //   Separator line at bottom of image
+    //   Canvas text block below separator (font: Helvetica 7pt, color: RGB(73,80,87))
+    // Returns stamped byte[]
+}
+```
+
+---
+
+## BuildFreshBaseReport()
+
+```csharp
+// Real PDF mode:
+var report = new XtraReport();
+var detail = new DetailBand();
+report.Bands.Add(detail);
+detail.Controls.Add(new XRPdfContent { Source = _basePdfBytes, GenerateOwnPages = true });
+return report;
+
+// Dev/fake mode: returns pre-built report from ReportStorage
+```
+
+---
+
+## NuGet Packages in ReceiverUI
+
+| Package | Version | Purpose |
+|---|---|---|
+| `DevExpress.Blazor.Reporting.Viewer` | 25.2.3 | DxReportViewer (LEGACY, used in ReportViewer.razor) |
+| `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
+
+| Mistake | Why Wrong | Session |
+|---|---|---|
+| `BottomMarginBand` for per-page signatures | Repeats on every page; Y offset wrong | 4 |
+| `imageY = (page-1) * 1169 + ann.Y` | Inflates DetailBand; 35 pages ? 140 pages | 8 |
+| `e.Graph?.PrintingSystem` in BeforePrint | `Graph` not on `CancelEventArgs` | 5 |
+| `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 | 10 |
+| **PDF.js: Hardcoded quality values** | **Use appsettings.json for configurability** | **11** |
+| **PDF.js: Hardcoded zoom step (1%)** | **Too granular; use configurable percentage** | **11** |
+| **Toolbar: Complex left/center/right layout** | **User wants simple horizontal layout; failed multiple times to implement** | **11** |
+| **Zoom label: Badge style (gradient/border/padding)** | **Over-designed; user prefers simple text label** | **11** |
+| **Attempting to "improve" simple designs** | **User requests simplicity; AI keeps over-engineering** | **11** |
+| **Ignoring explicit "revert" instructions** | **User said revert toolbar, AI tried to fix CSS instead of reverting HTML structure** | **11** |
+
+---
+
+## DevExpress Article (2023-08-28) — Why It Does NOT Apply
+
+The article describes **X.509 cryptographic digital signatures** via `PdfDocumentSigner` + `Pkcs7Signer`.  
+Our use case is **visual/image stamping** at specific page coordinates — different problem, different API.  
+`XRPdfSignature` in the article requires pre-placed fields in the report designer, not runtime coordinates.
+
+---
+
+## Layout Architecture (EnvelopeViewer)
+
+### HTML Structure
+```html
+<div class="pdf-viewer-container">
+  <div class="pdf-toolbar">
+    <!-- Zoom, page navigation, thumbnail toggle -->
+  </div>
+  
+  <div class="pdf-frame">
+    @if (_showThumbnails) {
+      <div class="pdf-thumbnails" style="width: @(_thumbnailWidth)px">
+        <!-- Page previews -->
+      </div>
+      <div class="pdf-splitter" @onmousedown="OnSplitterMouseDown">
+        <!-- Resizable divider -->
+      </div>
+    }
+    <div class="pdf-canvas-wrapper">
+      <canvas id="pdf-canvas" class="pdf-canvas"></canvas>
+    </div>
+  </div>
+</div>
+```
+
+### CSS Flexbox Layout
+```css
+.pdf-frame {
+  display: flex;
+  flex-direction: row;        /* Side-by-side */
+  align-items: stretch;       /* Same height */
+  overflow: hidden;
+}
+
+.pdf-thumbnails {
+  flex-shrink: 0;             /* Fixed width */
+  width: 260px;               /* Dynamic via inline style */
+  border-right: none;         /* Seamless join with splitter */
+}
+
+.pdf-splitter {
+  width: 4px;
+  cursor: col-resize;
+  flex-shrink: 0;
+}
+
+.pdf-canvas-wrapper {
+  flex: 1;                    /* Fill remaining space */
+  overflow: auto;             /* Scrollable for zoom */
+  padding: 2rem;
+  text-align: center;
+}
+```
+
+### Resizable Splitter Workflow
+```
+1. User hovers splitter ? cursor: col-resize (?)
+2. Mouse down ? OnSplitterMouseDown(e)
+   - _isResizing = true
+   - Store start position (clientX) and width
+   - Add 'resizing' class to body (prevent text selection)
+   - Call pdfViewer.startResize()
+
+3. Mouse move (global) ? OnSplitterMouseMove(clientX)
+   - Calculate delta = clientX - startX
+   - newWidth = startWidth + delta
+   - Clamp to 150-400px range
+   - Update _thumbnailWidth
+   - StateHasChanged() for reactive UI
+
+4. Mouse up (global) ? OnSplitterMouseUp()
+   - _isResizing = false
+   - Remove 'resizing' class
+   - Save to localStorage("envelopeViewer_thumbnailWidth")
+```
+
+### Responsive Behavior
+- **Desktop (>768px)**: Flex row, side-by-side
+- **Mobile (?768px)**: Flex column, thumbnails on top
+- **Thumbnail toggle**: Controlled by `@if (_showThumbnails)` in Razor markup
+
+---
+
+## Signature Buttons in EnvelopeViewer — Interactive Overlay System
+
+**Purpose:** Render clickable "Unterschreiben" (Sign) buttons on PDF canvas at signature field positions fetched from database.
+
+### Architecture
+
+**Blazor Component (`EnvelopeViewer.razor`):**
+```csharp
+IReadOnlyList<SignatureDto> _signatures = [];
+
+protected override async Task OnInitializedAsync() {
+    var signatures = await SignatureService.GetAsync(EnvelopeKey);
+    _signatures = signatures.Convert(UnitOfLength.Point);  // INCHES ? POINTS
+}
+
+async Task RenderSignatureButtonsAsync() {
+    await JSRuntime.InvokeVoidAsync("pdfViewer.renderSignatureButtons", 
+        _signatures, _currentPage, _dotNetRef);
+}
+
+[JSInvokable]
+public void OnSignatureButtonClick(int signatureId) {
+    Console.WriteLine($"Signature #{signatureId} signed");
+}
+```
+
+**JavaScript (`pdf-viewer.js`):**
+```javascript
+renderSignatureButtons(signatures, currentPageNum, dotNetRef) {
+    this.clearSignatureButtons();  // Remove old buttons
+    
+    const pageSignatures = signatures.filter(sig => sig.page === currentPageNum);
+    const signatureLayer = document.getElementById('pdf-signature-layer');
+    
+    pageSignatures.forEach(sig => {
+        // Convert POINTS to display pixels
+        const xPx = sig.x * this.scale;  // sig.x already in PDF POINTS
+        const yPx = sig.y * this.scale;
+        
+        const button = document.createElement('button');
+        button.className = 'signature-button';
+        button.style.left = `${xPx}px`;
+        button.style.top = `${yPx}px`;
+        button.style.width = '150px';
+        button.style.height = '60px';
+        
+        // German text + pen icon
+        button.innerHTML = `
+            <div>Unterschreiben</div>
+            <svg>...</svg>
+        `;
+        
+        button.addEventListener('click', () => {
+            this.dotNetReference.invokeMethodAsync('OnSignatureButtonClick', sig.id);
+        });
+        
+        signatureLayer.appendChild(button);
+        this.signatureButtons.push(button);
+    });
+}
+
+clearSignatureButtons() {
+    this.signatureButtons.forEach(btn => btn.parentNode?.removeChild(btn));
+    this.signatureButtons = [];
+}
+```
+
+**HTML Structure:**
+```html
+<div class="pdf-page-container">
+    <canvas id="pdf-canvas"></canvas>
+    <div id="pdf-text-layer"></div>
+    <div id="pdf-signature-layer"></div>  <!-- NEW -->
+</div>
+```
+
+**CSS (`envelope-viewer.css`):**
+```css
+.pdf-signature-layer {
+    position: absolute;
+    left: 0; top: 0; right: 0; bottom: 0;
+    overflow: visible;
+    pointer-events: none;  /* Pass clicks through to canvas */
+    z-index: 20;
+}
+
+.signature-button {
+    pointer-events: auto;  /* Re-enable for buttons */
+    position: absolute;
+    width: 150px; height: 60px;
+    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    /* Hover: scale(1.05), shadow, darker gradient */
+}
+```
+
+### Rendering Triggers
+
+1. **Initial Load:** After PDF renders (`OnAfterRenderAsync`)
+2. **Page Change:** `NextPage()`, `PreviousPage()`, `GoToPageFromThumbnail()`
+3. **Zoom Change:** `OnZoomChanged()` (re-calculates pixel positions)
+
+### Coordinate Conversion Flow
+
+```
+Database (INCHES)
+  ? SignatureService.GetAsync()
+SignatureDto.X/Y (INCHES)
+  ? .Convert(UnitOfLength.Point)
+SignatureDto.X/Y (PDF POINTS, × 72)
+  ? JavaScript
+Display Pixels (× this.scale)
+  ? CSS
+button.style.left/top
+```
+
+**Example Calculation:**
+- Database: `X = 1.5 inches, Y = 2.0 inches`
+- After conversion: `X = 108 points, Y = 144 points` (× 72)
+- At scale 1.5: `X = 162px, Y = 216px`
+- Button positioned at `left: 162px, top: 216px`
+
+### Button Design
+
+**Visual Spec:**
+- **Size:** 150px × 60px
+- **Background:** Purple gradient `#4F46E5` ? `#4338CA` (hover: darker)
+- **Text:** "Unterschreiben" (18px, bold, white)
+- **Icon:** Pen SVG (24px white)
+- **Effects:**
+  - Hover: `scale(1.05)` + shadow `0 4px 12px rgba(79, 70, 229, 0.4)`
+  - Active: `scale(0.98)`
+  - Focus: `2px solid #7e22ce` outline
+
+**Accessibility:**
+- `tabindex="0"` for keyboard navigation
+- Focus outline for keyboard users
+- Click handler with semantic button element
+
+---
+
+## Signature Workflow in EnvelopeViewer — NEW Implementation (Session 13-14)
+
+**IMPORTANT: iText7 NOT USED in EnvelopeViewer**
+- **Reason:** GPL license incompatibility (requires source code sharing)
+- **Alternative:** Client-side signature overlay system (HTML + Canvas API)
+- **Export:** Signatures are visual overlays only, NOT stamped on PDF bytes
+- **Future:** Consider PSPDFKit or commercial PDF library for actual PDF stamping
+
+### Signature Data Structure
+
+**Captured Signature (`SignatureCaptureDto`):**
+```csharp
+// Model: EnvelopeGenerator.ReceiverUI/Models/SignatureCaptureDto.cs
+public sealed record SignatureCaptureDto
+{
+    public required string DataUrl { get; init; }      // base64 PNG: "data:image/png;base64,iVBORw0KG..."
+    public required string FullName { get; init; }     // Required: "Max Mustermann"
+    public string Position { get; init; } = string.Empty;  // Optional: "Geschäftsführer"
+    public required string Place { get; init; }        // Required: "Berlin"
+}
+
+// Usage in components:
+SignatureCaptureDto? _capturedSignature;
+
+// Initialization with object initializer (required properties):
+_capturedSignature = new SignatureCaptureDto
+{
+    DataUrl = signatureDataUrl,
+    FullName = _signerFullName.Trim(),
+    Position = _signerPosition.Trim(),
+    Place = _signaturePlace.Trim()
+};
+```
+
+**Applied Signature (HTML Overlay):**
+```html
+<div class="applied-signature" data-signature-id="42" style="left: 162px; top: 216px;">
+    <img src="data:image/png;base64,..." />  <!-- Signature image (max 70px height) -->
+    <div style="border-top: 1px solid #495057;"></div>  <!-- Separator line -->
+    <div style="font-size: 9px; color: #495057;">
+        <strong>Max Mustermann</strong>     <!-- Name (bold, #212529) -->
+        <br>Geschäftsführer                <!-- Position (optional) -->
+        <br>Berlin, 26.01.2025              <!-- Place, Date (dd.MM.yyyy) -->
+    </div>
+</div>
+```
+
+### Complete Workflow (Session 14 Update)
+
+**Step 1: Page Load & Automatic Popup**
+```csharp
+protected override async Task OnInitializedAsync() {
+    // ... load PDF and signatures ...
+    
+    // Open signature popup automatically
+    _activeSignatureTab = SignatureTabDraw;
+    _signaturePopupVisible = true;
+    _popupValidationMessage = null;
+}
+```
+
+**Features:**
+- Opens automatically on page load (no manual trigger needed)
+- Cannot be closed manually (no X button, ESC disabled, no outside-click)
+- User MUST create signature before viewing PDF
+
+**Step 2: Signature Creation Popup (DxPopup)**
+
+**Tabs:**
+1. **Zeichnen (Draw):** Canvas-based signature pad (`receiver-signature.js`)
+   - Touch-friendly: `touch-action: none`
+   - Line width: 2.5px, black (`#111`)
+   - Canvas: 560×180px, rounded corners, shadow
+
+2. **Text:** Type signature with font selection
+   - Fonts: Brush Script, Segoe Script, Lucida Handwriting, Comic Sans, Cursive
+   - Real-time preview on canvas
+
+3. **Bild (Image):** Upload PNG/JPG/WebP
+   - File input with preview
+   - Auto-resize to fit canvas
+
+**Required Fields:**
+- ? **Vor- und Nachname** (Full Name) — Red asterisk `*`
+- ? **Ort** (Place) — Red asterisk `*`
+- ? **Position** — Optional, gray "(optional)" label
+
+**Validation:**
+```csharp
+async Task SaveSignatureAsync() {
+    if (string.IsNullOrWhiteSpace(_signerFullName)) {
+        _popupValidationMessage = "Bitte geben Sie Vor- und Nachname ein.";
+        return;
+    }
+    if (string.IsNullOrWhiteSpace(_signaturePlace)) {
+        _popupValidationMessage = "Bitte geben Sie den Ort ein.";
+        return;
+    }
+    var signatureDataUrl = await GetActiveSignatureDataUrlAsync();
+    if (string.IsNullOrWhiteSpace(signatureDataUrl)) {
+        _popupValidationMessage = "Die Unterschrift ist erforderlich.";
+        return;
+    }
+    
+    // Save to session state
+    _capturedSignature = new(signatureDataUrl, _signerFullName.Trim(), 
+                            _signerPosition.Trim(), _signaturePlace.Trim());
+    _signaturePopupVisible = false;
+}
+```
+
+**Design (Modern & Clean):**
+- **Tabs:** Purple active state (`#4F46E5`), 3px bottom border
+- **Inputs:** 2px solid border (`#e9ecef`), 6px border-radius, consistent padding
+- **Canvas:** Light shadow (`0 1px 3px rgba(0,0,0,0.1)`), rounded corners
+- **Buttons:**
+  - **Erneuern:** Outline secondary with refresh icon
+  - **Speichern:** Purple gradient + checkmark icon + shadow
+- **Error:** Red left border (`4px solid #dc3545`), light red background (`#fee`)
+
+**Step 3: PDF Viewing with Signature Buttons**
+
+After popup closes:
+```csharp
+protected override async Task OnAfterRenderAsync(bool firstRender) {
+    // ... PDF initialization ...
+    
+    await RenderSignatureButtonsAsync();  // Render "Unterschreiben" buttons
+}
+```
+
+**Buttons appear at signature field positions:**
+- Purple gradient background
+- "Unterschreiben" text + pen icon
+- Hover: scale(1.05) + darker color
+- Positioned using PDF POINTS ? display pixels conversion
+
+**Step 4: Apply Signature (Click "Unterschreiben")**
+
+**C# Handler:**
+```csharp
+[JSInvokable]
+public async Task OnSignatureButtonClick(int signatureId) {
+    if (_capturedSignature == null) return;
+    
+    await JSRuntime.InvokeVoidAsync("pdfViewer.applySignature", 
+        signatureId, 
+        _capturedSignature.DataUrl,
+        _capturedSignature.FullName,
+        _capturedSignature.Position,
+        _capturedSignature.Place);
+}
+```
+
+**JavaScript Implementation:**
+```javascript
+async applySignature(signatureId, signatureDataUrl, fullName, position, place) {
+    // 1. Find and remove button
+    const button = this.signatureButtons.find(btn => 
+        btn.getAttribute('data-signature-id') == signatureId);
+    button.parentNode.removeChild(button);
+    
+    // 2. Create signature container (German standard format)
+    const signatureContainer = document.createElement('div');
+    signatureContainer.className = 'applied-signature';
+    signatureContainer.style.position = 'absolute';
+    signatureContainer.style.left = button.style.left;  // Same position as button
+    signatureContainer.style.top = button.style.top;
+    signatureContainer.style.width = '230px';
+    signatureContainer.style.backgroundColor = '#f8f9fa';
+    signatureContainer.style.border = '1px solid #dee2e6';
+    signatureContainer.style.borderRadius = '6px';
+    signatureContainer.style.padding = '12px';
+    
+    // 3. Add signature image
+    const img = document.createElement('img');
+    img.src = signatureDataUrl;
+    img.style.width = '100%';
+    img.style.maxHeight = '70px';
+    img.style.objectFit = 'contain';
+    
+    // 4. Add separator line (German standard)
+    const separator = document.createElement('div');
+    separator.style.borderTop = '1px solid #495057';
+    separator.style.marginTop = '6px';
+    separator.style.marginBottom = '8px';
+    
+    // 5. Add text information
+    const today = new Date();
+    const dateStr = today.toLocaleDateString('de-DE', { 
+        day: '2-digit', month: '2-digit', year: 'numeric' 
+    });  // "26.01.2025"
+    
+    const infoHtml = [
+        `<strong>${this.escapeHtml(fullName)}</strong>`,
+        position ? this.escapeHtml(position) : null,
+        `${this.escapeHtml(place)}, ${dateStr}`
+    ].filter(x => x).join('<br>');
+    
+    const info = document.createElement('div');
+    info.style.fontSize = '9px';
+    info.style.color = '#495057';
+    info.innerHTML = infoHtml;
+    
+    // 6. Assemble and add to layer
+    signatureContainer.appendChild(img);
+    signatureContainer.appendChild(separator);
+    signatureContainer.appendChild(info);
+    
+    document.getElementById('pdf-signature-layer').appendChild(signatureContainer);
+}
+```
+
+**German Standard Layout:**
+```
+???????????????????????????????
+?  [Signature Image]          ?  ? Base64 PNG, max 70px height
+?                             ?
+???????????????????????????????  ? 1px separator (#495057)
+?                             ?
+?  Max Mustermann (Bold)      ?  ? Name (font-weight: 600, #212529)
+?  Geschäftsführer            ?  ? Position (optional, normal weight)
+?  Berlin, 26.01.2025         ?  ? Place, Date (dd.MM.yyyy)
+?                             ?
+???????????????????????????????
+```
+
+**Step 5: Persistence & Re-rendering**
+
+- **Zoom/Page Change:** Applied signatures re-render automatically
+- **Session State:** `_capturedSignature` stored in Blazor component
+- **Limitation:** Lost on page refresh (no server-side storage)
+- **Future:** Export to PDF with actual byte stamping (requires non-GPL library)
+
+**Security:**
+```javascript
+escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;  // Browser auto-escapes
+    return div.innerHTML;
+}
+```
+Protects against XSS attacks from malicious input in Name/Position/Place fields.
+
+---
+
+### Popup Design Specification
+
+**DxPopup Properties:**
+```razor
+<DxPopup @bind-Visible="_signaturePopupVisible"
+         HeaderText="Unterschrift erstellen"
+         Width="620px"
+         MaxWidth="95vw"
+         ShowFooter="true"       <!-- REQUIRED for buttons to appear -->
+         CloseOnOutsideClick="false"
+         ShowCloseButton="false"  <!-- No X button -->
+         CloseOnEscape="false">  <!-- ESC disabled -->
+```
+
+**Tab Design:**
+- **Active Tab:** `border-bottom: 3px solid #4F46E5; color: #4F46E5; font-weight: 600;`
+- **Inactive Tab:** `color: #6c757d;`
+- **Tab Bar:** `border-bottom: 2px solid #e9ecef;`
+
+**Input Styling:**
+```css
+input, select {
+    border: 2px solid #e9ecef;
+    border-radius: 6px;
+    padding: 0.625rem;
+}
+```
+
+**Canvas Styling:**
+```css
+canvas {
+    border: 2px solid #e9ecef;
+    border-radius: 8px;
+    background: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+```
+
+**Button Styling:**
+```css
+/* Erneuern (Renew) */
+.btn-outline-secondary {
+    border-radius: 6px;
+    padding: 0.625rem 1.25rem;
+    font-weight: 500;
+}
+
+/* Speichern (Save) */
+.btn-primary {
+    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
+    border: none;
+    border-radius: 6px;
+    padding: 0.625rem 2rem;
+    font-weight: 600;
+    box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);
+}
+```
+
+**Future Enhancement Required:**
+- Replace iText7 with commercial PDF library (e.g., PSPDFKit, Syncfusion)
+- Or use server-side stamping with Azure PDF Services
+- Or accept GPL license and open-source the stamping code
+
+---
+
+
+
+
+
+
+
+
+
+

EnvelopeGenerator.API/Controllers/AnnotationController.cs

@@ -1,16 +1,19 @@
 using DigitalData.Core.Abstraction.Application.DTO;
 using DigitalData.Core.Exceptions;
+using EnvelopeGenerator.API.Extensions;
+using EnvelopeGenerator.Application.Common.Dto;
 using EnvelopeGenerator.Application.Common.Extensions;
 using EnvelopeGenerator.Application.Common.Interfaces.Services;
 using EnvelopeGenerator.Application.Common.Notifications.DocSigned;
+using EnvelopeGenerator.Application.Documents.Queries;
 using EnvelopeGenerator.Application.EnvelopeReceivers.Queries;
 using EnvelopeGenerator.Application.Histories.Queries;
 using EnvelopeGenerator.Domain.Constants;
-using EnvelopeGenerator.API.Extensions;
 using MediatR;
 using Microsoft.AspNetCore.Authentication;
 using Microsoft.AspNetCore.Authentication.Cookies;
 using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Components.Forms;
 using Microsoft.AspNetCore.Mvc;
 
 namespace EnvelopeGenerator.API.Controllers;

EnvelopeGenerator.API/Controllers/AuthController.cs

@@ -1,3 +1,4 @@
+using DigitalData.Auth.Claims;
 using EnvelopeGenerator.API.Controllers.Interfaces;
 using EnvelopeGenerator.API.Models;
 using EnvelopeGenerator.Domain.Constants;
@@ -73,4 +74,44 @@ public partial class AuthController(IOptions<AuthTokenKeys> authTokenKeyOptions,
         => role is not null && !User.IsInRole(role)
             ? Unauthorized()
             : Ok();
+
+    /// <summary>
+    /// Checks whether the caller holds a valid per-envelope receiver token for the given envelope key.
+    /// The request must carry a cookie named <c>AuthTokenSignFLOWReceiver.{envelopeKey}</c>.
+    /// </summary>
+    /// <param name="envelopeKey">The unique envelope key extracted from the route.</param>
+    /// <response code="200">Valid per-envelope token found.</response>
+    /// <response code="401">Token is missing, expired or invalid.</response>
+    [ProducesResponseType(typeof(void), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(void), StatusCodes.Status401Unauthorized)]
+    [Authorize(Policy = AuthPolicy.Receiver)]
+    [HttpGet("check/envelope/{envelopeKey}")]
+    public IActionResult CheckEnvelopeReceiver([FromRoute] string envelopeKey) => Ok();
+
+    /// <summary>
+    /// Removes the per-envelope receiver cookie for the given envelope key.
+    /// </summary>
+    /// <param name="envelopeKey">The unique envelope key whose cookie should be deleted.</param>
+    /// <response code="200">Cookie successfully deleted.</response>
+    [ProducesResponseType(typeof(void), StatusCodes.Status200OK)]
+    [HttpPost("logout/envelope/{envelopeKey}")]
+    public IActionResult LogoutEnvelopeReceiver([FromRoute] string envelopeKey)
+    {
+        var cookieName = CookieNames.GetEnvelopeReceiverCookieName(authTokenKeys.Cookie, envelopeKey);
+        Response.Cookies.Delete(cookieName);
+        return Ok();
+    }
+
+    /// <summary>
+    /// Removes all per-envelope receiver cookies from the current request.
+    /// </summary>
+    /// <response code="200">All envelope receiver cookies successfully deleted.</response>
+    [ProducesResponseType(typeof(void), StatusCodes.Status200OK)]
+    [HttpPost("logout/envelope")]
+    public IActionResult LogoutAllEnvelopeReceivers()
+    {
+        foreach (var cookieName in Request.Cookies.Keys.Where(k => CookieNames.IsEnvelopeReceiverCookie(k, authTokenKeys.Cookie)))
+            Response.Cookies.Delete(cookieName);
+        return Ok();
+    }
 }

EnvelopeGenerator.API/Controllers/DocumentController.cs

@@ -1,3 +1,4 @@
+using DigitalData.Auth.Claims;
 using EnvelopeGenerator.API.Controllers.Interfaces;
 using EnvelopeGenerator.API.Extensions;
 using EnvelopeGenerator.Application.Documents.Queries;
@@ -14,10 +15,9 @@ namespace EnvelopeGenerator.API.Controllers;
 /// <remarks>
 /// Initializes a new instance of the <see cref="DocumentController"/> class.
 /// </remarks>
-[Authorize]
 [ApiController]
 [Route("api/[controller]")]
-public class DocumentController(IMediator mediator, IAuthorizationService authService) : ControllerBase, IAuthController
+public class DocumentController(IMediator mediator, IAuthorizationService authService, ILogger<DocumentController> logger) : ControllerBase, IAuthController
 {
     /// <summary>
     /// 
@@ -60,4 +60,25 @@ public class DocumentController(IMediator mediator, IAuthorizationService authSe
 
         return Unauthorized();
     }
-}
+
+    /// <summary>
+    /// Gets the document for the specified envelope key.
+    /// </summary>
+    /// <param name="envelopeKey"></param>
+    /// <param name="cancel"></param>
+    /// <returns></returns>
+    [Authorize(Policy = AuthPolicy.Receiver)]
+    [HttpGet("{envelopeKey}")]
+    public async Task<IActionResult> GetDocumentOfReceiver(string envelopeKey, CancellationToken cancel)
+    {
+        int envelopeId = User.GetEnvelopeIdOfReceiver();
+
+        var senderDoc = await mediator.Send(new ReadDocumentQuery() { EnvelopeId = envelopeId }, cancel);
+
+        if (senderDoc.ByteData is not byte[] senderDocByte)
+            return NotFound("Document is empty.");
+
+        Response.Headers.ContentDisposition = $"inline; filename=\"{envelopeKey}.pdf\"";
+        return File(senderDocByte, "application/pdf");
+    }
+}

EnvelopeGenerator.API/Controllers/EnvelopeController.cs

@@ -98,7 +98,7 @@ public class EnvelopeController : ControllerBase
     [HttpPost]
     public async Task<IActionResult> CreateAsync([FromBody] CreateEnvelopeCommand command)
     {
-        var res = await _mediator.Send(command.Authorize(User.GetId()));
+        var res = await _mediator.Send(command.WithAuth(User.GetId()));
 
         if (res is null)
         {

EnvelopeGenerator.API/Controllers/EnvelopeReceiverController.cs

@@ -14,6 +14,7 @@ using EnvelopeGenerator.Application.Common.SQL;
 using EnvelopeGenerator.Application.Common.Dto.Receiver;
 using EnvelopeGenerator.Application.Common.Interfaces.SQLExecutor;
 using EnvelopeGenerator.API.Extensions;
+using EnvelopeGenerator.Domain.Constants;
 
 namespace EnvelopeGenerator.API.Controllers;
 
@@ -73,6 +74,24 @@ public class EnvelopeReceiverController : ControllerBase
         return Ok(result);
     }
 
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <param name="envelopeKey"></param>
+    /// <param name="cancel"></param>
+    /// <returns></returns>
+    [Authorize(Policy = AuthPolicy.Receiver)]
+    [HttpGet("{envelopeKey}")]
+    public async Task<IActionResult> GetEnvelopeReceiverOfReceiver([FromRoute] string envelopeKey, CancellationToken cancel)
+    {
+        var er = await _mediator.Send(new ReadEnvelopeReceiverQuery()
+        {
+            Key = envelopeKey
+        }, cancel);
+
+        return Ok(er.SingleOrDefault());
+    }
+
     /// <summary>
     /// Ruft den Namen des zuletzt verwendeten Empfängers basierend auf der angegebenen E-Mail-Adresse ab.
     /// </summary>

EnvelopeGenerator.API/Controllers/SignatureController.cs

@@ -0,0 +1,57 @@
+using EnvelopeGenerator.API.Extensions;
+using EnvelopeGenerator.Application.Common.Dto;
+using EnvelopeGenerator.Application.Common.Extensions;
+using EnvelopeGenerator.Application.Documents.Queries;
+using EnvelopeGenerator.Domain.Constants;
+using MediatR;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+
+namespace EnvelopeGenerator.API.Controllers;
+
+/// <summary>
+/// 
+/// </summary>
+[Authorize(Policy = AuthPolicy.Receiver)]
+[ApiController]
+[Route("api/[controller]")]
+public class SignatureController : ControllerBase
+{
+    private readonly IMediator _mediator;
+
+    /// <summary>
+    /// Initializes a new instance of <see cref="SignatureController"/>.
+    /// </summary>
+    public SignatureController(IMediator mediator)
+    {
+        _mediator = mediator;
+    }
+
+    //TODO: update to use signature query
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <param name="envelopeKey"></param>
+    /// <param name="cancel"></param>
+    /// <returns></returns>
+    [Authorize(Policy = AuthPolicy.Receiver)]
+    [HttpGet("{envelopeKey}")]
+    public async Task<IActionResult> GetAnnotsOfReceiver(string envelopeKey, CancellationToken cancel)
+    {
+        int envelopeId = User.GetEnvelopeIdOfReceiver();
+
+        int receiverId = User.GetReceiverIdOfReceiver();
+
+        var doc = await _mediator.Send(new ReadDocumentQuery() { EnvelopeId = envelopeId }, cancel);
+
+        if (doc.Elements is not IEnumerable<SignatureDto> docSignatures)
+            return NotFound("Document is empty.");
+
+        var rcvSignatures = docSignatures.Where(s => s.ReceiverId == receiverId).ToList();
+
+        if (rcvSignatures is null)
+            return NotFound("No signatures found for the current receiver.");
+        else
+            return Ok(rcvSignatures);
+    }
+}

EnvelopeGenerator.API/Documentation/AuthProxyDocumentFilter.cs

@@ -16,6 +16,12 @@ public sealed class AuthProxyDocumentFilter : IDocumentFilter
     /// <param name="swaggerDoc"></param>
     /// <param name="context"></param>
     public void Apply(OpenApiDocument swaggerDoc, DocumentFilterContext context)
+    {
+        AddLoginOperation(swaggerDoc, context);
+        AddEnvelopeReceiverLoginOperation(swaggerDoc, context);
+    }
+
+    private static void AddLoginOperation(OpenApiDocument swaggerDoc, DocumentFilterContext context)
     {
         const string path = "/api/auth";
 
@@ -67,4 +73,51 @@ public sealed class AuthProxyDocumentFilter : IDocumentFilter
             }
         };
     }
+
+    private static void AddEnvelopeReceiverLoginOperation(OpenApiDocument swaggerDoc, DocumentFilterContext context)
+    {
+        const string path = "/api/Auth/envelope-receiver/{key}";
+
+        var bodySchema = context.SchemaGenerator.GenerateSchema(typeof(EnvelopeReceiverLogin), context.SchemaRepository);
+
+        var operation = new OpenApiOperation
+        {
+            Summary = "Envelope receiver login (auth-hub proxy)",
+            Description = "Proxies the envelope receiver login to the auth service. " +
+                          "The `cookie` query parameter is always forwarded as `true` so the auth service sets the per-envelope cookie automatically.",
+            Tags = [new() { Name = "Auth" }],
+            Parameters =
+            {
+                new OpenApiParameter
+                {
+                    Name = "key",
+                    In = ParameterLocation.Path,
+                    Required = true,
+                    Schema = new OpenApiSchema { Type = "string" },
+                    Description = "The unique envelope receiver key."
+                }
+            },
+            RequestBody = new OpenApiRequestBody
+            {
+                Required = false,
+                Content =
+                {
+                    ["multipart/form-data"] = new OpenApiMediaType { Schema = bodySchema }
+                }
+            },
+            Responses =
+            {
+                ["200"] = new OpenApiResponse { Description = "OK – per-envelope cookie set by auth service." },
+                ["401"] = new OpenApiResponse { Description = "Unauthorized – invalid or missing access code." }
+            }
+        };
+
+        swaggerDoc.Paths[path] = new OpenApiPathItem
+        {
+            Operations =
+            {
+                [OperationType.Post] = operation
+            }
+        };
+    }
 }

EnvelopeGenerator.API/EnvelopeGenerator.API.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFrameworks>net9.0</TargetFrameworks>
+    <TargetFrameworks>net8.0</TargetFrameworks>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
@@ -10,9 +10,9 @@
     <Authors>Digital Data GmbH</Authors>
     <Company>Digital Data GmbH</Company>
     <Product>EnvelopeGenerator.GeneratorAPI</Product>
-    <Version>1.2.3</Version>
-    <FileVersion>1.2.3</FileVersion>
-    <AssemblyVersion>1.2.3</AssemblyVersion>
+    <Version>1.4.0</Version>
+    <FileVersion>1.4.0</FileVersion>
+    <AssemblyVersion>1.4.0</AssemblyVersion>
     <PackageOutputPath>Copyright © 2025 Digital Data GmbH. All rights reserved.</PackageOutputPath>
 	<DocumentationFile>bin\$(Configuration)\$(TargetFramework)\$(AssemblyName).xml</DocumentationFile>
   </PropertyGroup>
@@ -30,11 +30,16 @@
 
   <ItemGroup>
     <PackageReference Include="AspNetCore.Scalar" Version="1.1.8" />
+    <PackageReference Include="DigitalData.Auth.Claims" Version="1.0.3" />
     <PackageReference Include="DigitalData.Auth.Client" Version="1.3.7" />
     <PackageReference Include="DigitalData.Core.API" Version="2.2.1" />
     <PackageReference Include="HtmlSanitizer" Version="9.0.892" />
-    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.4" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.6" />
+    <PackageReference Include="itext" Version="8.0.5" />
+    <PackageReference Include="itext.bouncy-castle-adapter" Version="8.0.5" />
+    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="9.0.4" Condition="'$(TargetFramework)' == 'net9.0'" />
+    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="8.0.11" Condition="'$(TargetFramework)' == 'net8.0'" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.6" Condition="'$(TargetFramework)' == 'net9.0'" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.17" Condition="'$(TargetFramework)' == 'net8.0'" />
     <PackageReference Include="Microsoft.Identity.Client" Version="4.82.1" />
     <PackageReference Include="NLog" Version="5.2.5" />
     <PackageReference Include="NLog.Web.AspNetCore" Version="5.3.0" />
@@ -71,6 +76,7 @@
     <ProjectReference Include="..\EnvelopeGenerator.Application\EnvelopeGenerator.Application.csproj" />
     <ProjectReference Include="..\EnvelopeGenerator.Domain\EnvelopeGenerator.Domain.csproj" />
     <ProjectReference Include="..\EnvelopeGenerator.Infrastructure\EnvelopeGenerator.Infrastructure.csproj" />
+    <ProjectReference Include="..\EnvelopeGenerator.PdfEditor\EnvelopeGenerator.PdfEditor.csproj" />
   </ItemGroup>
 
 </Project>

EnvelopeGenerator.API/Extensions/ReceiverClaimExtensions.cs

@@ -11,6 +11,11 @@ namespace EnvelopeGenerator.API.Extensions;
 /// </summary>
 public static class ReceiverClaimExtensions
 {
+    private static readonly string[] EnvelopeIdClaimTypes = [EnvelopeClaimTypes.Id, "envelope_id", "EnvelopeId"];
+    private static readonly string[] ReceiverIdClaimTypes = ["receiver_id", "ReceiverId"];
+    private static readonly string[] EnvelopeUuidClaimTypes = [ClaimTypes.NameIdentifier, "envelope_uuid", "EnvelopeUuid"];
+    private static readonly string[] ReceiverSignatureClaimTypes = [ClaimTypes.Hash, "receiver_sig", "ReceiverSignature"];
+
     private static string GetRequiredClaimOfReceiver(this ClaimsPrincipal user, string claimType)
     {
         var value = user.FindFirstValue(claimType);
@@ -27,15 +32,32 @@ public static class ReceiverClaimExtensions
         throw new InvalidOperationException(message);
     }
 
+    private static string GetRequiredClaimOfReceiver(this ClaimsPrincipal user, params string[] claimTypes)
+    {
+        foreach (var claimType in claimTypes.Where(t => !string.IsNullOrWhiteSpace(t)).Distinct())
+        {
+            var value = user.FindFirstValue(claimType);
+            if (!string.IsNullOrWhiteSpace(value))
+                return value;
+        }
+
+        var identity = user.Identity;
+        var principalName = identity?.Name ?? "(anonymous)";
+        var authType = identity?.AuthenticationType ?? "(none)";
+        var availableClaims = string.Join(", ", user.Claims.Select(c => $"{c.Type}={c.Value}"));
+        var message = $"Required claim(s) '{string.Join("', '", claimTypes)}' are missing for user '{principalName}' (auth: {authType}). Available claims: [{availableClaims}].";
+        throw new InvalidOperationException(message);
+    }
+
     /// <summary>
     /// Gets the authenticated envelope UUID from the claims.
     /// </summary>
-    public static string GetEnvelopeUuidOfReceiver(this ClaimsPrincipal user) => user.GetRequiredClaimOfReceiver(ClaimTypes.NameIdentifier);
+    public static string GetEnvelopeUuidOfReceiver(this ClaimsPrincipal user) => user.GetRequiredClaimOfReceiver(EnvelopeUuidClaimTypes);
 
     /// <summary>
     /// Gets the authenticated receiver signature from the claims.
     /// </summary>
-    public static string GetReceiverSignatureOfReceiver(this ClaimsPrincipal user) => user.GetRequiredClaimOfReceiver(ClaimTypes.Hash);
+    public static string GetReceiverSignatureOfReceiver(this ClaimsPrincipal user) => user.GetRequiredClaimOfReceiver(ReceiverSignatureClaimTypes);
 
     /// <summary>
     /// Gets the authenticated receiver display name from the claims.
@@ -57,15 +79,32 @@ public static class ReceiverClaimExtensions
     /// </summary>
     public static int GetEnvelopeIdOfReceiver(this ClaimsPrincipal user)
     {
-        var envIdStr = user.GetRequiredClaimOfReceiver(EnvelopeClaimTypes.Id);
+        var envIdStr = user.GetRequiredClaimOfReceiver(EnvelopeIdClaimTypes);
         if (!int.TryParse(envIdStr, out var envId))
         {
-            throw new InvalidOperationException($"Claim '{EnvelopeClaimTypes.Id}' is not a valid integer.");
+            throw new InvalidOperationException($"Claim '{"envelope_id"}' is not a valid integer.");
         }
 
         return envId;
     }
 
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <param name="user"></param>
+    /// <returns></returns>
+    /// <exception cref="InvalidOperationException"></exception>
+    public static int GetReceiverIdOfReceiver(this ClaimsPrincipal user)
+    {
+        var rcvIdStr = user.GetRequiredClaimOfReceiver(ReceiverIdClaimTypes);
+        if (!int.TryParse(rcvIdStr, out var rcvId))
+        {
+            throw new InvalidOperationException($"Claim '{"receiver_id"}' is not a valid integer.");
+        }
+
+        return rcvId;
+    }
+
     /// <summary>
     /// Signs in an envelope receiver using cookie authentication and attaches envelope claims.
     /// </summary>

EnvelopeGenerator.API/Models/EnvelopeReceiverLogin.cs

@@ -0,0 +1,7 @@
+namespace EnvelopeGenerator.API.Models;
+
+/// <summary>
+/// Request body for the envelope-receiver login endpoint.
+/// </summary>
+/// <param name="AccessCode">The access code sent to the receiver.</param>
+public record EnvelopeReceiverLogin(string? AccessCode = null);

EnvelopeGenerator.API/Program.cs

@@ -19,6 +19,7 @@ using DigitalData.Core.Abstractions.Security.Extensions;
 using EnvelopeGenerator.API.Middleware;
 using NLog.Web;
 using NLog;
+using DigitalData.Auth.Claims;
 
 var logger = LogManager.Setup().LoadConfigurationFromAppSettings().GetCurrentClassLogger();
 logger.Info("Logging initialized!");
@@ -110,9 +111,11 @@ try
 
         options.DocumentFilter<EnvelopeGenerator.API.Documentation.AuthProxyDocumentFilter>();
     });
+#if NET9_0_OR_GREATER
     builder.Services.AddOpenApi();
+#endif
 
-    //AddEF Core dbcontext
+    //Add EF Core dbcontext
     var useDbMigration = Environment.GetEnvironmentVariable("MIGRATION_TEST_MODE") == true.ToString() || config.GetValue<bool>("UseDbMigration");
     var cnnStrName = useDbMigration ? "DbMigrationTest" : "Default";
     var connStr = config.GetConnectionString(cnnStrName)
@@ -126,6 +129,9 @@ try
 
     var authTokenKeys = config.GetOrDefault<AuthTokenKeys>();
 
+    // Scheme name used for per-envelope receiver JWT authentication.
+    const string EnvelopeReceiverScheme = "EnvelopeReceiverJwt";
+
     builder.Services.AddAuthentication(options =>
     {
         options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
@@ -163,6 +169,61 @@ try
                     return Task.CompletedTask;
                 }
             };
+        })
+        // Per-envelope receiver scheme: reads the JWT from the cookie named
+        // AuthTokenSignFLOWReceiver.{envelope_key} where envelope_key is the
+        // last path segment of the request URL.
+        // This enables simultaneous authentication for multiple envelopes
+        // within the same browser session.
+        .AddJwtBearer(EnvelopeReceiverScheme, opt =>
+        {
+            opt.TokenValidationParameters = new TokenValidationParameters
+            {
+                ValidateIssuerSigningKey = true,
+                IssuerSigningKeyResolver = (token, securityToken, identifier, parameters) =>
+                {
+                    var clientParams = deferredProvider.GetOptions<ClientParams>();
+                    var publicKey = clientParams!.PublicKeys.Get(authTokenKeys.Issuer, authTokenKeys.Audience);
+                    return [publicKey.SecurityKey];
+                },
+                ValidateIssuer = true,
+                ValidIssuer = authTokenKeys.Issuer,
+                ValidateAudience = true,
+                ValidAudience = authTokenKeys.Audience,
+            };
+
+            opt.Events = new JwtBearerEvents
+            {
+                OnMessageReceived = context =>
+                {
+                    var paths = context.Request.Path.Value?.Split('/', StringSplitOptions.RemoveEmptyEntries);
+
+                    // Derive the envelope key from the last route segment: /{envelope_key}
+                    var envelopeKey = paths?.LastOrDefault();
+
+                    if (envelopeKey is not null)
+                    {
+                        var cookieName = CookieNames.GetEnvelopeReceiverCookieName(authTokenKeys.Cookie, envelopeKey);
+                        if (context.Request.Cookies.TryGetValue(cookieName, out var cookieToken) && cookieToken is not null)
+                            context.Token = cookieToken;
+                    }
+
+                    return Task.CompletedTask;
+                },
+                OnTokenValidated = context =>
+                {
+                    var paths = context.Request.Path.Value?.Split('/', StringSplitOptions.RemoveEmptyEntries);
+                    var envelopeKey = paths?.LastOrDefault();
+
+                    var sub = context.Principal?.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value
+                           ?? context.Principal?.FindFirst("sub")?.Value;
+
+                    if (envelopeKey is null || sub != envelopeKey)
+                        context.Fail("Envelope key in the path does not match the token subject.");
+
+                    return Task.CompletedTask;
+                }
+            };
         });
 
     // Authentication
@@ -182,8 +243,13 @@ try
             policy.RequireRole(Role.Sender, Role.Receiver.Full))
         .AddPolicy(AuthPolicy.Sender, policy =>
             policy.RequireRole(Role.Sender))
+        // Per-envelope policy: uses the dedicated EnvelopeReceiverJwt scheme so it
+        // never conflicts with the default JwtBearer scheme.
         .AddPolicy(AuthPolicy.Receiver, policy =>
-            policy.RequireRole(Role.Receiver.Full))
+            policy
+                .AddAuthenticationSchemes(EnvelopeReceiverScheme)
+                .RequireAuthenticatedUser()
+            .RequireRole(Role.Receiver.Full, "receiver"))
         .AddPolicy(AuthPolicy.ReceiverTFA, policy =>
             policy.RequireRole(Role.Receiver.TFA));
 
@@ -224,7 +290,9 @@ try
 
     app.UseMiddleware<ExceptionHandlingMiddleware>();
 
+#if NET9_0_OR_GREATER
     app.MapOpenApi();
+#endif
 
     // Configure the HTTP request pipeline.
     if (app.Environment.IsDevelopment() || (app.IsDevOrDiP() && config.GetValue<bool>("UseSwagger")))
@@ -258,9 +326,11 @@ try
     app.UseAuthentication();
     app.UseAuthorization();
 
-    app.MapReverseProxy();
     app.MapControllers();
 
+    // Catch-all YARP proxy — only forward requests that are not swagger/scalar/openapi paths.
+    app.MapReverseProxy();
+
     app.Run();
 }
 catch (Exception ex)

EnvelopeGenerator.API/Properties/PublishProfiles/IISProfileNet8.pubxml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+https://go.microsoft.com/fwlink/?LinkID=208121.
+-->
+<Project>
+  <PropertyGroup>
+    <WebPublishMethod>Package</WebPublishMethod>
+    <LastUsedBuildConfiguration>Release</LastUsedBuildConfiguration>
+    <LastUsedPlatform>Any CPU</LastUsedPlatform>
+    <SiteUrlToLaunchAfterPublish />
+    <LaunchSiteAfterPublish>true</LaunchSiteAfterPublish>
+    <ExcludeApp_Data>false</ExcludeApp_Data>
+    <ProjectGuid>5e0e17c0-ff5a-4246-bf87-1add85376a27</ProjectGuid>
+    <DesktopBuildPackageLocation>M:\App&amp;Service\0 DD - Smart UP\signFLOW\API\net8\$(Version)\EnvelopeGenerator.API.zip</DesktopBuildPackageLocation>
+    <PackageAsSingleFile>true</PackageAsSingleFile>
+    <DeployIisAppPath>EnvelopeGenerator</DeployIisAppPath>
+    <_TargetId>IISWebDeployPackage</_TargetId>
+    <TargetFramework>net8.0</TargetFramework>
+  </PropertyGroup>
+</Project>

EnvelopeGenerator.API/appsettings.Development.json

@@ -1,10 +1,21 @@
 {
-  "Logging": {
-    "LogLevel": {
-      "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
+"Logging": {
+  "LogLevel": {
+    "Default": "Information",
+    "Microsoft.AspNetCore": "Warning"
+  }
+},
+"ReverseProxy": {
+  "Clusters": {
+    "receiver-ui": {
+      "Destinations": {
+        "primary": {
+          "Address": "https://localhost:52936"
+        }
+      }
     }
-  },
+  }
+},
   "AuthClientParams": {
     "Url": "http://172.24.12.39:9090/auth-hub",
     "PublicKeys": [

EnvelopeGenerator.API/appsettings.json

@@ -1,6 +1,6 @@
 {
   "UseSwagger": true,
-  "UseDbMigration": true,
+  "UseDbMigration": false,
   "DiPMode": true,
   "Logging": {
     "LogLevel": {

EnvelopeGenerator.API/yarp.json

@@ -1,18 +1,168 @@
 {
-  "ReverseProxy": {
-    "Routes": {
-      "auth-login": {
-        "ClusterId": "auth-hub",
-        "Match": {
-          "Path": "/api/auth",
-          "Methods": [ "POST" ]
-        },
-        "Transforms": [
-          { "PathSet": "/api/auth/sign-flow" }
-        ]
+"ReverseProxy": {
+  "Routes": {
+    "receiver-ui-receiver": {
+      "ClusterId": "receiver-ui",
+      "Order": 100,
+      "Match": {
+        "Path": "/receiver/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
       }
     },
+    "receiver-ui-login": {
+      "ClusterId": "receiver-ui",
+      "Order": 100,
+      "Match": {
+        "Path": "/login/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "receiver-ui-sender": {
+      "ClusterId": "receiver-ui",
+      "Order": 100,
+      "Match": {
+        "Path": "/sender/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "receiver-ui-envelope": {
+      "ClusterId": "receiver-ui",
+      "Order": 100,
+      "Match": {
+        "Path": "/envelope/{EnvelopeKey}",
+        "Methods": [ "GET", "HEAD" ]
+      },
+      "Transforms": [
+        { "PathSet": "/index.html" }
+      ]
+    },
+    "receiver-ui-blazor-framework": {
+      "ClusterId": "receiver-ui",
+      "Order": 50,
+      "Match": {
+        "Path": "/_framework/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "receiver-ui-blazor-content": {
+      "ClusterId": "receiver-ui",
+      "Order": 50,
+      "Match": {
+        "Path": "/_content/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "receiver-ui-static-css": {
+      "ClusterId": "receiver-ui",
+      "Order": 200,
+      "Match": {
+        "Path": "/css/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
+      },
+      "Transforms": [
+        {
+          "ResponseHeader": "Cache-Control",
+          "Set": "no-cache, no-store, must-revalidate",
+          "When": "Always"
+        }
+      ]
+    },
+    "receiver-ui-static-js": {
+      "ClusterId": "receiver-ui",
+      "Order": 200,
+      "Match": {
+        "Path": "/js/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
+      },
+      "Transforms": [
+        {
+          "ResponseHeader": "Cache-Control",
+          "Set": "no-cache, no-store, must-revalidate",
+          "When": "Always"
+        }
+      ]
+    },
+    "receiver-ui-fake-data": {
+      "ClusterId": "receiver-ui",
+      "Order": 200,
+      "Match": {
+        "Path": "/fake-data/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "receiver-ui-appsettings": {
+      "ClusterId": "receiver-ui",
+      "Order": 50,
+      "Match": {
+        "Path": "/appsettings.json",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "receiver-ui-appsettings-dev": {
+      "ClusterId": "receiver-ui",
+      "Order": 50,
+      "Match": {
+        "Path": "/appsettings.Development.json",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "receiver-ui-styles": {
+      "ClusterId": "receiver-ui",
+      "Order": 50,
+      "Match": {
+        "Path": "/EnvelopeGenerator.ReceiverUI.styles.css",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "receiver-ui-fonts": {
+      "ClusterId": "receiver-ui",
+      "Order": 200,
+      "Match": {
+        "Path": "/fonts/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "receiver-ui-images": {
+      "ClusterId": "receiver-ui",
+      "Order": 200,
+      "Match": {
+        "Path": "/images/{**catch-all}",
+        "Methods": [ "GET", "HEAD" ]
+      }
+    },
+    "auth-login": {
+      "ClusterId": "auth-hub",
+      "Match": {
+        "Path": "/api/auth",
+        "Methods": [ "POST" ]
+      },
+      "Transforms": [
+        { "PathSet": "/api/auth/sign-flow" }
+      ]
+    },
+    "auth-envelope-receiver-login": {
+      "ClusterId": "auth-hub",
+      "Match": {
+        "Path": "/api/Auth/envelope-receiver/{key}",
+        "Methods": [ "POST" ]
+      },
+      "Transforms": [
+        { "PathPattern": "/api/auth/envelope-receiver/{key}" },
+        {
+          "QueryValueParameter": "cookie",
+          "Set": "true"
+        }
+      ]
+    }
+  },
     "Clusters": {
+      "receiver-ui": {
+        "Destinations": {
+          "primary": {
+            "Address": "https://localhost:52936"
+          }
+        }
+      },
       "auth-hub": {
         "Destinations": {
           "primary": {
@@ -23,3 +173,4 @@
     }
   }
 }
+

EnvelopeGenerator.Application/Common/Dto/AnnotationDto.cs

@@ -8,42 +8,77 @@ public record AnnotationCreateDto
     /// <summary>
     /// 
     /// </summary>
-    public int ElementId { get; init; }
+    public long Id { get; set; }
 
     /// <summary>
     /// 
     /// </summary>
-    public string Name { get; init; } = null!;
+    [Obsolete("Not required for DevExpress")]
+    public int ElementId { get; init; } = -1;
 
     /// <summary>
     /// 
     /// </summary>
-    public string Value { get; init; } = null!;
+    [Obsolete("Not required for DevExpress")]
+    public string Name { get; init; } = string.Empty;
 
     /// <summary>
     /// 
     /// </summary>
-    public string Type { get; init; } = null!;
+    [Obsolete("Not required for DevExpress")]
+    public string Value { get; init; } = string.Empty;
 
     /// <summary>
     /// 
     /// </summary>
+    [Obsolete("Not required for DevExpress")]
+    public string Type { get; init; } = string.Empty;
+
+    /// <summary>
+    /// Horizontal position of the signature field on the page.
+    /// <br/><br/>
+    /// <b>Unit:</b> INCHES (GdPicture14 native), origin at the <b>top-left</b> corner of the page, X increases to the right.
+    /// <br/>
+    /// <b>Conversion to DevExpress:</b> Multiply by 100 (DX uses 1/100 inch).
+    /// Convert: <c>xDX = xInches * 100.0</c>
+    /// <br/>
+    /// <b>Conversion to PDF Points:</b> Multiply by 72 (PSPDFKit, iText7 use 1/72 inch).
+    /// Convert: <c>xPt = xInches * 72.0</c>
+    /// </summary>
     public double? X { get; init; }
 
     /// <summary>
-    /// 
+    /// Vertical position of the signature field on the page.
+    /// <br/><br/>
+    /// <b>Unit:</b> INCHES (GdPicture14 native), origin at the <b>top-left</b> corner of the page, Y increases downward.
+    /// <br/>
+    /// <b>Conversion to DevExpress:</b> Multiply by 100 (DX uses 1/100 inch).
+    /// Convert: <c>yDX = yInches * 100.0</c>
+    /// <br/>
+    /// <b>Conversion to PDF Points (top-left origin):</b> Multiply by 72.
+    /// Convert: <c>yPt = yInches * 72.0</c>
+    /// <br/>
+    /// <b>Conversion to PDF Points (bottom-left origin - iText7):</b> Y-flip required.
+    /// Convert: <c>yPt = (pageHeightInches - yInches - elemHeightInches) * 72.0</c>
     /// </summary>
     public double? Y { get; init; }
 
     /// <summary>
     /// 
     /// </summary>
+    [Obsolete("Not required for DevExpress")]
     public double? Width { get; init; }
 
     /// <summary>
     /// 
     /// </summary>
+    [Obsolete("Not required for DevExpress")]
     public double? Height { get; init; }
+
+    /// <summary>
+    /// Added to eliminate the need for SignatureDto in DevExpress 
+    /// </summary>
+    public int? Page { get; init; }
 }
 
 /// <summary>

EnvelopeGenerator.Application/Common/Dto/SignatureDto.cs

@@ -1,4 +1,5 @@
-using EnvelopeGenerator.Domain.Interfaces;
+using EnvelopeGenerator.Domain.Constants;
+using EnvelopeGenerator.Domain.Interfaces;
 using Microsoft.AspNetCore.Mvc;
 
 namespace EnvelopeGenerator.Application.Common.Dto;
@@ -93,4 +94,14 @@ public class SignatureDto : ISignature
     /// Gets or sets the left position of the element (in layout terms).
     /// </summary>
     public double Left => X;
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public IEnumerable<AnnotationDto>? Annotations { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public SenderAppType SenderAppType { get; set; } = SenderAppType.LegacyFormApp;
 }

EnvelopeGenerator.Application/Documents/Queries/ReadDocumentQuery.cs

@@ -53,14 +53,17 @@ public class ReadDocumentQueryHandler : IRequestHandler<ReadDocumentQuery, Docum
     /// </exception>
     public async Task<DocumentDto> Handle(ReadDocumentQuery query, CancellationToken cancel)
     {
+        var docQuery = _repo.Query.Include(doc => doc.Elements).ThenInclude(e => e.Annotations);
+
         if (query.Id is not null)
         {
-            var doc = await _repo.Query.Where(d => d.Id == query.Id).FirstOrDefaultAsync(cancel);
+            var doc = await docQuery.Where(d => d.Id == query.Id).FirstOrDefaultAsync(cancel);
+            
             return _mapper.Map<DocumentDto>(doc);
         }            
         else if (query.EnvelopeId is not null)
         {
-            var doc = await _repo.Query.Where(d => d.EnvelopeId == query.EnvelopeId).FirstOrDefaultAsync(cancel);
+            var doc = await docQuery.Where(d => d.EnvelopeId == query.EnvelopeId).FirstOrDefaultAsync(cancel);
             return _mapper.Map<DocumentDto>(doc);
         }
 

EnvelopeGenerator.Application/EnvelopeReceivers/Queries/ReadEnvelopeReceiverSecretQuery.cs

@@ -0,0 +1,127 @@
+using AutoMapper;
+using DigitalData.Core.Abstraction.Application.Repository;
+using EnvelopeGenerator.Application.Envelopes.Queries;
+using EnvelopeGenerator.Application.Receivers.Queries;
+using MediatR;
+using EnvelopeGenerator.Domain.Entities;
+using Microsoft.EntityFrameworkCore;
+using EnvelopeGenerator.Application.Common.Dto.EnvelopeReceiver;
+using EnvelopeGenerator.Application.Common.Query;
+using EnvelopeGenerator.Application.Common.Extensions;
+
+namespace EnvelopeGenerator.Application.EnvelopeReceivers.Queries;
+
+/// <summary>
+/// Represents a query for reading an envelope receiver including sensitive fields
+/// (access code, phone number) that are excluded from the standard <see cref="ReadEnvelopeReceiverQuery"/>.
+/// </summary>
+/// <remarks>
+/// Returns a single <see cref="EnvelopeReceiverSecretDto"/> matched by UUID and receiver signature.
+/// Equivalent to the legacy <c>ReadWithSecretByUuidSignatureAsync</c> service method.
+/// </remarks>
+public record ReadEnvelopeReceiverSecretQuery
+    : EnvelopeReceiverQueryBase<ReadEnvelopeQuery, ReadReceiverQuery>,
+      IRequest<EnvelopeReceiverSecretDto?>;
+
+/// <summary>
+/// Extension methods for dispatching <see cref="ReadEnvelopeReceiverSecretQuery"/> via <see cref="IMediator"/>.
+/// </summary>
+public static class ReadEnvelopeReceiverSecretQueryExtensions
+{
+    /// <summary>
+    /// Sends a <see cref="ReadEnvelopeReceiverSecretQuery"/> using the composite key (uuid::signature).
+    /// </summary>
+    /// <param name="mediator">The mediator instance.</param>
+    /// <param name="key">Composite key in the format <c>uuid::signature</c>.</param>
+    /// <param name="cancel">Cancellation token.</param>
+    /// <returns>The matching <see cref="EnvelopeReceiverSecretDto"/>, or <c>null</c> if not found.</returns>
+    public static Task<EnvelopeReceiverSecretDto?> ReadEnvelopeReceiverSecretAsync(
+        this IMediator mediator,
+        string key,
+        CancellationToken cancel = default)
+        => mediator.Send(new ReadEnvelopeReceiverSecretQuery { Key = key }, cancel);
+
+    /// <summary>
+    /// Sends a <see cref="ReadEnvelopeReceiverSecretQuery"/> using UUID and receiver signature.
+    /// </summary>
+    /// <param name="mediator">The mediator instance.</param>
+    /// <param name="uuid">Envelope UUID.</param>
+    /// <param name="signature">Receiver signature.</param>
+    /// <param name="cancel">Cancellation token.</param>
+    /// <returns>The matching <see cref="EnvelopeReceiverSecretDto"/>, or <c>null</c> if not found.</returns>
+    public static Task<EnvelopeReceiverSecretDto?> ReadEnvelopeReceiverSecretAsync(
+        this IMediator mediator,
+        string uuid,
+        string signature,
+        CancellationToken cancel = default)
+    {
+        var q = new ReadEnvelopeReceiverSecretQuery();
+        q.Envelope.Uuid = uuid;
+        q.Receiver.Signature = signature;
+        return mediator.Send(q, cancel);
+    }
+
+    /// <summary>
+    /// Handles <see cref="ReadEnvelopeReceiverSecretQuery"/> and returns a
+    /// <see cref="EnvelopeReceiverSecretDto"/> containing sensitive fields.
+    /// </summary>
+    public class ReadEnvelopeReceiverSecretQueryHandler
+        : IRequestHandler<ReadEnvelopeReceiverSecretQuery, EnvelopeReceiverSecretDto?>
+    {
+        private readonly IRepository<EnvelopeReceiver> _repo;
+        private readonly IRepository<Receiver> _rcvRepo;
+        private readonly IMapper _mapper;
+
+        /// <summary>
+        /// Initializes a new instance of <see cref="ReadEnvelopeReceiverSecretQueryHandler"/>.
+        /// </summary>
+        /// <param name="envelopeReceiver">Repository for <see cref="EnvelopeReceiver"/>.</param>
+        /// <param name="rcvRepo">Repository for <see cref="Receiver"/>.</param>
+        /// <param name="mapper">AutoMapper instance.</param>
+        public ReadEnvelopeReceiverSecretQueryHandler(
+            IRepository<EnvelopeReceiver> envelopeReceiver,
+            IRepository<Receiver> rcvRepo,
+            IMapper mapper)
+        {
+            _repo = envelopeReceiver;
+            _rcvRepo = rcvRepo;
+            _mapper = mapper;
+        }
+
+        /// <summary>
+        /// Handles the query and returns the matching <see cref="EnvelopeReceiverSecretDto"/>.
+        /// </summary>
+        /// <param name="request">The query containing filter criteria.</param>
+        /// <param name="cancel">Cancellation token.</param>
+        /// <returns>
+        /// The matched <see cref="EnvelopeReceiverSecretDto"/>, or <c>null</c> if no record is found.
+        /// </returns>
+        public async Task<EnvelopeReceiverSecretDto?> Handle(
+            ReadEnvelopeReceiverSecretQuery request,
+            CancellationToken cancel)
+        {
+            var q = _repo.Query.Where(request, notnull: false);
+
+            var envRcvs = await q
+                .Include(er => er.Envelope).ThenInclude(e => e!.Documents!).ThenInclude(d => d.Elements)
+                .Include(er => er.Envelope).ThenInclude(e => e!.Histories)
+                .Include(er => er.Envelope).ThenInclude(e => e!.User)
+                .Include(er => er.Receiver)
+                .ToListAsync(cancel);
+
+            if (request.Receiver.HasAnyCriteria && envRcvs.Count != 0)
+            {
+                var receiver = await _rcvRepo.Query.Where(request.Receiver).FirstAsync(cancel);
+
+                foreach (var item in envRcvs)
+                    item.Envelope?.Documents?.FirstOrDefault()?.Elements?.RemoveAll(s => s.ReceiverId != receiver.Id);
+            }
+
+            var envRcv = envRcvs.FirstOrDefault();
+            if (envRcv is null)
+                return null;
+
+            return _mapper.Map<EnvelopeReceiverSecretDto>(envRcv);
+        }
+    }
+}

EnvelopeGenerator.Application/Envelopes/Commands/CreateEnvelopeCommand.cs

@@ -40,10 +40,10 @@ public record CreateEnvelopeCommand : IRequest<EnvelopeDto?>
     /// </summary>
     /// <param name="userId"></param>
     /// <returns></returns>
-    public bool Authorize(int userId)
+    public CreateEnvelopeCommand WithAuth(int userId)
     {
         UserId = userId;
-        return true;
+        return this;
     }
 
     /// <summary>

EnvelopeGenerator.DependencyInjection/DependencyInjection.cs

@@ -0,0 +1,145 @@
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.DependencyInjection;
+using EnvelopeGenerator.Application;
+using EnvelopeGenerator.Application.Common.Interfaces.Services;
+using EnvelopeGenerator.Application.Services;
+using EnvelopeGenerator.Infrastructure;
+using DigitalData.EmailProfilerDispatcher;
+using DigitalData.UserManager.DependencyInjection;
+
+namespace EnvelopeGenerator.DependencyInjection;
+
+/// <summary>
+/// Controls which optional services are registered by <see cref="DependencyInjection.AddEnvelopeGenerator"/>.
+/// All flags default to <c>true</c>. Set a flag to <c>false</c> if the consuming project
+/// already registers that service itself or simply does not need it.
+/// </summary>
+public sealed class EnvelopeGeneratorOptions
+{
+    /// <summary>Calls <c>AddHttpContextAccessor()</c>. Default: <c>true</c>.</summary>
+    public bool AddHttpContextAccessor { get; set; } = true;
+
+    /// <summary>
+    /// Calls <c>AddDistributedSqlServerCache()</c> with the supplied <see cref="SqlCacheOptions"/>.
+    /// Requires <see cref="SqlCacheOptions"/> to be configured. Default: <c>true</c>.
+    /// </summary>
+    public bool AddDistributedSqlServerCache { get; set; } = true;
+
+    /// <summary>
+    /// Options for the distributed SQL Server cache.
+    /// Required when <see cref="AddDistributedSqlServerCache"/> is <c>true</c>.
+    /// </summary>
+    public SqlCacheOptions? SqlCacheOptions { get; set; }
+
+    /// <summary>Calls <c>AddDispatcher&lt;TDbContext&gt;()</c>. Default: <c>true</c>.</summary>
+    public bool AddDispatcher { get; set; } = true;
+
+    /// <summary>Calls <c>AddMemoryCache()</c>. Default: <c>true</c>.</summary>
+    public bool AddMemoryCache { get; set; } = true;
+
+    /// <summary>Calls <c>AddUserManager&lt;TDbContext&gt;()</c>. Default: <c>true</c>.</summary>
+    public bool AddUserManager { get; set; } = true;
+}
+
+/// <summary>Options for <c>AddDistributedSqlServerCache</c>.</summary>
+public sealed class SqlCacheOptions
+{
+    /// <summary>SQL Server connection string.</summary>
+    public string ConnectionString { get; set; } = string.Empty;
+
+    /// <summary>Schema name. Default: <c>dbo</c>.</summary>
+    public string SchemaName { get; set; } = "dbo";
+
+    /// <summary>Table name. Default: <c>TBDD_CACHE</c>.</summary>
+    public string TableName { get; set; } = "TBDD_CACHE";
+}
+
+/// <summary>
+/// Extension methods for registering EnvelopeGenerator services into an <see cref="IServiceCollection"/>.
+/// Use <see cref="AddEnvelopeGenerator{TDbContext}"/> as the single entry-point for projects that need both the
+/// application layer (MediatR, AutoMapper, CRUD services, configuration sections) and the infrastructure
+/// layer (repositories, DbContext, SQL executors).
+/// For projects that do not need a database (e.g. lightweight API gateways or unit-test hosts), use
+/// <see cref="AddEnvelopeGeneratorCore"/> to register only the application layer.
+/// </summary>
+public static class DependencyInjection
+{
+    /// <summary>
+    /// Registers the full EnvelopeGenerator stack using <see cref="EGDbContext"/> as the DbContext type.
+    /// </summary>
+    public static IServiceCollection AddEnvelopeGenerator(
+        this IServiceCollection services,
+        IConfiguration configuration,
+        Action<EnvelopeGenerator.Infrastructure.DependencyInjection.Config>? infrastructureOptions = null,
+        Action<EnvelopeGeneratorOptions>? options = null)
+    {
+        var opt = new EnvelopeGeneratorOptions();
+        options?.Invoke(opt);
+
+#pragma warning disable CS0618
+        // Application layer: CRUD services, MediatR, AutoMapper, configuration sections.
+        services.AddEnvelopeGeneratorServices(configuration);
+
+        // Infrastructure layer: repositories, DbContext, Dapper type maps, SQL executors.
+        services.AddEnvelopeGeneratorInfrastructureServices(cfg =>
+        {
+            infrastructureOptions?.Invoke(cfg);
+        });
+#pragma warning restore CS0618
+
+        if (opt.AddHttpContextAccessor)
+            services.AddHttpContextAccessor();
+
+        if (opt.AddDistributedSqlServerCache && opt.SqlCacheOptions is { } cacheOpts)
+            services.AddDistributedSqlServerCache(o =>
+            {
+                o.ConnectionString = cacheOpts.ConnectionString;
+                o.SchemaName = cacheOpts.SchemaName;
+                o.TableName = cacheOpts.TableName;
+            });
+
+        if (opt.AddDispatcher)
+            services.AddDispatcher<EGDbContext>();
+
+        if (opt.AddMemoryCache)
+            services.AddMemoryCache();
+
+#pragma warning disable CS0618
+        if (opt.AddUserManager)
+            services.AddUserManager<EGDbContext>();
+#pragma warning restore CS0618
+
+        return services;
+    }
+
+    /// <summary>
+    /// Registers only the <em>application</em> layer services (MediatR handlers, AutoMapper profiles,
+    /// CRUD services, configuration sections) without any infrastructure / database dependencies.
+    /// </summary>
+    /// <param name="services">Service collection to register services into.</param>
+    /// <param name="configuration">Application configuration used to bind application-level option sections.</param>
+    /// <returns>The updated <see cref="IServiceCollection"/>.</returns>
+#pragma warning disable CS0618
+    public static IServiceCollection AddEnvelopeGeneratorCore(
+        this IServiceCollection services,
+        IConfiguration configuration)
+    {
+        services.AddEnvelopeGeneratorServices(configuration);
+        return services;
+    }
+#pragma warning restore CS0618
+
+    /// <summary>
+    /// Registers <see cref="EnvelopeMailService"/> as the <see cref="IEnvelopeMailService"/> scoped
+    /// implementation.
+    /// </summary>
+    /// <param name="services">Service collection to register services into.</param>
+    /// <returns>The updated <see cref="IServiceCollection"/>.</returns>
+#pragma warning disable CS0618
+    public static IServiceCollection AddEnvelopeMailService(this IServiceCollection services)
+    {
+        services.AddScoped<IEnvelopeMailService, EnvelopeMailService>();
+        return services;
+    }
+#pragma warning restore CS0618
+}

EnvelopeGenerator.DependencyInjection/EnvelopeGenerator.DependencyInjection.csproj

@@ -0,0 +1,176 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFrameworks>net7.0;net8.0;net9.0</TargetFrameworks>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+
+    <!-- NuGet package metadata -->
+    <PackageId>EnvelopeGenerator</PackageId>
+    <Authors>Digital Data GmbH</Authors>
+    <Company>Digital Data GmbH</Company>
+    <Product>EnvelopeGenerator</Product>
+    <Description>
+      Envelope Generator ist eine Bibliothek zur Verwaltung und Verarbeitung digitaler Umschläge (Envelopes).
+      Dieses Paket enthält die Dependency-Injection-Erweiterungsmethoden und bündelt die Application-
+      sowie Infrastructure-Schicht in einer einzigen NuGet-Referenz.
+    </Description>
+    <Copyright>Copyright 2024 Digital Data GmbH</Copyright>
+    <RepositoryUrl>http://git.dd:3000/AppStd/EnvelopeGenerator.git</RepositoryUrl>
+    <PackageTags>digital data envelope generator di dependency injection</PackageTags>
+    <PackageRequireLicenseAcceptance>false</PackageRequireLicenseAcceptance>
+    <Version>1.2.0.3</Version>
+    <AssemblyVersion>1.2.0.3</AssemblyVersion>
+    <FileVersion>1.2.0.3</FileVersion>
+    <GeneratePackageOnBuild>false</GeneratePackageOnBuild>
+  </PropertyGroup>
+
+  <!-- ASP.NET Core shared framework (AddHttpContextAccessor, AddMemoryCache, etc.) -->
+  <ItemGroup>
+    <FrameworkReference Include="Microsoft.AspNetCore.App" />
+  </ItemGroup>
+
+  <!--
+    All dependencies are declared here.
+    Because Application and Infrastructure DLLs are bundled via PrivateAssets=all,
+    their PackageReferences have been moved to this project so that the correct
+    dependencies are written to the nuspec and a consuming project works with
+    a single package install.
+  -->
+  <ItemGroup>
+    <!-- DigitalData BaGet packages -->
+    <PackageReference Include="DigitalData.Core.Abstraction.Application" Version="1.6.0" />
+    <PackageReference Include="DigitalData.Core.Application" Version="3.4.0" />
+    <PackageReference Include="DigitalData.Core.Client" Version="2.1.0" />
+    <PackageReference Include="DigitalData.Core.Exceptions" Version="1.1.0" />
+    <PackageReference Include="DigitalData.Core.Infrastructure" Version="2.6.1" />
+    <PackageReference Include="DigitalData.EmailProfilerDispatcher" Version="3.1.1" />
+    <PackageReference Include="UserManager" Version="1.1.3" />
+
+    <!-- ORM / Database -->
+    <PackageReference Include="Dapper" Version="2.1.66" />
+    <PackageReference Include="Microsoft.Data.SqlClient" Version="5.2.2" />
+
+    <!-- Application services -->
+    <PackageReference Include="MediatR" Version="12.5.0" />
+    <PackageReference Include="QRCoder" Version="1.6.0" />
+    <PackageReference Include="QRCoder-ImageSharp" Version="0.10.0" />
+    <PackageReference Include="QuestPDF" Version="2025.7.1" />
+    <PackageReference Include="Otp.NET" Version="1.4.0" />
+
+    <!-- Security / Identity -->
+    <PackageReference Include="Microsoft.Identity.Client" Version="4.82.1" />
+
+    <!-- Utilities -->
+    <PackageReference Include="HtmlSanitizer" Version="9.0.892" />
+    <PackageReference Include="SixLabors.ImageSharp" Version="3.1.12" />
+    <PackageReference Include="System.Formats.Asn1" Version="10.0.3" />
+    <PackageReference Include="System.Security.AccessControl" Version="6.0.1" />
+
+    <!-- DI abstractions -->
+    <PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="9.0.6" />
+    <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="9.0.6" />
+  </ItemGroup>
+
+  <!-- TFM-specific packages -->
+  <ItemGroup Condition="'$(TargetFramework)' == 'net7.0'">
+    <PackageReference Include="AutoMapper" Version="13.0.1" />
+    <PackageReference Include="CommandDotNet" Version="7.0.5" />
+    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="7.0.20" />
+    <PackageReference Include="Microsoft.Extensions.Caching.SqlServer" Version="7.0.20" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="7.0.20" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Relational" Version="7.0.20" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="7.0.20" />
+  </ItemGroup>
+
+  <ItemGroup Condition="'$(TargetFramework)' == 'net8.0'">
+    <PackageReference Include="AutoMapper" Version="14.0.0" />
+    <PackageReference Include="CommandDotNet" Version="8.1.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="8.0.17" />
+    <PackageReference Include="Microsoft.Extensions.Caching.SqlServer" Version="8.0.17" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.17" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Relational" Version="8.0.17" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.17" />
+  </ItemGroup>
+
+  <ItemGroup Condition="'$(TargetFramework)' == 'net9.0'">
+    <PackageReference Include="AutoMapper" Version="14.0.0" />
+    <PackageReference Include="CommandDotNet" Version="8.1.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="9.0.6" />
+    <PackageReference Include="Microsoft.Extensions.Caching.SqlServer" Version="9.0.6" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.6" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Relational" Version="9.0.6" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.6" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\EnvelopeGenerator.Application\EnvelopeGenerator.Application.csproj">
+      <PrivateAssets>all</PrivateAssets>
+    </ProjectReference>
+    <ProjectReference Include="..\EnvelopeGenerator.Domain\EnvelopeGenerator.Domain.csproj">
+      <PrivateAssets>all</PrivateAssets>
+    </ProjectReference>
+    <ProjectReference Include="..\EnvelopeGenerator.Infrastructure\EnvelopeGenerator.Infrastructure.csproj">
+      <PrivateAssets>all</PrivateAssets>
+    </ProjectReference>
+  </ItemGroup>
+
+  <!-- Bundle dependency DLLs into the package lib folder -->
+  <Target Name="IncludeDependencyDlls" BeforeTargets="_GetPackageFiles">
+    <ItemGroup>
+      <_DepDlls Include="&#xD;&#xA;        ..\EnvelopeGenerator.Application\bin\$(Configuration)\%(ProjectReference.TargetFramework)\EnvelopeGenerator.Application.dll;&#xD;&#xA;        ..\EnvelopeGenerator.Domain\bin\$(Configuration)\%(ProjectReference.TargetFramework)\EnvelopeGenerator.Domain.dll;&#xD;&#xA;        ..\EnvelopeGenerator.Infrastructure\bin\$(Configuration)\%(ProjectReference.TargetFramework)\EnvelopeGenerator.Infrastructure.dll" />
+    </ItemGroup>
+  </Target>
+
+  <!--
+    Rebuild all dependency projects for every TFM before packing so that
+    the DLLs bundled into the package are always up-to-date.
+    Run with: dotnet pack -c Release
+  -->
+  <Target Name="RebuildDependenciesBeforePack" BeforeTargets="GenerateNuspec">
+    <MSBuild Projects="..\EnvelopeGenerator.Application\EnvelopeGenerator.Application.csproj"
+             Targets="Build"
+             Properties="Configuration=$(Configuration);TargetFramework=net7.0" />
+    <MSBuild Projects="..\EnvelopeGenerator.Application\EnvelopeGenerator.Application.csproj"
+             Targets="Build"
+             Properties="Configuration=$(Configuration);TargetFramework=net8.0" />
+    <MSBuild Projects="..\EnvelopeGenerator.Application\EnvelopeGenerator.Application.csproj"
+             Targets="Build"
+             Properties="Configuration=$(Configuration);TargetFramework=net9.0" />
+
+    <MSBuild Projects="..\EnvelopeGenerator.Domain\EnvelopeGenerator.Domain.csproj"
+             Targets="Build"
+             Properties="Configuration=$(Configuration);TargetFramework=net7.0" />
+    <MSBuild Projects="..\EnvelopeGenerator.Domain\EnvelopeGenerator.Domain.csproj"
+             Targets="Build"
+             Properties="Configuration=$(Configuration);TargetFramework=net8.0" />
+    <MSBuild Projects="..\EnvelopeGenerator.Domain\EnvelopeGenerator.Domain.csproj"
+             Targets="Build"
+             Properties="Configuration=$(Configuration);TargetFramework=net9.0" />
+
+    <MSBuild Projects="..\EnvelopeGenerator.Infrastructure\EnvelopeGenerator.Infrastructure.csproj"
+             Targets="Build"
+             Properties="Configuration=$(Configuration);TargetFramework=net7.0" />
+    <MSBuild Projects="..\EnvelopeGenerator.Infrastructure\EnvelopeGenerator.Infrastructure.csproj"
+             Targets="Build"
+             Properties="Configuration=$(Configuration);TargetFramework=net8.0" />
+    <MSBuild Projects="..\EnvelopeGenerator.Infrastructure\EnvelopeGenerator.Infrastructure.csproj"
+             Targets="Build"
+             Properties="Configuration=$(Configuration);TargetFramework=net9.0" />
+  </Target>
+
+  <Target Name="BundleReferencedDlls" AfterTargets="Build">
+    <ItemGroup>
+      <BuildOutputInPackage Include="..\EnvelopeGenerator.Application\bin\$(Configuration)\net7.0\EnvelopeGenerator.Application.dll" TargetFramework="net7.0" />
+      <BuildOutputInPackage Include="..\EnvelopeGenerator.Application\bin\$(Configuration)\net8.0\EnvelopeGenerator.Application.dll" TargetFramework="net8.0" />
+      <BuildOutputInPackage Include="..\EnvelopeGenerator.Application\bin\$(Configuration)\net9.0\EnvelopeGenerator.Application.dll" TargetFramework="net9.0" />
+      <BuildOutputInPackage Include="..\EnvelopeGenerator.Domain\bin\$(Configuration)\net7.0\EnvelopeGenerator.Domain.dll" TargetFramework="net7.0" />
+      <BuildOutputInPackage Include="..\EnvelopeGenerator.Domain\bin\$(Configuration)\net8.0\EnvelopeGenerator.Domain.dll" TargetFramework="net8.0" />
+      <BuildOutputInPackage Include="..\EnvelopeGenerator.Domain\bin\$(Configuration)\net9.0\EnvelopeGenerator.Domain.dll" TargetFramework="net9.0" />
+      <BuildOutputInPackage Include="..\EnvelopeGenerator.Infrastructure\bin\$(Configuration)\net7.0\EnvelopeGenerator.Infrastructure.dll" TargetFramework="net7.0" />
+      <BuildOutputInPackage Include="..\EnvelopeGenerator.Infrastructure\bin\$(Configuration)\net8.0\EnvelopeGenerator.Infrastructure.dll" TargetFramework="net8.0" />
+      <BuildOutputInPackage Include="..\EnvelopeGenerator.Infrastructure\bin\$(Configuration)\net9.0\EnvelopeGenerator.Infrastructure.dll" TargetFramework="net9.0" />
+    </ItemGroup>
+  </Target>
+
+</Project>

EnvelopeGenerator.Domain/Constants/SenderAppType.cs

@@ -0,0 +1,8 @@
+namespace EnvelopeGenerator.Domain.Constants
+{
+    public enum SenderAppType
+    {
+        LegacyFormApp = 0,
+        ReceiverUIBlazorApp = 1
+    }
+}

EnvelopeGenerator.ReceiverUI/EnvelopeGenerator.ReceiverUI.csproj

@@ -14,16 +14,20 @@
 	<PackageIcon>Assets\icon.ico</PackageIcon>
 	<PackageTags>digital data envelope generator web</PackageTags>
 	<Description>EnvelopeGenerator.ReceiverUI is a Blazor WebAssembly application developed to manage signing processes. It uses Entity Framework Core (EF Core) for database operations. The user interface for signing processes is developed with Razor View Engine (.cshtml files) and JavaScript under wwwroot, integrated with PSPDFKit. This integration allows users to view and sign documents seamlessly.</Description>
-	<Version>1.0.1</Version>
+	<Version>1.4.1</Version>
 	<!-- NuGet package version -->
-	<AssemblyVersion>1.0.1.0</AssemblyVersion>
+	<AssemblyVersion>1.4.1.0</AssemblyVersion>
 	<!-- Assembly version for API compatibility -->
-	<FileVersion>1.0.1.0</FileVersion>
+	<FileVersion>1.4.1.0</FileVersion>
 	<!-- Windows file version -->
 	<Copyright>Copyright © 2026 Digital Data GmbH. All rights reserved.</Copyright>
 	  
   </PropertyGroup>
   <ItemGroup>
+    <PackageReference Include="DevExpress.Blazor.PdfViewer" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Reporting.JSBasedControls" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Reporting.Viewer" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Drawing.Skia" Version="25.2.3" />
     <PackageReference Include="HarfBuzzSharp.NativeAssets.WebAssembly" Version="8.3.1.2" />
     <PackageReference Include="SkiaSharp.NativeAssets.WebAssembly" Version="3.119.1" />
     <PackageReference Include="SkiaSharp.Views.Blazor" Version="3.119.1" />
@@ -32,11 +36,16 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.11" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.11" PrivateAssets="all" />
-    <PackageReference Include="DevExpress.Drawing.Skia" Version="25.2.3" />
-    <PackageReference Include="DevExpress.Blazor.Reporting.JSBasedControls" Version="25.2.3" />
-    <PackageReference Include="DevExpress.Blazor.Reporting.Viewer" Version="25.2.3" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="Properties\PublishProfiles\" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Update="wwwroot\docs\privacy-policy.en-US.html">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+    <Content Update="wwwroot\docs\privacy-policy.fr-FR.html">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
 </Project>

EnvelopeGenerator.ReceiverUI/Models/AnnotationDto.cs

@@ -0,0 +1,32 @@
+namespace EnvelopeGenerator.ReceiverUI.Models;
+
+/// <summary>
+/// Represents a pre-assigned signature annotation position on a specific page.
+/// <br/><br/>
+/// <b>Coordinate unit (X, Y):</b> Inches (GdPicture14 native unit),
+/// origin at the <b>top-left</b> corner of the page, both axes increase downward/rightward.
+/// <br/><br/>
+/// <b>Conversion to DevExpress:</b> Multiply by 100 (DX uses 1/100 inch).
+/// Convert: <c>xDX = xInches * 100.0</c>
+/// <br/>
+/// <b>Conversion to PDF Points:</b> Multiply by 72 (1 inch = 72 points).
+/// Convert: <c>xPt = xInches * 72.0</c>
+/// <br/>
+/// <b>Y-axis for PDF (bottom-left origin):</b> Flip required for iText7.
+/// Convert: <c>yPt = (pageHeightInches - yInches - elemHeightInches) * 72.0</c>
+/// </summary>
+[Obsolete("Use SignatureDto with SignatureService.")]
+public record AnnotationDto
+{
+    /// <summary>Unique identifier of the annotation.</summary>
+    public long Id { get; init; }
+
+    /// <summary>1-based page number within the document.</summary>
+    public int Page { get; init; }
+
+    /// <summary>Horizontal position in INCHES from the left edge of the page.</summary>
+    public double X { get; init; }
+
+    /// <summary>Vertical position in INCHES from the top edge of the page.</summary>
+    public double Y { get; init; }
+}

EnvelopeGenerator.ReceiverUI/Models/Constants/SenderAppType.cs

@@ -0,0 +1,8 @@
+namespace EnvelopeGenerator.ReceiverUI.Models.Constants
+{
+    public enum SenderAppType
+    {
+        LegacyFormApp = 0,
+        ReceiverUIBlazorApp = 1
+    }
+}

EnvelopeGenerator.ReceiverUI/Models/Constants/UnitOfLength.cs

@@ -0,0 +1,65 @@
+namespace EnvelopeGenerator.ReceiverUI.Models.Constants;
+
+/// <summary>
+/// Represents the unit of measurement for coordinate values in signature positioning.
+/// Used for converting coordinates between different systems (GdPicture14, PDF.js, iText7).
+/// </summary>
+public enum UnitOfLength
+{
+    /// <summary>
+    /// Inch unit (1 inch = 25.4 mm).
+    /// This is the native unit used by GdPicture14 (EnvelopeGenerator.Form - Legacy VB.NET app).
+    /// Database stores all coordinates (X, Y, Width, Height) in INCHES.
+    /// </summary>
+    /// <remarks>
+    /// <b>Source:</b> GdPicture14.Annotations.AnnotationStickyNote uses INCHES natively.
+    /// <br/>
+    /// <b>Evidence:</b> VB.NET code directly assigns database values to annotation properties without conversion:
+    /// <code>
+    /// oAnnotation.Left = CSng(pElement.X)   ' Direct assignment → INCHES
+    /// oAnnotation.Top = CSng(pElement.Y)
+    /// </code>
+    /// <b>Standard Page Dimensions:</b>
+    /// <list type="bullet">
+    ///   <item>A4: 8.27" × 11.69" (210mm × 297mm)</item>
+    ///   <item>Letter: 8.5" × 11"</item>
+    /// </list>
+    /// </remarks>
+    Inch = 0,
+
+    /// <summary>
+    /// PDF Point unit (1 point = 1/72 inch).
+    /// This is the standard unit used by PDF specification and PDF.js viewer.
+    /// </summary>
+    /// <remarks>
+    /// <b>Definition:</b> According to PDF specification and Microsoft documentation:
+    /// <br/>
+    /// <i>"PDF pages are sized in point units. 1 pt == 1/72 inch"</i>
+    /// <br/><br/>
+    /// <b>Conversion Formula:</b>
+    /// <code>
+    /// points = inches * 72.0
+    /// inches = points / 72.0
+    /// </code>
+    /// <b>Important:</b> Point ≠ Pixel!
+    /// <list type="bullet">
+    ///   <item><b>Point (pt):</b> Device-independent unit (always 1/72 inch)</item>
+    ///   <item><b>Pixel (px):</b> Device-dependent unit (varies with screen DPI)</item>
+    ///   <item>At 72 DPI: 1 point = 1 pixel (coincidence)</item>
+    ///   <item>At 96 DPI: 1 point ≈ 1.33 pixels</item>
+    ///   <item>At 300 DPI: 1 point ≈ 4.17 pixels</item>
+    /// </list>
+    /// <b>Standard Page Dimensions (in points):</b>
+    /// <list type="bullet">
+    ///   <item>A4: 595 × 842 points (8.27" × 11.69" × 72)</item>
+    ///   <item>Letter: 612 × 792 points (8.5" × 11" × 72)</item>
+    /// </list>
+    /// <b>Usage in EnvelopeGenerator:</b>
+    /// <list type="bullet">
+    ///   <item>PDF.js viewer expects coordinates in points</item>
+    ///   <item>iText7 library uses points for PDF manipulation</item>
+    ///   <item>PSPDFKit (Web) uses points for annotation placement</item>
+    /// </list>
+    /// </remarks>
+    Point
+}

EnvelopeGenerator.ReceiverUI/Models/EnvelopeReceiverDto.cs

@@ -0,0 +1,106 @@
+namespace EnvelopeGenerator.ReceiverUI.Models;
+
+/// <summary>
+/// Client-side model for the envelope receiver returned by
+/// <c>GET api/EnvelopeReceiver/{envelopeKey}</c>.
+/// </summary>
+public record EnvelopeReceiverDto
+{
+    public int EnvelopeId { get; init; }
+    public int ReceiverId { get; init; }
+    public int Sequence { get; init; }
+
+    public string? Name { get; init; }
+    public string? JobTitle { get; init; }
+    public string? CompanyName { get; init; }
+    public string? PrivateMessage { get; init; }
+
+    public DateTime AddedWhen { get; init; }
+    public DateTime? ChangedWhen { get; init; }
+    public bool HasPhoneNumber { get; init; }
+
+    public EnvelopeClientDto? Envelope { get; init; }
+    public ReceiverClientDto? Receiver { get; init; }
+}
+
+/// <summary>
+/// Client-side model for the envelope data embedded in <see cref="EnvelopeReceiverDto"/>.
+/// </summary>
+public record EnvelopeClientDto
+{
+    public int Id { get; init; }
+    public int UserId { get; init; }
+    public int Status { get; init; }
+    public string StatusName { get; init; } = string.Empty;
+    public string Uuid { get; init; } = string.Empty;
+    public string Title { get; init; } = string.Empty;
+    public string Message { get; init; } = string.Empty;
+    public DateTime AddedWhen { get; init; }
+    public DateTime? ChangedWhen { get; init; }
+    public string Language { get; init; } = "de-DE";
+    public int? EnvelopeTypeId { get; init; }
+    public string? EnvelopeTypeTitle { get; init; }
+    public int? ContractType { get; init; }
+    public int? CertificationType { get; init; }
+    public bool UseAccessCode { get; init; }
+    public bool TFAEnabled { get; init; }
+    public IEnumerable<DocumentClientDto>? Documents { get; init; }
+    public EnvelopeSenderDto? User { get; init; }
+}
+
+/// <summary>
+/// Sender (user) information embedded in <see cref="EnvelopeClientDto"/>.
+/// </summary>
+public record EnvelopeSenderDto
+{
+    public int Id { get; init; }
+    public string? Username { get; init; }
+    public string? FullName { get; init; }
+    public string? Email { get; init; }
+}
+
+/// <summary>
+/// Client-side model for a document embedded in <see cref="EnvelopeClientDto"/>.
+/// </summary>
+public record DocumentClientDto
+{
+    public int Id { get; init; }
+    public int EnvelopeId { get; init; }
+    public DateTime AddedWhen { get; init; }
+    public IEnumerable<SignatureClientDto>? Elements { get; init; }
+}
+
+/// <summary>
+/// Client-side model for a signature/annotation element embedded in <see cref="DocumentClientDto"/>.
+/// </summary>
+public record SignatureClientDto
+{
+    public int Id { get; init; }
+    public int DocumentId { get; init; }
+    public int ReceiverId { get; init; }
+    public int ElementType { get; init; }
+    public double X { get; init; }
+    public double Y { get; init; }
+    public double Width { get; init; }
+    public double Height { get; init; }
+    public int Page { get; init; }
+    public bool Required { get; init; }
+    public string? Tooltip { get; init; }
+    public bool ReadOnly { get; init; }
+    public int AnnotationIndex { get; init; }
+    public DateTime AddedWhen { get; init; }
+    public DateTime? ChangedWhen { get; init; }
+}
+
+/// <summary>
+/// Client-side model for the receiver data embedded in <see cref="EnvelopeReceiverDto"/>.
+/// </summary>
+public record ReceiverClientDto
+{
+    public int Id { get; init; }
+    public string? EmailAddress { get; init; }
+    public string? Signature { get; init; }
+    public DateTime AddedWhen { get; init; }
+    public DateTime? TfaRegDeadline { get; init; }
+}
+

EnvelopeGenerator.ReceiverUI/Models/SignatureCaptureDto.cs

@@ -0,0 +1,62 @@
+namespace EnvelopeGenerator.ReceiverUI.Models;
+
+/// <summary>
+/// Represents a captured signature with metadata created by the receiver in the signature popup.
+/// This model holds the signature image (as base64 data URL) along with signer information
+/// used for rendering applied signatures on the PDF canvas.
+/// </summary>
+/// <remarks>
+/// <b>Used in:</b> EnvelopeViewer.razor signature popup workflow
+/// <br/>
+/// <b>Creation:</b> User draws/types/uploads signature and fills required fields
+/// <br/>
+/// <b>Storage:</b> Session-only (Blazor component state, lost on page refresh)
+/// <br/>
+/// <b>Rendering:</b> Applied signatures display: Image + Separator + Name/Position/Place/Date
+/// </remarks>
+public sealed record SignatureCaptureDto
+{
+    /// <summary>
+    /// Base64-encoded data URL of the signature image.
+    /// <br/>
+    /// <b>Format:</b> <c>data:image/png;base64,iVBORw0KG...</c>
+    /// <br/>
+    /// <b>Source:</b> Canvas.toDataURL() from signature pad (draw/text/image tabs)
+    /// <br/>
+    /// <b>Usage:</b> Set as <c>img.src</c> in applied signature overlay
+    /// </summary>
+    public required string DataUrl { get; init; }
+
+    /// <summary>
+    /// Full name of the signer (first and last name).
+    /// <br/>
+    /// <b>Required:</b> Yes (validated in popup)
+    /// <br/>
+    /// <b>Display:</b> Bold text in applied signature block
+    /// <br/>
+    /// <b>Example:</b> "Max Mustermann"
+    /// </summary>
+    public required string FullName { get; init; }
+
+    /// <summary>
+    /// Job title or position of the signer.
+    /// <br/>
+    /// <b>Required:</b> No (optional field)
+    /// <br/>
+    /// <b>Display:</b> Normal weight text between name and place/date
+    /// <br/>
+    /// <b>Example:</b> "Geschäftsführer" or empty string
+    /// </summary>
+    public string Position { get; init; } = string.Empty;
+
+    /// <summary>
+    /// Location/place where the signature was created.
+    /// <br/>
+    /// <b>Required:</b> Yes (validated in popup)
+    /// <br/>
+    /// <b>Display:</b> Shown with current date in German format (dd.MM.yyyy)
+    /// <br/>
+    /// <b>Example:</b> "Berlin" ? rendered as "Berlin, 26.01.2025"
+    /// </summary>
+    public required string Place { get; init; }
+}

EnvelopeGenerator.ReceiverUI/Models/SignatureDto.cs

@@ -0,0 +1,101 @@
+using EnvelopeGenerator.ReceiverUI.Models.Constants;
+
+namespace EnvelopeGenerator.ReceiverUI.Models;
+
+/// <summary>
+/// Represents a signature position on a PDF page.
+/// Coordinates stored in INCHES (GdPicture14 native unit).
+/// Origin: Top-left corner, X increases right, Y increases down.
+/// </summary>
+public class SignatureDto
+{
+    /// <summary>Unique identifier.</summary>
+    public int Id { get; init; }
+
+    private double _x;
+    private double _y;
+
+    /// <summary>Horizontal position in INCHES from left edge.</summary>
+    public double X 
+    { 
+        get => _x * Factor;
+        init => _x = value; 
+    }
+
+    /// <summary>Vertical position in INCHES from top edge.</summary>
+    public double Y 
+    { 
+        get => _y * Factor;
+        init => _y = value; 
+    }
+
+    /// <summary>1-based page number.</summary>
+    public int Page { get; init; }
+
+    /// <summary>Sender application type that created this signature.</summary>
+    public SenderAppType SenderAppType { get; init; }
+
+    private UnitOfLength _unitOfLength;
+
+    public SignatureDto Convert(UnitOfLength unitOfLength)
+    {
+        _unitOfLength = unitOfLength;
+        return this;
+    }
+
+    public double Factor
+    {
+        get
+        {
+            if (SenderAppType != SenderAppType.LegacyFormApp)
+            {
+                throw new NotImplementedException(
+                    $"SenderAppType '{SenderAppType}' is not yet implemented. " +
+                    $"Currently, only '{nameof(SenderAppType.LegacyFormApp)}' is supported. " +
+                    $"Future implementations will handle '{nameof(SenderAppType.ReceiverUIBlazorApp)}' and other types.");
+            }
+
+            // LegacyFormApp uses GdPicture14 with INCHES
+            return _unitOfLength switch
+            {
+                UnitOfLength.Inch => 1.0,   // No conversion needed: INCHES → INCHES
+                UnitOfLength.Point => 72.0, // INCHES → PDF Points: 1 inch = 72 points (PDF standard, NOT pixels!)
+                _ => throw new InvalidOperationException(
+                    $"Unknown UnitOfLength: {_unitOfLength}. Expected '{nameof(UnitOfLength.Inch)}' or '{nameof(UnitOfLength.Point)}'.")
+            };
+        }
+    }
+}
+
+public static class SignatureDtoExtensions
+{
+    /// <summary>
+    /// Converts all signatures in the collection to the specified unit of length.
+    /// </summary>
+    /// <typeparam name="T">Type of the collection (IEnumerable, List, etc.)</typeparam>
+    /// <param name="signatures">Collection of SignatureDto objects to convert.</param>
+    /// <param name="unitOfLength">Target unit of measurement (Inch or Point).</param>
+    /// <returns>The same collection with all signatures converted to the specified unit.</returns>
+    /// <exception cref="ArgumentNullException">Thrown when signatures collection is null.</exception>
+    /// <remarks>
+    /// <b>Usage:</b>
+    /// <code>
+    /// var signatures = await SignatureService.GetAsync(envelopeKey);
+    /// var convertedSignatures = signatures.ConvertAll(UnitOfLength.Point);
+    /// </code>
+    /// <b>Note:</b> This method modifies each SignatureDto object in place and returns the same collection.
+    /// </remarks>
+    public static T Convert<T>(this T signatures, UnitOfLength unitOfLength) 
+        where T : IEnumerable<SignatureDto>
+    {
+        if (signatures == null)
+            throw new ArgumentNullException(nameof(signatures));
+
+        foreach (var signature in signatures)
+        {
+            signature.Convert(unitOfLength);
+        }
+
+        return signatures;
+    }
+}

EnvelopeGenerator.ReceiverUI/Options/ApiOptions.cs

@@ -0,0 +1,10 @@
+namespace EnvelopeGenerator.ReceiverUI.Options;
+
+public class ApiOptions
+{
+    public const string SectionName = "Api";
+
+    public string BaseUrl { get; set; } = string.Empty;
+
+    public bool ForceToUseFakeDocument { get; set; } = false;
+}

EnvelopeGenerator.ReceiverUI/Options/PdfViewerOptions.cs

@@ -0,0 +1,71 @@
+namespace EnvelopeGenerator.ReceiverUI.Options;
+
+public class PdfViewerOptions
+{
+    public const string SectionName = "PdfViewer";
+
+    /// <summary>
+    /// Base scale for thumbnail rendering (0.2 - 1.5 recommended)
+    /// Higher values = better quality but slower rendering
+    /// Default: 0.75
+    /// </summary>
+    public double ThumbnailBaseScale { get; set; } = 0.75;
+
+    /// <summary>
+    /// Enable HiDPI/Retina support for thumbnails
+    /// Default: true
+    /// </summary>
+    public bool ThumbnailEnableHiDPI { get; set; } = true;
+
+    /// <summary>
+    /// Maximum device pixel ratio multiplier for thumbnails (1.0 - 3.0)
+    /// Caps DPR to avoid excessive memory usage on 4K+ displays
+    /// Default: 2.0
+    /// </summary>
+    public double ThumbnailMaxDPR { get; set; } = 2.0;
+
+    /// <summary>
+    /// Enable HiDPI/Retina support for main PDF canvas
+    /// Default: true
+    /// </summary>
+    public bool MainCanvasEnableHiDPI { get; set; } = true;
+
+    /// <summary>
+    /// Maximum device pixel ratio multiplier for main canvas (1.0 - 3.0)
+    /// Default: 2.0
+    /// </summary>
+    public double MainCanvasMaxDPR { get; set; } = 2.0;
+
+    /// <summary>
+    /// Enable smooth zoom transition (fade effect)
+    /// Default: true
+    /// </summary>
+    public bool EnableSmoothZoom { get; set; } = true;
+
+    /// <summary>
+    /// Zoom transition duration in milliseconds (50 - 500)
+    /// Default: 150
+    /// </summary>
+    public int ZoomTransitionDuration { get; set; } = 150;
+
+    /// <summary>
+    /// Opacity during rendering (0.0 - 1.0)
+    /// Lower values = more visible fade effect
+    /// Default: 0.85
+    /// </summary>
+    public double RenderingOpacity { get; set; } = 0.85;
+
+    /// <summary>
+    /// Delay between thumbnail renders in milliseconds (10 - 200)
+    /// Higher values = less browser stress, slower initial load
+    /// Default: 50
+    /// </summary>
+    public int ThumbnailRenderDelay { get; set; } = 50;
+
+    /// <summary>
+    /// Zoom step percentage (1 - 50)
+    /// Controls how much zoom changes per click or scroll
+    /// Default: 5 (5% per step)
+    /// </summary>
+    public int ZoomStepPercentage { get; set; } = 5;
+}

EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor

@@ -0,0 +1,968 @@
+@page "/envelope/{EnvelopeKey}"
+@using EnvelopeGenerator.ReceiverUI.Models
+@using EnvelopeGenerator.ReceiverUI.Models.Constants
+@using EnvelopeGenerator.ReceiverUI.Services
+@using Microsoft.Extensions.Options
+@using EnvelopeGenerator.ReceiverUI.Options
+@using Microsoft.JSInterop
+@using DevExpress.Blazor
+@inject DocumentService DocumentService
+@inject NavigationManager Navigation
+@inject IOptions<ApiOptions> AppOptions
+@inject IOptions<PdfViewerOptions> PdfViewerOptions
+@inject IJSRuntime JSRuntime
+@inject SignatureService SignatureService
+@inject EnvelopeGenerator.ReceiverUI.Services.AuthService AuthService
+@inject EnvelopeGenerator.ReceiverUI.Services.EnvelopeReceiverService EnvelopeReceiverService
+@inject AppVersionService AppVersion
+@implements IAsyncDisposable
+
+<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+<link href="@AppVersion.GetVersionedUrl("css/envelope-viewer.css")" rel="stylesheet" />
+<link href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf_viewer.min.css" rel="stylesheet" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+<script src="@AppVersion.GetVersionedUrl("js/pdf-viewer.js")"></script>
+<script src="@AppVersion.GetVersionedUrl("js/receiver-signature.js")"></script>
+
+<div class="envelope-viewer-layout">
+<div class="envelope-action-bar">
+    <div class="envelope-action-bar__inner" style="flex-direction: column; align-items: stretch; padding: 0.35rem 1.5rem; gap: 0.35rem;">
+        @* Row 1: Title + Sender + Badges + Logout *@
+        <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem;">
+            @* Left: Title + Sender *@
+            <div style="flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.75rem;">
+                @if (_envelopeReceiver is not null) {
+                    <div style="font-size: 0.9rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                        @(_envelopeReceiver.Envelope?.Title ?? "Dokument")
+                    </div>
+                    @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName) || !string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) {
+                        <span style="font-size: 0.7rem; color: #6b7280; white-space: nowrap;">
+                            Von 
+                            @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName)) {
+                                <span style="font-weight: 500; color: #374151;">@_envelopeReceiver.Envelope.User.FullName</span>
+                            }
+                            @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) {
+                                <span>&lt;@_envelopeReceiver.Envelope.User.Email&gt;</span>
+                            }
+                            @if (_envelopeReceiver.Envelope?.AddedWhen != null) {
+                                <span>&nbsp;·&nbsp;@_envelopeReceiver.Envelope.AddedWhen.ToString("dd.MM.yyyy")</span>
+                            }
+                        </span>
+                    }
+                } else {
+                    <div style="font-size: 0.9rem; font-weight: 600; color: #1f2937;">Dokumentenansicht</div>
+                }
+            </div>
+
+            @* Right: Badges + Logout *@
+            <div class="d-flex align-items-center" style="gap: 0.75rem; flex: 0 0 auto;">
+            @if (_envelopeReceiver is not null) {
+                <div class="d-flex flex-wrap align-items-center" style="gap: 0.3rem; font-size: 0.7rem;">
+                    @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Name)) {
+                        <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #f3f4f6; border-radius: 0.25rem; color: #374151; white-space: nowrap;">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Z"/>
+                            </svg>
+                            @_envelopeReceiver.Name
+                        </span>
+                    }
+                    @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName)) {
+                        <span style="display: inline-flex; align-items-center; padding: 0.15rem 0.5rem; background: #f3f4f6; border-radius: 0.25rem; color: #6b7280; white-space: nowrap;">
+                            Von @_envelopeReceiver.Envelope.User.FullName
+                        </span>
+                    }
+                    @{
+                        int sigCount = _signatures.Count;
+                    }
+                    @if (sigCount > 0) {
+                        <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #ede9fe; border-radius: 0.25rem; color: #6d28d9; font-weight: 500; white-space: nowrap;">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+                            </svg>
+                            @sigCount
+                        </span>
+                    }
+                    @if (_envelopeReceiver.Envelope?.UseAccessCode == true) {
+                        <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #fef3c7; border-radius: 0.25rem; color: #92400e; font-weight: 500; white-space: nowrap;">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
+                            </svg>
+                            Code
+                        </span>
+                    }
+                    @if (_envelopeReceiver.Envelope?.TFAEnabled == true) {
+                        <span style="display: inline-flex; align-items: center; padding: 0.125rem 0.4rem; background: #dbeafe; border-radius: 0.25rem; color: #1e40af; font-weight: 500; white-space: nowrap;">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
+                                <path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
+                            </svg>
+                            2FA
+                        </span>
+                    }
+                </div>
+
+            }
+
+                @* Logout button *@
+                @if (!string.IsNullOrWhiteSpace(EnvelopeKey)) {
+                    <button class="pdf-toolbar__btn" @onclick="LogoutAsync" disabled="@_isLoggingOut" title="Abmelden" style="flex-shrink: 0;">
+                        @if (_isLoggingOut) {
+                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="width: 14px; height: 14px;"></span>
+                        } else {
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
+                                <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
+                            </svg>
+                        }
+                    </button>
+                }
+            </div>
+        </div>
+
+        @* Row 2: Messages (visible text) *@
+        @if (_envelopeReceiver is not null && (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message) || !string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage))) {
+            <div style="display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.7rem; padding-top: 0.15rem; border-top: 1px solid #e5e7eb;">
+                @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message)) {
+                    <div style="flex: 1; min-width: 0; padding: 0.2rem 0.4rem; background: #f9fafb; border-radius: 0.25rem; border-left: 2px solid #9ca3af; display: flex; align-items: flex-start; gap: 0.25rem;">
+                        <span style="font-weight: 500; color: #374151; flex-shrink: 0;">📧</span>
+                        <span style="color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">@_envelopeReceiver.Envelope.Message</span>
+                    </div>
+                }
+                @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage)) {
+                    <div style="flex: 1; min-width: 0; padding: 0.2rem 0.4rem; background: #fef3c7; border-radius: 0.25rem; border-left: 2px solid #f59e0b; display: flex; align-items: flex-start; gap: 0.25rem;">
+                        <span style="font-weight: 500; color: #92400e; flex-shrink: 0;">🔒</span>
+                        <span style="color: #92400e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">@_envelopeReceiver.PrivateMessage</span>
+                    </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">
+                @if (_pdfLoaded) {
+                    <div class="pdf-toolbar">
+                        <div class="pdf-toolbar__section">
+                            <button class="pdf-toolbar__btn pdf-toolbar__btn--toggle" @onclick="ToggleThumbnails" title="@(_showThumbnails ? "Seitenleiste ausblenden" : "Seitenleiste einblenden")">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
+                                </svg>
+                            </button>
+                        </div>
+
+                        <div class="pdf-toolbar__divider"></div>
+
+                        <div class="pdf-toolbar__section">
+                            <button class="pdf-toolbar__btn" @onclick="PreviousPage" disabled="@(_currentPage <= 1)" title="Vorherige Seite">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
+                            <div class="pdf-toolbar__page-input-group">
+                                <input type="number" class="pdf-toolbar__page-input" min="1" max="@_totalPages" value="@_currentPage" @onchange="OnPageInputChanged" />
+                                <span class="pdf-toolbar__page-total">/ @_totalPages</span>
+                            </div>
+                            <button class="pdf-toolbar__btn" @onclick="NextPage" disabled="@(_currentPage >= _totalPages)" title="Nächste Seite">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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 class="pdf-toolbar__divider"></div>
+
+                        <div class="pdf-toolbar__section pdf-toolbar__zoom-section">
+                            <button class="pdf-toolbar__btn" @onclick="ZoomOut" disabled="@(_currentZoom <= 50)" title="Verkleinern">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM4 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1H4z"/>
+                                </svg>
+                            </button>
+                            <div class="pdf-toolbar__zoom-slider-container">
+                                <input type="range" class="pdf-toolbar__zoom-slider" min="50" max="300" step="@(PdfViewerOptions.Value.ZoomStepPercentage)" value="@_currentZoom" @oninput="OnZoomSliderChanged" title="@(_currentZoom)%" />
+                                <div class="pdf-toolbar__zoom-label">@(_currentZoom)%</div>
+                            </div>
+                            <button class="pdf-toolbar__btn" @onclick="ZoomIn" disabled="@(_currentZoom >= 300)" title="Vergrößern">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM6.5 3a.5.5 0 0 0-1 0v2.5H3a.5.5 0 0 0 0 1h2.5V9a.5.5 0 0 0 1 0V6.5H9a.5.5 0 0 0 0-1H6.5V3z"/>
+                                </svg>
+                            </button>
+                        </div>
+
+                        <div class="pdf-toolbar__divider"></div>
+
+                        @if (_totalSignatures > 0) {
+                            <div class="pdf-toolbar__section pdf-toolbar__signature-nav">
+                                <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-nav" 
+                                        @onclick="GoToPreviousSignature" 
+                                        disabled="@(_totalSignatures == 0)"
+                                        title="Vorherige Unterschrift">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
+                                
+                                <div class="pdf-toolbar__signature-counter">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+                                    </svg>
+                                    <span class="pdf-toolbar__signature-counter-text">
+                                        @if (_currentSignatureIndex > 0) {
+                                            <span style="color: #4F46E5; font-weight: 600;">#@_currentSignatureIndex</span>
+                                            <span style="opacity: 0.4; margin: 0 0.35rem;">|</span>
+                                        }
+                                        <strong style="color: @(_unsignedSignatures > 0 ? "#4F46E5" : "#10b981");">@_signedSignatures</strong>
+                                        <span style="opacity: 0.6;">&nbsp;/&nbsp;</span>
+                                        <span>@_totalSignatures</span>
+                                    </span>
+                                    @if (_unsignedSignatures > 0) {
+                                        <span class="pdf-toolbar__signature-badge">@_unsignedSignatures offen</span>
+                                    } else {
+                                        <span class="pdf-toolbar__signature-badge pdf-toolbar__signature-badge--complete">✓ Komplett</span>
+                                    }
+                                </div>
+                                
+                                <button class="pdf-toolbar__btn pdf-toolbar__btn--signature-nav" 
+                                        @onclick="GoToNextSignature" 
+                                        disabled="@(_totalSignatures == 0)"
+                                        title="Nächste Unterschrift">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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 class="pdf-toolbar__divider"></div>
+
+                            @* Reset button - only show when signatures are signed *@
+                            @if (_signedSignatures > 0) {
+                                <div class="pdf-toolbar__section">
+                                    <button class="pdf-toolbar__btn pdf-toolbar__btn--reset" 
+                                            @onclick="RestartSigning" 
+                                            title="Unterschriften zurücksetzen">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+                                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+                                        </svg>
+                                    </button>
+                                </div>
+                            }
+                        }
+                    </div>
+                }
+                <div class="pdf-frame">
+                    @if (_pdfLoaded && _showThumbnails) {
+                        <!-- PDF Thumbnail Sidebar -->
+                        <div class="pdf-thumbnails" style="width: @(_thumbnailWidth)px">
+                            <div class="pdf-thumbnails__content">
+                                @for (int i = 1; i <= _totalPages; i++) {
+                                    var pageNum = i;
+                                    <div class="pdf-thumbnail @(pageNum == _currentPage ? "pdf-thumbnail--active" : "")" @onclick="() => GoToPageFromThumbnail(pageNum)">
+                                        <div class="pdf-thumbnail__preview">
+                                            <canvas id="thumb-canvas-@pageNum" class="pdf-thumbnail__canvas"></canvas>
+                                        </div>
+                                        <div class="pdf-thumbnail__label">@pageNum</div>
+                                    </div>
+                                }
+                            </div>
+                        </div>
+                        <!-- Resizable Splitter -->
+                        <div class="pdf-splitter @(_isResizing ? "resizing" : "")" 
+                             @onmousedown="OnSplitterMouseDown"
+                             @onmousedown:preventDefault="true">
+                        </div>
+                    }
+                    <div class="pdf-canvas-wrapper">
+                        <div class="pdf-page-container">
+                            <canvas id="pdf-canvas" class="pdf-canvas"></canvas>
+                            <div id="pdf-text-layer" class="pdf-text-layer"></div>
+                            <div id="pdf-signature-layer" class="pdf-signature-layer"></div>
+                        </div>
+                    </div>
+                </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>
+
+<DxPopup @bind-Visible="_signaturePopupVisible"
+HeaderText="Unterschrift erstellen"
+Width="620px"
+MaxWidth="95vw"
+ShowFooter="true"
+CloseOnOutsideClick="false"
+ShowCloseButton="false"
+CloseOnEscape="false"
+Shown="OnPopupShownAsync">
+    <BodyContentTemplate>
+        <ul class="nav nav-tabs mb-3" style="border-bottom: 2px solid #e9ecef;">
+            <li class="nav-item">
+                <button type="button" 
+                        class="nav-link @(_activeSignatureTab == SignatureTabDraw ? "active" : "")" 
+                        style="@(_activeSignatureTab == SignatureTabDraw ? "border-bottom: 3px solid #4F46E5; color: #4F46E5; font-weight: 600;" : "color: #6c757d;")"
+                        @onclick="() => SetSignatureTabAsync(SignatureTabDraw)">
+                    Zeichnen
+                </button>
+            </li>
+            <li class="nav-item">
+                <button type="button" 
+                        class="nav-link @(_activeSignatureTab == SignatureTabText ? "active" : "")"
+                        style="@(_activeSignatureTab == SignatureTabText ? "border-bottom: 3px solid #4F46E5; color: #4F46E5; font-weight: 600;" : "color: #6c757d;")"
+                        @onclick="() => SetSignatureTabAsync(SignatureTabText)">
+                    Text
+                </button>
+            </li>
+            <li class="nav-item">
+                <button type="button" 
+                        class="nav-link @(_activeSignatureTab == SignatureTabImage ? "active" : "")"
+                        style="@(_activeSignatureTab == SignatureTabImage ? "border-bottom: 3px solid #4F46E5; color: #4F46E5; font-weight: 600;" : "color: #6c757d;")"
+                        @onclick="() => SetSignatureTabAsync(SignatureTabImage)">
+                    Bild
+                </button>
+            </li>
+        </ul>
+
+        @if(_activeSignatureTab == SignatureTabDraw) {
+            <p style="color: #6c757d; font-size: 0.875rem; margin-bottom: 0.75rem;">Bitte unterschreiben Sie im folgenden Feld.</p>
+            <canvas id="envelope-signature-pad" 
+                    width="560" 
+                    height="180" 
+                    style="border: 2px solid #e9ecef; border-radius: 8px; background: white; width: 100%; max-width: 560px; touch-action: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></canvas>
+        } else if(_activeSignatureTab == SignatureTabText) {
+            <p style="color: #6c757d; font-size: 0.875rem; margin-bottom: 0.75rem;">Geben Sie Ihre Unterschrift als Text ein und wählen Sie eine Schriftart.</p>
+            <div class="row g-3 mb-3">
+                <div class="col-12 col-md-7">
+                    <input class="form-control" 
+                           placeholder="Ihre Unterschrift" 
+                           value="@_typedSignatureText" 
+                           @oninput="OnTypedSignatureChanged"
+                           style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
+                </div>
+                <div class="col-12 col-md-5">
+                    <select class="form-select" 
+                            value="@_typedSignatureFont" 
+                            @onchange="OnTypedSignatureFontChanged"
+                            style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;">
+                        @foreach(var font in TypedSignatureFonts) {
+                            <option value="@font.Value" style="font-family: @font.Value">@font.Text</option>
+                        }
+                    </select>
+                </div>
+            </div>
+            <canvas id="envelope-typed-signature-pad" 
+                    width="560" 
+                    height="180" 
+                    style="border: 2px solid #e9ecef; border-radius: 8px; background: white; width: 100%; max-width: 560px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></canvas>
+        } else {
+            <p style="color: #6c757d; font-size: 0.875rem; margin-bottom: 0.75rem;">Laden Sie ein Bild Ihrer Unterschrift hoch.</p>
+            <input id="envelope-signature-image-input" 
+                   class="form-control mb-3" 
+                   type="file" 
+                   accept="image/png,image/jpeg,image/webp"
+                   style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
+            <canvas id="envelope-image-signature-pad" 
+                    width="560" 
+                    height="180" 
+                    style="border: 2px solid #e9ecef; border-radius: 8px; background: white; width: 100%; max-width: 560px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);"></canvas>
+        }
+
+        <div style="border-top: 2px solid #e9ecef; margin-top: 1.5rem; padding-top: 1.5rem;">
+            <div class="row g-3">
+                <div class="col-12 col-md-6">
+                    <label class="form-label" for="envelope-signer-name" style="font-size: 0.875rem; font-weight: 500; color: #495057;">
+                        Vor- und Nachname <span style="color: #dc3545;">*</span>
+                    </label>
+                    <input id="envelope-signer-name" 
+                           class="form-control" 
+                           value="@_signerFullName" 
+                           @oninput="args => _signerFullName = args.Value?.ToString() ?? string.Empty"
+                           style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
+                </div>
+                <div class="col-12 col-md-6">
+                    <label class="form-label" for="envelope-signer-position" style="font-size: 0.875rem; font-weight: 500; color: #495057;">
+                        Position <span style="color: #6c757d; font-weight: 400;">(optional)</span>
+                    </label>
+                    <input id="envelope-signer-position" 
+                           class="form-control" 
+                           value="@_signerPosition" 
+                           @oninput="args => _signerPosition = args.Value?.ToString() ?? string.Empty"
+                           style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
+                </div>
+                <div class="col-12 col-md-6">
+                    <label class="form-label" for="envelope-signature-place" style="font-size: 0.875rem; font-weight: 500; color: #495057;">
+                        Ort <span style="color: #dc3545;">*</span>
+                    </label>
+                    <input id="envelope-signature-place" 
+                           class="form-control" 
+                           value="@_signaturePlace" 
+                           @oninput="args => _signaturePlace = args.Value?.ToString() ?? string.Empty"
+                           style="border: 2px solid #e9ecef; border-radius: 6px; padding: 0.625rem;" />
+                </div>
+            </div>
+        </div>
+
+        @if(!string.IsNullOrWhiteSpace(_popupValidationMessage)) {
+            <div style="background: #fee; border-left: 4px solid #dc3545; padding: 0.75rem 1rem; margin-top: 1rem; border-radius: 4px;">
+                <span style="color: #dc3545; font-size: 0.875rem; font-weight: 500;">@_popupValidationMessage</span>
+            </div>
+        }
+    </BodyContentTemplate>
+    <FooterContentTemplate>
+        <div class="d-flex gap-2 justify-content-between w-100" style="padding: 0.5rem 0;">
+            <button class="btn btn-outline-secondary" 
+                    @onclick="RenewSignatureAsync"
+                    style="border-radius: 6px; padding: 0.625rem 1.25rem; font-weight: 500;">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+                    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+                </svg>
+                Erneuern
+            </button>
+            <button class="btn btn-primary" 
+                    @onclick="SaveSignatureAsync"
+                    style="background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%); border: none; border-radius: 6px; padding: 0.625rem 2rem; font-weight: 600; box-shadow: 0 2px 4px rgba(79, 70, 229, 0.3);">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+                </svg>
+                Speichern
+            </button>
+        </div>
+    </FooterContentTemplate>
+</DxPopup>
+
+@code {
+// Signature tab constants
+const string SignatureTabDraw = "draw";
+const string SignatureTabText = "text";
+const string SignatureTabImage = "image";
+const string DrawCanvasId = "envelope-signature-pad";
+const string TypedCanvasId = "envelope-typed-signature-pad";
+const string ImageInputId = "envelope-signature-image-input";
+const string ImageCanvasId = "envelope-image-signature-pad";
+
+readonly (string Text, string Value)[] TypedSignatureFonts = {
+    ("Brush Script", "'Brush Script MT', cursive"),
+    ("Segoe Script", "'Segoe Script', cursive"),
+    ("Lucida Handwriting", "'Lucida Handwriting', cursive"),
+    ("Comic Sans", "'Comic Sans MS', cursive"),
+    ("Cursive", "cursive")
+};
+
+[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;
+bool _showThumbnails = true;
+bool _isLoggingOut = false;
+DotNetObjectReference<EnvelopeViewer>? _dotNetRef;
+IReadOnlyList<SignatureDto> _signatures = [];
+EnvelopeReceiverDto? _envelopeReceiver;
+
+// Signature navigation state
+int _totalSignatures = 0;
+int _signedSignatures = 0;
+int _unsignedSignatures = 0;
+int _currentSignatureIndex = 0;  // Şu an hangi imzada (1-based)
+
+// Signature state
+SignatureCaptureDto? _capturedSignature;
+bool _signaturePopupVisible = false;
+string? _popupValidationMessage;
+string _activeSignatureTab = SignatureTabDraw;
+string _typedSignatureText = string.Empty;
+string _typedSignatureFont = "'Brush Script MT', cursive";
+string _signerFullName = string.Empty;
+string _signerPosition = string.Empty;
+string _signaturePlace = string.Empty;
+
+// Resizable splitter state
+int _thumbnailWidth = 260;
+bool _isResizing = false;
+int _resizeStartX = 0;
+int _resizeStartWidth = 0;
+const int MinThumbnailWidth = 150;
+const int MaxThumbnailWidth = 400;
+
+    async Task LogoutAsync() {
+        if (string.IsNullOrWhiteSpace(EnvelopeKey) || _isLoggingOut) return;
+        _isLoggingOut = true;
+        await InvokeAsync(StateHasChanged);
+        await AuthService.LogoutEnvelopeReceiverAsync(EnvelopeKey);
+        Navigation.NavigateTo($"/login/{Uri.EscapeDataString(EnvelopeKey)}", forceLoad: true);
+    }
+
+    protected override async Task OnInitializedAsync() {
+        if (string.IsNullOrWhiteSpace(EnvelopeKey)) {
+            _errorMessage = "Envelope-Schlüssel fehlt.";
+            _isLoading = false;
+            return;
+        }
+
+        // Check authentication
+        var hasAccess = await AuthService.CheckEnvelopeAccessAsync(EnvelopeKey);
+        if (!hasAccess) {
+            Navigation.NavigateTo($"/login/{Uri.EscapeDataString(EnvelopeKey)}");
+            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}";
+            }
+
+            var signatures = await SignatureService.GetAsync(EnvelopeKey);
+            _signatures = signatures.Convert(UnitOfLength.Point);
+
+            _envelopeReceiver = await EnvelopeReceiverService.GetAsync(EnvelopeKey);
+
+            await JSRuntime.InvokeVoidAsync("console.log", "Loaded signatures:", _signatures);
+
+            // Open signature popup on page load
+            _activeSignatureTab = SignatureTabDraw;
+            _signaturePopupVisible = true;
+            _popupValidationMessage = null;
+
+        } catch (Exception ex) {
+            _errorMessage = $"Fehler: {ex.Message}";
+        }
+
+        _isLoading = false;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender) {
+        if (firstRender) {
+            // Load saved thumbnail width from localStorage
+            try {
+                var savedWidth = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "envelopeViewer_thumbnailWidth");
+                if (!string.IsNullOrEmpty(savedWidth) && int.TryParse(savedWidth, out var width)) {
+                    _thumbnailWidth = Math.Clamp(width, MinThumbnailWidth, MaxThumbnailWidth);
+                    await InvokeAsync(StateHasChanged);
+                }
+            } catch {
+                // Ignore localStorage errors
+            }
+        }
+
+        if (!_pdfLoaded && !string.IsNullOrWhiteSpace(_pdfDataUrl)) {
+            await Task.Delay(500);
+            
+            try {
+                _dotNetRef = DotNetObjectReference.Create(this);
+                
+                // Send quality options to JavaScript
+                var options = PdfViewerOptions.Value;
+                await JSRuntime.InvokeVoidAsync("pdfViewer.setQualityOptions", new
+                {
+                    options.ThumbnailBaseScale,
+                    options.ThumbnailEnableHiDPI,
+                    options.ThumbnailMaxDPR,
+                    options.MainCanvasEnableHiDPI,
+                    options.MainCanvasMaxDPR,
+                    options.EnableSmoothZoom,
+                    options.ZoomTransitionDuration,
+                    options.RenderingOpacity,
+                    options.ZoomStepPercentage
+                });
+                
+                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");
+                    
+                    // Attach resize listeners
+                    await JSRuntime.InvokeVoidAsync("pdfViewer.attachResizeListeners", _dotNetRef);
+                    
+                    
+                    await InvokeAsync(StateHasChanged);
+                    
+                    // Wait for DOM to be ready, then render thumbnails
+                    await Task.Delay(100);
+                    await RenderThumbnailsAsync();
+                    
+                    // Render signature buttons
+                    await RenderSignatureButtonsAsync();
+                }
+            } 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);
+        
+        // Small delay for canvas render to complete (reduced from 100ms to 10ms)
+        await Task.Delay(10);
+        await RenderSignatureButtonsAsync();
+    }
+
+    async Task NextPage() {
+        if (await JSRuntime.InvokeAsync<bool>("pdfViewer.nextPage")) {
+            _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
+            await RenderSignatureButtonsAsync();
+        }
+    }
+
+    async Task PreviousPage() {
+        if (await JSRuntime.InvokeAsync<bool>("pdfViewer.previousPage")) {
+            _currentPage = await JSRuntime.InvokeAsync<int>("pdfViewer.getCurrentPage");
+            await RenderSignatureButtonsAsync();
+        }
+    }
+
+    async Task ZoomIn() {
+        if (_currentZoom >= 300) return;
+        await JSRuntime.InvokeVoidAsync("pdfViewer.zoomIn");
+        var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
+        _currentZoom = (int)(scale * 100);
+        
+        // Update signature overlay positions after zoom
+        await RenderSignatureButtonsAsync();
+    }
+
+    async Task ZoomOut() {
+        if (_currentZoom <= 50) return;
+        await JSRuntime.InvokeVoidAsync("pdfViewer.zoomOut");
+        var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
+        _currentZoom = (int)(scale * 100);
+        
+        // Update signature overlay positions after zoom
+        await RenderSignatureButtonsAsync();
+    }
+
+    async Task SetZoom(int percentage) {
+        var scale = percentage / 100.0;
+        await JSRuntime.InvokeVoidAsync("pdfViewer.setScale", scale);
+        _currentZoom = percentage;
+    }
+
+    async Task OnZoomSliderChanged(ChangeEventArgs e) {
+        if (int.TryParse(e.Value?.ToString(), out var zoom)) {
+            await SetZoom(zoom);
+            
+            // Update signature overlay positions after zoom
+            await RenderSignatureButtonsAsync();
+        }
+    }
+
+    async Task OnPageInputChanged(ChangeEventArgs e) {
+        if (int.TryParse(e.Value?.ToString(), out var pageNum) && pageNum >= 1 && pageNum <= _totalPages) {
+            if (await JSRuntime.InvokeAsync<bool>("pdfViewer.goToPage", pageNum)) {
+                _currentPage = pageNum;
+            }
+        }
+    }
+
+    async Task FitToWidth() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.fitToWidth");
+        var scale = await JSRuntime.InvokeAsync<double>("pdfViewer.getScale");
+        _currentZoom = (int)(scale * 100);
+    }
+
+    async Task ToggleThumbnails() {
+        _showThumbnails = !_showThumbnails;
+        
+        // Re-render thumbnails when showing them
+        if (_showThumbnails && _pdfLoaded) {
+            await InvokeAsync(StateHasChanged); // Force UI update first
+            await Task.Delay(150); // Wait for DOM to render canvas elements
+            await RenderThumbnailsAsync();
+        }
+    }
+
+    async Task GoToPageFromThumbnail(int pageNum) {
+        if (await JSRuntime.InvokeAsync<bool>("pdfViewer.goToPage", pageNum)) {
+            _currentPage = pageNum;
+            await RenderSignatureButtonsAsync();
+        }
+    }
+
+    async Task RenderSignatureButtonsAsync() {
+        if (_signatures.Count == 0 || !_pdfLoaded) return;
+
+        try {
+            await JSRuntime.InvokeVoidAsync("pdfViewer.renderSignatureButtons", _signatures, _currentPage, _dotNetRef);
+            await UpdateSignatureCounterAsync();
+        } catch (Exception ex) {
+            System.Diagnostics.Debug.WriteLine($"Signature button rendering error: {ex.Message}");
+        }
+    }
+
+    [JSInvokable]
+    public async Task OnSignatureButtonClick(int signatureId) {
+        if (_capturedSignature == null) {
+            // No signature captured yet - should not happen as popup is shown on page load
+            return;
+        }
+
+        // Apply signature to PDF canvas
+        await JSRuntime.InvokeVoidAsync("pdfViewer.applySignature", 
+            signatureId, 
+            _capturedSignature.DataUrl,
+            _capturedSignature.FullName,
+            _capturedSignature.Position,
+            _capturedSignature.Place);
+        
+        // Update counter
+        await UpdateSignatureCounterAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnSignatureNavChanged() {
+        await UpdateSignatureCounterAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnPageChangedBySignatureNav(int newPage) {
+        _currentPage = newPage;
+        await RenderSignatureButtonsAsync();
+    }
+
+    async Task UpdateSignatureCounterAsync() {
+        try {
+            var state = await JSRuntime.InvokeAsync<SignatureNavState>("pdfViewer.getSignatureNavState");
+            _totalSignatures = state.Total;
+            _signedSignatures = state.Signed;
+            _unsignedSignatures = state.Unsigned;
+            _currentSignatureIndex = state.CurrentIndex;  // Şu an hangi imzada
+            await InvokeAsync(StateHasChanged);
+        } catch {
+            // Ignore errors during counter update
+        }
+    }
+
+    async Task GoToPreviousSignature() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.goToPreviousSignature", _dotNetRef);
+    }
+
+    async Task GoToNextSignature() {
+        await JSRuntime.InvokeVoidAsync("pdfViewer.goToNextSignature", _dotNetRef);
+    }
+
+    void RestartSigning() {
+        // Force page reload to reset all signatures and state
+        Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
+    }
+
+    record SignatureNavState(int Total, int Signed, int Unsigned, int CurrentIndex, bool CanGoPrev, bool CanGoNext);
+
+    // Signature popup methods
+    void OpenSignaturePopup() {
+        _activeSignatureTab = SignatureTabDraw;
+        _signaturePopupVisible = true;
+        _popupValidationMessage = null;
+    }
+
+    async Task OnPopupShownAsync() {
+        await InitializeActiveSignatureTabAsync();
+    }
+
+    async Task SetSignatureTabAsync(string tab) {
+        _activeSignatureTab = tab;
+        _popupValidationMessage = null;
+        await InvokeAsync(StateHasChanged);
+        await Task.Delay(50);
+        await InitializeActiveSignatureTabAsync();
+    }
+
+    async Task InitializeActiveSignatureTabAsync() {
+        if(_activeSignatureTab == SignatureTabDraw) {
+            await JSRuntime.InvokeVoidAsync("receiverSignature.initialize", DrawCanvasId);
+        } else if(_activeSignatureTab == SignatureTabText) {
+            await JSRuntime.InvokeVoidAsync("receiverSignature.initializeTyped", TypedCanvasId);
+            await RenderTypedSignatureAsync();
+        } else {
+            await JSRuntime.InvokeVoidAsync("receiverSignature.initializeImage", ImageInputId, ImageCanvasId);
+        }
+    }
+
+    async Task RenewSignatureAsync() {
+        _popupValidationMessage = null;
+
+        if(_activeSignatureTab == SignatureTabDraw) {
+            await JSRuntime.InvokeVoidAsync("receiverSignature.clear", DrawCanvasId);
+        } else if(_activeSignatureTab == SignatureTabText) {
+            _typedSignatureText = string.Empty;
+            await JSRuntime.InvokeVoidAsync("receiverSignature.clearTyped", TypedCanvasId);
+        } else {
+            await JSRuntime.InvokeVoidAsync("receiverSignature.clearImage", ImageInputId, ImageCanvasId);
+        }
+    }
+
+    async Task OnTypedSignatureChanged(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
+        _typedSignatureText = args.Value?.ToString() ?? string.Empty;
+        await RenderTypedSignatureAsync();
+    }
+
+    async Task OnTypedSignatureFontChanged(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
+        _typedSignatureFont = args.Value?.ToString() ?? _typedSignatureFont;
+        await RenderTypedSignatureAsync();
+    }
+
+    async Task RenderTypedSignatureAsync() {
+        await JSRuntime.InvokeVoidAsync("receiverSignature.renderTypedSignature", TypedCanvasId, _typedSignatureText, _typedSignatureFont);
+    }
+
+    async Task SaveSignatureAsync() {
+        if (string.IsNullOrWhiteSpace(_signerFullName)) {
+            _popupValidationMessage = "Bitte geben Sie Vor- und Nachname ein.";
+            return;
+        }
+        if (string.IsNullOrWhiteSpace(_signaturePlace)) {
+            _popupValidationMessage = "Bitte geben Sie den Ort ein.";
+            return;
+        }
+        var signatureDataUrl = await GetActiveSignatureDataUrlAsync();
+        if (string.IsNullOrWhiteSpace(signatureDataUrl)) {
+            _popupValidationMessage = "Die Unterschrift ist erforderlich.";
+            return;
+        }
+
+        _popupValidationMessage = null;
+        _capturedSignature = new SignatureCaptureDto
+        {
+            DataUrl = signatureDataUrl,
+            FullName = _signerFullName.Trim(),
+            Position = _signerPosition.Trim(),
+            Place = _signaturePlace.Trim()
+        };
+        _signaturePopupVisible = false;
+        
+        await InvokeAsync(StateHasChanged);
+        Console.WriteLine($"Signature saved: {_signerFullName}, {_signaturePlace}");
+    }
+
+    async Task<string?> GetActiveSignatureDataUrlAsync() {
+        if(_activeSignatureTab == SignatureTabDraw)
+            return await JSRuntime.InvokeAsync<string?>("receiverSignature.getDataUrl", DrawCanvasId);
+
+        if(_activeSignatureTab == SignatureTabText) {
+            await RenderTypedSignatureAsync();
+            return await JSRuntime.InvokeAsync<string?>("receiverSignature.getTypedDataUrl", TypedCanvasId);
+        }
+
+        return await JSRuntime.InvokeAsync<string?>("receiverSignature.getImageDataUrl", ImageCanvasId);
+    }
+
+    async Task RenderThumbnailsAsync() {
+        try {
+            var delay = PdfViewerOptions.Value.ThumbnailRenderDelay;
+            
+            // Sequential rendering to avoid overwhelming the browser
+            for (int i = 1; i <= _totalPages; i++) {
+                await JSRuntime.InvokeVoidAsync("pdfViewer.renderThumbnail", i, $"thumb-canvas-{i}");
+                
+                // Configurable delay between renders
+                if (i < _totalPages) {
+                    await Task.Delay(delay);
+                }
+            }
+        } catch (Exception ex) {
+            // Thumbnail rendering is not critical
+            System.Diagnostics.Debug.WriteLine($"Thumbnail rendering error: {ex.Message}");
+        }
+    }
+
+    // Resizable splitter methods
+    void OnSplitterMouseDown(MouseEventArgs e) {
+        _isResizing = true;
+        _resizeStartX = (int)e.ClientX;
+        _resizeStartWidth = _thumbnailWidth;
+        
+        // Add resizing class to body to prevent text selection
+        _ = JSRuntime.InvokeVoidAsync("eval", "document.body.classList.add('resizing')");
+        _ = JSRuntime.InvokeVoidAsync("pdfViewer.startResize");
+    }
+
+    [JSInvokable]
+    public async Task OnSplitterMouseMove(int clientX) {
+        if (!_isResizing) return;
+
+        var delta = clientX - _resizeStartX;
+        var newWidth = _resizeStartWidth + delta;
+        
+        // Clamp to min/max
+        _thumbnailWidth = Math.Clamp(newWidth, MinThumbnailWidth, MaxThumbnailWidth);
+        
+        await InvokeAsync(StateHasChanged);
+    }
+
+    [JSInvokable]
+    public async Task OnSplitterMouseUp() {
+        if (!_isResizing) return;
+        
+        _isResizing = false;
+        
+        // Remove resizing class from body
+        await JSRuntime.InvokeVoidAsync("eval", "document.body.classList.remove('resizing')");
+        
+        // Save preference to localStorage
+        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "envelopeViewer_thumbnailWidth", _thumbnailWidth.ToString());
+        
+        await InvokeAsync(StateHasChanged);
+    }
+
+    public async ValueTask DisposeAsync() {
+        if (_pdfLoaded) {
+            try {
+                await JSRuntime.InvokeVoidAsync("pdfViewer.dispose");
+            } catch {
+                // Ignore errors during disposal
+            }
+        }
+        _dotNetRef?.Dispose();
+    }
+}

EnvelopeGenerator.ReceiverUI/Pages/Index.razor

@@ -1,40 +1,71 @@
 @page "/"
-@inject NavigationManager NavigationManager
+@inject IJSRuntime JS
 
-<div class="d-flex justify-content-center align-items-center" style="min-height: 70vh;">
-    <div class="card shadow-sm border-0" style="max-width: 560px; width: 100%;">
-        <div class="card-body p-5 text-center">
-            <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-4" style="width: 72px; height: 72px;">
-                <span class="oi oi-document text-primary" aria-hidden="true" style="font-size: 2rem;"></span>
+<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+
+<div class="home-page-wrapper">
+
+    <div class="home-hero-header">
+        <div class="home-hero-header__inner">
+            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="home-hero-header__icon" viewBox="0 0 16 16">
+                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
+            </svg>
+            <div>
+                <h1 class="home-hero-header__title">SignFlow</h1>
+                <p class="home-hero-header__subtitle">Willkommen im eSign-Portal</p>
             </div>
-            <h2 class="mb-3">Empfänger-UI</h2>
-            <p class="text-muted mb-4">
-                Sie werden zur Empfänger-UI weitergeleitet. Bitte warten Sie einen Moment.
-            </p>
-
-            <DxLoadingPanel Visible="true"
-                            Text=""
-                            IndicatorVisible="false"
-                            IndicatorAreaVisible="false"
-                            IsContentBlocked="false"
-                            ApplyBackgroundShading="false">
-                <div class="d-flex flex-column align-items-center gap-3 py-3">
-                    <div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
-                        <span class="visually-hidden">Wird geladen...</span>
-                    </div>
-                    <div class="text-muted small">Weiterleitung wird vorbereitet...</div>
-                </div>
-            </DxLoadingPanel>
         </div>
     </div>
+
+    <div class="home-content">
+        <div class="home-card card shadow border-0">
+            <div class="card-body p-4 p-md-5">
+
+                <p class="text-muted mb-4" style="font-size: 0.92rem; line-height: 1.7; text-align: justify; text-align-last: left; min-height: calc(0.92rem * 1.7 * 9);">
+                    <span id="home-description"></span>
+                </p>
+
+                <div class="mt-4 pt-3 border-top">
+                    <div class="d-flex flex-wrap justify-content-center gap-3">
+                        <div class="home-feature-badge">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
+                            </svg>
+                            Sicherer Zugang
+                        </div>
+                        <div class="home-feature-badge">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+                            </svg>
+                            Digitale Unterschrift
+                        </div>
+                        <div class="home-feature-badge">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+                            </svg>
+                            PDF-Export
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
 </div>
 
 @code {
-    protected override async Task OnAfterRenderAsync(bool firstRender) {
-        if(!firstRender)
-            return;
+    private const string HomePageDescription =
+        "Das digitale Unterschriftenportal ist eine Plattform, die entwickelt wurde, um Ihre Dokumente sicher zu unterschreiben und zu verwalten. " +
+        "Mit seiner benutzerfreundlichen Oberfläche können Sie Ihre Dokumente schnell hochladen, die Unterschriftsprozesse verfolgen und Ihre digitalen Unterschriftenanwendungen einfach durchführen. " +
+        "Dieses Portal beschleunigt Ihren Arbeitsablauf mit rechtlich gültigen Unterschriften und erhöht gleichzeitig die Sicherheit Ihrer Dokumente.";
 
-        await Task.Delay(1200);
-        NavigationManager.NavigateTo("/receiver");
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JS.InvokeVoidAsync("receiverSignature.startTyped", "home-description", HomePageDescription, 15);
+        }
     }
-}
+}

EnvelopeGenerator.ReceiverUI/Pages/Login.razor

@@ -0,0 +1,158 @@
+@page "/login/{EnvelopeKey}"
+@using EnvelopeGenerator.ReceiverUI.Services
+@inject AuthService AuthService
+@inject NavigationManager Navigation
+
+<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+
+<div class="login-page-wrapper d-flex align-items-center justify-content-center min-vh-100">
+    <div class="login-card card shadow border-0" style="max-width: 440px; width: 100%;">
+
+        <div class="card-header text-white text-center py-4 border-0" style="background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;">
+            <div class="mb-2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
+                </svg>
+            </div>
+            <h5 class="mb-0 fw-semibold">Dokument öffnen</h5>
+            <p class="mb-0 mt-1 opacity-75" style="font-size: 0.85rem;">Sicherer Zugang mit Zugangscode</p>
+        </div>
+
+        <div class="card-body p-4">
+
+            <p class="text-muted mb-4" style="font-size: 0.875rem; line-height: 1.5;">
+                Bitte geben Sie den Zugangscode ein, den Sie per E-Mail erhalten haben, um das Dokument sicher zu öffnen.
+            </p>
+
+            @if (LoginResult == EnvelopeLoginResult.NotFound) {
+                <div class="alert alert-warning d-flex align-items-start gap-2 py-2" role="alert">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="flex-shrink-0 mt-1" 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>
+                    <div>
+                        <strong>Dokument nicht gefunden.</strong><br />
+                        <span style="font-size:0.85rem;">Der angegebene Zugangscode konnte keinem Dokument zugeordnet werden. Bitte prüfen Sie den Link in Ihrer E-Mail.</span>
+                    </div>
+                </div>
+            } else if (LoginResult == EnvelopeLoginResult.InvalidCode) {
+                <div class="alert alert-danger d-flex align-items-start gap-2 py-2" role="alert">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="flex-shrink-0 mt-1" viewBox="0 0 16 16">
+                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                    </svg>
+                    <div>
+                        <strong>Ungültiger Zugangscode.</strong><br />
+                        <span style="font-size:0.85rem;">Der eingegebene Code ist falsch. Bitte versuchen Sie es erneut.</span>
+                    </div>
+                </div>
+            } else if (LoginResult == EnvelopeLoginResult.Error) {
+                <div class="alert alert-secondary d-flex align-items-start gap-2 py-2" role="alert">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="flex-shrink-0 mt-1" 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>
+                        <strong>Serverfehler.</strong><br />
+                        <span style="font-size:0.85rem;">Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.</span>
+                    </div>
+                </div>
+            }
+
+            <div class="mb-4">
+                <label class="form-label fw-medium" for="login-access-code">
+                    Zugangscode
+                    <span class="text-danger ms-1">*</span>
+                </label>
+                <div class="input-group">
+                    <span class="input-group-text bg-light border-end-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#6c757d" viewBox="0 0 16 16">
+                            <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1.837 1.337A3.5 3.5 0 0 1 3.5 11.5zm0-1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
+                        </svg>
+                    </span>
+                    <input id="login-access-code"
+                           type="@(ShowCode ? "text" : "password")"
+                           class="form-control border-start-0 border-end-0 @(LoginResult == EnvelopeLoginResult.InvalidCode ? "is-invalid" : null)"
+                           placeholder="Zugangscode eingeben"
+                           @bind="AccessCode"
+                           @bind:event="oninput"
+                           @onkeydown="OnKeyDownAsync"
+                           disabled="@IsLoading"
+                           autocomplete="one-time-code" />
+                    <button type="button"
+                            class="btn btn-outline-secondary border-start-0"
+                            style="border-left: none;"
+                            tabindex="-1"
+                            @onclick="() => ShowCode = !ShowCode">
+                        @if (ShowCode) {
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
+                                <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
+                                <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/>
+                                <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/>
+                            </svg>
+                        } else {
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+                            </svg>
+                        }
+                    </button>
+                </div>
+            </div>
+
+            <button class="btn btn-primary w-100 py-2 fw-medium"
+                    style="background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); border: none;"
+                    @onclick="SubmitAsync"
+                    disabled="@(IsLoading || string.IsNullOrWhiteSpace(AccessCode))">
+                @if (IsLoading) {
+                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                    <span>Überprüfen …</span>
+                } else {
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                        <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
+                    </svg>
+                    <span>Dokument öffnen</span>
+                }
+            </button>
+
+        </div>
+
+        <div class="card-footer text-center text-muted py-3 border-0 bg-transparent" style="font-size: 0.78rem;">
+            Bei Problemen wenden Sie sich bitte an den Absender des Dokuments.
+        </div>
+
+    </div>
+</div>
+
+@code {
+    [Parameter] public string EnvelopeKey { get; set; } = string.Empty;
+
+    string AccessCode = string.Empty;
+    bool ShowCode;
+    bool IsLoading;
+    EnvelopeLoginResult? LoginResult;
+
+    async Task OnKeyDownAsync(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs e) {
+        if (e.Key == "Enter")
+            await SubmitAsync();
+    }
+
+    async Task SubmitAsync() {
+        if (string.IsNullOrWhiteSpace(AccessCode) || IsLoading) return;
+
+        IsLoading = true;
+        LoginResult = null;
+        await InvokeAsync(StateHasChanged);
+
+        var result = await AuthService.LoginEnvelopeReceiverAsync(EnvelopeKey, AccessCode.Trim());
+
+        if (result == EnvelopeLoginResult.Success) {
+            Navigation.NavigateTo($"/envelope/{Uri.EscapeDataString(EnvelopeKey)}", forceLoad: true);
+            return;
+        }
+
+        LoginResult = result;
+        IsLoading = false;
+        await InvokeAsync(StateHasChanged);
+    }
+}
+

EnvelopeGenerator.ReceiverUI/Pages/ReportViewer.razor

@@ -1,18 +1,32 @@
-@page "/receiver"
+@page "/receiver/{EnvelopeKey}"
+@page "/report-viewer/{EnvelopeKey}"
 @using System.Drawing
+@using DevExpress.Blazor
 @using DevExpress.Drawing
 @using DevExpress.Utils
 @using DevExpress.XtraPrinting
 @using DevExpress.XtraPrinting.Drawing
+@using Microsoft.JSInterop
 @using XtraReport = DevExpress.XtraReports.UI.XtraReport
 @using BottomMarginBand = DevExpress.XtraReports.UI.BottomMarginBand
 @using XRLabel = DevExpress.XtraReports.UI.XRLabel
 @using XRPictureBox = DevExpress.XtraReports.UI.XRPictureBox
 @using XRControl = DevExpress.XtraReports.UI.XRControl
 @using ImageSizeMode = DevExpress.XtraPrinting.ImageSizeMode
-@using EnvelopeGenerator.ReceiverUI.Services;
+@using EnvelopeGenerator.ReceiverUI.Services
+@using DevExpress.Blazor.Reporting
+@using Microsoft.Extensions.Options
+@using EnvelopeGenerator.ReceiverUI.Options
+@using EnvelopeGenerator.ReceiverUI.Models
+@implements IDisposable
 @inject IJSRuntime JSRuntime
+@inject AnnotationService AnnotationService
+@inject IOptions<ApiOptions> AppOptions
+@inject NavigationManager Navigation
 @inject InMemoryReportStorageWebExtension ReportStorage
+@inject EnvelopeGenerator.ReceiverUI.Services.DocumentService DocumentService
+@inject EnvelopeGenerator.ReceiverUI.Services.AuthService AuthService
+@inject EnvelopeGenerator.ReceiverUI.Services.EnvelopeReceiverService EnvelopeReceiverService
 
 <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
 <link href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css" rel="stylesheet" />
@@ -20,35 +34,161 @@
 <div class="receiver-page-layout">
 
 <div class="receiver-signature-panel">
-<div class="card m-3">
-    <div class="card-body">
-        <h5 class="card-title">Unterschrift</h5>
-        <p class="card-text text-muted mb-2">
-            @if(SignatureApplied) {
-                <span>Die Unterschrift wurde dem Bericht hinzugefuegt. Sie koennen die Unterschrift erneuern oder das signierte PDF exportieren.</span>
-            } else {
-                <span>Bitte fuegen Sie vor dem PDF-Export Ihre Unterschrift hinzu.</span>
+
+@* ?? Envelope info header ???????????????????????????????????????????????? *@
+@if (_envelopeReceiver is not null) {
+<div class="receiver-info-header">
+    <div class="receiver-info-header__gradient">
+        <div class="receiver-info-header__left">
+            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="receiver-info-header__icon" viewBox="0 0 16 16">
+                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
+            </svg>
+            <div>
+                <div class="receiver-info-header__title">@(_envelopeReceiver.Envelope?.Title ?? "Dokument")</div>
+                @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName) || !string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) {
+                    <div class="receiver-info-header__sender">
+                        Von
+                        @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName)) {
+                            <strong>@_envelopeReceiver.Envelope!.User!.FullName</strong>
+                        }
+                        @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) {
+                            <span class="opacity-75">&lt;@_envelopeReceiver.Envelope!.User!.Email&gt;</span>
+                        }
+                        &nbsp;&middot;&nbsp; @_envelopeReceiver.Envelope?.AddedWhen.ToString("dd.MM.yyyy")
+                    </div>
+                }
+            </div>
+        </div>
+        <div class="receiver-info-header__badges">
+            @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Name)) {
+                <span class="receiver-info-badge">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Z"/>
+                    </svg>
+                    @_envelopeReceiver.Name
+                </span>
             }
-        </p>
-        @if(!string.IsNullOrWhiteSpace(SignatureValidationMessage)) {
-            <div class="text-danger mb-2">@SignatureValidationMessage</div>
+            @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.CompanyName)) {
+                <span class="receiver-info-badge">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                        <path d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022Z"/>
+                    </svg>
+                    @_envelopeReceiver.CompanyName
+                </span>
+            }
+            @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.JobTitle)) {
+                <span class="receiver-info-badge receiver-info-badge--muted">@_envelopeReceiver.JobTitle</span>
+            }
+            @{
+                var docElements = _envelopeReceiver.Envelope?.Documents?.FirstOrDefault()?.Elements;
+                int sigCount = docElements?.Count() ?? _annotations.Count;
+            }
+            @if (sigCount > 0) {
+                <span class="receiver-info-badge receiver-info-badge--accent">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+                    </svg>
+                    @sigCount @(sigCount == 1 ? "Unterschriftsfeld" : "Unterschriftsfelder")
+                </span>
+            }
+        </div>
+    </div>
+    @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message)) {
+        <div class="receiver-info-message">@_envelopeReceiver.Envelope!.Message</div>
+    }
+    @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage)) {
+        <div class="receiver-info-private-message">
+            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1 flex-shrink-0" viewBox="0 0 16 16">
+                <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
+            </svg>
+            @_envelopeReceiver.PrivateMessage
+        </div>
+    }
+</div>
+}
+
+@* ?? Signature action bar ???????????????????????????????????????????????? *@
+<div class="receiver-action-bar">
+    <div class="receiver-action-bar__inner">
+        <button class="btn btn-sm @(_capturedSignature is not null ? "btn-outline-success" : "btn-primary")" @onclick="OpenSignaturePopupAsync">
+            @if (_capturedSignature is not null) {
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+                </svg>
+                <span>Unterschrift gespeichert</span>
+            } else {
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                    <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+                </svg>
+                <span>Unterschrift erstellen</span>
+            }
+        </button>
+
+        @if (_annotations.Count > 0 && !SignatureApplied) {
+            <div class="receiver-action-bar__progress">
+                <div class="progress" style="height:5px; min-width:70px; width:90px;">
+                    <div class="progress-bar @(_checkedAnnotations.Count == _annotations.Count ? "bg-success" : "bg-primary")"
+                         style="width:@(_annotations.Count > 0 ? (_checkedAnnotations.Count * 100 / _annotations.Count) : 0)%"
+                         role="progressbar"></div>
+                </div>
+                <span class="text-muted" style="font-size:0.75rem;">
+                    @_checkedAnnotations.Count&thinsp;/&thinsp;@_annotations.Count
+                    Seite@(AnnotationPages.Count() == 1 ? "" : "n")&nbsp;@string.Join(",", AnnotationPages)
+                </span>
+                @if (_capturedSignature is null) {
+                    <span class="text-muted fst-italic" style="font-size:0.72rem;">Zuerst Unterschrift erstellen</span>
+                } else if (_checkedAnnotations.Count == _annotations.Count) {
+                    <span class="text-success fw-semibold" style="font-size:0.72rem;">&#10003; Wird angewendet&hellip;</span>
+                }
+            </div>
         }
-        <div class="d-flex gap-2 flex-wrap">
-            <button class="btn btn-primary" @onclick="OpenSignaturePopupAsync">
-                @(SignatureApplied ? "Unterschrift erneuern" : "Unterschrift hinzufuegen")
+
+        @if (!string.IsNullOrWhiteSpace(SignatureValidationMessage)) {
+            <span class="text-danger" style="font-size:0.78rem;">@SignatureValidationMessage</span>
+        }
+        @if (SignatureApplied) {
+            <span class="text-success" style="font-size:0.78rem;">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                </svg>
+                Unterschrift angewendet
+            </span>
+        }
+
+        <div class="ms-auto d-flex align-items-center gap-2">
+            <button class="btn btn-sm btn-success" disabled="@(!SignatureApplied)" @onclick="ExportSignedPdfAsync">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
+                </svg>
+                PDF exportieren
             </button>
-            <button class="btn btn-success" disabled="@(!SignatureApplied)" @onclick="ExportSignedPdfAsync">Signiertes PDF exportieren</button>
+            @if (!string.IsNullOrWhiteSpace(EnvelopeKey)) {
+                <button class="btn btn-sm btn-outline-danger" @onclick="LogoutAsync" disabled="@IsLoggingOut" title="Abmelden">
+                    @if (IsLoggingOut) {
+                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                    } else {
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
+                            <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
+                        </svg>
+                    }
+                </button>
+            }
         </div>
     </div>
 </div>
+
 </div>
 
 <DxPopup @bind-Visible="SignaturePopupVisible"
-         HeaderText="Unterschrift erfassen"
-         Width="620px"
-         ShowFooter="true"
-         CloseOnEscape="true"
-         CloseOnOutsideClick="false">
+HeaderText="Unterschrift erfassen"
+Width="620px"
+ShowFooter="true"
+CloseOnEscape="false"
+ShowCloseButton="false"
+CloseOnOutsideClick="false"
+Shown="OnPopupShownAsync">
     <BodyContentTemplate>
         <ul class="nav nav-tabs mb-3">
             <li class="nav-item">
@@ -112,21 +252,21 @@
     <FooterContentTemplate>
         <div class="d-flex gap-2 flex-wrap justify-content-end w-100">
             <button class="btn btn-outline-secondary" @onclick="RenewSignatureAsync">Unterschrift erneuern</button>
-            <button class="btn btn-primary" @onclick="ApplySignatureAsync">Zum Bericht hinzufuegen</button>
-            <button class="btn btn-secondary" @onclick="CloseSignaturePopup">Schliessen</button>
+            <button class="btn btn-primary" @onclick="SaveSignatureAsync">Speichern</button>
         </div>
     </FooterContentTemplate>
 </DxPopup>
 
 <div class="receiver-viewer-wrapper">
 @if(Report is not null) {
-    <DxReportViewer @key="ViewerKey" @ref="reportViewer" Report="Report" RootCssClasses="w-100 h-100" />
+    <DxReportViewer @key="ViewerKey" @ref="reportViewer" Report="Report" RootCssClasses="w-100 h-100" Zoom="1.3" />
 }
 </div>
 
 </div>
 
 @code {
+
     const string SignatureTabDraw = "draw";
     const string SignatureTabText = "text";
     const string SignatureTabImage = "image";
@@ -136,14 +276,16 @@
     const string ImageCanvasId = "receiver-image-signature-pad";
 
     readonly (string Text, string Value)[] TypedSignatureFonts = {
-        ("Brush Script", "'Brush Script MT', cursive"),
-        ("Segoe Script", "'Segoe Script', cursive"),
-        ("Lucida Handwriting", "'Lucida Handwriting', cursive"),
-        ("Comic Sans", "'Comic Sans MS', cursive"),
-        ("Cursive", "cursive")
-    };
+    ("Brush Script", "'Brush Script MT', cursive"),
+    ("Segoe Script", "'Segoe Script', cursive"),
+    ("Lucida Handwriting", "'Lucida Handwriting', cursive"),
+    ("Comic Sans", "'Comic Sans MS', cursive"),
+    ("Cursive", "cursive")
+};
 
-    DxReportViewer reportViewer;
+    [Parameter] public string EnvelopeKey { get; set; } = string.Empty;
+
+    DxReportViewer? reportViewer;
     XtraReport? Report;
     bool SignatureApplied;
     bool SignaturePopupVisible;
@@ -156,20 +298,104 @@
     string SignerPosition = string.Empty;
     string SignaturePlace = string.Empty;
     int ViewerKey;
+    bool IsLoggingOut;
 
-    protected override async Task OnInitializedAsync() {
-        Report = CreateReportInstance();
+    IReadOnlyList<AnnotationDto> _annotations = [];
+    IEnumerable<int> AnnotationPages => _annotations.Select(a => a.Page).Distinct().OrderBy(p => p);
+    EnvelopeReceiverDto? _envelopeReceiver;
+    record SignatureCapture(string DataUrl, string FullName, string Position, string Place);
+    SignatureCapture? _capturedSignature;
+    byte[]? _basePdfBytes;
+    // annotation IDs the user has checked via overlay checkboxes
+    readonly HashSet<long> _checkedAnnotations = [];
+    DotNetObjectReference<ReportViewer>? _dotNetRef;
+    int _lastOverlayViewerKey = -1;
 
-        await Task.CompletedTask;
+    async Task LogoutAsync() {
+        if (string.IsNullOrWhiteSpace(EnvelopeKey) || IsLoggingOut) return;
+        IsLoggingOut = true;
+        await InvokeAsync(StateHasChanged);
+        await AuthService.LogoutEnvelopeReceiverAsync(EnvelopeKey);
+        Navigation.NavigateTo($"/login/{Uri.EscapeDataString(EnvelopeKey)}", forceLoad: true);
     }
 
-    async Task OpenSignaturePopupAsync() {
+    protected override async Task OnInitializedAsync() {
+
+        // ? REDIRECT: /receiver/{key} -> /envelope/{key} (NEW PDF.js viewer)
+        if (!string.IsNullOrWhiteSpace(EnvelopeKey)) {
+            Navigation.NavigateTo($"/envelope/{Uri.EscapeDataString(EnvelopeKey)}", forceLoad: false);
+            return;
+        }
+
+        if (!string.IsNullOrWhiteSpace(EnvelopeKey)) {
+            var hasAccess = await AuthService.CheckEnvelopeAccessAsync(EnvelopeKey);
+            if (!hasAccess) {
+                Navigation.NavigateTo($"/login/{Uri.EscapeDataString(EnvelopeKey)}");
+                return;
+            }
+            else
+            {
+                ActiveSignatureTab = SignatureTabDraw;
+                SignaturePopupVisible = true;
+                SignatureValidationMessage = null;
+                PopupValidationMessage = null;
+            }
+        }
+
+        _annotations = await AnnotationService.GetAnnotationsAsync(EnvelopeKey ?? "fake");
+        _envelopeReceiver = await EnvelopeReceiverService.GetAsync(EnvelopeKey ?? "fake");
+
+        if (!AppOptions.Value.ForceToUseFakeDocument && !string.IsNullOrWhiteSpace(EnvelopeKey)) {
+            var (pdfBytes, _) = await DocumentService.GetDocumentAsync(EnvelopeKey);
+            if (pdfBytes is { Length: > 0 })
+                _basePdfBytes = pdfBytes;
+        }
+
+        var initialReport = BuildFreshBaseReport();
+        Report = initialReport;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender) {
+        if (firstRender)
+            _dotNetRef = DotNetObjectReference.Create(this);
+
+
+        if (Report is not null && _annotations.Count > 0
+            && _capturedSignature is not null && !SignatureApplied
+            && _lastOverlayViewerKey != ViewerKey) {
+            _lastOverlayViewerKey = ViewerKey;
+            await JSRuntime.InvokeVoidAsync(
+                "receiverSignature.installAnnotationCheckboxes",
+                _annotations, _checkedAnnotations.ToArray(), _dotNetRef);
+        }
+    }
+
+    [JSInvokable]
+    public async Task OnAnnotationToggled(long annotationId, bool isChecked) {
+        if (isChecked)
+            _checkedAnnotations.Add(annotationId);
+        else
+            _checkedAnnotations.Remove(annotationId);
+        await InvokeAsync(StateHasChanged);
+
+        if (_capturedSignature is not null
+            && !SignatureApplied
+            && _annotations.Count > 0
+            && _checkedAnnotations.Count == _annotations.Count) {
+            // K?sa bekleme: kullan?c? son tick'in görsel feedback'ini görsün
+            await Task.Delay(400);
+            await SubmitSignaturesAsync();
+        }
+    }
+
+    void OpenSignaturePopupAsync() {
         ActiveSignatureTab = SignatureTabDraw;
         SignaturePopupVisible = true;
         SignatureValidationMessage = null;
         PopupValidationMessage = null;
-        await InvokeAsync(StateHasChanged);
-        await Task.Delay(50);
+    }
+
+    async Task OnPopupShownAsync() {
         await InitializeActiveSignatureTabAsync();
     }
 
@@ -224,30 +450,61 @@
         await JSRuntime.InvokeVoidAsync("receiverSignature.renderTypedSignature", TypedCanvasId, TypedSignatureText, TypedSignatureFont);
     }
 
-    async Task ApplySignatureAsync() {
-        if(string.IsNullOrWhiteSpace(SignerFullName)) {
+    async Task SaveSignatureAsync() {
+        if (string.IsNullOrWhiteSpace(SignerFullName)) {
             PopupValidationMessage = "Bitte geben Sie Vor- und Nachname ein.";
             return;
         }
-
-        if(string.IsNullOrWhiteSpace(SignaturePlace)) {
+        if (string.IsNullOrWhiteSpace(SignaturePlace)) {
             PopupValidationMessage = "Bitte geben Sie den Ort ein.";
             return;
         }
-
         var signatureDataUrl = await GetActiveSignatureDataUrlAsync();
-
-        if(string.IsNullOrWhiteSpace(signatureDataUrl)) {
+        if (string.IsNullOrWhiteSpace(signatureDataUrl)) {
             PopupValidationMessage = "Die Unterschrift ist fuer den PDF-Export erforderlich.";
             return;
         }
 
         PopupValidationMessage = null;
         SignatureValidationMessage = null;
-        Report = CreateSignedReportInstance(signatureDataUrl, SignerFullName.Trim(), SignerPosition.Trim(), SignaturePlace.Trim());
-        SignatureApplied = true;
+        _capturedSignature = new(signatureDataUrl, SignerFullName.Trim(), SignerPosition.Trim(), SignaturePlace.Trim());
+
+        // If no annotations, apply immediately (no checkbox step needed)
+        if (_annotations.Count == 0) {
+            var freshReport = BuildFreshBaseReport();
+            AddSignature(freshReport, _capturedSignature.DataUrl, _capturedSignature.FullName, _capturedSignature.Position, _capturedSignature.Place);
+            Report = freshReport;
+            SignatureApplied = true;
+            SignaturePopupVisible = false;
+            ViewerKey++;
+            return;
+        }
+
+        // Close popup; checkboxes will appear on the PDF via OnAfterRenderAsync
         SignaturePopupVisible = false;
+        _lastOverlayViewerKey = -1; // force overlay reinstall
+        await InvokeAsync(StateHasChanged);
+    }
+
+    async Task SubmitSignaturesAsync() {
+        if (_checkedAnnotations.Count == 0) {
+            SignatureValidationMessage = "Bitte markieren Sie mindestens ein Unterschriftsfeld im Dokument.";
+            return;
+        }
+        if (_checkedAnnotations.Count < _annotations.Count) {
+            SignatureValidationMessage = $"Bitte markieren Sie alle {_annotations.Count} Unterschriftsfelder. Noch {_annotations.Count - _checkedAnnotations.Count} offen.";
+            return;
+        }
+
+        SignatureValidationMessage = null;
+        var freshReport = BuildFreshBaseReport();
+        foreach (var ann in _annotations)
+            AddSignatureAtAnnotation(freshReport, ann, _capturedSignature!.DataUrl, _capturedSignature.FullName, _capturedSignature.Position, _capturedSignature.Place);
+
+        Report = freshReport;
+        SignatureApplied = true;
         ViewerKey++;
+        await InvokeAsync(StateHasChanged);
     }
 
     async Task<string?> GetActiveSignatureDataUrlAsync() {
@@ -270,24 +527,66 @@
 
         try {
             SignatureValidationMessage = null;
-            await reportViewer.ExportToAsync(ExportFormat.Pdf);
+            await reportViewer!.ExportToAsync(ExportFormat.Pdf);
         } catch(Exception) {
             SignatureValidationMessage = "Das signierte PDF konnte nicht exportiert werden. Bitte laden Sie die Seite neu und versuchen Sie es erneut.";
         }
     }
 
+    XtraReport BuildFreshBaseReport() {
+        if (_basePdfBytes is { Length: > 0 }) {
+            var report = new XtraReport();
+            var detail = new DevExpress.XtraReports.UI.DetailBand();
+            report.Bands.Add(detail);
+            detail.Controls.Add(new DevExpress.XtraReports.UI.XRPdfContent { Source = _basePdfBytes, GenerateOwnPages = true });
+            return report;
+        }
+        return CreateReportInstance();
+    }
+
+    static void AddAnnotationPlaceholders(XtraReport report, IReadOnlyList<AnnotationDto> annotations) {
+        var bottomMargin = report.Bands.OfType<BottomMarginBand>().FirstOrDefault();
+        if (bottomMargin is null) {
+            bottomMargin = new BottomMarginBand();
+            report.Bands.Add(bottomMargin);
+        }
+
+        const float sigWidth      = 230F;
+        const float sigHeight     = 154F;
+        const float bottomPad     = 6F;
+        const float defaultTopPad = 8F;
+        const float maxBandHeight = 210F;
+
+        float requiredHeight = defaultTopPad + sigHeight + bottomPad;
+        bottomMargin.HeightF = Math.Min(maxBandHeight, Math.Max(bottomMargin.HeightF, requiredHeight));
+        float topPad = Math.Max(0F, bottomMargin.HeightF - bottomPad - sigHeight);
+
+        foreach (var ann in annotations) {
+            float sigX  = (float)(ann.X);
+            var annotId = ann.Id.ToString();
+
+            var placeholder = new XRLabel {
+                Name          = $"receiverSignaturePlaceholder_{annotId}",
+                Text          = "\u270e Bitte unterschreiben",
+                BoundsF       = new RectangleF(sigX, topPad, sigWidth, sigHeight),
+                Borders       = BorderSide.All,
+                BorderColor   = System.Drawing.Color.FromArgb(230, 81, 0),
+                BackColor     = System.Drawing.Color.FromArgb(30, 255, 236, 153),
+                Font          = new DXFont("Open Sans", 10F, DXFontStyle.Regular),
+                ForeColor     = System.Drawing.Color.FromArgb(94, 38, 0),
+                TextAlignment = TextAlignment.MiddleCenter
+            };
+
+            bottomMargin.Controls.Add(placeholder);
+        }
+    }
+
     XtraReport CreateReportInstance() {
         return ReportStorage.TryGetReport("LargeDatasetReport", out var savedReport)
             ? savedReport
             : PredefinedReports.ReportsFactory.GetReport("LargeDatasetReport");
     }
 
-    XtraReport CreateSignedReportInstance(string signatureDataUrl, string signerFullName, string signerPosition, string signaturePlace) {
-        var report = CreateReportInstance();
-        AddSignature(report, signatureDataUrl, signerFullName, signerPosition, signaturePlace);
-        return report;
-    }
-
     static void AddSignature(XtraReport report, string signatureDataUrl, string signerFullName, string signerPosition, string signaturePlace) {
         var imageBytes = Convert.FromBase64String(signatureDataUrl[(signatureDataUrl.IndexOf(',') + 1)..]);
         using var imageStream = new MemoryStream(imageBytes);
@@ -323,8 +622,8 @@
         float labelY = imageY + sigImgHeight + innerGap;
 
         var signatureInformation = string.IsNullOrWhiteSpace(signerPosition)
-            ? $"Empfaengerunterschrift\n{signerFullName}\n{signaturePlace}, {DateTime.Now:d}"
-            : $"Empfaengerunterschrift\n{signerFullName}\n{signerPosition}\n{signaturePlace}, {DateTime.Now:d}";
+            ? $"{signerFullName}\n{signaturePlace}, {DateTime.Now:d}"
+            : $"{signerFullName}\n{signerPosition}\n{signaturePlace}, {DateTime.Now:d}";
 
         var signature = new XRPictureBox {
             Name = "receiverSignatureImage",
@@ -357,4 +656,80 @@
         foreach(var control in controls)
             bottomMargin.Controls.Remove(control);
     }
+
+    static void AddSignatureAtAnnotation(XtraReport report, AnnotationDto? annotation, string signatureDataUrl, string signerFullName, string signerPosition, string signaturePlace) {
+        var imageBytes = Convert.FromBase64String(signatureDataUrl[(signatureDataUrl.IndexOf(',') + 1)..]);
+        using var imageStream = new MemoryStream(imageBytes);
+        var imageSource = new ImageSource(DXImage.FromStream(imageStream));
+
+        var detail = report.Bands.OfType<DevExpress.XtraReports.UI.DetailBand>().FirstOrDefault();
+        if (detail is null) return;
+
+        var annotId = annotation?.Id.ToString() ?? "0";
+        RemoveExistingSignatureById(detail, annotId);
+
+        const float sigWidth     = 230F;
+        const float sigImgHeight = 70F;
+        const float infoHeight   = 48.75F;
+        const float innerGap     = 5F;
+
+        float sigX   = (float)(annotation?.X ?? 390.0);
+        float imageY = (float)(annotation?.Y ?? 900.0);
+        float labelY = imageY + sigImgHeight + innerGap;
+        int targetPage = annotation?.Page ?? 1;
+
+        var signatureInformation = string.IsNullOrWhiteSpace(signerPosition)
+            ? $"{signerFullName}\n{signaturePlace}, {DateTime.Now:d}"
+            : $"{signerFullName}\n{signerPosition}\n{signaturePlace}, {DateTime.Now:d}";
+
+        var signature = new XRPictureBox {
+            Name        = $"receiverSignatureImage_{annotId}",
+            ImageSource = imageSource,
+            BoundsF     = new RectangleF(sigX, imageY, sigWidth, sigImgHeight),
+            Sizing      = ImageSizeMode.ZoomImage,
+            Borders     = BorderSide.Bottom,
+            BorderColor = System.Drawing.Color.FromArgb(73, 80, 87),
+            BackColor = Color.FromArgb(219, 219, 219)
+        };
+
+        var signatureLabel = new XRLabel {
+            Name          = $"receiverSignatureLabel_{annotId}",
+            Text          = signatureInformation,
+            Multiline     = true,
+            BoundsF       = new RectangleF(sigX, labelY - 5, sigWidth, infoHeight),
+            Font          = new DXFont("Open Sans", 8F, DXFontStyle.Regular),
+            ForeColor     = System.Drawing.Color.FromArgb(73, 80, 87),
+            TextAlignment = TextAlignment.TopCenter,
+            BackColor = Color.FromArgb(219, 219, 219)
+        };
+
+        // Show each control only on the target page using an independent print counter
+        int sigPrintCount = 0;
+        signature.BeforePrint += (_, e) => {
+            sigPrintCount++;
+            e.Cancel = sigPrintCount != targetPage;
+        };
+
+        int lblPrintCount = 0;
+        signatureLabel.BeforePrint += (_, e) => {
+            lblPrintCount++;
+            e.Cancel = lblPrintCount != targetPage;
+        };
+
+        detail.Controls.AddRange(new XRControl[] { signature, signatureLabel });
+    }
+
+    static void RemoveExistingSignatureById(DevExpress.XtraReports.UI.DetailBand detail, string annotId) {
+        var controls = detail.Controls
+            .Cast<XRControl>()
+            .Where(c => c.Name == $"receiverSignatureImage_{annotId}" || c.Name == $"receiverSignatureLabel_{annotId}")
+            .ToArray();
+        foreach (var c in controls)
+            detail.Controls.Remove(c);
+    }
+
+    public void Dispose() {
+        _dotNetRef?.Dispose();
+    }
 }
+

EnvelopeGenerator.ReceiverUI/Pages/TestViewer.razor

@@ -0,0 +1,81 @@
+@page "/test"
+@using System.Drawing
+@using DevExpress.Drawing
+@using DevExpress.Utils
+@using DevExpress.XtraPrinting
+@using DevExpress.XtraPrinting.Drawing
+@using XtraReport = DevExpress.XtraReports.UI.XtraReport
+@using BottomMarginBand = DevExpress.XtraReports.UI.BottomMarginBand
+@using XRLabel = DevExpress.XtraReports.UI.XRLabel
+@using XRPictureBox = DevExpress.XtraReports.UI.XRPictureBox
+@using XRControl = DevExpress.XtraReports.UI.XRControl
+@using ImageSizeMode = DevExpress.XtraPrinting.ImageSizeMode
+@using EnvelopeGenerator.ReceiverUI.Services
+@using DevExpress.Blazor.Reporting
+@inject IJSRuntime JSRuntime
+@inject InMemoryReportStorageWebExtension ReportStorage
+@inject EnvelopeGenerator.ReceiverUI.Services.DocumentService DocumentService
+@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
+@inject HttpClient Http
+@using System;
+
+<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+<link href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css" rel="stylesheet" />
+
+<div class="receiver-page-layout">
+
+<div class="receiver-viewer-wrapper">
+        <embed class="w-100 h-50" src="/docs/Document.pdf" type="application/pdf" />
+        @if (PdfBytes is { Length: > 0 }) {
+            <DxPdfViewer DocumentContent="PdfBytes" CssClass="w-100 h-50" />
+        }
+        else{
+            <div>Not found</div>
+        }
+</div>
+
+</div>
+
+@code {
+
+    const string SignatureTabDraw = "draw";
+    const string SignatureTabText = "text";
+    const string SignatureTabImage = "image";
+    const string DrawCanvasId = "receiver-signature-pad";
+    const string TypedCanvasId = "receiver-typed-signature-pad";
+    const string ImageInputId = "receiver-signature-image-input";
+    const string ImageCanvasId = "receiver-image-signature-pad";
+
+    readonly (string Text, string Value)[] TypedSignatureFonts = {
+        ("Brush Script", "'Brush Script MT', cursive"),
+        ("Segoe Script", "'Segoe Script', cursive"),
+        ("Lucida Handwriting", "'Lucida Handwriting', cursive"),
+        ("Comic Sans", "'Comic Sans MS', cursive"),
+        ("Cursive", "cursive")
+    };
+
+    [Parameter] public string? EnvelopeKey { get; set; }
+
+    DxReportViewer? reportViewer;
+    XtraReport? Report;
+    string PdfViewerUrl = string.Empty;
+    byte[]? PdfBytes;
+    byte[]? SignedPdfBytes;
+    bool SignatureApplied;
+    bool SignaturePopupVisible;
+    string? PopupValidationMessage;
+    string ActiveSignatureTab = SignatureTabDraw;
+    string TypedSignatureText = string.Empty;
+    string TypedSignatureFont = "'Brush Script MT', cursive";
+    string SignerFullName = string.Empty;
+    string SignerPosition = string.Empty;
+    string SignaturePlace = string.Empty;
+    int ViewerKey;
+
+    protected override async Task OnInitializedAsync() {
+        PdfBytes = await Http.GetByteArrayAsync("/docs/Document.pdf");
+    }
+
+
+}
+

EnvelopeGenerator.ReceiverUI/Program.cs

@@ -3,6 +3,7 @@ using Microsoft.AspNetCore.Components.Web;
 using EnvelopeGenerator.ReceiverUI;
 using DevExpress.DataAccess.Web;
 using EnvelopeGenerator.ReceiverUI.Services;
+using EnvelopeGenerator.ReceiverUI.Options;
 using DevExpress.XtraReports.Services;
 using DevExpress.Blazor.Reporting;
 using DevExpress.XtraReports.Web.Extensions;
@@ -11,8 +12,19 @@ var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+builder.Services.Configure<ApiOptions>(opts =>
+builder.Configuration.GetSection(ApiOptions.SectionName).Bind(opts));
+builder.Services.Configure<PdfViewerOptions>(opts =>
+builder.Configuration.GetSection(PdfViewerOptions.SectionName).Bind(opts));
+builder.Services.AddScoped<EnvelopeGenerator.ReceiverUI.Services.DocumentService>();
+builder.Services.AddScoped<EnvelopeGenerator.ReceiverUI.Services.AuthService>();
+builder.Services.AddScoped<EnvelopeGenerator.ReceiverUI.Services.AnnotationService>();
+builder.Services.AddScoped<EnvelopeGenerator.ReceiverUI.Services.EnvelopeReceiverService>();
+builder.Services.AddScoped<EnvelopeGenerator.ReceiverUI.Services.SignatureService>();
+builder.Services.AddSingleton<EnvelopeGenerator.ReceiverUI.Services.AppVersionService>();
 
 builder.Services.AddDevExpressWebAssemblyBlazorReportViewer();
+builder.Services.AddDevExpressWebAssemblyBlazorPdfViewer();
 
 builder.Services.AddDevExpressBlazorReportingWebAssembly(configure => {
     configure.UseDevelopmentMode();

EnvelopeGenerator.ReceiverUI/Services/AnnotationService.cs

@@ -0,0 +1,33 @@
+using System.Net.Http.Json;
+using System.Text.Json;
+using EnvelopeGenerator.ReceiverUI.Models;
+using EnvelopeGenerator.ReceiverUI.Options;
+using Microsoft.Extensions.Options;
+
+namespace EnvelopeGenerator.ReceiverUI.Services;
+
+/// <summary>
+/// Retrieves annotation positions from the API.
+/// The URL is composed as <c>{BaseUrl}/api/Annotation/{envelopeKey}</c>.
+/// During development, <c>BaseUrl</c> is empty so the request resolves to the
+/// YARP-proxied route on the same origin, which currently serves
+/// <c>fake-data/annotations.json</c>. To switch to real data, update the
+/// YARP route in <c>yarp.json</c> — no code change required.
+/// </summary>
+[Obsolete("Use SignatureService.")]
+public class AnnotationService(HttpClient http, IOptions<ApiOptions> apiOptions)
+{
+    private static readonly JsonSerializerOptions _jsonOptions = new(JsonSerializerDefaults.Web);
+
+    public async Task<IReadOnlyList<AnnotationDto>> GetAnnotationsAsync(string envelopeKey, CancellationToken cancel = default)
+    {
+        var url = $"{apiOptions.Value.BaseUrl}/api/Annotation/{Uri.EscapeDataString(envelopeKey)}";
+        var response = await http.GetAsync(url, cancel);
+
+        if (!response.IsSuccessStatusCode)
+            return [];
+
+        var result = await response.Content.ReadFromJsonAsync<List<AnnotationDto>>(_jsonOptions, cancel);
+        return result ?? [];
+    }
+}

EnvelopeGenerator.ReceiverUI/Services/AppVersionService.cs

@@ -0,0 +1,26 @@
+namespace EnvelopeGenerator.ReceiverUI.Services;
+
+/// <summary>
+/// Provides application version for cache busting static assets.
+/// Version is automatically incremented on each build via AssemblyVersion.
+/// </summary>
+public class AppVersionService
+{
+    /// <summary>
+    /// Current application version (e.g., "1.0.0.0")
+    /// </summary>
+    public string Version { get; }
+
+    public AppVersionService()
+    {
+        // Get version from assembly metadata
+        Version = typeof(AppVersionService).Assembly.GetName().Version?.ToString() ?? "1.0.0.0";
+    }
+
+    /// <summary>
+    /// Generates versioned URL for static assets (cache busting)
+    /// </summary>
+    /// <param name="path">Asset path (e.g., "css/envelope-viewer.css")</param>
+    /// <returns>Versioned URL (e.g., "css/envelope-viewer.css?v=1.0.0.0")</returns>
+    public string GetVersionedUrl(string path) => $"{path}?v={Version}";
+}

EnvelopeGenerator.ReceiverUI/Services/AuthService.cs

@@ -0,0 +1,57 @@
+using System.Net;
+using EnvelopeGenerator.ReceiverUI.Options;
+using Microsoft.Extensions.Options;
+
+namespace EnvelopeGenerator.ReceiverUI.Services;
+
+public enum EnvelopeLoginResult { Success, InvalidCode, NotFound, Error }
+
+public class AuthService(HttpClient http, IOptions<ApiOptions> apiOptions)
+{
+    private readonly ApiOptions _api = apiOptions.Value;
+
+    /// <summary>
+    /// Checks whether the current user holds a valid receiver token for the given envelope key.
+    /// Calls GET /api/auth/check/envelope/{envelopeKey}.
+    /// </summary>
+    public async Task<bool> CheckEnvelopeAccessAsync(string envelopeKey, CancellationToken cancel = default)
+    {
+        var response = await http.GetAsync($"{_api.BaseUrl}/api/auth/check/envelope/{Uri.EscapeDataString(envelopeKey)}", cancel);
+        return response.StatusCode == HttpStatusCode.OK;
+    }
+
+    /// <summary>
+    /// Submits the access code for the given envelope key.
+    /// Calls POST /api/Auth/envelope-receiver/{key} with multipart/form-data.
+    /// On success the API sets an authentication cookie automatically.
+    /// </summary>
+    public async Task<EnvelopeLoginResult> LoginEnvelopeReceiverAsync(string envelopeKey, string accessCode, CancellationToken cancel = default)
+    {
+        var form = new MultipartFormDataContent();
+        form.Add(new StringContent(accessCode), "AccessCode");
+
+        var response = await http.PostAsync(
+            $"{_api.BaseUrl}/api/Auth/envelope-receiver/{Uri.EscapeDataString(envelopeKey)}",
+            form, cancel);
+
+        return response.StatusCode switch
+        {
+            HttpStatusCode.OK => EnvelopeLoginResult.Success,
+            HttpStatusCode.Unauthorized => EnvelopeLoginResult.InvalidCode,
+            HttpStatusCode.NotFound => EnvelopeLoginResult.NotFound,
+            _ => EnvelopeLoginResult.Error
+        };
+    }
+
+    /// <summary>
+    /// Removes the per-envelope receiver cookie for the given envelope key.
+    /// Calls POST /api/auth/logout/envelope/{envelopeKey}.
+    /// </summary>
+    public async Task<bool> LogoutEnvelopeReceiverAsync(string envelopeKey, CancellationToken cancel = default)
+    {
+        var response = await http.PostAsync(
+            $"{_api.BaseUrl}/api/auth/logout/envelope/{Uri.EscapeDataString(envelopeKey)}",
+            null, cancel);
+        return response.IsSuccessStatusCode;
+    }
+}

EnvelopeGenerator.ReceiverUI/Services/DocumentService.cs

@@ -0,0 +1,27 @@
+using System.Net;
+using System.Net.Http;
+using Microsoft.Extensions.Options;
+using EnvelopeGenerator.ReceiverUI.Options;
+
+namespace EnvelopeGenerator.ReceiverUI.Services;
+
+public class DocumentService(HttpClient http, IOptions<ApiOptions> apiOptions)
+{
+    private readonly ApiOptions _api = apiOptions.Value;
+
+    /// <summary>
+    /// Fetches the PDF bytes for the given envelope key from the API.
+    /// Returns null bytes with the HTTP status code on failure.
+    /// </summary>
+    public async Task<(byte[]? Bytes, HttpStatusCode StatusCode)> GetDocumentAsync(string envelopeKey, CancellationToken cancel = default)
+    {
+        var response = await http.GetAsync($"{_api.BaseUrl}/api/Document/{Uri.EscapeDataString(envelopeKey)}", cancel);
+
+        if (!response.IsSuccessStatusCode)
+            return (null, response.StatusCode);
+
+        var bytes = await response.Content.ReadAsByteArrayAsync(cancel);
+        return (bytes, response.StatusCode);
+    }
+}
+

EnvelopeGenerator.ReceiverUI/Services/EnvelopeReceiverService.cs

@@ -0,0 +1,27 @@
+using System.Net.Http.Json;
+using System.Text.Json;
+using EnvelopeGenerator.ReceiverUI.Models;
+using EnvelopeGenerator.ReceiverUI.Options;
+using Microsoft.Extensions.Options;
+
+namespace EnvelopeGenerator.ReceiverUI.Services;
+
+/// <summary>
+/// Retrieves the <see cref="EnvelopeReceiverDto"/> for the authenticated receiver
+/// from <c>GET api/EnvelopeReceiver/{envelopeKey}</c>.
+/// </summary>
+public class EnvelopeReceiverService(HttpClient http, IOptions<ApiOptions> apiOptions)
+{
+    private static readonly JsonSerializerOptions _jsonOptions = new(JsonSerializerDefaults.Web);
+
+    public async Task<EnvelopeReceiverDto?> GetAsync(string envelopeKey, CancellationToken cancel = default)
+    {
+        var url = $"{apiOptions.Value.BaseUrl}/api/EnvelopeReceiver/{Uri.EscapeDataString(envelopeKey)}";
+        var response = await http.GetAsync(url, cancel);
+
+        if (!response.IsSuccessStatusCode)
+            return null;
+
+        return await response.Content.ReadFromJsonAsync<EnvelopeReceiverDto>(_jsonOptions, cancel);
+    }
+}

EnvelopeGenerator.ReceiverUI/Services/SignatureService.cs

@@ -0,0 +1,24 @@
+using System.Net.Http.Json;
+using System.Text.Json;
+using EnvelopeGenerator.ReceiverUI.Models;
+using EnvelopeGenerator.ReceiverUI.Options;
+using Microsoft.Extensions.Options;
+
+namespace EnvelopeGenerator.ReceiverUI.Services;
+
+public class SignatureService(HttpClient http, IOptions<ApiOptions> apiOptions)
+{
+    private static readonly JsonSerializerOptions _jsonOptions = new(JsonSerializerDefaults.Web);
+
+    public async Task<IReadOnlyList<SignatureDto>> GetAsync(string envelopeKey, CancellationToken cancel = default)
+    {
+        var url = $"{apiOptions.Value.BaseUrl}/api/Signature/{Uri.EscapeDataString(envelopeKey)}";
+        var response = await http.GetAsync(url, cancel);
+
+        if (!response.IsSuccessStatusCode)
+            throw new HttpRequestException($"Failed to retrieve signatures for envelope {envelopeKey}: {response.StatusCode} {response.ReasonPhrase}");
+
+        var result = await response.Content.ReadFromJsonAsync<List<SignatureDto>>(_jsonOptions, cancel);
+        return result ?? [];
+    }
+}

EnvelopeGenerator.ReceiverUI/Shared/MainLayout.razor

@@ -3,14 +3,15 @@
 
 <div class="page">
 <main>
-        <div class="top-row px-4">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
-        </div>
-
         <article class="content">
             @Body
         </article>
     </main>
+    <footer class="receiver-footer">
+        <span>&copy; SignFlow 2023-2024 <a href="https://digitaldata.works" target="_blank" rel="noopener">Digital Data GmbH</a></span>
+        <span class="receiver-footer__sep">&#124;</span>
+        <a href="docs/privacy-policy.de-DE.html" target="_blank" rel="noopener">Datenschutz</a>
+    </footer>
 </div>
 
 @code {

EnvelopeGenerator.ReceiverUI/Shared/MainLayout.razor.css

@@ -7,75 +7,11 @@
 
 main {
     flex: 1;
+    margin: 0;
+    padding: 0;
 }
 
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 300px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding: 2rem !important;
-    }
+article {
+    padding: 0 !important;
+    margin: 0 !important;
 }

EnvelopeGenerator.ReceiverUI/_Imports.razor

@@ -6,4 +6,5 @@
 @using EnvelopeGenerator.ReceiverUI
 @using EnvelopeGenerator.ReceiverUI.Shared
 @using DevExpress.Blazor.Reporting
+@using DevExpress.Blazor.PdfViewer
 @using DevExpress.Blazor

EnvelopeGenerator.ReceiverUI/wwwroot/appsettings.json

@@ -0,0 +1,18 @@
+{
+  "Api": {
+    "BaseUrl": "",
+    "ForceToUseFakeDocument": false
+  },
+  "PdfViewer": {
+    "ThumbnailBaseScale": 0.75,
+    "ThumbnailEnableHiDPI": true,
+    "ThumbnailMaxDPR": 2.0,
+    "MainCanvasEnableHiDPI": true,
+    "MainCanvasMaxDPR": 2.0,
+    "EnableSmoothZoom": true,
+    "ZoomTransitionDuration": 900,
+    "RenderingOpacity": 0.85,
+    "ThumbnailRenderDelay": 50,
+    "ZoomStepPercentage": 5
+  }
+}

EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css

@@ -3,6 +3,8 @@
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     padding: 0;
+    margin: 0;
+    width: 100%;
 }
 
 html, body {
@@ -10,13 +12,19 @@ html, body {
     overflow: hidden;
 }
 
+main, .page {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
 article {
-    height: calc(100vh - 70px);
+    height: calc(100vh - 36px);
     display: flex;
     flex-direction: column;
-    overflow: hidden;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    overflow-y: auto;
+    padding: 0 !important;
+    margin: 0 !important;
 }
 
 .receiver-page-layout {
@@ -68,6 +76,293 @@ article {
 }
 
 .dx-blazor-reporting-container {
-    height: calc(100vh - 130px) !important;
+    height: calc(100vh - 166px) !important;
     width: 100% !important;
+}
+
+/* ── Force DevExpress viewer pages into a single centered column ─────────── */
+.dxbrv-report-preview-content {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+}
+
+/* ── Annotation signature checkbox overlays ─────────────────────────────── */
+.annot-sig-cb-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    font-family: "Segoe UI", Arial, sans-serif;
+    padding: 0 12px;
+    overflow: hidden;
+    cursor: pointer;
+    user-select: none;
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    border: none;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.35);
+    transition: box-shadow 0.18s, filter 0.18s;
+}
+
+.annot-sig-cb-wrapper:hover {
+    filter: brightness(1.12);
+    box-shadow: 0 4px 14px rgba(44, 62, 80, 0.45);
+}
+
+.annot-sig-cb-wrapper--checked {
+    background: linear-gradient(135deg, #1a6b2a 0%, #27ae60 100%);
+    box-shadow: 0 2px 8px rgba(26, 107, 42, 0.35);
+}
+
+.annot-sig-cb-wrapper--checked:hover {
+    filter: brightness(1.1);
+    box-shadow: 0 4px 14px rgba(26, 107, 42, 0.45);
+}
+
+.annot-sig-cb {
+    display: none;
+}
+
+.annot-sig-cb__label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    letter-spacing: 0.01em;
+}
+
+/* ── Envelope info header ────────────────────────────────────────────────── */
+.receiver-info-header {
+    border-bottom: 1px solid rgba(0,0,0,.08);
+}
+
+.receiver-info-header__gradient {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px 16px 8px;
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    color: #fff;
+}
+
+.receiver-info-header__left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+
+.receiver-info-header__icon {
+    flex-shrink: 0;
+    opacity: .85;
+}
+
+.receiver-info-header__title {
+    font-size: 0.92rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 340px;
+}
+
+.receiver-info-header__sender {
+    font-size: 0.72rem;
+    opacity: .8;
+    margin-top: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 400px;
+}
+
+.receiver-info-header__badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    align-items: center;
+}
+
+.receiver-info-badge {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(255,255,255,.18);
+    color: #fff;
+    border-radius: 20px;
+    padding: 2px 9px;
+    font-size: 0.70rem;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.receiver-info-badge--muted {
+    background: rgba(255,255,255,.10);
+    opacity: .8;
+}
+
+.receiver-info-badge--accent {
+    background: rgba(39,174,96,.35);
+    border: 1px solid rgba(39,174,96,.5);
+}
+
+.receiver-info-message {
+    padding: 7px 16px;
+    font-size: 0.78rem;
+    color: #444;
+    border-bottom: 1px solid rgba(0,0,0,.05);
+    white-space: pre-wrap;
+    line-height: 1.45;
+}
+
+.receiver-info-private-message {
+    display: flex;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 5px 16px 6px;
+    font-size: 0.75rem;
+    color: #5a5a72;
+    background: #f8f7ff;
+    border-top: 1px solid rgba(90,80,180,.12);
+}
+
+/* ── Signature action bar ────────────────────────────────────────────────── */
+.receiver-action-bar {
+    border-bottom: 1px solid rgba(0,0,0,.08);
+    background: #fff;
+}
+
+.receiver-action-bar__inner {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 7px 14px;
+}
+
+.receiver-action-bar__progress {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex-wrap: wrap;
+}
+
+/* ── Home page ───────────────────────────────────────────────────────────── */
+.home-page-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: calc(100vh - 36px);
+    background: linear-gradient(160deg, #1e2e3e 0%, #2c3e50 40%, #3498db 100%);
+    padding-bottom: 36px;
+}
+
+.home-hero-header {
+    width: 100%;
+    padding: 48px 24px 36px;
+    text-align: center;
+}
+
+.home-hero-header__inner {
+    display: inline-flex;
+    align-items: center;
+    gap: 20px;
+    color: #fff;
+}
+
+.home-hero-header__icon {
+    opacity: 0.90;
+    flex-shrink: 0;
+}
+
+.home-hero-header__title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    color: #fff;
+    letter-spacing: 0.02em;
+}
+
+.home-hero-header__subtitle {
+    font-size: 0.92rem;
+    margin: 4px 0 0;
+    color: rgba(255,255,255,0.75);
+}
+
+.home-content {
+    width: 100%;
+    max-width: 520px;
+    padding: 0 16px;
+}
+
+.home-card {
+    border-radius: 12px !important;
+    overflow: hidden;
+}
+
+.home-btn-primary {
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    border: none;
+    color: #fff;
+    font-weight: 500;
+    border-radius: 8px;
+    transition: filter 0.15s, box-shadow 0.15s;
+    box-shadow: 0 2px 10px rgba(44,62,80,0.30);
+}
+
+.home-btn-primary:hover {
+    filter: brightness(1.12);
+    box-shadow: 0 4px 16px rgba(44,62,80,0.40);
+    color: #fff;
+}
+
+.home-feature-badge {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(52,152,219,0.10);
+    color: #3498db;
+    border: 1px solid rgba(52,152,219,0.25);
+    border-radius: 20px;
+    padding: 4px 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+/* ── Footer ──────────────────────────────────────────────────────────────── */
+.receiver-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 0 20px;
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 0.72rem;
+    z-index: 100;
+    flex-shrink: 0;
+}
+
+.receiver-footer a {
+    color: rgba(255, 255, 255, 0.90);
+    text-decoration: none;
+    transition: color 0.15s;
+}
+
+.receiver-footer a:hover {
+    color: #ffffff;
+    text-decoration: underline;
+}
+
+.receiver-footer__sep {
+    opacity: 0.4;
 }

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

@@ -0,0 +1,705 @@
+.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;
+}
+
+.envelope-content {
+    flex: 1;
+    min-height: 0;
+    padding: 1.5rem;
+    position: relative;
+    overflow: auto;
+}
+
+.pdf-viewer-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.pdf-thumbnails {
+    position: relative;
+    width: 260px;
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-radius: 16px 0 0 16px;
+    box-shadow: 
+        0 8px 32px rgba(0, 0, 0, 0.12),
+        0 0 0 1px rgba(126, 34, 206, 0.1);
+    border: 1px solid rgba(126, 34, 206, 0.15);
+    border-right: none;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.pdf-thumbnails__content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.pdf-thumbnails__content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.pdf-thumbnails__content::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+}
+
+.pdf-thumbnails__content::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
+    border-radius: 3px;
+}
+
+.pdf-thumbnails__content::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #6b1cb0 0%, #1e3a72 100%);
+}
+
+.pdf-splitter {
+    width: 4px;
+    background: transparent;
+    cursor: col-resize;
+    flex-shrink: 0;
+    position: relative;
+    transition: background 0.2s ease;
+    z-index: 10;
+    user-select: none;
+}
+
+.pdf-splitter::before {
+    content: '';
+    position: absolute;
+    left: -4px;
+    right: -4px;
+    top: 0;
+    bottom: 0;
+    /* Enlarged hitbox for easier grabbing */
+}
+
+.pdf-splitter:hover,
+.pdf-splitter.resizing {
+    background: linear-gradient(90deg, 
+        rgba(126, 34, 206, 0.4) 0%, 
+        rgba(42, 82, 152, 0.4) 100%);
+}
+
+.pdf-splitter:active {
+    background: linear-gradient(90deg, 
+        rgba(126, 34, 206, 0.6) 0%, 
+        rgba(42, 82, 152, 0.6) 100%);
+}
+
+/* Prevent text selection during resize */
+body.resizing {
+    user-select: none;
+    cursor: col-resize !important;
+}
+
+.pdf-thumbnail {
+    cursor: pointer;
+    border-radius: 8px;
+    overflow: hidden;
+    background: white;
+    border: 2px solid transparent;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.pdf-thumbnail:hover {
+    border-color: rgba(126, 34, 206, 0.3);
+    box-shadow: 0 4px 16px rgba(126, 34, 206, 0.2);
+    transform: translateY(-2px);
+}
+
+.pdf-thumbnail--active {
+    border-color: #7e22ce;
+    box-shadow: 
+        0 4px 16px rgba(126, 34, 206, 0.3),
+        0 0 0 3px rgba(126, 34, 206, 0.1);
+}
+
+.pdf-thumbnail__preview {
+    width: 100%;
+    aspect-ratio: 210 / 297;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.pdf-thumbnail__canvas {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-position: center;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+}
+
+.pdf-thumbnail__label {
+    padding: 0.5rem;
+    text-align: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #64748b;
+    background: rgba(126, 34, 206, 0.03);
+    border-top: 1px solid rgba(126, 34, 206, 0.1);
+}
+
+.pdf-thumbnail--active .pdf-thumbnail__label {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%);
+    color: #7e22ce;
+    font-weight: 700;
+}
+
+.pdf-toolbar__btn--toggle {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.08) 0%, rgba(42, 82, 152, 0.08) 100%);
+    border-color: rgba(126, 34, 206, 0.25);
+}
+
+.pdf-toolbar__btn--toggle:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.15) 0%, rgba(42, 82, 152, 0.15) 100%);
+    border-color: rgba(126, 34, 206, 0.5);
+}
+
+.pdf-toolbar {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-radius: 12px;
+    padding: 0.75rem 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    box-shadow: 
+        0 4px 16px rgba(0, 0, 0, 0.1),
+        0 0 0 1px rgba(126, 34, 206, 0.1);
+    border: 1px solid rgba(126, 34, 206, 0.15);
+    flex-shrink: 0;
+    width: 95%;
+}
+
+.pdf-toolbar__section {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+}
+
+.pdf-toolbar__zoom-section {
+    gap: 0.75rem;
+    flex: 1;
+    max-width: 400px;
+    min-width: 280px;
+    justify-content: center;
+}
+
+.pdf-toolbar__divider {
+    width: 1px;
+    height: 32px;
+    background: linear-gradient(180deg, transparent 0%, rgba(126, 34, 206, 0.2) 50%, transparent 100%);
+}
+
+.pdf-toolbar__btn {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.05) 0%, rgba(42, 82, 152, 0.05) 100%);
+    border: 1px solid rgba(126, 34, 206, 0.2);
+    border-radius: 8px;
+    padding: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #1e293b;
+    min-width: 34px;
+    min-height: 34px;
+}
+
+.pdf-toolbar__btn:hover:not(:disabled) {
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%);
+    border-color: rgba(126, 34, 206, 0.4);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.2);
+}
+
+.pdf-toolbar__btn:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: 0 2px 6px rgba(126, 34, 206, 0.15);
+}
+
+.pdf-toolbar__btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    background: rgba(0, 0, 0, 0.02);
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.pdf-toolbar__btn--preset {
+    padding: 0.5rem 0.875rem;
+    font-size: 0.813rem;
+    font-weight: 600;
+    color: #475569;
+    min-width: auto;
+    white-space: nowrap;
+}
+
+.pdf-toolbar__btn--preset svg {
+    flex-shrink: 0;
+}
+
+.pdf-toolbar__page-input-group {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    background: white;
+    border: 1px solid rgba(126, 34, 206, 0.2);
+    border-radius: 8px;
+    padding: 0.25rem 0.625rem;
+}
+
+.pdf-toolbar__page-input {
+    width: 48px;
+    border: none;
+    outline: none;
+    text-align: center;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #1e293b;
+    background: transparent;
+    -moz-appearance: textfield;
+}
+
+.pdf-toolbar__page-input::-webkit-outer-spin-button,
+.pdf-toolbar__page-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.pdf-toolbar__page-total {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #64748b;
+}
+
+.pdf-toolbar__zoom-slider-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.pdf-toolbar__zoom-slider {
+    -webkit-appearance: none;
+    width: 100%;
+    min-width: 180px;
+    max-width: 350px;
+    height: 6px;
+    border-radius: 3px;
+    background: linear-gradient(90deg, 
+        rgba(126, 34, 206, 0.1) 0%, 
+        rgba(126, 34, 206, 0.2) 50%, 
+        rgba(126, 34, 206, 0.1) 100%);
+    outline: none;
+    cursor: pointer;
+}
+
+.pdf-toolbar__zoom-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.3);
+    transition: all 0.2s ease;
+}
+
+.pdf-toolbar__zoom-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.4);
+}
+
+.pdf-toolbar__zoom-slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.3);
+    transition: all 0.2s ease;
+}
+
+.pdf-toolbar__zoom-slider::-moz-range-thumb:hover {
+    transform: scale(1.15);
+    box-shadow: 0 4px 12px rgba(126, 34, 206, 0.4);
+}
+
+.pdf-toolbar__zoom-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #7e22ce;
+    letter-spacing: 0.025em;
+    min-width: 45px;
+    text-align: center;
+}
+
+/* Signature Navigation Styles */
+.pdf-toolbar__signature-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.05) 0%, rgba(42, 82, 152, 0.05) 100%);
+    border: 1px solid rgba(126, 34, 206, 0.2);
+    border-radius: 10px;
+    padding: 0.25rem 0.5rem;
+    flex-shrink: 0;
+}
+
+.pdf-toolbar__btn--signature-nav {
+    min-width: 30px;
+    min-height: 30px;
+    padding: 0.25rem;
+    background: white;
+    border: 1px solid rgba(126, 34, 206, 0.25);
+}
+
+.pdf-toolbar__btn--signature-nav:hover:not(:disabled) {
+    background: linear-gradient(135deg, #7e22ce 0%, #2a5298 100%);
+    border-color: transparent;
+}
+
+.pdf-toolbar__btn--signature-nav:hover:not(:disabled) svg {
+    color: white;
+}
+
+.pdf-toolbar__signature-counter {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0 0.375rem;
+}
+
+.pdf-toolbar__signature-counter svg {
+    color: #7e22ce;
+    flex-shrink: 0;
+}
+
+.pdf-toolbar__signature-counter-text {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #1e293b;
+    white-space: nowrap;
+}
+
+.pdf-toolbar__signature-badge {
+    font-size: 0.625rem;
+    font-weight: 700;
+    padding: 0.1875rem 0.5rem;
+    border-radius: 5px;
+    background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%);
+    color: #7e22ce;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+}
+
+.pdf-toolbar__signature-badge--complete {
+    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
+    color: #059669;
+}
+
+/* Reset Button Styles */
+.pdf-toolbar__btn--reset {
+    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.08) 100%);
+    border-color: rgba(239, 68, 68, 0.3);
+    color: #dc2626;
+}
+
+.pdf-toolbar__btn--reset:hover:not(:disabled) {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    border-color: transparent;
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+.pdf-toolbar__btn--reset svg {
+    transition: color 0.2s ease;
+}
+
+.pdf-toolbar__btn--reset:hover:not(:disabled) svg {
+    color: white;
+}
+
+.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: hidden;
+    position: relative;
+    flex: 1;
+    width: 95%;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+}
+
+.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-wrapper {
+    flex: 1;
+    overflow: auto;
+    padding: 2rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.pdf-page-container {
+    position: relative;
+    display: inline-block;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.pdf-canvas {
+    display: block;
+    vertical-align: top;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+    transition: opacity 0.15s ease-out;
+}
+
+.pdf-canvas.rendering {
+    opacity: 0;
+}
+
+.pdf-text-layer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    opacity: 1;
+    line-height: 1.0;
+    pointer-events: auto;
+}
+
+.pdf-text-layer > span {
+    color: transparent;
+    position: absolute;
+    white-space: pre;
+    cursor: text;
+    transform-origin: 0% 0%;
+}
+
+.pdf-text-layer ::selection {
+    background: rgba(126, 34, 206, 0.3);
+}
+
+.pdf-text-layer ::-moz-selection {
+    background: rgba(126, 34, 206, 0.3);
+}
+
+.pdf-signature-layer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: visible;
+    pointer-events: none;
+    z-index: 20;
+}
+
+.pdf-signature-layer .signature-button {
+    pointer-events: auto;
+}
+
+.signature-button {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.signature-button:focus {
+    outline: 2px solid #7e22ce;
+    outline-offset: 2px;
+}
+
+.signature-button:active {
+    transform: scale(0.98);
+}
+
+.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-thumbnails {
+    width: 180px;
+    border-radius: 0 0 0 16px;
+}
+
+.pdf-thumbnails__content {
+    padding: 0.75rem;
+    gap: 0.5rem;
+}
+
+.pdf-toolbar {
+    flex-wrap: wrap;
+    padding: 0.625rem 1rem;
+    gap: 0.75rem;
+    width: 98%;
+    justify-content: center;
+}
+
+.pdf-toolbar__divider {
+    display: none;
+}
+
+.pdf-toolbar__zoom-section {
+    width: 100%;
+    max-width: 100%;
+}
+
+.pdf-toolbar__zoom-slider {
+    min-width: 150px;
+}
+
+.pdf-toolbar__btn--preset {
+    padding: 0.425rem 0.75rem;
+    font-size: 0.75rem;
+}
+
+.pdf-frame {
+    border-radius: 12px;
+    width: 98%;
+    flex-direction: column;
+}
+
+.pdf-canvas-wrapper {
+    padding: 1rem;
+}
+
+    .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/css/privacy-policy.css

@@ -0,0 +1,41 @@
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    line-height: 1.6;
+    margin: 1.25rem;
+    background-color: #f4f4f4;
+}
+
+header {
+    text-align: center;
+    margin: 0rem 10rem 3rem 10rem;
+    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    color: #333;
+}
+
+h2 {
+    color: #0056b3;
+}
+
+section {
+    background-color: white;
+    padding: 1.25rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, 0.1);
+    margin: 0rem 10rem 3rem 10rem
+}
+
+ul {
+    list-style: disc inside;
+}
+
+a {
+    color: #0056b3;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}

EnvelopeGenerator.ReceiverUI/wwwroot/css/privacy-policy.min.css

@@ -0,0 +1 @@
+body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.6;margin:1.25rem;background-color:#f4f4f4}header{text-align:center;margin:0 10rem 3rem 10rem;box-shadow:0 .25rem .5rem rgba(0,0,0,.1)}h1{color:#333}h2{color:#0056b3}section{background-color:#fff;padding:1.25rem;border-radius:.5rem;box-shadow:0 .25rem .5rem rgba(0,0,0,.1);margin:0 10rem 3rem 10rem}ul{list-style:disc inside}a{color:#0056b3;text-decoration:none}a:hover{text-decoration:underline}

EnvelopeGenerator.ReceiverUI/wwwroot/docs/privacy-policy.de-DE.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Datenschutzinformation für das Fernsignatursystem: signFLOW</title>
+    <link rel="stylesheet" href="../css/privacy-policy.min.css">
+</head>
+
+<body>
+    <header>
+        <h1>Datenschutzinformation für das Fernsignatursystem signFLOW</h1>
+        <p><strong>Stand:</strong> 18.11.2025</p>
+    </header>
+
+    <section>
+        <h2>1. Allgemeine Informationen</h2>
+        <p>In der heutigen schnelllebigen und zunehmend digitalen Welt, sind personenbezogene Daten eine wichtige
+            Ressource. Ihre Daten sind wertvoll und müssen daher mit der durch diverse Gesetze und Vorschriften (DSGVO,
+            TDDDG, ...) gebotenen Sorgfalt behandelt werden.</p>
+        <p>Als Anbieter von lokalen Lösungen (OnPremise) setzt der Hersteller des signFLOWs, die Digital Data GmbH,
+            einen klaren Schwerpunkt auf Datenschutz und Datensicherheit. Für Sie bedeutet dies, dass nur die nötigsten
+            Daten erhoben und gespeichert werden (Datensparsamkeit bzw. Datenminimierung). Außerdem kommen bei der
+            Verarbeitung aktuelle und als sicher geltende Technologien zum Einsatz.</p>
+        <p><strong>Kontaktdaten des Herstellers:</strong></p>
+        <address>
+            Digital Data GmbH<br>
+            Ludwig-Rinn-Straße 16<br>
+            35452 Heuchelheim<br>
+            <a href="https://digitaldata.works">https://digitaldata.works</a><br>
+            <a href="mailto:info-flow@digitaldata.works">info-flow@digitaldata.works</a><br>
+            Telefon: 0049 641 202360<br>
+        </address>
+        <p><strong>Kontakt zum Datenschutzbeauftragten:</strong> <a
+                href="mailto:privacy-flow@digitaldata.works">privacy-flow@digitaldata.works</a></p>
+    </section>
+
+    <section>
+        <h2>2. Verantwortliche Stelle der Datenverarbeitung</h2>
+        <p>Ihre Daten werden vertrauensvoll verarbeitet von:</p>
+        <address>
+            Digital Data GmbH<br>
+            Ludwig-Rinn-Straße 16<br>
+            35452 Heuchelheim<br>
+            <a href="https://digitaldata.works">https://digitaldata.works</a><br>
+            <a href="mailto:info-flow@digitaldata.works">info-flow@digitaldata.works</a><br>
+            Telefon: 0049 641 202360<br>
+        </address>
+        <p><strong>Kontakt zu unserer Datenschutzbeauftragten:</strong> <a
+                href="mailto:privacy-flow@digitaldata.works">privacy-flow@digitaldata.works</a></p>
+    </section>
+
+    <section>
+        <h2>3. Datenerhebung</h2>
+        <h3>3.1 Die folgenden Kategorien personenbezogener Daten werden verarbeitet</h3>
+        <ul>
+            <li>Namen: Benutzername, Vor- und Zunamen sowie Ihre digitale Unterschrift</li>
+            <li>Kontaktdaten: Telefonnummer, Mobilfunknummer und E-Mail-Adresse</li>
+            <li>Technische Daten: IP-Adresse, Zeitpunkt des Zugriffs oder Zugriffsversuchs</li>
+        </ul>
+
+        <h3>3.2 Ursprung der personenbezogenen Daten</h3>
+        <p>Sie haben die unter 3.1 stehenden Daten vorab an Ihren Geschäftspartner (die verantwortliche Stelle)
+            übermittelt. Diese Übermittlung kann mündlich per Telefon, im persönlichen Kontakt, per E-Mail oder per
+            Kontaktformular geschehen sein.</p>
+        <p>Ihre digitale Signatur übermitteln Sie eigenständig, bei der Unterzeichnung eines Dokuments.</p>
+
+        <h3>3.3 Aufbewahrungsfristen / Speicherungsdauer</h3>
+        <ul>
+            <li>Die automatische E-Mail Korrespondenz wird für 6 Jahre aufbewahrt.</li>
+            <li>Unterzeichnete Verträge werden für die Dauer ihrer Laufzeit + 10 Jahre aufbewahrt.</li>
+            <li>Der technische Vorgang wird in der signFLOW Softwarelösung je nach Dokumentart bzw. Vertragsart
+                unbegrenzt aufbewahrt.</li>
+        </ul>
+        <p>Ihre personenbezogenen Daten werden aber grundsätzlich anonymisiert, wenn:</p>
+        <ul>
+            <li>Der Vertrag ausgelaufen ist und die gesetzliche Aufbewahrungszeit vorbei ist.</li>
+            <li>Der Vertrag von Ihnen abgelehnt wurde bzw. nie unterschrieben wurde.</li>
+        </ul>
+        <p>Die gesetzlichen Grundlagen dieser Aufbewahrungsfristen bieten unter anderen:</p>
+        <ul>
+            <li>Handelsgesetzbuch (HGB)</li>
+            <li>Abgabenordnung (AO)</li>
+            <li>Grundsätze zur ordnungsgemäßen Führung und Aufbewahrung von Büchern, Aufzeichnungen und Unterlagen in
+                elektronischer Form sowie zum Datenzugriff (GoBD)</li>
+        </ul>
+        <p>
+            Abhängig von der spezifischen Dokumentart, kann die Aufbewahrungsfrist variieren. Außerdem können sich
+            Zeiten
+            verlängern, falls Unregelmäßigkeiten auftreten. Z.B.: eine rechtliche Auseinandersetzung droht oder aktuell
+            läuft.
+        </p>
+
+        <h3>3.4 Verarbeitungszweck</h3>
+        <p>Die unter 3.1 definierten personenbezogenen Daten werden verarbeitet um:</p>
+        <ul>
+            <li>Den technisch notwendigen Prozess abzubilden bzw. anbieten zu können.</li>
+            <li>Damit Sie als Endbenutzer in der Lage sind, ein zu unterzeichnendes Dokument, digital zu unterschreiben,
+                ist die Feststellung der Identität des Antragstellers, Antragsprüfung und -abwicklung, Abrechnung sowie
+                die Wahrung der Dokumentationspflichten notwendig.</li>
+        </ul>
+        <p>In Einzelfällen werden Daten zur Fehlerbehebung insbesondere bei Supportanfragen von der IT-Abteilung
+            gesondert behandelt oder ggf. an den Hersteller weitergegeben.</p>
+        <p>Im Zuge der Maßnahmen zur Sicherstellung der Informationssicherheit, insbesondere zur Identifizierung und
+            Abwehr von Angriffen, sowie zur Durchführung interner und externer Audits, der Exportkontrolle und der
+            Prüfung von Sanktionslisten, erfolgt ebenfalls eine Datenverarbeitung. Bei Anfragen gemäß §8 Abs. 2 VDG
+            werden die entsprechenden Informationen an die zuständigen Stellen übermittelt.</p>
+
+        <h3>3.5 Rechtmäßigkeit der Verarbeitung</h3>
+        <p>Ihre Daten werden auf Grundlage einer sich anbahnenden oder bereits vorhandenen Geschäftsbeziehung erhoben.
+        </p>
+        <p>Die rechtliche Grundlage für die Übermittlung an zuständige Stellen bildet §8 Abs. 2 VDG. Anfragen von
+            Betroffenen werden gemäß den Artikeln 12 bis 23 der DSGVO sowie den Paragraphen 32 bis 37 des BDSG
+            bearbeitet.</p>
+
+        <h3>3.6 Berechtigte Interessen</h3>
+        <p>Ein berechtigtes Interesse der verantwortlichen Stelle gemäß Art. 6 Abs. 1 lit. f DSGVO besteht in den
+            folgenden Fällen:</p>
+        <p>Es werden Maßnahmen zur Informationssicherheit ergriffen, die sowohl präventive technische als auch
+            organisatorische Maßnahmen sowie die Behandlung von Vorfällen umfassen. Ziel ist es, potenzielle Schäden für
+            das Unternehmen, die von der Datenverarbeitung betroffenen Personen und die Nutzer der Vertrauensdienste zu
+            bewerten und zu vermeiden.</p>
+
+        <h3>3.7 Erforderlichkeit der Daten</h3>
+        <p>Die erhobenen Daten stellen das Minimum der nötigen Daten zwecks digitaler Unterschrift dar. Ohne die unter
+            3.1 genannten Daten, kann der Dienst nicht betrieben werden.</p>
+        <p>Besonders wichtig ist die Angabe einer Mobilfunknummer oder einer deutschen Festnetznummer, da diese für die
+            Authentifizierung und die Signaturauslösung als zweiter Faktor verwendet wird. Ohne diesen
+            Sicherheitsmechanismus kann der Dienst leider nicht bereitgestellt werden.</p>
+
+        <h3>3.8 Weitergabe von Daten</h3>
+        <p>Eine systemische Übermittlung von Daten findet nicht statt.</p>
+        <p>Daten werden nur in Ausnahmefällen, zwecks Supportleistungen, an den Hersteller weitergegeben. Mit der
+            Hersteller besteht ein gültiger Auftragsdatenverarbeitungsvertrag (AVV), welcher die Sicherheit und
+            Integrität des Umgangs mit Ihren Daten gewährleistet.</p>
+    </section>
+
+    <section>
+        <h2>4. Verwendung von Cookies</h2>
+        <p>
+            Beim Besuch bestimmter Seiten kommen temporäre Cookies zum Einsatz, die für die technische Bereitstellung
+            der Dienste notwendig sind. Diese sogenannten Session-Cookies enthalten keine personenbezogenen Daten und
+            werden nach Beendigung der Sitzung automatisch gelöscht. Methoden wie Java-Applets oder Active-X-Controls,
+            die das Nutzerverhalten nachvollziehbar machen könnten, werden nicht verwendet.
+        </p>
+    </section>
+
+    <section>
+        <h2>5. Betroffenenrechte</h2>
+        <p>
+            Wenn Sie Fragen zu Ihren Daten haben oder eine Berichtigung, Löschung oder Einschränkung der Verarbeitung
+            wünschen, senden Sie bitte Ihre Anfrage per Post oder E-Mail an die oben angegebene Adresse. Dies gilt auch,
+            wenn Sie gemäß Art. 21 DSGVO Widerspruch gegen die Verarbeitung einlegen möchten oder eine Anfrage zur
+            Datenübertragbarkeit haben.
+        </p>
+        <p>
+            Bei Fragen oder Beschwerden zu einem Verfahren können Sie sich ebenfalls über die genannten
+            Kontaktmöglichkeiten an uns wenden. Sollten Sie darüber hinaus einen Grund zur Beschwerde haben, haben Sie
+            die Möglichkeit, sich an unsere Aufsichtsbehörde zu wenden. Welche Aufsichtsbehörde für Sie zuständig ist,
+            erfahren Sie hier:
+            <a href="https://www.bfdi.bund.de/DE/Service/Anschriften/Laender/Laender-node.html">Laender-node.html</a>
+        </p>
+    </section>
+</body>
+
+</html>

EnvelopeGenerator.ReceiverUI/wwwroot/docs/privacy-policy.en-US.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Data Protection Information for the Remote Signature System signFLOW</title>
+    <link rel="stylesheet" href="css/privacy-policy.min.css">
+</head>
+
+<body>
+    <header>
+        <h1>Data Protection Information for the Remote Signature System: signFLOW</h1>
+        <p><strong>As of:</strong> 18.11.2025</p>
+    </header>
+    <section>
+        <h2>1. General Information</h2>
+        <p>In today's fast-paced and increasingly digital world, personal data is an important resource. Your data is
+            valuable and must therefore be handled with the care required by various laws and regulations (GDPR, TDDDG,
+            ...).</p>
+        <p>As a provider of local solutions (OnPremise), the manufacturer of signFLOW, Digital Data GmbH, places a clear
+            focus on data protection and data security. For you, this means that only the necessary data is collected
+            and stored (data minimization). Furthermore, current and secure technologies are used in processing.</p>
+        <p><strong>Contact details of the manufacturer:</strong></p>
+        <address>
+            Digital Data GmbH<br>
+            Ludwig-Rinn-Straße 16<br>
+            35452 Heuchelheim<br>
+            <a href="https://digitaldata.works">https://digitaldata.works</a><br>
+            <a href="mailto:info-flow@digitaldata.works">info-flow@digitaldata.works</a><br>
+            Phone: 0049 641 202360<br>
+        </address>
+        <p><strong>Contact the Data Protection Officer:</strong> <a
+                href="mailto:privacy-flow@digitaldata.works">privacy-flow@digitaldata.works</a></p>
+    </section>
+
+    <section>
+        <h2>2. Responsible Entity for Data Processing</h2>
+        <p>Your data is processed with confidence by:</p>
+        <address>
+            Digital Data GmbH<br>
+            Ludwig-Rinn-Straße 16<br>
+            35452 Heuchelheim<br>
+            <a href="https://digitaldata.works">https://digitaldata.works</a><br>
+            <a href="mailto:info-flow@digitaldata.works">info-flow@digitaldata.works</a><br>
+            Phone: 0049 641 202360<br>
+        </address>
+        <p><strong>Contact our Data Protection Officer:</strong> <a
+                href="mailto:privacy-flow@digitaldata.works">privacy-flow@digitaldata.works</a></p>
+    </section>
+
+    <section>
+        <h2>3. Data Collection</h2>
+        <h3>3.1 The following categories of personal data are processed</h3>
+        <ul>
+            <li>Names: Username, first and last names as well as your digital signature</li>
+            <li>Contact details: Phone number, mobile phone number, and email address</li>
+            <li>Technical data: IP address, time of access, or access attempts</li>
+        </ul>
+
+        <h3>3.2 Source of the personal data</h3>
+        <p>You have previously provided the data mentioned under 3.1 to your business partner (the responsible entity).
+            This transmission may have occurred verbally over the phone, in personal contact, via email, or via a
+            contact form.</p>
+        <p>You transmit your digital signature independently when signing a document.</p>
+
+        <h3>3.3 Retention periods / Storage duration</h3>
+        <ul>
+            <li>Automatic email correspondence is stored for 6 years.</li>
+            <li>Signed contracts are retained for the duration of their term + 10 years.</li>
+            <li>The technical process is stored in the signFLOW software solution indefinitely, depending on the
+                document or contract type.</li>
+        </ul>
+        <p>Your personal data will generally be anonymized when:</p>
+        <ul>
+            <li>The contract has expired, and the statutory retention period is over.</li>
+            <li>The contract was rejected by you or never signed.</li>
+        </ul>
+        <p>The legal basis for these retention periods includes:</p>
+        <ul>
+            <li>Commercial Code (HGB)</li>
+            <li>Tax Code (AO)</li>
+            <li>Principles for the Proper Keeping and Retention of Books, Records, and Documents in Electronic Form and
+                for Data Access (GoBD)</li>
+        </ul>
+        <p>
+            Depending on the specific type of document, the retention period may vary. Additionally, the periods may be
+            extended in case of irregularities, such as a pending or ongoing legal dispute.
+        </p>
+
+        <h3>3.4 Purpose of processing</h3>
+        <p>The personal data defined under 3.1 is processed to:</p>
+        <ul>
+            <li>Support or provide the technically necessary process.</li>
+            <li>Enable you, as the end user, to sign a document digitally. This requires the identification of the
+                applicant, application verification and processing, billing, and compliance with documentation
+                requirements.</li>
+        </ul>
+        <p>In individual cases, data is processed separately by the IT department, particularly in response to support
+            requests, or possibly forwarded to the manufacturer for further processing.</p>
+        <p>Data processing also occurs to ensure information security, especially for the identification and prevention
+            of attacks, and for conducting internal and external audits, export controls, and sanctions list checks.
+            Information may also be transmitted to the relevant authorities in accordance with Section 8 (2) VDG.</p>
+
+        <h3>3.5 Legality of processing</h3>
+        <p>Your data is collected based on an impending or already existing business relationship.</p>
+        <p>The legal basis for the transmission to competent authorities is Section 8 (2) VDG. Requests from data
+            subjects are processed in accordance with Articles 12 to 23 of the GDPR and Sections 32 to 37 of the Federal
+            Data Protection Act (BDSG).</p>
+
+        <h3>3.6 Legitimate interests</h3>
+        <p>A legitimate interest of the responsible entity in accordance with Article 6 (1) (f) GDPR exists in the
+            following cases:</p>
+        <p>Measures are taken for information security, which include both preventive technical and organizational
+            measures as well as incident handling. The aim is to assess and avoid potential harm to the company, the
+            individuals affected by data processing, and the users of trust services.</p>
+
+        <h3>3.7 Necessity of data</h3>
+        <p>The collected data represents the minimum necessary for the digital signature. Without the data mentioned
+            under 3.1, the service cannot be operated.</p>
+        <p>It is particularly important to provide a mobile number or a German landline number, as this is used for
+            authentication and signature triggering as a second factor. Without this security mechanism, the service
+            cannot be provided.</p>
+
+        <h3>3.8 Data transfer</h3>
+        <p>Systematic data transmission does not take place.</p>
+        <p>Data is only forwarded to the manufacturer for support services in exceptional cases. A valid data processing
+            agreement (DPA) exists with the manufacturer, which ensures the security and integrity of the handling of
+            your data.</p>
+    </section>
+
+    <section>
+        <h2>4. Use of Cookies</h2>
+        <p>
+            When visiting certain pages, temporary cookies are used, which are necessary for the technical provision of
+            the services. These so-called session cookies do not contain any personal data and are automatically deleted
+            after the session ends. Methods such as Java applets or Active-X controls that could track user behavior are
+            not used.
+        </p>
+    </section>
+
+    <section>
+        <h2>5. Rights of Affected Persons</h2>
+        <p>
+            If you have questions about your data or wish to request correction, deletion, or restriction of processing,
+            please send your request by mail or email to the address provided above. This also applies if you wish to
+            object to the processing in accordance with Article 21 GDPR or request data portability.
+        </p>
+        <p>
+            If you have questions or complaints about a procedure, you can also contact us using the contact details
+            provided. If you have further grounds for complaint, you can contact our supervisory authority. You can find
+            out which supervisory authority is responsible for you here:
+            <a href="https://www.bfdi.bund.de/DE/Service/Anschriften/Laender/Laender-node.html">Laender-node.html</a>
+        </p>
+    </section>
+</body>
+
+</html>

EnvelopeGenerator.ReceiverUI/wwwroot/docs/privacy-policy.fr-FR.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Informations sur la protection des données pour le système de signature à distance signFLOW</title>
+    <link rel="stylesheet" href="css/privacy-policy.min.css">
+</head>
+
+<body>
+    <header>
+        <h1>Informations sur la protection des données pour le système de signature à distance : signFLOW</h1>
+        <p><strong>À jour au :</strong> 18.11.2025</p>
+    </header>
+
+    <section>
+        <h2>1. Informations générales</h2>
+        <p>Dans le monde actuel, rapide et de plus en plus numérique, les données personnelles sont une ressource précieuse. Vos données sont importantes et doivent donc être traitées avec le soin requis par les différentes lois et réglementations (RGPD, TDDDG, ...).</p>
+        <p>En tant que fournisseur de solutions locales (OnPremise), le fabricant de signFLOW, Digital Data GmbH, accorde une attention particulière à la protection et à la sécurité des données. Pour vous, cela signifie que seules les données nécessaires sont collectées et stockées (minimisation des données). De plus, des technologies actuelles et sécurisées sont utilisées lors du traitement.</p>
+        <p><strong>Coordonnées du fabricant :</strong></p>
+        <address>
+            Digital Data GmbH<br>
+            Ludwig-Rinn-Straße 16<br>
+            35452 Heuchelheim<br>
+            <a href="https://digitaldata.works">https://digitaldata.works</a><br>
+            <a href="mailto:info-flow@digitaldata.works">info-flow@digitaldata.works</a><br>
+            Téléphone : 0049 641 202360<br>
+        </address>
+        <p><strong>Contactez le délégué à la protection des données :</strong> <a href="mailto:privacy-flow@digitaldata.works">privacy-flow@digitaldata.works</a></p>
+    </section>
+
+    <section>
+        <h2>2. Responsable du traitement des données</h2>
+        <p>Vos données sont traitées en toute confiance par :</p>
+        <address>
+            Digital Data GmbH<br>
+            Ludwig-Rinn-Straße 16<br>
+            35452 Heuchelheim<br>
+            <a href="https://digitaldata.works">https://digitaldata.works</a><br>
+            <a href="mailto:info-flow@digitaldata.works">info-flow@digitaldata.works</a><br>
+            Téléphone : 0049 641 202360<br>
+        </address>
+        <p><strong>Contactez notre délégué à la protection des données :</strong> <a href="mailto:privacy-flow@digitaldata.works">privacy-flow@digitaldata.works</a></p>
+    </section>
+
+    <section>
+        <h2>3. Collecte des données</h2>
+        <h3>3.1 Catégories de données personnelles traitées</h3>
+        <ul>
+            <li>Noms : nom d’utilisateur, prénom et nom ainsi que votre signature numérique</li>
+            <li>Coordonnées : numéro de téléphone, numéro de mobile et adresse e-mail</li>
+            <li>Données techniques : adresse IP, heure d’accès ou tentatives d’accès</li>
+        </ul>
+
+        <h3>3.2 Source des données personnelles</h3>
+        <p>Vous avez précédemment fourni les données mentionnées en 3.1 à votre partenaire commercial (le responsable du traitement). Cette transmission a pu se faire verbalement par téléphone, lors d’un contact personnel, par e-mail ou via un formulaire de contact.</p>
+        <p>Vous transmettez votre signature numérique de manière autonome lors de la signature d’un document.</p>
+
+        <h3>3.3 Durée de conservation / stockage</h3>
+        <ul>
+            <li>La correspondance par e-mail automatique est conservée pendant 6 ans.</li>
+            <li>Les contrats signés sont conservés pendant leur durée + 10 ans.</li>
+            <li>Le processus technique est stocké dans la solution logicielle signFLOW indéfiniment, selon le type de document ou de contrat.</li>
+        </ul>
+        <p>Vos données personnelles seront généralement anonymisées lorsque :</p>
+        <ul>
+            <li>Le contrat a expiré et la période légale de conservation est terminée.</li>
+            <li>Le contrat a été refusé par vous ou jamais signé.</li>
+        </ul>
+        <p>La base légale de ces périodes de conservation comprend :</p>
+        <ul>
+            <li>Code de commerce (HGB)</li>
+            <li>Code fiscal (AO)</li>
+            <li>Principes de tenue correcte et de conservation des livres, registres et documents sous forme électronique et d’accès aux données (GoBD)</li>
+        </ul>
+        <p>
+            Selon le type spécifique de document, la période de conservation peut varier. De plus, ces périodes peuvent être prolongées en cas d’irrégularités, telles qu’un litige en cours ou imminent.
+        </p>
+
+        <h3>3.4 Finalité du traitement</h3>
+        <p>Les données personnelles définies en 3.1 sont traitées pour :</p>
+        <ul>
+            <li>Supporter ou fournir le processus techniquement nécessaire.</li>
+            <li>Permettre à l’utilisateur final de signer un document numériquement. Cela nécessite l’identification du demandeur, la vérification et le traitement de la demande, la facturation et le respect des obligations documentaires.</li>
+        </ul>
+        <p>Dans certains cas, les données sont traitées séparément par le département informatique, notamment en réponse à des demandes de support, ou éventuellement transmises au fabricant pour un traitement supplémentaire.</p>
+        <p>Le traitement des données intervient également pour garantir la sécurité de l’information, notamment pour identifier et prévenir les attaques, et pour effectuer des audits internes et externes, le contrôle des exportations et les vérifications des listes de sanctions. Les informations peuvent également être transmises aux autorités compétentes conformément à l’article 8 (2) VDG.</p>
+
+        <h3>3.5 Licéité du traitement</h3>
+        <p>Vos données sont collectées sur la base d’une relation commerciale existante ou imminente.</p>
+        <p>La base légale pour la transmission aux autorités compétentes est l’article 8 (2) VDG. Les demandes des personnes concernées sont traitées conformément aux articles 12 à 23 du RGPD et aux articles 32 à 37 de la loi fédérale sur la protection des données (BDSG).</p>
+
+        <h3>3.6 Intérêts légitimes</h3>
+        <p>Un intérêt légitime du responsable du traitement conformément à l’article 6 (1) (f) RGPD existe dans les cas suivants :</p>
+        <p>Des mesures sont prises pour la sécurité de l’information, incluant à la fois des mesures techniques et organisationnelles préventives ainsi que la gestion des incidents. L’objectif est d’évaluer et d’éviter les dommages potentiels pour l’entreprise, les personnes concernées par le traitement des données et les utilisateurs des services de confiance.</p>
+
+        <h3>3.7 Nécessité des données</h3>
+        <p>Les données collectées représentent le minimum nécessaire pour la signature numérique. Sans les données mentionnées en 3.1, le service ne peut pas être opéré.</p>
+        <p>Il est particulièrement important de fournir un numéro de mobile ou un numéro fixe allemand, car cela est utilisé pour l’authentification et le déclenchement de la signature comme second facteur. Sans ce mécanisme de sécurité, le service ne peut être fourni.</p>
+
+        <h3>3.8 Transfert de données</h3>
+        <p>Aucun transfert systématique de données n’a lieu.</p>
+        <p>Les données ne sont transmises au fabricant pour le support que dans des cas exceptionnels. Un accord de traitement des données (DPA) valide existe avec le fabricant, garantissant la sécurité et l’intégrité de la gestion de vos données.</p>
+    </section>
+
+    <section>
+        <h2>4. Utilisation des cookies</h2>
+        <p>
+            Lors de la visite de certaines pages, des cookies temporaires sont utilisés, nécessaires à la fourniture technique des services. Ces cookies de session ne contiennent aucune donnée personnelle et sont automatiquement supprimés à la fin de la session. Aucune méthode telle que les applets Java ou les contrôles Active-X, pouvant suivre le comportement de l’utilisateur, n’est utilisée.
+        </p>
+    </section>
+
+    <section>
+        <h2>5. Droits des personnes concernées</h2>
+        <p>
+            Si vous avez des questions concernant vos données ou souhaitez demander une correction, suppression ou limitation du traitement, veuillez envoyer votre demande par courrier ou e-mail à l’adresse indiquée ci-dessus. Cela s’applique également si vous souhaitez vous opposer au traitement conformément à l’article 21 RGPD ou demander la portabilité des données.
+        </p>
+        <p>
+            Si vous avez des questions ou des plaintes concernant une procédure, vous pouvez également nous contacter via les coordonnées fournies. Si vous avez d’autres motifs de plainte, vous pouvez contacter notre autorité de contrôle. Vous pouvez vérifier quelle autorité de contrôle est compétente pour vous ici :
+            <a href="https://www.bfdi.bund.de/DE/Service/Anschriften/Laender/Laender-node.html">Laender-node.html</a>
+        </p>
+    </section>
+</body>
+
+</html>

EnvelopeGenerator.ReceiverUI/wwwroot/fake-data/annotations.json

@@ -0,0 +1,20 @@
+[
+  {
+    "id": 1,
+    "page": 1,
+    "x": 390.0,
+    "y": 380.0
+  },
+  {
+    "id": 2,
+    "page": 2,
+    "x": 390.0,
+    "y": 680.0
+  },
+  {
+    "id": 3,
+    "page": 3,
+    "x": 390.0,
+    "y": 980.0
+  }
+]

EnvelopeGenerator.ReceiverUI/wwwroot/index.html

@@ -4,6 +4,9 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
     <title>EnvelopeGenerator.ReceiverUI</title>
     <base href="/" />
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
@@ -62,7 +65,8 @@
         <a class="dismiss">X</a>
     </div>
     <script src="_content/DevExpress.Blazor.Resources/js/preload-script.js"></script>
-    <script src="js/receiver-signature.js"></script>
+    <script src="js/typed.umd.js"></script>
+    <script src="js/receiver-signature.js?v=9"></script>
     <script src="_framework/blazor.webassembly.js"></script>
 </body>
 

EnvelopeGenerator.ReceiverUI/wwwroot/js/receiver-signature.js

@@ -1,221 +1,334 @@
 window.receiverSignature = (() => {
-    const pads = new Map();
+
+    // ?? State ???????????????????????????????????????????????????????????????
+    const pads            = new Map();
     const typedSignatures = new Map();
     const imageSignatures = new Map();
+    const overlayButtons  = new Map(); // annotationId -> { btn, signed }
+    let   _dotNetRef      = null;
 
-    function getPosition(canvas, event) {
-        const rect = canvas.getBoundingClientRect();
-        const source = event.touches && event.touches.length ? event.touches[0] : event;
-        return {
-            x: (source.clientX - rect.left) * (canvas.width / rect.width),
-            y: (source.clientY - rect.top) * (canvas.height / rect.height)
+    // DevExpress Blazor Report Viewer selectors (confirmed via debugDumpViewerDom)
+    const PAGE_IMG_SEL         = '.dxbrv-report-preview-content-img';
+    const SCROLL_CONTAINER_SEL = '.dxbrv-surface-wrapper';
+    const VIEWER_WRAPPER_SEL   = '.receiver-viewer-wrapper';
+
+    // DX report coordinate space (1/100 inch, A4)
+    const DX_PAGE_WIDTH  = 827.0;
+    const DX_PAGE_HEIGHT = 1169.0;
+
+    // Signature field size in DX units
+    const SIG_WIDTH_DX  = 230.0;
+    const SIG_HEIGHT_DX = 154.0;
+
+    // ?? Annotation Checkboxes ????????????????????????????????????????????????
+
+    // Active install context — holds everything needed to reposition on resize/scroll
+    let _installCtx = null;
+
+    function installAnnotationCheckboxes(annotations, checkedIds, dotNetRef) {
+        _dotNetRef = dotNetRef;
+
+        // Tear down previous install completely
+        _teardownCheckboxes();
+
+        if (!annotations || annotations.length === 0) return;
+
+        const ctx = {
+            annotations,
+            checkedIds: new Set(Array.isArray(checkedIds) ? checkedIds : []),
+            scrollEl:   null,
+            pageEls:    [],
+            resizeObs:  null,
+            onScroll:   null,
+            onResize:   null,
+            resizeTimer: null,
         };
+        _installCtx = ctx;
+
+        _waitForCheckboxPages(ctx);
     }
 
-    function clearCanvas(canvas) {
-        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+    function _teardownCheckboxes() {
+        document.querySelectorAll('.annot-sig-cb-wrapper').forEach(el => el.remove());
+        overlayButtons.clear();
+
+        if (!_installCtx) return;
+        const ctx = _installCtx;
+
+        if (ctx.resizeObs)  { ctx.resizeObs.disconnect(); ctx.resizeObs = null; }
+        if (ctx.scrollEl && ctx.onScroll)  ctx.scrollEl.removeEventListener('scroll', ctx.onScroll);
+        if (ctx.onResize)   window.removeEventListener('resize', ctx.onResize);
+        if (ctx.resizeTimer) clearTimeout(ctx.resizeTimer);
+
+        _installCtx = null;
     }
 
+    function _waitForCheckboxPages(ctx) {
+        const wrapper = document.querySelector(VIEWER_WRAPPER_SEL);
+        if (!wrapper) return;
+
+        if (!_tryInstallCheckboxes(ctx)) {
+            const observer = new MutationObserver(() => {
+                if (_tryInstallCheckboxes(ctx)) observer.disconnect();
+            });
+            observer.observe(wrapper, { childList: true, subtree: true });
+            setTimeout(() => observer.disconnect(), 15000);
+        }
+    }
+
+    function _tryInstallCheckboxes(ctx) {
+        const scrollEl = document.querySelector(SCROLL_CONTAINER_SEL);
+        if (!scrollEl) return false;
+
+        const pageEls = Array.from(document.querySelectorAll(PAGE_IMG_SEL));
+        if (pageEls.length === 0) return false;
+
+        if (getComputedStyle(scrollEl).position === 'static')
+            scrollEl.style.position = 'relative';
+
+        ctx.scrollEl = scrollEl;
+        ctx.pageEls  = pageEls;
+
+        // Initial render
+        _renderAllCheckboxes(ctx);
+
+        // ResizeObserver — watches every page image for size changes (zoom in/out)
+        const ro = new ResizeObserver(() => _repositionAll(ctx));
+        pageEls.forEach(el => ro.observe(el));
+        ctx.resizeObs = ro;
+
+        // Scroll — reposition when user scrolls the viewer
+        ctx.onScroll = () => _repositionAll(ctx);
+        scrollEl.addEventListener('scroll', ctx.onScroll, { passive: true });
+
+        // Window resize — debounced 60 ms
+        ctx.onResize = () => {
+            if (ctx.resizeTimer) clearTimeout(ctx.resizeTimer);
+            ctx.resizeTimer = setTimeout(() => _repositionAll(ctx), 60);
+        };
+        window.addEventListener('resize', ctx.onResize, { passive: true });
+
+        return true;
+    }
+
+    function _repositionAll(ctx) {
+        if (!ctx || !ctx.scrollEl) return;
+
+        const scrollEl = ctx.scrollEl;
+        const pageEls  = Array.from(document.querySelectorAll(PAGE_IMG_SEL)); // re-query in case DOM changed
+        if (pageEls.length === 0) return;
+
+        const scrollRect = scrollEl.getBoundingClientRect();
+
+        ctx.annotations.forEach(ann => {
+            const wrapper = document.querySelector(`.annot-sig-cb-wrapper[data-annot-id="${ann.id}"]`);
+            if (!wrapper) return;
+
+            const pageEl = pageEls[(ann.page || 1) - 1] ?? pageEls[pageEls.length - 1];
+            if (!pageEl) return;
+
+            const pageRect = pageEl.getBoundingClientRect();
+            if (pageRect.width === 0 || pageRect.height === 0) return;
+
+            const scaleX = pageRect.width  / DX_PAGE_WIDTH;
+            const scaleY = pageRect.height / DX_PAGE_HEIGHT;
+
+            const absLeft = pageRect.left - scrollRect.left + scrollEl.scrollLeft + (ann.x || 0) * scaleX;
+            const absTop  = pageRect.top  - scrollRect.top  + scrollEl.scrollTop  + (ann.y || 0) * scaleY;
+            const boxW    = SIG_WIDTH_DX  * scaleX;
+            const boxH    = SIG_HEIGHT_DX * scaleY;
+
+            wrapper.style.left   = Math.round(absLeft) + 'px';
+            wrapper.style.top    = Math.round(absTop)  + 'px';
+            wrapper.style.width  = Math.round(boxW)    + 'px';
+            wrapper.style.height = Math.round(boxH)    + 'px';
+        });
+    }
+
+    function _renderAllCheckboxes(ctx) {
+        const scrollEl  = ctx.scrollEl;
+        const pageEls   = ctx.pageEls;
+        const scrollRect = scrollEl.getBoundingClientRect();
+
+        ctx.annotations.forEach(ann => {
+            const pageEl = pageEls[(ann.page || 1) - 1] ?? pageEls[pageEls.length - 1];
+            if (!pageEl) return;
+
+            const pageRect = pageEl.getBoundingClientRect();
+            if (pageRect.width === 0 || pageRect.height === 0) return;
+
+            const scaleX = pageRect.width  / DX_PAGE_WIDTH;
+            const scaleY = pageRect.height / DX_PAGE_HEIGHT;
+
+            const absLeft = pageRect.left - scrollRect.left + scrollEl.scrollLeft + (ann.x || 0) * scaleX;
+            const absTop  = pageRect.top  - scrollRect.top  + scrollEl.scrollTop  + (ann.y || 0) * scaleY;
+            const boxW    = SIG_WIDTH_DX  * scaleX;
+            const boxH    = SIG_HEIGHT_DX * scaleY;
+
+            const isChecked = ctx.checkedIds.has(ann.id);
+            _createCheckboxOverlay(ann.id, scrollEl, absLeft, absTop, boxW, boxH, isChecked);
+        });
+    }
+
+    function _createCheckboxOverlay(annotationId, container, left, top, width, height, isChecked) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'annot-sig-cb-wrapper' + (isChecked ? ' annot-sig-cb-wrapper--checked' : '');
+        wrapper.setAttribute('data-annot-id', String(annotationId));
+
+        Object.assign(wrapper.style, {
+            position:   'absolute',
+            left:       Math.round(left)   + 'px',
+            top:        Math.round(top)    + 'px',
+            width:      Math.round(width)  + 'px',
+            height:     Math.round(height) + 'px',
+            zIndex:     '9999',
+            cursor:     'pointer',
+            boxSizing:  'border-box',
+        });
+
+        const cb = document.createElement('input');
+        cb.type = 'checkbox';
+        cb.checked = isChecked;
+        cb.className = 'annot-sig-cb';
+        cb.setAttribute('aria-label', 'Unterschriftsfeld bestaetigen');
+
+        const label = document.createElement('span');
+        label.className = 'annot-sig-cb__label';
+        label.textContent = isChecked ? '\u2713 Bestaetigt' : '\u270e Hier unterschreiben';
+
+        wrapper.appendChild(cb);
+        wrapper.appendChild(label);
+
+        wrapper.addEventListener('click', (e) => {
+            if (e.target !== cb) cb.checked = !cb.checked;
+            const checked = cb.checked;
+            wrapper.classList.toggle('annot-sig-cb-wrapper--checked', checked);
+            label.textContent = checked ? '\u2713 Bestaetigt' : '\u270e Hier unterschreiben';
+            if (_installCtx) {
+                if (checked) _installCtx.checkedIds.add(annotationId);
+                else         _installCtx.checkedIds.delete(annotationId);
+            }
+            if (_dotNetRef)
+                _dotNetRef.invokeMethodAsync('OnAnnotationToggled', annotationId, checked);
+        });
+
+        container.appendChild(wrapper);
+        overlayButtons.set(annotationId, { btn: wrapper, signed: isChecked });
+    }
+
+    // ?? Signature Pad ???????????????????????????????????????????????????????
+
+    function _pos(canvas, event) {
+        const r = canvas.getBoundingClientRect();
+        const s = (event.touches && event.touches.length) ? event.touches[0] : event;
+        return { x: (s.clientX - r.left) * (canvas.width / r.width), y: (s.clientY - r.top) * (canvas.height / r.height) };
+    }
+
+    function _clear(canvas) { canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); }
+
     function initialize(canvasId) {
         const canvas = document.getElementById(canvasId);
-        if (!canvas || pads.has(canvasId))
-            return;
-
-        const context = canvas.getContext('2d');
-        context.lineWidth = 2.5;
-        context.lineCap = 'round';
-        context.lineJoin = 'round';
-        context.strokeStyle = '#111';
-
+        if (!canvas || pads.has(canvasId)) return;
+        const ctx = canvas.getContext('2d');
+        ctx.lineWidth = 2.5; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.strokeStyle = '#111';
         const state = { drawing: false, hasSignature: false };
         pads.set(canvasId, state);
-
-        const start = event => {
-            event.preventDefault();
-            const pos = getPosition(canvas, event);
-            state.drawing = true;
-            context.beginPath();
-            context.moveTo(pos.x, pos.y);
-        };
-
-        const move = event => {
-            if (!state.drawing)
-                return;
-
-            event.preventDefault();
-            const pos = getPosition(canvas, event);
-            context.lineTo(pos.x, pos.y);
-            context.stroke();
-            state.hasSignature = true;
-        };
-
-        const end = event => {
-            if (!state.drawing)
-                return;
-
-            event.preventDefault();
-            state.drawing = false;
-        };
-
+        const start = e => { e.preventDefault(); const p = _pos(canvas, e); state.drawing = true; ctx.beginPath(); ctx.moveTo(p.x, p.y); };
+        const move  = e => { if (!state.drawing) return; e.preventDefault(); const p = _pos(canvas, e); ctx.lineTo(p.x, p.y); ctx.stroke(); state.hasSignature = true; };
+        const end   = e => { if (!state.drawing) return; e.preventDefault(); state.drawing = false; };
         canvas.addEventListener('mousedown', start);
         canvas.addEventListener('mousemove', move);
         window.addEventListener('mouseup', end);
         canvas.addEventListener('touchstart', start, { passive: false });
-        canvas.addEventListener('touchmove', move, { passive: false });
-        canvas.addEventListener('touchend', end, { passive: false });
+        canvas.addEventListener('touchmove',  move,  { passive: false });
+        canvas.addEventListener('touchend',   end,   { passive: false });
     }
 
     function initializeTyped(canvasId) {
         const canvas = document.getElementById(canvasId);
-        if (!canvas || typedSignatures.has(canvasId))
-            return;
-
+        if (!canvas || typedSignatures.has(canvasId)) return;
         typedSignatures.set(canvasId, { hasSignature: false });
     }
 
     function initializeImage(inputId, canvasId) {
-        const input = document.getElementById(inputId);
+        const input  = document.getElementById(inputId);
         const canvas = document.getElementById(canvasId);
-        if (!input || !canvas || imageSignatures.has(canvasId))
-            return;
-
+        if (!input || !canvas || imageSignatures.has(canvasId)) return;
         const state = { hasSignature: false };
         imageSignatures.set(canvasId, state);
-
         input.addEventListener('change', () => {
-            const file = input.files && input.files.length ? input.files[0] : null;
-            if (!file || !file.type.startsWith('image/')) {
-                clearCanvas(canvas);
-                state.hasSignature = false;
-                return;
-            }
-
+            const file = input.files && input.files[0];
+            if (!file || !file.type.startsWith('image/')) { _clear(canvas); state.hasSignature = false; return; }
             const reader = new FileReader();
             reader.onload = () => {
-                const image = new Image();
-                image.onload = () => {
-                    const context = canvas.getContext('2d');
-                    clearCanvas(canvas);
-
-                    const padding = 10;
-                    const maxWidth = canvas.width - padding * 2;
-                    const maxHeight = canvas.height - padding * 2;
-                    const scale = Math.min(maxWidth / image.width, maxHeight / image.height, 1);
-                    const width = image.width * scale;
-                    const height = image.height * scale;
-                    const x = (canvas.width - width) / 2;
-                    const y = (canvas.height - height) / 2;
-
-                    context.drawImage(image, x, y, width, height);
+                const img = new Image();
+                img.onload = () => {
+                    const ctx = canvas.getContext('2d'); _clear(canvas);
+                    const p = 10, mw = canvas.width - p * 2, mh = canvas.height - p * 2;
+                    const s = Math.min(mw / img.width, mh / img.height, 1);
+                    ctx.drawImage(img, (canvas.width - img.width * s) / 2, (canvas.height - img.height * s) / 2, img.width * s, img.height * s);
                     state.hasSignature = true;
                 };
-                image.src = reader.result;
+                img.src = reader.result;
             };
             reader.readAsDataURL(file);
         });
     }
 
     function clear(canvasId) {
-        const canvas = document.getElementById(canvasId);
-        const state = pads.get(canvasId);
-        if (!canvas || !state)
-            return;
-
-        clearCanvas(canvas);
-        state.hasSignature = false;
+        const c = document.getElementById(canvasId); const s = pads.get(canvasId);
+        if (c && s) { _clear(c); s.hasSignature = false; }
     }
 
     function clearTyped(canvasId) {
-        const canvas = document.getElementById(canvasId);
-        const state = typedSignatures.get(canvasId);
-        if (!canvas || !state)
-            return;
-
-        clearCanvas(canvas);
-        state.hasSignature = false;
+        const c = document.getElementById(canvasId); const s = typedSignatures.get(canvasId);
+        if (c && s) { _clear(c); s.hasSignature = false; }
     }
 
     function clearImage(inputId, canvasId) {
-        const input = document.getElementById(inputId);
-        const canvas = document.getElementById(canvasId);
-        const state = imageSignatures.get(canvasId);
-        if (!canvas || !state)
-            return;
-
-        if (input)
-            input.value = '';
-
-        clearCanvas(canvas);
-        state.hasSignature = false;
+        const inp = document.getElementById(inputId); const c = document.getElementById(canvasId); const s = imageSignatures.get(canvasId);
+        if (c && s) { if (inp) inp.value = ''; _clear(c); s.hasSignature = false; }
     }
 
     function renderTypedSignature(canvasId, text, fontFamily) {
-        const canvas = document.getElementById(canvasId);
-        const state = typedSignatures.get(canvasId);
-        if (!canvas || !state)
-            return;
-
-        const value = (text || '').trim();
-        clearCanvas(canvas);
-
-        if (!value) {
-            state.hasSignature = false;
-            return;
-        }
-
-        const context = canvas.getContext('2d');
-        const maxWidth = canvas.width - 30;
-        let fontSize = 54;
-
-        do {
-            context.font = `italic ${fontSize}px ${fontFamily || 'cursive'}`;
-            fontSize -= 2;
-        } while (context.measureText(value).width > maxWidth && fontSize > 24);
-
-        context.fillStyle = '#111';
-        context.textBaseline = 'middle';
-        context.textAlign = 'center';
-        context.fillText(value, canvas.width / 2, canvas.height / 2);
+        const canvas = document.getElementById(canvasId); const state = typedSignatures.get(canvasId);
+        if (!canvas || !state) return;
+        const value = (text || '').trim(); _clear(canvas);
+        if (!value) { state.hasSignature = false; return; }
+        const ctx = canvas.getContext('2d'); let fs = 54;
+        do { ctx.font = 'italic ' + fs + 'px ' + (fontFamily || 'cursive'); fs -= 2; }
+        while (ctx.measureText(value).width > canvas.width - 30 && fs > 24);
+        ctx.fillStyle = '#111'; ctx.textBaseline = 'middle'; ctx.textAlign = 'center';
+        ctx.fillText(value, canvas.width / 2, canvas.height / 2);
         state.hasSignature = true;
     }
 
-    function getDataUrl(canvasId) {
-        const canvas = document.getElementById(canvasId);
-        const state = pads.get(canvasId);
-        if (!canvas || !state || !state.hasSignature)
-            return null;
-
-        return canvas.toDataURL('image/png');
+    function startTyped(elementId, text, typeSpeed) {
+        if (typeof Typed === 'undefined') return;
+        new Typed('#' + elementId, {
+            strings: [text],
+            typeSpeed: typeSpeed || 15,
+            showCursor: false
+        });
     }
 
-    function getTypedDataUrl(canvasId) {
-        const canvas = document.getElementById(canvasId);
-        const state = typedSignatures.get(canvasId);
-        if (!canvas || !state || !state.hasSignature)
-            return null;
-
-        return canvas.toDataURL('image/png');
-    }
-
-    function getImageDataUrl(canvasId) {
-        const canvas = document.getElementById(canvasId);
-        const state = imageSignatures.get(canvasId);
-        if (!canvas || !state || !state.hasSignature)
-            return null;
-
-        return canvas.toDataURL('image/png');
-    }
+    function getDataUrl(id)      { const c = document.getElementById(id); const s = pads.get(id);            return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
+    function getTypedDataUrl(id) { const c = document.getElementById(id); const s = typedSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
+    function getImageDataUrl(id) { const c = document.getElementById(id); const s = imageSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
 
+    // ?? Public API ??????????????????????????????????????????????????????????
     return {
-        initialize,
-        initializeTyped,
-        initializeImage,
-        clear,
-        clearTyped,
-        clearImage,
-        renderTypedSignature,
-        getDataUrl,
-        getTypedDataUrl,
-        getImageDataUrl
+        startTyped:                  startTyped,
+        installAnnotationCheckboxes: installAnnotationCheckboxes,
+        initialize:                  initialize,
+        initializeTyped:             initializeTyped,
+        initializeImage:             initializeImage,
+        clear:                       clear,
+        clearTyped:                  clearTyped,
+        clearImage:                  clearImage,
+        renderTypedSignature:        renderTypedSignature,
+        getDataUrl:                  getDataUrl,
+        getTypedDataUrl:             getTypedDataUrl,
+        getImageDataUrl:             getImageDataUrl
     };
 })();

EnvelopeGenerator.ReceiverUI/wwwroot/js/typed.umd.js

@@ -0,0 +1,3 @@
+!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):(t||self).Typed=s()}(this,function(){function t(){return t=Object.assign?Object.assign.bind():function(t){for(var s=1;s<arguments.length;s++){var e=arguments[s];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}return t},t.apply(this,arguments)}var s={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,smartBackspace:!0,shuffle:!1,backDelay:700,fadeOut:!1,fadeOutClass:"typed-fade-out",fadeOutDelay:500,loop:!1,loopCount:Infinity,showCursor:!0,cursorChar:"|",autoInsertCss:!0,attr:null,bindInputFocusEvents:!1,contentType:"html",onBegin:function(t){},onComplete:function(t){},preStringTyped:function(t,s){},onStringTyped:function(t,s){},onLastStringBackspaced:function(t){},onTypingPaused:function(t,s){},onTypingResumed:function(t,s){},onReset:function(t){},onStop:function(t,s){},onStart:function(t,s){},onDestroy:function(t){}},e=new(/*#__PURE__*/function(){function e(){}var n=e.prototype;return n.load=function(e,n,i){if(e.el="string"==typeof i?document.querySelector(i):i,e.options=t({},s,n),e.isInput="input"===e.el.tagName.toLowerCase(),e.attr=e.options.attr,e.bindInputFocusEvents=e.options.bindInputFocusEvents,e.showCursor=!e.isInput&&e.options.showCursor,e.cursorChar=e.options.cursorChar,e.cursorBlinking=!0,e.elContent=e.attr?e.el.getAttribute(e.attr):e.el.textContent,e.contentType=e.options.contentType,e.typeSpeed=e.options.typeSpeed,e.startDelay=e.options.startDelay,e.backSpeed=e.options.backSpeed,e.smartBackspace=e.options.smartBackspace,e.backDelay=e.options.backDelay,e.fadeOut=e.options.fadeOut,e.fadeOutClass=e.options.fadeOutClass,e.fadeOutDelay=e.options.fadeOutDelay,e.isPaused=!1,e.strings=e.options.strings.map(function(t){return t.trim()}),e.stringsElement="string"==typeof e.options.stringsElement?document.querySelector(e.options.stringsElement):e.options.stringsElement,e.stringsElement){e.strings=[],e.stringsElement.style.cssText="clip: rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;";var r=Array.prototype.slice.apply(e.stringsElement.children),o=r.length;if(o)for(var a=0;a<o;a+=1)e.strings.push(r[a].innerHTML.trim())}for(var u in e.strPos=0,e.currentElContent=this.getCurrentElContent(e),e.currentElContent&&e.currentElContent.length>0&&(e.strPos=e.currentElContent.length-1,e.strings.unshift(e.currentElContent)),e.sequence=[],e.strings)e.sequence[u]=u;e.arrayPos=0,e.stopNum=0,e.loop=e.options.loop,e.loopCount=e.options.loopCount,e.curLoop=0,e.shuffle=e.options.shuffle,e.pause={status:!1,typewrite:!0,curString:"",curStrPos:0},e.typingComplete=!1,e.autoInsertCss=e.options.autoInsertCss,e.autoInsertCss&&(this.appendCursorAnimationCss(e),this.appendFadeOutAnimationCss(e))},n.getCurrentElContent=function(t){return t.attr?t.el.getAttribute(t.attr):t.isInput?t.el.value:"html"===t.contentType?t.el.innerHTML:t.el.textContent},n.appendCursorAnimationCss=function(t){var s="data-typed-js-cursor-css";if(t.showCursor&&!document.querySelector("["+s+"]")){var e=document.createElement("style");e.setAttribute(s,"true"),e.innerHTML="\n        .typed-cursor{\n          opacity: 1;\n        }\n        .typed-cursor.typed-cursor--blink{\n          animation: typedjsBlink 0.7s infinite;\n          -webkit-animation: typedjsBlink 0.7s infinite;\n                  animation: typedjsBlink 0.7s infinite;\n        }\n        @keyframes typedjsBlink{\n          50% { opacity: 0.0; }\n        }\n        @-webkit-keyframes typedjsBlink{\n          0% { opacity: 1; }\n          50% { opacity: 0.0; }\n          100% { opacity: 1; }\n        }\n      ",document.body.appendChild(e)}},n.appendFadeOutAnimationCss=function(t){var s="data-typed-fadeout-js-css";if(t.fadeOut&&!document.querySelector("["+s+"]")){var e=document.createElement("style");e.setAttribute(s,"true"),e.innerHTML="\n        .typed-fade-out{\n          opacity: 0;\n          transition: opacity .25s;\n        }\n        .typed-cursor.typed-cursor--blink.typed-fade-out{\n          -webkit-animation: 0;\n          animation: 0;\n        }\n      ",document.body.appendChild(e)}},e}()),n=new(/*#__PURE__*/function(){function t(){}var s=t.prototype;return s.typeHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substring(s).charAt(0);if("<"===n||"&"===n){var i;for(i="<"===n?">":";";t.substring(s+1).charAt(0)!==i&&!(1+ ++s>t.length););s++}return s},s.backSpaceHtmlChars=function(t,s,e){if("html"!==e.contentType)return s;var n=t.substring(s).charAt(0);if(">"===n||";"===n){var i;for(i=">"===n?"<":"&";t.substring(s-1).charAt(0)!==i&&!(--s<0););s--}return s},t}());/*#__PURE__*/
+return function(){function t(t,s){e.load(this,s,t),this.begin()}var s=t.prototype;return s.toggle=function(){this.pause.status?this.start():this.stop()},s.stop=function(){this.typingComplete||this.pause.status||(this.toggleBlinking(!0),this.pause.status=!0,this.options.onStop(this.arrayPos,this))},s.start=function(){this.typingComplete||this.pause.status&&(this.pause.status=!1,this.pause.typewrite?this.typewrite(this.pause.curString,this.pause.curStrPos):this.backspace(this.pause.curString,this.pause.curStrPos),this.options.onStart(this.arrayPos,this))},s.destroy=function(){this.reset(!1),this.options.onDestroy(this)},s.reset=function(t){void 0===t&&(t=!0),clearInterval(this.timeout),this.replaceText(""),this.cursor&&this.cursor.parentNode&&(this.cursor.parentNode.removeChild(this.cursor),this.cursor=null),this.strPos=0,this.arrayPos=0,this.curLoop=0,t&&(this.insertCursor(),this.options.onReset(this),this.begin())},s.begin=function(){var t=this;this.options.onBegin(this),this.typingComplete=!1,this.shuffleStringsIfNeeded(this),this.insertCursor(),this.bindInputFocusEvents&&this.bindFocusEvents(),this.timeout=setTimeout(function(){0===t.strPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos):t.backspace(t.strings[t.sequence[t.arrayPos]],t.strPos)},this.startDelay)},s.typewrite=function(t,s){var e=this;this.fadeOut&&this.el.classList.contains(this.fadeOutClass)&&(this.el.classList.remove(this.fadeOutClass),this.cursor&&this.cursor.classList.remove(this.fadeOutClass));var i=this.humanizer(this.typeSpeed),r=1;!0!==this.pause.status?this.timeout=setTimeout(function(){s=n.typeHtmlChars(t,s,e);var i=0,o=t.substring(s);if("^"===o.charAt(0)&&/^\^\d+/.test(o)){var a=1;a+=(o=/\d+/.exec(o)[0]).length,i=parseInt(o),e.temporaryPause=!0,e.options.onTypingPaused(e.arrayPos,e),t=t.substring(0,s)+t.substring(s+a),e.toggleBlinking(!0)}if("`"===o.charAt(0)){for(;"`"!==t.substring(s+r).charAt(0)&&(r++,!(s+r>t.length)););var u=t.substring(0,s),p=t.substring(u.length+1,s+r),c=t.substring(s+r+1);t=u+p+c,r--}e.timeout=setTimeout(function(){e.toggleBlinking(!1),s>=t.length?e.doneTyping(t,s):e.keepTyping(t,s,r),e.temporaryPause&&(e.temporaryPause=!1,e.options.onTypingResumed(e.arrayPos,e))},i)},i):this.setPauseStatus(t,s,!0)},s.keepTyping=function(t,s,e){0===s&&(this.toggleBlinking(!1),this.options.preStringTyped(this.arrayPos,this));var n=t.substring(0,s+=e);this.replaceText(n),this.typewrite(t,s)},s.doneTyping=function(t,s){var e=this;this.options.onStringTyped(this.arrayPos,this),this.toggleBlinking(!0),this.arrayPos===this.strings.length-1&&(this.complete(),!1===this.loop||this.curLoop===this.loopCount)||(this.timeout=setTimeout(function(){e.backspace(t,s)},this.backDelay))},s.backspace=function(t,s){var e=this;if(!0!==this.pause.status){if(this.fadeOut)return this.initFadeOut();this.toggleBlinking(!1);var i=this.humanizer(this.backSpeed);this.timeout=setTimeout(function(){s=n.backSpaceHtmlChars(t,s,e);var i=t.substring(0,s);if(e.replaceText(i),e.smartBackspace){var r=e.strings[e.arrayPos+1];e.stopNum=r&&i===r.substring(0,s)?s:0}s>e.stopNum?(s--,e.backspace(t,s)):s<=e.stopNum&&(e.arrayPos++,e.arrayPos===e.strings.length?(e.arrayPos=0,e.options.onLastStringBackspaced(),e.shuffleStringsIfNeeded(),e.begin()):e.typewrite(e.strings[e.sequence[e.arrayPos]],s))},i)}else this.setPauseStatus(t,s,!1)},s.complete=function(){this.options.onComplete(this),this.loop?this.curLoop++:this.typingComplete=!0},s.setPauseStatus=function(t,s,e){this.pause.typewrite=e,this.pause.curString=t,this.pause.curStrPos=s},s.toggleBlinking=function(t){this.cursor&&(this.pause.status||this.cursorBlinking!==t&&(this.cursorBlinking=t,t?this.cursor.classList.add("typed-cursor--blink"):this.cursor.classList.remove("typed-cursor--blink")))},s.humanizer=function(t){return Math.round(Math.random()*t/2)+t},s.shuffleStringsIfNeeded=function(){this.shuffle&&(this.sequence=this.sequence.sort(function(){return Math.random()-.5}))},s.initFadeOut=function(){var t=this;return this.el.className+=" "+this.fadeOutClass,this.cursor&&(this.cursor.className+=" "+this.fadeOutClass),setTimeout(function(){t.arrayPos++,t.replaceText(""),t.strings.length>t.arrayPos?t.typewrite(t.strings[t.sequence[t.arrayPos]],0):(t.typewrite(t.strings[0],0),t.arrayPos=0)},this.fadeOutDelay)},s.replaceText=function(t){this.attr?this.el.setAttribute(this.attr,t):this.isInput?this.el.value=t:"html"===this.contentType?this.el.innerHTML=t:this.el.textContent=t},s.bindFocusEvents=function(){var t=this;this.isInput&&(this.el.addEventListener("focus",function(s){t.stop()}),this.el.addEventListener("blur",function(s){t.el.value&&0!==t.el.value.length||t.start()}))},s.insertCursor=function(){this.showCursor&&(this.cursor||(this.cursor=document.createElement("span"),this.cursor.className="typed-cursor",this.cursor.setAttribute("aria-hidden",!0),this.cursor.innerHTML=this.cursorChar,this.el.parentNode&&this.el.parentNode.insertBefore(this.cursor,this.el.nextSibling)))},t}()});
+//# sourceMappingURL=typed.umd.js.map

EnvelopeGenerator.Tests/Application/Fake.cs

@@ -193,13 +193,12 @@ public static class Extensions
     #endregion
 
     #region Envelope
-    public static CreateEnvelopeCommand CreateEnvelopeCommand(this Faker fake, int userId) => new()
+    public static CreateEnvelopeCommand CreateEnvelopeCommand(this Faker fake, int userId) => new CreateEnvelopeCommand()
     {
         Message = fake.Lorem.Paragraph(fake.Random.Number(2, 5)),
         Title = fake.Lorem.Words(fake.Random.Number(3, 4)).Join(" "),
-        UserId = userId,
         UseSQLExecutor = false
-    };
+    }.WithAuth(userId);
 
     public static List<CreateEnvelopeCommand> CreateEnvelopeCommands(this Faker fake, params int[] userIDs)
         => Enumerable.Range(0, userIDs.Length)

EnvelopeGenerator.Tests/Domain/ConstantsTests.cs

@@ -1,17 +0,0 @@
-using EnvelopeGenerator.Domain.Constants;
-using NUnit.Framework;
-
-namespace EnvelopeGenerator.Tests.Domain;
-
-public class ConstantsTests
-{
-    [TestCase(EnvelopeSigningType.ReadAndSign, EnvelopeSigningType.ReadAndSign)]
-    [TestCase(EnvelopeSigningType.WetSignature, EnvelopeSigningType.WetSignature)]
-    [TestCase((EnvelopeSigningType)5, EnvelopeSigningType.WetSignature)]
-    public void Normalize_ReturnsExpectedValue(EnvelopeSigningType input, EnvelopeSigningType expected)
-    {
-        var normalized = input.Normalize();
-
-        Assert.That(normalized, Is.EqualTo(expected));
-    }
-}

EnvelopeGenerator.Web/Controllers/EnvelopeController.cs

@@ -438,4 +438,10 @@ public class EnvelopeController : ViewControllerBase
             return this.ViewDocumentNotFound();
         }
     }
+
+    [HttpGet("EnvelopeReceiverWithSecretByMediatr")]
+    public async Task<IActionResult> EnvelopeReceiverWithSecretByMediatr([FromQuery] ReadEnvelopeReceiverSecretQuery q, CancellationToken cancel)
+    {
+        return await _mediator.Send(q, cancel) is EnvelopeReceiverSecretDto dto ? Ok(dto) : NotFound();
+    }
 }

EnvelopeGenerator.Web/EnvelopeGenerator.Web.csproj

@@ -2175,6 +2175,7 @@
 
 	<ItemGroup>
 		<ProjectReference Include="..\EnvelopeGenerator.Application\EnvelopeGenerator.Application.csproj" />
+		<ProjectReference Include="..\EnvelopeGenerator.DependencyInjection\EnvelopeGenerator.DependencyInjection.csproj" />
 		<ProjectReference Include="..\EnvelopeGenerator.Infrastructure\EnvelopeGenerator.Infrastructure.csproj" />
 		<ProjectReference Include="..\EnvelopeGenerator.PdfEditor\EnvelopeGenerator.PdfEditor.csproj" />
 	</ItemGroup>

EnvelopeGenerator.Web/Program.cs

@@ -1,4 +1,3 @@
-using EnvelopeGenerator.Application.Services;
 using Microsoft.EntityFrameworkCore;
 using NLog;
 using Quartz;
@@ -9,14 +8,12 @@ using EnvelopeGenerator.Web.Models;
 using System.Text.Encodings.Web;
 using Ganss.Xss;
 using Microsoft.Extensions.Options;
-using EnvelopeGenerator.Application;
 using DigitalData.EmailProfilerDispatcher;
 using EnvelopeGenerator.Infrastructure;
 using EnvelopeGenerator.Web.Sanitizers;
 using EnvelopeGenerator.Web.Models.Annotation;
-using DigitalData.UserManager.DependencyInjection;
 using EnvelopeGenerator.Web.Middleware;
-using EnvelopeGenerator.Application.Common.Interfaces.Services;
+using EnvelopeGenerator.DependencyInjection;
 using EnvelopeGenerator.Web;
 
 var logger = LogManager.Setup().LoadConfigurationFromAppSettings().GetCurrentClassLogger();
@@ -57,8 +54,6 @@ try
         });
     });
 
-    builder.Services.AddHttpContextAccessor();
-
     builder.ConfigureBySection<TFARegParams>();
 
     // Add controllers and razor views
@@ -95,17 +90,9 @@ try
     var connStr = config.GetConnectionString(cnnStrName)
         ?? throw new InvalidOperationException($"Connection string '{cnnStrName}' is missing in the application configuration.");
 
-    builder.Services.AddDistributedSqlServerCache(options =>
-    {
-        options.ConnectionString = connStr;
-        options.SchemaName = "dbo";
-        options.TableName = "TBDD_CACHE";
-    });
-
     // Add envelope generator services
-#pragma warning disable CS0618 // Type or member is obsolete
-    builder.Services.AddEnvelopeGeneratorInfrastructureServices(
-        opt =>
+    builder.Services.AddEnvelopeGenerator(config,
+        infrastructureOptions: opt =>
         {
             opt.AddDbTriggerParams(config);
             opt.AddDbContext((provider, options) =>
@@ -116,12 +103,16 @@ try
                         .EnableSensitiveDataLogging()
                         .EnableDetailedErrors();
             });
+        },
+        options: opt =>
+        {
+            opt.SqlCacheOptions = new()
+            {
+                ConnectionString = connStr,
+                SchemaName = "dbo",
+                TableName = "TBDD_CACHE"
+            };
         });
-#pragma warning restore CS0618 // Type or member is obsolete
-
-#pragma warning disable CS0618 // Type or member is obsolete
-    builder.Services.AddEnvelopeGeneratorServices(config);
-#pragma warning restore CS0618 // Type or member is obsolete
 
     builder.Services.Configure<CookiePolicyOptions>(options =>
     {
@@ -169,22 +160,12 @@ try
     builder.Services.AddSingleton(sp => sp.GetRequiredService<IOptions<MultiCulture>>().Value);
 
     // Register mail services
-#pragma warning disable CS0618 // Type or member is obsolete
-    builder.Services.AddScoped<IEnvelopeMailService, EnvelopeMailService>();
-#pragma warning restore CS0618 // Type or member is obsolete
-
-    builder.Services.AddDispatcher<EGDbContext>();
-
-    builder.Services.AddMemoryCache();
+    builder.Services.AddEnvelopeMailService();
 
     builder.ConfigureBySection<CustomImages>();
 
     builder.ConfigureBySection<AnnotationParams>();
 
-#pragma warning disable CS0618 // Type or member is obsolete
-    builder.Services.AddUserManager<EGDbContext>();
-#pragma warning restore CS0618 // Type or member is obsolete
-
     var app = builder.Build();
 
     app.UseMiddleware<ExceptionHandlingMiddleware>();

EnvelopeGenerator.Web/wwwroot/js/util.min.js

@@ -1 +1 @@
-function detailedCurrentDate(){return new Intl.DateTimeFormat(getCurrentCulture(),{day:"2-digit",month:"2-digit",year:"numeric",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:"shortOffset"}).format()}function findNearest(e,t,o,n){const r=n.reduce(((n,r)=>{const i=Math.sqrt((t(e)-t(r))**2+(o(e)-o(r))**2);return i<n.dist?{dist:i,dest:r}:n}),{dist:1/0,dest:null});return r.dest}const getCurrentCulture=()=>("undefined"!=typeof localized&&localized.culture)?localized.culture:navigator.language||"en-US";const B64ToBuff=e=>new Uint8Array(Array.from(atob(e),e=>e.charCodeAt(0))).buffer;const getLocaleDateString=e=>new Date().toLocaleDateString(getCurrentCulture());
+function detailedCurrentDate(){return new Intl.DateTimeFormat(getCurrentCulture(),{day:"2-digit",month:"2-digit",year:"numeric",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:"shortOffset"}).format()}function findNearest(n,t,i,r){const u=r=>Math.sqrt((t(n)-t(r))**2+(i(n)-i(r))**2);return r.reduce((n,t)=>{const i=u(t);return i<n.dist?{dist:i,dest:t}:n},{dist:Infinity,dest:null}).dest}const getCurrentCulture=()=>typeof localized!="undefined"&&localized.culture?localized.culture:navigator.language||"en-US",B64ToBuff=n=>new Uint8Array(Array.from(atob(n),n=>n.charCodeAt(0))).buffer,getLocaleDateString=()=>(new Date).toLocaleDateString(getCurrentCulture());

EnvelopeGenerator.sln

@@ -20,6 +20,9 @@ EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "core", "core", "{9943209E-1744-4944-B1BA-4F87FC1A0EEB}"
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{134D4164-B291-4E19-99B9-E4FA3AFAB62C}"
+	ProjectSection(SolutionItems) = preProject
+		COPILOT_CONTEXT_EN.md = COPILOT_CONTEXT_EN.md
+	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "tests", "tests", "{0CBC2432-A561-4440-89BC-671B66A24146}"
 EndProject
@@ -35,6 +38,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "EnvelopeGenerator.Tests", "
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "EnvelopeGenerator.API", "EnvelopeGenerator.API\EnvelopeGenerator.API.csproj", "{EC768913-6270-14F4-1DD3-69C87A659462}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "EnvelopeGenerator.DependencyInjection", "EnvelopeGenerator.DependencyInjection\EnvelopeGenerator.DependencyInjection.csproj", "{5DCCF9A1-C03F-90E6-87D3-E96DB25250C2}"
+EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "EnvelopeGenerator.ReceiverUI", "EnvelopeGenerator.ReceiverUI\EnvelopeGenerator.ReceiverUI.csproj", "{FB2D306B-1042-4A70-31ED-F991A1599371}"
 EndProject
 Global
@@ -87,6 +92,10 @@ Global
 		{EC768913-6270-14F4-1DD3-69C87A659462}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{EC768913-6270-14F4-1DD3-69C87A659462}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{EC768913-6270-14F4-1DD3-69C87A659462}.Release|Any CPU.Build.0 = Release|Any CPU
+		{5DCCF9A1-C03F-90E6-87D3-E96DB25250C2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{5DCCF9A1-C03F-90E6-87D3-E96DB25250C2}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{5DCCF9A1-C03F-90E6-87D3-E96DB25250C2}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{5DCCF9A1-C03F-90E6-87D3-E96DB25250C2}.Release|Any CPU.Build.0 = Release|Any CPU
 		{FB2D306B-1042-4A70-31ED-F991A1599371}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
 		{FB2D306B-1042-4A70-31ED-F991A1599371}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{FB2D306B-1042-4A70-31ED-F991A1599371}.Release|Any CPU.ActiveCfg = Release|Any CPU
@@ -110,6 +119,7 @@ Global
 		{211619F5-AE25-4BA5-A552-BACAFE0632D3} = {9943209E-1744-4944-B1BA-4F87FC1A0EEB}
 		{224C4845-1CDE-22B7-F3A9-1FF9297F70E8} = {0CBC2432-A561-4440-89BC-671B66A24146}
 		{EC768913-6270-14F4-1DD3-69C87A659462} = {E3C758DC-914D-4B7E-8457-0813F1FDB0CB}
+		{5DCCF9A1-C03F-90E6-87D3-E96DB25250C2} = {E3C758DC-914D-4B7E-8457-0813F1FDB0CB}
 		{FB2D306B-1042-4A70-31ED-F991A1599371} = {E3C758DC-914D-4B7E-8457-0813F1FDB0CB}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution