drill-widgets 2.7.15 → 2.7.17

package/dist/drill-widgets.umd.js

@@ -1,42 +1,117 @@
-(function(C,M){typeof exports=="object"&&typeof module<"u"?M(exports):typeof define=="function"&&define.amd?define(["exports"],M):(C=typeof globalThis<"u"?globalThis:C||self,M(C.Drill={}))})(this,function(C){"use strict";/**
+(function(A,M){typeof exports=="object"&&typeof module<"u"?M(exports):typeof define=="function"&&define.amd?define(["exports"],M):(A=typeof globalThis<"u"?globalThis:A||self,M(A.Drill={}))})(this,function(A){"use strict";/**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var Oe;const M=globalThis,re=M.ShadowRoot&&(M.ShadyCSS===void 0||M.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,oe=Symbol(),xe=new WeakMap;let _e=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==oe)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(re&&e===void 0){const i=t!==void 0&&t.length===1;i&&(e=xe.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&xe.set(t,e))}return e}toString(){return this.cssText}};const Re=s=>new _e(typeof s=="string"?s:s+"",void 0,oe),N=(s,...e)=>{const t=s.length===1?s[0]:e.reduce((i,n,r)=>i+(o=>{if(o._$cssResult$===!0)return o.cssText;if(typeof o=="number")return o;throw Error("Value passed to 'css' function must be a 'css' function result: "+o+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+s[r+1],s[0]);return new _e(t,s,oe)},He=(s,e)=>{if(re)s.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const t of e){const i=document.createElement("style"),n=M.litNonce;n!==void 0&&i.setAttribute("nonce",n),i.textContent=t.cssText,s.appendChild(i)}},ye=re?s=>s:s=>s instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return Re(t)})(s):s;/**
+ */var Oe;const M=globalThis,ne=M.ShadowRoot&&(M.ShadyCSS===void 0||M.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,oe=Symbol(),_e=new WeakMap;let ye=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==oe)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(ne&&e===void 0){const i=t!==void 0&&t.length===1;i&&(e=_e.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&_e.set(t,e))}return e}toString(){return this.cssText}};const Re=s=>new ye(typeof s=="string"?s:s+"",void 0,oe),L=(s,...e)=>{const t=s.length===1?s[0]:e.reduce((i,r,n)=>i+(o=>{if(o._$cssResult$===!0)return o.cssText;if(typeof o=="number")return o;throw Error("Value passed to 'css' function must be a 'css' function result: "+o+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(r)+s[n+1],s[0]);return new ye(t,s,oe)},Ve=(s,e)=>{if(ne)s.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const t of e){const i=document.createElement("style"),r=M.litNonce;r!==void 0&&i.setAttribute("nonce",r),i.textContent=t.cssText,s.appendChild(i)}},we=ne?s=>s:s=>s instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return Re(t)})(s):s;/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const{is:We,defineProperty:je,getOwnPropertyDescriptor:Ve,getOwnPropertyNames:Be,getOwnPropertySymbols:Qe,getPrototypeOf:Ge}=Object,T=globalThis,we=T.trustedTypes,Ye=we?we.emptyScript:"",ae=T.reactiveElementPolyfillSupport,W=(s,e)=>s,K={toAttribute(s,e){switch(e){case Boolean:s=s?Ye:null;break;case Object:case Array:s=s==null?s:JSON.stringify(s)}return s},fromAttribute(s,e){let t=s;switch(e){case Boolean:t=s!==null;break;case Number:t=s===null?null:Number(s);break;case Object:case Array:try{t=JSON.parse(s)}catch{t=null}}return t}},le=(s,e)=>!We(s,e),Se={attribute:!0,type:String,converter:K,reflect:!1,useDefault:!1,hasChanged:le};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),T.litPropertyMetadata??(T.litPropertyMetadata=new WeakMap);let O=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??(this.l=[])).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=Se){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),n=this.getPropertyDescriptor(e,i,t);n!==void 0&&je(this.prototype,e,n)}}static getPropertyDescriptor(e,t,i){const{get:n,set:r}=Ve(this.prototype,e)??{get(){return this[t]},set(o){this[t]=o}};return{get:n,set(o){const a=n==null?void 0:n.call(this);r==null||r.call(this,o),this.requestUpdate(e,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??Se}static _$Ei(){if(this.hasOwnProperty(W("elementProperties")))return;const e=Ge(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(W("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(W("properties"))){const t=this.properties,i=[...Be(t),...Qe(t)];for(const n of i)this.createProperty(n,t[n])}const e=this[Symbol.metadata];if(e!==null){const t=litPropertyMetadata.get(e);if(t!==void 0)for(const[i,n]of t)this.elementProperties.set(i,n)}this._$Eh=new Map;for(const[t,i]of this.elementProperties){const n=this._$Eu(t,i);n!==void 0&&this._$Eh.set(n,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const n of i)t.unshift(ye(n))}else e!==void 0&&t.push(ye(e));return t}static _$Eu(e,t){const i=t.attribute;return i===!1?void 0:typeof i=="string"?i:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var e;this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),(e=this.constructor.l)==null||e.forEach(t=>t(this))}addController(e){var t;(this._$EO??(this._$EO=new Set)).add(e),this.renderRoot!==void 0&&this.isConnected&&((t=e.hostConnected)==null||t.call(e))}removeController(e){var t;(t=this._$EO)==null||t.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return He(e,this.constructor.elementStyles),e}connectedCallback(){var e;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(e=this._$EO)==null||e.forEach(t=>{var i;return(i=t.hostConnected)==null?void 0:i.call(t)})}enableUpdating(e){}disconnectedCallback(){var e;(e=this._$EO)==null||e.forEach(t=>{var i;return(i=t.hostDisconnected)==null?void 0:i.call(t)})}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){var r;const i=this.constructor.elementProperties.get(e),n=this.constructor._$Eu(e,i);if(n!==void 0&&i.reflect===!0){const o=(((r=i.converter)==null?void 0:r.toAttribute)!==void 0?i.converter:K).toAttribute(t,i.type);this._$Em=e,o==null?this.removeAttribute(n):this.setAttribute(n,o),this._$Em=null}}_$AK(e,t){var r,o;const i=this.constructor,n=i._$Eh.get(e);if(n!==void 0&&this._$Em!==n){const a=i.getPropertyOptions(n),l=typeof a.converter=="function"?{fromAttribute:a.converter}:((r=a.converter)==null?void 0:r.fromAttribute)!==void 0?a.converter:K;this._$Em=n,this[n]=l.fromAttribute(t,a.type)??((o=this._$Ej)==null?void 0:o.get(n))??null,this._$Em=null}}requestUpdate(e,t,i){var n;if(e!==void 0){const r=this.constructor,o=this[e];if(i??(i=r.getPropertyOptions(e)),!((i.hasChanged??le)(o,t)||i.useDefault&&i.reflect&&o===((n=this._$Ej)==null?void 0:n.get(e))&&!this.hasAttribute(r._$Eu(e,i))))return;this.C(e,t,i)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:n,wrapped:r},o){i&&!(this._$Ej??(this._$Ej=new Map)).has(e)&&(this._$Ej.set(e,o??t??this[e]),r!==!0||o!==void 0)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),n===!0&&this._$Em!==e&&(this._$Eq??(this._$Eq=new Set)).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var i;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[r,o]of this._$Ep)this[r]=o;this._$Ep=void 0}const n=this.constructor.elementProperties;if(n.size>0)for(const[r,o]of n){const{wrapped:a}=o,l=this[r];a!==!0||this._$AL.has(r)||l===void 0||this.C(r,void 0,o,l)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),(i=this._$EO)==null||i.forEach(n=>{var r;return(r=n.hostUpdate)==null?void 0:r.call(n)}),this.update(t)):this._$EM()}catch(n){throw e=!1,this._$EM(),n}e&&this._$AE(t)}willUpdate(e){}_$AE(e){var t;(t=this._$EO)==null||t.forEach(i=>{var n;return(n=i.hostUpdated)==null?void 0:n.call(i)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&(this._$Eq=this._$Eq.forEach(t=>this._$ET(t,this[t]))),this._$EM()}updated(e){}firstUpdated(e){}};O.elementStyles=[],O.shadowRootOptions={mode:"open"},O[W("elementProperties")]=new Map,O[W("finalized")]=new Map,ae==null||ae({ReactiveElement:O}),(T.reactiveElementVersions??(T.reactiveElementVersions=[])).push("2.1.0");/**
+ */const{is:We,defineProperty:He,getOwnPropertyDescriptor:je,getOwnPropertyNames:Be,getOwnPropertySymbols:Qe,getPrototypeOf:Ge}=Object,T=globalThis,Se=T.trustedTypes,Ye=Se?Se.emptyScript:"",ae=T.reactiveElementPolyfillSupport,W=(s,e)=>s,K={toAttribute(s,e){switch(e){case Boolean:s=s?Ye:null;break;case Object:case Array:s=s==null?s:JSON.stringify(s)}return s},fromAttribute(s,e){let t=s;switch(e){case Boolean:t=s!==null;break;case Number:t=s===null?null:Number(s);break;case Object:case Array:try{t=JSON.parse(s)}catch{t=null}}return t}},de=(s,e)=>!We(s,e),ke={attribute:!0,type:String,converter:K,reflect:!1,useDefault:!1,hasChanged:de};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),T.litPropertyMetadata??(T.litPropertyMetadata=new WeakMap);let O=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??(this.l=[])).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=ke){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(e,i,t);r!==void 0&&He(this.prototype,e,r)}}static getPropertyDescriptor(e,t,i){const{get:r,set:n}=je(this.prototype,e)??{get(){return this[t]},set(o){this[t]=o}};return{get:r,set(o){const a=r==null?void 0:r.call(this);n==null||n.call(this,o),this.requestUpdate(e,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??ke}static _$Ei(){if(this.hasOwnProperty(W("elementProperties")))return;const e=Ge(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(W("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(W("properties"))){const t=this.properties,i=[...Be(t),...Qe(t)];for(const r of i)this.createProperty(r,t[r])}const e=this[Symbol.metadata];if(e!==null){const t=litPropertyMetadata.get(e);if(t!==void 0)for(const[i,r]of t)this.elementProperties.set(i,r)}this._$Eh=new Map;for(const[t,i]of this.elementProperties){const r=this._$Eu(t,i);r!==void 0&&this._$Eh.set(r,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const r of i)t.unshift(we(r))}else e!==void 0&&t.push(we(e));return t}static _$Eu(e,t){const i=t.attribute;return i===!1?void 0:typeof i=="string"?i:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var e;this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),(e=this.constructor.l)==null||e.forEach(t=>t(this))}addController(e){var t;(this._$EO??(this._$EO=new Set)).add(e),this.renderRoot!==void 0&&this.isConnected&&((t=e.hostConnected)==null||t.call(e))}removeController(e){var t;(t=this._$EO)==null||t.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Ve(e,this.constructor.elementStyles),e}connectedCallback(){var e;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(e=this._$EO)==null||e.forEach(t=>{var i;return(i=t.hostConnected)==null?void 0:i.call(t)})}enableUpdating(e){}disconnectedCallback(){var e;(e=this._$EO)==null||e.forEach(t=>{var i;return(i=t.hostDisconnected)==null?void 0:i.call(t)})}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$ET(e,t){var n;const i=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,i);if(r!==void 0&&i.reflect===!0){const o=(((n=i.converter)==null?void 0:n.toAttribute)!==void 0?i.converter:K).toAttribute(t,i.type);this._$Em=e,o==null?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null}}_$AK(e,t){var n,o;const i=this.constructor,r=i._$Eh.get(e);if(r!==void 0&&this._$Em!==r){const a=i.getPropertyOptions(r),d=typeof a.converter=="function"?{fromAttribute:a.converter}:((n=a.converter)==null?void 0:n.fromAttribute)!==void 0?a.converter:K;this._$Em=r,this[r]=d.fromAttribute(t,a.type)??((o=this._$Ej)==null?void 0:o.get(r))??null,this._$Em=null}}requestUpdate(e,t,i){var r;if(e!==void 0){const n=this.constructor,o=this[e];if(i??(i=n.getPropertyOptions(e)),!((i.hasChanged??de)(o,t)||i.useDefault&&i.reflect&&o===((r=this._$Ej)==null?void 0:r.get(e))&&!this.hasAttribute(n._$Eu(e,i))))return;this.C(e,t,i)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,t,{useDefault:i,reflect:r,wrapped:n},o){i&&!(this._$Ej??(this._$Ej=new Map)).has(e)&&(this._$Ej.set(e,o??t??this[e]),n!==!0||o!==void 0)||(this._$AL.has(e)||(this.hasUpdated||i||(t=void 0),this._$AL.set(e,t)),r===!0&&this._$Em!==e&&(this._$Eq??(this._$Eq=new Set)).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var i;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[n,o]of this._$Ep)this[n]=o;this._$Ep=void 0}const r=this.constructor.elementProperties;if(r.size>0)for(const[n,o]of r){const{wrapped:a}=o,d=this[n];a!==!0||this._$AL.has(n)||d===void 0||this.C(n,void 0,o,d)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),(i=this._$EO)==null||i.forEach(r=>{var n;return(n=r.hostUpdate)==null?void 0:n.call(r)}),this.update(t)):this._$EM()}catch(r){throw e=!1,this._$EM(),r}e&&this._$AE(t)}willUpdate(e){}_$AE(e){var t;(t=this._$EO)==null||t.forEach(i=>{var r;return(r=i.hostUpdated)==null?void 0:r.call(i)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&(this._$Eq=this._$Eq.forEach(t=>this._$ET(t,this[t]))),this._$EM()}updated(e){}firstUpdated(e){}};O.elementStyles=[],O.shadowRootOptions={mode:"open"},O[W("elementProperties")]=new Map,O[W("finalized")]=new Map,ae==null||ae({ReactiveElement:O}),(T.reactiveElementVersions??(T.reactiveElementVersions=[])).push("2.1.0");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const j=globalThis,J=j.trustedTypes,ke=J?J.createPolicy("lit-html",{createHTML:s=>s}):void 0,$e="$lit$",F=`lit$${Math.random().toFixed(9).slice(2)}$`,De="?"+F,qe=`<${De}>`,z=document,V=()=>z.createComment(""),B=s=>s===null||typeof s!="object"&&typeof s!="function",de=Array.isArray,Ke=s=>de(s)||typeof(s==null?void 0:s[Symbol.iterator])=="function",pe=`[ 	
-\f\r]`,Q=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Ce=/-->/g,Ae=/>/g,I=RegExp(`>|${pe}(?:([^\\s"'>=/]+)(${pe}*=${pe}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`,"g"),Ee=/'/g,Me=/"/g,Te=/^(?:script|style|textarea|title)$/i,Je=s=>(e,...t)=>({_$litType$:s,strings:e,values:t}),d=Je(1),P=Symbol.for("lit-noChange"),x=Symbol.for("lit-nothing"),Fe=new WeakMap,U=z.createTreeWalker(z,129);function ze(s,e){if(!de(s)||!s.hasOwnProperty("raw"))throw Error("invalid template strings array");return ke!==void 0?ke.createHTML(e):e}const Xe=(s,e)=>{const t=s.length-1,i=[];let n,r=e===2?"<svg>":e===3?"<math>":"",o=Q;for(let a=0;a<t;a++){const l=s[a];let p,c,u=-1,h=0;for(;h<l.length&&(o.lastIndex=h,c=o.exec(l),c!==null);)h=o.lastIndex,o===Q?c[1]==="!--"?o=Ce:c[1]!==void 0?o=Ae:c[2]!==void 0?(Te.test(c[2])&&(n=RegExp("</"+c[2],"g")),o=I):c[3]!==void 0&&(o=I):o===I?c[0]===">"?(o=n??Q,u=-1):c[1]===void 0?u=-2:(u=o.lastIndex-c[2].length,p=c[1],o=c[3]===void 0?I:c[3]==='"'?Me:Ee):o===Me||o===Ee?o=I:o===Ce||o===Ae?o=Q:(o=I,n=void 0);const m=o===I&&s[a+1].startsWith("/>")?" ":"";r+=o===Q?l+qe:u>=0?(i.push(p),l.slice(0,u)+$e+l.slice(u)+F+m):l+F+(u===-2?a:m)}return[ze(s,r+(s[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),i]};class G{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let r=0,o=0;const a=e.length-1,l=this.parts,[p,c]=Xe(e,t);if(this.el=G.createElement(p,i),U.currentNode=this.el.content,t===2||t===3){const u=this.el.content.firstChild;u.replaceWith(...u.childNodes)}for(;(n=U.nextNode())!==null&&l.length<a;){if(n.nodeType===1){if(n.hasAttributes())for(const u of n.getAttributeNames())if(u.endsWith($e)){const h=c[o++],m=n.getAttribute(u).split(F),v=/([.?@])?(.*)/.exec(h);l.push({type:1,index:r,name:v[2],strings:m,ctor:v[1]==="."?et:v[1]==="?"?tt:v[1]==="@"?it:X}),n.removeAttribute(u)}else u.startsWith(F)&&(l.push({type:6,index:r}),n.removeAttribute(u));if(Te.test(n.tagName)){const u=n.textContent.split(F),h=u.length-1;if(h>0){n.textContent=J?J.emptyScript:"";for(let m=0;m<h;m++)n.append(u[m],V()),U.nextNode(),l.push({type:2,index:++r});n.append(u[h],V())}}}else if(n.nodeType===8)if(n.data===De)l.push({type:2,index:r});else{let u=-1;for(;(u=n.data.indexOf(F,u+1))!==-1;)l.push({type:7,index:r}),u+=F.length-1}r++}}static createElement(e,t){const i=z.createElement("template");return i.innerHTML=e,i}}function R(s,e,t=s,i){var o,a;if(e===P)return e;let n=i!==void 0?(o=t._$Co)==null?void 0:o[i]:t._$Cl;const r=B(e)?void 0:e._$litDirective$;return(n==null?void 0:n.constructor)!==r&&((a=n==null?void 0:n._$AO)==null||a.call(n,!1),r===void 0?n=void 0:(n=new r(s),n._$AT(s,t,i)),i!==void 0?(t._$Co??(t._$Co=[]))[i]=n:t._$Cl=n),n!==void 0&&(e=R(s,n._$AS(s,e.values),n,i)),e}class Ze{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,n=((e==null?void 0:e.creationScope)??z).importNode(t,!0);U.currentNode=n;let r=U.nextNode(),o=0,a=0,l=i[0];for(;l!==void 0;){if(o===l.index){let p;l.type===2?p=new Y(r,r.nextSibling,this,e):l.type===1?p=new l.ctor(r,l.name,l.strings,this,e):l.type===6&&(p=new st(r,this,e)),this._$AV.push(p),l=i[++a]}o!==(l==null?void 0:l.index)&&(r=U.nextNode(),o++)}return U.currentNode=z,n}p(e){let t=0;for(const i of this._$AV)i!==void 0&&(i.strings!==void 0?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class Y{get _$AU(){var e;return((e=this._$AM)==null?void 0:e._$AU)??this._$Cv}constructor(e,t,i,n){this.type=2,this._$AH=x,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this._$Cv=(n==null?void 0:n.isConnected)??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return t!==void 0&&(e==null?void 0:e.nodeType)===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=R(this,e,t),B(e)?e===x||e==null||e===""?(this._$AH!==x&&this._$AR(),this._$AH=x):e!==this._$AH&&e!==P&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Ke(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==x&&B(this._$AH)?this._$AA.nextSibling.data=e:this.T(z.createTextNode(e)),this._$AH=e}$(e){var r;const{values:t,_$litType$:i}=e,n=typeof i=="number"?this._$AC(e):(i.el===void 0&&(i.el=G.createElement(ze(i.h,i.h[0]),this.options)),i);if(((r=this._$AH)==null?void 0:r._$AD)===n)this._$AH.p(t);else{const o=new Ze(n,this),a=o.u(this.options);o.p(t),this.T(a),this._$AH=o}}_$AC(e){let t=Fe.get(e.strings);return t===void 0&&Fe.set(e.strings,t=new G(e)),t}k(e){de(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,n=0;for(const r of e)n===t.length?t.push(i=new Y(this.O(V()),this.O(V()),this,this.options)):i=t[n],i._$AI(r),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){var i;for((i=this._$AP)==null?void 0:i.call(this,!1,!0,t);e&&e!==this._$AB;){const n=e.nextSibling;e.remove(),e=n}}setConnected(e){var t;this._$AM===void 0&&(this._$Cv=e,(t=this._$AP)==null||t.call(this,e))}}class X{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,r){this.type=1,this._$AH=x,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=r,i.length>2||i[0]!==""||i[1]!==""?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=x}_$AI(e,t=this,i,n){const r=this.strings;let o=!1;if(r===void 0)e=R(this,e,t,0),o=!B(e)||e!==this._$AH&&e!==P,o&&(this._$AH=e);else{const a=e;let l,p;for(e=r[0],l=0;l<r.length-1;l++)p=R(this,a[i+l],t,l),p===P&&(p=this._$AH[l]),o||(o=!B(p)||p!==this._$AH[l]),p===x?e=x:e!==x&&(e+=(p??"")+r[l+1]),this._$AH[l]=p}o&&!n&&this.j(e)}j(e){e===x?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class et extends X{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===x?void 0:e}}class tt extends X{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==x)}}class it extends X{constructor(e,t,i,n,r){super(e,t,i,n,r),this.type=5}_$AI(e,t=this){if((e=R(this,e,t,0)??x)===P)return;const i=this._$AH,n=e===x&&i!==x||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,r=e!==x&&(i===x||n);n&&this.element.removeEventListener(this.name,this,i),r&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){var t;typeof this._$AH=="function"?this._$AH.call(((t=this.options)==null?void 0:t.host)??this.element,e):this._$AH.handleEvent(e)}}class st{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){R(this,e)}}const ce=j.litHtmlPolyfillSupport;ce==null||ce(G,Y),(j.litHtmlVersions??(j.litHtmlVersions=[])).push("3.3.0");const nt=(s,e,t)=>{const i=(t==null?void 0:t.renderBefore)??e;let n=i._$litPart$;if(n===void 0){const r=(t==null?void 0:t.renderBefore)??null;i._$litPart$=n=new Y(e.insertBefore(V(),r),r,void 0,t??{})}return n._$AI(s),n};/**
+ */const H=globalThis,J=H.trustedTypes,$e=J?J.createPolicy("lit-html",{createHTML:s=>s}):void 0,De="$lit$",F=`lit$${Math.random().toFixed(9).slice(2)}$`,Ce="?"+F,qe=`<${Ce}>`,z=document,j=()=>z.createComment(""),B=s=>s===null||typeof s!="object"&&typeof s!="function",le=Array.isArray,Ke=s=>le(s)||typeof(s==null?void 0:s[Symbol.iterator])=="function",pe=`[ 	
+\f\r]`,Q=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Ae=/-->/g,Ee=/>/g,I=RegExp(`>|${pe}(?:([^\\s"'>=/]+)(${pe}*=${pe}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),Me=/'/g,Te=/"/g,Fe=/^(?:script|style|textarea|title)$/i,Je=s=>(e,...t)=>({_$litType$:s,strings:e,values:t}),l=Je(1),U=Symbol.for("lit-noChange"),_=Symbol.for("lit-nothing"),ze=new WeakMap,P=z.createTreeWalker(z,129);function Ie(s,e){if(!le(s)||!s.hasOwnProperty("raw"))throw Error("invalid template strings array");return $e!==void 0?$e.createHTML(e):e}const Xe=(s,e)=>{const t=s.length-1,i=[];let r,n=e===2?"<svg>":e===3?"<math>":"",o=Q;for(let a=0;a<t;a++){const d=s[a];let p,c,u=-1,h=0;for(;h<d.length&&(o.lastIndex=h,c=o.exec(d),c!==null);)h=o.lastIndex,o===Q?c[1]==="!--"?o=Ae:c[1]!==void 0?o=Ee:c[2]!==void 0?(Fe.test(c[2])&&(r=RegExp("</"+c[2],"g")),o=I):c[3]!==void 0&&(o=I):o===I?c[0]===">"?(o=r??Q,u=-1):c[1]===void 0?u=-2:(u=o.lastIndex-c[2].length,p=c[1],o=c[3]===void 0?I:c[3]==='"'?Te:Me):o===Te||o===Me?o=I:o===Ae||o===Ee?o=Q:(o=I,r=void 0);const m=o===I&&s[a+1].startsWith("/>")?" ":"";n+=o===Q?d+qe:u>=0?(i.push(p),d.slice(0,u)+De+d.slice(u)+F+m):d+F+(u===-2?a:m)}return[Ie(s,n+(s[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),i]};class G{constructor({strings:e,_$litType$:t},i){let r;this.parts=[];let n=0,o=0;const a=e.length-1,d=this.parts,[p,c]=Xe(e,t);if(this.el=G.createElement(p,i),P.currentNode=this.el.content,t===2||t===3){const u=this.el.content.firstChild;u.replaceWith(...u.childNodes)}for(;(r=P.nextNode())!==null&&d.length<a;){if(r.nodeType===1){if(r.hasAttributes())for(const u of r.getAttributeNames())if(u.endsWith(De)){const h=c[o++],m=r.getAttribute(u).split(F),x=/([.?@])?(.*)/.exec(h);d.push({type:1,index:n,name:x[2],strings:m,ctor:x[1]==="."?et:x[1]==="?"?tt:x[1]==="@"?it:X}),r.removeAttribute(u)}else u.startsWith(F)&&(d.push({type:6,index:n}),r.removeAttribute(u));if(Fe.test(r.tagName)){const u=r.textContent.split(F),h=u.length-1;if(h>0){r.textContent=J?J.emptyScript:"";for(let m=0;m<h;m++)r.append(u[m],j()),P.nextNode(),d.push({type:2,index:++n});r.append(u[h],j())}}}else if(r.nodeType===8)if(r.data===Ce)d.push({type:2,index:n});else{let u=-1;for(;(u=r.data.indexOf(F,u+1))!==-1;)d.push({type:7,index:n}),u+=F.length-1}n++}}static createElement(e,t){const i=z.createElement("template");return i.innerHTML=e,i}}function R(s,e,t=s,i){var o,a;if(e===U)return e;let r=i!==void 0?(o=t._$Co)==null?void 0:o[i]:t._$Cl;const n=B(e)?void 0:e._$litDirective$;return(r==null?void 0:r.constructor)!==n&&((a=r==null?void 0:r._$AO)==null||a.call(r,!1),n===void 0?r=void 0:(r=new n(s),r._$AT(s,t,i)),i!==void 0?(t._$Co??(t._$Co=[]))[i]=r:t._$Cl=r),r!==void 0&&(e=R(s,r._$AS(s,e.values),r,i)),e}class Ze{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,r=((e==null?void 0:e.creationScope)??z).importNode(t,!0);P.currentNode=r;let n=P.nextNode(),o=0,a=0,d=i[0];for(;d!==void 0;){if(o===d.index){let p;d.type===2?p=new Y(n,n.nextSibling,this,e):d.type===1?p=new d.ctor(n,d.name,d.strings,this,e):d.type===6&&(p=new st(n,this,e)),this._$AV.push(p),d=i[++a]}o!==(d==null?void 0:d.index)&&(n=P.nextNode(),o++)}return P.currentNode=z,r}p(e){let t=0;for(const i of this._$AV)i!==void 0&&(i.strings!==void 0?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class Y{get _$AU(){var e;return((e=this._$AM)==null?void 0:e._$AU)??this._$Cv}constructor(e,t,i,r){this.type=2,this._$AH=_,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=r,this._$Cv=(r==null?void 0:r.isConnected)??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return t!==void 0&&(e==null?void 0:e.nodeType)===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=R(this,e,t),B(e)?e===_||e==null||e===""?(this._$AH!==_&&this._$AR(),this._$AH=_):e!==this._$AH&&e!==U&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Ke(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==_&&B(this._$AH)?this._$AA.nextSibling.data=e:this.T(z.createTextNode(e)),this._$AH=e}$(e){var n;const{values:t,_$litType$:i}=e,r=typeof i=="number"?this._$AC(e):(i.el===void 0&&(i.el=G.createElement(Ie(i.h,i.h[0]),this.options)),i);if(((n=this._$AH)==null?void 0:n._$AD)===r)this._$AH.p(t);else{const o=new Ze(r,this),a=o.u(this.options);o.p(t),this.T(a),this._$AH=o}}_$AC(e){let t=ze.get(e.strings);return t===void 0&&ze.set(e.strings,t=new G(e)),t}k(e){le(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,r=0;for(const n of e)r===t.length?t.push(i=new Y(this.O(j()),this.O(j()),this,this.options)):i=t[r],i._$AI(n),r++;r<t.length&&(this._$AR(i&&i._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){var i;for((i=this._$AP)==null?void 0:i.call(this,!1,!0,t);e&&e!==this._$AB;){const r=e.nextSibling;e.remove(),e=r}}setConnected(e){var t;this._$AM===void 0&&(this._$Cv=e,(t=this._$AP)==null||t.call(this,e))}}class X{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,r,n){this.type=1,this._$AH=_,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=n,i.length>2||i[0]!==""||i[1]!==""?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=_}_$AI(e,t=this,i,r){const n=this.strings;let o=!1;if(n===void 0)e=R(this,e,t,0),o=!B(e)||e!==this._$AH&&e!==U,o&&(this._$AH=e);else{const a=e;let d,p;for(e=n[0],d=0;d<n.length-1;d++)p=R(this,a[i+d],t,d),p===U&&(p=this._$AH[d]),o||(o=!B(p)||p!==this._$AH[d]),p===_?e=_:e!==_&&(e+=(p??"")+n[d+1]),this._$AH[d]=p}o&&!r&&this.j(e)}j(e){e===_?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class et extends X{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===_?void 0:e}}class tt extends X{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==_)}}class it extends X{constructor(e,t,i,r,n){super(e,t,i,r,n),this.type=5}_$AI(e,t=this){if((e=R(this,e,t,0)??_)===U)return;const i=this._$AH,r=e===_&&i!==_||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,n=e!==_&&(i===_||r);r&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){var t;typeof this._$AH=="function"?this._$AH.call(((t=this.options)==null?void 0:t.host)??this.element,e):this._$AH.handleEvent(e)}}class st{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){R(this,e)}}const ce=H.litHtmlPolyfillSupport;ce==null||ce(G,Y),(H.litHtmlVersions??(H.litHtmlVersions=[])).push("3.3.0");const rt=(s,e,t)=>{const i=(t==null?void 0:t.renderBefore)??e;let r=i._$litPart$;if(r===void 0){const n=(t==null?void 0:t.renderBefore)??null;i._$litPart$=r=new Y(e.insertBefore(j(),n),n,void 0,t??{})}return r._$AI(s),r};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const L=globalThis;let H=class extends O{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t;const e=super.createRenderRoot();return(t=this.renderOptions).renderBefore??(t.renderBefore=e.firstChild),e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=nt(t,this.renderRoot,this.renderOptions)}connectedCallback(){var e;super.connectedCallback(),(e=this._$Do)==null||e.setConnected(!0)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this._$Do)==null||e.setConnected(!1)}render(){return P}};H._$litElement$=!0,H.finalized=!0,(Oe=L.litElementHydrateSupport)==null||Oe.call(L,{LitElement:H});const ue=L.litElementPolyfillSupport;ue==null||ue({LitElement:H}),(L.litElementVersions??(L.litElementVersions=[])).push("4.2.0");/**
+ */const N=globalThis;let V=class extends O{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t;const e=super.createRenderRoot();return(t=this.renderOptions).renderBefore??(t.renderBefore=e.firstChild),e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=rt(t,this.renderRoot,this.renderOptions)}connectedCallback(){var e;super.connectedCallback(),(e=this._$Do)==null||e.setConnected(!0)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this._$Do)==null||e.setConnected(!1)}render(){return U}};V._$litElement$=!0,V.finalized=!0,(Oe=N.litElementHydrateSupport)==null||Oe.call(N,{LitElement:V});const ue=N.litElementPolyfillSupport;ue==null||ue({LitElement:V}),(N.litElementVersions??(N.litElementVersions=[])).push("4.2.0");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const Ie=s=>(e,t)=>{t!==void 0?t.addInitializer(()=>{customElements.define(s,e)}):customElements.define(s,e)};/**
+ */const Ue=s=>(e,t)=>{t!==void 0?t.addInitializer(()=>{customElements.define(s,e)}):customElements.define(s,e)};/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const rt={attribute:!0,type:String,converter:K,reflect:!1,hasChanged:le},ot=(s=rt,e,t)=>{const{kind:i,metadata:n}=t;let r=globalThis.litPropertyMetadata.get(n);if(r===void 0&&globalThis.litPropertyMetadata.set(n,r=new Map),i==="setter"&&((s=Object.create(s)).wrapped=!0),r.set(t.name,s),i==="accessor"){const{name:o}=t;return{set(a){const l=e.get.call(this);e.set.call(this,a),this.requestUpdate(o,l,s)},init(a){return a!==void 0&&this.C(o,void 0,s,a),a}}}if(i==="setter"){const{name:o}=t;return function(a){const l=this[o];e.call(this,a),this.requestUpdate(o,l,s)}}throw Error("Unsupported decorator location: "+i)};function A(s){return(e,t)=>typeof t=="object"?ot(s,e,t):((i,n,r)=>{const o=n.hasOwnProperty(r);return n.constructor.createProperty(r,i),o?Object.getOwnPropertyDescriptor(n,r):void 0})(s,e,t)}/**
+ */const nt={attribute:!0,type:String,converter:K,reflect:!1,hasChanged:de},ot=(s=nt,e,t)=>{const{kind:i,metadata:r}=t;let n=globalThis.litPropertyMetadata.get(r);if(n===void 0&&globalThis.litPropertyMetadata.set(r,n=new Map),i==="setter"&&((s=Object.create(s)).wrapped=!0),n.set(t.name,s),i==="accessor"){const{name:o}=t;return{set(a){const d=e.get.call(this);e.set.call(this,a),this.requestUpdate(o,d,s)},init(a){return a!==void 0&&this.C(o,void 0,s,a),a}}}if(i==="setter"){const{name:o}=t;return function(a){const d=this[o];e.call(this,a),this.requestUpdate(o,d,s)}}throw Error("Unsupported decorator location: "+i)};function D(s){return(e,t)=>typeof t=="object"?ot(s,e,t):((i,r,n)=>{const o=r.hasOwnProperty(n);return r.constructor.createProperty(n,i),o?Object.getOwnPropertyDescriptor(r,n):void 0})(s,e,t)}/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function f(s){return A({...s,state:!0,attribute:!1})}const w=[];for(let s=0;s<256;++s)w.push((s+256).toString(16).slice(1));function at(s,e=0){return(w[s[e+0]]+w[s[e+1]]+w[s[e+2]]+w[s[e+3]]+"-"+w[s[e+4]]+w[s[e+5]]+"-"+w[s[e+6]]+w[s[e+7]]+"-"+w[s[e+8]]+w[s[e+9]]+"-"+w[s[e+10]]+w[s[e+11]]+w[s[e+12]]+w[s[e+13]]+w[s[e+14]]+w[s[e+15]]).toLowerCase()}let he;const lt=new Uint8Array(16);function dt(){if(!he){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");he=crypto.getRandomValues.bind(crypto)}return he(lt)}const Pe={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function E(s,e,t){var n;if(Pe.randomUUID&&!s)return Pe.randomUUID();s=s||{};const i=s.random??((n=s.rng)==null?void 0:n.call(s))??dt();if(i.length<16)throw new Error("Random bytes length must be >= 16");return i[6]=i[6]&15|64,i[8]=i[8]&63|128,at(i)}const pt=N`
+ */function b(s){return D({...s,state:!0,attribute:!1})}const S=[];for(let s=0;s<256;++s)S.push((s+256).toString(16).slice(1));function at(s,e=0){return(S[s[e+0]]+S[s[e+1]]+S[s[e+2]]+S[s[e+3]]+"-"+S[s[e+4]]+S[s[e+5]]+"-"+S[s[e+6]]+S[s[e+7]]+"-"+S[s[e+8]]+S[s[e+9]]+"-"+S[s[e+10]]+S[s[e+11]]+S[s[e+12]]+S[s[e+13]]+S[s[e+14]]+S[s[e+15]]).toLowerCase()}let he;const dt=new Uint8Array(16);function lt(){if(!he){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");he=crypto.getRandomValues.bind(crypto)}return he(dt)}const Pe={randomUUID:typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function E(s,e,t){var r;if(Pe.randomUUID&&!s)return Pe.randomUUID();s=s||{};const i=s.random??((r=s.rng)==null?void 0:r.call(s))??lt();if(i.length<16)throw new Error("Random bytes length must be >= 16");return i[6]=i[6]&15|64,i[8]=i[8]&63|128,at(i)}const pt=L`
   :host {
+    /* Color tokens (defaults) */
+    --bg: #f9fafb;
+    --card-bg: #ffffff;
+    --text: #111827;
+    --muted: #6b7280;
+    --border: #e5e7eb;
+
+    --header-bg: #f9fafb;
+    --header-border-color: var(--border);
+    --header-border-width: 1px;
+
+    --cancel-bg: #ffffff;
+    --cancel-text: #374151;
+
+    --accent: #0f766e;
+    --accent-hover: #0d9488;
+
+    --radius: 8px;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
     display: block;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background-color: #f9fafb; /* Lighter gray background */
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    background-color: var(--bg);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
     overflow: hidden;
     min-height: 600px;
+    color: var(--text);
+  }
+
+  /* allow consumers to toggle dark theme on the host */
+  :host([theme="dark"]),
+  :host([data-theme="dark"]) {
+    --bg: #121212;
+    --card-bg: #161616;
+    --text: #f9fafb;
+    --muted: #94a3b8;
+    --border: #1f2937;
+
+    --header-bg: #222222;
+    --header-border-color: var(--border);
+    --header-border-width: 1px;
+
+    --cancel-bg: #0b1220;
+    --cancel-text: #ffffff;
+
+    --accent: #0f766e;
+    --accent-hover: #0d9488;
+
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+  }
+
+  /* also provide sensible defaults when not using shadow DOM via prefers-color-scheme */
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --bg: #121212;
+      --card-bg: #161616;
+      --text: #f9fafb;
+      --muted: #94a3b8;
+      --border: #1f2937;
+
+      --header-bg: #222222;
+      --header-border-color: var(--border);
+      --header-border-width: 1px;
+
+      --cancel-bg: #0b1220;
+      --cancel-text: #ffffff;
+
+      --accent: #0f766e;
+      --accent-hover: #0d9488;
+
+      --shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+    }
+  }
+
+  .h2 {
+    background-color: var(--header-bg);
+    color: var(--text);
+  }
+  .section-header h2 {
+    background-color: var(--header-bg);
+    color: var(--text);
   }
 
   /* Header */
@@ -45,9 +120,10 @@
     justify-content: space-between;
     align-items: flex-end;
     padding: 24px;
-    border-bottom: 1px solid #e5e7eb;
-    background-color: #ffffff;
+    border-bottom: var(--header-border-width) solid var(--header-border-color);
+    background-color: var(--header-bg);
     gap: 24px;
+    color: var(--text);
   }
 
   .header-inputs {
@@ -72,35 +148,126 @@
   }
 
   .cancel-button {
-    background-color: #ffffff;
-    color: #374151;
-    border: 1px solid #d1d5db;
+    background-color: var(--cancel-bg);
+    color: var(--cancel-text);
+    border: 1px solid var(--border);
   }
 
   .cancel-button:hover {
-    background-color: #f9fafb;
-    border-color: #9ca3af;
+    background-color: rgba(0, 0, 0, 0.03);
+    border-color: var(--muted);
   }
 
   .save-button {
-    background-color: #0f766e;
-    color: #ffffff;
-    border: 1px solid #0f766e;
+    background-color: var(--accent);
+    color: var(--card-bg);
+    border: 1px solid var(--accent);
     padding: 12px 24px;
     font-weight: 600;
   }
 
   .save-button:hover {
-    background-color: #0d9488;
-    border-color: #0d9488;
+    background-color: var(--accent-hover);
+    border-color: var(--accent-hover);
   }
 
   /* Main Content */
   .main-content {
     padding: 0;
-    background-color: #f9fafb; /* Lighter gray background continues */
+    background-color: var(--bg);
+  }
+`,ct=L`
+  :host {
+    /* tokens - defaults (light) */
+    --form-label: #374151;
+    --form-label-size: 14px;
+
+    --input-bg: #ffffff;
+    --input-border: #d1d5db;
+    --input-border-focus: #3b82f6;
+    --input-focus-ring: rgba(59, 130, 246, 0.1);
+    --placeholder: #9ca3af;
+    --input-radius: 6px;
+
+    --content-columns-bg: #ffffff;
+    --content-columns-border: #e5e7eb;
+    --content-item-bg: #f9fafb;
+
+    --checkbox-label-color: #374151;
+    --checkbox-hover-bg: #f9fafb;
+
+    --single-checkbox-bg: #f0f9ff;
+    --single-checkbox-border: #bae6fd;
+    --single-checkbox-note: #0369a1;
+
+    --dropdown-bg: #ffffff;
+    --dropdown-border: #d1d5db;
+    --dropdown-item-hover: #f3f4f6;
+    --dropdown-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+    --radius: 6px;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  /* dark theme (host opt-in) */
+  :host([theme="dark"]),
+  :host([data-theme="dark"]) {
+    --form-label: #95979c;
+    --input-bg: #0b1220;
+    --input-border: #1f2937;
+    --input-border-focus: #60a5fa;
+    --input-focus-ring: rgba(96, 165, 250, 0.08);
+    --placeholder: #94a3b8;
+
+    --content-columns-bg: #121212;
+    --content-columns-border: #1f2937;
+    --content-item-bg: #0b1220;
+
+    --checkbox-label-color: #dddddd;
+    --checkbox-hover-bg: #000000;
+
+    --single-checkbox-bg: #06202b;
+    --single-checkbox-border: rgba(186, 230, 253, 0.04);
+    --single-checkbox-note: #7fc3ff;
+
+    --dropdown-bg: #0f1724;
+    --dropdown-border: #374151;
+    --dropdown-item-hover: #06202b;
+    --dropdown-shadow: 0 4px 6px rgba(2, 6, 23, 0.6);
+
+    --shadow: 0 4px 6px rgba(2, 6, 23, 0.6);
+  }
+
+  /* respect system preference when not using shadow DOM */
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --form-label: #95979c;
+      --input-bg: #0b1220;
+      --input-border: #1f2937;
+      --input-border-focus: #60a5fa;
+      --input-focus-ring: rgba(96, 165, 250, 0.08);
+      --placeholder: #94a3b8;
+
+      --content-columns-bg: #121212;
+      --content-columns-border: #1f2937;
+      --content-item-bg: #0b1220;
+
+      --checkbox-label-color: #dddddd;
+      --checkbox-hover-bg: #000000;
+
+      --single-checkbox-bg: #06202b;
+      --single-checkbox-border: rgba(186, 230, 253, 0.04);
+      --single-checkbox-note: #7fc3ff;
+
+      --dropdown-bg: #0f1724;
+      --dropdown-border: #374151;
+      --dropdown-item-hover: #06202b;
+      --dropdown-shadow: 0 4px 6px rgba(2, 6, 23, 0.6);
+
+      --shadow: 0 4px 6px rgba(2, 6, 23, 0.6);
+    }
   }
-`,ct=N`
+
   .form-group {
     display: flex;
     flex-direction: column;
@@ -109,40 +276,43 @@
 
   .form-group label {
     font-weight: 500;
-    color: #374151;
+    color: var(--form-label);
     margin-bottom: 8px;
-    font-size: 14px;
+    font-size: var(--form-label-size);
   }
 
   .form-group input,
   .form-group textarea {
     padding: 12px;
-    border: 1px solid #d1d5db;
-    border-radius: 6px;
+    border: 1px solid var(--input-border);
+    border-radius: var(--input-radius);
     font-size: 14px;
     transition: border-color 0.2s ease;
+    background: var(--input-bg);
+    color: inherit;
   }
 
   .form-group input:focus,
   .form-group textarea:focus {
     outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    border-color: var(--input-border-focus);
+    box-shadow: 0 0 0 3px var(--input-focus-ring);
+    background: var(--input-bg);
   }
 
   .form-group input::placeholder,
   .form-group textarea::placeholder {
-    color: #9ca3af;
+    color: var(--placeholder);
   }
 
   /* Two Column Layout */
   .content-columns {
-    background-color: #ffffff;
+    background-color: var(--content-columns-bg);
     display: grid;
     grid-template-columns: 2fr 3fr;
     min-height: 500px;
     gap: 1px;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--content-columns-border);
     overflow: hidden;
   }
 
@@ -163,15 +333,15 @@
     align-items: center;
     gap: 8px;
     font-size: 14px;
-    color: #374151;
+    color: var(--checkbox-label-color);
     cursor: pointer;
     padding: 8px;
-    border-radius: 6px;
+    border-radius: var(--radius);
     transition: background-color 0.2s ease;
   }
 
   .checkbox-type-label:hover {
-    background-color: #f9fafb;
+    background-color: var(--checkbox-hover-bg);
   }
 
   .checkbox-type-label input[type="radio"] {
@@ -180,8 +350,8 @@
   }
 
   .single-checkbox-info {
-    background-color: #f0f9ff;
-    border: 1px solid #bae6fd;
+    background-color: var(--single-checkbox-bg);
+    border: 1px solid var(--single-checkbox-border);
     border-radius: 6px;
     padding: 12px;
     margin-top: 8px;
@@ -190,7 +360,7 @@
   .single-checkbox-info .config-note {
     margin: 0;
     font-size: 14px;
-    color: #0369a1;
+    color: var(--single-checkbox-note);
     font-style: italic;
   }
 
@@ -210,10 +380,10 @@
     position: absolute;
     top: 100%;
     right: 0;
-    background: white;
-    border: 1px solid #d1d5db;
+    background: var(--dropdown-bg);
+    border: 1px solid var(--dropdown-border);
     border-radius: 6px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--dropdown-shadow);
     z-index: 1000;
     min-width: 120px;
     display: none;
@@ -228,7 +398,8 @@
     width: 100%;
     padding: 8px 12px;
     border: none;
-    background: white;
+    background: var(--dropdown-bg);
+    color: inherit;
     text-align: left;
     font-size: 14px;
     cursor: pointer;
@@ -236,15 +407,15 @@
   }
 
   .content-options button:hover {
-    background-color: #f3f4f6;
+    background-color: var(--dropdown-item-hover);
   }
 
   .content-item {
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--content-columns-border);
     border-radius: 6px;
     padding: 16px;
     margin-bottom: 12px;
-    background: #f9fafb;
+    background: var(--content-item-bg);
   }
 
   .content-header {
@@ -258,7 +429,7 @@
     margin: 0;
     font-size: 16px;
     font-weight: 600;
-    color: #374151;
+    color: var(--form-label);
   }
 
   .content-header-controls {
@@ -269,10 +440,11 @@
 
   .content-type-select {
     padding: 4px 8px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--input-border);
     border-radius: 4px;
     font-size: 12px;
-    background: white;
+    background: var(--dropdown-bg);
+    color: inherit;
   }
 
   .content-config-section {
@@ -283,23 +455,107 @@
     width: 100%;
     min-height: 80px;
     padding: 8px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--input-border);
     border-radius: 4px;
     font-size: 14px;
     font-family: inherit;
     resize: vertical;
+    background: var(--input-bg);
+    color: inherit;
+    scrollbar-color: var(--input-border) transparent;
   }
 
   .config-textarea:focus {
     outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    border-color: var(--input-border-focus);
+    box-shadow: 0 0 0 3px var(--input-focus-ring);
+  }
+`,ut=L`
+  /* Theme tokens (defaults) */
+  :host {
+    --section-bg: #ffffff;
+    --section-text: #111827;
+    --section-muted: #6b7280;
+    --section-border: #e5e7eb;
+
+    --section-header-bg: #ffffff;
+    --section-header-text: #111827;
+
+    --primary: #3b82f6;
+    --primary-contrast: #ffffff;
+    --primary-focus-ring: rgba(59, 130, 246, 0.08);
+
+    --danger: #ef4444;
+    --danger-bg: #fee2e2;
+
+    --muted-bg: #f9fafb;
+    --muted-alt-bg: #f8fafc;
+
+    --card-bg: #ffffff;
+
+    --radius-md: 6px;
+    --radius-sm: 4px;
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  }
+
+  /* Dark theme support on the host */
+  :host([theme="dark"]),
+  :host([data-theme="dark"]) {
+    --section-bg: #0b1220;
+    --section-text: #f8fafc;
+    --section-muted: #94a3b8;
+    --section-border: #1f2937;
+
+    --section-header-bg: #0f1724;
+    --section-header-text: #f8fafc;
+
+    --primary: #60a5fa;
+    --primary-contrast: #0b1220;
+    --primary-focus-ring: rgba(96, 165, 250, 0.08);
+
+    --danger: #f87171;
+    --danger-bg: #3b0b0b;
+
+    --muted-bg: transparent;
+    --muted-alt-bg: transparent;
+
+    --card-bg: #0b1220;
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
+  }
+
+  /* Also respect system preference when not in shadow DOM */
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --section-bg: #0b1220;
+      --section-text: #f8fafc;
+      --section-muted: #94a3b8;
+      --section-border: #1f2937;
+
+      --section-header-bg: #0f1724;
+      --section-header-text: #f8fafc;
+
+      --primary: #60a5fa;
+      --primary-contrast: #0b1220;
+      --primary-focus-ring: rgba(96, 165, 250, 0.08);
+
+      --danger: #f87171;
+      --danger-bg: #3b0b0b;
+
+      --muted-bg: transparent;
+      --muted-alt-bg: transparent;
+
+      --card-bg: #0b1220;
+
+      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
+    }
   }
-`,ut=N`
+
   /* Steps and Questions Sections */
   .section {
     padding: 16px;
-    background-color: #ffffff;
+    background-color: var(--section-bg);
   }
 
   .section-header {
@@ -313,15 +569,15 @@
     margin: 0;
     font-size: 18px;
     font-weight: 600;
-    color: #111827;
+    color: var(--section-header-text);
   }
 
   .add-button {
-    background-color: #f9fafb; /* Gray background to match sections */
-    color: #3b82f6;
-    border: 1px solid #3b82f6;
+    background-color: var(--muted-bg); /* Gray background to match sections */
+    color: var(--primary);
+    border: 1px solid var(--primary);
     padding: 6px 12px;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
@@ -332,7 +588,7 @@
   }
 
   .add-button:hover {
-    background-color: #f3f4f6; /* Slightly darker gray on hover */
+    background-color: var(--muted-alt-bg); /* Slightly darker gray on hover */
   }
 
   .add-button::before {
@@ -355,26 +611,26 @@
     margin: 0 0 8px 0;
     font-size: 16px;
     font-weight: 600;
-    color: #6b7280; /* Gray text color */
+    color: var(--section-muted); /* Gray text color */
   }
 
   .empty-state p {
     margin: 0 0 24px 0;
-    color: #6b7280;
+    color: var(--section-muted);
     font-size: 14px;
     line-height: 1.5;
   }
 
   .empty-state .add-button {
-    background-color: #f9fafb; /* Lighter gray to match background */
-    color: #3b82f6; /* Blue text to match header buttons */
-    border: 1px solid #3b82f6; /* Blue border to match header buttons */
+    background-color: var(--muted-bg); /* Lighter gray to match background */
+    color: var(--primary); /* Blue text to match header buttons */
+    border: 1px solid var(--primary); /* Blue border to match header buttons */
     padding: 8px 16px;
     margin: 0 auto; /* Center the button horizontally */
   }
 
   .empty-state .add-button:hover {
-    background-color: #f3f4f6; /* Slightly darker gray on hover */
+    background-color: var(--muted-alt-bg); /* Slightly darker gray on hover */
   }
 
   /* Steps for Questions Section */
@@ -386,24 +642,24 @@
   .steps-empty-state h3 {
     text-align: center; /* Center the heading */
     margin-bottom: 4px;
-    color: #6b7280; /* Gray text color */
+    color: var(--section-muted); /* Gray text color */
   }
 
   .steps-empty-state p {
     text-align: center; /* Center the text */
     margin-bottom: 16px;
-    color: #6b7280;
+    color: var(--section-muted);
   }
 
   .steps-empty-state .add-button {
-    background-color: #f9fafb; /* Lighter gray to match background */
-    color: #3b82f6; /* Blue text to match header buttons */
-    border: 1px solid #3b82f6; /* Blue border to match header buttons */
+    background-color: var(--muted-bg); /* Lighter gray to match background */
+    color: var(--primary); /* Blue text to match header buttons */
+    border: 1px solid var(--primary); /* Blue border to match header buttons */
     margin: 0 auto; /* Center the button horizontally */
   }
 
   .steps-empty-state .add-button:hover {
-    background-color: #f3f4f6; /* Slightly darker gray on hover */
+    background-color: var(--muted-alt-bg); /* Slightly darker gray on hover */
   }
 
   /* Disabled States */
@@ -427,12 +683,13 @@
 
   .question-item {
     padding: 16px;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--section-border);
     border-radius: 8px;
-    background-color: #f9fafb;
+    background-color: var(--card-bg);
     display: flex;
     flex-direction: column;
     gap: 8px;
+    box-shadow: var(--shadow-sm);
   }
 
   .question-header {
@@ -447,7 +704,7 @@
     margin: 0;
     font-size: 16px;
     font-weight: 600;
-    color: #111827;
+    color: var(--section-text);
     flex: 1;
   }
 
@@ -459,52 +716,54 @@
 
   .question-type-select {
     padding: 6px 10px;
-    border: 1px solid #d1d5db;
-    border-radius: 6px;
-    background-color: #ffffff;
+    border: 1px solid var(--section-border);
+    border-radius: var(--radius-md);
+    background-color: var(--card-bg);
     font-size: 13px;
-    color: #374151;
+    color: var(--section-text);
     min-width: 140px;
   }
 
   .question-type-select:focus {
     outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-focus-ring);
   }
 
   .delete-question-button {
     background: none;
     border: none;
-    color: #ef4444;
+    color: var(--danger);
     font-size: 16px;
     cursor: pointer;
     padding: 4px;
     border-radius: 4px;
     transition: all 0.2s ease;
+    line-height: 1;
   }
 
   .delete-question-button:hover {
-    background-color: #fee2e2;
+    background-color: var(--danger-bg);
   }
 
   .question-label-input {
     padding: 12px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--section-border);
     border-radius: 6px;
     font-size: 14px;
-    background-color: #ffffff;
+    background-color: var(--card-bg);
     transition: border-color 0.2s ease;
+    color: var(--section-text);
   }
 
   .question-label-input:focus {
     outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-focus-ring);
   }
 
   .question-label-input::placeholder {
-    color: #9ca3af;
+    color: var(--section-muted);
   }
 
   .question-required-label {
@@ -512,7 +771,7 @@
     align-items: center;
     gap: 8px;
     font-size: 14px;
-    color: #374151;
+    color: var(--section-text);
     cursor: pointer;
   }
 
@@ -522,9 +781,9 @@
   }
 
   .add-question-button {
-    background-color: #f9fafb;
-    color: #3b82f6;
-    border: 1px solid #3b82f6;
+    background-color: var(--muted-bg);
+    color: var(--primary);
+    border: 1px solid var(--primary);
     padding: 8px 16px;
     border-radius: 6px;
     font-size: 14px;
@@ -539,7 +798,7 @@
   }
 
   .add-question-button:hover {
-    background-color: #f3f4f6;
+    background-color: var(--muted-alt-bg);
   }
 
   .add-question-button::before {
@@ -553,7 +812,7 @@
   .question-config-section {
     margin-top: 8px;
     padding-top: 8px;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid var(--section-border);
   }
 
   .options-label,
@@ -561,7 +820,7 @@
     display: block;
     font-size: 13px;
     font-weight: 500;
-    color: #374151;
+    color: var(--section-text);
     margin-bottom: 8px;
   }
 
@@ -580,22 +839,23 @@
   .option-input {
     flex: 1;
     padding: 8px 10px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--section-border);
     border-radius: 4px;
     font-size: 13px;
-    background-color: #ffffff;
+    background-color: var(--card-bg);
+    color: var(--section-text);
   }
 
   .option-input:focus {
     outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px var(--primary-focus-ring);
   }
 
   .remove-option-button {
     background: none;
     border: none;
-    color: #ef4444;
+    color: var(--danger);
     font-size: 16px;
     cursor: pointer;
     padding: 4px 6px;
@@ -605,13 +865,13 @@
   }
 
   .remove-option-button:hover {
-    background-color: #fee2e2;
+    background-color: var(--danger-bg);
   }
 
   .add-option-button {
     background: none;
-    border: 1px dashed #d1d5db;
-    color: #6b7280;
+    border: 1px dashed var(--section-border);
+    color: var(--section-muted);
     padding: 8px 12px;
     border-radius: 4px;
     font-size: 13px;
@@ -621,38 +881,135 @@
   }
 
   .add-option-button:hover {
-    border-color: #3b82f6;
-    color: #3b82f6;
-    background-color: #f8fafc;
+    border-color: var(--primary);
+    color: var(--primary);
+    background-color: var(--muted-alt-bg);
   }
 
   .config-input {
     width: 100%;
     padding: 8px 10px;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--section-border);
     border-radius: 4px;
     font-size: 13px;
-    background-color: #ffffff;
+    background-color: var(--card-bg);
     margin-top: 4px;
+    color: var(--section-text);
   }
 
   .config-input:focus {
     outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px var(--primary-focus-ring);
   }
 
   .config-note {
     margin: 0;
     font-size: 13px;
-    color: #6b7280;
+    color: var(--section-muted);
     font-style: italic;
     padding: 8px 12px;
-    background-color: #f8fafc;
+    background-color: var(--muted-alt-bg);
     border-radius: 4px;
-    border-left: 3px solid #e5e7eb;
+    border-left: 3px solid var(--section-border);
+  }
+`,Ne=L`
+  /* Theme tokens (defaults) */
+  :host {
+    --bg: #f8fafc;
+
+    --panel-bg: #ffffff;
+    --card-bg: #ffffff;
+    --text: #111827;
+    --muted: #6b7280;
+    --muted-weak: #9ca3af;
+    --muted-surface: #f3f4f6;
+    --muted-border:  #d1d5db
+    --border: #e5e7eb;
+
+    --primary: #3b82f6;
+    --primary-600: #2563eb;
+    --primary-600-border: #1d4ed8;
+    --primary-100-bg: #eff6ff;
+    --primary-badge-bg: #e0e7ff;
+    --primary-badge-text: #3730a3;
+
+    --danger: #ef4444;
+    --danger-100-bg: #fef2f2;
+
+    --success: #22c55e;
+
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+
+    --radius-md: 6px;
+    --radius-lg: 12px;
+
+    --overlay-bg: rgba(0, 0, 0, 0.4);
+  }
+
+  /* Dark theme on host */
+  :host([theme="dark"]),
+  :host([data-theme="dark"]) {
+    --bg: #0b1220;
+    --panel-bg: #0f1724;
+    --card-bg: #0b1220;
+    --text: #f8fafc;
+    --muted: #94a3b8;
+    --muted-weak: #374151;
+    --muted-surface: #06202b;
+    --border: #1f2937;
+
+    --primary: #60a5fa;
+    --primary-600: #3b82f6;
+    --primary-100-bg: #0b2a4a;
+    --primary-badge-bg: #0b1b3b;
+    --primary-badge-text: #cfe7ff;
+
+    --danger: #f87171;
+    --danger-100-bg: rgba(248, 113, 113, 0.08);
+
+    --success: #22c55e;
+
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
+    --shadow-md: 0 2px 8px rgba(2, 6, 23, 0.6);
+
+    --overlay-bg: rgba(0, 0, 0, 0.6);
+  }
+
+  /* Respect system preference (non-shadow DOM usage) */
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --bg: #0b1220;
+      --panel-bg: #0f1724;
+      --card-bg: #0b1220;
+      --text: #f8fafc;
+      --muted: #94a3b8;
+      --muted-weak: #374151;
+      --muted-surface: #06202b;
+      --border: #1f2937;
+
+      --primary: #60a5fa;
+      --primary-600: #3b82f6;
+      --primary-100-bg: #0b2a4a;
+      --primary-badge-bg: #0b1b3b;
+      --primary-badge-text: #cfe7ff;
+
+      --danger: #f87171;
+      --danger-100-bg: rgba(248, 113, 113, 0.08);
+
+      --success: #22c55e;
+
+      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6);
+      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
+      --shadow-md: 0 2px 8px rgba(2, 6, 23, 0.6);
+
+      --overlay-bg: rgba(0, 0, 0, 0.6);
+    }
   }
-`,Ue=N`
+
   /* Builder Step Styles */
   .steps-list {
     display: flex;
@@ -664,26 +1021,26 @@
     display: flex;
     align-items: center;
     padding: 12px;
-    border: 1px solid #e5e7eb;
-    border-radius: 6px;
-    background-color: #ffffff;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background-color: var(--card-bg);
     cursor: pointer;
     transition: all 0.2s ease;
     gap: 12px;
   }
 
   .step-item:hover {
-    border-color: #d1d5db;
-    background-color: #f9fafb;
+    border-color: var(--muted-border); 
+    background-color: var(--muted-surface);
   }
 
   .step-item.selected {
-    border-color: #3b82f6;
-    background-color: #eff6ff;
+    border-color: var(--primary);
+    background-color: var(--primary-100-bg);
   }
 
   .step-handle {
-    color: #9ca3af;
+    color: var(--muted);
     font-size: 14px;
     cursor: grab;
     user-select: none;
@@ -702,7 +1059,7 @@
 
   .step-content strong {
     font-weight: 600;
-    color: #111827;
+    color: var(--text);
     font-size: 14px;
   }
 
@@ -715,7 +1072,7 @@
   .step-menu {
     background: none;
     border: none;
-    color: #9ca3af;
+    color: var(--muted-weak);
     font-size: 16px;
     cursor: pointer;
     padding: 4px;
@@ -724,8 +1081,8 @@
   }
 
   .step-menu:hover {
-    background-color: #f3f4f6;
-    color: #6b7280;
+    background-color: var(--muted-surface);
+    color: var(--muted);
   }
 
   .step-menu-container {
@@ -736,12 +1093,10 @@
     position: absolute;
     top: calc(100% + 4px);
     right: 0;
-    background: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    background: var(--panel-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
     min-width: 160px;
     z-index: 100;
     overflow: hidden;
@@ -758,21 +1113,21 @@
     text-align: left;
     cursor: pointer;
     font-size: 14px;
-    color: #374151;
+    color: var(--text);
     transition: background 0.2s;
     font-family: inherit;
   }
 
   .step-menu-item:hover {
-    background: #f9fafb;
+    background: var(--muted-surface);
   }
 
   .step-menu-item.danger {
-    color: #ef4444;
+    color: var(--danger);
   }
 
   .step-menu-item.danger:hover {
-    background: #fef2f2;
+    background: var(--danger-100-bg);
   }
 
   .step-menu-icon {
@@ -780,12 +1135,13 @@
     width: 20px;
     text-align: center;
   }
+
   .runner-layout {
     display: flex;
     width: 100%;
     min-height: 100vh;
     box-sizing: border-box;
-    background: #f8fafc;
+    background: var(--bg);
     gap: 32px;
     overflow: hidden;
     position: relative;
@@ -798,7 +1154,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.4);
+    background: var(--overlay-bg);
     display: flex;
     align-items: flex-start;
     justify-content: center;
@@ -808,12 +1164,10 @@
   }
 
   .runner-loading-box {
-    background: white;
+    background: var(--panel-bg);
     border-radius: 8px;
     padding: 24px 48px;
-    box-shadow:
-      0 1px 3px 0 rgba(0, 0, 0, 0.1),
-      0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -825,14 +1179,14 @@
   .runner-loading-spinner {
     width: 48px;
     height: 48px;
-    border: 4px solid #e5e7eb;
-    border-top: 4px solid #3b82f6;
+    border: 4px solid var(--border);
+    border-top: 4px solid var(--primary);
     border-radius: 50%;
     animation: runner-spin 1s linear infinite;
   }
 
   .runner-loading-text {
-    color: #6b7280;
+    color: var(--muted);
     font-size: 16px;
     font-weight: 500;
     text-align: center;
@@ -850,8 +1204,8 @@
   .runner-sidebar {
     width: 380px;
     min-width: 320px;
-    background: #f8fafc;
-    border-right: 1px solid #e5e7eb;
+    background: var(--bg);
+    border-right: 1px solid var(--border);
     padding: 40px 32px 40px 32px;
     display: flex;
     flex-direction: column;
@@ -862,7 +1216,7 @@
   .runner-sidebar-header {
     font-size: 1.15rem;
     font-weight: 700;
-    color: #222;
+    color: var(--text);
     margin-bottom: 24px;
     letter-spacing: 0.01em;
     text-align: left;
@@ -883,8 +1237,8 @@
     justify-content: space-between;
     padding: 18px 18px 18px 20px;
     border-radius: 12px;
-    background: #fff;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
+    background: var(--card-bg);
+    box-shadow: var(--shadow-xs);
     margin-bottom: 0;
     cursor: pointer;
     border: 2px solid transparent;
@@ -893,26 +1247,30 @@
       box-shadow 0.2s;
     gap: 12px;
   }
+
   .runner-step-item.active {
-    border: 2px solid #3b82f6;
-    background: #fff;
+    border: 2px solid var(--primary);
+    background: var(--card-bg);
     box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
   }
+
   .runner-step-title {
     font-weight: 500;
-    color: #111827;
+    color: var(--text);
     font-size: 0.97rem;
     flex: 1;
     min-width: 0;
     line-height: 1.4;
   }
+
   .runner-step-item.active .runner-step-title {
     font-weight: 700;
     font-size: 1.07rem;
   }
+
   .runner-step-badge {
-    background: #e0e7ff;
-    color: #3730a3;
+    background: var(--primary-badge-bg);
+    color: var(--primary-badge-text);
     font-size: 12px;
     font-weight: 600;
     border-radius: 6px;
@@ -927,7 +1285,7 @@
     flex: 1;
     width: 100%;
     padding: 56px 64px 56px 64px;
-    background: #f8fafc;
+    background: var(--bg);
     min-width: 0;
     display: flex;
     flex-direction: column;
@@ -947,17 +1305,18 @@
   .runner-step-header h2.runner-step-title {
     font-size: 1.5rem;
     font-weight: 700;
-    color: #111827;
+    color: var(--text);
   }
 
   .runner-step-divider {
     border: none;
-    border-top: 1px solid #e5e7eb;
-    margin: 20px 0 20px 0;
+    border-top: 1px solid var(--border);
+    margin: 20px 0;
     width: 100%;
   }
+
   .runner-step-desc {
-    color: #6b7280;
+    color: var(--muted);
     font-size: 1rem;
     margin: 0;
   }
@@ -974,8 +1333,9 @@
     margin-top: 24px;
     padding-right: 0;
   }
+
   .next-button {
-    background: #3b82f6;
+    background: var(--primary);
     color: #fff;
     border: none;
     border-radius: 6px;
@@ -989,16 +1349,17 @@
     box-sizing: border-box;
     align-self: flex-end;
   }
+
   .next-button:hover {
-    background: #2563eb;
+    background: var(--primary-600);
   }
 
   :global(body) {
-    background: #f8fafc;
+    background: var(--bg);
   }
 
   .runner-card {
-    background: #fff;
+    background: var(--card-bg);
     border-radius: 12px;
     padding: 24px 24px 20px 24px;
     margin-bottom: 0;
@@ -1010,20 +1371,20 @@
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 8px;
-    color: #111827;
+    color: var(--text);
     display: flex;
     align-items: center;
   }
 
   .runner-question-required {
-    color: #dc2626;
+    color: var(--danger);
     font-size: 1.1em;
     margin-left: 4px;
   }
 
   .runner-question-divider {
     border: none;
-    border-top: 1.5px solid #e5e7eb;
+    border-top: 1.5px solid var(--border);
     margin: 12px 0 20px 0;
   }
 
@@ -1036,11 +1397,11 @@
   .runner-card select {
     width: 100%;
     padding: 12px 16px;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border);
     border-radius: 12px;
     font-size: 14px;
-    background-color: #f9fafb;
-    color: #111827;
+    background-color: var(--bg);
+    color: var(--text);
     transition: all 0.2s ease;
     box-sizing: border-box;
   }
@@ -1052,16 +1413,14 @@
   .runner-card textarea:focus,
   .runner-card select:focus {
     outline: none;
-    border-color: #3b82f6;
-    background-color: #ffffff;
+    border-color: var(--primary);
+    background-color: var(--card-bg);
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
   }
 
-  .runner-card input[type="text"]::placeholder,
-  .runner-card input[type="email"]::placeholder,
-  .runner-card input[type="number"]::placeholder,
+  .runner-card input::placeholder,
   .runner-card textarea::placeholder {
-    color: #9ca3af;
+    color: var(--muted-weak);
   }
 
   .runner-card textarea {
@@ -1077,7 +1436,7 @@
   }
 
   .runner-card select.placeholder {
-    color: #9ca3af;
+    color: var(--muted-weak);
   }
 
   /* Radio group styling */
@@ -1085,7 +1444,7 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
-    background-color: #ffffff;
+    background-color: var(--card-bg);
     padding: 16px;
   }
 
@@ -1107,18 +1466,18 @@
     margin-right: 12px;
     width: 18px;
     height: 18px;
-    accent-color: #3b82f6;
+    accent-color: var(--primary);
     cursor: pointer;
   }
 
   .radio-option input[type="radio"]:checked + .radio-label {
     font-weight: 600;
-    color: #111827;
+    color: var(--text);
   }
 
   .radio-label {
     font-size: 16px;
-    color: #374151;
+    color: var(--muted-weak);
     cursor: pointer;
     flex: 1;
   }
@@ -1129,12 +1488,12 @@
     box-shadow: none;
   }
 
-  /* Checkbox group styling */
+  /* Checkbox group styling (reuse tokens) */
   .checkbox-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    background-color: #ffffff;
+    background-color: var(--card-bg);
     padding: 16px;
   }
 
@@ -1147,7 +1506,7 @@
     background-color: transparent;
     transition: all 0.2s ease;
   }
-
+ 
   .checkbox-option:hover {
     background-color: transparent;
   }
@@ -1156,18 +1515,18 @@
     margin-right: 12px;
     width: 18px;
     height: 18px;
-    accent-color: #3b82f6;
+    accent-color: var(--primary);
     cursor: pointer;
   }
 
   .checkbox-option input[type="checkbox"]:checked + .checkbox-label {
     font-weight: 600;
-    color: #111827;
+    color: var(--text);
   }
 
   .checkbox-label {
     font-size: 16px;
-    color: #374151;
+    color: var(--muted);
     cursor: pointer;
     flex: 1;
   }
@@ -1178,7 +1537,10 @@
     box-shadow: none;
   }
 
-  /* Single checkbox styling */
+  /* Signature, file upload, error, print, mobile, etc. */
+
+
+/* Single checkbox styling */
   .checkbox-single {
     display: flex;
     align-items: center;
@@ -1198,13 +1560,13 @@
     margin-right: 12px;
     width: 18px;
     height: 18px;
-    accent-color: #3b82f6;
+    accent-color: var(--primary);
     cursor: pointer;
   }
 
   .checkbox-single input[type="checkbox"]:checked + .checkbox-label {
     font-weight: 600;
-    color: #111827;
+    color: var(--text);
   }
 
   .checkbox-single:has(input[type="checkbox"]:checked) {
@@ -1213,7 +1575,6 @@
     box-shadow: none;
   }
 
-  /* Signature styling */
   .signature-container {
     display: flex;
     flex-direction: column;
@@ -1223,9 +1584,9 @@
   .signature-canvas {
     width: 100%;
     height: 200px;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border);
     border-radius: 8px;
-    background-color: #ffffff;
+    background-color: var(--card-bg);
     cursor: crosshair;
     max-width: 700px;
   }
@@ -1236,9 +1597,9 @@
   }
 
   .signature-clear-btn {
-    background: #f3f4f6;
-    color: #374151;
-    border: 1px solid #d1d5db;
+    background: var(--muted-surface);
+    color: var(--muted-weak);
+    border: 1px solid var(--primary-600);
     border-radius: 6px;
     padding: 8px 16px;
     font-size: 14px;
@@ -1248,14 +1609,15 @@
   }
 
   .signature-clear-btn:hover {
-    background: #e5e7eb;
-    border-color: #9ca3af;
+    background: var(--muted-weak);
+    border-color: var(--muted-weak);
   }
 
-  .signature-save-btn {
-    background: #3b82f6;
+  .signature-save-btn,
+  .signature-replace-btn {
+    background: var(--primary);
     color: white;
-    border: 1px solid #2563eb;
+    border: 1px solid var(--primary-600, var(--primary-600));
     border-radius: 6px;
     padding: 8px 16px;
     font-size: 14px;
@@ -1264,41 +1626,14 @@
     transition: all 0.2s ease;
   }
 
-  .signature-save-btn:hover {
-    background: #2563eb;
-    border-color: #1d4ed8;
-  }
-
-  .signature-saved {
-    color: #059669;
-    font-size: 14px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .signature-replace-btn {
-    background: #3b82f6;
-    color: white;
-    border: none;
-    padding: 8px 16px;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 500;
-    transition: background-color 0.2s ease;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-
+  .signature-save-btn:hover,
   .signature-replace-btn:hover {
-    background: #2563eb;
+    background: var(--primary-600),
+    border-color: var(--primary-600-border);
   }
 
   .signature-cancel-btn {
-    background: #6b7280;
+    background: var(--muted);
     color: white;
     border: none;
     padding: 8px 16px;
@@ -1310,42 +1645,31 @@
   }
 
   .signature-cancel-btn:hover {
-    background: #4b5563;
-  }
-
-  /* File Upload Styles */
-  .file-upload-container {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .file-input {
-    display: none;
+    background: var(--muted-weak);
   }
 
   .file-placeholder {
-    background: #f9fafb;
+    background: var(--muted-weak);
     border: 2px dashed #d1d5db;
     border-radius: 8px;
     padding: 24px;
     text-align: center;
-    color: #6b7280;
+    color: var(--muted);
     cursor: pointer;
     transition: all 0.2s ease;
   }
 
   .file-placeholder:hover {
-    border-color: #3b82f6;
-    background: #f0f9ff;
-    color: #3b82f6;
+    border-color: var(--primary);
+    background: var(--primary-100-bg);
+    color: var(--primary);
   }
 
   .file-info {
     display: flex;
     align-items: center;
     gap: 12px;
-    background: #f0f9ff;
+    background: var(--primary-100-bg);
     border: 1px solid #bae6fd;
     border-radius: 8px;
     padding: 12px 16px;
@@ -1353,17 +1677,15 @@
 
   .file-name {
     font-weight: 500;
-    color: #0c4a6e;
+    color: var(--primary);
     flex: 1;
   }
-
   .file-size {
-    color: #0369a1;
+    color:var(--primary);
     font-size: 0.875rem;
   }
-
   .file-remove-btn {
-    background: #dc2626;
+    background: var(--danger);
     color: white;
     border: none;
     border-radius: 6px;
@@ -1374,13 +1696,8 @@
     transition: background-color 0.2s ease;
   }
 
-  .file-remove-btn:hover {
-    background: #b91c1c;
-  }
-
-  /* Error message styling */
   .error-message {
-    color: #dc2626;
+    color: var(--danger);
     font-size: 0.875rem;
     margin-top: 8px;
     margin-bottom: 0;
@@ -1390,19 +1707,19 @@
   .question.error input,
   .question.error textarea,
   .question.error select {
-    border-color: #dc2626;
-    background-color: #fef2f2;
+    border-color: var(--danger);
+    background-color: var(--danger-100-bg);
   }
 
   .question.error input:focus,
   .question.error textarea:focus,
   .question.error select:focus {
-    border-color: #dc2626;
-    background-color: #ffffff;
+    border-color: var(--danger);
+    background-color: var(--card-bg);
     box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
   }
 
-  /* Content Element Styles */
+  /* Many remaining structural styles reuse variables above for print/mobile */
   .content-element {
     margin-bottom: 16px;
   }
@@ -1410,35 +1727,35 @@
   .text-content p {
     font-size: 1rem;
     line-height: 1.6;
-    color: #374151;
+    color: var(--muted-weak); 
     margin: 0;
   }
 
   .markdown-content {
     font-size: 1rem;
     line-height: 1.6;
-    color: #374151;
+    color: var(--muted-weak); 
   }
 
   .markdown-content h1 {
     font-size: 1.5rem;
     font-weight: 700;
     margin: 24px 0 16px 0;
-    color: #111827;
+    color: var(--text); 
   }
 
   .markdown-content h2 {
     font-size: 1.25rem;
     font-weight: 600;
     margin: 20px 0 12px 0;
-    color: #111827;
+    color: var(--text);
   }
 
   .markdown-content h3 {
     font-size: 1.125rem;
     font-weight: 600;
     margin: 16px 0 8px 0;
-    color: #111827;
+    color: var(--text);
   }
 
   .markdown-content strong {
@@ -1450,7 +1767,7 @@
   }
 
   .markdown-content code {
-    background: #f3f4f6;
+    background: var(--muted-surface);
     padding: 2px 6px;
     border-radius: 4px;
     font-family: "Courier New", monospace;
@@ -1458,13 +1775,13 @@
   }
 
   .markdown-content blockquote {
-    background: #f8fafc;
-    border-left: 4px solid #3b82f6;
+    background: var(--bg);
+    border-left: 4px solid var(--primary);
     padding: 12px 16px;
     margin: 16px 0;
     border-radius: 0 4px 4px 0;
     font-style: italic;
-    color: #374151;
+    color: var(--muted);
   }
 
   .markdown-content ul {
@@ -1481,6 +1798,24 @@
     margin: 4px 0;
   }
 
+  .divider-content .content-divider {
+    border-top: 2px solid var(--border);
+  }
+
+ .markdown-content ul {
+    margin: 12px 0;
+    padding-left: 24px;
+  }
+
+  .markdown-content ol {
+    margin: 12px 0;
+    padding-left: 24px;
+  }
+
+  .markdown-content li {
+    margin: 4px 0;
+  }
+
   .divider-content {
     text-align: center;
     margin: 24px 0;
@@ -1528,14 +1863,15 @@
   }
 
   .unknown-element {
-    background: #fef2f2;
+    background: var(--danger-100-bg);
     border: 1px solid #fecaca;
     border-radius: 8px;
     padding: 16px;
-    color: #dc2626;
+    color: var(--danger);
     text-align: center;
   }
 
+
   .unknown-element p {
     margin: 0;
     font-weight: 500;
@@ -1557,7 +1893,7 @@
   .submission-success-icon {
     width: 48px;
     height: 48px;
-    color: #22c55e;
+    color: var(--success);
     margin-bottom: 32px;
     display: flex;
     align-items: center;
@@ -1948,8 +2284,8 @@
   }
 
   .runner-mobile-step-tab:hover:not(:disabled):not(.active) {
-    background: #f1f5f9;
-    border-color: #cbd5e1;
+    background: var(--bg);
+    border-color: var(--border);
   }
 
   .runner-mobile-step-tab:focus {
@@ -1957,13 +2293,13 @@
   }
 
   .runner-mobile-step-tab:focus:not(.active) {
-    outline: 2px solid #3b82f6;
+    outline: 2px solid var(--primary);
     outline-offset: 2px;
   }
 
   .runner-mobile-step-tab.active {
-    background: #3b82f6 !important;
-    border-color: #3b82f6 !important;
+    background: var(--primary) !important;
+    border-color: var(--primary) !important;
     color: #fff !important;
   }
 
@@ -2006,9 +2342,9 @@
 
   /* Enhance mobile tab styling for completed/active states */
   .runner-mobile-step-tab.completed:not(.active) {
-    background: #22c55e;
-    border-color: #22c55e;
-    color: #fff;
+    background: var(--success);
+    border-color: var(--success);
+    color: var(--text);
   }
 
   .runner-mobile-step-tab.completed .runner-mobile-step-badge {
@@ -2403,10 +2739,52 @@
     width: 100%;
   }
 
+  /* Submission Error Icon */
+  .submission-error-icon {
+    color: #ef4444;
+    margin-bottom: 16px;
+  }
+
+  .submission-error-icon svg {
+    stroke: #ef4444;
+  }
+
+  /* Error badge in sidebar */
+  .runner-step-badge.error {
+    background: #fee2e2;
+    color: #dc2626;
+  }
+
+  /* Retry Button */
+  .retry-button {
+    background: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    margin-top: 24px;
+  }
+
+  .retry-button:hover {
+    background: #2563eb;
+  }
+
+  .retry-button:active {
+    background: #1d4ed8;
+  }
+
   /* Clean styling for checkbox lists in print */
   .print-response-value.checkbox-response div {
     margin: 2px 0;
     line-height: 1.4;
+
+
+
+
   }
 
   .step-edit-btn {
@@ -2453,18 +2831,89 @@
     border-color: #3b82f6;
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
   }
-`,ht=N`
+`,ht=L`
+  /* Theme variables (defaults) */
+  :host {
+    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
+    --modal-backdrop-blur: 2px;
+
+    --modal-bg: #ffffff;
+    --modal-text: #111827;
+    --muted-text: #6b7280;
+    --muted-alt: #9ca3af;
+    --border-color: #e5e7eb;
+
+    --primary: #3b82f6;
+    --primary-focus-ring: rgba(59, 130, 246, 0.1);
+
+    --card-border: #e5e7eb;
+    --card-hover-bg: #f0f9ff;
+    --card-selected-bg: #eff6ff;
+
+    --close-color: #9ca3af;
+
+    --footer-bg: transparent;
+    --save-bg: #111827;
+    --save-hover: #1f2937;
+    --cancel-bg: #ffffff;
+
+    --scrollbar-track: #f1f5f9;
+    --scrollbar-thumb: #cbd5e1;
+    --scrollbar-thumb-hover: #94a3b8;
+
+    --modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+
+    --radius-lg: 12px;
+    --radius-md: 8px;
+
+    --anim-fade: 0.2s;
+    --anim-slide: 0.3s;
+  }
+
+  /* Dark mode (host attribute or data attribute) */
+  :host([theme="dark"]),
+  :host([data-theme="dark"]) {
+    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
+    --modal-backdrop-blur: 4px;
+
+    --modal-bg: #0b1220;
+    --modal-text: #f8fafc;
+    --muted-text: #94a3b8;
+    --muted-alt: #9aa4b2;
+    --border-color: #1f2937;
+
+    --primary: #60a5fa;
+    --primary-focus-ring: rgba(96, 165, 250, 0.12);
+
+    --card-border: #111827;
+    --card-hover-bg: #06202b;
+    --card-selected-bg: #0b2a4a;
+
+    --close-color: #94a3b8;
+
+    --footer-bg: transparent;
+    --save-bg: #111827;
+    --save-hover: #0b1220;
+    --cancel-bg: #0b1220;
+
+    --scrollbar-track: #031024;
+    --scrollbar-thumb: #1f2937;
+    --scrollbar-thumb-hover: #374151;
+
+    --modal-shadow: 0 20px 25px -5px rgba(2, 6, 23, 0.6);
+  }
+
   /* Modal Overlay */
   .modal-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(2px);
+    background: var(--modal-overlay-bg);
+    backdrop-filter: blur(var(--modal-backdrop-blur));
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
-    animation: fadeIn 0.2s ease-out;
+    animation: fadeIn var(--anim-fade) ease-out;
   }
 
   @keyframes fadeIn {
@@ -2478,16 +2927,17 @@
 
   /* Modal Container */
   .modal-content {
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    background: var(--modal-bg);
+    color: var(--modal-text);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--modal-shadow);
     width: 90%;
     max-width: 750px;
     max-height: 90vh;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    animation: slideUp 0.3s ease-out;
+    animation: slideUp var(--anim-slide) ease-out;
   }
 
   @keyframes slideUp {
@@ -2507,14 +2957,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 24px 32px;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .modal-header h2 {
     margin: 0;
     font-size: 20px;
     font-weight: 600;
-    color: #111827;
+    color: var(--modal-text);
   }
 
   .modal-close {
@@ -2528,15 +2978,15 @@
     border: none;
     border-radius: 6px;
     font-size: 20px;
-    color: #9ca3af;
+    color: var(--close-color);
     cursor: pointer;
     transition: all 0.2s;
     line-height: 1;
   }
 
   .modal-close:hover {
-    background: #f3f4f6;
-    color: #6b7280;
+    background: var(--card-hover-bg);
+    color: var(--muted-text);
   }
 
   /* Modal Body */
@@ -2561,7 +3011,7 @@
 
   .modal-body label {
     font-weight: 600;
-    color: #111827;
+    color: var(--modal-text);
     font-size: 14px;
   }
 
@@ -2572,33 +3022,33 @@
   .assignment-select {
     width: 100%;
     padding: 12px 16px;
-    border: 1px solid #d1d5db;
-    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
     font-size: 15px;
     font-family: inherit;
-    background: white;
-    color: #111827;
+    background: var(--modal-bg);
+    color: var(--modal-text);
     transition: all 0.2s;
     box-sizing: border-box;
   }
 
   .modal-body input::placeholder,
   .modal-body textarea::placeholder {
-    color: #9ca3af;
+    color: var(--muted-alt);
   }
 
   .modal-body input:hover,
   .modal-body textarea:hover,
   .assignment-select:hover {
-    border-color: #9ca3af;
+    border-color: var(--muted-alt);
   }
 
   .modal-body input:focus,
   .modal-body textarea:focus,
   .assignment-select:focus {
     outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-focus-ring);
   }
 
   .modal-body textarea {
@@ -2621,7 +3071,7 @@
 
   .assignment-section > label {
     font-weight: 600;
-    color: #111827;
+    color: var(--modal-text);
     font-size: 14px;
   }
 
@@ -2636,22 +3086,23 @@
     flex-direction: column;
     flex: 1;
     padding: 16px;
-    border: 2px solid #e5e7eb;
-    border-radius: 8px;
+    border: 2px solid var(--card-border);
+    border-radius: var(--radius-md);
     cursor: pointer;
     transition: all 0.2s;
     position: relative;
     min-height: 80px;
+    background: transparent;
   }
 
   .assignment-card:hover {
-    border-color: #3b82f6;
-    background: #f0f9ff;
+    border-color: var(--primary);
+    background: var(--card-hover-bg);
   }
 
   .assignment-card.selected {
-    border-color: #3b82f6;
-    background: #eff6ff;
+    border-color: var(--primary);
+    background: var(--card-selected-bg);
   }
 
   /* Custom Radio in Cards */
@@ -2661,14 +3112,14 @@
     left: 16px;
     width: 20px;
     height: 20px;
-    border: 2px solid #d1d5db;
+    border: 2px solid var(--border-color);
     border-radius: 50%;
     transition: all 0.2s;
   }
 
   .assignment-card.selected .assignment-card-radio {
-    border-color: #3b82f6;
-    background: white;
+    border-color: var(--primary);
+    background: var(--modal-bg);
   }
 
   .assignment-card.selected .assignment-card-radio::after {
@@ -2680,7 +3131,7 @@
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background: #3b82f6;
+    background: var(--primary);
   }
 
   .assignment-card-content {
@@ -2692,12 +3143,12 @@
 
   .assignment-card-title {
     font-weight: 600;
-    color: #111827;
+    color: var(--modal-text);
     font-size: 14px;
   }
 
   .assignment-card-description {
-    color: #6b7280;
+    color: var(--muted-text);
     font-size: 13px;
     line-height: 1.4;
   }
@@ -2719,7 +3170,7 @@
   }
 
   .assignment-radio-option:hover {
-    background: #f9fafb;
+    background: var(--card-hover-bg);
   }
 
   .assignment-radio-option input[type="radio"] {
@@ -2728,7 +3179,7 @@
     width: 18px;
     height: 18px;
     cursor: pointer;
-    accent-color: #3b82f6;
+    accent-color: var(--primary);
   }
 
   .assignment-radio-label {
@@ -2741,13 +3192,13 @@
 
   .assignment-radio-title {
     font-weight: 500;
-    color: #111827;
+    color: var(--modal-text);
     font-size: 14px;
     line-height: 1.3;
   }
 
   .assignment-radio-description {
-    color: #6b7280;
+    color: var(--muted-text);
     font-size: 13px;
     line-height: 1.4;
   }
@@ -2758,13 +3209,14 @@
     justify-content: flex-end;
     gap: 12px;
     padding: 20px 32px;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid var(--border-color);
+    background: var(--footer-bg);
   }
 
   .modal-footer button {
     padding: 10px 24px;
     border: none;
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     font-size: 14px;
     font-weight: 500;
     font-family: inherit;
@@ -2773,27 +3225,27 @@
   }
 
   .modal-footer .cancel-button {
-    background: white;
-    color: #374151;
-    border: 1px solid #d1d5db !important;
+    background: var(--cancel-bg);
+    color: var(--modal-text);
+    border: 1px solid var(--border-color) !important;
   }
 
   .modal-footer .cancel-button:hover {
-    background: #f9fafb;
-    border-color: #9ca3af !important;
+    background: var(--card-hover-bg);
+    border-color: var(--muted-alt) !important;
   }
 
   .modal-footer .save-button {
-    background: #111827;
+    background: var(--save-bg);
     color: white;
   }
 
   .modal-footer .save-button:hover {
-    background: #1f2937;
+    background: var(--save-hover);
   }
 
   .modal-footer .save-button:disabled {
-    background: #9ca3af;
+    background: var(--muted-alt);
     cursor: not-allowed;
     opacity: 0.6;
   }
@@ -2804,17 +3256,17 @@
   }
 
   .modal-body::-webkit-scrollbar-track {
-    background: #f1f5f9;
+    background: var(--scrollbar-track);
     border-radius: 4px;
   }
 
   .modal-body::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
+    background: var(--scrollbar-thumb);
     border-radius: 4px;
   }
 
   .modal-body::-webkit-scrollbar-thumb:hover {
-    background: #94a3b8;
+    background: var(--scrollbar-thumb-hover);
   }
 
   /* Responsive */
@@ -2834,22 +3286,22 @@
       flex-direction: column;
     }
   }
-`;var gt=Object.defineProperty,mt=Object.getOwnPropertyDescriptor,S=(s,e,t,i)=>{for(var n=i>1?void 0:i?mt(e,t):e,r=s.length-1,o;r>=0;r--)(o=s[r])&&(n=(i?o(e,t,n):o(n))||n);return i&&n&&gt(e,t,n),n};let _=class extends H{constructor(){super(...arguments),this._templateData={name:"",description:"",steps:[]},this._showStepModal=!1,this._stepFormData={title:"",description:""},this._draggedStepId=null,this._dragOverStepId=null,this._selectedStepId=null,this._questions=[],this._editingStepId=null,this._stepAssignmentCategory="individual",this._stepAssignmentType="subject",this._stepAssignmentTarget="",this._stepAssignmentFirstName="",this._stepAssignmentLastName="",this._openMenuStepId=null}connectedCallback(){super.connectedCallback(),this.workflow?(this._templateData={...this.workflow},this.workflow.steps&&this.workflow.steps.length>0&&(this._selectedStepId=this.workflow.steps[0].id),console.log("Builder loaded with existing workflow:",this.workflow.name)):this._templateData=this._getDefaultWorkflowData(),this._clickOutsideHandler=()=>this._closeStepMenu(),document.addEventListener("click",this._clickOutsideHandler)}disconnectedCallback(){super.disconnectedCallback(),this._clickOutsideHandler&&document.removeEventListener("click",this._clickOutsideHandler)}updated(s){s.has("workflow")&&this.workflow&&(this._templateData={...this.workflow},this.workflow.steps&&this.workflow.steps.length>0&&(this._selectedStepId=this.workflow.steps[0].id),console.log("Workflow property changed, reloading template data"))}_getDefaultWorkflowData(){const s={id:E(),title:"Step 1",description:"",order:1,assignment:{category:"individual",type:"subject"},elements:[],status:"pending"};return{id:E(),name:"",description:"",steps:[s]}}_handleTitleChange(s){const e=s.target;this._templateData={...this._templateData,name:e.value}}_handleDescriptionChange(s){const e=s.target;this._templateData={...this._templateData,description:e.value}}_handleCancel(){var s;console.log("🚫 Builder Widget: Cancel button clicked"),(s=this.onCancel)==null||s.call(this)}_handleSave(){var s,e,t;if((s=this._templateData.name)!=null&&s.trim()){const i={id:this._templateData.id||E(),name:this._templateData.name,description:this._templateData.description||"",steps:this._templateData.steps||[]};console.log("💾 Builder Widget: Save button clicked"),console.log("📄 Workflow Template:",JSON.stringify(i,null,2)),this.workflow?(console.log("Calling onWorkflowUpdated callback"),(e=this.onWorkflowUpdated)==null||e.call(this,i)):(console.log("Calling onWorkflowCreated callback"),(t=this.onWorkflowCreated)==null||t.call(this,i))}else console.log("⚠️ Builder Widget: Save attempted but no title provided")}_addStep(){console.log("🔹 Opening step creation modal"),this._stepFormData={title:"",description:""},this._showStepModal=!0}_closeStepModal(){console.log("🔹 Closing step creation modal"),this._showStepModal=!1,this._editingStepId=null,this._stepFormData={title:"",description:""},this._stepAssignmentCategory="individual",this._stepAssignmentType="subject",this._stepAssignmentTarget="",this._stepAssignmentFirstName="",this._stepAssignmentLastName=""}_handleStepFormInput(s){const e=s.target,{name:t,value:i}=e;this._stepFormData={...this._stepFormData,[t]:i}}_toggleStepMenu(s,e){s.stopPropagation(),this._openMenuStepId=this._openMenuStepId===e?null:e}_closeStepMenu(){this._openMenuStepId=null}_editStep(s){var t;const e=(t=this._templateData.steps)==null?void 0:t.find(i=>i.id===s);if(e){if(this._editingStepId=s,this._stepFormData={title:e.title,description:e.description},this._stepAssignmentCategory=e.assignment.category,this._stepAssignmentType=e.assignment.type,this._stepAssignmentTarget=e.assignment.email||e.assignment.targetId||"",this._stepAssignmentType==="specific_user"){const n=(e.assignment.targetName||"").split(" ");this._stepAssignmentFirstName=n[0]||"",this._stepAssignmentLastName=n.slice(1).join(" ")||""}else this._stepAssignmentFirstName="",this._stepAssignmentLastName="";this._showStepModal=!0,this._closeStepMenu(),console.log("Editing step:",s)}}_duplicateStep(s){var n,r;const e=(n=this._templateData.steps)==null?void 0:n.find(o=>o.id===s);if(!e)return;const t=this._templateData.steps||[],i={...e,id:E(),title:`${e.title} (Copy)`,order:t.length+1,elements:((r=e.elements)==null?void 0:r.map(o=>({...o,id:E()})))||[]};this._templateData={...this._templateData,steps:[...t,i]},this._closeStepMenu(),console.log("Step duplicated:",s)}_deleteStep(s){const e=(this._templateData.steps||[]).filter(t=>t.id!==s);e.forEach((t,i)=>{t.order=i+1}),this._templateData={...this._templateData,steps:e},this._selectedStepId===s&&(this._selectedStepId=e.length>0?e[0].id:null),this._closeStepMenu(),console.log("Step deleted:",s)}_createStep(){var t,i;if(!((t=this._stepFormData.title)!=null&&t.trim())){console.log("⚠️ Step title is required");return}const s=this._templateData.steps||[],e={category:this._stepAssignmentCategory,type:this._stepAssignmentType};if(this._stepAssignmentType==="specific_user"&&this._stepAssignmentTarget?(e.email=this._stepAssignmentTarget,this._stepAssignmentFirstName||this._stepAssignmentLastName?e.targetName=`${this._stepAssignmentFirstName} ${this._stepAssignmentLastName}`.trim():e.targetName=this._stepAssignmentTarget):this._stepAssignmentType==="instance_role_assignee_select"&&this._stepAssignmentTarget&&(e.targetId=this._stepAssignmentTarget),this._editingStepId){const n=s.map(r=>{var o;return r.id===this._editingStepId?{...r,title:this._stepFormData.title.trim(),description:((o=this._stepFormData.description)==null?void 0:o.trim())||"",assignment:e}:r});this._templateData={...this._templateData,steps:n},console.log("✅ Step updated:",this._editingStepId)}else{const n={id:E(),title:this._stepFormData.title.trim(),description:((i=this._stepFormData.description)==null?void 0:i.trim())||"",order:s.length+1,assignment:e,elements:[],status:"pending"};this._templateData={...this._templateData,steps:[...s,n]},this._selectedStepId=n.id,console.log("✅ Step created and selected:",n)}this._closeStepModal()}_selectStep(s){this._selectedStepId=s,console.log("🎯 Step selected:",s)}_getSelectedStep(){return!this._selectedStepId||!this._templateData.steps?null:this._templateData.steps.find(s=>s.id===this._selectedStepId)||null}_handleDragStart(s,e){this._draggedStepId=e,s.dataTransfer&&(s.dataTransfer.effectAllowed="move",s.dataTransfer.setData("text/plain",e)),console.log("🔄 Drag started for step:",e)}_handleDragEnd(s){this._draggedStepId=null,this._dragOverStepId=null,console.log("🔄 Drag ended")}_handleDragOver(s,e){s.preventDefault(),s.dataTransfer&&(s.dataTransfer.dropEffect="move"),this._dragOverStepId!==e&&(this._dragOverStepId=e)}_handleDragLeave(s){const e=s.relatedTarget;s.currentTarget.contains(e)||(this._dragOverStepId=null)}_handleDrop(s,e){if(s.preventDefault(),!this._draggedStepId||this._draggedStepId===e){this._draggedStepId=null,this._dragOverStepId=null;return}const t=this._templateData.steps||[],i=t.findIndex(a=>a.id===this._draggedStepId),n=t.findIndex(a=>a.id===e);if(i===-1||n===-1){console.error("Could not find step indices for reordering");return}console.log("🔄 Before reorder:",t.map((a,l)=>`${l+1}: ${a.title}`));const r=[...t],[o]=r.splice(i,1);r.splice(n,0,o),r.forEach((a,l)=>{a.order=l+1}),console.log("🔄 After reorder:",r.map((a,l)=>`${l+1}: ${a.title}`)),this._templateData={...this._templateData,steps:r},console.log("📝 Template updated with new step order"),this._draggedStepId=null,this._dragOverStepId=null}_addQuestion(s="text_input"){var i,n;if(!this._templateData.steps||this._templateData.steps.length===0||!this._selectedStepId){console.log("⚠️ Cannot add questions without steps or selected step");return}const e=this._getSelectedStep();if(!e){console.log("⚠️ No step selected");return}if(["text","html","divider","markdown"].includes(s)){let r={id:E(),type:s,order:(((i=e.elements)==null?void 0:i.length)||0)+1};switch(s){case"text":r.content="Enter your text content here...";break;case"html":r.content="<p>Enter your HTML content here...</p>";break;case"divider":r.content="",r.caption="Section Divider";break;case"markdown":r.content=`## Enter your markdown content here...
+`;var gt=Object.defineProperty,mt=Object.getOwnPropertyDescriptor,k=(s,e,t,i)=>{for(var r=i>1?void 0:i?mt(e,t):e,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=(i?o(e,t,r):o(r))||r);return i&&r&&gt(e,t,r),r};let y=class extends V{constructor(){super(...arguments),this._templateData={name:"",description:"",steps:[]},this._showStepModal=!1,this._stepFormData={title:"",description:""},this._draggedStepId=null,this._dragOverStepId=null,this._selectedStepId=null,this._questions=[],this._editingStepId=null,this._stepAssignmentCategory="individual",this._stepAssignmentType="subject",this._stepAssignmentTarget="",this._stepAssignmentFirstName="",this._stepAssignmentLastName="",this._openMenuStepId=null}connectedCallback(){super.connectedCallback(),this.workflow?(this._templateData={...this.workflow},this.workflow.steps&&this.workflow.steps.length>0&&(this._selectedStepId=this.workflow.steps[0].id),console.log("Builder loaded with existing workflow:",this.workflow.name)):this._templateData=this._getDefaultWorkflowData(),this._clickOutsideHandler=()=>this._closeStepMenu(),document.addEventListener("click",this._clickOutsideHandler)}disconnectedCallback(){super.disconnectedCallback(),this._clickOutsideHandler&&document.removeEventListener("click",this._clickOutsideHandler)}updated(s){s.has("workflow")&&this.workflow&&(this._templateData={...this.workflow},this.workflow.steps&&this.workflow.steps.length>0&&(this._selectedStepId=this.workflow.steps[0].id),console.log("Workflow property changed, reloading template data"))}_getDefaultWorkflowData(){const s={id:E(),title:"Step 1",description:"",order:1,assignment:{category:"individual",type:"subject"},elements:[],status:"pending"};return{id:E(),name:"",description:"",steps:[s]}}_handleTitleChange(s){const e=s.target;this._templateData={...this._templateData,name:e.value}}_handleDescriptionChange(s){const e=s.target;this._templateData={...this._templateData,description:e.value}}_handleCancel(){var s;console.log("🚫 Builder Widget: Cancel button clicked"),(s=this.onCancel)==null||s.call(this)}_handleSave(){var s,e,t;if((s=this._templateData.name)!=null&&s.trim()){const i={id:this._templateData.id||E(),name:this._templateData.name,description:this._templateData.description||"",steps:this._templateData.steps||[]};console.log("💾 Builder Widget: Save button clicked"),console.log("📄 Workflow Template:",JSON.stringify(i,null,2)),this.workflow?(console.log("Calling onWorkflowUpdated callback"),(e=this.onWorkflowUpdated)==null||e.call(this,i)):(console.log("Calling onWorkflowCreated callback"),(t=this.onWorkflowCreated)==null||t.call(this,i))}else console.log("⚠️ Builder Widget: Save attempted but no title provided")}_addStep(){console.log("🔹 Opening step creation modal"),this._stepFormData={title:"",description:""},this._showStepModal=!0}_closeStepModal(){console.log("🔹 Closing step creation modal"),this._showStepModal=!1,this._editingStepId=null,this._stepFormData={title:"",description:""},this._stepAssignmentCategory="individual",this._stepAssignmentType="subject",this._stepAssignmentTarget="",this._stepAssignmentFirstName="",this._stepAssignmentLastName=""}_handleStepFormInput(s){const e=s.target,{name:t,value:i}=e;this._stepFormData={...this._stepFormData,[t]:i}}_toggleStepMenu(s,e){s.stopPropagation(),this._openMenuStepId=this._openMenuStepId===e?null:e}_closeStepMenu(){this._openMenuStepId=null}_editStep(s){var t;const e=(t=this._templateData.steps)==null?void 0:t.find(i=>i.id===s);if(e){if(this._editingStepId=s,this._stepFormData={title:e.title,description:e.description},this._stepAssignmentCategory=e.assignment.category,this._stepAssignmentType=e.assignment.type,this._stepAssignmentTarget=e.assignment.email||e.assignment.targetId||"",this._stepAssignmentType==="specific_user"){const r=(e.assignment.targetName||"").split(" ");this._stepAssignmentFirstName=r[0]||"",this._stepAssignmentLastName=r.slice(1).join(" ")||""}else this._stepAssignmentFirstName="",this._stepAssignmentLastName="";this._showStepModal=!0,this._closeStepMenu(),console.log("Editing step:",s)}}_duplicateStep(s){var r,n;const e=(r=this._templateData.steps)==null?void 0:r.find(o=>o.id===s);if(!e)return;const t=this._templateData.steps||[],i={...e,id:E(),title:`${e.title} (Copy)`,order:t.length+1,elements:((n=e.elements)==null?void 0:n.map(o=>({...o,id:E()})))||[]};this._templateData={...this._templateData,steps:[...t,i]},this._closeStepMenu(),console.log("Step duplicated:",s)}_deleteStep(s){const e=(this._templateData.steps||[]).filter(t=>t.id!==s);e.forEach((t,i)=>{t.order=i+1}),this._templateData={...this._templateData,steps:e},this._selectedStepId===s&&(this._selectedStepId=e.length>0?e[0].id:null),this._closeStepMenu(),console.log("Step deleted:",s)}_createStep(){var t,i;if(!((t=this._stepFormData.title)!=null&&t.trim())){console.log("⚠️ Step title is required");return}const s=this._templateData.steps||[],e={category:this._stepAssignmentCategory,type:this._stepAssignmentType};if(this._stepAssignmentType==="specific_user"&&this._stepAssignmentTarget?(e.email=this._stepAssignmentTarget,this._stepAssignmentFirstName||this._stepAssignmentLastName?e.targetName=`${this._stepAssignmentFirstName} ${this._stepAssignmentLastName}`.trim():e.targetName=this._stepAssignmentTarget):this._stepAssignmentType==="instance_role_assignee_select"&&this._stepAssignmentTarget&&(e.targetId=this._stepAssignmentTarget),this._editingStepId){const r=s.map(n=>{var o;return n.id===this._editingStepId?{...n,title:this._stepFormData.title.trim(),description:((o=this._stepFormData.description)==null?void 0:o.trim())||"",assignment:e}:n});this._templateData={...this._templateData,steps:r},console.log("✅ Step updated:",this._editingStepId)}else{const r={id:E(),title:this._stepFormData.title.trim(),description:((i=this._stepFormData.description)==null?void 0:i.trim())||"",order:s.length+1,assignment:e,elements:[],status:"pending"};this._templateData={...this._templateData,steps:[...s,r]},this._selectedStepId=r.id,console.log("✅ Step created and selected:",r)}this._closeStepModal()}_selectStep(s){this._selectedStepId=s,console.log("🎯 Step selected:",s)}_getSelectedStep(){return!this._selectedStepId||!this._templateData.steps?null:this._templateData.steps.find(s=>s.id===this._selectedStepId)||null}_handleDragStart(s,e){this._draggedStepId=e,s.dataTransfer&&(s.dataTransfer.effectAllowed="move",s.dataTransfer.setData("text/plain",e)),console.log("🔄 Drag started for step:",e)}_handleDragEnd(s){this._draggedStepId=null,this._dragOverStepId=null,console.log("🔄 Drag ended")}_handleDragOver(s,e){s.preventDefault(),s.dataTransfer&&(s.dataTransfer.dropEffect="move"),this._dragOverStepId!==e&&(this._dragOverStepId=e)}_handleDragLeave(s){const e=s.relatedTarget;s.currentTarget.contains(e)||(this._dragOverStepId=null)}_handleDrop(s,e){if(s.preventDefault(),!this._draggedStepId||this._draggedStepId===e){this._draggedStepId=null,this._dragOverStepId=null;return}const t=this._templateData.steps||[],i=t.findIndex(a=>a.id===this._draggedStepId),r=t.findIndex(a=>a.id===e);if(i===-1||r===-1){console.error("Could not find step indices for reordering");return}console.log("🔄 Before reorder:",t.map((a,d)=>`${d+1}: ${a.title}`));const n=[...t],[o]=n.splice(i,1);n.splice(r,0,o),n.forEach((a,d)=>{a.order=d+1}),console.log("🔄 After reorder:",n.map((a,d)=>`${d+1}: ${a.title}`)),this._templateData={...this._templateData,steps:n},console.log("📝 Template updated with new step order"),this._draggedStepId=null,this._dragOverStepId=null}_addQuestion(s="text_input"){var i,r;if(!this._templateData.steps||this._templateData.steps.length===0||!this._selectedStepId){console.log("⚠️ Cannot add questions without steps or selected step");return}const e=this._getSelectedStep();if(!e){console.log("⚠️ No step selected");return}if(["text","html","divider","markdown"].includes(s)){let n={id:E(),type:s,order:(((i=e.elements)==null?void 0:i.length)||0)+1};switch(s){case"text":n.content="Enter your text content here...";break;case"html":n.content="<p>Enter your HTML content here...</p>";break;case"divider":n.content="",n.caption="Section Divider";break;case"markdown":n.content=`## Enter your markdown content here...
 
-Use **bold** and *italic* text.`;break}const o=this._templateData.steps.map(a=>a.id===this._selectedStepId?{...a,elements:[...a.elements||[],r]}:a);this._templateData={...this._templateData,steps:o},console.log("✅ Content element added to step:",this._selectedStepId)}else{const r={id:E(),type:s,label:this._getQuestionTypeDisplayName(s),order:(((n=e.elements)==null?void 0:n.length)||0)+1,required:!1};["select","radio","checkbox"].includes(s)&&(r.options=["Option 1","Option 2"]);const o=this._templateData.steps.map(a=>a.id===this._selectedStepId?{...a,elements:[...a.elements||[],r]}:a);this._templateData={...this._templateData,steps:o},console.log("✅ Question added to step:",this._selectedStepId)}}_addContentElement(s){var n;if(!this._templateData.steps||this._templateData.steps.length===0||!this._selectedStepId){console.log("⚠️ Cannot add content without steps or selected step");return}const e=this._getSelectedStep();if(!e){console.log("⚠️ No step selected");return}let t={id:E(),type:s,order:(((n=e.elements)==null?void 0:n.length)||0)+1};switch(s){case"text":t.content="Enter your text content here...";break;case"html":t.content="<p>Enter your HTML content here...</p>";break;case"image":t.content="",t.url="",t.alt="",t.caption="";break;case"video":t.content="",t.url="",t.caption="";break;case"file":t.content="",t.url="",t.caption="";break;case"divider":t.content="",t.caption="Section Divider";break;case"markdown":t.content=`## Enter your markdown content here...
+Use **bold** and *italic* text.`;break}const o=this._templateData.steps.map(a=>a.id===this._selectedStepId?{...a,elements:[...a.elements||[],n]}:a);this._templateData={...this._templateData,steps:o},console.log("✅ Content element added to step:",this._selectedStepId)}else{const n={id:E(),type:s,label:this._getQuestionTypeDisplayName(s),order:(((r=e.elements)==null?void 0:r.length)||0)+1,required:!1};["select","radio","checkbox"].includes(s)&&(n.options=["Option 1","Option 2"]);const o=this._templateData.steps.map(a=>a.id===this._selectedStepId?{...a,elements:[...a.elements||[],n]}:a);this._templateData={...this._templateData,steps:o},console.log("✅ Question added to step:",this._selectedStepId)}}_addContentElement(s){var r;if(!this._templateData.steps||this._templateData.steps.length===0||!this._selectedStepId){console.log("⚠️ Cannot add content without steps or selected step");return}const e=this._getSelectedStep();if(!e){console.log("⚠️ No step selected");return}let t={id:E(),type:s,order:(((r=e.elements)==null?void 0:r.length)||0)+1};switch(s){case"text":t.content="Enter your text content here...";break;case"html":t.content="<p>Enter your HTML content here...</p>";break;case"image":t.content="",t.url="",t.alt="",t.caption="";break;case"video":t.content="",t.url="",t.caption="";break;case"file":t.content="",t.url="",t.caption="";break;case"divider":t.content="",t.caption="Section Divider";break;case"markdown":t.content=`## Enter your markdown content here...
 
-Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r.id===this._selectedStepId?{...r,elements:[...r.elements||[],t]}:r);this._templateData={...this._templateData,steps:i},console.log("✅ Content element added to step:",this._selectedStepId)}_updateQuestion(s,e){var i;if(!this._selectedStepId)return;const t=(i=this._templateData.steps)==null?void 0:i.map(n=>{var r;return n.id===this._selectedStepId?{...n,elements:((r=n.elements)==null?void 0:r.map(o=>o.id===s?{...o,...e}:o))||[]}:n});this._templateData={...this._templateData,steps:t}}_updateContentElement(s,e){var i;if(!this._selectedStepId)return;const t=(i=this._templateData.steps)==null?void 0:i.map(n=>{var r;return n.id===this._selectedStepId?{...n,elements:((r=n.elements)==null?void 0:r.map(o=>o.id===s?{...o,...e}:o))||[]}:n});this._templateData={...this._templateData,steps:t}}_deleteQuestion(s){var t;if(!this._selectedStepId)return;const e=(t=this._templateData.steps)==null?void 0:t.map(i=>{var n;return i.id===this._selectedStepId?{...i,elements:((n=i.elements)==null?void 0:n.filter(r=>r.id!==s))||[]}:i});this._templateData={...this._templateData,steps:e},console.log("🗑️ Question deleted:",s)}_renderQuestionTypeSpecificFields(s){switch(s.type){case"select":case"radio":return d`
+Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(n=>n.id===this._selectedStepId?{...n,elements:[...n.elements||[],t]}:n);this._templateData={...this._templateData,steps:i},console.log("✅ Content element added to step:",this._selectedStepId)}_updateQuestion(s,e){var i;if(!this._selectedStepId)return;const t=(i=this._templateData.steps)==null?void 0:i.map(r=>{var n;return r.id===this._selectedStepId?{...r,elements:((n=r.elements)==null?void 0:n.map(o=>o.id===s?{...o,...e}:o))||[]}:r});this._templateData={...this._templateData,steps:t}}_updateContentElement(s,e){var i;if(!this._selectedStepId)return;const t=(i=this._templateData.steps)==null?void 0:i.map(r=>{var n;return r.id===this._selectedStepId?{...r,elements:((n=r.elements)==null?void 0:n.map(o=>o.id===s?{...o,...e}:o))||[]}:r});this._templateData={...this._templateData,steps:t}}_deleteQuestion(s){var t;if(!this._selectedStepId)return;const e=(t=this._templateData.steps)==null?void 0:t.map(i=>{var r;return i.id===this._selectedStepId?{...i,elements:((r=i.elements)==null?void 0:r.filter(n=>n.id!==s))||[]}:i});this._templateData={...this._templateData,steps:e},console.log("🗑️ Question deleted:",s)}_renderQuestionTypeSpecificFields(s){switch(s.type){case"select":case"radio":return l`
           <div class="question-options-section">
             <label class="options-label">Options:</label>
             <div class="options-list">
-              ${(s.options||[]).map((e,t)=>d`
+              ${(s.options||[]).map((e,t)=>l`
                   <div class="option-item">
                     <input
                       type="text"
                       class="option-input"
                       placeholder="Option ${t+1}"
                       .value=${e}
-                      @input=${i=>{const n=i.target,r=[...s.options||[]];r[t]=n.value,this._updateQuestion(s.id,{options:r})}}
+                      @input=${i=>{const r=i.target,n=[...s.options||[]];n[t]=r.value,this._updateQuestion(s.id,{options:n})}}
                     />
                     <button
                       class="remove-option-button"
@@ -2883,7 +3335,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               </button>
             </div>
           </div>
-        `;case"checkbox":return d`
+        `;case"checkbox":return l`
           <div class="question-checkbox-config">
             <div class="checkbox-type-selection">
               <label class="checkbox-type-label">
@@ -2908,18 +3360,18 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               </label>
             </div>
 
-            ${s.options&&s.options.length>0?d`
+            ${s.options&&s.options.length>0?l`
                   <div class="question-options-section">
                     <label class="options-label">Checkbox Options:</label>
                     <div class="options-list">
-                      ${(s.options||[]).map((e,t)=>d`
+                      ${(s.options||[]).map((e,t)=>l`
                           <div class="option-item">
                             <input
                               type="text"
                               class="option-input"
                               placeholder="Option ${t+1}"
                               .value=${e}
-                              @input=${i=>{const n=i.target,r=[...s.options||[]];r[t]=n.value,this._updateQuestion(s.id,{options:r})}}
+                              @input=${i=>{const r=i.target,n=[...s.options||[]];n[t]=r.value,this._updateQuestion(s.id,{options:n})}}
                             />
                             <button
                               class="remove-option-button"
@@ -2967,7 +3419,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                       </button>
                     </div>
                   </div>
-                `:d`
+                `:l`
                   <div class="single-checkbox-info">
                     <p class="config-note">
                       Single checkbox - users can check/uncheck for Yes/No response
@@ -2975,7 +3427,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                   </div>
                 `}
           </div>
-        `;case"textarea":return d`
+        `;case"textarea":return l`
           <div class="question-config-section">
             <label class="config-label">
               Placeholder:
@@ -2988,7 +3440,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               />
             </label>
           </div>
-        `;case"text_input":return d`
+        `;case"text_input":return l`
           <div class="question-config-section">
             <label class="config-label">
               Placeholder:
@@ -3001,7 +3453,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               />
             </label>
           </div>
-        `;case"number":return d`
+        `;case"number":return l`
           <div class="question-config-section">
             <label class="config-label">
               Placeholder:
@@ -3014,19 +3466,19 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               />
             </label>
           </div>
-        `;case"file_upload":return d`
+        `;case"file_upload":return l`
           <div class="question-config-section">
             <p class="config-note">File upload field - users can upload files</p>
           </div>
-        `;case"signature":return d`
+        `;case"signature":return l`
           <div class="question-config-section">
             <p class="config-note">Digital signature pad - users can sign with mouse/touch</p>
           </div>
-        `;case"date":return d`
+        `;case"date":return l`
           <div class="question-config-section">
             <p class="config-note">Date picker field</p>
           </div>
-        `;default:return d``}}_renderContentTypeSpecificFields(s){switch(s.type){case"text":return d`
+        `;default:return l``}}_renderContentTypeSpecificFields(s){switch(s.type){case"text":return l`
           <div class="content-config-section">
             <label class="config-label">
               Text Content:
@@ -3038,7 +3490,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               ></textarea>
             </label>
           </div>
-        `;case"html":return d`
+        `;case"html":return l`
           <div class="content-config-section">
             <label class="config-label">
               HTML Content:
@@ -3050,7 +3502,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               ></textarea>
             </label>
           </div>
-        `;case"image":return d`
+        `;case"image":return l`
           <div class="content-config-section">
             <label class="config-label">
               Image URL:
@@ -3083,7 +3535,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               />
             </label>
           </div>
-        `;case"video":return d`
+        `;case"video":return l`
           <div class="content-config-section">
             <label class="config-label">
               Video URL:
@@ -3106,7 +3558,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               />
             </label>
           </div>
-        `;case"file":return d`
+        `;case"file":return l`
           <div class="content-config-section">
             <label class="config-label">
               File URL:
@@ -3129,7 +3581,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               />
             </label>
           </div>
-        `;case"divider":return d`
+        `;case"divider":return l`
           <div class="content-config-section">
             <label class="config-label">
               Caption:
@@ -3142,7 +3594,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               />
             </label>
           </div>
-        `;case"markdown":return d`
+        `;case"markdown":return l`
           <div class="content-config-section">
             <label class="config-label">
               Markdown Content:
@@ -3154,7 +3606,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               ></textarea>
             </label>
           </div>
-        `;default:return d``}}_getQuestionTypeDisplayName(s){switch(s){case"text_input":return"Text Input";case"textarea":return"Long Text";case"select":return"Select";case"radio":return"Radio";case"checkbox":return"Checkbox";case"number":return"Number";case"date":return"Date";case"file_upload":return"File Upload";case"signature":return"Signature";default:return"Question"}}_getContentTypeDisplayName(s){switch(s){case"text":return"Text";case"html":return"HTML";case"image":return"Image";case"video":return"Video";case"file":return"File";case"divider":return"Divider";case"markdown":return"Markdown";default:return"Content"}}_getCheckboxTypeDisplayName(s){return s.options&&s.options.length>0?"Checkbox Group":"Single Checkbox"}_hasSteps(){const s=!!(this._templateData.steps&&this._templateData.steps.length>0);return s&&!this._selectedStepId&&this._templateData.steps&&(this._selectedStepId=this._templateData.steps[0].id,console.log("🎯 Auto-selected first step:",this._templateData.steps[0].title)),!s&&this._selectedStepId&&(this._selectedStepId=null),s}_getAssignmentDisplayText(s){switch(s.category){case"individual":switch(s.type){case"subject":return"Assigned to: Subject";case"creator":return"Assigned to: Creator";case"instance_assignee_select":return"Assigned to: To be selected";case"specific_user":return s.email?`Assigned to: ${s.email}`:"Assigned to: Specific user";default:return"Assigned to: Individual"}case"role":switch(s.type){case"instance_role_assignee_select":return s.targetId?`Assigned to: ${s.targetId} role`:"Assigned to: Role";default:return"Assigned to: Role"}default:return"Assignment not configured"}}render(){var e;const s=this._getSelectedStep();return d`
+        `;default:return l``}}_getQuestionTypeDisplayName(s){switch(s){case"text_input":return"Text Input";case"textarea":return"Long Text";case"select":return"Select";case"radio":return"Radio";case"checkbox":return"Checkbox";case"number":return"Number";case"date":return"Date";case"file_upload":return"File Upload";case"signature":return"Signature";default:return"Question"}}_getContentTypeDisplayName(s){switch(s){case"text":return"Text";case"html":return"HTML";case"image":return"Image";case"video":return"Video";case"file":return"File";case"divider":return"Divider";case"markdown":return"Markdown";default:return"Content"}}_getCheckboxTypeDisplayName(s){return s.options&&s.options.length>0?"Checkbox Group":"Single Checkbox"}_hasSteps(){const s=!!(this._templateData.steps&&this._templateData.steps.length>0);return s&&!this._selectedStepId&&this._templateData.steps&&(this._selectedStepId=this._templateData.steps[0].id,console.log("🎯 Auto-selected first step:",this._templateData.steps[0].title)),!s&&this._selectedStepId&&(this._selectedStepId=null),s}_getAssignmentDisplayText(s){switch(s.category){case"individual":switch(s.type){case"subject":return"Assigned to: Subject";case"creator":return"Assigned to: Creator";case"instance_assignee_select":return"Assigned to: To be selected";case"specific_user":return s.email?`Assigned to: ${s.email}`:"Assigned to: Specific user";default:return"Assigned to: Individual"}case"role":switch(s.type){case"instance_role_assignee_select":return s.targetId?`Assigned to: ${s.targetId} role`:"Assigned to: Role";default:return"Assigned to: Role"}default:return"Assignment not configured"}}render(){var e;const s=this._getSelectedStep();return l`
       <div class="header">
         <div class="header-inputs">
           <div class="form-group">
@@ -3184,7 +3636,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
       </div>
 
       <div class="main-content">
-        ${this._showStepModal?d`
+        ${this._showStepModal?l`
               <div class="modal-overlay" @click=${this._closeStepModal}>
                 <div class="modal-content" @click=${t=>t.stopPropagation()}>
                   <div class="modal-header">
@@ -3245,7 +3697,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                         </div>
                       </div>
 
-                      ${this._stepAssignmentCategory==="individual"?d`
+                      ${this._stepAssignmentCategory==="individual"?l`
                             <div class="assignment-radio-group">
                               <label class="assignment-radio-option">
                                 <input
@@ -3316,7 +3768,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                               </label>
                             </div>
 
-                            ${this._stepAssignmentType==="specific_user"?d`
+                            ${this._stepAssignmentType==="specific_user"?l`
                                   <div class="assignment-name-fields">
                                     <input
                                       type="text"
@@ -3341,7 +3793,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                                     @input=${t=>{const i=t.target;this._stepAssignmentTarget=i.value}}
                                   />
                                 `:""}
-                          `:d`
+                          `:l`
                             <div class="assignment-radio-group">
                               <label class="assignment-radio-option">
                                 <input
@@ -3385,11 +3837,11 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
           <div class="section">
             <div class="section-header">
               <h2>Steps</h2>
-              <button class="add-button" @click=${this._addStep}>Add</button>
+              <button class="add-button" @click=${this._addStep}>Add step</button>
             </div>
 
             <div class="steps-list">
-              ${((e=this._templateData.steps)==null?void 0:e.map(t=>d`
+              ${((e=this._templateData.steps)==null?void 0:e.map(t=>l`
                   <div
                     class="step-item ${this._selectedStepId===t.id?"selected":""} ${this._dragOverStepId===t.id?"drag-over":""}"
                     @click=${()=>this._selectStep(t.id)}
@@ -3455,7 +3907,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                       >
                         ⋯
                       </button>
-                      ${this._openMenuStepId===t.id?d`
+                      ${this._openMenuStepId===t.id?l`
                             <div class="step-menu-dropdown">
                               <button
                                 class="step-menu-item"
@@ -3544,24 +3996,23 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
           <!-- Questions Section -->
           <div class="section">
             <div class="section-header">
-              <h2>Questions</h2>
-              <button class="add-button" @click=${()=>this._addQuestion()}>Add</button>
+              <h2>Blocks</h2>
+              <button class="add-button" @click=${()=>this._addQuestion()}>Add block</button>
             </div>
 
-            ${s&&s.elements&&s.elements.length>0?d`
+            ${s&&s.elements&&s.elements.length>0?l`
                   <div class="elements-list">
-                    ${s.elements.map(t=>{const i="label"in t&&"required"in t,n="content"in t;if(i){const r=t;return d`
+                    ${s.elements.map(t=>{const i="label"in t&&"required"in t,r="content"in t;if(i){const n=t;return l`
                           <div class="question-item">
                             <div class="question-header">
                               <h3 class="question-title">
-                                ${r.label||(r.type==="checkbox"?this._getCheckboxTypeDisplayName(r):this._getQuestionTypeDisplayName(r.type))}
+                                ${n.label||(n.type==="checkbox"?this._getCheckboxTypeDisplayName(n):this._getQuestionTypeDisplayName(n.type))}
                               </h3>
                               <div class="question-header-controls">
                                 <select
                                   class="question-type-select"
-                                  .value=${r.type||"text_input"}
-                                  style="color: #000 !important;"
-                                  @change=${o=>{const l=o.target.value;if(["text","html","divider","markdown"].includes(l)){this._addQuestion(l),this._deleteQuestion(r.id);return}const c={type:l};["select","radio","checkbox"].includes(l)&&!r.options&&(c.options=["Option 1","Option 2"]);const u=this._getQuestionTypeDisplayName(r.type);(!r.label||r.label===u)&&(c.label=this._getQuestionTypeDisplayName(l)),this._updateQuestion(r.id,c)}}
+                                  .value=${n.type||"text_input"}
+                                  @change=${o=>{const d=o.target.value;if(["text","html","divider","markdown"].includes(d)){this._addQuestion(d),this._deleteQuestion(n.id);return}const c={type:d};["select","radio","checkbox"].includes(d)&&!n.options&&(c.options=["Option 1","Option 2"]);const u=this._getQuestionTypeDisplayName(n.type);(!n.label||n.label===u)&&(c.label=this._getQuestionTypeDisplayName(d)),this._updateQuestion(n.id,c)}}
                                 >
                                   <optgroup label="Questions">
                                     <option value="text_input">Text Input (short)</option>
@@ -3583,8 +4034,8 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                                 </select>
                                 <button
                                   class="delete-question-button"
-                                  @click=${()=>this._deleteQuestion(r.id)}
-                                  title="Delete question"
+                                  @click=${()=>this._deleteQuestion(n.id)}
+                                  title="Delete question block"
                                 >
                                   <svg
                                     xmlns="http://www.w3.org/2000/svg"
@@ -3612,33 +4063,32 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                               type="text"
                               class="question-label-input"
                               placeholder="Question label"
-                              .value=${r.label||""}
-                              @input=${o=>{const a=o.target;this._updateQuestion(r.id,{label:a.value})}}
+                              .value=${n.label||""}
+                              @input=${o=>{const a=o.target;this._updateQuestion(n.id,{label:a.value})}}
                             />
 
-                            ${this._renderQuestionTypeSpecificFields(r)}
+                            ${this._renderQuestionTypeSpecificFields(n)}
 
                             <label class="question-required-label">
                               <input
                                 type="checkbox"
-                                .checked=${r.required||!1}
-                                @change=${o=>{const a=o.target;this._updateQuestion(r.id,{required:a.checked})}}
+                                .checked=${n.required||!1}
+                                @change=${o=>{const a=o.target;this._updateQuestion(n.id,{required:a.checked})}}
                               />
                               Required
                             </label>
                           </div>
-                        `}else if(n){const r=t;return d`
+                        `}else if(r){const n=t;return l`
                           <div class="question-item">
                             <div class="question-header">
                               <h3 class="question-title">
-                                ${this._getContentTypeDisplayName(r.type)}
+                                ${this._getContentTypeDisplayName(n.type)}
                               </h3>
                               <div class="question-header-controls">
                                 <select
                                   class="question-type-select"
                                   .value=${t.type||"text"}
-                                  style="color: #000 !important;"
-                                  @change=${o=>{const l=o.target.value;if(!["text","html","divider","markdown"].includes(l)){this._addQuestion(l),this._deleteQuestion(t.id);return}this._addQuestion(l),this._deleteQuestion(t.id)}}
+                                  @change=${o=>{const d=o.target.value;if(!["text","html","divider","markdown"].includes(d)){this._addQuestion(d),this._deleteQuestion(t.id);return}this._addQuestion(d),this._deleteQuestion(t.id)}}
                                 >
                                   <optgroup label="Questions">
                                     <option value="text_input">Text Input (short)</option>
@@ -3661,7 +4111,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                                 <button
                                   class="delete-question-button"
                                   @click=${()=>this._deleteQuestion(t.id)}
-                                  title="Delete content"
+                                  title="Delete content block"
                                 >
                                   <svg
                                     xmlns="http://www.w3.org/2000/svg"
@@ -3685,18 +4135,18 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                               </div>
                             </div>
                             <div class="question-content">
-                              ${this._renderContentTypeSpecificFields(r)}
+                              ${this._renderContentTypeSpecificFields(n)}
                             </div>
                           </div>
-                        `}else{const r=t;return d`
+                        `}else{const n=t;return l`
                           <div class="question-item">
                             <div class="question-header">
                               <h3 class="question-title">Unknown Element</h3>
                               <div class="question-header-controls">
                                 <button
                                   class="delete-question-button"
-                                  @click=${()=>this._deleteQuestion(r.id)}
-                                  title="Delete element"
+                                  @click=${()=>this._deleteQuestion(n.id)}
+                                  title="Delete block"
                                 >
                                   ✕
                                 </button>
@@ -3705,125 +4155,127 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                           </div>
                         `}})}
                   </div>
-                `:d`
+                `:l`
                   <div class="empty-state">
-                    <h3>Add questions</h3>
+                    <h3>Add blocks</h3>
                     <p>Use the add button to start building your workflow</p>
-                    <button class="add-button" @click=${()=>this._addQuestion()}>Add</button>
+                    <button class="add-button" @click=${()=>this._addQuestion()}>
+                      Add block
+                    </button>
                   </div>
                 `}
           </div>
         </div>
       </div>
-    `}};_.styles=N`
+    `}};y.styles=L`
     ${pt}
     ${ct}
     ${ut}
-    ${Ue}
+    ${Ne}
     ${ht}
-  `,S([f()],_.prototype,"_templateData",2),S([f()],_.prototype,"_showStepModal",2),S([f()],_.prototype,"_stepFormData",2),S([f()],_.prototype,"_draggedStepId",2),S([f()],_.prototype,"_dragOverStepId",2),S([f()],_.prototype,"_selectedStepId",2),S([f()],_.prototype,"_questions",2),S([f()],_.prototype,"_editingStepId",2),S([f()],_.prototype,"_stepAssignmentCategory",2),S([f()],_.prototype,"_stepAssignmentType",2),S([f()],_.prototype,"_stepAssignmentTarget",2),S([f()],_.prototype,"_stepAssignmentFirstName",2),S([f()],_.prototype,"_stepAssignmentLastName",2),S([A({attribute:!1})],_.prototype,"onCancel",2),S([A({attribute:!1})],_.prototype,"workflow",2),S([f()],_.prototype,"_openMenuStepId",2),_=S([Ie("builder-widget")],_);class ft{constructor(e,t){this.signaturePads=e,this.savedSignatures=t}validateStep(e,t,i){if(i==="preview")return{isValid:!0,errors:{}};if(!e)return{isValid:!1,errors:{}};let n=!0;const r={};for(const o of e.elements)if(this.isQuestionElement(o)){const a=o;if(a.required){const l=this.validateQuestion(a,t[a.id]);l&&(n=!1,r[a.id]=l.message)}}return{isValid:n,errors:r}}validateQuestion(e,t){switch(e.type){case"checkbox":return this.validateCheckbox(e,t);case"signature":return this.validateSignature(e,t);case"file_upload":return this.validateFileUpload(e,t);default:return this.validateBasicField(e,t)}}validateCheckbox(e,t){if(e.options&&e.options.length>0){if(!Array.isArray(t)||t.length===0)return{questionId:e.id,message:`${e.label} is required.`}}else if(t!==!0)return{questionId:e.id,message:`${e.label} is required.`};return null}validateSignature(e,t){const i=this.signaturePads.get(e.id);return!i||i.isEmpty()?{questionId:e.id,message:`${e.label} is required.`}:this.savedSignatures.has(e.id)?null:{questionId:e.id,message:`Please save your ${e.label} before continuing.`}}validateFileUpload(e,t){return!t||t===null||t===void 0?{questionId:e.id,message:`${e.label} is required.`}:null}validateBasicField(e,t){return t==null||t===""?{questionId:e.id,message:`${e.label} is required.`}:null}isQuestionElement(e){return["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"].includes(e.type)}}class bt{getStorageKey(e){return`runner-form-data-${e||"default"}`}saveFormData(e,t,i,n,r,o){var c,u,h;const a=this.getStorageKey(e),l=o?{...o,currentStepId:(u=(c=o.steps)==null?void 0:c[i])==null?void 0:u.id,completedSteps:Array.from(r),steps:(h=o.steps)==null?void 0:h.map(m=>({...m,responses:m.responses||[]}))}:null,p={formData:t,timestamp:new Date().toISOString(),stepIndex:i,savedSignatures:Array.from(n),completedSteps:Array.from(r),instance:l};try{localStorage.setItem(a,JSON.stringify(p))}catch(m){console.warn("Failed to save form data to localStorage:",m)}}restoreFormData(e){const t=this.getStorageKey(e);try{const i=localStorage.getItem(t);if(!i)return null;const n=JSON.parse(i);return{formData:n.formData||{},stepIndex:n.stepIndex||0,savedSignatures:new Set(n.savedSignatures||[]),completedSteps:new Set(n.completedSteps||[]),savedInstance:n.instance||null}}catch(i){return console.warn("Failed to restore form data from localStorage:",i),null}}clearFormData(e,t="completed workflow"){const i=this.getStorageKey(e);try{localStorage.removeItem(i),console.log(`Cleared saved form data for ${t}`)}catch(n){console.warn("Failed to clear saved form data:",n)}}shouldRestoreData(e){return e==="default"}}/*!
+  `,k([b()],y.prototype,"_templateData",2),k([b()],y.prototype,"_showStepModal",2),k([b()],y.prototype,"_stepFormData",2),k([b()],y.prototype,"_draggedStepId",2),k([b()],y.prototype,"_dragOverStepId",2),k([b()],y.prototype,"_selectedStepId",2),k([b()],y.prototype,"_questions",2),k([b()],y.prototype,"_editingStepId",2),k([b()],y.prototype,"_stepAssignmentCategory",2),k([b()],y.prototype,"_stepAssignmentType",2),k([b()],y.prototype,"_stepAssignmentTarget",2),k([b()],y.prototype,"_stepAssignmentFirstName",2),k([b()],y.prototype,"_stepAssignmentLastName",2),k([D({attribute:!1})],y.prototype,"onCancel",2),k([D({attribute:!1})],y.prototype,"workflow",2),k([b()],y.prototype,"_openMenuStepId",2),y=k([Ue("builder-widget")],y);class ft{constructor(e,t){this.signaturePads=e,this.savedSignatures=t}validateStep(e,t,i){if(i==="preview")return{isValid:!0,errors:{}};if(!e)return{isValid:!1,errors:{}};let r=!0;const n={};for(const o of e.elements)if(this.isQuestionElement(o)){const a=o;if(a.required){const d=this.validateQuestion(a,t[a.id]);d&&(r=!1,n[a.id]=d.message)}}return{isValid:r,errors:n}}validateQuestion(e,t){switch(e.type){case"checkbox":return this.validateCheckbox(e,t);case"signature":return this.validateSignature(e,t);case"file_upload":return this.validateFileUpload(e,t);default:return this.validateBasicField(e,t)}}validateCheckbox(e,t){if(e.options&&e.options.length>0){if(!Array.isArray(t)||t.length===0)return{questionId:e.id,message:`${e.label} is required.`}}else if(t!==!0)return{questionId:e.id,message:`${e.label} is required.`};return null}validateSignature(e,t){const i=this.signaturePads.get(e.id);return!i||i.isEmpty()?{questionId:e.id,message:`${e.label} is required.`}:this.savedSignatures.has(e.id)?null:{questionId:e.id,message:`Please save your ${e.label} before continuing.`}}validateFileUpload(e,t){return!t||t===null||t===void 0?{questionId:e.id,message:`${e.label} is required.`}:null}validateBasicField(e,t){return t==null||t===""?{questionId:e.id,message:`${e.label} is required.`}:null}isQuestionElement(e){return["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"].includes(e.type)}}class bt{getStorageKey(e){return`runner-form-data-${e||"default"}`}saveFormData(e,t,i,r,n,o){var c,u,h;const a=this.getStorageKey(e),d=o?{...o,currentStepId:(u=(c=o.steps)==null?void 0:c[i])==null?void 0:u.id,completedSteps:Array.from(n),steps:(h=o.steps)==null?void 0:h.map(m=>({...m,responses:m.responses||[]}))}:null,p={formData:t,timestamp:new Date().toISOString(),stepIndex:i,savedSignatures:Array.from(r),completedSteps:Array.from(n),instance:d};try{localStorage.setItem(a,JSON.stringify(p))}catch(m){console.warn("Failed to save form data to localStorage:",m)}}restoreFormData(e){const t=this.getStorageKey(e);try{const i=localStorage.getItem(t);if(!i)return null;const r=JSON.parse(i);return{formData:r.formData||{},stepIndex:r.stepIndex||0,savedSignatures:new Set(r.savedSignatures||[]),completedSteps:new Set(r.completedSteps||[]),savedInstance:r.instance||null}}catch(i){return console.warn("Failed to restore form data from localStorage:",i),null}}clearFormData(e,t="completed workflow"){const i=this.getStorageKey(e);try{localStorage.removeItem(i),console.log(`Cleared saved form data for ${t}`)}catch(r){console.warn("Failed to clear saved form data:",r)}}shouldRestoreData(e){return e==="default"}}/*!
  * Signature Pad v5.0.10 | https://github.com/szimek/signature_pad
  * (c) 2025 Szymon Nowak | Released under the MIT license
- */class Z{constructor(e,t,i,n){if(isNaN(e)||isNaN(t))throw new Error(`Point is invalid: (${e}, ${t})`);this.x=+e,this.y=+t,this.pressure=i||0,this.time=n||Date.now()}distanceTo(e){return Math.sqrt(Math.pow(this.x-e.x,2)+Math.pow(this.y-e.y,2))}equals(e){return this.x===e.x&&this.y===e.y&&this.pressure===e.pressure&&this.time===e.time}velocityFrom(e){return this.time!==e.time?this.distanceTo(e)/(this.time-e.time):0}}class ge{static fromPoints(e,t){const i=this.calculateControlPoints(e[0],e[1],e[2]).c2,n=this.calculateControlPoints(e[1],e[2],e[3]).c1;return new ge(e[1],i,n,e[2],t.start,t.end)}static calculateControlPoints(e,t,i){const n=e.x-t.x,r=e.y-t.y,o=t.x-i.x,a=t.y-i.y,l={x:(e.x+t.x)/2,y:(e.y+t.y)/2},p={x:(t.x+i.x)/2,y:(t.y+i.y)/2},c=Math.sqrt(n*n+r*r),u=Math.sqrt(o*o+a*a),h=l.x-p.x,m=l.y-p.y,v=c+u==0?0:u/(c+u),D={x:p.x+h*v,y:p.y+m*v},se=t.x-D.x,ne=t.y-D.y;return{c1:new Z(l.x+se,l.y+ne),c2:new Z(p.x+se,p.y+ne)}}constructor(e,t,i,n,r,o){this.startPoint=e,this.control2=t,this.control1=i,this.endPoint=n,this.startWidth=r,this.endWidth=o}length(){let t=0,i,n;for(let r=0;r<=10;r+=1){const o=r/10,a=this.point(o,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),l=this.point(o,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(r>0){const p=a-i,c=l-n;t+=Math.sqrt(p*p+c*c)}i=a,n=l}return t}point(e,t,i,n,r){return t*(1-e)*(1-e)*(1-e)+3*i*(1-e)*(1-e)*e+3*n*(1-e)*e*e+r*e*e*e}}class vt{constructor(){try{this._et=new EventTarget}catch{this._et=document}}addEventListener(e,t,i){this._et.addEventListener(e,t,i)}dispatchEvent(e){return this._et.dispatchEvent(e)}removeEventListener(e,t,i){this._et.removeEventListener(e,t,i)}}function xt(s,e=250){let t=0,i=null,n,r,o;const a=()=>{t=Date.now(),i=null,n=s.apply(r,o),i||(r=null,o=[])};return function(...p){const c=Date.now(),u=e-(c-t);return r=this,o=p,u<=0||u>e?(i&&(clearTimeout(i),i=null),t=c,n=s.apply(r,o),i||(r=null,o=[])):i||(i=window.setTimeout(a,u)),n}}class ee extends vt{constructor(e,t={}){var i,n,r;super(),this.canvas=e,this._drawingStroke=!1,this._isEmpty=!0,this._lastPoints=[],this._data=[],this._lastVelocity=0,this._lastWidth=0,this.velocityFilterWeight=t.velocityFilterWeight||.7,this.minWidth=t.minWidth||.5,this.maxWidth=t.maxWidth||2.5,this.throttle=(i=t.throttle)!==null&&i!==void 0?i:16,this.minDistance=(n=t.minDistance)!==null&&n!==void 0?n:5,this.dotSize=t.dotSize||0,this.penColor=t.penColor||"black",this.backgroundColor=t.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=t.compositeOperation||"source-over",this.canvasContextOptions=(r=t.canvasContextOptions)!==null&&r!==void 0?r:{},this._strokeMoveUpdate=this.throttle?xt(ee.prototype._strokeUpdate,this.throttle):ee.prototype._strokeUpdate,this._handleMouseDown=this._handleMouseDown.bind(this),this._handleMouseMove=this._handleMouseMove.bind(this),this._handleMouseUp=this._handleMouseUp.bind(this),this._handleTouchStart=this._handleTouchStart.bind(this),this._handleTouchMove=this._handleTouchMove.bind(this),this._handleTouchEnd=this._handleTouchEnd.bind(this),this._handlePointerDown=this._handlePointerDown.bind(this),this._handlePointerMove=this._handlePointerMove.bind(this),this._handlePointerUp=this._handlePointerUp.bind(this),this._ctx=e.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}clear(){const{_ctx:e,canvas:t}=this;e.fillStyle=this.backgroundColor,e.clearRect(0,0,t.width,t.height),e.fillRect(0,0,t.width,t.height),this._data=[],this._reset(this._getPointGroupOptions()),this._isEmpty=!0,this._strokePointerId=void 0}fromDataURL(e,t={}){return new Promise((i,n)=>{const r=new Image,o=t.ratio||window.devicePixelRatio||1,a=t.width||this.canvas.width/o,l=t.height||this.canvas.height/o,p=t.xOffset||0,c=t.yOffset||0;this._reset(this._getPointGroupOptions()),r.onload=()=>{this._ctx.drawImage(r,p,c,a,l),i()},r.onerror=u=>{n(u)},r.crossOrigin="anonymous",r.src=e,this._isEmpty=!1})}toDataURL(e="image/png",t){switch(e){case"image/svg+xml":return typeof t!="object"&&(t=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(t))}`;default:return typeof t!="number"&&(t=void 0),this.canvas.toDataURL(e,t)}}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none";const e=/Macintosh/.test(navigator.userAgent)&&"ontouchstart"in document;window.PointerEvent&&!e?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.style.userSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){var e;const t=window.document===this.canvas.ownerDocument?window:(e=this.canvas.ownerDocument.defaultView)!==null&&e!==void 0?e:this.canvas.ownerDocument;return{addEventListener:t.addEventListener.bind(t),removeEventListener:t.removeEventListener.bind(t)}}_removeMoveUpEventListeners(){const{removeEventListener:e}=this._getListenerFunctions();e("pointermove",this._handlePointerMove),e("pointerup",this._handlePointerUp),e("mousemove",this._handleMouseMove),e("mouseup",this._handleMouseUp),e("touchmove",this._handleTouchMove),e("touchend",this._handleTouchEnd)}isEmpty(){return this._isEmpty}fromData(e,{clear:t=!0}={}){t&&this.clear(),this._fromData(e,this._drawCurve.bind(this),this._drawDot.bind(this)),this._data=this._data.concat(e)}toData(){return this._data}_isLeftButtonPressed(e,t){return t?e.buttons===1:(e.buttons&1)===1}_pointerEventToSignatureEvent(e){return{event:e,type:e.type,x:e.clientX,y:e.clientY,pressure:"pressure"in e?e.pressure:0}}_touchEventToSignatureEvent(e){const t=e.changedTouches[0];return{event:e,type:e.type,x:t.clientX,y:t.clientY,pressure:t.force}}_handleMouseDown(e){!this._isLeftButtonPressed(e,!0)||this._drawingStroke||this._strokeBegin(this._pointerEventToSignatureEvent(e))}_handleMouseMove(e){if(!this._isLeftButtonPressed(e,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(e),!1);return}this._strokeMoveUpdate(this._pointerEventToSignatureEvent(e))}_handleMouseUp(e){this._isLeftButtonPressed(e)||this._strokeEnd(this._pointerEventToSignatureEvent(e))}_handleTouchStart(e){e.targetTouches.length!==1||this._drawingStroke||(e.cancelable&&e.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(e)))}_handleTouchMove(e){if(e.targetTouches.length===1){if(e.cancelable&&e.preventDefault(),!this._drawingStroke){this._strokeEnd(this._touchEventToSignatureEvent(e),!1);return}this._strokeMoveUpdate(this._touchEventToSignatureEvent(e))}}_handleTouchEnd(e){e.targetTouches.length===0&&(e.cancelable&&e.preventDefault(),this._strokeEnd(this._touchEventToSignatureEvent(e)))}_getPointerId(e){return e.persistentDeviceId||e.pointerId}_allowPointerId(e,t=!1){return typeof this._strokePointerId>"u"?t:this._getPointerId(e)===this._strokePointerId}_handlePointerDown(e){this._drawingStroke||!this._isLeftButtonPressed(e)||!this._allowPointerId(e,!0)||(this._strokePointerId=this._getPointerId(e),e.preventDefault(),this._strokeBegin(this._pointerEventToSignatureEvent(e)))}_handlePointerMove(e){if(this._allowPointerId(e)){if(!this._isLeftButtonPressed(e,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(e),!1);return}e.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(e))}}_handlePointerUp(e){this._isLeftButtonPressed(e)||!this._allowPointerId(e)||(e.preventDefault(),this._strokeEnd(this._pointerEventToSignatureEvent(e)))}_getPointGroupOptions(e){return{penColor:e&&"penColor"in e?e.penColor:this.penColor,dotSize:e&&"dotSize"in e?e.dotSize:this.dotSize,minWidth:e&&"minWidth"in e?e.minWidth:this.minWidth,maxWidth:e&&"maxWidth"in e?e.maxWidth:this.maxWidth,velocityFilterWeight:e&&"velocityFilterWeight"in e?e.velocityFilterWeight:this.velocityFilterWeight,compositeOperation:e&&"compositeOperation"in e?e.compositeOperation:this.compositeOperation}}_strokeBegin(e){if(!this.dispatchEvent(new CustomEvent("beginStroke",{detail:e,cancelable:!0})))return;const{addEventListener:i}=this._getListenerFunctions();switch(e.event.type){case"mousedown":i("mousemove",this._handleMouseMove,{passive:!1}),i("mouseup",this._handleMouseUp,{passive:!1});break;case"touchstart":i("touchmove",this._handleTouchMove,{passive:!1}),i("touchend",this._handleTouchEnd,{passive:!1});break;case"pointerdown":i("pointermove",this._handlePointerMove,{passive:!1}),i("pointerup",this._handlePointerUp,{passive:!1});break}this._drawingStroke=!0;const n=this._getPointGroupOptions(),r=Object.assign(Object.assign({},n),{points:[]});this._data.push(r),this._reset(n),this._strokeUpdate(e)}_strokeUpdate(e){if(!this._drawingStroke)return;if(this._data.length===0){this._strokeBegin(e);return}this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:e}));const t=this._createPoint(e.x,e.y,e.pressure),i=this._data[this._data.length-1],n=i.points,r=n.length>0&&n[n.length-1],o=r?t.distanceTo(r)<=this.minDistance:!1,a=this._getPointGroupOptions(i);if(!r||!(r&&o)){const l=this._addPoint(t,a);r?l&&this._drawCurve(l,a):this._drawDot(t,a),n.push({time:t.time,x:t.x,y:t.y,pressure:t.pressure})}this.dispatchEvent(new CustomEvent("afterUpdateStroke",{detail:e}))}_strokeEnd(e,t=!0){this._removeMoveUpEventListeners(),this._drawingStroke&&(t&&this._strokeUpdate(e),this._drawingStroke=!1,this._strokePointerId=void 0,this.dispatchEvent(new CustomEvent("endStroke",{detail:e})))}_handlePointerEvents(){this._drawingStroke=!1,this.canvas.addEventListener("pointerdown",this._handlePointerDown,{passive:!1})}_handleMouseEvents(){this._drawingStroke=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown,{passive:!1})}_handleTouchEvents(){this.canvas.addEventListener("touchstart",this._handleTouchStart,{passive:!1})}_reset(e){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(e.minWidth+e.maxWidth)/2,this._ctx.fillStyle=e.penColor,this._ctx.globalCompositeOperation=e.compositeOperation}_createPoint(e,t,i){const n=this.canvas.getBoundingClientRect();return new Z(e-n.left,t-n.top,i,new Date().getTime())}_addPoint(e,t){const{_lastPoints:i}=this;if(i.push(e),i.length>2){i.length===3&&i.unshift(i[0]);const n=this._calculateCurveWidths(i[1],i[2],t),r=ge.fromPoints(i,n);return i.shift(),r}return null}_calculateCurveWidths(e,t,i){const n=i.velocityFilterWeight*t.velocityFrom(e)+(1-i.velocityFilterWeight)*this._lastVelocity,r=this._strokeWidth(n,i),o={end:r,start:this._lastWidth};return this._lastVelocity=n,this._lastWidth=r,o}_strokeWidth(e,t){return Math.max(t.maxWidth/(e+1),t.minWidth)}_drawCurveSegment(e,t,i){const n=this._ctx;n.moveTo(e,t),n.arc(e,t,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(e,t){const i=this._ctx,n=e.endWidth-e.startWidth,r=Math.ceil(e.length())*2;i.beginPath(),i.fillStyle=t.penColor;for(let o=0;o<r;o+=1){const a=o/r,l=a*a,p=l*a,c=1-a,u=c*c,h=u*c;let m=h*e.startPoint.x;m+=3*u*a*e.control1.x,m+=3*c*l*e.control2.x,m+=p*e.endPoint.x;let v=h*e.startPoint.y;v+=3*u*a*e.control1.y,v+=3*c*l*e.control2.y,v+=p*e.endPoint.y;const D=Math.min(e.startWidth+p*n,t.maxWidth);this._drawCurveSegment(m,v,D)}i.closePath(),i.fill()}_drawDot(e,t){const i=this._ctx,n=t.dotSize>0?t.dotSize:(t.minWidth+t.maxWidth)/2;i.beginPath(),this._drawCurveSegment(e.x,e.y,n),i.closePath(),i.fillStyle=t.penColor,i.fill()}_fromData(e,t,i){for(const n of e){const{points:r}=n,o=this._getPointGroupOptions(n);if(r.length>1)for(let a=0;a<r.length;a+=1){const l=r[a],p=new Z(l.x,l.y,l.pressure,l.time);a===0&&this._reset(o);const c=this._addPoint(p,o);c&&t(c,o)}else this._reset(o),i(r[0],o)}}toSVG({includeBackgroundColor:e=!1}={}){const t=this._data,i=Math.max(window.devicePixelRatio||1,1),n=0,r=0,o=this.canvas.width/i,a=this.canvas.height/i,l=document.createElementNS("http://www.w3.org/2000/svg","svg");if(l.setAttribute("xmlns","http://www.w3.org/2000/svg"),l.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),l.setAttribute("viewBox",`${n} ${r} ${o} ${a}`),l.setAttribute("width",o.toString()),l.setAttribute("height",a.toString()),e&&this.backgroundColor){const p=document.createElement("rect");p.setAttribute("width","100%"),p.setAttribute("height","100%"),p.setAttribute("fill",this.backgroundColor),l.appendChild(p)}return this._fromData(t,(p,{penColor:c})=>{const u=document.createElement("path");if(!isNaN(p.control1.x)&&!isNaN(p.control1.y)&&!isNaN(p.control2.x)&&!isNaN(p.control2.y)){const h=`M ${p.startPoint.x.toFixed(3)},${p.startPoint.y.toFixed(3)} C ${p.control1.x.toFixed(3)},${p.control1.y.toFixed(3)} ${p.control2.x.toFixed(3)},${p.control2.y.toFixed(3)} ${p.endPoint.x.toFixed(3)},${p.endPoint.y.toFixed(3)}`;u.setAttribute("d",h),u.setAttribute("stroke-width",(p.endWidth*2.25).toFixed(3)),u.setAttribute("stroke",c),u.setAttribute("fill","none"),u.setAttribute("stroke-linecap","round"),l.appendChild(u)}},(p,{penColor:c,dotSize:u,minWidth:h,maxWidth:m})=>{const v=document.createElement("circle"),D=u>0?u:(h+m)/2;v.setAttribute("r",D.toString()),v.setAttribute("cx",p.x.toString()),v.setAttribute("cy",p.y.toString()),v.setAttribute("fill",c),l.appendChild(v)}),l.outerHTML}}class _t{constructor(e){this.signaturePads=new Map,this.canvasElements=new Map,this.onSignatureChange=e}initializeSignaturePad(e,t){const i=t==null?void 0:t.getElementById(`signature-${e}`);if(!i)return null;this.clearSignaturePad(e),this.resizeCanvas(i);const n=new ee(i,{backgroundColor:"rgb(255, 255, 255)",penColor:"rgb(0, 0, 0)",minWidth:.5,maxWidth:2.5});return this.signaturePads.set(e,n),this.canvasElements.set(e,i),n.addEventListener("endStroke",()=>{this.handleSignatureChange(e)}),n}handleSignatureChange(e){var r;const t=this.signaturePads.get(e);if(!t)return;const i=!t.isEmpty(),n=i?t.toData():null;(r=this.onSignatureChange)==null||r.call(this,{questionId:e,hasSignature:i,signatureData:n})}clearSignature(e){const t=this.signaturePads.get(e);t&&(t.clear(),this.handleSignatureChange(e))}saveSignature(e){const t=this.signaturePads.get(e);if(!t||t.isEmpty())return null;const i=t.toSVG(),n=t.toDataURL();return{questionId:e,svgData:i,dataURL:n}}restoreSignature(e,t){const i=this.signaturePads.get(e);if(!i||!t)return!1;try{return i.clear(),i.fromData(t),!0}catch(n){return console.warn(`Failed to restore signature for ${e}:`,n),!1}}handleResize(){this.signaturePads.forEach((e,t)=>{const i=this.canvasElements.get(t);if(i){this.resizeCanvas(i);const n=e.toData();e.clear(),e.fromData(n)}})}resizeCanvas(e){const t=Math.max(window.devicePixelRatio||1,1),i=window.getComputedStyle(e),n=parseFloat(i.width),r=parseFloat(i.height);e.width=n*t,e.height=r*t;const o=e.getContext("2d");o&&o.scale(t,t)}clearSignaturePad(e){var t;this.signaturePads.has(e)&&((t=this.signaturePads.get(e))==null||t.off(),this.signaturePads.delete(e),this.canvasElements.delete(e))}getSignaturePad(e){return this.signaturePads.get(e)}hasSignaturePads(){return this.signaturePads.size>0}getAllSignaturePads(){return new Map(this.signaturePads)}destroy(){this.signaturePads.forEach(e=>{e.off()}),this.signaturePads.clear(),this.canvasElements.clear()}}class yt{trackQuestionResponse(e,t,i){if(!e)return;e.responses||(e.responses=[]);const n=e.responses.findIndex(o=>o.elementId===t),r={elementId:t,value:i,answeredAt:new Date};n>=0?e.responses[n]=r:e.responses.push(r)}updateInstanceWithFormData(e,t){e!=null&&e.steps&&e.steps.forEach(i=>{i.responses||(i.responses=[]),i.elements.forEach(n=>{if(this.isQuestionElement(n.type)){const r=t[n.id];if(r!==void 0&&i.responses){let o=i.responses.find(a=>a.elementId===n.id);o?(o.value=r,o.answeredAt=new Date):(o={elementId:n.id,value:r,answeredAt:new Date},i.responses.push(o))}}})})}extractFormDataFromSteps(e){const t={};return e.forEach(i=>{i.responses&&i.responses.forEach(n=>{t[n.elementId]=n.value})}),t}hasChangedFromPrevious(e,t,i){if(!(i!=null&&i.steps))return!0;for(const n of i.steps)if(n.responses){const r=n.responses.find(o=>o.elementId===e);if(r)return r.value!==t}return!0}isQuestionElement(e){return["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"].includes(e)}}class wt{constructor(e,t){this.mode=e,this.currentUser=t}updateMode(e){this.mode=e}updateCurrentUser(e){this.currentUser=e}isStepAssignedToUser(e){if(!this.currentUser)return!1;const t=e.assignment;return!!(this.currentUser.targetId&&t.targetId&&this.currentUser.targetId===t.targetId||this.currentUser.email&&t.email&&this.currentUser.email===t.email)}getAssignedSteps(e){return e!=null&&e.steps?e.steps.filter(t=>this.isStepAssignedToUser(t)):[]}findNextAssignedStep(e,t){if(!(t!=null&&t.steps))return-1;if(this.mode==="preview"||this.mode==="admin"||this.mode==="view-only"||this.mode==="print")return e+1<t.steps.length?e+1:-1;for(let i=e+1;i<t.steps.length;i++){const n=t.steps[i];if(this.isStepAssignedToUser(n))return i}return-1}isLastAssignedStep(e,t){if(this.mode==="preview"||this.mode==="admin"||this.mode==="view-only"||this.mode==="print"){const i=t==null?void 0:t.steps;return e===((i==null?void 0:i.length)||0)-1}return this.findNextAssignedStep(e,t)===-1}canNavigateToStep(e,t,i,n,r,o){if((r||o)&&this.mode!=="admin"&&this.mode!=="view-only"&&this.mode!=="print")return{canNavigate:!1,newStepIndex:t,reason:"Navigation blocked: workflow submitted"};if(this.mode==="preview"||this.mode==="admin"||this.mode==="view-only"||this.mode==="print"){const p=i.steps;return!p||e<0||e>=p.length?{canNavigate:!1,newStepIndex:t,reason:"Invalid step index"}:{canNavigate:!0,newStepIndex:e}}const a=i.steps;if(!a||e<0||e>=a.length)return{canNavigate:!1,newStepIndex:t,reason:"Invalid step index"};const l=a[e];if(this.isStepAssignedToUser(l)){const p=n.has(l.id),c=this.isStepWithinAllowedRange(e,i,n);return p||c?{canNavigate:!0,newStepIndex:e}:{canNavigate:!1,newStepIndex:t,reason:"Step not accessible yet"}}else return{canNavigate:!0,newStepIndex:e}}isStepWithinAllowedRange(e,t,i){if(!(t!=null&&t.steps))return!1;const r=this.getAssignedSteps(t).map(l=>t.steps.findIndex(p=>p.id===l.id)).sort((l,p)=>l-p);let o=-1;for(const l of r){const p=t.steps[l];i.has(p.id)&&(o=l)}let a=-1;for(const l of r)if(l>o){a=l;break}return a!==-1?e<=a&&this.isStepAssignedToUser(t.steps[e]):this.isStepAssignedToUser(t.steps[e])}}const te=class te{constructor(){this.formData={},this.validationErrors={}}updateFormData(e){this.formData={...e}}mergeFormData(e){this.formData={...this.formData,...e}}setFormField(e,t){this.formData={...this.formData,[e]:t}}removeFormField(e){const t={...this.formData};delete t[e],this.formData=t}getFormData(){return{...this.formData}}getFormField(e){return this.formData[e]}hasFormField(e){return e in this.formData}setValidationErrors(e){this.validationErrors={...e}}getValidationErrors(){return{...this.validationErrors}}clearValidationError(e){if(this.validationErrors[e]){const t={...this.validationErrors};delete t[e],this.validationErrors=t}}hasValidationError(e){return!!this.validationErrors[e]}setValidationError(e,t){this.validationErrors={...this.validationErrors,[e]:t}}clearAllValidationErrors(){this.validationErrors={}}initializeFromResponses(e){const t={};e.forEach(i=>{i.responses&&i.responses.forEach(n=>{t[n.elementId]=n.value})}),this.formData=t}reset(){this.formData={},this.validationErrors={}}isQuestionElement(e){return te.QUESTION_ELEMENT_TYPES.includes(e.type)}getStepFormData(e){var i;const t={};return(i=e.elements)==null||i.forEach(n=>{if(this.isQuestionElement(n)){const r=n,o=this.formData[r.id];o!==void 0&&(t[r.id]=o)}}),t}hasFormData(){return Object.keys(this.formData).length>0}getFormFieldIds(){return Object.keys(this.formData)}getValidationErrorCount(){return Object.keys(this.validationErrors).length}};te.QUESTION_ELEMENT_TYPES=["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"];let me=te;const ie=class ie{constructor(e,t){this.formStateManager=e,this.responseTracker=t}handleFileUpload(e,t,i){var p,c,u,h,m;const n=t.target,r=(p=n.files)==null?void 0:p[0];if(!r){this.clearFile(e),(c=i.onRequestUpdate)==null||c.call(i);return}const o=this.validateFileSize(r);if(o){this.handleFileValidationError(e,o,n),(u=i.onRequestUpdate)==null||u.call(i);return}this.formStateManager.clearValidationError(e);const a=this.createFileInfo(r);this.formStateManager.setFormField(e,a);const l=this.hasFileChanged(e,a,i.savedInstance);l&&i.mode!=="preview"?this.executeFileUploadCallback(e,r,a,i):this.logSkippedCallback(e,i.mode,l),(h=i.onRequestUpdate)==null||h.call(i),i.mode!=="admin"&&((m=i.onFormDataSave)==null||m.call(i))}clearFile(e){this.formStateManager.setFormField(e,null),this.formStateManager.clearValidationError(e)}validateFileSize(e){return e.size>ie.MAX_FILE_SIZE?`File size must be less than 5MB. Current size: ${(e.size/1024/1024).toFixed(2)}MB`:null}handleFileValidationError(e,t,i){this.formStateManager.setValidationError(e,t),this.formStateManager.setFormField(e,null),i.value=""}createFileInfo(e){return{name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}}hasFileChanged(e,t,i){if(!(i!=null&&i.steps))return!0;for(const n of i.steps)if(n.responses){const r=n.responses.find(o=>o.elementId===e);if(r&&r.value&&typeof r.value=="object"){const o=r.value;return o.name!==t.name||o.size!==t.size||o.type!==t.type||o.lastModified!==t.lastModified}}return!0}executeFileUploadCallback(e,t,i,n){var r,o;console.log("File changed, calling callback for:",e),console.log("Callback function exists:",!!n.onFileUploaded),n.onFileUploaded&&n.onFileUploaded({instanceId:(r=n.instance)==null?void 0:r.id,stepId:(o=n.currentStep)==null?void 0:o.id,questionId:e,file:t,fileName:i.name,fileSize:i.size,fileType:i.type})}logSkippedCallback(e,t,i){t==="preview"?console.log("Preview mode: skipping file upload callback for:",e):i||console.log("File unchanged, skipping callback for:",e)}};ie.MAX_FILE_SIZE=5*1024*1024;let fe=ie;class k{static _isInputDisabled(e){return(e.isSubmitted||e.userStepsSubmitted)&&e.mode!=="admin"||e.mode==="view-only"||e.mode==="print"||e.mode==="default"&&!e.handlers.isCurrentStepAssigned()}static _formatFileSize(e){if(e===0)return"0 Bytes";const t=1024,i=["Bytes","KB","MB","GB"],n=Math.floor(Math.log(e)/Math.log(t));return parseFloat((e/Math.pow(t,n)).toFixed(2))+" "+i[n]}static _extractFilenameFromUrl(e){try{return new URL(e).pathname.split("/").pop()||""||"Uploaded File"}catch{const t=e.split("/"),i=t[t.length-1];return i&&i.includes(".")?i:"Uploaded File"}}static _guessFileTypeFromUrl(e){var r;const i=(r=k._extractFilenameFromUrl(e).split(".").pop())==null?void 0:r.toLowerCase();return i?{pdf:"PDF Document",doc:"Word Document",docx:"Word Document",xls:"Excel Spreadsheet",xlsx:"Excel Spreadsheet",png:"PNG Image",jpg:"JPEG Image",jpeg:"JPEG Image",gif:"GIF Image",svg:"SVG Image",txt:"Text File",csv:"CSV File",zip:"ZIP Archive",mp4:"MP4 Video",mp3:"MP3 Audio"}[i]||`${i.toUpperCase()} File`:"Unknown"}static renderTextArea(e,t,i){return i.mode==="print"?d`<div class="print-response-value textarea-response">
-        ${t||d`<span class="print-no-response">No response</span>`}
-      </div>`:d`<textarea
+ */class Z{constructor(e,t,i,r){if(isNaN(e)||isNaN(t))throw new Error(`Point is invalid: (${e}, ${t})`);this.x=+e,this.y=+t,this.pressure=i||0,this.time=r||Date.now()}distanceTo(e){return Math.sqrt(Math.pow(this.x-e.x,2)+Math.pow(this.y-e.y,2))}equals(e){return this.x===e.x&&this.y===e.y&&this.pressure===e.pressure&&this.time===e.time}velocityFrom(e){return this.time!==e.time?this.distanceTo(e)/(this.time-e.time):0}}class ge{static fromPoints(e,t){const i=this.calculateControlPoints(e[0],e[1],e[2]).c2,r=this.calculateControlPoints(e[1],e[2],e[3]).c1;return new ge(e[1],i,r,e[2],t.start,t.end)}static calculateControlPoints(e,t,i){const r=e.x-t.x,n=e.y-t.y,o=t.x-i.x,a=t.y-i.y,d={x:(e.x+t.x)/2,y:(e.y+t.y)/2},p={x:(t.x+i.x)/2,y:(t.y+i.y)/2},c=Math.sqrt(r*r+n*n),u=Math.sqrt(o*o+a*a),h=d.x-p.x,m=d.y-p.y,x=c+u==0?0:u/(c+u),w={x:p.x+h*x,y:p.y+m*x},se=t.x-w.x,re=t.y-w.y;return{c1:new Z(d.x+se,d.y+re),c2:new Z(p.x+se,p.y+re)}}constructor(e,t,i,r,n,o){this.startPoint=e,this.control2=t,this.control1=i,this.endPoint=r,this.startWidth=n,this.endWidth=o}length(){let t=0,i,r;for(let n=0;n<=10;n+=1){const o=n/10,a=this.point(o,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),d=this.point(o,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(n>0){const p=a-i,c=d-r;t+=Math.sqrt(p*p+c*c)}i=a,r=d}return t}point(e,t,i,r,n){return t*(1-e)*(1-e)*(1-e)+3*i*(1-e)*(1-e)*e+3*r*(1-e)*e*e+n*e*e*e}}class vt{constructor(){try{this._et=new EventTarget}catch{this._et=document}}addEventListener(e,t,i){this._et.addEventListener(e,t,i)}dispatchEvent(e){return this._et.dispatchEvent(e)}removeEventListener(e,t,i){this._et.removeEventListener(e,t,i)}}function xt(s,e=250){let t=0,i=null,r,n,o;const a=()=>{t=Date.now(),i=null,r=s.apply(n,o),i||(n=null,o=[])};return function(...p){const c=Date.now(),u=e-(c-t);return n=this,o=p,u<=0||u>e?(i&&(clearTimeout(i),i=null),t=c,r=s.apply(n,o),i||(n=null,o=[])):i||(i=window.setTimeout(a,u)),r}}class ee extends vt{constructor(e,t={}){var i,r,n;super(),this.canvas=e,this._drawingStroke=!1,this._isEmpty=!0,this._lastPoints=[],this._data=[],this._lastVelocity=0,this._lastWidth=0,this.velocityFilterWeight=t.velocityFilterWeight||.7,this.minWidth=t.minWidth||.5,this.maxWidth=t.maxWidth||2.5,this.throttle=(i=t.throttle)!==null&&i!==void 0?i:16,this.minDistance=(r=t.minDistance)!==null&&r!==void 0?r:5,this.dotSize=t.dotSize||0,this.penColor=t.penColor||"black",this.backgroundColor=t.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=t.compositeOperation||"source-over",this.canvasContextOptions=(n=t.canvasContextOptions)!==null&&n!==void 0?n:{},this._strokeMoveUpdate=this.throttle?xt(ee.prototype._strokeUpdate,this.throttle):ee.prototype._strokeUpdate,this._handleMouseDown=this._handleMouseDown.bind(this),this._handleMouseMove=this._handleMouseMove.bind(this),this._handleMouseUp=this._handleMouseUp.bind(this),this._handleTouchStart=this._handleTouchStart.bind(this),this._handleTouchMove=this._handleTouchMove.bind(this),this._handleTouchEnd=this._handleTouchEnd.bind(this),this._handlePointerDown=this._handlePointerDown.bind(this),this._handlePointerMove=this._handlePointerMove.bind(this),this._handlePointerUp=this._handlePointerUp.bind(this),this._ctx=e.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}clear(){const{_ctx:e,canvas:t}=this;e.fillStyle=this.backgroundColor,e.clearRect(0,0,t.width,t.height),e.fillRect(0,0,t.width,t.height),this._data=[],this._reset(this._getPointGroupOptions()),this._isEmpty=!0,this._strokePointerId=void 0}fromDataURL(e,t={}){return new Promise((i,r)=>{const n=new Image,o=t.ratio||window.devicePixelRatio||1,a=t.width||this.canvas.width/o,d=t.height||this.canvas.height/o,p=t.xOffset||0,c=t.yOffset||0;this._reset(this._getPointGroupOptions()),n.onload=()=>{this._ctx.drawImage(n,p,c,a,d),i()},n.onerror=u=>{r(u)},n.crossOrigin="anonymous",n.src=e,this._isEmpty=!1})}toDataURL(e="image/png",t){switch(e){case"image/svg+xml":return typeof t!="object"&&(t=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(t))}`;default:return typeof t!="number"&&(t=void 0),this.canvas.toDataURL(e,t)}}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none";const e=/Macintosh/.test(navigator.userAgent)&&"ontouchstart"in document;window.PointerEvent&&!e?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.style.userSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){var e;const t=window.document===this.canvas.ownerDocument?window:(e=this.canvas.ownerDocument.defaultView)!==null&&e!==void 0?e:this.canvas.ownerDocument;return{addEventListener:t.addEventListener.bind(t),removeEventListener:t.removeEventListener.bind(t)}}_removeMoveUpEventListeners(){const{removeEventListener:e}=this._getListenerFunctions();e("pointermove",this._handlePointerMove),e("pointerup",this._handlePointerUp),e("mousemove",this._handleMouseMove),e("mouseup",this._handleMouseUp),e("touchmove",this._handleTouchMove),e("touchend",this._handleTouchEnd)}isEmpty(){return this._isEmpty}fromData(e,{clear:t=!0}={}){t&&this.clear(),this._fromData(e,this._drawCurve.bind(this),this._drawDot.bind(this)),this._data=this._data.concat(e)}toData(){return this._data}_isLeftButtonPressed(e,t){return t?e.buttons===1:(e.buttons&1)===1}_pointerEventToSignatureEvent(e){return{event:e,type:e.type,x:e.clientX,y:e.clientY,pressure:"pressure"in e?e.pressure:0}}_touchEventToSignatureEvent(e){const t=e.changedTouches[0];return{event:e,type:e.type,x:t.clientX,y:t.clientY,pressure:t.force}}_handleMouseDown(e){!this._isLeftButtonPressed(e,!0)||this._drawingStroke||this._strokeBegin(this._pointerEventToSignatureEvent(e))}_handleMouseMove(e){if(!this._isLeftButtonPressed(e,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(e),!1);return}this._strokeMoveUpdate(this._pointerEventToSignatureEvent(e))}_handleMouseUp(e){this._isLeftButtonPressed(e)||this._strokeEnd(this._pointerEventToSignatureEvent(e))}_handleTouchStart(e){e.targetTouches.length!==1||this._drawingStroke||(e.cancelable&&e.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(e)))}_handleTouchMove(e){if(e.targetTouches.length===1){if(e.cancelable&&e.preventDefault(),!this._drawingStroke){this._strokeEnd(this._touchEventToSignatureEvent(e),!1);return}this._strokeMoveUpdate(this._touchEventToSignatureEvent(e))}}_handleTouchEnd(e){e.targetTouches.length===0&&(e.cancelable&&e.preventDefault(),this._strokeEnd(this._touchEventToSignatureEvent(e)))}_getPointerId(e){return e.persistentDeviceId||e.pointerId}_allowPointerId(e,t=!1){return typeof this._strokePointerId>"u"?t:this._getPointerId(e)===this._strokePointerId}_handlePointerDown(e){this._drawingStroke||!this._isLeftButtonPressed(e)||!this._allowPointerId(e,!0)||(this._strokePointerId=this._getPointerId(e),e.preventDefault(),this._strokeBegin(this._pointerEventToSignatureEvent(e)))}_handlePointerMove(e){if(this._allowPointerId(e)){if(!this._isLeftButtonPressed(e,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(e),!1);return}e.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(e))}}_handlePointerUp(e){this._isLeftButtonPressed(e)||!this._allowPointerId(e)||(e.preventDefault(),this._strokeEnd(this._pointerEventToSignatureEvent(e)))}_getPointGroupOptions(e){return{penColor:e&&"penColor"in e?e.penColor:this.penColor,dotSize:e&&"dotSize"in e?e.dotSize:this.dotSize,minWidth:e&&"minWidth"in e?e.minWidth:this.minWidth,maxWidth:e&&"maxWidth"in e?e.maxWidth:this.maxWidth,velocityFilterWeight:e&&"velocityFilterWeight"in e?e.velocityFilterWeight:this.velocityFilterWeight,compositeOperation:e&&"compositeOperation"in e?e.compositeOperation:this.compositeOperation}}_strokeBegin(e){if(!this.dispatchEvent(new CustomEvent("beginStroke",{detail:e,cancelable:!0})))return;const{addEventListener:i}=this._getListenerFunctions();switch(e.event.type){case"mousedown":i("mousemove",this._handleMouseMove,{passive:!1}),i("mouseup",this._handleMouseUp,{passive:!1});break;case"touchstart":i("touchmove",this._handleTouchMove,{passive:!1}),i("touchend",this._handleTouchEnd,{passive:!1});break;case"pointerdown":i("pointermove",this._handlePointerMove,{passive:!1}),i("pointerup",this._handlePointerUp,{passive:!1});break}this._drawingStroke=!0;const r=this._getPointGroupOptions(),n=Object.assign(Object.assign({},r),{points:[]});this._data.push(n),this._reset(r),this._strokeUpdate(e)}_strokeUpdate(e){if(!this._drawingStroke)return;if(this._data.length===0){this._strokeBegin(e);return}this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:e}));const t=this._createPoint(e.x,e.y,e.pressure),i=this._data[this._data.length-1],r=i.points,n=r.length>0&&r[r.length-1],o=n?t.distanceTo(n)<=this.minDistance:!1,a=this._getPointGroupOptions(i);if(!n||!(n&&o)){const d=this._addPoint(t,a);n?d&&this._drawCurve(d,a):this._drawDot(t,a),r.push({time:t.time,x:t.x,y:t.y,pressure:t.pressure})}this.dispatchEvent(new CustomEvent("afterUpdateStroke",{detail:e}))}_strokeEnd(e,t=!0){this._removeMoveUpEventListeners(),this._drawingStroke&&(t&&this._strokeUpdate(e),this._drawingStroke=!1,this._strokePointerId=void 0,this.dispatchEvent(new CustomEvent("endStroke",{detail:e})))}_handlePointerEvents(){this._drawingStroke=!1,this.canvas.addEventListener("pointerdown",this._handlePointerDown,{passive:!1})}_handleMouseEvents(){this._drawingStroke=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown,{passive:!1})}_handleTouchEvents(){this.canvas.addEventListener("touchstart",this._handleTouchStart,{passive:!1})}_reset(e){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(e.minWidth+e.maxWidth)/2,this._ctx.fillStyle=e.penColor,this._ctx.globalCompositeOperation=e.compositeOperation}_createPoint(e,t,i){const r=this.canvas.getBoundingClientRect();return new Z(e-r.left,t-r.top,i,new Date().getTime())}_addPoint(e,t){const{_lastPoints:i}=this;if(i.push(e),i.length>2){i.length===3&&i.unshift(i[0]);const r=this._calculateCurveWidths(i[1],i[2],t),n=ge.fromPoints(i,r);return i.shift(),n}return null}_calculateCurveWidths(e,t,i){const r=i.velocityFilterWeight*t.velocityFrom(e)+(1-i.velocityFilterWeight)*this._lastVelocity,n=this._strokeWidth(r,i),o={end:n,start:this._lastWidth};return this._lastVelocity=r,this._lastWidth=n,o}_strokeWidth(e,t){return Math.max(t.maxWidth/(e+1),t.minWidth)}_drawCurveSegment(e,t,i){const r=this._ctx;r.moveTo(e,t),r.arc(e,t,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(e,t){const i=this._ctx,r=e.endWidth-e.startWidth,n=Math.ceil(e.length())*2;i.beginPath(),i.fillStyle=t.penColor;for(let o=0;o<n;o+=1){const a=o/n,d=a*a,p=d*a,c=1-a,u=c*c,h=u*c;let m=h*e.startPoint.x;m+=3*u*a*e.control1.x,m+=3*c*d*e.control2.x,m+=p*e.endPoint.x;let x=h*e.startPoint.y;x+=3*u*a*e.control1.y,x+=3*c*d*e.control2.y,x+=p*e.endPoint.y;const w=Math.min(e.startWidth+p*r,t.maxWidth);this._drawCurveSegment(m,x,w)}i.closePath(),i.fill()}_drawDot(e,t){const i=this._ctx,r=t.dotSize>0?t.dotSize:(t.minWidth+t.maxWidth)/2;i.beginPath(),this._drawCurveSegment(e.x,e.y,r),i.closePath(),i.fillStyle=t.penColor,i.fill()}_fromData(e,t,i){for(const r of e){const{points:n}=r,o=this._getPointGroupOptions(r);if(n.length>1)for(let a=0;a<n.length;a+=1){const d=n[a],p=new Z(d.x,d.y,d.pressure,d.time);a===0&&this._reset(o);const c=this._addPoint(p,o);c&&t(c,o)}else this._reset(o),i(n[0],o)}}toSVG({includeBackgroundColor:e=!1}={}){const t=this._data,i=Math.max(window.devicePixelRatio||1,1),r=0,n=0,o=this.canvas.width/i,a=this.canvas.height/i,d=document.createElementNS("http://www.w3.org/2000/svg","svg");if(d.setAttribute("xmlns","http://www.w3.org/2000/svg"),d.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),d.setAttribute("viewBox",`${r} ${n} ${o} ${a}`),d.setAttribute("width",o.toString()),d.setAttribute("height",a.toString()),e&&this.backgroundColor){const p=document.createElement("rect");p.setAttribute("width","100%"),p.setAttribute("height","100%"),p.setAttribute("fill",this.backgroundColor),d.appendChild(p)}return this._fromData(t,(p,{penColor:c})=>{const u=document.createElement("path");if(!isNaN(p.control1.x)&&!isNaN(p.control1.y)&&!isNaN(p.control2.x)&&!isNaN(p.control2.y)){const h=`M ${p.startPoint.x.toFixed(3)},${p.startPoint.y.toFixed(3)} C ${p.control1.x.toFixed(3)},${p.control1.y.toFixed(3)} ${p.control2.x.toFixed(3)},${p.control2.y.toFixed(3)} ${p.endPoint.x.toFixed(3)},${p.endPoint.y.toFixed(3)}`;u.setAttribute("d",h),u.setAttribute("stroke-width",(p.endWidth*2.25).toFixed(3)),u.setAttribute("stroke",c),u.setAttribute("fill","none"),u.setAttribute("stroke-linecap","round"),d.appendChild(u)}},(p,{penColor:c,dotSize:u,minWidth:h,maxWidth:m})=>{const x=document.createElement("circle"),w=u>0?u:(h+m)/2;x.setAttribute("r",w.toString()),x.setAttribute("cx",p.x.toString()),x.setAttribute("cy",p.y.toString()),x.setAttribute("fill",c),d.appendChild(x)}),d.outerHTML}}class _t{constructor(e){this.signaturePads=new Map,this.canvasElements=new Map,this.onSignatureChange=e}initializeSignaturePad(e,t){const i=t==null?void 0:t.getElementById(`signature-${e}`);if(!i)return null;this.clearSignaturePad(e),this.resizeCanvas(i);const r=new ee(i,{backgroundColor:"rgb(255, 255, 255)",penColor:"rgb(0, 0, 0)",minWidth:.5,maxWidth:2.5});return this.signaturePads.set(e,r),this.canvasElements.set(e,i),r.addEventListener("endStroke",()=>{this.handleSignatureChange(e)}),r}handleSignatureChange(e){var n;const t=this.signaturePads.get(e);if(!t)return;const i=!t.isEmpty(),r=i?t.toData():null;(n=this.onSignatureChange)==null||n.call(this,{questionId:e,hasSignature:i,signatureData:r})}clearSignature(e){const t=this.signaturePads.get(e);t&&(t.clear(),this.handleSignatureChange(e))}saveSignature(e){const t=this.signaturePads.get(e);if(!t||t.isEmpty())return null;const i=t.toSVG(),r=t.toDataURL();return{questionId:e,svgData:i,dataURL:r}}restoreSignature(e,t){const i=this.signaturePads.get(e);if(!i||!t)return!1;try{return i.clear(),i.fromData(t),!0}catch(r){return console.warn(`Failed to restore signature for ${e}:`,r),!1}}handleResize(){this.signaturePads.forEach((e,t)=>{const i=this.canvasElements.get(t);if(i){this.resizeCanvas(i);const r=e.toData();e.clear(),e.fromData(r)}})}resizeCanvas(e){const t=Math.max(window.devicePixelRatio||1,1),i=window.getComputedStyle(e),r=parseFloat(i.width),n=parseFloat(i.height);e.width=r*t,e.height=n*t;const o=e.getContext("2d");o&&o.scale(t,t)}clearSignaturePad(e){var t;this.signaturePads.has(e)&&((t=this.signaturePads.get(e))==null||t.off(),this.signaturePads.delete(e),this.canvasElements.delete(e))}getSignaturePad(e){return this.signaturePads.get(e)}hasSignaturePads(){return this.signaturePads.size>0}getAllSignaturePads(){return new Map(this.signaturePads)}destroy(){this.signaturePads.forEach(e=>{e.off()}),this.signaturePads.clear(),this.canvasElements.clear()}}class yt{trackQuestionResponse(e,t,i){if(!e)return;e.responses||(e.responses=[]);const r=e.responses.findIndex(o=>o.elementId===t),n={elementId:t,value:i,answeredAt:new Date};r>=0?e.responses[r]=n:e.responses.push(n)}updateInstanceWithFormData(e,t){e!=null&&e.steps&&e.steps.forEach(i=>{i.responses||(i.responses=[]),i.elements.forEach(r=>{if(this.isQuestionElement(r.type)){const n=t[r.id];if(n!==void 0&&i.responses){let o=i.responses.find(a=>a.elementId===r.id);o?(o.value=n,o.answeredAt=new Date):(o={elementId:r.id,value:n,answeredAt:new Date},i.responses.push(o))}}})})}extractFormDataFromSteps(e){const t={};return e.forEach(i=>{i.responses&&i.responses.forEach(r=>{t[r.elementId]=r.value})}),t}hasChangedFromPrevious(e,t,i){if(!(i!=null&&i.steps))return!0;for(const r of i.steps)if(r.responses){const n=r.responses.find(o=>o.elementId===e);if(n)return n.value!==t}return!0}isQuestionElement(e){return["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"].includes(e)}}class wt{constructor(e,t){this.mode=e,this.currentUser=t}updateMode(e){this.mode=e}updateCurrentUser(e){this.currentUser=e}isStepAssignedToUser(e){if(!this.currentUser)return!1;const t=e.assignment;return!!(this.currentUser.targetId&&t.targetId&&this.currentUser.targetId===t.targetId||this.currentUser.email&&t.email&&this.currentUser.email===t.email)}getAssignedSteps(e){return e!=null&&e.steps?e.steps.filter(t=>this.isStepAssignedToUser(t)):[]}findNextAssignedStep(e,t){if(!(t!=null&&t.steps))return-1;if(this.mode==="preview"||this.mode==="admin"||this.mode==="view-only"||this.mode==="print")return e+1<t.steps.length?e+1:-1;for(let i=e+1;i<t.steps.length;i++){const r=t.steps[i];if(this.isStepAssignedToUser(r))return i}return-1}isLastAssignedStep(e,t){if(this.mode==="preview"||this.mode==="admin"||this.mode==="view-only"||this.mode==="print"){const i=t==null?void 0:t.steps;return e===((i==null?void 0:i.length)||0)-1}return this.findNextAssignedStep(e,t)===-1}canNavigateToStep(e,t,i,r,n,o){if((n||o)&&this.mode!=="admin"&&this.mode!=="view-only"&&this.mode!=="print")return{canNavigate:!1,newStepIndex:t,reason:"Navigation blocked: workflow submitted"};if(this.mode==="preview"||this.mode==="admin"||this.mode==="view-only"||this.mode==="print"){const p=i.steps;return!p||e<0||e>=p.length?{canNavigate:!1,newStepIndex:t,reason:"Invalid step index"}:{canNavigate:!0,newStepIndex:e}}const a=i.steps;if(!a||e<0||e>=a.length)return{canNavigate:!1,newStepIndex:t,reason:"Invalid step index"};const d=a[e];if(this.isStepAssignedToUser(d)){const p=r.has(d.id),c=this.isStepWithinAllowedRange(e,i,r);return p||c?{canNavigate:!0,newStepIndex:e}:{canNavigate:!1,newStepIndex:t,reason:"Step not accessible yet"}}else return{canNavigate:!0,newStepIndex:e}}isStepWithinAllowedRange(e,t,i){if(!(t!=null&&t.steps))return!1;const n=this.getAssignedSteps(t).map(d=>t.steps.findIndex(p=>p.id===d.id)).sort((d,p)=>d-p);let o=-1;for(const d of n){const p=t.steps[d];i.has(p.id)&&(o=d)}let a=-1;for(const d of n)if(d>o){a=d;break}return a!==-1?e<=a&&this.isStepAssignedToUser(t.steps[e]):this.isStepAssignedToUser(t.steps[e])}}const te=class te{constructor(){this.formData={},this.validationErrors={}}updateFormData(e){this.formData={...e}}mergeFormData(e){this.formData={...this.formData,...e}}setFormField(e,t){this.formData={...this.formData,[e]:t}}removeFormField(e){const t={...this.formData};delete t[e],this.formData=t}getFormData(){return{...this.formData}}getFormField(e){return this.formData[e]}hasFormField(e){return e in this.formData}setValidationErrors(e){this.validationErrors={...e}}getValidationErrors(){return{...this.validationErrors}}clearValidationError(e){if(this.validationErrors[e]){const t={...this.validationErrors};delete t[e],this.validationErrors=t}}hasValidationError(e){return!!this.validationErrors[e]}setValidationError(e,t){this.validationErrors={...this.validationErrors,[e]:t}}clearAllValidationErrors(){this.validationErrors={}}initializeFromResponses(e){const t={};e.forEach(i=>{i.responses&&i.responses.forEach(r=>{t[r.elementId]=r.value})}),this.formData=t}reset(){this.formData={},this.validationErrors={}}isQuestionElement(e){return te.QUESTION_ELEMENT_TYPES.includes(e.type)}getStepFormData(e){var i;const t={};return(i=e.elements)==null||i.forEach(r=>{if(this.isQuestionElement(r)){const n=r,o=this.formData[n.id];o!==void 0&&(t[n.id]=o)}}),t}hasFormData(){return Object.keys(this.formData).length>0}getFormFieldIds(){return Object.keys(this.formData)}getValidationErrorCount(){return Object.keys(this.validationErrors).length}};te.QUESTION_ELEMENT_TYPES=["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"];let me=te;const ie=class ie{constructor(e,t){this.formStateManager=e,this.responseTracker=t}handleFileUpload(e,t,i){var p,c,u,h,m;const r=t.target,n=(p=r.files)==null?void 0:p[0];if(!n){this.clearFile(e),(c=i.onRequestUpdate)==null||c.call(i);return}const o=this.validateFileSize(n);if(o){this.handleFileValidationError(e,o,r),(u=i.onRequestUpdate)==null||u.call(i);return}this.formStateManager.clearValidationError(e);const a=this.createFileInfo(n);this.formStateManager.setFormField(e,a);const d=this.hasFileChanged(e,a,i.savedInstance);d&&i.mode!=="preview"?this.executeFileUploadCallback(e,n,a,i):this.logSkippedCallback(e,i.mode,d),(h=i.onRequestUpdate)==null||h.call(i),i.mode!=="admin"&&((m=i.onFormDataSave)==null||m.call(i))}clearFile(e){this.formStateManager.setFormField(e,null),this.formStateManager.clearValidationError(e)}validateFileSize(e){return e.size>ie.MAX_FILE_SIZE?`File size must be less than 5MB. Current size: ${(e.size/1024/1024).toFixed(2)}MB`:null}handleFileValidationError(e,t,i){this.formStateManager.setValidationError(e,t),this.formStateManager.setFormField(e,null),i.value=""}createFileInfo(e){return{name:e.name,size:e.size,type:e.type,lastModified:e.lastModified}}hasFileChanged(e,t,i){if(!(i!=null&&i.steps))return!0;for(const r of i.steps)if(r.responses){const n=r.responses.find(o=>o.elementId===e);if(n&&n.value&&typeof n.value=="object"){const o=n.value;return o.name!==t.name||o.size!==t.size||o.type!==t.type||o.lastModified!==t.lastModified}}return!0}executeFileUploadCallback(e,t,i,r){var n,o;console.log("File changed, calling callback for:",e),console.log("Callback function exists:",!!r.onFileUploaded),r.onFileUploaded&&r.onFileUploaded({instanceId:(n=r.instance)==null?void 0:n.id,stepId:(o=r.currentStep)==null?void 0:o.id,questionId:e,file:t,fileName:i.name,fileSize:i.size,fileType:i.type})}logSkippedCallback(e,t,i){t==="preview"?console.log("Preview mode: skipping file upload callback for:",e):i||console.log("File unchanged, skipping callback for:",e)}};ie.MAX_FILE_SIZE=5*1024*1024;let fe=ie;class ${static _isInputDisabled(e){return(e.isSubmitted||e.userStepsSubmitted)&&e.mode!=="admin"||e.mode==="view-only"||e.mode==="print"||e.mode==="default"&&!e.handlers.isCurrentStepAssigned()}static _formatFileSize(e){if(e===0)return"0 Bytes";const t=1024,i=["Bytes","KB","MB","GB"],r=Math.floor(Math.log(e)/Math.log(t));return parseFloat((e/Math.pow(t,r)).toFixed(2))+" "+i[r]}static _extractFilenameFromUrl(e){try{return new URL(e).pathname.split("/").pop()||""||"Uploaded File"}catch{const t=e.split("/"),i=t[t.length-1];return i&&i.includes(".")?i:"Uploaded File"}}static _guessFileTypeFromUrl(e){var n;const i=(n=$._extractFilenameFromUrl(e).split(".").pop())==null?void 0:n.toLowerCase();return i?{pdf:"PDF Document",doc:"Word Document",docx:"Word Document",xls:"Excel Spreadsheet",xlsx:"Excel Spreadsheet",png:"PNG Image",jpg:"JPEG Image",jpeg:"JPEG Image",gif:"GIF Image",svg:"SVG Image",txt:"Text File",csv:"CSV File",zip:"ZIP Archive",mp4:"MP4 Video",mp3:"MP3 Audio"}[i]||`${i.toUpperCase()} File`:"Unknown"}static renderTextArea(e,t,i){return i.mode==="print"?l`<div class="print-response-value textarea-response">
+        ${t||l`<span class="print-no-response">No response</span>`}
+      </div>`:l`<textarea
       id=${e.id}
       .value=${t}
       ?required=${e.required}
       ?disabled=${this._isInputDisabled(i)}
       placeholder=${e.placeholder?e.placeholder:"Your response"}
-      @input=${n=>i.handlers.handleInputChange(e.id,n)}
-    ></textarea>`}static renderSelect(e,t,i){var n;return i.mode==="print"?d`<div class="print-response-value select-response">
-        ${t||d`<span class="print-no-response">No selection made</span>`}
-      </div>`:d`<select
+      @input=${r=>i.handlers.handleInputChange(e.id,r)}
+    ></textarea>`}static renderSelect(e,t,i){var r;return i.mode==="print"?l`<div class="print-response-value select-response">
+        ${t||l`<span class="print-no-response">No selection made</span>`}
+      </div>`:l`<select
       id=${e.id}
       .value=${t}
       ?required=${e.required}
       ?disabled=${this._isInputDisabled(i)}
       class=${t===""?"placeholder":""}
-      @change=${r=>i.handlers.handleInputChange(e.id,r)}
+      @change=${n=>i.handlers.handleInputChange(e.id,n)}
     >
       <option value="">Choose</option>
-      ${(n=e.options)==null?void 0:n.map(r=>d`<option value=${r}>${r}</option>`)}
-    </select>`}static renderRadio(e,t,i){var o;const n=this._isInputDisabled(i),r=i.mode==="print";return r?d`<div class="print-response-value radio-response">
-        ${t||d`<span class="print-no-response">No selection made</span>`}
-      </div>`:d`<div class="radio-group ${r?"print-mode":""}">
-      ${(o=e.options)==null?void 0:o.map(a=>d`
+      ${(r=e.options)==null?void 0:r.map(n=>l`<option value=${n}>${n}</option>`)}
+    </select>`}static renderRadio(e,t,i){var o;const r=this._isInputDisabled(i),n=i.mode==="print";return n?l`<div class="print-response-value radio-response">
+        ${t||l`<span class="print-no-response">No selection made</span>`}
+      </div>`:l`<div class="radio-group ${n?"print-mode":""}">
+      ${(o=e.options)==null?void 0:o.map(a=>l`
           <label class="radio-option">
             <input
               type="radio"
               name=${e.id}
               value=${a}
               .checked=${t===a}
-              ?disabled=${n}
-              @change=${r?null:l=>i.handlers.handleInputChange(e.id,l)}
+              ?disabled=${r}
+              @change=${n?null:d=>i.handlers.handleInputChange(e.id,d)}
             />
             <span class="radio-label">${a}</span>
           </label>
         `)}
-    </div>`}static renderCheckbox(e,t,i){var o;const n=this._isInputDisabled(i),r=i.mode==="print";if(e.options&&e.options.length>0){if(r){const a=Array.isArray(t)?t:[];return d`<div class="print-response-value checkbox-response">
-          ${a.length>0?a.map(l=>d`<div>• ${l}</div>`):d`<span class="print-no-response">No selections made</span>`}
-        </div>`}return d`<div class="checkbox-group ${r?"print-mode":""}">
-        ${(o=e.options)==null?void 0:o.map(a=>d`
+    </div>`}static renderCheckbox(e,t,i){var o;const r=this._isInputDisabled(i),n=i.mode==="print";if(e.options&&e.options.length>0){if(n){const a=Array.isArray(t)?t:[];return l`<div class="print-response-value checkbox-response">
+          ${a.length>0?a.map(d=>l`<div>• ${d}</div>`):l`<span class="print-no-response">No selections made</span>`}
+        </div>`}return l`<div class="checkbox-group ${n?"print-mode":""}">
+        ${(o=e.options)==null?void 0:o.map(a=>l`
             <label class="checkbox-option">
               <input
                 type="checkbox"
                 name=${e.id}
                 value=${a}
                 .checked=${Array.isArray(t)?t.includes(a):!1}
-                ?disabled=${n}
-                @change=${r?null:l=>i.handlers.handleCheckboxGroupChange(e.id,a,l)}
+                ?disabled=${r}
+                @change=${n?null:d=>i.handlers.handleCheckboxGroupChange(e.id,a,d)}
               />
               <span class="checkbox-label">${a}</span>
             </label>
           `)}
-      </div>`}else return r?d`<div class="print-response-value checkbox-response">
+      </div>`}else return n?l`<div class="print-response-value checkbox-response">
           ${t?"Yes":"No"}
-        </div>`:d`<label class="checkbox-single ${r?"print-mode":""}">
+        </div>`:l`<label class="checkbox-single ${n?"print-mode":""}">
         <input
           type="checkbox"
           id=${e.id}
           .checked=${!!t}
-          ?disabled=${n}
-          @change=${r?null:a=>i.handlers.handleCheckboxChange(e.id,a)}
+          ?disabled=${r}
+          @change=${n?null:a=>i.handlers.handleCheckboxChange(e.id,a)}
         />
         <span class="checkbox-label">${e.label}</span>
-      </label>`}static renderSignature(e,t,i){const n=i.formData[e.id],r=!!i.formData[e.id],o=i.savedSignatures.has(e.id),a=i.replacingSignatures.has(e.id);if(i.mode==="print")return n&&typeof n=="string"?d`
+      </label>`}static renderSignature(e,t,i){const r=i.formData[e.id],n=!!i.formData[e.id],o=i.savedSignatures.has(e.id),a=i.replacingSignatures.has(e.id);if(i.mode==="print")return r&&typeof r=="string"?l`
           <div class="print-response-value signature-response">
             <img
-              src="${n}"
+              src="${r}"
               alt="Digital Signature"
               class="signature-image"
-              @error=${l=>{var u;const p=l.target;p.style.display="none";const c=(u=p.parentElement)==null?void 0:u.querySelector(".signature-fallback");c&&c.classList.remove("hidden")}}
+              @error=${d=>{var u;const p=d.target;p.style.display="none";const c=(u=p.parentElement)==null?void 0:u.querySelector(".signature-fallback");c&&c.classList.remove("hidden")}}
             />
             <div class="signature-fallback hidden">
               <span class="signature-error">Unable to display signature</span>
             </div>
           </div>
-        `:d`<div class="print-response-value signature-response">
+        `:l`<div class="print-response-value signature-response">
           <span class="print-no-response">No signature provided</span>
-        </div>`;if(i.mode==="view-only")return n&&typeof n=="string"?d`
+        </div>`;if(i.mode==="view-only")return r&&typeof r=="string"?l`
           <div class="signature-view-only">
             <img
-              src="${n}"
+              src="${r}"
               alt="Digital Signature"
               class="signature-image"
-              @error=${l=>{var u;const p=l.target;p.style.display="none";const c=(u=p.parentElement)==null?void 0:u.querySelector(".signature-fallback");c&&c.classList.remove("hidden")}}
+              @error=${d=>{var u;const p=d.target;p.style.display="none";const c=(u=p.parentElement)==null?void 0:u.querySelector(".signature-fallback");c&&c.classList.remove("hidden")}}
             />
             <div class="signature-fallback hidden">
               <span class="signature-error">Unable to display signature</span>
             </div>
           </div>
-        `:d`
+        `:l`
           <div class="signature-view-only">
             <span class="no-signature">No signature captured</span>
           </div>
-        `;if(i.mode==="admin"&&n&&typeof n=="string"&&!a){const l=n.trim().startsWith("<svg");return d`
+        `;if(i.mode==="admin"&&r&&typeof r=="string"&&!a){const d=r.trim().startsWith("<svg");return l`
         <div class="signature-admin-display">
           <div class="signature-existing">
-            ${l?d` <div class="signature-svg-container" .innerHTML=${n}></div> `:d`
+            ${d?l` <div class="signature-svg-container" .innerHTML=${r}></div> `:l`
                   <img
-                    src="${n}"
+                    src="${r}"
                     alt="Digital Signature"
                     class="signature-image"
                     @error=${p=>{var h;const c=p.target;c.style.display="none";const u=(h=c.parentElement)==null?void 0:h.querySelector(".signature-fallback");u&&u.classList.remove("hidden")}}
@@ -3843,7 +4295,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
             </button>
           </div>
         </div>
-      `}return d`
+      `}return l`
       <div class="signature-container ${this._isInputDisabled(i)?"disabled":""}">
         <canvas id="signature-${e.id}" class="signature-canvas"></canvas>
         <div class="signature-controls">
@@ -3855,7 +4307,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
           >
             Clear
           </button>
-          ${r&&!o?d`
+          ${n&&!o?l`
                 <button
                   type="button"
                   class="signature-save-btn"
@@ -3865,8 +4317,8 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
                   Save
                 </button>
               `:""}
-          ${o?d` <span class="signature-saved">✓ Saved</span> `:""}
-          ${i.mode==="admin"&&a?d`
+          ${o?l` <span class="signature-saved">✓ Saved</span> `:""}
+          ${i.mode==="admin"&&a?l`
                 <button
                   type="button"
                   class="signature-cancel-btn"
@@ -3877,45 +4329,45 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               `:""}
         </div>
       </div>
-    `}static renderFileUpload(e,t,i){const n=i.formData[e.id];if(i.mode==="view-only"||i.mode==="print")if(n){const r=typeof n=="string",o=typeof n=="object"&&n.name;if(i.mode==="print"){if(o)return d`
+    `}static renderFileUpload(e,t,i){const r=i.formData[e.id];if(i.mode==="view-only"||i.mode==="print")if(r){const n=typeof r=="string",o=typeof r=="object"&&r.name;if(i.mode==="print"){if(o)return l`
               <div class="print-response-value file-response">
-                📎 ${n.name}
-                ${n.size?d` <span class="file-size"
-                      >(${k._formatFileSize(n.size)})</span
+                📎 ${r.name}
+                ${r.size?l` <span class="file-size"
+                      >(${$._formatFileSize(r.size)})</span
                     >`:""}
               </div>
-            `;if(r){const a=k._extractFilenameFromUrl(n);return d` <div class="print-response-value file-response">📎 ${a}</div> `}else return d` <div class="print-response-value file-response">📎 ${n}</div> `}else{const a=r?n:"#",l=o?n.name:r?k._extractFilenameFromUrl(n):"View File";return d`
+            `;if(n){const a=$._extractFilenameFromUrl(r);return l` <div class="print-response-value file-response">📎 ${a}</div> `}else return l` <div class="print-response-value file-response">📎 ${r}</div> `}else{const a=n?r:"#",d=o?r.name:n?$._extractFilenameFromUrl(r):"View File";return l`
             <div class="file-upload-view-only">
-              <a href="${a}" target="_blank" class="file-link"> 📎 ${l} </a>
-              ${o&&n.size?d`
+              <a href="${a}" target="_blank" class="file-link"> 📎 ${d} </a>
+              ${o&&r.size?l`
                     <span class="file-size-info"
-                      >(${k._formatFileSize(n.size)})</span
+                      >(${$._formatFileSize(r.size)})</span
                     >
                   `:""}
             </div>
-          `}}else return i.mode==="print"?d`
+          `}}else return i.mode==="print"?l`
             <div class="print-response-value file-response">
               <span class="print-no-response">No file uploaded</span>
             </div>
-          `:d`
+          `:l`
             <div class="file-upload-view-only">
               <span class="no-file">No file uploaded</span>
             </div>
-          `;return d`
+          `;return l`
       <div class="file-upload-container">
         <input
           type="file"
           id=${e.id}
           ?required=${e.required}
           ?disabled=${this._isInputDisabled(i)}
-          @change=${r=>i.handlers.handleFileUpload(e.id,r)}
+          @change=${n=>i.handlers.handleFileUpload(e.id,n)}
         />
-        ${n?d`
+        ${r?l`
               <div class="file-preview">
-                <span class="file-name">${n.name||"File selected"}</span>
+                <span class="file-name">${r.name||"File selected"}</span>
                 <button
                   type="button"
-                  class="file-clear-btn"
+                  class="file-remove-btn"
                   ?disabled=${this._isInputDisabled(i)}
                   @click=${()=>{i.formData[e.id]=null,i.handlers.trackQuestionResponse(e.id,null)}}
                 >
@@ -3924,32 +4376,32 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               </div>
             `:""}
       </div>
-    `}static renderDefaultInput(e,t,i){if(i.mode==="print"){const r=e.type==="date"&&t?new Date(t).toLocaleDateString():t;return d`<div class="print-response-value input-response">
-        ${r||d`<span class="print-no-response">No response</span>`}
-      </div>`}const n=e.type==="number"?"number":e.type==="date"?"date":"text";return d`<input
-      type=${n}
+    `}static renderDefaultInput(e,t,i){if(i.mode==="print"){const n=e.type==="date"&&t?new Date(t).toLocaleDateString():t;return l`<div class="print-response-value input-response">
+        ${n||l`<span class="print-no-response">No response</span>`}
+      </div>`}const r=e.type==="number"?"number":e.type==="date"?"date":"text";return l`<input
+      type=${r}
       id=${e.id}
       .value=${t}
       ?required=${e.required}
       ?disabled=${this._isInputDisabled(i)}
       placeholder=${e.placeholder?e.placeholder:"Your response"} // custom placeholder when not blank
-      @input=${r=>i.handlers.handleInputChange(e.id,r)}
-    />`}static render(e,t){const i=t.formData[e.id]??"",n=t.validationErrors[e.id],r=()=>{switch(e.type){case"textarea":return k.renderTextArea(e,i,t);case"select":return k.renderSelect(e,i,t);case"radio":return k.renderRadio(e,i,t);case"checkbox":return k.renderCheckbox(e,i,t);case"signature":return k.renderSignature(e,i,t);case"file_upload":return k.renderFileUpload(e,i,t);default:return k.renderDefaultInput(e,i,t)}},o=e.type==="checkbox"&&(!e.options||e.options.length===0);return t.mode==="print"?d`
+      @input=${n=>i.handlers.handleInputChange(e.id,n)}
+    />`}static render(e,t){const i=t.formData[e.id]??"",r=t.validationErrors[e.id],n=()=>{switch(e.type){case"textarea":return $.renderTextArea(e,i,t);case"select":return $.renderSelect(e,i,t);case"radio":return $.renderRadio(e,i,t);case"checkbox":return $.renderCheckbox(e,i,t);case"signature":return $.renderSignature(e,i,t);case"file_upload":return $.renderFileUpload(e,i,t);default:return $.renderDefaultInput(e,i,t)}},o=e.type==="checkbox"&&(!e.options||e.options.length===0);return t.mode==="print"?l`
         <div class="question-print">
-          ${o?"":d` <div class="print-question-title">${e.label}:</div> `}
-          ${r()}
+          ${o?"":l` <div class="print-question-title">${e.label}:</div> `}
+          ${n()}
           <hr class="print-question-separator" />
         </div>
-      `:d`
-      <div class="question ${n?"error":""}">
-        ${o?"":d`
+      `:l`
+      <div class="question ${r?"error":""}">
+        ${o?"":l`
               <div class="runner-question-title">
-                ${e.label}${e.required?d`<span class="runner-question-required">*</span>`:""}
+                ${e.label}${e.required?l`<span class="runner-question-required">*</span>`:""}
               </div>
               <hr class="runner-question-divider" />
             `}
-        ${r()}
-        ${n?d`<div class="error-message">${n}</div>`:""}
+        ${n()}
+        ${r?l`<div class="error-message">${r}</div>`:""}
       </div>
     `}}/**
  * @license
@@ -3959,74 +4411,74 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */class be extends $t{constructor(e){if(super(e),this.it=x,e.type!==St.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===x||e==null)return this._t=void 0,this.it=e;if(e===P)return e;if(typeof e!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}be.directiveName="unsafeHTML",be.resultType=1;const Le=kt(be);class ${static renderMarkdown(e){return e.replace(/^### (.*$)/gim,"<h3>$1</h3>").replace(/^## (.*$)/gim,"<h2>$1</h2>").replace(/^# (.*$)/gim,"<h1>$1</h1>").replace(/\*\*(.*?)\*\*/gim,"<strong>$1</strong>").replace(/\*(.*?)\*/gim,"<em>$1</em>").replace(/`(.*?)`/gim,"<code>$1</code>").replace(/^> (.*$)/gim,"<blockquote>$1</blockquote>").replace(/\n/gim,"<br>")}static renderText(e){return d`
+ */class be extends $t{constructor(e){if(super(e),this.it=_,e.type!==St.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===_||e==null)return this._t=void 0,this.it=e;if(e===U)return e;if(typeof e!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}be.directiveName="unsafeHTML",be.resultType=1;const Le=kt(be);class C{static renderMarkdown(e){return e.replace(/^### (.*$)/gim,"<h3>$1</h3>").replace(/^## (.*$)/gim,"<h2>$1</h2>").replace(/^# (.*$)/gim,"<h1>$1</h1>").replace(/\*\*(.*?)\*\*/gim,"<strong>$1</strong>").replace(/\*(.*?)\*/gim,"<em>$1</em>").replace(/`(.*?)`/gim,"<code>$1</code>").replace(/^> (.*$)/gim,"<blockquote>$1</blockquote>").replace(/\n/gim,"<br>")}static renderText(e){return l`
       <div class="content-element text-content">
         <p>${e.content}</p>
       </div>
-    `}static renderMarkdownElement(e){return d`
+    `}static renderMarkdownElement(e){return l`
       <div class="content-element markdown-content">
         <div class="markdown-text">
-          ${Le($.renderMarkdown(e.content))}
+          ${Le(C.renderMarkdown(e.content))}
         </div>
       </div>
-    `}static renderDivider(e){return d`
+    `}static renderDivider(e){return l`
       <div class="content-element divider-content">
         <hr class="content-divider" />
-        ${e.caption?d`<div class="divider-caption">${e.caption}</div>`:""}
+        ${e.caption?l`<div class="divider-caption">${e.caption}</div>`:""}
       </div>
-    `}static renderHtml(e){return d`
+    `}static renderHtml(e){return l`
       <div class="content-element html-content">
         <div class="html-content-wrapper">${Le(e.content)}</div>
       </div>
-    `}static renderImage(e){return d`
+    `}static renderImage(e){return l`
       <div class="content-element image-content">
         <div class="image-placeholder">
           <p>📷 Image: ${e.caption||e.alt||"Image content"}</p>
           <small>URL: ${e.url||"No URL provided"}</small>
         </div>
       </div>
-    `}static renderVideo(e){return d`
+    `}static renderVideo(e){return l`
       <div class="content-element video-content">
         <div class="video-placeholder">
           <p>🎥 Video: ${e.caption||"Video content"}</p>
           <small>URL: ${e.url||"No URL provided"}</small>
         </div>
       </div>
-    `}static renderFile(e){return d`
+    `}static renderFile(e){return l`
       <div class="content-element file-content">
         <div class="file-placeholder">
           <p>📄 File: ${e.caption||"File content"}</p>
           <small>URL: ${e.url||"No URL provided"}</small>
         </div>
       </div>
-    `}static renderUnknown(e){return d`
+    `}static renderUnknown(e){return l`
       <div class="content-element unknown-content">
         <p>⚠️ Unknown content type: ${e.type}</p>
       </div>
-    `}static render(e,t){const i=()=>{switch(e.type){case"text":return $.renderText(e);case"markdown":return $.renderMarkdownElement(e);case"divider":return $.renderDivider(e);case"html":return $.renderHtml(e);case"image":return $.renderImage(e);case"video":return $.renderVideo(e);case"file":return $.renderFile(e);default:return $.renderUnknown(e)}};return(t==null?void 0:t.mode)==="print"?d`
+    `}static render(e,t){const i=()=>{switch(e.type){case"text":return C.renderText(e);case"markdown":return C.renderMarkdownElement(e);case"divider":return C.renderDivider(e);case"html":return C.renderHtml(e);case"image":return C.renderImage(e);case"video":return C.renderVideo(e);case"file":return C.renderFile(e);default:return C.renderUnknown(e)}};return(t==null?void 0:t.mode)==="print"?l`
         <div class="content-print">
           ${i()}
-          ${e.type!=="divider"?d`<hr class="print-question-separator" />`:""}
+          ${e.type!=="divider"?l`<hr class="print-question-separator" />`:""}
         </div>
-      `:i()}}class Ne{static renderMobileStepsForStatus(e){const{steps:t,disabled:i=!1}=e;return d`
+      `:i()}}class ve{static renderMobileStepsForStatus(e){const{steps:t,disabled:i=!1}=e;return l`
       <div class="runner-mobile-steps">
         <nav aria-label="Workflow steps">
           <div class="runner-mobile-steps-container">
-            ${t==null?void 0:t.map(n=>{const r=e.isStepAssignedToUser(n),o=e.completedSteps.has(n.id);return d`
+            ${t==null?void 0:t.map(r=>{const n=e.isStepAssignedToUser(r),o=e.completedSteps.has(r.id);return l`
                 <div
-                  class="runner-mobile-step-tab ${o?"completed":""} ${r?"":"unassigned"} ${i?"disabled":""}"
-                  style="cursor: not-allowed; opacity: ${i?"0.6":r?"1":"0.6"};"
+                  class="runner-mobile-step-tab ${o?"completed":""} ${n?"":"unassigned"} ${i?"disabled":""}"
+                  style="cursor: not-allowed; opacity: ${i?"0.6":n?"1":"0.6"};"
                 >
-                  <span class="runner-mobile-step-title">${n.title}</span>
+                  <span class="runner-mobile-step-title">${r.title}</span>
                   <span class="runner-mobile-step-badge">
-                    ${o?"Completed":r?"Your Step":"Other User"}
+                    ${o?"Completed":n?"Your Step":"Other User"}
                   </span>
                 </div>
               `})}
           </div>
         </nav>
       </div>
-    `}static renderNotAssignedView(){return d`
+    `}static renderNotAssignedView(){return l`
       <div class="runner-content not-assigned-view">
         <div class="not-assigned-container">
           <div class="not-assigned-icon">
@@ -4049,7 +4501,59 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
           </p>
         </div>
       </div>
-    `}static renderUnifiedSubmissionView(e){var t,i,n;return d`
+    `}static renderSubmissionErrorView(e){var r,n,o;const{submissionError:t,onRetry:i}=e;return l`
+      <div class="runner-layout">
+        <!-- Mobile Steps Navigation (visible only on mobile) -->
+        ${this.renderMobileStepsForStatus({steps:(r=e.instance)==null?void 0:r.steps,isStepAssignedToUser:e.isStepAssignedToUser,completedSteps:e.completedSteps,disabled:!0})}
+
+        <!-- Sidebar: Steps List (read-only, hidden on mobile) -->
+        <aside class="runner-sidebar">
+          <div class="runner-sidebar-header">Steps</div>
+          <nav aria-label="Workflow steps">
+            <ul class="runner-steps-list">
+              ${(o=(n=e.instance)==null?void 0:n.steps)==null?void 0:o.map(a=>{const d=e.isStepAssignedToUser(a),p=e.completedSteps.has(a.id);return l`
+                  <li
+                    class="runner-step-item ${p?"completed":""} ${d?"":"unassigned"}"
+                    style="opacity: ${d?"1":"0.6"}; cursor: not-allowed;"
+                  >
+                    <span class="runner-step-title">${a.title}</span>
+                    <span class="runner-step-badge ${!p&&d?"error":""}">
+                      ${p?"Submitted":d?"Failed":"Other User"}
+                    </span>
+                  </li>
+                `})}
+            </ul>
+          </nav>
+        </aside>
+
+        <!-- Main Content: Error View -->
+        <main class="runner-main-content">
+          <div class="submission-container">
+            <div class="submission-error-icon">
+              <svg
+                width="64"
+                height="64"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 8v4" />
+                <circle cx="12" cy="16" r="1" fill="currentColor" />
+              </svg>
+            </div>
+            <h2 class="submission-title">Submission Failed</h2>
+            <p class="submission-message">
+              ${t||"Unable to save your response. Please try again."}
+            </p>
+            ${i?l` <button class="retry-button" @click=${i}>Try Again</button> `:""}
+          </div>
+        </main>
+      </div>
+    `}static renderUnifiedSubmissionView(e){var t,i,r;return l`
       <div class="runner-layout">
         <!-- Mobile Steps Navigation (visible only on mobile) -->
         ${this.renderMobileStepsForStatus({steps:(t=e.instance)==null?void 0:t.steps,isStepAssignedToUser:e.isStepAssignedToUser,completedSteps:e.completedSteps,disabled:!0})}
@@ -4059,12 +4563,12 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
           <div class="runner-sidebar-header">Steps</div>
           <nav aria-label="Workflow steps">
             <ul class="runner-steps-list">
-              ${(n=(i=e.instance)==null?void 0:i.steps)==null?void 0:n.map(r=>{const o=e.isStepAssignedToUser(r),a=e.completedSteps.has(r.id);return d`
+              ${(r=(i=e.instance)==null?void 0:i.steps)==null?void 0:r.map(n=>{const o=e.isStepAssignedToUser(n),a=e.completedSteps.has(n.id);return l`
                   <li
                     class="runner-step-item ${a?"completed":""} ${o?"":"unassigned"}"
                     style="opacity: ${o?"1":"0.6"}; cursor: not-allowed;"
                   >
-                    <span class="runner-step-title">${r.title}</span>
+                    <span class="runner-step-title">${n.title}</span>
                     <span class="runner-step-badge">
                       ${a?"Submitted":o?"Your Step":"Other User"}
                     </span>
@@ -4098,59 +4602,59 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
           </div>
         </main>
       </div>
-    `}}class q{static isStepCompleted(e,t,i){return!!(t.completedSteps.has(e.id)||(t.isSubmitted||t.userStepsSubmitted)&&i)}static renderSidebar(e){const{steps:t}=e;return d`
+    `}}class q{static isStepCompleted(e,t,i){return!!(t.completedSteps.has(e.id)||(t.isSubmitted||t.userStepsSubmitted)&&i)}static renderSidebar(e){const{steps:t}=e;return l`
       <aside class="runner-sidebar">
         <div class="runner-sidebar-header">Steps</div>
         <nav aria-label="Workflow steps">
           <ul class="runner-steps-list">
-            ${t==null?void 0:t.map((i,n)=>{const r=e.mode==="preview"||e.mode==="admin"||e.mode==="view-only"||e.mode==="print"||e.isStepAssignedToUser(i),o=n===e.currentStepIndex,a=this.isStepCompleted(i,e,r),l=(e.isSubmitted||e.userStepsSubmitted)&&e.mode!=="preview"&&e.mode!=="admin"&&e.mode!=="view-only"&&e.mode!=="print",p=e.isLoading;return d`
+            ${t==null?void 0:t.map((i,r)=>{const n=e.mode==="preview"||e.mode==="admin"||e.mode==="view-only"||e.mode==="print"||e.isStepAssignedToUser(i),o=r===e.currentStepIndex,a=this.isStepCompleted(i,e,n),d=(e.isSubmitted||e.userStepsSubmitted)&&e.mode!=="preview"&&e.mode!=="admin"&&e.mode!=="view-only"&&e.mode!=="print",p=e.isLoading;return l`
                 <li
-                  class="runner-step-item ${o?"active":""} ${a?"completed":""} ${r?"":"unassigned"} ${l?"disabled":""} ${p?"loading-disabled":""}"
-                  @click=${()=>!p&&e.goToStep(n)}
-                  style="${l?"opacity: 0.5; cursor: not-allowed;":""}"
+                  class="runner-step-item ${o?"active":""} ${a?"completed":""} ${n?"":"unassigned"} ${d?"disabled":""} ${p?"loading-disabled":""}"
+                  @click=${()=>!p&&e.goToStep(r)}
+                  style="${d?"opacity: 0.5; cursor: not-allowed;":""}"
                 >
                   <span class="runner-step-title">${i.title}</span>
                   <span class="runner-step-badge">
-                    ${e.mode==="preview"?"Preview":e.mode==="admin"?"Admin":e.mode==="view-only"?"View Only":e.mode==="print"?"Print":l?"Submitted":a?"Completed":r?"Assigned":"Not Assigned"}
+                    ${e.mode==="preview"?"Preview":e.mode==="admin"?"Admin":e.mode==="view-only"?"View Only":e.mode==="print"?"Print":d?"Submitted":a?"Completed":n?"Assigned":"Not Assigned"}
                   </span>
                 </li>
               `})}
           </ul>
         </nav>
       </aside>
-    `}static renderMobileSteps(e){const{steps:t}=e;return d`
+    `}static renderMobileSteps(e){const{steps:t}=e;return l`
       <div class="runner-mobile-steps">
         <nav aria-label="Workflow steps">
           <div class="runner-mobile-steps-container">
-            ${t==null?void 0:t.map((i,n)=>{const r=e.mode==="preview"||e.mode==="admin"||e.mode==="view-only"||e.mode==="print"||e.isStepAssignedToUser(i),o=n===e.currentStepIndex,a=this.isStepCompleted(i,e,r),l=(e.isSubmitted||e.userStepsSubmitted)&&e.mode!=="preview"&&e.mode!=="admin"&&e.mode!=="view-only"&&e.mode!=="print",p=e.isLoading;return d`
+            ${t==null?void 0:t.map((i,r)=>{const n=e.mode==="preview"||e.mode==="admin"||e.mode==="view-only"||e.mode==="print"||e.isStepAssignedToUser(i),o=r===e.currentStepIndex,a=this.isStepCompleted(i,e,n),d=(e.isSubmitted||e.userStepsSubmitted)&&e.mode!=="preview"&&e.mode!=="admin"&&e.mode!=="view-only"&&e.mode!=="print",p=e.isLoading;return l`
                 <button
-                  class="runner-mobile-step-tab ${o?"active":""} ${a?"completed":""} ${r?"":"unassigned"} ${l?"disabled":""} ${p?"loading-disabled":""}"
-                  @click=${()=>!p&&e.goToStep(n)}
-                  ?disabled=${l||p}
+                  class="runner-mobile-step-tab ${o?"active":""} ${a?"completed":""} ${n?"":"unassigned"} ${d?"disabled":""} ${p?"loading-disabled":""}"
+                  @click=${()=>!p&&e.goToStep(r)}
+                  ?disabled=${d||p}
                   aria-current=${o?"step":"false"}
                 >
                   <span class="runner-mobile-step-title">${i.title}</span>
                   <span class="runner-mobile-step-badge">
-                    ${e.mode==="preview"?"Preview":e.mode==="admin"?"Admin":e.mode==="view-only"?"View Only":e.mode==="print"?"Print":l?"Submitted":a?"Completed":r?"Assigned":"Not Assigned"}
+                    ${e.mode==="preview"?"Preview":e.mode==="admin"?"Admin":e.mode==="view-only"?"View Only":e.mode==="print"?"Print":d?"Submitted":a?"Completed":n?"Assigned":"Not Assigned"}
                   </span>
                 </button>
               `})}
           </div>
         </nav>
       </div>
-    `}static renderStepHeader(e){const{step:t,mode:i}=e;return i==="print"?d`
+    `}static renderStepHeader(e){const{step:t,mode:i}=e;return i==="print"?l`
         <div class="step-print-header">
           <div class="print-step-title">${t.title}</div>
-          ${t.description?d`<div class="print-step-description">${t.description}</div>`:""}
+          ${t.description?l`<div class="print-step-description">${t.description}</div>`:""}
           <hr class="print-question-separator" />
         </div>
-      `:d`
+      `:l`
       <section class="runner-step-header">
         <h2 class="runner-step-title">${t.title}</h2>
         <hr class="runner-step-divider" />
-        ${t.description?d`<p class="runner-step-desc">${t.description}</p>`:""}
+        ${t.description?l`<p class="runner-step-desc">${t.description}</p>`:""}
       </section>
-    `}}class Dt{static renderFormActions(e){return e.mode==="preview"||e.mode==="view-only"||e.mode==="print"||!e.isCurrentStepAssigned?d``:d`
+    `}}class Dt{static renderFormActions(e){return e.mode==="preview"||e.mode==="view-only"||e.mode==="print"||!e.isCurrentStepAssigned?l``:l`
       <div class="runner-form-actions">
         <button
           class="next-button ${e.mode==="admin"&&e.justSaved?"saved-state":""}"
@@ -4160,13 +4664,13 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
           ${e.mode==="admin"?e.justSaved?"✓ Saved!":"Save":e.isLastStep?"Submit":"Next"}
         </button>
       </div>
-    `}}class ve{static handleInputChange(e,t,i,n,r,o){const a=t.target;let l;a.type==="radio"?l=a.value:a.type==="checkbox"?l=a.checked:l=a.value;const p={...i,[e]:l};n(p),o!=="preview"&&r(e,l)}static handleCheckboxChange(e,t,i,n,r,o){const l=t.target.checked,p={...i,[e]:l};n(p),o!=="preview"&&r(e,l)}static handleCheckboxGroupChange(e,t,i,n,r,o,a){const l=i.target,p=n[e];let c=Array.isArray(p)?[...p]:[];l.checked?c.includes(t)||c.push(t):c=c.filter(h=>h!==t);const u={...n,[e]:c};r(u),a!=="preview"&&o(e,c)}}var Ct=Object.defineProperty,At=Object.getOwnPropertyDescriptor,y=(s,e,t,i)=>{for(var n=i>1?void 0:i?At(e,t):e,r=s.length-1,o;r>=0;r--)(o=s[r])&&(n=(i?o(e,t,n):o(n))||n);return i&&n&&Ct(e,t,n),n};let b=class extends H{constructor(){super(...arguments),this.mode="default",this.isLoading=!1,this._currentStepIndex=0,this._formData={},this._validationErrors={},this._internalCompletedSteps=new Set,this._formRestorationComplete=!1,this._savedSignatures=new Set,this._replacingSignatures=new Set,this._isSubmitted=!1,this._userStepsSubmitted=!1,this._justSaved=!1}willUpdate(s){(s.has("mode")||s.has("currentUser"))&&this._updateNavigationService(),(s.has("instance")||s.has("workflow")||s.has("mode"))&&(this._initializeState(),this._updateValidationService())}connectedCallback(){super.connectedCallback(),this._initializeServices(),this._initializeState(),window.addEventListener("resize",this._handleResize.bind(this)),this._restoreFormData()}disconnectedCallback(){var s;super.disconnectedCallback(),window.removeEventListener("resize",this._handleResize.bind(this)),(s=this.signatureManager)==null||s.destroy()}_initializeServices(){this.persistenceManager=new bt,this.responseTracker=new yt,this.formStateManager=new me,this.signatureManager=new _t(s=>this._handleSignatureChange(s)),this.fileUploadManager=new fe(this.formStateManager,this.responseTracker),this._updateNavigationService(),this._updateValidationService()}_updateNavigationService(){this.navigationService=new wt(this.mode||"default",this.currentUser)}_updateValidationService(){var s;this.validationService=new ft(((s=this.signatureManager)==null?void 0:s.getAllSignaturePads())||new Map,this._savedSignatures)}_getRenderContext(){return{formData:this._formData,validationErrors:this._validationErrors,currentStepIndex:this._currentStepIndex,internalCompletedSteps:this._internalCompletedSteps,savedSignatures:this._savedSignatures,replacingSignatures:this._replacingSignatures,isSubmitted:this._isSubmitted,userStepsSubmitted:this._userStepsSubmitted,justSaved:this._justSaved,validationService:this.validationService,persistenceManager:this.persistenceManager,signatureManager:this.signatureManager,responseTracker:this.responseTracker,navigationService:this.navigationService,formStateManager:this.formStateManager,fileUploadManager:this.fileUploadManager,mode:this.mode||"default",instance:this.instance,workflow:this.workflow,currentUser:this.currentUser,isLoading:this.isLoading,handlers:{handleInputChange:this._handleInputChange.bind(this),handleCheckboxChange:this._handleCheckboxChange.bind(this),handleCheckboxGroupChange:this._handleCheckboxGroupChange.bind(this),startReplaceSignature:this._startReplaceSignature.bind(this),cancelReplaceSignature:this._cancelReplaceSignature.bind(this),clearSignature:this._clearSignature.bind(this),saveSignature:this._saveSignature.bind(this),handleFileUpload:this._handleFileUpload.bind(this),trackQuestionResponse:this._trackQuestionResponse.bind(this),isCurrentStepAssigned:this._isCurrentStepAssigned.bind(this)}}}_handleSignatureChange(s){this.formStateManager.setFormField(s.questionId,s.hasSignature),this.formStateManager.setFormField(`${s.questionId}_signatureData`,s.signatureData),this._formData=this.formStateManager.getFormData(),this._savedSignatures.has(s.questionId)&&(this._savedSignatures=new Set([...this._savedSignatures].filter(e=>e!==s.questionId))),this._clearValidationError(s.questionId),this.mode!=="admin"&&this._saveFormDataToHistory()}_clearValidationError(s){this.formStateManager.clearValidationError(s),this._validationErrors=this.formStateManager.getValidationErrors()}_updateFormData(s){this.formStateManager.updateFormData(s),this._formData=this.formStateManager.getFormData(),this.mode!=="admin"&&this._saveFormDataToHistory()}_handleFormDataUpdate(s){this._clearValidationError(s)}_initializeState(){var s,e,t;if((s=this.formStateManager)==null||s.reset(),this._validationErrors={},this._formData={},this._formRestorationComplete=!1,this._savedSignatures=new Set,this._replacingSignatures=new Set,this._savedInstance=void 0,this._justSaved=!1,this._isSubmitted=((e=this.instance)==null?void 0:e.status)==="completed"||!1,this.instance&&this.instance.status!=="completed"){const i=this._getAssignedSteps(),n=i.filter(r=>{var o;return(o=this.instance.completedSteps)==null?void 0:o.includes(r.id)});this._userStepsSubmitted=i.length>0&&n.length===i.length}else this._userStepsSubmitted=((t=this.instance)==null?void 0:t.status)==="completed"||!1;this.mode==="preview"&&this.workflow?this._initializePreviewMode():this.mode==="view-only"&&this.instance?this._initializeViewOnlyMode():this.mode==="print"&&this.instance?this._initializePrintMode():this.instance&&this._initializeDefaultMode()}_initializePreviewMode(){var s;if(console.log("Initializing preview mode..."),!((s=this.workflow)!=null&&s.steps)||this.workflow.steps.length===0){console.warn("Workflow has no steps in preview mode.");return}this.formStateManager.reset(),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=0,this._internalCompletedSteps=new Set,console.log("Preview mode initialized with empty form data.")}_initializeDefaultMode(){var s;!((s=this.instance)!=null&&s.steps)||this.instance.steps.length===0||(this.instance.completedSteps?this._internalCompletedSteps=new Set(this.instance.completedSteps):this._internalCompletedSteps=new Set(this.instance.steps.filter(e=>e.status==="completed").map(e=>e.id)),this.formStateManager.initializeFromResponses(this.instance.steps),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=this.instance.steps.findIndex(e=>{var t;return e.id===((t=this.instance)==null?void 0:t.currentStepId)}),this._currentStepIndex<0&&(this._currentStepIndex=0),this.instance.steps.forEach((e,t)=>{this._internalCompletedSteps.has(e.id)?e.status="completed":t===this._currentStepIndex?e.status="active":e.status="pending"}))}_initializeViewOnlyMode(){var s;!((s=this.instance)!=null&&s.steps)||this.instance.steps.length===0||(this.formStateManager.initializeFromResponses(this.instance.steps),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=0,this.instance.steps.forEach(e=>{e.responses&&e.responses.length>0?(e.status="completed",this._internalCompletedSteps.add(e.id)):e.status="pending"}),console.log("View-only mode initialized with existing responses:",this._formData))}_initializePrintMode(){var s;!((s=this.instance)!=null&&s.steps)||this.instance.steps.length===0||(this.formStateManager.initializeFromResponses(this.instance.steps),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=0,this.instance.steps.forEach(e=>{e.responses&&e.responses.length>0?(e.status="completed",this._internalCompletedSteps.add(e.id)):e.status="pending"}),console.log("Print mode initialized with existing responses:",this._formData))}_isStepAssignedToUser(s){return this.navigationService.isStepAssignedToUser(s)}_getAssignedSteps(){return this.instance?this.navigationService.getAssignedSteps(this.instance):[]}_isCurrentStepAssigned(){const s=this._currentStep;return!s||this.mode!=="default"?!0:this._isStepAssignedToUser(s)}_renderNotAssignedView(){return Ne.renderNotAssignedView()}get _currentStep(){var s,e,t;return this.mode==="preview"&&this.workflow?(s=this.workflow.steps)==null?void 0:s[this._currentStepIndex]:(t=(e=this.instance)==null?void 0:e.steps)==null?void 0:t[this._currentStepIndex]}_validateStep(){const s=this._currentStep;if(!s)return!1;const e=this.validationService.validateStep(s,this._formData,this.mode||"default");return this.formStateManager.setValidationErrors(e.errors),this._validationErrors=this.formStateManager.getValidationErrors(),e.isValid}_handleInputChange(s,e){ve.handleInputChange(s,e,this._formData,this._updateFormData.bind(this),this._trackQuestionResponse.bind(this),this.mode),this._handleFormDataUpdate(s)}_handleCheckboxChange(s,e){ve.handleCheckboxChange(s,e,this._formData,this._updateFormData.bind(this),this._trackQuestionResponse.bind(this),this.mode),this._handleFormDataUpdate(s)}_handleCheckboxGroupChange(s,e,t){ve.handleCheckboxGroupChange(s,e,t,this._formData,this._updateFormData.bind(this),this._trackQuestionResponse.bind(this),this.mode),this._handleFormDataUpdate(s)}_initializeSignaturePad(s){this.signatureManager.initializeSignaturePad(s,this.shadowRoot)&&this._updateValidationService()}_handleResize(){this.signatureManager.handleResize()}_clearSignature(s){this.signatureManager.clearSignature(s)}_startReplaceSignature(s){this._replacingSignatures=new Set([...this._replacingSignatures,s]),this.formStateManager.setFormField(s,!1),this.formStateManager.setFormField(`${s}_signatureData`,null),this._formData=this.formStateManager.getFormData(),this._savedSignatures=new Set([...this._savedSignatures].filter(e=>e!==s)),this.requestUpdate()}_cancelReplaceSignature(s){this._replacingSignatures=new Set([...this._replacingSignatures].filter(e=>e!==s))}_saveSignature(s){var i,n,r;const e=this.signatureManager.saveSignature(s);if(!e)return;const t=this._hasSignatureChanged(s,e.svgData);this._savedSignatures=new Set([...this._savedSignatures,s]),this._replacingSignatures.has(s)&&(this._replacingSignatures=new Set([...this._replacingSignatures].filter(o=>o!==s))),this._trackQuestionResponse(s,e.svgData),t&&this.mode!=="preview"?(console.log("Signature changed, calling callback for:",s),console.log("Callback function exists:",!!this.onSignatureCaptured),(r=this.onSignatureCaptured)==null||r.call(this,{instanceId:(i=this.instance)==null?void 0:i.id,stepId:(n=this._currentStep)==null?void 0:n.id,questionId:s,svgData:e.svgData,dataURL:e.dataURL})):this.mode==="preview"?console.log("Preview mode: skipping signature callback for:",s):console.log("Signature unchanged, skipping callback for:",s),this._clearValidationError(s),this.mode!=="admin"&&this._saveFormDataToHistory()}_hasSignatureChanged(s,e){return this.responseTracker.hasChangedFromPrevious(s,e,this._savedInstance)}_restoreInstanceResponses(){var s,e;!((s=this._savedInstance)!=null&&s.steps)||!((e=this.instance)!=null&&e.steps)||this._savedInstance.steps.forEach((t,i)=>{var n;(n=this.instance)!=null&&n.steps&&this.instance.steps[i]&&(this.instance.steps[i].responses=t.responses||[])})}_handleFileUpload(s,e){this.fileUploadManager.handleFileUpload(s,e,{instance:this.instance,currentStep:this._currentStep,mode:this.mode||"default",savedInstance:this._savedInstance,onFileUploaded:this.onFileUploaded,onFormDataSave:()=>this._saveFormDataToHistory(),onRequestUpdate:()=>{this._formData=this.formStateManager.getFormData(),this._validationErrors=this.formStateManager.getValidationErrors();const t=this._formData[s];t&&this._trackQuestionResponse(s,t),this.requestUpdate()}})}_captureSignaturesFromStep(s){console.log("Capturing signatures from step:",s.id)}_trackQuestionResponse(s,e){this.responseTracker.trackQuestionResponse(this._currentStep,s,e)}_renderQuestion(s){return k.render(s,this._getRenderContext())}_renderContentElement(s){return $.render(s,this._getRenderContext())}_isQuestionElement(s){return b.QUESTION_ELEMENT_TYPES.includes(s.type)}_isContentElement(s){return b.CONTENT_ELEMENT_TYPES.includes(s.type)}_renderStepElement(s){return this.mode==="print"?this._isQuestionElement(s)?this._renderQuestion(s):this._isContentElement(s)?this._renderContentElement(s):d`<div class="unknown-element">
+    `}}class xe{static handleInputChange(e,t,i,r,n,o){const a=t.target;let d;a.type==="radio"?d=a.value:a.type==="checkbox"?d=a.checked:d=a.value;const p={...i,[e]:d};r(p),o!=="preview"&&n(e,d)}static handleCheckboxChange(e,t,i,r,n,o){const d=t.target.checked,p={...i,[e]:d};r(p),o!=="preview"&&n(e,d)}static handleCheckboxGroupChange(e,t,i,r,n,o,a){const d=i.target,p=r[e];let c=Array.isArray(p)?[...p]:[];d.checked?c.includes(t)||c.push(t):c=c.filter(h=>h!==t);const u={...r,[e]:c};n(u),a!=="preview"&&o(e,c)}}var Ct=Object.defineProperty,At=Object.getOwnPropertyDescriptor,v=(s,e,t,i)=>{for(var r=i>1?void 0:i?At(e,t):e,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=(i?o(e,t,r):o(r))||r);return i&&r&&Ct(e,t,r),r};let f=class extends V{constructor(){super(...arguments),this.mode="default",this.isLoading=!1,this._currentStepIndex=0,this._formData={},this._validationErrors={},this._internalCompletedSteps=new Set,this._formRestorationComplete=!1,this._savedSignatures=new Set,this._replacingSignatures=new Set,this._isSubmitted=!1,this._userStepsSubmitted=!1,this._justSaved=!1,this._submissionError=null}willUpdate(s){(s.has("mode")||s.has("currentUser"))&&this._updateNavigationService(),(s.has("instance")||s.has("workflow")||s.has("mode"))&&(this._initializeState(),this._updateValidationService())}connectedCallback(){super.connectedCallback(),this._initializeServices(),this._initializeState(),window.addEventListener("resize",this._handleResize.bind(this)),this._restoreFormData()}disconnectedCallback(){var s;super.disconnectedCallback(),window.removeEventListener("resize",this._handleResize.bind(this)),(s=this.signatureManager)==null||s.destroy()}_initializeServices(){this.persistenceManager=new bt,this.responseTracker=new yt,this.formStateManager=new me,this.signatureManager=new _t(s=>this._handleSignatureChange(s)),this.fileUploadManager=new fe(this.formStateManager,this.responseTracker),this._updateNavigationService(),this._updateValidationService()}_updateNavigationService(){this.navigationService=new wt(this.mode||"default",this.currentUser)}_updateValidationService(){var s;this.validationService=new ft(((s=this.signatureManager)==null?void 0:s.getAllSignaturePads())||new Map,this._savedSignatures)}_getRenderContext(){return{formData:this._formData,validationErrors:this._validationErrors,currentStepIndex:this._currentStepIndex,internalCompletedSteps:this._internalCompletedSteps,savedSignatures:this._savedSignatures,replacingSignatures:this._replacingSignatures,isSubmitted:this._isSubmitted,userStepsSubmitted:this._userStepsSubmitted,justSaved:this._justSaved,validationService:this.validationService,persistenceManager:this.persistenceManager,signatureManager:this.signatureManager,responseTracker:this.responseTracker,navigationService:this.navigationService,formStateManager:this.formStateManager,fileUploadManager:this.fileUploadManager,mode:this.mode||"default",instance:this.instance,workflow:this.workflow,currentUser:this.currentUser,isLoading:this.isLoading,handlers:{handleInputChange:this._handleInputChange.bind(this),handleCheckboxChange:this._handleCheckboxChange.bind(this),handleCheckboxGroupChange:this._handleCheckboxGroupChange.bind(this),startReplaceSignature:this._startReplaceSignature.bind(this),cancelReplaceSignature:this._cancelReplaceSignature.bind(this),clearSignature:this._clearSignature.bind(this),saveSignature:this._saveSignature.bind(this),handleFileUpload:this._handleFileUpload.bind(this),trackQuestionResponse:this._trackQuestionResponse.bind(this),isCurrentStepAssigned:this._isCurrentStepAssigned.bind(this)}}}_handleSignatureChange(s){this.formStateManager.setFormField(s.questionId,s.hasSignature),this.formStateManager.setFormField(`${s.questionId}_signatureData`,s.signatureData),this._formData=this.formStateManager.getFormData(),this._savedSignatures.has(s.questionId)&&(this._savedSignatures=new Set([...this._savedSignatures].filter(e=>e!==s.questionId))),this._clearValidationError(s.questionId),this.mode!=="admin"&&this._saveFormDataToHistory()}_clearValidationError(s){this.formStateManager.clearValidationError(s),this._validationErrors=this.formStateManager.getValidationErrors()}_updateFormData(s){this.formStateManager.updateFormData(s),this._formData=this.formStateManager.getFormData(),this.mode!=="admin"&&this._saveFormDataToHistory()}_handleFormDataUpdate(s){this._clearValidationError(s)}_initializeState(){var s,e,t;if((s=this.formStateManager)==null||s.reset(),this._validationErrors={},this._formData={},this._formRestorationComplete=!1,this._savedSignatures=new Set,this._replacingSignatures=new Set,this._savedInstance=void 0,this._justSaved=!1,this._isSubmitted=((e=this.instance)==null?void 0:e.status)==="completed"||!1,this.instance&&this.instance.status!=="completed"){const i=this._getAssignedSteps(),r=i.filter(n=>{var o;return(o=this.instance.completedSteps)==null?void 0:o.includes(n.id)});this._userStepsSubmitted=i.length>0&&r.length===i.length}else this._userStepsSubmitted=((t=this.instance)==null?void 0:t.status)==="completed"||!1;this.mode==="preview"&&this.workflow?this._initializePreviewMode():this.mode==="view-only"&&this.instance?this._initializeViewOnlyMode():this.mode==="print"&&this.instance?this._initializePrintMode():this.instance&&this._initializeDefaultMode()}_initializePreviewMode(){var s;if(console.log("Initializing preview mode..."),!((s=this.workflow)!=null&&s.steps)||this.workflow.steps.length===0){console.warn("Workflow has no steps in preview mode.");return}this.formStateManager.reset(),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=0,this._internalCompletedSteps=new Set,console.log("Preview mode initialized with empty form data.")}_initializeDefaultMode(){var s;!((s=this.instance)!=null&&s.steps)||this.instance.steps.length===0||(this.instance.completedSteps?this._internalCompletedSteps=new Set(this.instance.completedSteps):this._internalCompletedSteps=new Set(this.instance.steps.filter(e=>e.status==="completed").map(e=>e.id)),this.formStateManager.initializeFromResponses(this.instance.steps),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=this.instance.steps.findIndex(e=>{var t;return e.id===((t=this.instance)==null?void 0:t.currentStepId)}),this._currentStepIndex<0&&(this._currentStepIndex=0),this.instance.steps.forEach((e,t)=>{this._internalCompletedSteps.has(e.id)?e.status="completed":t===this._currentStepIndex?e.status="active":e.status="pending"}))}_initializeViewOnlyMode(){var s;!((s=this.instance)!=null&&s.steps)||this.instance.steps.length===0||(this.formStateManager.initializeFromResponses(this.instance.steps),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=0,this.instance.steps.forEach(e=>{e.responses&&e.responses.length>0?(e.status="completed",this._internalCompletedSteps.add(e.id)):e.status="pending"}),console.log("View-only mode initialized with existing responses:",this._formData))}_initializePrintMode(){var s;!((s=this.instance)!=null&&s.steps)||this.instance.steps.length===0||(this.formStateManager.initializeFromResponses(this.instance.steps),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=0,this.instance.steps.forEach(e=>{e.responses&&e.responses.length>0?(e.status="completed",this._internalCompletedSteps.add(e.id)):e.status="pending"}),console.log("Print mode initialized with existing responses:",this._formData))}_isStepAssignedToUser(s){return this.navigationService.isStepAssignedToUser(s)}_getAssignedSteps(){return this.instance?this.navigationService.getAssignedSteps(this.instance):[]}_isCurrentStepAssigned(){const s=this._currentStep;return!s||this.mode!=="default"?!0:this._isStepAssignedToUser(s)}_renderNotAssignedView(){return ve.renderNotAssignedView()}get _currentStep(){var s,e,t;return this.mode==="preview"&&this.workflow?(s=this.workflow.steps)==null?void 0:s[this._currentStepIndex]:(t=(e=this.instance)==null?void 0:e.steps)==null?void 0:t[this._currentStepIndex]}_validateStep(){const s=this._currentStep;if(!s)return!1;const e=this.validationService.validateStep(s,this._formData,this.mode||"default");return this.formStateManager.setValidationErrors(e.errors),this._validationErrors=this.formStateManager.getValidationErrors(),e.isValid}_handleInputChange(s,e){xe.handleInputChange(s,e,this._formData,this._updateFormData.bind(this),this._trackQuestionResponse.bind(this),this.mode),this._handleFormDataUpdate(s)}_handleCheckboxChange(s,e){xe.handleCheckboxChange(s,e,this._formData,this._updateFormData.bind(this),this._trackQuestionResponse.bind(this),this.mode),this._handleFormDataUpdate(s)}_handleCheckboxGroupChange(s,e,t){xe.handleCheckboxGroupChange(s,e,t,this._formData,this._updateFormData.bind(this),this._trackQuestionResponse.bind(this),this.mode),this._handleFormDataUpdate(s)}_initializeSignaturePad(s){this.signatureManager.initializeSignaturePad(s,this.shadowRoot)&&this._updateValidationService()}_handleResize(){this.signatureManager.handleResize()}_clearSignature(s){this.signatureManager.clearSignature(s)}_startReplaceSignature(s){this._replacingSignatures=new Set([...this._replacingSignatures,s]),this.formStateManager.setFormField(s,!1),this.formStateManager.setFormField(`${s}_signatureData`,null),this._formData=this.formStateManager.getFormData(),this._savedSignatures=new Set([...this._savedSignatures].filter(e=>e!==s)),this.requestUpdate()}_cancelReplaceSignature(s){this._replacingSignatures=new Set([...this._replacingSignatures].filter(e=>e!==s))}_saveSignature(s){var i,r,n;const e=this.signatureManager.saveSignature(s);if(!e)return;const t=this._hasSignatureChanged(s,e.svgData);this._savedSignatures=new Set([...this._savedSignatures,s]),this._replacingSignatures.has(s)&&(this._replacingSignatures=new Set([...this._replacingSignatures].filter(o=>o!==s))),this._trackQuestionResponse(s,e.svgData),t&&this.mode!=="preview"?(console.log("Signature changed, calling callback for:",s),console.log("Callback function exists:",!!this.onSignatureCaptured),(n=this.onSignatureCaptured)==null||n.call(this,{instanceId:(i=this.instance)==null?void 0:i.id,stepId:(r=this._currentStep)==null?void 0:r.id,questionId:s,svgData:e.svgData,dataURL:e.dataURL})):this.mode==="preview"?console.log("Preview mode: skipping signature callback for:",s):console.log("Signature unchanged, skipping callback for:",s),this._clearValidationError(s),this.mode!=="admin"&&this._saveFormDataToHistory()}_hasSignatureChanged(s,e){return this.responseTracker.hasChangedFromPrevious(s,e,this._savedInstance)}_restoreInstanceResponses(){var s,e;!((s=this._savedInstance)!=null&&s.steps)||!((e=this.instance)!=null&&e.steps)||this._savedInstance.steps.forEach((t,i)=>{var r;(r=this.instance)!=null&&r.steps&&this.instance.steps[i]&&(this.instance.steps[i].responses=t.responses||[])})}_handleFileUpload(s,e){this.fileUploadManager.handleFileUpload(s,e,{instance:this.instance,currentStep:this._currentStep,mode:this.mode||"default",savedInstance:this._savedInstance,onFileUploaded:this.onFileUploaded,onFormDataSave:()=>this._saveFormDataToHistory(),onRequestUpdate:()=>{this._formData=this.formStateManager.getFormData(),this._validationErrors=this.formStateManager.getValidationErrors();const t=this._formData[s];t&&this._trackQuestionResponse(s,t),this.requestUpdate()}})}_captureSignaturesFromStep(s){console.log("Capturing signatures from step:",s.id)}_trackQuestionResponse(s,e){this.responseTracker.trackQuestionResponse(this._currentStep,s,e)}_renderQuestion(s){return $.render(s,this._getRenderContext())}_renderContentElement(s){return C.render(s,this._getRenderContext())}_isQuestionElement(s){return f.QUESTION_ELEMENT_TYPES.includes(s.type)}_isContentElement(s){return f.CONTENT_ELEMENT_TYPES.includes(s.type)}_renderStepElement(s){return this.mode==="print"?this._isQuestionElement(s)?this._renderQuestion(s):this._isContentElement(s)?this._renderContentElement(s):l`<div class="unknown-element">
         <p>⚠️ Unknown element type: ${s.type}</p>
-      </div>`:this._isQuestionElement(s)?d`<div class="runner-card">${this._renderQuestion(s)}</div>`:this._isContentElement(s)?d`<div class="runner-card">${this._renderContentElement(s)}</div>`:d`<div class="runner-card">
+      </div>`:this._isQuestionElement(s)?l`<div class="runner-card">${this._renderQuestion(s)}</div>`:this._isContentElement(s)?l`<div class="runner-card">${this._renderContentElement(s)}</div>`:l`<div class="runner-card">
       <div class="unknown-element">
         <p>⚠️ Unknown element type: ${s.type}</p>
       </div>
-    </div>`}_renderStepWithElements(s){return d`
+    </div>`}_renderStepWithElements(s){return l`
       <div class="print-step">
         <!-- Step Header -->
         ${q.renderStepHeader({step:s,mode:"print"})}
@@ -4174,9 +4678,9 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
         <!-- Step Elements -->
         ${s.elements.map(e=>this._renderStepElement(e))}
       </div>
-    `}_renderAllStepsForPrint(){var s;return!((s=this.instance)!=null&&s.steps)||this.instance.steps.length===0?d`<div class="runner-content">
+    `}_renderAllStepsForPrint(){var s;return!((s=this.instance)!=null&&s.steps)||this.instance.steps.length===0?l`<div class="runner-content">
         No workflow instance loaded or instance has no steps.
-      </div>`:d`
+      </div>`:l`
       <div class="print-layout">
         <!-- Instance Title at top -->
         <div class="print-instance-title">${this.instance.name||"Untitled Form"}</div>
@@ -4184,9 +4688,9 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
 
         ${this.instance.steps.map(e=>this._renderStepWithElements(e))}
       </div>
-    `}_nextStep(){var t,i,n,r;if(!this._validateStep())return;const s=this._currentStep;s&&this._captureSignaturesFromStep(s);const e=this._findNextAssignedStep(this._currentStepIndex);if(e!==-1){const o=(t=this._currentStep)==null?void 0:t.id;if(this._currentStepIndex=e,o&&((i=this.instance)!=null&&i.steps)){const l=this.instance.steps.find(p=>p.id===o);l&&(l.status="completed")}const a=(r=(n=this.instance)==null?void 0:n.steps)==null?void 0:r[this._currentStepIndex];a&&(a.status="active"),this._updateInstanceData(o,"step_navigation",{direction:"next",fromStepIndex:this._currentStepIndex-1,toStepIndex:this._currentStepIndex,completedStepId:o}),this.mode!=="admin"&&this._saveFormDataToHistory(),this._scrollToTop()}}_findNextAssignedStep(s){return this.instance?this.navigationService.findNextAssignedStep(s,this.instance):-1}_isLastAssignedStep(){return this.navigationService.isLastAssignedStep(this._currentStepIndex,this.instance)}_isLastStepInWorkflow(){var e;const s=(e=this.instance)==null?void 0:e.steps;return s?this._currentStepIndex===s.length-1:!1}_goToStep(s){var i;console.log(`🎯 _goToStep called: stepIndex=${s}, mode=${this.mode}, currentStep=${this._currentStepIndex}`);const e=this.mode==="preview"?this.workflow:this.instance;if(console.log("📊 Data source:",e?`${((i=e.steps)==null?void 0:i.length)||0} steps`:"null"),!e){console.log("❌ No data source available");return}const t=this.navigationService.canNavigateToStep(s,this._currentStepIndex,e,this._internalCompletedSteps,this._isSubmitted,this._userStepsSubmitted);console.log("🚦 Navigation result:",t),t.canNavigate?(this._currentStepIndex=t.newStepIndex,console.log(`✅ Navigated to step ${t.newStepIndex}`),this._scrollToTop()):console.log("❌ Navigation blocked:",t.reason)}_submitUserSteps(){var t;if(!this._validateStep())return;const s=this._currentStep;if(s&&this._captureSignaturesFromStep(s),!this.instance){console.error("Cannot submit, instance data is missing.");return}const e=(t=this._currentStep)==null?void 0:t.id;e&&this._internalCompletedSteps.add(e),console.log("User completing their assigned steps:",this.instance.id),console.log("Form data:",this._formData),this._userStepsSubmitted=!0,this._clearSavedFormData("user steps submission"),this._updateInstanceData(e,"user_steps_submission"),this._scrollToTop()}_submit(){var t;if(!this._validateStep())return;const s=this._currentStep;if(s&&this._captureSignaturesFromStep(s),!this.instance){console.error("Cannot submit, instance data is missing.");return}const e=(t=this._currentStep)==null?void 0:t.id;e&&this._internalCompletedSteps.add(e),console.log("Submitting entire workflow:",this.instance.id),console.log("Final form data:",this._formData),this.instance&&(this.instance.status="completed",this.instance.currentStepId=void 0,this.instance.completedSteps=Array.from(this._internalCompletedSteps)),this._isSubmitted=!0,this._clearSavedFormData("full workflow submission"),this._scrollToTop(),this._updateInstanceData(e,"submission")}_saveStep(){var t;if(!this._validateStep())return;const s=this._currentStep;if(s&&this._captureSignaturesFromStep(s),!this.instance){console.error("Cannot save, instance data is missing.");return}const e=(t=this._currentStep)==null?void 0:t.id;if(e&&(this._internalCompletedSteps.add(e),this.instance.steps)){const i=this.instance.steps.find(n=>n.id===e);i&&(i.status="completed")}this._updateInstanceData(e,"admin_save",{stepId:e,adminMode:!0}),this._justSaved=!0,this.requestUpdate(),setTimeout(()=>{this._justSaved=!1,this.requestUpdate()},2e3)}_clearSavedFormData(s){var e;this.persistenceManager.clearFormData((e=this.instance)==null?void 0:e.id,s)}_scrollToTop(){requestAnimationFrame(()=>{var t,i;this.scrollIntoView({behavior:"smooth",block:"start"});const s=(t=this.shadowRoot)==null?void 0:t.querySelector(".runner-layout");s&&s.scrollTo({top:0,behavior:"smooth"});const e=(i=this.shadowRoot)==null?void 0:i.querySelector(".runner-main-content");e&&e.scrollTo({top:0,behavior:"smooth"})})}_updateInstanceData(s,e,t){var l,p,c,u,h,m,v;s&&this._internalCompletedSteps.add(s);let i=(p=(l=this.instance)==null?void 0:l.steps)==null?void 0:p.find(D=>D.id===s);if(!i&&this._internalCompletedSteps.size>0){const D=Array.from(this._internalCompletedSteps),se=D[D.length-1];i=(u=(c=this.instance)==null?void 0:c.steps)==null?void 0:u.find(ne=>ne.id===se)}const n=e==="submission",r=((h=this.instance)==null?void 0:h.steps)&&this._internalCompletedSteps.size>=this.instance.steps.length,o=n||r?null:this._currentStep?{id:this._currentStep.id,title:this._currentStep.title}:null,a={instanceId:(m=this.instance)==null?void 0:m.id,workflowId:(v=this.instance)==null?void 0:v.workflowId,completedStepId:s||(i?i.id:null),completedStepData:i?{id:i.id,title:i.title,responses:i.responses||[]}:null,completedSteps:Array.from(this._internalCompletedSteps),currentStep:o,mode:this.mode};this.dispatchEvent(new CustomEvent("instance-updated",{detail:a,bubbles:!0,composed:!0}))}_restoreFormData(){var e;if(!this.persistenceManager.shouldRestoreData(this.mode||"default")){console.log("Skipping form data restoration - showing official instance data");return}const s=this.persistenceManager.restoreFormData((e=this.instance)==null?void 0:e.id);s?(this.formStateManager.updateFormData(s.formData),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=s.stepIndex,this._savedSignatures=s.savedSignatures,this._internalCompletedSteps=s.completedSteps,this._savedInstance=s.savedInstance||void 0):this._updateCompletedStepsFromCurrentIndex()}_updateCompletedStepsFromCurrentIndex(){var s;if((s=this.instance)!=null&&s.steps){this._internalCompletedSteps=new Set(this.instance.completedSteps||[]);for(let e=0;e<this._currentStepIndex;e++)this.instance.steps[e]&&this._internalCompletedSteps.add(this.instance.steps[e].id)}}_restoreFormDataFromDOM(){this._restoreFormData(),this._restoreFormValuesToDOM()}_restoreFormValuesToDOM(){this.updateComplete.then(()=>{var e,t;(e=this.shadowRoot)!=null&&e.querySelector(".runner-step-form")&&(Object.entries(this._formData).forEach(([i,n])=>{var o;if(i.endsWith("_signatureData"))return;const r=(o=this.shadowRoot)==null?void 0:o.getElementById(i);if(r){if(r.type==="checkbox"){const a=r;typeof n=="boolean"?a.checked=n:Array.isArray(n)&&(a.checked=n.includes(a.value))}else if(r.type==="radio"){const a=r;a.checked=a.value===n}else if(r.type==="file"){const a=r;a.value=""}else r.value=String(n||"");console.log(`Restored value for ${i}:`,n)}}),this._restoreSignatures(),console.log("Form values restored to DOM elements"),this._updateInstanceWithFormData(!0),(t=this._savedInstance)!=null&&t.steps&&this._restoreInstanceResponses())})}_updateInstanceWithFormData(s=!1){this.instance&&this.instance.steps&&this.instance.steps.forEach(e=>{e.responses||(e.responses=[]),e.elements.forEach(t=>{if(t.type==="text_input"||t.type==="textarea"||t.type==="select"||t.type==="number"||t.type==="radio"||t.type==="checkbox"||t.type==="date"||t.type==="file_upload"||t.type==="signature"){const i=t,n=this._formData[i.id];if(n!==void 0&&e.responses){let r=e.responses.find(o=>o.elementId===i.id);r?(r.value=n,r.answeredAt=new Date):(r={elementId:i.id,value:n,answeredAt:new Date},e.responses.push(r))}}})})}_restoreSignatures(){Object.entries(this._formData).forEach(([s,e])=>{if(s.endsWith("_signatureData")&&e){const t=s.replace("_signatureData",""),i=this.signatureManager.getSignaturePad(t);if(i&&e)try{i.clear(),i.fromData(e)}catch{}}})}_saveFormDataToHistory(){var s;this.persistenceManager.saveFormData((s=this.instance)==null?void 0:s.id,this._formData,this._currentStepIndex,this._savedSignatures,this._internalCompletedSteps,this.instance||null)}_extractFormDataFromDOM(){var i;const s={},e=(i=this.shadowRoot)==null?void 0:i.querySelector(".runner-step-form");if(!e)return s;const t=e.elements;for(let n=0;n<t.length;n++){const r=t[n];if(r.name||r.id){const o=r.id||r.name;if(r.type==="checkbox"){const a=r;a.name&&a.name===o?(s[o]||(s[o]=[]),a.checked&&s[o].push(a.value)):s[o]=a.checked}else if(r.type==="radio"){const a=r;a.checked&&(s[o]=a.value)}else s[o]=r.value}}return s}_updateInstanceFromFormData(s=!1){const e=this._extractFormDataFromDOM();Object.keys(e).length>0?(this.formStateManager.mergeFormData(e),this._formData=this.formStateManager.getFormData(),this.instance&&this.instance.steps&&this.instance.steps.forEach(i=>{i.responses||(i.responses=[]),i.elements.forEach(n=>{if(n.type==="text_input"||n.type==="textarea"||n.type==="select"||n.type==="number"||n.type==="radio"||n.type==="checkbox"||n.type==="date"||n.type==="file_upload"||n.type==="signature"){const r=n,o=this._formData[r.id];if(o!==void 0&&i.responses){let a=i.responses.find(l=>l.elementId===r.id);a?(a.value=o,a.answeredAt=new Date):(a={elementId:r.id,value:o,answeredAt:new Date},i.responses.push(a))}}})}),console.log("Instance updated from form data:",this.instance),s&&this._updateInstanceData(void 0,"form_data_update",{updatedFormDataKeys:Object.keys(this._formData),updatedCompletedSteps:Array.from(this._internalCompletedSteps)})):console.log("No new form data to update instance with")}updateInstanceFromFormData(s=!1){this._updateInstanceFromFormData(s)}getFormData(){return this.formStateManager.getFormData()}restoreFormData(){this._restoreFormDataFromDOM()}clearSavedFormData(s){this._clearSavedFormData(s)}_renderUnifiedSubmissionView(){const s={instance:this.instance,assignedSteps:this._getAssignedSteps(),completedSteps:this._internalCompletedSteps,isStepAssignedToUser:this._isStepAssignedToUser.bind(this)};return Ne.renderUnifiedSubmissionView(s)}_isInstanceCompleted(){var s;return((s=this.instance)==null?void 0:s.status)==="completed"}_areUserStepsCompleted(){var e;if(!((e=this.instance)!=null&&e.steps))return!1;const s=this._getAssignedSteps();return s.length===0?!1:s.every(t=>t.status==="completed")}_isCurrentStepCompleted(){const s=this._currentStep;return!s||!this._isCurrentStepAssigned()?!1:this._internalCompletedSteps.has(s.id)}_shouldShowCompletionView(){var s;return this.mode!=="default"?!1:!!(this._isCurrentStepCompleted()||this._isInstanceCompleted()||((s=this.instance)==null?void 0:s.status)==="active"&&this._areUserStepsCompleted())}_renderModeBasedContent(){var e,t;if(this._shouldShowCompletionView())return this._renderUnifiedSubmissionView();if(this.mode==="print")return this._renderAllStepsForPrint();const s=this.mode==="preview"?(e=this.workflow)==null?void 0:e.steps:(t=this.instance)==null?void 0:t.steps;return!s||s.length===0?d`<div class="runner-content">
+    `}async _nextStep(){var t,i,r,n;if(!this._validateStep())return;const s=this._currentStep;s&&this._captureSignaturesFromStep(s);const e=this._findNextAssignedStep(this._currentStepIndex);if(e!==-1){const o=(t=this._currentStep)==null?void 0:t.id;if(this._currentStepIndex=e,(await this._updateInstanceData(o,"step_navigation",{direction:"next",fromStepIndex:this._currentStepIndex-1,toStepIndex:this._currentStepIndex,completedStepId:o})).success&&o&&(i=this.instance)!=null&&i.steps){const p=this.instance.steps.find(c=>c.id===o);p&&(p.status="completed")}const d=(n=(r=this.instance)==null?void 0:r.steps)==null?void 0:n[this._currentStepIndex];d&&(d.status="active"),this.mode!=="admin"&&this._saveFormDataToHistory(),this._scrollToTop()}}_findNextAssignedStep(s){return this.instance?this.navigationService.findNextAssignedStep(s,this.instance):-1}_isLastAssignedStep(){return this.navigationService.isLastAssignedStep(this._currentStepIndex,this.instance)}_isLastStepInWorkflow(){var e;const s=(e=this.instance)==null?void 0:e.steps;return s?this._currentStepIndex===s.length-1:!1}_goToStep(s){var i;console.log(`🎯 _goToStep called: stepIndex=${s}, mode=${this.mode}, currentStep=${this._currentStepIndex}`);const e=this.mode==="preview"?this.workflow:this.instance;if(console.log("📊 Data source:",e?`${((i=e.steps)==null?void 0:i.length)||0} steps`:"null"),!e){console.log("❌ No data source available");return}const t=this.navigationService.canNavigateToStep(s,this._currentStepIndex,e,this._internalCompletedSteps,this._isSubmitted,this._userStepsSubmitted);console.log("🚦 Navigation result:",t),t.canNavigate?(this._currentStepIndex=t.newStepIndex,console.log(`✅ Navigated to step ${t.newStepIndex}`),this._scrollToTop()):console.log("❌ Navigation blocked:",t.reason)}async _submitUserSteps(){var i;if(!this._validateStep())return;const s=this._currentStep;if(s&&this._captureSignaturesFromStep(s),!this.instance){console.error("Cannot submit, instance data is missing.");return}const e=(i=this._currentStep)==null?void 0:i.id;e&&this._internalCompletedSteps.add(e),(await this._updateInstanceData(e,"user_steps_submission")).success&&e&&this._internalCompletedSteps.add(e),this._userStepsSubmitted=!0,this._clearSavedFormData("user steps submission"),this._scrollToTop()}async _submit(){var i;if(!this._validateStep())return;const s=this._currentStep;if(s&&this._captureSignaturesFromStep(s),!this.instance){console.error("Cannot submit, instance data is missing.");return}const e=(i=this._currentStep)==null?void 0:i.id;console.log("Submitting entire workflow:",this.instance.id),console.log("Final form data:",this._formData),(await this._updateInstanceData(e,"submission")).success&&(e&&this._internalCompletedSteps.add(e),this.instance&&(this.instance.status="completed",this.instance.currentStepId=void 0,this.instance.completedSteps=Array.from(this._internalCompletedSteps)),this._isSubmitted=!0,this._clearSavedFormData("full workflow submission"),this._scrollToTop())}async _saveStep(){var i;if(!this._validateStep())return;const s=this._currentStep;if(s&&this._captureSignaturesFromStep(s),!this.instance){console.error("Cannot save, instance data is missing.");return}const e=(i=this._currentStep)==null?void 0:i.id;if((await this._updateInstanceData(e,"admin_save",{stepId:e,adminMode:!0})).success){if(e&&(this._internalCompletedSteps.add(e),this.instance.steps)){const r=this.instance.steps.find(n=>n.id===e);r&&(r.status="completed")}this._justSaved=!0,this.requestUpdate(),setTimeout(()=>{this._justSaved=!1,this.requestUpdate()},2e3)}}_clearSavedFormData(s){var e;this.persistenceManager.clearFormData((e=this.instance)==null?void 0:e.id,s)}_scrollToTop(){requestAnimationFrame(()=>{var t,i;this.scrollIntoView({behavior:"smooth",block:"start"});const s=(t=this.shadowRoot)==null?void 0:t.querySelector(".runner-layout");s&&s.scrollTo({top:0,behavior:"smooth"});const e=(i=this.shadowRoot)==null?void 0:i.querySelector(".runner-main-content");e&&e.scrollTo({top:0,behavior:"smooth"})})}async _updateInstanceData(s,e,t){var d,p,c,u,h,m,x;s&&this._internalCompletedSteps.add(s);let i=(p=(d=this.instance)==null?void 0:d.steps)==null?void 0:p.find(w=>w.id===s);if(!i&&this._internalCompletedSteps.size>0){const w=Array.from(this._internalCompletedSteps),se=w[w.length-1];i=(u=(c=this.instance)==null?void 0:c.steps)==null?void 0:u.find(re=>re.id===se)}const r=e==="submission",n=((h=this.instance)==null?void 0:h.steps)&&this._internalCompletedSteps.size>=this.instance.steps.length,o=r||n?null:this._currentStep?{id:this._currentStep.id,title:this._currentStep.title}:null,a={instanceId:(m=this.instance)==null?void 0:m.id,workflowId:(x=this.instance)==null?void 0:x.workflowId,completedStepId:s||(i?i.id:void 0),completedStepData:i?{id:i.id,title:i.title,responses:i.responses||[]}:void 0,completedSteps:Array.from(this._internalCompletedSteps),currentStep:o,mode:this.mode};if(this.onInstanceUpdated)try{this._submissionError=null,this.requestUpdate();const w=await this.onInstanceUpdated(a);return w.success?this._submissionError=null:(this._submissionError=w.error||"Unable to save response. Please try again.",s&&this._internalCompletedSteps.delete(s)),this.requestUpdate(),w}catch(w){return this._submissionError=w instanceof Error?w.message:"Unable to save response. Please try again.",s&&this._internalCompletedSteps.delete(s),this.requestUpdate(),{success:!1,error:this._submissionError}}return{success:!0}}_restoreFormData(){var e;if(!this.persistenceManager.shouldRestoreData(this.mode||"default")){console.log("Skipping form data restoration - showing official instance data");return}const s=this.persistenceManager.restoreFormData((e=this.instance)==null?void 0:e.id);s?(this.formStateManager.updateFormData(s.formData),this._formData=this.formStateManager.getFormData(),this._currentStepIndex=s.stepIndex,this._savedSignatures=s.savedSignatures,this._internalCompletedSteps=s.completedSteps,this._savedInstance=s.savedInstance||void 0):this._updateCompletedStepsFromCurrentIndex()}_updateCompletedStepsFromCurrentIndex(){var s;if((s=this.instance)!=null&&s.steps){this._internalCompletedSteps=new Set(this.instance.completedSteps||[]);for(let e=0;e<this._currentStepIndex;e++)this.instance.steps[e]&&this._internalCompletedSteps.add(this.instance.steps[e].id)}}_restoreFormDataFromDOM(){this._restoreFormData(),this._restoreFormValuesToDOM()}_restoreFormValuesToDOM(){this.updateComplete.then(()=>{var e,t;(e=this.shadowRoot)!=null&&e.querySelector(".runner-step-form")&&(Object.entries(this._formData).forEach(([i,r])=>{var o;if(i.endsWith("_signatureData"))return;const n=(o=this.shadowRoot)==null?void 0:o.getElementById(i);if(n){if(n.type==="checkbox"){const a=n;typeof r=="boolean"?a.checked=r:Array.isArray(r)&&(a.checked=r.includes(a.value))}else if(n.type==="radio"){const a=n;a.checked=a.value===r}else if(n.type==="file"){const a=n;a.value=""}else n.value=String(r||"");console.log(`Restored value for ${i}:`,r)}}),this._restoreSignatures(),console.log("Form values restored to DOM elements"),this._updateInstanceWithFormData(!0),(t=this._savedInstance)!=null&&t.steps&&this._restoreInstanceResponses())})}_updateInstanceWithFormData(s=!1){this.instance&&this.instance.steps&&this.instance.steps.forEach(e=>{e.responses||(e.responses=[]),e.elements.forEach(t=>{if(t.type==="text_input"||t.type==="textarea"||t.type==="select"||t.type==="number"||t.type==="radio"||t.type==="checkbox"||t.type==="date"||t.type==="file_upload"||t.type==="signature"){const i=t,r=this._formData[i.id];if(r!==void 0&&e.responses){let n=e.responses.find(o=>o.elementId===i.id);n?(n.value=r,n.answeredAt=new Date):(n={elementId:i.id,value:r,answeredAt:new Date},e.responses.push(n))}}})})}_restoreSignatures(){Object.entries(this._formData).forEach(([s,e])=>{if(s.endsWith("_signatureData")&&e){const t=s.replace("_signatureData",""),i=this.signatureManager.getSignaturePad(t);if(i&&e)try{i.clear(),i.fromData(e)}catch{}}})}_saveFormDataToHistory(){var s;this.persistenceManager.saveFormData((s=this.instance)==null?void 0:s.id,this._formData,this._currentStepIndex,this._savedSignatures,this._internalCompletedSteps,this.instance||null)}_extractFormDataFromDOM(){var i;const s={},e=(i=this.shadowRoot)==null?void 0:i.querySelector(".runner-step-form");if(!e)return s;const t=e.elements;for(let r=0;r<t.length;r++){const n=t[r];if(n.name||n.id){const o=n.id||n.name;if(n.type==="checkbox"){const a=n;a.name&&a.name===o?(s[o]||(s[o]=[]),a.checked&&s[o].push(a.value)):s[o]=a.checked}else if(n.type==="radio"){const a=n;a.checked&&(s[o]=a.value)}else s[o]=n.value}}return s}_updateInstanceFromFormData(s=!1){const e=this._extractFormDataFromDOM();Object.keys(e).length>0?(this.formStateManager.mergeFormData(e),this._formData=this.formStateManager.getFormData(),this.instance&&this.instance.steps&&this.instance.steps.forEach(i=>{i.responses||(i.responses=[]),i.elements.forEach(r=>{if(r.type==="text_input"||r.type==="textarea"||r.type==="select"||r.type==="number"||r.type==="radio"||r.type==="checkbox"||r.type==="date"||r.type==="file_upload"||r.type==="signature"){const n=r,o=this._formData[n.id];if(o!==void 0&&i.responses){let a=i.responses.find(d=>d.elementId===n.id);a?(a.value=o,a.answeredAt=new Date):(a={elementId:n.id,value:o,answeredAt:new Date},i.responses.push(a))}}})}),console.log("Instance updated from form data:",this.instance),s&&this._updateInstanceData(void 0,"form_data_update",{updatedFormDataKeys:Object.keys(this._formData),updatedCompletedSteps:Array.from(this._internalCompletedSteps)})):console.log("No new form data to update instance with")}updateInstanceFromFormData(s=!1){this._updateInstanceFromFormData(s)}getFormData(){return this.formStateManager.getFormData()}restoreFormData(){this._restoreFormDataFromDOM()}clearSavedFormData(s){this._clearSavedFormData(s)}_renderUnifiedSubmissionView(){const s={instance:this.instance,assignedSteps:this._getAssignedSteps(),completedSteps:this._internalCompletedSteps,isStepAssignedToUser:this._isStepAssignedToUser.bind(this)};return ve.renderUnifiedSubmissionView(s)}_isInstanceCompleted(){var s;return((s=this.instance)==null?void 0:s.status)==="completed"}_areUserStepsCompleted(){var e;if(!((e=this.instance)!=null&&e.steps))return!1;const s=this._getAssignedSteps();return s.length===0?!1:s.every(t=>t.status==="completed")}_isCurrentStepCompleted(){const s=this._currentStep;return!s||!this._isCurrentStepAssigned()?!1:this._internalCompletedSteps.has(s.id)}_shouldShowCompletionView(){var s;return this.mode!=="default"?!1:!!(this._isCurrentStepCompleted()||this._isInstanceCompleted()||((s=this.instance)==null?void 0:s.status)==="active"&&this._areUserStepsCompleted())}_renderSubmissionErrorView(){const s={instance:this.instance,assignedSteps:this._getAssignedSteps(),completedSteps:this._internalCompletedSteps,isStepAssignedToUser:this._isStepAssignedToUser.bind(this),submissionError:this._submissionError,onRetry:()=>{this._submissionError=null,this._isSubmitted=!1,this._userStepsSubmitted=!1,this.requestUpdate()}};return ve.renderSubmissionErrorView(s)}_renderModeBasedContent(){var e,t;if(this._submissionError)return this._renderSubmissionErrorView();if(this._shouldShowCompletionView())return this._renderUnifiedSubmissionView();if(this.mode==="print")return this._renderAllStepsForPrint();const s=this.mode==="preview"?(e=this.workflow)==null?void 0:e.steps:(t=this.instance)==null?void 0:t.steps;return!s||s.length===0?l`<div class="runner-content">
         ${this.mode==="preview"?"No workflow loaded or workflow has no steps.":"No workflow instance loaded or instance has no steps."}
-      </div>`:this.mode==="default"&&this._getAssignedSteps().length===0?this._renderNotAssignedView():null}_validateCurrentStep(){return this._currentStep}_initializeStepAssets(s){this.updateComplete.then(()=>{s.elements.forEach(e=>{var t;e.type==="signature"&&((t=this.shadowRoot)!=null&&t.getElementById(`signature-${e.id}`))&&this._initializeSignaturePad(e.id)}),this._restoreSignatures(),setTimeout(()=>{this._formRestorationComplete||(this._restoreFormDataFromDOM(),this._formRestorationComplete=!0)},100)})}_renderCurrentStepLayout(s){var n,r;const e=this._isLastAssignedStep(),t=this._isLastStepInWorkflow(),i=this.mode==="preview"?(n=this.workflow)==null?void 0:n.steps:(r=this.instance)==null?void 0:r.steps;return d`
+      </div>`:this.mode==="default"&&this._getAssignedSteps().length===0?this._renderNotAssignedView():null}_validateCurrentStep(){return this._currentStep}_initializeStepAssets(s){this.updateComplete.then(()=>{s.elements.forEach(e=>{var t;e.type==="signature"&&((t=this.shadowRoot)!=null&&t.getElementById(`signature-${e.id}`))&&this._initializeSignaturePad(e.id)}),this._restoreSignatures(),setTimeout(()=>{this._formRestorationComplete||(this._restoreFormDataFromDOM(),this._formRestorationComplete=!0)},100)})}_renderCurrentStepLayout(s){var r,n;const e=this._isLastAssignedStep(),t=this._isLastStepInWorkflow(),i=this.mode==="preview"?(r=this.workflow)==null?void 0:r.steps:(n=this.instance)==null?void 0:n.steps;return l`
       <!-- Mobile Steps Navigation (visible only on mobile) -->
       ${q.renderMobileSteps({steps:i,currentStepIndex:this._currentStepIndex,mode:this.mode||"default",isSubmitted:this._isSubmitted,userStepsSubmitted:this._userStepsSubmitted,completedSteps:this._internalCompletedSteps,isLoading:this.isLoading,isStepAssignedToUser:this._isStepAssignedToUser.bind(this),goToStep:this._goToStep.bind(this)})}
 
@@ -4195,20 +4699,20 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
 
       <!-- Main Content: Step Details and Questions -->
       <main class="runner-main-content">
-        ${this.mode==="print"?q.renderStepHeader({step:s,mode:this.mode}):d`<div class="runner-card">
+        ${this.mode==="print"?q.renderStepHeader({step:s,mode:this.mode}):l`<div class="runner-card">
               ${q.renderStepHeader({step:s,mode:this.mode})}
             </div>`}
         <form class="runner-step-form" @submit=${o=>o.preventDefault()}>
           ${s.elements.map(o=>this._renderStepElement(o))}
-          ${Dt.renderFormActions({mode:this.mode||"default",isLastStep:e,isLastStepInWorkflow:t,justSaved:this._justSaved,isCurrentStepAssigned:this._isCurrentStepAssigned(),handlers:{saveStep:this._saveStep.bind(this),nextStep:this._nextStep.bind(this),submitUserSteps:this._submitUserSteps.bind(this),submit:this._submit.bind(this)}})}
+          ${Dt.renderFormActions({mode:this.mode||"default",isLastStep:e,isLastStepInWorkflow:t,justSaved:this._justSaved,isCurrentStepAssigned:this._isCurrentStepAssigned(),handlers:{saveStep:()=>{this._saveStep()},nextStep:()=>{this._nextStep()},submitUserSteps:()=>{this._submitUserSteps()},submit:()=>{this._submit()}}})}
         </form>
       </main>
-    `}_renderMainContent(){const s=this._renderModeBasedContent();if(s)return s;const e=this._validateCurrentStep();return e?(this._initializeStepAssets(e),this._renderCurrentStepLayout(e)):d`<div class="runner-content">Invalid current step.</div>`}render(){return d`
+    `}_renderMainContent(){const s=this._renderModeBasedContent();if(s)return s;const e=this._validateCurrentStep();return e?(this._initializeStepAssets(e),this._renderCurrentStepLayout(e)):l`<div class="runner-content">Invalid current step.</div>`}render(){return l`
       <div class="runner-layout">
         ${this._renderMainContent()}
 
         <!-- Loading overlay with white box (conditionally rendered) -->
-        ${this.isLoading?d`
+        ${this.isLoading?l`
               <div class="runner-loading-overlay">
                 <div class="runner-loading-box">
                   <div class="runner-loading-spinner"></div>
@@ -4217,14 +4721,14 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
               </div>
             `:""}
       </div>
-    `}};b.styles=[Ue],b.QUESTION_ELEMENT_TYPES=["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"],b.CONTENT_ELEMENT_TYPES=["text","html","image","video","file","divider","markdown"],y([A({type:Object})],b.prototype,"instance",2),y([A({type:Object})],b.prototype,"workflow",2),y([A({type:String})],b.prototype,"mode",2),y([A({type:Boolean})],b.prototype,"isLoading",2),y([A({type:Object})],b.prototype,"currentUser",2),y([A({type:Function})],b.prototype,"onSignatureCaptured",2),y([A({type:Function})],b.prototype,"onFileUploaded",2),y([f()],b.prototype,"_currentStepIndex",2),y([f()],b.prototype,"_formData",2),y([f()],b.prototype,"_validationErrors",2),y([f()],b.prototype,"_internalCompletedSteps",2),y([f()],b.prototype,"_formRestorationComplete",2),y([f()],b.prototype,"_savedSignatures",2),y([f()],b.prototype,"_replacingSignatures",2),y([f()],b.prototype,"_savedInstance",2),y([f()],b.prototype,"_isSubmitted",2),y([f()],b.prototype,"_userStepsSubmitted",2),y([f()],b.prototype,"_justSaved",2),b=y([Ie("runner-widget")],b);function Et(s,e={}){const{title:t=s.name||"Workflow Instance",includeStyles:i=!0,customCSS:n="",showTimestamps:r=!1}=e,o=new Date;if(!(s!=null&&s.steps)||s.steps.length===0)throw new Error("Instance must have at least one step to generate HTML");return{html:`<!DOCTYPE html>
+    `}};f.styles=[Ne],f.QUESTION_ELEMENT_TYPES=["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"],f.CONTENT_ELEMENT_TYPES=["text","html","image","video","file","divider","markdown"],v([D({type:Object})],f.prototype,"instance",2),v([D({type:Object})],f.prototype,"workflow",2),v([D({type:String})],f.prototype,"mode",2),v([D({type:Boolean})],f.prototype,"isLoading",2),v([D({type:Object})],f.prototype,"currentUser",2),v([D({type:Function})],f.prototype,"onSignatureCaptured",2),v([D({type:Function})],f.prototype,"onFileUploaded",2),v([D({type:Function})],f.prototype,"onInstanceUpdated",2),v([b()],f.prototype,"_currentStepIndex",2),v([b()],f.prototype,"_formData",2),v([b()],f.prototype,"_validationErrors",2),v([b()],f.prototype,"_internalCompletedSteps",2),v([b()],f.prototype,"_formRestorationComplete",2),v([b()],f.prototype,"_savedSignatures",2),v([b()],f.prototype,"_replacingSignatures",2),v([b()],f.prototype,"_savedInstance",2),v([b()],f.prototype,"_isSubmitted",2),v([b()],f.prototype,"_userStepsSubmitted",2),v([b()],f.prototype,"_justSaved",2),v([b()],f.prototype,"_submissionError",2),f=v([Ue("runner-widget")],f);function Et(s,e={}){const{title:t=s.name||"Workflow Instance",includeStyles:i=!0,customCSS:r="",showTimestamps:n=!1}=e,o=new Date;if(!(s!=null&&s.steps)||s.steps.length===0)throw new Error("Instance must have at least one step to generate HTML");return{html:`<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${g(t)}</title>
   ${i?`<style>${Yt()}</style>`:""}
-  ${n?`<style>${n}</style>`:""}
+  ${r?`<style>${r}</style>`:""}
 </head>
 <body>
   <div class="print-layout">
@@ -4234,8 +4738,8 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
     </div>
     <hr class="print-question-separator" />
     
-    ${r?Vt(s,o):""}
-    ${s.steps.map(l=>Mt(l)).join(`
+    ${n?jt(s,o):""}
+    ${s.steps.map(d=>Mt(d)).join(`
 `)}
   </div>
 </body>
@@ -4254,11 +4758,11 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
       ${s.description?`<div class="print-step-description">${g(s.description)}</div>`:""}
       <hr class="print-question-separator" />
     </div>
-  `}function Ft(s,e){return Wt(s)?zt(s,e):It(s)}function zt(s,e){const t=jt(s.id,e.responses),i=t==null?void 0:t.value,r=s.type==="checkbox"&&(!s.options||s.options.length===0)?"":`
+  `}function Ft(s,e){return Wt(s)?zt(s,e):It(s)}function zt(s,e){const t=Ht(s.id,e.responses),i=t==null?void 0:t.value,n=s.type==="checkbox"&&(!s.options||s.options.length===0)?"":`
     <div class="print-question-title">
       ${g(s.label)}:
     </div>
-  `,o='<hr class="print-question-separator" />';switch(s.type){case"text_input":case"number":case"date":return r+Pt(s,i)+o;case"textarea":return r+Ut(s,i)+o;case"select":return r+Lt(s,i)+o;case"radio":return r+Nt(s,i)+o;case"checkbox":return r+Ot(s,i)+o;case"file_upload":return r+Rt(s,i)+o;case"signature":return r+Ht(s,i)+o;default:return r+`
+  `,o='<hr class="print-question-separator" />';switch(s.type){case"text_input":case"number":case"date":return n+Ut(s,i)+o;case"textarea":return n+Pt(s,i)+o;case"select":return n+Nt(s,i)+o;case"radio":return n+Lt(s,i)+o;case"checkbox":return n+Ot(s,i)+o;case"file_upload":return n+Rt(s,i)+o;case"signature":return n+Vt(s,i)+o;default:return n+`
         <div class="unknown-element">
           <p>⚠️ Unknown question type: ${g(s.type)}</p>
         </div>
@@ -4337,19 +4841,19 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
           </div>
           ${e}
         </div>
-      `}}function Pt(s,e){const t=e!=null?g(String(e)):"";return`
+      `}}function Ut(s,e){const t=e!=null?g(String(e)):"";return`
     <div class="print-response-value input-response">
       ${(s.type==="date"&&e?new Date(e).toLocaleDateString():t)||'<span class="print-no-response">No response</span>'}
     </div>
-  `}function Ut(s,e){return`
+  `}function Pt(s,e){return`
     <div class="print-response-value textarea-response">
       ${(e!=null?g(String(e)):"")||'<span class="print-no-response">No response</span>'}
     </div>
-  `}function Lt(s,e){const t=e!=null?String(e):"";return`
+  `}function Nt(s,e){const t=e!=null?String(e):"";return`
     <div class="print-response-value select-response">
       ${t?g(t):'<span class="print-no-response">No selection made</span>'}
     </div>
-  `}function Nt(s,e){const t=e!=null?String(e):"";return`
+  `}function Lt(s,e){const t=e!=null?String(e):"";return`
     <div class="print-response-value radio-response">
       ${t?g(t):'<span class="print-no-response">No selection made</span>'}
     </div>
@@ -4359,22 +4863,22 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
       </div>
     `;{const i=Array.isArray(e)?e.map(String):[];return`
       <div class="print-response-value checkbox-response">
-        ${i.length>0?i.map(n=>`<div>• ${g(n)}</div>`).join(""):'<span class="print-no-response">No selections made</span>'}
+        ${i.length>0?i.map(r=>`<div>• ${g(r)}</div>`).join(""):'<span class="print-no-response">No selections made</span>'}
       </div>
     `}}function Rt(s,e){if(!e)return'<div class="print-response-value file-response"><span class="print-no-response">No file uploaded</span></div>';const t=typeof e=="string";if(typeof e=="object"&&e.name)return`
       <div class="print-response-value file-response">
         📎 ${g(e.name)}
         ${e.size?` <span class="file-size">(${Bt(e.size)})</span>`:""}
       </div>
-    `;if(t){const n=Qt(e);return`
+    `;if(t){const r=Qt(e);return`
       <div class="print-response-value file-response">
-        📎 ${g(n)}
+        📎 ${g(r)}
       </div>
     `}else return`
       <div class="print-response-value file-response">
         📎 ${g(String(e))}
       </div>
-    `}function Ht(s,e){if(!e)return'<div class="print-response-value signature-response"><span class="print-no-response">No signature provided</span></div>';const t=typeof e=="string"?e:e.url||e.dataURL;return t?`
+    `}function Vt(s,e){if(!e)return'<div class="print-response-value signature-response"><span class="print-no-response">No signature provided</span></div>';const t=typeof e=="string"?e:e.url||e.dataURL;return t?`
       <div class="print-response-value signature-response">
         <img 
           src="${g(t)}" 
@@ -4386,7 +4890,7 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
       <div class="signature-fallback">
         <div class="signature-error">Unable to display signature</div>
       </div>
-    `}function Wt(s){return["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"].includes(s.type)}function jt(s,e){return e==null?void 0:e.find(t=>t.elementId===s)}function Vt(s,e){return`
+    `}function Wt(s){return["text_input","textarea","select","number","radio","checkbox","date","file_upload","signature"].includes(s.type)}function Ht(s,e){return e==null?void 0:e.find(t=>t.elementId===s)}function jt(s,e){return`
     <div class="runner-card" style="margin-bottom: 40px; border-left: 4px solid #3b82f6;">
       <div style="display: flex; justify-content: between; align-items: center; gap: 20px;">
         <div>
@@ -4909,4 +5413,4 @@ Use **bold** and *italic* text.`;break}const i=this._templateData.steps.map(r=>r
       margin: 2px 0;
       line-height: 1.4;
     }
-  `}function qt(s,e={}){if(!customElements.get("builder-widget"))return console.error("Error: <builder-widget> is not defined. Make sure it was imported."),null;const t=document.getElementById(s);if(!t)return console.error(`Error: Target element with ID '${s}' not found.`),null;t.innerHTML="";const i=document.createElement("builder-widget");return e.workflow&&(i.workflow=e.workflow),e.onWorkflowCreated&&(i.onWorkflowCreated=e.onWorkflowCreated),e.onWorkflowDeleted&&(i.onWorkflowDeleted=e.onWorkflowDeleted),e.onWorkflowUpdated&&(i.onWorkflowUpdated=e.onWorkflowUpdated),t.appendChild(i),console.log(`Drill Builder mounted on #${s}`),i}function Kt(s,e){if(!customElements.get("runner-widget"))return console.error("Error: <runner-widget> is not defined. Make sure it was imported."),null;const t=document.getElementById(s);if(!t)return console.error(`Error: Target element with ID '${s}' not found.`),null;if(e.mode==="preview"){if(!e||!e.workflow)return console.error("Error: Workflow data must be provided for preview mode."),t.innerHTML='<p style="color: red;">Error: Workflow data required for preview mode.</p>',null;if(!e.workflow.steps||e.workflow.steps.length===0)return console.error("Error: Workflow provided to runner has no steps defined."),t.innerHTML='<p style="color: red;">Error: Workflow has no steps.</p>',null}else{if(!e||!e.instance)return console.error("Error: Instance data must be provided in runner config."),t.innerHTML='<p style="color: red;">Error: Instance data required.</p>',null;if(!e.instance.steps||e.instance.steps.length===0)return console.error("Error: Instance provided to runner has no steps defined."),t.innerHTML='<p style="color: red;">Error: Instance has no steps.</p>',null}t.innerHTML="";const i=document.createElement("runner-widget");return e.mode==="preview"?(i.workflow=e.workflow,i.mode="preview"):(i.instance=e.instance,i.mode=e.mode||"default"),e.mode&&(i.mode=e.mode),e.isLoading!==void 0&&(i.isLoading=e.isLoading),e.onSignatureCaptured&&(i.onSignatureCaptured=e.onSignatureCaptured),e.onFileUploaded&&(i.onFileUploaded=e.onFileUploaded),e.currentUser&&(i.currentUser=e.currentUser),e.onInstanceUpdated&&i.addEventListener("instance-updated",n=>{const r=n;try{e.onInstanceUpdated(r.detail)}catch(o){console.error("Error executing onInstanceUpdated callback:",o)}}),t.appendChild(i),console.log(`Drill Runner mounted on #${s}`),i}function Jt(s,e){const t=s.getFormData(),i=JSON.parse(JSON.stringify(e));return i.steps&&i.steps.forEach(n=>{n.responses||(n.responses=[]),n.elements.forEach(r=>{if(r.type==="text_input"||r.type==="textarea"||r.type==="select"||r.type==="number"||r.type==="radio"||r.type==="checkbox"||r.type==="date"||r.type==="file_upload"||r.type==="signature"){const o=t[r.id];if(o!==void 0){let a=n.responses.find(l=>l.elementId===r.id);a?(a.value=o,a.answeredAt=new Date):(a={elementId:r.id,value:o,answeredAt:new Date},n.responses.push(a))}}})}),i}function Xt(s,e){const t={};e.steps&&e.steps.forEach(i=>{i.responses&&i.responses.forEach(n=>{t[n.elementId]=n.value})}),s.restoreFormData(),console.log("Form data restored to runner widget:",t)}C.createBuilder=qt,C.createRunner=Kt,C.generateInstanceHTML=Et,C.restoreFormDataToRunner=Xt,C.updateInstanceFromRunnerForm=Jt,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});
+  `}function qt(s,e={}){if(!customElements.get("builder-widget"))return console.error("Error: <builder-widget> is not defined. Make sure it was imported."),null;const t=document.getElementById(s);if(!t)return console.error(`Error: Target element with ID '${s}' not found.`),null;t.innerHTML="";const i=document.createElement("builder-widget");return e.workflow&&(i.workflow=e.workflow),e.onWorkflowCreated&&(i.onWorkflowCreated=e.onWorkflowCreated),e.onWorkflowDeleted&&(i.onWorkflowDeleted=e.onWorkflowDeleted),e.onWorkflowUpdated&&(i.onWorkflowUpdated=e.onWorkflowUpdated),t.appendChild(i),console.log(`Drill Builder mounted on #${s}`),i}function Kt(s,e){if(!customElements.get("runner-widget"))return console.error("Error: <runner-widget> is not defined. Make sure it was imported."),null;const t=document.getElementById(s);if(!t)return console.error(`Error: Target element with ID '${s}' not found.`),null;if(e.mode==="preview"){if(!e||!e.workflow)return console.error("Error: Workflow data must be provided for preview mode."),t.innerHTML='<p style="color: red;">Error: Workflow data required for preview mode.</p>',null;if(!e.workflow.steps||e.workflow.steps.length===0)return console.error("Error: Workflow provided to runner has no steps defined."),t.innerHTML='<p style="color: red;">Error: Workflow has no steps.</p>',null}else{if(!e||!e.instance)return console.error("Error: Instance data must be provided in runner config."),t.innerHTML='<p style="color: red;">Error: Instance data required.</p>',null;if(!e.instance.steps||e.instance.steps.length===0)return console.error("Error: Instance provided to runner has no steps defined."),t.innerHTML='<p style="color: red;">Error: Instance has no steps.</p>',null}t.innerHTML="";const i=document.createElement("runner-widget");return e.mode==="preview"?(i.workflow=e.workflow,i.mode="preview"):(i.instance=e.instance,i.mode=e.mode||"default"),e.mode&&(i.mode=e.mode),e.isLoading!==void 0&&(i.isLoading=e.isLoading),e.onSignatureCaptured&&(i.onSignatureCaptured=e.onSignatureCaptured),e.onFileUploaded&&(i.onFileUploaded=e.onFileUploaded),e.currentUser&&(i.currentUser=e.currentUser),e.onInstanceUpdated&&(i.onInstanceUpdated=e.onInstanceUpdated),t.appendChild(i),console.log(`Drill Runner mounted on #${s}`),i}function Jt(s,e){const t=s.getFormData(),i=JSON.parse(JSON.stringify(e));return i.steps&&i.steps.forEach(r=>{r.responses||(r.responses=[]),r.elements.forEach(n=>{if(n.type==="text_input"||n.type==="textarea"||n.type==="select"||n.type==="number"||n.type==="radio"||n.type==="checkbox"||n.type==="date"||n.type==="file_upload"||n.type==="signature"){const o=t[n.id];if(o!==void 0){let a=r.responses.find(d=>d.elementId===n.id);a?(a.value=o,a.answeredAt=new Date):(a={elementId:n.id,value:o,answeredAt:new Date},r.responses.push(a))}}})}),i}function Xt(s,e){const t={};e.steps&&e.steps.forEach(i=>{i.responses&&i.responses.forEach(r=>{t[r.elementId]=r.value})}),s.restoreFormData(),console.log("Form data restored to runner widget:",t)}A.createBuilder=qt,A.createRunner=Kt,A.generateInstanceHTML=Et,A.restoreFormDataToRunner=Xt,A.updateInstanceFromRunnerForm=Jt,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});