drill-widgets 2.7.17 → 2.7.18

package/dist/drill-widgets.es.js

@@ -45,7 +45,7 @@ const Oe = (s) => new Fe(typeof s == "string" ? s : s + "", void 0, me), O = (s,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Ve, defineProperty: We, getOwnPropertyDescriptor: He, getOwnPropertyNames: je, getOwnPropertySymbols: Be, getPrototypeOf: Qe } = Object, M = globalThis, ye = M.trustedTypes, Ge = ye ? ye.emptyScript : "", re = M.reactiveElementPolyfillSupport, W = (s, e) => s, J = { toAttribute(s, e) {
+const { is: je, defineProperty: Ve, getOwnPropertyDescriptor: We, getOwnPropertyNames: He, getOwnPropertySymbols: Be, getPrototypeOf: Qe } = Object, T = globalThis, ye = T.trustedTypes, Ge = ye ? ye.emptyScript : "", re = T.reactiveElementPolyfillSupport, V = (s, e) => s, J = { toAttribute(s, e) {
   switch (e) {
     case Boolean:
       s = s ? Ge : null;
@@ -73,8 +73,8 @@ const { is: Ve, defineProperty: We, getOwnPropertyDescriptor: He, getOwnProperty
       }
   }
   return t;
-} }, fe = (s, e) => !Ve(s, e), we = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: fe };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), M.litPropertyMetadata ?? (M.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+} }, fe = (s, e) => !je(s, e), we = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: fe };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), T.litPropertyMetadata ?? (T.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 let P = class extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e);
@@ -85,11 +85,11 @@ let P = class extends HTMLElement {
   static createProperty(e, t = we) {
     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 && We(this.prototype, e, r);
+      r !== void 0 && Ve(this.prototype, e, r);
     }
   }
   static getPropertyDescriptor(e, t, i) {
-    const { get: r, set: n } = He(this.prototype, e) ?? { get() {
+    const { get: r, set: n } = We(this.prototype, e) ?? { get() {
       return this[t];
     }, set(o) {
       this[t] = o;
@@ -103,14 +103,14 @@ let P = class extends HTMLElement {
     return this.elementProperties.get(e) ?? we;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(W("elementProperties"))) return;
+    if (this.hasOwnProperty(V("elementProperties"))) return;
     const e = Qe(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 = [...je(t), ...Be(t)];
+    if (this.hasOwnProperty(V("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(V("properties"))) {
+      const t = this.properties, i = [...He(t), ...Be(t)];
       for (const r of i) this.createProperty(r, t[r]);
     }
     const e = this[Symbol.metadata];
@@ -276,15 +276,15 @@ let P = class extends HTMLElement {
   firstUpdated(e) {
   }
 };
-P.elementStyles = [], P.shadowRootOptions = { mode: "open" }, P[W("elementProperties")] = /* @__PURE__ */ new Map(), P[W("finalized")] = /* @__PURE__ */ new Map(), re == null || re({ ReactiveElement: P }), (M.reactiveElementVersions ?? (M.reactiveElementVersions = [])).push("2.1.0");
+P.elementStyles = [], P.shadowRootOptions = { mode: "open" }, P[V("elementProperties")] = /* @__PURE__ */ new Map(), P[V("finalized")] = /* @__PURE__ */ new Map(), re == null || re({ ReactiveElement: P }), (T.reactiveElementVersions ?? (T.reactiveElementVersions = [])).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const H = globalThis, X = H.trustedTypes, Se = X ? X.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, ze = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ie = "?" + E, Ye = `<${Ie}>`, I = document, j = () => I.createComment(""), B = (s) => s === null || typeof s != "object" && typeof s != "function", be = Array.isArray, qe = (s) => be(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", ne = `[ 	
-\f\r]`, R = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ke = /-->/g, $e = />/g, T = RegExp(`>|${ne}(?:([^\\s"'>=/]+)(${ne}*=${ne}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), De = /'/g, Ce = /"/g, Ue = /^(?:script|style|textarea|title)$/i, Ke = (s) => (e, ...t) => ({ _$litType$: s, strings: e, values: t }), l = Ke(1), U = Symbol.for("lit-noChange"), _ = Symbol.for("lit-nothing"), Ae = /* @__PURE__ */ new WeakMap(), F = I.createTreeWalker(I, 129);
+const W = globalThis, X = W.trustedTypes, Se = X ? X.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, ze = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ie = "?" + E, Ye = `<${Ie}>`, I = document, H = () => I.createComment(""), B = (s) => s === null || typeof s != "object" && typeof s != "function", be = Array.isArray, qe = (s) => be(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", ne = `[ 	
+\f\r]`, R = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ke = /-->/g, $e = />/g, M = RegExp(`>|${ne}(?:([^\\s"'>=/]+)(${ne}*=${ne}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), De = /'/g, Ce = /"/g, Ue = /^(?:script|style|textarea|title)$/i, Ke = (s) => (e, ...t) => ({ _$litType$: s, strings: e, values: t }), l = Ke(1), U = Symbol.for("lit-noChange"), w = Symbol.for("lit-nothing"), Ae = /* @__PURE__ */ new WeakMap(), F = I.createTreeWalker(I, 129);
 function Pe(s, e) {
   if (!be(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Se !== void 0 ? Se.createHTML(e) : e;
@@ -295,8 +295,8 @@ const Je = (s, e) => {
   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 === R ? c[1] === "!--" ? o = ke : c[1] !== void 0 ? o = $e : c[2] !== void 0 ? (Ue.test(c[2]) && (r = RegExp("</" + c[2], "g")), o = T) : c[3] !== void 0 && (o = T) : o === T ? c[0] === ">" ? (o = r ?? R, u = -1) : c[1] === void 0 ? u = -2 : (u = o.lastIndex - c[2].length, p = c[1], o = c[3] === void 0 ? T : c[3] === '"' ? Ce : De) : o === Ce || o === De ? o = T : o === ke || o === $e ? o = R : (o = T, r = void 0);
-    const g = o === T && s[a + 1].startsWith("/>") ? " " : "";
+    for (; h < d.length && (o.lastIndex = h, c = o.exec(d), c !== null); ) h = o.lastIndex, o === R ? c[1] === "!--" ? o = ke : c[1] !== void 0 ? o = $e : c[2] !== void 0 ? (Ue.test(c[2]) && (r = RegExp("</" + c[2], "g")), o = M) : c[3] !== void 0 && (o = M) : o === M ? c[0] === ">" ? (o = r ?? R, 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] === '"' ? Ce : De) : o === Ce || o === De ? o = M : o === ke || o === $e ? o = R : (o = M, r = void 0);
+    const g = o === M && s[a + 1].startsWith("/>") ? " " : "";
     n += o === R ? d + Ye : u >= 0 ? (i.push(p), d.slice(0, u) + ze + d.slice(u) + E + g) : d + E + (u === -2 ? a : g);
   }
   return [Pe(s, n + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
@@ -314,15 +314,15 @@ class Q {
     for (; (r = F.nextNode()) !== null && d.length < a; ) {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const u of r.getAttributeNames()) if (u.endsWith(ze)) {
-          const h = c[o++], g = r.getAttribute(u).split(E), v = /([.?@])?(.*)/.exec(h);
-          d.push({ type: 1, index: n, name: v[2], strings: g, ctor: v[1] === "." ? Ze : v[1] === "?" ? et : v[1] === "@" ? tt : se }), r.removeAttribute(u);
+          const h = c[o++], g = r.getAttribute(u).split(E), x = /([.?@])?(.*)/.exec(h);
+          d.push({ type: 1, index: n, name: x[2], strings: g, ctor: x[1] === "." ? Ze : x[1] === "?" ? et : x[1] === "@" ? tt : se }), r.removeAttribute(u);
         } else u.startsWith(E) && (d.push({ type: 6, index: n }), r.removeAttribute(u));
         if (Ue.test(r.tagName)) {
           const u = r.textContent.split(E), h = u.length - 1;
           if (h > 0) {
             r.textContent = X ? X.emptyScript : "";
-            for (let g = 0; g < h; g++) r.append(u[g], j()), F.nextNode(), d.push({ type: 2, index: ++n });
-            r.append(u[h], j());
+            for (let g = 0; g < h; g++) r.append(u[g], H()), F.nextNode(), d.push({ type: 2, index: ++n });
+            r.append(u[h], H());
           }
         }
       } else if (r.nodeType === 8) if (r.data === Ie) d.push({ type: 2, index: n });
@@ -379,7 +379,7 @@ class G {
     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;
+    this.type = 2, this._$AH = w, 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;
@@ -393,7 +393,7 @@ class G {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = L(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) : qe(e) ? this.k(e) : this._(e);
+    e = L(this, e, t), B(e) ? e === w || e == null || e === "" ? (this._$AH !== w && this._$AR(), this._$AH = w) : 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);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -402,7 +402,7 @@ class G {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== _ && B(this._$AH) ? this._$AA.nextSibling.data = e : this.T(I.createTextNode(e)), this._$AH = e;
+    this._$AH !== w && B(this._$AH) ? this._$AA.nextSibling.data = e : this.T(I.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var n;
@@ -421,7 +421,7 @@ class G {
     be(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 G(this.O(j()), this.O(j()), this, this.options)) : i = t[r], i._$AI(n), r++;
+    for (const n of e) r === t.length ? t.push(i = new G(this.O(H()), this.O(H()), 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) {
@@ -444,7 +444,7 @@ class se {
     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 = _;
+    this.type = 1, this._$AH = w, 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 = w;
   }
   _$AI(e, t = this, i, r) {
     const n = this.strings;
@@ -453,12 +453,12 @@ class se {
     else {
       const a = e;
       let d, p;
-      for (e = n[0], d = 0; d < n.length - 1; d++) p = L(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;
+      for (e = n[0], d = 0; d < n.length - 1; d++) p = L(this, a[i + d], t, d), p === U && (p = this._$AH[d]), o || (o = !B(p) || p !== this._$AH[d]), p === w ? e = w : e !== w && (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 ?? "");
+    e === w ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
 class Ze extends se {
@@ -466,7 +466,7 @@ class Ze extends se {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === _ ? void 0 : e;
+    this.element[this.name] = e === w ? void 0 : e;
   }
 }
 class et extends se {
@@ -474,7 +474,7 @@ class et extends se {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== _);
+    this.element.toggleAttribute(this.name, !!e && e !== w);
   }
 }
 class tt extends se {
@@ -482,8 +482,8 @@ class tt extends se {
     super(e, t, i, r, n), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = L(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);
+    if ((e = L(this, e, t, 0) ?? w) === U) return;
+    const i = this._$AH, r = e === w && i !== w || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, n = e !== w && (i === w || r);
     r && this.element.removeEventListener(this.name, this, i), n && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
@@ -502,14 +502,14 @@ class it {
     L(this, e);
   }
 }
-const oe = H.litHtmlPolyfillSupport;
-oe == null || oe(Q, G), (H.litHtmlVersions ?? (H.litHtmlVersions = [])).push("3.3.0");
+const oe = W.litHtmlPolyfillSupport;
+oe == null || oe(Q, G), (W.litHtmlVersions ?? (W.litHtmlVersions = [])).push("3.3.0");
 const st = (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 G(e.insertBefore(j(), n), n, void 0, t ?? {});
+    i._$litPart$ = r = new G(e.insertBefore(H(), n), n, void 0, t ?? {});
   }
   return r._$AI(s), r;
 };
@@ -544,8 +544,8 @@ let N = class extends P {
     return U;
   }
 };
-var Te;
-N._$litElement$ = !0, N.finalized = !0, (Te = z.litElementHydrateSupport) == null || Te.call(z, { LitElement: N });
+var Me;
+N._$litElement$ = !0, N.finalized = !0, (Me = z.litElementHydrateSupport) == null || Me.call(z, { LitElement: N });
 const ae = z.litElementPolyfillSupport;
 ae == null || ae({ LitElement: N });
 (z.litElementVersions ?? (z.litElementVersions = [])).push("4.2.0");
@@ -585,7 +585,7 @@ const rt = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged:
   }
   throw Error("Unsupported decorator location: " + i);
 };
-function C(s) {
+function $(s) {
   return (e, t) => typeof t == "object" ? nt(s, e, t) : ((i, r, n) => {
     const o = r.hasOwnProperty(n);
     return r.constructor.createProperty(n, i), o ? Object.getOwnPropertyDescriptor(r, n) : void 0;
@@ -597,13 +597,13 @@ function C(s) {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 function b(s) {
-  return C({ ...s, state: !0, attribute: !1 });
+  return $({ ...s, state: !0, attribute: !1 });
 }
-const S = [];
+const k = [];
 for (let s = 0; s < 256; ++s)
-  S.push((s + 256).toString(16).slice(1));
+  k.push((s + 256).toString(16).slice(1));
 function ot(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();
+  return (k[s[e + 0]] + k[s[e + 1]] + k[s[e + 2]] + k[s[e + 3]] + "-" + k[s[e + 4]] + k[s[e + 5]] + "-" + k[s[e + 6]] + k[s[e + 7]] + "-" + k[s[e + 8]] + k[s[e + 9]] + "-" + k[s[e + 10]] + k[s[e + 11]] + k[s[e + 12]] + k[s[e + 13]] + k[s[e + 14]] + k[s[e + 15]]).toLowerCase();
 }
 let de;
 const at = new Uint8Array(16);
@@ -880,7 +880,8 @@ const pt = O`
   }
 
   .form-group input,
-  .form-group textarea {
+  .form-group textarea,
+  .form-group select {
     padding: 12px;
     border: 1px solid var(--input-border);
     border-radius: var(--input-radius);
@@ -890,12 +891,22 @@ const pt = O`
     color: inherit;
   }
 
+  .form-group select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    padding-right: 40px;
+  }
+
   .form-group input:focus,
-  .form-group textarea:focus {
+  .form-group textarea:focus,
+  .form-group select:focus {
     outline: none;
     border-color: var(--input-border-focus);
     box-shadow: 0 0 0 3px var(--input-focus-ring);
-    background: var(--input-bg);
+    background-color: var(--input-bg);
   }
 
   .form-group input::placeholder,
@@ -3885,14 +3896,14 @@ const pt = O`
     }
   }
 `;
-var gt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, k = (s, e, t, i) => {
+var gt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, _ = (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 N {
+let v = class extends N {
   constructor() {
-    super(...arguments), this._templateData = {
+    super(...arguments), this.labelForDrill = "Drill", this.labelForGroup = "Group", this.subjectTypes = [], this.groups = [], this._templateData = {
       name: "",
       description: "",
       steps: []
@@ -3956,7 +3967,8 @@ let y = class extends N {
         id: this._templateData.id || A(),
         name: this._templateData.name,
         description: this._templateData.description || "",
-        steps: this._templateData.steps || []
+        steps: this._templateData.steps || [],
+        subjectType: this._templateData.subjectType
       };
       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
@@ -4117,6 +4129,12 @@ let y = class extends N {
       steps: n
     }, console.log("📝 Template updated with new step order"), this._draggedStepId = null, this._dragOverStepId = null;
   }
+  _handleSubjectTypeChange(s) {
+    this._templateData = {
+      ...this._templateData,
+      subjectType: s.target.value
+    };
+  }
   _addQuestion(s = "text_input") {
     var i, r;
     if (!this._templateData.steps || this._templateData.steps.length === 0 || !this._selectedStepId) {
@@ -4818,7 +4836,7 @@ Use **bold** and *italic* text.`;
       case "role":
         switch (s.type) {
           case "instance_role_assignee_select":
-            return s.targetId ? `Assigned to: ${s.targetId} role` : "Assigned to: Role";
+            return s.targetId ? `Assigned to: ${s.targetName} role` : "Assigned to: Role";
           default:
             return "Assigned to: Role";
         }
@@ -4831,7 +4849,7 @@ Use **bold** and *italic* text.`;
     const s = this._getSelectedStep();
     return l`
       <div class="header">
-        <div class="header-inputs">
+        <div class="header-inputs flex items-center">
           <div class="form-group">
             <label for="template-title">Title</label>
             <input
@@ -4852,6 +4870,14 @@ Use **bold** and *italic* text.`;
               @input=${this._handleDescriptionChange}
             />
           </div>
+          ${this.subjectTypes.length > 0 ? l`<div class="form-group">
+                <label for="subject-type-select">Subject Type</label>
+                <select id="subject-type-select" @change=${this._handleSubjectTypeChange}>
+                  ${this.subjectTypes.map(
+      (t) => l`<option value=${t.name}>${t.name}</option>`
+    )}
+                </select>
+              </div>` : l``}
         </div>
         <div class="header-actions">
           <button class="save-button" @click=${this._handleSave}>Save template</button>
@@ -4916,9 +4942,10 @@ Use **bold** and *italic* text.`;
                         >
                           <div class="assignment-card-radio"></div>
                           <div class="assignment-card-content">
-                            <div class="assignment-card-title">Groups</div>
+                            <div class="assignment-card-title">${this.labelForGroup}</div>
                             <div class="assignment-card-description">
-                              Assignment is based on individuals within a certain group.
+                              Assignment is based on individuals within a certain
+                              ${this.labelForGroup}.
                             </div>
                           </div>
                         </div>
@@ -4937,9 +4964,12 @@ Use **bold** and *italic* text.`;
     }}
                                 />
                                 <div class="assignment-radio-label">
-                                  <div class="assignment-radio-title">Drill subject</div>
+                                  <div class="assignment-radio-title">
+                                    ${this.labelForDrill} subject
+                                  </div>
                                   <div class="assignment-radio-description">
-                                    The step will be assigned to the subject of this drill.
+                                    The step will be assigned to the subject of this
+                                    ${this.labelForDrill}.
                                   </div>
                                 </div>
                               </label>
@@ -4956,9 +4986,12 @@ Use **bold** and *italic* text.`;
                                 />
 
                                 <div class="assignment-radio-label">
-                                  <div class="assignment-radio-title">Drill creator</div>
+                                  <div class="assignment-radio-title">
+                                    ${this.labelForDrill} creator
+                                  </div>
                                   <div class="assignment-radio-description">
-                                    The step will be assigned to the creator of this drill.
+                                    The step will be assigned to the creator of this
+                                    ${this.labelForDrill}.
                                   </div>
                                 </div>
                               </label>
@@ -4975,11 +5008,11 @@ Use **bold** and *italic* text.`;
                                 />
                                 <div class="assignment-radio-label">
                                   <div class="assignment-radio-title">
-                                    Assign at start of the Drill
+                                    Assign at start of the ${this.labelForDrill}
                                   </div>
                                   <div class="assignment-radio-description">
-                                    At the start of this Drill, the initiator will be able to choose
-                                    an individual recipient.
+                                    At the start of this ${this.labelForDrill}, the initiator will
+                                    be able to choose an individual recipient.
                                   </div>
                                 </div>
                               </label>
@@ -5038,35 +5071,28 @@ Use **bold** and *italic* text.`;
                                   />
                                 ` : ""}
                           ` : l`
-                            <div class="assignment-radio-group">
-                              <label class="assignment-radio-option">
-                                <input
-                                  type="radio"
-                                  name="assignment-type"
-                                  value="instance_role_assignee_select"
-                                  checked
-                                />
-                                <div class="assignment-radio-label">
-                                  <div class="assignment-radio-title">Select a group</div>
-                                  <div class="assignment-radio-description">
-                                    Members of the selected group will be eligible for assignment.
-                                  </div>
-                                </div>
-                              </label>
-                            </div>
+                            <label for="group-select">Select a ${this.labelForGroup}</label>
 
                             <select
                               class="assignment-select"
                               .value=${this._stepAssignmentTarget}
                               @change=${(t) => {
+      var n, o;
       const i = t.target;
       this._stepAssignmentTarget = i.value;
+      const r = (n = this._templateData.steps) == null ? void 0 : n.findIndex(
+        (a) => a.id === this._editingStepId
+      );
+      r !== void 0 && r > -1 && (this._templateData.steps[r].assignment.targetName = (o = this.groups.find((a) => a.id === i.value)) == null ? void 0 : o.name, this._templateData.steps[r].assignment.targetId = i.value, this.requestUpdate());
     }}
                             >
-                              <option value="">Select group</option>
-                              <option value="manager">Manager</option>
-                              <option value="hr">HR</option>
-                              <option value="admin">Admin</option>
+                              <!-- Groups -->
+                              <option value="" disabled selected>
+                                Select a ${this.labelForGroup}
+                              </option>
+                              ${this.groups.map(
+      (t) => l` <option value=${t.id}>${t.name}</option> `
+    )}
                             </select>
                           `}
                     </div>
@@ -5480,64 +5506,76 @@ Use **bold** and *italic* text.`;
     `;
   }
 };
-y.styles = O`
+v.styles = O`
     ${pt}
     ${ct}
     ${ut}
     ${Le}
     ${ht}
   `;
-k([
+_([
+  $({ attribute: !1 })
+], v.prototype, "labelForDrill", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "labelForGroup", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "subjectTypes", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "groups", 2);
+_([
   b()
-], y.prototype, "_templateData", 2);
-k([
+], v.prototype, "_templateData", 2);
+_([
   b()
-], y.prototype, "_showStepModal", 2);
-k([
+], v.prototype, "_showStepModal", 2);
+_([
   b()
-], y.prototype, "_stepFormData", 2);
-k([
+], v.prototype, "_stepFormData", 2);
+_([
   b()
-], y.prototype, "_draggedStepId", 2);
-k([
+], v.prototype, "_draggedStepId", 2);
+_([
   b()
-], y.prototype, "_dragOverStepId", 2);
-k([
+], v.prototype, "_dragOverStepId", 2);
+_([
   b()
-], y.prototype, "_selectedStepId", 2);
-k([
+], v.prototype, "_selectedStepId", 2);
+_([
   b()
-], y.prototype, "_questions", 2);
-k([
+], v.prototype, "_questions", 2);
+_([
   b()
-], y.prototype, "_editingStepId", 2);
-k([
+], v.prototype, "_editingStepId", 2);
+_([
   b()
-], y.prototype, "_stepAssignmentCategory", 2);
-k([
+], v.prototype, "_stepAssignmentCategory", 2);
+_([
   b()
-], y.prototype, "_stepAssignmentType", 2);
-k([
+], v.prototype, "_stepAssignmentType", 2);
+_([
   b()
-], y.prototype, "_stepAssignmentTarget", 2);
-k([
+], v.prototype, "_stepAssignmentTarget", 2);
+_([
   b()
-], y.prototype, "_stepAssignmentFirstName", 2);
-k([
+], v.prototype, "_stepAssignmentFirstName", 2);
+_([
   b()
-], y.prototype, "_stepAssignmentLastName", 2);
-k([
-  C({ attribute: !1 })
-], y.prototype, "onCancel", 2);
-k([
-  C({ attribute: !1 })
-], y.prototype, "workflow", 2);
-k([
+], v.prototype, "_stepAssignmentLastName", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "onCancel", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "workflow", 2);
+_([
   b()
-], y.prototype, "_openMenuStepId", 2);
-y = k([
+], v.prototype, "_openMenuStepId", 2);
+v = _([
   Ne("builder-widget")
-], y);
+], v);
 class ft {
   constructor(e, t) {
     this.signaturePads = e, this.savedSignatures = t;
@@ -5708,7 +5746,7 @@ class ve {
     return new ve(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, g = d.y - p.y, v = c + u == 0 ? 0 : u / (c + u), w = { x: p.x + h * v, y: p.y + g * v }, Y = t.x - w.x, q = t.y - w.y;
+    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, g = d.y - p.y, x = c + u == 0 ? 0 : u / (c + u), S = { x: p.x + h * x, y: p.y + g * x }, Y = t.x - S.x, q = t.y - S.y;
     return {
       c1: new Z(d.x + Y, d.y + q),
       c2: new Z(p.x + Y, p.y + q)
@@ -6000,10 +6038,10 @@ class ee extends vt {
       const a = o / n, d = a * a, p = d * 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;
-      let v = h * e.startPoint.y;
-      v += 3 * u * a * e.control1.y, v += 3 * c * d * e.control2.y, v += p * e.endPoint.y;
-      const w = Math.min(e.startWidth + p * r, t.maxWidth);
-      this._drawCurveSegment(g, v, w);
+      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 S = Math.min(e.startWidth + p * r, t.maxWidth);
+      this._drawCurveSegment(g, x, S);
     }
     i.closePath(), i.fill();
   }
@@ -6038,8 +6076,8 @@ class ee extends vt {
         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: g }) => {
-      const v = document.createElement("circle"), w = u > 0 ? u : (h + g) / 2;
-      v.setAttribute("r", w.toString()), v.setAttribute("cx", p.x.toString()), v.setAttribute("cy", p.y.toString()), v.setAttribute("fill", c), d.appendChild(v);
+      const x = document.createElement("circle"), S = u > 0 ? u : (h + g) / 2;
+      x.setAttribute("r", S.toString()), x.setAttribute("cx", p.x.toString()), x.setAttribute("cy", p.y.toString()), x.setAttribute("fill", c), d.appendChild(x);
     }), d.outerHTML;
   }
 }
@@ -6547,7 +6585,7 @@ const ie = class ie {
 };
 ie.MAX_FILE_SIZE = 5 * 1024 * 1024;
 let ue = ie;
-class $ {
+class D {
   /**
    * Determines if a form element should be disabled based on context
    * Centralizes the disabled logic for consistency across all input types
@@ -6578,7 +6616,7 @@ class $ {
   // Extract file extension and guess type
   static _guessFileTypeFromUrl(e) {
     var n;
-    const i = (n = $._extractFilenameFromUrl(e).split(".").pop()) == null ? void 0 : n.toLowerCase();
+    const i = (n = D._extractFilenameFromUrl(e).split(".").pop()) == null ? void 0 : n.toLowerCase();
     return i ? {
       pdf: "PDF Document",
       doc: "Word Document",
@@ -6819,23 +6857,23 @@ class $ {
               <div class="print-response-value file-response">
                 📎 ${r.name}
                 ${r.size ? l` <span class="file-size"
-                      >(${$._formatFileSize(r.size)})</span
+                      >(${D._formatFileSize(r.size)})</span
                     >` : ""}
               </div>
             `;
           if (n) {
-            const a = $._extractFilenameFromUrl(r);
+            const a = D._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";
+          const a = n ? r : "#", d = o ? r.name : n ? D._extractFilenameFromUrl(r) : "View File";
           return l`
             <div class="file-upload-view-only">
               <a href="${a}" target="_blank" class="file-link"> 📎 ${d} </a>
               ${o && r.size ? l`
                     <span class="file-size-info"
-                      >(${$._formatFileSize(r.size)})</span
+                      >(${D._formatFileSize(r.size)})</span
                     >
                   ` : ""}
             </div>
@@ -6900,19 +6938,19 @@ class $ {
     const i = t.formData[e.id] ?? "", r = t.validationErrors[e.id], n = () => {
       switch (e.type) {
         case "textarea":
-          return $.renderTextArea(e, i, t);
+          return D.renderTextArea(e, i, t);
         case "select":
-          return $.renderSelect(e, i, t);
+          return D.renderSelect(e, i, t);
         case "radio":
-          return $.renderRadio(e, i, t);
+          return D.renderRadio(e, i, t);
         case "checkbox":
-          return $.renderCheckbox(e, i, t);
+          return D.renderCheckbox(e, i, t);
         case "signature":
-          return $.renderSignature(e, i, t);
+          return D.renderSignature(e, i, t);
         case "file_upload":
-          return $.renderFileUpload(e, i, t);
+          return D.renderFileUpload(e, i, t);
         default:
-          return $.renderDefaultInput(e, i, t);
+          return D.renderDefaultInput(e, i, t);
       }
     }, o = e.type === "checkbox" && (!e.options || e.options.length === 0);
     return t.mode === "print" ? l`
@@ -6964,10 +7002,10 @@ class $t {
  */
 class he 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");
+    if (super(e), this.it = w, 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 === w || 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;
@@ -6977,8 +7015,8 @@ class he extends $t {
   }
 }
 he.directiveName = "unsafeHTML", he.resultType = 1;
-const Me = kt(he);
-class D {
+const Te = kt(he);
+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>");
   }
@@ -6993,7 +7031,7 @@ class D {
     return l`
       <div class="content-element markdown-content">
         <div class="markdown-text">
-          ${Me(D.renderMarkdown(e.content))}
+          ${Te(C.renderMarkdown(e.content))}
         </div>
       </div>
     `;
@@ -7009,7 +7047,7 @@ class D {
   static renderHtml(e) {
     return l`
       <div class="content-element html-content">
-        <div class="html-content-wrapper">${Me(e.content)}</div>
+        <div class="html-content-wrapper">${Te(e.content)}</div>
       </div>
     `;
   }
@@ -7054,21 +7092,21 @@ class D {
     const i = () => {
       switch (e.type) {
         case "text":
-          return D.renderText(e);
+          return C.renderText(e);
         case "markdown":
-          return D.renderMarkdownElement(e);
+          return C.renderMarkdownElement(e);
         case "divider":
-          return D.renderDivider(e);
+          return C.renderDivider(e);
         case "html":
-          return D.renderHtml(e);
+          return C.renderHtml(e);
         case "image":
-          return D.renderImage(e);
+          return C.renderImage(e);
         case "video":
-          return D.renderVideo(e);
+          return C.renderVideo(e);
         case "file":
-          return D.renderFile(e);
+          return C.renderFile(e);
         default:
-          return D.renderUnknown(e);
+          return C.renderUnknown(e);
       }
     };
     return (t == null ? void 0 : t.mode) === "print" ? l`
@@ -7258,7 +7296,7 @@ class le {
     `;
   }
 }
-class V {
+class j {
   /**
    * Determines if a step should show as completed in the badge.
    * If completion screen is showing, all assigned steps are considered completed.
@@ -7390,7 +7428,7 @@ class pe {
     n(u), a !== "preview" && o(e, c);
   }
 }
-var Ct = Object.defineProperty, At = Object.getOwnPropertyDescriptor, x = (s, e, t, i) => {
+var Ct = Object.defineProperty, At = Object.getOwnPropertyDescriptor, y = (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;
@@ -7649,10 +7687,10 @@ let f = class extends N {
     this.responseTracker.trackQuestionResponse(this._currentStep, s, e);
   }
   _renderQuestion(s) {
-    return $.render(s, this._getRenderContext());
+    return D.render(s, this._getRenderContext());
   }
   _renderContentElement(s) {
-    return D.render(s, this._getRenderContext());
+    return C.render(s, this._getRenderContext());
   }
   _isQuestionElement(s) {
     return f.QUESTION_ELEMENT_TYPES.includes(s.type);
@@ -7673,7 +7711,7 @@ let f = class extends N {
     return l`
       <div class="print-step">
         <!-- Step Header -->
-        ${V.renderStepHeader({ step: s, mode: "print" })}
+        ${j.renderStepHeader({ step: s, mode: "print" })}
 
         <!-- Step Elements -->
         ${s.elements.map((e) => this._renderStepElement(e))}
@@ -7805,11 +7843,11 @@ let f = class extends N {
     });
   }
   async _updateInstanceData(s, e, t) {
-    var d, p, c, u, h, g, v;
+    var d, p, c, u, h, g, 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);
+    let i = (p = (d = this.instance) == null ? void 0 : d.steps) == null ? void 0 : p.find((S) => S.id === s);
     if (!i && this._internalCompletedSteps.size > 0) {
-      const w = Array.from(this._internalCompletedSteps), Y = w[w.length - 1];
+      const S = Array.from(this._internalCompletedSteps), Y = S[S.length - 1];
       i = (u = (c = this.instance) == null ? void 0 : c.steps) == null ? void 0 : u.find((q) => q.id === Y);
     }
     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 ? {
@@ -7817,7 +7855,7 @@ let f = class extends N {
       title: this._currentStep.title
     } : null, a = {
       instanceId: (g = this.instance) == null ? void 0 : g.id,
-      workflowId: (v = this.instance) == null ? void 0 : v.workflowId,
+      workflowId: (x = this.instance) == null ? void 0 : x.workflowId,
       completedStepId: s || (i ? i.id : void 0),
       completedStepData: i ? {
         id: i.id,
@@ -7831,10 +7869,10 @@ let f = class extends N {
     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 };
+        const S = await this.onInstanceUpdated(a);
+        return S.success ? this._submissionError = null : (this._submissionError = S.error || "Unable to save response. Please try again.", s && this._internalCompletedSteps.delete(s)), this.requestUpdate(), S;
+      } catch (S) {
+        return this._submissionError = S instanceof Error ? S.message : "Unable to save response. Please try again.", s && this._internalCompletedSteps.delete(s), this.requestUpdate(), { success: !1, error: this._submissionError };
       }
     return { success: !0 };
   }
@@ -8096,7 +8134,7 @@ let f = class extends 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) -->
-      ${V.renderMobileSteps({
+      ${j.renderMobileSteps({
       steps: i,
       currentStepIndex: this._currentStepIndex,
       mode: this.mode || "default",
@@ -8109,7 +8147,7 @@ let f = class extends N {
     })}
 
       <!-- Sidebar: Steps List (hidden on mobile) -->
-      ${V.renderSidebar({
+      ${j.renderSidebar({
       steps: i,
       currentStepIndex: this._currentStepIndex,
       mode: this.mode || "default",
@@ -8123,8 +8161,8 @@ let f = class extends N {
 
       <!-- Main Content: Step Details and Questions -->
       <main class="runner-main-content">
-        ${this.mode === "print" ? V.renderStepHeader({ step: s, mode: this.mode }) : l`<div class="runner-card">
-              ${V.renderStepHeader({
+        ${this.mode === "print" ? j.renderStepHeader({ step: s, mode: this.mode }) : l`<div class="runner-card">
+              ${j.renderStepHeader({
       step: s,
       mode: this.mode
     })}
@@ -8202,67 +8240,67 @@ f.CONTENT_ELEMENT_TYPES = [
   "divider",
   "markdown"
 ];
-x([
-  C({ type: Object })
+y([
+  $({ type: Object })
 ], f.prototype, "instance", 2);
-x([
-  C({ type: Object })
+y([
+  $({ type: Object })
 ], f.prototype, "workflow", 2);
-x([
-  C({ type: String })
+y([
+  $({ type: String })
 ], f.prototype, "mode", 2);
-x([
-  C({ type: Boolean })
+y([
+  $({ type: Boolean })
 ], f.prototype, "isLoading", 2);
-x([
-  C({ type: Object })
+y([
+  $({ type: Object })
 ], f.prototype, "currentUser", 2);
-x([
-  C({ type: Function })
+y([
+  $({ type: Function })
 ], f.prototype, "onSignatureCaptured", 2);
-x([
-  C({ type: Function })
+y([
+  $({ type: Function })
 ], f.prototype, "onFileUploaded", 2);
-x([
-  C({ type: Function })
+y([
+  $({ type: Function })
 ], f.prototype, "onInstanceUpdated", 2);
-x([
+y([
   b()
 ], f.prototype, "_currentStepIndex", 2);
-x([
+y([
   b()
 ], f.prototype, "_formData", 2);
-x([
+y([
   b()
 ], f.prototype, "_validationErrors", 2);
-x([
+y([
   b()
 ], f.prototype, "_internalCompletedSteps", 2);
-x([
+y([
   b()
 ], f.prototype, "_formRestorationComplete", 2);
-x([
+y([
   b()
 ], f.prototype, "_savedSignatures", 2);
-x([
+y([
   b()
 ], f.prototype, "_replacingSignatures", 2);
-x([
+y([
   b()
 ], f.prototype, "_savedInstance", 2);
-x([
+y([
   b()
 ], f.prototype, "_isSubmitted", 2);
-x([
+y([
   b()
 ], f.prototype, "_userStepsSubmitted", 2);
-x([
+y([
   b()
 ], f.prototype, "_justSaved", 2);
-x([
+y([
   b()
 ], f.prototype, "_submissionError", 2);
-f = x([
+f = y([
   Ne("runner-widget")
 ], f);
 function Jt(s, e = {}) {
@@ -8292,7 +8330,7 @@ function Jt(s, e = {}) {
     </div>
     <hr class="print-question-separator" />
     
-    ${n ? Ht(s, o) : ""}
+    ${n ? Wt(s, o) : ""}
     ${s.steps.map((d) => Et(d)).join(`
 `)}
   </div>
@@ -8306,15 +8344,15 @@ function Et(s) {
   return `
     <div class="print-step">
       <!-- Step Header -->
-      ${Mt(s)}
+      ${Tt(s)}
       
       <!-- Step Elements -->
-      ${s.elements.map((e) => Tt(e, s)).join(`
+      ${s.elements.map((e) => Mt(e, s)).join(`
 `)}
     </div>
   `;
 }
-function Mt(s) {
+function Tt(s) {
   return `
     <div class="step-print-header">
       <div class="print-step-title">${m(s.title)}</div>
@@ -8323,11 +8361,11 @@ function Mt(s) {
     </div>
   `;
 }
-function Tt(s, e) {
-  return Vt(s) ? Ft(s, e) : zt(s);
+function Mt(s, e) {
+  return jt(s) ? Ft(s, e) : zt(s);
 }
 function Ft(s, e) {
-  const t = Wt(s.id, e.responses), i = t == null ? void 0 : t.value, n = s.type === "checkbox" && (!s.options || s.options.length === 0) ? "" : `
+  const t = Vt(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">
       ${m(s.label)}:
     </div>
@@ -8508,7 +8546,7 @@ function Ot(s, e) {
     return `
       <div class="print-response-value file-response">
         📎 ${m(e.name)}
-        ${e.size ? ` <span class="file-size">(${jt(e.size)})</span>` : ""}
+        ${e.size ? ` <span class="file-size">(${Ht(e.size)})</span>` : ""}
       </div>
     `;
   if (t) {
@@ -8543,7 +8581,7 @@ function Rt(s, e) {
       </div>
     `;
 }
-function Vt(s) {
+function jt(s) {
   return [
     "text_input",
     "textarea",
@@ -8556,10 +8594,10 @@ function Vt(s) {
     "signature"
   ].includes(s.type);
 }
-function Wt(s, e) {
+function Vt(s, e) {
   return e == null ? void 0 : e.find((t) => t.elementId === s);
 }
-function Ht(s, e) {
+function Wt(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;">
@@ -8591,7 +8629,7 @@ function m(s) {
     "'": "&#39;"
   })[i]);
 }
-function jt(s) {
+function Ht(s) {
   if (s === 0) return "0 Bytes";
   const e = 1024, t = ["Bytes", "KB", "MB", "GB"], i = Math.floor(Math.log(s) / Math.log(e));
   return parseFloat((s / Math.pow(e, i)).toFixed(2)) + " " + t[i];
@@ -9116,6 +9154,7 @@ function Gt() {
   `;
 }
 function Xt(s, e = {}) {
+  var r;
   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);
@@ -9123,7 +9162,7 @@ function Xt(s, e = {}) {
     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;
+  return e.workflow && (i.workflow = e.workflow, e.subjectTypes && e.subjectTypes.length > 0 && ((r = e.subjectTypes[0]) != null && r.name) && (console.log("Setting default subject type to:", e.subjectTypes[0].name), i.workflow.subjectType = e.subjectTypes[0].name)), e.onWorkflowCreated && (i.onWorkflowCreated = e.onWorkflowCreated), e.onWorkflowDeleted && (i.onWorkflowDeleted = e.onWorkflowDeleted), e.onWorkflowUpdated && (i.onWorkflowUpdated = e.onWorkflowUpdated), i.labelForDrill = e.labelForDrill || "Drill", i.labelForGroup = e.labelForGroup || "Group", i.subjectTypes = e.subjectTypes || [], i.groups = e.groups || [], t.appendChild(i), console.log(`Drill Builder mounted on #${s}`), i;
 }
 function Zt(s, e) {
   if (!customElements.get("runner-widget"))