bwin 0.2.3 → 0.2.5

package/dist/bwin.js

@@ -1,18 +1,18 @@
-var $ = Object.defineProperty;
-var P = (e, t, i) => t in e ? $(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
-var f = (e, t, i) => P(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), s = Math.floor(Math.random() * i + t), o = Math.floor(Math.random() * i + t), h = Math.max(0.5, Math.random() * e);
+var L = Object.defineProperty;
+var $ = (i, t, e) => t in i ? L(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var f = (i, t, e) => $(i, typeof t != "symbol" ? t + "" : t, e);
+function I(i = 0.7, t = 128) {
+  const e = 256 - t, n = Math.floor(Math.random() * e + t), s = Math.floor(Math.random() * e + t), o = Math.floor(Math.random() * e + t), h = Math.max(0.5, Math.random() * i);
   return `rgba(${n}, ${s}, ${o}, ${h})`;
 }
-function z(e = 2, t = 3) {
-  if (e < 0 || t < 0)
+function C(i = 2, t = 3) {
+  if (i < 0 || t < 0)
     throw new Error("Parameters must be non-negative numbers");
-  const i = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", n = "0123456789";
+  const e = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", n = "0123456789";
   let s = "";
-  for (let o = 0; o < e; o++) {
-    const h = Math.floor(Math.random() * i.length);
-    s += i[h];
+  for (let o = 0; o < i; o++) {
+    const h = Math.floor(Math.random() * e.length);
+    s += e[h];
   }
   s += "-";
   for (let o = 0; o < t; o++) {
@@ -21,65 +21,65 @@ function z(e = 2, t = 3) {
   }
   return s;
 }
-function b(e, t) {
+function z(i, t) {
   for (; t.firstChild; )
-    e.append(t.firstChild);
+    i.append(t.firstChild);
 }
-function H(e, t) {
-  const i = document.createElement("div");
-  b(i, e), b(e, t), b(t, i);
+function W(i, t) {
+  const e = document.createElement("div");
+  z(e, i), z(i, t), z(t, e);
 }
-function C(e) {
-  if (typeof e == "number" && !isNaN(e))
-    return e;
-  if (typeof e == "string") {
-    const t = e.trim();
+function b(i) {
+  if (typeof i == "number" && !isNaN(i))
+    return i;
+  if (typeof i == "string") {
+    const t = i.trim();
     if (t.endsWith("%")) {
-      const i = t.slice(0, -1);
-      if (!i) return NaN;
-      const n = Number(i);
+      const e = t.slice(0, -1);
+      if (!e) return NaN;
+      const n = Number(e);
       return isNaN(n) ? NaN : n / 100;
     }
     if (t.endsWith("px")) {
-      const i = t.slice(0, -2);
-      if (!i) return NaN;
-      const n = Number(i);
+      const e = t.slice(0, -2);
+      if (!e) return NaN;
+      const n = Number(e);
       return isNaN(n) ? NaN : n;
     }
     return Number(t);
   }
   return NaN;
 }
-function I(e) {
-  return e !== null && typeof e == "object" && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype;
+function H(i) {
+  return i !== null && typeof i == "object" && !Array.isArray(i) && Object.getPrototypeOf(i) === Object.prototype;
 }
-function O(e, t) {
-  for (const i in t) {
-    if (Object.hasOwn(e, i))
-      throw new Error(`Key "${i}" already exists in target object`);
-    e[i] = t[i];
+function O(i, t) {
+  for (const e in t) {
+    if (Object.hasOwn(i, e))
+      throw new Error(`Key "${e}" already exists in target object`);
+    i[e] = t[e];
   }
-  return e;
+  return i;
 }
-function G(e) {
+function P(i) {
   const t = document.createElement("template");
-  return t.innerHTML = e.trim(), t.content;
+  return t.innerHTML = i.trim(), t.content;
 }
-function m(e) {
-  if (e == null || e === "")
+function m(i) {
+  if (i == null || i === "")
     return null;
-  if (typeof e == "string")
+  if (typeof i == "string")
     try {
-      const t = G(e);
+      const t = P(i);
       return t.childNodes.length === 1 ? t.firstChild : t;
     } catch {
-      return document.createTextNode(e);
+      return document.createTextNode(i);
     }
-  return e instanceof Node ? e : document.createTextNode(String(e));
+  return i instanceof Node ? i : document.createTextNode(String(i));
 }
-function A(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 };
+function M(i) {
+  const t = parseFloat(i.style.left) || 0, e = parseFloat(i.style.top) || 0, n = parseFloat(i.style.width) || 0, s = parseFloat(i.style.height) || 0;
+  return { left: t, top: e, width: n, height: s };
 }
 const r = {
   Top: "top",
@@ -91,8 +91,8 @@ const r = {
   Unknown: "unknown",
   Outside: "outside"
 };
-function F(e) {
-  switch (e) {
+function G(i) {
+  switch (i) {
     case r.Top:
       return r.Bottom;
     case r.Right:
@@ -102,41 +102,41 @@ function F(e) {
     case r.Left:
       return r.Right;
     default:
-      throw new Error(`[bwin] Invalid position: ${e}`);
+      throw new Error(`[bwin] Invalid position: ${i}`);
   }
 }
-function _({ width: e, height: t, x: i }) {
-  return t / e * i;
+function F({ width: i, height: t, x: e }) {
+  return t / i * e;
 }
-function k({ width: e, height: t, y: i }) {
-  return e / t * i;
+function _({ width: i, height: t, y: e }) {
+  return i / t * e;
 }
-function U({ width: e, height: t, x: i }) {
-  return t - t / e * i;
+function k({ width: i, height: t, x: e }) {
+  return t - t / i * e;
 }
-function Y({ width: e, height: t, y: i }) {
-  return e - e / t * i;
+function U({ width: i, height: t, y: e }) {
+  return i - i / t * e;
 }
-function X(e, { clientX: t, clientY: i }) {
-  const n = e.getBoundingClientRect(), { width: s, height: o } = n, h = t - n.left, l = i - n.top;
+function Y(i, { clientX: t, clientY: e }) {
+  const n = i.getBoundingClientRect(), { width: s, height: o } = n, h = t - n.left, l = e - n.top;
   if (h < 0 || h > s || l < 0 || l > o)
     return r.Outside;
-  const d = 0.3, a = _({ width: s, height: o, x: h }), c = U({ width: s, height: o, x: h }), p = k({ width: s, height: o, y: l }), u = Y({ width: s, height: o, y: l });
+  const d = 0.3, a = F({ width: s, height: o, x: h }), c = k({ width: s, height: o, x: h }), p = _({ width: s, height: o, y: l }), u = U({ width: s, height: o, y: l });
   return h < s * (0.5 - d / 2) && l > a && l < c ? r.Left : h > s * (0.5 + d / 2) && l < a && l > c ? r.Right : l < o * (0.5 - d / 2) && h > p && h < u ? r.Top : l > o * (0.5 + d / 2) && h < p && h > u ? r.Bottom : h > s * (0.5 - d / 2) && h < s * (0.5 + d / 2) && l > o * (0.5 - d / 2) && l < o * (0.5 + d / 2) ? r.Center : r.Unknown;
 }
-const q = 100, j = 100, w = {
+const X = 100, q = 100, w = {
   left: 0,
   top: 0,
   width: 150,
   height: 150,
   // Initial min values, real min width/height is calculated based on children
-  minWidth: q,
-  minHeight: j
+  minWidth: X,
+  minHeight: q
 };
 class g {
   constructor({
     left: t = w.left,
-    top: i = w.top,
+    top: e = w.top,
     width: n = w.width,
     height: s = w.height,
     minWidth: o = w.minWidth,
@@ -146,12 +146,12 @@ class g {
     position: a,
     id: c
   } = w) {
-    if (this.id = c ?? z(), !a)
+    if (this.id = c ?? C(), !a)
       throw new Error("[bwin] Sash position is required");
-    this.position = a, 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 = d;
+    this.position = a, this.domNode = l, this._top = e, this._left = t, this._width = n, this._height = s, this.children = [], this.minWidth = o, this.minHeight = h, this.store = d;
   }
   walk(t) {
-    this.children.forEach((i) => i.walk(t)), t(this);
+    this.children.forEach((e) => e.walk(t)), t(this);
   }
   isLeaf() {
     return this.children.length === 0;
@@ -183,23 +183,23 @@ class g {
     return this.children.find((t) => t.position === r.Bottom);
   }
   getChildren() {
-    let t = null, i = null, n = null, s = null;
+    let t = null, e = 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];
+      o.position === r.Left ? t = o : o.position === r.Right ? e = o : o.position === r.Top ? n = o : o.position === r.Bottom && (s = o);
+    return [n, e, s, t];
   }
   getAllLeafDescendants() {
     const t = [];
-    return this.walk((i) => {
-      i.children.length === 0 && t.push(i);
+    return this.walk((e) => {
+      e.children.length === 0 && t.push(e);
     }), t;
   }
   calcMinWidth() {
     if (this.isLeaf())
       return this.minWidth;
-    const [t, i, n, s] = this.getChildren();
-    if (s && i) {
-      const o = s.calcMinWidth() + i.calcMinWidth();
+    const [t, e, n, s] = this.getChildren();
+    if (s && e) {
+      const o = s.calcMinWidth() + e.calcMinWidth();
       return Math.max(this.minWidth, o);
     }
     if (t && n) {
@@ -210,9 +210,9 @@ class g {
   calcMinHeight() {
     if (this.isLeaf())
       return this.minHeight;
-    const [t, i, n, s] = this.getChildren();
-    if (s && i) {
-      const o = Math.max(s.calcMinHeight(), i.calcMinHeight());
+    const [t, e, n, s] = this.getChildren();
+    if (s && e) {
+      const o = Math.max(s.calcMinHeight(), e.calcMinHeight());
       return Math.max(this.minHeight, o);
     }
     if (t && n) {
@@ -224,18 +224,25 @@ class g {
   getById(t) {
     if (this.id === t)
       return this;
-    for (const i of this.children) {
-      const n = i.getById(t);
+    for (const e of this.children) {
+      const n = e.getById(t);
       if (n)
         return n;
     }
     return null;
   }
+  swapIds(t, e) {
+    const n = this.getById(t), s = this.getById(e);
+    if (!n || !s)
+      throw new Error("[bwin] Sash not found when swapping IDs");
+    const o = n.id;
+    n.id = s.id, s.id = o;
+  }
   // Get all ids of self and descendants
   getAllIds() {
     const t = [this.id];
-    for (const i of this.children)
-      t.push(...i.getAllIds());
+    for (const e of this.children)
+      t.push(...e.getAllIds());
     return t;
   }
   addChild(t) {
@@ -244,78 +251,78 @@ class g {
     this.children.push(t);
   }
   getDescendantParentById(t) {
-    for (const i of this.children) {
-      if (i.id === t)
+    for (const e of this.children) {
+      if (e.id === t)
         return this;
-      const n = i.getDescendantParentById(t);
+      const n = e.getDescendantParentById(t);
       if (n)
         return n;
     }
     return null;
   }
   getChildSiblingById(t) {
-    return this.children.find((i) => i.id !== t);
+    return this.children.find((e) => e.id !== t);
   }
   get top() {
     return this._top;
   }
   set top(t) {
-    const i = t - this._top;
+    const e = t - this._top;
     this._top = t;
     const [n, s, o, h] = this.getChildren();
-    n && o && (n.top += i, o.top += i), h && s && (h.top += i, s.top += i);
+    n && o && (n.top += e, o.top += e), h && s && (h.top += e, s.top += e);
   }
   get left() {
     return this._left;
   }
   set left(t) {
-    const i = t - this._left;
+    const e = t - this._left;
     this._left = t;
     const [n, s, o, h] = this.getChildren();
-    h && s && (h.left += i, s.left += i), n && o && (n.left += i, o.left += i);
+    h && s && (h.left += e, s.left += e), n && o && (n.left += e, o.left += e);
   }
   get width() {
     return this._width;
   }
   set width(t) {
-    const i = t - this._width;
+    const e = t - this._width;
     this._width = t;
     const [n, s, o, h] = this.getChildren();
     if (h && s) {
-      const l = h.width + s.width, d = i * (h.width / l), a = l + i;
+      const l = h.width + s.width, d = e * (h.width / l), a = l + e;
       let c = h.width + d, p = a - c, u = s.left + d;
-      const E = h.calcMinWidth(), y = s.calcMinWidth();
-      i < 0 && (c < E && p > y ? (c = h.width, p = a - c, u = h.left + c) : p < y && c > E && (p = s.width, c = a - p, u = h.left + c)), h.width = c, s.width = p, s.left = u;
+      const y = h.calcMinWidth(), E = s.calcMinWidth();
+      e < 0 && (c < y && p > E ? (c = h.width, p = a - c, u = h.left + c) : p < E && c > y && (p = s.width, c = a - p, u = h.left + c)), h.width = c, s.width = p, s.left = u;
     }
-    n && o && (n.width += i, o.width += i);
+    n && o && (n.width += e, o.width += e);
   }
   get height() {
     return this._height;
   }
   set height(t) {
-    const i = t - this._height;
+    const e = t - this._height;
     this._height = t;
     const [n, s, o, h] = this.getChildren();
     if (n && o) {
-      const l = n.height + o.height, d = i * (n.height / l), a = l + i;
+      const l = n.height + o.height, d = e * (n.height / l), a = l + e;
       let c = n.height + d, p = a - c, u = o.top + d;
-      if (i < 0) {
-        const E = n.calcMinHeight(), y = o.calcMinHeight();
-        c < E && p > y ? (c = n.height, p = a - c, u = n.top + c) : p < y && c > E && (p = o.height, c = a - p, u = n.top + c);
+      if (e < 0) {
+        const y = n.calcMinHeight(), E = o.calcMinHeight();
+        c < y && p > E ? (c = n.height, p = a - c, u = n.top + c) : p < E && c > y && (p = o.height, c = a - p, u = n.top + c);
       }
       n.height = c, o.height = p, o.top = u;
     }
-    h && s && (h.height += i, s.height += i);
+    h && s && (h.height += e, s.height += e);
   }
 }
 const v = {
   size: "50%",
   position: r.Left
 };
-class R {
+class A {
   constructor({
     parentRect: t,
-    children: i,
+    children: e,
     siblingConfigNode: n,
     id: s,
     minWidth: o,
@@ -328,21 +335,21 @@ class R {
     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(d), this.nonCoreData = a, this.setBounds();
+    this.parentRect = t, this.children = e, this.siblingConfigNode = n, this.id = s, this.minWidth = o, this.minHeight = h, this.position = this.getPosition(l), this.size = this.getSize(d), this.nonCoreData = a, this.setBounds();
   }
   getPosition(t) {
     if (!this.siblingConfigNode)
       return t;
-    const i = F(this.siblingConfigNode.position);
+    const e = G(this.siblingConfigNode.position);
     if (!t)
-      return i;
-    if (t !== i)
+      return e;
+    if (t !== e)
       throw new Error("[bwin] Sibling position and current position are not opposite");
     return t;
   }
   getSize(t) {
     if (!this.siblingConfigNode)
-      return C(t);
+      return b(t);
     if (!t) {
       if (this.siblingConfigNode.size < 1)
         return 1 - this.siblingConfigNode.size;
@@ -351,17 +358,17 @@ class R {
       if (this.siblingConfigNode.position === r.Top || this.siblingConfigNode.position === r.Bottom)
         return this.parentRect.height - this.siblingConfigNode.height;
     }
-    const i = C(t);
-    if (i < 1) {
-      if (i + this.siblingConfigNode.size !== 1)
+    const e = b(t);
+    if (e < 1) {
+      if (e + this.siblingConfigNode.size !== 1)
         throw new Error("[bwin] Sum of sibling sizes is not equal to 1");
     } else {
-      if ((this.position === r.Left || this.position === r.Right) && i + this.siblingConfigNode.size !== this.parentRect.width)
+      if ((this.position === r.Left || this.position === r.Right) && e + this.siblingConfigNode.size !== this.parentRect.width)
         throw new Error("[bwin] Sum of sibling sizes is not equal to parent width");
-      if ((this.position === r.Top || this.position === r.Bottom) && i + this.siblingConfigNode.size !== this.parentRect.height)
+      if ((this.position === r.Top || this.position === r.Bottom) && e + this.siblingConfigNode.size !== this.parentRect.height)
         throw new Error("[bwin] Sum of sibling sizes is not equal to parent height");
     }
-    return i;
+    return e;
   }
   setBounds() {
     if (this.position === r.Root)
@@ -394,16 +401,16 @@ class R {
     });
   }
   normConfig(t) {
-    if (I(t))
+    if (H(t))
       return t;
     if (Array.isArray(t))
       return {
         children: t
       };
     if (typeof t == "string" || typeof t == "number") {
-      const i = C(t);
-      if (isNaN(i))
-        throw new Error(`[bwin] Invalid size value: ${i}`);
+      const e = b(t);
+      if (isNaN(e))
+        throw new Error(`[bwin] Invalid size value: ${e}`);
       return {
         size: t
       };
@@ -413,11 +420,11 @@ class R {
       throw new Error(`[bwin] Invalid config value: ${t}`);
     }
   }
-  createPrimaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...l }) {
-    return new R({
+  createPrimaryConfigNode({ size: t, position: e, children: n, id: s, minWidth: o, minHeight: h, ...l }) {
+    return new A({
       parentRect: this,
       size: t ?? v.size,
-      position: i ?? v.position,
+      position: e ?? v.position,
       children: n,
       id: s,
       minWidth: o,
@@ -425,11 +432,11 @@ class R {
       ...l
     });
   }
-  createSecondaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...l }, d) {
-    return new R({
+  createSecondaryConfigNode({ size: t, position: e, children: n, id: s, minWidth: o, minHeight: h, ...l }, d) {
+    return new A({
       parentRect: this,
       size: t,
-      position: i,
+      position: e,
       children: n,
       siblingConfigNode: d,
       id: s,
@@ -442,38 +449,38 @@ class R {
     const t = this.createSash();
     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));
+    const e = this.normConfig(this.children[0]), n = this.normConfig(this.children.at(1));
     let s, o;
-    return !i.size && !i.position && n ? (n.position || (n.position = r.Right), s = this.createPrimaryConfigNode(n), o = this.createSecondaryConfigNode(
-      i,
+    return !e.size && !e.position && n ? (n.position || (n.position = r.Right), s = this.createPrimaryConfigNode(n), o = this.createSecondaryConfigNode(
+      e,
       s
-    )) : (s = this.createPrimaryConfigNode(i), o = this.createSecondaryConfigNode(
+    )) : (s = this.createPrimaryConfigNode(e), o = this.createSecondaryConfigNode(
       n,
       s
     )), s && o && (t.children.push(s.buildSashTree()), t.children.push(o.buildSashTree())), t;
   }
 }
-const S = {
+const D = {
   width: 333,
   height: 333
-}, D = {
+}, S = {
   fitContainer: !1
 };
-class K extends R {
+class j extends A {
   constructor({
     id: t,
-    children: i,
-    width: n = S.width,
-    height: s = S.height,
-    fitContainer: o = D.fitContainer,
+    children: e,
+    width: n = D.width,
+    height: s = D.height,
+    fitContainer: o = S.fitContainer,
     ...h
   } = {
-    ...S,
-    ...D
+    ...D,
+    ...S
   }) {
     super({
       id: t,
-      children: i,
+      children: e,
       size: NaN,
       position: r.Root,
       parentRect: { width: n, height: s },
@@ -481,120 +488,140 @@ class K extends R {
     }), this.fitContainer = o;
   }
 }
-class V extends g {
+class K extends g {
   constructor(t = w) {
-    super({ ...t, position: r.Root }), Object.assign(this, D);
+    super({ ...t, position: r.Root }), Object.assign(this, S);
   }
 }
-function M(e) {
+function V(i) {
   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 = C(t);
-  let n = e.width / 2;
-  i && (i < 1 ? n = e.width * i : n = i);
-  const s = new g({
-    top: e.top,
-    left: e.left,
-    width: n,
-    height: e.height,
-    position: r.Left
-  }), o = new g({
-    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, b(h, e.domNode), e.addChild(s), e.addChild(o), s;
-}
-function Z(e, { size: t }) {
-  const i = C(t);
-  let n = e.width / 2;
-  i && (i < 1 ? n = e.width * i : n = i);
-  const s = new g({
-    left: e.left,
-    top: e.top,
-    width: e.width - n,
-    height: e.height,
+  return t.style.top = `${i.top}px`, t.style.left = `${i.left}px`, t.style.width = `${i.width}px`, t.style.height = `${i.height}px`, t.setAttribute("sash-id", i.id), t.setAttribute("position", i.position), t;
+}
+function J(i) {
+  const t = i.domNode;
+  return t.style.top = `${i.top}px`, t.style.left = `${i.left}px`, t.style.width = `${i.width}px`, t.style.height = `${i.height}px`, t.setAttribute("position", i.position), t;
+}
+function Q(i, { size: t, id: e }) {
+  const n = b(t);
+  let s = i.width / 2;
+  n && (n < 1 ? s = i.width * n : s = n);
+  const o = new g({
+    id: e,
+    top: i.top,
+    left: i.left,
+    width: s,
+    height: i.height,
     position: r.Left
-  }), o = new g({
-    left: e.left + s.width,
-    top: e.top,
-    width: n,
-    height: e.height,
+  }), h = new g({
+    id: i.id,
+    top: i.top,
+    left: i.left + o.width,
+    width: i.width - s,
+    height: i.height,
+    position: r.Right,
+    domNode: i.domNode
+  });
+  return i.addChild(o), i.addChild(h), i.domNode = null, i.id = C(), o;
+}
+function Z(i, { size: t, id: e }) {
+  const n = b(t);
+  let s = i.width / 2;
+  n && (n < 1 ? s = i.width * n : s = n);
+  const o = new g({
+    id: i.id,
+    left: i.left,
+    top: i.top,
+    width: i.width - s,
+    height: i.height,
+    position: r.Left,
+    domNode: i.domNode
+  }), h = new g({
+    id: e,
+    left: i.left + o.width,
+    top: i.top,
+    width: s,
+    height: i.height,
     position: r.Right
-  }), h = M(s);
-  return s.domNode = h, b(h, e.domNode), e.addChild(s), e.addChild(o), o;
-}
-function tt(e, { size: t }) {
-  const i = C(t);
-  let n = e.height / 2;
-  i && (i < 1 ? n = e.height * i : n = i);
-  const s = new g({
-    left: e.left,
-    top: e.top,
-    width: e.width,
-    height: n,
-    position: r.Top
-  }), o = new g({
-    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, b(h, e.domNode), e.addChild(s), e.addChild(o), s;
-}
-function et(e, { size: t }) {
-  const i = C(t);
-  let n = e.height / 2;
-  i && (i < 1 ? n = e.height * i : n = i);
-  const s = new g({
-    top: e.top,
-    left: e.left,
-    width: e.width,
-    height: e.height - n,
+  });
+  return i.addChild(o), i.addChild(h), i.domNode = null, i.id = C(), h;
+}
+function tt(i, { size: t, id: e }) {
+  const n = b(t);
+  let s = i.height / 2;
+  n && (n < 1 ? s = i.height * n : s = n);
+  const o = new g({
+    id: e,
+    left: i.left,
+    top: i.top,
+    width: i.width,
+    height: s,
     position: r.Top
-  }), o = new g({
-    top: e.top + s.height,
-    left: e.left,
-    width: e.width,
-    height: n,
+  }), h = new g({
+    id: i.id,
+    left: i.left,
+    top: i.top + o.height,
+    width: i.width,
+    height: i.height - s,
+    position: r.Bottom,
+    domNode: i.domNode
+  });
+  return i.addChild(o), i.addChild(h), i.domNode = null, i.id = C(), o;
+}
+function it(i, { size: t, id: e }) {
+  const n = b(t);
+  let s = i.height / 2;
+  n && (n < 1 ? s = i.height * n : s = n);
+  const o = new g({
+    id: i.id,
+    top: i.top,
+    left: i.left,
+    width: i.width,
+    height: i.height - s,
+    position: r.Top,
+    domNode: i.domNode
+  }), h = new g({
+    id: e,
+    top: i.top + o.height,
+    left: i.left,
+    width: i.width,
+    height: s,
     position: r.Bottom
-  }), h = M(s);
-  return s.domNode = h, b(h, e.domNode), e.addChild(s), e.addChild(o), o;
+  });
+  return i.addChild(o), i.addChild(h), i.domNode = null, i.id = C(), h;
 }
-function it(e, { position: t, size: i, minWidth: n, minHeight: s }) {
+function et(i, { position: t, size: e, id: n, minWidth: s, minHeight: o }) {
   if (t === r.Left)
-    return Q(e, { size: i });
+    return Q(i, { size: e, id: n });
   if (t === r.Right)
-    return Z(e, { size: i });
+    return Z(i, { size: e, id: n });
   if (t === r.Top)
-    return tt(e, { size: i });
+    return tt(i, { size: e, id: n });
   if (t === r.Bottom)
-    return et(e, { size: i });
+    return it(i, { size: e, id: n });
+}
+function R(i) {
+  if (i.tagName === "BW-PANE")
+    return i.getAttribute("sash-id");
+  const t = i.closest("bw-pane");
+  if (!t)
+    throw new Error("[bwin] Pane element not found");
+  return t.getAttribute("sash-id");
 }
 const nt = {
-  createPane(e) {
-    const t = M(e);
-    return e.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
+  createPane(i) {
+    const t = V(i);
+    return i.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
   },
   // Intended to be overridden
-  onPaneCreate(e, t) {
-    t.store.content && e.append(m(t.store.content)), this != null && this.debug && (e.style.backgroundColor = W(), e.innerHTML = "", e.append(x(e)));
+  onPaneCreate(i, t) {
+    t.store.content && i.append(m(t.store.content)), this != null && this.debug && (i.style.backgroundColor = I(), i.innerHTML = "", i.append(x(i)));
   },
-  updatePane(e) {
-    return J(e);
+  updatePane(i) {
+    return J(i);
   },
   // Intended to be overridden
-  onPaneUpdate(e, t) {
-    this != null && this.debug && (e.innerHTML = "", e.append(x(e)));
+  onPaneUpdate(i, t) {
+    this != null && this.debug && (i.innerHTML = "", i.append(x(i)));
   },
   /**
    * Add a pane into the target pane. The two panes become next to each other
@@ -603,72 +630,76 @@ const nt = {
    * @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, { position: t, size: i }) {
+  addPane(i, { position: t, size: e, id: n }) {
     if (!t) throw new Error("[bwin] Position is required when adding pane");
-    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;
+    const s = this.rootSash.getById(i);
+    if (!s) throw new Error("[bwin] Parent sash not found when adding pane");
+    const o = et(s, { position: t, size: e, id: n });
+    return this.update(), o;
   },
   /**
    * Remove a pane
    *
    * @param {string} sashId - The Sash ID of the pane to be removed
    */
-  removePane(e) {
-    const t = this.rootSash.getDescendantParentById(e);
+  removePane(i) {
+    const t = this.rootSash.getDescendantParentById(i);
     if (!t) throw new Error("[bwin] Parent sash not found when removing pane");
-    const i = t.getChildSiblingById(e);
-    i.children.length === 0 ? (t.id = i.id, t.domNode = i.domNode, t.domNode.setAttribute("sash-id", i.id), t.children = []) : (t.id = z(), 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();
+    const e = t.getChildSiblingById(i);
+    e.children.length === 0 ? (t.id = e.id, t.domNode = e.domNode, t.domNode.setAttribute("sash-id", e.id), t.children = []) : (t.id = C(), t.children = e.children, e.position === r.Left ? e.width = t.width : e.position === r.Right ? (e.width = t.width, e.left = t.left) : e.position === r.Top ? e.height = t.height : e.position === r.Bottom && (e.height = t.height, e.top = t.top)), this.update();
+  },
+  swapPanes(i, t) {
+    const e = R(i), n = R(t), s = i.getAttribute("can-drop") !== "false", o = t.getAttribute("can-drop") !== "false";
+    this.rootSash.swapIds(e, n), W(i, this.activeDropPaneEl), i.setAttribute("sash-id", n), t.setAttribute("sash-id", e), i.setAttribute("can-drop", o), t.setAttribute("can-drop", s);
   }
 };
-function x(e) {
+function x(i) {
   const t = document.createElement("pre");
   t.style.fontSize = "10px";
-  const i = `
-${e.getAttribute("sash-id")}
-${e.getAttribute("position")}
-top: ${e.style.top}
-left: ${e.style.left}
-width: ${e.style.width}
-height: ${e.style.height}
+  const e = `
+${i.getAttribute("sash-id")}
+${i.getAttribute("position")}
+top: ${i.style.top}
+left: ${i.style.left}
+width: ${i.style.width}
+height: ${i.style.height}
 `;
-  return t.innerHTML = i.trim(), t;
+  return t.innerHTML = e.trim(), t;
 }
 const st = {
   createWindow() {
-    const e = document.createElement("bw-window");
-    return e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("root-sash-id", this.rootSash.id), e;
+    const i = document.createElement("bw-window");
+    return i.style.width = `${this.rootSash.width}px`, i.style.height = `${this.rootSash.height}px`, i.setAttribute("root-sash-id", this.rootSash.id), i;
   },
   glaze() {
-    this.rootSash.walk((e) => {
+    this.rootSash.walk((i) => {
       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;
+      i.children.length > 0 ? (t = this.createMuntin(i), this.onMuntinCreate(t, i), this.windowElement.append(t)) : (t = this.createPane(i), this.onPaneCreate(t, i), this.windowElement.prepend(t)), i.domNode = t;
     });
   },
   update() {
     this.windowElement.style.width = `${this.rootSash.width}px`, this.windowElement.style.height = `${this.rootSash.height}px`;
-    const e = this.rootSash.getAllIds(), t = [];
-    this.windowElement.querySelectorAll("[sash-id]").forEach((i) => {
-      const n = i.getAttribute("sash-id");
-      t.push(n), e.includes(n) || i.remove();
-    }), this.rootSash.walk((i) => {
-      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));
+    const i = this.rootSash.getAllIds(), t = [];
+    this.windowElement.querySelectorAll("[sash-id]").forEach((e) => {
+      const n = e.getAttribute("sash-id");
+      t.push(n), i.includes(n) || e.remove();
+    }), this.rootSash.walk((e) => {
+      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 || (e.domNode = this.createPane(e)), this.windowElement.prepend(e.domNode));
     });
   }
 }, ot = {
   muntinSize: 4,
-  createMuntin(e) {
-    const t = document.createElement("bw-muntin"), i = e.leftChild, n = e.topChild;
-    return i ? (t.style.width = `${this.muntinSize}px`, t.style.height = `${e.height}px`, t.style.top = `${e.top}px`, t.style.left = `${e.left + i.width - this.muntinSize / 2}px`, t.setAttribute("vertical", "")) : n && (t.style.width = `${e.width}px`, t.style.height = `${this.muntinSize}px`, t.style.top = `${e.top + n.height - this.muntinSize / 2}px`, t.style.left = `${e.left}px`, t.setAttribute("horizontal", "")), t.setAttribute("sash-id", e.id), e.store.resizable === !1 && t.setAttribute("resizable", "false"), t;
+  createMuntin(i) {
+    const t = document.createElement("bw-muntin"), e = i.leftChild, n = i.topChild;
+    return e ? (t.style.width = `${this.muntinSize}px`, t.style.height = `${i.height}px`, t.style.top = `${i.top}px`, t.style.left = `${i.left + e.width - this.muntinSize / 2}px`, t.setAttribute("vertical", "")) : n && (t.style.width = `${i.width}px`, t.style.height = `${this.muntinSize}px`, t.style.top = `${i.top + n.height - this.muntinSize / 2}px`, t.style.left = `${i.left}px`, t.setAttribute("horizontal", "")), t.setAttribute("sash-id", i.id), i.store.resizable === !1 && t.setAttribute("resizable", "false"), t;
   },
-  onMuntinCreate(e, t) {
+  onMuntinCreate(i, t) {
   },
-  updateMuntin(e) {
-    const t = e.domNode, i = e.leftChild, n = e.topChild;
-    i ? (t.style.height = `${e.height}px`, t.style.top = `${e.top}px`, t.style.left = `${e.left + i.width - this.muntinSize / 2}px`) : n && (t.style.width = `${e.width}px`, t.style.top = `${e.top + n.height - this.muntinSize / 2}px`, t.style.left = `${e.left}px`);
+  updateMuntin(i) {
+    const t = i.domNode, e = i.leftChild, n = i.topChild;
+    e ? (t.style.height = `${i.height}px`, t.style.top = `${i.top}px`, t.style.left = `${i.left + e.width - this.muntinSize / 2}px`) : n && (t.style.width = `${i.width}px`, t.style.top = `${i.top + n.height - this.muntinSize / 2}px`, t.style.left = `${i.left}px`);
   },
-  onMuntinUpdate(e, t) {
+  onMuntinUpdate(i, t) {
   }
 }, ht = {
   fitContainer: !1,
@@ -677,8 +708,8 @@ const st = {
   },
   enableFitContainer() {
     new ResizeObserver((t) => {
-      for (const i of t)
-        i.target === this.containerElement && this.fitContainer && this.fit();
+      for (const e of t)
+        e.target === this.containerElement && this.fitContainer && this.fit();
     }).observe(this.containerElement);
   }
 }, rt = {
@@ -694,21 +725,21 @@ const st = {
     document.body.classList.remove("body--bw-resize-x"), document.body.classList.remove("body--bw-resize-y");
   },
   enableResize() {
-    document.addEventListener("mousedown", (e) => {
-      if (e.target.tagName !== "BW-MUNTIN" || e.target.getAttribute("resizable") === "false") return;
-      const t = e.target.getAttribute("sash-id");
-      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) => {
+    document.addEventListener("mousedown", (i) => {
+      if (i.target.tagName !== "BW-MUNTIN" || i.target.getAttribute("resizable") === "false") return;
+      const t = i.target.getAttribute("sash-id");
+      this.activeMuntinSash = this.rootSash.getById(t), this.activeMuntinSash && (this.isResizeStarted = !0, this.lastX = i.pageX, this.lastY = i.pageY, this.applyResizeStyles());
+    }), document.addEventListener("mousemove", (i) => {
       if (!this.isResizeStarted || !this.activeMuntinSash) return;
-      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, d = s.width + l, a = i.width - l;
-        if (l > 0 && a <= i.calcMinWidth() || l < 0 && d <= s.calcMinWidth()) return;
-        s.width = d, i.width = a, i.left = i.left + l, this.update(), this.lastX = e.pageX;
+      const [t, e, n, s] = this.activeMuntinSash.getChildren(), o = this.activeMuntinSash.isLeftRightSplit(), h = this.activeMuntinSash.isTopBottomSplit();
+      if (o && s && e) {
+        const l = i.pageX - this.lastX, d = s.width + l, a = e.width - l;
+        if (l > 0 && a <= e.calcMinWidth() || l < 0 && d <= s.calcMinWidth()) return;
+        s.width = d, e.width = a, e.left = e.left + l, this.update(), this.lastX = i.pageX;
       } else if (h && t && n) {
-        const l = e.pageY - this.lastY, d = t.height + l, a = n.height - l;
+        const l = i.pageY - this.lastY, d = t.height + l, a = n.height - l;
         if (l > 0 && a <= n.calcMinHeight() || l < 0 && d <= t.calcMinHeight()) return;
-        t.height = d, n.height = a, n.top = n.top + l, this.update(), this.lastY = e.pageY;
+        t.height = d, n.height = a, n.top = n.top + l, this.update(), this.lastY = i.pageY;
       }
     }), document.addEventListener("mouseup", () => {
       this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
@@ -717,31 +748,31 @@ const st = {
 }, lt = {
   activeDropPaneEl: null,
   // Intended to be overridden in `BinaryWindow` class
-  onPaneDrop(e, t) {
+  onPaneDrop(i, t) {
   },
   enableDrop() {
-    this.windowElement.addEventListener("dragover", (e) => {
-      e.preventDefault();
-      const t = e.target.matches("bw-pane") ? e.target : e.target.closest("bw-pane");
+    this.windowElement.addEventListener("dragover", (i) => {
+      i.preventDefault();
+      const t = i.target.matches("bw-pane") ? i.target : i.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 = 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);
-    }), this.windowElement.addEventListener("drop", (e) => {
+      const e = Y(t, i);
+      t.setAttribute("drop-area", e);
+    }), this.windowElement.addEventListener("dragleave", (i) => {
+      i.currentTarget.contains(i.relatedTarget) && i.currentTarget !== i.relatedTarget || this.activeDropPaneEl && (this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null);
+    }), this.windowElement.addEventListener("drop", (i) => {
       if (!this.activeDropPaneEl || this.activeDropPaneEl.getAttribute("can-drop") === "false") return;
-      const t = this.activeDropPaneEl.getAttribute("sash-id"), i = this.rootSash.getById(t);
-      this.onPaneDrop(e, i), typeof i.store.onDrop == "function" && i.store.onDrop(e, i), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
+      const t = this.activeDropPaneEl.getAttribute("sash-id"), e = this.rootSash.getById(t);
+      this.onPaneDrop(i, e), typeof e.store.onDrop == "function" && e.store.onDrop(i, e), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
     });
   }
 }, dt = !1;
-class L {
+class B {
   constructor(t) {
     f(this, "windowElement", null);
     f(this, "containerElement", null);
     f(this, "debug", dt);
-    let i = null;
-    t instanceof V ? (i = t, this.rootSash = t) : (i = new K(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
+    let e = null;
+    t instanceof K ? (e = t, this.rootSash = t) : (e = new j(t), this.rootSash = e.buildSashTree()), this.fitContainer = e.fitContainer;
   }
   frame(t) {
     this.containerElement = t, this.windowElement = this.createWindow(), this.glaze(), this.containerElement.append(this.windowElement);
@@ -754,12 +785,12 @@ class L {
     this.frame(t), this.enableFeatures();
   }
   static assemble(...t) {
-    t.forEach((i) => {
-      O(this.prototype, i);
+    t.forEach((e) => {
+      O(this.prototype, e);
     });
   }
 }
-L.assemble(
+B.assemble(
   st,
   ot,
   nt,
@@ -767,45 +798,37 @@ L.assemble(
   lt,
   rt
 );
-function B(e) {
-  if (e.tagName === "BW-PANE")
-    return e.getAttribute("sash-id");
-  const t = e.closest("bw-pane");
-  if (!t)
-    throw new Error("[bwin] Pane element not found");
-  return t.getAttribute("sash-id");
-}
 const at = {
   label: "",
   className: "bw-glass-action--close",
-  onClick: (e, t) => {
-    const i = B(e.target);
-    t.removePane(i);
+  onClick: (i, t) => {
+    const e = R(i.target);
+    t.removePane(e);
   }
 }, 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");
+  onClick: (i, t) => {
+    const e = t.sillElement;
+    if (!e) throw new Error("[bwin] Sill element not found when minimizing");
     const n = m('<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 = A(s), t.removePane(h);
+    e.append(n);
+    const s = i.target.closest("bw-pane"), o = i.target.closest("bw-glass"), h = s.getAttribute("sash-id"), l = s.getAttribute("position");
+    n.bwGlassElement = o, n.bwOriginalPosition = l, n.bwOriginalBoundingRect = M(s), n.bwOriginalSashId = h, t.removePane(h);
   }
 }, pt = {
   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 = A(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
+  onClick: (i) => {
+    const t = i.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 = M(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)
+function ut(i, t) {
+  const e = i.left + i.width, n = i.top + i.height, s = t.left + t.width, o = t.top + t.height;
+  if (i.left >= s || t.left >= e || i.top >= o || t.top >= n)
     return null;
-  const h = Math.max(e.left, t.left), l = Math.max(e.top, t.top), d = Math.min(i, s), a = Math.min(n, o);
+  const h = Math.max(i.left, t.left), l = Math.max(i.top, t.top), d = Math.min(e, s), a = Math.min(n, o);
   return {
     left: h,
     top: l,
@@ -817,17 +840,17 @@ const ft = [ct, pt, at], gt = {
   enableActions() {
     this.handleMinimizedGlassClick(), this.observeActionButtons();
   },
-  restoreGlass(e) {
-    const t = e.bwOriginalBoundingRect;
-    let i = 0, n = null;
+  restoreGlass(i) {
+    const t = i.bwOriginalBoundingRect;
+    let e = 0, n = null;
     if (this.windowElement.querySelectorAll("bw-pane").forEach((s) => {
-      const o = A(s), h = ut(t, o);
+      const o = M(s), h = ut(t, o);
       if (h) {
         const l = h.width * h.height;
-        l > i && (i = l, n = s);
+        l > e && (e = l, n = s);
       }
     }), n) {
-      const s = e.bwOriginalPosition, o = A(n), h = n.getAttribute("sash-id"), l = this.rootSash.getById(h);
+      const s = i.bwOriginalPosition, o = M(n), h = n.getAttribute("sash-id"), l = this.rootSash.getById(h);
       let d = 0;
       if (s === r.Left || s === r.Right)
         d = o.width - t.width < l.minWidth ? o.width / 2 : t.width;
@@ -835,35 +858,37 @@ const ft = [ct, pt, at], gt = {
         d = o.height - t.height < l.minHeight ? o.height / 2 : t.height;
       else
         throw new Error("[bwin] Invalid position when restoring glass");
+      const a = i.bwOriginalSashId;
       this.addPane(n.getAttribute("sash-id"), {
+        id: a,
         position: s,
         size: d
-      }).domNode.append(e.bwGlassElement);
+      }).domNode.append(i.bwGlassElement);
     }
   },
   handleMinimizedGlassClick() {
-    this.sillElement.addEventListener("click", (e) => {
-      if (!e.target.matches(".bw-minimized-glass")) return;
-      const t = e.target;
+    this.sillElement.addEventListener("click", (i) => {
+      if (!i.target.matches(".bw-minimized-glass")) return;
+      const t = i.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) {
+  updateDisabledState(i) {
     if (this.windowElement.querySelectorAll("bw-pane").length === 1) {
-      const i = this.windowElement.querySelector(e);
-      i && i.setAttribute("disabled", "");
+      const e = this.windowElement.querySelector(i);
+      e && e.setAttribute("disabled", "");
     } else
-      this.windowElement.querySelectorAll(e).forEach((i) => {
-        i.removeAttribute("disabled");
+      this.windowElement.querySelectorAll(i).forEach((e) => {
+        e.removeAttribute("disabled");
       });
   },
   observeActionButtons() {
     this.updateDisabledStateOfActionButtons(), new MutationObserver((t) => {
-      t.forEach((i) => {
-        i.type === "childList" && this.updateDisabledStateOfActionButtons();
+      t.forEach((e) => {
+        e.type === "childList" && this.updateDisabledStateOfActionButtons();
       });
     }).observe(this.windowElement, {
       childList: !0
@@ -879,7 +904,7 @@ const ft = [ct, pt, at], gt = {
 class T {
   constructor({
     title: t = N.title,
-    content: i = N.content,
+    content: e = N.content,
     tabs: n = N.tabs,
     actions: s = N.actions,
     draggable: o = N.draggable,
@@ -887,7 +912,7 @@ class T {
     binaryWindow: l
   }) {
     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();
+    this.title = t, this.content = e, 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");
@@ -898,20 +923,20 @@ class T {
       s.append(m(this.title)), t.append(s);
     }
     t.setAttribute("can-drag", this.draggable), t.append(this.createActions());
-    const i = document.createElement("bw-glass-content"), n = m(this.content);
-    n && i.append(n), this.domNode = document.createElement("bw-glass"), this.domNode.append(t, i);
+    const e = document.createElement("bw-glass-content"), n = m(this.content);
+    n && e.append(n), this.domNode = document.createElement("bw-glass"), this.domNode.append(t, e);
   }
   createTabs() {
     const t = document.createElement("bw-glass-tab-container");
-    for (const i of this.tabs) {
-      const n = (i == null ? void 0 : i.label) ?? i, s = m(`<button class="bw-glass-tab">${n}</button>`);
+    for (const e of this.tabs) {
+      const n = (e == null ? void 0 : e.label) ?? e, s = m(`<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 ? ft : Array.isArray(this.actions) ? this.actions : [];
-    for (const n of i) {
+    const t = document.createElement("bw-glass-action-container"), e = this.actions === void 0 ? ft : Array.isArray(this.actions) ? this.actions : [];
+    for (const n of e) {
       const s = (n == null ? void 0 : n.label) ?? n, o = n.className ? `bw-glass-action ${n.className}` : "bw-glass-action", h = m(`<button class="${o}">${s}</button>`);
       typeof n.onClick == "function" && h.addEventListener("click", (l) => {
         n.onClick(l, this.binaryWindow);
@@ -929,33 +954,33 @@ class T {
 const wt = {
   activeDragGlassEl: null,
   activeDragGlassPaneCanDrop: !1,
-  onPaneDrop(e, t) {
+  onPaneDrop(i, t) {
     if (!this.activeDragGlassEl) return;
-    const i = this.activeDropPaneEl.getAttribute("drop-area");
-    if (i === "center") {
-      const n = this.activeDragGlassEl.closest("bw-pane"), s = this.activeDropPaneEl.getAttribute("can-drop") !== "false";
-      H(n, this.activeDropPaneEl), n.setAttribute("can-drop", s);
+    const e = this.activeDropPaneEl.getAttribute("drop-area");
+    if (e === "center") {
+      const n = this.activeDragGlassEl.closest("bw-pane");
+      this.swapPanes(n, this.activeDropPaneEl);
       return;
     } else {
-      const n = B(this.activeDragGlassEl);
-      this.addPane(t.id, { position: i }).domNode.append(this.activeDragGlassEl), this.removePane(n);
+      const n = R(this.activeDragGlassEl);
+      this.removePane(n), this.addPane(t.id, { position: e, id: n }).domNode.append(this.activeDragGlassEl);
     }
   },
   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();
+    document.addEventListener("mousedown", (i) => {
+      if (i.button !== 0 || !i.target.matches("bw-glass-header")) return;
+      if (i.target.getAttribute("can-drag") === "false") {
+        i.preventDefault();
         return;
       }
-      const i = e.target.closest("bw-glass");
-      i.setAttribute("draggable", !0), this.activeDragGlassEl = i;
+      const e = i.target.closest("bw-glass");
+      e.setAttribute("draggable", !0), this.activeDragGlassEl = e;
     }), document.addEventListener("mouseup", () => {
       this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl = null);
-    }), this.windowElement.addEventListener("dragstart", (e) => {
-      if (!(e.target instanceof HTMLElement) || !e.target.matches("bw-glass") || !this.activeDragGlassEl)
+    }), this.windowElement.addEventListener("dragstart", (i) => {
+      if (!(i.target instanceof HTMLElement) || !i.target.matches("bw-glass") || !this.activeDragGlassEl)
         return;
-      e.dataTransfer.effectAllowed = "move";
+      i.dataTransfer.effectAllowed = "move";
       const t = this.activeDragGlassEl.closest("bw-pane");
       this.activeDragGlassPaneCanDrop = t.getAttribute("can-drop") !== "false", t.setAttribute("can-drop", !1);
     }), this.windowElement.addEventListener("dragend", () => {
@@ -963,32 +988,32 @@ const wt = {
     });
   }
 }, 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`);
+  trimMuntin(i) {
+    i.hasAttribute("vertical") ? (i.style.top = `${parseFloat(i.style.top) + this.muntinSize / 2}px`, i.style.height = `${parseFloat(i.style.height) - this.muntinSize}px`) : i.hasAttribute("horizontal") && (i.style.left = `${parseFloat(i.style.left) + this.muntinSize / 2}px`, i.style.width = `${parseFloat(i.style.width) - this.muntinSize}px`);
   },
-  onMuntinCreate(e) {
-    this.trimMuntin(e);
+  onMuntinCreate(i) {
+    this.trimMuntin(i);
   },
-  onMuntinUpdate(e) {
-    this.trimMuntin(e);
+  onMuntinUpdate(i) {
+    this.trimMuntin(i);
   }
 };
-class bt extends L {
+class bt extends B {
   constructor() {
     super(...arguments);
     f(this, "sillElement", null);
   }
   frame() {
     super.frame(...arguments);
-    const i = m("<bw-sill />");
-    this.windowElement.append(i), this.sillElement = i;
+    const e = m("<bw-sill />");
+    this.windowElement.append(e), this.sillElement = e;
   }
   enableFeatures() {
     super.enableFeatures(), this.enableDrag(), this.enableActions();
   }
-  onPaneCreate(i, n) {
+  onPaneCreate(e, n) {
     const s = new T({ ...n.store, sash: n, binaryWindow: this });
-    i.innerHTML = "", i.append(s.domNode), this.debug && s.contentElement.prepend(`${n.id}`);
+    e.innerHTML = "", e.append(s.domNode), this.debug && s.contentElement.prepend(`${n.id}`);
   }
   onPaneUpdate() {
   }
@@ -999,18 +1024,18 @@ class bt extends L {
    * @param {Object} props - The pane and glass properties grouped together
    * @returns {Sash} - The newly created Sash
    */
-  addPane(i, n) {
-    const { position: s, size: o, ...h } = n, l = super.addPane(i, { position: s, size: o }), d = new T({ ...h, sash: l, binaryWindow: this });
-    return l.domNode.append(d.domNode), l;
+  addPane(e, n) {
+    const { position: s, size: o, id: h, ...l } = n, d = super.addPane(e, { position: s, size: o, id: h }), a = new T({ ...l, sash: d, binaryWindow: this });
+    return d.domNode.append(a.domNode), d;
   }
 }
 bt.assemble(wt, mt, gt);
 export {
   ft as BUILTIN_ACTIONS,
   bt as BinaryWindow,
-  K as ConfigRoot,
-  L as Frame,
+  j as ConfigRoot,
+  B as Frame,
   r as Position,
   g as Sash,
-  V as SashConfig
+  K as SashConfig
 };

package/package.json

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