react-bwin 0.3.1 → 0.3.2

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,4 +1,4 @@
-import f, { useRef as A, useEffect as W, forwardRef as Y, useState as j, useImperativeHandle as K, useMemo as V } from "react";
+import f, { useRef as M, 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) {
@@ -284,8 +284,8 @@ class b {
     if (h && s) {
       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 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;
+      const m = h.calcMinWidth(), w = s.calcMinWidth();
+      i < 0 && (c < m && u > w ? (c = h.width, u = l - c, g = h.left + c) : u < w && c > m && (u = s.width, c = l - u, g = h.left + c)), h.width = c, s.width = u, s.left = g;
     }
     n && o && (n.width += i, o.width += i);
   }
@@ -300,8 +300,8 @@ class b {
       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;
       if (i < 0) {
-        const w = n.calcMinHeight(), m = o.calcMinHeight();
-        c < w && u > m ? (c = n.height, u = l - c, g = n.top + c) : u < m && c > w && (u = o.height, c = l - u, g = n.top + c);
+        const m = n.calcMinHeight(), w = o.calcMinHeight();
+        c < m && u > w ? (c = n.height, u = l - c, g = n.top + c) : u < w && c > m && (u = o.height, c = l - u, g = n.top + c);
       }
       n.height = c, o.height = u, o.top = g;
     }
@@ -482,7 +482,7 @@ class gt extends b {
     super({ ...t, position: r.Root }), Object.assign(this, T);
   }
 }
-function M(e) {
+function A(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,7 +490,7 @@ 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 }) {
+function mt(e, { size: t }) {
   const i = C(t);
   let n = e.width / 2;
   i && (i < 1 ? n = e.width * i : n = i);
@@ -506,10 +506,10 @@ function wt(e, { size: t }) {
     width: e.width - n,
     height: e.height,
     position: r.Right
-  }), h = M(o);
+  }), h = A(o);
   return o.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), s;
 }
-function mt(e, { size: t }) {
+function wt(e, { size: t }) {
   const i = C(t);
   let n = e.width / 2;
   i && (i < 1 ? n = e.width * i : n = i);
@@ -525,7 +525,7 @@ function mt(e, { size: t }) {
     width: n,
     height: e.height,
     position: r.Right
-  }), h = M(s);
+  }), h = A(s);
   return s.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), o;
 }
 function bt(e, { size: t }) {
@@ -544,7 +544,7 @@ function bt(e, { size: t }) {
     width: e.width,
     height: e.height - n,
     position: r.Bottom
-  }), h = M(o);
+  }), h = A(o);
   return o.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), s;
 }
 function Et(e, { size: t }) {
@@ -563,14 +563,14 @@ function Et(e, { size: t }) {
     width: e.width,
     height: n,
     position: r.Bottom
-  }), h = M(s);
+  }), h = A(s);
   return s.domNode = h, z(h, e.domNode), e.addChild(s), e.addChild(o), o;
 }
 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.Right)
+    return wt(e, { size: i });
   if (t === r.Top)
     return bt(e, { size: i });
   if (t === r.Bottom)
@@ -578,19 +578,19 @@ function yt(e, { position: t, size: i, minWidth: n, minHeight: s }) {
 }
 const vt = {
   createPane(e) {
-    const t = M(e);
+    const t = A(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 = tt(), 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
@@ -618,7 +618,7 @@ const vt = {
     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 G(e) {
+function I(e) {
   const t = document.createElement("pre");
   t.style.fontSize = "10px";
   const i = `
@@ -710,7 +710,7 @@ const Nt = {
       this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
     });
   }
-}, Mt = {
+}, At = {
   activeDropPaneEl: null,
   // Intended to be overridden in `BinaryWindow` class
   onPaneDrop(e, t) {
@@ -730,10 +730,10 @@ 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;
+}, Mt = !1;
 class O {
   constructor(t) {
-    E(this, "windowElement", null), E(this, "containerElement", null), E(this, "debug", At);
+    E(this, "windowElement", null), E(this, "containerElement", null), E(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;
   }
@@ -758,7 +758,7 @@ O.assemble(
   zt,
   vt,
   Ct,
-  Mt,
+  At,
   St
 );
 function k(e) {
@@ -821,17 +821,17 @@ const F = [Pt, xt, Rt], $t = {
         a > i && (i = a, n = s);
       }
     }), n) {
-      const s = e.bwOriginalPosition, o = R(n);
-      let h = 0;
+      const s = e.bwOriginalPosition, o = R(n), h = n.getAttribute("sash-id"), a = this.rootSash.getById(h);
+      let d = 0;
       if (s === r.Left || s === r.Right)
-        h = t.width >= o.width ? o.width / 2 : t.width;
+        d = o.width - t.width < a.minWidth ? o.width / 2 : t.width;
       else if (s === r.Top || s === r.Bottom)
-        h = t.height >= o.height ? o.height / 2 : t.height;
+        d = o.height - t.height < a.minHeight ? 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
+        size: d
       }).domNode.append(e.bwGlassElement);
     }
   },
@@ -870,7 +870,7 @@ const F = [Pt, xt, Rt], $t = {
   actions: void 0,
   draggable: !0
 };
-class I {
+class G {
   constructor({
     title: t = S.title,
     content: i = S.content,
@@ -979,7 +979,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 G({ ...i.store, sash: i, binaryWindow: this });
     t.innerHTML = "", t.append(n.domNode), this.debug && n.contentElement.prepend(`${i.id}`);
   }
   onPaneUpdate() {
@@ -992,7 +992,7 @@ 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 });
+    const { position: n, size: s, ...o } = i, h = super.addPane(t, { position: n, size: s }), a = new G({ ...o, sash: h, binaryWindow: this });
     return h.domNode.append(a.domNode), h;
   }
 }
@@ -1000,7 +1000,7 @@ _.assemble(Lt, Bt, $t);
 const y = 4;
 function Tt({ sash: e }) {
   var c;
-  const t = A(), i = e.leftChild, n = e.topChild;
+  const t = M(), 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;
@@ -1025,8 +1025,8 @@ function Wt({
   sash: e,
   bwin: t
 }) {
-  var c, u, g, w, m;
-  const i = A(), { left: n, top: s, width: o, height: h, id: a, position: d } = e;
+  var c, u, g, m, w;
+  const i = M(), { left: n, top: s, width: o, height: h, id: a, position: d } = e;
   W(() => {
     e.domNode = i.current;
   }, []);
@@ -1045,7 +1045,7 @@ function Wt({
       {
         "can-drag": ((g = e.store) == null ? void 0 : g.draggable) === !1 ? "false" : "true"
       },
-      ((w = e.store) == null ? void 0 : w.title) && /* @__PURE__ */ f.createElement("bw-glass-title", null, e.store.title),
+      ((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(
@@ -1058,11 +1058,11 @@ function Wt({
           p.label
         );
       }))
-    ), /* @__PURE__ */ f.createElement("bw-glass-content", null, (m = e.store) == null ? void 0 : m.content))
+    ), /* @__PURE__ */ f.createElement("bw-glass-content", null, (w = e.store) == null ? void 0 : w.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 Gt = Y((e, t) => {
+  const i = M(), n = M(), [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(() => {
@@ -1073,7 +1073,7 @@ const It = Y((e, t) => {
     () => ({
       fit: l.fit.bind(l),
       removePane: l.removePane.bind(l),
-      addPane: m
+      addPane: w
     }),
     []
   );
@@ -1087,8 +1087,8 @@ 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, []);
-  function m(p, x) {
+  ), 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`
     );
@@ -1097,10 +1097,10 @@ const It = Y((e, t) => {
       { node: D, container: U }
     ]);
   }
-  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, m, s == null ? void 0 : s.map((p) => Z(p.node, p.container)));
+}), Ot = "0.3.2";
 export {
   F as BUILTIN_ACTIONS,
-  It as Window,
+  Gt as Window,
   Ot as version
 };

package/dist/react-bwin.umd.js

@@ -5,4 +5,4 @@ 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 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 I{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)})}}I.assemble(gt,ft,pt,wt,bt,mt);function G(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=G(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 B=[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),h=n.getAttribute("sash-id"),a=this.rootSash.getById(h);let d=0;if(s===r.Left||s===r.Right)d=o.width-t.width<a.minWidth?o.width/2:t.width;else if(s===r.Top||s===r.Bottom)d=o.height-t.height<a.minHeight?o.height/2:t.height;else throw new Error("[bwin] Invalid position when restoring glass");this.addPane(n.getAttribute("sash-id"),{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 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?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=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=G(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 I{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?B: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,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,...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,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=>_.createPortal(p.node,p.container)))}),xt="0.3.2";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.2",
   "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.2",
     "prettier": "^3.4.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",