flexlayout-react 0.9.0 → 0.9.2

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * flexlayout-react
- * @version 0.9.0
+ * @version 0.9.2
  */
 import * as React from "react";
 import { useEffect, useImperativeHandle, useRef } from "react";
@@ -279,7 +279,8 @@ var CLASSES = /* @__PURE__ */ function(CLASSES) {
 	CLASSES["FLEXLAYOUT__FLOAT_WINDOW_CONTENT"] = "flexlayout__float_window_content";
 	CLASSES["FLEXLAYOUT__FLOATING_WINDOW_CONTENT"] = "flexlayout__floating_window_content";
 	CLASSES["FLEXLAYOUT__LAYOUT"] = "flexlayout__layout";
-	CLASSES["FLEXLAYOUT__LAYOUT_MOVEABLES"] = "flexlayout__layout_moveables";
+	CLASSES["FLEXLAYOUT__LAYOUT_METRICS"] = "flexlayout__layout_metrics";
+	CLASSES["FLEXLAYOUT__LAYOUT_MOVEABLES_HOME"] = "flexlayout__layout_moveables_home";
 	CLASSES["FLEXLAYOUT__LAYOUT_OVERLAY"] = "flexlayout__layout_overlay";
 	CLASSES["FLEXLAYOUT__LAYOUT_TAB_STAMPS"] = "flexlayout__layout_tab_stamps";
 	CLASSES["FLEXLAYOUT__LAYOUT_MAIN"] = "flexlayout__layout_main";
@@ -953,19 +954,20 @@ var TabNode = class TabNode extends Node {
 		return new TabNode(model, json, addToModel);
 	}
 	tabRect = Rect.empty();
-	moveableElement;
 	renderedName;
 	extra;
 	visible;
 	rendered;
+	moveableElement;
+	tabStamp;
 	scrollTop;
 	scrollLeft;
-	tabStamp;
 	/** @internal */
 	constructor(model, json, addToModel = true) {
 		super(model);
 		this.extra = {};
-		this.moveableElement = null;
+		this.moveableElement = document.createElement("div");
+		this.moveableElement.className = CLASSES.FLEXLAYOUT__TAB_MOVEABLE;
 		this.tabStamp = null;
 		this.rendered = false;
 		this.visible = false;
@@ -1159,7 +1161,10 @@ var TabNode = class TabNode extends Node {
 	getMoveableElement() {
 		return this.moveableElement;
 	}
-	/** @internal */
+	/** 
+	* @internal
+	* This method is exposed to allow the workaround for issue: #524  
+	*/
 	setMoveableElement(element) {
 		this.moveableElement = element;
 	}
@@ -1227,7 +1232,7 @@ var TabNode = class TabNode extends Node {
 		attributeDefinitions.addInherited("contentClassName", "tabContentClassName").setType(Attribute.STRING).setDescription(`class applied to tab content`);
 		attributeDefinitions.addInherited("icon", "tabIcon").setType(Attribute.STRING).setDescription(`the tab icon`);
 		attributeDefinitions.addInherited("enableRenderOnDemand", "tabEnableRenderOnDemand").setType(Attribute.BOOLEAN).setDescription(`whether to avoid rendering component until tab is visible`);
-		attributeDefinitions.addInherited("enablePopout", "tabEnablePopout").setType(Attribute.BOOLEAN).setAlias("enableFloat").setDescription(`enable popout (in popout capable browser)`);
+		attributeDefinitions.addInherited("enablePopout", "tabEnablePopout").setType(Attribute.BOOLEAN).setAlias("enableFloat").setDescription(`enable window popout (in popout capable browser), to show an icon in the tabset header also set the enablePopoutIcon attribute`);
 		attributeDefinitions.addInherited("enablePopoutIcon", "tabEnablePopoutIcon").setType(Attribute.BOOLEAN).setDescription(`whether to show the popout icon in the tabset header if this tab enables popouts`);
 		attributeDefinitions.addInherited("enablePopoutFloatIcon", "tabEnablePopoutFloatIcon").setType(Attribute.BOOLEAN).setDescription(`whether to show the popout float icon in the tabset header if this tab enables floating popouts`);
 		attributeDefinitions.addInherited("enablePopoutOverlay", "tabEnablePopoutOverlay").setType(Attribute.BOOLEAN).setDescription(`if this tab will not work correctly in a popout window when the main window is backgrounded (inactive)
@@ -1353,6 +1358,16 @@ function isSafari() {
 	const userAgent = navigator.userAgent;
 	return userAgent.includes("Safari") && !userAgent.includes("Chrome") && !userAgent.includes("Chromium");
 }
+function getPageMetrics() {
+	return {
+		scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
+		scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
+		fullHeight: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight),
+		fullWidth: Math.max(document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, document.body.clientWidth, document.documentElement.clientWidth),
+		viewportHeight: window.innerHeight || document.documentElement.clientHeight,
+		viewportWidth: window.innerWidth || document.documentElement.clientWidth
+	};
+}
 //#endregion
 //#region src/model/RowNode.ts
 var RowNode = class RowNode extends Node {
@@ -2155,7 +2170,7 @@ function adjustSelectedIndex(parent, removedIndex) {
 	}
 }
 function randomUUID() {
-	return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
+	return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) => (c ^ crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
 }
 //#endregion
 //#region src/model/BorderNode.ts
@@ -2667,7 +2682,7 @@ var Model = class Model {
 	* Update the node tree by performing the given action,
 	* Actions should be generated via static methods on the Actions class
 	* @param action the action to perform
-	* @returns added Node for Actions.addNode, layoutId for createPopout
+	* @returns added Node for Actions.addTab, layoutId for createPopout
 	*/
 	doAction(action) {
 		let returnVal = void 0;
@@ -3332,7 +3347,7 @@ var I18nLabel = /* @__PURE__ */ function(I18nLabel) {
 	I18nLabel["Close_Tabset"] = "Close tab set";
 	I18nLabel["Active_Tabset"] = "Active tab set";
 	I18nLabel["Move_Tabset"] = "Move tab set";
-	I18nLabel["Move_Tabs"] = "Move tabs(?)";
+	I18nLabel["Move_Tabs"] = "Move tabs (?)";
 	I18nLabel["Maximize"] = "Maximize tab set";
 	I18nLabel["Restore"] = "Restore tab set";
 	I18nLabel["Popout_Tab"] = "Popout selected tab";
@@ -3609,51 +3624,62 @@ var useTabOverflow = (controller, node, orientation, tabStripRef, miniScrollRef,
 	const hiddenTabsRef = React.useRef([]);
 	const thumbInternalPos = React.useRef(0);
 	const repositioningRef = React.useRef(false);
-	hiddenTabsRef.current = hiddenTabs;
 	React.useLayoutEffect(() => {
-		if (tabStripRef.current) setScrollPosition(0);
-	}, [node.getId()]);
-	React.useLayoutEffect(() => {
-		userControlledPositionRef.current = false;
-	}, [
-		node.getSelectedNode(),
-		node.getRect().width,
-		node.getRect().height
-	]);
-	React.useLayoutEffect(() => {
-		checkForOverflow();
-		if (userControlledPositionRef.current === false) scrollIntoView();
-		updateScrollMetrics();
-		updateHiddenTabs();
+		hiddenTabsRef.current = hiddenTabs;
 	});
-	React.useEffect(() => {
-		selfRef.current?.addEventListener("wheel", onWheel, { passive: false });
-		return () => {
-			selfRef.current?.removeEventListener("wheel", onWheel);
-		};
-	}, [selfRef.current]);
-	const onWheel = (event) => {
-		event.preventDefault();
-	};
-	function scrollIntoView() {
-		const selectedTabNode = node.getSelectedNode();
-		if (selectedTabNode && tabStripRef.current) {
-			const stripRect = controller.getBoundingClientRect(tabStripRef.current);
-			const selectedRect = selectedTabNode.getTabRect();
-			let shift = getNear(stripRect) - getNear(selectedRect);
-			if (shift > 0 || getSize(selectedRect) > getSize(stripRect)) {
-				setScrollPosition(getScrollPosition(tabStripRef.current) - shift);
-				repositioningRef.current = true;
-			} else {
-				shift = getFar(selectedRect) - getFar(stripRect);
-				if (shift > 0) {
-					setScrollPosition(getScrollPosition(tabStripRef.current) + shift);
-					repositioningRef.current = true;
+	const setScrollPosition = React.useCallback((p) => {
+		if (orientation === Orientation.HORZ) tabStripRef.current.scrollLeft = p;
+		else tabStripRef.current.scrollTop = p;
+	}, [orientation, tabStripRef]);
+	const getScrollPosition = React.useCallback((elm) => {
+		if (orientation === Orientation.HORZ) return elm.scrollLeft;
+		else return elm.scrollTop;
+	}, [orientation]);
+	const getElementSize = React.useCallback((elm) => {
+		if (orientation === Orientation.HORZ) return elm.clientWidth;
+		else return elm.clientHeight;
+	}, [orientation]);
+	const getScrollSize = React.useCallback((elm) => {
+		if (orientation === Orientation.HORZ) return elm.scrollWidth;
+		else return elm.scrollHeight;
+	}, [orientation]);
+	const getSize = React.useCallback((rect) => {
+		if (orientation === Orientation.HORZ) return rect.width;
+		else return rect.height;
+	}, [orientation]);
+	const getNear = React.useCallback((rect) => {
+		if (orientation === Orientation.HORZ) return rect.x;
+		else return rect.y;
+	}, [orientation]);
+	const getFar = React.useCallback((rect) => {
+		if (orientation === Orientation.HORZ) return rect.right;
+		else return rect.bottom;
+	}, [orientation]);
+	const findHiddenTabs = React.useCallback(() => {
+		const hidden = [];
+		if (tabStripRef.current) {
+			const strip = tabStripRef.current;
+			const stripRect = strip.getBoundingClientRect();
+			const visibleNear = getNear(stripRect) - 1;
+			const visibleFar = getFar(stripRect) + 1;
+			const tabContainer = strip.firstElementChild;
+			let i = 0;
+			Array.from(tabContainer.children).forEach((child) => {
+				const tabRect = child.getBoundingClientRect();
+				if (child.classList.contains(tabClassName)) {
+					if (getNear(tabRect) < visibleNear || getFar(tabRect) > visibleFar) hidden.push(i);
+					i++;
 				}
-			}
+			});
 		}
-	}
-	const updateScrollMetrics = () => {
+		return hidden;
+	}, [
+		tabClassName,
+		tabStripRef,
+		getNear,
+		getFar
+	]);
+	const updateScrollMetrics = React.useCallback(() => {
 		if (tabStripRef.current && miniScrollRef.current) {
 			const t = tabStripRef.current;
 			const s = miniScrollRef.current;
@@ -3680,31 +3706,71 @@ var useTabOverflow = (controller, node, orientation, tabStripRef, miniScrollRef,
 			if (orientation === Orientation.HORZ) s.style.bottom = "0px";
 			else s.style.right = "0px";
 		}
-	};
-	const updateHiddenTabs = () => {
-		const showHidden = findHiddenTabs().length > 0;
+	}, [
+		orientation,
+		tabStripRef,
+		miniScrollRef,
+		getElementSize,
+		getScrollSize,
+		getScrollPosition
+	]);
+	const updateHiddenTabs = React.useCallback((isInitial = false) => {
+		const newHiddenTabs = findHiddenTabs();
+		const showHidden = newHiddenTabs.length > 0;
 		if (showHidden !== isShowHiddenTabs) setShowHiddenTabs(showHidden);
-		if (updateHiddenTabsTimerRef.current === void 0) updateHiddenTabsTimerRef.current = setTimeout(() => {
-			const newHiddenTabs = findHiddenTabs();
-			if (!arraysEqual(newHiddenTabs, hiddenTabsRef.current)) setHiddenTabs(newHiddenTabs);
+		if (isInitial) setHiddenTabs(newHiddenTabs);
+		else if (updateHiddenTabsTimerRef.current === void 0) updateHiddenTabsTimerRef.current = setTimeout(() => {
+			const currentHiddenTabs = findHiddenTabs();
+			if (!arraysEqual(currentHiddenTabs, hiddenTabsRef.current)) setHiddenTabs(currentHiddenTabs);
 			updateHiddenTabsTimerRef.current = void 0;
 		}, 100);
-	};
-	const onScroll = () => {
+	}, [findHiddenTabs, isShowHiddenTabs]);
+	const scrollIntoView = React.useCallback(() => {
+		const selectedTabNode = node.getSelectedNode();
+		if (selectedTabNode && tabStripRef.current) {
+			const stripRect = controller.getBoundingClientRect(tabStripRef.current);
+			const selectedRect = selectedTabNode.getTabRect();
+			let shift = getNear(stripRect) - getNear(selectedRect);
+			if (shift > 0 || getSize(selectedRect) > getSize(stripRect)) {
+				setScrollPosition(getScrollPosition(tabStripRef.current) - shift);
+				repositioningRef.current = true;
+			} else {
+				shift = getFar(selectedRect) - getFar(stripRect);
+				if (shift > 0) {
+					setScrollPosition(getScrollPosition(tabStripRef.current) + shift);
+					repositioningRef.current = true;
+				}
+			}
+		}
+	}, [
+		node,
+		controller,
+		tabStripRef,
+		getNear,
+		getFar,
+		getSize,
+		getScrollPosition,
+		setScrollPosition
+	]);
+	const checkForOverflow = React.useCallback(() => {
+		if (tabStripRef.current) {
+			const tabContainer = tabStripRef.current.firstElementChild;
+			const offset = isDockStickyButtons ? 10 : 0;
+			const dock = getElementSize(tabContainer) + offset > getElementSize(tabStripRef.current);
+			if (dock !== isDockStickyButtons) setDockStickyButtons(dock);
+		}
+	}, [
+		tabStripRef,
+		isDockStickyButtons,
+		getElementSize
+	]);
+	const onScroll = React.useCallback(() => {
 		if (!repositioningRef.current) userControlledPositionRef.current = true;
 		repositioningRef.current = false;
 		updateScrollMetrics();
 		updateHiddenTabs();
-	};
-	const onScrollPointerDown = (event) => {
-		event.stopPropagation();
-		miniScrollRef.current.setPointerCapture(event.pointerId);
-		const r = miniScrollRef.current.getBoundingClientRect();
-		if (orientation === Orientation.HORZ) thumbInternalPos.current = event.clientX - r.x;
-		else thumbInternalPos.current = event.clientY - r.y;
-		startDrag(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);
-	};
-	const onDragMove = (x, y) => {
+	}, [updateScrollMetrics, updateHiddenTabs]);
+	const onDragMove = React.useCallback((x, y) => {
 		if (tabStripRef.current && miniScrollRef.current) {
 			const t = tabStripRef.current;
 			const s = miniScrollRef.current;
@@ -3718,37 +3784,31 @@ var useTabOverflow = (controller, node, orientation, tabStripRef, miniScrollRef,
 			thumb = Math.max(0, Math.min(scrollSize - thumbSize, thumb));
 			if (size > 0) setScrollPosition(thumb * scrollSize / size);
 		}
-	};
-	const onDragEnd = () => {};
-	const onDragCancel = () => {};
-	const checkForOverflow = () => {
-		if (tabStripRef.current) {
-			const tabContainer = tabStripRef.current.firstElementChild;
-			const offset = isDockStickyButtons ? 10 : 0;
-			const dock = getElementSize(tabContainer) + offset > getElementSize(tabStripRef.current);
-			if (dock !== isDockStickyButtons) setDockStickyButtons(dock);
-		}
-	};
-	const findHiddenTabs = () => {
-		const hidden = [];
-		if (tabStripRef.current) {
-			const strip = tabStripRef.current;
-			const stripRect = strip.getBoundingClientRect();
-			const visibleNear = getNear(stripRect) - 1;
-			const visibleFar = getFar(stripRect) + 1;
-			const tabContainer = strip.firstElementChild;
-			let i = 0;
-			Array.from(tabContainer.children).forEach((child) => {
-				const tabRect = child.getBoundingClientRect();
-				if (child.classList.contains(tabClassName)) {
-					if (getNear(tabRect) < visibleNear || getFar(tabRect) > visibleFar) hidden.push(i);
-					i++;
-				}
-			});
-		}
-		return hidden;
-	};
-	const onMouseWheel = (event) => {
+	}, [
+		tabStripRef,
+		miniScrollRef,
+		orientation,
+		getElementSize,
+		getScrollSize,
+		setScrollPosition
+	]);
+	const onDragEnd = React.useCallback(() => {}, []);
+	const onDragCancel = React.useCallback(() => {}, []);
+	const onScrollPointerDown = React.useCallback((event) => {
+		event.stopPropagation();
+		miniScrollRef.current.setPointerCapture(event.pointerId);
+		const r = miniScrollRef.current.getBoundingClientRect();
+		if (orientation === Orientation.HORZ) thumbInternalPos.current = event.clientX - r.x;
+		else thumbInternalPos.current = event.clientY - r.y;
+		startDrag(event.currentTarget.ownerDocument, event, onDragMove, onDragEnd, onDragCancel);
+	}, [
+		miniScrollRef,
+		orientation,
+		onDragMove,
+		onDragEnd,
+		onDragCancel
+	]);
+	const onMouseWheel = React.useCallback((event) => {
 		if (tabStripRef.current) {
 			if (node.getChildren().length === 0) return;
 			let delta;
@@ -3761,35 +3821,60 @@ var useTabOverflow = (controller, node, orientation, tabStripRef, miniScrollRef,
 				event.stopPropagation();
 			}
 		}
-	};
-	const getNear = (rect) => {
-		if (orientation === Orientation.HORZ) return rect.x;
-		else return rect.y;
-	};
-	const getFar = (rect) => {
-		if (orientation === Orientation.HORZ) return rect.right;
-		else return rect.bottom;
-	};
-	const getElementSize = (elm) => {
-		if (orientation === Orientation.HORZ) return elm.clientWidth;
-		else return elm.clientHeight;
-	};
-	const getSize = (rect) => {
-		if (orientation === Orientation.HORZ) return rect.width;
-		else return rect.height;
-	};
-	const getScrollSize = (elm) => {
-		if (orientation === Orientation.HORZ) return elm.scrollWidth;
-		else return elm.scrollHeight;
-	};
-	const setScrollPosition = (p) => {
-		if (orientation === Orientation.HORZ) tabStripRef.current.scrollLeft = p;
-		else tabStripRef.current.scrollTop = p;
-	};
-	const getScrollPosition = (elm) => {
-		if (orientation === Orientation.HORZ) return elm.scrollLeft;
-		else return elm.scrollTop;
-	};
+	}, [
+		node,
+		tabStripRef,
+		getScrollPosition,
+		getScrollSize,
+		getElementSize,
+		setScrollPosition
+	]);
+	const onWheel = React.useCallback((event) => {
+		event.preventDefault();
+	}, []);
+	const nodeId = node.getId();
+	const selectedNode = node.getSelectedNode();
+	const rectWidth = node.getRect().width;
+	const rectHeight = node.getRect().height;
+	React.useLayoutEffect(() => {
+		if (tabStripRef.current) setScrollPosition(0);
+	}, [
+		nodeId,
+		tabStripRef,
+		setScrollPosition
+	]);
+	React.useLayoutEffect(() => {
+		userControlledPositionRef.current = false;
+	}, [
+		selectedNode,
+		rectWidth,
+		rectHeight
+	]);
+	React.useLayoutEffect(() => {
+		checkForOverflow();
+		if (userControlledPositionRef.current === false) scrollIntoView();
+		updateScrollMetrics();
+		updateHiddenTabs(true);
+		requestAnimationFrame(() => {
+			updateHiddenTabs();
+		});
+	}, [
+		checkForOverflow,
+		scrollIntoView,
+		updateScrollMetrics,
+		updateHiddenTabs,
+		rectWidth,
+		rectHeight,
+		orientation,
+		selectedNode
+	]);
+	React.useEffect(() => {
+		const strip = selfRef.current;
+		strip?.addEventListener("wheel", onWheel, { passive: false });
+		return () => {
+			strip?.removeEventListener("wheel", onWheel);
+		};
+	}, [onWheel]);
 	return {
 		selfRef,
 		userControlledPositionRef,
@@ -3809,6 +3894,7 @@ function arraysEqual(arr1, arr2) {
 /** @internal */
 var TabSet = (props) => {
 	const { tabsetNode, controller } = props;
+	const selfRef = React.useRef(null);
 	const tabStripRef = React.useRef(null);
 	const miniScrollRef = React.useRef(null);
 	const tabStripInnerRef = React.useRef(null);
@@ -3817,16 +3903,18 @@ var TabSet = (props) => {
 	const overflowbuttonRef = React.useRef(null);
 	const stickyButtonsRef = React.useRef(null);
 	const icons = controller.getIcons();
+	const { userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } = useTabOverflow(controller, tabsetNode, Orientation.HORZ, tabStripInnerRef, miniScrollRef, controller.getClassName(CLASSES.FLEXLAYOUT__TAB_BUTTON));
 	React.useLayoutEffect(() => {
-		tabsetNode.setRect(controller.getBoundingClientRect(selfRef.current));
+		if (selfRef.current) tabsetNode.setRect(controller.getBoundingClientRect(selfRef.current));
 		if (tabStripRef.current) tabsetNode.setTabStripRect(controller.getBoundingClientRect(tabStripRef.current));
-		const newContentRect = controller.getBoundingClientRect(contentRef.current);
-		if (!tabsetNode.getContentRect().equalsWhenRounded(newContentRect) && !isNaN(newContentRect.x)) {
-			tabsetNode.setContentRect(newContentRect);
-			controller.setReLayout(true);
+		if (contentRef.current) {
+			const newContentRect = controller.getBoundingClientRect(contentRef.current);
+			if (!tabsetNode.getContentRect().equalsWhenRounded(newContentRect) && !isNaN(newContentRect.x)) {
+				tabsetNode.setContentRect(newContentRect);
+				controller.setReLayout(true);
+			}
 		}
 	});
-	const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } = useTabOverflow(controller, tabsetNode, Orientation.HORZ, tabStripInnerRef, miniScrollRef, controller.getClassName(CLASSES.FLEXLAYOUT__TAB_BUTTON));
 	const onOverflowClick = (event) => {
 		const callback = controller.getShowOverflowMenu();
 		const items = hiddenTabs.map((h) => {
@@ -3995,7 +4083,7 @@ var TabSet = (props) => {
 					children: typeof icons.popoutFloat === "function" ? icons.popoutFloat(selectedTabNode) : icons.popoutFloat
 				}, "popout-float"));
 			}
-			if (controller.isSupportsPopout() && selectedTabNode.isAllowedInWindow() && selectedTabNode.isEnablePopout()) {
+			if (controller.isSupportsPopout() && selectedTabNode.isAllowedInWindow() && selectedTabNode.isEnablePopoutIcon()) {
 				const popoutTitle = controller.i18nName(I18nLabel.Popout_Tab);
 				buttons.push(/* @__PURE__ */ jsx("button", {
 					"data-layout-path": path + "/button/popout",
@@ -4205,18 +4293,20 @@ var Splitter = (props) => {
 		sum: 0,
 		startPosition: 0
 	});
+	const onTouchStart = React.useCallback((event) => {
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	}, []);
 	React.useEffect(() => {
-		selfRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-		extendedRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
+		const self = selfRef.current;
+		const extended = extendedRef.current;
+		self?.addEventListener("touchstart", onTouchStart, { passive: false });
+		extended?.addEventListener("touchstart", onTouchStart, { passive: false });
 		return () => {
-			selfRef.current?.removeEventListener("touchstart", onTouchStart);
-			extendedRef.current?.removeEventListener("touchstart", onTouchStart);
+			self?.removeEventListener("touchstart", onTouchStart);
+			extended?.removeEventListener("touchstart", onTouchStart);
 		};
-	}, []);
-	const onTouchStart = (event) => {
-		event.preventDefault();
-		event.stopImmediatePropagation();
-	};
+	}, [onTouchStart]);
 	const onPointerDown = (event) => {
 		event.stopPropagation();
 		if (node instanceof RowNode) initalSizes.current = node.getSplitterInitials(index);
@@ -4356,27 +4446,36 @@ var Tab = (props) => {
 	const { controller, selected, tabNode } = props;
 	const selfRef = React.useRef(null);
 	const firstSelect = React.useRef(true);
+	const onPointerDown = React.useCallback(() => {
+		const parent = tabNode.getParent();
+		if (parent instanceof TabSetNode) {
+			if (!parent.isActive()) controller.doAction(Actions.setActiveTabset(parent.getId(), controller.getLayoutId()));
+		}
+	}, [tabNode, controller]);
 	const parentNode = tabNode.getParent();
 	const rect = parentNode.getContentRect();
 	React.useLayoutEffect(() => {
+		const element = tabNode.getMoveableElement();
+		selfRef.current.appendChild(element);
 		const handleScroll = () => {
 			tabNode.saveScrollPosition();
 		};
-		const element = tabNode.getMoveableElement();
-		if (element) {
-			selfRef.current.appendChild(element);
-			element.addEventListener("scroll", handleScroll);
-		}
-		selfRef.current.addEventListener("pointerdown", onPointerDown);
+		element.addEventListener("scroll", handleScroll);
+		const self = selfRef.current;
+		if (self) self.addEventListener("pointerdown", onPointerDown);
 		return () => {
-			if (selfRef.current) selfRef.current.removeEventListener("pointerdown", onPointerDown);
-			if (element) {
-				if (!tabNode.isEnableWindowReMount()) controller.getMainController()?.getMoveablesDiv()?.appendChild(element);
-				element.removeEventListener("scroll", handleScroll);
+			if (self) self.removeEventListener("pointerdown", onPointerDown);
+			if (controller.getModel().getNodeById(tabNode.getId())) {
+				if (!tabNode.isEnableWindowReMount()) controller.getMainController()?.getMoveablesHome()?.appendChild(element);
 			}
+			element.removeEventListener("scroll", handleScroll);
 			tabNode.setVisible(false);
 		};
-	}, [tabNode.getMoveableElement()]);
+	}, [
+		tabNode,
+		controller,
+		onPointerDown
+	]);
 	React.useEffect(() => {
 		if (tabNode.isSelected()) {
 			if (firstSelect.current) {
@@ -4385,12 +4484,6 @@ var Tab = (props) => {
 			}
 		}
 	});
-	const onPointerDown = () => {
-		const parent = tabNode.getParent();
-		if (parent instanceof TabSetNode) {
-			if (!parent.isActive()) controller.doAction(Actions.setActiveTabset(parent.getId(), controller.getLayoutId()));
-		}
-	};
 	tabNode.setRect(rect);
 	const cm = controller.getClassName;
 	const style = {};
@@ -4510,17 +4603,18 @@ var DragDropManager = class DragDropManager {
 	}
 	addTabWithDragAndDrop(event, json, onDrop) {
 		const tempNode = TabNode.fromJson(json, this._controller.getModel(), false);
-		DragDropManager.dragState = new DragState(this._controller.getMainController(), DragSource.Add, tempNode, json, onDrop);
+		DragDropManager.dragState = new DragState(this._controller.getMainController(), "add", tempNode, json, onDrop);
 	}
 	moveTabWithDragAndDrop(event, node) {
 		this.setDragNode(event, node);
 	}
 	setDragNode = (event, node) => {
-		DragDropManager.dragState = new DragState(this._controller.getMainController(), DragSource.Internal, node, void 0, void 0);
+		DragDropManager.dragState = new DragState(this._controller.getMainController(), "internal", node, void 0, void 0);
 		event.dataTransfer.setData("text/plain", "--flexlayout--");
 		event.dataTransfer.effectAllowed = "copyMove";
 		event.dataTransfer.dropEffect = "move";
 		this._dragEnterCount = 0;
+		this._controller.getModel().sortLayouts();
 		if (node instanceof TabSetNode) {
 			let rendered = false;
 			let content = this._controller.i18nName(I18nLabel.Move_Tabset);
@@ -4569,7 +4663,6 @@ var DragDropManager = class DragDropManager {
 			className: this._controller.getClassName(CLASSES.FLEXLAYOUT__LAYOUT) + " " + this._controller.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT),
 			children: component
 		});
-		this._controller.getModel().sortLayouts();
 		const currentDocument = this._controller.getCurrentDocument();
 		const tempDiv = currentDocument.createElement("div");
 		tempDiv.setAttribute("data-layout-path", "/drag-rectangle");
@@ -4585,15 +4678,24 @@ var DragDropManager = class DragDropManager {
 	}
 	updateActive(event) {
 		const layouts = Array.from(this._controller.getModel().getLayouts().values());
-		let foundActive = false;
+		let found = void 0;
+		let foundTab = void 0;
 		for (let i = layouts.length - 1; i >= 0; i--) {
-			const manager = layouts[i].getController()?.getDragDropManager();
-			if (manager) {
-				const newActive = !foundActive && manager.getDragEnterCount() > 0;
-				if (newActive) foundActive = true;
-				manager.setActive(newActive, event);
+			const layout = layouts[i];
+			const dragDropManager = layout.getController()?.getDragDropManager();
+			if (dragDropManager) {
+				if (dragDropManager.getDragEnterCount() > 0) {
+					if (layout.getType() === "tab") foundTab = layout;
+					else if (!found && !foundTab) found = layout;
+				}
 			}
 		}
+		if (foundTab) {
+			const parentLayout = findParentLayout(foundTab);
+			if (found === parentLayout || !found) found = foundTab;
+		}
+		if (found) found.getController().getDragDropManager().setActive(true, event);
+		for (const layout of layouts) if (layout !== found) layout.getController()?.getDragDropManager().setActive(false, event);
 	}
 	setActive(active, event) {
 		if (this._active !== active) {
@@ -4632,7 +4734,7 @@ var DragDropManager = class DragDropManager {
 			const externalDrag = this._controller.getProps().onExternalDrag(event);
 			if (externalDrag) {
 				const tempNode = TabNode.fromJson(externalDrag.json, this._controller.getModel(), false);
-				DragDropManager.dragState = new DragState(this._controller.getMainController(), DragSource.External, tempNode, externalDrag.json, externalDrag.onDrop);
+				DragDropManager.dragState = new DragState(this._controller.getMainController(), "external", tempNode, externalDrag.json, externalDrag.onDrop);
 			}
 		}
 		if (this._mainController !== DragDropManager.dragState?.mainLayoutController) return;
@@ -4640,7 +4742,8 @@ var DragDropManager = class DragDropManager {
 			event.preventDefault();
 			this._dropInfo = void 0;
 			const rootdiv = this._controller.getRootDiv();
-			this._outlineDiv = this._controller.getCurrentDocument().createElement("div");
+			const currentDocument = this._controller.getCurrentDocument();
+			this._outlineDiv = currentDocument.createElement("div");
 			this._outlineDiv.className = this._controller.getClassName(CLASSES.FLEXLAYOUT__OUTLINE_RECT);
 			this._outlineDiv.style.visibility = "hidden";
 			const speed = this._controller.getTabDragSpeed();
@@ -4695,7 +4798,7 @@ var DragDropManager = class DragDropManager {
 			const dragState = DragDropManager.dragState;
 			if (this._dropInfo) {
 				if (dragState.dragJson !== void 0) {
-					const newNode = this._controller.doAction(Actions.addNode(dragState.dragJson, this._dropInfo.node.getId(), this._dropInfo.location, this._dropInfo.index));
+					const newNode = this._controller.doAction(Actions.addTab(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._controller.doAction(Actions.moveNode(dragState.dragNode.getId(), this._dropInfo.node.getId(), this._dropInfo.location, this._dropInfo.index));
 			}
@@ -4711,12 +4814,6 @@ var DragDropManager = class DragDropManager {
 		return this._dragging;
 	}
 };
-var DragSource = /* @__PURE__ */ function(DragSource) {
-	DragSource["Internal"] = "internal";
-	DragSource["External"] = "external";
-	DragSource["Add"] = "add";
-	return DragSource;
-}({});
 var DragState = class {
 	mainLayoutController;
 	dragSource;
@@ -4810,8 +4907,14 @@ var PopoutWindow = (props) => {
 	const { title, controller, layout, url, onCloseLayout, onSetWindow: onSetLayout, children } = props;
 	const popoutWindow = React.useRef(null);
 	const [content, setContent] = React.useState(void 0);
-	const [firstRender, setFirstRender] = React.useState(true);
-	const styleMap = /* @__PURE__ */ new Map();
+	const styleMap = React.useMemo(() => /* @__PURE__ */ new Map(), []);
+	const initializedRef = React.useRef(false);
+	React.useLayoutEffect(() => {
+		if (!initializedRef.current && content) {
+			initializedRef.current = true;
+			controller.redrawLayout();
+		}
+	}, [content, controller]);
 	React.useLayoutEffect(() => {
 		if (!popoutWindow.current) {
 			const layoutId = layout.getLayoutId();
@@ -4856,22 +4959,10 @@ var PopoutWindow = (props) => {
 			}
 		}
 		return () => {
-			if (!controller.getModel().getLayouts().has(layout.getLayoutId())) {
-				popoutWindow.current?.close();
-				popoutWindow.current = null;
-			}
+			popoutWindow.current?.close();
+			popoutWindow.current = null;
 		};
 	}, []);
-	React.useEffect(() => {
-		if (content !== void 0 && firstRender) {
-			controller.redrawLayout();
-			setFirstRender(false);
-		}
-	}, [
-		content,
-		firstRender,
-		controller
-	]);
 	if (content !== void 0) return createPortal(children, content);
 	else return null;
 };
@@ -4908,17 +4999,6 @@ function copyStyle(popoutDoc, element, styleMap, promises) {
 }
 //#endregion
 //#region src/view/FloatWindow.tsx
-var FloatWindowResizeDirection = /* @__PURE__ */ function(FloatWindowResizeDirection) {
-	FloatWindowResizeDirection["North"] = "n";
-	FloatWindowResizeDirection["South"] = "s";
-	FloatWindowResizeDirection["East"] = "e";
-	FloatWindowResizeDirection["West"] = "w";
-	FloatWindowResizeDirection["NorthWest"] = "nw";
-	FloatWindowResizeDirection["NorthEast"] = "ne";
-	FloatWindowResizeDirection["SouthWest"] = "sw";
-	FloatWindowResizeDirection["SouthEast"] = "se";
-	return FloatWindowResizeDirection;
-}(FloatWindowResizeDirection || {});
 var RESIZE_ZINDEX = 10;
 var RESIZE_MARGIN = -4;
 var RESIZE_EDGE_SIZE = 8;
@@ -4942,32 +5022,56 @@ var FloatWindow = (props) => {
 	const wRef = React.useRef(null);
 	const nwRef = React.useRef(null);
 	const moveToFrontRef = React.useRef(false);
+	const clampToDoc = React.useCallback((rect) => {
+		const layoutRect = Rect.fromDomRect(controller.getRootDiv().getBoundingClientRect());
+		let boundaryRect;
+		if (controller.getProps().constrainFloatPanels) boundaryRect = new Rect(0, 0, layoutRect.width, layoutRect.height);
+		else {
+			const page = getPageMetrics();
+			const width = Math.max(page.fullWidth, window.innerWidth);
+			const height = Math.max(page.fullHeight, window.innerHeight);
+			boundaryRect = new Rect(-layoutRect.x, -layoutRect.y, width, height);
+		}
+		const clamped = rect.clone();
+		clamped.clamp(boundaryRect);
+		return clamped;
+	}, [controller]);
+	const onTouchStart = React.useCallback((event) => {
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	}, []);
 	React.useEffect(() => {
-		headerRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-		nRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-		neRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-		eRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-		seRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-		sRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-		swRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-		wRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
-		nwRef.current?.addEventListener("touchstart", onTouchStart, { passive: false });
+		const elements = [
+			headerRef,
+			nRef,
+			neRef,
+			eRef,
+			seRef,
+			sRef,
+			swRef,
+			wRef,
+			nwRef
+		].map((r) => r.current).filter((el) => el !== null);
+		elements.forEach((el) => el.addEventListener("touchstart", onTouchStart, { passive: false }));
 		return () => {
-			headerRef.current?.removeEventListener("touchstart", onTouchStart);
-			nRef.current?.removeEventListener("touchstart", onTouchStart);
-			neRef.current?.removeEventListener("touchstart", onTouchStart);
-			eRef.current?.removeEventListener("touchstart", onTouchStart);
-			seRef.current?.removeEventListener("touchstart", onTouchStart);
-			sRef.current?.removeEventListener("touchstart", onTouchStart);
-			swRef.current?.removeEventListener("touchstart", onTouchStart);
-			wRef.current?.removeEventListener("touchstart", onTouchStart);
-			nwRef.current?.removeEventListener("touchstart", onTouchStart);
+			elements.forEach((el) => el.removeEventListener("touchstart", onTouchStart));
 		};
-	}, []);
-	const onTouchStart = (event) => {
-		event.preventDefault();
-		event.stopImmediatePropagation();
-	};
+	}, [onTouchStart]);
+	const initializedRef = React.useRef(false);
+	React.useLayoutEffect(() => {
+		if (!initializedRef.current) {
+			initializedRef.current = true;
+			const clamped = clampToDoc(rect);
+			if (!clamped.equals(rect)) {
+				setRect(clamped);
+				layout.setRect(clamped);
+			}
+		}
+	}, [
+		clampToDoc,
+		rect,
+		layout
+	]);
 	React.useEffect(() => {
 		const onPointerDown = () => {
 			const layouts = [...controller.getModel().getLayouts()];
@@ -4992,28 +5096,22 @@ var FloatWindow = (props) => {
 				current.removeEventListener("pointerup", onPointerUp);
 			}
 		};
-	}, [controller, layout.getLayoutId()]);
+	}, [controller, layout]);
 	const onPointerDownHeader = (e) => {
 		e.stopPropagation();
 		const offset = {
 			x: e.clientX - rect.x,
 			y: e.clientY - rect.y
 		};
-		const rootDiv = controller.getRootDiv();
-		const rootRect = rootDiv ? rootDiv.getBoundingClientRect() : {
-			width: window.innerWidth,
-			height: window.innerHeight
-		};
 		startDrag(document, e, (x, y) => {
 			controller.showOverlayOnAllWindows(true);
 			if (moveToFrontRef.current) {
 				controller.moveWindowToFront(layout.getLayoutId());
 				moveToFrontRef.current = false;
 			}
-			const newRect = new Rect(x - offset.x, y - offset.y, rect.width, rect.height);
-			newRect.clamp(new Rect(0, 0, rootRect.width, rootRect.height));
-			setRect(newRect);
-			layout.setRect(newRect);
+			const clamped = clampToDoc(new Rect(x - offset.x, y - offset.y, rect.width, rect.height));
+			setRect(clamped);
+			layout.setRect(clamped);
 		}, () => {
 			controller.redrawLayout();
 			controller.showOverlayOnAllWindows(false);
@@ -5025,11 +5123,6 @@ var FloatWindow = (props) => {
 			x: e.clientX,
 			y: e.clientY
 		};
-		const rootDiv = controller.getRootDiv();
-		const rootRect = rootDiv ? rootDiv.getBoundingClientRect() : {
-			width: window.innerWidth,
-			height: window.innerHeight
-		};
 		startDrag(document, e, (x, y) => {
 			controller.showOverlayOnAllWindows(true);
 			const dx = x - startPos.x;
@@ -5048,41 +5141,15 @@ var FloatWindow = (props) => {
 				newW -= dx;
 			}
 			if (direction.includes("e")) newW += dx;
-			if (newW < MIN_WIDTH) {
-				if (direction.includes("w")) newX = startRect.x + startRect.width - MIN_WIDTH;
-				newW = MIN_WIDTH;
-			}
-			if (newH < MIN_HEIGHT) {
-				if (direction.includes("n")) newY = startRect.y + startRect.height - MIN_HEIGHT;
-				newH = MIN_HEIGHT;
-			}
-			if (newX < 0) {
-				newW += newX;
-				newX = 0;
-			}
-			if (newY < 0) {
-				newH += newY;
-				newY = 0;
-			}
-			if (newX + newW > rootRect.width) newW = rootRect.width - newX;
-			if (newY + newH > rootRect.height) newH = rootRect.height - newY;
-			if (newW < MIN_WIDTH) newW = MIN_WIDTH;
-			if (newH < MIN_HEIGHT) newH = MIN_HEIGHT;
-			const newRect = new Rect(newX, newY, newW, newH);
-			setRect(newRect);
-			layout.setRect(newRect);
+			const clamped = clampToDoc(new Rect(newX, newY, Math.max(MIN_WIDTH, newW), Math.max(MIN_HEIGHT, newH)));
+			setRect(clamped);
+			layout.setRect(clamped);
 		}, () => {
 			controller.redrawLayout();
 			controller.showOverlayOnAllWindows(false);
 		}, () => {});
 		e.stopPropagation();
 	};
-	const rootDiv = controller.getRootDiv();
-	const rootRect = rootDiv ? rootDiv.getBoundingClientRect() : {
-		width: window.innerWidth,
-		height: window.innerHeight
-	};
-	rect.clamp(new Rect(0, 0, rootRect.width, rootRect.height));
 	return /* @__PURE__ */ jsxs("div", {
 		ref: selfRef,
 		className: cm(CLASSES.FLEXLAYOUT__FLOAT_WINDOW),
@@ -5136,7 +5203,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_EDGE_SIZE,
 					cursor: "ns-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.North)
+				onPointerDown: (e) => onPointerDownResize(e, "n")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: sRef,
@@ -5149,7 +5216,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_EDGE_SIZE,
 					cursor: "ns-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.South)
+				onPointerDown: (e) => onPointerDownResize(e, "s")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: eRef,
@@ -5162,7 +5229,7 @@ var FloatWindow = (props) => {
 					width: RESIZE_EDGE_SIZE,
 					cursor: "ew-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.East)
+				onPointerDown: (e) => onPointerDownResize(e, "e")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: wRef,
@@ -5175,7 +5242,7 @@ var FloatWindow = (props) => {
 					width: RESIZE_EDGE_SIZE,
 					cursor: "ew-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.West)
+				onPointerDown: (e) => onPointerDownResize(e, "w")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: nwRef,
@@ -5188,7 +5255,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_CORNER_SIZE,
 					cursor: "nwse-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.NorthWest)
+				onPointerDown: (e) => onPointerDownResize(e, "nw")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: neRef,
@@ -5201,7 +5268,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_CORNER_SIZE,
 					cursor: "nesw-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.NorthEast)
+				onPointerDown: (e) => onPointerDownResize(e, "ne")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: swRef,
@@ -5214,7 +5281,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_CORNER_SIZE,
 					cursor: "nesw-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.SouthWest)
+				onPointerDown: (e) => onPointerDownResize(e, "sw")
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: seRef,
@@ -5227,7 +5294,7 @@ var FloatWindow = (props) => {
 					height: RESIZE_SE_CORNER_SIZE,
 					cursor: "nwse-resize"
 				},
-				onPointerDown: (e) => onPointerDownResize(e, FloatWindowResizeDirection.SouthEast)
+				onPointerDown: (e) => onPointerDownResize(e, "se")
 			})
 		]
 	});
@@ -5238,6 +5305,7 @@ var FloatingWindowContainer = ({ controller }) => {
 	const floatingLayouts = [];
 	const layouts = controller.getModel().getLayouts();
 	let windowPopoutId = 0;
+	let floatPopoutZIndex = 2e3;
 	for (const [layoutId, layout] of layouts) if (!layout.isMainLayout()) {
 		if (layout.getType() === "window" && controller.isSupportsPopout()) {
 			floatingLayouts.push(/* @__PURE__ */ jsx(PopoutWindow, {
@@ -5257,16 +5325,20 @@ var FloatingWindowContainer = ({ controller }) => {
 				})
 			}, layoutId));
 			windowPopoutId++;
-		} else if (layout.getType() === "float") floatingLayouts.push(/* @__PURE__ */ jsx(FloatWindow, {
-			controller,
-			layout,
-			onCloseLayout: controller.onCloseLayout,
-			children: /* @__PURE__ */ jsx(LayoutInternal, {
-				...controller.getProps(),
-				layoutId,
-				mainLayoutController: controller
-			})
-		}, layoutId + "float"));
+		} else if (layout.getType() === "float") {
+			floatingLayouts.push(/* @__PURE__ */ jsx(FloatWindow, {
+				controller,
+				layout,
+				zIndex: floatPopoutZIndex,
+				onCloseLayout: controller.onCloseLayout,
+				children: /* @__PURE__ */ jsx(LayoutInternal, {
+					...controller.getProps(),
+					layoutId,
+					mainLayoutController: controller
+				})
+			}, layoutId + "float"));
+			floatPopoutZIndex++;
+		}
 	}
 	return /* @__PURE__ */ jsx(Fragment, { children: floatingLayouts });
 };
@@ -5396,16 +5468,17 @@ var BorderButton = (props) => {
 /** @internal */
 var BorderTabSet = (props) => {
 	const { borderNode, controller, size } = props;
+	const selfRef = React.useRef(null);
 	const toolbarRef = React.useRef(null);
 	const miniScrollRef = React.useRef(null);
 	const overflowbuttonRef = React.useRef(null);
 	const stickyButtonsRef = React.useRef(null);
 	const tabStripInnerRef = React.useRef(null);
 	const icons = controller.getIcons();
+	const { userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } = useTabOverflow(controller, borderNode, Orientation.flip(borderNode.getOrientation()), tabStripInnerRef, miniScrollRef, controller.getClassName(CLASSES.FLEXLAYOUT__BORDER_BUTTON));
 	React.useLayoutEffect(() => {
-		borderNode.setTabHeaderRect(controller.getBoundingClientRect(selfRef.current));
+		if (selfRef.current) borderNode.setTabHeaderRect(controller.getBoundingClientRect(selfRef.current));
 	});
-	const { selfRef, userControlledPositionRef, onScroll, onScrollPointerDown, hiddenTabs, onMouseWheel, isDockStickyButtons, isShowHiddenTabs } = useTabOverflow(controller, borderNode, Orientation.flip(borderNode.getOrientation()), tabStripInnerRef, miniScrollRef, controller.getClassName(CLASSES.FLEXLAYOUT__BORDER_BUTTON));
 	const onAuxMouseClick = (event) => {
 		if (isAuxMouseEvent(event)) controller.auxMouseClick(borderNode, event);
 	};
@@ -5787,15 +5860,15 @@ var BorderContainer = ({ controller, inner }) => {
 	});
 };
 //#endregion
-//#region src/view/DragContainer.tsx
+//#region src/view/DragTabButton.tsx
 /** @internal */
-var DragContainer = React.memo((props) => {
-	DragContainer.displayName = "DragContainer";
+var DragTabButton = React.memo((props) => {
+	DragTabButton.displayName = "DragTabButton";
 	const { controller, tabNode } = props;
 	const selfRef = React.useRef(null);
 	React.useEffect(() => {
 		tabNode.setTabStamp(selfRef.current);
-	}, [tabNode, selfRef.current]);
+	}, [tabNode]);
 	const cm = controller.getClassName;
 	return /* @__PURE__ */ jsx("div", {
 		ref: selfRef,
@@ -5820,10 +5893,10 @@ var LayoutInternal = React.forwardRef((props, ref) => {
 		showEdges: false,
 		showOverlay: false,
 		calculatedBorderBarSize: 29,
+		calculatedSplitterSize: 8,
 		layoutRedrawRevision: 0,
 		fullRedrawRevision: 0,
-		showHiddenBorder: DockLocation.CENTER,
-		splitterSize: 8
+		showHiddenBorder: DockLocation.CENTER
 	});
 	const setState = React.useCallback((update) => {
 		setStateRaw((prev) => ({
@@ -5832,16 +5905,18 @@ var LayoutInternal = React.forwardRef((props, ref) => {
 		}));
 	}, [props]);
 	const layoutRef = React.useRef(null);
-	const moveablesRef = React.useRef(null);
+	const moveablesHomeRef = React.useRef(null);
 	const findBorderBarSizeRef = React.useRef(null);
+	const findSplitterSizeRef = React.useRef(null);
 	const mainRef = React.useRef(null);
 	const controller = React.useMemo(() => new LayoutController(props, state, setState), []);
 	controller.setProps(props);
 	controller.setStateRaw(state);
 	controller.setSetState(setState);
 	controller.setLayoutRef(layoutRef);
-	controller.setMoveablesRef(moveablesRef);
+	controller.setMoveablesHomeRef(moveablesHomeRef);
 	controller.setFindBorderBarSizeRef(findBorderBarSizeRef);
+	controller.setFindSplitterSizeRef(findSplitterSizeRef);
 	controller.setMainRef(mainRef);
 	React.useImperativeHandle(ref, () => controller, [controller]);
 	React.useLayoutEffect(() => {
@@ -5904,61 +5979,57 @@ var LayoutInternal = React.forwardRef((props, ref) => {
 		controller.setLayout(layout);
 		if (controller.isMainLayout()) {
 			currentModel.addChangeListener(controller.onModelChange);
-			const updateFromCSSVars = () => {
-				const size = parseInt(getComputedStyle(layoutRef.current).getPropertyValue("--splitter-size"));
-				if (Number.isFinite(size)) {
-					props.model.setSplitterSize(size);
-					if (state.splitterSize !== size) setState({ splitterSize: size });
-				}
-			};
-			updateFromCSSVars();
-			const cssVarUpdater = setInterval(updateFromCSSVars, 1e3);
 			return () => {
 				currentModel.removeChangeListener(controller.onModelChange);
-				clearInterval(cssVarUpdater);
-				controller.tidyMoveablesMap();
 			};
 		}
 	}, [props.model, controller]);
-	if (!layoutRef.current) return /* @__PURE__ */ jsxs("div", {
-		ref: layoutRef,
-		className: controller.getClassName(CLASSES.FLEXLAYOUT__LAYOUT),
+	const metrics = /* @__PURE__ */ jsxs("div", {
+		className: controller.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_METRICS),
 		children: [/* @__PURE__ */ jsx("div", {
-			ref: moveablesRef,
-			className: controller.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES)
-		}, "__moveables__"), /* @__PURE__ */ jsx("div", {
 			ref: findBorderBarSizeRef,
 			className: controller.getClassName(CLASSES.FLEXLAYOUT__BORDER_SIZER),
 			children: "FindBorderBarSize"
-		}, "findBorderBarSize")]
+		}, "findBorderBarSize"), /* @__PURE__ */ jsx("div", {
+			ref: findSplitterSizeRef,
+			className: controller.getClassName(CLASSES.FLEXLAYOUT__SPLITTER_ + "horz")
+		}, "findSplitterSize")]
+	});
+	if (!layoutRef.current) return /* @__PURE__ */ jsx("div", {
+		ref: layoutRef,
+		className: controller.getClassName(CLASSES.FLEXLAYOUT__LAYOUT),
+		children: metrics
 	});
 	const model = props.model;
 	const layoutId = controller.getLayoutId();
 	model.getRootRow(layoutId).calcMinMaxSize();
 	model.getRootRow(layoutId).setPaths("");
-	if (controller.isMainLayout()) {
-		model.getBorderSet().setPaths();
-		controller.createMoveableDivs();
-	}
+	if (controller.isMainLayout()) model.getBorderSet().setPaths();
+	const overlay = /* @__PURE__ */ jsx(Overlay, {
+		controller,
+		show: state.showOverlay
+	}, "__overlay__");
 	const outer = /* @__PURE__ */ jsx(BorderContainer, {
 		controller,
 		inner: controller.renderLayout()
 	});
 	const tabs = controller.renderTabContainers();
 	const reorderedTabs = controller.reorderComponents(tabs, controller.getOrderedTabIds());
-	let metricElements = null;
 	let floatingWindows = null;
 	let reorderedTabContents = null;
-	let tabStamps = null;
+	let dragTabButtons = null;
+	let moveablesHome = null;
 	if (controller.isMainLayout()) {
-		metricElements = controller.renderMetricsElements();
 		floatingWindows = /* @__PURE__ */ jsx(FloatingWindowContainer, { controller });
-		const tabContents = controller.renderTabContents();
-		reorderedTabContents = controller.reorderComponents(tabContents, controller.getOrderedTabMoveableIds());
-		tabStamps = /* @__PURE__ */ jsx("div", {
+		reorderedTabContents = controller.reorderComponents(controller.renderTabContents(), controller.getOrderedTabMoveableIds());
+		dragTabButtons = /* @__PURE__ */ jsx("div", {
 			className: controller.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_TAB_STAMPS),
-			children: controller.renderTabStamps()
-		}, "__tabStamps__");
+			children: controller.renderDragTabButtons()
+		}, "__dragTabButtons__");
+		moveablesHome = /* @__PURE__ */ jsx("div", {
+			ref: moveablesHomeRef,
+			className: controller.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES_HOME)
+		}, "__moveables_home__");
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		ref: layoutRef,
@@ -5968,21 +6039,15 @@ var LayoutInternal = React.forwardRef((props, ref) => {
 		onDragOver: controller.getDragDropManager().onDragOver,
 		onDrop: controller.getDragDropManager().onDrop,
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				ref: moveablesRef,
-				className: controller.getClassName(CLASSES.FLEXLAYOUT__LAYOUT_MOVEABLES)
-			}, "__moveables__"),
-			metricElements,
-			/* @__PURE__ */ jsx(Overlay, {
-				controller,
-				show: state.showOverlay
-			}, "__overlay__"),
+			metrics,
+			moveablesHome,
+			overlay,
 			outer,
 			reorderedTabs,
 			reorderedTabContents,
 			state.portal,
 			floatingWindows,
-			tabStamps
+			dragTabButtons
 		]
 	});
 });
@@ -5993,12 +6058,12 @@ var LayoutController = class LayoutController {
 	_state;
 	_setState;
 	_layoutRef;
-	_moveablesRef;
+	_moveablesHomeRef;
 	_findBorderBarSizeRef;
+	_findSplitterSizeRef;
 	_mainRef;
 	_orderedTabIds;
 	_orderedTabMoveableIds;
-	_moveableElementMap = /* @__PURE__ */ new Map();
 	_currentDocument;
 	_currentWindow;
 	_supportsPopout;
@@ -6084,58 +6149,19 @@ var LayoutController = class LayoutController {
 		});
 		return tabContents;
 	}
-	renderMetricsElements() {
-		return /* @__PURE__ */ jsx("div", {
-			ref: this._findBorderBarSizeRef,
-			className: this.getClassName(CLASSES.FLEXLAYOUT__BORDER_SIZER),
-			children: "FindBorderBarSize"
-		}, "findBorderBarSize");
-	}
-	renderTabStamps() {
-		const tabStamps = [];
+	renderDragTabButtons() {
+		const dragTabButtons = [];
 		this._props.model.visitNodes((node) => {
 			if (node instanceof TabNode) {
 				const child = node;
-				tabStamps.push(/* @__PURE__ */ jsx(DragContainer, {
+				dragTabButtons.push(/* @__PURE__ */ jsx(DragTabButton, {
 					controller: this,
 					tabNode: child,
 					dragging: Utils_dragging
 				}, child.getId()));
 			}
 		});
-		return tabStamps;
-	}
-	createMoveableDivs() {
-		this._props.model.visitNodes((node) => {
-			if (node instanceof TabNode) {
-				const tabNode = node;
-				const element = this.getMoveableElement(tabNode.getId());
-				tabNode.setMoveableElement(element);
-			}
-		});
-	}
-	getMoveablesDiv() {
-		return this._moveablesRef.current;
-	}
-	getMoveableElement(id) {
-		let moveableElement = this._moveableElementMap.get(id);
-		if (moveableElement === void 0) {
-			moveableElement = document.createElement("div");
-			this._moveablesRef.current.appendChild(moveableElement);
-			moveableElement.className = CLASSES.FLEXLAYOUT__TAB_MOVEABLE;
-			this._moveableElementMap.set(id, moveableElement);
-		}
-		return moveableElement;
-	}
-	tidyMoveablesMap() {
-		const tabs = /* @__PURE__ */ new Map();
-		this._props.model.visitNodes((node, _) => {
-			if (node instanceof TabNode) tabs.set(node.getId(), node);
-		});
-		for (const [nodeId, element] of this._moveableElementMap) if (!tabs.has(nodeId)) {
-			element.remove();
-			this._moveableElementMap.delete(nodeId);
-		}
+		return dragTabButtons;
 	}
 	redrawLayout() {
 		this._mainController?.setState((state) => {
@@ -6208,7 +6234,14 @@ var LayoutController = class LayoutController {
 	updateLayoutMetrics = () => {
 		if (this._findBorderBarSizeRef.current) {
 			const borderBarSize = this._findBorderBarSizeRef.current.getBoundingClientRect().height;
-			if (borderBarSize !== this._state.calculatedBorderBarSize) this.setState({ calculatedBorderBarSize: borderBarSize });
+			if (Math.abs(borderBarSize - this._state.calculatedBorderBarSize) > .5) this.setState({ calculatedBorderBarSize: borderBarSize });
+		}
+		if (this._findSplitterSizeRef.current) {
+			const splitterBarSize = this._findSplitterSizeRef.current.getBoundingClientRect().width;
+			if (Math.abs(splitterBarSize - this._state.calculatedSplitterSize) > .5) {
+				this._props.model.setSplitterSize(splitterBarSize);
+				this.setState({ calculatedSplitterSize: splitterBarSize });
+			}
 		}
 	};
 	addTabWithDragAndDrop(event, json, onDrop) {
@@ -6220,6 +6253,9 @@ var LayoutController = class LayoutController {
 	setDragComponent(event, component, x, y) {
 		this._dragDropManager.setDragComponent(event, component, x, y);
 	}
+	getMoveablesHome() {
+		return this._moveablesHomeRef.current;
+	}
 	getProps() {
 		return this._props;
 	}
@@ -6244,11 +6280,8 @@ var LayoutController = class LayoutController {
 	setLayoutRef(value) {
 		this._layoutRef = value;
 	}
-	getMoveablesRef() {
-		return this._moveablesRef;
-	}
-	setMoveablesRef(value) {
-		this._moveablesRef = value;
+	setMoveablesHomeRef(value) {
+		this._moveablesHomeRef = value;
 	}
 	getFindBorderBarSizeRef() {
 		return this._findBorderBarSizeRef;
@@ -6256,6 +6289,12 @@ var LayoutController = class LayoutController {
 	setFindBorderBarSizeRef(value) {
 		this._findBorderBarSizeRef = value;
 	}
+	getFindSplitterSizeRef() {
+		return this._findBorderBarSizeRef;
+	}
+	setFindSplitterSizeRef(value) {
+		this._findSplitterSizeRef = value;
+	}
 	getMainRef() {
 		return this._mainRef;
 	}
@@ -6325,9 +6364,6 @@ var LayoutController = class LayoutController {
 		if (layoutRect) return Rect.getBoundingClientRect(div).relativeTo(layoutRect);
 		return Rect.empty();
 	}
-	getMoveableContainer() {
-		return this._moveablesRef.current;
-	}
 	getClassName = (defaultClassName) => {
 		if (this._props.classNameMapper === void 0) return defaultClassName;
 		else return this._props.classNameMapper(defaultClassName);
@@ -6391,11 +6427,11 @@ var LayoutController = class LayoutController {
 		this.doAction(Actions.movePopoutToFront(layoutId));
 	}
 	addTabToTabSet(tabsetId, json) {
-		if (this._props.model.getNodeById(tabsetId) !== void 0) return this.doAction(Actions.addNode(json, tabsetId, DockLocation.CENTER, -1));
+		if (this._props.model.getNodeById(tabsetId) !== void 0) return this.doAction(Actions.addTab(json, tabsetId, DockLocation.CENTER, -1));
 	}
 	addTabToActiveTabSet(json) {
 		const tabsetNode = this._props.model.getActiveTabset(this._layoutId);
-		if (tabsetNode !== void 0) return this.doAction(Actions.addNode(json, tabsetNode.getId(), DockLocation.CENTER, -1));
+		if (tabsetNode !== void 0) return this.doAction(Actions.addTab(json, tabsetNode.getId(), DockLocation.CENTER, -1));
 	}
 	showControlInPortal = (control, element) => {
 		const portal = createPortal(control, element);
@@ -6462,6 +6498,12 @@ var defaultSupportsPopout = isDesktop();
 var Layout = React.forwardRef((props, ref) => {
 	const controllerRef = useRef(null);
 	const renderRevision = useRef(0);
+	const lastModel = useRef(props.model);
+	const key = useRef(0);
+	if (lastModel.current !== props.model) {
+		key.current++;
+		lastModel.current = props.model;
+	}
 	Layout.displayName = "Layout";
 	useImperativeHandle(ref, () => ({
 		redraw: () => {
@@ -6490,9 +6532,9 @@ var Layout = React.forwardRef((props, ref) => {
 		ref: controllerRef,
 		...props,
 		parentRedrawRevision: renderRevision.current++
-	});
+	}, key.current);
 });
-var FlexLayoutVersion = "0.9.0";
+var FlexLayoutVersion = "0.9.2";
 //#endregion
 //#region src/view/TabLayout.tsx
 /**