react-bwin 0.3.5-dev.0 → 0.4.0

package/dist/react-bwin.js

@@ -1,6 +1,6 @@
 import e, { forwardRef as t, useEffect as n, useImperativeHandle as r, useMemo as i, useRef as a, useState as o } from "react";
 import { createPortal as s } from "react-dom";
-//#region node_modules/.pnpm/bwin@0.3.3/node_modules/bwin/dist/bwin.js
+//#region node_modules/.pnpm/bwin@0.4.1/node_modules/bwin/dist/bwin.js
 function c(e = .7, t = 128) {
 	let n = 256 - t;
 	return `rgba(${Math.floor(Math.random() * n + t)}, ${Math.floor(Math.random() * n + t)}, ${Math.floor(Math.random() * n + t)}, ${Math.max(.5, Math.random() * e)})`;
@@ -71,6 +71,10 @@ function g(e) {
 	return e instanceof Node ? e : document.createTextNode(String(e));
 }
 function _(e) {
+	let t = document.createDocumentFragment();
+	return t.append(...e.childNodes), t;
+}
+function v(e) {
 	return {
 		left: parseFloat(e.style.left) || 0,
 		top: parseFloat(e.style.top) || 0,
@@ -78,7 +82,7 @@ function _(e) {
 		height: parseFloat(e.style.height) || 0
 	};
 }
-var v = {
+var y = {
 	Top: "top",
 	Right: "right",
 	Bottom: "bottom",
@@ -88,50 +92,50 @@ var v = {
 	Unknown: "unknown",
 	Outside: "outside"
 };
-function y(e) {
+function b(e) {
 	switch (e) {
-		case v.Top: return v.Bottom;
-		case v.Right: return v.Left;
-		case v.Bottom: return v.Top;
-		case v.Left: return v.Right;
+		case y.Top: return y.Bottom;
+		case y.Right: return y.Left;
+		case y.Bottom: return y.Top;
+		case y.Left: return y.Right;
 		default: throw Error(`[bwin] Invalid position: ${e}`);
 	}
 }
-function b({ width: e, height: t, x: n }) {
+function x({ width: e, height: t, x: n }) {
 	return t / e * n;
 }
-function x({ width: e, height: t, y: n }) {
+function ee({ width: e, height: t, y: n }) {
 	return e / t * n;
 }
-function ee({ width: e, height: t, x: n }) {
+function te({ width: e, height: t, x: n }) {
 	return t - t / e * n;
 }
-function te({ width: e, height: t, y: n }) {
+function ne({ width: e, height: t, y: n }) {
 	return e - e / t * n;
 }
-function ne(e, { clientX: t, clientY: n }) {
+function S(e, { clientX: t, clientY: n }) {
 	let r = e.getBoundingClientRect(), { width: i, height: a } = r, o = t - r.left, s = n - r.top;
-	if (o < 0 || o > i || s < 0 || s > a) return v.Outside;
-	let c = .3, l = b({
+	if (o < 0 || o > i || s < 0 || s > a) return y.Outside;
+	let c = .3, l = x({
 		width: i,
 		height: a,
 		x: o
-	}), u = ee({
+	}), u = te({
 		width: i,
 		height: a,
 		x: o
-	}), d = x({
+	}), d = ee({
 		width: i,
 		height: a,
 		y: s
-	}), f = te({
+	}), f = ne({
 		width: i,
 		height: a,
 		y: s
 	});
-	return o < i * (.5 - c / 2) && s > l && s < u ? v.Left : o > i * .65 && s < l && s > u ? v.Right : s < a * (.5 - c / 2) && o > d && o < f ? v.Top : s > a * .65 && o < d && o > f ? v.Bottom : o > i * (.5 - c / 2) && o < i * .65 && s > a * (.5 - c / 2) && s < a * .65 ? v.Center : v.Unknown;
+	return o < i * (.5 - c / 2) && s > l && s < u ? y.Left : o > i * .65 && s < l && s > u ? y.Right : s < a * (.5 - c / 2) && o > d && o < f ? y.Top : s > a * .65 && o < d && o > f ? y.Bottom : o > i * (.5 - c / 2) && o < i * .65 && s > a * (.5 - c / 2) && s < a * .65 ? y.Center : y.Unknown;
 }
-var S = {
+var C = {
 	left: 0,
 	top: 0,
 	width: 150,
@@ -139,8 +143,8 @@ var S = {
 	minWidth: 100,
 	minHeight: 100,
 	resizeStrategy: "classic"
-}, C = class {
-	constructor({ left: e = S.left, top: t = S.top, width: n = S.width, height: r = S.height, minWidth: i = S.minWidth, minHeight: a = S.minHeight, resizeStrategy: o = S.resizeStrategy, parent: s = null, domNode: c = null, store: u = {}, position: d, id: f } = S) {
+}, w = class {
+	constructor({ left: e = C.left, top: t = C.top, width: n = C.width, height: r = C.height, minWidth: i = C.minWidth, minHeight: a = C.minHeight, resizeStrategy: o = C.resizeStrategy, parent: s = null, domNode: c = null, store: u = {}, position: d, id: f } = C) {
 		if (this.id = f ?? l(), !d) throw Error("[bwin] Sash position is required");
 		this.position = d, this.domNode = c, this.parent = s, this._top = t, this._left = e, this._width = n, this._height = r, this.children = [], this.minWidth = i, this.minHeight = a, this.resizeStrategy = o, this.store = u;
 	}
@@ -154,26 +158,26 @@ var S = {
 		return this.children.length > 0;
 	}
 	isLeftRightSplit() {
-		return this.children.some((e) => e.position === v.Left || e.position === v.Right);
+		return this.children.some((e) => e.position === y.Left || e.position === y.Right);
 	}
 	isTopBottomSplit() {
-		return this.children.some((e) => e.position === v.Top || e.position === v.Bottom);
+		return this.children.some((e) => e.position === y.Top || e.position === y.Bottom);
 	}
 	get leftChild() {
-		return this.children.find((e) => e.position === v.Left);
+		return this.children.find((e) => e.position === y.Left);
 	}
 	get rightChild() {
-		return this.children.find((e) => e.position === v.Right);
+		return this.children.find((e) => e.position === y.Right);
 	}
 	get topChild() {
-		return this.children.find((e) => e.position === v.Top);
+		return this.children.find((e) => e.position === y.Top);
 	}
 	get bottomChild() {
-		return this.children.find((e) => e.position === v.Bottom);
+		return this.children.find((e) => e.position === y.Bottom);
 	}
 	getChildren() {
 		let e = null, t = null, n = null, r = null;
-		for (let i of this.children) i.position === v.Left ? e = i : i.position === v.Right ? t = i : i.position === v.Top ? n = i : i.position === v.Bottom && (r = i);
+		for (let i of this.children) i.position === y.Left ? e = i : i.position === y.Right ? t = i : i.position === y.Top ? n = i : i.position === y.Bottom && (r = i);
 		return [
 			n,
 			t,
@@ -232,7 +236,7 @@ var S = {
 	}
 	addChild(e) {
 		if (this.children.length >= 2) throw Error("[bwin] Maximum 2 children allowed");
-		this.children.push(e);
+		e.parent = this, this.children.push(e);
 	}
 	getDescendantParentById(e) {
 		for (let t of this.children) {
@@ -245,6 +249,12 @@ var S = {
 	getChildSiblingById(e) {
 		return this.children.find((t) => t.id !== e);
 	}
+	getLargestLeaf() {
+		return this.getAllLeafDescendants().reduce((e, t) => t.width * t.height > e.width * e.height ? t : e);
+	}
+	getRelativeSize() {
+		return this.parent ? this.position === y.Left || this.position === y.Right ? this.width / this.parent.width : this.height / this.parent.height : 1;
+	}
 	get top() {
 		return this._top;
 	}
@@ -272,7 +282,7 @@ var S = {
 		let [n, r, i, a] = this.getChildren();
 		if (a && r) {
 			let e = a.width + r.width, n = t * (a.width / e), i = e + t, o, s, c;
-			if (this.resizeStrategy === "natural" && this.position === v.Left ? (o = a.width, s = r.width + t, c = r.left) : this.resizeStrategy === "natural" && this.position === v.Right ? (o = a.width + t, s = r.width, c = a.left + o) : (o = a.width + n, s = i - o, c = r.left + n), t < 0) {
+			if (this.resizeStrategy === "natural" && this.position === y.Left ? (o = a.width, s = r.width + t, c = r.left) : this.resizeStrategy === "natural" && this.position === y.Right ? (o = a.width + t, s = r.width, c = a.left + o) : (o = a.width + n, s = i - o, c = r.left + n), t < 0) {
 				let e = a.calcMinWidth(), t = r.calcMinWidth();
 				o < e && s > t ? (o = a.width, s = i - o, c = a.left + o) : s < t && o > e && (s = r.width, o = i - s, c = a.left + o);
 			}
@@ -289,7 +299,7 @@ var S = {
 		let [n, r, i, a] = this.getChildren();
 		if (n && i) {
 			let e = n.height + i.height, r = t * (n.height / e), a = e + t, o, s, c;
-			if (this.resizeStrategy === "natural" && this.position === v.Top ? (o = n.height, s = i.height + t, c = i.top) : this.resizeStrategy === "natural" && this.position === v.Bottom ? (o = n.height + t, s = i.height, c = n.top + o) : (o = n.height + r, s = a - o, c = i.top + r), t < 0) {
+			if (this.resizeStrategy === "natural" && this.position === y.Top ? (o = n.height, s = i.height + t, c = i.top) : this.resizeStrategy === "natural" && this.position === y.Bottom ? (o = n.height + t, s = i.height, c = n.top + o) : (o = n.height + r, s = a - o, c = i.top + r), t < 0) {
 				let e = n.calcMinHeight(), t = i.calcMinHeight();
 				o < e && s > t ? (o = n.height, s = a - o, c = n.top + o) : s < t && o > e && (s = i.height, o = a - s, c = n.top + o);
 			}
@@ -297,10 +307,10 @@ var S = {
 		}
 		a && r && (a.height += t, r.height += t);
 	}
-}, w = {
+}, T = {
 	size: "50%",
-	position: v.Left
-}, T = class e {
+	position: y.Left
+}, re = class e {
 	left;
 	top;
 	width;
@@ -310,7 +320,7 @@ var S = {
 	}
 	getPosition(e) {
 		if (!this.siblingConfigNode) return e;
-		let t = y(this.siblingConfigNode.position);
+		let t = b(this.siblingConfigNode.position);
 		if (!e) return t;
 		if (e !== t) throw Error("[bwin] Sibling position and current position are not opposite");
 		return e;
@@ -319,36 +329,36 @@ var S = {
 		if (!this.siblingConfigNode) return f(e);
 		if (!e) {
 			if (this.siblingConfigNode.size < 1) return 1 - this.siblingConfigNode.size;
-			if (this.siblingConfigNode.position === v.Left || this.siblingConfigNode.position === v.Right) return this.parentRect.width - this.siblingConfigNode.width;
-			if (this.siblingConfigNode.position === v.Top || this.siblingConfigNode.position === v.Bottom) return this.parentRect.height - this.siblingConfigNode.height;
+			if (this.siblingConfigNode.position === y.Left || this.siblingConfigNode.position === y.Right) return this.parentRect.width - this.siblingConfigNode.width;
+			if (this.siblingConfigNode.position === y.Top || this.siblingConfigNode.position === y.Bottom) return this.parentRect.height - this.siblingConfigNode.height;
 		}
 		let t = f(e);
 		if (t < 1) {
 			if (t + this.siblingConfigNode.size !== 1) throw Error("[bwin] Sum of sibling sizes is not equal to 1");
 		} else {
-			if ((this.position === v.Left || this.position === v.Right) && t + this.siblingConfigNode.size !== this.parentRect.width) throw Error("[bwin] Sum of sibling sizes is not equal to parent width");
-			if ((this.position === v.Top || this.position === v.Bottom) && t + this.siblingConfigNode.size !== this.parentRect.height) throw Error("[bwin] Sum of sibling sizes is not equal to parent height");
+			if ((this.position === y.Left || this.position === y.Right) && t + this.siblingConfigNode.size !== this.parentRect.width) throw Error("[bwin] Sum of sibling sizes is not equal to parent width");
+			if ((this.position === y.Top || this.position === y.Bottom) && t + this.siblingConfigNode.size !== this.parentRect.height) throw Error("[bwin] Sum of sibling sizes is not equal to parent height");
 		}
 		return t;
 	}
 	setBounds() {
-		if (this.position === v.Root) this.left = 0, this.top = 0, this.width = this.parentRect.width, this.height = this.parentRect.height;
-		else if (this.position === v.Left) {
+		if (this.position === y.Root) this.left = 0, this.top = 0, this.width = this.parentRect.width, this.height = this.parentRect.height;
+		else if (this.position === y.Left) {
 			let e = this.size < 1 ? this.parentRect.width * this.size : this.size;
 			this.left = this.parentRect.left, this.top = this.parentRect.top, this.width = e, this.height = this.parentRect.height;
-		} else if (this.position === v.Right) {
+		} else if (this.position === y.Right) {
 			let e = this.size < 1 ? this.parentRect.width * this.size : this.size;
 			this.left = this.parentRect.left + this.parentRect.width - e, this.top = this.parentRect.top, this.width = e, this.height = this.parentRect.height;
-		} else if (this.position === v.Top) {
+		} else if (this.position === y.Top) {
 			let e = this.size < 1 ? this.parentRect.height * this.size : this.size;
 			this.left = this.parentRect.left, this.top = this.parentRect.top, this.width = this.parentRect.width, this.height = e;
-		} else if (this.position === v.Bottom) {
+		} else if (this.position === y.Bottom) {
 			let e = this.size < 1 ? this.parentRect.height * this.size : this.size;
 			this.left = this.parentRect.left, this.top = this.parentRect.top + this.parentRect.height - e, this.width = this.parentRect.width, this.height = e;
 		}
 	}
 	createSash({ resizeStrategy: e } = {}) {
-		return new C({
+		return new w({
 			left: this.left,
 			top: this.top,
 			width: this.width,
@@ -374,8 +384,8 @@ var S = {
 	createPrimaryConfigNode({ size: t, position: n, children: r, id: i, minWidth: a, minHeight: o, ...s }) {
 		return new e({
 			parentRect: this,
-			size: t ?? w.size,
-			position: n ?? w.position,
+			size: t ?? T.size,
+			position: n ?? T.position,
 			children: r,
 			id: i,
 			minWidth: a,
@@ -400,7 +410,7 @@ var S = {
 		let t = this.createSash({ resizeStrategy: e });
 		if (!Array.isArray(this.children) || this.children.length === 0) return t;
 		let n = this.normConfig(this.children[0]), r = this.normConfig(this.children.at(1)), i, a;
-		if (!n.size && !n.position && r ? (r.position ||= v.Right, i = this.createPrimaryConfigNode(r), a = this.createSecondaryConfigNode(n, i)) : (i = this.createPrimaryConfigNode(n), a = this.createSecondaryConfigNode(r, i)), i && a) {
+		if (!n.size && !n.position && r ? (r.position ||= y.Right, i = this.createPrimaryConfigNode(r), a = this.createSecondaryConfigNode(n, i)) : (i = this.createPrimaryConfigNode(n), a = this.createSecondaryConfigNode(r, i)), i && a) {
 			let n = i.buildSashTree({ resizeStrategy: e }), r = a.buildSashTree({ resizeStrategy: e });
 			n.parent = t, r.parent = t, t.children.push(n), t.children.push(r);
 		}
@@ -412,7 +422,7 @@ var S = {
 }, D = {
 	fitContainer: !1,
 	theme: ""
-}, O = class extends T {
+}, ie = class extends re {
 	constructor({ id: e, children: t, width: n = E.width, height: r = E.height, fitContainer: i = D.fitContainer, theme: a = D.theme, ...o } = {
 		...E,
 		...D
@@ -421,7 +431,7 @@ var S = {
 			id: e,
 			children: t,
 			size: NaN,
-			position: v.Root,
+			position: y.Root,
 			parentRect: {
 				width: n,
 				height: r
@@ -429,149 +439,149 @@ var S = {
 			...o
 		}), this.fitContainer = i, this.theme = a;
 	}
-}, re = class extends C {
-	constructor(e = S) {
+}, ae = class extends w {
+	constructor(e = C) {
 		super({
 			...e,
-			position: v.Root
+			position: y.Root
 		}), Object.assign(this, D);
 	}
 };
-function ie(e) {
+function oe(e) {
 	let t = document.createElement("bw-pane");
 	return t.style.top = `${e.top}px`, t.style.left = `${e.left}px`, t.style.width = `${e.width}px`, t.style.height = `${e.height}px`, t.setAttribute("sash-id", e.id), t.setAttribute("position", e.position), t;
 }
-function k(e) {
+function se(e) {
 	let t = e.domNode;
 	return t.style.top = `${e.top}px`, t.style.left = `${e.left}px`, t.style.width = `${e.width}px`, t.style.height = `${e.height}px`, t.setAttribute("position", e.position), t;
 }
-function A(e, { size: t, id: n }) {
+function ce(e, { size: t, id: n }) {
 	let r = f(t), i = e.width / 2;
 	r && (i = r < 1 ? e.width * r : r);
-	let a = new C({
+	let a = new w({
 		id: n,
 		top: e.top,
 		left: e.left,
 		width: i,
 		height: e.height,
-		position: v.Left
-	}), o = new C({
+		position: y.Left
+	}), o = new w({
 		id: e.id,
 		top: e.top,
 		left: e.left + a.width,
 		width: e.width - i,
 		height: e.height,
-		position: v.Right,
+		position: y.Right,
 		domNode: e.domNode
 	});
 	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = l(), a;
 }
-function j(e, { size: t, id: n }) {
+function O(e, { size: t, id: n }) {
 	let r = f(t), i = e.width / 2;
 	r && (i = r < 1 ? e.width * r : r);
-	let a = new C({
+	let a = new w({
 		id: e.id,
 		left: e.left,
 		top: e.top,
 		width: e.width - i,
 		height: e.height,
-		position: v.Left,
+		position: y.Left,
 		domNode: e.domNode
-	}), o = new C({
+	}), o = new w({
 		id: n,
 		left: e.left + a.width,
 		top: e.top,
 		width: i,
 		height: e.height,
-		position: v.Right
+		position: y.Right
 	});
 	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = l(), o;
 }
-function M(e, { size: t, id: n }) {
+function k(e, { size: t, id: n }) {
 	let r = f(t), i = e.height / 2;
 	r && (i = r < 1 ? e.height * r : r);
-	let a = new C({
+	let a = new w({
 		id: n,
 		left: e.left,
 		top: e.top,
 		width: e.width,
 		height: i,
-		position: v.Top
-	}), o = new C({
+		position: y.Top
+	}), o = new w({
 		id: e.id,
 		left: e.left,
 		top: e.top + a.height,
 		width: e.width,
 		height: e.height - i,
-		position: v.Bottom,
+		position: y.Bottom,
 		domNode: e.domNode
 	});
 	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = l(), a;
 }
-function N(e, { size: t, id: n }) {
+function le(e, { size: t, id: n }) {
 	let r = f(t), i = e.height / 2;
 	r && (i = r < 1 ? e.height * r : r);
-	let a = new C({
+	let a = new w({
 		id: e.id,
 		top: e.top,
 		left: e.left,
 		width: e.width,
 		height: e.height - i,
-		position: v.Top,
+		position: y.Top,
 		domNode: e.domNode
-	}), o = new C({
+	}), o = new w({
 		id: n,
 		top: e.top + a.height,
 		left: e.left,
 		width: e.width,
 		height: i,
-		position: v.Bottom
+		position: y.Bottom
 	});
 	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = l(), o;
 }
-function P(e, { position: t, size: n, id: r, minWidth: i, minHeight: a }) {
-	if (t === v.Left) return A(e, {
+function ue(e, { position: t, size: n, id: r, minWidth: i, minHeight: a }) {
+	if (t === y.Left) return ce(e, {
 		size: n,
 		id: r
 	});
-	if (t === v.Right) return j(e, {
+	if (t === y.Right) return O(e, {
 		size: n,
 		id: r
 	});
-	if (t === v.Top) return M(e, {
+	if (t === y.Top) return k(e, {
 		size: n,
 		id: r
 	});
-	if (t === v.Bottom) return N(e, {
+	if (t === y.Bottom) return le(e, {
 		size: n,
 		id: r
 	});
 }
-function F(e) {
+function A(e) {
 	if (e.tagName === "BW-PANE") return e.getAttribute("sash-id");
 	let t = e.closest("bw-pane");
 	if (!t) throw Error("[bwin] Pane element not found");
 	return t.getAttribute("sash-id");
 }
-var I = {
+var de = {
 	createPane(e) {
-		let t = ie(e);
+		let t = oe(e);
 		return e.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
 	},
 	onPaneCreate(e, t) {
-		t.store.content && e.append(g(t.store.content)), this?.debug && (e.style.backgroundColor = c(), e.innerHTML = "", e.append(L(e)));
+		t.store.content && e.append(g(t.store.content)), this?.debug && (e.style.backgroundColor = c(), e.innerHTML = "", e.append(j(e)));
 	},
 	updatePane(e) {
-		return k(e);
+		return se(e);
 	},
 	onPaneUpdate(e, t) {
-		this?.debug && (e.innerHTML = "", e.append(L(e)));
+		this?.debug && (e.innerHTML = "", e.append(j(e)));
 	},
 	addPane(e, { position: t, size: n, id: r }) {
 		if (!t) throw Error("[bwin] Position is required when adding pane");
 		let i = this.rootSash.getById(e);
 		if (!i) throw Error("[bwin] Parent sash not found when adding pane");
-		let a = P(i, {
+		let a = ue(i, {
 			position: t,
 			size: n,
 			id: r
@@ -582,14 +592,14 @@ var I = {
 		let t = this.rootSash.getDescendantParentById(e);
 		if (!t) throw Error("[bwin] Parent sash not found when removing pane");
 		let n = t.getChildSiblingById(e);
-		n.children.length === 0 ? (t.id = n.id, t.domNode = n.domNode, t.domNode.setAttribute("sash-id", n.id), t.children = []) : (t.id = l(), t.children = n.children, n.position === v.Left ? n.width = t.width : n.position === v.Right ? (n.width = t.width, n.left = t.left) : n.position === v.Top ? n.height = t.height : n.position === v.Bottom && (n.height = t.height, n.top = t.top)), this.update();
+		n.children.length === 0 ? (t.id = n.id, t.domNode = n.domNode, t.domNode.setAttribute("sash-id", n.id), t.children = []) : (t.id = l(), t.children = n.children, t.children.forEach((e) => e.parent = t), n.position === y.Left ? n.width = t.width : n.position === y.Right ? (n.width = t.width, n.left = t.left) : n.position === y.Top ? n.height = t.height : n.position === y.Bottom && (n.height = t.height, n.top = t.top)), this.update();
 	},
 	swapPanes(e, t) {
-		let n = F(e), r = F(t), i = e.getAttribute("can-drop") !== "false", a = t.getAttribute("can-drop") !== "false";
+		let n = A(e), r = A(t), i = e.getAttribute("can-drop") !== "false", a = t.getAttribute("can-drop") !== "false";
 		this.rootSash.swapIds(n, r), d(e, this.activeDropPaneEl), e.setAttribute("sash-id", r), t.setAttribute("sash-id", n), e.setAttribute("can-drop", a), t.setAttribute("can-drop", i);
 	}
 };
-function L(e) {
+function j(e) {
 	let t = document.createElement("pre");
 	return t.style.fontSize = "10px", t.innerHTML = `
 ${e.getAttribute("sash-id")}
@@ -600,7 +610,7 @@ width: ${e.style.width}
 height: ${e.style.height}
 `.trim(), t;
 }
-var R = {
+var fe = {
 	createWindow({ theme: e } = {}) {
 		let t = document.createElement("bw-window");
 		return t.style.width = `${this.rootSash.width}px`, t.style.height = `${this.rootSash.height}px`, t.setAttribute("root-sash-id", this.rootSash.id), e && t.setAttribute("theme", e), t;
@@ -621,7 +631,7 @@ var R = {
 			e.children.length > 0 ? t.includes(e.id) ? (this.updateMuntin(e), this.onMuntinUpdate(e.domNode, e)) : (e.domNode = this.createMuntin(e), this.windowElement.append(e.domNode)) : t.includes(e.id) ? (this.updatePane(e), this.onPaneUpdate(e.domNode, e)) : (e.domNode ||= this.createPane(e), this.windowElement.prepend(e.domNode));
 		});
 	}
-}, z = {
+}, pe = {
 	muntinSize: 4,
 	createMuntin(e) {
 		let t = document.createElement("bw-muntin"), n = e.leftChild, r = e.topChild;
@@ -633,7 +643,7 @@ var R = {
 		n ? (t.style.height = `${e.height}px`, t.style.top = `${e.top}px`, t.style.left = `${e.left + n.width - this.muntinSize / 2}px`) : r && (t.style.width = `${e.width}px`, t.style.top = `${e.top + r.height - this.muntinSize / 2}px`, t.style.left = `${e.left}px`);
 	},
 	onMuntinUpdate(e, t) {}
-}, B = {
+}, me = {
 	fitContainer: !1,
 	fit() {
 		this.rootSash.width = this.containerElement.clientWidth, this.rootSash.height = this.containerElement.clientHeight, this.update();
@@ -645,7 +655,7 @@ var R = {
 			});
 		}).observe(this.containerElement);
 	}
-}, V = {
+}, he = {
 	activeMuntinSash: null,
 	isResizeStarted: !1,
 	isDropStarted: !1,
@@ -678,7 +688,7 @@ var R = {
 			this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
 		});
 	}
-}, H = {
+}, ge = {
 	activeDropPaneEl: null,
 	onPaneDrop(e, t) {},
 	enableDrop() {
@@ -686,7 +696,7 @@ var R = {
 			e.preventDefault();
 			let t = e.target.matches("bw-pane") ? e.target : e.target.closest("bw-pane");
 			if (!t || (t !== this.activeDropPaneEl && (this.activeDropPaneEl && this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = t), t.getAttribute("can-drop") === "false")) return;
-			let n = ne(t, e);
+			let n = S(t, e);
 			t.setAttribute("drop-area", n);
 		}), this.windowElement.addEventListener("dragleave", (e) => {
 			e.currentTarget.contains(e.relatedTarget) && e.currentTarget !== e.relatedTarget || (this.activeDropPaneEl &&= (this.activeDropPaneEl.removeAttribute("drop-area"), null));
@@ -696,13 +706,13 @@ var R = {
 			this.onPaneDrop(e, n), typeof n.store.onDrop == "function" && n.store.onDrop(e, n), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
 		});
 	}
-}, U = !1, W = class {
+}, _e = !1, M = class {
 	windowElement = null;
 	containerElement = null;
-	debug = U;
+	debug = _e;
 	constructor(e) {
 		let t = null;
-		e instanceof re ? (t = e, this.rootSash = e) : (t = new O(e), this.rootSash = t.buildSashTree({ resizeStrategy: t.resizeStrategy })), this.fitContainer = t.fitContainer, this.theme = t.theme;
+		e instanceof ae ? (t = e, this.rootSash = e) : (t = new ie(e), this.rootSash = t.buildSashTree({ resizeStrategy: t.resizeStrategy })), this.fitContainer = t.fitContainer;
 	}
 	frame(e) {
 		this.containerElement = e, this.windowElement = this.createWindow({ theme: this.theme }), this.glaze(), this.containerElement.append(this.windowElement);
@@ -719,34 +729,8 @@ var R = {
 		});
 	}
 };
-W.assemble(R, z, I, B, H, V);
-var G = {
-	label: "",
-	className: "bw-glass-action--close",
-	onClick: (e, t) => {
-		let n = F(e.target);
-		t.removePane(n);
-	}
-}, K = {
-	label: "",
-	className: "bw-glass-action--minimize",
-	onClick: (e, t) => {
-		let n = t.sillElement;
-		if (!n) throw Error("[bwin] Sill element not found when minimizing");
-		let r = g("<button class=\"bw-minimized-glass\" />");
-		n.append(r);
-		let i = e.target.closest("bw-pane"), a = e.target.closest("bw-glass"), o = i.getAttribute("sash-id"), s = i.getAttribute("position");
-		r.bwGlassElement = a, r.bwOriginalPosition = s, r.bwOriginalBoundingRect = _(i), r.bwOriginalSashId = o, t.removePane(o);
-	}
-}, q = {
-	label: "",
-	className: "bw-glass-action--maximize",
-	onClick: (e) => {
-		let t = e.target.closest("bw-pane");
-		t.hasAttribute("maximized") ? (t.removeAttribute("maximized"), t.style.left = `${t.bwOriginalBoundingRect.left}px`, t.style.top = `${t.bwOriginalBoundingRect.top}px`, t.style.width = `${t.bwOriginalBoundingRect.width}px`, t.style.height = `${t.bwOriginalBoundingRect.height}px`) : (t.setAttribute("maximized", ""), t.bwOriginalBoundingRect = _(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
-	}
-};
-function J(e, t) {
+M.assemble(fe, pe, de, me, ge, he);
+function N(e, t) {
 	let n = e.left + e.width, r = e.top + e.height, i = t.left + t.width, a = t.top + t.height;
 	if (e.left >= i || t.left >= n || e.top >= a || t.top >= r) return null;
 	let o = Math.max(e.left, t.left), s = Math.max(e.top, t.top), c = Math.min(n, i), l = Math.min(r, a);
@@ -757,26 +741,22 @@ function J(e, t) {
 		height: l - s
 	};
 }
-var Y = [
-	K,
-	q,
-	G
-], ae = {
-	enableActions() {
+var P = {
+	enableGlassActions() {
 		this.handleMinimizedGlassClick(), this.observeActionButtons();
 	},
 	restoreGlass(e) {
 		let t = e.bwOriginalBoundingRect, n = 0, r = null;
 		if (this.windowElement.querySelectorAll("bw-pane").forEach((e) => {
-			let i = J(t, _(e));
+			let i = N(t, v(e));
 			if (i) {
 				let t = i.width * i.height;
 				t > n && (n = t, r = e);
 			}
 		}), r) {
-			let n = e.bwOriginalPosition, i = _(r), a = r.getAttribute("sash-id"), o = this.rootSash.getById(a), s = 0;
-			if (n === v.Left || n === v.Right) s = i.width - t.width < o.minWidth ? i.width / 2 : t.width;
-			else if (n === v.Top || n === v.Bottom) s = i.height - t.height < o.minHeight ? i.height / 2 : t.height;
+			let n = e.bwOriginalPosition, i = v(r), a = r.getAttribute("sash-id"), o = this.rootSash.getById(a), s = 0;
+			if (n === y.Left || n === y.Right) s = i.width - t.width < o.minWidth ? i.width / 2 : t.width;
+			else if (n === y.Top || n === y.Bottom) s = i.height - t.height < o.minHeight ? i.height / 2 : t.height;
 			else throw Error("[bwin] Invalid position when restoring glass");
 			let c = e.bwOriginalSashId;
 			this.addPane(r.getAttribute("sash-id"), {
@@ -794,7 +774,7 @@ var Y = [
 		});
 	},
 	updateDisabledStateOfActionButtons() {
-		this.updateDisabledState(".bw-glass-action--close"), this.updateDisabledState(".bw-glass-action--minimize"), this.updateDisabledState(".bw-glass-action--maximize");
+		this.updateDisabledState(".bw-glass-action--close"), this.updateDisabledState(".bw-glass-action--minimize"), this.updateDisabledState(".bw-glass-action--maximize"), this.updateDisabledState(".bw-glass-action--detach");
 	},
 	updateDisabledState(e) {
 		if (this.windowElement.querySelectorAll("bw-pane").length === 1) {
@@ -815,23 +795,94 @@ var Y = [
 			});
 		}).observe(this.windowElement, { childList: !0 });
 	}
-}, X = {
-	title: null,
-	content: null,
-	tabs: [],
-	actions: void 0,
-	draggable: !0
-}, Z = class {
+}, F = null, I = !1, ve = {
+	onPaneDrop(e, t) {
+		if (!F) return;
+		let n = this.activeDropPaneEl.getAttribute("drop-area");
+		if (n === "center") {
+			let e = F.closest("bw-pane");
+			this.swapPanes(e, this.activeDropPaneEl);
+			return;
+		} else {
+			let e = A(F);
+			this.removePane(e), this.addPane(t.id, {
+				position: n,
+				id: e
+			}).domNode.append(F);
+		}
+	},
+	enableGlassDrag() {
+		document.addEventListener("mousedown", (e) => {
+			if (e.button !== 0 || !e.target.matches("bw-glass-header")) return;
+			if (e.target.getAttribute("can-drag") === "false") {
+				e.preventDefault();
+				return;
+			}
+			let t = e.target.closest("bw-glass");
+			t.setAttribute("draggable", !0), F = t;
+		}), document.addEventListener("mouseup", () => {
+			F &&= (F.removeAttribute("draggable"), null);
+		}), this.windowElement.addEventListener("dragstart", (e) => {
+			if (!(e.target instanceof HTMLElement) || !e.target.matches("bw-glass") || !F) return;
+			e.dataTransfer.effectAllowed = "move";
+			let t = F.closest("bw-pane");
+			I = t.getAttribute("can-drop") !== "false", t.setAttribute("can-drop", !1);
+		}), this.windowElement.addEventListener("dragend", () => {
+			F &&= (F.removeAttribute("draggable"), F.closest("bw-pane").setAttribute("can-drop", I), null);
+		});
+	}
+}, L = {
+	label: "",
+	className: "bw-glass-action--close",
+	onClick: (e, t) => {
+		let n = A(e.target);
+		t.removePane(n);
+	}
+}, R = {
+	label: "",
+	className: "bw-glass-action--minimize",
+	onClick: (e, t) => {
+		let n = t.sillElement;
+		if (!n) throw Error("[bwin] Sill element not found when minimizing");
+		let r = g("<button class=\"bw-minimized-glass\" />");
+		n.append(r);
+		let i = e.target.closest("bw-pane"), a = e.target.closest("bw-glass"), o = i.getAttribute("sash-id"), s = i.getAttribute("position");
+		r.bwGlassElement = a, r.bwOriginalPosition = s, r.bwOriginalBoundingRect = v(i), r.bwOriginalSashId = o, t.removePane(o);
+	}
+}, ye = {
+	label: "",
+	className: "bw-glass-action--maximize",
+	onClick: (e) => {
+		let t = e.target.closest("bw-pane");
+		t.hasAttribute("maximized") ? (t.removeAttribute("maximized"), t.style.left = `${t.bwOriginalBoundingRect.left}px`, t.style.top = `${t.bwOriginalBoundingRect.top}px`, t.style.width = `${t.bwOriginalBoundingRect.width}px`, t.style.height = `${t.bwOriginalBoundingRect.height}px`) : (t.setAttribute("maximized", ""), t.bwOriginalBoundingRect = v(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
+	}
+}, z = 15, B = {
+	label: "",
+	className: "bw-glass-action--detach",
+	onClick: (e, t) => {
+		if (!t.addDetachedGlass) throw Error("[bwin] Failed to detach glass from pane");
+		let n = e.target.closest("bw-pane"), r = n.querySelector("bw-glass-content"), i = n.querySelector("bw-glass-title"), a = t.windowElement.getBoundingClientRect(), o = a.width - z * 2, s = a.height - z * 2, c = t.addDetachedGlass({
+			position: "center",
+			width: o,
+			height: s
+		}), l = n.getAttribute("sash-id"), u = t.rootSash.getById(l), d = u.parent.getChildSiblingById(l).id;
+		c.domNode.bwOriginalSiblingSashId = d, c.domNode.bwOriginalPosition = n.getAttribute("position"), c.domNode.bwOriginalRelativeSize = u.getRelativeSize(), c.contentElement.replaceWith(r), c.titleElement.replaceWith(i), t.removePane(l);
+	}
+}, V = [
+	R,
+	B,
+	L
+], H = class {
 	domNode;
-	constructor({ title: e = X.title, content: t = X.content, tabs: n = X.tabs, actions: r = X.actions, draggable: i = X.draggable, sash: a, binaryWindow: o }) {
+	constructor({ title: e = null, content: t = null, tabs: n = [], actions: r = V, draggable: i = !0, sash: a = null, binaryWindow: o }) {
 		this.title = e, this.content = t, this.tabs = n, this.actions = r, this.sash = a, this.draggable = i, this.binaryWindow = o, this.build();
 	}
 	build() {
 		let e = document.createElement("bw-glass-header");
 		if (Array.isArray(this.tabs) && this.tabs.length > 0) e.append(this.createTabs());
-		else if (this.title) {
+		else {
 			let t = document.createElement("bw-glass-title");
-			t.append(g(this.title)), e.append(t);
+			this.title && t.append(g(this.title)), e.append(t);
 		}
 		e.setAttribute("can-drag", this.draggable), e.append(this.createActions());
 		let t = document.createElement("bw-glass-content"), n = g(this.content);
@@ -846,7 +897,7 @@ var Y = [
 		return e;
 	}
 	createActions() {
-		let e = document.createElement("bw-glass-action-container"), t = this.actions === void 0 ? Y : Array.isArray(this.actions) ? this.actions : [];
+		let e = document.createElement("bw-glass-action-container"), t = Array.isArray(this.actions) ? this.actions : [];
 		for (let n of t) {
 			let t = n?.label ?? n, r = g(`<button class="${n.className ? `bw-glass-action ${n.className}` : "bw-glass-action"}">${t}</button>`);
 			typeof n.onClick == "function" && r.addEventListener("click", (e) => {
@@ -861,45 +912,21 @@ var Y = [
 	get headerElement() {
 		return this.domNode.querySelector("bw-glass-header");
 	}
-}, oe = {
-	activeDragGlassEl: null,
-	activeDragGlassPaneCanDrop: !1,
-	onPaneDrop(e, t) {
-		if (!this.activeDragGlassEl) return;
-		let n = this.activeDropPaneEl.getAttribute("drop-area");
-		if (n === "center") {
-			let e = this.activeDragGlassEl.closest("bw-pane");
-			this.swapPanes(e, this.activeDropPaneEl);
-			return;
-		} else {
-			let e = F(this.activeDragGlassEl);
-			this.removePane(e), this.addPane(t.id, {
-				position: n,
-				id: e
-			}).domNode.append(this.activeDragGlassEl);
-		}
+	get titleElement() {
+		return this.domNode.querySelector("bw-glass-title");
+	}
+}, be = [
+	R,
+	ye,
+	B,
+	L
+], xe = {
+	enableGlassFeature() {
+		this.enableGlassActions(), this.enableGlassDrag();
 	},
-	enableDrag() {
-		document.addEventListener("mousedown", (e) => {
-			if (e.button !== 0 || !e.target.matches("bw-glass-header")) return;
-			if (e.target.getAttribute("can-drag") === "false") {
-				e.preventDefault();
-				return;
-			}
-			let t = e.target.closest("bw-glass");
-			t.setAttribute("draggable", !0), this.activeDragGlassEl = t;
-		}), document.addEventListener("mouseup", () => {
-			this.activeDragGlassEl &&= (this.activeDragGlassEl.removeAttribute("draggable"), null);
-		}), this.windowElement.addEventListener("dragstart", (e) => {
-			if (!(e.target instanceof HTMLElement) || !e.target.matches("bw-glass") || !this.activeDragGlassEl) return;
-			e.dataTransfer.effectAllowed = "move";
-			let t = this.activeDragGlassEl.closest("bw-pane");
-			this.activeDragGlassPaneCanDrop = t.getAttribute("can-drop") !== "false", t.setAttribute("can-drop", !1);
-		}), this.windowElement.addEventListener("dragend", () => {
-			this.activeDragGlassEl &&= (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop", this.activeDragGlassPaneCanDrop), null);
-		});
-	}
-}, se = {
+	...P,
+	...ve
+}, Se = {
 	trimMuntin(e) {
 		e.hasAttribute("vertical") ? (e.style.top = `${parseFloat(e.style.top) + this.muntinSize / 2}px`, e.style.height = `${parseFloat(e.style.height) - this.muntinSize}px`) : e.hasAttribute("horizontal") && (e.style.left = `${parseFloat(e.style.left) + this.muntinSize / 2}px`, e.style.width = `${parseFloat(e.style.width) - this.muntinSize}px`);
 	},
@@ -909,23 +936,289 @@ var Y = [
 	onMuntinUpdate(e) {
 		this.trimMuntin(e);
 	}
-}, Q = class extends W {
+}, Ce = [
+	"n",
+	"s",
+	"e",
+	"w",
+	"ne",
+	"nw",
+	"se",
+	"sw"
+];
+function we() {
+	return Ce.map((e) => {
+		let t = document.createElement("bw-glass-resize-handle");
+		return t.setAttribute("resize-dir", e), t;
+	});
+}
+function Te({ position: e, offset: t, offsetX: n, offsetY: r, width: i, height: a }) {
+	let o = n ?? t, s = r ?? t;
+	switch (e) {
+		case "top-left": return {
+			top: `${s}px`,
+			left: `${o}px`,
+			right: "auto",
+			bottom: "auto"
+		};
+		case "top-right": return {
+			top: `${s}px`,
+			right: `${o}px`,
+			left: "auto",
+			bottom: "auto"
+		};
+		case "bottom-left": return {
+			bottom: `${s}px`,
+			left: `${o}px`,
+			right: "auto",
+			top: "auto"
+		};
+		case "bottom-right": return {
+			bottom: `${s}px`,
+			right: `${o}px`,
+			left: "auto",
+			top: "auto"
+		};
+		case "center": return {
+			top: `calc(50% - ${a / 2}px + ${s}px)`,
+			left: `calc(50% - ${i / 2}px + ${o}px)`,
+			right: "auto",
+			bottom: "auto"
+		};
+		default: throw Error(`Position "${e}" is not supported for detached glass.`);
+	}
+}
+var U = new class {
+	constructor() {
+		this.glasses = [], this.topZIndex = 1;
+	}
+	addGlassByElement(e) {
+		this.glasses.push(e);
+	}
+	getActiveGlass() {
+		return this.glasses.find((e) => e.hasAttribute("active")) ?? null;
+	}
+	bringToFront(e) {
+		e.hasAttribute("active") || (this.topZIndex += 1, e.style.zIndex = this.topZIndex, e.parentElement?.querySelectorAll(":scope > bw-glass[detached][active]").forEach((t) => t !== e && t.removeAttribute("active")), e.setAttribute("active", ""));
+	}
+	removeGlassById(e) {
+		let t = this.glasses.findIndex((t) => t.id === e);
+		if (t !== -1) {
+			let [e] = this.glasses.splice(t, 1);
+			return e;
+		}
+		return null;
+	}
+}(), W = [
+	{
+		label: "",
+		className: "bw-glass-action--minimize",
+		onClick: (e, t) => {
+			let n = t.sillElement;
+			if (!n) throw Error("[bwin] Sill element not found when minimizing");
+			let r = g("<button class=\"bw-minimized-detached-glass\" />");
+			n.append(r);
+			let i = e.target.closest("bw-glass[detached]");
+			if (!i) throw Error("[bwin] Detached Glass element not found when minimizing");
+			r.bwDetachedGlassElement = i, i.style.display = "none";
+		}
+	},
+	{
+		label: "",
+		className: "bw-glass-action--attach",
+		onClick: (e, t) => {
+			let n = e.target.closest("bw-glass[detached]"), r = n.bwOriginalPosition, i = n.bwOriginalSiblingSashId, a = n.bwOriginalRelativeSize, o = t.rootSash.getById(i), s = i, c = r, l = a;
+			if (!o) {
+				let e = t.rootSash.getLargestLeaf();
+				s = e.id, c = e.width > e.height ? "right" : "bottom", l = .5;
+			}
+			let u = n.querySelector("bw-glass-content");
+			t.addPane(s, {
+				position: c,
+				size: l,
+				content: _(u),
+				title: n.querySelector("bw-glass-title")?.textContent || ""
+			}), t.removeDetachedGlass(n.id);
+		}
+	},
+	{
+		label: "",
+		className: "bw-glass-action--close",
+		onClick: (e) => {
+			let t = e.target.closest("bw-glass[detached]");
+			t && (U.removeGlassById(t.id), t.remove());
+		}
+	}
+], Ee = class extends H {
+	constructor(e) {
+		let { position: t, width: n = 222, height: r = 222, offset: i = 0, offsetX: a, offsetY: o, id: s, actions: c = W, ...u } = e;
+		super({
+			...u,
+			actions: c
+		}), this.domNode.setAttribute("id", s || l() + "-F"), this.domNode.setAttribute("detached", ""), this.domNode.style.position = "absolute", this.domNode.style.width = `${n}px`, this.domNode.style.height = `${r}px`;
+		let { top: d, left: f, right: p, bottom: m } = Te({
+			position: t,
+			offset: i,
+			offsetX: a,
+			offsetY: o,
+			width: n,
+			height: r
+		});
+		this.domNode.style.top = d, this.domNode.style.left = f, this.domNode.style.right = p, this.domNode.style.bottom = m;
+	}
+}, De = 200, Oe = 200, G = 25;
+function ke(e, { width: t, height: n }) {
+	let r = U.getActiveGlass();
+	if (!r) return { position: "center" };
+	let i = e.getBoundingClientRect(), a = r.getBoundingClientRect(), o = a.left - i.left + G, s = a.top - i.top + G;
+	return o + t > i.width && (o = G), s + n > i.height && (s = G), {
+		position: "top-left",
+		offsetX: o,
+		offsetY: s
+	};
+}
+var Ae = {
+	addDetachedGlass(e = {}) {
+		let t = e.width ?? De, n = e.height ?? Oe, { position: r, offsetX: i, offsetY: a } = e.position ? {} : ke(this.windowElement, {
+			width: t,
+			height: n
+		}), o = new Ee({
+			actions: this.actions[1],
+			binaryWindow: this,
+			position: r,
+			offsetX: i,
+			offsetY: a,
+			...e,
+			width: t,
+			height: n
+		});
+		return this.windowElement.append(o.domNode), U.addGlassByElement(o.domNode), U.bringToFront(o.domNode), o;
+	},
+	removeDetachedGlass(e) {
+		let t = U.removeGlassById(e);
+		return t?.remove(), t;
+	}
+}, je = { enableDetachedGlassActivate() {
+	this.windowElement.addEventListener("pointerdown", (e) => {
+		if (e.button !== 0) return;
+		let t = e.target.closest?.("bw-glass[detached]");
+		t && U.bringToFront(t);
+	});
+} }, Me = { enableDetachedGlassMove() {
+	let e = null, t = 0, n = 0, r = 0, i = 0;
+	this.windowElement.addEventListener("pointerdown", (a) => {
+		if (a.button !== 0) return;
+		let o = a.target.closest("bw-glass-header");
+		if (!o || a.target.closest("button") || o.getAttribute("can-drag") === "false") return;
+		let s = o.closest("bw-glass[detached]");
+		if (!s) return;
+		a.preventDefault(), o.setPointerCapture(a.pointerId), e = s, t = a.pageX, n = a.pageY;
+		let c = this.windowElement.getBoundingClientRect(), l = s.getBoundingClientRect();
+		r = l.left - c.left, i = l.top - c.top;
+	}), this.windowElement.addEventListener("pointermove", (a) => {
+		if (!e) return;
+		let o = r + (a.pageX - t), s = i + (a.pageY - n);
+		e.style.right = "auto", e.style.bottom = "auto", e.style.left = `${o}px`, e.style.top = `${s}px`;
+	}), this.windowElement.addEventListener("pointerup", (t) => {
+		e &&= (t.target.hasPointerCapture?.(t.pointerId) && t.target.releasePointerCapture(t.pointerId), null);
+	});
+} }, K = null, q = 0, J = 0, Ne = { enableDetachedGlassDrag() {
+	document.addEventListener("mousedown", (e) => {
+		if (e.button !== 0) return;
+		let t = e.target.closest("bw-glass-header");
+		if (!t || e.target.closest("button") || t.getAttribute("can-drag") === "false") return;
+		let n = t.closest("bw-glass[detached]");
+		n && (n.setAttribute("draggable", !0), K = n);
+	}), document.addEventListener("mouseup", () => {
+		K &&= (K.removeAttribute("draggable"), null);
+	}), this.windowElement.addEventListener("dragstart", (e) => {
+		if (!K) return;
+		e.dataTransfer.effectAllowed = "move";
+		let t = K.getBoundingClientRect();
+		q = e.clientX - t.left, J = e.clientY - t.top;
+	}), this.windowElement.addEventListener("dragend", (e) => {
+		if (!K) return;
+		let t = this.windowElement.getBoundingClientRect(), n = e.clientX - t.left - q, r = e.clientY - t.top - J;
+		K.style.right = "auto", K.style.bottom = "auto", K.style.left = `${n}px`, K.style.top = `${r}px`, K.removeAttribute("draggable"), K = null;
+	});
+} }, Y = 100, X = 60;
+function Pe(e) {
+	return !!e.querySelector(":scope > bw-glass-resize-handle");
+}
+function Fe(e) {
+	Pe(e) || e.append(...we());
+}
+function Z(e) {
+	e.querySelectorAll(":scope > bw-glass-resize-handle").forEach((e) => e.remove());
+}
+var Ie = { enableDetachedGlassResize() {
+	let e = null, t = "", n = 0, r = 0, i = null;
+	this.windowElement.addEventListener("pointerover", (e) => {
+		let t = e.target.closest?.("bw-glass[detached]");
+		t && Fe(t);
+	}), this.windowElement.addEventListener("pointerout", (t) => {
+		let n = t.target.closest?.("bw-glass[detached]");
+		n && t.relatedTarget?.closest?.("bw-glass[detached]") !== n && n !== e && Z(n);
+	}), this.windowElement.addEventListener("pointerdown", (a) => {
+		if (a.button !== 0 || a.target.tagName !== "BW-GLASS-RESIZE-HANDLE") return;
+		let o = a.target.closest("bw-glass[detached]");
+		if (!o) return;
+		a.preventDefault(), a.target.setPointerCapture(a.pointerId), e = o, t = a.target.getAttribute("resize-dir"), n = a.pageX, r = a.pageY;
+		let s = this.windowElement.getBoundingClientRect(), c = o.getBoundingClientRect();
+		i = {
+			left: c.left - s.left,
+			top: c.top - s.top,
+			width: c.width,
+			height: c.height
+		};
+	}), this.windowElement.addEventListener("pointermove", (a) => {
+		if (!e) return;
+		let o = t, s = a.pageX - n, c = a.pageY - r, l = i, { left: u, top: d, width: f, height: p } = l;
+		o.includes("e") ? f = Math.max(Y, l.width + s) : o.includes("w") && (f = Math.max(Y, l.width - s), u = l.left + (l.width - f)), o.includes("s") ? p = Math.max(X, l.height + c) : o.includes("n") && (p = Math.max(X, l.height - c), d = l.top + (l.height - p)), e.style.right = "auto", e.style.bottom = "auto", e.style.left = `${u}px`, e.style.top = `${d}px`, e.style.width = `${f}px`, e.style.height = `${p}px`;
+	}), this.windowElement.addEventListener("pointerup", (n) => {
+		if (!e) return;
+		n.target.hasPointerCapture?.(n.pointerId) && n.target.releasePointerCapture(n.pointerId);
+		let r = e;
+		e = null, t = "", i = null, r.matches(":hover") || Z(r);
+	});
+} }, Le = { handleMinimizedDetachedGlassClick() {
+	this.sillElement.addEventListener("click", (e) => {
+		let t = e.target;
+		if (!t.matches(".bw-minimized-detached-glass")) return;
+		let n = t.bwDetachedGlassElement;
+		n && (n.style.display = "", t.remove(), U.bringToFront(n));
+	});
+} }, Re = {
+	enableDetachedGlassFeatures() {
+		this.enableDetachedGlassActivate(), this.enableDetachedGlassResize(), this.enableDetachedGlassMove(), this.handleMinimizedDetachedGlassClick();
+	},
+	...Ae,
+	...je,
+	...Me,
+	...Ne,
+	...Ie,
+	...Le
+}, Q = class e extends M {
 	sillElement = null;
+	constructor(t) {
+		super(t), this.theme = t.theme || "", this.actions = e.normActions(t.actions);
+	}
 	frame() {
 		super.frame(...arguments);
 		let e = g("<bw-sill />");
 		this.windowElement.append(e), this.sillElement = e;
 	}
 	enableFeatures() {
-		super.enableFeatures(), this.enableDrag(), this.enableActions();
+		super.enableFeatures(), this.enableGlassFeature(), this.enableDetachedGlassFeatures();
 	}
 	onPaneCreate(e, t) {
-		let n = new Z({
+		let n = this.actions[0], r = new H({
+			actions: n,
 			...t.store,
 			sash: t,
 			binaryWindow: this
 		});
-		e.innerHTML = "", e.append(n.domNode), this.debug && n.contentElement.prepend(`${t.id}`);
+		e.innerHTML = "", e.append(r.domNode), this.debug && r.contentElement.prepend(`${t.id}`);
 	}
 	onPaneUpdate() {}
 	addPane(e, t) {
@@ -933,7 +1226,7 @@ var Y = [
 			position: n,
 			size: r,
 			id: i
-		}), s = new Z({
+		}), s = new H({
 			...a,
 			sash: o,
 			binaryWindow: this
@@ -955,12 +1248,22 @@ var Y = [
 		let t = this.getMinimizedGlassElementBySashId(e);
 		t && t.remove();
 	}
+	static normActions(e) {
+		if (e === void 0) return [V, W];
+		if (!e || !Array.isArray(e) || e.length === 0) return [[], []];
+		if (e.length === 1 && Array.isArray(e[0])) return [e[0], W];
+		if (!e.some(Array.isArray)) return [e, W];
+		if (e.length >= 2 && !Array.isArray(e[0]) && Array.isArray(e[1])) return [[], e[1]];
+		if (e.length >= 2 && Array.isArray(e[0]) && !Array.isArray(e[1])) return [e[0], []];
+		if (e.length >= 2 && Array.isArray(e[0]) && Array.isArray(e[1])) return e;
+		throw Error("[bwin] Invalid actions format");
+	}
 };
-Q.assemble(oe, se, ae);
+Q.assemble(xe, Re, Se);
 //#endregion
 //#region src/Muntin.tsx
 var $ = 4;
-function ce({ sash: t }) {
+function ze({ sash: t }) {
 	let r = a(), i = t.leftChild, o = t.topChild, s, c, l, u, d, f;
 	return i ? (s = $, c = t.height - $, l = t.top + $ / 2, u = t.left + i.width - $ / 2, d = !0) : o && (s = t.width - $, c = $, l = t.top + o.height - $ / 2, u = t.left + $ / 2, f = !0), n(() => {
 		t.domNode = r.current;
@@ -980,12 +1283,12 @@ function ce({ sash: t }) {
 }
 //#endregion
 //#region src/Pane.tsx
-function le({ sash: t, bwin: r }) {
+function Be({ sash: t, bwin: r }) {
 	let i = a(), { left: o, top: s, width: c, height: l, id: u, position: d } = t;
 	n(() => {
 		t.domNode = i.current;
 	}, []);
-	let f = t.store?.actions === void 0 ? Y : Array.isArray(t.store.actions) ? t.store.actions : [];
+	let f = t.store?.actions === void 0 ? r.actions[0] : Array.isArray(t.store.actions) ? t.store.actions : [];
 	return /* @__PURE__ */ e.createElement("bw-pane", {
 		"sash-id": u,
 		position: d,
@@ -997,7 +1300,7 @@ function le({ sash: t, bwin: r }) {
 		},
 		"can-drop": t.store?.droppable === !1 ? "false" : "true",
 		ref: i
-	}, /* @__PURE__ */ e.createElement("bw-glass", null, /* @__PURE__ */ e.createElement("bw-glass-header", { "can-drag": t.store?.draggable === !1 ? "false" : "true" }, t.store?.title && /* @__PURE__ */ e.createElement("bw-glass-title", null, t.store.title), f.length > 0 && /* @__PURE__ */ e.createElement("bw-glass-action-container", null, f.map((t, n) => {
+	}, /* @__PURE__ */ e.createElement("bw-glass", null, /* @__PURE__ */ e.createElement("bw-glass-header", { "can-drag": t.store?.draggable === !1 ? "false" : "true" }, /* @__PURE__ */ e.createElement("bw-glass-title", null, t.store?.title), f.length > 0 && /* @__PURE__ */ e.createElement("bw-glass-action-container", null, f.map((t, n) => {
 		let i = t.className ? `bw-glass-action ${t.className}` : "bw-glass-action";
 		return /* @__PURE__ */ e.createElement("button", {
 			className: i,
@@ -1008,7 +1311,7 @@ function le({ sash: t, bwin: r }) {
 }
 //#endregion
 //#region src/Window.tsx
-var ue = t((t, c) => {
+var Ve = t((t, c) => {
 	let l = a(), u = a(), [d, f] = o(), { panes: p, ...m } = t, h = new Q({
 		...m,
 		children: p
@@ -1032,11 +1335,11 @@ var ue = t((t, c) => {
 			height: h.rootSash.height
 		},
 		ref: l
-	}, _.map((t) => /* @__PURE__ */ e.createElement(le, {
+	}, _.map((t) => /* @__PURE__ */ e.createElement(Be, {
 		key: t.id,
 		sash: t,
 		bwin: h
-	})), g.map((t) => /* @__PURE__ */ e.createElement(ce, {
+	})), g.map((t) => /* @__PURE__ */ e.createElement(ze, {
 		key: t.id,
 		sash: t
 	})), /* @__PURE__ */ e.createElement("bw-sill", { ref: u })), y = i(() => v, []);
@@ -1048,6 +1351,6 @@ var ue = t((t, c) => {
 		}]);
 	}
 	return /* @__PURE__ */ e.createElement(e.Fragment, null, y, d?.map((e) => s(e.node, e.container)));
-}), de = "0.3.5-dev.0";
+}), He = "0.4.0";
 //#endregion
-export { Y as BUILTIN_ACTIONS, ue as Window, de as version };
+export { be as BUILTIN_ACTIONS, W as DEFAULT_DETACHED_GLASS_ACTIONS, V as DEFAULT_GLASS_ACTIONS, Ve as Window, He as version };