@aptre/flex-layout 0.2.1 → 0.2.3

package/dist/index.mjs

@@ -4,12 +4,8 @@ import { createPortal as createPortal2 } from "react-dom";
 
 // src/Orientation.ts
 var Orientation = class _Orientation {
-  static {
-    this.HORZ = new _Orientation("horz");
-  }
-  static {
-    this.VERT = new _Orientation("vert");
-  }
+  static HORZ = new _Orientation("horz");
+  static VERT = new _Orientation("vert");
   static flip(from) {
     if (from === _Orientation.HORZ) {
       return _Orientation.VERT;
@@ -18,6 +14,8 @@ var Orientation = class _Orientation {
     }
   }
   /** @internal */
+  _name;
+  /** @internal */
   constructor(name) {
     this._name = name;
   }
@@ -34,6 +32,10 @@ var Rect = class _Rect {
   static empty() {
     return new _Rect(0, 0, 0, 0);
   }
+  x;
+  y;
+  width;
+  height;
   constructor(x, y, width, height) {
     this.x = x;
     this.y = y;
@@ -41,7 +43,7 @@ var Rect = class _Rect {
     this.height = height;
   }
   static fromElement(element) {
-    let { x, y, width, height } = element.getBoundingClientRect();
+    const { x, y, width, height } = element.getBoundingClientRect();
     return new _Rect(x, y, width, height);
   }
   clone() {
@@ -99,24 +101,12 @@ var Rect = class _Rect {
 
 // src/DockLocation.ts
 var DockLocation = class _DockLocation {
-  static {
-    this.values = {};
-  }
-  static {
-    this.TOP = new _DockLocation("top", Orientation.VERT, 0);
-  }
-  static {
-    this.BOTTOM = new _DockLocation("bottom", Orientation.VERT, 1);
-  }
-  static {
-    this.LEFT = new _DockLocation("left", Orientation.HORZ, 0);
-  }
-  static {
-    this.RIGHT = new _DockLocation("right", Orientation.HORZ, 1);
-  }
-  static {
-    this.CENTER = new _DockLocation("center", Orientation.VERT, 0);
-  }
+  static values = {};
+  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[name];
@@ -137,6 +127,12 @@ var DockLocation = class _DockLocation {
     }
   }
   /** @internal */
+  _name;
+  /** @internal */
+  _orientation;
+  /** @internal */
+  _indexPlus;
+  /** @internal */
   constructor(name, orientation, indexPlus) {
     this._name = name;
     this._orientation = orientation;
@@ -206,22 +202,54 @@ var DockLocation = class _DockLocation {
 // src/DragDrop.ts
 var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
 var DragDrop = class _DragDrop {
+  static instance = new _DragDrop();
+  /** @internal */
+  _fDblClick;
+  /** @internal */
+  _fClick;
+  /** @internal */
+  _fDragEnd;
+  /** @internal */
+  _fDragMove;
+  /** @internal */
+  _fDragStart;
+  /** @internal */
+  _fDragCancel;
+  /** @internal */
+  _glass;
+  /** @internal */
+  _defaultGlassCursor;
+  /** @internal */
+  _glassCursorOverride;
+  /** @internal */
+  _manualGlassManagement = false;
+  /** @internal */
+  _lastClick;
+  /** @internal */
+  _clickX;
+  /** @internal */
+  _clickY;
+  /** @internal */
+  _startX = 0;
+  /** @internal */
+  _startY = 0;
+  /** @internal */
+  _dragDepth = 0;
+  /** @internal */
+  _glassShowing = false;
+  /** @internal */
+  _dragging = false;
+  /** @internal */
+  _active = false;
+  // drag and drop is in progress, can be used on ios to prevent body scrolling (see demo)
+  /** @internal */
+  _document;
+  /** @internal */
+  _rootElement;
+  /** @internal */
+  _lastEvent;
   /** @internal */
   constructor() {
-    /** @internal */
-    this._manualGlassManagement = false;
-    /** @internal */
-    this._startX = 0;
-    /** @internal */
-    this._startY = 0;
-    /** @internal */
-    this._dragDepth = 0;
-    /** @internal */
-    this._glassShowing = false;
-    /** @internal */
-    this._dragging = false;
-    /** @internal */
-    this._active = false;
     if (canUseDOM) {
       this._glass = document.createElement("div");
       this._glass.style.zIndex = "998";
@@ -240,9 +268,6 @@ var DragDrop = class _DragDrop {
     this._clickX = 0;
     this._clickY = 0;
   }
-  static {
-    this.instance = new _DragDrop();
-  }
   // if you add the glass pane then you should remove it
   addGlass(fCancel) {
     if (!this._glassShowing) {
@@ -503,6 +528,8 @@ var DragDrop = class _DragDrop {
 
 // src/model/Action.ts
 var Action = class {
+  type;
+  data;
   constructor(type, data) {
     this.type = type;
     this.data = data;
@@ -511,48 +538,20 @@ var Action = class {
 
 // src/model/Actions.ts
 var Actions = class _Actions {
-  static {
-    this.ADD_NODE = "FlexLayout_AddNode";
-  }
-  static {
-    this.MOVE_NODE = "FlexLayout_MoveNode";
-  }
-  static {
-    this.DELETE_TAB = "FlexLayout_DeleteTab";
-  }
-  static {
-    this.DELETE_TABSET = "FlexLayout_DeleteTabset";
-  }
-  static {
-    this.RENAME_TAB = "FlexLayout_RenameTab";
-  }
-  static {
-    this.SELECT_TAB = "FlexLayout_SelectTab";
-  }
-  static {
-    this.SET_ACTIVE_TABSET = "FlexLayout_SetActiveTabset";
-  }
-  static {
-    this.ADJUST_SPLIT = "FlexLayout_AdjustSplit";
-  }
-  static {
-    this.ADJUST_BORDER_SPLIT = "FlexLayout_AdjustBorderSplit";
-  }
-  static {
-    this.MAXIMIZE_TOGGLE = "FlexLayout_MaximizeToggle";
-  }
-  static {
-    this.UPDATE_MODEL_ATTRIBUTES = "FlexLayout_UpdateModelAttributes";
-  }
-  static {
-    this.UPDATE_NODE_ATTRIBUTES = "FlexLayout_UpdateNodeAttributes";
-  }
-  static {
-    this.FLOAT_TAB = "FlexLayout_FloatTab";
-  }
-  static {
-    this.UNFLOAT_TAB = "FlexLayout_UnFloatTab";
-  }
+  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_SPLIT = "FlexLayout_AdjustSplit";
+  static ADJUST_BORDER_SPLIT = "FlexLayout_AdjustBorderSplit";
+  static MAXIMIZE_TOGGLE = "FlexLayout_MaximizeToggle";
+  static UPDATE_MODEL_ATTRIBUTES = "FlexLayout_UpdateModelAttributes";
+  static UPDATE_NODE_ATTRIBUTES = "FlexLayout_UpdateNodeAttributes";
+  static FLOAT_TAB = "FlexLayout_FloatTab";
+  static UNFLOAT_TAB = "FlexLayout_UnFloatTab";
   /**
    * Adds a tab node to the given tabset node
    * @param json the json for the new tab node e.g {type:"tab", component:"table"}
@@ -688,15 +687,16 @@ var Actions = class _Actions {
 
 // src/Attribute.ts
 var Attribute = class {
-  static {
-    this.NUMBER = "number";
-  }
-  static {
-    this.STRING = "string";
-  }
-  static {
-    this.BOOLEAN = "boolean";
-  }
+  static NUMBER = "number";
+  static STRING = "string";
+  static BOOLEAN = "boolean";
+  name;
+  modelName;
+  defaultValue;
+  alwaysWriteJson;
+  type;
+  required;
+  fixed;
   constructor(name, modelName, defaultValue, alwaysWriteJson) {
     this.name = name;
     this.modelName = modelName;
@@ -722,6 +722,8 @@ var Attribute = class {
 
 // src/AttributeDefinitions.ts
 var AttributeDefinitions = class {
+  attributes;
+  nameToAttribute;
   constructor() {
     this.attributes = [];
     this.nameToAttribute = {};
@@ -768,7 +770,7 @@ var AttributeDefinitions = class {
   }
   update(jsonObj, obj) {
     for (const attr of this.attributes) {
-      if (jsonObj.hasOwnProperty(attr.name)) {
+      if (attr.name in jsonObj) {
         const fromValue = jsonObj[attr.name];
         if (fromValue === void 0) {
           delete obj[attr.name];
@@ -801,7 +803,7 @@ var AttributeDefinitions = class {
         defaultValue = attr.defaultValue;
         type = attr.type;
       }
-      let defValue = JSON.stringify(defaultValue);
+      const defValue = JSON.stringify(defaultValue);
       const required = attr.required || attr.fixed ? "" : "?";
       if (c.fixed) {
         lines.push("	" + c.name + ": " + defValue + ";");
@@ -817,6 +819,11 @@ var AttributeDefinitions = class {
 
 // src/DropInfo.ts
 var DropInfo = class {
+  node;
+  rect;
+  location;
+  index;
+  className;
   constructor(node, rect, location, index, className) {
     this.node = node;
     this.rect = rect;
@@ -910,12 +917,28 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
 
 // src/model/Node.ts
 var Node = class {
+  /** @internal */
+  _model;
+  /** @internal */
+  _attributes;
+  /** @internal */
+  _parent;
+  /** @internal */
+  _children;
+  /** @internal */
+  _fixed;
+  /** @internal */
+  _rect;
+  /** @internal */
+  _visible;
+  /** @internal */
+  _listeners;
+  /** @internal */
+  _dirty = false;
+  /** @internal */
+  _tempSize = 0;
   /** @internal */
   constructor(model) {
-    /** @internal */
-    this._dirty = false;
-    /** @internal */
-    this._tempSize = 0;
     this._model = model;
     this._attributes = {};
     this._children = [];
@@ -1126,9 +1149,7 @@ var Node = class {
 
 // src/model/SplitterNode.ts
 var SplitterNode = class _SplitterNode extends Node {
-  static {
-    this.TYPE = "splitter";
-  }
+  static TYPE = "splitter";
   /** @internal */
   constructor(model) {
     super(model);
@@ -1193,27 +1214,14 @@ var SplitterNode = class _SplitterNode extends Node {
 
 // src/model/TabNode.ts
 var TabNode = class _TabNode extends Node {
-  /** @internal */
-  constructor(model, json, addToModel = true) {
-    super(model);
-    this._extra = {};
-    _TabNode._attributeDefinitions.fromJson(json, this._attributes);
-    if (addToModel === true) {
-      model._addNode(this);
-    }
-  }
-  static {
-    this.TYPE = "tab";
-  }
+  static TYPE = "tab";
   /** @internal */
   static _fromJson(json, model, addToModel = true) {
     const newLayoutNode = new _TabNode(model, json, addToModel);
     return newLayoutNode;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _TabNode._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _TabNode._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -1239,6 +1247,23 @@ var TabNode = class _TabNode extends Node {
     attributeDefinitions.addInherited("borderHeight", "tabBorderHeight").setType(Attribute.NUMBER);
     return attributeDefinitions;
   }
+  /** @internal */
+  _tabRect;
+  /** @internal */
+  _renderedName;
+  /** @internal */
+  _extra;
+  /** @internal */
+  _window;
+  /** @internal */
+  constructor(model, json, addToModel = true) {
+    super(model);
+    this._extra = {};
+    _TabNode._attributeDefinitions.fromJson(json, this._attributes);
+    if (addToModel === true) {
+      model._addNode(this);
+    }
+  }
   getWindow() {
     return this._window;
   }
@@ -1374,21 +1399,218 @@ var TabNode = class _TabNode extends Node {
   }
 };
 
-// src/model/RowNode.ts
-var RowNode = class _RowNode extends Node {
-  /** @internal */
-  constructor(model, json) {
-    super(model);
-    this._dirty = true;
-    this._drawChildren = [];
-    this._minHeight = 0;
-    this._minWidth = 0;
-    _RowNode._attributeDefinitions.fromJson(json, this._attributes);
-    model._addNode(this);
+// node_modules/layerr/dist/error.js
+function assertError(err) {
+  if (!isError(err)) {
+    throw new Error("Parameter was not an error");
+  }
+}
+function isError(err) {
+  return objectToString(err) === "[object Error]" || err instanceof Error;
+}
+function objectToString(obj) {
+  return Object.prototype.toString.call(obj);
+}
+
+// node_modules/layerr/dist/tools.js
+function parseArguments(args) {
+  let options, shortMessage = "";
+  if (args.length === 0) {
+    options = {};
+  } else if (isError(args[0])) {
+    options = {
+      cause: args[0]
+    };
+    shortMessage = args.slice(1).join(" ") || "";
+  } else if (args[0] && typeof args[0] === "object") {
+    options = Object.assign({}, args[0]);
+    shortMessage = args.slice(1).join(" ") || "";
+  } else if (typeof args[0] === "string") {
+    options = {};
+    shortMessage = shortMessage = args.join(" ") || "";
+  } else {
+    throw new Error("Invalid arguments passed to Layerr");
+  }
+  return {
+    options,
+    shortMessage
+  };
+}
+
+// node_modules/layerr/dist/layerr.js
+var Layerr = class _Layerr extends Error {
+  constructor(errorOptionsOrMessage, messageText) {
+    const args = [...arguments];
+    const { options, shortMessage } = parseArguments(args);
+    let message = shortMessage;
+    if (options.cause) {
+      message = `${message}: ${options.cause.message}`;
+    }
+    super(message);
+    this.message = message;
+    if (options.name && typeof options.name === "string") {
+      this.name = options.name;
+    } else {
+      this.name = "Layerr";
+    }
+    if (options.cause) {
+      Object.defineProperty(this, "_cause", { value: options.cause });
+    }
+    Object.defineProperty(this, "_info", { value: {} });
+    if (options.info && typeof options.info === "object") {
+      Object.assign(this._info, options.info);
+    }
+    if (Error.captureStackTrace) {
+      const ctor = options.constructorOpt || this.constructor;
+      Error.captureStackTrace(this, ctor);
+    }
+  }
+  static cause(err) {
+    assertError(err);
+    if (!err._cause)
+      return null;
+    return isError(err._cause) ? err._cause : null;
+  }
+  static fullStack(err) {
+    assertError(err);
+    const cause = _Layerr.cause(err);
+    if (cause) {
+      return `${err.stack}
+caused by: ${_Layerr.fullStack(cause)}`;
+    }
+    return err.stack;
+  }
+  static info(err) {
+    assertError(err);
+    const output = {};
+    const cause = _Layerr.cause(err);
+    if (cause) {
+      Object.assign(output, _Layerr.info(cause));
+    }
+    if (err._info) {
+      Object.assign(output, err._info);
+    }
+    return output;
+  }
+  cause() {
+    return _Layerr.cause(this);
+  }
+  toString() {
+    let output = this.name || this.constructor.name || this.constructor.prototype.name;
+    if (this.message) {
+      output = `${output}: ${this.message}`;
+    }
+    return output;
   }
-  static {
-    this.TYPE = "row";
+};
+
+// node_modules/ulidx/dist/browser/index.js
+var ENCODING = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
+var ENCODING_LEN = 32;
+var TIME_MAX = 281474976710655;
+var TIME_LEN = 10;
+var RANDOM_LEN = 16;
+var ERROR_INFO = Object.freeze({
+  source: "ulid"
+});
+function detectPRNG(root) {
+  const rootLookup = root || detectRoot();
+  const globalCrypto = rootLookup && (rootLookup.crypto || rootLookup.msCrypto) || null;
+  if (typeof globalCrypto?.getRandomValues === "function") {
+    return () => {
+      const buffer = new Uint8Array(1);
+      globalCrypto.getRandomValues(buffer);
+      return buffer[0] / 255;
+    };
+  } else if (typeof globalCrypto?.randomBytes === "function") {
+    return () => globalCrypto.randomBytes(1).readUInt8() / 255;
+  } else
+    ;
+  throw new Layerr({
+    info: {
+      code: "PRNG_DETECT",
+      ...ERROR_INFO
+    }
+  }, "Failed to find a reliable PRNG");
+}
+function detectRoot() {
+  if (inWebWorker())
+    return self;
+  if (typeof window !== "undefined") {
+    return window;
+  }
+  if (typeof global !== "undefined") {
+    return global;
+  }
+  if (typeof globalThis !== "undefined") {
+    return globalThis;
+  }
+  return null;
+}
+function encodeRandom(len, prng) {
+  let str = "";
+  for (; len > 0; len--) {
+    str = randomChar(prng) + str;
+  }
+  return str;
+}
+function encodeTime(now, len) {
+  if (isNaN(now)) {
+    throw new Layerr({
+      info: {
+        code: "ENC_TIME_NAN",
+        ...ERROR_INFO
+      }
+    }, `Time must be a number: ${now}`);
+  } else if (now > TIME_MAX) {
+    throw new Layerr({
+      info: {
+        code: "ENC_TIME_SIZE_EXCEED",
+        ...ERROR_INFO
+      }
+    }, `Cannot encode a time larger than ${TIME_MAX}: ${now}`);
+  } else if (now < 0) {
+    throw new Layerr({
+      info: {
+        code: "ENC_TIME_NEG",
+        ...ERROR_INFO
+      }
+    }, `Time must be positive: ${now}`);
+  } else if (Number.isInteger(now) === false) {
+    throw new Layerr({
+      info: {
+        code: "ENC_TIME_TYPE",
+        ...ERROR_INFO
+      }
+    }, `Time must be an integer: ${now}`);
+  }
+  let mod, str = "";
+  for (let currentLen = len; currentLen > 0; currentLen--) {
+    mod = now % ENCODING_LEN;
+    str = ENCODING.charAt(mod) + str;
+    now = (now - mod) / ENCODING_LEN;
+  }
+  return str;
+}
+function inWebWorker() {
+  return typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope;
+}
+function randomChar(prng) {
+  let rand = Math.floor(prng() * ENCODING_LEN);
+  if (rand === ENCODING_LEN) {
+    rand = ENCODING_LEN - 1;
   }
+  return ENCODING.charAt(rand);
+}
+function ulid(seedTime, prng) {
+  const currentPRNG = prng || detectPRNG();
+  const seed = isNaN(seedTime) ? Date.now() : seedTime;
+  return encodeTime(seed, TIME_LEN) + encodeRandom(RANDOM_LEN, currentPRNG);
+}
+
+// src/model/RowNode.ts
+var RowNode = class _RowNode extends Node {
+  static TYPE = "row";
   /** @internal */
   static _fromJson(json, model) {
     const newLayoutNode = new _RowNode(model, json);
@@ -1405,10 +1627,8 @@ var RowNode = class _RowNode extends Node {
     }
     return newLayoutNode;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _RowNode._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _RowNode._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -1419,6 +1639,22 @@ var RowNode = class _RowNode extends Node {
     attributeDefinitions.add("height", void 0).setType(Attribute.NUMBER);
     return attributeDefinitions;
   }
+  /** @internal */
+  _drawChildren;
+  /** @internal */
+  _minHeight;
+  /** @internal */
+  _minWidth;
+  /** @internal */
+  constructor(model, json) {
+    super(model);
+    this._dirty = true;
+    this._drawChildren = [];
+    this._minHeight = 0;
+    this._minWidth = 0;
+    _RowNode._attributeDefinitions.fromJson(json, this._attributes);
+    model._addNode(this);
+  }
   getWeight() {
     return this._attributes.weight;
   }
@@ -1838,17 +2074,7 @@ var RowNode = class _RowNode extends Node {
 
 // src/model/TabSetNode.ts
 var TabSetNode = class _TabSetNode extends Node {
-  /** @internal */
-  constructor(model, json) {
-    super(model);
-    _TabSetNode._attributeDefinitions.fromJson(json, this._attributes);
-    model._addNode(this);
-    this._calculatedTabBarHeight = 0;
-    this._calculatedHeaderBarHeight = 0;
-  }
-  static {
-    this.TYPE = "tabset";
-  }
+  static TYPE = "tabset";
   /** @internal */
   static _fromJson(json, model) {
     const newLayoutNode = new _TabSetNode(model, json);
@@ -1869,10 +2095,8 @@ var TabSetNode = class _TabSetNode extends Node {
     }
     return newLayoutNode;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _TabSetNode._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _TabSetNode._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -1904,6 +2128,22 @@ var TabSetNode = class _TabSetNode extends Node {
     attributeDefinitions.addInherited("autoSelectTab", "tabSetAutoSelectTab").setType(Attribute.BOOLEAN);
     return attributeDefinitions;
   }
+  /** @internal */
+  _contentRect;
+  /** @internal */
+  _tabHeaderRect;
+  /** @internal */
+  _calculatedTabBarHeight;
+  /** @internal */
+  _calculatedHeaderBarHeight;
+  /** @internal */
+  constructor(model, json) {
+    super(model);
+    _TabSetNode._attributeDefinitions.fromJson(json, this._attributes);
+    model._addNode(this);
+    this._calculatedTabBarHeight = 0;
+    this._calculatedHeaderBarHeight = 0;
+  }
   getName() {
     return this._getAttr("name");
   }
@@ -2301,27 +2541,12 @@ function adjustSelectedIndex(parent, removedIndex) {
   }
 }
 function randomUUID() {
-  return ("10000000-1000-4000-8000" + -1e11).replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
+  return ulid();
 }
 
 // src/model/BorderNode.ts
 var BorderNode = class _BorderNode extends Node {
-  /** @internal */
-  constructor(location, json, model) {
-    super(model);
-    /** @internal */
-    this._adjustedSize = 0;
-    /** @internal */
-    this._calculatedBorderBarSize = 0;
-    this._location = location;
-    this._drawChildren = [];
-    this._attributes.id = `border_${location.getName()}`;
-    _BorderNode._attributeDefinitions.fromJson(json, this._attributes);
-    model._addNode(this);
-  }
-  static {
-    this.TYPE = "border";
-  }
+  static TYPE = "border";
   /** @internal */
   static _fromJson(json, model) {
     const location = DockLocation.getByName(json.location);
@@ -2335,10 +2560,8 @@ var BorderNode = class _BorderNode extends Node {
     }
     return border;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _BorderNode._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _BorderNode._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -2356,6 +2579,27 @@ var BorderNode = class _BorderNode extends Node {
     attributeDefinitions.addInherited("enableAutoHide", "borderEnableAutoHide").setType(Attribute.BOOLEAN);
     return attributeDefinitions;
   }
+  /** @internal */
+  _contentRect;
+  /** @internal */
+  _tabHeaderRect;
+  /** @internal */
+  _location;
+  /** @internal */
+  _drawChildren;
+  /** @internal */
+  _adjustedSize = 0;
+  /** @internal */
+  _calculatedBorderBarSize = 0;
+  /** @internal */
+  constructor(location, json, model) {
+    super(model);
+    this._location = location;
+    this._drawChildren = [];
+    this._attributes.id = `border_${location.getName()}`;
+    _BorderNode._attributeDefinitions.fromJson(json, this._attributes);
+    model._addNode(this);
+  }
   getLocation() {
     return this._location;
   }
@@ -2743,7 +2987,7 @@ function getRenderStateEx(layout, node, iconFactory, titleFactory, iconAngle) {
       leadingContent = /* @__PURE__ */ React.createElement("img", { style: { width: "1em", height: "1em" }, src: node.getIcon(), alt: "leadingContent" });
     }
   }
-  let buttons = [];
+  const buttons = [];
   const renderState = { leading: leadingContent, content: titleContent, name, buttons };
   layout.customizeTab(node, renderState);
   node._setRenderedName(renderState.name);
@@ -2925,9 +3169,9 @@ var TabButtonStamp = (props) => {
   const { layout, node, iconFactory, titleFactory } = props;
   const selfRef = React3.useRef(null);
   const cm = layout.getClassName;
-  let classNames = cm("flexlayout__tab_button_stamp" /* FLEXLAYOUT__TAB_BUTTON_STAMP */);
+  const classNames = cm("flexlayout__tab_button_stamp" /* FLEXLAYOUT__TAB_BUTTON_STAMP */);
   const renderState = getRenderStateEx(layout, node, iconFactory, titleFactory);
-  let content = renderState.content ? /* @__PURE__ */ React3.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : node._getNameForOverflowMenu();
+  const content = renderState.content ? /* @__PURE__ */ React3.createElement("div", { className: cm("flexlayout__tab_button_content" /* FLEXLAYOUT__TAB_BUTTON_CONTENT */) }, renderState.content) : node._getNameForOverflowMenu();
   const leading = renderState.leading ? /* @__PURE__ */ React3.createElement("div", { className: cm("flexlayout__tab_button_leading" /* FLEXLAYOUT__TAB_BUTTON_LEADING */) }, renderState.leading) : null;
   return /* @__PURE__ */ React3.createElement("div", { ref: selfRef, className: classNames, title: node.getHelpText() }, leading, content);
 };
@@ -2968,9 +3212,7 @@ function showPopup(triggerElement, items, onSelect, layout, iconFactory, titleFa
   const onElementMouseDown = (event) => {
     event.stopPropagation();
   };
-  const onDocMouseDown = (_event) => {
-    onHide();
-  };
+  const onDocMouseDown = () => onHide();
   elm.addEventListener("mousedown", onElementMouseDown);
   currentDocument.addEventListener("mousedown", onDocMouseDown);
   layout.showPortal(
@@ -3068,7 +3310,7 @@ var useTabOverflow = (node, orientation, toolbarRef, stickyButtonsRef) => {
       tabsTruncated.current = false;
     }
     const nodeRect = node instanceof TabSetNode ? node.getRect() : node.getTabHeaderRect();
-    let lastChild = node.getChildren()[node.getChildren().length - 1];
+    const lastChild = node.getChildren()[node.getChildren().length - 1];
     const stickyButtonsSize = stickyButtonsRef.current === null ? 0 : getSize(stickyButtonsRef.current.getBoundingClientRect());
     if (firstRender.current === true || lastHiddenCount.current === 0 && hiddenTabs.length !== 0 || nodeRect.width !== lastRect.current.width || // incase rect changed between first render and second
     nodeRect.height !== lastRect.current.height) {
@@ -3183,8 +3425,8 @@ var BorderTabSet = (props) => {
   let style2 = border.getTabHeaderRect().styleWithPosition({});
   const tabs = [];
   const layoutTab = (i) => {
-    let isSelected = border.getSelected() === i;
-    let child = border.getChildren()[i];
+    const isSelected = border.getSelected() === i;
+    const child = border.getChildren()[i];
     tabs.push(
       /* @__PURE__ */ React6.createElement(
         BorderButton,
@@ -3213,7 +3455,7 @@ var BorderTabSet = (props) => {
     borderClasses += " " + border.getClassName();
   }
   let buttons = [];
-  let stickyButtons = [];
+  const stickyButtons = [];
   const renderState = { headerContent: void 0, buttons, stickyButtons, headerButtons: [], overflowPosition: void 0 };
   layout.customizeTabSet(border, renderState);
   buttons = renderState.buttons;
@@ -3412,7 +3654,7 @@ var Splitter = (props) => {
     return rtn;
   };
   const cm = layout.getClassName;
-  let r = node.getRect();
+  const r = node.getRect();
   const style2 = r.styleWithPosition({
     cursor: node.getOrientation() === Orientation.HORZ ? "ns-resize" : "ew-resize"
   });
@@ -3428,7 +3670,7 @@ var Splitter = (props) => {
   if (extra === 0) {
     return /* @__PURE__ */ React7.createElement("div", { style: style2, "data-layout-path": path, className, onTouchStart: onMouseDown, onMouseDown });
   } else {
-    let r2 = r.clone();
+    const r2 = r.clone();
     r2.x = 0;
     r2.y = 0;
     if (node.getOrientation() === Orientation.VERT) {
@@ -3609,7 +3851,7 @@ var TabButton = (props) => {
   const cm = layout.getClassName;
   const parentNode = node.getParent();
   const isStretch = parentNode.isEnableSingleTabStretch() && parentNode.getChildren().length === 1;
-  let baseClassName = isStretch ? "flexlayout__tab_button_stretch" /* FLEXLAYOUT__TAB_BUTTON_STRETCH */ : "flexlayout__tab_button" /* FLEXLAYOUT__TAB_BUTTON */;
+  const baseClassName = isStretch ? "flexlayout__tab_button_stretch" /* FLEXLAYOUT__TAB_BUTTON_STRETCH */ : "flexlayout__tab_button" /* FLEXLAYOUT__TAB_BUTTON */;
   let classNames = cm(baseClassName);
   classNames += " " + cm(baseClassName + "_" + parentNode.getTabLocation());
   if (!isStretch) {
@@ -3779,7 +4021,7 @@ var TabSet = (props) => {
   if (node.isEnableTabStrip()) {
     for (let i = 0; i < node.getChildren().length; i++) {
       const child = node.getChildren()[i];
-      let isSelected = node.getSelected() === i;
+      const isSelected = node.getSelected() === i;
       tabs.push(/* @__PURE__ */ React11.createElement(TabButton, { layout, node: child, path: path + "/tb" + i, key: child.getId(), selected: isSelected, iconFactory, titleFactory, icons }));
       if (i < node.getChildren().length - 1) {
         tabs.push(/* @__PURE__ */ React11.createElement("div", { key: "divider" + i, className: cm("flexlayout__tabset_tab_divider" /* FLEXLAYOUT__TABSET_TAB_DIVIDER */) }));
@@ -3922,7 +4164,6 @@ var TabSet = (props) => {
     buttons
   );
   let header;
-  let tabStrip;
   let tabStripClasses = cm("flexlayout__tabset_tabbar_outer" /* FLEXLAYOUT__TABSET_TABBAR_OUTER */);
   if (node.getClassNameTabStrip() !== void 0) {
     tabStripClasses += " " + node.getClassNameTabStrip();
@@ -3982,7 +4223,7 @@ var TabSet = (props) => {
     );
   }
   const tabStripStyle = { height: node.getTabStripHeight() + "px" };
-  tabStrip = /* @__PURE__ */ React11.createElement(
+  const tabStrip = /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: tabStripClasses,
@@ -4005,7 +4246,7 @@ var TabSet = (props) => {
     toolbar
   );
   style2 = layout.styleFont(style2);
-  var placeHolder = void 0;
+  let placeHolder = void 0;
   if (node.getChildren().length === 0) {
     const placeHolderCallback = layout.getTabSetPlaceHolderCallback();
     if (placeHolderCallback) {
@@ -4013,7 +4254,7 @@ var TabSet = (props) => {
     }
   }
   const center = /* @__PURE__ */ React11.createElement("div", { className: cm("flexlayout__tabset_content" /* FLEXLAYOUT__TABSET_CONTENT */) }, placeHolder);
-  var content;
+  let content;
   if (node.getTabLocation() === "top") {
     content = /* @__PURE__ */ React11.createElement(React11.Fragment, null, header, tabStrip, center);
   } else {
@@ -4228,307 +4469,62 @@ var defaultIcons = {
 var isDesktop = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
 var defaultSupportsPopout = isDesktop;
 var Layout = class extends React16.Component {
+  /** @internal */
+  selfRef;
+  /** @internal */
+  findHeaderBarSizeRef;
+  /** @internal */
+  findTabBarSizeRef;
+  /** @internal */
+  findBorderBarSizeRef;
+  /** @internal */
+  previousModel;
+  /** @internal */
+  centerRect;
+  /** @internal */
+  // private start: number = 0;
+  /** @internal */
+  // private layoutTime: number = 0;
+  /** @internal */
+  tabIds;
+  /** @internal */
+  newTabJson;
+  /** @internal */
+  firstMove = false;
+  /** @internal */
+  dragNode;
+  /** @internal */
+  dragDiv;
+  /** @internal */
+  dragRectRendered = true;
+  /** @internal */
+  dragDivText = void 0;
+  /** @internal */
+  dropInfo;
+  /** @internal */
+  customDrop;
+  /** @internal */
+  outlineDiv;
+  /** @internal */
+  edgeRectLength = 100;
+  /** @internal */
+  edgeRectWidth = 10;
+  /** @internal */
+  fnNewNodeDropped;
+  /** @internal */
+  currentDocument;
+  /** @internal */
+  currentWindow;
+  /** @internal */
+  supportsPopout;
+  /** @internal */
+  popoutURL;
+  /** @internal */
+  icons;
+  /** @internal */
+  resizeObserver;
   constructor(props) {
     super(props);
-    /** @internal */
-    this.firstMove = false;
-    /** @internal */
-    this.dragRectRendered = true;
-    /** @internal */
-    this.dragDivText = void 0;
-    /** @internal */
-    this.edgeRectLength = 100;
-    /** @internal */
-    this.edgeRectWidth = 10;
-    /** @internal */
-    this.onModelChange = (action) => {
-      this.forceUpdate();
-      if (this.props.onModelChange) {
-        this.props.onModelChange(this.props.model, action);
-      }
-    };
-    /** @internal */
-    this.updateRect = (domRect) => {
-      if (!domRect) {
-        domRect = this.getDomRect();
-      }
-      if (!domRect) {
-        return;
-      }
-      const rect = new Rect(0, 0, domRect.width, domRect.height);
-      if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
-        this.setState({ rect });
-      }
-    };
-    /** @internal */
-    this.updateLayoutMetrics = () => {
-      if (this.findHeaderBarSizeRef.current) {
-        const headerBarSize = this.findHeaderBarSizeRef.current.getBoundingClientRect().height;
-        if (headerBarSize !== this.state.calculatedHeaderBarSize) {
-          this.setState({ calculatedHeaderBarSize: headerBarSize });
-        }
-      }
-      if (this.findTabBarSizeRef.current) {
-        const tabBarSize = this.findTabBarSizeRef.current.getBoundingClientRect().height;
-        if (tabBarSize !== this.state.calculatedTabBarSize) {
-          this.setState({ calculatedTabBarSize: tabBarSize });
-        }
-      }
-      if (this.findBorderBarSizeRef.current) {
-        const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;
-        if (borderBarSize !== this.state.calculatedBorderBarSize) {
-          this.setState({ calculatedBorderBarSize: borderBarSize });
-        }
-      }
-    };
-    /** @internal */
-    this.getClassName = (defaultClassName) => {
-      if (this.props.classNameMapper === void 0) {
-        return defaultClassName;
-      } else {
-        return this.props.classNameMapper(defaultClassName);
-      }
-    };
-    /** @internal */
-    this.onCloseWindow = (id) => {
-      this.doAction(Actions.unFloatTab(id));
-      try {
-        this.props.model.getNodeById(id)._setWindow(void 0);
-      } catch (e) {
-      }
-    };
-    /** @internal */
-    this.onSetWindow = (id, window2) => {
-      this.props.model.getNodeById(id)._setWindow(window2);
-    };
-    /** @internal */
-    this.onCancelAdd = () => {
-      const rootdiv = this.selfRef.current;
-      if (rootdiv && this.dragDiv) {
-        rootdiv.removeChild(this.dragDiv);
-      }
-      this.dragDiv = void 0;
-      this.hidePortal();
-      if (this.fnNewNodeDropped != null) {
-        this.fnNewNodeDropped();
-        this.fnNewNodeDropped = void 0;
-      }
-      try {
-        this.customDrop?.invalidated?.();
-      } catch (e) {
-        console.error(e);
-      }
-      DragDrop.instance.hideGlass();
-      this.newTabJson = void 0;
-      this.customDrop = void 0;
-    };
-    /** @internal */
-    this.onCancelDrag = (wasDragging) => {
-      if (wasDragging) {
-        const rootdiv = this.selfRef.current;
-        const outlineDiv = this.outlineDiv;
-        if (rootdiv && outlineDiv) {
-          try {
-            rootdiv.removeChild(outlineDiv);
-          } catch (e) {
-          }
-        }
-        const dragDiv = this.dragDiv;
-        if (rootdiv && dragDiv) {
-          try {
-            rootdiv.removeChild(dragDiv);
-          } catch (e) {
-          }
-        }
-        this.dragDiv = void 0;
-        this.hidePortal();
-        this.setState({ showEdges: false });
-        if (this.fnNewNodeDropped != null) {
-          this.fnNewNodeDropped();
-          this.fnNewNodeDropped = void 0;
-        }
-        try {
-          this.customDrop?.invalidated?.();
-        } catch (e) {
-          console.error(e);
-        }
-        DragDrop.instance.hideGlass();
-        this.newTabJson = void 0;
-        this.customDrop = void 0;
-      }
-      this.setState({ showHiddenBorder: DockLocation.CENTER });
-    };
-    /** @internal */
-    this.onDragDivMouseDown = (event) => {
-      event.preventDefault();
-      this.dragStart(event, this.dragDivText, TabNode._fromJson(this.newTabJson, this.props.model, false), true, void 0, void 0);
-    };
-    /** @internal */
-    this.dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {
-      if (!allowDrag) {
-        DragDrop.instance.startDrag(event, void 0, void 0, void 0, void 0, onClick, onDoubleClick, this.currentDocument, this.selfRef.current ?? void 0);
-      } else {
-        this.dragNode = node;
-        this.dragDivText = dragDivText;
-        DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, this.selfRef.current ?? void 0);
-      }
-    };
-    /** @internal */
-    this.dragRectRender = (text, node, json, onRendered) => {
-      let content;
-      if (text !== void 0) {
-        content = /* @__PURE__ */ React16.createElement("div", { style: { whiteSpace: "pre" } }, text.replace("<br>", "\n"));
-      } else {
-        if (node && node instanceof TabNode) {
-          content = /* @__PURE__ */ React16.createElement(TabButtonStamp, { node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory });
-        }
-      }
-      if (this.props.onRenderDragRect !== void 0) {
-        const customContent = this.props.onRenderDragRect(content, node, json);
-        if (customContent !== void 0) {
-          content = customContent;
-        }
-      }
-      this.dragRectRendered = false;
-      const dragDiv = this.dragDiv;
-      if (dragDiv) {
-        dragDiv.style.visibility = "hidden";
-        this.showPortal(
-          /* @__PURE__ */ React16.createElement(
-            DragRectRenderWrapper,
-            {
-              onRendered: () => {
-                this.dragRectRendered = true;
-                onRendered?.();
-              }
-            },
-            content
-          ),
-          dragDiv
-        );
-      }
-    };
-    /** @internal */
-    this.showPortal = (control, element) => {
-      const portal = createPortal2(control, element);
-      this.setState({ portal });
-    };
-    /** @internal */
-    this.hidePortal = () => {
-      this.setState({ portal: void 0 });
-    };
-    /** @internal */
-    this.onDragStart = () => {
-      this.dropInfo = void 0;
-      this.customDrop = void 0;
-      const rootdiv = this.selfRef.current;
-      this.outlineDiv = this.currentDocument.createElement("div");
-      this.outlineDiv.className = this.getClassName("flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
-      this.outlineDiv.style.visibility = "hidden";
-      if (rootdiv) {
-        rootdiv.appendChild(this.outlineDiv);
-      }
-      if (this.dragDiv == null) {
-        this.dragDiv = this.currentDocument.createElement("div");
-        this.dragDiv.className = this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */);
-        this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
-        this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
-        if (rootdiv) {
-          rootdiv.appendChild(this.dragDiv);
-        }
-      }
-      if (this.props.model.getMaximizedTabset() === void 0) {
-        this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
-      }
-      if (this.dragNode && this.outlineDiv && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== void 0) {
-        this.dragNode.getTabRect()?.positionElement(this.outlineDiv);
-      }
-      this.firstMove = true;
-      return true;
-    };
-    /** @internal */
-    this.onDragMove = (event) => {
-      if (this.firstMove === false) {
-        const speed = this.props.model._getAttribute("tabDragSpeed");
-        if (this.outlineDiv) {
-          this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
-        }
-      }
-      this.firstMove = false;
-      const clientRect = this.selfRef.current?.getBoundingClientRect();
-      const pos = {
-        x: event.clientX - (clientRect?.left ?? 0),
-        y: event.clientY - (clientRect?.top ?? 0)
-      };
-      this.checkForBorderToShow(pos.x, pos.y);
-      const dragRect = this.dragDiv?.getBoundingClientRect() ?? new DOMRect(0, 0, 100, 100);
-      let newLeft = pos.x - dragRect.width / 2;
-      if (newLeft + dragRect.width > (clientRect?.width ?? 0)) {
-        newLeft = (clientRect?.width ?? 0) - dragRect.width;
-      }
-      newLeft = Math.max(0, newLeft);
-      if (this.dragDiv) {
-        this.dragDiv.style.left = newLeft + "px";
-        this.dragDiv.style.top = pos.y + 5 + "px";
-        if (this.dragRectRendered && this.dragDiv.style.visibility === "hidden") {
-          this.dragDiv.style.visibility = "visible";
-        }
-      }
-      let dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);
-      if (dropInfo) {
-        if (this.props.onTabDrag) {
-          this.handleCustomTabDrag(dropInfo, pos, event);
-        } else {
-          this.dropInfo = dropInfo;
-          if (this.outlineDiv) {
-            this.outlineDiv.className = this.getClassName(dropInfo.className);
-            dropInfo.rect.positionElement(this.outlineDiv);
-            this.outlineDiv.style.visibility = "visible";
-          }
-        }
-      }
-    };
-    /** @internal */
-    this.onDragEnd = (event) => {
-      const rootdiv = this.selfRef.current;
-      if (rootdiv) {
-        if (this.outlineDiv) {
-          rootdiv.removeChild(this.outlineDiv);
-        }
-        if (this.dragDiv) {
-          rootdiv.removeChild(this.dragDiv);
-        }
-      }
-      this.dragDiv = void 0;
-      this.hidePortal();
-      this.setState({ showEdges: false });
-      DragDrop.instance.hideGlass();
-      if (this.dropInfo) {
-        if (this.customDrop) {
-          this.newTabJson = void 0;
-          try {
-            const { callback, dragging, over, x, y, location } = this.customDrop;
-            callback(dragging, over, x, y, location);
-            if (this.fnNewNodeDropped != null) {
-              this.fnNewNodeDropped();
-              this.fnNewNodeDropped = void 0;
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        } else if (this.newTabJson !== void 0) {
-          const newNode = this.doAction(Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
-          if (this.fnNewNodeDropped != null) {
-            this.fnNewNodeDropped(newNode, event);
-            this.fnNewNodeDropped = void 0;
-          }
-          this.newTabJson = void 0;
-        } else if (this.dragNode !== void 0) {
-          this.doAction(Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
-        }
-      }
-      this.setState({ showHiddenBorder: DockLocation.CENTER });
-    };
     this.props.model._setChangeListener(this.onModelChange);
     this.tabIds = [];
     this.selfRef = React16.createRef();
@@ -4570,6 +4566,13 @@ var Layout = class extends React16.Component {
     return style2;
   }
   /** @internal */
+  onModelChange = (action) => {
+    this.forceUpdate();
+    if (this.props.onModelChange) {
+      this.props.onModelChange(this.props.model, action);
+    }
+  };
+  /** @internal */
   doAction(action) {
     if (this.props.onAction !== void 0) {
       const outcome = this.props.onAction(action);
@@ -4607,6 +4610,48 @@ var Layout = class extends React16.Component {
     }
   }
   /** @internal */
+  updateRect = (domRect) => {
+    if (!domRect) {
+      domRect = this.getDomRect();
+    }
+    if (!domRect) {
+      return;
+    }
+    const rect = new Rect(0, 0, domRect.width, domRect.height);
+    if (!rect.equals(this.state.rect) && rect.width !== 0 && rect.height !== 0) {
+      this.setState({ rect });
+    }
+  };
+  /** @internal */
+  updateLayoutMetrics = () => {
+    if (this.findHeaderBarSizeRef.current) {
+      const headerBarSize = this.findHeaderBarSizeRef.current.getBoundingClientRect().height;
+      if (headerBarSize !== this.state.calculatedHeaderBarSize) {
+        this.setState({ calculatedHeaderBarSize: headerBarSize });
+      }
+    }
+    if (this.findTabBarSizeRef.current) {
+      const tabBarSize = this.findTabBarSizeRef.current.getBoundingClientRect().height;
+      if (tabBarSize !== this.state.calculatedTabBarSize) {
+        this.setState({ calculatedTabBarSize: tabBarSize });
+      }
+    }
+    if (this.findBorderBarSizeRef.current) {
+      const borderBarSize = this.findBorderBarSizeRef.current.getBoundingClientRect().height;
+      if (borderBarSize !== this.state.calculatedBorderBarSize) {
+        this.setState({ calculatedBorderBarSize: borderBarSize });
+      }
+    }
+  };
+  /** @internal */
+  getClassName = (defaultClassName) => {
+    if (this.props.classNameMapper === void 0) {
+      return defaultClassName;
+    } else {
+      return this.props.classNameMapper(defaultClassName);
+    }
+  };
+  /** @internal */
   getCurrentDocument() {
     return this.currentDocument;
   }
@@ -4747,6 +4792,18 @@ var Layout = class extends React16.Component {
     return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement("div", { key: "findHeaderBarSize", ref: this.findHeaderBarSizeRef, style: fontStyle, className: this.getClassName("flexlayout__tabset_header_sizer" /* FLEXLAYOUT__TABSET_HEADER_SIZER */) }, "FindHeaderBarSize"), /* @__PURE__ */ React16.createElement("div", { key: "findTabBarSize", ref: this.findTabBarSizeRef, style: fontStyle, className: this.getClassName("flexlayout__tabset_sizer" /* FLEXLAYOUT__TABSET_SIZER */) }, "FindTabBarSize"), /* @__PURE__ */ React16.createElement("div", { key: "findBorderBarSize", ref: this.findBorderBarSizeRef, style: fontStyle, className: this.getClassName("flexlayout__border_sizer" /* FLEXLAYOUT__BORDER_SIZER */) }, "FindBorderBarSize"));
   }
   /** @internal */
+  onCloseWindow = (id) => {
+    this.doAction(Actions.unFloatTab(id));
+    try {
+      this.props.model.getNodeById(id)._setWindow(void 0);
+    } catch (e) {
+    }
+  };
+  /** @internal */
+  onSetWindow = (id, window2) => {
+    this.props.model.getNodeById(id)._setWindow(window2);
+  };
+  /** @internal */
   renderBorder(borderSet, borderComponents, tabComponents, floatingWindows, splitterComponents) {
     for (const border of borderSet.getBorders()) {
       const borderPath = `/border/${border.getLocation().getName()}`;
@@ -4770,10 +4827,10 @@ var Layout = class extends React16.Component {
         let tabCount = 0;
         for (const child of drawChildren) {
           if (child instanceof SplitterNode) {
-            let path = borderPath + "/s";
+            const path = borderPath + "/s";
             splitterComponents.push(/* @__PURE__ */ React16.createElement(Splitter, { key: child.getId(), layout: this, node: child, path }));
           } else if (child instanceof TabNode) {
-            let path = borderPath + "/t" + tabCount++;
+            const path = borderPath + "/t" + tabCount++;
             if (this.supportsPopout && child.isFloating()) {
               const rect = this._getScreenRect(child);
               const tabBorderWidth = child._getAttr("borderWidth");
@@ -4950,6 +5007,234 @@ var Layout = class extends React16.Component {
     rootdiv.appendChild(this.dragDiv);
   }
   /** @internal */
+  onCancelAdd = () => {
+    const rootdiv = this.selfRef.current;
+    if (rootdiv && this.dragDiv) {
+      rootdiv.removeChild(this.dragDiv);
+    }
+    this.dragDiv = void 0;
+    this.hidePortal();
+    if (this.fnNewNodeDropped != null) {
+      this.fnNewNodeDropped();
+      this.fnNewNodeDropped = void 0;
+    }
+    try {
+      this.customDrop?.invalidated?.();
+    } catch (e) {
+      console.error(e);
+    }
+    DragDrop.instance.hideGlass();
+    this.newTabJson = void 0;
+    this.customDrop = void 0;
+  };
+  /** @internal */
+  onCancelDrag = (wasDragging) => {
+    if (wasDragging) {
+      const rootdiv = this.selfRef.current;
+      const outlineDiv = this.outlineDiv;
+      if (rootdiv && outlineDiv) {
+        try {
+          rootdiv.removeChild(outlineDiv);
+        } catch (e) {
+        }
+      }
+      const dragDiv = this.dragDiv;
+      if (rootdiv && dragDiv) {
+        try {
+          rootdiv.removeChild(dragDiv);
+        } catch (e) {
+        }
+      }
+      this.dragDiv = void 0;
+      this.hidePortal();
+      this.setState({ showEdges: false });
+      if (this.fnNewNodeDropped != null) {
+        this.fnNewNodeDropped();
+        this.fnNewNodeDropped = void 0;
+      }
+      try {
+        this.customDrop?.invalidated?.();
+      } catch (e) {
+        console.error(e);
+      }
+      DragDrop.instance.hideGlass();
+      this.newTabJson = void 0;
+      this.customDrop = void 0;
+    }
+    this.setState({ showHiddenBorder: DockLocation.CENTER });
+  };
+  /** @internal */
+  onDragDivMouseDown = (event) => {
+    event.preventDefault();
+    this.dragStart(event, this.dragDivText, TabNode._fromJson(this.newTabJson, this.props.model, false), true, void 0, void 0);
+  };
+  /** @internal */
+  dragStart = (event, dragDivText, node, allowDrag, onClick, onDoubleClick) => {
+    if (!allowDrag) {
+      DragDrop.instance.startDrag(event, void 0, void 0, void 0, void 0, onClick, onDoubleClick, this.currentDocument, this.selfRef.current ?? void 0);
+    } else {
+      this.dragNode = node;
+      this.dragDivText = dragDivText;
+      DragDrop.instance.startDrag(event, this.onDragStart, this.onDragMove, this.onDragEnd, this.onCancelDrag, onClick, onDoubleClick, this.currentDocument, this.selfRef.current ?? void 0);
+    }
+  };
+  /** @internal */
+  dragRectRender = (text, node, json, onRendered) => {
+    let content;
+    if (text !== void 0) {
+      content = /* @__PURE__ */ React16.createElement("div", { style: { whiteSpace: "pre" } }, text.replace("<br>", "\n"));
+    } else {
+      if (node && node instanceof TabNode) {
+        content = /* @__PURE__ */ React16.createElement(TabButtonStamp, { node, layout: this, iconFactory: this.props.iconFactory, titleFactory: this.props.titleFactory });
+      }
+    }
+    if (this.props.onRenderDragRect !== void 0) {
+      const customContent = this.props.onRenderDragRect(content, node, json);
+      if (customContent !== void 0) {
+        content = customContent;
+      }
+    }
+    this.dragRectRendered = false;
+    const dragDiv = this.dragDiv;
+    if (dragDiv) {
+      dragDiv.style.visibility = "hidden";
+      this.showPortal(
+        /* @__PURE__ */ React16.createElement(
+          DragRectRenderWrapper,
+          {
+            onRendered: () => {
+              this.dragRectRendered = true;
+              onRendered?.();
+            }
+          },
+          content
+        ),
+        dragDiv
+      );
+    }
+  };
+  /** @internal */
+  showPortal = (control, element) => {
+    const portal = createPortal2(control, element);
+    this.setState({ portal });
+  };
+  /** @internal */
+  hidePortal = () => {
+    this.setState({ portal: void 0 });
+  };
+  /** @internal */
+  onDragStart = () => {
+    this.dropInfo = void 0;
+    this.customDrop = void 0;
+    const rootdiv = this.selfRef.current;
+    this.outlineDiv = this.currentDocument.createElement("div");
+    this.outlineDiv.className = this.getClassName("flexlayout__outline_rect" /* FLEXLAYOUT__OUTLINE_RECT */);
+    this.outlineDiv.style.visibility = "hidden";
+    if (rootdiv) {
+      rootdiv.appendChild(this.outlineDiv);
+    }
+    if (this.dragDiv == null) {
+      this.dragDiv = this.currentDocument.createElement("div");
+      this.dragDiv.className = this.getClassName("flexlayout__drag_rect" /* FLEXLAYOUT__DRAG_RECT */);
+      this.dragDiv.setAttribute("data-layout-path", "/drag-rectangle");
+      this.dragRectRender(this.dragDivText, this.dragNode, this.newTabJson);
+      if (rootdiv) {
+        rootdiv.appendChild(this.dragDiv);
+      }
+    }
+    if (this.props.model.getMaximizedTabset() === void 0) {
+      this.setState({ showEdges: this.props.model.isEnableEdgeDock() });
+    }
+    if (this.dragNode && this.outlineDiv && this.dragNode instanceof TabNode && this.dragNode.getTabRect() !== void 0) {
+      this.dragNode.getTabRect()?.positionElement(this.outlineDiv);
+    }
+    this.firstMove = true;
+    return true;
+  };
+  /** @internal */
+  onDragMove = (event) => {
+    if (this.firstMove === false) {
+      const speed = this.props.model._getAttribute("tabDragSpeed");
+      if (this.outlineDiv) {
+        this.outlineDiv.style.transition = `top ${speed}s, left ${speed}s, width ${speed}s, height ${speed}s`;
+      }
+    }
+    this.firstMove = false;
+    const clientRect = this.selfRef.current?.getBoundingClientRect();
+    const pos = {
+      x: event.clientX - (clientRect?.left ?? 0),
+      y: event.clientY - (clientRect?.top ?? 0)
+    };
+    this.checkForBorderToShow(pos.x, pos.y);
+    const dragRect = this.dragDiv?.getBoundingClientRect() ?? new DOMRect(0, 0, 100, 100);
+    let newLeft = pos.x - dragRect.width / 2;
+    if (newLeft + dragRect.width > (clientRect?.width ?? 0)) {
+      newLeft = (clientRect?.width ?? 0) - dragRect.width;
+    }
+    newLeft = Math.max(0, newLeft);
+    if (this.dragDiv) {
+      this.dragDiv.style.left = newLeft + "px";
+      this.dragDiv.style.top = pos.y + 5 + "px";
+      if (this.dragRectRendered && this.dragDiv.style.visibility === "hidden") {
+        this.dragDiv.style.visibility = "visible";
+      }
+    }
+    const dropInfo = this.props.model._findDropTargetNode(this.dragNode, pos.x, pos.y);
+    if (dropInfo) {
+      if (this.props.onTabDrag) {
+        this.handleCustomTabDrag(dropInfo, pos, event);
+      } else {
+        this.dropInfo = dropInfo;
+        if (this.outlineDiv) {
+          this.outlineDiv.className = this.getClassName(dropInfo.className);
+          dropInfo.rect.positionElement(this.outlineDiv);
+          this.outlineDiv.style.visibility = "visible";
+        }
+      }
+    }
+  };
+  /** @internal */
+  onDragEnd = (event) => {
+    const rootdiv = this.selfRef.current;
+    if (rootdiv) {
+      if (this.outlineDiv) {
+        rootdiv.removeChild(this.outlineDiv);
+      }
+      if (this.dragDiv) {
+        rootdiv.removeChild(this.dragDiv);
+      }
+    }
+    this.dragDiv = void 0;
+    this.hidePortal();
+    this.setState({ showEdges: false });
+    DragDrop.instance.hideGlass();
+    if (this.dropInfo) {
+      if (this.customDrop) {
+        this.newTabJson = void 0;
+        try {
+          const { callback, dragging, over, x, y, location } = this.customDrop;
+          callback(dragging, over, x, y, location);
+          if (this.fnNewNodeDropped != null) {
+            this.fnNewNodeDropped();
+            this.fnNewNodeDropped = void 0;
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      } else if (this.newTabJson !== void 0) {
+        const newNode = this.doAction(Actions.addNode(this.newTabJson, this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+        if (this.fnNewNodeDropped != null) {
+          this.fnNewNodeDropped(newNode, event);
+          this.fnNewNodeDropped = void 0;
+        }
+        this.newTabJson = void 0;
+      } else if (this.dragNode !== void 0) {
+        this.doAction(Actions.moveNode(this.dragNode.getId(), this.dropInfo.node.getId(), this.dropInfo.location, this.dropInfo.index));
+      }
+    }
+    this.setState({ showHiddenBorder: DockLocation.CENTER });
+  };
+  /** @internal */
   handleCustomTabDrag(dropInfo, pos, event) {
     let invalidated = this.customDrop?.invalidated;
     const currentCallback = this.customDrop?.callback;
@@ -5110,6 +5395,10 @@ var BorderSet = class _BorderSet {
     return borderSet;
   }
   /** @internal */
+  _model;
+  /** @internal */
+  _borders;
+  /** @internal */
   constructor(model) {
     this._model = model;
     this._borders = [];
@@ -5212,19 +5501,6 @@ var BorderSet = class _BorderSet {
 
 // src/model/Model.ts
 var Model = class _Model {
-  /**
-   * 'private' constructor. Use the static method Model.fromJson(json) to create a model
-   *  @internal
-   */
-  constructor() {
-    /** @internal */
-    this._borderRects = { inner: Rect.empty(), outer: Rect.empty() };
-    this._attributes = {};
-    this._idMap = {};
-    this._borders = new BorderSet(this);
-    this._pointerFine = true;
-    this._showHiddenBorder = DockLocation.CENTER;
-  }
   /**
    * Loads the model from the given json object
    * @param json the json model to load
@@ -5240,10 +5516,8 @@ var Model = class _Model {
     model._tidy();
     return model;
   }
-  static {
-    /** @internal */
-    this._attributeDefinitions = _Model._createAttributeDefinitions();
-  }
+  /** @internal */
+  static _attributeDefinitions = _Model._createAttributeDefinitions();
   /** @internal */
   static _createAttributeDefinitions() {
     const attributeDefinitions = new AttributeDefinitions();
@@ -5296,6 +5570,41 @@ var Model = class _Model {
     return attributeDefinitions;
   }
   /** @internal */
+  _attributes;
+  /** @internal */
+  _idMap;
+  /** @internal */
+  _changeListener;
+  /** @internal */
+  _root;
+  /** @internal */
+  _borders;
+  /** @internal */
+  _onAllowDrop;
+  /** @internal */
+  _maximizedTabSet;
+  /** @internal */
+  _activeTabSet;
+  /** @internal */
+  _borderRects = { inner: Rect.empty(), outer: Rect.empty() };
+  /** @internal */
+  _pointerFine;
+  /** @internal */
+  _onCreateTabSet;
+  /** @internal */
+  _showHiddenBorder;
+  /**
+   * 'private' constructor. Use the static method Model.fromJson(json) to create a model
+   *  @internal
+   */
+  constructor() {
+    this._attributes = {};
+    this._idMap = {};
+    this._borders = new BorderSet(this);
+    this._pointerFine = true;
+    this._showHiddenBorder = DockLocation.CENTER;
+  }
+  /** @internal */
   _setChangeListener(listener) {
     this._changeListener = listener;
   }
@@ -5565,12 +5874,12 @@ var Model = class _Model {
    * @returns {IJsonModel} json object that represents this model
    */
   toJson() {
-    const global = {};
-    _Model._attributeDefinitions.toJson(global, this._attributes);
+    const global2 = {};
+    _Model._attributeDefinitions.toJson(global2, this._attributes);
     this.visitNodes((node) => {
       node._fireEvent("save", void 0);
     });
-    return { global, borders: this._borders._toJson(), layout: this._root.toJson() };
+    return { global: global2, borders: this._borders._toJson(), layout: this._root.toJson() };
   }
   getSplitterSize() {
     let splitterSize = this._attributes.splitterSize;