@verdocs/web-sdk 4.2.158 → 5.0.0

package/dist/cjs/{verdocs-preview_9.cjs.entry.js → verdocs-preview_5.cjs.entry.js}

@@ -2,19 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateFieldStore = require('./TemplateFieldStore-7bcc0f7a.js');
-const TemplateRoleStore = require('./TemplateRoleStore-e8bb00ec.js');
-const TemplateStore = require('./TemplateStore-db21be4d.js');
 const errors = require('./errors-017fb835.js');
+const Datastore = require('./Datastore-b1742da2.js');
 const Toast = require('./Toast-d84d7bd3.js');
-const Icons = require('./Icons-9a6f2f7c.js');
 const format = require('./format-dc0f3757.js');
 const interact_min = require('./interact.min-e6956f8b.js');
-const utils = require('./utils-6d673ca1.js');
-require('./index-76d03a35.js');
-require('./index-2a189d85.js');
+const utils = require('./utils-ba1e95e0.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-7a726ff3.js');
 
@@ -25,16 +20,31 @@ const VerdocsPreview = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.sdkError = index.createEvent(this, "sdkError", 7);
-        this.templateStore = null;
-        this.fieldStore = null;
-        this.roleStore = null;
+        this.templateListenerId = null;
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        this.unlistenToTemplate();
+        Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
+            this.template = template;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Datastore.Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
     onTemplateIdChanged(newTemplateId) {
         console.log('[PREVIEW] Template ID changed', newTemplateId);
-        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+        this.listenToTemplate();
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -48,40 +58,25 @@ const VerdocsPreview = class {
                 console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
                 return;
             }
-            return this.loadTemplate(this.templateId);
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[PREVIEW] Error with preview session', e);
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
-    async loadTemplate(templateId) {
-        if (templateId) {
-            TemplateStore.getTemplateStore(this.endpoint, templateId, false)
-                .then(ts => {
-                this.templateStore = ts;
-                this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateId);
-                this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateId);
-                this.loading = false;
-            })
-                .catch(e => {
-                console.log('Unable to load template', e);
-                throw e;
-            });
-        }
-    }
     handlePageRendered(_e) {
         // const pageInfo = e.detail as IDocumentPageInfo;
-        // const fields = this.templateStore?.state?.fields.filter(field => field.page === pageInfo.pageNumber);
+        // const fields = (this.template?.fields || []).filter(field => field.page === pageInfo.pageNumber);
         // console.log('[PREVIEW] Page rendered', pageInfo, fields);
         // fields.forEach(field => renderDocumentField(field, pageInfo, {disabled: true, editable: false, draggable: false}));
     }
     render() {
-        var _a, _b;
+        var _a;
         if (this.loading) {
             return (index.h(index.Host, null, index.h("verdocs-loader", null)));
         }
-        return (index.h(index.Host, null, (((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) || []).map(document => {
+        return (index.h(index.Host, null, (((_a = this.template) === null || _a === void 0 ? void 0 : _a.documents) || []).map(document => {
             const pageNumbers = jsSdk.integerSequence(1, document.pages);
             return (index.h(index.Fragment, null, pageNumbers.map(pageNumber => {
                 var _a;
@@ -99,6 +94,9 @@ const VerdocsPreview = class {
 };
 VerdocsPreview.style = VerdocsPreviewStyle0;
 
+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 = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-send{padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-send.sendable{display:-ms-flexbox;display:flex}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid rgba(151, 151, 151, 0.2666666667)}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:rgba(0, 0, 0, 0.537254902)}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;border:2px solid #dddddd;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";
 const VerdocsSendStyle0 = verdocsSendCss;
 
@@ -114,6 +112,7 @@ const VerdocsSend = class {
         this.exit = index.createEvent(this, "exit", 7);
         this.sdkError = index.createEvent(this, "sdkError", 7);
         this.searchContacts = index.createEvent(this, "searchContacts", 7);
+        this.templateListenerId = null;
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.environment = '';
@@ -122,15 +121,33 @@ const VerdocsSend = class {
         this.sessionContacts = [];
         this.sending = false;
         this.rolesCompleted = {};
-        this.templateStore = null;
-        this.roleStore = null;
+        this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        console.log('[SEND] Loading template', this.templateId);
+        this.unlistenToTemplate();
+        Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
+            this.template = template;
+            this.loading = false;
+            this.rolesCompleted = {};
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Datastore.Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
     async reset() {
         this.rolesCompleted = {};
     }
     onTemplateIdChanged(newTemplateId) {
         console.log('[SEND] Template ID changed', newTemplateId);
-        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+        this.listenToTemplate();
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -167,37 +184,18 @@ const VerdocsSend = class {
                 console.log(`[SEND] Missing required template ID ${this.templateId}`);
                 return;
             }
-            return this.loadTemplate(this.templateId);
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[SEND] Error with send session', e);
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
-    async loadTemplate(templateId) {
-        var _a, _b, _c, _d, _e;
-        if (!templateId) {
-            return;
-        }
-        try {
-            this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, templateId, false);
-            this.roleStore = TemplateRoleStore.getTemplateRoleStore(templateId);
-            this.recomputeRolesCompleted();
-            if (!((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
-                console.warn(`[SEND] Template is not sendable`, templateId);
-            }
-        }
-        catch (e) {
-            console.log('[SEND] Error with preview session', e);
-            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new errors.SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
-        }
-    }
     recomputeRolesCompleted() {
         var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = {};
         this.rolesCompleted = {};
-        roles.forEach(role => {
+        const rolesAtLevel = {};
+        (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).forEach(role => {
             const level = role.sequence - 1;
             rolesAtLevel[level] || (rolesAtLevel[level] = []);
             const id = `r-${level}-${rolesAtLevel[level].length}`;
@@ -211,15 +209,13 @@ const VerdocsSend = class {
     }
     getLevels() {
         var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const levels = [...new Set(roles.map(role => role.sequence - 1))];
+        const levels = [...new Set((((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.sequence - 1))];
         levels.sort((a, b) => a - b);
         return levels;
     }
     getRolesAtLevel(level) {
         var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = roles
+        const rolesAtLevel = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || [])
             .filter(role => role.sequence - 1 === level)
             .map((role, index) => ({
             ...role,
@@ -252,7 +248,7 @@ const VerdocsSend = class {
         this.showPickerForId = role.id;
     }
     handleSend(e) {
-        var _a, _b, _c;
+        var _a, _b;
         if (this.sending) {
             console.log('[SEND] Skipping duplicate send', e);
             return;
@@ -264,7 +260,7 @@ const VerdocsSend = class {
         (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
         const details = {
             template_id: this.templateId,
-            name: ((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name) || '',
+            name: ((_b = this.template) === null || _b === void 0 ? void 0 : _b.name) || 'New Envelope',
             environment: this.environment,
             initial_reminder: 0,
             followup_reminders: 0,
@@ -275,12 +271,12 @@ const VerdocsSend = class {
         console.log('[SEND] Creating envelope', details);
         jsSdk.createEnvelope(this.endpoint, details)
             .then(r => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             console.log('[SEND] Send envelope', r);
             this.reset().catch((e) => console.log('Unknown Error', e));
             this.sending = false;
             (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
-            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: ((_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.name) || 'New Envelope', envelope_id: r.id, envelope: r });
+            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, name: details.name, envelope_id: r.id, envelope: r });
         })
             .catch(e => {
             var _a, _b, _c;
@@ -296,22 +292,25 @@ const VerdocsSend = class {
         (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
     }
     render() {
-        var _a, _b;
+        var _a;
+        if (this.loading) {
+            return (index.h(index.Host, null, index.h("verdocs-loader", null)));
+        }
         if (!this.endpoint.session) {
             return (index.h(index.Host, { style: { display: 'flex' } }, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         const levels = this.getLevels();
-        const roleNames = TemplateRoleStore.getRoleNames(this.roleStore);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => jsSdk.isValidEmail(recipient.email));
         // TODO: Reactivate once SMS is re-enabled
         // const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
-        const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-        // console.log('[SEND] Roles completed', this.rolesCompleted);
-        return (index.h(index.Host, { class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, index.h("div", { class: "recipients" }, index.h("div", { class: "left-line" }), index.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
+        const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
+        return (index.h(index.Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, index.h("div", { class: "recipients" }, index.h("div", { class: "left-line" }), index.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
             var _a, _b, _c, _d;
             const unknown = !role.email;
             const elId = `verdocs-send-recipient-${role.role_name}`;
-            return unknown ? (index.h("div", { class: "recipient", "data-ri": TemplateRoleStore.getRoleIndex(this.roleStore, role.role_name), "data-rn": role.role_name, style: { backgroundColor: jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? jsSdk.formatFullName(this.rolesCompleted[role.id]) : role.role_name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (index.h("div", { class: "recipient", style: { borderColor: jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.role_name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? jsSdk.formatFullName(this.rolesCompleted[role.id]) : role.role_name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
+            const roleIndex = getRoleIndex(this.template, role.role_name);
+            const rgba = jsSdk.getRGBA(roleIndex);
+            return unknown ? (index.h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: { backgroundColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? jsSdk.formatFullName(this.rolesCompleted[role.id]) : role.role_name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (index.h("div", { class: "recipient", style: { borderColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? jsSdk.formatFullName(this.rolesCompleted[role.id]) : role.role_name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
         })))), index.h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), index.h("div", { class: "complete" }, "Signing Complete"))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index.h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index.h("verdocs-spinner", null))));
     }
     static get watchers() { return {
@@ -320,140 +319,6 @@ const VerdocsSend = class {
 };
 VerdocsSend.style = VerdocsSendStyle0;
 
-const verdocsTemplateAttachmentsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#46497d}verdocs-template-attachments .attachments{margin:0 0 40px 0}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 0;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b}verdocs-template-attachments .attachment:hover .trash-icon{display:-ms-flexbox;display:flex}verdocs-template-attachments .attachment:hover .pages{display:none}verdocs-template-attachments svg{width:28px;height:28px;fill:#5c6575;margin:2px 0 0 0}verdocs-template-attachments .file-icon{-ms-flex:0;flex:0}verdocs-template-attachments .pages{width:24px;height:24px;-ms-flex:0 0 24px;flex:0 0 24px;padding-left:4px;position:relative;margin:-10px 0 0 0}verdocs-template-attachments .pages .pages-icon{top:0;left:0;width:24px;height:24px;position:absolute}verdocs-template-attachments .pages .count{top:11px;left:7px;z-index:1;width:18px;font-size:12px;font-weight:500;position:absolute;text-align:center;letter-spacing:-2px}verdocs-template-attachments .filename{-ms-flex:1;flex:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px dotted #cccccc}verdocs-template-attachments .trash-icon{-ms-flex:0;flex:0;display:none}verdocs-template-attachments .trash-icon:hover{cursor:pointer}verdocs-template-attachments verdocs-file-chooser{margin:10px 0;border:2px dashed #979797}verdocs-template-attachments .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .progress-wrapper{padding:20px}verdocs-template-attachments .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-attachments ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-moz-placeholder{color:#aaaaaa}verdocs-template-attachments :-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::placeholder{color:#aaaaaa}";
-const VerdocsTemplateAttachmentsStyle0 = verdocsTemplateAttachmentsCss;
-
-const VerdocsTemplateAttachments = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.exit = index.createEvent(this, "exit", 7);
-        this.next = index.createEvent(this, "next", 7);
-        this.templateUpdated = index.createEvent(this, "templateUpdated", 7);
-        this.sdkError = index.createEvent(this, "sdkError", 7);
-        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
-        this.templateId = '';
-        this.uploading = false;
-        this.progressLabel = 'Uploading...';
-        this.progressPercent = 0;
-        this.showDeleteError = false;
-        this.confirmDeleteDocument = null;
-        this.store = null;
-    }
-    async componentWillLoad() {
-        var _a, _b, _c;
-        try {
-            this.endpoint.loadSession();
-            if (!this.templateId) {
-                console.log(`[ROLES] Missing required template ID ${this.templateId}`);
-                return;
-            }
-            if (!this.endpoint.session) {
-                console.log('[ROLES] Unable to start builder session, must be authenticated');
-                return;
-            }
-            this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
-        }
-        catch (e) {
-            console.log('[TEMPLATE ATTACHMENTS] Error loading template', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-        }
-    }
-    handleCancel(e) {
-        e.stopPropagation();
-        this.exit.emit();
-    }
-    handleUploadProgress(percent) {
-        if (percent >= 99) {
-            this.progressPercent = 100;
-            this.progressLabel = 'Processing...';
-        }
-        else {
-            this.progressPercent = percent;
-        }
-    }
-    async handleUpload(e) {
-        var _a, _b, _c, _d;
-        e.stopPropagation();
-        const file = e.detail.file;
-        if (!file) {
-            return;
-        }
-        console.log('[ATTACHMENTS] Uploading...', file);
-        this.uploading = true;
-        this.progressLabel = 'Uploading...';
-        try {
-            const template = await jsSdk.createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));
-            console.log('[ATTACHMENTS] Created attachment', template);
-            this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
-            console.log('[ATTACHMENTS] Updated template', this.store.state);
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.store.state, event: 'attachments' });
-            this.uploading = false;
-            this.progressLabel = '';
-            this.progressPercent = 0;
-        }
-        catch (e) {
-            console.log('[ATTACHMENTS] Error creating template', e);
-            (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new errors.SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
-            this.uploading = false;
-        }
-    }
-    handleNext(e) {
-        var _a;
-        e.stopPropagation();
-        this.uploading = false;
-        this.progressLabel = '';
-        this.progressPercent = 0;
-        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ template: this.store.state });
-    }
-    async confirmDelete() {
-        await jsSdk.deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);
-        this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
-        console.log('[ATTACHMENTS] New template', this.store.state);
-        this.confirmDeleteDocument = null;
-    }
-    async handleDelete(document) {
-        var _a;
-        if (((_a = this.store.state) === null || _a === void 0 ? void 0 : _a.documents.length) > 1) {
-            this.confirmDeleteDocument = document;
-        }
-        else {
-            this.showDeleteError = true;
-        }
-    }
-    getFileIcon(document) {
-        switch (document.mime) {
-            case 'application/pdf':
-                return Icons.PdfIcon;
-            case 'image/jpeg':
-                return Icons.JpgIcon;
-            case 'image/png':
-                return Icons.PngIcon;
-            case 'application/msword':
-            case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-                return Icons.DocIcon;
-        }
-        return Icons.FileIcon;
-    }
-    render() {
-        var _a, _b, _c;
-        if (!this.endpoint.session) {
-            return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-        }
-        const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
-        if (!templateState.isLoaded) {
-            return (index.h(index.Host, { class: "loading" }, index.h("verdocs-loader", null)));
-        }
-        // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-        if (!this.endpoint.session || !templateState.profile_id) {
-            return index.h(index.Host, { class: "empty" });
-        }
-        return (index.h(index.Host, null, index.h("h5", null, "Existing Attachments"), index.h("div", { class: "attachments" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.documents.map(document => (index.h("div", { class: "attachment" }, index.h("div", { class: "file-icon", innerHTML: this.getFileIcon(document) }), index.h("div", { class: "filename", title: document.name }, document.name), index.h("div", { class: "pages" }, index.h("div", { class: "count" }, document.pages), index.h("div", { class: "pages-icon", innerHTML: Icons.PageCountIcon })), index.h("div", { class: "trash-icon", innerHTML: Icons.TrashIcon, onClick: () => this.handleDelete(document) }))))), index.h("h5", null, "Attach a New Document"), this.uploading ? (index.h("div", { class: "loader-wrapper" }, index.h("verdocs-loader", null), this.progressLabel && (index.h("div", { class: "progress-wrapper" }, index.h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (index.h("verdocs-file-chooser", { onFileSelected: e => this.handleUpload(e) })), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.uploading }), index.h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleNext(e), disabled: !((_c = this.store) === null || _c === void 0 ? void 0 : _c.state.documents.length) || this.uploading })), this.showDeleteError && (index.h("verdocs-ok-dialog", { heading: "Unable to Delete Attachment", message: "Templates must contain at least one attachment.", onNext: () => (this.showDeleteError = false) })), this.confirmDeleteDocument && (index.h("verdocs-ok-dialog", { heading: "Delete this Attachment?", message: "This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.", onNext: () => this.confirmDelete(), showCancel: true, onExit: () => {
-                this.confirmDeleteDocument = null;
-            } }))));
-    }
-};
-VerdocsTemplateAttachments.style = VerdocsTemplateAttachmentsStyle0;
-
 const verdocsTemplateBuildTabsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-build-tabs{-ms-flex:1;flex:1;gap:15px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-build-tabs verdocs-button-panel svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-build-tabs verdocs-template-attachments,verdocs-template-build-tabs verdocs-template-roles{margin:20px}verdocs-template-build-tabs verdocs-template-fields{border-top:1px solid #777777}verdocs-template-build-tabs verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-template-build-tabs verdocs-template-fields{width:100%}verdocs-template-build-tabs verdocs-preview{-ms-flex:1;flex:1}.template-details-panel .row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:8px;margin:10px 0}.template-details-panel label{-ms-flex:0 0 70px;flex:0 0 70px}.template-details-panel .value{-ms-flex:1;flex:1;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-details-panel .icon-button{cursor:pointer;opacity:0.8;-ms-flex:0;flex:0;width:18px;height:18px}.template-details-panel .icon-button svg{stroke:#000000;width:18px;height:18px}.template-details-panel .icon-button:hover{opacity:1}";
 const VerdocsTemplateBuildTabsStyle0 = verdocsTemplateBuildTabsCss;
 
@@ -465,21 +330,38 @@ const VerdocsTemplateBuildTabs = class {
         index.registerInstance(this, hostRef);
         this.sdkError = index.createEvent(this, "sdkError", 7);
         this.stepChanged = index.createEvent(this, "stepChanged", 7);
+        this.templateListenerId = null;
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.step = 'preview';
-        this.templateStore = null;
+        this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        this.unlistenToTemplate();
+        Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
+            this.template = template;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Datastore.Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
     onTemplateIdChanged(newTemplateId) {
         console.log('[BUILD_TABS] Template ID changed', newTemplateId);
-        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+        this.listenToTemplate();
     }
     onStepChanged(newStep) {
         console.log('[BUILD_TABS] Step changed', newStep);
-        this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         try {
             this.endpoint.loadSession();
             if (!this.endpoint.session) {
@@ -491,27 +373,16 @@ const VerdocsTemplateBuildTabs = class {
                 console.log('[BUILD_TABS] Missing required template ID, forcing view to attachments');
                 return;
             }
-            try {
-                this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
-            }
-            catch (e) {
-                console.log('[BUILD_TABS] Error loading template', e);
-                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-            }
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[BUILD_TABS] Error loading template', e);
-            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new errors.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));
-        }
-    }
-    async loadTemplate(templateId) {
-        if (templateId) {
-            this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, templateId, false);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
     setStep(e) {
         var _a;
-        console.log('Selected step', e.detail.tab.id);
+        console.log('[BUILD_TABS] Selected step', e.detail.tab.id);
         e.stopPropagation();
         e.preventDefault();
         this.step = e.detail.tab.id;
@@ -530,18 +401,16 @@ const VerdocsTemplateBuildTabs = class {
         });
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (this.loading) {
+            return (index.h(index.Host, null, index.h("verdocs-loader", null)));
+        }
         if (!this.endpoint.session) {
             return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        let canPreview = false;
-        let canEditFields = false;
-        let canEditRoles = false;
-        if (this.templateId && this.templateStore && this.templateStore.state) {
-            canEditRoles = ((_c = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0;
-            canEditFields = canEditRoles && ((_f = (_e = (_d = this.templateStore) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.roles) === null || _f === void 0 ? void 0 : _f.length) > 0;
-            canPreview = canEditFields && ((_j = (_h = (_g = this.templateStore) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.fields) === null || _j === void 0 ? void 0 : _j.length) > 0;
-        }
+        const canEditRoles = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.documents) || []).length > 0;
+        let canEditFields = canEditRoles && (((_b = this.template) === null || _b === void 0 ? void 0 : _b.roles) || []).length > 0;
+        const canPreview = canEditFields && (((_c = this.template) === null || _c === void 0 ? void 0 : _c.fields) || []).length > 0;
         let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);
         if (!canPreview && selectedStepIndex >= 4) {
             selectedStepIndex = 3;
@@ -558,8 +427,8 @@ const VerdocsTemplateBuildTabs = class {
                 { id: 'settings', disabled: !canEditFields, label: 'Settings' },
                 { id: 'fields', disabled: !canEditFields, label: 'Fields' },
                 { id: 'preview', disabled: !canPreview, label: 'Preview/Send' },
-            ] }), this.templateId && (index.h("div", { class: "info" }, index.h("verdocs-button-panel", { icon: HelpIcon }, index.h("div", { class: "template-details-panel" }, index.h("h6", null, "Template Details"), index.h("div", { class: "row" }, index.h("label", null, "ID:"), index.h("div", { class: "value" }, this.templateId), index.h("div", { class: "icon-button", innerHTML: CopyIcon, onClick: () => this.copyTemplateId() })), index.h("div", { class: "row" }, index.h("label", null, "Name:"), index.h("div", { class: "value" }, (_l = (_k = this.templateStore) === null || _k === void 0 ? void 0 : _k.state) === null || _l === void 0 ? void 0 : _l.name)), index.h("div", { class: "row" }, index.h("label", null, "Visibility:"), index.h("div", { class: "value" }, ((_o = (_m = this.templateStore) === null || _m === void 0 ? void 0 : _m.state) === null || _o === void 0 ? void 0 : _o.is_public) ? 'Public' : ((_q = (_p = this.templateStore) === null || _p === void 0 ? void 0 : _p.state) === null || _q === void 0 ? void 0 : _q.is_personal) ? 'Private' : 'Shared')), index.h("div", { class: "row" }, index.h("label", null, "Created:"), index.h("div", { class: "value" }, ((_s = (_r = this.templateStore) === null || _r === void 0 ? void 0 : _r.state) === null || _s === void 0 ? void 0 : _s.counter) ? format.format(new Date((_u = (_t = this.templateStore) === null || _t === void 0 ? void 0 : _t.state) === null || _u === void 0 ? void 0 : _u.created_at), 'P p') : '')), index.h("div", { class: "row" }, index.h("label", null, "Used:"), index.h("div", { class: "value" }, (_w = (_v = this.templateStore) === null || _v === void 0 ? void 0 : _v.state) === null || _w === void 0 ? void 0 :
-            _w.counter, " time(s)"))))))));
+            ] }), this.templateId && (index.h("div", { class: "info" }, index.h("verdocs-button-panel", { icon: HelpIcon }, index.h("div", { class: "template-details-panel" }, index.h("h6", null, "Template Details"), index.h("div", { class: "row" }, index.h("label", null, "ID:"), index.h("div", { class: "value" }, this.templateId), index.h("div", { class: "icon-button", innerHTML: CopyIcon, onClick: () => this.copyTemplateId() })), index.h("div", { class: "row" }, index.h("label", null, "Name:"), index.h("div", { class: "value" }, (_d = this.template) === null || _d === void 0 ? void 0 : _d.name)), index.h("div", { class: "row" }, index.h("label", null, "Visibility:"), index.h("div", { class: "value" }, ((_e = this.template) === null || _e === void 0 ? void 0 : _e.is_public) ? 'Public' : ((_f = this.template) === null || _f === void 0 ? void 0 : _f.is_personal) ? 'Private' : 'Shared')), index.h("div", { class: "row" }, index.h("label", null, "Created:"), index.h("div", { class: "value" }, ((_g = this.template) === null || _g === void 0 ? void 0 : _g.counter) ? format.format(new Date((_h = this.template) === null || _h === void 0 ? void 0 : _h.created_at), 'P p') : '')), index.h("div", { class: "row" }, index.h("label", null, "Used:"), index.h("div", { class: "value" }, (_j = this.template) === null || _j === void 0 ? void 0 :
+            _j.counter, " time(s)"))))))));
     }
     static get watchers() { return {
         "templateId": ["onTemplateIdChanged"],
@@ -568,112 +437,6 @@ const VerdocsTemplateBuildTabs = class {
 };
 VerdocsTemplateBuildTabs.style = VerdocsTemplateBuildTabsStyle0;
 
-const verdocsTemplateCreateCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box.drag-over{border:2px solid #4c56cb}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create p{color:#33364b;margin-top:20px;font-size:18px;font-weight:500;overflow-wrap:anywhere}verdocs-template-create p.subscript{color:#5c6575;font-size:14px;margin:20px}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}verdocs-template-create .error{margin:20px 0;color:#cc0000}";
-const VerdocsTemplateCreateStyle0 = verdocsTemplateCreateCss;
-
-const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
-const VerdocsTemplateCreate = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.exit = index.createEvent(this, "exit", 7);
-        this.next = index.createEvent(this, "next", 7);
-        this.sdkError = index.createEvent(this, "sdkError", 7);
-        this.templateCreated = index.createEvent(this, "templateCreated", 7);
-        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
-        this.maxSize = 20.5 * 1024 * 1024;
-        this.file = undefined;
-        this.creating = false;
-        this.progressLabel = 'Uploading...';
-        this.progressPercent = 0;
-        this.errorMessage = '';
-    }
-    componentWillLoad() {
-        this.endpoint.setTimeout(30000);
-        this.endpoint.loadSession();
-    }
-    handleFileChanged(e) {
-        var _a;
-        this.errorMessage = '';
-        this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
-        console.log('[CREATE] Selected file', this.file);
-        const totalSize = this.file.size;
-        if (totalSize > this.maxSize) {
-            this.errorMessage = 'Total file size must not exceed 20MB.';
-        }
-    }
-    handleUpload(e) {
-        e.stopPropagation();
-        const fileElem = document.getElementById('verdocs-template-create-file');
-        fileElem.click();
-    }
-    handleCancel(e) {
-        e.stopPropagation();
-        this.exit.emit();
-    }
-    async handleSubmit(e) {
-        var _a, _b, _c;
-        e.stopPropagation();
-        // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.
-        if (!this.file) {
-            return;
-        }
-        this.creating = true;
-        this.progressLabel = 'Uploading...';
-        try {
-            const template = await jsSdk.createTemplate(this.endpoint, {
-                name: this.file.name,
-                // TODO: Make optional in the SDK
-                initial_reminder: 0,
-                followup_reminders: 0,
-                documents: [this.file],
-            }, percent => {
-                if (percent >= 99) {
-                    this.progressLabel = 'Processing...';
-                    this.progressPercent = 100;
-                }
-                else {
-                    this.progressPercent = percent;
-                }
-            });
-            console.log('[CREATE] Created template', template);
-            TemplateStore.getTemplateStore(this.endpoint, template.id, true)
-                .then(() => {
-                var _a, _b;
-                (_a = this.templateCreated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template, templateId: template.id });
-                (_b = this.next) === null || _b === void 0 ? void 0 : _b.emit(template);
-                this.creating = false;
-                this.progressLabel = '';
-                this.progressPercent = 0;
-            })
-                .catch(e => {
-                console.log(e);
-            });
-        }
-        catch (e) {
-            console.log('[CREATE] Error creating template', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-            this.creating = false;
-        }
-    }
-    render() {
-        if (!this.endpoint.session) {
-            return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-        }
-        return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: ".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (index.h("div", { class: "loader-wrapper" }, index.h("verdocs-loader", null), this.progressLabel && (index.h("div", { class: "progress-wrapper" }, index.h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (index.h("div", { class: "upload-box", onDrop: (e) => {
-                e.preventDefault();
-                e.target.classList.remove('drag-over');
-                this.file = e.dataTransfer.files[0];
-                if (this.file.size > this.maxSize) {
-                    this.errorMessage = 'Total file size must not exceed 20MB.';
-                }
-            }, onDragOver: (e) => {
-                e.preventDefault();
-                e.dataTransfer.dropEffect = 'copy';
-            }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, index.h("span", { innerHTML: FileIcon, style: { display: 'flex', justifyContent: 'center' } }), index.h("p", null, this.file ? this.file.name : 'Drag and drop your files here'), index.h("p", { class: "subscript" }, "Supported files: PDF, Word"), index.h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), !!this.errorMessage && index.h("div", { class: "error" }, this.errorMessage), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), index.h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating || !!this.errorMessage })))));
-    }
-};
-VerdocsTemplateCreate.style = VerdocsTemplateCreateStyle0;
-
 const verdocsTemplateFieldsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-fields{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", 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 #verdocs-template-fields-toolbar{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 VerdocsTemplateFieldsStyle0 = verdocsTemplateFieldsCss;
 
@@ -708,10 +471,8 @@ const VerdocsTemplateFields = class {
         this.sdkError = index.createEvent(this, "sdkError", 7);
         this.templateUpdated = index.createEvent(this, "templateUpdated", 7);
         this.fieldsUpdated = index.createEvent(this, "fieldsUpdated", 7);
+        this.templateListenerId = null;
         this.pageHeights = {};
-        this.templateStore = null;
-        this.fieldStore = null;
-        this.roleStore = null;
         this.cachedPageInfo = {};
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
         this.templateId = null;
@@ -720,9 +481,10 @@ const VerdocsTemplateFields = class {
         this.showMustSelectRole = false;
         this.selectedRoleName = '';
         this.loading = true;
+        this.template = null;
     }
-    onTemplateIdChanged(newTemplateId) {
-        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+    onTemplateIdChanged() {
+        this.listenToTemplate();
     }
     // Stop field-placement mode if ESC is pressed
     handleKeyDown(ev) {
@@ -731,7 +493,7 @@ const VerdocsTemplateFields = class {
         }
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         try {
             this.endpoint.loadSession();
             if (!this.templateId) {
@@ -742,17 +504,11 @@ const VerdocsTemplateFields = class {
                 console.log('[FIELDS] Unable to start builder session, must be authenticated');
                 return;
             }
-            try {
-                this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
-            }
-            catch (e) {
-                console.log('[FIELDS] Error loading template', e);
-                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-            }
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[FIELDS] Error with fields session', e);
-            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new errors.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));
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
     componentDidRender() {
@@ -768,35 +524,40 @@ const VerdocsTemplateFields = class {
     componentWillUpdate() {
         var _a, _b;
         // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
+        const roles = ((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || [];
         if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {
             this.selectedRoleName = ((_b = roles[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
             console.log('[FIELDS] Selected new role', this.selectedRoleName);
         }
     }
-    async loadTemplate(templateId) {
-        var _a, _b;
-        if (templateId) {
-            this.loading = true;
-            this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, templateId, false);
-            this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateId);
-            this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateId);
-            this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        this.unlistenToTemplate();
+        Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
+            var _a, _b;
+            this.template = template;
             this.loading = false;
-            // TODO: Necessary?
-            // this.fieldsUpdated?.emit({event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields});
+            this.selectedRoleName = ((_b = (_a = template.roles) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Datastore.Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
         }
     }
     attachFieldAttributes(pageInfo, field, el) {
         // el.addEventListener('input', e => this.handleFieldChange(field, e));
         el.addEventListener('settingsChanged', () => {
-            var _a, _b;
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
+            var _a;
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'added-field' });
         });
         el.addEventListener('deleted', () => {
-            var _a, _b;
+            var _a;
             el.remove();
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'updated-field' });
         });
         el.setAttribute('templateid', this.templateId);
         el.setAttribute('fieldname', field.name);
@@ -806,12 +567,12 @@ const VerdocsTemplateFields = class {
         el.setAttribute('name', field.name);
     }
     handlePageRendered(e) {
+        var _a;
         const pageInfo = e.detail;
         // console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo.xScale, pageInfo.yScale);
         this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
         this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-        this.fieldStore
-            .get('fields')
+        (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || [])
             .filter(field => field && field.page === pageInfo.pageNumber)
             .forEach(field => {
             const id = utils.getFieldId(field);
@@ -843,10 +604,9 @@ const VerdocsTemplateFields = class {
         utils.updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
     }
     async handleMoveEnd(event) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const name = event.target.getAttribute('fieldname');
-        const option = +(event.target.getAttribute('option') || '0');
-        const field = this.fieldStore.get('fields').find(field => field.name === name);
+        const field = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).find(field => field.name === name);
         if (!field) {
             console.log('[FIELDS] Unable to find field', name, event.target);
             return;
@@ -862,10 +622,9 @@ const VerdocsTemplateFields = class {
         // (positive displacement) while bottom measures "up" from the bottom (negative displacement).
         const newX = Math.max(clientRect.left - parentRect.left, 0);
         let newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
-        console.log('drop', { pageNumber, newX, newY });
         let newPageNumber = parseInt(pageNumber);
         if (newY > renderedHeight) {
-            newPageNumber = Math.min(newPageNumber + 1, ((_d = (_c = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1);
+            newPageNumber = Math.min(newPageNumber + 1, ((_d = (_c = (((_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) || [])) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1);
             newY -= renderedHeight;
             renderedHeight = this.cachedPageInfo[newPageNumber].renderedHeight;
             console.log('Next page', { newPageNumber, newY, renderedHeight });
@@ -874,38 +633,43 @@ const VerdocsTemplateFields = class {
             newPageNumber = Math.max(newPageNumber - 1, 1);
             renderedHeight = this.cachedPageInfo[newPageNumber].renderedHeight;
             newY += renderedHeight;
-            console.log('Next page', { newPageNumber, newY, renderedHeight });
+            console.log('[FIELDS] Next page', { newPageNumber, newY, renderedHeight });
         }
         const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
         try {
             const params = { x, y, page: newPageNumber };
-            console.log('[FIELDS] Will update', name, y, option, params);
-            const newFieldData = await jsSdk.updateField(this.endpoint, this.templateId, name, params);
-            console.log('[FIELDS] Updated', newFieldData);
-            TemplateFieldStore.updateStoreField(this.fieldStore, name, newFieldData);
+            const updatedField = await jsSdk.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;
+            }
+            Datastore.Store.updateTemplate(this.templateId, newTemplate);
             event.target.removeAttribute('posX');
             event.target.removeAttribute('posY');
             utils.removeCssTransform(event.target);
             const { xScale = 1, yScale = 1 } = this.cachedPageInfo[pageNumber];
-            utils.setControlStyles(event.target, newFieldData, xScale, yScale);
-            (_e = this.templateUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, template: (_f = this.templateStore) === null || _f === void 0 ? void 0 : _f.state, event: 'updated-field' });
+            utils.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) {
             Toast.VerdocsToast('Error updating field, please try again later', { style: 'error' });
             console.log('[FIELDS] Error updating field', e);
-            (_g = this.sdkError) === null || _g === void 0 ? void 0 : _g.emit(new errors.SDKError(e.message, (_h = e.response) === null || _h === void 0 ? void 0 : _h.status, (_j = e.response) === null || _j === void 0 ? void 0 : _j.data));
+            (_f = this.sdkError) === null || _f === void 0 ? void 0 : _f.emit(new errors.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');
             utils.removeCssTransform(event.target);
         }
     }
     generateFieldName(type, pageNumber) {
+        var _a;
         let i = 1;
         let fieldName;
         do {
             fieldName = `${type}P${pageNumber}-${i}`;
             i++;
-        } while (this.fieldStore.get('fields').some(field => field && field.name === fieldName));
+        } while ((((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).some(field => field && field.name === fieldName));
         return fieldName;
     }
     // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
@@ -916,7 +680,7 @@ const VerdocsTemplateFields = class {
         return { x, y };
     }
     async handleClickPage(e, pageNumber) {
-        var _a, _b;
+        var _a;
         if (this.placing) {
             const clickedX = e.offsetX;
             const clickedY = e.offsetY;
@@ -949,22 +713,24 @@ const VerdocsTemplateFields = class {
                 options: this.placing === 'radio' ? [{ id: 'option-1', label: 'Option 1' }] : [],
             };
             console.log('[FIELDS] Will save new field', field);
-            const saved = await jsSdk.createField(this.endpoint, this.templateId, field);
-            console.log('[FIELDS] Saved field', saved);
-            this.fieldStore.set('fields', [...this.fieldStore.get('fields'), saved]);
+            const newField = await jsSdk.createField(this.endpoint, this.templateId, field);
+            console.log('[FIELDS] Saved field', newField);
+            const newTemplate = JSON.parse(JSON.stringify(this.template));
+            newTemplate.fields.push(newField);
+            Datastore.Store.updateTemplate(this.templateId, newTemplate);
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: newTemplate, event: 'added-field' });
             this.placing = null;
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
         }
     }
     render() {
         var _a, _b, _c;
+        if (this.loading) {
+            return (index.h(index.Host, null, index.h("verdocs-loader", null)));
+        }
         if (!this.endpoint.session) {
             return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        if (this.loading || !((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
-            return (index.h(index.Host, null, index.h("verdocs-loader", null)));
-        }
-        const selectableRoles = this.roleStore.get('roles').map(role => ({ value: role.name, label: role.full_name ? `${role.name}: ${role.full_name}` : role.name }));
+        const selectableRoles = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => ({ value: role.name, label: role.full_name ? `${role.name}: ${role.full_name}` : role.name }));
         return (index.h(index.Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, onSubmit: () => { } }, index.h("div", { id: "verdocs-template-fields-toolbar" }, index.h("div", { class: "add-for" }, "Add field:"), index.h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (index.h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, class: option.class, onClick: () => {
                 // We ignore empty-tooltip entries because they're separators
                 if (option.tooltip) {
@@ -976,7 +742,7 @@ const VerdocsTemplateFields = class {
                         this.showMustSelectRole = true;
                     }
                 }
-            } })))), index.h("div", { class: "pages" }, (((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.documents) || []).map(document => {
+            } })))), index.h("div", { class: "pages" }, (((_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) || []).map(document => {
             const pageNumbers = jsSdk.integerSequence(1, document.pages);
             return pageNumbers.map(page => {
                 const pageSize = document.page_sizes[page];
@@ -985,7 +751,7 @@ const VerdocsTemplateFields = class {
                         { name: 'controls', type: 'div' },
                     ] }));
             });
-        })), this.showMustSelectRole && (index.h("verdocs-ok-dialog", { heading: "Unable to add field", message: this.roleStore.get('roles').length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
+        })), this.showMustSelectRole && (index.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) }))));
     }
     static get watchers() { return {
         "templateId": ["onTemplateIdChanged"]
@@ -993,85 +759,13 @@ const VerdocsTemplateFields = class {
 };
 VerdocsTemplateFields.style = VerdocsTemplateFieldsStyle0;
 
-const verdocsTemplateNameCss = "";
-const VerdocsTemplateNameStyle0 = verdocsTemplateNameCss;
-
-const VerdocsTemplateName = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.close = index.createEvent(this, "close", 7);
-        this.sdkError = index.createEvent(this, "sdkError", 7);
-        this.templateUpdated = index.createEvent(this, "templateUpdated", 7);
-        this.store = null;
-        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
-        this.templateId = '';
-        this.name = '';
-        this.dirty = false;
-    }
-    async componentWillLoad() {
-        var _a, _b, _c, _d, _e;
-        try {
-            this.endpoint.loadSession();
-            if (!this.templateId) {
-                console.log(`[ROLES] Missing required template ID ${this.templateId}`);
-                return;
-            }
-            if (!this.endpoint.session) {
-                console.log('[ROLES] Unable to start builder session, must be authenticated');
-                return;
-            }
-            this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
-            this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
-            this.dirty = false;
-        }
-        catch (e) {
-            console.log('[TEMPLATE NAME] Error loading template', e);
-            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new errors.SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
-        }
-    }
-    handleCancel(e) {
-        var _a, _b, _c;
-        e.stopPropagation();
-        this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
-        this.dirty = false;
-        console.log('Closing');
-        (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
-    }
-    async handleSave(e) {
-        var _a, _b, _c;
-        e.stopPropagation();
-        await jsSdk.updateTemplate(this.endpoint, this.templateId, { name: this.name });
-        if ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state) {
-            this.store.state.name = this.name;
-        }
-        this.dirty = false;
-        (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: this.store.state, event: 'name' });
-        (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
-    }
-    render() {
-        var _a, _b;
-        if (!this.endpoint.session) {
-            return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-        }
-        if ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoading) {
-            return (index.h(index.Host, { class: "loading" }, index.h("verdocs-loader", null)));
-        }
-        return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("label", { htmlFor: "verdocs-template-name" }, "Template Name"), index.h("verdocs-text-input", { id: "verdocs-template-name", value: this.name, autocomplete: "off", placeholder: "Template Name...", onInput: (e) => {
-                var _a, _b;
-                this.name = e.target.value;
-                this.dirty = this.name !== ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name);
-            } }), index.h("div", { class: "buttons" }, index.h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
-    }
-};
-VerdocsTemplateName.style = VerdocsTemplateNameStyle0;
-
 const verdocsTemplateRolesCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-roles{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-roles>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-roles>form h5{font-size:16px;font-weight:bold;color:#46497d;margin:0 0 10px 0}verdocs-template-roles>form .participants{position:relative}verdocs-template-roles>form .left-line{top:32px;left:11px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-template-roles>form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;min-height:35px;margin-top:0;margin-left:40px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:6px 0 4px 0}verdocs-template-roles>form .row .row-roles{-ms-flex:1;flex:1;gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-roles>form .row .sender{height:30px;display:-ms-flexbox;display:flex;font-size:14px;line-height:30px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;padding:0 15px 0 15px;border:1px solid #c6c9cc;background-color:#f5f5fa}verdocs-template-roles>form .row .complete{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;background-color:#f5f5fa;border:1px solid #aeb4bf}verdocs-template-roles>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-roles>form .row .settings-button{display:-ms-flexbox;display:flex;cursor:pointer;margin:0 0 0 9px}verdocs-template-roles>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;border-radius:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:2px solid #aeb4bf}verdocs-template-roles>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:0 12px 0 0}verdocs-template-roles>form .row .recipient.dragging{position:absolute}verdocs-template-roles>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-roles>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-roles>form .row .dropzone svg{fill:#cccccc}verdocs-template-roles>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-roles>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:rgba(101, 77, 203, 0.4980392157);border:1px dashed #654dcb}verdocs-template-roles>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-roles>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-roles>form input:focus{outline:none}verdocs-template-roles .row.add-sequence{display:none}verdocs-template-roles .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-role:hover{opacity:1}verdocs-template-roles .add-role svg{width:32px;height:32px}verdocs-template-roles .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-step:hover{opacity:1}verdocs-template-roles .add-step svg{width:32px;height:32px}verdocs-template-roles.dragging .add-role{display:none}verdocs-template-roles.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence .dropzone{opacity:0.5;-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;-ms-flex-align:center;align-items:center;background:rgba(101, 77, 203, 0.4980392157);-ms-flex-pack:center;justify-content:center;border:1px dashed #654dcb}verdocs-template-roles.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-roles .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-roles .empty svg{width:16px;height:16px;stroke:#666666;margin-bottom:2px;display:inline-block}verdocs-template-roles ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-moz-placeholder{color:#aaaaaa}verdocs-template-roles :-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::placeholder{color:#aaaaaa}";
 const VerdocsTemplateRolesStyle0 = verdocsTemplateRolesCss;
 
-const senderLabels = {
-    template_owner: 'Template Owner',
-    envelope_creator: 'Envelope Creator',
-};
+// const senderLabels: Record<TTemplateSender, string> = {
+//   template_owner: 'Template Owner',
+//   envelope_creator: 'Envelope Creator',
+// };
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="#00000089"><path d="m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z"/></svg>';
 const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="#00000089"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
 const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="#00000089"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
@@ -1087,13 +781,31 @@ const VerdocsTemplateRoles = class {
         this.exit = index.createEvent(this, "exit", 7);
         this.sdkError = index.createEvent(this, "sdkError", 7);
         this.rolesUpdated = index.createEvent(this, "rolesUpdated", 7);
-        this.templateStore = null;
-        this.roleStore = null;
+        this.templateListenerId = null;
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
         this.templateId = '';
         this.showingRoleDialog = null;
         this.sender = null;
         this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        console.log('[ROLES] Loading template', this.templateId);
+        this.unlistenToTemplate();
+        Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
+            console.log('[BUILD] Template Updated', template);
+            this.template = template;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Datastore.Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -1107,18 +819,7 @@ const VerdocsTemplateRoles = class {
                 console.log('[ROLES] Unable to start builder session, must be authenticated');
                 return;
             }
-            await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false)
-                .then(ts => {
-                this.templateStore = ts;
-                this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateId);
-                this.loading = false;
-                this.roleStore.onChange('roles', roles => {
-                    var _a;
-                    console.log('[ROLES] Roles changed', { roles });
-                    (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, roles });
-                });
-            })
-                .catch(e => console.warn(e));
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[FIELDS] Error with preview session', e);
@@ -1162,12 +863,8 @@ const VerdocsTemplateRoles = class {
             overlap: 0.05,
             ondrop: async function onDrop(event) {
                 var _a;
-                console.log('dropped', event.target.classList);
                 event.target.classList.remove('active');
-                const roleName = event.relatedTarget.dataset.rolename;
-                const targetSequence = +event.target.dataset.sequence;
-                const targetOrder = +event.target.dataset.order;
-                TemplateRoleStore.updateStoreRole(this.roleStore, roleName, { sequence: targetSequence, order: targetOrder });
+                // This will re-sort the roles and renumbers them via server calls if necessary
                 await this.renumberTemplateRoles();
                 console.log('[ROLES] Updated roles', this.getSortedRoles());
                 (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
@@ -1195,7 +892,10 @@ const VerdocsTemplateRoles = class {
         (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
     }
     getSortedRoles() {
-        return this.roleStore.state.roles.sort((a, b) => {
+        var _a;
+        // NOTE: This mutates the source array but that's OK because everything that touches
+        // it will want the same thing done.
+        return (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).sort((a, b) => {
             return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
         });
     }
@@ -1213,14 +913,15 @@ const VerdocsTemplateRoles = class {
         return roles.map(role => role.name);
     }
     getRolesAtSequence(sequence) {
+        var _a;
         // Entries can be undefined when deleted because Stencil has no remove() operator yet for stores.
         // See https://github.com/ionic-team/stencil-store/issues/23
-        return this.roleStore.state.roles.filter(role => role && role.sequence === sequence);
+        return (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).filter(role => role && role.sequence === sequence);
     }
     // When the user drags a role around, we handle placement "between" items by assigning it a half-order number
     // e.g. 1.5 to place it between items 1 and 2, 0.5 to place it at the beginning, or last+0.5 to place it at the end.
     // Then we re-sort the list of roles and renumber them.
-    renumberTemplateRoles() {
+    async renumberTemplateRoles() {
         // console.log('Renumbering roles', this.getSequenceNumbers(), JSON.stringify(this.roleStore.state));
         // Avoid dupe renumber attempts
         const renumbered = [];
@@ -1233,24 +934,30 @@ const VerdocsTemplateRoles = class {
                         role.sequence = newSequenceIndex + 1;
                         role.order = newOrderIndex + 1;
                         renumbered.push(role.name);
-                        renumberRequests.push(jsSdk.updateTemplateRole(this.endpoint, this.templateId, role.name, {
-                            sequence: role.sequence,
-                            order: role.order,
-                        }));
+                        renumberRequests.push(jsSdk.updateTemplateRole(this.endpoint, this.templateId, role.name, { sequence: role.sequence, order: role.order }));
                     }
                 }
             });
         });
-        return Promise.all(renumberRequests);
+        if (renumberRequests.length > 0) {
+            console.log(`[ROLES] Submitting ${renumberRequests.length} renumber requests`);
+            return Promise.all(renumberRequests).then(async () => {
+                // When renumbering, we don't try to update the store for every individual item
+                // changing. We just do it once at the end.
+                this.template = await Datastore.Store.getTemplate(this.endpoint, this.templateId, true);
+            });
+        }
+        return true;
     }
     // Look for name conflicts, because they're UGC and can be anything, regardless of order.
     getNextRoleName() {
+        var _a, _b;
         let name = '';
-        let nextNumber = Object.keys(this.roleStore.state).length - 1;
+        let nextNumber = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) || []).length;
         do {
             nextNumber++;
             name = `Recipient ${nextNumber}`;
-        } while (!name || this.roleStore.state.roles.some(role => role && role.name === name));
+        } while (!name || (((_b = this.template) === null || _b === void 0 ? void 0 : _b.roles) || []).some(role => role && role.name === name));
         return name;
     }
     callCreateRole(name, sequence, order) {
@@ -1270,10 +977,15 @@ const VerdocsTemplateRoles = class {
             delegator: false,
             kba_method: null,
         })
-            .then(async (r) => {
+            .then(async (role) => {
             var _a;
-            console.log('[ROLES] Created role', r);
-            this.roleStore.set('roles', [...this.roleStore.state.roles, r]);
+            console.log('[ROLES] Created role', role);
+            const newTemplate = JSON.parse(JSON.stringify(this.template));
+            newTemplate.roles.push(role);
+            // TODO: Verify this immediately triggers a self-update
+            console.log('Updating template in data store');
+            Datastore.Store.updateTemplate(this.templateId, newTemplate);
+            // This will re-sort the roles and renumbers them via server calls if necessary
             await this.renumberTemplateRoles();
             (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'added', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
         })
@@ -1294,25 +1006,23 @@ const VerdocsTemplateRoles = class {
         this.callCreateRole(name, sequence, order);
     }
     render() {
-        var _a, _b, _c, _d;
         if (!this.endpoint.session) {
             return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        if (this.loading || !((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
-            console.log('Loading', this.loading, (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state.isLoaded);
+        if (this.loading || !this.template) {
             return (index.h(index.Host, { class: "loading" }, index.h("verdocs-loader", null)));
         }
         const roleNames = this.getRoleNames();
         const sequences = this.getSequenceNumbers();
-        return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("h5", null, "Roles and Workflow"), index.h("div", { class: "participants" }, index.h("div", { class: "left-line" }), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: startIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "sender" }, index.h("span", { class: "label" }, "Owner:"), " ", senderLabels[(_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.sender], ' '))), index.h("div", { class: "row add-sequence", "data-sequence": 0 }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), sequences.map(sequence => (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), this.getRolesAtSequence(sequence).map(role => {
+        return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("h5", null, "Roles and Workflow"), index.h("div", { class: "participants" }, index.h("div", { class: "left-line" }), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: startIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "sender" }, index.h("span", { class: "label" }, "Send Envelope")))), index.h("div", { class: "row add-sequence", "data-sequence": 0 }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), sequences.map(sequence => (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), this.getRolesAtSequence(sequence).map(role => {
             const unknown = !role.email;
-            console.log('ras', sequence, role);
-            return unknown ? (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { backgroundColor: jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { borderColor: jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), jsSdk.formatFullName(role), " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
+            return unknown ? (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { backgroundColor: jsSdk.getRGBA(getRoleIndex(this.template, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { borderColor: jsSdk.getRGBA(getRoleIndex(this.template, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), jsSdk.formatFullName(role), " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
         }), index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), sequences.length > 0 && (index.h("div", { class: "row add-sequence", "data-sequence": sequence }, index.h("div", { class: "row-roles" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), index.h("div", { class: "row", "data-sequence": sequences.length + 1 }, index.h("div", { class: "row-roles" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, sequences.length + 1) }))), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: doneIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (index.h("div", { class: "empty" }, "You must add at least one Role before proceeding.", index.h("br", null), " Click the ", index.h("span", { innerHTML: plusIcon }), " Add button above to get started.")), index.h("div", { class: "buttons" }, index.h("div", { class: "flex-fill" }), index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), index.h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (index.h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
                 this.showingRoleDialog = null;
             }, onDelete: async () => {
                 var _a;
                 this.showingRoleDialog = null;
+                // This will re-sort the roles and renumbers them via server calls if necessary
                 await this.renumberTemplateRoles();
                 (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'deleted', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
             } }))));
@@ -1321,90 +1031,8 @@ const VerdocsTemplateRoles = class {
 };
 VerdocsTemplateRoles.style = VerdocsTemplateRolesStyle0;
 
-const verdocsTemplateVisibilityCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-visibility{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-visibility.loading{min-height:300px;position:relative;display:block}verdocs-template-visibility.empty{display:none}verdocs-template-visibility form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-visibility form .description{font-size:14px;text-align:justify;color:#5c6575}verdocs-template-visibility form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0}verdocs-template-visibility form label{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:500;margin:0 0 4px 0;color:#33364b}verdocs-template-visibility form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-visibility form input:focus{outline:none}verdocs-template-visibility form .input-row{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility form .input-row verdocs-text-input{margin:0;display:-ms-flexbox;display:flex;-ms-flex:0 0 40px;flex:0 0 40px}verdocs-template-visibility form .input-row verdocs-text-input input{text-align:center}verdocs-template-visibility form .input-row verdocs-checkbox{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}verdocs-template-visibility form .input-row verdocs-checkbox label>input[type=checkbox]+*::before{margin-right:0}verdocs-template-visibility .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:25px;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-moz-placeholder{color:#aaaaaa}verdocs-template-visibility :-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::placeholder{color:#aaaaaa}";
-const VerdocsTemplateVisibilityStyle0 = verdocsTemplateVisibilityCss;
-
-const VerdocsTemplateVisibility = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.close = index.createEvent(this, "close", 7);
-        this.sdkError = index.createEvent(this, "sdkError", 7);
-        this.templateUpdated = index.createEvent(this, "templateUpdated", 7);
-        this.store = null;
-        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
-        this.templateId = '';
-        this.dirty = false;
-        this.personal = false;
-        this.public = false;
-    }
-    async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        try {
-            this.endpoint.loadSession();
-            if (!this.templateId) {
-                console.log(`[VISIBILITY] Missing required template ID ${this.templateId}`);
-                return;
-            }
-            if (!this.endpoint.session) {
-                console.log('[VISIBILITY] Unable to start builder session, must be authenticated');
-                return;
-            }
-            this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
-            this.personal = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_personal) || true;
-            this.public = ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_public) || false;
-            this.dirty = false;
-        }
-        catch (e) {
-            console.log('[TEMPLATE VISIBILITY] Error loading template', e);
-            (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new errors.SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
-        }
-    }
-    handleCancel(e) {
-        var _a, _b, _c, _d, _e;
-        e.stopPropagation();
-        this.personal = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_personal;
-        this.public = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_public;
-        this.dirty = false;
-        (_e = this.close) === null || _e === void 0 ? void 0 : _e.emit();
-    }
-    async handleSave(e) {
-        var _a, _b, _c;
-        e.stopPropagation();
-        await jsSdk.updateTemplate(this.endpoint, this.templateId, { is_personal: this.personal, is_public: this.public });
-        if ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state) {
-            this.store.state.is_personal = this.personal;
-            this.store.state.is_public = this.public;
-        }
-        this.dirty = false;
-        (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: this.store.state, event: 'visibility' });
-        (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
-    }
-    render() {
-        var _a, _b;
-        if (!this.endpoint.session) {
-            return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-        }
-        // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-        if (!this.endpoint.session || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
-            return index.h(index.Host, { class: "empty" });
-        }
-        return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("h5", null, "Visibility"), index.h("div", { class: "input-row" }, index.h("label", { htmlFor: "verdocs-is-shared" }, "Shared"), index.h("verdocs-checkbox", { id: "verdocs-is-shared", name: "is-shared", checked: !this.personal, value: "on", onInput: (e) => {
-                this.personal = !e.target.checked;
-                this.dirty = true;
-            } })), index.h("div", { class: "description" }, "Shared templates are visible to other members of your Organization (if any)."), index.h("div", { class: "input-row" }, index.h("label", { htmlFor: "verdocs-is-public" }, "Public"), index.h("verdocs-checkbox", { id: "verdocs-is-public", name: "is-public", checked: this.public, value: "on", onInput: (e) => {
-                this.public = e.target.checked;
-                this.dirty = true;
-            } })), index.h("div", { class: "description" }, "Public templates may appear in results when any other user searches for templates. Note that a template may be both Personal and Public, which may be useful if you want your template to be found via search but not otherwise displayed to other members of your Organization (if any)."), index.h("div", { class: "buttons" }, index.h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
-    }
-};
-VerdocsTemplateVisibility.style = VerdocsTemplateVisibilityStyle0;
-
 exports.verdocs_preview = VerdocsPreview;
 exports.verdocs_send = VerdocsSend;
-exports.verdocs_template_attachments = VerdocsTemplateAttachments;
 exports.verdocs_template_build_tabs = VerdocsTemplateBuildTabs;
-exports.verdocs_template_create = VerdocsTemplateCreate;
 exports.verdocs_template_fields = VerdocsTemplateFields;
-exports.verdocs_template_name = VerdocsTemplateName;
 exports.verdocs_template_roles = VerdocsTemplateRoles;
-exports.verdocs_template_visibility = VerdocsTemplateVisibility;