@cratis/event-models 0.171.12 → 0.171.14

package/dist/index.js

@@ -1,8 +1,8 @@
 import { Guid as ce } from "@cratis/fundamentals";
-import ji, { Fragment as qe, createContext as ke, forwardRef as qi, memo as Nr, startTransition as Gi, useCallback as q, useContext as Ce, useEffect as re, useId as Lt, useImperativeHandle as st, useLayoutEffect as Dt, useMemo as le, useRef as A, useState as z } from "react";
+import ji, { Fragment as qe, createContext as Ee, forwardRef as qi, memo as Nr, startTransition as Gi, useCallback as q, useContext as Ce, useEffect as re, useId as Lt, useImperativeHandle as st, useLayoutEffect as Dt, useMemo as le, useRef as A, useState as z } from "react";
 import { Fragment as te, jsx as a, jsxs as x } from "react/jsx-runtime";
 import { createPortal as et, flushSync as Ui } from "react-dom";
-import { Canvas as Yi, CanvasItem as Ir, Note as Xi, canvasGesture as kt } from "@cratis/components/Canvas";
+import { Canvas as Yi, CanvasItem as Ir, Note as Xi, canvasGesture as Et } from "@cratis/components/Canvas";
 import { SchemaEditor as Zi } from "@cratis/components/SchemaEditor";
 import { Dialog as Ji, DialogInitialFocus as Ki } from "@cratis/components/Dialogs";
 import { Toolbar as Qi, ToolbarButton as Rr, ToolbarSlot as eo } from "@cratis/components/Toolbar";
@@ -41,7 +41,7 @@ var ve = /* @__PURE__ */ (function(e) {
   constructor(e, t) {
     super(`Invalid event model document at '${e}': ${t}`), this.path = e, this.name = "InvalidEventModelDocument";
   }
-}, Xu = (e, t) => Object.values(e).includes(t), ht = (e) => typeof e == "object" && e !== null && !Array.isArray(e), Ne = (e) => e == null, co = class Et {
+}, Xu = (e, t) => Object.values(e).includes(t), ht = (e) => typeof e == "object" && e !== null && !Array.isArray(e), Ne = (e) => e == null, co = class kt {
   _value;
   path;
   constructor(t, n) {
@@ -49,7 +49,7 @@ var ve = /* @__PURE__ */ (function(e) {
   }
   static root(t) {
     if (!ht(t)) throw new Mt("$", "the document must be an object");
-    return new Et(t, "$");
+    return new kt(t, "$");
   }
   has(t) {
     return !Ne(this._value[t]);
@@ -116,7 +116,7 @@ var ve = /* @__PURE__ */ (function(e) {
     const n = this._value[t];
     if (!Ne(n)) {
       if (!ht(n)) throw this.invalid(t, "expected an object");
-      return new Et(n, `${this.path}.${t}`);
+      return new kt(n, `${this.path}.${t}`);
     }
   }
   array(t, n) {
@@ -126,7 +126,7 @@ var ve = /* @__PURE__ */ (function(e) {
     return r.map((o, i) => {
       const s = `${this.path}.${t}[${i}]`;
       if (!ht(o)) throw new Mt(s, "expected an object");
-      return n(new Et(o, s));
+      return n(new kt(o, s));
     });
   }
   invalid(t, n) {
@@ -262,11 +262,11 @@ var ve = /* @__PURE__ */ (function(e) {
       code: r
     } : {}
   };
-}, Eo = (e) => ({
+}, ko = (e) => ({
   id: e.guid("id"),
   name: e.string("name"),
   sources: e.has("sources") ? e.strings("sources") : []
-}), ko = (e) => ({
+}), Eo = (e) => ({
   id: e.guid("id"),
   name: e.string("name"),
   sources: e.has("sources") ? e.strings("sources") : [],
@@ -390,8 +390,8 @@ var ve = /* @__PURE__ */ (function(e) {
     specifications: e.array("specifications", Po),
     commentCount: e.number("commentCount"),
     ...t ? { command: So(t) } : {},
-    ...n ? { projection: Eo(n) } : {},
-    ...r ? { capture: ko(r) } : {},
+    ...n ? { projection: ko(n) } : {},
+    ...r ? { capture: Eo(r) } : {},
     ...o ? { readModel: Vn(o) } : {},
     ...i.length > 0 ? { additionalReadModels: i } : {},
     ...s ? { automationTrigger: s } : {},
@@ -635,7 +635,7 @@ var ve = /* @__PURE__ */ (function(e) {
     chat: "Chat Actor"
   },
   viewOptions: hn
-}, Pr = ke(Wo), fe = () => Ce(Pr), Ju = ({ messages: e, children: t }) => /* @__PURE__ */ a(Pr.Provider, {
+}, Pr = Ee(Wo), fe = () => Ce(Pr), Ju = ({ messages: e, children: t }) => /* @__PURE__ */ a(Pr.Provider, {
   value: e,
   children: t
 }), zo = "full";
@@ -691,7 +691,7 @@ var Go = {
   detailLevel: zo,
   visualizationMode: "simplified",
   detailsVisibility: jo
-}, _r = ke(Go), Ee = () => Ce(_r), Fr = ke(void 0), Uo = () => Ce(Fr), Yo = ({ presentation: e, onChange: t, children: n }) => /* @__PURE__ */ a(_r.Provider, {
+}, _r = Ee(Go), ke = () => Ce(_r), Fr = Ee(void 0), Uo = () => Ce(Fr), Yo = ({ presentation: e, onChange: t, children: n }) => /* @__PURE__ */ a(_r.Provider, {
   value: e,
   children: /* @__PURE__ */ a(Fr.Provider, {
     value: t,
@@ -818,7 +818,7 @@ var ft = (e, t, n) => Math.max(8, Math.min(e, n - t - 8)), Xo = (e, t, n, r, o,
   actions: {},
   selection: {},
   navigation: {}
-}, rn = ke(Qo), $r = ({ editing: e, actions: t, selection: n, navigation: r, children: o }) => {
+}, rn = Ee(Qo), $r = ({ editing: e, actions: t, selection: n, navigation: r, children: o }) => {
   const i = Ce(rn), s = le(() => ({
     editing: {
       ...i.editing,
@@ -847,7 +847,7 @@ var ft = (e, t, n) => Math.max(8, Math.min(e, n - t - 8)), Xo = (e, t, n, r, o,
     value: s,
     children: o
   });
-}, bn = ke(!1), ea = ({ readOnly: e = !1, editing: t, actions: n, selection: r, navigation: o, children: i }) => /* @__PURE__ */ a(bn.Provider, {
+}, bn = Ee(!1), ea = ({ readOnly: e = !1, editing: t, actions: n, selection: r, navigation: o, children: i }) => /* @__PURE__ */ a(bn.Provider, {
   value: e,
   children: /* @__PURE__ */ a($r, {
     editing: t,
@@ -857,7 +857,7 @@ var ft = (e, t, n) => Math.max(8, Math.min(e, n - t - 8)), Xo = (e, t, n, r, o,
     children: i
   })
 }), Q = () => {
-  const e = Ce(bn), t = Ee(), n = fe(), { editing: r, actions: o, selection: i, navigation: s } = Ce(rn);
+  const e = Ce(bn), t = ke(), n = fe(), { editing: r, actions: o, selection: i, navigation: s } = Ce(rn);
   return le(() => ({
     readOnly: e,
     presentation: t,
@@ -1222,16 +1222,16 @@ function Ma(e, t, n, r, o) {
     }
   };
 }
-var Ea = ({ onCollectionMoved: e, ...t }) => e ? /* @__PURE__ */ a(Ia, {
+var ka = ({ onCollectionMoved: e, ...t }) => e ? /* @__PURE__ */ a(Ia, {
   ...t,
   onCollectionMoved: e
-}) : void 0, ka = 4, Na = 48, Ia = ({ collectionId: e, position: t, getZoom: n, topOffset: r = It.padding, onCollectionMoving: o, onCollectionMoved: i }) => {
+}) : void 0, Ea = 4, Na = 48, Ia = ({ collectionId: e, position: t, getZoom: n, topOffset: r = It.padding, onCollectionMoving: o, onCollectionMoved: i }) => {
   const [s, l] = z(!1), d = Ma(e, t, n, o, i);
   return /* @__PURE__ */ a("div", {
     className: `collection-drag-handle ${s ? "collection-drag-handle--dragging" : ""}`,
     style: {
       top: `${r}px`,
-      left: `${It.padding + ka}px`,
+      left: `${It.padding + Ea}px`,
       width: Na,
       height: ee.headerHeight
     },
@@ -1432,7 +1432,7 @@ function _a({ initialCollections: e, onAddCollection: t, onCollectionMoved: n, o
     canAdd: !i && !!t
   };
 }
-var Xr = ke(!1), Fa = ({ renderAll: e = !1, children: t }) => /* @__PURE__ */ a(Xr.Provider, {
+var Xr = Ee(!1), Fa = ({ renderAll: e = !1, children: t }) => /* @__PURE__ */ a(Xr.Provider, {
   value: e,
   children: t
 }), $a = () => Ce(Xr), Ba = 12, Xn = 24, Ha = 100, Zr = 1, Wa = 1, za = 24, Va = 3, tt = /* @__PURE__ */ new Map(), sn = !1, Ve = Zr, Zn = 0, Ut = !1;
@@ -1443,7 +1443,7 @@ function qa() {
   sn = !1;
   const e = performance.now(), t = e - Zn, n = t < Ha;
   Ut && n ? t > Xn ? Ve = Math.max(Wa, Math.ceil(Ve / 2)) : t < Ba && (Ve = Math.min(za, Ve + 1)) : n || (Ve = Zr), Ut = !1;
-  const r = kt.isActive;
+  const r = Et.isActive;
   if (!r || !n || t <= Xn) {
     Zn = e;
     const o = r ? Math.min(Ve, Va) : Ve;
@@ -1459,7 +1459,7 @@ function wn() {
 }
 var Jn = !1;
 function Ga() {
-  Jn || (Jn = !0, kt.subscribe((e) => {
+  Jn || (Jn = !0, Et.subscribe((e) => {
     !e && tt.size > 0 && wn();
   }));
 }
@@ -1829,7 +1829,7 @@ var Ya = Nr(Ua), Xa = ({ drag: e }) => e ? et(/* @__PURE__ */ a("div", {
   whiteSpace: "nowrap",
   fontSize: 11,
   fontWeight: 600,
-  color: "rgba(255,255,255,0.45)",
+  color: "color-mix(in srgb, var(--board-ink, #ffffff) 45%, transparent)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
   textAlign: "center"
@@ -1842,9 +1842,9 @@ var Ya = Nr(Ua), Xa = ({ drag: e }) => e ? et(/* @__PURE__ */ a("div", {
   flexShrink: 0,
   display: "inline-block"
 }), tr = ({ rowType: e, height: t, name: n, description: r, actorId: o, onRenamed: i, validateName: s, onActorAdded: l, onDragStart: d, dragging: c = !1, badge: u, personaAvatar: v, children: h }) => {
-  const { readOnly: g, messages: m } = Q(), [p, f] = z(!1), [b, w] = z(!1), S = A(void 0), y = A(null), k = A(null), T = A(null), N = le(() => [k], []), C = le(() => [T], []);
+  const { readOnly: g, messages: m } = Q(), [p, f] = z(!1), [b, w] = z(!1), S = A(void 0), y = A(null), E = A(null), T = A(null), N = le(() => [E], []), C = le(() => [T], []);
   nt(N, () => f(!1), p), nt(C, () => w(!1), b);
-  const G = n ?? Ja(e, m), J = Ka(e), E = J && !g ? i : void 0, L = J && !g ? l : void 0, F = o && !g ? d : void 0, j = g ? [] : u?.actions ?? [], P = g ? void 0 : u?.onActivate, H = j.length > 0 || !!P, I = v ?? u?.avatar, _ = J && (!!I || !!u && !g), D = () => {
+  const G = n ?? Ja(e, m), J = Ka(e), k = J && !g ? i : void 0, L = J && !g ? l : void 0, F = o && !g ? d : void 0, j = g ? [] : u?.actions ?? [], P = g ? void 0 : u?.onActivate, H = j.length > 0 || !!P, I = v ?? u?.avatar, _ = J && (!!I || !!u && !g), D = () => {
     if (j.length > 0) {
       w((V) => !V);
       return;
@@ -1913,9 +1913,9 @@ var Ya = Nr(Ua), Xa = ({ drag: e }) => e ? et(/* @__PURE__ */ a("div", {
         }),
         /* @__PURE__ */ a("div", {
           className: "event-modeling-grid-row-label-title",
-          children: E ? /* @__PURE__ */ a(Bt, {
+          children: k ? /* @__PURE__ */ a(Bt, {
             value: G,
-            onChange: E,
+            onChange: k,
             validate: s,
             style: Qa
           }) : r?.trim() ? /* @__PURE__ */ a(he, {
@@ -1932,7 +1932,7 @@ var Ya = Nr(Ua), Xa = ({ drag: e }) => e ? et(/* @__PURE__ */ a("div", {
         }),
         L && /* @__PURE__ */ x("div", {
           className: "event-modeling-grid-row-label-add-role",
-          ref: k,
+          ref: E,
           children: [/* @__PURE__ */ a("button", {
             className: "event-modeling-grid-row-label-add-role-btn",
             onClick: (V) => {
@@ -2052,21 +2052,21 @@ var as = ({ collectionId: e, topOffset: t, contentRows: n, rowHeights: r, actors
         } : void 0,
         validateName: (N) => Object.entries(v).find(([C]) => C !== b)?.[1]?.toLowerCase() === N.toLowerCase() ? "Name already in use" : void 0,
         onActorAdded: i ? (N) => i(b, N) : void 0
-      }, k = w === void 0 || S.length === 0 ? [/* @__PURE__ */ a(qe, { children: w !== void 0 && u ? u(b, y) : /* @__PURE__ */ a(tr, { ...y }) }, b)] : [], T = S.flatMap((N, C) => {
+      }, E = w === void 0 || S.length === 0 ? [/* @__PURE__ */ a(qe, { children: w !== void 0 && u ? u(b, y) : /* @__PURE__ */ a(tr, { ...y }) }, b)] : [], T = S.flatMap((N, C) => {
         const G = p?.rowType === b, J = {
           rowType: b,
           height: r[b],
           name: g[N.id] ?? N.name,
           description: N.description,
           actorId: N.id,
-          onRenamed: s ? (E) => {
+          onRenamed: s ? (k) => {
             m((L) => ({
               ...L,
-              [N.id]: E
-            })), s(N.id, E);
+              [N.id]: k
+            })), s(N.id, k);
           } : void 0,
-          onActorAdded: i ? (E) => i(b, E) : void 0,
-          onDragStart: f ? (E, L) => f(N.id, E, L) : void 0,
+          onActorAdded: i ? (k) => i(b, k) : void 0,
+          onDragStart: f ? (k, L) => f(N.id, k, L) : void 0,
           dragging: p?.actorId === N.id
         };
         return [
@@ -2075,7 +2075,7 @@ var as = ({ collectionId: e, topOffset: t, contentRows: n, rowHeights: r, actors
           ...G && C === S.length - 1 && p.dropIndex === S.length ? [/* @__PURE__ */ a(Qn, {}, `drop-${b}-end`)] : []
         ];
       });
-      return [...k, ...T];
+      return [...E, ...T];
     })]
   });
 }, ss = ({ moduleId: e, collectionId: t, marginLeft: n, dragging: r = !1, ref: o, children: i }) => /* @__PURE__ */ a("div", {
@@ -2317,7 +2317,7 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
         strokeLinejoin: "round"
       })] });
   }
-}, ii = ke(void 0), ps = (e, t) => e === t ? void 0 : t, hs = (e, t) => e === t ? void 0 : e, gm = ({ children: e }) => {
+}, ii = Ee(void 0), ps = (e, t) => e === t ? void 0 : t, hs = (e, t) => e === t ? void 0 : e, gm = ({ children: e }) => {
   const [t, n] = z();
   return /* @__PURE__ */ a(ii.Provider, {
     value: {
@@ -2345,7 +2345,7 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
       className: "event-modeling-menu-dropdown-header",
       children: S.label
     }, S.id.toString());
-    const y = S.items && S.items.length > 0, k = d === S.id.toString();
+    const y = S.items && S.items.length > 0, E = d === S.id.toString();
     return /* @__PURE__ */ x("div", {
       className: "event-modeling-menu-dropdown-item-wrapper",
       children: [/* @__PURE__ */ x("button", {
@@ -2353,7 +2353,7 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
         disabled: S.disabled,
         title: S.tooltip,
         onClick: () => {
-          S.disabled || (y ? c(k ? void 0 : S.id.toString()) : (S.keepOpen || p(), S.onClick?.()));
+          S.disabled || (y ? c(E ? void 0 : S.id.toString()) : (S.keepOpen || p(), S.onClick?.()));
         },
         children: [
           S.icon && /* @__PURE__ */ a("span", {
@@ -2375,11 +2375,11 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
             children: S.checked && /* @__PURE__ */ a("i", { className: "pi pi-check" })
           }),
           y && /* @__PURE__ */ a("span", {
-            className: `event-modeling-menu-dropdown-option-arrow ${k ? "event-modeling-menu-dropdown-option-arrow--open" : ""}`,
+            className: `event-modeling-menu-dropdown-option-arrow ${E ? "event-modeling-menu-dropdown-option-arrow--open" : ""}`,
             children: /* @__PURE__ */ a("i", { className: "pi pi-chevron-right" })
           })
         ]
-      }), y && k && /* @__PURE__ */ a("div", {
+      }), y && E && /* @__PURE__ */ a("div", {
         className: `event-modeling-menu-dropdown-submenu ${n === "right" ? "event-modeling-menu-dropdown-submenu--left" : ""}`,
         children: b(S.items)
       })]
@@ -2420,7 +2420,7 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
 ], bs = (e) => {
   switch (e) {
     case ae.notStarted:
-      return "rgba(255,255,255,0.35)";
+      return "color-mix(in srgb, var(--board-ink, #ffffff) 35%, transparent)";
     case ae.draft:
       return "#9333ea";
     case ae.analysis:
@@ -2493,13 +2493,15 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
       cx: "6",
       cy: "6",
       r: "5",
-      fill: n,
+      style: {
+        fill: n,
+        stroke: n
+      },
       fillOpacity: "0.25",
-      stroke: n,
       strokeWidth: "1.5"
     }), t && /* @__PURE__ */ a("polyline", {
       points: "3,6 5,8 9,4",
-      stroke: n,
+      style: { stroke: n },
       strokeWidth: "1.4",
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -2627,13 +2629,13 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
       children: "×"
     })]
   });
-}, oi = ({ suggestions: e }) => /* @__PURE__ */ a(te, { children: e.map((t) => /* @__PURE__ */ a(ws, { suggestion: t }, t.id)) }), Ss = "rgba(255,255,255,0.05)", Cs = "1px solid rgba(255,255,255,0.10)", xs = {
+}, oi = ({ suggestions: e }) => /* @__PURE__ */ a(te, { children: e.map((t) => /* @__PURE__ */ a(ws, { suggestion: t }, t.id)) }), Ss = "color-mix(in srgb, var(--board-ink, #ffffff) 5%, transparent)", Cs = "1px solid color-mix(in srgb, var(--board-ink, #ffffff) 10%, transparent)", xs = {
   fontSize: 13,
   fontWeight: 600,
-  color: "rgba(255,255,255,0.80)",
+  color: "color-mix(in srgb, var(--board-ink, #ffffff) 80%, transparent)",
   textAlign: "center"
 }, Ms = ({ moduleId: e, name: t, height: n, collapsed: r, onToggleCollapse: o, onAddModule: i, onAddFeature: s, onRenamed: l, validateName: d, status: c, detailsVisible: u = !1, onToggleDetails: v, onDragStart: h, error: g }) => {
-  const m = Q(), { showStatuses: p = !0 } = Ee(), f = ri(!m.readOnly && !r ? h : void 0), b = m.readOnly ? void 0 : l, w = m.actions, S = Sc(e, s, m.editing);
+  const m = Q(), { showStatuses: p = !0 } = ke(), f = ri(!m.readOnly && !r ? h : void 0), b = m.readOnly ? void 0 : l, w = m.actions, S = Sc(e, s, m.editing);
   return /* @__PURE__ */ x(Qr, {
     variant: "module",
     collapsed: r,
@@ -2644,7 +2646,7 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
       title: y.label,
       "aria-label": y.label,
       disabled: y.disabled,
-      onClick: (k) => y.onActivate(e, k.currentTarget.getBoundingClientRect()),
+      onClick: (E) => y.onActivate(e, E.currentTarget.getBoundingClientRect()),
       children: [y.icon, y.indicator && /* @__PURE__ */ a("span", {
         className: "event-modeling-feature-chat-dot",
         "aria-hidden": "true"
@@ -2680,7 +2682,7 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
         title: y.label,
         "aria-label": y.label,
         disabled: y.disabled,
-        onClick: (k) => y.onActivate(e, k.currentTarget.getBoundingClientRect()),
+        onClick: (E) => y.onActivate(e, E.currentTarget.getBoundingClientRect()),
         children: y.icon
       }, y.id)),
       !m.readOnly && /* @__PURE__ */ a(oi, { suggestions: w.moduleHeaderSuggestions ?? [] }),
@@ -2694,11 +2696,11 @@ var ir = ({ status: e }) => /* @__PURE__ */ a("svg", {
     ]
   });
 };
-function Es(e, t) {
+function ks(e, t) {
   const n = e.map((r) => document.querySelector(`[data-module-id="${r.toString()}"]`)).filter((r) => r !== null).map((r) => r.getBoundingClientRect());
   return ti(n, t);
 }
-function ks(e, t, n) {
+function Es(e, t, n) {
   const r = Q(), [o, i] = z(void 0), s = A(o);
   s.current = o;
   const l = A(t);
@@ -2729,7 +2731,7 @@ function ks(e, t, n) {
         ...p,
         currentX: m.clientX,
         currentY: m.clientY,
-        dropIndex: Es(l.current, m.clientX)
+        dropIndex: ks(l.current, m.clientX)
       });
     }, g = () => {
       const m = s.current;
@@ -2853,7 +2855,7 @@ function Ls({ collectionId: e, initialModules: t, onAddModule: n, onModulesReord
   const { readOnly: c } = Q(), u = q((P) => {
     if (s) s(P);
     else throw P;
-  }, [s]), v = A(Ns(t)), [h, g] = z(v.current), m = A(!1), [p, f] = z(!1), b = A(/* @__PURE__ */ new Set()), [w, S] = z(/* @__PURE__ */ new Set()), y = A(!1), [k, T] = z(!1), N = (P, H) => {
+  }, [s]), v = A(Ns(t)), [h, g] = z(v.current), m = A(!1), [p, f] = z(!1), b = A(/* @__PURE__ */ new Set()), [w, S] = z(/* @__PURE__ */ new Set()), y = A(!1), [E, T] = z(!1), N = (P, H) => {
     H ? b.current.add(P) : b.current.delete(P), S(new Set(b.current));
   }, C = q((P) => {
     const H = P(v.current);
@@ -2897,7 +2899,7 @@ function Ls({ collectionId: e, initialModules: t, onAddModule: n, onModulesReord
     o,
     u,
     C
-  ]), E = q(async (P, H) => {
+  ]), k = q(async (P, H) => {
     const I = P.id.toString();
     if (!(c || !i || b.current.has(I))) {
       N(I, !0), C((_) => Rs(_, P.id, H));
@@ -2927,7 +2929,7 @@ function Ls({ collectionId: e, initialModules: t, onAddModule: n, onModulesReord
     r,
     u,
     c
-  ]), { moduleDrag: F, handleModuleDragStart: j } = ks(e, h.modules.map((P) => P.id), r && !k ? L : void 0);
+  ]), { moduleDrag: F, handleModuleDragStart: j } = Es(e, h.modules.map((P) => P.id), r && !E ? L : void 0);
   return /* @__PURE__ */ x(te, { children: [
     /* @__PURE__ */ a(ei, {
       drag: F,
@@ -2946,7 +2948,7 @@ function Ls({ collectionId: e, initialModules: t, onAddModule: n, onModulesReord
           J(P);
         } : void 0,
         onRenamed: !c && !w.has(P.id.toString()) && i ? (I) => {
-          E(P, I);
+          k(P, I);
         } : void 0
       })]
     }, P.id.toString())),
@@ -2990,7 +2992,7 @@ var _s = ({ width: e, collapsed: t, children: n }) => /* @__PURE__ */ a("div", {
     featureId: r.id.toString()
   })), ...r.subFeatures.flatMap((i) => t(n, i, o))]);
   return e.modules.flatMap((n) => n.features.flatMap((r) => t(n.id.toString(), r, /* @__PURE__ */ new Set())));
-}, En = (e) => [
+}, kn = (e) => [
   ...e.actors.some((t) => t.actorType === ve.UIRole) ? [X.UI] : [],
   ...e.actors.some((t) => t.actorType === ve.systemRole) ? [X.System] : [],
   ...e.actors.some((t) => t.actorType === ve.chatRole) ? [X.Chat] : [],
@@ -2999,7 +3001,7 @@ var _s = ({ width: e, collapsed: t, children: n }) => /* @__PURE__ */ a("div", {
 ], li = (e, t) => ba(gt(e).map((n) => ({
   slice: n.slice,
   showDetails: t?.(n) ?? !1
-})), En(e)), di = (e, t, n) => t.reduce((r, o) => {
+})), kn(e)), di = (e, t, n) => t.reduce((r, o) => {
   const i = $t(o);
   return r + (i === void 0 ? 1 : Math.max(1, e.actors.filter((s) => s.actorType === i).length)) * n[o];
 }, 0), Ge = (e) => {
@@ -3013,42 +3015,42 @@ var _s = ({ 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);
 }, ui = (e, t) => Ds(ci(t).map(Ge).filter((n) => n > 0), e), mi = (e) => e.length === 0 ? 0 : 1 + Math.max(...e.map((t) => mi(t.subFeatures))), Bs = (e, t) => {
-  const n = En(e), r = li(e, t), o = gt(e), i = e.modules.map((c) => c.collapsed ? ee.collapsedModuleWidth : ui(c.name, c.features)), s = i.reduce((c, u, v) => c + (v ? ee.sliceGap : 0) + u, 0), l = Math.max(1, ...e.modules.map((c) => mi(c.features))), d = n.reduce((c, u) => c + r[u], 0);
+  const n = kn(e), r = li(e, t), o = gt(e), i = e.modules.map((c) => c.collapsed ? ee.collapsedModuleWidth : ui(c.name, c.features)), s = i.reduce((c, u, v) => c + (v ? ee.sliceGap : 0) + u, 0), l = Math.max(1, ...e.modules.map((c) => mi(c.features))), d = n.reduce((c, u) => c + r[u], 0);
   return {
     width: (o.length ? 56 : 0) + s + 2 * an,
     height: ee.headerHeight * (1 + l) + 28 + d + 2 * an,
     moduleWidths: i
   };
 }, gi = () => {
-  const { detailLevel: e, detailsVisibility: t } = Ee();
+  const { detailLevel: e, detailsVisibility: t } = ke();
   return q(({ slice: n, moduleId: r, featureId: o }) => Lr(e, Dr(t, r, o, n.id.toString())), [e, t]);
 };
-function kn(e) {
+function En(e) {
   if (e === "left") return "25%";
   if (e === "right") return "75%";
 }
 var Rt = ({ columnPosition: e }) => {
-  const { visualizationMode: t } = Ee();
+  const { visualizationMode: t } = ke();
   if (t === "fillLines") return null;
-  const n = e ? { left: kn(e) } : void 0;
+  const n = e ? { left: En(e) } : void 0;
   return /* @__PURE__ */ a("div", {
     className: "event-modeling-grid-flow-triangle event-modeling-grid-flow-triangle--down",
     style: n,
     "aria-hidden": "true"
   });
 }, At = ({ columnPosition: e }) => {
-  const { visualizationMode: t } = Ee();
+  const { visualizationMode: t } = ke();
   if (t === "fillLines") return null;
-  const n = e ? { left: kn(e) } : void 0;
+  const n = e ? { left: En(e) } : void 0;
   return /* @__PURE__ */ a("div", {
     className: "event-modeling-grid-flow-triangle event-modeling-grid-flow-triangle--up",
     style: n,
     "aria-hidden": "true"
   });
 }, Hs = ({ columnPosition: e }) => {
-  const { visualizationMode: t } = Ee();
+  const { visualizationMode: t } = ke();
   if (t === "fillLines") return null;
-  const n = e ? { left: kn(e) } : void 0;
+  const n = e ? { left: En(e) } : void 0;
   return /* @__PURE__ */ a("div", {
     className: "event-modeling-grid-flow-triangle event-modeling-grid-flow-triangle--down",
     style: n,
@@ -3195,7 +3197,7 @@ var qs = ({ sliceType: e, recomputeKey: t }) => {
     for (let w = 0; w < f.length - 1; w++) for (const S of f[w]) for (const y of f[w + 1]) b.push(js(S, y));
     o((w) => w.length === b.length && w.every((S, y) => S === b[y]) ? w : b);
   }, [e]), l = A(0), d = A(!1), c = q(() => {
-    if (kt.isActive) {
+    if (Et.isActive) {
       d.current = !0;
       return;
     }
@@ -3203,7 +3205,7 @@ var qs = ({ sliceType: e, recomputeKey: t }) => {
       l.current = 0, s();
     }));
   }, [s]);
-  return re(() => () => cancelAnimationFrame(l.current), []), re(() => kt.subscribe((u) => {
+  return re(() => () => cancelAnimationFrame(l.current), []), re(() => Et.subscribe((u) => {
     u || !d.current || (d.current = !1, c());
   }), [c]), Dt(() => {
     s();
@@ -3254,7 +3256,7 @@ var qs = ({ sliceType: e, recomputeKey: t }) => {
       }, v))]
     })
   });
-}, vi = ke(null), Gs = ({ connections: e, children: t }) => {
+}, vi = Ee(null), Gs = ({ connections: e, children: t }) => {
   const n = le(() => ({ getConnection: (r) => e.get(r) }), [e]);
   return /* @__PURE__ */ a(vi.Provider, {
     value: n,
@@ -3319,8 +3321,8 @@ var Js = ({ featureId: e, moduleId: t, enabled: n, dragging: r = !1, children: o
     children: u
   })]
 }), Qs = {
-  before: "inset 6px 0 0 rgba(180,165,255,0.95), inset 0 0 14px 0 rgba(150,130,255,0.5)",
-  after: "inset -6px 0 0 rgba(180,165,255,0.95), inset 0 0 14px 0 rgba(150,130,255,0.5)"
+  before: "inset 6px 0 0 color-mix(in srgb, var(--board-accent, #b4a5ff) 95%, transparent), inset 0 0 14px 0 rgba(150,130,255,0.5)",
+  after: "inset -6px 0 0 color-mix(in srgb, var(--board-accent, #b4a5ff) 95%, transparent), inset 0 0 14px 0 rgba(150,130,255,0.5)"
 }, el = ({ width: e, collapsed: t, dropEdge: n, children: r, ref: o }) => /* @__PURE__ */ a("div", {
   ref: o,
   className: `event-modeling-grid-header-cell-wrapper${t ? " event-modeling-grid-header-cell-wrapper--feature-collapsed" : ""}`,
@@ -3500,9 +3502,9 @@ function bi(e, t) {
   return t.add(e.id.toString()), e.subFeatures.flatMap((n) => t.has(n.id.toString()) ? [] : [n, ...bi(n, t)]);
 }
 function sl({ ref: e, initialFeatures: t, moduleId: n, widthOf: r, isCollapsed: o, forceCollapsed: i = !1, onCollapseChanged: s, occupiesColumn: l, renderHeader: d, renderColumn: c, renderFeatureBoundary: u, onAddFeature: v, onRenameFeature: h, onFeaturesReordered: g, onFeaturesChanged: m }) {
-  const { readOnly: p, messages: f } = Q(), { targets: b, register: w } = il(), S = A(ol(t)), [y, k] = z(S.current), T = A(!1), N = A(/* @__PURE__ */ new Set()), C = q((O) => {
+  const { readOnly: p, messages: f } = Q(), { targets: b, register: w } = il(), S = A(ol(t)), [y, E] = z(S.current), T = A(!1), N = A(/* @__PURE__ */ new Set()), C = q((O) => {
     const R = O(S.current);
-    R !== S.current && (S.current = R, k(R), m?.(R.features));
+    R !== S.current && (S.current = R, E(R), m?.(R.features));
   }, [m]);
   re(() => {
     t !== S.current.snapshot && C((O) => cn(O, t));
@@ -3537,7 +3539,7 @@ function sl({ ref: e, initialFeatures: t, moduleId: n, widthOf: r, isCollapsed:
       features: Nn(K.features, O, R)
     }))
   }), [G, C]);
-  const J = q((O) => C((R) => al(R, O)), [C]), E = q((O, R) => {
+  const J = q((O) => C((R) => al(R, O)), [C]), k = q((O, R) => {
     const K = O.toString();
     !h || p || N.current.has(K) || (N.current.add(K), C((ue) => ({
       ...ue,
@@ -3596,7 +3598,7 @@ function sl({ ref: e, initialFeatures: t, moduleId: n, widthOf: r, isCollapsed:
     addSubFeature: !p && v ? (R) => {
       G(R, O.id);
     } : void 0,
-    onRenamed: !p && h ? (R) => E(O.id, R) : void 0,
+    onRenamed: !p && h ? (R) => k(O.id, R) : void 0,
     onToggleCollapse: s ? () => F(O) : void 0,
     onCollapseFailed: s ? () => j(O) : void 0
   }), oe = (O) => {
@@ -3984,13 +3986,13 @@ var ll = ({ type: e }) => /* @__PURE__ */ a("svg", {
     items: i,
     align: "right"
   });
-}, pl = "rgba(160,140,230,0.10)", hl = "1px solid rgba(160,140,230,0.22)", fl = ({ featureId: e, name: t, height: n, collapsed: r, onToggleCollapse: o, onRenamed: i, status: s, selectableStatuses: l, unselectableStatusReason: d, detailsVisible: c = !1, onToggleDetails: u, dragging: v = !1, onDragStart: h, error: g, onAddSubFeature: m, onAddSlice: p }) => {
-  const f = Q(), { showStatuses: b = !0 } = Ee(), w = ri(!f.readOnly && !r ? h : void 0), S = f.readOnly ? void 0 : i, y = (f.actions.featureHeader ?? []).filter((C) => !C.when || C.when(e)), k = (f.actions.featureHeaderLeading ?? []).filter((C) => !C.when || C.when(e)), T = f.actions.featureHeaderMenu ?? [], N = Cc(e, m, p, f.editing);
+}, pl = "color-mix(in srgb, var(--board-feature, #a08ce6) 10%, transparent)", hl = "1px solid color-mix(in srgb, var(--board-feature, #a08ce6) 22%, transparent)", fl = ({ featureId: e, name: t, height: n, collapsed: r, onToggleCollapse: o, onRenamed: i, status: s, selectableStatuses: l, unselectableStatusReason: d, detailsVisible: c = !1, onToggleDetails: u, dragging: v = !1, onDragStart: h, error: g, onAddSubFeature: m, onAddSlice: p }) => {
+  const f = Q(), { showStatuses: b = !0 } = ke(), w = ri(!f.readOnly && !r ? h : void 0), S = f.readOnly ? void 0 : i, y = (f.actions.featureHeader ?? []).filter((C) => !C.when || C.when(e)), E = (f.actions.featureHeaderLeading ?? []).filter((C) => !C.when || C.when(e)), T = f.actions.featureHeaderMenu ?? [], N = Cc(e, m, p, f.editing);
   return /* @__PURE__ */ a(Qr, {
     variant: "feature",
     collapsed: r,
     onToggle: o,
-    leadingContent: !f.readOnly && k.map((C) => /* @__PURE__ */ x("button", {
+    leadingContent: !f.readOnly && E.map((C) => /* @__PURE__ */ x("button", {
       type: "button",
       className: "event-modeling-grid-icon-btn",
       title: C.disabled ? C.disabledTooltip ?? C.tooltip : C.tooltip,
@@ -4015,7 +4017,7 @@ var ll = ({ type: e }) => /* @__PURE__ */ a("svg", {
     labelStyle: {
       fontSize: 12,
       fontWeight: 600,
-      color: "rgba(180,165,255,0.85)",
+      color: "color-mix(in srgb, var(--board-accent, #b4a5ff) 85%, transparent)",
       textAlign: "center",
       opacity: v ? 0.65 : 1
     },
@@ -4210,7 +4212,7 @@ var yl = ({ state: e, specification: t }) => {
                 style: {
                   fontSize: 11,
                   fontWeight: 500,
-                  color: "rgba(255,255,255,0.80)",
+                  color: "color-mix(in srgb, var(--board-ink, #ffffff) 80%, transparent)",
                   textAlign: "center"
                 },
                 readOnly: !g
@@ -4248,7 +4250,7 @@ var yl = ({ state: e, specification: t }) => {
       ]
     })]
   });
-}, El = () => {
+}, kl = () => {
   const e = /* @__PURE__ */ new Map();
   return {
     recall: (t) => e.get(t) ?? {},
@@ -4259,11 +4261,11 @@ var yl = ({ state: e, specification: t }) => {
       });
     }
   };
-}, kl = {
+}, El = {
   recall: () => ({}),
   remember: () => {
   }
-}, Ht = ke(kl), lr = "when", Nl = 15e3, mn = (e) => e.given.length + (e.when ? 1 : 0) + e.thenEvents.length + e.thenErrors.length, Il = (e, t) => e || !(t.onGivenContextUsed || t.onGivenContextRemoved || 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), Rl = (e, t, n, r, o) => {
+}, Ht = Ee(El), lr = "when", Nl = 15e3, mn = (e) => e.given.length + (e.when ? 1 : 0) + e.thenEvents.length + e.thenErrors.length, Il = (e, t) => e || !(t.onGivenContextUsed || t.onGivenContextRemoved || 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), Rl = (e, t, n, r, o) => {
   if (n) return t;
   const i = r ? Al(e, t, o) : e, s = new Map(t.map((d) => [d.id.toString(), d])), l = i.map((d) => {
     const c = s.get(d.id.toString());
@@ -4280,13 +4282,13 @@ var yl = ({ state: e, specification: t }) => {
   }), s = new Set(e.map((d) => d.id.toString())), l = r.filter((d) => !s.has(d.id.toString()));
   return l.length || i.some((d, c) => d !== e[c]) ? [...i, ...l] : e;
 }, Ol = 1, Tl = ({ sliceId: e, width: t, collapsed: n, specifications: r, runInfoFor: o, executionLabel: i, renderRows: s }) => {
-  const { editing: l, actions: d, messages: c } = Q(), u = be(), [v, h] = z(r), [g, m] = z(!1), [p, f] = z(!1), [b, w] = z(!1), S = le(El, []), y = A(0), k = A(!1), T = A(!1), N = A(!1), C = A(/* @__PURE__ */ new Set()), G = Il(u, l), J = G ? r : v;
+  const { editing: l, actions: d, messages: c } = Q(), u = be(), [v, h] = z(r), [g, m] = z(!1), [p, f] = z(!1), [b, w] = z(!1), S = le(kl, []), y = A(0), E = A(!1), T = A(!1), N = A(!1), C = A(/* @__PURE__ */ new Set()), G = Il(u, l), J = G ? r : v;
   re(() => {
     h((M) => Rl(M, r, G, Date.now() <= y.current, C.current));
   }, [r, G]);
-  const E = async () => {
-    if (k.current || !l.onSpecificationAdded) return;
-    k.current = !0, w(!0);
+  const k = async () => {
+    if (E.current || !l.onSpecificationAdded) return;
+    E.current = !0, w(!0);
     const M = {
       id: ce.create(),
       name: `${c.specifications.namePlaceholder} ${Ol++}`,
@@ -4301,7 +4303,7 @@ var yl = ({ state: e, specification: t }) => {
     } catch {
       h((W) => W.filter((Z) => !Z.id.equals(M.id)));
     } finally {
-      k.current = !1, w(!1);
+      E.current = !1, w(!1);
     }
   }, L = (M) => {
     C.current.has(M.toString()) || (C.current.add(M.toString()), y.current = 0, h((W) => W.filter((Z) => !Z.id.equals(M))), l.onSpecificationRemoved?.(e, M));
@@ -4378,7 +4380,7 @@ var yl = ({ state: e, specification: t }) => {
       children: /* @__PURE__ */ a("button", {
         type: "button",
         onClick: () => {
-          E();
+          k();
         },
         disabled: b,
         className: "event-modeling-grid-add-button--small",
@@ -4493,7 +4495,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
   }, [s]), y = r ? {
     outline: `2px solid ${t}`,
     outlineOffset: 2
-  } : {}, k = /* @__PURE__ */ x(te, { children: [/* @__PURE__ */ x("div", {
+  } : {}, E = /* @__PURE__ */ x(te, { children: [/* @__PURE__ */ x("div", {
     className: "event-modeling-card__face",
     style: {
       background: t,
@@ -4520,13 +4522,13 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
     "data-event-id": v,
     "data-card-id": h,
     "data-slice-id": g,
-    children: k
+    children: E
   }) : /* @__PURE__ */ a("div", {
     className: "event-modeling-card",
     "data-event-id": v,
     "data-card-id": h,
     "data-slice-id": g,
-    children: k
+    children: E
   });
 }, we = {
   background: "#ff9933",
@@ -4779,7 +4781,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       children: o.properties.none
     })]
   });
-}, xi = ke(void 0), We = () => {
+}, xi = Ee(void 0), We = () => {
   const { readOnly: e } = Q();
   return Ce(xi) ?? { readOnly: e };
 }, be = () => We().readOnly, Zl = (e, t, n, r) => {
@@ -4885,12 +4887,12 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
   return e === se.event && f.length === 0 ? w : /* @__PURE__ */ x("div", {
     className: ld[e],
     "data-artifact-kind": e,
-    children: [w, ed.flatMap((S) => b(S).map((y, k) => /* @__PURE__ */ a(ad, {
+    children: [w, ed.flatMap((S) => b(S).map((y, E) => /* @__PURE__ */ a(ad, {
       action: y,
       corner: S,
-      slot: k,
+      slot: E,
       onActivate: () => t && y.onActivate(t, p())
-    }, `${S}-${k}`)))]
+    }, `${S}-${E}`)))]
   });
 }, Wt = ({ value: e, backgroundColor: t, textColor: n, nameError: r, onChange: o, onCommit: i, onCancel: s }) => /* @__PURE__ */ a("div", {
   style: {
@@ -5011,7 +5013,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       children: "+"
     })
   })
-}), Ei = (e) => Object.fromEntries(e.map((t) => [t.id.toString(), t.values])), ud = { borderLeft: `3px solid ${je.background}` }, md = { borderLeft: `3px solid ${Oe.background}` }, Ln = ({ options: e, nameOf: t, onChosen: n, errors: r = [], groups: o = [] }) => {
+}), ki = (e) => Object.fromEntries(e.map((t) => [t.id.toString(), t.values])), ud = { borderLeft: `3px solid ${je.background}` }, md = { borderLeft: `3px solid ${Oe.background}` }, Ln = ({ options: e, nameOf: t, onChosen: n, errors: r = [], groups: o = [] }) => {
   const i = fe().specifications, s = o.filter((l) => l.options.length > 0);
   return /* @__PURE__ */ a(zt, {
     options: e,
@@ -5057,7 +5059,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       })
     })
   });
-}, gd = (e) => e == null ? "" : typeof e == "string" ? e : typeof e == "object" ? JSON.stringify(e) : String(e), vd = (e, t) => `${t.eventSource ?? _t.eventSource}: ${e}`, ki = (e, t) => {
+}, gd = (e) => e == null ? "" : typeof e == "string" ? e : typeof e == "object" ? JSON.stringify(e) : String(e), vd = (e, t) => `${t.eventSource ?? _t.eventSource}: ${e}`, Ei = (e, t) => {
   const n = [
     e.authenticated === void 0 ? void 0 : e.authenticated ? t.authenticated : t.anonymous,
     e.roles && e.roles.length > 0 ? `${t.roles}: ${e.roles.join(", ")}` : void 0,
@@ -5065,7 +5067,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
   ].filter((r) => r !== void 0);
   return n.length === 0 ? void 0 : `${t.caller}: ${n.join(" · ")}`;
 }, Ni = ({ title: e, values: t, caller: n, message: r }) => {
-  const { messages: o } = Q(), i = o.specifications.values ?? _t, s = Object.entries(t ?? {}), l = n ? ki(n, i) : void 0;
+  const { messages: o } = Q(), i = o.specifications.values ?? _t, s = Object.entries(t ?? {}), l = n ? Ei(n, i) : void 0;
   return /* @__PURE__ */ x("div", {
     className: "event-modeling-spec-details",
     children: [
@@ -5090,7 +5092,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       })
     ]
   });
-}, pd = (e, t, n) => Object.keys(e ?? {}).length > 0 || !!n || !!t && ki(t, _t) !== void 0, Re = ({ name: e, colors: t, onOpen: n, values: r, caller: o, message: i }) => {
+}, pd = (e, t, n) => Object.keys(e ?? {}).length > 0 || !!n || !!t && Ei(t, _t) !== void 0, Re = ({ name: e, colors: t, onOpen: n, values: r, caller: o, message: i }) => {
   const s = be(), l = A(null), d = !s && !!n, c = /* @__PURE__ */ a("div", {
     ref: l,
     children: /* @__PURE__ */ a(lt, {
@@ -5199,7 +5201,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
         c.current = !0, d(!0);
         try {
           if (!await y(e, n.id, w.givenContextId)) return;
-          v((k) => wd(k, w, S));
+          v((E) => wd(E, w, S));
         } finally {
           c.current = !1, d(!1);
         }
@@ -5256,12 +5258,12 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       })]
     }, d.givenContextId.toString()))
   });
-}, Ed = ({ sliceId: e, sliceType: t, specification: n, events: r, readModel: o, additionalReadModels: i = [], renamedReadModelName: s, contexts: l, contextLabels: d }) => {
-  const { editing: c, messages: u } = Q(), v = be(), { onGivenEventAdded: h, onGivenEventValuesSet: g, onGivenReadModelSet: m, onGivenReadModelValuesSet: p, onGivenEventRemoved: f, onGivenReadModelRemoved: b, onSpecificationItemOpened: w } = c, [S, y] = z(n.given), [k, T] = z(n.givenReadModel), N = Ce(Ht), [C, G] = z(() => ({
-    ...Ei(n.given),
+}, kd = ({ sliceId: e, sliceType: t, specification: n, events: r, readModel: o, additionalReadModels: i = [], renamedReadModelName: s, contexts: l, contextLabels: d }) => {
+  const { editing: c, messages: u } = Q(), v = be(), { onGivenEventAdded: h, onGivenEventValuesSet: g, onGivenReadModelSet: m, onGivenReadModelValuesSet: p, onGivenEventRemoved: f, onGivenReadModelRemoved: b, onSpecificationItemOpened: w } = c, [S, y] = z(n.given), [E, T] = z(n.givenReadModel), N = Ce(Ht), [C, G] = z(() => ({
+    ...ki(n.given),
     ...n.givenReadModel ? { [n.givenReadModel.id.toString()]: n.givenReadModel.values ?? {} } : {},
     ...N.recall(n.id.toString())
-  })), J = v || !(h || g || m || p || f || b || w), E = J ? n.given : S, L = J ? n.givenReadModel : k, F = Cd({
+  })), J = v || !(h || g || m || p || f || b || w), k = J ? n.given : S, L = J ? n.givenReadModel : E, F = Cd({
     sliceId: e,
     sliceType: t,
     specification: {
@@ -5312,7 +5314,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       values: J ? L.values : C[ue.toString()] ?? L.values,
       onOpen: !v && w && m && P ? (Y) => D(ue, Ke.readModel, K, Y, P.schema, W(P)) : void 0
     })
-  }, ue.toString()), Pe = E.map((Y) => {
+  }, ue.toString()), Pe = k.map((Y) => {
     const ge = _.get(Y.eventId.toString())?.name ?? Y.name;
     return /* @__PURE__ */ a(Tt, {
       name: ge,
@@ -5385,7 +5387,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       Pe
     ]
   });
-}, kd = ({ sliceId: e, sliceType: t, specification: n, command: r, renamedCommandName: o, events: i = [], inputEvents: s = [] }) => {
+}, Ed = ({ sliceId: e, sliceType: t, specification: n, command: r, renamedCommandName: o, events: i = [], inputEvents: s = [] }) => {
   const { editing: l, messages: d } = Q(), c = be(), { onWhenCommandSet: u, onWhenCommandValuesSet: v, onSpecificationItemOpened: h } = l, [g, m] = z(n.when), p = Ce(Ht), [f, b] = z(() => p.recall(n.id.toString()).when ?? n.when?.values ?? {}), w = c || !(u || v || h), S = w ? n.when : g ?? n.when, y = (H) => {
     const I = ce.create();
     m({
@@ -5394,7 +5396,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       name: H.name,
       values: {}
     }), b({}), p.remember(n.id.toString(), lr, {}), u?.(e, n.id, I, H.id, H.name);
-  }, k = (H, I, _, D, M) => h?.({
+  }, E = (H, I, _, D, M) => h?.({
     sliceId: e,
     specificationId: n.id,
     itemId: H,
@@ -5409,7 +5411,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
         values: W
       }), p.remember(n.id.toString(), lr, W), v?.(e, n.id, W);
     }
-  }), T = t === B.stateChange ? r : void 0, N = t === B.stateView ? i : t === B.translator ? s : [], C = !!T && !!S && (S.commandId ? T.id.equals(S.commandId) : !S.name || S.name === T.name), G = S && (S.commandId && r?.id.equals(S.commandId) ? o ?? S.name : S.name), J = !c && !!h && !!v, E = C && S ? S.id : T?.id, L = C ? w ? S?.values : f : void 0, F = n.caller, j = w ? S?.values : f, P = n.whenEvent;
+  }), T = t === B.stateChange ? r : void 0, N = t === B.stateView ? i : t === B.translator ? s : [], C = !!T && !!S && (S.commandId ? T.id.equals(S.commandId) : !S.name || S.name === T.name), G = S && (S.commandId && r?.id.equals(S.commandId) ? o ?? S.name : S.name), J = !c && !!h && !!v, k = C && S ? S.id : T?.id, L = C ? w ? S?.values : f : void 0, F = n.caller, j = w ? S?.values : f, P = n.whenEvent;
   if (P) {
     const H = i.find((_) => _.id.equals(P.eventId))?.name ?? P.name, I = d.specifications.values ?? _t;
     return /* @__PURE__ */ a(Ot, {
@@ -5435,15 +5437,15 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
         colors: rt,
         values: j,
         caller: F,
-        onOpen: J ? (H) => k(S.id, S.commandId, G, H, f) : void 0
+        onOpen: J ? (H) => E(S.id, S.commandId, G, H, f) : void 0
       }, S.id.toString()),
-      T && E && /* @__PURE__ */ a(Re, {
+      T && k && /* @__PURE__ */ a(Re, {
         name: T.name,
         colors: rt,
         values: L,
         caller: F,
-        onOpen: J ? (H) => k(E, T.id, T.name, H, f) : void 0
-      }, E.toString()),
+        onOpen: J ? (H) => E(k, T.id, T.name, H, f) : void 0
+      }, k.toString()),
       N.map((H) => /* @__PURE__ */ a(Re, {
         name: H.name,
         colors: t === B.translator ? gn : we,
@@ -5534,10 +5536,10 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
     disabled: n
   });
 }, Td = ({ sliceId: e, sliceType: t, specification: n, events: r, command: o, readModel: i, renamedEventNames: s = {}, extra: l, extraGroups: d }) => {
-  const { editing: c, messages: u } = Q(), v = be(), { onThenEventAdded: h, onThenEventValuesSet: g, onThenErrorAdded: m, onThenRuleErrorAdded: p, onThenErrorRenamed: f, onThenEventRemoved: b, onThenErrorRemoved: w, onThenReadModelValuesSet: S, onSpecificationItemOpened: y } = c, [k, T] = z(n.thenEvents), [N, C] = z(n.thenErrors), G = Ce(Ht), J = G.recall(n.id.toString()), [E, L] = z(() => ({
-    ...Ei(n.thenEvents),
+  const { editing: c, messages: u } = Q(), v = be(), { onThenEventAdded: h, onThenEventValuesSet: g, onThenErrorAdded: m, onThenRuleErrorAdded: p, onThenErrorRenamed: f, onThenEventRemoved: b, onThenErrorRemoved: w, onThenReadModelValuesSet: S, onSpecificationItemOpened: y } = c, [E, T] = z(n.thenEvents), [N, C] = z(n.thenErrors), G = Ce(Ht), J = G.recall(n.id.toString()), [k, L] = z(() => ({
+    ...ki(n.thenEvents),
     ...J
-  })), F = n.thenReadModel, j = !!F && !!i && i.id.equals(F.readModelItemId), [P, H] = z(() => J[i?.id.toString() ?? ""] ?? (j ? F?.values : void 0) ?? {}), I = v || !(h || g || m || p || f || b || w || S || y), _ = I ? n.thenEvents : k, D = I ? n.thenErrors : N, M = le(() => new Map(r.map(($) => [$.id.toString(), $])), [r]), W = le(() => Rd(o, r), [o, r]), Z = Nd(t), V = ($) => {
+  })), F = n.thenReadModel, j = !!F && !!i && i.id.equals(F.readModelItemId), [P, H] = z(() => J[i?.id.toString() ?? ""] ?? (j ? F?.values : void 0) ?? {}), I = v || !(h || g || m || p || f || b || w || S || y), _ = I ? n.thenEvents : E, D = I ? n.thenErrors : N, M = le(() => new Map(r.map(($) => [$.id.toString(), $])), [r]), W = le(() => Rd(o, r), [o, r]), Z = Nd(t), V = ($) => {
     const ie = ce.create();
     T((me) => [...me, {
       id: ie,
@@ -5575,7 +5577,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       children: /* @__PURE__ */ a(Re, {
         name: me,
         colors: we,
-        values: I ? $.values : E[$.id.toString()] ?? $.values,
+        values: I ? $.values : k[$.id.toString()] ?? $.values,
         onOpen: !v && y && g ? (ye) => y({
           sliceId: e,
           specificationId: n.id,
@@ -5583,7 +5585,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
           kind: Ke.event,
           name: me,
           schema: ie?.schema,
-          values: E[$.id.toString()] ?? {},
+          values: k[$.id.toString()] ?? {},
           host: ye,
           onValuesSet: (De) => {
             L((Vi) => ({
@@ -5665,7 +5667,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
     ]
   });
 }, Pd = ({ slice: e, collapsed: t, showDetails: n }) => {
-  const { visualizationMode: r } = Ee();
+  const { visualizationMode: r } = ke();
   if (r !== "fillLines" || t) return null;
   const o = [
     e.id.toString(),
@@ -5682,7 +5684,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
     recomputeKey: o
   });
 }, Ld = ({ slice: e, collapsed: t, moduleId: n, featureId: r, collection: o, rows: i, heights: s, priorEvents: l, followingEvents: d = [], externalEvents: c, slots: u, controls: v }) => {
-  const { detailLevel: h, detailsVisibility: g } = Ee(), m = Lr(h, Dr(g, n.toString(), r.toString(), e.id.toString())), p = /* @__PURE__ */ a(Hc, {
+  const { detailLevel: h, detailsVisibility: g } = ke(), m = Lr(h, Dr(g, n.toString(), r.toString(), e.id.toString())), p = /* @__PURE__ */ a(Hc, {
     featureId: r,
     slice: e,
     eventCount: e.events.length,
@@ -5732,7 +5734,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
         }
         switch (b.rowType) {
           case X.UI: {
-            const y = e.actors.find((k) => k.id === b.actor?.id);
+            const y = e.actors.find((E) => E.id === b.actor?.id);
             return /* @__PURE__ */ a(vu, {
               ...w,
               actorId: b.actor?.id ?? "",
@@ -5786,7 +5788,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
         message: w.lastRunMessage ?? ""
       }),
       renderRows: (w) => /* @__PURE__ */ x(te, { children: [
-        /* @__PURE__ */ a(Ed, {
+        /* @__PURE__ */ a(kd, {
           sliceId: e.id,
           sliceType: e.sliceType,
           specification: w,
@@ -5795,7 +5797,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
           additionalReadModels: e.additionalReadModels,
           renamedReadModelName: e.readModel?.name
         }),
-        /* @__PURE__ */ a(kd, {
+        /* @__PURE__ */ a(Ed, {
           sliceId: e.id,
           sliceType: e.sliceType,
           specification: w,
@@ -5831,11 +5833,11 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
     })]
   })
 }), Dd = ({ feature: e, options: t, moduleId: n, collection: r, rows: o, heights: i, slices: s, externalEvents: l, slots: d, editor: c, onSliceArea: u, sliceAreas: v, renderHeader: h, onSlicesChanged: g }) => {
-  const m = A(null), p = (y) => s.slice(0, s.findIndex((k) => k.id.equals(y))).filter((k) => k.sliceType === B.stateChange).flatMap((k) => k.events), f = (y) => s.slice(s.findIndex((k) => k.id.equals(y)) + 1).filter((k) => k.sliceType === B.stateChange).flatMap((k) => k.events), b = q(async (y, k, T) => {
-    const N = v.get(k.toString());
+  const m = A(null), p = (y) => s.slice(0, s.findIndex((E) => E.id.equals(y))).filter((E) => E.sliceType === B.stateChange).flatMap((E) => E.events), f = (y) => s.slice(s.findIndex((E) => E.id.equals(y)) + 1).filter((E) => E.sliceType === B.stateChange).flatMap((E) => E.events), b = q(async (y, E, T) => {
+    const N = v.get(E.toString());
     N?.moveIn(y, T);
     try {
-      const C = await c.onMoveSlice?.(y, e.id, k, T) ?? !1;
+      const C = await c.onMoveSlice?.(y, e.id, E, T) ?? !1;
       return N?.completeMoveIn(y.id, C), C;
     } catch {
       return N?.completeMoveIn(y.id, !1), !1;
@@ -5844,8 +5846,8 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
     c.onMoveSlice,
     e.id,
     v
-  ]), w = q((y, k) => {
-    !c.onMoveSlice || k.equals(e.id) || !m.current?.moveOut(y.id) || b(y, k, Number.MAX_SAFE_INTEGER).then((T) => m.current?.completeMoveOut(y.id, T));
+  ]), w = q((y, E) => {
+    !c.onMoveSlice || E.equals(e.id) || !m.current?.moveOut(y.id) || b(y, E, Number.MAX_SAFE_INTEGER).then((T) => m.current?.completeMoveOut(y.id, T));
   }, [
     c.onMoveSlice,
     e.id,
@@ -5881,13 +5883,13 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       hideEmptyPlaceholder: t.headerVisibility === "hidden",
       createSlice: (y) => y,
       onSlicesChanged: g,
-      onAddSlice: c.onAddSlice ? (y, k) => c.onAddSlice?.(e.id, y, k) ?? Promise.resolve(void 0) : void 0,
+      onAddSlice: c.onAddSlice ? (y, E) => c.onAddSlice?.(e.id, y, E) ?? Promise.resolve(void 0) : void 0,
       onReorderSlices: c.onReorderSlices ? (y) => c.onReorderSlices?.(e.id, y) ?? Promise.resolve(!1) : void 0,
       onMoveSlice: c.onMoveSlice ? b : void 0,
       validateSliceDrop: c.validateSliceDrop,
-      renderSlice: (y, k) => /* @__PURE__ */ a(Ld, {
+      renderSlice: (y, E) => /* @__PURE__ */ a(Ld, {
         slice: y,
-        collapsed: k.collapsed,
+        collapsed: E.collapsed,
         moduleId: n,
         featureId: e.id,
         collection: r,
@@ -5898,16 +5900,16 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
         externalEvents: l,
         slots: d,
         controls: {
-          collapsed: k.collapsed,
-          sliceCollapsed: k.sliceCollapsed,
-          isDragging: k.isDragging,
-          onSliceDragStart: k.onSliceDragStart,
-          onAddSlice: c.onAddSlice ? k.addSlice : void 0,
+          collapsed: E.collapsed,
+          sliceCollapsed: E.sliceCollapsed,
+          isDragging: E.isDragging,
+          onSliceDragStart: E.onSliceDragStart,
+          onAddSlice: c.onAddSlice ? E.addSlice : void 0,
           onToggleCollapse: c.onSliceCollapseChanged ? () => {
             m.current?.updateSlices((T) => T.map((N) => N.id.equals(y.id) ? {
               ...N,
-              collapsed: !k.sliceCollapsed
-            } : N)), c.onSliceCollapseChanged?.(e.id, y.id, !k.sliceCollapsed);
+              collapsed: !E.sliceCollapsed
+            } : N)), c.onSliceCollapseChanged?.(e.id, y.id, !E.sliceCollapsed);
           } : void 0,
           onRenamed: c.onSliceRenamed ? (T) => {
             m.current?.updateSlices((N) => N.map((C) => C.id.equals(y.id) ? {
@@ -6020,7 +6022,7 @@ var Bl = 250, Hl = "Inter, Helvetica, Arial, sans-serif", lt = ({ name: e, backg
       collapsed: e.collapsed,
       onAddModule: u,
       onToggleCollapse: v,
-      onRenamed: h ? (y, k) => h(k) : void 0,
+      onRenamed: h ? (y, E) => h(E) : void 0,
       onDragStart: c,
       onAddFeature: f
     }),
@@ -6061,8 +6063,8 @@ function Bd(e, t) {
     features: n.features.map((r) => Oi(t, r))
   }));
 }
-var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect: r, onCollectionMoving: o, onCollectionMoved: i, canMove: s, onAddModule: l, onModulesReordered: d, onCollapseChanged: c, onRenameModule: u, onModulesChanged: v, onFeaturesChanged: h, onPersistenceError: g, rowLabels: m, onActorsReordered: p, onAddFeature: f, onRenameFeature: b, onFeatureCollapseChanged: w, onFeaturesReordered: S, onAddSlice: y, onReorderSlices: k, onMoveSlice: T, validateSliceDrop: N, onSliceCollapseChanged: C, onSliceRenamed: G, onSliceDuplicated: J }) => {
-  const { readOnly: E, editing: L } = Q(), [F, j] = z(/* @__PURE__ */ new Map()), P = q((ne, $) => j((ie) => new Map(ie).set(ne.toString(), $)), []), H = le(() => Bd(e.modules, F), [e.modules, F]), I = E ? {
+var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect: r, onCollectionMoving: o, onCollectionMoved: i, canMove: s, onAddModule: l, onModulesReordered: d, onCollapseChanged: c, onRenameModule: u, onModulesChanged: v, onFeaturesChanged: h, onPersistenceError: g, rowLabels: m, onActorsReordered: p, onAddFeature: f, onRenameFeature: b, onFeatureCollapseChanged: w, onFeaturesReordered: S, onAddSlice: y, onReorderSlices: E, onMoveSlice: T, validateSliceDrop: N, onSliceCollapseChanged: C, onSliceRenamed: G, onSliceDuplicated: J }) => {
+  const { readOnly: k, editing: L } = Q(), [F, j] = z(/* @__PURE__ */ new Map()), P = q((ne, $) => j((ie) => new Map(ie).set(ne.toString(), $)), []), H = le(() => Bd(e.modules, F), [e.modules, F]), I = k ? {
     onFeatureCollapseChanged: P,
     onSliceCollapseChanged: (ne, $, ie) => P($, ie)
   } : {
@@ -6071,19 +6073,19 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
     onFeatureCollapseChanged: w,
     onFeaturesReordered: S,
     onAddSlice: y,
-    onReorderSlices: k,
+    onReorderSlices: E,
     onMoveSlice: T,
     validateSliceDrop: N,
     onSliceCollapseChanged: C,
     onSliceRenamed: G,
     onSliceDuplicated: J
-  }, [_, D] = z(e.modules), [M, W] = z(/* @__PURE__ */ new Map()), Z = A(null), [V, U] = z(0), oe = !!(l || d || c || u || p || f || b || w || S || y || k || T || C || G || J || s && o && i || $d(L)), O = E || !oe, R = E ? H : e.modules, K = (O ? R : _).map((ne) => ({
+  }, [_, D] = z(e.modules), [M, W] = z(/* @__PURE__ */ new Map()), Z = A(null), [V, U] = z(0), oe = !!(l || d || c || u || p || f || b || w || S || y || E || T || C || G || J || s && o && i || $d(L)), O = k || !oe, R = k ? H : e.modules, K = (O ? R : _).map((ne) => ({
     ...ne,
     features: O ? ne.features : M.get(ne.id.toString()) ?? ne.features
   })), ue = {
     ...e,
     modules: K
-  }, xe = En(ue), Pe = gi(), ze = li(ue, Pe), Y = gt(ue), ge = Y.length > 0 && K.some((ne) => !ne.collapsed), Me = !!(s && o && i), dt = zs(Y.map(({ slice: ne }) => ({
+  }, xe = kn(ue), Pe = gi(), ze = li(ue, Pe), Y = gt(ue), ge = Y.length > 0 && K.some((ne) => !ne.collapsed), Me = !!(s && o && i), dt = zs(Y.map(({ slice: ne }) => ({
     id: ne.id.toString(),
     name: ne.name,
     events: ne.events.map(($) => ({
@@ -6123,14 +6125,14 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
     contentRows: xe,
     rowHeights: ze,
     actors: e.actors,
-    onActorsReordered: E ? void 0 : p
+    onActorsReordered: k ? void 0 : p
   };
   return /* @__PURE__ */ a(bn.Provider, {
-    value: E || !oe,
+    value: k || !oe,
     children: /* @__PURE__ */ x("div", {
       className: "event-modeling-grid-container event-modeling-collection-grid",
       onClick: r,
-      children: [s && o && i && /* @__PURE__ */ a(Ea, {
+      children: [s && o && i && /* @__PURE__ */ a(ka, {
         collectionId: e.id,
         position: e.position,
         getZoom: t,
@@ -6157,7 +6159,7 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
                 initialModules: R,
                 onAddModule: l,
                 onModulesReordered: d,
-                onCollapseChanged: E ? (ne, $) => (P(ne, $), Promise.resolve(!0)) : c,
+                onCollapseChanged: k ? (ne, $) => (P(ne, $), Promise.resolve(!0)) : c,
                 onRenameModule: u,
                 onPersistenceError: g,
                 onModulesChanged: (ne) => {
@@ -6330,7 +6332,7 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
   ];
   return /* @__PURE__ */ a(qd, { items: r });
 }, Ti = ({ showLogo: e, showViewOptions: t, toolbar: n, chrome: r, children: o }) => {
-  const i = Ee(), s = Uo(), [l, d] = z(i), c = s ? i : l, u = s ?? d, v = t || n !== void 0;
+  const i = ke(), s = Uo(), [l, d] = z(i), c = s ? i : l, u = s ?? d, v = t || n !== void 0;
   return /* @__PURE__ */ a(Yo, {
     presentation: c,
     onChange: u,
@@ -6429,7 +6431,7 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
       id: I.id,
       rect: _
     }];
-  })), [t]), k = le(() => Zd(f, (I) => y.get(I)?.rect), [f, y]), T = (I, _) => {
+  })), [t]), E = le(() => Zd(f, (I) => y.get(I)?.rect), [f, y]), T = (I, _) => {
     for (const D of y.values())
       if (D.id.toString() !== _.toString() && sa(I, D.rect))
         return D;
@@ -6483,7 +6485,7 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
         else throw U;
       }
     }
-  }, E = async (I) => {
+  }, k = async (I) => {
     if (!(!c || m.current.pending.size > 0)) {
       p((_) => Xd(_, I));
       try {
@@ -6526,7 +6528,7 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
               className: "module-collection-link-layer__arrow-head"
             })
           }) }),
-          k.map(({ link: I, path: _ }) => /* @__PURE__ */ a("path", {
+          E.map(({ link: I, path: _ }) => /* @__PURE__ */ a("path", {
             d: _,
             className: "module-collection-link-layer__arrow",
             markerEnd: `url(#${S})`
@@ -6570,7 +6572,7 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
           onPointerCancel: L
         }, `${I.toString()}-${D}`);
       })),
-      c && h.pending.size === 0 && k.map(({ link: I, center: _ }) => /* @__PURE__ */ a("button", {
+      c && h.pending.size === 0 && E.map(({ link: I, center: _ }) => /* @__PURE__ */ a("button", {
         type: "button",
         className: "module-collection-link-layer__delete",
         style: {
@@ -6580,7 +6582,7 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
         title: l.removeLink,
         onPointerDown: (D) => D.stopPropagation(),
         onClick: () => {
-          E(I.id);
+          k(I.id);
         },
         children: /* @__PURE__ */ a("i", { className: "pi pi-times" })
       }, I.id.toString()))
@@ -6644,29 +6646,29 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
   }
 }, St = 50, Ct = () => {
 }, tc = (e) => e.stopPropagation(), Pi = qi(({ notes: e }, t) => {
-  const { editing: n, actions: r, messages: o } = Q(), i = A(new ec(e)), s = A(/* @__PURE__ */ new Set()), l = A(!1), d = A(/* @__PURE__ */ new Set()), c = A(/* @__PURE__ */ new Set()), [u, v] = z(0), [h, g] = z(), [m, p] = z(), f = A(null), b = le(() => [f], []), w = q(() => v((E) => E + 1), []);
+  const { editing: n, actions: r, messages: o } = Q(), i = A(new ec(e)), s = A(/* @__PURE__ */ new Set()), l = A(!1), d = A(/* @__PURE__ */ new Set()), c = A(/* @__PURE__ */ new Set()), [u, v] = z(0), [h, g] = z(), [m, p] = z(), f = A(null), b = le(() => [f], []), w = q(() => v((k) => k + 1), []);
   re(() => {
     i.current.reconcile(e), w();
   }, [e, w]), re(() => {
-    const E = i.current.nextExpiration;
-    if (E === void 0) return;
+    const k = i.current.nextExpiration;
+    if (k === void 0) return;
     const L = setTimeout(() => {
       i.current.expire(), w();
-    }, Math.max(0, E - Date.now()));
+    }, Math.max(0, k - Date.now()));
     return () => clearTimeout(L);
   }, [u, w]);
-  const S = q((E, L, F) => s.current.has(E) ? Promise.resolve() : (s.current.add(E), i.current.change(E, L), i.current.begin(E, L), w(), Promise.resolve().then(F).then((j) => (j === !1 && (i.current.rollback(E, L), i.current.get(E) || g((P) => P === E ? void 0 : P), w()), j !== !1)).catch((j) => (i.current.rollback(E, L), i.current.get(E) || g((P) => P === E ? void 0 : P), w(), r.stickyNoteError ? r.stickyNoteError(j) : console.error(j), !1)).finally(() => {
-    i.current.settle(E, L), s.current.delete(E), w();
+  const S = q((k, L, F) => s.current.has(k) ? Promise.resolve() : (s.current.add(k), i.current.change(k, L), i.current.begin(k, L), w(), Promise.resolve().then(F).then((j) => (j === !1 && (i.current.rollback(k, L), i.current.get(k) || g((P) => P === k ? void 0 : P), w()), j !== !1)).catch((j) => (i.current.rollback(k, L), i.current.get(k) || g((P) => P === k ? void 0 : P), w(), r.stickyNoteError ? r.stickyNoteError(j) : console.error(j), !1)).finally(() => {
+    i.current.settle(k, L), s.current.delete(k), w();
   })), [r, w]);
-  st(t, () => ({ add(E) {
+  st(t, () => ({ add(k) {
     const L = n.onStickyNoteAdded;
     if (!L || l.current) return;
     l.current = !0, r.stickyNoteCreatingChanged?.(!0);
     const F = {
       id: ce.create().toString(),
       position: {
-        x: E.x - St / 2,
-        y: E.y - St / 2
+        x: k.x - St / 2,
+        y: k.y - St / 2
       },
       width: St,
       height: St,
@@ -6685,45 +6687,45 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
   ]);
   const y = n.onStickyNoteMoved || n.onStickyNoteResized || n.onStickyNoteTextChanged || n.onStickyNoteRemoved ? g : void 0;
   nt(b, () => y?.(void 0), h !== void 0 && !!y);
-  const k = (E, L) => {
-    const F = i.current.get(E);
-    !F || s.current.has(E) || F.position.x === L.x && F.position.y === L.y || (d.current.add(E), i.current.change(E, {
+  const E = (k, L) => {
+    const F = i.current.get(k);
+    !F || s.current.has(k) || F.position.x === L.x && F.position.y === L.y || (d.current.add(k), i.current.change(k, {
       ...F,
       position: L
     }), w());
-  }, T = (E, L) => {
-    const F = i.current.get(E);
-    !F || s.current.has(E) || F.position.x === L.position.x && F.position.y === L.position.y && F.width === L.width && F.height === L.height || (c.current.add(E), i.current.change(E, {
+  }, T = (k, L) => {
+    const F = i.current.get(k);
+    !F || s.current.has(k) || F.position.x === L.position.x && F.position.y === L.position.y && F.width === L.width && F.height === L.height || (c.current.add(k), i.current.change(k, {
       ...F,
       ...L
     }), w());
-  }, N = (E) => {
-    if (!d.current.delete(E)) return;
-    const L = i.current.get(E);
-    L && n.onStickyNoteMoved && S(E, L, () => n.onStickyNoteMoved?.(E, L.position));
-  }, C = (E) => {
-    if (!c.current.delete(E)) return;
-    const L = i.current.get(E);
-    L && n.onStickyNoteResized && S(E, L, () => n.onStickyNoteResized?.(E, {
+  }, N = (k) => {
+    if (!d.current.delete(k)) return;
+    const L = i.current.get(k);
+    L && n.onStickyNoteMoved && S(k, L, () => n.onStickyNoteMoved?.(k, L.position));
+  }, C = (k) => {
+    if (!c.current.delete(k)) return;
+    const L = i.current.get(k);
+    L && n.onStickyNoteResized && S(k, L, () => n.onStickyNoteResized?.(k, {
       position: L.position,
       width: L.width,
       height: L.height
     }));
-  }, G = (E, L) => {
-    const F = i.current.get(E);
-    F && F.text !== L && n.onStickyNoteTextChanged && S(E, {
+  }, G = (k, L) => {
+    const F = i.current.get(k);
+    F && F.text !== L && n.onStickyNoteTextChanged && S(k, {
       ...F,
       text: L
-    }, () => n.onStickyNoteTextChanged?.(E, L));
-  }, J = q((E) => {
-    !i.current.get(E) || !n.onStickyNoteRemoved || s.current.has(E) || (g((L) => L === E ? void 0 : L), S(E, null, () => n.onStickyNoteRemoved?.(E)));
+    }, () => n.onStickyNoteTextChanged?.(k, L));
+  }, J = q((k) => {
+    !i.current.get(k) || !n.onStickyNoteRemoved || s.current.has(k) || (g((L) => L === k ? void 0 : L), S(k, null, () => n.onStickyNoteRemoved?.(k)));
   }, [n, S]);
   return re(() => {
     if (!n.onStickyNoteRemoved || h === void 0) return;
-    const E = (L) => {
+    const k = (L) => {
       L.key !== "Delete" && L.key !== "Backspace" || Qd(L.target) || (L.preventDefault(), J(h));
     };
-    return document.addEventListener("keydown", E), () => document.removeEventListener("keydown", E);
+    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
   }, [
     h,
     n,
@@ -6731,29 +6733,29 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
   ]), /* @__PURE__ */ a("div", {
     ref: f,
     className: "event-model-sticky-notes",
-    children: i.current.notes.map((E) => {
-      const L = E.position?.x ?? 0, F = E.position?.y ?? 0;
+    children: i.current.notes.map((k) => {
+      const L = k.position?.x ?? 0, F = k.position?.y ?? 0;
       return /* @__PURE__ */ a(Ir, {
         x: L,
         y: F,
-        zIndex: m === E.id ? 3 : 2,
+        zIndex: m === k.id ? 3 : 2,
         children: /* @__PURE__ */ x("div", {
-          "data-sticky-note-id": E.id,
-          className: s.current.has(E.id) ? "event-model-sticky-note--busy" : void 0,
-          "aria-busy": s.current.has(E.id),
-          onDoubleClickCapture: n.onStickyNoteTextChanged && !s.current.has(E.id) ? void 0 : tc,
+          "data-sticky-note-id": k.id,
+          className: s.current.has(k.id) ? "event-model-sticky-note--busy" : void 0,
+          "aria-busy": s.current.has(k.id),
+          onDoubleClickCapture: n.onStickyNoteTextChanged && !s.current.has(k.id) ? void 0 : tc,
           children: [/* @__PURE__ */ a(Xi, {
             note: {
-              id: E.id,
+              id: k.id,
               x: L,
               y: F,
-              width: E.width,
-              height: E.height,
-              text: E.text
+              width: k.width,
+              height: k.height,
+              text: k.text
             },
-            selected: h === E.id && !!n.onStickyNoteResized && !s.current.has(E.id),
+            selected: h === k.id && !!n.onStickyNoteResized && !s.current.has(k.id),
             onSelect: y ?? Ct,
-            onMove: n.onStickyNoteMoved ? (j, P, H) => k(j, {
+            onMove: n.onStickyNoteMoved ? (j, P, H) => E(j, {
               x: P,
               y: H
             }) : Ct,
@@ -6769,13 +6771,13 @@ var Hd = () => 1, Wd = ({ collection: e, getZoom: t = Hd, slots: n, onDeselect:
             onResizeEnd: n.onStickyNoteResized ? C : void 0,
             onTextChange: n.onStickyNoteTextChanged ? G : Ct,
             onExpandedChange: (j, P) => p((H) => P ? j : H === j ? void 0 : H)
-          }), s.current.has(E.id) && /* @__PURE__ */ a("span", {
+          }), s.current.has(k.id) && /* @__PURE__ */ a("span", {
             className: "event-model-sticky-note__progress",
             "aria-hidden": "true",
             children: /* @__PURE__ */ a(to, { className: "event-model-sticky-note__spinner" })
           })]
         })
-      }, E.id);
+      }, k.id);
     })
   });
 });
@@ -6924,7 +6926,7 @@ var hc = ({ id: e, collections: t, links: n, stickyNotes: r, readOnly: o, editor
     onCollectionMoved: t.onCollectionMoved,
     onCollectionsChange: t.onCollectionsChange,
     onPersistenceError: t.onPersistenceError
-  }), { collections: v, pendingMoveIds: h, canMove: g, moveCollection: m, collectionMoved: p, addCollection: f } = u, [b, w] = z(/* @__PURE__ */ new Map()), S = A(s?.initialZoom ?? 1), y = q(() => S.current, []), k = A(null), { estimateSize: T, countSlices: N, renderCollection: C } = t, G = q((M) => dc({
+  }), { collections: v, pendingMoveIds: h, canMove: g, moveCollection: m, collectionMoved: p, addCollection: f } = u, [b, w] = z(/* @__PURE__ */ new Map()), S = A(s?.initialZoom ?? 1), y = q(() => S.current, []), E = A(null), { estimateSize: T, countSlices: N, renderCollection: C } = t, G = q((M) => dc({
     documentId: e,
     collections: v,
     estimateSize: T,
@@ -6944,7 +6946,7 @@ var hc = ({ id: e, collections: t, links: n, stickyNotes: r, readOnly: o, editor
   ]);
   st(d, () => ({
     addCollection: f,
-    addStickyNote: (M) => k.current?.add(M),
+    addStickyNote: (M) => E.current?.add(M),
     exportImage: G
   }), [f, G]);
   const J = q((M, W, Z) => {
@@ -6955,10 +6957,10 @@ var hc = ({ id: e, collections: t, links: n, stickyNotes: r, readOnly: o, editor
         height: Z
       });
     });
-  }, []), E = br(T), L = br(q((M) => (W) => C(M, W), [C])), F = le(() => Da(v), [v]), j = le(() => gc(F.map((M) => ({
+  }, []), k = br(T), L = br(q((M) => (W) => C(M, W), [C])), F = le(() => Da(v), [v]), j = le(() => gc(F.map((M) => ({
     position: M.position,
-    size: E(M)
-  }))), [F, E]), P = le(() => pc(v.reduce((M, W) => M + N(W), 0)), [v, N]), H = le(() => F.flatMap((M) => {
+    size: k(M)
+  }))), [F, k]), P = le(() => pc(v.reduce((M, W) => M + N(W), 0)), [v, N]), H = le(() => F.flatMap((M) => {
     const W = b.get(M.id.toString());
     return W ? [{
       id: M.id,
@@ -6971,7 +6973,7 @@ var hc = ({ id: e, collections: t, links: n, stickyNotes: r, readOnly: o, editor
   }, [I]), D = /* @__PURE__ */ x(te, { children: [
     F.map((M) => /* @__PURE__ */ a(Li, {
       collection: M,
-      estimatedSize: E(M),
+      estimatedSize: k(M),
       measuredSize: b.get(M.id.toString()),
       onSize: J,
       getZoom: y,
@@ -6987,7 +6989,7 @@ var hc = ({ id: e, collections: t, links: n, stickyNotes: r, readOnly: o, editor
       ...c
     }),
     /* @__PURE__ */ a(Pi, {
-      ref: k,
+      ref: E,
       notes: r
     })
   ] });
@@ -7117,11 +7119,11 @@ var wc = ({ document: e, readOnly: t = !1, editor: n, canvas: r, showMinimap: o
     value: l,
     children: r
   });
-}, Mc = (e, t) => e === $e.output ? t.translationDirection.output : t.translationDirection.input, Ec = (e, t) => e === $e.output ? t.translationDirection.changeToInput : t.translationDirection.changeToOutput, kc = (e) => e === $e.output ? "pi pi-send" : "pi pi-inbox", Nc = ({ direction: e, onDirectionChanged: t }) => {
+}, Mc = (e, t) => e === $e.output ? t.translationDirection.output : t.translationDirection.input, kc = (e, t) => e === $e.output ? t.translationDirection.changeToInput : t.translationDirection.changeToOutput, Ec = (e) => e === $e.output ? "pi pi-send" : "pi pi-inbox", Nc = ({ direction: e, onDirectionChanged: t }) => {
   const { readOnly: n, messages: r } = Q(), [o, i] = z(e), [s, l] = z(!1);
   re(() => i(e), [e]);
   const d = /* @__PURE__ */ a("i", {
-    className: kc(o),
+    className: Ec(o),
     style: { fontSize: 10 },
     "aria-hidden": "true"
   }), c = Mc(o, r);
@@ -7140,7 +7142,7 @@ var wc = ({ document: e, readOnly: t = !1, editor: n, canvas: r, showMinimap: o
     } finally {
       l(!1);
     }
-  }, v = Ec(o, r);
+  }, v = kc(o, r);
   return /* @__PURE__ */ a("button", {
     type: "button",
     className: "event-modeling-grid-add-button event-modeling-grid-add-button--small event-modeling-grid-add-button--no-circle",
@@ -7153,10 +7155,10 @@ var wc = ({ document: e, readOnly: t = !1, editor: n, canvas: r, showMinimap: o
 }, Ic = {
   fontSize: 11,
   fontWeight: 500,
-  color: "rgba(255,255,255,0.80)",
+  color: "color-mix(in srgb, var(--board-ink, #ffffff) 80%, transparent)",
   textAlign: "center"
 }, Fi = ({ slice: e, height: t, collapsed: n, selectableStatuses: r, unselectableStatusReason: o, error: i, leading: s, trailing: l, onToggleCollapse: d }) => {
-  const c = Q(), { showStatuses: u = !0 } = Ee(), { readOnly: v } = We(), { editing: h, actions: g } = c, m = h.onSliceRenamed, p = h.onSliceStatusChanged, f = h.onTranslationDirectionChanged, b = h.onSliceAdded, w = h.onSliceOpenStateSet, S = (g.sliceHeader ?? []).filter((y) => !y.when || y.when(e));
+  const c = Q(), { showStatuses: u = !0 } = ke(), { readOnly: v } = We(), { editing: h, actions: g } = c, m = h.onSliceRenamed, p = h.onSliceStatusChanged, f = h.onTranslationDirectionChanged, b = h.onSliceAdded, w = h.onSliceOpenStateSet, S = (g.sliceHeader ?? []).filter((y) => !y.when || y.when(e));
   return /* @__PURE__ */ x("div", {
     className: "event-modeling-grid-slice-column-header",
     style: {
@@ -7206,7 +7208,7 @@ var wc = ({ document: e, readOnly: t = !1, editor: n, canvas: r, showMinimap: o
             title: y.tooltip,
             "aria-label": y.tooltip,
             disabled: v || y.disabled,
-            onClick: (k) => y.onActivate(e.id, k.currentTarget.getBoundingClientRect()),
+            onClick: (E) => y.onActivate(e.id, E.currentTarget.getBoundingClientRect()),
             children: y.icon
           }, y.tooltip)),
           !c.readOnly && b && /* @__PURE__ */ a(ml, {
@@ -7309,7 +7311,7 @@ function _c(e, t, n, r) {
   }, []), v = q((p, f, b) => {
     const w = document.querySelector(`[data-slice-drop-target="true"][data-slice-module-id="${p.toString()}"][data-slice-feature-id="${b.toString()}"]`);
     return b.equals(f) ? w?.dataset.sliceAcceptsReorder === "true" : w?.dataset.sliceAcceptsMove === "true";
-  }, []), h = q((p, f, b, w, S, y, k, T = null) => {
+  }, []), h = q((p, f, b, w, S, y, E, T = null) => {
     const N = e.slices.findIndex((G) => G.id.equals(p));
     if (N === -1) return;
     const C = u(p, e.id, N);
@@ -7326,7 +7328,7 @@ function _c(e, t, n, r) {
       currentY: w,
       dropIndex: N,
       headerY: y,
-      zoom: k,
+      zoom: E,
       isValid: (C?.isValid ?? !0) && v(t, e.id, e.id),
       invalidReason: C?.reason
     });
@@ -7357,15 +7359,15 @@ function _c(e, t, n, r) {
     const p = (b) => {
       const w = s.current;
       if (!w) return;
-      const S = g(w.moduleId, b.clientX), y = m(S, b.clientX), k = u(w.sliceId, S, y);
+      const S = g(w.moduleId, b.clientX), y = m(S, b.clientX), E = u(w.sliceId, S, y);
       i((T) => T ? {
         ...T,
         currentX: b.clientX,
         currentY: b.clientY,
         targetFeatureId: S,
         dropIndex: y,
-        isValid: (k?.isValid ?? !0) && v(w.moduleId, w.featureId, S),
-        invalidReason: k?.reason
+        isValid: (E?.isValid ?? !0) && v(w.moduleId, w.featureId, S),
+        invalidReason: E?.reason
       } : void 0);
     }, f = () => {
       const b = s.current, w = b && Dc(b);
@@ -7470,7 +7472,7 @@ var Bc = ({ featureId: e, name: t, status: n, width: r, collapsed: o, isDragging
     children: h
   });
 }, Hc = ({ featureId: e, slice: t, eventCount: n, collapsed: r, isDragging: o = !1, onSliceDragStart: i, header: s, headerHeight: l = 44, body: d, specifications: c, collapsedWidth: u }) => {
-  const { readOnly: v } = Q(), h = Us(t.id.toString()), { ref: g, onMouseEnter: m, onMouseLeave: p } = Zs(h?.connectedSliceIds), f = A(null), b = Sn(f), [w, S] = z(!1), y = A(!1), k = Gr({
+  const { readOnly: v } = Q(), h = Us(t.id.toString()), { ref: g, onMouseEnter: m, onMouseLeave: p } = Zs(h?.connectedSliceIds), f = A(null), b = Sn(f), [w, S] = z(!1), y = A(!1), E = Gr({
     sliceType: t.sliceType,
     eventCount: n
   }), T = () => {
@@ -7500,7 +7502,7 @@ var Bc = ({ featureId: e, name: t, status: n, width: r, collapsed: o, isDragging
         featureId: e,
         name: t.name,
         status: t.status,
-        width: r ? u : k,
+        width: r ? u : E,
         collapsed: r,
         isDragging: o,
         onDragStart: v ? void 0 : i,
@@ -7513,7 +7515,7 @@ var Bc = ({ featureId: e, name: t, status: n, width: r, collapsed: o, isDragging
           height: l,
           collapsed: r
         }), typeof d == "function" ? d(b) : b && d]
-      }), typeof c == "function" ? c(b, k) : b && c]
+      }), typeof c == "function" ? c(b, E) : b && c]
     })
   });
 }, Wc = (e, t) => {
@@ -7691,7 +7693,7 @@ var Bc = ({ featureId: e, name: t, status: n, width: r, collapsed: o, isDragging
   return `${n} (${Array.from({ length: o.size + 1 }, (i, s) => s + 1).find((i) => !o.has(i))})`;
 };
 function eu({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollapsed: o, hideEmptyPlaceholder: i = !1, onSlicesChanged: s, createSlice: l, onAddSlice: d, onReorderSlices: c, onMoveSlice: u, validateSliceDrop: v, renderSlice: h }) {
-  const { readOnly: g, messages: m } = Q(), p = A(zc(t)), f = A(void 0), [b, w] = z(p.current), { slices: S } = b, y = A(!1), [k, T] = z(!1), N = q((D) => {
+  const { readOnly: g, messages: m } = Q(), p = A(zc(t)), f = A(void 0), [b, w] = z(p.current), { slices: S } = b, y = A(!1), [E, T] = z(!1), N = q((D) => {
     const M = p.current, W = D(M);
     W !== M && (p.current = W, w(W), W.slices !== M.slices && (f.current = W.slices, s?.(W.slices)));
   }, [s]);
@@ -7709,7 +7711,7 @@ function eu({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
         slices: W
       };
     });
-  }, [N]), G = q((D, M) => N((W) => qc(W, D, M)), [N]), J = q((D, M) => N((W) => Zc(W, D, M)), [N]), E = q((D, M) => N((W) => Jc(W, D, M)), [N]), L = q((D) => [...p.current.additions, ...p.current.incoming].some((M) => M.slice.id.equals(D)) || !p.current.slices.some((M) => M.id.equals(D)) ? !1 : (N((M) => Yc(M, D)), !0), [N]), F = q((D, M) => N((W) => Xc(W, D, M)), [N]), j = q((D, M, W) => {
+  }, [N]), G = q((D, M) => N((W) => qc(W, D, M)), [N]), J = q((D, M) => N((W) => Zc(W, D, M)), [N]), k = q((D, M) => N((W) => Jc(W, D, M)), [N]), L = q((D) => [...p.current.additions, ...p.current.incoming].some((M) => M.slice.id.equals(D)) || !p.current.slices.some((M) => M.id.equals(D)) ? !1 : (N((M) => Yc(M, D)), !0), [N]), F = q((D, M) => N((W) => Xc(W, D, M)), [N]), j = q((D, M, W) => {
     if (g || !d || y.current) return;
     y.current = !0, T(!0);
     const Z = l(Wc(D, W));
@@ -7729,7 +7731,7 @@ function eu({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
     updateSlices: C,
     addProjectedSlice: G,
     moveIn: J,
-    completeMoveIn: E,
+    completeMoveIn: k,
     moveOut: L,
     completeMoveOut: F
   }), [
@@ -7737,7 +7739,7 @@ function eu({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
     C,
     G,
     J,
-    E,
+    k,
     L,
     F
   ]);
@@ -7774,7 +7776,7 @@ function eu({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
   }), /* @__PURE__ */ a(Qt, {
     moduleId: n,
     featureId: r,
-    busy: k,
+    busy: E,
     acceptsReorder: !g && !!c,
     acceptsMove: !g && !!u,
     active: I?.targetFeatureId.equals(r),
@@ -7817,7 +7819,7 @@ function eu({ ref: e, initialSlices: t, moduleId: n, featureId: r, featureCollap
   }) : /* @__PURE__ */ a(Qt, {
     moduleId: n,
     featureId: r,
-    busy: k,
+    busy: E,
     acceptsReorder: !g && !!c,
     acceptsMove: !g && !!u,
     className: "event-modeling-slices-empty",
@@ -7905,7 +7907,7 @@ var Mm = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(te,
       placement: e,
       children: /* @__PURE__ */ a($n, { action: t })
     });
-}, Bn = (e) => e === B.stateView, Em = (e) => !Bn(e), au = (e, t) => Bn(e) && t === 0, su = (e) => e === B.translator, $i = (e) => {
+}, Bn = (e) => e === B.stateView, km = (e) => !Bn(e), au = (e, t) => Bn(e) && t === 0, su = (e) => e === B.translator, $i = (e) => {
   switch (e) {
     case Fe.timer:
       return "pi pi-clock";
@@ -8045,10 +8047,10 @@ var Mm = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(te,
     })
   });
 }, vu = ({ elements: e, windowSize: t, layout: n, collapsed: r = !1, conn: o, rowHeight: i, actorId: s, hasScreen: l = !1, renderThumbnail: d }) => {
-  const { readOnly: c, sliceId: u } = We(), { editing: v, actions: h, readOnly: g } = Q(), { onPrototypeOpened: m, onPrototypeAdded: p } = v, f = A(null), [b, w] = z(), S = ao().prototypeThumbnail, y = { height: i }, k = "event-modeling-grid-slice-cell event-modeling-grid-slice-cell--centered event-modeling-grid-slice-cell--ui";
+  const { readOnly: c, sliceId: u } = We(), { editing: v, actions: h, readOnly: g } = Q(), { onPrototypeOpened: m, onPrototypeAdded: p } = v, f = A(null), [b, w] = z(), S = ao().prototypeThumbnail, y = { height: i }, E = "event-modeling-grid-slice-cell event-modeling-grid-slice-cell--centered event-modeling-grid-slice-cell--ui";
   if (r) return /* @__PURE__ */ a("div", {
     style: y,
-    className: k
+    className: E
   });
   const T = e.length > 0 || l, N = !c && u && m && u && m ? () => m(u, s, f.current?.getBoundingClientRect() ?? new DOMRect()) : g ? () => w(f.current?.getBoundingClientRect() ?? new DOMRect()) : void 0, C = /* @__PURE__ */ a(oo, {
     elements: [...e],
@@ -8059,7 +8061,7 @@ var Mm = ({ slice: e, contentRows: t, rowHeights: n }) => /* @__PURE__ */ a(te,
   });
   return /* @__PURE__ */ x("div", {
     style: y,
-    className: k,
+    className: E,
     children: [
       o.bottomOutgoing && T && /* @__PURE__ */ a(vt, {}),
       o.bottomIncoming && T && /* @__PURE__ */ a(pt, {}),
@@ -8391,18 +8393,18 @@ var zi = ({ onClick: e, eventName: t, pending: n = !1, label: r }) => {
       })
     ]
   });
-}, Eu = (e, t, n) => {
+}, ku = (e, t, n) => {
   if (e.sliceType !== B.stateView) return /* @__PURE__ */ new Set();
   const r = new Set(t.map((i) => i.id.toString())), o = new Set(n.map((i) => i.id.toString()));
   return new Set(e.events.filter((i) => !!i.sourceEventId && o.has(i.sourceEventId) && !r.has(i.sourceEventId)).map((i) => i.id.toString()));
-}, ku = (e, t) => {
+}, Eu = (e, t) => {
   const n = new Set(e.events.flatMap((o) => o.sourceEventId ? [o.sourceEventId] : [])), r = new Set(e.events.map((o) => o.name));
   return t.filter((o) => !n.has(o.id.toString()) && !r.has(o.name));
 }, Nu = ({ slice: e, collapsed: t = !1, conn: n, rowHeight: r, priorEvents: o, followingEvents: i = [], showDetails: s = !1 }) => {
-  const { editing: l, actions: d, messages: c } = Q(), u = be(), { onEventAdded: v, onEventReferenced: h } = l, g = Bn(e.sliceType), m = au(e.sliceType, e.events.length), p = !(Ye(e) && e.events.some((y) => !y.sourceEventId)), f = ku(e, o), b = Eu(e, o, i), w = (d.eventsRow ?? []).filter((y) => !y.when || y.when(e)), S = (y) => h && /* @__PURE__ */ a(Mi, {
+  const { editing: l, actions: d, messages: c } = Q(), u = be(), { onEventAdded: v, onEventReferenced: h } = l, g = Bn(e.sliceType), m = au(e.sliceType, e.events.length), p = !(Ye(e) && e.events.some((y) => !y.sourceEventId)), f = Eu(e, o), b = ku(e, o, i), w = (d.eventsRow ?? []).filter((y) => !y.when || y.when(e)), S = (y) => h && /* @__PURE__ */ a(Mi, {
     options: f,
-    nameOf: (k) => k.name,
-    onSelect: (k) => h(e.id, k),
+    nameOf: (E) => E.name,
+    onSelect: (E) => h(e.id, E),
     label: c.events.addExistingEvent,
     searchPlaceholder: c.events.searchEvents,
     emptyLabel: c.events.noEventsAvailable,
@@ -8445,10 +8447,10 @@ var zi = ({ onClick: e, eventName: t, pending: n = !1, label: r }) => {
       ruleBreak: fu(e, y)
     }, y.id.toString()))
   });
-}, Er = ({ sliceId: e, kind: t, artifactId: n, name: r, schema: o, showDetails: i = !1, onRenamed: s }) => {
+}, kr = ({ sliceId: e, kind: t, artifactId: n, name: r, schema: o, showDetails: i = !1, onRenamed: s }) => {
   const { actions: l, selection: d, messages: c } = Q(), u = be(), [v, h] = z(r), [g, m] = z(void 0);
   re(() => h(r), [r]);
-  const p = t === se.command, f = p ? l.commandCard : l.readModelCardFor?.(n) ?? l.readModelCard, b = p ? rt : Oe, w = p ? c.interaction.command : c.interaction.readModel, S = !u && !!s, y = d.onArtifactSelected, k = () => {
+  const p = t === se.command, f = p ? l.commandCard : l.readModelCardFor?.(n) ?? l.readModelCard, b = p ? rt : Oe, w = p ? c.interaction.command : c.interaction.readModel, S = !u && !!s, y = d.onArtifactSelected, E = () => {
     const T = g?.trim() ?? "";
     m(void 0), !(!T || !s) && (s(T), h(T));
   };
@@ -8457,7 +8459,7 @@ var zi = ({ onClick: e, eventName: t, pending: n = !1, label: r }) => {
     backgroundColor: b.background,
     textColor: b.text,
     onChange: m,
-    onCommit: k,
+    onCommit: E,
     onCancel: () => m(void 0)
   }) : /* @__PURE__ */ a(he, {
     content: /* @__PURE__ */ a(it, {
@@ -8572,10 +8574,10 @@ var zi = ({ onClick: e, eventName: t, pending: n = !1, label: r }) => {
     const s = i.id.toString();
     return r.has(s) || o.has(s) ? !1 : (o.add(s), !0);
   });
-}, kr = ({ sliceId: e, kind: t, artifactId: n, name: r, sources: o, onRenamed: i }) => {
+}, Er = ({ sliceId: e, kind: t, artifactId: n, name: r, sources: o, onRenamed: i }) => {
   const { actions: s, selection: l, messages: d } = Q(), c = be(), [u, v] = z(r), [h, g] = z(void 0);
   re(() => v(r), [r]);
-  const m = t === se.projection, p = m ? s.projectionCard : s.captureCard, f = m ? On : Tn, b = m ? d.interaction.projection : d.interaction.capture, w = !c && !!i, S = l.onArtifactSelected, y = o.length > 0 ? o.join(", ") : d.interaction.noSourceEvents, k = () => {
+  const m = t === se.projection, p = m ? s.projectionCard : s.captureCard, f = m ? On : Tn, b = m ? d.interaction.projection : d.interaction.capture, w = !c && !!i, S = l.onArtifactSelected, y = o.length > 0 ? o.join(", ") : d.interaction.noSourceEvents, E = () => {
     const T = h?.trim() ?? "";
     g(void 0), !(!T || !i) && (i(T), v(T));
   };
@@ -8584,7 +8586,7 @@ var zi = ({ onClick: e, eventName: t, pending: n = !1, label: r }) => {
     backgroundColor: f.background,
     textColor: f.text,
     onChange: g,
-    onCommit: k,
+    onCommit: E,
     onCancel: () => g(void 0)
   }) : /* @__PURE__ */ a(he, {
     content: `${c ? "" : `${d.interaction.doubleClickToRenamePrefix} `}${b}: ${u}`,
@@ -8647,7 +8649,7 @@ var zi = ({ onClick: e, eventName: t, pending: n = !1, label: r }) => {
       ];
   }
 }, Pu = ({ slice: e, collapsed: t = !1, conn: n, rowHeight: r, externalEventOptions: o = [], priorEventOptions: i = [], showDetails: s = !1 }) => {
-  const { editing: l, actions: d, selection: c, navigation: u, messages: v } = Q(), h = be(), { onCommandRenamed: g, onReadModelRenamed: m, onReadModelAdded: p, onExternalEventAdded: f, onExternalEventRemoved: b, onProjectionRenamed: w, onCaptureRenamed: S, onProjectionAdded: y, onCaptureAdded: k } = l, T = Au(e, o, i), N = (d.interactionRow ?? []).filter((R) => !R.when || R.when(e)), C = Tu(e), G = c.onArtifactSelected, { command: J, readModel: E } = e, L = J && /* @__PURE__ */ a(Er, {
+  const { editing: l, actions: d, selection: c, navigation: u, messages: v } = Q(), h = be(), { onCommandRenamed: g, onReadModelRenamed: m, onReadModelAdded: p, onExternalEventAdded: f, onExternalEventRemoved: b, onProjectionRenamed: w, onCaptureRenamed: S, onProjectionAdded: y, onCaptureAdded: E } = l, T = Au(e, o, i), N = (d.interactionRow ?? []).filter((R) => !R.when || R.when(e)), C = Tu(e), G = c.onArtifactSelected, { command: J, readModel: k } = e, L = J && /* @__PURE__ */ a(kr, {
     sliceId: e.id,
     kind: se.command,
     artifactId: J.id,
@@ -8655,21 +8657,21 @@ var zi = ({ onClick: e, eventName: t, pending: n = !1, label: r }) => {
     schema: J.schema,
     showDetails: s,
     onRenamed: g && ((R) => g(e.id, J.id, R))
-  }, J.id.toString()), { projection: F, capture: j } = e, P = F && /* @__PURE__ */ a(kr, {
+  }, J.id.toString()), { projection: F, capture: j } = e, P = F && /* @__PURE__ */ a(Er, {
     sliceId: e.id,
     kind: se.projection,
     artifactId: F.id,
     name: F.name,
     sources: F.sources,
     onRenamed: w && ((R) => w(e.id, F.id, R))
-  }, F.id.toString()), H = j && /* @__PURE__ */ a(kr, {
+  }, F.id.toString()), H = j && /* @__PURE__ */ a(Er, {
     sliceId: e.id,
     kind: se.capture,
     artifactId: j.id,
     name: j.name,
     sources: j.sources,
     onRenamed: S && ((R) => S(e.id, j.id, R))
-  }, j.id.toString()), I = P ?? H ?? L, _ = (R) => /* @__PURE__ */ a(Er, {
+  }, j.id.toString()), I = P ?? H ?? L, _ = (R) => /* @__PURE__ */ a(kr, {
     sliceId: e.id,
     kind: se.readModel,
     artifactId: R.id,
@@ -8677,7 +8679,7 @@ var zi = ({ onClick: e, eventName: t, pending: n = !1, label: r }) => {
     schema: R.schema,
     showDetails: s,
     onRenamed: m && ((K) => m(e.id, R.id, K))
-  }, R.id.toString()), D = e.sliceType === B.stateView ? e.additionalReadModels ?? [] : [], M = E && _(E), W = D.length > 0 ? /* @__PURE__ */ x("div", {
+  }, R.id.toString()), D = e.sliceType === B.stateView ? e.additionalReadModels ?? [] : [], M = k && _(k), W = D.length > 0 ? /* @__PURE__ */ x("div", {
     className: "event-modeling-grid-slice-cell-stack",
     children: [M, D.map(_)]
   }) : M, Z = (R) => {
@@ -8710,9 +8712,9 @@ var zi = ({ onClick: e, eventName: t, pending: n = !1, label: r }) => {
   }, V = Ye(e) ? y && {
     label: v.interaction.addProjection,
     add: y
-  } : k && {
+  } : E && {
     label: v.interaction.addCapture,
-    add: k
+    add: E
   }, U = e.sliceType === B.translator && !J && !F && !j && !!V, oe = !h && (N.length > 0 || U) && /* @__PURE__ */ a(at, {
     placement: Ue.add,
     children: U && V ? /* @__PURE__ */ a(Ou, {
@@ -8816,7 +8818,7 @@ export {
   Jt as CogWheel,
   Cn as CollapseButton,
   Wd as CollectionGrid,
-  Ea as CollectionMoveHandle,
+  ka as CollectionMoveHandle,
   Ya as CollectionViewport,
   Gu as ConcurrencyValueSource,
   pt as ConnectorIncomingBottom,
@@ -8858,13 +8860,13 @@ export {
   de as FlowNodeActor,
   Nl as GENERATED_SPECIFICATIONS_ABSORB_WINDOW_MS,
   Vt as GivenContextKind,
-  Ed as GivenSection,
+  kd as GivenSection,
   he as GridTooltip,
   ls as HIT_TEST_ATTRIBUTES,
   ei as HeaderDragGhost,
   _i as HostedEventModelBoard,
   xm as INTERACTIVE_SELECTOR,
-  Er as InteractionCard,
+  kr as InteractionCard,
   nn as InteractionCell,
   Ie as InteractionMiniCard,
   Mt as InvalidEventModelDocument,
@@ -8943,7 +8945,7 @@ export {
   Td as ThenSection,
   $e as TranslationDirection,
   Nc as TranslationDirectionToggle,
-  kr as TranslationMappingCard,
+  Er as TranslationMappingCard,
   Ou as TranslatorAddChoice,
   cu as TriggerControl,
   en as TriggerKind,
@@ -8951,7 +8953,7 @@ export {
   vu as UiCell,
   Fa as ViewportRenderingProvider,
   Bi as VisibilityRuleBreakMark,
-  kd as WhenSection,
+  Ed as WhenSection,
   Al as absorbSpecifications,
   is as actorDrop,
   Za as actorKinds,
@@ -9001,7 +9003,7 @@ export {
   Wc as createOptimisticSlice,
   zc as createSliceAreaState,
   ds as createSliceDragGhost,
-  El as createSpecificationValuesMemory,
+  kl as createSpecificationValuesMemory,
   nc as defaultBoardImageCaptureEnvironment,
   zo as defaultDetailLevel,
   jo as defaultDetailsVisibilityState,
@@ -9054,7 +9056,7 @@ export {
   sa as pointInRect,
   xn as prepareGhost,
   fu as producedEventRuleBreak,
-  Eu as projectedFromTheRightOf,
+  ku as projectedFromTheRightOf,
   On as projectionCardColors,
   jl as propertySchemaChangeHandler,
   Zu as readEventModelDocument,
@@ -9068,7 +9070,7 @@ export {
   ot as reconcileSliceSnapshot,
   Rl as reconcileSpecifications,
   nm as rectAt,
-  ku as referenceableEvents,
+  Eu as referenceableEvents,
   An as renameFeature,
   Uc as reorderPendingSlices,
   rs as reorderedActorIds,
@@ -9090,7 +9092,7 @@ export {
   As as setModuleOrder,
   Rs as setModuleRename,
   Vc as settleAddedSlice,
-  Em as showsAddNewEventButton,
+  km as showsAddNewEventButton,
   au as showsEventReferencePlaceholder,
   su as showsExternalEventPicker,
   ut as sideAnchor,
@@ -9130,12 +9132,12 @@ export {
   _a as useCollectionsArea,
   Zs as useConnectionHighlight,
   fe as useEventModelMessages,
-  Ee as useEventModelPresentation,
+  ke as useEventModelPresentation,
   Uo as useEventModelPresentationChange,
   rl as useFeatureDrag,
   ri as useHeaderDragIntent,
   Sn as useInViewport,
-  ks as useModuleDrag,
+  Es as useModuleDrag,
   Wi as useReferenceHover,
   We as useSlice,
   Us as useSliceConnection,