Add signature panel and layout updates for ReportViewer

Enhanced `ReportViewer.razor` with a new layout structure:
- Added `receiver-page-layout` with `receiver-signature-panel` and `receiver-viewer-wrapper` for better organization.
- Introduced a button to export signed PDFs, conditionally enabled based on `SignatureApplied`.
- Added a `DxPopup` for capturing signatures with a "Close" button.

Updated `MainLayout.razor` to remove unnecessary padding from `<article>`.

Refined `app.css`:
- Defined styles for `receiver-page-layout`, `receiver-signature-panel`, and `receiver-viewer-wrapper` to improve layout flexibility.
- Adjusted `article` to use flexbox and ensure hidden overflow.

EnvelopeGenerator.ReceiverUI/EnvelopeGenerator.ReceiverUI.csproj

@@ -3,6 +3,25 @@
     <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <WasmBuildNative>true</WasmBuildNative>
+	<InvariantGlobalization>false</InvariantGlobalization>
+	<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
+	  
+	<Nullable>enable</Nullable>
+	<PackageId>EnvelopeGenerator.ReceiverUI</PackageId>
+	<Authors>Digital Data GmbH</Authors>
+	<Company>Digital Data GmbH</Company>
+	<Product>EnvelopeGenerator.ReceiverUI</Product>
+	<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>
+	<!-- NuGet package version -->
+	<AssemblyVersion>1.0.1.0</AssemblyVersion>
+	<!-- Assembly version for API compatibility -->
+	<FileVersion>1.0.1.0</FileVersion>
+	<!-- Windows file version -->
+	<Copyright>Copyright © 2026 Digital Data GmbH. All rights reserved.</Copyright>
+	  
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="HarfBuzzSharp.NativeAssets.WebAssembly" Version="8.3.1.2" />

EnvelopeGenerator.ReceiverUI/Pages/Index.razor

@@ -35,6 +35,6 @@
             return;
 
         await Task.Delay(1200);
-        NavigationManager.NavigateTo("/reportviewer");
+        NavigationManager.NavigateTo("/receiver");
     }
 }

EnvelopeGenerator.ReceiverUI/Pages/ReportDesigner.razor

@@ -1,4 +1,4 @@
-@page "/reportdesigner"
+@page "/sender"
 @using DevExpress.DataAccess.Json;
 @using EnvelopeGenerator.ReceiverUI.Services;
 

EnvelopeGenerator.ReceiverUI/Pages/ReportViewer.razor

@@ -1,10 +1,15 @@
-@page "/reportviewer/"
+@page "/receiver"
 @using System.Drawing
 @using DevExpress.Drawing
 @using DevExpress.Utils
 @using DevExpress.XtraPrinting
 @using DevExpress.XtraPrinting.Drawing
-@using DevExpress.XtraReports.UI;
+@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;
 @inject IJSRuntime JSRuntime
 @inject InMemoryReportStorageWebExtension ReportStorage
@@ -12,6 +17,9 @@
 <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-signature-panel">
 <div class="card m-3">
     <div class="card-body">
         <h5 class="card-title">Unterschrift</h5>
@@ -33,16 +41,70 @@
         </div>
     </div>
 </div>
+</div>
 
 <DxPopup @bind-Visible="SignaturePopupVisible"
          HeaderText="Unterschrift erfassen"
-         Width="520px"
+         Width="620px"
          ShowFooter="true"
          CloseOnEscape="true"
          CloseOnOutsideClick="false">
     <BodyContentTemplate>
-        <p class="text-muted mb-2">Bitte unterschreiben Sie im folgenden Feld.</p>
-        <canvas id="receiver-signature-pad" width="420" height="150" class="border rounded bg-white w-100" style="max-width: 420px; touch-action: none;"></canvas>
+        <ul class="nav nav-tabs mb-3">
+            <li class="nav-item">
+                <button type="button" class="nav-link @(ActiveSignatureTab == SignatureTabDraw ? "active" : null)" @onclick="() => SetSignatureTabAsync(SignatureTabDraw)">Zeichnen</button>
+            </li>
+            <li class="nav-item">
+                <button type="button" class="nav-link @(ActiveSignatureTab == SignatureTabText ? "active" : null)" @onclick="() => SetSignatureTabAsync(SignatureTabText)">Text</button>
+            </li>
+            <li class="nav-item">
+                <button type="button" class="nav-link @(ActiveSignatureTab == SignatureTabImage ? "active" : null)" @onclick="() => SetSignatureTabAsync(SignatureTabImage)">Bild</button>
+            </li>
+        </ul>
+
+        @if(ActiveSignatureTab == SignatureTabDraw) {
+            <p class="text-muted mb-2">Bitte unterschreiben Sie im folgenden Feld.</p>
+            <canvas id="receiver-signature-pad" width="520" height="160" class="border rounded bg-white w-100" style="max-width: 520px; touch-action: none;"></canvas>
+        } else if(ActiveSignatureTab == SignatureTabText) {
+            <p class="text-muted mb-2">Geben Sie Ihre Unterschrift als Text ein und waehlen Sie eine Schriftart.</p>
+            <div class="row g-2 mb-2">
+                <div class="col-12 col-md-7">
+                    <input class="form-control" placeholder="Ihre Unterschrift" value="@TypedSignatureText" @oninput="OnTypedSignatureChanged" />
+                </div>
+                <div class="col-12 col-md-5">
+                    <select class="form-select" value="@TypedSignatureFont" @onchange="OnTypedSignatureFontChanged">
+                        @foreach(var font in TypedSignatureFonts) {
+                            <option value="@font.Value" style="font-family: @font.Value">@font.Text</option>
+                        }
+                    </select>
+                </div>
+            </div>
+            <canvas id="receiver-typed-signature-pad" width="520" height="160" class="border rounded bg-white w-100" style="max-width: 520px;"></canvas>
+        } else {
+            <p class="text-muted mb-2">Laden Sie ein Bild Ihrer Unterschrift hoch.</p>
+            <input id="receiver-signature-image-input" class="form-control mb-2" type="file" accept="image/png,image/jpeg,image/webp" />
+            <canvas id="receiver-image-signature-pad" width="520" height="160" class="border rounded bg-white w-100" style="max-width: 520px;"></canvas>
+        }
+
+
+        <div class="border-top mt-3 pt-3">
+            <p class="text-muted mb-2">Bitte geben Sie die folgenden Angaben ein. Das Datum wird automatisch hinzugefuegt.</p>
+            <div class="row g-2">
+                <div class="col-12 col-md-6">
+                    <label class="form-label" for="receiver-signer-name">Vor- und Nachname *</label>
+                    <input id="receiver-signer-name" class="form-control" value="@SignerFullName" @oninput="args => SignerFullName = args.Value?.ToString() ?? string.Empty" />
+                </div>
+                <div class="col-12 col-md-6">
+                    <label class="form-label" for="receiver-signer-position">Position</label>
+                    <input id="receiver-signer-position" class="form-control" value="@SignerPosition" @oninput="args => SignerPosition = args.Value?.ToString() ?? string.Empty" />
+                </div>
+                <div class="col-12 col-md-6">
+                    <label class="form-label" for="receiver-signature-place">Ort *</label>
+                    <input id="receiver-signature-place" class="form-control" value="@SignaturePlace" @oninput="args => SignaturePlace = args.Value?.ToString() ?? string.Empty" />
+                </div>
+            </div>
+        </div>
+
         @if(!string.IsNullOrWhiteSpace(PopupValidationMessage)) {
             <div class="text-danger mt-2">@PopupValidationMessage</div>
         }
@@ -56,17 +118,43 @@
     </FooterContentTemplate>
 </DxPopup>
 
+<div class="receiver-viewer-wrapper">
 @if(Report is not null) {
     <DxReportViewer @key="ViewerKey" @ref="reportViewer" Report="Report" RootCssClasses="w-100 h-100" />
 }
+</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")
+    };
+
     DxReportViewer reportViewer;
     XtraReport? Report;
     bool SignatureApplied;
     bool SignaturePopupVisible;
     string? SignatureValidationMessage;
     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() {
@@ -76,17 +164,45 @@
     }
 
     async Task OpenSignaturePopupAsync() {
+        ActiveSignatureTab = SignatureTabDraw;
         SignaturePopupVisible = true;
         SignatureValidationMessage = null;
         PopupValidationMessage = null;
         await InvokeAsync(StateHasChanged);
         await Task.Delay(50);
-        await JSRuntime.InvokeVoidAsync("receiverSignature.initialize", "receiver-signature-pad");
+        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;
-        await JSRuntime.InvokeVoidAsync("receiverSignature.clear", "receiver-signature-pad");
+
+        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);
+        }
     }
 
     void CloseSignaturePopup() {
@@ -94,8 +210,32 @@
         SignaturePopupVisible = false;
     }
 
+    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 ApplySignatureAsync() {
-        var signatureDataUrl = await JSRuntime.InvokeAsync<string?>("receiverSignature.getDataUrl", "receiver-signature-pad");
+        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 fuer den PDF-Export erforderlich.";
@@ -104,19 +244,36 @@
 
         PopupValidationMessage = null;
         SignatureValidationMessage = null;
-        Report = CreateSignedReportInstance(signatureDataUrl);
+        Report = CreateSignedReportInstance(signatureDataUrl, SignerFullName.Trim(), SignerPosition.Trim(), SignaturePlace.Trim());
         SignatureApplied = true;
         SignaturePopupVisible = false;
         ViewerKey++;
     }
 
+    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 ExportSignedPdfAsync() {
         if(!SignatureApplied || Report is null) {
             SignatureValidationMessage = "Bitte fuegen Sie die Unterschrift zuerst zum Bericht hinzu.";
             return;
         }
 
-        await reportViewer.ExportToAsync(ExportFormat.Pdf);
+        try {
+            SignatureValidationMessage = null;
+            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 CreateReportInstance() {
@@ -125,13 +282,13 @@
             : PredefinedReports.ReportsFactory.GetReport("LargeDatasetReport");
     }
 
-    XtraReport CreateSignedReportInstance(string signatureDataUrl) {
+    XtraReport CreateSignedReportInstance(string signatureDataUrl, string signerFullName, string signerPosition, string signaturePlace) {
         var report = CreateReportInstance();
-        AddSignature(report, signatureDataUrl);
+        AddSignature(report, signatureDataUrl, signerFullName, signerPosition, signaturePlace);
         return report;
     }
 
-    static void AddSignature(XtraReport report, string signatureDataUrl) {
+    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);
         var imageSource = new ImageSource(DXImage.FromStream(imageStream));
@@ -142,28 +299,53 @@
             report.Bands.Add(bottomMargin);
         }
 
-        bottomMargin.HeightF = Math.Max(bottomMargin.HeightF, 120F);
         RemoveExistingSignature(bottomMargin);
 
-        var signatureLabel = new XRLabel {
-            Name = "receiverSignatureLabel",
-            Text = $"Empfaengerunterschrift - {DateTime.Now:g}",
-            BoundsF = new RectangleF(390F, 6F, 230F, 18F),
-            Font = new DXFont("Open Sans", 8F, DXFontStyle.Bold),
-            ForeColor = System.Drawing.Color.FromArgb(73, 80, 87),
-            TextAlignment = TextAlignment.MiddleLeft
-        };
+        // Layout constants
+        const float sigX         = 390F;
+        const float sigWidth     = 230F;
+        const float sigImgHeight = 70F;
+        const float infoHeight   = 65F;  // up to 4 lines at 8pt
+        const float innerGap     = 5F;
+        const float bottomPad    = 6F;
+        const float defaultTopPad = 8F;
+        const float maxBandHeight = 210F;
+
+        float requiredHeight = defaultTopPad + sigImgHeight + innerGap + infoHeight + bottomPad;
+
+        // Grow band if needed, but cap at maxBandHeight to avoid overlapping page content
+        bottomMargin.HeightF = Math.Min(maxBandHeight, Math.Max(bottomMargin.HeightF, requiredHeight));
+
+        // If band is tighter than required, compress top padding so content still fits
+        float topPad = Math.Max(0F, bottomMargin.HeightF - bottomPad - infoHeight - innerGap - sigImgHeight);
+
+        float imageY = topPad;
+        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}";
 
         var signature = new XRPictureBox {
             Name = "receiverSignatureImage",
             ImageSource = imageSource,
-            BoundsF = new RectangleF(390F, 28F, 230F, 70F),
+            BoundsF = new RectangleF(sigX, imageY, sigWidth, sigImgHeight),
             Sizing = ImageSizeMode.ZoomImage,
             Borders = BorderSide.Bottom,
             BorderColor = System.Drawing.Color.FromArgb(73, 80, 87)
         };
 
-        bottomMargin.Controls.AddRange(new XRControl[] { signatureLabel, signature });
+        var signatureLabel = new XRLabel {
+            Name = "receiverSignatureLabel",
+            Text = signatureInformation,
+            Multiline = true,
+            BoundsF = new RectangleF(sigX, labelY, sigWidth, infoHeight),
+            Font = new DXFont("Open Sans", 8F, DXFontStyle.Regular),
+            ForeColor = System.Drawing.Color.FromArgb(73, 80, 87),
+            TextAlignment = TextAlignment.TopLeft
+        };
+
+        bottomMargin.Controls.AddRange(new XRControl[] { signature, signatureLabel });
     }
 
     static void RemoveExistingSignature(BottomMarginBand bottomMargin) {

EnvelopeGenerator.ReceiverUI/Shared/MainLayout.razor

@@ -2,16 +2,12 @@
 @inherits LayoutComponentBase
 
 <div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
-
-    <main>
+<main>
         <div class="top-row px-4">
             <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
         </div>
 
-        <article class="content px-4">
+        <article class="content">
             @Body
         </article>
     </main>

EnvelopeGenerator.ReceiverUI/Shared/NavMenu.razor

@@ -22,12 +22,12 @@
         </div>
         *@
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="reportviewer">
+            <NavLink class="nav-link" href="receiver">
                 <span class="oi oi-plus" aria-hidden="true"></span> Empfänger-UI
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="reportdesigner">
+            <NavLink class="nav-link" href="sender">
                 <span class="oi oi-plus" aria-hidden="true"></span> Umschlag-UI
             </NavLink>
         </div>

EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css

@@ -12,6 +12,28 @@ html, body {
 
 article {
     height: calc(100vh - 70px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.receiver-page-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.receiver-signature-panel {
+    flex: 0 0 auto;
+}
+
+.receiver-viewer-wrapper {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
 }
 
 .valid.modified:not([type=checkbox]) {

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

@@ -1,5 +1,7 @@
 window.receiverSignature = (() => {
     const pads = new Map();
+    const typedSignatures = new Map();
+    const imageSignatures = new Map();
 
     function getPosition(canvas, event) {
         const rect = canvas.getBoundingClientRect();
@@ -10,6 +12,10 @@ window.receiverSignature = (() => {
         };
     }
 
+    function clearCanvas(canvas) {
+        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+    }
+
     function initialize(canvasId) {
         const canvas = document.getElementById(canvasId);
         if (!canvas || pads.has(canvasId))
@@ -59,16 +65,120 @@ window.receiverSignature = (() => {
         canvas.addEventListener('touchend', end, { passive: false });
     }
 
+    function initializeTyped(canvasId) {
+        const canvas = document.getElementById(canvasId);
+        if (!canvas || typedSignatures.has(canvasId))
+            return;
+
+        typedSignatures.set(canvasId, { hasSignature: false });
+    }
+
+    function initializeImage(inputId, canvasId) {
+        const input = document.getElementById(inputId);
+        const canvas = document.getElementById(canvasId);
+        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 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);
+                    state.hasSignature = true;
+                };
+                image.src = reader.result;
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+
     function clear(canvasId) {
         const canvas = document.getElementById(canvasId);
         const state = pads.get(canvasId);
         if (!canvas || !state)
             return;
 
-        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+        clearCanvas(canvas);
         state.hasSignature = false;
     }
 
+    function clearTyped(canvasId) {
+        const canvas = document.getElementById(canvasId);
+        const state = typedSignatures.get(canvasId);
+        if (!canvas || !state)
+            return;
+
+        clearCanvas(canvas);
+        state.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;
+    }
+
+    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);
+        state.hasSignature = true;
+    }
+
     function getDataUrl(canvasId) {
         const canvas = document.getElementById(canvasId);
         const state = pads.get(canvasId);
@@ -78,9 +188,34 @@ window.receiverSignature = (() => {
         return canvas.toDataURL('image/png');
     }
 
+    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');
+    }
+
     return {
         initialize,
+        initializeTyped,
+        initializeImage,
         clear,
-        getDataUrl
+        clearTyped,
+        clearImage,
+        renderTypedSignature,
+        getDataUrl,
+        getTypedDataUrl,
+        getImageDataUrl
     };
 })();