@cratis/event-models 0.114.0 → 0.115.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Guid as de } from "@cratis/fundamentals";
 import { Fragment as Ae, createContext as Ne, forwardRef as ui, memo as tr, startTransition as mi, useCallback as q, useContext as Se, useEffect as re, useId as Gt, useImperativeHandle as tt, useLayoutEffect as Ut, useMemo as oe, useRef as A, useState as F } from "react";
-import { Fragment as ee, jsx as a, jsxs as k } from "react/jsx-runtime";
+import { Fragment as ee, jsx as a, jsxs as x } from "react/jsx-runtime";
 import { createPortal as He } from "react-dom";
 import { Canvas as gi, CanvasItem as nr, Note as vi, canvasGesture as ht } from "@cratis/components/Canvas";
 import { Toolbar as hi, ToolbarButton as pi, ToolbarSlot as fi } from "@cratis/components/Toolbar";
@@ -633,8 +633,8 @@ var jt = ({ anchorRef: e, open: t, side: n = "below", align: r = "left", gap: i
       d(void 0);
       return;
     }
-    const c = e.current?.getBoundingClientRect();
-    c && d(oo(c, n, r, i));
+    const u = e.current?.getBoundingClientRect();
+    u && d(oo(u, n, r, i));
   }, [
     t,
     n,
@@ -659,11 +659,11 @@ var jt = ({ anchorRef: e, open: t, side: n = "below", align: r = "left", gap: i
   right: "right"
 }, me = ({ content: e, position: t = "top", children: n }) => {
   const r = A(null), [i, o] = F(!1), [s, d] = F(!1);
-  return /* @__PURE__ */ k("span", {
+  return /* @__PURE__ */ x("span", {
     ref: r,
     className: "grid-tooltip-root",
-    onPointerEnter: (u) => {
-      u.pointerType === "mouse" && o(!0);
+    onPointerEnter: (c) => {
+      c.pointerType === "mouse" && o(!0);
     },
     onPointerLeave: () => {
       o(!1), d(!1);
@@ -772,16 +772,16 @@ function mo(e, t, n, r, i) {
     onPointerMove: (s) => {
       const d = o.current;
       if (!d) return;
-      const c = n(), l = (s.clientX - d.lastX) / c, u = (s.clientY - d.lastY) / c;
+      const u = n(), l = (s.clientX - d.lastX) / u, c = (s.clientY - d.lastY) / u;
       o.current = {
         lastX: s.clientX,
         lastY: s.clientY,
         position: {
           x: d.position.x + l,
-          y: d.position.y + u
+          y: d.position.y + c
         },
         moved: !0
-      }, r?.(e, l, u);
+      }, r?.(e, l, c);
     },
     onPointerUp: () => {
       const s = o.current;
@@ -793,16 +793,16 @@ var go = ({ onCollectionMoved: e, ...t }) => e ? /* @__PURE__ */ a(vo, {
   ...t,
   onCollectionMoved: e
 }) : void 0, vo = ({ collectionId: e, position: t, getZoom: n, topOffset: r = 0, onCollectionMoving: i, onCollectionMoved: o }) => {
-  const [s, d] = F(!1), c = mo(e, t, n, i, o);
+  const [s, d] = F(!1), u = mo(e, t, n, i, o);
   return /* @__PURE__ */ a("div", {
     className: `collection-drag-handle ${s ? "collection-drag-handle--dragging" : ""}`,
     style: { top: `${r}px` },
     onPointerDown: (l) => {
-      d(!0), c.onPointerDown(l);
+      d(!0), u.onPointerDown(l);
     },
-    onPointerMove: c.onPointerMove,
+    onPointerMove: u.onPointerMove,
     onPointerUp: () => {
-      d(!1), c.onPointerUp();
+      d(!1), u.onPointerUp();
     },
     children: /* @__PURE__ */ a("i", { className: "pi pi-arrows-alt" })
   });
@@ -822,9 +822,9 @@ var Cn = (e, t, n, r) => {
   return i !== void 0 && n - i < r;
 };
 function fo(e, t, n, r = ho) {
-  const i = gr(t), o = new Map(t.map((u) => [u.id.toString(), u])), s = new Map(e.collections.map((u) => [u.id.toString(), u])), d = e.additions.filter((u) => !o.has(u.id.toString()));
+  const i = gr(t), o = new Map(t.map((c) => [c.id.toString(), c])), s = new Map(e.collections.map((c) => [c.id.toString(), c])), d = e.additions.filter((c) => !o.has(c.id.toString()));
   if (i !== e.contentSignature) {
-    const u = t.map((f) => {
+    const c = t.map((f) => {
       const y = s.get(f.id.toString());
       return y && Cn(e, f.id, n, r) ? {
         ...f,
@@ -836,14 +836,14 @@ function fo(e, t, n, r = ho) {
       snapshot: t,
       contentSignature: i,
       additions: d,
-      collections: [...u, ...d]
+      collections: [...c, ...d]
     };
   }
-  let c = !1;
-  const l = e.collections.map((u) => {
-    const f = o.get(u.id.toString());
-    return !f || Cn(e, u.id, n, r) || (u.position?.x ?? 0) === (f.position?.x ?? 0) && (u.position?.y ?? 0) === (f.position?.y ?? 0) ? u : (c = !0, {
-      ...u,
+  let u = !1;
+  const l = e.collections.map((c) => {
+    const f = o.get(c.id.toString());
+    return !f || Cn(e, c.id, n, r) || (c.position?.x ?? 0) === (f.position?.x ?? 0) && (c.position?.y ?? 0) === (f.position?.y ?? 0) ? c : (u = !0, {
+      ...c,
       position: f.position
     });
   });
@@ -851,7 +851,7 @@ function fo(e, t, n, r = ho) {
     ...e,
     snapshot: t,
     additions: d,
-    collections: c ? l : e.collections
+    collections: u ? l : e.collections
   };
 }
 function xn(e, t) {
@@ -917,15 +917,15 @@ function So(e) {
   return n ? r : e;
 }
 function Co({ initialCollections: e, onAddCollection: t, onCollectionMoved: n, onCollectionsChange: r, onPersistenceError: i }) {
-  const { readOnly: o } = K(), [s, d] = F(() => po(e)), c = A(s), { collections: l, pendingMoveIds: u } = s, f = A(!1), y = A(!0), p = q((m) => {
-    const g = m(c.current);
-    c.current = g, d(g);
+  const { readOnly: o } = K(), [s, d] = F(() => po(e)), u = A(s), { collections: l, pendingMoveIds: c } = s, f = A(!1), y = A(!0), h = q((m) => {
+    const g = m(u.current);
+    u.current = g, d(g);
   }, []);
   return re(() => {
-    e !== c.current.snapshot && p((m) => fo(m, e, Date.now(), o ? 1 / 0 : void 0));
+    e !== u.current.snapshot && h((m) => fo(m, e, Date.now(), o ? 1 / 0 : void 0));
   }, [
     e,
-    p,
+    h,
     o
   ]), re(() => {
     if (y.current) {
@@ -935,22 +935,22 @@ function Co({ initialCollections: e, onAddCollection: t, onCollectionMoved: n, o
     r?.(l);
   }, [l, r]), {
     collections: l,
-    pendingMoveIds: u,
+    pendingMoveIds: c,
     setCollections: q((m) => {
-      p((g) => ({
+      h((g) => ({
         ...g,
         collections: typeof m == "function" ? m(g.collections) : m
       }));
-    }, [p]),
+    }, [h]),
     addCollection: q(async (m, g) => {
       if (!(o || !t || f.current)) {
         f.current = !0;
         try {
-          const v = await t(m, g, c.current.collections);
-          v && p((h) => h.collections.some((w) => w.id.equals(v.id)) ? h : {
-            ...h,
-            additions: [...h.additions, v],
-            collections: [...h.collections, v]
+          const v = await t(m, g, u.current.collections);
+          v && h((p) => p.collections.some((w) => w.id.equals(v.id)) ? p : {
+            ...p,
+            additions: [...p.additions, v],
+            collections: [...p.collections, v]
           });
         } catch (v) {
           if (i) i(v);
@@ -963,32 +963,32 @@ function Co({ initialCollections: e, onAddCollection: t, onCollectionMoved: n, o
       o,
       t,
       i,
-      p
+      h
     ]),
     moveCollection: q((m, g, v) => {
-      !o && !n || c.current.pendingMoveIds.has(m.toString()) || p((h) => wo(h, m, g, v, Date.now()));
+      !o && !n || u.current.pendingMoveIds.has(m.toString()) || h((p) => wo(p, m, g, v, Date.now()));
     }, [
       o,
       n,
-      p
+      h
     ]),
     collectionMoved: q(async (m, g) => {
-      if (!(o || !n || c.current.pendingMoveIds.has(m.toString()))) {
-        p((v) => bo(v, m));
+      if (!(o || !n || u.current.pendingMoveIds.has(m.toString()))) {
+        h((v) => bo(v, m));
         try {
-          await n(m, g) || p((v) => xn(v, m));
+          await n(m, g) || h((v) => xn(v, m));
         } catch (v) {
-          if (p((h) => xn(h, m)), i) i(v);
+          if (h((p) => xn(p, m)), i) i(v);
           else throw v;
         } finally {
-          p((v) => yo(v, m));
+          h((v) => yo(v, m));
         }
       }
     }, [
       o,
       n,
       i,
-      p
+      h
     ]),
     canMove: o || !!n,
     canAdd: !o && !!t
@@ -1153,7 +1153,7 @@ function Vo() {
     kn = e;
     const i = r ? Math.min(Ee, Wo) : Ee;
     let o = 0;
-    for (const [s, d] of zo((c) => !r || c.verdict))
+    for (const [s, d] of zo((u) => !r || u.verdict))
       if (We.delete(s), r ? mi(() => s(d.verdict)) : s(d.verdict), ++o >= i) break;
     Nt = o > 0;
   }
@@ -1190,10 +1190,10 @@ function Zt(e, t = "250% 250%", n = "light") {
       return;
     }
     const s = new IntersectionObserver((d) => {
-      const c = d[d.length - 1];
-      if (!c) return;
-      const l = c.boundingClientRect, u = Math.hypot(l.left + l.width / 2 - window.innerWidth / 2, l.top + l.height / 2 - window.innerHeight / 2);
-      In.request(i, c.isIntersecting, u, n);
+      const u = d[d.length - 1];
+      if (!u) return;
+      const l = u.boundingClientRect, c = Math.hypot(l.left + l.width / 2 - window.innerWidth / 2, l.top + l.height / 2 - window.innerHeight / 2);
+      In.request(i, u.isIntersecting, c, n);
     }, { rootMargin: t });
     return s.observe(o), () => {
       s.disconnect(), In.cancel(i);
@@ -1209,7 +1209,7 @@ function Go({ collection: e, estimatedSize: t, measuredSize: n, onSize: r, child
   return /* @__PURE__ */ a(nr, {
     x: e.position?.x ?? 0,
     y: e.position?.y ?? 0,
-    onSize: r ? (c, l) => r(e.id, c, l) : void 0,
+    onSize: r ? (u, l) => r(e.id, u, l) : void 0,
     children: /* @__PURE__ */ a("div", {
       ref: o,
       children: s ? i : /* @__PURE__ */ a("div", {
@@ -1219,17 +1219,17 @@ function Go({ collection: e, estimatedSize: t, measuredSize: n, onSize: r, child
           height: d.height
         },
         "aria-hidden": !0,
-        children: e.modules.map((c, l) => /* @__PURE__ */ k("div", {
+        children: e.modules.map((u, l) => /* @__PURE__ */ x("div", {
           className: "event-model-collection-placeholder-module",
           style: { width: t.moduleWidths[l] },
           children: [/* @__PURE__ */ a("div", {
             className: "event-modeling-grid-pill event-modeling-grid-pill--module event-model-collection-placeholder-pill",
-            children: c.name
+            children: u.name
           }), /* @__PURE__ */ a("div", {
             className: "event-model-collection-placeholder-body",
             style: { height: Math.max(0, d.height - Z.headerHeight - 4) }
           })]
-        }, c.id.toString()))
+        }, u.id.toString()))
       })
     })
   });
@@ -1239,8 +1239,8 @@ var Uo = tr(Go), pt = /* @__PURE__ */ (function(e) {
 })({});
 function Kt(e, t, n) {
   if (n === pt.Vertical) {
-    const s = t.y - e.y, d = e.y + s * 0.5, c = t.y - s * 0.5;
-    return `M ${e.x} ${e.y} C ${e.x} ${d}, ${t.x} ${c}, ${t.x} ${t.y}`;
+    const s = t.y - e.y, d = e.y + s * 0.5, u = t.y - s * 0.5;
+    return `M ${e.x} ${e.y} C ${e.x} ${d}, ${t.x} ${u}, ${t.x} ${t.y}`;
   }
   const r = t.x - e.x, i = e.x + r * 0.5, o = t.x - r * 0.5;
   return `M ${e.x} ${e.y} C ${i} ${e.y}, ${o} ${t.y}, ${t.x} ${t.y}`;
@@ -1325,12 +1325,12 @@ function Ko(e, t, n) {
     width: 0,
     height: 0
   };
-  const o = Math.min(...r) - n, s = Math.min(...i) - n, d = Math.max(...r) + n, c = Math.max(...i) + n;
+  const o = Math.min(...r) - n, s = Math.min(...i) - n, d = Math.max(...r) + n, u = Math.max(...i) + n;
   return {
     x: o,
     y: s,
     width: d - o,
-    height: c - s
+    height: u - s
   };
 }
 var oc = 12, ac = 600, Qo = "Inter, Avenir, Helvetica, Arial, sans-serif", sc = 230, st = null;
@@ -1399,7 +1399,7 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
     title: r,
     "aria-label": r,
     "aria-expanded": !e,
-    children: e ? /* @__PURE__ */ k("svg", {
+    children: e ? /* @__PURE__ */ x("svg", {
       width: "12",
       height: "12",
       viewBox: "0 0 12 12",
@@ -1439,7 +1439,7 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
           strokeLinecap: "round"
         })
       ]
-    }) : /* @__PURE__ */ k("svg", {
+    }) : /* @__PURE__ */ x("svg", {
       width: "12",
       height: "12",
       viewBox: "0 0 12 12",
@@ -1499,10 +1499,10 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
     })
   });
 }, Ct = ({ value: e, onChange: t, placeholder: n = "Name…", style: r, validate: i, readOnly: o = !1 }) => {
-  const s = ge(), [d, c] = F(!1), [l, u] = F(e), [f, y] = F(void 0), p = () => {
+  const s = ge(), [d, u] = F(!1), [l, c] = F(e), [f, y] = F(void 0), h = () => {
     const m = l.trim();
     if (!m) {
-      u(e), c(!1), y(void 0);
+      c(e), u(!1), y(void 0);
       return;
     }
     if (i) {
@@ -1512,21 +1512,21 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
         return;
       }
     }
-    y(void 0), c(!1), t(m);
+    y(void 0), u(!1), t(m);
   };
   return d && !o ? /* @__PURE__ */ a("input", {
     autoFocus: !0,
     value: l,
     onChange: (m) => {
-      u(m.target.value), y(void 0);
+      c(m.target.value), y(void 0);
     },
-    onBlur: p,
+    onBlur: h,
     onKeyDown: (m) => {
       if (m.key === "Enter") {
         m.target.blur();
         return;
       }
-      m.key === "Escape" && (u(e), c(!1), y(void 0));
+      m.key === "Escape" && (c(e), u(!1), y(void 0));
     },
     className: `event-modeling-grid-editable-label-input${f ? " event-modeling-grid-editable-label-input--error" : ""}`,
     title: f,
@@ -1534,7 +1534,7 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
   }) : /* @__PURE__ */ a("span", {
     title: o ? void 0 : s.editableLabel.doubleClickToRename,
     onDoubleClick: o ? void 0 : () => {
-      u(e), c(!0), y(void 0);
+      c(e), u(!0), y(void 0);
     },
     className: "event-modeling-grid-editable-label",
     style: r,
@@ -1555,7 +1555,7 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
   const i = ge().erroredEntity;
   return /* @__PURE__ */ a(me, {
     content: i.couldNotBeRendered(i[e], n),
-    children: /* @__PURE__ */ k("div", {
+    children: /* @__PURE__ */ x("div", {
       className: `errored-entity errored-entity--${e}`,
       role: "alert",
       "data-errored-entity": e,
@@ -1581,18 +1581,18 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
       ]
     })
   });
-}, xr = ({ variant: e, collapsed: t, onToggle: n, label: r, onRenameLabel: i, labelReadOnly: o = !1, validateLabel: s, labelStyle: d, background: c, border: l, height: u, children: f, leadingContent: y, draggable: p = !1, onPointerDown: m, onPointerMove: g, onPointerUp: v, error: h }) => /* @__PURE__ */ k("div", {
-  className: `event-modeling-grid-pill event-modeling-grid-pill--${e}${t ? " event-modeling-grid-pill--collapsed" : ""}${p ? " event-modeling-grid-pill--draggable" : ""}${h ? " event-modeling-grid-pill--error" : ""}`,
+}, xr = ({ variant: e, collapsed: t, onToggle: n, label: r, onRenameLabel: i, labelReadOnly: o = !1, validateLabel: s, labelStyle: d, background: u, border: l, height: c, children: f, leadingContent: y, draggable: h = !1, onPointerDown: m, onPointerMove: g, onPointerUp: v, error: p }) => /* @__PURE__ */ x("div", {
+  className: `event-modeling-grid-pill event-modeling-grid-pill--${e}${t ? " event-modeling-grid-pill--collapsed" : ""}${h ? " event-modeling-grid-pill--draggable" : ""}${p ? " event-modeling-grid-pill--error" : ""}`,
   style: {
-    background: c,
-    border: h ? "2px solid #ef4444" : l,
-    height: u
+    background: u,
+    border: p ? "2px solid #ef4444" : l,
+    height: c
   },
   onPointerDown: m,
   onPointerMove: g,
   onPointerUp: v,
   children: [
-    /* @__PURE__ */ k("div", {
+    /* @__PURE__ */ x("div", {
       className: "event-modeling-grid-pill-left",
       children: [n && /* @__PURE__ */ a(Qt, {
         collapsed: t,
@@ -1606,9 +1606,9 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
       style: d,
       readOnly: o
     }),
-    /* @__PURE__ */ k("div", {
+    /* @__PURE__ */ x("div", {
       className: "event-modeling-grid-pill-right",
-      children: [h && /* @__PURE__ */ a(Cr, { error: h }), f]
+      children: [p && /* @__PURE__ */ a(Cr, { error: p }), f]
     })
   ]
 }), ze = (e, t, n) => {
@@ -1616,8 +1616,8 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
   r.current = t, re(() => {
     if (!n) return;
     const i = (o) => {
-      const s = e.map((l) => l.current).filter((l) => !!l), d = o.target, c = d instanceof Node && s.some((l) => l?.contains(d));
-      s.length > 0 && !c && r.current();
+      const s = e.map((l) => l.current).filter((l) => !!l), d = o.target, u = d instanceof Node && s.some((l) => l?.contains(d));
+      s.length > 0 && !u && r.current();
     };
     return document.addEventListener("pointerdown", i, !0), () => document.removeEventListener("pointerdown", i, !0);
   }, [e, n]);
@@ -1651,17 +1651,17 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
   border: "1px solid #d1d5db",
   flexShrink: 0,
   display: "inline-block"
-}), On = ({ rowType: e, height: t, name: n, description: r, actorId: i, onRenamed: o, validateName: s, onActorAdded: d, onDragStart: c, dragging: l = !1, badge: u, personaAvatar: f, children: y }) => {
-  const { readOnly: p, messages: m } = K(), [g, v] = F(!1), [h, w] = F(!1), b = A(void 0), S = A(null), C = A(null), O = A(null), N = oe(() => [C], []), L = oe(() => [O], []);
-  ze(N, () => v(!1), g), ze(L, () => w(!1), h);
-  const j = n ?? ra(e, m), H = ia(e), x = H && !p ? o : void 0, T = H && !p ? d : void 0, W = i && !p ? c : void 0, X = p ? [] : u?.actions ?? [], D = p ? void 0 : u?.onActivate, z = X.length > 0 || !!D, I = f ?? u?.avatar, M = H && (!!I || !!u && !p), E = () => {
+}), On = ({ rowType: e, height: t, name: n, description: r, actorId: i, onRenamed: o, validateName: s, onActorAdded: d, onDragStart: u, dragging: l = !1, badge: c, personaAvatar: f, children: y }) => {
+  const { readOnly: h, messages: m } = K(), [g, v] = F(!1), [p, w] = F(!1), b = A(void 0), S = A(null), C = A(null), L = A(null), N = oe(() => [C], []), O = oe(() => [L], []);
+  ze(N, () => v(!1), g), ze(O, () => w(!1), p);
+  const j = n ?? ra(e, m), H = ia(e), M = H && !h ? o : void 0, T = H && !h ? d : void 0, W = i && !h ? u : void 0, X = h ? [] : c?.actions ?? [], D = h ? void 0 : c?.onActivate, z = X.length > 0 || !!D, I = f ?? c?.avatar, k = H && (!!I || !!c && !h), E = () => {
     if (X.length > 0) {
       w((P) => !P);
       return;
     }
     D?.();
   };
-  return /* @__PURE__ */ k("div", {
+  return /* @__PURE__ */ x("div", {
     style: {
       width: 56,
       height: t,
@@ -1673,7 +1673,7 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
     "data-role-row": i ? "true" : void 0,
     "data-role-type": i ? e : void 0,
     "data-role-id": i,
-    children: [/* @__PURE__ */ k("div", {
+    children: [/* @__PURE__ */ x("div", {
       className: "event-modeling-grid-row-label-pill",
       ref: S,
       style: W ? { cursor: "grab" } : void 0,
@@ -1694,25 +1694,25 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
         b.current = void 0;
       } : void 0,
       children: [
-        M && /* @__PURE__ */ k("div", {
+        k && /* @__PURE__ */ x("div", {
           className: "event-modeling-grid-row-label-info",
-          ref: O,
+          ref: L,
           children: [/* @__PURE__ */ a("button", {
             className: "event-modeling-grid-row-label-info-btn",
             onClick: (P) => {
               P.stopPropagation(), E();
             },
-            title: u?.title ?? j,
-            "aria-label": u?.title ?? j,
+            title: c?.title ?? j,
+            "aria-label": c?.title ?? j,
             disabled: !z,
             style: z ? void 0 : {
-              opacity: p ? 1 : 0.4,
+              opacity: h ? 1 : 0.4,
               cursor: "default"
             },
             children: I ?? /* @__PURE__ */ a("i", { className: "pi pi-id-card" })
-          }), h && X.length > 0 && /* @__PURE__ */ a("div", {
+          }), p && X.length > 0 && /* @__PURE__ */ a("div", {
             className: "event-modeling-grid-row-role-menu",
-            children: X.map((P) => /* @__PURE__ */ k("button", {
+            children: X.map((P) => /* @__PURE__ */ x("button", {
               className: `event-modeling-grid-row-role-menu-option${P.danger ? " event-modeling-grid-row-role-menu-option--danger" : ""}`,
               onClick: (V) => {
                 V.stopPropagation(), w(!1), i && S.current && P.onActivate(i, S.current.getBoundingClientRect());
@@ -1723,9 +1723,9 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
         }),
         /* @__PURE__ */ a("div", {
           className: "event-modeling-grid-row-label-title",
-          children: x ? /* @__PURE__ */ a(Ct, {
+          children: M ? /* @__PURE__ */ a(Ct, {
             value: j,
-            onChange: x,
+            onChange: M,
             validate: s,
             style: oa
           }) : r?.trim() ? /* @__PURE__ */ a(me, {
@@ -1740,7 +1740,7 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
             children: j
           })
         }),
-        T && /* @__PURE__ */ k("div", {
+        T && /* @__PURE__ */ x("div", {
           className: "event-modeling-grid-row-label-add-role",
           ref: C,
           children: [/* @__PURE__ */ a("button", {
@@ -1753,7 +1753,7 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
             children: "+"
           }), g && /* @__PURE__ */ a("div", {
             className: "event-modeling-grid-row-role-menu",
-            children: na(m).map(({ actorType: P, label: V, color: te }) => /* @__PURE__ */ k("button", {
+            children: na(m).map(({ actorType: P, label: V, color: te }) => /* @__PURE__ */ x("button", {
               className: "event-modeling-grid-row-role-menu-option",
               onClick: () => {
                 T(P), v(!1);
@@ -1765,7 +1765,7 @@ var lc = 56, ta = ({ drag: e }) => e ? He(/* @__PURE__ */ a("div", {
       ]
     }), y]
   });
-}, sa = ({ topOffset: e, collectionId: t, children: n }) => /* @__PURE__ */ k("div", {
+}, sa = ({ topOffset: e, collectionId: t, children: n }) => /* @__PURE__ */ x("div", {
   className: "event-modeling-grid-row-labels",
   "data-actor-collection-id": t,
   style: { width: 56 },
@@ -1803,20 +1803,20 @@ function ua(e, t, n) {
   s.current = i;
   const d = A(t);
   d.current = t;
-  const c = A(e);
-  c.current = e;
+  const u = A(e);
+  u.current = e;
   const l = A(n);
   l.current = n;
-  const u = q((y, p, m) => {
-    const g = d.current.find((h) => h.id === y);
+  const c = q((y, h, m) => {
+    const g = d.current.find((p) => p.id === y);
     if (!g) return;
-    const v = d.current.filter((h) => h.actorType === g.actorType).findIndex((h) => h.id === y);
+    const v = d.current.filter((p) => p.actorType === g.actorType).findIndex((p) => p.id === y);
     o({
       actorId: y,
       rowType: Lo(g.actorType),
       sourceIndex: v,
       ghostLabel: g.name,
-      currentX: p,
+      currentX: h,
       currentY: m,
       dropIndex: v
     });
@@ -1828,64 +1828,64 @@ function ua(e, t, n) {
         ...g,
         currentX: m.clientX,
         currentY: m.clientY,
-        dropIndex: la(c.current, g.rowType, m.clientY)
+        dropIndex: la(u.current, g.rowType, m.clientY)
       });
-    }, p = () => {
+    }, h = () => {
       const m = s.current;
       if (o(void 0), !m) return;
       const g = ca(d.current, m.actorId, m.dropIndex);
-      g && l.current?.(c.current, g.actorType, g.orderedIds);
+      g && l.current?.(u.current, g.actorType, g.orderedIds);
     };
-    return window.addEventListener("pointermove", y), window.addEventListener("pointerup", p), () => {
-      window.removeEventListener("pointermove", y), window.removeEventListener("pointerup", p);
+    return window.addEventListener("pointermove", y), window.addEventListener("pointerup", h), () => {
+      window.removeEventListener("pointermove", y), window.removeEventListener("pointerup", h);
     };
   }, [f]), {
     actorDrag: i,
-    handleActorDragStart: !r.readOnly && n !== void 0 ? u : void 0
+    handleActorDragStart: !r.readOnly && n !== void 0 ? c : void 0
   };
 }
-var ma = ({ collectionId: e, topOffset: t, contentRows: n, rowHeights: r, actors: i, onActorAdded: o, onActorRenamed: s, onRowRenamed: d, onActorsReordered: c, renderActorLabel: l, renderEmptyActorLabel: u }) => {
-  const [f, y] = F({}), [p, m] = F({}), { actorDrag: g, handleActorDragStart: v } = ua(e, i, c);
-  return /* @__PURE__ */ k(sa, {
+var ma = ({ collectionId: e, topOffset: t, contentRows: n, rowHeights: r, actors: i, onActorAdded: o, onActorRenamed: s, onRowRenamed: d, onActorsReordered: u, renderActorLabel: l, renderEmptyActorLabel: c }) => {
+  const [f, y] = F({}), [h, m] = F({}), { actorDrag: g, handleActorDragStart: v } = ua(e, i, u);
+  return /* @__PURE__ */ x(sa, {
     topOffset: t,
     collectionId: e.toString(),
-    children: [/* @__PURE__ */ a(ta, { drag: g }), n.flatMap((h) => {
-      const w = St(h), b = w === void 0 ? [] : i.filter((N) => N.actorType === w), S = {
-        rowType: h,
-        height: r[h],
-        name: f[h],
+    children: [/* @__PURE__ */ a(ta, { drag: g }), n.flatMap((p) => {
+      const w = St(p), b = w === void 0 ? [] : i.filter((N) => N.actorType === w), S = {
+        rowType: p,
+        height: r[p],
+        name: f[p],
         onRenamed: d ? (N) => {
-          y((L) => ({
-            ...L,
-            [h]: N
-          })), d(h, N);
+          y((O) => ({
+            ...O,
+            [p]: N
+          })), d(p, N);
         } : void 0,
-        validateName: (N) => Object.entries(f).find(([L]) => L !== h)?.[1]?.toLowerCase() === N.toLowerCase() ? "Name already in use" : void 0,
-        onActorAdded: o ? (N) => o(h, N) : void 0
-      }, C = w === void 0 || b.length === 0 ? [/* @__PURE__ */ a(Ae, { children: w !== void 0 && u ? u(h, S) : /* @__PURE__ */ a(On, { ...S }) }, h)] : [], O = b.flatMap((N, L) => {
-        const j = g?.rowType === h, H = {
-          rowType: h,
-          height: r[h],
-          name: p[N.id] ?? N.name,
+        validateName: (N) => Object.entries(f).find(([O]) => O !== p)?.[1]?.toLowerCase() === N.toLowerCase() ? "Name already in use" : void 0,
+        onActorAdded: o ? (N) => o(p, N) : void 0
+      }, C = w === void 0 || b.length === 0 ? [/* @__PURE__ */ a(Ae, { children: w !== void 0 && c ? c(p, S) : /* @__PURE__ */ a(On, { ...S }) }, p)] : [], L = b.flatMap((N, O) => {
+        const j = g?.rowType === p, H = {
+          rowType: p,
+          height: r[p],
+          name: h[N.id] ?? N.name,
           description: N.description,
           actorId: N.id,
-          onRenamed: s ? (x) => {
+          onRenamed: s ? (M) => {
             m((T) => ({
               ...T,
-              [N.id]: x
-            })), s(N.id, x);
+              [N.id]: M
+            })), s(N.id, M);
           } : void 0,
-          onActorAdded: o ? (x) => o(h, x) : void 0,
-          onDragStart: v ? (x, T) => v(N.id, x, T) : void 0,
+          onActorAdded: o ? (M) => o(p, M) : void 0,
+          onDragStart: v ? (M, T) => v(N.id, M, T) : void 0,
           dragging: g?.actorId === N.id
         };
         return [
-          ...j && g.dropIndex === L ? [/* @__PURE__ */ a(Rn, {}, `drop-${h}-${L}`)] : [],
+          ...j && g.dropIndex === O ? [/* @__PURE__ */ a(Rn, {}, `drop-${p}-${O}`)] : [],
           /* @__PURE__ */ a(Ae, { children: l ? l(N, H) : /* @__PURE__ */ a(On, { ...H }) }, N.id),
-          ...j && L === b.length - 1 && g.dropIndex === b.length ? [/* @__PURE__ */ a(Rn, {}, `drop-${h}-end`)] : []
+          ...j && O === b.length - 1 && g.dropIndex === b.length ? [/* @__PURE__ */ a(Rn, {}, `drop-${p}-end`)] : []
         ];
       });
-      return [...C, ...O];
+      return [...C, ...L];
     })]
   });
 }, ga = ({ moduleId: e, collectionId: t, marginLeft: n, dragging: r = !1, ref: i, children: o }) => /* @__PURE__ */ a("div", {
@@ -2042,7 +2042,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
         strokeWidth: "1.5"
       });
     case ne.analysis:
-      return /* @__PURE__ */ k(ee, { children: [
+      return /* @__PURE__ */ x(ee, { children: [
         /* @__PURE__ */ a("circle", {
           cx: "6",
           cy: "6",
@@ -2068,7 +2068,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
         })
       ] });
     case ne.readyForImplementation:
-      return /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ a("circle", {
+      return /* @__PURE__ */ x(ee, { children: [/* @__PURE__ */ a("circle", {
         cx: "6",
         cy: "6",
         r: "5",
@@ -2084,7 +2084,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
         strokeLinecap: "round"
       })] });
     case ne.inProgress:
-      return /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ a("circle", {
+      return /* @__PURE__ */ x(ee, { children: [/* @__PURE__ */ a("circle", {
         cx: "6",
         cy: "6",
         r: "5",
@@ -2098,7 +2098,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
         fill: "none"
       })] });
     case ne.readyForReview:
-      return /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ a("circle", {
+      return /* @__PURE__ */ x(ee, { children: [/* @__PURE__ */ a("circle", {
         cx: "6",
         cy: "6",
         r: "5",
@@ -2111,7 +2111,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
         fill: "currentColor"
       })] });
     case ne.done:
-      return /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ a("circle", {
+      return /* @__PURE__ */ x(ee, { children: [/* @__PURE__ */ a("circle", {
         cx: "6",
         cy: "6",
         r: "5",
@@ -2137,9 +2137,9 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
     children: e
   });
 }, Pe = ({ trigger: e, items: t, align: n = "right", onClose: r }) => {
-  const i = Se(Er), o = Gt(), [s, d] = F(!1), [c, l] = F(), u = A(null), f = A(null), y = i ? i.openMenuId === o : s, p = A(y);
+  const i = Se(Er), o = Gt(), [s, d] = F(!1), [u, l] = F(), c = A(null), f = A(null), y = i ? i.openMenuId === o : s, h = A(y);
   re(() => {
-    p.current && !y && (r?.(), l(void 0)), p.current = y;
+    h.current && !y && (r?.(), l(void 0)), h.current = y;
   }, [y, r]);
   const m = (w) => {
     if (i) {
@@ -2147,18 +2147,18 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
       return;
     }
     d(w);
-  }, g = () => m(!1), v = oe(() => [u, f], []);
+  }, g = () => m(!1), v = oe(() => [c, f], []);
   ze(v, g, y);
-  const h = (w) => w.map((b) => {
+  const p = (w) => w.map((b) => {
     if (b.isSeparator) return /* @__PURE__ */ a("div", { className: "event-modeling-menu-dropdown-separator" }, b.id.toString());
     if (b.isHeader) return /* @__PURE__ */ a("div", {
       className: "event-modeling-menu-dropdown-header",
       children: b.label
     }, b.id.toString());
-    const S = b.items && b.items.length > 0, C = c === b.id.toString();
-    return /* @__PURE__ */ k("div", {
+    const S = b.items && b.items.length > 0, C = u === b.id.toString();
+    return /* @__PURE__ */ x("div", {
       className: "event-modeling-menu-dropdown-item-wrapper",
-      children: [/* @__PURE__ */ k("button", {
+      children: [/* @__PURE__ */ x("button", {
         className: `event-modeling-menu-dropdown-option ${S ? "event-modeling-menu-dropdown-option--has-submenu" : ""}`,
         disabled: b.disabled,
         title: b.tooltip,
@@ -2170,7 +2170,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
             className: "event-modeling-menu-dropdown-option-icon",
             children: b.icon
           }),
-          /* @__PURE__ */ k("span", {
+          /* @__PURE__ */ x("span", {
             className: "event-modeling-menu-dropdown-option-text",
             children: [b.label && /* @__PURE__ */ a("span", {
               className: "event-modeling-menu-dropdown-option-label",
@@ -2191,12 +2191,12 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
         ]
       }), S && C && /* @__PURE__ */ a("div", {
         className: `event-modeling-menu-dropdown-submenu ${n === "right" ? "event-modeling-menu-dropdown-submenu--left" : ""}`,
-        children: h(b.items)
+        children: p(b.items)
       })]
     }, b.id.toString());
   });
-  return /* @__PURE__ */ k("div", {
-    ref: u,
+  return /* @__PURE__ */ x("div", {
+    ref: c,
     className: "event-modeling-menu-dropdown",
     children: [/* @__PURE__ */ a("div", {
       className: "event-modeling-menu-dropdown-trigger",
@@ -2206,14 +2206,14 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
       },
       children: e
     }), /* @__PURE__ */ a(jt, {
-      anchorRef: u,
+      anchorRef: c,
       open: y,
       side: "below",
       align: n,
       children: /* @__PURE__ */ a("div", {
         ref: f,
         className: "event-modeling-menu-dropdown-menu",
-        children: h(t)
+        children: p(t)
       })
     })]
   });
@@ -2264,14 +2264,14 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
 }, $t = (e) => ne[e], tn = ({ status: e, onStatusChanged: t, selectable: n = Dn, unselectableReason: r }) => {
   const { readOnly: i, messages: o } = K(), [s, d] = F(e);
   re(() => d(e), [e]);
-  const c = `${o.statuses.titlePrefix} ${It(s, o)}`, l = `event-modeling-slice-status-icon event-modeling-slice-status-icon--${$t(s)}`;
+  const u = `${o.statuses.titlePrefix} ${It(s, o)}`, l = `event-modeling-slice-status-icon event-modeling-slice-status-icon--${$t(s)}`;
   if (i || !t) return /* @__PURE__ */ a("span", {
     className: `${l} event-modeling-slice-status-icon--readonly`,
-    title: c,
+    title: u,
     "aria-label": It(s, o),
     children: /* @__PURE__ */ a(Pn, { status: s })
   });
-  const u = (y) => xa(s, y, t, d), f = Dn.map((y) => ({
+  const c = (y) => xa(s, y, t, d), f = Dn.map((y) => ({
     id: $t(y),
     label: It(y, o),
     icon: /* @__PURE__ */ a(ka, {
@@ -2280,12 +2280,12 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
     }),
     disabled: !n.includes(y),
     tooltip: n.includes(y) ? void 0 : r,
-    onClick: () => u(y)
+    onClick: () => c(y)
   }));
   return /* @__PURE__ */ a(Pe, {
     trigger: /* @__PURE__ */ a("button", {
       className: l,
-      title: c,
+      title: u,
       "aria-label": o.statuses.change,
       children: /* @__PURE__ */ a(Pn, { status: s })
     }),
@@ -2294,7 +2294,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
   });
 }, ka = ({ status: e, checked: t }) => {
   const n = Ma(e);
-  return /* @__PURE__ */ k("svg", {
+  return /* @__PURE__ */ x("svg", {
     width: "12",
     height: "12",
     viewBox: "0 0 12 12",
@@ -2317,12 +2317,12 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
     })]
   });
 }, _n = ({ moduleId: e, actions: t, onAddModule: n, onAddFeature: r, kind: i }) => {
-  const o = ge(), s = A(null), [d, c] = F();
+  const o = ge(), s = A(null), [d, u] = F();
   if (!t.length && !n && !r) return null;
-  const l = (p) => {
+  const l = (h) => {
     const m = s.current?.getBoundingClientRect();
-    m && p.onActivate(e, m);
-  }, u = (p) => p.map((m) => ({
+    m && h.onActivate(e, m);
+  }, c = (h) => h.map((m) => ({
     id: m.id,
     label: m.label + (m.items ? " ›" : ""),
     description: m.description,
@@ -2331,13 +2331,13 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
     tooltip: m.tooltip,
     isSeparator: m.isSeparator,
     keepOpen: !!m.items,
-    onClick: () => m.items ? c(m.id) : l(m)
+    onClick: () => m.items ? u(m.id) : l(m)
   })), f = d ? [{
     id: "back",
     label: o.features.back,
     keepOpen: !0,
-    onClick: () => c(void 0)
-  }, ...u(t.find((p) => p.id === d)?.items ?? [])] : [
+    onClick: () => u(void 0)
+  }, ...c(t.find((h) => h.id === d)?.items ?? [])] : [
     ...n ? [{
       id: "module",
       label: o.modules.addModule,
@@ -2350,7 +2350,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
       description: o.modules.addFeatureDescription,
       onClick: r
     }] : [],
-    ...u(t)
+    ...c(t)
   ], y = i === "add" ? o.modules.add : o.modules.options;
   return /* @__PURE__ */ a(Pe, {
     trigger: /* @__PURE__ */ a("button", {
@@ -2359,7 +2359,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
       className: "event-modeling-grid-add-button event-modeling-grid-add-button--small event-modeling-grid-add-button--no-circle",
       title: y,
       "aria-label": y,
-      children: i === "add" ? "+" : /* @__PURE__ */ k("svg", {
+      children: i === "add" ? "+" : /* @__PURE__ */ x("svg", {
         width: "13",
         height: "13",
         viewBox: "0 0 14 14",
@@ -2398,7 +2398,7 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
     }),
     items: f,
     align: "right",
-    onClose: () => c(void 0)
+    onClose: () => u(void 0)
   });
 }, Na = ({ suggestion: e }) => {
   const [t, n] = F(!1), r = async () => {
@@ -2411,10 +2411,10 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
       }
     }
   };
-  return /* @__PURE__ */ k("span", {
+  return /* @__PURE__ */ x("span", {
     className: "prediction-ghost",
     "data-suggestion-name": e.name,
-    children: [/* @__PURE__ */ k("button", {
+    children: [/* @__PURE__ */ x("button", {
       type: "button",
       className: "prediction-ghost__accept",
       disabled: t,
@@ -2442,13 +2442,13 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
   fontWeight: 600,
   color: "rgba(255,255,255,0.80)",
   textAlign: "center"
-}, Aa = ({ moduleId: e, name: t, height: n, collapsed: r, onToggleCollapse: i, onAddModule: o, onAddFeature: s, onRenamed: d, validateName: c, status: l, detailsVisible: u = !1, onToggleDetails: f, onDragStart: y, error: p }) => {
-  const m = K(), { showStatuses: g = !0 } = fe(), v = Ir(!m.readOnly && !r ? y : void 0), h = m.readOnly ? void 0 : d, w = m.actions;
-  return /* @__PURE__ */ k(xr, {
+}, Aa = ({ moduleId: e, name: t, height: n, collapsed: r, onToggleCollapse: i, onAddModule: o, onAddFeature: s, onRenamed: d, validateName: u, status: l, detailsVisible: c = !1, onToggleDetails: f, onDragStart: y, error: h }) => {
+  const m = K(), { showStatuses: g = !0 } = fe(), v = Ir(!m.readOnly && !r ? y : void 0), p = m.readOnly ? void 0 : d, w = m.actions;
+  return /* @__PURE__ */ x(xr, {
     variant: "module",
     collapsed: r,
     onToggle: i,
-    leadingContent: !m.readOnly && (w.moduleHeaderLeading ?? []).map((b) => /* @__PURE__ */ k("button", {
+    leadingContent: !m.readOnly && (w.moduleHeaderLeading ?? []).map((b) => /* @__PURE__ */ x("button", {
       type: "button",
       className: "event-modeling-grid-icon-btn",
       title: b.label,
@@ -2461,9 +2461,9 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
       })]
     }, b.id)),
     label: t,
-    onRenameLabel: (b) => h?.(e, b),
-    labelReadOnly: !h,
-    validateLabel: c,
+    onRenameLabel: (b) => p?.(e, b),
+    labelReadOnly: !p,
+    validateLabel: u,
     labelStyle: Ra,
     background: Ia,
     border: Ea,
@@ -2472,11 +2472,11 @@ var Pn = ({ status: e }) => /* @__PURE__ */ a("svg", {
     onPointerDown: v?.onPointerDown,
     onPointerMove: v?.onPointerMove,
     onPointerUp: v?.onPointerUp,
-    error: p,
+    error: h,
     children: [
       g && l !== void 0 && /* @__PURE__ */ a(tn, { status: l }),
       !m.readOnly && f && /* @__PURE__ */ a(Sr, {
-        visible: u,
+        visible: c,
         onToggle: f
       }),
       !m.readOnly && /* @__PURE__ */ a(_n, {
@@ -2513,16 +2513,16 @@ function La(e, t, n) {
   s.current = i;
   const d = A(t);
   d.current = t;
-  const c = A(e);
-  c.current = e;
+  const u = A(e);
+  u.current = e;
   const l = A(n);
   l.current = n;
-  const u = q((y, p, m) => {
+  const c = q((y, h, m) => {
     const g = d.current.findIndex((v) => v.equals(y));
     g !== -1 && o({
       moduleId: y,
       sourceIndex: g,
-      ghostLabel: p,
+      ghostLabel: h,
       ghostWidth: m.width,
       ghost: m.ghost,
       currentX: m.clientX,
@@ -2541,18 +2541,18 @@ function La(e, t, n) {
         currentY: m.clientY,
         dropIndex: Oa(d.current, m.clientX)
       });
-    }, p = () => {
+    }, h = () => {
       const m = s.current;
       if (o(void 0), !m) return;
       const g = Nr(d.current, m.sourceIndex, m.dropIndex);
-      g && l.current?.(c.current, g);
+      g && l.current?.(u.current, g);
     };
-    return window.addEventListener("pointermove", y), window.addEventListener("pointerup", p), () => {
-      window.removeEventListener("pointermove", y), window.removeEventListener("pointerup", p);
+    return window.addEventListener("pointermove", y), window.addEventListener("pointerup", h), () => {
+      window.removeEventListener("pointermove", y), window.removeEventListener("pointerup", h);
     };
   }, [f]), {
     moduleDrag: i,
-    handleModuleDragStart: !r.readOnly && n !== void 0 ? u : void 0
+    handleModuleDragStart: !r.readOnly && n !== void 0 ? c : void 0
   };
 }
 var Ta = (e) => ({
@@ -2565,16 +2565,16 @@ var Ta = (e) => ({
   renameBarriers: /* @__PURE__ */ new Map()
 }), Bt = (e, t) => e.length === t.length && e.every((n, r) => n.id.equals(t[r]));
 function Je(e, t) {
-  const n = e.additions.filter((u) => !t.some((f) => f.id.equals(u.id))), r = new Map([...e.collapseBarriers].filter(([u, f]) => !t.some((y) => y.id.toString() === u && y.collapsed === f))), i = new Map([...e.renameBarriers].filter(([u, f]) => !t.some((y) => y.id.toString() === u && y.name === f))), o = e.orderBarrier && Bt(t, e.orderBarrier) ? void 0 : e.orderBarrier, s = new Map([...e.collapses].filter(([u, f]) => e.collapseBarriers.has(u) || !t.some((y) => y.id.toString() === u && y.collapsed === f))), d = new Map([...e.renames].filter(([u, f]) => e.renameBarriers.has(u) || !t.some((y) => y.id.toString() === u && y.name === f))), c = [...t, ...n].map((u) => ({
-    ...u,
-    collapsed: s.get(u.id.toString()) ?? u.collapsed,
-    name: d.get(u.id.toString()) ?? u.name
-  })), l = e.order ? Ar(c, e.order) : c;
+  const n = e.additions.filter((c) => !t.some((f) => f.id.equals(c.id))), r = new Map([...e.collapseBarriers].filter(([c, f]) => !t.some((y) => y.id.toString() === c && y.collapsed === f))), i = new Map([...e.renameBarriers].filter(([c, f]) => !t.some((y) => y.id.toString() === c && y.name === f))), o = e.orderBarrier && Bt(t, e.orderBarrier) ? void 0 : e.orderBarrier, s = new Map([...e.collapses].filter(([c, f]) => e.collapseBarriers.has(c) || !t.some((y) => y.id.toString() === c && y.collapsed === f))), d = new Map([...e.renames].filter(([c, f]) => e.renameBarriers.has(c) || !t.some((y) => y.id.toString() === c && y.name === f))), u = [...t, ...n].map((c) => ({
+    ...c,
+    collapsed: s.get(c.id.toString()) ?? c.collapsed,
+    name: d.get(c.id.toString()) ?? c.name
+  })), l = e.order ? Ar(u, e.order) : u;
   return {
     snapshot: t,
     modules: l,
     additions: n,
-    order: e.order && !e.orderBarrier && Bt(t, l.map((u) => u.id)) ? void 0 : e.order,
+    order: e.order && !e.orderBarrier && Bt(t, l.map((c) => c.id)) ? void 0 : e.order,
     collapses: s,
     renames: d,
     collapseBarriers: r,
@@ -2659,30 +2659,30 @@ async function Et(e, t, n) {
   }
   r !== !0 && t();
 }
-function Ha({ collectionId: e, initialModules: t, onAddModule: n, onModulesReordered: r, onCollapseChanged: i, onRenameModule: o, onPersistenceError: s, renderModule: d, onModulesChanged: c }) {
-  const { readOnly: l } = K(), u = q((D) => {
+function Ha({ collectionId: e, initialModules: t, onAddModule: n, onModulesReordered: r, onCollapseChanged: i, onRenameModule: o, onPersistenceError: s, renderModule: d, onModulesChanged: u }) {
+  const { readOnly: l } = K(), c = q((D) => {
     if (s) s(D);
     else throw D;
-  }, [s]), f = A(Ta(t)), [y, p] = F(f.current), m = A(!1), [g, v] = F(!1), h = A(/* @__PURE__ */ new Set()), [w, b] = F(/* @__PURE__ */ new Set()), S = A(!1), [C, O] = F(!1), N = (D, z) => {
-    z ? h.current.add(D) : h.current.delete(D), b(new Set(h.current));
-  }, L = q((D) => {
+  }, [s]), f = A(Ta(t)), [y, h] = F(f.current), m = A(!1), [g, v] = F(!1), p = A(/* @__PURE__ */ new Set()), [w, b] = F(/* @__PURE__ */ new Set()), S = A(!1), [C, L] = F(!1), N = (D, z) => {
+    z ? p.current.add(D) : p.current.delete(D), b(new Set(p.current));
+  }, O = q((D) => {
     const z = D(f.current);
-    f.current = z, p(z), c?.(z.modules);
-  }, [c]);
+    f.current = z, h(z), u?.(z.modules);
+  }, [u]);
   re(() => {
-    t !== f.current.snapshot && L((D) => Je(D, t));
-  }, [t, L]);
+    t !== f.current.snapshot && O((D) => Je(D, t));
+  }, [t, O]);
   const j = q(async () => {
     if (!(l || !n || m.current)) {
       m.current = !0, v(!0);
       try {
         const D = await n();
-        D && L((z) => Je({
+        D && O((z) => Je({
           ...z,
           additions: [...z.additions, D]
         }, z.snapshot));
       } catch (D) {
-        u(D);
+        c(D);
       } finally {
         m.current = !1, v(!1);
       }
@@ -2690,29 +2690,29 @@ function Ha({ collectionId: e, initialModules: t, onAddModule: n, onModulesReord
   }, [
     l,
     n,
-    u,
-    L
+    c,
+    O
   ]), H = q(async (D) => {
     const z = D.id.toString();
-    if (!i || h.current.has(z)) return;
+    if (!i || p.current.has(z)) return;
     N(z, !0);
     const I = !D.collapsed;
-    L((M) => Pa(M, D.id, I));
+    O((k) => Pa(k, D.id, I));
     try {
-      await Et(() => i(D.id, I), () => L((M) => Fa(M, D.id)), u);
+      await Et(() => i(D.id, I), () => O((k) => Fa(k, D.id)), c);
     } finally {
       N(z, !1);
     }
   }, [
     i,
-    u,
-    L
-  ]), x = q(async (D, z) => {
+    c,
+    O
+  ]), M = q(async (D, z) => {
     const I = D.id.toString();
-    if (!(l || !o || h.current.has(I))) {
-      N(I, !0), L((M) => Da(M, D.id, z));
+    if (!(l || !o || p.current.has(I))) {
+      N(I, !0), O((k) => Da(k, D.id, z));
       try {
-        await Et(() => o(D.id, z), () => L((M) => $a(M, D.id)), u);
+        await Et(() => o(D.id, z), () => O((k) => $a(k, D.id)), c);
       } finally {
         N(I, !1);
       }
@@ -2720,30 +2720,30 @@ function Ha({ collectionId: e, initialModules: t, onAddModule: n, onModulesReord
   }, [
     l,
     o,
-    u,
-    L
+    c,
+    O
   ]), T = q(async (D, z) => {
     if (l || !r || S.current) return;
-    S.current = !0, O(!0);
+    S.current = !0, L(!0);
     const I = f.current.order;
-    L((M) => _a(M, z));
+    O((k) => _a(k, z));
     try {
-      await Et(() => r(z), () => L((M) => Ba(M, I)), u);
+      await Et(() => r(z), () => O((k) => Ba(k, I)), c);
     } finally {
-      S.current = !1, O(!1);
+      S.current = !1, L(!1);
     }
   }, [
-    L,
+    O,
     r,
-    u,
+    c,
     l
   ]), { moduleDrag: W, handleModuleDragStart: X } = La(e, y.modules.map((D) => D.id), r && !C ? T : void 0);
-  return /* @__PURE__ */ k(ee, { children: [
+  return /* @__PURE__ */ x(ee, { children: [
     /* @__PURE__ */ a(Mr, {
       drag: W,
       headerHeight: Z.headerHeight
     }),
-    y.modules.map((D, z) => /* @__PURE__ */ k("div", {
+    y.modules.map((D, z) => /* @__PURE__ */ x("div", {
       style: { display: "contents" },
       children: [W?.dropIndex === z && /* @__PURE__ */ a(Ln, {}), d(D, {
         index: z,
@@ -2756,7 +2756,7 @@ function Ha({ collectionId: e, initialModules: t, onAddModule: n, onModulesReord
           H(D);
         } : void 0,
         onRenamed: !l && !w.has(D.id.toString()) && o ? (I) => {
-          x(D, I);
+          M(D, I);
         } : void 0
       })]
     }, D.id.toString())),
@@ -2782,16 +2782,16 @@ var za = ({ width: e, collapsed: t, children: n }) => /* @__PURE__ */ a("div", {
     className: "event-modeling-module-placeholder__feature",
     style: { width: r }
   }, i))
-}), qa = ({ moduleId: e, collectionId: t, index: n, width: r, collapsed: i, dragging: o, frameRef: s, header: d, template: c, content: l }) => /* @__PURE__ */ k(ga, {
+}), qa = ({ moduleId: e, collectionId: t, index: n, width: r, collapsed: i, dragging: o, frameRef: s, header: d, template: u, content: l }) => /* @__PURE__ */ x(ga, {
   ref: s,
   moduleId: e,
   collectionId: n === 0 ? t : void 0,
   marginLeft: n ? Z.sliceGap : 0,
   dragging: o,
-  children: [/* @__PURE__ */ k(za, {
+  children: [/* @__PURE__ */ x(za, {
     width: r,
     collapsed: i,
-    children: [d, !i && c]
+    children: [d, !i && u]
   }), i ? /* @__PURE__ */ a("div", { style: { width: Z.collapsedModuleWidth } }) : l]
 }), Ze = (e) => {
   const t = (n, r, i) => i.has(r.id.toString()) ? [] : (i.add(r.id.toString()), [...r.slices.map((o) => ({
@@ -2823,10 +2823,10 @@ var za = ({ width: e, collapsed: t, children: n }) => /* @__PURE__ */ a("div", {
   const t = /* @__PURE__ */ new Set(), n = (r) => t.has(r.id.toString()) ? [] : (t.add(r.id.toString()), [r, ...r.subFeatures.flatMap(n)]);
   return e.flatMap(n);
 }, Dr = (e, t) => Wa(Pr(t).map(Oe).filter((n) => n > 0), e), _r = (e) => e.length === 0 ? 0 : 1 + Math.max(...e.map((t) => _r(t.subFeatures))), Ga = (e, t) => {
-  const n = nn(e), r = Lr(e, t), i = Ze(e), o = e.modules.map((l) => l.collapsed ? Z.collapsedModuleWidth : Dr(l.name, l.features)), s = o.reduce((l, u, f) => l + (f ? Z.sliceGap : 0) + u, 0), d = Math.max(1, ...e.modules.map((l) => _r(l.features))), c = n.reduce((l, u) => l + r[u], 0);
+  const n = nn(e), r = Lr(e, t), i = Ze(e), o = e.modules.map((l) => l.collapsed ? Z.collapsedModuleWidth : Dr(l.name, l.features)), s = o.reduce((l, c, f) => l + (f ? Z.sliceGap : 0) + c, 0), d = Math.max(1, ...e.modules.map((l) => _r(l.features))), u = n.reduce((l, c) => l + r[c], 0);
   return {
     width: (i.length ? 56 : 0) + s,
-    height: Z.headerHeight * (1 + d) + 28 + c,
+    height: Z.headerHeight * (1 + d) + 28 + u,
     moduleWidths: o
   };
 }, Fr = () => {
@@ -2929,13 +2929,13 @@ function ja(e) {
   const r = (i, o) => {
     const s = n.get(o);
     if (!s || s.sliceId === i.id) return;
-    const d = t.get(i.id), c = t.get(s.sliceId);
-    d.connectedSliceIds.add(s.sliceId), c.connectedSliceIds.add(i.id), d.consumed.some((l) => l.eventId === o && l.sliceId === s.sliceId) || d.consumed.push({
+    const d = t.get(i.id), u = t.get(s.sliceId);
+    d.connectedSliceIds.add(s.sliceId), u.connectedSliceIds.add(i.id), d.consumed.some((l) => l.eventId === o && l.sliceId === s.sliceId) || d.consumed.push({
       eventId: o,
       eventName: s.eventName,
       sliceId: s.sliceId,
       sliceName: s.sliceName
-    }), c.produced.some((l) => l.eventId === o && l.sliceId === i.id) || c.produced.push({
+    }), u.produced.some((l) => l.eventId === o && l.sliceId === i.id) || u.produced.push({
       eventId: o,
       eventName: s.eventName,
       sliceId: i.id,
@@ -2989,9 +2989,9 @@ function Ja(e, t) {
 }
 var Za = ({ sliceType: e, recomputeKey: t }) => {
   const n = A(null), [r, i] = F([]), o = `flow-arrow-${Gt().replace(/:/g, "")}`, s = q(() => {
-    const u = n.current, f = u?.parentElement;
-    if (!u || !f) return;
-    const y = u.getBoundingClientRect(), p = u.clientWidth || y.width, m = p ? y.width / p : 1, g = (w) => {
+    const c = n.current, f = c?.parentElement;
+    if (!c || !f) return;
+    const y = c.getBoundingClientRect(), h = c.clientWidth || y.width, m = h ? y.width / h : 1, g = (w) => {
       const b = w.getBoundingClientRect();
       return {
         x: (b.left - y.left) / m,
@@ -2999,31 +2999,31 @@ var Za = ({ sliceType: e, recomputeKey: t }) => {
         width: b.width / m,
         height: b.height / m
       };
-    }, v = Xa(e).map((w) => Array.from(f.querySelectorAll(`[data-flow-node="${w}"]`)).map(g)).filter((w) => w.length > 0), h = [];
-    for (let w = 0; w < v.length - 1; w++) for (const b of v[w]) for (const S of v[w + 1]) h.push(Ja(b, S));
-    i((w) => w.length === h.length && w.every((b, S) => b === h[S]) ? w : h);
-  }, [e]), d = A(0), c = A(!1), l = q(() => {
+    }, v = Xa(e).map((w) => Array.from(f.querySelectorAll(`[data-flow-node="${w}"]`)).map(g)).filter((w) => w.length > 0), p = [];
+    for (let w = 0; w < v.length - 1; w++) for (const b of v[w]) for (const S of v[w + 1]) p.push(Ja(b, S));
+    i((w) => w.length === p.length && w.every((b, S) => b === p[S]) ? w : p);
+  }, [e]), d = A(0), u = A(!1), l = q(() => {
     if (ht.isActive) {
-      c.current = !0;
+      u.current = !0;
       return;
     }
     d.current || (d.current = requestAnimationFrame(() => {
       d.current = 0, s();
     }));
   }, [s]);
-  return re(() => () => cancelAnimationFrame(d.current), []), re(() => ht.subscribe((u) => {
-    u || !c.current || (c.current = !1, l());
+  return re(() => () => cancelAnimationFrame(d.current), []), re(() => ht.subscribe((c) => {
+    c || !u.current || (u.current = !1, l());
   }), [l]), Ut(() => {
     s();
   }, [s, t]), re(() => {
-    const u = n.current, f = u?.parentElement;
-    if (!u || !f) return;
-    const y = new ResizeObserver(() => l()), p = () => {
+    const c = n.current, f = c?.parentElement;
+    if (!c || !f) return;
+    const y = new ResizeObserver(() => l()), h = () => {
       y.disconnect(), y.observe(f), f.querySelectorAll("[data-flow-node]").forEach((g) => y.observe(g));
     };
-    p();
+    h();
     const m = new MutationObserver((g) => {
-      g.every((v) => u.contains(v.target)) || (p(), l());
+      g.every((v) => c.contains(v.target)) || (h(), l());
     });
     return m.observe(f, {
       childList: !0,
@@ -3039,7 +3039,7 @@ var Za = ({ sliceType: e, recomputeKey: t }) => {
     ref: n,
     className: "event-modeling-grid-connections",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ k("svg", {
+    children: /* @__PURE__ */ x("svg", {
       className: "event-modeling-grid-connections__svg",
       width: "100%",
       height: "100%",
@@ -3055,8 +3055,8 @@ var Za = ({ sliceType: e, recomputeKey: t }) => {
           d: "M 0 0 L 8 4.5 L 0 9 z",
           className: "event-modeling-grid-connections__arrow"
         })
-      }) }), r.map((u, f) => /* @__PURE__ */ a("path", {
-        d: u,
+      }) }), r.map((c, f) => /* @__PURE__ */ a("path", {
+        d: c,
         className: "event-modeling-grid-connections__line",
         markerEnd: `url(#${o})`
       }, f))]
@@ -3081,9 +3081,9 @@ function ns(e) {
     r();
     const d = [o];
     o.classList.add(Rt);
-    const c = new Set(e ?? []), l = o.dataset.sliceId;
-    l && c.add(l);
-    for (const u of c) s.querySelectorAll(ts(u)).forEach((f) => {
+    const u = new Set(e ?? []), l = o.dataset.sliceId;
+    l && u.add(l);
+    for (const c of u) s.querySelectorAll(ts(c)).forEach((f) => {
       f !== o && (f.classList.add(Rt), d.push(f));
     });
     s.classList.add(Fn), n.current = {
@@ -3110,18 +3110,18 @@ var rs = ({ featureId: e, moduleId: t, enabled: n, dragging: r = !1, children: i
     transition: "opacity 0.15s"
   },
   children: i
-}), is = ({ featureId: e, moduleId: t, enabled: n, collapsed: r, rowCollapsed: i, width: o, headerVisibility: s, header: d, screenTemplate: c, slices: l }) => /* @__PURE__ */ k(rs, {
+}), is = ({ featureId: e, moduleId: t, enabled: n, collapsed: r, rowCollapsed: i, width: o, headerVisibility: s, header: d, screenTemplate: u, slices: l }) => /* @__PURE__ */ x(rs, {
   featureId: e,
   moduleId: t,
   enabled: n,
-  children: [/* @__PURE__ */ k("div", {
+  children: [/* @__PURE__ */ x("div", {
     className: `event-modeling-grid-header-cell-wrapper${r ? " event-modeling-grid-header-cell-wrapper--feature-collapsed" : ""}`,
     style: {
       width: s === "hidden" ? 0 : o,
       visibility: s === "hidden" ? "hidden" : "visible",
       overflow: s === "visible" && !r ? "visible" : "hidden"
     },
-    children: [s === "visible" ? d : s === "hidden" ? /* @__PURE__ */ a("div", { style: { height: Z.headerHeight } }) : null, !r && c]
+    children: [s === "visible" ? d : s === "hidden" ? /* @__PURE__ */ a("div", { style: { height: Z.headerHeight } }) : null, !r && u]
   }), /* @__PURE__ */ a("div", {
     className: i ? "event-modeling-feature-grid-slices--row-collapsed" : s === "visible" ? "event-modeling-feature-grid-slices--header-visible" : void 0,
     children: l
@@ -3153,43 +3153,43 @@ function ds(e, t, n) {
   s.current = i;
   const d = A(t);
   d.current = t;
-  const c = A(n);
-  c.current = n;
-  const l = q((f, y, p) => {
+  const u = A(n);
+  u.current = n;
+  const l = q((f, y, h) => {
     const m = d.current.findIndex((g) => g.equals(f));
     m !== -1 && o({
       featureId: f,
       moduleId: e,
       sourceIndex: m,
       ghostLabel: y,
-      ghostWidth: p.width,
-      ghost: p.ghost,
-      currentX: p.clientX,
-      currentY: p.clientY,
+      ghostWidth: h.width,
+      ghost: h.ghost,
+      currentX: h.clientX,
+      currentY: h.clientY,
       dropIndex: m,
-      headerY: p.headerY,
-      zoom: p.zoom
+      headerY: h.headerY,
+      zoom: h.zoom
     });
-  }, [e]), u = i !== void 0;
+  }, [e]), c = i !== void 0;
   return re(() => {
-    if (!u) return;
-    const f = (p) => {
+    if (!c) return;
+    const f = (h) => {
       o((m) => m && {
         ...m,
-        currentX: p.clientX,
-        currentY: p.clientY,
-        dropIndex: ls(m.moduleId, p.clientX)
+        currentX: h.clientX,
+        currentY: h.clientY,
+        dropIndex: ls(m.moduleId, h.clientX)
       });
     }, y = () => {
-      const p = s.current;
-      if (o(void 0), !p) return;
-      const m = Nr(d.current, p.sourceIndex, p.dropIndex);
-      m && c.current?.(p.moduleId, m);
+      const h = s.current;
+      if (o(void 0), !h) return;
+      const m = Nr(d.current, h.sourceIndex, h.dropIndex);
+      m && u.current?.(h.moduleId, m);
     };
     return window.addEventListener("pointermove", f), window.addEventListener("pointerup", y), () => {
       window.removeEventListener("pointermove", f), window.removeEventListener("pointerup", y);
     };
-  }, [u]), {
+  }, [c]), {
     featureDrag: i,
     handleFeatureDragStart: !r.readOnly && n !== void 0 ? l : void 0
   };
@@ -3201,13 +3201,13 @@ function cs() {
     register: q((r, i) => {
       const o = `${i}:${r}`, s = n.current.get(o);
       if (s) return s;
-      const d = (c) => {
+      const d = (u) => {
         t((l) => {
-          const u = l.get(r);
-          if ((u?.[i] ?? null) === c) return l;
+          const c = l.get(r);
+          if ((c?.[i] ?? null) === u) return l;
           const f = new Map(l), y = {
-            ...u,
-            [i]: c ?? void 0
+            ...c,
+            [i]: u ?? void 0
           };
           return !y.header && !y.column ? f.delete(r) : f.set(r, y), f;
         });
@@ -3243,7 +3243,7 @@ function Br(e, t, n) {
   })) : [...e, t];
 }
 function Ht(e, t) {
-  const n = e.pendingAdditions.filter(({ feature: c }) => !an(t, c.id)), r = n.reduce((c, l) => Br(c, l.feature, l.parentId), t), i = new Map([...e.pendingRenames].filter(([c, l]) => !Hr(t, c, l))), o = [...i].reduce((c, [l, u]) => ln(c, l, u), r), s = new Map([...e.pendingCollapses].filter(([c, l]) => !Wr(t, c, l))), d = [...s].reduce((c, [l, u]) => sn(c, l, u), o);
+  const n = e.pendingAdditions.filter(({ feature: u }) => !an(t, u.id)), r = n.reduce((u, l) => Br(u, l.feature, l.parentId), t), i = new Map([...e.pendingRenames].filter(([u, l]) => !Hr(t, u, l))), o = [...i].reduce((u, [l, c]) => ln(u, l, c), r), s = new Map([...e.pendingCollapses].filter(([u, l]) => !Wr(t, u, l))), d = [...s].reduce((u, [l, c]) => sn(u, l, c), o);
   return {
     snapshot: t,
     features: e.order ? Wt(d, e.order) : d,
@@ -3307,20 +3307,20 @@ function Wt(e, t) {
 function zr(e, t) {
   return t.add(e.id.toString()), e.subFeatures.flatMap((n) => t.has(n.id.toString()) ? [] : [n, ...zr(n, t)]);
 }
-function gs({ ref: e, initialFeatures: t, moduleId: n, widthOf: r, isCollapsed: i, forceCollapsed: o = !1, onCollapseChanged: s, occupiesColumn: d, renderHeader: c, renderColumn: l, renderFeatureBoundary: u, onAddFeature: f, onRenameFeature: y, onFeaturesReordered: p, onFeaturesChanged: m }) {
-  const { readOnly: g, messages: v } = K(), { targets: h, register: w } = cs(), b = A(us(t)), [S, C] = F(b.current), O = A(!1), N = A(/* @__PURE__ */ new Set()), L = q((R) => {
+function gs({ ref: e, initialFeatures: t, moduleId: n, widthOf: r, isCollapsed: i, forceCollapsed: o = !1, onCollapseChanged: s, occupiesColumn: d, renderHeader: u, renderColumn: l, renderFeatureBoundary: c, onAddFeature: f, onRenameFeature: y, onFeaturesReordered: h, onFeaturesChanged: m }) {
+  const { readOnly: g, messages: v } = K(), { targets: p, register: w } = cs(), b = A(us(t)), [S, C] = F(b.current), L = A(!1), N = A(/* @__PURE__ */ new Set()), O = q((R) => {
     const G = R(b.current);
     G !== b.current && (b.current = G, C(G), m?.(G.features));
   }, [m]);
   re(() => {
-    t !== b.current.snapshot && L((R) => Ht(R, t));
-  }, [t, L]);
+    t !== b.current.snapshot && O((R) => Ht(R, t));
+  }, [t, O]);
   const j = q(async (R, G) => {
-    if (!(g || !f || O.current)) {
-      O.current = !0;
+    if (!(g || !f || L.current)) {
+      L.current = !0;
       try {
         const _ = await f(R, G);
-        _ && L((J) => ({
+        _ && O((J) => ({
           ...J,
           features: Br(J.features, _, G),
           pendingAdditions: [...J.pendingAdditions, {
@@ -3329,31 +3329,31 @@ function gs({ ref: e, initialFeatures: t, moduleId: n, widthOf: r, isCollapsed:
           }]
         }));
       } finally {
-        O.current = !1;
+        L.current = !1;
       }
     }
   }, [
     g,
     f,
-    L
+    O
   ]);
   tt(e, () => ({
     addFeature: (R) => j(R),
     addSubFeature: (R, G) => j(G, R),
-    updateFeature: (R, G) => L((_) => ({
+    updateFeature: (R, G) => O((_) => ({
       ..._,
       features: on(_.features, R, G)
     }))
-  }), [j, L]);
-  const H = q((R) => L((G) => ms(G, R)), [L]), x = q((R, G) => {
+  }), [j, O]);
+  const H = q((R) => O((G) => ms(G, R)), [O]), M = q((R, G) => {
     const _ = R.toString();
-    !y || g || N.current.has(_) || (N.current.add(_), L((J) => ({
+    !y || g || N.current.has(_) || (N.current.add(_), O((J) => ({
       ...J,
       features: ln(J.features, _, G),
       pendingRenames: new Map(J.pendingRenames).set(_, G)
     })), y(R, G).catch(() => H(R)).finally(() => N.current.delete(_)));
   }, [
-    L,
+    O,
     y,
     g,
     H
@@ -3363,24 +3363,24 @@ function gs({ ref: e, initialFeatures: t, moduleId: n, widthOf: r, isCollapsed:
     S.pendingCollapses
   ]), W = q((R) => {
     const G = !T(R);
-    L((_) => ({
+    O((_) => ({
       ..._,
       features: sn(_.features, R.id.toString(), G),
       pendingCollapses: new Map(_.pendingCollapses).set(R.id.toString(), G)
     })), s?.(R.id, G);
   }, [
-    L,
+    O,
     T,
     s
   ]), X = q((R) => {
-    L((G) => {
+    O((G) => {
       const _ = new Map(G.pendingCollapses);
       return _.delete(R.id.toString()), Ht({
         ...G,
         pendingCollapses: _
       }, G.snapshot);
     }), s?.(R.id, R.collapsed);
-  }, [L, s]), D = S.features, z = oe(() => D.map((R) => {
+  }, [O, s]), D = S.features, z = oe(() => D.map((R) => {
     const G = zr(R, /* @__PURE__ */ new Set());
     return {
       feature: R,
@@ -3391,59 +3391,59 @@ function gs({ ref: e, initialFeatures: t, moduleId: n, widthOf: r, isCollapsed:
     D,
     d,
     r
-  ]), I = z.flatMap((R) => [R.feature, ...R.children]).filter(d), M = new Set(z.filter((R) => R.children.length).map((R) => R.feature.id.toString())), E = new Set(z.flatMap((R) => R.children.map((G) => G.id.toString()))), $ = D.map((R) => R.id), Y = q((R, G) => {
-    L((_) => ({
+  ]), I = z.flatMap((R) => [R.feature, ...R.children]).filter(d), k = new Set(z.filter((R) => R.children.length).map((R) => R.feature.id.toString())), E = new Set(z.flatMap((R) => R.children.map((G) => G.id.toString()))), $ = D.map((R) => R.id), Y = q((R, G) => {
+    O((_) => ({
       ..._,
       features: Wt(_.features, G),
       order: G
-    })), p?.(Wt(b.current.features, G));
-  }, [L, p]), { featureDrag: Q, handleFeatureDragStart: P } = ds(n, $, p ? Y : void 0), V = (R) => ({
+    })), h?.(Wt(b.current.features, G));
+  }, [O, h]), { featureDrag: Q, handleFeatureDragStart: P } = ds(n, $, h ? Y : void 0), V = (R) => ({
     collapsed: T(R),
     dragging: Q?.featureId.equals(R.id) ?? !1,
     onDragStart: P,
     addSubFeature: !g && f ? (G) => {
       j(G, R.id);
     } : void 0,
-    onRenamed: !g && y ? (G) => x(R.id, G) : void 0,
+    onRenamed: !g && y ? (G) => M(R.id, G) : void 0,
     onToggleCollapse: s ? () => W(R) : void 0,
     onCollapseFailed: s ? () => X(R) : void 0
   }), te = (R) => {
-    const G = M.has(R.id.toString()) ? "hidden" : E.has(R.id.toString()) ? "visible" : "none";
+    const G = k.has(R.id.toString()) ? "hidden" : E.has(R.id.toString()) ? "visible" : "none";
     return {
       ...V(R),
       headerVisibility: G
     };
   };
-  return D.length ? /* @__PURE__ */ k(ee, { children: [
+  return D.length ? /* @__PURE__ */ x(ee, { children: [
     /* @__PURE__ */ a(Mr, {
       drag: Q,
       headerHeight: Z.headerHeight
     }),
-    /* @__PURE__ */ k("div", {
+    /* @__PURE__ */ x("div", {
       className: "event-modeling-features-area",
       children: [/* @__PURE__ */ a("div", {
         className: "event-modeling-features-area__headers",
         style: { columnGap: Z.sliceGap },
         children: z.map((R, G) => /* @__PURE__ */ a(as, {
-          ref: u ? w(R.feature.id.toString(), "header") : void 0,
+          ref: c ? w(R.feature.id.toString(), "header") : void 0,
           width: R.width,
           collapsed: T(R.feature),
           dropEdge: ss(Q?.dropIndex, G, z.length),
-          children: !u && c(R.feature, V(R.feature))
+          children: !c && u(R.feature, V(R.feature))
         }, R.feature.id.toString()))
       }), /* @__PURE__ */ a("div", {
         className: "event-modeling-features-area__columns",
         style: { columnGap: Z.sliceGap },
         children: I.map((R) => /* @__PURE__ */ a("div", {
           className: "event-modeling-features-area__column",
-          ref: u ? w(R.id.toString(), "column") : void 0,
-          children: !u && l(R, te(R))
+          ref: c ? w(R.id.toString(), "column") : void 0,
+          children: !c && l(R, te(R))
         }, R.id.toString()))
       })]
     }),
-    u && z.flatMap((R) => [R.feature, ...R.children]).map((R) => {
-      const G = h.get(R.id.toString());
-      return !G || !E.has(R.id.toString()) && !G.header || d(R) && !G.column ? null : /* @__PURE__ */ a(Ae, { children: u(R, /* @__PURE__ */ k(ee, { children: [!E.has(R.id.toString()) && G.header && He(c(R, V(R)), G.header), G.column && He(l(R, te(R)), G.column)] })) }, R.id.toString());
+    c && z.flatMap((R) => [R.feature, ...R.children]).map((R) => {
+      const G = p.get(R.id.toString());
+      return !G || !E.has(R.id.toString()) && !G.header || d(R) && !G.column ? null : /* @__PURE__ */ a(Ae, { children: c(R, /* @__PURE__ */ x(ee, { children: [!E.has(R.id.toString()) && G.header && He(u(R, V(R)), G.header), G.column && He(l(R, te(R)), G.column)] })) }, R.id.toString());
     })
   ] }) : /* @__PURE__ */ a("div", {
     className: "event-modeling-module-empty-placeholder",
@@ -3462,7 +3462,7 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
 }), hs = ({ type: e }) => {
   switch (e) {
     case B.stateChange:
-      return /* @__PURE__ */ k(ee, { children: [
+      return /* @__PURE__ */ x(ee, { children: [
         /* @__PURE__ */ a("rect", {
           x: "3",
           y: "3",
@@ -3503,7 +3503,7 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
         /* @__PURE__ */ a("polyline", { points: "10,16 12,17 14,16" })
       ] });
     case B.stateView:
-      return /* @__PURE__ */ k(ee, { children: [
+      return /* @__PURE__ */ x(ee, { children: [
         /* @__PURE__ */ a("rect", {
           x: "3",
           y: "3",
@@ -3553,7 +3553,7 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
         /* @__PURE__ */ a("polyline", { points: "9,14 12,10 15,14" })
       ] });
     case B.automation:
-      return /* @__PURE__ */ k(ee, { children: [
+      return /* @__PURE__ */ x(ee, { children: [
         /* @__PURE__ */ a("circle", {
           cx: "12",
           cy: "8",
@@ -3597,7 +3597,7 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
         })
       ] });
     case B.translator:
-      return /* @__PURE__ */ k(ee, { children: [
+      return /* @__PURE__ */ x(ee, { children: [
         /* @__PURE__ */ a("circle", {
           cx: "12",
           cy: "7",
@@ -3685,7 +3685,7 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
   onClick: () => t(n)
 })), fs = ({ sliceType: e }) => {
   const { messages: t } = K();
-  return /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ a("strong", { children: Vr(e, t) }), /* @__PURE__ */ a("span", {
+  return /* @__PURE__ */ x(ee, { children: [/* @__PURE__ */ a("strong", { children: Vr(e, t) }), /* @__PURE__ */ a("span", {
     className: "event-modeling-grid-slice-type-explanation",
     children: qr(e, t)
   })] });
@@ -3702,8 +3702,8 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
     align: "right"
   });
 }, ys = ({ featureId: e, onAddSubFeature: t, onAddSlice: n, actions: r = [] }) => {
-  const i = ge(), o = A(null), [s, d] = F("main"), [c, l] = F(), u = r.filter((v) => !v.when || v.when(e));
-  if (!t && !n && u.length === 0) return null;
+  const i = ge(), o = A(null), [s, d] = F("main"), [u, l] = F(), c = r.filter((v) => !v.when || v.when(e));
+  if (!t && !n && c.length === 0) return null;
   const f = [
     ...n ? [{
       id: "slice",
@@ -3718,7 +3718,7 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
       description: i.features.addSubFeatureDescription,
       onClick: t
     }] : [],
-    ...u.map((v) => ({
+    ...c.map((v) => ({
       id: v.id,
       label: v.label + (v.items ? " ›" : ""),
       description: v.description,
@@ -3733,15 +3733,15 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
     }))
   ];
   function y(v) {
-    const h = o.current?.getBoundingClientRect();
-    h && v.onActivate(e, h);
+    const p = o.current?.getBoundingClientRect();
+    p && v.onActivate(e, p);
   }
-  const p = {
+  const h = {
     id: "back",
     label: i.features.back,
     keepOpen: !0,
     onClick: () => d("main")
-  }, m = n ? [p, ...Gr(i, n)] : [p], g = [p, ...(u.find((v) => v.id === c)?.items ?? []).filter((v) => !v.when || v.when(e)).map((v) => ({
+  }, m = n ? [h, ...Gr(i, n)] : [h], g = [h, ...(c.find((v) => v.id === u)?.items ?? []).filter((v) => !v.when || v.when(e)).map((v) => ({
     id: v.id,
     label: v.label,
     icon: v.icon,
@@ -3791,27 +3791,27 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
     items: o,
     align: "right"
   });
-}, Ss = "rgba(160,140,230,0.10)", Cs = "1px solid rgba(160,140,230,0.22)", xs = ({ featureId: e, name: t, height: n, collapsed: r, onToggleCollapse: i, onRenamed: o, status: s, detailsVisible: d = !1, onToggleDetails: c, dragging: l = !1, onDragStart: u, error: f, onAddSubFeature: y, onAddSlice: p }) => {
-  const m = K(), { showStatuses: g = !0 } = fe(), v = Ir(!m.readOnly && !r ? u : void 0), h = m.readOnly ? void 0 : o, w = (m.actions.featureHeader ?? []).filter((C) => !C.when || C.when(e)), b = (m.actions.featureHeaderLeading ?? []).filter((C) => !C.when || C.when(e)), S = m.actions.featureHeaderMenu ?? [];
+}, Ss = "rgba(160,140,230,0.10)", Cs = "1px solid rgba(160,140,230,0.22)", xs = ({ featureId: e, name: t, height: n, collapsed: r, onToggleCollapse: i, onRenamed: o, status: s, detailsVisible: d = !1, onToggleDetails: u, dragging: l = !1, onDragStart: c, error: f, onAddSubFeature: y, onAddSlice: h }) => {
+  const m = K(), { showStatuses: g = !0 } = fe(), v = Ir(!m.readOnly && !r ? c : void 0), p = m.readOnly ? void 0 : o, w = (m.actions.featureHeader ?? []).filter((C) => !C.when || C.when(e)), b = (m.actions.featureHeaderLeading ?? []).filter((C) => !C.when || C.when(e)), S = m.actions.featureHeaderMenu ?? [];
   return /* @__PURE__ */ a(xr, {
     variant: "feature",
     collapsed: r,
     onToggle: i,
-    leadingContent: !m.readOnly && b.map((C) => /* @__PURE__ */ k("button", {
+    leadingContent: !m.readOnly && b.map((C) => /* @__PURE__ */ x("button", {
       type: "button",
       className: "event-modeling-grid-icon-btn",
       title: C.disabled ? C.disabledTooltip ?? C.tooltip : C.tooltip,
       "aria-label": C.tooltip,
       disabled: C.disabled,
-      onClick: (O) => C.onActivate(e, O.currentTarget.getBoundingClientRect()),
+      onClick: (L) => C.onActivate(e, L.currentTarget.getBoundingClientRect()),
       children: [C.icon, C.indicator && /* @__PURE__ */ a("span", {
         className: "event-modeling-feature-chat-dot",
         "aria-hidden": "true"
       })]
     }, C.tooltip)),
     label: t,
-    onRenameLabel: (C) => h?.(e, C),
-    labelReadOnly: !h,
+    onRenameLabel: (C) => p?.(e, C),
+    labelReadOnly: !p,
     background: Ss,
     border: Cs,
     height: n,
@@ -3827,11 +3827,11 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
       opacity: l ? 0.65 : 1
     },
     error: f,
-    children: !r && /* @__PURE__ */ k(ee, { children: [
+    children: !r && /* @__PURE__ */ x(ee, { children: [
       g && s !== void 0 && /* @__PURE__ */ a(tn, { status: s }),
-      !m.readOnly && c && /* @__PURE__ */ a(Sr, {
+      !m.readOnly && u && /* @__PURE__ */ a(Sr, {
         visible: d,
-        onToggle: c
+        onToggle: u
       }),
       !m.readOnly && w.map((C) => /* @__PURE__ */ a("button", {
         type: "button",
@@ -3843,13 +3843,13 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
           borderColor: "var(--text-color)",
           color: "var(--text-color)"
         } : void 0,
-        onClick: (O) => C.onActivate(e, O.currentTarget.getBoundingClientRect()),
+        onClick: (L) => C.onActivate(e, L.currentTarget.getBoundingClientRect()),
         children: C.icon
       }, C.tooltip)),
       !m.readOnly && /* @__PURE__ */ a(ws, {
         featureId: e,
         tooltip: m.messages.features.options,
-        icon: /* @__PURE__ */ k("svg", {
+        icon: /* @__PURE__ */ x("svg", {
           width: "13",
           height: "13",
           viewBox: "0 0 14 14",
@@ -3893,14 +3893,14 @@ var vs = ({ type: e }) => /* @__PURE__ */ a("svg", {
         title: C.disabled ? C.disabledTooltip ?? C.tooltip : C.tooltip,
         "aria-label": C.tooltip,
         disabled: C.disabled,
-        onClick: (O) => C.onActivate(e, O.currentTarget.getBoundingClientRect()),
+        onClick: (L) => C.onActivate(e, L.currentTarget.getBoundingClientRect()),
         children: C.icon
       }, C.tooltip)),
       !m.readOnly && /* @__PURE__ */ a(Rr, { suggestions: m.actions.featureHeaderSuggestions ?? [] }),
       !m.readOnly && /* @__PURE__ */ a(ys, {
         featureId: e,
         onAddSubFeature: y,
-        onAddSlice: p,
+        onAddSlice: h,
         actions: m.actions.featureHeaderAdd
       })
     ] })
@@ -3922,18 +3922,18 @@ function Ms(e, t) {
   }
 }
 var ks = ({ state: e, specification: t }) => {
-  const { actions: n } = K(), r = ve(), i = A(!1), [o, s] = F(!1), d = e === we.Running, c = d ? n.specificationStop : n.specificationRun;
-  if (!c || c.when && !c.when(t)) return null;
-  const l = async (u) => {
+  const { actions: n } = K(), r = ve(), i = A(!1), [o, s] = F(!1), d = e === we.Running, u = d ? n.specificationStop : n.specificationRun;
+  if (!u || u.when && !u.when(t)) return null;
+  const l = async (c) => {
     if (!r) {
       if (d) {
-        await c.onActivate(t.id, u);
+        await u.onActivate(t.id, c);
         return;
       }
       if (!i.current) {
         i.current = !0, s(!0);
         try {
-          await c.onActivate(t.id, u);
+          await u.onActivate(t.id, c);
         } finally {
           i.current = !1, s(!1);
         }
@@ -3943,13 +3943,13 @@ var ks = ({ state: e, specification: t }) => {
   return /* @__PURE__ */ a("button", {
     type: "button",
     className: `spec-run-button spec-run-button--${e}`,
-    onClick: (u) => {
-      l(u.currentTarget.getBoundingClientRect());
+    onClick: (c) => {
+      l(c.currentTarget.getBoundingClientRect());
     },
     disabled: r || o && !d,
-    "aria-label": c.tooltip,
-    title: c.tooltip,
-    children: o && !d ? /* @__PURE__ */ a("i", { className: "pi pi-spin pi-spinner" }) : c.icon
+    "aria-label": u.tooltip,
+    title: u.tooltip,
+    children: o && !d ? /* @__PURE__ */ a("i", { className: "pi pi-spin pi-spinner" }) : u.icon
   });
 }, Ns = {
   [we.Idle]: "pi pi-minus",
@@ -3967,9 +3967,9 @@ var ks = ({ state: e, specification: t }) => {
     tabIndex: i ? 0 : void 0,
     children: /* @__PURE__ */ a("i", { className: Ns[e] })
   });
-}, Es = 44, Rs = ({ name: e, collapsed: t, onToggleCollapse: n, runState: r, runMessage: i, onRenamed: o, onDeleted: s, runControl: d, gutter: c }) => {
-  const { messages: l, readOnly: u } = K(), f = ve(), y = f ? void 0 : o, p = f ? void 0 : s;
-  return /* @__PURE__ */ k("div", {
+}, Es = 44, Rs = ({ name: e, collapsed: t, onToggleCollapse: n, runState: r, runMessage: i, onRenamed: o, onDeleted: s, runControl: d, gutter: u }) => {
+  const { messages: l, readOnly: c } = K(), f = ve(), y = f ? void 0 : o, h = f ? void 0 : s;
+  return /* @__PURE__ */ x("div", {
     className: "event-modeling-grid-specification-outer-row",
     children: [/* @__PURE__ */ a("div", {
       className: "event-modeling-grid-specification-label-gutter",
@@ -3982,8 +3982,8 @@ var ks = ({ state: e, specification: t }) => {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: c
-    }), /* @__PURE__ */ k("div", {
+      children: u
+    }), /* @__PURE__ */ x("div", {
       className: [
         "event-modeling-grid-specification-box",
         "event-modeling-grid-specification-box--header",
@@ -3993,10 +3993,10 @@ var ks = ({ state: e, specification: t }) => {
         flex: 1,
         minWidth: 0
       },
-      children: [/* @__PURE__ */ k("div", {
+      children: [/* @__PURE__ */ x("div", {
         className: "event-modeling-grid-specification-header",
         children: [
-          !u && n && /* @__PURE__ */ a(Qt, {
+          !c && n && /* @__PURE__ */ a(Qt, {
             collapsed: t,
             onToggle: f ? void 0 : n
           }),
@@ -4020,10 +4020,10 @@ var ks = ({ state: e, specification: t }) => {
             message: i
           }),
           d,
-          p && /* @__PURE__ */ a("button", {
+          h && /* @__PURE__ */ a("button", {
             type: "button",
             className: "spec-delete-button",
-            onClick: p,
+            onClick: h,
             "aria-label": l.specifications.delete,
             title: l.specifications.delete,
             children: /* @__PURE__ */ a("i", { className: "pi pi-trash" })
@@ -4037,84 +4037,84 @@ var ks = ({ state: e, specification: t }) => {
     })]
   });
 }, As = 15e3, zt = (e) => e.given.length + (e.when ? 1 : 0) + e.thenEvents.length + e.thenErrors.length, Os = (e, t) => e || !(t.onSpecificationAdded || t.onSpecificationRemoved || t.onSpecificationRenamed || t.onSpecificationOpenStateSet || t.onGivenEventAdded || t.onGivenEventValuesSet || t.onGivenReadModelSet || t.onWhenCommandSet || t.onWhenCommandValuesSet || t.onThenEventAdded || t.onThenEventValuesSet || t.onThenErrorAdded || t.onThenRuleErrorAdded || t.onThenErrorRenamed || t.onGivenEventRemoved || t.onGivenReadModelRemoved || t.onGivenReadModelValuesSet || t.onThenEventRemoved || t.onThenReadModelValuesSet || t.onThenErrorRemoved || t.onSpecificationItemOpened), Ls = (e, t, n, r, i) => n ? t : r ? Ts(e, t, i) : e, Ts = (e, t, n = /* @__PURE__ */ new Set()) => {
-  const r = t.filter((c) => !n.has(c.id.toString())), i = new Map(r.map((c) => [c.id.toString(), c])), o = e.map((c) => {
-    const l = i.get(c.id.toString());
-    return l && zt(l) > zt(c) ? l : c;
-  }), s = new Set(e.map((c) => c.id.toString())), d = r.filter((c) => !s.has(c.id.toString()));
-  return d.length || o.some((c, l) => c !== e[l]) ? [...o, ...d] : e;
+  const r = t.filter((u) => !n.has(u.id.toString())), i = new Map(r.map((u) => [u.id.toString(), u])), o = e.map((u) => {
+    const l = i.get(u.id.toString());
+    return l && zt(l) > zt(u) ? l : u;
+  }), s = new Set(e.map((u) => u.id.toString())), d = r.filter((u) => !s.has(u.id.toString()));
+  return d.length || o.some((u, l) => u !== e[l]) ? [...o, ...d] : e;
 }, Ps = 1, Ds = ({ sliceId: e, width: t, collapsed: n, specifications: r, runInfoFor: i, renderRows: o }) => {
-  const { editing: s, actions: d, messages: c } = K(), l = ve(), [u, f] = F(r), [y, p] = F(!1), [m, g] = F(!1), [v, h] = F(!1), w = A(0), b = A(!1), S = A(!1), C = A(!1), O = A(/* @__PURE__ */ new Set()), N = Os(l, s), L = N ? r : u;
+  const { editing: s, actions: d, messages: u } = K(), l = ve(), [c, f] = F(r), [y, h] = F(!1), [m, g] = F(!1), [v, p] = F(!1), w = A(0), b = A(!1), S = A(!1), C = A(!1), L = A(/* @__PURE__ */ new Set()), N = Os(l, s), O = N ? r : c;
   re(() => {
-    f((M) => Ls(M, r, N, Date.now() <= w.current, O.current));
+    f((k) => Ls(k, r, N, Date.now() <= w.current, L.current));
   }, [r, N]);
   const j = async () => {
     if (b.current || !s.onSpecificationAdded) return;
-    b.current = !0, h(!0);
-    const M = {
+    b.current = !0, p(!0);
+    const k = {
       id: de.create(),
-      name: `${c.specifications.namePlaceholder} ${Ps++}`,
+      name: `${u.specifications.namePlaceholder} ${Ps++}`,
       collapsed: !1,
       given: [],
       thenEvents: [],
       thenErrors: []
     };
-    f((E) => [...E, M]);
+    f((E) => [...E, k]);
     try {
-      await s.onSpecificationAdded(e, M) || f((E) => E.filter(($) => !$.id.equals(M.id)));
+      await s.onSpecificationAdded(e, k) || f((E) => E.filter(($) => !$.id.equals(k.id)));
     } catch {
-      f((E) => E.filter(($) => !$.id.equals(M.id)));
+      f((E) => E.filter(($) => !$.id.equals(k.id)));
     } finally {
-      b.current = !1, h(!1);
+      b.current = !1, p(!1);
     }
-  }, H = (M) => {
-    O.current.has(M.toString()) || (O.current.add(M.toString()), w.current = 0, f((E) => E.filter(($) => !$.id.equals(M))), s.onSpecificationRemoved?.(e, M));
-  }, x = (M, E) => {
-    f(($) => $.map((Y) => Y.id.equals(M) ? {
+  }, H = (k) => {
+    L.current.has(k.toString()) || (L.current.add(k.toString()), w.current = 0, f((E) => E.filter(($) => !$.id.equals(k))), s.onSpecificationRemoved?.(e, k));
+  }, M = (k, E) => {
+    f(($) => $.map((Y) => Y.id.equals(k) ? {
       ...Y,
       name: E
-    } : Y)), s.onSpecificationRenamed?.(e, M, E);
-  }, T = (M, E) => {
-    l || !s.onSpecificationOpenStateSet || (f(($) => $.map((Y) => Y.id.equals(M) ? {
+    } : Y)), s.onSpecificationRenamed?.(e, k, E);
+  }, T = (k, E) => {
+    l || !s.onSpecificationOpenStateSet || (f(($) => $.map((Y) => Y.id.equals(k) ? {
       ...Y,
       collapsed: !E
-    } : Y)), s.onSpecificationOpenStateSet?.(e, M, E));
-  }, W = async (M) => {
+    } : Y)), s.onSpecificationOpenStateSet?.(e, k, E));
+  }, W = async (k) => {
     if (!(l || S.current || !d.specificationsGenerate)) {
-      S.current = !0, p(!0);
+      S.current = !0, h(!0);
       try {
-        await d.specificationsGenerate.onActivate(e, M) && (w.current = Date.now() + As);
+        await d.specificationsGenerate.onActivate(e, k) && (w.current = Date.now() + As);
       } finally {
-        S.current = !1, p(!1);
+        S.current = !1, h(!1);
       }
     }
-  }, X = async (M) => {
+  }, X = async (k) => {
     if (!(l || C.current || !d.specificationsRunAll || d.specificationsRunAll.disabled)) {
       C.current = !0, g(!0);
       try {
-        await d.specificationsRunAll.onActivate(e, M);
+        await d.specificationsRunAll.onActivate(e, k);
       } finally {
         C.current = !1, g(!1);
       }
     }
   }, D = d.specificationsGenerate, z = d.specificationsRunAll, I = !l && D && (!D.when || D.when(e));
-  return n ? null : /* @__PURE__ */ k(ee, { children: [L.map((M, E) => {
-    const { state: $, message: Y } = i(M);
-    return /* @__PURE__ */ k("div", {
+  return n ? null : /* @__PURE__ */ x(ee, { children: [O.map((k, E) => {
+    const { state: $, message: Y } = i(k);
+    return /* @__PURE__ */ x("div", {
       "data-slice-spec-col": "true",
       "data-slice-id": e.toString(),
       className: `event-modeling-grid-specification-wrapper event-modeling-grid-specification-wrapper--${$}`,
       style: { width: 56 + t },
       children: [/* @__PURE__ */ a(Rs, {
-        name: M.name,
-        collapsed: M.collapsed,
-        onToggleCollapse: s.onSpecificationOpenStateSet ? () => T(M.id, M.collapsed) : void 0,
-        onRenamed: s.onSpecificationRenamed ? (Q) => x(M.id, Q) : void 0,
-        onDeleted: s.onSpecificationRemoved ? () => H(M.id) : void 0,
+        name: k.name,
+        collapsed: k.collapsed,
+        onToggleCollapse: s.onSpecificationOpenStateSet ? () => T(k.id, k.collapsed) : void 0,
+        onRenamed: s.onSpecificationRenamed ? (Q) => M(k.id, Q) : void 0,
+        onDeleted: s.onSpecificationRemoved ? () => H(k.id) : void 0,
         runState: $,
         runMessage: Y,
         runControl: /* @__PURE__ */ a(ks, {
           state: $,
-          specification: M
+          specification: k
         }),
         gutter: E === 0 && z && (!z.when || z.when(e)) && /* @__PURE__ */ a("button", {
           type: "button",
@@ -4127,12 +4127,12 @@ var ks = ({ state: e, specification: t }) => {
           title: z.tooltip,
           children: z.icon
         })
-      }), !M.collapsed && o(M)]
-    }, `${M.id.toString()}:${zt(M)}`);
-  }), !l && (s.onSpecificationAdded || I) && /* @__PURE__ */ k("div", {
+      }), !k.collapsed && o(k)]
+    }, `${k.id.toString()}:${zt(k)}`);
+  }), !l && (s.onSpecificationAdded || I) && /* @__PURE__ */ x("div", {
     className: "event-modeling-grid-specification-add-area",
     children: [s.onSpecificationAdded && /* @__PURE__ */ a(me, {
-      content: c.specifications.add,
+      content: u.specifications.add,
       position: "top",
       children: /* @__PURE__ */ a("button", {
         type: "button",
@@ -4141,7 +4141,7 @@ var ks = ({ state: e, specification: t }) => {
         },
         disabled: v,
         className: "event-modeling-grid-add-button--small",
-        "aria-label": c.specifications.add,
+        "aria-label": u.specifications.add,
         children: "+"
       })
     }), I && /* @__PURE__ */ a(me, {
@@ -4149,8 +4149,8 @@ var ks = ({ state: e, specification: t }) => {
       position: "top",
       children: /* @__PURE__ */ a("button", {
         type: "button",
-        onClick: (M) => {
-          W(M.currentTarget.getBoundingClientRect());
+        onClick: (k) => {
+          W(k.currentTarget.getBoundingClientRect());
         },
         disabled: y,
         className: "event-modeling-grid-add-button--small",
@@ -4161,7 +4161,7 @@ var ks = ({ state: e, specification: t }) => {
   })] });
 }, _s = ({ headline: e, minHeight: t, actions: n, children: r }) => {
   const i = ve();
-  return /* @__PURE__ */ k("div", {
+  return /* @__PURE__ */ x("div", {
     className: "event-modeling-grid-specification-section",
     style: { minHeight: t },
     children: [
@@ -4215,9 +4215,9 @@ function Ws(e, t) {
     lines: [e]
   });
   return Ut(() => {
-    const d = n.current, c = Hs();
-    if (!d || !c) return;
-    const l = (u, f) => (c.font = `${t.fontWeight} ${f}px ${t.fontFamily}`, c.measureText(u).width);
+    const d = n.current, u = Hs();
+    if (!d || !u) return;
+    const l = (c, f) => (u.font = `${t.fontWeight} ${f}px ${t.fontFamily}`, u.measureText(c).width);
     s(Bs(e, {
       maxFontSizePx: r,
       minFontSizePx: i,
@@ -4231,28 +4231,28 @@ function Ws(e, t) {
     t.fontFamily
   ]), [n, o];
 }
-var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backgroundColor: t, textColor: n, isSelected: r = !1, disabled: i = !1, onSelected: o, onStartEdit: s, extraContent: d, children: c, ariaLabel: l, ariaPressed: u, "data-event-id": f, "data-card-id": y, "data-slice-id": p }) => {
-  const m = A(null), g = !!(o ?? s) || i, [v, h] = Ws(e, {
+var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backgroundColor: t, textColor: n, isSelected: r = !1, disabled: i = !1, onSelected: o, onStartEdit: s, extraContent: d, children: u, ariaLabel: l, ariaPressed: c, "data-event-id": f, "data-card-id": y, "data-slice-id": h }) => {
+  const m = A(null), g = !!(o ?? s) || i, [v, p] = Ws(e, {
     fontFamily: Vs,
     fontWeight: "bold"
   });
   re(() => () => {
     m.current && clearTimeout(m.current);
   }, []);
-  const w = q((O) => {
-    if (O.stopPropagation(), m.current) {
+  const w = q((L) => {
+    if (L.stopPropagation(), m.current) {
       clearTimeout(m.current), m.current = null;
       return;
     }
     m.current = setTimeout(() => {
       m.current = null, o?.();
     }, zs);
-  }, [o]), b = q((O) => {
-    O.stopPropagation(), m.current && (clearTimeout(m.current), m.current = null), s?.();
+  }, [o]), b = q((L) => {
+    L.stopPropagation(), m.current && (clearTimeout(m.current), m.current = null), s?.();
   }, [s]), S = r ? {
     outline: `2px solid ${t}`,
     outlineOffset: 2
-  } : {}, C = /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ k("div", {
+  } : {}, C = /* @__PURE__ */ x(ee, { children: [/* @__PURE__ */ x("div", {
     className: "event-modeling-card__face",
     style: {
       background: t,
@@ -4261,13 +4261,13 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     children: [/* @__PURE__ */ a("strong", {
       ref: v,
       className: "event-modeling-card__title",
-      style: { fontSize: h.fontSizePx },
-      children: h.lines.length > 1 ? h.lines.map((O, N) => /* @__PURE__ */ a("span", {
+      style: { fontSize: p.fontSizePx },
+      children: p.lines.length > 1 ? p.lines.map((L, N) => /* @__PURE__ */ a("span", {
         className: "event-modeling-card__title-line",
-        children: O
-      }, N)) : h.lines[0]
+        children: L
+      }, N)) : p.lines[0]
     }), d]
-  }), c] });
+  }), u] });
   return g ? /* @__PURE__ */ a("button", {
     className: "event-modeling-card",
     style: S,
@@ -4275,16 +4275,16 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     onClick: w,
     onDoubleClick: b,
     "aria-label": l,
-    "aria-pressed": u,
+    "aria-pressed": c,
     "data-event-id": f,
     "data-card-id": y,
-    "data-slice-id": p,
+    "data-slice-id": h,
     children: C
   }) : /* @__PURE__ */ a("div", {
     className: "event-modeling-card",
     "data-event-id": f,
     "data-card-id": y,
-    "data-slice-id": p,
+    "data-slice-id": h,
     children: C
   });
 }, pe = {
@@ -4305,7 +4305,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
 }, Re = {
   background: "#e05050",
   text: "#ffffff"
-}, qs = () => /* @__PURE__ */ k("svg", {
+}, qs = () => /* @__PURE__ */ x("svg", {
   viewBox: "0 0 12 12",
   fill: "none",
   stroke: "currentColor",
@@ -4321,7 +4321,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     height: "8.5",
     rx: "1.5"
   }), /* @__PURE__ */ a("path", { d: "M1 5.5h10M4 1v3M8 1v3" })]
-}), Gs = () => /* @__PURE__ */ k("svg", {
+}), Gs = () => /* @__PURE__ */ x("svg", {
   viewBox: "0 0 12 12",
   fill: "none",
   stroke: "currentColor",
@@ -4422,14 +4422,14 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
   });
 }, Ve = ({ title: e, schema: t, showTitle: n = !0, compact: r = !1 }) => {
   const i = ge(), o = oe(() => vr(t), [t]);
-  return /* @__PURE__ */ k("div", {
+  return /* @__PURE__ */ x("div", {
     className: `schema-tooltip-properties${r ? " schema-tooltip-properties--compact" : ""}`,
     children: [n && /* @__PURE__ */ a("div", {
       className: "schema-tooltip-properties__title",
       children: e
     }), o.length > 0 ? /* @__PURE__ */ a("div", {
       className: "schema-tooltip-properties__list",
-      children: o.map((s) => /* @__PURE__ */ k("div", {
+      children: o.map((s) => /* @__PURE__ */ x("div", {
         className: "schema-tooltip-properties__row",
         children: [/* @__PURE__ */ a(js, { type: s.type }), /* @__PURE__ */ a("span", {
           className: "schema-tooltip-properties__name",
@@ -4482,13 +4482,13 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
   fontSize: 11,
   opacity: 0.8,
   marginTop: 4
-}, Yr = ({ kind: e, artifactId: t, summary: n, tags: r, schema: i, showDetails: o = !1, actions: s = [], onActivate: d, onSelected: c, ...l }) => {
-  const u = ve(), f = A(null), y = () => f.current?.getBoundingClientRect() ?? new DOMRect(), p = u ? [] : s.filter((v) => !v.when || !!t && v.when(t)), m = (v) => p.filter((h) => (h.corner ?? vt.end) === v), g = /* @__PURE__ */ a("div", {
+}, Yr = ({ kind: e, artifactId: t, summary: n, tags: r, schema: i, showDetails: o = !1, actions: s = [], onActivate: d, onSelected: u, ...l }) => {
+  const c = ve(), f = A(null), y = () => f.current?.getBoundingClientRect() ?? new DOMRect(), h = c ? [] : s.filter((v) => !v.when || !!t && v.when(t)), m = (v) => h.filter((p) => (p.corner ?? vt.end) === v), g = /* @__PURE__ */ a("div", {
     ref: f,
     children: /* @__PURE__ */ a(Ue, {
       backgroundColor: Hn[e].background,
       textColor: Hn[e].text,
-      extraContent: /* @__PURE__ */ k(ee, { children: [
+      extraContent: /* @__PURE__ */ x(ee, { children: [
         /* @__PURE__ */ a(Zs, { tags: r }),
         n && /* @__PURE__ */ a("div", {
           style: Qs,
@@ -4502,23 +4502,23 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
         })
       ] }),
       onSelected: () => {
-        if (d && t && !u) {
+        if (d && t && !c) {
           d(t, y());
           return;
         }
-        c?.();
+        u?.();
       },
       ...l
     })
   });
-  return e === he.event && p.length === 0 ? g : /* @__PURE__ */ k("div", {
+  return e === he.event && h.length === 0 ? g : /* @__PURE__ */ x("div", {
     className: Ks[e],
     "data-artifact-kind": e,
-    children: [g, [vt.start, vt.end].flatMap((v) => m(v).map((h, w) => /* @__PURE__ */ a(Js, {
-      action: h,
+    children: [g, [vt.start, vt.end].flatMap((v) => m(v).map((p, w) => /* @__PURE__ */ a(Js, {
+      action: p,
       corner: v,
       slot: w,
-      onActivate: () => t && h.onActivate(t, y())
+      onActivate: () => t && p.onActivate(t, y())
     }, `${v}-${w}`)))]
   });
 }, dn = ({ value: e, backgroundColor: t, textColor: n, nameError: r, onChange: i, onCommit: o, onCancel: s }) => /* @__PURE__ */ a("div", {
@@ -4559,46 +4559,46 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     }
   })
 }), jr = (e) => Object.fromEntries(e.map((t) => [t.id.toString(), t.values])), el = 5, Xr = ({ options: e, nameOf: t, color: n, searchPlaceholder: r, emptyLabel: i, onSelect: o, footer: s, trigger: d }) => {
-  const [c, l] = F(!1), [u, f] = F(""), y = A(null), p = A(null), m = e.length > el, g = () => {
+  const [u, l] = F(!1), [c, f] = F(""), y = A(null), h = A(null), m = e.length > el, g = () => {
     l(!1), f("");
-  }, v = oe(() => [y, p], []);
-  ze(v, g, c);
-  const h = u ? e.filter((b) => t(b).toLowerCase().includes(u.toLowerCase())) : e, w = (b) => {
+  }, v = oe(() => [y, h], []);
+  ze(v, g, u);
+  const p = c ? e.filter((b) => t(b).toLowerCase().includes(c.toLowerCase())) : e, w = (b) => {
     o(b), g();
   };
-  return /* @__PURE__ */ k("div", {
+  return /* @__PURE__ */ x("div", {
     ref: y,
     className: "event-modeling-grid-event-picker",
     style: { position: "relative" },
     children: [d({
-      open: c,
+      open: u,
       toggle: () => l((b) => !b)
     }), /* @__PURE__ */ a(jt, {
       anchorRef: y,
-      open: c,
+      open: u,
       side: "above",
       align: "right",
       gap: 4,
-      children: /* @__PURE__ */ k("div", {
-        ref: p,
+      children: /* @__PURE__ */ x("div", {
+        ref: h,
         className: "event-modeling-grid-event-picker-dropdown",
         children: [m && /* @__PURE__ */ a("input", {
           className: "event-modeling-grid-event-picker-search",
           placeholder: r,
-          value: u,
+          value: c,
           onChange: (b) => f(b.target.value),
           autoFocus: !0,
           onClick: (b) => b.stopPropagation()
-        }), /* @__PURE__ */ k("ul", {
+        }), /* @__PURE__ */ x("ul", {
           className: "event-modeling-grid-event-picker-list",
           children: [
-            h.map((b, S) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a("button", {
+            p.map((b, S) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a("button", {
               className: "event-modeling-grid-event-picker-item",
               style: { borderLeft: `3px solid ${n}` },
               onClick: () => w(b),
               children: t(b)
             }) }, `${S}-${t(b)}`)),
-            h.length === 0 && /* @__PURE__ */ a("li", {
+            p.length === 0 && /* @__PURE__ */ a("li", {
               className: "event-modeling-grid-event-picker-empty",
               children: i
             }),
@@ -4615,7 +4615,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
   searchPlaceholder: i,
   emptyLabel: o,
   onSelect: n,
-  trigger: ({ toggle: d }) => s !== void 0 ? /* @__PURE__ */ k("div", {
+  trigger: ({ toggle: d }) => s !== void 0 ? /* @__PURE__ */ x("div", {
     className: "event-modeling-grid-optional-event-reference",
     children: [/* @__PURE__ */ a("div", {
       className: "event-modeling-grid-optional-event-reference__card",
@@ -4625,8 +4625,8 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       className: "event-modeling-grid-optional-event-reference__define-btn",
       "aria-label": r,
       title: r,
-      onClick: (c) => {
-        c.stopPropagation(), d();
+      onClick: (u) => {
+        u.stopPropagation(), d();
       },
       children: /* @__PURE__ */ a("i", { className: "pi pi-plus" })
     })]
@@ -4649,7 +4649,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     searchPlaceholder: i.search,
     emptyLabel: i.noItems,
     onSelect: n,
-    footer: (o) => r.length > 0 && /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ a("li", { className: "event-modeling-grid-event-picker-separator" }), r.map((s, d) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a("button", {
+    footer: (o) => r.length > 0 && /* @__PURE__ */ x(ee, { children: [/* @__PURE__ */ a("li", { className: "event-modeling-grid-event-picker-separator" }), r.map((s, d) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a("button", {
       className: "event-modeling-grid-event-picker-item",
       style: tl,
       onClick: () => {
@@ -4684,7 +4684,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
   });
 }, Be = /* @__PURE__ */ (function(e) {
   return e.event = "event", e.command = "command", e.readModel = "readModel", e;
-})({}), un = ({ headline: e, actions: t, isLast: n = !1, children: r }) => /* @__PURE__ */ k("div", {
+})({}), un = ({ headline: e, actions: t, isLast: n = !1, children: r }) => /* @__PURE__ */ x("div", {
   className: "event-modeling-grid-specification-outer-row",
   children: [/* @__PURE__ */ a("div", {
     className: "event-modeling-grid-specification-label-gutter",
@@ -4712,7 +4712,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
   const { messages: r } = K();
   if (ve() || !t) return /* @__PURE__ */ a(ee, { children: n });
   const i = `${r.specifications.removeItem} ${e}`;
-  return /* @__PURE__ */ k("div", {
+  return /* @__PURE__ */ x("div", {
     className: "spec-item-removable",
     children: [n, /* @__PURE__ */ a("button", {
       type: "button",
@@ -4726,10 +4726,10 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     })]
   });
 }, il = ({ sliceId: e, sliceType: t, specification: n, events: r, readModel: i, renamedReadModelName: o }) => {
-  const { editing: s, messages: d } = K(), c = ve(), { onGivenEventAdded: l, onGivenEventValuesSet: u, onGivenReadModelSet: f, onGivenReadModelValuesSet: y, onGivenEventRemoved: p, onGivenReadModelRemoved: m, onSpecificationItemOpened: g } = s, [v, h] = F(n.given), [w, b] = F(n.givenReadModel), [S, C] = F(() => ({
+  const { editing: s, messages: d } = K(), u = ve(), { onGivenEventAdded: l, onGivenEventValuesSet: c, onGivenReadModelSet: f, onGivenReadModelValuesSet: y, onGivenEventRemoved: h, onGivenReadModelRemoved: m, onSpecificationItemOpened: g } = s, [v, p] = F(n.given), [w, b] = F(n.givenReadModel), [S, C] = F(() => ({
     ...jr(n.given),
     ...n.givenReadModel ? { [n.givenReadModel.id.toString()]: n.givenReadModel.values ?? {} } : {}
-  })), O = c || !(l || u || f || y || p || m || g), N = O ? n.given : v, L = O ? n.givenReadModel : w, j = oe(() => nl(r), [r]), H = oe(() => new Map(j.map((P) => [P.id.toString(), P])), [j]), x = (P, V, te, R, G, _) => g?.({
+  })), L = u || !(l || c || f || y || h || m || g), N = L ? n.given : v, O = L ? n.givenReadModel : w, j = oe(() => nl(r), [r]), H = oe(() => new Map(j.map((P) => [P.id.toString(), P])), [j]), M = (P, V, te, R, G, _) => g?.({
     sliceId: e,
     specificationId: n.id,
     itemId: P,
@@ -4746,7 +4746,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     }
   }), T = (P) => {
     const V = de.create();
-    h((te) => [...te, {
+    p((te) => [...te, {
       id: V,
       eventId: P.id,
       name: P.name,
@@ -4760,40 +4760,40 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       values: P
     }), f?.(e, n.id, i.id, i.name), y?.(e, n.id, P));
   }, X = (P) => {
-    h((V) => V.filter((te) => !te.id.equals(P))), p?.(e, n.id, P);
+    p((V) => V.filter((te) => !te.id.equals(P))), h?.(e, n.id, P);
   }, D = () => {
     b(void 0), m?.(e, n.id);
-  }, z = (P) => (V) => u?.(e, n.id, P, V), I = !c && t === B.stateChange && !!l, M = !c && !!i && !!f && !!g && rl(!0, !!L), E = L && (o ?? L.name), $ = L?.id ?? L?.readModelItemId, Y = L && $ && E !== void 0 && /* @__PURE__ */ a(yt, {
+  }, z = (P) => (V) => c?.(e, n.id, P, V), I = !u && t === B.stateChange && !!l, k = !u && !!i && !!f && !!g && rl(!0, !!O), E = O && (o ?? O.name), $ = O?.id ?? O?.readModelItemId, Y = O && $ && E !== void 0 && /* @__PURE__ */ a(yt, {
     name: E,
     onRemoved: m ? D : void 0,
     children: /* @__PURE__ */ a(Le, {
       name: E,
       colors: nt,
-      onOpen: !c && g && f ? (P) => x($, Be.readModel, E, P, i?.schema, W) : void 0
+      onOpen: !u && g && f ? (P) => M($, Be.readModel, E, P, i?.schema, W) : void 0
     })
   }, $.toString()), Q = N.map((P) => {
     const V = H.get(P.eventId.toString())?.name ?? P.name;
     return /* @__PURE__ */ a(yt, {
       name: V,
-      onRemoved: p ? () => X(P.id) : void 0,
+      onRemoved: h ? () => X(P.id) : void 0,
       children: /* @__PURE__ */ a(Le, {
         name: V,
         colors: pe,
-        onOpen: !c && g && u ? (te) => x(P.id, Be.event, V, te, H.get(P.eventId.toString())?.schema, z(P.id)) : void 0
+        onOpen: !u && g && c ? (te) => M(P.id, Be.event, V, te, H.get(P.eventId.toString())?.schema, z(P.id)) : void 0
       })
     }, P.id.toString());
   });
-  return /* @__PURE__ */ k(un, {
+  return /* @__PURE__ */ x(un, {
     headline: d.specifications.given,
-    actions: /* @__PURE__ */ k(ee, { children: [I && /* @__PURE__ */ a(cn, {
+    actions: /* @__PURE__ */ x(ee, { children: [I && /* @__PURE__ */ a(cn, {
       options: j,
       nameOf: (P) => P.name,
       onChosen: T
-    }), M && i && /* @__PURE__ */ a(me, {
+    }), k && i && /* @__PURE__ */ a(me, {
       content: d.specifications.defineReadModel,
       position: "top",
       children: /* @__PURE__ */ a("button", {
-        onClick: (P) => x(i.id, Be.readModel, i.name, P.currentTarget.getBoundingClientRect(), i.schema, W),
+        onClick: (P) => M(i.id, Be.readModel, i.name, P.currentTarget.getBoundingClientRect(), i.schema, W),
         className: "event-modeling-grid-add-button--small",
         "aria-label": d.specifications.defineReadModel,
         children: /* @__PURE__ */ a("i", {
@@ -4805,44 +4805,44 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     children: [Y, Q]
   });
 }, ol = ({ sliceId: e, sliceType: t, specification: n, command: r, renamedCommandName: i, events: o = [] }) => {
-  const { editing: s, messages: d } = K(), c = ve(), { onWhenCommandSet: l, onWhenCommandValuesSet: u, onSpecificationItemOpened: f } = s, [y, p] = F(n.when), [m, g] = F(n.when?.values ?? {}), v = c || !(l || u || f) ? n.when : y, h = (N) => {
-    const L = de.create();
-    p({
-      id: L,
+  const { editing: s, messages: d } = K(), u = ve(), { onWhenCommandSet: l, onWhenCommandValuesSet: c, onSpecificationItemOpened: f } = s, [y, h] = F(n.when), [m, g] = F(n.when?.values ?? {}), v = u || !(l || c || f) ? n.when : y, p = (N) => {
+    const O = de.create();
+    h({
+      id: O,
       commandId: N.id,
       name: N.name,
       values: {}
-    }), g({}), l?.(e, n.id, L, N.id, N.name);
-  }, w = (N, L, j, H, x) => f?.({
+    }), g({}), l?.(e, n.id, O, N.id, N.name);
+  }, w = (N, O, j, H, M) => f?.({
     sliceId: e,
     specificationId: n.id,
     itemId: N,
     kind: Be.command,
     name: j,
-    schema: L && r?.id.equals(L) ? r.schema : void 0,
-    values: x,
+    schema: O && r?.id.equals(O) ? r.schema : void 0,
+    values: M,
     host: H,
     onValuesSet: (T) => {
-      y?.id.equals(N) && g(T), u?.(e, n.id, T);
+      y?.id.equals(N) && g(T), c?.(e, n.id, T);
     }
-  }), b = t === B.stateChange ? r : void 0, S = t === B.stateView ? o : [], C = v && (v.commandId && r?.id.equals(v.commandId) ? i ?? v.name : v.name), O = !c && !!f && !!u;
-  return /* @__PURE__ */ k(un, {
+  }), b = t === B.stateChange ? r : void 0, S = t === B.stateView ? o : [], C = v && (v.commandId && r?.id.equals(v.commandId) ? i ?? v.name : v.name), L = !u && !!f && !!c;
+  return /* @__PURE__ */ x(un, {
     headline: d.specifications.when,
-    actions: !c && t !== B.stateChange && t !== B.stateView && !v && r && l && /* @__PURE__ */ a(cn, {
+    actions: !u && t !== B.stateChange && t !== B.stateView && !v && r && l && /* @__PURE__ */ a(cn, {
       options: [r],
       nameOf: (N) => N.name,
-      onChosen: h
+      onChosen: p
     }),
     children: [
       v && C && /* @__PURE__ */ a(Le, {
         name: C,
         colors: et,
-        onOpen: O ? (N) => w(v.id, v.commandId, C, N, m) : void 0
+        onOpen: L ? (N) => w(v.id, v.commandId, C, N, m) : void 0
       }, v.id.toString()),
       b && /* @__PURE__ */ a(Le, {
         name: b.name,
         colors: et,
-        onOpen: O ? (N) => w(b.id, b.id, b.name, N, m) : void 0
+        onOpen: L ? (N) => w(b.id, b.id, b.name, N, m) : void 0
       }, b.id.toString()),
       S.map((N) => /* @__PURE__ */ a(Le, {
         name: N.name,
@@ -4883,8 +4883,8 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
   const n = ve(), [r, i] = F(!1), [o, s] = F(e);
   if (re(() => s(e), [e]), r) {
     const d = () => {
-      const c = o.trim();
-      i(!1), !(!c || c === e) && t?.(c);
+      const u = o.trim();
+      i(!1), !(!u || u === e) && t?.(u);
     };
     return /* @__PURE__ */ a(dn, {
       value: o,
@@ -4905,7 +4905,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     disabled: n
   });
 }, cl = ({ sliceId: e, sliceType: t, specification: n, events: r, command: i, readModel: o, renamedEventNames: s = {}, extra: d }) => {
-  const { editing: c, messages: l } = K(), u = ve(), { onThenEventAdded: f, onThenEventValuesSet: y, onThenErrorAdded: p, onThenRuleErrorAdded: m, onThenErrorRenamed: g, onThenEventRemoved: v, onThenErrorRemoved: h, onThenReadModelValuesSet: w, onSpecificationItemOpened: b } = c, [S, C] = F(n.thenEvents), [O, N] = F(n.thenErrors), [L, j] = F(() => jr(n.thenEvents)), [H, x] = F({}), T = u || !(f || y || p || m || g || v || h || w || b), W = T ? n.thenEvents : S, X = T ? n.thenErrors : O, D = oe(() => new Map(r.map((_) => [_.id.toString(), _])), [r]), z = oe(() => sl(i, r), [i, r]), I = !u && t !== B.stateView, M = (_) => {
+  const { editing: u, messages: l } = K(), c = ve(), { onThenEventAdded: f, onThenEventValuesSet: y, onThenErrorAdded: h, onThenRuleErrorAdded: m, onThenErrorRenamed: g, onThenEventRemoved: v, onThenErrorRemoved: p, onThenReadModelValuesSet: w, onSpecificationItemOpened: b } = u, [S, C] = F(n.thenEvents), [L, N] = F(n.thenErrors), [O, j] = F(() => jr(n.thenEvents)), [H, M] = F({}), T = c || !(f || y || h || m || g || v || p || w || b), W = T ? n.thenEvents : S, X = T ? n.thenErrors : L, D = oe(() => new Map(r.map((_) => [_.id.toString(), _])), [r]), z = oe(() => sl(i, r), [i, r]), I = !c && t !== B.stateView, k = (_) => {
     const J = de.create();
     C((ae) => [...ae, {
       id: J,
@@ -4918,7 +4918,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     N((ae) => [...ae, {
       id: _,
       name: J
-    }]), p?.(e, n.id, _, J);
+    }]), h?.(e, n.id, _, J);
   }, $ = (_) => {
     const J = de.create();
     N((ae) => [...ae, {
@@ -4934,7 +4934,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
   }, Q = (_) => {
     C((J) => J.filter((ae) => !ae.id.equals(_))), v?.(e, n.id, _);
   }, P = (_) => {
-    N((J) => J.filter((ae) => !ae.id.equals(_))), h?.(e, n.id, _);
+    N((J) => J.filter((ae) => !ae.id.equals(_))), p?.(e, n.id, _);
   }, V = W.map((_) => {
     const J = D.get(_.eventId.toString()), ae = s[_.eventId.toString()] ?? _.name;
     return /* @__PURE__ */ a(yt, {
@@ -4943,14 +4943,14 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       children: /* @__PURE__ */ a(Le, {
         name: ae,
         colors: pe,
-        onOpen: !u && b && y ? (Ie) => b({
+        onOpen: !c && b && y ? (Ie) => b({
           sliceId: e,
           specificationId: n.id,
           itemId: _.id,
           kind: Be.event,
           name: ae,
           schema: J?.schema,
-          values: L[_.id.toString()] ?? {},
+          values: O[_.id.toString()] ?? {},
           host: Ie,
           onValuesSet: (Ye) => {
             j((rt) => ({
@@ -4965,17 +4965,17 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     const J = _.reference ? ll(_.reference, r) ?? l.specifications.missingRule : _.name;
     return /* @__PURE__ */ a(yt, {
       name: J,
-      onRemoved: h ? () => P(_.id) : void 0,
+      onRemoved: p ? () => P(_.id) : void 0,
       children: _.reference ? /* @__PURE__ */ a(Ue, {
         name: J,
         backgroundColor: Re.background,
         textColor: Re.text
       }) : /* @__PURE__ */ a(dl, {
         name: _.name,
-        onRenamed: !u && g ? (ae) => Y(_.id, ae) : void 0
+        onRenamed: !c && g ? (ae) => Y(_.id, ae) : void 0
       })
     }, _.id.toString());
-  }), R = [...p ? [{
+  }), R = [...h ? [{
     label: l.specifications.addError,
     onChosen: E
   }] : [], ...m ? z.map((_) => ({
@@ -4984,9 +4984,9 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
   })) : []], G = I && (t === B.stateChange ? (f || R.length > 0) && /* @__PURE__ */ a(cn, {
     options: f ? r : [],
     nameOf: (_) => _.name,
-    onChosen: M,
+    onChosen: k,
     errors: R
-  }) : p && /* @__PURE__ */ a(me, {
+  }) : h && /* @__PURE__ */ a(me, {
     content: l.specifications.addItem,
     position: "top",
     children: /* @__PURE__ */ a("button", {
@@ -4996,7 +4996,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       children: "+"
     })
   }));
-  return /* @__PURE__ */ k(un, {
+  return /* @__PURE__ */ x(un, {
     headline: l.specifications.then,
     actions: G,
     isLast: !0,
@@ -5006,7 +5006,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       t === B.stateView && o && /* @__PURE__ */ a(Le, {
         name: o.name,
         colors: nt,
-        onOpen: !u && b ? (_) => b({
+        onOpen: !c && b ? (_) => b({
           sliceId: e,
           specificationId: n.id,
           itemId: o.id,
@@ -5016,7 +5016,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
           values: H,
           host: _,
           onValuesSet: (J) => {
-            x(J), w?.(e, n.id, o.id, o.name, J);
+            M(J), w?.(e, n.id, o.id, o.name, J);
           }
         }) : void 0
       }, o.id.toString()),
@@ -5039,8 +5039,8 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     sliceType: e.sliceType,
     recomputeKey: i
   });
-}, ml = ({ slice: e, collapsed: t, moduleId: n, featureId: r, collection: i, rows: o, heights: s, priorEvents: d, followingEvents: c = [], externalEvents: l, slots: u, controls: f }) => {
-  const { detailLevel: y, detailsVisibility: p } = fe(), m = lr(y, dr(p, n.toString(), r.toString(), e.id.toString())), g = /* @__PURE__ */ a(Kl, {
+}, ml = ({ slice: e, collapsed: t, moduleId: n, featureId: r, collection: i, rows: o, heights: s, priorEvents: d, followingEvents: u = [], externalEvents: l, slots: c, controls: f }) => {
+  const { detailLevel: y, detailsVisibility: h } = fe(), m = lr(y, dr(h, n.toString(), r.toString(), e.id.toString())), g = /* @__PURE__ */ a(Kl, {
     featureId: r,
     slice: e,
     eventCount: e.events.length,
@@ -5048,15 +5048,15 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     isDragging: f?.isDragging,
     onSliceDragStart: f?.onSliceDragStart,
     collapsedWidth: Z.collapsedSliceWidth,
-    header: u?.sliceHeader?.(e, f ?? {
+    header: c?.sliceHeader?.(e, f ?? {
       collapsed: t,
       sliceCollapsed: e.collapsed,
       isDragging: !1
     }) ?? /* @__PURE__ */ a(mr, {
       editing: {
-        onSliceAdded: f?.onAddSlice ? (v, h) => f.onAddSlice?.(h, e.id) : void 0,
+        onSliceAdded: f?.onAddSlice ? (v, p) => f.onAddSlice?.(p, e.id) : void 0,
         onSliceOpenStateSet: f?.onToggleCollapse ? () => f.onToggleCollapse?.() : void 0,
-        onSliceRenamed: f?.onRenamed ? (v, h) => f.onRenamed?.(h) : void 0
+        onSliceRenamed: f?.onRenamed ? (v, p) => f.onRenamed?.(p) : void 0
       },
       children: /* @__PURE__ */ a(oi, {
         slice: e,
@@ -5066,7 +5066,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       })
     }),
     headerHeight: Z.headerHeight,
-    body: (v) => v ? /* @__PURE__ */ k(ee, { children: [u?.sliceBodyOverlay ? u.sliceBodyOverlay(e, t) : /* @__PURE__ */ a(ul, {
+    body: (v) => v ? /* @__PURE__ */ x(ee, { children: [c?.sliceBodyOverlay ? c.sliceBodyOverlay(e, t) : /* @__PURE__ */ a(ul, {
       slice: e,
       collapsed: t,
       showDetails: m
@@ -5075,25 +5075,25 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       contentRows: o,
       rowHeights: s,
       actors: i.actors,
-      renderCell: (h) => {
+      renderCell: (p) => {
         const w = {
-          conn: h.conn,
-          rowHeight: h.rowHeight,
+          conn: p.conn,
+          rowHeight: p.rowHeight,
           collapsed: t
         }, b = {
           ...w,
           showDetails: m
         };
-        if (u?.sliceCell) {
-          const S = u.sliceCell(e, h);
+        if (c?.sliceCell) {
+          const S = c.sliceCell(e, p);
           if (S !== void 0) return S;
         }
-        switch (h.rowType) {
+        switch (p.rowType) {
           case U.UI: {
-            const S = e.actors.find((C) => C.id === h.actor?.id);
+            const S = e.actors.find((C) => C.id === p.actor?.id);
             return /* @__PURE__ */ a(Nd, {
               ...w,
-              actorId: h.actor?.id ?? "",
+              actorId: p.actor?.id ?? "",
               elements: S?.elements ?? [],
               layout: S?.layout,
               windowSize: S ? {
@@ -5106,7 +5106,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
             return /* @__PURE__ */ a(xd, {
               ...w,
               sliceType: e.sliceType,
-              isSystemSlice: !!h.actor && (e.sliceType === B.automation || e.sliceType === B.translator),
+              isSystemSlice: !!p.actor && (e.sliceType === B.automation || e.sliceType === B.translator),
               triggerType: e.automationTrigger?.type
             });
           case U.Chat:
@@ -5125,7 +5125,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
               ...b,
               slice: e,
               priorEvents: d,
-              followingEvents: c
+              followingEvents: u
             });
         }
       }
@@ -5133,16 +5133,16 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       style: { height: Tr(i, o, s) },
       "aria-hidden": "true"
     }),
-    specifications: (v, h) => u?.specifications ? u.specifications(e, v, h, f?.sliceCollapsed ?? e.collapsed) : v && /* @__PURE__ */ a(Ds, {
+    specifications: (v, p) => c?.specifications ? c.specifications(e, v, p, f?.sliceCollapsed ?? e.collapsed) : v && /* @__PURE__ */ a(Ds, {
       sliceId: e.id,
-      width: h,
+      width: p,
       collapsed: f?.sliceCollapsed ?? e.collapsed,
       specifications: e.specifications,
       runInfoFor: (w) => ({
         state: Ms(w.lastRunOutcome, !1),
         message: w.lastRunMessage ?? ""
       }),
-      renderRows: (w) => /* @__PURE__ */ k(ee, { children: [
+      renderRows: (w) => /* @__PURE__ */ x(ee, { children: [
         /* @__PURE__ */ a(il, {
           sliceId: e.id,
           sliceType: e.sliceType,
@@ -5171,11 +5171,11 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       ] })
     })
   });
-  return u?.sliceBoundary ? u.sliceBoundary(e, g) : g;
+  return c?.sliceBoundary ? c.sliceBoundary(e, g) : g;
 }, Kr = ({ template: e, width: t }) => /* @__PURE__ */ a("div", {
   className: "event-modeling-collection-grid-template",
   style: { width: t },
-  children: /* @__PURE__ */ k("div", {
+  children: /* @__PURE__ */ x("div", {
     className: "event-modeling-collection-grid-template__bar",
     children: [/* @__PURE__ */ a("i", {
       className: "pi pi-window-maximize",
@@ -5185,13 +5185,13 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       children: e.name
     })]
   })
-}), gl = ({ feature: e, options: t, moduleId: n, collection: r, rows: i, heights: o, slices: s, externalEvents: d, slots: c, editor: l, onSliceArea: u, sliceAreas: f, renderHeader: y, onSlicesChanged: p }) => {
-  const m = A(null), g = (S) => s.slice(0, s.findIndex((C) => C.id.equals(S))).filter((C) => C.sliceType === B.stateChange).flatMap((C) => C.events), v = (S) => s.slice(s.findIndex((C) => C.id.equals(S)) + 1).filter((C) => C.sliceType === B.stateChange).flatMap((C) => C.events), h = q(async (S, C, O) => {
+}), gl = ({ feature: e, options: t, moduleId: n, collection: r, rows: i, heights: o, slices: s, externalEvents: d, slots: u, editor: l, onSliceArea: c, sliceAreas: f, renderHeader: y, onSlicesChanged: h }) => {
+  const m = A(null), g = (S) => s.slice(0, s.findIndex((C) => C.id.equals(S))).filter((C) => C.sliceType === B.stateChange).flatMap((C) => C.events), v = (S) => s.slice(s.findIndex((C) => C.id.equals(S)) + 1).filter((C) => C.sliceType === B.stateChange).flatMap((C) => C.events), p = q(async (S, C, L) => {
     const N = f.get(C.toString());
-    N?.moveIn(S, O);
+    N?.moveIn(S, L);
     try {
-      const L = await l.onMoveSlice?.(S, e.id, C, O) ?? !1;
-      return N?.completeMoveIn(S.id, L), L;
+      const O = await l.onMoveSlice?.(S, e.id, C, L) ?? !1;
+      return N?.completeMoveIn(S.id, O), O;
     } catch {
       return N?.completeMoveIn(S.id, !1), !1;
     }
@@ -5200,11 +5200,11 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     e.id,
     f
   ]), w = q((S, C) => {
-    !l.onMoveSlice || C.equals(e.id) || !m.current?.moveOut(S.id) || h(S, C, Number.MAX_SAFE_INTEGER).then((O) => m.current?.completeMoveOut(S.id, O));
+    !l.onMoveSlice || C.equals(e.id) || !m.current?.moveOut(S.id) || p(S, C, Number.MAX_SAFE_INTEGER).then((L) => m.current?.completeMoveOut(S.id, L));
   }, [
     l.onMoveSlice,
     e.id,
-    h
+    p
   ]), b = {
     ...t,
     dragging: !1,
@@ -5220,13 +5220,13 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     width: Oe(e),
     headerVisibility: t.headerVisibility,
     header: y(b),
-    screenTemplate: c?.featureTemplate ? c.featureTemplate(e, Oe(e)) : e.screenTemplate && /* @__PURE__ */ a(Kr, {
+    screenTemplate: u?.featureTemplate ? u.featureTemplate(e, Oe(e)) : e.screenTemplate && /* @__PURE__ */ a(Kr, {
       template: e.screenTemplate,
       width: Oe(e)
     }),
     slices: /* @__PURE__ */ a(md, {
       ref: (S) => {
-        m.current = S, u(S);
+        m.current = S, c(S);
       },
       initialSlices: e.slices,
       moduleId: n,
@@ -5234,10 +5234,10 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       featureCollapsed: t.collapsed,
       hideEmptyPlaceholder: t.headerVisibility === "hidden",
       createSlice: (S) => S,
-      onSlicesChanged: p,
+      onSlicesChanged: h,
       onAddSlice: l.onAddSlice ? (S, C) => l.onAddSlice?.(e.id, S, C) ?? Promise.resolve(void 0) : void 0,
       onReorderSlices: l.onReorderSlices ? (S) => l.onReorderSlices?.(e.id, S) ?? Promise.resolve(!1) : void 0,
-      onMoveSlice: l.onMoveSlice ? h : void 0,
+      onMoveSlice: l.onMoveSlice ? p : void 0,
       validateSliceDrop: l.validateSliceDrop,
       renderSlice: (S, C) => /* @__PURE__ */ a(ml, {
         slice: S,
@@ -5250,7 +5250,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
         priorEvents: g(S.id),
         followingEvents: v(S.id),
         externalEvents: d,
-        slots: c,
+        slots: u,
         controls: {
           collapsed: C.collapsed,
           sliceCollapsed: C.sliceCollapsed,
@@ -5258,22 +5258,22 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
           onSliceDragStart: C.onSliceDragStart,
           onAddSlice: l.onAddSlice ? C.addSlice : void 0,
           onToggleCollapse: l.onSliceCollapseChanged ? () => {
-            m.current?.updateSlices((O) => O.map((N) => N.id.equals(S.id) ? {
+            m.current?.updateSlices((L) => L.map((N) => N.id.equals(S.id) ? {
               ...N,
               collapsed: !C.sliceCollapsed
             } : N)), l.onSliceCollapseChanged?.(e.id, S.id, !C.sliceCollapsed);
           } : void 0,
-          onRenamed: l.onSliceRenamed ? (O) => {
-            m.current?.updateSlices((N) => N.map((L) => L.id.equals(S.id) ? {
-              ...L,
-              name: O
-            } : L)), l.onSliceRenamed?.(e.id, S.id, O);
+          onRenamed: l.onSliceRenamed ? (L) => {
+            m.current?.updateSlices((N) => N.map((O) => O.id.equals(S.id) ? {
+              ...O,
+              name: L
+            } : O)), l.onSliceRenamed?.(e.id, S.id, L);
           } : void 0,
-          onMoveToFeature: l.onMoveSlice ? (O) => w(S, O) : void 0,
-          onDuplicated: l.onSliceDuplicated ? (O) => {
-            l.onSliceDuplicated?.(e.id, S.id, O), m.current?.addProjectedSlice({
+          onMoveToFeature: l.onMoveSlice ? (L) => w(S, L) : void 0,
+          onDuplicated: l.onSliceDuplicated ? (L) => {
+            l.onSliceDuplicated?.(e.id, S.id, L), m.current?.addProjectedSlice({
               ...S,
-              id: O,
+              id: L,
               name: ud(e.slices.map((N) => N.name), S.name),
               specifications: [],
               commentCount: 0,
@@ -5284,17 +5284,17 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       })
     })
   });
-}, vl = ({ ref: e, moduleId: t, collection: n, features: r, rows: i, heights: o, slots: s, editor: d, onFeaturesChanged: c }) => {
-  const l = A(/* @__PURE__ */ new Map()), u = A(null);
+}, vl = ({ ref: e, moduleId: t, collection: n, features: r, rows: i, heights: o, slots: s, editor: d, onFeaturesChanged: u }) => {
+  const l = A(/* @__PURE__ */ new Map()), c = A(null);
   tt(e, () => ({
-    addFeature: (g) => u.current?.addFeature(g) ?? Promise.resolve(),
-    addSubFeature: (g, v) => u.current?.addSubFeature(g, v) ?? Promise.resolve(),
-    updateFeature: (g, v) => u.current?.updateFeature(g, v)
+    addFeature: (g) => c.current?.addFeature(g) ?? Promise.resolve(),
+    addSubFeature: (g, v) => c.current?.addSubFeature(g, v) ?? Promise.resolve(),
+    updateFeature: (g, v) => c.current?.updateFeature(g, v)
   }), []);
   const f = Ze(n).map((g) => g.slice), y = Ze({
     ...n,
     modules: n.modules.filter((g) => !g.id.equals(t))
-  }).flatMap((g) => g.slice.events), p = (g) => d.onAddSlice ? (v, h) => l.current.get(g.toString())?.addSlice(v, void 0, h) : void 0, m = (g, v) => s?.featureHeader?.(g, v) ?? /* @__PURE__ */ a(xs, {
+  }).flatMap((g) => g.slice.events), h = (g) => d.onAddSlice ? (v, p) => l.current.get(g.toString())?.addSlice(v, void 0, p) : void 0, m = (g, v) => s?.featureHeader?.(g, v) ?? /* @__PURE__ */ a(xs, {
     featureId: g.id,
     name: g.name,
     height: Z.headerHeight,
@@ -5302,18 +5302,18 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     dragging: v.dragging,
     onDragStart: v.onDragStart,
     onToggleCollapse: v.onToggleCollapse,
-    onRenamed: v.onRenamed ? (h, w) => v.onRenamed?.(w) : void 0,
+    onRenamed: v.onRenamed ? (p, w) => v.onRenamed?.(w) : void 0,
     onAddSubFeature: v.onAddSubFeature ? () => v.onAddSubFeature?.() : void 0,
     onAddSlice: v.onAddSlice
   });
   return /* @__PURE__ */ a(gs, {
-    ref: u,
+    ref: c,
     initialFeatures: r,
     moduleId: t,
     widthOf: Oe,
     isCollapsed: (g) => g.collapsed,
     occupiesColumn: (g) => Oe(g) > 0,
-    onFeaturesChanged: c,
+    onFeaturesChanged: u,
     renderFeatureBoundary: s?.featureBoundary,
     onAddFeature: d.onAddFeature ? (g, v) => d.onAddFeature?.(t, g, v) ?? Promise.resolve(void 0) : void 0,
     onRenameFeature: d.onRenameFeature,
@@ -5321,9 +5321,9 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
     onFeaturesReordered: d.onFeaturesReordered ? (g) => d.onFeaturesReordered?.(t, g) : void 0,
     renderHeader: (g, v) => m(g, {
       ...v,
-      onDragStart: v.onDragStart ? (h) => v.onDragStart?.(g.id, g.name, h) : void 0,
+      onDragStart: v.onDragStart ? (p) => v.onDragStart?.(g.id, g.name, p) : void 0,
       onAddSubFeature: v.addSubFeature,
-      onAddSlice: p(g.id)
+      onAddSlice: h(g.id)
     }),
     renderColumn: (g, v) => /* @__PURE__ */ a(gl, {
       feature: g,
@@ -5337,33 +5337,33 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       slots: s,
       editor: d,
       sliceAreas: l.current,
-      onSlicesChanged: (h) => u.current?.updateFeature(g.id, (w) => ({
+      onSlicesChanged: (p) => c.current?.updateFeature(g.id, (w) => ({
         ...w,
-        slices: h
+        slices: p
       })),
-      onSliceArea: (h) => {
-        h ? l.current.set(g.id.toString(), h) : l.current.delete(g.id.toString());
+      onSliceArea: (p) => {
+        p ? l.current.set(g.id.toString(), p) : l.current.delete(g.id.toString());
       },
-      renderHeader: (h) => m(g, {
-        ...h,
-        onAddSlice: p(g.id)
+      renderHeader: (p) => m(g, {
+        ...p,
+        onAddSlice: h(g.id)
       })
     })
   });
-}, hl = ({ module: e, liveFeatures: t, index: n, collection: r, rows: i, heights: o, slots: s, editor: d, dragging: c, onDragStart: l, onAddModule: u, onToggleCollapse: f, onRenamed: y, onFeaturesChanged: p }) => {
+}, hl = ({ module: e, liveFeatures: t, index: n, collection: r, rows: i, heights: o, slots: s, editor: d, dragging: u, onDragStart: l, onAddModule: c, onToggleCollapse: f, onRenamed: y, onFeaturesChanged: h }) => {
   const m = A(null), g = A(null), v = d.onAddFeature ? (S) => {
     g.current?.addFeature(S);
-  } : void 0, h = Zt(m, void 0, "heavy"), w = Dr(e.name, t ?? e.features), b = /* @__PURE__ */ a(qa, {
+  } : void 0, p = Zt(m, void 0, "heavy"), w = Dr(e.name, t ?? e.features), b = /* @__PURE__ */ a(qa, {
     moduleId: e.id,
     collectionId: r.id,
     index: n,
     width: w,
     collapsed: e.collapsed,
-    dragging: c,
+    dragging: u,
     frameRef: m,
     header: s?.moduleHeader?.(e, {
       onDragStart: l,
-      onAddModule: u,
+      onAddModule: c,
       onAddFeature: v,
       onToggleCollapse: f,
       onRenamed: y
@@ -5372,7 +5372,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       name: e.name,
       height: Z.headerHeight,
       collapsed: e.collapsed,
-      onAddModule: u,
+      onAddModule: c,
       onToggleCollapse: f,
       onRenamed: y ? (S, C) => y(C) : void 0,
       onDragStart: l,
@@ -5382,7 +5382,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       template: e.screenTemplate,
       width: w
     }),
-    content: h ? /* @__PURE__ */ a(vl, {
+    content: p ? /* @__PURE__ */ a(vl, {
       ref: g,
       moduleId: e.id,
       collection: r,
@@ -5391,7 +5391,7 @@ var zs = 250, Vs = "Inter, Helvetica, Arial, sans-serif", Ue = ({ name: e, backg
       heights: o,
       slots: s,
       editor: d,
-      onFeaturesChanged: (S) => p?.(e.id, S)
+      onFeaturesChanged: (S) => h?.(e.id, S)
     }) : /* @__PURE__ */ a(Va, {
       width: w,
       height: Tr(r, i, o),
@@ -5415,23 +5415,23 @@ function fl(e, t) {
     features: n.features.map((r) => Qr(t, r))
   }));
 }
-var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect: r, onCollectionMoving: i, onCollectionMoved: o, canMove: s, onAddModule: d, onModulesReordered: c, onCollapseChanged: l, onRenameModule: u, onModulesChanged: f, onFeaturesChanged: y, onPersistenceError: p, rowLabels: m, onActorsReordered: g, onAddFeature: v, onRenameFeature: h, onFeatureCollapseChanged: w, onFeaturesReordered: b, onAddSlice: S, onReorderSlices: C, onMoveSlice: O, validateSliceDrop: N, onSliceCollapseChanged: L, onSliceRenamed: j, onSliceDuplicated: H }) => {
-  const { readOnly: x, editing: T } = K(), [W, X] = F(/* @__PURE__ */ new Map()), D = q((ie, ce) => X((be) => new Map(be).set(ie.toString(), ce)), []), z = oe(() => fl(e.modules, W), [e.modules, W]), I = x ? {
+var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect: r, onCollectionMoving: i, onCollectionMoved: o, canMove: s, onAddModule: d, onModulesReordered: u, onCollapseChanged: l, onRenameModule: c, onModulesChanged: f, onFeaturesChanged: y, onPersistenceError: h, rowLabels: m, onActorsReordered: g, onAddFeature: v, onRenameFeature: p, onFeatureCollapseChanged: w, onFeaturesReordered: b, onAddSlice: S, onReorderSlices: C, onMoveSlice: L, validateSliceDrop: N, onSliceCollapseChanged: O, onSliceRenamed: j, onSliceDuplicated: H }) => {
+  const { readOnly: M, editing: T } = K(), [W, X] = F(/* @__PURE__ */ new Map()), D = q((ie, ce) => X((be) => new Map(be).set(ie.toString(), ce)), []), z = oe(() => fl(e.modules, W), [e.modules, W]), I = M ? {
     onFeatureCollapseChanged: D,
     onSliceCollapseChanged: (ie, ce, be) => D(ce, be)
   } : {
     onAddFeature: v,
-    onRenameFeature: h,
+    onRenameFeature: p,
     onFeatureCollapseChanged: w,
     onFeaturesReordered: b,
     onAddSlice: S,
     onReorderSlices: C,
-    onMoveSlice: O,
+    onMoveSlice: L,
     validateSliceDrop: N,
-    onSliceCollapseChanged: L,
+    onSliceCollapseChanged: O,
     onSliceRenamed: j,
     onSliceDuplicated: H
-  }, [M, E] = F(e.modules), [$, Y] = F(/* @__PURE__ */ new Map()), Q = A(null), [P, V] = F(0), te = !!(d || c || l || u || g || v || h || w || b || S || C || O || L || j || H || s && i && o || pl(T)), R = x || !te, G = x ? z : e.modules, _ = (R ? G : M).map((ie) => ({
+  }, [k, E] = F(e.modules), [$, Y] = F(/* @__PURE__ */ new Map()), Q = A(null), [P, V] = F(0), te = !!(d || u || l || c || g || v || p || w || b || S || C || L || O || j || H || s && i && o || pl(T)), R = M || !te, G = M ? z : e.modules, _ = (R ? G : k).map((ie) => ({
     ...ie,
     features: R ? ie.features : $.get(ie.id.toString()) ?? ie.features
   })), J = {
@@ -5464,7 +5464,7 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
     const je = ie.querySelector(".event-modeling-grid-slices-area");
     return je && be.observe(je), () => be.disconnect();
   }, [
-    M,
+    k,
     $,
     t
   ]);
@@ -5474,11 +5474,11 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
     contentRows: ae,
     rowHeights: Ye,
     actors: e.actors,
-    onActorsReordered: x ? void 0 : g
+    onActorsReordered: M ? void 0 : g
   };
   return /* @__PURE__ */ a(Xt.Provider, {
-    value: x || !te,
-    children: /* @__PURE__ */ k("div", {
+    value: M || !te,
+    children: /* @__PURE__ */ x("div", {
       className: "event-modeling-grid-container event-modeling-collection-grid",
       onClick: r,
       children: [s && i && o && /* @__PURE__ */ a(go, {
@@ -5487,7 +5487,7 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
         getZoom: t,
         onCollectionMoving: i,
         onCollectionMoved: o
-      }), /* @__PURE__ */ k("div", {
+      }), /* @__PURE__ */ x("div", {
         className: "event-modeling-grid-content-row",
         ref: Q,
         children: [di && (m ? m(fn) : /* @__PURE__ */ a(ma, { ...fn })), /* @__PURE__ */ a("div", {
@@ -5498,10 +5498,10 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
               collectionId: e.id,
               initialModules: G,
               onAddModule: d,
-              onModulesReordered: c,
-              onCollapseChanged: x ? (ie, ce) => (D(ie, ce), Promise.resolve(!0)) : l,
-              onRenameModule: u,
-              onPersistenceError: p,
+              onModulesReordered: u,
+              onCollapseChanged: M ? (ie, ce) => (D(ie, ce), Promise.resolve(!0)) : l,
+              onRenameModule: c,
+              onPersistenceError: h,
               onModulesChanged: (ie) => {
                 E(ie), f?.(ie);
               },
@@ -5546,7 +5546,7 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
   role: "img",
   "aria-label": t,
   xmlns: "http://www.w3.org/2000/svg",
-  children: /* @__PURE__ */ k("g", {
+  children: /* @__PURE__ */ x("g", {
     transform: "translate(0,328) scale(0.1,-0.1)",
     children: [
       /* @__PURE__ */ a("path", { d: "M974 2789 c-319 -182 -592 -343 -607 -358 -16 -14 -34 -35 -40 -46 -8 -14 -10 -229 -9 -735 l3 -715 23 -35 c18 -26 74 -64 222 -151 110 -64 374 -219 589 -344 214 -126 400 -231 413 -233 13 -3 31 3 42 13 19 17 20 33 20 307 0 233 -3 294 -15 317 -10 21 -93 74 -327 211 -172 101 -324 194 -338 207 l-25 23 0 401 0 401 27 23 c14 12 161 100 327 194 177 101 310 184 325 202 l26 31 0 293 c0 318 -1 325 -55 325 -12 0 -283 -149 -601 -331z" }),
@@ -5645,25 +5645,29 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
     items: r,
     align: "right"
   });
-}, ei = ({ showLogo: e, showViewOptions: t, toolbar: n, children: r }) => {
-  const i = fe(), o = ro(), [s, d] = F(i), c = o ? i : s, l = o ?? d;
+}, ei = ({ showLogo: e, showViewOptions: t, toolbar: n, chrome: r, children: i }) => {
+  const o = fe(), s = ro(), [d, u] = F(o), l = s ? o : d, c = s ?? u, f = t || n !== void 0, y = r?.controlsSurface, h = r?.captureAttributes?.content;
   return /* @__PURE__ */ a(io, {
-    presentation: c,
-    onChange: l,
-    children: /* @__PURE__ */ k("div", {
+    presentation: l,
+    onChange: c,
+    children: /* @__PURE__ */ x("div", {
       className: "event-model-board",
       children: [
-        r,
+        i,
         e && /* @__PURE__ */ a(wl, { className: "event-model-board__logo" }),
-        (t || n !== void 0) && /* @__PURE__ */ a("div", {
+        f && /* @__PURE__ */ a("div", {
           className: "event-model-board__toolbar",
-          onPointerDown: (u) => u.stopPropagation(),
-          children: /* @__PURE__ */ k(hi, {
-            orientation: "horizontal",
-            "aria-label": "Board",
-            children: [n, t && /* @__PURE__ */ a(Sl, {
-              presentation: c,
-              onChange: l
+          onPointerDown: (m) => m.stopPropagation(),
+          children: /* @__PURE__ */ x("div", {
+            className: `event-model-board__toolbar-surface${y ? "" : " event-model-board__toolbar-surface--plain"}`,
+            ...y && h ? { [h]: "true" } : {},
+            children: [y, /* @__PURE__ */ x(hi, {
+              orientation: "horizontal",
+              "aria-label": "Board",
+              children: [n, t && /* @__PURE__ */ a(Sl, {
+                presentation: l,
+                onChange: c
+              })]
             })]
           })
         })
@@ -5734,15 +5738,15 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
     center: Xo(o.start, o.end)
   }];
 }), Nl = 2e3, Il = ({ links: e, collections: t, getZoom: n, onCollectionsLinked: r, onCollectionsUnlinked: i, onPersistenceError: o }) => {
-  const s = K(), d = s.messages.links, c = s.readOnly ? void 0 : r, l = s.readOnly ? void 0 : i, [u, f] = F(null), [y, p] = F(() => Cl(e)), m = A(y), g = (I) => {
-    const M = I(m.current);
-    m.current = M, p(M);
+  const s = K(), d = s.messages.links, u = s.readOnly ? void 0 : r, l = s.readOnly ? void 0 : i, [c, f] = F(null), [y, h] = F(() => Cl(e)), m = A(y), g = (I) => {
+    const k = I(m.current);
+    m.current = k, h(k);
   };
   re(() => {
     e !== m.current.snapshot && g((I) => mn(I, e));
   }, [e]);
-  const v = wt(y), h = A(null), w = A(null), b = `module-collection-link-arrow-${Gt().replace(/:/g, "")}`, S = oe(() => new Map(t.map((I) => {
-    const M = {
+  const v = wt(y), p = A(null), w = A(null), b = `module-collection-link-arrow-${Gt().replace(/:/g, "")}`, S = oe(() => new Map(t.map((I) => {
+    const k = {
       x: I.position.x,
       y: I.position.y,
       width: I.width,
@@ -5750,83 +5754,83 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
     };
     return [I.id.toString(), {
       id: I.id,
-      rect: M,
+      rect: k,
       content: {
-        ...M,
-        height: Math.min(M.height, I.contentHeight)
+        ...k,
+        height: Math.min(k.height, I.contentHeight)
       }
     }];
-  })), [t]), C = oe(() => kl(v, (I) => S.get(I)?.content), [v, S]), O = (I, M) => {
+  })), [t]), C = oe(() => kl(v, (I) => S.get(I)?.content), [v, S]), L = (I, k) => {
     for (const E of S.values())
-      if (E.id.toString() !== M.toString() && Jo(I, E.rect))
+      if (E.id.toString() !== k.toString() && Jo(I, E.rect))
         return E;
     return null;
-  }, N = (I, M) => {
+  }, N = (I, k) => {
     const E = n() || 1;
     return {
-      x: M.anchor.x + (I.clientX - M.startClientX) / E,
-      y: M.anchor.y + (I.clientY - M.startClientY) / E
+      x: k.anchor.x + (I.clientX - k.startClientX) / E,
+      y: k.anchor.y + (I.clientY - k.startClientY) / E
     };
-  }, L = (I, M) => (E) => {
-    m.current.pending.size > 0 || (E.stopPropagation(), E.preventDefault(), E.currentTarget.setPointerCapture(E.pointerId), h.current = {
+  }, O = (I, k) => (E) => {
+    m.current.pending.size > 0 || (E.stopPropagation(), E.preventDefault(), E.currentTarget.setPointerCapture(E.pointerId), p.current = {
       sourceId: I,
-      anchor: M,
+      anchor: k,
       startClientX: E.clientX,
       startClientY: E.clientY
     }, w.current = null, f({
       sourceId: I.toString(),
-      pointer: M,
+      pointer: k,
       targetId: null
     }));
   }, j = (I) => {
-    const M = h.current;
-    if (!M) return;
-    const E = N(I, M), $ = O(E, M.sourceId);
+    const k = p.current;
+    if (!k) return;
+    const E = N(I, k), $ = L(E, k.sourceId);
     w.current = $?.id.toString() ?? null, f({
-      sourceId: M.sourceId.toString(),
+      sourceId: k.sourceId.toString(),
       pointer: E,
       targetId: $?.id.toString() ?? null
     });
   }, H = async (I) => {
-    const M = h.current, E = w.current;
-    if (h.current = null, w.current = null, f(null), !M) return;
-    const $ = O(N(I, M), M.sourceId), Y = Zo($, E, (V) => S.get(V), M.sourceId.toString());
-    if (!Y || !c || m.current.pending.size > 0) return;
+    const k = p.current, E = w.current;
+    if (p.current = null, w.current = null, f(null), !k) return;
+    const $ = L(N(I, k), k.sourceId), Y = Zo($, E, (V) => S.get(V), k.sourceId.toString());
+    if (!Y || !u || m.current.pending.size > 0) return;
     const Q = {
       id: de.create(),
-      sourceCollectionId: M.sourceId,
+      sourceCollectionId: k.sourceId,
       targetCollectionId: Y.id
-    }, P = Ce(M.sourceId, Y.id);
+    }, P = Ce(k.sourceId, Y.id);
     if (!(m.current.pending.has(P) || wt(m.current).some((V) => Ce(V.sourceCollectionId, V.targetCollectionId) === P))) {
       g((V) => xl(V, Q));
       try {
-        const V = await c(M.sourceId, Y.id);
+        const V = await u(k.sourceId, Y.id);
         g((te) => Wn(te, Q, V));
       } catch (V) {
         if (g((te) => Wn(te, Q)), o) o(V);
         else throw V;
       }
     }
-  }, x = async (I) => {
+  }, M = async (I) => {
     if (!(!l || m.current.pending.size > 0)) {
-      g((M) => Ml(M, I));
+      g((k) => Ml(k, I));
       try {
-        const M = await l(I);
-        g((E) => zn(E, I, M));
-      } catch (M) {
-        if (g((E) => zn(E, I, !1)), o) o(M);
-        else throw M;
+        const k = await l(I);
+        g((E) => zn(E, I, k));
+      } catch (k) {
+        if (g((E) => zn(E, I, !1)), o) o(k);
+        else throw k;
       }
     }
   }, T = () => {
-    h.current = null, w.current = null, f(null);
+    p.current = null, w.current = null, f(null);
   }, W = Array.from(S.values());
   if (W.length === 0) return null;
-  const X = Ko(W.map((I) => I.rect), u ? [u.pointer] : [], Nl), D = u ? S.get(u.sourceId) : void 0, z = u?.targetId ? S.get(u.targetId) : void 0;
-  return /* @__PURE__ */ k("div", {
+  const X = Ko(W.map((I) => I.rect), c ? [c.pointer] : [], Nl), D = c ? S.get(c.sourceId) : void 0, z = c?.targetId ? S.get(c.targetId) : void 0;
+  return /* @__PURE__ */ x("div", {
     className: "module-collection-link-layer",
     children: [
-      /* @__PURE__ */ k("svg", {
+      /* @__PURE__ */ x("svg", {
         className: "module-collection-link-layer__svg",
         style: {
           left: X.x,
@@ -5850,13 +5854,13 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
               className: "module-collection-link-layer__arrow-head"
             })
           }) }),
-          C.map(({ link: I, path: M }) => /* @__PURE__ */ a("path", {
-            d: M,
+          C.map(({ link: I, path: k }) => /* @__PURE__ */ a("path", {
+            d: k,
             className: "module-collection-link-layer__arrow",
             markerEnd: `url(#${b})`
           }, I.id.toString())),
-          u && D && (() => {
-            const I = br(D.content, Yo(u.pointer));
+          c && D && (() => {
+            const I = br(D.content, Yo(c.pointer));
             return /* @__PURE__ */ a("path", {
               d: Kt(I.start, I.end, I.axis),
               className: "module-collection-link-layer__preview",
@@ -5874,8 +5878,8 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
           height: z.rect.height
         }
       }),
-      c && y.pending.size === 0 && W.map(({ id: I, content: M }) => {
-        const E = jo(M);
+      u && y.pending.size === 0 && W.map(({ id: I, content: k }) => {
+        const E = jo(k);
         return /* @__PURE__ */ a("div", {
           className: "module-collection-link-layer__handle",
           style: {
@@ -5883,23 +5887,23 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
             top: E.y
           },
           title: d.dragToLink,
-          onPointerDown: L(I, E),
+          onPointerDown: O(I, E),
           onPointerMove: j,
           onPointerUp: H,
           onPointerCancel: T
         }, I.toString());
       }),
-      l && y.pending.size === 0 && C.map(({ link: I, center: M }) => /* @__PURE__ */ a("button", {
+      l && y.pending.size === 0 && C.map(({ link: I, center: k }) => /* @__PURE__ */ a("button", {
         type: "button",
         className: "module-collection-link-layer__delete",
         style: {
-          left: M.x,
-          top: M.y
+          left: k.x,
+          top: k.y
         },
         title: d.removeLink,
         onPointerDown: (E) => E.stopPropagation(),
         onClick: () => {
-          x(I.id);
+          M(I.id);
         },
         children: /* @__PURE__ */ a("i", { className: "pi pi-times" })
       }, I.id.toString()))
@@ -5963,35 +5967,35 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
   }
 }, dt = 50, ct = () => {
 }, Al = (e) => e.stopPropagation(), ti = ui(({ notes: e }, t) => {
-  const { editing: n, actions: r, messages: i } = K(), o = A(new Rl(e)), s = A(/* @__PURE__ */ new Set()), d = A(!1), c = A(/* @__PURE__ */ new Set()), l = A(/* @__PURE__ */ new Set()), [u, f] = F(0), [y, p] = F(), [m, g] = F(), v = A(null), h = oe(() => [v], []), w = q(() => f((x) => x + 1), []);
+  const { editing: n, actions: r, messages: i } = K(), o = A(new Rl(e)), s = A(/* @__PURE__ */ new Set()), d = A(!1), u = A(/* @__PURE__ */ new Set()), l = A(/* @__PURE__ */ new Set()), [c, f] = F(0), [y, h] = F(), [m, g] = F(), v = A(null), p = oe(() => [v], []), w = q(() => f((M) => M + 1), []);
   re(() => {
     o.current.reconcile(e), w();
   }, [e, w]), re(() => {
-    const x = o.current.nextExpiration;
-    if (x === void 0) return;
+    const M = o.current.nextExpiration;
+    if (M === void 0) return;
     const T = setTimeout(() => {
       o.current.expire(), w();
-    }, Math.max(0, x - Date.now()));
+    }, Math.max(0, M - Date.now()));
     return () => clearTimeout(T);
-  }, [u, w]);
-  const b = q((x, T, W) => s.current.has(x) ? Promise.resolve() : (s.current.add(x), o.current.change(x, T), o.current.begin(x, T), w(), Promise.resolve().then(W).then((X) => (X === !1 && (o.current.rollback(x, T), o.current.get(x) || p((D) => D === x ? void 0 : D), w()), X !== !1)).catch((X) => (o.current.rollback(x, T), o.current.get(x) || p((D) => D === x ? void 0 : D), w(), r.stickyNoteError ? r.stickyNoteError(X) : console.error(X), !1)).finally(() => {
-    o.current.settle(x, T), s.current.delete(x), w();
+  }, [c, w]);
+  const b = q((M, T, W) => s.current.has(M) ? Promise.resolve() : (s.current.add(M), o.current.change(M, T), o.current.begin(M, T), w(), Promise.resolve().then(W).then((X) => (X === !1 && (o.current.rollback(M, T), o.current.get(M) || h((D) => D === M ? void 0 : D), w()), X !== !1)).catch((X) => (o.current.rollback(M, T), o.current.get(M) || h((D) => D === M ? void 0 : D), w(), r.stickyNoteError ? r.stickyNoteError(X) : console.error(X), !1)).finally(() => {
+    o.current.settle(M, T), s.current.delete(M), w();
   })), [r, w]);
-  tt(t, () => ({ add(x) {
+  tt(t, () => ({ add(M) {
     const T = n.onStickyNoteAdded;
     if (!T || d.current) return;
     d.current = !0, r.stickyNoteCreatingChanged?.(!0);
     const W = {
       id: de.create().toString(),
       position: {
-        x: x.x - dt / 2,
-        y: x.y - dt / 2
+        x: M.x - dt / 2,
+        y: M.y - dt / 2
       },
       width: dt,
       height: dt,
       text: i.stickyNotes.newNote
     };
-    p(W.id), b(W.id, W, () => T(W)).then((X) => {
+    h(W.id), b(W.id, W, () => T(W)).then((X) => {
       X && r.stickyNoteCreated?.(W);
     }).finally(() => {
       d.current = !1, r.stickyNoteCreatingChanged?.(!1);
@@ -6002,47 +6006,47 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
     i,
     b
   ]);
-  const S = n.onStickyNoteMoved || n.onStickyNoteResized || n.onStickyNoteTextChanged || n.onStickyNoteRemoved ? p : void 0;
-  ze(h, () => S?.(void 0), y !== void 0 && !!S);
-  const C = (x, T) => {
-    const W = o.current.get(x);
-    !W || s.current.has(x) || W.position.x === T.x && W.position.y === T.y || (c.current.add(x), o.current.change(x, {
+  const S = n.onStickyNoteMoved || n.onStickyNoteResized || n.onStickyNoteTextChanged || n.onStickyNoteRemoved ? h : void 0;
+  ze(p, () => S?.(void 0), y !== void 0 && !!S);
+  const C = (M, T) => {
+    const W = o.current.get(M);
+    !W || s.current.has(M) || W.position.x === T.x && W.position.y === T.y || (u.current.add(M), o.current.change(M, {
       ...W,
       position: T
     }), w());
-  }, O = (x, T) => {
-    const W = o.current.get(x);
-    !W || s.current.has(x) || W.position.x === T.position.x && W.position.y === T.position.y && W.width === T.width && W.height === T.height || (l.current.add(x), o.current.change(x, {
+  }, L = (M, T) => {
+    const W = o.current.get(M);
+    !W || s.current.has(M) || W.position.x === T.position.x && W.position.y === T.position.y && W.width === T.width && W.height === T.height || (l.current.add(M), o.current.change(M, {
       ...W,
       ...T
     }), w());
-  }, N = (x) => {
-    if (!c.current.delete(x)) return;
-    const T = o.current.get(x);
-    T && n.onStickyNoteMoved && b(x, T, () => n.onStickyNoteMoved?.(x, T.position));
-  }, L = (x) => {
-    if (!l.current.delete(x)) return;
-    const T = o.current.get(x);
-    T && n.onStickyNoteResized && b(x, T, () => n.onStickyNoteResized?.(x, {
+  }, N = (M) => {
+    if (!u.current.delete(M)) return;
+    const T = o.current.get(M);
+    T && n.onStickyNoteMoved && b(M, T, () => n.onStickyNoteMoved?.(M, T.position));
+  }, O = (M) => {
+    if (!l.current.delete(M)) return;
+    const T = o.current.get(M);
+    T && n.onStickyNoteResized && b(M, T, () => n.onStickyNoteResized?.(M, {
       position: T.position,
       width: T.width,
       height: T.height
     }));
-  }, j = (x, T) => {
-    const W = o.current.get(x);
-    W && W.text !== T && n.onStickyNoteTextChanged && b(x, {
+  }, j = (M, T) => {
+    const W = o.current.get(M);
+    W && W.text !== T && n.onStickyNoteTextChanged && b(M, {
       ...W,
       text: T
-    }, () => n.onStickyNoteTextChanged?.(x, T));
-  }, H = q((x) => {
-    !o.current.get(x) || !n.onStickyNoteRemoved || s.current.has(x) || (p((T) => T === x ? void 0 : T), b(x, null, () => n.onStickyNoteRemoved?.(x)));
+    }, () => n.onStickyNoteTextChanged?.(M, T));
+  }, H = q((M) => {
+    !o.current.get(M) || !n.onStickyNoteRemoved || s.current.has(M) || (h((T) => T === M ? void 0 : T), b(M, null, () => n.onStickyNoteRemoved?.(M)));
   }, [n, b]);
   return re(() => {
     if (!n.onStickyNoteRemoved || y === void 0) return;
-    const x = (T) => {
+    const M = (T) => {
       T.key !== "Delete" && T.key !== "Backspace" || El(T.target) || (T.preventDefault(), H(y));
     };
-    return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
+    return document.addEventListener("keydown", M), () => document.removeEventListener("keydown", M);
   }, [
     y,
     n,
@@ -6050,58 +6054,58 @@ var bl = () => 1, yl = ({ collection: e, getZoom: t = bl, slots: n, onDeselect:
   ]), /* @__PURE__ */ a("div", {
     ref: v,
     className: "event-model-sticky-notes",
-    children: o.current.notes.map((x) => {
-      const T = x.position?.x ?? 0, W = x.position?.y ?? 0;
+    children: o.current.notes.map((M) => {
+      const T = M.position?.x ?? 0, W = M.position?.y ?? 0;
       return /* @__PURE__ */ a(nr, {
         x: T,
         y: W,
-        zIndex: m === x.id ? 3 : 2,
-        children: /* @__PURE__ */ k("div", {
-          "data-sticky-note-id": x.id,
-          className: s.current.has(x.id) ? "event-model-sticky-note--busy" : void 0,
-          "aria-busy": s.current.has(x.id),
-          onDoubleClickCapture: n.onStickyNoteTextChanged && !s.current.has(x.id) ? void 0 : Al,
+        zIndex: m === M.id ? 3 : 2,
+        children: /* @__PURE__ */ x("div", {
+          "data-sticky-note-id": M.id,
+          className: s.current.has(M.id) ? "event-model-sticky-note--busy" : void 0,
+          "aria-busy": s.current.has(M.id),
+          onDoubleClickCapture: n.onStickyNoteTextChanged && !s.current.has(M.id) ? void 0 : Al,
           children: [/* @__PURE__ */ a(vi, {
             note: {
-              id: x.id,
+              id: M.id,
               x: T,
               y: W,
-              width: x.width,
-              height: x.height,
-              text: x.text
+              width: M.width,
+              height: M.height,
+              text: M.text
             },
-            selected: y === x.id && !!n.onStickyNoteResized && !s.current.has(x.id),
+            selected: y === M.id && !!n.onStickyNoteResized && !s.current.has(M.id),
             onSelect: S ?? ct,
             onMove: n.onStickyNoteMoved ? (X, D, z) => C(X, {
               x: D,
               y: z
             }) : ct,
             onMoveEnd: n.onStickyNoteMoved ? N : void 0,
-            onResize: n.onStickyNoteResized ? (X, D, z, I, M) => O(X, {
+            onResize: n.onStickyNoteResized ? (X, D, z, I, k) => L(X, {
               position: {
                 x: D,
                 y: z
               },
               width: I,
-              height: M
+              height: k
             }) : ct,
-            onResizeEnd: n.onStickyNoteResized ? L : void 0,
+            onResizeEnd: n.onStickyNoteResized ? O : void 0,
             onTextChange: n.onStickyNoteTextChanged ? j : ct,
             onExpandedChange: (X, D) => g((z) => D ? X : z === X ? void 0 : z)
-          }), s.current.has(x.id) && /* @__PURE__ */ a("span", {
+          }), s.current.has(M.id) && /* @__PURE__ */ a("span", {
             className: "event-model-sticky-note__progress",
             "aria-hidden": "true",
             children: /* @__PURE__ */ a(bi, { className: "event-model-sticky-note__spinner" })
           })]
         })
-      }, x.id);
+      }, M.id);
     })
   });
 });
 ti.displayName = "StickyNotes";
-var ni = tr(({ collection: e, estimatedSize: t, measuredSize: n, onSize: r, getZoom: i, canMove: o, onCollectionMoving: s, onCollectionMoved: d, content: c }) => {
-  const l = q((u) => /* @__PURE__ */ a(yl, {
-    ...u,
+var ni = tr(({ collection: e, estimatedSize: t, measuredSize: n, onSize: r, getZoom: i, canMove: o, onCollectionMoving: s, onCollectionMoved: d, content: u }) => {
+  const l = q((c) => /* @__PURE__ */ a(yl, {
+    ...c,
     getZoom: i,
     canMove: o,
     onCollectionMoving: s,
@@ -6117,7 +6121,7 @@ var ni = tr(({ collection: e, estimatedSize: t, measuredSize: n, onSize: r, getZ
     estimatedSize: t,
     measuredSize: n,
     onSize: r,
-    children: c(l)
+    children: u(l)
   });
 });
 ni.displayName = "BoardCollectionView";
@@ -6147,60 +6151,60 @@ function Un(e) {
   }, [e]);
 }
 var Fl = ({ collections: e, links: t, stickyNotes: n, readOnly: r, editor: i, canvas: o, showMinimap: s, handle: d }) => {
-  const c = r ? void 0 : i?.links, l = Co({
+  const u = r ? void 0 : i?.links, l = Co({
     initialCollections: e.initialCollections,
     onAddCollection: e.onAddCollection,
     onCollectionMoved: e.onCollectionMoved,
     onCollectionsChange: e.onCollectionsChange,
     onPersistenceError: e.onPersistenceError
-  }), { collections: u, pendingMoveIds: f, canMove: y, moveCollection: p, collectionMoved: m, addCollection: g } = l, [v, h] = F(/* @__PURE__ */ new Map()), w = A(o?.initialZoom ?? 1), b = q(() => w.current, []), S = A(null);
+  }), { collections: c, pendingMoveIds: f, canMove: y, moveCollection: h, collectionMoved: m, addCollection: g } = l, [v, p] = F(/* @__PURE__ */ new Map()), w = A(o?.initialZoom ?? 1), b = q(() => w.current, []), S = A(null);
   tt(d, () => ({
     addCollection: g,
     addStickyNote: (I) => S.current?.add(I)
   }), [g]);
-  const C = q((I, M, E) => {
-    h(($) => {
+  const C = q((I, k, E) => {
+    p(($) => {
       const Y = I.toString(), Q = $.get(Y);
-      return Q?.width === M && Q.height === E ? $ : new Map($).set(Y, {
-        width: M,
+      return Q?.width === k && Q.height === E ? $ : new Map($).set(Y, {
+        width: k,
         height: E
       });
     });
-  }, []), O = Un(e.estimateSize), { renderCollection: N } = e, L = Un(q((I) => (M) => N(I, M), [N])), j = oe(() => So(u), [u]), H = oe(() => Pl(j.map((I) => ({
+  }, []), L = Un(e.estimateSize), { renderCollection: N } = e, O = Un(q((I) => (k) => N(I, k), [N])), j = oe(() => So(c), [c]), H = oe(() => Pl(j.map((I) => ({
     position: I.position,
-    size: O(I)
-  }))), [j, O]), { countSlices: x } = e, T = oe(() => _l(u.reduce((I, M) => I + x(M), 0)), [u, x]), W = oe(() => j.flatMap((I) => {
-    const M = v.get(I.id.toString());
-    return M ? [{
+    size: L(I)
+  }))), [j, L]), { countSlices: M } = e, T = oe(() => _l(c.reduce((I, k) => I + M(k), 0)), [c, M]), W = oe(() => j.flatMap((I) => {
+    const k = v.get(I.id.toString());
+    return k ? [{
       id: I.id,
       position: I.position,
-      width: M.width,
-      height: M.height,
-      contentHeight: O(I).height
+      width: k.width,
+      height: k.height,
+      contentHeight: L(I).height
     }] : [];
   }), [
     j,
     v,
-    O
-  ]), X = o?.onTransformChange, D = q((I, M) => {
-    w.current = I, X?.(I, M);
-  }, [X]), z = /* @__PURE__ */ k(ee, { children: [
+    L
+  ]), X = o?.onTransformChange, D = q((I, k) => {
+    w.current = I, X?.(I, k);
+  }, [X]), z = /* @__PURE__ */ x(ee, { children: [
     j.map((I) => /* @__PURE__ */ a(ni, {
       collection: I,
-      estimatedSize: O(I),
+      estimatedSize: L(I),
       measuredSize: v.get(I.id.toString()),
       onSize: C,
       getZoom: b,
       canMove: y && !f.has(I.id.toString()),
-      onCollectionMoving: y ? p : void 0,
+      onCollectionMoving: y ? h : void 0,
       onCollectionMoved: y ? m : void 0,
-      content: L(I)
+      content: O(I)
     }, I.id.toString())),
     /* @__PURE__ */ a(Il, {
       links: t,
       collections: W,
       getZoom: b,
-      ...c
+      ...u
     }),
     /* @__PURE__ */ a(ti, {
       ref: S,
@@ -6224,7 +6228,7 @@ var Fl = ({ collections: e, links: t, stickyNotes: n, readOnly: r, editor: i, ca
     children: e.area ? e.area(l, z) : /* @__PURE__ */ a(Ae, { children: z })
   });
 }, $l = ({ id: e, readOnly: t = !1, showMinimap: n = !0, showLogo: r = !1, showViewOptions: i = !1, toolbar: o, editor: s, ...d }) => {
-  const c = /* @__PURE__ */ a(co, {
+  const u = /* @__PURE__ */ a(co, {
     readOnly: t,
     editing: t ? void 0 : s?.editing,
     actions: t ? void 0 : s?.actions,
@@ -6237,30 +6241,31 @@ var Fl = ({ collections: e, links: t, stickyNotes: n, readOnly: r, editor: i, ca
       ...d
     }, e.toString())
   });
-  return !r && !i && o === void 0 ? c : /* @__PURE__ */ a(ei, {
+  return !r && !i && o === void 0 ? u : /* @__PURE__ */ a(ei, {
     showLogo: r,
     showViewOptions: i,
     toolbar: o,
-    children: c
+    chrome: d.canvas?.chrome,
+    children: u
   });
 }, Yn = ({ document: e, readOnly: t = !1, editor: n, canvas: r, showMinimap: i = !0, handle: o }) => {
-  const s = t ? void 0 : n?.collection, d = t ? void 0 : n?.collectionBoundary, c = t ? void 0 : n?.collections, l = q((p, m) => {
+  const s = t ? void 0 : n?.collection, d = t ? void 0 : n?.collectionBoundary, u = t ? void 0 : n?.collections, l = q((h, m) => {
     const g = m({
-      collection: p,
-      ...s?.(p)
+      collection: h,
+      ...s?.(h)
     });
-    return d ? d(p, g) : g;
-  }, [s, d]), u = Fr(), f = q((p) => Ga(p, u), [u]), y = oe(() => ({
+    return d ? d(h, g) : g;
+  }, [s, d]), c = Fr(), f = q((h) => Ga(h, c), [c]), y = oe(() => ({
     initialCollections: e.collections,
     estimateSize: f,
     countSlices: Dl,
     renderCollection: l,
-    ...c
+    ...u
   }), [
     e.collections,
     f,
     l,
-    c
+    u
   ]);
   return /* @__PURE__ */ a($l, {
     id: e.id,
@@ -6277,6 +6282,7 @@ var Fl = ({ collections: e, links: t, stickyNotes: n, readOnly: r, editor: i, ca
   showLogo: e,
   showViewOptions: t,
   toolbar: n,
+  chrome: r.canvas?.chrome,
   children: /* @__PURE__ */ a(Yn, { ...r })
 }), pc = ({ slotName: e, order: t, children: n }) => {
   const { readOnly: r } = K();
@@ -6307,9 +6313,9 @@ var Fl = ({ collections: e, links: t, stickyNotes: n, readOnly: r, editor: i, ca
   fontWeight: 500,
   color: "rgba(255,255,255,0.80)",
   textAlign: "center"
-}, oi = ({ slice: e, height: t, collapsed: n, selectableStatuses: r, unselectableStatusReason: i, error: o, leading: s, trailing: d, onToggleCollapse: c }) => {
-  const l = K(), { showStatuses: u = !0 } = fe(), { readOnly: f } = De(), { editing: y, actions: p } = l, m = y.onSliceRenamed, g = y.onSliceStatusChanged, v = y.onSliceAdded, h = y.onSliceOpenStateSet, w = (p.sliceHeader ?? []).filter((b) => !b.when || b.when(e));
-  return /* @__PURE__ */ k("div", {
+}, oi = ({ slice: e, height: t, collapsed: n, selectableStatuses: r, unselectableStatusReason: i, error: o, leading: s, trailing: d, onToggleCollapse: u }) => {
+  const l = K(), { showStatuses: c = !0 } = fe(), { readOnly: f } = De(), { editing: y, actions: h } = l, m = y.onSliceRenamed, g = y.onSliceStatusChanged, v = y.onSliceAdded, p = y.onSliceOpenStateSet, w = (h.sliceHeader ?? []).filter((b) => !b.when || b.when(e));
+  return /* @__PURE__ */ x("div", {
     className: "event-modeling-grid-slice-column-header",
     style: {
       height: t,
@@ -6317,14 +6323,14 @@ var Fl = ({ collections: e, links: t, stickyNotes: n, readOnly: r, editor: i, ca
       ...o ? { border: "2px solid #ef4444" } : {}
     },
     children: [
-      /* @__PURE__ */ k("div", {
+      /* @__PURE__ */ x("div", {
         className: "event-modeling-grid-slice-column-header-left",
         children: [/* @__PURE__ */ a(Qt, {
           collapsed: n,
-          onToggle: l.readOnly ? c : !f && h ? () => h(e.id, !n) : void 0
+          onToggle: l.readOnly ? u : !f && p ? () => p(e.id, !n) : void 0
         }), !n && s]
       }),
-      !n && /* @__PURE__ */ k("div", {
+      !n && /* @__PURE__ */ x("div", {
         className: "event-modeling-grid-slice-column-header-center",
         children: [/* @__PURE__ */ a(me, {
           content: /* @__PURE__ */ a(fs, { sliceType: e.sliceType }),
@@ -6338,10 +6344,10 @@ var Fl = ({ collections: e, links: t, stickyNotes: n, readOnly: r, editor: i, ca
           })
         }), o && /* @__PURE__ */ a(Cr, { error: o })]
       }),
-      !n && /* @__PURE__ */ k("div", {
+      !n && /* @__PURE__ */ x("div", {
         className: "event-modeling-grid-slice-column-header-right",
         children: [
-          u && /* @__PURE__ */ a(tn, {
+          c && /* @__PURE__ */ a(tn, {
             status: e.status,
             onStatusChanged: g ? (b) => g(e.id, b) : void 0,
             selectable: r,
@@ -6391,7 +6397,7 @@ var ql = 3, Gl = ({ drag: e, headerHeight: t }) => e ? He(/* @__PURE__ */ a(Ul,
     const o = r.current;
     if (!(!o || !i))
       return o.replaceChildren(i), () => o.replaceChildren();
-  }, [i]), /* @__PURE__ */ k("div", {
+  }, [i]), /* @__PURE__ */ x("div", {
     style: {
       position: "fixed",
       left: e.currentX - e.ghostWidth / 2 * e.zoom,
@@ -6406,7 +6412,7 @@ var ql = 3, Gl = ({ drag: e, headerHeight: t }) => e ? He(/* @__PURE__ */ a(Ul,
       ref: r,
       className: `event-modeling-grid-slice-ghost${n ? " event-modeling-grid-slice-ghost--invalid" : ""}`,
       style: { width: e.ghostWidth }
-    }) : /* @__PURE__ */ k("div", {
+    }) : /* @__PURE__ */ x("div", {
       className: `event-modeling-grid-slice-ghost-fallback${n ? " event-modeling-grid-slice-ghost-fallback--invalid" : ""}`,
       style: {
         width: e.ghostWidth,
@@ -6425,7 +6431,7 @@ var ql = 3, Gl = ({ drag: e, headerHeight: t }) => e ? He(/* @__PURE__ */ a(Ul,
 }, jn = ({ isValid: e, marginLeft: t }) => /* @__PURE__ */ a("div", {
   className: Wl(e),
   style: { marginLeft: t }
-}), Lt = ({ moduleId: e, featureId: t, active: n = !1, busy: r = !1, acceptsReorder: i = !0, acceptsMove: o = !0, style: s, className: d, children: c }) => /* @__PURE__ */ a("div", {
+}), Lt = ({ moduleId: e, featureId: t, active: n = !1, busy: r = !1, acceptsReorder: i = !0, acceptsMove: o = !0, style: s, className: d, children: u }) => /* @__PURE__ */ a("div", {
   "data-slice-drop-target": "true",
   "data-slice-module-id": e.toString(),
   "data-slice-feature-id": t.toString(),
@@ -6434,7 +6440,7 @@ var ql = 3, Gl = ({ drag: e, headerHeight: t }) => e ? He(/* @__PURE__ */ a(Ul,
   "aria-busy": r || void 0,
   className: [n && "event-modeling-grid-slice-drop-target--active", d].filter(Boolean).join(" ") || void 0,
   style: s,
-  children: c
+  children: u
 }), Yl = (e) => {
   if (!e.targetFeatureId.equals(e.featureId)) return { index: e.dropIndex };
   const t = e.dropIndex > e.sourceIndex ? e.dropIndex - 1 : e.dropIndex;
@@ -6445,22 +6451,22 @@ function jl(e, t, n, r) {
   s.current = i;
   const d = A(r);
   d.current = r;
-  const c = A(n);
-  c.current = n;
-  const { readOnly: l } = K(), u = q((g, v, h) => {
+  const u = A(n);
+  u.current = n;
+  const { readOnly: l } = K(), c = q((g, v, p) => {
     try {
-      return d.current?.(g, v, h);
+      return d.current?.(g, v, p);
     } catch (w) {
       console.error("Slice drop validation failed — allowing the drop", w);
       return;
     }
-  }, []), f = q((g, v, h) => {
-    const w = document.querySelector(`[data-slice-drop-target="true"][data-slice-module-id="${g.toString()}"][data-slice-feature-id="${h.toString()}"]`);
-    return h.equals(v) ? w?.dataset.sliceAcceptsReorder === "true" : w?.dataset.sliceAcceptsMove === "true";
-  }, []), y = q((g, v, h, w, b, S, C, O = null) => {
+  }, []), f = q((g, v, p) => {
+    const w = document.querySelector(`[data-slice-drop-target="true"][data-slice-module-id="${g.toString()}"][data-slice-feature-id="${p.toString()}"]`);
+    return p.equals(v) ? w?.dataset.sliceAcceptsReorder === "true" : w?.dataset.sliceAcceptsMove === "true";
+  }, []), y = q((g, v, p, w, b, S, C, L = null) => {
     const N = e.slices.findIndex((j) => j.id.equals(g));
     if (N === -1) return;
-    const L = u(g, e.id, N);
+    const O = c(g, e.id, N);
     o({
       sliceId: g,
       moduleId: t,
@@ -6469,64 +6475,64 @@ function jl(e, t, n, r) {
       sourceIndex: N,
       ghostLabel: v,
       ghostWidth: b,
-      ghost: O,
-      currentX: h,
+      ghost: L,
+      currentX: p,
       currentY: w,
       dropIndex: N,
       headerY: S,
       zoom: C,
-      isValid: (L?.isValid ?? !0) && f(t, e.id, e.id),
-      invalidReason: L?.reason
+      isValid: (O?.isValid ?? !0) && f(t, e.id, e.id),
+      invalidReason: O?.reason
     });
   }, [
     e,
     t,
-    u,
+    c,
     f
-  ]), p = q((g, v) => {
-    const h = Array.from(document.querySelectorAll(`[data-slice-drop-target="true"][data-slice-module-id="${g.toString()}"]`));
-    if (h.length === 0) return e.id;
-    for (let w = 0; w < h.length; w++) {
-      const b = h[w].getBoundingClientRect();
-      if (v < b.left + b.width / 2) return de.parse(h[w].dataset.sliceFeatureId);
+  ]), h = q((g, v) => {
+    const p = Array.from(document.querySelectorAll(`[data-slice-drop-target="true"][data-slice-module-id="${g.toString()}"]`));
+    if (p.length === 0) return e.id;
+    for (let w = 0; w < p.length; w++) {
+      const b = p[w].getBoundingClientRect();
+      if (v < b.left + b.width / 2) return de.parse(p[w].dataset.sliceFeatureId);
     }
-    return de.parse(h[h.length - 1].dataset.sliceFeatureId);
+    return de.parse(p[p.length - 1].dataset.sliceFeatureId);
   }, [e.id]), m = q((g, v) => {
-    const h = Array.from(document.querySelectorAll(`[data-slice-col="true"][data-slice-feature-id="${g.toString()}"]`));
-    if (h.length === 0) return 0;
-    for (let w = 0; w < h.length; w++) {
-      const b = h[w].getBoundingClientRect();
+    const p = Array.from(document.querySelectorAll(`[data-slice-col="true"][data-slice-feature-id="${g.toString()}"]`));
+    if (p.length === 0) return 0;
+    for (let w = 0; w < p.length; w++) {
+      const b = p[w].getBoundingClientRect();
       if (v < b.left + b.width / 2) return w;
     }
-    return h.length;
+    return p.length;
   }, []);
   return re(() => {
     if (!i) return;
-    const g = (h) => {
+    const g = (p) => {
       const w = s.current;
       if (!w) return;
-      const b = p(w.moduleId, h.clientX), S = m(b, h.clientX), C = u(w.sliceId, b, S);
-      o((O) => O ? {
-        ...O,
-        currentX: h.clientX,
-        currentY: h.clientY,
+      const b = h(w.moduleId, p.clientX), S = m(b, p.clientX), C = c(w.sliceId, b, S);
+      o((L) => L ? {
+        ...L,
+        currentX: p.clientX,
+        currentY: p.clientY,
         targetFeatureId: b,
         dropIndex: S,
         isValid: (C?.isValid ?? !0) && f(w.moduleId, w.featureId, b),
         invalidReason: C?.reason
       } : void 0);
     }, v = () => {
-      const h = s.current, w = h && Yl(h);
-      h && w && f(h.moduleId, h.featureId, h.targetFeatureId) && c.current?.(h.sliceId, h.featureId, h.targetFeatureId, w.index), o(void 0);
+      const p = s.current, w = p && Yl(p);
+      p && w && f(p.moduleId, p.featureId, p.targetFeatureId) && u.current?.(p.sliceId, p.featureId, p.targetFeatureId, w.index), o(void 0);
     };
     return window.addEventListener("pointermove", g, !0), window.addEventListener("pointerup", v, !0), window.addEventListener("pointercancel", v, !0), () => {
       window.removeEventListener("pointermove", g, !0), window.removeEventListener("pointerup", v, !0), window.removeEventListener("pointercancel", v, !0);
     };
   }, [
     i,
-    p,
+    h,
     m,
-    u,
+    c,
     f
   ]), {
     sliceDrag: i,
@@ -6534,33 +6540,33 @@ function jl(e, t, n, r) {
   };
 }
 function Xl(e, t, n, r, i) {
-  const [o, s] = F(null), d = A(null), c = A(i);
-  c.current = i;
+  const [o, s] = F(null), d = A(null), u = A(i);
+  u.current = i;
   const l = () => {
     d.current !== null && (clearTimeout(d.current), d.current = null);
-  }, u = (g, v, h) => {
+  }, c = (g, v, p) => {
     l(), s({
       ...g,
       committed: !0
-    }), g.element.setPointerCapture(g.pointerId), e && c.current?.(e, t, v, h, n, g.startY - g.grabOffsetY, Jl(g.element), ha(g.element));
+    }), g.element.setPointerCapture(g.pointerId), e && u.current?.(e, t, v, p, n, g.startY - g.grabOffsetY, Jl(g.element), ha(g.element));
   };
   return re(() => {
     if (!o || o.committed) return;
-    const g = (h) => {
-      if (h.pointerId !== o.pointerId) return;
-      const w = zl(o.pointerType, h.clientX - o.startX, h.clientY - o.startY);
-      w === Fe.abandon && s(null), w === Fe.commit && u(o, h.clientX, h.clientY);
-    }, v = (h) => {
-      h.pointerId === o.pointerId && s(null);
+    const g = (p) => {
+      if (p.pointerId !== o.pointerId) return;
+      const w = zl(o.pointerType, p.clientX - o.startX, p.clientY - o.startY);
+      w === Fe.abandon && s(null), w === Fe.commit && c(o, p.clientX, p.clientY);
+    }, v = (p) => {
+      p.pointerId === o.pointerId && s(null);
     };
     return window.addEventListener("pointermove", g, !0), window.addEventListener("pointerup", v, !0), window.addEventListener("pointercancel", v, !0), () => {
       window.removeEventListener("pointermove", g, !0), window.removeEventListener("pointerup", v, !0), window.removeEventListener("pointercancel", v, !0);
     };
-  }, [o]), re(() => (!o || o.committed || o.pointerType !== "touch" || (d.current = setTimeout(() => u(o, o.startX, o.startY), 450)), l), [o]), {
+  }, [o]), re(() => (!o || o.committed || o.pointerType !== "touch" || (d.current = setTimeout(() => c(o, o.startX, o.startY), 450)), l), [o]), {
     onPointerDown: (g) => {
       const v = g.currentTarget;
       if (!e) return;
-      const h = Vl({
+      const p = Vl({
         target: g.target instanceof Element ? g.target : null,
         clientX: g.clientX,
         clientY: g.clientY,
@@ -6568,8 +6574,8 @@ function Xl(e, t, n, r, i) {
         pointerType: g.pointerType,
         elementTop: v.getBoundingClientRect().top
       }, r);
-      h && (s({
-        ...h,
+      p && (s({
+        ...p,
         element: v,
         committed: !1
       }), g.pointerType !== "touch" && g.stopPropagation());
@@ -6592,13 +6598,13 @@ function Jl(e) {
   }
   return 1;
 }
-var Zl = ({ featureId: e, name: t, status: n, width: r, collapsed: i, isDragging: o = !1, onDragStart: s, ref: d, onMouseEnter: c, onMouseLeave: l, onFocusCapture: u, onBlurCapture: f, children: y }) => {
-  const { sliceId: p } = De(), m = Xl(p, t, r, i || !s, s);
+var Zl = ({ featureId: e, name: t, status: n, width: r, collapsed: i, isDragging: o = !1, onDragStart: s, ref: d, onMouseEnter: u, onMouseLeave: l, onFocusCapture: c, onBlurCapture: f, children: y }) => {
+  const { sliceId: h } = De(), m = Xl(h, t, r, i || !s, s);
   return /* @__PURE__ */ a("div", {
     ref: d,
     "data-slice-col": "true",
     "data-slice-feature-id": e.toString(),
-    "data-slice-id": p?.toString(),
+    "data-slice-id": h?.toString(),
     className: `event-modeling-grid-slice-column event-modeling-grid-slice-column--${$t(n)}${i ? " event-modeling-grid-slice-column--collapsed" : ""}`,
     style: {
       width: r,
@@ -6606,9 +6612,9 @@ var Zl = ({ featureId: e, name: t, status: n, width: r, collapsed: i, isDragging
       transition: "opacity 0.15s",
       ...o ? { opacity: 0.35 } : {}
     },
-    onMouseEnter: c,
+    onMouseEnter: u,
     onMouseLeave: l,
-    onFocusCapture: u,
+    onFocusCapture: c,
     onBlurCapture: f,
     onPointerDown: m.onPointerDown,
     onPointerMove: m.onPointerMove,
@@ -6617,15 +6623,15 @@ var Zl = ({ featureId: e, name: t, status: n, width: r, collapsed: i, isDragging
     onContextMenu: m.onContextMenu,
     children: y
   });
-}, Kl = ({ featureId: e, slice: t, eventCount: n, collapsed: r, isDragging: i = !1, onSliceDragStart: o, header: s, headerHeight: d = 44, body: c, specifications: l, collapsedWidth: u }) => {
-  const { readOnly: f } = K(), y = Qa(t.id.toString()), { ref: p, onMouseEnter: m, onMouseLeave: g } = ns(y?.connectedSliceIds), v = A(null), h = Zt(v), [w, b] = F(!1), S = A(!1), C = pr({
+}, Kl = ({ featureId: e, slice: t, eventCount: n, collapsed: r, isDragging: i = !1, onSliceDragStart: o, header: s, headerHeight: d = 44, body: u, specifications: l, collapsedWidth: c }) => {
+  const { readOnly: f } = K(), y = Qa(t.id.toString()), { ref: h, onMouseEnter: m, onMouseLeave: g } = ns(y?.connectedSliceIds), v = A(null), p = Zt(v), [w, b] = F(!1), S = A(!1), C = pr({
     sliceType: t.sliceType,
     eventCount: n
-  }), O = () => {
+  }), L = () => {
     S.current = !0, m();
   }, N = () => {
     S.current = !1, w || g();
-  }, L = (j) => {
+  }, O = (j) => {
     const H = j.relatedTarget;
     (!(H instanceof Node) || !j.currentTarget.contains(H)) && b(!1);
   };
@@ -6635,7 +6641,7 @@ var Zl = ({ featureId: e, name: t, status: n, width: r, collapsed: i, isDragging
     sliceId: t.id,
     sliceType: t.sliceType,
     status: t.status,
-    children: /* @__PURE__ */ k("div", {
+    children: /* @__PURE__ */ x("div", {
       ref: v,
       style: {
         display: "flex",
@@ -6643,25 +6649,25 @@ var Zl = ({ featureId: e, name: t, status: n, width: r, collapsed: i, isDragging
         alignItems: "stretch",
         flexShrink: 0
       },
-      children: [/* @__PURE__ */ k(Zl, {
-        ref: p,
+      children: [/* @__PURE__ */ x(Zl, {
+        ref: h,
         featureId: e,
         name: t.name,
         status: t.status,
-        width: r ? u : C,
+        width: r ? c : C,
         collapsed: r,
         isDragging: i,
         onDragStart: f ? void 0 : o,
-        onMouseEnter: O,
+        onMouseEnter: L,
         onMouseLeave: N,
         onFocusCapture: () => b(!0),
-        onBlurCapture: L,
+        onBlurCapture: O,
         children: [s ?? /* @__PURE__ */ a(oi, {
           slice: t,
           height: d,
           collapsed: r
-        }), typeof c == "function" ? c(h) : h && c]
-      }), typeof l == "function" ? l(h, C) : h && l]
+        }), typeof u == "function" ? u(p) : p && u]
+      }), typeof l == "function" ? l(p, C) : p && l]
     })
   });
 }, Ql = (e, t) => {
@@ -6821,14 +6827,14 @@ var Zl = ({ featureId: e, name: t, status: n, width: r, collapsed: i, isDragging
   };
   return n ? qe(r, e.snapshot) : r;
 }, qe = (e, t) => {
-  const n = e.additions.filter((p) => !p.confirmed || !xe(t, p.slice.id)), r = e.outgoing.filter((p) => !p.confirmed || xe(t, p.slice.id)), i = e.incoming.filter((p) => !p.confirmed || !xe(t, p.slice.id)), o = e.order?.ids.filter((p) => xe(t, p)), s = t.filter((p) => o?.some((m) => le(m, p.id))).map((p) => p.id), d = o !== void 0 && o.length > 0 && o.every((p, m) => le(p, s[m])), c = e.order?.confirmed && d ? void 0 : e.order, l = (p, m) => e.slices.find((g) => le(g.id, p)) ?? m, u = t.filter((p) => !r.some((m) => le(m.slice.id, p.id))).map((p) => e.additions.some((m) => le(m.slice.id, p.id)) || e.incoming.some((m) => le(m.slice.id, p.id)) ? l(p.id, p) : p), f = i.reduce((p, m) => vn(p, l(m.slice.id, m.slice), m.index), u), y = n.reduce((p, m) => xe(p, m.slice.id) ? p : gn(p, l(m.slice.id, m.slice), m.afterSliceId), f);
+  const n = e.additions.filter((h) => !h.confirmed || !xe(t, h.slice.id)), r = e.outgoing.filter((h) => !h.confirmed || xe(t, h.slice.id)), i = e.incoming.filter((h) => !h.confirmed || !xe(t, h.slice.id)), o = e.order?.ids.filter((h) => xe(t, h)), s = t.filter((h) => o?.some((m) => le(m, h.id))).map((h) => h.id), d = o !== void 0 && o.length > 0 && o.every((h, m) => le(h, s[m])), u = e.order?.confirmed && d ? void 0 : e.order, l = (h, m) => e.slices.find((g) => le(g.id, h)) ?? m, c = t.filter((h) => !r.some((m) => le(m.slice.id, h.id))).map((h) => e.additions.some((m) => le(m.slice.id, h.id)) || e.incoming.some((m) => le(m.slice.id, h.id)) ? l(h.id, h) : h), f = i.reduce((h, m) => vn(h, l(m.slice.id, m.slice), m.index), c), y = n.reduce((h, m) => xe(h, m.slice.id) ? h : gn(h, l(m.slice.id, m.slice), m.afterSliceId), f);
   return {
-    slices: c ? cd(y, c.ids) : y,
+    slices: u ? cd(y, u.ids) : y,
     snapshot: t,
     additions: n,
     outgoing: r,
     incoming: i,
-    order: c
+    order: u
   };
 }, cd = (e, t) => {
   const n = t.map((i) => e.find((o) => le(o.id, i))).filter((i) => i !== void 0);
@@ -6838,8 +6844,8 @@ var Zl = ({ featureId: e, name: t, status: n, width: r, collapsed: i, isDragging
   const n = t.replace(/\s*\(\d+\)$/, "").trimEnd(), r = new RegExp(`^${n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s+\\((\\d+)\\)$`), i = new Set(e.map((o) => r.exec(o)).filter((o) => o !== null).map((o) => Number(o[1])));
   return `${n} (${Array.from({ length: i.size + 1 }, (o, s) => s + 1).find((o) => !i.has(o))})`;
 };
-function md({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollapsed: i, hideEmptyPlaceholder: o = !1, onSlicesChanged: s, createSlice: d, onAddSlice: c, onReorderSlices: l, onMoveSlice: u, validateSliceDrop: f, renderSlice: y }) {
-  const { readOnly: p, messages: m } = K(), g = A(ed(t)), v = A(void 0), [h, w] = F(g.current), { slices: b } = h, S = A(!1), [C, O] = F(!1), N = q((E) => {
+function md({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollapsed: i, hideEmptyPlaceholder: o = !1, onSlicesChanged: s, createSlice: d, onAddSlice: u, onReorderSlices: l, onMoveSlice: c, validateSliceDrop: f, renderSlice: y }) {
+  const { readOnly: h, messages: m } = K(), g = A(ed(t)), v = A(void 0), [p, w] = F(g.current), { slices: b } = p, S = A(!1), [C, L] = F(!1), N = q((E) => {
     const $ = g.current, Y = E($);
     Y !== $ && (g.current = Y, w(Y), Y.slices !== $.slices && (v.current = Y.slices, s?.(Y.slices)));
   }, [s]);
@@ -6849,7 +6855,7 @@ function md({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
       snapshot: t
     } : qe(E, t));
   }, [t, N]);
-  const L = q((E) => {
+  const O = q((E) => {
     N(($) => {
       const Y = E($.slices);
       return Y === $.slices ? $ : {
@@ -6857,35 +6863,35 @@ function md({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
         slices: Y
       };
     });
-  }, [N]), j = q((E, $) => N((Y) => rd(Y, E, $)), [N]), H = q((E, $) => N((Y) => ld(Y, E, $)), [N]), x = q((E, $) => N((Y) => dd(Y, E, $)), [N]), T = q((E) => [...g.current.additions, ...g.current.incoming].some(($) => $.slice.id.equals(E)) || !g.current.slices.some(($) => $.id.equals(E)) ? !1 : (N(($) => ad($, E)), !0), [N]), W = q((E, $) => N((Y) => sd(Y, E, $)), [N]), X = q((E, $, Y) => {
-    if (p || !c || S.current) return;
-    S.current = !0, O(!0);
+  }, [N]), j = q((E, $) => N((Y) => rd(Y, E, $)), [N]), H = q((E, $) => N((Y) => ld(Y, E, $)), [N]), M = q((E, $) => N((Y) => dd(Y, E, $)), [N]), T = q((E) => [...g.current.additions, ...g.current.incoming].some(($) => $.slice.id.equals(E)) || !g.current.slices.some(($) => $.id.equals(E)) ? !1 : (N(($) => ad($, E)), !0), [N]), W = q((E, $) => N((Y) => sd(Y, E, $)), [N]), X = q((E, $, Y) => {
+    if (h || !u || S.current) return;
+    S.current = !0, L(!0);
     const Q = d(Ql(E, Y));
-    N((P) => nd(P, Q, $)), Promise.resolve().then(() => c(Q, $)).then((P) => {
+    N((P) => nd(P, Q, $)), Promise.resolve().then(() => u(Q, $)).then((P) => {
       N((V) => Xn(V, Q.id, P));
     }).catch(() => N((P) => Xn(P, Q.id))).finally(() => {
-      S.current = !1, O(!1);
+      S.current = !1, L(!1);
     });
   }, [
-    p,
+    h,
     d,
-    c,
+    u,
     N
   ]);
   tt(e, () => ({
     addSlice: X,
-    updateSlices: L,
+    updateSlices: O,
     addProjectedSlice: j,
     moveIn: H,
-    completeMoveIn: x,
+    completeMoveIn: M,
     moveOut: T,
     completeMoveOut: W
   }), [
     X,
-    L,
+    O,
     j,
     H,
-    x,
+    M,
     T,
     W
   ]);
@@ -6893,7 +6899,7 @@ function md({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
     id: r,
     slices: b
   }), [r, b]), z = q((E, $, Y, Q) => {
-    if (p || !$.equals(r)) return;
+    if (h || !$.equals(r)) return;
     const P = g.current.slices.findIndex((V) => V.id.equals(E));
     if (!(P < 0 || [...g.current.additions, ...g.current.incoming].some((V) => V.slice.id.equals(E)))) {
       if (Y.equals(r)) {
@@ -6901,30 +6907,30 @@ function md({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
         const V = od(g.current, P, Q);
         if (V === g.current) return;
         N(() => V), Promise.resolve().then(() => l(V.slices.map((te) => te.id))).then((te) => N((R) => Jn(R, te))).catch(() => N((te) => Jn(te, !1)));
-      } else if (u) {
+      } else if (c) {
         const V = g.current.slices[P];
         if (!T(E)) return;
-        Promise.resolve().then(() => u(V, Y, Q)).then((te) => W(E, te)).catch(() => W(E, !1));
+        Promise.resolve().then(() => c(V, Y, Q)).then((te) => W(E, te)).catch(() => W(E, !1));
       }
     }
   }, [
-    p,
+    h,
     r,
     l,
-    u,
+    c,
     N,
     T,
     W
-  ]), { sliceDrag: I, handleSliceDragStart: M } = jl(D, n, l || u ? z : void 0, f);
-  return b.length ? /* @__PURE__ */ k(ee, { children: [/* @__PURE__ */ a(Gl, {
+  ]), { sliceDrag: I, handleSliceDragStart: k } = jl(D, n, l || c ? z : void 0, f);
+  return b.length ? /* @__PURE__ */ x(ee, { children: [/* @__PURE__ */ a(Gl, {
     drag: I,
     headerHeight: Z.headerHeight
   }), /* @__PURE__ */ a(Lt, {
     moduleId: n,
     featureId: r,
     busy: C,
-    acceptsReorder: !p && !!l,
-    acceptsMove: !p && !!u,
+    acceptsReorder: !h && !!l,
+    acceptsMove: !h && !!c,
     active: I?.targetFeatureId.equals(r),
     style: {
       display: "flex",
@@ -6944,9 +6950,9 @@ function md({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
           collapsed: i || V,
           sliceCollapsed: V,
           isDragging: I?.sliceId.equals(E.id) ?? !1,
-          onSliceDragStart: [...h.additions, ...h.incoming].some((te) => te.slice.id.equals(E.id)) ? void 0 : M,
+          onSliceDragStart: [...p.additions, ...p.incoming].some((te) => te.slice.id.equals(E.id)) ? void 0 : k,
           addSlice: X,
-          updateSlices: L
+          updateSlices: O
         })
       }, E.id.toString())), Y && $ === b.length - 1 && I?.dropIndex === b.length && P.push(/* @__PURE__ */ a(jn, {
         isValid: I.isValid,
@@ -6956,8 +6962,8 @@ function md({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
   })] }) : i ? null : o ? /* @__PURE__ */ a(Lt, {
     moduleId: n,
     featureId: r,
-    acceptsReorder: !p && !!l,
-    acceptsMove: !p && !!u,
+    acceptsReorder: !h && !!l,
+    acceptsMove: !h && !!c,
     style: {
       width: 0,
       flexShrink: 0
@@ -6966,8 +6972,8 @@ function md({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
     moduleId: n,
     featureId: r,
     busy: C,
-    acceptsReorder: !p && !!l,
-    acceptsMove: !p && !!u,
+    acceptsReorder: !h && !!l,
+    acceptsMove: !h && !!c,
     className: "event-modeling-slices-empty",
     style: { width: Math.round(Z.sliceWidth * 1.5) },
     children: m.slices.empty
@@ -6978,8 +6984,8 @@ var gd = {
   [U.Chat]: "chat",
   [U.System]: "system"
 }, vd = ({ sliceType: e, contentRows: t, rowHeights: n, actors: r, renderCell: i }) => /* @__PURE__ */ a(ee, { children: t.flatMap((o) => {
-  const s = Ya(o, e, [...t]), d = n[o], c = gd[o];
-  if (c === void 0) return [/* @__PURE__ */ a(Ae, { children: i({
+  const s = Ya(o, e, [...t]), d = n[o], u = gd[o];
+  if (u === void 0) return [/* @__PURE__ */ a(Ae, { children: i({
     rowType: o,
     conn: s,
     rowHeight: d
@@ -6989,15 +6995,15 @@ var gd = {
     rowType: o,
     conn: s,
     rowHeight: d
-  }) }, `row:${c}`)] : l.map((u) => /* @__PURE__ */ a(Ae, { children: i({
+  }) }, `row:${u}`)] : l.map((c) => /* @__PURE__ */ a(Ae, { children: i({
     rowType: o,
     conn: s,
     rowHeight: d,
-    actor: u
-  }) }, `role:${u.id.toString()}`)) : Array.from({ length: Math.max(1, l.length) }, (u, f) => /* @__PURE__ */ a("div", {
-    className: `event-modeling-grid-slice-cell event-modeling-grid-slice-cell--${c}`,
+    actor: c
+  }) }, `role:${c.id.toString()}`)) : Array.from({ length: Math.max(1, l.length) }, (c, f) => /* @__PURE__ */ a("div", {
+    className: `event-modeling-grid-slice-cell event-modeling-grid-slice-cell--${u}`,
     style: { height: d }
-  }, `row:${c}:${f}`));
+  }, `row:${u}:${f}`));
 }) }), Zn = "38";
 function hd(e) {
   if (e.sliceType === B.stateChange && e.hasCommand) return et.background;
@@ -7005,7 +7011,7 @@ function hd(e) {
 }
 var Sc = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(ee, { children: t.map((r) => {
   const i = r === U.Interaction ? hd(e) : void 0, o = r === U.Events ? Math.min(e.eventCount, 3) : 0;
-  return /* @__PURE__ */ k("div", {
+  return /* @__PURE__ */ x("div", {
     className: "event-modeling-grid-slice-cell event-modeling-grid-slice-placeholder-row",
     style: { height: n[r] },
     "aria-hidden": !0,
@@ -7083,49 +7089,49 @@ var Sc = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(ee,
 ], Cd = ({ triggerType: e, onTriggerKindChosen: t, onTriggerOpened: n }) => {
   const r = ge(), [i, o] = F(!1), s = A(null), d = A([s]).current;
   ze(d, () => o(!1), i);
-  const c = e === void 0 ? void 0 : ai(e), l = (u) => (f) => {
-    f.stopPropagation(), u();
+  const u = e === void 0 ? void 0 : ai(e), l = (c) => (f) => {
+    f.stopPropagation(), c();
   };
-  return c ? /* @__PURE__ */ a("div", {
+  return u ? /* @__PURE__ */ a("div", {
     className: "system-row-cell__trigger-wrapper",
     children: /* @__PURE__ */ a("button", {
       className: "system-row-cell__trigger-btn system-row-cell__trigger-btn--active",
       title: r.triggerControl.edit,
       onPointerDown: l(n),
-      children: /* @__PURE__ */ a("i", { className: c })
+      children: /* @__PURE__ */ a("i", { className: u })
     })
-  }) : /* @__PURE__ */ k("div", {
+  }) : /* @__PURE__ */ x("div", {
     ref: s,
     className: "system-row-cell__trigger-wrapper",
     children: [/* @__PURE__ */ a("button", {
       className: "system-row-cell__trigger-btn",
       title: r.triggerControl.add,
-      onPointerDown: l(() => o((u) => !u)),
+      onPointerDown: l(() => o((c) => !c)),
       children: /* @__PURE__ */ a("i", { className: "pi pi-plus" })
     }), i && /* @__PURE__ */ a("div", {
       className: "system-row-cell__trigger-menu",
-      children: Sd.map((u) => /* @__PURE__ */ k("div", {
+      children: Sd.map((c) => /* @__PURE__ */ x("div", {
         className: "system-row-cell__trigger-menu-item",
         onPointerDown: l(() => {
-          o(!1), t(u);
+          o(!1), t(c);
         }),
         children: [/* @__PURE__ */ a("div", {
           className: "system-row-cell__trigger-menu-item-title",
-          children: r.triggerControl.kinds[u].title
+          children: r.triggerControl.kinds[c].title
         }), /* @__PURE__ */ a("div", {
           className: "system-row-cell__trigger-menu-item-description",
-          children: r.triggerControl.kinds[u].description
+          children: r.triggerControl.kinds[c].description
         })]
-      }, u))
+      }, c))
     })]
   });
 }, xd = ({ sliceType: e, isSystemSlice: t, collapsed: n = !1, conn: r, rowHeight: i, triggerType: o }) => {
-  const { readOnly: s, sliceId: d } = De(), { onTriggerKindChosen: c, onTriggerOpened: l } = K().editing, u = ge(), f = o === void 0 ? void 0 : ai(o), y = { height: i }, p = t && e === B.automation;
+  const { readOnly: s, sliceId: d } = De(), { onTriggerKindChosen: u, onTriggerOpened: l } = K().editing, c = ge(), f = o === void 0 ? void 0 : ai(o), y = { height: i }, h = t && e === B.automation;
   return n ? /* @__PURE__ */ a("div", {
     style: y,
     className: "event-modeling-grid-slice-cell event-modeling-grid-slice-cell--centered event-modeling-grid-slice-cell--system event-modeling-grid-slice-cell--collapsed",
     children: t && /* @__PURE__ */ a(At, {})
-  }) : /* @__PURE__ */ k("div", {
+  }) : /* @__PURE__ */ x("div", {
     style: y,
     "data-card-id": "system",
     "data-slice-id": d?.toString(),
@@ -7133,23 +7139,23 @@ var Sc = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(ee,
     children: [
       r.topOutgoing && /* @__PURE__ */ a(bt, {}),
       r.topIncoming && /* @__PURE__ */ a(ft, {}),
-      e === B.automation ? /* @__PURE__ */ k(ee, { children: [r.bottomIncoming && /* @__PURE__ */ a(Qe, { columnPosition: "left" }), r.bottomOutgoing && /* @__PURE__ */ a(Ke, { columnPosition: "right" })] }) : /* @__PURE__ */ k(ee, { children: [r.bottomOutgoing && /* @__PURE__ */ a(Ke, {}), r.bottomIncoming && /* @__PURE__ */ a(Qe, {})] }),
+      e === B.automation ? /* @__PURE__ */ x(ee, { children: [r.bottomIncoming && /* @__PURE__ */ a(Qe, { columnPosition: "left" }), r.bottomOutgoing && /* @__PURE__ */ a(Ke, { columnPosition: "right" })] }) : /* @__PURE__ */ x(ee, { children: [r.bottomOutgoing && /* @__PURE__ */ a(Ke, {}), r.bottomIncoming && /* @__PURE__ */ a(Qe, {})] }),
       r.passthrough && /* @__PURE__ */ a(Ua, {}),
       t && (e === B.automation ? /* @__PURE__ */ a("span", {
         "data-flow-node": ue.cogwheel,
         className: "system-row-cell__cogwheel",
         children: /* @__PURE__ */ a(At, {})
       }) : /* @__PURE__ */ a(At, {})),
-      p && !s && d && c && l && /* @__PURE__ */ a(Cd, {
+      h && !s && d && u && l && /* @__PURE__ */ a(Cd, {
         triggerType: o,
-        onTriggerKindChosen: (m) => c(d, m),
+        onTriggerKindChosen: (m) => u(d, m),
         onTriggerOpened: () => l(d)
       }),
-      p && s && o !== void 0 && f && /* @__PURE__ */ a("div", {
+      h && s && o !== void 0 && f && /* @__PURE__ */ a("div", {
         className: "system-row-cell__trigger-wrapper",
         children: /* @__PURE__ */ a("span", {
           className: "system-row-cell__trigger-btn system-row-cell__trigger-btn--active system-row-cell__trigger-btn--readonly",
-          title: wd(o, u),
+          title: wd(o, c),
           children: /* @__PURE__ */ a("i", { className: f })
         })
       })
@@ -7191,46 +7197,53 @@ var Sc = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(ee,
       })
     })
   });
-}, Nd = ({ elements: e, windowSize: t, layout: n, collapsed: r = !1, conn: i, rowHeight: o, actorId: s }) => {
-  const { readOnly: d, sliceId: c } = De(), { editing: l, actions: u, readOnly: f } = K(), { onPrototypeOpened: y, onPrototypeAdded: p } = l, m = A(null), [g, v] = F(), h = Si().prototypeThumbnail, w = { height: o }, b = "event-modeling-grid-slice-cell event-modeling-grid-slice-cell--centered event-modeling-grid-slice-cell--ui";
+}, Nd = ({ elements: e, windowSize: t, layout: n, collapsed: r = !1, conn: i, rowHeight: o, actorId: s, hasScreen: d = !1, renderThumbnail: u }) => {
+  const { readOnly: l, sliceId: c } = De(), { editing: f, actions: y, readOnly: h } = K(), { onPrototypeOpened: m, onPrototypeAdded: g } = f, v = A(null), [p, w] = F(), b = Si().prototypeThumbnail, S = { height: o }, C = "event-modeling-grid-slice-cell event-modeling-grid-slice-cell--centered event-modeling-grid-slice-cell--ui";
   if (r) return /* @__PURE__ */ a("div", {
-    style: w,
-    className: b
+    style: S,
+    className: C
+  });
+  const L = e.length > 0 || d, N = !l && c && m && c && m ? () => m(c, s, v.current?.getBoundingClientRect() ?? new DOMRect()) : h ? () => w(v.current?.getBoundingClientRect() ?? new DOMRect()) : void 0, O = /* @__PURE__ */ a(wi, {
+    elements: [...e],
+    windowSize: t,
+    layout: n,
+    onClick: N,
+    openTitle: h ? b.openPreview : void 0
   });
-  const S = e.length > 0, C = !d && c && y && c && y ? () => y(c, s, m.current?.getBoundingClientRect() ?? new DOMRect()) : f ? () => v(m.current?.getBoundingClientRect() ?? new DOMRect()) : void 0;
-  return /* @__PURE__ */ k("div", {
-    style: w,
-    className: b,
+  return /* @__PURE__ */ x("div", {
+    style: S,
+    className: C,
     children: [
-      i.bottomOutgoing && S && /* @__PURE__ */ a(Ke, {}),
-      i.bottomIncoming && S && /* @__PURE__ */ a(Qe, {}),
-      /* @__PURE__ */ k("div", {
+      i.bottomOutgoing && L && /* @__PURE__ */ a(Ke, {}),
+      i.bottomIncoming && L && /* @__PURE__ */ a(Qe, {}),
+      /* @__PURE__ */ x("div", {
         className: "event-modeling-grid-slice-cell-items",
-        children: [S && /* @__PURE__ */ a("div", {
-          ref: m,
-          className: `event-modeling-grid-ui-preview${C ? " event-modeling-grid-ui-preview--clickable" : ""}`,
+        children: [L && /* @__PURE__ */ a("div", {
+          ref: v,
+          className: `event-modeling-grid-ui-preview${N ? " event-modeling-grid-ui-preview--clickable" : ""}`,
           "data-flow-node": ue.ui,
-          children: /* @__PURE__ */ a(wi, {
-            elements: [...e],
+          children: u ? u({
+            elements: e,
             windowSize: t,
             layout: n,
-            onClick: C,
-            openTitle: f ? h.openPreview : void 0
-          })
-        }), g && /* @__PURE__ */ a(yi, {
+            onClick: N,
+            openTitle: h ? b.openPreview : void 0,
+            fallback: O
+          }) : O
+        }), p && /* @__PURE__ */ a(yi, {
           elements: e,
           windowSize: t,
           layout: n,
-          sourceRect: g,
-          onClose: () => v(void 0)
+          sourceRect: p,
+          onClose: () => w(void 0)
         })]
       }),
-      !d && c && p && !S && /* @__PURE__ */ a(Ge, {
+      !l && c && g && !L && /* @__PURE__ */ a(Ge, {
         placement: Te.add,
         children: /* @__PURE__ */ a(kd, {
-          templates: u.prototypeTemplates ?? [],
-          onFromScratch: (O) => p(c, s, O),
-          onFromTemplate: (O, N) => O.onChosen(c, s, N)
+          templates: y.prototypeTemplates ?? [],
+          onFromScratch: (j) => g(c, s, j),
+          onFromTemplate: (j, H) => j.onChosen(c, s, H)
         })
       })
     ]
@@ -7253,7 +7266,7 @@ var Sc = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(ee,
     style: { height: r },
     className: i,
     children: /* @__PURE__ */ a(Kn, {})
-  }) : /* @__PURE__ */ k("div", {
+  }) : /* @__PURE__ */ x("div", {
     style: { height: r },
     "data-card-id": "chat",
     "data-slice-id": e.toString(),
@@ -7269,16 +7282,16 @@ var Sc = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(ee,
   if (e) return /* @__PURE__ */ a("div", {
     style: { height: n },
     className: d,
-    children: Array.from({ length: r }, (l, u) => /* @__PURE__ */ a("div", { className: "event-modeling-grid-mini-card event-modeling-grid-mini-card--event" }, u))
+    children: Array.from({ length: r }, (l, c) => /* @__PURE__ */ a("div", { className: "event-modeling-grid-mini-card event-modeling-grid-mini-card--event" }, c))
   });
-  const c = r > 0;
-  return /* @__PURE__ */ k("div", {
+  const u = r > 0;
+  return /* @__PURE__ */ x("div", {
     style: { height: n },
     className: d,
     children: [
-      t.topIncoming && c && /* @__PURE__ */ a(ft, {}),
-      t.topOutgoing && c && /* @__PURE__ */ a(bt, {}),
-      /* @__PURE__ */ k("div", {
+      t.topIncoming && u && /* @__PURE__ */ a(ft, {}),
+      t.topOutgoing && u && /* @__PURE__ */ a(bt, {}),
+      /* @__PURE__ */ x("div", {
         className: "event-modeling-grid-slice-cell-cards",
         children: [i, o]
       }),
@@ -7286,11 +7299,11 @@ var Sc = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(ee,
     ]
   });
 }, Rd = ({ sliceId: e, event: t, renameable: n, showDetails: r = !1 }) => {
-  const { editing: i, actions: o, selection: s, messages: d } = K(), c = ve(), [l, u] = F(t.name), [f, y] = F(void 0);
-  re(() => u(t.name), [t.name]);
-  const p = i.onEventRenamed, m = n && !c && !!p, g = !!s.selectedArtifactId?.equals(t.id), v = () => {
-    const h = f?.trim() ?? "";
-    y(void 0), !(!h || !p) && u(p(e, t.id, h) ?? h);
+  const { editing: i, actions: o, selection: s, messages: d } = K(), u = ve(), [l, c] = F(t.name), [f, y] = F(void 0);
+  re(() => c(t.name), [t.name]);
+  const h = i.onEventRenamed, m = n && !u && !!h, g = !!s.selectedArtifactId?.equals(t.id), v = () => {
+    const p = f?.trim() ?? "";
+    y(void 0), !(!p || !h) && c(h(e, t.id, p) ?? p);
   };
   return f !== void 0 ? /* @__PURE__ */ a("div", {
     className: "event-modeling-grid-event-wrapper",
@@ -7347,10 +7360,10 @@ function li(e, t) {
     if (!s) return;
     const d = s.closest(Ad);
     if (!d) return;
-    const c = d.querySelector(`[data-event-id="${e.toString()}"]`)?.closest(".event-modeling-grid-event-wrapper");
-    d.classList.add(Qn), s.classList.add(ut), c?.classList.add(ut), r.current = {
+    const u = d.querySelector(`[data-event-id="${e.toString()}"]`)?.closest(".event-modeling-grid-event-wrapper");
+    d.classList.add(Qn), s.classList.add(ut), u?.classList.add(ut), r.current = {
       board: d,
-      origin: c
+      origin: u
     };
   }, [e]), o = q(() => {
     const s = r.current;
@@ -7370,12 +7383,12 @@ function li(e, t) {
   };
 }
 var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i, onNavigate: o, ariaLabel: s, ...d }) => {
-  const c = !!n && !n.equals(de.empty) && !!o, l = li(n ?? de.empty, o);
-  return /* @__PURE__ */ k("div", {
+  const u = !!n && !n.equals(de.empty) && !!o, l = li(n ?? de.empty, o);
+  return /* @__PURE__ */ x("div", {
     ref: l.ref,
     className: "event-modeling-grid-event-wrapper event-modeling-grid-event-wrapper--reference",
-    onMouseEnter: c ? l.onMouseEnter : void 0,
-    onMouseLeave: c ? l.onMouseLeave : void 0,
+    onMouseEnter: u ? l.onMouseEnter : void 0,
+    onMouseLeave: u ? l.onMouseLeave : void 0,
     children: [/* @__PURE__ */ a(Ue, {
       name: t,
       backgroundColor: $n.background,
@@ -7384,18 +7397,18 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
       onSelected: i,
       ariaLabel: s,
       ...d
-    }), c && /* @__PURE__ */ a(si, { onClick: l.handleNavigate })]
+    }), u && /* @__PURE__ */ a(si, { onClick: l.handleNavigate })]
   });
 }, Ld = ({ event: e, selectable: t, showDetails: n = !1, projectedFromTheRight: r = !1 }) => {
-  const { selection: i, navigation: o, messages: s } = K(), d = de.parse(e.sourceEventId ?? de.empty.toString()), c = li(d, o.onNavigateToEvent), l = !!i.selectedArtifactId?.equals(e.id), u = i.onArtifactSelected;
-  return /* @__PURE__ */ k("div", {
-    ref: c.ref,
+  const { selection: i, navigation: o, messages: s } = K(), d = de.parse(e.sourceEventId ?? de.empty.toString()), u = li(d, o.onNavigateToEvent), l = !!i.selectedArtifactId?.equals(e.id), c = i.onArtifactSelected;
+  return /* @__PURE__ */ x("div", {
+    ref: u.ref,
     className: `event-modeling-grid-event-wrapper event-modeling-grid-event-wrapper--reference event-modeling-event-reference${r ? " event-modeling-event-reference--out-of-order" : ""}`,
     "data-out-of-order": r || void 0,
     title: r ? s.events.projectedFromTheRight : void 0,
     "data-flow-node": ue.event,
-    onMouseEnter: c.onMouseEnter,
-    onMouseLeave: c.onMouseLeave,
+    onMouseEnter: u.onMouseEnter,
+    onMouseLeave: u.onMouseLeave,
     children: [
       /* @__PURE__ */ a(me, {
         content: /* @__PURE__ */ a(Ve, {
@@ -7408,7 +7421,7 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
           backgroundColor: pe.background,
           textColor: pe.text,
           isSelected: l,
-          onSelected: t && u ? () => u(e.id) : void 0,
+          onSelected: t && c ? () => c(e.id) : void 0,
           ariaLabel: `${s.events.openEvent} ${e.name}`,
           ariaPressed: l,
           "data-event-id": e.id.toString(),
@@ -7426,7 +7439,7 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
         "aria-label": s.events.projectedFromTheRight,
         children: "!"
       }),
-      /* @__PURE__ */ a(si, { onClick: c.handleNavigate })
+      /* @__PURE__ */ a(si, { onClick: u.handleNavigate })
     ]
   });
 }, Td = (e, t, n) => {
@@ -7437,7 +7450,7 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
   const n = new Set(e.events.flatMap((i) => i.sourceEventId ? [i.sourceEventId] : [])), r = new Set(e.events.map((i) => i.name));
   return t.filter((i) => !n.has(i.id.toString()) && !r.has(i.name));
 }, Dd = ({ slice: e, collapsed: t = !1, conn: n, rowHeight: r, priorEvents: i, followingEvents: o = [], showDetails: s = !1 }) => {
-  const { editing: d, actions: c, messages: l } = K(), u = ve(), { onEventAdded: f, onEventReferenced: y } = d, p = pn(e.sliceType), m = bd(e.sliceType, e.events.length), g = Pd(e, i), v = Td(e, i, o), h = (c.eventsRow ?? []).filter((b) => !b.when || b.when(e)), w = (b) => y && /* @__PURE__ */ a(Jr, {
+  const { editing: d, actions: u, messages: l } = K(), c = ve(), { onEventAdded: f, onEventReferenced: y } = d, h = pn(e.sliceType), m = bd(e.sliceType, e.events.length), g = Pd(e, i), v = Td(e, i, o), p = (u.eventsRow ?? []).filter((b) => !b.when || b.when(e)), w = (b) => y && /* @__PURE__ */ a(Jr, {
     options: g,
     nameOf: (S) => S.name,
     onSelect: (S) => y(e.id, S),
@@ -7451,20 +7464,20 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
     conn: n,
     rowHeight: r,
     eventCount: e.events.length,
-    after: !u && m && w(!0),
-    corners: /* @__PURE__ */ k(ee, { children: [
-      !u && h.length > 0 && /* @__PURE__ */ a(Ge, {
+    after: !c && m && w(!0),
+    corners: /* @__PURE__ */ x(ee, { children: [
+      !c && p.length > 0 && /* @__PURE__ */ a(Ge, {
         placement: Te.top,
-        children: h.map((b) => /* @__PURE__ */ a(hn, { action: b }, b.tooltip))
+        children: p.map((b) => /* @__PURE__ */ a(hn, { action: b }, b.tooltip))
       }),
-      !u && !p && f && /* @__PURE__ */ a(fd, {
+      !c && !h && f && /* @__PURE__ */ a(fd, {
         placement: Te.add,
         action: {
           tooltip: l.events.addEvent,
           onActivate: (b) => f(b)
         }
       }),
-      !u && p && !m && y && /* @__PURE__ */ a(Ge, {
+      !c && h && !m && y && /* @__PURE__ */ a(Ge, {
         placement: Te.add,
         children: w(!1)
       })
@@ -7482,16 +7495,16 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
     }, b.id.toString()))
   });
 }, er = ({ sliceId: e, kind: t, artifactId: n, name: r, schema: i, showDetails: o = !1, onRenamed: s }) => {
-  const { actions: d, selection: c, messages: l } = K(), u = ve(), [f, y] = F(r), [p, m] = F(void 0);
+  const { actions: d, selection: u, messages: l } = K(), c = ve(), [f, y] = F(r), [h, m] = F(void 0);
   re(() => y(r), [r]);
-  const g = t === he.command, v = g ? d.commandCard : d.readModelCard, h = g ? et : nt, w = g ? l.interaction.command : l.interaction.readModel, b = !u && !!s, S = c.onArtifactSelected, C = () => {
-    const O = p?.trim() ?? "";
-    m(void 0), !(!O || !s) && (s(O), y(O));
+  const g = t === he.command, v = g ? d.commandCard : d.readModelCard, p = g ? et : nt, w = g ? l.interaction.command : l.interaction.readModel, b = !c && !!s, S = u.onArtifactSelected, C = () => {
+    const L = h?.trim() ?? "";
+    m(void 0), !(!L || !s) && (s(L), y(L));
   };
-  return p !== void 0 ? /* @__PURE__ */ a(dn, {
-    value: p,
-    backgroundColor: h.background,
-    textColor: h.text,
+  return h !== void 0 ? /* @__PURE__ */ a(dn, {
+    value: h,
+    backgroundColor: p.background,
+    textColor: p.text,
     onChange: m,
     onCommit: C,
     onCancel: () => m(void 0)
@@ -7511,7 +7524,7 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
         showDetails: o,
         actions: v?.actions,
         onActivate: v?.onActivate,
-        isSelected: !!c.selectedArtifactId?.equals(n),
+        isSelected: !!u.selectedArtifactId?.equals(n),
         onSelected: S ? () => S(n) : void 0,
         onStartEdit: b ? () => m(f) : void 0,
         ariaLabel: `${l.interaction.open} ${w}: ${f}`,
@@ -7525,9 +7538,9 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
   if (e) return /* @__PURE__ */ a("div", {
     style: o,
     className: Pt,
-    children: r.map((d, c) => /* @__PURE__ */ a("div", { className: `event-modeling-grid-mini-card event-modeling-grid-mini-card--${d}` }, c))
+    children: r.map((d, u) => /* @__PURE__ */ a("div", { className: `event-modeling-grid-mini-card event-modeling-grid-mini-card--${d}` }, u))
   });
-  if (i.kind === "sideBySide") return /* @__PURE__ */ k("div", {
+  if (i.kind === "sideBySide") return /* @__PURE__ */ x("div", {
     style: o,
     className: Pt,
     children: [
@@ -7539,25 +7552,25 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
       })
     ]
   });
-  const s = i.hasItems && /* @__PURE__ */ k(ee, { children: [
+  const s = i.hasItems && /* @__PURE__ */ x(ee, { children: [
     t.topOutgoing && /* @__PURE__ */ a(bt, {}),
     t.topIncoming && /* @__PURE__ */ a(ft, {}),
     t.bottomOutgoing && /* @__PURE__ */ a(Ke, {}),
     t.bottomIncoming && /* @__PURE__ */ a(Qe, {})
   ] });
-  return i.kind === "split" ? /* @__PURE__ */ k("div", {
+  return i.kind === "split" ? /* @__PURE__ */ x("div", {
     style: o,
     className: "event-modeling-grid-slice-cell event-modeling-grid-slice-cell--translator event-modeling-grid-slice-cell--interaction",
     children: [
       s,
-      /* @__PURE__ */ k("div", {
+      /* @__PURE__ */ x("div", {
         className: "event-modeling-grid-slice-cell--translator-external",
         children: [/* @__PURE__ */ a("div", {
           className: "event-modeling-grid-slice-cell-cards",
           children: i.left
         }), i.leftCorner]
       }),
-      /* @__PURE__ */ k("div", {
+      /* @__PURE__ */ x("div", {
         className: "event-modeling-grid-slice-cell--translator-regular",
         children: [/* @__PURE__ */ a("div", {
           className: "event-modeling-grid-slice-cell-cards",
@@ -7565,7 +7578,7 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
         }), i.rightCorner]
       })
     ]
-  }) : /* @__PURE__ */ k("div", {
+  }) : /* @__PURE__ */ x("div", {
     style: o,
     className: Pt,
     children: [
@@ -7581,7 +7594,7 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
   return e.command = "command", e.readModel = "readmodel", e;
 })({}), _d = ({ label: e, defineLabel: t, onDefine: n }) => {
   const r = A(null);
-  return /* @__PURE__ */ k("div", {
+  return /* @__PURE__ */ x("div", {
     className: "event-modeling-grid-optional-read-model",
     ref: r,
     children: [/* @__PURE__ */ a("div", {
@@ -7610,7 +7623,7 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
       return [...e.externalEvents.map(() => _e.readModel), ...e.command ? [_e.command] : []];
   }
 }, $d = ({ slice: e, collapsed: t = !1, conn: n, rowHeight: r, externalEventOptions: i = [], showDetails: o = !1 }) => {
-  const { editing: s, actions: d, selection: c, navigation: l, messages: u } = K(), f = ve(), { onCommandRenamed: y, onReadModelRenamed: p, onReadModelAdded: m, onExternalEventAdded: g } = s, v = (d.interactionRow ?? []).filter((H) => !H.when || H.when(e)), h = Fd(e), w = c.onArtifactSelected, { command: b, readModel: S } = e, C = b && /* @__PURE__ */ a(er, {
+  const { editing: s, actions: d, selection: u, navigation: l, messages: c } = K(), f = ve(), { onCommandRenamed: y, onReadModelRenamed: h, onReadModelAdded: m, onExternalEventAdded: g } = s, v = (d.interactionRow ?? []).filter((H) => !H.when || H.when(e)), p = Fd(e), w = u.onArtifactSelected, { command: b, readModel: S } = e, C = b && /* @__PURE__ */ a(er, {
     sliceId: e.id,
     kind: he.command,
     artifactId: b.id,
@@ -7618,19 +7631,19 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
     schema: b.schema,
     showDetails: o,
     onRenamed: y && ((H) => y(e.id, b.id, H))
-  }, b.id.toString()), O = S && /* @__PURE__ */ a(er, {
+  }, b.id.toString()), L = S && /* @__PURE__ */ a(er, {
     sliceId: e.id,
     kind: he.readModel,
     artifactId: S.id,
     name: S.name,
     schema: S.schema,
     showDetails: o,
-    onRenamed: p && ((H) => p(e.id, S.id, H))
+    onRenamed: h && ((H) => h(e.id, S.id, H))
   }, S.id.toString()), N = (H) => {
-    const x = `${u.interaction.open} ${u.interaction.externalEvent}: ${H.name}`, T = i.find((W) => W.name === H.name)?.schema;
+    const M = `${c.interaction.open} ${c.interaction.externalEvent}: ${H.name}`, T = i.find((W) => W.name === H.name)?.schema;
     return /* @__PURE__ */ a(me, {
       content: /* @__PURE__ */ a(Ve, {
-        title: `${u.interaction.doubleClickToRenamePrefix} ${u.interaction.externalEvent}: ${H.name}`,
+        title: `${c.interaction.doubleClickToRenamePrefix} ${c.interaction.externalEvent}: ${H.name}`,
         schema: T
       }),
       position: "top",
@@ -7641,15 +7654,15 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
           name: H.name,
           sourceEventId: H.sourceEventId ? de.parse(H.sourceEventId) : void 0,
           onNavigate: l.onNavigateToEvent,
-          isSelected: !!c.selectedArtifactId?.equals(H.id),
+          isSelected: !!u.selectedArtifactId?.equals(H.id),
           onSelected: w ? () => w(H.id) : void 0,
-          ariaLabel: x,
+          ariaLabel: M,
           "data-card-id": H.id.toString(),
           "data-slice-id": e.id.toString()
         })
       })
     }, H.id.toString());
-  }, L = !f && v.length > 0 && /* @__PURE__ */ a(Ge, {
+  }, O = !f && v.length > 0 && /* @__PURE__ */ a(Ge, {
     placement: Te.add,
     children: v.map((H) => /* @__PURE__ */ a(hn, { action: H }, H.tooltip))
   });
@@ -7658,19 +7671,19 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
     return /* @__PURE__ */ a(Dt, {
       conn: n,
       rowHeight: r,
-      miniCards: h,
+      miniCards: p,
       layout: {
         kind: "sideBySide",
         readModelOnTop: !!e.readModel,
         commandBelow: !!e.command,
         hasLeftCard: !!e.readModel || H,
         hasRightCard: !!e.command,
-        cards: /* @__PURE__ */ k(ee, { children: [
-          O,
+        cards: /* @__PURE__ */ x(ee, { children: [
+          L,
           H && /* @__PURE__ */ a(_d, {
-            label: u.interaction.readModel,
-            defineLabel: u.interaction.defineReadModel,
-            onDefine: (x) => m(e.id, x)
+            label: c.interaction.readModel,
+            defineLabel: c.interaction.defineReadModel,
+            onDefine: (M) => m(e.id, M)
           }),
           C
         ] })
@@ -7678,11 +7691,11 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
     });
   }
   if (e.sliceType === B.translator && !t) {
-    const H = new Set(e.externalEvents.map((x) => x.name));
+    const H = new Set(e.externalEvents.map((M) => M.name));
     return /* @__PURE__ */ a(Dt, {
       conn: n,
       rowHeight: r,
-      miniCards: h,
+      miniCards: p,
       layout: {
         kind: "split",
         hasItems: e.externalEvents.length > 0 || !!e.command,
@@ -7690,30 +7703,30 @@ var Od = ({ id: e, name: t, sourceEventId: n, isSelected: r = !1, onSelected: i,
         leftCorner: !f && yd(e.sliceType) && g && /* @__PURE__ */ a(Ge, {
           placement: Te.add,
           children: /* @__PURE__ */ a(Jr, {
-            options: i.filter((x) => !H.has(x.name)),
-            nameOf: (x) => x.name,
-            onSelect: (x) => g(e.id, x),
-            label: u.interaction.addExternalEvent,
-            searchPlaceholder: u.interaction.searchExternalEvents,
-            emptyLabel: u.interaction.noExternalEventsAvailable
+            options: i.filter((M) => !H.has(M.name)),
+            nameOf: (M) => M.name,
+            onSelect: (M) => g(e.id, M),
+            label: c.interaction.addExternalEvent,
+            searchPlaceholder: c.interaction.searchExternalEvents,
+            emptyLabel: c.interaction.noExternalEventsAvailable
           })
         }),
         right: C,
-        rightCorner: L
+        rightCorner: O
       }
     });
   }
-  const j = e.sliceType === B.stateView ? O : e.sliceType === B.automation ? /* @__PURE__ */ k(ee, { children: [O, C] }) : e.sliceType === B.translator ? /* @__PURE__ */ k(ee, { children: [e.externalEvents.map(N), C] }) : C;
+  const j = e.sliceType === B.stateView ? L : e.sliceType === B.automation ? /* @__PURE__ */ x(ee, { children: [L, C] }) : e.sliceType === B.translator ? /* @__PURE__ */ x(ee, { children: [e.externalEvents.map(N), C] }) : C;
   return /* @__PURE__ */ a(Dt, {
     collapsed: t,
     conn: n,
     rowHeight: r,
-    miniCards: h,
+    miniCards: p,
     layout: {
       kind: "centered",
-      hasItems: h.length > 0,
+      hasItems: p.length > 0,
       cards: j,
-      corners: L
+      corners: O
     }
   });
 };