@verdocs/web-sdk 6.13.2 → 6.14.0

package/dist/esm/verdocs-pagination_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CjTHbolG.js';
 import { integerSequence } from '@verdocs/js-sdk';
-import { e as renderedTextWidth } from './utils-Bh3zb1Xs.js';
+import { e as renderedTextWidth } from './utils-T8dqWH7y.js';
 import { c as createPopper } from './popper-BfP9ezJQ.js';
 import './index-BglCURB-.js';
 import './Types-CIxfEdV7.js';

package/dist/esm/verdocs-preview_6.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-CjTHbolG.js';
 import { i as interact } from './interact.min-Bf1WXbdg.js';
 import { VerdocsEndpoint, getTemplate, integerSequence, getBrands, getOrganization, formatFullName, getOrganizationContacts, isValidEmail, createEnvelope, getRGBA, createTemplateDocument, deleteTemplateDocument, updateField, createField, updateTemplateRole, createTemplateRole } from '@verdocs/js-sdk';
-import { a as renderDocumentField, g as getFieldId, h as updateCssTransform, i as removeCssTransform, j as setControlStyles, d as defaultHeight, k as defaultWidth } from './utils-Bh3zb1Xs.js';
+import { a as renderDocumentField, g as getFieldId, h as setControlStyles, i as updateCssTransform, j as removeCssTransform, d as defaultHeight, k as defaultWidth } from './utils-T8dqWH7y.js';
 import { S as SDKError } from './errors-C1sRVZWv.js';
 import { S as Store } from './Datastore-C7hFgM52.js';
 import { D as DefaultEndpoint, g as getWebAppUrl } from './Environment-Cq60Emo_.js';
@@ -126,7 +126,7 @@ VerdocsPreview.style = verdocsPreviewCss();
 const getRoleNames = (template) => ((template === null || template === void 0 ? void 0 : template.roles) || []).map(role => role.name);
 const getRoleIndex = (template, role_name) => Math.max(getRoleNames(template).findIndex(name => name === role_name), 0);
 
-const verdocsSendCss = () => `verdocs-send{--send-ink:var(--verdocs-body-color, #111827);--send-ink-2:#374151;--send-muted:#6b7280;--send-faint:#9ca3af;--send-rule:#e5e7eb;--send-control-border:#d1d5db;--send-accent:var(--verdocs-link-color, #4c56cb);--send-accent-tint:#f4f5fc;--send-accent-tint-2:#e6e7f8;--send-warning-bg:#fffbeb;--send-warning-border:#fde68a;--send-warning-icon:#d97706;--send-warning-text:#78350f;--send-radius:var(--verdocs-dialog-radius, 8px);--send-min-height:480px;--send-max-width:480px;display:none;position:relative;overflow:hidden;width:100%;max-width:var(--verdocs-send-max-width, var(--send-max-width));-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;color:var(--send-ink);font-size:14px;border-radius:var(--send-radius);border:1px solid var(--send-rule);font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-send *{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-send.sendable{display:block}verdocs-send .track{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--send-min-height);-webkit-transition:-webkit-transform 220ms ease-out;transition:-webkit-transform 220ms ease-out;transition:transform 220ms ease-out;transition:transform 220ms ease-out, -webkit-transform 220ms ease-out}verdocs-send.detail-open .track{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@media (prefers-reduced-motion: reduce){verdocs-send .track{-webkit-transition:none;transition:none}}verdocs-send .pane{padding:16px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .main-pane{-ms-flex:1;flex:1}verdocs-send .detail-pane{position:absolute;top:0;left:100%;bottom:0;width:100%;overflow:hidden}verdocs-send .detail{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body-wrap{position:relative;-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body{-ms-flex:1;flex:1;min-height:0;overflow-y:auto}verdocs-send .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;pointer-events:none;-webkit-transition:opacity 150ms ease-out;transition:opacity 150ms ease-out;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(rgba(255, 255, 255, 0), #ffffff)}verdocs-send .scrollable:not(.at-end)>.scroll-fade{opacity:1}verdocs-send .recipient-detail verdocs-contact-picker{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .section-title{font-size:12px;font-weight:600;color:var(--send-ink-2);margin:0 0 6px 0}verdocs-send .delivery-title{margin-top:16px}verdocs-send .step{font-size:11px;color:var(--send-muted);padding:10px 0 4px 0}verdocs-send .recipient,verdocs-send .kv{all:unset;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;border-top:1px solid var(--send-rule);color:var(--send-ink);font-family:inherit}verdocs-send .recipient:focus-visible,verdocs-send .kv:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .recipient .chevron,verdocs-send .kv .chevron{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;color:var(--send-faint)}verdocs-send .recipient .chevron svg,verdocs-send .kv .chevron svg{width:16px;height:16px;display:block}verdocs-send .recipient{padding:8px 6px 8px 0}verdocs-send .recipient:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .recipient .who{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .recipient .role-name{font-size:13px;font-weight:600}verdocs-send .recipient .who-detail{font-size:12px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .recipient .who-detail.configure{color:var(--send-accent);font-weight:500}verdocs-send .recipient .options{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;margin-top:3px}verdocs-send .recipient .pill{height:18px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:500;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;background:var(--send-accent-tint);color:var(--send-ink-2)}verdocs-send .role-dot{-ms-flex:0 0 10px;flex:0 0 10px;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0, 0, 0, 0.1)}verdocs-send .kv{height:40px;padding:0 6px 0 0;font-size:13px}verdocs-send .kv:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .kv:disabled{cursor:default;color:var(--send-muted)}verdocs-send .kv .key{-ms-flex:0 0 84px;flex:0 0 84px;color:var(--send-muted)}verdocs-send .kv .value{-ms-flex:1;flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .kv .value small{font-size:inherit;font-weight:400;color:var(--send-muted)}verdocs-send .kv .value.off{color:var(--send-warning-icon)}verdocs-send .main-spacer,verdocs-send .detail-spacer{-ms-flex:1;flex:1}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:14px;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-send .buttons .error-message{width:100%;color:#cc0000;font-size:13px;margin-bottom:10px}verdocs-send .detail-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin:-2px 0 14px 0}verdocs-send .detail-header .back{all:unset;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--send-accent);font-family:inherit;-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-header .back .icon,verdocs-send .detail-header .back .icon svg{width:16px;height:16px;display:block}verdocs-send .detail-header .back:focus-visible{outline:2px solid var(--send-accent);outline-offset:2px;border-radius:4px}verdocs-send .detail-header .detail-title{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;font-size:14px;font-weight:600;text-align:center}verdocs-send .detail-header .detail-header-spacer{-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-footer{margin-top:10px;padding-top:12px;border-top:1px solid var(--send-rule)}verdocs-send .detail-footer verdocs-button,verdocs-send .detail-footer verdocs-button button{width:100%}verdocs-send .hint{font-size:12px;line-height:1.5;color:var(--send-muted);margin:10px 0 0 0}verdocs-send .option-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option{all:unset;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;padding:10px 0;font-size:13px;font-family:inherit;color:var(--send-ink);border-top:1px solid var(--send-rule)}verdocs-send .option:first-child{border-top:0}verdocs-send .option:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .option .radio{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1px solid var(--send-control-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-send .option.selected .radio{border-color:var(--send-accent)}verdocs-send .option.selected .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--send-accent)}verdocs-send .option .swatch{-ms-flex:0 0 22px;flex:0 0 22px;width:22px;height:22px;border-radius:5px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:9px;font-weight:700;color:#ffffff;overflow:hidden}verdocs-send .option .swatch.logo{background:#ffffff;border:1px solid var(--send-rule)}verdocs-send .option .swatch img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block}verdocs-send .option .option-label{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option .option-label small{font-size:11px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .option-divider{height:0;margin:2px 0;border-top:1px solid var(--send-control-border)}verdocs-send .option-divider+.option{border-top:0}verdocs-send .hint a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .hint a .icon,verdocs-send .hint a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send .expires-field{position:relative}verdocs-send .expires-field input{width:100%;height:36px;padding:0 52px 0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .expires-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .expires-field input::-webkit-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-moz-placeholder{color:var(--send-faint)}verdocs-send .expires-field input:-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::placeholder{color:var(--send-faint)}verdocs-send .expires-field .suffix{position:absolute;right:10px;top:0;height:36px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:13px;color:var(--send-muted);pointer-events:none}verdocs-send .sender-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:4px;margin:0 0 10px 0}verdocs-send .sender-field label{font-size:12px;font-weight:500;color:var(--send-ink-2)}verdocs-send .sender-field input{width:100%;height:36px;padding:0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .sender-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .sender-field .field-error{font-size:12px;color:#cc0000}verdocs-send .notice{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:4px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-ink-2);background:var(--send-accent-tint);border:1px solid var(--send-accent-tint-2)}verdocs-send .notice>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-accent)}verdocs-send .notice>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:12px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-warning-text);background:var(--send-warning-bg);border:1px solid var(--send-warning-border)}verdocs-send .warning>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-warning-icon)}verdocs-send .warning>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .warning a .icon,verdocs-send .warning a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send verdocs-checkbox{display:block;padding:4px 0;font-size:13px}`;
+const verdocsSendCss = () => `verdocs-send{--send-ink:var(--verdocs-body-color, #111827);--send-ink-2:#374151;--send-muted:#6b7280;--send-faint:#9ca3af;--send-rule:#e5e7eb;--send-control-border:#d1d5db;--send-accent:var(--verdocs-link-color, #4c56cb);--send-accent-tint:#f4f5fc;--send-accent-tint-2:#e6e7f8;--send-warning-bg:#fffbeb;--send-warning-border:#fde68a;--send-warning-icon:#d97706;--send-warning-text:#78350f;--send-radius:var(--verdocs-dialog-radius, 8px);--send-min-height:480px;--send-max-width:480px;display:none;position:relative;overflow:hidden;width:100%;min-width:0;max-width:var(--verdocs-send-max-width, var(--send-max-width));-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;color:var(--send-ink);font-size:14px;border-radius:var(--send-radius);border:1px solid var(--send-rule);font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-send *{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-send.sendable{display:block}verdocs-send .track{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--send-min-height);-webkit-transition:-webkit-transform 220ms ease-out;transition:-webkit-transform 220ms ease-out;transition:transform 220ms ease-out;transition:transform 220ms ease-out, -webkit-transform 220ms ease-out}verdocs-send.detail-open .track{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@media (prefers-reduced-motion: reduce){verdocs-send .track{-webkit-transition:none;transition:none}}verdocs-send .pane{padding:16px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .main-pane{-ms-flex:1;flex:1}verdocs-send .detail-pane{position:absolute;top:0;left:100%;bottom:0;width:100%;overflow:hidden}verdocs-send .detail{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body-wrap{position:relative;-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body{-ms-flex:1;flex:1;min-height:0;overflow-y:auto}verdocs-send .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;pointer-events:none;-webkit-transition:opacity 150ms ease-out;transition:opacity 150ms ease-out;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(rgba(255, 255, 255, 0), #ffffff)}verdocs-send .scrollable:not(.at-end)>.scroll-fade{opacity:1}verdocs-send .recipient-detail verdocs-contact-picker{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .section-title{font-size:12px;font-weight:600;color:var(--send-ink-2);margin:0 0 6px 0}verdocs-send .delivery-title{margin-top:16px}verdocs-send .step{font-size:11px;color:var(--send-muted);padding:10px 0 4px 0}verdocs-send .recipient,verdocs-send .kv{all:unset;display:-ms-flexbox;display:flex;width:100%;min-width:0;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;border-top:1px solid var(--send-rule);color:var(--send-ink);font-family:inherit}verdocs-send .recipient:focus-visible,verdocs-send .kv:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .recipient .chevron,verdocs-send .kv .chevron{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;color:var(--send-faint)}verdocs-send .recipient .chevron svg,verdocs-send .kv .chevron svg{width:16px;height:16px;display:block}verdocs-send .recipient{padding:8px 6px 8px 0}verdocs-send .recipient:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .recipient .who{-ms-flex:1;flex:1;width:0;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .recipient .role-name{font-size:13px;font-weight:600}verdocs-send .recipient .who-detail{font-size:12px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .recipient .who-detail.configure{color:var(--send-accent);font-weight:500}verdocs-send .recipient .options{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;margin-top:3px}verdocs-send .recipient .pill{height:18px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:500;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;background:var(--send-accent-tint);color:var(--send-ink-2)}verdocs-send .role-dot{-ms-flex:0 0 10px;flex:0 0 10px;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0, 0, 0, 0.1)}verdocs-send .kv{height:40px;padding:0 6px 0 0;font-size:13px}verdocs-send .kv:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .kv:disabled{cursor:default;color:var(--send-muted)}verdocs-send .kv .key{-ms-flex:0 0 84px;flex:0 0 84px;color:var(--send-muted)}verdocs-send .kv .value{-ms-flex:1;flex:1;width:0;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .kv .value small{font-size:inherit;font-weight:400;color:var(--send-muted)}verdocs-send .kv .value.stacked{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:1px;white-space:normal}verdocs-send .kv .value.stacked .line{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .kv .value.stacked small.line{font-size:12px}verdocs-send .kv .value.off{color:var(--send-warning-icon)}verdocs-send .kv:has(.value.stacked){height:auto;min-height:40px;padding-top:6px;padding-bottom:6px}verdocs-send .main-spacer,verdocs-send .detail-spacer{-ms-flex:1;flex:1}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:14px;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-send .buttons .error-message{width:100%;color:#cc0000;font-size:13px;margin-bottom:10px}verdocs-send .detail-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin:-2px 0 14px 0}verdocs-send .detail-header .back{all:unset;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--send-accent);font-family:inherit;-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-header .back .icon,verdocs-send .detail-header .back .icon svg{width:16px;height:16px;display:block}verdocs-send .detail-header .back:focus-visible{outline:2px solid var(--send-accent);outline-offset:2px;border-radius:4px}verdocs-send .detail-header .detail-title{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;font-size:14px;font-weight:600;text-align:center}verdocs-send .detail-header .detail-header-spacer{-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-footer{margin-top:10px;padding-top:12px;border-top:1px solid var(--send-rule)}verdocs-send .detail-footer verdocs-button,verdocs-send .detail-footer verdocs-button button{width:100%}verdocs-send .hint{font-size:12px;line-height:1.5;color:var(--send-muted);margin:10px 0 0 0}verdocs-send .option-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option{all:unset;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;padding:10px 0;font-size:13px;font-family:inherit;color:var(--send-ink);border-top:1px solid var(--send-rule)}verdocs-send .option:first-child{border-top:0}verdocs-send .option:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .option .radio{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1px solid var(--send-control-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-send .option.selected .radio{border-color:var(--send-accent)}verdocs-send .option.selected .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--send-accent)}verdocs-send .option .swatch{-ms-flex:0 0 22px;flex:0 0 22px;width:22px;height:22px;border-radius:5px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:9px;font-weight:700;color:#ffffff;overflow:hidden}verdocs-send .option .swatch.logo{background:#ffffff;border:1px solid var(--send-rule)}verdocs-send .option .swatch img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block}verdocs-send .option .option-label{-ms-flex:1;flex:1;width:0;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option .option-label small{font-size:11px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .option-divider{height:0;margin:2px 0;border-top:1px solid var(--send-control-border)}verdocs-send .option-divider+.option{border-top:0}verdocs-send .hint a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .hint a .icon,verdocs-send .hint a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send .expires-field{position:relative}verdocs-send .expires-field input{width:100%;height:36px;padding:0 52px 0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .expires-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .expires-field input::-webkit-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-moz-placeholder{color:var(--send-faint)}verdocs-send .expires-field input:-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::placeholder{color:var(--send-faint)}verdocs-send .expires-field .suffix{position:absolute;right:10px;top:0;height:36px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:13px;color:var(--send-muted);pointer-events:none}verdocs-send .sender-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:4px;margin:0 0 10px 0}verdocs-send .sender-field label{font-size:12px;font-weight:500;color:var(--send-ink-2)}verdocs-send .sender-field input{width:100%;height:36px;padding:0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .sender-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .sender-field .field-error{font-size:12px;color:#cc0000}verdocs-send .notice{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:4px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-ink-2);background:var(--send-accent-tint);border:1px solid var(--send-accent-tint-2)}verdocs-send .notice>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-accent)}verdocs-send .notice>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:12px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-warning-text);background:var(--send-warning-bg);border:1px solid var(--send-warning-border)}verdocs-send .warning>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-warning-icon)}verdocs-send .warning>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .warning a .icon,verdocs-send .warning a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send verdocs-checkbox{display:block;padding:4px 0;font-size:13px}`;
 
 const chevronRightIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></svg>';
 const chevronLeftIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>';
@@ -291,15 +291,11 @@ const VerdocsSend = class {
         this.senderName = '';
         this.senderEmail = '';
     }
-    // The sender_name defaults to the custom sender identity if configued/active, the brand
-    // next, and then the org name.
-    brandSenderName() {
-        var _a;
-        const brand = this.brandKey ? this.brands.find(b => b.key === this.brandKey) : this.getDefaultBrand();
-        return (brand === null || brand === void 0 ? void 0 : brand.email_display_name) || (brand === null || brand === void 0 ? void 0 : brand.email_sender_name) || ((_a = this.organization) === null || _a === void 0 ? void 0 : _a.name) || '';
-    }
+    // sender_name and sender_email are the contact for recipient questions and the completion
+    // notice. They default to the signed-in user and are only sent when edited away from that.
+    // The From line of the invitation email is the brand's (then the org's) and is not set here.
     effectiveSenderName() {
-        return this.senderName || this.brandSenderName();
+        return this.senderName || this.senderDefaults.name;
     }
     effectiveSenderEmail() {
         return this.senderEmail || this.senderDefaults.email;
@@ -308,7 +304,7 @@ const VerdocsSend = class {
         const name = this.senderName.trim();
         const email = this.senderEmail.trim();
         return {
-            sender_name: name && name !== this.brandSenderName() ? name : undefined,
+            sender_name: name && name !== this.senderDefaults.name ? name : undefined,
             sender_email: email && email !== this.senderDefaults.email ? email : undefined,
         };
     }
@@ -589,7 +585,7 @@ const VerdocsSend = class {
         return (h("div", { class: "detail" }, this.renderDetailHeader('Sender'), this.renderDetailBody([
             h("div", { class: "sender-field" }, h("label", { htmlFor: `${this.containerId}-sender-name` }, "Name"), h("input", { id: `${this.containerId}-sender-name`, type: "text", value: this.effectiveSenderName(), disabled: this.sending, onInput: (e) => (this.senderName = e.target.value) })),
             h("div", { class: "sender-field" }, h("label", { htmlFor: `${this.containerId}-sender-email` }, "Email"), h("input", { id: `${this.containerId}-sender-email`, type: "email", value: this.effectiveSenderEmail(), disabled: this.sending, onInput: (e) => (this.senderEmail = e.target.value) }), !validEmail && h("div", { class: "field-error" }, "Enter a valid email address.")),
-            h("div", { class: "notice" }, h("span", { class: "icon", innerHTML: infoIcon }), h("div", null, "The name is what recipients see as the sender, for example \"Sentry <notifications@verdocs.com>\", and starts as your brand's name. The email is where status updates about this envelope are sent and what the certificate shows as the sender. Delivery from your own address needs a custom sender set up under Settings.")),
+            h("div", { class: "notice" }, h("span", { class: "icon", innerHTML: infoIcon }), h("div", null, "Specify where envelope-completed email notifications and \"Ask a Question\" submissions are delivered. To customize the \"From\" address for email notifications, please configure those in", ' ', h("a", { href: `${getWebAppUrl(this.endpoint)}/settings/brands`, target: "_blank", rel: "noopener" }, "Brands", h("span", { class: "icon", innerHTML: externalLinkIcon })), ' ', ".")),
         ]), this.renderDoneButton()));
     }
     renderNotificationsView() {
@@ -638,7 +634,7 @@ const VerdocsSend = class {
                 const optionLabels = this.getRecipientOptionLabels(completed);
                 return (h("button", { type: "button", class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, onClick: e => this.handleClickRole(e, role) }, h("span", { class: "role-dot", style: { backgroundColor: getRGBA(roleIndex) } }), h("span", { class: "who" }, h("span", { class: "role-name" }, role.role_name), assigned ? (h("span", { class: "who-detail" }, formatFullName(completed), " \u00B7 ", completed.email)) : (h("span", { class: "who-detail configure" }, "Configure recipient")), optionLabels.length > 0 && (h("span", { class: "options" }, optionLabels.map(label => (h("span", { class: "pill" }, label)))))), h("span", { class: "chevron", innerHTML: chevronRightIcon })));
             }),
-        ])), h("div", { class: "section-title delivery-title" }, "Delivery"), h("div", { class: "delivery" }, h("button", { type: "button", class: "kv", onClick: () => this.showView('brand'), disabled: this.sending }, h("span", { class: "key" }, "Brand"), h("span", { class: "value" }, this.getSelectedBrandLabel()), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('expires'), disabled: this.sending }, h("span", { class: "key" }, "Expires"), h("span", { class: "value" }, this.effectiveExpiryDays(), " days ", h("small", null, "\u00B7 ", expiresShort)), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('sender'), disabled: this.sending }, h("span", { class: "key" }, "Sender"), h("span", { class: "value" }, this.effectiveSenderName() || this.effectiveSenderEmail(), this.effectiveSenderName() && this.effectiveSenderEmail() ? h("small", null, " \u00B7 ", this.effectiveSenderEmail()) : null), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('notifications'), disabled: this.sending }, h("span", { class: "key" }, "Notifications"), h("span", { class: { value: true, off: this.noContact } }, this.noContact ? 'Off' : 'On'), h("span", { class: "chevron", innerHTML: chevronRightIcon }))), h("div", { class: "main-spacer" }), h("div", { class: "buttons" }, hasDuplicateEmails && h("div", { class: "error-message" }, "Recipients cannot share the same email."), this.sending && h("verdocs-spinner", null), this.showCancel && h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending || hasDuplicateEmails, onClick: e => this.handleSend(e) }))), h("div", { class: "pane detail-pane", "aria-hidden": this.view === 'main' ? 'true' : 'false', onPointerDown: e => this.handleSwipeStart(e), onPointerUp: e => this.handleSwipeEnd(e), onPointerCancel: () => (this.swipeStart = null) }, this.renderDetail()))));
+        ])), h("div", { class: "section-title delivery-title" }, "Delivery"), h("div", { class: "delivery" }, h("button", { type: "button", class: "kv", onClick: () => this.showView('brand'), disabled: this.sending }, h("span", { class: "key" }, "Brand"), h("span", { class: "value" }, this.getSelectedBrandLabel()), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('expires'), disabled: this.sending }, h("span", { class: "key" }, "Expires"), h("span", { class: "value" }, this.effectiveExpiryDays(), " days ", h("small", null, "\u00B7 ", expiresShort)), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('sender'), disabled: this.sending }, h("span", { class: "key" }, "Sender"), h("span", { class: "value stacked" }, h("span", { class: "line" }, this.effectiveSenderName() || this.effectiveSenderEmail()), this.effectiveSenderName() && this.effectiveSenderEmail() ? h("small", { class: "line" }, this.effectiveSenderEmail()) : null), h("span", { class: "chevron", innerHTML: chevronRightIcon })), h("button", { type: "button", class: "kv", onClick: () => this.showView('notifications'), disabled: this.sending }, h("span", { class: "key" }, "Notifications"), h("span", { class: { value: true, off: this.noContact } }, this.noContact ? 'Off' : 'On'), h("span", { class: "chevron", innerHTML: chevronRightIcon }))), h("div", { class: "main-spacer" }), h("div", { class: "buttons" }, hasDuplicateEmails && h("div", { class: "error-message" }, "Recipients cannot share the same email."), this.sending && h("verdocs-spinner", null), this.showCancel && h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending || hasDuplicateEmails, onClick: e => this.handleSend(e) }))), h("div", { class: "pane detail-pane", "aria-hidden": this.view === 'main' ? 'true' : 'false', onPointerDown: e => this.handleSwipeStart(e), onPointerUp: e => this.handleSwipeEnd(e), onPointerCancel: () => (this.swipeStart = null) }, this.renderDetail()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -921,7 +917,7 @@ const VerdocsTemplateBuildTabs = class {
 };
 VerdocsTemplateBuildTabs.style = verdocsTemplateBuildTabsCss();
 
-const verdocsTemplateFieldsCss = () => `verdocs-template-fields{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);position:relative;display:block;min-height:600px}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .pages{display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .pages .document-separator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px;padding:12px 20px;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#33364b;color:white;border-radius:6px;font-size:16px;font-weight:500;margin-top:20px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}verdocs-template-fields .pages .document-separator svg{-ms-flex-negative:0;flex-shrink:0}verdocs-template-fields .pages .document-separator:first-child{margin-top:0}verdocs-template-fields #verdocs-template-fields-toolbar{width:100%;height:50px;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;font-weight:700;padding:0 20px 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#f5f5fa;-ms-flex-pack:center;justify-content:center;background:#46497d}verdocs-template-fields #verdocs-template-fields-toolbar>verdocs-select-input{margin:0}verdocs-template-fields #verdocs-template-fields-toolbar svg{width:24px;height:24px}verdocs-template-fields #verdocs-template-fields-toolbar .add-for{margin:0;font-weight:500;color:#f5f5fa}verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{margin:0 20px 0 0}@media all and (max-width: 1000px){verdocs-template-fields #verdocs-template-fields-toolbar{-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;padding:0 10px 0 0}verdocs-template-fields #verdocs-template-fields-toolbar svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-fields #verdocs-template-fields-toolbar .add-for,verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{display:none}}@media all and (max-width: 600px){verdocs-template-fields #verdocs-template-fields-toolbar{-webkit-column-gap:6px;-moz-column-gap:6px;column-gap:6px}verdocs-template-fields #verdocs-template-fields-toolbar svg{-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-template-fields #verdocs-template-fields-toolbar .separator,verdocs-template-fields #verdocs-template-fields-toolbar .add-for,verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{display:none}}verdocs-template-fields.placing-attachment{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-checkbox{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-date{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-dropdown{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25' /%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-initial{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-payment{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-radio{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-signature{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-textarea{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-textbox{cursor:url("data:image/svg+xml,%3Csvg width='32' height='15' viewBox='0 0 32 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_1401_24' fill='white'%3E%3Cpath d='M0 0H32V15H0V0Z'/%3E%3C/mask%3E%3Cpath d='M0 0H32V15H0V0Z' fill='%234C56CB' fill-opacity='0.1'/%3E%3Cpath d='M0 0V-1H-1V0H0ZM0 15H-1V16H0V15ZM0 1H32V-1H0V1ZM32 14H0V16H32V14ZM1 15V0H-1V15H1Z' fill='%234C56CB' mask='url(%23path-1-inside-1_1401_24)'/%3E%3Cpath d='M3 11.8V8.65H14.15V11.8H3ZM3 6.65V3.5H20.15V6.65H3Z' fill='%234C56CB'/%3E%3Cline x1='31.5' y1='1' x2='31.5' y2='14' stroke='%234C56CB' stroke-opacity='0.32' stroke-dasharray='1 1'/%3E%3C/svg%3E%0A") 0 14, pointer}verdocs-template-fields.placing-timestamp{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z'%3E%3C/path%3E%3C/svg%3E") 16 16, pointer}`;
+const verdocsTemplateFieldsCss = () => `verdocs-template-fields{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);position:relative;display:block;min-height:600px}verdocs-template-fields .verdocs-field-selected{outline:2px solid rgba(101, 77, 203, 0.75);outline-offset:1px}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .pages{display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .pages .document-separator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px;padding:12px 20px;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#33364b;color:white;border-radius:6px;font-size:16px;font-weight:500;margin-top:20px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}verdocs-template-fields .pages .document-separator svg{-ms-flex-negative:0;flex-shrink:0}verdocs-template-fields .pages .document-separator:first-child{margin-top:0}verdocs-template-fields #verdocs-template-fields-toolbar{width:100%;height:50px;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;font-weight:700;padding:0 20px 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#f5f5fa;-ms-flex-pack:center;justify-content:center;background:#46497d}verdocs-template-fields #verdocs-template-fields-toolbar>verdocs-select-input{margin:0}verdocs-template-fields #verdocs-template-fields-toolbar svg{width:24px;height:24px}verdocs-template-fields #verdocs-template-fields-toolbar .add-for{margin:0;font-weight:500;color:#f5f5fa}verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{margin:0 20px 0 0}@media all and (max-width: 1000px){verdocs-template-fields #verdocs-template-fields-toolbar{-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;padding:0 10px 0 0}verdocs-template-fields #verdocs-template-fields-toolbar svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-fields #verdocs-template-fields-toolbar .add-for,verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{display:none}}@media all and (max-width: 600px){verdocs-template-fields #verdocs-template-fields-toolbar{-webkit-column-gap:6px;-moz-column-gap:6px;column-gap:6px}verdocs-template-fields #verdocs-template-fields-toolbar svg{-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-template-fields #verdocs-template-fields-toolbar .separator,verdocs-template-fields #verdocs-template-fields-toolbar .add-for,verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{display:none}}verdocs-template-fields.placing-attachment{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-checkbox{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-date{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-dropdown{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25' /%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-initial{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-payment{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-radio{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-signature{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-textarea{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-textbox{cursor:url("data:image/svg+xml,%3Csvg width='32' height='15' viewBox='0 0 32 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_1401_24' fill='white'%3E%3Cpath d='M0 0H32V15H0V0Z'/%3E%3C/mask%3E%3Cpath d='M0 0H32V15H0V0Z' fill='%234C56CB' fill-opacity='0.1'/%3E%3Cpath d='M0 0V-1H-1V0H0ZM0 15H-1V16H0V15ZM0 1H32V-1H0V1ZM32 14H0V16H32V14ZM1 15V0H-1V15H1Z' fill='%234C56CB' mask='url(%23path-1-inside-1_1401_24)'/%3E%3Cpath d='M3 11.8V8.65H14.15V11.8H3ZM3 6.65V3.5H20.15V6.65H3Z' fill='%234C56CB'/%3E%3Cline x1='31.5' y1='1' x2='31.5' y2='14' stroke='%234C56CB' stroke-opacity='0.32' stroke-dasharray='1 1'/%3E%3C/svg%3E%0A") 0 14, pointer}verdocs-template-fields.placing-timestamp{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z'%3E%3C/path%3E%3C/svg%3E") 16 16, pointer}`;
 
 const iconTextbox = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
 const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
@@ -934,6 +930,11 @@ const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="
 const iconDropdown = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';
 const iconAttachment = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /></svg>';
 const separator = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.707 14.707"><g><rect x="6.275" y="0" fill="#ffffff7f" width="1" height="15"/></g></svg>';
+const GEOMETRY_KEYS = ['x', 'y', 'width', 'height', 'page', 'multiline'];
+// We save a burst of arrow-key nudges once the keys go quiet instead of on every press.
+const NUDGE_SAVE_DELAY_MS = 400;
+const MAX_UNDO = 50;
+const isTypingTarget = (el) => !!el && (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName) || el.isContentEditable);
 const menuOptions = [
     { id: 'signature', tooltip: 'Signature', icon: iconSignature, class: 'signature' },
     { id: 'initial', tooltip: 'Initials', icon: iconInitial, class: 'initial' },
@@ -979,24 +980,91 @@ const VerdocsTemplateFields = class {
         this.loading = true;
         this.template = null;
         this.pageHeights = {};
+        // Selection lives on the DOM (a class on the field element) so picking a field doesn't re-render every page.
+        this.selectedFieldName = null;
+        // Undo entries are recorded only once their save lands, so the stack never holds a change the server didn't take.
+        this.undoStack = [];
+        this.pendingNudge = null;
+        this.nudgeTimer = null;
+        this.dragBefore = null;
+        // Geometry we've sent but the server hasn't confirmed yet, so a new nudge or undo starts from where the field is drawn.
+        this.optimistic = new Map();
+        this.inFlight = new Set();
+        // Field components save their own resizes and announce them with settingsChanged; undo waits for that.
+        this.pendingResizes = new Map();
+        // Stable references so makeDraggable can re-bind them on every render without stacking duplicates.
+        this.handleFieldTap = (e) => { var _a, _b; return this.selectField(((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'fieldname')) || null); };
+        this.handleFieldResizeStart = (e) => {
+            var _a, _b;
+            const name = ((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'fieldname')) || null;
+            this.flushNudge();
+            this.selectField(name);
+            this.startResize(name);
+        };
         this.cachedPageInfo = {};
     }
     onTemplateIdChanged() {
         this.listenToTemplate();
     }
-    // Stop field-placement mode if ESC is pressed
+    // Escape clears placement and selection, arrows nudge the selected field (Shift for 10pt), and Cmd/Ctrl+Z undoes a move or resize.
     handleKeyDown(ev) {
+        var _a, _b;
         if (ev.key === 'Escape') {
             this.placing = null;
+            this.selectField(null);
+            return;
         }
+        // composedPath reaches inputs inside a host page's shadow DOM, where activeElement would only show the host.
+        const target = (((_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)[0]) || ev.target);
+        if (ev.defaultPrevented || isTypingTarget(target)) {
+            return;
+        }
+        // Keys pressed in a dialog, menu, or anything else outside the builder belong to that control.
+        if (target !== document.body && target !== document.documentElement && !this.el.contains(target)) {
+            return;
+        }
+        if ((ev.metaKey || ev.ctrlKey) && !ev.shiftKey && !ev.altKey && ev.key.toLowerCase() === 'z') {
+            if (this.pendingNudge || this.undoStack.length > 0 || this.inFlight.size > 0 || this.pendingResizes.size > 0) {
+                ev.preventDefault();
+                this.undo();
+            }
+            return;
+        }
+        const step = ev.shiftKey ? 10 : 1;
+        const delta = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, step], ArrowDown: [0, -step] }[ev.key];
+        if (!delta || !this.selectedFieldName || ev.metaKey || ev.ctrlKey || ev.altKey) {
+            return;
+        }
+        // Once the selected field has scrolled out of view, arrows go back to scrolling the page.
+        const field = this.findField(this.selectedFieldName);
+        const rect = field ? (_b = document.getElementById(getFieldId(field))) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect() : null;
+        if (!rect || rect.bottom < 0 || rect.top > window.innerHeight || rect.right < 0 || rect.left > window.innerWidth) {
+            this.selectField(null);
+            return;
+        }
+        ev.preventDefault();
+        this.nudge(delta[0], delta[1]);
     }
-    handleFieldSettingsChanged() {
+    handleFieldSettingsChanged(e) {
         var _a;
+        const { fieldName, field } = e.detail || {};
+        if (field && fieldName && field.name !== fieldName) {
+            this.renameFieldState(fieldName, field.name);
+        }
+        const resize = field ? this.pendingResizes.get(field.name) : null;
+        if (resize) {
+            this.recordUndo(field.name, resize.before, field);
+            resize.settle();
+        }
         (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'updated-field' });
     }
-    handleFieldDeleted() {
-        var _a;
-        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'deleted-field' });
+    handleFieldDeleted(e) {
+        var _a, _b;
+        const name = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.fieldName;
+        if (name) {
+            this.forgetField(name);
+        }
+        (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: this.template, event: 'deleted-field' });
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -1032,6 +1100,7 @@ const VerdocsTemplateFields = class {
             toolbarEl.remove();
             toolbarTarget.append(toolbarEl);
         }
+        this.applySelection();
     }
     componentWillUpdate() {
         var _a, _b;
@@ -1044,6 +1113,8 @@ const VerdocsTemplateFields = class {
     }
     disconnectedCallback() {
         this.unlistenToTemplate();
+        this.flushNudge();
+        this.selectField(null);
     }
     async listenToTemplate() {
         this.unlistenToTemplate();
@@ -1089,13 +1160,196 @@ const VerdocsTemplateFields = class {
         });
     }
     makeDraggable(el) {
-        interact(el).draggable({
+        interact(el)
+            .draggable({
             listeners: {
+                start: this.handleMoveStart.bind(this),
                 move: this.handleMoveField.bind(this),
                 end: this.handleMoveEnd.bind(this),
             },
+        })
+            .off('tap', this.handleFieldTap)
+            .on('tap', this.handleFieldTap)
+            .off('resizestart', this.handleFieldResizeStart)
+            .on('resizestart', this.handleFieldResizeStart);
+    }
+    findField(name) {
+        var _a;
+        return name ? (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).find(field => field.name === name) : undefined;
+    }
+    // Where the field is drawn right now: its saved geometry plus anything still on its way to the server.
+    currentGeometry(field) {
+        const { x, y, width, height, page, multiline } = { ...field, ...this.optimistic.get(field.name) };
+        return { x, y, width, height, page, multiline };
+    }
+    selectField(name) {
+        if (this.pendingNudge && this.pendingNudge.name !== name) {
+            this.flushNudge();
+        }
+        this.selectedFieldName = name;
+        this.applySelection();
+    }
+    applySelection() {
+        var _a;
+        document.querySelectorAll('.verdocs-field-selected').forEach(el => el.classList.remove('verdocs-field-selected'));
+        const field = this.findField(this.selectedFieldName);
+        if (field) {
+            (_a = document.getElementById(getFieldId(field))) === null || _a === void 0 ? void 0 : _a.classList.add('verdocs-field-selected');
+        }
+    }
+    recordUndo(name, before, after) {
+        if (GEOMETRY_KEYS.some(key => after[key] !== undefined && after[key] !== before[key])) {
+            this.undoStack.push({ name, before });
+            this.undoStack.splice(0, Math.max(0, this.undoStack.length - MAX_UNDO));
+        }
+    }
+    startResize(name) {
+        var _a;
+        const field = this.findField(name);
+        if (!field) {
+            return;
+        }
+        (_a = this.pendingResizes.get(field.name)) === null || _a === void 0 ? void 0 : _a.settle();
+        let settle;
+        const done = new Promise(resolve => (settle = resolve));
+        const entry = { before: this.currentGeometry(field), settle: () => settle(), done };
+        this.pendingResizes.set(field.name, entry);
+        // A failed resize never announces itself, so stop waiting on it after a while.
+        const timer = setTimeout(() => entry.settle(), 5000);
+        done.then(() => {
+            clearTimeout(timer);
+            if (this.pendingResizes.get(field.name) === entry) {
+                this.pendingResizes.delete(field.name);
+            }
         });
     }
+    renameFieldState(oldName, newName) {
+        this.undoStack.forEach(entry => entry.name === oldName && (entry.name = newName));
+        if (this.selectedFieldName === oldName) {
+            this.selectedFieldName = newName;
+        }
+    }
+    forgetField(name) {
+        var _a, _b;
+        this.undoStack = this.undoStack.filter(entry => entry.name !== name);
+        this.optimistic.delete(name);
+        (_a = this.pendingResizes.get(name)) === null || _a === void 0 ? void 0 : _a.settle();
+        if (((_b = this.pendingNudge) === null || _b === void 0 ? void 0 : _b.name) === name) {
+            clearTimeout(this.nudgeTimer);
+            this.nudgeTimer = null;
+            this.pendingNudge = null;
+        }
+        if (this.selectedFieldName === name) {
+            this.selectField(null);
+        }
+    }
+    drawField(field, geometry = {}) {
+        var _a, _b;
+        const pageInfo = (_a = this.cachedPageInfo[field.document_id]) === null || _a === void 0 ? void 0 : _a[(_b = geometry.page) !== null && _b !== void 0 ? _b : field.page];
+        const el = document.getElementById(getFieldId(field));
+        if (el && pageInfo) {
+            setControlStyles(el, { ...field, ...geometry }, pageInfo.xScale, pageInfo.yScale);
+        }
+    }
+    nudge(dx, dy) {
+        var _a, _b, _c, _d, _e;
+        const field = this.findField(this.selectedFieldName);
+        if (!field || !document.getElementById(getFieldId(field)) || !((_a = this.cachedPageInfo[field.document_id]) === null || _a === void 0 ? void 0 : _a[field.page])) {
+            return;
+        }
+        if (((_b = this.pendingNudge) === null || _b === void 0 ? void 0 : _b.name) !== field.name) {
+            this.flushNudge();
+            const before = this.currentGeometry(field);
+            this.pendingNudge = { name: field.name, before, x: before.x, y: before.y };
+        }
+        // Keep the whole field on the page, measured in PDF points.
+        const pageSize = (_e = (_d = (((_c = this.template) === null || _c === void 0 ? void 0 : _c.documents) || []).find(doc => doc.id === field.document_id)) === null || _d === void 0 ? void 0 : _d.page_sizes) === null || _e === void 0 ? void 0 : _e[field.page];
+        const maxX = ((pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612) - (field.width || defaultWidth(field.type));
+        const maxY = ((pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792) - (field.height || defaultHeight(field.type));
+        this.pendingNudge.x = Math.min(Math.max(this.pendingNudge.x + dx, 0), maxX);
+        this.pendingNudge.y = Math.min(Math.max(this.pendingNudge.y + dy, 0), maxY);
+        this.drawField(field, { x: this.pendingNudge.x, y: this.pendingNudge.y });
+        if (this.nudgeTimer) {
+            clearTimeout(this.nudgeTimer);
+        }
+        this.nudgeTimer = setTimeout(() => this.flushNudge(), NUDGE_SAVE_DELAY_MS);
+    }
+    async flushNudge() {
+        if (this.nudgeTimer) {
+            clearTimeout(this.nudgeTimer);
+            this.nudgeTimer = null;
+        }
+        const pending = this.pendingNudge;
+        this.pendingNudge = null;
+        if (pending) {
+            await this.saveGeometry(pending.name, { x: pending.x, y: pending.y }, pending.before);
+        }
+    }
+    async undo() {
+        await this.flushNudge();
+        await Promise.all([...this.inFlight, ...[...this.pendingResizes.values()].map(resize => resize.done)]);
+        while (this.undoStack.length > 0) {
+            const { name, before } = this.undoStack.pop();
+            const field = this.findField(name);
+            if (field && GEOMETRY_KEYS.some(key => field[key] !== before[key])) {
+                this.selectField(name);
+                await this.saveGeometry(name, before);
+                return;
+            }
+        }
+    }
+    // Saves a move, nudge, or undo, drawing the field at its new spot right away. Pass `before` to make it undoable.
+    saveGeometry(name, geometry, before) {
+        const field = this.findField(name);
+        if (!field) {
+            return Promise.resolve();
+        }
+        const sent = { ...geometry };
+        this.optimistic.set(name, sent);
+        this.drawField(field, geometry);
+        const save = (async () => {
+            var _a, _b, _c, _d, _e, _f;
+            try {
+                const updatedField = await updateField(this.endpoint, this.templateId, name, geometry);
+                const newTemplate = JSON.parse(JSON.stringify(this.template));
+                const fieldIndex = newTemplate.fields.findIndex(field => field.name === name);
+                if (fieldIndex > -1) {
+                    newTemplate.fields[fieldIndex] = updatedField;
+                }
+                Store.updateTemplate(this.templateId, newTemplate);
+                this.drawField(updatedField);
+                if (before) {
+                    this.recordUndo(name, before, updatedField);
+                }
+                (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: newTemplate, event: 'updated-field' });
+            }
+            catch (e) {
+                console.log('[FIELDS] Error saving field position', e);
+                VerdocsToast(((_c = (_b = e.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error) || 'Unable to move the field. Please try again.', { style: 'error' });
+                (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+                // Put it back where the server still has it.
+                const saved = this.findField(name);
+                if (saved) {
+                    this.drawField(saved);
+                }
+            }
+            finally {
+                if (this.optimistic.get(name) === sent) {
+                    this.optimistic.delete(name);
+                }
+            }
+        })();
+        this.inFlight.add(save);
+        save.finally(() => this.inFlight.delete(save));
+        return save;
+    }
+    handleMoveStart(event) {
+        const name = event.target.getAttribute('fieldname');
+        this.flushNudge();
+        this.selectField(name);
+        const field = this.findField(name);
+        this.dragBefore = field ? { name, before: this.currentGeometry(field) } : null;
+    }
     async handleMoveField(event) {
         const oldX = +(event.target.getAttribute('posX') || 0);
         const oldY = +(event.target.getAttribute('posY') || 0);
@@ -1108,7 +1362,7 @@ const VerdocsTemplateFields = class {
         updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
     }
     async handleMoveEnd(event) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e;
         const name = event.target.getAttribute('fieldname');
         const field = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).find(field => field.name === name);
         if (!field) {
@@ -1141,31 +1395,12 @@ const VerdocsTemplateFields = class {
             console.log('[FIELDS] Next page', { newPageNumber, newY, renderedHeight });
         }
         const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, documentId, pageNumber, naturalWidth - width, naturalHeight - height);
-        try {
-            const params = { x, y, page: newPageNumber };
-            const updatedField = await updateField(this.endpoint, this.templateId, name, params);
-            console.log('[FIELDS] Updated', updatedField);
-            const newTemplate = JSON.parse(JSON.stringify(this.template));
-            const fieldIndex = newTemplate.fields.findIndex(field => field.name === name);
-            if (fieldIndex > -1) {
-                newTemplate.fields[fieldIndex] = updatedField;
-            }
-            Store.updateTemplate(this.templateId, newTemplate);
-            event.target.removeAttribute('posX');
-            event.target.removeAttribute('posY');
-            removeCssTransform(event.target);
-            const { xScale = 1, yScale = 1 } = this.cachedPageInfo[documentId][pageNumber];
-            setControlStyles(event.target, updatedField, xScale, yScale);
-            (_e = this.templateUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, template: newTemplate, event: 'updated-field' });
-        }
-        catch (e) {
-            VerdocsToast('Error updating field, please try again later', { style: 'error' });
-            console.log('[FIELDS] Error updating field', e);
-            (_f = this.sdkError) === null || _f === void 0 ? void 0 : _f.emit(new SDKError(e.message, (_g = e.response) === null || _g === void 0 ? void 0 : _g.status, (_h = e.response) === null || _h === void 0 ? void 0 : _h.data));
-            event.target.removeAttribute('posX');
-            event.target.removeAttribute('posY');
-            removeCssTransform(event.target);
-        }
+        event.target.removeAttribute('posX');
+        event.target.removeAttribute('posY');
+        removeCssTransform(event.target);
+        const before = ((_e = this.dragBefore) === null || _e === void 0 ? void 0 : _e.name) === name ? this.dragBefore.before : undefined;
+        this.dragBefore = null;
+        await this.saveGeometry(name, { x, y, page: newPageNumber }, before);
     }
     generateFieldName(type, pageNumber) {
         var _a;
@@ -1180,12 +1415,17 @@ const VerdocsTemplateFields = class {
     // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
     viewCoordinatesToPageCoordinates(viewX, viewY, documentId, pageNumber, xMax, yMax) {
         const { xScale = 1, yScale = 1, renderedHeight = 792 } = this.cachedPageInfo[documentId][pageNumber];
-        const x = Math.floor(Math.min(viewX / xScale, xMax));
-        const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
+        // Round rather than floor: PDF y counts up from the bottom, so flooring would pull every drop down and to the left.
+        const x = Math.round(Math.min(viewX / xScale, xMax));
+        const y = Math.round(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
         return { x, y };
     }
     async handleClickPage(e, documentId, pageNumber) {
-        var _a;
+        var _a, _b, _c;
+        // Clicks on a field select it through interact's tap, so only a click on the bare page clears the selection.
+        if (!this.placing && !((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.verdocs-field'))) {
+            this.selectField(null);
+        }
         if (this.placing) {
             // console.log('Placing field', {documentId, pageNumber});
             const clickedX = e.offsetX;
@@ -1224,7 +1464,7 @@ const VerdocsTemplateFields = class {
             const newTemplate = JSON.parse(JSON.stringify(this.template));
             newTemplate.fields.push(newField);
             Store.updateTemplate(this.templateId, newTemplate);
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: newTemplate, event: 'added-field' });
+            (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: newTemplate, event: 'added-field' });
             this.placing = null;
         }
     }
@@ -1262,6 +1502,7 @@ const VerdocsTemplateFields = class {
             });
         })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: (((_c = this.template) === null || _c === void 0 ? void 0 : _c.roles) || []).length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "templateId": [{
                 "onTemplateIdChanged": 0