@metadev/daga-react 4.2.6 → 4.2.7

package/index.mjs

@@ -1,8 +1,8 @@
 import { jsx as v, jsxs as $, Fragment as ni } from "react/jsx-runtime";
-import * as E from "d3";
+import * as L from "d3";
 import { debounceTime as ri, Subject as Yt, merge as ai, map as li } from "rxjs";
-import { createContext as Ve, useState as H, useContext as Ht, useRef as rt, useEffect as Ct, useMemo as ci } from "react";
-var u = /* @__PURE__ */ ((o) => (o.Bottom = "bottom", o.Left = "left", o.Right = "right", o.Top = "top", o))(u || {}), jt = /* @__PURE__ */ ((o) => (o.BottomLeft = "bottom-left", o.BottomRight = "bottom-right", o.TopLeft = "top-left", o.TopRight = "top-right", o))(jt || {}), Tt = /* @__PURE__ */ ((o) => (o.Left = "left", o.Center = "center", o.Right = "right", o))(Tt || {}), Zt = /* @__PURE__ */ ((o) => (o.Top = "top", o.Center = "center", o.Bottom = "bottom", o))(Zt || {});
+import { createContext as Ve, useState as B, useContext as Ht, useRef as rt, useEffect as Ct, useMemo as ci } from "react";
+var u = /* @__PURE__ */ ((o) => (o.Bottom = "bottom", o.Left = "left", o.Right = "right", o.Top = "top", o))(u || {}), jt = /* @__PURE__ */ ((o) => (o.BottomLeft = "bottom-left", o.BottomRight = "bottom-right", o.TopLeft = "top-left", o.TopRight = "top-right", o))(jt || {}), Et = /* @__PURE__ */ ((o) => (o.Left = "left", o.Center = "center", o.Right = "right", o))(Et || {}), Zt = /* @__PURE__ */ ((o) => (o.Top = "top", o.Center = "center", o.Bottom = "bottom", o))(Zt || {});
 const xt = (o) => [Math.round(o[0]), Math.round(o[1])], ft = (o, t, e) => t < e ? t <= o && o <= e : e <= o && o <= t, Ie = (o, t, e) => (o - t[0]) / (t[1] - t[0]) * (e[1] - e[0]) + e[0], Kt = (o, t, e, n, l, a, i) => {
   const s = (() => {
     switch (a) {
@@ -241,7 +241,7 @@ const hi = 20, gi = (o, t, e, n, l) => {
     default:
       return "none";
   }
-}, U = (o, t) => {
+}, Y = (o, t) => {
   const e = o.indexOf(t);
   return e >= 0 && o.splice(e, 1), o;
 };
@@ -274,7 +274,7 @@ const me = (o, t, e, n, l) => {
       return Ae(t, e, n, l);
   }
 }, De = (o, t, e, n) => `M ${o + e / 2} ${t} A ${e / 2} ${n / 2} 0 0 0 ${o + e / 2} ${t + n} A ${e / 2} ${n / 2} 0 1 0 ${o + e / 2} ${t} Z`, ui = () => "Z", fi = (o, t, e, n) => `M ${o} ${t} L ${o + e / 3} ${t} L ${o + e / 2} ${t + n / 6} L ${o + e} ${t + n / 6} L ${o + e} ${t + n} L ${o} ${t + n} Z`, mi = (o, t, e, n) => `M ${o + e / 4} ${t} L ${o + 3 * e / 4} ${t} L ${o + e} ${t + n / 2} L ${o + 3 * e / 4} ${t + n} L ${o + e / 4} ${t + n} L ${o} ${t + n / 2} Z`, pi = (o, t, e, n) => `M ${o + e / 4} ${t} L ${o + 3 * e / 4} ${t} L ${o + e} ${t + n / 4} L ${o + e} ${t + 3 * n / 4} L ${o + 3 * e / 4} ${t + n} L ${o + e / 4} ${t + n} L ${o} ${t + 3 * n / 4} L ${o} ${t + n / 4} L ${o + e / 4} ${t} Z`, Wt = (o, t, e, n) => n < e ? `M ${o + n / 2} ${t} L ${o + e - n / 2} ${t} A ${n / 2} ${n / 2} 0 0 1 ${o + e} ${t + n / 2} A ${n / 2} ${n / 2} 0 0 1 ${o + e - n / 2} ${t + n} L ${o + n / 2} ${t + n} A ${n / 2} ${n / 2} 0 0 1 ${o} ${t + n / 2} A ${n / 2} ${n / 2} 0 0 1 ${o + n / 2} ${t} Z` : n > e ? `M ${o} ${t + e / 2} L ${o} ${t + n - e / 2} A ${e / 2} ${e / 2} 0 0 0 ${o + e / 2} ${t + n} A ${e / 2} ${e / 2} 0 0 0 ${o + e} ${t + n - e / 2} L ${o + e} ${t + e / 2} A ${e / 2} ${e / 2} 0 0 0 ${o + e / 2} ${t} A ${e / 2} ${e / 2} 0 0 0 ${o} ${t + e / 2} Z` : De(o, t, e, n), Ae = (o, t, e, n) => `M ${o} ${t} L ${o + e} ${t} L ${o + e} ${t + n} L ${o} ${t + n} Z`, vi = (o, t, e, n) => `M ${o + e / 2} ${t} L ${o + e} ${t + n / 2} L ${o + e / 2} ${t + n} L ${o} ${t + n / 2} Z`, yi = (o, t, e, n) => `M ${o + e / 4} ${t} L ${o + 3 * e / 4} ${t} A ${e / 4} ${n / 4} 0 0 1 ${o + e} ${t + n / 4} L ${o + e} ${t + 3 * n / 4} A ${e / 4} ${n / 4} 0 0 1 ${o + 3 * e / 4} ${t + n} L ${o + e / 4} ${t + n} A ${e / 4} ${n / 4} 0 0 1 ${o} ${t + 3 * n / 4} L ${o} ${t + n / 4} A ${e / 4} ${n / 4} 0 0 1 ${o + e / 4} ${t} Z`, bi = (o, t, e, n) => `M ${o} ${t} L ${o + 3 * e / 4} ${t} L ${o + 3 * e / 4} ${t + n / 4} L ${o + 3 * e / 4} ${t} L ${o + e} ${t + n / 4} L ${o + 3 * e / 4} ${t + n / 4} L ${o + e} ${t + n / 4} L ${o + e} ${t + n} L ${o} ${t + n} Z`;
-var T = /* @__PURE__ */ ((o) => (o.AllScroll = "all-scroll", o.Auto = "auto", o.Crosshair = "crosshair", o.EWResize = "ew-resize", o.Grab = "grab", o.Grabbing = "grabbing", o.Move = "move", o.NoDrop = "no-drop", o.NSResize = "ns-resize", o.NotAllowed = "not-allowed", o.ZoomIn = "zoom-in", o.ZoomOut = "zoom-out", o))(T || {});
+var E = /* @__PURE__ */ ((o) => (o.AllScroll = "all-scroll", o.Auto = "auto", o.Crosshair = "crosshair", o.EWResize = "ew-resize", o.Grab = "grab", o.Grabbing = "grabbing", o.Move = "move", o.NoDrop = "no-drop", o.NSResize = "ns-resize", o.NotAllowed = "not-allowed", o.ZoomIn = "zoom-in", o.ZoomOut = "zoom-out", o))(E || {});
 const ki = (o) => Math.max(...o.split(`
 `).map((t) => t.length)), wi = (o) => o.match(/\n/g)?.length || 0, W = [];
 for (let o = 0; o < 256; ++o)
@@ -293,7 +293,7 @@ function Ii() {
   return ne(Ci);
 }
 const Ai = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), xe = { randomUUID: Ai };
-function Ee(o, t, e) {
+function Le(o, t, e) {
   if (xe.randomUUID && !o)
     return xe.randomUUID();
   o = o || {};
@@ -302,7 +302,7 @@ function Ee(o, t, e) {
     throw new Error("Random bytes length must be >= 16");
   return n[6] = n[6] & 15 | 64, n[8] = n[8] & 63 | 128, Si(n);
 }
-const it = (o) => {
+const ot = (o) => {
   const { selected: t, highlighted: e, ...n } = o, l = n, a = {
     ...l,
     ...t
@@ -414,7 +414,7 @@ class Jt {
    */
   remove(t) {
     const e = this.get(t);
-    e !== void 0 && (delete this.entityMap[t], U(this.entities, e));
+    e !== void 0 && (delete this.entityMap[t], Y(this.entities, e));
   }
   /**
    * Gets the number of entities in this set.
@@ -489,7 +489,7 @@ class ut extends Jt {
   }
   remove(t) {
     const e = this.get(t, !0);
-    e !== void 0 && (delete this.entityMap[t], U(this.entities, e));
+    e !== void 0 && (delete this.entityMap[t], Y(this.entities, e));
   }
   size(t = !1) {
     return t ? super.size() : super.filter((e) => !e.removed).length;
@@ -528,7 +528,7 @@ class Qt {
 function kt(o, t) {
   return !t || o[0] > t[0] ? !0 : o[0] === t[0] ? o[1] >= t[1] : !1;
 }
-const Te = (o) => o == null || o === "" || o instanceof Array && o.length === 0 || o instanceof Object && Object.keys(o).length === 0, St = (o, t) => o === t || JSON.stringify(o) === JSON.stringify(t), Fe = (o, t, e) => {
+const Ee = (o) => o == null || o === "" || o instanceof Array && o.length === 0 || o instanceof Object && Object.keys(o).length === 0, St = (o, t) => o === t || JSON.stringify(o) === JSON.stringify(t), Fe = (o, t, e) => {
   const n = {}, l = {};
   for (const a in e.propertySet.propertyMap)
     if (e.propertySet.propertyMap[a].type === N.Object) {
@@ -541,7 +541,7 @@ const Te = (o) => o == null || o === "" || o instanceof Array && o.length === 0
     } else
       St(o[a], t[a]) || (n[a] = o[a], l[a] = t[a]);
   return [n, l];
-}, Ei = (o) => o != null && o.constructor === Object;
+}, Li = (o) => o != null && o.constructor === Object;
 class yt {
   constructor(t, e) {
     this.displayedProperties = [], this.hiddenProperties = [], this.values = {}, this.valueSets = {}, this.ownTimestamps = {}, this.propertySet = t, this.rootElement = e, this.resetValues();
@@ -653,7 +653,7 @@ class yt {
    */
   hasValue(t) {
     const e = this.getValue(t);
-    return !Te(e);
+    return !Ee(e);
   }
   /**
    * Checks if the value under the key is not empty or the default value.
@@ -663,7 +663,7 @@ class yt {
    */
   hasSetValue(t) {
     const e = this.getValue(t), n = this.propertySet.getProperty(t);
-    return n && n.type === N.Object ? this.getSubValueSet(t).hasAnySetValue() : !Te(e) && !St(e, n?.defaultValue);
+    return n && n.type === N.Object ? this.getSubValueSet(t).hasAnySetValue() : !Ee(e) && !St(e, n?.defaultValue);
   }
   /**
    * Checks if any of the values in the set are not empty or the default value.
@@ -779,7 +779,7 @@ class yt {
    * @param property A property.
    */
   displayProperty(t) {
-    this.displayedProperties.includes(t) || (this.displayedProperties.push(t), U(this.hiddenProperties, t));
+    this.displayedProperties.includes(t) || (this.displayedProperties.push(t), Y(this.hiddenProperties, t));
   }
   /**
    * Moves the given property to the list of hidden properties.
@@ -787,10 +787,10 @@ class yt {
    * @param property A property.
    */
   hideProperty(t) {
-    this.hiddenProperties.includes(t) || (this.hiddenProperties.push(t), U(this.displayedProperties, t));
+    this.hiddenProperties.includes(t) || (this.hiddenProperties.push(t), Y(this.displayedProperties, t));
   }
 }
-const Q = {
+const tt = {
   name: "",
   label: null,
   look: {
@@ -815,20 +815,20 @@ const Q = {
 class He {
   constructor(t) {
     const e = {
-      ...Q,
+      ...tt,
       ...t
     };
     this.id = e.id, this.name = e.name, this.label = e.label;
-    const n = it(e.look);
+    const n = ot(e.look);
     if (this.defaultLook = n.defaultLook, this.selectedLook = n.selectedLook, this.highlightedLook = n.highlightedLook, this.selectedAndHighlightedLook = n.selectedAndHighlightedLook, e.startMarkerLook !== void 0) {
-      const l = it(
+      const l = ot(
         e.startMarkerLook
       );
       this.defaultStartMarkerLook = l.defaultLook, this.selectedStartMarkerLook = l.selectedLook, this.highlightedStartMarkerLook = l.highlightedLook, this.selectedAndHighlightedStartMarkerLook = l.selectedAndHighlightedLook;
     } else
       this.defaultStartMarkerLook = null, this.selectedStartMarkerLook = null, this.highlightedStartMarkerLook = null, this.selectedAndHighlightedStartMarkerLook = null;
     if (e.endMarkerLook !== void 0) {
-      const l = it(
+      const l = ot(
         e.endMarkerLook
       );
       this.defaultEndMarkerLook = l.defaultLook, this.selectedEndMarkerLook = l.selectedLook, this.highlightedEndMarkerLook = l.highlightedLook, this.selectedAndHighlightedEndMarkerLook = l.selectedAndHighlightedLook;
@@ -890,7 +890,7 @@ class ct extends At {
    */
   set look(t) {
     if (t) {
-      const e = it(t);
+      const e = ot(t);
       this._defaultLook = {
         ...this._defaultLook,
         ...e.defaultLook
@@ -921,7 +921,7 @@ class ct extends At {
    */
   set startMarkerLook(t) {
     if (t) {
-      const e = it(t);
+      const e = ot(t);
       this._defaultStartMarkerLook = {
         ...this._defaultStartMarkerLook,
         ...e.defaultLook
@@ -952,7 +952,7 @@ class ct extends At {
    */
   set endMarkerLook(t) {
     if (t) {
-      const e = it(t);
+      const e = ot(t);
       this._defaultEndMarkerLook = {
         ...this._defaultEndMarkerLook,
         ...e.defaultLook
@@ -985,7 +985,7 @@ class ct extends At {
    * @param start A port.
    */
   setStart(t) {
-    this.start !== t ? (this.start !== void 0 && U(this.start.outgoingConnections, this), this.start = t, t !== void 0 && (t.outgoingConnections.push(this), this.startDirection = t?.direction, this.startCoords = t?.connectionPoint || [0, 0])) : (this.startDirection = t?.direction, this.startCoords = t?.connectionPoint || [0, 0]), this.updateInView();
+    this.start !== t ? (this.start !== void 0 && Y(this.start.outgoingConnections, this), this.start = t, t !== void 0 && (t.outgoingConnections.push(this), this.startDirection = t?.direction, this.startCoords = t?.connectionPoint || [0, 0])) : (this.startDirection = t?.direction, this.startCoords = t?.connectionPoint || [0, 0]), this.updateInView();
   }
   /**
    * Set the end of this connection to the given port or reset this connection's ending port if `undefined`.
@@ -994,7 +994,7 @@ class ct extends At {
    * @param end A port.
    */
   setEnd(t) {
-    this.end !== t ? (this.end !== void 0 && U(this.end.incomingConnections, this), this.end = t, t !== void 0 && (t.incomingConnections.push(this), this.endDirection = t?.direction, this.endCoords = t?.connectionPoint || [0, 0])) : (this.endDirection = t?.direction, this.endCoords = t?.connectionPoint || [0, 0]), this.updateInView();
+    this.end !== t ? (this.end !== void 0 && Y(this.end.incomingConnections, this), this.end = t, t !== void 0 && (t.incomingConnections.push(this), this.endDirection = t?.direction, this.endCoords = t?.connectionPoint || [0, 0])) : (this.endDirection = t?.direction, this.endCoords = t?.connectionPoint || [0, 0]), this.updateInView();
   }
   /**
    * Reassign the start and end ports of this connection to ports with less distance between them that have the same root element.
@@ -1052,7 +1052,7 @@ class ct extends At {
     return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : Mt;
   }
 }
-class Ti extends ut {
+class Ei extends ut {
   /**
    * Instance a set of connections for the given model. This method is used internally.
    * @private
@@ -1092,7 +1092,7 @@ class Ti extends ut {
   }
   remove(t) {
     const e = this.get(t, !0);
-    e && (U(e.start?.outgoingConnections || [], e), U(e.end?.incomingConnections || [], e), super.remove(t), e.updateInView());
+    e && (Y(e.start?.outgoingConnections || [], e), Y(e.end?.incomingConnections || [], e), super.remove(t), e.updateInView());
   }
 }
 const V = {
@@ -1104,7 +1104,7 @@ const V = {
   color: "#000000",
   selectedColor: "#000000",
   backgroundColor: "#00000000",
-  horizontalAlign: Tt.Center,
+  horizontalAlign: Et.Center,
   verticalAlign: Zt.Center,
   orientation: u.Top,
   fit: !1,
@@ -1112,10 +1112,10 @@ const V = {
 };
 class ht extends At {
   constructor(t, e, n, l, a, i, s, r, c, d, h, g, y, m, p, f) {
-    const b = `${e?.id}_field`;
-    if (t.fields.get(b) !== void 0)
+    const k = `${e?.id}_field`;
+    if (t.fields.get(k) !== void 0)
       throw new Error("DiagramField for rootElement already exists");
-    if (super(t, b), this.textTimestamp = null, this.rootElement = e, this.coords = n, this.width = l, this.height = a, this.fontSize = i, this.fontFamily = s, this.color = r, this.selectedColor = c, this.horizontalAlign = d, this.verticalAlign = h, !isNaN(Number(g)))
+    if (super(t, k), this.textTimestamp = null, this.rootElement = e, this.coords = n, this.width = l, this.height = a, this.fontSize = i, this.fontFamily = s, this.color = r, this.selectedColor = c, this.horizontalAlign = d, this.verticalAlign = h, !isNaN(Number(g)))
       this.orientation = Number(g);
     else
       switch (g) {
@@ -1167,7 +1167,7 @@ class ht extends At {
     return this.rootElement?.getPriority() || Mt;
   }
 }
-class Li extends ut {
+class Ti extends ut {
   /**
    * Instance a set of fields for the given model. This method is used internally.
    * @private
@@ -1205,7 +1205,7 @@ class Li extends ut {
     e && (e.rootElement?.label !== void 0 && e.rootElement.label === e && (e.rootElement.label = void 0), super.remove(t), e.updateInView());
   }
 }
-const tt = (o) => o?.margin === null || o?.margin === void 0 ? V.margin : typeof o.margin == "number" ? o.margin : o.margin.length === 0 ? V.margin : o.margin.length === 1 || o.margin.length === 2 ? o.margin[0] : (o.margin.length === 3, o.margin[2]), j = (o) => o?.margin === null || o?.margin === void 0 ? V.margin : typeof o.margin == "number" ? o.margin : o.margin.length === 0 ? V.margin : o.margin.length === 1 ? o.margin[0] : o.margin.length === 2 || o.margin.length === 3 ? o.margin[1] : o.margin[3], nt = (o) => o?.margin === null || o?.margin === void 0 ? V.margin : typeof o.margin == "number" ? o.margin : o.margin.length === 0 ? V.margin : o.margin.length === 1 ? o.margin[0] : (o.margin.length === 2 || o.margin.length === 3, o.margin[1]), G = (o) => o?.margin === null || o?.margin === void 0 ? V.margin : typeof o.margin == "number" ? o.margin : o.margin.length === 0 ? V.margin : (o.margin.length === 1 || o.margin.length === 2 || o.margin.length === 3, o.margin[0]), Rt = (o) => o?.padding === null || o?.padding === void 0 ? V.padding : typeof o.padding == "number" ? o.padding : o.padding.length === 0 ? V.padding : o.padding.length === 1 || o.padding.length === 2 ? o.padding[0] : (o.padding.length === 3, o.padding[2]), Vt = (o) => o?.padding === null || o?.padding === void 0 ? V.padding : typeof o.padding == "number" ? o.padding : o.padding.length === 0 ? V.padding : o.padding.length === 1 ? o.padding[0] : o.padding.length === 2 || o.padding.length === 3 ? o.padding[1] : o.padding[3], Ot = (o) => o?.padding === null || o?.padding === void 0 ? V.padding : typeof o.padding == "number" ? o.padding : o.padding.length === 0 ? V.padding : o.padding.length === 1 ? o.padding[0] : (o.padding.length === 2 || o.padding.length === 3, o.padding[1]), _t = (o) => o?.padding === null || o?.padding === void 0 ? V.padding : typeof o.padding == "number" ? o.padding : o.padding.length === 0 ? V.padding : (o.padding.length === 1 || o.padding.length === 2 || o.padding.length === 3, o.padding[0]), Le = 1, $e = 1, $i = 1, Ni = 1;
+const K = (o) => o?.margin === null || o?.margin === void 0 ? V.margin : typeof o.margin == "number" ? o.margin : o.margin.length === 0 ? V.margin : o.margin.length === 1 || o.margin.length === 2 ? o.margin[0] : (o.margin.length === 3, o.margin[2]), U = (o) => o?.margin === null || o?.margin === void 0 ? V.margin : typeof o.margin == "number" ? o.margin : o.margin.length === 0 ? V.margin : o.margin.length === 1 ? o.margin[0] : o.margin.length === 2 || o.margin.length === 3 ? o.margin[1] : o.margin[3], et = (o) => o?.margin === null || o?.margin === void 0 ? V.margin : typeof o.margin == "number" ? o.margin : o.margin.length === 0 ? V.margin : o.margin.length === 1 ? o.margin[0] : (o.margin.length === 2 || o.margin.length === 3, o.margin[1]), H = (o) => o?.margin === null || o?.margin === void 0 ? V.margin : typeof o.margin == "number" ? o.margin : o.margin.length === 0 ? V.margin : (o.margin.length === 1 || o.margin.length === 2 || o.margin.length === 3, o.margin[0]), Rt = (o) => o?.padding === null || o?.padding === void 0 ? V.padding : typeof o.padding == "number" ? o.padding : o.padding.length === 0 ? V.padding : o.padding.length === 1 || o.padding.length === 2 ? o.padding[0] : (o.padding.length === 3, o.padding[2]), Vt = (o) => o?.padding === null || o?.padding === void 0 ? V.padding : typeof o.padding == "number" ? o.padding : o.padding.length === 0 ? V.padding : o.padding.length === 1 ? o.padding[0] : o.padding.length === 2 || o.padding.length === 3 ? o.padding[1] : o.padding[3], Ot = (o) => o?.padding === null || o?.padding === void 0 ? V.padding : typeof o.padding == "number" ? o.padding : o.padding.length === 0 ? V.padding : o.padding.length === 1 ? o.padding[0] : (o.padding.length === 2 || o.padding.length === 3, o.padding[1]), _t = (o) => o?.padding === null || o?.padding === void 0 ? V.padding : typeof o.padding == "number" ? o.padding : o.padding.length === 0 ? V.padding : (o.padding.length === 1 || o.padding.length === 2 || o.padding.length === 3, o.padding[0]), Te = 1, $e = 1, $i = 1, Ni = 1;
 class Mi {
   constructor(t) {
     this.margin = t.margin || 0, this.defaultWidths = t.defaultWidths || null, this.defaultHeights = t.defaultHeights || null, this.minWidths = t.minWidths || null, this.minHeights = t.minHeights || null, this.sections = [];
@@ -1220,11 +1220,11 @@ class Mi {
 class Pi {
   constructor(t) {
     this.label = t.label || null, this.ports = t.ports || [], this.priority = t.priority || Mt, this.resizableX = t.resizableX, this.resizableY = t.resizableY;
-    const e = it(t.look || Be);
+    const e = ot(t.look || Be);
     this.defaultLook = e.defaultLook, this.selectedLook = e.selectedLook, this.highlightedLook = e.highlightedLook, this.selectedAndHighlightedLook = e.selectedAndHighlightedLook;
   }
 }
-class B extends At {
+class G extends At {
   constructor(t, e, n, l, a, i, s, r) {
     if (t.sections.get(r) !== void 0)
       throw new Error(`DiagramSection with id "${r}" already exists`);
@@ -1256,7 +1256,7 @@ class B extends At {
    */
   set look(t) {
     if (t) {
-      const e = it(t);
+      const e = ot(t);
       this._defaultLook = {
         ...this._defaultLook,
         ...e.defaultLook
@@ -1448,9 +1448,9 @@ class B extends At {
       );
     const i = this.type;
     this.label && (this.label.coords = [
-      this.coords[0] + j(i?.label),
-      this.coords[1] + G(i?.label)
-    ], this.label.width = this.width - j(i?.label) - nt(i?.label), this.label.height = this.height - G(i?.label) - tt(i?.label), this.label.updateInView());
+      this.coords[0] + U(i?.label),
+      this.coords[1] + H(i?.label)
+    ], this.label.width = this.width - U(i?.label) - et(i?.label), this.label.height = this.height - H(i?.label) - K(i?.label), this.label.updateInView());
     for (const s of this.decorators)
       s.move(
         Kt(
@@ -1479,7 +1479,7 @@ class zi extends ut {
    * @private
    */
   new(t, e, n, l, a, i, s) {
-    const r = new B(
+    const r = new G(
       this.model,
       t,
       e,
@@ -1514,28 +1514,28 @@ class zi extends ut {
             ...V,
             ...y.type?.label
           }, p = 6 * m.fontSize + Vt(m) + Ot(m), f = m.fontSize + _t(m) + Rt(m);
-          let b;
+          let k;
           switch (y.direction) {
             case u.Bottom:
             case u.Left:
             case u.Right:
-              b = [
+              k = [
                 y.coords[0] - p / 2,
-                y.coords[1] - f - tt(m)
+                y.coords[1] - f - K(m)
               ];
               break;
             case u.Top:
-              b = [
+              k = [
                 y.coords[0] - p / 2,
-                y.coords[1] + G(m)
+                y.coords[1] + H(m)
               ];
               break;
             default:
-              b = y.coords;
+              k = y.coords;
           }
           this.model.fields.new(
             y,
-            b,
+            k,
             m.fontSize,
             m.fontFamily,
             m.color,
@@ -1561,15 +1561,15 @@ class zi extends ut {
       this.model.fields.new(
         r,
         [
-          r.coords[0] + j(h),
-          r.coords[1] + G(h)
+          r.coords[0] + U(h),
+          r.coords[1] + H(h)
         ],
         h.fontSize,
         h.fontFamily,
         h.color,
         h.selectedColor,
-        r.width - j(h) - nt(h),
-        r.height - G(h) - tt(h),
+        r.width - U(h) - et(h),
+        r.height - H(h) - K(h),
         h.horizontalAlign,
         h.verticalAlign,
         h.orientation,
@@ -1586,7 +1586,7 @@ class zi extends ut {
     if (e) {
       for (; e.ports.length > 0; )
         this.model.ports.remove(e.ports[0].id);
-      e.label && this.model.fields.remove(e.label.id), e.node && U(e.node.sections, e), super.remove(t), e.updateInView();
+      e.label && this.model.fields.remove(e.label.id), e.node && Y(e.node.sections, e), super.remove(t), e.updateInView();
     }
   }
 }
@@ -1630,7 +1630,7 @@ class Ge {
       ...t
     };
     this.id = e.id, this.name = e.name, this.defaultWidth = e.defaultWidth, this.defaultHeight = e.defaultHeight, this.minWidth = e.minWidth, this.minHeight = e.minHeight, this.resizableX = e.resizableX, this.resizableY = e.resizableY, this.bottomPadding = Vi(e), this.leftPadding = Oi(e), this.rightPadding = _i(e), this.topPadding = Di(e), this.label = e.label, this.ports = e.ports, this.decorators = e.decorators, this.sectionGrid = e.sectionGrid ? new Mi(e.sectionGrid) : null;
-    const n = it(e.look);
+    const n = ot(e.look);
     this.defaultLook = n.defaultLook, this.selectedLook = n.selectedLook, this.highlightedLook = n.highlightedLook, this.selectedAndHighlightedLook = n.selectedAndHighlightedLook, this.isUnique = e.isUnique, this.canBeParentless = e.canBeParentless, this.childrenTypes = e.childrenTypes, this.priority = e.priority, this.propertySet = new Qt(t?.properties || []);
   }
 }
@@ -1681,7 +1681,7 @@ class z extends At {
    */
   set look(t) {
     if (t) {
-      const e = it(t);
+      const e = ot(t);
       this._defaultLook = {
         ...this._defaultLook,
         ...e.defaultLook
@@ -1852,7 +1852,7 @@ class z extends At {
     n || this.children.indexOf(t) >= 0 || (this.fitToChild(t), this.children.push(t), t.parent = this, t.raise());
   }
   removeChild(t) {
-    U(this.children, t), t.parent = void 0;
+    Y(this.children, t), t.parent = void 0;
   }
   fitToChild(t) {
     const e = Math.max(
@@ -2054,9 +2054,9 @@ class z extends At {
         )
       );
     this.label && (this.label.coords = [
-      this.coords[0] + j(this.type.label),
-      this.coords[1] + G(this.type.label)
-    ], this.label.width = this.width - j(this.type.label) - nt(this.type.label), this.label.height = this.height - G(this.type.label) - tt(this.type.label), this.label.updateInView());
+      this.coords[0] + U(this.type.label),
+      this.coords[1] + H(this.type.label)
+    ], this.label.width = this.width - U(this.type.label) - et(this.type.label), this.label.height = this.height - H(this.type.label) - K(this.type.label), this.label.updateInView());
     for (const i of this.decorators)
       i.move(
         Kt(
@@ -2211,10 +2211,10 @@ class Ri extends ut {
             c,
             s,
             [r, i],
-            l.sectionGrid.defaultWidths?.[c] || Le,
+            l.sectionGrid.defaultWidths?.[c] || Te,
             l.sectionGrid.defaultHeights?.[s] || $e,
             `${a.id}_${s}_${c}`
-          ), r += (l.sectionGrid.defaultWidths?.[c] || Le) + (l.sectionGrid.margin || 0);
+          ), r += (l.sectionGrid.defaultWidths?.[c] || Te) + (l.sectionGrid.margin || 0);
         i += (l.sectionGrid.defaultHeights?.[s] || $e) + (l.sectionGrid.margin || 0);
       }
     }
@@ -2248,13 +2248,13 @@ class Ri extends ut {
             case u.Right:
               y = [
                 c.coords[0] - h / 2,
-                c.coords[1] - g - tt(d)
+                c.coords[1] - g - K(d)
               ];
               break;
             case u.Top:
               y = [
                 c.coords[0] - h / 2,
-                c.coords[1] + G(d)
+                c.coords[1] + H(d)
               ];
               break;
             default:
@@ -2287,15 +2287,15 @@ class Ri extends ut {
       this.model.fields.new(
         a,
         [
-          a.coords[0] + j(i),
-          a.coords[1] + G(i)
+          a.coords[0] + U(i),
+          a.coords[1] + H(i)
         ],
         i.fontSize,
         i.fontFamily,
         i.color,
         i.selectedColor,
-        a.width - j(i) - nt(i),
-        a.height - G(i) - tt(i),
+        a.width - U(i) - et(i),
+        a.height - H(i) - K(i),
         i.horizontalAlign,
         i.verticalAlign,
         i.orientation,
@@ -2328,7 +2328,7 @@ class Ri extends ut {
   remove(t) {
     const e = this.get(t, !0);
     if (e) {
-      for (e.parent && U(e.parent.children, e); e.children.length > 0; )
+      for (e.parent && Y(e.parent.children, e); e.children.length > 0; )
         this.model.nodes.remove(e.children[0].id);
       for (; e.sections.length > 0; )
         this.model.sections.remove(e.sections[0].id);
@@ -2370,7 +2370,7 @@ const Ue = (o) => {
   highlighted: {
     fillColor: "rgba(0, 255, 255, 0.5)"
   }
-}, Xt = it(Ye), Xe = {
+}, Xt = ot(Ye), Xe = {
   name: "",
   label: null,
   allowsOutgoing: !0,
@@ -2385,7 +2385,7 @@ class Fi {
       ...t
     };
     this.id = e.id, this.name = e.name, this.label = e.label, this.allowsOutgoing = e.allowsOutgoing, this.allowsIncoming = e.allowsIncoming, this.width = e.width;
-    const n = it(e.look);
+    const n = ot(e.look);
     this.defaultLook = n.defaultLook, this.selectedLook = n.selectedLook, this.highlightedLook = n.highlightedLook, this.selectedAndHighlightedLook = n.selectedAndHighlightedLook;
   }
 }
@@ -2451,7 +2451,7 @@ class bt extends At {
    */
   set look(t) {
     if (t) {
-      const e = it(
+      const e = ot(
         t
       );
       this._defaultLook = {
@@ -2521,7 +2521,7 @@ class bt extends At {
   getNode() {
     if (this.rootElement instanceof z)
       return this.rootElement;
-    if (this.rootElement instanceof B)
+    if (this.rootElement instanceof G)
       return this.rootElement.node;
   }
   getPriority() {
@@ -2584,7 +2584,7 @@ class Hi extends ut {
         this.model.connections.remove(e.outgoingConnections[0].id);
       for (; e.incomingConnections.length > 0; )
         this.model.connections.remove(e.incomingConnections[0].id);
-      e.label && this.model.fields.remove(e.label.id), (e.rootElement instanceof z || e.rootElement instanceof B) && U(e.rootElement.ports, e), super.remove(t), e.updateInView();
+      e.label && this.model.fields.remove(e.label.id), (e.rootElement instanceof z || e.rootElement instanceof G) && Y(e.rootElement.ports, e), super.remove(t), e.updateInView();
     }
   }
 }
@@ -2626,11 +2626,11 @@ class je {
             t,
             l,
             [
-              l.coords[0] + j(i),
-              l.coords[1] + G(i)
+              l.coords[0] + U(i),
+              l.coords[1] + H(i)
             ],
-            l.width - j(i) - nt(i),
-            l.height - G(i) - tt(i),
+            l.width - U(i) - et(i),
+            l.height - H(i) - K(i),
             i.fontSize,
             i.fontFamily,
             i.color,
@@ -2651,7 +2651,7 @@ class je {
         s !== void 0 && (l.children?.push(s), s.parent = l);
       }
       for (const i of e.sections || []) {
-        const s = new B(
+        const s = new G(
           t,
           l,
           i.indexXInNode,
@@ -2669,11 +2669,11 @@ class je {
             t,
             s,
             [
-              s.coords[0] + j(c),
-              s.coords[1] + G(c)
+              s.coords[0] + U(c),
+              s.coords[1] + H(c)
             ],
-            s.width - j(c) - nt(c),
-            s.height - G(c) - tt(c),
+            s.width - U(c) - et(c),
+            s.height - H(c) - K(c),
             c.fontSize,
             c.fontFamily,
             c.color,
@@ -2970,7 +2970,7 @@ class Dt {
     );
   }
 }
-class et {
+class it {
   constructor(t, e, n, l) {
     this.canvas = t, this.nodeId = e, this.to = n, this.timestamp = l;
   }
@@ -2995,7 +2995,7 @@ class et {
     };
   }
   static deserialize(t, e) {
-    return new et(
+    return new it(
       t,
       e.nodeId,
       e.to,
@@ -3057,7 +3057,7 @@ class ee {
     );
   }
 }
-class Lt {
+class Tt {
   constructor(t, e, n, l) {
     this.canvas = t, this.fieldId = e, this.to = n, this.timestamp = l;
   }
@@ -3074,7 +3074,7 @@ class Lt {
     };
   }
   static deserialize(t, e) {
-    return new Lt(
+    return new Tt(
       t,
       e.fieldId,
       e.to,
@@ -3190,7 +3190,7 @@ class ie {
 }
 class Bi {
   constructor(t) {
-    this.isInRoom = !1, this.canvas = t, this.replicaId = Ee();
+    this.isInRoom = !1, this.canvas = t, this.replicaId = Le();
   }
   /**
    * Returns a fresh timestamp, suitable for use by new CollabActions.
@@ -3202,7 +3202,7 @@ class Bi {
    * Returns a fresh unique ID, suitable for use by new CollabActions.
    */
   freshId() {
-    return "id" + Ee();
+    return "id" + Le();
   }
   /**
    * Performs the action - immediately locally, and eventually for remote collaborators.
@@ -3244,7 +3244,7 @@ class Bi {
         break;
       }
       case "setGeometry": {
-        et.deserialize(
+        it.deserialize(
           this.canvas,
           t
         ).do();
@@ -3262,7 +3262,7 @@ class Bi {
         break;
       }
       case "editField": {
-        Lt.deserialize(this.canvas, t).do();
+        Tt.deserialize(this.canvas, t).do();
         break;
       }
       case "updateValues": {
@@ -3343,7 +3343,7 @@ class Gi {
     });
   }
 }
-var k = /* @__PURE__ */ ((o) => (o.AddConnection = "add-connection", o.AddNode = "add-node", o.AddSectionAction = "add-section", o.ApplyLayout = "apply-layout", o.Clipboard = "clipboard", o.ContextMenu = "context-menu", o.EditField = "edit-field", o.MoveNode = "move-node", o.Paste = "paste", o.Remove = "remove", o.StretchNode = "stretch-node", o.StretchSection = "stretch-section", o.UpdateValues = "update-values", o.Zoom = "zoom", o))(k || {});
+var w = /* @__PURE__ */ ((o) => (o.AddConnection = "add-connection", o.AddNode = "add-node", o.AddSectionAction = "add-section", o.ApplyLayout = "apply-layout", o.Clipboard = "clipboard", o.ContextMenu = "context-menu", o.EditField = "edit-field", o.MoveNode = "move-node", o.Paste = "paste", o.Remove = "remove", o.StretchNode = "stretch-node", o.StretchSection = "stretch-section", o.UpdateValues = "update-values", o.Zoom = "zoom", o))(w || {});
 class Ui {
   constructor(t, e, n, l, a, i, s, r, c) {
     this.canvas = t, this.type = e, this.coords = n, this.parentId = l, this.ancestorId = a, this.fromAncestorGeometry = i, this.toAncestorGeometry = s, this.label = r, this.values = c, this.id = this.canvas.collabEngine.freshId();
@@ -3359,7 +3359,7 @@ class Ui {
       this.values
     );
     if (this.canvas.collabEngine.doCollaboratively(t), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-      const e = new et(
+      const e = new it(
         this.canvas,
         this.ancestorId,
         this.toAncestorGeometry,
@@ -3381,7 +3381,7 @@ class Ui {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
-      const n = new et(
+      const n = new it(
         this.canvas,
         this.ancestorId,
         this.fromAncestorGeometry,
@@ -3403,7 +3403,7 @@ class Ui {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-      const n = new et(
+      const n = new it(
         this.canvas,
         this.ancestorId,
         this.toAncestorGeometry,
@@ -3440,21 +3440,21 @@ class re {
     return this.do();
   }
 }
-class Y {
+class X {
   constructor(t, e, n, l, a, i, s, r) {
     this.canvas = t, this.intent = e, this.nodeId = n, this.from = l, this.to = a, this.ancestorId = i, this.fromAncestorGeometry = s, this.toAncestorGeometry = r;
   }
   do() {
     const t = this.canvas.model.nodes.get(this.nodeId);
     if (t) {
-      const e = new et(
+      const e = new it(
         this.canvas,
         this.nodeId,
         this.to,
         this.canvas.collabEngine.freshTimestamp()
       );
       if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-        const n = new et(
+        const n = new it(
           this.canvas,
           this.ancestorId,
           this.toAncestorGeometry,
@@ -3469,14 +3469,14 @@ class Y {
     const t = this.canvas.model.nodes.get(this.nodeId);
     if (t) {
       this.to = t.getGeometry();
-      const e = new et(
+      const e = new it(
         this.canvas,
         this.nodeId,
         this.from,
         this.canvas.collabEngine.freshTimestamp()
       );
       if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
-        const n = new et(
+        const n = new it(
           this.canvas,
           this.ancestorId,
           this.fromAncestorGeometry,
@@ -3491,7 +3491,7 @@ class Y {
     const t = this.canvas.model.nodes.get(this.nodeId);
     if (t) {
       this.from = t.getGeometry();
-      const e = new et(
+      const e = new it(
         this.canvas,
         this.nodeId,
         this.to,
@@ -3515,7 +3515,7 @@ class Yi {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-      const n = new et(
+      const n = new it(
         this.canvas,
         this.ancestorId,
         this.toAncestorGeometry,
@@ -3534,7 +3534,7 @@ class Yi {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
-      const n = new et(
+      const n = new it(
         this.canvas,
         this.ancestorId,
         this.fromAncestorGeometry,
@@ -3594,7 +3594,7 @@ class Ne {
     this.canvas = t, this.fieldId = e, this.from = n, this.to = l;
   }
   do() {
-    const t = this.canvas.model.fields.get(this.fieldId), e = new Lt(
+    const t = this.canvas.model.fields.get(this.fieldId), e = new Tt(
       this.canvas,
       this.fieldId,
       this.to,
@@ -3606,7 +3606,7 @@ class Ne {
     const t = this.canvas.model.fields.get(this.fieldId);
     if (t) {
       this.to = t.text;
-      const e = new Lt(
+      const e = new Tt(
         this.canvas,
         this.fieldId,
         this.from,
@@ -3620,7 +3620,7 @@ class Ne {
     const t = this.canvas.model.fields.get(this.fieldId);
     if (t) {
       this.from = t.text;
-      const e = new Lt(
+      const e = new Tt(
         this.canvas,
         this.fieldId,
         this.to,
@@ -3857,7 +3857,7 @@ class F extends oe {
     ), this.targets = t, this.selected = e;
   }
 }
-class q extends oe {
+class J extends oe {
   /**
    * Create a diagram highlight event.
    *
@@ -3935,7 +3935,7 @@ class Zi extends ut {
   }
   remove(t) {
     const e = this.get(t, !0);
-    e && ((e.rootElement instanceof z || e.rootElement instanceof B) && U(e.rootElement.decorators, e), super.remove(t), e.updateInView());
+    e && ((e.rootElement instanceof z || e.rootElement instanceof G) && Y(e.rootElement.decorators, e), super.remove(t), e.updateInView());
   }
 }
 class Ki extends At {
@@ -4005,7 +4005,7 @@ class qi extends ut {
 }
 class Ke {
   constructor(t, e, n, l, a, i = []) {
-    this.nodes = new Ri(this), this.sections = new zi(this), this.ports = new Hi(this), this.connections = new Ti(this), this.fields = new Li(this), this.objects = new qi(this), this.decorators = new Zi(this), this.canvas = t, this.id = e, this.name = n, this.description = l, this.type = a, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new yt(new Qt(i), this);
+    this.nodes = new Ri(this), this.sections = new zi(this), this.ports = new Hi(this), this.connections = new Ei(this), this.fields = new Ti(this), this.objects = new qi(this), this.decorators = new Zi(this), this.canvas = t, this.id = e, this.name = n, this.description = l, this.type = a, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new yt(new Qt(i), this);
   }
   /**
    * Deletes everything in this diagram.
@@ -4027,8 +4027,8 @@ const vt = (o) => !!o.button, le = (o, t, e, n, l, a, i, s) => gi(
     s || 0
   ) * a
 ), S = (o) => {
-  o ? E.select("body").style("cursor", o) : E.select("body").style("cursor", T.Auto);
-}, dt = (o) => o instanceof z ? o : o instanceof B ? o.node || o : o.rootElement instanceof z || o.rootElement instanceof B || o.rootElement instanceof bt ? dt(o.rootElement) : o, ce = (o) => {
+  o ? L.select("body").style("cursor", o) : L.select("body").style("cursor", E.Auto);
+}, dt = (o) => o instanceof z ? o : o instanceof G ? o.node || o : o.rootElement instanceof z || o.rootElement instanceof G || o.rootElement instanceof bt ? dt(o.rootElement) : o, ce = (o) => {
   o.filter(".shaped-look").append("path"), o.filter(".image-look").append("image").attr("preserveAspectRatio", "none"), o.filter(".stretchable-image-look").append("image").attr("class", "top-left-image").attr("preserveAspectRatio", "none"), o.filter(".stretchable-image-look").append("image").attr("class", "top-image").attr("preserveAspectRatio", "none"), o.filter(".stretchable-image-look").append("image").attr("class", "top-right-image").attr("preserveAspectRatio", "none"), o.filter(".stretchable-image-look").append("image").attr("class", "left-image").attr("preserveAspectRatio", "none"), o.filter(".stretchable-image-look").append("image").attr("class", "center-image").attr("preserveAspectRatio", "none"), o.filter(".stretchable-image-look").append("image").attr("class", "right-image").attr("preserveAspectRatio", "none"), o.filter(".stretchable-image-look").append("image").attr("class", "bottom-left-image").attr("preserveAspectRatio", "none"), o.filter(".stretchable-image-look").append("image").attr("class", "bottom-image").attr("preserveAspectRatio", "none"), o.filter(".stretchable-image-look").append("image").attr("class", "bottom-right-image").attr("preserveAspectRatio", "none");
 }, Pt = {
   fillColor: "#FFFFFF",
@@ -4058,7 +4058,7 @@ const vt = (o) => !!o.button, le = (o, t, e, n, l, a, i, s) => gi(
     "stroke-dasharray",
     (t) => fe(
       t.look.borderStyle || Pt.borderStyle,
-      t.look.borderThickness || Pt.borderThickness
+      t.type?.defaultLook?.borderThickness || t.look?.borderThickness || Pt.borderThickness
     )
   ), o.filter(".image-look").select("image").attr("x", 0).attr("y", 0).attr("width", (t) => t.width).attr("height", (t) => t.height).attr("href", (t) => t.look.backgroundImage), o.filter(".stretchable-image-look").select("image.top-left-image").attr("x", 0).attr("y", 0).attr("width", (t) => t.look.leftMargin).attr("height", (t) => t.look.topMargin).attr(
     "href",
@@ -4123,7 +4123,7 @@ const vt = (o) => !!o.button, le = (o, t, e, n, l, a, i, s) => gi(
     }
     t.select("rect").attr("fill", `url(#${e})`);
   }
-}, pe = 96, X = 32, Et = pe + X, Qi = Math.PI / 4, to = 100, Me = {
+}, pe = 96, j = 32, Lt = pe + j, Qi = Math.PI / 4, to = 100, Me = {
   customButtons: []
 };
 class eo {
@@ -4142,26 +4142,26 @@ class eo {
    */
   open(t) {
     this.close();
-    const e = this.canvas.getPointerLocationRelativeToRoot(t), n = this.canvas.getPointerLocationRelativeToCanvas(t), l = this.canvas.selectSVGElement().append("foreignObject").attr("class", "daga-context-menu").attr("x", `${e[0] - Et}px`).attr("y", `${e[1] - Et}px`).attr("width", `${2 * Et}px`).attr("height", `${2 * Et}px`).style("pointer-events", "none").on(I.ContextMenu, (i) => {
-      this.canvas.canUserPerformAction(k.ContextMenu) && (t.preventDefault(), this.open(i));
+    const e = this.canvas.getPointerLocationRelativeToRoot(t), n = this.canvas.getPointerLocationRelativeToCanvas(t), l = this.canvas.selectSVGElement().append("foreignObject").attr("class", "daga-context-menu").attr("x", `${e[0] - Lt}px`).attr("y", `${e[1] - Lt}px`).attr("width", `${2 * Lt}px`).attr("height", `${2 * Lt}px`).style("pointer-events", "none").on(I.ContextMenu, (i) => {
+      this.canvas.canUserPerformAction(w.ContextMenu) && (t.preventDefault(), this.open(i));
     }).on(I.Click, (i) => {
       i.preventDefault(), this.close();
     });
     this.contextMenuContainer = l;
     const a = [];
-    this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(k.Clipboard) && this.canvas.canUserPerformAction(k.Remove) && a.push({
+    this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(w.Clipboard) && this.canvas.canUserPerformAction(w.Remove) && a.push({
       name: "CUT",
       imageClass: "daga-cut",
       onPress: (i) => {
         i.userSelection.cutToClipboard(), i.cancelAllUserActions();
       }
-    }), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(k.Clipboard) && a.push({
+    }), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(w.Clipboard) && a.push({
       name: "COPY",
       imageClass: "daga-copy",
       onPress: (i) => {
         i.userSelection.copyToClipboard(), i.cancelAllUserActions();
       }
-    }), this.canvas.canUserPerformAction(k.Paste) && a.push({
+    }), this.canvas.canUserPerformAction(w.Paste) && a.push({
       name: "PASTE",
       imageClass: "daga-paste",
       onPress: (i) => {
@@ -4169,7 +4169,7 @@ class eo {
           i.getClosestGridPoint(n)
         ), i.cancelAllUserActions();
       }
-    }), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(k.Remove) && a.push({
+    }), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(w.Remove) && a.push({
       name: "DELETE",
       imageClass: "daga-delete",
       onPress: (i) => {
@@ -4187,19 +4187,19 @@ class eo {
       const s = a[i], r = s.onPress, c = (i + 0.5 - a.length / 2) * Qi, d = l.append("xhtml:div").attr(
         "class",
         `daga-context-menu-button ${s.onPress !== void 0 ? " daga-clickable" : ""}`
-      ).attr("tabindex", 0).style("position", "absolute").style("box-sizing", "border-box").style("width", `${2 * X}px`).style("height", `${2 * X}px`).style("border-radius", `${X}px`).style("pointer-events", "auto").on(I.Click, (h) => {
+      ).attr("tabindex", 0).style("position", "absolute").style("box-sizing", "border-box").style("width", `${2 * j}px`).style("height", `${2 * j}px`).style("border-radius", `${j}px`).style("pointer-events", "auto").on(I.Click, (h) => {
         r && (h.preventDefault(), r(this.canvas));
       }).on(I.KeyDown, (h) => {
         r && h.key === Z.Enter && (h.preventDefault(), r(this.canvas));
       });
-      s.imageClass !== void 0 ? d.append("xhtml:div").style("position", "absolute").style("left", `${0.75 * X}px`).style("top", `${0.5 * X}px`).style("width", `${0.5 * X}px`).style("height", `${0.5 * X}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", s.imageClass) : s.image !== void 0 && d.append("xhtml:img").style("position", "absolute").style("left", `${0.75 * X}px`).style("top", `${0.5 * X}px`).style("width", `${0.5 * X}px`).style("height", `${0.5 * X}px`).attr("src", s.image), d.append("xhtml:span").style("position", "absolute").style("left", `${0.2 * X}px`).style("top", `${1.1 * X}px`).style("text-align", "center").style("width", `${1.6 * X}px`).style("height", `${0.35 * X}px`).style("margin", "0").style("font-size", `${0.35 * X}px`).style("font-weight", "700").style("user-select", "none").text(s.name), d.transition().ease(E.easeLinear).duration(to).tween("progress", () => (h) => {
+      s.imageClass !== void 0 ? d.append("xhtml:div").style("position", "absolute").style("left", `${0.75 * j}px`).style("top", `${0.5 * j}px`).style("width", `${0.5 * j}px`).style("height", `${0.5 * j}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", s.imageClass) : s.image !== void 0 && d.append("xhtml:img").style("position", "absolute").style("left", `${0.75 * j}px`).style("top", `${0.5 * j}px`).style("width", `${0.5 * j}px`).style("height", `${0.5 * j}px`).attr("src", s.image), d.append("xhtml:span").style("position", "absolute").style("left", `${0.2 * j}px`).style("top", `${1.1 * j}px`).style("text-align", "center").style("width", `${1.6 * j}px`).style("height", `${0.35 * j}px`).style("margin", "0").style("font-size", `${0.35 * j}px`).style("font-weight", "700").style("user-select", "none").text(s.name), d.transition().ease(L.easeLinear).duration(to).tween("progress", () => (h) => {
         const g = c * h;
         return d.style(
           "left",
-          `${Math.sin(g) * pe - X + Et}px`
+          `${Math.sin(g) * pe - j + Lt}px`
         ).style(
           "top",
-          `${-Math.cos(g) * pe - X + Et}px`
+          `${-Math.cos(g) * pe - j + Lt}px`
         );
       });
     }
@@ -4248,7 +4248,7 @@ class io extends ut {
       for (const e of t.ports)
         super.add(e), this.canvas.updatePortsInView(e.id);
       t.label && (super.add(t.label), this.canvas.updateFieldsInView(t.label.id)), this.canvas.updateNodesInView(t.id);
-    } else if (t instanceof B)
+    } else if (t instanceof G)
       if (!this.highlightSections && t.node)
         this.add(t.node);
       else {
@@ -4423,7 +4423,7 @@ class no extends ut {
     });
   }
   add(t) {
-    if (!this.contains(t.id) && (this.length === 0 ? this.propertyEditorSelection === void 0 && (t instanceof z || t instanceof ct) ? this.openInPropertyEditor(t) : this.propertyEditorSelection === void 0 && t instanceof B ? this.openInPropertyEditor(t.node) : this.openInPropertyEditor(void 0) : this.openInPropertyEditor(void 0), super.add(t), t.updateInView(), t instanceof z && t.sections))
+    if (!this.contains(t.id) && (this.length === 0 ? this.propertyEditorSelection === void 0 && (t instanceof z || t instanceof ct) ? this.openInPropertyEditor(t) : this.propertyEditorSelection === void 0 && t instanceof G ? this.openInPropertyEditor(t.node) : this.openInPropertyEditor(void 0) : this.openInPropertyEditor(void 0), super.add(t), t.updateInView(), t instanceof z && t.sections))
       for (const e of t.sections)
         super.add(e), e.updateInView();
   }
@@ -4468,7 +4468,7 @@ class no extends ut {
     if (this.length > 0) {
       const t = [], e = [], n = [], l = [], a = [];
       for (const s of this.all())
-        s instanceof z ? t.push(s.id) : s instanceof B ? e.push(s.id) : s instanceof bt ? n.push(s.id) : s instanceof ct ? l.push(s.id) : s instanceof ht && a.push(s.id);
+        s instanceof z ? t.push(s.id) : s instanceof G ? e.push(s.id) : s instanceof bt ? n.push(s.id) : s instanceof ct ? l.push(s.id) : s instanceof ht && a.push(s.id);
       const i = new ji(
         this.canvas,
         t,
@@ -4574,7 +4574,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(t, e) {
-    if (this.backgroundPatternId = `daga-background-pattern-id-${qt.canvasCount++}`, this.zoomTransform = E.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new Yt(), this.diagramChange$ = new Yt(), this.diagramEvent$ = new Yt(), this.propertyEditorChanges$ = new Yt(), this.parentComponent = t, this.model = new Ke(
+    if (this.backgroundPatternId = `daga-background-pattern-id-${qt.canvasCount++}`, this.zoomTransform = L.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new Yt(), this.diagramChange$ = new Yt(), this.diagramEvent$ = new Yt(), this.propertyEditorChanges$ = new Yt(), this.parentComponent = t, this.model = new Ke(
       this,
       void 0,
       e.name || "unnamed",
@@ -4625,7 +4625,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     this.validators.push(t), this.validatorChange$.next();
   }
   removeValidator(t) {
-    U(this.validators, t), this.validatorChange$.next();
+    Y(this.validators, t), this.validatorChange$.next();
   }
   getPriorityThresholdOptions() {
     return this.priorityThresholds;
@@ -4641,21 +4641,21 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
   }
   // View methods
   initView(t) {
-    const e = E.select(t);
-    e.html(""), this.diagramRoot = e.append("div").node(), E.select(this.diagramRoot).attr("tabindex", 0).style("width", "100%").style("height", "100%").append("svg").style("width", "100%").style("height", "100%"), E.select(this.diagramRoot).on(I.Click, () => {
-      E.select(this.diagramRoot).node()?.focus();
+    const e = L.select(t);
+    e.html(""), this.diagramRoot = e.append("div").node(), L.select(this.diagramRoot).attr("tabindex", 0).style("width", "100%").style("height", "100%").append("svg").style("width", "100%").style("height", "100%"), L.select(this.diagramRoot).on(I.Click, () => {
+      L.select(this.diagramRoot).node()?.focus();
     }).on(I.ContextMenu, (l) => {
       if (this.dragging) {
         l.preventDefault(), l.stopPropagation(), this.dragging = !1;
         return;
       }
       const a = new pt(l, null);
-      this.diagramEvent$.next(a), !a.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && (l.preventDefault(), this.contextMenu.open(l));
+      this.diagramEvent$.next(a), !a.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && (l.preventDefault(), this.contextMenu.open(l));
     }).on(I.DoubleClick, (l) => {
       const a = new mt(l, null);
       this.diagramEvent$.next(a);
     }).on(I.KeyDown, (l) => {
-      if (!l.ctrlKey && (l.key === Z.Delete || l.key === Z.Backspace) && this.canUserPerformAction(k.Remove) && (this.userSelection.removeFromModel(), this.cancelAllUserActions()), l.ctrlKey && l.key === "a") {
+      if (!l.ctrlKey && (l.key === Z.Delete || l.key === Z.Backspace) && this.canUserPerformAction(w.Remove) && (this.userSelection.removeFromModel(), this.cancelAllUserActions()), l.ctrlKey && l.key === "a") {
         l.preventDefault();
         for (const a of this.model.nodes)
           this.userSelection.add(a);
@@ -4678,7 +4678,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
           new F(i, !1)
         );
       }
-      if (l.ctrlKey && l.key === "c" && this.canUserPerformAction(k.Clipboard) && (l.preventDefault(), this.userSelection.copyToClipboard(), this.cancelAllUserActions()), l.ctrlKey && l.key === "x" && this.canUserPerformAction(k.Clipboard) && this.canUserPerformAction(k.Remove) && (l.preventDefault(), this.userSelection.cutToClipboard(), this.cancelAllUserActions()), l.ctrlKey && l.key === "v" && this.canUserPerformAction(k.Paste)) {
+      if (l.ctrlKey && l.key === "c" && this.canUserPerformAction(w.Clipboard) && (l.preventDefault(), this.userSelection.copyToClipboard(), this.cancelAllUserActions()), l.ctrlKey && l.key === "x" && this.canUserPerformAction(w.Clipboard) && this.canUserPerformAction(w.Remove) && (l.preventDefault(), this.userSelection.cutToClipboard(), this.cancelAllUserActions()), l.ctrlKey && l.key === "v" && this.canUserPerformAction(w.Paste)) {
         l.preventDefault();
         const a = this.getCoordinatesOnScreen();
         this.userSelection.pasteFromClipboard(
@@ -4688,21 +4688,21 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
           ])
         ), this.cancelAllUserActions();
       }
-      l.ctrlKey && l.key === "y" && (l.preventDefault(), this.actionStack.redo()), l.ctrlKey && l.key === "z" && (l.preventDefault(), this.actionStack.undo()), l.key === "+" && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.zoomBy(this.zoomFactor)), l.key === "-" && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.zoomBy(1 / this.zoomFactor)), l.key === Z.ArrowLeft && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(this.panRate / this.zoomTransform.k, 0)), l.key === Z.ArrowRight && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(-this.panRate / this.zoomTransform.k, 0)), l.key === Z.ArrowDown && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(0, -this.panRate / this.zoomTransform.k)), l.key === Z.ArrowUp && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(0, this.panRate / this.zoomTransform.k));
+      l.ctrlKey && l.key === "y" && (l.preventDefault(), this.actionStack.redo()), l.ctrlKey && l.key === "z" && (l.preventDefault(), this.actionStack.undo()), l.key === "+" && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.zoomBy(this.zoomFactor)), l.key === "-" && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.zoomBy(1 / this.zoomFactor)), l.key === Z.ArrowLeft && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.translateBy(this.panRate / this.zoomTransform.k, 0)), l.key === Z.ArrowRight && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.translateBy(-this.panRate / this.zoomTransform.k, 0)), l.key === Z.ArrowDown && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.translateBy(0, -this.panRate / this.zoomTransform.k)), l.key === Z.ArrowUp && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.translateBy(0, this.panRate / this.zoomTransform.k));
     });
     const n = this.selectSVGElement().append("g").attr("class", "daga-canvas-view").attr("width", "100%").attr("height", "100%");
     n.call(
-      this.zoomBehavior = E.zoom().filter((l) => l.type !== I.DoubleClick).on(ge.Zoom, (l) => {
+      this.zoomBehavior = L.zoom().filter((l) => l.type !== I.DoubleClick).on(ge.Zoom, (l) => {
         if (l.sourceEvent) {
-          if (!this.canUserPerformAction(k.Zoom)) {
-            S(T.NotAllowed);
+          if (!this.canUserPerformAction(w.Zoom)) {
+            S(E.NotAllowed);
             return;
           }
-          l.sourceEvent.type === I.Wheel && l.sourceEvent.wheelDelta !== void 0 ? (l.sourceEvent.wheelDelta > 0 && S(T.ZoomIn), l.sourceEvent.wheelDelta < 0 && S(T.ZoomOut)) : l.sourceEvent.type === I.MouseMove && S(T.AllScroll);
+          l.sourceEvent.type === I.Wheel && l.sourceEvent.wheelDelta !== void 0 ? (l.sourceEvent.wheelDelta > 0 && S(E.ZoomIn), l.sourceEvent.wheelDelta < 0 && S(E.ZoomOut)) : l.sourceEvent.type === I.MouseMove && S(E.AllScroll);
         }
         this.zoomTransform = l.transform;
         const a = l.transform.toString();
-        this.selectCanvasElements().attr("transform", a), E.select(`#${this.backgroundPatternId}`).attr(
+        this.selectCanvasElements().attr("transform", a), L.select(`#${this.backgroundPatternId}`).attr(
           "patternTransform",
           a
         ), this.contextMenu.close();
@@ -4715,16 +4715,16 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         this.unfinishedConnection.endCoords = a;
       }
     }).on(I.MouseOver, () => {
-      this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new q(null)));
+      this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new J(null)));
     }).on(I.Click, () => {
-      if (this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new q(null))), this.contextMenu.close(), this.userSelection.size() > 0) {
+      if (this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new J(null))), this.contextMenu.close(), this.userSelection.size() > 0) {
         const l = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
           new F(l, !1)
         ), this.userSelection.openInPropertyEditor(this.model);
       }
     }).call(
-      E.drag().filter((l) => this.multipleSelectionOn || vt(l)).on(A.Start, (l) => {
+      L.drag().filter((l) => this.multipleSelectionOn || vt(l)).on(A.Start, (l) => {
         this.startMultipleSelection(l);
       }).on(A.Drag, (l) => {
         this.continueMultipleSelection(l);
@@ -4797,21 +4797,21 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     return t;
   }
   getPointerLocationRelativeToCanvas(t) {
-    return E.pointer(
+    return L.pointer(
       this.getEventHoldingCoordinates(t),
       this.selectCanvasElements().node()
     );
   }
   getPointerLocationRelativeToRoot(t) {
-    return E.pointer(
+    return L.pointer(
       this.getEventHoldingCoordinates(t),
       this.selectSVGElement().node()
     );
   }
   getPointerLocationRelativeToBody(t) {
-    return E.pointer(
+    return L.pointer(
       this.getEventHoldingCoordinates(t),
-      E.select("body").node()
+      L.select("body").node()
     );
   }
   getPointerLocationRelativeToScreen(t) {
@@ -4838,7 +4838,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     t && t.length > 0 && (e = e.filter((i) => t.includes(i.id)));
     const a = l.merge(e);
     n.remove(), l.on(I.MouseOver, (i, s) => {
-      this.dragging || (this.userHighlight.focusOn(s), this.diagramEvent$.next(new q(s)));
+      this.dragging || (this.userHighlight.focusOn(s), this.diagramEvent$.next(new J(s)));
     }).on(I.Click, (i, s) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const r = this.userSelection.all();
@@ -4853,12 +4853,12 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         return;
       }
       const r = new pt(i, s);
-      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && (i.preventDefault(), this.userHighlight.focusOn(s), this.diagramEvent$.next(new q(s)), this.userSelection.add(s), this.diagramEvent$.next(new F([s], !0)), this.contextMenu.open(i));
+      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && (i.preventDefault(), this.userHighlight.focusOn(s), this.diagramEvent$.next(new J(s)), this.userSelection.add(s), this.diagramEvent$.next(new F([s], !0)), this.contextMenu.open(i));
     }).on(I.DoubleClick, (i, s) => {
       const r = new mt(i, s);
       this.diagramEvent$.next(r);
     }).call(
-      E.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
         this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(i) : this.startMovingNode(i, s);
       }).on(A.Drag, (i, s) => {
         this.multipleSelectionOn || this.secondaryButton ? this.continueMultipleSelection(i) : this.continueMovingNode(i, s);
@@ -4868,95 +4868,95 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     ), ce(
       l
     ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${_}px`).on(I.MouseOver, (i, s) => {
-      this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed && S(T.EWResize);
+      this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed && S(E.EWResize);
     }).on(I.MouseOut, (i, s) => {
-      this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed && S();
+      this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed && S();
     }).call(
-      E.drag().on(A.Start, (i, s) => {
-        this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed ? (S(T.EWResize), this.currentAction = new Y(
+      L.drag().on(A.Start, (i, s) => {
+        this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed ? (S(E.EWResize), this.currentAction = new X(
           this,
-          k.StretchNode,
+          w.StretchNode,
           s.id,
           s.getGeometry(),
           s.getGeometry()
-        )) : S(T.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, s) => {
-        if (this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed) {
+        if (this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed) {
           const r = this.getPointerLocationRelativeToCanvas(i);
           s.stretch(u.Left, s.coords[0] - r[0]);
         }
       }).on(A.End, (i, s) => {
-        if (this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed && this.currentAction instanceof Y && this.currentAction.intent === k.StretchNode) {
+        if (this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchNode) {
           let r = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (r = this.getClosestGridPoint(r)), s.stretch(u.Left, s.coords[0] - r[0]), this.currentAction.to = s.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
         }
         S();
       })
     ), l.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${_}px`).on(I.MouseOver, (i, s) => {
-      this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed && S(T.NSResize);
+      this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed && S(E.NSResize);
     }).on(I.MouseOut, (i, s) => {
-      this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed && S();
+      this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed && S();
     }).call(
-      E.drag().on(A.Start, (i, s) => {
-        this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed ? (S(T.NSResize), this.currentAction = new Y(
+      L.drag().on(A.Start, (i, s) => {
+        this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed ? (S(E.NSResize), this.currentAction = new X(
           this,
-          k.StretchNode,
+          w.StretchNode,
           s.id,
           s.getGeometry(),
           s.getGeometry()
-        )) : S(T.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, s) => {
-        if (this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed) {
+        if (this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed) {
           const r = this.getPointerLocationRelativeToCanvas(i);
           s.stretch(u.Top, s.coords[1] - r[1]);
         }
       }).on(A.End, (i, s) => {
-        if (this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed && this.currentAction instanceof Y && this.currentAction.intent === k.StretchNode) {
+        if (this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchNode) {
           let r = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (r = this.getClosestGridPoint(r)), s.stretch(u.Top, s.coords[1] - r[1]), this.currentAction.to = s.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
         }
         S();
       })
     ), l.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${_}px`).on(I.MouseOver, (i, s) => {
-      this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed && S(T.EWResize);
+      this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed && S(E.EWResize);
     }).on(I.MouseOut, (i, s) => {
-      this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed && S();
+      this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed && S();
     }).call(
-      E.drag().on(A.Start, (i, s) => {
-        this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed ? (S(T.EWResize), this.currentAction = new Y(
+      L.drag().on(A.Start, (i, s) => {
+        this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed ? (S(E.EWResize), this.currentAction = new X(
           this,
-          k.StretchNode,
+          w.StretchNode,
           s.id,
           s.getGeometry(),
           s.getGeometry()
-        )) : S(T.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, s) => {
-        if (this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed) {
+        if (this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed) {
           const r = this.getPointerLocationRelativeToCanvas(i);
           s.stretch(u.Right, r[0] - (s.coords[0] + s.width));
         }
       }).on(A.End, (i, s) => {
-        if (this.canUserPerformAction(k.StretchNode) && s.type.resizableX && !s.removed && this.currentAction instanceof Y && this.currentAction.intent === k.StretchNode) {
+        if (this.canUserPerformAction(w.StretchNode) && s.type.resizableX && !s.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchNode) {
           let r = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (r = this.getClosestGridPoint(r)), s.stretch(u.Right, r[0] - (s.coords[0] + s.width)), this.currentAction.to = s.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
         }
         S();
       })
     ), l.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${_}px`).on(I.MouseOver, (i, s) => {
-      this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed && S(T.NSResize);
+      this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed && S(E.NSResize);
     }).on(I.MouseOut, (i, s) => {
-      this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed && S();
+      this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed && S();
     }).call(
-      E.drag().on(A.Start, (i, s) => {
-        this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed ? (S(T.NSResize), this.currentAction = new Y(
+      L.drag().on(A.Start, (i, s) => {
+        this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed ? (S(E.NSResize), this.currentAction = new X(
           this,
-          k.StretchNode,
+          w.StretchNode,
           s.id,
           s.getGeometry(),
           s.getGeometry()
-        )) : S(T.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, s) => {
-        if (this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed) {
+        if (this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed) {
           const r = this.getPointerLocationRelativeToCanvas(i);
           s.stretch(
             u.Bottom,
@@ -4964,7 +4964,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
           );
         }
       }).on(A.End, (i, s) => {
-        if (this.canUserPerformAction(k.StretchNode) && s.type.resizableY && !s.removed && this.currentAction instanceof Y && this.currentAction.intent === k.StretchNode) {
+        if (this.canUserPerformAction(w.StretchNode) && s.type.resizableY && !s.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchNode) {
           let r = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (r = this.getClosestGridPoint(r)), s.stretch(
             u.Bottom,
@@ -4991,7 +4991,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     t && t.length > 0 && (e = e.filter((i) => t.includes(i.id)));
     const a = l.merge(e);
     n.remove(), l.on(I.MouseOver, (i, s) => {
-      this.dragging || (this.userHighlight.focusOn(s), this.diagramEvent$.next(new q(s)));
+      this.dragging || (this.userHighlight.focusOn(s), this.diagramEvent$.next(new J(s)));
     }).on(I.Click, (i, s) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const c = this.userSelection.all();
@@ -5012,10 +5012,10 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         return;
       }
       const r = new pt(i, s);
-      if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(k.ContextMenu)) {
+      if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(w.ContextMenu)) {
         i.preventDefault();
         const c = dt(s);
-        this.userHighlight.focusOn(c), this.diagramEvent$.next(new q(c)), this.userSelection.add(c), this.diagramEvent$.next(
+        this.userHighlight.focusOn(c), this.diagramEvent$.next(new J(c)), this.userSelection.add(c), this.diagramEvent$.next(
           new F([c], !0)
         ), this.contextMenu.open(i);
       }
@@ -5023,19 +5023,19 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
       const r = new mt(i, s);
       this.diagramEvent$.next(r);
     }).call(
-      E.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(i);
         else {
           const r = s?.node;
-          r ? this.startMovingNode(i, r) : S(T.NotAllowed);
+          r ? this.startMovingNode(i, r) : S(E.NotAllowed);
         }
       }).on(A.Drag, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
         else {
           const r = s?.node;
-          r ? this.continueMovingNode(i, r) : S(T.NotAllowed);
+          r ? this.continueMovingNode(i, r) : S(E.NotAllowed);
         }
       }).on(A.End, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
@@ -5049,20 +5049,20 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     ), ce(
       l
     ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${_}px`).on(I.MouseOver, (i, s) => {
-      this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && S(T.EWResize);
+      this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && S(E.EWResize);
     }).on(I.MouseOut, (i, s) => {
-      this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && S();
+      this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && S();
     }).call(
-      E.drag().on(A.Start, (i, s) => {
-        this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && s.node ? (S(T.EWResize), this.currentAction = new Y(
+      L.drag().on(A.Start, (i, s) => {
+        this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && s.node ? (S(E.EWResize), this.currentAction = new X(
           this,
-          k.StretchSection,
+          w.StretchSection,
           s.node.id,
           s.node.getGeometry(),
           s.node.getGeometry()
-        )) : S(T.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, s) => {
-        if (this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && s.node) {
+        if (this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && s.node) {
           const r = this.getPointerLocationRelativeToCanvas(i);
           s.node.stretchSections(
             u.Left,
@@ -5072,7 +5072,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
           );
         }
       }).on(A.End, (i, s) => {
-        if (this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && this.currentAction instanceof Y && this.currentAction.intent === k.StretchSection && s.node) {
+        if (this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchSection && s.node) {
           let r = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (r = this.getClosestGridPoint(r)), s.node.stretchSections(
             u.Left,
@@ -5084,20 +5084,20 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         S();
       })
     ), l.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${_}px`).on(I.MouseOver, (i, s) => {
-      this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && S(T.NSResize);
+      this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && S(E.NSResize);
     }).on(I.MouseOut, (i, s) => {
-      this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && S();
+      this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && S();
     }).call(
-      E.drag().on(A.Start, (i, s) => {
-        this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && s.node ? (S(T.NSResize), this.currentAction = new Y(
+      L.drag().on(A.Start, (i, s) => {
+        this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && s.node ? (S(E.NSResize), this.currentAction = new X(
           this,
-          k.StretchSection,
+          w.StretchSection,
           s.node.id,
           s.node.getGeometry(),
           s.node.getGeometry()
-        )) : S(T.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, s) => {
-        if (this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && s.node) {
+        if (this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && s.node) {
           const r = this.getPointerLocationRelativeToCanvas(i);
           s.node.stretchSections(
             u.Top,
@@ -5107,7 +5107,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
           );
         }
       }).on(A.End, (i, s) => {
-        if (this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && this.currentAction instanceof Y && this.currentAction.intent === k.StretchSection && s.node) {
+        if (this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchSection && s.node) {
           let r = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (r = this.getClosestGridPoint(r)), s.node.stretchSections(
             u.Top,
@@ -5119,20 +5119,20 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         S();
       })
     ), l.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${_}px`).on(I.MouseOver, (i, s) => {
-      this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && S(T.EWResize);
+      this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && S(E.EWResize);
     }).on(I.MouseOut, (i, s) => {
-      this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && S();
+      this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && S();
     }).call(
-      E.drag().on(A.Start, (i, s) => {
-        this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && s.node ? (S(T.EWResize), this.currentAction = new Y(
+      L.drag().on(A.Start, (i, s) => {
+        this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && s.node ? (S(E.EWResize), this.currentAction = new X(
           this,
-          k.StretchSection,
+          w.StretchSection,
           s.node.id,
           s.node.getGeometry(),
           s.node.getGeometry()
-        )) : S(T.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, s) => {
-        if (this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && s.node) {
+        if (this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && s.node) {
           const r = this.getPointerLocationRelativeToCanvas(i);
           s.node.stretchSections(
             u.Right,
@@ -5142,7 +5142,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
           );
         }
       }).on(A.End, (i, s) => {
-        if (this.canUserPerformAction(k.StretchSection) && s.getResizableX() && !s.removed && this.currentAction instanceof Y && this.currentAction.intent === k.StretchSection && s.node) {
+        if (this.canUserPerformAction(w.StretchSection) && s.getResizableX() && !s.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchSection && s.node) {
           let r = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (r = this.getClosestGridPoint(r)), s.node.stretchSections(
             u.Right,
@@ -5154,20 +5154,20 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         S();
       })
     ), l.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${_}px`).on(I.MouseOver, (i, s) => {
-      this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && S(T.NSResize);
+      this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && S(E.NSResize);
     }).on(I.MouseOut, (i, s) => {
-      this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && S();
+      this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && S();
     }).call(
-      E.drag().on(A.Start, (i, s) => {
-        this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && s.node ? (S(T.NSResize), this.currentAction = new Y(
+      L.drag().on(A.Start, (i, s) => {
+        this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && s.node ? (S(E.NSResize), this.currentAction = new X(
           this,
-          k.StretchSection,
+          w.StretchSection,
           s.node.id,
           s.node.getGeometry(),
           s.node.getGeometry()
-        )) : S(T.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, s) => {
-        if (this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && s.node) {
+        if (this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && s.node) {
           const r = this.getPointerLocationRelativeToCanvas(i);
           s.node.stretchSections(
             u.Bottom,
@@ -5177,7 +5177,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
           );
         }
       }).on(A.End, (i, s) => {
-        if (this.canUserPerformAction(k.StretchSection) && s.getResizableY() && !s.removed && this.currentAction instanceof Y && this.currentAction.intent === k.StretchSection && s.node) {
+        if (this.canUserPerformAction(w.StretchSection) && s.getResizableY() && !s.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchSection && s.node) {
           let r = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (r = this.getClosestGridPoint(r)), s.node.stretchSections(
             u.Bottom,
@@ -5203,7 +5203,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     t && t.length > 0 && (e = e.filter((i) => t.includes(i.id)));
     const a = l.merge(e);
     n.remove(), l.on(I.MouseOver, (i, s) => {
-      !this.unfinishedConnection && !this.dragging && (this.userHighlight.focusOn(s), this.diagramEvent$.next(new q(s))), this.unfinishedConnection && (// can start at the starting port
+      !this.unfinishedConnection && !this.dragging && (this.userHighlight.focusOn(s), this.diagramEvent$.next(new J(s))), this.unfinishedConnection && (// can start at the starting port
       this.unfinishedConnection.type.canStartFromType(
         this.unfinishedConnection.start?.getNode()?.type?.id || ""
       ) && this.unfinishedConnection.start?.allowsOutgoing && // can end at the ending port
@@ -5215,9 +5215,9 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
       ) && s.allowsOutgoing && // can end at the starting port
       this.unfinishedConnection.type.canFinishOnType(
         this.unfinishedConnection.start?.getNode()?.type?.id || ""
-      ) && this.unfinishedConnection.start?.allowsIncoming || S(T.NoDrop));
+      ) && this.unfinishedConnection.start?.allowsIncoming || S(E.NoDrop));
     }).on(I.MouseOut, () => {
-      this.unfinishedConnection && S(T.Grabbing);
+      this.unfinishedConnection && S(E.Grabbing);
     }).on(I.Click, (i, s) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const c = this.userSelection.all();
@@ -5238,10 +5238,10 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         return;
       }
       const r = new pt(i, s);
-      if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(k.ContextMenu)) {
+      if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(w.ContextMenu)) {
         i.preventDefault();
         const c = dt(s);
-        this.userHighlight.focusOn(c), this.diagramEvent$.next(new q(c)), this.userSelection.add(c), this.diagramEvent$.next(
+        this.userHighlight.focusOn(c), this.diagramEvent$.next(new J(c)), this.userSelection.add(c), this.diagramEvent$.next(
           new F([c], !0)
         ), this.contextMenu.open(i);
       }
@@ -5249,24 +5249,24 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
       const r = new mt(i, s);
       this.diagramEvent$.next(r);
     }).call(
-      E.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
-        this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(i) : this.canUserPerformAction(k.AddConnection) && (this.allowSharingPorts || s.incomingConnections.length === 0 && s.outgoingConnections.length === 0) && !s.removed ? (S(T.Grabbing), this.startConnection(s), this.unfinishedConnection && (this.unfinishedConnectionTracer = this.selectCanvasElements().append("path").attr("stroke", "none").attr("fill", "none"))) : S(T.NotAllowed);
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
+        this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(i) : this.canUserPerformAction(w.AddConnection) && (this.allowSharingPorts || s.incomingConnections.length === 0 && s.outgoingConnections.length === 0) && !s.removed ? (S(E.Grabbing), this.startConnection(s), this.unfinishedConnection && (this.unfinishedConnectionTracer = this.selectCanvasElements().append("path").attr("stroke", "none").attr("fill", "none"))) : S(E.NotAllowed);
       }).on(A.Drag, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
-        else if (this.canUserPerformAction(k.AddConnection) && !s.removed && this.unfinishedConnection !== void 0) {
+        else if (this.canUserPerformAction(w.AddConnection) && !s.removed && this.unfinishedConnection !== void 0) {
           const r = [i.x, i.y];
           this.unfinishedConnectionTracer?.attr(
             "d",
             le(
-              this.unfinishedConnection.look.shape || Q.look.shape,
+              this.unfinishedConnection.look.shape || tt.look.shape,
               this.unfinishedConnection.startCoords,
               r,
               this.unfinishedConnection.startDirection,
               this.unfinishedConnection.endDirection,
-              this.unfinishedConnection.look.thickness || Q.look.thickness,
-              this.unfinishedConnection.startMarkerLook?.width,
-              this.unfinishedConnection.endMarkerLook?.width
+              this.unfinishedConnection.type.defaultLook.thickness || tt.look.thickness,
+              this.unfinishedConnection.type.defaultStartMarkerLook?.width,
+              this.unfinishedConnection.type.defaultEndMarkerLook?.width
             )
           );
           const c = this.unfinishedConnectionTracer?.node();
@@ -5297,18 +5297,18 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.finishMultipleSelection(i);
         else {
-          if (this.canUserPerformAction(k.AddConnection) && !s.removed) {
+          if (this.canUserPerformAction(w.AddConnection) && !s.removed) {
             this.unfinishedConnectionTracer?.remove();
             const r = this.userHighlight.getFocus();
             if (r instanceof bt)
               this.finishConnection(r);
             else if (r instanceof ht && r.rootElement instanceof bt)
               this.finishConnection(r.rootElement);
-            else if (r instanceof z || r instanceof B || r instanceof ht) {
+            else if (r instanceof z || r instanceof G || r instanceof ht) {
               let c;
-              if (r instanceof z || r instanceof B)
+              if (r instanceof z || r instanceof G)
                 c = r;
-              else if (r.rootElement instanceof z || r.rootElement instanceof B)
+              else if (r.rootElement instanceof z || r.rootElement instanceof G)
                 c = r.rootElement;
               else {
                 this.dropConnection();
@@ -5345,7 +5345,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     t && t.length > 0 && (n = n.filter((s) => t.includes(s.id)));
     const i = a.merge(n);
     l.remove(), a.on(I.MouseOver, (s, r) => {
-      r.end !== void 0 && !this.dragging && (this.userHighlight.focusOn(r), this.diagramEvent$.next(new q(r)));
+      r.end !== void 0 && !this.dragging && (this.userHighlight.focusOn(r), this.diagramEvent$.next(new J(r)));
     }).on(I.Click, (s, r) => {
       if (!s.ctrlKey && !s.shiftKey) {
         const c = this.userSelection.all();
@@ -5360,12 +5360,12 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         return;
       }
       const c = new pt(s, r);
-      this.diagramEvent$.next(c), !c.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && (s.preventDefault(), this.userHighlight.focusOn(r), this.diagramEvent$.next(new q(r)), this.userSelection.add(r), this.diagramEvent$.next(new F([r], !0)), this.contextMenu.open(s));
+      this.diagramEvent$.next(c), !c.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && (s.preventDefault(), this.userHighlight.focusOn(r), this.diagramEvent$.next(new J(r)), this.userSelection.add(r), this.diagramEvent$.next(new F([r], !0)), this.contextMenu.open(s));
     }).on(I.DoubleClick, (s, r) => {
       const c = new mt(s, r);
       this.diagramEvent$.next(c);
     }).call(
-      E.drag().filter((s) => (this.secondaryButton = vt(s), !0)).on(A.Start, (s) => {
+      L.drag().filter((s) => (this.secondaryButton = vt(s), !0)).on(A.Start, (s) => {
         this.startMultipleSelection(s);
       }).on(A.Drag, (s) => {
         this.continueMultipleSelection(s);
@@ -5375,44 +5375,44 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     ), a.append("path").attr("class", "diagram-connection-path"), a.append("path").attr("class", "diagram-connection-path-box"), a.append("marker").attr("id", (s) => `${s.id}-start-marker`).attr("class", "diagram-connection-start-marker").append("image").attr("preserveAspectRatio", "none"), a.append("marker").attr("id", (s) => `${s.id}-end-marker`).attr("class", "diagram-connection-end-marker").append("image").attr("preserveAspectRatio", "none"), a.append("g").attr("class", "diagram-connection-start-label"), a.select("g.diagram-connection-start-label").append("path"), a.select("g.diagram-connection-start-label").append("text").style("user-select", "none"), a.append("g").attr("class", "diagram-connection-middle-label"), a.select("g.diagram-connection-middle-label").append("path"), a.select("g.diagram-connection-middle-label").append("text").style("user-select", "none"), a.append("g").attr("class", "diagram-connection-end-label"), a.select("g.diagram-connection-end-label").append("path"), a.select("g.diagram-connection-end-label").append("text").style("user-select", "none"), i.attr("opacity", (s) => s.removed ? 0.5 : 1).select("path.diagram-connection-path").attr(
       "d",
       (s) => le(
-        s.look.shape || Q.look.shape,
+        s.look.shape || tt.look.shape,
         s.startCoords,
         s.endCoords,
         s.startDirection,
         s.endDirection,
-        s.look.thickness || Q.look.thickness,
-        s.startMarkerLook?.width,
-        s.endMarkerLook?.width
+        s.type.defaultLook.thickness || tt.look.thickness,
+        s.type.defaultStartMarkerLook?.width,
+        s.type.defaultEndMarkerLook?.width
       )
     ).attr("marker-start", (s) => `url(#${s.id}-start-marker)`).attr("marker-end", (s) => `url(#${s.id}-end-marker)`).attr(
       "stroke",
-      (s) => s.look.color || Q.look.color
+      (s) => s.look.color || tt.look.color
     ).attr("stroke-width", (s) => `${s.look.thickness}px`).attr(
       "stroke-dasharray",
       (s) => fe(
-        s.look.style || Q.look.style,
-        s.look.thickness || Q.look.thickness
+        s.look.style || tt.look.style,
+        s.type.defaultLook.thickness || tt.look.thickness
       )
     ).attr("fill", "none"), i.select("path.diagram-connection-path-box").attr(
       "d",
       (s) => le(
-        s.look.shape || Q.look.shape,
+        s.look.shape || tt.look.shape,
         s.startCoords,
         s.endCoords,
         s.startDirection,
         s.endDirection,
-        s.look.thickness || Q.look.thickness,
-        s.startMarkerLook?.width,
-        s.endMarkerLook?.width
+        s.type.defaultLook.thickness || tt.look.thickness,
+        s.type.defaultStartMarkerLook?.width,
+        s.type.defaultEndMarkerLook?.width
       )
     ).attr("stroke", "transparent").attr("pointer-events", "stroke").attr(
       "stroke-width",
-      (s) => `${(s.look.thickness || Q.look.thickness) + ao}px`
+      (s) => `${(s.look.thickness || tt.look.thickness) + ao}px`
     ).attr(
       "stroke-dasharray",
       (s) => fe(
-        s.look.style || Q.look.style,
-        s.look.thickness || Q.look.thickness
+        s.look.style || tt.look.style,
+        s.type.defaultLook.thickness || tt.look.thickness
       )
     ).attr("fill", "none"), i.data().forEach((s) => {
       this.updateConnectionLabelsInView(s), this.updateConnectionMarkersInView(s);
@@ -5431,7 +5431,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     t && t.length > 0 && (e = e.filter((i) => t.includes(i.id)));
     const a = l.merge(e);
     n.remove(), l.style("box-sizing", "border-box").on(I.MouseOver, (i, s) => {
-      this.dragging || (this.userHighlight.focusOn(s), this.diagramEvent$.next(new q(s)));
+      this.dragging || (this.userHighlight.focusOn(s), this.diagramEvent$.next(new J(s)));
     }).on(I.Click, (i, s) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const c = this.userSelection.all();
@@ -5452,16 +5452,16 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         return;
       }
       const r = new pt(i, s);
-      if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(k.ContextMenu)) {
+      if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(w.ContextMenu)) {
         i.preventDefault();
         const c = dt(s);
-        this.userHighlight.focusOn(c), this.diagramEvent$.next(new q(c)), this.userSelection.add(c), this.diagramEvent$.next(
+        this.userHighlight.focusOn(c), this.diagramEvent$.next(new J(c)), this.userSelection.add(c), this.diagramEvent$.next(
           new F([c], !0)
         ), this.contextMenu.open(i);
       }
     }).on(I.DoubleClick, (i, s) => {
       const r = new mt(i, s);
-      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(k.EditField) && s.editable && !s.removed && (this.currentAction = new Ne(this, s.id, s.text, ""), this.createInputField(
+      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(w.EditField) && s.editable && !s.removed && (this.currentAction = new Ne(this, s.id, s.text, ""), this.createInputField(
         s.text,
         s.coords,
         s.width,
@@ -5476,32 +5476,32 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         }
       ));
     }).call(
-      E.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(i);
         else {
           let r;
-          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof B && (r = s.rootElement.node), r ? this.startMovingNode(i, r) : S(T.NotAllowed);
+          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof G && (r = s.rootElement.node), r ? this.startMovingNode(i, r) : S(E.NotAllowed);
         }
       }).on(A.Drag, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
         else {
           let r;
-          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof B && (r = s.rootElement.node), r ? this.continueMovingNode(i, r) : S(T.NotAllowed);
+          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof G && (r = s.rootElement.node), r ? this.continueMovingNode(i, r) : S(E.NotAllowed);
         }
       }).on(A.End, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.finishMultipleSelection(i);
         else {
           let r;
-          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof B && (r = s.rootElement.node), r ? this.finishMovingNode(i, r) : S();
+          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof G && (r = s.rootElement.node), r ? this.finishMovingNode(i, r) : S();
         }
         this.secondaryButton = !1;
       })
     ).append("xhtml:div").style("width", "100%").style("height", "100%").style("display", "flex").append("xhtml:p").style("box-sizing", "border-box").style("outline", 0).style("margin", 0).style("border", 0).style("padding", 0).style("user-select", "none").style("font-kerning", "none").style("white-space", "nowrap"), a.attr("x", 0).attr("y", 0).attr("width", (i) => `${i.width}px`).attr("height", (i) => `${i.height}px`).attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1).select("div").style(
       "justify-content",
-      (i) => i.horizontalAlign === Tt.Center ? "center" : i.horizontalAlign === Tt.Right ? "flex-end" : "flex-start"
+      (i) => i.horizontalAlign === Et.Center ? "center" : i.horizontalAlign === Et.Right ? "flex-end" : "flex-start"
     ).style(
       "align-items",
       (i) => i.verticalAlign === Zt.Center ? "center" : i.verticalAlign === Zt.Bottom ? "end" : "start"
@@ -5513,7 +5513,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
       (i) => i.fit ? "default" : `${Pe(i.width, i.height, i.orientation)[1]}px`
     ).style("overflow", (i) => i.fit ? "default" : "clip").style("text-overflow", (i) => i.fit ? "default" : "ellipsis").style(
       "text-align",
-      (i) => i.horizontalAlign === Tt.Center ? "center" : i.horizontalAlign === Tt.Right ? "end" : "start"
+      (i) => i.horizontalAlign === Et.Center ? "center" : i.horizontalAlign === Et.Right ? "end" : "start"
     ).style("transform", (i) => `rotate(${i.orientation}deg)`).style("font-size", (i) => `${i.fontSize}px`).style(
       "font-family",
       (i) => i.fontFamily || "'Wonder Unit Sans', sans-serif"
@@ -5540,12 +5540,12 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         return;
       }
       const r = new pt(i, s);
-      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && (i.preventDefault(), this.contextMenu.open(i));
+      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && (i.preventDefault(), this.contextMenu.open(i));
     }).on(I.DoubleClick, (i, s) => {
       const r = new mt(i, s);
       this.diagramEvent$.next(r);
     }).call(
-      E.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i) => {
         (this.multipleSelectionOn || this.secondaryButton) && this.startMultipleSelection(i);
       }).on(A.Drag, (i) => {
         (this.multipleSelectionOn || this.secondaryButton) && this.continueMultipleSelection(i);
@@ -5565,7 +5565,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     );
     const n = e.exit(), l = e.enter().append("foreignObject").attr("id", (i) => i.id).attr("class", "diagram-decorator");
     t && t.length > 0 && (e = e.filter((i) => t.includes(i.id))), l.merge(e).attr("width", (i) => `${i.width}px`).attr("height", (i) => `${i.height}px`).attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).html((i) => i.html), n.remove(), l.on(I.MouseOver, (i, s) => {
-      this.dragging || (this.userHighlight.focusOn(s), this.diagramEvent$.next(new q(s)));
+      this.dragging || (this.userHighlight.focusOn(s), this.diagramEvent$.next(new J(s)));
     }).on(I.Click, (i, s) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const r = this.userSelection.all();
@@ -5588,11 +5588,11 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         return;
       }
       const r = new pt(i, s);
-      if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && s.rootElement) {
+      if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && s.rootElement) {
         i.preventDefault();
         const c = dt(s.rootElement);
         this.userHighlight.focusOn(c), this.diagramEvent$.next(
-          new q(c)
+          new J(c)
         ), this.userSelection.add(c), this.diagramEvent$.next(
           new F([c], !0)
         ), this.contextMenu.open(i);
@@ -5601,26 +5601,26 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
       const r = new mt(i, s);
       this.diagramEvent$.next(r);
     }).call(
-      E.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(i);
         else {
           let r;
-          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof B && (r = s.rootElement.node), r ? this.startMovingNode(i, r) : S(T.NotAllowed);
+          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof G && (r = s.rootElement.node), r ? this.startMovingNode(i, r) : S(E.NotAllowed);
         }
       }).on(A.Drag, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
         else {
           let r;
-          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof B && (r = s.rootElement.node), r ? this.continueMovingNode(i, r) : S(T.NotAllowed);
+          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof G && (r = s.rootElement.node), r ? this.continueMovingNode(i, r) : S(E.NotAllowed);
         }
       }).on(A.End, (i, s) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.finishMultipleSelection(i);
         else {
           let r;
-          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof B && (r = s.rootElement.node), r ? this.finishMovingNode(i, r) : S();
+          s.rootElement instanceof z ? r = s.rootElement : s.rootElement instanceof G && (r = s.rootElement.node), r ? this.finishMovingNode(i, r) : S();
         }
         this.secondaryButton = !1;
       })
@@ -5637,40 +5637,40 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
       const i = l.getTotalLength();
       let s = 0, r = 0, c = 0, d = 0, h = 0, g = 0;
       if (a.backgroundColor === "#00000000") {
-        const f = t.endCoords[0] - t.startCoords[0], b = t.endCoords[1] - t.startCoords[1];
+        const f = t.endCoords[0] - t.startCoords[0], k = t.endCoords[1] - t.startCoords[1];
         switch (t.startDirection) {
           case u.Top:
-            s = f >= 0 ? -0.5 : 0.5, h = s, r = -0.5;
+            s = f >= 0 ? -0.5 : 0.5, h = s;
             break;
           case u.Bottom:
-            s = f >= 0 ? -0.5 : 0.5, h = s, r = 0.5;
+            s = f >= 0 ? -0.5 : 0.5, h = s;
             break;
           case u.Left:
-            s = -0.5, r = b > 0 ? -0.5 : 0.5, g = r;
+            r = k > 0 ? -0.5 : 0.5, g = r;
             break;
           case u.Right:
-            s = 0.5, r = b > 0 ? -0.5 : 0.5, g = r;
+            r = k > 0 ? -0.5 : 0.5, g = r;
             break;
           default:
             s = 0.5, h = s, r = -0.5, g = r;
         }
         switch (t.endDirection) {
           case u.Top:
-            h = f >= 0 ? 0.5 : -0.5, g = 0.5;
+            h = f >= 0 ? 0.5 : -0.5;
             break;
           case u.Bottom:
-            h = f >= 0 ? 0.5 : -0.5, g = -0.5;
+            h = f >= 0 ? 0.5 : -0.5;
             break;
           case u.Left:
-            h = -0.5, g = b > 0 ? 0.5 : -0.5;
+            g = k > 0 ? 0.5 : -0.5;
             break;
           case u.Right:
-            h = 0.5, g = b > 0 ? 0.5 : -0.5;
+            g = k > 0 ? 0.5 : -0.5;
             break;
           default:
             h = 0.5, g = -0.5;
         }
-        Math.abs(f) >= Math.abs(b) ? (c = f > 0 ? -0.5 : 0.5, d = b > 0 ? 0.5 : -0.5) : (c = f > 0 ? 0.5 : -0.5, d = b > 0 ? -0.5 : 0.5);
+        Math.abs(f) >= Math.abs(k) ? (c = f > 0 ? -0.5 : 0.5, d = k > 0 ? 0.5 : -0.5) : (c = f > 0 ? 0.5 : -0.5, d = k > 0 ? -0.5 : 0.5);
       }
       e.select("g.diagram-connection-start-label text").attr("x", 0).attr("y", a.fontSize / 3).attr("text-anchor", "middle").attr("font-family", a.fontFamily).attr("font-size", a.fontSize).attr(
         "fill",
@@ -5678,25 +5678,50 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
       ).style("font-kerning", "none").text(t.startLabel);
       const y = e.select("g.diagram-connection-start-label text").node()?.getBoundingClientRect();
       if (y) {
-        const f = t.startLabel ? y.width / this.zoomTransform.k + Vt(a) + Ot(a) : 0, b = t.startLabel ? y.height / this.zoomTransform.k + _t(a) + Rt(a) : 0, w = l.getPointAtLength(
-          Math.max(
-            j(a) + f / 2,
-            nt(a) + f / 2,
-            G(a) + b / 2,
-            tt(a) + b / 2
-          )
-        );
+        const f = t.startLabel ? y.width / this.zoomTransform.k + Vt(a) + Ot(a) : 0, k = t.startLabel ? y.height / this.zoomTransform.k + _t(a) + Rt(a) : 0;
+        let b;
+        switch (t.startDirection) {
+          case u.Left:
+            b = l.getPointAtLength(
+              et(a) + f / 2
+            );
+            break;
+          case u.Right:
+            b = l.getPointAtLength(
+              U(a) + f / 2
+            );
+            break;
+          case u.Top:
+            b = l.getPointAtLength(
+              K(a) + f / 2
+            );
+            break;
+          case u.Bottom:
+            b = l.getPointAtLength(
+              H(a) + f / 2
+            );
+            break;
+          default:
+            b = l.getPointAtLength(
+              Math.max(
+                U(a) + f / 2,
+                et(a) + f / 2,
+                H(a) + k / 2,
+                K(a) + k / 2
+              )
+            );
+        }
         e.select("g.diagram-connection-start-label path").attr(
           "d",
           Wt(
             -f / 2,
-            -b / 2,
+            -k / 2,
             f,
-            b
+            k
           )
         ).attr("fill", a.backgroundColor).attr("stroke", "none"), e.select("g.diagram-connection-start-label").attr(
           "transform",
-          `translate(${w.x + s * f},${w.y + r * b})`
+          `translate(${b.x + s * f},${b.y + r * k})`
         );
       }
       e.select("g.diagram-connection-middle-label text").attr("x", 0).attr("y", a.fontSize / 3).attr("text-anchor", "middle").attr("font-family", a.fontFamily).attr("font-size", a.fontSize).attr(
@@ -5705,18 +5730,18 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
       ).style("font-kerning", "none").text(t.middleLabel);
       const m = e.select("g.diagram-connection-middle-label text").node()?.getBoundingClientRect();
       if (m) {
-        const f = t.middleLabel ? m.width / this.zoomTransform.k + Vt(a) + Ot(a) : 0, b = t.middleLabel ? m.height / this.zoomTransform.k + _t(a) + Rt(a) : 0, w = l.getPointAtLength(i / 2);
+        const f = t.middleLabel ? m.width / this.zoomTransform.k + Vt(a) + Ot(a) : 0, k = t.middleLabel ? m.height / this.zoomTransform.k + _t(a) + Rt(a) : 0, b = l.getPointAtLength(i / 2);
         e.select("g.diagram-connection-middle-label path").attr(
           "d",
           Wt(
             -f / 2,
-            -b / 2,
+            -k / 2,
             f,
-            b
+            k
           )
         ).attr("fill", a.backgroundColor).attr("stroke", "none"), e.select("g.diagram-connection-middle-label").attr(
           "transform",
-          `translate(${w.x + c * f},${w.y + d * b})`
+          `translate(${b.x + c * f},${b.y + d * k})`
         );
       }
       e.select("g.diagram-connection-end-label text").attr("x", 0).attr("y", a.fontSize / 3).attr("text-anchor", "middle").attr("font-family", a.fontFamily).attr("font-size", a.fontSize).attr(
@@ -5725,25 +5750,50 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
       ).style("font-kerning", "none").text(t.endLabel);
       const p = e.select("g.diagram-connection-end-label text").node()?.getBoundingClientRect();
       if (p) {
-        const f = t.endLabel ? p.width / this.zoomTransform.k + Vt(a) + Ot(a) : 0, b = t.endLabel ? p.height / this.zoomTransform.k + _t(a) + Rt(a) : 0, w = l.getPointAtLength(
-          i - Math.max(
-            j(a) + f / 2,
-            nt(a) + f / 2,
-            G(a) + b / 2,
-            tt(a) + b / 2
-          )
-        );
+        const f = t.endLabel ? p.width / this.zoomTransform.k + Vt(a) + Ot(a) : 0, k = t.endLabel ? p.height / this.zoomTransform.k + _t(a) + Rt(a) : 0;
+        let b;
+        switch (t.endDirection) {
+          case u.Left:
+            b = l.getPointAtLength(
+              i - (et(a) + f / 2)
+            );
+            break;
+          case u.Right:
+            b = l.getPointAtLength(
+              i - (U(a) + f / 2)
+            );
+            break;
+          case u.Top:
+            b = l.getPointAtLength(
+              i - (K(a) + f / 2)
+            );
+            break;
+          case u.Bottom:
+            b = l.getPointAtLength(
+              i - (H(a) + f / 2)
+            );
+            break;
+          default:
+            b = l.getPointAtLength(
+              i - Math.max(
+                U(a) + f / 2,
+                et(a) + f / 2,
+                H(a) + k / 2,
+                K(a) + k / 2
+              )
+            );
+        }
         e.select("g.diagram-connection-end-label path").attr(
           "d",
           Wt(
             -f / 2,
-            -b / 2,
+            -k / 2,
             f,
-            b
+            k
           )
         ).attr("fill", a.backgroundColor).attr("stroke", "none"), e.select("g.diagram-connection-end-label").attr(
           "transform",
-          `translate(${w.x + h * f},${w.y + g * b})`
+          `translate(${b.x + h * f},${b.y + g * k})`
         );
       }
     }
@@ -5758,8 +5808,8 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     const e = this.model.fields.get(t);
     if (!e)
       return !1;
-    if (e.rootElement instanceof z || e.rootElement instanceof B) {
-      const n = this.minimumSizeOfField(e), l = n[0] + j(e.rootElement.type?.label) + nt(e.rootElement.type?.label) - e.rootElement.width, a = n[1] + G(e.rootElement.type?.label) + tt(e.rootElement.type?.label) - e.rootElement.height;
+    if (e.rootElement instanceof z || e.rootElement instanceof G) {
+      const n = this.minimumSizeOfField(e), l = n[0] + U(e.rootElement.type?.label) + et(e.rootElement.type?.label) - e.rootElement.width, a = n[1] + H(e.rootElement.type?.label) + K(e.rootElement.type?.label) - e.rootElement.height;
       return l <= 0 && a <= 0;
     }
     return !0;
@@ -5769,10 +5819,10 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     if (n) {
       if (n.rootElement instanceof z) {
         const l = this.minimumSizeOfField(n);
-        let a = l[0] + j(n.rootElement.type.label) + nt(n.rootElement.type.label) - n.rootElement.width, i = l[1] + G(n.rootElement.type.label) + tt(n.rootElement.type.label) - n.rootElement.height;
+        let a = l[0] + U(n.rootElement.type.label) + et(n.rootElement.type.label) - n.rootElement.width, i = l[1] + H(n.rootElement.type.label) + K(n.rootElement.type.label) - n.rootElement.height;
         this.snapToGrid && (a = Math.ceil(a / this.gridSize) * this.gridSize, i = Math.ceil(i / this.gridSize) * this.gridSize), n.rootElement.width + a < n.rootElement.type.minWidth && (a = n.rootElement.type.minWidth - n.rootElement.width), n.rootElement.height + i < n.rootElement.type.minHeight && (i = n.rootElement.type.minHeight - n.rootElement.height), (e !== !1 || a > 0) && n.rootElement.stretch(u.Right, a), (e !== !1 || i > 0) && n.rootElement.stretch(u.Bottom, i);
       }
-      if (n.rootElement instanceof B) {
+      if (n.rootElement instanceof G) {
         const l = this.minimumSizeOfField(n);
         let a = l[0], i = l[1];
         for (const d of n.rootElement.node?.sections || [])
@@ -5785,7 +5835,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
           )));
         l[0] < a && (l[0] = a), l[1] < i && (l[1] = i);
         const s = n.rootElement.type;
-        let r = l[0] + j(s?.label) + nt(s?.label) - n.rootElement.width, c = l[1] + G(s?.label) + tt(s?.label) - n.rootElement.height;
+        let r = l[0] + U(s?.label) + et(s?.label) - n.rootElement.width, c = l[1] + H(s?.label) + K(s?.label) - n.rootElement.height;
         this.snapToGrid && (r = Math.ceil(r / this.gridSize) * this.gridSize, c = Math.ceil(c / this.gridSize) * this.gridSize), n.rootElement.width + r < (n.rootElement.getMinWidth() || 0) && (r = (n.rootElement.getMinWidth() || 0) - n.rootElement.width), n.rootElement.height + c < (n.rootElement.getMinHeight() || 0) && (c = (n.rootElement.getMinHeight() || 0) - n.rootElement.height), (e || r > 0) && n.rootElement.node?.stretchSections(
           u.Right,
           r,
@@ -5819,10 +5869,10 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     }
   }
   selectRoot() {
-    return E.select(this.diagramRoot);
+    return L.select(this.diagramRoot);
   }
   selectSVGElement() {
-    return E.select(this.diagramRoot).select("svg");
+    return L.select(this.diagramRoot).select("svg");
   }
   selectCanvasView() {
     return this.selectSVGElement().select(".daga-canvas-view");
@@ -5950,8 +6000,8 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
     }).on(I.Input, () => {
       const p = h.property("value");
       h.attr("cols", ki(p) + 1), h.attr("rows", wi(p) + 1), h.style("width", ""), h.style("height", ""), g = h.property("scrollWidth") + 1, y = h.property("scrollHeight") + 1;
-      const f = Math.max(g, n), b = Math.max(y, l);
-      d?.attr("width", `${f}px`), h.style("width", `${f}px`), d?.attr("height", `${b}px`), h.style("height", `${b}px`), r && r(p);
+      const f = Math.max(g, n), k = Math.max(y, l);
+      d?.attr("width", `${f}px`), h.style("width", `${f}px`), d?.attr("height", `${k}px`), h.style("height", `${k}px`), r && r(p);
     }).on(I.Click, (p) => {
       p.stopPropagation();
     }).on(I.FocusOut, () => {
@@ -5978,8 +6028,8 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
    * Method to call to start the moving of a node triggered by a user drag event.
    */
   startMovingNode(t, e) {
-    if (this.canUserPerformAction(k.MoveNode) && !e.removed)
-      if (S(T.Grabbing), this.draggingFrom = [t.x, t.y], e.selected && this.userSelection.count((n) => n instanceof z) > 1)
+    if (this.canUserPerformAction(w.MoveNode) && !e.removed)
+      if (S(E.Grabbing), this.draggingFrom = [t.x, t.y], e.selected && this.userSelection.count((n) => n instanceof z) > 1)
         this.currentAction = new re(
           this,
           this.userSelection.filter((n) => n instanceof z).map((n) => n.id),
@@ -5987,9 +6037,9 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         );
       else {
         const n = e.getLastAncestor();
-        this.currentAction = new Y(
+        this.currentAction = new X(
           this,
-          k.MoveNode,
+          w.MoveNode,
           e.id,
           e.getGeometry(),
           e.getGeometry(),
@@ -5999,13 +6049,13 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
         );
       }
     else
-      S(T.NotAllowed);
+      S(E.NotAllowed);
   }
   /**
    * Method to call to continue the moving of a node triggered by a user drag event.
    */
   continueMovingNode(t, e) {
-    if (this.canUserPerformAction(k.MoveNode) && (this.currentAction instanceof re || this.currentAction instanceof Y) && !e.removed) {
+    if (this.canUserPerformAction(w.MoveNode) && (this.currentAction instanceof re || this.currentAction instanceof X) && !e.removed) {
       const n = [
         t.x - e.width / 2,
         t.y - e.height / 2
@@ -6020,7 +6070,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
    * Method to call to finish the moving of a node triggered by a user drag event.
    */
   finishMovingNode(t, e) {
-    if (this.canUserPerformAction(k.MoveNode) && !e.removed && (this.draggingFrom[0] !== t.x || this.draggingFrom[1] !== t.y)) {
+    if (this.canUserPerformAction(w.MoveNode) && !e.removed && (this.draggingFrom[0] !== t.x || this.draggingFrom[1] !== t.y)) {
       let n = [
         t.x - e.width / 2,
         t.y - e.height / 2
@@ -6034,7 +6084,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
           l[0] - e.coords[0],
           l[1] - e.coords[1]
         ]) : e.move(l);
-      } else if (this.currentAction instanceof Y) {
+      } else if (this.currentAction instanceof X) {
         e.move(n);
         const a = this.model.nodes.getAtCoordinates(t.x, t.y).filter((r) => r.id !== e.id && !r.isDescendantOf(e)).filter(
           (r) => r.type.childrenTypes.includes(e.type.id)
@@ -6070,7 +6120,7 @@ const ro = (o) => o * Math.PI / 180, Pe = (o, t, e) => {
   }
   continueMultipleSelection(t) {
     const e = this.getPointerLocationRelativeToCanvas(t);
-    (this.draggingFrom[0] !== e[0] || this.draggingFrom[1] !== e[1]) && (S(T.Crosshair), this.multipleSelectionContainer?.attr(
+    (this.draggingFrom[0] !== e[0] || this.draggingFrom[1] !== e[1]) && (S(E.Crosshair), this.multipleSelectionContainer?.attr(
       "x",
       Math.min(this.draggingFrom[0], e[0]) * this.zoomTransform.k + this.zoomTransform.x
     )?.attr(
@@ -6243,7 +6293,7 @@ class co {
 }
 const Qe = (o, t, e, n) => {
   const l = t.getClosestEmptyCoordinate(e);
-  t.set(l, o), U(n, o);
+  t.set(l, o), Y(n, o);
   for (const a of o.getAdjacentNodes())
     n.includes(a) && Qe(
       a,
@@ -6269,7 +6319,7 @@ class ho {
             l[h.id]
           ),
           h
-        ), U(n, h);
+        ), Y(n, h);
         const g = h.getAdjacentNodes();
         for (const y of g)
           n.includes(y) && (d.push(y), l[y.id] = l[h.id]);
@@ -6303,14 +6353,14 @@ class se {
     const e = this.gapSize !== void 0 ? this.gapSize : (t.canvas?.gridSize || 0) * 2;
     let n = t.nodes.filter((s) => !s.parent);
     const l = n[0];
-    U(n, l);
+    Y(n, l);
     const a = [[l]];
     for (; n.length > 0; ) {
       const s = a[a.length - 1], r = [];
       for (const c of s) {
         const d = c.getAdjacentNodes();
         for (const h of d)
-          n.includes(h) && (U(n, h), r.push(h));
+          n.includes(h) && (Y(n, h), r.push(h));
       }
       r.length > 0 ? a.push(r) : (a.push(n), n = []);
     }
@@ -6354,16 +6404,16 @@ class go {
           ], f = [
             m.coords[0] + m.width / 2,
             m.coords[1] + m.height / 2
-          ], b = Oe(
+          ], k = Oe(
             g.coords,
             m.coords
-          ), w = [m.coords[0], m.coords[1]];
-          if (y.includes(m) && b > 0 && (b > e + (Math.max(g.width, g.height) + Math.max(m.width, m.height)) / 2 ? (w[0] = w[0] - (f[0] - p[0]) * a, w[1] = w[1] - (f[1] - p[1]) * a) : (w[0] = w[0] + (f[0] - p[0]) * s, w[1] = w[1] + (f[1] - p[1]) * s)), b > 0) {
-            const M = i / (b * b);
-            w[0] = w[0] + M * (f[0] - p[0]) / b, w[1] = w[1] + M * (f[1] - p[1]) / b;
+          ), b = [m.coords[0], m.coords[1]];
+          if (y.includes(m) && k > 0 && (k > e + (Math.max(g.width, g.height) + Math.max(m.width, m.height)) / 2 ? (b[0] = b[0] - (f[0] - p[0]) * a, b[1] = b[1] - (f[1] - p[1]) * a) : (b[0] = b[0] + (f[0] - p[0]) * s, b[1] = b[1] + (f[1] - p[1]) * s)), k > 0) {
+            const M = i / (k * k);
+            b[0] = b[0] + M * (f[0] - p[0]) / k, b[1] = b[1] + M * (f[1] - p[1]) / k;
           } else
-            w[0] = w[0] + r * (Math.random() * 2 - 1), w[1] = w[1] + r * (Math.random() * 2 - 1);
-          w[0] = w[0] - (f[0] - h[0]) * c, w[1] = w[1] - (f[1] - h[1]) * c, w[0] - m.coords[0] > d ? w[0] = m.coords[0] + d : w[0] - m.coords[0] < -d && (w[0] = m.coords[0] - d), w[1] - m.coords[1] > d ? w[1] = m.coords[1] + d : w[1] - m.coords[1] < -d && (w[1] = m.coords[1] - d), m.move(w);
+            b[0] = b[0] + r * (Math.random() * 2 - 1), b[1] = b[1] + r * (Math.random() * 2 - 1);
+          b[0] = b[0] - (f[0] - h[0]) * c, b[1] = b[1] - (f[1] - h[1]) * c, b[0] - m.coords[0] > d ? b[0] = m.coords[0] + d : b[0] - m.coords[0] < -d && (b[0] = m.coords[0] - d), b[1] - m.coords[1] > d ? b[1] = m.coords[1] + d : b[1] - m.coords[1] < -d && (b[1] = m.coords[1] - d), m.move(b);
         }
       }
     }
@@ -6413,7 +6463,7 @@ class fo {
       const h = [d], g = [d];
       for (; h.length > 0; ) {
         const y = h[0];
-        h.splice(0, 1), s.includes(y) && (r.push(y), U(s, y));
+        h.splice(0, 1), s.includes(y) && (r.push(y), Y(s, y));
         const m = y.getAdjacentNodes();
         for (const p of m)
           g.includes(p) || (h.push(p), g.push(p));
@@ -6423,7 +6473,7 @@ class fo {
     } else
       r.push(s[0]);
     for (const d of r)
-      U(a, d), i.push([d]);
+      Y(a, d), i.push([d]);
     for (i.push([]), a.sort((d, h) => h.type.priority - d.type.priority); a.length > 0; ) {
       const d = a[0];
       a.splice(0, 1);
@@ -6438,8 +6488,8 @@ class fo {
           break;
         } else {
           const f = m.getAdjacentNodes();
-          for (const b of f)
-            g.includes(b) || (h.push(b), g.push(b));
+          for (const k of f)
+            g.includes(k) || (h.push(k), g.push(k));
         }
       }
       y || i[i.length - 1].push(d);
@@ -6592,17 +6642,17 @@ const Se = ({
   visibleValue: s,
   onCollapse: r
 }) => {
-  const [c, d] = H(n), h = () => {
+  const [c, d] = B(n), h = () => {
     if (!l) {
       const y = !c;
       d(y), r?.(y);
       let m;
       if (typeof t == "string")
-        m = E.select(t), e && (m = m.select(e));
+        m = L.select(t), e && (m = m.select(e));
       else {
         const p = t;
         if (!p) throw new Error("collapsableSelector is not a valid ref");
-        m = E.select(p.current), e && (m = m.select(e));
+        m = L.select(p.current), e && (m = m.select(e));
       }
       m.style(a, y ? i : s);
     }
@@ -6627,7 +6677,7 @@ const Se = ({
     }
   ) });
 }, bo = () => {
-  const o = Ht(It), t = rt(null), [e, n] = H([]);
+  const o = Ht(It), t = rt(null), [e, n] = B([]);
   ai(o.validatorChange$, o.diagramChange$).pipe(
     li(() => l())
   ).subscribe();
@@ -6689,26 +6739,26 @@ const Se = ({
   value: e,
   onChange: n
 }) => {
-  const l = rt(null), [a, i] = H("");
+  const l = rt(null), [a, i] = B("");
   let s;
-  const [r, c] = H([]), [d, h] = H([]), [g, y] = H([]), [m, p] = H([]), [f, b] = H(!1);
+  const [r, c] = B([]), [d, h] = B([]), [g, y] = B([]), [m, p] = B([]), [f, k] = B(!1);
   Ct(() => {
     i(t.find((x) => St(x.key, e))?.label || "");
   }, [e, t]);
-  const w = (x) => {
+  const b = (x) => {
     if (!o)
       switch (x.key) {
         case Z.PageDown:
-          s === void 0 ? (P(0), L(0)) : (P(s + 5), L(s)), x.preventDefault();
+          s === void 0 ? (P(0), T(0)) : (P(s + 5), T(s)), x.preventDefault();
           break;
         case Z.ArrowDown:
-          s === void 0 ? (P(0), L(0)) : (P(s + 1), L(s)), x.preventDefault();
+          s === void 0 ? (P(0), T(0)) : (P(s + 1), T(s)), x.preventDefault();
           break;
         case Z.PageUp:
-          s === void 0 ? (P(t.length - 1), L(t.length - 1)) : (P(s - 5), L(s)), x.preventDefault();
+          s === void 0 ? (P(t.length - 1), T(t.length - 1)) : (P(s - 5), T(s)), x.preventDefault();
           break;
         case Z.ArrowUp:
-          s === void 0 ? (P(t.length - 1), L(t.length - 1)) : (P(s - 1), L(s)), x.preventDefault();
+          s === void 0 ? (P(t.length - 1), T(t.length - 1)) : (P(s - 1), T(s)), x.preventDefault();
           break;
         case Z.Escape:
           R(), x.preventDefault();
@@ -6724,47 +6774,47 @@ const Se = ({
       const x = Re(a.trim());
       c([]), h([]), y([]), p([]);
       for (const D of t) {
-        const st = Re(D.label).indexOf(x);
-        if (st >= 0) {
-          const Bt = D.label.substring(0, st), K = D.label.substring(
-            st,
-            st + x.length
+        const nt = Re(D.label).indexOf(x);
+        if (nt >= 0) {
+          const Bt = D.label.substring(0, nt), q = D.label.substring(
+            nt,
+            nt + x.length
           ), wt = D.label.substring(
-            st + x.length
+            nt + x.length
           );
-          c((ot) => [...ot, D]), h((ot) => [
-            ...ot,
+          c((st) => [...st, D]), h((st) => [
+            ...st,
             Bt
-          ]), y((ot) => [
-            ...ot,
-            K
-          ]), p((ot) => [
-            ...ot,
+          ]), y((st) => [
+            ...st,
+            q
+          ]), p((st) => [
+            ...st,
             wt
           ]);
         }
       }
-      b(!0);
+      k(!0);
     }
   }, R = () => {
-    b(!1);
+    k(!1);
   }, P = (x) => {
     if (!o) {
       if (s = x, x === void 0)
         return;
       x < 0 && (s = 0), x >= t.length && (s = t.length - 1);
     }
-  }, J = () => {
+  }, Q = () => {
     setTimeout(() => {
       R();
     }, ko);
-  }, L = (x) => {
+  }, T = (x) => {
     const D = l.current?.querySelectorAll("li")[x];
     D && D.scrollIntoView({ block: "center" });
   }, C = () => {
-    o || (i(""), b(!1), s = void 0);
+    o || (i(""), k(!1), s = void 0);
   }, O = (x) => {
-    o || (i(x.label), b(!1), s = void 0, n(x.key));
+    o || (i(x.label), k(!1), s = void 0, n(x.key));
   };
   return /* @__PURE__ */ $(
     "div",
@@ -6778,9 +6828,9 @@ const Se = ({
             {
               value: a,
               disabled: o,
-              onKeyUp: w,
+              onKeyUp: b,
               onFocus: M,
-              onBlur: J,
+              onBlur: Q,
               onChange: (x) => i(x.target.value)
             }
           ),
@@ -6813,18 +6863,18 @@ const Se = ({
   value: n,
   onChange: l
 }) => {
-  const [a, i] = H(), [s, r] = H([]), [c, d] = H([]);
+  const [a, i] = B(), [s, r] = B([]), [c, d] = B([]);
   Ct(() => {
-    const f = n.length === 0, b = n.map((w) => wo(e, w));
-    r(b), f && l(n), p();
+    const f = n.length === 0, k = n.map((b) => wo(e, b));
+    r(k), f && l(n), p();
   }, [n, e]);
   const h = (f) => {
-    for (const b of n)
-      if (b === f)
+    for (const k of n)
+      if (k === f)
         return !0;
     return !1;
   }, g = (f) => {
-    n.length > f && (n.splice(f, 1), r(s.filter((b, w) => w !== f)), l(n), p());
+    n.length > f && (n.splice(f, 1), r(s.filter((k, b) => b !== f)), l(n), p());
   }, y = () => {
     a !== void 0 && (t || !h(a)) && (l(n.concat(a)), m());
   }, m = () => {
@@ -6832,23 +6882,23 @@ const Se = ({
   }, p = () => {
     if (!t) {
       const f = [];
-      for (const b of e)
-        h(b.key) || f.push(b);
+      for (const k of e)
+        h(k.key) || f.push(k);
       d(f);
     }
   };
   return /* @__PURE__ */ $("div", { children: [
-    n.map((f, b) => /* @__PURE__ */ $("div", { className: "daga-value-item-element", children: [
-      /* @__PURE__ */ v("span", { className: "daga-input", children: s[b] }),
+    n.map((f, k) => /* @__PURE__ */ $("div", { className: "daga-value-item-element", children: [
+      /* @__PURE__ */ v("span", { className: "daga-input", children: s[k] }),
       !o && /* @__PURE__ */ v(
         "button",
         {
           className: "daga-property-button",
-          onClick: () => g(b),
+          onClick: () => g(k),
           children: /* @__PURE__ */ v("div", { className: "daga-icon daga-close-icon" })
         }
       )
-    ] }, b)),
+    ] }, k)),
     !o && /* @__PURE__ */ $("div", { className: "daga-value-item-input", children: [
       /* @__PURE__ */ v("div", { className: "daga-input daga-relatively-positioned", children: /* @__PURE__ */ v(
         ii,
@@ -6868,7 +6918,7 @@ const Se = ({
   value: e,
   onChange: n
 }) => {
-  const [l, a] = H(""), i = (g) => {
+  const [l, a] = B(""), i = (g) => {
     for (const y of g || [])
       if (y === g)
         return !0;
@@ -6877,7 +6927,7 @@ const Se = ({
     e.length > g && n(e.filter((y, m) => m !== g));
   }, r = (g, y, m) => {
     const p = e.map(
-      (f, b) => b === y ? m === "blur" ? g.trim() : g : f
+      (f, k) => k === y ? m === "blur" ? g.trim() : g : f
     );
     n(p);
   }, c = () => {
@@ -6930,30 +6980,30 @@ const Se = ({
   value: t,
   onChange: e
 }) => {
-  const [n, l] = H(""), [a, i] = H(""), [s, r] = H({}), c = (f) => {
-    const b = {};
-    Object.keys(t).forEach((w) => {
-      w !== f && (b[w] = t[w]);
-    }), e(b);
-  }, d = (f, b, w) => {
-    const M = w === "blur" ? b.trim() : b;
-    if (w === "blur") {
+  const [n, l] = B(""), [a, i] = B(""), [s, r] = B({}), c = (f) => {
+    const k = {};
+    Object.keys(t).forEach((b) => {
+      b !== f && (k[b] = t[b]);
+    }), e(k);
+  }, d = (f, k, b) => {
+    const M = b === "blur" ? k.trim() : k;
+    if (b === "blur") {
       if (f !== M) {
         const R = {};
         Object.keys(t).forEach((P) => {
           P === f ? R[M] = t[P] : R[P] = t[P];
         }), e(R), r((P) => {
-          const J = { ...P };
-          return delete J[f], J;
+          const Q = { ...P };
+          return delete Q[f], Q;
         });
       }
     } else
       r((R) => ({
         ...R,
-        [f]: b
+        [f]: k
       }));
-  }, h = (f, b, w) => {
-    const M = w === "blur" ? b.trim() : b;
+  }, h = (f, k, b) => {
+    const M = b === "blur" ? k.trim() : k;
     if (M !== "") {
       const R = {};
       Object.keys(t).forEach((P) => {
@@ -6961,12 +7011,12 @@ const Se = ({
       }), e(R);
     }
   }, g = () => {
-    const f = n.trim(), b = a.trim();
-    if (f !== "" && b !== "") {
-      const w = {};
+    const f = n.trim(), k = a.trim();
+    if (f !== "" && k !== "") {
+      const b = {};
       Object.keys(t).forEach((M) => {
-        w[M] = t[M];
-      }), w[f] = b, e(w), l(""), i("");
+        b[M] = t[M];
+      }), b[f] = k, e(b), l(""), i("");
     }
   }, y = () => {
     l("");
@@ -6976,11 +7026,11 @@ const Se = ({
     f.key === "Enter" && g();
   };
   return /* @__PURE__ */ $("div", { children: [
-    Object.entries(t).map(([f, b], w) => /* @__PURE__ */ $("div", { className: "daga-value-item-element", children: [
+    Object.entries(t).map(([f, k], b) => /* @__PURE__ */ $("div", { className: "daga-value-item-element", children: [
       /* @__PURE__ */ v(
         "input",
         {
-          id: `key-${w}`,
+          id: `key-${b}`,
           className: "daga-input",
           type: "text",
           disabled: o,
@@ -6992,11 +7042,11 @@ const Se = ({
       /* @__PURE__ */ v(
         "input",
         {
-          id: `value-${w}`,
+          id: `value-${b}`,
           className: "daga-input",
           type: "text",
           disabled: o,
-          value: b,
+          value: k,
           onChange: (M) => h(f, M.target.value, "change"),
           onBlur: (M) => h(f, M.target.value, "blur")
         }
@@ -7045,7 +7095,7 @@ const Se = ({
   onValueChange: t,
   depth: e
 }) => {
-  const l = Ht(It).canUserPerformAction(k.UpdateValues) && o?.rootElement?.removed !== !0, a = (r) => "daga-property-name-" + r.replace(/\s/g, ""), i = (r) => {
+  const l = Ht(It).canUserPerformAction(w.UpdateValues) && o?.rootElement?.removed !== !0, a = (r) => "daga-property-name-" + r.replace(/\s/g, ""), i = (r) => {
     if (typeof r == "string")
       return r;
     if (r == null || isNaN(r.valueOf()))
@@ -7231,27 +7281,27 @@ const Se = ({
   const e = Ht(It), n = rt(null), l = (r) => "daga-property-name-" + r.replace(/\s/g, ""), a = () => {
     for (const r of o?.displayedProperties || []) {
       let c = 0, d = 0, h = 0;
-      const g = E.select(n.current).select(
+      const g = L.select(n.current).select(
         `.daga-property.${l(r.name)}.daga-depth-${t}`
       );
       g.select("button.daga-move-button").call(
-        E.drag().on(A.Start, (y) => {
-          S(T.Grabbing);
+        L.drag().on(A.Start, (y) => {
+          S(E.Grabbing);
           const m = e.getPointerLocationRelativeToScreen(y);
           if (m.length < 2 || isNaN(m[0]) || isNaN(m[1]))
             return;
           const p = g.node()?.getBoundingClientRect();
           c = p?.width || 0, d = p?.height || 0, g.style("position", "fixed").style("left", `${m[0] - c / 2}px`).style("top", `${m[1] - d / 2}px`).style("width", `${c}px`).style("height", `${d}px`).style("z-index", 1);
         }).on(A.Drag, (y) => {
-          S(T.Grabbing);
+          S(E.Grabbing);
           const m = e.getPointerLocationRelativeToScreen(y);
-          m.length < 2 || isNaN(m[0]) || isNaN(m[1]) || (g.style("position", "fixed").style("left", `${m[0] - c / 2}px`).style("top", `${m[1] - d / 2}px`).style("width", `${c}px`).style("height", `${d}px`).style("z-index", 1), E.select(n.current).select(
+          m.length < 2 || isNaN(m[0]) || isNaN(m[1]) || (g.style("position", "fixed").style("left", `${m[0] - c / 2}px`).style("top", `${m[1] - d / 2}px`).style("width", `${c}px`).style("height", `${d}px`).style("z-index", 1), L.select(n.current).select(
             `.daga-dropbar.daga-index-${h}.daga-depth-${t}`
-          ).style("visibility", "hidden").style("height", 0), h = i(m), E.select(n.current).select(
+          ).style("visibility", "hidden").style("height", 0), h = i(m), L.select(n.current).select(
             `.daga-dropbar.daga-index-${h}.daga-depth-${t}`
           ).style("visibility", "visible").style("height", "0.25rem"));
         }).on(A.End, (y) => {
-          S(T.Auto), g.style("position", "relative").style("left", 0).style("top", 0).style("z-index", 0).style("width", "unset").style("height", "unset"), E.select(n.current).select(
+          S(E.Auto), g.style("position", "relative").style("left", 0).style("top", 0).style("z-index", 0).style("width", "unset").style("height", "unset"), L.select(n.current).select(
             `.daga-dropbar.daga-index-${h}.daga-depth-${t}`
           ).style("visibility", "hidden").style("height", 0);
           const m = e.getPointerLocationRelativeToScreen(y);
@@ -7269,7 +7319,7 @@ const Se = ({
   }, i = (r) => {
     const c = o?.propertySet.propertyList || [], d = [];
     for (let h = 0; h <= c.length; ++h) {
-      const g = E.select(n.current).select(
+      const g = L.select(n.current).select(
         `.daga-dropbar.daga-index-${h}.daga-depth-${t}`
       ).node()?.getBoundingClientRect();
       g && d.push([
@@ -7342,8 +7392,8 @@ const Se = ({
       r.name
     ))
   ] });
-}, Ao = (o) => Array.isArray(o) ? o.join(", ") : Ei(o) ? Object.entries(o).map((t) => t.map((e) => JSON.stringify(e)).join(": ")).join(", ") : o instanceof Date ? o.toLocaleString() : o == null ? "" : "" + o, xo = ({ location: o, direction: t, width: e, height: n, title: l, valueSet: a, onValueChange: i }) => {
-  const s = rt(null), [r, c] = H(!1), [d, h] = H(!1), g = () => E.select(s.current);
+}, Ao = (o) => Array.isArray(o) ? o.join(", ") : Li(o) ? Object.entries(o).map((t) => t.map((e) => JSON.stringify(e)).join(": ")).join(", ") : o instanceof Date ? o.toLocaleString() : o == null ? "" : "" + o, xo = ({ location: o, direction: t, width: e, height: n, title: l, valueSet: a, onValueChange: i }) => {
+  const s = rt(null), [r, c] = B(!1), [d, h] = B(!1), g = () => L.select(s.current);
   return Ct(() => {
     if (s.current)
       switch (t) {
@@ -7406,65 +7456,65 @@ const Se = ({
       ]
     }
   ) });
-}, Eo = 6, To = (o) => {
-  const t = Ht(It), [e, n] = H(
+}, Lo = 6, Eo = (o) => {
+  const t = Ht(It), [e, n] = B(
     o.currentPalette || o.palettes[0]
-  ), [l, a] = H(0), [i, s] = H(
+  ), [l, a] = B(0), [i, s] = B(
     void 0
   ), r = rt(null), c = (p) => {
     if (n(p), d().selectAll("*").remove(), a(t.getPriorityThreshold() || 0), p.categories && h(p.categories), p.templates)
       for (const f of p.templates)
         g(f);
-  }, d = () => E.select(r.current).select(".daga-palette-view"), h = (p) => {
+  }, d = () => L.select(r.current).select(".daga-palette-view"), h = (p) => {
     const f = d().append("select").style("width", "100%").style("height", "2rem").style("padding", "0.5rem").style("border-radius", "0.25rem").style("background-color", "#f7f8fc").style("border", "1px solid #e6e6e6");
     f.append("option").attr("value", "").text("(None selected)");
-    for (const b in p)
-      f.append("option").attr("value", b).text(b);
+    for (const k in p)
+      f.append("option").attr("value", k).text(k);
     f.on(I.Change, () => {
       i && d().selectAll(".daga-template-container.daga-in-category").remove();
-      const b = f.property("value");
-      s(b);
-      const w = p[b] || [];
-      for (const M of w)
+      const k = f.property("value");
+      s(k);
+      const b = p[k] || [];
+      for (const M of b)
         g(M, "daga-in-category");
     }), i && (f.property("value", i), f.dispatch(I.Change));
   }, g = (p, f) => {
     if (p.templateType === "node") {
-      const b = t.model.nodes.types.get(p.type);
-      b ? y(b, p, f) : console.error(`Could not find a node type called '${p.type}'`);
+      const k = t.model.nodes.types.get(p.type);
+      k ? y(k, p, f) : console.error(`Could not find a node type called '${p.type}'`);
     } else if (p.templateType === "connection") {
-      const b = t.model.connections.types.get(p.type);
-      b ? m(b, p, f) : console.error(
+      const k = t.model.connections.types.get(p.type);
+      k ? m(k, p, f) : console.error(
         `Could not find a connection type called '${p.type}'`
       );
     }
-  }, y = (p, f, b) => {
+  }, y = (p, f, k) => {
     if (l !== void 0 && p.priority < l)
       return;
-    const w = p.defaultLook.lookType === "shaped-look" ? p.defaultLook.borderThickness || 1 : 0, M = p.defaultHeight + w, R = p.defaultWidth + w, P = f.height || M, J = f.width || R, L = d().append("div").attr(
+    const b = p.defaultLook.lookType === "shaped-look" ? p.defaultLook.borderThickness || 1 : 0, M = p.defaultHeight + b, R = p.defaultWidth + b, P = f.height || M, Q = f.width || R, T = d().append("div").attr(
       "class",
-      `daga-template-container ${b !== void 0 ? b : ""}`
-    ).style("width", `${J}px`).style("height", `${P}px`).call(
-      E.drag().on(A.Drag, (O) => {
-        if (t.canUserPerformAction(k.AddNode)) {
+      `daga-template-container ${k !== void 0 ? k : ""}`
+    ).style("width", `${Q}px`).style("height", `${P}px`).call(
+      L.drag().on(A.Drag, (O) => {
+        if (t.canUserPerformAction(w.AddNode)) {
           const x = t.getPointerLocationRelativeToScreen(O);
           if (x.length < 2 || isNaN(x[0]) || isNaN(x[1]))
             return;
-          L.style("position", "fixed").style("left", `${x[0] - J / 2}px`).style("top", `${x[1] - P / 2}px`).style("z-index", 1);
+          T.style("position", "fixed").style("left", `${x[0] - Q / 2}px`).style("top", `${x[1] - P / 2}px`).style("z-index", 1);
         }
       }).on(A.Start, (O) => {
-        if (t.canUserPerformAction(k.AddNode)) {
-          S(T.Grabbing);
+        if (t.canUserPerformAction(w.AddNode)) {
+          S(E.Grabbing);
           const x = t.getPointerLocationRelativeToScreen(O);
           if (x.length < 2 || isNaN(x[0]) || isNaN(x[1]))
             return;
-          L.style("position", "fixed").style("left", `${x[0] - J / 2}px`).style("top", `${x[1] - P / 2}px`).style("z-index", 1), p.isUnique && t.model.nodes.find(
+          T.style("position", "fixed").style("left", `${x[0] - Q / 2}px`).style("top", `${x[1] - P / 2}px`).style("z-index", 1), p.isUnique && t.model.nodes.find(
             (D) => !D.removed && D.type.id === p.id
-          ) !== void 0 && S(T.NotAllowed);
+          ) !== void 0 && S(E.NotAllowed);
         }
       }).on(A.End, (O) => {
-        if (t.canUserPerformAction(k.AddNode)) {
-          if (S(T.Auto), L.style("position", "relative").style("left", 0).style("top", 0).style("z-index", "auto"), p.isUnique && t.model.nodes.find(
+        if (t.canUserPerformAction(w.AddNode)) {
+          if (S(E.Auto), T.style("position", "relative").style("left", 0).style("top", 0).style("z-index", "auto"), p.isUnique && t.model.nodes.find(
             (Ut) => !Ut.removed && Ut.type.id === p.id
           ) !== void 0)
             return;
@@ -7480,26 +7530,26 @@ const Se = ({
           const lt = t.getPointerLocationRelativeToCanvas(O);
           if (lt.length < 2 || isNaN(lt[0]) || isNaN(lt[1]))
             return;
-          let st = [
+          let nt = [
             lt[0] - p.defaultWidth / 2,
             lt[1] - p.defaultHeight / 2
           ];
-          t.snapToGrid && (st = t.getClosestGridPoint(st));
-          const K = t.model.nodes.getAtCoordinates(
+          t.snapToGrid && (nt = t.getClosestGridPoint(nt));
+          const q = t.model.nodes.getAtCoordinates(
             lt[0],
             lt[1]
           ).filter(
             (Ut) => Ut.type.childrenTypes.includes(p.id)
           ), wt = Ue(
-            K
-          ), ot = wt[wt.length - 1];
-          if (!p.canBeParentless && ot === void 0)
+            q
+          ), st = wt[wt.length - 1];
+          if (!p.canBeParentless && st === void 0)
             return;
-          const Gt = ot?.getLastAncestor(), Ce = new Ui(
+          const Gt = st?.getLastAncestor(), Ce = new Ui(
             t,
             p,
-            st,
-            ot?.id,
+            nt,
+            st?.id,
             Gt?.id,
             Gt?.getGeometry(),
             void 0,
@@ -7509,10 +7559,10 @@ const Se = ({
           Ce.do(), t?.actionStack.add(Ce), S();
         }
       })
-    ).append("svg").attr("class", `palette-node ${p.id}`).attr("viewBox", `0 0 ${R} ${M}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${J}px`).style("height", `${P}px`), C = f.look || p.defaultLook;
+    ).append("svg").attr("class", `palette-node ${p.id}`).attr("viewBox", `0 0 ${R} ${M}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${Q}px`).style("height", `${P}px`), C = f.look || p.defaultLook;
     switch (C.lookType) {
       case "shaped-look":
-        L.append("path").attr(
+        T.append("path").attr(
           "d",
           me(
             C.shape || Nt.Rectangle,
@@ -7524,33 +7574,33 @@ const Se = ({
         ).attr("fill", C.fillColor || "#FFFFFF").attr("stroke", C.borderColor || "#000000").attr("stroke-width", `${C.borderThickness}px`);
         break;
       case "image-look":
-        L.append("image").attr("x", 0).attr("y", 0).attr("width", p.defaultWidth).attr("height", p.defaultHeight).attr("href", C.backgroundImage).attr("preserveAspectRatio", "none");
+        T.append("image").attr("x", 0).attr("y", 0).attr("width", p.defaultWidth).attr("height", p.defaultHeight).attr("href", C.backgroundImage).attr("preserveAspectRatio", "none");
         break;
       case "stretchable-image-look":
-        L.append("image").attr("x", 0).attr("y", 0).attr("width", C.leftMargin).attr("height", C.topMargin).attr("href", C.backgroundImageTopLeft).attr("preserveAspectRatio", "none"), L.append("image").attr("x", C.leftMargin).attr("y", 0).attr(
+        T.append("image").attr("x", 0).attr("y", 0).attr("width", C.leftMargin).attr("height", C.topMargin).attr("href", C.backgroundImageTopLeft).attr("preserveAspectRatio", "none"), T.append("image").attr("x", C.leftMargin).attr("y", 0).attr(
           "width",
           p.defaultWidth - C.rightMargin - C.leftMargin
-        ).attr("height", C.topMargin).attr("href", C.backgroundImageTop).attr("preserveAspectRatio", "none"), L.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", 0).attr("width", C.rightMargin).attr("height", C.topMargin).attr("href", C.backgroundImageTopRight).attr("preserveAspectRatio", "none"), L.append("image").attr("x", 0).attr("y", C.topMargin).attr("width", C.leftMargin).attr(
+        ).attr("height", C.topMargin).attr("href", C.backgroundImageTop).attr("preserveAspectRatio", "none"), T.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", 0).attr("width", C.rightMargin).attr("height", C.topMargin).attr("href", C.backgroundImageTopRight).attr("preserveAspectRatio", "none"), T.append("image").attr("x", 0).attr("y", C.topMargin).attr("width", C.leftMargin).attr(
           "height",
           p.defaultHeight - C.bottomMargin - C.topMargin
-        ).attr("href", C.backgroundImageLeft).attr("preserveAspectRatio", "none"), L.append("image").attr("x", C.leftMargin).attr("y", C.topMargin).attr(
+        ).attr("href", C.backgroundImageLeft).attr("preserveAspectRatio", "none"), T.append("image").attr("x", C.leftMargin).attr("y", C.topMargin).attr(
           "width",
           p.defaultWidth - C.rightMargin - C.leftMargin
         ).attr(
           "height",
           p.defaultHeight - C.bottomMargin - C.topMargin
-        ).attr("href", C.backgroundImageCenter).attr("preserveAspectRatio", "none"), L.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", C.topMargin).attr("width", C.rightMargin).attr(
+        ).attr("href", C.backgroundImageCenter).attr("preserveAspectRatio", "none"), T.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", C.topMargin).attr("width", C.rightMargin).attr(
           "height",
           p.defaultHeight - C.bottomMargin - C.topMargin
-        ).attr("href", C.backgroundImageRight).attr("preserveAspectRatio", "none"), L.append("image").attr("x", 0).attr("y", p.defaultHeight - C.bottomMargin).attr("width", C.leftMargin).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottomLeft).attr("preserveAspectRatio", "none"), L.append("image").attr("x", C.leftMargin).attr("y", p.defaultHeight - C.bottomMargin).attr(
+        ).attr("href", C.backgroundImageRight).attr("preserveAspectRatio", "none"), T.append("image").attr("x", 0).attr("y", p.defaultHeight - C.bottomMargin).attr("width", C.leftMargin).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottomLeft).attr("preserveAspectRatio", "none"), T.append("image").attr("x", C.leftMargin).attr("y", p.defaultHeight - C.bottomMargin).attr(
           "width",
           p.defaultWidth - C.rightMargin - C.leftMargin
-        ).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottom).attr("preserveAspectRatio", "none"), L.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", p.defaultHeight - C.bottomMargin).attr("width", C.rightMargin).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottomRight).attr("preserveAspectRatio", "none");
+        ).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottom).attr("preserveAspectRatio", "none"), T.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", p.defaultHeight - C.bottomMargin).attr("width", C.rightMargin).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottomRight).attr("preserveAspectRatio", "none");
     }
     if (f.look === void 0) {
       if (p.decorators)
         for (const O of p.decorators)
-          L.append("foreignObject").attr("width", `${O.width}px`).attr("height", `${O.height}px`).attr(
+          T.append("foreignObject").attr("width", `${O.width}px`).attr("height", `${O.height}px`).attr(
             "transform",
             `translate(${O.coords[0]},${O.coords[1]})`
           ).html(O.html);
@@ -7560,20 +7610,20 @@ const Se = ({
           ...p.label,
           ...f.labelLook
         };
-        L.append("text").attr(
+        T.append("text").attr(
           "transform",
-          `translate(${(j(O) + p.defaultWidth) / 2},${(G(O) + p.defaultHeight) / 2})`
+          `translate(${(U(O) + p.defaultWidth) / 2},${(H(O) + p.defaultHeight) / 2})`
         ).attr("x", 0).attr("y", 0).attr("font-size", `${O.fontSize}px`).attr("text-anchor", "middle").attr("font-family", O.fontFamily).attr("font-weight", 400).attr("fill", O.color).attr("stroke", "none").style("font-kerning", "none").style("user-select", "none").text(f.label);
       }
     }
-  }, m = (p, f, b) => {
-    const w = d().append("div").attr(
+  }, m = (p, f, k) => {
+    const b = d().append("div").attr(
       "class",
-      `daga-template-container ${b !== void 0 ? b : ""}`
+      `daga-template-container ${k !== void 0 ? k : ""}`
     ).style("width", `${f.width}px`).style("height", `${f.height}px`).append("svg").attr("class", `palette-button ${p.id}`).style("position", "relative").style("left", 0).style("top", 0).style("width", "100%").style("height", "100%").on("click", () => {
       t.connectionType = p;
     });
-    w.append("path").attr(
+    b.append("path").attr(
       "d",
       me(
         Nt.Rectangle,
@@ -7582,9 +7632,9 @@ const Se = ({
         f.width,
         f.height
       )
-    ).attr("fill", f.backgroundColor).attr("stroke", "black").attr("stroke-width", "1px"), f.icon !== "" && w.append("image").attr("x", 0).attr("y", 0).attr("width", f.width).attr("height", f.height).attr("href", f.icon), f.label !== "" && w.append("text").attr(
+    ).attr("fill", f.backgroundColor).attr("stroke", "black").attr("stroke-width", "1px"), f.icon !== "" && b.append("image").attr("x", 0).attr("y", 0).attr("width", f.width).attr("height", f.height).attr("href", f.icon), f.label !== "" && b.append("text").attr(
       "transform",
-      `translate(${f.width / 2},${f.height / 2 + Eo})`
+      `translate(${f.width / 2},${f.height / 2 + Lo})`
     ).attr("x", 0).attr("y", 0).attr("font-size", "20px").attr("text-anchor", "middle").attr("font-family", "'Wonder Unit Sans', sans-serif").attr("font-weight", 400).attr("fill", "#000000").attr("stroke", "none").style("font-kerning", "none").style("user-select", "none").text(f.label);
   };
   return Ct(() => {
@@ -7632,7 +7682,7 @@ const Se = ({
       ]
     }
   ) });
-}, Lo = ({
+}, To = ({
   location: o,
   direction: t,
   enableAction: e,
@@ -7658,61 +7708,61 @@ const Se = ({
   }
   const m = rt(null), p = rt(null), f = rt(null);
   Ct(() => {
-    E.select(
+    L.select(
       m.current
     ).style(`margin-${y}`, "-1rem").style(d, "0rem").style("transform", `${h}(0)`).style("transform-origin", g);
   });
-  const b = async () => {
-    const K = E.select(
+  const k = async () => {
+    const q = L.select(
       m.current
     );
     if (!c)
       if (r) {
         r = !1;
-        const Gt = `${4 * K.selectChildren().size()}rem`;
-        K.transition().duration(500).ease(E.easeLinear).style(d, Gt).style("transform", `${h}(1)`), setTimeout(() => {
+        const Gt = `${4 * q.selectChildren().size()}rem`;
+        q.transition().duration(500).ease(L.easeLinear).style(d, Gt).style("transform", `${h}(1)`), setTimeout(() => {
           c = !1;
         }, 500);
       } else
-        r = !0, K.transition().duration(500).ease(E.easeLinear).style(d, "0rem").style("transform", `${h}(0)`), setTimeout(() => {
+        r = !0, q.transition().duration(500).ease(L.easeLinear).style(d, "0rem").style("transform", `${h}(0)`), setTimeout(() => {
           c = !1;
         }, 500);
-  }, w = Ht(It), M = () => {
-    w.zoomBy(w.zoomFactor);
+  }, b = Ht(It), M = () => {
+    b.zoomBy(b.zoomFactor);
   }, R = () => {
-    w.zoomBy(1 / w.zoomFactor);
+    b.zoomBy(1 / b.zoomFactor);
   }, P = () => {
-    w.center();
-  }, J = () => {
-    w.layoutFormat && w.layoutFormat in ze && ze[w.layoutFormat].apply(w.model);
-  }, L = () => {
-    s = !s, E.select(
+    b.center();
+  }, Q = () => {
+    b.layoutFormat && b.layoutFormat in ze && ze[b.layoutFormat].apply(b.model);
+  }, T = () => {
+    s = !s, L.select(
       f.current
     ).classed("daga-on", s).classed("daga-off", !s);
-    const K = w.getPriorityThresholdOptions();
-    K && K.length >= 2 && w.setPriorityThreshold(
-      K[s ? 1 : 0]
+    const q = b.getPriorityThresholdOptions();
+    q && q.length >= 2 && b.setPriorityThreshold(
+      q[s ? 1 : 0]
     );
   }, C = () => {
-    w.actionStack.undo();
+    b.actionStack.undo();
   }, O = () => {
-    w.actionStack.redo();
+    b.actionStack.redo();
   }, x = () => {
-    w.userSelection.copyToClipboard();
+    b.userSelection.copyToClipboard();
   }, D = () => {
-    w.userSelection.cutToClipboard();
+    b.userSelection.cutToClipboard();
   }, lt = () => {
-    w.userSelection.pasteFromClipboard();
-  }, st = () => {
-    w.userSelection.removeFromModel();
+    b.userSelection.pasteFromClipboard();
+  }, nt = () => {
+    b.userSelection.removeFromModel();
   }, Bt = () => {
-    w.multipleSelectionOn = !0, E.select(
+    b.multipleSelectionOn = !0, L.select(
       p.current
     ).classed("daga-on", !0).classed("daga-off", !1);
-    const K = w.diagramEvent$.subscribe((wt) => {
-      wt.type === We.Selection && (E.select(
+    const q = b.diagramEvent$.subscribe((wt) => {
+      wt.type === We.Selection && (L.select(
         p.current
-      ).classed("daga-on", !1).classed("daga-off", !0), K.unsubscribe());
+      ).classed("daga-on", !1).classed("daga-off", !0), q.unsubscribe());
     });
   };
   return /* @__PURE__ */ v("daga-diagram-buttons", { children: /* @__PURE__ */ $(
@@ -7720,21 +7770,21 @@ const Se = ({
     {
       className: `daga-diagram-buttons daga-${o} daga-${t}`,
       children: [
-        i && w.canUserPerformAction(k.Zoom) && /* @__PURE__ */ v("button", { className: "daga-zoom-in", onClick: M, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Zoom in" }) }),
-        i && w.canUserPerformAction(k.Zoom) && /* @__PURE__ */ v("button", { className: "daga-zoom-out", onClick: R, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Zoom out" }) }),
+        i && b.canUserPerformAction(w.Zoom) && /* @__PURE__ */ v("button", { className: "daga-zoom-in", onClick: M, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Zoom in" }) }),
+        i && b.canUserPerformAction(w.Zoom) && /* @__PURE__ */ v("button", { className: "daga-zoom-out", onClick: R, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Zoom out" }) }),
         /* @__PURE__ */ $("div", { className: "daga-collapsable-buttons daga-collapsed", ref: m, children: [
-          i && w.canUserPerformAction(k.Zoom) && /* @__PURE__ */ v("button", { className: "daga-center", onClick: P, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Fit diagram to screen" }) }),
+          i && b.canUserPerformAction(w.Zoom) && /* @__PURE__ */ v("button", { className: "daga-center", onClick: P, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Fit diagram to screen" }) }),
           e && /* @__PURE__ */ v("button", { className: "daga-undo", onClick: C, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Undo" }) }),
           e && /* @__PURE__ */ v("button", { className: "daga-redo", onClick: O, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Redo" }) }),
           a && /* @__PURE__ */ v("button", { className: "daga-copy", onClick: x, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Copy" }) }),
           a && /* @__PURE__ */ v("button", { className: "daga-cut", onClick: D, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Cut" }) }),
           a && /* @__PURE__ */ v("button", { className: `daga-multiple-selection ${s ? "daga-on" : "daga-off"}`, onClick: Bt, ref: p, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Multiple selection" }) }),
           a && /* @__PURE__ */ v("button", { className: "daga-paste", onClick: lt, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Paste" }) }),
-          a && /* @__PURE__ */ v("button", { className: "daga-delete", onClick: st, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Delete" }) }),
-          l && w.layoutFormat && /* @__PURE__ */ v("button", { className: "daga-layout", onClick: J, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Apply layout" }) }),
-          n && /* @__PURE__ */ v("button", { className: `daga-filter ${s ? "daga-on" : "daga-off"}`, onClick: L, ref: f, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Apply filter" }) })
+          a && /* @__PURE__ */ v("button", { className: "daga-delete", onClick: nt, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Delete" }) }),
+          l && b.layoutFormat && /* @__PURE__ */ v("button", { className: "daga-layout", onClick: Q, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Apply layout" }) }),
+          n && /* @__PURE__ */ v("button", { className: `daga-filter ${s ? "daga-on" : "daga-off"}`, onClick: T, ref: f, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Apply filter" }) })
         ] }),
-        /* @__PURE__ */ v("button", { className: "daga-more-options", onClick: b, children: r ? /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "More options" }) : /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Less options" }) })
+        /* @__PURE__ */ v("button", { className: "daga-more-options", onClick: k, children: r ? /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "More options" }) : /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Less options" }) })
       ]
     }
   ) });
@@ -7745,7 +7795,7 @@ const Se = ({
   onDiagramEvent: n,
   onModelChange: l
 }) => {
-  const a = new je(), i = new qe(), s = rt(null), r = rt(void 0), c = rt(!1), d = [], [h, g] = H(void 0), [y, m] = H(void 0), p = {
+  const a = new je(), i = new qe(), s = rt(null), r = rt(void 0), c = rt(!1), d = [], [h, g] = B(void 0), [y, m] = B(void 0), p = {
     zoomIn: () => {
     },
     zoomOut: () => {
@@ -7763,15 +7813,15 @@ const Se = ({
   }, f = {
     refreshPalette: () => {
     }
-  }, b = new yo(
-    (L) => g(L),
-    (L) => m(L)
-  ), w = {
+  }, k = new yo(
+    (T) => g(T),
+    (T) => m(T)
+  ), b = {
     diagramButtons: p,
     palette: f,
-    propertyEditor: b
-  }, M = (L = !1) => ((!r.current || L) && (d.forEach((C) => C.unsubscribe()), r.current = new ve(w, o)), r.current), R = M(), P = (L) => {
-    R.initView(L), d.push(
+    propertyEditor: k
+  }, M = (T = !1) => ((!r.current || T) && (d.forEach((C) => C.unsubscribe()), r.current = new ve(b, o)), r.current), R = M(), P = (T) => {
+    R.initView(T), d.push(
       R.diagramEvent$.subscribe((C) => {
         n?.(C);
       })
@@ -7789,21 +7839,21 @@ const Se = ({
   }, [o]), Ct(() => {
     t && a.import(R.model, t);
   }, [t]);
-  const J = (L, C, O) => {
-    if (y !== void 0 && C.editable !== !1 && !St(L.getValue(C.name), O)) {
-      L.setValue(C.name, O);
+  const Q = (T, C, O) => {
+    if (y !== void 0 && C.editable !== !1 && !St(T.getValue(C.name), O)) {
+      T.setValue(C.name, O);
       const x = new yt(
         y.propertySet,
         void 0
       );
-      x.setValues(y.getValues()), x.rootElement = y.rootElement, b.valueSet = x, y.rootElement.valueSet = x, R.propertyEditorChanges$?.next();
+      x.setValues(y.getValues()), x.rootElement = y.rootElement, k.valueSet = x, y.rootElement.valueSet = x, R.propertyEditorChanges$?.next();
     }
   };
   return /* @__PURE__ */ v("daga-diagram", { children: /* @__PURE__ */ v(vo.Provider, { value: o, children: /* @__PURE__ */ v(It.Provider, { value: R, children: /* @__PURE__ */ $("daga-diagram-editor", { children: [
     /* @__PURE__ */ v("div", { className: "daga-append-to", ref: s }),
     /* @__PURE__ */ $(It.Provider, { value: R, children: [
       o.components?.buttons !== void 0 && o.components?.buttons?.enabled !== !1 && /* @__PURE__ */ v(
-        Lo,
+        To,
         {
           location: o.components?.buttons?.location || jt.BottomRight,
           direction: o.components?.buttons?.direction || u.Top,
@@ -7815,7 +7865,7 @@ const Se = ({
         }
       ),
       o.components?.palette !== void 0 && o.components?.palette?.enabled !== !1 && o.components?.palette?.sections && (o.components?.palette?.sections?.length || 0) > 0 && /* @__PURE__ */ v(
-        To,
+        Eo,
         {
           location: o.components?.palette?.location || jt.TopLeft,
           direction: o.components?.palette?.direction || u.Bottom,
@@ -7833,7 +7883,7 @@ const Se = ({
           height: o.components?.propertyEditor?.height,
           title: h,
           valueSet: y,
-          onValueChange: J
+          onValueChange: Q
         }
       ),
       o.components?.errors !== void 0 && o.components?.errors?.enabled !== !1 && /* @__PURE__ */ v(bo, {})