@aptre/flex-layout 0.5.13 → 0.6.0

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 * as React18 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 */
-  rootWindow;
+  _maximizedTabSet;
+  /** @internal */
+  _activeTabSet;
+  /** @internal */
+  _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();
@@ -3418,6 +2957,99 @@ import * as React3 from "react";
 
 // src/view/Splitter.tsx
 import * as React2 from "react";
+
+// src/view/Utils.tsx
+import * as React 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
+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 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
 var Splitter = (props) => {
   const { layout, node, index, horizontal } = props;
   const [dragging, setDragging] = React2.useState(false);
@@ -3517,7 +3149,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 {
@@ -3971,7 +3603,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 {
@@ -4023,13 +3655,6 @@ 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) => {
@@ -4103,29 +3728,9 @@ var BorderTabSet = (props) => {
       )
     );
   }
-  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 = {};
+  let innerStyle;
+  let outerStyle;
   const borderHeight = size - 1;
   if (border.getLocation() === DockLocation.LEFT) {
     innerStyle = { right: "100%", top: position };
@@ -4192,151 +3797,26 @@ var ErrorBoundary = class extends React10.Component {
   }
 };
 
-// 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 * as React11 from "react";
 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__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }), /* @__PURE__ */ React11.createElement("path", { stroke: "var(--color-icon)", fill: "var(--color-icon)", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 };
 var MaximizeIcon = () => {
-  return /* @__PURE__ */ 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__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React11.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React11.createElement("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__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React11.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React11.createElement("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__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "block", width: 10, height: 10 }, preserveAspectRatio: "none", viewBox: "0 0 100 100" }, /* @__PURE__ */ React11.createElement("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__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, viewBox: "0 0 24 24", fill: "var(--color-icon)" }, /* @__PURE__ */ React11.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }), /* @__PURE__ */ React11.createElement("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__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style, height: "24px", viewBox: "0 -960 960 960", width: "24px" }, /* @__PURE__ */ React11.createElement(
     "path",
     {
       fill: "var(--color-icon)",
@@ -4347,26 +3827,26 @@ var AsterickIcon = () => {
 };
 
 // src/view/Overlay.tsx
-import * as React13 from "react";
+import * as React12 from "react";
 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__ */ React12.createElement("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 * as React15 from "react";
 
 // src/view/TabSet.tsx
-import * as React15 from "react";
+import * as React14 from "react";
 
 // src/view/TabButton.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 var TabButton = (props) => {
   const { layout, node, selected, path } = props;
-  const selfRef = React14.useRef(null);
-  const contentRef = React14.useRef(null);
+  const selfRef = React13.useRef(null);
+  const contentRef = React13.useRef(null);
   const icons = layout.getIcons();
-  React14.useLayoutEffect(() => {
+  React13.useLayoutEffect(() => {
     node.setTabRect(layout.getBoundingClientRect(selfRef.current));
     if (layout.getEditingTab() === node) {
       contentRef.current.select();
@@ -4452,10 +3932,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__ */ React13.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : null;
+  const leading = renderState.leading ? /* @__PURE__ */ React13.createElement("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */) }, renderState.leading) : null;
   if (layout.getEditingTab() === node) {
-    content = /* @__PURE__ */ React14.createElement(
+    content = /* @__PURE__ */ React13.createElement(
       "input",
       {
         ref: contentRef,
@@ -4472,7 +3952,7 @@ var TabButton = (props) => {
   if (node.isEnableClose() && !isStretch) {
     const closeTitle = layout.i18nName("Close" /* Close_Tab */);
     renderState.buttons.push(
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React13.createElement(
         "button",
         {
           key: "close",
@@ -4493,7 +3973,7 @@ var TabButton = (props) => {
       onClick();
     }
   };
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       ref: selfRef,
@@ -4519,18 +3999,18 @@ var TabButton = (props) => {
 };
 
 // src/view/TabSet.tsx
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal } from "react-dom";
 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 = React14.useRef(null);
+  const tabStripInnerRef = React14.useRef(null);
+  const contentRef = React14.useRef(null);
+  const buttonBarRef = React14.useRef(null);
+  const overflowbuttonRef = React14.useRef(null);
+  const stickyButtonsRef = React14.useRef(null);
   const icons = layout.getIcons();
-  const isFirstRender = React15.useRef(true);
-  React15.useEffect(() => {
+  const isFirstRender = React14.useRef(true);
+  React14.useEffect(() => {
     node.setRect(layout.getBoundingClientRect(selfRef.current));
     if (tabStripRef.current) {
       node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current));
@@ -4576,12 +4056,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 +4084,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 +4093,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__ */ React14.createElement(TabButton, { layout, node: child, path: path + "/tb" + i, key: child.getId(), selected: isSelected }));
       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__ */ React14.createElement("div", { key: "divider" + i, className: cm("flexlayout__tabset_tab_divider" /* FLEXLAYOUT__TABSET_TAB_DIVIDER */) }));
       }
     }
   }
@@ -4654,7 +4121,7 @@ var TabSet = (props) => {
       buttons = [...stickyButtons, ...buttons];
     } else {
       tabs.push(
-        /* @__PURE__ */ React15.createElement(
+        /* @__PURE__ */ React14.createElement(
           "div",
           {
             ref: stickyButtonsRef,
@@ -4677,12 +4144,12 @@ 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__ */ React14.createElement(React14.Fragment, null, icons.more, /* @__PURE__ */ React14.createElement("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */) }, hiddenTabs.length));
       }
       void buttons.splice(
         Math.min(renderState.overflowPosition, buttons.length),
         0,
-        /* @__PURE__ */ React15.createElement(
+        /* @__PURE__ */ React14.createElement(
           "button",
           {
             key: "overflowbutton",
@@ -4698,28 +4165,11 @@ var TabSet = (props) => {
       );
     }
   }
-  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__ */ React14.createElement(
         "button",
         {
           key: "max",
@@ -4736,7 +4186,7 @@ var TabSet = (props) => {
   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__ */ React14.createElement(
         "button",
         {
           key: "close",
@@ -4753,10 +4203,10 @@ var TabSet = (props) => {
   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__ */ React14.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)
     );
   }
-  const buttonbar = /* @__PURE__ */ React15.createElement(
+  const buttonbar = /* @__PURE__ */ React14.createElement(
     "div",
     {
       key: "buttonbar",
@@ -4789,7 +4239,7 @@ var TabSet = (props) => {
   }
   if (node.isEnableTabWrap()) {
     if (node.isEnableTabStrip()) {
-      tabStrip = /* @__PURE__ */ React15.createElement(
+      tabStrip = /* @__PURE__ */ React14.createElement(
         "div",
         {
           className: tabStripClasses,
@@ -4805,13 +4255,13 @@ var TabSet = (props) => {
           onDragStart
         },
         tabs,
-        /* @__PURE__ */ React15.createElement("div", { style: { flexGrow: 1 } }),
+        /* @__PURE__ */ React14.createElement("div", { style: { flexGrow: 1 } }),
         buttonbar
       );
     }
   } else {
     if (node.isEnableTabStrip()) {
-      tabStrip = /* @__PURE__ */ React15.createElement(
+      tabStrip = /* @__PURE__ */ React14.createElement(
         "div",
         {
           className: tabStripClasses,
@@ -4826,7 +4276,7 @@ var TabSet = (props) => {
           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(
+        /* @__PURE__ */ React14.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__ */ React14.createElement(
           "div",
           {
             style: { left: position, width: isTabStretch ? "100%" : "10000px" },
@@ -4845,11 +4295,11 @@ 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__ */ React14.createElement("div", { ref: contentRef, className: cm("flexlayout__tabset_content" /* FLEXLAYOUT__TABSET_CONTENT */) }, emptyTabset);
   if (node.getTabLocation() === "top") {
-    content = /* @__PURE__ */ React15.createElement(React15.Fragment, null, tabStrip, content);
+    content = /* @__PURE__ */ React14.createElement(React14.Fragment, null, tabStrip, content);
   } else {
-    content = /* @__PURE__ */ React15.createElement(React15.Fragment, null, content, tabStrip);
+    content = /* @__PURE__ */ React14.createElement(React14.Fragment, null, content, tabStrip);
   }
   const style2 = {
     flexGrow: Math.max(1, node.getWeight() * 1e3),
@@ -4861,11 +4311,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__ */ React14.createElement("div", { ref: selfRef, className: cm("flexlayout__tabset_container" /* FLEXLAYOUT__TABSET_CONTAINER */), style: style2 }, /* @__PURE__ */ React14.createElement("div", { className: cm("flexlayout__tabset" /* FLEXLAYOUT__TABSET */), "data-layout-path": path }, content));
   if (node.isMaximized()) {
     if (layout.getMainElement()) {
-      return createPortal2(
-        /* @__PURE__ */ React15.createElement(
+      return createPortal(
+        /* @__PURE__ */ React14.createElement(
           "div",
           {
             style: {
@@ -4892,21 +4342,21 @@ var TabSet = (props) => {
 // src/view/Row.tsx
 var Row = (props) => {
   const { layout, node } = props;
-  const selfRef = React16.useRef(null);
+  const selfRef = React15.useRef(null);
   const horizontal = node.getOrientation() === Orientation.HORZ;
-  React16.useLayoutEffect(() => {
+  React15.useLayoutEffect(() => {
     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__ */ React15.createElement(Splitter, { key: "splitter" + i, layout, node, index: i, horizontal }));
     }
     if (child instanceof RowNode) {
-      items.push(/* @__PURE__ */ React16.createElement(Row, { key: child.getId(), layout, node: child }));
+      items.push(/* @__PURE__ */ React15.createElement(Row, { key: child.getId(), layout, node: child }));
     } else if (child instanceof TabSetNode) {
-      items.push(/* @__PURE__ */ React16.createElement(TabSet, { key: child.getId(), layout, node: child }));
+      items.push(/* @__PURE__ */ React15.createElement(TabSet, { key: child.getId(), layout, node: child }));
     }
     i++;
   }
@@ -4923,18 +4373,18 @@ 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__ */ React15.createElement("div", { ref: selfRef, className: layout.getClassName("flexlayout__row" /* FLEXLAYOUT__ROW */), style: style2 }, items);
 };
 
 // src/view/Tab.tsx
-import * as React17 from "react";
+import * as React16 from "react";
 var Tab = (props) => {
   const { layout, selected, node, path } = props;
-  const selfRef = React17.useRef(null);
-  const firstSelect = React17.useRef(true);
+  const selfRef = React16.useRef(null);
+  const firstSelect = React16.useRef(true);
   const parentNode = node.getParent();
   const rect = parentNode.getContentRect();
-  React17.useLayoutEffect(() => {
+  React16.useLayoutEffect(() => {
     const element = node.getMoveableElement();
     selfRef.current.appendChild(element);
     node.setMoveableElement(element);
@@ -4951,7 +4401,7 @@ var Tab = (props) => {
       node.setVisible(false);
     };
   }, []);
-  React17.useEffect(() => {
+  React16.useEffect(() => {
     if (node.isSelected()) {
       if (firstSelect.current) {
         node.restoreScrollPosition();
@@ -4959,10 +4409,10 @@ var Tab = (props) => {
       }
     }
   }, [selected]);
-  React17.useLayoutEffect(() => {
+  React16.useLayoutEffect(() => {
     node.setRect(rect);
   }, [rect, node]);
-  React17.useLayoutEffect(() => {
+  React16.useLayoutEffect(() => {
     node.setVisible(selected);
   }, [selected, node]);
   const onPointerDown = () => {
@@ -4976,14 +4426,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 +4446,14 @@ 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__ */ React16.createElement("div", { ref: selfRef, style: style2, className, "data-layout-path": path });
 };
 
 // src/view/SizeTracker.tsx
-import * as React18 from "react";
-var SizeTracker = React18.memo(
+import * as React17 from "react";
+var SizeTracker = React17.memo(
   ({ children }) => {
-    return /* @__PURE__ */ React18.createElement(React18.Fragment, null, children);
+    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, children);
   },
   (prevProps, nextProps) => {
     return prevProps.rect.equalSize(nextProps.rect) && prevProps.selected === nextProps.selected && prevProps.forceRevision === nextProps.forceRevision && prevProps.tabsRevision === nextProps.tabsRevision;
@@ -5019,7 +4462,7 @@ var SizeTracker = React18.memo(
 SizeTracker.displayName = "SizeTracker";
 
 // src/view/Layout.tsx
-var Layout = class extends React19.Component {
+var Layout = class extends React18.Component {
   /** @internal */
   selfRef;
   /** @internal */
@@ -5028,7 +4471,7 @@ var Layout = class extends React19.Component {
   /** @internal */
   constructor(props) {
     super(props);
-    this.selfRef = React19.createRef();
+    this.selfRef = React18.createRef();
     this.revision = 0;
   }
   /** re-render the layout */
@@ -5088,10 +4531,10 @@ var Layout = class extends React19.Component {
   }
   /** @internal */
   render() {
-    return /* @__PURE__ */ React19.createElement(LayoutInternal, { ref: this.selfRef, ...this.props, renderRevision: this.revision++ });
+    return /* @__PURE__ */ React18.createElement(LayoutInternal, { ref: this.selfRef, ...this.props, renderRevision: this.revision++ });
   }
 };
-var LayoutInternal = class _LayoutInternal extends React19.Component {
+var LayoutInternal = class _LayoutInternal extends React18.Component {
   static dragState = void 0;
   selfRef;
   moveablesRef;
@@ -5103,37 +4546,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 = React18.createRef();
+    this.moveablesRef = React18.createRef();
+    this.mainRef = React18.createRef();
+    this.findBorderBarSizeRef = React18.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 +4569,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 +4582,46 @@ 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__ */ React18.createElement("div", { ref: this.selfRef, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) }, /* @__PURE__ */ React18.createElement("div", { ref: this.moveablesRef, key: "__moveables__", className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_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__ */ React18.createElement("div", { key: "__tabStamps__", className: this.getClassName("flexlayout__layout_tab_stamps" /* FLEXLAYOUT__LAYOUT_TAB_STAMPS */) }, this.renderTabStamps());
+    return /* @__PURE__ */ React18.createElement(
       "div",
       {
         ref: this.selfRef,
@@ -5244,133 +4631,102 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
         onDragOver: this.onDragOver,
         onDrop: this.onDrop
       },
-      /* @__PURE__ */ React19.createElement("div", { ref: this.moveablesRef, key: "__moveables__", className: this.getClassName("flexlayout__layout_moveables" /* FLEXLAYOUT__LAYOUT_MOVEABLES */) }),
+      /* @__PURE__ */ React18.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 }),
+      /* @__PURE__ */ React18.createElement(Overlay, { key: "__overlay__", layout: this, show: this.state.showOverlay }),
       outer,
       reorderedTabs,
       tabMoveables,
       tabStamps,
-      this.state.portal,
-      floatingWindows
+      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__ */ React18.createElement("div", { className: classMain, ref: this.mainRef }, 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__ */ React18.createElement(BorderTabSet, { layout: this, border, size: this.state.calculatedBorderBarSize }));
+          borderSetContentComponents.set(location, /* @__PURE__ */ React18.createElement(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));
+        const innerWithBorderTabs2 = /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } }, borderSetContentComponents.get(DockLocation.TOP), /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } }, borderSetContentComponents.get(DockLocation.LEFT), inner, borderSetContentComponents.get(DockLocation.RIGHT)), borderSetContentComponents.get(DockLocation.BOTTOM));
+        return /* @__PURE__ */ React18.createElement("div", { className: classBorderOuter, style: { flexDirection: "column" } }, borderSetComponents.get(DockLocation.TOP), /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } }, borderSetComponents.get(DockLocation.LEFT), innerWithBorderTabs2, borderSetComponents.get(DockLocation.RIGHT)), borderSetComponents.get(DockLocation.BOTTOM));
       }
-    } 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 innerWithBorderTabs = /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "row" } }, borderSetContentComponents.get(DockLocation.LEFT), /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } }, borderSetContentComponents.get(DockLocation.TOP), inner, borderSetContentComponents.get(DockLocation.BOTTOM)), borderSetContentComponents.get(DockLocation.RIGHT));
+      return /* @__PURE__ */ React18.createElement("div", { className: classBorderOuter, style: { flexDirection: "row" } }, borderSetComponents.get(DockLocation.LEFT), /* @__PURE__ */ React18.createElement("div", { className: classBorderInner, style: { flexDirection: "column" } }, borderSetComponents.get(DockLocation.TOP), innerWithBorderTabs, borderSetComponents.get(DockLocation.BOTTOM)), borderSetComponents.get(DockLocation.RIGHT));
     }
+    return /* @__PURE__ */ React18.createElement("div", { className: classMain, ref: this.mainRef, style: { position: "absolute", top: 0, left: 0, bottom: 0, right: 0, display: "flex" } }, 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__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Row, { key: "__row__", layout: this, node: this.props.model.getRoot() }), 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__ */ React18.createElement(
           "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 */)
           },
-          /* @__PURE__ */ React19.createElement("div", { style: { transform: "rotate(180deg)" } }, arrowIcon)
+          /* @__PURE__ */ React18.createElement("div", { style: { transform: "rotate(180deg)" } }, arrowIcon)
         )
       );
       edges.push(
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ React18.createElement(
           "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 */)
           },
-          /* @__PURE__ */ React19.createElement("div", { style: { transform: "rotate(90deg)" } }, arrowIcon)
+          /* @__PURE__ */ React18.createElement("div", { style: { transform: "rotate(90deg)" } }, arrowIcon)
         )
       );
       edges.push(
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ React18.createElement(
           "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 */)
           },
-          /* @__PURE__ */ React19.createElement("div", null, arrowIcon)
+          /* @__PURE__ */ React18.createElement("div", null, arrowIcon)
         )
       );
       edges.push(
-        /* @__PURE__ */ React19.createElement(
+        /* @__PURE__ */ React18.createElement(
           "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 */)
           },
-          /* @__PURE__ */ React19.createElement("div", { style: { transform: "rotate(-90deg)" } }, arrowIcon)
+          /* @__PURE__ */ React18.createElement("div", { style: { transform: "rotate(-90deg)" } }, arrowIcon)
         )
       );
     }
     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 +4738,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__ */ React18.createElement(SizeTracker, { rect, selected: child.isSelected(), forceRevision: this.state.forceRevision, tabsRevision: this.props.renderRevision, key }, /* @__PURE__ */ React18.createElement(ErrorBoundary, { message: this.i18nName("Error rendering component" /* Error_rendering_component */) }, this.props.factory(child))),
               element,
               key
             )
@@ -5401,33 +4757,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__ */ React18.createElement(DragContainer, { key: child.getId(), layout: this, node: child }));
       }
     });
     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__ */ React18.createElement(Tab, { key: child.getId(), layout: this, path, node: child, selected }));
         }
       }
     });
     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__ */ React18.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, className: this.getClassName("flexlayout__border_sizer" /* FLEXLAYOUT__BORDER_SIZER */) }, "FindBorderBarSize");
   }
   checkForBorderToShow(x, y) {
     const r = this.getBoundingClientRect(this.mainRef.current);
@@ -5481,7 +4832,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 +4844,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 +4856,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 +4872,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 +4902,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 +4916,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 +4931,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 +4943,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 +4952,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 +4960,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 +5015,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 +5053,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__ */ React18.createElement(TabButtonStamp, { key: node.getId(), layout: this, node });
         const dragComponent = this.props.onRenderDragRect(content, node, void 0);
         if (dragComponent) {
           this.setDragComponent(event, dragComponent, x, y);
@@ -5740,7 +5062,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__ */ React18.createElement(TabButtonStamp, { node, layout: this }), x, y);
         } else {
           event.dataTransfer.setDragImage(node.getTabStamp(), x, y);
         }
@@ -5748,7 +5070,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__ */ React18.createElement("div", { style: { position: "unset" }, className: this.getClassName("flexlayout__layout" /* FLEXLAYOUT__LAYOUT */) + " " + this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */) }, component);
     const tempDiv = this.currentDocument.createElement("div");
     tempDiv.setAttribute("data-layout-path", "/drag-rectangle");
     tempDiv.style.position = "absolute";
@@ -5761,21 +5083,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 +5109,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 +5127,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 +5146,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 +5155,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 +5163,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 +5176,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 +5193,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 +5201,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__ */ React18.createElement(CloseIcon, null),
+  closeTabset: /* @__PURE__ */ React18.createElement(CloseIcon, null),
+  maximize: /* @__PURE__ */ React18.createElement(MaximizeIcon, null),
+  restore: /* @__PURE__ */ React18.createElement(RestoreIcon, null),
+  more: /* @__PURE__ */ React18.createElement(OverflowIcon, null),
+  edgeArrow: /* @__PURE__ */ React18.createElement(EdgeIcon, null),
+  activeTabset: /* @__PURE__ */ React18.createElement(AsterickIcon, null)
 };
-var defaultSupportsPopout = isDesktop();
 var edgeRectLength = 100;
 var edgeRectWidth = 10;
 var DragState = class {
@@ -5933,8 +5227,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 * as React19 from "react";
+import { memo as memo2, useCallback, useEffect as useEffect6, useLayoutEffect as useLayoutEffect8, useMemo, useRef as useRef11, useState as useState3 } from "react";
 function createTabInfo(node) {
   const parent = node.getParent();
   const contentRect = parent?.getContentRect() ?? Rect.empty();
@@ -5992,10 +5286,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 +5314,7 @@ var TabPanel = memo2(function TabPanel2({
       isHidden = true;
     }
   }
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "div",
     {
       ref: selfRef,
@@ -6056,10 +5350,10 @@ 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__ */ React19.createElement("div", { className: "flexlayout__optimized_layout_tab_container", "data-layout-path": "/tab-container", style: containerStyle }, 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__ */ React19.createElement(
       TabPanel,
       {
         key: nodeId,
@@ -6079,9 +5373,9 @@ function TabContainer({
   }));
 }
 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 +5477,11 @@ 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__ */ React19.createElement(TabRef, { key: node.getId(), node, selected: node.isSelected(), onTabMount: handleTabMount, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
     },
     [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__ */ React19.createElement("div", { className: "flexlayout__optimized_layout" }, /* @__PURE__ */ React19.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }), /* @__PURE__ */ React19.createElement(TabContainer, { tabs, renderTab, isDragging, classNameMapper, model, maximizedTabsetId }));
 }
 
 // src/model/walk.ts
@@ -6246,7 +5540,6 @@ export {
   ICloseType,
   Layout,
   LayoutInternal,
-  LayoutWindow,
   Model,
   Node,
   OptimizedLayout,