@aptre/flex-layout 0.5.13 → 0.6.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/view/Layout.tsx
-import * as React19 from "react";
-import { createPortal as createPortal3 } from "react-dom";
+import { Component as Component2, createRef } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import { createRoot } from "react-dom/client";
 
 // src/Orientation.ts
@@ -245,7 +245,6 @@ var I18nLabel = /* @__PURE__ */ ((I18nLabel2) => {
   I18nLabel2["Move_Tabs"] = "Move tabs(?)";
   I18nLabel2["Maximize"] = "Maximize tab set";
   I18nLabel2["Restore"] = "Restore tab set";
-  I18nLabel2["Popout_Tab"] = "Popout selected tab";
   I18nLabel2["Overflow_Menu_Tooltip"] = "Hidden tabs";
   I18nLabel2["Error_rendering_component"] = "Error rendering component";
   return I18nLabel2;
@@ -274,7 +273,6 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
   CLASSES2["FLEXLAYOUT__BORDER_TOOLBAR"] = "flexlayout__border_toolbar";
   CLASSES2["FLEXLAYOUT__BORDER_TOOLBAR_"] = "flexlayout__border_toolbar_";
   CLASSES2["FLEXLAYOUT__BORDER_TOOLBAR_BUTTON"] = "flexlayout__border_toolbar_button";
-  CLASSES2["FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT"] = "flexlayout__border_toolbar_button-float";
   CLASSES2["FLEXLAYOUT__DRAG_RECT"] = "flexlayout__drag_rect";
   CLASSES2["FLEXLAYOUT__EDGE_RECT"] = "flexlayout__edge_rect";
   CLASSES2["FLEXLAYOUT__EDGE_RECT_TOP"] = "flexlayout__edge_rect_top";
@@ -283,8 +281,6 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
   CLASSES2["FLEXLAYOUT__EDGE_RECT_RIGHT"] = "flexlayout__edge_rect_right";
   CLASSES2["FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER"] = "flexlayout__error_boundary_container";
   CLASSES2["FLEXLAYOUT__ERROR_BOUNDARY_CONTENT"] = "flexlayout__error_boundary_content";
-  CLASSES2["FLEXLAYOUT__FLOATING_WINDOW_CONTENT"] = "flexlayout__floating_window_content";
-  CLASSES2["FLEXLAYOUT__FLOATING_WINDOW_TAB"] = "flexlayout__floating_window_tab";
   CLASSES2["FLEXLAYOUT__LAYOUT"] = "flexlayout__layout";
   CLASSES2["FLEXLAYOUT__LAYOUT_MOVEABLES"] = "flexlayout__layout_moveables";
   CLASSES2["FLEXLAYOUT__LAYOUT_OVERLAY"] = "flexlayout__layout_overlay";
@@ -306,7 +302,6 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
   CLASSES2["FLEXLAYOUT__TAB"] = "flexlayout__tab";
   CLASSES2["FLEXLAYOUT__TAB_POSITION"] = "flexlayout__tab_position";
   CLASSES2["FLEXLAYOUT__TAB_MOVEABLE"] = "flexlayout__tab_moveable";
-  CLASSES2["FLEXLAYOUT__TAB_OVERLAY"] = "flexlayout__tab_overlay";
   CLASSES2["FLEXLAYOUT__TABSET"] = "flexlayout__tabset";
   CLASSES2["FLEXLAYOUT__TABSET_CONTAINER"] = "flexlayout__tabset_container";
   CLASSES2["FLEXLAYOUT__TABSET_HEADER"] = "flexlayout__tabset_header";
@@ -334,13 +329,10 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
   CLASSES2["FLEXLAYOUT__TAB_BUTTON_TEXTBOX"] = "flexlayout__tab_button_textbox";
   CLASSES2["FLEXLAYOUT__TAB_BUTTON_TRAILING"] = "flexlayout__tab_button_trailing";
   CLASSES2["FLEXLAYOUT__TAB_BUTTON_STAMP"] = "flexlayout__tab_button_stamp";
-  CLASSES2["FLEXLAYOUT__TAB_FLOATING"] = "flexlayout__tab_floating";
-  CLASSES2["FLEXLAYOUT__TAB_FLOATING_INNER"] = "flexlayout__tab_floating_inner";
   CLASSES2["FLEXLAYOUT__TAB_TOOLBAR"] = "flexlayout__tab_toolbar";
   CLASSES2["FLEXLAYOUT__TAB_TOOLBAR_BUTTON"] = "flexlayout__tab_toolbar_button";
   CLASSES2["FLEXLAYOUT__TAB_TOOLBAR_ICON"] = "flexlayout__tab_toolbar_icon";
   CLASSES2["FLEXLAYOUT__TAB_TOOLBAR_BUTTON_"] = "flexlayout__tab_toolbar_button-";
-  CLASSES2["FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT"] = "flexlayout__tab_toolbar_button-float";
   CLASSES2["FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER"] = "flexlayout__tab_toolbar_sticky_buttons_container";
   CLASSES2["FLEXLAYOUT__TAB_TOOLBAR_BUTTON_CLOSE"] = "flexlayout__tab_toolbar_button-close";
   CLASSES2["FLEXLAYOUT__POPUP_MENU_CONTAINER"] = "flexlayout__popup_menu_container";
@@ -362,11 +354,7 @@ var ActionType = {
   ADJUST_BORDER_SPLIT: "FlexLayout_AdjustBorderSplit",
   MAXIMIZE_TOGGLE: "FlexLayout_MaximizeToggle",
   UPDATE_MODEL_ATTRIBUTES: "FlexLayout_UpdateModelAttributes",
-  UPDATE_NODE_ATTRIBUTES: "FlexLayout_UpdateNodeAttributes",
-  POPOUT_TAB: "FlexLayout_PopoutTab",
-  POPOUT_TABSET: "FlexLayout_PopoutTabset",
-  CLOSE_WINDOW: "FlexLayout_CloseWindow",
-  CREATE_WINDOW: "FlexLayout_CreateWindow"
+  UPDATE_NODE_ATTRIBUTES: "FlexLayout_UpdateNodeAttributes"
 };
 function createAction(type, data) {
   return { type, data };
@@ -386,10 +374,6 @@ var Actions = class {
   static MAXIMIZE_TOGGLE = ActionType.MAXIMIZE_TOGGLE;
   static UPDATE_MODEL_ATTRIBUTES = ActionType.UPDATE_MODEL_ATTRIBUTES;
   static UPDATE_NODE_ATTRIBUTES = ActionType.UPDATE_NODE_ATTRIBUTES;
-  static POPOUT_TAB = ActionType.POPOUT_TAB;
-  static POPOUT_TABSET = ActionType.POPOUT_TABSET;
-  static CLOSE_WINDOW = ActionType.CLOSE_WINDOW;
-  static CREATE_WINDOW = ActionType.CREATE_WINDOW;
   /**
    * Adds a tab node to the given tabset node
    * @param json the json for the new tab node e.g {type:"tab", component:"table"}
@@ -504,39 +488,6 @@ var Actions = class {
   static updateNodeAttributes(nodeId, attributes) {
     return createAction(ActionType.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });
   }
-  /**
-   * Pops out the given tab node into a new browser window
-   * @param nodeId the tab node to popout
-   * @returns
-   */
-  static popoutTab(nodeId) {
-    return createAction(ActionType.POPOUT_TAB, { node: nodeId });
-  }
-  /**
-   * Pops out the given tab set node into a new browser window
-   * @param nodeId the tab set node to popout
-   * @returns
-   */
-  static popoutTabset(nodeId) {
-    return createAction(ActionType.POPOUT_TABSET, { node: nodeId });
-  }
-  /**
-   * Closes the popout window
-   * @param windowId the id of the popout window to close
-   * @returns
-   */
-  static closeWindow(windowId) {
-    return createAction(ActionType.CLOSE_WINDOW, { windowId });
-  }
-  /**
-   * Creates a new empty popout window with the given layout
-   * @param layout the json layout for the new window
-   * @param rect the window rectangle in screen coordinates
-   * @returns
-   */
-  static createWindow(layout, rect) {
-    return createAction(ActionType.CREATE_WINDOW, { layout, rect });
-  }
 };
 
 // src/Attribute.ts
@@ -1025,9 +976,6 @@ var Node = class {
   }
 };
 
-// src/view/Utils.tsx
-import * as React from "react";
-
 // src/model/TabNode.ts
 var TabNode = class _TabNode extends Node {
   static TYPE = "tab";
@@ -1077,18 +1025,8 @@ var TabNode = class _TabNode extends Node {
     return this.getAttr("component");
   }
   getWindowId() {
-    if (this.parent instanceof TabSetNode) {
-      return this.parent.getWindowId();
-    }
     return Model.MAIN_WINDOW_ID;
   }
-  getWindow() {
-    const layoutWindow = this.model.getwindowsMap().get(this.getWindowId());
-    if (layoutWindow) {
-      return layoutWindow.window;
-    }
-    return void 0;
-  }
   /**
    * Returns the config attribute that can be used to store node specific data that
    * WILL be saved to the json. The config attribute should be changed via the action Actions.updateNodeAttributes rather
@@ -1106,9 +1044,6 @@ var TabNode = class _TabNode extends Node {
   getExtraData() {
     return this.extra;
   }
-  isPoppedOut() {
-    return this.getWindowId() !== Model.MAIN_WINDOW_ID;
-  }
   isSelected() {
     return this.getParent().getSelectedNode() === this;
   }
@@ -1121,24 +1056,12 @@ var TabNode = class _TabNode extends Node {
   getCloseType() {
     return this.getAttr("closeType");
   }
-  isEnablePopout() {
-    return this.getAttr("enablePopout");
-  }
-  isEnablePopoutIcon() {
-    return this.getAttr("enablePopoutIcon");
-  }
-  isEnablePopoutOverlay() {
-    return this.getAttr("enablePopoutOverlay");
-  }
   isEnableDrag() {
     return this.getAttr("enableDrag");
   }
   isEnableRename() {
     return this.getAttr("enableRename");
   }
-  isEnableWindowReMount() {
-    return this.getAttr("enableWindowReMount");
-  }
   getClassName() {
     return this.getAttr("className");
   }
@@ -1304,7 +1227,6 @@ var TabNode = class _TabNode extends Node {
     attributeDefinitions.add("component", void 0).setType(Attribute.STRING).setDescription(`string identifying which component to run (for factory)`);
     attributeDefinitions.add("config", void 0).setType("any").setDescription(`a place to hold json config for the hosted component`);
     attributeDefinitions.add("tabsetClassName", void 0).setType(Attribute.STRING).setDescription(`class applied to parent tabset when this is the only tab and it is stretched to fill the tabset`);
-    attributeDefinitions.add("enableWindowReMount", false).setType(Attribute.BOOLEAN).setDescription(`if enabled the tab will re-mount when popped out/in`);
     attributeDefinitions.addInherited("enableClose", "tabEnableClose").setType(Attribute.BOOLEAN).setDescription(`allow user to close tab via close button`);
     attributeDefinitions.addInherited("closeType", "tabCloseType").setType("ICloseType").setDescription(`see values in ICloseType`);
     attributeDefinitions.addInherited("enableDrag", "tabEnableDrag").setType(Attribute.BOOLEAN).setDescription(`allow user to drag tab to new location`);
@@ -1313,12 +1235,6 @@ var TabNode = class _TabNode extends Node {
     attributeDefinitions.addInherited("contentClassName", "tabContentClassName").setType(Attribute.STRING).setDescription(`class applied to tab content`);
     attributeDefinitions.addInherited("icon", "tabIcon").setType(Attribute.STRING).setDescription(`the tab icon`);
     attributeDefinitions.addInherited("enableRenderOnDemand", "tabEnableRenderOnDemand").setType(Attribute.BOOLEAN).setDescription(`whether to avoid rendering component until tab is visible`);
-    attributeDefinitions.addInherited("enablePopout", "tabEnablePopout").setType(Attribute.BOOLEAN).setAlias("enableFloat").setDescription(`enable popout (in popout capable browser)`);
-    attributeDefinitions.addInherited("enablePopoutIcon", "tabEnablePopoutIcon").setType(Attribute.BOOLEAN).setDescription(`whether to show the popout icon in the tabset header if this tab enables popouts`);
-    attributeDefinitions.addInherited("enablePopoutOverlay", "tabEnablePopoutOverlay").setType(Attribute.BOOLEAN).setDescription(
-      `if this tab will not work correctly in a popout window when the main window is backgrounded (inactive)
-            then enabling this option will gray out this tab`
-    );
     attributeDefinitions.addInherited("borderWidth", "tabBorderWidth").setType(Attribute.NUMBER).setDescription(`width when added to border, -1 will use border size`);
     attributeDefinitions.addInherited("borderHeight", "tabBorderHeight").setType(Attribute.NUMBER).setDescription(`height when added to border, -1 will use border size`);
     attributeDefinitions.addInherited("minWidth", "tabMinWidth").setType(Attribute.NUMBER).setDescription(`the min width of this tab`);
@@ -1329,133 +1245,6 @@ var TabNode = class _TabNode extends Node {
   }
 };
 
-// src/model/ICloseType.ts
-var ICloseType = /* @__PURE__ */ ((ICloseType2) => {
-  ICloseType2[ICloseType2["Visible"] = 1] = "Visible";
-  ICloseType2[ICloseType2["Always"] = 2] = "Always";
-  ICloseType2[ICloseType2["Selected"] = 3] = "Selected";
-  return ICloseType2;
-})(ICloseType || {});
-
-// src/view/Utils.tsx
-function isDesktop() {
-  const desktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
-  return desktop;
-}
-function getRenderStateEx(layout, node, iconAngle) {
-  let leadingContent = void 0;
-  const titleContent = node.getName();
-  const name = node.getName();
-  if (iconAngle === void 0) {
-    iconAngle = 0;
-  }
-  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" });
-    } else {
-      leadingContent = /* @__PURE__ */ React.createElement("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
-    }
-  }
-  const buttons = [];
-  const renderState = { leading: leadingContent, content: titleContent, name, buttons };
-  layout.customizeTab(node, renderState);
-  node.setRenderedName(renderState.name);
-  return renderState;
-}
-function isAuxMouseEvent(event) {
-  let auxEvent = false;
-  if (event.nativeEvent instanceof MouseEvent) {
-    if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
-      auxEvent = true;
-    }
-  }
-  return auxEvent;
-}
-function enablePointerOnIFrames(enable, currentDocument) {
-  const iframes = [...getElementsByTagName("iframe", currentDocument), ...getElementsByTagName("webview", currentDocument)];
-  for (const iframe of iframes) {
-    iframe.style.pointerEvents = enable ? "auto" : "none";
-  }
-}
-function getElementsByTagName(tag, currentDocument) {
-  return [...currentDocument.getElementsByTagName(tag)];
-}
-function startDrag(doc, event, drag, dragEnd, dragCancel) {
-  event.preventDefault();
-  const pointerMove = (ev) => {
-    ev.preventDefault();
-    drag(ev.clientX, ev.clientY);
-  };
-  const pointerCancel = (ev) => {
-    ev.preventDefault();
-    dragCancel();
-  };
-  const pointerUp = () => {
-    doc.removeEventListener("pointermove", pointerMove);
-    doc.removeEventListener("pointerup", pointerUp);
-    doc.removeEventListener("pointercancel", pointerCancel);
-    dragEnd();
-  };
-  doc.addEventListener("pointermove", pointerMove);
-  doc.addEventListener("pointerup", pointerUp);
-  doc.addEventListener("pointercancel", pointerCancel);
-}
-function canDockToWindow(node) {
-  if (node instanceof TabNode) {
-    return node.isEnablePopout();
-  } else if (node instanceof TabSetNode) {
-    for (const child of node.getChildren()) {
-      if (child.isEnablePopout() === false) {
-        return false;
-      }
-    }
-    return true;
-  }
-  return false;
-}
-function keepOnScreen(rect) {
-  rect.snap(10);
-  const availableScreenWidth = window.screen.availWidth;
-  const availableScreenHeight = window.screen.availHeight;
-  if (rect.x + rect.width > availableScreenWidth || rect.y + rect.height > availableScreenHeight) {
-    rect.x = Math.max(0, Math.min(rect.x, availableScreenWidth - rect.width));
-    rect.y = Math.max(0, Math.min(rect.y, availableScreenHeight - rect.height));
-  }
-  return rect;
-}
-function isOnScreen(rect) {
-  const availableScreenWidth = window.screen.availWidth;
-  const availableScreenHeight = window.screen.availHeight;
-  return rect.x >= 0 && rect.getRight() <= availableScreenWidth && rect.y >= 0 || rect.getBottom() <= availableScreenHeight;
-}
-function copyInlineStyles(source, target) {
-  const sourceStyle = source.getAttribute("style");
-  const targetStyle = target.getAttribute("style");
-  if (sourceStyle === targetStyle) return false;
-  if (sourceStyle) {
-    target.setAttribute("style", sourceStyle);
-  } else {
-    target.removeAttribute("style");
-  }
-  return true;
-}
-function isSafari() {
-  const userAgent = navigator.userAgent;
-  return userAgent.includes("Safari") && !userAgent.includes("Chrome") && !userAgent.includes("Chromium");
-}
-function isTabClosable(node, selected) {
-  const closeType = node.getCloseType();
-  if (selected || closeType === 2 /* Always */) {
-    return true;
-  }
-  if (closeType === 1 /* Visible */) {
-    if (window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
-      return true;
-    }
-  }
-  return false;
-}
-
 // src/model/Utils.ts
 function adjustSelectedIndex(parent, removedIndex) {
   if (parent !== void 0 && (parent instanceof TabSetNode || parent instanceof BorderNode)) {
@@ -1483,7 +1272,7 @@ function randomUUID() {
 var TabSetNode = class _TabSetNode extends Node {
   static TYPE = "tabset";
   /** @internal */
-  static fromJson(json, model, layoutWindow) {
+  static fromJson(json, model) {
     const newLayoutNode = new _TabSetNode(model, json);
     if (json.children != null) {
       for (const jsonChild of json.children) {
@@ -1495,10 +1284,10 @@ var TabSetNode = class _TabSetNode extends Node {
       newLayoutNode.setSelected(-1);
     }
     if (json.maximized && json.maximized === true) {
-      layoutWindow.maximizedTabSet = newLayoutNode;
+      model.setMaximizedTabset(newLayoutNode);
     }
     if (json.active && json.active === true) {
-      layoutWindow.activeTabSet = newLayoutNode;
+      model.setActiveTabset(newLayoutNode);
     }
     return newLayoutNode;
   }
@@ -1565,9 +1354,8 @@ var TabSetNode = class _TabSetNode extends Node {
   getMinSize(orientation) {
     if (orientation === Orientation.HORZ) {
       return this.getMinWidth();
-    } else {
-      return this.getMinHeight();
     }
+    return this.getMinHeight();
   }
   getAttrMaxWidth() {
     return this.getAttr("maxWidth");
@@ -1585,9 +1373,8 @@ var TabSetNode = class _TabSetNode extends Node {
   getMaxSize(orientation) {
     if (orientation === Orientation.HORZ) {
       return this.getMaxWidth();
-    } else {
-      return this.getMaxHeight();
     }
+    return this.getMaxHeight();
   }
   /**
    * Returns the config attribute that can be used to store node specific data that
@@ -1600,10 +1387,10 @@ var TabSetNode = class _TabSetNode extends Node {
     return this.attributes.config;
   }
   isMaximized() {
-    return this.model.getMaximizedTabset(this.getWindowId()) === this;
+    return this.model.getMaximizedTabset() === this;
   }
   isActive() {
-    return this.model.getActiveTabset(this.getWindowId()) === this;
+    return this.model.getActiveTabset() === this;
   }
   isEnableDeleteWhenEmpty() {
     return this.getAttr("enableDeleteWhenEmpty");
@@ -1641,6 +1428,9 @@ var TabSetNode = class _TabSetNode extends Node {
   getTabLocation() {
     return this.getAttr("tabLocation");
   }
+  getWindowId() {
+    return Model.MAIN_WINDOW_ID;
+  }
   toJson() {
     const json = {};
     _TabSetNode.attributeDefinitions.toJson(json, this.attributes);
@@ -1672,10 +1462,10 @@ var TabSetNode = class _TabSetNode extends Node {
   /** @internal */
   canMaximize() {
     if (this.isEnableMaximize()) {
-      if (this.getModel().getMaximizedTabset(this.getWindowId()) === this) {
+      if (this.getModel().getMaximizedTabset() === this) {
         return true;
       }
-      if (this.getParent() === this.getModel().getRoot(this.getWindowId()) && this.getModel().getRoot(this.getWindowId()).getChildren().length === 1) {
+      if (this.getParent() === this.getModel().getRoot() && this.getModel().getRoot().getChildren().length === 1) {
         return false;
       }
       return true;
@@ -1710,9 +1500,6 @@ var TabSetNode = class _TabSetNode extends Node {
   setSelected(index) {
     this.attributes.selected = index;
   }
-  getWindowId() {
-    return this.parent.getWindowId();
-  }
   /** @internal */
   canDrop(dragNode, x, y) {
     let dropInfo;
@@ -1720,11 +1507,9 @@ var TabSetNode = class _TabSetNode extends Node {
       const dockLocation = DockLocation.CENTER;
       const outlineRect = this.tabStripRect;
       dropInfo = new DropInfo(this, outlineRect, dockLocation, -1, "flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
-    } else if (this.getWindowId() !== Model.MAIN_WINDOW_ID && !canDockToWindow(dragNode)) {
-      return void 0;
     } else if (this.contentRect.contains(x, y)) {
       let dockLocation = DockLocation.CENTER;
-      if (this.model.getMaximizedTabset(this.parent.getWindowId()) === void 0) {
+      if (this.model.getMaximizedTabset() === void 0) {
         dockLocation = DockLocation.getLocation(this.contentRect, x, y);
       }
       const outlineRect = dockLocation.getDockRect(this.rect);
@@ -1744,7 +1529,7 @@ var TabSetNode = class _TabSetNode extends Node {
         yy = r.y;
         h = r.height;
         let p = this.tabStripRect.x;
-        let childCenter = 0;
+        let childCenter;
         for (let i = 0; i < this.children.length; i++) {
           child = this.children[i];
           r = child.getTabRect();
@@ -1789,7 +1574,7 @@ var TabSetNode = class _TabSetNode extends Node {
     if (this === dragNode) {
       return;
     }
-    let dragParent = dragNode.getParent();
+    const dragParent = dragNode.getParent();
     let fromIndex = 0;
     if (dragParent !== void 0) {
       fromIndex = dragParent.removeChild(dragNode);
@@ -1829,7 +1614,7 @@ var TabSetNode = class _TabSetNode extends Node {
           this.setSelected(0);
         }
       }
-      this.model.setActiveTabset(this, this.parent.getWindowId());
+      this.model.setActiveTabset(this);
     } else {
       let moveNode = dragNode;
       if (dragNode instanceof TabNode) {
@@ -1837,11 +1622,10 @@ var TabSetNode = class _TabSetNode extends Node {
         const attrs = callback ? callback(dragNode) : {};
         moveNode = new _TabSetNode(this.model, attrs);
         moveNode.addChild(dragNode);
-        dragParent = moveNode;
       } else if (dragNode instanceof RowNode) {
         const parent = this.getParent();
         if (dragNode.getOrientation() === parent.getOrientation() && (location.getOrientation() === parent.getOrientation() || location === DockLocation.CENTER)) {
-          const node = new RowNode(this.model, this.getWindowId(), {});
+          const node = new RowNode(this.model, {});
           node.addChild(dragNode);
           moveNode = node;
         }
@@ -1855,7 +1639,7 @@ var TabSetNode = class _TabSetNode extends Node {
         this.setWeight(this.getWeight() / 2);
         parentRow.addChild(moveNode, pos + dockLocation.indexPlus);
       } else {
-        const newRow = new RowNode(this.model, this.getWindowId(), {});
+        const newRow = new RowNode(this.model, {});
         newRow.setWeight(this.getWeight());
         newRow.addChild(this);
         this.setWeight(50);
@@ -1865,7 +1649,7 @@ var TabSetNode = class _TabSetNode extends Node {
         parentRow.addChild(newRow, pos);
       }
       if (moveNode instanceof _TabSetNode) {
-        this.model.setActiveTabset(moveNode, this.getWindowId());
+        this.model.setActiveTabset(moveNode);
       }
     }
     this.model.tidy();
@@ -1916,15 +1700,15 @@ var TabSetNode = class _TabSetNode extends Node {
 var RowNode = class _RowNode extends Node {
   static TYPE = "row";
   /** @internal */
-  static fromJson(json, model, layoutWindow) {
-    const newLayoutNode = new _RowNode(model, layoutWindow.windowId, json);
+  static fromJson(json, model) {
+    const newLayoutNode = new _RowNode(model, json);
     if (json.children != null) {
       for (const jsonChild of json.children) {
         if (jsonChild.type === TabSetNode.TYPE) {
-          const child = TabSetNode.fromJson(jsonChild, model, layoutWindow);
+          const child = TabSetNode.fromJson(jsonChild, model);
           newLayoutNode.addChild(child);
         } else {
-          const child = _RowNode.fromJson(jsonChild, model, layoutWindow);
+          const child = _RowNode.fromJson(jsonChild, model);
           newLayoutNode.addChild(child);
         }
       }
@@ -1934,8 +1718,6 @@ var RowNode = class _RowNode extends Node {
   /** @internal */
   static attributeDefinitions = _RowNode.createAttributeDefinitions();
   /** @internal */
-  windowId;
-  /** @internal */
   minHeight;
   /** @internal */
   minWidth;
@@ -1944,9 +1726,8 @@ var RowNode = class _RowNode extends Node {
   /** @internal */
   maxWidth;
   /** @internal */
-  constructor(model, windowId, json) {
+  constructor(model, json) {
     super(model);
-    this.windowId = windowId;
     this.minHeight = DefaultMin;
     this.minWidth = DefaultMin;
     this.maxHeight = DefaultMax;
@@ -1969,10 +1750,7 @@ var RowNode = class _RowNode extends Node {
   }
   /** @internal */
   getWindowId() {
-    return this.windowId;
-  }
-  setWindowId(windowId) {
-    this.windowId = windowId;
+    return Model.MAIN_WINDOW_ID;
   }
   /** @internal */
   setWeight(weight) {
@@ -2099,9 +1877,8 @@ var RowNode = class _RowNode extends Node {
   getMinSize(orientation) {
     if (orientation === Orientation.HORZ) {
       return this.getMinWidth();
-    } else {
-      return this.getMinHeight();
     }
+    return this.getMinHeight();
   }
   /** @internal */
   getMinWidth() {
@@ -2115,9 +1892,8 @@ var RowNode = class _RowNode extends Node {
   getMaxSize(orientation) {
     if (orientation === Orientation.HORZ) {
       return this.getMaxWidth();
-    } else {
-      return this.getMaxHeight();
     }
+    return this.getMaxHeight();
   }
   /** @internal */
   getMaxWidth() {
@@ -2194,8 +1970,8 @@ var RowNode = class _RowNode extends Node {
       } else if (child instanceof TabSetNode && child.getChildren().length === 0) {
         if (child.isEnableDeleteWhenEmpty()) {
           this.removeChild(child);
-          if (child === this.model.getMaximizedTabset(this.windowId)) {
-            this.model.setMaximizedTabset(void 0, this.windowId);
+          if (child === this.model.getMaximizedTabset()) {
+            this.model.setMaximizedTabset(void 0);
           }
         } else {
           i++;
@@ -2204,12 +1980,12 @@ var RowNode = class _RowNode extends Node {
         i++;
       }
     }
-    if (this === this.model.getRoot(this.windowId) && this.children.length === 0) {
+    if (this === this.model.getRoot() && this.children.length === 0) {
       const callback = this.model.getOnCreateTabSet();
       const baseAttrs = callback ? callback() : {};
       const attrs = { ...baseAttrs, selected: -1 };
       const child = new TabSetNode(this.model, attrs);
-      this.model.setActiveTabset(child, this.windowId);
+      this.model.setActiveTabset(child);
       this.addChild(child);
     }
   }
@@ -2222,9 +1998,6 @@ var RowNode = class _RowNode extends Node {
     const margin = 10;
     const half = 50;
     let dropInfo;
-    if (this.getWindowId() !== Model.MAIN_WINDOW_ID && !canDockToWindow(dragNode)) {
-      return void 0;
-    }
     if (this.model.isEnableEdgeDock() && this.parent === void 0) {
       if (x < this.rect.x + margin && yy > h / 2 - half && yy < h / 2 + half) {
         const dockLocation = DockLocation.LEFT;
@@ -2274,7 +2047,7 @@ var RowNode = class _RowNode extends Node {
     if (dragNode instanceof TabSetNode || dragNode instanceof _RowNode) {
       node = dragNode;
       if (node instanceof _RowNode && node.getOrientation() === this.getOrientation() && (location.getOrientation() === this.getOrientation() || location === DockLocation.CENTER)) {
-        node = new _RowNode(this.model, this.windowId, {});
+        node = new _RowNode(this.model, {});
         node.addChild(dragNode);
       }
     } else {
@@ -2302,8 +2075,8 @@ var RowNode = class _RowNode extends Node {
     } else if (horz && dockLocation === DockLocation.RIGHT || !horz && dockLocation === DockLocation.BOTTOM) {
       this.addChild(node);
     } else if (horz && dockLocation === DockLocation.TOP || !horz && dockLocation === DockLocation.LEFT) {
-      const vrow = new _RowNode(this.model, this.windowId, {});
-      const hrow = new _RowNode(this.model, this.windowId, {});
+      const vrow = new _RowNode(this.model, {});
+      const hrow = new _RowNode(this.model, {});
       hrow.setWeight(75);
       node.setWeight(25);
       for (const child of this.children) {
@@ -2314,8 +2087,8 @@ var RowNode = class _RowNode extends Node {
       vrow.addChild(hrow);
       this.addChild(vrow);
     } else if (horz && dockLocation === DockLocation.BOTTOM || !horz && dockLocation === DockLocation.RIGHT) {
-      const vrow = new _RowNode(this.model, this.windowId, {});
-      const hrow = new _RowNode(this.model, this.windowId, {});
+      const vrow = new _RowNode(this.model, {});
+      const hrow = new _RowNode(this.model, {});
       hrow.setWeight(75);
       node.setWeight(25);
       for (const child of this.children) {
@@ -2327,7 +2100,7 @@ var RowNode = class _RowNode extends Node {
       this.addChild(vrow);
     }
     if (node instanceof TabSetNode) {
-      this.model.setActiveTabset(node, this.windowId);
+      this.model.setActiveTabset(node);
     }
     this.model.tidy();
   }
@@ -2372,93 +2145,6 @@ var RowNode = class _RowNode extends Node {
   }
 };
 
-// src/model/LayoutWindow.ts
-var LayoutWindow = class _LayoutWindow {
-  _windowId;
-  _layout;
-  _rect;
-  _window;
-  _root;
-  _maximizedTabSet;
-  _activeTabSet;
-  _toScreenRectFunction;
-  constructor(windowId, rect) {
-    this._windowId = windowId;
-    this._rect = rect;
-    this._toScreenRectFunction = (r) => r;
-  }
-  visitNodes(fn) {
-    this.root.forEachNode(fn, 0);
-  }
-  get windowId() {
-    return this._windowId;
-  }
-  get rect() {
-    return this._rect;
-  }
-  get layout() {
-    return this._layout;
-  }
-  get window() {
-    return this._window;
-  }
-  get root() {
-    return this._root;
-  }
-  get maximizedTabSet() {
-    return this._maximizedTabSet;
-  }
-  get activeTabSet() {
-    return this._activeTabSet;
-  }
-  /** @internal */
-  set rect(value) {
-    this._rect = value;
-  }
-  /** @internal */
-  set layout(value) {
-    this._layout = value;
-  }
-  /** @internal */
-  set window(value) {
-    this._window = value;
-  }
-  /** @internal */
-  set root(value) {
-    this._root = value;
-  }
-  /** @internal */
-  set maximizedTabSet(value) {
-    this._maximizedTabSet = value;
-  }
-  /** @internal */
-  set activeTabSet(value) {
-    this._activeTabSet = value;
-  }
-  /** @internal */
-  get toScreenRectFunction() {
-    return this._toScreenRectFunction;
-  }
-  /** @internal */
-  set toScreenRectFunction(value) {
-    this._toScreenRectFunction = value;
-  }
-  toJson() {
-    if (this._window && this._window.screenTop > -1e4) {
-      this.rect = new Rect(this._window.screenLeft, this._window.screenTop, this._window.outerWidth, this._window.outerHeight);
-    }
-    return { layout: this.root.toJson(), rect: this.rect.toJson() };
-  }
-  static fromJson(windowJson, model, windowId) {
-    const count = model.getwindowsMap().size;
-    let rect = windowJson.rect ? Rect.fromJson(windowJson.rect) : new Rect(50 + 50 * count, 50 + 50 * count, 600, 400);
-    rect = keepOnScreen(rect);
-    const layoutWindow = new _LayoutWindow(windowId, rect);
-    layoutWindow.root = RowNode.fromJson(windowJson.layout, model, layoutWindow);
-    return layoutWindow;
-  }
-};
-
 // src/model/Model.ts
 var DefaultMin = 0;
 var DefaultMax = 99999;
@@ -2479,9 +2165,13 @@ var Model = class _Model {
   /** @internal */
   onCreateTabSet;
   /** @internal */
-  windows;
+  _root;
+  /** @internal */
+  _maximizedTabSet;
+  /** @internal */
+  _activeTabSet;
   /** @internal */
-  rootWindow;
+  _layout;
   /**
    * 'private' constructor. Use the static method Model.fromJson(json) to create a model
    *  @internal
@@ -2490,16 +2180,13 @@ var Model = class _Model {
     this.attributes = {};
     this.idMap = /* @__PURE__ */ new Map();
     this.borders = new BorderSet(this);
-    this.windows = /* @__PURE__ */ new Map();
-    this.rootWindow = new LayoutWindow(_Model.MAIN_WINDOW_ID, Rect.empty());
-    this.windows.set(_Model.MAIN_WINDOW_ID, this.rootWindow);
     this.changeListeners = [];
   }
   /**
    * Update the node tree by performing the given action,
    * Actions should be generated via static methods on the Actions class
    * @param action the action to perform
-   * @returns added Node for Actions.addNode, windowId for createWindow
+   * @returns added Node for Actions.addNode
    */
   doAction(action) {
     let returnVal = void 0;
@@ -2516,16 +2203,14 @@ var Model = class _Model {
       case Actions.MOVE_NODE: {
         const fromNode = this.idMap.get(action.data.fromNode);
         if (fromNode instanceof TabNode || fromNode instanceof TabSetNode || fromNode instanceof RowNode) {
-          if (fromNode === this.getMaximizedTabset(fromNode.getWindowId())) {
-            const fromWindow = this.windows.get(fromNode.getWindowId());
-            fromWindow.maximizedTabSet = void 0;
+          if (fromNode === this.getMaximizedTabset()) {
+            this._maximizedTabSet = void 0;
           }
           const toNode = this.idMap.get(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);
           }
         }
-        this.removeEmptyWindows();
         break;
       }
       case Actions.DELETE_TAB: {
@@ -2533,7 +2218,6 @@ var Model = class _Model {
         if (node instanceof TabNode) {
           node.delete();
         }
-        this.removeEmptyWindows();
         break;
       }
       case Actions.DELETE_TABSET: {
@@ -2551,77 +2235,6 @@ var Model = class _Model {
           }
           this.tidy();
         }
-        this.removeEmptyWindows();
-        break;
-      }
-      case Actions.POPOUT_TABSET: {
-        const node = this.idMap.get(action.data.node);
-        if (node instanceof TabSetNode) {
-          const isMaximized = node.isMaximized();
-          const oldLayoutWindow = this.windows.get(node.getWindowId());
-          const windowId = randomUUID();
-          const layoutWindow = new LayoutWindow(windowId, oldLayoutWindow.toScreenRectFunction(node.getRect()));
-          const json = {
-            type: "row",
-            children: []
-          };
-          const row = RowNode.fromJson(json, this, layoutWindow);
-          layoutWindow.root = row;
-          this.windows.set(windowId, layoutWindow);
-          row.drop(node, DockLocation.CENTER, 0);
-          if (isMaximized) {
-            this.rootWindow.maximizedTabSet = void 0;
-          }
-        }
-        this.removeEmptyWindows();
-        break;
-      }
-      case Actions.POPOUT_TAB: {
-        const node = this.idMap.get(action.data.node);
-        if (node instanceof TabNode) {
-          const windowId = randomUUID();
-          let r = Rect.empty();
-          if (node.getParent() instanceof TabSetNode) {
-            r = node.getParent().getRect();
-          } else {
-            r = node.getParent().getContentRect();
-          }
-          const oldLayoutWindow = this.windows.get(node.getWindowId());
-          const layoutWindow = new LayoutWindow(windowId, oldLayoutWindow.toScreenRectFunction(r));
-          const tabsetId = randomUUID();
-          const json = {
-            type: "row",
-            children: [{ type: "tabset", id: tabsetId, children: [] }]
-          };
-          const row = RowNode.fromJson(json, this, layoutWindow);
-          layoutWindow.root = row;
-          this.windows.set(windowId, layoutWindow);
-          const tabset = this.idMap.get(tabsetId);
-          tabset.drop(node, DockLocation.CENTER, 0, true);
-        }
-        this.removeEmptyWindows();
-        break;
-      }
-      case Actions.CLOSE_WINDOW: {
-        const window2 = this.windows.get(action.data.windowId);
-        if (window2) {
-          this.rootWindow.root?.drop(window2.root, DockLocation.CENTER, -1);
-          this.rootWindow.visitNodes((node, _level) => {
-            if (node instanceof RowNode) {
-              node.setWindowId(_Model.MAIN_WINDOW_ID);
-            }
-          });
-          this.windows.delete(action.data.windowId);
-        }
-        break;
-      }
-      case Actions.CREATE_WINDOW: {
-        const windowId = randomUUID();
-        const layoutWindow = new LayoutWindow(windowId, Rect.fromJson(action.data.rect));
-        const row = RowNode.fromJson(action.data.layout, this, layoutWindow);
-        layoutWindow.root = row;
-        this.windows.set(windowId, layoutWindow);
-        returnVal = windowId;
         break;
       }
       case Actions.RENAME_TAB: {
@@ -2633,8 +2246,6 @@ var Model = class _Model {
       }
       case Actions.SELECT_TAB: {
         const tabNode = this.idMap.get(action.data.tabNode);
-        const windowId = action.data.windowId ? action.data.windowId : _Model.MAIN_WINDOW_ID;
-        const window2 = this.windows.get(windowId);
         if (tabNode instanceof TabNode) {
           const parent = tabNode.getParent();
           const pos = parent.getChildren().indexOf(tabNode);
@@ -2648,20 +2259,18 @@ var Model = class _Model {
             if (parent.getSelected() !== pos) {
               parent.setSelected(pos);
             }
-            window2.activeTabSet = parent;
+            this._activeTabSet = parent;
           }
         }
         break;
       }
       case Actions.SET_ACTIVE_TABSET: {
-        const windowId = action.data.windowId ? action.data.windowId : _Model.MAIN_WINDOW_ID;
-        const window2 = this.windows.get(windowId);
         if (action.data.tabsetNode === void 0) {
-          window2.activeTabSet = void 0;
+          this._activeTabSet = void 0;
         } else {
           const tabsetNode = this.idMap.get(action.data.tabsetNode);
           if (tabsetNode instanceof TabSetNode) {
-            window2.activeTabSet = tabsetNode;
+            this._activeTabSet = tabsetNode;
           }
         }
         break;
@@ -2683,15 +2292,13 @@ var Model = class _Model {
         break;
       }
       case Actions.MAXIMIZE_TOGGLE: {
-        const windowId = action.data.windowId ? action.data.windowId : _Model.MAIN_WINDOW_ID;
-        const window2 = this.windows.get(windowId);
         const node = this.idMap.get(action.data.node);
         if (node instanceof TabSetNode) {
-          if (node === window2.maximizedTabSet) {
-            window2.maximizedTabSet = void 0;
+          if (node === this._maximizedTabSet) {
+            this._maximizedTabSet = void 0;
           } else {
-            window2.maximizedTabSet = node;
-            window2.activeTabSet = node;
+            this._maximizedTabSet = node;
+            this._activeTabSet = node;
           }
         }
         break;
@@ -2717,26 +2324,24 @@ var Model = class _Model {
   /**
    * Get the currently active tabset node
    */
-  getActiveTabset(windowId = _Model.MAIN_WINDOW_ID) {
-    const window2 = this.windows.get(windowId);
-    if (window2 && window2.activeTabSet && this.getNodeById(window2.activeTabSet.getId())) {
-      return window2.activeTabSet;
-    } else {
-      return void 0;
+  getActiveTabset(_windowId) {
+    if (this._activeTabSet && this.getNodeById(this._activeTabSet.getId())) {
+      return this._activeTabSet;
     }
+    return void 0;
   }
   /**
    * Get the currently maximized tabset node
    */
-  getMaximizedTabset(windowId = _Model.MAIN_WINDOW_ID) {
-    return this.windows.get(windowId).maximizedTabSet;
+  getMaximizedTabset(_windowId) {
+    return this._maximizedTabSet;
   }
   /**
    * Gets the root RowNode of the model
    * @returns {RowNode}
    */
-  getRoot(windowId = _Model.MAIN_WINDOW_ID) {
-    return this.windows.get(windowId).root;
+  getRoot(_windowId) {
+    return this._root;
   }
   isRootOrientationVertical() {
     return this.attributes.rootOrientationVertical;
@@ -2751,8 +2356,13 @@ var Model = class _Model {
   getBorderSet() {
     return this.borders;
   }
-  getwindowsMap() {
-    return this.windows;
+  /** @internal */
+  get layout() {
+    return this._layout;
+  }
+  /** @internal */
+  set layout(value) {
+    this._layout = value;
   }
   /**
    * Visits all the nodes in the model and calls the given function for each
@@ -2760,17 +2370,7 @@ var Model = class _Model {
    */
   visitNodes(fn) {
     this.borders.forEachNode(fn);
-    for (const [_, w] of this.windows) {
-      w.root.forEachNode(fn, 0);
-    }
-  }
-  visitWindowNodes(windowId, fn) {
-    if (this.windows.has(windowId)) {
-      if (windowId === _Model.MAIN_WINDOW_ID) {
-        this.borders.forEachNode(fn);
-      }
-      this.windows.get(windowId).visitNodes(fn);
-    }
+    this._root.forEachNode(fn, 0);
   }
   /**
    * Gets a node by its id
@@ -2784,13 +2384,12 @@ var Model = class _Model {
    * @param node The top node you want to begin searching from, deafults to the root node
    * @returns The first Tab Set
    */
-  getFirstTabSet(node = this.windows.get(_Model.MAIN_WINDOW_ID).root) {
+  getFirstTabSet(node = this._root) {
     const child = node.getChildren()[0];
     if (child instanceof TabSetNode) {
       return child;
-    } else {
-      return this.getFirstTabSet(child);
     }
+    return this.getFirstTabSet(child);
   }
   /**
    * Loads the model from the given json object
@@ -2803,21 +2402,7 @@ var Model = class _Model {
     if (json.borders) {
       model.borders = BorderSet.fromJson(json.borders, model);
     }
-    if (json.popouts) {
-      let i = 0;
-      const top = 100;
-      const left = 100;
-      for (const windowId in json.popouts) {
-        const windowJson = json.popouts[windowId];
-        const layoutWindow = LayoutWindow.fromJson(windowJson, model, windowId);
-        model.windows.set(windowId, layoutWindow);
-        if (!isOnScreen(layoutWindow.rect)) {
-          layoutWindow.rect = new Rect(top + i * 50, left + i * 50, 600, 400);
-          i++;
-        }
-      }
-    }
-    model.rootWindow.root = RowNode.fromJson(json.layout, model, model.getwindowsMap().get(_Model.MAIN_WINDOW_ID));
+    model._root = RowNode.fromJson(json.layout, model);
     model.tidy();
     return model;
   }
@@ -2831,17 +2416,10 @@ var Model = class _Model {
     this.visitNodes((node) => {
       node.fireEvent("save", {});
     });
-    const windows = {};
-    for (const [id, window2] of this.windows) {
-      if (id !== _Model.MAIN_WINDOW_ID) {
-        windows[id] = window2.toJson();
-      }
-    }
     return {
       global,
       borders: this.borders.toJson(),
-      layout: this.rootWindow.root.toJson(),
-      popouts: windows
+      layout: this._root.toJson()
     };
   }
   getSplitterSize() {
@@ -2886,46 +2464,12 @@ var Model = class _Model {
   }
   /***********************internal ********************************/
   /** @internal */
-  removeEmptyWindows() {
-    const emptyWindows = /* @__PURE__ */ new Set();
-    for (const [windowId] of this.windows) {
-      if (windowId !== _Model.MAIN_WINDOW_ID) {
-        let count = 0;
-        this.visitWindowNodes(windowId, (node) => {
-          if (node instanceof TabNode) {
-            count++;
-          }
-        });
-        if (count === 0) {
-          emptyWindows.add(windowId);
-        }
-      }
-    }
-    for (const windowId of emptyWindows) {
-      this.windows.delete(windowId);
-    }
-  }
-  /** @internal */
-  setActiveTabset(tabsetNode, windowId) {
-    const window2 = this.windows.get(windowId);
-    if (window2) {
-      if (tabsetNode) {
-        window2.activeTabSet = tabsetNode;
-      } else {
-        window2.activeTabSet = void 0;
-      }
-    }
+  setActiveTabset(tabsetNode) {
+    this._activeTabSet = tabsetNode;
   }
   /** @internal */
-  setMaximizedTabset(tabsetNode, windowId) {
-    const window2 = this.windows.get(windowId);
-    if (window2) {
-      if (tabsetNode) {
-        window2.maximizedTabSet = tabsetNode;
-      } else {
-        window2.maximizedTabSet = void 0;
-      }
-    }
+  setMaximizedTabset(tabsetNode) {
+    this._maximizedTabSet = tabsetNode;
   }
   /** @internal */
   updateIdMap() {
@@ -2943,18 +2487,16 @@ var Model = class _Model {
     this.idMap.set(id, node);
   }
   /** @internal */
-  findDropTargetNode(windowId, dragNode, x, y) {
-    let node = this.windows.get(windowId).root.findDropTargetNode(windowId, dragNode, x, y);
-    if (node === void 0 && windowId === _Model.MAIN_WINDOW_ID) {
+  findDropTargetNode(_windowId, dragNode, x, y) {
+    let node = this._root.findDropTargetNode(_windowId, dragNode, x, y);
+    if (node === void 0) {
       node = this.borders.findDropTargetNode(dragNode, x, y);
     }
     return node;
   }
   /** @internal */
   tidy() {
-    for (const [_, window2] of this.windows) {
-      window2.root.tidy();
-    }
+    this._root.tidy();
   }
   /** @internal */
   updateAttrs(json) {
@@ -3000,9 +2542,6 @@ var Model = class _Model {
     attributeDefinitions.add("splitterEnableHandle", false).setType(Attribute.BOOLEAN).setDescription(`enable a small centralized handle on all splitters`);
     attributeDefinitions.add("tabEnableClose", true).setType(Attribute.BOOLEAN);
     attributeDefinitions.add("tabCloseType", 1).setType("ICloseType");
-    attributeDefinitions.add("tabEnablePopout", false).setType(Attribute.BOOLEAN).setAlias("tabEnableFloat");
-    attributeDefinitions.add("tabEnablePopoutIcon", true).setType(Attribute.BOOLEAN);
-    attributeDefinitions.add("tabEnablePopoutOverlay", false).setType(Attribute.BOOLEAN);
     attributeDefinitions.add("tabEnableDrag", true).setType(Attribute.BOOLEAN);
     attributeDefinitions.add("tabEnableRename", true).setType(Attribute.BOOLEAN);
     attributeDefinitions.add("tabContentClassName", void 0).setType(Attribute.STRING);
@@ -3259,7 +2798,7 @@ var BorderNode = class _BorderNode extends Node {
           const childY = childRect.y;
           const childHeight = childRect.height;
           let pos = this.tabHeaderRect.x;
-          let childCenter = 0;
+          let childCenter;
           for (let i = 0; i < this.children.length; i++) {
             child = this.children[i];
             childRect = child.getTabRect();
@@ -3286,7 +2825,7 @@ var BorderNode = class _BorderNode extends Node {
           const childX = childRect.x;
           const childWidth = childRect.width;
           let pos = this.tabHeaderRect.y;
-          let childCenter = 0;
+          let childCenter;
           for (let i = 0; i < this.children.length; i++) {
             child = this.children[i];
             childRect = child.getTabRect();
@@ -3414,27 +2953,119 @@ var BorderNode = class _BorderNode extends Node {
 };
 
 // src/view/BorderTab.tsx
-import * as React3 from "react";
+import { useLayoutEffect, useRef as useRef2 } from "react";
+
+// src/view/Splitter.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/model/ICloseType.ts
+var ICloseType = /* @__PURE__ */ ((ICloseType2) => {
+  ICloseType2[ICloseType2["Visible"] = 1] = "Visible";
+  ICloseType2[ICloseType2["Always"] = 2] = "Always";
+  ICloseType2[ICloseType2["Selected"] = 3] = "Selected";
+  return ICloseType2;
+})(ICloseType || {});
+
+// src/view/Utils.tsx
+import { jsx } from "react/jsx-runtime";
+function isDesktop() {
+  const desktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+  return desktop;
+}
+function getRenderStateEx(layout, node, iconAngle) {
+  let leadingContent = void 0;
+  const titleContent = node.getName();
+  const name = node.getName();
+  if (iconAngle === void 0) {
+    iconAngle = 0;
+  }
+  if (leadingContent === void 0 && node.getIcon() !== void 0) {
+    if (iconAngle !== 0) {
+      leadingContent = /* @__PURE__ */ jsx("img", { style: { width: "1em", height: "1em", transform: "rotate(" + iconAngle + "deg)" }, src: node.getIcon(), alt: "leadingContent" });
+    } else {
+      leadingContent = /* @__PURE__ */ jsx("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
+    }
+  }
+  const buttons = [];
+  const renderState = { leading: leadingContent, content: titleContent, name, buttons };
+  layout.customizeTab(node, renderState);
+  node.setRenderedName(renderState.name);
+  return renderState;
+}
+function isAuxMouseEvent(event) {
+  let auxEvent = false;
+  if (event.nativeEvent instanceof MouseEvent) {
+    if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+      auxEvent = true;
+    }
+  }
+  return auxEvent;
+}
+function enablePointerOnIFrames(enable, currentDocument) {
+  const iframes = [...getElementsByTagName("iframe", currentDocument), ...getElementsByTagName("webview", currentDocument)];
+  for (const iframe of iframes) {
+    iframe.style.pointerEvents = enable ? "auto" : "none";
+  }
+}
+function getElementsByTagName(tag, currentDocument) {
+  return [...currentDocument.getElementsByTagName(tag)];
+}
+function startDrag(doc, event, drag, dragEnd, dragCancel) {
+  event.preventDefault();
+  const pointerMove = (ev) => {
+    ev.preventDefault();
+    drag(ev.clientX, ev.clientY);
+  };
+  const pointerCancel = (ev) => {
+    ev.preventDefault();
+    dragCancel();
+  };
+  const pointerUp = () => {
+    doc.removeEventListener("pointermove", pointerMove);
+    doc.removeEventListener("pointerup", pointerUp);
+    doc.removeEventListener("pointercancel", pointerCancel);
+    dragEnd();
+  };
+  doc.addEventListener("pointermove", pointerMove);
+  doc.addEventListener("pointerup", pointerUp);
+  doc.addEventListener("pointercancel", pointerCancel);
+}
+function isSafari() {
+  const userAgent = navigator.userAgent;
+  return userAgent.includes("Safari") && !userAgent.includes("Chrome") && !userAgent.includes("Chromium");
+}
+function isTabClosable(node, selected) {
+  const closeType = node.getCloseType();
+  if (selected || closeType === 2 /* Always */) {
+    return true;
+  }
+  if (closeType === 1 /* Visible */) {
+    if (window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
+      return true;
+    }
+  }
+  return false;
+}
 
 // src/view/Splitter.tsx
-import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var Splitter = (props) => {
   const { layout, node, index, horizontal } = props;
-  const [dragging, setDragging] = React2.useState(false);
-  const selfRef = React2.useRef(null);
-  const extendedRef = React2.useRef(null);
-  const pBounds = React2.useRef([]);
-  const outlineDiv = React2.useRef(void 0);
-  const handleDiv = React2.useRef(void 0);
-  const dragStartX = React2.useRef(0);
-  const dragStartY = React2.useRef(0);
-  const initalSizes = React2.useRef({ initialSizes: [], sum: 0, startPosition: 0 });
+  const [dragging, setDragging] = useState(false);
+  const selfRef = useRef(null);
+  const extendedRef = useRef(null);
+  const pBounds = useRef([]);
+  const outlineDiv = useRef(void 0);
+  const handleDiv = useRef(void 0);
+  const dragStartX = useRef(0);
+  const dragStartY = useRef(0);
+  const initalSizes = useRef({ initialSizes: [], sum: 0, startPosition: 0 });
   const size = node.getModel().getSplitterSize();
   let extra = node.getModel().getSplitterExtra();
   if (!isDesktop()) {
     extra = Math.max(30, extra + size) - size;
   }
-  React2.useEffect(() => {
+  useEffect(() => {
     selfRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
     extendedRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
     return () => {
@@ -3517,7 +3148,7 @@ var Splitter = (props) => {
     void _realtime;
     const redraw = () => {
       if (outlineDiv.current) {
-        let value = 0;
+        let value;
         if (node.getOrientation() === Orientation.VERT) {
           value = outlineDiv.current.offsetTop;
         } else {
@@ -3568,10 +3199,10 @@ var Splitter = (props) => {
   }
   let handle;
   if (!dragging && node.getModel().isSplitterEnableHandle()) {
-    handle = /* @__PURE__ */ React2.createElement("div", { className: cm("flexlayout__splitter_handle" /* FLEXLAYOUT__SPLITTER_HANDLE */) + " " + (horizontal ? cm("flexlayout__splitter_handle_horz" /* FLEXLAYOUT__SPLITTER_HANDLE_HORZ */) : cm("flexlayout__splitter_handle_vert" /* FLEXLAYOUT__SPLITTER_HANDLE_VERT */)) });
+    handle = /* @__PURE__ */ jsx2("div", { className: cm("flexlayout__splitter_handle" /* FLEXLAYOUT__SPLITTER_HANDLE */) + " " + (horizontal ? cm("flexlayout__splitter_handle_horz" /* FLEXLAYOUT__SPLITTER_HANDLE_HORZ */) : cm("flexlayout__splitter_handle_vert" /* FLEXLAYOUT__SPLITTER_HANDLE_VERT */)) });
   }
   if (extra === 0) {
-    return /* @__PURE__ */ React2.createElement("div", { className, style: style2, ref: selfRef, "data-layout-path": node.getPath() + "/s" + (index - 1), onPointerDown }, handle);
+    return /* @__PURE__ */ jsx2("div", { className, style: style2, ref: selfRef, "data-layout-path": node.getPath() + "/s" + (index - 1), onPointerDown, children: handle });
   } else {
     const style22 = {};
     if (node.getOrientation() === Orientation.HORZ) {
@@ -3584,16 +3215,17 @@ var Splitter = (props) => {
       style22.cursor = "ns-resize";
     }
     const className2 = cm("flexlayout__splitter_extra" /* FLEXLAYOUT__SPLITTER_EXTRA */);
-    return /* @__PURE__ */ React2.createElement("div", { className, style: style2, ref: selfRef, "data-layout-path": node.getPath() + "/s" + (index - 1), onPointerDown }, /* @__PURE__ */ React2.createElement("div", { style: style22, ref: extendedRef, className: className2, onPointerDown }));
+    return /* @__PURE__ */ jsx2("div", { className, style: style2, ref: selfRef, "data-layout-path": node.getPath() + "/s" + (index - 1), onPointerDown, children: /* @__PURE__ */ jsx2("div", { style: style22, ref: extendedRef, className: className2, onPointerDown }) });
   }
 };
 
 // src/view/BorderTab.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 function BorderTab(props) {
   const { layout, border, show } = props;
-  const selfRef = React3.useRef(null);
-  const isFirstRender = React3.useRef(true);
-  React3.useLayoutEffect(() => {
+  const selfRef = useRef2(null);
+  const isFirstRender = useRef2(true);
+  useLayoutEffect(() => {
     const outerRect = layout.getBoundingClientRect(selfRef.current);
     const contentRect = Rect.getContentRect(selfRef.current).relativeTo(layout.getDomRect());
     if (outerRect.width > 0) {
@@ -3622,21 +3254,28 @@ function BorderTab(props) {
   style2.display = show ? "flex" : "none";
   const className = layout.getClassName("flexlayout__border_tab_contents" /* FLEXLAYOUT__BORDER_TAB_CONTENTS */);
   if (border.getLocation() === DockLocation.LEFT || border.getLocation() === DockLocation.TOP) {
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { ref: selfRef, style: style2, className }), show && /* @__PURE__ */ React3.createElement(Splitter, { layout, node: border, index: 0, horizontal }));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx3("div", { ref: selfRef, style: style2, className }),
+      show && /* @__PURE__ */ jsx3(Splitter, { layout, node: border, index: 0, horizontal })
+    ] });
   } else {
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, show && /* @__PURE__ */ React3.createElement(Splitter, { layout, node: border, index: 0, horizontal }), /* @__PURE__ */ React3.createElement("div", { ref: selfRef, style: style2, className }));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      show && /* @__PURE__ */ jsx3(Splitter, { layout, node: border, index: 0, horizontal }),
+      /* @__PURE__ */ jsx3("div", { ref: selfRef, style: style2, className })
+    ] });
   }
 }
 
 // src/view/BorderTabSet.tsx
-import * as React8 from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef5 } from "react";
 
 // src/view/BorderButton.tsx
-import * as React4 from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var BorderButton = (props) => {
   const { layout, node, selected, border, icons, path } = props;
-  const selfRef = React4.useRef(null);
-  const contentRef = React4.useRef(null);
+  const selfRef = useRef3(null);
+  const contentRef = useRef3(null);
   const onDragStart = (event) => {
     if (node.isEnableDrag()) {
       event.stopPropagation();
@@ -3676,7 +3315,7 @@ var BorderButton = (props) => {
   const onClosePointerDown = (event) => {
     event.stopPropagation();
   };
-  React4.useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     node.setTabRect(layout.getBoundingClientRect(selfRef.current));
     if (layout.getEditingTab() === node) {
       contentRef.current.select();
@@ -3712,10 +3351,10 @@ var BorderButton = (props) => {
     }
   }
   const renderState = getRenderStateEx(layout, node, iconAngle);
-  let content = renderState.content ? /* @__PURE__ */ React4.createElement("div", { className: cm("flexlayout__border_button_content" /* FLEXLAYOUT__BORDER_BUTTON_CONTENT */) }, renderState.content) : null;
-  const leading = renderState.leading ? /* @__PURE__ */ React4.createElement("div", { className: cm("flexlayout__border_button_leading" /* FLEXLAYOUT__BORDER_BUTTON_LEADING */) }, renderState.leading) : null;
+  let content = renderState.content ? /* @__PURE__ */ jsx4("div", { className: cm("flexlayout__border_button_content" /* FLEXLAYOUT__BORDER_BUTTON_CONTENT */), children: renderState.content }) : null;
+  const leading = renderState.leading ? /* @__PURE__ */ jsx4("div", { className: cm("flexlayout__border_button_leading" /* FLEXLAYOUT__BORDER_BUTTON_LEADING */), children: renderState.leading }) : null;
   if (layout.getEditingTab() === node) {
-    content = /* @__PURE__ */ React4.createElement(
+    content = /* @__PURE__ */ jsx4(
       "input",
       {
         ref: contentRef,
@@ -3732,21 +3371,21 @@ var BorderButton = (props) => {
   if (node.isEnableClose()) {
     const closeTitle = layout.i18nName("Close" /* Close_Tab */);
     renderState.buttons.push(
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ jsx4(
         "div",
         {
-          key: "close",
           "data-layout-path": path + "/button/close",
           title: closeTitle,
           className: cm("flexlayout__border_button_trailing" /* FLEXLAYOUT__BORDER_BUTTON_TRAILING */),
           onPointerDown: onClosePointerDown,
-          onClick: onClose
+          onClick: onClose,
+          children: typeof icons.close === "function" ? icons.close(node) : icons.close
         },
-        typeof icons.close === "function" ? icons.close(node) : icons.close
+        "close"
       )
     );
   }
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref: selfRef,
@@ -3758,30 +3397,33 @@ var BorderButton = (props) => {
       title: node.getHelpText(),
       draggable: true,
       onDragStart,
-      onDragEnd
-    },
-    leading,
-    content,
-    renderState.buttons
+      onDragEnd,
+      children: [
+        leading,
+        content,
+        renderState.buttons
+      ]
+    }
   );
 };
 
-// src/view/PopupMenu.tsx
-import * as React6 from "react";
-
 // src/view/TabButtonStamp.tsx
-import * as React5 from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var TabButtonStamp = (props) => {
   const { layout, node } = props;
   const cm = layout.getClassName;
   const classNames = cm("flexlayout__tab_button_stamp" /* FLEXLAYOUT__TAB_BUTTON_STAMP */);
   const renderState = getRenderStateEx(layout, node);
-  const content = renderState.content ? /* @__PURE__ */ React5.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : node.getNameForOverflowMenu();
-  const leading = renderState.leading ? /* @__PURE__ */ React5.createElement("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */) }, renderState.leading) : null;
-  return /* @__PURE__ */ React5.createElement("div", { className: classNames, title: node.getHelpText() }, leading, content);
+  const content = renderState.content ? /* @__PURE__ */ jsx5("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */), children: renderState.content }) : node.getNameForOverflowMenu();
+  const leading = renderState.leading ? /* @__PURE__ */ jsx5("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */), children: renderState.leading }) : null;
+  return /* @__PURE__ */ jsxs3("div", { className: classNames, title: node.getHelpText(), children: [
+    leading,
+    content
+  ] });
 };
 
 // src/view/PopupMenu.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
 function showPopup(triggerElement, items, onSelect, layout) {
   const layoutDiv = layout.getRootDiv();
   const classNameMapper = layout.getClassName;
@@ -3821,7 +3463,7 @@ function showPopup(triggerElement, items, onSelect, layout) {
   };
   elm.addEventListener("pointerdown", onElementPointerDown);
   currentDocument.addEventListener("pointerdown", onDocPointerDown);
-  layout.showControlInPortal(/* @__PURE__ */ React6.createElement(PopupMenu, { currentDocument, onSelect, onHide, items, classNameMapper, layout }), elm);
+  layout.showControlInPortal(/* @__PURE__ */ jsx6(PopupMenu, { currentDocument, onSelect, onHide, items, classNameMapper, layout }), elm);
 }
 var PopupMenu = (props) => {
   const { items, onHide, onSelect, classNameMapper, layout } = props;
@@ -3840,45 +3482,45 @@ var PopupMenu = (props) => {
   const onDragEnd = (_event) => {
     layout.clearDragMain();
   };
-  const itemElements = items.map((item, i) => /* @__PURE__ */ React6.createElement(
+  const itemElements = items.map((item, i) => /* @__PURE__ */ jsx6(
     "div",
     {
-      key: item.index,
       className: classNameMapper("flexlayout__popup_menu_item" /* FLEXLAYOUT__POPUP_MENU_ITEM */),
       "data-layout-path": "/popup-menu/tb" + i,
       onClick: (event) => onItemClick(item, event),
       draggable: true,
       onDragStart: (e) => onDragStart(e, item.node),
       onDragEnd,
-      title: item.node.getHelpText()
+      title: item.node.getHelpText(),
+      children: /* @__PURE__ */ jsx6(TabButtonStamp, { node: item.node, layout })
     },
-    /* @__PURE__ */ React6.createElement(TabButtonStamp, { node: item.node, layout })
+    item.index
   ));
-  return /* @__PURE__ */ React6.createElement("div", { className: classNameMapper("flexlayout__popup_menu" /* FLEXLAYOUT__POPUP_MENU */), "data-layout-path": "/popup-menu" }, itemElements);
+  return /* @__PURE__ */ jsx6("div", { className: classNameMapper("flexlayout__popup_menu" /* FLEXLAYOUT__POPUP_MENU */), "data-layout-path": "/popup-menu", children: itemElements });
 };
 
 // src/view/TabOverflowHook.tsx
-import * as React7 from "react";
+import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState2 } from "react";
 var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
-  const firstRender = React7.useRef(true);
-  const tabsTruncated = React7.useRef(false);
-  const lastRect = React7.useRef(Rect.empty());
-  const selfRef = React7.useRef(null);
-  const [position, setPosition] = React7.useState(0);
-  const userControlledLeft = React7.useRef(false);
-  const [hiddenTabs, setHiddenTabs] = React7.useState([]);
-  const lastHiddenCount = React7.useRef(0);
-  React7.useLayoutEffect(() => {
+  const firstRender = useRef4(true);
+  const tabsTruncated = useRef4(false);
+  const lastRect = useRef4(Rect.empty());
+  const selfRef = useRef4(null);
+  const [position, setPosition] = useState2(0);
+  const userControlledLeft = useRef4(false);
+  const [hiddenTabs, setHiddenTabs] = useState2([]);
+  const lastHiddenCount = useRef4(0);
+  useLayoutEffect3(() => {
     userControlledLeft.current = false;
   }, [node.getSelectedNode(), node.getRect().width, node.getRect().height]);
   const nodeRect = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
-  React7.useLayoutEffect(() => {
+  useLayoutEffect3(() => {
     if (nodeRect.width > 0 && nodeRect.height > 0) {
       updateVisibleTabs();
     }
   }, [nodeRect.width, nodeRect.height]);
   const instance = toolbarRef.current;
-  React7.useEffect(() => {
+  useEffect2(() => {
     if (!instance) {
       return;
     }
@@ -3971,7 +3613,7 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
     }
   };
   const onMouseWheel = (event) => {
-    let delta = 0;
+    let delta;
     if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
       delta = -event.deltaX;
     } else {
@@ -3988,13 +3630,14 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
 };
 
 // src/view/BorderTabSet.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var BorderTabSet = (props) => {
   const { border, layout, size } = props;
-  const toolbarRef = React8.useRef(null);
-  const overflowbuttonRef = React8.useRef(null);
-  const stickyButtonsRef = React8.useRef(null);
+  const toolbarRef = useRef5(null);
+  const overflowbuttonRef = useRef5(null);
+  const stickyButtonsRef = useRef5(null);
   const icons = layout.getIcons();
-  React8.useLayoutEffect(() => {
+  useLayoutEffect4(() => {
     border.setTabHeaderRect(Rect.getBoundingClientRect(selfRef.current).relativeTo(layout.getDomRect()));
   });
   const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
@@ -4023,23 +3666,16 @@ var BorderTabSet = (props) => {
     layout.doAction(Actions.selectTab(item.node.getId()));
     userControlledLeft.current = false;
   };
-  const onPopoutTab = (event) => {
-    const selectedTabNode = border.getChildren()[border.getSelected()];
-    if (selectedTabNode !== void 0) {
-      layout.doAction(Actions.popoutTab(selectedTabNode.getId()));
-    }
-    event.stopPropagation();
-  };
   const cm = layout.getClassName;
   const tabButtons = [];
   const layoutTab = (i) => {
     const isSelected = border.getSelected() === i;
     const child = border.getChildren()[i];
     tabButtons.push(
-      /* @__PURE__ */ React8.createElement(BorderButton, { layout, border: border.getLocation().getName(), node: child, path: border.getPath() + "/tb" + i, key: child.getId(), selected: isSelected, icons })
+      /* @__PURE__ */ jsx7(BorderButton, { layout, border: border.getLocation().getName(), node: child, path: border.getPath() + "/tb" + i, selected: isSelected, icons }, child.getId())
     );
     if (i < border.getChildren().length - 1) {
-      tabButtons.push(/* @__PURE__ */ React8.createElement("div", { key: "divider" + i, className: cm("flexlayout__border_tab_divider" /* FLEXLAYOUT__BORDER_TAB_DIVIDER */) }));
+      tabButtons.push(/* @__PURE__ */ jsx7("div", { className: cm("flexlayout__border_tab_divider" /* FLEXLAYOUT__BORDER_TAB_DIVIDER */) }, "divider" + i));
     }
   };
   for (let i = 0; i < border.getChildren().length; i++) {
@@ -4062,18 +3698,18 @@ var BorderTabSet = (props) => {
       buttons = [...stickyButtons, ...buttons];
     } else {
       tabButtons.push(
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             ref: stickyButtonsRef,
-            key: "sticky_buttons_container",
             onPointerDown: onInterceptPointerDown,
             onDragStart: (e) => {
               e.preventDefault();
             },
-            className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */)
+            className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */),
+            children: stickyButtons
           },
-          stickyButtons
+          "sticky_buttons_container"
         )
       );
     }
@@ -4084,48 +3720,31 @@ var BorderTabSet = (props) => {
     if (typeof icons.more === "function") {
       overflowContent = icons.more(border, hiddenTabs);
     } else {
-      overflowContent = /* @__PURE__ */ React8.createElement(React8.Fragment, null, icons.more, /* @__PURE__ */ React8.createElement("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */) }, hiddenTabs.length));
+      overflowContent = /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        icons.more,
+        /* @__PURE__ */ jsx7("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */), children: hiddenTabs.length })
+      ] });
     }
     void buttons.splice(
       Math.min(renderState.overflowPosition, buttons.length),
       0,
-      /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ jsx7(
         "button",
         {
-          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()),
           title: overflowTitle,
           onClick: onOverflowClick,
-          onPointerDown: onInterceptPointerDown
+          onPointerDown: onInterceptPointerDown,
+          children: overflowContent
         },
-        overflowContent
+        "overflowbutton"
       )
     );
   }
-  const selectedIndex = border.getSelected();
-  if (selectedIndex !== -1) {
-    const selectedTabNode = border.getChildren()[selectedIndex];
-    if (selectedTabNode !== void 0 && layout.isSupportsPopout() && selectedTabNode.isEnablePopout()) {
-      const popoutTitle = layout.i18nName("Popout selected tab" /* Popout_Tab */);
-      buttons.push(
-        /* @__PURE__ */ React8.createElement(
-          "button",
-          {
-            key: "popout",
-            title: popoutTitle,
-            className: cm("flexlayout__border_toolbar_button" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON */) + " " + cm("flexlayout__border_toolbar_button-float" /* FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_FLOAT */),
-            onClick: onPopoutTab,
-            onPointerDown: onInterceptPointerDown
-          },
-          typeof icons.popout === "function" ? icons.popout(selectedTabNode) : icons.popout
-        )
-      );
-    }
-  }
-  const toolbar = /* @__PURE__ */ React8.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);
-  let innerStyle = {};
-  let outerStyle = {};
+  const toolbar = /* @__PURE__ */ jsx7("div", { ref: toolbarRef, className: cm("flexlayout__border_toolbar" /* FLEXLAYOUT__BORDER_TOOLBAR */) + " " + cm("flexlayout__border_toolbar_" /* FLEXLAYOUT__BORDER_TOOLBAR_ */ + border.getLocation().getName()), children: buttons }, "toolbar");
+  let innerStyle;
+  let outerStyle;
   const borderHeight = size - 1;
   if (border.getLocation() === DockLocation.LEFT) {
     innerStyle = { right: "100%", top: position };
@@ -4137,7 +3756,7 @@ var BorderTabSet = (props) => {
     innerStyle = { left: position };
     outerStyle = { height: borderHeight };
   }
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: selfRef,
@@ -4150,29 +3769,33 @@ var BorderTabSet = (props) => {
       onClick: onAuxMouseClick,
       onAuxClick: onAuxMouseClick,
       onContextMenu,
-      onWheel: onMouseWheel
-    },
-    /* @__PURE__ */ React8.createElement("div", { style: outerStyle, className: cm("flexlayout__border_inner" /* FLEXLAYOUT__BORDER_INNER */) + " " + cm("flexlayout__border_inner_" /* FLEXLAYOUT__BORDER_INNER_ */ + border.getLocation().getName()) }, /* @__PURE__ */ React8.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()) }, tabButtons)),
-    toolbar
+      onWheel: onMouseWheel,
+      children: [
+        /* @__PURE__ */ jsx7("div", { style: outerStyle, className: cm("flexlayout__border_inner" /* FLEXLAYOUT__BORDER_INNER */) + " " + cm("flexlayout__border_inner_" /* FLEXLAYOUT__BORDER_INNER_ */ + border.getLocation().getName()), children: /* @__PURE__ */ jsx7("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()), children: tabButtons }) }),
+        toolbar
+      ]
+    }
   );
 };
 
 // src/view/DragContainer.tsx
-import * as React9 from "react";
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var DragContainer = (props) => {
   const { layout, node } = props;
-  const selfRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const selfRef = useRef6(null);
+  useEffect3(() => {
     node.setTabStamp(selfRef.current);
   }, [node, selfRef.current]);
   const cm = layout.getClassName;
   const classNames = cm("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */);
-  return /* @__PURE__ */ React9.createElement("div", { ref: selfRef, className: classNames }, /* @__PURE__ */ React9.createElement(TabButtonStamp, { key: node.getId(), layout, node }));
+  return /* @__PURE__ */ jsx8("div", { ref: selfRef, className: classNames, children: /* @__PURE__ */ jsx8(TabButtonStamp, { layout, node }, node.getId()) });
 };
 
 // src/view/ErrorBoundary.tsx
-import * as React10 from "react";
-var ErrorBoundary = class extends React10.Component {
+import { Component } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -4186,187 +3809,75 @@ var ErrorBoundary = class extends React10.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ React10.createElement("div", { className: "flexlayout__error_boundary_container" /* FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER */ }, /* @__PURE__ */ React10.createElement("div", { className: "flexlayout__error_boundary_content" /* FLEXLAYOUT__ERROR_BOUNDARY_CONTENT */ }, this.props.message));
+      return /* @__PURE__ */ jsx9("div", { className: "flexlayout__error_boundary_container" /* FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER */, children: /* @__PURE__ */ jsx9("div", { className: "flexlayout__error_boundary_content" /* FLEXLAYOUT__ERROR_BOUNDARY_CONTENT */, children: this.props.message }) });
     }
     return this.props.children;
   }
 };
 
-// src/view/PopoutWindow.tsx
-import * as React11 from "react";
-import { createPortal } from "react-dom";
-var PopoutWindow = (props) => {
-  const { title, layout, layoutWindow, url, onCloseWindow, onSetWindow, children } = props;
-  const popoutWindow = React11.useRef(null);
-  const [content, setContent] = React11.useState(void 0);
-  const styleMap = /* @__PURE__ */ new Map();
-  React11.useLayoutEffect(() => {
-    if (!popoutWindow.current) {
-      const windowId = layoutWindow.windowId;
-      const rect = layoutWindow.rect;
-      popoutWindow.current = window.open(url, windowId, `left=${rect.x},top=${rect.y},width=${rect.width},height=${rect.height}`);
-      if (popoutWindow.current) {
-        layoutWindow.window = popoutWindow.current;
-        onSetWindow(layoutWindow, popoutWindow.current);
-        window.addEventListener("beforeunload", () => {
-          if (popoutWindow.current) {
-            const closedWindow = popoutWindow.current;
-            popoutWindow.current = null;
-            closedWindow.close();
-          }
-        });
-        popoutWindow.current.addEventListener("load", () => {
-          if (popoutWindow.current) {
-            popoutWindow.current.focus();
-            popoutWindow.current.resizeTo(rect.width, rect.height);
-            popoutWindow.current.moveTo(rect.x, rect.y);
-            const popoutDocument = popoutWindow.current.document;
-            popoutDocument.title = title;
-            const popoutContent = popoutDocument.createElement("div");
-            popoutContent.className = "flexlayout__floating_window_content" /* FLEXLAYOUT__FLOATING_WINDOW_CONTENT */;
-            popoutDocument.body.appendChild(popoutContent);
-            void copyStyles(popoutDocument, styleMap).then(() => {
-              setContent(popoutContent);
-            });
-            const observer = new MutationObserver((mutationsList) => handleStyleMutations(mutationsList, popoutDocument, styleMap));
-            observer.observe(document.head, { childList: true });
-            popoutWindow.current.addEventListener("beforeunload", () => {
-              if (popoutWindow.current) {
-                onCloseWindow(layoutWindow);
-                popoutWindow.current = null;
-                observer.disconnect();
-              }
-            });
-          }
-        });
-      } else {
-        console.warn(`Unable to open window ${url}`);
-        onCloseWindow(layoutWindow);
-      }
-    }
-    return () => {
-      if (!layout.getModel().getwindowsMap().has(layoutWindow.windowId)) {
-        popoutWindow.current?.close();
-        popoutWindow.current = null;
-      }
-    };
-  }, []);
-  if (content !== void 0) {
-    return createPortal(children, content);
-  } else {
-    return null;
-  }
-};
-function handleStyleMutations(mutationsList, popoutDocument, styleMap) {
-  for (const mutation of mutationsList) {
-    if (mutation.type === "childList") {
-      for (const addition of mutation.addedNodes) {
-        if (addition instanceof HTMLLinkElement || addition instanceof HTMLStyleElement) {
-          copyStyle(popoutDocument, addition, styleMap);
-        }
-      }
-      for (const removal of mutation.removedNodes) {
-        if (removal instanceof HTMLLinkElement || removal instanceof HTMLStyleElement) {
-          const popoutStyle = styleMap.get(removal);
-          if (popoutStyle) {
-            popoutDocument.head.removeChild(popoutStyle);
-          }
-        }
-      }
-    }
-  }
-}
-function copyStyles(popoutDoc, styleMap) {
-  const promises = [];
-  const styleElements = document.querySelectorAll('style, link[rel="stylesheet"]');
-  for (const element of styleElements) {
-    if (element instanceof HTMLElement) {
-      copyStyle(popoutDoc, element, styleMap, promises);
-    }
-  }
-  return Promise.all(promises);
-}
-function copyStyle(popoutDoc, element, styleMap, promises) {
-  if (element instanceof HTMLLinkElement) {
-    const linkElement = element.cloneNode(true);
-    popoutDoc.head.appendChild(linkElement);
-    styleMap.set(element, linkElement);
-    if (promises) {
-      promises.push(
-        new Promise((resolve) => {
-          linkElement.onload = () => resolve(true);
-        })
-      );
-    }
-  } else if (element instanceof HTMLStyleElement) {
-    try {
-      const styleElement = element.cloneNode(true);
-      popoutDoc.head.appendChild(styleElement);
-      styleMap.set(element, styleElement);
-    } catch {
-    }
-  }
-}
-
 // src/view/Icons.tsx
-import * as React12 from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var style = { width: "1em", height: "1em", display: "flex", alignItems: "center" };
 var CloseIcon = () => {
-  return /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24" }, /* @__PURE__ */ React12.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }), /* @__PURE__ */ React12.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__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx10("path", { fill: "none", d: "M0 0h24v24H0z" }),
+    /* @__PURE__ */ jsx10("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__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React12.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React12.createElement("path", { stroke: "var(--color-icon)", d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
+  return /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)", children: [
+    /* @__PURE__ */ jsx10("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx10("path", { stroke: "var(--color-icon)", d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" })
+  ] });
 };
 var OverflowIcon = () => {
-  return /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React12.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React12.createElement("path", { stroke: "var(--color-icon)", d: "M7 10l5 5 5-5z" }));
+  return /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)", children: [
+    /* @__PURE__ */ jsx10("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx10("path", { stroke: "var(--color-icon)", d: "M7 10l5 5 5-5z" })
+  ] });
 };
 var EdgeIcon = () => {
-  return /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "block", width: 10, height: 10 }, preserveAspectRatio: "none", viewBox: "0 0 100 100" }, /* @__PURE__ */ React12.createElement("path", { fill: "var(--color-edge-icon)", stroke: "var(--color-edge-icon)", d: "M10 30 L90 30 l-40 40 Z" }));
-};
-var PopoutIcon = () => {
-  return (
-    // <svg xmlns="http://www.w3.org/2000/svg"  style={style}  viewBox="0 0 24 24" fill="var(--color-icon)"><path d="M0 0h24v24H0z" fill="none"/><path stroke="var(--color-icon)" d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/></svg>
-    // <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__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 20 20", fill: "var(--color-icon)" }, /* @__PURE__ */ React12.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__ */ React12.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" }))
-  );
+  return /* @__PURE__ */ jsx10("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "block", width: 10, height: 10 }, preserveAspectRatio: "none", viewBox: "0 0 100 100", children: /* @__PURE__ */ jsx10("path", { fill: "var(--color-edge-icon)", stroke: "var(--color-edge-icon)", d: "M10 30 L90 30 l-40 40 Z" }) });
 };
 var RestoreIcon = () => {
-  return /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React12.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React12.createElement("path", { stroke: "var(--color-icon)", d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" }));
+  return /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)", children: [
+    /* @__PURE__ */ jsx10("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx10("path", { stroke: "var(--color-icon)", d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" })
+  ] });
 };
 var AsterickIcon = () => {
-  return /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, height: "24px", viewBox: "0 -960 960 960", width: "24px" }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ jsx10("svg", { xmlns: "http://www.w3.org/2000/svg", style, height: "24px", viewBox: "0 -960 960 960", width: "24px", children: /* @__PURE__ */ jsx10(
     "path",
     {
       fill: "var(--color-icon)",
       stroke: "var(--color-icon)",
       d: "M440-120v-264L254-197l-57-57 187-186H120v-80h264L197-706l57-57 186 187v-264h80v264l186-187 57 57-187 186h264v80H576l187 186-57 57-186-187v264h-80Z"
     }
-  ));
+  ) });
 };
 
 // src/view/Overlay.tsx
-import * as React13 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Overlay = (props) => {
   const { layout, show } = props;
-  return /* @__PURE__ */ React13.createElement("div", { className: layout.getClassName("flexlayout__layout_overlay" /* FLEXLAYOUT__LAYOUT_OVERLAY */), style: { display: show ? "flex" : "none" } });
+  return /* @__PURE__ */ jsx11("div", { className: layout.getClassName("flexlayout__layout_overlay" /* FLEXLAYOUT__LAYOUT_OVERLAY */), style: { display: show ? "flex" : "none" } });
 };
 
 // src/view/Row.tsx
-import * as React16 from "react";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef9 } from "react";
 
 // src/view/TabSet.tsx
-import * as React15 from "react";
+import { useEffect as useEffect4, useRef as useRef8 } from "react";
 
 // src/view/TabButton.tsx
-import * as React14 from "react";
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef7 } from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var TabButton = (props) => {
   const { layout, node, selected, path } = props;
-  const selfRef = React14.useRef(null);
-  const contentRef = React14.useRef(null);
+  const selfRef = useRef7(null);
+  const contentRef = useRef7(null);
   const icons = layout.getIcons();
-  React14.useLayoutEffect(() => {
+  useLayoutEffect5(() => {
     node.setTabRect(layout.getBoundingClientRect(selfRef.current));
     if (layout.getEditingTab() === node) {
       contentRef.current.select();
@@ -4452,10 +3963,10 @@ var TabButton = (props) => {
     classNames += " " + node.getClassName();
   }
   const renderState = getRenderStateEx(layout, node);
-  let content = renderState.content ? /* @__PURE__ */ React14.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : null;
-  const leading = renderState.leading ? /* @__PURE__ */ React14.createElement("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */) }, renderState.leading) : null;
+  let content = renderState.content ? /* @__PURE__ */ jsx12("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */), children: renderState.content }) : null;
+  const leading = renderState.leading ? /* @__PURE__ */ jsx12("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */), children: renderState.leading }) : null;
   if (layout.getEditingTab() === node) {
-    content = /* @__PURE__ */ React14.createElement(
+    content = /* @__PURE__ */ jsx12(
       "input",
       {
         ref: contentRef,
@@ -4472,18 +3983,18 @@ var TabButton = (props) => {
   if (node.isEnableClose() && !isStretch) {
     const closeTitle = layout.i18nName("Close" /* Close_Tab */);
     renderState.buttons.push(
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ jsx12(
         "button",
         {
-          key: "close",
           "data-layout-path": path + "/button/close",
           title: closeTitle,
           className: cm("flexlayout__tab_button_trailing" /* FLEXLAYOUT__TAB_BUTTON_TRAILING */),
           onPointerDown: onClosePointerDown,
           onClick: onClose,
-          onKeyDown: onCloseKeyDown
+          onKeyDown: onCloseKeyDown,
+          children: typeof icons.close === "function" ? icons.close(node) : icons.close
         },
-        typeof icons.close === "function" ? icons.close(node) : icons.close
+        "close"
       )
     );
   }
@@ -4493,7 +4004,7 @@ var TabButton = (props) => {
       onClick();
     }
   };
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: selfRef,
@@ -4510,27 +4021,30 @@ var TabButton = (props) => {
       draggable: true,
       onDragStart,
       onDragEnd,
-      onDoubleClick
-    },
-    leading,
-    content,
-    renderState.buttons
+      onDoubleClick,
+      children: [
+        leading,
+        content,
+        renderState.buttons
+      ]
+    }
   );
 };
 
 // src/view/TabSet.tsx
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var TabSet = (props) => {
   const { node, layout } = props;
-  const tabStripRef = React15.useRef(null);
-  const tabStripInnerRef = React15.useRef(null);
-  const contentRef = React15.useRef(null);
-  const buttonBarRef = React15.useRef(null);
-  const overflowbuttonRef = React15.useRef(null);
-  const stickyButtonsRef = React15.useRef(null);
+  const tabStripRef = useRef8(null);
+  const tabStripInnerRef = useRef8(null);
+  const contentRef = useRef8(null);
+  const buttonBarRef = useRef8(null);
+  const overflowbuttonRef = useRef8(null);
+  const stickyButtonsRef = useRef8(null);
   const icons = layout.getIcons();
-  const isFirstRender = React15.useRef(true);
-  React15.useEffect(() => {
+  const isFirstRender = useRef8(true);
+  useEffect4(() => {
     node.setRect(layout.getBoundingClientRect(selfRef.current));
     if (tabStripRef.current) {
       node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current));
@@ -4576,12 +4090,6 @@ var TabSet = (props) => {
   };
   const onPointerDown = (event) => {
     if (!isAuxMouseEvent(event)) {
-      let name = node.getName();
-      if (name === void 0) {
-        name = "";
-      } else {
-        name = ": " + name;
-      }
       layout.doAction(Actions.setActiveTabset(node.getId(), layout.getWindowId()));
     }
   };
@@ -4610,12 +4118,6 @@ var TabSet = (props) => {
     layout.doAction(Actions.deleteTab(node.getChildren()[0].getId()));
     event.stopPropagation();
   };
-  const onPopoutTab = (event) => {
-    if (selectedTabNode !== void 0) {
-      layout.doAction(Actions.popoutTab(selectedTabNode.getId()));
-    }
-    event.stopPropagation();
-  };
   const onDoubleClick = (_event) => {
     if (node.canMaximize()) {
       layout.maximize(node);
@@ -4625,16 +4127,15 @@ var TabSet = (props) => {
   if (tabStripInnerRef.current !== null && tabStripInnerRef.current.scrollLeft !== 0) {
     tabStripInnerRef.current.scrollLeft = 0;
   }
-  const selectedTabNode = node.getSelectedNode();
   const path = node.getPath();
   const tabs = [];
   if (node.isEnableTabStrip()) {
     for (let i = 0; i < node.getChildren().length; i++) {
       const child = node.getChildren()[i];
       const isSelected = node.getSelected() === i;
-      tabs.push(/* @__PURE__ */ React15.createElement(TabButton, { layout, node: child, path: path + "/tb" + i, key: child.getId(), selected: isSelected }));
+      tabs.push(/* @__PURE__ */ jsx13(TabButton, { layout, node: child, path: path + "/tb" + i, selected: isSelected }, child.getId()));
       if (i < node.getChildren().length - 1) {
-        tabs.push(/* @__PURE__ */ React15.createElement("div", { key: "divider" + i, className: cm("flexlayout__tabset_tab_divider" /* FLEXLAYOUT__TABSET_TAB_DIVIDER */) }));
+        tabs.push(/* @__PURE__ */ jsx13("div", { className: cm("flexlayout__tabset_tab_divider" /* FLEXLAYOUT__TABSET_TAB_DIVIDER */) }, "divider" + i));
       }
     }
   }
@@ -4654,18 +4155,18 @@ var TabSet = (props) => {
       buttons = [...stickyButtons, ...buttons];
     } else {
       tabs.push(
-        /* @__PURE__ */ React15.createElement(
+        /* @__PURE__ */ jsx13(
           "div",
           {
             ref: stickyButtonsRef,
-            key: "sticky_buttons_container",
             onPointerDown: onInterceptPointerDown,
             onDragStart: (e) => {
               e.preventDefault();
             },
-            className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */)
+            className: cm("flexlayout__tab_toolbar_sticky_buttons_container" /* FLEXLAYOUT__TAB_TOOLBAR_STICKY_BUTTONS_CONTAINER */),
+            children: stickyButtons
           },
-          stickyButtons
+          "sticky_buttons_container"
         )
       );
     }
@@ -4677,97 +4178,83 @@ var TabSet = (props) => {
       if (typeof icons.more === "function") {
         overflowContent = icons.more(node, hiddenTabs);
       } else {
-        overflowContent = /* @__PURE__ */ React15.createElement(React15.Fragment, null, icons.more, /* @__PURE__ */ React15.createElement("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */) }, hiddenTabs.length));
+        overflowContent = /* @__PURE__ */ jsxs7(Fragment3, { children: [
+          icons.more,
+          /* @__PURE__ */ jsx13("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */), children: hiddenTabs.length })
+        ] });
       }
       void buttons.splice(
         Math.min(renderState.overflowPosition, buttons.length),
         0,
-        /* @__PURE__ */ React15.createElement(
+        /* @__PURE__ */ jsx13(
           "button",
           {
-            key: "overflowbutton",
             "data-layout-path": path + "/button/overflow",
             ref: overflowbuttonRef,
             className: cm("flexlayout__tab_toolbar_button" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON */) + " " + cm("flexlayout__tab_button_overflow" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW */),
             title: overflowTitle,
             onClick: onOverflowClick,
-            onPointerDown: onInterceptPointerDown
+            onPointerDown: onInterceptPointerDown,
+            children: overflowContent
           },
-          overflowContent
+          "overflowbutton"
         )
       );
     }
   }
-  if (selectedTabNode !== void 0 && layout.isSupportsPopout() && selectedTabNode.isEnablePopout() && selectedTabNode.isEnablePopoutIcon()) {
-    const popoutTitle = layout.i18nName("Popout selected tab" /* Popout_Tab */);
-    buttons.push(
-      /* @__PURE__ */ React15.createElement(
-        "button",
-        {
-          key: "popout",
-          "data-layout-path": path + "/button/popout",
-          title: popoutTitle,
-          className: cm("flexlayout__tab_toolbar_button" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON */) + " " + cm("flexlayout__tab_toolbar_button-float" /* FLEXLAYOUT__TAB_TOOLBAR_BUTTON_FLOAT */),
-          onClick: onPopoutTab,
-          onPointerDown: onInterceptPointerDown
-        },
-        typeof icons.popout === "function" ? icons.popout(selectedTabNode) : icons.popout
-      )
-    );
-  }
   if (node.canMaximize()) {
     const minTitle = layout.i18nName("Restore tab set" /* Restore */);
     const maxTitle = layout.i18nName("Maximize tab set" /* Maximize */);
     buttons.push(
-      /* @__PURE__ */ React15.createElement(
+      /* @__PURE__ */ jsx13(
         "button",
         {
-          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")),
           onClick: onMaximizeToggle,
-          onPointerDown: onInterceptPointerDown
+          onPointerDown: onInterceptPointerDown,
+          children: node.isMaximized() ? typeof icons.restore === "function" ? icons.restore(node) : icons.restore : typeof icons.maximize === "function" ? icons.maximize(node) : icons.maximize
         },
-        node.isMaximized() ? typeof icons.restore === "function" ? icons.restore(node) : icons.restore : typeof icons.maximize === "function" ? icons.maximize(node) : icons.maximize
+        "max"
       )
     );
   }
   if (!node.isMaximized() && showClose) {
     const title = isTabStretch ? layout.i18nName("Close" /* Close_Tab */) : layout.i18nName("Close tab set" /* Close_Tabset */);
     buttons.push(
-      /* @__PURE__ */ React15.createElement(
+      /* @__PURE__ */ jsx13(
         "button",
         {
-          key: "close",
           "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: isTabStretch ? onCloseTab : onClose,
-          onPointerDown: onInterceptPointerDown
+          onPointerDown: onInterceptPointerDown,
+          children: typeof icons.closeTabset === "function" ? icons.closeTabset(node) : icons.closeTabset
         },
-        typeof icons.closeTabset === "function" ? icons.closeTabset(node) : icons.closeTabset
+        "close"
       )
     );
   }
   if (node.isActive() && node.isEnableActiveIcon()) {
     const title = layout.i18nName("Active tab set" /* Active_Tabset */);
     buttons.push(
-      /* @__PURE__ */ React15.createElement("div", { key: "active", "data-layout-path": path + "/button/active", title, className: cm("flexlayout__tab_toolbar_icon" /* FLEXLAYOUT__TAB_TOOLBAR_ICON */) }, typeof icons.activeTabset === "function" ? icons.activeTabset(node) : icons.activeTabset)
+      /* @__PURE__ */ jsx13("div", { "data-layout-path": path + "/button/active", title, className: cm("flexlayout__tab_toolbar_icon" /* FLEXLAYOUT__TAB_TOOLBAR_ICON */), children: typeof icons.activeTabset === "function" ? icons.activeTabset(node) : icons.activeTabset }, "active")
     );
   }
-  const buttonbar = /* @__PURE__ */ React15.createElement(
+  const buttonbar = /* @__PURE__ */ jsx13(
     "div",
     {
-      key: "buttonbar",
       ref: buttonBarRef,
       className: cm("flexlayout__tab_toolbar" /* FLEXLAYOUT__TAB_TOOLBAR */),
       onPointerDown: onInterceptPointerDown,
       onDragStart: (e) => {
         e.preventDefault();
-      }
+      },
+      children: buttons
     },
-    buttons
+    "buttonbar"
   );
   let tabStrip;
   let tabStripClasses = cm("flexlayout__tabset_tabbar_outer" /* FLEXLAYOUT__TABSET_TABBAR_OUTER */);
@@ -4789,7 +4276,7 @@ var TabSet = (props) => {
   }
   if (node.isEnableTabWrap()) {
     if (node.isEnableTabStrip()) {
-      tabStrip = /* @__PURE__ */ React15.createElement(
+      tabStrip = /* @__PURE__ */ jsxs7(
         "div",
         {
           className: tabStripClasses,
@@ -4802,16 +4289,18 @@ var TabSet = (props) => {
           onClick: onAuxMouseClick,
           onAuxClick: onAuxMouseClick,
           draggable: true,
-          onDragStart
-        },
-        tabs,
-        /* @__PURE__ */ React15.createElement("div", { style: { flexGrow: 1 } }),
-        buttonbar
+          onDragStart,
+          children: [
+            tabs,
+            /* @__PURE__ */ jsx13("div", { style: { flexGrow: 1 } }),
+            buttonbar
+          ]
+        }
       );
     }
   } else {
     if (node.isEnableTabStrip()) {
-      tabStrip = /* @__PURE__ */ React15.createElement(
+      tabStrip = /* @__PURE__ */ jsxs7(
         "div",
         {
           className: tabStripClasses,
@@ -4824,17 +4313,19 @@ var TabSet = (props) => {
           onAuxClick: onAuxMouseClick,
           draggable: true,
           onWheel: onMouseWheel,
-          onDragStart
-        },
-        /* @__PURE__ */ React15.createElement("div", { ref: tabStripInnerRef, className: cm("flexlayout__tabset_tabbar_inner" /* FLEXLAYOUT__TABSET_TABBAR_INNER */) + " " + cm("flexlayout__tabset_tabbar_inner_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_ */ + node.getTabLocation()) }, /* @__PURE__ */ React15.createElement(
-          "div",
-          {
-            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())
-          },
-          tabs
-        )),
-        buttonbar
+          onDragStart,
+          children: [
+            /* @__PURE__ */ jsx13("div", { ref: tabStripInnerRef, className: cm("flexlayout__tabset_tabbar_inner" /* FLEXLAYOUT__TABSET_TABBAR_INNER */) + " " + cm("flexlayout__tabset_tabbar_inner_" /* FLEXLAYOUT__TABSET_TABBAR_INNER_ */ + node.getTabLocation()), children: /* @__PURE__ */ jsx13(
+              "div",
+              {
+                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()),
+                children: tabs
+              }
+            ) }),
+            buttonbar
+          ]
+        }
       );
     }
   }
@@ -4845,11 +4336,17 @@ var TabSet = (props) => {
       emptyTabset = placeHolderCallback(node);
     }
   }
-  let content = /* @__PURE__ */ React15.createElement("div", { ref: contentRef, className: cm("flexlayout__tabset_content" /* FLEXLAYOUT__TABSET_CONTENT */) }, emptyTabset);
+  let content = /* @__PURE__ */ jsx13("div", { ref: contentRef, className: cm("flexlayout__tabset_content" /* FLEXLAYOUT__TABSET_CONTENT */), children: emptyTabset });
   if (node.getTabLocation() === "top") {
-    content = /* @__PURE__ */ React15.createElement(React15.Fragment, null, tabStrip, content);
+    content = /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      tabStrip,
+      content
+    ] });
   } else {
-    content = /* @__PURE__ */ React15.createElement(React15.Fragment, null, content, tabStrip);
+    content = /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      content,
+      tabStrip
+    ] });
   }
   const style2 = {
     flexGrow: Math.max(1, node.getWeight() * 1e3),
@@ -4861,11 +4358,11 @@ var TabSet = (props) => {
   if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== void 0 && !node.isMaximized()) {
     style2.display = "none";
   }
-  const tabset = /* @__PURE__ */ React15.createElement("div", { ref: selfRef, className: cm("flexlayout__tabset_container" /* FLEXLAYOUT__TABSET_CONTAINER */), style: style2 }, /* @__PURE__ */ React15.createElement("div", { className: cm("flexlayout__tabset" /* FLEXLAYOUT__TABSET */), "data-layout-path": path }, content));
+  const tabset = /* @__PURE__ */ jsx13("div", { ref: selfRef, className: cm("flexlayout__tabset_container" /* FLEXLAYOUT__TABSET_CONTAINER */), style: style2, children: /* @__PURE__ */ jsx13("div", { className: cm("flexlayout__tabset" /* FLEXLAYOUT__TABSET */), "data-layout-path": path, children: content }) });
   if (node.isMaximized()) {
     if (layout.getMainElement()) {
-      return createPortal2(
-        /* @__PURE__ */ React15.createElement(
+      return createPortal(
+        /* @__PURE__ */ jsx13(
           "div",
           {
             style: {
@@ -4875,9 +4372,9 @@ var TabSet = (props) => {
               left: 0,
               bottom: 0,
               right: 0
-            }
-          },
-          tabset
+            },
+            children: tabset
+          }
         ),
         layout.getMainElement()
       );
@@ -4890,23 +4387,24 @@ var TabSet = (props) => {
 };
 
 // src/view/Row.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
 var Row = (props) => {
   const { layout, node } = props;
-  const selfRef = React16.useRef(null);
+  const selfRef = useRef9(null);
   const horizontal = node.getOrientation() === Orientation.HORZ;
-  React16.useLayoutEffect(() => {
+  useLayoutEffect6(() => {
     node.setRect(layout.getBoundingClientRect(selfRef.current));
   });
   const items = [];
   let i = 0;
   for (const child of node.getChildren()) {
     if (i > 0) {
-      items.push(/* @__PURE__ */ React16.createElement(Splitter, { key: "splitter" + i, layout, node, index: i, horizontal }));
+      items.push(/* @__PURE__ */ jsx14(Splitter, { layout, node, index: i, horizontal }, "splitter" + i));
     }
     if (child instanceof RowNode) {
-      items.push(/* @__PURE__ */ React16.createElement(Row, { key: child.getId(), layout, node: child }));
+      items.push(/* @__PURE__ */ jsx14(Row, { layout, node: child }, child.getId()));
     } else if (child instanceof TabSetNode) {
-      items.push(/* @__PURE__ */ React16.createElement(TabSet, { key: child.getId(), layout, node: child }));
+      items.push(/* @__PURE__ */ jsx14(TabSet, { layout, node: child }, child.getId()));
     }
     i++;
   }
@@ -4923,18 +4421,19 @@ var Row = (props) => {
   } else {
     style2.flexDirection = "column";
   }
-  return /* @__PURE__ */ React16.createElement("div", { ref: selfRef, className: layout.getClassName("flexlayout__row" /* FLEXLAYOUT__ROW */), style: style2 }, items);
+  return /* @__PURE__ */ jsx14("div", { ref: selfRef, className: layout.getClassName("flexlayout__row" /* FLEXLAYOUT__ROW */), style: style2, children: items });
 };
 
 // src/view/Tab.tsx
-import * as React17 from "react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect7, useRef as useRef10 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { layout, selected, node, path } = props;
-  const selfRef = React17.useRef(null);
-  const firstSelect = React17.useRef(true);
+  const selfRef = useRef10(null);
+  const firstSelect = useRef10(true);
   const parentNode = node.getParent();
   const rect = parentNode.getContentRect();
-  React17.useLayoutEffect(() => {
+  useLayoutEffect7(() => {
     const element = node.getMoveableElement();
     selfRef.current.appendChild(element);
     node.setMoveableElement(element);
@@ -4951,7 +4450,7 @@ var Tab = (props) => {
       node.setVisible(false);
     };
   }, []);
-  React17.useEffect(() => {
+  useEffect5(() => {
     if (node.isSelected()) {
       if (firstSelect.current) {
         node.restoreScrollPosition();
@@ -4959,10 +4458,10 @@ var Tab = (props) => {
       }
     }
   }, [selected]);
-  React17.useLayoutEffect(() => {
+  useLayoutEffect7(() => {
     node.setRect(rect);
   }, [rect, node]);
-  React17.useLayoutEffect(() => {
+  useLayoutEffect7(() => {
     node.setVisible(selected);
   }, [selected, node]);
   const onPointerDown = () => {
@@ -4976,14 +4475,7 @@ var Tab = (props) => {
   const cm = layout.getClassName;
   const style2 = {};
   rect.styleWithPosition(style2);
-  let overlay = null;
-  if (selected) {
-    if (document.hidden && node.isEnablePopoutOverlay()) {
-      const overlayStyle = {};
-      rect.styleWithPosition(overlayStyle);
-      overlay = /* @__PURE__ */ React17.createElement("div", { style: overlayStyle, className: cm("flexlayout__tab_overlay" /* FLEXLAYOUT__TAB_OVERLAY */) });
-    }
-  } else {
+  if (!selected) {
     style2.display = "none";
   }
   if (parentNode instanceof TabSetNode) {
@@ -5003,14 +4495,15 @@ var Tab = (props) => {
   if (node.getContentClassName() !== void 0) {
     className += " " + node.getContentClassName();
   }
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, overlay, /* @__PURE__ */ React17.createElement("div", { ref: selfRef, style: style2, className, "data-layout-path": path }));
+  return /* @__PURE__ */ jsx15("div", { ref: selfRef, style: style2, className, "data-layout-path": path });
 };
 
 // src/view/SizeTracker.tsx
-import * as React18 from "react";
-var SizeTracker = React18.memo(
+import { memo } from "react";
+import { Fragment as Fragment4, jsx as jsx16 } from "react/jsx-runtime";
+var SizeTracker = memo(
   ({ children }) => {
-    return /* @__PURE__ */ React18.createElement(React18.Fragment, null, children);
+    return /* @__PURE__ */ jsx16(Fragment4, { children });
   },
   (prevProps, nextProps) => {
     return prevProps.rect.equalSize(nextProps.rect) && prevProps.selected === nextProps.selected && prevProps.forceRevision === nextProps.forceRevision && prevProps.tabsRevision === nextProps.tabsRevision;
@@ -5019,7 +4512,8 @@ var SizeTracker = React18.memo(
 SizeTracker.displayName = "SizeTracker";
 
 // src/view/Layout.tsx
-var Layout = class extends React19.Component {
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var Layout = class extends Component2 {
   /** @internal */
   selfRef;
   /** @internal */
@@ -5028,7 +4522,7 @@ var Layout = class extends React19.Component {
   /** @internal */
   constructor(props) {
     super(props);
-    this.selfRef = React19.createRef();
+    this.selfRef = createRef();
     this.revision = 0;
   }
   /** re-render the layout */
@@ -5088,10 +4582,10 @@ var Layout = class extends React19.Component {
   }
   /** @internal */
   render() {
-    return /* @__PURE__ */ React19.createElement(LayoutInternal, { ref: this.selfRef, ...this.props, renderRevision: this.revision++ });
+    return /* @__PURE__ */ jsx17(LayoutInternal, { ref: this.selfRef, ...this.props, renderRevision: this.revision++ });
   }
 };
-var LayoutInternal = class _LayoutInternal extends React19.Component {
+var LayoutInternal = class _LayoutInternal extends Component2 {
   static dragState = void 0;
   selfRef;
   moveablesRef;
@@ -5103,37 +4597,19 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   dropInfo;
   outlineDiv;
   currentDocument;
-  currentWindow;
-  supportsPopout;
-  popoutURL;
   icons;
   resizeObserver;
   dragEnterCount = 0;
   dragging = false;
-  windowId;
-  layoutWindow;
-  mainLayout;
-  isMainWindow;
-  isDraggingOverWindow;
-  styleObserver;
-  popoutWindowName;
   // private renderCount: any;
   constructor(props) {
     super(props);
     this.orderedIds = [];
-    this.selfRef = React19.createRef();
-    this.moveablesRef = React19.createRef();
-    this.mainRef = React19.createRef();
-    this.findBorderBarSizeRef = React19.createRef();
-    this.supportsPopout = props.supportsPopout !== void 0 ? props.supportsPopout : defaultSupportsPopout;
-    this.popoutURL = props.popoutURL ? props.popoutURL : "popout.html";
+    this.selfRef = createRef();
+    this.moveablesRef = createRef();
+    this.mainRef = createRef();
+    this.findBorderBarSizeRef = createRef();
     this.icons = { ...defaultIcons, ...props.icons };
-    this.windowId = props.windowId ? props.windowId : Model.MAIN_WINDOW_ID;
-    this.mainLayout = this.props.mainLayout ? this.props.mainLayout : this;
-    this.isDraggingOverWindow = false;
-    this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);
-    this.layoutWindow.layout = this;
-    this.popoutWindowName = this.props.popoutWindowName || "Popout Window";
     this.state = {
       rect: Rect.empty(),
       editingTab: void 0,
@@ -5144,14 +4620,11 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       forceRevision: 0,
       showHiddenBorder: DockLocation.CENTER
     };
-    this.isMainWindow = this.windowId === Model.MAIN_WINDOW_ID;
   }
   componentDidMount() {
     this.updateRect();
     this.currentDocument = this.selfRef.current.ownerDocument;
-    this.currentWindow = this.currentDocument.defaultView;
-    this.layoutWindow.window = this.currentWindow;
-    this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);
+    this.props.model.layout = this;
     this.resizeObserver = new ResizeObserver((_entries) => {
       requestAnimationFrame(() => {
         this.updateRect();
@@ -5160,81 +4633,49 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     if (this.selfRef.current) {
       this.resizeObserver.observe(this.selfRef.current);
     }
-    if (this.isMainWindow) {
-      this.props.model.addChangeListener(this.onModelChange);
-      this.updateLayoutMetrics();
-    } else {
-      this.currentWindow.addEventListener("resize", () => {
-        this.updateRect();
-      });
-      const sourceElement = this.props.mainLayout.getRootDiv();
-      const targetElement = this.selfRef.current;
-      copyInlineStyles(sourceElement, targetElement);
-      this.styleObserver = new MutationObserver(() => {
-        const changed = copyInlineStyles(sourceElement, targetElement);
-        if (changed) {
-          this.redraw("mutation observer");
-        }
-      });
-      this.styleObserver.observe(sourceElement, { attributeFilter: ["style"] });
-    }
+    this.props.model.addChangeListener(this.onModelChange);
+    this.updateLayoutMetrics();
     document.addEventListener("visibilitychange", () => {
-      for (const [_, layoutWindow] of this.props.model.getwindowsMap()) {
-        const layout = layoutWindow.layout;
-        if (layout) {
-          this.redraw("visibility change");
-        }
-      }
+      this.redraw("visibility change");
     });
   }
   componentDidUpdate() {
     this.currentDocument = this.selfRef.current.ownerDocument;
-    this.currentWindow = this.currentDocument.defaultView;
-    if (this.isMainWindow) {
-      if (this.props.model !== this.previousModel) {
-        if (this.previousModel !== void 0) {
-          this.previousModel.removeChangeListener(this.onModelChange);
-        }
-        this.props.model.getwindowsMap().get(this.windowId).layout = this;
-        this.props.model.addChangeListener(this.onModelChange);
-        this.layoutWindow = this.props.model.getwindowsMap().get(this.windowId);
-        this.layoutWindow.layout = this;
-        this.layoutWindow.toScreenRectFunction = (r) => this.getScreenRect(r);
-        this.previousModel = this.props.model;
-        this.tidyMoveablesMap();
+    if (this.props.model !== this.previousModel) {
+      if (this.previousModel !== void 0) {
+        this.previousModel.removeChangeListener(this.onModelChange);
       }
-      this.updateLayoutMetrics();
+      this.props.model.layout = this;
+      this.props.model.addChangeListener(this.onModelChange);
+      this.previousModel = this.props.model;
+      this.tidyMoveablesMap();
     }
+    this.updateLayoutMetrics();
   }
   componentWillUnmount() {
     if (this.selfRef.current) {
       this.resizeObserver?.unobserve(this.selfRef.current);
     }
-    this.styleObserver?.disconnect();
   }
   render() {
     if (!this.selfRef.current) {
-      return /* @__PURE__ */ React19.createElement("div", { ref: this.selfRef, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) }, /* @__PURE__ */ React19.createElement("div", { ref: this.moveablesRef, key: "__moveables__", className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_MOVEABLES */) }), this.renderMetricsElements());
+      return /* @__PURE__ */ jsxs8("div", { ref: this.selfRef, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */), children: [
+        /* @__PURE__ */ jsx17("div", { ref: this.moveablesRef, className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_MOVEABLES */) }, "__moveables__"),
+        this.renderMetricsElements()
+      ] });
     }
     const model = this.props.model;
-    model.getRoot(this.windowId).calcMinMaxSize();
-    model.getRoot(this.windowId).setPaths("");
+    model.getRoot().calcMinMaxSize();
+    model.getRoot().setPaths("");
     model.getBorderSet().setPaths();
     const inner = this.renderLayout();
     const outer = this.renderBorders(inner);
     const tabs = this.renderTabs();
     const reorderedTabs = this.reorderComponents(tabs, this.orderedIds);
-    let floatingWindows = null;
-    let tabMoveables = null;
-    let tabStamps = null;
-    let metricElements = null;
-    if (this.isMainWindow) {
-      floatingWindows = this.renderWindows();
-      metricElements = this.renderMetricsElements();
-      tabMoveables = this.renderTabMoveables();
-      tabStamps = /* @__PURE__ */ React19.createElement("div", { key: "__tabStamps__", className: this.getClassName("flexlayout__layout_tab_stamps" /* FLEXLAYOUT__LAYOUT_TAB_STAMPS */) }, this.renderTabStamps());
-    }
-    return /* @__PURE__ */ React19.createElement(
+    const metricElements = this.renderMetricsElements();
+    const tabMoveables = this.renderTabMoveables();
+    const tabStamps = /* @__PURE__ */ jsx17("div", { className: this.getClassName("flexlayout__layout_tab_stamps" /* FLEXLAYOUT__LAYOUT_TAB_STAMPS */), children: this.renderTabStamps() }, "__tabStamps__");
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         ref: this.selfRef,
@@ -5242,135 +4683,141 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
         onDragEnter: this.onDragEnterRaw,
         onDragLeave: this.onDragLeaveRaw,
         onDragOver: this.onDragOver,
-        onDrop: this.onDrop
-      },
-      /* @__PURE__ */ React19.createElement("div", { ref: this.moveablesRef, key: "__moveables__", className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_MOVEABLES */) }),
-      metricElements,
-      /* @__PURE__ */ React19.createElement(Overlay, { key: "__overlay__", layout: this, show: this.state.showOverlay }),
-      outer,
-      reorderedTabs,
-      tabMoveables,
-      tabStamps,
-      this.state.portal,
-      floatingWindows
+        onDrop: this.onDrop,
+        children: [
+          /* @__PURE__ */ jsx17("div", { ref: this.moveablesRef, className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_MOVEABLES */) }, "__moveables__"),
+          metricElements,
+          /* @__PURE__ */ jsx17(Overlay, { layout: this, show: this.state.showOverlay }, "__overlay__"),
+          outer,
+          reorderedTabs,
+          tabMoveables,
+          tabStamps,
+          this.state.portal
+        ]
+      }
     );
   }
   renderBorders(inner) {
     const classMain = this.getClassName("flexlayout__layout_main" /* FLEXLAYOUT__LAYOUT_MAIN */);
     const borders = this.props.model.getBorderSet().getBorderMap();
-    if (this.isMainWindow && borders.size > 0) {
-      inner = /* @__PURE__ */ React19.createElement("div", { className: classMain, ref: this.mainRef }, inner);
+    if (borders.size > 0) {
+      inner = /* @__PURE__ */ jsx17("div", { className: classMain, ref: this.mainRef, children: inner });
       const borderSetComponents = /* @__PURE__ */ new Map();
       const borderSetContentComponents = /* @__PURE__ */ new Map();
       for (const [_, location] of DockLocation.values) {
         const border = borders.get(location);
         const showBorder = border && (!border.isAutoHide() || border.isAutoHide() && (border.getChildren().length > 0 || this.state.showHiddenBorder === location));
         if (showBorder) {
-          borderSetComponents.set(location, /* @__PURE__ */ React19.createElement(BorderTabSet, { layout: this, border, size: this.state.calculatedBorderBarSize }));
-          borderSetContentComponents.set(location, /* @__PURE__ */ React19.createElement(BorderTab, { layout: this, border, show: border.getSelected() !== -1 }));
+          borderSetComponents.set(location, /* @__PURE__ */ jsx17(BorderTabSet, { layout: this, border, size: this.state.calculatedBorderBarSize }));
+          borderSetContentComponents.set(location, /* @__PURE__ */ jsx17(BorderTab, { layout: this, border, show: border.getSelected() !== -1 }));
         }
       }
       const classBorderOuter = this.getClassName("flexlayout__layout_border_container" /* FLEXLAYOUT__LAYOUT_BORDER_CONTAINER */);
       const classBorderInner = this.getClassName("flexlayout__layout_border_container_inner" /* FLEXLAYOUT__LAYOUT_BORDER_CONTAINER_INNER */);
       if (this.props.model.getBorderSet().getLayoutHorizontal()) {
-        const innerWithBorderTabs = /* @__PURE__ */ React19.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } }, borderSetContentComponents.get(DockLocation.TOP), /* @__PURE__ */ React19.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } }, borderSetContentComponents.get(DockLocation.LEFT), inner, borderSetContentComponents.get(DockLocation.RIGHT)), borderSetContentComponents.get(DockLocation.BOTTOM));
-        return /* @__PURE__ */ React19.createElement("div", { className: classBorderOuter, style: { flexDirection: "column" } }, borderSetComponents.get(DockLocation.TOP), /* @__PURE__ */ React19.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } }, borderSetComponents.get(DockLocation.LEFT), innerWithBorderTabs, borderSetComponents.get(DockLocation.RIGHT)), borderSetComponents.get(DockLocation.BOTTOM));
-      } else {
-        const innerWithBorderTabs = /* @__PURE__ */ React19.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } }, borderSetContentComponents.get(DockLocation.LEFT), /* @__PURE__ */ React19.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } }, borderSetContentComponents.get(DockLocation.TOP), inner, borderSetContentComponents.get(DockLocation.BOTTOM)), borderSetContentComponents.get(DockLocation.RIGHT));
-        return /* @__PURE__ */ React19.createElement("div", { className: classBorderOuter, style: { flexDirection: "row" } }, borderSetComponents.get(DockLocation.LEFT), /* @__PURE__ */ React19.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } }, borderSetComponents.get(DockLocation.TOP), innerWithBorderTabs, borderSetComponents.get(DockLocation.BOTTOM)), borderSetComponents.get(DockLocation.RIGHT));
-      }
-    } else {
-      return /* @__PURE__ */ React19.createElement("div", { className: classMain, ref: this.mainRef, style: { position: "absolute", top: 0, left: 0, bottom: 0, right: 0, display: "flex" } }, inner);
-    }
+        const innerWithBorderTabs2 = /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "column" }, children: [
+          borderSetContentComponents.get(DockLocation.TOP),
+          /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "row" }, children: [
+            borderSetContentComponents.get(DockLocation.LEFT),
+            inner,
+            borderSetContentComponents.get(DockLocation.RIGHT)
+          ] }),
+          borderSetContentComponents.get(DockLocation.BOTTOM)
+        ] });
+        return /* @__PURE__ */ jsxs8("div", { className: classBorderOuter, style: { flexDirection: "column" }, children: [
+          borderSetComponents.get(DockLocation.TOP),
+          /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "row" }, children: [
+            borderSetComponents.get(DockLocation.LEFT),
+            innerWithBorderTabs2,
+            borderSetComponents.get(DockLocation.RIGHT)
+          ] }),
+          borderSetComponents.get(DockLocation.BOTTOM)
+        ] });
+      }
+      const innerWithBorderTabs = /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "row" }, children: [
+        borderSetContentComponents.get(DockLocation.LEFT),
+        /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "column" }, children: [
+          borderSetContentComponents.get(DockLocation.TOP),
+          inner,
+          borderSetContentComponents.get(DockLocation.BOTTOM)
+        ] }),
+        borderSetContentComponents.get(DockLocation.RIGHT)
+      ] });
+      return /* @__PURE__ */ jsxs8("div", { className: classBorderOuter, style: { flexDirection: "row" }, children: [
+        borderSetComponents.get(DockLocation.LEFT),
+        /* @__PURE__ */ jsxs8("div", { className: classBorderInner, style: { flexDirection: "column" }, children: [
+          borderSetComponents.get(DockLocation.TOP),
+          innerWithBorderTabs,
+          borderSetComponents.get(DockLocation.BOTTOM)
+        ] }),
+        borderSetComponents.get(DockLocation.RIGHT)
+      ] });
+    }
+    return /* @__PURE__ */ jsx17("div", { className: classMain, ref: this.mainRef, style: { position: "absolute", top: 0, left: 0, bottom: 0, right: 0, display: "flex" }, children: inner });
   }
   renderLayout() {
-    return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(Row, { key: "__row__", layout: this, node: this.props.model.getRoot(this.windowId) }), this.renderEdgeIndicators());
+    return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      /* @__PURE__ */ jsx17(Row, { layout: this, node: this.props.model.getRoot() }, "__row__"),
+      this.renderEdgeIndicators()
+    ] });
   }
   renderEdgeIndicators() {
     const edges = [];
     const arrowIcon = this.icons.edgeArrow;
     if (this.state.showEdges) {
-      const r = this.props.model.getRoot(this.windowId).getRect();
+      const r = this.props.model.getRoot().getRect();
       const length = edgeRectLength;
       const width = edgeRectWidth;
       const offset = edgeRectLength / 2;
       const className = this.getClassName("flexlayout__edge_rect" /* FLEXLAYOUT__EDGE_RECT */);
       const radius = 50;
       edges.push(
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ jsx17(
           "div",
           {
-            key: "North",
             style: { top: 0, left: r.width / 2 - offset, width: length, height: width, borderBottomLeftRadius: radius, borderBottomRightRadius: radius },
-            className: className + " " + this.getClassName("flexlayout__edge_rect_top" /* FLEXLAYOUT__EDGE_RECT_TOP */)
+            className: className + " " + this.getClassName("flexlayout__edge_rect_top" /* FLEXLAYOUT__EDGE_RECT_TOP */),
+            children: /* @__PURE__ */ jsx17("div", { style: { transform: "rotate(180deg)" }, children: arrowIcon })
           },
-          /* @__PURE__ */ React19.createElement("div", { style: { transform: "rotate(180deg)" } }, arrowIcon)
+          "North"
         )
       );
       edges.push(
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ jsx17(
           "div",
           {
-            key: "West",
             style: { top: r.height / 2 - offset, left: 0, width, height: length, borderTopRightRadius: radius, borderBottomRightRadius: radius },
-            className: className + " " + this.getClassName("flexlayout__edge_rect_left" /* FLEXLAYOUT__EDGE_RECT_LEFT */)
+            className: className + " " + this.getClassName("flexlayout__edge_rect_left" /* FLEXLAYOUT__EDGE_RECT_LEFT */),
+            children: /* @__PURE__ */ jsx17("div", { style: { transform: "rotate(90deg)" }, children: arrowIcon })
           },
-          /* @__PURE__ */ React19.createElement("div", { style: { transform: "rotate(90deg)" } }, arrowIcon)
+          "West"
         )
       );
       edges.push(
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ jsx17(
           "div",
           {
-            key: "South",
             style: { top: r.height - width, left: r.width / 2 - offset, width: length, height: width, borderTopLeftRadius: radius, borderTopRightRadius: radius },
-            className: className + " " + this.getClassName("flexlayout__edge_rect_bottom" /* FLEXLAYOUT__EDGE_RECT_BOTTOM */)
+            className: className + " " + this.getClassName("flexlayout__edge_rect_bottom" /* FLEXLAYOUT__EDGE_RECT_BOTTOM */),
+            children: /* @__PURE__ */ jsx17("div", { children: arrowIcon })
           },
-          /* @__PURE__ */ React19.createElement("div", null, arrowIcon)
+          "South"
         )
       );
       edges.push(
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ jsx17(
           "div",
           {
-            key: "East",
             style: { top: r.height / 2 - offset, left: r.width - width, width, height: length, borderTopLeftRadius: radius, borderBottomLeftRadius: radius },
-            className: className + " " + this.getClassName("flexlayout__edge_rect_right" /* FLEXLAYOUT__EDGE_RECT_RIGHT */)
+            className: className + " " + this.getClassName("flexlayout__edge_rect_right" /* FLEXLAYOUT__EDGE_RECT_RIGHT */),
+            children: /* @__PURE__ */ jsx17("div", { style: { transform: "rotate(-90deg)" }, children: arrowIcon })
           },
-          /* @__PURE__ */ React19.createElement("div", { style: { transform: "rotate(-90deg)" } }, arrowIcon)
+          "East"
         )
       );
     }
     return edges;
   }
-  renderWindows() {
-    const floatingWindows = [];
-    if (this.supportsPopout) {
-      const windows = this.props.model.getwindowsMap();
-      let i = 1;
-      for (const [windowId, layoutWindow] of windows) {
-        if (windowId !== Model.MAIN_WINDOW_ID) {
-          floatingWindows.push(
-            /* @__PURE__ */ React19.createElement(
-              PopoutWindow,
-              {
-                key: windowId,
-                layout: this,
-                title: this.popoutWindowName + " " + i,
-                layoutWindow,
-                url: this.popoutURL + "?id=" + windowId,
-                onSetWindow: this.onSetWindow,
-                onCloseWindow: this.onCloseWindow
-              },
-              /* @__PURE__ */ React19.createElement(_LayoutInternal, { ...this.props, windowId, mainLayout: this })
-            )
-          );
-          i++;
-        }
-      }
-    }
-    return floatingWindows;
-  }
   renderTabMoveables() {
     const tabMoveables = [];
     this.props.model.visitNodes((node) => {
@@ -5382,10 +4829,10 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
         const rect = child.getParent().getContentRect();
         const renderTab = child.isRendered() || (selected || !child.isEnableRenderOnDemand()) && rect.width > 0 && rect.height > 0;
         if (renderTab) {
-          const key = child.getId() + (child.isEnableWindowReMount() ? child.getWindowId() : "");
+          const key = child.getId();
           tabMoveables.push(
-            createPortal3(
-              /* @__PURE__ */ React19.createElement(SizeTracker, { rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key }, /* @__PURE__ */ React19.createElement(ErrorBoundary, { message: this.i18nName("Error rendering component" /* Error_rendering_component */) }, this.props.factory(child))),
+            createPortal2(
+              /* @__PURE__ */ jsx17(SizeTracker, { rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, children: /* @__PURE__ */ jsx17(ErrorBoundary, { message: this.i18nName("Error rendering component" /* Error_rendering_component */), children: this.props.factory(child) }) }, key),
               element,
               key
             )
@@ -5401,33 +4848,28 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     this.props.model.visitNodes((node) => {
       if (node instanceof TabNode) {
         const child = node;
-        tabStamps.push(/* @__PURE__ */ React19.createElement(DragContainer, { key: child.getId(), layout: this, node: child }));
+        tabStamps.push(/* @__PURE__ */ jsx17(DragContainer, { layout: this, node: child }, child.getId()));
       }
     });
     return tabStamps;
   }
   renderTabs() {
     const tabs = /* @__PURE__ */ new Map();
-    this.props.model.visitWindowNodes(this.windowId, (node) => {
+    this.props.model.visitNodes((node) => {
       if (node instanceof TabNode) {
         const child = node;
         const selected = child.isSelected();
         const path = child.getPath();
         const renderTab = child.isRendered() || selected || !child.isEnableRenderOnDemand();
         if (renderTab) {
-          tabs.set(
-            child.getId(),
-            // <SizeTracker rect={rect} forceRevision={this.state.forceRevision} key={key}>
-            /* @__PURE__ */ React19.createElement(Tab, { key: child.getId(), layout: this, path, node: child, selected })
-            // </SizeTracker>
-          );
+          tabs.set(child.getId(), /* @__PURE__ */ jsx17(Tab, { layout: this, path, node: child, selected }, child.getId()));
         }
       }
     });
     return tabs;
   }
   renderMetricsElements() {
-    return /* @__PURE__ */ React19.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, className: this.getClassName("flexlayout__border_sizer" /* FLEXLAYOUT__BORDER_SIZER */) }, "FindBorderBarSize");
+    return /* @__PURE__ */ jsx17("div", { ref: this.findBorderBarSizeRef, className: this.getClassName("flexlayout__border_sizer" /* FLEXLAYOUT__BORDER_SIZER */), children: "FindBorderBarSize" }, "findBorderBarSize");
   }
   checkForBorderToShow(x, y) {
     const r = this.getBoundingClientRect(this.mainRef.current);
@@ -5481,7 +4923,6 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   reorderComponents(components, ids) {
     const nextIds = [];
     const nextIdsSet = /* @__PURE__ */ new Set();
-    let reordered = [];
     for (const id of ids) {
       if (components.get(id)) {
         nextIds.push(id);
@@ -5494,7 +4935,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
         ids.push(id);
       }
     }
-    reordered = ids.map((id) => {
+    const reordered = ids.map((id) => {
       return components.get(id);
     });
     return reordered;
@@ -5506,12 +4947,12 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     }
   };
   redraw(_type) {
-    this.mainLayout.setState((state, _props) => {
+    this.setState((state, _props) => {
       return { forceRevision: state.forceRevision + 1 };
     });
   }
   redrawInternal(_type) {
-    this.mainLayout.setState((state, _props) => {
+    this.setState((state, _props) => {
       return { layoutRevision: state.layoutRevision + 1 };
     });
   }
@@ -5522,17 +4963,13 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
         return this.props.model.doAction(outcome);
       }
       return void 0;
-    } else {
-      return this.props.model.doAction(action);
     }
+    return this.props.model.doAction(action);
   }
   updateRect = () => {
     const rect = this.getDomRect();
     if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
       this.setState({ rect });
-      if (this.windowId !== Model.MAIN_WINDOW_ID) {
-        this.redrawInternal("rect updated");
-      }
     }
   };
   getBoundingClientRect(div) {
@@ -5556,14 +4993,13 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     return moveableElement;
   }
   getMainLayout() {
-    return this.mainLayout;
+    return this;
   }
   getClassName = (defaultClassName) => {
     if (this.props.classNameMapper === void 0) {
       return defaultClassName;
-    } else {
-      return this.props.classNameMapper(defaultClassName);
     }
+    return this.props.classNameMapper(defaultClassName);
   };
   getCurrentDocument() {
     return this.currentDocument;
@@ -5571,12 +5007,11 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   getDomRect() {
     if (this.selfRef.current) {
       return Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());
-    } else {
-      return Rect.empty();
     }
+    return Rect.empty();
   }
   getWindowId() {
-    return this.windowId;
+    return Model.MAIN_WINDOW_ID;
   }
   getRootDiv() {
     return this.selfRef.current;
@@ -5587,15 +5022,9 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   getFactory() {
     return this.props.factory;
   }
-  isSupportsPopout() {
-    return this.supportsPopout;
-  }
   isRealtimeResize() {
     return this.props.realtimeResize ?? false;
   }
-  getPopoutURL() {
-    return this.popoutURL;
-  }
   setEditingTab(tabNode) {
     this.setState({ editingTab: tabNode });
   }
@@ -5605,22 +5034,6 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   getModel() {
     return this.props.model;
   }
-  onCloseWindow = (windowLayout) => {
-    this.doAction(Actions.closeWindow(windowLayout.windowId));
-  };
-  onSetWindow = (_windowLayout, _window) => {
-  };
-  getScreenRect(inRect) {
-    const rect = inRect.clone();
-    const layoutRect = this.getDomRect();
-    const navHeight = 60;
-    const navWidth = 2;
-    rect.x = this.currentWindow.screenX + this.currentWindow.scrollX + navWidth / 2 + layoutRect.x + rect.x;
-    rect.y = this.currentWindow.screenY + this.currentWindow.scrollY + (navHeight - navWidth / 2) + layoutRect.y + rect.y;
-    rect.height += navHeight;
-    rect.width += navWidth;
-    return rect;
-  }
   addTabToTabSet(tabsetId, json) {
     const tabsetNode = this.props.model.getNodeById(tabsetId);
     if (tabsetNode !== void 0) {
@@ -5630,7 +5043,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     return void 0;
   }
   addTabToActiveTabSet(json) {
-    const tabsetNode = this.props.model.getActiveTabset(this.windowId);
+    const tabsetNode = this.props.model.getActiveTabset();
     if (tabsetNode !== void 0) {
       const node = this.doAction(Actions.addNode(json, tabsetNode.getId(), DockLocation.CENTER, -1));
       return node;
@@ -5638,7 +5051,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     return void 0;
   }
   showControlInPortal = (control, element) => {
-    const portal = createPortal3(control, element);
+    const portal = createPortal2(control, element);
     this.setState({ portal });
   };
   hideControlInPortal = () => {
@@ -5693,13 +5106,13 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   // *************************** Start Drag Drop *************************************
   addTabWithDragAndDrop(_event, json, onDrop) {
     const tempNode = TabNode.fromJson(json, this.props.model, false);
-    _LayoutInternal.dragState = new DragState(this.mainLayout, "add" /* Add */, tempNode, json, onDrop);
+    _LayoutInternal.dragState = new DragState(this, "add" /* Add */, tempNode, json, onDrop);
   }
   moveTabWithDragAndDrop(event, node) {
     this.setDragNode(event, node);
   }
   setDragNode = (event, node) => {
-    _LayoutInternal.dragState = new DragState(this.mainLayout, "internal" /* Internal */, node, void 0, void 0);
+    _LayoutInternal.dragState = new DragState(this, "internal" /* Internal */, node, void 0, void 0);
     event.dataTransfer.setData("text/plain", "--flexlayout--");
     event.dataTransfer.effectAllowed = "copyMove";
     event.dataTransfer.dropEffect = "move";
@@ -5731,7 +5144,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       const y = isInVerticalBorder ? 10 : offsetY;
       let rendered = false;
       if (this.props.onRenderDragRect) {
-        const content = /* @__PURE__ */ React19.createElement(TabButtonStamp, { key: node.getId(), layout: this, node });
+        const content = /* @__PURE__ */ jsx17(TabButtonStamp, { layout: this, node }, node.getId());
         const dragComponent = this.props.onRenderDragRect(content, node, void 0);
         if (dragComponent) {
           this.setDragComponent(event, dragComponent, x, y);
@@ -5740,7 +5153,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       }
       if (!rendered) {
         if (isSafari()) {
-          this.setDragComponent(event, /* @__PURE__ */ React19.createElement(TabButtonStamp, { node, layout: this }), x, y);
+          this.setDragComponent(event, /* @__PURE__ */ jsx17(TabButtonStamp, { node, layout: this }), x, y);
         } else {
           event.dataTransfer.setDragImage(node.getTabStamp(), x, y);
         }
@@ -5748,7 +5161,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     }
   };
   setDragComponent(event, component, x, y) {
-    const dragElement = /* @__PURE__ */ React19.createElement("div", { style: { position: "unset" }, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) + " " + this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */) }, component);
+    const dragElement = /* @__PURE__ */ jsx17("div", { style: { position: "unset" }, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) + " " + this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */), children: component });
     const tempDiv = this.currentDocument.createElement("div");
     tempDiv.setAttribute("data-layout-path", "/drag-rectangle");
     tempDiv.style.position = "absolute";
@@ -5761,21 +5174,6 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       this.currentDocument.body.removeChild(tempDiv);
     }, 0);
   }
-  setDraggingOverWindow(overWindow) {
-    if (this.isDraggingOverWindow !== overWindow) {
-      if (this.outlineDiv) {
-        this.outlineDiv.style.visibility = overWindow ? "hidden" : "visible";
-      }
-      if (overWindow) {
-        this.setState({ showEdges: false });
-      } else {
-        if (this.props.model.getMaximizedTabset(this.windowId) === void 0) {
-          this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
-        }
-      }
-      this.isDraggingOverWindow = overWindow;
-    }
-  }
   onDragEnterRaw = (event) => {
     this.dragEnterCount++;
     if (this.dragEnterCount === 1) {
@@ -5802,12 +5200,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   };
   clearDragMain() {
     _LayoutInternal.dragState = void 0;
-    if (this.windowId === Model.MAIN_WINDOW_ID) {
-      this.isDraggingOverWindow = false;
-    }
-    for (const [, layoutWindow] of this.props.model.getwindowsMap()) {
-      layoutWindow.layout.clearDragLocal();
-    }
+    this.clearDragLocal();
   }
   clearDragLocal() {
     this.setState({ showEdges: false });
@@ -5825,14 +5218,11 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       const externalDrag = this.props.onExternalDrag(event);
       if (externalDrag) {
         const tempNode = TabNode.fromJson(externalDrag.json, this.props.model, false);
-        _LayoutInternal.dragState = new DragState(this.mainLayout, "external" /* External */, tempNode, externalDrag.json, externalDrag.onDrop);
+        _LayoutInternal.dragState = new DragState(this, "external" /* External */, tempNode, externalDrag.json, externalDrag.onDrop);
       }
     }
     if (_LayoutInternal.dragState) {
-      if (this.windowId !== Model.MAIN_WINDOW_ID && _LayoutInternal.dragState.mainLayout === this.mainLayout) {
-        _LayoutInternal.dragState.mainLayout.setDraggingOverWindow(true);
-      }
-      if (_LayoutInternal.dragState.mainLayout !== this.mainLayout) {
+      if (_LayoutInternal.dragState.mainLayout !== this) {
         return;
       }
       event.preventDefault();
@@ -5847,7 +5237,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       this.dragging = true;
       this.showOverlay(true);
       this.props.onDragStateChange?.(true);
-      if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === void 0) {
+      if (this.props.model.getMaximizedTabset() === void 0) {
         this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
       }
       const clientRect = this.selfRef.current.getBoundingClientRect();
@@ -5856,7 +5246,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
     }
   };
   onDragOver = (event) => {
-    if (this.dragging && !this.isDraggingOverWindow) {
+    if (this.dragging) {
       event.preventDefault();
       const clientRect = this.selfRef.current?.getBoundingClientRect();
       const pos = {
@@ -5864,7 +5254,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
         y: event.clientY - (clientRect?.top ?? 0)
       };
       this.checkForBorderToShow(pos.x, pos.y);
-      const dropInfo = this.props.model.findDropTargetNode(this.windowId, _LayoutInternal.dragState.dragNode, pos.x, pos.y);
+      const dropInfo = this.props.model.findDropTargetNode(Model.MAIN_WINDOW_ID, _LayoutInternal.dragState.dragNode, pos.x, pos.y);
       if (dropInfo) {
         this.dropInfo = dropInfo;
         if (this.outlineDiv) {
@@ -5877,9 +5267,6 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
   };
   onDragLeave = (_event) => {
     if (this.dragging) {
-      if (this.windowId !== Model.MAIN_WINDOW_ID) {
-        _LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);
-      }
       this.clearDragLocal();
     }
   };
@@ -5897,7 +5284,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
           this.doAction(Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
         }
       }
-      this.mainLayout.clearDragMain();
+      this.clearDragMain();
     }
     this.dragEnterCount = 0;
   };
@@ -5905,16 +5292,14 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
 };
 var FlexLayoutVersion = "0.8.1";
 var defaultIcons = {
-  close: /* @__PURE__ */ React19.createElement(CloseIcon, null),
-  closeTabset: /* @__PURE__ */ React19.createElement(CloseIcon, null),
-  popout: /* @__PURE__ */ React19.createElement(PopoutIcon, null),
-  maximize: /* @__PURE__ */ React19.createElement(MaximizeIcon, null),
-  restore: /* @__PURE__ */ React19.createElement(RestoreIcon, null),
-  more: /* @__PURE__ */ React19.createElement(OverflowIcon, null),
-  edgeArrow: /* @__PURE__ */ React19.createElement(EdgeIcon, null),
-  activeTabset: /* @__PURE__ */ React19.createElement(AsterickIcon, null)
+  close: /* @__PURE__ */ jsx17(CloseIcon, {}),
+  closeTabset: /* @__PURE__ */ jsx17(CloseIcon, {}),
+  maximize: /* @__PURE__ */ jsx17(MaximizeIcon, {}),
+  restore: /* @__PURE__ */ jsx17(RestoreIcon, {}),
+  more: /* @__PURE__ */ jsx17(OverflowIcon, {}),
+  edgeArrow: /* @__PURE__ */ jsx17(EdgeIcon, {}),
+  activeTabset: /* @__PURE__ */ jsx17(AsterickIcon, {})
 };
-var defaultSupportsPopout = isDesktop();
 var edgeRectLength = 100;
 var edgeRectWidth = 10;
 var DragState = class {
@@ -5933,8 +5318,8 @@ var DragState = class {
 };
 
 // src/view/OptimizedLayout.tsx
-import * as React20 from "react";
-import { memo as memo2, useCallback, useEffect as useEffect6, useLayoutEffect as useLayoutEffect9, useMemo, useRef as useRef12, useState as useState4 } from "react";
+import { memo as memo2, useCallback, useEffect as useEffect6, useLayoutEffect as useLayoutEffect8, useMemo, useRef as useRef11, useState as useState3 } from "react";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function createTabInfo(node) {
   const parent = node.getParent();
   const contentRect = parent?.getContentRect() ?? Rect.empty();
@@ -5992,10 +5377,10 @@ var TabPanel = memo2(function TabPanel2({
   isMaximized,
   hasMaximizedTabset
 }) {
-  const selfRef = useRef12(null);
+  const selfRef = useRef11(null);
   const hasValidDimensions = rect.width > 0 && rect.height > 0;
   const content = useMemo(() => renderTab(node), [renderTab, node]);
-  useLayoutEffect9(() => {
+  useLayoutEffect8(() => {
     const element = selfRef.current;
     if (!element) return;
     const onPointerDown = () => {
@@ -6020,7 +5405,7 @@ var TabPanel = memo2(function TabPanel2({
       isHidden = true;
     }
   }
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ref: selfRef,
@@ -6038,9 +5423,9 @@ var TabPanel = memo2(function TabPanel2({
         zIndex,
         // Tab panels receive pointer events when visible and not dragging
         pointerEvents: !isHidden && !isDragging ? "auto" : "none"
-      }
-    },
-    content
+      },
+      children: content
+    }
   );
 });
 function TabContainer({
@@ -6056,13 +5441,12 @@ function TabContainer({
   const maximizedTabset = model.getMaximizedTabset(Model.MAIN_WINDOW_ID);
   const hasMaximizedTabset = maximizedTabset !== void 0;
   const containerStyle = hasMaximizedTabset ? { zIndex: 10 } : {};
-  return /* @__PURE__ */ React20.createElement("div", { className: "flexlayout__optimized_layout_tab_container", "data-layout-path": "/tab-container", style: containerStyle }, Array.from(tabs.entries()).map(([nodeId, tabInfo]) => {
+  return /* @__PURE__ */ jsx18("div", { className: "flexlayout__optimized_layout_tab_container", "data-layout-path": "/tab-container", style: containerStyle, children: Array.from(tabs.entries()).map(([nodeId, tabInfo]) => {
     const parent = tabInfo.node.getParent();
     const isMaximized = parent instanceof TabSetNode && parent.isMaximized();
-    return /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ jsx18(
       TabPanel,
       {
-        key: nodeId,
         nodeId,
         node: tabInfo.node,
         rect: tabInfo.rect,
@@ -6074,14 +5458,15 @@ function TabContainer({
         model,
         isMaximized,
         hasMaximizedTabset
-      }
+      },
+      nodeId
     );
-  }));
+  }) });
 }
 function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, onModelChange: userOnModelChange, ...layoutProps }) {
-  const [isDragging, setIsDragging] = useState4(false);
-  const [tabs, setTabs] = useState4(() => /* @__PURE__ */ new Map());
-  const [maximizedTabsetId, setMaximizedTabsetId] = useState4(() => model.getMaximizedTabset(Model.MAIN_WINDOW_ID)?.getId());
+  const [isDragging, setIsDragging] = useState3(false);
+  const [tabs, setTabs] = useState3(() => /* @__PURE__ */ new Map());
+  const [maximizedTabsetId, setMaximizedTabsetId] = useState3(() => model.getMaximizedTabset(Model.MAIN_WINDOW_ID)?.getId());
   const syncTabsWithModel = useCallback(
     (prevTabs) => {
       const modelTabNodes = /* @__PURE__ */ new Map();
@@ -6183,11 +5568,14 @@ function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange,
   );
   const factory = useCallback(
     (node) => {
-      return /* @__PURE__ */ React20.createElement(TabRef, { key: node.getId(), node, selected: node.isSelected(), onTabMount: handleTabMount, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
+      return /* @__PURE__ */ jsx18(TabRef, { node, selected: node.isSelected(), onTabMount: handleTabMount, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange }, node.getId());
     },
     [handleTabMount, handleRectChange, handleVisibilityChange]
   );
-  return /* @__PURE__ */ React20.createElement("div", { className: "flexlayout__optimized_layout" }, /* @__PURE__ */ React20.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }), /* @__PURE__ */ React20.createElement(TabContainer, { tabs, renderTab, isDragging, classNameMapper, model, maximizedTabsetId }));
+  return /* @__PURE__ */ jsxs9("div", { className: "flexlayout__optimized_layout", children: [
+    /* @__PURE__ */ jsx18(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }),
+    /* @__PURE__ */ jsx18(TabContainer, { tabs, renderTab, isDragging, classNameMapper, model, maximizedTabsetId })
+  ] });
 }
 
 // src/model/walk.ts
@@ -6246,7 +5634,6 @@ export {
   ICloseType,
   Layout,
   LayoutInternal,
-  LayoutWindow,
   Model,
   Node,
   OptimizedLayout,