bwin 0.1.0 → 0.1.2

package/dist/bwin.css

@@ -1 +1 @@
-:root{--bw-font-family: system-ui;--bw-font-size: 14px;--bw-drop-area-bg-color: hsl(0, 0%, 0%, .05);--bw-glass-header-height: 30px;--bw-glass-header-padding: 0 4px;--bw-glass-header-bg-color: hsl(0, 0%, 97%);--bw-glass-clearance: 2px;--bw-glass-border-color: hsl(0, 0%, 10%);--bw-glass-border-color-disabled: hsl(0, 0%, 80%);--bw-glass-bg-color-disabled: hsl(0, 0%, 100%)}.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{position:absolute;display:block;box-sizing:border-box}bw-pane{position:absolute;overflow:auto;box-sizing:border-box;background-color:#f2f2f2}bw-pane[drop-area]:before{content:"";position:absolute;background-color:var(--bw-drop-area-bg-color)}bw-pane[drop-area=top]:before{top:0;left:0;right:0;height:50%}bw-pane[drop-area=right]:before{top:0;right:0;bottom:0;width:50%}bw-pane[drop-area=bottom]:before{bottom:0;left:0;right:0;height:50%}bw-pane[drop-area=left]:before{top:0;left:0;bottom:0;width:50%}bw-pane[drop-area=center]:before{top:0;left:0;right:0;bottom:0}bw-muntin{box-sizing:border-box;position:absolute;background-color:#fff}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:transparent}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:transparent}bw-glass{font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box;position:absolute;inset:var(--bw-glass-clearance);border:1px solid var(--bw-glass-border-color);background-color:#fff;display:flex;flex-direction:column}bw-glass[draggable=true]:active{cursor:move;opacity:.3}bw-glass-header{box-sizing:border-box;display:flex;align-items:center;padding:var(--bw-glass-header-padding);flex-basis:var(--bw-glass-header-height);border-bottom:1px solid var(--bw-glass-border-color);background-color:var(--bw-glass-header-bg-color)}bw-glass-tab-container{align-self:flex-end;display:flex;gap:4px}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-bottom:none;cursor:pointer}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{margin-left:auto;display:flex;gap:2px}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action--close:before{content:"✕"}.bw-glass-action--close:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action--close:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action--close:disabled:active{transform:scale(1)}bw-glass-content{display:block;box-sizing:border-box;overflow:auto;flex-grow:1}
+:root{--bw-font-family: system-ui;--bw-font-size: 14px;--bw-drop-area-bg-color: hsl(0, 0%, 0%, .05);--bw-glass-clearance: 2px;--bw-glass-border-radius: 2px;--bw-glass-border-color: hsl(0, 0%, 10%);--bw-glass-border-color-disabled: hsl(0, 0%, 80%);--bw-glass-bg-color-disabled: hsl(0, 0%, 97%);--bw-glass-header-height: 30px;--bw-glass-header-gap: 4px;--bw-glass-header-bg-color: hsl(0, 0%, 97%);--bw-sill-gap: 6px}.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{position:absolute;display:block;box-sizing:border-box}bw-window:has(>bw-pane[maximized])>:is(bw-pane,bw-muntin):not([maximized]){display:none}bw-pane{position:absolute;overflow:auto;box-sizing:border-box;background-color:#f2f2f2}bw-pane[drop-area]:before{content:"";position:absolute;background-color:var(--bw-drop-area-bg-color)}bw-pane[drop-area=top]:before{top:0;left:0;right:0;height:50%}bw-pane[drop-area=right]:before{top:0;right:0;bottom:0;width:50%}bw-pane[drop-area=bottom]:before{bottom:0;left:0;right:0;height:50%}bw-pane[drop-area=left]:before{top:0;left:0;bottom:0;width:50%}bw-pane[drop-area=center]:before{top:0;left:0;right:0;bottom:0}bw-muntin{box-sizing:border-box;position:absolute;background-color:#fff}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:transparent}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:transparent}bw-glass{position:absolute;inset:var(--bw-glass-clearance);display:flex;flex-direction:column;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);background-color:#fff;font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box}bw-glass[draggable=true]:active{cursor:move;opacity:.4}bw-glass-header{box-sizing:border-box;display:flex;flex-basis:var(--bw-glass-header-height);align-items:center;gap:var(--bw-glass-header-gap);overflow:hidden;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)}bw-glass-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}bw-glass-tab-container{align-self:flex-end;display:flex;gap:var(--bw-glass-header-gap)}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-bottom:none;border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{margin-left:auto;display:flex;flex-shrink:0;gap:2px}.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{display:block;box-sizing:border-box;overflow:auto;flex-grow:1}bw-sill{position:absolute;top:100%;margin-top:calc(var(--bw-sill-gap) - var(--bw-glass-clearance));width:100%;display:flex;gap:var(--bw-sill-gap);box-sizing:border-box;padding-inline:var(--bw-glass-clearance)}.bw-minimized-glass{display:block;flex-basis:10%;height:10px;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)}.bw-minimized-glass:hover{background-color:#fff}.bw-minimized-glass:active{transform:scale(.95)}

package/dist/bwin.js

@@ -1,35 +1,35 @@
-var $ = Object.defineProperty;
-var B = (e, t, i) => t in e ? $(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
-var p = (e, t, i) => B(e, typeof t != "symbol" ? t + "" : t, i);
+var B = Object.defineProperty;
+var $ = (e, t, i) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var f = (e, t, i) => $(e, typeof t != "symbol" ? t + "" : t, i);
 function W(e = 0.7, t = 128) {
-  const i = 256 - t, n = Math.floor(Math.random() * i + t), o = Math.floor(Math.random() * i + t), s = Math.floor(Math.random() * i + t), r = Math.max(0.5, Math.random() * e);
-  return `rgba(${n}, ${o}, ${s}, ${r})`;
+  const i = 256 - t, n = Math.floor(Math.random() * i + t), s = Math.floor(Math.random() * i + t), o = Math.floor(Math.random() * i + t), h = Math.max(0.5, Math.random() * e);
+  return `rgba(${n}, ${s}, ${o}, ${h})`;
 }
-function R(e = 2, t = 3) {
+function z(e = 2, t = 3) {
   if (e < 0 || t < 0)
     throw new Error("Parameters must be non-negative numbers");
   const i = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", n = "0123456789";
-  let o = "";
-  for (let s = 0; s < e; s++) {
-    const r = Math.floor(Math.random() * i.length);
-    o += i[r];
+  let s = "";
+  for (let o = 0; o < e; o++) {
+    const h = Math.floor(Math.random() * i.length);
+    s += i[h];
   }
-  o += "-";
-  for (let s = 0; s < t; s++) {
-    const r = Math.floor(Math.random() * n.length);
-    o += n[r];
+  s += "-";
+  for (let o = 0; o < t; o++) {
+    const h = Math.floor(Math.random() * n.length);
+    s += n[h];
   }
-  return o;
+  return s;
 }
-function C(e, t) {
+function E(e, t) {
   for (; t.firstChild; )
     e.append(t.firstChild);
 }
 function H(e, t) {
   const i = document.createElement("div");
-  C(i, e), C(e, t), C(t, i);
+  E(i, e), E(e, t), E(t, i);
 }
-function P(e) {
+function y(e) {
   if (typeof e == "number" && !isNaN(e))
     return e;
   if (typeof e == "string") {
@@ -65,7 +65,7 @@ function G(e) {
   const t = document.createElement("template");
   return t.innerHTML = e.trim(), t.content;
 }
-function E(e) {
+function C(e) {
   if (e == null || e === "")
     return null;
   if (typeof e == "string")
@@ -77,7 +77,11 @@ function E(e) {
     }
   return e instanceof Node ? e : document.createTextNode(String(e));
 }
-const h = {
+function P(e) {
+  const t = parseFloat(e.style.left) || 0, i = parseFloat(e.style.top) || 0, n = parseFloat(e.style.width) || 0, s = parseFloat(e.style.height) || 0;
+  return { left: t, top: i, width: n, height: s };
+}
+const r = {
   Top: "top",
   Right: "right",
   Bottom: "bottom",
@@ -87,64 +91,64 @@ const h = {
   Unknown: "unknown",
   Outside: "outside"
 };
-function _(e) {
+function F(e) {
   switch (e) {
-    case h.Top:
-      return h.Bottom;
-    case h.Right:
-      return h.Left;
-    case h.Bottom:
-      return h.Top;
-    case h.Left:
-      return h.Right;
+    case r.Top:
+      return r.Bottom;
+    case r.Right:
+      return r.Left;
+    case r.Bottom:
+      return r.Top;
+    case r.Left:
+      return r.Right;
     default:
       throw new Error(`[bwin] Invalid position: ${e}`);
   }
 }
-function F({ width: e, height: t, x: i }) {
+function _({ width: e, height: t, x: i }) {
   return t / e * i;
 }
-function U({ width: e, height: t, y: i }) {
+function k({ width: e, height: t, y: i }) {
   return e / t * i;
 }
-function Y({ width: e, height: t, x: i }) {
+function U({ width: e, height: t, x: i }) {
   return t - t / e * i;
 }
-function X({ width: e, height: t, y: i }) {
+function Y({ width: e, height: t, y: i }) {
   return e - e / t * i;
 }
-function k(e, { clientX: t, clientY: i }) {
-  const n = e.getBoundingClientRect(), { width: o, height: s } = n, r = t - n.left, l = i - n.top;
-  if (r < 0 || r > o || l < 0 || l > s)
-    return h.Outside;
-  const d = 0.3, c = F({ width: o, height: s, x: r }), a = Y({ width: o, height: s, x: r }), f = U({ width: o, height: s, y: l }), u = X({ width: o, height: s, y: l });
-  return r < o * (0.5 - d / 2) && l > c && l < a ? h.Left : r > o * (0.5 + d / 2) && l < c && l > a ? h.Right : l < s * (0.5 - d / 2) && r > f && r < u ? h.Top : l > s * (0.5 + d / 2) && r < f && r > u ? h.Bottom : r > o * (0.5 - d / 2) && r < o * (0.5 + d / 2) && l > s * (0.5 - d / 2) && l < s * (0.5 + d / 2) ? h.Center : h.Unknown;
+function X(e, { clientX: t, clientY: i }) {
+  const n = e.getBoundingClientRect(), { width: s, height: o } = n, h = t - n.left, l = i - n.top;
+  if (h < 0 || h > s || l < 0 || l > o)
+    return r.Outside;
+  const a = 0.3, c = _({ width: s, height: o, x: h }), d = U({ width: s, height: o, x: h }), g = k({ width: s, height: o, y: l }), u = Y({ width: s, height: o, y: l });
+  return h < s * (0.5 - a / 2) && l > c && l < d ? r.Left : h > s * (0.5 + a / 2) && l < c && l > d ? r.Right : l < o * (0.5 - a / 2) && h > g && h < u ? r.Top : l > o * (0.5 + a / 2) && h < g && h > u ? r.Bottom : h > s * (0.5 - a / 2) && h < s * (0.5 + a / 2) && l > o * (0.5 - a / 2) && l < o * (0.5 + a / 2) ? r.Center : r.Unknown;
 }
-const w = {
-  top: 0,
+const q = 100, j = 100, w = {
   left: 0,
-  width: 100,
-  height: 100,
+  top: 0,
+  width: 150,
+  height: 150,
   // Initial min values, real min width/height is calculated based on children
-  minWidth: 20,
-  minHeight: 20
+  minWidth: q,
+  minHeight: j
 };
-class g {
+class p {
   constructor({
-    top: t = w.top,
-    left: i = w.left,
+    left: t = w.left,
+    top: i = w.top,
     width: n = w.width,
-    height: o = w.height,
-    minWidth: s = w.minWidth,
-    minHeight: r = w.minHeight,
+    height: s = w.height,
+    minWidth: o = w.minWidth,
+    minHeight: h = w.minHeight,
     domNode: l = null,
-    store: d = {},
+    store: a = {},
     position: c,
-    id: a
+    id: d
   } = w) {
-    if (this.id = a ?? R(), !c)
+    if (this.id = d ?? z(), !c)
       throw new Error("[bwin] Sash position is required");
-    this.position = c, this.domNode = l, this._top = t, this._left = i, this._width = n, this._height = o, this.children = [], this.minWidth = s, this.minHeight = r, this.store = d;
+    this.position = c, this.domNode = l, this._top = i, this._left = t, this._width = n, this._height = s, this.children = [], this.minWidth = o, this.minHeight = h, this.store = a;
   }
   walk(t) {
     this.children.forEach((i) => i.walk(t)), t(this);
@@ -158,31 +162,31 @@ class g {
   }
   isLeftRightSplit() {
     return this.children.some(
-      (t) => t.position === h.Left || t.position === h.Right
+      (t) => t.position === r.Left || t.position === r.Right
     );
   }
   isTopBottomSplit() {
     return this.children.some(
-      (t) => t.position === h.Top || t.position === h.Bottom
+      (t) => t.position === r.Top || t.position === r.Bottom
     );
   }
   get leftChild() {
-    return this.children.find((t) => t.position === h.Left);
+    return this.children.find((t) => t.position === r.Left);
   }
   get rightChild() {
-    return this.children.find((t) => t.position === h.Right);
+    return this.children.find((t) => t.position === r.Right);
   }
   get topChild() {
-    return this.children.find((t) => t.position === h.Top);
+    return this.children.find((t) => t.position === r.Top);
   }
   get bottomChild() {
-    return this.children.find((t) => t.position === h.Bottom);
+    return this.children.find((t) => t.position === r.Bottom);
   }
   getChildren() {
-    let t = null, i = null, n = null, o = null;
-    for (const s of this.children)
-      s.position === h.Left ? t = s : s.position === h.Right ? i = s : s.position === h.Top ? n = s : s.position === h.Bottom && (o = s);
-    return [n, i, o, t];
+    let t = null, i = null, n = null, s = null;
+    for (const o of this.children)
+      o.position === r.Left ? t = o : o.position === r.Right ? i = o : o.position === r.Top ? n = o : o.position === r.Bottom && (s = o);
+    return [n, i, s, t];
   }
   getAllLeafDescendants() {
     const t = [];
@@ -193,27 +197,27 @@ class g {
   calcMinWidth() {
     if (this.isLeaf())
       return this.minWidth;
-    const [t, i, n, o] = this.getChildren();
-    if (o && i) {
-      const s = o.calcMinWidth() + i.calcMinWidth();
-      return Math.max(this.minWidth, s);
+    const [t, i, n, s] = this.getChildren();
+    if (s && i) {
+      const o = s.calcMinWidth() + i.calcMinWidth();
+      return Math.max(this.minWidth, o);
     }
     if (t && n) {
-      const s = Math.max(t.calcMinWidth(), n.calcMinWidth());
-      return Math.max(this.minWidth, s);
+      const o = Math.max(t.calcMinWidth(), n.calcMinWidth());
+      return Math.max(this.minWidth, o);
     }
   }
   calcMinHeight() {
     if (this.isLeaf())
       return this.minHeight;
-    const [t, i, n, o] = this.getChildren();
-    if (o && i) {
-      const s = Math.max(o.calcMinHeight(), i.calcMinHeight());
-      return Math.max(this.minHeight, s);
+    const [t, i, n, s] = this.getChildren();
+    if (s && i) {
+      const o = Math.max(s.calcMinHeight(), i.calcMinHeight());
+      return Math.max(this.minHeight, o);
     }
     if (t && n) {
-      const s = t.calcMinHeight() + n.calcMinHeight();
-      return Math.max(this.minHeight, s);
+      const o = t.calcMinHeight() + n.calcMinHeight();
+      return Math.max(this.minHeight, o);
     }
   }
   // Get self or descendant by id
@@ -258,8 +262,8 @@ class g {
   set top(t) {
     const i = t - this._top;
     this._top = t;
-    const [n, o, s, r] = this.getChildren();
-    n && s && (n.top += i, s.top += i), r && o && (r.top += i, o.top += i);
+    const [n, s, o, h] = this.getChildren();
+    n && o && (n.top += i, o.top += i), h && s && (h.top += i, s.top += i);
   }
   get left() {
     return this._left;
@@ -267,8 +271,8 @@ class g {
   set left(t) {
     const i = t - this._left;
     this._left = t;
-    const [n, o, s, r] = this.getChildren();
-    r && o && (r.left += i, o.left += i), n && s && (n.left += i, s.left += i);
+    const [n, s, o, h] = this.getChildren();
+    h && s && (h.left += i, s.left += i), n && o && (n.left += i, o.left += i);
   }
   get width() {
     return this._width;
@@ -276,14 +280,14 @@ class g {
   set width(t) {
     const i = t - this._width;
     this._width = t;
-    const [n, o, s, r] = this.getChildren();
-    if (r && o) {
-      const l = r.width + o.width, d = i * (r.width / l), c = l + i;
-      let a = r.width + d, f = c - a, u = o.left + d;
-      const m = r.calcMinWidth(), b = o.calcMinWidth();
-      a < m && f > b ? (a = m, f = c - a, u = r.left + a) : f < b && a > m && (f = b, a = c - f, u = r.left + a), r.width = a, o.width = f, o.left = u;
+    const [n, s, o, h] = this.getChildren();
+    if (h && s) {
+      const l = h.width + s.width, a = i * (h.width / l), c = l + i;
+      let d = h.width + a, g = c - d, u = s.left + a;
+      const m = h.calcMinWidth(), b = s.calcMinWidth();
+      d < m && g > b ? (d = m, g = c - d, u = h.left + d) : g < b && d > m && (g = b, d = c - g, u = h.left + d), h.width = d, s.width = g, s.left = u;
     }
-    n && s && (n.width += i, s.width += i);
+    n && o && (n.width += i, o.width += i);
   }
   get height() {
     return this._height;
@@ -291,42 +295,42 @@ class g {
   set height(t) {
     const i = t - this._height;
     this._height = t;
-    const [n, o, s, r] = this.getChildren();
-    if (n && s) {
-      const l = n.height + s.height, d = i * (n.height / l), c = l + i;
-      let a = n.height + d, f = c - a, u = s.top + d;
-      const m = n.calcMinHeight(), b = s.calcMinHeight();
-      a < m && f > b ? (a = m, f = c - a, u = n.top + a) : f < b && a > m && (f = b, a = c - f, u = n.top + a), n.height = a, s.height = f, s.top = u;
+    const [n, s, o, h] = this.getChildren();
+    if (n && o) {
+      const l = n.height + o.height, a = i * (n.height / l), c = l + i;
+      let d = n.height + a, g = c - d, u = o.top + a;
+      const m = n.calcMinHeight(), b = o.calcMinHeight();
+      d < m && g > b ? (d = m, g = c - d, u = n.top + d) : g < b && d > m && (g = b, d = c - g, u = n.top + d), n.height = d, o.height = g, o.top = u;
     }
-    r && o && (r.height += i, o.height += i);
+    h && s && (h.height += i, s.height += i);
   }
 }
-const A = {
+const S = {
   size: "50%",
-  position: h.Left
+  position: r.Left
 };
-class M {
+class R {
   constructor({
     parentRect: t,
     children: i,
     siblingConfigNode: n,
-    id: o,
-    minWidth: s,
-    minHeight: r,
+    id: s,
+    minWidth: o,
+    minHeight: h,
     position: l,
-    size: d,
+    size: a,
     ...c
   }) {
-    p(this, "left");
-    p(this, "top");
-    p(this, "width");
-    p(this, "height");
-    this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = o, this.minWidth = s, this.minHeight = r, this.position = this.getPosition(l), this.size = this.getSize(d), this.nonCoreData = c, this.setBounds();
+    f(this, "left");
+    f(this, "top");
+    f(this, "width");
+    f(this, "height");
+    this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = s, this.minWidth = o, this.minHeight = h, this.position = this.getPosition(l), this.size = this.getSize(a), this.nonCoreData = c, this.setBounds();
   }
   getPosition(t) {
     if (!this.siblingConfigNode)
       return t;
-    const i = _(this.siblingConfigNode.position);
+    const i = F(this.siblingConfigNode.position);
     if (!t)
       return i;
     if (t !== i)
@@ -335,46 +339,46 @@ class M {
   }
   getSize(t) {
     if (!this.siblingConfigNode)
-      return P(t);
+      return y(t);
     if (!t) {
       if (this.siblingConfigNode.size < 1)
         return 1 - this.siblingConfigNode.size;
-      if (this.siblingConfigNode.position === h.Left || this.siblingConfigNode.position === h.Right)
+      if (this.siblingConfigNode.position === r.Left || this.siblingConfigNode.position === r.Right)
         return this.parentRect.width - this.siblingConfigNode.width;
-      if (this.siblingConfigNode.position === h.Top || this.siblingConfigNode.position === h.Bottom)
+      if (this.siblingConfigNode.position === r.Top || this.siblingConfigNode.position === r.Bottom)
         return this.parentRect.height - this.siblingConfigNode.height;
     }
-    const i = P(t);
+    const i = y(t);
     if (i < 1) {
       if (i + this.siblingConfigNode.size !== 1)
         throw new Error("[bwin] Sum of sibling sizes is not equal to 1");
     } else {
-      if ((this.position === h.Left || this.position === h.Right) && i + this.siblingConfigNode.size !== this.parentRect.width)
+      if ((this.position === r.Left || this.position === r.Right) && i + this.siblingConfigNode.size !== this.parentRect.width)
         throw new Error("[bwin] Sum of sibling sizes is not equal to parent width");
-      if ((this.position === h.Top || this.position === h.Bottom) && i + this.siblingConfigNode.size !== this.parentRect.height)
+      if ((this.position === r.Top || this.position === r.Bottom) && i + this.siblingConfigNode.size !== this.parentRect.height)
         throw new Error("[bwin] Sum of sibling sizes is not equal to parent height");
     }
     return i;
   }
   setBounds() {
-    if (this.position === h.Root)
+    if (this.position === r.Root)
       this.left = 0, this.top = 0, this.width = this.parentRect.width, this.height = this.parentRect.height;
-    else if (this.position === h.Left) {
+    else if (this.position === r.Left) {
       const t = this.size < 1 ? this.parentRect.width * this.size : this.size;
       this.left = this.parentRect.left, this.top = this.parentRect.top, this.width = t, this.height = this.parentRect.height;
-    } else if (this.position === h.Right) {
+    } else if (this.position === r.Right) {
       const t = this.size < 1 ? this.parentRect.width * this.size : this.size;
       this.left = this.parentRect.left + this.parentRect.width - t, this.top = this.parentRect.top, this.width = t, this.height = this.parentRect.height;
-    } else if (this.position === h.Top) {
+    } else if (this.position === r.Top) {
       const t = 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 = t;
-    } else if (this.position === h.Bottom) {
+    } else if (this.position === r.Bottom) {
       const t = this.size < 1 ? this.parentRect.height * this.size : this.size;
       this.left = this.parentRect.left, this.top = this.parentRect.top + this.parentRect.height - t, this.width = this.parentRect.width, this.height = t;
     }
   }
   createSash() {
-    return new g({
+    return new p({
       left: this.left,
       top: this.top,
       width: this.width,
@@ -394,7 +398,7 @@ class M {
         children: t
       };
     if (typeof t == "string" || typeof t == "number") {
-      const i = P(t);
+      const i = y(t);
       if (isNaN(i))
         throw new Error(`[bwin] Invalid size value: ${i}`);
       return {
@@ -406,28 +410,28 @@ class M {
       throw new Error(`[bwin] Invalid config value: ${t}`);
     }
   }
-  createPrimaryConfigNode({ size: t, position: i, children: n, id: o, minWidth: s, minHeight: r, ...l }) {
-    return new M({
+  createPrimaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...l }) {
+    return new R({
       parentRect: this,
-      size: t ?? A.size,
-      position: i ?? A.position,
+      size: t ?? S.size,
+      position: i ?? S.position,
       children: n,
-      id: o,
-      minWidth: s,
-      minHeight: r,
+      id: s,
+      minWidth: o,
+      minHeight: h,
       ...l
     });
   }
-  createSecondaryConfigNode({ size: t, position: i, children: n, id: o, minWidth: s, minHeight: r, ...l }, d) {
-    return new M({
+  createSecondaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...l }, a) {
+    return new R({
       parentRect: this,
       size: t,
       position: i,
       children: n,
-      siblingConfigNode: d,
-      id: o,
-      minWidth: s,
-      minHeight: r,
+      siblingConfigNode: a,
+      id: s,
+      minWidth: o,
+      minHeight: h,
       ...l
     });
   }
@@ -436,64 +440,158 @@ class M {
     if (!Array.isArray(this.children) || this.children.length === 0)
       return t;
     const i = this.normConfig(this.children[0]), n = this.normConfig(this.children.at(1));
-    let o, s;
-    return !i.size && !i.position && n ? (n.position || (n.position = h.Right), o = this.createPrimaryConfigNode(n), s = this.createSecondaryConfigNode(
+    let s, o;
+    return !i.size && !i.position && n ? (n.position || (n.position = r.Right), s = this.createPrimaryConfigNode(n), o = this.createSecondaryConfigNode(
       i,
-      o
-    )) : (o = this.createPrimaryConfigNode(i), s = this.createSecondaryConfigNode(
+      s
+    )) : (s = this.createPrimaryConfigNode(i), o = this.createSecondaryConfigNode(
       n,
-      o
-    )), o && s && (t.children.push(o.buildSashTree()), t.children.push(s.buildSashTree())), t;
+      s
+    )), s && o && (t.children.push(s.buildSashTree()), t.children.push(o.buildSashTree())), t;
   }
 }
-const v = {
+const A = {
   width: 333,
   height: 333
 }, D = {
   fitContainer: !1
 };
-class q extends M {
+class K extends R {
   constructor({
     id: t,
     children: i,
-    width: n = v.width,
-    height: o = v.height,
-    fitContainer: s = D.fitContainer,
-    ...r
+    width: n = A.width,
+    height: s = A.height,
+    fitContainer: o = D.fitContainer,
+    ...h
   } = {
-    ...v,
+    ...A,
     ...D
   }) {
     super({
       id: t,
       children: i,
       size: NaN,
-      position: h.Root,
-      parentRect: { width: n, height: o },
-      ...r
-    }), this.fitContainer = s;
+      position: r.Root,
+      parentRect: { width: n, height: s },
+      ...h
+    }), this.fitContainer = o;
   }
 }
-class j extends g {
+class V extends p {
   constructor(t = w) {
-    super({ ...t, position: h.Root }), Object.assign(this, D);
+    super({ ...t, position: r.Root }), Object.assign(this, D);
   }
 }
-const K = {
+function M(e) {
+  const 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 J(e) {
+  const 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 Q(e, { size: t }) {
+  const i = y(t);
+  let n = e.width / 2;
+  i && (i < 1 ? n = e.width * i : n = i);
+  const s = new p({
+    top: e.top,
+    left: e.left,
+    width: n,
+    height: e.height,
+    position: r.Left
+  }), o = new p({
+    top: e.top,
+    left: e.left + s.width,
+    width: e.width - n,
+    height: e.height,
+    position: r.Right
+  }), h = M(o);
+  return o.domNode = h, E(h, e.domNode), e.addChild(s), e.addChild(o), s;
+}
+function Z(e, { size: t }) {
+  const i = y(t);
+  let n = e.width / 2;
+  i && (i < 1 ? n = e.width * i : n = i);
+  const s = new p({
+    left: e.left,
+    top: e.top,
+    width: e.width - n,
+    height: e.height,
+    position: r.Left
+  }), o = new p({
+    left: e.left + s.width,
+    top: e.top,
+    width: n,
+    height: e.height,
+    position: r.Right
+  }), h = M(s);
+  return s.domNode = h, E(h, e.domNode), e.addChild(s), e.addChild(o), o;
+}
+function tt(e, { size: t }) {
+  const i = y(t);
+  let n = e.height / 2;
+  i && (i < 1 ? n = e.height * i : n = i);
+  const s = new p({
+    left: e.left,
+    top: e.top,
+    width: e.width,
+    height: n,
+    position: r.Top
+  }), o = new p({
+    left: e.left,
+    top: e.top + s.height,
+    width: e.width,
+    height: e.height - n,
+    position: r.Bottom
+  }), h = M(o);
+  return o.domNode = h, E(h, e.domNode), e.addChild(s), e.addChild(o), s;
+}
+function et(e, { size: t }) {
+  const i = y(t);
+  let n = e.height / 2;
+  i && (i < 1 ? n = e.height * i : n = i);
+  const s = new p({
+    top: e.top,
+    left: e.left,
+    width: e.width,
+    height: e.height - n,
+    position: r.Top
+  }), o = new p({
+    top: e.top + s.height,
+    left: e.left,
+    width: e.width,
+    height: n,
+    position: r.Bottom
+  }), h = M(s);
+  return s.domNode = h, E(h, e.domNode), e.addChild(s), e.addChild(o), o;
+}
+function it(e, { position: t, size: i, minWidth: n, minHeight: s }) {
+  if (t === r.Left)
+    return Q(e, { size: i });
+  if (t === r.Right)
+    return Z(e, { size: i });
+  if (t === r.Top)
+    return tt(e, { size: i });
+  if (t === r.Bottom)
+    return et(e, { size: i });
+}
+const nt = {
   createPane(e) {
-    const t = N(e);
+    const t = M(e);
     return e.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
   },
   // Intended to be overridden
   onPaneCreate(e, t) {
-    t.store.content && e.append(E(t.store.content)), this != null && this.debug && (e.style.backgroundColor = W(), e.innerHTML = "", e.append(S(e)));
+    t.store.content && e.append(C(t.store.content)), this != null && this.debug && (e.style.backgroundColor = W(), e.innerHTML = "", e.append(v(e)));
   },
   updatePane(e) {
-    return V(e);
+    return J(e);
   },
   // Intended to be overridden
   onPaneUpdate(e, t) {
-    this != null && this.debug && (e.innerHTML = "", e.append(S(e)));
+    this != null && this.debug && (e.innerHTML = "", e.append(v(e)));
   },
   /**
    * Add a pane into the target pane. The two panes become next to each other
@@ -502,12 +600,12 @@ const K = {
    * @param {'top'|'right'|'bottom'|'left'} position - The position of the new pane relative to the target pane
    * @returns {Sash} - The newly created sash
    */
-  addPane(e, t) {
+  addPane(e, { position: t, size: i }) {
     if (!t) throw new Error("[bwin] Position is required when adding pane");
-    const i = this.rootSash.getById(e);
-    if (!i) throw new Error("[bwin] Parent sash not found when adding pane");
-    const n = et(i, t);
-    return i.id = R(), this.update(), n;
+    const n = this.rootSash.getById(e);
+    if (!n) throw new Error("[bwin] Parent sash not found when adding pane");
+    const s = it(n, { position: t, size: i });
+    return n.id = z(), this.update(), s;
   },
   /**
    * Remove a pane
@@ -516,117 +614,34 @@ const K = {
    */
   removePane(e) {
     const t = this.rootSash.getDescendantParentById(e);
-    if (!t) throw new Error("[bwin] Can not remove root pane");
+    if (!t) throw new Error("[bwin] Parent sash not found when removing pane");
     const i = t.getChildSiblingById(e);
-    t.id = R(), i.children.length === 0 ? (t.domNode = i.domNode, t.domNode.setAttribute("sash-id", t.id), t.children = []) : (t.children = i.children, i.position === h.Left ? i.width = t.width : i.position === h.Right ? (i.width = t.width, i.left = t.left) : i.position === h.Top ? i.height = t.height : i.position === h.Bottom && (i.height = t.height, i.top = t.top)), this.update();
+    t.id = z(), i.children.length === 0 ? (t.domNode = i.domNode, t.domNode.setAttribute("sash-id", t.id), t.children = []) : (t.children = i.children, i.position === r.Left ? i.width = t.width : i.position === r.Right ? (i.width = t.width, i.left = t.left) : i.position === r.Top ? i.height = t.height : i.position === r.Bottom && (i.height = t.height, i.top = t.top)), this.update();
   }
 };
-function N(e) {
-  const 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 V(e) {
-  const 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 J(e) {
-  const t = new g({
-    top: e.top,
-    left: e.left,
-    width: e.width / 2,
-    height: e.height,
-    position: h.Left
-  }), i = new g({
-    top: e.top,
-    left: e.left + t.width,
-    width: e.width / 2,
-    height: e.height,
-    position: h.Right
-  }), n = N(i);
-  return i.domNode = n, C(n, e.domNode), e.addChild(t), e.addChild(i), t;
-}
-function Q(e) {
-  const t = new g({
-    top: e.top,
-    left: e.left,
-    width: e.width / 2,
-    height: e.height,
-    position: h.Left
-  }), i = N(t);
-  t.domNode = i, C(i, e.domNode);
-  const n = new g({
-    top: e.top,
-    left: e.left + t.width,
-    width: e.width / 2,
-    height: e.height,
-    position: h.Right
-  });
-  return e.addChild(t), e.addChild(n), n;
-}
-function Z(e) {
-  const t = new g({
-    top: e.top,
-    left: e.left,
-    width: e.width,
-    height: e.height / 2,
-    position: h.Top
-  }), i = new g({
-    top: e.top + t.height,
-    left: e.left,
-    width: e.width,
-    height: e.height / 2,
-    position: h.Bottom
-  }), n = N(i);
-  return i.domNode = n, C(n, e.domNode), e.addChild(t), e.addChild(i), t;
-}
-function tt(e) {
-  const t = new g({
-    top: e.top,
-    left: e.left,
-    width: e.width,
-    height: e.height / 2,
-    position: h.Top
-  }), i = N(t);
-  t.domNode = i, C(i, e.domNode);
-  const n = new g({
-    top: e.top + t.height,
-    left: e.left,
-    width: e.width,
-    height: e.height / 2,
-    position: h.Bottom
-  });
-  return e.addChild(t), e.addChild(n), n;
-}
-function et(e, t) {
-  if (t === h.Left)
-    return J(e);
-  if (t === h.Right)
-    return Q(e);
-  if (t === h.Top)
-    return Z(e);
-  if (t === h.Bottom)
-    return tt(e);
-}
-function S(e) {
+function v(e) {
   const t = document.createElement("pre");
   t.style.fontSize = "10px";
   const i = `
-id: ${e.getAttribute("sash-id")}
+${e.getAttribute("sash-id")}
+${e.getAttribute("position")}
 top: ${e.style.top}
 left: ${e.style.left}
 width: ${e.style.width}
 height: ${e.style.height}
-position: ${e.getAttribute("position")}
 `;
   return t.innerHTML = i.trim(), t;
 }
-const it = {
-  create() {
+const st = {
+  createWindow() {
     const e = document.createElement("bw-window");
-    e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("sash-id", this.rootSash.id), this.rootSash.walk((t) => {
-      let i = null;
-      t.children.length > 0 ? (i = this.createMuntin(t), this.onMuntinCreate(i, t), e.append(i)) : (i = this.createPane(t), this.onPaneCreate(i, t), e.prepend(i)), t.domNode = i;
-    }), this.windowElement = e, this.containerElement.append(this.windowElement);
+    return e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("sash-id", this.rootSash.id), e;
+  },
+  glaze() {
+    this.rootSash.walk((e) => {
+      let t = null;
+      e.children.length > 0 ? (t = this.createMuntin(e), this.onMuntinCreate(t, e), this.windowElement.append(t)) : (t = this.createPane(e), this.onPaneCreate(t, e), this.windowElement.prepend(t)), e.domNode = t;
+    });
   },
   update() {
     this.windowElement.style.width = `${this.rootSash.width}px`, this.windowElement.style.height = `${this.rootSash.height}px`;
@@ -638,7 +653,7 @@ const it = {
       i.children.length > 0 ? t.includes(i.id) ? (this.updateMuntin(i), this.onMuntinUpdate(i.domNode, i)) : (i.domNode = this.createMuntin(i), this.windowElement.append(i.domNode)) : t.includes(i.id) ? (this.updatePane(i), this.onPaneUpdate(i.domNode, i)) : (i.domNode || (i.domNode = this.createPane(i)), this.windowElement.prepend(i.domNode));
     });
   }
-}, nt = {
+}, ot = {
   muntinSize: 4,
   createMuntin(e) {
     const t = document.createElement("bw-muntin"), i = e.leftChild, n = e.topChild;
@@ -652,7 +667,7 @@ const it = {
   },
   onMuntinUpdate(e, t) {
   }
-}, ot = {
+}, ht = {
   fitContainer: !1,
   enableFitContainer() {
     new ResizeObserver((t) => {
@@ -660,7 +675,7 @@ const it = {
         i.target === this.containerElement && this.fitContainer && (this.rootSash.width = i.contentRect.width, this.rootSash.height = i.contentRect.height, this.update());
     }).observe(this.containerElement);
   }
-}, st = {
+}, rt = {
   activeMuntinSash: null,
   isResizeStarted: !1,
   isDropStarted: !1,
@@ -679,23 +694,23 @@ const it = {
       this.activeMuntinSash = this.rootSash.getById(t), this.activeMuntinSash && (this.isResizeStarted = !0, this.lastX = e.pageX, this.lastY = e.pageY, this.applyResizeStyles());
     }), document.addEventListener("mousemove", (e) => {
       if (!this.isResizeStarted || !this.activeMuntinSash) return;
-      const [t, i, n, o] = this.activeMuntinSash.getChildren(), s = this.activeMuntinSash.isLeftRightSplit(), r = this.activeMuntinSash.isTopBottomSplit();
-      if (s && o && i) {
-        const l = e.pageX - this.lastX, d = o.width + l, c = i.width - l;
-        if (d <= o.calcMinWidth() || c <= i.calcMinWidth())
+      const [t, i, n, s] = this.activeMuntinSash.getChildren(), o = this.activeMuntinSash.isLeftRightSplit(), h = this.activeMuntinSash.isTopBottomSplit();
+      if (o && s && i) {
+        const l = e.pageX - this.lastX, a = s.width + l, c = i.width - l;
+        if (a <= s.calcMinWidth() || c <= i.calcMinWidth())
           return;
-        o.width = d, i.width = c, i.left = i.left + l, this.update(), this.lastX = e.pageX;
-      } else if (r && t && n) {
-        const l = e.pageY - this.lastY, d = t.height + l, c = n.height - l;
-        if (d <= t.calcMinHeight() || c <= n.calcMinHeight())
+        s.width = a, i.width = c, i.left = i.left + l, this.update(), this.lastX = e.pageX;
+      } else if (h && t && n) {
+        const l = e.pageY - this.lastY, a = t.height + l, c = n.height - l;
+        if (a <= t.calcMinHeight() || c <= n.calcMinHeight())
           return;
-        t.height = d, n.height = c, n.top = n.top + l, this.update(), this.lastY = e.pageY;
+        t.height = a, n.height = c, n.top = n.top + l, this.update(), this.lastY = e.pageY;
       }
     }), document.addEventListener("mouseup", () => {
       this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
     });
   }
-}, ht = {
+}, lt = {
   activeDropPaneEl: null,
   // Intended to be overridden in `BinaryWindow` class
   onPaneDrop(e, t) {
@@ -705,7 +720,7 @@ const it = {
       e.preventDefault();
       const 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;
-      const i = k(t, e);
+      const i = X(t, e);
       t.setAttribute("drop-area", i);
     }), this.windowElement.addEventListener("dragleave", (e) => {
       e.currentTarget.contains(e.relatedTarget) && e.currentTarget !== e.relatedTarget || this.activeDropPaneEl && (this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null);
@@ -715,17 +730,21 @@ const it = {
       this.onPaneDrop(e, i), typeof i.store.onDrop == "function" && i.store.onDrop(e, i), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
     });
   }
-};
-class L {
+}, at = !1;
+class T {
   constructor(t) {
-    p(this, "windowElement", null);
-    p(this, "containerElement", null);
-    p(this, "debug", !1);
+    f(this, "windowElement", null);
+    f(this, "containerElement", null);
+    f(this, "debug", at);
     let i = null;
-    t instanceof j ? (i = t, this.rootSash = t) : (i = new q(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
+    t instanceof V ? (i = t, this.rootSash = t) : (i = new K(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer, this.windowElement = this.createWindow(), this.glaze();
+  }
+  // Features can work independently to each other
+  enableFeatures() {
+    this.enableResize(), this.enableDrop(), this.fitContainer && this.enableFitContainer();
   }
   mount(t) {
-    this.containerElement = t, this.create(), this.enableResize(), this.enableDrop(), this.fitContainer && this.enableFitContainer();
+    this.containerElement = t, this.containerElement.append(this.windowElement), this.enableFeatures();
   }
   static assemble(...t) {
     t.forEach((i) => {
@@ -733,15 +752,15 @@ class L {
     });
   }
 }
-L.assemble(
-  it,
-  nt,
-  K,
+T.assemble(
+  st,
   ot,
+  nt,
   ht,
-  st
+  lt,
+  rt
 );
-function x(e) {
+function L(e) {
   if (e.tagName === "BW-PANE")
     return e.getAttribute("sash-id");
   const t = e.closest("bw-pane");
@@ -749,62 +768,147 @@ function x(e) {
     throw new Error("[bwin] Pane element not found");
   return t.getAttribute("sash-id");
 }
-const T = "bw-glass-action--close", rt = [
-  {
-    label: "",
-    className: T,
-    onClick: (e, t) => {
-      const i = x(e.target);
-      t.binaryWindow.removePane(i);
+const dt = {
+  label: "",
+  className: "bw-glass-action--close",
+  onClick: (e, t) => {
+    const i = L(e.target);
+    t.removePane(i);
+  }
+}, ct = {
+  label: "",
+  className: "bw-glass-action--minimize",
+  onClick: (e, t) => {
+    const i = t.sillElement;
+    if (!i) throw new Error("[bwin] Sill element not found when minimizing");
+    const n = C('<button class="bw-minimized-glass" />');
+    i.append(n);
+    const s = e.target.closest("bw-pane"), o = e.target.closest("bw-glass"), h = s.getAttribute("sash-id"), l = s.getAttribute("position");
+    n.bwGlassElement = o, n.bwOriginalPosition = l, n.bwOriginalBoundingRect = P(s), t.removePane(h);
+  }
+}, gt = {
+  label: "",
+  className: "bw-glass-action--maximize",
+  onClick: (e) => {
+    const 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 = P(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
+  }
+};
+function ut(e, t) {
+  const i = e.left + e.width, n = e.top + e.height, s = t.left + t.width, o = t.top + t.height;
+  if (e.left >= s || t.left >= i || e.top >= o || t.top >= n)
+    return null;
+  const h = Math.max(e.left, t.left), l = Math.max(e.top, t.top), a = Math.min(i, s), c = Math.min(n, o);
+  return {
+    left: h,
+    top: l,
+    width: a - h,
+    height: c - l
+  };
+}
+const ft = [ct, gt, dt], pt = {
+  enableActions() {
+    this.handleMinimizedGlassClick(), this.observeActionButtons();
+  },
+  restoreGlass(e) {
+    const t = e.bwOriginalBoundingRect;
+    let i = 0, n = null;
+    if (this.windowElement.querySelectorAll("bw-pane").forEach((s) => {
+      const o = P(s), h = ut(t, o);
+      if (h) {
+        const l = h.width * h.height;
+        l > i && (i = l, n = s);
+      }
+    }), n) {
+      const s = e.bwOriginalPosition, o = P(n);
+      let h = 0;
+      if (s === r.Left || s === r.Right)
+        h = t.width >= o.width ? o.width / 2 : t.width;
+      else if (s === r.Top || s === r.Bottom)
+        h = t.height >= o.height ? o.height / 2 : t.height;
+      else
+        throw new Error("[bwin] Invalid position when restoring glass");
+      this.addPane(n.getAttribute("sash-id"), {
+        position: s,
+        size: h
+      }).domNode.append(e.bwGlassElement);
     }
+  },
+  handleMinimizedGlassClick() {
+    this.sillElement.addEventListener("click", (e) => {
+      if (!e.target.matches(".bw-minimized-glass")) return;
+      const t = e.target;
+      this.restoreGlass(t), t.remove();
+    });
+  },
+  updateDisabledStateOfActionButtons() {
+    this.updateDisabledState(".bw-glass-action--close"), this.updateDisabledState(".bw-glass-action--minimize"), this.updateDisabledState(".bw-glass-action--maximize");
+  },
+  updateDisabledState(e) {
+    if (this.windowElement.querySelectorAll("bw-pane").length === 1) {
+      const i = this.windowElement.querySelector(e);
+      i && i.setAttribute("disabled", "");
+    } else
+      this.windowElement.querySelectorAll(e).forEach((i) => {
+        i.removeAttribute("disabled");
+      });
+  },
+  observeActionButtons() {
+    this.updateDisabledStateOfActionButtons(), new MutationObserver((t) => {
+      t.forEach((i) => {
+        i.type === "childList" && this.updateDisabledStateOfActionButtons();
+      });
+    }).observe(this.windowElement, {
+      childList: !0
+    });
   }
-], y = {
+}, N = {
   title: null,
   content: null,
   tabs: [],
   actions: void 0,
   draggable: !0
 };
-class z {
+class x {
   constructor({
-    title: t = y.title,
-    content: i = y.content,
-    tabs: n = y.tabs,
-    actions: o = y.actions,
-    draggable: s = y.draggable,
-    sash: r,
+    title: t = N.title,
+    content: i = N.content,
+    tabs: n = N.tabs,
+    actions: s = N.actions,
+    draggable: o = N.draggable,
+    sash: h,
     binaryWindow: l
   }) {
-    p(this, "domNode");
-    this.title = t, this.content = i, this.tabs = n, this.actions = o, this.sash = r, this.draggable = s, this.binaryWindow = l, this.build();
+    f(this, "domNode");
+    this.title = t, this.content = i, this.tabs = n, this.actions = s, this.sash = h, this.draggable = o, this.binaryWindow = l, this.build();
   }
   build() {
     const t = document.createElement("bw-glass-header");
     if (Array.isArray(this.tabs) && this.tabs.length > 0)
       t.append(this.createTabs());
     else if (this.title) {
-      const o = document.createElement("bw-glass-title");
-      o.append(E(this.title)), t.append(o);
+      const s = document.createElement("bw-glass-title");
+      s.append(C(this.title)), t.append(s);
     }
     t.setAttribute("can-drag", this.draggable), t.append(this.createActions());
-    const i = document.createElement("bw-glass-content"), n = E(this.content);
+    const i = document.createElement("bw-glass-content"), n = C(this.content);
     n && i.append(n), this.domNode = document.createElement("bw-glass"), this.domNode.append(t, i);
   }
   createTabs() {
     const t = document.createElement("bw-glass-tab-container");
     for (const i of this.tabs) {
-      const n = (i == null ? void 0 : i.label) ?? i, o = E(`<button class="bw-glass-tab">${n}</button>`);
-      t.append(o);
+      const n = (i == null ? void 0 : i.label) ?? i, s = C(`<button class="bw-glass-tab">${n}</button>`);
+      t.append(s);
     }
     return t;
   }
   createActions() {
-    const t = document.createElement("bw-glass-action-container"), i = this.actions === void 0 ? rt : Array.isArray(this.actions) ? this.actions : [];
+    const t = document.createElement("bw-glass-action-container"), i = this.actions === void 0 ? ft : Array.isArray(this.actions) ? this.actions : [];
     for (const n of i) {
-      const o = (n == null ? void 0 : n.label) ?? n, s = n.className ? `bw-glass-action ${n.className}` : "bw-glass-action", r = E(`<button class="${s}">${o}</button>`);
-      typeof n.onClick == "function" && r.addEventListener("click", (l) => {
-        n.onClick(l, this);
-      }), t.append(r);
+      const s = (n == null ? void 0 : n.label) ?? n, o = n.className ? `bw-glass-action ${n.className}` : "bw-glass-action", h = C(`<button class="${o}">${s}</button>`);
+      typeof n.onClick == "function" && h.addEventListener("click", (l) => {
+        n.onClick(l, this.binaryWindow);
+      }), t.append(h);
     }
     return t;
   }
@@ -815,67 +919,66 @@ class z {
     return this.domNode.querySelector("bw-glass-header");
   }
 }
-const lt = {
-  enableObservers() {
-    this.observeCloseButtons();
-  },
-  observeCloseButtons() {
-    const e = `.${T}`;
-    new MutationObserver((i) => {
-      i.forEach((n) => {
-        if (n.type === "childList")
-          if (this.windowElement.querySelectorAll("bw-pane").length === 1) {
-            const s = this.windowElement.querySelector(e);
-            s && s.setAttribute("disabled", "");
-          } else
-            this.windowElement.querySelectorAll(e).forEach((s) => {
-              s.removeAttribute("disabled");
-            });
-      });
-    }).observe(this.windowElement, {
-      childList: !0
-    });
-  }
-}, dt = {
+const wt = {
   activeDragGlassEl: null,
-  // Stores original `can-drop` attribute value of pane element
   activeDragGlassPaneCanDrop: !1,
   onPaneDrop(e, t) {
     if (!this.activeDragGlassEl) return;
     const i = this.activeDropPaneEl.getAttribute("drop-area");
     if (i === "center") {
-      const n = this.activeDragGlassEl.closest("bw-pane"), o = this.activeDropPaneEl.getAttribute("can-drop") !== "false";
-      H(n, this.activeDropPaneEl), n.setAttribute("can-drop", o);
+      const n = this.activeDragGlassEl.closest("bw-pane"), s = this.activeDropPaneEl.getAttribute("can-drop") !== "false";
+      H(n, this.activeDropPaneEl), n.setAttribute("can-drop", s);
       return;
     } else {
-      const n = x(this.activeDragGlassEl);
-      this.addPane(t.id, i).domNode.append(this.activeDragGlassEl), this.removePane(n);
+      const n = L(this.activeDragGlassEl);
+      this.addPane(t.id, { position: i }).domNode.append(this.activeDragGlassEl), this.removePane(n);
     }
   },
   enableDrag() {
     document.addEventListener("mousedown", (e) => {
-      if (!e.target.matches("bw-glass-header") || e.target.getAttribute("can-drag") === "false") return;
+      if (e.button !== 0 || !e.target.matches("bw-glass-header")) return;
+      if (e.target.getAttribute("can-drag") === "false") {
+        e.preventDefault();
+        return;
+      }
       const i = e.target.closest("bw-glass");
       i.setAttribute("draggable", !0), this.activeDragGlassEl = i;
     }), document.addEventListener("mouseup", () => {
       this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl = null);
-    }), document.addEventListener("dragstart", (e) => {
-      if (!e.target.matches("bw-glass") || !this.activeDragGlassEl) return;
+    }), this.windowElement.addEventListener("dragstart", (e) => {
+      if (!(e.target instanceof HTMLElement) || !e.target.matches("bw-glass") || !this.activeDragGlassEl)
+        return;
       e.dataTransfer.effectAllowed = "move";
       const t = this.activeDragGlassEl.closest("bw-pane");
       this.activeDragGlassPaneCanDrop = t.getAttribute("can-drop") !== "false", t.setAttribute("can-drop", !1);
-    }), document.addEventListener("dragend", () => {
+    }), this.windowElement.addEventListener("dragend", () => {
       this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop", this.activeDragGlassPaneCanDrop), this.activeDragGlassEl = null);
     });
   }
+}, mt = {
+  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`);
+  },
+  onMuntinCreate(e) {
+    this.trimMuntin(e);
+  },
+  onMuntinUpdate(e) {
+    this.trimMuntin(e);
+  }
 };
-class at extends L {
-  mount(t) {
-    super.mount(t), this.enableObservers(), this.enableDrag();
+class bt extends T {
+  constructor() {
+    super(...arguments);
+    f(this, "sillElement", null);
+    const i = C("<bw-sill />");
+    this.windowElement.append(i), this.sillElement = i;
+  }
+  enableFeatures() {
+    super.enableFeatures(), this.enableDrag(), this.enableActions();
   }
-  onPaneCreate(t, i) {
-    const n = new z({ ...i.store, sash: i, binaryWindow: this });
-    t.innerHTML = "", t.append(n.domNode), this.debug && n.contentElement.prepend(`${i.id}`);
+  onPaneCreate(i, n) {
+    const s = new x({ ...n.store, sash: n, binaryWindow: this });
+    i.innerHTML = "", i.append(s.domNode), this.debug && s.contentElement.prepend(`${n.id}`);
   }
   onPaneUpdate() {
   }
@@ -887,9 +990,9 @@ class at extends L {
    * @param {Object} glassProps - The glass properties
    *
    */
-  addGlass(t, i, n) {
-    const o = this.addPane(t, i), s = new z({ ...n, sash: o, binaryWindow: this });
-    o.domNode.append(s.domNode);
+  addGlass(i, n, s) {
+    const o = this.addPane(i, { position: n }), h = new x({ ...s, sash: o, binaryWindow: this });
+    o.domNode.append(h.domNode);
   }
   /**
    * Remove glass from or together with the pane
@@ -897,33 +1000,24 @@ class at extends L {
    * @param {string} paneSashId - The Sash ID of the pane that contains the glass
    * @param {boolean} removePane - Whether to remove the pane together
    */
-  removeGlass(t, i) {
-    if (i)
-      this.removePane(t);
+  removeGlass(i, n) {
+    if (n)
+      this.removePane(i);
     else {
-      const n = this.rootSash.getById(t);
-      if (!n) throw new Error("[bwin] Pane not found when removing glass");
-      const o = n.domNode.querySelector("bw-glass");
+      const s = this.rootSash.getById(i);
+      if (!s) throw new Error("[bwin] Pane not found when removing glass");
+      const o = s.domNode.querySelector("bw-glass");
       o && o.remove();
     }
   }
-  trimMuntin(t) {
-    t.hasAttribute("vertical") ? (t.style.top = `${parseFloat(t.style.top) + this.muntinSize / 2}px`, t.style.height = `${parseFloat(t.style.height) - this.muntinSize}px`) : t.hasAttribute("horizontal") && (t.style.left = `${parseFloat(t.style.left) + this.muntinSize / 2}px`, t.style.width = `${parseFloat(t.style.width) - this.muntinSize}px`);
-  }
-  onMuntinCreate(t) {
-    this.trimMuntin(t);
-  }
-  onMuntinUpdate(t) {
-    this.trimMuntin(t);
-  }
 }
-at.assemble(lt, dt);
+bt.assemble(wt, mt, pt);
 export {
-  rt as BUILTIN_ACTIONS,
-  at as BinaryWindow,
-  q as ConfigRoot,
-  L as Frame,
-  h as Position,
-  g as Sash,
-  j as SashConfig
+  ft as BUILTIN_ACTIONS,
+  bt as BinaryWindow,
+  K as ConfigRoot,
+  T as Frame,
+  r as Position,
+  p as Sash,
+  V as SashConfig
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "bwin",
   "description": "A tiling window manager for web browsers",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bhjsdev/bwin.git"
@@ -33,14 +33,13 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
     "test": "vitest"
   },
   "devDependencies": {
     "jsdom": "^25.0.1",
     "prettier": "^3.3.3",
     "prettier-plugin-brace-style": "^0.7.0",
-    "vite": "^5.4.11",
+    "vite": "^6.0.2",
     "vitest": "^2.1.4"
   }
 }