@metadev/daga-react 4.2.8 → 4.2.10

package/index.mjs

@@ -1,9 +1,9 @@
-import { jsx as v, jsxs as M, Fragment as no } from "react/jsx-runtime";
+import { jsx as v, jsxs as M, Fragment as ro } from "react/jsx-runtime";
 import * as x from "d3";
-import { debounceTime as ro, Subject as Yt, merge as ao, map as lo } from "rxjs";
-import { createContext as Ve, useState as U, useContext as Ft, useRef as rt, useEffect as Ct, useMemo as co } from "react";
-var g = /* @__PURE__ */ ((s) => (s.Bottom = "bottom", s.Left = "left", s.Right = "right", s.Top = "top", s))(g || {}), jt = /* @__PURE__ */ ((s) => (s.BottomLeft = "bottom-left", s.BottomRight = "bottom-right", s.TopLeft = "top-left", s.TopRight = "top-right", s))(jt || {}), Lt = /* @__PURE__ */ ((s) => (s.Left = "left", s.Center = "center", s.Right = "right", s))(Lt || {}), Zt = /* @__PURE__ */ ((s) => (s.Top = "top", s.Center = "center", s.Bottom = "bottom", s))(Zt || {});
-const At = (s) => [Math.round(s[0]), Math.round(s[1])], ut = (s, t, e) => t < e ? t <= s && s <= e : e <= s && s <= t, $e = (s, t, e) => (s - t[0]) / (t[1] - t[0]) * (e[1] - e[0]) + e[0], Kt = (s, t, e, a, l, n, i) => {
+import { debounceTime as ao, Subject as Xt, merge as lo, map as co } from "rxjs";
+import { createContext as Oe, useState as U, useContext as Ut, useRef as rt, useEffect as Ct, useMemo as ho } from "react";
+var g = /* @__PURE__ */ ((s) => (s.Bottom = "bottom", s.Left = "left", s.Right = "right", s.Top = "top", s))(g || {}), Wt = /* @__PURE__ */ ((s) => (s.BottomLeft = "bottom-left", s.BottomRight = "bottom-right", s.TopLeft = "top-left", s.TopRight = "top-right", s))(Wt || {}), Lt = /* @__PURE__ */ ((s) => (s.Left = "left", s.Center = "center", s.Right = "right", s))(Lt || {}), Kt = /* @__PURE__ */ ((s) => (s.Top = "top", s.Center = "center", s.Bottom = "bottom", s))(Kt || {});
+const At = (s) => [Math.round(s[0]), Math.round(s[1])], ut = (s, t, e) => t < e ? t <= s && s <= e : e <= s && s <= t, Ie = (s, t, e) => (s - t[0]) / (t[1] - t[0]) * (e[1] - e[0]) + e[0], qt = (s, t, e, a, l, n, i) => {
   const r = (() => {
     switch (n) {
       case "start":
@@ -16,7 +16,7 @@ const At = (s) => [Math.round(s[0]), Math.round(s[1])], ut = (s, t, e) => t < e
       }
       case "floating":
       default:
-        return $e(s[0], t, a);
+        return Ie(s[0], t, a);
     }
   })(), o = (() => {
     switch (i) {
@@ -30,11 +30,11 @@ const At = (s) => [Math.round(s[0]), Math.round(s[1])], ut = (s, t, e) => t < e
       }
       case "floating":
       default:
-        return $e(s[1], e, l);
+        return Ie(s[1], e, l);
     }
   })();
   return [r, o];
-}, Oe = (s, t) => ((s[0] - t[0]) ** 2 + (s[1] - t[1]) ** 2) ** 0.5, ho = (s, t) => (ut(
+}, He = (s, t) => ((s[0] - t[0]) ** 2 + (s[1] - t[1]) ** 2) ** 0.5, go = (s, t) => (ut(
   s[0][0],
   t[0][0],
   t[1][0]
@@ -67,10 +67,10 @@ const At = (s) => [Math.round(s[0]), Math.round(s[1])], ut = (s, t, e) => t < e
   s[1][1],
   s[0][1]
 ));
-var $ = /* @__PURE__ */ ((s) => (s.Blur = "blur", s.Change = "change", s.Click = "click", s.ContextMenu = "contextmenu", s.DoubleClick = "dblclick", s.Focus = "focus", s.FocusIn = "focusin", s.FocusOut = "focusout", s.Input = "input", s.KeyDown = "keydown", s.KeyUp = "keyup", s.MouseDown = "mousedown", s.MouseEnter = "mouseenter", s.MouseLeave = "mouseleave", s.MouseMove = "mousemove", s.MouseOut = "mouseout", s.MouseOver = "mouseover", s.MouseUp = "mouseup", s.TouchStart = "touchstart", s.TouchEnd = "touchend", s.Wheel = "wheel", s))($ || {}), Z = /* @__PURE__ */ ((s) => (s.Alt = "Alt", s.AltGraph = "AltGraph", s.ArrowDown = "ArrowDown", s.ArrowLeft = "ArrowLeft", s.ArrowRight = "ArrowRight", s.ArrowUp = "ArrowUp", s.Backspace = "Backspace", s.Control = "Control", s.Delete = "Delete", s.End = "End", s.Enter = "Enter", s.Escape = "Escape", s.Home = "Home", s.OS = "OS", s.PageDown = "PageDown", s.PageUp = "PageUp", s.Shift = "Shift", s.Tab = "Tab", s))(Z || {}), I = /* @__PURE__ */ ((s) => (s.Drag = "drag", s.Start = "start", s.End = "end", s))(I || {}), ge = /* @__PURE__ */ ((s) => (s.Zoom = "zoom", s.Start = "start", s.End = "end", s))(ge || {});
-const fe = (s) => s.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, "\\$1");
-var He = /* @__PURE__ */ ((s) => (s.Straight = "straight", s.Bezier = "bezier", s.Square = "square", s))(He || {}), ye = /* @__PURE__ */ ((s) => (s.Solid = "solid", s.Dashed = "dashed", s.GappedDashes = "gapped-dashes", s.Dotted = "dotted", s))(ye || {});
-const go = 20, fo = (s, t, e, a, l) => {
+var $ = /* @__PURE__ */ ((s) => (s.Blur = "blur", s.Change = "change", s.Click = "click", s.ContextMenu = "contextmenu", s.DoubleClick = "dblclick", s.Focus = "focus", s.FocusIn = "focusin", s.FocusOut = "focusout", s.Input = "input", s.KeyDown = "keydown", s.KeyUp = "keyup", s.MouseDown = "mousedown", s.MouseEnter = "mouseenter", s.MouseLeave = "mouseleave", s.MouseMove = "mousemove", s.MouseOut = "mouseout", s.MouseOver = "mouseover", s.MouseUp = "mouseup", s.TouchStart = "touchstart", s.TouchEnd = "touchend", s.Wheel = "wheel", s))($ || {}), Z = /* @__PURE__ */ ((s) => (s.Alt = "Alt", s.AltGraph = "AltGraph", s.ArrowDown = "ArrowDown", s.ArrowLeft = "ArrowLeft", s.ArrowRight = "ArrowRight", s.ArrowUp = "ArrowUp", s.Backspace = "Backspace", s.Control = "Control", s.Delete = "Delete", s.End = "End", s.Enter = "Enter", s.Escape = "Escape", s.Home = "Home", s.OS = "OS", s.PageDown = "PageDown", s.PageUp = "PageUp", s.Shift = "Shift", s.Tab = "Tab", s))(Z || {}), I = /* @__PURE__ */ ((s) => (s.Drag = "drag", s.Start = "start", s.End = "end", s))(I || {}), fe = /* @__PURE__ */ ((s) => (s.Zoom = "zoom", s.Start = "start", s.End = "end", s))(fe || {});
+const ue = (s) => s.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, "\\$1");
+var _e = /* @__PURE__ */ ((s) => (s.Straight = "straight", s.Bezier = "bezier", s.Square = "square", s))(_e || {}), be = /* @__PURE__ */ ((s) => (s.Solid = "solid", s.Dashed = "dashed", s.GappedDashes = "gapped-dashes", s.Dotted = "dotted", s))(be || {});
+const fo = 20, uo = (s, t, e, a, l) => {
   if (typeof s == "function")
     return s(
       t,
@@ -83,7 +83,7 @@ const go = 20, fo = (s, t, e, a, l) => {
   if (t.length === 1)
     return `M ${t[0][0]} ${t[0][1]}`;
   {
-    l = l || go;
+    l = l || fo;
     let n = "", i, r;
     switch (s) {
       case "straight":
@@ -272,7 +272,7 @@ const go = 20, fo = (s, t, e, a, l) => {
     }
     return n;
   }
-}, ue = (s, t) => {
+}, pe = (s, t) => {
   switch (s) {
     case "dotted":
       return `${t}`;
@@ -289,63 +289,70 @@ const go = 20, fo = (s, t, e, a, l) => {
   return e >= 0 && s.splice(e, 1), s;
 };
 var Tt = /* @__PURE__ */ ((s) => (s.Ellipse = "ellipse", s.Empty = "empty", s.Folder = "folder", s.Hexagon = "hexagon", s.Octagon = "octagon", s.Pill = "pill", s.Rectangle = "rectangle", s.Rhombus = "rhombus", s.RoundedRectangle = "rounded-rectangle", s.StickyNote = "sticky-note", s))(Tt || {});
-const pe = (s, t, e, a, l) => {
+const me = (s, t, e, a, l) => {
   if (typeof s == "function")
     return s(t, e, a, l);
   switch (s) {
     case "ellipse":
-      return _e(t, e, a, l);
+      return Ge(t, e, a, l);
     case "empty":
-      return uo();
+      return po();
     case "folder":
-      return po(t, e, a, l);
-    case "hexagon":
       return mo(t, e, a, l);
-    case "octagon":
+    case "hexagon":
       return vo(t, e, a, l);
+    case "octagon":
+      return yo(t, e, a, l);
     case "pill":
-      return Wt(t, e, a, l);
+      return Zt(t, e, a, l);
     case "rectangle":
-      return Ie(t, e, a, l);
+      return Ae(t, e, a, l);
     case "rhombus":
-      return yo(t, e, a, l);
-    case "rounded-rectangle":
       return bo(t, e, a, l);
-    case "sticky-note":
+    case "rounded-rectangle":
       return ko(t, e, a, l);
+    case "sticky-note":
+      return wo(t, e, a, l);
     default:
-      return Ie(t, e, a, l);
+      return Ae(t, e, a, l);
   }
-}, _e = (s, t, e, a) => `M ${s + e / 2} ${t} A ${e / 2} ${a / 2} 0 0 0 ${s + e / 2} ${t + a} A ${e / 2} ${a / 2} 0 1 0 ${s + e / 2} ${t} Z`, uo = () => "Z", po = (s, t, e, a) => `M ${s} ${t} L ${s + e / 3} ${t} L ${s + e / 2} ${t + a / 6} L ${s + e} ${t + a / 6} L ${s + e} ${t + a} L ${s} ${t + a} Z`, mo = (s, t, e, a) => `M ${s + e / 4} ${t} L ${s + 3 * e / 4} ${t} L ${s + e} ${t + a / 2} L ${s + 3 * e / 4} ${t + a} L ${s + e / 4} ${t + a} L ${s} ${t + a / 2} Z`, vo = (s, t, e, a) => `M ${s + e / 4} ${t} L ${s + 3 * e / 4} ${t} L ${s + e} ${t + a / 4} L ${s + e} ${t + 3 * a / 4} L ${s + 3 * e / 4} ${t + a} L ${s + e / 4} ${t + a} L ${s} ${t + 3 * a / 4} L ${s} ${t + a / 4} L ${s + e / 4} ${t} Z`, Wt = (s, t, e, a) => a < e ? `M ${s + a / 2} ${t} L ${s + e - a / 2} ${t} A ${a / 2} ${a / 2} 0 0 1 ${s + e} ${t + a / 2} A ${a / 2} ${a / 2} 0 0 1 ${s + e - a / 2} ${t + a} L ${s + a / 2} ${t + a} A ${a / 2} ${a / 2} 0 0 1 ${s} ${t + a / 2} A ${a / 2} ${a / 2} 0 0 1 ${s + a / 2} ${t} Z` : a > e ? `M ${s} ${t + e / 2} L ${s} ${t + a - e / 2} A ${e / 2} ${e / 2} 0 0 0 ${s + e / 2} ${t + a} A ${e / 2} ${e / 2} 0 0 0 ${s + e} ${t + a - e / 2} L ${s + e} ${t + e / 2} A ${e / 2} ${e / 2} 0 0 0 ${s + e / 2} ${t} A ${e / 2} ${e / 2} 0 0 0 ${s} ${t + e / 2} Z` : _e(s, t, e, a), Ie = (s, t, e, a) => `M ${s} ${t} L ${s + e} ${t} L ${s + e} ${t + a} L ${s} ${t + a} Z`, yo = (s, t, e, a) => `M ${s + e / 2} ${t} L ${s + e} ${t + a / 2} L ${s + e / 2} ${t + a} L ${s} ${t + a / 2} Z`, bo = (s, t, e, a) => `M ${s + e / 4} ${t} L ${s + 3 * e / 4} ${t} A ${e / 4} ${a / 4} 0 0 1 ${s + e} ${t + a / 4} L ${s + e} ${t + 3 * a / 4} A ${e / 4} ${a / 4} 0 0 1 ${s + 3 * e / 4} ${t + a} L ${s + e / 4} ${t + a} A ${e / 4} ${a / 4} 0 0 1 ${s} ${t + 3 * a / 4} L ${s} ${t + a / 4} A ${e / 4} ${a / 4} 0 0 1 ${s + e / 4} ${t} Z`, ko = (s, t, e, a) => `M ${s} ${t} L ${s + 3 * e / 4} ${t} L ${s + 3 * e / 4} ${t + a / 4} L ${s + 3 * e / 4} ${t} L ${s + e} ${t + a / 4} L ${s + 3 * e / 4} ${t + a / 4} L ${s + e} ${t + a / 4} L ${s + e} ${t + a} L ${s} ${t + a} Z`;
+}, Ge = (s, t, e, a) => `M ${s + e / 2} ${t} A ${e / 2} ${a / 2} 0 0 0 ${s + e / 2} ${t + a} A ${e / 2} ${a / 2} 0 1 0 ${s + e / 2} ${t} Z`, po = () => "Z", mo = (s, t, e, a) => `M ${s} ${t} L ${s + e / 3} ${t} L ${s + e / 2} ${t + a / 6} L ${s + e} ${t + a / 6} L ${s + e} ${t + a} L ${s} ${t + a} Z`, vo = (s, t, e, a) => `M ${s + e / 4} ${t} L ${s + 3 * e / 4} ${t} L ${s + e} ${t + a / 2} L ${s + 3 * e / 4} ${t + a} L ${s + e / 4} ${t + a} L ${s} ${t + a / 2} Z`, yo = (s, t, e, a) => `M ${s + e / 4} ${t} L ${s + 3 * e / 4} ${t} L ${s + e} ${t + a / 4} L ${s + e} ${t + 3 * a / 4} L ${s + 3 * e / 4} ${t + a} L ${s + e / 4} ${t + a} L ${s} ${t + 3 * a / 4} L ${s} ${t + a / 4} L ${s + e / 4} ${t} Z`, Zt = (s, t, e, a) => a < e ? `M ${s + a / 2} ${t} L ${s + e - a / 2} ${t} A ${a / 2} ${a / 2} 0 0 1 ${s + e} ${t + a / 2} A ${a / 2} ${a / 2} 0 0 1 ${s + e - a / 2} ${t + a} L ${s + a / 2} ${t + a} A ${a / 2} ${a / 2} 0 0 1 ${s} ${t + a / 2} A ${a / 2} ${a / 2} 0 0 1 ${s + a / 2} ${t} Z` : a > e ? `M ${s} ${t + e / 2} L ${s} ${t + a - e / 2} A ${e / 2} ${e / 2} 0 0 0 ${s + e / 2} ${t + a} A ${e / 2} ${e / 2} 0 0 0 ${s + e} ${t + a - e / 2} L ${s + e} ${t + e / 2} A ${e / 2} ${e / 2} 0 0 0 ${s + e / 2} ${t} A ${e / 2} ${e / 2} 0 0 0 ${s} ${t + e / 2} Z` : Ge(s, t, e, a), Ae = (s, t, e, a) => `M ${s} ${t} L ${s + e} ${t} L ${s + e} ${t + a} L ${s} ${t + a} Z`, bo = (s, t, e, a) => `M ${s + e / 2} ${t} L ${s + e} ${t + a / 2} L ${s + e / 2} ${t + a} L ${s} ${t + a / 2} Z`, ko = (s, t, e, a) => `M ${s + e / 4} ${t} L ${s + 3 * e / 4} ${t} A ${e / 4} ${a / 4} 0 0 1 ${s + e} ${t + a / 4} L ${s + e} ${t + 3 * a / 4} A ${e / 4} ${a / 4} 0 0 1 ${s + 3 * e / 4} ${t + a} L ${s + e / 4} ${t + a} A ${e / 4} ${a / 4} 0 0 1 ${s} ${t + 3 * a / 4} L ${s} ${t + a / 4} A ${e / 4} ${a / 4} 0 0 1 ${s + e / 4} ${t} Z`, wo = (s, t, e, a) => `M ${s} ${t} L ${s + 3 * e / 4} ${t} L ${s + 3 * e / 4} ${t + a / 4} L ${s + 3 * e / 4} ${t} L ${s + e} ${t + a / 4} L ${s + 3 * e / 4} ${t + a / 4} L ${s + e} ${t + a / 4} L ${s + e} ${t + a} L ${s} ${t + a} Z`;
 var L = /* @__PURE__ */ ((s) => (s.AllScroll = "all-scroll", s.Auto = "auto", s.Crosshair = "crosshair", s.EWResize = "ew-resize", s.Grab = "grab", s.Grabbing = "grabbing", s.Move = "move", s.NoDrop = "no-drop", s.NSResize = "ns-resize", s.NotAllowed = "not-allowed", s.ZoomIn = "zoom-in", s.ZoomOut = "zoom-out", s))(L || {});
-const wo = (s) => Math.max(...s.split(`
-`).map((t) => t.length)), So = (s) => s.match(/\n/g)?.length || 0, W = [];
+const So = (s) => Math.max(...s.split(`
+`).map((t) => t.length)), Co = (s) => s.match(/\n/g)?.length || 0, W = [];
 for (let s = 0; s < 256; ++s)
   W.push((s + 256).toString(16).slice(1));
-function Co(s, t = 0) {
+function $o(s, t = 0) {
   return (W[s[t + 0]] + W[s[t + 1]] + W[s[t + 2]] + W[s[t + 3]] + "-" + W[s[t + 4]] + W[s[t + 5]] + "-" + W[s[t + 6]] + W[s[t + 7]] + "-" + W[s[t + 8]] + W[s[t + 9]] + "-" + W[s[t + 10]] + W[s[t + 11]] + W[s[t + 12]] + W[s[t + 13]] + W[s[t + 14]] + W[s[t + 15]]).toLowerCase();
 }
-let ne;
-const $o = new Uint8Array(16);
-function Io() {
-  if (!ne) {
+let re;
+const Io = new Uint8Array(16);
+function Ao() {
+  if (!re) {
     if (typeof crypto > "u" || !crypto.getRandomValues)
       throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    ne = crypto.getRandomValues.bind(crypto);
+    re = crypto.getRandomValues.bind(crypto);
   }
-  return ne($o);
+  return re(Io);
 }
-const Ao = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Ae = { randomUUID: Ao };
-function xe(s, t, e) {
-  if (Ae.randomUUID && !s)
-    return Ae.randomUUID();
+const xo = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), xe = { randomUUID: xo };
+function Le(s, t, e) {
+  if (xe.randomUUID && !s)
+    return xe.randomUUID();
   s = s || {};
-  const a = s.random ?? s.rng?.() ?? Io();
+  const a = s.random ?? s.rng?.() ?? Ao();
   if (a.length < 16)
     throw new Error("Random bytes length must be >= 16");
-  return a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, Co(a);
+  return a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, $o(a);
 }
-const st = (s) => {
+const Nt = (s) => {
+  if (typeof s != "object")
+    return s;
+  const t = {};
+  for (const e of Object.entries(s))
+    typeof e[1] == "object" ? t[e[0]] = Nt(e[1]) : t[e[0]] = e[1];
+  return t;
+}, st = (s) => {
   const { selected: t, highlighted: e, selectedAndHighlighted: a, ...l } = s, n = l, i = {
     ...n,
     ...t
@@ -365,7 +372,7 @@ const st = (s) => {
     selectedAndHighlightedLook: o
   };
 };
-class Jt {
+class Qt {
   constructor() {
     this.entities = [], this.entityMap = {};
   }
@@ -476,7 +483,7 @@ class Jt {
       yield t;
   }
 }
-const Nt = 0;
+const Pt = 0;
 class It {
   constructor(t, e) {
     this.selfRemoved = !1, this.selfRemovedTimestamp = null, this.model = t, this._id = e;
@@ -506,10 +513,10 @@ class It {
    * @private
    */
   select() {
-    return this.model.canvas?.selectCanvasView()?.select(`[id='${fe(this.id)}']`);
+    return this.model.canvas?.selectCanvasView()?.select(`[id='${ue(this.id)}']`);
   }
 }
-class ft extends Jt {
+class ft extends Qt {
   all(t = !1) {
     return t ? super.all() : super.filter((e) => !e.removed);
   }
@@ -547,13 +554,13 @@ class ft extends Jt {
         yield e;
   }
 }
-class xo {
+class Lo {
   constructor(t, e, a, l, n, i, r) {
     this.name = t, this.label = e, this.type = a, this.defaultValue = l, this.basic = n, this.editable = i, this.rootAttribute = r, this.options = void 0, this.properties = void 0;
   }
 }
 var T = /* @__PURE__ */ ((s) => (s.Boolean = "boolean", s.Color = "color", s.Date = "date", s.Datetime = "datetime", s.Number = "number", s.Object = "object", s.Option = "option", s.OptionList = "option-list", s.OptionSet = "option-set", s.Text = "text", s.TextArea = "text-area", s.TextList = "text-list", s.TextSet = "text-set", s.TextMap = "text-map", s.Time = "time", s.Url = "url", s))(T || {});
-class Qt {
+class te {
   constructor(t = []) {
     this.propertyList = t, this.propertyMap = {};
     for (const e of this.propertyList)
@@ -572,11 +579,11 @@ class Qt {
 function kt(s, t) {
   return !t || s[0] > t[0] ? !0 : s[0] === t[0] ? s[1] >= t[1] : !1;
 }
-const Le = (s) => s == null || s === "" || s instanceof Array && s.length === 0 || s instanceof Object && Object.keys(s).length === 0, St = (s, t) => s === t || JSON.stringify(s) === JSON.stringify(t), Ge = (s, t, e) => {
+const Ee = (s) => s == null || s === "" || s instanceof Array && s.length === 0 || s instanceof Object && Object.keys(s).length === 0, St = (s, t) => s === t || JSON.stringify(s) === JSON.stringify(t), Fe = (s, t, e) => {
   const a = {}, l = {};
   for (const n in e.propertySet.propertyMap)
     if (e.propertySet.propertyMap[n].type === T.Object) {
-      const i = Ge(
+      const i = Fe(
         s[n],
         t[n],
         e.getSubValueSet(n)
@@ -585,7 +592,7 @@ const Le = (s) => s == null || s === "" || s instanceof Array && s.length === 0
     } else
       St(s[n], t[n]) || (a[n] = s[n], l[n] = t[n]);
   return [a, l];
-}, Lo = (s) => s != null && s.constructor === Object;
+}, Eo = (s) => s != null && s.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();
@@ -697,7 +704,7 @@ class yt {
    */
   hasValue(t) {
     const e = this.getValue(t);
-    return !Le(e);
+    return !Ee(e);
   }
   /**
    * Checks if the value under the key is not empty or the default value.
@@ -707,7 +714,7 @@ class yt {
    */
   hasSetValue(t) {
     const e = this.getValue(t), a = this.propertySet.getProperty(t);
-    return a && a.type === T.Object ? this.getSubValueSet(t).hasAnySetValue() : !Le(e) && !St(e, a?.defaultValue);
+    return a && a.type === T.Object ? this.getSubValueSet(t).hasAnySetValue() : !Ee(e) && !St(e, a?.defaultValue);
   }
   /**
    * Checks if any of the values in the set are not empty or the default value.
@@ -790,7 +797,7 @@ class yt {
     this.displayedProperties = [], this.hiddenProperties = [], this.ownTimestamps = {};
     for (const t in this.propertySet.propertyMap) {
       const e = this.propertySet.getProperty(t), a = e.rootAttribute;
-      e.type === T.Object ? this.valueSets[t] = this.constructSubValueSet(t) : this.values[t] = structuredClone(e.defaultValue), a != null && e.defaultValue !== void 0 && !St(
+      e.type === T.Object ? this.valueSets[t] = this.constructSubValueSet(t) : this.values[t] = Nt(e.defaultValue), a != null && e.defaultValue !== void 0 && !St(
         this.getRootElementValue(a),
         e.defaultValue
       ) && this.setRootElementValue(a, this.values[t]), e.basic !== !1 ? this.displayedProperties.push(e) : this.hiddenProperties.push(e);
@@ -803,9 +810,9 @@ class yt {
    * @returns The constructed ValueSet.
    */
   constructSubValueSet(t) {
-    const e = this.propertySet.getProperty(t), a = new Qt(e.properties), l = new yt(a, this.rootElement);
+    const e = this.propertySet.getProperty(t), a = new te(e.properties), l = new yt(a, this.rootElement);
     return l.overwriteValues(
-      structuredClone(e.defaultValue)
+      Nt(e.defaultValue)
     ), l;
   }
   /**
@@ -841,8 +848,8 @@ const et = {
     lookType: "connection-look",
     color: "#000000",
     thickness: 1,
-    shape: He.Straight,
-    style: ye.Solid,
+    shape: _e.Straight,
+    style: be.Solid,
     selected: {
       color: "#AA00AA"
     },
@@ -856,7 +863,7 @@ const et = {
   endTypes: [],
   properties: []
 };
-class Fe {
+class Ue {
   constructor(t) {
     const e = {
       ...et,
@@ -878,7 +885,7 @@ class Fe {
       this.defaultEndMarkerLook = l.defaultLook, this.selectedEndMarkerLook = l.selectedLook, this.highlightedEndMarkerLook = l.highlightedLook, this.selectedAndHighlightedEndMarkerLook = l.selectedAndHighlightedLook;
     } else
       this.defaultEndMarkerLook = null, this.selectedEndMarkerLook = null, this.highlightedEndMarkerLook = null, this.selectedAndHighlightedEndMarkerLook = null;
-    this.startTypes = e.startTypes, this.endTypes = e.endTypes, this.propertySet = new Qt(e.properties);
+    this.startTypes = e.startTypes, this.endTypes = e.endTypes, this.propertySet = new te(e.properties);
   }
   canStartFromType(t) {
     return this.startTypes.indexOf(t) >= 0;
@@ -927,13 +934,27 @@ class dt extends It {
   get look() {
     return this.selected ? this.highlighted ? this._selectedAndHighlightedLook !== void 0 ? this._selectedAndHighlightedLook : this.type.selectedAndHighlightedLook : this._selectedLook !== void 0 ? this._selectedLook : this.type.selectedLook : this.highlighted ? this._highlightedLook !== void 0 ? this._highlightedLook : this.type.highlightedLook : this._defaultLook !== void 0 ? this._defaultLook : this.type.defaultLook;
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(t) {
+    this.lookConfig = t;
+  }
+  /**
+   * Look configuration used to derive the current look of this connection.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the connection to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(t) {
-    if (t) {
+  set lookConfig(t) {
+    if (this._lookConfig = t, t) {
       const e = st(t);
       this._defaultLook = {
         ...this._defaultLook,
@@ -958,14 +979,30 @@ class dt extends It {
   get startMarkerLook() {
     return this.selected ? this.highlighted ? this._selectedAndHighlightedStartMarkerLook !== void 0 ? this._selectedAndHighlightedStartMarkerLook : this.type.selectedAndHighlightedStartMarkerLook : this._selectedStartMarkerLook !== void 0 ? this._selectedStartMarkerLook : this.type.selectedStartMarkerLook : this.highlighted ? this._highlightedStartMarkerLook !== void 0 ? this._highlightedStartMarkerLook : this.type.highlightedStartMarkerLook : this._defaultStartMarkerLook !== void 0 ? this._defaultStartMarkerLook : this.type.defaultStartMarkerLook;
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set startMarkerLook(t) {
+    this.startMarkerLookConfig = t;
+  }
+  /**
+   * Look configuration used to derive the current look of the start marker of this connection.
+   * @private
+   */
+  get startMarkerLookConfig() {
+    return this._startMarkerLookConfig;
+  }
   /**
    * Sets the look configuration of the start marker to override the one determined by the type.
    * `null` stands for no marker and `undefined` resets it to the one determined by the type.
    * @private
    */
-  set startMarkerLook(t) {
-    if (t) {
-      const e = st(t);
+  set startMarkerLookConfig(t) {
+    if (this._startMarkerLookConfig = t, t) {
+      const e = st(
+        t
+      );
       this._defaultStartMarkerLook = {
         ...this._defaultStartMarkerLook,
         ...e.defaultLook
@@ -989,13 +1026,27 @@ class dt extends It {
   get endMarkerLook() {
     return this.selected ? this.highlighted ? this._selectedAndHighlightedEndMarkerLook !== void 0 ? this._selectedAndHighlightedEndMarkerLook : this.type.selectedAndHighlightedEndMarkerLook : this._selectedEndMarkerLook !== void 0 ? this._selectedEndMarkerLook : this.type.selectedEndMarkerLook : this.highlighted ? this._highlightedEndMarkerLook !== void 0 ? this._highlightedEndMarkerLook : this.type.highlightedEndMarkerLook : this._defaultEndMarkerLook !== void 0 ? this._defaultEndMarkerLook : this.type.defaultEndMarkerLook;
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set endMarkerLook(t) {
+    this.endMarkerLookConfig = t;
+  }
+  /**
+   * Look configuration used to derive the current look of the end marker of this connection.
+   * @private
+   */
+  get endMarkerLookConfig() {
+    return this._endMarkerLookConfig;
+  }
   /**
    * Sets the look configuration of the end marker to override the one determined by the type.
    * `null` stands for no marker and `undefined` resets it to the one determined by the type.
    * @private
    */
-  set endMarkerLook(t) {
-    if (t) {
+  set endMarkerLookConfig(t) {
+    if (this._endMarkerLookConfig = t, t) {
       const e = st(t);
       this._defaultEndMarkerLook = {
         ...this._defaultEndMarkerLook,
@@ -1093,16 +1144,16 @@ class dt extends It {
     }
   }
   getPriority() {
-    return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : Nt;
+    return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : Pt;
   }
 }
-class Eo extends ft {
+class Mo extends ft {
   /**
    * Instance a set of connections for the given model. This method is used internally.
    * @private
    */
   constructor(t) {
-    super(), this.types = new Jt(), this.model = t;
+    super(), this.types = new Qt(), this.model = t;
   }
   /**
    * Instance a new connection and add it to this set.
@@ -1115,7 +1166,7 @@ class Eo extends ft {
    */
   new(t, e, a, l) {
     let n;
-    if (t instanceof Fe)
+    if (t instanceof Ue)
       n = t;
     else {
       const r = this.types.get(t);
@@ -1149,7 +1200,7 @@ const V = {
   selectedColor: "#000000",
   backgroundColor: "#00000000",
   horizontalAlign: Lt.Center,
-  verticalAlign: Zt.Center,
+  verticalAlign: Kt.Center,
   orientation: g.Top,
   fit: !1,
   shrink: !0
@@ -1208,10 +1259,10 @@ class ht extends It {
     this.coords = t, this.updateInView();
   }
   getPriority() {
-    return this.rootElement?.getPriority() || Nt;
+    return this.rootElement?.getPriority() || Pt;
   }
 }
-class Mo extends ft {
+class To extends ft {
   /**
    * Instance a set of fields for the given model. This method is used internally.
    * @private
@@ -1249,22 +1300,22 @@ class Mo extends ft {
     e && (e.rootElement?.label !== void 0 && e.rootElement.label === e && (e.rootElement.label = void 0), super.remove(t), e.updateInView());
   }
 }
-const K = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 || s.margin.length === 2 ? s.margin[0] : (s.margin.length === 3, s.margin[2]), B = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 ? s.margin[0] : s.margin.length === 2 || s.margin.length === 3 ? s.margin[1] : s.margin[3], ot = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 ? s.margin[0] : (s.margin.length === 2 || s.margin.length === 3, s.margin[1]), F = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : (s.margin.length === 1 || s.margin.length === 2 || s.margin.length === 3, s.margin[0]), Rt = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 || s.padding.length === 2 ? s.padding[0] : (s.padding.length === 3, s.padding[2]), Vt = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 ? s.padding[0] : s.padding.length === 2 || s.padding.length === 3 ? s.padding[1] : s.padding[3], Ot = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 ? s.padding[0] : (s.padding.length === 2 || s.padding.length === 3, s.padding[1]), Ht = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : (s.padding.length === 1 || s.padding.length === 2 || s.padding.length === 3, s.padding[0]), Ee = 1, Me = 1, To = 1, No = 1;
-class Po {
+const K = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 || s.margin.length === 2 ? s.margin[0] : (s.margin.length === 3, s.margin[2]), B = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 ? s.margin[0] : s.margin.length === 2 || s.margin.length === 3 ? s.margin[1] : s.margin[3], ot = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 ? s.margin[0] : (s.margin.length === 2 || s.margin.length === 3, s.margin[1]), F = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : (s.margin.length === 1 || s.margin.length === 2 || s.margin.length === 3, s.margin[0]), Vt = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 || s.padding.length === 2 ? s.padding[0] : (s.padding.length === 3, s.padding[2]), Ot = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 ? s.padding[0] : s.padding.length === 2 || s.padding.length === 3 ? s.padding[1] : s.padding[3], Ht = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 ? s.padding[0] : (s.padding.length === 2 || s.padding.length === 3, s.padding[1]), _t = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : (s.padding.length === 1 || s.padding.length === 2 || s.padding.length === 3, s.padding[0]), Me = 1, Te = 1, No = 1, Po = 1;
+class zo {
   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 = [];
     for (const e of t.sections) {
       const a = [];
       this.sections.push(a);
       for (const l of e)
-        a.push(new zo(l));
+        a.push(new Ro(l));
     }
   }
 }
-class zo {
+class Ro {
   constructor(t) {
-    this.label = t.label || null, this.ports = t.ports || [], this.priority = t.priority || Nt, this.resizableX = t.resizableX, this.resizableY = t.resizableY;
-    const e = st(t.look || Ue);
+    this.label = t.label || null, this.ports = t.ports || [], this.priority = t.priority || Pt, this.resizableX = t.resizableX, this.resizableY = t.resizableY;
+    const e = st(t.look || De);
     this.defaultLook = e.defaultLook, this.selectedLook = e.selectedLook, this.highlightedLook = e.highlightedLook, this.selectedAndHighlightedLook = e.selectedAndHighlightedLook;
   }
 }
@@ -1293,13 +1344,27 @@ class D extends It {
   get look() {
     return this.selected ? this.highlighted ? this._selectedAndHighlightedLook !== void 0 ? this._selectedAndHighlightedLook : this.type?.selectedAndHighlightedLook || this.node?.look : this._selectedLook !== void 0 ? this._selectedLook : this.type?.selectedLook || this.node?.look : this.highlighted ? this._highlightedLook !== void 0 ? this._highlightedLook : this.type?.highlightedLook || this.node?.look : this._defaultLook !== void 0 ? this._defaultLook : this.type?.defaultLook || this.node?.look;
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(t) {
+    this.lookConfig = t;
+  }
+  /**
+   * Look configuration used to derive the current look of this section.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(t) {
-    if (t) {
+  set lookConfig(t) {
+    if (this._lookConfig = t, t) {
       const e = st(t);
       this._defaultLook = {
         ...this._defaultLook,
@@ -1334,13 +1399,13 @@ class D extends It {
     return this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode];
   }
   getMinWidth() {
-    return this.node?.type?.sectionGrid?.minWidths?.[this.indexXInNode] || To;
+    return this.node?.type?.sectionGrid?.minWidths?.[this.indexXInNode] || No;
   }
   getMinHeight() {
-    return this.node?.type?.sectionGrid?.minHeights?.[this.indexYInNode] || No;
+    return this.node?.type?.sectionGrid?.minHeights?.[this.indexYInNode] || Po;
   }
   getPriority() {
-    return this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode]?.priority || Nt;
+    return this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode]?.priority || Pt;
   }
   /**
    * Returns whether this section can be resized horizontally.
@@ -1480,7 +1545,7 @@ class D extends It {
     const l = [this.coords[0], this.coords[0] + this.width], n = [this.coords[1], this.coords[1] + this.height];
     for (const r of this.ports)
       r.move(
-        Kt(
+        qt(
           r.coords,
           e,
           a,
@@ -1497,7 +1562,7 @@ class D extends It {
     ], this.label.width = this.width - B(i?.label) - ot(i?.label), this.label.height = this.height - F(i?.label) - K(i?.label), this.label.updateInView());
     for (const r of this.decorators)
       r.move(
-        Kt(
+        qt(
           r.coords,
           e,
           a,
@@ -1510,7 +1575,7 @@ class D extends It {
     this.model.canvas?.autoTightenConnections !== !1 && this.getConnections().forEach((r) => r.tighten()), this.updateInView();
   }
 }
-class Ro extends ft {
+class Vo extends ft {
   /**
    * Instance a set of sections for the given model. This method is used internally.
    * @private
@@ -1557,7 +1622,7 @@ class Ro extends ft {
           const m = {
             ...V,
             ...y.type?.label
-          }, p = 6 * m.fontSize + Vt(m) + Ot(m), u = m.fontSize + Ht(m) + Rt(m);
+          }, p = 6 * m.fontSize + Ot(m) + Ht(m), u = m.fontSize + _t(m) + Vt(m);
           let k;
           switch (y.direction) {
             case g.Bottom:
@@ -1634,7 +1699,7 @@ class Ro extends ft {
     }
   }
 }
-const Ue = {
+const De = {
   lookType: "shaped-look",
   shape: Tt.Rectangle,
   fillColor: "#FFFFFF",
@@ -1661,22 +1726,22 @@ const Ue = {
   ports: [],
   decorators: [],
   sectionGrid: null,
-  look: Ue,
+  look: De,
   isUnique: !1,
   canBeParentless: !0,
   childrenTypes: [],
-  priority: Nt,
+  priority: Pt,
   properties: []
 };
-class De {
+class Be {
   constructor(t) {
     const e = {
       ...gt,
       ...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.snapToGridOffset = e.snapToGridOffset, this.bottomPadding = Oo(e), this.leftPadding = Ho(e), this.rightPadding = _o(e), this.topPadding = Go(e), this.label = e.label, this.ports = e.ports, this.decorators = e.decorators, this.sectionGrid = e.sectionGrid ? new Po(e.sectionGrid) : null;
+    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.snapToGridOffset = e.snapToGridOffset, this.bottomPadding = Ho(e), this.leftPadding = _o(e), this.rightPadding = Go(e), this.topPadding = Fo(e), this.label = e.label, this.ports = e.ports, this.decorators = e.decorators, this.sectionGrid = e.sectionGrid ? new zo(e.sectionGrid) : null;
     const a = st(e.look);
-    this.defaultLook = a.defaultLook, this.selectedLook = a.selectedLook, this.highlightedLook = a.highlightedLook, this.selectedAndHighlightedLook = a.selectedAndHighlightedLook, this.isUnique = e.isUnique, this.canBeParentless = e.canBeParentless, this.childrenTypes = e.childrenTypes, this.priority = e.priority, this.propertySet = new Qt(t?.properties || []);
+    this.defaultLook = a.defaultLook, this.selectedLook = a.selectedLook, this.highlightedLook = a.highlightedLook, this.selectedAndHighlightedLook = a.selectedAndHighlightedLook, this.isUnique = e.isUnique, this.canBeParentless = e.canBeParentless, this.childrenTypes = e.childrenTypes, this.priority = e.priority, this.propertySet = new te(t?.properties || []);
   }
 }
 class z extends It {
@@ -1719,13 +1784,27 @@ class z extends It {
   get look() {
     return this.selected ? this.highlighted ? this._selectedAndHighlightedLook !== void 0 ? this._selectedAndHighlightedLook : this.type.selectedAndHighlightedLook : this._selectedLook !== void 0 ? this._selectedLook : this.type.selectedLook : this.highlighted ? this._highlightedLook !== void 0 ? this._highlightedLook : this.type.highlightedLook : this._defaultLook !== void 0 ? this._defaultLook : this.type.defaultLook;
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(t) {
+    this.lookConfig = t;
+  }
+  /**
+   * Look configuration used to derive the current look of this node.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(t) {
-    if (t) {
+  set lookConfig(t) {
+    if (this._lookConfig = t, t) {
       const e = st(t);
       this._defaultLook = {
         ...this._defaultLook,
@@ -2088,7 +2167,7 @@ class z extends It {
     }
     for (const i of this.ports)
       i.move(
-        Kt(
+        qt(
           i.coords,
           e,
           a,
@@ -2104,7 +2183,7 @@ class z extends It {
     ], this.label.width = this.width - B(this.type.label) - ot(this.type.label), this.label.height = this.height - F(this.type.label) - K(this.type.label), this.label.updateInView());
     for (const i of this.decorators)
       i.move(
-        Kt(
+        qt(
           i.coords,
           e,
           a,
@@ -2219,13 +2298,13 @@ class z extends It {
     this.stretch(g.Bottom, e + a);
   }
 }
-class Vo extends ft {
+class Oo extends ft {
   /**
    * Instance a set of nodes for the given model. This method is used internally.
    * @private
    */
   constructor(t) {
-    super(), this.types = new Jt(), this.model = t;
+    super(), this.types = new Qt(), this.model = t;
   }
   /**
    * Instance a new node and add it to this set.
@@ -2237,7 +2316,7 @@ class Vo extends ft {
    */
   new(t, e, a) {
     let l;
-    if (t instanceof De)
+    if (t instanceof Be)
       l = t;
     else {
       const i = this.types.get(t);
@@ -2256,11 +2335,11 @@ class Vo extends ft {
             d,
             r,
             [o, i],
-            l.sectionGrid.defaultWidths?.[d] || Ee,
-            l.sectionGrid.defaultHeights?.[r] || Me,
+            l.sectionGrid.defaultWidths?.[d] || Me,
+            l.sectionGrid.defaultHeights?.[r] || Te,
             `${n.id}_${r}_${d}`
-          ), o += (l.sectionGrid.defaultWidths?.[d] || Ee) + (l.sectionGrid.margin || 0);
-        i += (l.sectionGrid.defaultHeights?.[r] || Me) + (l.sectionGrid.margin || 0);
+          ), o += (l.sectionGrid.defaultWidths?.[d] || Me) + (l.sectionGrid.margin || 0);
+        i += (l.sectionGrid.defaultHeights?.[r] || Te) + (l.sectionGrid.margin || 0);
       }
     }
     if (l.ports.length > 0)
@@ -2285,7 +2364,7 @@ class Vo extends ft {
           const c = {
             ...V,
             ...d.type?.label
-          }, h = 6 * c.fontSize + Vt(c) + Ot(c), f = c.fontSize + Ht(c) + Rt(c);
+          }, h = 6 * c.fontSize + Ot(c) + Ht(c), f = c.fontSize + _t(c) + Vt(c);
           let y;
           switch (d.direction) {
             case g.Bottom:
@@ -2398,12 +2477,12 @@ class Vo extends ft {
     return a;
   }
 }
-const Be = (s) => {
+const Ye = (s) => {
   for (let t = 0; t < s.length; ++t)
     for (let e = 0; e < s.length; ++e)
       e !== t && s[e].isAncestorOf(s[t]) && (s.splice(e, 1), --e, t > e && --t);
   return s;
-}, Oo = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : s.padding.length === 1 || s.padding.length === 2 ? s.padding[0] : (s.padding.length === 3, s.padding[2]), Ho = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : s.padding.length === 1 ? s.padding[0] : s.padding.length === 2 || s.padding.length === 3 ? s.padding[1] : s.padding[3], _o = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : s.padding.length === 1 ? s.padding[0] : (s.padding.length === 2 || s.padding.length === 3, s.padding[1]), Go = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : (s.padding.length === 1 || s.padding.length === 2 || s.padding.length === 3, s.padding[0]), Ye = {
+}, Ho = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : s.padding.length === 1 || s.padding.length === 2 ? s.padding[0] : (s.padding.length === 3, s.padding[2]), _o = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : s.padding.length === 1 ? s.padding[0] : s.padding.length === 2 || s.padding.length === 3 ? s.padding[1] : s.padding[3], Go = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : s.padding.length === 1 ? s.padding[0] : (s.padding.length === 2 || s.padding.length === 3, s.padding[1]), Fo = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : (s.padding.length === 1 || s.padding.length === 2 || s.padding.length === 3, s.padding[0]), Xe = {
   lookType: "shaped-look",
   shape: Tt.Ellipse,
   fillColor: "transparent",
@@ -2415,18 +2494,18 @@ const Be = (s) => {
   highlighted: {
     fillColor: "rgba(0, 255, 255, 0.5)"
   }
-}, Xt = st(Ye), Xe = {
+}, jt = st(Xe), je = {
   name: "",
   label: null,
   allowsOutgoing: !0,
   allowsIncoming: !0,
   width: 24,
-  look: Ye
+  look: Xe
 };
-class Fo {
+class Uo {
   constructor(t) {
     const e = {
-      ...Xe,
+      ...je,
       ...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;
@@ -2487,15 +2566,29 @@ class bt extends It {
    * @private
    */
   get look() {
-    return this.selected ? this.highlighted ? this._selectedAndHighlightedLook !== void 0 ? this._selectedAndHighlightedLook : (this.type || Xt)?.selectedAndHighlightedLook : this._selectedLook !== void 0 ? this._selectedLook : (this.type || Xt)?.selectedLook : this.highlighted ? this._highlightedLook !== void 0 ? this._highlightedLook : (this.type || Xt)?.highlightedLook : this._defaultLook !== void 0 ? this._defaultLook : (this.type || Xt)?.defaultLook;
+    return this.selected ? this.highlighted ? this._selectedAndHighlightedLook !== void 0 ? this._selectedAndHighlightedLook : (this.type || jt)?.selectedAndHighlightedLook : this._selectedLook !== void 0 ? this._selectedLook : (this.type || jt)?.selectedLook : this.highlighted ? this._highlightedLook !== void 0 ? this._highlightedLook : (this.type || jt)?.highlightedLook : this._defaultLook !== void 0 ? this._defaultLook : (this.type || jt)?.defaultLook;
+  }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(t) {
+    this.lookConfig = t;
+  }
+  /**
+   * Look configuration used to derive the current look of this port.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
   }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(t) {
-    if (t) {
+  set lookConfig(t) {
+    if (this._lookConfig = t, t) {
       const e = st(
         t
       );
@@ -2520,7 +2613,7 @@ class bt extends It {
    * @private
    */
   get width() {
-    return this.type?.width || Xe.width;
+    return this.type?.width || je.width;
   }
   /**
    * Current height of this port. Same as the width.
@@ -2570,7 +2663,7 @@ class bt extends It {
       return this.rootElement.node;
   }
   getPriority() {
-    return this.rootElement?.getPriority() || Nt;
+    return this.rootElement?.getPriority() || Pt;
   }
   /**
    * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
@@ -2593,16 +2686,16 @@ class bt extends It {
     ]), this.updateInView();
   }
   distanceTo(t) {
-    return Oe(this.coords, t);
+    return He(this.coords, t);
   }
 }
-class Uo extends ft {
+class Do extends ft {
   /**
    * Instance a set of ports for the given model. This method is used internally.
    * @private
    */
   constructor(t) {
-    super(), this.types = new Jt(), this.model = t;
+    super(), this.types = new Qt(), this.model = t;
   }
   /**
    * Instance a new port and add it to this set. This method is normally called when instancing an element with a port and it is rarely called by itself.
@@ -2633,7 +2726,7 @@ class Uo extends ft {
     }
   }
 }
-class je {
+class We {
   import(t, e) {
     t.clear(), e.id && (t.id = e.id), t.name = e.name, t.description = e.description, t.type = e.type, t.createdAt = new Date(e.createdAt), t.updatedAt = new Date(e.updatedAt);
     for (const a of e.nodes || [])
@@ -2890,14 +2983,14 @@ class je {
     t && e && (t.selfRemoved = e.selfRemoved, t.selfRemovedTimestamp = e.selfRemovedTimestamp, t.textTimestamp = e.textTimestamp);
   }
 }
-class te {
+class ee {
   constructor(t, e, a, l, n, i, r) {
     this.canvas = t, this.id = e, this.typeId = a, this.coords = l, this.parentId = n, this.label = i, this.values = r;
   }
   do() {
     const t = this.canvas.model.nodes.new(this.typeId, this.coords, this.id);
     this.parentId !== void 0 && this.canvas.model.nodes.get(this.parentId)?.addChild(t), t.label && (t.label.text = this.label || ""), this.values !== void 0 ? t.valueSet.setValues(
-      structuredClone({
+      Nt({
         ...t.valueSet.getValues(),
         ...this.values
       })
@@ -2915,7 +3008,7 @@ class te {
     };
   }
   static deserialize(t, e) {
-    return new te(
+    return new ee(
       t,
       e.id,
       e.typeId,
@@ -2926,7 +3019,7 @@ class te {
     );
   }
 }
-class be {
+class ke {
   constructor(t, e, a, l, n, i, r) {
     this.canvas = t, this.nodeId = e, this.copyColumnIndex = a, this.copyRowIndex = l, this.removeColumnIndex = n, this.removeRowIndex = i, this.timestamp = r;
   }
@@ -2946,7 +3039,7 @@ class be {
     };
   }
   static deserialize(t, e) {
-    return new be(
+    return new ke(
       t,
       e.nodeId,
       e.copyColumnIndex,
@@ -2957,7 +3050,7 @@ class be {
     );
   }
 }
-class ke {
+class we {
   constructor(t, e, a) {
     this.canvas = t, this.to = e, this.timestamp = a;
   }
@@ -2978,14 +3071,14 @@ class ke {
     };
   }
   static deserialize(t, e) {
-    return new ke(
+    return new we(
       t,
       e.to,
       e.timestamp
     );
   }
 }
-class _t {
+class Gt {
   constructor(t, e, a, l) {
     this.canvas = t, this.nodeIds = e, this.delta = a, this.timestamp = l;
   }
@@ -3007,7 +3100,7 @@ class _t {
     };
   }
   static deserialize(t, e) {
-    return new _t(
+    return new Gt(
       t,
       e.nodeIds,
       e.delta,
@@ -3048,7 +3141,7 @@ class it {
     );
   }
 }
-class Gt {
+class Ft {
   constructor(t, e, a, l, n) {
     this.canvas = t, this.childId = e, this.parentId = a, this.childGeometry = l, this.timestamp = n;
   }
@@ -3066,7 +3159,7 @@ class Gt {
     };
   }
   static deserialize(t, e) {
-    return new Gt(
+    return new Ft(
       t,
       e.childId,
       e.parentId,
@@ -3075,7 +3168,7 @@ class Gt {
     );
   }
 }
-class ee {
+class oe {
   constructor(t, e, a, l, n) {
     this.canvas = t, this.id = e, this.typeId = a, this.startId = l, this.endId = n;
   }
@@ -3093,7 +3186,7 @@ class ee {
     };
   }
   static deserialize(t, e) {
-    return new ee(
+    return new oe(
       t,
       e.id,
       e.typeId,
@@ -3199,12 +3292,12 @@ class at {
     );
   }
 }
-class oe {
+class ie {
   constructor(t, e, a) {
     this.canvas = t, this.nodes = e, this.connections = a;
   }
   do() {
-    const t = new je();
+    const t = new We();
     this.canvas.userSelection.clear();
     for (const e of this.nodes) {
       const a = t.importNode(this.canvas.model, e);
@@ -3226,16 +3319,16 @@ class oe {
     };
   }
   static deserialize(t, e) {
-    return new oe(
+    return new ie(
       t,
       e.nodes,
       e.connections
     );
   }
 }
-class Do {
+class Bo {
   constructor(t) {
-    this.isInRoom = !1, this.canvas = t, this.replicaId = xe();
+    this.isInRoom = !1, this.canvas = t, this.replicaId = Le();
   }
   /**
    * Returns a fresh timestamp, suitable for use by new CollabActions.
@@ -3247,7 +3340,7 @@ class Do {
    * Returns a fresh unique ID, suitable for use by new CollabActions.
    */
   freshId() {
-    return "id" + xe();
+    return "id" + Le();
   }
   /**
    * Performs the action - immediately locally, and eventually for remote collaborators.
@@ -3270,22 +3363,22 @@ class Do {
       t.timestamp[0]
     )), t.type) {
       case "addNode": {
-        te.deserialize(this.canvas, t).do();
+        ee.deserialize(this.canvas, t).do();
         break;
       }
       case "addSection": {
-        be.deserialize(this.canvas, t).do();
+        ke.deserialize(this.canvas, t).do();
         break;
       }
       case "applyLayout": {
-        ke.deserialize(
+        we.deserialize(
           this.canvas,
           t
         ).do();
         break;
       }
       case "move": {
-        _t.deserialize(this.canvas, t).do();
+        Gt.deserialize(this.canvas, t).do();
         break;
       }
       case "setGeometry": {
@@ -3296,11 +3389,11 @@ class Do {
         break;
       }
       case "setParent": {
-        Gt.deserialize(this.canvas, t).do();
+        Ft.deserialize(this.canvas, t).do();
         break;
       }
       case "addConnection": {
-        ee.deserialize(
+        oe.deserialize(
           this.canvas,
           t
         ).do();
@@ -3325,7 +3418,7 @@ class Do {
         break;
       }
       case "paste": {
-        oe.deserialize(this.canvas, t).do();
+        ie.deserialize(this.canvas, t).do();
         break;
       }
       default:
@@ -3336,7 +3429,7 @@ class Do {
     }
   }
 }
-class Bo {
+class Yo {
   constructor(t, e) {
     this.canvas = t, this.maximum = e, this.history = [], this.index = 0;
   }
@@ -3389,12 +3482,12 @@ class Bo {
   }
 }
 var w = /* @__PURE__ */ ((s) => (s.AddConnection = "add-connection", s.AddNode = "add-node", s.AddSectionAction = "add-section", s.ApplyLayout = "apply-layout", s.Clipboard = "clipboard", s.ContextMenu = "context-menu", s.EditField = "edit-field", s.MoveNode = "move-node", s.Paste = "paste", s.Remove = "remove", s.StretchNode = "stretch-node", s.StretchSection = "stretch-section", s.UpdateValues = "update-values", s.Zoom = "zoom", s))(w || {});
-class Yo {
+class Xo {
   constructor(t, e, a, l, n, i, r, o, d) {
     this.canvas = t, this.type = e, this.coords = a, this.parentId = l, this.ancestorId = n, this.fromAncestorGeometry = i, this.toAncestorGeometry = r, this.label = o, this.values = d, this.id = this.canvas.collabEngine.freshId();
   }
   do() {
-    const t = new te(
+    const t = new ee(
       this.canvas,
       this.id,
       this.type.id,
@@ -3459,12 +3552,12 @@ class Yo {
     return t === void 0;
   }
 }
-class re {
+class ae {
   constructor(t, e, a) {
     this.canvas = t, this.nodeIds = e, this.delta = a;
   }
   do() {
-    const t = new _t(
+    const t = new Gt(
       this.canvas,
       this.nodeIds,
       this.delta,
@@ -3473,7 +3566,7 @@ class re {
     return this.canvas.collabEngine.doCollaboratively(t), this.nodeIds.map((e) => this.canvas.model.nodes.get(e) !== void 0).includes(!0) && (this.delta[0] !== 0 || this.delta[1] !== 0);
   }
   undo() {
-    const t = new _t(
+    const t = new Gt(
       this.canvas,
       this.nodeIds,
       [-this.delta[0], -this.delta[1]],
@@ -3547,12 +3640,12 @@ class X {
     return t !== void 0;
   }
 }
-class Xo {
+class jo {
   constructor(t, e, a, l, n, i, r, o, d) {
     this.canvas = t, this.childId = e, this.fromParentId = a, this.toParentId = l, this.fromChildGeometry = n, this.toChildGeometry = i, this.ancestorId = r, this.fromAncestorGeometry = o, this.toAncestorGeometry = d;
   }
   do() {
-    const t = this.canvas.model.nodes.get(this.childId), e = new Gt(
+    const t = this.canvas.model.nodes.get(this.childId), e = new Ft(
       this.canvas,
       this.childId,
       this.toParentId,
@@ -3571,7 +3664,7 @@ class Xo {
     return t !== void 0;
   }
   undo() {
-    const t = this.canvas.model.nodes.get(this.childId), e = new Gt(
+    const t = this.canvas.model.nodes.get(this.childId), e = new Ft(
       this.canvas,
       this.childId,
       this.fromParentId,
@@ -3593,12 +3686,12 @@ class Xo {
     return this.do();
   }
 }
-class ae {
+class le {
   constructor(t, e, a, l) {
     this.canvas = t, this.type = e, this.startId = a, this.endId = l, this.id = this.canvas.collabEngine.freshId();
   }
   do() {
-    const t = new ee(
+    const t = new oe(
       this.canvas,
       this.id,
       this.type.id,
@@ -3634,7 +3727,7 @@ class ae {
     return this.canvas.collabEngine.doCollaboratively(e), t === void 0;
   }
 }
-class Te {
+class Ne {
   constructor(t, e, a, l) {
     this.canvas = t, this.fieldId = e, this.from = a, this.to = l;
   }
@@ -3676,7 +3769,7 @@ class Te {
     return t !== void 0;
   }
 }
-class jo {
+class Wo {
   constructor(t, e, a, l) {
     this.canvas = t, this.id = e, this.from = a, this.to = l;
   }
@@ -3716,7 +3809,7 @@ class jo {
     return !e.rootElement.removed;
   }
 }
-class Wo {
+class Zo {
   constructor(t, e, a, l, n, i) {
     this.canvas = t, this.nodeIds = e, this.sectionIds = a, this.portIds = l, this.connectionIds = n, this.fieldIds = i;
   }
@@ -3758,7 +3851,7 @@ class Wo {
     return this.do();
   }
 }
-class Zo {
+class Ko {
   constructor(t, e, a, l) {
     this.canvas = t, this.nodes = e, this.connections = a, this.coords = l;
   }
@@ -3811,7 +3904,7 @@ class Zo {
             n.points[r][1] + e[1]
           ];
     }
-    const l = new oe(
+    const l = new ie(
       this.canvas,
       this.nodes,
       this.connections
@@ -3849,7 +3942,7 @@ class Zo {
     return this.canvas.collabEngine.doCollaboratively(e), t;
   }
 }
-class ie {
+class se {
   constructor(t) {
     this.type = t, this.defaultPrevented = !1;
   }
@@ -3857,8 +3950,8 @@ class ie {
     this.defaultPrevented = !0;
   }
 }
-var We = /* @__PURE__ */ ((s) => (s[s.DoubleClick = 0] = "DoubleClick", s[s.SecondaryClick = 1] = "SecondaryClick", s[s.Selection = 2] = "Selection", s[s.Highlight = 3] = "Highlight", s))(We || {});
-class pt extends ie {
+var Ze = /* @__PURE__ */ ((s) => (s[s.DoubleClick = 0] = "DoubleClick", s[s.SecondaryClick = 1] = "SecondaryClick", s[s.Selection = 2] = "Selection", s[s.Highlight = 3] = "Highlight", s))(Ze || {});
+class pt extends se {
   /**
    * Create a diagram double click event.
    *
@@ -3873,7 +3966,7 @@ class pt extends ie {
     ), this.cause = t, this.target = e, this.coords = a;
   }
 }
-class mt extends ie {
+class mt extends se {
   /**
    * Create a diagram secondary click event.
    *
@@ -3888,7 +3981,7 @@ class mt extends ie {
     ), this.cause = t, this.target = e, this.coords = a;
   }
 }
-class G extends ie {
+class G extends se {
   /**
    * Create a diagram selection event.
    *
@@ -3902,7 +3995,7 @@ class G extends ie {
     ), this.targets = t, this.selected = e;
   }
 }
-class Q extends ie {
+class Q extends se {
   /**
    * Create a diagram highlight event.
    *
@@ -3915,7 +4008,7 @@ class Q extends ie {
     ), this.target = t;
   }
 }
-class Ze extends It {
+class Ke extends It {
   constructor(t, e, a, l, n, i, r, o, d = "floating", c = "floating") {
     if (t.objects.get(o) !== void 0)
       throw new Error(`DiagramDecorator with id "${o}" already exists`);
@@ -3944,7 +4037,7 @@ class Ze extends It {
     return this.priority;
   }
 }
-class Ko extends ft {
+class qo extends ft {
   /**
    * Instance a set of decorators for the given model. This method is used internally.
    * @private
@@ -3964,7 +4057,7 @@ class Ko extends ft {
    * @returns The instanced decorator.
    */
   new(t, e, a, l, n, i, r, o = "floating", d = "floating") {
-    const c = new Ze(
+    const c = new Ke(
       this.model,
       t,
       e,
@@ -3983,7 +4076,7 @@ class Ko extends ft {
     e && ((e.rootElement instanceof z || e.rootElement instanceof D) && Y(e.rootElement.decorators, e), super.remove(t), e.updateInView());
   }
 }
-class qo extends It {
+class Jo extends It {
   constructor(t, e, a, l, n, i, r) {
     if (t.objects.get(r) !== void 0)
       throw new Error(`DiagramObject with id "${r}" already exists`);
@@ -4012,7 +4105,7 @@ class qo extends It {
     return this.priority;
   }
 }
-class Jo extends ft {
+class Qo extends ft {
   /**
    * Instance a set of objects for the given model. This method is used internally.
    * @private
@@ -4032,7 +4125,7 @@ class Jo extends ft {
    * @returns The instanced object.
    */
   new(t, e, a, l, n, i) {
-    const r = new qo(
+    const r = new Jo(
       this.model,
       t,
       e,
@@ -4048,9 +4141,9 @@ class Jo extends ft {
     e && (super.remove(t), e.updateInView());
   }
 }
-class Ke {
+class qe {
   constructor(t, e, a, l, n, i = []) {
-    this.nodes = new Vo(this), this.sections = new Ro(this), this.ports = new Uo(this), this.connections = new Eo(this), this.fields = new Mo(this), this.objects = new Jo(this), this.decorators = new Ko(this), this.canvas = t, this.id = e, this.name = a, this.description = l, this.type = n, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new yt(new Qt(i), this);
+    this.nodes = new Oo(this), this.sections = new Vo(this), this.ports = new Do(this), this.connections = new Mo(this), this.fields = new To(this), this.objects = new Qo(this), this.decorators = new qo(this), this.canvas = t, this.id = e, this.name = a, this.description = l, this.type = n, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new yt(new te(i), this);
   }
   /**
    * Deletes everything in this diagram.
@@ -4060,7 +4153,7 @@ class Ke {
     this.canvas?.cancelAllUserActions(), this.id = void 0, this.name = "", this.description = void 0, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.nodes.clear(), this.sections.clear(), this.ports.clear(), this.connections.clear(), this.fields.clear(), this.objects.clear(), this.decorators.clear(), this.valueSet.resetValues(), this.canvas?.updateModelInView();
   }
 }
-const vt = (s) => !!s.button, le = (s, t, e, a, l, n, i, r) => fo(
+const vt = (s) => !!s.button, de = (s, t, e, a, l, n, i, r) => uo(
   s,
   [t, e],
   a,
@@ -4073,17 +4166,17 @@ const vt = (s) => !!s.button, le = (s, t, e, a, l, n, i, r) => fo(
   ) * n
 ), S = (s) => {
   s ? x.select("body").style("cursor", s) : x.select("body").style("cursor", L.Auto);
-}, ct = (s) => s instanceof z ? s : s instanceof D ? s.node || s : s.rootElement instanceof z || s.rootElement instanceof D || s.rootElement instanceof bt ? ct(s.rootElement) : s, de = (s) => {
+}, ct = (s) => s instanceof z ? s : s instanceof D ? s.node || s : s.rootElement instanceof z || s.rootElement instanceof D || s.rootElement instanceof bt ? ct(s.rootElement) : s, ce = (s) => {
   s.filter(".shaped-look").append("path"), s.filter(".image-look").append("image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "top-left-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "top-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "top-right-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "left-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "center-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "right-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "bottom-left-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "bottom-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "bottom-right-image").attr("preserveAspectRatio", "none");
-}, Pt = {
+}, zt = {
   fillColor: "#FFFFFF",
   borderColor: "#000000",
   borderThickness: 1,
-  borderStyle: ye.Solid
-}, ce = (s) => {
+  borderStyle: be.Solid
+}, he = (s) => {
   s.filter(".shaped-look").select("path").attr(
     "d",
-    (t) => pe(
+    (t) => me(
       t.look.shape || Tt.Rectangle,
       0,
       0,
@@ -4092,18 +4185,18 @@ const vt = (s) => !!s.button, le = (s, t, e, a, l, n, i, r) => fo(
     )
   ).attr(
     "fill",
-    (t) => t.look.fillColor || Pt.fillColor
+    (t) => t.look.fillColor || zt.fillColor
   ).attr(
     "stroke",
-    (t) => t.look.borderColor || Pt.borderColor
+    (t) => t.look.borderColor || zt.borderColor
   ).attr(
     "stroke-width",
-    (t) => `${t.look.borderThickness || Pt.borderThickness}px`
+    (t) => `${t.look.borderThickness || zt.borderThickness}px`
   ).attr(
     "stroke-dasharray",
-    (t) => ue(
-      t.look.borderStyle || Pt.borderStyle,
-      t.type?.defaultLook?.borderThickness || t.look?.borderThickness || Pt.borderThickness
+    (t) => pe(
+      t.look.borderStyle || zt.borderStyle,
+      t.type?.defaultLook?.borderThickness || t.look?.borderThickness || zt.borderThickness
     )
   ), s.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), s.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",
@@ -4142,13 +4235,13 @@ const vt = (s) => !!s.button, le = (s, t, e, a, l, n, i, r) => fo(
     "href",
     (t) => t.look.backgroundImageBottomRight
   );
-}, zt = {
+}, Rt = {
   style: "dots",
   color: "rgba(0, 0, 0, 0.1)",
   snap: !1,
   spacing: 10,
   thickness: 0.05
-}, Qo = (s, t, e) => {
+}, ti = (s, t, e) => {
   const a = t.append("defs");
   if (s.gridSize > 0 && isFinite(s.gridSize)) {
     const l = a.append("pattern").attr("id", e).attr("x", -s.gridSize / 2).attr("y", -s.gridSize / 2).attr("width", s.gridSize).attr("height", s.gridSize).attr("patternUnits", "userSpaceOnUse");
@@ -4168,17 +4261,17 @@ const vt = (s) => !!s.button, le = (s, t, e, a, l, n, i, r) => fo(
     }
     t.select("rect").attr("fill", `url(#${e})`);
   }
-}, me = 96, j = 32, xt = me + j, ti = Math.PI / 4, ei = 100, Ne = {
+}, ve = 96, j = 32, xt = ve + j, ei = Math.PI / 4, oi = 100, Pe = {
   customButtons: []
 };
-class oi {
+class ii {
   /**
    * Constructs a context menu object.
    * @public
    * @param canvas A canvas.
    */
   constructor(t, e) {
-    this.canvas = t, this.config = e || Ne;
+    this.canvas = t, this.config = e || Pe;
   }
   /**
    * Opens the context menu at the location determined by the given mouse event.
@@ -4221,7 +4314,7 @@ class oi {
         i.userSelection.removeFromModel(), i.cancelAllUserActions();
       }
     });
-    for (const i of this.config.customButtons || Ne.customButtons)
+    for (const i of this.config.customButtons || Pe.customButtons)
       (i.condition === void 0 || i.condition(this.canvas)) && n.push(i);
     n.length === 0 && n.push({
       name: "NONE",
@@ -4229,7 +4322,7 @@ class oi {
       onPress: void 0
     });
     for (let i = 0; i < n.length; ++i) {
-      const r = n[i], o = r.onPress, d = (i + 0.5 - n.length / 2) * ti, c = l.append("xhtml:div").attr(
+      const r = n[i], o = r.onPress, d = (i + 0.5 - n.length / 2) * ei, c = l.append("xhtml:div").attr(
         "class",
         `daga-context-menu-button ${r.onPress !== void 0 ? " daga-clickable" : ""}`
       ).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($.Click, (h) => {
@@ -4237,14 +4330,14 @@ class oi {
       }).on($.KeyDown, (h) => {
         o && h.key === Z.Enter && (h.preventDefault(), o(this.canvas));
       });
-      r.imageClass !== void 0 ? c.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", r.imageClass) : r.image !== void 0 && c.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", r.image), c.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(r.name), c.transition().ease(x.easeLinear).duration(ei).tween("progress", () => (h) => {
+      r.imageClass !== void 0 ? c.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", r.imageClass) : r.image !== void 0 && c.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", r.image), c.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(r.name), c.transition().ease(x.easeLinear).duration(oi).tween("progress", () => (h) => {
         const f = d * h;
         return c.style(
           "left",
-          `${Math.sin(f) * me - j + xt}px`
+          `${Math.sin(f) * ve - j + xt}px`
         ).style(
           "top",
-          `${-Math.cos(f) * me - j + xt}px`
+          `${-Math.cos(f) * ve - j + xt}px`
         );
       });
     }
@@ -4257,7 +4350,7 @@ class oi {
     this.contextMenuContainer?.remove(), this.contextMenuContainer = void 0;
   }
 }
-class ii extends ft {
+class si extends ft {
   /**
    * Constructs a user highlight object.
    * @public
@@ -4279,7 +4372,7 @@ class ii extends ft {
    * @param element
    */
   focusOn(t) {
-    this.clear(), this.focus = t, (t instanceof ht || t instanceof Ze) && t.rootElement ? this.focusOn(t.rootElement) : this.add(t);
+    this.clear(), this.focus = t, (t instanceof ht || t instanceof Ke) && t.rootElement ? this.focusOn(t.rootElement) : this.add(t);
   }
   add(t) {
     if (super.add(t), t instanceof z) {
@@ -4311,13 +4404,13 @@ class ii extends ft {
     this.focus = void 0;
   }
 }
-const si = 1;
-class qe {
+const ni = 1;
+class Je {
   export(t, e = !1) {
     const a = {
       name: t.name,
       type: t.type,
-      typeVersion: si,
+      typeVersion: ni,
       createdAt: t.createdAt,
       updatedAt: t.updatedAt,
       nodes: [],
@@ -4455,17 +4548,17 @@ class qe {
     } : {};
   }
 }
-const ni = "Diagram properties";
-class ri extends ft {
+const ri = "Diagram properties";
+class ai extends ft {
   /**
    * Constructs a user selection object.
    * @public
    * @param canvas A canvas.
    */
-  constructor(t) {
-    super(), this.canvas = t, this.canvas.propertyEditorChanges$.pipe(ro(2e3)).subscribe(() => {
+  constructor(t, e) {
+    super(), this.canvas = t, this.canvas.propertyEditorChanges$.pipe(ao(2e3)).subscribe(() => {
       this.makeUpdateValuesAction();
-    });
+    }), console.log(e), this.diagramPropertiesText = e !== void 0 ? e : ri;
   }
   add(t) {
     if (!this.contains(t.id) && (this.length === 0 ? this.propertyEditorSelection === void 0 && (t instanceof z || t instanceof dt) ? this.openInPropertyEditor(t) : this.propertyEditorSelection === void 0 && t instanceof D ? this.openInPropertyEditor(t.node) : this.openInPropertyEditor(void 0) : this.openInPropertyEditor(void 0), super.add(t), t.updateInView(), t instanceof z && t.sections))
@@ -4514,7 +4607,7 @@ class ri extends ft {
       const t = [], e = [], a = [], l = [], n = [];
       for (const r of this.all())
         r instanceof z ? t.push(r.id) : r instanceof D ? e.push(r.id) : r instanceof bt ? a.push(r.id) : r instanceof dt ? l.push(r.id) : r instanceof ht && n.push(r.id);
-      const i = new Wo(
+      const i = new Zo(
         this.canvas,
         t,
         e,
@@ -4530,7 +4623,7 @@ class ri extends ft {
    * @public
    */
   copyToClipboard() {
-    const t = { type: "daga-user-selection", nodes: [], connections: [] }, e = new qe();
+    const t = { type: "daga-user-selection", nodes: [], connections: [] }, e = new Je();
     for (const a of this.all())
       a instanceof z && t.nodes.push(e.exportNode(a, !1)), a instanceof dt && t.connections.push(
         e.exportConnection(a, !1)
@@ -4554,7 +4647,7 @@ class ri extends ft {
         const a = JSON.parse(e);
         if (a.type !== "daga-user-selection")
           return;
-        const l = new Zo(
+        const l = new Ko(
           this.canvas,
           a.nodes,
           a.connections,
@@ -4580,26 +4673,22 @@ class ri extends ft {
     if (a === void 0)
       return;
     const l = t?.valueSet;
-    l ? (this.propertyEditorSelection = t, e && (this.propertyEditorValues = structuredClone(
-      l.getValues()
-    )), a && (t instanceof z || t instanceof dt ? (t instanceof z ? t.name ? a.title = `${t.type.name}: ${t.name}` : a.title = t.type.name : t instanceof dt && (a.title = t.type.name), a.valueSet = void 0, a.valueSet = l) : (a.title = ni, a.valueSet = void 0, a.valueSet = l))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, a && (a.title = "", a.valueSet = void 0));
+    l ? (this.propertyEditorSelection = t, e && (this.propertyEditorValues = Nt(l.getValues())), a && (t instanceof z || t instanceof dt ? (t instanceof z ? t.name ? a.title = `${t.type.name}: ${t.name}` : a.title = t.type.name : t instanceof dt && (a.title = t.type.name), a.valueSet = void 0, a.valueSet = l) : (a.title = this.diagramPropertiesText, a.valueSet = void 0, a.valueSet = l))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, a && (a.title = "", a.valueSet = void 0));
   }
   makeUpdateValuesAction() {
     if (this.propertyEditorSelection === void 0 || this.propertyEditorValues === void 0)
       return;
-    const t = this.propertyEditorSelection instanceof Ke ? void 0 : this.propertyEditorSelection.id;
+    const t = this.propertyEditorSelection instanceof qe ? void 0 : this.propertyEditorSelection.id;
     if (St(
       this.propertyEditorValues,
       this.propertyEditorSelection?.valueSet.getValues()
     ))
       return;
-    const e = this.propertyEditorValues, a = structuredClone(
-      this.propertyEditorSelection?.valueSet.getValues()
-    ), [l, n] = Ge(
+    const e = this.propertyEditorValues, a = Nt(this.propertyEditorSelection?.valueSet.getValues()), [l, n] = Fe(
       e,
       a,
       this.propertyEditorSelection?.valueSet
-    ), i = new jo(
+    ), i = new Wo(
       this.canvas,
       t,
       l,
@@ -4608,10 +4697,10 @@ class ri extends ft {
     i.do(), this.canvas.actionStack.add(i), this.propertyEditorValues = a;
   }
 }
-const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
-  const a = ai(e), l = Math.sin(a), n = Math.cos(a), i = (Math.abs(s * n) - Math.abs(t * l)) / (n * n - l * l), r = (Math.abs(s * l) - Math.abs(t * n)) / (l * l - n * n);
+const li = (s) => s * Math.PI / 180, ze = (s, t, e) => {
+  const a = li(e), l = Math.sin(a), n = Math.cos(a), i = (Math.abs(s * n) - Math.abs(t * l)) / (n * n - l * l), r = (Math.abs(s * l) - Math.abs(t * n)) / (l * l - n * n);
   return [i, r];
-}, li = 12, H = 6, di = 25, he = "diagram-connection-unfinished", qt = class qt {
+}, di = 12, H = 6, ci = 25, ge = "diagram-connection-unfinished", Jt = class Jt {
   /**
    * Constructs a canvas object.
    * @public
@@ -4619,21 +4708,24 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, 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 = x.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-${Jt.canvasCount++}`, this.zoomTransform = x.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new Xt(), this.diagramChange$ = new Xt(), this.diagramEvent$ = new Xt(), this.propertyEditorChanges$ = new Xt(), this.parentComponent = t, this.model = new qe(
       this,
       void 0,
       e.name || "unnamed",
       "",
       e.type || "",
       e.properties || []
-    ), this.userSelection = new ri(this), this.userHighlight = new ii(
+    ), this.userSelection = new ai(
+      this,
+      e.components?.propertyEditor?.title
+    ), this.userHighlight = new si(
       this,
       e.canvas?.highlightSections !== !1
-    ), this.contextMenu = new oi(this, e.canvas?.contextMenu), this.backgroundColor = e.canvas?.backgroundColor || "#FFFFFF", this.gridStyle = e.canvas?.grid?.style ?? zt.style, this.gridSize = e.canvas?.grid?.enabled === !1 || e.canvas?.grid === void 0 ? 0 : Math.abs(e.canvas?.grid?.spacing || zt.spacing), this.gridThickness = Math.abs(
-      e.canvas?.grid?.thickness || zt.thickness
-    ), this.gridColor = e.canvas?.grid?.color || zt.color, this.snapToGrid = e.canvas?.grid?.enabled === !1 || e.canvas?.grid === void 0 ? !1 : e.canvas?.grid?.snap || zt.snap, this.zoomFactor = e.canvas?.zoomFactor || 2, this.panRate = e.canvas?.panRate || 100, this.inferConnectionType = e.connectionSettings?.inferConnectionType || !1, this.autoTightenConnections = e.connectionSettings?.autoTighten !== !1, this.allowConnectionLoops = e.connectionSettings?.allowLoops || !1, this.allowSharingPorts = e.connectionSettings?.sharePorts !== !1, this.allowSharingBothPorts = e.connectionSettings?.shareBothPorts || !1, this.portHighlightRadius = e.connectionSettings?.portHighlightRadius || 100, this.multipleSelectionOn = !1, this.priorityThresholds = e.canvas?.priorityThresholds || [], this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : void 0, this.layoutFormat = e.layoutFormat, this.userActions = e.userActions || {}, this.validators = [], this.actionStack = new Bo(this, di), this.collabEngine = new Do(this), e.nodeTypes)
+    ), this.contextMenu = new ii(this, e.canvas?.contextMenu), this.backgroundColor = e.canvas?.backgroundColor || "#FFFFFF", this.gridStyle = e.canvas?.grid?.style ?? Rt.style, this.gridSize = e.canvas?.grid?.enabled === !1 || e.canvas?.grid === void 0 ? 0 : Math.abs(e.canvas?.grid?.spacing || Rt.spacing), this.gridThickness = Math.abs(
+      e.canvas?.grid?.thickness || Rt.thickness
+    ), this.gridColor = e.canvas?.grid?.color || Rt.color, this.snapToGrid = e.canvas?.grid?.enabled === !1 || e.canvas?.grid === void 0 ? !1 : e.canvas?.grid?.snap || Rt.snap, this.zoomFactor = e.canvas?.zoomFactor || 2, this.panRate = e.canvas?.panRate || 100, this.inferConnectionType = e.connectionSettings?.inferConnectionType || !1, this.autoTightenConnections = e.connectionSettings?.autoTighten !== !1, this.allowConnectionLoops = e.connectionSettings?.allowLoops || !1, this.allowSharingPorts = e.connectionSettings?.sharePorts !== !1, this.allowSharingBothPorts = e.connectionSettings?.shareBothPorts || !1, this.portHighlightRadius = e.connectionSettings?.portHighlightRadius || 100, this.multipleSelectionOn = !1, this.priorityThresholds = e.canvas?.priorityThresholds || [], this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : void 0, this.layoutFormat = e.layoutFormat, this.userActions = e.userActions || {}, this.validators = [], this.actionStack = new Yo(this, ci), this.collabEngine = new Bo(this), e.nodeTypes)
       for (const a of e.nodeTypes) {
-        const l = new De({
+        const l = new Be({
           ...e.nodeTypeDefaults,
           ...a
         });
@@ -4641,7 +4733,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       }
     if (e.portTypes)
       for (const a of e.portTypes) {
-        const l = new Fo({
+        const l = new Uo({
           ...e.portTypeDefaults,
           ...a
         });
@@ -4649,7 +4741,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       }
     if (e.connectionTypes) {
       for (const a of e.connectionTypes) {
-        const l = new Fe({
+        const l = new Ue({
           ...e.connectionTypeDefaults,
           ...a
         });
@@ -4737,7 +4829,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
     });
     const a = this.selectSVGElement().append("g").attr("class", "daga-canvas-view").attr("width", "100%").attr("height", "100%");
     a.call(
-      this.zoomBehavior = x.zoom().filter((l) => l.type !== $.DoubleClick).on(ge.Zoom, (l) => {
+      this.zoomBehavior = x.zoom().filter((l) => l.type !== $.DoubleClick).on(fe.Zoom, (l) => {
         if (l.sourceEvent) {
           if (!this.canUserPerformAction(w.Zoom)) {
             S(L.NotAllowed);
@@ -4751,7 +4843,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
           "patternTransform",
           n
         ), this.contextMenu.close();
-      }).on(ge.End, () => {
+      }).on(fe.End, () => {
         S();
       })
     ), a.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", this.backgroundColor).attr("stroke-width", "0").on($.MouseMove, (l) => {
@@ -4766,8 +4858,9 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
         const l = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
           new G(l, !1)
-        ), this.userSelection.openInPropertyEditor(this.model);
+        );
       }
+      this.userSelection.openInPropertyEditor(this.model);
     }).call(
       x.drag().filter((l) => this.multipleSelectionOn || vt(l)).on(I.Start, (l) => {
         this.startMultipleSelection(l);
@@ -4776,7 +4869,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       }).on(I.End, (l) => {
         this.finishMultipleSelection(l);
       })
-    ), Qo(this, a, this.backgroundPatternId), a.append("g").attr("class", "daga-canvas-elements");
+    ), ti(this, a, this.backgroundPatternId), a.append("g").attr("class", "daga-canvas-elements");
   }
   getZoomLevel() {
     return this.zoomTransform.k;
@@ -4910,7 +5003,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       }).on(I.End, (i, r) => {
         this.multipleSelectionOn || this.secondaryButton ? this.finishMultipleSelection(i) : this.finishMovingNode(i, r), this.secondaryButton = !1;
       })
-    ), de(
+    ), ce(
       l
     ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, r) => {
       this.canUserPerformAction(w.StretchNode) && r.type.resizableX && !r.removed && S(L.EWResize);
@@ -5030,7 +5123,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
         }
         S();
       })
-    ), n.attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1), ce(
+    ), n.attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1), he(
       n
     ), n.filter(".resizable-x").select("line.left-resizer").attr("x1", H / 2).attr("x2", H / 2).attr("y1", 0).attr("y2", (i) => i.height), n.filter(".resizable-y").select("line.top-resizer").attr("x1", 0).attr("x2", (i) => i.width).attr("y1", H / 2).attr("y2", H / 2), n.filter(".resizable-x").select("line.right-resizer").attr("x1", (i) => i.width - H / 2).attr("x2", (i) => i.width - H / 2).attr("y1", 0).attr("y2", (i) => i.height), n.filter(".resizable-y").select("line.bottom-resizer").attr("x1", 0).attr("x2", (i) => i.width).attr("y1", (i) => i.height - H / 2).attr("y2", (i) => i.height - H / 2);
   }
@@ -5103,7 +5196,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
         }
         this.secondaryButton = !1;
       })
-    ), de(
+    ), ce(
       l
     ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, r) => {
       this.canUserPerformAction(w.StretchSection) && r.getResizableX() && !r.removed && S(L.EWResize);
@@ -5245,7 +5338,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
         }
         S();
       })
-    ), n.attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1), ce(
+    ), n.attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1), he(
       n
     ), n.filter(".resizable-x").select("line.left-resizer").attr("x1", H / 2).attr("x2", H / 2).attr("y1", 0).attr("y2", (i) => i.height), n.filter(".resizable-y").select("line.top-resizer").attr("x1", 0).attr("x2", (i) => i.width).attr("y1", H / 2).attr("y2", H / 2), n.filter(".resizable-x").select("line.right-resizer").attr("x1", (i) => i.width - H / 2).attr("x2", (i) => i.width - H / 2).attr("y1", 0).attr("y2", (i) => i.height), n.filter(".resizable-y").select("line.bottom-resizer").attr("x1", 0).attr("x2", (i) => i.width).attr("y1", (i) => i.height - H / 2).attr("y2", (i) => i.height - H / 2);
   }
@@ -5315,7 +5408,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
           const o = [i.x, i.y];
           this.unfinishedConnectionTracer?.attr(
             "d",
-            le(
+            de(
               this.unfinishedConnection.look.shape || et.look.shape,
               this.unfinishedConnection.startCoords,
               o,
@@ -5340,7 +5433,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
             ];
           } else
             this.unfinishedConnection.endCoords = o;
-          if (this.updateConnectionsInView(he), this.model.ports.length > 0) {
+          if (this.updateConnectionsInView(ge), this.model.ports.length > 0) {
             const c = this.getPointerLocationRelativeToCanvas(i);
             let h = Number.POSITIVE_INFINITY, f;
             for (const y of this.model.ports) {
@@ -5383,12 +5476,12 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
         }
         this.secondaryButton = !1;
       })
-    ), l.filter(".image-look").append("image"), de(
+    ), l.filter(".image-look").append("image"), ce(
       l
     ), n.attr(
       "transform",
       (i) => `translate(${i.coords[0] - i.width / 2},${i.coords[1] - i.width / 2})`
-    ).attr("opacity", (i) => i.removed ? 0.5 : 1), ce(
+    ).attr("opacity", (i) => i.removed ? 0.5 : 1), he(
       n
     );
   }
@@ -5431,7 +5524,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       })
     ), n.append("path").attr("class", "diagram-connection-path"), n.append("path").attr("class", "diagram-connection-path-box"), n.append("marker").attr("id", (r) => `${r.id}-start-marker`).attr("class", "diagram-connection-start-marker").append("image").attr("preserveAspectRatio", "none"), n.append("marker").attr("id", (r) => `${r.id}-end-marker`).attr("class", "diagram-connection-end-marker").append("image").attr("preserveAspectRatio", "none"), n.append("g").attr("class", "diagram-connection-start-label"), n.select("g.diagram-connection-start-label").append("path"), n.select("g.diagram-connection-start-label").append("text").style("user-select", "none"), n.append("g").attr("class", "diagram-connection-middle-label"), n.select("g.diagram-connection-middle-label").append("path"), n.select("g.diagram-connection-middle-label").append("text").style("user-select", "none"), n.append("g").attr("class", "diagram-connection-end-label"), n.select("g.diagram-connection-end-label").append("path"), n.select("g.diagram-connection-end-label").append("text").style("user-select", "none"), i.attr("opacity", (r) => r.removed ? 0.5 : 1).select("path.diagram-connection-path").attr(
       "d",
-      (r) => le(
+      (r) => de(
         r.look.shape || et.look.shape,
         r.startCoords,
         r.endCoords,
@@ -5446,13 +5539,13 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       (r) => r.look.color || et.look.color
     ).attr("stroke-width", (r) => `${r.look.thickness}px`).attr(
       "stroke-dasharray",
-      (r) => ue(
+      (r) => pe(
         r.look.style || et.look.style,
         r.type.defaultLook.thickness || et.look.thickness
       )
     ).attr("fill", "none"), i.select("path.diagram-connection-path-box").attr(
       "d",
-      (r) => le(
+      (r) => de(
         r.look.shape || et.look.shape,
         r.startCoords,
         r.endCoords,
@@ -5464,10 +5557,10 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       )
     ).attr("stroke", "transparent").attr("pointer-events", "stroke").attr(
       "stroke-width",
-      (r) => `${(r.look.thickness || et.look.thickness) + li}px`
+      (r) => `${(r.look.thickness || et.look.thickness) + di}px`
     ).attr(
       "stroke-dasharray",
-      (r) => ue(
+      (r) => pe(
         r.look.style || et.look.style,
         r.type.defaultLook.thickness || et.look.thickness
       )
@@ -5518,7 +5611,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       }
     }).on($.DoubleClick, (i, r) => {
       const o = new pt(i, r);
-      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(w.EditField) && r.editable && !r.removed && (this.currentAction = new Te(this, r.id, r.text, ""), this.createInputField(
+      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(w.EditField) && r.editable && !r.removed && (this.currentAction = new Ne(this, r.id, r.text, ""), this.createInputField(
         r.text,
         r.coords,
         r.width,
@@ -5529,7 +5622,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
         (d) => {
         },
         (d) => {
-          r.text = d, this.currentAction instanceof Te && (this.currentAction.to = d, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
+          r.text = d, this.currentAction instanceof Ne && (this.currentAction.to = d, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
         }
       ));
     }).call(
@@ -5561,13 +5654,13 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       (i) => i.horizontalAlign === Lt.Center ? "center" : i.horizontalAlign === Lt.Right ? "flex-end" : "flex-start"
     ).style(
       "align-items",
-      (i) => i.verticalAlign === Zt.Center ? "center" : i.verticalAlign === Zt.Bottom ? "end" : "start"
+      (i) => i.verticalAlign === Kt.Center ? "center" : i.verticalAlign === Kt.Bottom ? "end" : "start"
     ).select("p").style(
       "max-width",
-      (i) => i.fit ? "default" : `${Pe(i.width, i.height, i.orientation)[0]}px`
+      (i) => i.fit ? "default" : `${ze(i.width, i.height, i.orientation)[0]}px`
     ).style(
       "max-height",
-      (i) => i.fit ? "default" : `${Pe(i.width, i.height, i.orientation)[1]}px`
+      (i) => i.fit ? "default" : `${ze(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 === Lt.Center ? "center" : i.horizontalAlign === Lt.Right ? "end" : "start"
@@ -5685,7 +5778,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
   }
   updateConnectionLabelsInView(t) {
     const e = this.selectCanvasView().select(
-      `[id='${fe(t.id)}']`
+      `[id='${ue(t.id)}']`
     ), l = e.select("path").node(), n = {
       ...V,
       ...t.type.label
@@ -5735,7 +5828,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       ).style("font-kerning", "none").text(t.startLabel);
       const y = e.select("g.diagram-connection-start-label text").node()?.getBoundingClientRect();
       if (y) {
-        const u = t.startLabel ? y.width / this.zoomTransform.k + Vt(n) + Ot(n) : 0, k = t.startLabel ? y.height / this.zoomTransform.k + Ht(n) + Rt(n) : 0;
+        const u = t.startLabel ? y.width / this.zoomTransform.k + Ot(n) + Ht(n) : 0, k = t.startLabel ? y.height / this.zoomTransform.k + _t(n) + Vt(n) : 0;
         let b;
         switch (t.startDirection) {
           case g.Left:
@@ -5770,7 +5863,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
         }
         e.select("g.diagram-connection-start-label path").attr(
           "d",
-          Wt(
+          Zt(
             -u / 2,
             -k / 2,
             u,
@@ -5787,10 +5880,10 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       ).style("font-kerning", "none").text(t.middleLabel);
       const m = e.select("g.diagram-connection-middle-label text").node()?.getBoundingClientRect();
       if (m) {
-        const u = t.middleLabel ? m.width / this.zoomTransform.k + Vt(n) + Ot(n) : 0, k = t.middleLabel ? m.height / this.zoomTransform.k + Ht(n) + Rt(n) : 0, b = l.getPointAtLength(i / 2);
+        const u = t.middleLabel ? m.width / this.zoomTransform.k + Ot(n) + Ht(n) : 0, k = t.middleLabel ? m.height / this.zoomTransform.k + _t(n) + Vt(n) : 0, b = l.getPointAtLength(i / 2);
         e.select("g.diagram-connection-middle-label path").attr(
           "d",
-          Wt(
+          Zt(
             -u / 2,
             -k / 2,
             u,
@@ -5807,7 +5900,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       ).style("font-kerning", "none").text(t.endLabel);
       const p = e.select("g.diagram-connection-end-label text").node()?.getBoundingClientRect();
       if (p) {
-        const u = t.endLabel ? p.width / this.zoomTransform.k + Vt(n) + Ot(n) : 0, k = t.endLabel ? p.height / this.zoomTransform.k + Ht(n) + Rt(n) : 0;
+        const u = t.endLabel ? p.width / this.zoomTransform.k + Ot(n) + Ht(n) : 0, k = t.endLabel ? p.height / this.zoomTransform.k + _t(n) + Vt(n) : 0;
         let b;
         switch (t.endDirection) {
           case g.Left:
@@ -5842,7 +5935,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
         }
         e.select("g.diagram-connection-end-label path").attr(
           "d",
-          Wt(
+          Zt(
             -u / 2,
             -k / 2,
             u,
@@ -5857,7 +5950,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
   }
   updateConnectionMarkersInView(t) {
     const e = this.selectCanvasView().select(
-      `[id='${fe(t.id)}']`
+      `[id='${ue(t.id)}']`
     ), a = e.select("marker.diagram-connection-start-marker"), l = e.select("marker.diagram-connection-end-marker");
     t.startMarkerLook !== null ? a.attr("orient", "auto-start-reverse").attr("markerWidth", t.startMarkerLook.width).attr("markerHeight", t.startMarkerLook.height).attr("refX", t.startMarkerLook.refX).attr("refY", t.startMarkerLook.refY).select("image").attr("href", t.startMarkerLook.image).attr("width", t.startMarkerLook.width).attr("height", t.startMarkerLook.height) : a.attr("orient", "auto-start-reverse").attr("markerWidth", 0).attr("markerHeight", 0), t.endMarkerLook !== null ? l.attr("orient", "auto-start-reverse").attr("markerWidth", t.endMarkerLook.width).attr("markerHeight", t.endMarkerLook.height).attr("refX", t.endMarkerLook.refX).attr("refY", t.endMarkerLook.refY).select("image").attr("href", t.endMarkerLook.image).attr("width", t.endMarkerLook.width).attr("height", t.endMarkerLook.height) : l.attr("orient", "auto-start-reverse").attr("markerWidth", 0).attr("markerHeight", 0);
   }
@@ -5950,7 +6043,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
           this.connectionType,
           t,
           void 0,
-          he
+          ge
         );
       else if (this.inferConnectionType) {
         let e = this.model.connections.types.all().find(
@@ -5963,7 +6056,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
           e,
           t,
           void 0,
-          he
+          ge
         ));
       }
     }
@@ -5989,7 +6082,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       ) && this.unfinishedConnection?.start?.allowsOutgoing && this.unfinishedConnection.type.canFinishOnType(
         t.getNode()?.type?.id || ""
       ) && t.allowsIncoming) {
-        const e = new ae(
+        const e = new le(
           this,
           this.unfinishedConnection.type,
           this.unfinishedConnection.start?.id,
@@ -6001,7 +6094,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       ) && this.unfinishedConnection?.start?.allowsIncoming && this.unfinishedConnection.type.canStartFromType(
         t.getNode()?.type?.id || ""
       ) && t.allowsOutgoing) {
-        const e = new ae(
+        const e = new le(
           this,
           this.unfinishedConnection.type,
           t.id,
@@ -6019,7 +6112,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
             this.unfinishedConnection?.start?.getNode()?.type?.id || ""
           ) && this.unfinishedConnection?.start?.allowsIncoming && l.canStartFromType(t.getNode()?.type?.id || "") && t.allowsOutgoing
         ), a = !0), e !== void 0) {
-          const l = new ae(
+          const l = new le(
             this,
             e,
             a ? t.id : this.unfinishedConnection.start?.id,
@@ -6056,7 +6149,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       }
     }).on($.Input, () => {
       const p = h.property("value");
-      h.attr("cols", wo(p) + 1), h.attr("rows", So(p) + 1), h.style("width", ""), h.style("height", ""), f = h.property("scrollWidth") + 1, y = h.property("scrollHeight") + 1;
+      h.attr("cols", So(p) + 1), h.attr("rows", Co(p) + 1), h.style("width", ""), h.style("height", ""), f = h.property("scrollWidth") + 1, y = h.property("scrollHeight") + 1;
       const u = Math.max(f, a), k = Math.max(y, l);
       c?.attr("width", `${u}px`), h.style("width", `${u}px`), c?.attr("height", `${k}px`), h.style("height", `${k}px`), o && o(p);
     }).on($.Click, (p) => {
@@ -6087,7 +6180,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
   startMovingNode(t, e) {
     if (this.canUserPerformAction(w.MoveNode) && !e.removed)
       if (S(L.Grabbing), this.draggingFrom = [t.x, t.y], e.selected && this.userSelection.count((a) => a instanceof z) > 1)
-        this.currentAction = new re(
+        this.currentAction = new ae(
           this,
           this.userSelection.filter((a) => a instanceof z).map((a) => a.id),
           e.coords
@@ -6112,7 +6205,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
    * Method to call to continue the moving of a node triggered by a user drag event.
    */
   continueMovingNode(t, e) {
-    if (this.canUserPerformAction(w.MoveNode) && (this.currentAction instanceof re || this.currentAction instanceof X) && !e.removed) {
+    if (this.canUserPerformAction(w.MoveNode) && (this.currentAction instanceof ae || this.currentAction instanceof X) && !e.removed) {
       const a = [
         t.x - e.width / 2,
         t.y - e.height / 2
@@ -6135,7 +6228,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
       if (this.snapToGrid && (a = this.getClosestGridPoint([
         a[0] - e.type.snapToGridOffset[0],
         a[1] - e.type.snapToGridOffset[1]
-      ]), a[0] += e.type.snapToGridOffset[0], a[1] += e.type.snapToGridOffset[1]), this.currentAction instanceof re) {
+      ]), a[0] += e.type.snapToGridOffset[0], a[1] += e.type.snapToGridOffset[1]), this.currentAction instanceof ae) {
         const l = this.currentAction.delta;
         this.currentAction.delta = [
           a[0] - l[0],
@@ -6148,11 +6241,11 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
         e.move(a);
         const n = this.model.nodes.getAtCoordinates(t.x, t.y).filter((o) => o.id !== e.id && !o.isDescendantOf(e)).filter(
           (o) => o.type.childrenTypes.includes(e.type.id)
-        ), i = Be(
+        ), i = Ye(
           n
         ), r = i[i.length - 1];
         if (r !== e.parent && (e.type.canBeParentless || r !== void 0)) {
-          const o = r?.getLastAncestor(), d = this.currentAction.from, c = new Xo(
+          const o = r?.getLastAncestor(), d = this.currentAction.from, c = new jo(
             this,
             e.id,
             e.parent?.id,
@@ -6198,7 +6291,7 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
     const e = this.getPointerLocationRelativeToCanvas(t);
     this.multipleSelectionContainer?.remove(), this.multipleSelectionContainer = void 0, this.userSelection.clear();
     for (const a of this.model.nodes)
-      ho(
+      go(
         [
           a.coords,
           [a.coords[0] + a.width, a.coords[1] + a.height]
@@ -6210,9 +6303,9 @@ const ai = (s) => s * Math.PI / 180, Pe = (s, t, e) => {
     ), S();
   }
 };
-qt.canvasCount = 0;
-let ve = qt;
-class Je {
+Jt.canvasCount = 0;
+let ye = Jt;
+class Qe {
   constructor() {
     this.grid = [[void 0]], this.offsetX = 0, this.offsetY = 0;
   }
@@ -6324,16 +6417,16 @@ class Je {
     }
   }
 }
-class ci {
+class hi {
   constructor(t) {
     this.gapSize = t;
   }
   apply(t) {
     if (t.nodes.length === 0)
       return t;
-    const e = new Je(), a = t.nodes.filter((r) => !r.parent);
+    const e = new Qe(), a = t.nodes.filter((r) => !r.parent);
     for (; a.length > 0; )
-      Qe(
+      to(
         a[0],
         e,
         [0, 0],
@@ -6351,25 +6444,25 @@ class ci {
     return t;
   }
 }
-const Qe = (s, t, e, a) => {
+const to = (s, t, e, a) => {
   const l = t.getClosestEmptyCoordinate(e);
   t.set(l, s), Y(a, s);
   for (const n of s.getAdjacentNodes())
-    a.includes(n) && Qe(
+    a.includes(n) && to(
       n,
       t,
       l,
       a
     );
 };
-class hi {
+class gi {
   constructor(t) {
     this.gapSize = t;
   }
   apply(t) {
     if (t.nodes.length === 0)
       return t;
-    const e = new Je(), a = t.nodes.filter((c) => !c.parent), l = {}, n = a[0];
+    const e = new Qe(), a = t.nodes.filter((c) => !c.parent), l = {}, n = a[0];
     let i = [n];
     for (l[n.id] = [0, 0]; a.length > 0; ) {
       const c = [];
@@ -6403,7 +6496,7 @@ class hi {
     return t;
   }
 }
-class se {
+class ne {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6437,14 +6530,14 @@ class se {
     return t;
   }
 }
-class gi {
+class fi {
   constructor(t) {
     this.gapSize = t;
   }
   apply(t) {
     if (t.nodes.length === 0)
       return t;
-    new se(this.gapSize).apply(t);
+    new ne(this.gapSize).apply(t);
     const e = this.gapSize !== void 0 ? this.gapSize : (t.canvas?.gridSize || 0) * 2, a = 0.99, l = 1, n = 0.1, i = 2e5, r = 0.5, o = 1, d = 2e-3;
     let c = 100;
     for (; c > l; ) {
@@ -6464,7 +6557,7 @@ class gi {
           ], u = [
             m.coords[0] + m.width / 2,
             m.coords[1] + m.height / 2
-          ], k = Oe(
+          ], k = He(
             f.coords,
             m.coords
           ), b = [m.coords[0], m.coords[1]];
@@ -6490,7 +6583,7 @@ class gi {
     return t;
   }
 }
-class fi {
+class ui {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6505,7 +6598,7 @@ class fi {
     return t;
   }
 }
-class ui {
+class pi {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6518,7 +6611,7 @@ class ui {
       ...t.nodes.map((c) => c.getPriority())
     );
     if (e === a)
-      return new se(this.gapSize).apply(t), t;
+      return new ne(this.gapSize).apply(t), t;
     const l = this.gapSize !== void 0 ? this.gapSize : (t.canvas?.gridSize || 0) * 2, n = t.nodes.filter((c) => !c.parent), i = [], r = t.nodes.filter((c) => !c.parent).filter((c) => c.getPriority() >= e), o = [];
     if (r.length > 1) {
       const c = r[0];
@@ -6572,7 +6665,7 @@ class ui {
     return t;
   }
 }
-class pi {
+class mi {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6585,17 +6678,17 @@ class pi {
       ...t.nodes.map((c) => c.getPriority())
     );
     if (e === a)
-      return new se(this.gapSize).apply(t), t;
+      return new ne(this.gapSize).apply(t), t;
     const l = this.gapSize !== void 0 ? this.gapSize : (t.canvas?.gridSize || 0) * 2, n = t.nodes.filter((c) => !c.parent).sort((c, h) => h.getPriority() - c.getPriority()), i = [];
     for (; n.length > 0; ) {
       const c = n[0];
       n.splice(0, 1);
-      const h = new we(void 0, c);
-      to(h, n), i.push(h);
+      const h = new Se(void 0, c);
+      eo(h, n), i.push(h);
     }
     const r = [];
     for (const c of i)
-      r.push([c]), eo(c, r, r.length);
+      r.push([c]), oo(c, r, r.length);
     const o = Math.max(...t.nodes.map((c) => c.height));
     let d = 0;
     for (let c = 0; c < r.length; ++c) {
@@ -6614,29 +6707,29 @@ class pi {
     return t;
   }
 }
-const to = (s, t) => {
+const eo = (s, t) => {
   for (const e of s.node.getAdjacentNodes().sort((a, l) => l.getPriority() - a.getPriority())) {
     const a = t.indexOf(e);
     if (a >= 0) {
       t.splice(a, 1);
       const l = s.addBranch(e);
-      to(l, t);
+      eo(l, t);
     }
   }
-}, eo = (s, t, e) => {
+}, oo = (s, t, e) => {
   if (s.branches.length > 0) {
     for (; e >= t.length; )
       t.push([]);
     for (const a of s.branches)
-      t[e].push(a), eo(a, t, e + 1);
+      t[e].push(a), oo(a, t, e + 1);
   }
 };
-class we {
+class Se {
   constructor(t, e) {
     this.parent = t, this.branches = [], this.depth = 0, this.node = e;
   }
   addBranch(t) {
-    const e = new we(this, t);
+    const e = new Se(this, t);
     return e.depth = this.depth + 1, this.branches.push(e), e;
   }
   countBranchHeight() {
@@ -6650,7 +6743,7 @@ class we {
     }
   }
 }
-class mi {
+class vi {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6665,17 +6758,17 @@ class mi {
     return t;
   }
 }
-const ze = {
-  adjacency: new ci(),
-  breadth: new se(),
-  "breadth-adjacency": new hi(),
-  force: new gi(),
-  horizontal: new fi(),
-  priority: new ui(),
-  tree: new pi(),
-  vertical: new mi()
-}, vi = Ve({}), $t = Ve({});
-class yi {
+const Re = {
+  adjacency: new hi(),
+  breadth: new ne(),
+  "breadth-adjacency": new gi(),
+  force: new fi(),
+  horizontal: new ui(),
+  priority: new pi(),
+  tree: new mi(),
+  vertical: new vi()
+}, yi = Oe({}), $t = Oe({});
+class bi {
   constructor(t, e) {
     this.onTitleChange = t, this.onValueSetChange = e;
   }
@@ -6694,7 +6787,7 @@ class yi {
   highlightProperty(...t) {
   }
 }
-const Se = ({
+const Ce = ({
   direction: s,
   collapsableSelector: t,
   collapsableAdditionalSelector: e,
@@ -6739,10 +6832,10 @@ const Se = ({
       children: /* @__PURE__ */ v("div", { className: f() })
     }
   ) });
-}, bi = () => {
-  const s = Ft($t), t = rt(null), [e, a] = U([]);
-  ao(s.validatorChange$, s.diagramChange$).pipe(
-    lo(() => l())
+}, ki = () => {
+  const s = Ut($t), t = rt(null), [e, a] = U([]);
+  lo(s.validatorChange$, s.diagramChange$).pipe(
+    co(() => l())
   ).subscribe();
   const l = () => {
     a([]);
@@ -6774,7 +6867,7 @@ const Se = ({
         " errors found"
       ] }),
       /* @__PURE__ */ v("div", { className: "daga-collapse-button-container", children: /* @__PURE__ */ v(
-        Se,
+        Ce,
         {
           collapsableSelector: t,
           collapsableAdditionalSelector: ".daga-error-panel",
@@ -6796,7 +6889,7 @@ const Se = ({
       r
     )) }) })
   ] }) });
-}, ki = 200, Re = (s) => (s || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), oo = ({
+}, wi = 200, Ve = (s) => (s || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), io = ({
   disabled: s,
   options: t,
   value: e,
@@ -6834,12 +6927,12 @@ const Se = ({
       }
   }, N = () => {
     if (!s) {
-      const A = Re(n.trim());
+      const A = Ve(n.trim());
       d([]), h([]), y([]), p([]);
       for (const _ of t) {
-        const q = Re(_.label).indexOf(A);
+        const q = Ve(_.label).indexOf(A);
         if (q >= 0) {
-          const Ut = _.label.substring(0, q), J = _.label.substring(
+          const Dt = _.label.substring(0, q), J = _.label.substring(
             q,
             q + A.length
           ), wt = _.label.substring(
@@ -6847,7 +6940,7 @@ const Se = ({
           );
           d((nt) => [...nt, _]), h((nt) => [
             ...nt,
-            Ut
+            Dt
           ]), y((nt) => [
             ...nt,
             J
@@ -6870,7 +6963,7 @@ const Se = ({
   }, tt = () => {
     setTimeout(() => {
       R();
-    }, ki);
+    }, wi);
   }, E = (A) => {
     const _ = l.current?.querySelectorAll("li")[A];
     _ && _.scrollIntoView({ block: "center" });
@@ -6919,7 +7012,7 @@ const Se = ({
       ]
     }
   );
-}, wi = (s, t) => s.find((e) => e.key === t)?.label || `${t}`, Si = ({
+}, Si = (s, t) => s.find((e) => e.key === t)?.label || `${t}`, Ci = ({
   disabled: s,
   allowRepeats: t,
   options: e,
@@ -6928,7 +7021,7 @@ const Se = ({
 }) => {
   const [n, i] = U(), [r, o] = U([]), [d, c] = U([]);
   Ct(() => {
-    const u = a.length === 0, k = a.map((b) => wi(e, b));
+    const u = a.length === 0, k = a.map((b) => Si(e, b));
     o(k), u && l(a), p();
   }, [a, e]);
   const h = (u) => {
@@ -6964,7 +7057,7 @@ const Se = ({
     ] }, k)),
     !s && /* @__PURE__ */ M("div", { className: "daga-value-item-input", children: [
       /* @__PURE__ */ v("div", { className: "daga-input daga-relatively-positioned", children: /* @__PURE__ */ v(
-        oo,
+        io,
         {
           disabled: s,
           options: t ? e || [] : d || [],
@@ -6975,7 +7068,7 @@ const Se = ({
       /* @__PURE__ */ v("button", { className: "daga-property-button", onClick: y, children: /* @__PURE__ */ v("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
-}, Ci = ({
+}, $i = ({
   disabled: s,
   allowRepeats: t,
   value: e,
@@ -7001,7 +7094,7 @@ const Se = ({
   }, h = (f) => {
     f.key === "Enter" && d();
   };
-  return /* @__PURE__ */ M(no, { children: [
+  return /* @__PURE__ */ M(ro, { children: [
     e.map((f, y) => /* @__PURE__ */ M("div", { className: "daga-value-item-element", children: [
       /* @__PURE__ */ v(
         "input",
@@ -7038,7 +7131,7 @@ const Se = ({
       /* @__PURE__ */ v("button", { className: "daga-property-button", onClick: d, children: /* @__PURE__ */ v("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
-}, $i = ({
+}, Ii = ({
   disabled: s,
   value: t,
   onChange: e
@@ -7153,12 +7246,12 @@ const Se = ({
       /* @__PURE__ */ v("button", { className: "daga-property-button", onClick: f, children: /* @__PURE__ */ v("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
-}, io = ({
+}, so = ({
   valueSet: s,
   onValueChange: t,
   depth: e
 }) => {
-  const l = Ft($t).canUserPerformAction(w.UpdateValues) && s?.rootElement?.removed !== !0, n = (o) => "daga-property-name-" + o.replace(/\s/g, ""), i = (o) => {
+  const l = Ut($t).canUserPerformAction(w.UpdateValues) && s?.rootElement?.removed !== !0, n = (o) => "daga-property-name-" + o.replace(/\s/g, ""), i = (o) => {
     if (typeof o == "string")
       return o;
     if (o == null || isNaN(o.valueOf()))
@@ -7293,7 +7386,7 @@ const Se = ({
           )
         ] }),
         o.type === T.Option && /* @__PURE__ */ v("div", { className: "daga-relatively-positioned", children: /* @__PURE__ */ v(
-          oo,
+          io,
           {
             disabled: o.editable === !1 || !l,
             options: o.options || [],
@@ -7302,7 +7395,7 @@ const Se = ({
           }
         ) }),
         (o.type === T.OptionList || o.type === T.OptionSet) && /* @__PURE__ */ v(
-          Si,
+          Ci,
           {
             disabled: o.editable === !1 || !l,
             allowRepeats: o.type === T.OptionList,
@@ -7312,7 +7405,7 @@ const Se = ({
           }
         ),
         (o.type === T.TextList || o.type === T.TextSet) && /* @__PURE__ */ v(
-          Ci,
+          $i,
           {
             disabled: o.editable === !1 || !l,
             allowRepeats: o.type === T.TextList,
@@ -7321,7 +7414,7 @@ const Se = ({
           }
         ),
         o.type === T.TextMap && /* @__PURE__ */ v(
-          $i,
+          Ii,
           {
             disabled: o.editable === !1 || !l,
             value: s?.getValue(o.name),
@@ -7329,7 +7422,7 @@ const Se = ({
           }
         ),
         o.type === T.Object && /* @__PURE__ */ v("div", { className: "daga-left-bar", children: /* @__PURE__ */ v(
-          io,
+          so,
           {
             valueSet: s.getSubValueSet(o.name),
             onValueChange: t,
@@ -7340,8 +7433,8 @@ const Se = ({
     },
     o.name
   )) });
-}, so = ({ valueSet: s, depth: t }) => {
-  const e = Ft($t), a = rt(null), l = (o) => "daga-property-name-" + o.replace(/\s/g, ""), n = () => {
+}, no = ({ valueSet: s, depth: t }) => {
+  const e = Ut($t), a = rt(null), l = (o) => "daga-property-name-" + o.replace(/\s/g, ""), n = () => {
     for (const o of s?.displayedProperties || []) {
       let d = 0, c = 0, h = 0;
       const f = x.select(a.current).select(
@@ -7403,7 +7496,7 @@ const Se = ({
     if (s === void 0)
       return;
     let d;
-    o instanceof xo ? d = o : o instanceof Event ? d = s?.propertySet.getProperty(
+    o instanceof Lo ? d = o : o instanceof Event ? d = s?.propertySet.getProperty(
       o.target?.value || ""
     ) : d = s?.propertySet.getProperty(o || ""), d && s?.hideProperty(d), n();
   };
@@ -7433,9 +7526,9 @@ const Se = ({
                     )
                   ] })
                 ] }),
-                o.type !== T.Object && /* @__PURE__ */ v("div", { className: "daga-property-value", children: Ii(s?.getValue(o.name)) }),
+                o.type !== T.Object && /* @__PURE__ */ v("div", { className: "daga-property-value", children: Ai(s?.getValue(o.name)) }),
                 o.type === T.Object && /* @__PURE__ */ v(
-                  so,
+                  no,
                   {
                     valueSet: s?.getSubValueSet(o.name),
                     depth: t + 1
@@ -7455,7 +7548,7 @@ const Se = ({
       o.name
     ))
   ] });
-}, Ii = (s) => Array.isArray(s) ? s.join(", ") : Lo(s) ? Object.entries(s).map((t) => t.map((e) => JSON.stringify(e)).join(": ")).join(", ") : s instanceof Date ? s.toLocaleString() : s == null ? "" : "" + s, Ai = ({ location: s, direction: t, width: e, height: a, title: l, valueSet: n, onValueChange: i }) => {
+}, Ai = (s) => Array.isArray(s) ? s.join(", ") : Eo(s) ? Object.entries(s).map((t) => t.map((e) => JSON.stringify(e)).join(": ")).join(", ") : s instanceof Date ? s.toLocaleString() : s == null ? "" : "" + s, xi = ({ location: s, direction: t, width: e, height: a, title: l, valueSet: n, onValueChange: i }) => {
   const r = rt(null), [o, d] = U(!1), [c, h] = U(!1), f = () => x.select(r.current);
   return Ct(() => {
     if (r.current)
@@ -7476,7 +7569,7 @@ const Se = ({
       className: `daga-panel daga-bottom daga-${s} daga-${t}`,
       children: [
         /* @__PURE__ */ v(
-          Se,
+          Ce,
           {
             disabled: !n || !n.propertySet || !n.propertySet.hasProperties(),
             collapsed: o,
@@ -7507,20 +7600,20 @@ const Se = ({
             )
           ] }),
           !c && /* @__PURE__ */ v(
-            io,
+            so,
             {
               valueSet: n,
               onValueChange: i,
               depth: 0
             }
           ),
-          c && /* @__PURE__ */ v(so, { valueSet: n, depth: 0 })
+          c && /* @__PURE__ */ v(no, { valueSet: n, depth: 0 })
         ] }) })
       ]
     }
   ) });
-}, xi = 6, Li = (s) => {
-  const t = Ft($t), [e, a] = U(
+}, Li = 6, Ei = (s) => {
+  const t = Ut($t), [e, a] = U(
     s.currentPalette || s.palettes[0]
   ), [l, n] = U(0), [i, r] = U(
     void 0
@@ -7578,7 +7671,7 @@ const Se = ({
       }).on(I.End, (O) => {
         if (t.canUserPerformAction(w.AddNode)) {
           if (S(L.Auto), E.style("position", "relative").style("left", 0).style("top", 0).style("z-index", "auto"), p.isUnique && t.model.nodes.find(
-            (Bt) => !Bt.removed && Bt.type.id === p.id
+            (Yt) => !Yt.removed && Yt.type.id === p.id
           ) !== void 0)
             return;
           const A = t.getPointerLocationRelativeToScreen(O);
@@ -7605,24 +7698,24 @@ const Se = ({
             lt[0],
             lt[1]
           ).filter(
-            (Bt) => Bt.type.childrenTypes.includes(p.id)
-          ), wt = Be(
+            (Yt) => Yt.type.childrenTypes.includes(p.id)
+          ), wt = Ye(
             J
           ), nt = wt[wt.length - 1];
           if (!p.canBeParentless && nt === void 0)
             return;
-          const Dt = nt?.getLastAncestor(), Ce = new Yo(
+          const Bt = nt?.getLastAncestor(), $e = new Xo(
             t,
             p,
             q,
             nt?.id,
-            Dt?.id,
-            Dt?.getGeometry(),
+            Bt?.id,
+            Bt?.getGeometry(),
             void 0,
             u.label,
             u.values
           );
-          Ce.do(), t?.actionStack.add(Ce), S();
+          $e.do(), t?.actionStack.add($e), S();
         }
       })
     ).append("svg").attr("class", `palette-node ${p.id}`).attr("viewBox", `0 0 ${R} ${N}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${tt}px`).style("height", `${P}px`), C = u.look || p.defaultLook;
@@ -7630,7 +7723,7 @@ const Se = ({
       case "shaped-look":
         E.append("path").attr(
           "d",
-          pe(
+          me(
             C.shape || Tt.Rectangle,
             (C.borderThickness || 1) / 2,
             (C.borderThickness || 1) / 2,
@@ -7691,7 +7784,7 @@ const Se = ({
     });
     b.append("path").attr(
       "d",
-      pe(
+      me(
         Tt.Rectangle,
         0,
         0,
@@ -7700,7 +7793,7 @@ const Se = ({
       )
     ).attr("fill", u.backgroundColor).attr("stroke", "black").attr("stroke-width", "1px"), u.icon !== "" && b.append("image").attr("x", 0).attr("y", 0).attr("width", u.width).attr("height", u.height).attr("href", u.icon), u.label !== "" && b.append("text").attr(
       "transform",
-      `translate(${u.width / 2},${u.height / 2 + xi})`
+      `translate(${u.width / 2},${u.height / 2 + Li})`
     ).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(u.label);
   };
   return Ct(() => {
@@ -7722,7 +7815,7 @@ const Se = ({
       className: `daga-panel daga-${s.location} daga-${s.direction}`,
       children: [
         /* @__PURE__ */ v(
-          Se,
+          Ce,
           {
             direction: s.direction,
             collapsableSelector: o,
@@ -7748,7 +7841,7 @@ const Se = ({
       ]
     }
   ) });
-}, Ei = ({
+}, Mi = ({
   location: s,
   direction: t,
   enableAction: e,
@@ -7785,22 +7878,22 @@ const Se = ({
     if (!d)
       if (o) {
         o = !1;
-        const Dt = `${4 * J.selectChildren().size()}rem`;
-        J.transition().duration(500).ease(x.easeLinear).style(c, Dt).style("transform", `${h}(1)`), setTimeout(() => {
+        const Bt = `${4 * J.selectChildren().size()}rem`;
+        J.transition().duration(500).ease(x.easeLinear).style(c, Bt).style("transform", `${h}(1)`), setTimeout(() => {
           d = !1;
         }, 500);
       } else
         o = !0, J.transition().duration(500).ease(x.easeLinear).style(c, "0rem").style("transform", `${h}(0)`), setTimeout(() => {
           d = !1;
         }, 500);
-  }, b = Ft($t), N = () => {
+  }, b = Ut($t), N = () => {
     b.zoomBy(b.zoomFactor);
   }, R = () => {
     b.zoomBy(1 / b.zoomFactor);
   }, P = () => {
     b.center();
   }, tt = () => {
-    b.layoutFormat && b.layoutFormat in ze && ze[b.layoutFormat].apply(b.model);
+    b.layoutFormat && b.layoutFormat in Re && Re[b.layoutFormat].apply(b.model);
   }, E = () => {
     r = !r, x.select(
       u.current
@@ -7821,12 +7914,12 @@ const Se = ({
     b.userSelection.pasteFromClipboard();
   }, q = () => {
     b.userSelection.removeFromModel();
-  }, Ut = () => {
+  }, Dt = () => {
     b.multipleSelectionOn = !0, x.select(
       p.current
     ).classed("daga-on", !0).classed("daga-off", !1);
     const J = b.diagramEvent$.subscribe((wt) => {
-      wt.type === We.Selection && (x.select(
+      wt.type === Ze.Selection && (x.select(
         p.current
       ).classed("daga-on", !1).classed("daga-off", !0), J.unsubscribe());
     });
@@ -7844,7 +7937,7 @@ const Se = ({
           e && /* @__PURE__ */ v("button", { className: "daga-redo", onClick: O, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Redo" }) }),
           n && /* @__PURE__ */ v("button", { className: "daga-copy", onClick: A, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Copy" }) }),
           n && /* @__PURE__ */ v("button", { className: "daga-cut", onClick: _, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Cut" }) }),
-          n && /* @__PURE__ */ v("button", { className: `daga-multiple-selection ${r ? "daga-on" : "daga-off"}`, onClick: Ut, ref: p, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Multiple selection" }) }),
+          n && /* @__PURE__ */ v("button", { className: `daga-multiple-selection ${r ? "daga-on" : "daga-off"}`, onClick: Dt, ref: p, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Multiple selection" }) }),
           n && /* @__PURE__ */ v("button", { className: "daga-paste", onClick: lt, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Paste" }) }),
           n && /* @__PURE__ */ v("button", { className: "daga-delete", onClick: q, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Delete" }) }),
           l && b.layoutFormat && /* @__PURE__ */ v("button", { className: "daga-layout", onClick: tt, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Apply layout" }) }),
@@ -7854,14 +7947,14 @@ const Se = ({
       ]
     }
   ) });
-}, Pi = ({
+}, zi = ({
   config: s,
   model: t,
   onCanvasCreated: e,
   onDiagramEvent: a,
   onModelChange: l
 }) => {
-  const n = new je(), i = new qe(), r = rt(null), o = rt(void 0), d = rt(!1), c = [], [h, f] = U(void 0), [y, m] = U(void 0), p = {
+  const n = new We(), i = new Je(), r = rt(null), o = rt(void 0), d = rt(!1), c = [], [h, f] = U(void 0), [y, m] = U(void 0), p = {
     zoomIn: () => {
     },
     zoomOut: () => {
@@ -7879,14 +7972,14 @@ const Se = ({
   }, u = {
     refreshPalette: () => {
     }
-  }, k = new yi(
+  }, k = new bi(
     (E) => f(E),
     (E) => m(E)
   ), b = {
     diagramButtons: p,
     palette: u,
     propertyEditor: k
-  }, N = (E = !1) => ((!o.current || E) && (c.forEach((C) => C.unsubscribe()), o.current = new ve(b, s)), o.current), R = N(), P = (E) => {
+  }, N = (E = !1) => ((!o.current || E) && (c.forEach((C) => C.unsubscribe()), o.current = new ye(b, s)), o.current), R = N(), P = (E) => {
     R.initView(E), c.push(
       R.diagramEvent$.subscribe((C) => {
         a?.(C);
@@ -7900,7 +7993,7 @@ const Se = ({
   };
   Ct(() => {
     r.current && (d.current || (P(r.current), d.current = !0, e?.(R)));
-  }, [r.current]), co(() => {
+  }, [r.current]), ho(() => {
     r.current && (N(!0), P(r.current), e?.(R));
   }, [s]), Ct(() => {
     t && n.import(R.model, t);
@@ -7915,13 +8008,13 @@ const Se = ({
       A.setValues(y.getValues()), A.rootElement = y.rootElement, k.valueSet = A, y.rootElement.valueSet = A, R.propertyEditorChanges$?.next();
     }
   };
-  return /* @__PURE__ */ v("daga-diagram", { children: /* @__PURE__ */ v(vi.Provider, { value: s, children: /* @__PURE__ */ v($t.Provider, { value: R, children: /* @__PURE__ */ M("daga-diagram-editor", { children: [
+  return /* @__PURE__ */ v("daga-diagram", { children: /* @__PURE__ */ v(yi.Provider, { value: s, children: /* @__PURE__ */ v($t.Provider, { value: R, children: /* @__PURE__ */ M("daga-diagram-editor", { children: [
     /* @__PURE__ */ v("div", { className: "daga-append-to", ref: r }),
     /* @__PURE__ */ M($t.Provider, { value: R, children: [
       s.components?.buttons !== void 0 && s.components?.buttons?.enabled !== !1 && /* @__PURE__ */ v(
-        Ei,
+        Mi,
         {
-          location: s.components?.buttons?.location || jt.BottomRight,
+          location: s.components?.buttons?.location || Wt.BottomRight,
           direction: s.components?.buttons?.direction || g.Top,
           enableAction: s.components?.buttons?.enableAction !== !1,
           enableFilter: s.components?.buttons?.enableFilter === !0,
@@ -7931,9 +8024,9 @@ const Se = ({
         }
       ),
       s.components?.palette !== void 0 && s.components?.palette?.enabled !== !1 && s.components?.palette?.sections && (s.components?.palette?.sections?.length || 0) > 0 && /* @__PURE__ */ v(
-        Li,
+        Ei,
         {
-          location: s.components?.palette?.location || jt.TopLeft,
+          location: s.components?.palette?.location || Wt.TopLeft,
           direction: s.components?.palette?.direction || g.Bottom,
           width: s.components?.palette?.width || "12rem",
           height: s.components?.palette?.height,
@@ -7941,9 +8034,9 @@ const Se = ({
         }
       ),
       s.components?.propertyEditor !== void 0 && s.components?.propertyEditor?.enabled !== !1 && /* @__PURE__ */ v(
-        Ai,
+        xi,
         {
-          location: s.components?.propertyEditor?.location || jt.TopRight,
+          location: s.components?.propertyEditor?.location || Wt.TopRight,
           direction: s.components?.propertyEditor?.direction || g.Bottom,
           width: s.components?.propertyEditor?.width || "24rem",
           height: s.components?.propertyEditor?.height,
@@ -7952,10 +8045,10 @@ const Se = ({
           onValueChange: tt
         }
       ),
-      s.components?.errors !== void 0 && s.components?.errors?.enabled !== !1 && /* @__PURE__ */ v(bi, {})
+      s.components?.errors !== void 0 && s.components?.errors?.enabled !== !1 && /* @__PURE__ */ v(ki, {})
     ] })
   ] }) }) }) });
 };
 export {
-  Pi as DagaDiagram
+  zi as DagaDiagram
 };