First results converting receiver-ui-react into a Blazor Web App

EnvelopeGenerator.ReceiverUIBlazor/App.razor

@@ -0,0 +1,13 @@
+@using Microsoft.AspNetCore.Components.Routing
+
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

EnvelopeGenerator.ReceiverUIBlazor/EnvelopeGenerator.ReceiverUIBlazor.csproj

@@ -0,0 +1,13 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <AssemblyName>EnvelopeGenerator.ReceiverUIBlazor</AssemblyName>
+    <RootNamespace>EnvelopeGenerator.ReceiverUIBlazor</RootNamespace>
+  </PropertyGroup>
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
+  </ItemGroup>
+</Project>

EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor

@@ -0,0 +1,328 @@
+@page "/"
+@inject IJSRuntime JS
+
+<h1>Sign PDF (Blazor)</h1>
+
+<div class="controls">
+    <InputFile OnChange="HandleFileSelected" accept="application/pdf" />
+    <button class="btn" @onclick="ShowSignaturePad" disabled="@(!HasPdf)">Add signature</button>
+    <button class="btn" @onclick="() => ShowTextOverlay(false)" disabled="@(!HasPdf)">Add text</button>
+    <button class="btn" @onclick="() => ShowTextOverlay(true)" disabled="@(!HasPdf)">Add date</button>
+    <button class="btn" @onclick="Reset" disabled="@(!HasPdf)">Reset</button>
+    <button class="btn secondary" @onclick="Download" disabled="@(!HasPdf)">Download</button>
+</div>
+
+@if (!HasPdf)
+{
+    <div class="drop-hint">Drop or select a PDF to start.</div>
+}
+
+@if (HasPdf)
+{
+    <div class="document-shell" @ref="PdfHostRef" style="@($"width:{ViewportWidthPx}px")">
+        <canvas id="pdf-canvas" @ref="PdfCanvasRef"></canvas>
+
+        @if (ShowSignature)
+        {
+            <div class="overlay signature" style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px; width:{OverlayWidthPx}px; height:{OverlayHeightPx}px;")"
+                 @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
+                <div class="overlay-controls">
+                    <button class="overlay-btn" @onclick="ApplySignature">✔</button>
+                    <button class="overlay-btn" @onclick="CancelOverlay">✖</button>
+                </div>
+                <img src="@SignatureDataUrl" draggable="false" />
+            </div>
+        }
+        @if (ShowText)
+        {
+            <div class="overlay text" style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px;")" @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
+                <div class="overlay-controls">
+                    <button class="overlay-btn" @onclick="ApplyText">✔</button>
+                    <button class="overlay-btn" @onclick="CancelOverlay">✖</button>
+                </div>
+                <input class="overlay-input" @bind="TextValue" />
+            </div>
+        }
+    </div>
+
+    <div class="paging">
+        <button class="btn" @onclick="PrevPage" disabled="@(!CanPrev)">&lt;</button>
+        <span>Page @DisplayPage / @PageCount</span>
+        <button class="btn" @onclick="NextPage" disabled="@(!CanNext)">&gt;</button>
+    </div>
+}
+
+@if (ShowSignaturePadModal)
+{
+    <div class="modal-backdrop">
+        <div class="modal">
+            <h3>Add signature</h3>
+            <canvas id="@SignatureCanvasId" width="700" height="220"></canvas>
+            <div class="modal-row">
+                <label><input type="checkbox" @bind="AutoDate" /> Auto date/time</label>
+                <button class="btn" @onclick="ClearSignature">Clear</button>
+                <span class="spacer"></span>
+                <button class="btn" @onclick="ConfirmSignature">Use signature</button>
+                <button class="btn secondary" @onclick="CloseSignaturePad">Cancel</button>
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    private ElementReference PdfCanvasRef;
+    private ElementReference PdfHostRef;
+
+    private string? PdfBase64;
+    private int PageIndex;
+    private int PageCount;
+    private double ViewportWidthPx = 800;
+    private double ViewportHeightPx;
+
+    private bool ShowSignaturePadModal;
+    private bool ShowSignature;
+    private bool ShowText;
+    private string SignatureCanvasId { get; } = $"sig-{Guid.NewGuid():N}";
+    private string? SignatureDataUrl;
+    private bool AutoDate = true;
+
+    private double OverlayXpx = 20;
+    private double OverlayYpx = 20;
+    private double OverlayWidthPx = 200;
+    private double OverlayHeightPx = 80;
+    private bool IsDragging;
+    private double DragStartX;
+    private double DragStartY;
+    private double StartLeft;
+    private double StartTop;
+    private string TextValue = "Text";
+
+    private bool HasPdf => !string.IsNullOrWhiteSpace(PdfBase64);
+    private int DisplayPage => PageIndex + 1;
+    private bool CanPrev => PageIndex > 0;
+    private bool CanNext => PageIndex + 1 < PageCount;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JS.InvokeVoidAsync("pdfInterop.ensureReady");
+        }
+
+        if (ShowSignaturePadModal)
+        {
+            await JS.InvokeVoidAsync("pdfInterop.initSignaturePad", SignatureCanvasId);
+        }
+    }
+
+    private async Task HandleFileSelected(InputFileChangeEventArgs e)
+    {
+        if (e.FileCount == 0)
+        {
+            return;
+        }
+
+        var file = e.File;
+        await using var stream = file.OpenReadStream(maxAllowedSize: 20 * 1024 * 1024);
+        using var ms = new MemoryStream();
+        await stream.CopyToAsync(ms);
+        PdfBase64 = Convert.ToBase64String(ms.ToArray());
+
+        var result = await JS.InvokeAsync<RenderResult>("pdfInterop.loadPdf", PdfBase64);
+        PageCount = result.Pages;
+        PageIndex = 0;
+
+        await RenderPage();
+    }
+
+    private async Task RenderPage()
+    {
+        if (!HasPdf)
+        {
+            return;
+        }
+
+        var viewport = await JS.InvokeAsync<ViewportInfo>("pdfInterop.renderPage", PageIndex, "pdf-canvas", ViewportWidthPx);
+        ViewportWidthPx = viewport.Width;
+        ViewportHeightPx = viewport.Height;
+        StateHasChanged();
+    }
+
+    private void Reset()
+    {
+        PdfBase64 = null;
+        PageIndex = 0;
+        PageCount = 0;
+        ViewportHeightPx = 0;
+        CloseOverlays();
+    }
+
+    private void CloseOverlays()
+    {
+        ShowSignature = false;
+        ShowText = false;
+        SignatureDataUrl = null;
+    }
+
+    private void ShowSignaturePad()
+    {
+        ShowSignaturePadModal = true;
+    }
+
+    private async Task ConfirmSignature()
+    {
+        SignatureDataUrl = await JS.InvokeAsync<string>("pdfInterop.getSignatureDataUrl", SignatureCanvasId);
+        if (string.IsNullOrWhiteSpace(SignatureDataUrl))
+        {
+            return;
+        }
+
+        OverlayWidthPx = 200;
+        OverlayHeightPx = 80;
+        OverlayXpx = 20;
+        OverlayYpx = 20;
+        ShowSignature = true;
+        ShowText = false;
+        ShowSignaturePadModal = false;
+    }
+
+    private void CloseSignaturePad()
+    {
+        ShowSignaturePadModal = false;
+    }
+
+    private void ClearSignature()
+    {
+        JS.InvokeVoidAsync("pdfInterop.clearSignaturePad", SignatureCanvasId);
+    }
+
+    private void ShowTextOverlay(bool autoDate)
+    {
+        TextValue = autoDate ? DateTimeOffset.Now.ToString("M/d/yyyy HH:mm:ss zzz") : "Text";
+        OverlayWidthPx = 240;
+        OverlayHeightPx = 40;
+        OverlayXpx = 20;
+        OverlayYpx = 20;
+        ShowText = true;
+        ShowSignature = false;
+    }
+
+    private void StartDrag(PointerEventArgs args)
+    {
+        IsDragging = true;
+        DragStartX = args.ClientX;
+        DragStartY = args.ClientY;
+        StartLeft = OverlayXpx;
+        StartTop = OverlayYpx;
+    }
+
+    private void OnDrag(PointerEventArgs args)
+    {
+        if (!IsDragging)
+        {
+            return;
+        }
+
+        var dx = args.ClientX - DragStartX;
+        var dy = args.ClientY - DragStartY;
+        OverlayXpx = StartLeft + dx;
+        OverlayYpx = StartTop + dy;
+        StateHasChanged();
+    }
+
+    private void EndDrag(PointerEventArgs args)
+    {
+        IsDragging = false;
+    }
+
+    private async Task ApplySignature()
+    {
+        if (SignatureDataUrl is null || !HasPdf)
+        {
+            return;
+        }
+
+        PdfBase64 = await JS.InvokeAsync<string>("pdfInterop.applySignature", new
+        {
+            base64 = PdfBase64,
+            pageIndex = PageIndex,
+            left = OverlayXpx,
+            top = OverlayYpx,
+            width = OverlayWidthPx,
+            height = OverlayHeightPx,
+            renderWidth = ViewportWidthPx,
+            renderHeight = ViewportHeightPx,
+            dataUrl = SignatureDataUrl,
+            autoDate = AutoDate,
+        });
+
+        CloseOverlays();
+        await RenderPage();
+    }
+
+    private async Task ApplyText()
+    {
+        if (string.IsNullOrWhiteSpace(TextValue) || !HasPdf)
+        {
+            return;
+        }
+
+        PdfBase64 = await JS.InvokeAsync<string>("pdfInterop.applyText", new
+        {
+            base64 = PdfBase64,
+            pageIndex = PageIndex,
+            left = OverlayXpx,
+            top = OverlayYpx,
+            width = OverlayWidthPx,
+            height = OverlayHeightPx,
+            renderWidth = ViewportWidthPx,
+            renderHeight = ViewportHeightPx,
+            text = TextValue,
+            fontSize = 20,
+        });
+
+        CloseOverlays();
+        await RenderPage();
+    }
+
+    private void CancelOverlay()
+    {
+        CloseOverlays();
+    }
+
+    private async Task PrevPage()
+    {
+        if (!CanPrev)
+        {
+            return;
+        }
+
+        PageIndex--;
+        await RenderPage();
+    }
+
+    private async Task NextPage()
+    {
+        if (!CanNext)
+        {
+            return;
+        }
+
+        PageIndex++;
+        await RenderPage();
+    }
+
+    private async Task Download()
+    {
+        if (!HasPdf)
+        {
+            return;
+        }
+
+        await JS.InvokeVoidAsync("pdfInterop.downloadPdf", PdfBase64, "document-signed.pdf");
+    }
+
+    private record RenderResult(int Pages);
+
+    private record ViewportInfo(double Width, double Height, double PageWidth, double PageHeight);
+}

EnvelopeGenerator.ReceiverUIBlazor/Program.cs

@@ -0,0 +1,11 @@
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using EnvelopeGenerator.ReceiverUIBlazor;
+
+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) });
+
+await builder.Build().RunAsync();

EnvelopeGenerator.ReceiverUIBlazor/Shared/MainLayout.razor

@@ -0,0 +1,10 @@
+@inherits LayoutComponentBase
+
+<div class="main-layout">
+    <header class="top-bar">
+        <div class="brand">Receiver UI (Blazor)</div>
+    </header>
+    <main class="content">
+        @Body
+    </main>
+</div>

EnvelopeGenerator.ReceiverUIBlazor/_Imports.razor

@@ -0,0 +1,8 @@
+@using System.Net.Http
+@using Microsoft.AspNetCore.Components
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
+@using Microsoft.JSInterop
+@using EnvelopeGenerator.ReceiverUIBlazor
+@using EnvelopeGenerator.ReceiverUIBlazor.Shared

EnvelopeGenerator.ReceiverUIBlazor/wwwroot/css/app.css

@@ -0,0 +1,183 @@
+body {
+    margin: 0;
+    font-family: "Segoe UI", Arial, sans-serif;
+    background: #0f172a;
+    color: #e2e8f0;
+}
+
+.main-layout {
+    min-height: 100vh;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0b1220 100%);
+}
+
+.top-bar {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+    background: rgba(255, 255, 255, 0.04);
+    border-bottom: 1px solid rgba(226, 232, 240, 0.08);
+}
+
+.top-bar .brand {
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+.content {
+    padding: 24px 32px;
+}
+
+h1 {
+    margin-top: 0;
+    margin-bottom: 8px;
+    letter-spacing: 0.3px;
+}
+
+.controls {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.btn {
+    background: #22d3ee;
+    color: #0f172a;
+    border: none;
+    padding: 10px 14px;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 120ms ease, box-shadow 120ms ease;
+}
+
+.btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 8px 18px rgba(34, 211, 238, 0.25);
+}
+
+.btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.btn.secondary {
+    background: rgba(226, 232, 240, 0.12);
+    color: #e2e8f0;
+    border: 1px solid rgba(226, 232, 240, 0.2);
+}
+
+.drop-hint {
+    padding: 24px;
+    border: 1px dashed rgba(226, 232, 240, 0.3);
+    border-radius: 12px;
+    text-align: center;
+    color: rgba(226, 232, 240, 0.8);
+}
+
+.document-shell {
+    position: relative;
+    margin-top: 12px;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+    background: #0b1220;
+    border: 1px solid rgba(226, 232, 240, 0.08);
+}
+
+canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    background: #111827;
+}
+
+.overlay {
+    position: absolute;
+    border: 2px solid #22d3ee;
+    border-radius: 8px;
+    padding: 6px;
+    background: rgba(15, 23, 42, 0.9);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
+    user-select: none;
+}
+
+.overlay.signature img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.overlay-controls {
+    position: absolute;
+    top: -36px;
+    right: 0;
+    display: flex;
+    gap: 4px;
+}
+
+.overlay-btn {
+    background: #0f172a;
+    color: #22d3ee;
+    border: 1px solid rgba(34, 211, 238, 0.4);
+    border-radius: 6px;
+    padding: 4px 8px;
+    cursor: pointer;
+}
+
+.overlay-input {
+    border: none;
+    background: transparent;
+    color: #e2e8f0;
+    font-size: 18px;
+    padding: 4px;
+    min-width: 160px;
+    outline: none;
+}
+
+.paging {
+    margin-top: 12px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.65);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+
+.modal {
+    background: #0f172a;
+    border: 1px solid rgba(226, 232, 240, 0.08);
+    border-radius: 12px;
+    padding: 16px;
+    min-width: 760px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+}
+
+.modal-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.modal canvas {
+    background: #0b1220;
+    border: 1px solid rgba(226, 232, 240, 0.1);
+    border-radius: 8px;
+}
+
+.spacer {
+    flex: 1;
+}

EnvelopeGenerator.ReceiverUIBlazor/wwwroot/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Receiver UI (Blazor)</title>
+    <base href="/" />
+    <link rel="stylesheet" href="css/app.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.269/pdf.min.js" integrity="sha512-tAqK8Nw4WnAnX/d+Q/FI+jTYfCLMVSX39kT9rCec8NLwlY+jIUUQx7TKfQvHr2SgVXmvGZtxPRQSf0oYAI7gCA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.269/pdf.worker.min.js" integrity="sha512-xS2zAkrE3zGZFNE2hCpL25O9P+hxKpADcDxpfoSr8q/kBDL/6Ht8OZODBM96KghAe8/powBPh6UT7aY4AsF38g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
+    <script src="js/pdfInterop.js"></script>
+</head>
+<body>
+    <div id="app">Loading...</div>
+    <script src="_framework/blazor.webassembly.js"></script>
+</body>
+</html>

EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js

@@ -0,0 +1,211 @@
+(function () {
+    const state = {
+        pdfDoc: null,
+        pdfBytes: null,
+        lastViewport: null,
+    };
+
+    function base64ToUint8(base64) {
+        const binStr = atob(base64);
+        const len = binStr.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binStr.charCodeAt(i);
+        }
+        return bytes;
+    }
+
+    async function reloadFromBase64(base64) {
+        state.pdfBytes = base64ToUint8(base64);
+        state.pdfDoc = await pdfjsLib.getDocument({ data: state.pdfBytes }).promise;
+        return { pages: state.pdfDoc.numPages };
+    }
+
+    function dataUrlDownload(dataUrl, filename) {
+        const a = document.createElement('a');
+        a.href = dataUrl;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+
+    const pointerPads = new Map();
+
+    window.pdfInterop = {
+        ensureReady: () => {
+            if (pdfjsLib && pdfjsLib.GlobalWorkerOptions) {
+                // worker is already loaded via CDN include
+                return;
+            }
+        },
+        loadPdf: async (base64) => {
+            return await reloadFromBase64(base64);
+        },
+        renderPage: async (pageIndex, canvasId, targetWidth) => {
+            if (!state.pdfDoc) {
+                throw new Error('PDF not loaded');
+            }
+            const page = await state.pdfDoc.getPage(pageIndex + 1);
+            const rawViewport = page.getViewport({ scale: 1 });
+            const scale = targetWidth / rawViewport.width;
+            const viewport = page.getViewport({ scale });
+
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) {
+                throw new Error('Canvas not found');
+            }
+            const ctx = canvas.getContext('2d');
+            canvas.width = viewport.width;
+            canvas.height = viewport.height;
+
+            await page.render({ canvasContext: ctx, viewport }).promise;
+
+            state.lastViewport = {
+                width: viewport.width,
+                height: viewport.height,
+                pageWidth: rawViewport.width,
+                pageHeight: rawViewport.height,
+            };
+
+            return state.lastViewport;
+        },
+        applySignature: async (payload) => {
+            const {
+                base64,
+                pageIndex,
+                left,
+                top,
+                width,
+                height,
+                renderWidth,
+                renderHeight,
+                dataUrl,
+                autoDate,
+            } = payload;
+
+            const pdfDoc = await PDFLib.PDFDocument.load(base64ToUint8(base64));
+            const page = pdfDoc.getPage(pageIndex);
+            const scaleX = page.getWidth() / renderWidth;
+            const scaleY = page.getHeight() / renderHeight;
+
+            const pngImage = await pdfDoc.embedPng(dataUrl);
+            const drawWidth = width * scaleX;
+            const drawHeight = height * scaleY;
+            const x = left * scaleX;
+            const y = page.getHeight() - (top + height) * scaleY;
+
+            page.drawImage(pngImage, {
+                x,
+                y,
+                width: drawWidth,
+                height: drawHeight,
+            });
+
+            if (autoDate) {
+                const text = `Signed ${new Date().toLocaleString()}`;
+                page.drawText(text, {
+                    x,
+                    y: y - 14 * scaleY,
+                    size: 14 * scaleX,
+                    color: PDFLib.rgb(0.07, 0.54, 0.26),
+                });
+            }
+
+            const updatedBase64 = await pdfDoc.saveAsBase64({ dataUri: false });
+            await reloadFromBase64(updatedBase64);
+            return updatedBase64;
+        },
+        applyText: async (payload) => {
+            const {
+                base64,
+                pageIndex,
+                left,
+                top,
+                width,
+                height,
+                renderWidth,
+                renderHeight,
+                text,
+                fontSize,
+            } = payload;
+
+            const pdfDoc = await PDFLib.PDFDocument.load(base64ToUint8(base64));
+            const page = pdfDoc.getPage(pageIndex);
+            const scaleX = page.getWidth() / renderWidth;
+            const scaleY = page.getHeight() / renderHeight;
+
+            const x = left * scaleX;
+            const y = page.getHeight() - (top + height) * scaleY;
+
+            page.drawText(text, {
+                x,
+                y,
+                size: fontSize * scaleX,
+                color: PDFLib.rgb(0.9, 0.9, 0.9),
+            });
+
+            const updatedBase64 = await pdfDoc.saveAsBase64({ dataUri: false });
+            await reloadFromBase64(updatedBase64);
+            return updatedBase64;
+        },
+        downloadPdf: (base64, filename) => {
+            dataUrlDownload(`data:application/pdf;base64,${base64}`, filename);
+        },
+        initSignaturePad: (canvasId) => {
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+            const ctx = canvas.getContext('2d');
+            ctx.lineWidth = 2;
+            ctx.lineCap = 'round';
+            ctx.strokeStyle = '#22d3ee';
+
+            const padState = {
+                drawing: false,
+                lastX: 0,
+                lastY: 0,
+            };
+
+            function start(e) {
+                padState.drawing = true;
+                const rect = canvas.getBoundingClientRect();
+                padState.lastX = e.clientX - rect.left;
+                padState.lastY = e.clientY - rect.top;
+            }
+
+            function move(e) {
+                if (!padState.drawing) return;
+                const rect = canvas.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                ctx.beginPath();
+                ctx.moveTo(padState.lastX, padState.lastY);
+                ctx.lineTo(x, y);
+                ctx.stroke();
+                padState.lastX = x;
+                padState.lastY = y;
+            }
+
+            function end() {
+                padState.drawing = false;
+            }
+
+            canvas.onpointerdown = start;
+            canvas.onpointermove = move;
+            canvas.onpointerup = end;
+            canvas.onpointerleave = end;
+
+            pointerPads.set(canvasId, { ctx, canvas });
+        },
+        clearSignaturePad: (canvasId) => {
+            const pad = pointerPads.get(canvasId);
+            if (!pad) return;
+            pad.ctx.clearRect(0, 0, pad.canvas.width, pad.canvas.height);
+        },
+        getSignatureDataUrl: (canvasId) => {
+            const pad = pointerPads.get(canvasId);
+            if (!pad) return null;
+            return pad.canvas.toDataURL('image/png');
+        }
+    };
+})();

EnvelopeGenerator.sln

@@ -39,6 +39,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "EnvelopeGenerator.PdfEditor
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "EnvelopeGenerator.ReceiverUI", "EnvelopeGenerator.ReceiverUI\EnvelopeGenerator.ReceiverUI.csproj", "{34AF8679-E8AF-4AB6-B861-53ED241B1228}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "EnvelopeGenerator.ReceiverUIBlazor", "EnvelopeGenerator.ReceiverUIBlazor\EnvelopeGenerator.ReceiverUIBlazor.csproj", "{7F262AD4-53B1-42D3-9A5F-132CF50F150C}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -97,6 +99,10 @@ Global
 		{34AF8679-E8AF-4AB6-B861-53ED241B1228}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{34AF8679-E8AF-4AB6-B861-53ED241B1228}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{34AF8679-E8AF-4AB6-B861-53ED241B1228}.Release|Any CPU.Build.0 = Release|Any CPU
+		{7F262AD4-53B1-42D3-9A5F-132CF50F150C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{7F262AD4-53B1-42D3-9A5F-132CF50F150C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{7F262AD4-53B1-42D3-9A5F-132CF50F150C}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{7F262AD4-53B1-42D3-9A5F-132CF50F150C}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -118,6 +124,7 @@ Global
 		{6D56C01F-D6CB-4D8A-BD3D-4FD34326998C} = {E3C758DC-914D-4B7E-8457-0813F1FDB0CB}
 		{211619F5-AE25-4BA5-A552-BACAFE0632D3} = {9943209E-1744-4944-B1BA-4F87FC1A0EEB}
 		{34AF8679-E8AF-4AB6-B861-53ED241B1228} = {E3C758DC-914D-4B7E-8457-0813F1FDB0CB}
+		{7F262AD4-53B1-42D3-9A5F-132CF50F150C} = {E3C758DC-914D-4B7E-8457-0813F1FDB0CB}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {73E60370-756D-45AD-A19A-C40A02DACCC7}