@aptre/flex-layout 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -48,11 +48,7 @@ var Rect = class _Rect {
     return new _Rect(this.x, this.y, this.width, this.height);
   }
   equals(rect) {
-    if (this.x === rect.x && this.y === rect.y && this.width === rect.width && this.height === rect.height) {
-      return true;
-    } else {
-      return false;
-    }
+    return this.x === rect?.x && this.y === rect?.y && this.width === rect?.width && this.height === rect?.height;
   }
   getBottom() {
     return this.y + this.height;
@@ -82,7 +78,12 @@ var Rect = class _Rect {
     }
   }
   removeInsets(insets) {
-    return new _Rect(this.x + insets.left, this.y + insets.top, Math.max(0, this.width - insets.left - insets.right), Math.max(0, this.height - insets.top - insets.bottom));
+    return new _Rect(
+      this.x + insets.left,
+      this.y + insets.top,
+      Math.max(0, this.width - insets.left - insets.right),
+      Math.max(0, this.height - insets.top - insets.bottom)
+    );
   }
   centerInRect(outerRect) {
     this.x = (outerRect.width - this.width) / 2;
@@ -158,12 +159,22 @@ var DockLocation = class _DockLocation {
     if (this === _DockLocation.TOP) {
       return new Rect(r.x, r.y, r.width, r.height / 2);
     } else if (this === _DockLocation.BOTTOM) {
-      return new Rect(r.x, r.getBottom() - r.height / 2, r.width, r.height / 2);
+      return new Rect(
+        r.x,
+        r.getBottom() - r.height / 2,
+        r.width,
+        r.height / 2
+      );
     }
     if (this === _DockLocation.LEFT) {
       return new Rect(r.x, r.y, r.width / 2, r.height);
     } else if (this === _DockLocation.RIGHT) {
-      return new Rect(r.getRight() - r.width / 2, r.y, r.width / 2, r.height);
+      return new Rect(
+        r.getRight() - r.width / 2,
+        r.y,
+        r.width / 2,
+        r.height
+      );
     } else {
       return r.clone();
     }
@@ -172,19 +183,39 @@ var DockLocation = class _DockLocation {
   split(rect, size) {
     if (this === _DockLocation.TOP) {
       const r1 = new Rect(rect.x, rect.y, rect.width, size);
-      const r2 = new Rect(rect.x, rect.y + size, rect.width, rect.height - size);
+      const r2 = new Rect(
+        rect.x,
+        rect.y + size,
+        rect.width,
+        rect.height - size
+      );
       return { start: r1, end: r2 };
     } else if (this === _DockLocation.LEFT) {
       const r1 = new Rect(rect.x, rect.y, size, rect.height);
-      const r2 = new Rect(rect.x + size, rect.y, rect.width - size, rect.height);
+      const r2 = new Rect(
+        rect.x + size,
+        rect.y,
+        rect.width - size,
+        rect.height
+      );
       return { start: r1, end: r2 };
     }
     if (this === _DockLocation.RIGHT) {
-      const r1 = new Rect(rect.getRight() - size, rect.y, size, rect.height);
+      const r1 = new Rect(
+        rect.getRight() - size,
+        rect.y,
+        size,
+        rect.height
+      );
       const r2 = new Rect(rect.x, rect.y, rect.width - size, rect.height);
       return { start: r1, end: r2 };
     } else {
-      const r1 = new Rect(rect.x, rect.getBottom() - size, rect.width, size);
+      const r1 = new Rect(
+        rect.x,
+        rect.getBottom() - size,
+        rect.width,
+        size
+      );
       const r2 = new Rect(rect.x, rect.y, rect.width, rect.height - size);
       return { start: r1, end: r2 };
     }
@@ -257,14 +288,23 @@ var DragDrop = class _DragDrop {
         this._rootElement = this._document.body;
       }
       this.resizeGlass();
-      this._document.defaultView?.addEventListener("resize", this.resizeGlass);
+      this._document.defaultView?.addEventListener(
+        "resize",
+        this.resizeGlass
+      );
       this._document.body.appendChild(this._glass);
       this._glass.tabIndex = -1;
       this._glass.focus();
       this._glass.addEventListener("keydown", this._onKeyPress);
-      this._glass.addEventListener("dragenter", this._onDragEnter, { passive: false });
-      this._glass.addEventListener("dragover", this._onMouseMove, { passive: false });
-      this._glass.addEventListener("dragleave", this._onDragLeave, { passive: false });
+      this._glass.addEventListener("dragenter", this._onDragEnter, {
+        passive: false
+      });
+      this._glass.addEventListener("dragover", this._onMouseMove, {
+        passive: false
+      });
+      this._glass.addEventListener("dragleave", this._onDragLeave, {
+        passive: false
+      });
       this._glassShowing = true;
       this._fDragCancel = fCancel;
       this._manualGlassManagement = false;
@@ -279,7 +319,10 @@ var DragDrop = class _DragDrop {
   hideGlass() {
     if (this._glassShowing) {
       this._document.body.removeChild(this._glass);
-      this._document.defaultView?.removeEventListener("resize", this.resizeGlass);
+      this._document.defaultView?.removeEventListener(
+        "resize",
+        this.resizeGlass
+      );
       this._glassShowing = false;
       this._document = void 0;
       this._rootElement = void 0;
@@ -323,7 +366,9 @@ var DragDrop = class _DragDrop {
       this._startX = posEvent.clientX;
       this._startY = posEvent.clientY;
       if (!window.matchMedia || window.matchMedia("(pointer: fine)").matches) {
-        this._setDefaultGlassCursor(getComputedStyle(event.target).cursor);
+        this._setDefaultGlassCursor(
+          getComputedStyle(event.target).cursor
+        );
       }
       this._stopPropagation(event);
       this._preventDefault(event);
@@ -342,16 +387,34 @@ var DragDrop = class _DragDrop {
     this._active = true;
     if (event?.type === "dragenter") {
       this._dragDepth = 1;
-      this._rootElement.addEventListener("dragenter", this._onDragEnter, { passive: false });
-      this._rootElement.addEventListener("dragover", this._onMouseMove, { passive: false });
-      this._rootElement.addEventListener("dragleave", this._onDragLeave, { passive: false });
-      this._document.addEventListener("dragend", this._onDragCancel, { passive: false });
-      this._document.addEventListener("drop", this._onMouseUp, { passive: false });
+      this._rootElement.addEventListener("dragenter", this._onDragEnter, {
+        passive: false
+      });
+      this._rootElement.addEventListener("dragover", this._onMouseMove, {
+        passive: false
+      });
+      this._rootElement.addEventListener("dragleave", this._onDragLeave, {
+        passive: false
+      });
+      this._document.addEventListener("dragend", this._onDragCancel, {
+        passive: false
+      });
+      this._document.addEventListener("drop", this._onMouseUp, {
+        passive: false
+      });
     } else {
-      this._document.addEventListener("mouseup", this._onMouseUp, { passive: false });
-      this._document.addEventListener("mousemove", this._onMouseMove, { passive: false });
-      this._document.addEventListener("touchend", this._onMouseUp, { passive: false });
-      this._document.addEventListener("touchmove", this._onMouseMove, { passive: false });
+      this._document.addEventListener("mouseup", this._onMouseUp, {
+        passive: false
+      });
+      this._document.addEventListener("mousemove", this._onMouseMove, {
+        passive: false
+      });
+      this._document.addEventListener("touchend", this._onMouseUp, {
+        passive: false
+      });
+      this._document.addEventListener("touchmove", this._onMouseMove, {
+        passive: false
+      });
     }
   }
   isDragging() {
@@ -427,7 +490,10 @@ var DragDrop = class _DragDrop {
       this._dragging = true;
       if (this._fDragStart) {
         this._setDefaultGlassCursor("move");
-        this._dragging = this._fDragStart({ clientX: this._startX, clientY: this._startY });
+        this._dragging = this._fDragStart({
+          clientX: this._startX,
+          clientY: this._startY
+        });
       }
     }
     if (this._dragging) {
@@ -632,7 +698,9 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static setActiveTabset(tabsetNodeId) {
-    return new Action(_Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId });
+    return new Action(_Actions.SET_ACTIVE_TABSET, {
+      tabsetNode: tabsetNodeId
+    });
   }
   /**
    * Adjust the splitter between two tabsets
@@ -671,7 +739,9 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static updateModelAttributes(attributes) {
-    return new Action(_Actions.UPDATE_MODEL_ATTRIBUTES, { json: attributes });
+    return new Action(_Actions.UPDATE_MODEL_ATTRIBUTES, {
+      json: attributes
+    });
   }
   /**
    * Updates the given nodes json attributes
@@ -680,7 +750,10 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static updateNodeAttributes(nodeId, attributes) {
-    return new Action(_Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });
+    return new Action(_Actions.UPDATE_NODE_ATTRIBUTES, {
+      node: nodeId,
+      json: attributes
+    });
   }
   static floatTab(nodeId) {
     return new Action(_Actions.FLOAT_TAB, { node: nodeId });
@@ -731,7 +804,12 @@ var AttributeDefinitions = class {
     this.nameToAttribute = {};
   }
   addWithAll(name, modelName, defaultValue, alwaysWriteJson) {
-    const attr = new Attribute(name, modelName, defaultValue, alwaysWriteJson);
+    const attr = new Attribute(
+      name,
+      modelName,
+      defaultValue,
+      alwaysWriteJson
+    );
     this.attributes.push(attr);
     this.nameToAttribute[name] = attr;
     return attr;
@@ -789,7 +867,9 @@ var AttributeDefinitions = class {
   }
   toTypescriptInterface(name, parentAttributes) {
     const lines = [];
-    const sorted = this.attributes.sort((a, b) => a.name.localeCompare(b.name));
+    const sorted = this.attributes.sort(
+      (a, b) => a.name.localeCompare(b.name)
+    );
     lines.push("export interface I" + name + "Attributes {");
     for (let i = 0; i < sorted.length; i++) {
       const c = sorted[i];
@@ -1478,7 +1558,9 @@ var RowNode = class _RowNode extends Node {
             child._setTempSize(0);
           } else {
             const minSize = child.getMinSize(this.getOrientation());
-            const size = Math.floor(availablePixels * (child.getWeight() / totalWeight));
+            const size = Math.floor(
+              availablePixels * (child.getWeight() / totalWeight)
+            );
             child._setTempSize(Math.max(minSize, size));
           }
           variableSize += child._getTempSize();
@@ -1492,7 +1574,9 @@ var RowNode = class _RowNode extends Node {
       while (totalSizeGiven < pixelSize) {
         for (const child of drawChildren) {
           if (!(child instanceof SplitterNode)) {
-            const prefSize = child._getPrefSize(this.getOrientation());
+            const prefSize = child._getPrefSize(
+              this.getOrientation()
+            );
             if (!child._isFixed() && (prefSize === void 0 || resizePreferred) && totalSizeGiven < pixelSize) {
               child._setTempSize(child._getTempSize() + 1);
               totalSizeGiven++;
@@ -1537,9 +1621,25 @@ var RowNode = class _RowNode extends Node {
     let p = 0;
     for (const child of drawChildren) {
       if (this.getOrientation() === Orientation.HORZ) {
-        child._layout(new Rect(this._rect.x + p, this._rect.y, child._getTempSize(), this._rect.height), metrics);
+        child._layout(
+          new Rect(
+            this._rect.x + p,
+            this._rect.y,
+            child._getTempSize(),
+            this._rect.height
+          ),
+          metrics
+        );
       } else {
-        child._layout(new Rect(this._rect.x, this._rect.y + p, this._rect.width, child._getTempSize()), metrics);
+        child._layout(
+          new Rect(
+            this._rect.x,
+            this._rect.y + p,
+            this._rect.width,
+            child._getTempSize()
+          ),
+          metrics
+        );
       }
       p += child._getTempSize();
     }
@@ -1669,7 +1769,9 @@ var RowNode = class _RowNode extends Node {
             }
             for (let j = 0; j < subChildChildren.length; j++) {
               const subsubChild = subChildChildren[j];
-              subsubChild._setWeight(child.getWeight() * subsubChild.getWeight() / subChildrenTotal);
+              subsubChild._setWeight(
+                child.getWeight() * subsubChild.getWeight() / subChildrenTotal
+              );
               this._addChild(subsubChild, i + j);
             }
           } else {
@@ -1715,24 +1817,48 @@ var RowNode = class _RowNode extends Node {
         const dockLocation = DockLocation.LEFT;
         const outlineRect = dockLocation.getDockRect(this._rect);
         outlineRect.width = outlineRect.width / 2;
-        dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge" /* FLEXLAYOUT__OUTLINE_RECT_EDGE */);
+        dropInfo = new DropInfo(
+          this,
+          outlineRect,
+          dockLocation,
+          -1,
+          "flexlayout__outline_rect_edge" /* FLEXLAYOUT__OUTLINE_RECT_EDGE */
+        );
       } else if (x > this._rect.getRight() - margin && yy > h / 2 - half && yy < h / 2 + half) {
         const dockLocation = DockLocation.RIGHT;
         const outlineRect = dockLocation.getDockRect(this._rect);
         outlineRect.width = outlineRect.width / 2;
         outlineRect.x += outlineRect.width;
-        dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge" /* FLEXLAYOUT__OUTLINE_RECT_EDGE */);
+        dropInfo = new DropInfo(
+          this,
+          outlineRect,
+          dockLocation,
+          -1,
+          "flexlayout__outline_rect_edge" /* FLEXLAYOUT__OUTLINE_RECT_EDGE */
+        );
       } else if (y < this._rect.y + margin && xx > w / 2 - half && xx < w / 2 + half) {
         const dockLocation = DockLocation.TOP;
         const outlineRect = dockLocation.getDockRect(this._rect);
         outlineRect.height = outlineRect.height / 2;
-        dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge" /* FLEXLAYOUT__OUTLINE_RECT_EDGE */);
+        dropInfo = new DropInfo(
+          this,
+          outlineRect,
+          dockLocation,
+          -1,
+          "flexlayout__outline_rect_edge" /* FLEXLAYOUT__OUTLINE_RECT_EDGE */
+        );
       } else if (y > this._rect.getBottom() - margin && xx > w / 2 - half && xx < w / 2 + half) {
         const dockLocation = DockLocation.BOTTOM;
         const outlineRect = dockLocation.getDockRect(this._rect);
         outlineRect.height = outlineRect.height / 2;
         outlineRect.y += outlineRect.height;
-        dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect_edge" /* FLEXLAYOUT__OUTLINE_RECT_EDGE */);
+        dropInfo = new DropInfo(
+          this,
+          outlineRect,
+          dockLocation,
+          -1,
+          "flexlayout__outline_rect_edge" /* FLEXLAYOUT__OUTLINE_RECT_EDGE */
+        );
       }
       if (dropInfo !== void 0) {
         if (!dragNode._canDockInto(dragNode, dropInfo)) {
@@ -1760,7 +1886,10 @@ var RowNode = class _RowNode extends Node {
       tabSet = dragNode;
     } else {
       const callback = this._model._getOnCreateTabSet();
-      tabSet = new TabSetNode(this._model, callback ? callback(dragNode) : {});
+      tabSet = new TabSetNode(
+        this._model,
+        callback ? callback(dragNode) : {}
+      );
       tabSet._addChild(dragNode);
     }
     let size = this._children.reduce((sum, child) => {
@@ -1885,21 +2014,39 @@ var TabSetNode = class _TabSetNode extends Node {
     attributeDefinitions.add("selected", 0).setType(Attribute.NUMBER);
     attributeDefinitions.add("name", void 0).setType(Attribute.STRING);
     attributeDefinitions.add("config", void 0).setType("any");
-    attributeDefinitions.addInherited("enableDeleteWhenEmpty", "tabSetEnableDeleteWhenEmpty");
+    attributeDefinitions.addInherited(
+      "enableDeleteWhenEmpty",
+      "tabSetEnableDeleteWhenEmpty"
+    );
     attributeDefinitions.addInherited("enableDrop", "tabSetEnableDrop");
     attributeDefinitions.addInherited("enableDrag", "tabSetEnableDrag");
     attributeDefinitions.addInherited("enableDivide", "tabSetEnableDivide");
-    attributeDefinitions.addInherited("enableMaximize", "tabSetEnableMaximize");
+    attributeDefinitions.addInherited(
+      "enableMaximize",
+      "tabSetEnableMaximize"
+    );
     attributeDefinitions.addInherited("enableClose", "tabSetEnableClose");
-    attributeDefinitions.addInherited("classNameTabStrip", "tabSetClassNameTabStrip");
-    attributeDefinitions.addInherited("classNameHeader", "tabSetClassNameHeader");
-    attributeDefinitions.addInherited("enableTabStrip", "tabSetEnableTabStrip");
+    attributeDefinitions.addInherited(
+      "classNameTabStrip",
+      "tabSetClassNameTabStrip"
+    );
+    attributeDefinitions.addInherited(
+      "classNameHeader",
+      "tabSetClassNameHeader"
+    );
+    attributeDefinitions.addInherited(
+      "enableTabStrip",
+      "tabSetEnableTabStrip"
+    );
     attributeDefinitions.addInherited("borderInsets", "tabSetBorderInsets");
     attributeDefinitions.addInherited("marginInsets", "tabSetMarginInsets");
     attributeDefinitions.addInherited("minWidth", "tabSetMinWidth");
     attributeDefinitions.addInherited("minHeight", "tabSetMinHeight");
     attributeDefinitions.addInherited("headerHeight", "tabSetHeaderHeight");
-    attributeDefinitions.addInherited("tabStripHeight", "tabSetTabStripHeight");
+    attributeDefinitions.addInherited(
+      "tabStripHeight",
+      "tabSetTabStripHeight"
+    );
     attributeDefinitions.addInherited("tabLocation", "tabSetTabLocation");
     attributeDefinitions.addInherited("autoSelectTab", "tabSetAutoSelectTab").setType(Attribute.BOOLEAN);
     return attributeDefinitions;
@@ -2043,14 +2190,30 @@ var TabSetNode = class _TabSetNode extends Node {
     if (dragNode === this) {
       const dockLocation = DockLocation.CENTER;
       const outlineRect = this._tabHeaderRect;
-      dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+      dropInfo = new DropInfo(
+        this,
+        outlineRect,
+        dockLocation,
+        -1,
+        "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+      );
     } else if (this._contentRect.contains(x, y)) {
       let dockLocation = DockLocation.CENTER;
       if (this._model.getMaximizedTabset() === void 0) {
-        dockLocation = DockLocation.getLocation(this._contentRect, x, y);
+        dockLocation = DockLocation.getLocation(
+          this._contentRect,
+          x,
+          y
+        );
       }
       const outlineRect = dockLocation.getDockRect(this._rect);
-      dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+      dropInfo = new DropInfo(
+        this,
+        outlineRect,
+        dockLocation,
+        -1,
+        "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+      );
     } else if (this._tabHeaderRect != null && this._tabHeaderRect.contains(x, y)) {
       let r;
       let yy;
@@ -2074,7 +2237,13 @@ var TabSetNode = class _TabSetNode extends Node {
           if (x >= p && x < childCenter) {
             const dockLocation = DockLocation.CENTER;
             const outlineRect = new Rect(r.x - 2, yy, 3, h);
-            dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+            dropInfo = new DropInfo(
+              this,
+              outlineRect,
+              dockLocation,
+              i,
+              "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+            );
             break;
           }
           p = childCenter;
@@ -2083,7 +2252,13 @@ var TabSetNode = class _TabSetNode extends Node {
       if (dropInfo == null) {
         const dockLocation = DockLocation.CENTER;
         const outlineRect = new Rect(r.getRight() - 2, yy, 3, h);
-        dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+        dropInfo = new DropInfo(
+          this,
+          outlineRect,
+          dockLocation,
+          this._children.length,
+          "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+        );
       }
     }
     if (!dragNode._canDockInto(dragNode, dropInfo)) {
@@ -2110,16 +2285,31 @@ var TabSetNode = class _TabSetNode extends Node {
     }
     if (this.isEnableTabStrip()) {
       if (this.getTabLocation() === "top") {
-        this._tabHeaderRect = new Rect(rect.x, rect.y + y, rect.width, this._calculatedTabBarHeight);
+        this._tabHeaderRect = new Rect(
+          rect.x,
+          rect.y + y,
+          rect.width,
+          this._calculatedTabBarHeight
+        );
       } else {
-        this._tabHeaderRect = new Rect(rect.x, rect.y + rect.height - this._calculatedTabBarHeight, rect.width, this._calculatedTabBarHeight);
+        this._tabHeaderRect = new Rect(
+          rect.x,
+          rect.y + rect.height - this._calculatedTabBarHeight,
+          rect.width,
+          this._calculatedTabBarHeight
+        );
       }
       h += this._calculatedTabBarHeight;
       if (this.getTabLocation() === "top") {
         y += this._calculatedTabBarHeight;
       }
     }
-    this._contentRect = new Rect(rect.x, rect.y + y, rect.width, rect.height - h);
+    this._contentRect = new Rect(
+      rect.x,
+      rect.y + y,
+      rect.width,
+      rect.height - h
+    );
     for (let i = 0; i < this._children.length; i++) {
       const child = this._children[i];
       child._layout(this._contentRect, metrics);
@@ -2180,7 +2370,10 @@ var TabSetNode = class _TabSetNode extends Node {
       let tabSet;
       if (dragNode instanceof TabNode) {
         const callback = this._model._getOnCreateTabSet();
-        tabSet = new _TabSetNode(this._model, callback ? callback(dragNode) : {});
+        tabSet = new _TabSetNode(
+          this._model,
+          callback ? callback(dragNode) : {}
+        );
         tabSet._addChild(dragNode);
         dragParent = tabSet;
       } else {
@@ -2349,8 +2542,14 @@ var BorderNode = class _BorderNode extends Node {
     attributeDefinitions.addInherited("barSize", "borderBarSize").setType(Attribute.NUMBER);
     attributeDefinitions.addInherited("enableDrop", "borderEnableDrop").setType(Attribute.BOOLEAN);
     attributeDefinitions.addInherited("className", "borderClassName").setType(Attribute.STRING);
-    attributeDefinitions.addInherited("autoSelectTabWhenOpen", "borderAutoSelectTabWhenOpen").setType(Attribute.BOOLEAN);
-    attributeDefinitions.addInherited("autoSelectTabWhenClosed", "borderAutoSelectTabWhenClosed").setType(Attribute.BOOLEAN);
+    attributeDefinitions.addInherited(
+      "autoSelectTabWhenOpen",
+      "borderAutoSelectTabWhenOpen"
+    ).setType(Attribute.BOOLEAN);
+    attributeDefinitions.addInherited(
+      "autoSelectTabWhenClosed",
+      "borderAutoSelectTabWhenClosed"
+    ).setType(Attribute.BOOLEAN);
     attributeDefinitions.addInherited("size", "borderSize").setType(Attribute.NUMBER);
     attributeDefinitions.addInherited("minSize", "borderMinSize").setType(Attribute.NUMBER);
     attributeDefinitions.addInherited("enableAutoHide", "borderEnableAutoHide").setType(Attribute.BOOLEAN);
@@ -2503,7 +2702,10 @@ var BorderNode = class _BorderNode extends Node {
   _layoutBorderInner(inner, metrics) {
     this._drawChildren = [];
     const location = this._location;
-    const split1 = location.split(inner, this._adjustedSize + this._model.getSplitterSize());
+    const split1 = location.split(
+      inner,
+      this._adjustedSize + this._model.getSplitterSize()
+    );
     const split2 = location.reflect().split(split1.start, this._model.getSplitterSize());
     this._contentRect = split2.end;
     for (let i = 0; i < this._children.length; i++) {
@@ -2550,19 +2752,52 @@ var BorderNode = class _BorderNode extends Node {
             childRect = child.getTabRect();
             childCenter = childRect.x + childRect.width / 2;
             if (x >= pos && x < childCenter) {
-              const outlineRect = new Rect(childRect.x - 2, childY, 3, childHeight);
-              dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+              const outlineRect = new Rect(
+                childRect.x - 2,
+                childY,
+                3,
+                childHeight
+              );
+              dropInfo = new DropInfo(
+                this,
+                outlineRect,
+                dockLocation,
+                i,
+                "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+              );
               break;
             }
             pos = childCenter;
           }
           if (dropInfo == null) {
-            const outlineRect = new Rect(childRect.getRight() - 2, childY, 3, childHeight);
-            dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+            const outlineRect = new Rect(
+              childRect.getRight() - 2,
+              childY,
+              3,
+              childHeight
+            );
+            dropInfo = new DropInfo(
+              this,
+              outlineRect,
+              dockLocation,
+              this._children.length,
+              "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+            );
           }
         } else {
-          const outlineRect = new Rect(this._tabHeaderRect.x + 1, this._tabHeaderRect.y + 2, 3, 18);
-          dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+          const outlineRect = new Rect(
+            this._tabHeaderRect.x + 1,
+            this._tabHeaderRect.y + 2,
+            3,
+            18
+          );
+          dropInfo = new DropInfo(
+            this,
+            outlineRect,
+            dockLocation,
+            0,
+            "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+          );
         }
       } else {
         if (this._children.length > 0) {
@@ -2577,19 +2812,52 @@ var BorderNode = class _BorderNode extends Node {
             childRect = child.getTabRect();
             childCenter = childRect.y + childRect.height / 2;
             if (y >= pos && y < childCenter) {
-              const outlineRect = new Rect(childX, childRect.y - 2, childWidth, 3);
-              dropInfo = new DropInfo(this, outlineRect, dockLocation, i, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+              const outlineRect = new Rect(
+                childX,
+                childRect.y - 2,
+                childWidth,
+                3
+              );
+              dropInfo = new DropInfo(
+                this,
+                outlineRect,
+                dockLocation,
+                i,
+                "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+              );
               break;
             }
             pos = childCenter;
           }
           if (dropInfo == null) {
-            const outlineRect = new Rect(childX, childRect.getBottom() - 2, childWidth, 3);
-            dropInfo = new DropInfo(this, outlineRect, dockLocation, this._children.length, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+            const outlineRect = new Rect(
+              childX,
+              childRect.getBottom() - 2,
+              childWidth,
+              3
+            );
+            dropInfo = new DropInfo(
+              this,
+              outlineRect,
+              dockLocation,
+              this._children.length,
+              "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+            );
           }
         } else {
-          const outlineRect = new Rect(this._tabHeaderRect.x + 2, this._tabHeaderRect.y + 1, 18, 3);
-          dropInfo = new DropInfo(this, outlineRect, dockLocation, 0, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+          const outlineRect = new Rect(
+            this._tabHeaderRect.x + 2,
+            this._tabHeaderRect.y + 1,
+            18,
+            3
+          );
+          dropInfo = new DropInfo(
+            this,
+            outlineRect,
+            dockLocation,
+            0,
+            "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+          );
         }
       }
       if (!dragNode._canDockInto(dragNode, dropInfo)) {
@@ -2597,7 +2865,13 @@ var BorderNode = class _BorderNode extends Node {
       }
     } else if (this.getSelected() !== -1 && this._contentRect.contains(x, y)) {
       const outlineRect = this._contentRect;
-      dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+      dropInfo = new DropInfo(
+        this,
+        outlineRect,
+        dockLocation,
+        -1,
+        "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+      );
       if (!dragNode._canDockInto(dragNode, dropInfo)) {
         return void 0;
       }
@@ -2635,7 +2909,9 @@ var BorderNode = class _BorderNode extends Node {
     const json = {};
     _BorderNode._attributeDefinitions.toJson(json, this._attributes);
     json.location = this._location.getName();
-    json.children = this._children.map((child) => child.toJson());
+    json.children = this._children.map(
+      (child) => child.toJson()
+    );
     return json;
   }
   /** @internal */
@@ -2647,16 +2923,28 @@ var BorderNode = class _BorderNode extends Node {
     const rootRow = this._model.getRoot();
     if (this._location === DockLocation.TOP) {
       pBounds[0] = outerRect.y + minSize;
-      pBounds[1] = Math.max(pBounds[0], innerRect.getBottom() - splitter.getHeight() - rootRow.getMinHeight());
+      pBounds[1] = Math.max(
+        pBounds[0],
+        innerRect.getBottom() - splitter.getHeight() - rootRow.getMinHeight()
+      );
     } else if (this._location === DockLocation.LEFT) {
       pBounds[0] = outerRect.x + minSize;
-      pBounds[1] = Math.max(pBounds[0], innerRect.getRight() - splitter.getWidth() - rootRow.getMinWidth());
+      pBounds[1] = Math.max(
+        pBounds[0],
+        innerRect.getRight() - splitter.getWidth() - rootRow.getMinWidth()
+      );
     } else if (this._location === DockLocation.BOTTOM) {
       pBounds[1] = outerRect.getBottom() - splitter.getHeight() - minSize;
-      pBounds[0] = Math.min(pBounds[1], innerRect.y + rootRow.getMinHeight());
+      pBounds[0] = Math.min(
+        pBounds[1],
+        innerRect.y + rootRow.getMinHeight()
+      );
     } else if (this._location === DockLocation.RIGHT) {
       pBounds[1] = outerRect.getRight() - splitter.getWidth() - minSize;
-      pBounds[0] = Math.min(pBounds[1], innerRect.x + rootRow.getMinWidth());
+      pBounds[0] = Math.min(
+        pBounds[1],
+        innerRect.x + rootRow.getMinWidth()
+      );
     }
     return pBounds;
   }
@@ -2738,13 +3026,36 @@ function getRenderStateEx(layout, node, iconFactory, titleFactory, iconAngle) {
   }
   if (leadingContent === void 0 && node.getIcon() !== void 0) {
     if (iconAngle !== 0) {
-      leadingContent = /* @__PURE__ */ React.createElement("img", { style: { width: "1em", height: "1em", transform: "rotate(" + iconAngle + "deg)" }, src: node.getIcon(), alt: "leadingContent" });
+      leadingContent = /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          style: {
+            width: "1em",
+            height: "1em",
+            transform: "rotate(" + iconAngle + "deg)"
+          },
+          src: node.getIcon(),
+          alt: "leadingContent"
+        }
+      );
     } else {
-      leadingContent = /* @__PURE__ */ React.createElement("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
+      leadingContent = /* @__PURE__ */ React.createElement(
+        "img",
+        {
+          style: { width: "1em", height: "1em" },
+          src: node.getIcon(),
+          alt: "leadingContent"
+        }
+      );
     }
   }
   let buttons = [];
-  const renderState = { leading: leadingContent, content: titleContent, name, buttons };
+  const renderState = {
+    leading: leadingContent,
+    content: titleContent,
+    name,
+    buttons
+  };
   layout.customizeTab(node, renderState);
   node._setRenderedName(renderState.name);
   return renderState;
@@ -2768,12 +3079,28 @@ function isAuxMouseEvent(event) {
 
 // src/view/BorderButton.tsx
 var BorderButton = (props) => {
-  const { layout, node, selected, border, iconFactory, titleFactory, icons, path } = props;
+  const {
+    layout,
+    node,
+    selected,
+    border,
+    iconFactory,
+    titleFactory,
+    icons,
+    path
+  } = props;
   const selfRef = React2.useRef(null);
   const contentRef = React2.useRef(null);
   const onMouseDown = (event) => {
     if (!isAuxMouseEvent(event) && !layout.getEditingTab()) {
-      layout.dragStart(event, void 0, node, node.isEnableDrag(), onClick, onDoubleClick);
+      layout.dragStart(
+        event,
+        void 0,
+        node,
+        node.isEnableDrag(),
+        onClick,
+        onDoubleClick
+      );
     }
   };
   const onAuxMouseClick = (event) => {
@@ -2827,7 +3154,14 @@ var BorderButton = (props) => {
   const updateRect = () => {
     const layoutRect = layout.getDomRect();
     const r = selfRef.current.getBoundingClientRect();
-    node._setTabRect(new Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));
+    node._setTabRect(
+      new Rect(
+        r.left - layoutRect.left,
+        r.top - layoutRect.top,
+        r.width,
+        r.height
+      )
+    );
   };
   const onTextBoxMouseDown = (event) => {
     event.stopPropagation();
@@ -2837,7 +3171,12 @@ var BorderButton = (props) => {
       layout.setEditingTab(void 0);
     } else if (event.code === "Enter") {
       layout.setEditingTab(void 0);
-      layout.doAction(Actions.renameTab(node.getId(), event.target.value));
+      layout.doAction(
+        Actions.renameTab(
+          node.getId(),
+          event.target.value
+        )
+      );
     }
   };
   const cm = layout.getClassName;
@@ -2858,7 +3197,13 @@ var BorderButton = (props) => {
       iconAngle = -90;
     }
   }
-  const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory, iconAngle);
+  const renderState = getRenderStateEx(
+    layout,
+    node,
+    iconFactory,
+    titleFactory,
+    iconAngle
+  );
   let content = renderState.content ? /* @__PURE__ */ React2.createElement("div", { className: cm("flexlayout__border_button_content" /* FLEXLAYOUT__BORDER_BUTTON_CONTENT */) }, renderState.content) : null;
   const leading = renderState.leading ? /* @__PURE__ */ React2.createElement("div", { className: cm("flexlayout__border_button_leading" /* FLEXLAYOUT__BORDER_BUTTON_LEADING */) }, renderState.leading) : null;
   if (layout.getEditingTab() === node) {
@@ -2924,19 +3269,15 @@ var TabButtonStamp = (props) => {
   const selfRef = React3.useRef(null);
   const cm = layout.getClassName;
   let classNames = cm("flexlayout__tab_button_stamp" /* FLEXLAYOUT__TAB_BUTTON_STAMP */);
-  const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
+  const renderState = getRenderStateEx(
+    layout,
+    node,
+    iconFactory,
+    titleFactory
+  );
   let content = renderState.content ? /* @__PURE__ */ React3.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : node._getNameForOverflowMenu();
   const leading = renderState.leading ? /* @__PURE__ */ React3.createElement("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */) }, renderState.leading) : null;
-  return /* @__PURE__ */ React3.createElement(
-    "div",
-    {
-      ref: selfRef,
-      className: classNames,
-      title: node.getHelpText()
-    },
-    leading,
-    content
-  );
+  return /* @__PURE__ */ React3.createElement("div", { ref: selfRef, className: classNames, title: node.getHelpText() }, leading, content);
 };
 
 // src/PopupMenu.tsx
@@ -2945,7 +3286,7 @@ function showPopup(triggerElement, items, onSelect, layout, iconFactory, titleFa
   const classNameMapper = layout.getClassName;
   const currentDocument = triggerElement.ownerDocument;
   const triggerRect = triggerElement.getBoundingClientRect();
-  const layoutRect = layoutDiv.getBoundingClientRect();
+  const layoutRect = layoutDiv?.getBoundingClientRect() ?? new DOMRect(0, 0, 100, 100);
   const elm = currentDocument.createElement("div");
   elm.className = classNameMapper("flexlayout__popup_menu_container" /* FLEXLAYOUT__POPUP_MENU_CONTAINER */);
   if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {
@@ -2960,38 +3301,53 @@ function showPopup(triggerElement, items, onSelect, layout, iconFactory, titleFa
   }
   DragDrop.instance.addGlass(() => onHide());
   DragDrop.instance.setGlassCursorOverride("default");
-  layoutDiv.appendChild(elm);
+  if (layoutDiv) {
+    layoutDiv.appendChild(elm);
+  }
   const onHide = () => {
     layout.hidePortal();
     DragDrop.instance.hideGlass();
-    layoutDiv.removeChild(elm);
+    if (layoutDiv) {
+      layoutDiv.removeChild(elm);
+    }
     elm.removeEventListener("mousedown", onElementMouseDown);
     currentDocument.removeEventListener("mousedown", onDocMouseDown);
   };
   const onElementMouseDown = (event) => {
     event.stopPropagation();
   };
-  const onDocMouseDown = (event) => {
+  const onDocMouseDown = (_event) => {
     onHide();
   };
   elm.addEventListener("mousedown", onElementMouseDown);
   currentDocument.addEventListener("mousedown", onDocMouseDown);
-  layout.showPortal(/* @__PURE__ */ React4.createElement(
-    PopupMenu,
-    {
-      currentDocument,
-      onSelect,
-      onHide,
-      items,
-      classNameMapper,
-      layout,
-      iconFactory,
-      titleFactory
-    }
-  ), elm);
+  layout.showPortal(
+    /* @__PURE__ */ React4.createElement(
+      PopupMenu,
+      {
+        currentDocument,
+        onSelect,
+        onHide,
+        items,
+        classNameMapper,
+        layout,
+        iconFactory,
+        titleFactory
+      }
+    ),
+    elm
+  );
 }
 var PopupMenu = (props) => {
-  const { items, onHide, onSelect, classNameMapper, layout, iconFactory, titleFactory } = props;
+  const {
+    items,
+    onHide,
+    onSelect,
+    classNameMapper,
+    layout,
+    iconFactory,
+    titleFactory
+  } = props;
   const onItemClick = (item, event) => {
     onSelect(item);
     onHide();
@@ -3114,8 +3470,14 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
             }
           }
         }
-        const extraSpace = Math.max(0, endPos - (getFar(lastChild.getTabRect()) + tabMargin + shiftPos));
-        const newPosition = Math.min(0, position + shiftPos + extraSpace);
+        const extraSpace = Math.max(
+          0,
+          endPos - (getFar(lastChild.getTabRect()) + tabMargin + shiftPos)
+        );
+        const newPosition = Math.min(
+          0,
+          position + shiftPos + extraSpace
+        );
         const diff = newPosition - position;
         const hidden = [];
         for (let i = 0; i < node.getChildren().length; i++) {
@@ -3149,7 +3511,14 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
     userControlledLeft.current = true;
     event.stopPropagation();
   };
-  return { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated: tabsTruncated.current };
+  return {
+    selfRef,
+    position,
+    userControlledLeft,
+    hiddenTabs,
+    onMouseWheel,
+    tabsTruncated: tabsTruncated.current
+  };
 };
 
 // src/view/BorderTabSet.tsx
@@ -3158,7 +3527,19 @@ var BorderTabSet = (props) => {
   const toolbarRef = React6.useRef(null);
   const overflowbuttonRef = React6.useRef(null);
   const stickyButtonsRef = React6.useRef(null);
-  const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
+  const {
+    selfRef,
+    position,
+    userControlledLeft,
+    hiddenTabs,
+    onMouseWheel,
+    tabsTruncated
+  } = useTabOverflow(
+    border,
+    Orientation.flip(border.getOrientation()),
+    toolbarRef,
+    stickyButtonsRef
+  );
   const onAuxMouseClick = (event) => {
     if (isAuxMouseEvent(event)) {
       layout.auxMouseClick(border, event);
@@ -3222,7 +3603,13 @@ var BorderTabSet = (props) => {
     );
     if (i < border.getChildren().length - 1) {
       tabs.push(
-        /* @__PURE__ */ React6.createElement("div", { key: "divider" + i, className: cm("flexlayout__border_tab_divider" /* FLEXLAYOUT__BORDER_TAB_DIVIDER */) })
+        /* @__PURE__ */ React6.createElement(
+          "div",
+          {
+            key: "divider" + i,
+            className: cm("flexlayout__border_tab_divider" /* FLEXLAYOUT__BORDER_TAB_DIVIDER */)
+          }
+        )
       );
     }
   };
@@ -3235,7 +3622,13 @@ var BorderTabSet = (props) => {
   }
   let buttons = [];
   let stickyButtons = [];
-  const renderState = { headerContent: void 0, buttons, stickyButtons, headerButtons: [], overflowPosition: void 0 };
+  const renderState = {
+    headerContent: void 0,
+    buttons,
+    stickyButtons,
+    headerButtons: [],
+    overflowPosition: void 0
+  };
   layout.customizeTabSet(border, renderState);
   buttons = renderState.buttons;
   if (renderState.overflowPosition === void 0) {
@@ -3245,20 +3638,24 @@ var BorderTabSet = (props) => {
     if (tabsTruncated) {
       buttons = [...stickyButtons, ...buttons];
     } else {
-      tabs.push(/* @__PURE__ */ React6.createElement(
-        "div",
-        {
-          ref: stickyButtonsRef,
-          key: "sticky_buttons_container",
-          onMouseDown: onInterceptMouseDown,
-          onTouchStart: onInterceptMouseDown,
-          onDragStart: (e) => {
-            e.preventDefault();
+      tabs.push(
+        /* @__PURE__ */ React6.createElement(
+          "div",
+          {
+            ref: stickyButtonsRef,
+            key: "sticky_buttons_container",
+            onMouseDown: onInterceptMouseDown,
+            onTouchStart: onInterceptMouseDown,
+            onDragStart: (e) => {
+              e.preventDefault();
+            },
+            className: cm(
+              "flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */
+            )
           },
-          className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */)
-        },
-        stickyButtons
-      ));
+          stickyButtons
+        )
+      );
     }
   }
   if (hiddenTabs.length > 0) {
@@ -3267,7 +3664,15 @@ var BorderTabSet = (props) => {
     if (typeof icons.more === "function") {
       overflowContent = icons.more(border, hiddenTabs);
     } else {
-      overflowContent = /* @__PURE__ */ React6.createElement(React6.Fragment, null, icons.more, /* @__PURE__ */ React6.createElement("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */) }, hiddenTabs.length));
+      overflowContent = /* @__PURE__ */ React6.createElement(React6.Fragment, null, icons.more, /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: cm(
+            "flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */
+          )
+        },
+        hiddenTabs.length
+      ));
     }
     buttons.splice(
       Math.min(renderState.overflowPosition, buttons.length),
@@ -3277,7 +3682,9 @@ var BorderTabSet = (props) => {
         {
           key: "overflowbutton",
           ref: overflowbuttonRef,
-          className: cm("flexlayout__border_toolbar_button" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON */) + " " + cm("flexlayout__border_toolbar_button_overflow" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW */) + " " + cm("flexlayout__border_toolbar_button_overflow_" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ */ + border.getLocation().getName()),
+          className: cm("flexlayout__border_toolbar_button" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON */) + " " + cm("flexlayout__border_toolbar_button_overflow" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW */) + " " + cm(
+            "flexlayout__border_toolbar_button_overflow_" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ */ + border.getLocation().getName()
+          ),
           title: overflowTitle,
           onClick: onOverflowClick,
           onMouseDown: onInterceptMouseDown,
@@ -3308,14 +3715,32 @@ var BorderTabSet = (props) => {
       );
     }
   }
-  const toolbar = /* @__PURE__ */ React6.createElement("div", { key: "toolbar", ref: toolbarRef, className: cm("flexlayout__border_toolbar" /* FLEXLAYOUT__BORDER_TOOLBAR */) + " " + cm("flexlayout__border_toolbar_" /* FLEXLAYOUT__BORDER_TOOLBAR_ */ + border.getLocation().getName()) }, buttons);
+  const toolbar = /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      key: "toolbar",
+      ref: toolbarRef,
+      className: cm("flexlayout__border_toolbar" /* FLEXLAYOUT__BORDER_TOOLBAR */) + " " + cm(
+        "flexlayout__border_toolbar_" /* FLEXLAYOUT__BORDER_TOOLBAR_ */ + border.getLocation().getName()
+      )
+    },
+    buttons
+  );
   style2 = layout.styleFont(style2);
   let innerStyle = {};
   const borderHeight = border.getBorderBarSize() - 1;
   if (border.getLocation() === DockLocation.LEFT) {
-    innerStyle = { right: borderHeight, height: borderHeight, top: position };
+    innerStyle = {
+      right: borderHeight,
+      height: borderHeight,
+      top: position
+    };
   } else if (border.getLocation() === DockLocation.RIGHT) {
-    innerStyle = { left: borderHeight, height: borderHeight, top: position };
+    innerStyle = {
+      left: borderHeight,
+      height: borderHeight,
+      top: position
+    };
   } else {
     innerStyle = { height: borderHeight, left: position };
   }
@@ -3332,7 +3757,25 @@ var BorderTabSet = (props) => {
       onContextMenu,
       onWheel: onMouseWheel
     },
-    /* @__PURE__ */ React6.createElement("div", { style: { height: borderHeight }, className: cm("flexlayout__border_inner" /* FLEXLAYOUT__BORDER_INNER */) + " " + cm("flexlayout__border_inner_" /* FLEXLAYOUT__BORDER_INNER_ */ + border.getLocation().getName()) }, /* @__PURE__ */ React6.createElement("div", { style: innerStyle, className: cm("flexlayout__border_inner_tab_container" /* FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER */) + " " + cm("flexlayout__border_inner_tab_container_" /* FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ */ + border.getLocation().getName()) }, tabs)),
+    /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        style: { height: borderHeight },
+        className: cm("flexlayout__border_inner" /* FLEXLAYOUT__BORDER_INNER */) + " " + cm(
+          "flexlayout__border_inner_" /* FLEXLAYOUT__BORDER_INNER_ */ + border.getLocation().getName()
+        )
+      },
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          style: innerStyle,
+          className: cm("flexlayout__border_inner_tab_container" /* FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER */) + " " + cm(
+            "flexlayout__border_inner_tab_container_" /* FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ */ + border.getLocation().getName()
+          )
+        },
+        tabs
+      )
+    ),
     toolbar
   );
 };
@@ -3345,13 +3788,27 @@ var Splitter = (props) => {
   const outlineDiv = React7.useRef(void 0);
   const parentNode = node.getParent();
   const onMouseDown = (event) => {
-    DragDrop.instance.setGlassCursorOverride(node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize");
-    DragDrop.instance.startDrag(event, onDragStart, onDragMove, onDragEnd, onDragCancel, void 0, void 0, layout.getCurrentDocument(), layout.getRootDiv());
+    DragDrop.instance.setGlassCursorOverride(
+      node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize"
+    );
+    DragDrop.instance.startDrag(
+      event,
+      onDragStart,
+      onDragMove,
+      onDragEnd,
+      onDragCancel,
+      void 0,
+      void 0,
+      layout.getCurrentDocument(),
+      layout.getRootDiv() ?? void 0
+    );
     pBounds.current = parentNode._getSplitterBounds(node, true);
     const rootdiv = layout.getRootDiv();
     outlineDiv.current = layout.getCurrentDocument().createElement("div");
     outlineDiv.current.style.position = "absolute";
-    outlineDiv.current.className = layout.getClassName("flexlayout__splitter_drag" /* FLEXLAYOUT__SPLITTER_DRAG */);
+    outlineDiv.current.className = layout.getClassName(
+      "flexlayout__splitter_drag" /* FLEXLAYOUT__SPLITTER_DRAG */
+    );
     outlineDiv.current.style.cursor = node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize";
     const r2 = node.getRect();
     if (node.getOrientation() === Orientation.VERT && r2.width < 2) {
@@ -3360,11 +3817,15 @@ var Splitter = (props) => {
       r2.height = 2;
     }
     r2.positionElement(outlineDiv.current);
-    rootdiv.appendChild(outlineDiv.current);
+    if (rootdiv) {
+      rootdiv.appendChild(outlineDiv.current);
+    }
   };
-  const onDragCancel = (wasDragging) => {
+  const onDragCancel = (_wasDragging) => {
     const rootdiv = layout.getRootDiv();
-    rootdiv.removeChild(outlineDiv.current);
+    if (rootdiv) {
+      rootdiv.removeChild(outlineDiv.current);
+    }
   };
   const onDragStart = () => {
     return true;
@@ -3397,7 +3858,12 @@ var Splitter = (props) => {
     }
     if (parentNode instanceof BorderNode) {
       const pos = parentNode._calculateSplit(node, value);
-      layout.doAction(Actions.adjustBorderSplit(node.getParent().getId(), pos));
+      layout.doAction(
+        Actions.adjustBorderSplit(
+          node.getParent().getId(),
+          pos
+        )
+      );
     } else {
       const splitSpec = parentNode._calculateSplit(node, value);
       if (splitSpec !== void 0) {
@@ -3408,7 +3874,9 @@ var Splitter = (props) => {
   const onDragEnd = () => {
     updateLayout();
     const rootdiv = layout.getRootDiv();
-    rootdiv.removeChild(outlineDiv.current);
+    if (rootdiv) {
+      rootdiv.removeChild(outlineDiv.current);
+    }
   };
   const getBoundPosition = (p) => {
     const bounds = pBounds.current;
@@ -3459,23 +3927,15 @@ var Splitter = (props) => {
       cursor: node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize"
     });
     const className2 = cm("flexlayout__splitter_extra" /* FLEXLAYOUT__SPLITTER_EXTRA */);
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React7.createElement("div", { style: style2, "data-layout-path": path, className }, /* @__PURE__ */ React7.createElement(
       "div",
       {
-        style: style2,
-        "data-layout-path": path,
-        className
-      },
-      /* @__PURE__ */ React7.createElement(
-        "div",
-        {
-          style: style22,
-          className: className2,
-          onTouchStart: onMouseDown,
-          onMouseDown
-        }
-      )
-    );
+        style: style22,
+        className: className2,
+        onTouchStart: onMouseDown,
+        onMouseDown
+      }
+    ));
   }
 };
 
@@ -3508,7 +3968,9 @@ var ErrorBoundary = class extends React8.Component {
 // src/view/Tab.tsx
 var Tab = (props) => {
   const { layout, selected, node, factory, path } = props;
-  const [renderComponent, setRenderComponent] = React9.useState(!props.node.isEnableRenderOnDemand() || props.selected);
+  const [renderComponent, setRenderComponent] = React9.useState(
+    !props.node.isEnableRenderOnDemand() || props.selected
+  );
   React9.useLayoutEffect(() => {
     if (!renderComponent && selected) {
       setRenderComponent(true);
@@ -3541,7 +4003,9 @@ var Tab = (props) => {
   let className = cm("flexlayout__tab" /* FLEXLAYOUT__TAB */);
   if (parentNode instanceof BorderNode) {
     className += " " + cm("flexlayout__tab_border" /* FLEXLAYOUT__TAB_BORDER */);
-    className += " " + cm("flexlayout__tab_border_" /* FLEXLAYOUT__TAB_BORDER_ */ + parentNode.getLocation().getName());
+    className += " " + cm(
+      "flexlayout__tab_border_" /* FLEXLAYOUT__TAB_BORDER_ */ + parentNode.getLocation().getName()
+    );
   }
   if (node.getContentClassName() !== void 0) {
     className += " " + node.getContentClassName();
@@ -3555,7 +4019,15 @@ var Tab = (props) => {
       onTouchStart: onMouseDown,
       style: style2
     },
-    /* @__PURE__ */ React9.createElement(ErrorBoundary, { message: props.layout.i18nName("Error rendering component" /* Error_rendering_component */) }, /* @__PURE__ */ React9.createElement(Fragment2, null, child))
+    /* @__PURE__ */ React9.createElement(
+      ErrorBoundary,
+      {
+        message: props.layout.i18nName(
+          "Error rendering component" /* Error_rendering_component */
+        )
+      },
+      /* @__PURE__ */ React9.createElement(Fragment2, null, child)
+    )
   );
 };
 
@@ -3570,7 +4042,14 @@ var TabButton = (props) => {
   const contentRef = React10.useRef(null);
   const onMouseDown = (event) => {
     if (!isAuxMouseEvent(event) && !layout.getEditingTab()) {
-      layout.dragStart(event, void 0, node, node.isEnableDrag(), onClick, onDoubleClick);
+      layout.dragStart(
+        event,
+        void 0,
+        node,
+        node.isEnableDrag(),
+        onClick,
+        onDoubleClick
+      );
     }
   };
   const onAuxMouseClick = (event) => {
@@ -3632,7 +4111,14 @@ var TabButton = (props) => {
   const updateRect = () => {
     const layoutRect = layout.getDomRect();
     const r = selfRef.current.getBoundingClientRect();
-    node._setTabRect(new Rect(r.left - layoutRect.left, r.top - layoutRect.top, r.width, r.height));
+    node._setTabRect(
+      new Rect(
+        r.left - layoutRect.left,
+        r.top - layoutRect.top,
+        r.width,
+        r.height
+      )
+    );
   };
   const onTextBoxMouseDown = (event) => {
     event.stopPropagation();
@@ -3642,7 +4128,12 @@ var TabButton = (props) => {
       layout.setEditingTab(void 0);
     } else if (event.code === "Enter") {
       layout.setEditingTab(void 0);
-      layout.doAction(Actions.renameTab(node.getId(), event.target.value));
+      layout.doAction(
+        Actions.renameTab(
+          node.getId(),
+          event.target.value
+        )
+      );
     }
   };
   const cm = layout.getClassName;
@@ -3658,7 +4149,12 @@ var TabButton = (props) => {
   if (node.getClassName() !== void 0) {
     classNames += " " + node.getClassName();
   }
-  const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
+  const renderState = getRenderStateEx(
+    layout,
+    node,
+    iconFactory,
+    titleFactory
+  );
   let content = renderState.content ? /* @__PURE__ */ React10.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : null;
   const leading = renderState.leading ? /* @__PURE__ */ React10.createElement("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */) }, renderState.leading) : null;
   if (layout.getEditingTab() === node) {
@@ -3721,7 +4217,14 @@ var TabSet = (props) => {
   const overflowbuttonRef = React11.useRef(null);
   const tabbarInnerRef = React11.useRef(null);
   const stickyButtonsRef = React11.useRef(null);
-  const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(node, Orientation.HORZ, toolbarRef, stickyButtonsRef);
+  const {
+    selfRef,
+    position,
+    userControlledLeft,
+    hiddenTabs,
+    onMouseWheel,
+    tabsTruncated
+  } = useTabOverflow(node, Orientation.HORZ, toolbarRef, stickyButtonsRef);
   const onOverflowClick = (event) => {
     const callback = layout.getShowOverflowMenu();
     if (callback !== void 0) {
@@ -3755,9 +4258,23 @@ var TabSet = (props) => {
       if (!layout.getEditingTab()) {
         const message = layout.i18nName("Move tabset" /* Move_Tabset */, name);
         if (node.getModel().getMaximizedTabset() !== void 0) {
-          layout.dragStart(event, message, node, false, (event2) => void 0, onDoubleClick);
+          layout.dragStart(
+            event,
+            message,
+            node,
+            false,
+            (event2) => void 0,
+            onDoubleClick
+          );
         } else {
-          layout.dragStart(event, message, node, node.isEnableDrag(), (event2) => void 0, onDoubleClick);
+          layout.dragStart(
+            event,
+            message,
+            node,
+            node.isEnableDrag(),
+            (event2) => void 0,
+            onDoubleClick
+          );
         }
       }
     }
@@ -3825,7 +4342,13 @@ var TabSet = (props) => {
       );
       if (i < node.getChildren().length - 1) {
         tabs.push(
-          /* @__PURE__ */ React11.createElement("div", { key: "divider" + i, className: cm("flexlayout__tabset_tab_divider" /* FLEXLAYOUT__TABSET_TAB_DIVIDER */) })
+          /* @__PURE__ */ React11.createElement(
+            "div",
+            {
+              key: "divider" + i,
+              className: cm("flexlayout__tabset_tab_divider" /* FLEXLAYOUT__TABSET_TAB_DIVIDER */)
+            }
+          )
         );
       }
     }
@@ -3834,7 +4357,13 @@ var TabSet = (props) => {
   let stickyButtons = [];
   let buttons = [];
   let headerButtons = [];
-  const renderState = { headerContent: node.getName(), stickyButtons, buttons, headerButtons, overflowPosition: void 0 };
+  const renderState = {
+    headerContent: node.getName(),
+    stickyButtons,
+    buttons,
+    headerButtons,
+    overflowPosition: void 0
+  };
   layout.customizeTabSet(node, renderState);
   const headerContent = renderState.headerContent;
   stickyButtons = renderState.stickyButtons;
@@ -3847,20 +4376,24 @@ var TabSet = (props) => {
     if (tabsTruncated) {
       buttons = [...stickyButtons, ...buttons];
     } else {
-      tabs.push(/* @__PURE__ */ React11.createElement(
-        "div",
-        {
-          ref: stickyButtonsRef,
-          key: "sticky_buttons_container",
-          onMouseDown: onInterceptMouseDown,
-          onTouchStart: onInterceptMouseDown,
-          onDragStart: (e) => {
-            e.preventDefault();
+      tabs.push(
+        /* @__PURE__ */ React11.createElement(
+          "div",
+          {
+            ref: stickyButtonsRef,
+            key: "sticky_buttons_container",
+            onMouseDown: onInterceptMouseDown,
+            onTouchStart: onInterceptMouseDown,
+            onDragStart: (e) => {
+              e.preventDefault();
+            },
+            className: cm(
+              "flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */
+            )
           },
-          className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */)
-        },
-        stickyButtons
-      ));
+          stickyButtons
+        )
+      );
     }
   }
   if (hiddenTabs.length > 0) {
@@ -3869,7 +4402,15 @@ var TabSet = (props) => {
     if (typeof icons.more === "function") {
       overflowContent = icons.more(node, hiddenTabs);
     } else {
-      overflowContent = /* @__PURE__ */ React11.createElement(React11.Fragment, null, icons.more, /* @__PURE__ */ React11.createElement("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */) }, hiddenTabs.length));
+      overflowContent = /* @__PURE__ */ React11.createElement(React11.Fragment, null, icons.more, /* @__PURE__ */ React11.createElement(
+        "div",
+        {
+          className: cm(
+            "flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */
+          )
+        },
+        hiddenTabs.length
+      ));
     }
     buttons.splice(
       Math.min(renderState.overflowPosition, buttons.length),
@@ -3919,7 +4460,9 @@ var TabSet = (props) => {
           key: "max",
           "data-layout-path": path + "/button/max",
           title: node.isMaximized() ? minTitle : maxTitle,
-          className: cm("flexlayout__tab_toolbar_button" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON */) + " " + cm("flexlayout__tab_toolbar_button-" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ */ + (node.isMaximized() ? "max" : "min")),
+          className: cm("flexlayout__tab_toolbar_button" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON */) + " " + cm(
+            "flexlayout__tab_toolbar_button-" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON_ */ + (node.isMaximized() ? "max" : "min")
+          ),
           onClick: onMaximizeToggle,
           onMouseDown: onInterceptMouseDown,
           onTouchStart: onInterceptMouseDown
@@ -4015,7 +4558,9 @@ var TabSet = (props) => {
       headerToolbar
     );
   }
-  const tabStripStyle = { height: node.getTabStripHeight() + "px" };
+  const tabStripStyle = {
+    height: node.getTabStripHeight() + "px"
+  };
   tabStrip = /* @__PURE__ */ React11.createElement(
     "div",
     {
@@ -4028,14 +4573,27 @@ var TabSet = (props) => {
       onAuxClick: onAuxMouseClick,
       onTouchStart: onMouseDown
     },
-    /* @__PURE__ */ React11.createElement("div", { ref: tabbarInnerRef, className: cm("flexlayout__tabset_tabbar_inner" /* FLEXLAYOUT__TABSET_TABBAR_INNER */) + " " + cm("flexlayout__tabset_tabbar_inner_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_ */ + node.getTabLocation()) }, /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React11.createElement(
       "div",
       {
-        style: { left: position },
-        className: cm("flexlayout__tabset_tabbar_inner_tab_container" /* FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER */) + " " + cm("flexlayout__tabset_tabbar_inner_tab_container_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ */ + node.getTabLocation())
+        ref: tabbarInnerRef,
+        className: cm("flexlayout__tabset_tabbar_inner" /* FLEXLAYOUT__TABSET_TABBAR_INNER */) + " " + cm(
+          "flexlayout__tabset_tabbar_inner_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_ */ + node.getTabLocation()
+        )
       },
-      tabs
-    )),
+      /* @__PURE__ */ React11.createElement(
+        "div",
+        {
+          style: { left: position },
+          className: cm(
+            "flexlayout__tabset_tabbar_inner_tab_container" /* FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER */
+          ) + " " + cm(
+            "flexlayout__tabset_tabbar_inner_tab_container_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_TAB_CONTAINER_ */ + node.getTabLocation()
+          )
+        },
+        tabs
+      )
+    ),
     toolbar
   );
   style2 = layout.styleFont(style2);
@@ -4074,33 +4632,42 @@ var FloatingWindow = (props) => {
   const { title, id, url, rect, onCloseWindow, onSetWindow, children } = props;
   const popoutWindow = React12.useRef(null);
   const timerId = React12.useRef(null);
-  const [content, setContent] = React12.useState(void 0);
+  const [content, setContent] = React12.useState(
+    void 0
+  );
   React12.useLayoutEffect(() => {
     if (timerId.current) {
       clearTimeout(timerId.current);
     }
     let isMounted = true;
-    const r = rect;
-    const styles = Array.from(window.document.styleSheets).reduce((result, styleSheet) => {
-      let rules = void 0;
-      try {
-        rules = styleSheet.cssRules;
-      } catch (e) {
-      }
-      try {
-        return [
-          ...result,
-          {
-            href: styleSheet.href,
-            type: styleSheet.type,
-            rules: rules ? Array.from(rules).map((rule) => rule.cssText) : null
-          }
-        ];
-      } catch (e) {
-        return result;
-      }
-    }, []);
-    popoutWindow.current = window.open(url, id, `left=${r.x},top=${r.y},width=${r.width},height=${r.height}`);
+    const r = rect || new Rect(0, 0, 100, 100);
+    const styles = Array.from(window.document.styleSheets).reduce(
+      (result, styleSheet) => {
+        let rules = void 0;
+        try {
+          rules = styleSheet.cssRules;
+        } catch (e) {
+        }
+        try {
+          return [
+            ...result,
+            {
+              href: styleSheet.href,
+              type: styleSheet.type,
+              rules: rules ? Array.from(rules).map((rule) => rule.cssText) : null
+            }
+          ];
+        } catch (e) {
+          return result;
+        }
+      },
+      []
+    );
+    popoutWindow.current = window.open(
+      url,
+      id,
+      `left=${r.x},top=${r.y},width=${r.width},height=${r.height}`
+    );
     if (popoutWindow.current !== null) {
       onSetWindow(id, popoutWindow.current);
       window.addEventListener("beforeunload", () => {
@@ -4119,9 +4686,12 @@ var FloatingWindow = (props) => {
           copyStyles(popoutDocument, styles).then(() => {
             setContent(popoutContent);
           });
-          popoutWindow.current.addEventListener("beforeunload", () => {
-            onCloseWindow(id);
-          });
+          popoutWindow.current.addEventListener(
+            "beforeunload",
+            () => {
+              onCloseWindow(id);
+            }
+          );
         }
       });
     } else {
@@ -4155,7 +4725,7 @@ function copyStyles(doc, styleSheets) {
       styleElement.href = styleSheet.href;
       head.appendChild(styleElement);
       promises.push(
-        new Promise((resolve, reject) => {
+        new Promise((resolve) => {
           styleElement.onload = () => resolve(true);
         })
       );
@@ -4179,7 +4749,15 @@ var FloatingWindowTab = (props) => {
   const { layout, node, factory } = props;
   const cm = layout.getClassName;
   const child = factory(node);
-  return /* @__PURE__ */ React13.createElement("div", { className: cm("flexlayout__floating_window_tab" /* FLEXLAYOUT__FLOATING_WINDOW_TAB */) }, /* @__PURE__ */ React13.createElement(ErrorBoundary, { message: props.layout.i18nName("Error rendering component" /* Error_rendering_component */) }, /* @__PURE__ */ React13.createElement(Fragment4, null, child)));
+  return /* @__PURE__ */ React13.createElement("div", { className: cm("flexlayout__floating_window_tab" /* FLEXLAYOUT__FLOATING_WINDOW_TAB */) }, /* @__PURE__ */ React13.createElement(
+    ErrorBoundary,
+    {
+      message: props.layout.i18nName(
+        "Error rendering component" /* Error_rendering_component */
+      )
+    },
+    /* @__PURE__ */ React13.createElement(Fragment4, null, child)
+  ));
 };
 
 // src/view/TabFloating.tsx
@@ -4226,7 +4804,16 @@ var TabFloating = (props) => {
   const dockMessage = layout.i18nName("Dock window" /* Floating_Window_Dock_Window */);
   const customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();
   if (customRenderCallback) {
-    return /* @__PURE__ */ React14.createElement("div", { className: cm("flexlayout__tab_floating" /* FLEXLAYOUT__TAB_FLOATING */), onMouseDown, onTouchStart: onMouseDown, style: style2 }, customRenderCallback(dockPopout, showPopout));
+    return /* @__PURE__ */ React14.createElement(
+      "div",
+      {
+        className: cm("flexlayout__tab_floating" /* FLEXLAYOUT__TAB_FLOATING */),
+        onMouseDown,
+        onTouchStart: onMouseDown,
+        style: style2
+      },
+      customRenderCallback(dockPopout, showPopout)
+    );
   } else {
     return /* @__PURE__ */ React14.createElement(
       "div",
@@ -4244,15 +4831,62 @@ var TabFloating = (props) => {
 
 // src/view/Icons.tsx
 import * as React15 from "react";
-var style = { width: "1em", height: "1em", display: "flex", alignItems: "center" };
+var style = {
+  width: "1em",
+  height: "1em",
+  display: "flex",
+  alignItems: "center"
+};
 var CloseIcon = () => {
-  return /* @__PURE__ */ React15.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24" }, /* @__PURE__ */ React15.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }), /* @__PURE__ */ React15.createElement("path", { stroke: "var(--color-icon)", fill: "var(--color-icon)", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
+  return /* @__PURE__ */ React15.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      style,
+      viewBox: "0 0 24 24"
+    },
+    /* @__PURE__ */ React15.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
+    /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        stroke: "var(--color-icon)",
+        fill: "var(--color-icon)",
+        d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+      }
+    )
+  );
 };
 var MaximizeIcon = () => {
-  return /* @__PURE__ */ React15.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React15.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React15.createElement("path", { stroke: "var(--color-icon)", d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
+  return /* @__PURE__ */ React15.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      style,
+      viewBox: "0 0 24 24",
+      fill: "var(--color-icon)"
+    },
+    /* @__PURE__ */ React15.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        stroke: "var(--color-icon)",
+        d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+      }
+    )
+  );
 };
 var OverflowIcon = () => {
-  return /* @__PURE__ */ React15.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React15.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React15.createElement("path", { stroke: "var(--color-icon)", d: "M7 10l5 5 5-5z" }));
+  return /* @__PURE__ */ React15.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      style,
+      viewBox: "0 0 24 24",
+      fill: "var(--color-icon)"
+    },
+    /* @__PURE__ */ React15.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ React15.createElement("path", { stroke: "var(--color-icon)", d: "M7 10l5 5 5-5z" })
+  );
 };
 var PopoutIcon = () => {
   return (
@@ -4260,11 +4894,37 @@ var PopoutIcon = () => {
     // <svg xmlns="http://www.w3.org/2000/svg" style={style} fill="none" viewBox="0 0 24 24" stroke="var(--color-icon)" stroke-width="2">
     //     <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
     // </svg>
-    /* @__PURE__ */ React15.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 20 20", fill: "var(--color-icon)" }, /* @__PURE__ */ React15.createElement("path", { d: "M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" }), /* @__PURE__ */ React15.createElement("path", { d: "M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" }))
+    /* @__PURE__ */ React15.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        style,
+        viewBox: "0 0 20 20",
+        fill: "var(--color-icon)"
+      },
+      /* @__PURE__ */ React15.createElement("path", { d: "M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" }),
+      /* @__PURE__ */ React15.createElement("path", { d: "M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" })
+    )
   );
 };
 var RestoreIcon = () => {
-  return /* @__PURE__ */ React15.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React15.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React15.createElement("path", { stroke: "var(--color-icon)", d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
+  return /* @__PURE__ */ React15.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      style,
+      viewBox: "0 0 24 24",
+      fill: "var(--color-icon)"
+    },
+    /* @__PURE__ */ React15.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ React15.createElement(
+      "path",
+      {
+        stroke: "var(--color-icon)",
+        d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
+      }
+    )
+  );
 };
 
 // src/view/Layout.tsx
@@ -4276,9 +4936,8 @@ var defaultIcons = {
   restore: /* @__PURE__ */ React16.createElement(RestoreIcon, null),
   more: /* @__PURE__ */ React16.createElement(OverflowIcon, null)
 };
-var isIEorEdge = typeof window !== "undefined" && (window.document.documentMode || /Edge\//.test(window.navigator.userAgent));
 var isDesktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
-var defaultSupportsPopout = isDesktop && !isIEorEdge;
+var defaultSupportsPopout = isDesktop;
 var Layout = class extends React16.Component {
   constructor(props) {
     super(props);
@@ -4300,7 +4959,13 @@ var Layout = class extends React16.Component {
       }
     };
     /** @internal */
-    this.updateRect = (domRect = this.getDomRect()) => {
+    this.updateRect = (domRect) => {
+      if (!domRect) {
+        domRect = this.getDomRect();
+      }
+      if (!domRect) {
+        return;
+      }
       const rect = new Rect(0, 0, domRect.width, domRect.height);
       if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
         this.setState({ rect });
@@ -4350,7 +5015,9 @@ var Layout = class extends React16.Component {
     /** @internal */
     this.onCancelAdd = () => {
       const rootdiv = this.selfRef.current;
-      rootdiv.removeChild(this.dragDiv);
+      if (rootdiv && this.dragDiv) {
+        rootdiv.removeChild(this.dragDiv);
+      }
       this.dragDiv = void 0;
       this.hidePortal();
       if (this.fnNewNodeDropped != null) {
@@ -4370,13 +5037,19 @@ var Layout = class extends React16.Component {
     this.onCancelDrag = (wasDragging) => {
       if (wasDragging) {
         const rootdiv = this.selfRef.current;
-        try {
-          rootdiv.removeChild(this.outlineDiv);
-        } catch (e) {
+        const outlineDiv = this.outlineDiv;
+        if (rootdiv && outlineDiv) {
+          try {
+            rootdiv.removeChild(outlineDiv);
+          } catch (e) {
+          }
         }
-        try {
-          rootdiv.removeChild(this.dragDiv);
-        } catch (e) {
+        const dragDiv = this.dragDiv;
+        if (rootdiv && dragDiv) {
+          try {
+            rootdiv.removeChild(dragDiv);
+          } catch (e) {
+          }
         }
         this.dragDiv = void 0;
         this.hidePortal();
@@ -4399,16 +5072,43 @@ var Layout = class extends React16.Component {
     /** @internal */
     this.onDragDivMouseDown = (event) => {
       event.preventDefault();
-      this.dragStart(event, this.dragDivText, TabNode._fromJson(this.newTabJson, this.props.model, false), true, void 0, void 0);
+      this.dragStart(
+        event,
+        this.dragDivText,
+        TabNode._fromJson(this.newTabJson, this.props.model, false),
+        true,
+        void 0,
+        void 0
+      );
     };
     /** @internal */
     this.dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {
       if (!allowDrag) {
-        DragDrop.instance.startDrag(event, void 0, void 0, void 0, void 0, onClick, onDoubleClick, this.currentDocument, this.selfRef.current);
+        DragDrop.instance.startDrag(
+          event,
+          void 0,
+          void 0,
+          void 0,
+          void 0,
+          onClick,
+          onDoubleClick,
+          this.currentDocument,
+          this.selfRef.current ?? void 0
+        );
       } else {
         this.dragNode = node;
         this.dragDivText = dragDivText;
-        DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, this.selfRef.current);
+        DragDrop.instance.startDrag(
+          event,
+          this.onDragStart,
+          this.onDragMove,
+          this.onDragEnd,
+          this.onCancelDrag,
+          onClick,
+          onDoubleClick,
+          this.currentDocument,
+          this.selfRef.current ?? void 0
+        );
       }
     };
     /** @internal */
@@ -4430,26 +5130,33 @@ var Layout = class extends React16.Component {
         }
       }
       if (this.props.onRenderDragRect !== void 0) {
-        const customContent = this.props.onRenderDragRect(content, node, json);
+        const customContent = this.props.onRenderDragRect(
+          content,
+          node,
+          json
+        );
         if (customContent !== void 0) {
           content = customContent;
         }
       }
-      this.dragDiv.style.visibility = "hidden";
       this.dragRectRendered = false;
-      this.showPortal(
-        /* @__PURE__ */ React16.createElement(
-          DragRectRenderWrapper,
-          {
-            onRendered: () => {
-              this.dragRectRendered = true;
-              onRendered?.();
-            }
-          },
-          content
-        ),
-        this.dragDiv
-      );
+      const dragDiv = this.dragDiv;
+      if (dragDiv) {
+        dragDiv.style.visibility = "hidden";
+        this.showPortal(
+          /* @__PURE__ */ React16.createElement(
+            DragRectRenderWrapper,
+            {
+              onRendered: () => {
+                this.dragRectRendered = true;
+                onRendered?.();
+              }
+            },
+            content
+          ),
+          dragDiv
+        );
+      }
     };
     /** @internal */
     this.showPortal = (control, element) => {
@@ -4466,21 +5173,33 @@ var Layout = class extends React16.Component {
       this.customDrop = void 0;
       const rootdiv = this.selfRef.current;
       this.outlineDiv = this.currentDocument.createElement("div");
-      this.outlineDiv.className = this.getClassName("flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+      this.outlineDiv.className = this.getClassName(
+        "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */
+      );
       this.outlineDiv.style.visibility = "hidden";
-      rootdiv.appendChild(this.outlineDiv);
+      if (rootdiv) {
+        rootdiv.appendChild(this.outlineDiv);
+      }
       if (this.dragDiv == null) {
         this.dragDiv = this.currentDocument.createElement("div");
-        this.dragDiv.className = this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */);
+        this.dragDiv.className = this.getClassName(
+          "flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */
+        );
         this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
-        this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
-        rootdiv.appendChild(this.dragDiv);
+        this.dragRectRender(
+          this.dragDivText,
+          this.dragNode,
+          this.newTabJson
+        );
+        if (rootdiv) {
+          rootdiv.appendChild(this.dragDiv);
+        }
       }
       if (this.props.model.getMaximizedTabset() === void 0) {
         this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
       }
-      if (this.dragNode !== void 0 && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== void 0) {
-        this.dragNode.getTabRect().positionElement(this.outlineDiv);
+      if (this.dragNode && this.outlineDiv && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== void 0) {
+        this.dragNode.getTabRect()?.positionElement(this.outlineDiv);
       }
       this.firstMove = true;
       return true;
@@ -4488,44 +5207,64 @@ var Layout = class extends React16.Component {
     /** @internal */
     this.onDragMove = (event) => {
       if (this.firstMove === false) {
-        const speed = this.props.model._getAttribute("tabDragSpeed");
-        this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
+        const speed = this.props.model._getAttribute(
+          "tabDragSpeed"
+        );
+        if (this.outlineDiv) {
+          this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
+        }
       }
       this.firstMove = false;
-      const clientRect = this.selfRef.current.getBoundingClientRect();
+      const clientRect = this.selfRef.current?.getBoundingClientRect();
       const pos = {
-        x: event.clientX - clientRect.left,
-        y: event.clientY - clientRect.top
+        x: event.clientX - (clientRect?.left ?? 0),
+        y: event.clientY - (clientRect?.top ?? 0)
       };
       this.checkForBorderToShow(pos.x, pos.y);
-      const dragRect = this.dragDiv.getBoundingClientRect();
+      const dragRect = this.dragDiv?.getBoundingClientRect() ?? new DOMRect(0, 0, 100, 100);
       let newLeft = pos.x - dragRect.width / 2;
-      if (newLeft + dragRect.width > clientRect.width) {
-        newLeft = clientRect.width - dragRect.width;
+      if (newLeft + dragRect.width > (clientRect?.width ?? 0)) {
+        newLeft = (clientRect?.width ?? 0) - dragRect.width;
       }
       newLeft = Math.max(0, newLeft);
-      this.dragDiv.style.left = newLeft + "px";
-      this.dragDiv.style.top = pos.y + 5 + "px";
-      if (this.dragRectRendered && this.dragDiv.style.visibility === "hidden") {
-        this.dragDiv.style.visibility = "visible";
+      if (this.dragDiv) {
+        this.dragDiv.style.left = newLeft + "px";
+        this.dragDiv.style.top = pos.y + 5 + "px";
+        if (this.dragRectRendered && this.dragDiv.style.visibility === "hidden") {
+          this.dragDiv.style.visibility = "visible";
+        }
       }
-      let dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);
+      let dropInfo = this.props.model._findDropTargetNode(
+        this.dragNode,
+        pos.x,
+        pos.y
+      );
       if (dropInfo) {
         if (this.props.onTabDrag) {
           this.handleCustomTabDrag(dropInfo, pos, event);
         } else {
           this.dropInfo = dropInfo;
-          this.outlineDiv.className = this.getClassName(dropInfo.className);
-          dropInfo.rect.positionElement(this.outlineDiv);
-          this.outlineDiv.style.visibility = "visible";
+          if (this.outlineDiv) {
+            this.outlineDiv.className = this.getClassName(
+              dropInfo.className
+            );
+            dropInfo.rect.positionElement(this.outlineDiv);
+            this.outlineDiv.style.visibility = "visible";
+          }
         }
       }
     };
     /** @internal */
     this.onDragEnd = (event) => {
       const rootdiv = this.selfRef.current;
-      rootdiv.removeChild(this.outlineDiv);
-      rootdiv.removeChild(this.dragDiv);
+      if (rootdiv) {
+        if (this.outlineDiv) {
+          rootdiv.removeChild(this.outlineDiv);
+        }
+        if (this.dragDiv) {
+          rootdiv.removeChild(this.dragDiv);
+        }
+      }
       this.dragDiv = void 0;
       this.hidePortal();
       this.setState({ showEdges: false });
@@ -4544,14 +5283,28 @@ var Layout = class extends React16.Component {
             console.error(e);
           }
         } else if (this.newTabJson !== void 0) {
-          const newNode = this.doAction(Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+          const newNode = this.doAction(
+            Actions.addNode(
+              this.newTabJson,
+              this.dropInfo.node.getId(),
+              this.dropInfo.location,
+              this.dropInfo.index
+            )
+          );
           if (this.fnNewNodeDropped != null) {
             this.fnNewNodeDropped(newNode, event);
             this.fnNewNodeDropped = void 0;
           }
           this.newTabJson = void 0;
         } else if (this.dragNode !== void 0) {
-          this.doAction(Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+          this.doAction(
+            Actions.moveNode(
+              this.dragNode.getId(),
+              this.dropInfo.node.getId(),
+              this.dropInfo.location,
+              this.dropInfo.index
+            )
+          );
         }
       }
       this.setState({ showHiddenBorder: DockLocation.CENTER });
@@ -4581,10 +5334,16 @@ var Layout = class extends React16.Component {
     if (this.props.font) {
       if (this.selfRef.current) {
         if (this.props.font.size) {
-          this.selfRef.current.style.setProperty("--font-size", this.props.font.size);
+          this.selfRef.current.style.setProperty(
+            "--font-size",
+            this.props.font.size
+          );
         }
         if (this.props.font.family) {
-          this.selfRef.current.style.setProperty("--font-family", this.props.font.family);
+          this.selfRef.current.style.setProperty(
+            "--font-family",
+            this.props.font.family
+          );
         }
       }
       if (this.props.font.style) {
@@ -4617,7 +5376,10 @@ var Layout = class extends React16.Component {
     this.resizeObserver = new ResizeObserver((entries) => {
       this.updateRect(entries[0].contentRect);
     });
-    this.resizeObserver.observe(this.selfRef.current);
+    const selfRefCurr = this.selfRef.current;
+    if (selfRefCurr) {
+      this.resizeObserver.observe(selfRefCurr);
+    }
   }
   /** @internal */
   componentDidUpdate() {
@@ -4636,7 +5398,7 @@ var Layout = class extends React16.Component {
   }
   /** @internal */
   getDomRect() {
-    return this.selfRef.current.getBoundingClientRect();
+    return this.selfRef.current?.getBoundingClientRect();
   }
   /** @internal */
   getRootDiv() {
@@ -4660,7 +5422,10 @@ var Layout = class extends React16.Component {
   }
   /** @internal */
   componentWillUnmount() {
-    this.resizeObserver?.unobserve(this.selfRef.current);
+    const selfRefCurr = this.selfRef.current;
+    if (selfRefCurr) {
+      this.resizeObserver?.unobserve(selfRefCurr);
+    }
   }
   /** @internal */
   setEditingTab(tabNode) {
@@ -4673,9 +5438,18 @@ var Layout = class extends React16.Component {
   /** @internal */
   render() {
     if (!this.selfRef.current) {
-      return /* @__PURE__ */ React16.createElement("div", { ref: this.selfRef, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) }, this.metricsElements());
+      return /* @__PURE__ */ React16.createElement(
+        "div",
+        {
+          ref: this.selfRef,
+          className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */)
+        },
+        this.metricsElements()
+      );
     }
-    this.props.model._setPointerFine(window && window.matchMedia && window.matchMedia("(pointer: fine)").matches);
+    this.props.model._setPointerFine(
+      window && window.matchMedia && window.matchMedia("(pointer: fine)").matches
+    );
     const borderComponents = [];
     const tabSetComponents = [];
     const floatingWindows = [];
@@ -4688,8 +5462,21 @@ var Layout = class extends React16.Component {
     };
     this.props.model._setShowHiddenBorder(this.state.showHiddenBorder);
     this.centerRect = this.props.model._layout(this.state.rect, metrics);
-    this.renderBorder(this.props.model.getBorderSet(), borderComponents, tabComponents, floatingWindows, splitterComponents);
-    this.renderChildren("", this.props.model.getRoot(), tabSetComponents, tabComponents, floatingWindows, splitterComponents);
+    this.renderBorder(
+      this.props.model.getBorderSet(),
+      borderComponents,
+      tabComponents,
+      floatingWindows,
+      splitterComponents
+    );
+    this.renderChildren(
+      "",
+      this.props.model.getRoot(),
+      tabSetComponents,
+      tabComponents,
+      floatingWindows,
+      splitterComponents
+    );
     const nextTopIds = [];
     const nextTopIdsMap = {};
     for (const t of this.tabIds) {
@@ -4712,19 +5499,131 @@ var Layout = class extends React16.Component {
       const offset = this.edgeRectLength / 2;
       const className = this.getClassName("flexlayout__edge_rect" /* FLEXLAYOUT__EDGE_RECT */);
       const radius = 50;
-      edges.push(/* @__PURE__ */ React16.createElement("div", { key: "North", style: { top: r.y, left: r.x + r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius }, className: className + " " + this.getClassName("flexlayout__edge_rect_top" /* FLEXLAYOUT__EDGE_RECT_TOP */) }));
-      edges.push(/* @__PURE__ */ React16.createElement("div", { key: "West", style: { top: r.y + r.height / 2 - offset, left: r.x, width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius }, className: className + " " + this.getClassName("flexlayout__edge_rect_left" /* FLEXLAYOUT__EDGE_RECT_LEFT */) }));
-      edges.push(/* @__PURE__ */ React16.createElement("div", { key: "South", style: { top: r.y + r.height - width, left: r.x + r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius }, className: className + " " + this.getClassName("flexlayout__edge_rect_bottom" /* FLEXLAYOUT__EDGE_RECT_BOTTOM */) }));
-      edges.push(/* @__PURE__ */ React16.createElement("div", { key: "East", style: { top: r.y + r.height / 2 - offset, left: r.x + r.width - width, width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius }, className: className + " " + this.getClassName("flexlayout__edge_rect_right" /* FLEXLAYOUT__EDGE_RECT_RIGHT */) }));
+      edges.push(
+        /* @__PURE__ */ React16.createElement(
+          "div",
+          {
+            key: "North",
+            style: {
+              top: r.y,
+              left: r.x + r.width / 2 - offset,
+              width: length,
+              height: width,
+              borderBottomLeftRadius: radius,
+              borderBottomRightRadius: radius
+            },
+            className: className + " " + this.getClassName("flexlayout__edge_rect_top" /* FLEXLAYOUT__EDGE_RECT_TOP */)
+          }
+        )
+      );
+      edges.push(
+        /* @__PURE__ */ React16.createElement(
+          "div",
+          {
+            key: "West",
+            style: {
+              top: r.y + r.height / 2 - offset,
+              left: r.x,
+              width,
+              height: length,
+              borderTopRightRadius: radius,
+              borderBottomRightRadius: radius
+            },
+            className: className + " " + this.getClassName("flexlayout__edge_rect_left" /* FLEXLAYOUT__EDGE_RECT_LEFT */)
+          }
+        )
+      );
+      edges.push(
+        /* @__PURE__ */ React16.createElement(
+          "div",
+          {
+            key: "South",
+            style: {
+              top: r.y + r.height - width,
+              left: r.x + r.width / 2 - offset,
+              width: length,
+              height: width,
+              borderTopLeftRadius: radius,
+              borderTopRightRadius: radius
+            },
+            className: className + " " + this.getClassName("flexlayout__edge_rect_bottom" /* FLEXLAYOUT__EDGE_RECT_BOTTOM */)
+          }
+        )
+      );
+      edges.push(
+        /* @__PURE__ */ React16.createElement(
+          "div",
+          {
+            key: "East",
+            style: {
+              top: r.y + r.height / 2 - offset,
+              left: r.x + r.width - width,
+              width,
+              height: length,
+              borderTopLeftRadius: radius,
+              borderBottomLeftRadius: radius
+            },
+            className: className + " " + this.getClassName("flexlayout__edge_rect_right" /* FLEXLAYOUT__EDGE_RECT_RIGHT */)
+          }
+        )
+      );
     }
-    return /* @__PURE__ */ React16.createElement("div", { ref: this.selfRef, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */), onDragEnter: this.props.onExternalDrag ? this.onDragEnter : void 0 }, tabSetComponents, this.tabIds.map((t) => {
-      return tabComponents[t];
-    }), borderComponents, splitterComponents, edges, floatingWindows, this.metricsElements(), this.state.portal);
+    return /* @__PURE__ */ React16.createElement(
+      "div",
+      {
+        ref: this.selfRef,
+        className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */),
+        onDragEnter: this.props.onExternalDrag ? this.onDragEnter : void 0
+      },
+      tabSetComponents,
+      this.tabIds.map((t) => {
+        return tabComponents[t];
+      }),
+      borderComponents,
+      splitterComponents,
+      edges,
+      floatingWindows,
+      this.metricsElements(),
+      this.state.portal
+    );
   }
   /** @internal */
   metricsElements() {
     const fontStyle = this.styleFont({ visibility: "hidden" });
-    return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement("div", { key: "findHeaderBarSize", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName("flexlayout__tabset_header_sizer" /* FLEXLAYOUT__TABSET_HEADER_SIZER */) }, "FindHeaderBarSize"), /* @__PURE__ */ React16.createElement("div", { key: "findTabBarSize", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName("flexlayout__tabset_sizer" /* FLEXLAYOUT__TABSET_SIZER */) }, "FindTabBarSize"), /* @__PURE__ */ React16.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName("flexlayout__border_sizer" /* FLEXLAYOUT__BORDER_SIZER */) }, "FindBorderBarSize"));
+    return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
+      "div",
+      {
+        key: "findHeaderBarSize",
+        ref: this.findHeaderBarSizeRef,
+        style: fontStyle,
+        className: this.getClassName(
+          "flexlayout__tabset_header_sizer" /* FLEXLAYOUT__TABSET_HEADER_SIZER */
+        )
+      },
+      "FindHeaderBarSize"
+    ), /* @__PURE__ */ React16.createElement(
+      "div",
+      {
+        key: "findTabBarSize",
+        ref: this.findTabBarSizeRef,
+        style: fontStyle,
+        className: this.getClassName(
+          "flexlayout__tabset_sizer" /* FLEXLAYOUT__TABSET_SIZER */
+        )
+      },
+      "FindTabBarSize"
+    ), /* @__PURE__ */ React16.createElement(
+      "div",
+      {
+        key: "findBorderBarSize",
+        ref: this.findBorderBarSizeRef,
+        style: fontStyle,
+        className: this.getClassName(
+          "flexlayout__border_sizer" /* FLEXLAYOUT__BORDER_SIZER */
+        )
+      },
+      "FindBorderBarSize"
+    ));
   }
   /** @internal */
   renderBorder(borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {
@@ -4751,17 +5650,29 @@ var Layout = class extends React16.Component {
         for (const child of drawChildren) {
           if (child instanceof SplitterNode) {
             let path = borderPath + "/s";
-            splitterComponents.push(/* @__PURE__ */ React16.createElement(Splitter, { key: child.getId(), layout: this, node: child, path }));
+            splitterComponents.push(
+              /* @__PURE__ */ React16.createElement(
+                Splitter,
+                {
+                  key: child.getId(),
+                  layout: this,
+                  node: child,
+                  path
+                }
+              )
+            );
           } else if (child instanceof TabNode) {
             let path = borderPath + "/t" + tabCount++;
             if (this.supportsPopout && child.isFloating()) {
               const rect = this._getScreenRect(child);
               const tabBorderWidth = child._getAttr("borderWidth");
               const tabBorderHeight = child._getAttr("borderHeight");
-              if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === Orientation.HORZ) {
-                rect.width = tabBorderWidth;
-              } else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === Orientation.VERT) {
-                rect.height = tabBorderHeight;
+              if (rect) {
+                if (tabBorderWidth !== -1 && border.getLocation().getOrientation() === Orientation.HORZ) {
+                  rect.width = tabBorderWidth;
+                } else if (tabBorderHeight !== -1 && border.getLocation().getOrientation() === Orientation.VERT) {
+                  rect.height = tabBorderHeight;
+                }
               }
               floatingWindows.push(
                 /* @__PURE__ */ React16.createElement(
@@ -4775,7 +5686,14 @@ var Layout = class extends React16.Component {
                     onSetWindow: this.onSetWindow,
                     onCloseWindow: this.onCloseWindow
                   },
-                  /* @__PURE__ */ React16.createElement(FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })
+                  /* @__PURE__ */ React16.createElement(
+                    FloatingWindowTab,
+                    {
+                      layout: this,
+                      node: child,
+                      factory: this.props.factory
+                    }
+                  )
                 )
               );
               tabComponents[child.getId()] = /* @__PURE__ */ React16.createElement(
@@ -4816,11 +5734,41 @@ var Layout = class extends React16.Component {
     for (const child of drawChildren) {
       if (child instanceof SplitterNode) {
         const newPath = path + "/s" + splitterCount++;
-        splitterComponents.push(/* @__PURE__ */ React16.createElement(Splitter, { key: child.getId(), layout: this, path: newPath, node: child }));
+        splitterComponents.push(
+          /* @__PURE__ */ React16.createElement(
+            Splitter,
+            {
+              key: child.getId(),
+              layout: this,
+              path: newPath,
+              node: child
+            }
+          )
+        );
       } else if (child instanceof TabSetNode) {
         const newPath = path + "/ts" + rowCount++;
-        tabSetComponents.push(/* @__PURE__ */ React16.createElement(TabSet, { key: child.getId(), layout: this, path: newPath, node: child, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory, icons: this.icons }));
-        this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
+        tabSetComponents.push(
+          /* @__PURE__ */ React16.createElement(
+            TabSet,
+            {
+              key: child.getId(),
+              layout: this,
+              path: newPath,
+              node: child,
+              iconFactory: this.props.iconFactory,
+              titleFactory: this.props.titleFactory,
+              icons: this.icons
+            }
+          )
+        );
+        this.renderChildren(
+          newPath,
+          child,
+          tabSetComponents,
+          tabComponents,
+          floatingWindows,
+          splitterComponents
+        );
       } else if (child instanceof TabNode) {
         const newPath = path + "/t" + tabCount++;
         const selectedTab = child.getParent().getChildren()[child.getParent().getSelected()];
@@ -4841,16 +5789,49 @@ var Layout = class extends React16.Component {
                 onSetWindow: this.onSetWindow,
                 onCloseWindow: this.onCloseWindow
               },
-              /* @__PURE__ */ React16.createElement(FloatingWindowTab, { layout: this, node: child, factory: this.props.factory })
+              /* @__PURE__ */ React16.createElement(
+                FloatingWindowTab,
+                {
+                  layout: this,
+                  node: child,
+                  factory: this.props.factory
+                }
+              )
             )
           );
-          tabComponents[child.getId()] = /* @__PURE__ */ React16.createElement(TabFloating, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab });
+          tabComponents[child.getId()] = /* @__PURE__ */ React16.createElement(
+            TabFloating,
+            {
+              key: child.getId(),
+              layout: this,
+              path: newPath,
+              node: child,
+              selected: child === selectedTab
+            }
+          );
         } else {
-          tabComponents[child.getId()] = /* @__PURE__ */ React16.createElement(Tab, { key: child.getId(), layout: this, path: newPath, node: child, selected: child === selectedTab, factory: this.props.factory });
+          tabComponents[child.getId()] = /* @__PURE__ */ React16.createElement(
+            Tab,
+            {
+              key: child.getId(),
+              layout: this,
+              path: newPath,
+              node: child,
+              selected: child === selectedTab,
+              factory: this.props.factory
+            }
+          );
         }
       } else {
         const newPath = path + (child.getOrientation() === Orientation.HORZ ? "/r" : "/c") + rowCount++;
-        this.renderChildren(newPath, child, tabSetComponents, tabComponents, floatingWindows, splitterComponents);
+        this.renderChildren(
+          newPath,
+          child,
+          tabSetComponents,
+          tabComponents,
+          floatingWindows,
+          splitterComponents
+        );
       }
     }
   }
@@ -4858,8 +5839,17 @@ var Layout = class extends React16.Component {
   _getScreenRect(node) {
     const rect = node.getRect().clone();
     const bodyRect = this.selfRef.current.getBoundingClientRect();
-    const navHeight = Math.min(80, this.currentWindow.outerHeight - this.currentWindow.innerHeight);
-    const navWidth = Math.min(80, this.currentWindow.outerWidth - this.currentWindow.innerWidth);
+    if (!bodyRect) {
+      return null;
+    }
+    const navHeight = Math.min(
+      80,
+      this.currentWindow.outerHeight - this.currentWindow.innerHeight
+    );
+    const navWidth = Math.min(
+      80,
+      this.currentWindow.outerWidth - this.currentWindow.innerWidth
+    );
     rect.x = rect.x + bodyRect.x + this.currentWindow.screenX + navWidth;
     rect.y = rect.y + bodyRect.y + this.currentWindow.screenY + navHeight;
     return rect;
@@ -4872,7 +5862,9 @@ var Layout = class extends React16.Component {
   addTabToTabSet(tabsetId, json) {
     const tabsetNode = this.props.model.getNodeById(tabsetId);
     if (tabsetNode !== void 0) {
-      this.doAction(Actions.addNode(json, tabsetId, DockLocation.CENTER, -1));
+      this.doAction(
+        Actions.addNode(json, tabsetId, DockLocation.CENTER, -1)
+      );
     }
   }
   /**
@@ -4882,7 +5874,14 @@ var Layout = class extends React16.Component {
   addTabToActiveTabSet(json) {
     const tabsetNode = this.props.model.getActiveTabset();
     if (tabsetNode !== void 0) {
-      this.doAction(Actions.addNode(json, tabsetNode.getId(), DockLocation.CENTER, -1));
+      this.doAction(
+        Actions.addNode(
+          json,
+          tabsetNode.getId(),
+          DockLocation.CENTER,
+          -1
+        )
+      );
     }
   }
   /**
@@ -4894,7 +5893,14 @@ var Layout = class extends React16.Component {
   addTabWithDragAndDrop(dragText, json, onDrop) {
     this.fnNewNodeDropped = onDrop;
     this.newTabJson = json;
-    this.dragStart(void 0, dragText, TabNode._fromJson(json, this.props.model, false), true, void 0, void 0);
+    this.dragStart(
+      void 0,
+      dragText,
+      TabNode._fromJson(json, this.props.model, false),
+      true,
+      void 0,
+      void 0
+    );
   }
   /**
    * Move a tab/tabset using drag and drop
@@ -4918,20 +5924,32 @@ var Layout = class extends React16.Component {
     DragDrop.instance.addGlass(this.onCancelAdd);
     this.dragDivText = dragText;
     this.dragDiv = this.currentDocument.createElement("div");
-    this.dragDiv.className = this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */);
+    this.dragDiv.className = this.getClassName(
+      "flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */
+    );
     this.dragDiv.addEventListener("mousedown", this.onDragDivMouseDown);
-    this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown, { passive: false });
-    this.dragRectRender(this.dragDivText, void 0, this.newTabJson, () => {
-      if (this.dragDiv) {
-        this.dragDiv.style.visibility = "visible";
-        const domRect = this.dragDiv.getBoundingClientRect();
-        const r = new Rect(0, 0, domRect?.width, domRect?.height);
-        r.centerInRect(this.state.rect);
-        this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
-        this.dragDiv.style.left = r.x + "px";
-        this.dragDiv.style.top = r.y + "px";
-      }
+    this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown, {
+      passive: false
     });
+    this.dragRectRender(
+      this.dragDivText,
+      void 0,
+      this.newTabJson,
+      () => {
+        if (this.dragDiv) {
+          this.dragDiv.style.visibility = "visible";
+          const domRect = this.dragDiv.getBoundingClientRect();
+          const r = new Rect(0, 0, domRect?.width, domRect?.height);
+          r.centerInRect(this.state.rect);
+          this.dragDiv.setAttribute(
+            "data-layout-path",
+            "/drag-rectangle"
+          );
+          this.dragDiv.style.left = r.x + "px";
+          this.dragDiv.style.top = r.y + "px";
+        }
+      }
+    );
     const rootdiv = this.selfRef.current;
     rootdiv.appendChild(this.dragDiv);
   }
@@ -4947,10 +5965,22 @@ var Layout = class extends React16.Component {
       if (selected && tabRect?.contains(pos.x, pos.y)) {
         let customDrop = void 0;
         try {
-          const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, () => this.onDragMove(event));
+          const dest = this.onTabDrag(
+            dragging,
+            selected,
+            pos.x - tabRect.x,
+            pos.y - tabRect.y,
+            dropInfo.location,
+            () => this.onDragMove(event)
+          );
           if (dest) {
             customDrop = {
-              rect: new Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
+              rect: new Rect(
+                dest.x + tabRect.x,
+                dest.y + tabRect.y,
+                dest.width,
+                dest.height
+              ),
               callback: dest.callback,
               invalidated: dest.invalidated,
               dragging,
@@ -4971,14 +6001,20 @@ var Layout = class extends React16.Component {
       }
     }
     this.dropInfo = dropInfo;
-    this.outlineDiv.className = this.getClassName(this.customDrop ? "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */ : dropInfo.className);
-    if (this.customDrop) {
-      this.customDrop.rect.positionElement(this.outlineDiv);
-    } else {
-      dropInfo.rect.positionElement(this.outlineDiv);
+    if (this.outlineDiv) {
+      this.outlineDiv.className = this.getClassName(
+        this.customDrop ? "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */ : dropInfo.className
+      );
+      if (this.customDrop) {
+        this.customDrop.rect.positionElement(this.outlineDiv);
+      } else {
+        dropInfo.rect.positionElement(this.outlineDiv);
+      }
     }
     DragDrop.instance.setGlassCursorOverride(this.customDrop?.cursor);
-    this.outlineDiv.style.visibility = "visible";
+    if (this.outlineDiv) {
+      this.outlineDiv.style.visibility = "visible";
+    }
     try {
       invalidated?.();
     } catch (e) {
@@ -4993,7 +6029,14 @@ var Layout = class extends React16.Component {
     if (drag) {
       this.fnNewNodeDropped = drag.onDrop;
       this.newTabJson = drag.json;
-      this.dragStart(event, drag.dragText, TabNode._fromJson(drag.json, this.props.model, false), true, void 0, void 0);
+      this.dragStart(
+        event,
+        drag.dragText,
+        TabNode._fromJson(drag.json, this.props.model, false),
+        true,
+        void 0,
+        void 0
+      );
     }
   }
   /** @internal */
@@ -5088,7 +6131,9 @@ var BorderSet = class _BorderSet {
   /** @internal */
   static _fromJson(json, model) {
     const borderSet = new _BorderSet(model);
-    borderSet._borders = json.map((borderJson) => BorderNode._fromJson(borderJson, model));
+    borderSet._borders = json.map(
+      (borderJson) => BorderNode._fromJson(borderJson, model)
+    );
     return borderSet;
   }
   /** @internal */
@@ -5122,7 +6167,9 @@ var BorderSet = class _BorderSet {
     let sumWidth = 0;
     let adjustableHeight = 0;
     let adjustableWidth = 0;
-    const showingBorders = this._borders.filter((border) => border.isShowing());
+    const showingBorders = this._borders.filter(
+      (border) => border.isShowing()
+    );
     for (const border of showingBorders) {
       border._setAdjustedSize(border.getSize());
       const visible = border.getSelected() !== -1;
@@ -5170,11 +6217,17 @@ var BorderSet = class _BorderSet {
       }
     }
     for (const border of showingBorders) {
-      outerInnerRects.outer = border._layoutBorderOuter(outerInnerRects.outer, metrics);
+      outerInnerRects.outer = border._layoutBorderOuter(
+        outerInnerRects.outer,
+        metrics
+      );
     }
     outerInnerRects.inner = outerInnerRects.outer;
     for (const border of showingBorders) {
-      outerInnerRects.inner = border._layoutBorderInner(outerInnerRects.inner, metrics);
+      outerInnerRects.inner = border._layoutBorderInner(
+        outerInnerRects.inner,
+        metrics
+      );
     }
     return outerInnerRects;
   }
@@ -5200,7 +6253,10 @@ var Model = class _Model {
    */
   constructor() {
     /** @internal */
-    this._borderRects = { inner: Rect.empty(), outer: Rect.empty() };
+    this._borderRects = {
+      inner: Rect.empty(),
+      outer: Rect.empty()
+    };
     this._attributes = {};
     this._idMap = {};
     this._borders = new BorderSet(this);
@@ -5388,7 +6444,12 @@ var Model = class _Model {
         const newNode = new TabNode(this, action.data.json, true);
         const toNode = this._idMap[action.data.toNode];
         if (toNode instanceof TabSetNode || toNode instanceof BorderNode || toNode instanceof RowNode) {
-          toNode.drop(newNode, DockLocation.getByName(action.data.location), action.data.index, action.data.select);
+          toNode.drop(
+            newNode,
+            DockLocation.getByName(action.data.location),
+            action.data.index,
+            action.data.select
+          );
           returnVal = newNode;
         }
         break;
@@ -5398,7 +6459,12 @@ var Model = class _Model {
         if (fromNode instanceof TabNode || fromNode instanceof TabSetNode) {
           const toNode = this._idMap[action.data.toNode];
           if (toNode instanceof TabSetNode || toNode instanceof BorderNode || toNode instanceof RowNode) {
-            toNode.drop(fromNode, DockLocation.getByName(action.data.location), action.data.index, action.data.select);
+            toNode.drop(
+              fromNode,
+              DockLocation.getByName(action.data.location),
+              action.data.index,
+              action.data.select
+            );
           }
         }
         break;
@@ -5485,8 +6551,16 @@ var Model = class _Model {
         const node1 = this._idMap[action.data.node1];
         const node2 = this._idMap[action.data.node2];
         if ((node1 instanceof TabSetNode || node1 instanceof RowNode) && (node2 instanceof TabSetNode || node2 instanceof RowNode)) {
-          this._adjustSplitSide(node1, action.data.weight1, action.data.pixelWidth1);
-          this._adjustSplitSide(node2, action.data.weight2, action.data.pixelWidth2);
+          this._adjustSplitSide(
+            node1,
+            action.data.weight1,
+            action.data.pixelWidth1
+          );
+          this._adjustSplitSide(
+            node2,
+            action.data.weight2,
+            action.data.pixelWidth2
+          );
         }
         break;
       }
@@ -5551,7 +6625,11 @@ var Model = class _Model {
     this.visitNodes((node) => {
       node._fireEvent("save", void 0);
     });
-    return { global, borders: this._borders._toJson(), layout: this._root.toJson() };
+    return {
+      global,
+      borders: this._borders._toJson(),
+      layout: this._root.toJson()
+    };
   }
   getSplitterSize() {
     let splitterSize = this._attributes.splitterSize;
@@ -5573,7 +6651,9 @@ var Model = class _Model {
   _addNode(node) {
     const id = node.getId();
     if (this._idMap[id] !== void 0) {
-      throw new Error(`Error: each node must have a unique id, duplicate id:${node.getId()}`);
+      throw new Error(
+        `Error: each node must have a unique id, duplicate id:${node.getId()}`
+      );
     }
     if (node.getType() !== "splitter") {
       this._idMap[id] = node;
@@ -5581,8 +6661,13 @@ var Model = class _Model {
   }
   /** @internal */
   _layout(rect, metrics) {
-    this._borderRects = this._borders._layoutBorder({ outer: rect, inner: rect }, metrics);
-    rect = this._borderRects.inner.removeInsets(this._getAttribute("marginInsets"));
+    this._borderRects = this._borders._layoutBorder(
+      { outer: rect, inner: rect },
+      metrics
+    );
+    rect = this._borderRects.inner.removeInsets(
+      this._getAttribute("marginInsets")
+    );
     this._root?.calcMinSize();
     this._root._layout(rect, metrics);
     return rect;
@@ -5626,7 +6711,7 @@ var Model = class _Model {
    * set callback called when a new TabSet is created.
    * The tabNode can be undefined if it's the auto created first tabset in the root row (when the last
    * tab is deleted, the root tabset can be recreated)
-   * @param onCreateTabSet 
+   * @param onCreateTabSet
    */
   setOnCreateTabSet(onCreateTabSet) {
     this._onCreateTabSet = onCreateTabSet;
@@ -5636,11 +6721,36 @@ var Model = class _Model {
     return this._onCreateTabSet;
   }
   static toTypescriptInterfaces() {
-    console.log(_Model._attributeDefinitions.toTypescriptInterface("Global", void 0));
-    console.log(RowNode.getAttributeDefinitions().toTypescriptInterface("Row", _Model._attributeDefinitions));
-    console.log(TabSetNode.getAttributeDefinitions().toTypescriptInterface("TabSet", _Model._attributeDefinitions));
-    console.log(TabNode.getAttributeDefinitions().toTypescriptInterface("Tab", _Model._attributeDefinitions));
-    console.log(BorderNode.getAttributeDefinitions().toTypescriptInterface("Border", _Model._attributeDefinitions));
+    console.log(
+      _Model._attributeDefinitions.toTypescriptInterface(
+        "Global",
+        void 0
+      )
+    );
+    console.log(
+      RowNode.getAttributeDefinitions().toTypescriptInterface(
+        "Row",
+        _Model._attributeDefinitions
+      )
+    );
+    console.log(
+      TabSetNode.getAttributeDefinitions().toTypescriptInterface(
+        "TabSet",
+        _Model._attributeDefinitions
+      )
+    );
+    console.log(
+      TabNode.getAttributeDefinitions().toTypescriptInterface(
+        "Tab",
+        _Model._attributeDefinitions
+      )
+    );
+    console.log(
+      BorderNode.getAttributeDefinitions().toTypescriptInterface(
+        "Border",
+        _Model._attributeDefinitions
+      )
+    );
   }
   toString() {
     return JSON.stringify(this.toJson());