@verdocs/web-sdk 6.13.3 → 6.14.1

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%;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;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.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;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 .notice a,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 .notice a .icon,verdocs-send .notice a .icon svg,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>';
@@ -585,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, "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 })), ' ', ".")),
+            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/branding`, target: "_blank", rel: "noopener" }, "Brands", h("span", { class: "icon", innerHTML: externalLinkIcon })), ".")),
         ]), this.renderDoneButton()));
     }
     renderNotificationsView() {
@@ -917,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>';
@@ -930,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' },
@@ -975,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;
@@ -1028,6 +1100,7 @@ const VerdocsTemplateFields = class {
             toolbarEl.remove();
             toolbarTarget.append(toolbarEl);
         }
+        this.applySelection();
     }
     componentWillUpdate() {
         var _a, _b;
@@ -1040,6 +1113,8 @@ const VerdocsTemplateFields = class {
     }
     disconnectedCallback() {
         this.unlistenToTemplate();
+        this.flushNudge();
+        this.selectField(null);
     }
     async listenToTemplate() {
         this.unlistenToTemplate();
@@ -1085,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);
@@ -1104,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) {
@@ -1137,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;
@@ -1176,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;
@@ -1220,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;
         }
     }
@@ -1258,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