react-bwin 0.3.1 → 0.3.3

package/README.md

@@ -1,11 +1,5 @@
 # React Binary Window
 
-A React tiling window manager based on [Binary Window](https://github.com/bhjsdev/bwin) library.
+A React-based tiling window manager featuring resizable panes, drag-and-drop, and more. Built on top of the [Binary Window](https://github.com/bhjsdev/bwin) library.
 
-[Demo](https://bhjsdev.github.io/react-bwin/)
-
-## Troubleshooting
-
-Check the following items if you run into issues, such as restoring a minimized pane.
-
-- Disable `StrictMode` in React 18 or later, including frameworks built on it (e.g., Next.js).
+[Documentation](https://bhjsdev.github.io/bwin-docs/)

package/dist/react-bwin.js

@@ -1,11 +1,11 @@
-import f, { useRef as A, useEffect as W, forwardRef as Y, useState as j, useImperativeHandle as K, useMemo as V } from "react";
-import { createPortal as Z } from "react-dom";
-var J = Object.defineProperty, Q = (e, t, i) => t in e ? J(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, E = (e, t, i) => Q(e, typeof t != "symbol" ? t + "" : t, i);
-function tt(e = 0.7, t = 128) {
+import f, { useRef as A, useEffect as W, forwardRef as X, useState as Y, useImperativeHandle as j, useMemo as K } from "react";
+import { createPortal as V } from "react-dom";
+var Z = Object.defineProperty, J = (e, t, i) => t in e ? Z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, y = (e, t, i) => J(e, typeof t != "symbol" ? t + "" : t, i);
+function Q(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);
   return `rgba(${n}, ${s}, ${o}, ${h})`;
 }
-function B(e = 2, t = 3) {
+function S(e = 2, t = 3) {
   if (e < 0 || t < 0)
     throw new Error("Parameters must be non-negative numbers");
   const i = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", n = "0123456789";
@@ -21,15 +21,15 @@ function B(e = 2, t = 3) {
   }
   return s;
 }
-function z(e, t) {
+function B(e, t) {
   for (; t.firstChild; )
     e.append(t.firstChild);
 }
-function et(e, t) {
+function tt(e, t) {
   const i = document.createElement("div");
-  z(i, e), z(e, t), z(t, i);
+  B(i, e), B(e, t), B(t, i);
 }
-function C(e) {
+function z(e) {
   if (typeof e == "number" && !isNaN(e))
     return e;
   if (typeof e == "string") {
@@ -50,10 +50,10 @@ function C(e) {
   }
   return NaN;
 }
-function it(e) {
+function et(e) {
   return e !== null && typeof e == "object" && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype;
 }
-function nt(e, t) {
+function it(e, t) {
   for (const i in t) {
     if (Object.hasOwn(e, i))
       throw new Error(`Key "${i}" already exists in target object`);
@@ -61,7 +61,7 @@ function nt(e, t) {
   }
   return e;
 }
-function st(e) {
+function nt(e) {
   const t = document.createElement("template");
   return t.innerHTML = e.trim(), t.content;
 }
@@ -70,18 +70,18 @@ function N(e) {
     return null;
   if (typeof e == "string")
     try {
-      const t = st(e);
+      const t = nt(e);
       return t.childNodes.length === 1 ? t.firstChild : t;
     } catch {
       return document.createTextNode(e);
     }
   return e instanceof Node ? e : document.createTextNode(String(e));
 }
-function R(e) {
+function M(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 = {
+const a = {
   Top: "top",
   Right: "right",
   Bottom: "bottom",
@@ -91,47 +91,47 @@ const r = {
   Unknown: "unknown",
   Outside: "outside"
 };
-function ot(e) {
+function st(e) {
   switch (e) {
-    case r.Top:
-      return r.Bottom;
-    case r.Right:
-      return r.Left;
-    case r.Bottom:
-      return r.Top;
-    case r.Left:
-      return r.Right;
+    case a.Top:
+      return a.Bottom;
+    case a.Right:
+      return a.Left;
+    case a.Bottom:
+      return a.Top;
+    case a.Left:
+      return a.Right;
     default:
       throw new Error(`[bwin] Invalid position: ${e}`);
   }
 }
-function ht({ width: e, height: t, x: i }) {
+function ot({ width: e, height: t, x: i }) {
   return t / e * i;
 }
-function rt({ width: e, height: t, y: i }) {
+function ht({ width: e, height: t, y: i }) {
   return e / t * i;
 }
-function at({ width: e, height: t, x: i }) {
+function rt({ width: e, height: t, x: i }) {
   return t - t / e * i;
 }
-function lt({ width: e, height: t, y: i }) {
+function at({ width: e, height: t, y: i }) {
   return e - e / t * i;
 }
-function dt(e, { clientX: t, clientY: i }) {
-  const n = e.getBoundingClientRect(), { width: s, height: o } = n, h = t - n.left, a = i - n.top;
-  if (h < 0 || h > s || a < 0 || a > o)
-    return r.Outside;
-  const d = 0.3, l = ht({ width: s, height: o, x: h }), c = at({ width: s, height: o, x: h }), u = rt({ width: s, height: o, y: a }), g = lt({ width: s, height: o, y: a });
-  return h < s * (0.5 - d / 2) && a > l && a < c ? r.Left : h > s * (0.5 + d / 2) && a < l && a > c ? r.Right : a < o * (0.5 - d / 2) && h > u && h < g ? r.Top : a > o * (0.5 + d / 2) && h < u && h > g ? r.Bottom : h > s * (0.5 - d / 2) && h < s * (0.5 + d / 2) && a > o * (0.5 - d / 2) && a < o * (0.5 + d / 2) ? r.Center : r.Unknown;
+function lt(e, { clientX: t, clientY: i }) {
+  const n = e.getBoundingClientRect(), { width: s, height: o } = n, h = t - n.left, r = i - n.top;
+  if (h < 0 || h > s || r < 0 || r > o)
+    return a.Outside;
+  const d = 0.3, l = ot({ width: s, height: o, x: h }), c = rt({ width: s, height: o, x: h }), u = ht({ width: s, height: o, y: r }), g = at({ width: s, height: o, y: r });
+  return h < s * (0.5 - d / 2) && r > l && r < c ? a.Left : h > s * (0.5 + d / 2) && r < l && r > c ? a.Right : r < o * (0.5 - d / 2) && h > u && h < g ? a.Top : r > o * (0.5 + d / 2) && h < u && h > g ? a.Bottom : h > s * (0.5 - d / 2) && h < s * (0.5 + d / 2) && r > o * (0.5 - d / 2) && r < o * (0.5 + d / 2) ? a.Center : a.Unknown;
 }
-const ct = 100, pt = 100, v = {
+const dt = 100, ct = 100, v = {
   left: 0,
   top: 0,
   width: 150,
   height: 150,
   // Initial min values, real min width/height is calculated based on children
-  minWidth: ct,
-  minHeight: pt
+  minWidth: dt,
+  minHeight: ct
 };
 class b {
   constructor({
@@ -141,14 +141,14 @@ class b {
     height: s = v.height,
     minWidth: o = v.minWidth,
     minHeight: h = v.minHeight,
-    domNode: a = null,
+    domNode: r = null,
     store: d = {},
     position: l,
     id: c
   } = v) {
-    if (this.id = c ?? B(), !l)
+    if (this.id = c ?? S(), !l)
       throw new Error("[bwin] Sash position is required");
-    this.position = l, this.domNode = a, 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 = l, this.domNode = r, this._top = i, 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);
@@ -162,30 +162,30 @@ class b {
   }
   isLeftRightSplit() {
     return this.children.some(
-      (t) => t.position === r.Left || t.position === r.Right
+      (t) => t.position === a.Left || t.position === a.Right
     );
   }
   isTopBottomSplit() {
     return this.children.some(
-      (t) => t.position === r.Top || t.position === r.Bottom
+      (t) => t.position === a.Top || t.position === a.Bottom
     );
   }
   get leftChild() {
-    return this.children.find((t) => t.position === r.Left);
+    return this.children.find((t) => t.position === a.Left);
   }
   get rightChild() {
-    return this.children.find((t) => t.position === r.Right);
+    return this.children.find((t) => t.position === a.Right);
   }
   get topChild() {
-    return this.children.find((t) => t.position === r.Top);
+    return this.children.find((t) => t.position === a.Top);
   }
   get bottomChild() {
-    return this.children.find((t) => t.position === r.Bottom);
+    return this.children.find((t) => t.position === a.Bottom);
   }
   getChildren() {
     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);
+      o.position === a.Left ? t = o : o.position === a.Right ? i = o : o.position === a.Top ? n = o : o.position === a.Bottom && (s = o);
     return [n, i, s, t];
   }
   getAllLeafDescendants() {
@@ -231,6 +231,13 @@ class b {
     }
     return null;
   }
+  swapIds(t, i) {
+    const n = this.getById(t), s = this.getById(i);
+    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];
@@ -282,7 +289,7 @@ class b {
     this._width = t;
     const [n, s, o, h] = this.getChildren();
     if (h && s) {
-      const a = h.width + s.width, d = i * (h.width / a), l = a + i;
+      const r = h.width + s.width, d = i * (h.width / r), l = r + i;
       let c = h.width + d, u = l - c, g = s.left + d;
       const w = h.calcMinWidth(), m = s.calcMinWidth();
       i < 0 && (c < w && u > m ? (c = h.width, u = l - c, g = h.left + c) : u < m && c > w && (u = s.width, c = l - u, g = h.left + c)), h.width = c, s.width = u, s.left = g;
@@ -297,7 +304,7 @@ class b {
     this._height = t;
     const [n, s, o, h] = this.getChildren();
     if (n && o) {
-      const a = n.height + o.height, d = i * (n.height / a), l = a + i;
+      const r = n.height + o.height, d = i * (n.height / r), l = r + i;
       let c = n.height + d, u = l - c, g = o.top + d;
       if (i < 0) {
         const w = n.calcMinHeight(), m = o.calcMinHeight();
@@ -310,9 +317,9 @@ class b {
 }
 const H = {
   size: "50%",
-  position: r.Left
+  position: a.Left
 };
-class P {
+class R {
   constructor({
     parentRect: t,
     children: i,
@@ -320,16 +327,16 @@ class P {
     id: s,
     minWidth: o,
     minHeight: h,
-    position: a,
+    position: r,
     size: d,
     ...l
   }) {
-    E(this, "left"), E(this, "top"), E(this, "width"), E(this, "height"), this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = s, this.minWidth = o, this.minHeight = h, this.position = this.getPosition(a), this.size = this.getSize(d), this.nonCoreData = l, this.setBounds();
+    y(this, "left"), y(this, "top"), y(this, "width"), y(this, "height"), this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = s, this.minWidth = o, this.minHeight = h, this.position = this.getPosition(r), this.size = this.getSize(d), this.nonCoreData = l, this.setBounds();
   }
   getPosition(t) {
     if (!this.siblingConfigNode)
       return t;
-    const i = ot(this.siblingConfigNode.position);
+    const i = st(this.siblingConfigNode.position);
     if (!t)
       return i;
     if (t !== i)
@@ -338,40 +345,40 @@ class P {
   }
   getSize(t) {
     if (!this.siblingConfigNode)
-      return C(t);
+      return z(t);
     if (!t) {
       if (this.siblingConfigNode.size < 1)
         return 1 - this.siblingConfigNode.size;
-      if (this.siblingConfigNode.position === r.Left || this.siblingConfigNode.position === r.Right)
+      if (this.siblingConfigNode.position === a.Left || this.siblingConfigNode.position === a.Right)
         return this.parentRect.width - this.siblingConfigNode.width;
-      if (this.siblingConfigNode.position === r.Top || this.siblingConfigNode.position === r.Bottom)
+      if (this.siblingConfigNode.position === a.Top || this.siblingConfigNode.position === a.Bottom)
         return this.parentRect.height - this.siblingConfigNode.height;
     }
-    const i = C(t);
+    const i = z(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 === r.Left || this.position === r.Right) && i + this.siblingConfigNode.size !== this.parentRect.width)
+      if ((this.position === a.Left || this.position === a.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 === r.Top || this.position === r.Bottom) && i + this.siblingConfigNode.size !== this.parentRect.height)
+      if ((this.position === a.Top || this.position === a.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 === r.Root)
+    if (this.position === a.Root)
       this.left = 0, this.top = 0, this.width = this.parentRect.width, this.height = this.parentRect.height;
-    else if (this.position === r.Left) {
+    else if (this.position === a.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 === r.Right) {
+    } else if (this.position === a.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 === r.Top) {
+    } else if (this.position === a.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 === r.Bottom) {
+    } else if (this.position === a.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;
     }
@@ -390,14 +397,14 @@ class P {
     });
   }
   normConfig(t) {
-    if (it(t))
+    if (et(t))
       return t;
     if (Array.isArray(t))
       return {
         children: t
       };
     if (typeof t == "string" || typeof t == "number") {
-      const i = C(t);
+      const i = z(t);
       if (isNaN(i))
         throw new Error(`[bwin] Invalid size value: ${i}`);
       return {
@@ -409,8 +416,8 @@ class P {
       throw new Error(`[bwin] Invalid config value: ${t}`);
     }
   }
-  createPrimaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...a }) {
-    return new P({
+  createPrimaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...r }) {
+    return new R({
       parentRect: this,
       size: t ?? H.size,
       position: i ?? H.position,
@@ -418,11 +425,11 @@ class P {
       id: s,
       minWidth: o,
       minHeight: h,
-      ...a
+      ...r
     });
   }
-  createSecondaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...a }, d) {
-    return new P({
+  createSecondaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...r }, d) {
+    return new R({
       parentRect: this,
       size: t,
       position: i,
@@ -431,7 +438,7 @@ class P {
       id: s,
       minWidth: o,
       minHeight: h,
-      ...a
+      ...r
     });
   }
   buildSashTree() {
@@ -440,7 +447,7 @@ class P {
       return t;
     const i = 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(
+    return !i.size && !i.position && n ? (n.position || (n.position = a.Right), s = this.createPrimaryConfigNode(n), o = this.createSecondaryConfigNode(
       i,
       s
     )) : (s = this.createPrimaryConfigNode(i), o = this.createSecondaryConfigNode(
@@ -455,7 +462,7 @@ const L = {
 }, T = {
   fitContainer: !1
 };
-class ut extends P {
+class pt extends R {
   constructor({
     id: t,
     children: i,
@@ -471,18 +478,18 @@ class ut extends P {
       id: t,
       children: i,
       size: NaN,
-      position: r.Root,
+      position: a.Root,
       parentRect: { width: n, height: s },
       ...h
     }), this.fitContainer = o;
   }
 }
-class gt extends b {
+class ut extends b {
   constructor(t = v) {
-    super({ ...t, position: r.Root }), Object.assign(this, T);
+    super({ ...t, position: a.Root }), Object.assign(this, T);
   }
 }
-function M(e) {
+function gt(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;
 }
@@ -490,107 +497,127 @@ function ft(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 wt(e, { size: t }) {
-  const i = C(t);
-  let n = e.width / 2;
-  i && (i < 1 ? n = e.width * i : n = i);
-  const s = new b({
+function wt(e, { size: t, id: i }) {
+  const n = z(t);
+  let s = e.width / 2;
+  n && (n < 1 ? s = e.width * n : s = n);
+  const o = new b({
+    id: i,
     top: e.top,
     left: e.left,
-    width: n,
+    width: s,
     height: e.height,
-    position: r.Left
-  }), o = new b({
+    position: a.Left
+  }), h = new b({
+    id: e.id,
     top: e.top,
-    left: e.left + s.width,
-    width: e.width - n,
+    left: e.left + o.width,
+    width: e.width - s,
     height: e.height,
-    position: r.Right
-  }), h = M(o);
-  return o.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), s;
+    position: a.Right,
+    domNode: e.domNode
+  });
+  return e.addChild(o), e.addChild(h), e.domNode = null, e.id = S(), o;
 }
-function mt(e, { size: t }) {
-  const i = C(t);
-  let n = e.width / 2;
-  i && (i < 1 ? n = e.width * i : n = i);
-  const s = new b({
+function mt(e, { size: t, id: i }) {
+  const n = z(t);
+  let s = e.width / 2;
+  n && (n < 1 ? s = e.width * n : s = n);
+  const o = new b({
+    id: e.id,
     left: e.left,
     top: e.top,
-    width: e.width - n,
+    width: e.width - s,
     height: e.height,
-    position: r.Left
-  }), o = new b({
-    left: e.left + s.width,
+    position: a.Left,
+    domNode: e.domNode
+  }), h = new b({
+    id: i,
+    left: e.left + o.width,
     top: e.top,
-    width: n,
+    width: s,
     height: e.height,
-    position: r.Right
-  }), h = M(s);
-  return s.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), o;
+    position: a.Right
+  });
+  return e.addChild(o), e.addChild(h), e.domNode = null, e.id = S(), h;
 }
-function bt(e, { size: t }) {
-  const i = C(t);
-  let n = e.height / 2;
-  i && (i < 1 ? n = e.height * i : n = i);
-  const s = new b({
+function bt(e, { size: t, id: i }) {
+  const n = z(t);
+  let s = e.height / 2;
+  n && (n < 1 ? s = e.height * n : s = n);
+  const o = new b({
+    id: i,
     left: e.left,
     top: e.top,
     width: e.width,
-    height: n,
-    position: r.Top
-  }), o = new b({
+    height: s,
+    position: a.Top
+  }), h = new b({
+    id: e.id,
     left: e.left,
-    top: e.top + s.height,
+    top: e.top + o.height,
     width: e.width,
-    height: e.height - n,
-    position: r.Bottom
-  }), h = M(o);
-  return o.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), s;
+    height: e.height - s,
+    position: a.Bottom,
+    domNode: e.domNode
+  });
+  return e.addChild(o), e.addChild(h), e.domNode = null, e.id = S(), o;
 }
-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 b({
+function yt(e, { size: t, id: i }) {
+  const n = z(t);
+  let s = e.height / 2;
+  n && (n < 1 ? s = e.height * n : s = n);
+  const o = new b({
+    id: e.id,
     top: e.top,
     left: e.left,
     width: e.width,
-    height: e.height - n,
-    position: r.Top
-  }), o = new b({
-    top: e.top + s.height,
+    height: e.height - s,
+    position: a.Top,
+    domNode: e.domNode
+  }), h = new b({
+    id: i,
+    top: e.top + o.height,
     left: e.left,
     width: e.width,
-    height: n,
-    position: r.Bottom
-  }), h = M(s);
-  return s.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), o;
+    height: s,
+    position: a.Bottom
+  });
+  return e.addChild(o), e.addChild(h), e.domNode = null, e.id = S(), h;
 }
-function yt(e, { position: t, size: i, minWidth: n, minHeight: s }) {
-  if (t === r.Left)
-    return wt(e, { size: i });
-  if (t === r.Right)
-    return mt(e, { size: i });
-  if (t === r.Top)
-    return bt(e, { size: i });
-  if (t === r.Bottom)
-    return Et(e, { size: i });
+function Et(e, { position: t, size: i, id: n, minWidth: s, minHeight: o }) {
+  if (t === a.Left)
+    return wt(e, { size: i, id: n });
+  if (t === a.Right)
+    return mt(e, { size: i, id: n });
+  if (t === a.Top)
+    return bt(e, { size: i, id: n });
+  if (t === a.Bottom)
+    return yt(e, { size: i, id: n });
+}
+function P(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 vt = {
   createPane(e) {
-    const t = M(e);
+    const t = gt(e);
     return e.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
   },
   // Intended to be overridden
   onPaneCreate(e, t) {
-    t.store.content && e.append(N(t.store.content)), this != null && this.debug && (e.style.backgroundColor = tt(), e.innerHTML = "", e.append(G(e)));
+    t.store.content && e.append(N(t.store.content)), this != null && this.debug && (e.style.backgroundColor = Q(), e.innerHTML = "", e.append(I(e)));
   },
   updatePane(e) {
     return ft(e);
   },
   // Intended to be overridden
   onPaneUpdate(e, t) {
-    this != null && this.debug && (e.innerHTML = "", e.append(G(e)));
+    this != null && this.debug && (e.innerHTML = "", e.append(I(e)));
   },
   /**
    * Add a pane into the target pane. The two panes become next to each other
@@ -599,12 +626,12 @@ const vt = {
    * @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(e, { position: t, size: i, 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 = yt(n, { position: t, size: i });
-    return n.id = B(), this.update(), s;
+    const s = this.rootSash.getById(e);
+    if (!s) throw new Error("[bwin] Parent sash not found when adding pane");
+    const o = Et(s, { position: t, size: i, id: n });
+    return this.update(), o;
   },
   /**
    * Remove a pane
@@ -615,10 +642,14 @@ const vt = {
     const t = this.rootSash.getDescendantParentById(e);
     if (!t) throw new Error("[bwin] Parent sash not found when removing pane");
     const i = t.getChildSiblingById(e);
-    t.id = B(), 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();
+    i.children.length === 0 ? (t.id = i.id, t.domNode = i.domNode, t.domNode.setAttribute("sash-id", i.id), t.children = []) : (t.id = S(), t.children = i.children, i.position === a.Left ? i.width = t.width : i.position === a.Right ? (i.width = t.width, i.left = t.left) : i.position === a.Top ? i.height = t.height : i.position === a.Bottom && (i.height = t.height, i.top = t.top)), this.update();
+  },
+  swapPanes(e, t) {
+    const i = P(e), n = P(t), s = e.getAttribute("can-drop") !== "false", o = t.getAttribute("can-drop") !== "false";
+    this.rootSash.swapIds(i, n), tt(e, this.activeDropPaneEl), e.setAttribute("sash-id", n), t.setAttribute("sash-id", i), e.setAttribute("can-drop", o), t.setAttribute("can-drop", s);
   }
 };
-function G(e) {
+function I(e) {
   const t = document.createElement("pre");
   t.style.fontSize = "10px";
   const i = `
@@ -666,7 +697,7 @@ const Nt = {
   },
   onMuntinUpdate(e, t) {
   }
-}, Ct = {
+}, St = {
   fitContainer: !1,
   fit() {
     this.rootSash.width = this.containerElement.clientWidth, this.rootSash.height = this.containerElement.clientHeight, this.update();
@@ -677,7 +708,7 @@ const Nt = {
         t.target === this.containerElement && this.fitContainer && this.fit();
     }).observe(this.containerElement);
   }
-}, St = {
+}, Ct = {
   activeMuntinSash: null,
   isResizeStarted: !1,
   isDropStarted: !1,
@@ -698,19 +729,19 @@ const Nt = {
       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 a = e.pageX - this.lastX, d = s.width + a, l = i.width - a;
-        if (a > 0 && l <= i.calcMinWidth() || a < 0 && d <= s.calcMinWidth()) return;
-        s.width = d, i.width = l, i.left = i.left + a, this.update(), this.lastX = e.pageX;
+        const r = e.pageX - this.lastX, d = s.width + r, l = i.width - r;
+        if (r > 0 && l <= i.calcMinWidth() || r < 0 && d <= s.calcMinWidth()) return;
+        s.width = d, i.width = l, i.left = i.left + r, this.update(), this.lastX = e.pageX;
       } else if (h && t && n) {
-        const a = e.pageY - this.lastY, d = t.height + a, l = n.height - a;
-        if (a > 0 && l <= n.calcMinHeight() || a < 0 && d <= t.calcMinHeight()) return;
-        t.height = d, n.height = l, n.top = n.top + a, this.update(), this.lastY = e.pageY;
+        const r = e.pageY - this.lastY, d = t.height + r, l = n.height - r;
+        if (r > 0 && l <= n.calcMinHeight() || r < 0 && d <= t.calcMinHeight()) return;
+        t.height = d, n.height = l, n.top = n.top + r, this.update(), this.lastY = e.pageY;
       }
     }), document.addEventListener("mouseup", () => {
       this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
     });
   }
-}, Mt = {
+}, At = {
   activeDropPaneEl: null,
   // Intended to be overridden in `BinaryWindow` class
   onPaneDrop(e, t) {
@@ -720,7 +751,7 @@ const Nt = {
       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 = dt(t, e);
+      const i = lt(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);
@@ -730,12 +761,12 @@ const Nt = {
       this.onPaneDrop(e, i), typeof i.store.onDrop == "function" && i.store.onDrop(e, i), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
     });
   }
-}, At = !1;
-class O {
+}, Mt = !1;
+class G {
   constructor(t) {
-    E(this, "windowElement", null), E(this, "containerElement", null), E(this, "debug", At);
+    y(this, "windowElement", null), y(this, "containerElement", null), y(this, "debug", Mt);
     let i = null;
-    t instanceof gt ? (i = t, this.rootSash = t) : (i = new ut(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
+    t instanceof ut ? (i = t, this.rootSash = t) : (i = new pt(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
   }
   frame(t) {
     this.containerElement = t, this.windowElement = this.createWindow(), this.glaze(), this.containerElement.append(this.windowElement);
@@ -749,31 +780,23 @@ class O {
   }
   static assemble(...t) {
     t.forEach((i) => {
-      nt(this.prototype, i);
+      it(this.prototype, i);
     });
   }
 }
-O.assemble(
+G.assemble(
   Nt,
   zt,
   vt,
-  Ct,
-  Mt,
-  St
+  St,
+  At,
+  Ct
 );
-function k(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 Rt = {
   label: "",
   className: "bw-glass-action--close",
   onClick: (e, t) => {
-    const i = k(e.target);
+    const i = P(e.target);
     t.removePane(i);
   }
 }, Pt = {
@@ -784,30 +807,30 @@ const Rt = {
     if (!i) throw new Error("[bwin] Sill element not found when minimizing");
     const n = N('<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"), a = s.getAttribute("position");
-    n.bwGlassElement = o, n.bwOriginalPosition = a, n.bwOriginalBoundingRect = R(s), t.removePane(h);
+    const s = e.target.closest("bw-pane"), o = e.target.closest("bw-glass"), h = s.getAttribute("sash-id"), r = s.getAttribute("position");
+    n.bwGlassElement = o, n.bwOriginalPosition = r, n.bwOriginalBoundingRect = M(s), n.bwOriginalSashId = h, t.removePane(h);
   }
 }, xt = {
   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 = R(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
+    t.hasAttribute("maximized") ? (t.removeAttribute("maximized"), t.style.left = `${t.bwOriginalBoundingRect.left}px`, t.style.top = `${t.bwOriginalBoundingRect.top}px`, t.style.width = `${t.bwOriginalBoundingRect.width}px`, t.style.height = `${t.bwOriginalBoundingRect.height}px`) : (t.setAttribute("maximized", ""), t.bwOriginalBoundingRect = M(t), t.style.left = "0", t.style.top = "0", t.style.width = "100%", t.style.height = "100%");
   }
 };
 function Dt(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), a = Math.max(e.top, t.top), d = Math.min(i, s), l = Math.min(n, o);
+  const h = Math.max(e.left, t.left), r = Math.max(e.top, t.top), d = Math.min(i, s), l = Math.min(n, o);
   return {
     left: h,
-    top: a,
+    top: r,
     width: d - h,
-    height: l - a
+    height: l - r
   };
 }
-const F = [Pt, xt, Rt], $t = {
+const k = [Pt, xt, Rt], $t = {
   enableActions() {
     this.handleMinimizedGlassClick(), this.observeActionButtons();
   },
@@ -815,23 +838,25 @@ const F = [Pt, xt, Rt], $t = {
     const t = e.bwOriginalBoundingRect;
     let i = 0, n = null;
     if (this.windowElement.querySelectorAll("bw-pane").forEach((s) => {
-      const o = R(s), h = Dt(t, o);
+      const o = M(s), h = Dt(t, o);
       if (h) {
-        const a = h.width * h.height;
-        a > i && (i = a, n = s);
+        const r = h.width * h.height;
+        r > i && (i = r, n = s);
       }
     }), n) {
-      const s = e.bwOriginalPosition, o = R(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;
+      const s = e.bwOriginalPosition, o = M(n), h = n.getAttribute("sash-id"), r = this.rootSash.getById(h);
+      let d = 0;
+      if (s === a.Left || s === a.Right)
+        d = o.width - t.width < r.minWidth ? o.width / 2 : t.width;
+      else if (s === a.Top || s === a.Bottom)
+        d = o.height - t.height < r.minHeight ? o.height / 2 : t.height;
       else
         throw new Error("[bwin] Invalid position when restoring glass");
+      const l = e.bwOriginalSashId;
       this.addPane(n.getAttribute("sash-id"), {
+        id: l,
         position: s,
-        size: h
+        size: d
       }).domNode.append(e.bwGlassElement);
     }
   },
@@ -863,24 +888,24 @@ const F = [Pt, xt, Rt], $t = {
       childList: !0
     });
   }
-}, S = {
+}, C = {
   title: null,
   content: null,
   tabs: [],
   actions: void 0,
   draggable: !0
 };
-class I {
+class O {
   constructor({
-    title: t = S.title,
-    content: i = S.content,
-    tabs: n = S.tabs,
-    actions: s = S.actions,
-    draggable: o = S.draggable,
+    title: t = C.title,
+    content: i = C.content,
+    tabs: n = C.tabs,
+    actions: s = C.actions,
+    draggable: o = C.draggable,
     sash: h,
-    binaryWindow: a
+    binaryWindow: r
   }) {
-    E(this, "domNode"), this.title = t, this.content = i, this.tabs = n, this.actions = s, this.sash = h, this.draggable = o, this.binaryWindow = a, this.build();
+    y(this, "domNode"), this.title = t, this.content = i, this.tabs = n, this.actions = s, this.sash = h, this.draggable = o, this.binaryWindow = r, this.build();
   }
   build() {
     const t = document.createElement("bw-glass-header");
@@ -903,11 +928,11 @@ class I {
     return t;
   }
   createActions() {
-    const t = document.createElement("bw-glass-action-container"), i = this.actions === void 0 ? F : Array.isArray(this.actions) ? this.actions : [];
+    const t = document.createElement("bw-glass-action-container"), i = this.actions === void 0 ? k : Array.isArray(this.actions) ? this.actions : [];
     for (const n of i) {
       const s = (n == null ? void 0 : n.label) ?? n, o = n.className ? `bw-glass-action ${n.className}` : "bw-glass-action", h = N(`<button class="${o}">${s}</button>`);
-      typeof n.onClick == "function" && h.addEventListener("click", (a) => {
-        n.onClick(a, this.binaryWindow);
+      typeof n.onClick == "function" && h.addEventListener("click", (r) => {
+        n.onClick(r, this.binaryWindow);
       }), t.append(h);
     }
     return t;
@@ -919,19 +944,19 @@ class I {
     return this.domNode.querySelector("bw-glass-header");
   }
 }
-const Lt = {
+const Bt = {
   activeDragGlassEl: null,
   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"), s = this.activeDropPaneEl.getAttribute("can-drop") !== "false";
-      et(n, this.activeDropPaneEl), n.setAttribute("can-drop", s);
+      const n = this.activeDragGlassEl.closest("bw-pane");
+      this.swapPanes(n, this.activeDropPaneEl);
       return;
     } else {
-      const n = k(this.activeDragGlassEl);
-      this.addPane(t.id, { position: i }).domNode.append(this.activeDragGlassEl), this.removePane(n);
+      const n = P(this.activeDragGlassEl);
+      this.removePane(n), this.addPane(t.id, { position: i, id: n }).domNode.append(this.activeDragGlassEl);
     }
   },
   enableDrag() {
@@ -955,7 +980,7 @@ const Lt = {
       this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop", this.activeDragGlassPaneCanDrop), this.activeDragGlassEl = null);
     });
   }
-}, Bt = {
+}, Lt = {
   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`);
   },
@@ -966,9 +991,9 @@ const Lt = {
     this.trimMuntin(e);
   }
 };
-class _ extends O {
+class F extends G {
   constructor() {
-    super(...arguments), E(this, "sillElement", null);
+    super(...arguments), y(this, "sillElement", null);
   }
   frame() {
     super.frame(...arguments);
@@ -979,7 +1004,7 @@ class _ extends O {
     super.enableFeatures(), this.enableDrag(), this.enableActions();
   }
   onPaneCreate(t, i) {
-    const n = new I({ ...i.store, sash: i, binaryWindow: this });
+    const n = new O({ ...i.store, sash: i, binaryWindow: this });
     t.innerHTML = "", t.append(n.domNode), this.debug && n.contentElement.prepend(`${i.id}`);
   }
   onPaneUpdate() {
@@ -992,17 +1017,17 @@ class _ extends O {
    * @returns {Sash} - The newly created Sash
    */
   addPane(t, i) {
-    const { position: n, size: s, ...o } = i, h = super.addPane(t, { position: n, size: s }), a = new I({ ...o, sash: h, binaryWindow: this });
-    return h.domNode.append(a.domNode), h;
+    const { position: n, size: s, id: o, ...h } = i, r = super.addPane(t, { position: n, size: s, id: o }), d = new O({ ...h, sash: r, binaryWindow: this });
+    return r.domNode.append(d.domNode), r;
   }
 }
-_.assemble(Lt, Bt, $t);
-const y = 4;
+F.assemble(Bt, Lt, $t);
+const E = 4;
 function Tt({ sash: e }) {
   var c;
   const t = A(), i = e.leftChild, n = e.topChild;
-  let s, o, h, a, d, l;
-  return i ? (s = y, o = e.height - y, h = e.top + y / 2, a = e.left + i.width - y / 2, d = !0) : n && (s = e.width - y, o = y, h = e.top + n.height - y / 2, a = e.left + y / 2, l = !0), W(() => {
+  let s, o, h, r, d, l;
+  return i ? (s = E, o = e.height - E, h = e.top + E / 2, r = e.left + i.width - E / 2, d = !0) : n && (s = e.width - E, o = E, h = e.top + n.height - E / 2, r = e.left + E / 2, l = !0), W(() => {
     e.domNode = t.current;
   }, []), /* @__PURE__ */ f.createElement(
     "bw-muntin",
@@ -1012,7 +1037,7 @@ function Tt({ sash: e }) {
         width: s,
         height: o,
         top: h,
-        left: a
+        left: r
       },
       vertical: d,
       horizontal: l,
@@ -1026,15 +1051,15 @@ function Wt({
   bwin: t
 }) {
   var c, u, g, w, m;
-  const i = A(), { left: n, top: s, width: o, height: h, id: a, position: d } = e;
+  const i = A(), { left: n, top: s, width: o, height: h, id: r, position: d } = e;
   W(() => {
     e.domNode = i.current;
   }, []);
-  const l = ((c = e.store) == null ? void 0 : c.actions) === void 0 ? F : Array.isArray(e.store.actions) ? e.store.actions : [];
+  const l = ((c = e.store) == null ? void 0 : c.actions) === void 0 ? k : Array.isArray(e.store.actions) ? e.store.actions : [];
   return /* @__PURE__ */ f.createElement(
     "bw-pane",
     {
-      "sash-id": a,
+      "sash-id": r,
       position: d,
       style: { left: n, top: s, width: o, height: h },
       "can-drop": ((u = e.store) == null ? void 0 : u.droppable) === !1 ? "false" : "true",
@@ -1061,14 +1086,14 @@ function Wt({
     ), /* @__PURE__ */ f.createElement("bw-glass-content", null, (m = e.store) == null ? void 0 : m.content))
   );
 }
-const It = Y((e, t) => {
-  const i = A(), n = A(), [s, o] = j(), { panes: h, ...a } = e, d = { ...a, children: h }, l = new _(d), c = [], u = [];
+const Ot = X((e, t) => {
+  const i = A(), n = A(), [s, o] = Y(), { panes: h, ...r } = e, d = { ...r, children: h }, l = new F(d), c = [], u = [];
   l.rootSash.walk((p) => {
     p.children.length > 0 ? c.push(p) : u.push(p);
   }), W(() => {
     const p = i.current;
     p != null && p.parentElement && (l.windowElement = p, l.containerElement = p.parentElement, l.sillElement = n.current, l.enableFeatures());
-  }, []), K(
+  }, []), j(
     t,
     () => ({
       fit: l.fit.bind(l),
@@ -1087,20 +1112,20 @@ const It = Y((e, t) => {
     u.map((p) => /* @__PURE__ */ f.createElement(Wt, { key: p.id, sash: p, bwin: l })),
     c.map((p) => /* @__PURE__ */ f.createElement(Tt, { key: p.id, sash: p })),
     /* @__PURE__ */ f.createElement("bw-sill", { ref: n })
-  ), w = V(() => g, []);
+  ), w = K(() => g, []);
   function m(p, x) {
-    const { content: D, ...$ } = x, q = l.addPane(p, $), U = document.querySelector(
-      `bw-pane[sash-id="${q.id}"] bw-glass-content`
+    const { content: D, ...$ } = x, _ = l.addPane(p, $), q = document.querySelector(
+      `bw-pane[sash-id="${_.id}"] bw-glass-content`
     );
-    o((X) => [
-      ...X || [],
-      { node: D, container: U }
+    o((U) => [
+      ...U || [],
+      { node: D, container: q }
     ]);
   }
-  return /* @__PURE__ */ f.createElement(f.Fragment, null, w, s == null ? void 0 : s.map((p) => Z(p.node, p.container)));
-}), Ot = "0.3.1";
+  return /* @__PURE__ */ f.createElement(f.Fragment, null, w, s == null ? void 0 : s.map((p) => V(p.node, p.container)));
+}), Gt = "0.3.3";
 export {
-  F as BUILTIN_ACTIONS,
-  It as Window,
-  Ot as version
+  k as BUILTIN_ACTIONS,
+  Ot as Window,
+  Gt as version
 };

package/dist/react-bwin.umd.js

@@ -1,8 +1,8 @@
-(function(w,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],u):(w=typeof globalThis<"u"?globalThis:w||self,u(w.ReactBinaryWindow={},w.React,w.ReactDOM))})(this,function(w,u,_){"use strict";var q=Object.defineProperty,U=(e,t,i)=>t in e?q(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,E=(e,t,i)=>U(e,typeof t!="symbol"?t+"":t,i);function j(e=.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(.5,Math.random()*e);return`rgba(${n}, ${s}, ${o}, ${h})`}function x(e=2,t=3){if(e<0||t<0)throw new Error("Parameters must be non-negative numbers");const i="ABCDEFGHIJKLMNOPQRSTUVWXYZ",n="0123456789";let s="";for(let o=0;o<e;o++){const h=Math.floor(Math.random()*i.length);s+=i[h]}s+="-";for(let o=0;o<t;o++){const h=Math.floor(Math.random()*n.length);s+=n[h]}return s}function z(e,t){for(;t.firstChild;)e.append(t.firstChild)}function X(e,t){const i=document.createElement("div");z(i,e),z(e,t),z(t,i)}function C(e){if(typeof e=="number"&&!isNaN(e))return e;if(typeof e=="string"){const t=e.trim();if(t.endsWith("%")){const i=t.slice(0,-1);if(!i)return NaN;const n=Number(i);return isNaN(n)?NaN:n/100}if(t.endsWith("px")){const i=t.slice(0,-2);if(!i)return NaN;const n=Number(i);return isNaN(n)?NaN:n}return Number(t)}return NaN}function Y(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)&&Object.getPrototypeOf(e)===Object.prototype}function K(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]}return e}function V(e){const t=document.createElement("template");return t.innerHTML=e.trim(),t.content}function S(e){if(e==null||e==="")return null;if(typeof e=="string")try{const t=V(e);return t.childNodes.length===1?t.firstChild:t}catch{return document.createTextNode(e)}return e instanceof Node?e:document.createTextNode(String(e))}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",Left:"left",Center:"center",Root:"root",Unknown:"unknown",Outside:"outside"};function Z(e){switch(e){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 J({width:e,height:t,x:i}){return t/e*i}function Q({width:e,height:t,y:i}){return e/t*i}function tt({width:e,height:t,x:i}){return t-t/e*i}function et({width:e,height:t,y:i}){return e-e/t*i}function it(e,{clientX:t,clientY:i}){const n=e.getBoundingClientRect(),{width:s,height:o}=n,h=t-n.left,a=i-n.top;if(h<0||h>s||a<0||a>o)return r.Outside;const d=.3,l=J({width:s,height:o,x:h}),c=tt({width:s,height:o,x:h}),g=Q({width:s,height:o,y:a}),f=et({width:s,height:o,y:a});return h<s*(.5-d/2)&&a>l&&a<c?r.Left:h>s*(.5+d/2)&&a<l&&a>c?r.Right:a<o*(.5-d/2)&&h>g&&h<f?r.Top:a>o*(.5+d/2)&&h<g&&h>f?r.Bottom:h>s*(.5-d/2)&&h<s*(.5+d/2)&&a>o*(.5-d/2)&&a<o*(.5+d/2)?r.Center:r.Unknown}const nt=100,st=100,v={left:0,top:0,width:150,height:150,minWidth:nt,minHeight:st};class m{constructor({left:t=v.left,top:i=v.top,width:n=v.width,height:s=v.height,minWidth:o=v.minWidth,minHeight:h=v.minHeight,domNode:a=null,store:d={},position:l,id:c}=v){if(this.id=c??x(),!l)throw new Error("[bwin] Sash position is required");this.position=l,this.domNode=a,this._top=i,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)}isLeaf(){return this.children.length===0}isSplit(){return this.children.length>0}isLeftRightSplit(){return this.children.some(t=>t.position===r.Left||t.position===r.Right)}isTopBottomSplit(){return this.children.some(t=>t.position===r.Top||t.position===r.Bottom)}get leftChild(){return this.children.find(t=>t.position===r.Left)}get rightChild(){return this.children.find(t=>t.position===r.Right)}get topChild(){return this.children.find(t=>t.position===r.Top)}get bottomChild(){return this.children.find(t=>t.position===r.Bottom)}getChildren(){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=[];return this.walk(i=>{i.children.length===0&&t.push(i)}),t}calcMinWidth(){if(this.isLeaf())return this.minWidth;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 o=Math.max(t.calcMinWidth(),n.calcMinWidth());return Math.max(this.minWidth,o)}}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());return Math.max(this.minHeight,o)}if(t&&n){const o=t.calcMinHeight()+n.calcMinHeight();return Math.max(this.minHeight,o)}}getById(t){if(this.id===t)return this;for(const i of this.children){const n=i.getById(t);if(n)return n}return null}getAllIds(){const t=[this.id];for(const i of this.children)t.push(...i.getAllIds());return t}addChild(t){if(this.children.length>=2)throw new Error("[bwin] Maximum 2 children allowed");this.children.push(t)}getDescendantParentById(t){for(const i of this.children){if(i.id===t)return this;const n=i.getDescendantParentById(t);if(n)return n}return null}getChildSiblingById(t){return this.children.find(i=>i.id!==t)}get top(){return this._top}set top(t){const i=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)}get left(){return this._left}set left(t){const i=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)}get width(){return this._width}set width(t){const i=t-this._width;this._width=t;const[n,s,o,h]=this.getChildren();if(h&&s){const a=h.width+s.width,d=i*(h.width/a),l=a+i;let c=h.width+d,g=l-c,f=s.left+d;const b=h.calcMinWidth(),y=s.calcMinWidth();i<0&&(c<b&&g>y?(c=h.width,g=l-c,f=h.left+c):g<y&&c>b&&(g=s.width,c=l-g,f=h.left+c)),h.width=c,s.width=g,s.left=f}n&&o&&(n.width+=i,o.width+=i)}get height(){return this._height}set height(t){const i=t-this._height;this._height=t;const[n,s,o,h]=this.getChildren();if(n&&o){const a=n.height+o.height,d=i*(n.height/a),l=a+i;let c=n.height+d,g=l-c,f=o.top+d;if(i<0){const b=n.calcMinHeight(),y=o.calcMinHeight();c<b&&g>y?(c=n.height,g=l-c,f=n.top+c):g<y&&c>b&&(g=o.height,c=l-g,f=n.top+c)}n.height=c,o.height=g,o.top=f}h&&s&&(h.height+=i,s.height+=i)}}const H={size:"50%",position:r.Left};class D{constructor({parentRect:t,children:i,siblingConfigNode:n,id:s,minWidth:o,minHeight:h,position:a,size:d,...l}){E(this,"left"),E(this,"top"),E(this,"width"),E(this,"height"),this.parentRect=t,this.children=i,this.siblingConfigNode=n,this.id=s,this.minWidth=o,this.minHeight=h,this.position=this.getPosition(a),this.size=this.getSize(d),this.nonCoreData=l,this.setBounds()}getPosition(t){if(!this.siblingConfigNode)return t;const i=Z(this.siblingConfigNode.position);if(!t)return i;if(t!==i)throw new Error("[bwin] Sibling position and current position are not opposite");return t}getSize(t){if(!this.siblingConfigNode)return C(t);if(!t){if(this.siblingConfigNode.size<1)return 1-this.siblingConfigNode.size;if(this.siblingConfigNode.position===r.Left||this.siblingConfigNode.position===r.Right)return this.parentRect.width-this.siblingConfigNode.width;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)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)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)throw new Error("[bwin] Sum of sibling sizes is not equal to parent height")}return i}setBounds(){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===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===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===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===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 m({left:this.left,top:this.top,width:this.width,height:this.height,position:this.position,id:this.id,minWidth:this.minWidth,minHeight:this.minHeight,store:this.nonCoreData})}normConfig(t){if(Y(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}`);return{size:t}}else{if(t==null)return{};throw new Error(`[bwin] Invalid config value: ${t}`)}}createPrimaryConfigNode({size:t,position:i,children:n,id:s,minWidth:o,minHeight:h,...a}){return new D({parentRect:this,size:t??H.size,position:i??H.position,children:n,id:s,minWidth:o,minHeight:h,...a})}createSecondaryConfigNode({size:t,position:i,children:n,id:s,minWidth:o,minHeight:h,...a},d){return new D({parentRect:this,size:t,position:i,children:n,siblingConfigNode:d,id:s,minWidth:o,minHeight:h,...a})}buildSashTree(){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));let s,o;return!i.size&&!i.position&&n?(n.position||(n.position=r.Right),s=this.createPrimaryConfigNode(n),o=this.createSecondaryConfigNode(i,s)):(s=this.createPrimaryConfigNode(i),o=this.createSecondaryConfigNode(n,s)),s&&o&&(t.children.push(s.buildSashTree()),t.children.push(o.buildSashTree())),t}}const R={width:333,height:333},$={fitContainer:!1};class ot extends D{constructor({id:t,children:i,width:n=R.width,height:s=R.height,fitContainer:o=$.fitContainer,...h}={...R,...$}){super({id:t,children:i,size:NaN,position:r.Root,parentRect:{width:n,height:s},...h}),this.fitContainer=o}}class ht extends m{constructor(t=v){super({...t,position:r.Root}),Object.assign(this,$)}}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 rt(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 at(e,{size:t}){const i=C(t);let n=e.width/2;i&&(i<1?n=e.width*i:n=i);const s=new m({top:e.top,left:e.left,width:n,height:e.height,position:r.Left}),o=new m({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,z(h,e.domNode),e.addChild(s),e.addChild(o),s}function lt(e,{size:t}){const i=C(t);let n=e.width/2;i&&(i<1?n=e.width*i:n=i);const s=new m({left:e.left,top:e.top,width:e.width-n,height:e.height,position:r.Left}),o=new m({left:e.left+s.width,top:e.top,width:n,height:e.height,position:r.Right}),h=M(s);return s.domNode=h,z(h,e.domNode),e.addChild(s),e.addChild(o),o}function dt(e,{size:t}){const i=C(t);let n=e.height/2;i&&(i<1?n=e.height*i:n=i);const s=new m({left:e.left,top:e.top,width:e.width,height:n,position:r.Top}),o=new m({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,z(h,e.domNode),e.addChild(s),e.addChild(o),s}function ct(e,{size:t}){const i=C(t);let n=e.height/2;i&&(i<1?n=e.height*i:n=i);const s=new m({top:e.top,left:e.left,width:e.width,height:e.height-n,position:r.Top}),o=new m({top:e.top+s.height,left:e.left,width:e.width,height:n,position:r.Bottom}),h=M(s);return s.domNode=h,z(h,e.domNode),e.addChild(s),e.addChild(o),o}function ut(e,{position:t,size:i,minWidth:n,minHeight:s}){if(t===r.Left)return at(e,{size:i});if(t===r.Right)return lt(e,{size:i});if(t===r.Top)return dt(e,{size:i});if(t===r.Bottom)return ct(e,{size:i})}const pt={createPane(e){const t=M(e);return e.store.droppable===!1&&t.setAttribute("can-drop","false"),t},onPaneCreate(e,t){t.store.content&&e.append(S(t.store.content)),this!=null&&this.debug&&(e.style.backgroundColor=j(),e.innerHTML="",e.append(O(e)))},updatePane(e){return rt(e)},onPaneUpdate(e,t){this!=null&&this.debug&&(e.innerHTML="",e.append(O(e)))},addPane(e,{position:t,size:i}){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=ut(n,{position:t,size:i});return n.id=x(),this.update(),s},removePane(e){const t=this.rootSash.getDescendantParentById(e);if(!t)throw new Error("[bwin] Parent sash not found when removing pane");const i=t.getChildSiblingById(e);t.id=x(),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 O(e){const t=document.createElement("pre");t.style.fontSize="10px";const i=`
+(function(w,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],u):(w=typeof globalThis<"u"?globalThis:w||self,u(w.ReactBinaryWindow={},w.React,w.ReactDOM))})(this,function(w,u,F){"use strict";var _=Object.defineProperty,q=(e,t,i)=>t in e?_(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,E=(e,t,i)=>q(e,typeof t!="symbol"?t+"":t,i);function U(e=.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(.5,Math.random()*e);return`rgba(${n}, ${s}, ${o}, ${h})`}function C(e=2,t=3){if(e<0||t<0)throw new Error("Parameters must be non-negative numbers");const i="ABCDEFGHIJKLMNOPQRSTUVWXYZ",n="0123456789";let s="";for(let o=0;o<e;o++){const h=Math.floor(Math.random()*i.length);s+=i[h]}s+="-";for(let o=0;o<t;o++){const h=Math.floor(Math.random()*n.length);s+=n[h]}return s}function x(e,t){for(;t.firstChild;)e.append(t.firstChild)}function j(e,t){const i=document.createElement("div");x(i,e),x(e,t),x(t,i)}function S(e){if(typeof e=="number"&&!isNaN(e))return e;if(typeof e=="string"){const t=e.trim();if(t.endsWith("%")){const i=t.slice(0,-1);if(!i)return NaN;const n=Number(i);return isNaN(n)?NaN:n/100}if(t.endsWith("px")){const i=t.slice(0,-2);if(!i)return NaN;const n=Number(i);return isNaN(n)?NaN:n}return Number(t)}return NaN}function X(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)&&Object.getPrototypeOf(e)===Object.prototype}function Y(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]}return e}function K(e){const t=document.createElement("template");return t.innerHTML=e.trim(),t.content}function z(e){if(e==null||e==="")return null;if(typeof e=="string")try{const t=K(e);return t.childNodes.length===1?t.firstChild:t}catch{return document.createTextNode(e)}return e instanceof Node?e:document.createTextNode(String(e))}function M(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 a={Top:"top",Right:"right",Bottom:"bottom",Left:"left",Center:"center",Root:"root",Unknown:"unknown",Outside:"outside"};function V(e){switch(e){case a.Top:return a.Bottom;case a.Right:return a.Left;case a.Bottom:return a.Top;case a.Left:return a.Right;default:throw new Error(`[bwin] Invalid position: ${e}`)}}function Z({width:e,height:t,x:i}){return t/e*i}function J({width:e,height:t,y:i}){return e/t*i}function Q({width:e,height:t,x:i}){return t-t/e*i}function tt({width:e,height:t,y:i}){return e-e/t*i}function et(e,{clientX:t,clientY:i}){const n=e.getBoundingClientRect(),{width:s,height:o}=n,h=t-n.left,r=i-n.top;if(h<0||h>s||r<0||r>o)return a.Outside;const d=.3,l=Z({width:s,height:o,x:h}),c=Q({width:s,height:o,x:h}),g=J({width:s,height:o,y:r}),f=tt({width:s,height:o,y:r});return h<s*(.5-d/2)&&r>l&&r<c?a.Left:h>s*(.5+d/2)&&r<l&&r>c?a.Right:r<o*(.5-d/2)&&h>g&&h<f?a.Top:r>o*(.5+d/2)&&h<g&&h>f?a.Bottom:h>s*(.5-d/2)&&h<s*(.5+d/2)&&r>o*(.5-d/2)&&r<o*(.5+d/2)?a.Center:a.Unknown}const it=100,nt=100,v={left:0,top:0,width:150,height:150,minWidth:it,minHeight:nt};class m{constructor({left:t=v.left,top:i=v.top,width:n=v.width,height:s=v.height,minWidth:o=v.minWidth,minHeight:h=v.minHeight,domNode:r=null,store:d={},position:l,id:c}=v){if(this.id=c??C(),!l)throw new Error("[bwin] Sash position is required");this.position=l,this.domNode=r,this._top=i,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)}isLeaf(){return this.children.length===0}isSplit(){return this.children.length>0}isLeftRightSplit(){return this.children.some(t=>t.position===a.Left||t.position===a.Right)}isTopBottomSplit(){return this.children.some(t=>t.position===a.Top||t.position===a.Bottom)}get leftChild(){return this.children.find(t=>t.position===a.Left)}get rightChild(){return this.children.find(t=>t.position===a.Right)}get topChild(){return this.children.find(t=>t.position===a.Top)}get bottomChild(){return this.children.find(t=>t.position===a.Bottom)}getChildren(){let t=null,i=null,n=null,s=null;for(const o of this.children)o.position===a.Left?t=o:o.position===a.Right?i=o:o.position===a.Top?n=o:o.position===a.Bottom&&(s=o);return[n,i,s,t]}getAllLeafDescendants(){const t=[];return this.walk(i=>{i.children.length===0&&t.push(i)}),t}calcMinWidth(){if(this.isLeaf())return this.minWidth;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 o=Math.max(t.calcMinWidth(),n.calcMinWidth());return Math.max(this.minWidth,o)}}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());return Math.max(this.minHeight,o)}if(t&&n){const o=t.calcMinHeight()+n.calcMinHeight();return Math.max(this.minHeight,o)}}getById(t){if(this.id===t)return this;for(const i of this.children){const n=i.getById(t);if(n)return n}return null}swapIds(t,i){const n=this.getById(t),s=this.getById(i);if(!n||!s)throw new Error("[bwin] Sash not found when swapping IDs");const o=n.id;n.id=s.id,s.id=o}getAllIds(){const t=[this.id];for(const i of this.children)t.push(...i.getAllIds());return t}addChild(t){if(this.children.length>=2)throw new Error("[bwin] Maximum 2 children allowed");this.children.push(t)}getDescendantParentById(t){for(const i of this.children){if(i.id===t)return this;const n=i.getDescendantParentById(t);if(n)return n}return null}getChildSiblingById(t){return this.children.find(i=>i.id!==t)}get top(){return this._top}set top(t){const i=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)}get left(){return this._left}set left(t){const i=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)}get width(){return this._width}set width(t){const i=t-this._width;this._width=t;const[n,s,o,h]=this.getChildren();if(h&&s){const r=h.width+s.width,d=i*(h.width/r),l=r+i;let c=h.width+d,g=l-c,f=s.left+d;const b=h.calcMinWidth(),y=s.calcMinWidth();i<0&&(c<b&&g>y?(c=h.width,g=l-c,f=h.left+c):g<y&&c>b&&(g=s.width,c=l-g,f=h.left+c)),h.width=c,s.width=g,s.left=f}n&&o&&(n.width+=i,o.width+=i)}get height(){return this._height}set height(t){const i=t-this._height;this._height=t;const[n,s,o,h]=this.getChildren();if(n&&o){const r=n.height+o.height,d=i*(n.height/r),l=r+i;let c=n.height+d,g=l-c,f=o.top+d;if(i<0){const b=n.calcMinHeight(),y=o.calcMinHeight();c<b&&g>y?(c=n.height,g=l-c,f=n.top+c):g<y&&c>b&&(g=o.height,c=l-g,f=n.top+c)}n.height=c,o.height=g,o.top=f}h&&s&&(h.height+=i,s.height+=i)}}const H={size:"50%",position:a.Left};class P{constructor({parentRect:t,children:i,siblingConfigNode:n,id:s,minWidth:o,minHeight:h,position:r,size:d,...l}){E(this,"left"),E(this,"top"),E(this,"width"),E(this,"height"),this.parentRect=t,this.children=i,this.siblingConfigNode=n,this.id=s,this.minWidth=o,this.minHeight=h,this.position=this.getPosition(r),this.size=this.getSize(d),this.nonCoreData=l,this.setBounds()}getPosition(t){if(!this.siblingConfigNode)return t;const i=V(this.siblingConfigNode.position);if(!t)return i;if(t!==i)throw new Error("[bwin] Sibling position and current position are not opposite");return t}getSize(t){if(!this.siblingConfigNode)return S(t);if(!t){if(this.siblingConfigNode.size<1)return 1-this.siblingConfigNode.size;if(this.siblingConfigNode.position===a.Left||this.siblingConfigNode.position===a.Right)return this.parentRect.width-this.siblingConfigNode.width;if(this.siblingConfigNode.position===a.Top||this.siblingConfigNode.position===a.Bottom)return this.parentRect.height-this.siblingConfigNode.height}const i=S(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===a.Left||this.position===a.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===a.Top||this.position===a.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===a.Root)this.left=0,this.top=0,this.width=this.parentRect.width,this.height=this.parentRect.height;else if(this.position===a.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===a.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===a.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===a.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 m({left:this.left,top:this.top,width:this.width,height:this.height,position:this.position,id:this.id,minWidth:this.minWidth,minHeight:this.minHeight,store:this.nonCoreData})}normConfig(t){if(X(t))return t;if(Array.isArray(t))return{children:t};if(typeof t=="string"||typeof t=="number"){const i=S(t);if(isNaN(i))throw new Error(`[bwin] Invalid size value: ${i}`);return{size:t}}else{if(t==null)return{};throw new Error(`[bwin] Invalid config value: ${t}`)}}createPrimaryConfigNode({size:t,position:i,children:n,id:s,minWidth:o,minHeight:h,...r}){return new P({parentRect:this,size:t??H.size,position:i??H.position,children:n,id:s,minWidth:o,minHeight:h,...r})}createSecondaryConfigNode({size:t,position:i,children:n,id:s,minWidth:o,minHeight:h,...r},d){return new P({parentRect:this,size:t,position:i,children:n,siblingConfigNode:d,id:s,minWidth:o,minHeight:h,...r})}buildSashTree(){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));let s,o;return!i.size&&!i.position&&n?(n.position||(n.position=a.Right),s=this.createPrimaryConfigNode(n),o=this.createSecondaryConfigNode(i,s)):(s=this.createPrimaryConfigNode(i),o=this.createSecondaryConfigNode(n,s)),s&&o&&(t.children.push(s.buildSashTree()),t.children.push(o.buildSashTree())),t}}const R={width:333,height:333},$={fitContainer:!1};class st extends P{constructor({id:t,children:i,width:n=R.width,height:s=R.height,fitContainer:o=$.fitContainer,...h}={...R,...$}){super({id:t,children:i,size:NaN,position:a.Root,parentRect:{width:n,height:s},...h}),this.fitContainer=o}}class ot extends m{constructor(t=v){super({...t,position:a.Root}),Object.assign(this,$)}}function ht(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 rt(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 at(e,{size:t,id:i}){const n=S(t);let s=e.width/2;n&&(n<1?s=e.width*n:s=n);const o=new m({id:i,top:e.top,left:e.left,width:s,height:e.height,position:a.Left}),h=new m({id:e.id,top:e.top,left:e.left+o.width,width:e.width-s,height:e.height,position:a.Right,domNode:e.domNode});return e.addChild(o),e.addChild(h),e.domNode=null,e.id=C(),o}function lt(e,{size:t,id:i}){const n=S(t);let s=e.width/2;n&&(n<1?s=e.width*n:s=n);const o=new m({id:e.id,left:e.left,top:e.top,width:e.width-s,height:e.height,position:a.Left,domNode:e.domNode}),h=new m({id:i,left:e.left+o.width,top:e.top,width:s,height:e.height,position:a.Right});return e.addChild(o),e.addChild(h),e.domNode=null,e.id=C(),h}function dt(e,{size:t,id:i}){const n=S(t);let s=e.height/2;n&&(n<1?s=e.height*n:s=n);const o=new m({id:i,left:e.left,top:e.top,width:e.width,height:s,position:a.Top}),h=new m({id:e.id,left:e.left,top:e.top+o.height,width:e.width,height:e.height-s,position:a.Bottom,domNode:e.domNode});return e.addChild(o),e.addChild(h),e.domNode=null,e.id=C(),o}function ct(e,{size:t,id:i}){const n=S(t);let s=e.height/2;n&&(n<1?s=e.height*n:s=n);const o=new m({id:e.id,top:e.top,left:e.left,width:e.width,height:e.height-s,position:a.Top,domNode:e.domNode}),h=new m({id:i,top:e.top+o.height,left:e.left,width:e.width,height:s,position:a.Bottom});return e.addChild(o),e.addChild(h),e.domNode=null,e.id=C(),h}function ut(e,{position:t,size:i,id:n,minWidth:s,minHeight:o}){if(t===a.Left)return at(e,{size:i,id:n});if(t===a.Right)return lt(e,{size:i,id:n});if(t===a.Top)return dt(e,{size:i,id:n});if(t===a.Bottom)return ct(e,{size:i,id:n})}function D(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 pt={createPane(e){const t=ht(e);return e.store.droppable===!1&&t.setAttribute("can-drop","false"),t},onPaneCreate(e,t){t.store.content&&e.append(z(t.store.content)),this!=null&&this.debug&&(e.style.backgroundColor=U(),e.innerHTML="",e.append(I(e)))},updatePane(e){return rt(e)},onPaneUpdate(e,t){this!=null&&this.debug&&(e.innerHTML="",e.append(I(e)))},addPane(e,{position:t,size:i,id:n}){if(!t)throw new Error("[bwin] Position is required when adding pane");const s=this.rootSash.getById(e);if(!s)throw new Error("[bwin] Parent sash not found when adding pane");const o=ut(s,{position:t,size:i,id:n});return this.update(),o},removePane(e){const t=this.rootSash.getDescendantParentById(e);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=C(),t.children=i.children,i.position===a.Left?i.width=t.width:i.position===a.Right?(i.width=t.width,i.left=t.left):i.position===a.Top?i.height=t.height:i.position===a.Bottom&&(i.height=t.height,i.top=t.top)),this.update()},swapPanes(e,t){const i=D(e),n=D(t),s=e.getAttribute("can-drop")!=="false",o=t.getAttribute("can-drop")!=="false";this.rootSash.swapIds(i,n),j(e,this.activeDropPaneEl),e.setAttribute("sash-id",n),t.setAttribute("sash-id",i),e.setAttribute("can-drop",o),t.setAttribute("can-drop",s)}};function I(e){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}
-`;return t.innerHTML=i.trim(),t}const gt={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},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`;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))})}},ft={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},onMuntinCreate(e,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`)},onMuntinUpdate(e,t){}},wt={fitContainer:!1,fit(){this.rootSash.width=this.containerElement.clientWidth,this.rootSash.height=this.containerElement.clientHeight,this.update()},enableFitContainer(){new ResizeObserver(e=>{for(const t of e)t.target===this.containerElement&&this.fitContainer&&this.fit()}).observe(this.containerElement)}},mt={activeMuntinSash:null,isResizeStarted:!1,isDropStarted:!1,lastX:0,lastY:0,applyResizeStyles(){this.activeMuntinSash.domNode.hasAttribute("vertical")?document.body.classList.add("body--bw-resize-x"):this.activeMuntinSash.domNode.hasAttribute("horizontal")&&document.body.classList.add("body--bw-resize-y")},revertResizeStyles(){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=>{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 a=e.pageX-this.lastX,d=s.width+a,l=i.width-a;if(a>0&&l<=i.calcMinWidth()||a<0&&d<=s.calcMinWidth())return;s.width=d,i.width=l,i.left=i.left+a,this.update(),this.lastX=e.pageX}else if(h&&t&&n){const a=e.pageY-this.lastY,d=t.height+a,l=n.height-a;if(a>0&&l<=n.calcMinHeight()||a<0&&d<=t.calcMinHeight())return;t.height=d,n.height=l,n.top=n.top+a,this.update(),this.lastY=e.pageY}}),document.addEventListener("mouseup",()=>{this.isResizeStarted=!1,this.activeMuntinSash=null,this.revertResizeStyles()})}},bt={activeDropPaneEl:null,onPaneDrop(e,t){},enableDrop(){this.windowElement.addEventListener("dragover",e=>{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=it(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=>{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})}},yt=!1;class G{constructor(t){E(this,"windowElement",null),E(this,"containerElement",null),E(this,"debug",yt);let i=null;t instanceof ht?(i=t,this.rootSash=t):(i=new ot(t),this.rootSash=i.buildSashTree()),this.fitContainer=i.fitContainer}frame(t){this.containerElement=t,this.windowElement=this.createWindow(),this.glaze(),this.containerElement.append(this.windowElement)}enableFeatures(){this.enableResize(),this.enableDrop(),this.fitContainer&&this.enableFitContainer()}mount(t){this.frame(t),this.enableFeatures()}static assemble(...t){t.forEach(i=>{K(this.prototype,i)})}}G.assemble(gt,ft,pt,wt,bt,mt);function I(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 Et={label:"",className:"bw-glass-action--close",onClick:(e,t)=>{const i=I(e.target);t.removePane(i)}},vt={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=S('<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"),a=s.getAttribute("position");n.bwGlassElement=o,n.bwOriginalPosition=a,n.bwOriginalBoundingRect=P(s),t.removePane(h)}},Nt={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 zt(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),a=Math.max(e.top,t.top),d=Math.min(i,s),l=Math.min(n,o);return{left:h,top:a,width:d-h,height:l-a}}const L=[vt,Nt,Et],Ct={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=zt(t,o);if(h){const a=h.width*h.height;a>i&&(i=a,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 t=this.windowElement.querySelector(e);t&&t.setAttribute("disabled","")}else this.windowElement.querySelectorAll(e).forEach(t=>{t.removeAttribute("disabled")})},observeActionButtons(){this.updateDisabledStateOfActionButtons(),new MutationObserver(e=>{e.forEach(t=>{t.type==="childList"&&this.updateDisabledStateOfActionButtons()})}).observe(this.windowElement,{childList:!0})}},A={title:null,content:null,tabs:[],actions:void 0,draggable:!0};class k{constructor({title:t=A.title,content:i=A.content,tabs:n=A.tabs,actions:s=A.actions,draggable:o=A.draggable,sash:h,binaryWindow:a}){E(this,"domNode"),this.title=t,this.content=i,this.tabs=n,this.actions=s,this.sash=h,this.draggable=o,this.binaryWindow=a,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 s=document.createElement("bw-glass-title");s.append(S(this.title)),t.append(s)}t.setAttribute("can-drag",this.draggable),t.append(this.createActions());const i=document.createElement("bw-glass-content"),n=S(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,s=S(`<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?L:Array.isArray(this.actions)?this.actions:[];for(const n of i){const s=(n==null?void 0:n.label)??n,o=n.className?`bw-glass-action ${n.className}`:"bw-glass-action",h=S(`<button class="${o}">${s}</button>`);typeof n.onClick=="function"&&h.addEventListener("click",a=>{n.onClick(a,this.binaryWindow)}),t.append(h)}return t}get contentElement(){return this.domNode.querySelector("bw-glass-content")}get headerElement(){return this.domNode.querySelector("bw-glass-header")}}const St={activeDragGlassEl:null,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"),s=this.activeDropPaneEl.getAttribute("can-drop")!=="false";X(n,this.activeDropPaneEl),n.setAttribute("can-drop",s);return}else{const n=I(this.activeDragGlassEl);this.addPane(t.id,{position:i}).domNode.append(this.activeDragGlassEl),this.removePane(n)}},enableDrag(){document.addEventListener("mousedown",e=>{if(e.button!==0||!e.target.matches("bw-glass-header"))return;if(e.target.getAttribute("can-drag")==="false"){e.preventDefault();return}const t=e.target.closest("bw-glass");t.setAttribute("draggable",!0),this.activeDragGlassEl=t}),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)return;e.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",()=>{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 F extends G{constructor(){super(...arguments),E(this,"sillElement",null)}frame(){super.frame(...arguments);const t=S("<bw-sill />");this.windowElement.append(t),this.sillElement=t}enableFeatures(){super.enableFeatures(),this.enableDrag(),this.enableActions()}onPaneCreate(t,i){const n=new k({...i.store,sash:i,binaryWindow:this});t.innerHTML="",t.append(n.domNode),this.debug&&n.contentElement.prepend(`${i.id}`)}onPaneUpdate(){}addPane(t,i){const{position:n,size:s,...o}=i,h=super.addPane(t,{position:n,size:s}),a=new k({...o,sash:h,binaryWindow:this});return h.domNode.append(a.domNode),h}}F.assemble(St,Mt,Ct);const N=4;function At({sash:e}){var c;const t=u.useRef(),i=e.leftChild,n=e.topChild;let s,o,h,a,d,l;return i?(s=N,o=e.height-N,h=e.top+N/2,a=e.left+i.width-N/2,d=!0):n&&(s=e.width-N,o=N,h=e.top+n.height-N/2,a=e.left+N/2,l=!0),u.useEffect(()=>{e.domNode=t.current},[]),u.createElement("bw-muntin",{"sash-id":e.id,style:{width:s,height:o,top:h,left:a},vertical:d,horizontal:l,resizable:((c=e.store)==null?void 0:c.resizable)===!1?"false":"true",ref:t})}function Pt({sash:e,bwin:t}){var c,g,f,b,y;const i=u.useRef(),{left:n,top:s,width:o,height:h,id:a,position:d}=e;u.useEffect(()=>{e.domNode=i.current},[]);const l=((c=e.store)==null?void 0:c.actions)===void 0?L:Array.isArray(e.store.actions)?e.store.actions:[];return u.createElement("bw-pane",{"sash-id":a,position:d,style:{left:n,top:s,width:o,height:h},"can-drop":((g=e.store)==null?void 0:g.droppable)===!1?"false":"true",ref:i},u.createElement("bw-glass",null,u.createElement("bw-glass-header",{"can-drag":((f=e.store)==null?void 0:f.draggable)===!1?"false":"true"},((b=e.store)==null?void 0:b.title)&&u.createElement("bw-glass-title",null,e.store.title),l.length>0&&u.createElement("bw-glass-action-container",null,l.map((p,B)=>{const T=p.className?`bw-glass-action ${p.className}`:"bw-glass-action";return u.createElement("button",{className:T,key:B,onClick:W=>p.onClick(W,t)},p.label)}))),u.createElement("bw-glass-content",null,(y=e.store)==null?void 0:y.content)))}const Dt=u.forwardRef((e,t)=>{const i=u.useRef(),n=u.useRef(),[s,o]=u.useState(),{panes:h,...a}=e,d={...a,children:h},l=new F(d),c=[],g=[];l.rootSash.walk(p=>{p.children.length>0?c.push(p):g.push(p)}),u.useEffect(()=>{const p=i.current;p!=null&&p.parentElement&&(l.windowElement=p,l.containerElement=p.parentElement,l.sillElement=n.current,l.enableFeatures())},[]),u.useImperativeHandle(t,()=>({fit:l.fit.bind(l),removePane:l.removePane.bind(l),addPane:y}),[]);const f=u.createElement("bw-window",{"root-sash-id":l.rootSash.id,style:{width:l.rootSash.width,height:l.rootSash.height},ref:i},g.map(p=>u.createElement(Pt,{key:p.id,sash:p,bwin:l})),c.map(p=>u.createElement(At,{key:p.id,sash:p})),u.createElement("bw-sill",{ref:n})),b=u.useMemo(()=>f,[]);function y(p,B){const{content:T,...W}=B,Rt=l.addPane(p,W),$t=document.querySelector(`bw-pane[sash-id="${Rt.id}"] bw-glass-content`);o(Lt=>[...Lt||[],{node:T,container:$t}])}return u.createElement(u.Fragment,null,b,s==null?void 0:s.map(p=>_.createPortal(p.node,p.container)))}),xt="0.3.1";w.BUILTIN_ACTIONS=L,w.Window=Dt,w.version=xt,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
+`;return t.innerHTML=i.trim(),t}const gt={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},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`;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))})}},ft={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},onMuntinCreate(e,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`)},onMuntinUpdate(e,t){}},wt={fitContainer:!1,fit(){this.rootSash.width=this.containerElement.clientWidth,this.rootSash.height=this.containerElement.clientHeight,this.update()},enableFitContainer(){new ResizeObserver(e=>{for(const t of e)t.target===this.containerElement&&this.fitContainer&&this.fit()}).observe(this.containerElement)}},mt={activeMuntinSash:null,isResizeStarted:!1,isDropStarted:!1,lastX:0,lastY:0,applyResizeStyles(){this.activeMuntinSash.domNode.hasAttribute("vertical")?document.body.classList.add("body--bw-resize-x"):this.activeMuntinSash.domNode.hasAttribute("horizontal")&&document.body.classList.add("body--bw-resize-y")},revertResizeStyles(){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=>{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 r=e.pageX-this.lastX,d=s.width+r,l=i.width-r;if(r>0&&l<=i.calcMinWidth()||r<0&&d<=s.calcMinWidth())return;s.width=d,i.width=l,i.left=i.left+r,this.update(),this.lastX=e.pageX}else if(h&&t&&n){const r=e.pageY-this.lastY,d=t.height+r,l=n.height-r;if(r>0&&l<=n.calcMinHeight()||r<0&&d<=t.calcMinHeight())return;t.height=d,n.height=l,n.top=n.top+r,this.update(),this.lastY=e.pageY}}),document.addEventListener("mouseup",()=>{this.isResizeStarted=!1,this.activeMuntinSash=null,this.revertResizeStyles()})}},bt={activeDropPaneEl:null,onPaneDrop(e,t){},enableDrop(){this.windowElement.addEventListener("dragover",e=>{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=et(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=>{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})}},yt=!1;class O{constructor(t){E(this,"windowElement",null),E(this,"containerElement",null),E(this,"debug",yt);let i=null;t instanceof ot?(i=t,this.rootSash=t):(i=new st(t),this.rootSash=i.buildSashTree()),this.fitContainer=i.fitContainer}frame(t){this.containerElement=t,this.windowElement=this.createWindow(),this.glaze(),this.containerElement.append(this.windowElement)}enableFeatures(){this.enableResize(),this.enableDrop(),this.fitContainer&&this.enableFitContainer()}mount(t){this.frame(t),this.enableFeatures()}static assemble(...t){t.forEach(i=>{Y(this.prototype,i)})}}O.assemble(gt,ft,pt,wt,bt,mt);const Et={label:"",className:"bw-glass-action--close",onClick:(e,t)=>{const i=D(e.target);t.removePane(i)}},vt={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=z('<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"),r=s.getAttribute("position");n.bwGlassElement=o,n.bwOriginalPosition=r,n.bwOriginalBoundingRect=M(s),n.bwOriginalSashId=h,t.removePane(h)}},Nt={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=M(t),t.style.left="0",t.style.top="0",t.style.width="100%",t.style.height="100%")}};function St(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),r=Math.max(e.top,t.top),d=Math.min(i,s),l=Math.min(n,o);return{left:h,top:r,width:d-h,height:l-r}}const B=[vt,Nt,Et],zt={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=M(s),h=St(t,o);if(h){const r=h.width*h.height;r>i&&(i=r,n=s)}}),n){const s=e.bwOriginalPosition,o=M(n),h=n.getAttribute("sash-id"),r=this.rootSash.getById(h);let d=0;if(s===a.Left||s===a.Right)d=o.width-t.width<r.minWidth?o.width/2:t.width;else if(s===a.Top||s===a.Bottom)d=o.height-t.height<r.minHeight?o.height/2:t.height;else throw new Error("[bwin] Invalid position when restoring glass");const l=e.bwOriginalSashId;this.addPane(n.getAttribute("sash-id"),{id:l,position:s,size:d}).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 t=this.windowElement.querySelector(e);t&&t.setAttribute("disabled","")}else this.windowElement.querySelectorAll(e).forEach(t=>{t.removeAttribute("disabled")})},observeActionButtons(){this.updateDisabledStateOfActionButtons(),new MutationObserver(e=>{e.forEach(t=>{t.type==="childList"&&this.updateDisabledStateOfActionButtons()})}).observe(this.windowElement,{childList:!0})}},A={title:null,content:null,tabs:[],actions:void 0,draggable:!0};class G{constructor({title:t=A.title,content:i=A.content,tabs:n=A.tabs,actions:s=A.actions,draggable:o=A.draggable,sash:h,binaryWindow:r}){E(this,"domNode"),this.title=t,this.content=i,this.tabs=n,this.actions=s,this.sash=h,this.draggable=o,this.binaryWindow=r,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 s=document.createElement("bw-glass-title");s.append(z(this.title)),t.append(s)}t.setAttribute("can-drag",this.draggable),t.append(this.createActions());const i=document.createElement("bw-glass-content"),n=z(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,s=z(`<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?B:Array.isArray(this.actions)?this.actions:[];for(const n of i){const s=(n==null?void 0:n.label)??n,o=n.className?`bw-glass-action ${n.className}`:"bw-glass-action",h=z(`<button class="${o}">${s}</button>`);typeof n.onClick=="function"&&h.addEventListener("click",r=>{n.onClick(r,this.binaryWindow)}),t.append(h)}return t}get contentElement(){return this.domNode.querySelector("bw-glass-content")}get headerElement(){return this.domNode.querySelector("bw-glass-header")}}const Ct={activeDragGlassEl:null,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");this.swapPanes(n,this.activeDropPaneEl);return}else{const n=D(this.activeDragGlassEl);this.removePane(n),this.addPane(t.id,{position:i,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();return}const t=e.target.closest("bw-glass");t.setAttribute("draggable",!0),this.activeDragGlassEl=t}),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)return;e.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",()=>{this.activeDragGlassEl&&(this.activeDragGlassEl.removeAttribute("draggable"),this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop",this.activeDragGlassPaneCanDrop),this.activeDragGlassEl=null)})}},At={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 k extends O{constructor(){super(...arguments),E(this,"sillElement",null)}frame(){super.frame(...arguments);const t=z("<bw-sill />");this.windowElement.append(t),this.sillElement=t}enableFeatures(){super.enableFeatures(),this.enableDrag(),this.enableActions()}onPaneCreate(t,i){const n=new G({...i.store,sash:i,binaryWindow:this});t.innerHTML="",t.append(n.domNode),this.debug&&n.contentElement.prepend(`${i.id}`)}onPaneUpdate(){}addPane(t,i){const{position:n,size:s,id:o,...h}=i,r=super.addPane(t,{position:n,size:s,id:o}),d=new G({...h,sash:r,binaryWindow:this});return r.domNode.append(d.domNode),r}}k.assemble(Ct,At,zt);const N=4;function Mt({sash:e}){var c;const t=u.useRef(),i=e.leftChild,n=e.topChild;let s,o,h,r,d,l;return i?(s=N,o=e.height-N,h=e.top+N/2,r=e.left+i.width-N/2,d=!0):n&&(s=e.width-N,o=N,h=e.top+n.height-N/2,r=e.left+N/2,l=!0),u.useEffect(()=>{e.domNode=t.current},[]),u.createElement("bw-muntin",{"sash-id":e.id,style:{width:s,height:o,top:h,left:r},vertical:d,horizontal:l,resizable:((c=e.store)==null?void 0:c.resizable)===!1?"false":"true",ref:t})}function Pt({sash:e,bwin:t}){var c,g,f,b,y;const i=u.useRef(),{left:n,top:s,width:o,height:h,id:r,position:d}=e;u.useEffect(()=>{e.domNode=i.current},[]);const l=((c=e.store)==null?void 0:c.actions)===void 0?B:Array.isArray(e.store.actions)?e.store.actions:[];return u.createElement("bw-pane",{"sash-id":r,position:d,style:{left:n,top:s,width:o,height:h},"can-drop":((g=e.store)==null?void 0:g.droppable)===!1?"false":"true",ref:i},u.createElement("bw-glass",null,u.createElement("bw-glass-header",{"can-drag":((f=e.store)==null?void 0:f.draggable)===!1?"false":"true"},((b=e.store)==null?void 0:b.title)&&u.createElement("bw-glass-title",null,e.store.title),l.length>0&&u.createElement("bw-glass-action-container",null,l.map((p,L)=>{const T=p.className?`bw-glass-action ${p.className}`:"bw-glass-action";return u.createElement("button",{className:T,key:L,onClick:W=>p.onClick(W,t)},p.label)}))),u.createElement("bw-glass-content",null,(y=e.store)==null?void 0:y.content)))}const Dt=u.forwardRef((e,t)=>{const i=u.useRef(),n=u.useRef(),[s,o]=u.useState(),{panes:h,...r}=e,d={...r,children:h},l=new k(d),c=[],g=[];l.rootSash.walk(p=>{p.children.length>0?c.push(p):g.push(p)}),u.useEffect(()=>{const p=i.current;p!=null&&p.parentElement&&(l.windowElement=p,l.containerElement=p.parentElement,l.sillElement=n.current,l.enableFeatures())},[]),u.useImperativeHandle(t,()=>({fit:l.fit.bind(l),removePane:l.removePane.bind(l),addPane:y}),[]);const f=u.createElement("bw-window",{"root-sash-id":l.rootSash.id,style:{width:l.rootSash.width,height:l.rootSash.height},ref:i},g.map(p=>u.createElement(Pt,{key:p.id,sash:p,bwin:l})),c.map(p=>u.createElement(Mt,{key:p.id,sash:p})),u.createElement("bw-sill",{ref:n})),b=u.useMemo(()=>f,[]);function y(p,L){const{content:T,...W}=L,Rt=l.addPane(p,W),$t=document.querySelector(`bw-pane[sash-id="${Rt.id}"] bw-glass-content`);o(Bt=>[...Bt||[],{node:T,container:$t}])}return u.createElement(u.Fragment,null,b,s==null?void 0:s.map(p=>F.createPortal(p.node,p.container)))}),xt="0.3.3";w.BUILTIN_ACTIONS=B,w.Window=Dt,w.version=xt,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-bwin",
   "description": "A tiling window manager in React based on Binary Window library",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "@types/react": "^16.14.62",
     "@types/react-dom": "^16.9.24",
     "@vitejs/plugin-react": "^4.3.4",
-    "bwin": "0.2.1",
+    "bwin": "0.2.5",
     "prettier": "^3.4.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",