react-bwin 0.4.1 → 0.5.0

package/dist/react-bwin.js

@@ -1,11 +1,12 @@
-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.4.2/node_modules/bwin/dist/bwin.js
-function c(e = .7, t = 128) {
+import * as e from "react";
+import t, { forwardRef as n, useContext as r, useEffect as i, useImperativeHandle as a, useMemo as o, useRef as s, useState as c } from "react";
+import { createPortal as l } from "react-dom";
+//#region node_modules/.pnpm/bwin@0.4.3/node_modules/bwin/dist/bwin.js
+function u(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)})`;
 }
-function l(e = 2, t = 3) {
+function d(e = 2, t = 3) {
 	if (e < 0 || t < 0) throw Error("Parameters must be non-negative numbers");
 	let n = "";
 	for (let t = 0; t < e; t++) {
@@ -19,14 +20,14 @@ function l(e = 2, t = 3) {
 	}
 	return n;
 }
-function u(e, t) {
+function f(e, t) {
 	for (; t.firstChild;) e.append(t.firstChild);
 }
-function d(e, t) {
+function p(e, t) {
 	let n = document.createElement("div");
-	u(n, e), u(e, t), u(t, n);
+	f(n, e), f(e, t), f(t, n);
 }
-function f(e) {
+function m(e) {
 	if (typeof e == "number" && !isNaN(e)) return e;
 	if (typeof e == "string") {
 		let t = e.trim();
@@ -46,35 +47,35 @@ function f(e) {
 	}
 	return NaN;
 }
-function p(e) {
+function h(e) {
 	return typeof e == "object" && !!e && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype;
 }
-function m(e, t) {
+function g(e, t) {
 	for (let n in t) {
 		if (Object.hasOwn(e, n)) throw Error(`Key "${n}" already exists in target object`);
 		e[n] = t[n];
 	}
 	return e;
 }
-function h(e) {
+function _(e) {
 	let t = document.createElement("template");
 	return t.innerHTML = e.trim(), t.content;
 }
-function g(e) {
+function v(e) {
 	if (e == null || e === "") return null;
 	if (typeof e == "string") try {
-		let t = h(e);
+		let t = _(e);
 		return t.childNodes.length === 1 ? t.firstChild : t;
 	} catch {
 		return document.createTextNode(e);
 	}
 	return e instanceof Node ? e : document.createTextNode(String(e));
 }
-function _(e) {
+function y(e) {
 	let t = document.createDocumentFragment();
 	return t.append(...e.childNodes), t;
 }
-function v(e) {
+function b(e) {
 	return {
 		left: parseFloat(e.style.left) || 0,
 		top: parseFloat(e.style.top) || 0,
@@ -82,7 +83,7 @@ function v(e) {
 		height: parseFloat(e.style.height) || 0
 	};
 }
-var y = {
+var x = {
 	Top: "top",
 	Right: "right",
 	Bottom: "bottom",
@@ -92,48 +93,48 @@ var y = {
 	Unknown: "unknown",
 	Outside: "outside"
 };
-function b(e) {
+function S(e) {
 	switch (e) {
-		case y.Top: return y.Bottom;
-		case y.Right: return y.Left;
-		case y.Bottom: return y.Top;
-		case y.Left: return y.Right;
+		case x.Top: return x.Bottom;
+		case x.Right: return x.Left;
+		case x.Bottom: return x.Top;
+		case x.Left: return x.Right;
 		default: throw Error(`[bwin] Invalid position: ${e}`);
 	}
 }
-function x({ width: e, height: t, x: n }) {
+function ee({ width: e, height: t, x: n }) {
 	return t / e * n;
 }
-function ee({ width: e, height: t, y: n }) {
+function te({ width: e, height: t, y: n }) {
 	return e / t * n;
 }
-function te({ width: e, height: t, x: n }) {
+function ne({ width: e, height: t, x: n }) {
 	return t - t / e * n;
 }
-function ne({ width: e, height: t, y: n }) {
+function re({ width: e, height: t, y: n }) {
 	return e - e / t * n;
 }
-function S(e, { clientX: t, clientY: n }) {
+function ie(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 y.Outside;
-	let c = .3, l = x({
+	if (o < 0 || o > i || s < 0 || s > a) return x.Outside;
+	let c = .3, l = ee({
 		width: i,
 		height: a,
 		x: o
-	}), u = te({
+	}), u = ne({
 		width: i,
 		height: a,
 		x: o
-	}), d = ee({
+	}), d = te({
 		width: i,
 		height: a,
 		y: s
-	}), f = ne({
+	}), f = re({
 		width: i,
 		height: a,
 		y: s
 	});
-	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;
+	return o < i * (.5 - c / 2) && s > l && s < u ? x.Left : o > i * .65 && s < l && s > u ? x.Right : s < a * (.5 - c / 2) && o > d && o < f ? x.Top : s > a * .65 && o < d && o > f ? x.Bottom : o > i * (.5 - c / 2) && o < i * .65 && s > a * (.5 - c / 2) && s < a * .65 ? x.Center : x.Unknown;
 }
 var C = {
 	left: 0,
@@ -144,9 +145,9 @@ var C = {
 	minHeight: 100,
 	resizeStrategy: "classic"
 }, 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;
+	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: l = {}, position: u, id: f } = C) {
+		if (this.id = f ?? d(), !u) throw Error("[bwin] Sash position is required");
+		this.position = u, 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 = l;
 	}
 	walk(e) {
 		this.children.forEach((t) => t.walk(e)), e(this);
@@ -158,26 +159,26 @@ var C = {
 		return this.children.length > 0;
 	}
 	isLeftRightSplit() {
-		return this.children.some((e) => e.position === y.Left || e.position === y.Right);
+		return this.children.some((e) => e.position === x.Left || e.position === x.Right);
 	}
 	isTopBottomSplit() {
-		return this.children.some((e) => e.position === y.Top || e.position === y.Bottom);
+		return this.children.some((e) => e.position === x.Top || e.position === x.Bottom);
 	}
 	get leftChild() {
-		return this.children.find((e) => e.position === y.Left);
+		return this.children.find((e) => e.position === x.Left);
 	}
 	get rightChild() {
-		return this.children.find((e) => e.position === y.Right);
+		return this.children.find((e) => e.position === x.Right);
 	}
 	get topChild() {
-		return this.children.find((e) => e.position === y.Top);
+		return this.children.find((e) => e.position === x.Top);
 	}
 	get bottomChild() {
-		return this.children.find((e) => e.position === y.Bottom);
+		return this.children.find((e) => e.position === x.Bottom);
 	}
 	getChildren() {
 		let e = null, t = null, n = null, r = null;
-		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);
+		for (let i of this.children) i.position === x.Left ? e = i : i.position === x.Right ? t = i : i.position === x.Top ? n = i : i.position === x.Bottom && (r = i);
 		return [
 			n,
 			t,
@@ -253,7 +254,7 @@ var C = {
 		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;
+		return this.parent ? this.position === x.Left || this.position === x.Right ? this.width / this.parent.width : this.height / this.parent.height : 1;
 	}
 	get top() {
 		return this._top;
@@ -282,7 +283,7 @@ var C = {
 		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 === 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) {
+			if (this.resizeStrategy === "natural" && this.position === x.Left ? (o = a.width, s = r.width + t, c = r.left) : this.resizeStrategy === "natural" && this.position === x.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);
 			}
@@ -299,7 +300,7 @@ var C = {
 		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 === 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) {
+			if (this.resizeStrategy === "natural" && this.position === x.Top ? (o = n.height, s = i.height + t, c = i.top) : this.resizeStrategy === "natural" && this.position === x.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);
 			}
@@ -309,8 +310,8 @@ var C = {
 	}
 }, T = {
 	size: "50%",
-	position: y.Left
-}, re = class e {
+	position: x.Left
+}, ae = class e {
 	left;
 	top;
 	width;
@@ -320,39 +321,39 @@ var C = {
 	}
 	getPosition(e) {
 		if (!this.siblingConfigNode) return e;
-		let t = b(this.siblingConfigNode.position);
+		let t = S(this.siblingConfigNode.position);
 		if (!e) return t;
 		if (e !== t) throw Error("[bwin] Sibling position and current position are not opposite");
 		return e;
 	}
 	getSize(e) {
-		if (!this.siblingConfigNode) return f(e);
+		if (!this.siblingConfigNode) return m(e);
 		if (!e) {
 			if (this.siblingConfigNode.size < 1) return 1 - this.siblingConfigNode.size;
-			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;
+			if (this.siblingConfigNode.position === x.Left || this.siblingConfigNode.position === x.Right) return this.parentRect.width - this.siblingConfigNode.width;
+			if (this.siblingConfigNode.position === x.Top || this.siblingConfigNode.position === x.Bottom) return this.parentRect.height - this.siblingConfigNode.height;
 		}
-		let t = f(e);
+		let t = m(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 === 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");
+			if ((this.position === x.Left || this.position === x.Right) && t + this.siblingConfigNode.size !== this.parentRect.width) throw Error("[bwin] Sum of sibling sizes is not equal to parent width");
+			if ((this.position === x.Top || this.position === x.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 === y.Root) this.left = 0, this.top = 0, this.width = this.parentRect.width, this.height = this.parentRect.height;
-		else if (this.position === y.Left) {
+		if (this.position === x.Root) this.left = 0, this.top = 0, this.width = this.parentRect.width, this.height = this.parentRect.height;
+		else if (this.position === x.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 === y.Right) {
+		} else if (this.position === x.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 === y.Top) {
+		} else if (this.position === x.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 === y.Bottom) {
+		} else if (this.position === x.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;
 		}
@@ -372,10 +373,10 @@ var C = {
 		});
 	}
 	normConfig(e) {
-		if (p(e)) return e;
+		if (h(e)) return e;
 		if (Array.isArray(e)) return { children: e };
 		if (typeof e == "string" || typeof e == "number") {
-			let t = f(e);
+			let t = m(e);
 			if (isNaN(t)) throw Error(`[bwin] Invalid size value: ${t}`);
 			return { size: e };
 		} else if (e == null) return {};
@@ -410,7 +411,7 @@ var C = {
 		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 ||= y.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 ||= x.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);
 		}
@@ -422,7 +423,7 @@ var C = {
 }, D = {
 	fitContainer: !1,
 	theme: ""
-}, ie = class extends re {
+}, oe = class extends ae {
 	constructor({ id: e, children: t, width: n = E.width, height: r = E.height, fitContainer: i = D.fitContainer, theme: a = D.theme, ...o } = {
 		...E,
 		...D
@@ -431,7 +432,7 @@ var C = {
 			id: e,
 			children: t,
 			size: NaN,
-			position: y.Root,
+			position: x.Root,
 			parentRect: {
 				width: n,
 				height: r
@@ -439,24 +440,24 @@ var C = {
 			...o
 		}), this.fitContainer = i, this.theme = a;
 	}
-}, ae = class extends w {
+}, se = class extends w {
 	constructor(e = C) {
 		super({
 			...e,
-			position: y.Root
+			position: x.Root
 		}), Object.assign(this, D);
 	}
 };
-function oe(e) {
+function ce(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 se(e) {
+function le(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 ce(e, { size: t, id: n }) {
-	let r = f(t), i = e.width / 2;
+function ue(e, { size: t, id: n }) {
+	let r = m(t), i = e.width / 2;
 	r && (i = r < 1 ? e.width * r : r);
 	let a = new w({
 		id: n,
@@ -464,20 +465,20 @@ function ce(e, { size: t, id: n }) {
 		left: e.left,
 		width: i,
 		height: e.height,
-		position: y.Left
+		position: x.Left
 	}), o = new w({
 		id: e.id,
 		top: e.top,
 		left: e.left + a.width,
 		width: e.width - i,
 		height: e.height,
-		position: y.Right,
+		position: x.Right,
 		domNode: e.domNode
 	});
-	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = l(), a;
+	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = d(), a;
 }
-function O(e, { size: t, id: n }) {
-	let r = f(t), i = e.width / 2;
+function de(e, { size: t, id: n }) {
+	let r = m(t), i = e.width / 2;
 	r && (i = r < 1 ? e.width * r : r);
 	let a = new w({
 		id: e.id,
@@ -485,7 +486,7 @@ function O(e, { size: t, id: n }) {
 		top: e.top,
 		width: e.width - i,
 		height: e.height,
-		position: y.Left,
+		position: x.Left,
 		domNode: e.domNode
 	}), o = new w({
 		id: n,
@@ -493,12 +494,12 @@ function O(e, { size: t, id: n }) {
 		top: e.top,
 		width: i,
 		height: e.height,
-		position: y.Right
+		position: x.Right
 	});
-	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = l(), o;
+	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = d(), o;
 }
-function k(e, { size: t, id: n }) {
-	let r = f(t), i = e.height / 2;
+function fe(e, { size: t, id: n }) {
+	let r = m(t), i = e.height / 2;
 	r && (i = r < 1 ? e.height * r : r);
 	let a = new w({
 		id: n,
@@ -506,20 +507,20 @@ function k(e, { size: t, id: n }) {
 		top: e.top,
 		width: e.width,
 		height: i,
-		position: y.Top
+		position: x.Top
 	}), o = new w({
 		id: e.id,
 		left: e.left,
 		top: e.top + a.height,
 		width: e.width,
 		height: e.height - i,
-		position: y.Bottom,
+		position: x.Bottom,
 		domNode: e.domNode
 	});
-	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = l(), a;
+	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = d(), a;
 }
-function le(e, { size: t, id: n }) {
-	let r = f(t), i = e.height / 2;
+function pe(e, { size: t, id: n }) {
+	let r = m(t), i = e.height / 2;
 	r && (i = r < 1 ? e.height * r : r);
 	let a = new w({
 		id: e.id,
@@ -527,7 +528,7 @@ function le(e, { size: t, id: n }) {
 		left: e.left,
 		width: e.width,
 		height: e.height - i,
-		position: y.Top,
+		position: x.Top,
 		domNode: e.domNode
 	}), o = new w({
 		id: n,
@@ -535,53 +536,53 @@ function le(e, { size: t, id: n }) {
 		left: e.left,
 		width: e.width,
 		height: i,
-		position: y.Bottom
+		position: x.Bottom
 	});
-	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = l(), o;
+	return e.addChild(a), e.addChild(o), e.domNode = null, e.id = d(), o;
 }
-function ue(e, { position: t, size: n, id: r, minWidth: i, minHeight: a }) {
-	if (t === y.Left) return ce(e, {
+function me(e, { position: t, size: n, id: r, minWidth: i, minHeight: a }) {
+	if (t === x.Left) return ue(e, {
 		size: n,
 		id: r
 	});
-	if (t === y.Right) return O(e, {
+	if (t === x.Right) return de(e, {
 		size: n,
 		id: r
 	});
-	if (t === y.Top) return k(e, {
+	if (t === x.Top) return fe(e, {
 		size: n,
 		id: r
 	});
-	if (t === y.Bottom) return le(e, {
+	if (t === x.Bottom) return pe(e, {
 		size: n,
 		id: r
 	});
 }
-function A(e) {
+function O(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 de = {
+var he = {
 	createPane(e) {
-		let t = oe(e);
+		let t = ce(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(j(e)));
+		t.store.content && e.append(v(t.store.content)), this?.debug && (e.style.backgroundColor = u(), e.innerHTML = "", e.append(k(e)));
 	},
 	updatePane(e) {
-		return se(e);
+		return le(e);
 	},
 	onPaneUpdate(e, t) {
-		this?.debug && (e.innerHTML = "", e.append(j(e)));
+		this?.debug && (e.innerHTML = "", e.append(k(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 = ue(i, {
+		let a = me(i, {
 			position: t,
 			size: n,
 			id: r
@@ -592,14 +593,14 @@ var de = {
 		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, 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();
+		n.children.length === 0 ? (t.id = n.id, t.domNode = n.domNode, t.domNode.setAttribute("sash-id", n.id), t.children = []) : (t.id = d(), t.children = n.children, t.children.forEach((e) => e.parent = t), n.position === x.Left ? n.width = t.width : n.position === x.Right ? (n.width = t.width, n.left = t.left) : n.position === x.Top ? n.height = t.height : n.position === x.Bottom && (n.height = t.height, n.top = t.top)), this.update();
 	},
 	swapPanes(e, t) {
-		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);
+		let n = O(e), r = O(t), i = e.getAttribute("can-drop") !== "false", a = t.getAttribute("can-drop") !== "false";
+		this.rootSash.swapIds(n, r), p(e, this.activeDropPaneEl), e.setAttribute("sash-id", r), t.setAttribute("sash-id", n), e.setAttribute("can-drop", a), t.setAttribute("can-drop", i);
 	}
 };
-function j(e) {
+function k(e) {
 	let t = document.createElement("pre");
 	return t.style.fontSize = "10px", t.innerHTML = `
 ${e.getAttribute("sash-id")}
@@ -610,7 +611,7 @@ width: ${e.style.width}
 height: ${e.style.height}
 `.trim(), t;
 }
-var fe = {
+var ge = {
 	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;
@@ -631,7 +632,7 @@ var fe = {
 			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));
 		});
 	}
-}, pe = {
+}, _e = {
 	muntinSize: 4,
 	createMuntin(e) {
 		let t = document.createElement("bw-muntin"), n = e.leftChild, r = e.topChild;
@@ -643,7 +644,7 @@ var fe = {
 		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) {}
-}, me = {
+}, ve = {
 	fitContainer: !1,
 	fit() {
 		this.rootSash.width = this.containerElement.clientWidth, this.rootSash.height = this.containerElement.clientHeight, this.update();
@@ -655,7 +656,7 @@ var fe = {
 			});
 		}).observe(this.containerElement);
 	}
-}, he = {
+}, ye = {
 	activeMuntinSash: null,
 	isResizeStarted: !1,
 	isDropStarted: !1,
@@ -688,7 +689,7 @@ var fe = {
 			this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
 		});
 	}
-}, ge = {
+}, be = {
 	activeDropPaneEl: null,
 	onPaneDrop(e, t) {},
 	enableDrop() {
@@ -696,7 +697,7 @@ var fe = {
 			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 = S(t, e);
+			let n = ie(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));
@@ -706,13 +707,13 @@ var fe = {
 			this.onPaneDrop(e, n), typeof n.store.onDrop == "function" && n.store.onDrop(e, n), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
 		});
 	}
-}, _e = !1, M = class {
+}, xe = !1, A = class {
 	windowElement = null;
 	containerElement = null;
-	debug = _e;
+	debug = xe;
 	constructor(e) {
 		let t = null;
-		e instanceof ae ? (t = e, this.rootSash = e) : (t = new ie(e), this.rootSash = t.buildSashTree({ resizeStrategy: t.resizeStrategy })), this.fitContainer = t.fitContainer;
+		e instanceof se ? (t = e, this.rootSash = e) : (t = new oe(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);
@@ -725,12 +726,12 @@ var fe = {
 	}
 	static assemble(...e) {
 		e.forEach((e) => {
-			m(this.prototype, e);
+			g(this.prototype, e);
 		});
 	}
 };
-M.assemble(fe, pe, de, me, ge, he);
-function N(e, t) {
+A.assemble(ge, _e, he, ve, be, ye);
+function j(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);
@@ -741,28 +742,29 @@ function N(e, t) {
 		height: l - s
 	};
 }
-var P = {
+var M = {
 	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 = N(t, v(e));
+			let i = j(t, b(e));
 			if (i) {
 				let t = i.width * i.height;
 				t > n && (n = t, r = e);
 			}
 		}), r) {
-			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;
+			let n = e.bwOriginalPosition, i = b(r), a = r.getAttribute("sash-id"), o = this.rootSash.getById(a), s = 0;
+			if (n === x.Left || n === x.Right) s = i.width - t.width < o.minWidth ? i.width / 2 : t.width;
+			else if (n === x.Top || n === x.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"), {
 				id: c,
 				position: n,
-				size: s
+				size: s,
+				withGlass: !1
 			}).domNode.append(e.bwGlassElement);
 		}
 	},
@@ -795,20 +797,21 @@ var P = {
 			});
 		}).observe(this.windowElement, { childList: !0 });
 	}
-}, F = null, I = !1, ve = {
+}, N = null, P = !1, Se = {
 	onPaneDrop(e, t) {
-		if (!F) return;
+		if (!N) return;
 		let n = this.activeDropPaneEl.getAttribute("drop-area");
 		if (n === "center") {
-			let e = F.closest("bw-pane");
+			let e = N.closest("bw-pane");
 			this.swapPanes(e, this.activeDropPaneEl);
 			return;
 		} else {
-			let e = A(F);
+			let e = O(N);
 			this.removePane(e), this.addPane(t.id, {
 				position: n,
-				id: e
-			}).domNode.replaceChildren(F);
+				id: e,
+				withGlass: !1
+			}).domNode.append(N);
 		}
 	},
 	enableGlassDrag() {
@@ -819,62 +822,62 @@ var P = {
 				return;
 			}
 			let t = e.target.closest("bw-glass");
-			t.setAttribute("draggable", !0), F = t;
+			t.setAttribute("draggable", !0), N = t;
 		}), document.addEventListener("mouseup", () => {
-			F &&= (F.removeAttribute("draggable"), null);
+			N &&= (N.removeAttribute("draggable"), null);
 		}), this.windowElement.addEventListener("dragstart", (e) => {
-			if (!(e.target instanceof HTMLElement) || !e.target.matches("bw-glass") || !F) return;
+			if (!(e.target instanceof HTMLElement) || !e.target.matches("bw-glass") || !N) return;
 			e.dataTransfer.effectAllowed = "move";
-			let t = F.closest("bw-pane");
-			I = t.getAttribute("can-drop") !== "false", t.setAttribute("can-drop", !1);
+			let t = N.closest("bw-pane");
+			P = 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);
+			N &&= (N.removeAttribute("draggable"), N.closest("bw-pane").setAttribute("can-drop", P), null);
 		});
 	}
-}, L = {
+}, F = {
 	label: "",
 	className: "bw-glass-action--close",
 	onClick: (e, t) => {
-		let n = A(e.target);
+		let n = O(e.target);
 		t.removePane(n);
 	}
-}, R = {
+}, I = {
 	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\" />");
+		let r = v("<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);
+		r.bwGlassElement = a, r.bwOriginalPosition = s, r.bwOriginalBoundingRect = b(i), r.bwOriginalSashId = o, t.removePane(o);
 	}
-}, ye = {
+}, Ce = {
 	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%");
+		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 = b(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
 	}
-}, z = 15, B = {
+}, L = 15, R = {
 	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({
+		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 - L * 2, s = a.height - L * 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), i && c.titleElement.replaceWith(i), t.removePane(l);
 	}
-}, V = [
+}, z = [
+	I,
 	R,
-	B,
-	L
-], H = class {
+	F
+], B = class {
 	domNode;
-	constructor({ title: e = null, content: t = null, tabs: n = [], actions: r = V, draggable: i = !0, sash: a = null, binaryWindow: o }) {
+	constructor({ title: e = null, content: t = null, tabs: n = [], actions: r = z, 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() {
@@ -882,16 +885,16 @@ var P = {
 		if (Array.isArray(this.tabs) && this.tabs.length > 0) e.append(this.createTabs());
 		else {
 			let t = document.createElement("bw-glass-title");
-			this.title && t.append(g(this.title)), e.append(t);
+			this.title && t.append(v(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);
+		let t = document.createElement("bw-glass-content"), n = v(this.content);
 		n && t.append(n), this.domNode = document.createElement("bw-glass"), this.domNode.append(e, t);
 	}
 	createTabs() {
 		let e = document.createElement("bw-glass-tab-container");
 		for (let t of this.tabs) {
-			let n = g(`<button class="bw-glass-tab">${t?.label ?? t}</button>`);
+			let n = v(`<button class="bw-glass-tab">${t?.label ?? t}</button>`);
 			e.append(n);
 		}
 		return e;
@@ -899,7 +902,7 @@ var P = {
 	createActions() {
 		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>`);
+			let t = n?.label ?? n, r = v(`<button class="${n.className ? `bw-glass-action ${n.className}` : "bw-glass-action"}">${t}</button>`);
 			typeof n.onClick == "function" && r.addEventListener("click", (e) => {
 				n.onClick(e, this.binaryWindow);
 			}), e.append(r);
@@ -915,18 +918,18 @@ var P = {
 	get titleElement() {
 		return this.domNode.querySelector("bw-glass-title");
 	}
-}, be = [
+}, we = [
+	I,
+	Ce,
 	R,
-	ye,
-	B,
-	L
-], xe = {
+	F
+], Te = {
 	enableGlassFeature() {
 		this.enableGlassActions(), this.enableGlassDrag();
 	},
-	...P,
-	...ve
-}, Se = {
+	...M,
+	...Se
+}, Ee = {
 	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`);
 	},
@@ -936,7 +939,7 @@ var P = {
 	onMuntinUpdate(e) {
 		this.trimMuntin(e);
 	}
-}, Ce = [
+}, De = [
 	"n",
 	"s",
 	"e",
@@ -946,13 +949,13 @@ var P = {
 	"se",
 	"sw"
 ];
-function we() {
-	return Ce.map((e) => {
+function Oe() {
+	return De.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 }) {
+function ke({ 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 {
@@ -988,7 +991,7 @@ function Te({ position: e, offset: t, offsetX: n, offsetY: r, width: i, height:
 		default: throw Error(`Position "${e}" is not supported for detached glass.`);
 	}
 }
-var U = new class {
+var V = new class {
 	constructor() {
 		this.glasses = [], this.topZIndex = 1;
 	}
@@ -1009,14 +1012,14 @@ var U = new class {
 		}
 		return null;
 	}
-}(), W = [
+}(), H = [
 	{
 		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\" />");
+			let r = v("<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");
@@ -1036,7 +1039,7 @@ var U = new class {
 			t.addPane(s, {
 				position: c,
 				size: l,
-				content: _(u),
+				content: y(u),
 				title: n.querySelector("bw-glass-title")?.textContent || ""
 			}), t.removeDetachedGlass(n.id);
 		}
@@ -1046,17 +1049,17 @@ var U = new class {
 		className: "bw-glass-action--close",
 		onClick: (e) => {
 			let t = e.target.closest("bw-glass[detached]");
-			t && (U.removeGlassById(t.id), t.remove());
+			t && (V.removeGlassById(t.id), t.remove());
 		}
 	}
-], Ee = class extends H {
+], U = class extends B {
 	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;
+		let { position: t, width: n = 222, height: r = 222, offset: i = 0, offsetX: a, offsetY: o, id: s, actions: c = H, ...l } = e;
 		super({
-			...u,
+			...l,
 			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({
+		}), this.domNode.setAttribute("id", s || d() + "-F"), this.domNode.setAttribute("detached", ""), this.domNode.style.position = "absolute", this.domNode.style.width = `${n}px`, this.domNode.style.height = `${r}px`;
+		let { top: u, left: f, right: p, bottom: m } = ke({
 			position: t,
 			offset: i,
 			offsetX: a,
@@ -1064,25 +1067,25 @@ var U = new class {
 			width: n,
 			height: r
 		});
-		this.domNode.style.top = d, this.domNode.style.left = f, this.domNode.style.right = p, this.domNode.style.bottom = m;
+		this.domNode.style.top = u, 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();
+}, Ae = 200, je = 200, W = 25;
+function Me(e, { width: t, height: n }) {
+	let r = V.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), {
+	let i = e.getBoundingClientRect(), a = r.getBoundingClientRect(), o = a.left - i.left + W, s = a.top - i.top + W;
+	return o + t > i.width && (o = W), s + n > i.height && (s = W), {
 		position: "top-left",
 		offsetX: o,
 		offsetY: s
 	};
 }
-var Ae = {
+var Ne = {
 	addDetachedGlass(e = {}) {
-		let t = e.width ?? De, n = e.height ?? Oe, { position: r, offsetX: i, offsetY: a } = e.position ? {} : ke(this.windowElement, {
+		let t = e.width ?? Ae, n = e.height ?? je, { position: r, offsetX: i, offsetY: a } = e.position ? {} : Me(this.windowElement, {
 			width: t,
 			height: n
-		}), o = new Ee({
+		}), o = new U({
 			actions: this.actions[1],
 			binaryWindow: this,
 			position: r,
@@ -1092,19 +1095,19 @@ var Ae = {
 			width: t,
 			height: n
 		});
-		return this.windowElement.append(o.domNode), U.addGlassByElement(o.domNode), U.bringToFront(o.domNode), o;
+		return this.windowElement.append(o.domNode), V.addGlassByElement(o.domNode), V.bringToFront(o.domNode), o;
 	},
 	removeDetachedGlass(e) {
-		let t = U.removeGlassById(e);
+		let t = V.removeGlassById(e);
 		return t?.remove(), t;
 	}
-}, je = { enableDetachedGlassActivate() {
+}, Pe = { enableDetachedGlassActivate() {
 	this.windowElement.addEventListener("pointerdown", (e) => {
 		if (e.button !== 0) return;
 		let t = e.target.closest?.("bw-glass[detached]");
-		t && U.bringToFront(t);
+		t && V.bringToFront(t);
 	});
-} }, Me = { enableDetachedGlassMove() {
+} }, Fe = { enableDetachedGlassMove() {
 	let e = null, t = 0, n = 0, r = 0, i = 0;
 	this.windowElement.addEventListener("pointerdown", (a) => {
 		if (a.button !== 0) return;
@@ -1122,43 +1125,43 @@ var Ae = {
 	}), 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() {
+} }, G = null, K = 0, q = 0, Ie = { 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);
+		n && (n.setAttribute("draggable", !0), G = n);
 	}), document.addEventListener("mouseup", () => {
-		K &&= (K.removeAttribute("draggable"), null);
+		G &&= (G.removeAttribute("draggable"), null);
 	}), this.windowElement.addEventListener("dragstart", (e) => {
-		if (!K) return;
+		if (!G) return;
 		e.dataTransfer.effectAllowed = "move";
-		let t = K.getBoundingClientRect();
-		q = e.clientX - t.left, J = e.clientY - t.top;
+		let t = G.getBoundingClientRect();
+		K = e.clientX - t.left, q = 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;
+		if (!G) return;
+		let t = this.windowElement.getBoundingClientRect(), n = e.clientX - t.left - K, r = e.clientY - t.top - q;
+		G.style.right = "auto", G.style.bottom = "auto", G.style.left = `${n}px`, G.style.top = `${r}px`, G.removeAttribute("draggable"), G = null;
 	});
-} }, Y = 100, X = 60;
-function Pe(e) {
+} }, J = 100, Y = 60;
+function Le(e) {
 	return !!e.querySelector(":scope > bw-glass-resize-handle");
 }
-function Fe(e) {
-	Pe(e) || e.append(...we());
+function Re(e) {
+	Le(e) || e.append(...Oe());
 }
-function Z(e) {
+function X(e) {
 	e.querySelectorAll(":scope > bw-glass-resize-handle").forEach((e) => e.remove());
 }
-var Ie = { enableDetachedGlassResize() {
+var ze = { 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);
+		t && Re(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);
+		n && t.relatedTarget?.closest?.("bw-glass[detached]") !== n && n !== e && X(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]");
@@ -1174,45 +1177,45 @@ var Ie = { enableDetachedGlassResize() {
 	}), 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`;
+		o.includes("e") ? f = Math.max(J, l.width + s) : o.includes("w") && (f = Math.max(J, l.width - s), u = l.left + (l.width - f)), o.includes("s") ? p = Math.max(Y, l.height + c) : o.includes("n") && (p = Math.max(Y, 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);
+		e = null, t = "", i = null, r.matches(":hover") || X(r);
 	});
-} }, Le = { handleMinimizedDetachedGlassClick() {
+} }, Be = { 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));
+		n && (n.style.display = "", t.remove(), V.bringToFront(n));
 	});
-} }, Re = {
+} }, Ve = {
 	enableDetachedGlassFeatures() {
 		this.enableDetachedGlassActivate(), this.enableDetachedGlassResize(), this.enableDetachedGlassMove(), this.handleMinimizedDetachedGlassClick();
 	},
-	...Ae,
-	...je,
-	...Me,
 	...Ne,
+	...Pe,
+	...Fe,
 	...Ie,
-	...Le
-}, Q = class e extends M {
+	...ze,
+	...Be
+}, Z = class e extends A {
 	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 />");
+		let e = v("<bw-sill />");
 		this.windowElement.append(e), this.sillElement = e;
 	}
 	enableFeatures() {
 		super.enableFeatures(), this.enableGlassFeature(), this.enableDetachedGlassFeatures();
 	}
 	onPaneCreate(e, t) {
-		let n = this.actions[0], r = new H({
+		let n = this.actions[0], r = new B({
 			actions: n,
 			...t.store,
 			sash: t,
@@ -1222,16 +1225,20 @@ var Ie = { enableDetachedGlassResize() {
 	}
 	onPaneUpdate() {}
 	addPane(e, t) {
-		let { position: n, size: r, id: i, ...a } = t, o = super.addPane(e, {
+		let { position: n, size: r, id: i, withGlass: a = !0, ...o } = t, s = super.addPane(e, {
 			position: n,
 			size: r,
 			id: i
-		}), s = new H({
-			...a,
-			sash: o,
-			binaryWindow: this
 		});
-		return o.domNode.append(s.domNode), o;
+		if (a) {
+			let e = new B({
+				...o,
+				sash: s,
+				binaryWindow: this
+			});
+			s.domNode.append(e.domNode);
+		}
+		return s;
 	}
 	setTheme(e) {
 		if (!e) {
@@ -1249,108 +1256,138 @@ var Ie = { enableDetachedGlassResize() {
 		t && t.remove();
 	}
 	static normActions(e) {
-		if (e === void 0) return [V, W];
+		if (e === void 0) return [z, H];
 		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 === 1 && Array.isArray(e[0])) return [e[0], H];
+		if (!e.some(Array.isArray)) return [e, H];
 		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(xe, Re, Se);
+Z.assemble(Te, Ve, Ee);
 //#endregion
 //#region src/Muntin.tsx
-var $ = 4;
-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;
-	}, []), /* @__PURE__ */ e.createElement("bw-muntin", {
-		"sash-id": t.id,
+var Q = 4;
+function He({ sash: e }) {
+	let n = s(), r = e.leftChild, a = e.topChild, o, c, l, u, d, f;
+	return r ? (o = Q, c = e.height - Q, l = e.top + Q / 2, u = e.left + r.width - Q / 2, d = !0) : a && (o = e.width - Q, c = Q, l = e.top + a.height - Q / 2, u = e.left + Q / 2, f = !0), i(() => {
+		e.domNode = n.current;
+	}, []), /* @__PURE__ */ t.createElement("bw-muntin", {
+		"sash-id": e.id,
 		style: {
-			width: s,
+			width: o,
 			height: c,
 			top: l,
 			left: u
 		},
 		vertical: d,
 		horizontal: f,
-		resizable: t.store?.resizable === !1 ? "false" : "true",
-		ref: r
+		resizable: e.store?.resizable === !1 ? "false" : "true",
+		ref: n
 	});
 }
 //#endregion
 //#region src/Pane.tsx
-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;
+function Ue({ sash: e, bwin: n }) {
+	let r = s(), { left: a, top: o, width: c, height: l, id: u, position: d } = e;
+	i(() => {
+		e.domNode = r.current;
 	}, []);
-	let f = t.store?.actions === void 0 ? r.actions[0] : Array.isArray(t.store.actions) ? t.store.actions : [];
-	return /* @__PURE__ */ e.createElement("bw-pane", {
+	let f = e.store?.actions === void 0 ? n.actions[0] : Array.isArray(e.store.actions) ? e.store.actions : [];
+	return /* @__PURE__ */ t.createElement("bw-pane", {
 		"sash-id": u,
 		position: d,
 		style: {
-			left: o,
-			top: s,
+			left: a,
+			top: o,
 			width: c,
 			height: l
 		},
-		"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" }, /* @__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", {
+		"can-drop": e.store?.droppable === !1 ? "false" : "true",
+		ref: r
+	}, /* @__PURE__ */ t.createElement("bw-glass", null, /* @__PURE__ */ t.createElement("bw-glass-header", { "can-drag": e.store?.draggable === !1 ? "false" : "true" }, /* @__PURE__ */ t.createElement("bw-glass-title", null, e.store?.title), f.length > 0 && /* @__PURE__ */ t.createElement("bw-glass-action-container", null, f.map((e, r) => {
+		let i = e.className ? `bw-glass-action ${e.className}` : "bw-glass-action";
+		return /* @__PURE__ */ t.createElement("button", {
 			className: i,
-			key: n,
-			onClick: (e) => t.onClick(e, r)
-		}, t.label);
-	}))), /* @__PURE__ */ e.createElement("bw-glass-content", null, t.store?.content)));
+			key: r,
+			onClick: (t) => e.onClick(t, n)
+		}, e.label);
+	}))), /* @__PURE__ */ t.createElement("bw-glass-content", null, e.store?.content)));
+}
+//#endregion
+//#region src/WindowProvider.tsx
+var $ = e.createContext(null);
+function We({ children: t }) {
+	let n = e.useRef(null);
+	return /* @__PURE__ */ e.createElement($.Provider, { value: { api: n } }, t);
+}
+function Ge() {
+	let t = e.useContext($);
+	if (!t) throw Error("useWindow must be used within a WindowProvider");
+	let { api: n } = t, r = e.useRef();
+	return r.current ||= new Proxy({}, { get(e, t) {
+		return (...e) => {
+			if (!n.current) throw Error("[react-bwin] Window API is not ready yet. Render a <Window> inside the <WindowProvider> before calling its methods.");
+			let r = n.current[t];
+			return r(...e);
+		};
+	} }), r.current;
 }
 //#endregion
 //#region src/Window.tsx
-var Ve = t((t, c) => {
-	let l = a(), u = a(), [d, f] = o(), { panes: p, ...m } = t, h = new Q({
-		...m,
-		children: p
-	}), g = [], _ = [];
-	h.rootSash.walk((e) => {
-		e.children.length > 0 ? g.push(e) : _.push(e);
-	}), n(() => {
-		let e = l.current;
-		e?.parentElement && (h.windowElement = e, h.containerElement = e.parentElement, h.sillElement = u.current, h.enableFeatures());
-	}, []), r(c, () => ({
-		fit: h.fit.bind(h),
-		removePane: h.removePane.bind(h),
-		setTheme: h.setTheme.bind(h),
-		addPane: b
+var Ke = n((e, n) => {
+	let u = s(), d = s(), [f, p] = c(), { panes: m, ...h } = e, g = new Z({
+		...h,
+		children: m
+	}), _ = [], v = [];
+	g.rootSash.walk((e) => {
+		e.children.length > 0 ? _.push(e) : v.push(e);
+	}), i(() => {
+		let e = u.current;
+		e?.parentElement && (g.windowElement = e, g.containerElement = e.parentElement, g.sillElement = d.current, g.enableFeatures());
+	}, []), a(n, () => ({
+		fit: g.fit.bind(g),
+		removePane: g.removePane.bind(g),
+		setTheme: g.setTheme.bind(g),
+		addPane: S
 	}), []);
-	let v = /* @__PURE__ */ e.createElement("bw-window", {
-		"root-sash-id": h.rootSash.id,
-		theme: h.theme || void 0,
+	let y = r($);
+	i(() => {
+		if (y) return y.api.current = {
+			fit: g.fit.bind(g),
+			removePane: g.removePane.bind(g),
+			setTheme: g.setTheme.bind(g),
+			addPane: S
+		}, () => {
+			y.api.current = null;
+		};
+	}, []);
+	let b = /* @__PURE__ */ t.createElement("bw-window", {
+		"root-sash-id": g.rootSash.id,
+		theme: g.theme || void 0,
 		style: {
-			width: h.rootSash.width,
-			height: h.rootSash.height
+			width: g.rootSash.width,
+			height: g.rootSash.height
 		},
-		ref: l
-	}, _.map((t) => /* @__PURE__ */ e.createElement(Be, {
-		key: t.id,
-		sash: t,
-		bwin: h
-	})), g.map((t) => /* @__PURE__ */ e.createElement(ze, {
-		key: t.id,
-		sash: t
-	})), /* @__PURE__ */ e.createElement("bw-sill", { ref: u })), y = i(() => v, []);
-	function b(e, t) {
-		let { content: n, ...r } = t, i = h.addPane(e, r), a = document.querySelector(`bw-pane[sash-id="${i.id}"] bw-glass-content`);
-		f((e) => [...e || [], {
+		ref: u
+	}, v.map((e) => /* @__PURE__ */ t.createElement(Ue, {
+		key: e.id,
+		sash: e,
+		bwin: g
+	})), _.map((e) => /* @__PURE__ */ t.createElement(He, {
+		key: e.id,
+		sash: e
+	})), /* @__PURE__ */ t.createElement("bw-sill", { ref: d })), x = o(() => b, []);
+	function S(e, t) {
+		let { content: n, ...r } = t, i = g.addPane(e, r), a = document.querySelector(`bw-pane[sash-id="${i.id}"] bw-glass-content`);
+		p((e) => [...e || [], {
 			node: n,
 			container: a
 		}]);
 	}
-	return /* @__PURE__ */ e.createElement(e.Fragment, null, y, d?.map((e) => s(e.node, e.container)));
-}), He = "0.4.1";
+	return /* @__PURE__ */ t.createElement(t.Fragment, null, x, f?.map((e) => l(e.node, e.container)));
+}), qe = "0.5.0";
 //#endregion
-export { be as BUILTIN_ACTIONS, W as DEFAULT_DETACHED_GLASS_ACTIONS, V as DEFAULT_GLASS_ACTIONS, Ve as Window, He as version };
+export { we as BUILTIN_ACTIONS, H as DEFAULT_DETACHED_GLASS_ACTIONS, z as DEFAULT_GLASS_ACTIONS, Ke as Window, We as WindowProvider, Ge as useWindow, qe as version };