drill-widgets 2.7.6 → 2.7.7

package/dist/drill-widgets.es.js

@@ -75,7 +75,7 @@ const { is: We, defineProperty: He, getOwnPropertyDescriptor: Ve, getOwnProperty
   return t;
 } }, fe = (i, e) => !We(i, e), Se = { attribute: !0, type: String, converter: K, reflect: !1, useDefault: !1, hasChanged: fe };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), A.litPropertyMetadata ?? (A.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let I = class extends HTMLElement {
+let U = class extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e);
   }
@@ -192,8 +192,8 @@ let I = class extends HTMLElement {
     var r, o;
     const n = this.constructor, s = n._$Eh.get(e);
     if (s !== void 0 && this._$Em !== s) {
-      const a = n.getPropertyOptions(s), d = typeof a.converter == "function" ? { fromAttribute: a.converter } : ((r = a.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? a.converter : K;
-      this._$Em = s, this[s] = d.fromAttribute(t, a.type) ?? ((o = this._$Ej) == null ? void 0 : o.get(s)) ?? null, this._$Em = null;
+      const a = n.getPropertyOptions(s), l = typeof a.converter == "function" ? { fromAttribute: a.converter } : ((r = a.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? a.converter : K;
+      this._$Em = s, this[s] = l.fromAttribute(t, a.type) ?? ((o = this._$Ej) == null ? void 0 : o.get(s)) ?? null, this._$Em = null;
     }
   }
   requestUpdate(e, t, n) {
@@ -231,8 +231,8 @@ let I = class extends HTMLElement {
       }
       const s = this.constructor.elementProperties;
       if (s.size > 0) for (const [r, o] of s) {
-        const { wrapped: a } = o, d = this[r];
-        a !== !0 || this._$AL.has(r) || d === void 0 || this.C(r, void 0, o, d);
+        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;
@@ -276,15 +276,15 @@ let I = class extends HTMLElement {
   firstUpdated(e) {
   }
 };
-I.elementStyles = [], I.shadowRootOptions = { mode: "open" }, I[W("elementProperties")] = /* @__PURE__ */ new Map(), I[W("finalized")] = /* @__PURE__ */ new Map(), ne == null || ne({ ReactiveElement: I }), (A.reactiveElementVersions ?? (A.reactiveElementVersions = [])).push("2.1.0");
+U.elementStyles = [], U.shadowRootOptions = { mode: "open" }, U[W("elementProperties")] = /* @__PURE__ */ new Map(), U[W("finalized")] = /* @__PURE__ */ new Map(), ne == null || ne({ ReactiveElement: U }), (A.reactiveElementVersions ?? (A.reactiveElementVersions = [])).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const H = globalThis, J = H.trustedTypes, ye = J ? J.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, ze = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ue = "?" + E, Ye = `<${Ue}>`, z = document, V = () => z.createComment(""), j = (i) => i === null || typeof i != "object" && typeof i != "function", me = Array.isArray, qe = (i) => me(i) || typeof (i == null ? void 0 : i[Symbol.iterator]) == "function", se = `[ 	
+const H = globalThis, J = H.trustedTypes, ye = J ? J.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, ze = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ie = "?" + E, Ye = `<${Ie}>`, z = document, V = () => z.createComment(""), j = (i) => i === null || typeof i != "object" && typeof i != "function", me = Array.isArray, qe = (i) => me(i) || typeof (i == null ? void 0 : i[Symbol.iterator]) == "function", se = `[ 	
 \f\r]`, O = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, we = /-->/g, ke = />/g, M = RegExp(`>|${se}(?:([^\\s"'>=/]+)(${se}*=${se}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), $e = /'/g, De = /"/g, Ie = /^(?:script|style|textarea|title)$/i, Ke = (i) => (e, ...t) => ({ _$litType$: i, strings: e, values: t }), l = Ke(1), U = Symbol.for("lit-noChange"), v = Symbol.for("lit-nothing"), Ce = /* @__PURE__ */ new WeakMap(), F = z.createTreeWalker(z, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), $e = /'/g, De = /"/g, Ue = /^(?:script|style|textarea|title)$/i, Ke = (i) => (e, ...t) => ({ _$litType$: i, strings: e, values: t }), d = Ke(1), I = Symbol.for("lit-noChange"), v = Symbol.for("lit-nothing"), Ce = /* @__PURE__ */ new WeakMap(), F = z.createTreeWalker(z, 129);
 function Pe(i, e) {
   if (!me(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ye !== void 0 ? ye.createHTML(e) : e;
@@ -293,11 +293,11 @@ const Je = (i, e) => {
   const t = i.length - 1, n = [];
   let s, r = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", o = O;
   for (let a = 0; a < t; a++) {
-    const d = i[a];
+    const l = i[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 === O ? c[1] === "!--" ? o = we : c[1] !== void 0 ? o = ke : c[2] !== void 0 ? (Ie.test(c[2]) && (s = RegExp("</" + c[2], "g")), o = M) : c[3] !== void 0 && (o = M) : o === M ? c[0] === ">" ? (o = s ?? O, u = -1) : c[1] === void 0 ? u = -2 : (u = o.lastIndex - c[2].length, p = c[1], o = c[3] === void 0 ? M : c[3] === '"' ? De : $e) : o === De || o === $e ? o = M : o === we || o === ke ? o = O : (o = M, s = void 0);
+    for (; h < l.length && (o.lastIndex = h, c = o.exec(l), c !== null); ) h = o.lastIndex, o === O ? c[1] === "!--" ? o = we : c[1] !== void 0 ? o = ke : c[2] !== void 0 ? (Ue.test(c[2]) && (s = RegExp("</" + c[2], "g")), o = M) : c[3] !== void 0 && (o = M) : o === M ? c[0] === ">" ? (o = s ?? O, u = -1) : c[1] === void 0 ? u = -2 : (u = o.lastIndex - c[2].length, p = c[1], o = c[3] === void 0 ? M : c[3] === '"' ? De : $e) : o === De || o === $e ? o = M : o === we || o === ke ? o = O : (o = M, s = void 0);
     const g = o === M && i[a + 1].startsWith("/>") ? " " : "";
-    r += o === O ? d + Ye : u >= 0 ? (n.push(p), d.slice(0, u) + ze + d.slice(u) + E + g) : d + E + (u === -2 ? a : g);
+    r += o === O ? l + Ye : u >= 0 ? (n.push(p), l.slice(0, u) + ze + l.slice(u) + E + g) : l + E + (u === -2 ? a : g);
   }
   return [Pe(i, r + (i[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), n];
 };
@@ -306,29 +306,29 @@ class Q {
     let s;
     this.parts = [];
     let r = 0, o = 0;
-    const a = e.length - 1, d = this.parts, [p, c] = Je(e, t);
+    const a = e.length - 1, l = this.parts, [p, c] = Je(e, t);
     if (this.el = Q.createElement(p, n), F.currentNode = this.el.content, t === 2 || t === 3) {
       const u = this.el.content.firstChild;
       u.replaceWith(...u.childNodes);
     }
-    for (; (s = F.nextNode()) !== null && d.length < a; ) {
+    for (; (s = F.nextNode()) !== null && l.length < a; ) {
       if (s.nodeType === 1) {
         if (s.hasAttributes()) for (const u of s.getAttributeNames()) if (u.endsWith(ze)) {
           const h = c[o++], g = s.getAttribute(u).split(E), b = /([.?@])?(.*)/.exec(h);
-          d.push({ type: 1, index: r, name: b[2], strings: g, ctor: b[1] === "." ? Ze : b[1] === "?" ? et : b[1] === "@" ? tt : ie }), s.removeAttribute(u);
-        } else u.startsWith(E) && (d.push({ type: 6, index: r }), s.removeAttribute(u));
-        if (Ie.test(s.tagName)) {
+          l.push({ type: 1, index: r, name: b[2], strings: g, ctor: b[1] === "." ? Ze : b[1] === "?" ? et : b[1] === "@" ? tt : ie }), s.removeAttribute(u);
+        } else u.startsWith(E) && (l.push({ type: 6, index: r }), s.removeAttribute(u));
+        if (Ue.test(s.tagName)) {
           const u = s.textContent.split(E), h = u.length - 1;
           if (h > 0) {
             s.textContent = J ? J.emptyScript : "";
-            for (let g = 0; g < h; g++) s.append(u[g], V()), F.nextNode(), d.push({ type: 2, index: ++r });
+            for (let g = 0; g < h; g++) s.append(u[g], V()), F.nextNode(), l.push({ type: 2, index: ++r });
             s.append(u[h], V());
           }
         }
-      } else if (s.nodeType === 8) if (s.data === Ue) d.push({ type: 2, index: r });
+      } else if (s.nodeType === 8) if (s.data === Ie) l.push({ type: 2, index: r });
       else {
         let u = -1;
-        for (; (u = s.data.indexOf(E, u + 1)) !== -1; ) d.push({ type: 7, index: r }), u += E.length - 1;
+        for (; (u = s.data.indexOf(E, u + 1)) !== -1; ) l.push({ type: 7, index: r }), u += E.length - 1;
       }
       r++;
     }
@@ -340,7 +340,7 @@ class Q {
 }
 function L(i, e, t = i, n) {
   var o, a;
-  if (e === U) return e;
+  if (e === I) return e;
   let s = n !== void 0 ? (o = t._$Co) == null ? void 0 : o[n] : t._$Cl;
   const r = j(e) ? void 0 : e._$litDirective$;
   return (s == null ? void 0 : s.constructor) !== r && ((a = s == null ? void 0 : s._$AO) == null || a.call(s, !1), r === void 0 ? s = void 0 : (s = new r(i), s._$AT(i, t, n)), n !== void 0 ? (t._$Co ?? (t._$Co = []))[n] = s : t._$Cl = s), s !== void 0 && (e = L(i, s._$AS(i, e.values), s, n)), e;
@@ -358,13 +358,13 @@ class Xe {
   u(e) {
     const { el: { content: t }, parts: n } = this._$AD, s = ((e == null ? void 0 : e.creationScope) ?? z).importNode(t, !0);
     F.currentNode = s;
-    let r = F.nextNode(), o = 0, a = 0, d = n[0];
-    for (; d !== void 0; ) {
-      if (o === d.index) {
+    let r = F.nextNode(), o = 0, a = 0, l = n[0];
+    for (; l !== void 0; ) {
+      if (o === l.index) {
         let p;
-        d.type === 2 ? p = new B(r, r.nextSibling, this, e) : d.type === 1 ? p = new d.ctor(r, d.name, d.strings, this, e) : d.type === 6 && (p = new it(r, this, e)), this._$AV.push(p), d = n[++a];
+        l.type === 2 ? p = new B(r, r.nextSibling, this, e) : l.type === 1 ? p = new l.ctor(r, l.name, l.strings, this, e) : l.type === 6 && (p = new it(r, this, e)), this._$AV.push(p), l = n[++a];
       }
-      o !== (d == null ? void 0 : d.index) && (r = F.nextNode(), o++);
+      o !== (l == null ? void 0 : l.index) && (r = F.nextNode(), o++);
     }
     return F.currentNode = z, s;
   }
@@ -393,7 +393,7 @@ class B {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = L(this, e, t), j(e) ? e === v || e == null || e === "" ? (this._$AH !== v && this._$AR(), this._$AH = v) : e !== this._$AH && e !== U && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : qe(e) ? this.k(e) : this._(e);
+    e = L(this, e, t), j(e) ? e === v || e == null || e === "" ? (this._$AH !== v && this._$AR(), this._$AH = v) : e !== this._$AH && e !== I && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : qe(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -449,11 +449,11 @@ class ie {
   _$AI(e, t = this, n, s) {
     const r = this.strings;
     let o = !1;
-    if (r === void 0) e = L(this, e, t, 0), o = !j(e) || e !== this._$AH && e !== U, o && (this._$AH = e);
+    if (r === void 0) e = L(this, e, t, 0), o = !j(e) || e !== this._$AH && e !== I, o && (this._$AH = e);
     else {
       const a = e;
-      let d, p;
-      for (e = r[0], d = 0; d < r.length - 1; d++) p = L(this, a[n + d], t, d), p === U && (p = this._$AH[d]), o || (o = !j(p) || p !== this._$AH[d]), p === v ? e = v : e !== v && (e += (p ?? "") + r[d + 1]), this._$AH[d] = p;
+      let l, p;
+      for (e = r[0], l = 0; l < r.length - 1; l++) p = L(this, a[n + l], t, l), p === I && (p = this._$AH[l]), o || (o = !j(p) || p !== this._$AH[l]), p === v ? e = v : e !== v && (e += (p ?? "") + r[l + 1]), this._$AH[l] = p;
     }
     o && !s && this.j(e);
   }
@@ -482,7 +482,7 @@ class tt extends ie {
     super(e, t, n, s, r), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = L(this, e, t, 0) ?? v) === U) return;
+    if ((e = L(this, e, t, 0) ?? v) === I) return;
     const n = this._$AH, s = e === v && n !== v || e.capture !== n.capture || e.once !== n.once || e.passive !== n.passive, r = e !== v && (n === v || s);
     s && this.element.removeEventListener(this.name, this, n), r && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
@@ -519,7 +519,7 @@ const nt = (i, e, t) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const T = globalThis;
-let P = class extends I {
+let P = class extends U {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -541,7 +541,7 @@ let P = class extends I {
     super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
   }
   render() {
-    return U;
+    return I;
   }
 };
 var Fe;
@@ -570,8 +570,8 @@ const st = { attribute: !0, type: String, converter: K, reflect: !1, hasChanged:
   if (r === void 0 && globalThis.litPropertyMetadata.set(s, r = /* @__PURE__ */ new Map()), n === "setter" && ((i = Object.create(i)).wrapped = !0), r.set(t.name, i), n === "accessor") {
     const { name: o } = t;
     return { set(a) {
-      const d = e.get.call(this);
-      e.set.call(this, a), this.requestUpdate(o, d, i);
+      const l = e.get.call(this);
+      e.set.call(this, a), this.requestUpdate(o, l, i);
     }, init(a) {
       return a !== void 0 && this.C(o, void 0, i, a), a;
     } };
@@ -579,8 +579,8 @@ const st = { attribute: !0, type: String, converter: K, reflect: !1, hasChanged:
   if (n === "setter") {
     const { name: o } = t;
     return function(a) {
-      const d = this[o];
-      e.call(this, a), this.requestUpdate(o, d, i);
+      const l = this[o];
+      e.call(this, a), this.requestUpdate(o, l, i);
     };
   }
   throw Error("Unsupported decorator location: " + n);
@@ -607,7 +607,7 @@ function ot(i, e = 0) {
 }
 let ae;
 const at = new Uint8Array(16);
-function dt() {
+function lt() {
   if (!ae) {
     if (typeof crypto > "u" || !crypto.getRandomValues)
       throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
@@ -615,13 +615,13 @@ function dt() {
   }
   return ae(at);
 }
-const lt = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Ee = { randomUUID: lt };
-function de(i, e, t) {
+const dt = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Ee = { randomUUID: dt };
+function le(i, e, t) {
   var s;
   if (Ee.randomUUID && !i)
     return Ee.randomUUID();
   i = i || {};
-  const n = i.random ?? ((s = i.rng) == null ? void 0 : s.call(i)) ?? dt();
+  const n = i.random ?? ((s = i.rng) == null ? void 0 : s.call(i)) ?? lt();
   if (n.length < 16)
     throw new Error("Random bytes length must be >= 16");
   return n[6] = n[6] & 15 | 64, n[8] = n[8] & 63 | 128, ot(n);
@@ -3107,7 +3107,11 @@ let w = class extends P {
     }, this._draggedStepId = null, this._dragOverStepId = null, this._selectedStepId = null, this._questions = [];
   }
   connectedCallback() {
-    super.connectedCallback(), this._templateData = this._getDefaultWorkflowData();
+    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();
+  }
+  // Detect changes to the workflow property
+  updated(i) {
+    i.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 i = {
@@ -3123,7 +3127,7 @@ let w = class extends P {
       status: "pending"
     };
     return {
-      id: de(),
+      id: le(),
       name: "",
       description: "",
       steps: [i]
@@ -3148,15 +3152,15 @@ let w = class extends P {
     console.log("🚫 Builder Widget: Cancel button clicked"), (i = this.onCancel) == null || i.call(this);
   }
   _handleSave() {
-    var i, e;
+    var i, e, t;
     if ((i = this._templateData.name) != null && i.trim()) {
-      const t = {
-        id: this._templateData.id || de(),
+      const n = {
+        id: this._templateData.id || le(),
         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(t, null, 2)), console.log("🔄 Calling onWorkflow updated callback with workflow template"), (e = this.onWorkflowUpdated) == null || e.call(this, t);
+      console.log("💾 Builder Widget: Save button clicked"), console.log("📄 Workflow Template:", JSON.stringify(n, null, 2)), this.workflow ? (console.log("Calling onWorkflowUpdated callback"), (e = this.onWorkflowUpdated) == null || e.call(this, n)) : (console.log("Calling onWorkflowCreated callback"), (t = this.onWorkflowCreated) == null || t.call(this, n));
     } else
       console.log("⚠️ Builder Widget: Save attempted but no title provided");
   }
@@ -3186,7 +3190,7 @@ let w = class extends P {
       return;
     }
     const i = this._templateData.steps || [], e = {
-      id: de(),
+      id: le(),
       title: this._stepFormData.title.trim(),
       description: ((n = this._stepFormData.description) == null ? void 0 : n.trim()) || "",
       order: i.length + 1,
@@ -3236,14 +3240,14 @@ let w = class extends P {
     }
     console.log(
       "🔄 Before reorder:",
-      t.map((a, d) => `${d + 1}: ${a.title}`)
+      t.map((a, l) => `${l + 1}: ${a.title}`)
     );
     const r = [...t], [o] = r.splice(n, 1);
-    r.splice(s, 0, o), r.forEach((a, d) => {
-      a.order = d + 1;
+    r.splice(s, 0, o), r.forEach((a, l) => {
+      a.order = l + 1;
     }), console.log(
       "🔄 After reorder:",
-      r.map((a, d) => `${d + 1}: ${a.title}`)
+      r.map((a, l) => `${l + 1}: ${a.title}`)
     ), this._templateData = {
       ...this._templateData,
       steps: r
@@ -3414,12 +3418,12 @@ Use **bold** and *italic* text.`;
     switch (i.type) {
       case "select":
       case "radio":
-        return l`
+        return d`
           <div class="question-options-section">
             <label class="options-label">Options:</label>
             <div class="options-list">
               ${(i.options || []).map(
-          (e, t) => l`
+          (e, t) => d`
                   <div class="option-item">
                     <input
                       type="text"
@@ -3463,7 +3467,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "checkbox":
-        return l`
+        return d`
           <div class="question-checkbox-config">
             <div class="checkbox-type-selection">
               <label class="checkbox-type-label">
@@ -3496,12 +3500,12 @@ Use **bold** and *italic* text.`;
               </label>
             </div>
 
-            ${i.options && i.options.length > 0 ? l`
+            ${i.options && i.options.length > 0 ? d`
                   <div class="question-options-section">
                     <label class="options-label">Checkbox Options:</label>
                     <div class="options-list">
                       ${(i.options || []).map(
-          (e, t) => l`
+          (e, t) => d`
                           <div class="option-item">
                             <input
                               type="text"
@@ -3543,7 +3547,7 @@ Use **bold** and *italic* text.`;
                       </button>
                     </div>
                   </div>
-                ` : l`
+                ` : d`
                   <div class="single-checkbox-info">
                     <p class="config-note">
                       Single checkbox - users can check/uncheck for Yes/No response
@@ -3553,7 +3557,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "textarea":
-        return l`
+        return d`
           <div class="question-config-section">
             <label class="config-label">
               Placeholder:
@@ -3573,7 +3577,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "text_input":
-        return l`
+        return d`
           <div class="question-config-section">
             <label class="config-label">
               Placeholder:
@@ -3593,7 +3597,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "number":
-        return l`
+        return d`
           <div class="question-config-section">
             <label class="config-label">
               Placeholder:
@@ -3613,31 +3617,31 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "file_upload":
-        return l`
+        return d`
           <div class="question-config-section">
             <p class="config-note">File upload field - users can upload files</p>
           </div>
         `;
       case "signature":
-        return l`
+        return d`
           <div class="question-config-section">
             <p class="config-note">Digital signature pad - users can sign with mouse/touch</p>
           </div>
         `;
       case "date":
-        return l`
+        return d`
           <div class="question-config-section">
             <p class="config-note">Date picker field</p>
           </div>
         `;
       default:
-        return l``;
+        return d``;
     }
   }
   _renderContentTypeSpecificFields(i) {
     switch (i.type) {
       case "text":
-        return l`
+        return d`
           <div class="content-config-section">
             <label class="config-label">
               Text Content:
@@ -3656,7 +3660,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "html":
-        return l`
+        return d`
           <div class="content-config-section">
             <label class="config-label">
               HTML Content:
@@ -3675,7 +3679,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "image":
-        return l`
+        return d`
           <div class="content-config-section">
             <label class="config-label">
               Image URL:
@@ -3725,7 +3729,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "video":
-        return l`
+        return d`
           <div class="content-config-section">
             <label class="config-label">
               Video URL:
@@ -3760,7 +3764,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "file":
-        return l`
+        return d`
           <div class="content-config-section">
             <label class="config-label">
               File URL:
@@ -3795,7 +3799,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "divider":
-        return l`
+        return d`
           <div class="content-config-section">
             <label class="config-label">
               Caption:
@@ -3815,7 +3819,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       case "markdown":
-        return l`
+        return d`
           <div class="content-config-section">
             <label class="config-label">
               Markdown Content:
@@ -3834,7 +3838,7 @@ Use **bold** and *italic* text.`;
           </div>
         `;
       default:
-        return l``;
+        return d``;
     }
   }
   _getQuestionTypeDisplayName(i) {
@@ -3888,6 +3892,20 @@ Use **bold** and *italic* text.`;
     const i = !!(this._templateData.steps && this._templateData.steps.length > 0);
     return i && !this._selectedStepId && this._templateData.steps && (this._selectedStepId = this._templateData.steps[0].id, console.log("🎯 Auto-selected first step:", this._templateData.steps[0].title)), !i && this._selectedStepId && (this._selectedStepId = null), i;
   }
+  _showStepMenu(i, e) {
+    i.stopPropagation(), console.log("Step menu for:", e), confirm("Delete this step?") && this._deleteStep(e);
+  }
+  _deleteStep(i) {
+    if (!confirm("Are you sure you want to delete this step?"))
+      return;
+    const e = (this._templateData.steps || []).filter((t) => t.id !== i);
+    e.forEach((t, n) => {
+      t.order = n + 1;
+    }), this._templateData = {
+      ...this._templateData,
+      steps: e
+    }, this._selectedStepId === i && (this._selectedStepId = e.length > 0 ? e[0].id : null), console.log("Step deleted:", i);
+  }
   _getAssignmentDisplayText(i) {
     switch (i.category) {
       case "individual":
@@ -3915,8 +3933,9 @@ Use **bold** and *italic* text.`;
     }
   }
   render() {
+    var e;
     const i = this._getSelectedStep();
-    return l`
+    return d`
       <div class="header">
         <div class="header-inputs">
           <div class="form-group">
@@ -3956,15 +3975,49 @@ Use **bold** and *italic* text.`;
             </div>
 
             <div class="steps-list">
-              <div class="step-item selected" @click=${() => this._selectStep("step-1")}>
-                <div class="step-handle">⋮⋮</div>
-                <div class="step-content">
-                  <strong>Step 1</strong>
-                </div>
-                <div class="step-actions">
-                  <button class="step-menu">⋯</button>
-                </div>
-              </div>
+              ${((e = this._templateData.steps) == null ? void 0 : e.map(
+      (t) => d`
+                  <div
+                    class="step-item ${this._selectedStepId === t.id ? "selected" : ""} ${this._dragOverStepId === t.id ? "drag-over" : ""}"
+                    @click=${() => this._selectStep(t.id)}
+                    draggable="true"
+                    @dragstart=${(n) => this._handleDragStart(n, t.id)}
+                    @dragend=${this._handleDragEnd}
+                    @dragover=${(n) => this._handleDragOver(n, t.id)}
+                    @dragleave=${this._handleDragLeave}
+                    @drop=${(n) => this._handleDrop(n, t.id)}
+                  >
+                    <div class="step-handle">
+                      <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      >
+                        <line x1="4" y1="4" x2="12" y2="4" />
+                        <line x1="4" y1="8" x2="12" y2="8" />
+                        <line x1="4" y1="12" x2="12" y2="12" />
+                      </svg>
+                    </div>
+                    <div class="step-content">
+                      <strong>${t.title}</strong>
+                      <small>${this._getAssignmentDisplayText(t.assignment)}</small>
+                    </div>
+                    <div class="step-actions">
+                      <button
+                        class="step-menu"
+                        @click=${(n) => {
+        n.stopPropagation(), this._showStepMenu(n, t.id);
+      }}
+                      >
+                        ⋯
+                      </button>
+                    </div>
+                  </div>
+                `
+    )) || []}
             </div>
           </div>
 
@@ -3975,40 +4028,40 @@ Use **bold** and *italic* text.`;
               <button class="add-button" @click=${() => this._addQuestion()}>Add</button>
             </div>
 
-            ${i && i.elements && i.elements.length > 0 ? l`
+            ${i && i.elements && i.elements.length > 0 ? d`
                   <div class="elements-list">
-                    ${i.elements.map((e) => {
-      const t = "label" in e && "required" in e, n = "content" in e;
-      if (t) {
-        const s = e;
-        return l`
+                    ${i.elements.map((t) => {
+      const n = "label" in t && "required" in t, s = "content" in t;
+      if (n) {
+        const r = t;
+        return d`
                           <div class="question-item">
                             <div class="question-header">
                               <h3 class="question-title">
-                                ${s.label || (s.type === "checkbox" ? this._getCheckboxTypeDisplayName(s) : this._getQuestionTypeDisplayName(s.type))}
+                                ${r.label || (r.type === "checkbox" ? this._getCheckboxTypeDisplayName(r) : this._getQuestionTypeDisplayName(r.type))}
                               </h3>
                               <div class="question-header-controls">
                                 <select
                                   class="question-type-select"
-                                  .value=${s.type || "text_input"}
+                                  .value=${r.type || "text_input"}
                                   style="color: #000 !important;"
-                                  @change=${(r) => {
-          const a = r.target.value;
+                                  @change=${(o) => {
+          const l = o.target.value;
           if ([
             "text",
             "html",
             "divider",
             "markdown"
-          ].includes(a)) {
-            this._addQuestion(a), this._deleteQuestion(s.id);
+          ].includes(l)) {
+            this._addQuestion(l), this._deleteQuestion(r.id);
             return;
           }
-          const p = { type: a };
-          ["select", "radio", "checkbox"].includes(a) && !s.options && (p.options = ["Option 1", "Option 2"]);
-          const c = this._getQuestionTypeDisplayName(
-            s.type
+          const c = { type: l };
+          ["select", "radio", "checkbox"].includes(l) && !r.options && (c.options = ["Option 1", "Option 2"]);
+          const u = this._getQuestionTypeDisplayName(
+            r.type
           );
-          (!s.label || s.label === c) && (p.label = this._getQuestionTypeDisplayName(a)), this._updateQuestion(s.id, p);
+          (!r.label || r.label === u) && (c.label = this._getQuestionTypeDisplayName(l)), this._updateQuestion(r.id, c);
         }}
                                 >
                                   <optgroup label="Questions">
@@ -4031,7 +4084,7 @@ Use **bold** and *italic* text.`;
                                 </select>
                                 <button
                                   class="delete-question-button"
-                                  @click=${() => this._deleteQuestion(s.id)}
+                                  @click=${() => this._deleteQuestion(r.id)}
                                   title="Delete question"
                                 >
                                   🗑️
@@ -4043,25 +4096,25 @@ Use **bold** and *italic* text.`;
                               type="text"
                               class="question-label-input"
                               placeholder="Question label"
-                              .value=${s.label || ""}
-                              @input=${(r) => {
-          const o = r.target;
-          this._updateQuestion(s.id, {
-            label: o.value
+                              .value=${r.label || ""}
+                              @input=${(o) => {
+          const a = o.target;
+          this._updateQuestion(r.id, {
+            label: a.value
           }), this.requestUpdate();
         }}
                             />
 
-                            ${this._renderQuestionTypeSpecificFields(s)}
+                            ${this._renderQuestionTypeSpecificFields(r)}
 
                             <label class="question-required-label">
                               <input
                                 type="checkbox"
-                                .checked=${s.required || !1}
-                                @change=${(r) => {
-          const o = r.target;
-          this._updateQuestion(s.id, {
-            required: o.checked
+                                .checked=${r.required || !1}
+                                @change=${(o) => {
+          const a = o.target;
+          this._updateQuestion(r.id, {
+            required: a.checked
           });
         }}
                               />
@@ -4069,31 +4122,31 @@ Use **bold** and *italic* text.`;
                             </label>
                           </div>
                         `;
-      } else if (n) {
-        const s = e;
-        return l`
+      } else if (s) {
+        const r = t;
+        return d`
                           <div class="question-item">
                             <div class="question-header">
                               <h3 class="question-title">
-                                ${this._getContentTypeDisplayName(s.type)}
+                                ${this._getContentTypeDisplayName(r.type)}
                               </h3>
                               <div class="question-header-controls">
                                 <select
                                   class="question-type-select"
-                                  .value=${e.type || "text"}
+                                  .value=${t.type || "text"}
                                   style="color: #000 !important;"
-                                  @change=${(r) => {
-          const a = r.target.value;
+                                  @change=${(o) => {
+          const l = o.target.value;
           if (![
             "text",
             "html",
             "divider",
             "markdown"
-          ].includes(a)) {
-            this._addQuestion(a), this._deleteQuestion(e.id);
+          ].includes(l)) {
+            this._addQuestion(l), this._deleteQuestion(t.id);
             return;
           }
-          this._addQuestion(a), this._deleteQuestion(e.id);
+          this._addQuestion(l), this._deleteQuestion(t.id);
         }}
                                 >
                                   <optgroup label="Questions">
@@ -4116,7 +4169,7 @@ Use **bold** and *italic* text.`;
                                 </select>
                                 <button
                                   class="delete-question-button"
-                                  @click=${() => this._deleteQuestion(e.id)}
+                                  @click=${() => this._deleteQuestion(t.id)}
                                   title="Delete content"
                                 >
                                   ✕
@@ -4124,20 +4177,20 @@ Use **bold** and *italic* text.`;
                               </div>
                             </div>
                             <div class="question-content">
-                              ${this._renderContentTypeSpecificFields(s)}
+                              ${this._renderContentTypeSpecificFields(r)}
                             </div>
                           </div>
                         `;
       } else {
-        const s = e;
-        return l`
+        const r = t;
+        return d`
                           <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(s.id)}
+                                  @click=${() => this._deleteQuestion(r.id)}
                                   title="Delete element"
                                 >
                                   ✕
@@ -4149,7 +4202,7 @@ Use **bold** and *italic* text.`;
       }
     })}
                   </div>
-                ` : l`
+                ` : d`
                   <div class="empty-state">
                     <h3>Add questions</h3>
                     <p>Use the add button to start building your workflow</p>
@@ -4195,7 +4248,7 @@ C([
 ], w.prototype, "onCancel", 2);
 C([
   D({ attribute: !1 })
-], w.prototype, "onSave", 2);
+], w.prototype, "workflow", 2);
 w = C([
   Le("builder-widget")
 ], w);
@@ -4214,11 +4267,11 @@ class mt {
       if (this.isQuestionElement(o)) {
         const a = o;
         if (a.required) {
-          const d = this.validateQuestion(
+          const l = this.validateQuestion(
             a,
             t[a.id]
           );
-          d && (s = !1, r[a.id] = d.message);
+          l && (s = !1, r[a.id] = l.message);
         }
       }
     return { isValid: s, errors: r };
@@ -4291,7 +4344,7 @@ class bt {
   }
   saveFormData(e, t, n, s, r, o) {
     var c, u, h;
-    const a = this.getStorageKey(e), d = o ? {
+    const a = this.getStorageKey(e), l = o ? {
       ...o,
       currentStepId: (u = (c = o.steps) == null ? void 0 : c[n]) == null ? void 0 : u.id,
       completedSteps: Array.from(r),
@@ -4306,7 +4359,7 @@ class bt {
       stepIndex: n,
       savedSignatures: Array.from(s),
       completedSteps: Array.from(r),
-      instance: d
+      instance: l
     };
     try {
       localStorage.setItem(a, JSON.stringify(p));
@@ -4370,9 +4423,9 @@ class be {
     return new be(e[1], n, s, e[2], t.start, t.end);
   }
   static calculateControlPoints(e, t, n) {
-    const s = e.x - t.x, r = e.y - t.y, o = t.x - n.x, a = t.y - n.y, d = { x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 }, p = { x: (t.x + n.x) / 2, y: (t.y + n.y) / 2 }, c = Math.sqrt(s * s + r * r), u = Math.sqrt(o * o + a * a), h = d.x - p.x, g = d.y - p.y, b = c + u == 0 ? 0 : u / (c + u), k = { x: p.x + h * b, y: p.y + g * b }, G = t.x - k.x, Y = t.y - k.y;
+    const s = e.x - t.x, r = e.y - t.y, o = t.x - n.x, a = t.y - n.y, l = { x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 }, p = { x: (t.x + n.x) / 2, y: (t.y + n.y) / 2 }, c = Math.sqrt(s * s + r * r), u = Math.sqrt(o * o + a * a), h = l.x - p.x, g = l.y - p.y, b = c + u == 0 ? 0 : u / (c + u), k = { x: p.x + h * b, y: p.y + g * b }, G = t.x - k.x, Y = t.y - k.y;
     return {
-      c1: new X(d.x + G, d.y + Y),
+      c1: new X(l.x + G, l.y + Y),
       c2: new X(p.x + G, p.y + Y)
     };
   }
@@ -4382,12 +4435,12 @@ class be {
   length() {
     let t = 0, n, s;
     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), d = this.point(o, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
+      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 - n, c = d - s;
+        const p = a - n, c = l - s;
         t += Math.sqrt(p * p + c * c);
       }
-      n = a, s = d;
+      n = a, s = l;
     }
     return t;
   }
@@ -4434,9 +4487,9 @@ class Z extends vt {
   }
   fromDataURL(e, t = {}) {
     return new Promise((n, s) => {
-      const r = 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;
+      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, d), n();
+        this._ctx.drawImage(r, p, c, a, l), n();
       }, r.onerror = (u) => {
         s(u);
       }, r.crossOrigin = "anonymous", r.src = e, this._isEmpty = !1;
@@ -4597,8 +4650,8 @@ class Z extends vt {
     this.dispatchEvent(new CustomEvent("beforeUpdateStroke", { detail: e }));
     const t = this._createPoint(e.x, e.y, e.pressure), n = this._data[this._data.length - 1], s = n.points, r = s.length > 0 && s[s.length - 1], o = r ? t.distanceTo(r) <= this.minDistance : !1, a = this._getPointGroupOptions(n);
     if (!r || !(r && o)) {
-      const d = this._addPoint(t, a);
-      r ? d && this._drawCurve(d, a) : this._drawDot(t, a), s.push({
+      const l = this._addPoint(t, a);
+      r ? l && this._drawCurve(l, a) : this._drawDot(t, a), s.push({
         time: t.time,
         x: t.x,
         y: t.y,
@@ -4659,11 +4712,11 @@ class Z extends vt {
     const n = this._ctx, s = e.endWidth - e.startWidth, r = Math.ceil(e.length()) * 2;
     n.beginPath(), n.fillStyle = t.penColor;
     for (let o = 0; o < r; o += 1) {
-      const a = o / r, d = a * a, p = d * a, c = 1 - a, u = c * c, h = u * c;
+      const a = o / r, l = a * a, p = l * a, c = 1 - a, u = c * c, h = u * c;
       let g = h * e.startPoint.x;
-      g += 3 * u * a * e.control1.x, g += 3 * c * d * e.control2.x, g += p * e.endPoint.x;
+      g += 3 * u * a * e.control1.x, g += 3 * c * l * e.control2.x, g += p * e.endPoint.x;
       let b = h * e.startPoint.y;
-      b += 3 * u * a * e.control1.y, b += 3 * c * d * e.control2.y, b += p * e.endPoint.y;
+      b += 3 * u * a * e.control1.y, b += 3 * c * l * e.control2.y, b += p * e.endPoint.y;
       const k = Math.min(e.startWidth + p * s, t.maxWidth);
       this._drawCurveSegment(g, b, k);
     }
@@ -4678,7 +4731,7 @@ class Z extends vt {
       const { points: r } = s, o = this._getPointGroupOptions(s);
       if (r.length > 1)
         for (let a = 0; a < r.length; a += 1) {
-          const d = r[a], p = new X(d.x, d.y, d.pressure, d.time);
+          const l = r[a], p = new X(l.x, l.y, l.pressure, l.time);
           a === 0 && this._reset(o);
           const c = this._addPoint(p, o);
           c && t(c, o);
@@ -4688,21 +4741,21 @@ class Z extends vt {
     }
   }
   toSVG({ includeBackgroundColor: e = !1 } = {}) {
-    const t = this._data, n = Math.max(window.devicePixelRatio || 1, 1), s = 0, r = 0, o = this.canvas.width / n, a = this.canvas.height / n, 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", `${s} ${r} ${o} ${a}`), d.setAttribute("width", o.toString()), d.setAttribute("height", a.toString()), e && this.backgroundColor) {
+    const t = this._data, n = Math.max(window.devicePixelRatio || 1, 1), s = 0, r = 0, o = this.canvas.width / n, a = this.canvas.height / n, 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", `${s} ${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), d.appendChild(p);
+      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"), d.appendChild(u);
+        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: g }) => {
       const b = document.createElement("circle"), k = u > 0 ? u : (h + g) / 2;
-      b.setAttribute("r", k.toString()), b.setAttribute("cx", p.x.toString()), b.setAttribute("cy", p.y.toString()), b.setAttribute("fill", c), d.appendChild(b);
-    }), d.outerHTML;
+      b.setAttribute("r", k.toString()), b.setAttribute("cx", p.x.toString()), b.setAttribute("cy", p.y.toString()), b.setAttribute("fill", c), l.appendChild(b);
+    }), l.outerHTML;
   }
 }
 class _t {
@@ -4915,9 +4968,9 @@ class yt {
         newStepIndex: t,
         reason: "Invalid step index"
       };
-    const d = a[e];
-    if (this.isStepAssignedToUser(d)) {
-      const p = s.has(d.id), c = this.isStepWithinAllowedRange(
+    const l = a[e];
+    if (this.isStepAssignedToUser(l)) {
+      const p = s.has(l.id), c = this.isStepWithinAllowedRange(
         e,
         n,
         s
@@ -4938,16 +4991,16 @@ class yt {
   }
   isStepWithinAllowedRange(e, t, n) {
     if (!(t != null && t.steps)) return !1;
-    const r = this.getAssignedSteps(t).map((d) => t.steps.findIndex((p) => p.id === d.id)).sort((d, p) => d - p);
+    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 d of r) {
-      const p = t.steps[d];
-      n.has(p.id) && (o = d);
+    for (const l of r) {
+      const p = t.steps[l];
+      n.has(p.id) && (o = l);
     }
     let a = -1;
-    for (const d of r)
-      if (d > o) {
-        a = d;
+    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]);
@@ -5138,8 +5191,8 @@ const te = class te {
     this.formStateManager.clearValidationError(e);
     const a = this.createFileInfo(r);
     this.formStateManager.setFormField(e, a);
-    const d = this.hasFileChanged(e, a, n.savedInstance);
-    d && n.mode !== "preview" ? this.executeFileUploadCallback(e, r, a, n) : this.logSkippedCallback(e, n.mode, d), (h = n.onRequestUpdate) == null || h.call(n), n.mode !== "admin" && ((g = n.onFormDataSave) == null || g.call(n));
+    const l = this.hasFileChanged(e, a, n.savedInstance);
+    l && n.mode !== "preview" ? this.executeFileUploadCallback(e, r, a, n) : this.logSkippedCallback(e, n.mode, l), (h = n.onRequestUpdate) == null || h.call(n), n.mode !== "admin" && ((g = n.onFormDataSave) == null || g.call(n));
   }
   /**
    * Clears file data for a question
@@ -5260,9 +5313,9 @@ class y {
     }[n] || `${n.toUpperCase()} File` : "Unknown";
   }
   static renderTextArea(e, t, n) {
-    return n.mode === "print" ? l`<div class="print-response-value textarea-response">
-        ${t || l`<span class="print-no-response">No response</span>`}
-      </div>` : l`<textarea
+    return n.mode === "print" ? d`<div class="print-response-value textarea-response">
+        ${t || d`<span class="print-no-response">No response</span>`}
+      </div>` : d`<textarea
       id=${e.id}
       .value=${t}
       ?required=${e.required}
@@ -5273,9 +5326,9 @@ class y {
   }
   static renderSelect(e, t, n) {
     var s;
-    return n.mode === "print" ? l`<div class="print-response-value select-response">
-        ${t || l`<span class="print-no-response">No selection made</span>`}
-      </div>` : l`<select
+    return n.mode === "print" ? d`<div class="print-response-value select-response">
+        ${t || d`<span class="print-no-response">No selection made</span>`}
+      </div>` : d`<select
       id=${e.id}
       .value=${t}
       ?required=${e.required}
@@ -5284,17 +5337,17 @@ class y {
       @change=${(r) => n.handlers.handleInputChange(e.id, r)}
     >
       <option value="">Choose</option>
-      ${(s = e.options) == null ? void 0 : s.map((r) => l`<option value=${r}>${r}</option>`)}
+      ${(s = e.options) == null ? void 0 : s.map((r) => d`<option value=${r}>${r}</option>`)}
     </select>`;
   }
   static renderRadio(e, t, n) {
     var o;
     const s = this._isInputDisabled(n), r = n.mode === "print";
-    return r ? 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 ${r ? "print-mode" : ""}">
+    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) => l`
+      (a) => d`
           <label class="radio-option">
             <input
               type="radio"
@@ -5302,7 +5355,7 @@ class y {
               value=${a}
               .checked=${t === a}
               ?disabled=${s}
-              @change=${r ? null : (d) => n.handlers.handleInputChange(e.id, d)}
+              @change=${r ? null : (l) => n.handlers.handleInputChange(e.id, l)}
             />
             <span class="radio-label">${a}</span>
           </label>
@@ -5316,13 +5369,13 @@ class y {
     if (e.options && e.options.length > 0) {
       if (r) {
         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>`}
+        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 l`<div class="checkbox-group ${r ? "print-mode" : ""}">
+      return d`<div class="checkbox-group ${r ? "print-mode" : ""}">
         ${(o = e.options) == null ? void 0 : o.map(
-        (a) => l`
+        (a) => d`
             <label class="checkbox-option">
               <input
                 type="checkbox"
@@ -5330,7 +5383,7 @@ class y {
                 value=${a}
                 .checked=${Array.isArray(t) ? t.includes(a) : !1}
                 ?disabled=${s}
-                @change=${r ? null : (d) => n.handlers.handleCheckboxGroupChange(e.id, a, d)}
+                @change=${r ? null : (l) => n.handlers.handleCheckboxGroupChange(e.id, a, l)}
               />
               <span class="checkbox-label">${a}</span>
             </label>
@@ -5338,9 +5391,9 @@ class y {
       )}
       </div>`;
     } else
-      return r ? l`<div class="print-response-value checkbox-response">
+      return r ? d`<div class="print-response-value checkbox-response">
           ${t ? "Yes" : "No"}
-        </div>` : l`<label class="checkbox-single ${r ? "print-mode" : ""}">
+        </div>` : d`<label class="checkbox-single ${r ? "print-mode" : ""}">
         <input
           type="checkbox"
           id=${e.id}
@@ -5354,15 +5407,15 @@ class y {
   static renderSignature(e, t, n) {
     const s = n.formData[e.id], r = !!n.formData[e.id], o = n.savedSignatures.has(e.id), a = n.replacingSignatures.has(e.id);
     if (n.mode === "print")
-      return s && typeof s == "string" ? l`
+      return s && typeof s == "string" ? d`
           <div class="print-response-value signature-response">
             <img
               src="${s}"
               alt="Digital Signature"
               class="signature-image"
-              @error=${(d) => {
+              @error=${(l) => {
         var u;
-        const p = d.target;
+        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");
@@ -5372,19 +5425,19 @@ class y {
               <span class="signature-error">Unable to display signature</span>
             </div>
           </div>
-        ` : l`<div class="print-response-value signature-response">
+        ` : d`<div class="print-response-value signature-response">
           <span class="print-no-response">No signature provided</span>
         </div>`;
     if (n.mode === "view-only")
-      return s && typeof s == "string" ? l`
+      return s && typeof s == "string" ? d`
           <div class="signature-view-only">
             <img
               src="${s}"
               alt="Digital Signature"
               class="signature-image"
-              @error=${(d) => {
+              @error=${(l) => {
         var u;
-        const p = d.target;
+        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");
@@ -5394,17 +5447,17 @@ class y {
               <span class="signature-error">Unable to display signature</span>
             </div>
           </div>
-        ` : l`
+        ` : d`
           <div class="signature-view-only">
             <span class="no-signature">No signature captured</span>
           </div>
         `;
     if (n.mode === "admin" && s && typeof s == "string" && !a) {
-      const d = s.trim().startsWith("<svg");
-      return l`
+      const l = s.trim().startsWith("<svg");
+      return d`
         <div class="signature-admin-display">
           <div class="signature-existing">
-            ${d ? l` <div class="signature-svg-container" .innerHTML=${s}></div> ` : l`
+            ${l ? d` <div class="signature-svg-container" .innerHTML=${s}></div> ` : d`
                   <img
                     src="${s}"
                     alt="Digital Signature"
@@ -5434,7 +5487,7 @@ class y {
         </div>
       `;
     }
-    return l`
+    return d`
       <div class="signature-container ${this._isInputDisabled(n) ? "disabled" : ""}">
         <canvas id="signature-${e.id}" class="signature-canvas"></canvas>
         <div class="signature-controls">
@@ -5446,7 +5499,7 @@ class y {
           >
             Clear
           </button>
-          ${r && !o ? l`
+          ${r && !o ? d`
                 <button
                   type="button"
                   class="signature-save-btn"
@@ -5456,8 +5509,8 @@ class y {
                   Save
                 </button>
               ` : ""}
-          ${o ? l` <span class="signature-saved">✓ Saved</span> ` : ""}
-          ${n.mode === "admin" && a ? l`
+          ${o ? d` <span class="signature-saved">✓ Saved</span> ` : ""}
+          ${n.mode === "admin" && a ? d`
                 <button
                   type="button"
                   class="signature-cancel-btn"
@@ -5477,25 +5530,25 @@ class y {
         const r = typeof s == "string", o = typeof s == "object" && s.name;
         if (n.mode === "print") {
           if (o)
-            return l`
+            return d`
               <div class="print-response-value file-response">
                 📎 ${s.name}
-                ${s.size ? l` <span class="file-size"
+                ${s.size ? d` <span class="file-size"
                       >(${y._formatFileSize(s.size)})</span
                     >` : ""}
               </div>
             `;
           if (r) {
             const a = y._extractFilenameFromUrl(s);
-            return l` <div class="print-response-value file-response">📎 ${a}</div> `;
+            return d` <div class="print-response-value file-response">📎 ${a}</div> `;
           } else
-            return l` <div class="print-response-value file-response">📎 ${s}</div> `;
+            return d` <div class="print-response-value file-response">📎 ${s}</div> `;
         } else {
-          const a = r ? s : "#", d = o ? s.name : r ? y._extractFilenameFromUrl(s) : "View File";
-          return l`
+          const a = r ? s : "#", l = o ? s.name : r ? y._extractFilenameFromUrl(s) : "View File";
+          return d`
             <div class="file-upload-view-only">
-              <a href="${a}" target="_blank" class="file-link"> 📎 ${d} </a>
-              ${o && s.size ? l`
+              <a href="${a}" target="_blank" class="file-link"> 📎 ${l} </a>
+              ${o && s.size ? d`
                     <span class="file-size-info"
                       >(${y._formatFileSize(s.size)})</span
                     >
@@ -5504,16 +5557,16 @@ class y {
           `;
         }
       } else
-        return n.mode === "print" ? l`
+        return n.mode === "print" ? d`
             <div class="print-response-value file-response">
               <span class="print-no-response">No file uploaded</span>
             </div>
-          ` : l`
+          ` : d`
             <div class="file-upload-view-only">
               <span class="no-file">No file uploaded</span>
             </div>
           `;
-    return l`
+    return d`
       <div class="file-upload-container">
         <input
           type="file"
@@ -5522,7 +5575,7 @@ class y {
           ?disabled=${this._isInputDisabled(n)}
           @change=${(r) => n.handlers.handleFileUpload(e.id, r)}
         />
-        ${s ? l`
+        ${s ? d`
               <div class="file-preview">
                 <span class="file-name">${s.name || "File selected"}</span>
                 <button
@@ -5543,12 +5596,12 @@ class y {
   static renderDefaultInput(e, t, n) {
     if (n.mode === "print") {
       const r = e.type === "date" && t ? new Date(t).toLocaleDateString() : t;
-      return l`<div class="print-response-value input-response">
-        ${r || l`<span class="print-no-response">No response</span>`}
+      return d`<div class="print-response-value input-response">
+        ${r || d`<span class="print-no-response">No response</span>`}
       </div>`;
     }
     const s = e.type === "number" ? "number" : e.type === "date" ? "date" : "text";
-    return l`<input
+    return d`<input
       type=${s}
       id=${e.id}
       .value=${t}
@@ -5577,22 +5630,22 @@ class y {
           return y.renderDefaultInput(e, n, t);
       }
     }, o = e.type === "checkbox" && (!e.options || e.options.length === 0);
-    return t.mode === "print" ? l`
+    return t.mode === "print" ? d`
         <div class="question-print">
-          ${o ? "" : l` <div class="print-question-title">${e.label}:</div> `}
+          ${o ? "" : d` <div class="print-question-title">${e.label}:</div> `}
           ${r()}
           <hr class="print-question-separator" />
         </div>
-      ` : l`
+      ` : d`
       <div class="question ${s ? "error" : ""}">
-        ${o ? "" : l`
+        ${o ? "" : d`
               <div class="runner-question-title">
-                ${e.label}${e.required ? l`<span class="runner-question-required">*</span>` : ""}
+                ${e.label}${e.required ? d`<span class="runner-question-required">*</span>` : ""}
               </div>
               <hr class="runner-question-divider" />
             `}
         ${r()}
-        ${s ? l`<div class="error-message">${s}</div>` : ""}
+        ${s ? d`<div class="error-message">${s}</div>` : ""}
       </div>
     `;
   }
@@ -5630,7 +5683,7 @@ class ue extends $t {
   }
   render(e) {
     if (e === v || e == null) return this._t = void 0, this.it = e;
-    if (e === U) return e;
+    if (e === I) 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;
@@ -5645,14 +5698,14 @@ class $ {
     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`
+    return d`
       <div class="content-element text-content">
         <p>${e.content}</p>
       </div>
     `;
   }
   static renderMarkdownElement(e) {
-    return l`
+    return d`
       <div class="content-element markdown-content">
         <div class="markdown-text">
           ${Ae($.renderMarkdown(e.content))}
@@ -5661,22 +5714,22 @@ class $ {
     `;
   }
   static renderDivider(e) {
-    return l`
+    return d`
       <div class="content-element divider-content">
         <hr class="content-divider" />
-        ${e.caption ? l`<div class="divider-caption">${e.caption}</div>` : ""}
+        ${e.caption ? d`<div class="divider-caption">${e.caption}</div>` : ""}
       </div>
     `;
   }
   static renderHtml(e) {
-    return l`
+    return d`
       <div class="content-element html-content">
         <div class="html-content-wrapper">${Ae(e.content)}</div>
       </div>
     `;
   }
   static renderImage(e) {
-    return l`
+    return d`
       <div class="content-element image-content">
         <div class="image-placeholder">
           <p>📷 Image: ${e.caption || e.alt || "Image content"}</p>
@@ -5686,7 +5739,7 @@ class $ {
     `;
   }
   static renderVideo(e) {
-    return l`
+    return d`
       <div class="content-element video-content">
         <div class="video-placeholder">
           <p>🎥 Video: ${e.caption || "Video content"}</p>
@@ -5696,7 +5749,7 @@ class $ {
     `;
   }
   static renderFile(e) {
-    return l`
+    return d`
       <div class="content-element file-content">
         <div class="file-placeholder">
           <p>📄 File: ${e.caption || "File content"}</p>
@@ -5706,7 +5759,7 @@ class $ {
     `;
   }
   static renderUnknown(e) {
-    return l`
+    return d`
       <div class="content-element unknown-content">
         <p>⚠️ Unknown content type: ${e.type}</p>
       </div>
@@ -5733,10 +5786,10 @@ class $ {
           return $.renderUnknown(e);
       }
     };
-    return (t == null ? void 0 : t.mode) === "print" ? l`
+    return (t == null ? void 0 : t.mode) === "print" ? d`
         <div class="content-print">
           ${n()}
-          ${e.type !== "divider" ? l`<hr class="print-question-separator" />` : ""}
+          ${e.type !== "divider" ? d`<hr class="print-question-separator" />` : ""}
         </div>
       ` : n();
   }
@@ -5744,13 +5797,13 @@ class $ {
 class Me {
   static renderMobileStepsForStatus(e) {
     const { steps: t, disabled: n = !1 } = e;
-    return l`
+    return d`
       <div class="runner-mobile-steps">
         <nav aria-label="Workflow steps">
           <div class="runner-mobile-steps-container">
             ${t == null ? void 0 : t.map((s) => {
       const r = e.isStepAssignedToUser(s), o = e.completedSteps.has(s.id);
-      return l`
+      return d`
                 <div
                   class="runner-mobile-step-tab ${o ? "completed" : ""} ${r ? "" : "unassigned"} ${n ? "disabled" : ""}"
                   style="cursor: not-allowed; opacity: ${n ? "0.6" : r ? "1" : "0.6"};"
@@ -5768,7 +5821,7 @@ class Me {
     `;
   }
   static renderNotAssignedView() {
-    return l`
+    return d`
       <div class="runner-content not-assigned-view">
         <div class="not-assigned-container">
           <div class="not-assigned-icon">
@@ -5795,7 +5848,7 @@ class Me {
   }
   static renderUnifiedSubmissionView(e) {
     var t, n, s;
-    return l`
+    return d`
       <div class="runner-layout">
         <!-- Mobile Steps Navigation (visible only on mobile) -->
         ${this.renderMobileStepsForStatus({
@@ -5812,7 +5865,7 @@ class Me {
             <ul class="runner-steps-list">
               ${(s = (n = e.instance) == null ? void 0 : n.steps) == null ? void 0 : s.map((r) => {
       const o = e.isStepAssignedToUser(r), a = e.completedSteps.has(r.id);
-      return l`
+      return d`
                   <li
                     class="runner-step-item ${a ? "completed" : ""} ${o ? "" : "unassigned"}"
                     style="opacity: ${o ? "1" : "0.6"}; cursor: not-allowed;"
@@ -5865,22 +5918,22 @@ class R {
   }
   static renderSidebar(e) {
     const { steps: t } = e;
-    return l`
+    return d`
       <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((n, s) => {
-      const r = e.mode === "preview" || e.mode === "admin" || e.mode === "view-only" || e.mode === "print" || e.isStepAssignedToUser(n), o = s === e.currentStepIndex, a = this.isStepCompleted(n, e, r), d = (e.isSubmitted || e.userStepsSubmitted) && e.mode !== "preview" && e.mode !== "admin" && e.mode !== "view-only" && e.mode !== "print", p = e.isLoading;
-      return l`
+      const r = e.mode === "preview" || e.mode === "admin" || e.mode === "view-only" || e.mode === "print" || e.isStepAssignedToUser(n), o = s === e.currentStepIndex, a = this.isStepCompleted(n, 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`
                 <li
-                  class="runner-step-item ${o ? "active" : ""} ${a ? "completed" : ""} ${r ? "" : "unassigned"} ${d ? "disabled" : ""} ${p ? "loading-disabled" : ""}"
+                  class="runner-step-item ${o ? "active" : ""} ${a ? "completed" : ""} ${r ? "" : "unassigned"} ${l ? "disabled" : ""} ${p ? "loading-disabled" : ""}"
                   @click=${() => !p && e.goToStep(s)}
-                  style="${d ? "opacity: 0.5; cursor: not-allowed;" : ""}"
+                  style="${l ? "opacity: 0.5; cursor: not-allowed;" : ""}"
                 >
                   <span class="runner-step-title">${n.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" : d ? "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" : l ? "Submitted" : a ? "Completed" : r ? "Assigned" : "Not Assigned"}
                   </span>
                 </li>
               `;
@@ -5892,22 +5945,22 @@ class R {
   }
   static renderMobileSteps(e) {
     const { steps: t } = e;
-    return l`
+    return d`
       <div class="runner-mobile-steps">
         <nav aria-label="Workflow steps">
           <div class="runner-mobile-steps-container">
             ${t == null ? void 0 : t.map((n, s) => {
-      const r = e.mode === "preview" || e.mode === "admin" || e.mode === "view-only" || e.mode === "print" || e.isStepAssignedToUser(n), o = s === e.currentStepIndex, a = this.isStepCompleted(n, e, r), d = (e.isSubmitted || e.userStepsSubmitted) && e.mode !== "preview" && e.mode !== "admin" && e.mode !== "view-only" && e.mode !== "print", p = e.isLoading;
-      return l`
+      const r = e.mode === "preview" || e.mode === "admin" || e.mode === "view-only" || e.mode === "print" || e.isStepAssignedToUser(n), o = s === e.currentStepIndex, a = this.isStepCompleted(n, 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`
                 <button
-                  class="runner-mobile-step-tab ${o ? "active" : ""} ${a ? "completed" : ""} ${r ? "" : "unassigned"} ${d ? "disabled" : ""} ${p ? "loading-disabled" : ""}"
+                  class="runner-mobile-step-tab ${o ? "active" : ""} ${a ? "completed" : ""} ${r ? "" : "unassigned"} ${l ? "disabled" : ""} ${p ? "loading-disabled" : ""}"
                   @click=${() => !p && e.goToStep(s)}
-                  ?disabled=${d || p}
+                  ?disabled=${l || p}
                   aria-current=${o ? "step" : "false"}
                 >
                   <span class="runner-mobile-step-title">${n.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" : d ? "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" : l ? "Submitted" : a ? "Completed" : r ? "Assigned" : "Not Assigned"}
                   </span>
                 </button>
               `;
@@ -5919,24 +5972,24 @@ class R {
   }
   static renderStepHeader(e) {
     const { step: t, mode: n } = e;
-    return n === "print" ? l`
+    return n === "print" ? d`
         <div class="step-print-header">
           <div class="print-step-title">${t.title}</div>
-          ${t.description ? l`<div class="print-step-description">${t.description}</div>` : ""}
+          ${t.description ? d`<div class="print-step-description">${t.description}</div>` : ""}
           <hr class="print-question-separator" />
         </div>
-      ` : l`
+      ` : d`
       <section class="runner-step-header">
         <h2 class="runner-step-title">${t.title}</h2>
         <hr class="runner-step-divider" />
-        ${t.description ? l`<p class="runner-step-desc">${t.description}</p>` : ""}
+        ${t.description ? d`<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 ? l`` : l`
+    return e.mode === "preview" || e.mode === "view-only" || e.mode === "print" || !e.isCurrentStepAssigned ? d`` : d`
       <div class="runner-form-actions">
         <button
           class="next-button ${e.mode === "admin" && e.justSaved ? "saved-state" : ""}"
@@ -5949,37 +6002,37 @@ class Dt {
     `;
   }
 }
-class le {
+class de {
   /**
    * Handles change events for basic text inputs, textareas, selects, numbers, dates
    */
   static handleInputChange(e, t, n, s, r, o) {
     const a = t.target;
-    let d;
-    a.type === "radio" ? d = a.value : a.type === "checkbox" ? d = a.checked : d = a.value;
+    let l;
+    a.type === "radio" ? l = a.value : a.type === "checkbox" ? l = a.checked : l = a.value;
     const p = {
       ...n,
-      [e]: d
+      [e]: l
     };
-    s(p), o !== "preview" && r(e, d);
+    s(p), o !== "preview" && r(e, l);
   }
   /**
    * Handles change events for single checkboxes
    */
   static handleCheckboxChange(e, t, n, s, r, o) {
-    const d = t.target.checked, p = {
+    const l = t.target.checked, p = {
       ...n,
-      [e]: d
+      [e]: l
     };
-    s(p), o !== "preview" && r(e, d);
+    s(p), o !== "preview" && r(e, l);
   }
   /**
    * Handles change events for checkbox groups (multiple checkboxes with same name)
    */
   static handleCheckboxGroupChange(e, t, n, s, r, o, a) {
-    const d = n.target, p = s[e];
+    const l = n.target, p = s[e];
     let c = Array.isArray(p) ? [...p] : [];
-    d.checked ? c.includes(t) || c.push(t) : c = c.filter((h) => h !== t);
+    l.checked ? c.includes(t) || c.push(t) : c = c.filter((h) => h !== t);
     const u = {
       ...s,
       [e]: c
@@ -6148,7 +6201,7 @@ let m = class extends P {
     return this.formStateManager.setValidationErrors(e.errors), this._validationErrors = this.formStateManager.getValidationErrors(), e.isValid;
   }
   _handleInputChange(i, e) {
-    le.handleInputChange(
+    de.handleInputChange(
       i,
       e,
       this._formData,
@@ -6158,7 +6211,7 @@ let m = class extends P {
     ), this._handleFormDataUpdate(i);
   }
   _handleCheckboxChange(i, e) {
-    le.handleCheckboxChange(
+    de.handleCheckboxChange(
       i,
       e,
       this._formData,
@@ -6168,7 +6221,7 @@ let m = class extends P {
     ), this._handleFormDataUpdate(i);
   }
   _handleCheckboxGroupChange(i, e, t) {
-    le.handleCheckboxGroupChange(
+    de.handleCheckboxGroupChange(
       i,
       e,
       t,
@@ -6258,16 +6311,16 @@ let m = class extends P {
     return m.CONTENT_ELEMENT_TYPES.includes(i.type);
   }
   _renderStepElement(i) {
-    return this.mode === "print" ? this._isQuestionElement(i) ? this._renderQuestion(i) : this._isContentElement(i) ? this._renderContentElement(i) : l`<div class="unknown-element">
+    return this.mode === "print" ? this._isQuestionElement(i) ? this._renderQuestion(i) : this._isContentElement(i) ? this._renderContentElement(i) : d`<div class="unknown-element">
         <p>⚠️ Unknown element type: ${i.type}</p>
-      </div>` : this._isQuestionElement(i) ? l`<div class="runner-card">${this._renderQuestion(i)}</div>` : this._isContentElement(i) ? l`<div class="runner-card">${this._renderContentElement(i)}</div>` : l`<div class="runner-card">
+      </div>` : this._isQuestionElement(i) ? d`<div class="runner-card">${this._renderQuestion(i)}</div>` : this._isContentElement(i) ? d`<div class="runner-card">${this._renderContentElement(i)}</div>` : d`<div class="runner-card">
       <div class="unknown-element">
         <p>⚠️ Unknown element type: ${i.type}</p>
       </div>
     </div>`;
   }
   _renderStepWithElements(i) {
-    return l`
+    return d`
       <div class="print-step">
         <!-- Step Header -->
         ${R.renderStepHeader({ step: i, mode: "print" })}
@@ -6279,9 +6332,9 @@ let m = class extends P {
   }
   _renderAllStepsForPrint() {
     var i;
-    return !((i = this.instance) != null && i.steps) || this.instance.steps.length === 0 ? l`<div class="runner-content">
+    return !((i = this.instance) != null && i.steps) || this.instance.steps.length === 0 ? d`<div class="runner-content">
         No workflow instance loaded or instance has no steps.
-      </div>` : l`
+      </div>` : d`
       <div class="print-layout">
         <!-- Instance Title at top -->
         <div class="print-instance-title">${this.instance.name || "Untitled Form"}</div>
@@ -6300,8 +6353,8 @@ let m = class extends P {
     if (e !== -1) {
       const o = (t = this._currentStep) == null ? void 0 : t.id;
       if (this._currentStepIndex = e, o && ((n = this.instance) != null && n.steps)) {
-        const d = this.instance.steps.find((p) => p.id === o);
-        d && (d.status = "completed");
+        const l = this.instance.steps.find((p) => p.id === o);
+        l && (l.status = "completed");
       }
       const a = (r = (s = this.instance) == null ? void 0 : s.steps) == null ? void 0 : r[this._currentStepIndex];
       a && (a.status = "active"), this._updateInstanceData(o, "step_navigation", {
@@ -6400,9 +6453,9 @@ let m = class extends P {
     });
   }
   _updateInstanceData(i, e, t) {
-    var d, p, c, u, h, g, b;
+    var l, p, c, u, h, g, b;
     i && this._internalCompletedSteps.add(i);
-    let n = (p = (d = this.instance) == null ? void 0 : d.steps) == null ? void 0 : p.find((k) => k.id === i);
+    let n = (p = (l = this.instance) == null ? void 0 : l.steps) == null ? void 0 : p.find((k) => k.id === i);
     if (!n && this._internalCompletedSteps.size > 0) {
       const k = Array.from(this._internalCompletedSteps), G = k[k.length - 1];
       n = (u = (c = this.instance) == null ? void 0 : c.steps) == null ? void 0 : u.find((Y) => Y.id === G);
@@ -6543,7 +6596,7 @@ let m = class extends P {
         if (s.type === "text_input" || s.type === "textarea" || s.type === "select" || s.type === "number" || s.type === "radio" || s.type === "checkbox" || s.type === "date" || s.type === "file_upload" || s.type === "signature") {
           const r = s, o = this._formData[r.id];
           if (o !== void 0 && n.responses) {
-            let a = n.responses.find((d) => d.elementId === r.id);
+            let a = n.responses.find((l) => l.elementId === r.id);
             a ? (a.value = o, a.answeredAt = /* @__PURE__ */ new Date()) : (a = {
               elementId: r.id,
               value: o,
@@ -6631,7 +6684,7 @@ let m = class extends P {
     if (this.mode === "print")
       return this._renderAllStepsForPrint();
     const i = this.mode === "preview" ? (e = this.workflow) == null ? void 0 : e.steps : (t = this.instance) == null ? void 0 : t.steps;
-    return !i || i.length === 0 ? l`<div class="runner-content">
+    return !i || i.length === 0 ? d`<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;
   }
@@ -6663,7 +6716,7 @@ let m = class extends P {
   _renderCurrentStepLayout(i) {
     var s, r;
     const e = this._isLastAssignedStep(), t = this._isLastStepInWorkflow(), n = this.mode === "preview" ? (s = this.workflow) == null ? void 0 : s.steps : (r = this.instance) == null ? void 0 : r.steps;
-    return l`
+    return d`
       <!-- Mobile Steps Navigation (visible only on mobile) -->
       ${R.renderMobileSteps({
       steps: n,
@@ -6692,7 +6745,7 @@ let m = class extends P {
 
       <!-- Main Content: Step Details and Questions -->
       <main class="runner-main-content">
-        ${this.mode === "print" ? R.renderStepHeader({ step: i, mode: this.mode }) : l`<div class="runner-card">
+        ${this.mode === "print" ? R.renderStepHeader({ step: i, mode: this.mode }) : d`<div class="runner-card">
               ${R.renderStepHeader({
       step: i,
       mode: this.mode
@@ -6722,15 +6775,15 @@ let m = class extends P {
     if (i)
       return i;
     const e = this._validateCurrentStep();
-    return e ? (this._initializeStepAssets(e), this._renderCurrentStepLayout(e)) : l`<div class="runner-content">Invalid current step.</div>`;
+    return e ? (this._initializeStepAssets(e), this._renderCurrentStepLayout(e)) : d`<div class="runner-content">Invalid current step.</div>`;
   }
   render() {
-    return l`
+    return d`
       <div class="runner-layout">
         ${this._renderMainContent()}
 
         <!-- Loading overlay with white box (conditionally rendered) -->
-        ${this.isLoading ? l`
+        ${this.isLoading ? d`
               <div class="runner-loading-overlay">
                 <div class="runner-loading-box">
                   <div class="runner-loading-spinner"></div>
@@ -6848,7 +6901,7 @@ function Jt(i, e = {}) {
     <hr class="print-question-separator" />
     
     ${r ? Vt(i, o) : ""}
-    ${i.steps.map((d) => At(d)).join(`
+    ${i.steps.map((l) => At(l)).join(`
 `)}
   </div>
 </body>
@@ -6891,9 +6944,9 @@ function Tt(i, e) {
     case "text_input":
     case "number":
     case "date":
-      return r + Ut(i, n) + o;
-    case "textarea":
       return r + It(i, n) + o;
+    case "textarea":
+      return r + Ut(i, n) + o;
     case "select":
       return r + Pt(i, n) + o;
     case "radio":
@@ -7008,7 +7061,7 @@ function zt(i) {
       `;
   }
 }
-function Ut(i, e) {
+function It(i, e) {
   const t = e != null ? f(String(e)) : "";
   return `
     <div class="print-response-value input-response">
@@ -7016,7 +7069,7 @@ function Ut(i, e) {
     </div>
   `;
 }
-function It(i, e) {
+function Ut(i, e) {
   return `
     <div class="print-response-value textarea-response">
       ${(e != null ? f(String(e)) : "") || '<span class="print-no-response">No response</span>'}
@@ -7678,7 +7731,7 @@ function Xt(i, e = {}) {
     return console.error(`Error: Target element with ID '${i}' not found.`), null;
   t.innerHTML = "";
   const n = document.createElement("builder-widget");
-  return e.onWorkflowCreated && (n.onWorkflowCreated = e.onWorkflowCreated), e.onWorkflowDeleted && (n.onWorkflowDeleted = e.onWorkflowDeleted), e.onWorkflowUpdated && (n.onWorkflowUpdated = e.onWorkflowUpdated), t.appendChild(n), console.log(`Drill Builder mounted on #${i}`), n;
+  return e.workflow && (n.workflow = e.workflow), e.onWorkflowCreated && (n.onWorkflowCreated = e.onWorkflowCreated), e.onWorkflowDeleted && (n.onWorkflowDeleted = e.onWorkflowDeleted), e.onWorkflowUpdated && (n.onWorkflowUpdated = e.onWorkflowUpdated), t.appendChild(n), console.log(`Drill Builder mounted on #${i}`), n;
 }
 function Zt(i, e) {
   if (!customElements.get("runner-widget"))
@@ -7715,7 +7768,7 @@ function ei(i, e) {
       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 = s.responses.find((d) => d.elementId === r.id);
+          let a = s.responses.find((l) => l.elementId === r.id);
           a ? (a.value = o, a.answeredAt = /* @__PURE__ */ new Date()) : (a = {
             elementId: r.id,
             value: o,