flexlayout-react 0.8.18 → 0.8.19

package/dist/index.js

@@ -1,56 +1,52 @@
 /**
  * flexlayout-react
- * @version 0.8.18
+ * @version 0.8.19
  */
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
-const _Orientation = class _Orientation {
-  /** @internal */
-  constructor(name) {
-    /** @internal */
-    __publicField(this, "_name");
-    this._name = name;
-  }
+class Orientation {
+  static HORZ = new Orientation("horz");
+  static VERT = new Orientation("vert");
   static flip(from) {
-    if (from === _Orientation.HORZ) {
-      return _Orientation.VERT;
+    if (from === Orientation.HORZ) {
+      return Orientation.VERT;
     } else {
-      return _Orientation.HORZ;
+      return Orientation.HORZ;
     }
   }
+  /** @internal */
+  _name;
+  /** @internal */
+  constructor(name) {
+    this._name = name;
+  }
   getName() {
     return this._name;
   }
   toString() {
     return this._name;
   }
-};
-__publicField(_Orientation, "HORZ", new _Orientation("horz"));
-__publicField(_Orientation, "VERT", new _Orientation("vert"));
-let Orientation = _Orientation;
+}
 class Rect {
-  constructor(x, y, width, height) {
-    __publicField(this, "x");
-    __publicField(this, "y");
-    __publicField(this, "width");
-    __publicField(this, "height");
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-  }
   static empty() {
     return new Rect(0, 0, 0, 0);
   }
   static fromJson(json) {
     return new Rect(json.x, json.y, json.width, json.height);
   }
+  x;
+  y;
+  width;
+  height;
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
   toJson() {
     return { x: this.x, y: this.y, width: this.width, height: this.height };
   }
@@ -94,10 +90,15 @@ class Rect {
     return new Rect(this.x, this.y, this.width, this.height);
   }
   equals(rect) {
-    return this.x === (rect == null ? void 0 : rect.x) && this.y === (rect == null ? void 0 : rect.y) && this.width === (rect == null ? void 0 : rect.width) && this.height === (rect == null ? void 0 : rect.height);
+    return this.x === rect?.x && this.y === rect?.y && this.width === rect?.width && this.height === rect?.height;
+  }
+  aboutEquals(rect) {
+    if (!rect) return false;
+    const epsilon = 0.5;
+    return Math.abs(this.x - rect.x) < epsilon && Math.abs(this.y - rect.y) < epsilon && Math.abs(this.width - rect.width) < epsilon && Math.abs(this.height - rect.height) < epsilon;
   }
   equalSize(rect) {
-    return this.width === (rect == null ? void 0 : rect.width) && this.height === (rect == null ? void 0 : rect.height);
+    return this.width === rect?.width && this.height === rect?.height;
   }
   getBottom() {
     return this.y + this.height;
@@ -151,39 +152,45 @@ class Rect {
     return "(Rect: x=" + this.x + ", y=" + this.y + ", width=" + this.width + ", height=" + this.height + ")";
   }
 }
-const _DockLocation = class _DockLocation {
-  /** @internal */
-  constructor(_name, _orientation, _indexPlus) {
-    /** @internal */
-    __publicField(this, "name");
-    /** @internal */
-    __publicField(this, "orientation");
-    /** @internal */
-    __publicField(this, "indexPlus");
-    this.name = _name;
-    this.orientation = _orientation;
-    this.indexPlus = _indexPlus;
-    _DockLocation.values.set(this.name, this);
-  }
+class DockLocation {
+  static values = /* @__PURE__ */ new Map();
+  static TOP = new DockLocation("top", Orientation.VERT, 0);
+  static BOTTOM = new DockLocation("bottom", Orientation.VERT, 1);
+  static LEFT = new DockLocation("left", Orientation.HORZ, 0);
+  static RIGHT = new DockLocation("right", Orientation.HORZ, 1);
+  static CENTER = new DockLocation("center", Orientation.VERT, 0);
   /** @internal */
   static getByName(name) {
-    return _DockLocation.values.get(name);
+    return DockLocation.values.get(name);
   }
   /** @internal */
   static getLocation(rect, x, y) {
     x = (x - rect.x) / rect.width;
     y = (y - rect.y) / rect.height;
     if (x >= 0.25 && x < 0.75 && y >= 0.25 && y < 0.75) {
-      return _DockLocation.CENTER;
+      return DockLocation.CENTER;
     }
     const bl = y >= x;
     const br = y >= 1 - x;
     if (bl) {
-      return br ? _DockLocation.BOTTOM : _DockLocation.LEFT;
+      return br ? DockLocation.BOTTOM : DockLocation.LEFT;
     } else {
-      return br ? _DockLocation.RIGHT : _DockLocation.TOP;
+      return br ? DockLocation.RIGHT : DockLocation.TOP;
     }
   }
+  /** @internal */
+  name;
+  /** @internal */
+  orientation;
+  /** @internal */
+  indexPlus;
+  /** @internal */
+  constructor(_name, _orientation, _indexPlus) {
+    this.name = _name;
+    this.orientation = _orientation;
+    this.indexPlus = _indexPlus;
+    DockLocation.values.set(this.name, this);
+  }
   getName() {
     return this.name;
   }
@@ -192,14 +199,14 @@ const _DockLocation = class _DockLocation {
   }
   /** @internal */
   getDockRect(r) {
-    if (this === _DockLocation.TOP) {
+    if (this === DockLocation.TOP) {
       return new Rect(r.x, r.y, r.width, r.height / 2);
-    } else if (this === _DockLocation.BOTTOM) {
+    } else if (this === DockLocation.BOTTOM) {
       return new Rect(r.x, r.getBottom() - r.height / 2, r.width, r.height / 2);
     }
-    if (this === _DockLocation.LEFT) {
+    if (this === DockLocation.LEFT) {
       return new Rect(r.x, r.y, r.width / 2, r.height);
-    } else if (this === _DockLocation.RIGHT) {
+    } else if (this === DockLocation.RIGHT) {
       return new Rect(r.getRight() - r.width / 2, r.y, r.width / 2, r.height);
     } else {
       return r.clone();
@@ -207,16 +214,16 @@ const _DockLocation = class _DockLocation {
   }
   /** @internal */
   split(rect, size) {
-    if (this === _DockLocation.TOP) {
+    if (this === DockLocation.TOP) {
       const r1 = new Rect(rect.x, rect.y, rect.width, size);
       const r2 = new Rect(rect.x, rect.y + size, rect.width, rect.height - size);
       return { start: r1, end: r2 };
-    } else if (this === _DockLocation.LEFT) {
+    } else if (this === DockLocation.LEFT) {
       const r1 = new Rect(rect.x, rect.y, size, rect.height);
       const r2 = new Rect(rect.x + size, rect.y, rect.width - size, rect.height);
       return { start: r1, end: r2 };
     }
-    if (this === _DockLocation.RIGHT) {
+    if (this === DockLocation.RIGHT) {
       const r1 = new Rect(rect.getRight() - size, rect.y, size, rect.height);
       const r2 = new Rect(rect.x, rect.y, rect.width - size, rect.height);
       return { start: r1, end: r2 };
@@ -228,28 +235,21 @@ const _DockLocation = class _DockLocation {
   }
   /** @internal */
   reflect() {
-    if (this === _DockLocation.TOP) {
-      return _DockLocation.BOTTOM;
-    } else if (this === _DockLocation.LEFT) {
-      return _DockLocation.RIGHT;
+    if (this === DockLocation.TOP) {
+      return DockLocation.BOTTOM;
+    } else if (this === DockLocation.LEFT) {
+      return DockLocation.RIGHT;
     }
-    if (this === _DockLocation.RIGHT) {
-      return _DockLocation.LEFT;
+    if (this === DockLocation.RIGHT) {
+      return DockLocation.LEFT;
     } else {
-      return _DockLocation.TOP;
+      return DockLocation.TOP;
     }
   }
   toString() {
     return "(DockLocation: name=" + this.name + ", orientation=" + this.orientation + ")";
   }
-};
-__publicField(_DockLocation, "values", /* @__PURE__ */ new Map());
-__publicField(_DockLocation, "TOP", new _DockLocation("top", Orientation.VERT, 0));
-__publicField(_DockLocation, "BOTTOM", new _DockLocation("bottom", Orientation.VERT, 1));
-__publicField(_DockLocation, "LEFT", new _DockLocation("left", Orientation.HORZ, 0));
-__publicField(_DockLocation, "RIGHT", new _DockLocation("right", Orientation.HORZ, 1));
-__publicField(_DockLocation, "CENTER", new _DockLocation("center", Orientation.VERT, 0));
-let DockLocation = _DockLocation;
+}
 var I18nLabel = /* @__PURE__ */ ((I18nLabel2) => {
   I18nLabel2["Close_Tab"] = "Close";
   I18nLabel2["Close_Tabset"] = "Close tab set";
@@ -361,14 +361,30 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
   return CLASSES2;
 })(CLASSES || {});
 class Action {
+  type;
+  data;
   constructor(type, data) {
-    __publicField(this, "type");
-    __publicField(this, "data");
     this.type = type;
     this.data = data;
   }
 }
-const _Actions = class _Actions {
+class Actions {
+  static ADD_NODE = "FlexLayout_AddNode";
+  static MOVE_NODE = "FlexLayout_MoveNode";
+  static DELETE_TAB = "FlexLayout_DeleteTab";
+  static DELETE_TABSET = "FlexLayout_DeleteTabset";
+  static RENAME_TAB = "FlexLayout_RenameTab";
+  static SELECT_TAB = "FlexLayout_SelectTab";
+  static SET_ACTIVE_TABSET = "FlexLayout_SetActiveTabset";
+  static ADJUST_WEIGHTS = "FlexLayout_AdjustWeights";
+  static ADJUST_BORDER_SPLIT = "FlexLayout_AdjustBorderSplit";
+  static MAXIMIZE_TOGGLE = "FlexLayout_MaximizeToggle";
+  static UPDATE_MODEL_ATTRIBUTES = "FlexLayout_UpdateModelAttributes";
+  static UPDATE_NODE_ATTRIBUTES = "FlexLayout_UpdateNodeAttributes";
+  static POPOUT_TAB = "FlexLayout_PopoutTab";
+  static POPOUT_TABSET = "FlexLayout_PopoutTabset";
+  static CLOSE_WINDOW = "FlexLayout_CloseWindow";
+  static CREATE_WINDOW = "FlexLayout_CreateWindow";
   /**
    * Adds a tab node to the given tabset node
    * @param json the json for the new tab node e.g {type:"tab", component:"table"}
@@ -379,7 +395,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static addNode(json, toNodeId, location, index, select) {
-    return new Action(_Actions.ADD_NODE, {
+    return new Action(Actions.ADD_NODE, {
       json,
       toNode: toNodeId,
       location: location.getName(),
@@ -397,7 +413,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static moveNode(fromNodeId, toNodeId, location, index, select) {
-    return new Action(_Actions.MOVE_NODE, {
+    return new Action(Actions.MOVE_NODE, {
       fromNode: fromNodeId,
       toNode: toNodeId,
       location: location.getName(),
@@ -411,7 +427,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static deleteTab(tabNodeId) {
-    return new Action(_Actions.DELETE_TAB, { node: tabNodeId });
+    return new Action(Actions.DELETE_TAB, { node: tabNodeId });
   }
   /**
    * Deletes a tabset node and all it's child tab nodes from the layout
@@ -419,7 +435,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static deleteTabset(tabsetNodeId) {
-    return new Action(_Actions.DELETE_TABSET, { node: tabsetNodeId });
+    return new Action(Actions.DELETE_TABSET, { node: tabsetNodeId });
   }
   /**
    * Change the given nodes tab text
@@ -428,7 +444,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static renameTab(tabNodeId, text) {
-    return new Action(_Actions.RENAME_TAB, { node: tabNodeId, text });
+    return new Action(Actions.RENAME_TAB, { node: tabNodeId, text });
   }
   /**
    * Selects the given tab in its parent tabset
@@ -436,7 +452,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static selectTab(tabNodeId) {
-    return new Action(_Actions.SELECT_TAB, { tabNode: tabNodeId });
+    return new Action(Actions.SELECT_TAB, { tabNode: tabNodeId });
   }
   /**
    * Set the given tabset node as the active tabset
@@ -444,7 +460,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static setActiveTabset(tabsetNodeId, windowId) {
-    return new Action(_Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId, windowId });
+    return new Action(Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId, windowId });
   }
   /**
    * Adjust the weights of a row, used when the splitter is moved
@@ -453,10 +469,10 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static adjustWeights(nodeId, weights) {
-    return new Action(_Actions.ADJUST_WEIGHTS, { nodeId, weights });
+    return new Action(Actions.ADJUST_WEIGHTS, { nodeId, weights });
   }
   static adjustBorderSplit(nodeId, pos) {
-    return new Action(_Actions.ADJUST_BORDER_SPLIT, { node: nodeId, pos });
+    return new Action(Actions.ADJUST_BORDER_SPLIT, { node: nodeId, pos });
   }
   /**
    * Maximizes the given tabset
@@ -464,7 +480,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static maximizeToggle(tabsetNodeId, windowId) {
-    return new Action(_Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId, windowId });
+    return new Action(Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId, windowId });
   }
   /**
    * Updates the global model jsone attributes
@@ -472,7 +488,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static updateModelAttributes(attributes) {
-    return new Action(_Actions.UPDATE_MODEL_ATTRIBUTES, { json: attributes });
+    return new Action(Actions.UPDATE_MODEL_ATTRIBUTES, { json: attributes });
   }
   /**
    * Updates the given nodes json attributes
@@ -481,7 +497,7 @@ const _Actions = class _Actions {
    * @returns {Action} the action
    */
   static updateNodeAttributes(nodeId, attributes) {
-    return new Action(_Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });
+    return new Action(Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });
   }
   /**
    * Pops out the given tab node into a new browser window
@@ -489,7 +505,7 @@ const _Actions = class _Actions {
    * @returns 
    */
   static popoutTab(nodeId) {
-    return new Action(_Actions.POPOUT_TAB, { node: nodeId });
+    return new Action(Actions.POPOUT_TAB, { node: nodeId });
   }
   /**
    * Pops out the given tab set node into a new browser window
@@ -497,7 +513,7 @@ const _Actions = class _Actions {
    * @returns 
    */
   static popoutTabset(nodeId) {
-    return new Action(_Actions.POPOUT_TABSET, { node: nodeId });
+    return new Action(Actions.POPOUT_TABSET, { node: nodeId });
   }
   /**
    * Closes the popout window
@@ -505,7 +521,7 @@ const _Actions = class _Actions {
    * @returns 
    */
   static closeWindow(windowId) {
-    return new Action(_Actions.CLOSE_WINDOW, { windowId });
+    return new Action(Actions.CLOSE_WINDOW, { windowId });
   }
   /**
    * Creates a new empty popout window with the given layout
@@ -514,39 +530,25 @@ const _Actions = class _Actions {
    * @returns 
    */
   static createWindow(layout, rect) {
-    return new Action(_Actions.CREATE_WINDOW, { layout, rect });
+    return new Action(Actions.CREATE_WINDOW, { layout, rect });
   }
-};
-__publicField(_Actions, "ADD_NODE", "FlexLayout_AddNode");
-__publicField(_Actions, "MOVE_NODE", "FlexLayout_MoveNode");
-__publicField(_Actions, "DELETE_TAB", "FlexLayout_DeleteTab");
-__publicField(_Actions, "DELETE_TABSET", "FlexLayout_DeleteTabset");
-__publicField(_Actions, "RENAME_TAB", "FlexLayout_RenameTab");
-__publicField(_Actions, "SELECT_TAB", "FlexLayout_SelectTab");
-__publicField(_Actions, "SET_ACTIVE_TABSET", "FlexLayout_SetActiveTabset");
-__publicField(_Actions, "ADJUST_WEIGHTS", "FlexLayout_AdjustWeights");
-__publicField(_Actions, "ADJUST_BORDER_SPLIT", "FlexLayout_AdjustBorderSplit");
-__publicField(_Actions, "MAXIMIZE_TOGGLE", "FlexLayout_MaximizeToggle");
-__publicField(_Actions, "UPDATE_MODEL_ATTRIBUTES", "FlexLayout_UpdateModelAttributes");
-__publicField(_Actions, "UPDATE_NODE_ATTRIBUTES", "FlexLayout_UpdateNodeAttributes");
-__publicField(_Actions, "POPOUT_TAB", "FlexLayout_PopoutTab");
-__publicField(_Actions, "POPOUT_TABSET", "FlexLayout_PopoutTabset");
-__publicField(_Actions, "CLOSE_WINDOW", "FlexLayout_CloseWindow");
-__publicField(_Actions, "CREATE_WINDOW", "FlexLayout_CreateWindow");
-let Actions = _Actions;
+}
 class Attribute {
+  static NUMBER = "number";
+  static STRING = "string";
+  static BOOLEAN = "boolean";
+  name;
+  alias;
+  modelName;
+  pairedAttr;
+  pairedType;
+  defaultValue;
+  alwaysWriteJson;
+  type;
+  required;
+  fixed;
+  description;
   constructor(name, modelName, defaultValue, alwaysWriteJson) {
-    __publicField(this, "name");
-    __publicField(this, "alias");
-    __publicField(this, "modelName");
-    __publicField(this, "pairedAttr");
-    __publicField(this, "pairedType");
-    __publicField(this, "defaultValue");
-    __publicField(this, "alwaysWriteJson");
-    __publicField(this, "type");
-    __publicField(this, "required");
-    __publicField(this, "fixed");
-    __publicField(this, "description");
     this.name = name;
     this.alias = void 0;
     this.modelName = modelName;
@@ -583,13 +585,10 @@ class Attribute {
     this.pairedType = value;
   }
 }
-__publicField(Attribute, "NUMBER", "number");
-__publicField(Attribute, "STRING", "string");
-__publicField(Attribute, "BOOLEAN", "boolean");
 class AttributeDefinitions {
+  attributes;
+  nameToAttribute;
   constructor() {
-    __publicField(this, "attributes");
-    __publicField(this, "nameToAttribute");
     this.attributes = [];
     this.nameToAttribute = /* @__PURE__ */ new Map();
   }
@@ -664,7 +663,6 @@ class AttributeDefinitions {
     }
   }
   toTypescriptInterface(name, parentAttributes) {
-    var _a, _b;
     const lines = [];
     const sorted = this.attributes.sort((a, b) => a.name.localeCompare(b.name));
     lines.push("export interface I" + name + "Attributes {");
@@ -687,10 +685,10 @@ class AttributeDefinitions {
       let sb = "	/**\n	  ";
       if (c.description) {
         sb += c.description;
-      } else if (c.pairedType && ((_a = c.pairedAttr) == null ? void 0 : _a.description)) {
+      } else if (c.pairedType && c.pairedAttr?.description) {
         sb += `Value for ${c.pairedType} attribute ${c.pairedAttr.name} if not overridden`;
         sb += "\n\n	  ";
-        sb += (_b = c.pairedAttr) == null ? void 0 : _b.description;
+        sb += c.pairedAttr?.description;
       }
       sb += "\n\n	  ";
       if (c.fixed) {
@@ -709,12 +707,12 @@ class AttributeDefinitions {
   }
 }
 class DropInfo {
+  node;
+  rect;
+  location;
+  index;
+  className;
   constructor(node, rect, location, index, className) {
-    __publicField(this, "node");
-    __publicField(this, "rect");
-    __publicField(this, "location");
-    __publicField(this, "index");
-    __publicField(this, "className");
     this.node = node;
     this.rect = rect;
     this.location = location;
@@ -723,18 +721,6 @@ class DropInfo {
   }
 }
 class BorderSet {
-  /** @internal */
-  constructor(_model) {
-    /** @internal */
-    __publicField(this, "borders");
-    /** @internal */
-    __publicField(this, "borderMap");
-    /** @internal */
-    __publicField(this, "layoutHorizontal");
-    this.borders = [];
-    this.borderMap = /* @__PURE__ */ new Map();
-    this.layoutHorizontal = true;
-  }
   /** @internal */
   static fromJson(json, model) {
     const borderSet = new BorderSet(model);
@@ -744,6 +730,18 @@ class BorderSet {
     }
     return borderSet;
   }
+  /** @internal */
+  borders;
+  /** @internal */
+  borderMap;
+  /** @internal */
+  layoutHorizontal;
+  /** @internal */
+  constructor(_model) {
+    this.borders = [];
+    this.borderMap = /* @__PURE__ */ new Map();
+    this.layoutHorizontal = true;
+  }
   toJson() {
     return this.borders.map((borderNode) => borderNode.toJson());
   }
@@ -794,22 +792,22 @@ class BorderSet {
   }
 }
 class Node {
+  /** @internal */
+  model;
+  /** @internal */
+  attributes;
+  /** @internal */
+  parent;
+  /** @internal */
+  children;
+  /** @internal */
+  rect;
+  /** @internal */
+  path;
+  /** @internal */
+  listeners;
   /** @internal */
   constructor(_model) {
-    /** @internal */
-    __publicField(this, "model");
-    /** @internal */
-    __publicField(this, "attributes");
-    /** @internal */
-    __publicField(this, "parent");
-    /** @internal */
-    __publicField(this, "children");
-    /** @internal */
-    __publicField(this, "rect");
-    /** @internal */
-    __publicField(this, "path");
-    /** @internal */
-    __publicField(this, "listeners");
     this.model = _model;
     this.attributes = {};
     this.children = [];
@@ -1007,43 +1005,44 @@ class Node {
     return JSON.stringify(this.attributes, void 0, "	");
   }
 }
-const _TabNode = class _TabNode extends Node {
+class TabNode extends Node {
+  static TYPE = "tab";
+  /** @internal */
+  static fromJson(json, model, addToModel = true) {
+    const newLayoutNode = new TabNode(model, json, addToModel);
+    return newLayoutNode;
+  }
+  /** @internal */
+  tabRect = Rect.empty();
+  /** @internal */
+  moveableElement;
+  /** @internal */
+  tabStamp;
+  /** @internal */
+  renderedName;
+  /** @internal */
+  extra;
+  /** @internal */
+  visible;
+  /** @internal */
+  rendered;
+  /** @internal */
+  scrollTop;
+  /** @internal */
+  scrollLeft;
   /** @internal */
   constructor(model, json, addToModel = true) {
     super(model);
-    /** @internal */
-    __publicField(this, "tabRect", Rect.empty());
-    /** @internal */
-    __publicField(this, "moveableElement");
-    /** @internal */
-    __publicField(this, "tabStamp");
-    /** @internal */
-    __publicField(this, "renderedName");
-    /** @internal */
-    __publicField(this, "extra");
-    /** @internal */
-    __publicField(this, "visible");
-    /** @internal */
-    __publicField(this, "rendered");
-    /** @internal */
-    __publicField(this, "scrollTop");
-    /** @internal */
-    __publicField(this, "scrollLeft");
     this.extra = {};
     this.moveableElement = null;
     this.tabStamp = null;
     this.rendered = false;
     this.visible = false;
-    _TabNode.attributeDefinitions.fromJson(json, this.attributes);
+    TabNode.attributeDefinitions.fromJson(json, this.attributes);
     if (addToModel === true) {
       model.addNode(this);
     }
   }
-  /** @internal */
-  static fromJson(json, model, addToModel = true) {
-    const newLayoutNode = new _TabNode(model, json, addToModel);
-    return newLayoutNode;
-  }
   getName() {
     return this.getAttr("name");
   }
@@ -1145,7 +1144,7 @@ const _TabNode = class _TabNode extends Node {
   }
   toJson() {
     const json = {};
-    _TabNode.attributeDefinitions.toJson(json, this.attributes);
+    TabNode.attributeDefinitions.toJson(json, this.attributes);
     return json;
   }
   /** @internal */
@@ -1253,11 +1252,11 @@ const _TabNode = class _TabNode extends Node {
   }
   /** @internal */
   updateAttrs(json) {
-    _TabNode.attributeDefinitions.update(json, this.attributes);
+    TabNode.attributeDefinitions.update(json, this.attributes);
   }
   /** @internal */
   getAttributeDefinitions() {
-    return _TabNode.attributeDefinitions;
+    return TabNode.attributeDefinitions;
   }
   /** @internal */
   setBorderWidth(width) {
@@ -1269,12 +1268,14 @@ const _TabNode = class _TabNode extends Node {
   }
   /** @internal */
   static getAttributeDefinitions() {
-    return _TabNode.attributeDefinitions;
+    return TabNode.attributeDefinitions;
   }
   /** @internal */
+  static attributeDefinitions = TabNode.createAttributeDefinitions();
+  /** @internal */
   static createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
-    attributeDefinitions.add("type", _TabNode.TYPE, true).setType(Attribute.STRING).setFixed();
+    attributeDefinitions.add("type", TabNode.TYPE, true).setType(Attribute.STRING).setFixed();
     attributeDefinitions.add("id", void 0).setType(Attribute.STRING).setDescription(
       `the unique id of the tab, if left undefined a uuid will be assigned`
     );
@@ -1353,11 +1354,7 @@ const _TabNode = class _TabNode extends Node {
     );
     return attributeDefinitions;
   }
-};
-__publicField(_TabNode, "TYPE", "tab");
-/** @internal */
-__publicField(_TabNode, "attributeDefinitions", _TabNode.createAttributeDefinitions());
-let TabNode = _TabNode;
+}
 function isDesktop() {
   const desktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
   return desktop;
@@ -1474,32 +1471,11 @@ function randomUUID() {
     (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
   );
 }
-const _TabSetNode = class _TabSetNode extends Node {
-  /** @internal */
-  constructor(model, json) {
-    super(model);
-    /** @internal */
-    __publicField(this, "tabStripRect", Rect.empty());
-    /** @internal */
-    __publicField(this, "contentRect", Rect.empty());
-    /** @internal */
-    __publicField(this, "calculatedMinHeight");
-    /** @internal */
-    __publicField(this, "calculatedMinWidth");
-    /** @internal */
-    __publicField(this, "calculatedMaxHeight");
-    /** @internal */
-    __publicField(this, "calculatedMaxWidth");
-    this.calculatedMinHeight = 0;
-    this.calculatedMinWidth = 0;
-    this.calculatedMaxHeight = 0;
-    this.calculatedMaxWidth = 0;
-    _TabSetNode.attributeDefinitions.fromJson(json, this.attributes);
-    model.addNode(this);
-  }
+class TabSetNode extends Node {
+  static TYPE = "tabset";
   /** @internal */
   static fromJson(json, model, layoutWindow) {
-    const newLayoutNode = new _TabSetNode(model, json);
+    const newLayoutNode = new TabSetNode(model, json);
     if (json.children != null) {
       for (const jsonChild of json.children) {
         const child = TabNode.fromJson(jsonChild, model);
@@ -1517,6 +1493,30 @@ const _TabSetNode = class _TabSetNode extends Node {
     }
     return newLayoutNode;
   }
+  /** @internal */
+  static attributeDefinitions = TabSetNode.createAttributeDefinitions();
+  /** @internal */
+  tabStripRect = Rect.empty();
+  /** @internal */
+  contentRect = Rect.empty();
+  /** @internal */
+  calculatedMinHeight;
+  /** @internal */
+  calculatedMinWidth;
+  /** @internal */
+  calculatedMaxHeight;
+  /** @internal */
+  calculatedMaxWidth;
+  /** @internal */
+  constructor(model, json) {
+    super(model);
+    this.calculatedMinHeight = 0;
+    this.calculatedMinWidth = 0;
+    this.calculatedMaxHeight = 0;
+    this.calculatedMaxWidth = 0;
+    TabSetNode.attributeDefinitions.fromJson(json, this.attributes);
+    model.addNode(this);
+  }
   getName() {
     return this.getAttr("name");
   }
@@ -1637,7 +1637,7 @@ const _TabSetNode = class _TabSetNode extends Node {
   }
   toJson() {
     const json = {};
-    _TabSetNode.attributeDefinitions.toJson(json, this.attributes);
+    TabSetNode.attributeDefinitions.toJson(json, this.attributes);
     json.children = this.children.map((child) => child.toJson());
     if (this.isActive()) {
       json.active = true;
@@ -1824,7 +1824,7 @@ const _TabSetNode = class _TabSetNode extends Node {
       let moveNode = dragNode;
       if (dragNode instanceof TabNode) {
         const callback = this.model.getOnCreateTabSet();
-        moveNode = new _TabSetNode(this.model, callback ? callback(dragNode) : {});
+        moveNode = new TabSetNode(this.model, callback ? callback(dragNode) : {});
         moveNode.addChild(dragNode);
         dragParent = moveNode;
       } else if (dragNode instanceof RowNode) {
@@ -1853,7 +1853,7 @@ const _TabSetNode = class _TabSetNode extends Node {
         parentRow.removeChild(this);
         parentRow.addChild(newRow, pos);
       }
-      if (moveNode instanceof _TabSetNode) {
+      if (moveNode instanceof TabSetNode) {
         this.model.setActiveTabset(moveNode, this.getWindowId());
       }
     }
@@ -1861,20 +1861,20 @@ const _TabSetNode = class _TabSetNode extends Node {
   }
   /** @internal */
   updateAttrs(json) {
-    _TabSetNode.attributeDefinitions.update(json, this.attributes);
+    TabSetNode.attributeDefinitions.update(json, this.attributes);
   }
   /** @internal */
   getAttributeDefinitions() {
-    return _TabSetNode.attributeDefinitions;
+    return TabSetNode.attributeDefinitions;
   }
   /** @internal */
   static getAttributeDefinitions() {
-    return _TabSetNode.attributeDefinitions;
+    return TabSetNode.attributeDefinitions;
   }
   /** @internal */
   static createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
-    attributeDefinitions.add("type", _TabSetNode.TYPE, true).setType(Attribute.STRING).setFixed();
+    attributeDefinitions.add("type", TabSetNode.TYPE, true).setType(Attribute.STRING).setFixed();
     attributeDefinitions.add("id", void 0).setType(Attribute.STRING).setDescription(
       `the unique id of the tab set, if left undefined a uuid will be assigned`
     );
@@ -1944,56 +1944,55 @@ const _TabSetNode = class _TabSetNode extends Node {
     );
     return attributeDefinitions;
   }
-};
-__publicField(_TabSetNode, "TYPE", "tabset");
-/** @internal */
-__publicField(_TabSetNode, "attributeDefinitions", _TabSetNode.createAttributeDefinitions());
-let TabSetNode = _TabSetNode;
-const _RowNode = class _RowNode extends Node {
-  /** @internal */
-  constructor(model, windowId, json) {
-    super(model);
-    /** @internal */
-    __publicField(this, "windowId");
-    /** @internal */
-    __publicField(this, "minHeight");
-    /** @internal */
-    __publicField(this, "minWidth");
-    /** @internal */
-    __publicField(this, "maxHeight");
-    /** @internal */
-    __publicField(this, "maxWidth");
-    this.windowId = windowId;
-    this.minHeight = DefaultMin;
-    this.minWidth = DefaultMin;
-    this.maxHeight = DefaultMax;
-    this.maxWidth = DefaultMax;
-    _RowNode.attributeDefinitions.fromJson(json, this.attributes);
-    this.normalizeWeights();
-    model.addNode(this);
-  }
+}
+class RowNode extends Node {
+  static TYPE = "row";
   /** @internal */
   static fromJson(json, model, layoutWindow) {
-    const newLayoutNode = new _RowNode(model, layoutWindow.windowId, json);
+    const newLayoutNode = new RowNode(model, layoutWindow.windowId, json);
     if (json.children != null) {
       for (const jsonChild of json.children) {
         if (jsonChild.type === TabSetNode.TYPE) {
           const child = TabSetNode.fromJson(jsonChild, model, layoutWindow);
           newLayoutNode.addChild(child);
         } else {
-          const child = _RowNode.fromJson(jsonChild, model, layoutWindow);
+          const child = RowNode.fromJson(jsonChild, model, layoutWindow);
           newLayoutNode.addChild(child);
         }
       }
     }
     return newLayoutNode;
   }
+  /** @internal */
+  static attributeDefinitions = RowNode.createAttributeDefinitions();
+  /** @internal */
+  windowId;
+  /** @internal */
+  minHeight;
+  /** @internal */
+  minWidth;
+  /** @internal */
+  maxHeight;
+  /** @internal */
+  maxWidth;
+  /** @internal */
+  constructor(model, windowId, json) {
+    super(model);
+    this.windowId = windowId;
+    this.minHeight = DefaultMin;
+    this.minWidth = DefaultMin;
+    this.maxHeight = DefaultMax;
+    this.maxWidth = DefaultMax;
+    RowNode.attributeDefinitions.fromJson(json, this.attributes);
+    this.normalizeWeights();
+    model.addNode(this);
+  }
   getWeight() {
     return this.attributes.weight;
   }
   toJson() {
     const json = {};
-    _RowNode.attributeDefinitions.toJson(json, this.attributes);
+    RowNode.attributeDefinitions.toJson(json, this.attributes);
     json.children = [];
     for (const child of this.children) {
       json.children.push(child.toJson());
@@ -2197,7 +2196,7 @@ const _RowNode = class _RowNode extends Node {
     let i = 0;
     while (i < this.children.length) {
       const child = this.children[i];
-      if (child instanceof _RowNode) {
+      if (child instanceof RowNode) {
         child.tidy();
         const childChildren = child.getChildren();
         if (childChildren.length === 0) {
@@ -2205,7 +2204,7 @@ const _RowNode = class _RowNode extends Node {
         } else if (childChildren.length === 1) {
           const subchild = childChildren[0];
           this.removeChild(child);
-          if (subchild instanceof _RowNode) {
+          if (subchild instanceof RowNode) {
             let subChildrenTotal = 0;
             const subChildChildren = subchild.getChildren();
             for (const ssc of subChildChildren) {
@@ -2304,10 +2303,10 @@ const _RowNode = class _RowNode extends Node {
       parent.setSelected(-1);
     }
     let node;
-    if (dragNode instanceof TabSetNode || dragNode instanceof _RowNode) {
+    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, {});
+      if (node instanceof RowNode && node.getOrientation() === this.getOrientation() && (location.getOrientation() === this.getOrientation() || location === DockLocation.CENTER)) {
+        node = new RowNode(this.model, this.windowId, {});
         node.addChild(dragNode);
       }
     } else {
@@ -2334,8 +2333,8 @@ const _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, this.windowId, {});
+      const hrow = new RowNode(this.model, this.windowId, {});
       hrow.setWeight(75);
       node.setWeight(25);
       for (const child of this.children) {
@@ -2346,8 +2345,8 @@ const _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, this.windowId, {});
+      const hrow = new RowNode(this.model, this.windowId, {});
       hrow.setWeight(75);
       node.setWeight(25);
       for (const child of this.children) {
@@ -2369,15 +2368,15 @@ const _RowNode = class _RowNode extends Node {
   }
   /** @internal */
   getAttributeDefinitions() {
-    return _RowNode.attributeDefinitions;
+    return RowNode.attributeDefinitions;
   }
   /** @internal */
   updateAttrs(json) {
-    _RowNode.attributeDefinitions.update(json, this.attributes);
+    RowNode.attributeDefinitions.update(json, this.attributes);
   }
   /** @internal */
   static getAttributeDefinitions() {
-    return _RowNode.attributeDefinitions;
+    return RowNode.attributeDefinitions;
   }
   // NOTE:  flex-grow cannot have values < 1 otherwise will not fill parent, need to normalize 
   normalizeWeights() {
@@ -2397,7 +2396,7 @@ const _RowNode = class _RowNode extends Node {
   /** @internal */
   static createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
-    attributeDefinitions.add("type", _RowNode.TYPE, true).setType(Attribute.STRING).setFixed();
+    attributeDefinitions.add("type", RowNode.TYPE, true).setType(Attribute.STRING).setFixed();
     attributeDefinitions.add("id", void 0).setType(Attribute.STRING).setDescription(
       `the unique id of the row, if left undefined a uuid will be assigned`
     );
@@ -2406,21 +2405,17 @@ const _RowNode = class _RowNode extends Node {
     );
     return attributeDefinitions;
   }
-};
-__publicField(_RowNode, "TYPE", "row");
-/** @internal */
-__publicField(_RowNode, "attributeDefinitions", _RowNode.createAttributeDefinitions());
-let RowNode = _RowNode;
+}
 class LayoutWindow {
+  _windowId;
+  _layout;
+  _rect;
+  _window;
+  _root;
+  _maximizedTabSet;
+  _activeTabSet;
+  _toScreenRectFunction;
   constructor(windowId, rect) {
-    __publicField(this, "_windowId");
-    __publicField(this, "_layout");
-    __publicField(this, "_rect");
-    __publicField(this, "_window");
-    __publicField(this, "_root");
-    __publicField(this, "_maximizedTabSet");
-    __publicField(this, "_activeTabSet");
-    __publicField(this, "_toScreenRectFunction");
     this._windowId = windowId;
     this._rect = rect;
     this._toScreenRectFunction = (r) => r;
@@ -2501,36 +2496,39 @@ class LayoutWindow {
     return layoutWindow;
   }
 }
-const DefaultMin = 0;
+const DefaultMin = 1;
 const DefaultMax = 99999;
-const _Model = class _Model {
+class Model {
+  static MAIN_WINDOW_ID = "__main_window_id__";
+  /** @internal */
+  static attributeDefinitions = Model.createAttributeDefinitions();
+  /** @internal */
+  attributes;
+  /** @internal */
+  idMap;
+  /** @internal */
+  changeListeners;
+  /** @internal */
+  borders;
+  /** @internal */
+  onAllowDrop;
+  /** @internal */
+  onCreateTabSet;
+  /** @internal */
+  windows;
+  /** @internal */
+  rootWindow;
   /**
    * 'private' constructor. Use the static method Model.fromJson(json) to create a model
    *  @internal
    */
   constructor() {
-    /** @internal */
-    __publicField(this, "attributes");
-    /** @internal */
-    __publicField(this, "idMap");
-    /** @internal */
-    __publicField(this, "changeListeners");
-    /** @internal */
-    __publicField(this, "borders");
-    /** @internal */
-    __publicField(this, "onAllowDrop");
-    /** @internal */
-    __publicField(this, "onCreateTabSet");
-    /** @internal */
-    __publicField(this, "windows");
-    /** @internal */
-    __publicField(this, "rootWindow");
     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.rootWindow = new LayoutWindow(Model.MAIN_WINDOW_ID, Rect.empty());
+    this.windows.set(Model.MAIN_WINDOW_ID, this.rootWindow);
     this.changeListeners = [];
   }
   /**
@@ -2540,7 +2538,6 @@ const _Model = class _Model {
    * @returns added Node for Actions.addNode, windowId for createWindow
    */
   doAction(action) {
-    var _a;
     let returnVal = void 0;
     switch (action.type) {
       case Actions.ADD_NODE: {
@@ -2646,10 +2643,10 @@ const _Model = class _Model {
       case Actions.CLOSE_WINDOW: {
         const window2 = this.windows.get(action.data.windowId);
         if (window2) {
-          (_a = this.rootWindow.root) == null ? void 0 : _a.drop(window2.root, DockLocation.CENTER, -1);
+          this.rootWindow.root?.drop(window2.root, DockLocation.CENTER, -1);
           this.rootWindow.visitNodes((node, level) => {
             if (node instanceof RowNode) {
-              node.setWindowId(_Model.MAIN_WINDOW_ID);
+              node.setWindowId(Model.MAIN_WINDOW_ID);
             }
           });
           this.windows.delete(action.data.windowId);
@@ -2674,7 +2671,7 @@ const _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 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();
@@ -2695,7 +2692,7 @@ const _Model = class _Model {
         break;
       }
       case Actions.SET_ACTIVE_TABSET: {
-        const windowId = action.data.windowId ? action.data.windowId : _Model.MAIN_WINDOW_ID;
+        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;
@@ -2724,7 +2721,7 @@ const _Model = class _Model {
         break;
       }
       case Actions.MAXIMIZE_TOGGLE: {
-        const windowId = action.data.windowId ? action.data.windowId : _Model.MAIN_WINDOW_ID;
+        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) {
@@ -2756,7 +2753,7 @@ const _Model = class _Model {
   /**
    * Get the currently active tabset node
    */
-  getActiveTabset(windowId = _Model.MAIN_WINDOW_ID) {
+  getActiveTabset(windowId = Model.MAIN_WINDOW_ID) {
     const window2 = this.windows.get(windowId);
     if (window2 && window2.activeTabSet && this.getNodeById(window2.activeTabSet.getId())) {
       return window2.activeTabSet;
@@ -2767,14 +2764,14 @@ const _Model = class _Model {
   /**
    * Get the currently maximized tabset node
    */
-  getMaximizedTabset(windowId = _Model.MAIN_WINDOW_ID) {
+  getMaximizedTabset(windowId = Model.MAIN_WINDOW_ID) {
     return this.windows.get(windowId).maximizedTabSet;
   }
   /**
    * Gets the root RowNode of the model
    * @returns {RowNode}
    */
-  getRoot(windowId = _Model.MAIN_WINDOW_ID) {
+  getRoot(windowId = Model.MAIN_WINDOW_ID) {
     return this.windows.get(windowId).root;
   }
   isRootOrientationVertical() {
@@ -2805,7 +2802,7 @@ const _Model = class _Model {
   }
   visitWindowNodes(windowId, fn) {
     if (this.windows.has(windowId)) {
-      if (windowId === _Model.MAIN_WINDOW_ID) {
+      if (windowId === Model.MAIN_WINDOW_ID) {
         this.borders.forEachNode(fn);
       }
       this.windows.get(windowId).visitNodes(fn);
@@ -2823,7 +2820,7 @@ const _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.windows.get(Model.MAIN_WINDOW_ID).root) {
     const child = node.getChildren()[0];
     if (child instanceof TabSetNode) {
       return child;
@@ -2837,8 +2834,8 @@ const _Model = class _Model {
   * @returns {Model} a new Model object
   */
   static fromJson(json) {
-    const model = new _Model();
-    _Model.attributeDefinitions.fromJson(json.global, model.attributes);
+    const model = new Model();
+    Model.attributeDefinitions.fromJson(json.global, model.attributes);
     if (json.borders) {
       model.borders = BorderSet.fromJson(json.borders, model);
     }
@@ -2849,7 +2846,7 @@ const _Model = class _Model {
         model.windows.set(windowId, layoutWindow);
       }
     }
-    model.rootWindow.root = RowNode.fromJson(json.layout, model, model.getwindowsMap().get(_Model.MAIN_WINDOW_ID));
+    model.rootWindow.root = RowNode.fromJson(json.layout, model, model.getwindowsMap().get(Model.MAIN_WINDOW_ID));
     model.tidy();
     return model;
   }
@@ -2859,13 +2856,13 @@ const _Model = class _Model {
    */
   toJson() {
     const global = {};
-    _Model.attributeDefinitions.toJson(global, this.attributes);
+    Model.attributeDefinitions.toJson(global, this.attributes);
     this.visitNodes((node) => {
       node.fireEvent("save", {});
     });
     const windows = {};
     for (const [id, window2] of this.windows) {
-      if (id !== _Model.MAIN_WINDOW_ID) {
+      if (id !== Model.MAIN_WINDOW_ID) {
         windows[id] = window2.toJson();
       }
     }
@@ -2921,7 +2918,7 @@ const _Model = class _Model {
   removeEmptyWindows() {
     const emptyWindows = /* @__PURE__ */ new Set();
     for (const [windowId] of this.windows) {
-      if (windowId !== _Model.MAIN_WINDOW_ID) {
+      if (windowId !== Model.MAIN_WINDOW_ID) {
         let count = 0;
         this.visitWindowNodes(windowId, (node) => {
           if (node instanceof TabNode) {
@@ -2977,7 +2974,7 @@ const _Model = class _Model {
   /** @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) {
+    if (node === void 0 && windowId === Model.MAIN_WINDOW_ID) {
       node = this.borders.findDropTargetNode(dragNode, x, y);
     }
     return node;
@@ -2990,7 +2987,7 @@ const _Model = class _Model {
   }
   /** @internal */
   updateAttrs(json) {
-    _Model.attributeDefinitions.update(json, this.attributes);
+    Model.attributeDefinitions.update(json, this.attributes);
   }
   /** @internal */
   nextUniqueId() {
@@ -3009,16 +3006,16 @@ const _Model = class _Model {
     return this.onCreateTabSet;
   }
   static toTypescriptInterfaces() {
-    _Model.attributeDefinitions.pairAttributes("RowNode", RowNode.getAttributeDefinitions());
-    _Model.attributeDefinitions.pairAttributes("TabSetNode", TabSetNode.getAttributeDefinitions());
-    _Model.attributeDefinitions.pairAttributes("TabNode", TabNode.getAttributeDefinitions());
-    _Model.attributeDefinitions.pairAttributes("BorderNode", BorderNode.getAttributeDefinitions());
+    Model.attributeDefinitions.pairAttributes("RowNode", RowNode.getAttributeDefinitions());
+    Model.attributeDefinitions.pairAttributes("TabSetNode", TabSetNode.getAttributeDefinitions());
+    Model.attributeDefinitions.pairAttributes("TabNode", TabNode.getAttributeDefinitions());
+    Model.attributeDefinitions.pairAttributes("BorderNode", BorderNode.getAttributeDefinitions());
     const sb = [];
-    sb.push(_Model.attributeDefinitions.toTypescriptInterface("Global", void 0));
-    sb.push(RowNode.getAttributeDefinitions().toTypescriptInterface("Row", _Model.attributeDefinitions));
-    sb.push(TabSetNode.getAttributeDefinitions().toTypescriptInterface("TabSet", _Model.attributeDefinitions));
-    sb.push(TabNode.getAttributeDefinitions().toTypescriptInterface("Tab", _Model.attributeDefinitions));
-    sb.push(BorderNode.getAttributeDefinitions().toTypescriptInterface("Border", _Model.attributeDefinitions));
+    sb.push(Model.attributeDefinitions.toTypescriptInterface("Global", void 0));
+    sb.push(RowNode.getAttributeDefinitions().toTypescriptInterface("Row", Model.attributeDefinitions));
+    sb.push(TabSetNode.getAttributeDefinitions().toTypescriptInterface("TabSet", Model.attributeDefinitions));
+    sb.push(TabNode.getAttributeDefinitions().toTypescriptInterface("Tab", Model.attributeDefinitions));
+    sb.push(BorderNode.getAttributeDefinitions().toTypescriptInterface("Border", Model.attributeDefinitions));
     console.log(sb.join("\n"));
   }
   /** @internal */
@@ -3089,30 +3086,13 @@ const _Model = class _Model {
     attributeDefinitions.add("borderEnableTabScrollbar", false).setType(Attribute.BOOLEAN);
     return attributeDefinitions;
   }
-};
-__publicField(_Model, "MAIN_WINDOW_ID", "__main_window_id__");
-/** @internal */
-__publicField(_Model, "attributeDefinitions", _Model.createAttributeDefinitions());
-let Model = _Model;
-const _BorderNode = class _BorderNode extends Node {
-  /** @internal */
-  constructor(location, json, model) {
-    super(model);
-    /** @internal */
-    __publicField(this, "contentRect", Rect.empty());
-    /** @internal */
-    __publicField(this, "tabHeaderRect", Rect.empty());
-    /** @internal */
-    __publicField(this, "location");
-    this.location = location;
-    this.attributes.id = `border_${location.getName()}`;
-    _BorderNode.attributeDefinitions.fromJson(json, this.attributes);
-    model.addNode(this);
-  }
+}
+class BorderNode extends Node {
+  static TYPE = "border";
   /** @internal */
   static fromJson(json, model) {
     const location = DockLocation.getByName(json.location);
-    const border = new _BorderNode(location, json, model);
+    const border = new BorderNode(location, json, model);
     if (json.children) {
       border.children = json.children.map((jsonChild) => {
         const child = TabNode.fromJson(jsonChild, model);
@@ -3122,6 +3102,22 @@ const _BorderNode = class _BorderNode extends Node {
     }
     return border;
   }
+  /** @internal */
+  static attributeDefinitions = BorderNode.createAttributeDefinitions();
+  /** @internal */
+  contentRect = Rect.empty();
+  /** @internal */
+  tabHeaderRect = Rect.empty();
+  /** @internal */
+  location;
+  /** @internal */
+  constructor(location, json, model) {
+    super(model);
+    this.location = location;
+    this.attributes.id = `border_${location.getName()}`;
+    BorderNode.attributeDefinitions.fromJson(json, this.attributes);
+    model.addNode(this);
+  }
   getLocation() {
     return this.location;
   }
@@ -3197,7 +3193,7 @@ const _BorderNode = class _BorderNode extends Node {
   }
   toJson() {
     const json = {};
-    _BorderNode.attributeDefinitions.toJson(json, this.attributes);
+    BorderNode.attributeDefinitions.toJson(json, this.attributes);
     json.location = this.location.getName();
     json.children = this.children.map((child) => child.toJson());
     return json;
@@ -3265,7 +3261,7 @@ const _BorderNode = class _BorderNode extends Node {
   }
   /** @internal */
   updateAttrs(json) {
-    _BorderNode.attributeDefinitions.update(json, this.attributes);
+    BorderNode.attributeDefinitions.update(json, this.attributes);
   }
   /** @internal */
   remove(node) {
@@ -3355,7 +3351,7 @@ const _BorderNode = class _BorderNode extends Node {
     const dragParent = dragNode.getParent();
     if (dragParent !== void 0) {
       fromIndex = dragParent.removeChild(dragNode);
-      if (dragParent !== this && dragParent instanceof _BorderNode && dragParent.getSelected() === fromIndex) {
+      if (dragParent !== this && dragParent instanceof BorderNode && dragParent.getSelected() === fromIndex) {
         dragParent.setSelected(-1);
       } else {
         adjustSelectedIndex(dragParent, fromIndex);
@@ -3418,16 +3414,16 @@ const _BorderNode = class _BorderNode extends Node {
   }
   /** @internal */
   getAttributeDefinitions() {
-    return _BorderNode.attributeDefinitions;
+    return BorderNode.attributeDefinitions;
   }
   /** @internal */
   static getAttributeDefinitions() {
-    return _BorderNode.attributeDefinitions;
+    return BorderNode.attributeDefinitions;
   }
   /** @internal */
   static createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
-    attributeDefinitions.add("type", _BorderNode.TYPE, true).setType(Attribute.STRING).setFixed();
+    attributeDefinitions.add("type", BorderNode.TYPE, true).setType(Attribute.STRING).setFixed();
     attributeDefinitions.add("selected", -1).setType(Attribute.NUMBER).setDescription(
       `index of selected/visible tab in border; -1 means no tab selected`
     );
@@ -3466,11 +3462,7 @@ const _BorderNode = class _BorderNode extends Node {
     );
     return attributeDefinitions;
   }
-};
-__publicField(_BorderNode, "TYPE", "border");
-/** @internal */
-__publicField(_BorderNode, "attributeDefinitions", _BorderNode.createAttributeDefinitions());
-let BorderNode = _BorderNode;
+}
 let splitterDragging = false;
 const Splitter = (props) => {
   const { layout, node, index, horizontal } = props;
@@ -3489,13 +3481,11 @@ const Splitter = (props) => {
     extra = Math.max(20, extra + size) - size;
   }
   React.useEffect(() => {
-    var _a, _b;
-    (_a = selfRef.current) == null ? void 0 : _a.addEventListener("touchstart", onTouchStart, { passive: false });
-    (_b = extendedRef.current) == null ? void 0 : _b.addEventListener("touchstart", onTouchStart, { passive: false });
+    selfRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
+    extendedRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
     return () => {
-      var _a2, _b2;
-      (_a2 = selfRef.current) == null ? void 0 : _a2.removeEventListener("touchstart", onTouchStart);
-      (_b2 = extendedRef.current) == null ? void 0 : _b2.removeEventListener("touchstart", onTouchStart);
+      selfRef.current?.removeEventListener("touchstart", onTouchStart);
+      extendedRef.current?.removeEventListener("touchstart", onTouchStart);
     };
   }, []);
   const onTouchStart = (event) => {
@@ -3503,7 +3493,6 @@ const Splitter = (props) => {
     event.stopImmediatePropagation();
   };
   const onPointerDown = (event) => {
-    var _a;
     event.stopPropagation();
     if (node instanceof RowNode) {
       initalSizes.current = node.getSplitterInitials(index);
@@ -3521,7 +3510,7 @@ const Splitter = (props) => {
       handleDiv.current.className = cm(CLASSES.FLEXLAYOUT__SPLITTER_HANDLE) + " " + (horizontal ? cm(CLASSES.FLEXLAYOUT__SPLITTER_HANDLE_HORZ) : cm(CLASSES.FLEXLAYOUT__SPLITTER_HANDLE_VERT));
       outlineDiv.current.appendChild(handleDiv.current);
     }
-    const r = (_a = selfRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    const r = selfRef.current?.getBoundingClientRect();
     const rect = new Rect(
       r.x - layout.getDomRect().x,
       r.y - layout.getDomRect().y,
@@ -3688,7 +3677,7 @@ function BorderTab(props) {
   React.useLayoutEffect(() => {
     const contentRect = layout.getBoundingClientRect(selfRef.current);
     if (!isNaN(contentRect.x) && contentRect.width > 0) {
-      if (!border.getContentRect().equals(contentRect)) {
+      if (!border.getContentRect().aboutEquals(contentRect)) {
         border.setContentRect(contentRect);
         if (splitterDragging) {
           if (timer.current) {
@@ -3699,7 +3688,9 @@ function BorderTab(props) {
             timer.current = void 0;
           }, 50);
         } else {
-          layout.redrawInternal("border content rect " + contentRect);
+          requestAnimationFrame(() => {
+            layout.redrawInternal("border content rect " + contentRect);
+          });
         }
       }
     }
@@ -3899,7 +3890,7 @@ function showPopup(triggerElement, parentNode, items, onSelect, layout) {
   const classNameMapper = layout.getClassName;
   const currentDocument = triggerElement.ownerDocument;
   const triggerRect = triggerElement.getBoundingClientRect();
-  const layoutRect = (layoutDiv == null ? void 0 : layoutDiv.getBoundingClientRect()) ?? new DOMRect(0, 0, 100, 100);
+  const layoutRect = layoutDiv?.getBoundingClientRect() ?? new DOMRect(0, 0, 100, 100);
   const elm = currentDocument.createElement("div");
   elm.className = classNameMapper(CLASSES.FLEXLAYOUT__POPUP_MENU_CONTAINER);
   if (triggerRect.left < layoutRect.left + layoutRect.width / 2) {
@@ -4042,11 +4033,9 @@ const useTabOverflow = (layout, node, orientation, tabStripRef, miniScrollRef, t
     updateHiddenTabs();
   });
   React.useEffect(() => {
-    var _a;
-    (_a = selfRef.current) == null ? void 0 : _a.addEventListener("wheel", onWheel, { passive: false });
+    selfRef.current?.addEventListener("wheel", onWheel, { passive: false });
     return () => {
-      var _a2;
-      (_a2 = selfRef.current) == null ? void 0 : _a2.removeEventListener("wheel", onWheel);
+      selfRef.current?.removeEventListener("wheel", onWheel);
     };
   }, [selfRef.current]);
   const onWheel = (event) => {
@@ -4128,10 +4117,9 @@ const useTabOverflow = (layout, node, orientation, tabStripRef, miniScrollRef, t
     updateHiddenTabs();
   };
   const onScrollPointerDown = (event) => {
-    var _a;
     event.stopPropagation();
     miniScrollRef.current.setPointerCapture(event.pointerId);
-    const r = (_a = miniScrollRef.current) == null ? void 0 : _a.getBoundingClientRect();
+    const r = miniScrollRef.current?.getBoundingClientRect();
     if (orientation === Orientation.HORZ) {
       thumbInternalPos.current = event.clientX - r.x;
     } else {
@@ -4577,9 +4565,8 @@ const PopoutWindow = (props) => {
       }
     }
     return () => {
-      var _a;
       if (!layout.getModel().getwindowsMap().has(layoutWindow.windowId)) {
-        (_a = popoutWindow.current) == null ? void 0 : _a.close();
+        popoutWindow.current?.close();
         popoutWindow.current = null;
       }
     };
@@ -4884,7 +4871,7 @@ const TabSet = (props) => {
       node.setTabStripRect(layout.getBoundingClientRect(tabStripRef.current));
     }
     const newContentRect = layout.getBoundingClientRect(contentRef.current);
-    if (!node.getContentRect().equals(newContentRect) && !isNaN(newContentRect.x)) {
+    if (!node.getContentRect().aboutEquals(newContentRect) && !isNaN(newContentRect.x)) {
       node.setContentRect(newContentRect);
       if (splitterDragging) {
         if (timer.current) {
@@ -4895,7 +4882,9 @@ const TabSet = (props) => {
           timer.current = void 0;
         }, 50);
       } else {
-        layout.redrawInternal("border content rect " + newContentRect);
+        requestAnimationFrame(() => {
+          layout.redrawInternal("border content rect " + newContentRect);
+        });
       }
     }
   });
@@ -5459,9 +5448,6 @@ const Tab = (props) => {
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
-    __publicField(this, "retry", () => {
-      this.setState({ hasError: false });
-    });
     this.state = { hasError: false };
   }
   static getDerivedStateFromError(error) {
@@ -5471,6 +5457,9 @@ class ErrorBoundary extends React.Component {
     console.debug(error);
     console.debug(errorInfo);
   }
+  retry = () => {
+    this.setState({ hasError: false });
+  };
   render() {
     if (this.state.hasError) {
       return /* @__PURE__ */ jsx("div", { className: CLASSES.FLEXLAYOUT__ERROR_BOUNDARY_CONTAINER, children: /* @__PURE__ */ jsx("div", { className: CLASSES.FLEXLAYOUT__ERROR_BOUNDARY_CONTENT, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
@@ -5496,14 +5485,14 @@ function arePropsEqual(prevProps, nextProps) {
   return !reRender;
 }
 class Layout extends React.Component {
+  /** @internal */
+  selfRef;
+  /** @internal */
+  revision;
   // so LayoutInternal knows this is a parent render (used for optimization)
   /** @internal */
   constructor(props) {
     super(props);
-    /** @internal */
-    __publicField(this, "selfRef");
-    /** @internal */
-    __publicField(this, "revision");
     this.selfRef = React.createRef();
     this.revision = 0;
   }
@@ -5567,229 +5556,36 @@ class Layout extends React.Component {
     return /* @__PURE__ */ jsx(LayoutInternal, { ref: this.selfRef, ...this.props, renderRevision: this.revision++ });
   }
 }
-const _LayoutInternal = class _LayoutInternal extends React.Component {
+class LayoutInternal extends React.Component {
+  static dragState = void 0;
+  selfRef;
+  moveablesRef;
+  findBorderBarSizeRef;
+  mainRef;
+  previousModel;
+  orderedTabIds;
+  orderedTabMoveableIds;
+  moveableElementMap = /* @__PURE__ */ new Map();
+  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);
-    __publicField(this, "selfRef");
-    __publicField(this, "moveablesRef");
-    __publicField(this, "findBorderBarSizeRef");
-    __publicField(this, "mainRef");
-    __publicField(this, "previousModel");
-    __publicField(this, "orderedTabIds");
-    __publicField(this, "orderedTabMoveableIds");
-    __publicField(this, "moveableElementMap", /* @__PURE__ */ new Map());
-    __publicField(this, "dropInfo");
-    __publicField(this, "outlineDiv");
-    __publicField(this, "currentDocument");
-    __publicField(this, "currentWindow");
-    __publicField(this, "supportsPopout");
-    __publicField(this, "popoutURL");
-    __publicField(this, "icons");
-    __publicField(this, "resizeObserver");
-    __publicField(this, "dragEnterCount", 0);
-    __publicField(this, "dragging", false);
-    __publicField(this, "windowId");
-    __publicField(this, "layoutWindow");
-    __publicField(this, "mainLayout");
-    __publicField(this, "isMainWindow");
-    __publicField(this, "isDraggingOverWindow");
-    __publicField(this, "styleObserver");
-    __publicField(this, "popoutWindowName");
-    __publicField(this, "updateLayoutMetrics", () => {
-      if (this.findBorderBarSizeRef.current) {
-        const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;
-        if (borderBarSize !== this.state.calculatedBorderBarSize) {
-          this.setState({ calculatedBorderBarSize: borderBarSize });
-        }
-      }
-    });
-    __publicField(this, "onModelChange", (action) => {
-      this.redrawInternal("model change");
-      if (this.props.onModelChange) {
-        this.props.onModelChange(this.props.model, action);
-      }
-    });
-    __publicField(this, "updateRect", () => {
-      if (this.selfRef.current) {
-        const rect = Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());
-        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");
-          }
-        }
-      }
-    });
-    __publicField(this, "getClassName", (defaultClassName) => {
-      if (this.props.classNameMapper === void 0) {
-        return defaultClassName;
-      } else {
-        return this.props.classNameMapper(defaultClassName);
-      }
-    });
-    __publicField(this, "onCloseWindow", (windowLayout) => {
-      this.doAction(Actions.closeWindow(windowLayout.windowId));
-    });
-    __publicField(this, "onSetWindow", (windowLayout, window2) => {
-    });
-    __publicField(this, "showControlInPortal", (control, element) => {
-      const portal = createPortal(control, element);
-      this.setState({ portal });
-    });
-    __publicField(this, "hideControlInPortal", () => {
-      this.setState({ portal: void 0 });
-    });
-    __publicField(this, "getIcons", () => {
-      return this.icons;
-    });
-    __publicField(this, "setDragNode", (event, node) => {
-      _LayoutInternal.dragState = new DragState(this.mainLayout, "internal", node, void 0, void 0);
-      event.dataTransfer.setData("text/plain", "--flexlayout--");
-      event.dataTransfer.effectAllowed = "copyMove";
-      event.dataTransfer.dropEffect = "move";
-      this.dragEnterCount = 0;
-      if (node instanceof TabSetNode) {
-        let rendered = false;
-        let content = this.i18nName(I18nLabel.Move_Tabset);
-        if (node.getChildren().length > 0) {
-          content = this.i18nName(I18nLabel.Move_Tabs).replace("?", String(node.getChildren().length));
-        }
-        if (this.props.onRenderDragRect) {
-          const dragComponent = this.props.onRenderDragRect(content, node, void 0);
-          if (dragComponent) {
-            this.setDragComponent(event, dragComponent, 10, 10);
-            rendered = true;
-          }
-        }
-        if (!rendered) {
-          this.setDragComponent(event, content, 10, 10);
-        }
-      } else {
-        const element = event.target;
-        const rect = element.getBoundingClientRect();
-        const offsetX = event.clientX - rect.left;
-        const offsetY = event.clientY - rect.top;
-        const parentNode = node == null ? void 0 : node.getParent();
-        const isInVerticalBorder = parentNode instanceof BorderNode && parentNode.getOrientation() === Orientation.HORZ;
-        const x = isInVerticalBorder ? 10 : offsetX;
-        const y = isInVerticalBorder ? 10 : offsetY;
-        let rendered = false;
-        if (this.props.onRenderDragRect) {
-          const content = /* @__PURE__ */ jsx(TabButtonStamp, { layout: this, node }, node.getId());
-          const dragComponent = this.props.onRenderDragRect(content, node, void 0);
-          if (dragComponent) {
-            this.setDragComponent(event, dragComponent, x, y);
-            rendered = true;
-          }
-        }
-        if (!rendered) {
-          if (isSafari()) {
-            this.setDragComponent(event, /* @__PURE__ */ jsx(TabButtonStamp, { node, layout: this }), x, y);
-          } else {
-            event.dataTransfer.setDragImage(node.getTabStamp(), x, y);
-          }
-        }
-      }
-    });
-    __publicField(this, "onDragEnterRaw", (event) => {
-      this.dragEnterCount++;
-      if (this.dragEnterCount === 1) {
-        this.onDragEnter(event);
-      }
-    });
-    __publicField(this, "onDragLeaveRaw", (event) => {
-      this.dragEnterCount--;
-      if (this.dragEnterCount === 0) {
-        this.onDragLeave(event);
-      }
-    });
-    __publicField(this, "onDragEnter", (event) => {
-      if (!_LayoutInternal.dragState && this.props.onExternalDrag) {
-        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", 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) {
-          return;
-        }
-        event.preventDefault();
-        this.dropInfo = void 0;
-        const rootdiv = this.selfRef.current;
-        this.outlineDiv = this.currentDocument.createElement("div");
-        this.outlineDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__OUTLINE_RECT);
-        this.outlineDiv.style.visibility = "hidden";
-        const speed = this.props.model.getAttribute("tabDragSpeed");
-        this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
-        rootdiv.appendChild(this.outlineDiv);
-        this.dragging = true;
-        this.showOverlay(true);
-        if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === void 0) {
-          this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
-        }
-        const clientRect = this.selfRef.current.getBoundingClientRect();
-        const r = new Rect(
-          event.clientX - clientRect.left,
-          event.clientY - clientRect.top,
-          1,
-          1
-        );
-        r.positionElement(this.outlineDiv);
-      }
-    });
-    __publicField(this, "onDragOver", (event) => {
-      var _a;
-      if (this.dragging && !this.isDraggingOverWindow) {
-        event.preventDefault();
-        const clientRect = (_a = this.selfRef.current) == null ? void 0 : _a.getBoundingClientRect();
-        const pos = {
-          x: event.clientX - ((clientRect == null ? void 0 : clientRect.left) ?? 0),
-          y: event.clientY - ((clientRect == null ? void 0 : clientRect.top) ?? 0)
-        };
-        this.checkForBorderToShow(pos.x, pos.y);
-        const dropInfo = this.props.model.findDropTargetNode(this.windowId, _LayoutInternal.dragState.dragNode, pos.x, pos.y);
-        if (dropInfo) {
-          this.dropInfo = dropInfo;
-          if (this.outlineDiv) {
-            this.outlineDiv.className = this.getClassName(dropInfo.className);
-            dropInfo.rect.positionElement(this.outlineDiv);
-            this.outlineDiv.style.visibility = "visible";
-          }
-        }
-      }
-    });
-    __publicField(this, "onDragLeave", (event) => {
-      if (this.dragging) {
-        if (this.windowId !== Model.MAIN_WINDOW_ID) {
-          _LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);
-        }
-        this.clearDragLocal();
-      }
-    });
-    __publicField(this, "onDrop", (event) => {
-      if (this.dragging) {
-        event.preventDefault();
-        const dragState = _LayoutInternal.dragState;
-        if (this.dropInfo) {
-          if (dragState.dragJson !== void 0) {
-            const newNode = this.doAction(Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
-            if (dragState.fnNewNodeDropped !== void 0) {
-              dragState.fnNewNodeDropped(newNode, event);
-            }
-          } else if (dragState.dragNode !== void 0) {
-            this.doAction(Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
-          }
-        }
-        this.mainLayout.clearDragMain();
-      }
-      this.dragEnterCount = 0;
-    });
     this.orderedTabIds = [];
     this.orderedTabMoveableIds = [];
     this.selfRef = React.createRef();
@@ -5832,7 +5628,6 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
       this.resizeObserver.observe(this.selfRef.current);
     }
     if (this.isMainWindow) {
-      this.props.model.addChangeListener(this.onModelChange);
       this.updateLayoutMetrics();
     } else {
       this.currentWindow.addEventListener("resize", () => {
@@ -5878,14 +5673,13 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
     }
   }
   componentWillUnmount() {
-    var _a, _b;
     if (this.selfRef.current) {
-      (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this.selfRef.current);
+      this.resizeObserver?.unobserve(this.selfRef.current);
     }
     if (this.isMainWindow) {
       this.props.model.removeChangeListener(this.onModelChange);
     }
-    (_b = this.styleObserver) == null ? void 0 : _b.disconnect();
+    this.styleObserver?.disconnect();
   }
   render() {
     if (!this.selfRef.current) {
@@ -6036,7 +5830,7 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
                 url: this.popoutURL + "?id=" + windowId,
                 onSetWindow: this.onSetWindow,
                 onCloseWindow: this.onCloseWindow,
-                children: /* @__PURE__ */ jsx("div", { className: this.props.popoutClassName, children: /* @__PURE__ */ jsx(_LayoutInternal, { ...this.props, windowId, mainLayout: this }) })
+                children: /* @__PURE__ */ jsx("div", { className: this.props.popoutClassName, children: /* @__PURE__ */ jsx(LayoutInternal, { ...this.props, windowId, mainLayout: this }) })
               },
               windowId
             )
@@ -6146,6 +5940,14 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
       this.setState({ showHiddenBorder: location });
     }
   }
+  updateLayoutMetrics = () => {
+    if (this.findBorderBarSizeRef.current) {
+      const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;
+      if (borderBarSize !== this.state.calculatedBorderBarSize) {
+        this.setState({ calculatedBorderBarSize: borderBarSize });
+      }
+    }
+  };
   tidyMoveablesMap() {
     const tabs = /* @__PURE__ */ new Map();
     this.props.model.visitNodes((node, _) => {
@@ -6181,6 +5983,12 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
     });
     return reordered;
   }
+  onModelChange = (action) => {
+    this.redrawInternal("model change");
+    if (this.props.onModelChange) {
+      this.props.onModelChange(this.props.model, action);
+    }
+  };
   redraw(type) {
     this.mainLayout.setState((state, props) => {
       return { forceRevision: state.forceRevision + 1 };
@@ -6202,6 +6010,17 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
       return this.props.model.doAction(action);
     }
   }
+  updateRect = () => {
+    if (this.selfRef.current) {
+      const rect = Rect.fromDomRect(this.selfRef.current.getBoundingClientRect());
+      if (!rect.aboutEquals(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) {
     const layoutRect = this.getDomRect();
     if (layoutRect) {
@@ -6225,6 +6044,13 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
   getMainLayout() {
     return this.mainLayout;
   }
+  getClassName = (defaultClassName) => {
+    if (this.props.classNameMapper === void 0) {
+      return defaultClassName;
+    } else {
+      return this.props.classNameMapper(defaultClassName);
+    }
+  };
   getCurrentDocument() {
     return this.currentDocument;
   }
@@ -6265,6 +6091,11 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
   getModel() {
     return this.props.model;
   }
+  onCloseWindow = (windowLayout) => {
+    this.doAction(Actions.closeWindow(windowLayout.windowId));
+  };
+  onSetWindow = (windowLayout, window2) => {
+  };
   getScreenRect(inRect) {
     const rect = inRect.clone();
     const layoutRect = this.getDomRect();
@@ -6292,6 +6123,16 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
     }
     return void 0;
   }
+  showControlInPortal = (control, element) => {
+    const portal = createPortal(control, element);
+    this.setState({ portal });
+  };
+  hideControlInPortal = () => {
+    this.setState({ portal: void 0 });
+  };
+  getIcons = () => {
+    return this.icons;
+  };
   maximize(tabsetNode) {
     this.doAction(Actions.maximizeToggle(tabsetNode.getId(), this.getWindowId()));
   }
@@ -6338,11 +6179,60 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
   // *************************** Start Drag Drop *************************************
   addTabWithDragAndDrop(event, json, onDrop) {
     const tempNode = TabNode.fromJson(json, this.props.model, false);
-    _LayoutInternal.dragState = new DragState(this.mainLayout, "add", tempNode, json, onDrop);
+    LayoutInternal.dragState = new DragState(this.mainLayout, "add", tempNode, json, onDrop);
   }
   moveTabWithDragAndDrop(event, node) {
     this.setDragNode(event, node);
   }
+  setDragNode = (event, node) => {
+    LayoutInternal.dragState = new DragState(this.mainLayout, "internal", node, void 0, void 0);
+    event.dataTransfer.setData("text/plain", "--flexlayout--");
+    event.dataTransfer.effectAllowed = "copyMove";
+    event.dataTransfer.dropEffect = "move";
+    this.dragEnterCount = 0;
+    if (node instanceof TabSetNode) {
+      let rendered = false;
+      let content = this.i18nName(I18nLabel.Move_Tabset);
+      if (node.getChildren().length > 0) {
+        content = this.i18nName(I18nLabel.Move_Tabs).replace("?", String(node.getChildren().length));
+      }
+      if (this.props.onRenderDragRect) {
+        const dragComponent = this.props.onRenderDragRect(content, node, void 0);
+        if (dragComponent) {
+          this.setDragComponent(event, dragComponent, 10, 10);
+          rendered = true;
+        }
+      }
+      if (!rendered) {
+        this.setDragComponent(event, content, 10, 10);
+      }
+    } else {
+      const element = event.target;
+      const rect = element.getBoundingClientRect();
+      const offsetX = event.clientX - rect.left;
+      const offsetY = event.clientY - rect.top;
+      const parentNode = node?.getParent();
+      const isInVerticalBorder = parentNode instanceof BorderNode && parentNode.getOrientation() === Orientation.HORZ;
+      const x = isInVerticalBorder ? 10 : offsetX;
+      const y = isInVerticalBorder ? 10 : offsetY;
+      let rendered = false;
+      if (this.props.onRenderDragRect) {
+        const content = /* @__PURE__ */ jsx(TabButtonStamp, { layout: this, node }, node.getId());
+        const dragComponent = this.props.onRenderDragRect(content, node, void 0);
+        if (dragComponent) {
+          this.setDragComponent(event, dragComponent, x, y);
+          rendered = true;
+        }
+      }
+      if (!rendered) {
+        if (isSafari()) {
+          this.setDragComponent(event, /* @__PURE__ */ jsx(TabButtonStamp, { node, layout: this }), x, y);
+        } else {
+          event.dataTransfer.setDragImage(node.getTabStamp(), x, y);
+        }
+      }
+    }
+  };
   setDragComponent(event, component, x, y) {
     const dragElement = /* @__PURE__ */ jsx(
       "div",
@@ -6379,8 +6269,20 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
       this.isDraggingOverWindow = overWindow;
     }
   }
+  onDragEnterRaw = (event) => {
+    this.dragEnterCount++;
+    if (this.dragEnterCount === 1) {
+      this.onDragEnter(event);
+    }
+  };
+  onDragLeaveRaw = (event) => {
+    this.dragEnterCount--;
+    if (this.dragEnterCount === 0) {
+      this.onDragLeave(event);
+    }
+  };
   clearDragMain() {
-    _LayoutInternal.dragState = void 0;
+    LayoutInternal.dragState = void 0;
     if (this.windowId === Model.MAIN_WINDOW_ID) {
       this.isDraggingOverWindow = false;
     }
@@ -6398,11 +6300,94 @@ const _LayoutInternal = class _LayoutInternal extends React.Component {
       this.outlineDiv = void 0;
     }
   }
+  onDragEnter = (event) => {
+    if (!LayoutInternal.dragState && this.props.onExternalDrag) {
+      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", 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) {
+        return;
+      }
+      event.preventDefault();
+      this.dropInfo = void 0;
+      const rootdiv = this.selfRef.current;
+      this.outlineDiv = this.currentDocument.createElement("div");
+      this.outlineDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__OUTLINE_RECT);
+      this.outlineDiv.style.visibility = "hidden";
+      const speed = this.props.model.getAttribute("tabDragSpeed");
+      this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
+      rootdiv.appendChild(this.outlineDiv);
+      this.dragging = true;
+      this.showOverlay(true);
+      if (!this.isDraggingOverWindow && this.props.model.getMaximizedTabset(this.windowId) === void 0) {
+        this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
+      }
+      const clientRect = this.selfRef.current.getBoundingClientRect();
+      const r = new Rect(
+        event.clientX - clientRect.left,
+        event.clientY - clientRect.top,
+        1,
+        1
+      );
+      r.positionElement(this.outlineDiv);
+    }
+  };
+  onDragOver = (event) => {
+    if (this.dragging && !this.isDraggingOverWindow) {
+      event.preventDefault();
+      const clientRect = this.selfRef.current?.getBoundingClientRect();
+      const pos = {
+        x: event.clientX - (clientRect?.left ?? 0),
+        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);
+      if (dropInfo) {
+        this.dropInfo = dropInfo;
+        if (this.outlineDiv) {
+          this.outlineDiv.className = this.getClassName(dropInfo.className);
+          dropInfo.rect.positionElement(this.outlineDiv);
+          this.outlineDiv.style.visibility = "visible";
+        }
+      }
+    }
+  };
+  onDragLeave = (event) => {
+    if (this.dragging) {
+      if (this.windowId !== Model.MAIN_WINDOW_ID) {
+        LayoutInternal.dragState.mainLayout.setDraggingOverWindow(false);
+      }
+      this.clearDragLocal();
+    }
+  };
+  onDrop = (event) => {
+    if (this.dragging) {
+      event.preventDefault();
+      const dragState = LayoutInternal.dragState;
+      if (this.dropInfo) {
+        if (dragState.dragJson !== void 0) {
+          const newNode = this.doAction(Actions.addNode(dragState.dragJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+          if (dragState.fnNewNodeDropped !== void 0) {
+            dragState.fnNewNodeDropped(newNode, event);
+          }
+        } else if (dragState.dragNode !== void 0) {
+          this.doAction(Actions.moveNode(dragState.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+        }
+      }
+      this.mainLayout.clearDragMain();
+    }
+    this.dragEnterCount = 0;
+  };
   // *************************** End Drag Drop *************************************
-};
-__publicField(_LayoutInternal, "dragState");
-let LayoutInternal = _LayoutInternal;
-const FlexLayoutVersion = "0.8.18";
+}
+const FlexLayoutVersion = "0.8.19";
 const defaultIcons = {
   close: /* @__PURE__ */ jsx(CloseIcon, {}),
   closeTabset: /* @__PURE__ */ jsx(CloseIcon, {}),
@@ -6417,12 +6402,12 @@ const defaultSupportsPopout = isDesktop();
 const edgeRectLength = 100;
 const edgeRectWidth = 10;
 class DragState {
+  mainLayout;
+  dragSource;
+  dragNode;
+  dragJson;
+  fnNewNodeDropped;
   constructor(mainLayout, dragSource, dragNode, dragJson, fnNewNodeDropped) {
-    __publicField(this, "mainLayout");
-    __publicField(this, "dragSource");
-    __publicField(this, "dragNode");
-    __publicField(this, "dragJson");
-    __publicField(this, "fnNewNodeDropped");
     this.mainLayout = mainLayout;
     this.dragSource = dragSource;
     this.dragNode = dragNode;