@aptre/flex-layout 0.4.3 → 0.5.0

package/dist/index.mjs

@@ -232,7 +232,7 @@ var DockLocation = class _DockLocation {
     }
   }
   toString() {
-    return "(DockLocation: name=" + this.name + ", orientation=" + this.orientation + ")";
+    return "(DockLocation: name=" + this.name + ", orientation=" + this.orientation.toString() + ")";
   }
 };
 
@@ -350,33 +350,46 @@ var CLASSES = /* @__PURE__ */ ((CLASSES2) => {
 })(CLASSES || {});
 
 // src/model/Action.ts
-var Action = class {
-  type;
-  data;
-  constructor(type, data) {
-    this.type = type;
-    this.data = data;
-  }
+var ActionType = {
+  ADD_NODE: "FlexLayout_AddNode",
+  MOVE_NODE: "FlexLayout_MoveNode",
+  DELETE_TAB: "FlexLayout_DeleteTab",
+  DELETE_TABSET: "FlexLayout_DeleteTabset",
+  RENAME_TAB: "FlexLayout_RenameTab",
+  SELECT_TAB: "FlexLayout_SelectTab",
+  SET_ACTIVE_TABSET: "FlexLayout_SetActiveTabset",
+  ADJUST_WEIGHTS: "FlexLayout_AdjustWeights",
+  ADJUST_BORDER_SPLIT: "FlexLayout_AdjustBorderSplit",
+  MAXIMIZE_TOGGLE: "FlexLayout_MaximizeToggle",
+  UPDATE_MODEL_ATTRIBUTES: "FlexLayout_UpdateModelAttributes",
+  UPDATE_NODE_ATTRIBUTES: "FlexLayout_UpdateNodeAttributes",
+  POPOUT_TAB: "FlexLayout_PopoutTab",
+  POPOUT_TABSET: "FlexLayout_PopoutTabset",
+  CLOSE_WINDOW: "FlexLayout_CloseWindow",
+  CREATE_WINDOW: "FlexLayout_CreateWindow"
 };
+function createAction(type, data) {
+  return { type, data };
+}
 
 // src/model/Actions.ts
-var 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";
+var Actions = class {
+  static ADD_NODE = ActionType.ADD_NODE;
+  static MOVE_NODE = ActionType.MOVE_NODE;
+  static DELETE_TAB = ActionType.DELETE_TAB;
+  static DELETE_TABSET = ActionType.DELETE_TABSET;
+  static RENAME_TAB = ActionType.RENAME_TAB;
+  static SELECT_TAB = ActionType.SELECT_TAB;
+  static SET_ACTIVE_TABSET = ActionType.SET_ACTIVE_TABSET;
+  static ADJUST_WEIGHTS = ActionType.ADJUST_WEIGHTS;
+  static ADJUST_BORDER_SPLIT = ActionType.ADJUST_BORDER_SPLIT;
+  static MAXIMIZE_TOGGLE = ActionType.MAXIMIZE_TOGGLE;
+  static UPDATE_MODEL_ATTRIBUTES = ActionType.UPDATE_MODEL_ATTRIBUTES;
+  static UPDATE_NODE_ATTRIBUTES = ActionType.UPDATE_NODE_ATTRIBUTES;
+  static POPOUT_TAB = ActionType.POPOUT_TAB;
+  static POPOUT_TABSET = ActionType.POPOUT_TABSET;
+  static CLOSE_WINDOW = ActionType.CLOSE_WINDOW;
+  static CREATE_WINDOW = ActionType.CREATE_WINDOW;
   /**
    * Adds a tab node to the given tabset node
    * @param json the json for the new tab node e.g {type:"tab", component:"table"}
@@ -387,7 +400,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static addNode(json, toNodeId, location, index, select) {
-    return new Action(_Actions.ADD_NODE, {
+    return createAction(ActionType.ADD_NODE, {
       json,
       toNode: toNodeId,
       location: location.getName(),
@@ -405,7 +418,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static moveNode(fromNodeId, toNodeId, location, index, select) {
-    return new Action(_Actions.MOVE_NODE, {
+    return createAction(ActionType.MOVE_NODE, {
       fromNode: fromNodeId,
       toNode: toNodeId,
       location: location.getName(),
@@ -419,7 +432,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static deleteTab(tabNodeId) {
-    return new Action(_Actions.DELETE_TAB, { node: tabNodeId });
+    return createAction(ActionType.DELETE_TAB, { node: tabNodeId });
   }
   /**
    * Deletes a tabset node and all it's child tab nodes from the layout
@@ -427,7 +440,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static deleteTabset(tabsetNodeId) {
-    return new Action(_Actions.DELETE_TABSET, { node: tabsetNodeId });
+    return createAction(ActionType.DELETE_TABSET, { node: tabsetNodeId });
   }
   /**
    * Change the given nodes tab text
@@ -436,7 +449,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static renameTab(tabNodeId, text) {
-    return new Action(_Actions.RENAME_TAB, { node: tabNodeId, text });
+    return createAction(ActionType.RENAME_TAB, { node: tabNodeId, text });
   }
   /**
    * Selects the given tab in its parent tabset
@@ -444,7 +457,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static selectTab(tabNodeId) {
-    return new Action(_Actions.SELECT_TAB, { tabNode: tabNodeId });
+    return createAction(ActionType.SELECT_TAB, { tabNode: tabNodeId });
   }
   /**
    * Set the given tabset node as the active tabset
@@ -452,7 +465,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static setActiveTabset(tabsetNodeId, windowId) {
-    return new Action(_Actions.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId, windowId });
+    return createAction(ActionType.SET_ACTIVE_TABSET, { tabsetNode: tabsetNodeId, windowId });
   }
   /**
    * Adjust the weights of a row, used when the splitter is moved
@@ -461,10 +474,10 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static adjustWeights(nodeId, weights) {
-    return new Action(_Actions.ADJUST_WEIGHTS, { nodeId, weights });
+    return createAction(ActionType.ADJUST_WEIGHTS, { nodeId, weights });
   }
   static adjustBorderSplit(nodeId, pos) {
-    return new Action(_Actions.ADJUST_BORDER_SPLIT, { node: nodeId, pos });
+    return createAction(ActionType.ADJUST_BORDER_SPLIT, { node: nodeId, pos });
   }
   /**
    * Maximizes the given tabset
@@ -472,7 +485,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static maximizeToggle(tabsetNodeId, windowId) {
-    return new Action(_Actions.MAXIMIZE_TOGGLE, { node: tabsetNodeId, windowId });
+    return createAction(ActionType.MAXIMIZE_TOGGLE, { node: tabsetNodeId, windowId });
   }
   /**
    * Updates the global model jsone attributes
@@ -480,7 +493,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static updateModelAttributes(attributes) {
-    return new Action(_Actions.UPDATE_MODEL_ATTRIBUTES, { json: attributes });
+    return createAction(ActionType.UPDATE_MODEL_ATTRIBUTES, { json: attributes });
   }
   /**
    * Updates the given nodes json attributes
@@ -489,7 +502,7 @@ var Actions = class _Actions {
    * @returns {Action} the action
    */
   static updateNodeAttributes(nodeId, attributes) {
-    return new Action(_Actions.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });
+    return createAction(ActionType.UPDATE_NODE_ATTRIBUTES, { node: nodeId, json: attributes });
   }
   /**
    * Pops out the given tab node into a new browser window
@@ -497,7 +510,7 @@ var Actions = class _Actions {
    * @returns
    */
   static popoutTab(nodeId) {
-    return new Action(_Actions.POPOUT_TAB, { node: nodeId });
+    return createAction(ActionType.POPOUT_TAB, { node: nodeId });
   }
   /**
    * Pops out the given tab set node into a new browser window
@@ -505,7 +518,7 @@ var Actions = class _Actions {
    * @returns
    */
   static popoutTabset(nodeId) {
-    return new Action(_Actions.POPOUT_TABSET, { node: nodeId });
+    return createAction(ActionType.POPOUT_TABSET, { node: nodeId });
   }
   /**
    * Closes the popout window
@@ -513,7 +526,7 @@ var Actions = class _Actions {
    * @returns
    */
   static closeWindow(windowId) {
-    return new Action(_Actions.CLOSE_WINDOW, { windowId });
+    return createAction(ActionType.CLOSE_WINDOW, { windowId });
   }
   /**
    * Creates a new empty popout window with the given layout
@@ -522,7 +535,7 @@ var Actions = class _Actions {
    * @returns
    */
   static createWindow(layout, rect) {
-    return new Action(_Actions.CREATE_WINDOW, { layout, rect });
+    return createAction(ActionType.CREATE_WINDOW, { layout, rect });
   }
 };
 
@@ -633,7 +646,7 @@ var AttributeDefinitions = class {
   }
   update(jsonObj, obj) {
     for (const attr of this.attributes) {
-      if (jsonObj.hasOwnProperty(attr.name)) {
+      if (Object.prototype.hasOwnProperty.call(jsonObj, attr.name)) {
         const fromValue = jsonObj[attr.name];
         if (fromValue === void 0) {
           delete obj[attr.name];
@@ -818,13 +831,13 @@ var Node = class {
     this.path = "";
   }
   getId() {
-    let id = this.attributes.id;
-    if (id !== void 0) {
+    const id = this.attributes.id;
+    if (typeof id === "string") {
       return id;
     }
-    id = this.model.nextUniqueId();
-    this.setId(id);
-    return id;
+    const newId = this.model.nextUniqueId();
+    this.setId(newId);
+    return newId;
   }
   getModel() {
     return this.model;
@@ -951,7 +964,7 @@ var Node = class {
     return rtn;
   }
   /** @internal */
-  canDrop(dragNode, x, y) {
+  canDrop(_dragNode, _x, _y) {
     return void 0;
   }
   /** @internal */
@@ -1463,7 +1476,7 @@ 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 (String([1e7]) + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
 }
 
 // src/model/TabSetNode.ts
@@ -1800,7 +1813,7 @@ var TabSetNode = class _TabSetNode extends Node {
           this.setSelected(insertPos);
         }
       } else if (dragNode instanceof RowNode) {
-        dragNode.forEachNode((child, level) => {
+        dragNode.forEachNode((child, _level) => {
           if (child instanceof TabNode) {
             this.addChild(child, insertPos);
             insertPos++;
@@ -1821,7 +1834,8 @@ var 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) : {});
+        const attrs = callback ? callback(dragNode) : {};
+        moveNode = new _TabSetNode(this.model, attrs);
         moveNode.addChild(dragNode);
         dragParent = moveNode;
       } else if (dragNode instanceof RowNode) {
@@ -2192,8 +2206,8 @@ var RowNode = class _RowNode extends Node {
     }
     if (this === this.model.getRoot(this.windowId) && this.children.length === 0) {
       const callback = this.model.getOnCreateTabSet();
-      let attrs = callback ? callback() : {};
-      attrs = { ...attrs, selected: -1 };
+      const baseAttrs = callback ? callback() : {};
+      const attrs = { ...baseAttrs, selected: -1 };
       const child = new TabSetNode(this.model, attrs);
       this.model.setActiveTabset(child, this.windowId);
       this.addChild(child);
@@ -2265,7 +2279,8 @@ var RowNode = class _RowNode extends Node {
       }
     } else {
       const callback = this.model.getOnCreateTabSet();
-      node = new TabSetNode(this.model, callback ? callback(dragNode) : {});
+      const attrs = callback ? callback(dragNode) : {};
+      node = new TabSetNode(this.model, attrs);
       node.addChild(dragNode);
     }
     let size = this.children.reduce((sum, child) => {
@@ -2576,7 +2591,7 @@ var Model = class _Model {
           const tabsetId = randomUUID();
           const json = {
             type: "row",
-            children: [{ type: "tabset", id: tabsetId }]
+            children: [{ type: "tabset", id: tabsetId, children: [] }]
           };
           const row = RowNode.fromJson(json, this, layoutWindow);
           layoutWindow.root = row;
@@ -2590,8 +2605,8 @@ var Model = class _Model {
       case Actions.CLOSE_WINDOW: {
         const window2 = this.windows.get(action.data.windowId);
         if (window2) {
-          this.rootWindow.root?.drop(window2?.root, DockLocation.CENTER, -1);
-          this.rootWindow.visitNodes((node, level) => {
+          this.rootWindow.root?.drop(window2.root, DockLocation.CENTER, -1);
+          this.rootWindow.visitNodes((node, _level) => {
             if (node instanceof RowNode) {
               node.setWindowId(_Model.MAIN_WINDOW_ID);
             }
@@ -2784,7 +2799,7 @@ var Model = class _Model {
    */
   static fromJson(json) {
     const model = new _Model();
-    _Model.attributeDefinitions.fromJson(json.global, model.attributes);
+    _Model.attributeDefinitions.fromJson(json.global ?? {}, model.attributes);
     if (json.borders) {
       model.borders = BorderSet.fromJson(json.borders, model);
     }
@@ -3450,6 +3465,9 @@ var Splitter = (props) => {
       outlineDiv.current.appendChild(handleDiv.current);
     }
     const r = selfRef.current?.getBoundingClientRect();
+    if (!r) {
+      return;
+    }
     const rect = new Rect(r.x - layout.getDomRect().x, r.y - layout.getDomRect().y, r.width, r.height);
     dragStartX.current = event.clientX - r.x;
     dragStartY.current = event.clientY - r.y;
@@ -3495,7 +3513,8 @@ var Splitter = (props) => {
     enablePointerOnIFrames(true, layout.getCurrentDocument());
     setDragging(false);
   };
-  const updateLayout = (realtime) => {
+  const updateLayout = (_realtime) => {
+    void _realtime;
     const redraw = () => {
       if (outlineDiv.current) {
         let value = 0;
@@ -3641,13 +3660,13 @@ var BorderButton = (props) => {
   const onClick = () => {
     layout.doAction(Actions.selectTab(node.getId()));
   };
-  const onEndEdit = (event) => {
+  const _onEndEdit = (event) => {
     if (event.target !== contentRef.current) {
-      layout.getCurrentDocument().body.removeEventListener("pointerdown", onEndEdit);
+      layout.getCurrentDocument().body.removeEventListener("pointerdown", _onEndEdit);
       layout.setEditingTab(void 0);
     }
   };
-  const onClose = (event) => {
+  const onClose = (_event) => {
     if (isTabClosable(node, selected)) {
       layout.doAction(Actions.deleteTab(node.getId()));
     } else {
@@ -3818,7 +3837,7 @@ var PopupMenu = (props) => {
       onHide();
     }, 0);
   };
-  const onDragEnd = (event) => {
+  const onDragEnd = (_event) => {
     layout.clearDragMain();
   };
   const itemElements = items.map((item, i) => /* @__PURE__ */ React6.createElement(
@@ -4067,7 +4086,7 @@ var BorderTabSet = (props) => {
     } else {
       overflowContent = /* @__PURE__ */ React8.createElement(React8.Fragment, null, icons.more, /* @__PURE__ */ React8.createElement("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */) }, hiddenTabs.length));
     }
-    buttons.splice(
+    void buttons.splice(
       Math.min(renderState.overflowPosition, buttons.length),
       0,
       /* @__PURE__ */ React8.createElement(
@@ -4158,7 +4177,7 @@ var ErrorBoundary = class extends React10.Component {
     super(props);
     this.state = { hasError: false };
   }
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError(_error) {
     return { hasError: true };
   }
   componentDidCatch(error, errorInfo) {
@@ -4206,7 +4225,7 @@ var PopoutWindow = (props) => {
             const popoutContent = popoutDocument.createElement("div");
             popoutContent.className = "flexlayout__floating_window_content" /* FLEXLAYOUT__FLOATING_WINDOW_CONTENT */;
             popoutDocument.body.appendChild(popoutContent);
-            copyStyles(popoutDocument, styleMap).then(() => {
+            void copyStyles(popoutDocument, styleMap).then(() => {
               setContent(popoutContent);
             });
             const observer = new MutationObserver((mutationsList) => handleStyleMutations(mutationsList, popoutDocument, styleMap));
@@ -4261,7 +4280,9 @@ function copyStyles(popoutDoc, styleMap) {
   const promises = [];
   const styleElements = document.querySelectorAll('style, link[rel="stylesheet"]');
   for (const element of styleElements) {
-    copyStyle(popoutDoc, element, styleMap, promises);
+    if (element instanceof HTMLElement) {
+      copyStyle(popoutDoc, element, styleMap, promises);
+    }
   }
   return Promise.all(promises);
 }
@@ -4282,7 +4303,7 @@ function copyStyle(popoutDoc, element, styleMap, promises) {
       const styleElement = element.cloneNode(true);
       popoutDoc.head.appendChild(styleElement);
       styleMap.set(element, styleElement);
-    } catch (e) {
+    } catch {
     }
   }
 }
@@ -4359,7 +4380,7 @@ var TabButton = (props) => {
       event.preventDefault();
     }
   };
-  const onDragEnd = (event) => {
+  const onDragEnd = (_event) => {
     layout.clearDragMain();
   };
   const onAuxMouseClick = (event) => {
@@ -4521,7 +4542,7 @@ var TabSet = (props) => {
       const oldWasEmpty = oldContentRect.width === 0 && oldContentRect.height === 0;
       const shouldRedraw = !isFirstRender.current || oldWasEmpty;
       if (shouldRedraw) {
-        layout.redrawInternal("tabset content rect " + newContentRect);
+        layout.redrawInternal("tabset content rect " + newContentRect.toString());
       }
     }
     isFirstRender.current = false;
@@ -4595,7 +4616,7 @@ var TabSet = (props) => {
     }
     event.stopPropagation();
   };
-  const onDoubleClick = (event) => {
+  const onDoubleClick = (_event) => {
     if (node.canMaximize()) {
       layout.maximize(node);
     }
@@ -4658,7 +4679,7 @@ var TabSet = (props) => {
       } else {
         overflowContent = /* @__PURE__ */ React15.createElement(React15.Fragment, null, icons.more, /* @__PURE__ */ React15.createElement("div", { className: cm("flexlayout__tab_button_overflow_count" /* FLEXLAYOUT__TAB_BUTTON_OVERFLOW_COUNT */) }, hiddenTabs.length));
       }
-      buttons.splice(
+      void buttons.splice(
         Math.min(renderState.overflowPosition, buttons.length),
         0,
         /* @__PURE__ */ React15.createElement(
@@ -4938,6 +4959,12 @@ var Tab = (props) => {
       }
     }
   }, [selected]);
+  React17.useLayoutEffect(() => {
+    node.setRect(rect);
+  }, [rect, node]);
+  React17.useLayoutEffect(() => {
+    node.setVisible(selected);
+  }, [selected, node]);
   const onPointerDown = () => {
     const parent = node.getParent();
     if (parent instanceof TabSetNode) {
@@ -4946,13 +4973,11 @@ var Tab = (props) => {
       }
     }
   };
-  node.setRect(rect);
   const cm = layout.getClassName;
   const style2 = {};
   rect.styleWithPosition(style2);
   let overlay = null;
   if (selected) {
-    node.setVisible(true);
     if (document.hidden && node.isEnablePopoutOverlay()) {
       const overlayStyle = {};
       rect.styleWithPosition(overlayStyle);
@@ -4960,7 +4985,6 @@ var Tab = (props) => {
     }
   } else {
     style2.display = "none";
-    node.setVisible(false);
   }
   if (parentNode instanceof TabSetNode) {
     if (node.getModel().getMaximizedTabset(layout.getWindowId()) !== void 0) {
@@ -4992,6 +5016,7 @@ var SizeTracker = React18.memo(
     return prevProps.rect.equalSize(nextProps.rect) && prevProps.selected === nextProps.selected && prevProps.forceRevision === nextProps.forceRevision && prevProps.tabsRevision === nextProps.tabsRevision;
   }
 );
+SizeTracker.displayName = "SizeTracker";
 
 // src/view/Layout.tsx
 var Layout = class extends React19.Component {
@@ -5813,7 +5838,7 @@ var LayoutInternal = class _LayoutInternal extends React19.Component {
       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 clientRect = this.selfRef.current.getBoundingClientRect();
       const r = new Rect(event.clientX - clientRect.left, event.clientY - clientRect.top, 1, 1);
       r.positionElement(this.outlineDiv);
     }
@@ -5897,9 +5922,24 @@ var DragState = class {
 
 // src/view/OptimizedLayout.tsx
 import * as React20 from "react";
-import { useCallback, useEffect as useEffect6, useMemo, useRef as useRef12, useState as useState4 } from "react";
-function TabRef({ node, onRectChange, onVisibilityChange }) {
+import { useCallback, useEffect as useEffect6, useState as useState4 } from "react";
+function createTabInfo(node) {
+  const parent = node.getParent();
+  const contentRect = parent?.getContentRect() ?? Rect.empty();
+  return {
+    node,
+    rect: contentRect,
+    visible: node.isSelected()
+  };
+}
+function TabRef({
+  node,
+  onTabMount,
+  onRectChange,
+  onVisibilityChange
+}) {
   useEffect6(() => {
+    onTabMount(node);
     const handleResize = (params) => {
       onRectChange(node.getId(), params.rect);
     };
@@ -5920,7 +5960,7 @@ function TabRef({ node, onRectChange, onVisibilityChange }) {
       node.removeEventListener("resize");
       node.removeEventListener("visibility");
     };
-  }, [node, onRectChange, onVisibilityChange]);
+  }, [node, onTabMount, onRectChange, onVisibilityChange]);
   return null;
 }
 function TabContainer({
@@ -5980,37 +6020,43 @@ function TabContainer({
     })
   );
 }
-function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, ...layoutProps }) {
+function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange, onModelChange: userOnModelChange, ...layoutProps }) {
   const [isDragging, setIsDragging] = useState4(false);
   const [tabs, setTabs] = useState4(() => /* @__PURE__ */ new Map());
-  const tabNodesRef = useRef12(/* @__PURE__ */ new Map());
-  useEffect6(() => {
-    const newTabNodes = /* @__PURE__ */ new Map();
-    model.visitNodes((node) => {
-      if (node instanceof TabNode) {
-        newTabNodes.set(node.getId(), node);
-      }
-    });
-    tabNodesRef.current = newTabNodes;
-    setTabs((prevTabs) => {
+  const syncTabsWithModel = useCallback(
+    (prevTabs) => {
+      const modelTabNodes = /* @__PURE__ */ new Map();
+      model.visitNodes((node) => {
+        if (node instanceof TabNode) {
+          modelTabNodes.set(node.getId(), node);
+        }
+      });
       const nextTabs = /* @__PURE__ */ new Map();
-      for (const [nodeId, node] of newTabNodes) {
+      let changed = false;
+      for (const [nodeId, node] of modelTabNodes) {
         const existing = prevTabs.get(nodeId);
         if (existing) {
           nextTabs.set(nodeId, { ...existing, node });
         } else {
-          const parent = node.getParent();
-          const contentRect = parent?.getContentRect() ?? Rect.empty();
-          nextTabs.set(nodeId, {
-            node,
-            rect: contentRect,
-            visible: node.isSelected()
-          });
+          nextTabs.set(nodeId, createTabInfo(node));
+          changed = true;
         }
       }
+      for (const nodeId of prevTabs.keys()) {
+        if (!modelTabNodes.has(nodeId)) {
+          changed = true;
+        }
+      }
+      if (!changed && nextTabs.size === prevTabs.size) {
+        return prevTabs;
+      }
       return nextTabs;
-    });
-  }, [model]);
+    },
+    [model]
+  );
+  useEffect6(() => {
+    setTabs((prevTabs) => syncTabsWithModel(prevTabs));
+  }, [syncTabsWithModel]);
   const handleRectChange = useCallback((nodeId, rect) => {
     setTabs((prevTabs) => {
       const existing = prevTabs.get(nodeId);
@@ -6033,6 +6079,16 @@ function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange,
       return nextTabs;
     });
   }, []);
+  const handleTabMount = useCallback((node) => {
+    setTabs((prevTabs) => {
+      if (prevTabs.has(node.getId())) {
+        return prevTabs;
+      }
+      const nextTabs = new Map(prevTabs);
+      nextTabs.set(node.getId(), createTabInfo(node));
+      return nextTabs;
+    });
+  }, []);
   const handleDragStateChange = useCallback(
     (dragging) => {
       setIsDragging(dragging);
@@ -6040,14 +6096,20 @@ function OptimizedLayout({ model, renderTab, classNameMapper, onDragStateChange,
     },
     [onDragStateChange]
   );
+  const handleModelChange = useCallback(
+    (changedModel, action) => {
+      setTabs((prevTabs) => syncTabsWithModel(prevTabs));
+      userOnModelChange?.(changedModel, action);
+    },
+    [syncTabsWithModel, userOnModelChange]
+  );
   const factory = useCallback(
     (node) => {
-      return /* @__PURE__ */ React20.createElement(TabRef, { key: node.getId(), node, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
+      return /* @__PURE__ */ React20.createElement(TabRef, { key: node.getId(), node, onTabMount: handleTabMount, onRectChange: handleRectChange, onVisibilityChange: handleVisibilityChange });
     },
-    [handleRectChange, handleVisibilityChange]
+    [handleTabMount, handleRectChange, handleVisibilityChange]
   );
-  const tabsForContainer = useMemo(() => tabs, [tabs]);
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, ...layoutProps }), /* @__PURE__ */ React20.createElement(TabContainer, { tabs: tabsForContainer, renderTab, isDragging, classNameMapper }));
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Layout, { model, factory, classNameMapper, onDragStateChange: handleDragStateChange, onModelChange: handleModelChange, ...layoutProps }), /* @__PURE__ */ React20.createElement(TabContainer, { tabs, renderTab, isDragging, classNameMapper }));
 }
 
 // src/model/walk.ts
@@ -6092,7 +6154,7 @@ function walkJsonModel(model, visitor) {
   }
 }
 export {
-  Action,
+  ActionType,
   Actions,
   BorderNode,
   BorderSet,
@@ -6115,6 +6177,7 @@ export {
   RowNode,
   TabNode,
   TabSetNode,
+  createAction,
   findJsonNodeById,
   walkJsonModel
 };