dockview-core 8.3.0 → 8.4.0

package/dist/package/main.cjs.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 8.3.0
+ * @version 8.4.0
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -382,7 +382,7 @@ var FocusTracker = class extends CompositeDisposable {
 		this._onDidBlur = new Emitter();
 		this.onDidBlur = this._onDidBlur.event;
 		this.addDisposables(this._onDidFocus, this._onDidBlur);
-		let hasFocus = isAncestor(document.activeElement, element);
+		let hasFocus = isAncestor(getActiveElement(element), element);
 		let loosingFocus = false;
 		const onFocus = () => {
 			loosingFocus = false;
@@ -404,7 +404,7 @@ var FocusTracker = class extends CompositeDisposable {
 			}
 		};
 		this._refreshStateHandler = () => {
-			if (isAncestor(document.activeElement, element) !== hasFocus) if (hasFocus) onBlur();
+			if (isAncestor(getActiveElement(element), element) !== hasFocus) if (hasFocus) onBlur();
 			else onFocus();
 		};
 		this.addDisposables(addDisposableListener(element, "focus", onFocus, true));
@@ -421,6 +421,49 @@ function quasiPreventDefault(event) {
 function quasiDefaultPrevented(event) {
 	return event[QUASI_PREVENT_DEFAULT_KEY];
 }
+/** Whether the event originated within any of `elements`. Checks the
+*  composed path, so it also holds for elements inside a shadow root, which a
+*  window or document listener sees retargeted to the shadow host. */
+function isEventWithin(event, elements) {
+	var _event$composedPath, _event$composedPath2;
+	const path = (_event$composedPath = (_event$composedPath2 = event.composedPath) === null || _event$composedPath2 === void 0 ? void 0 : _event$composedPath2.call(event)) !== null && _event$composedPath !== void 0 ? _event$composedPath : [];
+	if (path.length > 0) return elements.some((el) => path.includes(el));
+	const target = event.target;
+	return target instanceof Node && elements.some((el) => el.contains(target));
+}
+/** Every shadow root between `element` and its document, innermost first. An
+*  element in a component nested inside another component sits in more than
+*  one, and an event is cut at each boundary. */
+function shadowRootsOf(node) {
+	const roots = [];
+	let root = node.getRootNode();
+	while (isShadowRoot(root)) {
+		roots.push(root);
+		root = root.host.getRootNode();
+	}
+	return roots;
+}
+/**
+* `element` as a listener rooted in `scope`'s tree sees it. A node in a shadow
+* root *below* that tree is retargeted to its host there, repeatedly for
+* nested roots; a node already in the same tree is returned unchanged. Omit
+* `scope` (or pass a node in the document) for the document-level view, which
+* is what a window listener gets.
+*
+* The scope matters: a layer living inside a shadow root must be able to tell
+* its own elements apart, and retargeting everything out to the document would
+* collapse them all onto the one host.
+*/
+function retargetInto(element, scope) {
+	const scopeRoot = scope === null || scope === void 0 ? void 0 : scope.getRootNode();
+	let current = element;
+	let root = current.getRootNode();
+	while (root !== scopeRoot && isShadowRoot(root)) {
+		current = root.host;
+		root = current.getRootNode();
+	}
+	return current;
+}
 function addStyles(document, styleSheetList, options = {}) {
 	const styleSheets = Array.from(styleSheetList);
 	const { nonce } = options;
@@ -431,6 +474,7 @@ function addStyles(document, styleSheetList, options = {}) {
 			link.href = styleSheet.href;
 			link.type = styleSheet.type;
 			link.rel = "stylesheet";
+			if (resolvedNonce) link.setAttribute("nonce", resolvedNonce);
 			document.head.appendChild(link);
 			continue;
 		}
@@ -470,6 +514,23 @@ function isInDocument(element) {
 	else currentElement = currentElement.parentNode;
 	return false;
 }
+/** Duck-typed so it holds for a shadow root from another window's realm. */
+function isShadowRoot(node) {
+	return !!node && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in node && !!node.host;
+}
+/**
+* The document or shadow root to hit-test (`elementFromPoint` /
+* `elementsFromPoint`) against for `node`. Hit-testing on the document stops
+* at a shadow host, so when dockview is mounted in a shadow root it has to go
+* through that root to reach its own elements. Falls back to the owning
+* document (which may be a popout's) for a detached node.
+*/
+function getHitTestRoot(node) {
+	var _node$ownerDocument;
+	const root = node.getRootNode();
+	if (root !== node && typeof root.elementsFromPoint === "function") return root;
+	return (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : document;
+}
 function addTestId(element, id) {
 	element.dataset.testid = id;
 }
@@ -504,6 +565,38 @@ function disableIframePointEvents(rootNode = document) {
 		iframes.splice(0, iframes.length);
 	} };
 }
+/**
+* Suppress text selection for the duration of a pointer drag.
+*
+* A pointer drag is just a held button as far as the browser is concerned, so
+* it selects text under the cursor as it travels. HTML5 drag-and-drop is
+* exempt - the browser owns the gesture - which is why this is only needed on
+* the pointer backend.
+*
+* `user-select: none` alone is not enough on WebKit: it starts the selection
+* gesture from a mousedown on a `user-select: none` element unless that
+* element is also natively draggable, then extends it into whatever the
+* pointer crosses. Cancelling `selectstart` refuses that first extension,
+* which ends the gesture for the rest of the drag.
+*
+* An existing selection is left alone: a mousedown on a `user-select: none`
+* element does not clear one natively, and a pointer drag should not either.
+*/
+function disableTextSelection(rootNode = document) {
+	const doc = rootNode instanceof Document ? rootNode : rootNode.ownerDocument;
+	const root = doc === null || doc === void 0 ? void 0 : doc.documentElement;
+	if (!doc || !root) return { release: () => void 0 };
+	const properties = ["user-select", "-webkit-user-select"];
+	const previous = properties.map((name) => [name, root.style.getPropertyValue(name)]);
+	for (const name of properties) root.style.setProperty(name, "none");
+	const onSelectStart = (event) => event.preventDefault();
+	doc.addEventListener("selectstart", onSelectStart);
+	return { release: () => {
+		doc.removeEventListener("selectstart", onSelectStart);
+		for (const [name, value] of previous) if (value) root.style.setProperty(name, value);
+		else root.style.removeProperty(name);
+	} };
+}
 function getDockviewTheme(element) {
 	function toClassList(element) {
 		const list = [];
@@ -515,6 +608,11 @@ function getDockviewTheme(element) {
 	while (parent !== null) {
 		theme = toClassList(parent).find((cls) => cls.startsWith("dockview-theme-"));
 		if (typeof theme === "string") break;
+		if (parent.parentElement === null) {
+			const root = parent.getRootNode();
+			parent = isShadowRoot(root) ? root.host : null;
+			continue;
+		}
 		parent = parent.parentElement;
 	}
 	return theme;
@@ -626,6 +724,285 @@ function resolveOpaqueBackground(element) {
 	}
 	return "";
 }
+/** The focused element as seen from `node`'s own tree. Unlike
+*  `document.activeElement`, which is the shadow host when focus is inside a
+*  shadow root, this reaches into the root `node` lives in (and a popout's
+*  own document), while a web component nested inside that tree still
+*  resolves to its host there. */
+function getActiveElement(node) {
+	var _root$activeElement;
+	const root = node.getRootNode();
+	const doc = root.nodeType === Node.DOCUMENT_NODE ? root : node.ownerDocument;
+	if (doc && typeof doc.hasFocus === "function" && !doc.hasFocus()) return null;
+	return (_root$activeElement = root.activeElement) !== null && _root$activeElement !== void 0 ? _root$activeElement : null;
+}
+/** Where to append a floating element (e.g. a drag ghost) for `node`: its
+*  shadow root when it lives in one, so styles scoped there still apply,
+*  otherwise the body of its own document (which may be a popout's). */
+function getOverlayParent(node) {
+	var _node$ownerDocument2;
+	const root = node.getRootNode();
+	if (isShadowRoot(root)) return root;
+	return ((_node$ownerDocument2 = node.ownerDocument) !== null && _node$ownerDocument2 !== void 0 ? _node$ownerDocument2 : document).body;
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/asyncToGenerator.js
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+	try {
+		var i = n[a](c), u = i.value;
+	} catch (n) {
+		e(n);
+		return;
+	}
+	i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+	return function() {
+		var t = this, e = arguments;
+		return new Promise(function(r, o) {
+			var a = n.apply(t, e);
+			function _next(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+			}
+			function _throw(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+			}
+			_next(void 0);
+		});
+	};
+}
+
+//#endregion
+//#region src/popoutWindow.ts
+/**
+* Throwing form of {@link getPopoutUrlError}, for callers with no way to
+* recover from a refused URL.
+*/
+function assertSameOriginPopoutUrl(url) {
+	const error = getPopoutUrlError(url);
+	if (error) throw error;
+}
+/**
+* Schemes a popout must never open: each runs script in a context the browser
+* still associates with the opener, or (for `file:`) has no origin to check.
+*/
+const UNSAFE_POPOUT_PROTOCOLS = /* @__PURE__ */ new Set([
+	"javascript:",
+	"data:",
+	"blob:",
+	"vbscript:",
+	"file:"
+]);
+/** How often an open popout window's `closed` flag is checked. */
+const CLOSED_POLL_INTERVAL_MS = 250;
+/**
+* The reason `url` is unusable as a popout target, or `undefined` if it is
+* allowed. Rejects anything that isn't same-origin with the page (scheme and
+* host, so a packaged webview's own scheme such as `tauri://` qualifies), and
+* the `javascript:`, `data:`, `blob:`, `vbscript:` and `file:` schemes that
+* would otherwise execute in a context the browser still associates with the
+* opener via `window.opener`.
+*
+* Callers that can recover from a refusal use this rather than catching, so it
+* can be handled without a rejected promise. `page` is what the URL resolves
+* against, and defaults to this page.
+*/
+function getPopoutUrlError(url, page = globalThis.location) {
+	let resolved;
+	try {
+		resolved = new URL(url, page.href);
+	} catch (_unused) {
+		return /* @__PURE__ */ new Error(`dockview: invalid popout URL: ${url}`);
+	}
+	if (UNSAFE_POPOUT_PROTOCOLS.has(resolved.protocol)) return /* @__PURE__ */ new Error(`dockview: popout URL must not use the "${resolved.protocol}" protocol, which would run in the opener's context; got: ${url}`);
+	if (!(resolved.protocol === page.protocol && resolved.host === page.host)) return /* @__PURE__ */ new Error(`dockview: popout URL must be same-origin with the page (${page.protocol}//${page.host}); got: ${url}`);
+}
+var PopoutWindow = class extends CompositeDisposable {
+	get window() {
+		var _this$_window$value, _this$_window;
+		return (_this$_window$value = (_this$_window = this._window) === null || _this$_window === void 0 ? void 0 : _this$_window.value) !== null && _this$_window$value !== void 0 ? _this$_window$value : null;
+	}
+	/** Set when {@link open} resolved `null`, saying which way it failed. */
+	get failure() {
+		return this._failure;
+	}
+	constructor(target, className, options) {
+		super();
+		this.target = target;
+		this.className = className;
+		this.options = options;
+		this._onWillClose = new Emitter();
+		this.onWillClose = this._onWillClose.event;
+		this._onDidClose = new Emitter();
+		this.onDidClose = this._onDidClose.event;
+		this._window = null;
+		this.addDisposables(this._onWillClose, this._onDidClose, { dispose: () => {
+			this.close();
+		} });
+	}
+	dimensions() {
+		if (!this._window) return null;
+		const left = this._window.value.screenX;
+		return {
+			top: this._window.value.screenY,
+			left,
+			width: this._window.value.innerWidth,
+			height: this._window.value.innerHeight
+		};
+	}
+	close() {
+		var _this$options$onWillC, _this$options;
+		const current = this._window;
+		if (!current) return;
+		this._window = null;
+		this._onWillClose.fire();
+		(_this$options$onWillC = (_this$options = this.options).onWillClose) === null || _this$options$onWillC === void 0 || _this$options$onWillC.call(_this$options, {
+			id: this.target,
+			window: current.value
+		});
+		current.disposable.dispose();
+		this._onDidClose.fire();
+	}
+	open() {
+		var _this = this;
+		return _asyncToGenerator(function* () {
+			var _this$options$onDidOp, _this$options2;
+			if (_this._window) throw new Error("instance of popout window is already open");
+			const url = `${_this.options.url}`;
+			assertSameOriginPopoutUrl(url);
+			const features = Object.entries({
+				top: _this.options.top,
+				left: _this.options.left,
+				width: _this.options.width,
+				height: _this.options.height
+			}).map(([key, value]) => `${key}=${value}`).join(",");
+			/**
+			* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/open
+			*/
+			const externalWindow = window.open(url, _this.target, features);
+			if (!externalWindow) {
+				_this._failure = { reason: "blocked" };
+				return null;
+			}
+			const disposable = new CompositeDisposable();
+			_this._window = {
+				value: externalWindow,
+				disposable
+			};
+			disposable.addDisposables(Disposable.from(() => {
+				externalWindow.close();
+			}), _this.watchForClose(externalWindow), addDisposableListener(globalThis.window, "beforeunload", () => {
+				/**
+				* before the main window closes we should close this popup too
+				* to be good citizens
+				*
+				* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+				*/
+				_this.close();
+			}));
+			const container = _this.createPopoutWindowContainer();
+			if (_this.className) container.classList.add(_this.className);
+			(_this$options$onDidOp = (_this$options2 = _this.options).onDidOpen) === null || _this$options$onDidOp === void 0 || _this$options$onDidOp.call(_this$options2, {
+				id: _this.target,
+				window: externalWindow
+			});
+			return new Promise((resolve) => {
+				/**
+				* A host can answer `window.open` with a window in its own
+				* JavaScript context, which throws on first touch and cannot be
+				* filled with panel DOM. Settle as a blocked popup does, so the
+				* caller's fallback returns the group to the grid.
+				*/
+				const abandon = (err) => {
+					_this._failure = {
+						reason: "unscriptable",
+						error: err instanceof Error ? err : new Error(String(err))
+					};
+					_this.close();
+					resolve(null);
+				};
+				try {
+					externalWindow.addEventListener("unload", () => {});
+				} catch (err) {
+					abandon(err);
+					return;
+				}
+				/**
+				* `load` is the only event that resolves this promise with a
+				* container, so a window that goes away first would leave the
+				* caller awaiting a promise that never settles - and
+				* `addPopoutGroup` holds its layout transaction open until it does.
+				* Settle with `null` on close, the same signal a blocked popup
+				* gives and one the caller already handles. `resolve` after the
+				* fact is a no-op, so a `load` that arrived first still wins.
+				*/
+				disposable.addDisposables(_this.onWillClose(() => {
+					var _this$_failure;
+					(_this$_failure = _this._failure) !== null && _this$_failure !== void 0 || (_this._failure = { reason: "closed" });
+					resolve(null);
+				}));
+				externalWindow.addEventListener("load", () => {
+					/**
+					* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
+					*/
+					try {
+						var _globalThis$document$, _this$options$styleRo, _this$options3;
+						const externalDocument = externalWindow.document;
+						externalDocument.title = document.title;
+						externalDocument.body.appendChild(container);
+						addStyles(externalDocument, [...Array.from(globalThis.document.styleSheets), ...(_globalThis$document$ = globalThis.document.adoptedStyleSheets) !== null && _globalThis$document$ !== void 0 ? _globalThis$document$ : []], { nonce: _this.options.nonce });
+						const sheets = [];
+						for (let root = (_this$options$styleRo = (_this$options3 = _this.options).styleRoot) === null || _this$options$styleRo === void 0 ? void 0 : _this$options$styleRo.call(_this$options3); isShadowRoot(root); root = root.host.getRootNode()) {
+							var _root$styleSheets, _root$adoptedStyleShe;
+							sheets.push(...Array.from((_root$styleSheets = root.styleSheets) !== null && _root$styleSheets !== void 0 ? _root$styleSheets : []), ...(_root$adoptedStyleShe = root.adoptedStyleSheets) !== null && _root$adoptedStyleShe !== void 0 ? _root$adoptedStyleShe : []);
+						}
+						if (sheets.length > 0) addStyles(externalDocument, sheets, { nonce: _this.options.nonce });
+						/**
+						* beforeunload must be registered after load for reasons I could not determine
+						* otherwise the beforeunload event will not fire when the window is closed
+						*/
+						addDisposableListener(externalWindow, "beforeunload", () => {
+							/**
+							* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+							*/
+							_this.close();
+						});
+						resolve(container);
+					} catch (err) {
+						abandon(err);
+					}
+				});
+			});
+		})();
+	}
+	/**
+	* Backstop for the `beforeunload` signal, which a window torn down without
+	* running its unload handlers never sends: a native shell destroying the
+	* webview, or a browser discarding the page. `closed` is readable on any
+	* handle, cross-origin included. Whichever signal arrives first wins.
+	*/
+	watchForClose(externalWindow) {
+		if (typeof externalWindow.closed !== "boolean") return Disposable.NONE;
+		const handle = setInterval(() => {
+			if (externalWindow.closed) this.close();
+		}, CLOSED_POLL_INTERVAL_MS);
+		return Disposable.from(() => {
+			clearInterval(handle);
+		});
+	}
+	createPopoutWindowContainer() {
+		const el = document.createElement("div");
+		el.classList.add("dv-popout-window");
+		el.id = "dv-popout-window";
+		el.style.position = "absolute";
+		el.style.width = "100%";
+		el.style.height = "100%";
+		el.style.top = "0px";
+		el.style.left = "0px";
+		return el;
+	}
+};
 
 //#endregion
 //#region src/array.ts
@@ -845,6 +1222,15 @@ var Splitview = class {
 	get proportions() {
 		return this._proportions ? [...this._proportions] : void 0;
 	}
+	get proportionalLayout() {
+		return this._proportionalLayout;
+	}
+	set proportionalLayout(value) {
+		if (this._proportionalLayout === value) return;
+		this._proportionalLayout = value;
+		if (value) this.saveProportions();
+		else this._proportions = void 0;
+	}
 	get orientation() {
 		return this._orientation;
 	}
@@ -969,7 +1355,7 @@ var Splitview = class {
 		this._orientation = (_options$orientation = options.orientation) !== null && _options$orientation !== void 0 ? _options$orientation : "VERTICAL";
 		this.element = this.createContainer();
 		this.margin = (_options$margin = options.margin) !== null && _options$margin !== void 0 ? _options$margin : 0;
-		this.proportionalLayout = options.proportionalLayout === void 0 ? true : !!options.proportionalLayout;
+		this._proportionalLayout = options.proportionalLayout === void 0 ? true : !!options.proportionalLayout;
 		this.viewContainer = this.createViewContainer();
 		this.sashContainer = this.createSashContainer();
 		this.element.appendChild(this.sashContainer);
@@ -1693,10 +2079,18 @@ var BranchNode = class BranchNode extends CompositeDisposable {
 			if (child instanceof BranchNode) child.margin = value;
 		});
 	}
+	get proportionalLayout() {
+		return this.splitview.proportionalLayout;
+	}
+	set proportionalLayout(value) {
+		this.splitview.proportionalLayout = value;
+		this.children.forEach((child) => {
+			if (child instanceof BranchNode) child.proportionalLayout = value;
+		});
+	}
 	constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, margin, childDescriptors) {
 		super();
 		this.orientation = orientation;
-		this.proportionalLayout = proportionalLayout;
 		this.styles = styles;
 		this._childrenDisposable = Disposable.NONE;
 		this.children = [];
@@ -2238,8 +2632,13 @@ var Gridview = class {
 		}
 		return findLeaf(this.root, reverse);
 	}
+	get proportionalLayout() {
+		return this.root.proportionalLayout;
+	}
+	set proportionalLayout(value) {
+		this.root.proportionalLayout = value;
+	}
 	constructor(proportionalLayout, styles, orientation, locked, margin) {
-		this.proportionalLayout = proportionalLayout;
 		this.styles = styles;
 		this._locked = false;
 		this._margin = 0;
@@ -2433,6 +2832,25 @@ var Resizable = class extends CompositeDisposable {
 			this.layout(width, height);
 		}));
 	}
+	/**
+	* Lay out from the element's current size.
+	*
+	* The ResizeObserver above only reports asynchronously, so between
+	* construction and its first callback the component believes it has no
+	* size - and anything built in that window (panels added right after
+	* `createDockview`, say) resolves its sizes against zero and collapses to
+	* minimums. Concrete components call this once they are fully constructed
+	* so that work sees the real size. The same guards as the observer apply:
+	* a detached or hidden element has no size worth propagating.
+	*/
+	layoutFromElement() {
+		if (this.disableResizing || !this._element.offsetParent) return;
+		if (!isInDocument(this._element)) return;
+		const width = Math.round(this._element.clientWidth);
+		const height = Math.round(this._element.clientHeight);
+		if (width === 0 || height === 0) return;
+		this.layout(width, height);
+	}
 };
 
 //#endregion
@@ -2533,7 +2951,10 @@ var BaseGrid = class extends Resizable {
 		return this.gridview.isViewVisible(getGridLocation(panel.element));
 	}
 	updateOptions(options) {
-		if (typeof options.proportionalLayout === "boolean") {}
+		if ("proportionalLayout" in options) {
+			var _options$proportional;
+			this.gridview.proportionalLayout = (_options$proportional = options.proportionalLayout) !== null && _options$proportional !== void 0 ? _options$proportional : true;
+		}
 		if (options.orientation) this.gridview.orientation = options.orientation;
 		if ("styles" in options) {}
 		if ("disableAutoResizing" in options) {
@@ -3342,6 +3763,15 @@ var DockviewApi = class {
 	get onUnhandledDragOver() {
 		return this.component.onUnhandledDragOver;
 	}
+	/**
+	* The drag-and-drop backends currently live: `dndStrategy` resolved against
+	* this device, which `'auto'` reads from the primary input device. Only an
+	* HTML5 drag can leave the window it started in, so check `html5` before
+	* relying on a drag between a popout window and the main window.
+	*/
+	get dndCapabilities() {
+		return this.component.dndCapabilities;
+	}
 	get onDidPopoutGroupSizeChange() {
 		return this.component.onDidPopoutGroupSizeChange;
 	}
@@ -3364,9 +3794,27 @@ var DockviewApi = class {
 	get onDidRemovePopoutGroup() {
 		return this.component.onDidRemovePopoutGroup;
 	}
+	/**
+	* Fires when a popout window could not be used, carrying which way it
+	* failed: the URL was refused, the browser blocked the window, the host
+	* returned a window whose document the opener cannot reach, or it closed
+	* before loading. The group stays in (or returns to) the main grid.
+	*/
 	get onDidOpenPopoutWindowFail() {
 		return this.component.onDidOpenPopoutWindowFail;
 	}
+	/**
+	* Fires as dockview lets go of a popout window, while that window is still
+	* open, carrying its live `Window` handle. Covers every popout the component
+	* opened and every reason for closing one, disposal included;
+	* {@link onDidAddPopoutGroup} is the opening half.
+	*
+	* For hosts that own their windows: in a desktop webview the page's own
+	* `close()` can be a no-op, so the shell has to be told.
+	*/
+	get onWillClosePopoutWindow() {
+		return this.component.onWillClosePopoutWindow;
+	}
 	/** Enumerate the popout groups currently open in their own windows. */
 	getPopouts() {
 		return this.component.getPopouts();
@@ -4333,7 +4781,8 @@ function addGhostImage(dataTransfer, ghostElement, options) {
 	var _options$ownerDocumen, _options$x, _options$y;
 	addClasses(ghostElement, "dv-dragged");
 	ghostElement.style.top = "-9999px";
-	((_options$ownerDocumen = options === null || options === void 0 ? void 0 : options.ownerDocument) !== null && _options$ownerDocumen !== void 0 ? _options$ownerDocumen : document).body.appendChild(ghostElement);
+	ghostElement.style.position = "absolute";
+	((options === null || options === void 0 ? void 0 : options.owner) ? getOverlayParent(options.owner) : ((_options$ownerDocumen = options === null || options === void 0 ? void 0 : options.ownerDocument) !== null && _options$ownerDocumen !== void 0 ? _options$ownerDocumen : document).body).appendChild(ghostElement);
 	dataTransfer.setDragImage(ghostElement, (_options$x = options === null || options === void 0 ? void 0 : options.x) !== null && _options$x !== void 0 ? _options$x : 0, (_options$y = options === null || options === void 0 ? void 0 : options.y) !== null && _options$y !== void 0 ? _options$y : 0);
 	setTimeout(() => {
 		removeClasses(ghostElement, "dv-dragged");
@@ -4385,7 +4834,7 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		} };
 	}
 	beginDrag(args) {
-		var _source$ownerDocument, _source$ownerDocument2, _source$ownerDocument3;
+		var _source$ownerDocument, _source$ownerDocument2, _source$ownerDocument3, _source$ownerDocument4;
 		if (this._active) this.cancel();
 		const { pointerEvent, source } = args;
 		const dataDisposable = args.getData();
@@ -4401,13 +4850,14 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		this._dataDisposable = dataDisposable;
 		this._ghost = args.ghost;
 		this._iframeShield = disableIframePointEvents((_source$ownerDocument = source.ownerDocument) !== null && _source$ownerDocument !== void 0 ? _source$ownerDocument : document);
+		this._selectionShield = disableTextSelection((_source$ownerDocument2 = source.ownerDocument) !== null && _source$ownerDocument2 !== void 0 ? _source$ownerDocument2 : document);
 		const startEvent = {
 			clientX: pointerEvent.clientX,
 			clientY: pointerEvent.clientY,
 			pointerEvent
 		};
 		this._onDragStart.fire(startEvent);
-		const targetWindow = (_source$ownerDocument2 = (_source$ownerDocument3 = source.ownerDocument) === null || _source$ownerDocument3 === void 0 ? void 0 : _source$ownerDocument3.defaultView) !== null && _source$ownerDocument2 !== void 0 ? _source$ownerDocument2 : globalThis.window;
+		const targetWindow = (_source$ownerDocument3 = (_source$ownerDocument4 = source.ownerDocument) === null || _source$ownerDocument4 === void 0 ? void 0 : _source$ownerDocument4.defaultView) !== null && _source$ownerDocument3 !== void 0 ? _source$ownerDocument3 : globalThis.window;
 		this._moveListener = addDisposableListener(targetWindow, "pointermove", (e) => {
 			var _this$_active;
 			if (e.pointerId !== ((_this$_active = this._active) === null || _this$_active === void 0 ? void 0 : _this$_active.pointerId)) return;
@@ -4444,13 +4894,13 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		}
 	}
 	_findTargetUnder(x, y) {
-		var _this$_active$source$, _this$_active4;
-		const elements = ((_this$_active$source$ = (_this$_active4 = this._active) === null || _this$_active4 === void 0 ? void 0 : _this$_active4.source.ownerDocument) !== null && _this$_active$source$ !== void 0 ? _this$_active$source$ : document).elementsFromPoint(x, y);
+		const elements = (this._active ? getHitTestRoot(this._active.source) : document).elementsFromPoint(x, y);
 		for (const el of elements) {
 			let current = el;
 			while (current) {
+				var _target$isHitTestTran;
 				const target = this._targetByElement.get(current);
-				if (target) return target;
+				if (target && !((_target$isHitTestTran = target.isHitTestTransparent) === null || _target$isHitTestTran === void 0 ? void 0 : _target$isHitTestTran.call(target))) return target;
 				current = current.parentElement;
 			}
 		}
@@ -4494,7 +4944,7 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		this._onDragEnd.fire(dragEvent);
 	}
 	_teardown() {
-		var _this$_ghost2, _this$_iframeShield, _this$_moveListener, _this$_upListener, _this$_cancelListener;
+		var _this$_ghost2, _this$_iframeShield, _this$_selectionShiel, _this$_moveListener, _this$_upListener, _this$_cancelListener;
 		this._currentTarget = void 0;
 		this._active = void 0;
 		this._lastPointerEvent = void 0;
@@ -4504,6 +4954,8 @@ var PointerDragController = class PointerDragController extends CompositeDisposa
 		this._ghost = void 0;
 		(_this$_iframeShield = this._iframeShield) === null || _this$_iframeShield === void 0 || _this$_iframeShield.release();
 		this._iframeShield = void 0;
+		(_this$_selectionShiel = this._selectionShield) === null || _this$_selectionShiel === void 0 || _this$_selectionShiel.release();
+		this._selectionShield = void 0;
 		(_this$_moveListener = this._moveListener) === null || _this$_moveListener === void 0 || _this$_moveListener.dispose();
 		(_this$_upListener = this._upListener) === null || _this$_upListener === void 0 || _this$_upListener.dispose();
 		(_this$_cancelListener = this._cancelListener) === null || _this$_cancelListener === void 0 || _this$_cancelListener.dispose();
@@ -4546,10 +4998,14 @@ var PointerDropTarget = class extends CompositeDisposable {
 			element: this.element,
 			handleDragOver: (e) => this._onDragOver(e),
 			handleDragLeave: () => this._onDragLeave(),
-			handleDrop: (e) => this._onDropEvent(e)
+			handleDrop: (e) => this._onDropEvent(e),
+			isHitTestTransparent: options.isHitTestTransparent
 		};
 		this.addDisposables(this._onDrop, this._onWillShowOverlay, PointerDragController.getInstance().registerTarget(handle));
 	}
+	clearOverlay() {
+		this._clearOwnOverlay();
+	}
 	setTargetZones(zones) {
 		this._acceptedTargetZonesSet = new Set(zones);
 	}
@@ -4768,9 +5224,10 @@ var PointerDragSource = class extends CompositeDisposable {
 		return true;
 	}
 	_onPointerDown(event) {
-		var _ref, _this$options$thresho, _ref2, _this$element$ownerDo, _this$element$ownerDo2;
+		var _this$element$ownerDo, _ref, _this$options$thresho, _ref2, _this$element$ownerDo2, _this$element$ownerDo3;
 		if (!this._shouldHandle(event)) return;
 		this._cancelPending();
+		this._selectionShield = disableTextSelection((_this$element$ownerDo = this.element.ownerDocument) !== null && _this$element$ownerDo !== void 0 ? _this$element$ownerDo : document);
 		this._pendingPointerId = event.pointerId;
 		this._startX = event.clientX;
 		this._startY = event.clientY;
@@ -4786,7 +5243,7 @@ var PointerDragSource = class extends CompositeDisposable {
 		const threshold = (_this$options$thresho = this.options.threshold) !== null && _this$options$thresho !== void 0 ? _this$options$thresho : DEFAULT_THRESHOLD;
 		const pressToleranceOpt = this.options.pressTolerance;
 		const pressTolerance = (_ref2 = typeof pressToleranceOpt === "function" ? pressToleranceOpt() : pressToleranceOpt) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_PRESS_TOLERANCE;
-		const targetWindow = (_this$element$ownerDo = (_this$element$ownerDo2 = this.element.ownerDocument) === null || _this$element$ownerDo2 === void 0 ? void 0 : _this$element$ownerDo2.defaultView) !== null && _this$element$ownerDo !== void 0 ? _this$element$ownerDo : globalThis.window;
+		const targetWindow = (_this$element$ownerDo2 = (_this$element$ownerDo3 = this.element.ownerDocument) === null || _this$element$ownerDo3 === void 0 ? void 0 : _this$element$ownerDo3.defaultView) !== null && _this$element$ownerDo2 !== void 0 ? _this$element$ownerDo2 : globalThis.window;
 		this._pendingMoveListener = addDisposableListener(targetWindow, "pointermove", (moveEvent) => {
 			if (moveEvent.pointerId !== this._pendingPointerId) return;
 			const dx = moveEvent.clientX - this._startX;
@@ -4812,7 +5269,9 @@ var PointerDragSource = class extends CompositeDisposable {
 		this._cancelPending();
 	}
 	_cancelPending() {
-		var _this$_pendingMoveLis, _this$_pendingUpListe, _this$_pendingCancelL;
+		var _this$_selectionShiel, _this$_pendingMoveLis, _this$_pendingUpListe, _this$_pendingCancelL;
+		(_this$_selectionShiel = this._selectionShield) === null || _this$_selectionShiel === void 0 || _this$_selectionShiel.release();
+		this._selectionShield = void 0;
 		this._pendingPointerId = void 0;
 		if (this._armTimer !== void 0) {
 			clearTimeout(this._armTimer);
@@ -4857,29 +5316,51 @@ var PointerDragSource = class extends CompositeDisposable {
 */
 var PointerGhost = class {
 	constructor(opts) {
-		var _opts$offsetX, _opts$offsetY, _opts$opacity, _opts$owner$ownerDocu, _opts$owner;
+		var _opts$offsetX, _opts$offsetY, _popover, _opts$opacity;
 		this._disposed = false;
 		this.element = opts.element;
 		this.offsetX = (_opts$offsetX = opts.offsetX) !== null && _opts$offsetX !== void 0 ? _opts$offsetX : 0;
 		this.offsetY = (_opts$offsetY = opts.offsetY) !== null && _opts$offsetY !== void 0 ? _opts$offsetY : 0;
-		this.element.style.position = "fixed";
-		this.element.style.left = "0px";
-		this.element.style.top = "0px";
-		this.element.style.pointerEvents = "none";
-		this.element.style.zIndex = "99999";
-		this.element.style.opacity = String((_opts$opacity = opts.opacity) !== null && _opts$opacity !== void 0 ? _opts$opacity : .8);
-		this.element.style.willChange = "transform";
-		this.element.style.transform = `translate3d(${opts.initialX - this.offsetX}px, ${opts.initialY - this.offsetY}px, 0)`;
-		((_opts$owner$ownerDocu = (_opts$owner = opts.owner) === null || _opts$owner === void 0 ? void 0 : _opts$owner.ownerDocument) !== null && _opts$owner$ownerDocu !== void 0 ? _opts$owner$ownerDocu : document).body.appendChild(this.element);
+		const parent = opts.owner ? getOverlayParent(opts.owner) : document.body;
+		let popover;
+		if (isShadowRoot(parent) && typeof this.element.showPopover === "function") {
+			popover = this.element.ownerDocument.createElement("div");
+			popover.popover = "manual";
+			Object.assign(popover.style, {
+				inset: "auto",
+				margin: "0",
+				padding: "0",
+				border: "0",
+				background: "transparent",
+				color: "inherit",
+				overflow: "visible"
+			});
+			popover.appendChild(this.element);
+			this.element.style.pointerEvents = "none";
+			this.element.style.transform = "none";
+		}
+		this.container = (_popover = popover) !== null && _popover !== void 0 ? _popover : this.element;
+		const style = this.container.style;
+		style.position = "fixed";
+		style.left = "0px";
+		style.top = "0px";
+		style.pointerEvents = "none";
+		style.zIndex = "99999";
+		style.opacity = String((_opts$opacity = opts.opacity) !== null && _opts$opacity !== void 0 ? _opts$opacity : .8);
+		style.willChange = "transform";
+		style.transform = `translate3d(${opts.initialX - this.offsetX}px, ${opts.initialY - this.offsetY}px, 0)`;
+		parent.appendChild(this.container);
+		popover === null || popover === void 0 || popover.showPopover();
 	}
 	update(clientX, clientY) {
 		if (this._disposed) return;
-		this.element.style.transform = `translate3d(${clientX - this.offsetX}px, ${clientY - this.offsetY}px, 0)`;
+		this.container.style.transform = `translate3d(${clientX - this.offsetX}px, ${clientY - this.offsetY}px, 0)`;
 	}
 	dispose() {
 		if (this._disposed) return;
 		this._disposed = true;
 		this.element.remove();
+		if (this.container !== this.element) this.container.remove();
 	}
 };
 
@@ -4916,7 +5397,8 @@ var Html5DragSource = class extends CompositeDisposable {
 				addGhostImage(event.dataTransfer, ghost.element, {
 					x: (_ghost$offsetX = ghost.offsetX) !== null && _ghost$offsetX !== void 0 ? _ghost$offsetX : 0,
 					y: (_ghost$offsetY = ghost.offsetY) !== null && _ghost$offsetY !== void 0 ? _ghost$offsetY : 0,
-					ownerDocument: (_this$el$ownerDocumen2 = this.el.ownerDocument) !== null && _this$el$ownerDocumen2 !== void 0 ? _this$el$ownerDocumen2 : void 0
+					ownerDocument: (_this$el$ownerDocumen2 = this.el.ownerDocument) !== null && _this$el$ownerDocumen2 !== void 0 ? _this$el$ownerDocumen2 : void 0,
+					owner: this.el
 				});
 				if (ghost.dispose) {
 					const disposeGhost = ghost.dispose;
@@ -5752,8 +6234,7 @@ var LongPressDetector = class extends CompositeDisposable {
 		let guard;
 		const timeout = setTimeout(() => guard === null || guard === void 0 ? void 0 : guard.dispose(), 500);
 		guard = addDisposableListener(targetWindow, "click", (event) => {
-			const target = event.target;
-			if (target && this.element.contains(target)) {
+			if (isEventWithin(event, [this.element])) {
 				event.preventDefault();
 				event.stopPropagation();
 			}
@@ -5869,6 +6350,7 @@ var Tab = class extends CompositeDisposable {
 			if (this.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 				var _this$accessor$option;
 				if (((_this$accessor$option = this.accessor.options.theme) === null || _this$accessor$option === void 0 ? void 0 : _this$accessor$option.tabAnimation) === "smooth") return false;
+				if (data.tabGroupId && data.groupId === this.group.id && this.group.model.getTabGroupForPanel(this.panel.id)) return false;
 				return true;
 			}
 			return this.group.model.canDisplayOverlay(event, position, "tab");
@@ -6481,6 +6963,7 @@ var DockviewUnhandledDragOverEvent = class extends AcceptableEvent {
 const PROPERTY_KEYS_DOCKVIEW = (() => {
 	return Object.keys({
 		disableAutoResizing: void 0,
+		proportionalLayout: void 0,
 		hideBorders: void 0,
 		singleTabMode: void 0,
 		disableFloatingGroups: void 0,
@@ -7316,12 +7799,34 @@ var TabGroupManager = class {
 	}
 	updateDirection() {
 		const isVertical = this._ctx.getDirection() === "vertical";
-		for (const [, entry] of this._chipRenderers) entry.dropTarget.setTargetZones(isVertical ? ["top"] : ["left"]);
+		for (const [, entry] of this._chipRenderers) {
+			const zones = isVertical ? ["top"] : ["left"];
+			entry.dropTarget.setTargetZones(zones);
+			entry.pointerDropTarget.setTargetZones(zones);
+		}
 	}
-	snapshotChipWidths() {
-		const widths = /* @__PURE__ */ new Map();
-		for (const [groupId, entry] of this._chipRenderers) widths.set(groupId, entry.chip.element.getBoundingClientRect().width);
-		return widths;
+	/**
+	* Drop any overlay the chips are showing. A group move is committed by a
+	* capturing listener on the tabs list that stops the event, so the chip
+	* target under the cursor never sees the drop that would clear its own.
+	*/
+	clearChipDropOverlays() {
+		for (const [, entry] of this._chipRenderers) {
+			var _entry$dropTarget, _entry$pointerDropTar;
+			(_entry$dropTarget = entry.dropTarget) === null || _entry$dropTarget === void 0 || _entry$dropTarget.clearOverlay();
+			(_entry$pointerDropTar = entry.pointerDropTarget) === null || _entry$pointerDropTar === void 0 || _entry$pointerDropTar.clearOverlay();
+		}
+	}
+	/** Each chip's extent along the strip's main axis: width for a horizontal
+	*  header, height for a vertical one. */
+	snapshotChipSizes() {
+		const isVertical = this._ctx.getDirection() === "vertical";
+		const sizes = /* @__PURE__ */ new Map();
+		for (const [groupId, entry] of this._chipRenderers) {
+			const rect = entry.chip.element.getBoundingClientRect();
+			sizes.set(groupId, isVertical ? rect.height : rect.width);
+		}
+		return sizes;
 	}
 	positionUnderlines() {
 		var _this$_indicator2;
@@ -7565,9 +8070,8 @@ var TabGroupManager = class {
 		};
 		if (chip instanceof TabGroupChip) disposables.push(chip.onContextMenu(onContextMenu));
 		else disposables.push(new LongPressDetector(chip.element, { onLongPress: onContextMenu }), addDisposableListener(chip.element, "contextmenu", onContextMenu));
-		const isVertical = this._ctx.getDirection() === "vertical";
-		const dropTarget = new Droptarget(chip.element, {
-			acceptedTargetZones: isVertical ? ["top"] : ["left"],
+		const dropTargetOptions = {
+			acceptedTargetZones: this._ctx.getDirection() === "vertical" ? ["top"] : ["left"],
 			overlayModel: { activationSize: {
 				value: 100,
 				type: "percentage"
@@ -7578,15 +8082,18 @@ var TabGroupManager = class {
 				const data = getPanelData();
 				if (this._ctx.accessor.id === (data === null || data === void 0 ? void 0 : data.viewId)) {
 					var _this$_ctx$accessor$o3;
-					if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth") return false;
+					if (((_this$_ctx$accessor$o3 = this._ctx.accessor.options.theme) === null || _this$_ctx$accessor$o3 === void 0 ? void 0 : _this$_ctx$accessor$o3.tabAnimation) === "smooth" && !data.tabGroupId) return false;
 					return true;
 				}
 				return this._ctx.group.model.canDisplayOverlay(event, position, "tab");
 			}
-		});
-		disposables.push(dropTarget, dropTarget.onDrop((event) => {
+		};
+		const dropTarget = html5Backend.createDropTarget(chip.element, dropTargetOptions);
+		const pointerDropTarget = pointerBackend.createDropTarget(chip.element, dropTargetOptions);
+		const onDrop = (event) => {
 			this._callbacks.onChipDrop(tabGroup, event);
-		}));
+		};
+		disposables.push(dropTarget, dropTarget.onDrop(onDrop), pointerDropTarget, pointerDropTarget.onDrop(onDrop));
 		const disposable = new CompositeDisposable(...disposables);
 		this._chipRenderers.set(tabGroup.id, {
 			chip,
@@ -7594,7 +8101,8 @@ var TabGroupManager = class {
 			pointerDragSource: dragSources.pointerDragSource,
 			dragSourcesDisposable: dragSources.disposable,
 			disposable,
-			dropTarget
+			dropTarget,
+			pointerDropTarget
 		});
 		if (tabGroup.collapsed) this._skipNextCollapseAnimation = true;
 	}
@@ -7710,6 +8218,22 @@ var TabGroupManager = class {
 //#endregion
 //#region src/dockview/components/titlebar/tabReorderController.ts
 /**
+* Main-axis extent of a rect. Tabs flow along x in a horizontal header
+* (top/bottom) and along y in a vertical one (the left/right edge groups),
+* so the reorder math reads every size through this.
+*/
+function mainAxisSize(rect, direction) {
+	return direction === "vertical" ? rect.height : rect.width;
+}
+/** Leading edge of a rect along the main axis. */
+function mainAxisStart(rect, direction) {
+	return direction === "vertical" ? rect.top : rect.left;
+}
+/** A cursor position projected onto the main axis. */
+function mainAxisCursor(event, direction) {
+	return direction === "vertical" ? event.clientY : event.clientX;
+}
+/**
 * Tab drag-reorder + FLIP animation subsystem extracted from `Tabs`. The DOM
 * event wiring remains in `Tabs` and delegates the reorder/animation logic to
 * this controller. All access back into `Tabs` goes through
@@ -7804,14 +8328,30 @@ var TabReorderController = class extends CompositeDisposable {
 		for (const tab of this._tabs) positions.set(tab.value.panel.id, tab.value.element.getBoundingClientRect());
 		return positions;
 	}
-	getAverageTabWidth() {
+	/** Main-axis extent of a rect for this header's orientation. */
+	_mainAxisSize(rect) {
+		return mainAxisSize(rect, this._direction);
+	}
+	/** Main-axis leading edge of a rect for this header's orientation. */
+	_mainAxisStart(rect) {
+		return mainAxisStart(rect, this._direction);
+	}
+	/** The cursor coordinate along the main axis. */
+	_mainAxisCoord(clientX, clientY) {
+		return mainAxisCursor({
+			clientX,
+			clientY
+		}, this._direction);
+	}
+	/** The margin that opens the insertion gap. It must run along the main
+	*  axis, so a vertical header pushes tabs down rather than sideways. */
+	get _gapMarginProperty() {
+		return this._direction === "vertical" ? "margin-top" : "margin-left";
+	}
+	getAverageTabSize() {
 		if (this._tabs.length === 0) return 0;
-		const isVertical = this._direction === "vertical";
 		let total = 0;
-		for (const tab of this._tabs) {
-			const rect = tab.value.element.getBoundingClientRect();
-			total += isVertical ? rect.height : rect.width;
-		}
+		for (const tab of this._tabs) total += this._mainAxisSize(tab.value.element.getBoundingClientRect());
 		return total / this._tabs.length;
 	}
 	/**
@@ -7821,8 +8361,7 @@ var TabReorderController = class extends CompositeDisposable {
 	* `processDragOver` / `processDragLeave` helpers.
 	*/
 	handlePointerDragMove(clientX, clientY) {
-		var _this$_tabsList$owner;
-		const elAtPoint = ((_this$_tabsList$owner = this._tabsList.ownerDocument) !== null && _this$_tabsList$owner !== void 0 ? _this$_tabsList$owner : document).elementFromPoint(clientX, clientY);
+		const elAtPoint = getHitTestRoot(this._tabsList).elementFromPoint(clientX, clientY);
 		if (!(!!elAtPoint && (this._tabsList.contains(elAtPoint) || !!this._extendedDropZone && this._extendedDropZone.contains(elAtPoint)))) {
 			if (this._pointerInsideTabsList) {
 				this._pointerInsideTabsList = false;
@@ -7839,13 +8378,19 @@ var TabReorderController = class extends CompositeDisposable {
 	* dragover bridge may have installed.
 	*/
 	handlePointerDragEnd(e) {
-		if (e && this._animState && this._animState.sourceIndex !== -1 && !this._animState.sourceTabGroupId && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) this.commitPointerReorder(e.pointerEvent);
+		if (e && this._animState && this._animState.sourceIndex !== -1 && this._animState.currentInsertionIndex !== null && this.isPointInsideTabsList(e.clientX, e.clientY)) {
+			const sourceTabGroupId = this._animState.sourceTabGroupId;
+			if (sourceTabGroupId) {
+				const insertionIndex = this._animState.currentInsertionIndex;
+				this._animState = null;
+				this.commitGroupMove(sourceTabGroupId, insertionIndex);
+			} else this.commitPointerReorder(e.pointerEvent);
+		}
 		this._pointerInsideTabsList = false;
 		this.resetDragAnimation();
 	}
 	isPointInsideTabsList(clientX, clientY) {
-		var _this$_tabsList$owner2;
-		const el = ((_this$_tabsList$owner2 = this._tabsList.ownerDocument) !== null && _this$_tabsList$owner2 !== void 0 ? _this$_tabsList$owner2 : document).elementFromPoint(clientX, clientY);
+		const el = getHitTestRoot(this._tabsList).elementFromPoint(clientX, clientY);
 		return !!el && this._tabsList.contains(el);
 	}
 	/** Commit a smooth-mode intra-group reorder from the current insertion
@@ -7909,46 +8454,46 @@ var TabReorderController = class extends CompositeDisposable {
 		const data = getPanelData();
 		if (((_this$accessor$option = this.accessor.options.theme) === null || _this$accessor$option === void 0 ? void 0 : _this$accessor$option.tabAnimation) === "default" && !(data === null || data === void 0 ? void 0 : data.tabGroupId)) return false;
 		if (!data || !(data.panelId || data.tabGroupId) || data.groupId === this.group.id) return false;
-		const avgWidth = this.getAverageTabWidth();
-		this._animState = data.tabGroupId ? this._makeGroupDragAnimState(data, avgWidth) : this._makeTabDragAnimState(data, avgWidth);
+		const avgSize = this.getAverageTabSize();
+		this._animState = data.tabGroupId ? this._makeGroupDragAnimState(data, avgSize) : this._makeTabDragAnimState(data, avgSize);
 		return true;
 	}
 	/** Anim state for an external group-chip drag (gap sized to the group). */
-	_makeGroupDragAnimState(data, avgWidth) {
+	_makeGroupDragAnimState(data, avgSize) {
 		var _sourceTg$panelIds$le;
 		const sourceGroup = this.accessor.getPanel(data.groupId);
 		const sourceTg = sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.getTabGroups().find((tg) => tg.id === data.tabGroupId);
-		const groupGapWidth = avgWidth * ((_sourceTg$panelIds$le = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _sourceTg$panelIds$le !== void 0 ? _sourceTg$panelIds$le : 1) + avgWidth;
+		const groupGapSize = avgSize * ((_sourceTg$panelIds$le = sourceTg === null || sourceTg === void 0 ? void 0 : sourceTg.panelIds.length) !== null && _sourceTg$panelIds$le !== void 0 ? _sourceTg$panelIds$le : 1) + avgSize;
 		return {
 			sourceTabId: "",
 			sourceIndex: -1,
 			tabPositions: this.snapshotTabPositions(),
-			chipPositions: this._tabGroupManager.snapshotChipWidths(),
+			chipSizes: this._tabGroupManager.snapshotChipSizes(),
 			currentInsertionIndex: null,
 			targetTabGroupId: null,
 			sourceTabGroupId: data.tabGroupId,
 			sourceGroupPanelIds: sourceTg ? new Set(sourceTg.panelIds) : /* @__PURE__ */ new Set(),
-			sourceChipWidth: avgWidth,
-			cursorOffsetFromDragLeft: groupGapWidth / 2,
-			sourceGapWidth: groupGapWidth,
-			containerLeft: this._tabsList.getBoundingClientRect().left
+			sourceChipSize: avgSize,
+			cursorOffsetFromDragStart: groupGapSize / 2,
+			sourceGapSize: groupGapSize,
+			containerStart: this._mainAxisStart(this._tabsList.getBoundingClientRect())
 		};
 	}
 	/** Anim state for an external single-tab drag. */
-	_makeTabDragAnimState(data, avgWidth) {
+	_makeTabDragAnimState(data, avgSize) {
 		return {
 			sourceTabId: data.panelId,
 			sourceIndex: -1,
 			tabPositions: this.snapshotTabPositions(),
-			chipPositions: this._tabGroupManager.snapshotChipWidths(),
+			chipSizes: this._tabGroupManager.snapshotChipSizes(),
 			currentInsertionIndex: null,
 			targetTabGroupId: null,
 			sourceTabGroupId: null,
 			sourceGroupPanelIds: null,
-			sourceChipWidth: 0,
-			cursorOffsetFromDragLeft: avgWidth / 2,
-			sourceGapWidth: avgWidth,
-			containerLeft: this._tabsList.getBoundingClientRect().left
+			sourceChipSize: 0,
+			cursorOffsetFromDragStart: avgSize / 2,
+			sourceGapSize: avgSize,
+			containerStart: this._mainAxisStart(this._tabsList.getBoundingClientRect())
 		};
 	}
 	/**
@@ -7991,19 +8536,19 @@ var TabReorderController = class extends CompositeDisposable {
 		container === null || container === void 0 || (_container$model = container.model) === null || _container$model === void 0 || _container$model.clear();
 	}
 	handleDragOver(event) {
-		var _this$accessor$option2;
+		var _event$clientY2, _this$accessor$option2;
 		if (!this._animState) return;
 		if (this._wrapMode && !this._animState.sourceTabGroupId) {
 			var _event$clientY;
 			this.handleWrappedDragOver(event.clientX, (_event$clientY = event.clientY) !== null && _event$clientY !== void 0 ? _event$clientY : 0);
 			return;
 		}
-		const mouseX = event.clientX;
+		const mousePos = this._mainAxisCoord(event.clientX, (_event$clientY2 = event.clientY) !== null && _event$clientY2 !== void 0 ? _event$clientY2 : 0);
 		const firstPanelToGroup = this._buildFirstPanelToGroupMap();
-		let insertionIndex = this._computeDragOverInsertionIndex(mouseX, firstPanelToGroup);
+		let insertionIndex = this._computeDragOverInsertionIndex(mousePos, firstPanelToGroup);
 		let targetTabGroupId = null;
 		if (insertionIndex !== null && this._tabGroupManager.chipRenderers.size > 0) {
-			const resolved = this._resolveInsertionAgainstTabGroups(mouseX, insertionIndex, firstPanelToGroup);
+			const resolved = this._resolveInsertionAgainstTabGroups(mousePos, insertionIndex, firstPanelToGroup);
 			insertionIndex = resolved.insertionIndex;
 			targetTabGroupId = resolved.targetTabGroupId;
 		}
@@ -8027,14 +8572,15 @@ var TabReorderController = class extends CompositeDisposable {
 		return firstPanelToGroup;
 	}
 	/**
-	* Walk the tabs left-to-right by their original widths and return the
-	* insertion slot for the drag image's left edge (null if no slot fits).
+	* Walk the tabs in flow order by their original main-axis sizes and return
+	* the insertion slot for the drag image's leading edge (null if no slot
+	* fits).
 	*/
-	_computeDragOverInsertionIndex(mouseX, firstPanelToGroup) {
+	_computeDragOverInsertionIndex(mousePos, firstPanelToGroup) {
 		const animState = this._animState;
 		const sourceGroupPanelIds = animState.sourceGroupPanelIds;
-		const availableSpace = mouseX - animState.cursorOffsetFromDragLeft - animState.containerLeft;
-		let accWidth = 0;
+		const availableSpace = mousePos - animState.cursorOffsetFromDragStart - animState.containerStart;
+		let accSize = 0;
 		let insertionIndex = null;
 		for (let i = 0; i < this._tabs.length; i++) {
 			const tab = this._tabs[i].value;
@@ -8042,19 +8588,19 @@ var TabReorderController = class extends CompositeDisposable {
 			if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(tab.panel.id)) continue;
 			const groupId = firstPanelToGroup.get(tab.panel.id);
 			if (groupId) {
-				var _animState$chipPositi;
-				const chipWidth = (_animState$chipPositi = animState.chipPositions.get(groupId)) !== null && _animState$chipPositi !== void 0 ? _animState$chipPositi : 0;
-				if (accWidth + chipWidth > availableSpace) {
+				var _animState$chipSizes$;
+				const chipSize = (_animState$chipSizes$ = animState.chipSizes.get(groupId)) !== null && _animState$chipSizes$ !== void 0 ? _animState$chipSizes$ : 0;
+				if (accSize + chipSize > availableSpace) {
 					var _insertionIndex;
 					(_insertionIndex = insertionIndex) !== null && _insertionIndex !== void 0 || (insertionIndex = i);
 					break;
 				}
-				accWidth += chipWidth;
+				accSize += chipSize;
 			}
 			const origRect = animState.tabPositions.get(tab.panel.id);
-			const tabWidth = origRect ? origRect.width : tab.element.getBoundingClientRect().width;
-			if (accWidth + tabWidth / 2 <= availableSpace) {
-				accWidth += tabWidth;
+			const tabSize = this._mainAxisSize(origRect !== null && origRect !== void 0 ? origRect : tab.element.getBoundingClientRect());
+			if (accSize + tabSize / 2 <= availableSpace) {
+				accSize += tabSize;
 				insertionIndex = i + 1;
 			} else {
 				var _insertionIndex2;
@@ -8065,11 +8611,12 @@ var TabReorderController = class extends CompositeDisposable {
 		return insertionIndex;
 	}
 	/**
-	* Rebuild the accumulated original width up to `insertionIndex`, walking the
-	* tabs exactly the way the accumulation loop does, so callers know the
-	* original right edge of the chip (if any) that precedes the insertion slot.
+	* Rebuild the accumulated original main-axis size up to `insertionIndex`,
+	* walking the tabs exactly the way the accumulation loop does, so callers
+	* know the original trailing edge of the chip (if any) that precedes the
+	* insertion slot.
 	*/
-	_accumulatedWidthUpTo(insertionIndex, firstPanelToGroup) {
+	_accumulatedSizeUpTo(insertionIndex, firstPanelToGroup) {
 		const animState = this._animState;
 		const sourceGroupPanelIds = animState.sourceGroupPanelIds;
 		let accUpTo = 0;
@@ -8080,11 +8627,11 @@ var TabReorderController = class extends CompositeDisposable {
 			if (i >= insertionIndex) break;
 			const gid = firstPanelToGroup.get(tab.panel.id);
 			if (gid) {
-				var _animState$chipPositi2;
-				accUpTo += (_animState$chipPositi2 = animState.chipPositions.get(gid)) !== null && _animState$chipPositi2 !== void 0 ? _animState$chipPositi2 : 0;
+				var _animState$chipSizes$2;
+				accUpTo += (_animState$chipSizes$2 = animState.chipSizes.get(gid)) !== null && _animState$chipSizes$2 !== void 0 ? _animState$chipSizes$2 : 0;
 			}
 			const origRect = animState.tabPositions.get(tab.panel.id);
-			accUpTo += origRect ? origRect.width : tab.element.getBoundingClientRect().width;
+			accUpTo += this._mainAxisSize(origRect !== null && origRect !== void 0 ? origRect : tab.element.getBoundingClientRect());
 		}
 		return accUpTo;
 	}
@@ -8092,11 +8639,11 @@ var TabReorderController = class extends CompositeDisposable {
 	* Given a raw insertion index, snap it out of / into any tab group it falls
 	* within and resolve the target group (if the drop should merge into one).
 	*/
-	_resolveInsertionAgainstTabGroups(mouseX, insertionIndex, firstPanelToGroup) {
+	_resolveInsertionAgainstTabGroups(mousePos, insertionIndex, firstPanelToGroup) {
 		const isGroupDrag = !!this._animState.sourceTabGroupId;
-		const accUpTo = this._accumulatedWidthUpTo(insertionIndex, firstPanelToGroup);
+		const accUpTo = this._accumulatedSizeUpTo(insertionIndex, firstPanelToGroup);
 		for (const tg of this.group.model.getTabGroups()) {
-			const resolved = this._evaluateTabGroupForInsertion(tg, mouseX, insertionIndex, accUpTo, isGroupDrag);
+			const resolved = this._evaluateTabGroupForInsertion(tg, mousePos, insertionIndex, accUpTo, isGroupDrag);
 			if (resolved) return resolved;
 		}
 		return {
@@ -8110,7 +8657,7 @@ var TabReorderController = class extends CompositeDisposable {
 	* group governs the slot (the caller stops iterating), or `null` when the
 	* group is irrelevant and the caller should keep looking.
 	*/
-	_evaluateTabGroupForInsertion(tg, mouseX, insertionIndex, accUpTo, isGroupDrag) {
+	_evaluateTabGroupForInsertion(tg, mousePos, insertionIndex, accUpTo, isGroupDrag) {
 		const range = this._resolveGroupRange(tg);
 		if (!range) return null;
 		const { firstIdx, lastIdx } = range;
@@ -8118,7 +8665,7 @@ var TabReorderController = class extends CompositeDisposable {
 		const isJustBeforeGroup = !isInsideRange && insertionIndex === firstIdx - 1;
 		if (!isInsideRange && !isJustBeforeGroup) return null;
 		if (isGroupDrag) return this._resolveGroupDragTarget(insertionIndex, firstIdx, lastIdx, isInsideRange);
-		return this._resolveTabDragTarget(tg, mouseX, insertionIndex, accUpTo, firstIdx, isJustBeforeGroup);
+		return this._resolveTabDragTarget(tg, mousePos, insertionIndex, accUpTo, firstIdx, isJustBeforeGroup);
 	}
 	/**
 	* The index range this group occupies in the live tab list, excluding the
@@ -8153,13 +8700,13 @@ var TabReorderController = class extends CompositeDisposable {
 	}
 	/** Insertion target for a single-tab drag against a group: decide whether
 	*  the drop merges into the group based on the cursor vs the chip edge. */
-	_resolveTabDragTarget(tg, mouseX, insertionIndex, accUpTo, firstIdx, isJustBeforeGroup) {
-		var _animState$chipPositi3;
+	_resolveTabDragTarget(tg, mousePos, insertionIndex, accUpTo, firstIdx, isJustBeforeGroup) {
+		var _animState$chipSizes$3;
 		const animState = this._animState;
-		const chipWidth = (_animState$chipPositi3 = animState.chipPositions.get(tg.id)) !== null && _animState$chipPositi3 !== void 0 ? _animState$chipPositi3 : 0;
+		const chipSize = (_animState$chipSizes$3 = animState.chipSizes.get(tg.id)) !== null && _animState$chipSizes$3 !== void 0 ? _animState$chipSizes$3 : 0;
 		if (isJustBeforeGroup) {
 			if (!this._onlySourceBetween(insertionIndex, firstIdx)) return null;
-			if (mouseX >= (tg.collapsed ? animState.containerLeft + accUpTo + chipWidth / 2 : animState.containerLeft + accUpTo + chipWidth)) return {
+			if (mousePos >= (tg.collapsed ? animState.containerStart + accUpTo + chipSize / 2 : animState.containerStart + accUpTo + chipSize)) return {
 				insertionIndex: firstIdx,
 				targetTabGroupId: tg.id
 			};
@@ -8168,10 +8715,10 @@ var TabReorderController = class extends CompositeDisposable {
 				targetTabGroupId: null
 			};
 		}
-		const chipOriginalRight = animState.containerLeft + accUpTo + chipWidth;
+		const chipOriginalEnd = animState.containerStart + accUpTo + chipSize;
 		if (insertionIndex === firstIdx) return {
 			insertionIndex,
-			targetTabGroupId: mouseX >= chipOriginalRight ? tg.id : null
+			targetTabGroupId: mousePos >= chipOriginalEnd ? tg.id : null
 		};
 		return {
 			insertionIndex,
@@ -8334,17 +8881,17 @@ var TabReorderController = class extends CompositeDisposable {
 		}
 		if (this._pendingCollapse) return;
 		const insertionIndex = this._animState.currentInsertionIndex;
-		const gapWidth = this._computeGapWidth();
+		const gapSize = this._computeGapSize();
 		const chipToShift = this._computeChipToShift(insertionIndex);
-		this._applyGapMargins(insertionIndex, gapWidth, chipToShift, skipTransition);
+		this._applyGapMargins(insertionIndex, gapSize, chipToShift, skipTransition);
 	}
-	/** Gap width for the current drag: the whole group's span for a group
-	*  drag, otherwise the source tab's own width. */
-	_computeGapWidth() {
+	/** Gap size for the current drag: the whole group's span for a group
+	*  drag, otherwise the source tab's own main-axis size. */
+	_computeGapSize() {
 		const animState = this._animState;
-		if (animState.sourceTabGroupId && animState.sourceGroupPanelIds) return animState.sourceGapWidth;
+		if (animState.sourceTabGroupId && animState.sourceGroupPanelIds) return animState.sourceGapSize;
 		const sourceRect = animState.tabPositions.get(animState.sourceTabId);
-		return sourceRect ? sourceRect.width : this.getAverageTabWidth();
+		return sourceRect ? this._mainAxisSize(sourceRect) : this.getAverageTabSize();
 	}
 	/**
 	* When the insertion lands at or before a group's first tab, the chip is
@@ -8388,7 +8935,7 @@ var TabReorderController = class extends CompositeDisposable {
 	}
 	/** Reset non-source chip margins, then apply the gap margin to the chip or
 	*  the first tab at/after the insertion index. */
-	_applyGapMargins(insertionIndex, gapWidth, chipToShift, skipTransition) {
+	_applyGapMargins(insertionIndex, gapSize, chipToShift, skipTransition) {
 		const animState = this._animState;
 		const sourceGroupPanelIds = animState.sourceGroupPanelIds;
 		let gapApplied = false;
@@ -8397,7 +8944,7 @@ var TabReorderController = class extends CompositeDisposable {
 			this._clearMargin(entry.chip.element, skipTransition);
 		}
 		if (chipToShift) {
-			this._setMargin(chipToShift, `${gapWidth}px`, skipTransition);
+			this._setMargin(chipToShift, `${gapSize}px`, skipTransition);
 			gapApplied = true;
 		}
 		for (let i = 0; i < this._tabs.length; i++) {
@@ -8405,7 +8952,7 @@ var TabReorderController = class extends CompositeDisposable {
 			if (tab.panel.id === animState.sourceTabId) continue;
 			if (sourceGroupPanelIds === null || sourceGroupPanelIds === void 0 ? void 0 : sourceGroupPanelIds.has(tab.panel.id)) continue;
 			if (!gapApplied && i >= insertionIndex) {
-				this._setMargin(tab.element, `${gapWidth}px`, skipTransition);
+				this._setMargin(tab.element, `${gapSize}px`, skipTransition);
 				gapApplied = true;
 			} else this._clearMargin(tab.element, skipTransition);
 		}
@@ -8415,31 +8962,33 @@ var TabReorderController = class extends CompositeDisposable {
 	_shiftingClass(el) {
 		return el.classList.contains("dv-tab-group-chip") ? "dv-tab-group-chip--shifting" : "dv-tab--shifting";
 	}
-	/** Apply a margin-left value to an element, optionally bypassing CSS
+	/** Apply the main-axis gap margin to an element, optionally bypassing CSS
 	*  transitions for instant positioning. */
 	_setMargin(el, value, skipTransition) {
+		const property = this._gapMarginProperty;
 		if (skipTransition) {
 			el.style.transition = "none";
-			el.style.marginLeft = value;
+			el.style.setProperty(property, value);
 			el.getBoundingClientRect();
 			el.style.removeProperty("transition");
-		} else el.style.marginLeft = value;
+		} else el.style.setProperty(property, value);
 		toggleClass(el, this._shiftingClass(el), true);
 	}
 	/** Clear an element's gap margin, animating it back to zero unless
 	*  transitions are skipped. */
 	_clearMargin(el, skipTransition) {
 		const cls = this._shiftingClass(el);
+		const property = this._gapMarginProperty;
 		const prev = this._pendingMarginCleanups.get(el);
 		if (prev) prev();
-		if (skipTransition || !el.style.marginLeft) {
-			el.style.removeProperty("margin-left");
+		if (skipTransition || !el.style.getPropertyValue(property)) {
+			el.style.removeProperty(property);
 			toggleClass(el, cls, false);
 		} else {
-			el.style.marginLeft = "0px";
+			el.style.setProperty(property, "0px");
 			toggleClass(el, cls, true);
 			const onEnd = () => {
-				el.style.removeProperty("margin-left");
+				el.style.removeProperty(property);
 				toggleClass(el, cls, false);
 				el.removeEventListener("transitionend", onEnd);
 				clearTimeout(fallbackTimer);
@@ -8464,6 +9013,7 @@ var TabReorderController = class extends CompositeDisposable {
 		}
 		for (const [, entry] of this._tabGroupManager.chipRenderers) {
 			entry.chip.element.style.removeProperty("margin-left");
+			entry.chip.element.style.removeProperty("margin-top");
 			toggleClass(entry.chip.element, "dv-tab-group-chip--shifting", false);
 		}
 		this._tabGroupManager.positionUnderlines();
@@ -8475,6 +9025,7 @@ var TabReorderController = class extends CompositeDisposable {
 	commitGroupMove(sourceTabGroupId, insertionIndex) {
 		const data = getPanelData();
 		this._tabGroupManager.disposeChipDrag(sourceTabGroupId);
+		this._tabGroupManager.clearChipDropOverlays();
 		if (this.group.model.getTabGroups().some((tg) => tg.id === sourceTabGroupId)) {
 			var _this$accessor$option3;
 			if (((_this$accessor$option3 = this.accessor.options.theme) === null || _this$accessor$option3 === void 0 ? void 0 : _this$accessor$option3.tabAnimation) === "smooth") {
@@ -8832,7 +9383,16 @@ var Tabs = class extends CompositeDisposable {
 			}
 		});
 		this._reorder = new TabReorderController(this);
-		this.addDisposables(this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
+		const tabsListPointerTarget = pointerBackend.createDropTarget(this._tabsList, {
+			acceptedTargetZones: ["center"],
+			canDisplayOverlay: () => false,
+			isHitTestTransparent: () => {
+				const data = getPanelData();
+				if ((data === null || data === void 0 ? void 0 : data.viewId) !== this.accessor.id || data.groupId !== this.group.id) return true;
+				return data.panelId === null && !data.tabGroupId;
+			}
+		});
+		this.addDisposables(tabsListPointerTarget, this._onOverflowTabsChange, this._observerDisposable, this._pointerActivation, this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._reorder, PointerDragController.getInstance().onDragEnd((e) => {
 			this._reorder.handlePointerDragEnd(e);
 		}), PointerDragController.getInstance().onDragMove((e) => {
 			this._reorder.handlePointerDragMove(e.clientX, e.clientY);
@@ -9048,21 +9608,21 @@ var Tabs = class extends CompositeDisposable {
 					panel
 				});
 				if (((_this$accessor$option2 = this.accessor.options.theme) === null || _this$accessor$option2 === void 0 ? void 0 : _this$accessor$option2.tabAnimation) === "smooth") {
-					const tabWidth = tab.element.getBoundingClientRect().width;
+					const tabSize = mainAxisSize(tab.element.getBoundingClientRect(), this._direction);
 					const sourceIndex = this._tabs.findIndex((x) => x.value === tab);
 					this._animState = {
 						sourceTabId: panel.id,
 						sourceIndex,
 						tabPositions: this.snapshotTabPositions(),
-						chipPositions: this._tabGroupManager.snapshotChipWidths(),
+						chipSizes: this._tabGroupManager.snapshotChipSizes(),
 						currentInsertionIndex: null,
 						targetTabGroupId: null,
 						sourceTabGroupId: null,
 						sourceGroupPanelIds: null,
-						sourceChipWidth: 0,
-						cursorOffsetFromDragLeft: tabWidth / 2,
-						sourceGapWidth: tabWidth,
-						containerLeft: this._tabsList.getBoundingClientRect().left
+						sourceChipSize: 0,
+						cursorOffsetFromDragStart: tabSize / 2,
+						sourceGapSize: tabSize,
+						containerStart: mainAxisStart(this._tabsList.getBoundingClientRect(), this._direction)
 					};
 					this._pendingCollapse = true;
 					requestAnimationFrame(() => {
@@ -9158,7 +9718,7 @@ var Tabs = class extends CompositeDisposable {
 		this._tabGroupManager.positionAllChips();
 		if (this._animState) {
 			this._animState.tabPositions = this.snapshotTabPositions();
-			this._animState.chipPositions = this._tabGroupManager.snapshotChipWidths();
+			this._animState.chipSizes = this._tabGroupManager.snapshotChipSizes();
 			this.applyDragOverTransforms();
 		}
 	}
@@ -9180,7 +9740,7 @@ var Tabs = class extends CompositeDisposable {
 		}
 		if (this._animState) {
 			this._animState.tabPositions = this.snapshotTabPositions();
-			this._animState.chipPositions = this._tabGroupManager.snapshotChipWidths();
+			this._animState.chipSizes = this._tabGroupManager.snapshotChipSizes();
 			this.applyDragOverTransforms();
 		}
 	}
@@ -9258,24 +9818,24 @@ var Tabs = class extends CompositeDisposable {
 		const firstPanelId = tabGroup.panelIds[0];
 		const firstIdx = firstPanelId ? this._tabs.findIndex((t) => t.value.panel.id === firstPanelId) : -1;
 		const chipRect = chip.element.getBoundingClientRect();
-		let groupGapWidth = chipRect.width;
+		let groupGapSize = mainAxisSize(chipRect, this._direction);
 		for (const pid of tabGroup.panelIds) {
 			const tabEntry = this._tabMap.get(pid);
-			if (tabEntry) groupGapWidth += tabEntry.value.element.getBoundingClientRect().width;
+			if (tabEntry) groupGapSize += mainAxisSize(tabEntry.value.element.getBoundingClientRect(), this._direction);
 		}
 		this._animState = {
 			sourceTabId: "",
 			sourceIndex: firstIdx,
 			tabPositions: this.snapshotTabPositions(),
-			chipPositions: this._tabGroupManager.snapshotChipWidths(),
+			chipSizes: this._tabGroupManager.snapshotChipSizes(),
 			currentInsertionIndex: null,
 			targetTabGroupId: null,
 			sourceTabGroupId: tabGroup.id,
 			sourceGroupPanelIds: new Set(tabGroup.panelIds),
-			sourceChipWidth: chipRect.width,
-			cursorOffsetFromDragLeft: event.clientX - chipRect.left,
-			sourceGapWidth: groupGapWidth,
-			containerLeft: this._tabsList.getBoundingClientRect().left
+			sourceChipSize: mainAxisSize(chipRect, this._direction),
+			cursorOffsetFromDragStart: mainAxisCursor(event, this._direction) - mainAxisStart(chipRect, this._direction),
+			sourceGapSize: groupGapSize,
+			containerStart: mainAxisStart(this._tabsList.getBoundingClientRect(), this._direction)
 		};
 		if (((_this$accessor$option4 = this.accessor.options.theme) === null || _this$accessor$option4 === void 0 ? void 0 : _this$accessor$option4.tabAnimation) !== "smooth") return;
 		const groupPanelIds = new Set(tabGroup.panelIds);
@@ -9308,6 +9868,10 @@ var Tabs = class extends CompositeDisposable {
 	* (when the source tab is currently to the left of the target slot, its
 	* removal shifts the insertion index down by one). Always clears
 	* `targetTabGroupId` so the dropped tab lands outside the group.
+	*
+	* A chip dropped on a chip is a group move: the panel path would route it
+	* through the cross-group machinery, which rebuilds the tab group under a
+	* new id.
 	*/
 	_handleChipDrop(tabGroup, event) {
 		const firstPanelId = tabGroup.panelIds[0];
@@ -9315,6 +9879,14 @@ var Tabs = class extends CompositeDisposable {
 		const insertionIndex = this._tabs.findIndex((x) => x.value.panel.id === firstPanelId);
 		if (insertionIndex === -1) return;
 		const data = getPanelData();
+		if (data === null || data === void 0 ? void 0 : data.tabGroupId) {
+			var _animState$currentIns2;
+			const animState = this._animState;
+			this._animState = null;
+			this._pendingCollapse = false;
+			this._commitGroupMove(data.tabGroupId, (_animState$currentIns2 = animState === null || animState === void 0 ? void 0 : animState.currentInsertionIndex) !== null && _animState$currentIns2 !== void 0 ? _animState$currentIns2 : insertionIndex);
+			return;
+		}
 		const sourceIndex = (data === null || data === void 0 ? void 0 : data.groupId) === this.group.id && (data === null || data === void 0 ? void 0 : data.panelId) ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId) : -1;
 		const adjustedIndex = insertionIndex - (sourceIndex !== -1 && sourceIndex < insertionIndex ? 1 : 0);
 		this._onDrop.fire({
@@ -10021,8 +10593,10 @@ var DockviewGroupPanelModel = class extends CompositeDisposable {
 		return this.tabsContainer.getPanelForTab(element);
 	}
 	get isContentFocused() {
-		if (!document.activeElement) return false;
-		return isAncestor(document.activeElement, this.contentContainer.element);
+		const element = this.contentContainer.element;
+		const activeElement = getActiveElement(element);
+		if (!activeElement) return false;
+		return isAncestor(activeElement, element);
 	}
 	get headerPosition() {
 		var _this$_headerPosition;
@@ -12933,6 +13507,12 @@ var PopoutWindowService = class {
 		observer.observe(gridview.element);
 		return { dispose: () => observer.disconnect() };
 	}
+	/**
+	* Runs `work` after `delayMs`, resolving once it has finished. Work that
+	* returns a promise is awaited, so a caller holding
+	* `restorationPromise` waits for the popout window itself rather than
+	* only for the timer that starts it.
+	*/
 	scheduleRestoration(delayMs, work, onCancel) {
 		return new Promise((resolve) => {
 			const cleanup = () => {
@@ -12947,8 +13527,7 @@ var PopoutWindowService = class {
 					resolve();
 					return;
 				}
-				work();
-				resolve();
+				Promise.resolve(work()).then(() => resolve(), () => resolve());
 			}, delayMs);
 			this._restorationCleanups.add(cleanup);
 		});
@@ -14206,188 +14785,6 @@ var OverlayRenderContainer = class extends CompositeDisposable {
 	}
 };
 
-//#endregion
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/asyncToGenerator.js
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-	try {
-		var i = n[a](c), u = i.value;
-	} catch (n) {
-		e(n);
-		return;
-	}
-	i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-	return function() {
-		var t = this, e = arguments;
-		return new Promise(function(r, o) {
-			var a = n.apply(t, e);
-			function _next(n) {
-				asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-			}
-			function _throw(n) {
-				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-			}
-			_next(void 0);
-		});
-	};
-}
-
-//#endregion
-//#region src/popoutWindow.ts
-/**
-* Reject popout URLs that aren't same-origin http(s). Blocks `javascript:`,
-* `data:`, `blob:`, `vbscript:`, and cross-origin URLs that would otherwise
-* execute in a context the browser still associates with the opener via
-* `window.opener`.
-*/
-function assertSameOriginPopoutUrl(url) {
-	let resolved;
-	try {
-		resolved = new URL(url, globalThis.location.href);
-	} catch (_unused) {
-		throw new Error(`dockview: invalid popout URL: ${url}`);
-	}
-	if (!(resolved.protocol === "http:" || resolved.protocol === "https:") || resolved.origin !== globalThis.location.origin) throw new Error(`dockview: popout URL must be same-origin http(s); got: ${url}`);
-}
-var PopoutWindow = class extends CompositeDisposable {
-	get window() {
-		var _this$_window$value, _this$_window;
-		return (_this$_window$value = (_this$_window = this._window) === null || _this$_window === void 0 ? void 0 : _this$_window.value) !== null && _this$_window$value !== void 0 ? _this$_window$value : null;
-	}
-	constructor(target, className, options) {
-		super();
-		this.target = target;
-		this.className = className;
-		this.options = options;
-		this._onWillClose = new Emitter();
-		this.onWillClose = this._onWillClose.event;
-		this._onDidClose = new Emitter();
-		this.onDidClose = this._onDidClose.event;
-		this._window = null;
-		this.addDisposables(this._onWillClose, this._onDidClose, { dispose: () => {
-			this.close();
-		} });
-	}
-	dimensions() {
-		if (!this._window) return null;
-		const left = this._window.value.screenX;
-		return {
-			top: this._window.value.screenY,
-			left,
-			width: this._window.value.innerWidth,
-			height: this._window.value.innerHeight
-		};
-	}
-	close() {
-		if (this._window) {
-			var _this$options$onWillC, _this$options;
-			this._onWillClose.fire();
-			(_this$options$onWillC = (_this$options = this.options).onWillClose) === null || _this$options$onWillC === void 0 || _this$options$onWillC.call(_this$options, {
-				id: this.target,
-				window: this._window.value
-			});
-			this._window.disposable.dispose();
-			this._window = null;
-			this._onDidClose.fire();
-		}
-	}
-	open() {
-		var _this = this;
-		return _asyncToGenerator(function* () {
-			var _this$options$onDidOp, _this$options2;
-			if (_this._window) throw new Error("instance of popout window is already open");
-			const url = `${_this.options.url}`;
-			assertSameOriginPopoutUrl(url);
-			const features = Object.entries({
-				top: _this.options.top,
-				left: _this.options.left,
-				width: _this.options.width,
-				height: _this.options.height
-			}).map(([key, value]) => `${key}=${value}`).join(",");
-			/**
-			* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/open
-			*/
-			const externalWindow = window.open(url, _this.target, features);
-			if (!externalWindow)
- /**
-			* Popup blocked
-			*/
-			return null;
-			const disposable = new CompositeDisposable();
-			_this._window = {
-				value: externalWindow,
-				disposable
-			};
-			disposable.addDisposables(Disposable.from(() => {
-				externalWindow.close();
-			}), addDisposableListener(globalThis.window, "beforeunload", () => {
-				/**
-				* before the main window closes we should close this popup too
-				* to be good citizens
-				*
-				* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
-				*/
-				_this.close();
-			}));
-			const container = _this.createPopoutWindowContainer();
-			if (_this.className) container.classList.add(_this.className);
-			(_this$options$onDidOp = (_this$options2 = _this.options).onDidOpen) === null || _this$options$onDidOp === void 0 || _this$options$onDidOp.call(_this$options2, {
-				id: _this.target,
-				window: externalWindow
-			});
-			return new Promise((resolve, reject) => {
-				externalWindow.addEventListener("unload", () => {});
-				/**
-				* `load` is the only event that resolves this promise with a
-				* container, so a window that goes away first would leave the
-				* caller awaiting a promise that never settles - and
-				* `addPopoutGroup` holds its layout transaction open until it does.
-				* Settle with `null` on close, the same signal a blocked popup
-				* gives and one the caller already handles. `resolve` after the
-				* fact is a no-op, so a `load` that arrived first still wins.
-				*/
-				disposable.addDisposables(_this.onWillClose(() => resolve(null)));
-				externalWindow.addEventListener("load", () => {
-					/**
-					* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
-					*/
-					try {
-						const externalDocument = externalWindow.document;
-						externalDocument.title = document.title;
-						externalDocument.body.appendChild(container);
-						addStyles(externalDocument, globalThis.document.styleSheets, { nonce: _this.options.nonce });
-						/**
-						* beforeunload must be registered after load for reasons I could not determine
-						* otherwise the beforeunload event will not fire when the window is closed
-						*/
-						addDisposableListener(externalWindow, "beforeunload", () => {
-							/**
-							* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
-							*/
-							_this.close();
-						});
-						resolve(container);
-					} catch (err) {
-						reject(err);
-					}
-				});
-			});
-		})();
-	}
-	createPopoutWindowContainer() {
-		const el = document.createElement("div");
-		el.classList.add("dv-popout-window");
-		el.id = "dv-popout-window";
-		el.style.position = "absolute";
-		el.style.width = "100%";
-		el.style.height = "100%";
-		el.style.top = "0px";
-		el.style.left = "0px";
-		return el;
-	}
-};
-
 //#endregion
 //#region src/dockview/strictEventsSequencing.ts
 var StrictEventsSequencing = class extends CompositeDisposable {
@@ -14431,8 +14828,8 @@ function isCoarsePrimaryInput(win) {
 * peeks): while it lives it watches a configurable set of dismiss signals
 * (Escape / extra keys, outside-pointerdown with an optional grace window,
 * window resize, focus moving outside) and calls `onDismiss`. Inside/outside is
-* decided by an `isInside` predicate (geometry) or a `contains` check against
-* `elements`. Dispose to detach every listener.
+* decided by an `isInside` predicate (geometry) or by checking the event's
+* composed path against `elements`. Dispose to detach every listener.
 *
 * It owns only the *signals*, not the surface element, its position, or any
 * hover/keep-open policy, so callers keep their own element lifecycle and
@@ -14452,9 +14849,7 @@ function createDismissableLayer(options) {
 	const isInside = (event) => {
 		var _options$elements, _options$elements2;
 		if (options.isInside) return options.isInside(event);
-		const target = event.target;
-		if (!(target instanceof Node)) return false;
-		return ((_options$elements = (_options$elements2 = options.elements) === null || _options$elements2 === void 0 ? void 0 : _options$elements2.call(options)) !== null && _options$elements !== void 0 ? _options$elements : []).some((el) => el.contains(target));
+		return isEventWithin(event, (_options$elements = (_options$elements2 = options.elements) === null || _options$elements2 === void 0 ? void 0 : _options$elements2.call(options)) !== null && _options$elements !== void 0 ? _options$elements : []);
 	};
 	if (escape || keys.length > 0) disposables.addDisposables(addDisposableListener(win, "keydown", (event) => {
 		if (escape && event.key === "Escape" || keys.includes(event.key)) options.onDismiss();
@@ -14473,17 +14868,45 @@ function createDismissableLayer(options) {
 		options.onDismiss();
 	}));
 	if (options.focusOut) {
-		const isFocusInside = (focused) => {
-			var _options$elements3, _options$elements4;
-			if (options.isFocusInside) return options.isFocusInside(focused);
-			return ((_options$elements3 = (_options$elements4 = options.elements) === null || _options$elements4 === void 0 ? void 0 : _options$elements4.call(options)) !== null && _options$elements3 !== void 0 ? _options$elements3 : []).some((el) => el.contains(focused));
+		/** A node in the layer's own tree, to scope retargeting and to locate
+		*  the shadow roots to listen on. */
+		const layerScope = () => {
+			var _options$anchor, _options$anchor2, _options$elements3;
+			return (_options$anchor = (_options$anchor2 = options.anchor) === null || _options$anchor2 === void 0 ? void 0 : _options$anchor2.call(options)) !== null && _options$anchor !== void 0 ? _options$anchor : (_options$elements3 = options.elements) === null || _options$elements3 === void 0 ? void 0 : _options$elements3.call(options)[0];
 		};
+		const seen = /* @__PURE__ */ new WeakSet();
 		const onFocusIn = (event) => {
+			var _options$elements4, _options$elements5;
+			if (seen.has(event)) return;
+			seen.add(event);
 			const target = event.target;
-			if (target instanceof Element && !isFocusInside(target)) options.onDismiss();
+			if (!(target instanceof Element)) return;
+			if (!(options.isFocusInside ? options.isFocusInside(retargetInto(target, layerScope())) : isEventWithin(event, (_options$elements4 = (_options$elements5 = options.elements) === null || _options$elements5 === void 0 ? void 0 : _options$elements5.call(options)) !== null && _options$elements4 !== void 0 ? _options$elements4 : []))) options.onDismiss();
 		};
-		win.addEventListener("focusin", onFocusIn, capture);
-		disposables.addDisposables({ dispose: () => win.removeEventListener("focusin", onFocusIn, capture) });
+		const bound = /* @__PURE__ */ new Map();
+		const syncShadowRoots = () => {
+			var _options$anchor3, _options$elements6, _options$elements7;
+			const wanted = /* @__PURE__ */ new Set();
+			const anchor = (_options$anchor3 = options.anchor) === null || _options$anchor3 === void 0 ? void 0 : _options$anchor3.call(options);
+			const sources = [...(_options$elements6 = (_options$elements7 = options.elements) === null || _options$elements7 === void 0 ? void 0 : _options$elements7.call(options)) !== null && _options$elements6 !== void 0 ? _options$elements6 : [], ...anchor ? [anchor] : []];
+			for (const node of sources) for (const root of shadowRootsOf(node)) wanted.add(root);
+			for (const [root, listener] of bound) if (!wanted.has(root)) {
+				listener.dispose();
+				bound.delete(root);
+			}
+			for (const root of wanted) {
+				if (bound.has(root)) continue;
+				bound.set(root, addDisposableListener(root, "focusin", onFocusIn, capture));
+			}
+		};
+		disposables.addDisposables(addDisposableListener(win, "focusin", (event) => {
+			syncShadowRoots();
+			onFocusIn(event);
+		}, capture), { dispose: () => {
+			for (const [, listener] of bound) listener.dispose();
+			bound.clear();
+		} });
+		syncShadowRoots();
 	}
 	return disposables;
 }
@@ -14976,6 +15399,24 @@ var ShellManager = class {
 		this.updateTheme(this._gap, this._defaultCollapsedSize);
 		return view;
 	}
+	/**
+	* Lay out from the shell's current size.
+	*
+	* The ResizeObserver above only reports asynchronously, so between
+	* construction and its first callback the shell believes it has no size -
+	* and any layout built in that window (panels added straight after
+	* `createDockview`, say) resolves its sizes against zero and collapses to
+	* minimums, permanently. Seeding the size synchronously gives that work
+	* the real dimensions. Same guards as the observer: a detached or hidden
+	* shell has no size worth propagating.
+	*/
+	layoutFromElement() {
+		if (!this._shellElement.offsetParent || !isInDocument(this._shellElement)) return;
+		const width = Math.round(this._shellElement.clientWidth);
+		const height = Math.round(this._shellElement.clientHeight);
+		if (width === 0 || height === 0) return;
+		this.layout(width, height);
+	}
 	layout(width, height) {
 		this._outerSplitview.layout(width, height);
 		this._flushPendingSizes();
@@ -15235,6 +15676,15 @@ var ShellManager = class {
 
 //#endregion
 //#region src/dockview/dockviewComponent.ts
+/**
+* An error says the most about why, so it wins; a blocked window has none, and
+* its usual cause is more useful than its name.
+*/
+function logFailedPopout(failure) {
+	if (failure.error) console.error("dockview: failed to create popout.", failure.error);
+	else if (failure.reason === "blocked") console.error("dockview: failed to create popout. perhaps you need to allow pop-ups for this website");
+	else console.error(`dockview: failed to create popout (${failure.reason}).`);
+}
 function buildTabGroupColorPalette(options) {
 	var _options$tabGroupColo;
 	return new TabGroupColorPalette((_options$tabGroupColo = options.tabGroupColors) !== null && _options$tabGroupColo !== void 0 ? _options$tabGroupColo : DEFAULT_TAB_GROUP_COLORS, options.tabGroupAccent !== "off");
@@ -15286,6 +15736,10 @@ var DockviewComponent = class extends BaseGrid {
 	get panels() {
 		return this.groups.flatMap((group) => group.panels);
 	}
+	/** `dndStrategy` resolved against this device; see `DockviewApi`. */
+	get dndCapabilities() {
+		return resolveDndCapabilities(this.options);
+	}
 	get options() {
 		return this._options;
 	}
@@ -15795,9 +16249,9 @@ var DockviewComponent = class extends BaseGrid {
 		return (_this$_popoutWindowSe = (_this$_popoutWindowSe2 = this._popoutWindowService) === null || _this$_popoutWindowSe2 === void 0 ? void 0 : _this$_popoutWindowSe2.restorationPromise) !== null && _this$_popoutWindowSe !== void 0 ? _this$_popoutWindowSe : Promise.resolve();
 	}
 	constructor(container, options) {
-		var _options$theme$gap, _options$theme, _options$theme$gap2, _options$theme2, _options$theme3;
+		var _options$proportional, _options$theme$gap, _options$theme, _options$theme$gap2, _options$theme2, _options$theme3;
 		super(container, {
-			proportionalLayout: true,
+			proportionalLayout: (_options$proportional = options.proportionalLayout) !== null && _options$proportional !== void 0 ? _options$proportional : true,
 			orientation: "HORIZONTAL",
 			styles: options.hideBorders ? { separatorBorder: "transparent" } : void 0,
 			disableAutoResizing: options.disableAutoResizing,
@@ -15844,6 +16298,8 @@ var DockviewComponent = class extends BaseGrid {
 		this.onDidChangePopouts = this._onDidChangePopouts.event;
 		this._onDidOpenPopoutWindowFail = new Emitter();
 		this.onDidOpenPopoutWindowFail = this._onDidOpenPopoutWindowFail.event;
+		this._onWillClosePopoutWindow = new Emitter();
+		this.onWillClosePopoutWindow = this._onWillClosePopoutWindow.event;
 		this._onDidStartFloatingGroupDrag = new Emitter();
 		this.onDidStartFloatingGroupDrag = this._onDidStartFloatingGroupDrag.event;
 		this._onDidEndFloatingGroupDrag = new Emitter();
@@ -15945,7 +16401,7 @@ var DockviewComponent = class extends BaseGrid {
 			var _this$_shellManager2;
 			this._moduleRegistry.dispose();
 			(_this$_shellManager2 = this._shellManager) === null || _this$_shellManager2 === void 0 || _this$_shellManager2.dispose();
-		}));
+		}), this._onWillClosePopoutWindow);
 		const rootDropTarget = this._rootDropTargetService;
 		if (rootDropTarget) this.addDisposables(rootDropTarget.onWillShowOverlay((event) => {
 			if (this.gridview.length > 0 && event.position === "center") return;
@@ -15958,6 +16414,7 @@ var DockviewComponent = class extends BaseGrid {
 			}));
 		}), rootDropTarget.onDrop((event) => this.dockToLayoutEdge(event.nativeEvent, event.position)));
 		this._moduleRegistry.postConstruct(this);
+		this._shellManager.layoutFromElement();
 	}
 	setVisible(panel, visible) {
 		switch (panel.api.location.type) {
@@ -16027,22 +16484,36 @@ var DockviewComponent = class extends BaseGrid {
 		const box = getBox();
 		const groupId = (_options$overridePopo = options === null || options === void 0 || (_options$overridePopo2 = options.overridePopoutGroup) === null || _options$overridePopo2 === void 0 ? void 0 : _options$overridePopo2.id) !== null && _options$overridePopo !== void 0 ? _options$overridePopo : this.getNextGroupId();
 		const resolvedPopoutUrl = (_options$popoutUrl = options === null || options === void 0 ? void 0 : options.popoutUrl) !== null && _options$popoutUrl !== void 0 ? _options$popoutUrl : (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.popoutUrl;
+		const popoutUrl = resolvedPopoutUrl !== null && resolvedPopoutUrl !== void 0 ? resolvedPopoutUrl : "/popout.html";
 		const _window = new PopoutWindow(`${this.id}-${groupId}`, theme !== null && theme !== void 0 ? theme : "", {
-			url: resolvedPopoutUrl !== null && resolvedPopoutUrl !== void 0 ? resolvedPopoutUrl : "/popout.html",
+			url: popoutUrl,
 			left: box.left,
 			top: box.top,
 			width: box.width,
 			height: box.height,
 			onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
-			onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
-			nonce: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.nonce
+			onWillClose: (event) => {
+				var _options$onWillClose;
+				options === null || options === void 0 || (_options$onWillClose = options.onWillClose) === null || _options$onWillClose === void 0 || _options$onWillClose.call(options, event);
+				this._onWillClosePopoutWindow.fire(event);
+			},
+			nonce: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.nonce,
+			styleRoot: () => this.element.getRootNode()
 		});
 		const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
 			popoutWindowDisposable.dispose();
 		}));
-		return _window.open().then((popoutContainer) => {
+		const openError = getPopoutUrlError(popoutUrl);
+		return (openError ? Promise.resolve(null) : _window.open()).then((popoutContainer) => {
 			var _options$referenceGro, _options$overridePopo4;
-			if (_window.isDisposed) return false;
+			if (_window.isDisposed) {
+				const failure = _window.failure;
+				if (failure && !this.isDisposed) {
+					logFailedPopout(failure);
+					this._onDidOpenPopoutWindowFail.fire(failure);
+				}
+				return false;
+			}
 			const referenceGroup = (_options$referenceGro = options === null || options === void 0 ? void 0 : options.referenceGroup) !== null && _options$referenceGro !== void 0 ? _options$referenceGro : itemToPopout instanceof DockviewPanel ? itemToPopout.group : itemToPopout;
 			const referenceLocation = itemToPopout.api.location.type;
 			/**
@@ -16061,11 +16532,16 @@ var DockviewComponent = class extends BaseGrid {
 				if (popoutContainer) this._onDidAddGroup.fire(group);
 			}
 			if (popoutContainer === null) {
+				var _window$failure;
 				this.handleBlockedPopout({
 					group,
 					referenceGroup,
 					options,
-					popoutWindowDisposable
+					popoutWindowDisposable,
+					failure: openError ? {
+						reason: "url-refused",
+						error: openError
+					} : (_window$failure = _window.failure) !== null && _window$failure !== void 0 ? _window$failure : { reason: "blocked" }
 				});
 				return false;
 			}
@@ -16228,16 +16704,17 @@ var DockviewComponent = class extends BaseGrid {
 		});
 	}
 	/**
-	* The popout window was blocked (e.g. by the browser's popup blocker,
-	* common when restoring popouts on load). Fall back gracefully so the
-	* group(s) end up valid and visible in the main grid rather than as
-	* orphans that later crash clear()/remove().
+	* The popout window never opened - blocked by the browser's popup blocker
+	* (common when restoring popouts on load), or refused outright because its
+	* URL failed the same-origin guard. Fall back gracefully so the group(s)
+	* end up valid and visible in the main grid rather than as orphans that
+	* render nothing and later crash clear()/remove().
 	*/
 	handleBlockedPopout(params) {
-		const { group, referenceGroup, options, popoutWindowDisposable } = params;
-		console.error("dockview: failed to create popout. perhaps you need to allow pop-ups for this website");
+		const { group, referenceGroup, options, popoutWindowDisposable, failure } = params;
+		logFailedPopout(failure);
 		popoutWindowDisposable.dispose();
-		this._onDidOpenPopoutWindowFail.fire();
+		this._onDidOpenPopoutWindowFail.fire(failure);
 		if (options === null || options === void 0 ? void 0 : options.overridePopoutGridview) {
 			const blockedGridview = options.overridePopoutGridview;
 			const members = this.groups.filter((candidate) => blockedGridview.element.contains(candidate.element));
@@ -16392,10 +16869,11 @@ var DockviewComponent = class extends BaseGrid {
 			group = this.createGroup();
 			this._onDidAddGroup.fire(group);
 			this.movingLock(() => this.removePanel(item, {
-				removeEmptyGroup: true,
+				removeEmptyGroup: false,
 				skipDispose: true,
 				skipSetActiveGroup: true
 			}));
+			this.removeGroupIfEmpty(sourceGroup);
 			this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
 			movedPanels = [{
 				panel: item,
@@ -16466,13 +16944,17 @@ var DockviewComponent = class extends BaseGrid {
 		});
 		for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 	}
+	removeGroupIfEmpty(group) {
+		if (group.model.size === 0) this.doRemoveGroup(group, { skipActive: true });
+	}
 	/**
-	* Build an empty gridview configured to match the main grid's styling, for
-	* hosting a nested layout inside a floating or popout window.
+	* Build an empty gridview configured to match the main grid's styling and
+	* resize behaviour, for hosting a nested layout inside a floating or popout
+	* window.
 	*/
 	createNestedGridview(orientation = "HORIZONTAL") {
 		var _this$options$theme$g, _this$options$theme2;
-		return new Gridview(true, this.options.hideBorders ? { separatorBorder: "transparent" } : void 0, orientation, false, (_this$options$theme$g = (_this$options$theme2 = this.options.theme) === null || _this$options$theme2 === void 0 ? void 0 : _this$options$theme2.gap) !== null && _this$options$theme$g !== void 0 ? _this$options$theme$g : 0);
+		return new Gridview(this.gridview.proportionalLayout, this.options.hideBorders ? { separatorBorder: "transparent" } : void 0, orientation, false, (_this$options$theme$g = (_this$options$theme2 = this.options.theme) === null || _this$options$theme2 === void 0 ? void 0 : _this$options$theme2.gap) !== null && _this$options$theme$g !== void 0 ? _this$options$theme$g : 0);
 	}
 	/**
 	* Wrap a (populated) floating gridview in an overlay window: title bar /
@@ -16545,6 +17027,12 @@ var DockviewComponent = class extends BaseGrid {
 		const newDisableDnd = this.options.disableDnd;
 		const newDndStrategy = this.options.dndStrategy;
 		if (oldDisableDnd !== newDisableDnd || oldDndStrategy !== newDndStrategy) this.updateDragAndDropState();
+		if ("proportionalLayout" in options) {
+			var _this$_popoutWindowSe9, _this$_popoutWindowSe10;
+			const proportionalLayout = this.gridview.proportionalLayout;
+			for (const floating of this.floatingGroups) floating.gridview.proportionalLayout = proportionalLayout;
+			for (const entry of (_this$_popoutWindowSe9 = (_this$_popoutWindowSe10 = this._popoutWindowService) === null || _this$_popoutWindowSe10 === void 0 ? void 0 : _this$_popoutWindowSe10.entries) !== null && _this$_popoutWindowSe9 !== void 0 ? _this$_popoutWindowSe9 : []) entry.gridview.proportionalLayout = proportionalLayout;
+		}
 		if ("theme" in options) this.updateTheme();
 		if ("createRightHeaderActionComponent" in options || "createLeftHeaderActionComponent" in options || "createPrefixHeaderActionComponent" in options) {
 			var _this$headerActionsSe;
@@ -16852,14 +17340,14 @@ var DockviewComponent = class extends BaseGrid {
 	* @returns A JSON respresentation of the layout
 	*/
 	toJSON() {
-		var _this$_floatingGroupS3, _this$_floatingGroupS4, _this$_popoutWindowSe9, _this$_popoutWindowSe10, _this$activeGroup2;
+		var _this$_floatingGroupS3, _this$_floatingGroupS4, _this$_popoutWindowSe11, _this$_popoutWindowSe12, _this$activeGroup2;
 		const data = this.gridview.serialize();
 		const panels = this.panels.reduce((collection, panel) => {
 			collection[panel.id] = panel.toJSON();
 			return collection;
 		}, {});
 		const floats = (_this$_floatingGroupS3 = (_this$_floatingGroupS4 = this._floatingGroupService) === null || _this$_floatingGroupS4 === void 0 ? void 0 : _this$_floatingGroupS4.serialize()) !== null && _this$_floatingGroupS3 !== void 0 ? _this$_floatingGroupS3 : [];
-		const popoutGroups = (_this$_popoutWindowSe9 = (_this$_popoutWindowSe10 = this._popoutWindowService) === null || _this$_popoutWindowSe10 === void 0 ? void 0 : _this$_popoutWindowSe10.serialize()) !== null && _this$_popoutWindowSe9 !== void 0 ? _this$_popoutWindowSe9 : [];
+		const popoutGroups = (_this$_popoutWindowSe11 = (_this$_popoutWindowSe12 = this._popoutWindowService) === null || _this$_popoutWindowSe12 === void 0 ? void 0 : _this$_popoutWindowSe12.serialize()) !== null && _this$_popoutWindowSe11 !== void 0 ? _this$_popoutWindowSe11 : [];
 		const result = {
 			grid: data,
 			panels,
@@ -16898,8 +17386,8 @@ var DockviewComponent = class extends BaseGrid {
 		this.mutation("load", () => this._doFromJSON(data, options));
 	}
 	_doFromJSON(data, options) {
-		var _this$_popoutWindowSe11, _data$grid$root;
-		(_this$_popoutWindowSe11 = this._popoutWindowService) === null || _this$_popoutWindowSe11 === void 0 || _this$_popoutWindowSe11.cancelPendingRestorations();
+		var _this$_popoutWindowSe13, _data$grid$root;
+		(_this$_popoutWindowSe13 = this._popoutWindowService) === null || _this$_popoutWindowSe13 === void 0 || _this$_popoutWindowSe13.cancelPendingRestorations();
 		if (typeof data !== "object" || data === null) throw new Error("dockview: serialized layout must be a non-null object");
 		if (!data.grid || ((_data$grid$root = data.grid.root) === null || _data$grid$root === void 0 ? void 0 : _data$grid$root.type) !== "branch" || !Array.isArray(data.grid.root.data)) throw new Error("dockview: root must be of type branch");
 		const existingPanels = /* @__PURE__ */ new Map();
@@ -17018,7 +17506,7 @@ var DockviewComponent = class extends BaseGrid {
 		} else this.clear();
 		const { grid, panels, activeGroup } = data;
 		try {
-			var _data$floatingGroups, _data$popoutGroups, _this$_popoutWindowSe12, _this$_floatingGroupS5, _this$_watermarkServi2;
+			var _data$floatingGroups, _data$popoutGroups, _this$_popoutWindowSe14, _this$_floatingGroupS5, _this$_watermarkServi2;
 			const width = this.width;
 			const height = this.height;
 			const createGroupFromSerializedState = (data) => {
@@ -17083,7 +17571,7 @@ var DockviewComponent = class extends BaseGrid {
 			if (data.edgeGroups) this.deserializeEdgeGroups(data.edgeGroups, panels, existingPanels, temporaryGroups);
 			this.deserializeFloatingWindows((_data$floatingGroups = data.floatingGroups) !== null && _data$floatingGroups !== void 0 ? _data$floatingGroups : [], createGroupFromSerializedState);
 			const popoutPromises = this.deserializePopoutWindows((_data$popoutGroups = data.popoutGroups) !== null && _data$popoutGroups !== void 0 ? _data$popoutGroups : [], createGroupFromSerializedState);
-			(_this$_popoutWindowSe12 = this._popoutWindowService) === null || _this$_popoutWindowSe12 === void 0 || _this$_popoutWindowSe12.finishRestoration(popoutPromises);
+			(_this$_popoutWindowSe14 = this._popoutWindowService) === null || _this$_popoutWindowSe14 === void 0 || _this$_popoutWindowSe14.finishRestoration(popoutPromises);
 			(_this$_floatingGroupS5 = this._floatingGroupService) === null || _this$_floatingGroupS5 === void 0 || _this$_floatingGroupS5.constrainBounds();
 			if (typeof activeGroup === "string") {
 				const panel = this.getPanel(activeGroup);
@@ -17251,15 +17739,13 @@ var DockviewComponent = class extends BaseGrid {
 				}
 			}
 			const group = grid ? members[0] : createGroup(data);
-			return popoutService.scheduleRestoration(index * 100, () => {
-				this.addPopoutGroup(group, {
-					position: position !== null && position !== void 0 ? position : void 0,
-					overridePopoutGroup: gridReferenceGroup ? group : void 0,
-					overridePopoutGridview,
-					referenceGroup: gridReferenceGroup ? this.getPanel(gridReferenceGroup) : void 0,
-					popoutUrl: url
-				});
-			}, () => {
+			return popoutService.scheduleRestoration(index * 100, () => this.addPopoutGroup(group, {
+				position: position !== null && position !== void 0 ? position : void 0,
+				overridePopoutGroup: gridReferenceGroup ? group : void 0,
+				overridePopoutGridview,
+				referenceGroup: gridReferenceGroup ? this.getPanel(gridReferenceGroup) : void 0,
+				popoutUrl: url
+			}), () => {
 				for (const orphan of members.length > 0 ? members : [group]) if (!this.isDisposed && this._groups.has(orphan.id) && orphan.element.parentElement === null) {
 					for (const panel of [...orphan.panels]) this.removePanel(panel, { removeEmptyGroup: false });
 					orphan.dispose();
@@ -17494,7 +17980,7 @@ var DockviewComponent = class extends BaseGrid {
 	* window.
 	*/
 	detachFromNestedWindow(group) {
-		var _this$_floatingGroupS7, _this$_popoutWindowSe13;
+		var _this$_floatingGroupS7, _this$_popoutWindowSe15;
 		const floating = (_this$_floatingGroupS7 = this._floatingGroupService) === null || _this$_floatingGroupS7 === void 0 ? void 0 : _this$_floatingGroupS7.findByGroup(group);
 		if (floating) {
 			const members = this.nestedWindowMembers(group);
@@ -17503,7 +17989,7 @@ var DockviewComponent = class extends BaseGrid {
 			if (floating.group === group) floating.setAnchorGroup(members.find((m) => m !== group));
 			return true;
 		}
-		const popout = (_this$_popoutWindowSe13 = this._popoutWindowService) === null || _this$_popoutWindowSe13 === void 0 ? void 0 : _this$_popoutWindowSe13.findByGroup(group);
+		const popout = (_this$_popoutWindowSe15 = this._popoutWindowService) === null || _this$_popoutWindowSe15 === void 0 ? void 0 : _this$_popoutWindowSe15.findByGroup(group);
 		if (popout) {
 			const members = this.nestedWindowMembers(group);
 			if (members.length <= 1) return false;
@@ -17560,8 +18046,8 @@ var DockviewComponent = class extends BaseGrid {
 			return group;
 		}
 		if (group.api.location.type === "popout") {
-			var _this$_popoutWindowSe14, _this$_popoutWindowSe15;
-			const selectedGroup = (_this$_popoutWindowSe14 = this._popoutWindowService) === null || _this$_popoutWindowSe14 === void 0 ? void 0 : _this$_popoutWindowSe14.findByGroup(group);
+			var _this$_popoutWindowSe16, _this$_popoutWindowSe17;
+			const selectedGroup = (_this$_popoutWindowSe16 = this._popoutWindowService) === null || _this$_popoutWindowSe16 === void 0 ? void 0 : _this$_popoutWindowSe16.findByGroup(group);
 			if (!selectedGroup) throw new Error("dockview: failed to find popout group");
 			if (this.detachFromNestedWindow(group)) {
 				if (options === null || options === void 0 ? void 0 : options.skipDispose) group.model.location = { type: "grid" };
@@ -17578,7 +18064,7 @@ var DockviewComponent = class extends BaseGrid {
 				this._groups.delete(group.id);
 				this._onDidRemoveGroup.fire(group);
 			}
-			(_this$_popoutWindowSe15 = this._popoutWindowService) === null || _this$_popoutWindowSe15 === void 0 || _this$_popoutWindowSe15.remove(selectedGroup);
+			(_this$_popoutWindowSe17 = this._popoutWindowService) === null || _this$_popoutWindowSe17 === void 0 || _this$_popoutWindowSe17.remove(selectedGroup);
 			const removedGroup = selectedGroup.disposable.dispose();
 			if (!(options === null || options === void 0 ? void 0 : options.skipPopoutReturn) && removedGroup) {
 				this.doAddGroup(removedGroup, [0]);
@@ -17605,10 +18091,10 @@ var DockviewComponent = class extends BaseGrid {
 	debouncedUpdateAllPositions() {
 		if (this._updatePositionsFrameId !== void 0) cancelAnimationFrame(this._updatePositionsFrameId);
 		this._updatePositionsFrameId = requestAnimationFrame(() => {
-			var _this$_popoutWindowSe16, _this$_popoutWindowSe17;
+			var _this$_popoutWindowSe18, _this$_popoutWindowSe19;
 			this._updatePositionsFrameId = void 0;
 			this.overlayRenderContainer.updateAllPositions();
-			for (const entry of (_this$_popoutWindowSe16 = (_this$_popoutWindowSe17 = this._popoutWindowService) === null || _this$_popoutWindowSe17 === void 0 ? void 0 : _this$_popoutWindowSe17.entries) !== null && _this$_popoutWindowSe16 !== void 0 ? _this$_popoutWindowSe16 : []) entry.overlayRenderContainer.updateAllPositions();
+			for (const entry of (_this$_popoutWindowSe18 = (_this$_popoutWindowSe19 = this._popoutWindowService) === null || _this$_popoutWindowSe19 === void 0 ? void 0 : _this$_popoutWindowSe19.entries) !== null && _this$_popoutWindowSe18 !== void 0 ? _this$_popoutWindowSe18 : []) entry.overlayRenderContainer.updateAllPositions();
 		});
 	}
 	movingLock(func) {
@@ -17858,7 +18344,7 @@ var DockviewComponent = class extends BaseGrid {
 					}
 				}
 				if (sourceGroup.api.location.type === "popout" && this.nestedWindowMembers(sourceGroup).length <= 1) {
-					var _this$_popoutWindowSe18;
+					var _this$_popoutWindowSe20;
 					/**
 					* the source group is the only group in a popout window and
 					* has a single panel
@@ -17873,7 +18359,7 @@ var DockviewComponent = class extends BaseGrid {
 					* Multi-group popout windows fall through to the generic
 					* detach-and-re-add path so the window stays alive.
 					*/
-					const popoutGroup = (_this$_popoutWindowSe18 = this._popoutWindowService) === null || _this$_popoutWindowSe18 === void 0 ? void 0 : _this$_popoutWindowSe18.findByGroup(sourceGroup);
+					const popoutGroup = (_this$_popoutWindowSe20 = this._popoutWindowService) === null || _this$_popoutWindowSe20 === void 0 ? void 0 : _this$_popoutWindowSe20.findByGroup(sourceGroup);
 					if (!popoutGroup) return;
 					const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
 						skipSetActive: true,
@@ -18082,11 +18568,11 @@ var DockviewComponent = class extends BaseGrid {
 					break;
 				}
 				case "popout": {
-					var _this$_popoutWindowSe19, _this$_popoutWindowSe20;
-					const selectedPopoutGroup = (_this$_popoutWindowSe19 = this._popoutWindowService) === null || _this$_popoutWindowSe19 === void 0 ? void 0 : _this$_popoutWindowSe19.findByGroup(from);
+					var _this$_popoutWindowSe21, _this$_popoutWindowSe22;
+					const selectedPopoutGroup = (_this$_popoutWindowSe21 = this._popoutWindowService) === null || _this$_popoutWindowSe21 === void 0 ? void 0 : _this$_popoutWindowSe21.findByGroup(from);
 					if (!selectedPopoutGroup) throw new Error("dockview: failed to find popout group");
 					if (this.detachFromNestedWindow(from)) break;
-					(_this$_popoutWindowSe20 = this._popoutWindowService) === null || _this$_popoutWindowSe20 === void 0 || _this$_popoutWindowSe20.remove(selectedPopoutGroup);
+					(_this$_popoutWindowSe22 = this._popoutWindowService) === null || _this$_popoutWindowSe22 === void 0 || _this$_popoutWindowSe22.remove(selectedPopoutGroup);
 					if (selectedPopoutGroup.referenceGroup) {
 						const referenceGroup = this.getPanel(selectedPopoutGroup.referenceGroup);
 						if (referenceGroup && !referenceGroup.api.isVisible) this.doRemoveGroup(referenceGroup, { skipActive: true });
@@ -18251,8 +18737,8 @@ var DockviewComponent = class extends BaseGrid {
 	* window-local containers).
 	*/
 	setGroupLocationForRoot(group, gridview) {
-		var _this$_popoutWindowSe21;
-		const popout = (_this$_popoutWindowSe21 = this._popoutWindowService) === null || _this$_popoutWindowSe21 === void 0 ? void 0 : _this$_popoutWindowSe21.entries.find((entry) => entry.gridview === gridview);
+		var _this$_popoutWindowSe23;
+		const popout = (_this$_popoutWindowSe23 = this._popoutWindowService) === null || _this$_popoutWindowSe23 === void 0 ? void 0 : _this$_popoutWindowSe23.entries.find((entry) => entry.gridview === gridview);
 		if (popout) {
 			if (group.model.renderContainer !== popout.overlayRenderContainer) group.model.renderContainer = popout.overlayRenderContainer;
 			group.model.dropTargetContainer = popout.dropTargetContainer;
@@ -18272,10 +18758,10 @@ var DockviewComponent = class extends BaseGrid {
 	* the nested gridview of the floating / popout window it lives in.
 	*/
 	getGridviewForGroup(group) {
-		var _this$_floatingGroupS10, _this$_popoutWindowSe22;
+		var _this$_floatingGroupS10, _this$_popoutWindowSe24;
 		const floating = (_this$_floatingGroupS10 = this._floatingGroupService) === null || _this$_floatingGroupS10 === void 0 ? void 0 : _this$_floatingGroupS10.findByGroup(group);
 		if (floating) return floating.gridview;
-		const popout = (_this$_popoutWindowSe22 = this._popoutWindowService) === null || _this$_popoutWindowSe22 === void 0 ? void 0 : _this$_popoutWindowSe22.findByGroup(group);
+		const popout = (_this$_popoutWindowSe24 = this._popoutWindowService) === null || _this$_popoutWindowSe24 === void 0 ? void 0 : _this$_popoutWindowSe24.findByGroup(group);
 		if (popout) return popout.gridview;
 		return this.gridview;
 	}
@@ -18297,13 +18783,13 @@ var DockviewComponent = class extends BaseGrid {
 		return location.length % 2 == 1 ? rootOrientation : orthogonal(rootOrientation);
 	}
 	updateTheme() {
-		var _this$_options$theme, _this$_shellThemeClas, _theme$gap, _this$_popoutWindowSe23, _this$_popoutWindowSe24, _this$_shellManager5, _theme$edgeGroupColla, _theme$tabGroupIndica;
+		var _this$_options$theme, _this$_shellThemeClas, _theme$gap, _this$_popoutWindowSe25, _this$_popoutWindowSe26, _this$_shellManager5, _theme$edgeGroupColla, _theme$tabGroupIndica;
 		const theme = (_this$_options$theme = this._options.theme) !== null && _this$_options$theme !== void 0 ? _this$_options$theme : themeAbyss;
 		(_this$_shellThemeClas = this._shellThemeClassnames) === null || _this$_shellThemeClas === void 0 || _this$_shellThemeClas.setClassNames(theme.className);
 		const gap = (_theme$gap = theme.gap) !== null && _theme$gap !== void 0 ? _theme$gap : 0;
 		this.gridview.margin = gap;
 		for (const floating of this.floatingGroups) floating.gridview.margin = gap;
-		for (const entry of (_this$_popoutWindowSe23 = (_this$_popoutWindowSe24 = this._popoutWindowService) === null || _this$_popoutWindowSe24 === void 0 ? void 0 : _this$_popoutWindowSe24.entries) !== null && _this$_popoutWindowSe23 !== void 0 ? _this$_popoutWindowSe23 : []) entry.gridview.margin = gap;
+		for (const entry of (_this$_popoutWindowSe25 = (_this$_popoutWindowSe26 = this._popoutWindowService) === null || _this$_popoutWindowSe26 === void 0 ? void 0 : _this$_popoutWindowSe26.entries) !== null && _this$_popoutWindowSe25 !== void 0 ? _this$_popoutWindowSe25 : []) entry.gridview.margin = gap;
 		(_this$_shellManager5 = this._shellManager) === null || _this$_shellManager5 === void 0 || _this$_shellManager5.updateTheme(gap, (_theme$edgeGroupColla = theme.edgeGroupCollapsedSize) !== null && _theme$edgeGroupColla !== void 0 ? _theme$edgeGroupColla : 35);
 		if (theme.dndOverlayBorder === void 0) {
 			var _this$_shellManager6;
@@ -18372,6 +18858,7 @@ var GridviewComponent = class extends BaseGrid {
 		}), this.onDidActiveChange((event) => {
 			this._onDidActiveGroupChange.fire(event);
 		}));
+		this.layoutFromElement();
 	}
 	updateOptions(options) {
 		super.updateOptions(options);
@@ -18617,6 +19104,7 @@ var SplitviewComponent = class extends Resizable {
 		this._options = options;
 		this.splitview = new Splitview(this.element, options);
 		this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
+		this.layoutFromElement();
 	}
 	updateOptions(options) {
 		if ("className" in options) {
@@ -19298,11 +19786,13 @@ exports.createSplitview = createSplitview;
 exports.defineModule = defineModule;
 exports.directionToPosition = directionToPosition;
 exports.findRelativeZIndexParent = findRelativeZIndexParent;
+exports.getActiveElement = getActiveElement;
 exports.getDirectionOrientation = getDirectionOrientation;
 exports.getGridLocation = getGridLocation;
 exports.getLocationOrientation = getLocationOrientation;
 exports.getPaneData = getPaneData;
 exports.getPanelData = getPanelData;
+exports.getPopoutUrlError = getPopoutUrlError;
 exports.getRegisteredModules = getRegisteredModules;
 exports.getRelativeLocation = getRelativeLocation;
 exports.indexInParent = indexInParent;