react-bwin 0.2.4 → 0.3.0

package/dist/react-bwin.js

@@ -1,10 +1,11 @@
-import g, { useRef as M, useEffect as L, forwardRef as q, useImperativeHandle as U } from "react";
-var X = Object.defineProperty, Y = (e, t, i) => t in e ? X(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, b = (e, t, i) => Y(e, typeof t != "symbol" ? t + "" : t, i);
-function j(e = 0.7, t = 128) {
+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) {
   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 D(e = 2, t = 3) {
+function B(e = 2, t = 3) {
   if (e < 0 || t < 0)
     throw new Error("Parameters must be non-negative numbers");
   const i = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", n = "0123456789";
@@ -20,15 +21,15 @@ function D(e = 2, t = 3) {
   }
   return s;
 }
-function N(e, t) {
+function z(e, t) {
   for (; t.firstChild; )
     e.append(t.firstChild);
 }
-function K(e, t) {
+function et(e, t) {
   const i = document.createElement("div");
-  N(i, e), N(e, t), N(t, i);
+  z(i, e), z(e, t), z(t, i);
 }
-function z(e) {
+function C(e) {
   if (typeof e == "number" && !isNaN(e))
     return e;
   if (typeof e == "string") {
@@ -49,10 +50,10 @@ function z(e) {
   }
   return NaN;
 }
-function V(e) {
+function it(e) {
   return e !== null && typeof e == "object" && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype;
 }
-function Z(e, t) {
+function nt(e, t) {
   for (const i in t) {
     if (Object.hasOwn(e, i))
       throw new Error(`Key "${i}" already exists in target object`);
@@ -60,16 +61,16 @@ function Z(e, t) {
   }
   return e;
 }
-function J(e) {
+function st(e) {
   const t = document.createElement("template");
   return t.innerHTML = e.trim(), t.content;
 }
-function v(e) {
+function N(e) {
   if (e == null || e === "")
     return null;
   if (typeof e == "string")
     try {
-      const t = J(e);
+      const t = st(e);
       return t.childNodes.length === 1 ? t.firstChild : t;
     } catch {
       return document.createTextNode(e);
@@ -90,7 +91,7 @@ const r = {
   Unknown: "unknown",
   Outside: "outside"
 };
-function Q(e) {
+function ot(e) {
   switch (e) {
     case r.Top:
       return r.Bottom;
@@ -104,50 +105,50 @@ function Q(e) {
       throw new Error(`[bwin] Invalid position: ${e}`);
   }
 }
-function tt({ width: e, height: t, x: i }) {
+function ht({ width: e, height: t, x: i }) {
   return t / e * i;
 }
-function et({ width: e, height: t, y: i }) {
+function rt({ width: e, height: t, y: i }) {
   return e / t * i;
 }
-function it({ width: e, height: t, x: i }) {
+function at({ width: e, height: t, x: i }) {
   return t - t / e * i;
 }
-function nt({ width: e, height: t, y: i }) {
+function lt({ width: e, height: t, y: i }) {
   return e - e / t * i;
 }
-function st(e, { clientX: t, clientY: 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, c = tt({ width: s, height: o, x: h }), l = it({ width: s, height: o, x: h }), p = et({ width: s, height: o, y: a }), u = nt({ width: s, height: o, y: a });
-  return h < s * (0.5 - d / 2) && a > c && a < l ? r.Left : h > s * (0.5 + d / 2) && a < c && a > l ? r.Right : a < o * (0.5 - d / 2) && h > p && h < u ? r.Top : a > o * (0.5 + d / 2) && h < p && h > u ? 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;
+  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;
 }
-const ot = 100, ht = 100, E = {
+const ct = 100, pt = 100, v = {
   left: 0,
   top: 0,
   width: 150,
   height: 150,
   // Initial min values, real min width/height is calculated based on children
-  minWidth: ot,
-  minHeight: ht
+  minWidth: ct,
+  minHeight: pt
 };
-class m {
+class b {
   constructor({
-    left: t = E.left,
-    top: i = E.top,
-    width: n = E.width,
-    height: s = E.height,
-    minWidth: o = E.minWidth,
-    minHeight: h = E.minHeight,
+    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: c,
-    id: l
-  } = E) {
-    if (this.id = l ?? D(), !c)
+    position: l,
+    id: c
+  } = v) {
+    if (this.id = c ?? B(), !l)
       throw new Error("[bwin] Sash position is required");
-    this.position = c, 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 = 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);
@@ -281,10 +282,10 @@ class m {
     this._width = t;
     const [n, s, o, h] = this.getChildren();
     if (h && s) {
-      const a = h.width + s.width, d = i * (h.width / a), c = a + i;
-      let l = h.width + d, p = c - l, u = s.left + d;
-      const f = h.calcMinWidth(), w = s.calcMinWidth();
-      l < f && p > w ? (l = f, p = c - l, u = h.left + l) : p < w && l > f && (p = w, l = c - p, u = h.left + l), h.width = l, s.width = p, s.left = u;
+      const a = h.width + s.width, d = i * (h.width / a), l = a + i;
+      let c = h.width + d, u = l - c, g = s.left + d;
+      const m = h.calcMinWidth(), w = s.calcMinWidth();
+      c < m && u > w ? (c = m, u = l - c, g = h.left + c) : u < w && c > m && (u = w, c = l - u, g = h.left + c), h.width = c, s.width = u, s.left = g;
     }
     n && o && (n.width += i, o.width += i);
   }
@@ -296,15 +297,15 @@ class m {
     this._height = t;
     const [n, s, o, h] = this.getChildren();
     if (n && o) {
-      const a = n.height + o.height, d = i * (n.height / a), c = a + i;
-      let l = n.height + d, p = c - l, u = o.top + d;
-      const f = n.calcMinHeight(), w = o.calcMinHeight();
-      l < f && p > w ? (l = f, p = c - l, u = n.top + l) : p < w && l > f && (p = w, l = c - p, u = n.top + l), n.height = l, o.height = p, o.top = u;
+      const a = n.height + o.height, d = i * (n.height / a), l = a + i;
+      let c = n.height + d, u = l - c, g = o.top + d;
+      const m = n.calcMinHeight(), w = o.calcMinHeight();
+      c < m && u > w ? (c = m, u = l - c, g = n.top + c) : u < w && c > m && (u = w, c = l - u, g = n.top + c), n.height = c, o.height = u, o.top = g;
     }
     h && s && (h.height += i, s.height += i);
   }
 }
-const B = {
+const H = {
   size: "50%",
   position: r.Left
 };
@@ -318,14 +319,14 @@ class P {
     minHeight: h,
     position: a,
     size: d,
-    ...c
+    ...l
   }) {
-    b(this, "left"), b(this, "top"), b(this, "width"), b(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 = c, this.setBounds();
+    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 = Q(this.siblingConfigNode.position);
+    const i = ot(this.siblingConfigNode.position);
     if (!t)
       return i;
     if (t !== i)
@@ -334,7 +335,7 @@ class P {
   }
   getSize(t) {
     if (!this.siblingConfigNode)
-      return z(t);
+      return C(t);
     if (!t) {
       if (this.siblingConfigNode.size < 1)
         return 1 - this.siblingConfigNode.size;
@@ -343,7 +344,7 @@ class P {
       if (this.siblingConfigNode.position === r.Top || this.siblingConfigNode.position === r.Bottom)
         return this.parentRect.height - this.siblingConfigNode.height;
     }
-    const i = z(t);
+    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");
@@ -373,7 +374,7 @@ class P {
     }
   }
   createSash() {
-    return new m({
+    return new b({
       left: this.left,
       top: this.top,
       width: this.width,
@@ -386,14 +387,14 @@ class P {
     });
   }
   normConfig(t) {
-    if (V(t))
+    if (it(t))
       return t;
     if (Array.isArray(t))
       return {
         children: t
       };
     if (typeof t == "string" || typeof t == "number") {
-      const i = z(t);
+      const i = C(t);
       if (isNaN(i))
         throw new Error(`[bwin] Invalid size value: ${i}`);
       return {
@@ -408,8 +409,8 @@ class P {
   createPrimaryConfigNode({ size: t, position: i, children: n, id: s, minWidth: o, minHeight: h, ...a }) {
     return new P({
       parentRect: this,
-      size: t ?? B.size,
-      position: i ?? B.position,
+      size: t ?? H.size,
+      position: i ?? H.position,
       children: n,
       id: s,
       minWidth: o,
@@ -445,23 +446,23 @@ class P {
     )), s && o && (t.children.push(s.buildSashTree()), t.children.push(o.buildSashTree())), t;
   }
 }
-const x = {
+const L = {
   width: 333,
   height: 333
-}, $ = {
+}, T = {
   fitContainer: !1
 };
-class rt extends P {
+class ut extends P {
   constructor({
     id: t,
     children: i,
-    width: n = x.width,
-    height: s = x.height,
-    fitContainer: o = $.fitContainer,
+    width: n = L.width,
+    height: s = L.height,
+    fitContainer: o = T.fitContainer,
     ...h
   } = {
-    ...x,
-    ...$
+    ...L,
+    ...T
   }) {
     super({
       id: t,
@@ -473,120 +474,120 @@ class rt extends P {
     }), this.fitContainer = o;
   }
 }
-class at extends m {
-  constructor(t = E) {
-    super({ ...t, position: r.Root }), Object.assign(this, $);
+class gt extends b {
+  constructor(t = v) {
+    super({ ...t, position: r.Root }), Object.assign(this, T);
   }
 }
-function S(e) {
+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 lt(e) {
+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 dt(e, { size: t }) {
-  const i = z(t);
+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 m({
+  const s = new b({
     top: e.top,
     left: e.left,
     width: n,
     height: e.height,
     position: r.Left
-  }), o = new m({
+  }), o = new b({
     top: e.top,
     left: e.left + s.width,
     width: e.width - n,
     height: e.height,
     position: r.Right
-  }), h = S(o);
-  return o.domNode = h, N(h, e.domNode), e.addChild(s), e.addChild(o), s;
+  }), 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 = z(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 m({
+  const s = new b({
     left: e.left,
     top: e.top,
     width: e.width - n,
     height: e.height,
     position: r.Left
-  }), o = new m({
+  }), o = new b({
     left: e.left + s.width,
     top: e.top,
     width: n,
     height: e.height,
     position: r.Right
-  }), h = S(s);
-  return s.domNode = h, N(h, e.domNode), e.addChild(s), e.addChild(o), o;
+  }), h = M(s);
+  return s.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), o;
 }
-function pt(e, { size: t }) {
-  const i = z(t);
+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 m({
+  const s = new b({
     left: e.left,
     top: e.top,
     width: e.width,
     height: n,
     position: r.Top
-  }), o = new m({
+  }), o = new b({
     left: e.left,
     top: e.top + s.height,
     width: e.width,
     height: e.height - n,
     position: r.Bottom
-  }), h = S(o);
-  return o.domNode = h, N(h, e.domNode), e.addChild(s), e.addChild(o), s;
+  }), h = M(o);
+  return o.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), s;
 }
-function ut(e, { size: t }) {
-  const i = z(t);
+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 m({
+  const s = new b({
     top: e.top,
     left: e.left,
     width: e.width,
     height: e.height - n,
     position: r.Top
-  }), o = new m({
+  }), o = new b({
     top: e.top + s.height,
     left: e.left,
     width: e.width,
     height: n,
     position: r.Bottom
-  }), h = S(s);
-  return s.domNode = h, N(h, e.domNode), e.addChild(s), e.addChild(o), o;
+  }), h = M(s);
+  return s.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), o;
 }
-function gt(e, { position: t, size: i, minWidth: n, minHeight: s }) {
+function yt(e, { position: t, size: i, minWidth: n, minHeight: s }) {
   if (t === r.Left)
-    return dt(e, { size: i });
+    return mt(e, { size: i });
   if (t === r.Right)
-    return ct(e, { size: i });
+    return wt(e, { size: i });
   if (t === r.Top)
-    return pt(e, { size: i });
+    return bt(e, { size: i });
   if (t === r.Bottom)
-    return ut(e, { size: i });
+    return Et(e, { size: i });
 }
-const ft = {
+const vt = {
   createPane(e) {
-    const t = S(e);
+    const t = M(e);
     return e.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
   },
   // Intended to be overridden
   onPaneCreate(e, t) {
-    t.store.content && e.append(v(t.store.content)), this != null && this.debug && (e.style.backgroundColor = j(), e.innerHTML = "", e.append(T(e)));
+    t.store.content && e.append(N(t.store.content)), this != null && this.debug && (e.style.backgroundColor = tt(), e.innerHTML = "", e.append(G(e)));
   },
   updatePane(e) {
-    return lt(e);
+    return ft(e);
   },
   // Intended to be overridden
   onPaneUpdate(e, t) {
-    this != null && this.debug && (e.innerHTML = "", e.append(T(e)));
+    this != null && this.debug && (e.innerHTML = "", e.append(G(e)));
   },
   /**
    * Add a pane into the target pane. The two panes become next to each other
@@ -599,8 +600,8 @@ const ft = {
     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 = gt(n, { position: t, size: i });
-    return n.id = D(), this.update(), s;
+    const s = yt(n, { position: t, size: i });
+    return n.id = B(), this.update(), s;
   },
   /**
    * Remove a pane
@@ -611,10 +612,10 @@ const ft = {
     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 = D(), 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();
+    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();
   }
 };
-function T(e) {
+function G(e) {
   const t = document.createElement("pre");
   t.style.fontSize = "10px";
   const i = `
@@ -627,10 +628,10 @@ height: ${e.style.height}
 `;
   return t.innerHTML = i.trim(), t;
 }
-const wt = {
+const Nt = {
   createWindow() {
     const e = document.createElement("bw-window");
-    return e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("sash-id", this.rootSash.id), e;
+    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) => {
@@ -648,7 +649,7 @@ const wt = {
       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));
     });
   }
-}, mt = {
+}, zt = {
   muntinSize: 4,
   createMuntin(e) {
     const t = document.createElement("bw-muntin"), i = e.leftChild, n = e.topChild;
@@ -662,7 +663,7 @@ const wt = {
   },
   onMuntinUpdate(e, t) {
   }
-}, bt = {
+}, Ct = {
   fitContainer: !1,
   fit() {
     this.rootSash.width = this.containerElement.clientWidth, this.rootSash.height = this.containerElement.clientHeight, this.update();
@@ -673,7 +674,7 @@ const wt = {
         t.target === this.containerElement && this.fitContainer && this.fit();
     }).observe(this.containerElement);
   }
-}, yt = {
+}, St = {
   activeMuntinSash: null,
   isResizeStarted: !1,
   isDropStarted: !1,
@@ -694,21 +695,21 @@ const wt = {
       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, c = i.width - a;
-        if (d <= s.calcMinWidth() || c <= i.calcMinWidth())
+        const a = e.pageX - this.lastX, d = s.width + a, l = i.width - a;
+        if (d <= s.calcMinWidth() || l <= i.calcMinWidth())
           return;
-        s.width = d, i.width = c, i.left = i.left + a, this.update(), this.lastX = e.pageX;
+        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, c = n.height - a;
-        if (d <= t.calcMinHeight() || c <= n.calcMinHeight())
+        const a = e.pageY - this.lastY, d = t.height + a, l = n.height - a;
+        if (d <= t.calcMinHeight() || l <= n.calcMinHeight())
           return;
-        t.height = d, n.height = c, n.top = n.top + a, this.update(), this.lastY = e.pageY;
+        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();
     });
   }
-}, Et = {
+}, Mt = {
   activeDropPaneEl: null,
   // Intended to be overridden in `BinaryWindow` class
   onPaneDrop(e, t) {
@@ -718,7 +719,7 @@ const wt = {
       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 = st(t, e);
+      const i = dt(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);
@@ -728,12 +729,12 @@ const wt = {
       this.onPaneDrop(e, i), typeof i.store.onDrop == "function" && i.store.onDrop(e, i), this.activeDropPaneEl.removeAttribute("drop-area"), this.activeDropPaneEl = null;
     });
   }
-}, vt = !0;
-class H {
+}, At = !1;
+class O {
   constructor(t) {
-    b(this, "windowElement", null), b(this, "containerElement", null), b(this, "debug", vt);
+    E(this, "windowElement", null), E(this, "containerElement", null), E(this, "debug", At);
     let i = null;
-    t instanceof at ? (i = t, this.rootSash = t) : (i = new rt(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
+    t instanceof gt ? (i = t, this.rootSash = t) : (i = new ut(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);
@@ -747,19 +748,19 @@ class H {
   }
   static assemble(...t) {
     t.forEach((i) => {
-      Z(this.prototype, i);
+      nt(this.prototype, i);
     });
   }
 }
-H.assemble(
-  wt,
-  mt,
-  ft,
-  bt,
-  Et,
-  yt
+O.assemble(
+  Nt,
+  zt,
+  vt,
+  Ct,
+  Mt,
+  St
 );
-function G(e) {
+function k(e) {
   if (e.tagName === "BW-PANE")
     return e.getAttribute("sash-id");
   const t = e.closest("bw-pane");
@@ -767,25 +768,25 @@ function G(e) {
     throw new Error("[bwin] Pane element not found");
   return t.getAttribute("sash-id");
 }
-const Nt = {
+const Rt = {
   label: "",
   className: "bw-glass-action--close",
   onClick: (e, t) => {
-    const i = G(e.target);
+    const i = k(e.target);
     t.removePane(i);
   }
-}, zt = {
+}, Pt = {
   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 = v('<button class="bw-minimized-glass" />');
+    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);
   }
-}, Ct = {
+}, xt = {
   label: "",
   className: "bw-glass-action--maximize",
   onClick: (e) => {
@@ -793,19 +794,19 @@ const Nt = {
     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%");
   }
 };
-function St(e, t) {
+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), c = Math.min(n, o);
+  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: c - a
+    height: l - a
   };
 }
-const I = [zt, Ct, Nt], At = {
+const F = [Pt, xt, Rt], $t = {
   enableActions() {
     this.handleMinimizedGlassClick(), this.observeActionButtons();
   },
@@ -813,7 +814,7 @@ const I = [zt, Ct, Nt], At = {
     const t = e.bwOriginalBoundingRect;
     let i = 0, n = null;
     if (this.windowElement.querySelectorAll("bw-pane").forEach((s) => {
-      const o = R(s), h = St(t, o);
+      const o = R(s), h = Dt(t, o);
       if (h) {
         const a = h.width * h.height;
         a > i && (i = a, n = s);
@@ -861,24 +862,24 @@ const I = [zt, Ct, Nt], At = {
       childList: !0
     });
   }
-}, C = {
+}, S = {
   title: null,
   content: null,
   tabs: [],
   actions: void 0,
   draggable: !0
 };
-class W {
+class I {
   constructor({
-    title: t = C.title,
-    content: i = C.content,
-    tabs: n = C.tabs,
-    actions: s = C.actions,
-    draggable: o = C.draggable,
+    title: t = S.title,
+    content: i = S.content,
+    tabs: n = S.tabs,
+    actions: s = S.actions,
+    draggable: o = S.draggable,
     sash: h,
     binaryWindow: a
   }) {
-    b(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();
+    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");
@@ -886,24 +887,24 @@ class W {
       t.append(this.createTabs());
     else if (this.title) {
       const s = document.createElement("bw-glass-title");
-      s.append(v(this.title)), t.append(s);
+      s.append(N(this.title)), t.append(s);
     }
     t.setAttribute("can-drag", this.draggable), t.append(this.createActions());
-    const i = document.createElement("bw-glass-content"), n = v(this.content);
+    const i = document.createElement("bw-glass-content"), n = N(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 = v(`<button class="bw-glass-tab">${n}</button>`);
+      const n = (i == null ? void 0 : i.label) ?? i, s = N(`<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 ? I : Array.isArray(this.actions) ? this.actions : [];
+    const t = document.createElement("bw-glass-action-container"), i = this.actions === void 0 ? F : 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 = v(`<button class="${o}">${s}</button>`);
+      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);
       }), t.append(h);
@@ -917,7 +918,7 @@ class W {
     return this.domNode.querySelector("bw-glass-header");
   }
 }
-const Mt = {
+const Lt = {
   activeDragGlassEl: null,
   activeDragGlassPaneCanDrop: !1,
   onPaneDrop(e, t) {
@@ -925,10 +926,10 @@ const Mt = {
     const i = this.activeDropPaneEl.getAttribute("drop-area");
     if (i === "center") {
       const n = this.activeDragGlassEl.closest("bw-pane"), s = this.activeDropPaneEl.getAttribute("can-drop") !== "false";
-      K(n, this.activeDropPaneEl), n.setAttribute("can-drop", s);
+      et(n, this.activeDropPaneEl), n.setAttribute("can-drop", s);
       return;
     } else {
-      const n = G(this.activeDragGlassEl);
+      const n = k(this.activeDragGlassEl);
       this.addPane(t.id, { position: i }).domNode.append(this.activeDragGlassEl), this.removePane(n);
     }
   },
@@ -953,7 +954,7 @@ const Mt = {
       this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop", this.activeDragGlassPaneCanDrop), this.activeDragGlassEl = null);
     });
   }
-}, Rt = {
+}, Bt = {
   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`);
   },
@@ -964,62 +965,45 @@ const Mt = {
     this.trimMuntin(e);
   }
 };
-class O extends H {
+class _ extends O {
   constructor() {
-    super(...arguments), b(this, "sillElement", null);
+    super(...arguments), E(this, "sillElement", null);
   }
   frame() {
     super.frame(...arguments);
-    const t = v("<bw-sill />");
+    const t = N("<bw-sill />");
     this.windowElement.append(t), this.sillElement = t;
   }
   enableFeatures() {
     super.enableFeatures(), this.enableDrag(), this.enableActions();
   }
   onPaneCreate(t, i) {
-    const n = new W({ ...i.store, sash: i, binaryWindow: this });
+    const n = new I({ ...i.store, sash: i, binaryWindow: this });
     t.innerHTML = "", t.append(n.domNode), this.debug && n.contentElement.prepend(`${i.id}`);
   }
   onPaneUpdate() {
   }
   /**
-   * Add glass into the target pane.
-   *
-   * @param {string} paneSashId - The Sash ID of the pane that the glass moves into
-   * @param {'top'|'right'|'bottom'|'left'} position - The position of the glass relative to the target pane
-   * @param {Object} glassProps - The glass properties
-   *
-   */
-  addGlass(t, i, n) {
-    const s = this.addPane(t, { position: i }), o = new W({ ...n, sash: s, binaryWindow: this });
-    s.domNode.append(o.domNode);
-  }
-  /**
-   * Remove glass from or together with the pane
+   * Add a pane with glass into the target pane.
    *
-   * @param {string} paneSashId - The Sash ID of the pane that contains the glass
-   * @param {boolean} removePane - Whether to remove the pane together
+   * @param {string} targetPaneId - The Sash ID of the target pane
+   * @param {Object} props - The pane and glass properties grouped together
+   * @returns {Sash} - The newly created Sash
    */
-  removeGlass(t, i) {
-    if (i)
-      this.removePane(t);
-    else {
-      const n = this.rootSash.getById(t);
-      if (!n) throw new Error("[bwin] Pane not found when removing glass");
-      const s = n.domNode.querySelector("bw-glass");
-      s && s.remove();
-    }
+  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;
   }
 }
-O.assemble(Mt, Rt, At);
+_.assemble(Lt, Bt, $t);
 const y = 4;
-function Pt({ sash: e }) {
-  var l;
-  const t = M(), i = e.leftChild, n = e.topChild;
-  let s, o, h, a, d, c;
-  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, c = !0), L(() => {
+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(() => {
     e.domNode = t.current;
-  }, []), /* @__PURE__ */ g.createElement(
+  }, []), /* @__PURE__ */ f.createElement(
     "bw-muntin",
     {
       "sash-id": e.id,
@@ -1030,78 +1014,92 @@ function Pt({ sash: e }) {
         left: a
       },
       vertical: d,
-      horizontal: c,
-      resizable: ((l = e.store) == null ? void 0 : l.resizable) === !1 ? "false" : "true",
+      horizontal: l,
+      resizable: ((c = e.store) == null ? void 0 : c.resizable) === !1 ? "false" : "true",
       ref: t
     }
   );
 }
-function xt({
+function Wt({
   sash: e,
   bwin: t
 }) {
-  var l, p, u, f, w;
-  const i = M(), { left: n, top: s, width: o, height: h, id: a, position: d } = e;
-  L(() => {
+  var c, u, g, m, w;
+  const i = A(), { left: n, top: s, width: o, height: h, id: a, position: d } = e;
+  W(() => {
     e.domNode = i.current;
   }, []);
-  const c = ((l = e.store) == null ? void 0 : l.actions) === void 0 ? I : Array.isArray(e.store.actions) ? e.store.actions : [];
-  return /* @__PURE__ */ g.createElement(
+  const l = ((c = e.store) == null ? void 0 : c.actions) === void 0 ? F : Array.isArray(e.store.actions) ? e.store.actions : [];
+  return /* @__PURE__ */ f.createElement(
     "bw-pane",
     {
       "sash-id": a,
       position: d,
       style: { left: n, top: s, width: o, height: h },
-      "can-drop": ((p = e.store) == null ? void 0 : p.droppable) === !1 ? "false" : "true",
+      "can-drop": ((u = e.store) == null ? void 0 : u.droppable) === !1 ? "false" : "true",
       ref: i
     },
-    /* @__PURE__ */ g.createElement("bw-glass", null, /* @__PURE__ */ g.createElement(
+    /* @__PURE__ */ f.createElement("bw-glass", null, /* @__PURE__ */ f.createElement(
       "bw-glass-header",
       {
-        "can-drag": ((u = e.store) == null ? void 0 : u.draggable) === !1 ? "false" : "true"
+        "can-drag": ((g = e.store) == null ? void 0 : g.draggable) === !1 ? "false" : "true"
       },
-      ((f = e.store) == null ? void 0 : f.title) && /* @__PURE__ */ g.createElement("bw-glass-title", null, e.store.title),
-      c.length > 0 && /* @__PURE__ */ g.createElement("bw-glass-action-container", null, c.map((A, k) => {
-        const F = A.className ? `bw-glass-action ${A.className}` : "bw-glass-action";
-        return /* @__PURE__ */ g.createElement(
+      ((m = e.store) == null ? void 0 : m.title) && /* @__PURE__ */ f.createElement("bw-glass-title", null, e.store.title),
+      l.length > 0 && /* @__PURE__ */ f.createElement("bw-glass-action-container", null, l.map((p, x) => {
+        const D = p.className ? `bw-glass-action ${p.className}` : "bw-glass-action";
+        return /* @__PURE__ */ f.createElement(
           "button",
           {
-            className: F,
-            key: k,
-            onClick: (_) => A.onClick(_, t)
+            className: D,
+            key: x,
+            onClick: ($) => p.onClick($, t)
           },
-          A.label
+          p.label
         );
       }))
-    ), /* @__PURE__ */ g.createElement("bw-glass-content", null, (w = e.store) == null ? void 0 : w.content))
+    ), /* @__PURE__ */ f.createElement("bw-glass-content", null, (w = e.store) == null ? void 0 : w.content))
   );
 }
-const $t = q((e, t) => {
-  const i = M(), n = M(), { panes: s, ...o } = e, h = { ...o, children: s }, a = new O(h), d = [], c = [];
-  return a.rootSash.walk((l) => {
-    l.children.length > 0 ? d.push(l) : c.push(l);
-  }), L(() => {
-    const l = i.current;
-    l != null && l.parentElement && (a.windowElement = l, a.containerElement = l.parentElement, a.sillElement = n.current, a.enableFeatures());
-  }, []), U(
+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 = [];
+  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(
     t,
     () => ({
-      binaryWindow: a
+      fit: l.fit.bind(l),
+      removePane: l.removePane.bind(l),
+      addPane: w
     }),
     []
-  ), /* @__PURE__ */ g.createElement(
+  );
+  const g = /* @__PURE__ */ f.createElement(
     "bw-window",
     {
-      "sash-id": a.rootSash.id,
-      style: { width: a.rootSash.width, height: a.rootSash.height },
+      "root-sash-id": l.rootSash.id,
+      style: { width: l.rootSash.width, height: l.rootSash.height },
       ref: i
     },
-    c.map((l) => /* @__PURE__ */ g.createElement(xt, { key: l.id, sash: l, bwin: a })),
-    d.map((l) => /* @__PURE__ */ g.createElement(Pt, { key: l.id, sash: l })),
-    /* @__PURE__ */ g.createElement("bw-sill", { ref: n })
-  );
-});
+    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 })
+  ), m = V(() => g, []);
+  function w(p, x) {
+    const { content: D, ...$ } = x, q = l.addPane(p, $), U = document.querySelector(
+      `bw-pane[sash-id="${q.id}"] bw-glass-content`
+    );
+    o((X) => [
+      ...X || [],
+      { node: D, container: U }
+    ]);
+  }
+  return /* @__PURE__ */ f.createElement(f.Fragment, null, m, s == null ? void 0 : s.map((p) => Z(p.node, p.container)));
+}), Ot = "0.3.0";
 export {
-  I as BUILTIN_ACTIONS,
-  $t as Window
+  F as BUILTIN_ACTIONS,
+  It as Window,
+  Ot as version
 };