@darajs/components 1.9.5 → 1.10.0

package/dist/umd/dara.components.umd.js

@@ -786,6 +786,11 @@
     icon: [448, 512, [61460, "trash-alt"], "f2ed", "M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"]
   };
   var faTrashAlt = faTrashCan;
+  var faDownLeftAndUpRightToCenter = {
+    prefix: "fas",
+    iconName: "down-left-and-up-right-to-center",
+    icon: [512, 512, ["compress-alt"], "f422", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z"]
+  };
   var faToggleOff = {
     prefix: "fas",
     iconName: "toggle-off",
@@ -933,6 +938,11 @@
     iconName: "moon",
     icon: [384, 512, [127769, 9214], "f186", "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"]
   };
+  var faUpRightAndDownLeftFromCenter = {
+    prefix: "fas",
+    iconName: "up-right-and-down-left-from-center",
+    icon: [512, 512, ["expand-alt"], "f424", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"]
+  };
   var faCheck = {
     prefix: "fas",
     iconName: "check",
@@ -4055,6 +4065,9 @@
   const TrashAlt = (props) => {
     return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faTrashAlt }, props));
   };
+  const DownLeftAndUpRightToCenter = (props) => {
+    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faDownLeftAndUpRightToCenter }, props));
+  };
   const PenToSquare = (props) => {
     return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faPenToSquare }, props));
   };
@@ -4070,6 +4083,9 @@
   const Xmark = (props) => {
     return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faXmark }, props));
   };
+  const UpRightAndDownLeftFromCenter = (props) => {
+    return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faUpRightAndDownLeftFromCenter }, props));
+  };
   const TriangleExclamation = (props) => {
     return jsxRuntime.exports.jsx(StyledFAIcon, Object.assign({ icon: faTriangleExclamation }, props));
   };
@@ -5521,55 +5537,6 @@
     var step2 = (stop - start2) / Math.max(0, count2), power = Math.floor(Math.log(step2) / Math.LN10), error2 = step2 / Math.pow(10, power);
     return power >= 0 ? (error2 >= e10 ? 10 : error2 >= e5 ? 5 : error2 >= e2 ? 2 : 1) * Math.pow(10, power) : -Math.pow(10, -power) / (error2 >= e10 ? 10 : error2 >= e5 ? 5 : error2 >= e2 ? 2 : 1);
   }
-  function initRange(domain2, range2) {
-    switch (arguments.length) {
-      case 0:
-        break;
-      case 1:
-        this.range(domain2);
-        break;
-      default:
-        this.range(range2).domain(domain2);
-        break;
-    }
-    return this;
-  }
-  const implicit = Symbol("implicit");
-  function ordinal() {
-    var index2 = /* @__PURE__ */ new Map(), domain2 = [], range2 = [], unknown2 = implicit;
-    function scale(d2) {
-      var key = d2 + "", i2 = index2.get(key);
-      if (!i2) {
-        if (unknown2 !== implicit)
-          return unknown2;
-        index2.set(key, i2 = domain2.push(d2));
-      }
-      return range2[(i2 - 1) % range2.length];
-    }
-    scale.domain = function(_2) {
-      if (!arguments.length)
-        return domain2.slice();
-      domain2 = [], index2 = /* @__PURE__ */ new Map();
-      for (const value of _2) {
-        const key = value + "";
-        if (index2.has(key))
-          continue;
-        index2.set(key, domain2.push(value));
-      }
-      return scale;
-    };
-    scale.range = function(_2) {
-      return arguments.length ? (range2 = Array.from(_2), scale) : range2.slice();
-    };
-    scale.unknown = function(_2) {
-      return arguments.length ? (unknown2 = _2, scale) : unknown2;
-    };
-    scale.copy = function() {
-      return ordinal(domain2, range2).unknown(unknown2);
-    };
-    initRange.apply(scale, arguments);
-    return scale;
-  }
   function useIntersectionObserver(ref2, rootMargin = "0px", threshold = 1) {
     const [isIntersecting, setIntersecting] = React.useState(false);
     React.useEffect(() => {
@@ -24722,13 +24689,13 @@
   }
   function imageReference$1(state, node2) {
     const id2 = String(node2.identifier).toUpperCase();
-    const def = state.definitionById.get(id2);
-    if (!def) {
+    const definition2 = state.definitionById.get(id2);
+    if (!definition2) {
       return revert(state, node2);
     }
-    const properties = { src: normalizeUri(def.url || ""), alt: node2.alt };
-    if (def.title !== null && def.title !== void 0) {
-      properties.title = def.title;
+    const properties = { src: normalizeUri(definition2.url || ""), alt: node2.alt };
+    if (definition2.title !== null && definition2.title !== void 0) {
+      properties.title = definition2.title;
     }
     const result = { type: "element", tagName: "img", properties, children: [] };
     state.patch(node2, result);
@@ -24760,13 +24727,13 @@
   }
   function linkReference$1(state, node2) {
     const id2 = String(node2.identifier).toUpperCase();
-    const def = state.definitionById.get(id2);
-    if (!def) {
+    const definition2 = state.definitionById.get(id2);
+    if (!definition2) {
       return revert(state, node2);
     }
-    const properties = { href: normalizeUri(def.url || "") };
-    if (def.title !== null && def.title !== void 0) {
-      properties.title = def.title;
+    const properties = { href: normalizeUri(definition2.url || "") };
+    if (definition2.title !== null && definition2.title !== void 0) {
+      properties.title = definition2.title;
     }
     const result = {
       type: "element",
@@ -25281,12 +25248,14 @@
     const listItems = [];
     let referenceIndex = -1;
     while (++referenceIndex < state.footnoteOrder.length) {
-      const def = state.footnoteById.get(state.footnoteOrder[referenceIndex]);
-      if (!def) {
+      const definition2 = state.footnoteById.get(
+        state.footnoteOrder[referenceIndex]
+      );
+      if (!definition2) {
         continue;
       }
-      const content2 = state.all(def);
-      const id2 = String(def.identifier).toUpperCase();
+      const content2 = state.all(definition2);
+      const id2 = String(definition2.identifier).toUpperCase();
       const safeId = normalizeUri(id2.toLowerCase());
       let rereferenceIndex = 0;
       const backReferences = [];
@@ -25329,7 +25298,7 @@
         properties: { id: clobberPrefix + "fn-" + safeId },
         children: state.wrap(content2, true)
       };
-      state.patch(def, listItem2);
+      state.patch(definition2, listItem2);
       listItems.push(listItem2);
     }
     if (listItems.length === 0) {
@@ -291946,6 +291915,55 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     };
     return treemap;
   }
+  function initRange(domain2, range2) {
+    switch (arguments.length) {
+      case 0:
+        break;
+      case 1:
+        this.range(domain2);
+        break;
+      default:
+        this.range(range2).domain(domain2);
+        break;
+    }
+    return this;
+  }
+  const implicit = Symbol("implicit");
+  function ordinal() {
+    var index2 = /* @__PURE__ */ new Map(), domain2 = [], range2 = [], unknown2 = implicit;
+    function scale(d2) {
+      var key = d2 + "", i2 = index2.get(key);
+      if (!i2) {
+        if (unknown2 !== implicit)
+          return unknown2;
+        index2.set(key, i2 = domain2.push(d2));
+      }
+      return range2[(i2 - 1) % range2.length];
+    }
+    scale.domain = function(_2) {
+      if (!arguments.length)
+        return domain2.slice();
+      domain2 = [], index2 = /* @__PURE__ */ new Map();
+      for (const value of _2) {
+        const key = value + "";
+        if (index2.has(key))
+          continue;
+        index2.set(key, domain2.push(value));
+      }
+      return scale;
+    };
+    scale.range = function(_2) {
+      return arguments.length ? (range2 = Array.from(_2), scale) : range2.slice();
+    };
+    scale.unknown = function(_2) {
+      return arguments.length ? (unknown2 = _2, scale) : unknown2;
+    };
+    scale.copy = function() {
+      return ordinal(domain2, range2).unknown(unknown2);
+    };
+    initRange.apply(scale, arguments);
+    return scale;
+  }
   function Transform$1(k2, x2, y2) {
     this.k = k2;
     this.x = x2;
@@ -297073,6 +297091,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }
   }
   const scrollIntoView = /* @__PURE__ */ StateEffect.define({ map: (t2, ch) => t2.map(ch) });
+  const setEditContextFormatting = /* @__PURE__ */ StateEffect.define();
   function logException(state, exception, context2) {
     let handler = state.facet(exceptionSink);
     if (handler.length)
@@ -297312,10 +297331,11 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       super();
       this.view = view;
       this.decorations = [];
-      this.dynamicDecorationMap = [];
+      this.dynamicDecorationMap = [false];
       this.domChanged = null;
       this.hasComposition = null;
       this.markedForComposition = /* @__PURE__ */ new Set();
+      this.editContextFormatting = Decoration.none;
       this.lastCompositionAfterCursor = false;
       this.minWidth = 0;
       this.minWidthFrom = 0;
@@ -297341,8 +297361,9 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
           this.minWidthTo = update2.changes.mapPos(this.minWidthTo, 1);
         }
       }
+      this.updateEditContextFormatting(update2);
       let readCompositionAt = -1;
-      if (this.view.inputState.composing >= 0) {
+      if (this.view.inputState.composing >= 0 && !this.view.observer.editContext) {
         if ((_a3 = this.domChanged) === null || _a3 === void 0 ? void 0 : _a3.newSel)
           readCompositionAt = this.domChanged.newSel.head;
         else if (!touchesComposition(update2.changes, this.hasComposition) && !update2.selectionSet)
@@ -297428,6 +297449,14 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       if (composition)
         this.fixCompositionDOM(composition);
     }
+    updateEditContextFormatting(update2) {
+      this.editContextFormatting = this.editContextFormatting.map(update2.changes);
+      for (let tr2 of update2.transactions)
+        for (let effect2 of tr2.effects)
+          if (effect2.is(setEditContextFormatting)) {
+            this.editContextFormatting = effect2.value;
+          }
+    }
     compositionView(composition) {
       let cur = new TextView(composition.text.nodeValue);
       cur.flags |= 8;
@@ -297722,7 +297751,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       return Decoration.set(deco);
     }
     updateDeco() {
-      let i2 = 0;
+      let i2 = 1;
       let allDeco = this.view.state.facet(decorations).map((d2) => {
         let dynamic = this.dynamicDecorationMap[i2++] = typeof d2 == "function";
         return dynamic ? d2(this.view) : d2;
@@ -297738,6 +297767,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         allDeco.push(RangeSet.join(outerDeco));
       }
       this.decorations = [
+        this.editContextFormatting,
         ...allDeco,
         this.computeBlockGapDeco(),
         this.view.viewState.lineGapDeco
@@ -298358,6 +298388,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       this.mouseSelection = mouseSelection;
     }
     update(update2) {
+      this.view.observer.update(update2);
       if (this.mouseSelection)
         this.mouseSelection.update(update2);
       if (this.draggedContent && update2.docChanged)
@@ -298924,6 +298955,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     updateForFocusChange(view);
   };
   observers.compositionstart = observers.compositionupdate = (view) => {
+    if (view.observer.editContext)
+      return;
     if (view.inputState.compositionFirstChange == null)
       view.inputState.compositionFirstChange = true;
     if (view.inputState.composing < 0) {
@@ -298931,6 +298964,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }
   };
   observers.compositionend = (view) => {
+    if (view.observer.editContext)
+      return;
     view.inputState.composing = -1;
     view.inputState.compositionEndedAt = Date.now();
     view.inputState.compositionPendingKey = true;
@@ -299986,12 +300021,12 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         }
         gaps.push(gap);
       };
-      for (let line of this.viewportLines) {
-        if (line.length < doubleMargin)
-          continue;
+      let checkLine = (line) => {
+        if (line.length < doubleMargin || line.type != BlockType.Text)
+          return;
         let structure = lineStructure(line.from, line.to, this.stateDeco);
         if (structure.total < doubleMargin)
-          continue;
+          return;
         let target = this.scrollTarget ? this.scrollTarget.range.head : null;
         let viewFrom, viewTo;
         if (wrapping) {
@@ -300028,6 +300063,12 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
           addGap(line.from, viewFrom, line, structure);
         if (viewTo < line.to)
           addGap(viewTo, line.to, line, structure);
+      };
+      for (let line of this.viewportLines) {
+        if (Array.isArray(line.type))
+          line.type.forEach(checkLine);
+        else
+          checkLine(line);
       }
       return gaps;
     }
@@ -300634,18 +300675,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       change = { from: sel.from, to: sel.to, insert: Text$1.of([" "]) };
     }
     if (change) {
-      if (browser.ios && view.inputState.flushIOSKey(change))
-        return true;
-      if (browser.android && (change.to == sel.to && (change.from == sel.from || change.from == sel.from - 1 && view.state.sliceDoc(change.from, sel.from) == " ") && change.insert.length == 1 && change.insert.lines == 2 && dispatchKey(view.contentDOM, "Enter", 13) || (change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 || lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) && dispatchKey(view.contentDOM, "Backspace", 8) || change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 && dispatchKey(view.contentDOM, "Delete", 46)))
-        return true;
-      let text2 = change.insert.toString();
-      if (view.inputState.composing >= 0)
-        view.inputState.composing++;
-      let defaultTr;
-      let defaultInsert = () => defaultTr || (defaultTr = applyDefaultInsert(view, change, newSel));
-      if (!view.state.facet(inputHandler$1).some((h2) => h2(view, change.from, change.to, text2, defaultInsert)))
-        view.dispatch(defaultInsert());
-      return true;
+      return applyDOMChangeInner(view, change, newSel, lastKey);
     } else if (newSel && !newSel.main.eq(sel)) {
       let scrollIntoView2 = false, userEvent = "select";
       if (view.inputState.lastSelectionTime > Date.now() - 50) {
@@ -300659,6 +300689,21 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       return false;
     }
   }
+  function applyDOMChangeInner(view, change, newSel, lastKey = -1) {
+    if (browser.ios && view.inputState.flushIOSKey(change))
+      return true;
+    let sel = view.state.selection.main;
+    if (browser.android && (change.to == sel.to && (change.from == sel.from || change.from == sel.from - 1 && view.state.sliceDoc(change.from, sel.from) == " ") && change.insert.length == 1 && change.insert.lines == 2 && dispatchKey(view.contentDOM, "Enter", 13) || (change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 || lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) && dispatchKey(view.contentDOM, "Backspace", 8) || change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 && dispatchKey(view.contentDOM, "Delete", 46)))
+      return true;
+    let text2 = change.insert.toString();
+    if (view.inputState.composing >= 0)
+      view.inputState.composing++;
+    let defaultTr;
+    let defaultInsert = () => defaultTr || (defaultTr = applyDefaultInsert(view, change, newSel));
+    if (!view.state.facet(inputHandler$1).some((h2) => h2(view, change.from, change.to, text2, defaultInsert)))
+      view.dispatch(defaultInsert());
+    return true;
+  }
   function applyDefaultInsert(view, change, newSel) {
     let tr2, startState = view.state, sel = startState.selection.main;
     if (change.from >= sel.from && change.to <= sel.to && change.to - change.from >= (sel.to - sel.from) / 3 && (!newSel || newSel.main.empty && newSel.main.from == change.from + change.insert.length) && view.inputState.composing < 0) {
@@ -300767,6 +300812,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     constructor(view) {
       this.view = view;
       this.active = false;
+      this.editContext = null;
       this.selectionRange = new DOMSelectionState();
       this.selectionChanged = false;
       this.delayedFlush = -1;
@@ -300792,6 +300838,10 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         else
           this.flush();
       });
+      if (window.EditContext && view.constructor.EDIT_CONTEXT !== false) {
+        this.editContext = new EditContextManager(view);
+        view.contentDOM.editContext = this.editContext.editContext;
+      }
       if (useCharData)
         this.onCharData = (event2) => {
           this.queue.push({
@@ -300844,6 +300894,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     onScroll(e3) {
       if (this.intersecting)
         this.flush(false);
+      if (this.editContext)
+        this.view.requestMeasure(this.editContext.measureReq);
       this.onScrollChanged(e3);
     }
     onResize() {
@@ -301116,6 +301168,10 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
         win.removeEventListener("beforeprint", this.onPrint);
       win.document.removeEventListener("selectionchange", this.onSelectionChange);
     }
+    update(update2) {
+      if (this.editContext)
+        this.editContext.update(update2);
+    }
     destroy() {
       var _a3, _b, _c;
       this.stop();
@@ -301166,6 +301222,147 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     view.contentDOM.removeEventListener("beforeinput", read2, true);
     return found ? buildSelectionRangeFromRange(view, found) : null;
   }
+  class EditContextManager {
+    constructor(view) {
+      this.from = 0;
+      this.to = 0;
+      this.pendingContextChange = null;
+      this.resetRange(view.state);
+      let context2 = this.editContext = new window.EditContext({
+        text: view.state.doc.sliceString(this.from, this.to),
+        selectionStart: this.toContextPos(Math.max(this.from, Math.min(this.to, view.state.selection.main.anchor))),
+        selectionEnd: this.toContextPos(view.state.selection.main.head)
+      });
+      context2.addEventListener("textupdate", (e3) => {
+        let { anchor } = view.state.selection.main;
+        let change = {
+          from: this.toEditorPos(e3.updateRangeStart),
+          to: this.toEditorPos(e3.updateRangeEnd),
+          insert: Text$1.of(e3.text.split("\n"))
+        };
+        if (change.from == this.from && anchor < this.from)
+          change.from = anchor;
+        else if (change.to == this.to && anchor > this.to)
+          change.to = anchor;
+        if (change.from == change.to && !change.insert.length)
+          return;
+        this.pendingContextChange = change;
+        applyDOMChangeInner(view, change, EditorSelection.single(this.toEditorPos(e3.selectionStart), this.toEditorPos(e3.selectionEnd)));
+        if (this.pendingContextChange)
+          this.revertPending(view.state);
+      });
+      context2.addEventListener("characterboundsupdate", (e3) => {
+        let rects = [], prev = null;
+        for (let i2 = this.toEditorPos(e3.rangeStart), end2 = this.toEditorPos(e3.rangeEnd); i2 < end2; i2++) {
+          let rect = view.coordsForChar(i2);
+          prev = rect && new DOMRect(rect.left, rect.right, rect.right - rect.left, rect.bottom - rect.top) || prev || new DOMRect();
+          rects.push(prev);
+        }
+        context2.updateCharacterBounds(e3.rangeStart, rects);
+      });
+      context2.addEventListener("textformatupdate", (e3) => {
+        let deco = [];
+        for (let format2 of e3.getTextFormats()) {
+          let lineStyle = format2.underlineStyle, thickness = format2.underlineThickness;
+          if (lineStyle != "None" && thickness != "None") {
+            let style2 = `text-decoration: underline ${lineStyle == "Dashed" ? "dashed " : lineStyle == "Squiggle" ? "wavy " : ""}${thickness == "Thin" ? 1 : 2}px`;
+            deco.push(Decoration.mark({ attributes: { style: style2 } }).range(this.toEditorPos(format2.rangeStart), this.toEditorPos(format2.rangeEnd)));
+          }
+        }
+        view.dispatch({ effects: setEditContextFormatting.of(Decoration.set(deco)) });
+      });
+      context2.addEventListener("compositionstart", () => {
+        if (view.inputState.composing < 0) {
+          view.inputState.composing = 0;
+          view.inputState.compositionFirstChange = true;
+        }
+      });
+      context2.addEventListener("compositionend", () => {
+        view.inputState.composing = -1;
+        view.inputState.compositionFirstChange = null;
+      });
+      this.measureReq = { read: (view2) => {
+        this.editContext.updateControlBounds(view2.contentDOM.getBoundingClientRect());
+        let sel = getSelection(view2.root);
+        if (sel && sel.rangeCount)
+          this.editContext.updateSelectionBounds(sel.getRangeAt(0).getBoundingClientRect());
+      } };
+    }
+    applyEdits(update2) {
+      let off = 0, abort = false, pending = this.pendingContextChange;
+      update2.changes.iterChanges((fromA, toA, _fromB, _toB, insert2) => {
+        if (abort)
+          return;
+        let dLen = insert2.length - (toA - fromA);
+        if (pending && toA >= pending.to) {
+          if (pending.from == fromA && pending.to == toA && pending.insert.eq(insert2)) {
+            pending = this.pendingContextChange = null;
+            off += dLen;
+            return;
+          } else {
+            pending = null;
+            this.revertPending(update2.state);
+          }
+        }
+        fromA += off;
+        toA += off;
+        if (toA <= this.from) {
+          this.from += dLen;
+          this.to += dLen;
+        } else if (fromA < this.to) {
+          if (fromA < this.from || toA > this.to || this.to - this.from + insert2.length > 3e4) {
+            abort = true;
+            return;
+          }
+          this.editContext.updateText(this.toContextPos(fromA), this.toContextPos(toA), insert2.toString());
+          this.to += dLen;
+        }
+        off += dLen;
+      });
+      if (pending && !abort)
+        this.revertPending(update2.state);
+      return !abort;
+    }
+    update(update2) {
+      if (!this.applyEdits(update2) || !this.rangeIsValid(update2.state)) {
+        this.pendingContextChange = null;
+        this.resetRange(update2.state);
+        this.editContext.updateText(0, this.editContext.text.length, update2.state.doc.sliceString(this.from, this.to));
+        this.setSelection(update2.state);
+      } else if (update2.docChanged || update2.selectionSet) {
+        this.setSelection(update2.state);
+      }
+      if (update2.geometryChanged || update2.docChanged || update2.selectionSet)
+        update2.view.requestMeasure(this.measureReq);
+    }
+    resetRange(state) {
+      let { head } = state.selection.main;
+      this.from = Math.max(0, head - 1e4);
+      this.to = Math.min(state.doc.length, head + 1e4);
+    }
+    revertPending(state) {
+      let pending = this.pendingContextChange;
+      this.pendingContextChange = null;
+      this.editContext.updateText(this.toContextPos(pending.from), this.toContextPos(pending.to + pending.insert.length), state.doc.sliceString(pending.from, pending.to));
+    }
+    setSelection(state) {
+      let { main: main2 } = state.selection;
+      let start2 = this.toContextPos(Math.max(this.from, Math.min(this.to, main2.anchor)));
+      let end2 = this.toContextPos(main2.head);
+      if (this.editContext.selectionStart != start2 || this.editContext.selectionEnd != end2)
+        this.editContext.updateSelection(start2, end2);
+    }
+    rangeIsValid(state) {
+      let { head } = state.selection.main;
+      return !(this.from > 0 && head - this.from < 500 || this.to < state.doc.length && this.to - head < 500 || this.to - this.from > 1e4 * 3);
+    }
+    toEditorPos(contextPos) {
+      return contextPos + this.from;
+    }
+    toContextPos(editorPos) {
+      return editorPos - this.from;
+    }
+  }
   class EditorView {
     get state() {
       return this.viewState.state;
@@ -301698,6 +301895,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       }
     }
     destroy() {
+      if (this.root.activeElement == this.contentDOM)
+        this.contentDOM.blur();
       for (let plugin of this.plugins)
         plugin.destroy(this);
       this.plugins = [];
@@ -311364,6 +311563,11 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   function SoftEdgeArrowButton() {
     return jsxRuntime.exports.jsxs("svg", { fill: "none", height: "15", viewBox: "0 0 16 15", width: "16", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.exports.jsx("path", { d: "M9.1333 0.867188C10.9545 0.867188 12.701 1.59064 13.9888 2.87839C15.2765 4.16614 16 5.9127 16 7.73385C16 9.55501 15.2765 11.3016 13.9888 12.5893C12.701 13.8771 10.9545 14.6005 9.1333 14.6005L9.1333 12.2659C10.3353 12.2659 11.488 11.7884 12.3379 10.9385C13.1878 10.0885 13.6653 8.93581 13.6653 7.73385C13.6653 6.53189 13.1878 5.37916 12.3379 4.52925C11.488 3.67933 10.3353 3.20185 9.1333 3.20185V0.867188Z", fill: "currentColor" }), jsxRuntime.exports.jsx("path", { d: "M1.14286 6.59375H14.1667V8.87946H1.14286C0.510714 8.87946 0 8.36875 0 7.73661C0 7.10446 0.510714 6.59375 1.14286 6.59375Z", fill: "currentColor" }), jsxRuntime.exports.jsx("circle", { cx: "9.13389", cy: "2.03452", fill: "currentColor", r: "1.16733" }), jsxRuntime.exports.jsx("circle", { cx: "9.13389", cy: "13.4344", fill: "currentColor", r: "1.16733" })] });
   }
+  function CollapseExpandGroupButton(props) {
+    const { disablePointerEvents } = React.useContext(pointerCtx);
+    const buttonText = props.showExpandAll ? "Collapse All" : "Expand All";
+    return jsxRuntime.exports.jsx(Tooltip$1, { content: buttonText, placement: "bottom", children: jsxRuntime.exports.jsx(FloatingButton, { "aria-label": buttonText, disableEvents: disablePointerEvents, fixedSize: true, onClick: props.showExpandAll ? props.onCollapseAll : props.onExpandAll, style: { padding: "0 0.75rem" }, children: props.showExpandAll ? jsxRuntime.exports.jsx(DownLeftAndUpRightToCenter, {}) : jsxRuntime.exports.jsx(UpRightAndDownLeftFromCenter, {}) }) });
+  }
   function SaveImageButton(props) {
     const [hovered, setHovered] = React.useState(false);
     const { disablePointerEvents } = React.useContext(pointerCtx);
@@ -311818,6 +312022,8 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     return deque;
   };
   var hasCycle = hasCycle$1;
+  const DEFAULT_NODE_SIZE$1 = 64;
+  const TARGET_NODE_MULTIPLIER = 1.25;
   function willCreateCycle(graphOriginal, edge) {
     const graph = graphOriginal.copy();
     try {
@@ -311854,14 +312060,14 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   function getTooltipContent(id2, data2, theme2, label, tooltipSize) {
     return jsxRuntime.exports.jsxs("div", { children: [jsxRuntime.exports.jsx("div", { style: { display: "flex", flexDirection: "row", justifyContent: "center" }, children: jsxRuntime.exports.jsx("h2", { style: { fontSize: tooltipSize ? `${tooltipSize}px` : theme2.font.size }, children: label !== null && label !== void 0 ? label : id2 }) }), data2 && typeof data2 === "object" && jsxRuntime.exports.jsx("ul", { style: { margin: 0, padding: 0, paddingLeft: "1rem", paddingTop: "1rem" }, children: Object.keys(data2).map((key) => jsxRuntime.exports.jsx("li", { children: jsxRuntime.exports.jsxs("p", { style: { fontSize: tooltipSize ? `${tooltipSize}px` : theme2.font.size }, children: [jsxRuntime.exports.jsxs("strong", { children: [key, ": "] }), data2[key]] }) }, `${id2}-${String(data2[key])}`)) }), data2 && typeof data2 === "string" && jsxRuntime.exports.jsx("span", { style: { margin: 0, padding: 0, paddingTop: "1rem" }, children: data2 })] });
   }
-  function getNodeGroup(graph, id2, isLatent) {
-    let group = "other";
+  function getNodeCategory(graph, id2, isLatent) {
+    let category = "other";
     if (isLatent) {
-      group = "latent";
-    } else if (graph.inDegree(id2) > 0 && graph.outDegree(id2) === 0) {
-      group = "target";
+      category = "latent";
+    } else if (graph.hasNode(id2) && graph.inDegree(id2) > 0 && graph.outDegree(id2) === 0) {
+      category = "target";
     }
-    return group;
+    return category;
   }
   function isDag(graph) {
     if (hasCycle(graph)) {
@@ -311891,7 +312097,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     }
     return void 0;
   }
-  function getNodeGroups(nodes, group, graph) {
+  function getGroupToNodesMap(nodes, group, graph) {
     const attributePathArray = group.split(".");
     return nodes.reduce((groupAccumulator, node2) => {
       const nodeAttributes = graph.getNodeAttributes(node2);
@@ -311907,6 +312113,18 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
       return groupAccumulator;
     }, {});
   }
+  function getNodeToGroupMap(nodes, group, graph) {
+    const attributePathArray = group.split(".");
+    return nodes.reduce((nodeToGroupMap, node2) => {
+      const nodeAttributes = graph.getNodeAttributes(node2);
+      const nodeGroup = attributePathArray.reduce(getPathInNodeAttribute, nodeAttributes);
+      if (nodeGroup !== void 0) {
+        const groupKey = String(nodeGroup);
+        nodeToGroupMap[node2] = groupKey;
+      }
+      return nodeToGroupMap;
+    }, {});
+  }
   function getNodeOrder(nodes, orderPath, graph) {
     const attributePathArray = orderPath.split(".");
     return nodes.reduce((groupAccumulator, node2) => {
@@ -311924,7 +312142,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
     if (!Array.isArray(tiers)) {
       const { group, rank } = tiers;
       const nodes = graph.nodes();
-      const tieredNodes = getNodeGroups(nodes, group, graph);
+      const tieredNodes = getGroupToNodesMap(nodes, group, graph);
       if (rank) {
         const missingGroups = [];
         tiersArray = rank.map((key) => {
@@ -312453,7 +312671,7 @@ You must set sticky: 'left' | 'right' for the '${bugWithUnderColumnsSticky.Heade
   function LegendList({ listItems }) {
     return jsxRuntime.exports.jsx(Ul, { children: listItems.map((_a3) => {
       var { label } = _a3, props = __rest$5(_a3, ["label"]);
-      return jsxRuntime.exports.jsxs(Li, { children: [jsxRuntime.exports.jsx(LegendSymbol, Object.assign({}, props)), jsxRuntime.exports.jsx(LegendText, { children: label })] }, label);
+      return jsxRuntime.exports.jsxs(Li, { children: [jsxRuntime.exports.jsx(LegendSymbol, Object.assign({}, props)), jsxRuntime.exports.jsx(LegendText, { children: label })] }, `${label}-${props.type}`);
     }) });
   }
   const LegendWrapper = styled__default.default.div`
@@ -340194,7 +340412,7 @@ ${e3}`);
   }
   class GraphLayoutBuilder {
     constructor() {
-      this._nodeSize = 64;
+      this._nodeSize = DEFAULT_NODE_SIZE$1;
       this._nodeFontSize = 16;
     }
     nodeSize(size2) {
@@ -347421,22 +347639,22 @@ ${e3}`);
     }
     const nodes = graph.mapNodes((id2, attributes2) => {
       const parentIds = graph.inboundNeighbors(id2);
-      let nodeGroup = "latent";
+      let nodeType = "latent";
       let nodeOrder;
       let nodeRank;
       if (tiers) {
         const nodeData = nodeTiersMap.get(id2);
-        nodeGroup = nodeData === null || nodeData === void 0 ? void 0 : nodeData.group;
+        nodeType = nodeData === null || nodeData === void 0 ? void 0 : nodeData.group;
         nodeOrder = nodeData === null || nodeData === void 0 ? void 0 : nodeData.order;
         nodeRank = nodeData === null || nodeData === void 0 ? void 0 : nodeData.rank;
       }
-      return Object.assign(Object.assign({}, attributes2), { group: nodeGroup, ord: nodeOrder, parentIds, rank: nodeRank });
+      return Object.assign(Object.assign({}, attributes2), { group: nodeType, ord: nodeOrder, parentIds, rank: nodeRank });
     });
     const stratify = ai();
     return stratify(nodes);
   }
   function getD3Data(graph) {
-    const nodes = graph.reduceNodes((acc, id2, attrs2) => Object.assign(Object.assign({}, acc), { [id2]: Object.assign(Object.assign({}, attrs2), { group: getNodeGroup(graph, id2, attrs2["meta.rendering_properties.latent"]) }) }), {});
+    const nodes = graph.reduceNodes((acc, id2, attrs2) => Object.assign(Object.assign({}, acc), { [id2]: Object.assign(Object.assign({}, attrs2), { category: getNodeCategory(graph, id2, attrs2["meta.rendering_properties.latent"]) }) }), {});
     const edges = graph.mapEdges((edgeKey, attrs2, source, target) => {
       return Object.assign(Object.assign({}, attrs2), { source: nodes[source], target: nodes[target] });
     });
@@ -347581,6 +347799,7 @@ ${e3}`);
       this._linkForce = 5;
       this._warmupTicks = 100;
       this._tierSeparation = 300;
+      this._groupRepelStrength = 2e3;
       this.orientation = "horizontal";
     }
     collisionForce(force) {
@@ -347603,6 +347822,10 @@ ${e3}`);
       this._tierSeparation = separation;
       return this;
     }
+    groupRepelStrength(force) {
+      this._groupRepelStrength = force;
+      return this;
+    }
     build() {
       return new SpringLayout(this);
     }
@@ -347615,12 +347838,12 @@ ${e3}`);
           function force(alpha) {
             sortedNodesOrderArray.forEach((nodeName, index2) => {
               const targetPosition = index2 * nodeSeparation;
-              const targettedNode = nodesMap.get(nodeName);
-              if (targettedNode) {
+              const targetedNode = nodesMap.get(nodeName);
+              if (targetedNode) {
                 if (orientation === "horizontal") {
-                  targettedNode.vy += (targetPosition - targettedNode.y) * alpha;
+                  targetedNode.vy += (targetPosition - targetedNode.y) * alpha;
                 } else {
-                  targettedNode.vx += (targetPosition - targettedNode.x) * alpha;
+                  targetedNode.vx += (targetPosition - targetedNode.x) * alpha;
                 }
               }
             });
@@ -347645,12 +347868,12 @@ ${e3}`);
         tiersArray.forEach((tier, index2) => {
           const targetPosition = index2 * tiersSeparation;
           tier.forEach((nodeName) => {
-            const targettedNode = nodesMapping.get(nodeName);
-            if (targettedNode) {
+            const targetedNode = nodesMapping.get(nodeName);
+            if (targetedNode) {
               if (orientation === "horizontal") {
-                targettedNode.x = targetPosition + (targettedNode.x - targetPosition) * alpha;
+                targetedNode.x = targetPosition + (targetedNode.x - targetPosition) * alpha;
               } else {
-                targettedNode.y = targetPosition + (targettedNode.y - targetPosition) * alpha;
+                targetedNode.y = targetPosition + (targetedNode.y - targetPosition) * alpha;
               }
             }
           });
@@ -347660,6 +347883,33 @@ ${e3}`);
     }
     simulation2.force("layer", forceLayer());
   }
+  function createGroupEdges(nodeList) {
+    const edges = [];
+    if (nodeList.length > 1) {
+      for (let i2 = 0; i2 < nodeList.length; i2++) {
+        for (let j2 = i2 + 1; j2 < nodeList.length; j2++) {
+          edges.push({
+            source: nodeList[i2],
+            target: nodeList[j2],
+            originalMeta: {},
+            edge_type: EdgeType.UNDIRECTED_EDGE
+          });
+        }
+      }
+    }
+    return edges;
+  }
+  function createEdgesWithinAllGroups(group, graph, nodes) {
+    const groupsToNodes = getGroupToNodesMap(graph.nodes(), group, graph);
+    const edges = [];
+    Object.keys(groupsToNodes).forEach((groupName) => {
+      const nodeStringsList = groupsToNodes[groupName];
+      const nodeList = nodeStringsList.map((nodeString) => nodes.find((node2) => node2.id === nodeString));
+      const groupEdges = createGroupEdges(nodeList);
+      edges.push(...groupEdges);
+    });
+    return edges;
+  }
   class SpringLayout extends GraphLayout {
     constructor(builder) {
       super(builder);
@@ -347668,12 +347918,56 @@ ${e3}`);
       this.gravity = builder._gravity;
       this.warmupTicks = builder._warmupTicks;
       this.tierSeparation = builder._tierSeparation;
+      this.groupRepelStrength = builder._groupRepelStrength;
       this.orientation = builder.orientation;
       this.tiers = builder.tiers;
+      this.group = builder.group;
     }
     applyLayout(graph, forceUpdate) {
-      let [edges, nodes] = getD3Data(graph);
-      const simulation$1 = simulation(nodes).force("links", link(edges).id((d2) => d2.id).distance(() => this.nodeSize * this.linkForce)).force("charge", manyBody().strength(this.gravity)).force("collide", collide(this.nodeSize * this.collisionForce)).force("center", center()).stop();
+      const [edges, nodes] = getD3Data(graph);
+      const { group, groupRepelStrength } = this;
+      let simulation$1;
+      if (group) {
+        let clusterRepelForce = function(alpha) {
+          for (let i2 = 0; i2 < groupKeys.length; i2++) {
+            const groupA = groupKeys[i2];
+            const nodeA = firstNodes[groupA];
+            const groupASize = groupsToNodes[groupA].length;
+            for (let j2 = i2 + 1; j2 < groupKeys.length; j2++) {
+              const groupB = groupKeys[j2];
+              const nodeB = firstNodes[groupB];
+              const groupBSize = groupsToNodes[groupB].length;
+              const dx = nodeA.x - nodeB.x;
+              const dy = nodeA.y - nodeB.y;
+              const distance = Math.sqrt(dx * dx + dy * dy);
+              if (distance > 3e3) {
+                continue;
+              }
+              const cappedDistance = Math.max(distance, 1);
+              const strengthFactor = groupASize * groupBSize;
+              const strength = groupRepelStrength * strengthFactor * alpha / (cappedDistance * cappedDistance);
+              if (strength < 0.01) {
+                continue;
+              }
+              nodeA.vx += nodeA.x * strength;
+              nodeA.vy += nodeA.y * strength;
+              nodeB.vx -= nodeB.x * strength;
+              nodeB.vy -= nodeB.y * strength;
+            }
+          }
+        };
+        const groupsToNodes = getGroupToNodesMap(graph.nodes(), group, graph);
+        const groupKeys = Object.keys(groupsToNodes);
+        const firstNodes = {};
+        groupKeys.forEach((groupKey) => {
+          const nodeId = groupsToNodes[groupKey][0];
+          firstNodes[groupKey] = nodes.find((node2) => node2.id === nodeId);
+        });
+        const groupEdges = createEdgesWithinAllGroups(this.group, graph, nodes);
+        simulation$1 = simulation(nodes).force("clusterRepel", clusterRepelForce).force("groupLinks", link(groupEdges).id((d2) => d2.id).distance(() => this.nodeSize * this.linkForce)).force("collide", collide(this.nodeSize * this.collisionForce)).force("center", center()).stop();
+      } else {
+        simulation$1 = simulation(nodes).force("links", link(edges).id((d2) => d2.id).distance(() => this.nodeSize * this.linkForce)).force("charge", manyBody().strength(this.gravity)).force("collide", collide(this.nodeSize * this.collisionForce)).force("center", center()).stop();
+      }
       if (this.tiers) {
         applyTierForces(simulation$1, graph, nodes, this.tiers, this.tierSeparation, this.orientation);
       }
@@ -347683,7 +347977,6 @@ ${e3}`);
         forceUpdate(newNodes);
       }).restart();
       const onAddNode = debounce_1$1(() => {
-        [edges, nodes] = getD3Data(graph);
         simulation$1.nodes(nodes).force("links", link(edges).id((d2) => d2.id).distance(() => this.nodeSize * this.linkForce)).alpha(0.8).alphaTarget(0).restart();
       }, 100);
       return Promise.resolve({
@@ -347740,18 +348033,18 @@ ${e3}`);
     applyLayout(graph) {
       const [edges, nodes] = getD3Data(graph);
       const simulation$1 = simulation(nodes).alphaMin(1e-3).force("link", link(edges).id((d2) => d2.id).distance(() => this.nodeSize * 3).strength(this.targetLocation === "center" ? 0.7 : 0.1)).force("charge", manyBody().strength(this.targetLocation === "center" ? -1e3 : -2e3)).force("y", y$3().y((node2) => {
-        if (node2.group === "target") {
+        if (node2.category === "target") {
           return this.nodeSize * 10;
         }
-        if (node2.group === "latent") {
+        if (node2.category === "latent") {
           return this.nodeSize * 2;
         }
         return this.nodeSize * 6;
       }).strength(this.targetLocation === "center" ? 0 : 0.3)).force("collide", collide(this.nodeSize + 10)).force("radial", radial((node2) => {
-        if (node2.group === "target") {
+        if (node2.category === "target") {
           return 0;
         }
-        if (node2.group === "latent") {
+        if (node2.category === "latent") {
           return this.nodeSize * 8;
         }
         return this.nodeSize * 4;
@@ -347759,7 +348052,7 @@ ${e3}`);
         if (this.targetLocation === "center") {
           return 1;
         }
-        return node2.group === "other" ? 0.7 : 1;
+        return node2.category === "other" ? 0.7 : 1;
       })).stop();
       if (this.tiers) {
         applyTierForces(simulation$1, graph, nodes, this.tiers, this.tierSeparation, this.orientation);
@@ -383457,6 +383750,20 @@ ${e3}`);
       relativePlacementConstraint: getRelativeTieredArrayPlacement(tiersArray, orientation, tierSeparation, nodesOrder)
     };
   }
+  function assignParents(elements, relationships) {
+    const elementLookup = {};
+    elements.forEach((element2) => {
+      elementLookup[element2.data.id] = element2;
+    });
+    for (const [parent, children2] of Object.entries(relationships)) {
+      children2.forEach((childId) => {
+        const node2 = elementLookup[childId];
+        if (node2) {
+          node2.data.parent = parent;
+        }
+      });
+    }
+  }
   class FcoseLayout extends GraphLayout {
     constructor(builder) {
       super(builder);
@@ -383472,6 +383779,7 @@ ${e3}`);
       this.tierSeparation = builder._tierSeparation;
       this.orientation = builder.orientation;
       this.tiers = builder.tiers;
+      this.group = builder.group;
     }
     get requiresPosition() {
       return false;
@@ -383496,6 +383804,16 @@ ${e3}`);
             group: "edges"
           }))
         ];
+        if (this.group) {
+          const groupedNodes = getGroupToNodesMap(graph.nodes(), this.group, graph);
+          Object.keys(groupedNodes).forEach((groupLabel) => {
+            elements.push({
+              data: { id: groupLabel, height: size2, width: size2 },
+              group: "nodes"
+            });
+          });
+          assignParents(elements, groupedNodes);
+        }
         cytoscape$1({
           elements,
           headless: true,
@@ -386268,6 +386586,9 @@ if (vType < 0.5) {
   function isGraphLayoutWithTiers(layout2) {
     return layout2.tiers !== void 0;
   }
+  function isGraphLayoutWithGroups(layout2) {
+    return layout2.group !== void 0;
+  }
   const DOT_DISTANCE = 20;
   const SCALE = 0.5;
   class Background extends EventEmitter$1 {
@@ -388956,12 +389277,75 @@ void main(void){
     }
     return gfx;
   }
+  function calculateSourceBoundPosition(centerX, centerY, rotation2, width) {
+    const halfSize = width / 2;
+    let x2;
+    let y2;
+    if (rotation2 >= 0 && rotation2 < Math.PI / 4) {
+      x2 = centerX + halfSize;
+      y2 = centerY + Math.tan(rotation2) * halfSize;
+    } else if (rotation2 >= Math.PI / 4 && rotation2 < Math.PI / 2) {
+      x2 = centerX + Math.tan(Math.PI / 2 - rotation2) * halfSize;
+      y2 = centerY + halfSize;
+    } else if (rotation2 >= Math.PI / 2 && rotation2 < 3 * Math.PI / 4) {
+      x2 = centerX - Math.tan(rotation2 - Math.PI / 2) * halfSize;
+      y2 = centerY + halfSize;
+    } else if (rotation2 >= Math.PI / 4 && rotation2 < 3 * Math.PI) {
+      x2 = centerX - halfSize;
+      y2 = centerY + Math.tan(Math.PI - rotation2) * halfSize;
+    } else if (rotation2 <= 0 && rotation2 > -Math.PI / 4) {
+      y2 = centerY + Math.tan(Math.PI + rotation2) * halfSize;
+      x2 = centerX + halfSize;
+    } else if (rotation2 <= -Math.PI / 4 && rotation2 > -Math.PI / 2) {
+      x2 = centerX - Math.tan(-rotation2 - Math.PI / 2) * halfSize;
+      y2 = centerY - halfSize;
+    } else if (rotation2 <= -Math.PI / 2 && rotation2 > -3 * Math.PI / 4) {
+      x2 = centerX + Math.tan(Math.PI / 2 + rotation2) * halfSize;
+      y2 = centerY - halfSize;
+    } else {
+      x2 = centerX - halfSize;
+      y2 = centerY + Math.tan(-rotation2) * halfSize;
+    }
+    return { x: x2, y: y2 };
+  }
+  function calculateTargetBoundPosition(centerX, centerY, rotation2, width) {
+    const halfSize = width / 2;
+    let x2;
+    let y2;
+    if (rotation2 >= 0 && rotation2 < Math.PI / 4) {
+      x2 = centerX - halfSize;
+      y2 = centerY - Math.tan(rotation2) * halfSize;
+    } else if (rotation2 >= Math.PI / 4 && rotation2 < Math.PI / 2) {
+      x2 = centerX - Math.tan(Math.PI / 2 - rotation2) * halfSize;
+      y2 = centerY - halfSize;
+    } else if (rotation2 >= Math.PI / 2 && rotation2 < 3 * Math.PI / 4) {
+      x2 = centerX + Math.tan(rotation2 - Math.PI / 2) * halfSize;
+      y2 = centerY - halfSize;
+    } else if (rotation2 >= Math.PI / 4 && rotation2 < 3 * Math.PI) {
+      x2 = centerX + halfSize;
+      y2 = centerY - Math.tan(Math.PI - rotation2) * halfSize;
+    } else if (rotation2 <= 0 && rotation2 > -Math.PI / 4) {
+      x2 = centerX - halfSize;
+      y2 = centerY - Math.tan(Math.PI + rotation2) * halfSize;
+    } else if (rotation2 <= -Math.PI / 4 && rotation2 > -Math.PI / 2) {
+      x2 = centerX + Math.tan(-rotation2 - Math.PI / 2) * halfSize;
+      y2 = centerY + halfSize;
+    } else if (rotation2 <= -Math.PI / 2 && rotation2 > -3 * Math.PI / 4) {
+      x2 = centerX - Math.tan(Math.PI / 2 + rotation2) * halfSize;
+      y2 = centerY + halfSize;
+    } else {
+      x2 = centerX + halfSize;
+      y2 = centerY - Math.tan(-rotation2) * halfSize;
+    }
+    return { x: x2, y: y2 };
+  }
   const EDGE_LINE_SPRITE = "EDGE_LINE_SPRITE";
   const EDGE_LINE_GFX = "EDGE_LINE_GFX";
   const EDGE_TOP_SYMBOL = "EDGE_TOP_SYMBOL";
   const EDGE_CENTER_SYMBOL = "EDGE_CENTER_SYMBOL";
   const EDGE_BOTTOM_SYMBOL = "EDGE_BOTTOM_SYMBOL";
   const EDGE_STRENGTH_SYMBOL = "EDGE_STRENGTH_SYMBOL";
+  const EDGE_NUMBER_SYMBOL = "EDGE_NUMBER_SYMBOL";
   const EDGE_OFFSET = 10;
   const LOCAL_MULTIPLIER = 1.5;
   class EdgeObject extends EventEmitter$1 {
@@ -389016,6 +389400,10 @@ void main(void){
       edgeStrengthSymbol.name = EDGE_STRENGTH_SYMBOL;
       edgeStrengthSymbol.anchor.set(0.5, 1);
       edgeSymbolsGfx.addChild(edgeStrengthSymbol);
+      const edgeSourceNumberSymbol = new Sprite();
+      edgeSourceNumberSymbol.name = EDGE_NUMBER_SYMBOL;
+      edgeSourceNumberSymbol.anchor.set(0.5);
+      edgeSymbolsGfx.addChild(edgeSourceNumberSymbol);
       return edgeSymbolsGfx;
     }
     static updateEdgeStyle(edgeGfx, edgeStyle, textureCache) {
@@ -389126,6 +389514,24 @@ void main(void){
       edgeStrengthSymbol.position.y = edgeTopSymbol.position.y - 5;
       [edgeStrengthSymbol.tint] = colorToPixi(edgeStyle.color);
       edgeStrengthSymbol.alpha = 1;
+      const edgeNumberSymbol = edgeSymbolsGfx.getChildByName(EDGE_NUMBER_SYMBOL);
+      const numberSymbolTexture = textureCache.get(createKey(EDGE_NUMBER_SYMBOL, edgeStyle.collapsedEdgesCount), () => {
+        if (edgeStyle.collapsedEdgesCount === void 0) {
+          return new Graphics();
+        }
+        const textStyle = new TextStyle({
+          fontFamily: "Manrope",
+          fontSize: 18,
+          fill: colorToPixi(edgeStyle.color)
+        });
+        const text2 = new Text(edgeStyle.collapsedEdgesCount, textStyle);
+        return text2;
+      });
+      edgeNumberSymbol.texture = numberSymbolTexture;
+      edgeNumberSymbol.position.y = edgeTopSymbol.position.y - 30;
+      edgeNumberSymbol.rotation = edgeGfx.rotation <= Math.PI / 2 && edgeGfx.rotation > 0 || edgeGfx.rotation >= -3 * Math.PI / 2 && edgeGfx.rotation < -Math.PI ? -Math.PI / 2 : Math.PI / 2;
+      [edgeStrengthSymbol.tint] = colorToPixi(edgeStyle.color);
+      edgeNumberSymbol.alpha = 1;
       if (edgeStyle.isEdgeSelected && !edgeStyle.state.selected && !edgeStyle.state.hover) {
         edgeCenterSymbol.alpha = 0.3;
         edgeBottomSymbol.alpha = 0.3;
@@ -389160,28 +389566,38 @@ void main(void){
       edgeBottomSymbol.visible = !hasPoints && edgeBottomSymbol.visible && zoomState.symbol;
       edgeStrengthSymbol.visible = !hasPoints && edgeStrengthSymbol.visible && zoomState.symbol;
     }
-    updatePosition(edgeStyle, sourceNodePosition, targetNodePosition, sourceSize, targetSize, viewport2, textureCache) {
+    updatePosition(edgeStyle, sourceNodePosition, targetNodePosition, sourceSize, targetSize, viewport2, textureCache, isSourceSquare, isTargetSquare) {
       var _a3;
-      const rotation2 = -Math.atan2(targetNodePosition.x - sourceNodePosition.x, targetNodePosition.y - sourceNodePosition.y);
-      const targetRadius = (targetSize - BORDER_PADDING) / 2;
-      const targetBoundPosition = {
-        x: targetNodePosition.x + Math.sin(rotation2) * targetRadius,
-        y: targetNodePosition.y - Math.cos(rotation2) * targetRadius
-      };
+      const rotation2 = Math.atan2(targetNodePosition.y - sourceNodePosition.y, targetNodePosition.x - sourceNodePosition.x);
       const sourceRadius = (sourceSize - BORDER_PADDING) / 2;
-      const sourceBoundPosition = {
-        x: sourceNodePosition.x - Math.sin(rotation2) * sourceRadius,
-        y: sourceNodePosition.y + Math.cos(rotation2) * sourceRadius
-      };
+      const targetRadius = (targetSize - BORDER_PADDING) / 2;
+      let targetBoundPosition;
+      let sourceBoundPosition;
+      if (isTargetSquare) {
+        targetBoundPosition = calculateTargetBoundPosition(targetNodePosition.x, targetNodePosition.y, rotation2, targetSize - BORDER_PADDING);
+      } else {
+        targetBoundPosition = {
+          x: targetNodePosition.x - Math.cos(rotation2) * targetRadius,
+          y: targetNodePosition.y - Math.sin(rotation2) * targetRadius
+        };
+      }
+      if (isSourceSquare) {
+        sourceBoundPosition = calculateSourceBoundPosition(sourceNodePosition.x, sourceNodePosition.y, rotation2, sourceSize - BORDER_PADDING);
+      } else {
+        sourceBoundPosition = {
+          x: sourceNodePosition.x + Math.cos(rotation2) * sourceRadius,
+          y: sourceNodePosition.y + Math.sin(rotation2) * sourceRadius
+        };
+      }
       const position2 = {
         x: (sourceBoundPosition.x + targetBoundPosition.x) / 2,
         y: (sourceBoundPosition.y + targetBoundPosition.y) / 2
       };
       const length = Math.hypot(targetBoundPosition.x - sourceBoundPosition.x, targetBoundPosition.y - sourceBoundPosition.y);
       this.edgeGfx.position.copyFrom(position2);
-      this.edgeGfx.rotation = rotation2;
+      this.edgeGfx.rotation = rotation2 - Math.PI / 2;
       this.edgeSymbolsGfx.position.copyFrom(position2);
-      this.edgeSymbolsGfx.rotation = rotation2;
+      this.edgeSymbolsGfx.rotation = rotation2 - Math.PI / 2;
       (_a3 = edgeStyle.color) !== null && _a3 !== void 0 ? _a3 : edgeStyle.color = edgeStyle.theme.colors.grey5;
       if (edgeStyle.points) {
         this.edgeGfx.scale.x = 1;
@@ -389309,6 +389725,89 @@ void main(void){
       thickness: 4
     }
   ];
+  const GROUP_RECTANGLE = "GROUP_RECTANGLE";
+  const GROUP_BORDER = "GROUP_BORDER";
+  class GroupContainerObject extends EventEmitter$1 {
+    constructor() {
+      super();
+      this.state = {
+        hover: false
+      };
+      this.groupContainerGfx = this.createGroupContainer();
+    }
+    createGroupContainer() {
+      const groupContainerGfx = new Container();
+      groupContainerGfx.interactive = true;
+      groupContainerGfx.cursor = "pointer";
+      groupContainerGfx.hitArea = new Rectangle(0, 0);
+      MOUSE_EVENTS.forEach((eventName) => {
+        groupContainerGfx.addEventListener(eventName, (event2) => this.emit(eventName, event2));
+      });
+      const containerRectangle = new Sprite();
+      containerRectangle.name = GROUP_RECTANGLE;
+      containerRectangle.anchor.set(0.5);
+      groupContainerGfx.addChild(containerRectangle);
+      const containerBorder = new Sprite();
+      containerBorder.name = GROUP_BORDER;
+      containerBorder.anchor.set(0.5);
+      groupContainerGfx.addChild(containerBorder);
+      return groupContainerGfx;
+    }
+    static updateContainerStyle(groupContainerGfx, nodes, textureCache, theme2) {
+      let minX = Infinity;
+      let maxX = -Infinity;
+      let minY = Infinity;
+      let maxY = -Infinity;
+      nodes.forEach((node2) => {
+        var _a3;
+        let radius2 = (_a3 = node2["meta.rendering_properties.size"]) !== null && _a3 !== void 0 ? _a3 : DEFAULT_NODE_SIZE$1 * TARGET_NODE_MULTIPLIER;
+        radius2 += 20;
+        minX = Math.min(minX, node2.x - radius2);
+        maxX = Math.max(maxX, node2.x + radius2);
+        minY = Math.min(minY, node2.y - radius2);
+        maxY = Math.max(maxY, node2.y + radius2);
+      });
+      const height = maxY - minY;
+      const width = maxX - minX;
+      groupContainerGfx.hitArea.x = -width / 2;
+      groupContainerGfx.hitArea.y = -height / 2;
+      groupContainerGfx.hitArea.width = width;
+      groupContainerGfx.hitArea.height = height;
+      const rectangleTexture = textureCache.get(createKey(GROUP_RECTANGLE, minX, maxX, minY, maxY), () => {
+        const graphics = new Graphics();
+        graphics.lineStyle(2, theme2.colors.primary.replace("#", "0x"), 0.5);
+        graphics.beginFill(theme2.colors.blue2.replace("#", "0x"), 1);
+        graphics.drawRoundedRect(minX, minY, width, height, 8);
+        graphics.endFill();
+        return graphics;
+      });
+      const rectangle = groupContainerGfx.getChildByName(GROUP_RECTANGLE);
+      rectangle.texture = rectangleTexture;
+      [rectangle.tint, rectangle.alpha] = colorToPixi(theme2.colors.blue2);
+    }
+    updatePosition(position2) {
+      this.groupContainerGfx.position.copyFrom(position2);
+    }
+    updateStyle(nodes, textureCache, theme2) {
+      let minX = Infinity;
+      let maxX = -Infinity;
+      let minY = Infinity;
+      let maxY = -Infinity;
+      nodes.forEach((node2) => {
+        var _a3;
+        let radius2 = (_a3 = node2["meta.rendering_properties.size"]) !== null && _a3 !== void 0 ? _a3 : DEFAULT_NODE_SIZE$1 * TARGET_NODE_MULTIPLIER;
+        radius2 += 20;
+        minX = Math.min(minX, node2.x - radius2);
+        maxX = Math.max(maxX, node2.x + radius2);
+        minY = Math.min(minY, node2.y - radius2);
+        maxY = Math.max(maxY, node2.y + radius2);
+      });
+      const centerX = minX + (maxX - minX) / 2;
+      const centerY = minY + (maxY - minY) / 2;
+      GroupContainerObject.updateContainerStyle(this.groupContainerGfx, nodes, textureCache, theme2);
+      this.groupContainerGfx.position.copyFrom({ x: centerX, y: centerY });
+    }
+  }
   const SHADOWS = {
     dark: {
       shadowHover: "rgba(255, 255, 255, 0.3)",
@@ -389383,8 +389882,8 @@ ${letters.join("\n")}`;
     }
     return finalText.join(" ");
   }
-  function getNodeColor(group, theme2) {
-    switch (group) {
+  function getNodeColor(category, theme2) {
+    switch (category) {
       case "target":
         return [theme2.colors.secondary, theme2.colors.blue1];
       case "latent":
@@ -389393,13 +389892,15 @@ ${letters.join("\n")}`;
         return [theme2.colors.blue4, theme2.colors.text];
     }
   }
-  function getNodeSize(size2, group) {
-    const sizeMultiplier = group === "target" ? 1.25 : 1;
+  function getNodeSize(size2, category) {
+    const sizeMultiplier = category === "target" ? TARGET_NODE_MULTIPLIER : 1;
     return size2 * sizeMultiplier;
   }
   const NODE_CIRCLE = "NODE_CIRCLE";
   const NODE_BORDER = "NODE_BORDER";
   const NODE_LABEL = "NODE_LABEL";
+  const NODE_SQUARE = "NODE_SQUARE";
+  const NODE_SQUARE_BORDER = "NODE_SQUARE_BORDER";
   class NodeObject extends EventEmitter$1 {
     constructor() {
       super();
@@ -389424,10 +389925,18 @@ ${letters.join("\n")}`;
       nodeCircle.name = NODE_CIRCLE;
       nodeCircle.anchor.set(0.5);
       nodeGfx.addChild(nodeCircle);
+      const nodeSquare = new Sprite();
+      nodeSquare.name = NODE_SQUARE;
+      nodeSquare.anchor.set(0.5);
+      nodeGfx.addChild(nodeSquare);
       const nodeBorder = new Sprite();
       nodeBorder.name = NODE_BORDER;
       nodeBorder.anchor.set(0.5);
       nodeGfx.addChild(nodeBorder);
+      const nodeSquareBorder = new Sprite();
+      nodeSquareBorder.name = NODE_SQUARE_BORDER;
+      nodeSquareBorder.anchor.set(0.5);
+      nodeGfx.addChild(nodeSquareBorder);
       return nodeGfx;
     }
     createNodeLabel() {
@@ -389451,22 +389960,32 @@ ${letters.join("\n")}`;
         nodeGfx.filters = [new F({ offset: { x: 0, y: 0 } })];
       }
       const dropShadow = nodeGfx.filters[0];
-      const circleTexture = textureCache.get(createKey(NODE_CIRCLE, nodeStyle.size), () => {
+      const nodeTextureKey = nodeStyle.isGroupNode ? NODE_SQUARE : NODE_CIRCLE;
+      const nodeBorderTextureKey = nodeStyle.isGroupNode ? NODE_SQUARE_BORDER : NODE_BORDER;
+      const nodeTexture = textureCache.get(createKey(nodeTextureKey, nodeStyle.size), () => {
         const graphics = new SmoothGraphics();
         graphics.beginFill(16777215, 1, true);
-        graphics.drawCircle(nodeStyle.size, nodeStyle.size, nodeStyle.size);
+        if (nodeStyle.isGroupNode) {
+          graphics.drawRoundedRect(nodeStyle.size, nodeStyle.size, 2 * nodeStyle.size, 2 * nodeStyle.size, 8);
+        } else {
+          graphics.drawCircle(nodeStyle.size, nodeStyle.size, nodeStyle.size);
+        }
         return graphics;
       });
-      const circle2 = nodeGfx.getChildByName(NODE_CIRCLE);
-      circle2.texture = circleTexture;
-      [circle2.tint, circle2.alpha] = colorToPixi(nodeStyle.color);
-      const borderTexture = textureCache.get(createKey(NODE_BORDER, outerRadius, borderWidth, nodeStyle.size), () => {
+      const nodeBody = nodeGfx.getChildByName(nodeTextureKey);
+      nodeBody.texture = nodeTexture;
+      [nodeBody.tint, nodeBody.alpha] = colorToPixi(nodeStyle.color);
+      const borderTexture = textureCache.get(createKey(nodeBorderTextureKey, outerRadius, borderWidth, nodeStyle.size), () => {
         const graphics = new SmoothGraphics();
         graphics.lineStyle({ color: 16777215, width: borderWidth });
-        graphics.drawCircle(outerRadius, outerRadius, nodeStyle.size);
+        if (nodeStyle.isGroupNode) {
+          graphics.drawRoundedRect(outerRadius, outerRadius, 2 * nodeStyle.size, 2 * nodeStyle.size, 8);
+        } else {
+          graphics.drawCircle(outerRadius, outerRadius, nodeStyle.size);
+        }
         return graphics;
       }, BORDER_PADDING);
-      const border = nodeGfx.getChildByName(NODE_BORDER);
+      const border = nodeGfx.getChildByName(nodeBorderTextureKey);
       border.texture = borderTexture;
       [border.tint, border.alpha] = colorToPixi(nodeStyle.highlight_color);
       const themeShadows = SHADOWS[nodeStyle.theme.themeType];
@@ -389483,13 +390002,13 @@ ${letters.join("\n")}`;
       dropShadow.blur = blur;
       dropShadow.padding = 10;
       if (nodeStyle.isEdgeSelected && !nodeStyle.state.selected && !nodeStyle.state.attachedEdgeSelected && !nodeStyle.state.hover && !nodeStyle.isSourceOfNewEdge) {
-        circle2.alpha = 0.3;
+        nodeBody.alpha = 0.3;
         border.alpha = 0.3;
       }
     }
     static updateNodeLabelStyle(nodeLabelGfx, nodeStyle, textureCache) {
-      const labelTexture = textureCache.get(createKey(NODE_LABEL, nodeStyle.label, nodeStyle.size, nodeStyle.group), () => {
-        const nodeRadius = getNodeSize(nodeStyle.size, nodeStyle.group);
+      const labelTexture = textureCache.get(createKey(NODE_LABEL, nodeStyle.label, nodeStyle.size, nodeStyle.category), () => {
+        const nodeRadius = getNodeSize(nodeStyle.size, nodeStyle.category);
         const nodeSize2 = nodeRadius * 2;
         const maxSize = nodeSize2 - 10;
         const textStyle = getTextStyle(nodeStyle.label_size);
@@ -389519,7 +390038,7 @@ ${letters.join("\n")}`;
     }
     updateStyle(nodeStyle, textureCache) {
       var _a3, _b, _c;
-      const [defaultColor, defaultFontColor] = getNodeColor(nodeStyle.group, nodeStyle.theme);
+      const [defaultColor, defaultFontColor] = getNodeColor(nodeStyle.category, nodeStyle.theme);
       (_a3 = nodeStyle.color) !== null && _a3 !== void 0 ? _a3 : nodeStyle.color = defaultColor;
       (_b = nodeStyle.highlight_color) !== null && _b !== void 0 ? _b : nodeStyle.highlight_color = nodeStyle.theme.colors.primary;
       (_c = nodeStyle.label_color) !== null && _c !== void 0 ? _c : nodeStyle.label_color = defaultFontColor;
@@ -389611,7 +390130,9 @@ ${letters.join("\n")}`;
     "nodeMouseover",
     "nodeMouseout",
     "edgeMouseout",
-    "edgeMouseover"
+    "edgeMouseover",
+    "groupMouseout",
+    "groupMouseover"
   ];
   class Engine extends EventEmitter$1 {
     constructor(graph, layout2, editable2, editorMode, theme2, constraints, zoomThresholds, errorHandler, processEdgeStyle, requireFocusToZoom) {
@@ -389630,6 +390151,8 @@ ${letters.join("\n")}`;
       this.onAddNode = null;
       this.onAddEdge = null;
       this.onCleanup = null;
+      this.groupContainerMap = /* @__PURE__ */ new Map();
+      this.collapsedEdgesMap = /* @__PURE__ */ new Map();
       this.onGraphAttributesUpdatedBound = this.onGraphAttributesUpdated.bind(this);
       this.onGraphNodeAddedBound = this.onGraphNodeAdded.bind(this);
       this.onGraphEdgeAddedBound = this.onGraphEdgeAdded.bind(this);
@@ -389707,10 +390230,28 @@ ${letters.join("\n")}`;
     resetViewport() {
       const nodesX = this.graph.mapNodes((nodeKey) => this.graph.getNodeAttribute(nodeKey, "x"));
       const nodesY = this.graph.mapNodes((nodeKey) => this.graph.getNodeAttribute(nodeKey, "y"));
-      const minX = Math.min(...nodesX);
-      const maxX = Math.max(...nodesX);
-      const minY = Math.min(...nodesY);
-      const maxY = Math.max(...nodesY);
+      let minX = Math.min(...nodesX);
+      let maxX = Math.max(...nodesX);
+      let minY = Math.min(...nodesY);
+      let maxY = Math.max(...nodesY);
+      if (isGraphLayoutWithGroups(this.layout)) {
+        const nodes = this.graph.mapNodes((nodeKey) => this.graph.getNodeAttributes(nodeKey));
+        const nodesInGroups = Object.values(getGroupToNodesMap(this.graph.nodes(), this.layout.group, this.graph)).flat();
+        const updateBoundary = (node2, delta) => {
+          if (nodesInGroups.includes(node2 === null || node2 === void 0 ? void 0 : node2.id)) {
+            return delta;
+          }
+          return 0;
+        };
+        const nodeWithMinX = nodes.find((node2) => node2.x === minX);
+        const nodeWithMaxX = nodes.find((node2) => node2.x === maxX);
+        const nodeWithMinY = nodes.find((node2) => node2.y === minY);
+        const nodeWithMaxY = nodes.find((node2) => node2.y === maxY);
+        minX += updateBoundary(nodeWithMinX, -20);
+        maxX += updateBoundary(nodeWithMaxX, 20);
+        minY += updateBoundary(nodeWithMinY, -20);
+        maxY += updateBoundary(nodeWithMaxY, 20);
+      }
       const graphWidth = Math.abs(maxX - minX);
       const graphHeight = Math.abs(maxY - minY);
       const graphCenter = new Point$1(minX + graphWidth / 2, minY + graphHeight / 2);
@@ -389726,6 +390267,111 @@ ${letters.join("\n")}`;
         console.error("Error resetting viewport", err);
       }
     }
+    collapseAllGroups() {
+      if (isGraphLayoutWithGroups(this.layout)) {
+        const layoutGroup = this.layout.group;
+        const groupsObject = getGroupToNodesMap(this.graph.nodes(), layoutGroup, this.graph);
+        const nodeToGroup = getNodeToGroupMap(this.graph.nodes(), layoutGroup, this.graph);
+        const groupsArray = Object.keys(groupsObject);
+        groupsArray.forEach((group) => {
+          const groupNodeAttributes = {
+            id: group,
+            originalMeta: {},
+            variable_type: "groupNode"
+          };
+          this.dropGroupContainer(group);
+          if (!this.graph.hasNode(group)) {
+            this.graph.addNode(group, groupNodeAttributes);
+          } else {
+            this.createNode(group, groupNodeAttributes);
+          }
+        });
+        groupsArray.forEach((group) => {
+          const collapsedEdges = [];
+          this.graph.forEachEdge((edgeKey) => {
+            var _a3, _b;
+            const initialSource = this.graph.source(edgeKey);
+            const initialTarget = this.graph.target(edgeKey);
+            if (nodeToGroup[initialSource] === group || nodeToGroup[initialTarget] === group || groupsArray.includes(initialSource) || groupsArray.includes(initialTarget)) {
+              const finalTarget = (_a3 = nodeToGroup[initialTarget]) !== null && _a3 !== void 0 ? _a3 : initialTarget;
+              const finalSource = (_b = nodeToGroup[initialSource]) !== null && _b !== void 0 ? _b : initialSource;
+              const edgeHasChanged = !(initialSource === finalSource && initialTarget === finalTarget);
+              const edgeIsNotWithinTheGroup = finalSource !== finalTarget;
+              const graphHasFinalEdge = this.graph.hasEdge(finalSource, finalTarget);
+              const finalSourceAttributes = this.graph.getNodeAttributes(finalSource);
+              const finalTargetAttributes = this.graph.getNodeAttributes(finalTarget);
+              const currentEdgeAttributes = this.graph.getEdgeAttributes(edgeKey);
+              let numberOfCollapsedEdges = graphHasFinalEdge ? this.graph.getEdgeAttributes(finalSource, finalTarget)["meta.rendering_properties.collapsedEdgesCount"] : 0;
+              if (graphHasFinalEdge && edgeHasChanged && group === finalSource) {
+                numberOfCollapsedEdges += 1;
+              }
+              const edgeAttributes = Object.assign(Object.assign({}, currentEdgeAttributes), { "meta.rendering_properties.collapsedEdgesCount": numberOfCollapsedEdges });
+              if (initialSource !== finalSource || initialTarget !== finalTarget) {
+                collapsedEdges.push(Object.assign({ id: edgeKey }, edgeAttributes));
+                this.dropEdge(edgeKey);
+              }
+              if (edgeIsNotWithinTheGroup) {
+                if (!graphHasFinalEdge && group === finalSource) {
+                  edgeAttributes["meta.rendering_properties.collapsedEdgesCount"] = 1;
+                  this.graph.addEdge(finalSource, finalTarget, edgeAttributes);
+                } else if (!this.edgeMap.has(edgeKey) && !edgeHasChanged) {
+                  this.createEdge(edgeKey, edgeAttributes, finalSource, finalTarget, finalSourceAttributes, finalTargetAttributes);
+                } else if (graphHasFinalEdge) {
+                  this.graph.setEdgeAttribute(finalSource, finalTarget, "meta.rendering_properties.collapsedEdgesCount", numberOfCollapsedEdges);
+                }
+              }
+            }
+          });
+          this.collapsedEdgesMap.set(group, collapsedEdges);
+        });
+        Object.values(groupsObject).forEach((nodes) => {
+          nodes.forEach((node2) => {
+            if (this.nodeMap.has(node2)) {
+              this.dropNode(node2);
+            }
+          });
+        });
+        this.requestRender();
+      }
+    }
+    expandAllGroups() {
+      if (this.graph.nodes().some((node2) => this.graph.getNodeAttribute(node2, "variable_type") === "groupNode")) {
+        this.graph.forEachEdge((edgeKey) => {
+          const source = this.graph.source(edgeKey);
+          const target = this.graph.target(edgeKey);
+          const isSourceGroupNode = this.graph.getNodeAttribute(source, "variable_type") === "groupNode";
+          const isTargetGroupNode = this.graph.getNodeAttribute(target, "variable_type") === "groupNode";
+          if (isSourceGroupNode || isTargetGroupNode) {
+            this.dropEdge(edgeKey);
+            this.graph.setEdgeAttribute(source, target, "meta.rendering_properties.collapsedEdgesCount", 0);
+          }
+        });
+        this.graph.forEachNode((node2, attributes2) => {
+          if (this.graph.getNodeAttribute(node2, "variable_type") !== "groupNode") {
+            if (!this.nodeMap.has(node2)) {
+              this.createNode(node2, attributes2);
+            }
+          } else {
+            this.dropNode(node2);
+          }
+        });
+        this.collapsedEdgesMap.forEach((edges) => {
+          edges.forEach((edge) => {
+            var _a3, _b;
+            if (!this.edgeMap.has(edge.id)) {
+              const source = (_a3 = edge.extras) === null || _a3 === void 0 ? void 0 : _a3.source.identifier;
+              const target = (_b = edge.extras) === null || _b === void 0 ? void 0 : _b.destination.identifier;
+              const sourceNodeAttributes = this.graph.getNodeAttributes(source);
+              const targetNodeAttributes = this.graph.getNodeAttributes(target);
+              this.createEdge(edge.id, edge, source, target, sourceNodeAttributes, targetNodeAttributes);
+            }
+          });
+        });
+        this.createGroupContainers();
+        this.debouncedUpdateLayout();
+        this.requestRender();
+      }
+    }
     searchNodes(ids) {
       const newNodes = ids.filter((newId2) => !this.searchResults.includes(newId2));
       const removedNodes = this.searchResults.filter((oldId) => !ids.includes(oldId));
@@ -389848,10 +390494,12 @@ ${letters.join("\n")}`;
         this.background.updatePosition(this.container);
         this.app.stage.addChild(this.background.sprite);
         this.app.stage.addChild(this.viewport);
+        this.groupContainerLayer = new Container();
         this.edgeLayer = new Container();
         this.edgeSymbolsLayer = new Container();
         this.nodeLayer = new Container();
         this.nodeLabelLayer = new Container();
+        this.viewport.addChild(this.groupContainerLayer);
         this.viewport.addChild(this.edgeLayer);
         this.viewport.addChild(this.edgeSymbolsLayer);
         this.viewport.addChild(this.nodeLayer);
@@ -389972,12 +390620,19 @@ ${letters.join("\n")}`;
       });
       edge.addListener("mouseup", (event2) => {
         if (this.mousedownEdgeKey === id2) {
+          if (isGraphLayoutWithGroups(this.layout)) {
+            const groupsObject = getGroupToNodesMap(this.graph.nodes(), this.layout.group, this.graph);
+            if (Object.keys(groupsObject).includes(source) || Object.keys(groupsObject).includes(target)) {
+              return;
+            }
+          }
           this.emit("edgeClick", event2, source, target);
         }
       });
       this.updateEdgeStyle(id2, attributes2, source, target, sourceAttributes, targetAttributes);
     }
     createGraph() {
+      this.createGroupContainers();
       this.graph.forEachNode(this.createNode.bind(this));
       this.graph.forEachEdge(this.createEdge.bind(this));
       this.updateStrengthRange();
@@ -390018,6 +390673,12 @@ ${letters.join("\n")}`;
           const xOffset = Math.abs(this.nodeMousedownPosition.x - event2.global.x);
           const yOffset = Math.abs(this.nodeMousedownPosition.y - event2.global.y);
           if (xOffset <= 2 && yOffset <= 2) {
+            if (isGraphLayoutWithGroups(this.layout)) {
+              const groupsObject = getGroupToNodesMap(this.graph.nodes(), this.layout.group, this.graph);
+              if (Object.keys(groupsObject).includes(id2)) {
+                return;
+              }
+            }
             this.emit("nodeClick", event2, id2);
           }
         }
@@ -390032,6 +390693,39 @@ ${letters.join("\n")}`;
       });
       this.updateNodeStyle(id2, attributes2);
     }
+    createGroupContainer(id2, nodes) {
+      const groupContainer = new GroupContainerObject();
+      this.groupContainerLayer.addChild(groupContainer.groupContainerGfx);
+      this.groupContainerMap.set(id2, groupContainer);
+      groupContainer.addListener("mouseover", (event2) => {
+        this.hoverGroupContainer(id2, nodes);
+        if (!this.mousedownNodeKey) {
+          this.emit("groupMouseover", event2, id2);
+        }
+      });
+      groupContainer.addListener("mouseout", (event2) => {
+        const local = groupContainer.groupContainerGfx.toLocal(event2.global);
+        const isInGroupContainer = groupContainer.groupContainerGfx.hitArea.contains(local.x, local.y);
+        if (!isInGroupContainer) {
+          this.unhoverGroupContainer(id2, nodes);
+          this.emit("groupMouseout", event2, id2);
+        }
+        if (!this.editable && !this.isMovingNode && !this.isCreatingEdge) {
+          this.mousedownNodeKey = null;
+        }
+      });
+      this.updateGroupContainerStyle(id2, nodes);
+    }
+    createGroupContainers() {
+      if (isGraphLayoutWithGroups(this.layout)) {
+        const { group } = this.layout;
+        const groups = getGroupToNodesMap(this.graph.nodes(), group, this.graph);
+        Object.keys(groups).forEach((gr) => {
+          const nodesIngroup = groups[gr].map((node2) => this.graph.getNodeAttributes(node2));
+          this.createGroupContainer(gr, nodesIngroup);
+        });
+      }
+    }
     dropEdge(id2) {
       const edge = this.edgeMap.get(id2);
       if (edge) {
@@ -390049,6 +390743,14 @@ ${letters.join("\n")}`;
         this.requestRender();
       }
     }
+    dropGroupContainer(id2) {
+      const container = this.groupContainerMap.get(id2);
+      if (container) {
+        this.groupContainerLayer.removeChild(container.groupContainerGfx);
+        this.groupContainerMap.delete(id2);
+        this.requestRender();
+      }
+    }
     enableDragBehaviour() {
       var _a3;
       if (this.dragMode === "move_node") {
@@ -390084,7 +390786,8 @@ ${letters.join("\n")}`;
         strength: this.getRelativeStrength(attributes2),
         theme: this.theme,
         thickness: attributes2["meta.rendering_properties.thickness"],
-        type: attributes2.edge_type
+        type: attributes2.edge_type,
+        collapsedEdges: attributes2["meta.rendering_properties.collapsedEdgesCount"]
       };
       if (this.processEdgeStyle) {
         return this.processEdgeStyle(edgeStyle, attributes2);
@@ -390093,10 +390796,10 @@ ${letters.join("\n")}`;
     }
     getNodeStyle(node2, attributes2) {
       var _a3, _b, _c, _d;
-      const group = getNodeGroup(this.graph, attributes2.id, attributes2["meta.rendering_properties.latent"]);
+      const group = getNodeCategory(this.graph, attributes2.id, attributes2["meta.rendering_properties.latent"]);
       return {
         color: attributes2["meta.rendering_properties.color"],
-        group,
+        category: group,
         highlight_color: attributes2["meta.rendering_properties.highlight_color"],
         isEdgeSelected: !!this.selectedEdge,
         isSourceOfNewEdge: this.isCreatingEdge && this.mousedownNodeKey === attributes2.id,
@@ -390105,7 +390808,8 @@ ${letters.join("\n")}`;
         label_size: (_b = attributes2["meta.rendering_properties.label_size"]) !== null && _b !== void 0 ? _b : this.layout.nodeFontSize,
         size: (_c = attributes2["meta.rendering_properties.size"]) !== null && _c !== void 0 ? _c : getNodeSize((_d = attributes2["meta.rendering_properties.size"]) !== null && _d !== void 0 ? _d : this.layout.nodeSize, group),
         state: node2.state,
-        theme: this.theme
+        theme: this.theme,
+        isGroupNode: attributes2.variable_type === "groupNode"
       };
     }
     hoverEdge(id2) {
@@ -390117,6 +390821,15 @@ ${letters.join("\n")}`;
       this.updateEdgeStyleByKey(id2);
       this.requestRender();
     }
+    hoverGroupContainer(id2, nodes) {
+      const groupContainer = this.groupContainerMap.get(id2);
+      if (groupContainer.state.hover) {
+        return;
+      }
+      groupContainer.state.hover = true;
+      this.updateGroupContainerStyle(id2, nodes);
+      this.requestRender();
+    }
     hoverNode(id2) {
       const node2 = this.nodeMap.get(id2);
       if (node2.state.hover) {
@@ -390260,15 +390973,26 @@ ${letters.join("\n")}`;
       this.updateNodeStyleByKey(id2);
       this.requestRender();
     }
+    unhoverGroupContainer(id2, nodes) {
+      const groupContainer = this.groupContainerMap.get(id2);
+      if (!groupContainer.state.hover) {
+        return;
+      }
+      groupContainer.state.hover = false;
+      this.updateGroupContainerStyle(id2, nodes);
+      this.requestRender();
+    }
     updateEdgeStyle(id2, attributes2, source, target, sourceNodeAttributes, targetNodeAttributes) {
       const edge = this.edgeMap.get(id2);
       if (edge && this.viewport) {
         const sourceNode = this.nodeMap.get(source);
         const targetNode = this.nodeMap.get(target);
+        const isSourceGroupNode = sourceNodeAttributes.variable_type === "groupNode";
+        const isTargetGroupNode = targetNodeAttributes.variable_type === "groupNode";
         const sourceNodePosition = { x: sourceNodeAttributes.x, y: sourceNodeAttributes.y };
         const targetNodePosition = { x: targetNodeAttributes.x, y: targetNodeAttributes.y };
         const edgeStyle = this.getEdgeStyle(edge, attributes2, this.getConstraint(source, target));
-        edge.updatePosition(edgeStyle, sourceNodePosition, targetNodePosition, sourceNode.nodeGfx.width, targetNode.nodeGfx.width, this.viewport, this.textureCache);
+        edge.updatePosition(edgeStyle, sourceNodePosition, targetNodePosition, sourceNode.nodeGfx.width, targetNode.nodeGfx.width, this.viewport, this.textureCache, isSourceGroupNode, isTargetGroupNode);
       }
     }
     updateEdgeStyleByKey(edgeKey) {
@@ -390346,6 +391070,12 @@ ${letters.join("\n")}`;
         node2.updateStyle(this.getNodeStyle(node2, attributes2), this.textureCache);
       }
     }
+    updateGroupContainerStyle(id2, nodes) {
+      const groupContainer = this.groupContainerMap.get(id2);
+      if (groupContainer) {
+        groupContainer.updateStyle(nodes, this.textureCache, this.theme);
+      }
+    }
     updateNodeStyleByKey(nodeKey) {
       const nodeAttributes = this.graph.getNodeAttributes(nodeKey);
       this.updateNodeStyle(nodeKey, nodeAttributes);
@@ -390363,6 +391093,14 @@ ${letters.join("\n")}`;
     updateStyles() {
       this.graph.forEachNode(this.updateNodeStyle.bind(this));
       this.graph.forEachEdge(this.updateEdgeStyle.bind(this));
+      if (isGraphLayoutWithGroups(this.layout)) {
+        const { group } = this.layout;
+        const groupsObject = getGroupToNodesMap(this.graph.nodes(), group, this.graph);
+        Object.keys(groupsObject).forEach((gr) => {
+          const nodesIngroup = groupsObject[gr].map((node2) => this.graph.getNodeAttributes(node2));
+          this.updateGroupContainerStyle(gr, nodesIngroup);
+        });
+      }
     }
   }
   function useRenderEngine({ parentRef, graph, layout: layout2, editable: editable2, editorMode, constraints, errorHandler, processEdgeStyle, zoomThresholds, requireFocusToZoom }) {
@@ -390438,6 +391176,16 @@ ${letters.join("\n")}`;
           engine.current.resetViewport();
         }
       },
+      collapseGroups: () => {
+        if (engine.current.initialized) {
+          engine.current.collapseAllGroups();
+        }
+      },
+      expandGroups: () => {
+        if (engine.current.initialized) {
+          engine.current.expandAllGroups();
+        }
+      },
       extractImage: () => {
         if (engine.current.initialized) {
           return engine.current.extractImage();
@@ -391644,7 +392392,8 @@ ${letters.join("\n")}`;
     const handleError = (e3) => {
       setError(e3);
     };
-    const { getCenterPosition, useEngineEvent, resetViewport, resetLayout, extractImage, onSetDragMode, onNodeSelected, onEdgeSelected, onSearchResults, onUpdateConstraints, onSetFocus } = useRenderEngine({
+    const layoutHasGroup = React.useMemo(() => layout2.group !== void 0, [layout2]);
+    const { getCenterPosition, useEngineEvent, resetViewport, collapseGroups, expandGroups, resetLayout, extractImage, onSetDragMode, onNodeSelected, onEdgeSelected, onSearchResults, onUpdateConstraints, onSetFocus } = useRenderEngine({
       constraints: props.initialConstraints,
       editable: props.editable,
       editorMode: state.editorMode,
@@ -391665,6 +392414,7 @@ ${letters.join("\n")}`;
       localStorage.setItem("showGraphZoomPrompt", "false");
     }
     const [hasFocus, setHasFocus] = React.useState(false);
+    const [showCollapseAll, setShowCollapseAll] = React.useState(true);
     function onPaneFocus(focus) {
       setHasFocus(focus);
       onSetFocus(focus);
@@ -391709,6 +392459,22 @@ ${letters.join("\n")}`;
       }
     }, [state.editorMode, selectedEdge, constraints]);
     function onRemoveNode() {
+      var _a4, _b2;
+      if (layoutHasGroup) {
+        const layoutGroup = layout2.group;
+        const groupsObject = getGroupToNodesMap(state.graph.nodes(), layoutGroup, state.graph);
+        const nodesToGroups = getNodeToGroupMap(state.graph.nodes(), layoutGroup, state.graph);
+        const group = nodesToGroups[selectedNode];
+        if (((_a4 = groupsObject[group]) === null || _a4 === void 0 ? void 0 : _a4.length) === 1) {
+          (_b2 = props.onNotify) === null || _b2 === void 0 ? void 0 : _b2.call(props, {
+            key: "delete-group",
+            message: "Cannot delete the last node in a group",
+            status: Status.WARNING,
+            title: "Group deletion"
+          });
+          return;
+        }
+      }
       api2.removeNode(selectedNode);
       setSelectedNode(null);
     }
@@ -391741,9 +392507,23 @@ ${letters.join("\n")}`;
       }
     }
     function onAddEdge(edge) {
-      var _a4;
+      var _a4, _b2;
+      if (layoutHasGroup) {
+        const layoutGroup = layout2.group;
+        const groupsObject = getGroupToNodesMap(state.graph.nodes(), layoutGroup, state.graph);
+        const groups = Object.keys(groupsObject);
+        if (groups.includes(edge[0]) && groups.includes(edge[1])) {
+          (_a4 = props.onNotify) === null || _a4 === void 0 ? void 0 : _a4.call(props, {
+            key: "create-edge-group",
+            message: "Adding edge between groups is not allowed",
+            status: Status.WARNING,
+            title: "Group edge detected"
+          });
+          return;
+        }
+      }
       if (willCreateCycle(state.graph, edge)) {
-        (_a4 = props.onNotify) === null || _a4 === void 0 ? void 0 : _a4.call(props, {
+        (_b2 = props.onNotify) === null || _b2 === void 0 ? void 0 : _b2.call(props, {
           key: "create-edge-cycle",
           message: "Could not create an edge as it would create a cycle",
           status: Status.WARNING,
@@ -391845,6 +392625,20 @@ ${letters.join("\n")}`;
       });
       setTooltipContent(edgeTooltipContent);
     });
+    useEngineEvent("groupMouseover", (event2, groupId) => {
+      tooltipRef.current = () => ({
+        bottom: event2.clientY,
+        height: 0,
+        left: event2.clientX,
+        right: event2.clientX,
+        top: event2.clientY,
+        width: 0
+      });
+      setTooltipContent(getTooltipContent(groupId, "", theme2));
+    });
+    useEngineEvent("groupMouseout", () => {
+      setTooltipContent(null);
+    });
     useEngineEvent("edgeMouseout", () => {
       setTooltipContent(null);
     });
@@ -391969,7 +392763,19 @@ ${letters.join("\n")}`;
       editorMode: state.editorMode,
       onNotify: props.onNotify,
       verboseDescriptions: props.verboseDescriptions
-    }, children: jsxRuntime.exports.jsx(pointerCtx.Provider, { value: { disablePointerEvents: isDragging, onPanelEnter, onPanelExit }, children: jsxRuntime.exports.jsx(GraphPane, { "$hasFocus": hasFocus, onClick: () => onPaneFocus(true), ref: paneRef, style: props.style, children: jsxRuntime.exports.jsxs(Graph, { onMouseEnter, onMouseLeave, children: [jsxRuntime.exports.jsx(EditorOverlay, { bottomLeft: jsxRuntime.exports.jsx(Legend, { listItems: getLegendData(props.defaultLegends, state.editorMode, props.additionalLegends) }), onDelete, onNext, onPrev, showFrameButtons: !isDragging && (showFrameButtons || hasFocus), title: panelTitle, topCenter: jsxRuntime.exports.jsx(jsxRuntime.exports.Fragment, { children: showZoomPrompt && jsxRuntime.exports.jsx(ZoomPrompt, { hasFocus, onClose: () => setShowZoomPrompt(false), onDismiss }) }), topLeft: jsxRuntime.exports.jsx(RecalculateLayoutButton, { onResetLayout: resetLayout }), topRight: jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(FloatingSearchBar, { onChange: onSearchBarChange, onClose: () => setSelectedNode(null), onNext: onNextSearchResult, onPrev: onPrevSearchResult, selectedResult: currentSearchNode + 1, totalNumberOfResults: searchResults.length }), jsxRuntime.exports.jsx(CenterGraphButton, { onResetZoom: resetViewport }), jsxRuntime.exports.jsx(EditControls, { onAddNode }), jsxRuntime.exports.jsx(DragModeButton, { dragMode, setDragMode }), jsxRuntime.exports.jsx(SaveImageButton, { onSave: saveImage })] }), validContentSelected: contentSelected, children: jsxRuntime.exports.jsxs(graphCtx.Provider, { value: {
+    }, children: jsxRuntime.exports.jsx(pointerCtx.Provider, { value: { disablePointerEvents: isDragging, onPanelEnter, onPanelExit }, children: jsxRuntime.exports.jsx(GraphPane, { "$hasFocus": hasFocus, onClick: () => onPaneFocus(true), ref: paneRef, style: props.style, children: jsxRuntime.exports.jsxs(Graph, { onMouseEnter, onMouseLeave, children: [jsxRuntime.exports.jsx(EditorOverlay, { bottomLeft: jsxRuntime.exports.jsx(Legend, { listItems: getLegendData(props.defaultLegends, state.editorMode, props.additionalLegends) }), onDelete, onNext, onPrev, showFrameButtons: !isDragging && (showFrameButtons || hasFocus), title: panelTitle, topCenter: jsxRuntime.exports.jsx(jsxRuntime.exports.Fragment, { children: showZoomPrompt && jsxRuntime.exports.jsx(ZoomPrompt, { hasFocus, onClose: () => setShowZoomPrompt(false), onDismiss }) }), topLeft: jsxRuntime.exports.jsx(RecalculateLayoutButton, { onResetLayout: resetLayout }), topRight: jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(FloatingSearchBar, { onChange: (value) => {
+      onSearchBarChange(value);
+      if (layoutHasGroup) {
+        expandGroups();
+        setShowCollapseAll(true);
+      }
+    }, onClose: () => setSelectedNode(null), onNext: onNextSearchResult, onPrev: onPrevSearchResult, selectedResult: currentSearchNode + 1, totalNumberOfResults: searchResults.length }), layoutHasGroup && jsxRuntime.exports.jsx(CollapseExpandGroupButton, { onCollapseAll: () => {
+      setShowCollapseAll(false);
+      collapseGroups();
+    }, onExpandAll: () => {
+      expandGroups();
+      setShowCollapseAll(true);
+    }, showExpandAll: showCollapseAll }), jsxRuntime.exports.jsx(CenterGraphButton, { onResetZoom: resetViewport }), jsxRuntime.exports.jsx(EditControls, { onAddNode }), jsxRuntime.exports.jsx(DragModeButton, { dragMode, setDragMode }), jsxRuntime.exports.jsx(SaveImageButton, { onSave: saveImage })] }), validContentSelected: contentSelected, children: jsxRuntime.exports.jsxs(graphCtx.Provider, { value: {
       api: api2,
       constraints,
       editable: props.editable,
@@ -396789,6 +397595,9 @@ ${letters.join("\n")}`;
   function isDefinitionWithTiers(obj) {
     return obj && typeof obj === "object" && "tiers" in obj;
   }
+  function isDefinitionWithGroup(obj) {
+    return obj && typeof obj === "object" && "group" in obj;
+  }
   function parseLayoutDefinition(definition2) {
     let builder;
     switch (definition2.layout_type) {
@@ -396881,13 +397690,25 @@ ${letters.join("\n")}`;
       }
       case "spring": {
         builder = SpringLayout.Builder;
+        if (definition2.collision_force) {
+          builder.collisionForce(definition2.collision_force);
+        }
+        if (definition2.gravity) {
+          builder.gravity(definition2.gravity);
+        }
+        if (definition2.link_force) {
+          builder.linkForce(definition2.link_force);
+        }
         if (definition2.warmup_ticks) {
           builder.warmupTicks(definition2.warmup_ticks);
         }
+        if (definition2.group_repel_strength) {
+          builder.groupRepelStrength(definition2.group_repel_strength);
+        }
         break;
       }
       default: {
-        throw new Error(`Unrecognised layout type: ${String(definition2.layout_type)}`);
+        throw new Error(`Unrecognized layout type: ${String(definition2.layout_type)}`);
       }
     }
     if (isDefinitionWithTiers(definition2)) {
@@ -396902,6 +397723,12 @@ ${letters.join("\n")}`;
         builderWithTiers.tierSeparation(definition2.tier_separation);
       }
     }
+    if (isDefinitionWithGroup(definition2)) {
+      const builderWithGroup = builder;
+      if (definition2.group) {
+        builderWithGroup.group = definition2.group;
+      }
+    }
     if (definition2.node_size) {
       builder.nodeSize(definition2.node_size);
     }