@verdocs/web-sdk 6.5.0-beta.2 → 6.5.0-beta.21

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -1,14 +1,42 @@
 import { Host, Fragment, h } from "@stencil/core";
+import { uploadEnvelopeFieldAttachment, VerdocsEndpoint, getEnvelopeDocumentDownloadLink, getEnvelopesZip } from "@verdocs/js-sdk";
 import { askQuestion, DEFAULT_DISCLOSURES, integerSequence, isFieldFilled, isFieldValid } from "@verdocs/js-sdk";
-import { uploadEnvelopeFieldAttachment, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { verifySigner } from "@verdocs/js-sdk";
 import { fullNameToInitials, startSigningSession, deleteEnvelopeFieldAttachment, formatFullName } from "@verdocs/js-sdk";
 import { updateEnvelopeField, sortFields, delegateRecipient } from "@verdocs/js-sdk";
 import { createInitials, createSignature, envelopeRecipientAgree, envelopeRecipientDecline, envelopeRecipientSubmit } from "@verdocs/js-sdk";
-import { getFieldId, renderDocumentField, renderDocumentFlag, saveAttachment, updateDocumentFieldValue, defaultHeight } from "../../../utils/utils";
+import { getFieldId, renderDocumentField, renderDocumentFlag, updateDocumentFieldValue, defaultHeight } from "../../../utils/utils";
+import { DocumentPageIcon } from "../../../utils/Icons";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
 import { Store } from "../../../utils/Datastore";
+const ToolbarMinusIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 8C11.2761 8 11.5 8.22386 11.5 8.5C11.5 8.77614 11.2761 9 11 9H6C5.72386 9 5.5 8.77614 5.5 8.5C5.5 8.22386 5.72386 8 6 8H11ZM14 8.5C14 5.46243 11.5376 3 8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C9.83879 14 11.0659 13.5217 12.0196 12.7266L16.1464 16.8536L16.2157 16.9114C16.4106 17.0464 16.68 17.0271 16.8536 16.8536C17.0488 16.6583 17.0488 16.3417 16.8536 16.1464L12.7266 12.0196C13.5217 11.0659 14 9.83879 14 8.5ZM4 8.5C4 6.01472 6.01472 4 8.5 4C10.9853 4 13 6.01472 13 8.5C13 10.9853 10.9853 13 8.5 13C6.01472 13 4 10.9853 4 8.5Z" fill="#424242" /></svg>`;
+const ToolbarPlusIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 8.5C11.5 8.22386 11.2761 8 11 8H9V6C9 5.72386 8.77614 5.5 8.5 5.5C8.22386 5.5 8 5.72386 8 6V8H6C5.72386 8 5.5 8.22386 5.5 8.5C5.5 8.77614 5.72386 9 6 9H8V11C8 11.2761 8.22386 11.5 8.5 11.5C8.77614 11.5 9 11.2761 9 11V9H11C11.2761 9 11.5 8.77614 11.5 8.5ZM8.5 3C11.5376 3 14 5.46243 14 8.5C14 9.83879 13.5217 11.0659 12.7266 12.0196L16.8536 16.1464C17.0488 16.3417 17.0488 16.6583 16.8536 16.8536C16.68 17.0271 16.4106 17.0464 16.2157 16.9114L16.1464 16.8536L12.0196 12.7266C11.0659 13.5217 9.83879 14 8.5 14C5.46243 14 3 11.5376 3 8.5C3 5.46243 5.46243 3 8.5 3ZM8.5 4C6.01472 4 4 6.01472 4 8.5C4 10.9853 6.01472 13 8.5 13C10.9853 13 13 10.9853 13 8.5C13 6.01472 10.9853 4 8.5 4Z" fill="#424242" /></svg>`;
+const ToolbarDownloadIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 16.9988C15.7761 16.9988 16 17.2226 16 17.4988C16 17.7442 15.8231 17.9484 15.5899 17.9907L15.5 17.9988H4.5C4.22386 17.9988 4 17.7749 4 17.4988C4 17.2533 4.17688 17.0492 4.41012 17.0068L4.5 16.9988H15.5ZM10.0001 2.00098C10.2456 2.00098 10.4497 2.17798 10.492 2.41124L10.5 2.50112L10.496 14.295L14.1414 10.6466C14.3148 10.4729 14.5842 10.4534 14.7792 10.5882L14.8485 10.646C15.0222 10.8194 15.0418 11.0888 14.907 11.2838L14.8492 11.3531L10.3574 15.8531C10.285 15.9257 10.1957 15.9714 10.1021 15.9901L9.99608 15.9999C9.83511 15.9999 9.69192 15.9237 9.60051 15.8056L5.14386 11.3537C4.94846 11.1586 4.94823 10.842 5.14336 10.6466C5.3168 10.4729 5.58621 10.4534 5.78117 10.5883L5.85046 10.6461L9.496 14.287L9.5 2.50083C9.50008 2.22469 9.724 2.00098 10.0001 2.00098Z" fill="#424242"/></svg>`;
+const ToolbarPrintIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4.5C5 3.67157 5.67157 3 6.5 3H13.5C14.3284 3 15 3.67157 15 4.5V5H15.5C16.8807 5 18 6.11929 18 7.5V12.5C18 13.3284 17.3284 14 16.5 14H15V15.5C15 16.3284 14.3284 17 13.5 17H6.5C5.67157 17 5 16.3284 5 15.5V14H3.5C2.67157 14 2 13.3284 2 12.5V7.5C2 6.11929 3.11929 5 4.5 5H5V4.5ZM6 5H14V4.5C14 4.22386 13.7761 4 13.5 4H6.5C6.22386 4 6 4.22386 6 4.5V5ZM5 13V11.5C5 10.6716 5.67157 10 6.5 10H13.5C14.3284 10 15 10.6716 15 11.5V13H16.5C16.7761 13 17 12.7761 17 12.5V7.5C17 6.67157 16.3284 6 15.5 6H4.5C3.67157 6 3 6.67157 3 7.5V12.5C3 12.7761 3.22386 13 3.5 13H5ZM6.5 11C6.22386 11 6 11.2239 6 11.5V15.5C6 15.7761 6.22386 16 6.5 16H13.5C13.7761 16 14 15.7761 14 15.5V11.5C14 11.2239 13.7761 11 13.5 11H6.5Z" fill="#424242"/></svg>`;
+/**
+ * Helper to generate a human-readable label for a field.
+ */
+const getFieldLabel = (field) => {
+    if (!field)
+        return '';
+    const typeMap = {
+        signature: 'Signature',
+        initial: 'Initials',
+        date: 'Date',
+        textbox: 'Text Field',
+        checkbox: 'Checkbox',
+        radio: 'Radio Button',
+        dropdown: 'Dropdown',
+        attachment: 'Attachment',
+        payment: 'Payment',
+    };
+    const typeName = typeMap[field.type] || 'Field';
+    if (field.required) {
+        return `Required ${typeName}*`;
+    }
+    return `Optional ${typeName}`;
+};
 /**
  * Display an envelope signing experience. This will display the envelope's attached
  * documents with signing fields overlaid on each page.
@@ -64,8 +92,10 @@ export class VerdocsSign {
          * be externally controlled, use CSS display options to hide/show it instead.
          */
         this.headerTargetId = null;
-        // @State() roleNames: string[] = [];
-        // @State() sortedRecipients: IRecipient[] = [];
+        /**
+         * The style of the toolbar to display.
+         */
+        this.toolbarStyle = 'controls';
         this.recipient = null;
         this.hasSignature = false;
         this.nextButtonLabel = 'Start';
@@ -74,31 +104,39 @@ export class VerdocsSign {
         this.fatalErrorMessage = '';
         this.focusedField = '';
         this.disclosures = DEFAULT_DISCLOSURES;
+        this.fieldUpdateCounter = 0;
         this.submitting = false;
         this.submitted = false;
         this.isDone = false;
         this.showDone = false;
-        this.showAdoptSignature = false;
+        this.adoptingSignature = false;
         this.showLoadError = false;
         this.finishLater = false;
         this.showFinishLater = false;
         this.agreed = false;
+        this.signatureId = null;
+        this.initialId = null;
         this.documentsSingularPlural = 'document';
         this.authStep = null;
         this.authMethodStates = {};
+        this.pageNumber = 1;
         this.kbaQuestions = null;
         this.showSpinner = false;
+        // @State() fieldUpdateCounter = 0;
         this.declining = false;
         this.delegating = false;
         this.delegated = false;
-        this.startedSigning = false;
         this.kbaChoices = [];
+        this.showDownloadDialog = false;
         this.loading = true;
         this.envelope = null;
+        this.zoomLevel = 'normal';
         this.renderedPages = {};
     }
     async componentDidLoad() {
         var _a, _b, _c, _d, _e, _f;
+        this.updateZoomFromWindow();
+        window.addEventListener('resize', () => this.updateZoomFromWindow());
         if (!this.envelopeId) {
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError('[SIGN] Missing required envelopId', 500, ''));
             return;
@@ -117,6 +155,12 @@ export class VerdocsSign {
             // session and might have a different "view" of the envelope.
             const response = await startSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
             this.processAuthResponse(response);
+            const fillable = this.getSortedFillableFields();
+            if (fillable.length > 0) {
+                setTimeout(() => {
+                    this.focusedField = fillable[0].name;
+                }, 500);
+            }
         }
         catch (e) {
             console.log('[SIGN] Error with signing session', e);
@@ -132,17 +176,70 @@ export class VerdocsSign {
             headerEl.remove();
             headerTarget.append(headerEl);
         }
+        this.setupIntersectionObserver();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        window.removeEventListener('resize', () => this.updateZoomFromWindow());
+    }
+    updateZoomFromWindow() {
+        const width = window.innerWidth;
+        if (width < 768) {
+            if (this.zoomLevel !== 'zoom2')
+                this.zoomLevel = 'zoom2';
+        }
+        else if (width < 1024) {
+            if (this.zoomLevel !== 'zoom1')
+                this.zoomLevel = 'zoom1';
+        }
+        else {
+            if (this.zoomLevel !== 'normal')
+                this.zoomLevel = 'normal';
+        }
+    }
+    setupIntersectionObserver() {
+        // We only want to set this up once the elements exist
+        const pages = this.el.querySelectorAll('verdocs-envelope-document-page');
+        if (pages.length === 0)
+            return;
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        const container = this.el.querySelector('.signed-document-container');
+        const options = {
+            root: container,
+            rootMargin: '-40% 0px -40% 0px', // Helper to trigger when the middle 20% is visible
+            threshold: 0,
+        };
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const pageId = entry.target.id; // page-1
+                    const pageNum = parseInt(pageId.replace('page-', ''), 10);
+                    if (!isNaN(pageNum) && this.pageNumber !== pageNum) {
+                        // console.log('[SIGN] Updated page number via scroll', pageNum);
+                        this.pageNumber = pageNum;
+                    }
+                }
+            });
+        }, options);
+        pages.forEach(page => this.observer.observe(page));
     }
     processAuthResponse(response) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { envelope, recipient } = response;
+        // TODO: Temporary fix for multi-doc ordering until the server-side ordering is fixed
+        (_a = envelope.documents) === null || _a === void 0 ? void 0 : _a.sort((a, b) => (a.order !== b.order ? b.order - a.order : b.created_at.localeCompare(a.created_at)));
         const { auth_step } = recipient;
         this.recipient = recipient;
         this.envelope = envelope;
-        this.disclosures = ((_b = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.organization) === null || _b === void 0 ? void 0 : _b.disclaimer) || DEFAULT_DISCLOSURES;
+        this.disclosures = ((_c = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.organization) === null || _c === void 0 ? void 0 : _c.disclaimer) || DEFAULT_DISCLOSURES;
         this.authStep = auth_step;
         this.delegated = !!recipient.delegated_to;
         this.agreed = recipient.agreed;
+        this.signatureId = ((_e = (_d = response.signatures) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.id) || null;
+        this.initialId = ((_g = (_f = response.initials) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.id) || null;
         this.submitted = recipient.status === 'submitted';
         this.loading = false;
         this.isDone = this.submitted;
@@ -172,7 +269,7 @@ export class VerdocsSign {
             this.nextButtonLabel = 'Next';
         }
         this.checkRecipientFields();
-        (_c = this.envelopeLoaded) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope });
+        (_h = this.envelopeLoaded) === null || _h === void 0 ? void 0 : _h.emit({ endpoint: this.endpoint, envelope: this.envelope });
     }
     handleClickAgree() {
         this.submitting = true;
@@ -194,8 +291,23 @@ export class VerdocsSign {
             this.submitting = false;
         });
     }
+    handlePageSelect(e) {
+        const pageNumber = parseInt(e.target.value);
+        if (!isNaN(pageNumber)) {
+            this.pageNumber = pageNumber;
+            // We manually scroll the container to the top of the page element.
+            // This avoids issues where the page might be nested or scrollIntoView behaves unexpectedly.
+            const container = this.el.querySelector('.signed-document-container');
+            const pageEl = this.el.querySelector(`#page-${pageNumber}`);
+            if (container && pageEl) {
+                // 20px buffer for visual spacing
+                const top = pageEl.offsetTop - 20;
+                container.scrollTo({ top, behavior: 'smooth' });
+            }
+        }
+    }
     async handleOptionSelected(e) {
-        var _a, _b, _c;
+        var _a, _b;
         switch (e.detail.id) {
             case 'later':
                 this.finishLater = true;
@@ -213,19 +325,26 @@ export class VerdocsSign {
                 (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'printed' });
                 break;
             case 'download':
-                {
-                    const firstDoc = this.envelope.documents.find(doc => doc.type === 'attachment');
-                    if (firstDoc) {
-                        saveAttachment(this.endpoint, this.envelope, firstDoc.id).catch(e => {
-                            VerdocsToast('Unable to download PDF, please try again later', { style: 'error' });
-                            console.log('[SIGN] Error downloading PDF', e);
-                        });
-                        (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
-                    }
-                }
+                this.showDownloadDialog = true;
                 break;
         }
     }
+    handleZoomIn() {
+        if (this.zoomLevel === 'normal') {
+            this.zoomLevel = 'zoom1';
+        }
+        else if (this.zoomLevel === 'zoom1') {
+            this.zoomLevel = 'zoom2';
+        }
+    }
+    handleZoomOut() {
+        if (this.zoomLevel === 'zoom1') {
+            this.zoomLevel = 'normal';
+        }
+        else if (this.zoomLevel === 'zoom2') {
+            this.zoomLevel = 'zoom1';
+        }
+    }
     updateRecipientFieldValue(fieldName, updateResult) {
         console.log('[SIGN] updateRecipientFieldValue', fieldName, updateResult);
         this.getRecipientFields().forEach(oldField => {
@@ -234,6 +353,7 @@ export class VerdocsSign {
                 // TODO: Keeping this while attachments still rely on it
                 oldField.settings = updateResult.settings;
                 updateDocumentFieldValue(oldField);
+                this.fieldUpdateCounter++;
                 this.checkRecipientFields();
             }
         });
@@ -284,15 +404,35 @@ export class VerdocsSign {
                 // This can be caused by a focus-out event if the user clicks the field
                 // after it's already filled in, then clicks something else like a textbox.
                 // We don't visually indicate the focus, but it's still there.
-                if (!e.detail) {
+                // NOTE: We now allow null to clear the field
+                if (e.detail === undefined) {
                     return;
                 }
+                if (e.detail === null) {
+                    console.log('[SIGN] Clearing initial');
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, null, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If we already have an initials block, apply it
+                if (this.initialId) {
+                    console.log('[SIGN] Reusing initial', this.initialId);
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.initialId, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If it's a UUID, it's an existing initial ID we can just reuse
+                if (typeof e.detail === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(e.detail)) {
+                    console.log('[SIGN] Reusing initial', e.detail);
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail, false);
+                    this.initialId = e.detail;
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
                 this.showSpinner = true;
                 const initialsBlob = await (await fetch(e.detail)).blob();
                 return createInitials(this.endpoint, 'initial', initialsBlob) //
                     .then(async (newInitials) => {
                     const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, newInitials.id, false);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.initialId = newInitials.id;
                     this.showSpinner = false;
                 })
                     .catch(e => {
@@ -304,16 +444,37 @@ export class VerdocsSign {
                 // This can be caused by a focus-out event if the user clicks the field
                 // after it's already filled in, then clicks something else like a textbox.
                 // We don't visually indicate the focus, but it's still there.
-                if (!e.detail) {
+                // NOTE: We now allow null to clear the field
+                if (e.detail === undefined) {
                     return;
                 }
+                if (e.detail === null) {
+                    console.log('[SIGN] Clearing signature');
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, null, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If we already have a signature block, apply it
+                if (this.signatureId) {
+                    console.log('[SIGN] Reusing signature', this.signatureId);
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.signatureId, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If it's a UUID, it's an existing signature ID we can just reuse
+                if (typeof e.detail === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(e.detail)) {
+                    console.log('[SIGN] Reusing signature', e.detail);
+                    const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail, false);
+                    this.signatureId = e.detail;
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
                 this.showSpinner = true;
                 const signatureBlob = await (await fetch(e.detail)).blob();
+                console.log('[SIGN] Creating new signature');
                 return createSignature(this.endpoint, 'signature', signatureBlob) //
                     .then(async (newSignature) => {
                     console.log('Signature update result', newSignature);
                     const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, newSignature.id, false);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.signatureId = newSignature.id;
                     this.showSpinner = false;
                 })
                     .catch(e => {
@@ -336,72 +497,34 @@ export class VerdocsSign {
         }
     }
     getSortedFillableFields() {
-        const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp');
+        const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp' && !field.readonly);
         sortFields(recipientFields);
         return recipientFields;
     }
-    async handleNext() {
+    handleNext() {
         var _a;
         if (this.nextSubmits) {
             try {
                 // Patches the date picker to be forcibly removed if still showing during submission
                 (_a = document.getElementById('air-datepicker-global-container')) === null || _a === void 0 ? void 0 : _a.remove();
                 this.submitting = true;
-                const result = await envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
+                const result = envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
                 console.log('[SIGN] Submitted successfully', result);
                 // TODO: The "proper" way is generating an error from Stencil
                 //  NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which
                 //  the new node is to be inserted is not a child of this node.
                 window.location.reload();
-                // this.recipient.status = 'submitted';
-                // this.showDone = true;
-                // console.log('[SIGN] Reloading envelope');
-                // getEnvelope(this.endpoint, this.envelopeId)
-                //   .then(envelope => {
-                //     this.envelope = envelope;
-                //     // The show-done dialog does this
-                //     // this.isDone = true;
-                //     this.submitting = false;
-                //   })
-                //   .catch(e => {
-                //     // this.isDone = true;
-                //     console.log('[SIGN] Error reloading envelope', e);
-                //     VerdocsToast('Unable to save changes, please try again later', {style: 'error'});
-                //     this.submitting = false;
-                //   });
             }
             catch (e) {
                 console.log('[SIGN] Error submitting', e);
             }
             return;
         }
-        // Find and focus the next incomplete field (that is fillable)
-        const emptyFields = this.getSortedFillableFields().filter(field => field.required && !isFieldFilled(field, this.getRecipientFields()));
-        sortFields(emptyFields);
-        const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
-        let nextFocusedIndex = focusedIndex + 1;
-        if (nextFocusedIndex >= emptyFields.length) {
-            nextFocusedIndex = 0;
-        }
-        let nextRequiredField = emptyFields[nextFocusedIndex];
-        // console.log('Next field', nextRequiredField, emptyFields);
-        // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
-        let skips = 0;
-        if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ['initialed', 'signed'].includes(nextRequiredField.value)) {
-            skips++;
-            nextFocusedIndex++;
-            if (nextFocusedIndex >= emptyFields.length) {
-                nextFocusedIndex = 0;
-            }
-            nextRequiredField = emptyFields[nextFocusedIndex];
-        }
-        if (skips >= emptyFields.length) {
-            nextRequiredField = null;
-        }
+        const nextRequiredField = this.getNextRequiredField();
         if (nextRequiredField) {
             const id = getFieldId(nextRequiredField);
             const el = document.getElementById(id);
-            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth' });
+            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
             el === null || el === void 0 ? void 0 : el.focusField();
             this.focusedField = nextRequiredField.name;
         }
@@ -426,14 +549,32 @@ export class VerdocsSign {
         this.updateAllFlags();
     }
     getNextRequiredField() {
+        // Find and focus the next incomplete field (that is fillable)
         const emptyFields = this.getSortedFillableFields().filter(field => field.required && !isFieldFilled(field, this.getRecipientFields()));
         sortFields(emptyFields);
-        const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
+        // console.log(
+        //   '[SIGN] Pending fields',
+        //   emptyFields.map(f => `${f.name} (${f.type}) req=${f.required}`),
+        // );
+        if (emptyFields.length === 0) {
+            const allUnfilled = this.getSortedFillableFields().filter(field => !isFieldFilled(field, this.getRecipientFields()));
+            sortFields(allUnfilled);
+            if (allUnfilled.length > 0) {
+                // If we are here, there are no required fields left, but there are optional ones.
+                return this.getNextFieldFromList(allUnfilled);
+            }
+            return null;
+        }
+        return this.getNextFieldFromList(emptyFields);
+    }
+    getNextFieldFromList(fields) {
+        const focusedIndex = fields.findIndex(field => field.name === this.focusedField);
         let nextFocusedIndex = focusedIndex + 1;
-        if (nextFocusedIndex >= emptyFields.length) {
+        if (nextFocusedIndex >= fields.length) {
             nextFocusedIndex = 0;
         }
-        return { index: nextFocusedIndex, field: emptyFields[nextFocusedIndex] };
+        // Note: isFieldFilled check above should handle 'initialed'/'signed'.
+        return fields[nextFocusedIndex];
     }
     handlePrev() {
         var _a;
@@ -449,12 +590,11 @@ export class VerdocsSign {
         }
     }
     updateAllFlags() {
-        Object.keys(this.renderedPages).forEach(pageNumber => {
-            this.updateFlagsForPage(Number(pageNumber));
+        Object.values(this.renderedPages).forEach(pageInfo => {
+            this.updateFlagsForPage(pageInfo);
         });
     }
-    updateFlagsForPage(pageNumber) {
-        const pageInfo = this.renderedPages[pageNumber];
+    updateFlagsForPage(pageInfo) {
         if (!pageInfo)
             return;
         const controlsDiv = document.getElementById(pageInfo.containerId + '-controls');
@@ -463,86 +603,38 @@ export class VerdocsSign {
         // Remove existing flags
         const existingFlags = controlsDiv.querySelectorAll('.verdocs-flag-instance');
         existingFlags.forEach(el => el.remove());
-        // Get fields for this page
-        const myFields = this.getRecipientFields().filter(f => f.document_id === pageInfo.documentId && f.page === pageNumber);
-        // Sort priority:
-        // 1. Vertical: Top to Bottom (Descending Y)
-        // 2. Horizontal: Left to Right (Ascending X) - for stability
-        myFields.sort((a, b) => {
-            if (Math.abs(b.y - a.y) > 1) {
-                return b.y - a.y;
-            }
-            return a.x - b.x;
-        });
-        // console.log('[SIGN] Sorted fields for page', pageNumber, myFields.map(f => `${f.name}:${f.y}`));
-        const flagGroups = [];
-        const FLAG_HEIGHT = 24;
-        myFields.forEach(field => {
-            if (flagGroups.length === 0) {
-                flagGroups.push([field]);
-                return;
-            }
-            const lastGroup = flagGroups[flagGroups.length - 1];
-            const lastField = lastGroup[lastGroup.length - 1];
-            // Compute rendered centers (pixels)
-            // Note: We need rescale logic here. Since we don't have the import, we'll replicate the simple math: val * scale
-            // assuming standard coordinate scaling.
-            const getCenterY = (f) => f.y * pageInfo.yScale + ((f.height || defaultHeight(f.type)) * pageInfo.yScale) / 2;
-            const lastCenter = getCenterY(lastField);
-            const currCenter = getCenterY(field);
-            const dist = Math.abs(lastCenter - currCenter);
-            // console.log(`[SIGN] Check overlap ${lastField.name} vs ${field.name}: dist=${dist} vs ${FLAG_HEIGHT}`, {lastCenter, currCenter});
-            // If centers are closer than Flag Height, they overlap visually.
-            if (dist < FLAG_HEIGHT) {
-                lastGroup.push(field);
-            }
-            else {
-                flagGroups.push([field]);
-            }
-        });
-        // console.log('[SIGN] Flag groups', flagGroups.map(g => g.map(f => f.name).join(',')));
-        flagGroups.forEach(group => {
-            // Priority: First Unfilled Required > First Unfilled Optional > First Next
-            let winner = group.find(f => f.required && !isFieldFilled(f, this.getRecipientFields()));
-            if (!winner) {
-                winner = group.find(f => !f.required && !isFieldFilled(f, this.getRecipientFields()));
-            }
-            if (!winner) {
-                // Fallback to first (Top-most) if all filled
-                winner = group[0];
-            }
-            if (winner) {
-                const isFilled = isFieldFilled(winner, this.getRecipientFields());
-                let variant = 'fill';
-                let label = 'FILL';
-                let showSkip = false;
-                if (isFilled) {
-                    variant = 'next';
-                    label = 'NEXT';
-                }
-                else {
-                    if (!winner.required) {
-                        showSkip = true;
-                    }
-                }
-                console.log('[SIGN] Render flag', winner.name, winner.y, winner.height);
-                renderDocumentFlag(pageInfo, winner.y, winner.height || defaultHeight(winner.type), {
-                    variant,
-                    label,
-                    showSkip,
-                    onSkip: () => {
-                        this.handleNext();
-                    },
-                    onClick: () => {
-                        var _a;
-                        const id = getFieldId(winner);
-                        const el = document.getElementById(id);
-                        el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
-                    },
-                });
+        let nextField = this.getNextRequiredField();
+        const focusedFieldObj = this.getRecipientFields().find(f => f.name === this.focusedField);
+        // If the currently focused field is unfilled, we should point the flag to IT, not the next one.
+        // getNextRequiredField() is designed for the "Next" button (skipping current), but the visual flag
+        // should guide the user to the current task if it's incomplete.
+        if (focusedFieldObj && !isFieldFilled(focusedFieldObj, this.getRecipientFields())) {
+            nextField = focusedFieldObj;
+        }
+        if (nextField && nextField.page === pageInfo.pageNumber && nextField.document_id === pageInfo.documentId) {
+            const variant = 'fill';
+            let label = 'FILL';
+            let showSkip = false;
+            if (!nextField.required) {
+                label = 'FILL';
+                showSkip = true; // Use the X to skip? Or just text? "Fill or Skip" implies maybe just text.
             }
-        });
+            renderDocumentFlag(pageInfo, nextField.y, nextField.height || defaultHeight(nextField.type), {
+                variant,
+                label,
+                showSkip,
+                onSkip: () => {
+                    this.handleNext();
+                },
+                onClick: () => {
+                    var _a;
+                    const id = getFieldId(nextField);
+                    const el = document.getElementById(id);
+                    el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
+                },
+            });
+        }
     }
     attachFieldAttributes(pageInfo, field, el) {
         // We can get called multiple times as rendering completes and it's hard to avoid that
@@ -603,14 +695,19 @@ export class VerdocsSign {
             }
         });
         el.addEventListener('focusout', e => {
-            // These field types trigger focusout as they're used, even without a value change
-            if (field.type !== 'dropdown' && field.type !== 'attachment') {
+            // These field types trigger focusout as they're used, even without a value change.
+            // Signature/Initial fields handle their own changes via fieldChange/adopt events, so we ignore focusout to prevent double-saves.
+            if (field.type !== 'dropdown' && field.type !== 'attachment' && field.type !== 'signature' && field.type !== 'initial') {
                 this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
             }
         });
         el.addEventListener('fieldChange', e => {
             this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
         });
+        el.addEventListener('adopt', () => {
+            this.focusedField = field.name;
+            this.adoptingSignature = true;
+        });
         el.setAttribute('templateid', this.envelope.template_id);
         el.setAttribute('fieldname', field.name);
         el.setAttribute('page', pageInfo.pageNumber);
@@ -619,15 +716,21 @@ export class VerdocsSign {
         const fullName = formatFullName(this.recipient);
         el.setAttribute('initials', fullNameToInitials(fullName));
         el.setAttribute('name', fullName);
+        if (this.signatureId) {
+            el.setAttribute('signatureid', this.signatureId);
+        }
+        if (this.initialId) {
+            el.setAttribute('initialid', this.initialId);
+        }
     }
     handlePageRendered(e) {
         const pageInfo = e.detail;
-        this.renderedPages[pageInfo.pageNumber] = pageInfo;
-        console.log('Page rendered', pageInfo);
+        this.renderedPages[`${pageInfo.documentId}:${pageInfo.pageNumber}`] = pageInfo;
+        // console.log('Page rendered', pageInfo);
         // NOTE: We don't filter on pageNumber here because we need the position in the
         // entire list to set the tabIndex.
         const recipientFields = this.getSortedFillableFields();
-        console.log('[SIGN] Rendering fields for page', pageInfo.pageNumber, recipientFields);
+        // console.log('[SIGN] Rendering fields for page', pageInfo.pageNumber, recipientFields);
         // First render the fields for the signer
         recipientFields
             .filter(field => field && field.document_id === pageInfo.documentId && field.page === pageInfo.pageNumber)
@@ -663,7 +766,7 @@ export class VerdocsSign {
             });
         });
         this.checkRecipientFields();
-        this.updateFlagsForPage(pageInfo.pageNumber);
+        this.updateFlagsForPage(pageInfo);
     }
     handleAuthenticateSigner(params) {
         console.log('[SIGN] Submitting authentication step', params);
@@ -673,19 +776,21 @@ export class VerdocsSign {
             this.processAuthResponse(r);
         })
             .catch(e => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             console.log('[SIGN] Error submitting authentication step', e);
-            if ((_c = (_b = (_a = e.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.includes('failed')) {
+            console.log((_a = e.response) === null || _a === void 0 ? void 0 : _a.data);
+            if ((_d = (_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.includes('failed')) {
                 this.fatalErrorHeader = 'Recipient Verification Failed';
                 this.fatalErrorMessage = 'We were unable to verify your identity. The sender has been notified.';
                 this.isDone = true;
             }
             else {
-                VerdocsToast(((_e = (_d = e.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error) || 'Unable to verify your identity. Please try again.', { style: 'error' });
+                VerdocsToast(((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) || 'Unable to verify your identity. Please try again.', { style: 'error' });
             }
         });
     }
     render() {
+        var _a, _b;
         if (this.showLoadError) {
             return (h(Host, null, h("verdocs-ok-dialog", { heading: "Unable to Start Signing", message: `Sorry, your invite code is invalid or has expired. Please check your email for an updated invitation, or contact the sender.`, buttonLabel: "OK", onNext: () => {
                     window.location.reload();
@@ -724,7 +829,7 @@ export class VerdocsSign {
                 } })));
         }
         if (this.declining) {
-            return (h("verdocs-ok-dialog", { heading: "Decline Signing Request", message: `If you decline to sign this request, you will not be able to sign again in the future. The envelope sender will be notified.`, buttonLabel: "OK", showCancel: true, onExit: () => (this.declining = false), onNext: () => {
+            return (h(Host, { class: "agreed" }, h("div", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("verdocs-ok-dialog", { heading: "Decline Signing Request", message: `If you decline to sign this request, you will not be able to sign again in the future. The envelope sender will be notified.`, buttonLabel: "OK", showCancel: true, onExit: () => (this.declining = false), onNext: () => {
                     envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId)
                         .then(r => {
                         console.log('[SIGN] Decline result', r);
@@ -734,13 +839,13 @@ export class VerdocsSign {
                         console.warn('[SIGN] Error declining signing session', e);
                         VerdocsToast('Unable to decline, please try again later', { style: 'error' });
                     });
-                } }));
+                } })));
         }
         if (!this.agreed) {
             return (h(Host, { class: "agreed" }, h("div", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("verdocs-disclosure-dialog", { disclosures: this.disclosures, delegator: this.recipient.delegator, onDelegate: () => (this.delegating = true), onDecline: () => (this.declining = true), onAccept: () => this.handleClickAgree() })));
         }
         if (this.authStep === 'passcode') {
-            return (h(Host, { class: "kba" }, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name))), h("div", { class: "document", style: { paddingTop: '15px' } }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), h("div", { class: "cover" }, h("div", { class: "kba" }, h("verdocs-kba-dialog", { mode: "text", step: 1, steps: 1, placeholder: "Enter your passcode...", helptitle: "Document is protected by a Passcode", helptext: "Please enter your Passcode to proceed. If you do not have one, please contact the sender.", label: "Passcode", onNext: e => this.handleAuthenticateSigner({ auth_method: 'passcode', code: e.detail }) })))));
+            return h("verdocs-passcode-dialog", { endpoint: this.endpoint, onNext: e => this.processAuthResponse(e.detail.response) });
         }
         if (this.authStep === 'email') {
             return (h("verdocs-otp-dialog", { endpoint: this.endpoint, method: "email", onNext: async (e) => {
@@ -793,17 +898,64 @@ export class VerdocsSign {
         invalidFields.length > 0
             ? console.log('[SIGN] Invalid fields remaining', invalidFields.map(field => field.name))
             : console.log('[SIGN] All field valid');
-        return (h(Host, null, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), (() => {
+        const totalPages = this.envelope.documents.reduce((acc, doc) => acc + doc.pages, 0);
+        const pageOptions = integerSequence(1, totalPages).map(p => ({ label: p.toString(), value: p.toString() }));
+        let globalPageCounter = 0;
+        return (h(Host, null, this.toolbarStyle === 'menu' && (h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls" }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), (() => {
+            // Dependencies: focusedField, fieldUpdateCounter (to force re-calc)
+            // console.log('[SIGN] Render progress', this.focusedField, this.fieldUpdateCounter);
+            // Calculate detailed progress
+            const allFields = this.getSortedFillableFields();
+            const recipientFields = this.getRecipientFields();
+            const isFilled = (f) => isFieldFilled(f, recipientFields) && (f.type !== 'dropdown' || !!f.value);
+            const requiredFields = allFields.filter(f => f.required);
+            const requiredRemaining = requiredFields.filter(f => !isFilled(f)).length;
+            const optionalFields = allFields.filter(f => !f.required);
+            const optionalRemaining = optionalFields.filter(f => !isFilled(f)).length;
+            const progress = {
+                required: {
+                    remaining: requiredRemaining,
+                    total: requiredFields.length,
+                },
+                optional: {
+                    remaining: optionalRemaining,
+                    total: optionalFields.length,
+                },
+            };
             const focusedFieldObj = this.getSortedFillableFields().find(f => f.name === this.focusedField);
-            return (h("verdocs-signing-progress", { mode: this.nextSubmits ? 'completed' : this.startedSigning ? 'signing' : 'start', current: Math.max(1, this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1), total: this.getSortedFillableFields().length, fieldLabel: (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.label) || (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.name) || '', fieldCompleted: focusedFieldObj ? !!isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
-                    this.startedSigning = true;
-                    this.handleNext();
+            const currentIndex = this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1;
+            const totalFields = this.getSortedFillableFields().length;
+            const remainingFields = this.getSortedFillableFields()
+                .filter(f => f.required && !isFilled(f))
+                .map(f => ({ name: f.name, type: f.type, required: f.required }));
+            console.log('[SIGN] Progress Debug:', {
+                allFields: allFields.length,
+                requiredFields: requiredFields.length,
+                requiredRemaining,
+                optionalFields: optionalFields.length,
+                optionalRemaining,
+                filledFields: recipientFields.filter(f => isFilled(f)).map(f => ({ name: f.name, type: f.type, val: f.value })),
+            });
+            let mode = 'start';
+            // We only consider the user to have started "signing" if they have filled out at least one *fillable* field.
+            // Readonly fields do not count.
+            const anyFieldFilled = requiredRemaining < requiredFields.length || optionalRemaining < optionalFields.length;
+            if (this.nextSubmits) {
+                mode = 'completed';
+            }
+            else if (anyFieldFilled) {
+                mode = 'signing';
+            }
+            return (h("verdocs-signing-progress", { mode: mode, current: Math.max(1, currentIndex), total: totalFields, remainingFields: remainingFields, progress: progress, fieldLabel: getFieldLabel(focusedFieldObj), fieldCompleted: focusedFieldObj ? !!isFilled(focusedFieldObj) : false, onStarted: () => {
+                    this.adoptingSignature = true;
+                    // this.handleNext();
                 }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
-        })(), h("div", { class: "document", style: { width: '64%', marginLeft: '260px' } }, (this.envelope.documents || []).map(envelopeDocument => {
+        })(), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
-            return (h(Fragment, null, pageNumbers.map(pageNumber => {
+            return (h(Fragment, null, this.envelope.documents.length > 1 && (h("div", { class: "document-separator" }, h("div", { innerHTML: DocumentPageIcon }), h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;
                 const pageSize = ((_a = envelopeDocument.page_sizes) === null || _a === void 0 ? void 0 : _a[pageNumber]) || { width: 612, height: 792 };
+                globalPageCounter++;
                 // In signing mode we show the original template page with all the recipient fields so we can show source formatting and
                 // where everything went. This is also a visual indicator when optional fields weren't filled in by previous actors, or
                 // future signers still need to act. Once we're "done" we flip to showing the envelope's documents which have the final
@@ -811,7 +963,7 @@ export class VerdocsSign {
                 // TODO: Confirm that a pure page-number match is good enough to find the matching template page. We need to make sure
                 //  we either don't reset our page numbers for additional attachments, or add match-on identifiers to work around that.
                 // console.log('tp', templatePage, page);
-                return (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: pageSize.width, virtualHeight: pageSize.height, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", layers: [
+                return (h("verdocs-envelope-document-page", { id: `page-${globalPageCounter}`, envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: pageSize.width, virtualHeight: pageSize.height, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", layers: [
                         { name: 'page', type: 'canvas' },
                         { name: 'controls', type: 'div' },
                     ] }));
@@ -822,11 +974,93 @@ export class VerdocsSign {
             } })), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
                 this.showDone = false;
                 this.isDone = true;
-            } })), this.showAdoptSignature && (h("verdocs-adopt-signature-dialog", { onNext: () => {
-                this.showAdoptSignature = false;
-            }, onExit: () => {
-                this.showAdoptSignature = false;
-            } })), (this.submitting || this.showSpinner) && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null)))), !this.loading && !this.isDone && (h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, isDone: this.isDone, onAskQuestion: (e) => {
+            } })), this.adoptingSignature && (h("verdocs-adopt-signature-dialog", { name: formatFullName(this.recipient), onNext: async (e) => {
+                console.log('[SIGN] Adopting signature/initials block', e.detail);
+                this.showSpinner = true;
+                // These arrive as base-64 encoded data URLs
+                const signatureBlob = await (await fetch(e.detail.signature)).blob();
+                const initialsBlob = await (await fetch(e.detail.initials)).blob();
+                const sigResult = await createSignature(this.endpoint, 'signature', signatureBlob);
+                console.log('[SIGN] Created signature', sigResult);
+                this.signatureId = sigResult.id;
+                const initResult = await createInitials(this.endpoint, 'initial', initialsBlob);
+                console.log('[SIGN] Created initials', initResult);
+                this.initialId = initResult.id;
+                this.showSpinner = false;
+                this.adoptingSignature = false;
+                // If we have a focused field, we should auto-apply the new signature/initials to it
+                if (this.focusedField) {
+                    const field = this.getRecipientFields().find(f => f.name === this.focusedField);
+                    if (field) {
+                        console.log('[SIGN] Auto-applying adopted signature to focused field', field.name);
+                        if (field.type === 'signature') {
+                            const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.signatureId, false);
+                            this.updateRecipientFieldValue(field.name, updateResult);
+                        }
+                        else if (field.type === 'initial') {
+                            const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.initialId, false);
+                            this.updateRecipientFieldValue(field.name, updateResult);
+                        }
+                        this.checkRecipientFields();
+                    }
+                }
+            }, onExit: () => (this.adoptingSignature = false) })), (this.submitting || this.showSpinner) && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null)))), this.showDownloadDialog && (h("verdocs-download-dialog", { hasCertificate: (_b = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.documents) === null || _b === void 0 ? void 0 : _b.some(d => d.type === 'certificate'), onExit: () => (this.showDownloadDialog = false), onNext: async (e) => {
+                this.showDownloadDialog = false;
+                const { action } = e.detail;
+                console.log('[SIGN] Download action selected:', action);
+                try {
+                    if (action === 'document') {
+                        // Download main document(s)
+                        const attachments = this.envelope.documents.filter(d => d.type === 'attachment');
+                        if (attachments.length === 1) {
+                            const url = await getEnvelopeDocumentDownloadLink(this.endpoint, attachments[0].id);
+                            window.open(url, '_blank');
+                        }
+                        else {
+                            // If multiple docs, we might want to zip them or just download the first one for now as per previous logic?
+                            // The requirement says "Document", implies the PDF.
+                            // Users might have multiple files though.
+                            // For now let's just do the zip of everything if multiple? Or loop?
+                            // Let's stick to the previous behavior "firstDoc" strategy if we can't do better,
+                            // or use getEnvelopeDocumentDownloadLink for each?
+                            // Best user experience for "Document" if multiple is probably just the first one or a zip of docs.
+                            // But "All Files" covers zip.
+                            // Let's assume the main document is the primary intent.
+                            const firstDoc = attachments[0];
+                            if (firstDoc) {
+                                const url = await getEnvelopeDocumentDownloadLink(this.endpoint, firstDoc.id);
+                                window.open(url, '_blank');
+                            }
+                        }
+                    }
+                    else if (action === 'certificate') {
+                        const cert = this.envelope.documents.find(d => d.type === 'certificate');
+                        if (cert) {
+                            const url = await getEnvelopeDocumentDownloadLink(this.endpoint, cert.id);
+                            window.open(url, '_blank');
+                        }
+                        else {
+                            VerdocsToast('Certificate not yet available.', { style: 'info' });
+                        }
+                    }
+                    else if (action === 'zip') {
+                        // The helper in verdocs-view used getEnvelopesZip with an array
+                        const blob = await getEnvelopesZip(this.endpoint, [this.envelopeId]);
+                        const url = window.URL.createObjectURL(blob.data);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = `${this.envelope.name}.zip`;
+                        document.body.appendChild(a);
+                        a.click();
+                        a.remove();
+                        window.URL.revokeObjectURL(url);
+                    }
+                }
+                catch (err) {
+                    console.error('Download error', err);
+                    VerdocsToast('Unable to complete download request.', { style: 'error' });
+                }
+            } })), !this.loading && !this.isDone && (h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, isDone: this.isDone, onAskQuestion: (e) => {
                 askQuestion(this.endpoint, this.envelopeId, this.roleId, { question: e.detail.question })
                     .then(() => VerdocsToast('Your question has been sent.', { style: 'success' }))
                     .catch(e => {
@@ -870,7 +1104,7 @@ export class VerdocsSign {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "new VerdocsEndpoint({sessionType: 'signing'})"
+                "defaultValue": "new VerdocsEndpoint({ sessionType: 'signing' })"
             },
             "envelopeId": {
                 "type": "string",
@@ -951,6 +1185,26 @@ export class VerdocsSign {
                 "reflect": false,
                 "attribute": "header-target-id",
                 "defaultValue": "null"
+            },
+            "toolbarStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'controls' | 'menu'",
+                    "resolved": "\"controls\" | \"menu\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The style of the toolbar to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toolbar-style",
+                "defaultValue": "'controls'"
             }
         };
     }
@@ -964,27 +1218,32 @@ export class VerdocsSign {
             "fatalErrorMessage": {},
             "focusedField": {},
             "disclosures": {},
+            "fieldUpdateCounter": {},
             "submitting": {},
             "submitted": {},
             "isDone": {},
             "showDone": {},
-            "showAdoptSignature": {},
+            "adoptingSignature": {},
             "showLoadError": {},
             "finishLater": {},
             "showFinishLater": {},
             "agreed": {},
+            "signatureId": {},
+            "initialId": {},
             "documentsSingularPlural": {},
             "authStep": {},
             "authMethodStates": {},
+            "pageNumber": {},
             "kbaQuestions": {},
             "showSpinner": {},
             "declining": {},
             "delegating": {},
             "delegated": {},
-            "startedSigning": {},
             "kbaChoices": {},
+            "showDownloadDialog": {},
             "loading": {},
-            "envelope": {}
+            "envelope": {},
+            "zoomLevel": {}
         };
     }
     static get events() {
@@ -1020,7 +1279,7 @@ export class VerdocsSign {
                     "text": "Event fired when the envelope is loaded for the first time."
                 },
                 "complexType": {
-                    "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope}",
+                    "original": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope }",
                     "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; }",
                     "references": {
                         "VerdocsEndpoint": {
@@ -1046,7 +1305,7 @@ export class VerdocsSign {
                     "text": "Event fired when the envelope is updated in any way."
                 },
                 "complexType": {
-                    "original": "{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}",
+                    "original": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string }",
                     "resolved": "{ endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string; }",
                     "references": {
                         "VerdocsEndpoint": {
@@ -1063,5 +1322,6 @@ export class VerdocsSign {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=verdocs-sign.js.map