mind-elixir 5.11.3 → 5.12.0

package/dist/MindElixir.js

@@ -1,4 +1,4 @@
-const Qo = 0, es = 1, ts = 2, fe = {
+const es = 0, ts = 1, ns = 2, fe = {
   name: "Latte",
   type: "light",
   palette: ["#dd7878", "#ea76cb", "#8839ef", "#e64553", "#fe640b", "#df8e1d", "#40a02b", "#209fb5", "#1e66f5", "#7287fd"],
@@ -115,7 +115,7 @@ function ge(e) {
     })
   );
 }
-const L = (e, t) => {
+const M = (e, t) => {
   let n = 0, o = 0;
   for (; t && t !== e; )
     n += t.offsetLeft, o += t.offsetTop, t = t.offsetParent;
@@ -267,7 +267,7 @@ function Et(e) {
   return () => {
   };
 }
-const O = {
+const H = {
   LHS: "lhs",
   RHS: "rhs"
 }, Ct = function() {
@@ -286,9 +286,9 @@ const O = {
   St(this, n, t);
 }, St = function(e, t, n) {
   const o = document.createElement("me-main");
-  o.className = O.LHS;
+  o.className = H.LHS;
   const s = document.createElement("me-main");
-  s.className = O.RHS;
+  s.className = H.RHS;
   for (let i = 0; i < t.length; i++) {
     const l = t[i], { grp: c } = e.createWrapper(l);
     e.direction === 2 ? l.direction === 0 ? o.appendChild(c) : s.appendChild(c) : e.direction === 0 ? o.appendChild(c) : s.appendChild(c);
@@ -369,7 +369,7 @@ function Qe(e) {
 }
 const Lt = function(e) {
   if (!e) return;
-  const t = document.createElement("div"), n = e.nodeObj, o = n.topic, { offsetLeft: s, offsetTop: i } = L(this.nodes, e);
+  const t = document.createElement("div"), n = e.nodeObj, o = n.topic, { offsetLeft: s, offsetTop: i } = M(this.nodes, e);
   this.nodes.appendChild(t), t.id = "input-box", t.textContent = o, t.contentEditable = "plaintext-only", t.spellcheck = !1;
   const l = getComputedStyle(e);
   t.style.cssText = `
@@ -511,7 +511,7 @@ const $t = function({ map: e, direction: t }, n) {
   }
   const i = n || this.generateNewObj();
   if (!s.parent?.parent) {
-    const a = o.closest("me-main").className === O.LHS ? 0 : 1;
+    const a = o.closest("me-main").className === H.LHS ? 0 : 1;
     i.direction = a;
   }
   Pt(i, e, s), R(this.nodeData);
@@ -893,12 +893,12 @@ function An(e, t) {
     ArrowLeft: (r) => {
       if (r.metaKey || r.ctrlKey)
         return e.initLeft();
-      Oe(e, O.LHS);
+      Oe(e, H.LHS);
     },
     ArrowRight: (r) => {
       if (r.metaKey || r.ctrlKey)
         return e.initRight();
-      Oe(e, O.RHS);
+      Oe(e, H.RHS);
     },
     PageUp: () => e.moveUpNode(),
     PageDown: () => {
@@ -972,8 +972,8 @@ function Pn(e) {
         this.clear();
         return;
       }
-      const x = (/* @__PURE__ */ new Date()).getTime(), E = x - this.lastTap, S = E < this.DOUBLE_CLICK_THRESHOLD && E > 0 && this.lastTapTarget === f.target;
-      this.lastTap = x, this.lastTapTarget = f.target, S && y(f);
+      const x = (/* @__PURE__ */ new Date()).getTime(), S = x - this.lastTap, C = S < this.DOUBLE_CLICK_THRESHOLD && S > 0 && this.lastTapTarget === f.target;
+      this.lastTap = x, this.lastTapTarget = f.target, C && y(f);
     },
     clear() {
       this.lastTap = 0, this.lastTapTarget = null;
@@ -1001,15 +1001,15 @@ function Pn(e) {
     handlePointerMove(f) {
       if (f.pointerType !== "touch" || !this.activePointers.has(f.pointerId)) return !1;
       if (this.activePointers.set(f.pointerId, { x: f.clientX, y: f.clientY }), this.activePointers.size >= 2) {
-        const [y, x] = Array.from(this.activePointers.values()), E = De(y, x);
+        const [y, x] = Array.from(this.activePointers.values()), S = De(y, x);
         if (this.lastDistance !== null && this.lastDistance > 0) {
-          const S = E / this.lastDistance;
-          e.scale(e.scaleVal * S, {
+          const C = S / this.lastDistance;
+          e.scale(e.scaleVal * C, {
             x: (y.x + x.x) / 2,
             y: (y.y + x.y) / 2
           });
         }
-        return this.lastDistance = E, !0;
+        return this.lastDistance = S, !0;
       }
       return !1;
     },
@@ -1041,10 +1041,10 @@ function Pn(e) {
     }
   }, a = (f, y) => {
     if (f.closest("#input-box")) return !1;
-    const x = f.closest(".svg-label"), E = f.closest(".topiclinks, .summary"), S = x ? { type: x.dataset.type, element: document.getElementById(x.dataset.svgId) } : E ? { type: E.classList.contains("topiclinks") ? "arrow" : "summary", element: f.closest("g") } : null;
-    if (!S?.type || !S?.element) return !1;
-    const { type: T, element: _ } = S;
-    return e.clearSelection(), T === "arrow" ? y ? e.editArrowLabel(_) : e.selectArrow(_) : y ? e.editSummary(_) : e.selectSummary(_), !0;
+    const x = f.closest(".svg-label"), S = f.closest(".topiclinks, .summary"), C = x ? { type: x.dataset.type, element: document.getElementById(x.dataset.svgId) } : S ? { type: S.classList.contains("topiclinks") ? "arrow" : "summary", element: f.closest("g") } : null;
+    if (!C?.type || !C?.element) return !1;
+    const { type: T, element: D } = C;
+    return e.clearSelection(), T === "arrow" ? y ? e.editArrowLabel(D) : e.selectArrow(D) : y ? e.editSummary(D) : e.selectSummary(D), !0;
   }, d = (f) => {
     if (f.pointerType === "mouse" && f.button !== 0) return;
     if (e.helper1?.moved) {
@@ -1085,8 +1085,8 @@ function Pn(e) {
     if (t.handlePointerDown(f), t.mousedown && (e.ptState = i.Pan), f.button === 0 || f.pointerType === "touch")
       if (te(y)) {
         e.selection?.cancel();
-        const E = e.currentNodes || [];
-        if (f.ctrlKey || f.metaKey || e.mobileMultiSelect ? E.includes(y) ? o = y : ((e.currentArrow || e.currentSummary) && e.clearSelection(), e.selection?.select(y)) : E.includes(y) || e.selectNode(y), !e.editable) return;
+        const S = e.currentNodes || [];
+        if (f.ctrlKey || f.metaKey || e.mobileMultiSelect ? S.includes(y) ? o = y : ((e.currentArrow || e.currentSummary) && e.clearSelection(), e.selection?.select(y)) : S.includes(y) || e.selectNode(y), !e.editable) return;
         f.pointerType === "touch" ? (e.ptState = i.DragWait, r.start(f, (T) => {
           Me(e, c, T, !0) && (e.ptState = i.Drag, y.setPointerCapture(T.pointerId));
         })) : Me(e, c, f, !1) && (e.ptState = i.Drag, y.setPointerCapture(f.pointerId));
@@ -1136,7 +1136,7 @@ function Pn(e) {
     e.move(-f.deltaX, -f.deltaY);
   }, w = (f) => {
     f.code === "Space" && (e.spacePressed = !0, e.container.classList.add("space-pressed"));
-  }, C = (f) => {
+  }, E = (f) => {
     f.code === "Space" && (e.spacePressed = !1, e.container.classList.remove("space-pressed"));
   };
   return qe([
@@ -1149,7 +1149,7 @@ function Pn(e) {
     { dom: n, evt: "wheel", func: typeof e.handleWheel == "function" ? e.handleWheel : m },
     { dom: n, evt: "blur", func: p },
     { dom: n, evt: "keydown", func: w },
-    { dom: n, evt: "keyup", func: C }
+    { dom: n, evt: "keyup", func: E }
   ]);
 }
 function On() {
@@ -1176,7 +1176,7 @@ function On() {
     }
   };
 }
-const M = "http://www.w3.org/2000/svg", re = function(e) {
+const A = "http://www.w3.org/2000/svg", re = function(e) {
   const t = e.clientWidth, n = e.clientHeight, o = e.dataset, s = Number(o.x), i = Number(o.y), l = o.anchor;
   let c = s;
   l === "middle" ? c = s - t / 2 : l === "end" && (c = s - t), e.style.left = `${c}px`, e.style.top = `${i - n / 2}px`, e.style.visibility = "visible";
@@ -1186,7 +1186,7 @@ const M = "http://www.w3.org/2000/svg", re = function(e) {
   const a = "label-" + c;
   return r.id = a, r.innerHTML = e, r.dataset.type = l, r.dataset.svgId = c, r.dataset.x = t.toString(), r.dataset.y = n.toString(), r.dataset.anchor = s, r;
 }, it = function(e, t, n) {
-  const o = document.createElementNS(M, "path");
+  const o = document.createElementNS(A, "path");
   return k(o, {
     d: e,
     stroke: t || "#666",
@@ -1194,13 +1194,13 @@ const M = "http://www.w3.org/2000/svg", re = function(e) {
     "stroke-width": n
   }), o;
 }, z = function(e) {
-  const t = document.createElementNS(M, "svg");
+  const t = document.createElementNS(A, "svg");
   return t.setAttribute("class", e), t.setAttribute("overflow", "visible"), t;
 }, je = function() {
-  const e = document.createElementNS(M, "line");
+  const e = document.createElementNS(A, "line");
   return e.setAttribute("stroke", "#4dc4ff"), e.setAttribute("fill", "none"), e.setAttribute("stroke-width", "2"), e.setAttribute("opacity", "0.45"), e;
 }, Hn = function(e, t, n, o) {
-  const s = document.createElementNS(M, "g");
+  const s = document.createElementNS(A, "g");
   return [
     {
       name: "line",
@@ -1215,7 +1215,7 @@ const M = "http://www.w3.org/2000/svg", re = function(e) {
       d: n
     }
   ].forEach((l, c) => {
-    const r = l.d, a = document.createElementNS(M, "path"), d = {
+    const r = l.d, a = document.createElementNS(A, "path"), d = {
       d: r,
       stroke: o?.stroke || "rgb(227, 125, 116)",
       fill: "none",
@@ -1223,7 +1223,7 @@ const M = "http://www.w3.org/2000/svg", re = function(e) {
       "stroke-width": String(o?.strokeWidth || "2")
     };
     o?.opacity !== void 0 && (d.opacity = String(o.opacity)), k(a, d), c === 0 && a.setAttribute("stroke-dasharray", o?.strokeDasharray || "8,2");
-    const h = document.createElementNS(M, "path");
+    const h = document.createElementNS(A, "path");
     k(h, {
       d: r,
       stroke: "transparent",
@@ -1262,11 +1262,11 @@ const M = "http://www.w3.org/2000/svg", re = function(e) {
   const t = this.map.querySelector("me-root"), n = t.offsetTop, o = t.offsetLeft, s = t.offsetWidth, i = t.offsetHeight, l = this.map.querySelectorAll("me-main > me-wrapper");
   this.lines.innerHTML = "";
   for (let c = 0; c < l.length; c++) {
-    const r = l[c], a = r.querySelector("me-tpc"), { offsetLeft: d, offsetTop: h } = L(this.nodes, a), u = a.offsetWidth, b = a.offsetHeight, v = r.parentNode.className, p = this.generateMainBranch({ pT: n, pL: o, pW: s, pH: i, cT: h, cL: d, cW: u, cH: b, direction: v, containerHeight: this.nodes.offsetHeight }), g = this.theme.palette, m = a.nodeObj.branchColor || g[c % g.length];
+    const r = l[c], a = r.querySelector("me-tpc"), { offsetLeft: d, offsetTop: h } = M(this.nodes, a), u = a.offsetWidth, b = a.offsetHeight, v = r.parentNode.className, p = this.generateMainBranch({ pT: n, pL: o, pW: s, pH: i, cT: h, cL: d, cW: u, cH: b, direction: v, containerHeight: this.nodes.offsetHeight }), g = this.theme.palette, m = a.nodeObj.branchColor || g[c % g.length];
     if (a.style.borderColor = m, this.lines.appendChild(it(p, m, "3")), e && e !== r)
       continue;
-    const w = z("subLines"), C = r.lastChild;
-    C.tagName === "svg" && C.remove(), r.appendChild(w), lt(this, w, m, r, v, !0);
+    const w = z("subLines"), E = r.lastChild;
+    E.tagName === "svg" && E.remove(), r.appendChild(w), lt(this, w, m, r, v, !0);
   }
   this.labelContainer.innerHTML = "", this.renderArrow(), this.renderSummary(), this.bus.fire("linkDiv");
 }, lt = function(e, t, n, o, s, i) {
@@ -1274,14 +1274,14 @@ const M = "http://www.w3.org/2000/svg", re = function(e) {
   if (c.length === 0) return;
   const r = l.offsetTop, a = l.offsetLeft, d = l.offsetWidth, h = l.offsetHeight;
   for (let u = 0; u < c.length; u++) {
-    const b = c[u], v = b.firstChild, p = v.offsetTop, g = v.offsetLeft, m = v.offsetWidth, w = v.offsetHeight, C = v.firstChild.nodeObj.branchColor || n, N = e.generateSubBranch({ pT: r, pL: a, pW: d, pH: h, cT: p, cL: g, cW: m, cH: w, direction: s, isFirst: i });
-    t.appendChild(it(N, C, "2"));
+    const b = c[u], v = b.firstChild, p = v.offsetTop, g = v.offsetLeft, m = v.offsetWidth, w = v.offsetHeight, E = v.firstChild.nodeObj.branchColor || n, N = e.generateSubBranch({ pT: r, pL: a, pW: d, pH: h, cT: p, cL: g, cW: m, cH: w, direction: s, isFirst: i });
+    t.appendChild(it(N, E, "2"));
     const f = v.children[1];
     if (f) {
       if (!f.expanded) continue;
     } else
       continue;
-    lt(e, t, C, b, s);
+    lt(e, t, E, b, s);
   }
 }, jn = {
   addChild: "Add child",
@@ -1307,26 +1307,26 @@ function In(e, t) {
   const o = (y) => {
     const x = document.createElement("div");
     return x.innerText = y, x.className = "tips", x;
-  }, s = (y, x, E) => {
-    const S = document.createElement("li");
-    return S.id = y, S.innerHTML = `<span>${ae(x)}</span><span ${E ? 'class="key"' : ""}>${ae(E)}</span>`, S;
+  }, s = (y, x, S) => {
+    const C = document.createElement("li");
+    return C.id = y, C.innerHTML = `<span>${ae(x)}</span><span ${S ? 'class="key"' : ""}>${ae(S)}</span>`, C;
   }, i = t.locale, l = s("cm-add_child", i.addChild, "Tab"), c = s("cm-add_parent", i.addParent, "Ctrl + Enter"), r = s("cm-add_sibling", i.addSibling, "Enter"), a = s("cm-remove_child", i.removeNode, "Delete"), d = s("cm-fucus", i.focus, ""), h = s("cm-unfucus", i.cancelFocus, ""), u = s("cm-up", i.moveUp, "PgUp"), b = s("cm-down", i.moveDown, "Pgdn"), v = s("cm-link", i.link, ""), p = s("cm-link-bidirectional", i.linkBidirectional, ""), g = s("cm-summary", i.summary, ""), m = document.createElement("ul");
   if (m.className = "menu-list", m.appendChild(l), m.appendChild(c), m.appendChild(r), m.appendChild(a), t.focus && (m.appendChild(d), m.appendChild(h)), m.appendChild(u), m.appendChild(b), m.appendChild(g), t.link && (m.appendChild(v), m.appendChild(p)), t && t.extend)
     for (let y = 0; y < t.extend.length; y++) {
-      const x = t.extend[y], E = s(x.name, x.name, x.key || "");
-      m.appendChild(E), E.onclick = (S) => {
-        x.onclick(S);
+      const x = t.extend[y], S = s(x.name, x.name, x.key || "");
+      m.appendChild(S), S.onclick = (C) => {
+        x.onclick(C);
       };
     }
   const w = document.createElement("div");
   w.className = "context-menu", w.appendChild(m), w.hidden = !0, e.container.append(w);
-  let C = !0;
+  let E = !0;
   const N = (y) => {
     const x = y.target;
     if (te(x)) {
-      x.parentElement.tagName === "ME-ROOT" ? C = !0 : C = !1, C ? (d.className = "disabled", u.className = "disabled", b.className = "disabled", c.className = "disabled", r.className = "disabled", a.className = "disabled") : (d.className = "", u.className = "", b.className = "", c.className = "", r.className = "", a.className = ""), w.hidden = !1, m.style.top = "", m.style.bottom = "", m.style.left = "", m.style.right = "";
-      const E = m.offsetHeight, S = m.offsetWidth, T = m.getBoundingClientRect(), _ = y.clientY - T.top, H = y.clientX - T.left;
-      E + _ > window.innerHeight ? (m.style.top = "", m.style.bottom = "0px") : (m.style.bottom = "", m.style.top = _ + 15 + "px"), S + H > window.innerWidth ? (m.style.left = "", m.style.right = "0px") : (m.style.right = "", m.style.left = H + 10 + "px");
+      x.parentElement.tagName === "ME-ROOT" ? E = !0 : E = !1, E ? (d.className = "disabled", u.className = "disabled", b.className = "disabled", c.className = "disabled", r.className = "disabled", a.className = "disabled") : (d.className = "", u.className = "", b.className = "", c.className = "", r.className = "", a.className = ""), w.hidden = !1, m.style.top = "", m.style.bottom = "", m.style.left = "", m.style.right = "";
+      const S = m.offsetHeight, C = m.offsetWidth, T = m.getBoundingClientRect(), D = y.clientY - T.top, L = y.clientX - T.left;
+      S + D > window.innerHeight ? (m.style.top = "", m.style.bottom = "0px") : (m.style.bottom = "", m.style.top = D + 15 + "px"), C + L > window.innerWidth ? (m.style.left = "", m.style.right = "0px") : (m.style.right = "", m.style.left = L + 10 + "px");
     }
   };
   e.bus.addListener("showContextMenu", N), w.onclick = (y) => {
@@ -1336,26 +1336,26 @@ function In(e, t) {
   }, c.onclick = () => {
     e.insertParent(), w.hidden = !0;
   }, r.onclick = () => {
-    C || (e.insertSibling("after"), w.hidden = !0);
+    E || (e.insertSibling("after"), w.hidden = !0);
   }, a.onclick = () => {
-    C || (e.removeNodes(e.currentNodes || []), w.hidden = !0);
+    E || (e.removeNodes(e.currentNodes || []), w.hidden = !0);
   }, d.onclick = () => {
-    C || (e.focusNode(e.currentNode), w.hidden = !0);
+    E || (e.focusNode(e.currentNode), w.hidden = !0);
   }, h.onclick = () => {
     e.cancelFocus(), w.hidden = !0;
   }, u.onclick = () => {
-    C || (e.moveUpNode(), w.hidden = !0);
+    E || (e.moveUpNode(), w.hidden = !0);
   }, b.onclick = () => {
-    C || (e.moveDownNode(), w.hidden = !0);
+    E || (e.moveDownNode(), w.hidden = !0);
   };
   const f = (y) => {
     w.hidden = !0;
-    const x = e.currentNode, E = o(i.clickTips);
-    e.container.appendChild(E), e.map.addEventListener(
+    const x = e.currentNode, S = o(i.clickTips);
+    e.container.appendChild(S), e.map.addEventListener(
       "click",
-      (S) => {
-        S.preventDefault(), E.remove();
-        const T = S.target;
+      (C) => {
+        C.preventDefault(), S.remove();
+        const T = C.target;
         (T.parentElement.tagName === "ME-PARENT" || T.parentElement.tagName === "ME-ROOT") && e.createArrow(x, T, y);
       },
       {
@@ -1543,7 +1543,7 @@ const Ie = (e, t = "px") => typeof e == "number" ? e + t : e, $ = ({ style: e },
     if (i)
       for (const l of n)
         i[e](l, o, { capture: !1, ...s });
-}, W = ct("addEventListener"), P = ct("removeEventListener"), J = (e) => {
+}, W = ct("addEventListener"), O = ct("removeEventListener"), J = (e) => {
   const { clientX: t, clientY: n, target: o } = e.touches?.[0] ?? e;
   return { x: t, y: n, target: o };
 }, Y = (e, t = document) => he(e).map((n) => typeof n == "string" ? Array.from(t.querySelectorAll(n)) : n instanceof Element ? n : null).flat().filter(Boolean), no = (e, t) => t.some((n) => typeof n == "number" ? e.button === n : typeof n == "object" ? n.button !== e.button ? !1 : n.modifiers.every((o) => {
@@ -1649,7 +1649,7 @@ class oo extends Zn {
   }
   _toggleStartEvents(t = !0) {
     const { document: n } = this._options;
-    (t ? W : P)(n, "pointerdown", this._onTapStart);
+    (t ? W : O)(n, "pointerdown", this._onTapStart);
   }
   _onTapStart(t, n = !1) {
     const { x: o, y: s, target: i } = J(t), { document: l, startAreas: c, boundaries: r, behaviour: a, features: d } = this._options, h = i.getBoundingClientRect();
@@ -1710,8 +1710,8 @@ class oo extends Zn {
       typeof s == "number" && j(c + r - (i + l)) >= s || // Different x and y threshold
       typeof s == "object" && j(c - i) >= s.x || j(r - l) >= s.y
     ) {
-      if (P(o, ["pointermove"], this._delayedTapMove, { passive: !1 }), this._emitEvent("beforedrag", t) === !1) {
-        P(o, ["pointerup", "pointercancel"], this._onTapStop);
+      if (O(o, ["pointermove"], this._delayedTapMove, { passive: !1 }), this._emitEvent("beforedrag", t) === !1) {
+        O(o, ["pointerup", "pointercancel"], this._onTapStop);
         return;
       }
       W(o, ["pointermove"], this._onTapMove, { passive: !1 }), $(this._area, "display", "block"), Y(n, o)[0].appendChild(this._clippingElement), this.resolveSelectables(), this._singleClick = !1, this._targetRect = this._targetElement.getBoundingClientRect(), this._scrollAvailable = this._targetElement.scrollHeight !== this._targetElement.clientHeight || this._targetElement.scrollWidth !== this._targetElement.clientWidth, this._scrollAvailable && (this._selectables = this._selectables.filter((a) => this._targetElement.contains(a))), this._setupSelectionArea(), this._emitEvent("start", t), this._onTapMove(t);
@@ -1771,7 +1771,7 @@ class oo extends Zn {
     this._areaLocation.x1 += t.x - s, this._areaLocation.y1 += t.y - o, t.x = s, t.y = o, this._setupSelectionArea(), this._frame.next(null);
   }
   _onStartAreaScroll() {
-    this._targetBoundaryScrolled = !0, P(this._targetElement, "scroll", this._onStartAreaScroll);
+    this._targetBoundaryScrolled = !0, O(this._targetElement, "scroll", this._onStartAreaScroll);
   }
   _recalculateSelectionAreaRect() {
     const { _scrollSpeed: t, _areaLocation: n, _targetElement: o, _options: s } = this, i = this._targetRect, { x1: l, y1: c } = n;
@@ -1791,7 +1791,7 @@ class oo extends Zn {
   }
   _onTapStop(t, n) {
     const { document: o, features: s } = this._options, { _singleClick: i } = this;
-    P(this._targetElement, "scroll", this._onStartAreaScroll), P(o, ["pointermove"], this._delayedTapMove), P(o, ["pointermove"], this._onTapMove), P(o, ["pointerup", "pointercancel"], this._onTapStop), P(o, "scroll", this._onScroll), this._keepSelection(), t && i && s.singleTap.allow ? this._onSingleTap(t) : !i && !n && (this._updateElementSelection(), this._emitEvent("stop", t)), this._scrollSpeed.x = 0, this._scrollSpeed.y = 0, this._clippingElement.remove(), this._frame?.cancel(), $(this._area, "display", "none");
+    O(this._targetElement, "scroll", this._onStartAreaScroll), O(o, ["pointermove"], this._delayedTapMove), O(o, ["pointermove"], this._onTapMove), O(o, ["pointerup", "pointercancel"], this._onTapStop), O(o, "scroll", this._onScroll), this._keepSelection(), t && i && s.singleTap.allow ? this._onSingleTap(t) : !i && !n && (this._updateElementSelection(), this._emitEvent("stop", t)), this._scrollSpeed.x = 0, this._scrollSpeed.y = 0, this._clippingElement.remove(), this._frame?.cancel(), $(this._area, "display", "none");
   }
   _updateElementSelection() {
     const { _selectables: t, _options: n, _selection: o, _areaRect: s } = this, { stored: i, selected: l, touched: c } = o, { intersect: r, overlap: a } = n.behaviour, d = a === "invert", h = [], u = [], b = [];
@@ -2018,13 +2018,17 @@ const io = function(e, t = !0) {
   const o = {
     ...(e.type === "dark" ? ue : fe).cssVar,
     ...e.cssVar
-  }, s = Object.keys(o);
+  };
+  this.compact && (o["--node-gap-x"] = "15px", o["--node-gap-y"] = "2px", o["--main-gap-x"] = "30px", o["--main-gap-y"] = "6px");
+  const s = Object.keys(o);
   for (let i = 0; i < s.length; i++) {
     const l = s[i];
     this.container.style.setProperty(l, o[l]);
   }
   t && this.refresh();
 }, ro = function(e) {
+  this.compact = e, this.theme && this.changeTheme(this.theme);
+}, lo = function(e) {
   return {
     dom: e,
     moved: !1,
@@ -2060,7 +2064,7 @@ const io = function(e, t = !0) {
     }
   };
 }, Ke = {
-  create: ro
+  create: lo
 }, at = "#4dc4ff";
 function dt(e, t, n, o, s, i, l, c) {
   return {
@@ -2068,7 +2072,7 @@ function dt(e, t, n, o, s, i, l, c) {
     y: t / 8 + o * 3 / 8 + i * 3 / 8 + c / 8
   };
 }
-function lo(e, t, n) {
+function co(e, t, n) {
   e && (e.dataset.x = t.toString(), e.dataset.y = n.toString(), re(e));
 }
 function Z(e, t, n, o, s) {
@@ -2106,14 +2110,14 @@ function Ve(e, t, n, o, s, i, l, c, r, a) {
     }
   }
   const { x: b, y: v } = dt(t, n, o, s, i, l, c, r);
-  if (e.labelEl && lo(e.labelEl, b, v), a.style?.labelColor) {
+  if (e.labelEl && co(e.labelEl, b, v), a.style?.labelColor) {
     const p = e.labelEl;
     p && (p.style.color = a.style.labelColor);
   }
-  mo(e);
+  yo(e);
 }
 function se(e, t, n) {
-  const { offsetLeft: o, offsetTop: s } = L(e.nodes, t), i = t.offsetWidth, l = t.offsetHeight, c = o + i / 2, r = s + l / 2, a = c + n.x, d = r + n.y;
+  const { offsetLeft: o, offsetTop: s } = M(e.nodes, t), i = t.offsetWidth, l = t.offsetHeight, c = o + i / 2, r = s + l / 2, a = c + n.x, d = r + n.y;
   return {
     w: i,
     h: l,
@@ -2131,21 +2135,21 @@ function X(e) {
     y: n
   };
 }
-const co = function(e, t, n) {
-  const o = L(e.nodes, t), s = L(e.nodes, n), i = o.offsetLeft + t.offsetWidth / 2, l = o.offsetTop + t.offsetHeight / 2, c = s.offsetLeft + n.offsetWidth / 2, r = s.offsetTop + n.offsetHeight / 2, a = c - i, d = r - l, h = Math.sqrt(a * a + d * d), u = Math.max(50, Math.min(200, h * 0.3)), b = Math.abs(a), v = Math.abs(d);
+const ao = function(e, t, n) {
+  const o = M(e.nodes, t), s = M(e.nodes, n), i = o.offsetLeft + t.offsetWidth / 2, l = o.offsetTop + t.offsetHeight / 2, c = s.offsetLeft + n.offsetWidth / 2, r = s.offsetTop + n.offsetHeight / 2, a = c - i, d = r - l, h = Math.sqrt(a * a + d * d), u = Math.max(50, Math.min(200, h * 0.3)), b = Math.abs(a), v = Math.abs(d);
   let p, g;
   if (h < 150) {
     const w = t.closest("me-main").className === "lhs" ? -1 : 1;
     p = { x: 200 * w, y: 0 }, g = { x: 200 * w, y: 0 };
   } else if (b > v * 1.5) {
-    const w = a > 0 ? t.offsetWidth / 2 : -t.offsetWidth / 2, C = a > 0 ? -n.offsetWidth / 2 : n.offsetWidth / 2;
-    p = { x: w + (a > 0 ? u : -u), y: 0 }, g = { x: C + (a > 0 ? -u : u), y: 0 };
+    const w = a > 0 ? t.offsetWidth / 2 : -t.offsetWidth / 2, E = a > 0 ? -n.offsetWidth / 2 : n.offsetWidth / 2;
+    p = { x: w + (a > 0 ? u : -u), y: 0 }, g = { x: E + (a > 0 ? -u : u), y: 0 };
   } else if (v > b * 1.5) {
-    const w = d > 0 ? t.offsetHeight / 2 : -t.offsetHeight / 2, C = d > 0 ? -n.offsetHeight / 2 : n.offsetHeight / 2;
-    p = { x: 0, y: w + (d > 0 ? u : -u) }, g = { x: 0, y: C + (d > 0 ? -u : u) };
+    const w = d > 0 ? t.offsetHeight / 2 : -t.offsetHeight / 2, E = d > 0 ? -n.offsetHeight / 2 : n.offsetHeight / 2;
+    p = { x: 0, y: w + (d > 0 ? u : -u) }, g = { x: 0, y: E + (d > 0 ? -u : u) };
   } else {
-    const w = Math.atan2(d, a), C = t.offsetWidth / 2 * Math.cos(w), N = t.offsetHeight / 2 * Math.sin(w), f = -(n.offsetWidth / 2) * Math.cos(w), y = -(n.offsetHeight / 2) * Math.sin(w), x = u * 0.7 * (a > 0 ? 1 : -1), E = u * 0.7 * (d > 0 ? 1 : -1);
-    p = { x: C + x, y: N + E }, g = { x: f - x, y: y - E };
+    const w = Math.atan2(d, a), E = t.offsetWidth / 2 * Math.cos(w), N = t.offsetHeight / 2 * Math.sin(w), f = -(n.offsetWidth / 2) * Math.cos(w), y = -(n.offsetHeight / 2) * Math.sin(w), x = u * 0.7 * (a > 0 ? 1 : -1), S = u * 0.7 * (d > 0 ? 1 : -1);
+    p = { x: E + x, y: N + S }, g = { x: f - x, y: y - S };
   }
   return {
     delta1: { x: Math.round(p.x), y: Math.round(p.y) },
@@ -2155,28 +2159,28 @@ const co = function(e, t, n) {
   if (!t || !n)
     return;
   if (!o.delta1 || !o.delta2) {
-    const S = co(e, t, n);
-    o.delta1 = S.delta1, o.delta2 = S.delta2;
+    const C = ao(e, t, n);
+    o.delta1 = C.delta1, o.delta2 = C.delta2;
   }
   const i = se(e, t, o.delta1), l = se(e, n, o.delta2), { x: c, y: r } = X(i), { ctrlX: a, ctrlY: d } = i, { ctrlX: h, ctrlY: u } = l, { x: b, y: v } = X(l), p = oe(h, u, b, v);
   if (!p) return;
   const g = `M ${p.x1} ${p.y1} L ${b} ${v} L ${p.x2} ${p.y2}`;
   let m = "";
   if (o.bidirectional) {
-    const S = oe(a, d, c, r);
-    if (!S) return;
-    m = `M ${S.x1} ${S.y1} L ${c} ${r} L ${S.x2} ${S.y2}`;
+    const C = oe(a, d, c, r);
+    if (!C) return;
+    m = `M ${C.x1} ${C.y1} L ${c} ${r} L ${C.x2} ${C.y2}`;
   }
-  const w = Hn(`M ${c} ${r} C ${a} ${d} ${h} ${u} ${b} ${v}`, g, m, o.style), { x: C, y: N } = dt(c, r, a, d, h, u, b, v), f = o.style?.labelColor || "rgb(235, 95, 82)", y = "a-" + o.id;
+  const w = Hn(`M ${c} ${r} C ${a} ${d} ${h} ${u} ${b} ${v}`, g, m, o.style), { x: E, y: N } = dt(c, r, a, d, h, u, b, v), f = o.style?.labelColor || "rgb(235, 95, 82)", y = "a-" + o.id;
   w.id = y;
-  const x = e.markdown ? e.markdown(o.label, o) : o.label, E = de(x, C, N, {
+  const x = e.markdown ? e.markdown(o.label, o) : o.label, S = de(x, E, N, {
     anchor: "middle",
     color: f,
     dataType: "arrow",
     svgId: y
   });
-  w.labelEl = E, w.arrowObj = o, w.dataset.linkid = o.id, e.labelContainer.appendChild(E), e.arrowSvg.appendChild(w), re(E), s || (e.arrows.push(o), e.currentArrow = w, ft(e, o, i, l));
-}, ao = function(e, t, n = {}) {
+  w.labelEl = S, w.arrowObj = o, w.dataset.linkid = o.id, e.labelContainer.appendChild(S), e.arrowSvg.appendChild(w), re(S), s || (e.arrows.push(o), e.currentArrow = w, ft(e, o, i, l));
+}, ho = function(e, t, n = {}) {
   const o = {
     id: B(),
     label: "Custom Link",
@@ -2188,14 +2192,14 @@ const co = function(e, t, n) {
     name: "createArrow",
     obj: o
   });
-}, ho = function(e) {
+}, fo = function(e) {
   le(this);
   const t = { ...e, id: B() };
   Se(this, this.findEle(t.from), this.findEle(t.to), t), this.bus.fire("operation", {
     name: "createArrow",
     obj: t
   });
-}, fo = function(e) {
+}, uo = function(e) {
   let t;
   if (e ? t = e : t = this.currentArrow, !t) return;
   le(this);
@@ -2206,14 +2210,14 @@ const co = function(e, t, n) {
       id: n
     }
   });
-}, uo = function(e) {
+}, po = function(e) {
   this.currentArrow = e;
   const t = e.arrowObj, n = this.findEle(t.from), o = this.findEle(t.to), s = se(this, n, t.delta1), i = se(this, o, t.delta2);
   this.editable ? ft(this, t, s, i) : ht(e, at), this.bus.fire("selectArrow", t);
-}, po = function() {
+}, go = function() {
   le(this), this.currentArrow = null, this.bus.fire("unselectArrow");
 }, ce = function(e, t) {
-  const n = document.createElementNS(M, "path");
+  const n = document.createElementNS(A, "path");
   return k(n, {
     d: e,
     stroke: t,
@@ -2223,7 +2227,7 @@ const co = function(e, t, n) {
     "stroke-linejoin": "round"
   }), n;
 }, ht = function(e, t) {
-  const n = document.createElementNS(M, "g");
+  const n = document.createElementNS(A, "g");
   n.setAttribute("class", "arrow-highlight"), n.setAttribute("opacity", "0.45");
   const o = ce(e.line.getAttribute("d"), t);
   n.appendChild(o);
@@ -2233,32 +2237,32 @@ const co = function(e, t, n) {
     n.appendChild(i);
   }
   e.insertBefore(n, e.firstChild);
-}, go = function(e) {
+}, mo = function(e) {
   const t = e.querySelector(".arrow-highlight");
   t && t.remove();
-}, mo = function(e) {
+}, yo = function(e) {
   const t = e.querySelector(".arrow-highlight");
   if (!t) return;
   const n = t.querySelectorAll("path");
   n.length >= 1 && n[0].setAttribute("d", e.line.getAttribute("d")), n.length >= 2 && n[1].setAttribute("d", e.arrow1.getAttribute("d")), n.length >= 3 && e.arrow2.getAttribute("d") && n[2].setAttribute("d", e.arrow2.getAttribute("d"));
 }, le = function(e) {
-  e.helper1?.destroy(), e.helper2?.destroy(), e.linkController.style.display = "none", e.P2.style.display = "none", e.P3.style.display = "none", e.currentArrow && go(e.currentArrow);
+  e.helper1?.destroy(), e.helper2?.destroy(), e.linkController.style.display = "none", e.P2.style.display = "none", e.P3.style.display = "none", e.currentArrow && mo(e.currentArrow);
 }, ft = function(e, t, n, o) {
   const { linkController: s, P2: i, P3: l, line1: c, line2: r, nodes: a, map: d, currentArrow: h, bus: u } = e;
   if (!h) return;
   s.style.display = "initial", i.style.display = "initial", l.style.display = "initial", a.appendChild(s), a.appendChild(i), a.appendChild(l), ht(h, at);
-  let { x: b, y: v } = X(n), { ctrlX: p, ctrlY: g } = n, { ctrlX: m, ctrlY: w } = o, { x: C, y: N } = X(o);
-  i.style.cssText = `top:${g}px;left:${p}px;`, l.style.cssText = `top:${w}px;left:${m}px;`, Z(c, b, v, p, g), Z(r, m, w, C, N), e.helper1 = Ke.create(i), e.helper2 = Ke.create(l), e.helper1.init(d, (f, y) => {
+  let { x: b, y: v } = X(n), { ctrlX: p, ctrlY: g } = n, { ctrlX: m, ctrlY: w } = o, { x: E, y: N } = X(o);
+  i.style.cssText = `top:${g}px;left:${p}px;`, l.style.cssText = `top:${w}px;left:${m}px;`, Z(c, b, v, p, g), Z(r, m, w, E, N), e.helper1 = Ke.create(i), e.helper2 = Ke.create(l), e.helper1.init(d, (f, y) => {
     p = p + f / e.scaleVal, g = g + y / e.scaleVal;
     const x = X({ ...n, ctrlX: p, ctrlY: g });
-    b = x.x, v = x.y, i.style.top = g + "px", i.style.left = p + "px", Ve(h, b, v, p, g, m, w, C, N, t), Z(c, b, v, p, g), t.delta1.x = Math.round(p - n.cx), t.delta1.y = Math.round(g - n.cy), u.fire("updateArrowDelta", t);
+    b = x.x, v = x.y, i.style.top = g + "px", i.style.left = p + "px", Ve(h, b, v, p, g, m, w, E, N, t), Z(c, b, v, p, g), t.delta1.x = Math.round(p - n.cx), t.delta1.y = Math.round(g - n.cy), u.fire("updateArrowDelta", t);
   }), e.helper2.init(d, (f, y) => {
     m = m + f / e.scaleVal, w = w + y / e.scaleVal;
     const x = X({ ...o, ctrlX: m, ctrlY: w });
-    C = x.x, N = x.y, l.style.top = w + "px", l.style.left = m + "px", Ve(h, b, v, p, g, m, w, C, N, t), Z(r, m, w, C, N), t.delta2.x = Math.round(m - o.cx), t.delta2.y = Math.round(w - o.cy), u.fire("updateArrowDelta", t);
+    E = x.x, N = x.y, l.style.top = w + "px", l.style.left = m + "px", Ve(h, b, v, p, g, m, w, E, N, t), Z(r, m, w, E, N), t.delta2.x = Math.round(m - o.cx), t.delta2.y = Math.round(w - o.cy), u.fire("updateArrowDelta", t);
   });
 };
-function yo() {
+function bo() {
   this.arrowSvg.innerHTML = "", this.labelContainer.querySelectorAll('.svg-label[data-type="arrow"]').forEach((t) => t.remove());
   for (let t = 0; t < this.arrows.length; t++) {
     const n = this.arrows[t];
@@ -2269,23 +2273,23 @@ function yo() {
   }
   this.nodes.appendChild(this.arrowSvg);
 }
-function bo(e) {
+function vo(e) {
   le(this), e && e.labelEl && rt(this, e.labelEl, e.arrowObj);
 }
-function vo() {
+function wo() {
   this.arrows = this.arrows.filter((e) => ne(e.from, this.nodeData) && ne(e.to, this.nodeData));
 }
-const wo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const xo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  createArrow: ao,
-  createArrowFrom: ho,
-  editArrowLabel: bo,
-  removeArrow: fo,
-  renderArrow: yo,
-  selectArrow: uo,
-  tidyArrow: vo,
-  unselectArrow: po
-}, Symbol.toStringTag, { value: "Module" })), xo = function(e) {
+  createArrow: ho,
+  createArrowFrom: fo,
+  editArrowLabel: vo,
+  removeArrow: uo,
+  renderArrow: bo,
+  selectArrow: po,
+  tidyArrow: wo,
+  unselectArrow: go
+}, Symbol.toStringTag, { value: "Module" })), Eo = function(e) {
   if (e.length === 0) throw new Error("No selected node.");
   if (e.length === 1) {
     const r = e[0].nodeObj, a = e[0].nodeObj.parent;
@@ -2322,11 +2326,11 @@ const wo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     start: i,
     end: l
   };
-}, Eo = function(e) {
-  const t = document.createElementNS(M, "g");
+}, Co = function(e) {
+  const t = document.createElementNS(A, "g");
   return t.setAttribute("id", e), t;
 }, ze = function(e, t) {
-  const n = document.createElementNS(M, "path");
+  const n = document.createElementNS(A, "path");
   return k(n, {
     d: e,
     stroke: t || "#666",
@@ -2334,89 +2338,89 @@ const wo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     "stroke-linecap": "round",
     "stroke-width": "2"
   }), n;
-}, Co = (e) => e.parentElement.parentElement, So = function(e, { parent: t, start: n }) {
+}, So = (e) => e.parentElement.parentElement, No = function(e, { parent: t, start: n }) {
   const o = e.findEle(t), s = o.nodeObj;
   let i;
   return s.parent ? i = o.closest("me-main").className : i = e.findEle(s.children[n].id).closest("me-main").className, i;
 }, Ne = function(e, t) {
-  const { id: n, label: o, parent: s, start: i, end: l, style: c } = t, { nodes: r, theme: a, summarySvg: d } = e, u = e.findEle(s).nodeObj, b = So(e, t);
+  const { id: n, label: o, parent: s, start: i, end: l, style: c } = t, { nodes: r, theme: a, summarySvg: d } = e, u = e.findEle(s).nodeObj, b = No(e, t);
   let v = 1 / 0, p = 0, g = 0, m = 0;
   for (let V = i; V <= l; V++) {
     const Te = u.children?.[V];
     if (!Te)
       return e.removeSummary(n), null;
-    const q = Co(e.findEle(Te.id)), { offsetLeft: U, offsetTop: ke } = L(r, q), _e = i === l ? 10 : 20;
+    const q = So(e.findEle(Te.id)), { offsetLeft: U, offsetTop: ke } = M(r, q), _e = i === l ? 10 : 20;
     V === i && (g = ke + _e), V === l && (m = ke + q.offsetHeight - _e), U < v && (v = U), q.offsetWidth + U > p && (p = q.offsetWidth + U);
   }
-  let w, C;
-  const N = u.parent ? 10 : 0, f = g + N, y = m + N, x = (f + y) / 2, E = c?.stroke || a.cssVar["--color"], S = c?.labelColor || a.cssVar["--color"], T = "s-" + n, _ = e.markdown ? e.markdown(o, t) : o;
-  b === O.LHS ? (w = ze(`M ${v + 10} ${f} c -5 0 -10 5 -10 10 L ${v} ${y - 10} c 0 5 5 10 10 10 M ${v} ${x} h -10`, E), C = de(_, v - 20, x, { anchor: "end", color: S, dataType: "summary", svgId: T })) : (w = ze(`M ${p - 10} ${f} c 5 0 10 5 10 10 L ${p} ${y - 10} c 0 5 -5 10 -10 10 M ${p} ${x} h 10`, E), C = de(_, p + 20, x, { anchor: "start", color: S, dataType: "summary", svgId: T }));
-  const H = Eo(T);
-  return H.appendChild(w), e.labelContainer.appendChild(C), re(C), H.summaryObj = t, H.labelEl = C, d.appendChild(H), H;
-}, No = function(e = {}) {
+  let w, E;
+  const N = u.parent ? 10 : 0, f = g + N, y = m + N, x = (f + y) / 2, S = c?.stroke || a.cssVar["--color"], C = c?.labelColor || a.cssVar["--color"], T = "s-" + n, D = e.markdown ? e.markdown(o, t) : o;
+  b === H.LHS ? (w = ze(`M ${v + 10} ${f} c -5 0 -10 5 -10 10 L ${v} ${y - 10} c 0 5 5 10 10 10 M ${v} ${x} h -10`, S), E = de(D, v - 20, x, { anchor: "end", color: C, dataType: "summary", svgId: T })) : (w = ze(`M ${p - 10} ${f} c 5 0 10 5 10 10 L ${p} ${y - 10} c 0 5 -5 10 -10 10 M ${p} ${x} h 10`, S), E = de(D, p + 20, x, { anchor: "start", color: C, dataType: "summary", svgId: T }));
+  const L = Co(T);
+  return L.appendChild(w), e.labelContainer.appendChild(E), re(E), L.summaryObj = t, L.labelEl = E, d.appendChild(L), L;
+}, To = function(e = {}) {
   if (!this.currentNodes) return;
-  const { currentNodes: t, summaries: n, bus: o } = this, { parent: s, start: i, end: l } = xo(t), c = { id: B(), parent: s, start: i, end: l, label: "summary", style: e.style }, r = Ne(this, c);
+  const { currentNodes: t, summaries: n, bus: o } = this, { parent: s, start: i, end: l } = Eo(t), c = { id: B(), parent: s, start: i, end: l, label: "summary", style: e.style }, r = Ne(this, c);
   n.push(c), this.editSummary(r), o.fire("operation", {
     name: "createSummary",
     obj: c
   });
-}, To = function(e) {
+}, ko = function(e) {
   const t = B(), n = { ...e, id: t };
   Ne(this, n), this.summaries.push(n), this.bus.fire("operation", {
     name: "createSummary",
     obj: n
   });
-}, ko = function(e) {
+}, _o = function(e) {
   const t = this.summaries.findIndex((n) => n.id === e);
   t > -1 && (this.summaries.splice(t, 1), this.nodes.querySelector("#s-" + e)?.remove(), this.nodes.querySelector("#label-s-" + e)?.remove()), this.bus.fire("operation", {
     name: "removeSummary",
     obj: { id: e }
   });
-}, _o = function(e) {
+}, Do = function(e) {
   const t = e.labelEl;
   t && t.classList.add("selected"), this.currentSummary = e, this.bus.fire("selectSummary", e.summaryObj);
-}, Do = function() {
-  this.currentSummary?.labelEl?.classList.remove("selected"), this.currentSummary = null, this.bus.fire("unselectSummary");
 }, Lo = function() {
+  this.currentSummary?.labelEl?.classList.remove("selected"), this.currentSummary = null, this.bus.fire("unselectSummary");
+}, Mo = function() {
   this.summarySvg.innerHTML = "", this.summaries.forEach((e) => {
     try {
       Ne(this, e);
     } catch {
     }
   }), this.nodes.insertAdjacentElement("beforeend", this.summarySvg);
-}, Mo = function(e) {
+}, Ao = function(e) {
   e && e.labelEl && rt(this, e.labelEl, e.summaryObj);
-}, Ao = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Po = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  createSummary: No,
-  createSummaryFrom: To,
-  editSummary: Mo,
-  removeSummary: ko,
-  renderSummary: Lo,
-  selectSummary: _o,
-  unselectSummary: Do
-}, Symbol.toStringTag, { value: "Module" })), D = "http://www.w3.org/2000/svg";
-function Po(e, t) {
-  const n = document.createElementNS(D, "svg");
+  createSummary: To,
+  createSummaryFrom: ko,
+  editSummary: Ao,
+  removeSummary: _o,
+  renderSummary: Mo,
+  selectSummary: Do,
+  unselectSummary: Lo
+}, Symbol.toStringTag, { value: "Module" })), _ = "http://www.w3.org/2000/svg";
+function Oo(e, t) {
+  const n = document.createElementNS(_, "svg");
   return k(n, {
     version: "1.1",
-    xmlns: D,
+    xmlns: _,
     height: e,
     width: t
   }), n;
 }
-function Oo(e, t) {
+function Ho(e, t) {
   return (parseInt(e) - parseInt(t)) / 2;
 }
-function Ho(e, t, n, o) {
-  const s = document.createElementNS(D, "g");
+function $o(e, t, n, o) {
+  const s = document.createElementNS(_, "g");
   let i = "";
   return e.text ? i = e.text.textContent : i = e.childNodes[0].textContent, i.split(`
 `).forEach((c, r) => {
-    const a = document.createElementNS(D, "text");
+    const a = document.createElementNS(_, "text");
     k(a, {
       x: n + parseInt(t.paddingLeft) + "",
-      y: o + parseInt(t.paddingTop) + Oo(t.lineHeight, t.fontSize) * (r + 1) + parseFloat(t.fontSize) * (r + 1) + "",
+      y: o + parseInt(t.paddingTop) + Ho(t.lineHeight, t.fontSize) * (r + 1) + parseFloat(t.fontSize) * (r + 1) + "",
       "text-anchor": "start",
       "font-family": t.fontFamily,
       "font-size": `${t.fontSize}`,
@@ -2425,10 +2429,10 @@ function Ho(e, t, n, o) {
     }), a.innerHTML = c, s.appendChild(a);
   }), s;
 }
-function $o(e, t, n, o) {
+function jo(e, t, n, o) {
   let s = "";
   e.nodeObj?.dangerouslySetInnerHTML ? s = e.nodeObj.dangerouslySetInnerHTML : e.text ? s = e.text.textContent : s = e.childNodes[0].textContent;
-  const i = document.createElementNS(D, "foreignObject");
+  const i = document.createElementNS(_, "foreignObject");
   k(i, {
     x: n + parseInt(t.paddingLeft) + "",
     y: o + parseInt(t.paddingTop) + "",
@@ -2441,8 +2445,8 @@ function $o(e, t, n, o) {
     style: `font-family: ${t.fontFamily}; font-size: ${t.fontSize}; font-weight: ${t.fontWeight}; color: ${t.color}; white-space: pre-wrap;`
   }), l.innerHTML = s, i.appendChild(l), i;
 }
-function jo(e, t) {
-  const n = getComputedStyle(t), { offsetLeft: o, offsetTop: s } = L(e.nodes, t), i = document.createElementNS(D, "rect");
+function Io(e, t) {
+  const n = getComputedStyle(t), { offsetLeft: o, offsetTop: s } = M(e.nodes, t), i = document.createElementNS(_, "rect");
   return k(i, {
     x: o + "",
     y: s + "",
@@ -2456,7 +2460,7 @@ function jo(e, t) {
   }), i;
 }
 function Q(e, t, n = !1) {
-  const o = getComputedStyle(t), { offsetLeft: s, offsetTop: i } = L(e.nodes, t), l = document.createElementNS(D, "rect");
+  const o = getComputedStyle(t), { offsetLeft: s, offsetTop: i } = M(e.nodes, t), l = document.createElementNS(_, "rect");
   k(l, {
     x: s + "",
     y: i + "",
@@ -2468,13 +2472,13 @@ function Q(e, t, n = !1) {
     stroke: o.borderColor,
     "stroke-width": o.borderWidth
   });
-  const c = document.createElementNS(D, "g");
+  const c = document.createElementNS(_, "g");
   c.appendChild(l);
   let r;
-  return n ? r = $o(t, o, s, i) : r = Ho(t, o, s, i), c.appendChild(r), c;
+  return n ? r = jo(t, o, s, i) : r = $o(t, o, s, i), c.appendChild(r), c;
 }
-function Io(e, t) {
-  const n = getComputedStyle(t), { offsetLeft: o, offsetTop: s } = L(e.nodes, t), i = document.createElementNS(D, "a"), l = document.createElementNS(D, "text");
+function Ro(e, t) {
+  const n = getComputedStyle(t), { offsetLeft: o, offsetTop: s } = M(e.nodes, t), i = document.createElementNS(_, "a"), l = document.createElementNS(_, "text");
   return k(l, {
     x: o + "",
     y: s + parseInt(n.fontSize) + "",
@@ -2485,8 +2489,8 @@ function Io(e, t) {
     fill: `${n.color}`
   }), l.innerHTML = t.textContent, i.appendChild(l), i.setAttribute("href", t.href), i;
 }
-function Ro(e, t) {
-  const n = getComputedStyle(t), { offsetLeft: o, offsetTop: s } = L(e.nodes, t), i = document.createElementNS(D, "image");
+function Bo(e, t) {
+  const n = getComputedStyle(t), { offsetLeft: o, offsetTop: s } = M(e.nodes, t), i = document.createElementNS(_, "image");
   return k(i, {
     x: o + "",
     y: s + "",
@@ -2495,8 +2499,8 @@ function Ro(e, t) {
     href: t.src
   }), i;
 }
-const ee = 100, Bo = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">', Wo = (e, t = !1) => {
-  const n = e.nodes, o = n.offsetHeight + ee * 2, s = n.offsetWidth + ee * 2, i = Po(o + "px", s + "px"), l = document.createElementNS(D, "svg"), c = document.createElementNS(D, "rect");
+const ee = 100, Wo = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">', Yo = (e, t = !1) => {
+  const n = e.nodes, o = n.offsetHeight + ee * 2, s = n.offsetWidth + ee * 2, i = Oo(o + "px", s + "px"), l = document.createElementNS(_, "svg"), c = document.createElementNS(_, "rect");
   k(c, {
     x: "0",
     y: "0",
@@ -2504,7 +2508,7 @@ const ee = 100, Bo = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC
     height: `${o}`,
     fill: e.theme.cssVar["--bgcolor"]
   }), i.appendChild(c), n.querySelectorAll(".subLines").forEach((h) => {
-    const u = h.cloneNode(!0), { offsetLeft: b, offsetTop: v } = L(n, h.parentElement);
+    const u = h.cloneNode(!0), { offsetLeft: b, offsetTop: v } = M(n, h.parentElement);
     u.setAttribute("x", `${b}`), u.setAttribute("y", `${v}`), l.appendChild(u);
   });
   const r = n.querySelector(".lines")?.cloneNode(!0);
@@ -2513,22 +2517,22 @@ const ee = 100, Bo = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC
   a && l.appendChild(a);
   const d = n.querySelector(".summary")?.cloneNode(!0);
   return d && l.appendChild(d), n.querySelectorAll("me-tpc").forEach((h) => {
-    h.nodeObj.dangerouslySetInnerHTML ? l.appendChild(Q(e, h, !t)) : (l.appendChild(jo(e, h)), l.appendChild(Q(e, h.text, !t)));
+    h.nodeObj.dangerouslySetInnerHTML ? l.appendChild(Q(e, h, !t)) : (l.appendChild(Io(e, h)), l.appendChild(Q(e, h.text, !t)));
   }), n.querySelectorAll(".tags > span").forEach((h) => {
     l.appendChild(Q(e, h));
   }), n.querySelectorAll(".icons > span").forEach((h) => {
     l.appendChild(Q(e, h));
   }), n.querySelectorAll(".hyper-link").forEach((h) => {
-    l.appendChild(Io(e, h));
-  }), n.querySelectorAll("img").forEach((h) => {
     l.appendChild(Ro(e, h));
+  }), n.querySelectorAll("img").forEach((h) => {
+    l.appendChild(Bo(e, h));
   }), k(l, {
     x: ee + "",
     y: ee + "",
     overflow: "visible"
   }), i.appendChild(l), i;
-}, Yo = (e, t) => (t && e.insertAdjacentHTML("afterbegin", "<style>" + t + "</style>"), Bo + e.outerHTML);
-function Xo(e) {
+}, Xo = (e, t) => (t && e.insertAdjacentHTML("afterbegin", "<style>" + t + "</style>"), Wo + e.outerHTML);
+function Fo(e) {
   return new Promise((t, n) => {
     const o = new FileReader();
     o.onload = (s) => {
@@ -2538,11 +2542,11 @@ function Xo(e) {
     }, o.readAsDataURL(e);
   });
 }
-const Fo = function(e = !1, t) {
-  const n = Wo(this, e), o = Yo(n, t);
+const Ko = function(e = !1, t) {
+  const n = Yo(this, e), o = Xo(n, t);
   return new Blob([o], { type: "image/svg+xml" });
-}, Ko = async function(e = !1, t) {
-  const n = this.exportSvg(e, t), o = await Xo(n);
+}, Vo = async function(e = !1, t) {
+  const n = this.exportSvg(e, t), o = await Fo(n);
   return new Promise((s, i) => {
     const l = new Image();
     l.setAttribute("crossOrigin", "anonymous"), l.onload = () => {
@@ -2550,12 +2554,12 @@ const Fo = function(e = !1, t) {
       c.width = l.width, c.height = l.height, c.getContext("2d").drawImage(l, 0, 0), c.toBlob(s, "image/png", 1);
     }, l.src = o, l.onerror = i;
   });
-}, Vo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, zo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  exportPng: Ko,
-  exportSvg: Fo
+  exportPng: Vo,
+  exportSvg: Ko
 }, Symbol.toStringTag, { value: "Module" }));
-function zo(e, t) {
+function Go(e, t) {
   return async function(...n) {
     const o = this.before[t];
     o && !await o.apply(this, n) || e.apply(this, n);
@@ -2564,9 +2568,9 @@ function zo(e, t) {
 const Ge = Object.keys(ot), ut = {};
 for (let e = 0; e < Ge.length; e++) {
   const t = Ge[e];
-  ut[t] = zo(ot[t], t);
+  ut[t] = Go(ot[t], t);
 }
-const Go = {
+const qo = {
   getObjById: ne,
   generateNewObj: pt,
   layout: Ct,
@@ -2578,11 +2582,12 @@ const Go = {
   createTopic: Dt,
   findEle: Ze,
   changeTheme: io,
+  changeCompact: ro,
   ...En,
   ...ut,
-  ...wo,
-  ...Ao,
-  ...Vo,
+  ...xo,
+  ...Po,
+  ...zo,
   init(e) {
     if (e = JSON.parse(JSON.stringify(e)), !e || !e.nodeData) return new Error("MindElixir: `data` is required");
     e.direction !== void 0 && (this.direction = e.direction), this.changeTheme(e.theme || this.theme, !1), this.nodeData = e.nodeData, R(this.nodeData), this.arrows = e.arrows || [], this.summaries = e.summaries || [], this.tidyArrow(), this.toolBar && Jn(this), this.keypress && An(this, this.keypress), so(this), this.disposable.push(Et()), this.contextMenu && this.disposable.push(In(this, this.contextMenu)), this.allowUndo && this.disposable.push(Bn(this)), this.layout(), this.linkDiv(), this.toCenter();
@@ -2598,25 +2603,25 @@ const Go = {
     this.mobileMultiSelect = e;
   }
 };
-function qo({ pT: e, pL: t, pW: n, pH: o, cT: s, cL: i, cW: l, cH: c, direction: r, containerHeight: a }) {
+function Uo({ pT: e, pL: t, pW: n, pH: o, cT: s, cL: i, cW: l, cH: c, direction: r, containerHeight: a }) {
   let d = t + n / 2;
   const h = e + o / 2;
   let u;
-  r === O.LHS ? u = i + l : u = i;
+  r === H.LHS ? u = i + l : u = i;
   const b = s + c / 2, p = (1 - Math.abs(b - h) / a) * 0.25 * (n / 2);
-  return r === O.LHS ? d = d - n / 10 - p : d = d + n / 10 + p, `M ${d} ${h} Q ${d} ${b} ${u} ${b}`;
+  return r === H.LHS ? d = d - n / 10 - p : d = d + n / 10 + p, `M ${d} ${h} Q ${d} ${b} ${u} ${b}`;
 }
-function Uo({ pT: e, pL: t, pW: n, pH: o, cT: s, cL: i, cW: l, cH: c, direction: r, isFirst: a }) {
+function Jo({ pT: e, pL: t, pW: n, pH: o, cT: s, cL: i, cW: l, cH: c, direction: r, isFirst: a }) {
   const d = parseInt(this.container.style.getPropertyValue("--node-gap-x"));
   let h = 0, u = 0;
   a ? h = e + o / 2 : h = e + o;
   const b = s + c;
   let v = 0, p = 0, g = 0;
   const m = Math.abs(h - b) / 300 * d;
-  return r === O.LHS ? (g = t, v = g + d, p = g - d, u = i + d, `M ${v} ${h} C ${g} ${h} ${g + m} ${b} ${p} ${b} H ${u}`) : (g = t + n, v = g - d, p = g + d, u = i + l - d, `M ${v} ${h} C ${g} ${h} ${g - m} ${b} ${p} ${b} H ${u}`);
+  return r === H.LHS ? (g = t, v = g + d, p = g - d, u = i + d, `M ${v} ${h} C ${g} ${h} ${g + m} ${b} ${p} ${b} H ${u}`) : (g = t + n, v = g - d, p = g + d, u = i + l - d, `M ${v} ${h} C ${g} ${h} ${g - m} ${b} ${p} ${b} H ${u}`);
 }
-const Jo = "5.11.3";
-function Zo(e) {
+const Zo = "5.12.0";
+function Qo(e) {
   return {
     x: 0,
     y: 0,
@@ -2643,7 +2648,7 @@ function Zo(e) {
     }
   };
 }
-function A({
+function P({
   el: e,
   direction: t,
   editable: n,
@@ -2658,41 +2663,42 @@ function A({
   generateMainBranch: h,
   generateSubBranch: u,
   overflowHidden: b,
-  theme: v,
-  alignment: p,
-  scaleSensitivity: g,
-  scaleMax: m,
-  scaleMin: w,
-  handleWheel: C,
-  markdown: N,
-  imageProxy: f,
-  pasteHandler: y,
-  mobileMultiSelect: x
+  compact: v,
+  theme: p,
+  alignment: g,
+  scaleSensitivity: m,
+  scaleMax: w,
+  scaleMin: E,
+  handleWheel: N,
+  markdown: f,
+  imageProxy: y,
+  pasteHandler: x,
+  mobileMultiSelect: S
 }) {
-  let E = null;
-  const S = Object.prototype.toString.call(e);
-  if (S === "[object HTMLDivElement]" ? E = e : S === "[object String]" && (E = document.querySelector(e)), !E) throw new Error("MindElixir: el is not a valid element");
-  E.style.position = "relative", E.innerHTML = "", this.el = E, this.disposable = [], this.before = r || {}, this.newTopicName = a || "New Node", this.contextMenu = o ?? !0, this.toolBar = s ?? !0, this.keypress = i ?? !0, this.mouseSelectionButton = l ?? 0, this.direction = t ?? 1, this.editable = n ?? !0, this.allowUndo = d ?? !0, this.scaleSensitivity = g ?? 0.1, this.scaleMax = m ?? 1.4, this.scaleMin = w ?? 0.2, this.generateMainBranch = h || qo, this.generateSubBranch = u || Uo, this.overflowHidden = b ?? !1, this.alignment = p ?? "root", this.handleWheel = C ?? !0, this.markdown = N || void 0, this.imageProxy = f || void 0, this.currentNodes = [], this.currentArrow = null, this.scaleVal = 1, this.tempDirection = null, this.mobileMultiSelect = x ?? !1, this.panHelper = Zo(this), this.bus = On(), this.container = document.createElement("div"), this.selectionContainer = c || this.container, this.container.className = "map-container";
-  const T = window.matchMedia("(prefers-color-scheme: dark)");
-  this.theme = v || (T.matches ? ue : fe);
-  const _ = document.createElement("div");
-  _.className = "map-canvas", this.map = _, this.container.setAttribute("tabindex", "0"), this.container.appendChild(this.map), this.el.appendChild(this.container), this.nodes = document.createElement("me-nodes"), this.lines = z("lines"), this.summarySvg = z("summary"), this.linkController = z("linkcontroller"), this.P2 = document.createElement("div"), this.P3 = document.createElement("div"), this.P2.className = this.P3.className = "circle", this.P2.style.display = this.P3.style.display = "none", this.line1 = je(), this.line2 = je(), this.linkController.appendChild(this.line1), this.linkController.appendChild(this.line2), this.arrowSvg = z("topiclinks"), this.labelContainer = document.createElement("div"), this.labelContainer.className = "label-container", this.map.appendChild(this.nodes), this.overflowHidden ? this.container.style.overflow = "hidden" : this.disposable.push(Pn(this)), y && (this.pasteHandler = y);
+  let C = null;
+  const T = Object.prototype.toString.call(e);
+  if (T === "[object HTMLDivElement]" ? C = e : T === "[object String]" && (C = document.querySelector(e)), !C) throw new Error("MindElixir: el is not a valid element");
+  C.style.position = "relative", C.innerHTML = "", this.el = C, this.disposable = [], this.before = r || {}, this.newTopicName = a || "New Node", this.contextMenu = o ?? !0, this.toolBar = s ?? !0, this.keypress = i ?? !0, this.mouseSelectionButton = l ?? 0, this.direction = t ?? 1, this.editable = n ?? !0, this.allowUndo = d ?? !0, this.scaleSensitivity = m ?? 0.1, this.scaleMax = w ?? 1.4, this.scaleMin = E ?? 0.2, this.generateMainBranch = h || Uo, this.generateSubBranch = u || Jo, this.overflowHidden = b ?? !1, this.compact = v ?? !1, this.alignment = g ?? "root", this.handleWheel = N ?? !0, this.markdown = f || void 0, this.imageProxy = y || void 0, this.currentNodes = [], this.currentArrow = null, this.scaleVal = 1, this.tempDirection = null, this.mobileMultiSelect = S ?? !1, this.panHelper = Qo(this), this.bus = On(), this.container = document.createElement("div"), this.selectionContainer = c || this.container, this.container.className = "map-container";
+  const D = window.matchMedia("(prefers-color-scheme: dark)");
+  this.theme = p || (D.matches ? ue : fe);
+  const L = document.createElement("div");
+  L.className = "map-canvas", this.map = L, this.container.setAttribute("tabindex", "0"), this.container.appendChild(this.map), this.el.appendChild(this.container), this.nodes = document.createElement("me-nodes"), this.lines = z("lines"), this.summarySvg = z("summary"), this.linkController = z("linkcontroller"), this.P2 = document.createElement("div"), this.P3 = document.createElement("div"), this.P2.className = this.P3.className = "circle", this.P2.style.display = this.P3.style.display = "none", this.line1 = je(), this.line2 = je(), this.linkController.appendChild(this.line1), this.linkController.appendChild(this.line2), this.arrowSvg = z("topiclinks"), this.labelContainer = document.createElement("div"), this.labelContainer.className = "label-container", this.map.appendChild(this.nodes), this.overflowHidden ? this.container.style.overflow = "hidden" : this.disposable.push(Pn(this)), x && (this.pasteHandler = x);
 }
-A.prototype = Go;
-Object.defineProperty(A.prototype, "currentNode", {
+P.prototype = qo;
+Object.defineProperty(P.prototype, "currentNode", {
   get() {
     return this.currentNodes[this.currentNodes.length - 1];
   },
   enumerable: !0
 });
-A.LEFT = 0;
-A.RIGHT = 1;
-A.SIDE = 2;
-A.THEME = fe;
-A.DARK_THEME = ue;
-A.version = Jo;
-A.E = Ze;
-A.new = (e) => ({
+P.LEFT = 0;
+P.RIGHT = 1;
+P.SIDE = 2;
+P.THEME = fe;
+P.DARK_THEME = ue;
+P.version = Zo;
+P.E = Ze;
+P.new = (e) => ({
   nodeData: {
     id: B(),
     topic: e || "new topic",
@@ -2701,9 +2707,9 @@ A.new = (e) => ({
 });
 export {
   ue as DARK_THEME,
-  Qo as LEFT,
-  es as RIGHT,
-  ts as SIDE,
+  es as LEFT,
+  ts as RIGHT,
+  ns as SIDE,
   fe as THEME,
-  A as default
+  P as default
 };