bwin 0.3.4-dev.0 → 0.4.0

package/README.md

@@ -1,10 +1,13 @@
 # Binary Window
 
+[![Publish to npm](https://github.com/bhjsdev/bwin/actions/workflows/publish.yml/badge.svg)](https://github.com/bhjsdev/bwin/actions/workflows/publish.yml)
+[![npm version](https://img.shields.io/npm/v/bwin)](https://www.npmjs.com/package/bwin)
+
 A lightweight window-tiling JavaScript library for the browser, featuring resizable panes, drag-and-drop, and more.
 
-[![A bwin tiling layout with resizable panes showing charts and a data table](docs/screenshot.png)](https://bhjsdev.github.io/bwin-docs/)
+[![A bwin tiling layout with resizable panes showing charts and a data table](docs/screenshot.png)](https://bhjsdev.github.io/bwin-docs?theme=light)
 
-[Documentation](https://bhjsdev.github.io/bwin-docs/general/overview)
+[Documentation](https://bhjsdev.github.io/bwin-docs/javascript/get-started)
 
 ## Development
 

package/dist/bwin.css

@@ -1,2 +1,2 @@
-bw-window{--bw-font-family:system-ui;--bw-font-size:14px;--bw-drop-area-bg-color:#0000000d;--bw-glass-clearance:2px;--bw-glass-border-radius:2px;--bw-glass-border-color:#1a1a1a;--bw-glass-border-color-disabled:#ccc;--bw-glass-bg-color-disabled:#f7f7f7;--bw-glass-header-height:30px;--bw-glass-header-gap:4px;--bw-glass-header-bg-color:#f7f7f7;--bw-sill-gap:6px}bw-window[theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bw-glass-border-color:#666;--bw-glass-border-color-disabled:#4d4d4d;--bw-glass-header-bg-color:#2e2e2e;--bw-glass-bg-color-disabled:#292929;--bw-drop-area-bg-color:#ffffff1a}bw-window[theme=dark] bw-pane,bw-window[theme=dark] bw-muntin{background-color:#242424}bw-window[theme=dark] bw-glass{color:#e6e6e6;background-color:#292929}bw-window[theme=dark] .bw-glass-tab:hover,bw-window[theme=dark] .bw-glass-action:hover,bw-window[theme=dark] .bw-minimized-glass:hover{background-color:#424242}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{box-sizing:border-box;display:block;position:absolute}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{box-sizing:border-box;background-color:#f2f2f2;position:absolute;overflow:auto}bw-pane[drop-area]:before{content:"";background-color:var(--bw-drop-area-bg-color);position:absolute}bw-pane[drop-area=top]:before{height:50%;top:0;left:0;right:0}bw-pane[drop-area=right]:before{width:50%;top:0;bottom:0;right:0}bw-pane[drop-area=bottom]:before{height:50%;bottom:0;left:0;right:0}bw-pane[drop-area=left]:before{width:50%;top:0;bottom:0;left:0}bw-pane[drop-area=center]:before{inset:0}bw-muntin{box-sizing:border-box;background-color:#fff;position:absolute}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:#0000}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:#0000}bw-glass{inset:var(--bw-glass-clearance);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box;background-color:#fff;flex-direction:column;display:flex;position:absolute}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;flex-basis:var(--bw-glass-header-height);align-items:center;gap:var(--bw-glass-header-gap);padding-inline:var(--bw-glass-header-gap);border-bottom:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);background-color:var(--bw-glass-header-bg-color);flex-shrink:0;display:flex;overflow:hidden}bw-glass-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}bw-glass-tab-container{align-self:flex-end;gap:var(--bw-glass-header-gap);display:flex}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer;border-bottom:none}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{flex-shrink:0;gap:2px;margin-left:auto;display:flex}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action:disabled:active{transform:scale(1)}.bw-glass-action--close:before{content:"✕"}.bw-glass-action--maximize:before{content:"☐"}bw-pane[maximized] .bw-glass-action--maximize:before{content:"◱"}.bw-glass-action--minimize:before{content:"−"}bw-glass-content{box-sizing:border-box;flex-grow:1;display:block;overflow:auto}bw-sill{margin-top:calc(var(--bw-sill-gap) - var(--bw-glass-clearance));gap:var(--bw-sill-gap);box-sizing:border-box;width:100%;padding-inline:var(--bw-glass-clearance);display:flex;position:absolute;top:100%}.bw-minimized-glass{border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer;background-color:var(--bw-glass-header-bg-color);flex-basis:10%;height:10px;display:block}.bw-minimized-glass:hover{background-color:#fff}.bw-minimized-glass:active{transform:scale(.95)}
+bw-window{--bw-font-family:system-ui;--bw-font-size:14px;--bw-drop-area-bg-color:#0000000d;--bw-glass-clearance:2px;--bw-glass-border-radius:2px;--bw-glass-border-color:#1a1a1a;--bw-glass-border-color-disabled:#ccc;--bw-glass-bg-color-disabled:#f7f7f7;--bw-glass-header-height:30px;--bw-glass-header-gap:4px;--bw-glass-header-bg-color:#f7f7f7;--bw-minimized-glass-highlight-color:#d9d9d9;--bw-detached-glass-shadow:0 2px 6px #0000001f, 0 4px 14px #00000038;--bw-detached-glass-shadow-active:0 4px 10px #00000038, 0 10px 30px #00000061;--bw-detached-glass-resize-handle-size:12px;--bw-sill-gap:6px}bw-window[theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bw-glass-border-color:#666;--bw-glass-border-color-disabled:#4d4d4d;--bw-glass-header-bg-color:#2e2e2e;--bw-glass-bg-color-disabled:#292929;--bw-drop-area-bg-color:#ffffff1a;--bw-detached-glass-shadow:0 2px 6px #0000008c, 0 4px 14px #000000a6;--bw-detached-glass-shadow-active:0 4px 10px #000000a6, 0 10px 30px #000c;--bw-minimized-glass-highlight-color:#a6a6a6cc}bw-window[theme=dark] bw-pane,bw-window[theme=dark] bw-muntin{background-color:#242424}bw-window[theme=dark] bw-glass{color:#e6e6e6;background-color:#292929}bw-window[theme=dark] .bw-glass-tab:hover,bw-window[theme=dark] .bw-glass-action:hover,bw-window[theme=dark] .bw-minimized-glass:hover{background-color:#424242}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{box-sizing:border-box;display:block;position:absolute}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{isolation:isolate;box-sizing:border-box;background-color:#f2f2f2;position:absolute;overflow:auto}bw-pane[drop-area]:before{content:"";background-color:var(--bw-drop-area-bg-color);position:absolute}bw-pane[drop-area=top]:before{height:50%;top:0;left:0;right:0}bw-pane[drop-area=right]:before{width:50%;top:0;bottom:0;right:0}bw-pane[drop-area=bottom]:before{height:50%;bottom:0;left:0;right:0}bw-pane[drop-area=left]:before{width:50%;top:0;bottom:0;left:0}bw-pane[drop-area=center]:before{inset:0}bw-muntin{box-sizing:border-box;background-color:#fff;position:absolute}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:#0000}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:#0000}bw-glass{inset:var(--bw-glass-clearance);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box;background-color:#fff;flex-direction:column;display:flex;position:absolute}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;flex-basis:var(--bw-glass-header-height);-webkit-user-select:none;user-select:none;align-items:center;gap:var(--bw-glass-header-gap);padding-inline:var(--bw-glass-header-gap);border-bottom:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);background-color:var(--bw-glass-header-bg-color);flex-shrink:0;display:flex;overflow:hidden}bw-glass-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}bw-glass-tab-container{align-self:flex-end;gap:var(--bw-glass-header-gap);display:flex}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer;border-bottom:none}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{flex-shrink:0;gap:2px;margin-left:auto;display:flex}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action:disabled:active{transform:scale(1)}.bw-glass-action--minimize:before{content:"−"}.bw-glass-action--detach:before{content:"☐"}.bw-glass-action--attach:before{content:"◱"}.bw-glass-action--maximize:before{content:"🡥"}bw-pane[maximized] .bw-glass-action--maximize:before{content:"🡧"}.bw-glass-action--close:before{content:"✕"}bw-glass-content{box-sizing:border-box;flex-grow:1;display:block;overflow:auto}bw-glass[detached]{box-shadow:var(--bw-detached-glass-shadow)}bw-glass[detached][active]{box-shadow:var(--bw-detached-glass-shadow-active)}bw-glass[detached]>bw-glass-header[can-drag=true]:active{cursor:move}bw-glass-resize-handle{z-index:2;touch-action:none;position:absolute}bw-glass-resize-handle[resize-dir=n]{top:calc(var(--bw-detached-glass-resize-handle-size) / -2);height:var(--bw-detached-glass-resize-handle-size);cursor:ns-resize;left:0;right:0}bw-glass-resize-handle[resize-dir=s]{bottom:calc(var(--bw-detached-glass-resize-handle-size) / -2);height:var(--bw-detached-glass-resize-handle-size);cursor:ns-resize;left:0;right:0}bw-glass-resize-handle[resize-dir=e]{top:0;bottom:0;right:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);cursor:ew-resize}bw-glass-resize-handle[resize-dir=w]{top:0;bottom:0;left:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);cursor:ew-resize}bw-glass-resize-handle[resize-dir=ne]{top:calc(var(--bw-detached-glass-resize-handle-size) / -2);right:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);height:var(--bw-detached-glass-resize-handle-size);cursor:nesw-resize}bw-glass-resize-handle[resize-dir=nw]{top:calc(var(--bw-detached-glass-resize-handle-size) / -2);left:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);height:var(--bw-detached-glass-resize-handle-size);cursor:nwse-resize}bw-glass-resize-handle[resize-dir=se]{bottom:calc(var(--bw-detached-glass-resize-handle-size) / -2);right:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);height:var(--bw-detached-glass-resize-handle-size);cursor:nwse-resize}bw-glass-resize-handle[resize-dir=sw]{bottom:calc(var(--bw-detached-glass-resize-handle-size) / -2);left:calc(var(--bw-detached-glass-resize-handle-size) / -2);width:var(--bw-detached-glass-resize-handle-size);height:var(--bw-detached-glass-resize-handle-size);cursor:nesw-resize}bw-sill{margin-top:calc(var(--bw-sill-gap) - var(--bw-glass-clearance));gap:var(--bw-sill-gap);box-sizing:border-box;width:100%;padding-inline:var(--bw-glass-clearance);display:flex;position:absolute;top:100%}.bw-minimized-glass,.bw-minimized-detached-glass{border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer;background-color:var(--bw-glass-header-bg-color);flex-basis:10%;height:10px;display:block}:is(.bw-minimized-glass,.bw-minimized-detached-glass):hover{background-color:#fff}:is(.bw-minimized-glass,.bw-minimized-detached-glass):active{transform:scale(.95)}.bw-minimized-glass,.bw-minimized-detached-glass{animation:2s ease-out bw-minimized-glass-highlight}@keyframes bw-minimized-glass-highlight{0%{background-color:var(--bw-glass-header-bg-color)}30%{background-color:var(--bw-minimized-glass-highlight-color)}to{background-color:var(--bw-glass-header-bg-color)}}
 /*$vite$:1*/

package/dist/bwin.js

@@ -69,6 +69,10 @@ function c(e) {
 	return e instanceof Node ? e : document.createTextNode(String(e));
 }
 function l(e) {
+	let t = document.createDocumentFragment();
+	return t.append(...e.childNodes), t;
+}
+function u(e) {
 	return {
 		left: parseFloat(e.style.left) || 0,
 		top: parseFloat(e.style.top) || 0,
@@ -78,7 +82,7 @@ function l(e) {
 }
 //#endregion
 //#region src/position.js
-var u = {
+var d = {
 	Top: "top",
 	Right: "right",
 	Bottom: "bottom",
@@ -88,22 +92,22 @@ var u = {
 	Unknown: "unknown",
 	Outside: "outside"
 };
-function d(e) {
+function f(e) {
 	switch (e) {
-		case u.Top: return u.Bottom;
-		case u.Right: return u.Left;
-		case u.Bottom: return u.Top;
-		case u.Left: return u.Right;
+		case d.Top: return d.Bottom;
+		case d.Right: return d.Left;
+		case d.Bottom: return d.Top;
+		case d.Left: return d.Right;
 		default: throw Error(`[bwin] Invalid position: ${e}`);
 	}
 }
-function f({ width: e, height: t, x: n }) {
+function p({ width: e, height: t, x: n }) {
 	return t / e * n;
 }
-function p({ width: e, height: t, y: n }) {
+function m({ width: e, height: t, y: n }) {
 	return e / t * n;
 }
-function m({ width: e, height: t, x: n }) {
+function ee({ width: e, height: t, x: n }) {
 	return t - t / e * n;
 }
 function h({ width: e, height: t, y: n }) {
@@ -111,25 +115,25 @@ function h({ width: e, height: t, y: n }) {
 }
 function g(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 u.Outside;
-	let c = .3, l = f({
+	if (o < 0 || o > i || s < 0 || s > a) return d.Outside;
+	let c = .3, l = p({
 		width: i,
 		height: a,
 		x: o
-	}), d = m({
+	}), u = ee({
 		width: i,
 		height: a,
 		x: o
-	}), g = p({
+	}), f = m({
 		width: i,
 		height: a,
 		y: s
-	}), _ = h({
+	}), g = h({
 		width: i,
 		height: a,
 		y: s
 	});
-	return o < i * (.5 - c / 2) && s > l && s < d ? u.Left : o > i * .65 && s < l && s > d ? u.Right : s < a * (.5 - c / 2) && o > g && o < _ ? u.Top : s > a * .65 && o < g && o > _ ? u.Bottom : o > i * (.5 - c / 2) && o < i * .65 && s > a * (.5 - c / 2) && s < a * .65 ? u.Center : u.Unknown;
+	return o < i * (.5 - c / 2) && s > l && s < u ? d.Left : o > i * .65 && s < l && s > u ? d.Right : s < a * (.5 - c / 2) && o > f && o < g ? d.Top : s > a * .65 && o < f && o > g ? d.Bottom : o > i * (.5 - c / 2) && o < i * .65 && s > a * (.5 - c / 2) && s < a * .65 ? d.Center : d.Unknown;
 }
 var _ = {
 	left: 0,
@@ -154,26 +158,26 @@ var _ = {
 		return this.children.length > 0;
 	}
 	isLeftRightSplit() {
-		return this.children.some((e) => e.position === u.Left || e.position === u.Right);
+		return this.children.some((e) => e.position === d.Left || e.position === d.Right);
 	}
 	isTopBottomSplit() {
-		return this.children.some((e) => e.position === u.Top || e.position === u.Bottom);
+		return this.children.some((e) => e.position === d.Top || e.position === d.Bottom);
 	}
 	get leftChild() {
-		return this.children.find((e) => e.position === u.Left);
+		return this.children.find((e) => e.position === d.Left);
 	}
 	get rightChild() {
-		return this.children.find((e) => e.position === u.Right);
+		return this.children.find((e) => e.position === d.Right);
 	}
 	get topChild() {
-		return this.children.find((e) => e.position === u.Top);
+		return this.children.find((e) => e.position === d.Top);
 	}
 	get bottomChild() {
-		return this.children.find((e) => e.position === u.Bottom);
+		return this.children.find((e) => e.position === d.Bottom);
 	}
 	getChildren() {
 		let e = null, t = null, n = null, r = null;
-		for (let i of this.children) i.position === u.Left ? e = i : i.position === u.Right ? t = i : i.position === u.Top ? n = i : i.position === u.Bottom && (r = i);
+		for (let i of this.children) i.position === d.Left ? e = i : i.position === d.Right ? t = i : i.position === d.Top ? n = i : i.position === d.Bottom && (r = i);
 		return [
 			n,
 			t,
@@ -232,7 +236,7 @@ var _ = {
 	}
 	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 _ = {
 	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 === d.Left || this.position === d.Right ? this.width / this.parent.width : this.height / this.parent.height : 1;
+	}
 	get top() {
 		return this._top;
 	}
@@ -272,7 +282,7 @@ var _ = {
 		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 === u.Left ? (o = a.width, s = r.width + t, c = r.left) : this.resizeStrategy === "natural" && this.position === u.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 === d.Left ? (o = a.width, s = r.width + t, c = r.left) : this.resizeStrategy === "natural" && this.position === d.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 _ = {
 		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 === u.Top ? (o = n.height, s = i.height + t, c = i.top) : this.resizeStrategy === "natural" && this.position === u.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 === d.Top ? (o = n.height, s = i.height + t, c = i.top) : this.resizeStrategy === "natural" && this.position === d.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);
 			}
@@ -299,8 +309,8 @@ var _ = {
 	}
 }, y = {
 	size: "50%",
-	position: u.Left
-}, b = class e {
+	position: d.Left
+}, te = class e {
 	left;
 	top;
 	width;
@@ -310,7 +320,7 @@ var _ = {
 	}
 	getPosition(e) {
 		if (!this.siblingConfigNode) return e;
-		let t = d(this.siblingConfigNode.position);
+		let t = f(this.siblingConfigNode.position);
 		if (!e) return t;
 		if (e !== t) throw Error("[bwin] Sibling position and current position are not opposite");
 		return e;
@@ -319,30 +329,30 @@ var _ = {
 		if (!this.siblingConfigNode) return i(e);
 		if (!e) {
 			if (this.siblingConfigNode.size < 1) return 1 - this.siblingConfigNode.size;
-			if (this.siblingConfigNode.position === u.Left || this.siblingConfigNode.position === u.Right) return this.parentRect.width - this.siblingConfigNode.width;
-			if (this.siblingConfigNode.position === u.Top || this.siblingConfigNode.position === u.Bottom) return this.parentRect.height - this.siblingConfigNode.height;
+			if (this.siblingConfigNode.position === d.Left || this.siblingConfigNode.position === d.Right) return this.parentRect.width - this.siblingConfigNode.width;
+			if (this.siblingConfigNode.position === d.Top || this.siblingConfigNode.position === d.Bottom) return this.parentRect.height - this.siblingConfigNode.height;
 		}
 		let t = i(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 === u.Left || this.position === u.Right) && t + this.siblingConfigNode.size !== this.parentRect.width) throw Error("[bwin] Sum of sibling sizes is not equal to parent width");
-			if ((this.position === u.Top || this.position === u.Bottom) && t + this.siblingConfigNode.size !== this.parentRect.height) throw Error("[bwin] Sum of sibling sizes is not equal to parent height");
+			if ((this.position === d.Left || this.position === d.Right) && t + this.siblingConfigNode.size !== this.parentRect.width) throw Error("[bwin] Sum of sibling sizes is not equal to parent width");
+			if ((this.position === d.Top || this.position === d.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 === u.Root) this.left = 0, this.top = 0, this.width = this.parentRect.width, this.height = this.parentRect.height;
-		else if (this.position === u.Left) {
+		if (this.position === d.Root) this.left = 0, this.top = 0, this.width = this.parentRect.width, this.height = this.parentRect.height;
+		else if (this.position === d.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 === u.Right) {
+		} else if (this.position === d.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 === u.Top) {
+		} else if (this.position === d.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 === u.Bottom) {
+		} else if (this.position === d.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;
 		}
@@ -400,28 +410,28 @@ var _ = {
 		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 ||= u.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 ||= d.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);
 		}
 		return t;
 	}
-}, x = {
+}, b = {
 	width: 333,
 	height: 333
-}, S = {
+}, x = {
 	fitContainer: !1,
 	theme: ""
-}, C = class extends b {
-	constructor({ id: e, children: t, width: n = x.width, height: r = x.height, fitContainer: i = S.fitContainer, theme: a = S.theme, ...o } = {
-		...x,
-		...S
+}, S = class extends te {
+	constructor({ id: e, children: t, width: n = b.width, height: r = b.height, fitContainer: i = x.fitContainer, theme: a = x.theme, ...o } = {
+		...b,
+		...x
 	}) {
 		super({
 			id: e,
 			children: t,
 			size: NaN,
-			position: u.Root,
+			position: d.Root,
 			parentRect: {
 				width: n,
 				height: r
@@ -429,25 +439,25 @@ var _ = {
 			...o
 		}), this.fitContainer = i, this.theme = a;
 	}
-}, w = class extends v {
+}, C = class extends v {
 	constructor(e = _) {
 		super({
 			...e,
-			position: u.Root
-		}), Object.assign(this, S);
+			position: d.Root
+		}), Object.assign(this, x);
 	}
 };
 //#endregion
 //#region src/frame/pane-utils.js
-function T(e) {
+function ne(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 E(e) {
+function w(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 D(e, { size: n, id: r }) {
+function T(e, { size: n, id: r }) {
 	let a = i(n), o = e.width / 2;
 	a && (o = a < 1 ? e.width * a : a);
 	let s = new v({
@@ -456,19 +466,19 @@ function D(e, { size: n, id: r }) {
 		left: e.left,
 		width: o,
 		height: e.height,
-		position: u.Left
+		position: d.Left
 	}), c = new v({
 		id: e.id,
 		top: e.top,
 		left: e.left + s.width,
 		width: e.width - o,
 		height: e.height,
-		position: u.Right,
+		position: d.Right,
 		domNode: e.domNode
 	});
 	return e.addChild(s), e.addChild(c), e.domNode = null, e.id = t(), s;
 }
-function O(e, { size: n, id: r }) {
+function E(e, { size: n, id: r }) {
 	let a = i(n), o = e.width / 2;
 	a && (o = a < 1 ? e.width * a : a);
 	let s = new v({
@@ -477,7 +487,7 @@ function O(e, { size: n, id: r }) {
 		top: e.top,
 		width: e.width - o,
 		height: e.height,
-		position: u.Left,
+		position: d.Left,
 		domNode: e.domNode
 	}), c = new v({
 		id: r,
@@ -485,11 +495,11 @@ function O(e, { size: n, id: r }) {
 		top: e.top,
 		width: o,
 		height: e.height,
-		position: u.Right
+		position: d.Right
 	});
 	return e.addChild(s), e.addChild(c), e.domNode = null, e.id = t(), c;
 }
-function k(e, { size: n, id: r }) {
+function D(e, { size: n, id: r }) {
 	let a = i(n), o = e.height / 2;
 	a && (o = a < 1 ? e.height * a : a);
 	let s = new v({
@@ -498,19 +508,19 @@ function k(e, { size: n, id: r }) {
 		top: e.top,
 		width: e.width,
 		height: o,
-		position: u.Top
+		position: d.Top
 	}), c = new v({
 		id: e.id,
 		left: e.left,
 		top: e.top + s.height,
 		width: e.width,
 		height: e.height - o,
-		position: u.Bottom,
+		position: d.Bottom,
 		domNode: e.domNode
 	});
 	return e.addChild(s), e.addChild(c), e.domNode = null, e.id = t(), s;
 }
-function A(e, { size: n, id: r }) {
+function O(e, { size: n, id: r }) {
 	let a = i(n), o = e.height / 2;
 	a && (o = a < 1 ? e.height * a : a);
 	let s = new v({
@@ -519,7 +529,7 @@ function A(e, { size: n, id: r }) {
 		left: e.left,
 		width: e.width,
 		height: e.height - o,
-		position: u.Top,
+		position: d.Top,
 		domNode: e.domNode
 	}), c = new v({
 		id: r,
@@ -527,31 +537,31 @@ function A(e, { size: n, id: r }) {
 		left: e.left,
 		width: e.width,
 		height: o,
-		position: u.Bottom
+		position: d.Bottom
 	});
 	return e.addChild(s), e.addChild(c), e.domNode = null, e.id = t(), c;
 }
-function j(e, { position: t, size: n, id: r, minWidth: i, minHeight: a }) {
-	if (t === u.Left) return D(e, {
+function k(e, { position: t, size: n, id: r, minWidth: i, minHeight: a }) {
+	if (t === d.Left) return T(e, {
 		size: n,
 		id: r
 	});
-	if (t === u.Right) return O(e, {
+	if (t === d.Right) return E(e, {
 		size: n,
 		id: r
 	});
-	if (t === u.Top) return k(e, {
+	if (t === d.Top) return D(e, {
 		size: n,
 		id: r
 	});
-	if (t === u.Bottom) return A(e, {
+	if (t === d.Bottom) return O(e, {
 		size: n,
 		id: r
 	});
 }
 //#endregion
 //#region src/frame/frame-utils.js
-function M(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");
@@ -559,25 +569,25 @@ function M(e) {
 }
 //#endregion
 //#region src/frame/pane.js
-var N = {
+var re = {
 	createPane(e) {
-		let t = T(e);
+		let t = ne(e);
 		return e.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
 	},
 	onPaneCreate(t, n) {
-		n.store.content && t.append(c(n.store.content)), this?.debug && (t.style.backgroundColor = e(), t.innerHTML = "", t.append(P(t)));
+		n.store.content && t.append(c(n.store.content)), this?.debug && (t.style.backgroundColor = e(), t.innerHTML = "", t.append(j(t)));
 	},
 	updatePane(e) {
-		return E(e);
+		return w(e);
 	},
 	onPaneUpdate(e, t) {
-		this?.debug && (e.innerHTML = "", e.append(P(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 = j(i, {
+		let a = k(i, {
 			position: t,
 			size: n,
 			id: r
@@ -588,14 +598,14 @@ var N = {
 		let n = this.rootSash.getDescendantParentById(e);
 		if (!n) throw Error("[bwin] Parent sash not found when removing pane");
 		let r = n.getChildSiblingById(e);
-		r.children.length === 0 ? (n.id = r.id, n.domNode = r.domNode, n.domNode.setAttribute("sash-id", r.id), n.children = []) : (n.id = t(), n.children = r.children, r.position === u.Left ? r.width = n.width : r.position === u.Right ? (r.width = n.width, r.left = n.left) : r.position === u.Top ? r.height = n.height : r.position === u.Bottom && (r.height = n.height, r.top = n.top)), this.update();
+		r.children.length === 0 ? (n.id = r.id, n.domNode = r.domNode, n.domNode.setAttribute("sash-id", r.id), n.children = []) : (n.id = t(), n.children = r.children, n.children.forEach((e) => e.parent = n), r.position === d.Left ? r.width = n.width : r.position === d.Right ? (r.width = n.width, r.left = n.left) : r.position === d.Top ? r.height = n.height : r.position === d.Bottom && (r.height = n.height, r.top = n.top)), this.update();
 	},
 	swapPanes(e, t) {
-		let n = M(e), i = M(t), a = e.getAttribute("can-drop") !== "false", o = t.getAttribute("can-drop") !== "false";
+		let n = A(e), i = A(t), a = e.getAttribute("can-drop") !== "false", o = t.getAttribute("can-drop") !== "false";
 		this.rootSash.swapIds(n, i), r(e, this.activeDropPaneEl), e.setAttribute("sash-id", i), t.setAttribute("sash-id", n), e.setAttribute("can-drop", o), t.setAttribute("can-drop", a);
 	}
 };
-function P(e) {
+function j(e) {
 	let t = document.createElement("pre");
 	return t.style.fontSize = "10px", t.innerHTML = `
 ${e.getAttribute("sash-id")}
@@ -608,7 +618,7 @@ height: ${e.style.height}
 }
 //#endregion
 //#region src/frame/main.js
-var F = {
+var ie = {
 	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;
@@ -629,7 +639,7 @@ var F = {
 			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));
 		});
 	}
-}, I = {
+}, ae = {
 	muntinSize: 4,
 	createMuntin(e) {
 		let t = document.createElement("bw-muntin"), n = e.leftChild, r = e.topChild;
@@ -641,7 +651,7 @@ var F = {
 		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) {}
-}, L = {
+}, oe = {
 	fitContainer: !1,
 	fit() {
 		this.rootSash.width = this.containerElement.clientWidth, this.rootSash.height = this.containerElement.clientHeight, this.update();
@@ -653,7 +663,7 @@ var F = {
 			});
 		}).observe(this.containerElement);
 	}
-}, R = {
+}, se = {
 	activeMuntinSash: null,
 	isResizeStarted: !1,
 	isDropStarted: !1,
@@ -686,7 +696,7 @@ var F = {
 			this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
 		});
 	}
-}, z = {
+}, ce = {
 	activeDropPaneEl: null,
 	onPaneDrop(e, t) {},
 	enableDrop() {
@@ -704,13 +714,13 @@ var F = {
 			this.onPaneDrop(e, n), typeof n.store.onDrop == "function" && n.store.onDrop(e, n), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
 		});
 	}
-}, B = !1, V = class {
+}, le = !1, M = class {
 	windowElement = null;
 	containerElement = null;
-	debug = B;
+	debug = le;
 	constructor(e) {
 		let t = null;
-		e instanceof w ? (t = e, this.rootSash = e) : (t = new C(e), this.rootSash = t.buildSashTree({ resizeStrategy: t.resizeStrategy })), this.fitContainer = t.fitContainer, this.theme = t.theme;
+		e instanceof C ? (t = e, this.rootSash = e) : (t = new S(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);
@@ -727,38 +737,10 @@ var F = {
 		});
 	}
 };
-V.assemble(F, I, N, L, z, R);
-//#endregion
-//#region src/binary-window/actions.close.js
-var H = {
-	label: "",
-	className: "bw-glass-action--close",
-	onClick: (e, t) => {
-		let n = M(e.target);
-		t.removePane(n);
-	}
-}, U = {
-	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 = c("<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 = l(i), r.bwOriginalSashId = o, t.removePane(o);
-	}
-}, W = {
-	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 = l(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
-	}
-};
+M.assemble(ie, ae, re, oe, ce, se);
 //#endregion
 //#region src/rect.js
-function G(e, t) {
+function ue(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);
@@ -770,27 +752,23 @@ function G(e, t) {
 	};
 }
 //#endregion
-//#region src/binary-window/actions.js
-var K = [
-	U,
-	W,
-	H
-], q = {
-	enableActions() {
+//#region src/binary-window/glass/action.js
+var de = {
+	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 = G(t, l(e));
+			let i = ue(t, u(e));
 			if (i) {
 				let t = i.width * i.height;
 				t > n && (n = t, r = e);
 			}
 		}), r) {
-			let n = e.bwOriginalPosition, i = l(r), a = r.getAttribute("sash-id"), o = this.rootSash.getById(a), s = 0;
-			if (n === u.Left || n === u.Right) s = i.width - t.width < o.minWidth ? i.width / 2 : t.width;
-			else if (n === u.Top || n === u.Bottom) s = i.height - t.height < o.minHeight ? i.height / 2 : t.height;
+			let n = e.bwOriginalPosition, i = u(r), a = r.getAttribute("sash-id"), o = this.rootSash.getById(a), s = 0;
+			if (n === d.Left || n === d.Right) s = i.width - t.width < o.minWidth ? i.width / 2 : t.width;
+			else if (n === d.Top || n === d.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"), {
@@ -808,7 +786,7 @@ var K = [
 		});
 	},
 	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) {
@@ -829,15 +807,91 @@ var K = [
 			});
 		}).observe(this.windowElement, { childList: !0 });
 	}
-}, J = {
-	title: null,
-	content: null,
-	tabs: [],
-	actions: void 0,
-	draggable: !0
-}, Y = class {
+}, N = null, P = !1, F = {
+	onPaneDrop(e, t) {
+		if (!N) return;
+		let n = this.activeDropPaneEl.getAttribute("drop-area");
+		if (n === "center") {
+			let e = N.closest("bw-pane");
+			this.swapPanes(e, this.activeDropPaneEl);
+			return;
+		} else {
+			let e = A(N);
+			this.removePane(e), this.addPane(t.id, {
+				position: n,
+				id: e
+			}).domNode.append(N);
+		}
+	},
+	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), N = t;
+		}), document.addEventListener("mouseup", () => {
+			N &&= (N.removeAttribute("draggable"), null);
+		}), this.windowElement.addEventListener("dragstart", (e) => {
+			if (!(e.target instanceof HTMLElement) || !e.target.matches("bw-glass") || !N) return;
+			e.dataTransfer.effectAllowed = "move";
+			let t = N.closest("bw-pane");
+			P = t.getAttribute("can-drop") !== "false", t.setAttribute("can-drop", !1);
+		}), this.windowElement.addEventListener("dragend", () => {
+			N &&= (N.removeAttribute("draggable"), N.closest("bw-pane").setAttribute("can-drop", P), null);
+		});
+	}
+}, I = {
+	label: "",
+	className: "bw-glass-action--close",
+	onClick: (e, t) => {
+		let n = A(e.target);
+		t.removePane(n);
+	}
+}, L = {
+	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 = c("<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 = u(i), r.bwOriginalSashId = o, t.removePane(o);
+	}
+}, R = {
+	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 = u(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;
+		if (c.domNode.bwOriginalSiblingSashId = d, c.domNode.bwOriginalPosition = n.getAttribute("position"), c.domNode.bwOriginalRelativeSize = u.getRelativeSize(), c.contentElement.replaceWith(r), c.titleElement) c.titleElement.replaceWith(i);
+		else {
+			let e = document.createElement("bw-glass-title");
+			c.headerElement.prepend(e), e.replaceWith(i);
+		}
+		t.removePane(l);
+	}
+}, V = [
+	L,
+	B,
+	I
+], H = class {
 	domNode;
-	constructor({ title: e = J.title, content: t = J.content, tabs: n = J.tabs, actions: r = J.actions, draggable: i = J.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() {
@@ -860,7 +914,7 @@ var K = [
 		return e;
 	}
 	createActions() {
-		let e = document.createElement("bw-glass-action-container"), t = this.actions === void 0 ? K : 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 = c(`<button class="${n.className ? `bw-glass-action ${n.className}` : "bw-glass-action"}">${t}</button>`);
 			typeof n.onClick == "function" && r.addEventListener("click", (e) => {
@@ -875,45 +929,21 @@ var K = [
 	get headerElement() {
 		return this.domNode.querySelector("bw-glass-header");
 	}
-}, X = {
-	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 = M(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");
+	}
+}, fe = [
+	L,
+	R,
+	B,
+	I
+], pe = {
+	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);
-		});
-	}
-}, Z = {
+	...de,
+	...F
+}, me = {
 	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`);
 	},
@@ -923,23 +953,289 @@ var K = [
 	onMuntinUpdate(e) {
 		this.trimMuntin(e);
 	}
-}, Q = class extends V {
+}, he = [
+	"n",
+	"s",
+	"e",
+	"w",
+	"ne",
+	"nw",
+	"se",
+	"sw"
+];
+function ge() {
+	return he.map((e) => {
+		let t = document.createElement("bw-glass-resize-handle");
+		return t.setAttribute("resize-dir", e), t;
+	});
+}
+function _e({ 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 = c("<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, u = a;
+			if (!o) {
+				let e = t.rootSash.getLargestLeaf();
+				s = e.id, c = e.width > e.height ? "right" : "bottom", u = .5;
+			}
+			let d = n.querySelector("bw-glass-content");
+			t.addPane(s, {
+				position: c,
+				size: u,
+				content: l(d),
+				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());
+		}
+	}
+], ve = class extends H {
+	constructor(e) {
+		let { position: n, width: r = 222, height: i = 222, offset: a = 0, offsetX: o, offsetY: s, id: c, actions: l = W, ...u } = e;
+		super({
+			...u,
+			actions: l
+		}), this.domNode.setAttribute("id", c || t() + "-F"), this.domNode.setAttribute("detached", ""), this.domNode.style.position = "absolute", this.domNode.style.width = `${r}px`, this.domNode.style.height = `${i}px`;
+		let { top: d, left: f, right: p, bottom: m } = _e({
+			position: n,
+			offset: a,
+			offsetX: o,
+			offsetY: s,
+			width: r,
+			height: i
+		});
+		this.domNode.style.top = d, this.domNode.style.left = f, this.domNode.style.right = p, this.domNode.style.bottom = m;
+	}
+}, ye = 200, be = 200, G = 25;
+function xe(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 Se = {
+	addDetachedGlass(e = {}) {
+		let t = e.width ?? ye, n = e.height ?? be, { position: r, offsetX: i, offsetY: a } = e.position ? {} : xe(this.windowElement, {
+			width: t,
+			height: n
+		}), o = new ve({
+			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;
+	}
+}, Ce = { enableDetachedGlassActivate() {
+	this.windowElement.addEventListener("pointerdown", (e) => {
+		if (e.button !== 0) return;
+		let t = e.target.closest?.("bw-glass[detached]");
+		t && U.bringToFront(t);
+	});
+} }, we = { 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, Y = { 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;
+	});
+} }, X = 100, Z = 60;
+function Te(e) {
+	return !!e.querySelector(":scope > bw-glass-resize-handle");
+}
+function Ee(e) {
+	Te(e) || e.append(...ge());
+}
+function Q(e) {
+	e.querySelectorAll(":scope > bw-glass-resize-handle").forEach((e) => e.remove());
+}
+var De = { 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 && Ee(t);
+	}), this.windowElement.addEventListener("pointerout", (t) => {
+		let n = t.target.closest?.("bw-glass[detached]");
+		n && t.relatedTarget?.closest?.("bw-glass[detached]") !== n && n !== e && Q(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(X, l.width + s) : o.includes("w") && (f = Math.max(X, l.width - s), u = l.left + (l.width - f)), o.includes("s") ? p = Math.max(Z, l.height + c) : o.includes("n") && (p = Math.max(Z, 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") || Q(r);
+	});
+} }, Oe = { 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));
+	});
+} }, ke = {
+	enableDetachedGlassFeatures() {
+		this.enableDetachedGlassActivate(), this.enableDetachedGlassResize(), this.enableDetachedGlassMove(), this.handleMinimizedDetachedGlassClick();
+	},
+	...Se,
+	...Ce,
+	...we,
+	...Y,
+	...De,
+	...Oe
+}, $ = 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 = c("<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 Y({
+		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) {
@@ -947,7 +1243,7 @@ var K = [
 			position: n,
 			size: r,
 			id: i
-		}), s = new Y({
+		}), s = new H({
 			...a,
 			sash: o,
 			binaryWindow: this
@@ -969,7 +1265,17 @@ var K = [
 		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(X, Z, q);
+$.assemble(pe, ke, me);
 //#endregion
-export { K as BUILTIN_ACTIONS, Q as BinaryWindow, C as ConfigRoot, V as Frame, u as Position, v as Sash, w as SashConfig };
+export { fe as BUILTIN_ACTIONS, $ as BinaryWindow, S as ConfigRoot, W as DEFAULT_DETACHED_GLASS_ACTIONS, V as DEFAULT_GLASS_ACTIONS, M as Frame, d as Position, v as Sash, C as SashConfig };

package/package.json

@@ -2,7 +2,7 @@
   "name": "bwin",
   "description": "A tiling window manager for web browsers",
   "type": "module",
-  "version": "0.3.4-dev.0",
+  "version": "0.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bhjsdev/bwin.git"