@aptre/flex-layout 0.1.6 → 0.1.7

package/dist/index.mjs

@@ -159,22 +159,12 @@ 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();
     }
@@ -183,39 +173,19 @@ 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 };
     }
@@ -698,9 +668,7 @@ 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
@@ -739,9 +707,7 @@ 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
@@ -750,10 +716,7 @@ 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 });
@@ -804,12 +767,7 @@ 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;
@@ -867,9 +825,7 @@ 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];
@@ -972,6 +928,7 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
   CLASSES2["FLEXLAYOUT__TAB_BORDER"] = "flexlayout__tab_border";
   CLASSES2["FLEXLAYOUT__TAB_BORDER_"] = "flexlayout__tab_border_";
   CLASSES2["FLEXLAYOUT__TAB_BUTTON"] = "flexlayout__tab_button";
+  CLASSES2["FLEXLAYOUT__TAB_BUTTON_STRETCH"] = "flexlayout__tab_button_stretch";
   CLASSES2["FLEXLAYOUT__TAB_BUTTON_CONTENT"] = "flexlayout__tab_button_content";
   CLASSES2["FLEXLAYOUT__TAB_BUTTON_LEADING"] = "flexlayout__tab_button_leading";
   CLASSES2["FLEXLAYOUT__TAB_BUTTON_OVERFLOW"] = "flexlayout__tab_button_overflow";
@@ -1558,9 +1515,7 @@ 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();
@@ -1574,9 +1529,7 @@ 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++;
@@ -1621,25 +1574,9 @@ 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();
     }
@@ -1769,9 +1706,7 @@ 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 {
@@ -1817,48 +1752,24 @@ 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)) {
@@ -1886,10 +1797,7 @@ 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) => {
@@ -2014,39 +1922,22 @@ 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("enableSingleTabStretch", "tabSetEnableSingleTabStretch");
+    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;
@@ -2125,6 +2016,9 @@ var TabSetNode = class _TabSetNode extends Node {
   isEnableClose() {
     return this._getAttr("enableClose");
   }
+  isEnableSingleTabStretch() {
+    return this._getAttr("enableSingleTabStretch");
+  }
   canMaximize() {
     if (this.isEnableMaximize()) {
       if (this.getModel().getMaximizedTabset() === this) {
@@ -2190,30 +2084,14 @@ 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;
@@ -2237,13 +2115,7 @@ 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;
@@ -2252,13 +2124,7 @@ 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)) {
@@ -2285,31 +2151,16 @@ 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);
@@ -2370,10 +2221,7 @@ 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 {
@@ -2542,14 +2390,8 @@ 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);
@@ -2702,10 +2544,7 @@ 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++) {
@@ -2752,52 +2591,19 @@ 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) {
@@ -2812,52 +2618,19 @@ 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)) {
@@ -2865,13 +2638,7 @@ 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;
       }
@@ -2909,9 +2676,7 @@ 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 */
@@ -2923,28 +2688,16 @@ 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;
   }
@@ -3026,36 +2779,13 @@ 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;
@@ -3079,28 +2809,12 @@ 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) => {
@@ -3173,12 +2887,7 @@ 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;
@@ -3199,13 +2908,7 @@ 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) {
@@ -3271,15 +2974,19 @@ 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
@@ -3475,14 +3182,8 @@ 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++) {
@@ -3516,14 +3217,7 @@ 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
@@ -3532,19 +3226,7 @@ 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);
@@ -3608,13 +3290,7 @@ 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 */) })
       );
     }
   };
@@ -3627,13 +3303,7 @@ 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) {
@@ -3643,24 +3313,20 @@ 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();
-            },
-            className: cm(
-              "flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */
-            )
+      tabs.push(/* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          ref: stickyButtonsRef,
+          key: "sticky_buttons_container",
+          onMouseDown: onInterceptMouseDown,
+          onTouchStart: onInterceptMouseDown,
+          onDragStart: (e) => {
+            e.preventDefault();
           },
-          stickyButtons
-        )
-      );
+          className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */)
+        },
+        stickyButtons
+      ));
     }
   }
   if (hiddenTabs.length > 0) {
@@ -3669,15 +3335,7 @@ 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),
@@ -3687,9 +3345,7 @@ 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,
@@ -3720,32 +3376,14 @@ 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 };
   }
@@ -3762,25 +3400,7 @@ 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
   );
 };
@@ -3811,9 +3431,7 @@ var Splitter = (props) => {
     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) {
@@ -3866,12 +3484,7 @@ 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) {
@@ -3935,15 +3548,23 @@ 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("div", { style: style2, "data-layout-path": path, className }, /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React7.createElement(
       "div",
       {
-        style: style22,
-        className: className2,
-        onTouchStart: onMouseDown,
-        onMouseDown
-      }
-    ));
+        style: style2,
+        "data-layout-path": path,
+        className
+      },
+      /* @__PURE__ */ React7.createElement(
+        "div",
+        {
+          style: style22,
+          className: className2,
+          onTouchStart: onMouseDown,
+          onMouseDown
+        }
+      )
+    );
   }
 };
 
@@ -3976,9 +3597,7 @@ 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);
@@ -4011,9 +3630,7 @@ 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();
@@ -4027,15 +3644,7 @@ 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))
   );
 };
 
@@ -4050,14 +3659,7 @@ 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) => {
@@ -4138,33 +3740,26 @@ 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;
   const parentNode = node.getParent();
-  let baseClassName = "flexlayout__tab_button" /* FLEXLAYOUT__TAB_BUTTON */;
+  const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;
+  let baseClassName = isStretch ? "flexlayout__tab_button_stretch" /* FLEXLAYOUT__TAB_BUTTON_STRETCH */ : "flexlayout__tab_button" /* FLEXLAYOUT__TAB_BUTTON */;
   let classNames = cm(baseClassName);
   classNames += " " + cm(baseClassName + "_" + parentNode.getTabLocation());
-  if (selected) {
-    classNames += " " + cm(baseClassName + "--selected");
-  } else {
-    classNames += " " + cm(baseClassName + "--unselected");
+  if (!isStretch) {
+    if (selected) {
+      classNames += " " + cm(baseClassName + "--selected");
+    } else {
+      classNames += " " + cm(baseClassName + "--unselected");
+    }
   }
   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) {
@@ -4183,7 +3778,7 @@ var TabButton = (props) => {
       }
     );
   }
-  if (node.isEnableClose()) {
+  if (node.isEnableClose() && !isStretch) {
     const closeTitle = layout.i18nName("Close" /* Close_Tab */);
     renderState.buttons.push(
       /* @__PURE__ */ React10.createElement(
@@ -4227,14 +3822,7 @@ 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) {
@@ -4268,23 +3856,9 @@ 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);
         }
       }
     }
@@ -4310,6 +3884,10 @@ var TabSet = (props) => {
     layout.doAction(Actions.deleteTabset(node.getId()));
     event.stopPropagation();
   };
+  const onCloseTab = (event) => {
+    layout.doAction(Actions.deleteTab(node.getChildren()[0].getId()));
+    event.stopPropagation();
+  };
   const onFloatTab = (event) => {
     if (selectedTabNode !== void 0) {
       layout.doAction(Actions.floatTab(selectedTabNode.getId()));
@@ -4352,13 +3930,7 @@ 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 */) })
         );
       }
     }
@@ -4367,43 +3939,35 @@ 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;
   buttons = renderState.buttons;
   headerButtons = renderState.headerButtons;
+  const isTabStretch = node.isEnableSingleTabStretch() && node.getChildren().length === 1;
+  const showClose = isTabStretch && node.getChildren()[0].isEnableClose() || node.isEnableClose();
   if (renderState.overflowPosition === void 0) {
     renderState.overflowPosition = stickyButtons.length;
   }
   if (stickyButtons.length > 0) {
-    if (tabsTruncated) {
+    if (tabsTruncated || isTabStretch) {
       buttons = [...stickyButtons, ...buttons];
     } else {
-      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 */
-            )
+      tabs.push(/* @__PURE__ */ React11.createElement(
+        "div",
+        {
+          ref: stickyButtonsRef,
+          key: "sticky_buttons_container",
+          onMouseDown: onInterceptMouseDown,
+          onTouchStart: onInterceptMouseDown,
+          onDragStart: (e) => {
+            e.preventDefault();
           },
-          stickyButtons
-        )
-      );
+          className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */)
+        },
+        stickyButtons
+      ));
     }
   }
   if (hiddenTabs.length > 0) {
@@ -4412,15 +3976,7 @@ 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),
@@ -4470,9 +4026,7 @@ 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
@@ -4481,8 +4035,8 @@ var TabSet = (props) => {
       )
     );
   }
-  if (!node.isMaximized() && node.isEnableClose()) {
-    const title = layout.i18nName("Close tabset" /* Close_Tabset */);
+  if (!node.isMaximized() && showClose) {
+    const title = isTabStretch ? layout.i18nName("Close" /* Close_Tab */) : layout.i18nName("Close tabset" /* Close_Tabset */);
     const btns = showHeader ? headerButtons : buttons;
     btns.push(
       /* @__PURE__ */ React11.createElement(
@@ -4492,7 +4046,7 @@ var TabSet = (props) => {
           "data-layout-path": path + "/button/close",
           title,
           className: cm("flexlayout__tab_toolbar_button" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON */) + " " + cm("flexlayout__tab_toolbar_button-close" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE */),
-          onClick: onClose,
+          onClick: isTabStretch ? onCloseTab : onClose,
           onMouseDown: onInterceptMouseDown,
           onTouchStart: onInterceptMouseDown
         },
@@ -4568,9 +4122,7 @@ var TabSet = (props) => {
       headerToolbar
     );
   }
-  const tabStripStyle = {
-    height: node.getTabStripHeight() + "px"
-  };
+  const tabStripStyle = { height: node.getTabStripHeight() + "px" };
   tabStrip = /* @__PURE__ */ React11.createElement(
     "div",
     {
@@ -4583,27 +4135,14 @@ var TabSet = (props) => {
       onAuxClick: onAuxMouseClick,
       onTouchStart: onMouseDown
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__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(
       "div",
       {
-        ref: tabbarInnerRef,
-        className: cm("flexlayout__tabset_tabbar_inner" /* FLEXLAYOUT__TABSET_TABBAR_INNER */) + " " + cm(
-          "flexlayout__tabset_tabbar_inner_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_ */ + node.getTabLocation()
-        )
+        style: { left: position, width: isTabStretch ? "100%" : "10000px" },
+        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())
       },
-      /* @__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
-      )
-    ),
+      tabs
+    )),
     toolbar
   );
   style2 = layout.styleFont(style2);
@@ -4642,42 +4181,33 @@ 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 || 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}`
-    );
+    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", () => {
@@ -4696,12 +4226,9 @@ var FloatingWindow = (props) => {
           copyStyles(popoutDocument, styles).then(() => {
             setContent(popoutContent);
           });
-          popoutWindow.current.addEventListener(
-            "beforeunload",
-            () => {
-              onCloseWindow(id);
-            }
-          );
+          popoutWindow.current.addEventListener("beforeunload", () => {
+            onCloseWindow(id);
+          });
         }
       });
     } else {
@@ -4759,15 +4286,7 @@ 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
@@ -4814,16 +4333,7 @@ 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",
@@ -4841,62 +4351,15 @@ 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 (
@@ -4904,37 +4367,11 @@ 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
@@ -4946,8 +4383,9 @@ 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;
+var defaultSupportsPopout = isDesktop && !isIEorEdge;
 var Layout = class extends React16.Component {
   constructor(props) {
     super(props);
@@ -5082,14 +4520,7 @@ 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) => {
@@ -5140,11 +4571,7 @@ 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;
         }
@@ -5183,24 +4610,16 @@ 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";
       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
-        );
+        this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
         if (rootdiv) {
           rootdiv.appendChild(this.dragDiv);
         }
@@ -5217,9 +4636,7 @@ var Layout = class extends React16.Component {
     /** @internal */
     this.onDragMove = (event) => {
       if (this.firstMove === false) {
-        const speed = this.props.model._getAttribute(
-          "tabDragSpeed"
-        );
+        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`;
         }
@@ -5244,20 +4661,14 @@ var Layout = class extends React16.Component {
           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;
           if (this.outlineDiv) {
-            this.outlineDiv.className = this.getClassName(
-              dropInfo.className
-            );
+            this.outlineDiv.className = this.getClassName(dropInfo.className);
             dropInfo.rect.positionElement(this.outlineDiv);
             this.outlineDiv.style.visibility = "visible";
           }
@@ -5293,28 +4704,14 @@ 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 });
@@ -5344,16 +4741,10 @@ 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) {
@@ -5448,18 +4839,9 @@ 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 = [];
@@ -5472,21 +4854,8 @@ 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) {
@@ -5509,131 +4878,19 @@ 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) {
@@ -5660,17 +4917,7 @@ 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()) {
@@ -5696,14 +4943,7 @@ 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(
@@ -5744,41 +4984,11 @@ 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()];
@@ -5799,49 +5009,16 @@ 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);
       }
     }
   }
@@ -5852,14 +5029,8 @@ var Layout = class extends React16.Component {
     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
-    );
+    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;
@@ -5868,31 +5039,28 @@ var Layout = class extends React16.Component {
    * Adds a new tab to the given tabset
    * @param tabsetId the id of the tabset where the new tab will be added
    * @param json the json for the new tab node
+   * @returns the added tab node or undefined
    */
   addTabToTabSet(tabsetId, json) {
     const tabsetNode = this.props.model.getNodeById(tabsetId);
     if (tabsetNode !== void 0) {
-      this.doAction(
-        Actions.addNode(json, tabsetId, DockLocation.CENTER, -1)
-      );
+      const node = this.doAction(Actions.addNode(json, tabsetId, DockLocation.CENTER, -1));
+      return node;
     }
+    return void 0;
   }
   /**
    * Adds a new tab to the active tabset (if there is one)
    * @param json the json for the new tab node
+   * @returns the added tab node or undefined
    */
   addTabToActiveTabSet(json) {
     const tabsetNode = this.props.model.getActiveTabset();
     if (tabsetNode !== void 0) {
-      this.doAction(
-        Actions.addNode(
-          json,
-          tabsetNode.getId(),
-          DockLocation.CENTER,
-          -1
-        )
-      );
+      const node = this.doAction(Actions.addNode(json, tabsetNode.getId(), DockLocation.CENTER, -1));
+      return node;
     }
+    return void 0;
   }
   /**
    * Adds a new tab by dragging a labeled panel to the drop location, dragging starts immediatelly
@@ -5903,14 +5071,7 @@ 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
@@ -5934,32 +5095,20 @@ 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);
   }
@@ -5975,22 +5124,10 @@ 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,
@@ -6012,9 +5149,7 @@ var Layout = class extends React16.Component {
     }
     this.dropInfo = dropInfo;
     if (this.outlineDiv) {
-      this.outlineDiv.className = this.getClassName(
-        this.customDrop ? "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */ : dropInfo.className
-      );
+      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 {
@@ -6039,14 +5174,7 @@ 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 */
@@ -6141,9 +5269,7 @@ 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 */
@@ -6177,9 +5303,7 @@ 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;
@@ -6227,17 +5351,11 @@ 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;
   }
@@ -6263,10 +5381,7 @@ 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);
@@ -6321,6 +5436,7 @@ var Model = class _Model {
     attributeDefinitions.add("tabSetEnableDivide", true).setType(Attribute.BOOLEAN);
     attributeDefinitions.add("tabSetEnableMaximize", true).setType(Attribute.BOOLEAN);
     attributeDefinitions.add("tabSetEnableClose", false).setType(Attribute.BOOLEAN);
+    attributeDefinitions.add("tabSetEnableSingleTabStretch", false).setType(Attribute.BOOLEAN);
     attributeDefinitions.add("tabSetAutoSelectTab", true).setType(Attribute.BOOLEAN);
     attributeDefinitions.add("tabSetClassNameTabStrip", void 0).setType(Attribute.STRING);
     attributeDefinitions.add("tabSetClassNameHeader", void 0).setType(Attribute.STRING);
@@ -6454,12 +5570,7 @@ 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;
@@ -6469,12 +5580,7 @@ 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;
@@ -6561,16 +5667,8 @@ 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;
       }
@@ -6635,11 +5733,7 @@ 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;
@@ -6661,9 +5755,7 @@ 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;
@@ -6671,13 +5763,8 @@ 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;
@@ -6721,7 +5808,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;
@@ -6731,36 +5818,11 @@ 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());