react-bwin 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Bhjs Dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# React Binary Window
+
+A tiling window manager in React based on [Binary Window](https://github.com/bhjsdev/bwin) library.

package/dist/react-bwin.css

@@ -0,0 +1 @@
+:root{--bw-font-family: system-ui;--bw-font-size: 14px;--bw-drop-area-bg-color: hsl(0, 0%, 0%, .05);--bw-glass-clearance: 2px;--bw-glass-border-radius: 2px;--bw-glass-border-color: hsl(0, 0%, 10%);--bw-glass-border-color-disabled: hsl(0, 0%, 80%);--bw-glass-bg-color-disabled: hsl(0, 0%, 100%);--bw-glass-header-height: 30px;--bw-glass-header-gap: 4px;--bw-glass-header-bg-color: hsl(0, 0%, 97%)}.body--bw-resize-x{-webkit-user-select:none;user-select:none;cursor:ew-resize}.body--bw-resize-y{-webkit-user-select:none;user-select:none;cursor:ns-resize}bw-window{position:absolute;display:block;box-sizing:border-box}bw-pane{position:absolute;overflow:auto;box-sizing:border-box;background-color:#f2f2f2}bw-pane[drop-area]:before{content:"";position:absolute;background-color:var(--bw-drop-area-bg-color)}bw-pane[drop-area=top]:before{top:0;left:0;right:0;height:50%}bw-pane[drop-area=right]:before{top:0;right:0;bottom:0;width:50%}bw-pane[drop-area=bottom]:before{bottom:0;left:0;right:0;height:50%}bw-pane[drop-area=left]:before{top:0;left:0;bottom:0;width:50%}bw-pane[drop-area=center]:before{top:0;left:0;right:0;bottom:0}bw-muntin{box-sizing:border-box;position:absolute;background-color:#fff}bw-muntin[horizontal]{cursor:ns-resize}bw-muntin[vertical]{cursor:ew-resize}bw-muntin[resizable=false]{cursor:auto}bw-window:has(bw-glass) bw-pane{background-color:transparent}bw-window:has(bw-glass) bw-pane[drop-area]:before{z-index:1}bw-window:has(bw-glass) bw-pane[drop-area=top]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=right]:before{top:var(--bw-glass-clearance);right:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=bottom]:before{bottom:var(--bw-glass-clearance);left:var(--bw-glass-clearance);right:var(--bw-glass-clearance);height:50%}bw-window:has(bw-glass) bw-pane[drop-area=left]:before{top:var(--bw-glass-clearance);left:var(--bw-glass-clearance);bottom:var(--bw-glass-clearance);width:50%}bw-window:has(bw-glass) bw-pane[drop-area=center]:before{inset:var(--bw-glass-clearance)}bw-window:has(bw-glass) bw-muntin{background-color:transparent}bw-glass{position:absolute;inset:var(--bw-glass-clearance);display:flex;flex-direction:column;border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);background-color:#fff;font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box}bw-glass[draggable=true]:active{cursor:move;opacity:.3}bw-glass-header{white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;gap:var(--bw-glass-header-gap);padding-inline:var(--bw-glass-header-gap);flex-basis:var(--bw-glass-header-height);border-bottom:1px solid var(--bw-glass-border-color);border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);background-color:var(--bw-glass-header-bg-color)}bw-glass-tab-container{align-self:flex-end;display:flex;gap:var(--bw-glass-header-gap)}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-bottom:none;border-top-left-radius:var(--bw-glass-border-radius);border-top-right-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-tab:hover{background-color:#fff}.bw-glass-tab:active{transform:translateY(1px)}bw-glass-action-container{margin-left:auto;display:flex;gap:2px}.bw-glass-action{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-radius:var(--bw-glass-border-radius);cursor:pointer}.bw-glass-action:hover{background-color:#fff}.bw-glass-action:active{transform:scale(.95)}.bw-glass-action--close:before{content:"✕"}.bw-glass-action--close:disabled{border:1px solid var(--bw-glass-border-color-disabled);background-color:var(--bw-glass-bg-color-disabled);cursor:not-allowed}.bw-glass-action--close:disabled:hover{background-color:var(--bw-glass-bg-color-disabled)}.bw-glass-action--close:disabled:active{transform:scale(1)}bw-glass-content{display:block;box-sizing:border-box;overflow:auto;flex-grow:1}

package/dist/react-bwin.d.ts

@@ -0,0 +1,87 @@
+declare module 'react-bwin' {
+	export const BUILTIN_ACTIONS: Action[]
+	export const Window: React.FC<WindowProps>
+}
+
+declare global {
+	type Position = 'left' | 'right' | 'top' | 'bottom'
+
+	type Action = {
+		label?: string
+		className?: string
+		onClick: (
+			event: React.MouseEvent<HTMLButtonElement>,
+			bwin: BinaryWindow
+		) => void
+	}
+
+	type Actions = undefined | null | Action[]
+
+	interface Sash {
+		id: string
+		position: Position
+		left: number
+		top: number
+		width: number
+		height: number
+		children: Sash[]
+		domNode?: HTMLElement
+		leftChild?: Sash
+		rightChild?: Sash
+		topChild?: Sash
+		bottomChild?: Sash
+		store?: {
+			actions?: Actions
+			droppable?: boolean
+			draggable?: boolean
+			title?: any
+			content?: any
+			resizable?: boolean
+		}
+		walk(callback: (sash: Sash) => void): void
+	}
+
+	type ConfigNode = {
+		id?: string
+		size?: number
+		position?: Position
+		title?: React.ReactNode
+		content?: React.ReactNode
+		actions?: Actions
+		children?: ConfigNode[]
+		draggable?: boolean
+		droppable?: boolean
+	}
+
+	type ConfigRoot = {
+		id?: string
+		width?: number
+		height?: number
+		fitContainer?: boolean
+		title?: React.ReactNode
+		content?: React.ReactNode
+		children?: ConfigNode[]
+	}
+
+	interface BinaryWindow {
+		new (settings: ConfigRoot): BinaryWindow
+		rootSash: Sash
+		windowElement: HTMLElement
+		containerElement: HTMLElement
+		mount(container: HTMLElement): void
+		enableFeatures(): void
+	}
+
+	type WindowProps = ConfigRoot
+}
+
+export {
+	Position,
+	Action,
+	Actions,
+	Sash,
+	ConfigNode,
+	ConfigRoot,
+	BinaryWindow,
+	WindowProps,
+}

package/dist/react-bwin.js

@@ -0,0 +1,1011 @@
+import g, { useRef as x, useEffect as $ } from "react";
+var F = Object.defineProperty, U = (e, t, i) => t in e ? F(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 X(e = 0.7, t = 128) {
+  const i = 256 - t, n = Math.floor(Math.random() * i + t), o = Math.floor(Math.random() * i + t), s = Math.floor(Math.random() * i + t), r = Math.max(0.5, Math.random() * e);
+  return `rgba(${n}, ${o}, ${s}, ${r})`;
+}
+function P(e = 2, t = 3) {
+  if (e < 0 || t < 0)
+    throw new Error("Parameters must be non-negative numbers");
+  const i = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", n = "0123456789";
+  let o = "";
+  for (let s = 0; s < e; s++) {
+    const r = Math.floor(Math.random() * i.length);
+    o += i[r];
+  }
+  o += "-";
+  for (let s = 0; s < t; s++) {
+    const r = Math.floor(Math.random() * n.length);
+    o += n[r];
+  }
+  return o;
+}
+function v(e, t) {
+  for (; t.firstChild; )
+    e.append(t.firstChild);
+}
+function Y(e, t) {
+  const i = document.createElement("div");
+  v(i, e), v(e, t), v(t, i);
+}
+function R(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 j(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 C(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));
+}
+const h = {
+  Top: "top",
+  Right: "right",
+  Bottom: "bottom",
+  Left: "left",
+  Center: "center",
+  Root: "root",
+  Unknown: "unknown",
+  Outside: "outside"
+};
+function Z(e) {
+  switch (e) {
+    case h.Top:
+      return h.Bottom;
+    case h.Right:
+      return h.Left;
+    case h.Bottom:
+      return h.Top;
+    case h.Left:
+      return h.Right;
+    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: o, height: s } = n, r = t - n.left, a = i - n.top;
+  if (r < 0 || r > o || a < 0 || a > s)
+    return h.Outside;
+  const l = 0.3, c = J({ width: o, height: s, x: r }), d = tt({ width: o, height: s, x: r }), p = Q({ width: o, height: s, y: a }), u = et({ width: o, height: s, y: a });
+  return r < o * (0.5 - l / 2) && a > c && a < d ? h.Left : r > o * (0.5 + l / 2) && a < c && a > d ? h.Right : a < s * (0.5 - l / 2) && r > p && r < u ? h.Top : a > s * (0.5 + l / 2) && r < p && r > u ? h.Bottom : r > o * (0.5 - l / 2) && r < o * (0.5 + l / 2) && a > s * (0.5 - l / 2) && a < s * (0.5 + l / 2) ? h.Center : h.Unknown;
+}
+const y = {
+  top: 0,
+  left: 0,
+  width: 100,
+  height: 100,
+  // Initial min values, real min width/height is calculated based on children
+  minWidth: 50,
+  minHeight: 50
+};
+class m {
+  constructor({
+    top: t = y.top,
+    left: i = y.left,
+    width: n = y.width,
+    height: o = y.height,
+    minWidth: s = y.minWidth,
+    minHeight: r = y.minHeight,
+    domNode: a = null,
+    store: l = {},
+    position: c,
+    id: d
+  } = y) {
+    if (this.id = d ?? P(), !c)
+      throw new Error("[bwin] Sash position is required");
+    this.position = c, this.domNode = a, this._top = t, this._left = i, this._width = n, this._height = o, this.children = [], this.minWidth = s, this.minHeight = r, this.store = l;
+  }
+  walk(t) {
+    this.children.forEach((i) => i.walk(t)), t(this);
+  }
+  isLeaf() {
+    return this.children.length === 0;
+  }
+  // A sash that doesn't split is a leaf, in UI it's a pane
+  isSplit() {
+    return this.children.length > 0;
+  }
+  isLeftRightSplit() {
+    return this.children.some(
+      (t) => t.position === h.Left || t.position === h.Right
+    );
+  }
+  isTopBottomSplit() {
+    return this.children.some(
+      (t) => t.position === h.Top || t.position === h.Bottom
+    );
+  }
+  get leftChild() {
+    return this.children.find((t) => t.position === h.Left);
+  }
+  get rightChild() {
+    return this.children.find((t) => t.position === h.Right);
+  }
+  get topChild() {
+    return this.children.find((t) => t.position === h.Top);
+  }
+  get bottomChild() {
+    return this.children.find((t) => t.position === h.Bottom);
+  }
+  getChildren() {
+    let t = null, i = null, n = null, o = null;
+    for (const s of this.children)
+      s.position === h.Left ? t = s : s.position === h.Right ? i = s : s.position === h.Top ? n = s : s.position === h.Bottom && (o = s);
+    return [n, i, o, t];
+  }
+  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, o] = this.getChildren();
+    if (o && i) {
+      const s = o.calcMinWidth() + i.calcMinWidth();
+      return Math.max(this.minWidth, s);
+    }
+    if (t && n) {
+      const s = Math.max(t.calcMinWidth(), n.calcMinWidth());
+      return Math.max(this.minWidth, s);
+    }
+  }
+  calcMinHeight() {
+    if (this.isLeaf())
+      return this.minHeight;
+    const [t, i, n, o] = this.getChildren();
+    if (o && i) {
+      const s = Math.max(o.calcMinHeight(), i.calcMinHeight());
+      return Math.max(this.minHeight, s);
+    }
+    if (t && n) {
+      const s = t.calcMinHeight() + n.calcMinHeight();
+      return Math.max(this.minHeight, s);
+    }
+  }
+  // Get self or descendant by id
+  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;
+  }
+  // Get all ids of self and descendants
+  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, o, s, r] = this.getChildren();
+    n && s && (n.top += i, s.top += i), r && o && (r.top += i, o.top += i);
+  }
+  get left() {
+    return this._left;
+  }
+  set left(t) {
+    const i = t - this._left;
+    this._left = t;
+    const [n, o, s, r] = this.getChildren();
+    r && o && (r.left += i, o.left += i), n && s && (n.left += i, s.left += i);
+  }
+  get width() {
+    return this._width;
+  }
+  set width(t) {
+    const i = t - this._width;
+    this._width = t;
+    const [n, o, s, r] = this.getChildren();
+    if (r && o) {
+      const a = r.width + o.width, l = i * (r.width / a), c = a + i;
+      let d = r.width + l, p = c - d, u = o.left + l;
+      const f = r.calcMinWidth(), w = o.calcMinWidth();
+      d < f && p > w ? (d = f, p = c - d, u = r.left + d) : p < w && d > f && (p = w, d = c - p, u = r.left + d), r.width = d, o.width = p, o.left = u;
+    }
+    n && s && (n.width += i, s.width += i);
+  }
+  get height() {
+    return this._height;
+  }
+  set height(t) {
+    const i = t - this._height;
+    this._height = t;
+    const [n, o, s, r] = this.getChildren();
+    if (n && s) {
+      const a = n.height + s.height, l = i * (n.height / a), c = a + i;
+      let d = n.height + l, p = c - d, u = s.top + l;
+      const f = n.calcMinHeight(), w = s.calcMinHeight();
+      d < f && p > w ? (d = f, p = c - d, u = n.top + d) : p < w && d > f && (p = w, d = c - p, u = n.top + d), n.height = d, s.height = p, s.top = u;
+    }
+    r && o && (r.height += i, o.height += i);
+  }
+}
+const L = {
+  size: "50%",
+  position: h.Left
+};
+class M {
+  constructor({
+    parentRect: t,
+    children: i,
+    siblingConfigNode: n,
+    id: o,
+    minWidth: s,
+    minHeight: r,
+    position: a,
+    size: l,
+    ...c
+  }) {
+    E(this, "left"), E(this, "top"), E(this, "width"), E(this, "height"), this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = o, this.minWidth = s, this.minHeight = r, this.position = this.getPosition(a), this.size = this.getSize(l), this.nonCoreData = c, 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 R(t);
+    if (!t) {
+      if (this.siblingConfigNode.size < 1)
+        return 1 - this.siblingConfigNode.size;
+      if (this.siblingConfigNode.position === h.Left || this.siblingConfigNode.position === h.Right)
+        return this.parentRect.width - this.siblingConfigNode.width;
+      if (this.siblingConfigNode.position === h.Top || this.siblingConfigNode.position === h.Bottom)
+        return this.parentRect.height - this.siblingConfigNode.height;
+    }
+    const i = R(t);
+    if (i < 1) {
+      if (i + this.siblingConfigNode.size !== 1)
+        throw new Error("[bwin] Sum of sibling sizes is not equal to 1");
+    } else {
+      if ((this.position === h.Left || this.position === h.Right) && i + this.siblingConfigNode.size !== this.parentRect.width)
+        throw new Error("[bwin] Sum of sibling sizes is not equal to parent width");
+      if ((this.position === h.Top || this.position === h.Bottom) && i + this.siblingConfigNode.size !== this.parentRect.height)
+        throw new Error("[bwin] Sum of sibling sizes is not equal to parent height");
+    }
+    return i;
+  }
+  setBounds() {
+    if (this.position === h.Root)
+      this.left = 0, this.top = 0, this.width = this.parentRect.width, this.height = this.parentRect.height;
+    else if (this.position === h.Left) {
+      const t = this.size < 1 ? this.parentRect.width * this.size : this.size;
+      this.left = this.parentRect.left, this.top = this.parentRect.top, this.width = t, this.height = this.parentRect.height;
+    } else if (this.position === h.Right) {
+      const t = this.size < 1 ? this.parentRect.width * this.size : this.size;
+      this.left = this.parentRect.left + this.parentRect.width - t, this.top = this.parentRect.top, this.width = t, this.height = this.parentRect.height;
+    } else if (this.position === h.Top) {
+      const t = this.size < 1 ? this.parentRect.height * this.size : this.size;
+      this.left = this.parentRect.left, this.top = this.parentRect.top, this.width = this.parentRect.width, this.height = t;
+    } else if (this.position === h.Bottom) {
+      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 (j(t))
+      return t;
+    if (Array.isArray(t))
+      return {
+        children: t
+      };
+    if (typeof t == "string" || typeof t == "number") {
+      const i = R(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: o, minWidth: s, minHeight: r, ...a }) {
+    return new M({
+      parentRect: this,
+      size: t ?? L.size,
+      position: i ?? L.position,
+      children: n,
+      id: o,
+      minWidth: s,
+      minHeight: r,
+      ...a
+    });
+  }
+  createSecondaryConfigNode({ size: t, position: i, children: n, id: o, minWidth: s, minHeight: r, ...a }, l) {
+    return new M({
+      parentRect: this,
+      size: t,
+      position: i,
+      children: n,
+      siblingConfigNode: l,
+      id: o,
+      minWidth: s,
+      minHeight: r,
+      ...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 o, s;
+    return !i.size && !i.position && n ? (n.position || (n.position = h.Right), o = this.createPrimaryConfigNode(n), s = this.createSecondaryConfigNode(
+      i,
+      o
+    )) : (o = this.createPrimaryConfigNode(i), s = this.createSecondaryConfigNode(
+      n,
+      o
+    )), o && s && (t.children.push(o.buildSashTree()), t.children.push(s.buildSashTree())), t;
+  }
+}
+const A = {
+  width: 333,
+  height: 333
+}, D = {
+  fitContainer: !1
+};
+class nt extends M {
+  constructor({
+    id: t,
+    children: i,
+    width: n = A.width,
+    height: o = A.height,
+    fitContainer: s = D.fitContainer,
+    ...r
+  } = {
+    ...A,
+    ...D
+  }) {
+    super({
+      id: t,
+      children: i,
+      size: NaN,
+      position: h.Root,
+      parentRect: { width: n, height: o },
+      ...r
+    }), this.fitContainer = s;
+  }
+}
+class st extends m {
+  constructor(t = y) {
+    super({ ...t, position: h.Root }), Object.assign(this, D);
+  }
+}
+const ot = {
+  createPane(e) {
+    const t = S(e);
+    return e.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
+  },
+  // Intended to be overridden
+  onPaneCreate(e, t) {
+    t.store.content && e.append(C(t.store.content)), this != null && this.debug && (e.style.backgroundColor = X(), e.innerHTML = "", e.append(T(e)));
+  },
+  updatePane(e) {
+    return ht(e);
+  },
+  // Intended to be overridden
+  onPaneUpdate(e, t) {
+    this != null && this.debug && (e.innerHTML = "", e.append(T(e)));
+  },
+  /**
+   * Add a pane into the target pane. The two panes become next to each other
+   *
+   * @param {string} targetPaneSashId - The Sash ID of the target pane that the new pane moves into
+   * @param {'top'|'right'|'bottom'|'left'} position - The position of the new pane relative to the target pane
+   * @returns {Sash} - The newly created sash
+   */
+  addPane(e, t) {
+    if (!t) throw new Error("[bwin] Position is required when adding pane");
+    const i = this.rootSash.getById(e);
+    if (!i) throw new Error("[bwin] Parent sash not found when adding pane");
+    const n = ct(i, t);
+    return i.id = P(), this.update(), n;
+  },
+  /**
+   * Remove a pane
+   *
+   * @param {string} sashId - The Sash ID of the pane to be removed
+   */
+  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 = P(), i.children.length === 0 ? (t.domNode = i.domNode, t.domNode.setAttribute("sash-id", t.id), t.children = []) : (t.children = i.children, i.position === h.Left ? i.width = t.width : i.position === h.Right ? (i.width = t.width, i.left = t.left) : i.position === h.Top ? i.height = t.height : i.position === h.Bottom && (i.height = t.height, i.top = t.top)), this.update();
+  }
+};
+function S(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 ht(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 rt(e) {
+  const t = new m({
+    top: e.top,
+    left: e.left,
+    width: e.width / 2,
+    height: e.height,
+    position: h.Left
+  }), i = new m({
+    top: e.top,
+    left: e.left + t.width,
+    width: e.width / 2,
+    height: e.height,
+    position: h.Right
+  }), n = S(i);
+  return i.domNode = n, v(n, e.domNode), e.addChild(t), e.addChild(i), t;
+}
+function at(e) {
+  const t = new m({
+    top: e.top,
+    left: e.left,
+    width: e.width / 2,
+    height: e.height,
+    position: h.Left
+  }), i = S(t);
+  t.domNode = i, v(i, e.domNode);
+  const n = new m({
+    top: e.top,
+    left: e.left + t.width,
+    width: e.width / 2,
+    height: e.height,
+    position: h.Right
+  });
+  return e.addChild(t), e.addChild(n), n;
+}
+function lt(e) {
+  const t = new m({
+    top: e.top,
+    left: e.left,
+    width: e.width,
+    height: e.height / 2,
+    position: h.Top
+  }), i = new m({
+    top: e.top + t.height,
+    left: e.left,
+    width: e.width,
+    height: e.height / 2,
+    position: h.Bottom
+  }), n = S(i);
+  return i.domNode = n, v(n, e.domNode), e.addChild(t), e.addChild(i), t;
+}
+function dt(e) {
+  const t = new m({
+    top: e.top,
+    left: e.left,
+    width: e.width,
+    height: e.height / 2,
+    position: h.Top
+  }), i = S(t);
+  t.domNode = i, v(i, e.domNode);
+  const n = new m({
+    top: e.top + t.height,
+    left: e.left,
+    width: e.width,
+    height: e.height / 2,
+    position: h.Bottom
+  });
+  return e.addChild(t), e.addChild(n), n;
+}
+function ct(e, t) {
+  if (t === h.Left)
+    return rt(e);
+  if (t === h.Right)
+    return at(e);
+  if (t === h.Top)
+    return lt(e);
+  if (t === h.Bottom)
+    return dt(e);
+}
+function T(e) {
+  const t = document.createElement("pre");
+  t.style.fontSize = "10px";
+  const i = `
+id: ${e.getAttribute("sash-id")}
+top: ${e.style.top}
+left: ${e.style.left}
+width: ${e.style.width}
+height: ${e.style.height}
+position: ${e.getAttribute("position")}
+`;
+  return t.innerHTML = i.trim(), t;
+}
+const pt = {
+  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;
+  },
+  glaze(e) {
+    this.rootSash.walk((t) => {
+      let i = null;
+      t.children.length > 0 ? (i = this.createMuntin(t), this.onMuntinCreate(i, t), e.append(i)) : (i = this.createPane(t), this.onPaneCreate(i, t), e.prepend(i)), t.domNode = i;
+    });
+  },
+  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));
+    });
+  }
+}, ut = {
+  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) {
+  }
+}, gt = {
+  fitContainer: !1,
+  enableFitContainer() {
+    new ResizeObserver((e) => {
+      for (const t of e)
+        t.target === this.containerElement && this.fitContainer && (this.rootSash.width = t.contentRect.width, this.rootSash.height = t.contentRect.height, this.update());
+    }).observe(this.containerElement);
+  }
+}, ft = {
+  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, o] = this.activeMuntinSash.getChildren(), s = this.activeMuntinSash.isLeftRightSplit(), r = this.activeMuntinSash.isTopBottomSplit();
+      if (s && o && i) {
+        const a = e.pageX - this.lastX, l = o.width + a, c = i.width - a;
+        if (l <= o.calcMinWidth() || c <= i.calcMinWidth())
+          return;
+        o.width = l, i.width = c, i.left = i.left + a, this.update(), this.lastX = e.pageX;
+      } else if (r && t && n) {
+        const a = e.pageY - this.lastY, l = t.height + a, c = n.height - a;
+        if (l <= t.calcMinHeight() || c <= n.calcMinHeight())
+          return;
+        t.height = l, n.height = c, n.top = n.top + a, this.update(), this.lastY = e.pageY;
+      }
+    }), document.addEventListener("mouseup", () => {
+      this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
+    });
+  }
+}, wt = {
+  activeDropPaneEl: null,
+  // Intended to be overridden in `BinaryWindow` class
+  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;
+    });
+  }
+};
+class B {
+  constructor(t) {
+    E(this, "windowElement", null), E(this, "containerElement", null), E(this, "debug", !1);
+    let i = null;
+    t instanceof st ? (i = t, this.rootSash = t) : (i = new nt(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
+  }
+  // Features can work independently to each other
+  enableFeatures() {
+    this.enableResize(), this.enableDrop(), this.fitContainer && this.enableFitContainer();
+  }
+  mount(t) {
+    const i = this.createWindow();
+    this.glaze(i), this.containerElement = t, this.containerElement.append(i), this.windowElement = i, this.enableFeatures();
+  }
+  static assemble(...t) {
+    t.forEach((i) => {
+      K(this.prototype, i);
+    });
+  }
+}
+B.assemble(
+  pt,
+  ut,
+  ot,
+  gt,
+  wt,
+  ft
+);
+function H(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 I = "bw-glass-action--close", G = [
+  {
+    label: "",
+    className: I,
+    onClick: (e, t) => {
+      const i = H(e.target);
+      t.removePane(i);
+    }
+  }
+], N = {
+  title: null,
+  content: null,
+  tabs: [],
+  actions: void 0,
+  draggable: !0
+};
+class W {
+  constructor({
+    title: t = N.title,
+    content: i = N.content,
+    tabs: n = N.tabs,
+    actions: o = N.actions,
+    draggable: s = N.draggable,
+    sash: r,
+    binaryWindow: a
+  }) {
+    E(this, "domNode"), this.title = t, this.content = i, this.tabs = n, this.actions = o, this.sash = r, this.draggable = s, 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 o = document.createElement("bw-glass-title");
+      o.append(C(this.title)), t.append(o);
+    }
+    t.setAttribute("can-drag", this.draggable), t.append(this.createActions());
+    const i = document.createElement("bw-glass-content"), n = C(this.content);
+    n && i.append(n), this.domNode = document.createElement("bw-glass"), this.domNode.append(t, i);
+  }
+  createTabs() {
+    const t = document.createElement("bw-glass-tab-container");
+    for (const i of this.tabs) {
+      const n = (i == null ? void 0 : i.label) ?? i, o = C(`<button class="bw-glass-tab">${n}</button>`);
+      t.append(o);
+    }
+    return t;
+  }
+  createActions() {
+    const t = document.createElement("bw-glass-action-container"), i = this.actions === void 0 ? G : Array.isArray(this.actions) ? this.actions : [];
+    for (const n of i) {
+      const o = (n == null ? void 0 : n.label) ?? n, s = n.className ? `bw-glass-action ${n.className}` : "bw-glass-action", r = C(`<button class="${s}">${o}</button>`);
+      typeof n.onClick == "function" && r.addEventListener("click", (a) => {
+        n.onClick(a, this.binaryWindow);
+      }), t.append(r);
+    }
+    return t;
+  }
+  get contentElement() {
+    return this.domNode.querySelector("bw-glass-content");
+  }
+  get headerElement() {
+    return this.domNode.querySelector("bw-glass-header");
+  }
+}
+const mt = {
+  enableObservers() {
+    this.observeCloseButtons();
+  },
+  observeCloseButtons() {
+    const e = `.${I}`;
+    new MutationObserver((t) => {
+      t.forEach((i) => {
+        if (i.type === "childList")
+          if (this.windowElement.querySelectorAll("bw-pane").length === 1) {
+            const n = this.windowElement.querySelector(e);
+            n && n.setAttribute("disabled", "");
+          } else
+            this.windowElement.querySelectorAll(e).forEach((n) => {
+              n.removeAttribute("disabled");
+            });
+      });
+    }).observe(this.windowElement, {
+      childList: !0
+    });
+  }
+}, 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"), o = this.activeDropPaneEl.getAttribute("can-drop") !== "false";
+      Y(n, this.activeDropPaneEl), n.setAttribute("can-drop", o);
+      return;
+    } else {
+      const n = H(this.activeDragGlassEl);
+      this.addPane(t.id, 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);
+    });
+  }
+}, yt = {
+  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 B {
+  enableFeatures() {
+    super.enableFeatures(), this.enableObservers(), this.enableDrag();
+  }
+  onPaneCreate(t, i) {
+    const n = new W({ ...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 o = this.addPane(t, i), s = new W({ ...n, sash: o, binaryWindow: this });
+    o.domNode.append(s.domNode);
+  }
+  /**
+   * Remove glass from or together with the pane
+   *
+   * @param {string} paneSashId - The Sash ID of the pane that contains the glass
+   * @param {boolean} removePane - Whether to remove the pane together
+   */
+  removeGlass(t, i) {
+    if (i)
+      this.removePane(t);
+    else {
+      const n = this.rootSash.getById(t);
+      if (!n) throw new Error("[bwin] Pane not found when removing glass");
+      const o = n.domNode.querySelector("bw-glass");
+      o && o.remove();
+    }
+  }
+}
+k.assemble(mt, bt, yt);
+const b = 4;
+function Et({ sash: e }) {
+  var d;
+  const t = x(), i = e.leftChild, n = e.topChild;
+  let o, s, r, a, l, c;
+  return i ? (o = b, s = e.height - b, r = e.top + b / 2, a = e.left + i.width - b / 2, l = !0) : n && (o = e.width - b, s = b, r = e.top + n.height - b / 2, a = e.left + b / 2, c = !0), $(() => {
+    e.domNode = t.current;
+  }, []), /* @__PURE__ */ g.createElement(
+    "bw-muntin",
+    {
+      "sash-id": e.id,
+      style: {
+        width: o,
+        height: s,
+        top: r,
+        left: a
+      },
+      vertical: l,
+      horizontal: c,
+      resizable: ((d = e.store) == null ? void 0 : d.resizable) === !1 ? "false" : "true",
+      ref: t
+    }
+  );
+}
+function vt({
+  sash: e,
+  bwin: t
+}) {
+  var d, p, u, f, w;
+  const i = x(), { left: n, top: o, width: s, height: r, id: a, position: l } = e;
+  $(() => {
+    e.domNode = i.current;
+  }, []);
+  const c = ((d = e.store) == null ? void 0 : d.actions) === void 0 ? G : Array.isArray(e.store.actions) ? e.store.actions : [];
+  return /* @__PURE__ */ g.createElement(
+    "bw-pane",
+    {
+      "sash-id": a,
+      position: l,
+      style: { left: n, top: o, width: s, height: r },
+      "can-drop": ((p = e.store) == null ? void 0 : p.droppable) === !1 ? "false" : "true",
+      ref: i
+    },
+    /* @__PURE__ */ g.createElement("bw-glass", null, /* @__PURE__ */ g.createElement(
+      "bw-glass-header",
+      {
+        "can-drag": ((u = e.store) == null ? void 0 : u.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((z, _) => {
+        const O = z.className ? `bw-glass-action ${z.className}` : "bw-glass-action";
+        return /* @__PURE__ */ g.createElement(
+          "button",
+          {
+            className: O,
+            key: _,
+            onClick: (q) => z.onClick(q, t)
+          },
+          z.label
+        );
+      }))
+    ), /* @__PURE__ */ g.createElement("bw-glass-content", null, (w = e.store) == null ? void 0 : w.content))
+  );
+}
+function Ct(e) {
+  const t = x(), i = new k(e), n = [], o = [];
+  return i.rootSash.walk((s) => {
+    s.children.length > 0 ? n.push(s) : o.push(s);
+  }), $(() => {
+    const s = t.current;
+    s != null && s.parentElement && (i.windowElement = s, i.containerElement = s.parentElement, i.enableFeatures());
+  }, []), /* @__PURE__ */ g.createElement(
+    "bw-window",
+    {
+      "sash-id": i.rootSash.id,
+      style: { width: i.rootSash.width, height: i.rootSash.height },
+      ref: t
+    },
+    o.map((s) => /* @__PURE__ */ g.createElement(vt, { key: s.id, sash: s, bwin: i })),
+    n.map((s) => /* @__PURE__ */ g.createElement(Et, { key: s.id, sash: s }))
+  );
+}
+export {
+  G as BUILTIN_ACTIONS,
+  Ct as Window
+};

package/dist/react-bwin.umd.cjs

@@ -0,0 +1,8 @@
+(function(b,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],u):(b=typeof globalThis<"u"?globalThis:b||self,u(b.ReactBinaryWindow={},b.React))})(this,function(b,u){"use strict";var k=Object.defineProperty,O=(e,t,i)=>t in e?k(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,y=(e,t,i)=>O(e,typeof t!="symbol"?t+"":t,i);function _(e=.7,t=128){const i=256-t,n=Math.floor(Math.random()*i+t),o=Math.floor(Math.random()*i+t),s=Math.floor(Math.random()*i+t),r=Math.max(.5,Math.random()*e);return`rgba(${n}, ${o}, ${s}, ${r})`}function P(e=2,t=3){if(e<0||t<0)throw new Error("Parameters must be non-negative numbers");const i="ABCDEFGHIJKLMNOPQRSTUVWXYZ",n="0123456789";let o="";for(let s=0;s<e;s++){const r=Math.floor(Math.random()*i.length);o+=i[r]}o+="-";for(let s=0;s<t;s++){const r=Math.floor(Math.random()*n.length);o+=n[r]}return o}function N(e,t){for(;t.firstChild;)e.append(t.firstChild)}function q(e,t){const i=document.createElement("div");N(i,e),N(e,t),N(t,i)}function R(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 F(e){return e!==null&&typeof e=="object"&&!Array.isArray(e)&&Object.getPrototypeOf(e)===Object.prototype}function U(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 j(e){const t=document.createElement("template");return t.innerHTML=e.trim(),t.content}function C(e){if(e==null||e==="")return null;if(typeof e=="string")try{const t=j(e);return t.childNodes.length===1?t.firstChild:t}catch{return document.createTextNode(e)}return e instanceof Node?e:document.createTextNode(String(e))}const h={Top:"top",Right:"right",Bottom:"bottom",Left:"left",Center:"center",Root:"root",Unknown:"unknown",Outside:"outside"};function X(e){switch(e){case h.Top:return h.Bottom;case h.Right:return h.Left;case h.Bottom:return h.Top;case h.Left:return h.Right;default:throw new Error(`[bwin] Invalid position: ${e}`)}}function Y({width:e,height:t,x:i}){return t/e*i}function K({width:e,height:t,y:i}){return e/t*i}function V({width:e,height:t,x:i}){return t-t/e*i}function Z({width:e,height:t,y:i}){return e-e/t*i}function J(e,{clientX:t,clientY:i}){const n=e.getBoundingClientRect(),{width:o,height:s}=n,r=t-n.left,a=i-n.top;if(r<0||r>o||a<0||a>s)return h.Outside;const l=.3,c=Y({width:o,height:s,x:r}),d=V({width:o,height:s,x:r}),p=K({width:o,height:s,y:a}),g=Z({width:o,height:s,y:a});return r<o*(.5-l/2)&&a>c&&a<d?h.Left:r>o*(.5+l/2)&&a<c&&a>d?h.Right:a<s*(.5-l/2)&&r>p&&r<g?h.Top:a>s*(.5+l/2)&&r<p&&r>g?h.Bottom:r>o*(.5-l/2)&&r<o*(.5+l/2)&&a>s*(.5-l/2)&&a<s*(.5+l/2)?h.Center:h.Unknown}const E={top:0,left:0,width:100,height:100,minWidth:50,minHeight:50};class f{constructor({top:t=E.top,left:i=E.left,width:n=E.width,height:o=E.height,minWidth:s=E.minWidth,minHeight:r=E.minHeight,domNode:a=null,store:l={},position:c,id:d}=E){if(this.id=d??P(),!c)throw new Error("[bwin] Sash position is required");this.position=c,this.domNode=a,this._top=t,this._left=i,this._width=n,this._height=o,this.children=[],this.minWidth=s,this.minHeight=r,this.store=l}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===h.Left||t.position===h.Right)}isTopBottomSplit(){return this.children.some(t=>t.position===h.Top||t.position===h.Bottom)}get leftChild(){return this.children.find(t=>t.position===h.Left)}get rightChild(){return this.children.find(t=>t.position===h.Right)}get topChild(){return this.children.find(t=>t.position===h.Top)}get bottomChild(){return this.children.find(t=>t.position===h.Bottom)}getChildren(){let t=null,i=null,n=null,o=null;for(const s of this.children)s.position===h.Left?t=s:s.position===h.Right?i=s:s.position===h.Top?n=s:s.position===h.Bottom&&(o=s);return[n,i,o,t]}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,o]=this.getChildren();if(o&&i){const s=o.calcMinWidth()+i.calcMinWidth();return Math.max(this.minWidth,s)}if(t&&n){const s=Math.max(t.calcMinWidth(),n.calcMinWidth());return Math.max(this.minWidth,s)}}calcMinHeight(){if(this.isLeaf())return this.minHeight;const[t,i,n,o]=this.getChildren();if(o&&i){const s=Math.max(o.calcMinHeight(),i.calcMinHeight());return Math.max(this.minHeight,s)}if(t&&n){const s=t.calcMinHeight()+n.calcMinHeight();return Math.max(this.minHeight,s)}}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,o,s,r]=this.getChildren();n&&s&&(n.top+=i,s.top+=i),r&&o&&(r.top+=i,o.top+=i)}get left(){return this._left}set left(t){const i=t-this._left;this._left=t;const[n,o,s,r]=this.getChildren();r&&o&&(r.left+=i,o.left+=i),n&&s&&(n.left+=i,s.left+=i)}get width(){return this._width}set width(t){const i=t-this._width;this._width=t;const[n,o,s,r]=this.getChildren();if(r&&o){const a=r.width+o.width,l=i*(r.width/a),c=a+i;let d=r.width+l,p=c-d,g=o.left+l;const w=r.calcMinWidth(),m=o.calcMinWidth();d<w&&p>m?(d=w,p=c-d,g=r.left+d):p<m&&d>w&&(p=m,d=c-p,g=r.left+d),r.width=d,o.width=p,o.left=g}n&&s&&(n.width+=i,s.width+=i)}get height(){return this._height}set height(t){const i=t-this._height;this._height=t;const[n,o,s,r]=this.getChildren();if(n&&s){const a=n.height+s.height,l=i*(n.height/a),c=a+i;let d=n.height+l,p=c-d,g=s.top+l;const w=n.calcMinHeight(),m=s.calcMinHeight();d<w&&p>m?(d=w,p=c-d,g=n.top+d):p<m&&d>w&&(p=m,d=c-p,g=n.top+d),n.height=d,s.height=p,s.top=g}r&&o&&(r.height+=i,o.height+=i)}}const L={size:"50%",position:h.Left};class M{constructor({parentRect:t,children:i,siblingConfigNode:n,id:o,minWidth:s,minHeight:r,position:a,size:l,...c}){y(this,"left"),y(this,"top"),y(this,"width"),y(this,"height"),this.parentRect=t,this.children=i,this.siblingConfigNode=n,this.id=o,this.minWidth=s,this.minHeight=r,this.position=this.getPosition(a),this.size=this.getSize(l),this.nonCoreData=c,this.setBounds()}getPosition(t){if(!this.siblingConfigNode)return t;const i=X(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 R(t);if(!t){if(this.siblingConfigNode.size<1)return 1-this.siblingConfigNode.size;if(this.siblingConfigNode.position===h.Left||this.siblingConfigNode.position===h.Right)return this.parentRect.width-this.siblingConfigNode.width;if(this.siblingConfigNode.position===h.Top||this.siblingConfigNode.position===h.Bottom)return this.parentRect.height-this.siblingConfigNode.height}const i=R(t);if(i<1){if(i+this.siblingConfigNode.size!==1)throw new Error("[bwin] Sum of sibling sizes is not equal to 1")}else{if((this.position===h.Left||this.position===h.Right)&&i+this.siblingConfigNode.size!==this.parentRect.width)throw new Error("[bwin] Sum of sibling sizes is not equal to parent width");if((this.position===h.Top||this.position===h.Bottom)&&i+this.siblingConfigNode.size!==this.parentRect.height)throw new Error("[bwin] Sum of sibling sizes is not equal to parent height")}return i}setBounds(){if(this.position===h.Root)this.left=0,this.top=0,this.width=this.parentRect.width,this.height=this.parentRect.height;else if(this.position===h.Left){const t=this.size<1?this.parentRect.width*this.size:this.size;this.left=this.parentRect.left,this.top=this.parentRect.top,this.width=t,this.height=this.parentRect.height}else if(this.position===h.Right){const t=this.size<1?this.parentRect.width*this.size:this.size;this.left=this.parentRect.left+this.parentRect.width-t,this.top=this.parentRect.top,this.width=t,this.height=this.parentRect.height}else if(this.position===h.Top){const t=this.size<1?this.parentRect.height*this.size:this.size;this.left=this.parentRect.left,this.top=this.parentRect.top,this.width=this.parentRect.width,this.height=t}else if(this.position===h.Bottom){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 f({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(F(t))return t;if(Array.isArray(t))return{children:t};if(typeof t=="string"||typeof t=="number"){const i=R(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:o,minWidth:s,minHeight:r,...a}){return new M({parentRect:this,size:t??L.size,position:i??L.position,children:n,id:o,minWidth:s,minHeight:r,...a})}createSecondaryConfigNode({size:t,position:i,children:n,id:o,minWidth:s,minHeight:r,...a},l){return new M({parentRect:this,size:t,position:i,children:n,siblingConfigNode:l,id:o,minWidth:s,minHeight:r,...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 o,s;return!i.size&&!i.position&&n?(n.position||(n.position=h.Right),o=this.createPrimaryConfigNode(n),s=this.createSecondaryConfigNode(i,o)):(o=this.createPrimaryConfigNode(i),s=this.createSecondaryConfigNode(n,o)),o&&s&&(t.children.push(o.buildSashTree()),t.children.push(s.buildSashTree())),t}}const D={width:333,height:333},x={fitContainer:!1};class Q extends M{constructor({id:t,children:i,width:n=D.width,height:o=D.height,fitContainer:s=x.fitContainer,...r}={...D,...x}){super({id:t,children:i,size:NaN,position:h.Root,parentRect:{width:n,height:o},...r}),this.fitContainer=s}}class tt extends f{constructor(t=E){super({...t,position:h.Root}),Object.assign(this,x)}}const et={createPane(e){const t=S(e);return e.store.droppable===!1&&t.setAttribute("can-drop","false"),t},onPaneCreate(e,t){t.store.content&&e.append(C(t.store.content)),this!=null&&this.debug&&(e.style.backgroundColor=_(),e.innerHTML="",e.append(T(e)))},updatePane(e){return it(e)},onPaneUpdate(e,t){this!=null&&this.debug&&(e.innerHTML="",e.append(T(e)))},addPane(e,t){if(!t)throw new Error("[bwin] Position is required when adding pane");const i=this.rootSash.getById(e);if(!i)throw new Error("[bwin] Parent sash not found when adding pane");const n=rt(i,t);return i.id=P(),this.update(),n},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=P(),i.children.length===0?(t.domNode=i.domNode,t.domNode.setAttribute("sash-id",t.id),t.children=[]):(t.children=i.children,i.position===h.Left?i.width=t.width:i.position===h.Right?(i.width=t.width,i.left=t.left):i.position===h.Top?i.height=t.height:i.position===h.Bottom&&(i.height=t.height,i.top=t.top)),this.update()}};function S(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 it(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 nt(e){const t=new f({top:e.top,left:e.left,width:e.width/2,height:e.height,position:h.Left}),i=new f({top:e.top,left:e.left+t.width,width:e.width/2,height:e.height,position:h.Right}),n=S(i);return i.domNode=n,N(n,e.domNode),e.addChild(t),e.addChild(i),t}function st(e){const t=new f({top:e.top,left:e.left,width:e.width/2,height:e.height,position:h.Left}),i=S(t);t.domNode=i,N(i,e.domNode);const n=new f({top:e.top,left:e.left+t.width,width:e.width/2,height:e.height,position:h.Right});return e.addChild(t),e.addChild(n),n}function ot(e){const t=new f({top:e.top,left:e.left,width:e.width,height:e.height/2,position:h.Top}),i=new f({top:e.top+t.height,left:e.left,width:e.width,height:e.height/2,position:h.Bottom}),n=S(i);return i.domNode=n,N(n,e.domNode),e.addChild(t),e.addChild(i),t}function ht(e){const t=new f({top:e.top,left:e.left,width:e.width,height:e.height/2,position:h.Top}),i=S(t);t.domNode=i,N(i,e.domNode);const n=new f({top:e.top+t.height,left:e.left,width:e.width,height:e.height/2,position:h.Bottom});return e.addChild(t),e.addChild(n),n}function rt(e,t){if(t===h.Left)return nt(e);if(t===h.Right)return st(e);if(t===h.Top)return ot(e);if(t===h.Bottom)return ht(e)}function T(e){const t=document.createElement("pre");t.style.fontSize="10px";const i=`
+id: ${e.getAttribute("sash-id")}
+top: ${e.style.top}
+left: ${e.style.left}
+width: ${e.style.width}
+height: ${e.style.height}
+position: ${e.getAttribute("position")}
+`;return t.innerHTML=i.trim(),t}const at={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},glaze(e){this.rootSash.walk(t=>{let i=null;t.children.length>0?(i=this.createMuntin(t),this.onMuntinCreate(i,t),e.append(i)):(i=this.createPane(t),this.onPaneCreate(i,t),e.prepend(i)),t.domNode=i})},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))})}},lt={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){}},dt={fitContainer:!1,enableFitContainer(){new ResizeObserver(e=>{for(const t of e)t.target===this.containerElement&&this.fitContainer&&(this.rootSash.width=t.contentRect.width,this.rootSash.height=t.contentRect.height,this.update())}).observe(this.containerElement)}},ct={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,o]=this.activeMuntinSash.getChildren(),s=this.activeMuntinSash.isLeftRightSplit(),r=this.activeMuntinSash.isTopBottomSplit();if(s&&o&&i){const a=e.pageX-this.lastX,l=o.width+a,c=i.width-a;if(l<=o.calcMinWidth()||c<=i.calcMinWidth())return;o.width=l,i.width=c,i.left=i.left+a,this.update(),this.lastX=e.pageX}else if(r&&t&&n){const a=e.pageY-this.lastY,l=t.height+a,c=n.height-a;if(l<=t.calcMinHeight()||c<=n.calcMinHeight())return;t.height=l,n.height=c,n.top=n.top+a,this.update(),this.lastY=e.pageY}}),document.addEventListener("mouseup",()=>{this.isResizeStarted=!1,this.activeMuntinSash=null,this.revertResizeStyles()})}},ut={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=J(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})}};class W{constructor(t){y(this,"windowElement",null),y(this,"containerElement",null),y(this,"debug",!1);let i=null;t instanceof tt?(i=t,this.rootSash=t):(i=new Q(t),this.rootSash=i.buildSashTree()),this.fitContainer=i.fitContainer}enableFeatures(){this.enableResize(),this.enableDrop(),this.fitContainer&&this.enableFitContainer()}mount(t){const i=this.createWindow();this.glaze(i),this.containerElement=t,this.containerElement.append(i),this.windowElement=i,this.enableFeatures()}static assemble(...t){t.forEach(i=>{U(this.prototype,i)})}}W.assemble(at,lt,et,dt,ut,ct);function B(e){if(e.tagName==="BW-PANE")return e.getAttribute("sash-id");const t=e.closest("bw-pane");if(!t)throw new Error("[bwin] Pane element not found");return t.getAttribute("sash-id")}const H="bw-glass-action--close",$=[{label:"",className:H,onClick:(e,t)=>{const i=B(e.target);t.removePane(i)}}],z={title:null,content:null,tabs:[],actions:void 0,draggable:!0};class I{constructor({title:t=z.title,content:i=z.content,tabs:n=z.tabs,actions:o=z.actions,draggable:s=z.draggable,sash:r,binaryWindow:a}){y(this,"domNode"),this.title=t,this.content=i,this.tabs=n,this.actions=o,this.sash=r,this.draggable=s,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 o=document.createElement("bw-glass-title");o.append(C(this.title)),t.append(o)}t.setAttribute("can-drag",this.draggable),t.append(this.createActions());const i=document.createElement("bw-glass-content"),n=C(this.content);n&&i.append(n),this.domNode=document.createElement("bw-glass"),this.domNode.append(t,i)}createTabs(){const t=document.createElement("bw-glass-tab-container");for(const i of this.tabs){const n=(i==null?void 0:i.label)??i,o=C(`<button class="bw-glass-tab">${n}</button>`);t.append(o)}return t}createActions(){const t=document.createElement("bw-glass-action-container"),i=this.actions===void 0?$:Array.isArray(this.actions)?this.actions:[];for(const n of i){const o=(n==null?void 0:n.label)??n,s=n.className?`bw-glass-action ${n.className}`:"bw-glass-action",r=C(`<button class="${s}">${o}</button>`);typeof n.onClick=="function"&&r.addEventListener("click",a=>{n.onClick(a,this.binaryWindow)}),t.append(r)}return t}get contentElement(){return this.domNode.querySelector("bw-glass-content")}get headerElement(){return this.domNode.querySelector("bw-glass-header")}}const pt={enableObservers(){this.observeCloseButtons()},observeCloseButtons(){const e=`.${H}`;new MutationObserver(t=>{t.forEach(i=>{if(i.type==="childList")if(this.windowElement.querySelectorAll("bw-pane").length===1){const n=this.windowElement.querySelector(e);n&&n.setAttribute("disabled","")}else this.windowElement.querySelectorAll(e).forEach(n=>{n.removeAttribute("disabled")})})}).observe(this.windowElement,{childList:!0})}},gt={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"),o=this.activeDropPaneEl.getAttribute("can-drop")!=="false";q(n,this.activeDropPaneEl),n.setAttribute("can-drop",o);return}else{const n=B(this.activeDragGlassEl);this.addPane(t.id,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)})}},ft={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 G extends W{enableFeatures(){super.enableFeatures(),this.enableObservers(),this.enableDrag()}onPaneCreate(t,i){const n=new I({...i.store,sash:i,binaryWindow:this});t.innerHTML="",t.append(n.domNode),this.debug&&n.contentElement.prepend(`${i.id}`)}onPaneUpdate(){}addGlass(t,i,n){const o=this.addPane(t,i),s=new I({...n,sash:o,binaryWindow:this});o.domNode.append(s.domNode)}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 o=n.domNode.querySelector("bw-glass");o&&o.remove()}}}G.assemble(pt,gt,ft);const v=4;function wt({sash:e}){var d;const t=u.useRef(),i=e.leftChild,n=e.topChild;let o,s,r,a,l,c;return i?(o=v,s=e.height-v,r=e.top+v/2,a=e.left+i.width-v/2,l=!0):n&&(o=e.width-v,s=v,r=e.top+n.height-v/2,a=e.left+v/2,c=!0),u.useEffect(()=>{e.domNode=t.current},[]),u.createElement("bw-muntin",{"sash-id":e.id,style:{width:o,height:s,top:r,left:a},vertical:l,horizontal:c,resizable:((d=e.store)==null?void 0:d.resizable)===!1?"false":"true",ref:t})}function mt({sash:e,bwin:t}){var d,p,g,w,m;const i=u.useRef(),{left:n,top:o,width:s,height:r,id:a,position:l}=e;u.useEffect(()=>{e.domNode=i.current},[]);const c=((d=e.store)==null?void 0:d.actions)===void 0?$:Array.isArray(e.store.actions)?e.store.actions:[];return u.createElement("bw-pane",{"sash-id":a,position:l,style:{left:n,top:o,width:s,height:r},"can-drop":((p=e.store)==null?void 0:p.droppable)===!1?"false":"true",ref:i},u.createElement("bw-glass",null,u.createElement("bw-glass-header",{"can-drag":((g=e.store)==null?void 0:g.draggable)===!1?"false":"true"},((w=e.store)==null?void 0:w.title)&&u.createElement("bw-glass-title",null,e.store.title),c.length>0&&u.createElement("bw-glass-action-container",null,c.map((A,yt)=>{const Et=A.className?`bw-glass-action ${A.className}`:"bw-glass-action";return u.createElement("button",{className:Et,key:yt,onClick:vt=>A.onClick(vt,t)},A.label)}))),u.createElement("bw-glass-content",null,(m=e.store)==null?void 0:m.content)))}function bt(e){const t=u.useRef(),i=new G(e),n=[],o=[];return i.rootSash.walk(s=>{s.children.length>0?n.push(s):o.push(s)}),u.useEffect(()=>{const s=t.current;s!=null&&s.parentElement&&(i.windowElement=s,i.containerElement=s.parentElement,i.enableFeatures())},[]),u.createElement("bw-window",{"sash-id":i.rootSash.id,style:{width:i.rootSash.width,height:i.rootSash.height},ref:t},o.map(s=>u.createElement(mt,{key:s.id,sash:s,bwin:i})),n.map(s=>u.createElement(wt,{key:s.id,sash:s})))}b.BUILTIN_ACTIONS=$,b.Window=bt,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "react-bwin",
+	"description": "A tiling window manager in React based on Binary Window library",
+	"version": "0.1.0",
+	"type": "module",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/bhjsdev/react-bwin.git"
+	},
+	"keywords": [
+		"react",
+		"drag",
+		"drop",
+		"resize",
+		"window-manager",
+		"tiling-window-manager"
+	],
+	"author": "Bhjs Dev <bhjsdev@gmail.com>",
+	"license": "MIT",
+	"bugs": "https://github.com/bhjsdev/react-bwin/issues",
+	"homepage": "https://github.com/bhjsdev/react-bwin#readme",
+	"files": [
+		"dist"
+	],
+	"main": "./dist/react-bwin.js",
+	"module": "./dist/react-bwin.js",
+	"types": "./dist/react-bwin.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/react-bwin.d.ts",
+			"import": "./dist/react-bwin.js"
+		},
+		"./react-bwin.css": "./dist/react-bwin.css"
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build"
+	},
+	"peerDependencies": {
+		"react": ">=16.8.0",
+		"react-dom": ">=16.8.0"
+	},
+	"devDependencies": {
+		"@types/node": "^22.10.1",
+		"@types/react": "^16.14.62",
+		"@types/react-dom": "^16.9.24",
+		"@vitejs/plugin-react": "^4.3.4",
+		"bwin": "0.1.1",
+		"prettier": "^3.4.1",
+		"react": "^16.14.0",
+		"react-dom": "^16.14.0",
+		"typescript": "^5.6.2",
+		"vite": "^6.0.1"
+	}
+}